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

package/src/components/doughnut/DoughnutChart.vue

@@ -7,35 +7,41 @@
         :id="chartId"
         :data="doughnutChartData"
         :options="options"
-        :plugins="htmlLegendPlugin"
+        :plugins="doughnutPlugins"
         :max-values="maxValues"
         :class="cssClasses"
         :style="[{ width, height, cursor: 'pointer' }, styles]"
       />
+      <span v-if="enableCenteredLabel" class="centered-label">
+        {{ centeredLabel }}
+      </span>
     </div>
     <div ref="legendContainer" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, watch } from 'vue';
+import { watch } from 'vue';
 import { Doughnut } from 'vue-chartjs';
 import { computed, ref, PropType } from 'vue';
-import type { DoughnutData } from '../../types/DoughnutData';
-import { TooltipChartType } from '../../types/TooltipChartType';
-import type { Context } from '../../services/GenericTooltipService';
-import doughnutChartFunction from '../../services/DoughnutChartFunctions';
-import { GenericTooltipService } from '../../services/GenericTooltipService';
-import { formatWithThousandsSeprators } from '../../services/FormatUtilities';
-import type { GenericData } from '../../types/GenericData';
-import ChartDesign from '../../services/patterns/ChartDesign';
+import type {
+  DoughnutChartData,
+  DoughnutData,
+  DoughnutPlugin
+} from '@/types/DoughnutData';
+import { TooltipChartType } from '@/types/TooltipChartType';
+import type { Context } from '@/services/GenericTooltipService';
+import doughnutChartFunction from '@/services/DoughnutChartFunctions';
+import { GenericTooltipService } from '@/services/GenericTooltipService';
+import { formatWithThousandsSeprators } from '@/services/FormatUtilities';
+import ChartDesign from '@/services/patterns/ChartDesign';
 import {
   Chart as ChartJS,
   Title,
   Tooltip,
   Legend,
   ArcElement,
-  Plugin,
+  Plugin
 } from 'chart.js';
 ChartJS.register(Title, Tooltip, Legend, ArcElement);
 
@@ -44,12 +50,14 @@ const { colourSets, patternsStandardList } = ChartDesign();
 const {
   onHoverIndex,
   doughnutRef,
+  centeredLabel,
   getBackgroundColor,
   privateGetHtmlLegendPlugin,
+  getCenteredLabelPlugin,
   getOnHoverOptions,
   groupDataAfterNthValue,
   getDoughnutLabels,
-  getBorderColor,
+  getBorderColor
 } = doughnutChartFunction();
 const selectMode = ref(false);
 const legendContainer = ref<HTMLElement | null>(null);
@@ -60,42 +68,49 @@ const doughnutDataProps = defineProps({
    */
   chartId: {
     type: String,
-    default: 'doughnut-chart',
+    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: {
     type: String,
-    default: undefined,
+    default: undefined
+  },
+  /**
+   * Add centered label in the middle of the <canvas> element
+   */
+  enableCenteredLabel: {
+    type: Boolean,
+    default: false
   },
   /**
    * 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: {
+  enableHoverFeature: {
     type: Boolean,
-    default: false,
+    default: false
   },
   /**
    * Used to choose the colour set of the charts as defined in the Figma prototypes.
@@ -106,7 +121,7 @@ const doughnutDataProps = defineProps({
    */
   colourSet: {
     type: Number,
-    default: 0,
+    default: 0
   },
   /**
    * 6 patterns exist and are not randomly given but follow the order defined in [patternsStandardList](/src/services/patterns/ChartDesign.ts)
@@ -115,52 +130,56 @@ const doughnutDataProps = defineProps({
    */
   newPatternsOrder: {
     type: Array as PropType<number[]>,
-    default: () => [0, 1, 2, 3, 4, 5],
+    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',
+    default: '400px'
   },
   /**
    * Value of the `height` css property used to define the height of the <canvas> element
    */
   height: {
     type: String,
-    default: '400px',
+    default: '400px'
   },
   /**
    * Maximum number of data to be displayed in the Chart
    */
   maxValues: {
     type: Number,
-    default: 5,
+    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: () => [],
+    default: () => []
   },
   /**
    * Value of the 'others' label if maxValue is reached
    */
   othersLabel: {
     type: String,
-    default: 'others',
-  },
+    default: 'others'
+  }
 });
 
+const groupedData = computed(() =>
+  groupDataAfterNthValue(doughnutDataProps.data, doughnutDataProps.maxValues)
+);
+
 const patternsColors = computed(() => {
   return doughnutDataProps.newPatternsOrder.length !== 6
     ? colourSets[doughnutDataProps.colourSet]
@@ -177,7 +196,7 @@ const patternsOrderedList = computed(() => {
       });
 });
 
-const doughnutChartData = computed<any>(() => {
+const doughnutChartData = computed<DoughnutChartData>(() => {
   return {
     labels: getDoughnutLabels(
       doughnutDataProps.labels,
@@ -187,28 +206,26 @@ const doughnutChartData = computed<any>(() => {
     ),
     datasets: [
       {
-        data: groupDataAfterNthValue(
-          doughnutDataProps.data,
-          doughnutDataProps.maxValues
-        ).map((x: GenericData) => x.rate),
+        data: groupedData.value.map((x) => x.rate),
+        raw_value: groupedData.value.map((x) => x.value),
         backgroundColor: getBackgroundColor(
           patternsColors.value,
           patternsOrderedList.value,
           doughnutDataProps.disableAccessibility,
           doughnutDataProps.enableHoverFeature
         ),
-        borderColor: getBorderColor(patternsColors.value, doughnutDataProps.enableHoverFeature),
-      },
-    ],
+        borderColor: getBorderColor(
+          patternsColors.value,
+          doughnutDataProps.enableHoverFeature
+        )
+      }
+    ]
   };
 });
 
 const getTooltipData = (context: Context) => {
   const dataIndex = context.tooltip.dataPoints[0].dataIndex as number;
-  const tooltipData = groupDataAfterNthValue(
-    doughnutDataProps.data,
-    doughnutDataProps.maxValues
-  )[dataIndex];
+  const tooltipData = groupedData.value[dataIndex];
   const rate = formatWithThousandsSeprators(tooltipData.rate);
   const value = formatWithThousandsSeprators(tooltipData.value);
   const unit = tooltipData.unit || '';
@@ -219,25 +236,25 @@ function getSpacing() {
   return doughnutDataProps.labels.length <= 1 ? 0 : 12;
 }
 
-// @ts-ignore
 const options = computed(() => {
   const colors = patternsColors.value;
   const patterns = patternsOrderedList.value;
   return {
-    onHover: doughnutDataProps.enableHoverFeature? getOnHoverOptions() : () => {},
+    onHover: doughnutDataProps.enableHoverFeature
+      ? getOnHoverOptions()
+      : () => {},
     plugins: {
       legend: {
         display: false,
-        // @ts-ignore
-        position: 'bottom' as const,
-        align: 'start' as const,
+        position: 'bottom',
+        align: 'start',
         labels: {
           pointStyle: 'rectRounded',
-          usePointStyle: true,
-        },
+          usePointStyle: true
+        }
       },
       title: {
-        display: false,
+        display: false
       },
       datalabels: {
         display: false
@@ -249,35 +266,35 @@ const options = computed(() => {
             context,
             getTooltipData,
             {
-              chartType: TooltipChartType.DOUGHNUT,
+              chartType: TooltipChartType.DOUGHNUT
             },
             colors,
             patterns,
             disablePattern.value
           );
-        },
-      },
+        }
+      }
     },
     radius: '90%',
     cutout: '70%',
     borderWidth: 3,
     spacing: getSpacing(),
-    hoverOffset: 4,
-  };
+    hoverOffset: 4
+  } as const;
 });
 
 const doughnutDataAndLabels = {
   data: doughnutDataProps.data,
-  labels: doughnutDataProps.labels,
+  labels: doughnutDataProps.labels
 };
 const disablePattern = computed(() => {
   return doughnutDataProps.disableAccessibility;
 });
 const enableHover = computed(() => {
   return doughnutDataProps.enableHoverFeature;
-})
+});
 
-const htmlLegendPlugin = computed(() =>
+const doughnutPlugins = computed<DoughnutPlugin[]>(() => [
   privateGetHtmlLegendPlugin(
     legendContainer,
     selectMode,
@@ -287,17 +304,10 @@ const htmlLegendPlugin = computed(() =>
     doughnutDataProps.maxValues,
     doughnutDataAndLabels,
     enableHover
-  )
-);
+  ) as unknown as DoughnutPlugin,
+  getCenteredLabelPlugin(doughnutDataProps.data)
+]);
 
-onMounted(() => {
-  getBackgroundColor(
-    patternsColors.value,
-    patternsOrderedList.value,
-    doughnutDataProps.disableAccessibility,
-    enableHover.value
-  );
-});
 watch(onHoverIndex, (newValue, oldValue) => {
   if (newValue !== oldValue && enableHover.value) {
     getBackgroundColor(
@@ -319,7 +329,7 @@ watch(disablePattern, () => {
 });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .container {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -328,9 +338,17 @@ watch(disablePattern, () => {
 }
 
 .main {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  display: grid;
+  place-items: center;
+
+  canvas {
+    grid-area: 1 / 1;
+  }
+
+  .centered-label {
+    grid-area: 1 / 1;
+    place-self: center;
+    text-align: center;
+  }
 }
 </style>

package/src/components/doughnut/index.ts

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

package/src/components/index.ts

@@ -1,4 +1,4 @@
-export { BarChart } from "./bar";
-export { DoughnutChart } from "./doughnut";
-export { LineChart } from "./line";
-export { RadarChart } from "./radar";
+export { BarChart } from './bar';
+export { DoughnutChart } from './doughnut';
+export { LineChart } from './line';
+export { RadarChart } from './radar';

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

@@ -1,11 +1,11 @@
 // LineChart.stories.ts;
 
-import type { Meta, StoryObj } from "@storybook/vue3";
-import LineChart from "./LineChart.vue";
+import type { Meta, StoryObj } from '@storybook/vue3';
+import LineChart from './LineChart.vue';
 
 const meta = {
-  title: "Charts/Line",
-  component: LineChart,
+  title: 'Charts/Line',
+  component: LineChart
 } satisfies Meta<typeof LineChart>;
 
 export default meta;
@@ -13,73 +13,73 @@ type Story = StoryObj<typeof meta>;
 
 export const Default = {
   args: {
-    width: "600px",
-    height: "400px",
-    labels: ["Data One", "Data Two", "Data Three"],
+    width: '600px',
+    height: '400px',
+    labels: ['Data One', 'Data Two', 'Data Three'],
     lines: [
       {
-        label: "Data One",
+        label: 'Data One',
         data: [-22, 34, 11],
-        unit: "%",
+        unit: '%'
       },
       {
-        label: "Data Two",
+        label: 'Data Two',
         data: [-3, 28, 35],
-        unit: "%",
-      },
+        unit: '%'
+      }
     ],
     xAxisTitle: 'X Axis Title',
-    yAxisTitle: 'Y Axis Title',
-  },
+    yAxisTitle: 'Y Axis Title'
+  }
 } satisfies Story;
 
 export const MultipleData = {
   args: {
-    width: "600px",
-    height: "400px",
+    width: '600px',
+    height: '400px',
     labels: [
-      "Data One",
-      "Data Two",
-      "Data Three",
-      "Data Four",
-      "Data Five",
-      "Data Six",
+      'Data One',
+      'Data Two',
+      'Data Three',
+      'Data Four',
+      'Data Five',
+      'Data Six'
     ],
     lines: [
       {
-        label: "Data One",
+        label: 'Data One',
         data: [-22, 34, 11, 1, 22, 21],
-        unit: "%",
+        unit: '%'
       },
       {
-        label: "Data Two",
+        label: 'Data Two',
         data: [-3, 28, 35, 10, 3, 18],
-        unit: "%",
-      },
-    ],
-  },
+        unit: '%'
+      }
+    ]
+  }
 } satisfies Story;
 
 export const LineChartWithSuggestedMinAndSuggestedMax = {
   args: {
-    width: "600px",
-    height: "400px",
-    labels: ["Data One", "Data Two", "Data Three"],
+    width: '600px',
+    height: '400px',
+    labels: ['Data One', 'Data Two', 'Data Three'],
     lines: [
       {
-        label: "Data One",
+        label: 'Data One',
         data: [20, 34, 11],
-        unit: "€",
+        unit: '€'
       },
       {
-        label: "Data Two",
+        label: 'Data Two',
         data: [45, 28, 35],
-        unit: "€",
-      },
+        unit: '€'
+      }
     ],
     xAxisTitle: 'X Axis Title',
     yAxisTitle: 'Y Axis Title',
     suggestedMin: 0,
     suggestedMax: 50
-  },
+  }
 } satisfies Story;