⚡ Adds proxy support to NetData widgets. 🎆 First commit of 2022 :)

src/components/Widgets/NdCpuHistory.vue

@@ -9,13 +9,6 @@ import ChartingMixin from '@/mixins/ChartingMixin';
 export default {
   mixins: [WidgetMixin, ChartingMixin],
   components: {},
-  data() {
-    return {
-      chartTitle: null,
-      chartData: null,
-      chartDom: null,
-    };
-  },
   computed: {
     /* URL where NetData is hosted */
     netDataHost() {
@@ -45,38 +38,39 @@ export default {
       );
     },
     /* Assign data variables to the returned data */
-    processData(data) {
-      const timeData = [];
-      const systemCpu = [];
-      const userCpu = [];
-      data.data.reverse().forEach((reading) => {
-        timeData.push(this.formatDate(reading[0] * 1000));
-        systemCpu.push(reading[2]);
-        userCpu.push(reading[3]);
+    processData(inputData) {
+      const { labels, data } = inputData;
+      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]);
+          }
+        });
       });
-      this.chartData = {
-        labels: timeData,
-        datasets: [
-          { name: 'System CPU', type: 'bar', values: systemCpu },
-          { name: 'User CPU', type: 'bar', values: userCpu },
-        ],
-      };
-      this.chartTitle = this.makeChartTitle(data.data);
-      this.renderChart();
+      const datasets = [];
+      Object.keys(resultGroup).forEach((label) => {
+        datasets.push({ name: label, type: 'bar', values: resultGroup[label] });
+      });
+      const timeChartData = { labels: timeData, datasets };
+      const chartTitle = this.makeChartTitle(data);
+      this.generateChart(timeChartData, chartTitle);
     },
     makeChartTitle(data) {
-      if (!data || !data[0][0]) return '';
+      const prefix = this.$t('widgets.net-data.cpu-chart-title');
+      if (!data || !data[0][0]) return prefix;
       const diff = Math.round((data[data.length - 1][0] - data[0][0]) / 60);
-      return `Past ${diff} minutes`;
-    },
-    renderChart() {
-      this.chartDom = this.generateChart();
+      return `${prefix}: Past ${diff} minutes`;
     },
     /* Create new chart, using the crypto data */
-    generateChart() {
+    generateChart(timeChartData, chartTitle) {
       return new this.Chart(`#${this.chartId}`, {
-        title: this.chartTitle,
-        data: this.chartData,
+        title: chartTitle,
+        data: timeChartData,
         type: 'axis-mixed',
         height: this.chartHeight,
         colors: this.chartColors,

src/components/Widgets/NdLoadHistory.vue

@@ -3,19 +3,13 @@
 </template>
 
 <script>
+import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 
 export default {
   mixins: [WidgetMixin, ChartingMixin],
   components: {},
-  data() {
-    return {
-      chartTitle: null,
-      chartData: null,
-      chartDom: null,
-    };
-  },
   computed: {
     /* URL where NetData is hosted */
     netDataHost() {
@@ -30,7 +24,7 @@ export default {
       return this.options.apiVersion || 'v1';
     },
     endpoint() {
-      return `${this.netDataHost}/api/${this.apiVersion}/data?chart=system.cpu`;
+      return `${this.netDataHost}/api/${this.apiVersion}/data?chart=system.load`;
     },
     /* A sudo-random ID for the chart DOM element */
     chartId() {
@@ -40,9 +34,16 @@ export default {
   methods: {
     /* Make GET request to NetData */
     fetchData() {
-      this.makeRequest(this.endpoint).then(
-        (response) => { this.processData(response); },
-      );
+      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(data) {
@@ -56,7 +57,7 @@ export default {
         load5mins.push(reading[2]);
         load15mins.push(reading[3]);
       });
-      this.chartData = {
+      const chartData = {
         labels: timeData,
         datasets: [
           { name: '1 Min', type: 'bar', values: load1min },
@@ -64,22 +65,20 @@ export default {
           { name: '15 Mins', type: 'bar', values: load15mins },
         ],
       };
-      this.chartTitle = this.makeChartTitle(data.data);
-      this.renderChart();
+      const chartTitle = this.makeChartTitle(data.data);
+      this.generateChart(chartData, chartTitle);
     },
     makeChartTitle(data) {
-      if (!data || !data[0][0]) return '';
+      const prefix = this.$t('widgets.net-data.load-chart-title');
+      if (!data || !data[0][0]) return prefix;
       const diff = Math.round((data[data.length - 1][0] - data[0][0]) / 60);
-      return `Past ${diff} minutes`;
-    },
-    renderChart() {
-      this.chartDom = this.generateChart();
+      return `${prefix}: Past ${diff} minutes`;
     },
     /* Create new chart, using the crypto data */
-    generateChart() {
+    generateChart(chartData, chartTitle) {
       return new this.Chart(`#${this.chartId}`, {
-        title: this.chartTitle,
-        data: this.chartData,
+        title: chartTitle,
+        data: chartData,
         type: 'axis-mixed',
         height: this.chartHeight,
         colors: this.chartColors,

src/components/Widgets/NdRamHistory.vue

@@ -78,7 +78,7 @@ export default {
     /* Create new chart, using the crypto data */
     generateHistoryChart(timeChartData) {
       return new this.Chart(`#${this.chartId}`, {
-        title: 'History',
+        title: this.$t('widgets.net-data.mem-chart-title'),
         data: timeChartData,
         type: 'axis-mixed',
         height: this.chartHeight,
@@ -99,7 +99,7 @@ export default {
     },
     generateAggregateChart(aggregateChartData) {
       return new this.Chart(`#aggregate-${this.chartId}`, {
-        title: 'Averages',
+        title: this.$t('widgets.net-data.mem-breakdown-title'),
         data: aggregateChartData,
         type: 'percentage',
         height: 100,