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

package/src/components/radar/RadarChart.vue

@@ -1,31 +1,34 @@
 <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 {
+  Context,
+  GenericTooltipService,
+} from '../../services/GenericTooltipService';
 import { formatWithThousandsSeprators } 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 {
   Chart as ChartJS,
   Filler,
@@ -35,7 +38,7 @@ import {
   RadialLinearScale,
   Title,
   Tooltip,
-  Plugin
+  Plugin,
 } from 'chart.js';
 
 import {
@@ -45,9 +48,11 @@ import {
   createLegendElementWithSquareArea,
   getOrCreateLegendList,
   hideAllButThis,
-  switchItemVisibility
+  switchItemVisibility,
 } from '../../services/ChartsCommonLegend';
 
+import ChartDesign from '../../services/patterns/ChartDesign';
+
 ChartJS.register(
   Title,
   Tooltip,
@@ -55,88 +60,164 @@ ChartJS.register(
   RadialLinearScale,
   LineElement,
   PointElement,
-  Filler,
+  Filler
 );
+
+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: () => []
-    },
-    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 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: '#BFE3E760',
-      borderColor: '#0192A0',
-      pointBackgroundColor: '#0192A000',
-      pointBorderColor: '#0192A0',
+      label: radarComponentChartProps.datasets[0].label,
+      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: '#0192A0',
-      pointHoverBorderColor: '#0192A0',
-      data: radarComponentChartProps.areas[0].areaData.map((x: { position: number }) => x.position)
+      pointHoverBackgroundColor: patternsColors.value[0],
+      pointHoverBorderColor: patternsColors.value[0],
+      data: radarComponentChartProps.datasets[0].areaData.map(
+        (x: { position: number }) => x.position
+      ),
     },
     {
-      label: 'Data Two',
-      backgroundColor: 'rgba(231, 231, 240, .6)',
-      borderColor: '#605F9D',
-      pointBackgroundColor: 'rgba(231, 231, 240, .6)',
-      pointBorderColor: '#605F9D',
+      label: radarComponentChartProps.datasets[1].label,
+      backgroundColor: addAlpha(patternsColors.value[1], 0.1),
+      borderColor: patternsColors.value[1],
+      pointBackgroundColor: '#FFFFFF',
+      pointBorderColor: patternsColors.value[1],
       pointBorderWidth: 2,
       borderWidth: 2,
       pointHitRadius: 55,
       pointRadius: 5,
       pointStyle: 'rectRot',
-      pointHoverBackgroundColor: '#605F9D',
-      pointHoverBorderColor: '#605F9D',
-      data: radarComponentChartProps.areas[1].areaData.map((x: { position: number }) => x.position)
-    }
-  ]
+      pointHoverBackgroundColor: patternsColors.value[1],
+      pointHoverBorderColor: patternsColors.value[1],
+      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,
@@ -145,60 +226,75 @@ const chartOptions: any = {
         new GenericTooltipService().createTooltip(
           context,
           getTooltipData,
-          { chartType: TooltipChartType.RADAR }
+          { chartType: TooltipChartType.RADAR },
+          patternsColors.value,
+          patternsOrderedList.value,
+          radarComponentChartProps.disableAccessibility
         );
-      }
-    }
+      },
+    },
   },
   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: {
         display: false,
-        stepSize: 25
-      }
-    }
-  }
-    };
+        stepSize: 25,
+      },
+    },
+  },
+};
 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);
+function splitLabelIfTooLong(axisLabel: string, buildValue: string) {
+  const radarLimitLabelLength = 9;
+  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);
@@ -207,44 +303,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);
-      } 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, null, 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>
 
@@ -262,4 +367,4 @@ const getTooltipData = (context: Context): string => {
   justify-content: center;
   align-items: center;
 }
-</style>
+</style>

package/src/components/radar/index.ts

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

package/src/main.ts

@@ -2,5 +2,6 @@ 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";
 
-export { BarChart, DoughnutChart, LineChart, RadarChart };
+export { BarChart, DoughnutChart, LineChart, RadarChart, MixedBarLineChart };

package/src/plugin.ts

@@ -0,0 +1,19 @@
+import type { App } from "vue";
+import * as Components from "./components";
+
+const MozaicChart = {
+  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 { MixedBarLineChart } from "./components/mixed";

package/src/services/BarChartFunctions.ts

@@ -4,14 +4,9 @@ import {
   getHtmlLegendPlugin
 } from './ChartsCommonLegend';
 import PatternFunctions from './PatternFunctions';
-import ChartDesign from './patterns/ChartDesign';
+import { addAlpha } from './ColorFunctions';
 
 const { getPatternIndexWithShift } = PatternFunctions();
-const {
-  patternsColors,
-  patternsColorsLowerOpacity,
-  patternsStandardList
-} = ChartDesign();
 
 interface Dataset {
   data: any,
@@ -27,8 +22,8 @@ export default function () {
   });
 
 
-  function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>) {
-    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex);
+  function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>) {
+    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, disableAccessibility, patternsColors, patternsList);
   }
   // Hack to force the chart to reload on Hover
   function reloadChart () {
@@ -36,16 +31,18 @@ export default function () {
     borderWidth.value = 3;
   }
 
-  function getStackedDatasets (datasets: Dataset[], stackDatasets: boolean, patternShifting?: number) {
+  function getStackedDatasets (datasets: Dataset[], stackDatasets: boolean, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], patternShifting?: number) {
+    // Hack to force refresh
+    const borderWithValue = borderWidth.value;
     return datasets.map((dataset, index) => {
       return {
         borderColor: function (context: any) {
-          return getBorderColor(index, context.index, patternShifting);
+          return disableAccessibility ? '#00000000' : getBorderColor(index, context.index, patternsColors, patternShifting);
         },
         backgroundColor: function (context: any) {
-          return getPattern(index, context.index, patternShifting);
+          return getPattern(index, context.index, disableAccessibility, patternsColors, patternsList, patternShifting);
         },
-        borderWidth: borderWidth.value,
+        borderWidth: function () {return disableAccessibility ? 1 : borderWithValue},
         data: dataset.data,
         label: dataset.label,
         stack: `Stack ${stackDatasets ? '0' : index}`
@@ -53,26 +50,25 @@ export default function () {
     });
   }
 
-  function getDatasets (firstDataSet: Dataset, secondDataSet: Dataset) {
-    const getStacked = getStackedDatasets([firstDataSet, secondDataSet], false);
-    return getStacked;
+  function getDatasets (firstDataSet: Dataset, secondDataSet: Dataset,  patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean) {
+    return getStackedDatasets([firstDataSet, secondDataSet], false, disableAccessibility, patternsColors, patternsList);
   }
 
-  function getBorderColor (dataSetIndex: number, contextIndex: number, patternShifting?: number) {
+  function getBorderColor (dataSetIndex: number, contextIndex: number, patternsColors: string[], patternShifting?: number) {
     const index = getPatternIndexWithShift(dataSetIndex, patternShifting);
     if (displayFullOpacity(dataSetIndex, contextIndex)) {
       return patternsColors[index];
     } else {
-      return patternsColorsLowerOpacity[index];
+      return addAlpha(patternsColors[index],0.2);
     }
   }
 
-  function getPattern (dataSetIndex: number, contextIndex: number, patternShifting?: number) {
+  function getPattern (dataSetIndex: number, contextIndex: number, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], patternShifting?: number) {
     const index = getPatternIndexWithShift(dataSetIndex, patternShifting);
     if (displayFullOpacity(dataSetIndex, contextIndex)) {
-      return patternsStandardList[index](false);
+      return patternsList[index](false, patternsColors[index], disableAccessibility);
     } else {
-      return patternsStandardList[index](true);
+      return patternsList[index](true, patternsColors[index], disableAccessibility);
     }
   }