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

package/src/services/DoughnutChartFunctions.ts

@@ -1,14 +1,16 @@
-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 { addAlpha } from "./ColorFunctions";
+import { addAlpha } from './ColorFunctions';
+import { DoughnutData, DoughnutPlugin } from '@/types/DoughnutData';
 
 export default function () {
   const doughnutRef: Ref = ref(null);
   const onHoverIndex: Ref<number | null> = ref(null);
   const backgroundColor: Ref<CanvasPattern[] | null> = ref(null);
+  const centeredLabel: Ref = ref(null);
 
   function privateGetHtmlLegendPlugin(
     legendContainer: Ref,
@@ -62,7 +64,10 @@ export default function () {
     }
   }
 
-  function getBorderColor(patternsColors: string[], enableHoverFeature: boolean): string[] {
+  function getBorderColor(
+    patternsColors: string[],
+    enableHoverFeature: boolean
+  ): string[] {
     if (onHoverIndex.value !== null && enableHoverFeature) {
       return patternsColors.map((color, index) =>
         onHoverIndex.value === index ? color : addAlpha(color, 0.2)
@@ -86,9 +91,34 @@ export default function () {
     return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
   };
 
+  function getCenteredLabelPlugin(
+    doughnutData: DoughnutData[]
+  ): DoughnutPlugin {
+    return {
+      id: 'centeredLabelPlugin',
+      afterDatasetDraw: (chart) => {
+        const selectedIndexes: Number[] = [];
+        const arcElements = chart.getDatasetMeta(0).data;
+
+        arcElements.forEach((arcElement: any, index: Number) => {
+          if (arcElement.startAngle !== arcElement.endAngle) {
+            selectedIndexes.push(index);
+          }
+        });
+
+        const total = (chart as any)._metasets[0]?._dataset?.raw_value
+          ?.filter((_: any, index: Number) => selectedIndexes.includes(index))
+          .reduce((acc: number, currentValue: any) => acc + currentValue, 0);
+
+        const unit = doughnutData[0].unit ?? '';
+        centeredLabel.value = `${formatWithThousandsSeprators(total)}${unit}`;
+      }
+    };
+  }
+
   function getDoughnutLabels(
     labels: string[],
-    data: any[],
+    data: DoughnutData[],
     maxValues: number,
     othersLabel: string
   ) {
@@ -107,7 +137,7 @@ export default function () {
     );
   }
 
-  function groupDataAfterNthValue(data: any, maxValues: number): any[] {
+  function groupDataAfterNthValue(data: DoughnutData[], maxValues: number) {
     if (maxValues < 1) {
       return data;
     }
@@ -115,15 +145,12 @@ export default function () {
     if (data.length > maxValues) {
       truncatedData = truncatedData.slice(0, maxValues);
       truncatedData[maxValues - 1] = data.slice(maxValues).reduce(
-        (result: any, current: any) => {
+        (result, current) => {
           result.rate += current.rate;
           result.value += current.value;
           return result;
         },
-        {
-          rate: data[maxValues - 1].rate,
-          value: data[maxValues - 1].value,
-        }
+        { ...data[maxValues - 1] }
       );
     }
     return truncatedData;
@@ -140,5 +167,7 @@ export default function () {
     getBorderColor,
     backgroundColor,
     doughnutRef,
+    getCenteredLabelPlugin,
+    centeredLabel
   };
 }

package/src/services/FormatUtilities.ts

@@ -1,30 +1,44 @@
-export function formatTicks (val: number, unit?: string): string {
+export function formatTicks(val: number, unit?: string): string {
   const fixedValue = parseInt(val.toFixed());
   return `${new Intl.NumberFormat().format(fixedValue)}${unit ? ' ' + unit : ''}`;
 }
 
-export function formatWithThousandsSeprators (value: number) {
-  return Math.abs(Number(value)) >= 1.0e+6
-    ? new Intl.NumberFormat().format(parseFloat((Number(value) / 1.0e+6).toFixed(2))) + ' M'
-    : Math.abs(Number(value)) >= 1.0e+3
-      ? new Intl.NumberFormat().format(parseFloat((Number(value) / 1.0e+3).toFixed(2))) + ' K'
-      : new Intl.NumberFormat().format(parseFloat((Number(value)).toFixed(2)));
+export function formatWithThousandsSeprators(value: number) {
+  if (Math.abs(Number(value)) >= 1.0e6) {
+    return formatDecimalNumber(value / 1.0e6) + ' M';
+  } else if (Math.abs(Number(value)) >= 1.0e3) {
+    return formatDecimalNumber(value / 1.0e3) + ' K';
+  } else {
+    return formatDecimalNumber(value);
+  }
 }
 
-export function numberWithThousandSeparators (value: string, unit?: string) {
+function formatDecimalNumber(value: number) {
+  return new Intl.NumberFormat(
+    new Intl.NumberFormat().resolvedOptions().locale,
+    {
+      style: 'decimal',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }
+  ).format(value);
+}
+
+// Not used in the codebase
+export function numberWithThousandSeparators(value: string, unit?: string) {
   const x = parseFloat(value).toFixed(2);
   const formattedValue = x.replace(/\B(?=(\d{3}){1,5}(?!\d))/g, ' ');
   return unit ? formattedValue + ' ' + unit : formattedValue;
 }
 
-
-export function getPatternIndexWithShift (dataSetIndex: number, patternShifting?: number) {
-  return patternShifting
-    ? (dataSetIndex + patternShifting) % 6
-    : dataSetIndex;
+export function getPatternIndexWithShift(
+  dataSetIndex: number,
+  patternShifting?: number
+) {
+  return patternShifting ? (dataSetIndex + patternShifting) % 6 : dataSetIndex;
 }
 
-export function formatValueAndRate (doughnutData: any, dataIndex: number) {
+export function formatValueAndRate(doughnutData: any, dataIndex: number) {
   const textValue = `${formatWithThousandsSeprators(doughnutData.data[dataIndex].value)} (${formatWithThousandsSeprators(doughnutData.data[dataIndex].rate)}%)`;
   return textValue;
 }

package/src/services/GenericTooltipService.ts

@@ -11,42 +11,42 @@ type BodyItem = {
 };
 
 export type TooltipElements = {
-  chartType: TooltipChartType,
-  firstLineLabel?: string,
-  secondLineLabel?: string,
-  patternShifting?: number
-}
+  chartType: TooltipChartType;
+  firstLineLabel?: string;
+  secondLineLabel?: string;
+  patternShifting?: number;
+};
 
 type LabelColors = {
   backgroundColor: unknown;
   borderColor: unknown;
-}
+};
 
 type PointStyle = {
   pointStyle: unknown;
   rotation: number;
-}
+};
 
 // ../..ts-ignore
 export type Context = {
   chart: {
     canvas: HTMLElement;
-    tooltip?:{
-      x: number,
-      y: number
-    }
+    tooltip?: {
+      x: number;
+      y: number;
+    };
   };
   replay?: unknown;
   tooltip: {
     dataPoints: {
       dataset?: {
-        type?: string
-      },
-      dataIndex?: number,
-      datasetIndex?: number,
-      raw: any
+        type?: string;
+      };
+      dataIndex?: number;
+      datasetIndex?: number;
+      raw: any;
     }[];
-    opacity : number;
+    opacity: number;
     body: {
       after: string[];
       before: string[];
@@ -58,10 +58,9 @@ export type Context = {
     caretX: number;
     caretY: number;
   };
-}
+};
 
 export class GenericTooltipService {
-
   chartType = '';
   datasetIndex = 0;
   dataIndex = 0;
@@ -71,14 +70,18 @@ export class GenericTooltipService {
   yValue = '';
   patternShifting = 0;
 
-  createTooltip (
+  createTooltip(
     context: Context,
-    retrieveData : (context: Context) => string,
+    retrieveData: (context: Context) => string,
     tooltipInputElements: TooltipElements,
     patternsColors: string[],
-    patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[],
-    disableAccessibility: boolean = false,
-    ) {
+    patternsList: ((
+      hover: boolean,
+      color: string,
+      disableAccessibility: boolean
+    ) => CanvasPattern)[],
+    disableAccessibility: boolean = false
+  ) {
     if (!context.tooltip.dataPoints) {
       return;
     }
@@ -89,7 +92,9 @@ export class GenericTooltipService {
     this.chartType = tooltipInputElements.chartType;
     this.dataToDisplay = retrieveData(context);
     this.patternShifting = tooltipInputElements.patternShifting || 0;
-    let tooltipEl = document.querySelector('#chartjs-tooltip') as HTMLElement | null;
+    let tooltipEl = document.querySelector(
+      '#chartjs-tooltip'
+    ) as HTMLElement | null;
 
     if (!tooltipEl) {
       tooltipEl = this.createNewTooltipElement();
@@ -111,7 +116,10 @@ export class GenericTooltipService {
       style += 'padding: 10px 20px';
 
       const innerHtml = `<div style="${style}" class="tooltipTitle">`;
-      const body = this.chartType === 'DOUGHNUT' ? [tooltipModel.title[0].split('(')[0].trim()]: bodyLines[0];
+      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;
@@ -119,9 +127,11 @@ export class GenericTooltipService {
       if (this.chartType === 'RADAR' || this.chartType === 'LINE_CHART') {
         legendIconStyle = this.createLegendStyle(context);
         legendInnerStyle = this.createLegendInnerStyle(context);
-      } else if (this.chartType === 'BAR_CHART' ||
-                 this.chartType === 'DETAILS_BAR_CHART' ||
-                 this.chartType === 'DOUGHNUT') {
+      } else if (
+        this.chartType === 'BAR_CHART' ||
+        this.chartType === 'DETAILS_BAR_CHART' ||
+        this.chartType === 'DOUGHNUT'
+      ) {
         legendIconStyle = this.createPatternLegendStyle(context);
       } else if (this.chartType === 'MIXED_BAR_LINE_CHART') {
         if (datasetType === 'bar') {
@@ -149,12 +159,15 @@ export class GenericTooltipService {
     this.handleTooltipPosition(context, tooltipModel, tooltipEl);
   }
 
-  protected handleTooltipPosition
-  (context: Context, tooltipModel: { caretX: number, caretY: number }, tooltipEl: HTMLElement) {
+  protected handleTooltipPosition(
+    context: Context,
+    tooltipModel: { caretX: number; caretY: number },
+    tooltipEl: HTMLElement
+  ) {
     const position = context.chart.canvas.getBoundingClientRect();
     const screenWidth = window.innerWidth;
-    const left = position.left + window.pageXOffset + tooltipModel.caretX;
-    const top = position.top + window.pageYOffset + tooltipModel.caretY;
+    const left = position.left + window.scrollX + tooltipModel.caretX;
+    const top = position.top + window.scrollY + tooltipModel.caretY;
 
     tooltipEl.style.left = left + 'px';
     tooltipEl.style.top = top + 'px';
@@ -167,11 +180,12 @@ export class GenericTooltipService {
     tooltipEl.style.pointerEvents = 'none';
 
     if (tooltipEl.getBoundingClientRect().width + left > screenWidth) {
-      tooltipEl.style.left = left - tooltipEl.getBoundingClientRect().width + 'px';
+      tooltipEl.style.left =
+        left - tooltipEl.getBoundingClientRect().width + 'px';
     }
   }
 
-  protected createNewTooltipElement () {
+  protected createNewTooltipElement() {
     const tooltipEl = document.createElement('div');
     tooltipEl.id = 'chartjs-tooltip';
     tooltipEl.style.backgroundColor = 'white';
@@ -183,17 +197,17 @@ export class GenericTooltipService {
     return tooltipEl;
   }
 
-  createPatternLegendStyle (context: Context) {
+  createPatternLegendStyle(context: Context) {
     return this.createCommonLegendSquareStyle(context);
   }
 
-  createLegendStyle (context: Context) {
+  createLegendStyle(context: Context) {
     let legendIconStyle = `background-color:${context.tooltip.labelColors[0].backgroundColor}`;
     legendIconStyle += this.createCommonLegendSquareStyle(context);
     return legendIconStyle;
   }
 
-  private createCommonLegendSquareStyle (context: Context) {
+  private createCommonLegendSquareStyle(context: Context) {
     let style = `;border: 2px solid ${context.tooltip.labelColors[0].borderColor}`;
     style += ';min-height: 20px';
     style += ';min-width: 20px';
@@ -206,7 +220,7 @@ export class GenericTooltipService {
     return style;
   }
 
-  createLegendInnerStyle (context: Context) {
+  createLegendInnerStyle(context: Context) {
     let legendIconInnerStyle = 'height: 12px';
     legendIconInnerStyle += ';width: 12px';
     legendIconInnerStyle += ';background-color: #FFF';
@@ -220,7 +234,7 @@ export class GenericTooltipService {
     return legendIconInnerStyle;
   }
 
-  addLegendToDom (
+  addLegendToDom(
     innerHTMLtext: string,
     legendIconStyle: string,
     legendIconInnerStyle: string,
@@ -228,25 +242,45 @@ export class GenericTooltipService {
     style: string,
     tooltipEl: HTMLElement,
     patternsColors: string[],
-    patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[],
+    patternsList: ((
+      hover: boolean,
+      color: string,
+      disableAccessibility: boolean
+    ) => CanvasPattern)[],
     disableAccessibility: boolean = false,
     datasetType?: string
-    ) {
-      let innerHtml = innerHTMLtext;
-      let legendImage = `<div class="legendIcon" style="${legendIconStyle}">`;
-      const legendSubImage = `<div style="${legendIconInnerStyle}"></div>`;
-      legendImage += `${legendSubImage}</div>`;
-
-      const innerHtmlToAdd = this.setInnerHtmlToAdd(body, style, legendImage);
-      innerHtml += innerHtmlToAdd;
-      const tableRoot = tooltipEl?.querySelector('.tooltipCtn') as HTMLElement | null;
-      if (tableRoot?.innerHTML != null) {
-        datasetType ? this.setInnerHtmlAndPattern(tableRoot, innerHtml, patternsColors, patternsList, disableAccessibility, datasetType)
-        : this.setInnerHtmlAndPattern(tableRoot, innerHtml, patternsColors, patternsList, disableAccessibility);
-      }
+  ) {
+    let innerHtml = innerHTMLtext;
+    let legendImage = `<div class="legendIcon" style="${legendIconStyle}">`;
+    const legendSubImage = `<div style="${legendIconInnerStyle}"></div>`;
+    legendImage += `${legendSubImage}</div>`;
+
+    const innerHtmlToAdd = this.setInnerHtmlToAdd(body, style, legendImage);
+    innerHtml += innerHtmlToAdd;
+    const tableRoot = tooltipEl?.querySelector(
+      '.tooltipCtn'
+    ) as HTMLElement | null;
+    if (tableRoot?.innerHTML != null) {
+      datasetType
+        ? this.setInnerHtmlAndPattern(
+            tableRoot,
+            innerHtml,
+            patternsColors,
+            patternsList,
+            disableAccessibility,
+            datasetType
+          )
+        : this.setInnerHtmlAndPattern(
+            tableRoot,
+            innerHtml,
+            patternsColors,
+            patternsList,
+            disableAccessibility
+          );
     }
+  }
 
-  setInnerHtmlToAdd (body: Array<string>, style: string, legendImage: string) {
+  setInnerHtmlToAdd(body: Array<string>, style: string, legendImage: string) {
     const legendText = body[0].split(':')[0];
     const fontProperties = 'font-family: Arial; font-size: 16px';
     const spanText = `<span style="${fontProperties}">${legendText}</span>`;
@@ -259,7 +293,7 @@ export class GenericTooltipService {
     }
   }
 
-  returnDoughnutHtml (legendImage: string, spanText: string) {
+  returnDoughnutHtml(legendImage: string, spanText: string) {
     const fontProperties = 'font-family: Arial; font-size: 16px';
     const legendText = `<span style="${fontProperties}">${spanText.split('(')[0]}</span>`;
     let doughnutHtml = `<div style="${fontProperties}; display: flex; align-items: center; justify-content: space-between">`;
@@ -269,7 +303,7 @@ export class GenericTooltipService {
     return doughnutHtml;
   }
 
-  returnRadarHtml (style: string, legendImage: string, spanText: string) {
+  returnRadarHtml(style: string, legendImage: string, spanText: string) {
     const fontProperties = 'font-family: Arial; font-size: 16px';
     let radarHtml = `<div style="${fontProperties}; display: flex; align-items: center;">${legendImage + spanText}</div>`;
     radarHtml += '</div>';
@@ -282,7 +316,11 @@ export class GenericTooltipService {
     return radarHtml;
   }
 
-  returnDetailsBarchartHtml (style: string, legendImage: string, spanText: string) {
+  returnDetailsBarchartHtml(
+    style: string,
+    legendImage: string,
+    spanText: string
+  ) {
     const fontProperties = 'font-family: Arial; font-size: 16px';
     let barChartHtml = `<div style="${fontProperties}; display: flex; align-items: center;">${legendImage + spanText}</div>`;
     barChartHtml += '</div>';
@@ -292,15 +330,25 @@ export class GenericTooltipService {
     barChartHtml += '</div>';
 
     barChartHtml += `<div style="${fontProperties}; ${style}; border-: none; display:flex; justify-content: space-between;">`;
-    barChartHtml += `<div>${(this.yValue)}</div>`;
+    barChartHtml += `<div>${this.yValue}</div>`;
     barChartHtml += `<div style="margin-left: 20px;">${this.dataToDisplay}</div>`;
     barChartHtml += '</div>';
 
     return barChartHtml;
   }
 
-
-  setInnerHtmlAndPattern(tableRoot: HTMLElement, innerHtml: string, patternsColors: string[], patternsList: ((hover: boolean, color: string, disableAccessibility: boolean) => CanvasPattern)[], disableAccessibility: boolean = false, datasetType?: string) {
+  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();
@@ -313,15 +361,27 @@ export class GenericTooltipService {
       index = this.datasetIndex + 1;
     }
     const patternIndex = getPatternIndexWithShift(index, this.patternShifting);
-    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);
+    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();
       legendIconHtml.style.backgroundImage = `url(${img.src})`;
     }
   }
 
-  getBody (bodyItem :BodyItem) {
+  getBody(bodyItem: BodyItem) {
     return bodyItem.lines;
   }
 }

package/src/services/MixedBarLineFunctions.ts

@@ -9,7 +9,7 @@ import {
   createLegendElementWithCheckbox,
   createHtmlLegendItemText,
   createLegendElementWithSquareArea,
-  type ChartItem,
+  type ChartItem
 } from './ChartsCommonLegend';
 
 const { getPatternIndexWithShift } = PatternFunctions();
@@ -18,7 +18,7 @@ export default function () {
   const borderWidth = ref(2);
   const onHoverIndex: { dataSetIndex: number; columnIndex: number } = reactive({
     dataSetIndex: -1,
-    columnIndex: -1,
+    columnIndex: -1
   });
 
   interface Dataset {
@@ -60,46 +60,48 @@ export default function () {
           }
           const items: ChartItem[] =
             chart.options.plugins.legend.labels.generateLabels(chart);
-          items.sort((a,b) => b.datasetIndex - a.datasetIndex).forEach((item: ChartItem): void => {
-            const li: HTMLElement = createHtmlLegendListElement(
-              chart,
-              selectMode,
-              item.datasetIndex
-            );
-            let liContent: HTMLElement;
-            if (!selectMode.value) {
-              if (item?.lineCap) {
-                liContent = createLegendElementWithSquareArea(item);
+          items
+            .sort((a, b) => b.datasetIndex - a.datasetIndex)
+            .forEach((item: ChartItem): void => {
+              const li: HTMLElement = createHtmlLegendListElement(
+                chart,
+                selectMode,
+                item.datasetIndex
+              );
+              let liContent: HTMLElement;
+              if (!selectMode.value) {
+                if (item?.lineCap) {
+                  liContent = createLegendElementWithSquareArea(item);
+                } else {
+                  liContent = createLegendElementWithPatterns(
+                    item,
+                    chart,
+                    { datasetIndex: -1 },
+                    disableAccessibility.value,
+                    patternsColors.value,
+                    patternsList.value,
+                    false
+                  );
+                }
               } else {
-                liContent = createLegendElementWithPatterns(
-                  item,
+                liContent = createLegendElementWithCheckbox(
                   chart,
+                  item,
+                  selectMode,
                   { datasetIndex: -1 },
-                  disableAccessibility.value,
                   patternsColors.value,
-                  patternsList.value,
                   false
                 );
               }
-            } else {
-              liContent = createLegendElementWithCheckbox(
-                chart,
-                item,
-                selectMode,
-                { datasetIndex: -1 },
-                patternsColors.value,
-                false
-              );
-            }
-            liContent.style.boxSizing = 'border-box';
-            li.style.marginRight = '10px';
-            li.style.marginBottom = '2px';
-            li.appendChild(liContent);
-            li.appendChild(createHtmlLegendItemText(item));
-            ul.appendChild(li);
-          });
-        },
-      },
+              liContent.style.boxSizing = 'border-box';
+              li.style.marginRight = '10px';
+              li.style.marginBottom = '2px';
+              li.appendChild(liContent);
+              li.appendChild(createHtmlLegendItemText(item));
+              ul.appendChild(li);
+            });
+        }
+      }
     ];
   }
 
@@ -151,13 +153,13 @@ export default function () {
           return disableAccessibility && isBarChart
             ? '#00000000'
             : isBarChart
-            ? getBorderColor(
-                index,
-                context.index,
-                patternsColors,
-                patternShifting
-              )
-            : patternsColors[index%patternsColors.length];
+              ? getBorderColor(
+                  index,
+                  context.index,
+                  patternsColors,
+                  patternShifting
+                )
+              : patternsColors[index % patternsColors.length];
         },
         backgroundColor: function (context: any) {
           return getPattern(
@@ -175,7 +177,7 @@ export default function () {
         label: dataset.label,
         pointBackgroundColor: '#FFFFFF',
         pointRadius: 5,
-        order: dataset.type === 'line' ? 0 : 1,
+        order: dataset.type === 'line' ? 0 : 1
       };
     });
   }
@@ -255,6 +257,6 @@ export default function () {
     getMixedDatasets,
     getBorderColor,
     getPattern,
-    onHoverIndex,
+    onHoverIndex
   };
 }