@sit-onyx/chartjs-plugin 0.0.0 → 0.0.1-alpha.0

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": "0.0.0",
+  "version": "0.0.1-alpha.0",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -10,7 +10,8 @@
   ],
   "types": "./src/index.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./examples/*": "./src/stories/*"
   },
   "homepage": "https://onyx.schwarz/development/packages/chartjs-plugin.html",
   "repository": {

package/src/plugin.ts

@@ -28,13 +28,24 @@ import { getCSSVariableValue, hexToRgb } from "./utils";
  * ```
  */
 export const registerOnyxPlugin = (chart: typeof Chart) => {
+  //
+  // IMPLEMENTATION NOTES:
+  // is you use "getCSSVariableValue" here, make sure its either a function
+  // or a getter defined with "Object.defineProperty".
+  // Otherwise if called directly, this is not compatible with server side rendering.
+  //
   chart.register(plugin);
   chart.defaults.plugins.colors.enabled = false;
 
   //
   // General default styles for all chart types
   //
-  chart.defaults.font.family = getCSSVariableValue("--onyx-font-family");
+  Object.defineProperty(chart.defaults.font, "family", {
+    configurable: true,
+    enumerable: true,
+    get: () => getCSSVariableValue("--onyx-font-family"),
+  });
+
   chart.defaults.font.size = 13;
 
   chart.defaults.borderColor = () => getCSSVariableValue("--onyx-color-base-neutral-300");

package/src/stories/BarChart/BarChart.vue

@@ -23,11 +23,13 @@ const chartData: ChartData<"bar"> = {
 </script>
 
 <template>
-  <Bar :data="chartData" :options="chartOptions" class="chart" />
+  <div>
+    <Bar :data="chartData" :options="chartOptions" class="chart" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .chart {
-  height: 32rem;
+  height: 24rem;
 }
 </style>

package/src/stories/BubbleChart/BubbleChart.vue

@@ -26,11 +26,13 @@ const chartData: ChartData<"bubble"> = {
 </script>
 
 <template>
-  <Bubble :data="chartData" :options="chartOptions" class="chart" />
+  <div>
+    <Bubble :data="chartData" :options="chartOptions" class="chart" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .chart {
-  height: 32rem;
+  height: 24rem;
 }
 </style>

package/src/stories/DoughnutChart/DoughnutChart.vue

@@ -4,7 +4,7 @@ import { Doughnut } from "vue-chartjs";
 import { chartOptions } from "../data";
 
 const chartData: ChartData<"doughnut"> = {
-  labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
+  labels: ["Label 1", "Label 2", "Label 3", "Label 4"],
   datasets: [
     {
       data: [40, 20, 80, 10],
@@ -14,11 +14,13 @@ const chartData: ChartData<"doughnut"> = {
 </script>
 
 <template>
-  <Doughnut :data="chartData" :options="chartOptions" class="chart" />
+  <div>
+    <Doughnut :data="chartData" :options="chartOptions" class="chart" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .chart {
-  height: 32rem;
+  height: 24rem;
 }
 </style>

package/src/stories/LineChart/LineChart.vue

@@ -23,11 +23,13 @@ const chartData: ChartData<"line"> = {
 </script>
 
 <template>
-  <Line :data="chartData" :options="chartOptions" class="chart" />
+  <div>
+    <Line :data="chartData" :options="chartOptions" class="chart" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .chart {
-  height: 32rem;
+  height: 24rem;
 }
 </style>

package/src/stories/PieChart/PieChart.vue

@@ -4,21 +4,19 @@ import { Pie } from "vue-chartjs";
 import { chartOptions } from "../data";
 
 const chartData: ChartData<"pie"> = {
-  labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
-  datasets: [
-    {
-      data: [40, 20, 80, 10],
-    },
-  ],
+  labels: ["Label 1", "Label 2", "Label 3", "Label 4"],
+  datasets: [{ data: [40, 20, 80, 10] }],
 };
 </script>
 
 <template>
-  <Pie :data="chartData" :options="chartOptions" class="chart" />
+  <div>
+    <Pie :data="chartData" :options="chartOptions" class="chart" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .chart {
-  height: 32rem;
+  height: 24rem;
 }
 </style>

package/src/stories/PolarAreaChart/PolarAreaChart.vue

@@ -4,14 +4,14 @@ import { PolarArea } from "vue-chartjs";
 import { chartOptionsWithoutScales } from "../data";
 
 const chartData: ChartData<"polarArea"> = {
-  labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
+  labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7"],
   datasets: [
     {
-      label: "My First dataset",
+      label: "Dataset A",
       data: [65, 59, 90, 81, 56, 55, 40],
     },
     {
-      label: "My Second dataset",
+      label: "Dataset B",
       data: [28, 48, 40, 19, 96, 27, 100],
     },
   ],
@@ -19,11 +19,13 @@ const chartData: ChartData<"polarArea"> = {
 </script>
 
 <template>
-  <PolarArea :data="chartData" :options="chartOptionsWithoutScales" class="chart" />
+  <div>
+    <PolarArea :data="chartData" :options="chartOptionsWithoutScales" class="chart" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .chart {
-  height: 32rem;
+  height: 24rem;
 }
 </style>

package/src/stories/RadarChart/RadarChart.vue

@@ -19,11 +19,13 @@ const chartData: ChartData<"radar"> = {
 </script>
 
 <template>
-  <Radar :data="chartData" :options="chartOptionsWithoutScales" class="chart" />
+  <div>
+    <Radar :data="chartData" :options="chartOptionsWithoutScales" class="chart" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .chart {
-  height: 32rem;
+  height: 24rem;
 }
 </style>

package/src/stories/ScatterChart/ScatterChart.vue

@@ -7,7 +7,6 @@ const chartData: ChartData<"scatter"> = {
   datasets: [
     {
       label: "Dataset A",
-      fill: false,
       data: [
         { x: -2, y: 4 },
         { x: -1, y: 1 },
@@ -18,7 +17,6 @@ const chartData: ChartData<"scatter"> = {
     },
     {
       label: "Dataset B",
-      fill: false,
       data: [
         { x: -2, y: -4 },
         { x: -1, y: -1 },
@@ -32,11 +30,13 @@ const chartData: ChartData<"scatter"> = {
 </script>
 
 <template>
-  <Scatter :data="chartData" :options="chartOptions" class="chart" />
+  <div>
+    <Scatter :data="chartData" :options="chartOptions" class="chart" />
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .chart {
-  height: 32rem;
+  height: 24rem;
 }
 </style>

package/src/stories/data.ts

@@ -4,8 +4,7 @@ import type { ChartOptions } from "chart.js";
  * Shared chart options for all example charts (without scales for polar area and radar chart).
  */
 export const chartOptionsWithoutScales = {
-  responsive: true,
-  maintainAspectRatio: false,
+  maintainAspectRatio: false, // needed to allow setting the actual chart height via CSS
   hover: {
     intersect: false,
   },