@sit-onyx/chartjs-plugin 1.0.0-alpha.7 → 1.0.0-alpha.70

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.7",
+  "version": "1.0.0-alpha.70",
   "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.53"
+    "sit-onyx": "^1.0.0-alpha.114"
   },
   "devDependencies": {
-    "vue-chartjs": "^5.3.0"
+    "vue-chartjs": "^5.3.1"
   },
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",

package/src/plugin.ts

@@ -10,7 +10,7 @@ import {
   type ScaleOptionsByType,
   type ScaleTypeRegistry,
 } from "chart.js";
-import { getCSSVariableValue, hexToRgb } from "./utils";
+import { QUANTITATIVE_COLOR_STEPS, getCSSVariableValue, hexToRgb } from "./utils";
 
 /**
  * Registers the onyx Chart.js plugin and updates the default styles (colors, fonts etc.) to match
@@ -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
@@ -193,17 +207,9 @@ const colorizeDataset = (dataset: ChartDataset, offset = 0, allData = false) =>
 /**
  * Available colors to choose from for default dataset styles.
  */
-const COLORS = [
-  "--onyx-color-base-quantitatives-100",
-  "--onyx-color-base-quantitatives-200",
-  "--onyx-color-base-quantitatives-300",
-  "--onyx-color-base-quantitatives-400",
-  "--onyx-color-base-quantitatives-500",
-  "--onyx-color-base-quantitatives-600",
-  "--onyx-color-base-quantitatives-700",
-  "--onyx-color-base-quantitatives-800",
-  "--onyx-color-base-quantitatives-900",
-] as const;
+const COLORS = QUANTITATIVE_COLOR_STEPS.map(
+  (step) => `--onyx-color-base-quantitatives-${step}` as const,
+);
 
 /**
  * Gets a border color.

package/src/utils.ts

@@ -1,7 +1,13 @@
 import type { OnyxColor } from "sit-onyx/types";
 
+export const QUANTITATIVE_COLOR_STEPS = [
+  100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200,
+] as const;
+export type QuantitativeColorStep = (typeof QUANTITATIVE_COLOR_STEPS)[number];
+
 /**
  * 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
@@ -17,15 +23,15 @@ import type { OnyxColor } from "sit-onyx/types";
  * };
  * ```
  */
-export const getDatasetColors = (
-  color: OnyxColor | `quantitatives-${100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`,
-) => {
+export const getDatasetColors = (color: OnyxColor | `quantitatives-${QuantitativeColorStep}`) => {
   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)`,
   };
 };