@apia/charts 2.0.0 → 2.0.2

package/dist/charts/pie/Pie.js

@@ -2,7 +2,6 @@ import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
 import { arrayOrArray, usePanAndZoom, getLabel } from '@apia/util';
 import { Box, spacing, Heading } from '@apia/theme';
 import { Group } from '@visx/group';
-import { Pie } from '@visx/shape';
 import { Slice } from './Slice.js';
 import { useChartStyles } from '../util/useChartStyles.js';
 import { useState, useMemo, useRef } from 'react';
@@ -11,6 +10,7 @@ import { getBarColor } from '../util/getBarColor.js';
 import { usePieAnimation } from './usePieAnimation.js';
 import uniqueId from 'lodash-es/uniqueId';
 import ChartSelector from '../util/ChartSelector.js';
+import { Pie } from '@visx/shape';
 
 function adjustDimensions({
   width,
@@ -100,7 +100,6 @@ const PieChart = ({
   if (!piezas) {
     return null;
   }
-  console.log(arrayOrArray(piezas.coordinate));
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Box,

package/dist/charts/pie/Pie.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pie.js","sources":["../../../src/charts/pie/Pie.tsx"],"sourcesContent":["import {\n  TApiaChartColumn,\n  TApiaChartCoordinate,\n  TChartRendererProps,\n} from '../types';\nimport { arrayOrArray, getLabel, usePanAndZoom } from '@apia/util';\nimport { Box, Heading } from '@apia/theme';\nimport { Group } from '@visx/group';\nimport { Pie } from '@visx/shape';\nimport { Slice } from './Slice';\nimport { useChartStyles } from '../util/useChartStyles';\nimport { useRef, useMemo, useState } from 'react';\nimport { LegendContainer, TChartReference } from '../util/LegendContainer';\nimport { getBarColor } from '../util/getBarColor';\nimport { spacing } from '@apia/theme';\nimport { usePieAnimation } from './usePieAnimation';\nimport uniqueId from 'lodash-es/uniqueId';\nimport ChartSelector from '../util/ChartSelector';\n\nfunction adjustDimensions({\n  width,\n  height,\n  maxWidth,\n}: {\n  width: number;\n  height: number;\n  maxWidth: number;\n}) {\n  if (width <= maxWidth) {\n    return { width, height };\n  }\n\n  const ratio = width / height;\n  const newWidth = maxWidth;\n  const newHeight = Math.floor(newWidth / ratio);\n\n  return { width: newWidth, height: newHeight };\n}\n\nexport type TPieChartEvents = { highlight: { barName: string } };\n\nconst PieChart = ({\n  chart,\n  className,\n  chartId,\n  allowZoom,\n}: TChartRendererProps) => {\n  const [dataset, setDataset] = useState<TApiaChartColumn[]>(\n    arrayOrArray(chart.dataSets?.data),\n  );\n  const [currentPie, setCurrentPie] = useState('0');\n  const piezas = useMemo(() => {\n    return dataset\n      .filter((piece) => !!piece.sets)\n      .map((piece) => {\n        return {\n          ...piece,\n          coordinate: piece.sets,\n        };\n      })[dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0];\n  }, [currentPie, dataset]);\n\n  usePieAnimation({\n    incomingColumn: arrayOrArray(chart.dataSets?.data)[\n      dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0\n    ],\n    piezas,\n    setDataset,\n  });\n\n  let innerWidth =\n    chart.ratio.width > chart.ratio.height\n      ? chart.ratio.width\n      : chart.ratio.height;\n  let innerHeight =\n    chart.ratio.width > chart.ratio.height\n      ? chart.ratio.width\n      : chart.ratio.height;\n  if (innerWidth > chart.ratio.maxWidth) {\n    const newValues = adjustDimensions({\n      height: innerHeight,\n      width: innerWidth,\n      maxWidth: chart.ratio.maxWidth,\n    });\n    innerWidth = newValues.width;\n    innerHeight = newValues.height;\n  }\n\n  const centerY = useMemo(() => {\n    return innerHeight / 2.5;\n  }, [innerHeight]);\n  const centerX = useMemo(() => {\n    return innerWidth / 2.5;\n  }, [innerWidth]);\n  const top = centerY;\n  const left = centerX;\n\n  const getValue = (d: TApiaChartCoordinate) =>\n    Number(d.value) === 0 && arrayOrArray(piezas.coordinate).length === 1\n      ? 100\n      : d.value === undefined\n        ? 0\n        : Number(d.value);\n  const radius = Math.min(innerHeight, innerWidth) / 2.5;\n\n  const styles = useChartStyles(chart.colorSchema);\n\n  const colorsArray = styles\n    ? styles.schema\n    : ['#7ad6f4', '#45bdee', '#28a7ea', '#006cbb', '#034698', '#032f64'];\n  const names = arrayOrArray(\n    (dataset[parseInt(currentPie)] ?? dataset[0]).sets,\n  ).map((coord) => {\n    return coord.key;\n  });\n  const colorReference: TChartReference = names.map((name, index) => {\n    return {\n      title: name,\n      color: getBarColor(arrayOrArray(colorsArray), index),\n    };\n  });\n\n  const { boxRef, elementRef } = usePanAndZoom<HTMLElement, SVGSVGElement>(\n    undefined,\n    !allowZoom ?? true,\n  );\n  const previousPaths = useRef<(string | null)[]>([]);\n  const id = useMemo(() => `Pie${uniqueId()}`, []);\n  const charts = arrayOrArray(chart.dataSets?.data)\n    .filter((piece) => !!piece.sets)\n    .map((piece) => {\n      return {\n        ...piece,\n        coordinate: piece.sets,\n      };\n    });\n  const chartNames = charts.map((piece) => {\n    return piece.name;\n  });\n  if (!piezas) {\n    return null;\n  }\n\n  console.log(arrayOrArray(piezas.coordinate));\n  return (\n    <>\n      <Box\n        ref={boxRef}\n        id={id}\n        key={piezas.name}\n        className={`${\n          className ? className : ''\n        } ${chartId} chartBox chartContainer`}\n        sx={{ textAlign: 'center', pb: spacing(5) }}\n      >\n        <svg\n          ref={elementRef}\n          height={radius * 2}\n          width={radius * 2}\n          className={`_${chartId} chart__svg`}\n        >\n          <Group top={top ?? 0} left={left ?? 0}>\n            <Pie\n              data={arrayOrArray(piezas.coordinate)}\n              pieValue={getValue}\n              pieSort={null}\n              outerRadius={radius}\n            >\n              {(pie) => {\n                const paths = arrayOrArray(pie.arcs).map((arc) => {\n                  return pie.path(arc);\n                });\n\n                const result = pie.arcs.map((arc) => {\n                  const name = arc.data;\n\n                  const arcPath = pie.path(arc);\n                  return (\n                    <Slice\n                      arc={arc}\n                      chartId={id}\n                      arcPath={arcPath}\n                      chart={chart}\n                      key={`${name.key}_${name.value}`}\n                      actualColor={\n                        colorReference\n                          .find((color) => {\n                            return color.title === name.key;\n                          })\n                          ?.color.startsWith('#')\n                          ? colorReference.find((color) => {\n                              return color.title === name.key;\n                            })?.color ?? ''\n                          : `#${\n                              colorReference.find((color) => {\n                                return color.title === name.key;\n                              })?.color ?? ''\n                            }`\n                      }\n                    />\n                  );\n                });\n                previousPaths.current = paths;\n\n                return result;\n              }}\n            </Pie>\n          </Group>\n        </svg>\n      </Box>\n      <Box className=\"chartLegend__Wrapper\">\n        {!chart.hideSelector && charts.length > 1 && (\n          <Box className=\"chart__combo__wrapper\">\n            {/* TODO LABEL */}\n            <Heading as={'h6'}>{getLabel('lblChartSel').text}</Heading>\n            <ChartSelector\n              chartId={chartId}\n              pieces={chartNames}\n              className=\"chartSelectorCombo\"\n              current={currentPie}\n              setCurrent={setCurrentPie}\n            />\n          </Box>\n        )}\n\n        {chart.showLegend && colorReference.length > 1 && (\n          <Box className=\"chart__legend__wrapper\">\n            {/* TODO LABEL */}\n            <Heading as={'h6'}>{getLabel('mnuLeyends').text}</Heading>\n            <LegendContainer id={chartId} references={colorReference} />\n          </Box>\n        )}\n      </Box>\n    </>\n  );\n};\n\nexport { PieChart };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Pie.js","sources":["../../../src/charts/pie/Pie.tsx"],"sourcesContent":["import {\n  TApiaChartColumn,\n  TApiaChartCoordinate,\n  TChartRendererProps,\n} from '../types';\nimport { arrayOrArray, getLabel, usePanAndZoom } from '@apia/util';\nimport { Box, Heading } from '@apia/theme';\nimport { Group } from '@visx/group';\nimport { Slice } from './Slice';\nimport { useChartStyles } from '../util/useChartStyles';\nimport { useRef, useMemo, useState } from 'react';\nimport { LegendContainer, TChartReference } from '../util/LegendContainer';\nimport { getBarColor } from '../util/getBarColor';\nimport { spacing } from '@apia/theme';\nimport { usePieAnimation } from './usePieAnimation';\nimport uniqueId from 'lodash-es/uniqueId';\nimport ChartSelector from '../util/ChartSelector';\nimport { Pie } from '@visx/shape';\n\nfunction adjustDimensions({\n  width,\n  height,\n  maxWidth,\n}: {\n  width: number;\n  height: number;\n  maxWidth: number;\n}) {\n  if (width <= maxWidth) {\n    return { width, height };\n  }\n\n  const ratio = width / height;\n  const newWidth = maxWidth;\n  const newHeight = Math.floor(newWidth / ratio);\n\n  return { width: newWidth, height: newHeight };\n}\n\nexport type TPieChartEvents = { highlight: { barName: string } };\n\nconst PieChart = ({\n  chart,\n  className,\n  chartId,\n  allowZoom,\n}: TChartRendererProps) => {\n  const [dataset, setDataset] = useState<TApiaChartColumn[]>(\n    arrayOrArray(chart.dataSets?.data),\n  );\n  const [currentPie, setCurrentPie] = useState('0');\n  const piezas = useMemo(() => {\n    return dataset\n      .filter((piece) => !!piece.sets)\n      .map((piece) => {\n        return {\n          ...piece,\n          coordinate: piece.sets,\n        };\n      })[dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0];\n  }, [currentPie, dataset]);\n\n  usePieAnimation({\n    incomingColumn: arrayOrArray(chart.dataSets?.data)[\n      dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0\n    ],\n    piezas,\n    setDataset,\n  });\n\n  let innerWidth =\n    chart.ratio.width > chart.ratio.height\n      ? chart.ratio.width\n      : chart.ratio.height;\n  let innerHeight =\n    chart.ratio.width > chart.ratio.height\n      ? chart.ratio.width\n      : chart.ratio.height;\n  if (innerWidth > chart.ratio.maxWidth) {\n    const newValues = adjustDimensions({\n      height: innerHeight,\n      width: innerWidth,\n      maxWidth: chart.ratio.maxWidth,\n    });\n    innerWidth = newValues.width;\n    innerHeight = newValues.height;\n  }\n\n  const centerY = useMemo(() => {\n    return innerHeight / 2.5;\n  }, [innerHeight]);\n  const centerX = useMemo(() => {\n    return innerWidth / 2.5;\n  }, [innerWidth]);\n  const top = centerY;\n  const left = centerX;\n\n  const getValue = (d: TApiaChartCoordinate) =>\n    Number(d.value) === 0 && arrayOrArray(piezas.coordinate).length === 1\n      ? 100\n      : d.value === undefined\n        ? 0\n        : Number(d.value);\n  const radius = Math.min(innerHeight, innerWidth) / 2.5;\n\n  const styles = useChartStyles(chart.colorSchema);\n\n  const colorsArray = styles\n    ? styles.schema\n    : ['#7ad6f4', '#45bdee', '#28a7ea', '#006cbb', '#034698', '#032f64'];\n  const names = arrayOrArray(\n    (dataset[parseInt(currentPie)] ?? dataset[0]).sets,\n  ).map((coord) => {\n    return coord.key;\n  });\n  const colorReference: TChartReference = names.map((name, index) => {\n    return {\n      title: name,\n      color: getBarColor(arrayOrArray(colorsArray), index),\n    };\n  });\n\n  const { boxRef, elementRef } = usePanAndZoom<HTMLElement, SVGSVGElement>(\n    undefined,\n    !allowZoom ?? true,\n  );\n  const previousPaths = useRef<(string | null)[]>([]);\n  const id = useMemo(() => `Pie${uniqueId()}`, []);\n  const charts = arrayOrArray(chart.dataSets?.data)\n    .filter((piece) => !!piece.sets)\n    .map((piece) => {\n      return {\n        ...piece,\n        coordinate: piece.sets,\n      };\n    });\n  const chartNames = charts.map((piece) => {\n    return piece.name;\n  });\n  if (!piezas) {\n    return null;\n  }\n\n  return (\n    <>\n      <Box\n        ref={boxRef}\n        id={id}\n        key={piezas.name}\n        className={`${\n          className ? className : ''\n        } ${chartId} chartBox chartContainer`}\n        sx={{ textAlign: 'center', pb: spacing(5) }}\n      >\n        <svg\n          ref={elementRef}\n          height={radius * 2}\n          width={radius * 2}\n          className={`_${chartId} chart__svg`}\n        >\n          <Group top={top ?? 0} left={left ?? 0}>\n            <Pie\n              data={arrayOrArray(piezas.coordinate)}\n              pieValue={getValue}\n              pieSort={null}\n              outerRadius={radius}\n            >\n              {(pie) => {\n                const paths = arrayOrArray(pie.arcs).map((arc) => {\n                  return pie.path(arc);\n                });\n\n                const result = pie.arcs.map((arc) => {\n                  const name = arc.data;\n\n                  const arcPath = pie.path(arc);\n                  return (\n                    <Slice\n                      arc={arc}\n                      chartId={id}\n                      arcPath={arcPath}\n                      chart={chart}\n                      key={`${name.key}_${name.value}`}\n                      actualColor={\n                        colorReference\n                          .find((color) => {\n                            return color.title === name.key;\n                          })\n                          ?.color.startsWith('#')\n                          ? colorReference.find((color) => {\n                              return color.title === name.key;\n                            })?.color ?? ''\n                          : `#${\n                              colorReference.find((color) => {\n                                return color.title === name.key;\n                              })?.color ?? ''\n                            }`\n                      }\n                    />\n                  );\n                });\n                previousPaths.current = paths;\n\n                return result;\n              }}\n            </Pie>\n          </Group>\n        </svg>\n      </Box>\n      <Box className=\"chartLegend__Wrapper\">\n        {!chart.hideSelector && charts.length > 1 && (\n          <Box className=\"chart__combo__wrapper\">\n            {/* TODO LABEL */}\n            <Heading as={'h6'}>{getLabel('lblChartSel').text}</Heading>\n            <ChartSelector\n              chartId={chartId}\n              pieces={chartNames}\n              className=\"chartSelectorCombo\"\n              current={currentPie}\n              setCurrent={setCurrentPie}\n            />\n          </Box>\n        )}\n\n        {chart.showLegend && colorReference.length > 1 && (\n          <Box className=\"chart__legend__wrapper\">\n            {/* TODO LABEL */}\n            <Heading as={'h6'}>{getLabel('mnuLeyends').text}</Heading>\n            <LegendContainer id={chartId} references={colorReference} />\n          </Box>\n        )}\n      </Box>\n    </>\n  );\n};\n\nexport { PieChart };\n"],"names":[],"mappings":"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"}

package/dist/charts/pie/Slice.js

@@ -25,7 +25,7 @@ const Slice = ({
       setIsHighlighted(barName === arc.data.key);
       setIsAnyHighlighted(barName !== arc.data.key && barName !== "");
       if (barName === arc.data.key) {
-        ApiaUtil.instance.tooltips.open({
+        new ApiaUtil().tooltips.open({
           children: /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
               "div",

package/dist/charts/pie/Slice.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slice.js","sources":["../../../src/charts/pie/Slice.tsx"],"sourcesContent":["import { TApiaChartCoordinate, TChartRendererProps } from '../types';\nimport { useMemo, useState, useRef } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { localPoint } from '@visx/event';\nimport { PieArcDatum } from '@visx/shape/lib/shapes/Pie';\nimport {\n  useImperativeComponentContext,\n  useImperativeComponentEvents,\n} from '@apia/util';\nimport { legendContainerMethods } from '../util/LegendContainer';\nimport { TChartEvents, chartMethods } from '../ChartRenderer';\nimport { ApiaUtil } from '@apia/components';\n// import uniqueId from 'lodash-es/uniqueId';\n\nexport const Slice = ({\n  arc,\n  arcPath,\n  chart,\n  actualColor,\n  chartId: outerChartId,\n}: Pick<TChartRendererProps, 'chart'> &\n  Pick<TChartRendererProps, 'chartId'> & {\n    arc: PieArcDatum<TApiaChartCoordinate>;\n    arcPath: string | null;\n    actualColor: string;\n  }) => {\n  // const uId = uniqueId();\n  const [isHighlighted, setIsHighlighted] = useState(false);\n  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);\n  const ref = useRef<SVGPathElement | null>(null);\n  const name = arc.data;\n  const { id: chartId } = useImperativeComponentContext();\n  useImperativeComponentEvents<TChartEvents>({\n    highlight(barNameId) {\n      const barName = barNameId.split('_$_')[0];\n      setIsHighlighted(barName === arc.data.key);\n      setIsAnyHighlighted(barName !== arc.data.key && barName !== '');\n      if (barName === arc.data.key) {\n        ApiaUtil.instance.tooltips.open({\n          children: (\n            <>\n              <div\n                style={{\n                  color: `#${tinycolor(actualColor).toHex()}`,\n                }}\n              >\n                <strong>{arc.data.key}</strong>\n              </div>\n              {chart.showValues && (\n                <div>{`${arc.value} ${\n                  arc.data.percentage !== '' &&\n                  arc.data.percentage !== undefined\n                    ? '- ' + arc.data.percentage\n                    : ''\n                }${\n                  arc.data.percentage !== '' &&\n                  arc.data.percentage !== undefined\n                    ? '%'\n                    : ''\n                }`}</div>\n              )}\n            </>\n          ),\n          attachToElement: () => {\n            return ref.current as unknown as HTMLElement;\n          },\n          attachToElementAnchorPoint: 'center',\n          closeOnClickOut: () => {\n            return window.innerWidth > 700;\n          },\n          closeOnMouseLeaveAttachedElement: (ev) => {\n            return !(ev.relatedTarget as HTMLElement).closest('.legendItem');\n          },\n          className: arc.data.key,\n        });\n      }\n    },\n  });\n\n  return (\n    <path\n      key={`arc-${name.key}-${name.value}-${outerChartId}`}\n      id={`arc-${name.key}-${name.value}-${outerChartId}`}\n      ref={ref}\n      style={useMemo(\n        () => ({\n          '&:hover': {\n            fill: `#${tinycolor(actualColor).saturate(25).toHex()}`,\n          },\n          transition: 'fill 500ms, opacity 500ms',\n        }),\n        [actualColor],\n      )}\n      color={\n        isAnyHighlighted\n          ? `#${tinycolor(actualColor).desaturate(70).toHex()}`\n          : actualColor\n      }\n      fill={\n        isAnyHighlighted\n          ? `#${tinycolor(actualColor).desaturate(70).toHex()}`\n          : actualColor\n      }\n      opacity={isAnyHighlighted && !isHighlighted ? 0.15 : 1}\n      d={arcPath ?? ''}\n      onMouseEnter={(ev) => {\n        legendContainerMethods.highlight(chartId, arc.data.key);\n        chartMethods(chartId, 'highlight', `${name.key}_$_${outerChartId}`);\n        (ev.target as HTMLElement).classList?.add('over');\n        const point = {\n          x: localPoint(ev)?.x,\n          y: localPoint(ev)?.y,\n        };\n        if (!point) return;\n      }}\n      onMouseLeave={(ev) => {\n        legendContainerMethods.highlight(chartId, '');\n\n        chartMethods(chartId, 'highlight', '');\n        (ev.target as HTMLElement).classList?.remove('over');\n      }}\n    ></path>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Slice.js","sources":["../../../src/charts/pie/Slice.tsx"],"sourcesContent":["import { TApiaChartCoordinate, TChartRendererProps } from '../types';\nimport { useMemo, useState, useRef } from 'react';\nimport tinycolor from 'tinycolor2';\nimport { localPoint } from '@visx/event';\nimport { PieArcDatum } from '@visx/shape/lib/shapes/Pie';\nimport {\n  useImperativeComponentContext,\n  useImperativeComponentEvents,\n} from '@apia/util';\nimport { legendContainerMethods } from '../util/LegendContainer';\nimport { TChartEvents, chartMethods } from '../ChartRenderer';\nimport { ApiaUtil } from '@apia/components';\n// import uniqueId from 'lodash-es/uniqueId';\n\nexport const Slice = ({\n  arc,\n  arcPath,\n  chart,\n  actualColor,\n  chartId: outerChartId,\n}: Pick<TChartRendererProps, 'chart'> &\n  Pick<TChartRendererProps, 'chartId'> & {\n    arc: PieArcDatum<TApiaChartCoordinate>;\n    arcPath: string | null;\n    actualColor: string;\n  }) => {\n  // const uId = uniqueId();\n  const [isHighlighted, setIsHighlighted] = useState(false);\n  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);\n  const ref = useRef<SVGPathElement | null>(null);\n  const name = arc.data;\n  const { id: chartId } = useImperativeComponentContext();\n  useImperativeComponentEvents<TChartEvents>({\n    highlight(barNameId) {\n      const barName = barNameId.split('_$_')[0];\n      setIsHighlighted(barName === arc.data.key);\n      setIsAnyHighlighted(barName !== arc.data.key && barName !== '');\n      if (barName === arc.data.key) {\n        new ApiaUtil().tooltips.open({\n          children: (\n            <>\n              <div\n                style={{\n                  color: `#${tinycolor(actualColor).toHex()}`,\n                }}\n              >\n                <strong>{arc.data.key}</strong>\n              </div>\n              {chart.showValues && (\n                <div>{`${arc.value} ${\n                  arc.data.percentage !== '' &&\n                  arc.data.percentage !== undefined\n                    ? '- ' + arc.data.percentage\n                    : ''\n                }${\n                  arc.data.percentage !== '' &&\n                  arc.data.percentage !== undefined\n                    ? '%'\n                    : ''\n                }`}</div>\n              )}\n            </>\n          ),\n          attachToElement: () => {\n            return ref.current as unknown as HTMLElement;\n          },\n          attachToElementAnchorPoint: 'center',\n          closeOnClickOut: () => {\n            return window.innerWidth > 700;\n          },\n          closeOnMouseLeaveAttachedElement: (ev) => {\n            return !(ev.relatedTarget as HTMLElement).closest('.legendItem');\n          },\n          className: arc.data.key,\n        });\n      }\n    },\n  });\n\n  return (\n    <path\n      key={`arc-${name.key}-${name.value}-${outerChartId}`}\n      id={`arc-${name.key}-${name.value}-${outerChartId}`}\n      ref={ref}\n      style={useMemo(\n        () => ({\n          '&:hover': {\n            fill: `#${tinycolor(actualColor).saturate(25).toHex()}`,\n          },\n          transition: 'fill 500ms, opacity 500ms',\n        }),\n        [actualColor],\n      )}\n      color={\n        isAnyHighlighted\n          ? `#${tinycolor(actualColor).desaturate(70).toHex()}`\n          : actualColor\n      }\n      fill={\n        isAnyHighlighted\n          ? `#${tinycolor(actualColor).desaturate(70).toHex()}`\n          : actualColor\n      }\n      opacity={isAnyHighlighted && !isHighlighted ? 0.15 : 1}\n      d={arcPath ?? ''}\n      onMouseEnter={(ev) => {\n        legendContainerMethods.highlight(chartId, arc.data.key);\n        chartMethods(chartId, 'highlight', `${name.key}_$_${outerChartId}`);\n        (ev.target as HTMLElement).classList?.add('over');\n        const point = {\n          x: localPoint(ev)?.x,\n          y: localPoint(ev)?.y,\n        };\n        if (!point) return;\n      }}\n      onMouseLeave={(ev) => {\n        legendContainerMethods.highlight(chartId, '');\n\n        chartMethods(chartId, 'highlight', '');\n        (ev.target as HTMLElement).classList?.remove('over');\n      }}\n    ></path>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/charts/pie/usePieAnimation.js

@@ -6,6 +6,10 @@ const usePieAnimation = ({
   piezas,
   setDataset
 }) => {
+  console.log({
+    incomingColumn,
+    piezas
+  });
   const previousObjectRef = useRef(void 0);
   const actualObjectRef = useRef(void 0);
   const isAnimating = useRef(false);

package/dist/charts/pie/usePieAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePieAnimation.js","sources":["../../../src/charts/pie/usePieAnimation.ts"],"sourcesContent":["import React, { useRef } from 'react';\nimport { TApiaChartColumn, TApiaChartCoordinate } from '../types';\nimport {\n  addBoundary,\n  animate,\n  arrayOrArray,\n  // useUpdateEffect,\n} from '@apia/util';\n\nexport const usePieAnimation = ({\n  incomingColumn,\n  piezas,\n  setDataset,\n}: {\n  incomingColumn: TApiaChartColumn;\n  setDataset: React.Dispatch<React.SetStateAction<TApiaChartColumn[]>>;\n  piezas: {\n    coordinate: TApiaChartCoordinate | TApiaChartCoordinate[];\n    color: string;\n    sets: TApiaChartCoordinate | TApiaChartCoordinate[];\n    name: string;\n  };\n}) => {\n  const previousObjectRef = useRef<\n    | {\n        coordinate: TApiaChartCoordinate | TApiaChartCoordinate[];\n        color: string;\n        name: string;\n      }\n    | undefined\n  >(undefined);\n\n  const actualObjectRef = useRef<\n    | {\n        coordinate: TApiaChartCoordinate | TApiaChartCoordinate[];\n        color: string;\n        name: string;\n      }\n    | undefined\n  >(undefined);\n\n  const isAnimating = useRef(false);\n\n  if (previousObjectRef.current && piezas) {\n    const previousCoordinates =\n      isAnimating.current && actualObjectRef.current\n        ? arrayOrArray(actualObjectRef.current.coordinate)\n        : arrayOrArray(previousObjectRef.current.coordinate);\n\n    const currentCoordinates = arrayOrArray(incomingColumn.sets);\n\n    const hasValueChanged = previousCoordinates.some((prevCoord, index) => {\n      const currentCoord = currentCoordinates[index];\n\n      return (\n        prevCoord.value !== currentCoord?.value ||\n        (prevCoord.value === currentCoord?.value &&\n          prevCoord.key !== currentCoord.key)\n      );\n    });\n\n    if (hasValueChanged) {\n      isAnimating.current = true;\n      const difference: TApiaChartCoordinate[] = [];\n      for (\n        let i = 0;\n        i < Math.max(previousCoordinates.length, currentCoordinates.length);\n        i++\n      ) {\n        const coord1 = previousCoordinates[i];\n        const coord2 = currentCoordinates[i];\n\n        if (coord1 && coord2) {\n          const newValue = Math.abs(\n            parseInt(coord1.value) - parseInt(coord2.value),\n          ).toString();\n          const newCoordinate: TApiaChartCoordinate = {\n            key: coord2.key,\n            color: coord2.color, // Assuming color is the same for both coordinates\n            value: newValue,\n            percentage:\n              coord2.percentage !== '' && coord2.percentage !== undefined\n                ? coord2.percentage\n                : undefined,\n          };\n\n          difference.push(newCoordinate);\n        } else if (!coord1 && coord2 && previousCoordinates.length > 0) {\n          const newValue = Math.abs(0 - parseInt(coord2.value)).toString();\n          const newCoordinate: TApiaChartCoordinate = {\n            key: coord2.key,\n            color: coord2.color, // Assuming color is the same for both coordinates\n            value: newValue,\n            percentage:\n              coord2.percentage !== '' && coord2.percentage !== undefined\n                ? coord2.percentage\n                : undefined,\n          };\n\n          difference.push(newCoordinate);\n        }\n      }\n\n      return animate(\n        500,\n        (progress) => {\n          const step: TApiaChartColumn = {\n            color: piezas.color,\n            name: incomingColumn.name,\n            sets: difference.map((coord, i) => {\n              return {\n                key: coord.key,\n                color: coord.color,\n                percentage: coord.percentage,\n                value: addBoundary(\n                  Number(currentCoordinates[i].value) >\n                    Number(\n                      previousCoordinates[i] ? previousCoordinates[i].value : 0,\n                    )\n                    ? Number(coord.value) * progress +\n                        Number(\n                          previousCoordinates[i]\n                            ? previousCoordinates[i].value\n                            : 0,\n                        )\n                    : Number(\n                        previousCoordinates[i]\n                          ? previousCoordinates[i].value\n                          : 0,\n                      ) -\n                        Number(coord.value) * progress,\n                  Math.min(\n                    Number(\n                      previousCoordinates[i] ? previousCoordinates[i].value : 0,\n                    ),\n                    Number(currentCoordinates[i].value),\n                  ),\n                  Math.max(\n                    Number(\n                      previousCoordinates[i] ? previousCoordinates[i].value : 0,\n                    ),\n                    Number(currentCoordinates[i].value),\n                  ),\n                ).toString(),\n              };\n            }),\n          };\n          actualObjectRef.current = {\n            color: step.color,\n            coordinate: step.sets,\n            name: step.name,\n          };\n          setDataset((prev) => {\n            const newIndex = prev.findIndex((col) => {\n              return col.name === step.name;\n            });\n            const returnObj = [...prev];\n            if (newIndex >= 0) {\n              returnObj[newIndex] = step;\n              return returnObj;\n            } else {\n              return [step];\n            }\n          });\n        },\n        () => {\n          const newPrev = {\n            ...incomingColumn,\n            coordinate: incomingColumn.sets,\n          };\n          previousObjectRef.current = newPrev;\n          isAnimating.current = false;\n        },\n      );\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }\n  } else if (!previousObjectRef.current) {\n    const newPrev = {\n      ...incomingColumn,\n      coordinate: incomingColumn.sets,\n    };\n    previousObjectRef.current = newPrev;\n    isAnimating.current = false;\n  }\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"usePieAnimation.js","sources":["../../../src/charts/pie/usePieAnimation.ts"],"sourcesContent":["import React, { useRef } from 'react';\nimport { TApiaChartColumn, TApiaChartCoordinate } from '../types';\nimport {\n  addBoundary,\n  animate,\n  arrayOrArray,\n  // useUpdateEffect,\n} from '@apia/util';\n\nexport const usePieAnimation = ({\n  incomingColumn,\n  piezas,\n  setDataset,\n}: {\n  incomingColumn: TApiaChartColumn;\n  setDataset: React.Dispatch<React.SetStateAction<TApiaChartColumn[]>>;\n  piezas: {\n    coordinate: TApiaChartCoordinate | TApiaChartCoordinate[];\n    color: string;\n    sets: TApiaChartCoordinate | TApiaChartCoordinate[];\n    name: string;\n  };\n}) => {\n  console.log({\n    incomingColumn,\n    piezas,\n  });\n\n  const previousObjectRef = useRef<\n    | {\n        coordinate: TApiaChartCoordinate | TApiaChartCoordinate[];\n        color: string;\n        name: string;\n      }\n    | undefined\n  >(undefined);\n\n  const actualObjectRef = useRef<\n    | {\n        coordinate: TApiaChartCoordinate | TApiaChartCoordinate[];\n        color: string;\n        name: string;\n      }\n    | undefined\n  >(undefined);\n\n  const isAnimating = useRef(false);\n\n  if (previousObjectRef.current && piezas) {\n    const previousCoordinates =\n      isAnimating.current && actualObjectRef.current\n        ? arrayOrArray(actualObjectRef.current.coordinate)\n        : arrayOrArray(previousObjectRef.current.coordinate);\n\n    const currentCoordinates = arrayOrArray(incomingColumn.sets);\n\n    const hasValueChanged = previousCoordinates.some((prevCoord, index) => {\n      const currentCoord = currentCoordinates[index];\n\n      return (\n        prevCoord.value !== currentCoord?.value ||\n        (prevCoord.value === currentCoord?.value &&\n          prevCoord.key !== currentCoord.key)\n      );\n    });\n\n    if (hasValueChanged) {\n      isAnimating.current = true;\n      const difference: TApiaChartCoordinate[] = [];\n      for (\n        let i = 0;\n        i < Math.max(previousCoordinates.length, currentCoordinates.length);\n        i++\n      ) {\n        const coord1 = previousCoordinates[i];\n        const coord2 = currentCoordinates[i];\n\n        if (coord1 && coord2) {\n          const newValue = Math.abs(\n            parseInt(coord1.value) - parseInt(coord2.value),\n          ).toString();\n          const newCoordinate: TApiaChartCoordinate = {\n            key: coord2.key,\n            color: coord2.color, // Assuming color is the same for both coordinates\n            value: newValue,\n            percentage:\n              coord2.percentage !== '' && coord2.percentage !== undefined\n                ? coord2.percentage\n                : undefined,\n          };\n\n          difference.push(newCoordinate);\n        } else if (!coord1 && coord2 && previousCoordinates.length > 0) {\n          const newValue = Math.abs(0 - parseInt(coord2.value)).toString();\n          const newCoordinate: TApiaChartCoordinate = {\n            key: coord2.key,\n            color: coord2.color, // Assuming color is the same for both coordinates\n            value: newValue,\n            percentage:\n              coord2.percentage !== '' && coord2.percentage !== undefined\n                ? coord2.percentage\n                : undefined,\n          };\n\n          difference.push(newCoordinate);\n        }\n      }\n\n      return animate(\n        500,\n        (progress) => {\n          const step: TApiaChartColumn = {\n            color: piezas.color,\n            name: incomingColumn.name,\n            sets: difference.map((coord, i) => {\n              return {\n                key: coord.key,\n                color: coord.color,\n                percentage: coord.percentage,\n                value: addBoundary(\n                  Number(currentCoordinates[i].value) >\n                    Number(\n                      previousCoordinates[i] ? previousCoordinates[i].value : 0,\n                    )\n                    ? Number(coord.value) * progress +\n                        Number(\n                          previousCoordinates[i]\n                            ? previousCoordinates[i].value\n                            : 0,\n                        )\n                    : Number(\n                        previousCoordinates[i]\n                          ? previousCoordinates[i].value\n                          : 0,\n                      ) -\n                        Number(coord.value) * progress,\n                  Math.min(\n                    Number(\n                      previousCoordinates[i] ? previousCoordinates[i].value : 0,\n                    ),\n                    Number(currentCoordinates[i].value),\n                  ),\n                  Math.max(\n                    Number(\n                      previousCoordinates[i] ? previousCoordinates[i].value : 0,\n                    ),\n                    Number(currentCoordinates[i].value),\n                  ),\n                ).toString(),\n              };\n            }),\n          };\n          actualObjectRef.current = {\n            color: step.color,\n            coordinate: step.sets,\n            name: step.name,\n          };\n          setDataset((prev) => {\n            const newIndex = prev.findIndex((col) => {\n              return col.name === step.name;\n            });\n            const returnObj = [...prev];\n            if (newIndex >= 0) {\n              returnObj[newIndex] = step;\n              return returnObj;\n            } else {\n              return [step];\n            }\n          });\n        },\n        () => {\n          const newPrev = {\n            ...incomingColumn,\n            coordinate: incomingColumn.sets,\n          };\n          previousObjectRef.current = newPrev;\n          isAnimating.current = false;\n        },\n      );\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }\n  } else if (!previousObjectRef.current) {\n    const newPrev = {\n      ...incomingColumn,\n      coordinate: incomingColumn.sets,\n    };\n    previousObjectRef.current = newPrev;\n    isAnimating.current = false;\n  }\n};\n"],"names":[],"mappings":"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"}

package/dist/charts/util/ColoredLegendItem.js

@@ -25,7 +25,7 @@ const ColoredLegendItem = ({
     if (avoidEvent) {
       return;
     }
-    ApiaUtil.instance.tooltips.closeAll();
+    new ApiaUtil().tooltips.closeAll();
     chartMethods(chartId, "highlight", "");
   }, [avoidEvent, chartId]);
   return /* @__PURE__ */ jsx(

package/dist/charts/util/ColoredLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColoredLegendItem.js","sources":["../../../src/charts/util/ColoredLegendItem.tsx"],"sourcesContent":["import { SimpleButton } from '@apia/components';\nimport { icons } from '@apia/icons';\nimport { useCallback } from 'react';\nimport { chartMethods } from '../ChartRenderer';\nimport { ApiaUtil } from '@apia/components';\nimport { useImperativeComponentContext } from '@apia/util';\n\nconst ColoredLegendItem = ({\n  groupId,\n  title,\n  color,\n  className,\n  isHighlighted,\n  isAnyHighlighted,\n  avoidEvent,\n}: {\n  groupId: string;\n  title: string;\n  color: string;\n  className?: string;\n  isHighlighted: boolean;\n  isAnyHighlighted: boolean;\n  avoidEvent: boolean;\n}) => {\n  const { id: chartId } = useImperativeComponentContext();\n  const handleMouseEnter = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    chartMethods(chartId, 'highlight', groupId);\n  }, [avoidEvent, chartId, groupId]);\n  const handleMouseLeave = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    ApiaUtil.instance.tooltips.closeAll();\n    chartMethods(chartId, 'highlight', '');\n  }, [avoidEvent, chartId]);\n  return (\n    <SimpleButton\n      variant=\"link\"\n      className={`${className ?? ''} ${isHighlighted ? 'highlight' : ''} ${\n        isAnyHighlighted && !isHighlighted ? 'isBlurred' : ''\n      } legendItem`}\n      iconColor={color || 'black'}\n      icon={color === 'transparent' ? undefined : icons.SquareFilled}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {title}\n    </SimpleButton>\n  );\n};\n\nexport { ColoredLegendItem };\n"],"names":[],"mappings":";;;;;;;AAOA,MAAM,oBAAoB,CAAC;AAAA,EACzB,OAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AACF,CAQM,KAAA;AACJ,EAAA,MAAM,EAAE,EAAA,EAAI,OAAQ,EAAA,GAAI,6BAA8B,EAAA,CAAA;AACtD,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,OAAO,CAAA,CAAA;AAAA,GACzC,EAAA,CAAC,UAAY,EAAA,OAAA,EAAS,OAAO,CAAC,CAAA,CAAA;AACjC,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAS,QAAA,CAAA,QAAA,CAAS,SAAS,QAAS,EAAA,CAAA;AACpC,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,EAAE,CAAA,CAAA;AAAA,GACpC,EAAA,CAAC,UAAY,EAAA,OAAO,CAAC,CAAA,CAAA;AACxB,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,SAAW,EAAA,CAAA,EAAG,SAAa,IAAA,EAAE,CAAI,CAAA,EAAA,aAAA,GAAgB,WAAc,GAAA,EAAE,CAC/D,CAAA,EAAA,gBAAA,IAAoB,CAAC,aAAA,GAAgB,cAAc,EACrD,CAAA,WAAA,CAAA;AAAA,MACA,WAAW,KAAS,IAAA,OAAA;AAAA,MACpB,IAAM,EAAA,KAAA,KAAU,aAAgB,GAAA,KAAA,CAAA,GAAY,KAAM,CAAA,YAAA;AAAA,MAClD,YAAc,EAAA,gBAAA;AAAA,MACd,YAAc,EAAA,gBAAA;AAAA,MAEb,QAAA,EAAA,KAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ColoredLegendItem.js","sources":["../../../src/charts/util/ColoredLegendItem.tsx"],"sourcesContent":["import { SimpleButton } from '@apia/components';\nimport { icons } from '@apia/icons';\nimport { useCallback } from 'react';\nimport { chartMethods } from '../ChartRenderer';\nimport { ApiaUtil } from '@apia/components';\nimport { useImperativeComponentContext } from '@apia/util';\n\nconst ColoredLegendItem = ({\n  groupId,\n  title,\n  color,\n  className,\n  isHighlighted,\n  isAnyHighlighted,\n  avoidEvent,\n}: {\n  groupId: string;\n  title: string;\n  color: string;\n  className?: string;\n  isHighlighted: boolean;\n  isAnyHighlighted: boolean;\n  avoidEvent: boolean;\n}) => {\n  const { id: chartId } = useImperativeComponentContext();\n  const handleMouseEnter = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    chartMethods(chartId, 'highlight', groupId);\n  }, [avoidEvent, chartId, groupId]);\n  const handleMouseLeave = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    new ApiaUtil().tooltips.closeAll();\n    chartMethods(chartId, 'highlight', '');\n  }, [avoidEvent, chartId]);\n  return (\n    <SimpleButton\n      variant=\"link\"\n      className={`${className ?? ''} ${isHighlighted ? 'highlight' : ''} ${\n        isAnyHighlighted && !isHighlighted ? 'isBlurred' : ''\n      } legendItem`}\n      iconColor={color || 'black'}\n      icon={color === 'transparent' ? undefined : icons.SquareFilled}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {title}\n    </SimpleButton>\n  );\n};\n\nexport { ColoredLegendItem };\n"],"names":[],"mappings":";;;;;;;AAOA,MAAM,oBAAoB,CAAC;AAAA,EACzB,OAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AACF,CAQM,KAAA;AACJ,EAAA,MAAM,EAAE,EAAA,EAAI,OAAQ,EAAA,GAAI,6BAA8B,EAAA,CAAA;AACtD,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,OAAO,CAAA,CAAA;AAAA,GACzC,EAAA,CAAC,UAAY,EAAA,OAAA,EAAS,OAAO,CAAC,CAAA,CAAA;AACjC,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAI,IAAA,QAAA,EAAW,CAAA,QAAA,CAAS,QAAS,EAAA,CAAA;AACjC,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,EAAE,CAAA,CAAA;AAAA,GACpC,EAAA,CAAC,UAAY,EAAA,OAAO,CAAC,CAAA,CAAA;AACxB,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,SAAW,EAAA,CAAA,EAAG,SAAa,IAAA,EAAE,CAAI,CAAA,EAAA,aAAA,GAAgB,WAAc,GAAA,EAAE,CAC/D,CAAA,EAAA,gBAAA,IAAoB,CAAC,aAAA,GAAgB,cAAc,EACrD,CAAA,WAAA,CAAA;AAAA,MACA,WAAW,KAAS,IAAA,OAAA;AAAA,MACpB,IAAM,EAAA,KAAA,KAAU,aAAgB,GAAA,KAAA,CAAA,GAAY,KAAM,CAAA,YAAA;AAAA,MAClD,YAAc,EAAA,gBAAA;AAAA,MACd,YAAc,EAAA,gBAAA;AAAA,MAEb,QAAA,EAAA,KAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/dist/charts/util/LegendContainer.js

@@ -10,6 +10,7 @@ const [legendContainerMethods, , LegendContainer] = makeImperativeComponent()({
   },
   methods: {
     highlight(setState, highlightedBarGroup) {
+      console.log(highlightedBarGroup);
       setState({ highlightedBarGroup });
     }
   },

package/dist/charts/util/LegendContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LegendContainer.js","sources":["../../../src/charts/util/LegendContainer.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\nimport { ColoredLegendItem } from './ColoredLegendItem';\nimport { makeImperativeComponent } from '@apia/util';\nimport { NumberedLegendItem } from './NumberedLegendItem';\n\nexport type TChartReference = {\n  color: string;\n  title: string;\n}[];\n\nexport const [legendContainerMethods, , LegendContainer] =\n  makeImperativeComponent<\n    {\n      references: TChartReference;\n      itemClassName?: string;\n      avoidEvent?: boolean;\n      useNumbered?: boolean;\n    },\n    never\n  >()({\n    initialState: {\n      highlightedBarGroup: '',\n    },\n    methods: {\n      highlight(setState, highlightedBarGroup: string) {\n        setState({ highlightedBarGroup });\n      },\n    },\n    Component: ({\n      references,\n      highlightedBarGroup,\n      avoidEvent,\n      useNumbered,\n    }) => {\n      return (\n        <Box className={`legendContainer`}>\n          {!useNumbered\n            ? references.map((data) => {\n                return (\n                  <ColoredLegendItem\n                    isHighlighted={data.title === highlightedBarGroup}\n                    isAnyHighlighted={highlightedBarGroup !== ''}\n                    groupId={data.title}\n                    key={data.title}\n                    color={data.color}\n                    title={data.title}\n                    avoidEvent={avoidEvent ?? false}\n                  />\n                );\n              })\n            : references.map((data, i) => {\n                return (\n                  <NumberedLegendItem\n                    isHighlighted={data.title === highlightedBarGroup}\n                    isAnyHighlighted={highlightedBarGroup !== ''}\n                    groupId={data.title}\n                    key={data.title}\n                    position={`${i + 1}`}\n                    title={data.title}\n                    avoidEvent={avoidEvent ?? false}\n                  />\n                );\n              })}\n        </Box>\n      );\n    },\n  });\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,CAAC,sBAAwB,IAAE,eAAe,CAAA,GACrD,yBAQI,CAAA;AAAA,EACF,YAAc,EAAA;AAAA,IACZ,mBAAqB,EAAA,EAAA;AAAA,GACvB;AAAA,EACA,OAAS,EAAA;AAAA,IACP,SAAA,CAAU,UAAU,mBAA6B,EAAA;AAC/C,MAAS,QAAA,CAAA,EAAE,qBAAqB,CAAA,CAAA;AAAA,KAClC;AAAA,GACF;AAAA,EACA,WAAW,CAAC;AAAA,IACV,UAAA;AAAA,IACA,mBAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,GACI,KAAA;AACJ,IACE,uBAAA,GAAA,CAAC,OAAI,SAAW,EAAA,CAAA,eAAA,CAAA,EACb,WAAC,WACE,GAAA,UAAA,CAAW,GAAI,CAAA,CAAC,IAAS,KAAA;AACvB,MACE,uBAAA,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAe,KAAK,KAAU,KAAA,mBAAA;AAAA,UAC9B,kBAAkB,mBAAwB,KAAA,EAAA;AAAA,UAC1C,SAAS,IAAK,CAAA,KAAA;AAAA,UAEd,OAAO,IAAK,CAAA,KAAA;AAAA,UACZ,OAAO,IAAK,CAAA,KAAA;AAAA,UACZ,YAAY,UAAc,IAAA,KAAA;AAAA,SAAA;AAAA,QAHrB,IAAK,CAAA,KAAA;AAAA,OAIZ,CAAA;AAAA,KAEH,CACD,GAAA,UAAA,CAAW,GAAI,CAAA,CAAC,MAAM,CAAM,KAAA;AAC1B,MACE,uBAAA,GAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAe,KAAK,KAAU,KAAA,mBAAA;AAAA,UAC9B,kBAAkB,mBAAwB,KAAA,EAAA;AAAA,UAC1C,SAAS,IAAK,CAAA,KAAA;AAAA,UAEd,QAAA,EAAU,CAAG,EAAA,CAAA,GAAI,CAAC,CAAA,CAAA;AAAA,UAClB,OAAO,IAAK,CAAA,KAAA;AAAA,UACZ,YAAY,UAAc,IAAA,KAAA;AAAA,SAAA;AAAA,QAHrB,IAAK,CAAA,KAAA;AAAA,OAIZ,CAAA;AAAA,KAEH,CACP,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,CAAC;;;;"}
+{"version":3,"file":"LegendContainer.js","sources":["../../../src/charts/util/LegendContainer.tsx"],"sourcesContent":["import { Box } from '@apia/theme';\nimport { ColoredLegendItem } from './ColoredLegendItem';\nimport { makeImperativeComponent } from '@apia/util';\nimport { NumberedLegendItem } from './NumberedLegendItem';\n\nexport type TChartReference = {\n  color: string;\n  title: string;\n}[];\n\nexport const [legendContainerMethods, , LegendContainer] =\n  makeImperativeComponent<\n    {\n      references: TChartReference;\n      itemClassName?: string;\n      avoidEvent?: boolean;\n      useNumbered?: boolean;\n    },\n    never\n  >()({\n    initialState: {\n      highlightedBarGroup: '',\n    },\n    methods: {\n      highlight(setState, highlightedBarGroup: string) {\n        console.log(highlightedBarGroup);\n\n        setState({ highlightedBarGroup });\n      },\n    },\n    Component: ({\n      references,\n      highlightedBarGroup,\n      avoidEvent,\n      useNumbered,\n    }) => {\n      return (\n        <Box className={`legendContainer`}>\n          {!useNumbered\n            ? references.map((data) => {\n                return (\n                  <ColoredLegendItem\n                    isHighlighted={data.title === highlightedBarGroup}\n                    isAnyHighlighted={highlightedBarGroup !== ''}\n                    groupId={data.title}\n                    key={data.title}\n                    color={data.color}\n                    title={data.title}\n                    avoidEvent={avoidEvent ?? false}\n                  />\n                );\n              })\n            : references.map((data, i) => {\n                return (\n                  <NumberedLegendItem\n                    isHighlighted={data.title === highlightedBarGroup}\n                    isAnyHighlighted={highlightedBarGroup !== ''}\n                    groupId={data.title}\n                    key={data.title}\n                    position={`${i + 1}`}\n                    title={data.title}\n                    avoidEvent={avoidEvent ?? false}\n                  />\n                );\n              })}\n        </Box>\n      );\n    },\n  });\n"],"names":[],"mappings":";;;;;;AAUO,MAAM,CAAC,sBAAwB,IAAE,eAAe,CAAA,GACrD,yBAQI,CAAA;AAAA,EACF,YAAc,EAAA;AAAA,IACZ,mBAAqB,EAAA,EAAA;AAAA,GACvB;AAAA,EACA,OAAS,EAAA;AAAA,IACP,SAAA,CAAU,UAAU,mBAA6B,EAAA;AAC/C,MAAA,OAAA,CAAQ,IAAI,mBAAmB,CAAA,CAAA;AAE/B,MAAS,QAAA,CAAA,EAAE,qBAAqB,CAAA,CAAA;AAAA,KAClC;AAAA,GACF;AAAA,EACA,WAAW,CAAC;AAAA,IACV,UAAA;AAAA,IACA,mBAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,GACI,KAAA;AACJ,IACE,uBAAA,GAAA,CAAC,OAAI,SAAW,EAAA,CAAA,eAAA,CAAA,EACb,WAAC,WACE,GAAA,UAAA,CAAW,GAAI,CAAA,CAAC,IAAS,KAAA;AACvB,MACE,uBAAA,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAe,KAAK,KAAU,KAAA,mBAAA;AAAA,UAC9B,kBAAkB,mBAAwB,KAAA,EAAA;AAAA,UAC1C,SAAS,IAAK,CAAA,KAAA;AAAA,UAEd,OAAO,IAAK,CAAA,KAAA;AAAA,UACZ,OAAO,IAAK,CAAA,KAAA;AAAA,UACZ,YAAY,UAAc,IAAA,KAAA;AAAA,SAAA;AAAA,QAHrB,IAAK,CAAA,KAAA;AAAA,OAIZ,CAAA;AAAA,KAEH,CACD,GAAA,UAAA,CAAW,GAAI,CAAA,CAAC,MAAM,CAAM,KAAA;AAC1B,MACE,uBAAA,GAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAe,KAAK,KAAU,KAAA,mBAAA;AAAA,UAC9B,kBAAkB,mBAAwB,KAAA,EAAA;AAAA,UAC1C,SAAS,IAAK,CAAA,KAAA;AAAA,UAEd,QAAA,EAAU,CAAG,EAAA,CAAA,GAAI,CAAC,CAAA,CAAA;AAAA,UAClB,OAAO,IAAK,CAAA,KAAA;AAAA,UACZ,YAAY,UAAc,IAAA,KAAA;AAAA,SAAA;AAAA,QAHrB,IAAK,CAAA,KAAA;AAAA,OAIZ,CAAA;AAAA,KAEH,CACP,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,CAAC;;;;"}

package/dist/charts/util/NumberedLegendItem.js

@@ -23,7 +23,7 @@ const NumberedLegendItem = ({
     if (avoidEvent) {
       return;
     }
-    ApiaUtil.instance.tooltips.closeAll();
+    new ApiaUtil().tooltips.closeAll();
     chartMethods(chartId, "highlight", "");
   }, [avoidEvent, chartId]);
   return /* @__PURE__ */ jsx(

package/dist/charts/util/NumberedLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberedLegendItem.js","sources":["../../../src/charts/util/NumberedLegendItem.tsx"],"sourcesContent":["import { SimpleButton } from '@apia/components';\nimport { useCallback } from 'react';\nimport { chartMethods } from '../ChartRenderer';\nimport { useImperativeComponentContext } from '@apia/util';\nimport { ApiaUtil } from '@apia/components';\n\nconst NumberedLegendItem = ({\n  groupId,\n  title,\n  className,\n  isHighlighted,\n  isAnyHighlighted,\n  avoidEvent,\n}: {\n  groupId: string;\n  title: string;\n  position: string;\n  className?: string;\n  isHighlighted: boolean;\n  isAnyHighlighted: boolean;\n  avoidEvent: boolean;\n}) => {\n  const { id: chartId } = useImperativeComponentContext();\n  const handleMouseEnter = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    chartMethods(chartId, 'highlight', groupId);\n  }, [avoidEvent, chartId, groupId]);\n  const handleMouseLeave = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    ApiaUtil.instance.tooltips.closeAll();\n    chartMethods(chartId, 'highlight', '');\n  }, [avoidEvent, chartId]);\n  return (\n    <SimpleButton\n      variant=\"link\"\n      className={`${className ?? ''} ${isHighlighted ? 'highlight' : ''} ${\n        isAnyHighlighted && !isHighlighted ? 'isBlurred' : ''\n      } legendItem`}\n      sx={{\n        opacity: isAnyHighlighted && !isHighlighted ? '0.15' : '1',\n      }}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {title}\n    </SimpleButton>\n  );\n};\n\nexport { NumberedLegendItem };\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,qBAAqB,CAAC;AAAA,EAC1B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AACF,CAQM,KAAA;AACJ,EAAA,MAAM,EAAE,EAAA,EAAI,OAAQ,EAAA,GAAI,6BAA8B,EAAA,CAAA;AACtD,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,OAAO,CAAA,CAAA;AAAA,GACzC,EAAA,CAAC,UAAY,EAAA,OAAA,EAAS,OAAO,CAAC,CAAA,CAAA;AACjC,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAS,QAAA,CAAA,QAAA,CAAS,SAAS,QAAS,EAAA,CAAA;AACpC,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,EAAE,CAAA,CAAA;AAAA,GACpC,EAAA,CAAC,UAAY,EAAA,OAAO,CAAC,CAAA,CAAA;AACxB,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,SAAW,EAAA,CAAA,EAAG,SAAa,IAAA,EAAE,CAAI,CAAA,EAAA,aAAA,GAAgB,WAAc,GAAA,EAAE,CAC/D,CAAA,EAAA,gBAAA,IAAoB,CAAC,aAAA,GAAgB,cAAc,EACrD,CAAA,WAAA,CAAA;AAAA,MACA,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,gBAAA,IAAoB,CAAC,aAAA,GAAgB,MAAS,GAAA,GAAA;AAAA,OACzD;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,YAAc,EAAA,gBAAA;AAAA,MAEb,QAAA,EAAA,KAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"NumberedLegendItem.js","sources":["../../../src/charts/util/NumberedLegendItem.tsx"],"sourcesContent":["import { SimpleButton } from '@apia/components';\nimport { useCallback } from 'react';\nimport { chartMethods } from '../ChartRenderer';\nimport { useImperativeComponentContext } from '@apia/util';\nimport { ApiaUtil } from '@apia/components';\n\nconst NumberedLegendItem = ({\n  groupId,\n  title,\n  className,\n  isHighlighted,\n  isAnyHighlighted,\n  avoidEvent,\n}: {\n  groupId: string;\n  title: string;\n  position: string;\n  className?: string;\n  isHighlighted: boolean;\n  isAnyHighlighted: boolean;\n  avoidEvent: boolean;\n}) => {\n  const { id: chartId } = useImperativeComponentContext();\n  const handleMouseEnter = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    chartMethods(chartId, 'highlight', groupId);\n  }, [avoidEvent, chartId, groupId]);\n  const handleMouseLeave = useCallback(() => {\n    if (avoidEvent) {\n      return;\n    }\n    new ApiaUtil().tooltips.closeAll();\n    chartMethods(chartId, 'highlight', '');\n  }, [avoidEvent, chartId]);\n  return (\n    <SimpleButton\n      variant=\"link\"\n      className={`${className ?? ''} ${isHighlighted ? 'highlight' : ''} ${\n        isAnyHighlighted && !isHighlighted ? 'isBlurred' : ''\n      } legendItem`}\n      sx={{\n        opacity: isAnyHighlighted && !isHighlighted ? '0.15' : '1',\n      }}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n    >\n      {title}\n    </SimpleButton>\n  );\n};\n\nexport { NumberedLegendItem };\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,qBAAqB,CAAC;AAAA,EAC1B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,UAAA;AACF,CAQM,KAAA;AACJ,EAAA,MAAM,EAAE,EAAA,EAAI,OAAQ,EAAA,GAAI,6BAA8B,EAAA,CAAA;AACtD,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,OAAO,CAAA,CAAA;AAAA,GACzC,EAAA,CAAC,UAAY,EAAA,OAAA,EAAS,OAAO,CAAC,CAAA,CAAA;AACjC,EAAM,MAAA,gBAAA,GAAmB,YAAY,MAAM;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAA,OAAA;AAAA,KACF;AACA,IAAI,IAAA,QAAA,EAAW,CAAA,QAAA,CAAS,QAAS,EAAA,CAAA;AACjC,IAAa,YAAA,CAAA,OAAA,EAAS,aAAa,EAAE,CAAA,CAAA;AAAA,GACpC,EAAA,CAAC,UAAY,EAAA,OAAO,CAAC,CAAA,CAAA;AACxB,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,MAAA;AAAA,MACR,SAAW,EAAA,CAAA,EAAG,SAAa,IAAA,EAAE,CAAI,CAAA,EAAA,aAAA,GAAgB,WAAc,GAAA,EAAE,CAC/D,CAAA,EAAA,gBAAA,IAAoB,CAAC,aAAA,GAAgB,cAAc,EACrD,CAAA,WAAA,CAAA;AAAA,MACA,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,gBAAA,IAAoB,CAAC,aAAA,GAAgB,MAAS,GAAA,GAAA;AAAA,OACzD;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,YAAc,EAAA,gBAAA;AAAA,MAEb,QAAA,EAAA,KAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/dist/charts/verticalBars/Bar.js

@@ -45,7 +45,7 @@ const Bar = ({
           );
           if (barName === parsedData[barGroup.index].columnName || columnName === parsedData[barGroup.index].columnName) {
             if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
-              ApiaUtil.instance.tooltips.open({
+              new ApiaUtil().tooltips.open({
                 children: /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     "div",
@@ -72,7 +72,7 @@ const Bar = ({
           );
           if (barName === bar.key && columnName === parsedData[barGroup.index].columnName) {
             if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
-              ApiaUtil.instance.tooltips.open({
+              new ApiaUtil().tooltips.open({
                 children: /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     "div",
@@ -92,7 +92,7 @@ const Bar = ({
             }
           } else if (barName === bar.key && currentBar && columnName === "") {
             if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
-              ApiaUtil.instance.tooltips.open({
+              new ApiaUtil().tooltips.open({
                 children: parsedData.map((dat, i) => {
                   return /* @__PURE__ */ jsxs("div", { children: [
                     /* @__PURE__ */ jsx(
@@ -107,7 +107,9 @@ const Bar = ({
                       }
                     ),
                     chart.showValues && /* @__PURE__ */ jsx("div", { children: dat[barName] }),
-                    /* @__PURE__ */ jsx("div", {}),
+                    /* @__PURE__ */ jsx("div", { children: chart.showAxisXTitle && chart.showLegend ? Object.keys(dat).find(
+                      (key) => dat[key] === dat[barName]
+                    ) : "" }),
                     parsedData[i + 1] && /* @__PURE__ */ jsx("hr", {})
                   ] }, `${dat.columnName}_${dat[barName]}`);
                 }),
@@ -125,7 +127,7 @@ const Bar = ({
         );
         if (barName.split(" - ")[0] === bar.key && barName.split(" - ")[1] === set.key && columnName === parsedData[barGroup.index].columnName) {
           if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
-            ApiaUtil.instance.tooltips.open({
+            new ApiaUtil().tooltips.open({
               children: /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   "div",

package/dist/charts/verticalBars/Bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.js","sources":["../../../src/charts/verticalBars/Bar.tsx"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport { BarGroup, BarGroupBar } from '@visx/shape/lib/types';\nimport { TApiaChartColorDisposition, TChartRendererProps } from '../types';\nimport { Box } from '@apia/theme';\nimport { localPoint } from '@visx/event';\nimport { IParsedColumn } from './VerticalBars';\nimport { arrayOrArray, useImperativeComponentEvents } from '@apia/util';\nimport { legendContainerMethods } from '../util/LegendContainer';\nimport { useContext, useState, useMemo, useRef } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { TChartEvents, chartMethods } from '../ChartRenderer';\nimport { ApiaUtil } from '@apia/components';\n\nexport const Bar = ({\n  bar,\n  barGroup,\n  chart,\n  parsedData,\n  isSingle,\n  setsWithColor,\n}: Pick<TChartRendererProps, 'chart'> & {\n  isSingle: boolean;\n  bar: BarGroupBar<string>;\n  barGroup: BarGroup<string>;\n  parsedData: IParsedColumn[];\n  setsWithColor: TApiaChartColorDisposition[];\n}) => {\n  const column = arrayOrArray(chart.dataSets.data)[bar.index];\n  const set = arrayOrArray(column?.sets)[barGroup.index];\n  const currentBarColor = setsWithColor.find(\n    (innerSet) =>\n      innerSet.columnName === column.name && innerSet.key === set.key,\n  )?.color;\n  const [isHighlighted, setIsHighlighted] = useState(false);\n  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);\n  const ref = useRef<SVGPathElement | null>(null);\n  useImperativeComponentEvents<TChartEvents>({\n    highlight(barNameColumn) {\n      let barName = barNameColumn;\n      let columnName = '';\n      if (barNameColumn.includes('_$_')) {\n        barName = barNameColumn.split('_$_')[0];\n        columnName = barNameColumn.split('_$_')[1];\n        if (isSingle && barNameColumn !== '' && barNameColumn !== undefined) {\n          barName = barNameColumn.split('_$_')[1];\n          columnName = barNameColumn.split('_$_')[1];\n        }\n      }\n      if (barName.split(' - ').length === 1) {\n        if (arrayOrArray(chart.dataSets.data).length === 1) {\n          setIsHighlighted(barName === parsedData[barGroup.index].columnName);\n          setIsAnyHighlighted(\n            barName !== parsedData[barGroup.index].columnName && barName !== '',\n          );\n          if (\n            barName === parsedData[barGroup.index].columnName ||\n            columnName === parsedData[barGroup.index].columnName\n          ) {\n            if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n              ApiaUtil.instance.tooltips.open({\n                children: (\n                  <>\n                    <div\n                      style={{\n                        color: currentBarColor,\n                      }}\n                    >\n                      <strong>\n                        {chart.showAxisXTitle\n                          ? parsedData[barGroup.index].columnName\n                          : chart.showLegend\n                            ? bar.key\n                            : ''}\n                      </strong>\n                    </div>\n                    {chart.showValues && <div>{bar.value}</div>}\n                    <div>\n                      {chart.showAxisXTitle && chart.showLegend ? bar.key : ''}\n                    </div>\n                  </>\n                ),\n                attachToElement: () => ref.current as unknown as HTMLElement,\n                attachToElementAnchorPoint: 'center',\n              });\n            }\n          }\n        } else {\n          setIsHighlighted(barName === bar.key);\n          setIsAnyHighlighted(barName !== bar.key && barName !== '');\n          const currentBar = document.querySelector(\n            `.${parsedData[barGroup.index].columnName}__${bar.key}`,\n          );\n          if (\n            barName === bar.key &&\n            columnName === parsedData[barGroup.index].columnName\n          ) {\n            if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n              ApiaUtil.instance.tooltips.open({\n                children: (\n                  <>\n                    <div\n                      style={{\n                        color: currentBarColor,\n                      }}\n                    >\n                      <strong>\n                        {chart.showAxisXTitle\n                          ? parsedData[barGroup.index].columnName\n                          : chart.showLegend\n                            ? bar.key\n                            : ''}\n                      </strong>\n                    </div>\n                    {chart.showValues && <div>{bar.value}</div>}\n                    <div>\n                      {chart.showAxisXTitle && chart.showLegend ? bar.key : ''}\n                    </div>\n                  </>\n                ),\n                attachToElement: () => ref.current as unknown as HTMLElement,\n                attachToElementAnchorPoint: 'center',\n              });\n            }\n          } else if (barName === bar.key && currentBar && columnName === '') {\n            if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n              ApiaUtil.instance.tooltips.open({\n                children: parsedData.map((dat, i) => {\n                  return (\n                    <div key={`${dat.columnName}_${dat[barName]}`}>\n                      <div\n                        style={{\n                          color: currentBarColor,\n                        }}\n                      >\n                        <strong>\n                          {chart.showAxisXTitle\n                            ? dat.columnName\n                            : chart.showLegend\n                              ? Object.keys(dat).find(\n                                  (key) => dat[key] === dat[barName],\n                                )\n                              : ''}\n                        </strong>\n                      </div>\n                      {chart.showValues && <div>{dat[barName]}</div>}\n                      <div>\n                        {/*{chart.showAxisXTitle && chart.showLegend\n                          ? Object.keys(dat).find(\n                              (key) => dat[key] === dat[barName],\n                            )\n                          : ''}*/}\n                      </div>\n                      {parsedData[i + 1] && <hr />}\n                    </div>\n                  );\n                }),\n                attachToMousePosition: true,\n              });\n            }\n          }\n        }\n      } else if (barName.split(' - ').length === 2) {\n        setIsHighlighted(\n          barName.split(' - ')[0] === bar.key &&\n            barName.split(' - ')[1] === set.key,\n        );\n        setIsAnyHighlighted(\n          barName.split(' - ')[0] !== bar.key && barName.split(' - ')[0] !== '',\n        );\n        if (\n          barName.split(' - ')[0] === bar.key &&\n          barName.split(' - ')[1] === set.key &&\n          columnName === parsedData[barGroup.index].columnName\n        ) {\n          if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n            ApiaUtil.instance.tooltips.open({\n              children: (\n                <>\n                  <div\n                    style={{\n                      color: currentBarColor,\n                    }}\n                  >\n                    <strong>\n                      {chart.showAxisXTitle\n                        ? parsedData[barGroup.index].columnName\n                        : chart.showLegend\n                          ? bar.key\n                          : ''}\n                    </strong>\n                  </div>\n                  {chart.showValues && <div>{bar.value}</div>}\n                  <div>\n                    {chart.showAxisXTitle && chart.showLegend ? bar.key : ''}\n                  </div>\n                </>\n              ),\n              attachToElement: () => ref.current as unknown as HTMLElement,\n              attachToElementAnchorPoint: 'center',\n            });\n          }\n        }\n      }\n    },\n  });\n  const { chartId } = useContext(ChartContext);\n\n  return (\n    <g>\n      {/* {chart.showValues && (\n        <text\n          x={bar.x + bar.width / 2}\n          y={bar.y - 5}\n          width={bar.width}\n          height={bar.height}\n          textAnchor=\"middle\"\n          style={{\n            display: isHighlighted ? 'block' : 'none',\n            opacity: isHighlighted ? 1 : 0,\n            transition: 'opacity 500ms',\n          }}\n        >\n          {bar.value}\n        </text>\n      )} */}\n\n      <Box\n        as=\"rect\"\n        className={`chart__barRect ${parsedData[barGroup.index].columnName}__${\n          bar.key\n        }`}\n        ref={ref}\n        sx={useMemo(\n          () => ({\n            fill: isAnyHighlighted\n              ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}`\n              : currentBarColor,\n            '&:hover': {\n              fill: `#${tinycolor(currentBarColor).saturate(25).toHex()}`,\n            },\n            transition: 'fill 500ms, opacity 500ms',\n            x: bar.x,\n            y: bar.y,\n            width: bar.width,\n            opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,\n            height: bar.height > 0 ? bar.height : 0,\n          }),\n          [\n            bar.height,\n            bar.width,\n            bar.x,\n            bar.y,\n            currentBarColor,\n            isAnyHighlighted,\n            isHighlighted,\n          ],\n        )}\n        onMouseEnter={(ev) => {\n          console.log(bar.key, parsedData[barGroup.index].columnName);\n\n          if (!isSingle) {\n            legendContainerMethods.highlight(chartId, bar.key);\n          } else {\n            legendContainerMethods.highlight(\n              chartId,\n              parsedData[barGroup.index].columnName,\n            );\n          }\n          chartMethods(\n            chartId,\n            'highlight',\n            `${bar.key}_$_${parsedData[barGroup.index].columnName}`,\n          );\n          (ev.target as HTMLElement).classList?.add('over');\n          const point = {\n            x: localPoint(ev)?.x,\n            y: localPoint(ev)?.y,\n          };\n          if (!point || !chart.showValues) return;\n        }}\n        onMouseLeave={(ev) => {\n          legendContainerMethods.highlight(chartId, '');\n          chartMethods(chartId, 'highlight', '');\n\n          (ev.target as HTMLElement).classList?.remove('over');\n        }}\n      >\n        <animate\n          attributeName=\"height\"\n          from={0}\n          to={bar.height}\n          dur=\"0.5s\"\n          calcMode={'paced'}\n          keySplines={'0.5 0 0.5 1;'}\n          keyTimes={'0; 1'}\n        />\n        <animate\n          attributeName=\"y\"\n          from={bar.y + bar.height}\n          to={bar.y}\n          dur=\"0.5s\"\n          calcMode={'paced'}\n          keySplines={'0.5 0 0.5 1;'}\n          keyTimes={'0; 1'}\n        />\n      </Box>\n    </g>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Bar.js","sources":["../../../src/charts/verticalBars/Bar.tsx"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport { BarGroup, BarGroupBar } from '@visx/shape/lib/types';\nimport { TApiaChartColorDisposition, TChartRendererProps } from '../types';\nimport { Box } from '@apia/theme';\nimport { localPoint } from '@visx/event';\nimport { IParsedColumn } from './VerticalBars';\nimport { arrayOrArray, useImperativeComponentEvents } from '@apia/util';\nimport { legendContainerMethods } from '../util/LegendContainer';\nimport { useContext, useState, useMemo, useRef } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { TChartEvents, chartMethods } from '../ChartRenderer';\nimport { ApiaUtil } from '@apia/components';\n\nexport const Bar = ({\n  bar,\n  barGroup,\n  chart,\n  parsedData,\n  isSingle,\n  setsWithColor,\n}: Pick<TChartRendererProps, 'chart'> & {\n  isSingle: boolean;\n  bar: BarGroupBar<string>;\n  barGroup: BarGroup<string>;\n  parsedData: IParsedColumn[];\n  setsWithColor: TApiaChartColorDisposition[];\n}) => {\n  const column = arrayOrArray(chart.dataSets.data)[bar.index];\n  const set = arrayOrArray(column?.sets)[barGroup.index];\n  const currentBarColor = setsWithColor.find(\n    (innerSet) =>\n      innerSet.columnName === column.name && innerSet.key === set.key,\n  )?.color;\n  const [isHighlighted, setIsHighlighted] = useState(false);\n  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);\n  const ref = useRef<SVGPathElement | null>(null);\n  useImperativeComponentEvents<TChartEvents>({\n    highlight(barNameColumn) {\n      let barName = barNameColumn;\n      let columnName = '';\n      if (barNameColumn.includes('_$_')) {\n        barName = barNameColumn.split('_$_')[0];\n        columnName = barNameColumn.split('_$_')[1];\n        if (isSingle && barNameColumn !== '' && barNameColumn !== undefined) {\n          barName = barNameColumn.split('_$_')[1];\n          columnName = barNameColumn.split('_$_')[1];\n        }\n      }\n      if (barName.split(' - ').length === 1) {\n        if (arrayOrArray(chart.dataSets.data).length === 1) {\n          setIsHighlighted(barName === parsedData[barGroup.index].columnName);\n          setIsAnyHighlighted(\n            barName !== parsedData[barGroup.index].columnName && barName !== '',\n          );\n          if (\n            barName === parsedData[barGroup.index].columnName ||\n            columnName === parsedData[barGroup.index].columnName\n          ) {\n            if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n              new ApiaUtil().tooltips.open({\n                children: (\n                  <>\n                    <div\n                      style={{\n                        color: currentBarColor,\n                      }}\n                    >\n                      <strong>\n                        {chart.showAxisXTitle\n                          ? parsedData[barGroup.index].columnName\n                          : chart.showLegend\n                          ? bar.key\n                          : ''}\n                      </strong>\n                    </div>\n                    {chart.showValues && <div>{bar.value}</div>}\n                    <div>\n                      {chart.showAxisXTitle && chart.showLegend ? bar.key : ''}\n                    </div>\n                  </>\n                ),\n                attachToElement: () => ref.current as unknown as HTMLElement,\n                attachToElementAnchorPoint: 'center',\n              });\n            }\n          }\n        } else {\n          setIsHighlighted(barName === bar.key);\n          setIsAnyHighlighted(barName !== bar.key && barName !== '');\n          const currentBar = document.querySelector(\n            `.${parsedData[barGroup.index].columnName}__${bar.key}`,\n          );\n          if (\n            barName === bar.key &&\n            columnName === parsedData[barGroup.index].columnName\n          ) {\n            if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n              new ApiaUtil().tooltips.open({\n                children: (\n                  <>\n                    <div\n                      style={{\n                        color: currentBarColor,\n                      }}\n                    >\n                      <strong>\n                        {chart.showAxisXTitle\n                          ? parsedData[barGroup.index].columnName\n                          : chart.showLegend\n                          ? bar.key\n                          : ''}\n                      </strong>\n                    </div>\n                    {chart.showValues && <div>{bar.value}</div>}\n                    <div>\n                      {chart.showAxisXTitle && chart.showLegend ? bar.key : ''}\n                    </div>\n                  </>\n                ),\n                attachToElement: () => ref.current as unknown as HTMLElement,\n                attachToElementAnchorPoint: 'center',\n              });\n            }\n          } else if (barName === bar.key && currentBar && columnName === '') {\n            if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n              new ApiaUtil().tooltips.open({\n                children: parsedData.map((dat, i) => {\n                  return (\n                    <div key={`${dat.columnName}_${dat[barName]}`}>\n                      <div\n                        style={{\n                          color: currentBarColor,\n                        }}\n                      >\n                        <strong>\n                          {chart.showAxisXTitle\n                            ? dat.columnName\n                            : chart.showLegend\n                            ? Object.keys(dat).find(\n                                (key) => dat[key] === dat[barName],\n                              )\n                            : ''}\n                        </strong>\n                      </div>\n                      {chart.showValues && <div>{dat[barName]}</div>}\n                      <div>\n                        {chart.showAxisXTitle && chart.showLegend\n                          ? Object.keys(dat).find(\n                              (key) => dat[key] === dat[barName],\n                            )\n                          : ''}\n                      </div>\n                      {parsedData[i + 1] && <hr />}\n                    </div>\n                  );\n                }),\n                attachToMousePosition: true,\n              });\n            }\n          }\n        }\n      } else if (barName.split(' - ').length === 2) {\n        setIsHighlighted(\n          barName.split(' - ')[0] === bar.key &&\n            barName.split(' - ')[1] === set.key,\n        );\n        setIsAnyHighlighted(\n          barName.split(' - ')[0] !== bar.key && barName.split(' - ')[0] !== '',\n        );\n        if (\n          barName.split(' - ')[0] === bar.key &&\n          barName.split(' - ')[1] === set.key &&\n          columnName === parsedData[barGroup.index].columnName\n        ) {\n          if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n            new ApiaUtil().tooltips.open({\n              children: (\n                <>\n                  <div\n                    style={{\n                      color: currentBarColor,\n                    }}\n                  >\n                    <strong>\n                      {chart.showAxisXTitle\n                        ? parsedData[barGroup.index].columnName\n                        : chart.showLegend\n                        ? bar.key\n                        : ''}\n                    </strong>\n                  </div>\n                  {chart.showValues && <div>{bar.value}</div>}\n                  <div>\n                    {chart.showAxisXTitle && chart.showLegend ? bar.key : ''}\n                  </div>\n                </>\n              ),\n              attachToElement: () => ref.current as unknown as HTMLElement,\n              attachToElementAnchorPoint: 'center',\n            });\n          }\n        }\n      }\n    },\n  });\n  const { chartId } = useContext(ChartContext);\n\n  return (\n    <g>\n      {/* {chart.showValues && (\n        <text\n          x={bar.x + bar.width / 2}\n          y={bar.y - 5}\n          width={bar.width}\n          height={bar.height}\n          textAnchor=\"middle\"\n          style={{\n            display: isHighlighted ? 'block' : 'none',\n            opacity: isHighlighted ? 1 : 0,\n            transition: 'opacity 500ms',\n          }}\n        >\n          {bar.value}\n        </text>\n      )} */}\n\n      <Box\n        as=\"rect\"\n        className={`chart__barRect ${parsedData[barGroup.index].columnName}__${\n          bar.key\n        }`}\n        ref={ref}\n        sx={useMemo(\n          () => ({\n            fill: isAnyHighlighted\n              ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}`\n              : currentBarColor,\n            '&:hover': {\n              fill: `#${tinycolor(currentBarColor).saturate(25).toHex()}`,\n            },\n            transition: 'fill 500ms, opacity 500ms',\n            x: bar.x,\n            y: bar.y,\n            width: bar.width,\n            opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,\n            height: bar.height > 0 ? bar.height : 0,\n          }),\n          [\n            bar.height,\n            bar.width,\n            bar.x,\n            bar.y,\n            currentBarColor,\n            isAnyHighlighted,\n            isHighlighted,\n          ],\n        )}\n        onMouseEnter={(ev) => {\n          console.log(bar.key, parsedData[barGroup.index].columnName);\n\n          if (!isSingle) {\n            legendContainerMethods.highlight(chartId, bar.key);\n          } else {\n            legendContainerMethods.highlight(\n              chartId,\n              parsedData[barGroup.index].columnName,\n            );\n          }\n          chartMethods(\n            chartId,\n            'highlight',\n            `${bar.key}_$_${parsedData[barGroup.index].columnName}`,\n          );\n          (ev.target as HTMLElement).classList?.add('over');\n          const point = {\n            x: localPoint(ev)?.x,\n            y: localPoint(ev)?.y,\n          };\n          if (!point || !chart.showValues) return;\n        }}\n        onMouseLeave={(ev) => {\n          legendContainerMethods.highlight(chartId, '');\n          chartMethods(chartId, 'highlight', '');\n\n          (ev.target as HTMLElement).classList?.remove('over');\n        }}\n      >\n        <animate\n          attributeName=\"height\"\n          from={0}\n          to={bar.height}\n          dur=\"0.5s\"\n          calcMode={'paced'}\n          keySplines={'0.5 0 0.5 1;'}\n          keyTimes={'0; 1'}\n        />\n        <animate\n          attributeName=\"y\"\n          from={bar.y + bar.height}\n          to={bar.y}\n          dur=\"0.5s\"\n          calcMode={'paced'}\n          keySplines={'0.5 0 0.5 1;'}\n          keyTimes={'0; 1'}\n        />\n      </Box>\n    </g>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/charts/waterfallBars/WaterfallBar.js

@@ -44,7 +44,7 @@ const WaterfallBar = ({
         }, [fill, height, width, x, y]),
         onMouseEnter: (ev) => {
           if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
-            ApiaUtil.instance.tooltips.open({
+            new ApiaUtil().tooltips.open({
               children: /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   "div",

package/dist/charts/waterfallBars/WaterfallBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"WaterfallBar.js","sources":["../../../src/charts/waterfallBars/WaterfallBar.tsx"],"sourcesContent":["import { Line } from '@visx/shape';\nimport { useMemo } from 'react';\nimport { TApiaChartDefinition } from '../types';\nimport tinycolor from 'tinycolor2';\nimport { Box } from '@apia/theme';\nimport { ApiaUtil } from '@apia/components';\n\nconst WaterfallBar = ({\n  width,\n  height,\n  x,\n  y,\n  fill,\n  x1,\n  lineY,\n  x2,\n  stroke,\n  strokeDashArray,\n  textX,\n  textY,\n  textContent,\n  isLast,\n  step,\n  columnName,\n  chart,\n}: {\n  width: number;\n  height: number;\n  x: string | number;\n  y: string | number;\n  fill: string;\n  x1: string | number;\n  x2: string | number;\n  lineY: string | number;\n  stroke: string;\n  strokeDashArray: string | number;\n  textX: string | number;\n  textY: string | number;\n  textContent: string;\n  isLast: boolean;\n  step: {\n    x: string;\n    y: string;\n    start: number;\n    end: number;\n    color: string;\n  };\n  columnName: string;\n  chart: TApiaChartDefinition;\n}) => {\n  return (\n    <>\n      <Box\n        as={'rect'}\n        sx={useMemo(() => {\n          return {\n            width: `${width}px`,\n            height: `${height}px`,\n            x: `${x}px`,\n            y: `${y}px`,\n            fill: `${fill}`,\n            '&:hover': {\n              fill: `#${tinycolor(fill).saturate(25).toHex()}`,\n            },\n            transition: 'fill 500ms',\n          };\n        }, [fill, height, width, x, y])}\n        onMouseEnter={(ev) => {\n          if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n            ApiaUtil.instance.tooltips.open({\n              children: (\n                <>\n                  <div\n                    style={{\n                      color: step.color,\n                    }}\n                  >\n                    <strong>\n                      {chart.showAxisXTitle\n                        ? columnName\n                        : chart.showLegend\n                          ? step.x\n                          : ''}\n                    </strong>\n                  </div>\n                  {chart.showValues && <div>{step.y}</div>}\n                  <div>\n                    {chart.showAxisXTitle && chart.showLegend ? step.x : ''}\n                  </div>\n                </>\n              ),\n              attachToElement: () => ev.target as HTMLElement,\n              attachToElementAnchorPoint: 'center',\n            });\n          }\n        }}\n      />\n\n      {!isLast && (\n        <Line\n          x1={x1}\n          x2={x2}\n          y1={lineY}\n          y2={lineY}\n          stroke={stroke}\n          strokeDasharray={strokeDashArray}\n        />\n      )}\n      {chart.showValues && (\n        <text textAnchor=\"middle\" x={textX} y={textY}>\n          {textContent}\n        </text>\n      )}\n    </>\n  );\n};\n\nexport { WaterfallBar };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"WaterfallBar.js","sources":["../../../src/charts/waterfallBars/WaterfallBar.tsx"],"sourcesContent":["import { Line } from '@visx/shape';\nimport { useMemo } from 'react';\nimport { TApiaChartDefinition } from '../types';\nimport tinycolor from 'tinycolor2';\nimport { Box } from '@apia/theme';\nimport { ApiaUtil } from '@apia/components';\n\nconst WaterfallBar = ({\n  width,\n  height,\n  x,\n  y,\n  fill,\n  x1,\n  lineY,\n  x2,\n  stroke,\n  strokeDashArray,\n  textX,\n  textY,\n  textContent,\n  isLast,\n  step,\n  columnName,\n  chart,\n}: {\n  width: number;\n  height: number;\n  x: string | number;\n  y: string | number;\n  fill: string;\n  x1: string | number;\n  x2: string | number;\n  lineY: string | number;\n  stroke: string;\n  strokeDashArray: string | number;\n  textX: string | number;\n  textY: string | number;\n  textContent: string;\n  isLast: boolean;\n  step: {\n    x: string;\n    y: string;\n    start: number;\n    end: number;\n    color: string;\n  };\n  columnName: string;\n  chart: TApiaChartDefinition;\n}) => {\n  return (\n    <>\n      <Box\n        as={'rect'}\n        sx={useMemo(() => {\n          return {\n            width: `${width}px`,\n            height: `${height}px`,\n            x: `${x}px`,\n            y: `${y}px`,\n            fill: `${fill}`,\n            '&:hover': {\n              fill: `#${tinycolor(fill).saturate(25).toHex()}`,\n            },\n            transition: 'fill 500ms',\n          };\n        }, [fill, height, width, x, y])}\n        onMouseEnter={(ev) => {\n          if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {\n            new ApiaUtil().tooltips.open({\n              children: (\n                <>\n                  <div\n                    style={{\n                      color: step.color,\n                    }}\n                  >\n                    <strong>\n                      {chart.showAxisXTitle\n                        ? columnName\n                        : chart.showLegend\n                        ? step.x\n                        : ''}\n                    </strong>\n                  </div>\n                  {chart.showValues && <div>{step.y}</div>}\n                  <div>\n                    {chart.showAxisXTitle && chart.showLegend ? step.x : ''}\n                  </div>\n                </>\n              ),\n              attachToElement: () => ev.target as HTMLElement,\n              attachToElementAnchorPoint: 'center',\n            });\n          }\n        }}\n      />\n\n      {!isLast && (\n        <Line\n          x1={x1}\n          x2={x2}\n          y1={lineY}\n          y2={lineY}\n          stroke={stroke}\n          strokeDasharray={strokeDashArray}\n        />\n      )}\n      {chart.showValues && (\n        <text textAnchor=\"middle\" x={textX} y={textY}>\n          {textContent}\n        </text>\n      )}\n    </>\n  );\n};\n\nexport { WaterfallBar };\n"],"names":[],"mappings":"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"}

package/dist/charts/waterfallBars/WaterfallBars.js

@@ -119,7 +119,7 @@ const WaterfallBars = ({
   const yDomain = useMemo(() => {
     const values = steps.flatMap((step) => [step.start, step.end]);
     const [min, max] = extent(values);
-    return min != null && max != null ? [min, max + 3] : void 0;
+    return min != null && max != null ? [min - 5, max + 5] : void 0;
   }, [steps]);
   const yScale = scaleLinear({
     domain: yDomain,
@@ -152,7 +152,7 @@ const WaterfallBars = ({
             width: chart.ratio.width,
             ref: elementRef,
             children: /* @__PURE__ */ jsxs(Group, { left: effectiveMargin.left, top: effectiveMargin.top, children: [
-              chart.showGrid && /* @__PURE__ */ jsx(GridRows, { scale: yScale, width: innerWidth, strokeDasharray: "5" }),
+              /* @__PURE__ */ jsx(GridRows, { scale: yScale, width: innerWidth, strokeDasharray: "5" }),
               steps.map((step, index) => {
                 const x = xScale(step.x);
                 const y = yScale(Math.max(step.start, step.end));
@@ -203,55 +203,14 @@ const WaterfallBars = ({
               /* @__PURE__ */ jsx(
                 AxisLeft,
                 {
-                  label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : "",
+                  label: "",
                   scale: yScale,
                   hideTicks: true,
                   tickLabelProps: () => ({
                     textAnchor: "end",
                     verticalAnchor: "middle",
                     display: chart.showAxisYTitle ? "auto" : "none"
-                  }),
-                  tickComponent: (props) => {
-                    let value = Number(props.formattedValue?.replace(",", ""));
-                    let counter = -1;
-                    const units = [
-                      "k",
-                      "M",
-                      "G",
-                      "T",
-                      "P",
-                      "E",
-                      "Z",
-                      "Y",
-                      "R",
-                      "Q"
-                    ];
-                    while (value >= 1e3) {
-                      value = value / 1e3;
-                      counter++;
-                    }
-                    let stringValue = `${value}`;
-                    if (stringValue.length > 3) {
-                      stringValue = stringValue.slice(0, 3);
-                    }
-                    if (stringValue.endsWith(".")) {
-                      stringValue = stringValue.replace(".", "");
-                    }
-                    const newValue = `${stringValue}${counter >= 0 ? units[counter] : ""}`;
-                    return /* @__PURE__ */ jsx(Fragment, { children: chart.showAxisYTitle && /* @__PURE__ */ jsx(
-                      "text",
-                      {
-                        dx: props.dx,
-                        dy: props.dy,
-                        fill: props.fill,
-                        fontSize: props.fontSize,
-                        textAnchor: props.textAnchor,
-                        x: props.x,
-                        y: props.y,
-                        children: newValue
-                      }
-                    ) });
-                  }
+                  })
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -260,8 +219,7 @@ const WaterfallBars = ({
                   scale: xScale,
                   top: innerHeight,
                   tickLabelProps: { display: "none" },
-                  tickLineProps: { display: "none" },
-                  label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : ""
+                  tickLineProps: { display: "none" }
                 }
               )
             ] })