From 25fa6ebae80f5908c5dd21de1cd1c27c69b350ad Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Thu, 30 Dec 2021 21:17:25 +0000
Subject: [PATCH 01/13] :sparkles: Adds proxying functionality to fix widget
 CORS errors (#391)

---
 src/components/Widgets/WidgetBase.vue |  5 +++-
 src/mixins/WidgetMixin.js             | 33 +++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 39582b25..3b810030 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -319,7 +319,10 @@ export default {
     },
     /* Returns users specified widget options, or empty object */
     widgetOptions() {
-      return this.widget.options || {};
+      const options = this.widget.options || {};
+      const useProxy = !!this.widget.useProxy;
+      const updateInterval = this.widget.updateInterval || 0;
+      return { useProxy, updateInterval, ...options };
     },
     /* A unique string to reference the widget by */
     widgetRef() {
diff --git a/src/mixins/WidgetMixin.js b/src/mixins/WidgetMixin.js
index fc0fd956..ef35644c 100644
--- a/src/mixins/WidgetMixin.js
+++ b/src/mixins/WidgetMixin.js
@@ -2,8 +2,10 @@
  * Mixin that all pre-built and custom widgets extend from.
  * Manages loading state, error handling, data updates and user options
  */
+import axios from 'axios';
 import ProgressBar from 'rsup-progress';
 import ErrorHandler from '@/utils/ErrorHandler';
+import { serviceEndpoints } from '@/utils/defaults';
 
 const WidgetMixin = {
   props: {
@@ -19,6 +21,15 @@ const WidgetMixin = {
   mounted() {
     this.fetchData();
   },
+  computed: {
+    proxyReqEndpoint() {
+      const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
+      return `${baseUrl}${serviceEndpoints.corsProxy}`;
+    },
+    useProxy() {
+      return this.options.useProxy;
+    },
+  },
   methods: {
     /* Re-fetches external data, called by parent. Usually overridden by widget */
     update() {
@@ -44,9 +55,31 @@ const WidgetMixin = {
     fetchData() {
       this.finishLoading();
     },
+    /* Used as v-tooltip, pass text content in, and will show on hover */
     tooltip(content) {
       return { content, trigger: 'hover focus', delay: 250 };
     },
+    /* Makes data request, returns promise */
+    makeRequest(endpoint, options = {}) {
+      // Request Options
+      const method = 'GET';
+      const url = this.useProxy ? this.proxyReqEndpoint : endpoint;
+      const headers = this.useProxy ? { 'Target-URL': endpoint, ...options } : options;
+      // Make request
+      return new Promise((resolve, reject) => {
+        axios.request({ method, url, headers })
+          .then((response) => {
+            resolve(response.data);
+          })
+          .catch((dataFetchError) => {
+            this.error('Unable to fetch data', dataFetchError);
+            reject(dataFetchError);
+          })
+          .finally(() => {
+            this.finishLoading();
+          });
+      });
+    },
   },
 };
 

From d2ff1438e2eaac4b286166bcca44127c30418288 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Thu, 30 Dec 2021 21:20:35 +0000
Subject: [PATCH 02/13] :zap: Adds proxying support into Pi-Hole widgets (#391)

---
 src/components/Widgets/PiHoleStats.vue      | 12 +++--------
 src/components/Widgets/PiHoleTopQueries.vue | 13 +++---------
 src/components/Widgets/PiHoleTraffic.vue    | 23 +++++++++++++--------
 3 files changed, 20 insertions(+), 28 deletions(-)

diff --git a/src/components/Widgets/PiHoleStats.vue b/src/components/Widgets/PiHoleStats.vue
index 9d9ba730..2cd36897 100644
--- a/src/components/Widgets/PiHoleStats.vue
+++ b/src/components/Widgets/PiHoleStats.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import axios from 'axios';
+// import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 import { capitalize } from '@/utils/MiscHelpers';
@@ -55,15 +55,9 @@ export default {
   methods: {
     /* Make GET request to local pi-hole instance */
     fetchData() {
-      axios.get(this.endpoint)
+      this.makeRequest(this.endpoint)
         .then((response) => {
-          this.processData(response.data);
-        })
-        .catch((dataFetchError) => {
-          this.error('Unable to fetch data', dataFetchError);
-        })
-        .finally(() => {
-          this.finishLoading();
+          this.processData(response);
         });
     },
     /* Assign data variables to the returned data */
diff --git a/src/components/Widgets/PiHoleTopQueries.vue b/src/components/Widgets/PiHoleTopQueries.vue
index d3334eb7..b72b2426 100644
--- a/src/components/Widgets/PiHoleTopQueries.vue
+++ b/src/components/Widgets/PiHoleTopQueries.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import { showNumAsThousand } from '@/utils/MiscHelpers';
 
@@ -46,19 +45,13 @@ export default {
   methods: {
     /* Make GET request to local pi-hole instance */
     fetchData() {
-      axios.get(this.endpoint)
+      this.makeRequest(this.endpoint)
         .then((response) => {
-          if (Array.isArray(response.data)) {
+          if (Array.isArray(response)) {
             this.error('Got success, but found no results, possible authorization error');
           } else {
-            this.processData(response.data);
+            this.processData(response);
           }
-        })
-        .catch((dataFetchError) => {
-          this.error('Unable to fetch data', dataFetchError);
-        })
-        .finally(() => {
-          this.finishLoading();
         });
     },
     /* Assign data variables to the returned data */
diff --git a/src/components/Widgets/PiHoleTraffic.vue b/src/components/Widgets/PiHoleTraffic.vue
index 1046e3ce..a2de61d1 100644
--- a/src/components/Widgets/PiHoleTraffic.vue
+++ b/src/components/Widgets/PiHoleTraffic.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 
@@ -31,17 +30,23 @@ export default {
   methods: {
     /* Make GET request to local pi-hole instance */
     fetchData() {
-      axios.get(this.endpoint)
+      this.makeRequest(this.endpoint)
         .then((response) => {
-          this.processData(response.data);
-        })
-        .catch((dataFetchError) => {
-          this.error('Unable to fetch data', dataFetchError);
-        })
-        .finally(() => {
-          this.finishLoading();
+          if (this.validate(response)) {
+            this.processData(response);
+          }
         });
     },
+    validate(response) {
+      if (!response.ads_over_time || !response.domains_over_time) {
+        this.error('Expected data was not returned from Pi-Hole');
+        return false;
+      } else if (response.ads_over_time.length < 1) {
+        this.error('Request completed succesfully, but no data in Pi-Hole yet');
+        return false;
+      }
+      return true;
+    },
     /* Assign data variables to the returned data */
     processData(data) {
       const timeData = [];

From 7f968a708a91c368f798fcd109eb2e56e9e4bad8 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Thu, 30 Dec 2021 21:21:06 +0000
Subject: [PATCH 03/13] :memo: Adds docs on proxying requests

---
 docs/widgets.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/docs/widgets.md b/docs/widgets.md
index dc962be8..badb7a5b 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -1208,6 +1208,31 @@ For more info on how to apply custom variables, see the [Theming Docs](/docs/the
 
 ---
 
+### Proxying Requests
+
+If a widget fails to make a data request, and the console shows a CORS error, this means the server is blocking client-side requests.
+
+Dashy has a built-in CORS proxy ([`services/cors-proxy.js`](https://github.com/Lissy93/dashy/blob/master/services/cors-proxy.js)), which will be used automatically by some widgets, or can be forced to use by other by setting the `useProxy` option.
+
+For example:
+
+```yaml
+widgets:
+- type: pi-hole-stats
+  useProxy: true
+  options:
+    hostname: http://pi-hole.local
+```
+
+Alternativley, and more securley, you can set the auth headers on your service to accept requests from Dashy. For example:
+
+```
+Access-Control-Allow-Origin: https://location-of-dashy/
+Vary: Origin
+```
+
+---
+
 ### Language Translations
 
 Since most of the content displayed within widgets is fetched from an external API, unless that API supports multiple languages, translating dynamic content is not possible.

From e3f2b910ec993587f4c4e963b7244dd75dd83be7 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Fri, 31 Dec 2021 22:23:39 +0000
Subject: [PATCH 04/13] :sparkles: Adds Netlify support for proxying CORS
 requests

---
 netlify.toml                                  | 90 ++++++++++---------
 services/serverless-functions/netlify-cors.js | 42 +++++++++
 2 files changed, 90 insertions(+), 42 deletions(-)
 create mode 100644 services/serverless-functions/netlify-cors.js

diff --git a/netlify.toml b/netlify.toml
index 6ed4983e..e0062796 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,42 +1,48 @@
-# Enables you to easily deploy a fork of Dashy to Netlify
-# without the need to configure anything in admin UI
-# Docs: https://www.netlify.com/docs/netlify-toml-reference/
-
-# Essential site config
-[build]
-  base = "/"
-  command = "yarn build"
-  publish = "dist"
-  functions = "services/serverless-functions"
-
-# Site info, used for the 1-Click deploy page
-[template.environment]
-  STATUSKIT_PAGE_TITLE = "Dashy"
-  STATUSKIT_COMPANY_LOGO = "https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/logo.png"
-  STATUSKIT_SUPPORT_CONTACT_LINK = "https://github.com/lissy93/dashy"
-  STATUSKIT_RESOURCES_LINK = "https://dashy.to/docs"
-
-# Redirect the Node endpoints to serverless functions
-[[redirects]]
-  from = "/status-check"
-  to = "/.netlify/functions/cloud-status-check"
-  status = 301
-  force = true
-[[redirects]]
-  from = "/config-manager/*"
-  to = "/.netlify/functions/not-supported"
-  status = 301
-  force = true
-  
-# For router history mode, ensure pages land on index
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
-
-# Set any security headers here
-[[headers]]
-  for = "/*"
-  [headers.values]
-  # Uncomment to enable Netlify user control. You must have a paid plan.
-  # Basic-Auth = "someuser:somepassword anotheruser:anotherpassword"
+# Enables you to easily deploy a fork of Dashy to Netlify
+# without the need to configure anything in admin UI
+# Docs: https://www.netlify.com/docs/netlify-toml-reference/
+
+# Essential site config
+[build]
+  base = "/"
+  command = "yarn build"
+  publish = "dist"
+  functions = "services/serverless-functions"
+
+# Site info, used for the 1-Click deploy page
+[template.environment]
+  STATUSKIT_PAGE_TITLE = "Dashy"
+  STATUSKIT_COMPANY_LOGO = "https://raw.githubusercontent.com/Lissy93/dashy/master/docs/assets/logo.png"
+  STATUSKIT_SUPPORT_CONTACT_LINK = "https://github.com/lissy93/dashy"
+  STATUSKIT_RESOURCES_LINK = "https://dashy.to/docs"
+
+# Redirect the Node endpoints to serverless functions
+[[redirects]]
+  from = "/status-check"
+  to = "/.netlify/functions/cloud-status-check"
+  status = 301
+  force = true
+[[redirects]]
+  from = "/config-manager/*"
+  to = "/.netlify/functions/not-supported"
+  status = 301
+  force = true
+[[redirects]]
+  from = "/cors-proxy"
+  to = "/.netlify/functions/netlify-cors"
+  status = 301
+  force = true
+  
+# For router history mode, ensure pages land on index
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200  
+
+# Set any security headers here
+[[headers]]
+  for = "/*"
+  [headers.values]
+  # Uncomment to enable Netlify user control. You must have a paid plan.
+  # Basic-Auth = "someuser:somepassword anotheruser:anotherpassword"
+
diff --git a/services/serverless-functions/netlify-cors.js b/services/serverless-functions/netlify-cors.js
new file mode 100644
index 00000000..eaa7b4b7
--- /dev/null
+++ b/services/serverless-functions/netlify-cors.js
@@ -0,0 +1,42 @@
+/* A Netlify cloud function to handle requests to CORS-disabled services */
+const axios = require('axios');
+
+exports.handler = (event, context, callback) => {
+  // Get URL from header or GET param
+  const requestUrl = event.queryStringParameters.url
+    || event.headers['Target-URL']
+    || event.headers['target-url'];
+
+  // If URL missing, return error
+  if (!requestUrl) {
+    callback(null, {
+      statusCode: 400,
+      body: JSON.stringify({ success: false, msg: 'Missing Target-URL header' }),
+    });
+  }
+
+  // Prepare request
+  const requestConfig = {
+    method: 'GET',
+    url: requestUrl,
+    json: event.body,
+  };
+
+  // Response headers
+  const headers = {
+    'Access-Control-Allow-Origin': '*',
+    ...event.headers,
+  };
+
+  // Make request
+  axios.request(requestConfig)
+    .then((response) => {
+      const body = JSON.stringify(response.data);
+      callback(null, { statusCode: 200, body, headers });
+    }).catch((error) => {
+      callback(null, {
+        statusCode: 400,
+        body: JSON.stringify({ success: false, msg: 'Request failed', error }),
+      });
+    });
+};

From 1914d25b45ac08a2eb25e1ac2e634e3f7d4914ea Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Fri, 31 Dec 2021 23:56:53 +0000
Subject: [PATCH 05/13] :zap: Refactored NetData and HealthChecks with mixin
 request

---
 src/components/Widgets/HealthChecks.vue  | 29 +++++-------------------
 src/components/Widgets/NdCpuHistory.vue  | 14 +++---------
 src/components/Widgets/NdLoadHistory.vue | 14 +++---------
 src/components/Widgets/NdRamHistory.vue  | 14 +++---------
 4 files changed, 15 insertions(+), 56 deletions(-)

diff --git a/src/components/Widgets/HealthChecks.vue b/src/components/Widgets/HealthChecks.vue
index 6c8b20b9..1243eb5c 100644
--- a/src/components/Widgets/HealthChecks.vue
+++ b/src/components/Widgets/HealthChecks.vue
@@ -17,9 +17,8 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
-import { widgetApiEndpoints, serviceEndpoints } from '@/utils/defaults';
+import { widgetApiEndpoints } from '@/utils/defaults';
 import { capitalize, timestampToDateTime } from '@/utils/MiscHelpers';
 
 export default {
@@ -48,10 +47,6 @@ export default {
       if (this.options.host) return `${this.options.host}/api/v1/checks`;
       return `${widgetApiEndpoints.healthChecks}`;
     },
-    proxyReqEndpoint() {
-      const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
-      return `${baseUrl}${serviceEndpoints.corsProxy}`;
-    },
     apiKey() {
       if (!this.options.apiKey) {
         this.error('An API key is required, please see the docs for more info');
@@ -62,23 +57,11 @@ export default {
   methods: {
     /* Make GET request to CoinGecko API endpoint */
     fetchData() {
-      const requestConfig = {
-        method: 'GET',
-        url: this.proxyReqEndpoint,
-        headers: {
-          'access-control-request-headers': '*',
-          'Target-URL': this.endpoint,
-          CustomHeaders: JSON.stringify({ 'X-Api-Key': this.apiKey }),
-        },
-      };
-      axios.request(requestConfig)
-        .then((response) => {
-          this.processData(response.data);
-        }).catch((error) => {
-          this.error('Unable to fetch cron data', error);
-        }).finally(() => {
-          this.finishLoading();
-        });
+      this.overrideProxyChoice = true;
+      const authHeaders = { 'X-Api-Key': this.apiKey };
+      this.makeRequest(this.endpoint, authHeaders).then(
+        (response) => { this.processData(response); },
+      );
     },
     /* Assign data variables to the returned data */
     processData(data) {
diff --git a/src/components/Widgets/NdCpuHistory.vue b/src/components/Widgets/NdCpuHistory.vue
index 66bc7f03..8ff31257 100644
--- a/src/components/Widgets/NdCpuHistory.vue
+++ b/src/components/Widgets/NdCpuHistory.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 
@@ -41,16 +40,9 @@ export default {
   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();
-        });
+      this.makeRequest(this.endpoint).then(
+        (response) => { this.processData(response); },
+      );
     },
     /* Assign data variables to the returned data */
     processData(data) {
diff --git a/src/components/Widgets/NdLoadHistory.vue b/src/components/Widgets/NdLoadHistory.vue
index 243c1ac4..2d207e30 100644
--- a/src/components/Widgets/NdLoadHistory.vue
+++ b/src/components/Widgets/NdLoadHistory.vue
@@ -3,7 +3,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 
@@ -41,16 +40,9 @@ export default {
   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();
-        });
+      this.makeRequest(this.endpoint).then(
+        (response) => { this.processData(response); },
+      );
     },
     /* Assign data variables to the returned data */
     processData(data) {
diff --git a/src/components/Widgets/NdRamHistory.vue b/src/components/Widgets/NdRamHistory.vue
index 70fbd61d..6ed14ebe 100644
--- a/src/components/Widgets/NdRamHistory.vue
+++ b/src/components/Widgets/NdRamHistory.vue
@@ -6,7 +6,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 import WidgetMixin from '@/mixins/WidgetMixin';
 import ChartingMixin from '@/mixins/ChartingMixin';
 
@@ -37,16 +36,9 @@ export default {
   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();
-        });
+      this.makeRequest(this.endpoint).then(
+        (response) => { this.processData(response); },
+      );
     },
     /* Assign data variables to the returned data */
     processData(inputData) {

From 395aea292e25aa726be04faa7bce726ceb7ac53c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Fri, 31 Dec 2021 23:59:14 +0000
Subject: [PATCH 06/13] =?UTF-8?q?=F0=9F=8E=87=20Updates=20widget=20request?=
 =?UTF-8?q?=20to=20only=20apply=20headers=20when=20needed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎇 Happy New Year 🎇
---
 src/mixins/WidgetMixin.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/mixins/WidgetMixin.js b/src/mixins/WidgetMixin.js
index ef35644c..833c8b38 100644
--- a/src/mixins/WidgetMixin.js
+++ b/src/mixins/WidgetMixin.js
@@ -16,6 +16,7 @@ const WidgetMixin = {
   },
   data: () => ({
     progress: new ProgressBar({ color: 'var(--progress-bar)' }),
+    overrideProxyChoice: false,
   }),
   /* When component mounted, fetch initial data */
   mounted() {
@@ -27,7 +28,7 @@ const WidgetMixin = {
       return `${baseUrl}${serviceEndpoints.corsProxy}`;
     },
     useProxy() {
-      return this.options.useProxy;
+      return this.options.useProxy || this.overrideProxyChoice;
     },
   },
   methods: {
@@ -60,15 +61,20 @@ const WidgetMixin = {
       return { content, trigger: 'hover focus', delay: 250 };
     },
     /* Makes data request, returns promise */
-    makeRequest(endpoint, options = {}) {
+    makeRequest(endpoint, options) {
       // Request Options
       const method = 'GET';
       const url = this.useProxy ? this.proxyReqEndpoint : endpoint;
-      const headers = this.useProxy ? { 'Target-URL': endpoint, ...options } : options;
+      const CustomHeaders = options ? { ...JSON.stringify(options) } : null;
+      const headers = this.useProxy
+        ? { 'Target-URL': endpoint, CustomHeaders } : CustomHeaders;
       // Make request
       return new Promise((resolve, reject) => {
         axios.request({ method, url, headers })
           .then((response) => {
+            if (response.data.success === false) {
+              this.error('Proxy returned error from target server', response.data.message);
+            }
             resolve(response.data);
           })
           .catch((dataFetchError) => {

From eb4e45dfb53239159f17179e4edc37c490f75f9c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sat, 1 Jan 2022 00:40:29 +0000
Subject: [PATCH 07/13] :zap: Adds proxy support to NetData widgets.
 :fireworks: First commit of 2022 :)

---
 src/components/Widgets/NdCpuHistory.vue  | 58 +++++++++++-------------
 src/components/Widgets/NdLoadHistory.vue | 43 +++++++++---------
 src/components/Widgets/NdRamHistory.vue  |  4 +-
 3 files changed, 49 insertions(+), 56 deletions(-)

diff --git a/src/components/Widgets/NdCpuHistory.vue b/src/components/Widgets/NdCpuHistory.vue
index 8ff31257..52ce8ca1 100644
--- a/src/components/Widgets/NdCpuHistory.vue
+++ b/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,
diff --git a/src/components/Widgets/NdLoadHistory.vue b/src/components/Widgets/NdLoadHistory.vue
index 2d207e30..2d10bb05 100644
--- a/src/components/Widgets/NdLoadHistory.vue
+++ b/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,
diff --git a/src/components/Widgets/NdRamHistory.vue b/src/components/Widgets/NdRamHistory.vue
index 6ed14ebe..b65024c1 100644
--- a/src/components/Widgets/NdRamHistory.vue
+++ b/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,

From 661b1aab07ef2fac831e4e76f7c35cb95c6e6671 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sat, 1 Jan 2022 00:41:56 +0000
Subject: [PATCH 08/13] :fire: Removes appended slash from URL

---
 services/cors-proxy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/cors-proxy.js b/services/cors-proxy.js
index cb2d264f..97ac63b3 100644
--- a/services/cors-proxy.js
+++ b/services/cors-proxy.js
@@ -32,7 +32,7 @@ module.exports = (req, res) => {
   // Prepare the request
   const requestConfig = {
     method: req.method,
-    url: targetURL + req.url,
+    url: targetURL,
     json: req.body,
     headers,
   };

From 6e310628f7183a1cc51cb53e98b7c0483236ad1e Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sat, 1 Jan 2022 00:42:55 +0000
Subject: [PATCH 09/13] :art: Updates how headers are applied to Netlify CORS
 proxy

---
 services/serverless-functions/netlify-cors.js | 46 +++++++++++--------
 1 file changed, 26 insertions(+), 20 deletions(-)

diff --git a/services/serverless-functions/netlify-cors.js b/services/serverless-functions/netlify-cors.js
index eaa7b4b7..3789238e 100644
--- a/services/serverless-functions/netlify-cors.js
+++ b/services/serverless-functions/netlify-cors.js
@@ -2,41 +2,47 @@
 const axios = require('axios');
 
 exports.handler = (event, context, callback) => {
-  // Get URL from header or GET param
-  const requestUrl = event.queryStringParameters.url
-    || event.headers['Target-URL']
-    || event.headers['target-url'];
+  // Get input data
+  const { body, headers, queryStringParameters } = event;
 
-  // If URL missing, return error
-  if (!requestUrl) {
+  // Get URL from header or GET param
+  const requestUrl = queryStringParameters.url || headers['Target-URL'] || headers['target-url'];
+
+  const returnError = (msg, error) => {
     callback(null, {
       statusCode: 400,
-      body: JSON.stringify({ success: false, msg: 'Missing Target-URL header' }),
+      body: JSON.stringify({ success: false, msg, error }),
     });
+  };
+  // If URL missing, return error
+  if (!requestUrl) {
+    returnError('Missing Target-URL header', null);
   }
 
+  let custom = {};
+  try {
+    custom = JSON.parse(headers.CustomHeaders || headers.customheaders || '{}');
+  } catch (e) { returnError('Unable to parse custom headers'); }
+
+  // Response headers
+  const requestHeaders = {
+    'Access-Control-Allow-Origin': '*',
+    ...custom,
+  };
+
   // Prepare request
   const requestConfig = {
     method: 'GET',
     url: requestUrl,
-    json: event.body,
-  };
-
-  // Response headers
-  const headers = {
-    'Access-Control-Allow-Origin': '*',
-    ...event.headers,
+    json: body,
+    headers: requestHeaders,
   };
 
   // Make request
   axios.request(requestConfig)
     .then((response) => {
-      const body = JSON.stringify(response.data);
-      callback(null, { statusCode: 200, body, headers });
+      callback(null, { statusCode: 200, body: JSON.stringify(response.data) });
     }).catch((error) => {
-      callback(null, {
-        statusCode: 400,
-        body: JSON.stringify({ success: false, msg: 'Request failed', error }),
-      });
+      returnError('Request failed', error);
     });
 };

From 47762a1dd8750ffa8a261be417dea93b0a95087c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sat, 1 Jan 2022 00:43:32 +0000
Subject: [PATCH 10/13] :speech_balloon: Adds text translations for NetData
 chart titles

---
 src/assets/locales/en.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 72d370d0..70713065 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -263,6 +263,12 @@
       "up": "Online",
       "down": "Offline"
     },
+    "net-data": {
+      "cpu-chart-title": "CPU History",
+      "mem-chart-title": "Memory Usage",
+      "mem-breakdown-title": "Memory Breakdown",
+      "load-chart-title": "System Load"
+    },
     "system-info": {
       "uptime": "Uptime"
     },

From 5fd6ffc9c864dcae43608243a1cfc7a1e2538f65 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sat, 1 Jan 2022 00:58:52 +0000
Subject: [PATCH 11/13] :memo: Adds widget config options to widget docs

---
 docs/configuring.md | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/docs/configuring.md b/docs/configuring.md
index 23f8d186..bd975fda 100644
--- a/docs/configuring.md
+++ b/docs/configuring.md
@@ -172,7 +172,8 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 --- | --- | --- | ---
 **`name`** | `string` | Required | The title for the section
 **`icon`** | `string` | _Optional_ | An single icon to be displayed next to the title. See [`section.icon`](#sectionicon-and-sectionitemicon)
-**`items`** | `array` | Required | An array of items to be displayed within the section. See [`item`](#sectionitem)
+**`items`** | `array` | _Optional_ | An array of items to be displayed within the section. See [`item`](#sectionitem). Sections must include either 1 or more items, or 1 or more widgets.
+**`widgets`** | `array` | _Optional_ | An array of widgets to be displayed within the section. See [`widget`](#sectionwidget-optional)
 **`displayData`** | `object` | _Optional_ | Meta-data to optionally overide display settings for a given section. See [`displayData`](#sectiondisplaydata-optional)
 
 **[⬆️ Back to Top](#configuring)**
@@ -198,6 +199,18 @@ For more info, see the **[Authentication Docs](/docs/authentication.md)**
 
 **[⬆️ Back to Top](#configuring)**
 
+### `section.widget` _(optional)_
+
+**Field** | **Type** | **Required**| **Description**
+--- | --- | --- | ---
+**`type`** | `string` | Required | The widget type. See [Widget Docs](/docs/widgets.md) for full list of supported widgets
+**`options`** | `object` | _Optional_ | Some widgets accept either optional or required additional options. Again, see the [Widget Docs](/docs/widgets.md) for full list of options
+**`updateInterval`** | `number` | _Optional_ | You can keep a widget constantly updated by specifying an update interval, in seconds. See [Continuous Updates Docs](/docs/widgets.md#continuous-updates) for more info
+**`useProxy`** | `boolean` | _Optional_ | Some widgets make API requests to services that are not CORS-enabled. For these instances, you will need to route requests through a proxy, Dashy has a built in CORS-proxy, which you can use by setting this option to `true`. Defaults to `false`. See the [Proxying Requests Docs](/docs/widgets.md#proxying-requests) for more info
+
+**[⬆️ Back to Top](#configuring)**
+
+
 ### `section.displayData` _(optional)_
 
 **Field** | **Type** | **Required**| **Description**

From 2925525fe4d15fcde7d0bc4c278690ef6720b88c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sat, 1 Jan 2022 00:59:42 +0000
Subject: [PATCH 12/13] :bookmark: Bumps to 1.9.6 and updates changelog

---
 .github/CHANGELOG.md | 6 ++++++
 package.json         | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/.github/CHANGELOG.md b/.github/CHANGELOG.md
index 2cde2041..92a452b5 100644
--- a/.github/CHANGELOG.md
+++ b/.github/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## ⚡️ 1.9.6 - Adds Proxy Support for Widget Requests [PR #392](https://github.com/Lissy93/dashy/pull/392)
+- Refactors widget mixin to include data requests, so that code can be shared between widgets
+- Adds a Node endpoint for proxying requests server-side, used for APIs that are not CORS enabled
+- Adds option to config file for user to force proxying of requests
+- Writes a Netlify cloud function to support proxying when the app is hosted on Netlify
+
 ## 🐛 1.9.5 - Bug fixes and Minor Improvements [PR #388](https://github.com/Lissy93/dashy/pull/388)
 - Adds icon.horse to supported favicon APIs
 - Fixes tile move bug, Re: #366
diff --git a/package.json b/package.json
index ca3a3a6b..0a26e47c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.9.5",
+  "version": "1.9.6",
   "license": "MIT",
   "main": "server",
   "author": "Alicia Sykes <alicia@omg.lol> (https://aliciasykes.com)",

From 746a3774b6e3533052ed11c3310e05c4c98de38f Mon Sep 17 00:00:00 2001
From: Alicia Sykes <alicia@omg.lol>
Date: Sat, 1 Jan 2022 01:14:56 +0000
Subject: [PATCH 13/13] :bug: Removes object deconstructing for custom headers

---
 src/mixins/WidgetMixin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/WidgetMixin.js b/src/mixins/WidgetMixin.js
index 833c8b38..8ae161a8 100644
--- a/src/mixins/WidgetMixin.js
+++ b/src/mixins/WidgetMixin.js
@@ -65,7 +65,7 @@ const WidgetMixin = {
       // Request Options
       const method = 'GET';
       const url = this.useProxy ? this.proxyReqEndpoint : endpoint;
-      const CustomHeaders = options ? { ...JSON.stringify(options) } : null;
+      const CustomHeaders = options ? JSON.stringify(options) : null;
       const headers = this.useProxy
         ? { 'Target-URL': endpoint, CustomHeaders } : CustomHeaders;
       // Make request