✨ Built system load and load history widgets

src/components/Widgets/GlLoadHistory.vue

@@ -0,0 +1,95 @@
+<template>
+<div class="glances-load-history-wrapper">
+  <div class="gl-history-chart" :id="chartId"></div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
+import { timestampToTime, getTimeAgo } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin, ChartingMixin],
+  components: {},
+  data() {
+    return {};
+  },
+  computed: {
+    hostname() {
+      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
+      return this.options.hostname;
+    },
+    limit() {
+      return this.options.limit || 500;
+    },
+    endpoint() {
+      return `${this.hostname}/api/3/load/history/${this.limit}`;
+    },
+  },
+  methods: {
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
+    processData(loadData) {
+      const labels = [];
+      const min1 = [];
+      const min5 = [];
+      const min15 = [];
+      loadData.min1.forEach((dataPoint) => {
+        labels.push(timestampToTime(dataPoint[0]));
+        min1.push(dataPoint[1]);
+      });
+      loadData.min5.forEach((dataPoint) => {
+        min5.push(dataPoint[1]);
+      });
+      loadData.min15.forEach((dataPoint) => {
+        min15.push(dataPoint[1]);
+      });
+
+      const chartTitle = this.makeTitle(loadData.min1);
+      const datasets = [
+        { name: '1 Minute', type: 'bar', values: min1 },
+        { name: '5 Minutes', type: 'bar', values: min5 },
+        { name: '15 Minutes', type: 'bar', values: min15 },
+      ];
+      this.generateChart({ labels, datasets }, chartTitle);
+    },
+    makeTitle(system) {
+      return `System Load over past ${getTimeAgo(system[0][0]).replace('ago', '')}`;
+    },
+    generateChart(timeChartData, chartTitle) {
+      return new this.Chart(`#${this.chartId}`, {
+        title: chartTitle,
+        data: timeChartData,
+        type: 'axis-mixed',
+        height: this.chartHeight,
+        colors: this.chartColors,
+        truncateLegends: true,
+        lineOptions: {
+          regionFill: 1,
+          hideDots: 1,
+        },
+        axisOptions: {
+          xIsSeries: true,
+          xAxisMode: 'tick',
+        },
+        tooltipOptions: {
+          formatTooltipY: d => `${d} Processes`,
+          // formatTooltipX: d => timestampToTime(d),
+        },
+      });
+    },
+
+  },
+  created() {
+    this.overrideUpdateInterval = 20;
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-load-history-wrapper {
+  .gl-history-chart {}
+}
+</style>