Merged in feature/IO-2836-Charts-Route (pull request #1518)

IO-2836 Charts Route

Approved-by: Dave Richer

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

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();
+    })()
+  );
+};

server/routes/miscellaneousRoutes.js

@@ -11,6 +11,7 @@ const eventAuthorizationMiddleware = require("../middleware/eventAuthorizationMI
 const validateFirebaseIdTokenMiddleware = require("../middleware/validateFirebaseIdTokenMiddleware");
 const withUserGraphQLClientMiddleware = require("../middleware/withUserGraphQLClientMiddleware");
 const { taskAssignedEmail, tasksRemindEmail } = require("../email/tasksEmails");
+const { canvastest } = require("../render/canvas-handler");
 
 //Test route to ensure Express is responding.
 router.get("/test", async function (req, res) {
@@ -49,4 +50,7 @@ router.post("/tasks-remind-handler", eventAuthorizationMiddleware, tasksRemindEm
 router.post("/record-handler/arms", data.arms);
 router.post("/taskHandler", validateFirebaseIdTokenMiddleware, taskHandler.taskHandler);
 
+// Canvas Test
+router.post("/canvastest", validateFirebaseIdTokenMiddleware, canvastest);
+
 module.exports = router;

server/routes/renderRoutes.js

@@ -2,8 +2,10 @@ const express = require("express");
 const router = express.Router();
 const { inlinecss } = require("../render/inlinecss");
 const validateFirebaseIdTokenMiddleware = require("../middleware/validateFirebaseIdTokenMiddleware");
+const { canvas } = require("../render/canvas-handler");
 
 // Define the route for inline CSS rendering
 router.post("/inlinecss", validateFirebaseIdTokenMiddleware, inlinecss);
+router.post("/canvas", validateFirebaseIdTokenMiddleware, canvas);
 
 module.exports = router;