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

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}
+.mc-checkbox__input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");background-position:center center}.mc-checkbox__input:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.container[data-v-fae6dcc9]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-fae6dcc9]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-9f73f105]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-9f73f105]{display:flex;flex-direction:column;justify-content:center;align-items:center}.container[data-v-9a586c1a]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-9a586c1a]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}.container[data-v-26475601]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-26475601]{height:600px;display:flex;flex-direction:column;justify-content:center;align-items:center}.mc-checkbox{align-items:center;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-checkbox__input{font-family:LeroyMerlin,sans-serif;font-weight:400;box-sizing:border-box;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #666666;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#fff;border:2px solid #666666;border-radius:4px;color:#fff}.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#46a610;border-color:#46a610;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#46a610;border-color:#46a610}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#035010}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#035010}.mc-checkbox__input:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E")}.mc-checkbox__input:disabled+.mc-checkbox__label{color:gray}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}.container[data-v-0dd46b73]{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;font-family:Roboto,sans-serif}.main[data-v-0dd46b73]{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-bottom:20px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/chart",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.10",
   "type": "module",
   "scripts": {
     "build": "vue-tsc && vite build",
@@ -14,10 +14,11 @@
     "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",
+    "vitest": "vitest ChartsCommonLegend.test.ts"
   },
   "bugs": {
     "url": "https://github.com/adeo/mozaic-chart/issues"
@@ -25,7 +26,9 @@
   "homepage": "https://github.com/adeo/mozaic-chart#readme",
   "files": [
     "dist/*",
-    "src/*"
+    "src/*",
+    "types/*",
+    "*.d.ts"
   ],
   "main": "./dist/mozaic-chart.umd.cjs",
   "module": "./dist/mozaic-chart.js",
@@ -33,40 +36,51 @@
     ".": {
       "import": "./dist/mozaic-chart.js",
       "require": "./dist/mozaic-chart.umd.cjs"
+    },
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     }
   },
   "dependencies": {
-    "@mozaic-ds/vue-3": "0.49.3",
-    "vue": "^3.2.41"
+    "@mozaic-ds/vue-3": "0.50.0",
+    "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",
+    "@code-hike/mdx": "^0.9.0",
+    "@geometricpanda/storybook-addon-badges": "^2.0.0",
     "@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-docs": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/design-system": "^7.15.15",
     "@storybook/testing-library": "^0.2.0",
-    "@storybook/vue3": "^7.0.25",
-    "@storybook/vue3-vite": "^7.0.25",
+    "@storybook/vue3": "^7.3.2",
+    "@storybook/vue3-vite": "^7.3.2",
     "@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",
+    "mdx-mermaid": "^2.0.0",
+    "mermaid": "^10.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "release-it": "^16.1.3",
-    "storybook": "^7.0.25",
+    "remark-gfm": "^3.0.1",
+    "storybook": "^7.3.2",
     "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

@@ -15,10 +15,12 @@ export const Default = {
   args: {
     width: "500px",
     height: "400px",
-    rawTitle: "Bar title",
-    firstTooltip: "content",
-    secondTooltip: "content2",
+    tooltipFirstLineLabel: "content",
+    tooltipSecondLineLabel: "content2",
+    disableAccessibility: false,
+    newPatternsOrder: [0, 4, 1, 2, 3, 5],
     labels: ["Data One", "Data Two", "Data Three"],
+    colourSet: 0,
     datasets: [
       {
         label: "Data One",
@@ -69,9 +71,9 @@ export const MultipleData = {
   args: {
     width: "700px",
     height: "400px",
-    rawTitle: "Test title",
-    firstTooltip: "content",
-    secondTooltip: "content2",
+    tooltipFirstLineLabel: "content",
+    tooltipSecondLineLabel: "content2",
+    disableAccessibility: false,
     labels: [
       "Data One",
       "Data Two",
@@ -86,6 +88,7 @@ export const MultipleData = {
       "Data Eleven",
       "Data Twelve",
     ],
+    colourSet: 1,
     datasets: [
       {
         label: "Data One",
@@ -226,11 +229,12 @@ export const StackedBarChart = {
   args: {
     width: "700px",
     height: "400px",
-    firstTooltip: "content",
-    secondTooltip: "content2",
-    rawTitle: "Stacked Bar Chart Title",
+    tooltipFirstLineLabel: "content",
+    tooltipSecondLineLabel: "content2",
+    disableAccessibility: false,
     stacked: true,
     labels: ["Category One", "Category Two", "Category Three"],
+    colourSet: 3,
     datasets: [
       {
         label: "Dataset One",

package/src/components/bar/BarChart.vue

@@ -1,16 +1,15 @@
 <template>
   <div class="container">
     <div class="main">
-      <Bar 
+      <Bar
         v-if="chartData"
-        ref="barChartRef" 
-        :data="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" />
@@ -19,16 +18,28 @@
 
 <script setup lang="ts">
 import { computed, ref, watch, PropType } from 'vue';
+import { Bar, Chart } from 'vue-chartjs';
 import type { Ref } 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,
+  Title,
+  Tooltip,
+  Plugin,
+} from 'chart.js';
+import { BarData } from '../../types/BarData';
+import ChartDesign from '../../services/patterns/ChartDesign';
 
 ChartJS.register(
   Title,
@@ -39,62 +50,145 @@ ChartJS.register(
   LinearScale
 );
 
+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: () => []
-    },
-    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,
-    },
-    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
+   */
+  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,
+  },
+  /**
+   * 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];
+      });
+});
+
+// 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,
@@ -113,12 +207,14 @@ 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,
+      })),
       barDataProps.stacked,
+      barDataProps.disableAccessibility,
+      patternsColors.value,
+      patternsOrderedList.value,
       0
-    )
+    ),
   };
 });
 
@@ -126,43 +222,52 @@ 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
+) => {
   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
+  );
 };
 
 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) => {
@@ -179,8 +284,8 @@ const options = computed(() => ({
   onHover: getOnHoverOptions(),
   elements: {
     bar: {
-      borderSkipped: false
-    }
+      borderSkipped: false,
+    },
   },
   plugins: {
     responsive: true,
@@ -189,7 +294,7 @@ const options = computed(() => ({
       display: false,
     },
     title: {
-      display: false
+      display: false,
     },
     tooltip: {
       enabled: false,
@@ -201,35 +306,58 @@ const options = computed(() => ({
           {
             chartType: TooltipChartType.BAR_CHART,
             firstLineLabel: xValue,
-            secondLineLabel: yValue
-          }
+            secondLineLabel: yValue,
+          },
+          patternsColors.value,
+          patternsOrderedList.value,
+          barDataProps.disableAccessibility
         );
-      }
-    }
+      },
+    },
   },
   scales: {
     x: {
-      stacked: true, 
+      stacked: barDataProps.stacked,
     },
     y: {
-      stacked: true,
+      stacked: barDataProps.stacked,
       ticks: {
         callback: function (val: string | number) {
-          return formatTicks(val as number, barDataProps.unit);
+          return barDataProps.unit === '%'
+            ? formatTicks(val as number, barDataProps.unit)
+            : formatWithThousandsSeprators(val as number) +
+                ' ' +
+                barDataProps.unit;
         },
-        maxTicksLimit: 8,
-      }
-    }
-  }
+      },
+    },
+  },
 }));
 
-const htmlLegendPlugin = privateGetHtmlLegendPlugin(legendContainer, selectMode);
+const htmlLegendPlugin = ref(
+  privateGetHtmlLegendPlugin(
+    legendContainer,
+    selectMode,
+    disablePattern,
+    patternsColors,
+    patternsOrderedList
+  )
+);
 
-watch(onHoverIndex, () => {
-  reloadChart();
-}, { deep: true });
+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;
@@ -244,4 +372,4 @@ watch(onHoverIndex, () => {
   align-items: center;
   margin-bottom: 20px;
 }
-</style>
+</style>

package/src/components/bar/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import BarChart from "./BarChart.vue";
+
+BarChart.install = (app: App) => {
+  app.component("BarChart", BarChart);
+};
+
+export { BarChart };

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,
@@ -28,6 +29,7 @@ export const Default = {
         rate: 18.68195550931139,
       },
     ],
+    maxValues: 2,
   },
 } satisfies Story;
 
@@ -44,6 +46,7 @@ export const MultipleData = {
       "Data Six",
     ],
     maxValues: 3,
+    disableAccessibility: false,
     data: [
       {
         value: 2771824.19,