@sit-onyx/chartjs-plugin 1.0.0-beta.30 → 1.0.0-beta.301

package/README.md

@@ -1,9 +1,5 @@
 <div align="center" style="text-align: center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" type="image/svg+xml" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-light.svg">
-    <source media="(prefers-color-scheme: light)" type="image/svg+xml" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg">
-    <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg" width="160px">
-  </picture>
+  <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo.svg" height="96px">
 </div>
 
 <br>

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@sit-onyx/chartjs-plugin",
   "description": "A Chart.js plugin for the onyx design system created by Schwarz IT",
-  "version": "1.0.0-beta.30",
+  "version": "1.0.0-beta.301",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
   "files": [
     "src"
   ],
@@ -24,16 +27,24 @@
   },
   "peerDependencies": {
     "chart.js": ">= 4.0.0",
-    "sit-onyx": "^1.0.0-beta.30"
+    "sit-onyx": "^1.0.0-beta.319"
   },
   "devDependencies": {
-    "vue-chartjs": "^5.3.1"
+    "@playwright/experimental-ct-vue": "1.55.0",
+    "@playwright/test": "1.55.0",
+    "@vue/compiler-dom": "3.5.20",
+    "chart.js": "4.5.0",
+    "vue": "3.5.20",
+    "vue-chartjs": "^5.3.2",
+    "@sit-onyx/shared": "^1.0.0-beta.4",
+    "@sit-onyx/storybook-utils": "^1.0.0-beta.103",
+    "sit-onyx": "^1.0.0-beta.319"
   },
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",
     "build": "vue-tsc --noEmit",
     "test": "vitest",
     "test:coverage": "vitest run --coverage",
-    "test:components": "playwright install && playwright test"
+    "test:playwright": "playwright install && playwright test"
   }
 }

package/src/index.ts

@@ -1,2 +1,2 @@
-export * from "./plugin";
-export * from "./utils";
+export * from "./plugin.js";
+export * from "./utils.js";

package/src/plugin.ts

@@ -1,8 +1,8 @@
 import {
-  Chart,
   DoughnutController,
   PieController,
   PolarAreaController,
+  type Chart,
   type ChartDataset,
   type ChartType,
   type Color,
@@ -10,7 +10,7 @@ import {
   type ScaleOptionsByType,
   type ScaleTypeRegistry,
 } from "chart.js";
-import { QUANTITATIVE_COLOR_STEPS, getCSSVariableValue, hexToRgb } from "./utils";
+import { QUANTITATIVE_COLOR_STEPS, getCSSVariableValue, hexToRgb } from "./utils.js";
 
 /**
  * Registers the onyx Chart.js plugin and updates the default styles (colors, fonts etc.) to match
@@ -146,6 +146,7 @@ const plugin: Plugin<ChartType, undefined> = {
    */
   afterInit: (chart) => {
     const darkModeObserver = new MutationObserver((mutations) => {
+      if (!mutations[0]) return;
       const oldClasses = mutations[0].oldValue ?? "";
       const newClasses = (mutations[0].target as HTMLElement).className;
 
@@ -214,7 +215,7 @@ const COLORS = QUANTITATIVE_COLOR_STEPS.map(
 /**
  * Gets a border color.
  */
-const getBorderColor = (i: number) => getCSSVariableValue(COLORS[i % COLORS.length]);
+const getBorderColor = (i: number) => getCSSVariableValue(COLORS[i % COLORS.length]!);
 
 /**
  * Gets a background color (same as border color + 30% transparency).

package/src/stories/BarChart/BarChart.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { executeChartScreenshotTest } from "../playwright-utils";
+import { executeChartScreenshotTest } from "../playwright-utils.js";
 import BarChart from "./BarChart.vue";
 
 test("should render bar chart", async ({ mount, page }) => {

package/src/stories/BarChart/BarChart.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import BarChart from "./BarChart.vue";
 
 const meta: Meta<typeof BarChart> = {

package/src/stories/BarChart/BarChart.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ChartData } from "chart.js";
 import { Bar } from "vue-chartjs";
-import { chartOptions } from "../data";
+import { chartOptions } from "../data.js";
 
 const labels = ["01.01.2024", "01.02.2024", "01.03.2024", "01.04.2024", "01.05.2024"];
 

package/src/stories/BubbleChart/BubbleChart.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { executeChartScreenshotTest } from "../playwright-utils";
+import { executeChartScreenshotTest } from "../playwright-utils.js";
 import BubbleChart from "./BubbleChart.vue";
 
 test("should render bubble chart", async ({ mount, page }) => {

package/src/stories/BubbleChart/BubbleChart.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import BubbleChart from "./BubbleChart.vue";
 
 const meta: Meta<typeof BubbleChart> = {

package/src/stories/BubbleChart/BubbleChart.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ChartData } from "chart.js";
 import { Bubble } from "vue-chartjs";
-import { chartOptions } from "../data";
+import { chartOptions } from "../data.js";
 
 const chartData: ChartData<"bubble"> = {
   datasets: [

package/src/stories/DoughnutChart/DoughnutChart.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { executeChartScreenshotTest } from "../playwright-utils";
+import { executeChartScreenshotTest } from "../playwright-utils.js";
 import DoughnutChart from "./DoughnutChart.vue";
 
 test("should render doughnut chart", async ({ mount, page }) => {

package/src/stories/DoughnutChart/DoughnutChart.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import DoughnutChart from "./DoughnutChart.vue";
 
 const meta: Meta<typeof DoughnutChart> = {

package/src/stories/DoughnutChart/DoughnutChart.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ChartData } from "chart.js";
 import { Doughnut } from "vue-chartjs";
-import { chartOptions } from "../data";
+import { chartOptions } from "../data.js";
 
 const chartData: ChartData<"doughnut"> = {
   labels: ["Label 1", "Label 2", "Label 3", "Label 4"],

package/src/stories/LineChart/LineChart.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { executeChartScreenshotTest } from "../playwright-utils";
+import { executeChartScreenshotTest } from "../playwright-utils.js";
 import LineChart from "./LineChart.vue";
 
 test("should render line chart", async ({ mount, page }) => {

package/src/stories/LineChart/LineChart.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import LineChart from "./LineChart.vue";
 
 const meta: Meta<typeof LineChart> = {

package/src/stories/LineChart/LineChart.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ChartData } from "chart.js";
 import { Line } from "vue-chartjs";
-import { chartOptions } from "../data";
+import { chartOptions } from "../data.js";
 
 const labels = ["01.01.2024", "01.02.2024", "01.03.2024", "01.04.2024", "01.05.2024"];
 

package/src/stories/PieChart/PieChart.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { executeChartScreenshotTest } from "../playwright-utils";
+import { executeChartScreenshotTest } from "../playwright-utils.js";
 import PieChart from "./PieChart.vue";
 
 test("should render pie chart", async ({ mount, page }) => {

package/src/stories/PieChart/PieChart.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import PieChart from "./PieChart.vue";
 
 const meta: Meta<typeof PieChart> = {

package/src/stories/PieChart/PieChart.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ChartData } from "chart.js";
 import { Pie } from "vue-chartjs";
-import { chartOptions } from "../data";
+import { chartOptions } from "../data.js";
 
 const chartData: ChartData<"pie"> = {
   labels: ["Label 1", "Label 2", "Label 3", "Label 4"],

package/src/stories/PolarAreaChart/PolarAreaChart.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { executeChartScreenshotTest } from "../playwright-utils";
+import { executeChartScreenshotTest } from "../playwright-utils.js";
 import PolarAreaChart from "./PolarAreaChart.vue";
 
 test("should render polar area chart", async ({ mount, page }) => {

package/src/stories/PolarAreaChart/PolarAreaChart.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import PolarAreaChart from "./PolarAreaChart.vue";
 
 const meta: Meta<typeof PolarAreaChart> = {

package/src/stories/PolarAreaChart/PolarAreaChart.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ChartData } from "chart.js";
 import { PolarArea } from "vue-chartjs";
-import { chartOptionsWithoutScales } from "../data";
+import { chartOptionsWithoutScales } from "../data.js";
 
 const chartData: ChartData<"polarArea"> = {
   labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7"],

package/src/stories/RadarChart/RadarChart.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { executeChartScreenshotTest } from "../playwright-utils";
+import { executeChartScreenshotTest } from "../playwright-utils.js";
 import RadarChart from "./RadarChart.vue";
 
 test("should render radar chart", async ({ mount, page }) => {

package/src/stories/RadarChart/RadarChart.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import RadarChart from "./RadarChart.vue";
 
 const meta: Meta<typeof RadarChart> = {

package/src/stories/RadarChart/RadarChart.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ChartData } from "chart.js";
 import { Radar } from "vue-chartjs";
-import { chartOptionsWithoutScales } from "../data";
+import { chartOptionsWithoutScales } from "../data.js";
 
 const chartData: ChartData<"radar"> = {
   labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],

package/src/stories/ScatterChart/ScatterChart.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { executeChartScreenshotTest } from "../playwright-utils";
+import { executeChartScreenshotTest } from "../playwright-utils.js";
 import ScatterChart from "./ScatterChart.vue";
 
 test("should render scatter chart", async ({ mount, page }) => {

package/src/stories/ScatterChart/ScatterChart.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import ScatterChart from "./ScatterChart.vue";
 
 const meta: Meta<typeof ScatterChart> = {

package/src/stories/ScatterChart/ScatterChart.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ChartData } from "chart.js";
 import { Scatter } from "vue-chartjs";
-import { chartOptions } from "../data";
+import { chartOptions } from "../data.js";
 
 const chartData: ChartData<"scatter"> = {
   datasets: [

package/src/utils.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "vitest";
-import { hexToRgb } from "./utils";
+import { hexToRgb } from "./utils.js";
 
 describe("utils.ts", () => {
   test("should convert hex to rgb", () => {

package/src/utils.ts

@@ -39,8 +39,17 @@ 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`
  */
-export const getCSSVariableValue = (variableName: string) => {
-  return getComputedStyle(document.body).getPropertyValue(variableName);
+
+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);
+
+  if (lightDarkMatch) {
+    return lightDarkMatch[isDark ? 2 : 1]!.trim();
+  } else {
+    return computedValue;
+  }
 };
 
 /**