@mozaic-ds/chart 0.1.0-beta.4 → 0.1.0-beta.40

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

@@ -0,0 +1,66 @@
+// BubbleChart.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/vue3';
+import BubbleChart from './BubbleChart.vue';
+
+const meta = {
+  title: 'Charts/Bubble',
+  component: BubbleChart
+} satisfies Meta<typeof BubbleChart>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  args: {
+    width: '800px',
+    height: '500px',
+    labels: ['Serie 1', 'Serie 2', 'Serie 3', 'Serie 4'],
+    colours: [0, 4, 1, 2],
+    shapes: ['rectRot', 'triangle', 'circle', 'rect'],
+    colourSet: 4,
+    datasets: [
+      [
+        {
+          x: 20000,
+          y: 25,
+          r: 5
+        },
+        {
+          x: 10000,
+          y: 505,
+          r: 15
+        }
+      ],
+      [
+        {
+          x: 10000,
+          y: 30,
+          r: 20
+        },
+        {
+          x: 10,
+          y: 300,
+          r: 200
+        }
+      ],
+      [
+        {
+          x: 5000,
+          y: 320,
+          r: 100
+        }
+      ],
+      [
+        {
+          x: 18000,
+          y: 8,
+          r: 30
+        }
+      ]
+    ],
+    xAxis: { title: 'Data 1', unit: '€' },
+    yAxis: { title: 'Data 2', unit: 'D' },
+    rAxis: { title: 'Data 3', unit: '%' }
+  }
+} satisfies Story;

package/src/components/bubble/BubbleChart.vue

@@ -0,0 +1,432 @@
+<template>
+  <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]"
+      />
+    </div>
+    <div class="chart-legend">
+      <img
+        src="../../assets/img/bubbles.svg"
+        :alt="rAxis.title"
+        class="bubble-icon mu-mr-025"
+      />
+      <div class="size-legend-label">
+        {{ rAxis.title }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue';
+import { Bubble } from 'vue-chartjs';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { addAlpha } from '../../services/ColorFunctions';
+
+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 { formatDecimalNumber } from '../../services/FormatUtilities';
+import { AxisDefinition } from '../../types/AxisDefinition';
+
+const defaultDataLabels = {
+  _listened: false,
+  _listeners: {},
+  _datasets: [],
+  _labels: [],
+  _actives: []
+};
+
+// Create a patched version of ChartDataLabels that handles missing context
+const PatchedChartDataLabels: Plugin = {
+  ...ChartDataLabels,
+  beforeUpdate(chart: any, args: any, options: any) {
+    if (!chart.$datalabels) {
+      chart.$datalabels = defaultDataLabels;
+    }
+    return ChartDataLabels.beforeUpdate?.(chart, args, options);
+  },
+  beforeEvent(chart: any, args: any, options: any) {
+    if (!chart.$datalabels) {
+      chart.$datalabels = defaultDataLabels;
+    }
+    return ChartDataLabels.beforeEvent?.(chart, args, options);
+  }
+};
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  CategoryScale,
+  LinearScale,
+  PatchedChartDataLabels
+);
+
+const { colourSets } = ChartDesign();
+
+const bubbleDataProps = defineProps({
+  /**
+   * Value of the id attribute present on the <canvas> tag element the chart
+   */
+  chartId: {
+    type: String,
+    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: () => []
+  },
+  /**
+   * Used to choose the colour set of the charts as defined in the Figma prototypes.
+   * 7 colour sets are currently defined:
+   * - Default 0 corresponds to the current one
+   * - 1 to 6 corresponds to the "new" [colour sets](https://www.figma.com/file/Hn6PyvnR385Ta0XN3KqOI9/04.-Dataviz---Documentation-(read-only)?type=design&node-id=1-69316&mode=design&t=sDytQ5BipsryWkuA-0)
+   * Note: All the sets are defined in /src/services/patterns/ChartDesign.ts
+   */
+  colourSet: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * 6 colors exist in the colourSet (0 to 5)
+   * In some use cases, you may need to specify the colours for each dataset
+   */
+  colours: {
+    type: Array as PropType<number[]>,
+    default: () => []
+  },
+  /**
+   * In some use cases, you may need to specify the shapes for each dataset
+   * Default shape is circle, implementation is done using the Point Styles of chartjs :
+   * cf. https://www.chartjs.org/docs/latest/configuration/elements.html#point-styles
+   */
+  shapes: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  /**
+   * Value of the `datasets` key present in the `data` object passed to the Chart config
+   */
+  datasets: {
+    type: Array as PropType<any[]>,
+    default: () => []
+  },
+  /**
+   * Value of the `width` css property used to define the width of the <canvas> element
+   */
+  width: {
+    type: String,
+    default: '400px'
+  },
+  /**
+   * Value of the `height` css property used to define the height of the <canvas> element
+   */
+  height: {
+    type: String,
+    default: '300px'
+  },
+  /**
+   * Add custom CSS classes to the <canvas> element
+   */
+  cssClasses: {
+    type: String,
+    default: undefined
+  },
+  /**
+   * Add custom CSS styles to the <canvas> element
+   */
+  styles: {
+    type: Object as PropType<Partial<CSSStyleDeclaration>>,
+    default: () => {}
+  },
+  /**
+   * Minimum size for a bubble
+   */
+  bubbleMin: {
+    type: Number,
+    default: 10
+  },
+  /**
+   * Maximum size for a bubble
+   */
+  bubbleMax: {
+    type: Number,
+    default: 40
+  },
+  /**
+   * Value of the `plugins` key passed to the Chart config
+   */
+  plugins: {
+    type: Array as PropType<Plugin<any>[]>,
+    default: () => []
+  },
+  /**
+   * If set to true the label of the dataserie will be shown on top of the bubble
+   */
+  displayBubbleLabel: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * X axis data : title and unit
+   */
+  xAxis: {
+    type: Object as PropType<AxisDefinition>,
+    default: null,
+    required: true
+  },
+  /**
+   * Y axis data : title and unit
+   */
+  yAxis: {
+    type: Object as PropType<AxisDefinition>,
+    default: null,
+    required: true
+  },
+  /**
+   * X axis data : title and unit
+   */
+  rAxis: {
+    type: Object as PropType<AxisDefinition>,
+    default: null,
+    required: true
+  },
+  /**
+   * Show axis labels
+   */
+  displayAxisLabels: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Value of the minimum number of fraction digits used to format the x values
+   */
+  xMinimumFractionDigits: {
+    type: Number,
+    required: false
+  },
+  /**
+   * Value of the maximum number of fraction digits used to format the x values
+   */
+  xMaximumFractionDigits: {
+    type: Number,
+    required: false
+  },
+  /**
+   * Value of the minimum number of fraction digits used to format the y values
+   */
+  yMinimumFractionDigits: {
+    type: Number,
+    required: false
+  },
+  /**
+   * Value of the maximum number of fraction digits used to format the y values
+   */
+  yMaximumFractionDigits: {
+    type: Number,
+    required: false
+  },
+  /**
+   * Value of the minimum number of fraction digits used to format the r values
+   */
+  rMinimumFractionDigits: {
+    type: Number,
+    required: false
+  },
+  /**
+   * Value of the maximum number of fraction digits used to format the r values
+   */
+  rMaximumFractionDigits: {
+    type: Number,
+    required: false
+  }
+});
+
+const normalizeDatasets = function (dataSets: Array<Array<any>>) {
+  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;
+
+  return dataSets.map((dataSerie: Array<any>) => {
+    if (max === min) {
+      return dataSerie.map((item) => {
+        return {
+          x: item.x,
+          y: item.y,
+          r: rMin + (rMax - rMin) / 2
+        };
+      });
+    } else {
+      return dataSerie.map((item) => {
+        return {
+          x: item.x,
+          y: item.y,
+          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]
+      })
+    )
+  };
+});
+
+const options = computed(() => ({
+  responsive: false,
+  // eslint-disable-next-line
+  scales: {
+    x: {
+      offset: true,
+      title: {
+        display: bubbleDataProps.displayAxisLabels,
+        text: bubbleDataProps.xAxis.title
+      }
+    },
+    y: {
+      offset: true,
+      title: {
+        display: bubbleDataProps.displayAxisLabels,
+        text: bubbleDataProps.yAxis.title
+      }
+    }
+  },
+  plugins: {
+    legend: {
+      display: false
+    },
+    title: {
+      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
+      ) {
+        return context.dataset.label;
+      },
+      padding: 0
+    },
+    tooltip: {
+      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];
+        new BubbleTooltipService().createBubbleTooltip(
+          context,
+          getTooltipData(currentBubble),
+          bubbleDataProps.labels[datasetIndex]
+        );
+      }
+    }
+  }
+}));
+
+function getTooltipData(currentBubble: { x: number; y: number; r: number }) {
+  return [
+    {
+      label: bubbleDataProps.xAxis.title,
+      value: `${formatDecimalNumber(currentBubble.x, bubbleDataProps.xMinimumFractionDigits, bubbleDataProps.xMaximumFractionDigits)}`,
+      unit: bubbleDataProps.xAxis?.unit
+    },
+    {
+      label: bubbleDataProps.yAxis.title,
+      value: `${formatDecimalNumber(currentBubble.y, bubbleDataProps.yMinimumFractionDigits, bubbleDataProps.yMaximumFractionDigits)}`,
+      unit: bubbleDataProps.yAxis?.unit
+    },
+    {
+      label: bubbleDataProps.rAxis.title,
+      value: `${formatDecimalNumber(currentBubble.r, bubbleDataProps.rMinimumFractionDigits, bubbleDataProps.rMaximumFractionDigits)}`,
+      unit: bubbleDataProps.rAxis?.unit
+    }
+  ];
+}
+</script>
+
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.checkbox';
+</style>
+
+<style scoped>
+.container {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  font-family: 'Roboto', sans-serif;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.chart-legend {
+  display: flex;
+  gap: 4px;
+  font-size: 14px;
+  align-items: center;
+  margin: 1.375rem 1.0625rem;
+  color: rgb(102, 102, 102);
+}
+
+.bubble-icon {
+  width: 16px;
+  height: 16px;
+}
+</style>

package/src/components/bubble/index.ts

@@ -0,0 +1,8 @@
+import type { App } from 'vue';
+import BubbleChart from './BubbleChart.vue';
+
+BubbleChart.install = (app: App) => {
+  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,70 +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
+  }
 } 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;