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

package/src/services/ChartsCommonLegend.ts

@@ -1,8 +1,8 @@
-import type {Ref} from 'vue';
-import type {HTMLLegendPlugin} from "../types/Chart";
-import type {ChartOptions} from 'chart.js';
+import type { Ref } from 'vue';
+import type { HTMLLegendPlugin } from '../types/Chart';
+import type { ChartOptions } from 'chart.js';
 import PatternFunctions from './PatternFunctions';
-import {formatValueAndRate} from './FormatUtilities';
+import { formatValueAndRate } from './FormatUtilities';
 import QuestionMarkSvg from '@mozaic-ds/icons/svg/Navigation_Notification_Question_24px.svg';
 
 const { getPatternCanvas } = PatternFunctions();
@@ -14,21 +14,28 @@ export const LEGEND_BOX_POINT_SIZE = 6;
 export const LEGEND_BOX_BORDER = '2px';
 
 export interface Chart {
-  update (): void;
+  update(): void;
 
-  toggleDataVisibility (datasetIndex: number): void;
+  toggleDataVisibility(datasetIndex: number): void;
 
-  isDatasetVisible (datasetIndex: number): boolean;
+  isDatasetVisible(datasetIndex: number): boolean;
 
   getDataVisibility(index: number): boolean;
 
-  setDatasetVisibility (datasetIndex: number, visible: boolean): void;
+  setDatasetVisibility(datasetIndex: number, visible: boolean): void;
 
-  plugins: HTMLLegendPlugin,
+  plugins: HTMLLegendPlugin;
 
-  options: ChartOptions<'radar'> | ChartOptions<'doughnut'> | ChartOptions<'bar'> | ChartOptions<'line'>,
+  options:
+    | ChartOptions<'radar'>
+    | ChartOptions<'doughnut'>
+    | ChartOptions<'bar'>
+    | ChartOptions<'line'>;
 
-  config: { type?: string, data: { labels: string[] ,datasets: unknown[], data?: unknown[] } },
+  config: {
+    type?: string;
+    data: { labels: string[]; datasets: unknown[]; data?: unknown[] };
+  };
 }
 
 export interface ChartItem {
@@ -43,56 +50,110 @@ export interface ChartItem {
   lineCap?: string;
 }
 
-export function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>,  onHoverIndex: any, disableAccessibility: Ref<boolean>, patternsColors: Ref<string[]>, patternsList: Ref<((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[]>, enableHoverFeature: Ref<boolean>, maxValueToDisplay?: number, chartData?: any): HTMLLegendPlugin[] {
-  return [{
-      id: 'htmlLegend',
-      afterUpdate (chart: any) {
+export function getHtmlLegendPlugin(
+  legendContainer: Ref,
+  selectMode: Ref<boolean>,
+  onHoverIndex: any,
+  disableAccessibility: Ref<boolean>,
+  patternsColors: Ref<string[]>,
+  patternsList: Ref<
+    ((
+      hover: boolean,
+      color: string,
+      disableAccessibility: boolean
+    ) => CanvasPattern)[]
+  >,
+  enableHoverFeature: Ref<boolean>,
+  maxValueToDisplay?: number,
+  chartData?: any
+): HTMLLegendPlugin {
+  return {
+    id: 'htmlLegend',
+    afterUpdate(chart: any) {
+      const isDoughnut: boolean = chart.config.type === 'doughnut';
+      const flexDirection = isDoughnut ? 'column' : 'row';
+      const ul: HTMLLIElement = getOrCreateLegendList(
+        legendContainer,
+        flexDirection
+      );
+      ul.style.margin = '1.375rem 1.0625rem';
+      while (ul.firstChild) {
+        ul.firstChild.remove();
+      }
+      const items: ChartItem[] =
+        chart.options.plugins.legend.labels.generateLabels(chart);
+      items.forEach((item: ChartItem): void => {
         const isDoughnut: boolean = chart.config.type === 'doughnut';
-        const flexDirection = isDoughnut ? 'column' : 'row';
-        const ul: HTMLLIElement = getOrCreateLegendList(legendContainer, flexDirection);
-        ul.style.margin = '1.375rem 1.0625rem';
-        while (ul.firstChild) {
-          ul.firstChild.remove();
-        }
-        const items: ChartItem[] = chart.options.plugins.legend.labels.generateLabels(chart);
-        items.forEach((item: ChartItem): void => {
-          const isDoughnut: boolean = chart.config.type === 'doughnut';
-          const index: number = isDoughnut ? item.index : item.datasetIndex;
-          const li: HTMLElement = createHtmlLegendListElement(chart, selectMode, index);
-          if (isDoughnut) {
-            const isOthersElement: boolean = index + 1 === maxValueToDisplay ? true : false;
-            li.style.marginTop = '12px';
-            if (isOthersElement) {
-              li.style.position = 'relative';
-            }
-          } else {
-            li.style.marginRight = '10px'
-          }
-          li.style.width = 'max-content';
-          li.style.cursor = 'pointer';
-          let liContent: HTMLElement;
-          if (!selectMode.value) {
-            liContent = createLegendElementWithPatterns(item, chart, onHoverIndex, disableAccessibility.value, patternsColors.value, patternsList.value, enableHoverFeature.value);
-          } else {
-            liContent = createLegendElementWithCheckbox(chart, item, selectMode, onHoverIndex, patternsColors.value, enableHoverFeature.value);
+        const index: number = isDoughnut ? item.index : item.datasetIndex;
+        const li: HTMLElement = createHtmlLegendListElement(
+          chart,
+          selectMode,
+          index
+        );
+        if (isDoughnut) {
+          const isOthersElement: boolean =
+            index + 1 === maxValueToDisplay ? true : false;
+          li.style.marginTop = '12px';
+          if (isOthersElement) {
+            li.style.position = 'relative';
           }
-          liContent.style.boxSizing = 'border-box';
-          li.appendChild(liContent);
-          li.appendChild(createHtmlLegendItemText(item));
-          if (isDoughnut && maxValueToDisplay && hasOthersTooltipToDisplay(chartData, maxValueToDisplay, index)) {
-            li.appendChild(createTooltipAndItsIcon(chartData, maxValueToDisplay));
-          }
-          ul.appendChild(li);
-        });
-      }
-  }];
+        } else {
+          li.style.marginRight = '10px';
+        }
+        li.style.width = 'max-content';
+        li.style.cursor = 'pointer';
+        let liContent: HTMLElement;
+        if (!selectMode.value) {
+          liContent = createLegendElementWithPatterns(
+            item,
+            chart,
+            onHoverIndex,
+            disableAccessibility.value,
+            patternsColors.value,
+            patternsList.value,
+            enableHoverFeature.value
+          );
+        } else {
+          liContent = createLegendElementWithCheckbox(
+            chart,
+            item,
+            selectMode,
+            onHoverIndex,
+            patternsColors.value,
+            enableHoverFeature.value
+          );
+        }
+        liContent.style.boxSizing = 'border-box';
+        li.appendChild(liContent);
+        li.appendChild(createHtmlLegendItemText(item));
+        if (
+          isDoughnut &&
+          maxValueToDisplay &&
+          hasOthersTooltipToDisplay(chartData, maxValueToDisplay, index)
+        ) {
+          li.appendChild(createTooltipAndItsIcon(chartData, maxValueToDisplay));
+        }
+        ul.appendChild(li);
+      });
+    }
+  };
 }
 
-export function hasOthersTooltipToDisplay (doughnutData: any, maxValueToDisplay: number, index: number) {
-  return doughnutData.data.length > maxValueToDisplay && index === maxValueToDisplay - 1;
+export function hasOthersTooltipToDisplay(
+  doughnutData: any,
+  maxValueToDisplay: number,
+  index: number
+) {
+  return (
+    doughnutData.data.length > maxValueToDisplay &&
+    index === maxValueToDisplay - 1
+  );
 }
 
-export function createTooltipAndItsIcon (doughnutData: any, maxValueToDisplay: number): HTMLDivElement {
+export function createTooltipAndItsIcon(
+  doughnutData: any,
+  maxValueToDisplay: number
+): HTMLDivElement {
   const iconTopWrapper = document.createElement('div');
   const iconWrapper = document.createElement('div');
   const icon = document.createElement('img');
@@ -101,7 +162,8 @@ export function createTooltipAndItsIcon (doughnutData: any, maxValueToDisplay: n
   icon.src = QuestionMarkSvg;
   icon.style.top = '0';
   icon.style.width = '1.5rem';
-  icon.style.filter = 'invert(38%) sepia(19%) saturate(18%) hue-rotate(337deg) brightness(97%) contrast(85%)';
+  icon.style.filter =
+    'invert(38%) sepia(19%) saturate(18%) hue-rotate(337deg) brightness(97%) contrast(85%)';
   iconWrapper.style.position = 'relative';
   iconWrapper.style.display = 'flex';
   const tooltip = createLegendOthersTooltip(doughnutData, maxValueToDisplay);
@@ -117,9 +179,12 @@ export function createTooltipAndItsIcon (doughnutData: any, maxValueToDisplay: n
   return iconTopWrapper;
 }
 
-function createLegendOthersTooltip (doughnutData: any, maxValueToDisplay: number) {
+function createLegendOthersTooltip(
+  doughnutData: any,
+  maxValueToDisplay: number
+) {
   const tooltip = document.createElement('div');
-  tooltip.style.visibility= 'hidden';
+  tooltip.style.visibility = 'hidden';
   tooltip.style.position = 'absolute';
   tooltip.style.zIndex = '10';
   tooltip.style.width = '350px';
@@ -135,9 +200,13 @@ function createLegendOthersTooltip (doughnutData: any, maxValueToDisplay: number
   return tooltip;
 }
 
-function addOthersTooltipLines (doughnutData: any, maxValueToDisplay: number, tooltip: HTMLDivElement) {
-const startIndex = maxValueToDisplay - 1;
-doughnutData.data.slice(startIndex).forEach((_ignore: any, index: number) => {
+function addOthersTooltipLines(
+  doughnutData: any,
+  maxValueToDisplay: number,
+  tooltip: HTMLDivElement
+) {
+  const startIndex = maxValueToDisplay - 1;
+  doughnutData.data.slice(startIndex).forEach((_ignore: any, index: number) => {
     const dataIndex = startIndex + index;
     const textWrapper = document.createElement('div');
     textWrapper.style.display = 'flex';
@@ -147,69 +216,103 @@ doughnutData.data.slice(startIndex).forEach((_ignore: any, index: number) => {
     const label = document.createElement('span');
     label.appendChild(document.createTextNode(doughnutData.labels[dataIndex]));
     const value = document.createElement('span');
-    value.appendChild(document.createTextNode(formatValueAndRate(doughnutData, dataIndex)));
+    value.appendChild(
+      document.createTextNode(formatValueAndRate(doughnutData, dataIndex))
+    );
     textWrapper.appendChild(label);
     textWrapper.appendChild(value);
     tooltip.appendChild(textWrapper);
-  }
-);
+  });
 }
 
-export function createLegendElementWithPatterns
-(item: ChartItem, chart: Chart, onHoverIndex: any | null, disableAccessibility: boolean, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], enableHoverFeature: boolean)
-  : HTMLElement {
-    const isDoughnut: boolean = chart.config.type === 'doughnut';
-    const index: number = isDoughnut ? item.index : item.datasetIndex;
-    const img: HTMLImageElement = new Image();
-    const boxSpan: HTMLElement = createHtmlLegendLine(item, chart.config.type);
-    const pattern: CanvasPattern = patternsList[index](false, patternsColors[index], disableAccessibility);
-    const patternCanvas: HTMLCanvasElement = getPatternCanvas(pattern);
-    img.src = patternCanvas.toDataURL();
-    boxSpan.style.background = `url(${img.src})`;
-    boxSpan.style.backgroundSize = 'cover';
-    boxSpan.style.borderColor = patternsColors[index];
-    boxSpan.style.borderWidth = LEGEND_BOX_BORDER;
+export function createLegendElementWithPatterns(
+  item: ChartItem,
+  chart: Chart,
+  onHoverIndex: any | null,
+  disableAccessibility: boolean,
+  patternsColors: string[],
+  patternsList: ((
+    hover: boolean,
+    color: string,
+    disableAccessibility: boolean
+  ) => CanvasPattern)[],
+  enableHoverFeature: boolean
+): HTMLElement {
+  const isDoughnut: boolean = chart.config.type === 'doughnut';
+  const index: number = isDoughnut ? item.index : item.datasetIndex;
+  const img: HTMLImageElement = new Image();
+  const boxSpan: HTMLElement = createHtmlLegendLine(item, chart.config.type);
+  const pattern: CanvasPattern = patternsList[index](
+    false,
+    patternsColors[index],
+    disableAccessibility
+  );
+  const patternCanvas: HTMLCanvasElement = getPatternCanvas(pattern);
+  img.src = patternCanvas.toDataURL();
+  boxSpan.style.background = `url(${img.src})`;
+  boxSpan.style.backgroundSize = 'cover';
+  boxSpan.style.borderColor = patternsColors[index];
+  boxSpan.style.borderWidth = LEGEND_BOX_BORDER;
 
-    if (enableHoverFeature) {
-      boxSpan.onmouseover = ():void => {
-        isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
-      };
-      boxSpan.onmouseleave = (): void => {
-        isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = -1;
-      };
-    }
-    return boxSpan;
+  if (enableHoverFeature) {
+    boxSpan.onmouseover = (): void => {
+      isDoughnut
+        ? (onHoverIndex.value = index)
+        : (onHoverIndex.dataSetIndex = index);
+    };
+    boxSpan.onmouseleave = (): void => {
+      isDoughnut
+        ? (onHoverIndex.value = null)
+        : (onHoverIndex.dataSetIndex = -1);
+    };
+  }
+  return boxSpan;
 }
 
-export function createLegendElementWithCheckbox
-(chart: Chart, item: ChartItem, selectMode: Ref<boolean>, onHoverIndex: any | null, patternsColors: string[], enableHoverFeature: boolean): HTMLElement {
+export function createLegendElementWithCheckbox(
+  chart: Chart,
+  item: ChartItem,
+  selectMode: Ref<boolean>,
+  onHoverIndex: any | null,
+  patternsColors: string[],
+  enableHoverFeature: boolean
+): HTMLElement {
   const isDoughnut: boolean = chart.config.type === 'doughnut';
   const index: number = isDoughnut ? item.index : item.datasetIndex;
-  const checkbox: HTMLElement = createLegendCheckbox(chart, item, patternsColors);
+  const checkbox: HTMLElement = createLegendCheckbox(
+    chart,
+    item,
+    patternsColors
+  );
   const labels = chart.config.data.labels;
-  const allCheckBoxesVisible: boolean =
-    labels.every((label: string, index: number) => chart.getDataVisibility(index));
-    if (allCheckBoxesVisible) {
-      if (isDoughnut) {
-        selectMode.value = false;
-        onHoverIndex.value = -1;
-      }
-      return checkbox;
+  const allCheckBoxesVisible: boolean = labels.every((_, index: number) =>
+    chart.getDataVisibility(index)
+  );
+  if (allCheckBoxesVisible) {
+    if (isDoughnut) {
+      selectMode.value = false;
+      onHoverIndex.value = -1;
     }
+    return checkbox;
+  }
   if (enableHoverFeature) {
-    checkbox.onmouseover = ():void => {
-      isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
+    checkbox.onmouseover = (): void => {
+      isDoughnut
+        ? (onHoverIndex.value = index)
+        : (onHoverIndex.dataSetIndex = index);
       chart.update();
     };
     checkbox.onmouseleave = (): void => {
-      isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = -1;
+      isDoughnut
+        ? (onHoverIndex.value = null)
+        : (onHoverIndex.dataSetIndex = -1);
       chart.update();
     };
   }
   return checkbox;
 }
 
-export function createHtmlLegendItemText (item: ChartItem) {
+export function createHtmlLegendItemText(item: ChartItem) {
   const textContainer = document.createElement('p');
   textContainer.style.color = item.fontColor;
   textContainer.style.fontSize = `${LEGEND_FONT_SIZE}px`;
@@ -221,7 +324,10 @@ export function createHtmlLegendItemText (item: ChartItem) {
   return textContainer;
 }
 
-export function createHtmlLegendLine (item: ChartItem, type: string | undefined) {
+export function createHtmlLegendLine(
+  item: ChartItem,
+  type: string | undefined
+) {
   const boxSpan = document.createElement('div');
   if (type !== 'doughnut') {
     boxSpan.style.background = 'rgba(0, 0, 0, 0.1)';
@@ -239,7 +345,7 @@ export function createHtmlLegendLine (item: ChartItem, type: string | undefined)
   return boxSpan;
 }
 
-export function createHtmlLegendDatasetSquare (item: ChartItem) {
+export function createHtmlLegendDatasetSquare(item: ChartItem) {
   const divPoint = document.createElement('div');
   divPoint.style.height = LEGEND_BOX_POINT_SIZE + 'px';
   divPoint.style.width = LEGEND_BOX_POINT_SIZE + 'px';
@@ -250,8 +356,11 @@ export function createHtmlLegendDatasetSquare (item: ChartItem) {
   return divPoint;
 }
 
-export function createHtmlLegendListElement
-(chart: Chart, selectMode: Ref, elementIndex: number) {
+export function createHtmlLegendListElement(
+  chart: Chart,
+  selectMode: Ref,
+  elementIndex: number
+) {
   const li: HTMLElement = document.createElement('li');
   li.style.alignItems = 'center';
   li.style.cursor = selectMode.value ? '' : 'pointer';
@@ -269,41 +378,57 @@ export function createHtmlLegendListElement
   return li;
 }
 
-export function addCheckboxStyle (isDataSetVisible: boolean, item: ChartItem, checkbox: Element, patternColor: string) {
+export function addCheckboxStyle(
+  isDataSetVisible: boolean,
+  item: ChartItem,
+  checkbox: Element,
+  patternColor: string
+) {
   let backgroundColor = '#fff';
   let borderColor = '#666';
   if (isDataSetVisible) {
     //Default white for patterns chart
-    backgroundColor = isDefaultWhiteColor(item.strokeStyle)? patternColor: item.strokeStyle;
-    borderColor = isDefaultWhiteColor(item.strokeStyle)? patternColor: item.strokeStyle;
+    backgroundColor = isDefaultWhiteColor(item.strokeStyle)
+      ? patternColor
+      : item.strokeStyle;
+    borderColor = isDefaultWhiteColor(item.strokeStyle)
+      ? patternColor
+      : item.strokeStyle;
     checkbox.setAttribute('checked', '' + isDataSetVisible);
   }
   checkbox.setAttribute('class', 'mc-checkbox__input');
-  checkbox.setAttribute('style', `background-color: ${backgroundColor};
+  checkbox.setAttribute(
+    'style',
+    `background-color: ${backgroundColor};
     min-width: ${LEGEND_BOX_SIZE};
     min-height: ${LEGEND_BOX_SIZE};
     margin-right: ${LEGEND_LABEL_LEFT_MARGIN};
-    border-color: ${borderColor};`);
+    border-color: ${borderColor};`
+  );
 }
 
-export function createLegendCheckbox (chart: Chart, item: ChartItem, patternsColors: string[]) {
+export function createLegendCheckbox(
+  chart: Chart,
+  item: ChartItem,
+  patternsColors: string[]
+) {
   const isDoughnut: boolean = chart.config.type === 'doughnut';
   const index: number = isDoughnut ? item.index : item.datasetIndex;
   const checkbox = document.createElement('input');
   checkbox.setAttribute('type', 'checkbox');
   checkbox.setAttribute('data-test-id', `legend-checkbox-${index}`);
   const isDataSetVisible = isChartDataVisible(chart, index);
-  const patternColor = patternsColors? patternsColors[index]:undefined;
+  const patternColor = patternsColors ? patternsColors[index] : undefined;
   addCheckboxStyle(isDataSetVisible, item, checkbox, patternColor as string);
   return checkbox;
 }
 
-function isMonoDataSetChart (chart: Chart) {
+function isMonoDataSetChart(chart: Chart) {
   const { type } = chart.config;
   return type === 'pie' || type === 'doughnut';
 }
 
-function getChartsData (chart: any) {
+function getChartsData(chart: any) {
   let dataSets: unknown[] = chart.config.data.datasets;
   if (isMonoDataSetChart(chart)) {
     dataSets = chart.config.data.datasets[0].data;
@@ -311,7 +436,11 @@ function getChartsData (chart: any) {
   return dataSets;
 }
 
-export function hideAllButThis (chart: Chart, elementIndex: number, selectMode: Ref) {
+export function hideAllButThis(
+  chart: Chart,
+  elementIndex: number,
+  selectMode: Ref
+) {
   if (!selectMode.value) {
     const dataSets: unknown[] = getChartsData(chart);
     selectMode.value = true;
@@ -323,7 +452,7 @@ export function hideAllButThis (chart: Chart, elementIndex: number, selectMode:
   }
 }
 
-function allDataVisible (chart: Chart): boolean {
+function allDataVisible(chart: Chart): boolean {
   let allVisible = true;
   const chartsData: unknown[] = getChartsData(chart);
   chartsData.forEach((_data, dataIndex) => {
@@ -340,11 +469,18 @@ function isChartDataVisible(chart: Chart, dataIndex: number): boolean {
   }
 }
 
-export function switchItemVisibility (chart: Chart, elementIndex: number, selectMode?: Ref) {
+export function switchItemVisibility(
+  chart: Chart,
+  elementIndex: number,
+  selectMode?: Ref
+) {
   if (isMonoDataSetChart(chart)) {
     chart.toggleDataVisibility(elementIndex);
   } else {
-    chart.setDatasetVisibility(elementIndex, !chart.isDatasetVisible(elementIndex));
+    chart.setDatasetVisibility(
+      elementIndex,
+      !chart.isDatasetVisible(elementIndex)
+    );
   }
 
   if (selectMode && allDataVisible(chart)) {
@@ -353,8 +489,10 @@ export function switchItemVisibility (chart: Chart, elementIndex: number, select
   chart.update();
 }
 
-
-export function createLegendElementWithSquareArea (item: ChartItem, mainSerieFirstDataset?: boolean,) {
+export function createLegendElementWithSquareArea(
+  item: ChartItem,
+  mainSerieFirstDataset?: boolean
+) {
   const liContent = createHtmlLegendLine(item, '');
   const divPoint = createHtmlLegendDatasetSquare(item);
   const index = item.index || item.datasetIndex;
@@ -362,16 +500,22 @@ export function createLegendElementWithSquareArea (item: ChartItem, mainSerieFir
   divPoint.style.width = '10px';
   divPoint.style.height = '10px';
   if (index % 2 === 0) {
-    mainSerieFirstDataset ? divPoint.style.borderRadius = '25px' : divPoint.style.transform = 'rotate(45deg)';
+    mainSerieFirstDataset
+      ? (divPoint.style.borderRadius = '25px')
+      : (divPoint.style.transform = 'rotate(45deg)');
   } else {
-    mainSerieFirstDataset ? divPoint.style.transform = 'rotate(45deg)' : divPoint.style.borderRadius = '25px';
+    mainSerieFirstDataset
+      ? (divPoint.style.transform = 'rotate(45deg)')
+      : (divPoint.style.borderRadius = '25px');
   }
   liContent.appendChild(divPoint);
   return liContent;
 }
 
-
-export function getOrCreateLegendList (legendContainer: Ref, flexDirection: string) {
+export function getOrCreateLegendList(
+  legendContainer: Ref,
+  flexDirection: string
+) {
   let listContainer = legendContainer.value?.querySelector('ul');
   if (!listContainer) {
     listContainer = document.createElement('ul');
@@ -384,6 +528,6 @@ export function getOrCreateLegendList (legendContainer: Ref, flexDirection: stri
   return listContainer;
 }
 
-function isDefaultWhiteColor(color: string){
+function isDefaultWhiteColor(color: string) {
   return color === '#00000000';
-}
+}

package/src/services/ColorFunctions.ts

@@ -1,4 +1,4 @@
 export function addAlpha(color: string, opacity: number) {
   const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
   return color + _opacity.toString(16).toUpperCase();
-}
+}