✨ Builds system memory monitoring widget

src/components/Widgets/NdRamHistory.vue

@@ -0,0 +1,141 @@
+<template>
+<div class="memory-charts-wrapper">
+  <div class="chart" :id="`aggregate-${chartId}`"></div>
+  <div class="chart" :id="chartId"></div>
+</div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import ChartingMixin from '@/mixins/ChartingMixin';
+
+export default {
+  mixins: [WidgetMixin, ChartingMixin],
+  components: {},
+  mounted() {
+    this.fetchData();
+  },
+  computed: {
+    /* URL where NetData is hosted */
+    netDataHost() {
+      const usersChoice = this.options.host;
+      if (!usersChoice || typeof usersChoice !== 'string') {
+        this.error('Host parameter is required');
+        return '';
+      }
+      return usersChoice;
+    },
+    apiVersion() {
+      return this.options.apiVersion || 'v1';
+    },
+    endpoint() {
+      return `${this.netDataHost}/api/${this.apiVersion}/data?chart=system.ram`;
+    },
+    /* A sudo-random ID for the chart DOM element */
+    chartId() {
+      return `cpu-history-chart-${Math.round(Math.random() * 10000)}`;
+    },
+  },
+  methods: {
+    /* Make GET request to NetData */
+    fetchData() {
+      axios.get(this.endpoint)
+        .then((response) => {
+          this.processData(response.data);
+        })
+        .catch((dataFetchError) => {
+          this.error('Unable to fetch data', dataFetchError);
+        })
+        .finally(() => {
+          this.finishLoading();
+        });
+    },
+    /* Assign data variables to the returned data */
+    processData(inputData) {
+      const { labels, data } = inputData;
+
+      // Convert data to an object for easy working
+      const timeData = []; // List of timestamps for axis
+      const resultGroup = {}; // List of datasets, for each label
+      data.reverse().forEach((reading) => {
+        labels.forEach((label, indx) => {
+          if (indx === 0) { // First value is the timestamp, add to axis
+            timeData.push(this.formatTime(reading[indx] * 1000));
+          } else { // All other values correspond to a label
+            if (!resultGroup[label]) resultGroup[label] = [];
+            resultGroup[label].push(reading[indx]);
+          }
+        });
+      });
+
+      // Put data in the format expected by the charts
+      const averages = [];
+      const datasets = [];
+      Object.keys(resultGroup).forEach((label) => {
+        datasets.push({ name: label, type: 'bar', values: resultGroup[label] });
+        averages.push(Math.round(this.average(resultGroup[label])));
+      });
+
+      // Set results as component attributes, and call to render
+      const timeChartData = { labels: timeData, datasets };
+      const aggregateChartData = { labels: labels.slice(1), datasets: [{ values: averages }] };
+      this.renderCharts(timeChartData, aggregateChartData);
+    },
+    renderCharts(timeChartData, aggregateChartData) {
+      this.generateHistoryChart(timeChartData);
+      this.generateAggregateChart(aggregateChartData);
+    },
+    /* Create new chart, using the crypto data */
+    generateHistoryChart(timeChartData) {
+      return new this.Chart(`#${this.chartId}`, {
+        title: 'History',
+        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 => `${Math.round(d)}mb`,
+        },
+      });
+    },
+    generateAggregateChart(aggregateChartData) {
+      return new this.Chart(`#aggregate-${this.chartId}`, {
+        title: 'Averages',
+        data: aggregateChartData,
+        type: 'percentage',
+        height: 100,
+        colors: this.chartColors,
+        barOptions: {
+          height: 18,
+          depth: 5,
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.memory-charts-wrapper .chart {
+  text.title, text.legend-dataset-text {
+    text-transform: capitalize;
+    color: var(--widget-text-color);
+  }
+  .axis, .chart-label {
+    fill: var(--widget-text-color);
+    opacity: var(--dimming-factor);
+    &:hover { opacity: 1; }
+  }
+}
+
+</style>

src/components/Widgets/WidgetBase.vue

@@ -116,6 +116,13 @@
         @error="handleError"
         :ref="widgetRef"
       />
+      <NdRamHistory
+        v-else-if="widgetType === 'nd-ram-history'"
+        :options="widgetOptions"
+        @loading="setLoaderState"
+        @error="handleError"
+        :ref="widgetRef"
+      />
       <IframeWidget
         v-else-if="widgetType === 'iframe'"
         :options="widgetOptions"
@@ -159,6 +166,7 @@ import Jokes from '@/components/Widgets/Jokes.vue';
 import Flights from '@/components/Widgets/Flights.vue';
 import NdCpuHistory from '@/components/Widgets/NdCpuHistory.vue';
 import NdLoadHistory from '@/components/Widgets/NdLoadHistory.vue';
+import NdRamHistory from '@/components/Widgets/NdRamHistory.vue';
 import IframeWidget from '@/components/Widgets/IframeWidget.vue';
 import EmbedWidget from '@/components/Widgets/EmbedWidget.vue';
 
@@ -183,6 +191,7 @@ export default {
     Flights,
     NdCpuHistory,
     NdLoadHistory,
+    NdRamHistory,
     IframeWidget,
     EmbedWidget,
   },