@mozaic-ds/chart 0.1.0-beta.2 → 0.1.0-beta.22

package/src/components/bubble/BubbleChart.vue

@@ -0,0 +1,326 @@
+<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>) => {
+    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

@@ -29,6 +29,7 @@ export const Default = {
         rate: 18.68195550931139,
       },
     ],
+    maxValues: 2,
   },
 } satisfies Story;