IO-2836 Charts Route

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>
2024-07-11 11:25:27 -07:00
parent 84bb25985b
commit 802f70dde8
6 changed files with 564 additions and 92 deletions
--- a/server/render/canvas-colors.js
+++ b/server/render/canvas-colors.js
@@ -0,0 +1,76 @@
+const borderColors = [
+  "rgba(193, 0, 50, 1)",
+  "rgba(0, 101, 68, 1)",
+  "rgba(0, 45, 98, 1)",
+  "rgba(253, 184, 0, 1)",
+  "rgba(200, 112, 126, 1)",
+  "rgba(228, 142, 88, 1)",
+  "rgba(90, 160, 141, 1)",
+  "rgba(103, 143, 174, 1)",
+  "rgba(192, 136, 99, 1)",
+  "rgba(234, 3, 55, 1)",
+  "rgba(0, 149, 67, 1)",
+  "rgba(0, 81, 155, 1)",
+  "rgba(226, 143, 173, 1)",
+  "rgba(237, 170, 125, 1)",
+  "rgba(76, 146, 177, 1)",
+  "rgba(172, 153, 193, 1)",
+  "rgba(173, 167, 89, 1)",
+  "rgba(254, 197, 222, 1)",
+  "rgba(177, 231, 223, 1)",
+  "rgba(120, 199, 235, 1)",
+  "rgba(239, 180, 193, 1)",
+  "rgba(240, 199, 171, 1)",
+  "rgba(168, 200, 121, 1)",
+  "rgba(150, 177, 208, 1)",
+  "rgba(200, 194, 189, 1)",
+  "rgba(244, 244, 244, 1)",
+  "rgba(255, 99, 132, 1)",
+  "rgba(54, 162, 235, 1)",
+  "rgba(255, 206, 86, 1)",
+  "rgba(75, 192, 192, 1)",
+  "rgba(153, 102, 255, 1)",
+  "rgba(255, 159, 64, 1)",
+  "rgba(170, 183, 184, 1)",
+];
+
+const backgroundColors = [
+  'rgba(193, 0, 50, 0.2)',
+  'rgba(0, 101, 68, 0.2)',
+  'rgba(0, 45, 98, 0.2)',
+  'rgba(253, 184, 0, 0.2)',
+  'rgba(200, 112, 126, 0.2)',
+  'rgba(228, 142, 88, 0.2)',
+  'rgba(90, 160, 141, 0.2)',
+  'rgba(103, 143, 174, 0.2)',
+  'rgba(192, 136, 99, 0.2)',
+  'rgba(234, 3, 55, 0.2)',
+  'rgba(0, 149, 67, 0.2)',
+  'rgba(0, 81, 155, 0.2)',
+  'rgba(226, 143, 173, 0.2)',
+  'rgba(237, 170, 125, 0.2)',
+  'rgba(76, 146, 177, 0.2)',
+  'rgba(172, 153, 193, 0.2)',
+  'rgba(173, 167, 89, 0.2)',
+  'rgba(254, 197, 222, 0.2)',
+  'rgba(177, 231, 223, 0.2)',
+  'rgba(120, 199, 235, 0.2)',
+  'rgba(239, 180, 193, 0.2)',
+  'rgba(240, 199, 171, 0.2)',
+  'rgba(168, 200, 121, 0.2)',
+  'rgba(150, 177, 208, 0.2)',
+  'rgba(200, 194, 189, 0.2)',
+  'rgba(244, 244, 244, 0.2)',
+  'rgba(255, 99, 132, 0.2)',
+  'rgba(54, 162, 235, 0.2)',
+  'rgba(255, 206, 86, 0.2)',
+  'rgba(75, 192, 192, 0.2)',
+  'rgba(153, 102, 255, 0.2)',
+  'rgba(255, 159, 64, 0.2)',
+  'rgba(170, 183, 184, 0.2)',
+];
+
+module.exports = {
+  borderColors,
+  backgroundColors,
+};
--- a/server/render/canvas-handler.js
+++ b/server/render/canvas-handler.js
@@ -0,0 +1,92 @@
+const { createCanvas } = require("canvas");
+const Chart = require("chart.js/auto");
+
+const { backgroundColors, borderColors } = require("./canvas-colors");
+const { isObject, defaultsDeep, isNumber } = require("lodash");
+
+exports.canvastest = function (req, res) {
+  console.log("Incoming test request.", req);
+  res.status(200).send("OK");
+};
+
+exports.canvas = function (req, res) {
+  const { w, h, values, keys, override } = req.body;
+  console.log("Incoming Canvas Request:", w, h, values, keys, override);
+
+  // Gate required values
+  if (!values || !keys) {
+    res.status(400).send("Missing required data");
+    return;
+  }
+
+  // Override must be an object if it exists
+  if (override && !isObject(override)) {
+    res.status(400).send("Override must be an object");
+    return;
+  }
+
+  // Set the default Width and Height
+  let [width, height] = [500, 275];
+
+  // Allow for custom width and height
+  if (isNumber(w)) {
+    width = w;
+  }
+  if (isNumber(h)) {
+    height = h;
+  }
+
+  const configuration = {
+    type: "doughnut",
+    data: {
+      labels: keys,
+      datasets: [
+        {
+          data: values,
+          backgroundColor: backgroundColors,
+          borderColor: borderColors,
+          borderWidth: 1
+        }
+      ]
+    },
+    options: {
+      devicePixelRatio: 4,
+      responsive: false,
+      maintainAspectRatio: true,
+      circumference: 180,
+      rotation: -90,
+      plugins: {
+        legend: {
+          labels: {
+            boxWidth: 20,
+            font: {
+              family: "'Montserrat'",
+              size: 10,
+              style: "normal",
+              weight: "normal"
+            }
+          },
+          position: "left"
+        }
+      }
+    }
+  };
+
+  // If we have a valid override object, merge it with the default configuration object.
+  // This allows for you to override the default configuration with a custom one.
+  const defaults = () => {
+    if (!override || !isObject(override)) {
+      return configuration;
+    }
+    return defaultsDeep(override, configuration);
+  };
+
+  res.status(200).send(
+    (() => {
+      const canvas = createCanvas(width, height);
+      const ctx = canvas.getContext("2d");
+      new Chart(ctx, defaults());
+      return canvas.toDataURL();
+    })()
+  );
+};