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

package/src/components/radar/RadarChart.vue

@@ -1,32 +1,37 @@
 <template>
   <div class="container">
-    <div class='main'>
+    <div class="main">
       <Radar
-          v-if="radarData"
-          :data='radarData'
-          :options='chartOptions'
-          :plugins="radarPlugins"
-          :chart-id='chartId'
-          :cssClasses:='cssClasses'
-          :styles='styles'
-          :style='{ height, cursor:"pointer",}'
+        v-if="radarData"
+        :id="chartId"
+        :data="radarData"
+        :options="chartOptions"
+        :plugins="radarPlugins"
+        :class="cssClasses"
+        :style="[{ height, cursor: 'pointer' }, styles]"
       />
     </div>
-    <div ref='legendContainer' class='legendContainer' />
+    <div ref="legendContainer" class="legendContainer" />
   </div>
 </template>
 
-<script setup lang='ts'>
+<script setup lang="ts">
 import { PropType, ref, computed } from 'vue';
 import type { Area } from '../../types/RadarData';
 import { Radar } from 'vue-chartjs';
 import type { ActiveElement, ChartData } from 'chart.js';
-import {Context, GenericTooltipService} from '../../services/GenericTooltipService';
-import { formatWithThousandsSeprators, numberWithThousandSeparators } from '../../services/FormatUtilities';
+import {
+  Context,
+  GenericTooltipService,
+} from '../../services/GenericTooltipService';
+import {
+  formatWithThousandsSeprators,
+  numberWithThousandSeparators,
+} from '../../services/FormatUtilities';
 import { TooltipChartType } from '../../types/TooltipChartType';
 import { drawLabels } from '../../services/RadarChartFunctions';
 import type { Chart, ChartItem } from '../../services/ChartsCommonLegend';
-import { addAlpha } from '../../services/ColorFunctions'
+import { addAlpha } from '../../services/ColorFunctions';
 import {
   Chart as ChartJS,
   Filler,
@@ -36,7 +41,7 @@ import {
   RadialLinearScale,
   Title,
   Tooltip,
-  Plugin
+  Plugin,
 } from 'chart.js';
 
 import {
@@ -46,7 +51,7 @@ import {
   createLegendElementWithSquareArea,
   getOrCreateLegendList,
   hideAllButThis,
-  switchItemVisibility
+  switchItemVisibility,
 } from '../../services/ChartsCommonLegend';
 
 import ChartDesign from '../../services/patterns/ChartDesign';
@@ -58,75 +63,105 @@ ChartJS.register(
   RadialLinearScale,
   LineElement,
   PointElement,
-  Filler,
+  Filler
 );
 
-const {
-  colourSets,
-  patternsStandardList
-  } = ChartDesign();
+const { colourSets, patternsStandardList } = ChartDesign();
 
 const radarComponentChartProps = defineProps({
-    chartId: {
-      type: String,
-      default: 'radar-chart',
-    },
-    height: {
-      type: String,
-      default: '400px',
-    },
-    labels: {
+  /**
+   * Value of the id attribute present on the <canvas> tag element the chart
+   */
+  chartId: {
+    type: String,
+    default: 'radar-chart',
+  },
+  /**
+   * Value of the `height` css property used to define the height of the <canvas> element
+   */
+  height: {
+    type: String,
+    default: '400px',
+  },
+  /**
+   * 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: () => []
-    },
-    // 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]
-    },
-    areas: {
-      type: Array as PropType<Area[]>,
-      default: () => []
-    },
-    cssClasses: {
-      default: '',
-      type: String,
-    },
-    styles: {
-      type: Object as PropType<Partial<CSSStyleDeclaration>>,
-      default: () => {},
-    },
-    plugins: {
-      type: Array as PropType<Plugin<'radar'>[]>,
-      default: () => [],
-    },
-})
+    default: () => [],
+  },
+  /**
+   * Disable accessibility patterns
+   */
+  disableAccessibility: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 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<Area[]>,
+    default: () => [],
+  },
+  /**
+   * Add custom CSS classes to the <canvas> element
+   */
+  cssClasses: {
+    default: '',
+    type: String,
+  },
+  /**
+   * 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<'radar'>[]>,
+    default: () => [],
+  },
+});
 
-const patternsColors = computed(() => radarComponentChartProps.newPatternsOrder.length !== 6
-  ? colourSets[radarComponentChartProps.colourSet]
-  : radarComponentChartProps.newPatternsOrder.map((id)=> {return colourSets[radarComponentChartProps.colourSet][id]})
-)
+const patternsColors = computed(() =>
+  radarComponentChartProps.newPatternsOrder.length !== 6
+    ? colourSets[radarComponentChartProps.colourSet]
+    : radarComponentChartProps.newPatternsOrder.map((id) => {
+        return colourSets[radarComponentChartProps.colourSet][id];
+      })
+);
 
-const patternsOrderedList = computed(() => radarComponentChartProps.newPatternsOrder.length !== 6
-  ? patternsStandardList
-  : radarComponentChartProps.newPatternsOrder.map((id)=> {return patternsStandardList[id]})
-)
+const patternsOrderedList = computed(() =>
+  radarComponentChartProps.newPatternsOrder.length !== 6
+    ? patternsStandardList
+    : radarComponentChartProps.newPatternsOrder.map((id) => {
+        return patternsStandardList[id];
+      })
+);
 
 const radarData = computed<ChartData<'radar'>>(() => ({
   labels: getRadarLabels(),
@@ -135,7 +170,7 @@ const radarData = computed<ChartData<'radar'>>(() => ({
       label: 'Data One',
       backgroundColor: addAlpha(patternsColors.value[0], 0.1),
       borderColor: patternsColors.value[0],
-      pointBackgroundColor:  '#FFFFFF',
+      pointBackgroundColor: '#FFFFFF',
       pointBorderColor: patternsColors.value[0],
       pointBorderWidth: 2,
       borderWidth: 2,
@@ -143,7 +178,9 @@ const radarData = computed<ChartData<'radar'>>(() => ({
       pointRadius: 5,
       pointHoverBackgroundColor: patternsColors.value[0],
       pointHoverBorderColor: patternsColors.value[0],
-      data: radarComponentChartProps.areas[0].areaData.map((x: { position: number }) => x.position)
+      data: radarComponentChartProps.datasets[0].areaData.map(
+        (x: { position: number }) => x.position
+      ),
     },
     {
       label: 'Data Two',
@@ -158,26 +195,32 @@ const radarData = computed<ChartData<'radar'>>(() => ({
       pointStyle: 'rectRot',
       pointHoverBackgroundColor: patternsColors.value[1],
       pointHoverBorderColor: patternsColors.value[1],
-      data: radarComponentChartProps.areas[1].areaData.map((x: { position: number }) => x.position)
-    }
-  ]
+      data: radarComponentChartProps.datasets[1].areaData.map(
+        (x: { position: number }) => x.position
+      ),
+    },
+  ],
 }));
 
 const chartOptions: any = {
-      onClick: (_ingnore: unknown, clickedElements: ActiveElement[], chart: Chart) => {
+  onClick: (
+    _ingnore: unknown,
+    clickedElements: ActiveElement[],
+    chart: Chart
+  ) => {
     if (clickedElements[0]) {
       hideAllButThis(chart, clickedElements[0].datasetIndex, selectMode);
     }
   },
   plugins: {
     htmlLegend: {
-      containerID: 'legend-container'
+      containerID: 'legend-container',
     },
     legend: {
-      display: false
+      display: false,
     },
     title: {
-      display: false
+      display: false,
     },
     tooltip: {
       enabled: false,
@@ -191,58 +234,64 @@ const chartOptions: any = {
           patternsOrderedList.value,
           radarComponentChartProps.disableAccessibility
         );
-      }
-    }
+      },
+    },
   },
   layout: {
-    padding: 65
+    padding: 65,
   },
   scales: {
     r: {
       min: 0,
       max: 100,
       pointLabels: {
-          display: false,
-          font: {
-            size: 16
-        }
+        display: false,
+        font: {
+          size: 16,
+        },
       },
       ticks: {
         display: false,
-        stepSize: 25
-      }
-    }
-  }
-    };
+        stepSize: 25,
+      },
+    },
+  },
+};
 const legendContainer = ref(null);
 const selectMode = ref(false);
-function splitLabelIfTooLong (axisLabel: string, buildValue: string) {
+function splitLabelIfTooLong(axisLabel: string, buildValue: string) {
   const radarLimitLabelLength = 15;
-  if (axisLabel.length > radarLimitLabelLength && axisLabel.includes(' ', radarLimitLabelLength)) {
-    const indexOfFirstSpaceAfterLimit: number = axisLabel.indexOf(' ', radarLimitLabelLength);
+  if (
+    axisLabel.length > radarLimitLabelLength &&
+    axisLabel.includes(' ', radarLimitLabelLength)
+  ) {
+    const indexOfFirstSpaceAfterLimit: number = axisLabel.indexOf(
+      ' ',
+      radarLimitLabelLength
+    );
     return [
       axisLabel.substring(0, indexOfFirstSpaceAfterLimit),
       axisLabel.substring(indexOfFirstSpaceAfterLimit),
-      buildValue
+      buildValue,
     ];
   }
-  return [
-    axisLabel,
-    buildValue
-  ];
+  return [axisLabel, buildValue];
 }
 const getRadarLabels = () => {
   return radarComponentChartProps.labels.map((label: string, index: number) => {
-    const buildValue = radarComponentChartProps.areas[0].areaData[index].value
-      ? `${formatNumber(radarComponentChartProps.areas[0].areaData[index].value + '')} ${radarComponentChartProps.areas[0].areaData[index].unit}`
+    const buildValue = radarComponentChartProps.datasets[0].areaData[index]
+      .value
+      ? `${formatNumber(
+          radarComponentChartProps.datasets[0].areaData[index].value + ''
+        )} ${radarComponentChartProps.datasets[0].areaData[index].unit}`
       : 'No Data';
     return splitLabelIfTooLong(label, buildValue);
   });
-}
+};
 const formatNumber = (numberFromJson: string) => {
   return formatWithThousandsSeprators(parseFloat(numberFromJson));
 };
-function createLegendElementWithCheckbox (chart: any, item: ChartItem) {
+function createLegendElementWithCheckbox(chart: any, item: ChartItem) {
   const liContent = createLegendCheckbox(chart, item);
   liContent.onclick = (e: Event) => {
     switchItemVisibility(chart, item.datasetIndex, selectMode);
@@ -251,44 +300,53 @@ function createLegendElementWithCheckbox (chart: any, item: ChartItem) {
   return liContent;
 }
 
-const radarPlugins = [{
-  id: 'htmlLegend',
-  afterUpdate (chart: any) {
-    const ul = getOrCreateLegendList(legendContainer, 'row');
-    while (ul.firstChild) {
-      ul.firstChild.remove();
-    }
-    const items = chart.options.plugins.legend.labels.generateLabels(chart).reverse();
-    items.forEach((item: ChartItem) => {
-      const li = createHtmlLegendListElement(chart, selectMode, item.datasetIndex);
-      let liContent;
-      li.style.marginRight = '0.625rem';
-      if (!selectMode.value) {
-        liContent = createLegendElementWithSquareArea(item, true);
-      } else {
-        liContent = createLegendElementWithCheckbox(chart, item);
+const radarPlugins = [
+  {
+    id: 'htmlLegend',
+    afterUpdate(chart: any) {
+      const ul = getOrCreateLegendList(legendContainer, 'row');
+      while (ul.firstChild) {
+        ul.firstChild.remove();
       }
-      li.appendChild(liContent);
-      li.appendChild(createHtmlLegendItemText(item));
-      ul.appendChild(li);
-    });
-  }
-},{
-  id: 'radarLabelPlugin',
-  beforeDraw (chart: any) {
-    drawLabels(chart, radarComponentChartProps);
+      const items = chart.options.plugins.legend.labels
+        .generateLabels(chart)
+        .reverse();
+      items.forEach((item: ChartItem) => {
+        const li = createHtmlLegendListElement(
+          chart,
+          selectMode,
+          item.datasetIndex
+        );
+        let liContent;
+        li.style.marginRight = '0.625rem';
+        if (!selectMode.value) {
+          liContent = createLegendElementWithSquareArea(item, true);
+        } else {
+          liContent = createLegendElementWithCheckbox(chart, item);
+        }
+        li.appendChild(liContent);
+        li.appendChild(createHtmlLegendItemText(item));
+        ul.appendChild(li);
+      });
+    },
   },
-}];
+  {
+    id: 'radarLabelPlugin',
+    beforeDraw(chart: any) {
+      drawLabels(chart, radarComponentChartProps);
+    },
+  },
+];
 
 const getTooltipData = (context: Context): string => {
-    const datasetIndex: number | undefined = context.tooltip.dataPoints[0].datasetIndex;
-    const dataIndex: number | undefined = context.tooltip.dataPoints[0].dataIndex;
-    if (datasetIndex && dataIndex) {
-        const data = radarComponentChartProps.areas[datasetIndex];
-        return data.areaData[dataIndex].value.toFixed(2) + ' ' +
-          data.areaData[dataIndex].unit;
-    }
-    return '';
+  const datasetIndex = context.tooltip.dataPoints[0].datasetIndex as number;
+  const dataIndex = context.tooltip.dataPoints[0].dataIndex as number;
+  const data = radarComponentChartProps.datasets[datasetIndex];
+  return (
+    data.areaData[dataIndex].value.toFixed(2) +
+    ' ' +
+    data.areaData[dataIndex].unit
+  );
 };
 </script>
 
@@ -306,4 +364,4 @@ const getTooltipData = (context: Context): string => {
   justify-content: center;
   align-items: center;
 }
-</style>
+</style>

package/src/main.ts

@@ -1,5 +1,6 @@
-import { createApp } from "vue";
-import App from "./App.vue";
-import MozaicChart from "./plugin";
+import BarChart from "./components/bar/BarChart.vue";
+import DoughnutChart from "./components/doughnut/DoughnutChart.vue";
+import LineChart from "./components/line/LineChart.vue";
+import RadarChart from "./components/radar/RadarChart.vue";
 
-createApp(App).use(MozaicChart).mount("#app");
+export { BarChart, DoughnutChart, LineChart, RadarChart };

package/src/plugin.ts

@@ -2,7 +2,7 @@ import type { App } from "vue";
 import * as Components from "./components";
 
 const MozaicChart = {
-  install: (app: App) => {
+  install: (app: App, options: {}) => {
     Object.keys(Components).forEach((name) => {
       // @ts-ignore
       app.component(name, Components[name]);