@sit-onyx/chartjs-plugin 1.0.0 → 1.0.1-dev-20261020154757

package/LICENSE.txt

@@ -175,7 +175,7 @@
 
    END OF TERMS AND CONDITIONS
 
-   Copyright 2023 Schwarz IT KG
+   Copyright 2023 Schwarz Digits IT KG
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/README.md

@@ -1,12 +1,12 @@
 <div align="center" style="text-align: center">
-  <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo.svg" height="96px">
+<img alt="Onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/packages/assets/src/onyx-brand/signet.svg" height="96px">
 </div>
 
 <br>
 
 # @sit-onyx/chartjs-plugin
 
-A Chart.js plugin for the onyx design system created by [Schwarz IT](https://it.schwarz).
+A Chart.js plugin for the onyx design system created by [Schwarz Digits](https://schwarz-digits.de).
 
 ## Documentation
 

package/package.json

@@ -1,44 +1,45 @@
 {
   "name": "@sit-onyx/chartjs-plugin",
-  "description": "A Chart.js plugin for the onyx design system created by Schwarz IT",
-  "version": "1.0.0",
-  "type": "module",
-  "author": "Schwarz IT KG",
+  "version": "1.0.1-dev-20261020154757",
+  "description": "A Chart.js plugin for the onyx design system created by Schwarz Digits",
+  "homepage": "https://onyx.schwarz/development/packages/chartjs-plugin.html",
+  "bugs": {
+    "url": "https://github.com/SchwarzIT/onyx/issues"
+  },
   "license": "Apache-2.0",
-  "engines": {
-    "node": ">=20"
+  "author": "Schwarz Digits IT KG",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SchwarzIT/onyx",
+    "directory": "packages/chartjs-plugin"
   },
   "files": [
     "src"
   ],
+  "type": "module",
   "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
     "./examples/*": "./src/stories/*"
   },
-  "homepage": "https://onyx.schwarz/development/packages/chartjs-plugin.html",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/SchwarzIT/onyx",
-    "directory": "packages/chartjs-plugin"
-  },
-  "bugs": {
-    "url": "https://github.com/SchwarzIT/onyx/issues"
+  "devDependencies": {
+    "@playwright/experimental-ct-vue": "1.62.1",
+    "@playwright/test": "1.62.1",
+    "@sit-onyx/shared": "^0.1.0",
+    "@sit-onyx/storybook-utils": "^1.1.4",
+    "@vue/compiler-dom": "3.5.44",
+    "chart.js": "4.5.1",
+    "sit-onyx": "^1.21.1-dev-20261020154757",
+    "vite": "8.3.4",
+    "vue": "3.5.44",
+    "vue-chartjs": "^5.3.4"
   },
   "peerDependencies": {
     "chart.js": ">= 4.0.0",
-    "sit-onyx": "^1.0.0"
+    "sit-onyx": "^1.21.1-dev-20261020154757"
   },
-  "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.55.0",
-    "@playwright/test": "1.55.0",
-    "@vue/compiler-dom": "3.5.21",
-    "chart.js": "4.5.0",
-    "vue": "3.5.21",
-    "vue-chartjs": "^5.3.2",
-    "@sit-onyx/shared": "^0.1.0",
-    "@sit-onyx/storybook-utils": "^1.0.0",
-    "sit-onyx": "^1.0.0"
+  "engines": {
+    "node": ">=20"
   },
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",

package/src/plugin.ts

@@ -19,13 +19,13 @@ import { QUANTITATIVE_COLOR_STEPS, getCSSVariableValue, hexToRgb } from "./utils
  * Styles will be updated accordingly if the application is switched between light/dark mode.
  *
  * @example
- * ```ts
- * import { registerOnyxPlugin } from "@sit-onyx/chartjs-plugin";
- * import { Chart, registerables } from "chart.js";
+ *   ```ts
+ *   import { registerOnyxPlugin } from "@sit-onyx/chartjs-plugin";
+ *   import { Chart, registerables } from "chart.js";
  *
- * Chart.register(...registerables);
- * registerOnyxPlugin(Chart);
- * ```
+ *   Chart.register(...registerables);
+ *   registerOnyxPlugin(Chart);
+ *   ```;
  */
 export const registerOnyxPlugin = (chart: typeof Chart) => {
   //
@@ -49,7 +49,7 @@ export const registerOnyxPlugin = (chart: typeof Chart) => {
   Object.defineProperty(chart.defaults.font, "family", {
     configurable: true,
     enumerable: true,
-    get: () => getCSSVariableValue("--onyx-font-family"),
+    get: () => getCSSVariableValue("--onyx-font-family-paragraph"),
   });
 
   chart.defaults.font.size = 13;
@@ -109,7 +109,9 @@ const plugin: Plugin<ChartType, undefined> = {
    * of the chart.
    */
   beforeLayout: (chart) => {
-    /** Color offset / index so every dataset gets a unique color. */
+    /**
+     * Color offset / index so every dataset gets a unique color.
+     */
     let colorOffset = 0;
 
     chart.config.data.datasets.forEach((dataset, index) => {
@@ -185,8 +187,9 @@ const createColorGetter = (color: string) => {
  *
  * @param dataset Dataset to colorize
  * @param offset Offset for the colors. Useful if multiple datasets are used inside a chart which
- * should have different colors.
- * @param allData Set this to true for doughnut, pie and polar area chart type so every data has a separate color.
+ *   should have different colors.
+ * @param allData Set this to true for doughnut, pie and polar area chart type so every data has a
+ *   separate color.
  */
 const colorizeDataset = (dataset: ChartDataset, offset = 0, allData = false) => {
   const borderColorizer = () => {

package/src/utils.ts

@@ -10,18 +10,18 @@ export type QuantitativeColorStep = (typeof QUANTITATIVE_COLOR_STEPS)[number];
  * Will be updated automatically when switching between light/dark mode.
  *
  * @example
- * ```ts
- * const chartData: ChartData<"line"> = {
- *   labels: ["A", "B", "C"],
- *   datasets: [
- *     {
- *       label: "Dataset A",
- *       data: [1, 2, 3],
- *       ...getDatasetColors("primary"),
- *     },
- *   ],
- * };
- * ```
+ *   ```ts
+ *   const chartData: ChartData<"line"> = {
+ *     labels: ["A", "B", "C"],
+ *     datasets: [
+ *       {
+ *         label: "Dataset A",
+ *         data: [1, 2, 3],
+ *         ...getDatasetColors("primary"),
+ *       },
+ *     ],
+ *   };
+ *   ```;
  */
 export const getDatasetColors = (color: OnyxColor | `quantitatives-${QuantitativeColorStep}`) => {
   const cssVariable = `--onyx-color-base-${color.startsWith("quantitatives-") ? color : `${color}-500`}`;
@@ -37,19 +37,29 @@ export const getDatasetColors = (color: OnyxColor | `quantitatives-${Quantitativ
 
 /**
  * Gets the current value of the given CSS variable.
- * @param CSS variable name, e.g. `--onyx-color-base-primary-500`
+ *
+ * @param CSS Variable name, e.g. `--onyx-color-base-primary-500`
  */
 
-export const getCSSVariableValue = (variableName: string): string => {
-  const isDark = getComputedStyle(document.body).colorScheme === "dark";
-  const computedValue = getComputedStyle(document.body).getPropertyValue(variableName).trim();
-  const lightDarkMatch = /^light-dark\(([^,]+),\s*([^)]+)\)$/.exec(computedValue);
+export const getCSSVariableValue = (variableName: string, el = document.body): string => {
+  const rawValue = getComputedStyle(el).getPropertyValue(variableName).trim();
 
-  if (lightDarkMatch) {
-    return lightDarkMatch[isDark ? 2 : 1]!.trim();
-  } else {
-    return computedValue;
+  // if the CSS variable is no "color" (e.g. font family or numeric value), return the raw value
+  //  otherwise we resolve the actual color below
+  if (!CSS.supports("color", rawValue)) {
+    return rawValue;
   }
+
+  const element = el.ownerDocument.createElement("div");
+  element.style.display = "none";
+  element.style.color = `var(${variableName})`;
+  // color scheme is inherited from the parent, so we don't need to handle it manually
+  el.appendChild(element);
+
+  const resolvedColor = getComputedStyle(element).color;
+  element.remove();
+
+  return rgbToHex(resolvedColor);
 };
 
 /**
@@ -62,3 +72,39 @@ export const hexToRgb = (hex: string) => {
   const b = number & 255;
   return `${r}, ${g}, ${b}`;
 };
+
+/**
+ * Converts an rgb() or rgba() string (comma- or space-separated) to hex.
+ *
+ * @param {string} rgbValue - e.g. "rgb(255, 0, 128)" or "rgba(0, 0, 0, 0.5)"
+ * @returns {string} - e.g. "#ff0080" or "#00000080"
+ */
+export function rgbToHex(rgbValue: string) {
+  // Extract all numeric components (supports standard numbers and percentages)
+  const values = rgbValue.match(/[\d.]+%?/g);
+  if (!values || values.length < 3) return rgbValue;
+
+  const toHex = (val: string, isAlpha = false) => {
+    let num = val.endsWith("%") ? (parseFloat(val) / 100) * (isAlpha ? 1 : 255) : parseFloat(val);
+
+    if (isAlpha) num = Math.round(num * 255);
+    else num = Math.round(num);
+
+    return Math.min(255, Math.max(0, num)).toString(16).padStart(2, "0");
+  };
+
+  const r = toHex(values[0]);
+  const g = toHex(values[1]!);
+  const b = toHex(values[2]!);
+
+  // Include 2-digit alpha only if an alpha channel < 1 is present
+  let a = "";
+  if (values[3] !== undefined) {
+    const alphaVal = values[3].endsWith("%") ? parseFloat(values[3]) / 100 : parseFloat(values[3]);
+    if (alphaVal < 1) {
+      a = toHex(values[3], true);
+    }
+  }
+
+  return `#${r}${g}${b}${a}`;
+}