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

package/src/components/bubble/BubbleChart.vue

@@ -2,20 +2,20 @@
   <div class="container">
     <div class="main">
       <Bubble
-          v-if="chartData"
-          ref="bubbleChartRef"
-          :id="chartId"
-          :data="chartData"
-          :options="options"
-          :class="cssClasses"
-          :style="[{ width, height, cursor: 'pointer' }, styles]"
+        v-if="chartData"
+        ref="bubbleChartRef"
+        :id="chartId"
+        :data="chartData"
+        :options="options"
+        :class="cssClasses"
+        :style="[{ width, height, cursor: 'pointer' }, styles]"
       />
     </div>
     <div class="chart-legend">
       <img
-          src="../../assets/img/bubbles.svg"
-          :alt="rAxis.title"
-          class="bubble-icon mu-mr-025"
+        src="../../assets/img/bubbles.svg"
+        :alt="rAxis.title"
+        class="bubble-icon mu-mr-025"
       />
       <div class="size-legend-label">
         {{ rAxis.title }}
@@ -25,30 +25,38 @@
 </template>
 
 <script setup lang="ts">
-import {computed, PropType} from 'vue';
-import {Bubble} from 'vue-chartjs';
+import { computed, PropType } from 'vue';
+import { Bubble } from 'vue-chartjs';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
-import {addAlpha} from '../../services/ColorFunctions';
+import { addAlpha } from '../../services/ColorFunctions';
 
-import {CategoryScale, Chart as ChartJS, Legend, LinearScale, Plugin, PointElement, Title, Tooltip,} from 'chart.js';
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  Plugin,
+  PointElement,
+  Title,
+  Tooltip
+} from 'chart.js';
 import ChartDesign from '../../services/patterns/ChartDesign';
-import {Context} from '../../services/GenericTooltipService';
-import {BubbleTooltipService} from '../../services/BubbleTooltipService';
-import {formatWithThousandsSeprators} from '../../services/FormatUtilities';
-import {AxisDefinition} from '../../types/AxisDefinition';
+import { Context } from '../../services/GenericTooltipService';
+import { BubbleTooltipService } from '../../services/BubbleTooltipService';
+import { formatWithThousandsSeprators } from '../../services/FormatUtilities';
+import { AxisDefinition } from '../../types/AxisDefinition';
 
 ChartJS.register(
-    Title,
-    Tooltip,
-    Legend,
-    PointElement,
-    CategoryScale,
-    LinearScale,
-    ChartDataLabels
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  CategoryScale,
+  LinearScale,
+  ChartDataLabels
 );
 
-const {colourSets} = ChartDesign();
-
+const { colourSets } = ChartDesign();
 
 const bubbleDataProps = defineProps({
   /**
@@ -56,14 +64,14 @@ const bubbleDataProps = defineProps({
    */
   chartId: {
     type: String,
-    default: 'bubble-chart',
+    default: 'bubble-chart'
   },
   /**
    * Labels used to label the series. 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.
@@ -74,7 +82,7 @@ const bubbleDataProps = defineProps({
    */
   colourSet: {
     type: Number,
-    default: 0,
+    default: 0
   },
   /**
    * 6 colors exist in the colourSet (0 to 5)
@@ -82,7 +90,7 @@ const bubbleDataProps = defineProps({
    */
   colours: {
     type: Array as PropType<number[]>,
-    default: () => [],
+    default: () => []
   },
   /**
    * In some use cases, you may need to specify the shapes for each dataset
@@ -91,64 +99,63 @@ const bubbleDataProps = defineProps({
    */
   shapes: {
     type: Array as PropType<string[]>,
-    default: () => [],
+    default: () => []
   },
   /**
    * Value of the `datasets` key present in the `data` object passed to the Chart config
    */
   datasets: {
     type: Array as PropType<any[]>,
-    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: () => {}
   },
   /**
    * Minimum size for a bubble
    */
   bubbleMin: {
     type: Number,
-    default: 10,
+    default: 10
   },
   /**
    * Maximum size for a bubble
    */
   bubbleMax: {
     type: Number,
-    default: 40,
+    default: 40
   },
   /**
    * Value of the `plugins` key passed to the Chart config
    */
   plugins: {
     type: Array as PropType<Plugin<any>[]>,
-    default: () => [],
+    default: () => []
   },
   /**
    * If set to true the label of the dataserie will be shown on top of the bubble
@@ -163,7 +170,7 @@ const bubbleDataProps = defineProps({
   xAxis: {
     type: Object as PropType<AxisDefinition>,
     default: null,
-    required: true,
+    required: true
   },
   /**
    * Y axis data : title and unit
@@ -171,7 +178,7 @@ const bubbleDataProps = defineProps({
   yAxis: {
     type: Object as PropType<AxisDefinition>,
     default: null,
-    required: true,
+    required: true
   },
   /**
    * X axis data : title and unit
@@ -179,7 +186,7 @@ const bubbleDataProps = defineProps({
   rAxis: {
     type: Object as PropType<AxisDefinition>,
     default: null,
-    required: true,
+    required: true
   },
   /**
    * Show axis labels
@@ -187,54 +194,57 @@ const bubbleDataProps = defineProps({
   displayAxisLabels: {
     type: Boolean,
     default: true
-  },
+  }
 });
 
 const normalizeDatasets = function (dataSets: Array<Array<any>>) {
-  const rValues: Array<number> = []
+  const rValues: Array<number> = [];
   dataSets.forEach((dataSerie: Array<any>) => {
     dataSerie.forEach((item: any) => {
-      rValues.push(item.r)
-    })
-  })
-  const max = Math.max(...rValues)
-  const min = Math.min(...rValues)
-  const rMax = bubbleDataProps.bubbleMax
-  const rMin = bubbleDataProps.bubbleMin
+      rValues.push(item.r);
+    });
+  });
+  const max = Math.max(...rValues);
+  const min = Math.min(...rValues);
+  const rMax = bubbleDataProps.bubbleMax;
+  const rMin = bubbleDataProps.bubbleMin;
 
   return dataSets.map((dataSerie: Array<any>) => {
     if (max === min) {
-      return dataSerie.map((item) => {      
+      return dataSerie.map((item) => {
         return {
           x: item.x,
           y: item.y,
           r: rMin + (rMax - rMin) / 2
-        }
-      })
+        };
+      });
     } else {
-      return dataSerie.map((item) => {      
+      return dataSerie.map((item) => {
         return {
           x: item.x,
           y: item.y,
-          r: rMin + (item.r - min) * (rMax - rMin) / (max - min)
-        }
-      })
-  }
-  })
-}
+          r: rMin + ((item.r - min) * (rMax - rMin)) / (max - min)
+        };
+      });
+    }
+  });
+};
 
 const chartData = computed(() => {
-
   const chartColourSet = colourSets[bubbleDataProps.colourSet];
   return {
-    datasets:
-        normalizeDatasets(bubbleDataProps.datasets).map((data, index) => ({
-          data: data,
-          pointStyle: bubbleDataProps.shapes[index],
-          backgroundColor: addAlpha(chartColourSet[bubbleDataProps.colours[index]], 0.2),
-          borderColor: chartColourSet[bubbleDataProps.colours[index]],
-          label: bubbleDataProps.labels[index],
-        }))
+    datasets: normalizeDatasets(bubbleDataProps.datasets).map(
+      (data, index) => ({
+        data: data,
+        pointStyle: bubbleDataProps.shapes[index],
+        backgroundColor: addAlpha(
+          chartColourSet[bubbleDataProps.colours[index]],
+          0.2
+        ),
+        borderColor: chartColourSet[bubbleDataProps.colours[index]],
+        label: bubbleDataProps.labels[index]
+      })
+    )
   };
 });
 
@@ -247,31 +257,34 @@ const options = computed(() => ({
       title: {
         display: bubbleDataProps.displayAxisLabels,
         text: bubbleDataProps.xAxis.title
-      },
+      }
     },
     y: {
       offset: true,
       title: {
         display: bubbleDataProps.displayAxisLabels,
         text: bubbleDataProps.yAxis.title
-      },
+      }
     }
   },
   plugins: {
     responsive: true,
     maintainAspectRatio: false,
     legend: {
-      display: false,
+      display: false
     },
     title: {
-      display: false,
+      display: false
     },
     datalabels: {
       display: bubbleDataProps.displayBubbleLabel,
       anchor: 'end' as const,
       align: 'end' as const,
       color: 'black',
-      formatter: function <T extends { dataset: any }>(_value: any, context: T) {
+      formatter: function <T extends { dataset: any }>(
+        _value: any,
+        context: T
+      ) {
         return context.dataset.label;
       },
       padding: 0
@@ -280,22 +293,37 @@ const options = computed(() => ({
       enabled: false,
       position: 'nearest' as const,
       external: function (context: Context) {
-        const datasetIndex: number = context.tooltip?.dataPoints?.[0].datasetIndex || 0;
-        const dataIndex: number = context.tooltip.dataPoints?.[0].dataIndex || 0;
-        const currentBubble: { x: number, y: number, r: number } = bubbleDataProps.datasets[datasetIndex][dataIndex];
+        const datasetIndex: number =
+          context.tooltip?.dataPoints?.[0].datasetIndex || 0;
+        const dataIndex: number =
+          context.tooltip.dataPoints?.[0].dataIndex || 0;
+        const currentBubble: { x: number; y: number; r: number } =
+          bubbleDataProps.datasets[datasetIndex][dataIndex];
         new BubbleTooltipService().createBubbleTooltip(
-            context,
-            [{label: bubbleDataProps.xAxis.title, value: `${formatWithThousandsSeprators(currentBubble.x)}`, unit: bubbleDataProps.xAxis?.unit},
-              {label: bubbleDataProps.yAxis.title, value: `${formatWithThousandsSeprators(currentBubble.y)}`, unit: bubbleDataProps.yAxis?.unit},
-              {label: bubbleDataProps.rAxis.title, value: `${formatWithThousandsSeprators(currentBubble.r)}`, unit: bubbleDataProps.rAxis?.unit}
-            ],
-            bubbleDataProps.labels[datasetIndex],
+          context,
+          [
+            {
+              label: bubbleDataProps.xAxis.title,
+              value: `${formatWithThousandsSeprators(currentBubble.x)}`,
+              unit: bubbleDataProps.xAxis?.unit
+            },
+            {
+              label: bubbleDataProps.yAxis.title,
+              value: `${formatWithThousandsSeprators(currentBubble.y)}`,
+              unit: bubbleDataProps.yAxis?.unit
+            },
+            {
+              label: bubbleDataProps.rAxis.title,
+              value: `${formatWithThousandsSeprators(currentBubble.r)}`,
+              unit: bubbleDataProps.rAxis?.unit
+            }
+          ],
+          bubbleDataProps.labels[datasetIndex]
         );
-      },
-    },
-  },
+      }
+    }
+  }
 }));
-
 </script>
 
 <style lang="scss">
@@ -332,5 +360,4 @@ const options = computed(() => ({
   width: 16px;
   height: 16px;
 }
-
 </style>

package/src/components/bubble/index.ts

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

package/src/components/doughnut/DoughnutChart.stories.ts

@@ -1,11 +1,11 @@
 // DoughnutChart.stories.ts;
 
-import type { Meta, StoryObj } from "@storybook/vue3";
-import DoughnutChart from "./DoughnutChart.vue";
+import type { Meta, StoryObj } from '@storybook/vue3';
+import DoughnutChart from './DoughnutChart.vue';
 
 const meta = {
-  title: "Charts/Doughnut",
-  component: DoughnutChart,
+  title: 'Charts/Doughnut',
+  component: DoughnutChart
 } satisfies Meta<typeof DoughnutChart>;
 
 export default meta;
@@ -13,71 +13,72 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
   args: {
-    height: "400px",
-    width: "400px",
-    labels: ["Data One", "Data Two"],
+    height: '400px',
+    width: '400px',
+    labels: ['Data One', 'Data Two'],
+    enableCenteredLabel: true,
     disableAccessibility: false,
     data: [
       {
         value: 2771824.19,
-        unit: "€",
-        rate: 30.186240355262925,
+        unit: '€',
+        rate: 30.186240355262925
       },
       {
         value: 1715453.65,
-        unit: "€",
-        rate: 18.68195550931139,
-      },
+        unit: '€',
+        rate: 18.68195550931139
+      }
     ],
-    maxValues: 2,
-  },
+    maxValues: 2
+  }
 } satisfies Story;
 
 export const MultipleData = {
   args: {
-    height: "400px",
-    width: "400px",
+    height: '400px',
+    width: '400px',
     labels: [
-      "Data One",
-      "Data Two",
-      "Data Three",
-      "Data Four",
-      "Data Five",
-      "Data Six",
+      'Data One',
+      'Data Two',
+      'Data Three',
+      'Data Four',
+      'Data Five',
+      'Data Six'
     ],
     maxValues: 3,
     disableAccessibility: false,
     data: [
       {
         value: 2771824.19,
-        unit: "€",
-        rate: 30.186240355262925,
+        unit: '€',
+        rate: 30.186240355262925
       },
       {
         value: 1715453.65,
-        unit: "€",
-        rate: 18.68195550931139,
+        unit: '€',
+        rate: 18.68195550931139
       },
       {
         value: 1651575.28,
-        unit: "€",
-        rate: 17.986295287685856,
+        unit: '€',
+        rate: 17.986295287685856
       },
       {
         value: 1168958.3,
-        unit: "€",
-        rate: 12.730409214402426,
+        unit: '€',
+        rate: 12.730409214402426
       },
       {
         value: 949837.87,
-        unit: "€",
-        rate: 10.34410275579238,
+        unit: '€',
+        rate: 10.34410275579238
       },
       {
         value: 924760.17,
-        unit: "€",
-        rate: 10.070996877545035,
-      },
-    ],
-  },
+        unit: '€',
+        rate: 10.070996877545035
+      }
+    ]
+  }
 } satisfies Story;