✨ Builds system memory monitoring widget

docs/widgets.md

@@ -18,6 +18,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Flight Data](#flight-data)
 - [Self-Hosted Services Widgets](#dynamic-widgets)
   - [CPU History](#cpu-history-netdata)
+  - [Memory History](#memory-history-netdata)
   - [System Load History](#load-history-netdata)
 - [Dynamic Widgets](#dynamic-widgets)
   - [Iframe Widget](#iframe-widget)
@@ -164,6 +165,8 @@ Shows recent price history for a given crypto asset, using price data fetched fr
 **`asset`** | `string` |  Required | Name of a crypto asset, coin or token to fetch price data for, see [list of supported assets](https://api.coingecko.com/api/v3/asset_platforms)
 **`currency`** | `string` | _Optional_ | The fiat currency to display results in, expressed as an ISO-4217 alpha code (see [list of currencies](https://www.iban.com/currency-codes)). Defaults to `USD`
 **`numDays`** | `number` |  _Optional_ | The number of days of price history to render. Defaults to `7`, min: `1`, max: `30` days
+**`chartColor`** | `string` | _Optional_ | Color of the chart value. Defaults to `--widget-text-color` which inherits dashboard primary color
+**`chartHeight`** | `number` | _Optional_ | The height of rendered chart in px. Defaults to `300`
 
 ##### Example
 
@@ -302,6 +305,8 @@ Shows recent price history for a given publicly-traded stock or share
 **`apiKey`** | `string` |  Required | API key for [Alpha Vantage](https://www.alphavantage.co/), you can get a free API key [here](https://www.alphavantage.co/support/#api-key)
 **`stock`** | `string` | Required | The stock symbol for the asset to fetch data for
 **`priceTime`** | `string` |  _Optional_ | The time to fetch price for. Can be `high`, `low`, `open` or `close`. Defaults to `high`
+**`chartColor`** | `string` | _Optional_ | Color of the chart value. Defaults to `--widget-text-color` which inherits dashboard primary color
+**`chartHeight`** | `number` | _Optional_ | The height of rendered chart in px. Defaults to `300`
 
 ##### Example 
 
@@ -374,13 +379,15 @@ Displays airport departure and arrival flights, using data from [AeroDataBox](ht
 
 Pull recent CPU usage history from NetData.
 
-<p align="center"><img width="400" src="https://i.ibb.co/ZdyR5nJ/nd-cpu-history.png" /></p>
+<p align="center"><img width="600" src="https://i.ibb.co/ZdyR5nJ/nd-cpu-history.png" /></p>
 
 ##### Options
 
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
 **`host`** | `string` |  Required | The URL to your NetData instance
+**`chartHeight`** | `number` | _Optional_ | The height of rendered chart in px. Defaults to `300`
+**`chartColor`** / **`chartColors`** | `string` / `array`| _Optional_ | Color of the chart value(s) as hex codes. `chartColor` is a single value (defaults to `--widget-text-color`), whereas `chartColors` is an array of colors
 
 ##### Example 
 
@@ -390,17 +397,43 @@ Pull recent CPU usage history from NetData.
   host: http://192.168.1.1:19999
 ```
 
-### Load History (NetData)
+### Memory History (NetData)
 
-Pull recent load usage in 1, 5 and 15 minute intervals, from NetData.
+Pull recent system RAM usage from NetData, and show as a breakdown of different categories.
 
-<p align="center"><img width="400" src="https://i.ibb.co/qR9C2tJ/nd-load-history.png" /></p>
+<p align="center"><img width="600" src="https://i.ibb.co/2dsSWnk/nd-memory-history.png" /></p>
 
 ##### Options
 
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
 **`host`** | `string` |  Required | The URL to your NetData instance
+**`chartHeight`** | `number` | _Optional_ | The height of rendered chart in px. Defaults to `300`
+**`chartColor`** / **`chartColors`** | `string` / `array`| _Optional_ | Color of the chart value(s) as hex codes. `chartColor` is a single value (defaults to `--widget-text-color`), whereas `chartColors` is an array of colors
+
+##### Example 
+
+```yaml
+- type: nd-ram-history
+  options:
+    host: http://192.168.1.1:19999
+```
+
+---
+
+### Load History (NetData)
+
+Pull recent load usage in 1, 5 and 15 minute intervals, from NetData.
+
+<p align="center"><img width="600" src="https://i.ibb.co/qR9C2tJ/nd-load-history.png" /></p>
+
+##### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`host`** | `string` |  Required | The URL to your NetData instance
+**`chartHeight`** | `number` | _Optional_ | The height of rendered chart in px. Defaults to `300`
+**`chartColor`** / **`chartColors`** | `string` / `array`| _Optional_ | Color of the chart value(s) as hex codes. `chartColor` is a single value (defaults to `--widget-text-color`), whereas `chartColors` is an array of colors
 
 ##### Example 
 

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,
   },