@mozaic-ds/chart 0.1.0-beta.0 → 0.1.0-beta.1

package/dist/style.css

@@ -1 +1 @@
-.container[data-v-3e53e20e]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-3e53e20e]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-6b16e20b]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-6b16e20b]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-2b308814]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-2b308814]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-9f1e4973]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-9f1e4973]{height:600px;display:flex;flex-direction:column;justify-content:center;align-items:center}
+.container[data-v-d13d8a6b]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-d13d8a6b]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-d03b50b1]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-d03b50b1]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-ecb2ed0e]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-ecb2ed0e]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-9ec69ee9]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-9ec69ee9]{height:600px;display:flex;flex-direction:column;justify-content:center;align-items:center}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/chart",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.1",
   "type": "module",
   "scripts": {
     "build": "vue-tsc && vite build",
@@ -14,10 +14,10 @@
     "npm:publishBeta": "npm publish --tag beta --access public",
     "prepublishOnly": "npm run build",
     "preview": "vite preview",
-    "release": "dotenv release-it",
-    "release:beta": "dotenv release-it --preRelease=beta",
+    "release": "release-it",
+    "release:beta": "release-it --preRelease=beta",
     "storybook": "storybook dev -p 6006",
-    "test": "vitest"
+    "test": "vitest --run"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-chart/issues"
@@ -37,36 +37,36 @@
   },
   "dependencies": {
     "@mozaic-ds/vue-3": "0.49.3",
-    "vue": "^3.2.41"
+    "chart.js": "^4.3.3",
+    "vue": "^3.2.41",
+    "vue-chartjs": "5.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.6",
+    "@babel/core": "^7.22.10",
     "@release-it/conventional-changelog": "^7.0.0",
-    "@storybook/addon-essentials": "^7.0.25",
-    "@storybook/addon-interactions": "^7.0.25",
-    "@storybook/addon-links": "^7.0.25",
-    "@storybook/blocks": "^7.0.25",
+    "@storybook/addon-essentials": "^7.3.0",
+    "@storybook/addon-interactions": "^7.3.0",
+    "@storybook/addon-links": "^7.3.0",
+    "@storybook/blocks": "^7.3.0",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/vue3": "^7.0.25",
-    "@storybook/vue3-vite": "^7.0.25",
+    "@storybook/vue3": "^7.3.0",
+    "@storybook/vue3-vite": "^7.3.0",
     "@vitejs/plugin-vue": "^4.2.3",
-    "@vitest/coverage-c8": "^0.32.4",
-    "@vue/test-utils": "^2.4.0",
-    "babel-loader": "^9.1.2",
-    "chart.js": "^4.3.0",
-    "chromatic": "^6.19.9",
+    "@vitest/coverage-v8": "^0.34.1",
+    "@vue/test-utils": "^2.4.1",
+    "babel-loader": "^9.1.3",
+    "chromatic": "^6.22.0",
     "dotenv-cli": "^7.2.1",
     "jsdom": "^22.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "release-it": "^16.1.3",
-    "storybook": "^7.0.25",
+    "storybook": "^7.3.0",
     "typescript": "^5.1.6",
-    "vite": "^4.3.9",
-    "vitest": "^0.32.4",
-    "vue-chartjs": "5.2.0",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.1",
     "vue-loader": "^17.2.2",
-    "vue-tsc": "^1.8.3"
+    "vue-tsc": "^1.8.8"
   },
   "keywords": [
     "Adeo",

package/src/components/bar/BarChart.stories.ts

@@ -18,7 +18,10 @@ export const Default = {
     rawTitle: "Bar title",
     firstTooltip: "content",
     secondTooltip: "content2",
+    disableAccessibility: false,
+    newPatternsOrder: [0,4,1,2,3,5],
     labels: ["Data One", "Data Two", "Data Three"],
+    colourSet: 0,
     datasets: [
       {
         label: "Data One",
@@ -72,6 +75,7 @@ export const MultipleData = {
     rawTitle: "Test title",
     firstTooltip: "content",
     secondTooltip: "content2",
+    disableAccessibility: false,
     labels: [
       "Data One",
       "Data Two",
@@ -86,6 +90,7 @@ export const MultipleData = {
       "Data Eleven",
       "Data Twelve",
     ],
+    colourSet: 1,
     datasets: [
       {
         label: "Data One",
@@ -228,9 +233,11 @@ export const StackedBarChart = {
     height: "400px",
     firstTooltip: "content",
     secondTooltip: "content2",
+    disableAccessibility: false,
     rawTitle: "Stacked Bar Chart Title",
     stacked: true,
     labels: ["Category One", "Category Two", "Category Three"],
+    colourSet: 3,
     datasets: [
       {
         label: "Dataset One",

package/src/components/bar/BarChart.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="container">
     <div class="main">
-      <Bar 
+      <Bar
         v-if="chartData"
-        ref="barChartRef" 
-        :data="chartData" 
+        ref="barChartRef"
+        :data="chartData"
         :options="options"
         :plugins="htmlLegendPlugin"
         :style="{ width, height }"
@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import { computed, ref, watch, PropType } from 'vue';
 import type { Ref } from 'vue';
-import { Bar } from 'vue-chartjs';
+import { Bar, Chart } from 'vue-chartjs';
 import barChartFunctions from '../../services/BarChartFunctions';
 import type { Context } from '../../services/GenericTooltipService';
 import { GenericTooltipService } from '../../services/GenericTooltipService';
@@ -29,6 +29,7 @@ import { formatTicks, formatWithThousandsSeprators } from '../../services/Format
 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 ChartDesign from '../../services/patterns/ChartDesign';
 
 ChartJS.register(
   Title,
@@ -39,6 +40,11 @@ ChartJS.register(
   LinearScale
 );
 
+const {
+  colourSets,
+  patternsStandardList
+  } = ChartDesign();
+
 const legendContainer = ref(null);
 const selectMode = ref(false);
 const barDataProps = defineProps({
@@ -58,6 +64,22 @@ const barDataProps = defineProps({
       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: () => []
@@ -86,6 +108,11 @@ const barDataProps = defineProps({
       type: Boolean,
       default: false,
     },
+    // disable accessibility patterns
+    disableAccessibility: {
+      type: Boolean,
+      default: false,
+    },
     firstTooltip: {
       type: String,
       default: 'content'
@@ -96,6 +123,22 @@ const barDataProps = defineProps({
     }
 })
 
+// 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]
+      });
+});
+
+// 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 disablePattern = computed(() => {return barDataProps.disableAccessibility})
+
 const {
   onHoverIndex,
   barChartRef,
@@ -117,6 +160,9 @@ const chartData = computed(() => {
         })
       ),
       barDataProps.stacked,
+      barDataProps.disableAccessibility,
+      patternsColors.value,
+      patternsOrderedList.value,
       0
     )
   };
@@ -147,7 +193,7 @@ const getChartData = (index: number, indexOfValueToHide: number | null, isStacke
   if (indexOfValueToHide && indexOfOthersLabelIfNull.value) {
     data.splice(indexOfOthersLabelIfNull.value, 1);
   }
-  
+
   return data.map((data: { rate: number }) => data.rate);
 };
 
@@ -202,14 +248,17 @@ const options = computed(() => ({
             chartType: TooltipChartType.BAR_CHART,
             firstLineLabel: xValue,
             secondLineLabel: yValue
-          }
+          },
+          patternsColors.value,
+          patternsOrderedList.value,
+          barDataProps.disableAccessibility
         );
       }
     }
   },
   scales: {
     x: {
-      stacked: true, 
+      stacked: true,
     },
     y: {
       stacked: true,
@@ -223,11 +272,14 @@ const options = computed(() => ({
   }
 }));
 
-const htmlLegendPlugin = privateGetHtmlLegendPlugin(legendContainer, selectMode);
+const htmlLegendPlugin = ref(privateGetHtmlLegendPlugin(legendContainer, selectMode, disablePattern, patternsColors, patternsOrderedList));
 
 watch(onHoverIndex, () => {
   reloadChart();
 }, { deep: true });
+
+
+
 </script>
 
 <style scoped>

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

@@ -16,6 +16,7 @@ export const Default = {
     height: "400px",
     width: "400px",
     labels: ["Data One", "Data Two"],
+    disableAccessibility: false,
     data: [
       {
         value: 2771824.19,
@@ -44,6 +45,7 @@ export const MultipleData = {
       "Data Six",
     ],
     maxValues: 3,
+    disableAccessibility: false,
     data: [
       {
         value: 2771824.19,

package/src/components/doughnut/DoughnutChart.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="container">
     <div class="main">
-      <Doughnut 
-            v-if="doughnutChartData" 
-            ref='doughnutRef' 
+      <Doughnut
+            v-if="doughnutChartData"
+            ref='doughnutRef'
             :data='doughnutChartData as ChartData<"doughnut", number[], unknown>'
-            :options='options' 
+            :options='options'
             :plugins='htmlLegendPlugin'
             :cssClasses:="cssClasses"
             :max-values="maxValues"
@@ -45,19 +45,19 @@ ChartJS.register(
 );
 
 const {
-  patternsColors,
-  patternsColorsLowerOpacity
+  colourSets,
+  patternsStandardList
 } = ChartDesign();
 
 const {
   onHoverIndex,
   doughnutRef,
-  backgroundColor,
+  getBackgroundColor,
   privateGetHtmlLegendPlugin,
   getOnHoverOptions,
   groupDataAfterNthValue,
   getDoughnutLabels,
-  getBackgroundColor,
+  getBorderColor
 } = doughnutChartFunction();
 const selectMode = ref(false);
 const legendContainer = ref<HTMLElement | null>(null);
@@ -79,6 +79,27 @@ const doughnutDataProps = defineProps({
     default: '',
     type: String,
   },
+  // disable accessibility patterns
+  disableAccessibility: {
+    type: Boolean,
+    default: false
+  },
+  // 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: {
+    default:'0',
+    type: Number
+  },
+  // 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]
+    },
   width: {
       type: String,
       default: '400px',
@@ -102,6 +123,23 @@ const doughnutDataProps = defineProps({
   },
 })
 
+const patternsColors = computed( () => {
+  return doughnutDataProps.newPatternsOrder.length !== 6
+      ? colourSets[doughnutDataProps.colourSet]
+      : doughnutDataProps.newPatternsOrder.map((id) => {
+        return colourSets[doughnutDataProps.colourSet][id]
+      })
+});
+
+const patternsOrderedList = computed(() => {
+      return doughnutDataProps.newPatternsOrder.length !== 6
+          ? patternsStandardList
+          : doughnutDataProps.newPatternsOrder.map((id) => {
+            return patternsStandardList[id]
+          })
+    }
+);
+
 const doughnutChartData = computed(() => {
   return {
     labels: getDoughnutLabels(doughnutDataProps.labels,
@@ -109,7 +147,8 @@ const doughnutChartData = computed(() => {
     datasets: [
       {
         data: groupDataAfterNthValue(doughnutDataProps.data, doughnutDataProps.maxValues).map((x: GenericData) => x.rate),
-        backgroundColor: backgroundColor.value,
+        backgroundColor: getBackgroundColor(patternsColors.value, patternsOrderedList.value, doughnutDataProps.disableAccessibility),
+        borderColor: getBorderColor(patternsColors.value)
       }
     ]
   }
@@ -120,7 +159,7 @@ const getTooltipData = (context: Context) => {
   if (!dataIndex) {
     return '';
   }
-  const tooltipData = 
+  const tooltipData =
     groupDataAfterNthValue(doughnutDataProps.data, doughnutDataProps.maxValues)[dataIndex];
   const rate = formatWithThousandsSeprators(tooltipData.rate);
   const value = formatWithThousandsSeprators(tooltipData.value);
@@ -133,62 +172,70 @@ function getSpacing () {
 }
 
 // @ts-ignore
-const options = computed(() => ({
-  onHover: getOnHoverOptions(),
-  plugins: {
-    legend: {
-      display: false,
-      // @ts-ignore
-      position: 'bottom' as const,
-      align: 'start' as const,
-      labels: {
-        pointStyle: 'rectRounded',
-        usePointStyle: true
+const options = computed(() => {
+  const colors = patternsColors.value;
+  const patterns = patternsOrderedList.value;
+  return {
+    onHover: getOnHoverOptions(),
+    plugins: {
+      legend: {
+        display: false,
+        // @ts-ignore
+        position: 'bottom' as const,
+        align: 'start' as const,
+        labels: {
+          pointStyle: 'rectRounded',
+          usePointStyle: true
+        }
+      },
+      title: {
+        display: false
+      },
+      tooltip: {
+        enabled: false,
+        external: function (context: Context) {
+          new GenericTooltipService().createTooltip(
+              context,
+              getTooltipData,
+              {
+                chartType: TooltipChartType.DOUGHNUT
+              },
+              colors,
+              patterns,
+              disablePattern.value
+          );
+        }
       }
     },
-    title: {
-      display: false
-    },
-    tooltip: {
-      enabled: false,
-      external: function (context: Context) {
-        new GenericTooltipService().createTooltip(
-          context,
-          getTooltipData,
-          {
-            chartType: TooltipChartType.DOUGHNUT
-          }
-        );
-      }
-    }
-  },
-  radius: '90%',
-  cutout: '70%',
-  borderWidth: 3,
-  borderColor: function (context: any) {
-    return (onHoverIndex.value !== null && context.dataIndex !== (onHoverIndex.value))
-      ? patternsColorsLowerOpacity[context.dataIndex]
-      : patternsColors[context.dataIndex];
-  },
-  spacing: getSpacing(),
-  hoverOffset: 4
-}));
+    radius: '90%',
+    cutout: '70%',
+    borderWidth: 3,
+    spacing: getSpacing(),
+    hoverOffset: 4
+  }
+});
 
 const doughnutDataAndLabels = {
   data: doughnutDataProps.data,
   labels: doughnutDataProps.labels
 }
+const disablePattern = computed(() => {return doughnutDataProps.disableAccessibility})
 
-const htmlLegendPlugin = computed(() => privateGetHtmlLegendPlugin(legendContainer, selectMode, doughnutDataProps.maxValues, doughnutDataAndLabels));
+const htmlLegendPlugin = computed(() => privateGetHtmlLegendPlugin(legendContainer, selectMode, disablePattern, patternsColors, patternsOrderedList, doughnutDataProps.maxValues, doughnutDataAndLabels));
 
 onMounted(() =>{
-  getBackgroundColor();
+  getBackgroundColor(patternsColors.value, patternsOrderedList.value, doughnutDataProps.disableAccessibility);
 });
 watch(onHoverIndex, (newValue, oldValue) => {
   if (newValue !== oldValue) {
-    getBackgroundColor();
+    getBackgroundColor(patternsColors.value, patternsOrderedList.value, doughnutDataProps.disableAccessibility);
   }
 });
+
+watch(disablePattern, () => {
+  getBackgroundColor(patternsColors.value, patternsOrderedList.value, doughnutDataProps.disableAccessibility)
+});
+
 </script>
 
 <style scoped>

package/src/components/line/LineChart.vue

@@ -28,6 +28,7 @@
   import { TooltipChartType } from '../../types/TooltipChartType';
   import { formatTicks } from '../../services/FormatUtilities';
   import type { ChartItem } from '../../services/ChartsCommonLegend';
+  import ChartDesign from '../../services/patterns/ChartDesign';
   
   import {
     createHtmlLegendItemText,
@@ -60,6 +61,12 @@
     LinearScale
   );
   
+  const {
+  colourSets,
+  patternsStandardList
+  } = ChartDesign();
+
+
   const legendContainer = ref(null);
   const selectMode = ref(false);
   const lineDataProps = defineProps({
@@ -79,6 +86,27 @@
       type: String,
       default: '400px',
     },
+    // disable accessibility patterns
+    disableAccessibility: {
+      type: Boolean,
+      default: false
+    },
+    // 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]
+    },
     lines: {
         type: Array as PropType<LineData[]>,
         default: () => {},
@@ -101,6 +129,15 @@
     },
 })
   
+const patternsColors = computed(() => lineDataProps.newPatternsOrder.length !== 6
+  ? colourSets[lineDataProps.colourSet]
+  : lineDataProps.newPatternsOrder.map((id)=> {return colourSets[lineDataProps.colourSet][id]})
+)
+
+const patternsOrderedList = lineDataProps.newPatternsOrder.length !== 6
+  ? patternsStandardList
+  : lineDataProps.newPatternsOrder.map((id)=> {return patternsStandardList[id]})
+
   const getTooltipData = (context: Context) => {
     const datasetIndex = context.tooltip.dataPoints[0].datasetIndex;
     const dataIndex = context.tooltip.dataPoints[0].dataIndex;
@@ -124,7 +161,7 @@
       datasets: [
         {
           type: 'line' as const,
-          borderColor: '#605F9D',
+          borderColor: patternsColors.value[0],
           pointStyle: 'rectRot',
           pointBackgroundColor: '#FFFFFF',
           pointRadius: 5,
@@ -134,7 +171,7 @@
         },
         {
           type: 'line' as const,
-          borderColor: '#00919F',
+          borderColor: patternsColors.value[1],
           pointStyle: 'circle',
           pointBackgroundColor: '#FFFFFF',
           pointRadius: 5,
@@ -202,12 +239,18 @@
               chartType: TooltipChartType.LINE_CHART,
               firstLineLabel: tooltipFirstLine,
               secondLineLabel: tooltipValueAttribute.value
-            }
+            },
+            patternsColors.value,
+            patternsOrderedList,
+            lineDataProps.disableAccessibility
           );
         }
       }
     },
     scales: {
+      x: {
+        offset: true,
+      },
       y: {
         type: 'linear' as const,
         display: true,