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

package/src/components/bar/BarChart.vue

@@ -4,13 +4,12 @@
       <Bar
         v-if="chartData"
         ref="barChartRef"
+        :id="chartId"
         :data="chartData"
         :options="options"
         :plugins="htmlLegendPlugin"
-        :style="{ width, height }"
-        :chart-id="chartId"
-        :cssClasses:="cssClasses"
-        :styles="styles"
+        :class="cssClasses"
+        :style="[{ width, height, cursor: 'pointer' }, styles]"
       />
     </div>
     <div ref="legendContainer" />
@@ -18,17 +17,28 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, PropType } from 'vue';
 import type { Ref } from 'vue';
-import { Bar, Chart } from 'vue-chartjs';
+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, Title, Tooltip, Plugin } from 'chart.js';
-import { ButtonName } from '../../types/ButtonName';
-import { BarData } from "../../types/BarData";
+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(
@@ -40,104 +50,171 @@ ChartJS.register(
   LinearScale
 );
 
-const {
-  colourSets,
-  patternsStandardList
-  } = ChartDesign();
+const { colourSets, patternsStandardList } = ChartDesign();
 
 const legendContainer = ref(null);
 const selectMode = ref(false);
 const barDataProps = defineProps({
-    chartId: {
-      type: String,
-      default: "radar-chart",
-    },
-    rawTitle: {
-      type: String,
-      default: 'sales',
-    },
-    unit: {
-      type: String,
-      default: '%',
-    },
-    labels: {
-      type: Array as PropType<string[]>,
-      default: () => []
-    },
-    // colourSet props is 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
-    // Remark : All the sets are defined in /src/services/patterns/ChartDesign.ts
-    colourSet: {
-      type: Number,
-      default: 0
-    },
-    // 6 patterns exist and are not randomly given but follow the order defined in patternsStandardList /src/services/patterns/ChartDesign.ts 
-    // Additionally, a pattern has only one possible colour per colour set as defined in the Figma prototype.
-    // In some use cases, the chart may need to show a different orders of these patterns, this can be changed using the props newPatternsOrder
-    newPatternsOrder: {
-      type: Array as PropType<number[]>,
-      default: () => [0,1,2,3,4,5]
-    },
-    datasets: {
-      type: Array as PropType<BarData[]>,
-      default: () => []
-    },
-    width: {
-      type: String,
-      default: '400px',
-    },
-    height: {
-      type: String,
-      default: '300px',
-    },
-    cssClasses: {
-      default: "",
-      type: String,
-    },
-    styles: {
-      type: Object as PropType<Partial<CSSStyleDeclaration>>,
-      default: () => {},
-    },
-    plugins: {
-      type: Array as PropType<Plugin<"bar">[]>,
-      default: () => [],
-    },
-    stacked: {
-      type: Boolean,
-      default: false,
-    },
-    // disable accessibility patterns
-    disableAccessibility: {
-      type: Boolean,
-      default: false,
-    },
-    firstTooltip: {
-      type: String,
-      default: 'content'
-    },
-    secondTooltip: {
-      type: String,
-      default: 'content2'
-    }
-})
+  /**
+   * Value of the id attribute present on the <canvas> tag element the chart
+   */
+  chartId: {
+    type: String,
+    default: 'radar-chart'
+  },
+  /**
+   * Unit of values on canvas Y axis
+   */
+  unit: {
+    type: String,
+    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: () => []
+  },
+  /**
+   * 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 patterns exist and are not randomly given but follow the order defined in [patternsStandardList](/src/services/patterns/ChartDesign.ts)
+   * Additionally, a pattern has only one possible colour per colour set as defined in the Figma prototype.
+   * In some use cases, the chart may need to show a different orders of these patterns, this can be changed using the props newPatternsOrder
+   */
+  newPatternsOrder: {
+    type: Array as PropType<number[]>,
+    default: () => [0, 1, 2, 3, 4, 5]
+  },
+  /**
+   * Value of the `datasets` key present in the `data` object passed to the Chart config
+   * If it's the stacked barchart (stacked : true in props), each dataset may contain the stack it belongs. stack Zero if not defined
+   */
+  datasets: {
+    type: Array as PropType<BarData[]>,
+    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: () => {}
+  },
+  /**
+   * Value of the `plugins` key passed to the Chart config
+   */
+  plugins: {
+    type: Array as PropType<Plugin<'bar'>[]>,
+    default: () => []
+  },
+  /**
+   * Activates "stacked" mode
+   */
+  stacked: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Disable accessibility patterns
+   */
+  disableAccessibility: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Enable hover feature (may cause strange behavior when used with width and height in %)
+   */
+  enableHoverFeature: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * X axis title
+   */
+  xAxisTitle: {
+    type: String,
+    default: null
+  },
+  /**
+   * Y axis title
+   */
+  yAxisTitle: {
+    type: String,
+    default: null
+  },
+  /**
+   * Label of the first line in the Tooltip
+   */
+  tooltipFirstLineLabel: {
+    type: String,
+    default: 'content'
+  },
+  /**
+   * Label of the second line in the Tooltip
+   */
+  tooltipSecondLineLabel: {
+    type: String,
+    default: 'content2'
+  }
+});
 
 // computed to make the colors list reactive to the props
 const patternsColors = computed(() => {
   return barDataProps.newPatternsOrder.length !== patternsStandardList.length
-      ? colourSets[barDataProps.colourSet]
-      : barDataProps.newPatternsOrder.map((id) => {
-        return colourSets[barDataProps.colourSet][id]
+    ? colourSets[barDataProps.colourSet]
+    : barDataProps.newPatternsOrder.map((id) => {
+        return colourSets[barDataProps.colourSet][id];
       });
 });
 
 // computed to make the patterns list reactive to the props
-const patternsOrderedList = computed(() => {return barDataProps.newPatternsOrder.length !== patternsStandardList.length
-  ? patternsStandardList
-  : barDataProps.newPatternsOrder.map((id)=> {return patternsStandardList[id]})});
+const patternsOrderedList = computed(() => {
+  return barDataProps.newPatternsOrder.length !== patternsStandardList.length
+    ? patternsStandardList
+    : barDataProps.newPatternsOrder.map((id) => {
+        return patternsStandardList[id];
+      });
+});
 
-const disablePattern = computed(() => {return barDataProps.disableAccessibility})
+const disablePattern = computed(() => {
+  return barDataProps.disableAccessibility;
+});
+
+const enableHover = computed(() => {
+  return barDataProps.enableHoverFeature;
+});
 
 const {
   onHoverIndex,
@@ -145,7 +222,7 @@ const {
   reloadChart,
   getOnHoverOptions,
   getStackedDatasets,
-  privateGetHtmlLegendPlugin,
+  privateGetHtmlLegendPlugin
 } = barChartFunctions();
 
 const chartData = computed(() => {
@@ -156,9 +233,9 @@ const chartData = computed(() => {
     datasets: getStackedDatasets(
       barDataProps.datasets.map((dataset, index) => ({
         data: getChartData(index, indexOfOthersLabelIfNull.value),
-        label: barDataProps.datasets[index].label
-        })
-      ),
+        label: barDataProps.datasets[index].label,
+        stack: dataset.stack || 0
+      })),
       barDataProps.stacked,
       barDataProps.disableAccessibility,
       patternsColors.value,
@@ -172,43 +249,53 @@ let xValue: string;
 let yValue: string;
 
 const gettooltipContent = (): void => {
-    xValue = barDataProps.firstTooltip;
-    yValue = barDataProps.secondTooltip;
+  xValue = barDataProps.tooltipFirstLineLabel;
+  yValue = barDataProps.tooltipSecondLineLabel;
 };
 
 const indexOfOthersLabelIfNull: Ref<number | null> = computed(() => {
   const labels = barDataProps.labels;
   if (labels.includes('other')) {
     const index = labels.indexOf('other');
-    if (barDataProps.datasets[0].data[index].rate + '' === '0' &&
-      barDataProps.datasets[1].data[index].rate + '' === '0') {
+    if (
+      barDataProps.datasets[0].data[index].rate + '' === '0' &&
+      barDataProps.datasets[1].data[index].rate + '' === '0'
+    ) {
       return index;
     }
   }
   return null;
 });
 
-const getChartData = (index: number, indexOfValueToHide: number | null, isStacked: boolean = false) => {
+const getChartData = (
+  index: number,
+  indexOfValueToHide: number | null,
+  isStacked: boolean = false
+): number[] => {
   const data = Object.assign([], barDataProps.datasets[index].data);
   if (indexOfValueToHide && indexOfOthersLabelIfNull.value) {
     data.splice(indexOfOthersLabelIfNull.value, 1);
   }
 
-  return data.map((data: { rate: number }) => data.rate);
+  return data.map(
+    (data: { rate?: number; amount?: number }) =>
+      (barDataProps.unit === '%' ? data.rate : data.amount) as number
+  );
 };
 
 const getTooltipData = (context: Context) => {
-  const datasetIndex = context.tooltip.dataPoints[0].datasetIndex;
-  const dataIndex = context.tooltip.dataPoints[0].dataIndex;
-  const percent = parseFloat(context.tooltip.body[0].lines[0].split(':')[1].replace(',', '.')).toFixed(2) +
-  '% ';
-  if (!dataIndex || !datasetIndex) {
-    return '';
-  }
-  const rawdata =
-    barDataProps.datasets[datasetIndex].data[dataIndex];
-  const data = formatWithThousandsSeprators(rawdata.amount);
-  return percent + data + rawdata.amountUnit;
+  const datasetIndex = context.tooltip.dataPoints[0].datasetIndex as number;
+  const dataIndex = context.tooltip.dataPoints[0].dataIndex as number;
+  const rate: string = context.tooltip.body[0].lines[0].split(':')[1];
+  const rawdata = barDataProps.datasets[datasetIndex].data[dataIndex];
+  const percent = rawdata.rate
+    ? parseFloat(rate.replace(',', '.')).toFixed(2) + '% '
+    : '';
+  const amountUnit = rawdata.amountUnit ? rawdata.amountUnit : '';
+  const data = rawdata.amount
+    ? formatWithThousandsSeprators(rawdata.amount)
+    : '';
+  return percent + (percent && data ? '/ ' : '') + data + amountUnit;
 };
 
 const getChartLabels = (indexOfValueToHide: number | null) => {
@@ -222,25 +309,38 @@ const getChartLabels = (indexOfValueToHide: number | null) => {
 
 const options = computed(() => ({
   // eslint-disable-next-line
-  onHover: getOnHoverOptions(),
+  onHover: barDataProps.enableHoverFeature ? getOnHoverOptions() : () => {},
   elements: {
     bar: {
       borderSkipped: false
     }
   },
+  maxBarThickness: 64,
+  categoryPercentage: 0.6,
   plugins: {
     responsive: true,
     maintainAspectRatio: false,
     legend: {
-      display: false,
+      display: false
     },
     title: {
       display: false
     },
+    datalabels: {
+      display: false
+    },
     tooltip: {
       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] === ''
+        ) {
+          return;
+        }
         new GenericTooltipService().createTooltip(
           context,
           getTooltipData,
@@ -258,30 +358,56 @@ const options = computed(() => ({
   },
   scales: {
     x: {
-      stacked: true,
+      stacked: barDataProps.stacked,
+      title: {
+        display: barDataProps.xAxisTitle !== null,
+        text: barDataProps.xAxisTitle
+      }
     },
     y: {
-      stacked: true,
+      stacked: barDataProps.stacked,
+      title: {
+        display: barDataProps.yAxisTitle !== null,
+        text: barDataProps.yAxisTitle
+      },
       ticks: {
         callback: function (val: string | number) {
-          return formatTicks(val as number, barDataProps.unit);
-        },
-        maxTicksLimit: 8,
+          return barDataProps.unit === '%'
+            ? formatTicks(val as number, barDataProps.unit)
+            : formatWithThousandsSeprators(val as number) +
+                ' ' +
+                barDataProps.unit;
+        }
       }
     }
   }
 }));
 
-const htmlLegendPlugin = ref(privateGetHtmlLegendPlugin(legendContainer, selectMode, disablePattern, patternsColors, patternsOrderedList));
-
-watch(onHoverIndex, () => {
-  reloadChart();
-}, { deep: true });
-
-
+const htmlLegendPlugin = computed(() => [
+  privateGetHtmlLegendPlugin(
+    legendContainer,
+    selectMode,
+    disablePattern,
+    patternsColors,
+    patternsOrderedList,
+    enableHover
+  )
+]);
 
+watch(
+  onHoverIndex,
+  () => {
+    reloadChart();
+  },
+  { deep: true }
+);
 </script>
 
+<style lang="scss">
+@import 'settings-tools/all-settings';
+@import 'components/c.checkbox';
+</style>
+
 <style scoped>
 .container {
   -moz-osx-font-smoothing: grayscale;
@@ -296,4 +422,4 @@ watch(onHoverIndex, () => {
   align-items: center;
   margin-bottom: 20px;
 }
-</style>
+</style>

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

@@ -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;