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

package/src/components/radar/RadarChart.vue

@@ -1,32 +1,37 @@
 <template>
   <div class="container">
-    <div class='main'>
+    <div class="main" :style="{ height }">
       <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 } from '../../services/FormatUtilities';
 import { TooltipChartType } from '../../types/TooltipChartType';
-import { drawLabels } from '../../services/RadarChartFunctions';
+import {
+  drawLabels,
+  splitLabelIfTooLong
+} 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,
@@ -58,113 +63,137 @@ 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: '600px'
+  },
+  /**
+   * 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: () => [],
-    },
-})
+  },
+  /**
+   * 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(),
-  datasets: [
-    {
-      label: 'Data One',
-      backgroundColor: addAlpha(patternsColors.value[0], 0.1),
-      borderColor: patternsColors.value[0],
-      pointBackgroundColor:  '#FFFFFF',
-      pointBorderColor: patternsColors.value[0],
-      pointBorderWidth: 2,
-      borderWidth: 2,
-      pointHitRadius: 55,
-      pointRadius: 5,
-      pointHoverBackgroundColor: patternsColors.value[0],
-      pointHoverBorderColor: patternsColors.value[0],
-      data: radarComponentChartProps.areas[0].areaData.map((x: { position: number }) => x.position)
-    },
-    {
-      label: 'Data Two',
-      backgroundColor: addAlpha(patternsColors.value[1], 0.1),
-      borderColor: patternsColors.value[1],
+  datasets: getDatasets()
+}));
+
+function getDatasets() {
+  return radarComponentChartProps.datasets.map((dataset, index) => {
+    return {
+      label: dataset.label,
+      backgroundColor: addAlpha(patternsColors.value[index], 0.1),
+      borderColor: patternsColors.value[index],
       pointBackgroundColor: '#FFFFFF',
-      pointBorderColor: patternsColors.value[1],
+      pointBorderColor: patternsColors.value[index],
       pointBorderWidth: 2,
       borderWidth: 2,
       pointHitRadius: 55,
       pointRadius: 5,
-      pointStyle: 'rectRot',
-      pointHoverBackgroundColor: patternsColors.value[1],
-      pointHoverBorderColor: patternsColors.value[1],
-      data: radarComponentChartProps.areas[1].areaData.map((x: { position: number }) => x.position)
-    }
-  ]
-}));
+      pointStyle: index % 2 === 0 ? 'circle' : 'rectRot',
+      pointHoverBackgroundColor: patternsColors.value[index],
+      pointHoverBorderColor: patternsColors.value[index],
+      data: dataset.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);
     }
@@ -179,6 +208,9 @@ const chartOptions: any = {
     title: {
       display: false
     },
+    datalabels: {
+      display: false
+    },
     tooltip: {
       enabled: false,
       position: 'nearest' as const,
@@ -195,16 +227,22 @@ const chartOptions: any = {
     }
   },
   layout: {
-    padding: 65
+    padding: {
+      left: 130,
+      right: 95,
+      top: 95,
+      bottom: 95
+    }
   },
   scales: {
     r: {
       min: 0,
       max: 100,
       pointLabels: {
-          display: false,
-          font: {
-            size: 16
+        display: false,
+        font: {
+          weight: 400,
+          family: 'Roboto'
         }
       },
       ticks: {
@@ -213,37 +251,30 @@ const chartOptions: any = {
       }
     }
   }
-    };
+};
 const legendContainer = ref(null);
 const selectMode = ref(false);
-function splitLabelIfTooLong (axisLabel: string, buildValue: string) {
-  const radarLimitLabelLength = 15;
-  if (axisLabel.length > radarLimitLabelLength && axisLabel.includes(' ', radarLimitLabelLength)) {
-    const indexOfFirstSpaceAfterLimit: number = axisLabel.indexOf(' ', radarLimitLabelLength);
-    return [
-      axisLabel.substring(0, indexOfFirstSpaceAfterLimit),
-      axisLabel.substring(indexOfFirstSpaceAfterLimit),
-      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) {
-  const liContent = createLegendCheckbox(chart, item);
+function createLegendElementWithCheckbox(chart: any, item: ChartItem) {
+  const liContent = createLegendCheckbox(
+    chart,
+    item,
+    null as unknown as string[]
+  );
   liContent.onclick = (e: Event) => {
     switchItemVisibility(chart, item.datasetIndex, selectMode);
     e.stopPropagation();
@@ -251,44 +282,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>
 
@@ -300,10 +340,9 @@ const getTooltipData = (context: Context): string => {
   font-family: 'Roboto', sans-serif;
 }
 .main {
-  height: 600px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
-</style>
+</style>

package/src/components/radar/index.ts

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

package/src/main.ts

@@ -1,5 +1,15 @@
-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';
+import MixedBarLineChart from './components/mixed/MixedBarLineChart.vue';
+import BubbleChart from './components/bubble/BubbleChart.vue';
 
-createApp(App).use(MozaicChart).mount("#app");
+export {
+  BarChart,
+  DoughnutChart,
+  LineChart,
+  RadarChart,
+  MixedBarLineChart,
+  BubbleChart
+};

package/src/plugin.ts

@@ -1,18 +1,20 @@
-import type { App } from "vue";
-import * as Components from "./components";
+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]);
     });
-  },
+  }
 };
 
 export default MozaicChart;
 
-export { BarChart } from "./components/bar";
-export { DoughnutChart } from "./components/doughnut";
-export { LineChart } from "./components/line";
-export { RadarChart } from "./components/radar";
+export { BarChart } from './components/bar';
+export { DoughnutChart } from './components/doughnut';
+export { LineChart } from './components/line';
+export { RadarChart } from './components/radar';
+export { MixedBarLineChart } from './components/mixed';
+export { BubbleChart } from './components/bubble';