✨ Built system load and load history widgets

src/components/Widgets/GlSystemLoad.vue

@@ -0,0 +1,68 @@
+<template>
+<div class="glances-load-wrapper">
+  <div
+    :id="`load-${chartId}`" class="load-chart"
+    v-tooltip="$t('widgets.glances.system-load-desc')"></div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
+
+export default {
+  mixins: [WidgetMixin, ChartingMixin],
+  computed: {
+    hostname() {
+      if (!this.options.hostname) this.error('You must specify a \'hostname\' for Glaces');
+      return this.options.hostname;
+    },
+    endpoint() {
+      return `${this.hostname}/api/3/load`;
+    },
+  },
+  methods: {
+    fetchData() {
+      this.makeRequest(this.endpoint).then(this.processData);
+    },
+    processData(loadData) {
+      const chartData = {
+        labels: ['1 Min', '5 Mins', '15 Mins'],
+        datasets: [
+          { values: [loadData.min1, loadData.min5, loadData.min15] },
+        ],
+      };
+      const chartTitle = `Load Averages over ${loadData.cpucore} Cores`;
+      this.renderChart(chartData, chartTitle);
+    },
+    renderChart(loadBarChartData, chartTitle) {
+      return new this.Chart(`#load-${this.chartId}`, {
+        title: chartTitle,
+        data: loadBarChartData,
+        type: 'bar',
+        height: 180,
+        colors: ['#04e4f4'],
+        barOptions: {
+          spaceRatio: 0.2,
+        },
+        tooltipOptions: {
+          formatTooltipY: d => `${d} Tasks`,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.glances-load-wrapper {
+  p.desc {
+    color: var(--widget-text-color);
+    opacity: var(--dimming-factor);
+    font-size: 0.8rem;
+    margin: 0;
+    visibility: hidden;
+  }
+  &:hover p.desc { visibility: visible; }
+}
+</style>