cloudron-box/dashboard/src/components/GraphItem.vue

<script setup>

import moment from 'moment-timezone';
import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
import Chart from 'chart.js/auto';
import { prettyDecimalSize, prettyLongDate, prettyShortDate } 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,
  period: Object, // { hours, format, tooltpFormat }
  yscale: String, // cpu, memory
  memory: Number,
  cpuCount: Number,
  highMark: Number,
});

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,
        external: function(context) {
          if (!tooltipElem.value) return;

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

          // Set Text
          if (tooltipModel.body) {
            const titleLines = tooltipModel.title || [];
            const bodyLines = tooltipModel.body.map(item => item.lines);

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

            bodyLines.forEach(function(body, i) {
              const colors = tooltipModel.labelColors[i];
              innerHtml += `<div style="color: ${colors.borderColor}" class="graphs-tooltip-item">${body}</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 (tooltipModel.chart.width/2 < tooltipModel.caretX) {
            tooltipElem.value.style.right = (tooltipModel.chart.width - tooltipModel.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 = tooltipModel.caretX + 'px';
            tooltipElem.value.classList.add('graphs-tooltip-caret-left');
          }

          tooltipElem.value.style.top = 0 + 'px';
          tooltipElem.value.style.height = '100%';
        },
        callbacks: {
          title: (tooltipItem) => period.tooltipFormat === 'long' ? prettyLongDate(tooltipItem[0].raw.x) : prettyShortDate(tooltipItem[0].raw.x),
          label: (tooltipItem) => {
            const datasetLabel = tooltipItem.chart.data.datasets[tooltipItem.datasetIndex].label;
            return `<span style="font-family: fixed">${yscale.ticks.callback(tooltipItem.raw.y)}</span>: ${datasetLabel}`;
          }
        }
      },
      annotation: {
        annotations: {
          high: {
            display: highMark !== null,
            type: 'line',
            yMin: highMark,
            yMax: highMark,
            borderColor: 'rgb(139, 0, 0)',
            borderWidth: 0.5
          }
        }
      },
    },
    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 moment(value).format(period.tickFormat);
          },
          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() {
  graph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
  graph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
  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);
  }
  graph.update('none');
}

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>
    <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>
</template>

<style scoped>

.graphs label {
  margin: 16px 0;
}

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

</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-title {
  font-weight: bold;
}

.graphs-tooltip-item {
  padding: 2px 0px;
  -webkit-text-stroke: 0.2px gray;
}

</style>