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

package/src/components/bar/BarChart.vue

@@ -17,16 +17,28 @@
 </template>
 
 <script setup lang="ts">
-import type {Ref} from 'vue';
-import {computed, PropType, ref, watch} from 'vue';
-import {Bar} from 'vue-chartjs';
+import type { Ref } from 'vue';
+import { computed, PropType, ref, watch } from 'vue';
+import { Bar } from 'vue-chartjs';
 import barChartFunctions from '../../services/BarChartFunctions';
-import type {Context} from '../../services/GenericTooltipService';
-import {GenericTooltipService} from '../../services/GenericTooltipService';
-import {TooltipChartType} from '../../types/TooltipChartType';
-import {formatTicks, formatWithThousandsSeprators,} from '../../services/FormatUtilities';
-import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Plugin, Title, Tooltip,} from 'chart.js';
-import {BarData} from '../../types/BarData';
+import type { Context } from '../../services/GenericTooltipService';
+import { GenericTooltipService } from '../../services/GenericTooltipService';
+import { TooltipChartType } from '../../types/TooltipChartType';
+import {
+  formatTicks,
+  formatWithThousandsSeprators
+} from '../../services/FormatUtilities';
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  Plugin,
+  Title,
+  Tooltip
+} from 'chart.js';
+import { BarData } from '../../types/BarData';
 import ChartDesign from '../../services/patterns/ChartDesign';
 
 ChartJS.register(
@@ -48,21 +60,21 @@ const barDataProps = defineProps({
    */
   chartId: {
     type: String,
-    default: 'radar-chart',
+    default: 'radar-chart'
   },
   /**
    * Unit of values on canvas Y axis
    */
   unit: {
     type: String,
-    default: '%',
+    default: '%'
   },
   /**
    * 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: () => []
   },
   /**
    * Used to choose the colour set of the charts as defined in the Figma prototypes.
@@ -73,7 +85,7 @@ const barDataProps = 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)
@@ -82,7 +94,7 @@ const barDataProps = 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
@@ -90,92 +102,92 @@ const barDataProps = defineProps({
    */
   datasets: {
     type: Array as PropType<BarData[]>,
-    default: () => [],
+    default: () => []
   },
   /**
    * Value of the `width` css property used to define the width of the <canvas> element
    */
   width: {
     type: String,
-    default: '400px',
+    default: '400px'
   },
   /**
    * Value of the `height` css property used to define the height of the <canvas> element
    */
   height: {
     type: String,
-    default: '300px',
+    default: '300px'
   },
   /**
    * Add custom CSS classes to the <canvas> element
    */
   cssClasses: {
     type: String,
-    default: undefined,
+    default: undefined
   },
   /**
    * 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<'bar'>[]>,
-    default: () => [],
+    default: () => []
   },
   /**
    * Activates "stacked" mode
    */
   stacked: {
     type: Boolean,
-    default: false,
+    default: false
   },
   /**
    * Disable accessibility patterns
    */
   disableAccessibility: {
     type: Boolean,
-    default: false,
+    default: false
   },
   /**
    * Enable hover feature (may cause strange behavior when used with width and height in %)
    */
-   enableHoverFeature: {
+  enableHoverFeature: {
     type: Boolean,
-    default: false,
+    default: false
   },
   /**
    * X axis title
    */
-   xAxisTitle: {
+  xAxisTitle: {
     type: String,
-    default: null,
+    default: null
   },
   /**
    * Y axis title
    */
-   yAxisTitle: {
+  yAxisTitle: {
     type: String,
-    default: null,
+    default: null
   },
   /**
    * Label of the first line in the Tooltip
    */
   tooltipFirstLineLabel: {
     type: String,
-    default: 'content',
+    default: 'content'
   },
   /**
    * Label of the second line in the Tooltip
    */
   tooltipSecondLineLabel: {
     type: String,
-    default: 'content2',
-  },
+    default: 'content2'
+  }
 });
 
 // computed to make the colors list reactive to the props
@@ -202,7 +214,7 @@ const disablePattern = computed(() => {
 
 const enableHover = computed(() => {
   return barDataProps.enableHoverFeature;
-})
+});
 
 const {
   onHoverIndex,
@@ -210,7 +222,7 @@ const {
   reloadChart,
   getOnHoverOptions,
   getStackedDatasets,
-  privateGetHtmlLegendPlugin,
+  privateGetHtmlLegendPlugin
 } = barChartFunctions();
 
 const chartData = computed(() => {
@@ -229,7 +241,7 @@ const chartData = computed(() => {
       patternsColors.value,
       patternsOrderedList.value,
       0
-    ),
+    )
   };
 });
 
@@ -259,13 +271,14 @@ const getChartData = (
   index: number,
   indexOfValueToHide: number | null,
   isStacked: boolean = false
-) : number []=> {
+): number[] => {
   const data = Object.assign([], barDataProps.datasets[index].data);
   if (indexOfValueToHide && indexOfOthersLabelIfNull.value) {
     data.splice(indexOfOthersLabelIfNull.value, 1);
   }
 
-  return data.map((data: { rate?: number, amount?: number}) =>
+  return data.map(
+    (data: { rate?: number; amount?: number }) =>
       (barDataProps.unit === '%' ? data.rate : data.amount) as number
   );
 };
@@ -296,11 +309,11 @@ const getChartLabels = (indexOfValueToHide: number | null) => {
 
 const options = computed(() => ({
   // eslint-disable-next-line
-  onHover: barDataProps.enableHoverFeature? getOnHoverOptions() : () => {},
+  onHover: barDataProps.enableHoverFeature ? getOnHoverOptions() : () => {},
   elements: {
     bar: {
-      borderSkipped: false,
-    },
+      borderSkipped: false
+    }
   },
   maxBarThickness: 64,
   categoryPercentage: 0.6,
@@ -308,10 +321,10 @@ const options = computed(() => ({
     responsive: true,
     maintainAspectRatio: false,
     legend: {
-      display: false,
+      display: false
     },
     title: {
-      display: false,
+      display: false
     },
     datalabels: {
       display: false
@@ -320,8 +333,12 @@ const options = computed(() => ({
       enabled: false,
       position: 'nearest' as const,
       external: function (context: Context) {
-        const dataIndex: number = context.tooltip.dataPoints?.[0].dataIndex || 0;
-        if (!barDataProps.labels[dataIndex] || barDataProps.labels[dataIndex] === '') {
+        const dataIndex: number =
+          context.tooltip.dataPoints?.[0].dataIndex || 0;
+        if (
+          !barDataProps.labels[dataIndex] ||
+          barDataProps.labels[dataIndex] === ''
+        ) {
           return;
         }
         new GenericTooltipService().createTooltip(
@@ -330,14 +347,14 @@ const options = computed(() => ({
           {
             chartType: TooltipChartType.BAR_CHART,
             firstLineLabel: xValue,
-            secondLineLabel: yValue,
+            secondLineLabel: yValue
           },
           patternsColors.value,
           patternsOrderedList.value,
           barDataProps.disableAccessibility
         );
-      },
-    },
+      }
+    }
   },
   scales: {
     x: {
@@ -345,7 +362,7 @@ const options = computed(() => ({
       title: {
         display: barDataProps.xAxisTitle !== null,
         text: barDataProps.xAxisTitle
-      },
+      }
     },
     y: {
       stacked: barDataProps.stacked,
@@ -360,13 +377,13 @@ const options = computed(() => ({
             : formatWithThousandsSeprators(val as number) +
                 ' ' +
                 barDataProps.unit;
-        },
-      },
-    },
-  },
+        }
+      }
+    }
+  }
 }));
 
-const htmlLegendPlugin = computed(() => 
+const htmlLegendPlugin = computed(() => [
   privateGetHtmlLegendPlugin(
     legendContainer,
     selectMode,
@@ -375,7 +392,7 @@ const htmlLegendPlugin = computed(() =>
     patternsOrderedList,
     enableHover
   )
-);
+]);
 
 watch(
   onHoverIndex,

package/src/components/bar/index.ts

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

package/src/components/bubble/BubbleChart.stories.ts

@@ -1,11 +1,11 @@
 // BubbleChart.stories.ts
 
-import type { Meta, StoryObj } from "@storybook/vue3";
-import BubbleChart from "./BubbleChart.vue";
+import type { Meta, StoryObj } from '@storybook/vue3';
+import BubbleChart from './BubbleChart.vue';
 
 const meta = {
-  title: "Charts/Bubble",
-  component: BubbleChart,
+  title: 'Charts/Bubble',
+  component: BubbleChart
 } satisfies Meta<typeof BubbleChart>;
 
 export default meta;
@@ -13,11 +13,11 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
   args: {
-    width: "800px",
-    height: "500px",
-    labels: ['Serie 1','Serie 2', 'Serie 3', 'Serie 4'],
+    width: '800px',
+    height: '500px',
+    labels: ['Serie 1', 'Serie 2', 'Serie 3', 'Serie 4'],
     colours: [0, 4, 1, 2],
-    shapes: ['rectRot', 'triangle','circle','rect'],
+    shapes: ['rectRot', 'triangle', 'circle', 'rect'],
     colourSet: 4,
     datasets: [
       [
@@ -59,8 +59,8 @@ export const Default = {
         }
       ]
     ],
-    xAxis: {title: 'Data 1', unit: '€'},
-    yAxis: {title: 'Data 2', unit: 'D'},
-    rAxis: {title: 'Data 3', unit: '%'}
-  },
+    xAxis: { title: 'Data 1', unit: '€' },
+    yAxis: { title: 'Data 2', unit: 'D' },
+    rAxis: { title: 'Data 3', unit: '%' }
+  }
 } satisfies Story;