@mozaic-ds/chart 0.1.0-beta.29 → 0.1.0-beta.30

package/src/components/radar/RadarChart.stories.ts

@@ -1,11 +1,11 @@
 // RadarChart.stories.ts
 
-import type { Meta, StoryObj } from "@storybook/vue3";
-import RadarChart from "./RadarChart.vue";
+import type { Meta, StoryObj } from '@storybook/vue3';
+import RadarChart from './RadarChart.vue';
 
 const meta = {
-  title: "Charts/Radar",
-  component: RadarChart,
+  title: 'Charts/Radar',
+  component: RadarChart
 } satisfies Meta<typeof RadarChart>;
 
 export default meta;
@@ -13,334 +13,334 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
   args: {
-    height: "400px",
-    labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5"],
+    height: '400px',
+    labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
     datasets: [
       {
-        label: "currentYear",
+        label: 'currentYear',
         areaData: [
           {
             value: 88.524115665,
             position: 60.98,
-            unit: "D",
+            unit: 'D',
             label: null,
             rate: null,
-            color: "red",
+            color: 'red',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: -3.5998021,
             position: 46.4,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
-            color: "green",
+            color: 'green',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 3.1604936,
             position: 53.16,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
-            color: "green",
+            color: 'green',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 7.787256,
             position: 57.79,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
-            color: "green",
+            color: 'green',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 62.2866732,
             position: 79.76,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
-            color: "red",
+            color: 'red',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
-          },
-        ],
+            tooltips: null
+          }
+        ]
       },
       {
-        label: "previousYear",
+        label: 'previousYear',
         areaData: [
           {
             value: 78.752887008,
             position: 67.5,
-            unit: "D",
+            unit: 'D',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: -22.7389942,
             position: 27.26,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: -4.9793614,
             position: 45.02,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
-          },
-        ],
-      },
-    ],
-  },
+            tooltips: null
+          }
+        ]
+      }
+    ]
+  }
 } satisfies Story;
 
 export const MultipleData = {
   args: {
-    height: "400px",
+    height: '400px',
     labels: [
-      "Label 1",
-      "Label 2",
-      "Label 3",
-      "Label 4",
-      "Label 5",
-      "Label 6",
-      "Label 7",
-      "Label 8",
-      "Label 9",
+      'Label 1',
+      'Label 2',
+      'Label 3',
+      'Label 4',
+      'Label 5',
+      'Label 6',
+      'Label 7',
+      'Label 8',
+      'Label 9'
     ],
     datasets: [
       {
-        label: "currentYear",
+        label: 'currentYear',
         areaData: [
           {
             value: 88.524115665,
             position: 60.98,
-            unit: "D",
+            unit: 'D',
             label: null,
             rate: null,
-            color: "red",
+            color: 'red',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: -3.5998021,
             position: 46.4,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
-            color: "green",
+            color: 'green',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 3.1604936,
             position: 53.16,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
-            color: "green",
+            color: 'green',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 7.787256,
             position: 57.79,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
-            color: "green",
+            color: 'green',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 62.2866732,
             position: 79.76,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
-            color: "red",
+            color: 'red',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 3.8,
             position: 76,
-            unit: "*",
+            unit: '*',
             label: null,
             rate: null,
-            color: "red",
+            color: 'red',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 86.8082515,
             position: 89.45,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
-            color: "green",
+            color: 'green',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 94.8386888,
             position: 79.35,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
-            color: "red",
+            color: 'red',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 72.2144111,
             position: 54.81,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
-            color: "red",
+            color: 'red',
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
-          },
-        ],
+            tooltips: null
+          }
+        ]
       },
       {
-        label: "previousYear",
+        label: 'previousYear',
         areaData: [
           {
             value: 78.752887008,
             position: 67.5,
-            unit: "D",
+            unit: 'D',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: -22.7389942,
             position: 27.26,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: -4.9793614,
             position: 45.02,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: -22.8576595,
             position: 27.14,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 65.1835015,
             position: 83.07,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 4.181034483,
             position: 83.62,
-            unit: "*",
+            unit: '*',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 86.8082515,
             position: 89.45,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 98.120897,
             position: 92.48,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
+            tooltips: null
           },
           {
             value: 97.2715978,
             position: 94.54,
-            unit: "%",
+            unit: '%',
             label: null,
             rate: null,
             color: null,
             trendValue: null,
             trendUnit: null,
-            tooltips: null,
-          },
-        ],
-      },
-    ],
-  },
+            tooltips: null
+          }
+        ]
+      }
+    ]
+  }
 } satisfies Story;

package/src/components/radar/RadarChart.vue

@@ -22,11 +22,14 @@ import { Radar } from 'vue-chartjs';
 import type { ActiveElement, ChartData } from 'chart.js';
 import {
   Context,
-  GenericTooltipService,
+  GenericTooltipService
 } from '../../services/GenericTooltipService';
 import { formatWithThousandsSeprators } from '../../services/FormatUtilities';
 import { TooltipChartType } from '../../types/TooltipChartType';
-import { drawLabels, splitLabelIfTooLong } from '../../services/RadarChartFunctions';
+import {
+  drawLabels,
+  splitLabelIfTooLong
+} from '../../services/RadarChartFunctions';
 import type { Chart, ChartItem } from '../../services/ChartsCommonLegend';
 import { addAlpha } from '../../services/ColorFunctions';
 import {
@@ -38,7 +41,7 @@ import {
   RadialLinearScale,
   Title,
   Tooltip,
-  Plugin,
+  Plugin
 } from 'chart.js';
 
 import {
@@ -48,7 +51,7 @@ import {
   createLegendElementWithSquareArea,
   getOrCreateLegendList,
   hideAllButThis,
-  switchItemVisibility,
+  switchItemVisibility
 } from '../../services/ChartsCommonLegend';
 
 import ChartDesign from '../../services/patterns/ChartDesign';
@@ -71,28 +74,28 @@ const radarComponentChartProps = defineProps({
    */
   chartId: {
     type: String,
-    default: 'radar-chart',
+    default: 'radar-chart'
   },
   /**
    * Value of the `height` css property used to define the height of the <canvas> element
    */
   height: {
     type: String,
-    default: '600px',
+    default: '600px'
   },
   /**
    * Labels used to label the index axis (default x axes). See [Data structures documentation](https://www.chartjs.org/docs/latest/general/data-structures.html)
    */
   labels: {
     type: Array as PropType<string[]>,
-    default: () => [],
+    default: () => []
   },
   /**
    * Disable accessibility patterns
    */
   disableAccessibility: {
     type: Boolean,
-    default: false,
+    default: false
   },
   /**
    * Used to choose the colour set of the charts as defined in the Figma prototypes.
@@ -103,7 +106,7 @@ const radarComponentChartProps = defineProps({
    */
   colourSet: {
     type: Number,
-    default: 0,
+    default: 0
   },
   /**
    * 6 patterns exist and are not randomly given but follow the order defined in [patternsStandardList](/src/services/patterns/ChartDesign.ts)
@@ -112,36 +115,36 @@ const radarComponentChartProps = defineProps({
    */
   newPatternsOrder: {
     type: Array as PropType<number[]>,
-    default: () => [0, 1, 2, 3, 4, 5],
+    default: () => [0, 1, 2, 3, 4, 5]
   },
   /**
    * Value of the `datasets` key present in the `data` object passed to the Chart config
    */
   datasets: {
     type: Array as PropType<Area[]>,
-    default: () => [],
+    default: () => []
   },
   /**
    * Add custom CSS classes to the <canvas> element
    */
   cssClasses: {
     default: '',
-    type: String,
+    type: String
   },
   /**
    * Add custom CSS styles to the <canvas> element
    */
   styles: {
     type: Object as PropType<Partial<CSSStyleDeclaration>>,
-    default: () => {},
+    default: () => {}
   },
   /**
    * Value of the `plugins` key passed to the Chart config
    */
   plugins: {
     type: Array as PropType<Plugin<'radar'>[]>,
-    default: () => [],
-  },
+    default: () => []
+  }
 });
 
 const patternsColors = computed(() =>
@@ -162,7 +165,7 @@ const patternsOrderedList = computed(() =>
 
 const radarData = computed<ChartData<'radar'>>(() => ({
   labels: getRadarLabels(),
-  datasets: getDatasets(),
+  datasets: getDatasets()
 }));
 
 function getDatasets() {
@@ -180,7 +183,7 @@ function getDatasets() {
       pointStyle: index % 2 === 0 ? 'circle' : 'rectRot',
       pointHoverBackgroundColor: patternsColors.value[index],
       pointHoverBorderColor: patternsColors.value[index],
-      data: dataset.areaData.map((x: { position: number }) => x.position),
+      data: dataset.areaData.map((x: { position: number }) => x.position)
     };
   });
 }
@@ -197,13 +200,13 @@ const chartOptions: any = {
   },
   plugins: {
     htmlLegend: {
-      containerID: 'legend-container',
+      containerID: 'legend-container'
     },
     legend: {
-      display: false,
+      display: false
     },
     title: {
-      display: false,
+      display: false
     },
     datalabels: {
       display: false
@@ -220,16 +223,16 @@ const chartOptions: any = {
           patternsOrderedList.value,
           radarComponentChartProps.disableAccessibility
         );
-      },
-    },
+      }
+    }
   },
   layout: {
     padding: {
       left: 130,
       right: 95,
       top: 95,
-      bottom: 95,
-    },
+      bottom: 95
+    }
   },
   scales: {
     r: {
@@ -239,15 +242,15 @@ const chartOptions: any = {
         display: false,
         font: {
           weight: 400,
-          family: 'Roboto',
-        },
+          family: 'Roboto'
+        }
       },
       ticks: {
         display: false,
-        stepSize: 25,
-      },
-    },
-  },
+        stepSize: 25
+      }
+    }
+  }
 };
 const legendContainer = ref(null);
 const selectMode = ref(false);
@@ -267,7 +270,11 @@ const formatNumber = (numberFromJson: string) => {
   return formatWithThousandsSeprators(parseFloat(numberFromJson));
 };
 function createLegendElementWithCheckbox(chart: any, item: ChartItem) {
-  const liContent = createLegendCheckbox(chart, item, null as unknown as string[]);
+  const liContent = createLegendCheckbox(
+    chart,
+    item,
+    null as unknown as string[]
+  );
   liContent.onclick = (e: Event) => {
     switchItemVisibility(chart, item.datasetIndex, selectMode);
     e.stopPropagation();
@@ -303,14 +310,14 @@ const radarPlugins = [
         li.appendChild(createHtmlLegendItemText(item));
         ul.appendChild(li);
       });
-    },
+    }
   },
   {
     id: 'radarLabelPlugin',
     beforeDraw(chart: any) {
       drawLabels(chart, radarComponentChartProps);
-    },
-  },
+    }
+  }
 ];
 
 const getTooltipData = (context: Context): string => {

package/src/components/radar/index.ts

@@ -1,8 +1,8 @@
-import type { App } from "vue";
-import RadarChart from "./RadarChart.vue";
+import type { App } from 'vue';
+import RadarChart from './RadarChart.vue';
 
 RadarChart.install = (app: App) => {
-  app.component("RadarChart", RadarChart);
+  app.component('RadarChart', RadarChart);
 };
 
 export { RadarChart };