Vue

vue-scaled-svg-diagram

by Gerasim_v_Gerasimov

HTML

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

CSS

.sample rect {
  fill: yellow;
  stroke: green;
  stroke-width: 4;
  transition: all 350ms;
}

.wrapper {
  border: 1px red solid;
  width: 400px;
  height: 100px;
  overflow: hidden;
}

Vue

new Vue({
  el: "#app",
  data() {
    return {
      d: "M 0 0",
      Samples: 0, //номер текущего сэмпла
      maxSamples: 400, //кол-во сэмплов в 100%-ах ширины
      wrapHeight: 100, //высота в которую надо вписать изображение
      maxY: 0,
      scales: {
        w: 1,
        h: 1
      },
      timePoints: [],
      TimeM: 100
    }
  },
  mounted: function() {
    this.getScales()
    this.update()
  },
  methods: {
    getScales() {
      const {
        width,
        height
      } = this.$refs.loadprogresser.getBoundingClientRect()
      this.scales.w = width / this.maxSamples
      this.wrapHeight = height
      console.log(this.scales.w, width, this.maxSamples)
    },
    getVScale() { //шкала по вертикали
      this.scales.h = (this.maxY == 0) ? 0 : this.wrapHeight / this.maxY
    },
    //передаю значения выделяю максимум и выдаю шкалу относительно этого максимума
    getYMax({
      value = 0
    }) {
      if (value > this.maxY) this.maxY = value
    },
    addTime({
      time = 0
    }) { //добавление данных, а так как я добавляю
      //время выполнения операции то и метод назван addTime
      if (this.Samples < this.maxSamples) {
        this.getYMax({
          value: time
        })
        this.getVScale()
        this.timePoints.push(time) //интересуют Int
        this.Samples++;
      }
    },
    getSVGTimePoints() {
      //теперь создаю строку для Path
      let predY = 0
      let path = this.timePoints.reduce((str, item) => {
        //тег "l" означает что в координатах передаётся приращение
        //к предыдущей точке, а не абсолютные координаты
        let dY = (item - predY) * this.scales.h
        predY = item
        return str + `l ${this.scales.w} ${dY} `
      }, 'M 0 0 ')
      path += `L ${this.timePoints.length * this.scales.w} 0` // Z` контур можно не замыкать
      return path
    },
    update() {
      //постепенно увеличиваю диапазон случайного числа
      //чтобы отработать вертикальное масштабирование
     ...