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

package/src/components/bubble/BubbleChart.vue

@@ -0,0 +1,363 @@
+<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 { formatWithThousandsSeprators } from '../../services/FormatUtilities';
+import { AxisDefinition } from '../../types/AxisDefinition';
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  CategoryScale,
+  LinearScale,
+  ChartDataLabels
+);
+
+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
+  }
+});
+
+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: {
+    responsive: true,
+    maintainAspectRatio: false,
+    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,
+          [
+            {
+              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">
+@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;