
<script setup>

import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
import Chart from 'chart.js/auto';
import { prettyDecimalSize, formatDate } from '@cloudron/pankow/utils';
import annotationPlugin from 'chartjs-plugin-annotation';

Chart.register(annotationPlugin);

const LIVE_REFRESH_INTERVAL_MSECS = 1000; // for realtime graphs, the time (x axis) advances at this pace

const graphNode = useTemplateRef('graphNode');
const tooltipElem = useTemplateRef('tooltipElem');

let graph = null;
let liveRefreshIntervalId = null;
let yscaleUnit = null;

const props = defineProps({
  title: String,
  subtext: String,
  footer: String,
  period: Object, // { hours, format, tooltpFormat }
  yscale: String, // cpu, memory
  memory: Number,
  cpuCount: Number,
  highMark: Number,
  highMarkLabel: String,
});

function renderTooltip(context) {
  // console.log(context); { chart, tooltip } tooltip has { title, body }
  if (!tooltipElem.value) return;

  const { /*chart, */ tooltip } = context;

  if (tooltip.opacity === 0) {
    tooltipElem.value.style.opacity = 0;
    return;
  }

  // datapoints are in sync with the indexing of body
  const { title, body, labelColors, dataPoints } = tooltip; // these were computed in the "callback" in tooltip configuration
  if (body) {
    const titleLines = title || [];
    const bodyLines = body.map(item => { return { label: item.lines }; });

    let innerHtml = `<div class="graphs-tooltip-title">${titleLines[0]}</div>`;

    // first amend the value so we know the dataPoints index, then sort and render
    bodyLines.forEach((body, i) => {
      body.value = dataPoints[i].parsed?.y || 0;
      body.color = labelColors[i].borderColor;
    });
    bodyLines.sort((a, b) => {
      return b.value - a.value;
    });
    bodyLines.slice(0, 5).forEach(body => {
      innerHtml += `<div style="color: ${body.color}" class="graphs-tooltip-item">${body.label}</div>`;
    });

    if (bodyLines.length > 5) innerHtml += '<div class="graphs-tooltip-item graphs-tooltip-ellipsis">&#8943;</div>';

    tooltipElem.value.innerHTML = innerHtml;
  }

  tooltipElem.value.style.opacity = 1;
  tooltipElem.value.style.position = 'absolute';

  tooltipElem.value.classList.remove('graphs-tooltip-caret-left', 'graphs-tooltip-caret-right');

  if (tooltip.chart.width/2 < tooltip.caretX) {
    tooltipElem.value.style.right = (tooltip.chart.width - tooltip.caretX) + 'px';
    tooltipElem.value.style.left = 'unset';
    tooltipElem.value.classList.add('graphs-tooltip-caret-right');
  } else {
    tooltipElem.value.style.right = 'unset';
    tooltipElem.value.style.left = tooltip.caretX + 'px';
    tooltipElem.value.classList.add('graphs-tooltip-caret-left');
  }

  tooltipElem.value.style.top = '0px';
  tooltipElem.value.style.height = '100%';
}

function createGraphOptions({ yscale, period, highMark }) {
  let startTime, endTime, stepSize, count; // x axis configuration values

  const now = Date.now();

  if (period.hours === 0) {
    startTime = now - 5*60*1000; // for realtime graph, we just show last 5mins
    endTime = now;
    stepSize = 60*1000; // a tick for a minute
  } else {
    endTime = Math.ceil(Date.now() / (1000*5*60)) * (1000*5*60); // round up to nearest minute for pretty values. otherwise, we have to display seconds
    startTime = endTime - period.hours*60*60*1000;
    count = 7; // anything more than 7 will not work for "7 days".
  }

  return {
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false,
        position: 'bottom' // not used, hidden since color code is shown in tooltip
      },
      tooltip: {
        enabled: false,
        callbacks: { // passed as title,body to the tooltip renderer
          title: (tooltipItem) => formatDate(period.tooltipFormat, tooltipItem[0].raw.x),
          label: (tooltipItem) => {
            const datasetLabel = tooltipItem.chart.data.datasets[tooltipItem.datasetIndex].label;
            return `${datasetLabel}: <span>${yscale.ticks.callback(tooltipItem.raw.y)}</span>`;
          }
        },
        external: renderTooltip,
      },
      annotation: {
        annotations: {
          high: {
            display: highMark !== null,
            type: 'line',
            yMin: highMark,
            yMax: highMark,
            borderColor: 'rgb(139, 0, 0)',
            borderWidth: 0.5,
            label: {
              display: true,
              content: `Max ${props.title}`,
              position: 'end', // 'start', 'center', or 'end'
              backgroundColor: 'transparent',
              color: 'rgb(139, 0, 0)',
              yAdjust: -6,
              font: {
                size: 10
              }
            }
          }
        }
      },
    },
    scales: {
      x: {
        // we used to use 'time' type but it relies on the data to generate ticks. we may not have data for our time periods
        type: 'linear',
        min: startTime,
        max: endTime,
        ticks: {
          autoSkip: true, // skip tick labels as needed
          autoSkipPadding: 20, // padding between ticks
          maxRotation: 0, // don't rotate the labels
          callback: function (value) {
            if (period.hours === 0) return `${5-(value-this.min)/60000}min`;
            return formatDate(period.tickFormat, value);
          },
          count, // ignored when stepSize is set
          stepSize // for realtime graph, generate steps of 1min and appropriate tick text
        },
        grid: {
          drawOnChartArea: false,
        },
      },
      y: yscale,
    },
    interaction: {
      intersect: false,
      mode: 'nearest',
      axis: 'x'
    }
  };
}

function transformData(data) {
  const x = data[1]*1000; // convert to msecs
  let y;
  if (props.yscale === 'memory') {
    y = yscaleUnit === 'GiB' ? data[0] / 1024 / 1024 / 1024 : data[0] / 1024 / 1024;
  } else { // in non-memory case, for relative values like cpu, if null make it 0
    y = data[0] || 0;
  }
  return { x, y };
}

function setDatasets(datasets) {
  graph.data = { datasets: [] };

  for (const dataset of datasets) {
    graph.data.datasets.push({
      label: dataset.label,
      data: dataset.data.map(transformData),
      pointRadius: 0,
      borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
      tension: 0.4,
      showLine: true,
      fill: true,
      color: dataset.color,
      stack: dataset.stack || 'stackgroup', // put them all in same stackgroup
    });
  }

  graph.update('none');
}

function pruneGraphData(dataset, options) {
  while (dataset.data.length && (dataset.data[0].x < options.scales.x.min)) { // remove elements beyond our time window
    dataset.data.shift();
  }
}

function advance() {
  // advance is called in a timer and when the browser tab is in the background , it is unreliable. Use absolute time to set the scale
  const now = Date.now();
  graph.options.scales.x.min = now - 5*60*1000;
  graph.options.scales.x.max = now;
  graph.update('none');
}

function pushData(datasetIndex, ...data) {
  for (const [index, item] of data.entries()) {
    graph.data.datasets[datasetIndex+index].data.push(transformData(item));
    pruneGraphData(graph.data.datasets[datasetIndex+index], graph.options);
  }
}

function onPeriodChanged() {
  if (liveRefreshIntervalId) {
    clearInterval(liveRefreshIntervalId);
    liveRefreshIntervalId = null;
  }

  // CPU and Memory graph have known min/max set and auto-scaling gets disabled
  // Disk and Network graphs auto-scale the y values.

  let yscale = null, highMark = null;

  if (props.yscale === 'cpu') {
    yscale = {
      type: 'linear',
      min: 0,
      max: props.cpuCount * 100,
      ticks: {
        callback: (value) => `${value.toFixed(2).replace('.00', '')}%`,
        maxTicksLimit: 6 // max tick labels to show
      },
      beginAtZero: true,
    };
    if (props.highMark) highMark = props.highMark * 100;
  } else if (props.yscale === 'memory') {
    const giB = 1024 * 1024 * 1024;
    const roundedMemoryGiB = Math.ceil(props.memory / giB);
    yscaleUnit = roundedMemoryGiB === 1 ? 'MiB' : 'GiB';
    const roundedMemory = yscaleUnit === 'GiB' ? roundedMemoryGiB : roundedMemoryGiB * 1024;

    yscale = {
      type: 'linear',
      min: 0,
      max: roundedMemory,
      ticks: {
        stepSize: yscaleUnit === 'GiB' ? 1 : 256,
        autoSkip: true, // skip tick labels as needed
        autoSkipPadding: 20, // padding between ticks
        callback: (value) => `${value.toFixed(2).replace('.00', '')} ${yscaleUnit}`,
        maxTicksLimit: 8 // max tick labels to show
      },
      beginAtZero: true,
      stacked: true,
    };

    if (props.highMark) highMark = yscaleUnit === 'GiB' ? props.highMark/giB : props.highMark/(1024*1024);
  } else if (props.yscale === 'disk') {
    yscale = {
      type: 'linear',
      min: 0,
      grace: 100*1000, // add 100kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
      ticks: {
        callback: (value) => `${prettyDecimalSize(value)}/s`,
        maxTicksLimit: 6 // max tick labels to show
      },
      beginAtZero: true,
      stacked: false,
    };
  } else if (props.yscale === 'network') {
    yscale = {
      type: 'linear',
      min: 0,
      grace: 50*1000, // add 50kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
      ticks: {
        callback: (value) => `${prettyDecimalSize(value)}/s`,
        maxTicksLimit: 6 // max tick labels to show
      },
      beginAtZero: true,
      stacked: false,
    };
  }

  // this sets a min 'x' based on current timestamp. so it has to re-created every time the period changes
  const graphOptions = createGraphOptions({ yscale, period: props.period, highMark });

  if (!graph) {
    graph = new Chart(graphNode.value, { type: 'line', data: { datasets: [] }, options: graphOptions });
  } else {
    graph.options = graphOptions;
    graph.update('none');
  }

  // advances the time window. this is independent of incoming data vis pushData()
  if (props.period.hours === 0) liveRefreshIntervalId = setInterval(advance, LIVE_REFRESH_INTERVAL_MSECS);
}

watch(() => props.period, onPeriodChanged);

onMounted(async function () {
    await onPeriodChanged();
});

onUnmounted(async function () {
  if (liveRefreshIntervalId) clearInterval(liveRefreshIntervalId);
});

defineExpose({
  setDatasets,
  pushData,
});

</script>

<template>
  <div class="graph-container">
    <label>{{ title }} <span class="pull-right text-small">{{ subtext }}</span></label>
    <div class="graph">
      <canvas ref="graphNode"></canvas>
      <div ref="tooltipElem" class="graphs-tooltip"></div>
    </div>
    <div class="footer">{{ footer }}</div>
  </div>
</template>

<style scoped>

.graph-container {
  margin-bottom: 30px;
}

.graphs label {
  margin: 16px 0;
}

.graph {
  position: relative;
  width: 100%;
  height: 200px;
}

.footer {
  margin-top: 10px;
  text-align: center;
  font-weight: var(--pankow-font-weight-bold);
  font-size: 12px;
}

</style>

<style>

.graphs-tooltip {
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 10px;
  pointer-events: none;
}

.graphs-tooltip-caret-left {
  border-left: 1px var(--pankow-color-primary) solid;
}

.graphs-tooltip-caret-right {
  border-right: 1px var(--pankow-color-primary) solid;
}

.graphs-tooltip-item,
.graphs-tooltip-title {
  padding: 2px;
  padding-left: 10px;
  padding-right: 10px;
  background: rgba(255,255,255,0.8);
}

@media (prefers-color-scheme: dark) {
  .graphs-tooltip-item,
  .graphs-tooltip-title {
    background: var(--pankow-color-background);
  }
}

.graphs-tooltip-title {
  padding-top: 10px;
}

.graphs-tooltip-item:last-of-type {
  padding-bottom: 10px;
}

.graphs-tooltip-ellipsis {
  font-size: 9px;
  padding-top: 0;
  padding-bottom: 5px !important;
}

</style>
