switch to linear scales entirely

dashboard/src/components/SystemMetrics.vue

@@ -11,30 +11,16 @@ import { SingleSelect, Spinner } from 'pankow';
 import Section from './Section.vue';
 import SystemModel from '../models/SystemModel.js';
 
-import 'chartjs-adapter-moment'; // https://www.chartjs.org/docs/latest/axes/cartesian/time.html#date-adapters
-
 const systemModel = SystemModel.create();
 
-function trKeyFromPeriod(period) {
-  if (period === 0) return 'app.graphs.period.live';
-  if (period === 1) return 'app.graphs.period.1h';
-  if (period === 6) return 'app.graphs.period.6h';
-  if (period === 12) return 'app.graphs.period.12h';
-  if (period === 24) return 'app.graphs.period.24h';
-  if (period === 24*7) return 'app.graphs.period.7d';
-  if (period === 24*30) return 'app.graphs.period.30d';
-
-  return '';
-}
-
 const periods = [
-  { id: 0,     label: t(trKeyFromPeriod(0)) },
-  { id: 1,     label: t(trKeyFromPeriod(1)) },
-  { id: 6,     label: t(trKeyFromPeriod(6)) },
-  { id: 12,    label: t(trKeyFromPeriod(12)) },
-  { id: 24,    label: t(trKeyFromPeriod(24)) },
-  { id: 24*7,  label: t(trKeyFromPeriod(24*7)) },
-  { id: 24*30, label: t(trKeyFromPeriod(24*30)) },
+  { id: 0,     label: t('app.graphs.period.live'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { id: 1,     label: t('app.graphs.period.1h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { id: 6,     label: t('app.graphs.period.6h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { id: 12,    label: t('app.graphs.period.12h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { id: 24,    label: t('app.graphs.period.24h'), format: 'hh:mm A', tooltipFormat: 'hh:mm A' },
+  { id: 24*7,  label: t('app.graphs.period.7d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
+  { id: 24*30, label: t('app.graphs.period.30d'), format: 'DD MMM', tooltipFormat: 'DD MMM hh:mm A' },
 ];
 
 const busy = ref(false);
@@ -63,6 +49,11 @@ async function liveRefresh() {
         x: data.cpu[1] * 1000, // cpuGraph.options.scales.x.max can be used for window edge, if we don't trust server timestamps . but using server timestamps handles network lags better
         y: data.cpu[0]
       });
+
+      while (cpuGraph.data.datasets[0].data.length && (cpuGraph.data.datasets[0].data[0].x < cpuGraph.options.scales.x.min)) { // remove elements beyond our tme window
+        cpuGraph.data.datasets[0].data.shift();
+      }
+
       cpuGraph.update('none');
     }
 
@@ -72,7 +63,7 @@ async function liveRefresh() {
 
     memoryGraph.update('none');
   };
-  // advances the window by 500ms. this is independent of incoming data
+  // advances the time window by 500ms. this is independent of incoming data
   metricStream.intervalId = setInterval(function () {
     cpuGraph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
     cpuGraph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
@@ -126,20 +117,30 @@ async function refresh() {
   const cpuGraphOptions = {
     maintainAspectRatio: false,
     plugins: {
-      legend: false
+      legend: {
+        display: false
+      },
+      tooltip: {
+        callbacks: {
+          title: (tooltipItem) => moment(tooltipItem[0].raw.x).format(periods.find((p) => p.id === period.value).tooltipFormat)
+        }
+      }
     },
     scales: {
       x: {
-        // the 'time' type optimizes the x ticks text based on the data
-        type: period.value === 0 ? 'linear' : 'time',
-        bounds: 'ticks', // for 'time' type. otherwise data bound. https://www.chartjs.org/docs/latest/axes/cartesian/time.html#changing-the-scale-type-from-time-scale-to-logarithmic-linear-scale
+        // 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: now - (period.value === 0 ? LIVE_REFRESH_HISTORY_MSECS : period.value*60*60*1000),
         max: now,
         ticks: {
           autoSkip: true, // skip tick labels as needed
           autoSkipPadding: 20, // padding between ticks
           maxRotation: 0, // don't rotate the labels
-          maxTicksLimit: 15, // max tick labels to show
+          count: 7, // tick labels to show. anything more than 7 will not work for "7 days"
+          callback: function (value) {
+            if (period.value === 0) return `${5-(value-this.min)/60000}min`;
+            return moment(value).format(periods.find((p) => p.id === period.value).format);
+          }
         },
         grid: {
           drawOnChartArea: false,
@@ -166,14 +167,6 @@ async function refresh() {
   if (period.value === 0) {
     // for realtime graph, generate steps of 1min and appropriate tick text
     cpuGraphOptions.scales.x.ticks.stepSize = 60*1000; // 1min
-    cpuGraphOptions.scales.x.ticks.callback = function (value) { return `${5-(value-this.min)/60000}min`; };
-
-    // fix the hover tooltip to show timestamp
-    cpuGraphOptions.plugins.tooltip = {
-      callbacks: {
-        title: (tooltipItem) => moment(tooltipItem[0].raw.x).format('hh:mm:ss')
-      }
-    };
   }
 
   if (!cpuGraph) {
@@ -221,7 +214,7 @@ async function refresh() {
     },
     scales: {
       x: {
-        type: 'time',
+        type: 'linear',
         bounds: 'ticks', // otherwise data bound. https://www.chartjs.org/docs/latest/axes/cartesian/time.html#changing-the-scale-type-from-time-scale-to-logarithmic-linear-scale
         min: now - period.value*60*60*1000,
         max: now,