Vue

vue-scaled-svg-diagram-transform-textposition

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%"/>
    <g :transform="transform">
      <path :d="d" fill="transparent" stroke="black"/>
    </g>
    <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle">{{TextPrc}}</text>
   </svg>
</div>

CSS

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

.sample text {
  opacity: 0.8;
}
.wrapper {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  border: 1px red solid;
  width: 400px;
  height: 100px;
  font-size: 64px;
  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,
      transform:'scale( 1, -1) translate(0,0) rotate(0)',
      TextPrc: '0%'
    }
  },
  mounted: function() {
    this.getScales()
    this.update()
  },
  methods: {
    getScales() {
      const {
        width,
        height
      } = this.$refs.loadprogresser.getBoundingClientRect()
      this.scales.w = width / this.maxSamples
      this.wrapHeight = height
      this.transform = `scale( 1, -1) translate(0,${-this.wrapHeight})`
    },
    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++;
        this.TextPrc = `${((this.Samples * 100)/this.maxSamples) | 0} %`
      }
    },
    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` контур можно не...