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

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,