Vue

vue-path-diagram

by Gerasim_v_Gerasimov

HTML

<div id="app">
    <svg class="sample" version="1.1" xmlns="http://www.w3.org/2000/svg" width="400px" height="100px">
        <rect x=0 y=0 width="400px" height="100px"/>
        <path :d="d" fill="transparent" stroke="black"/>
    </svg>
  </div>

CSS

.sample rect {
	fill: yellow;
	stroke: green;
	stroke-width: 4;
}

Vue

new Vue({
  el: "#app",
  data(){
    return {
      d:"M 0 0",
      width:400, //ширина в которую надо вписать изображение
      timePoints:[],
      cnt:0
    }
  },
  created: function () {
    this.update()
  },
  methods:{
    addTime:function ({time = 0}){
      this.timePoints.push(time) //интересуют Int
    },
    getSVGTimePoints:function(){
      //теперь создаю строку для Path
      let predY = 0
      let path = this.timePoints.reduce((str, item)=>{
        let dY = item - predY
        predY = item
        return str + `l 1 ${dY} `
      },'M 0 0 ')
      path +=`L ${this.timePoints.length} 0`// Z` контур можно не замыкать
      return path
    },
    update:function(){
      if (this.cnt < this.width) {
        this.cnt ++
        this.addTime({time:(100*Math.random() | 0)})
        this.d = this.getSVGTimePoints()
        setTimeout(this.update, 10)    
      }  
    }
  }  
})