import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
    mixins: [Line, reactiveProp],
    props: ['options'],
    mounted() {
        this.renderChart(this.data, this.options)
    }
}

export const renewDelay = (message, datacollection, maxCnt, offset) => {

    offset = offset ? offset : 0

    //ラベルは「時：分：秒」で表示
    const date = new Date(message.timestamp)
    const now = new Date(Date.now() + offset * 1000) //offsetを加算してやると正しい時刻になる
    const delay_ticker = now - date
    const time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
    
    //data
    datacollection.labels ? datacollection.labels.push(time) : console.log("error: labels dosen't exists")
    if (datacollection.datasets) {
        datacollection.datasets[0].data.push(delay_ticker)
    } else {
        console.log("error: datasets dosen't exists")
    }

    //画面に表示する件数を超えたらshiftで削る
    while (datacollection.labels.length > maxCnt) {
        datacollection.labels.shift()
        datacollection.datasets.forEach((array) => {
            array.data.shift()
        })
    }

    return {
        labels: datacollection.labels,
        datasets: [
            {
                label: "Ticker Delay",
                data: datacollection.datasets[0].data,
                fill: false,
                borderColor: "green"
            },
        ]
    }
}

<template>
  <div>
    <p>Delay: {{delay_time}}ms</p>
    <DelayChart :chart-data="datacollection" :options="options" />

    <!-- options -->
    <v-expansion-panels>
      <v-expansion-panel>
        <v-expansion-panel-header>Options(Delay))</v-expansion-panel-header>
        <v-expansion-panel-content>
          <v-switch v-model="delay_on" :label="delay_on ? 'ON' : 'OFF'"></v-switch>
          <v-slider
            v-model="plot_max"
            label="X軸の表示件数"
            step="1"
            min="1"
            max="1000"
            thumb-label="always"
            ticks
          ></v-slider>
          <v-row>
            <v-col cols="6">
              <v-text-field v-model="offset" label="誤差補正" suffix="秒" :rules="[numberRule]"></v-text-field>
            </v-col>
            <v-col cols="6">
              <v-radio-group v-model="isLocalDelay" :mandatory="true" row>
                <v-radio label="遅" :value="true"></v-radio>
                <v-radio label="進" :value="false"></v-radio>
              </v-radio-group>
            </v-col>※
            <a href="https://time.is/">Time.is</a>を参考にするのがおすすめ
          </v-row>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>

<script>
import DelayChart, { renewDelay } from "./DelayChart.js";

export default {
  components: {
    DelayChart
  },
  props: ["message"],
  data: () => ({
    numberRule: v => {
      if (!v.trim()) return true;
      if (!isNaN(parseFloat(v)) && v >= 0) return true;
      return "0以上の数値を入力して下さい。";
    },
    offset: 0.0,
    isLocalDelay: true,
    delay_on: true,
    plot_max: 20,
    datacollection: null,
    options: null,
    subcollection: {
      labels: [0],
      datasets: [
        {
          label: "Ticker Delay",
          data: [0],
          fill: false,
          borderColor: "green"
        }
      ]
    }
  }),
  methods: {
    fillData() {
      this.options = {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          yAxes: [
            {
              position: "right"
            }
          ]
        }
      };
    }
  },
  computed: {
    delay_time() {
      const offset =
        this.isLocalDelay === true ? this.offset : this.offset * -1;
      const date = new Date(Date.now() + offset * 1000);
      const stamp = new Date(this.message.timestamp);
      const delay = date - stamp;
      return delay;
    }
  },
  watch: {
    message() {
      const offset =
        this.isLocalDelay === true ? this.offset : this.offset * -1;
      if (this.delay_on) {
        this.datacollection = renewDelay(
          this.message,
          this.subcollection,
          this.plot_max,
          offset
        );
      }
    }
  },
  mounted() {
    this.fillData();
  }
};
</script>