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

package/src/components/doughnut/DoughnutChart.vue

@@ -2,24 +2,24 @@
   <div class="container">
     <div class="main">
       <Doughnut
-            v-if="doughnutChartData"
-            ref='doughnutRef'
-            :data='doughnutChartData as ChartData<"doughnut", number[], unknown>'
-            :options='options'
-            :plugins='htmlLegendPlugin'
-            :cssClasses:="cssClasses"
-            :max-values="maxValues"
-            :style='{width, height, cursor:"pointer"}'
-          />
-        </div>
-        <div ref="legendContainer" />
+        v-if="doughnutChartData"
+        ref="doughnutRef"
+        :id="chartId"
+        :data="doughnutChartData"
+        :options="options"
+        :plugins="htmlLegendPlugin"
+        :max-values="maxValues"
+        :class="cssClasses"
+        :style="[{ width, height, cursor: 'pointer' }, styles]"
+      />
+    </div>
+    <div ref="legendContainer" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, watch } from 'vue';
 import { Doughnut } from 'vue-chartjs';
-import type { ChartData } from 'chart.js';
 import { computed, ref, PropType } from 'vue';
 import type { DoughnutData } from '../../types/DoughnutData';
 import { TooltipChartType } from '../../types/TooltipChartType';
@@ -35,19 +35,11 @@ import {
   Tooltip,
   Legend,
   ArcElement,
-  Plugin
+  Plugin,
 } from 'chart.js';
-ChartJS.register(
-  Title,
-  Tooltip,
-  Legend,
-  ArcElement
-);
+ChartJS.register(Title, Tooltip, Legend, ArcElement);
 
-const {
-  colourSets,
-  patternsStandardList
-} = ChartDesign();
+const { colourSets, patternsStandardList } = ChartDesign();
 
 const {
   onHoverIndex,
@@ -57,117 +49,173 @@ const {
   getOnHoverOptions,
   groupDataAfterNthValue,
   getDoughnutLabels,
-  getBorderColor
+  getBorderColor,
 } = doughnutChartFunction();
 const selectMode = ref(false);
 const legendContainer = ref<HTMLElement | null>(null);
 
 const doughnutDataProps = defineProps({
+  /**
+   * Value of the id attribute present on the <canvas> element containing the chart
+   */
   chartId: {
     type: String,
     default: 'doughnut-chart',
   },
+  /**
+   * Data to be passed to Chart
+   */
   data: {
     type: Array as PropType<DoughnutData[]>,
-    default: () => []
+    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: () => []
+    default: () => [],
   },
+  /**
+   * Add custom CSS classes to the <canvas> element
+   */
   cssClasses: {
-    default: '',
     type: String,
+    default: undefined,
   },
-  // disable accessibility patterns
+  /**
+   * Disable accessibility patterns
+   */
   disableAccessibility: {
     type: Boolean,
-    default: false
+    default: false,
+  },
+  /**
+   * Enable hover feature (may cause strange behavior when used with width and height in %)
+   */
+   enableHoverFeature: {
+    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
+  /**
+   * 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: {
-    default:'0',
-    type: Number
+    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
+  /**
+   * 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]
-    },
+    type: Array as PropType<number[]>,
+    default: () => [0, 1, 2, 3, 4, 5],
+  },
+  /**
+   * Value of the `width` css property used to define the width of the <canvas> element
+   */
   width: {
-      type: String,
-      default: '400px',
+    type: String,
+    default: '400px',
   },
+  /**
+   * Value of the `height` css property used to define the height of the <canvas> element
+   */
   height: {
     type: String,
     default: '400px',
   },
+  /**
+   * Maximum number of data to be displayed in the Chart
+   */
   maxValues: {
     type: Number,
     default: 5,
   },
+  /**
+   * Add custom CSS styles to the <canvas> element
+   */
   styles: {
     type: Object as PropType<Partial<CSSStyleDeclaration>>,
-    default: () => {
-    },
+    default: () => {},
   },
+  /**
+   * Value of the `plugins` key passed to the Chart config
+   */
   plugins: {
     type: Array as PropType<Plugin<'doughnut'>[]>,
     default: () => [],
   },
-})
+  /**
+   * Value of the 'others' label if maxValue is reached
+   */
+  othersLabel: {
+    type: String,
+    default: 'others',
+  },
+});
 
-const patternsColors = computed( () => {
+const patternsColors = computed(() => {
   return doughnutDataProps.newPatternsOrder.length !== 6
-      ? colourSets[doughnutDataProps.colourSet]
-      : doughnutDataProps.newPatternsOrder.map((id) => {
-        return colourSets[doughnutDataProps.colourSet][id]
-      })
+    ? 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]
-          })
-    }
-);
+  return doughnutDataProps.newPatternsOrder.length !== 6
+    ? patternsStandardList
+    : doughnutDataProps.newPatternsOrder.map((id) => {
+        return patternsStandardList[id];
+      });
+});
 
-const doughnutChartData = computed(() => {
+const doughnutChartData = computed<any>(() => {
   return {
-    labels: getDoughnutLabels(doughnutDataProps.labels,
-    doughnutDataProps.data, doughnutDataProps.maxValues),
+    labels: getDoughnutLabels(
+      doughnutDataProps.labels,
+      doughnutDataProps.data,
+      doughnutDataProps.maxValues,
+      doughnutDataProps.othersLabel
+    ),
     datasets: [
       {
-        data: groupDataAfterNthValue(doughnutDataProps.data, doughnutDataProps.maxValues).map((x: GenericData) => x.rate),
-        backgroundColor: getBackgroundColor(patternsColors.value, patternsOrderedList.value, doughnutDataProps.disableAccessibility),
-        borderColor: getBorderColor(patternsColors.value)
-      }
-    ]
-  }
+        data: groupDataAfterNthValue(
+          doughnutDataProps.data,
+          doughnutDataProps.maxValues
+        ).map((x: GenericData) => x.rate),
+        backgroundColor: getBackgroundColor(
+          patternsColors.value,
+          patternsOrderedList.value,
+          doughnutDataProps.disableAccessibility,
+          doughnutDataProps.enableHoverFeature
+        ),
+        borderColor: getBorderColor(patternsColors.value, doughnutDataProps.enableHoverFeature),
+      },
+    ],
+  };
 });
 
 const getTooltipData = (context: Context) => {
-  const dataIndex = context.tooltip.dataPoints[0].dataIndex;
-  if (!dataIndex) {
-    return '';
-  }
-  const tooltipData =
-    groupDataAfterNthValue(doughnutDataProps.data, doughnutDataProps.maxValues)[dataIndex];
+  const dataIndex = context.tooltip.dataPoints[0].dataIndex as number;
+  const tooltipData = groupDataAfterNthValue(
+    doughnutDataProps.data,
+    doughnutDataProps.maxValues
+  )[dataIndex];
   const rate = formatWithThousandsSeprators(tooltipData.rate);
   const value = formatWithThousandsSeprators(tooltipData.value);
   const unit = tooltipData.unit || '';
   return `${value}${unit} (${rate})%`;
 };
 
-function getSpacing () {
+function getSpacing() {
   return doughnutDataProps.labels.length <= 1 ? 0 : 12;
 }
 
@@ -176,7 +224,7 @@ const options = computed(() => {
   const colors = patternsColors.value;
   const patterns = patternsOrderedList.value;
   return {
-    onHover: getOnHoverOptions(),
+    onHover: doughnutDataProps.enableHoverFeature? getOnHoverOptions() : () => {},
     plugins: {
       legend: {
         display: false,
@@ -185,57 +233,90 @@ const options = computed(() => {
         align: 'start' as const,
         labels: {
           pointStyle: 'rectRounded',
-          usePointStyle: true
-        }
+          usePointStyle: true,
+        },
       },
       title: {
+        display: false,
+      },
+      datalabels: {
         display: false
       },
       tooltip: {
         enabled: false,
         external: function (context: Context) {
           new GenericTooltipService().createTooltip(
-              context,
-              getTooltipData,
-              {
-                chartType: TooltipChartType.DOUGHNUT
-              },
-              colors,
-              patterns,
-              disablePattern.value
+            context,
+            getTooltipData,
+            {
+              chartType: TooltipChartType.DOUGHNUT,
+            },
+            colors,
+            patterns,
+            disablePattern.value
           );
-        }
-      }
+        },
+      },
     },
     radius: '90%',
     cutout: '70%',
     borderWidth: 3,
     spacing: getSpacing(),
-    hoverOffset: 4
-  }
+    hoverOffset: 4,
+  };
 });
 
 const doughnutDataAndLabels = {
   data: doughnutDataProps.data,
-  labels: doughnutDataProps.labels
-}
-const disablePattern = computed(() => {return doughnutDataProps.disableAccessibility})
+  labels: doughnutDataProps.labels,
+};
+const disablePattern = computed(() => {
+  return doughnutDataProps.disableAccessibility;
+});
+const enableHover = computed(() => {
+  return doughnutDataProps.enableHoverFeature;
+})
 
-const htmlLegendPlugin = computed(() => privateGetHtmlLegendPlugin(legendContainer, selectMode, disablePattern, patternsColors, patternsOrderedList, doughnutDataProps.maxValues, doughnutDataAndLabels));
+const htmlLegendPlugin = computed(() =>
+  privateGetHtmlLegendPlugin(
+    legendContainer,
+    selectMode,
+    disablePattern,
+    patternsColors,
+    patternsOrderedList,
+    doughnutDataProps.maxValues,
+    doughnutDataAndLabels,
+    enableHover
+  )
+);
 
-onMounted(() =>{
-  getBackgroundColor(patternsColors.value, patternsOrderedList.value, doughnutDataProps.disableAccessibility);
+onMounted(() => {
+  getBackgroundColor(
+    patternsColors.value,
+    patternsOrderedList.value,
+    doughnutDataProps.disableAccessibility,
+    enableHover.value
+  );
 });
 watch(onHoverIndex, (newValue, oldValue) => {
-  if (newValue !== oldValue) {
-    getBackgroundColor(patternsColors.value, patternsOrderedList.value, doughnutDataProps.disableAccessibility);
+  if (newValue !== oldValue && enableHover.value) {
+    getBackgroundColor(
+      patternsColors.value,
+      patternsOrderedList.value,
+      doughnutDataProps.disableAccessibility,
+      enableHover.value
+    );
   }
 });
 
 watch(disablePattern, () => {
-  getBackgroundColor(patternsColors.value, patternsOrderedList.value, doughnutDataProps.disableAccessibility)
+  getBackgroundColor(
+    patternsColors.value,
+    patternsOrderedList.value,
+    doughnutDataProps.disableAccessibility,
+    enableHover.value
+  );
 });
-
 </script>
 
 <style scoped>
@@ -252,4 +333,4 @@ watch(disablePattern, () => {
   justify-content: center;
   align-items: center;
 }
-</style>
+</style>

package/src/components/line/LineChart.stories.ts

@@ -13,7 +13,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
   args: {
-    rawTitle: "Line title",
     width: "600px",
     height: "400px",
     labels: ["Data One", "Data Two", "Data Three"],
@@ -29,6 +28,8 @@ export const Default = {
         unit: "%",
       },
     ],
+    xAxisTitle: 'X Axis Title',
+    yAxisTitle: 'Y Axis Title',
   },
 } satisfies Story;