@mozaic-ds/chart 0.1.0-beta.0

package/src/services/BarChartFunctions.ts

@@ -0,0 +1,126 @@
+import { reactive, ref } from 'vue';
+import type { Ref } from 'vue';
+import {
+  getHtmlLegendPlugin
+} from './ChartsCommonLegend';
+import PatternFunctions from './PatternFunctions';
+import ChartDesign from './patterns/ChartDesign';
+
+const { getPatternIndexWithShift } = PatternFunctions();
+const {
+  patternsColors,
+  patternsColorsLowerOpacity,
+  patternsStandardList
+} = ChartDesign();
+
+interface Dataset {
+  data: any,
+  label: any,
+}
+
+export default function () {
+  const borderWidth = ref(3);
+  const barChartRef = ref(null as any);
+  const onHoverIndex: { dataSetIndex: number, columnIndex: number } = reactive({
+    dataSetIndex: -1,
+    columnIndex: -1
+  });
+
+
+  function privateGetHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>) {
+    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex);
+  }
+  // Hack to force the chart to reload on Hover
+  function reloadChart () {
+    borderWidth.value = 4;
+    borderWidth.value = 3;
+  }
+
+  function getStackedDatasets (datasets: Dataset[], stackDatasets: boolean, patternShifting?: number) {
+    return datasets.map((dataset, index) => {
+      return {
+        borderColor: function (context: any) {
+          return getBorderColor(index, context.index, patternShifting);
+        },
+        backgroundColor: function (context: any) {
+          return getPattern(index, context.index, patternShifting);
+        },
+        borderWidth: borderWidth.value,
+        data: dataset.data,
+        label: dataset.label,
+        stack: `Stack ${stackDatasets ? '0' : index}`
+      };
+    });
+  }
+
+  function getDatasets (firstDataSet: Dataset, secondDataSet: Dataset) {
+    const getStacked = getStackedDatasets([firstDataSet, secondDataSet], false);
+    return getStacked;
+  }
+
+  function getBorderColor (dataSetIndex: number, contextIndex: number, patternShifting?: number) {
+    const index = getPatternIndexWithShift(dataSetIndex, patternShifting);
+    if (displayFullOpacity(dataSetIndex, contextIndex)) {
+      return patternsColors[index];
+    } else {
+      return patternsColorsLowerOpacity[index];
+    }
+  }
+
+  function getPattern (dataSetIndex: number, contextIndex: number, patternShifting?: number) {
+    const index = getPatternIndexWithShift(dataSetIndex, patternShifting);
+    if (displayFullOpacity(dataSetIndex, contextIndex)) {
+      return patternsStandardList[index](false);
+    } else {
+      return patternsStandardList[index](true);
+    }
+  }
+
+  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;
+  }
+
+  function displayFullOpacity (dataSetIndex: number, contextIndex: number): boolean {
+    return nothingHovered() ||
+      columnHovered(dataSetIndex, contextIndex) ||
+      legendHovered(dataSetIndex);
+  }
+
+  function resetOnHoverIndex () {
+    onHoverIndex.dataSetIndex = -1;
+    onHoverIndex.columnIndex = -1;
+  }
+
+  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();
+      }
+    };
+  }
+
+  return {
+    onHoverIndex,
+    reloadChart,
+    getDatasets,
+    getStackedDatasets,
+    getOnHoverOptions,
+    getBorderColor,
+    getPattern,
+    privateGetHtmlLegendPlugin,
+    getPatternIndexWithShift,
+    barChartRef,
+    borderWidth,
+  };
+}

package/src/services/ChartsCommonLegend.ts

@@ -0,0 +1,366 @@
+import type { Ref } from 'vue';
+import type { HTMLLegendPlugin } from "../types/Chart";
+import type { ChartOptions } from 'chart.js';
+import ChartDesign from './patterns/ChartDesign';
+import PatternFunctions from './PatternFunctions';
+import { formatValueAndRate } from './FormatUtilities';
+import QuestionMarkSvg from '@mozaic-ds/icons/svg/Navigation_Notification_Question_24px.svg';
+
+const {
+  patternsColors,
+  patternsStandardList
+} = ChartDesign();
+const { getPatternCanvas } = PatternFunctions();
+
+export const LEGEND_FONT_SIZE = 14;
+export const LEGEND_LABEL_LEFT_MARGIN = '6px';
+export const LEGEND_BOX_SIZE = 18;
+export const LEGEND_BOX_POINT_SIZE = 6;
+
+export interface Chart {
+  update (): void;
+
+  toggleDataVisibility (datasetIndex: number): void;
+
+  isDatasetVisible (datasetIndex: number): boolean;
+
+  getDataVisibility(index: number): boolean;
+
+  setDatasetVisibility (datasetIndex: number, visible: boolean): void;
+
+  plugins: HTMLLegendPlugin,
+
+  options: ChartOptions<'radar'> | ChartOptions<'doughnut'> | ChartOptions<'bar'> | ChartOptions<'line'>,
+
+  config: { type?: string, data: { labels: string[] ,datasets: unknown[], data?: unknown[] } },
+}
+
+export interface ChartItem {
+  fontColor: string,
+  hidden: boolean,
+  text: string,
+  fillStyle: string,
+  strokeStyle: string,
+  lineWidth: number
+  datasetIndex: number,
+  index: number
+}
+
+export function getHtmlLegendPlugin(legendContainer: Ref, selectMode: Ref<boolean>,  onHoverIndex: any, 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 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 = '12px'
+          }
+          li.style.width = 'max-content';  
+          li.style.cursor = 'pointer';  
+          let liContent: HTMLElement;
+          if (!selectMode.value) {
+            liContent = createLegendElementWithPatterns(item, chart, onHoverIndex);
+          } else {
+            liContent = createLegendElementWithCheckbox(chart, item, selectMode, onHoverIndex);
+          }
+          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 createTooltipAndItsIcon (doughnutData: any, maxValueToDisplay: number): HTMLDivElement {
+  const iconTopWrapper = document.createElement('div');
+  const iconWrapper = document.createElement('div');
+  const icon = document.createElement('img');
+  iconTopWrapper.style.position = 'absolute';
+  iconTopWrapper.style.right = '-32px';
+  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%)';
+  iconWrapper.style.position = 'relative';
+  iconWrapper.style.display = 'flex';
+  const tooltip = createLegendOthersTooltip(doughnutData, maxValueToDisplay);
+  icon.onmouseover = () => {
+    (iconWrapper.firstElementChild as HTMLElement).style.visibility = 'visible';
+  };
+  iconTopWrapper.appendChild(iconWrapper);
+  iconWrapper.appendChild(tooltip);
+  iconWrapper.appendChild(icon);
+  return iconTopWrapper;
+}
+
+function createLegendOthersTooltip (doughnutData: any, maxValueToDisplay: number) {
+  const tooltip = document.createElement('div');
+  tooltip.style.visibility= 'hidden';
+  tooltip.style.position = 'absolute';
+  tooltip.style.zIndex = '10';
+  tooltip.style.width = '350px';
+  tooltip.style.bottom = '100%';
+  tooltip.style.left = '50%';
+  tooltip.style.marginLeft = '-150px';
+  tooltip.style.background = '#FFFFFF';
+  tooltip.style.boxShadow = '0px 1px 5px rgba(0, 0, 0, 0.2)';
+  tooltip.style.borderRadius = '0.5rem';
+  tooltip.style.fontSize = '14px';
+  tooltip.style.overflow = 'hidden';
+  addOthersTooltipLines(doughnutData, maxValueToDisplay, tooltip);
+  return tooltip;
+}
+
+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';
+    textWrapper.style.justifyContent = 'space-between';
+    textWrapper.style.padding = '0.5rem';
+    textWrapper.style.border = '1px solid #CCCCCC';
+    const label = document.createElement('span');
+    label.appendChild(document.createTextNode(doughnutData.labels[dataIndex]));
+    const value = document.createElement('span');
+    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)
+  : 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 = patternsStandardList[index](false);
+    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 = '2px';
+
+    boxSpan.onmouseover = ():void => {
+      isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
+    };
+    boxSpan.onmouseleave = (): void => {
+      isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = null;
+    };
+    return boxSpan;
+} 
+
+export function createLegendElementWithCheckbox 
+(chart: Chart, item: ChartItem, selectMode: Ref<boolean>, onHoverIndex: any | null): HTMLElement {
+  const isDoughnut: boolean = chart.config.type === 'doughnut';
+  const index: number = isDoughnut ? item.index : item.datasetIndex;
+  const checkbox: HTMLElement = createLegendCheckbox(chart, item);
+  const labels = chart.config.data.labels;
+  const allCheckBoxesVisible: boolean = 
+  labels.every((label: string, index: number) => chart.getDataVisibility(index));
+  if (allCheckBoxesVisible) {
+    if (isDoughnut) {
+      onHoverIndex.value = -1;
+      selectMode.value = false;
+    } else {
+      onHoverIndex.dataSetIndex = -1;
+    }
+    return checkbox;
+  }
+  checkbox.onmouseover = ():void => {
+    isDoughnut ? onHoverIndex.value = index : onHoverIndex.dataSetIndex = index;
+  };
+  checkbox.onmouseleave = (): void => {
+    isDoughnut ? onHoverIndex.value = null : onHoverIndex.dataSetIndex = null;
+  };
+  return checkbox;
+}
+
+export function createHtmlLegendItemText (item: ChartItem) {
+  const textContainer = document.createElement('p');
+  textContainer.style.color = item.fontColor;
+  textContainer.style.fontSize = `${LEGEND_FONT_SIZE}px`;
+  textContainer.style.margin = '0';
+  textContainer.style.padding = '0';
+
+  const text = document.createTextNode(item.text);
+  textContainer.appendChild(text);
+  return textContainer;
+}
+
+export function createHtmlLegendLine (item: ChartItem, type: string | undefined) {
+  const boxSpan = document.createElement('div');
+  if (type !== 'doughnut') {
+    boxSpan.style.background = item.fillStyle;
+    boxSpan.style.borderColor = item.strokeStyle;
+    boxSpan.style.borderWidth = item.lineWidth + 'px';
+  }
+  boxSpan.style.borderRadius = '5px';
+  boxSpan.style.borderStyle = 'solid';
+  boxSpan.style.display = 'flex';
+  boxSpan.style.justifyContent = 'center';
+  boxSpan.style.alignItems = 'center';
+  boxSpan.style.width = LEGEND_BOX_SIZE + 'px';
+  boxSpan.style.marginRight = LEGEND_LABEL_LEFT_MARGIN;
+  boxSpan.style.height = LEGEND_BOX_SIZE + 'px';
+  return boxSpan;
+}
+
+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';
+  divPoint.style.background = 'white';
+  divPoint.style.borderStyle = 'solid';
+  divPoint.style.borderColor = item.strokeStyle;
+  divPoint.style.borderWidth = item.lineWidth + 'px';
+  return divPoint;
+}
+
+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';
+  li.style.display = 'flex';
+  li.style.flexDirection = 'row';
+  li.setAttribute('data-test-id', `legend-item-${elementIndex}`);
+  li.onclick = () => {
+    if (!selectMode.value) {
+      hideAllButThis(chart, elementIndex, selectMode);
+      chart.update();
+    } else {
+      switchItemVisibility(chart, elementIndex, selectMode);
+    }
+  };
+  return li;
+}
+
+export function addCheckboxStyle (isDataSetVisible: boolean, item: ChartItem, checkbox: Element) {
+  let backgroundColor = '#fff';
+  let borderColor = '#666';
+  if (isDataSetVisible) {
+    backgroundColor = item.strokeStyle;
+    borderColor = item.strokeStyle;
+  }
+  checkbox.setAttribute('checked', '' + isDataSetVisible);
+  checkbox.setAttribute('class', 'mc-checkbox__input');
+  checkbox.setAttribute('style', `background-color: ${backgroundColor};
+    width: ${LEGEND_BOX_SIZE + 4 + 'px'};
+    height: ${LEGEND_BOX_SIZE + 4 + 'px'};
+    margin-right: ${LEGEND_LABEL_LEFT_MARGIN};
+    border-color: ${borderColor};`);
+}
+
+export function createLegendCheckbox (chart: Chart, item: ChartItem) {
+  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 = isDoughnut ? chart.getDataVisibility(index) :  chart.isDatasetVisible(index);
+  addCheckboxStyle(isDataSetVisible, item, checkbox);
+  return checkbox;
+}
+
+function isMonoDataSetChart (chart: Chart) {
+  const { type } = chart.config;
+  return type === 'pie' || type === 'doughnut';
+}
+
+function getChartsData (chart: any) {
+  let dataSets: unknown[] = chart.config.data.datasets;
+  if (isMonoDataSetChart(chart)) {
+    dataSets = chart.config.data.datasets[0].data;
+  }
+  return dataSets;
+}
+
+export function hideAllButThis (chart: Chart, elementIndex: number, selectMode: Ref) {
+  if (!selectMode.value) {
+    const dataSets: unknown[] = getChartsData(chart);
+    selectMode.value = true;
+    dataSets.forEach((_data, index) => {
+      if (index !== elementIndex) {
+        switchItemVisibility(chart, index);
+      }
+    });
+  }
+}
+
+function allDataVisible (chart: Chart): boolean {
+  let allVisible = true;
+  const chartsData: unknown[] = getChartsData(chart);
+  chartsData.forEach((_data, dataIndex) => {
+    allVisible = allVisible && chart.isDatasetVisible(dataIndex);
+  });
+  return allVisible;
+}
+
+export function switchItemVisibility (chart: Chart, elementIndex: number, selectMode?: Ref) {
+  if (isMonoDataSetChart(chart)) {
+    chart.toggleDataVisibility(elementIndex);
+  } else {
+    chart.setDatasetVisibility(elementIndex, !chart.isDatasetVisible(elementIndex));
+  }
+  if (selectMode && allDataVisible(chart)) {
+    selectMode.value = false;
+  }
+  chart.update();
+}
+
+
+export function createLegendElementWithSquareArea (item: ChartItem) {
+  const liContent = createHtmlLegendLine(item, '');
+  const divPoint = createHtmlLegendDatasetSquare(item);
+  const index = item.index || item.datasetIndex;
+  if (index === 0) {
+    divPoint.style.borderRadius = '25px';
+  } else {
+    divPoint.style.transform = 'rotate(45deg)';
+  }
+  liContent.appendChild(divPoint);
+  return liContent;
+}
+
+
+export function getOrCreateLegendList (legendContainer: Ref, flexDirection: string) {
+  let listContainer = legendContainer.value?.querySelector('ul');
+  if (!listContainer) {
+    listContainer = document.createElement('ul');
+    listContainer.style.display = 'flex';
+    listContainer.style.flexDirection = flexDirection;
+    listContainer.style.margin = '0';
+    listContainer.style.padding = '0';
+    legendContainer.value?.appendChild(listContainer);
+  }
+  return listContainer;
+}

package/src/services/DoughnutChartFunctions.ts

@@ -0,0 +1,89 @@
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { 
+  getHtmlLegendPlugin
+} from '../services/ChartsCommonLegend';
+import { formatWithThousandsSeprators } from '../services/FormatUtilities';
+
+import ChartDesign from './patterns/ChartDesign';
+
+const {
+  patternsStandardList
+} = ChartDesign();
+
+
+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>, maxValueToDisplay: number, doughnutData: any) {
+    return getHtmlLegendPlugin(legendContainer, selectMode, onHoverIndex, maxValueToDisplay, doughnutData);
+  }
+
+function getBackgroundColor(): void {
+  if (onHoverIndex.value !== null) {
+    backgroundColor.value = patternsStandardList
+      .map((pattern, index) => onHoverIndex.value === index ? pattern(false) : pattern(true));
+  } else {
+    backgroundColor.value = patternsStandardList
+      .map((pattern) => pattern(false));
+  }
+}
+
+ 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();
+};
+
+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');
+  }
+  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
+    });
+  }
+  return truncatedData;
+}
+
+  return {
+    onHoverIndex,
+    privateGetHtmlLegendPlugin,
+    getOnHoverOptions,
+    groupDataAfterNthValue,
+    getDoughnutLabels,
+    getBackgroundColor,
+    getFormatedText,
+    backgroundColor,
+    doughnutRef
+  };
+}

package/src/services/FormatUtilities.ts

@@ -0,0 +1,30 @@
+export function formatTicks (val: number, unit?: string | null): 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 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 formatValueAndRate (doughnutData: any, dataIndex: number) {
+  const textValue = `${formatWithThousandsSeprators(doughnutData.data[dataIndex].value)} (${formatWithThousandsSeprators(doughnutData.data[dataIndex].rate)}%)`;
+  return textValue;
+}