feat: css vars support in charts (#945)

src/unfold/static/unfold/js/app.js

@@ -37,9 +37,11 @@ const warnWithoutSaving = () => {
       "form.warn-unsaved-form input, form.warn-unsaved-form select, form.warn-unsaved-form textarea"
     );
 
-    Array.from(elements).forEach((field) => {
-      field.addEventListener("input", (e) => (formChanged = true));
-    });
+    for (const field of elements) {
+      field.addEventListener("input", () => {
+        formChanged = true;
+      });
+    }
   };
 
   if (!form) {
@@ -76,9 +78,9 @@ const filterForm = () => {
   }
 
   filterForm.addEventListener("formdata", (event) => {
-    Array.from(event.formData.entries()).forEach(([key, value]) => {
+    for (const [key, value] of event.formData.entries()) {
       if (value === "") event.formData.delete(key);
-    });
+    }
   });
 };
 
@@ -107,7 +109,7 @@ const watchClassChanges = (selector, callback) => {
  *************************************************************/
 const dateTimeShortcutsOverlay = () => {
   const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutationRecord) => {
+    for (const mutationRecord of mutations) {
       const display = mutationRecord.target.style.display;
       const overlay = document.getElementById("modal-overlay");
 
@@ -116,17 +118,17 @@ const dateTimeShortcutsOverlay = () => {
       } else {
         overlay.style.display = "none";
       }
-    });
+    }
   });
 
   const targets = document.querySelectorAll(".calendarbox, .clockbox");
 
-  Array.from(targets).forEach((target) => {
+  for (const target of targets) {
     observer.observe(target, {
       attributes: true,
       attributeFilter: ["style"],
     });
-  });
+  }
 };
 
 /*************************************************************
@@ -233,11 +235,10 @@ const DEFAULT_CHART_OPTIONS = {
         },
       },
       grid: {
-        lineWidth: function (context) {
+        lineWidth: (context) => {
           if (context.tick.value === 0) {
             return 1;
           }
-
           return 0;
         },
         tickWidth: 0,
@@ -247,38 +248,68 @@ const DEFAULT_CHART_OPTIONS = {
 };
 
 const renderCharts = () => {
-  let charts = [];
+  const charts = [];
 
   const changeDarkModeSettings = () => {
     const hasDarkClass = document
       .querySelector("html")
       .classList.contains("dark");
 
-    charts.forEach((chart) => {
-      chart.options.scales.x.grid.color = hasDarkClass ? "#374151" : "#d1d5db";
-      chart.options.scales.y.grid.color = hasDarkClass ? "#374151" : "#d1d5db";
+    const baseColorDark = getComputedStyle(document.documentElement)
+      .getPropertyValue("--color-base-700")
+      .trim();
+
+    const baseColorLight = getComputedStyle(document.documentElement)
+      .getPropertyValue("--color-base-300")
+      .trim();
+
+    const borderColor = hasDarkClass
+      ? `rgb(${baseColorDark})`
+      : `rgb(${baseColorLight})`;
+
+    for (const chart of charts) {
+      chart.options.scales.x.grid.color = borderColor;
+      chart.options.scales.y.grid.color = borderColor;
       chart.update();
-    });
+    }
   };
 
-  Array.from(document.querySelectorAll(".chart")).forEach((chart) => {
+  for (const chart of document.querySelectorAll(".chart")) {
     const ctx = chart.getContext("2d");
     const data = chart.dataset.value;
     const type = chart.dataset.type;
     const options = chart.dataset.options;
 
     if (!data) {
-      return;
+      continue;
+    }
+
+    const parsedData = JSON.parse(chart.dataset.value);
+
+    for (const key in parsedData.datasets) {
+      const dataset = parsedData.datasets[key];
+      const processColor = (colorProp) => {
+        if (dataset?.[colorProp]?.startsWith("var(")) {
+          const cssVar = dataset[colorProp].match(/var\((.*?)\)/)[1];
+          const color = getComputedStyle(document.documentElement)
+            .getPropertyValue(cssVar)
+            .trim();
+          dataset[colorProp] = `rgb(${color})`;
+        }
+      };
+
+      processColor("borderColor");
+      processColor("backgroundColor");
     }
 
     charts.push(
       new Chart(ctx, {
         type: type || "bar",
-        data: JSON.parse(chart.dataset.value),
-        options: options ? JSON.parse(options) : DEFAULT_CHART_OPTIONS,
+        data: parsedData,
+        options: options ? parsedOptions : DEFAULT_CHART_OPTIONS,
       })
     );
-  });
+  }
 
   changeDarkModeSettings();