@sit-onyx/chartjs-plugin 1.0.0-alpha.6 → 1.0.0-alpha.60

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/chartjs-plugin",
   "description": "A Chart.js plugin for the onyx design system created by Schwarz IT",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.60",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -24,10 +24,10 @@
   },
   "peerDependencies": {
     "chart.js": ">= 4.0.0",
-    "sit-onyx": "^1.0.0-alpha.52"
+    "sit-onyx": "^1.0.0-alpha.105"
   },
   "devDependencies": {
-    "vue-chartjs": "^5.3.0"
+    "vue-chartjs": "^5.3.1"
   },
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",

package/src/plugin.ts

@@ -34,8 +34,14 @@ export const registerOnyxPlugin = (chart: typeof Chart) => {
   // or a getter defined with "Object.defineProperty".
   // Otherwise if called directly, this is not compatible with server side rendering.
   //
+  // Also if setting any plugin options here (e.g. tooltip), make sure to check that they
+  // are defined/register to prevent "can not set/read of undefined" errors
+  //
   chart.register(plugin);
-  chart.defaults.plugins.colors.enabled = false;
+
+  if (chart.defaults.plugins.colors) {
+    chart.defaults.plugins.colors.enabled = false;
+  }
 
   //
   // General default styles for all chart types
@@ -51,25 +57,33 @@ export const registerOnyxPlugin = (chart: typeof Chart) => {
   chart.defaults.borderColor = () => getCSSVariableValue("--onyx-color-base-neutral-300");
   chart.defaults.color = () => getCSSVariableValue("--onyx-color-text-icons-neutral-medium");
 
-  chart.defaults.plugins.tooltip.backgroundColor = () => {
-    return getCSSVariableValue("--onyx-color-base-neutral-900");
-  };
-  chart.defaults.plugins.tooltip.titleColor = () => {
-    return getCSSVariableValue("--onyx-color-text-icons-neutral-inverted");
-  };
-  chart.defaults.plugins.tooltip.bodyColor = () => {
-    return getCSSVariableValue("--onyx-color-text-icons-neutral-inverted");
-  };
-
-  chart.defaults.plugins.title.color = createColorGetter("--onyx-color-text-icons-neutral-intense");
-  chart.defaults.plugins.title.font = {
-    weight: "bold",
-    size: 16,
-  };
+  if (chart.defaults.plugins.tooltip) {
+    chart.defaults.plugins.tooltip.backgroundColor = () => {
+      return getCSSVariableValue("--onyx-color-base-neutral-900");
+    };
+    chart.defaults.plugins.tooltip.titleColor = () => {
+      return getCSSVariableValue("--onyx-color-text-icons-neutral-inverted");
+    };
+    chart.defaults.plugins.tooltip.bodyColor = () => {
+      return getCSSVariableValue("--onyx-color-text-icons-neutral-inverted");
+    };
+  }
+
+  if (chart.defaults.plugins.title) {
+    chart.defaults.plugins.title.color = createColorGetter(
+      "--onyx-color-text-icons-neutral-intense",
+    );
+    chart.defaults.plugins.title.font = {
+      weight: "bold",
+      size: 16,
+    };
+  }
 
-  chart.defaults.scales.radialLinear.ticks.backdropColor = () => {
-    return getCSSVariableValue("--onyx-color-base-background-tinted");
-  };
+  if (chart.defaults.scales.radialLinear) {
+    chart.defaults.scales.radialLinear.ticks.backdropColor = () => {
+      return getCSSVariableValue("--onyx-color-base-background-tinted");
+    };
+  }
 
   Object.entries(chart.defaults.scales).forEach(([key, scale]) => {
     // exclude radialLinear scale because it does not support a title

package/src/utils.ts

@@ -2,6 +2,7 @@ import type { OnyxColor } from "sit-onyx/types";
 
 /**
  * Utility for easily styling a Chart.js dataset with a specific onyx color.
+ * Will be updated automatically when switching between light/dark mode.
  *
  * @example
  * ```ts
@@ -21,11 +22,13 @@ export const getDatasetColors = (
   color: OnyxColor | `quantitatives-${100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`,
 ) => {
   const cssVariable = `--onyx-color-base-${color.startsWith("quantitatives-") ? color : `${color}-500`}`;
-  const baseColor = getCSSVariableValue(cssVariable);
+  // we use arrow functions here so the value is updated / re-evaluated when
+  // switched between light and dark mode
+  const borderColor = () => getCSSVariableValue(cssVariable);
 
   return {
-    borderColor: baseColor,
-    backgroundColor: `rgba(${hexToRgb(baseColor)}, 0.3)`,
+    borderColor,
+    backgroundColor: () => `rgba(${hexToRgb(borderColor())}, 0.3)`,
   };
 };