<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <div class="crash__connected">
              <canvas id="crashChart" height="642" width="800" style="width: 100%; height: auto;"></canvas>
              <h2><span id="chartInfo">Загрузка</span></h2>
            </div>
      </v-container>
    </v-content>
  </v-app>
</div>

.crash__connected {
    max-width: 50%; 
    pointer-events: none;
    border-radius: 6px 6px;
    position: relative;
    font-size: 25px;
    z-index: 2;
    margin-top: 20px;
}

.crash__connected h2 {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color: #1976d2;
    text-shadow: 1px 1px 2px rgba(25, 29, 36, 0.30);
    line-height: 38px;
}

// Looking for the v1.5 template?
// https://codepen.io/johnjleider/pen/GVoaNe

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      chart: null,
      chartData: {
        labels: [0],
        datasets: [{
          label: '',
          backgroundColor: 'rgba(73, 134, 245, 0.65)',
          borderColor: '#1976d2',
          pointRadius: 0,
          borderWidth: 3,
          data: [0],
        }]
      },
      chartOption: {
        animation: false,
        title: {
          display: false
        },
        legend: {
          display: false,
        },
        layout: {
          padding: {
            left: 3
          }
        },
        scales: {
          xAxes: [{
            gridLines: {
              display: false,
            },
            ticks: {
              min: 1,
              stepSize: 1,
              display: false,
            }
          }],
          yAxes: [{
            gridLines: {
              display: false,
            },
            ticks: {
              beginAtZero:true,
              // padding: 10,
              min: 1,
              max: 2,
              stepSize: 0.3,
              fontSize: 13,
              fontStyle: 500,
              fontFamily: "'Open Sans', sans-serif",
              fontColor: '#828f9a',
              callback: function(value, index, values) {
                if(value != '' && value.toFixed(1) == 1) return 0;
                if(!(index % parseInt(values.length / 5))) {
                  return 'x' + value.toFixed(1);
                  }
              }
            }
          }]
        }
      }
    }
  },
  mounted(){
    let canvas = document.getElementById('crashChart'),
    ctx    = canvas.getContext('2d')
  
    // this.socket = io.connect(':7777');
  
Chart.plugins.register({
    afterDraw: function(chart) {
      var ctx2 = chart,
        max = ctx2.chartArea.left-5,
        width = ctx2.width,
        height = ctx2.height - 10;
      ctx.save(),
      ctx.globalCompositeOperation = "destination-over";
      var lr = Math.round((width - 6) / 83.5) + 1,
        td = Math.round((height - 1) / 82.5) + 1;
      ctx.lineWidth = .5,
      ctx.strokeStyle = "#465166";
      for (var s = 0; s < lr; s++) {
        var c = max + 6 + 83 * s;
        ctx.beginPath(),
        ctx.setLineDash([4, 3]),
        0 === s && ctx.setLineDash([]),
        ctx.moveTo(c, 0),
        ctx.lineTo(c, height),
        ctx.stroke(),
        ctx.closePath()
      }
      for (var u = 0; u < td; u++) {
        var h = height - (88.8 * u + (u + 1 === td ? 1 : 0)),
          l = width - 6 - .5 - 9;
        ctx.beginPath(),
        ctx.setLineDash([4, 3]),
        0 === u && ctx.setLineDash([]),
        ctx.moveTo(max + 6, h),
        ctx.lineTo(l + max, h),
        ctx.stroke(),
        ctx.closePath()
      }
      ctx.globalCompositeOperation = "source-over",
      ctx.restore()
    }
  });


let shadowLine = Chart.controllers.line.extend({
    initialize: function () {
      Chart.controllers.line.prototype.initialize.apply(this, arguments)
      
      var ctx = this.chart.ctx
      var originalStroke = ctx.stroke
      ctx.stroke = function () {
        ctx.save()
        ctx.shadowColor = 'rgba(0,0,0,0.3)'
        ctx.shadowOffsetX = 4
        ctx.shadowOffsetY = 4
        ctx.shadowBlur = 15
        originalStroke.apply(this, arguments)
        ctx.restore()
      }
    }
  })
  Chart.controllers.shadowLine = shadowLine

  this.chart = new Chart(ctx, {
    type: 'shadowLine',
    data: this.chartData,
    options: this.chartOption
  })
  
  var float = parseFloat(2000); // максимальное значение
    var i = 0;
    var now = 0;

    var animateInterval = setInterval(async() => {
        i++;
        now = parseFloat(Math.pow(Math.E, 0.00006*i*1000/20));
        let crashed = false;
        if(now > float) {
            clearInterval(animateInterval);
            now = float;
            crashed = true;
        }
    this.chart.data.labels.push(i)
    this.chart.data.datasets[0].data.push(now);
    this.chart.options.scales.yAxes[0].ticks.max = Math.max(2, now);
    this.chart.update();
        
        $('#chartInfo').text('x' + now.toFixed(2));
    }, 50)
  }
  })