@mozaic-ds/chart 0.1.0-beta.1 → 0.1.0-beta.11

package/src/services/DoughnutChartFunctions.ts

@@ -1,85 +1,130 @@
-import { ref } from 'vue';
-import type { Ref } from 'vue';
-import {
-  getHtmlLegendPlugin
-} from '../services/ChartsCommonLegend';
-import { formatWithThousandsSeprators } from '../services/FormatUtilities';
+import { ref } from "vue";
+import type { Ref } from "vue";
+import { getHtmlLegendPlugin } from "../services/ChartsCommonLegend";
+import { formatWithThousandsSeprators } from "../services/FormatUtilities";
 
-import ChartDesign from './patterns/ChartDesign';
-import {addAlpha} from './ColorFunctions';
+import { addAlpha } from "./ColorFunctions";
 
 export default function () {
   const doughnutRef: Ref = ref(null);
   const onHoverIndex: Ref<number | null> = ref(null);
   const backgroundColor: Ref<CanvasPattern[] | null> = ref(null);
 
-  function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>, maxValueToDisplay: number, doughnutData: any) {
-    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, disableAccessibility, patternsColors, patternsList, maxValueToDisplay, doughnutData);
+  function privateGetHtmlLegendPlugin(
+    legendContainer: Ref,
+    selectMode: Ref<boolean>,
+    disableAccessibility: Ref<boolean>,
+    patternsColors: Ref<string[]>,
+    patternsList: Ref<
+      ((
+        hover: boolean,
+        color: string,
+        disableAccessibility: boolean
+      ) => CanvasPattern)[]
+    >,
+    maxValueToDisplay: number,
+    doughnutData: any
+  ) {
+    return getHtmlLegendPlugin(
+      legendContainer,
+      selectMode,
+      onHoverIndex,
+      disableAccessibility,
+      patternsColors,
+      patternsList,
+      maxValueToDisplay,
+      doughnutData
+    );
   }
 
-
-  function getBackgroundColor(patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean) {
+  function getBackgroundColor(
+    patternsColors: string[],
+    patternsList: ((
+      hover: boolean,
+      color: string,
+      disableAccessibility: boolean
+    ) => CanvasPattern)[],
+    disableAccessibility: boolean
+  ) {
     if (onHoverIndex.value !== null) {
-      return patternsList
-          .map((pattern, index) => onHoverIndex.value === index ? pattern(false, patternsColors[index], disableAccessibility) : pattern(true, patternsColors[index], disableAccessibility));
+      return patternsList.map((pattern, index) =>
+        onHoverIndex.value === index
+          ? pattern(false, patternsColors[index], disableAccessibility)
+          : pattern(true, patternsColors[index], disableAccessibility)
+      );
     } else {
-      return patternsList
-          .map((pattern, index) => pattern(false, patternsColors[index], disableAccessibility),);
+      return patternsList.map((pattern, index) =>
+        pattern(false, patternsColors[index], disableAccessibility)
+      );
     }
   }
 
   function getBorderColor(patternsColors: string[]): string[] {
     if (onHoverIndex.value !== null) {
-      return patternsColors.map((color, index) => onHoverIndex.value === index ? color : addAlpha(color, 0.2));
+      return patternsColors.map((color, index) =>
+        onHoverIndex.value === index ? color : addAlpha(color, 0.2)
+      );
     } else {
       return patternsColors;
     }
   }
 
+  function getOnHoverOptions() {
+    return (_ignore: unknown, activeElements: Array<any>): void => {
+      if (activeElements[0] !== undefined) {
+        onHoverIndex.value = activeElements[0].element.$context.index;
+      } else {
+        onHoverIndex.value = null;
+      }
+    };
+  }
 
-  function getOnHoverOptions () {
-  return (_ignore: unknown, activeElements: Array<any>): void => {
-    if (activeElements[0] !== undefined) {
-      onHoverIndex.value = activeElements[0].element.$context.index;
-    } else {
-      onHoverIndex.value = null;
-    }
+  const getFormatedText = (str: string) => {
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
   };
- }
-
-const getFormatedText = (str: string) => {
-  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-};
 
-function getDoughnutLabels(labels: string[], data: any[], maxValues: number) {
-  let truncatedLabels = labels.slice(0);
-  let truncatedData = data.slice(0);
-  if (labels.length > maxValues){
-    truncatedData = groupDataAfterNthValue(data, maxValues);
-    truncatedLabels = truncatedLabels.slice(0, maxValues - 1);
-    truncatedLabels.push('others');
+  function getDoughnutLabels(
+    labels: string[],
+    data: any[],
+    maxValues: number,
+    othersLabel: string
+  ) {
+    let truncatedLabels = labels.slice(0);
+    let truncatedData = data.slice(0);
+    if (labels.length > maxValues) {
+      truncatedData = groupDataAfterNthValue(data, maxValues);
+      truncatedLabels = truncatedLabels.slice(0, maxValues - 1);
+      truncatedLabels.push(othersLabel);
+    }
+    return truncatedLabels.map(
+      (label: string, index: number) =>
+        `${getFormatedText(label)} (${formatWithThousandsSeprators(
+          truncatedData[index].rate as number
+        )} %)`
+    );
   }
-  return truncatedLabels.map((label: string, index: number) => `${getFormatedText(label)} (${formatWithThousandsSeprators(truncatedData[index].rate as number)} %)`);
-}
 
-function groupDataAfterNthValue (data: any, maxValues: number): any[] {
-  if (maxValues < 1) {
-    return data;
-  }
-  let truncatedData = data.slice(0);
-  if (data.length > maxValues) {
-    truncatedData = truncatedData.slice(0, maxValues);
-    truncatedData[maxValues - 1] = data.slice(maxValues).reduce((result: any, current: any) => {
-      result.rate += current.rate;
-      result.value += current.value;
-      return result;
-    }, {
-      rate: data[maxValues - 1].rate,
-      value: data[maxValues - 1].value
-    });
+  function groupDataAfterNthValue(data: any, maxValues: number): any[] {
+    if (maxValues < 1) {
+      return data;
+    }
+    let truncatedData = data.slice(0);
+    if (data.length > maxValues) {
+      truncatedData = truncatedData.slice(0, maxValues);
+      truncatedData[maxValues - 1] = data.slice(maxValues).reduce(
+        (result: any, current: any) => {
+          result.rate += current.rate;
+          result.value += current.value;
+          return result;
+        },
+        {
+          rate: data[maxValues - 1].rate,
+          value: data[maxValues - 1].value,
+        }
+      );
+    }
+    return truncatedData;
   }
-  return truncatedData;
-}
 
   return {
     onHoverIndex,
@@ -91,6 +136,6 @@ function groupDataAfterNthValue (data: any, maxValues: number): any[] {
     getFormatedText,
     getBorderColor,
     backgroundColor,
-    doughnutRef
+    doughnutRef,
   };
 }

package/src/services/FormatUtilities.ts

@@ -1,4 +1,4 @@
-export function formatTicks (val: number, unit?: string | null): string {
+export function formatTicks (val: number, unit?: string): string {
   const fixedValue = parseInt(val.toFixed());
   return `${new Intl.NumberFormat().format(fixedValue)}${unit ? ' ' + unit : ''}`;
 }

package/src/services/GenericTooltipService.ts

@@ -39,6 +39,9 @@ export type Context = {
   replay?: unknown;
   tooltip: {
     dataPoints: {
+      dataset?: {
+        type?: string
+      },
       dataIndex?: number,
       datasetIndex?: number
     }[];
@@ -110,6 +113,7 @@ export class GenericTooltipService {
       const body = this.chartType === 'DOUGHNUT' ? [tooltipModel.title[0].split('(')[0].trim()]: bodyLines[0];
       let legendIconStyle = '';
       let legendInnerStyle = '';
+      const datasetType = context.tooltip?.dataPoints[0]?.dataset?.type;
 
       if (this.chartType === 'RADAR' || this.chartType === 'LINE_CHART') {
         legendIconStyle = this.createLegendStyle(context);
@@ -118,6 +122,13 @@ export class GenericTooltipService {
                  this.chartType === 'DETAILS_BAR_CHART' ||
                  this.chartType === 'DOUGHNUT') {
         legendIconStyle = this.createPatternLegendStyle(context);
+      } else if (this.chartType === 'MIXED_BAR_LINE_CHART') {
+        if (datasetType === 'bar') {
+          legendIconStyle = this.createPatternLegendStyle(context);
+        } else {
+          legendIconStyle = this.createLegendStyle(context);
+          legendInnerStyle = this.createLegendInnerStyle(context);
+        }
       }
 
       this.addLegendToDom(
@@ -129,7 +140,8 @@ export class GenericTooltipService {
         tooltipEl,
         patternsColors,
         patternsList,
-        disableAccessibility
+        disableAccessibility,
+        datasetType
       );
     }
 
@@ -188,7 +200,8 @@ export class GenericTooltipService {
     style += ';margin-right: 10px';
     style += ';display: flex';
     style += ';align-items: center';
-    style += ';justify-content: center;';
+    style += ';justify-content: center';
+    style += ';background: rgba(0, 0, 0, 0.1);';
     return style;
   }
 
@@ -215,7 +228,8 @@ export class GenericTooltipService {
     tooltipEl: HTMLElement,
     patternsColors: string[],
     patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[],
-    disableAccessibility: boolean = false
+    disableAccessibility: boolean = false,
+    datasetType?: string 
     ) {
       let innerHtml = innerHTMLtext;
       let legendImage = `<div class="legendIcon" style="${legendIconStyle}">`;
@@ -225,9 +239,9 @@ export class GenericTooltipService {
       const innerHtmlToAdd = this.setInnerHtmlToAdd(body, style, legendImage);
       innerHtml += innerHtmlToAdd;
       const tableRoot = tooltipEl?.querySelector('.tooltipCtn') as HTMLElement | null;
-
       if (tableRoot?.innerHTML != null) {
-        this.setInnerHtmlAndPattern(tableRoot, innerHtml, patternsColors, patternsList, disableAccessibility);
+        datasetType ? this.setInnerHtmlAndPattern(tableRoot, innerHtml, patternsColors, patternsList, disableAccessibility, datasetType) 
+        : this.setInnerHtmlAndPattern(tableRoot, innerHtml, patternsColors, patternsList, disableAccessibility);
       }
     }
 
@@ -285,7 +299,7 @@ export class GenericTooltipService {
   }
 
 
-  setInnerHtmlAndPattern(tableRoot: HTMLElement, innerHtml: string, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean = false) {
+  setInnerHtmlAndPattern(tableRoot: HTMLElement, innerHtml: string, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean = false, datasetType?: string) {
     tableRoot.innerHTML = innerHtml;
     const legendIconHtml = document.querySelector('.legendIcon') as HTMLElement;
     const img: HTMLImageElement = new Image();
@@ -298,7 +312,7 @@ export class GenericTooltipService {
       index = this.datasetIndex + 1;
     }
     const patternIndex = getPatternIndexWithShift(index, this.patternShifting);
-    if (this.chartType !== 'LINE_CHART' && this.chartType !== 'RADAR') {
+    if (this.chartType !== 'LINE_CHART' && this.chartType !== 'RADAR' && datasetType !== 'line') {
       const pattern: CanvasPattern = patternsList[patternIndex - 1](false, patternsColors[patternIndex - 1], disableAccessibility);
       const patternCanvas: HTMLCanvasElement = getPatternCanvas(pattern, 22, 22);
       img.src = patternCanvas.toDataURL();

package/src/services/MixedBarLineFunctions.ts

@@ -0,0 +1,280 @@
+import { reactive, ref, type Ref } from 'vue';
+import PatternFunctions from './PatternFunctions';
+import { addAlpha } from './ColorFunctions';
+import type { HTMLLegendPlugin } from '../types/Chart';
+import {
+  getOrCreateLegendList,
+  createHtmlLegendListElement,
+  createLegendElementWithPatterns,
+  createLegendElementWithCheckbox,
+  createHtmlLegendItemText,
+  createLegendElementWithSquareArea,
+  type ChartItem,
+} from './ChartsCommonLegend';
+
+const { getPatternIndexWithShift } = PatternFunctions();
+
+export default function () {
+  const borderWidth = ref(2);
+  const onHoverIndex: { dataSetIndex: number; columnIndex: number } = reactive({
+    dataSetIndex: -1,
+    columnIndex: -1,
+  });
+
+  interface Dataset {
+    data: any;
+    label: string;
+    type: any;
+    fill?: boolean;
+  }
+
+  function getHtmlLegendPlugin(
+    legendContainer: Ref,
+    selectMode: Ref<boolean>,
+    onHoverIndex: any,
+    disableAccessibility: Ref<boolean>,
+    patternsColors: Ref<string[]>,
+    patternsList: Ref<
+      ((
+        hover: boolean,
+        color: string,
+        disableAccessibility: boolean
+      ) => CanvasPattern)[]
+    >,
+  ): HTMLLegendPlugin[] {
+    return [
+      {
+        id: 'htmlLegend',
+        afterUpdate(chart: any) {
+          const ul: HTMLLIElement = getOrCreateLegendList(
+            legendContainer,
+            'column'
+          );
+          ul.style.display = 'flex';
+          ul.style.margin = '1.375rem 1.0625rem';
+          ul.style.flexDirection = 'row-reverse';
+          ul.style.justifyContent = 'flex-end';
+          while (ul.firstChild) {
+            ul.firstChild.remove();
+          }
+          const items: ChartItem[] =
+            chart.options.plugins.legend.labels.generateLabels(chart);
+          items.forEach((item: ChartItem): void => {
+            const li: HTMLElement = createHtmlLegendListElement(
+              chart,
+              selectMode,
+              item.datasetIndex
+            );
+            let liContent: HTMLElement;
+            if (!selectMode.value) {
+              if (item?.lineCap) {
+                liContent = createLegendElementWithSquareArea(item, onHoverIndex);
+              } else {
+                liContent = createLegendElementWithPatterns(
+                  item,
+                  chart,
+                  onHoverIndex,
+                  disableAccessibility.value,
+                  patternsColors.value,
+                  patternsList.value
+                );
+              }
+            } else {
+              liContent = createLegendElementWithCheckbox(
+                chart,
+                item,
+                selectMode,
+                onHoverIndex,
+                disableAccessibility.value
+              );
+            }
+            liContent.style.boxSizing = 'border-box';
+            li.style.marginRight = '10px';
+            li.appendChild(liContent);
+            li.appendChild(createHtmlLegendItemText(item));
+            ul.appendChild(li);
+          });
+        },
+      },
+    ];
+  }
+
+  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
+    );
+  }
+
+  function getOnHoverOptions() {
+    return (
+      _ignore: unknown,
+      activeElements: Array<{ index: number; datasetIndex: number }>
+    ) => {
+      if (activeElements[0] !== undefined) {
+        onHoverIndex.dataSetIndex = activeElements[0].datasetIndex;
+        onHoverIndex.columnIndex = activeElements[0].index;
+      } else {
+        resetOnHoverIndex();
+      }
+    };
+  }
+
+  function resetOnHoverIndex() {
+    onHoverIndex.dataSetIndex = -1;
+    onHoverIndex.columnIndex = -1;
+  }
+
+  // Hack to force the chart to reload on Hover
+  function reloadChart() {
+    borderWidth.value = 3;
+    borderWidth.value = 2;
+  }
+
+  function getMixedDatasets(
+    datasets: Dataset[],
+    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 {
+        type: dataset.type,
+        fill: dataset.type === 'bar' ? null : false,
+        borderWidth: function () {
+          return disableAccessibility ? 1 : borderWithValue;
+        },
+        borderColor: function (context: any) {
+          return disableAccessibility
+            ? '#00000000'
+            : getBorderColor(
+                index,
+                context.index,
+                patternsColors,
+                patternShifting
+              );
+        },
+        backgroundColor: function (context: any) {
+          return getPattern(
+            index,
+            context.index,
+            disableAccessibility,
+            patternsColors,
+            patternsList,
+            patternShifting
+          );
+        },
+        yAxisID: dataset.type === 'bar' ? 'A' : 'B',
+        pointStyle: index % 2 === 0 ? 'rectRot' : 'circle',
+        data: dataset.data,
+        label: dataset.label,
+        pointBackgroundColor: '#FFFFFF',
+        pointRadius: 5,
+        order: datasets.length - index,
+      };
+    });
+  }
+
+  function getBorderColor(
+    dataSetIndex: number,
+    contextIndex: number,
+    patternsColors: string[],
+    patternShifting?: number
+  ) {
+    const index = getPatternIndexWithShift(dataSetIndex, patternShifting);
+    if (displayFullOpacity(dataSetIndex, contextIndex)) {
+      return patternsColors[index];
+    } else {
+      return addAlpha(patternsColors[index], 0.2);
+    }
+  }
+
+  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 patternsList[index](
+        false,
+        patternsColors[index],
+        disableAccessibility
+      );
+    } else {
+      return patternsList[index](
+        true,
+        patternsColors[index],
+        disableAccessibility
+      );
+    }
+  }
+
+  function displayFullOpacity(
+    dataSetIndex: number,
+    contextIndex: number
+  ): boolean {
+    return (
+      nothingHovered() ||
+      columnHovered(dataSetIndex, contextIndex) ||
+      legendHovered(dataSetIndex)
+    );
+  }
+
+  function nothingHovered(): boolean {
+    return onHoverIndex.dataSetIndex < 0;
+  }
+
+  function columnHovered(dataSetIndex: number, contextIndex: number): boolean {
+    return (
+      onHoverIndex.dataSetIndex === dataSetIndex &&
+      onHoverIndex.columnIndex === contextIndex
+    );
+  }
+
+  function legendHovered(dataSetIndex: number): boolean {
+    return (
+      onHoverIndex.dataSetIndex === dataSetIndex && onHoverIndex.columnIndex < 0
+    );
+  }
+
+  return {
+    privateGetHtmlLegendPlugin,
+    getOnHoverOptions,
+    getMixedDatasets,
+    reloadChart,
+    getBorderColor,
+    getPattern,
+    onHoverIndex,
+  };
+}

package/src/services/RadarChartFunctions.ts

@@ -1,6 +1,6 @@
 import type { Chart, RadialLinearScale } from 'chart.js';
 
-export function drawLabels (chart: Chart, props: any) {
+export function drawLabels(chart: Chart, props: any) {
   const ctx = chart.ctx;
   const scale = chart.scales.r as RadialLinearScale;
   const labels = chart.data.labels as string[][];
@@ -14,37 +14,39 @@ export function drawLabels (chart: Chart, props: any) {
     const angle = (scale.getIndexAngle(index) - Math.PI / 2) % (2 * Math.PI);
     const position = scale.getPointPositionForValue(index, scale.max);
 
-    ctx.textAlign = angle <= Math.PI / 2 || angle > 3 * Math.PI / 2 ? 'left' : 'right';
-    let xOffset = angle <= Math.PI / 2 || angle > 3 * Math.PI / 2 ? 15 : -15;
+    ctx.textAlign =
+      angle <= Math.PI / 2 || angle > (3 * Math.PI) / 2 ? 'left' : 'right';
+    let xOffset = angle <= Math.PI / 2 || angle > (3 * Math.PI) / 2 ? 15 : -15;
 
     let yOffset;
     //top or bottom labels
-    if ( angle < 0 || angle > Math.PI) {
+    if (angle < 0 || angle > Math.PI) {
       yOffset = -15;
     } else {
       yOffset = 15;
     }
 
     //bottom labels
-    if ( angle > Math.PI / 4 && angle < 3 * Math.PI / 4) {
+    if (angle > Math.PI / 4 && angle < (3 * Math.PI) / 4) {
       yOffset *= 3;
     }
 
     //top labels left and right
-    if ( angle < -Math.PI / 4 || angle > 5 * Math.PI / 4) {
+    if (angle < -Math.PI / 4 || angle > (5 * Math.PI) / 4) {
       yOffset *= 3;
       xOffset = 0;
     }
 
     // full top label
-    if ( angle > 11 * Math.PI / 8 || angle < -3 * Math.PI / 8){
+    if (angle > (11 * Math.PI) / 8 || angle < (-3 * Math.PI) / 8) {
       ctx.textAlign = 'center';
     }
-    const yPos = position.y + yOffset * (label.length - 1) / 2;
+    const yPos = position.y + (yOffset * (label.length - 1)) / 2;
     ctx.font = '15px Arial';
 
     label.forEach((text, i) => {
-      const color = i === label.length - 1 ? buildColorArray(props)[index] : '#000000';
+      const color =
+        i === label.length - 1 ? buildColorArray(props)[index] : '#000000';
       ctx.fillStyle = color;
 
       const x = position.x + xOffset;
@@ -56,8 +58,8 @@ export function drawLabels (chart: Chart, props: any) {
   ctx.restore();
 }
 
-const buildColorArray = (props: any): string[]=> {
-  return props.areas[0].areaData.map((x: { color: string }) => {
+const buildColorArray = (props: any): string[] => {
+  return props.datasets[0].areaData.map((x: { color: string }) => {
     switch (x.color) {
       case 'red':
         return '#C61112';

package/src/stories/Changelog.mdx

@@ -0,0 +1,6 @@
+import { Meta, Markdown } from "@storybook/blocks";
+import Changelog from "../../CHANGELOG.md?raw";
+
+<Meta title="Changelog" />
+
+<Markdown>{Changelog}</Markdown>