@sit-onyx/chartjs-plugin 1.0.0-beta.270 → 1.0.0-beta.271

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.270",
+  "version": "1.0.0-beta.271",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
   "files": [
     "src"
   ],
@@ -24,16 +27,16 @@
   },
   "peerDependencies": {
     "chart.js": ">= 4.0.0",
-    "sit-onyx": "^1.0.0-beta.270"
+    "sit-onyx": "^1.0.0-beta.271"
   },
   "devDependencies": {
     "@vue/compiler-dom": "3.5.16",
     "chart.js": "4.5.0",
     "vue": "3.5.16",
     "vue-chartjs": "^5.3.2",
-    "@sit-onyx/shared": "^1.0.0-beta.3",
-    "@sit-onyx/storybook-utils": "^1.0.0-beta.95",
-    "sit-onyx": "^1.0.0-beta.270"
+    "@sit-onyx/shared": "^1.0.0-beta.4",
+    "@sit-onyx/storybook-utils": "^1.0.0-beta.96",
+    "sit-onyx": "^1.0.0-beta.271"
   },
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",

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

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.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.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.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.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.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.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.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.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", () => {