@apia/charts 2.0.1 → 2.0.3

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/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" }
                 }
               )
             ] })

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

@@ -1 +1 @@
-{"version":3,"file":"WaterfallBars.js","sources":["../../../src/charts/waterfallBars/WaterfallBars.tsx"],"sourcesContent":["import { Box, Heading } from '@apia/theme';\nimport { TChartRendererProps } from '../types';\nimport { arrayOrArray, getLabel, usePanAndZoom } from '@apia/util';\nimport React, { useMemo, useLayoutEffect, useState } from 'react';\nimport { scaleBand, scaleLinear } from '@visx/scale';\nimport { extent } from 'd3-array';\nimport { parseMargin } from '../util/parseMargin';\nimport { Group } from '@visx/group';\nimport { GridRows } from '@visx/grid';\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport uniqueId from 'lodash-es/uniqueId';\nimport ChartSelector from '../util/ChartSelector';\nimport { WaterfallBar } from './WaterfallBar';\n// import { LegendContainer } from '../util/LegendContainer';\n\nexport interface IParsedColumn {\n  columnName: string;\n  [key: string]: string;\n}\n\ntype TDatum = { key: string; value: string };\n\nconst calculateWaterfallSteps = ({\n  data,\n  xAccessor,\n  yAccessor,\n  showFinal,\n  colors,\n}: {\n  data: TDatum[];\n  xAccessor: (d: TDatum) => string;\n  yAccessor: (d: TDatum) => string;\n  showFinal: boolean;\n  colors: {\n    positive: string;\n    negative: string;\n    total: string;\n    stepConnector: string;\n  };\n}) => {\n  // Holds cumulative value\n  let cumulativeTotal = 0;\n\n  // Calculate bars for each data point\n  const steps = data.map((datum) => {\n    const xValue = xAccessor(datum);\n    const yValue = yAccessor(datum);\n\n    const prevTotal = cumulativeTotal;\n    cumulativeTotal += Number(yValue);\n\n    return {\n      x: xValue,\n      y: yValue,\n      start: prevTotal,\n      end: cumulativeTotal,\n      color: Number(yValue) > 0 ? colors.positive : colors.negative,\n    };\n  });\n\n  // Add final Total bar\n  if (showFinal) {\n    steps.push({\n      x: 'Total',\n      y: cumulativeTotal as unknown as string,\n      start: 0,\n      end: cumulativeTotal,\n      color: colors.total,\n    });\n  }\n\n  return steps;\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}\nexport const WaterfallBars = ({\n  margin = { top: 20, left: 100, bottom: 150, right: 70 },\n  chart: {\n    waterfallColors = {\n      positive: '#49b86f',\n      negative: '#c92e5b',\n      total: '#434857',\n      stepConnector: '#888d94',\n    },\n    ...chart\n  },\n  className,\n  chartId,\n  allowZoom,\n}: TChartRendererProps) => {\n  console.log({ margin });\n\n  const effectiveMargin = parseMargin(margin);\n\n  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {\n    effectiveMargin.left = 50;\n  }\n  let innerWidth =\n    chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;\n  let innerHeight =\n    chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;\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 getXValue = (d: TDatum) => d.key;\n  const getYValue = (d: TDatum) => d.value;\n\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 [currentPie, setCurrentPie] = useState('0');\n  const chartNames = charts.map((piece) => {\n    return piece.name;\n  });\n  const steps = useMemo(\n    () =>\n      calculateWaterfallSteps({\n        data: arrayOrArray(chart.dataSets.data)[currentPie as unknown as number]\n          .sets as TDatum[],\n        xAccessor: getXValue,\n        yAccessor: getYValue,\n        showFinal: chart.showTotal ?? true,\n        colors: waterfallColors,\n      }),\n    [chart.dataSets.data, chart.showTotal, currentPie, waterfallColors],\n  );\n\n  // Build scales\n  const padding = 0.2;\n\n  const xScale = scaleBand({\n    domain: steps.map((step) => step.x),\n    padding,\n    range: [0, innerWidth],\n  });\n\n  const yDomain = useMemo(() => {\n    const values = steps.flatMap((step) => [step.start, step.end]);\n    const [min, max] = extent<number>(values);\n    return min != null && max != null ? [min, max + 3] : undefined;\n  }, [steps]);\n\n  const yScale = scaleLinear({\n    domain: yDomain,\n    nice: true,\n    range: [innerHeight, 0],\n  });\n\n  const id = useMemo(() => `WaterfallBars${uniqueId()}`, []);\n  useLayoutEffect(() => {\n    document\n      .querySelectorAll<HTMLElement>(`#${id} .tickLabel`)\n      .forEach((current) => {\n        const width = current.getBoundingClientRect().width;\n        // eslint-disable-next-line no-param-reassign\n        current.style.transformOrigin =\n          (current.getAttribute('x') as string) + 'px 14px';\n        // eslint-disable-next-line no-param-reassign\n        current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;\n      });\n  });\n\n  const { boxRef, elementRef } = usePanAndZoom<HTMLElement, SVGSVGElement>(\n    undefined,\n    !allowZoom ?? true,\n  );\n  return (\n    <>\n      <Box\n        id={id}\n        className={`${className ? className : ''} chartBox chartContainer`}\n        ref={boxRef}\n      >\n        <svg\n          height={chart.ratio.height}\n          width={chart.ratio.width}\n          ref={elementRef}\n        >\n          <Group left={effectiveMargin.left} top={effectiveMargin.top}>\n            {chart.showGrid && (\n              <GridRows scale={yScale} width={innerWidth} strokeDasharray=\"5\" />\n            )}\n            {steps.map((step, index) => {\n              const x = xScale(step.x);\n              const y = yScale(Math.max(step.start, step.end));\n\n              if (x == null || y == null) {\n                return null;\n              }\n\n              const barHeight = Math.abs(yScale(step.start) - yScale(step.end));\n\n              const isLast = index === steps.length - 1;\n              const linePadding = 2;\n              const x1 = x + xScale.bandwidth() + linePadding;\n              const x2 = x + xScale.bandwidth() / (1 - padding) - linePadding;\n              const lineY = step.end < step.start ? y + barHeight : y;\n\n              const labelOffset = 10;\n              const labelY =\n                yScale(step.end) +\n                ((step.y as unknown as number) < 0\n                  ? labelOffset\n                  : -labelOffset);\n\n              let currentYValue = 0;\n              steps\n                .filter((_, i) => {\n                  if ((chart.showTotal ?? true) && !steps[i + 1]) {\n                    return false;\n                  }\n                  return i <= index;\n                })\n                .forEach((step) => {\n                  currentYValue += Number(step.y);\n                });\n\n              return (\n                <WaterfallBar\n                  chart={chart}\n                  columnName={chartNames[currentPie as unknown as number]}\n                  fill={step.color}\n                  height={barHeight}\n                  isLast={isLast}\n                  key={index}\n                  lineY={lineY}\n                  step={step}\n                  stroke={waterfallColors.stepConnector}\n                  strokeDashArray={2}\n                  textContent={\n                    chart.showTotal ?? true\n                      ? step.y\n                      : (currentYValue as unknown as string)\n                  }\n                  textX={x + xScale.bandwidth() / 2}\n                  textY={labelY + 5}\n                  width={xScale.bandwidth()}\n                  x={x}\n                  y={y}\n                  x1={x1}\n                  x2={x2}\n                />\n              );\n            })}\n            <AxisLeft\n              label={\n                chart.chartType !== 'pie2D' && chart.showAxisYTitle\n                  ? chart.axisYTitle\n                  : ''\n              }\n              scale={yScale}\n              hideTicks\n              tickLabelProps={() => ({\n                textAnchor: 'end',\n                verticalAnchor: 'middle',\n                display: chart.showAxisYTitle ? 'auto' : 'none',\n              })}\n              tickComponent={(props) => {\n                let value = Number(props.formattedValue?.replace(',', ''));\n                let counter = -1;\n                const units = [\n                  'k',\n                  'M',\n                  'G',\n                  'T',\n                  'P',\n                  'E',\n                  'Z',\n                  'Y',\n                  'R',\n                  'Q',\n                ];\n                while (value >= 1000) {\n                  value = value / 1000;\n                  counter++;\n                }\n                let stringValue = `${value}`;\n                if (stringValue.length > 3) {\n                  stringValue = stringValue.slice(0, 3);\n                }\n                if (stringValue.endsWith('.')) {\n                  stringValue = stringValue.replace('.', '');\n                }\n                const newValue = `${stringValue}${\n                  counter >= 0 ? units[counter] : ''\n                }`;\n\n                return (\n                  <>\n                    {chart.showAxisYTitle && (\n                      <text\n                        dx={props.dx}\n                        dy={props.dy}\n                        fill={props.fill}\n                        fontSize={props.fontSize}\n                        textAnchor={props.textAnchor}\n                        x={props.x}\n                        y={props.y}\n                      >\n                        {newValue}\n                      </text>\n                    )}\n                  </>\n                );\n              }}\n            />\n            <AxisBottom\n              scale={xScale}\n              top={innerHeight}\n              tickLabelProps={{ display: 'none' }}\n              tickLineProps={{ display: 'none' }}\n              label={\n                chart.chartType !== 'pie2D' && chart.showAxisXTitle\n                  ? chart.axisXTitle\n                  : ''\n              }\n            />\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        {/* {chart.showLegend && (\n          <Box className=\"chart__legend__wrapper\"> */}\n        {/* TODO LABEL */}\n        {/* <Heading as={'h6'}>Legend</Heading>\n            <LegendContainer\n              id={chartId}\n              avoidEvent\n              references={[\n                {\n                  title: arrayOrArray(chart.dataSets.data)[\n                    currentPie as unknown as number\n                  ].name,\n                  color: 'transparent',\n                },\n              ]}\n            />\n          </Box>\n        )} */}\n      </Box>\n    </>\n  );\n};\n"],"names":["step"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,0BAA0B,CAAC;AAAA,EAC/B,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AACF,CAWM,KAAA;AAEJ,EAAA,IAAI,eAAkB,GAAA,CAAA,CAAA;AAGtB,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,GAAI,CAAA,CAAC,KAAU,KAAA;AAChC,IAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA,CAAA;AAC9B,IAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA,CAAA;AAE9B,IAAA,MAAM,SAAY,GAAA,eAAA,CAAA;AAClB,IAAA,eAAA,IAAmB,OAAO,MAAM,CAAA,CAAA;AAEhC,IAAO,OAAA;AAAA,MACL,CAAG,EAAA,MAAA;AAAA,MACH,CAAG,EAAA,MAAA;AAAA,MACH,KAAO,EAAA,SAAA;AAAA,MACP,GAAK,EAAA,eAAA;AAAA,MACL,OAAO,MAAO,CAAA,MAAM,IAAI,CAAI,GAAA,MAAA,CAAO,WAAW,MAAO,CAAA,QAAA;AAAA,KACvD,CAAA;AAAA,GACD,CAAA,CAAA;AAGD,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,KAAA,CAAM,IAAK,CAAA;AAAA,MACT,CAAG,EAAA,OAAA;AAAA,MACH,CAAG,EAAA,eAAA;AAAA,MACH,KAAO,EAAA,CAAA;AAAA,MACP,GAAK,EAAA,eAAA;AAAA,MACL,OAAO,MAAO,CAAA,KAAA;AAAA,KACf,CAAA,CAAA;AAAA,GACH;AAEA,EAAO,OAAA,KAAA,CAAA;AACT,CAAA,CAAA;AACA,SAAS,gBAAiB,CAAA;AAAA,EACxB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AACF,CAIG,EAAA;AACD,EAAA,IAAI,SAAS,QAAU,EAAA;AACrB,IAAO,OAAA,EAAE,OAAO,MAAO,EAAA,CAAA;AAAA,GACzB;AAEA,EAAA,MAAM,QAAQ,KAAQ,GAAA,MAAA,CAAA;AACtB,EAAA,MAAM,QAAW,GAAA,QAAA,CAAA;AACjB,EAAA,MAAM,SAAY,GAAA,IAAA,CAAK,KAAM,CAAA,QAAA,GAAW,KAAK,CAAA,CAAA;AAE7C,EAAA,OAAO,EAAE,KAAA,EAAO,QAAU,EAAA,MAAA,EAAQ,SAAU,EAAA,CAAA;AAC9C,CAAA;AACO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,MAAA,GAAS,EAAE,GAAK,EAAA,EAAA,EAAI,MAAM,GAAK,EAAA,MAAA,EAAQ,GAAK,EAAA,KAAA,EAAO,EAAG,EAAA;AAAA,EACtD,KAAO,EAAA;AAAA,IACL,eAAkB,GAAA;AAAA,MAChB,QAAU,EAAA,SAAA;AAAA,MACV,QAAU,EAAA,SAAA;AAAA,MACV,KAAO,EAAA,SAAA;AAAA,MACP,aAAe,EAAA,SAAA;AAAA,KACjB;AAAA,IACA,GAAG,KAAA;AAAA,GACL;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AACF,CAA2B,KAAA;AACzB,EAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,MAAA,EAAQ,CAAA,CAAA;AAEtB,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM,CAAA,CAAA;AAE1C,EAAA,IAAI,CAAC,KAAA,CAAM,cAAkB,IAAA,eAAA,CAAgB,OAAO,EAAI,EAAA;AACtD,IAAA,eAAA,CAAgB,IAAO,GAAA,EAAA,CAAA;AAAA,GACzB;AACA,EAAI,IAAA,UAAA,GACF,MAAM,KAAM,CAAA,KAAA,GAAA,CAAS,CAAC,eAAgB,CAAA,IAAA,GAAO,gBAAgB,KAAS,IAAA,CAAA,CAAA;AACxE,EAAI,IAAA,WAAA,GACF,MAAM,KAAM,CAAA,MAAA,GAAA,CAAU,CAAC,eAAgB,CAAA,GAAA,GAAM,gBAAgB,MAAU,IAAA,CAAA,CAAA;AACzE,EAAI,IAAA,UAAA,GAAa,KAAM,CAAA,KAAA,CAAM,QAAU,EAAA;AACrC,IAAA,MAAM,YAAY,gBAAiB,CAAA;AAAA,MACjC,MAAQ,EAAA,WAAA;AAAA,MACR,KAAO,EAAA,UAAA;AAAA,MACP,QAAA,EAAU,MAAM,KAAM,CAAA,QAAA;AAAA,KACvB,CAAA,CAAA;AACD,IAAA,UAAA,GAAa,SAAU,CAAA,KAAA,CAAA;AACvB,IAAA,WAAA,GAAc,SAAU,CAAA,MAAA,CAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,SAAA,GAAY,CAAC,CAAA,KAAc,CAAE,CAAA,GAAA,CAAA;AACnC,EAAM,MAAA,SAAA,GAAY,CAAC,CAAA,KAAc,CAAE,CAAA,KAAA,CAAA;AAEnC,EAAA,MAAM,SAAS,YAAa,CAAA,KAAA,CAAM,QAAU,EAAA,IAAI,EAC7C,MAAO,CAAA,CAAC,KAAU,KAAA,CAAC,CAAC,KAAM,CAAA,IAAI,CAC9B,CAAA,GAAA,CAAI,CAAC,KAAU,KAAA;AACd,IAAO,OAAA;AAAA,MACL,GAAG,KAAA;AAAA,MACH,YAAY,KAAM,CAAA,IAAA;AAAA,KACpB,CAAA;AAAA,GACD,CAAA,CAAA;AACH,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,GAAG,CAAA,CAAA;AAChD,EAAA,MAAM,UAAa,GAAA,MAAA,CAAO,GAAI,CAAA,CAAC,KAAU,KAAA;AACvC,IAAA,OAAO,KAAM,CAAA,IAAA,CAAA;AAAA,GACd,CAAA,CAAA;AACD,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MACE,uBAAwB,CAAA;AAAA,MACtB,MAAM,YAAa,CAAA,KAAA,CAAM,SAAS,IAAI,CAAA,CAAE,UAA+B,CACpE,CAAA,IAAA;AAAA,MACH,SAAW,EAAA,SAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,SAAA,EAAW,MAAM,SAAa,IAAA,IAAA;AAAA,MAC9B,MAAQ,EAAA,eAAA;AAAA,KACT,CAAA;AAAA,IACH,CAAC,KAAM,CAAA,QAAA,CAAS,MAAM,KAAM,CAAA,SAAA,EAAW,YAAY,eAAe,CAAA;AAAA,GACpE,CAAA;AAGA,EAAA,MAAM,OAAU,GAAA,GAAA,CAAA;AAEhB,EAAA,MAAM,SAAS,SAAU,CAAA;AAAA,IACvB,QAAQ,KAAM,CAAA,GAAA,CAAI,CAAC,IAAA,KAAS,KAAK,CAAC,CAAA;AAAA,IAClC,OAAA;AAAA,IACA,KAAA,EAAO,CAAC,CAAA,EAAG,UAAU,CAAA;AAAA,GACtB,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,QAAQ,MAAM;AAC5B,IAAM,MAAA,MAAA,GAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,IAAA,KAAS,CAAC,IAAK,CAAA,KAAA,EAAO,IAAK,CAAA,GAAG,CAAC,CAAA,CAAA;AAC7D,IAAA,MAAM,CAAC,GAAA,EAAK,GAAG,CAAA,GAAI,OAAe,MAAM,CAAA,CAAA;AACxC,IAAO,OAAA,GAAA,IAAO,QAAQ,GAAO,IAAA,IAAA,GAAO,CAAC,GAAK,EAAA,GAAA,GAAM,CAAC,CAAI,GAAA,KAAA,CAAA,CAAA;AAAA,GACvD,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAA,MAAM,SAAS,WAAY,CAAA;AAAA,IACzB,MAAQ,EAAA,OAAA;AAAA,IACR,IAAM,EAAA,IAAA;AAAA,IACN,KAAA,EAAO,CAAC,WAAA,EAAa,CAAC,CAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,QAAQ,MAAM,CAAA,aAAA,EAAgB,UAAU,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA;AACzD,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,QAAA,CACG,iBAA8B,CAAI,CAAA,EAAA,EAAE,aAAa,CACjD,CAAA,OAAA,CAAQ,CAAC,OAAY,KAAA;AACpB,MAAM,MAAA,KAAA,GAAQ,OAAQ,CAAA,qBAAA,EAAwB,CAAA,KAAA,CAAA;AAE9C,MAAA,OAAA,CAAQ,KAAM,CAAA,eAAA,GACX,OAAQ,CAAA,YAAA,CAAa,GAAG,CAAe,GAAA,SAAA,CAAA;AAE1C,MAAA,OAAA,CAAQ,KAAM,CAAA,SAAA,GAAY,CAA4B,yBAAA,EAAA,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,CAAA;AAAA,KAChE,CAAA,CAAA;AAAA,GACJ,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,MAAQ,EAAA,UAAA,EAAe,GAAA,aAAA;AAAA,IAC7B,KAAA,CAAA;AAAA,IACA,CAAC,SAAA;AAAA,GACH,CAAA;AACA,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAA,CAAA,EAAG,SAAY,GAAA,SAAA,GAAY,EAAE,CAAA,wBAAA,CAAA;AAAA,QACxC,GAAK,EAAA,MAAA;AAAA,QAEL,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,MAAM,KAAM,CAAA,MAAA;AAAA,YACpB,KAAA,EAAO,MAAM,KAAM,CAAA,KAAA;AAAA,YACnB,GAAK,EAAA,UAAA;AAAA,YAEL,+BAAC,KAAM,EAAA,EAAA,IAAA,EAAM,gBAAgB,IAAM,EAAA,GAAA,EAAK,gBAAgB,GACrD,EAAA,QAAA,EAAA;AAAA,cAAM,KAAA,CAAA,QAAA,wBACJ,QAAS,EAAA,EAAA,KAAA,EAAO,QAAQ,KAAO,EAAA,UAAA,EAAY,iBAAgB,GAAI,EAAA,CAAA;AAAA,cAEjE,KAAM,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KAAU,KAAA;AAC1B,gBAAM,MAAA,CAAA,GAAI,MAAO,CAAA,IAAA,CAAK,CAAC,CAAA,CAAA;AACvB,gBAAM,MAAA,CAAA,GAAI,OAAO,IAAK,CAAA,GAAA,CAAI,KAAK,KAAO,EAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAE/C,gBAAI,IAAA,CAAA,IAAK,IAAQ,IAAA,CAAA,IAAK,IAAM,EAAA;AAC1B,kBAAO,OAAA,IAAA,CAAA;AAAA,iBACT;AAEA,gBAAM,MAAA,SAAA,GAAY,IAAK,CAAA,GAAA,CAAI,MAAO,CAAA,IAAA,CAAK,KAAK,CAAI,GAAA,MAAA,CAAO,IAAK,CAAA,GAAG,CAAC,CAAA,CAAA;AAEhE,gBAAM,MAAA,MAAA,GAAS,KAAU,KAAA,KAAA,CAAM,MAAS,GAAA,CAAA,CAAA;AACxC,gBAAA,MAAM,WAAc,GAAA,CAAA,CAAA;AACpB,gBAAA,MAAM,EAAK,GAAA,CAAA,GAAI,MAAO,CAAA,SAAA,EAAc,GAAA,WAAA,CAAA;AACpC,gBAAA,MAAM,KAAK,CAAI,GAAA,MAAA,CAAO,SAAU,EAAA,IAAK,IAAI,OAAW,CAAA,GAAA,WAAA,CAAA;AACpD,gBAAA,MAAM,QAAQ,IAAK,CAAA,GAAA,GAAM,IAAK,CAAA,KAAA,GAAQ,IAAI,SAAY,GAAA,CAAA,CAAA;AAEtD,gBAAA,MAAM,WAAc,GAAA,EAAA,CAAA;AACpB,gBAAM,MAAA,MAAA,GACJ,OAAO,IAAK,CAAA,GAAG,KACb,IAAK,CAAA,CAAA,GAA0B,CAC7B,GAAA,WAAA,GACA,CAAC,WAAA,CAAA,CAAA;AAEP,gBAAA,IAAI,aAAgB,GAAA,CAAA,CAAA;AACpB,gBACG,KAAA,CAAA,MAAA,CAAO,CAAC,CAAA,EAAG,CAAM,KAAA;AAChB,kBAAA,IAAA,CAAK,MAAM,SAAa,IAAA,IAAA,KAAS,CAAC,KAAM,CAAA,CAAA,GAAI,CAAC,CAAG,EAAA;AAC9C,oBAAO,OAAA,KAAA,CAAA;AAAA,mBACT;AACA,kBAAA,OAAO,CAAK,IAAA,KAAA,CAAA;AAAA,iBACb,CAAA,CACA,OAAQ,CAAA,CAACA,KAAS,KAAA;AACjB,kBAAiB,aAAA,IAAA,MAAA,CAAOA,MAAK,CAAC,CAAA,CAAA;AAAA,iBAC/B,CAAA,CAAA;AAEH,gBACE,uBAAA,GAAA;AAAA,kBAAC,YAAA;AAAA,kBAAA;AAAA,oBACC,KAAA;AAAA,oBACA,UAAA,EAAY,WAAW,UAA+B,CAAA;AAAA,oBACtD,MAAM,IAAK,CAAA,KAAA;AAAA,oBACX,MAAQ,EAAA,SAAA;AAAA,oBACR,MAAA;AAAA,oBAEA,KAAA;AAAA,oBACA,IAAA;AAAA,oBACA,QAAQ,eAAgB,CAAA,aAAA;AAAA,oBACxB,eAAiB,EAAA,CAAA;AAAA,oBACjB,WACE,EAAA,KAAA,CAAM,SAAa,IAAA,IAAA,GACf,KAAK,CACJ,GAAA,aAAA;AAAA,oBAEP,KAAO,EAAA,CAAA,GAAI,MAAO,CAAA,SAAA,EAAc,GAAA,CAAA;AAAA,oBAChC,OAAO,MAAS,GAAA,CAAA;AAAA,oBAChB,KAAA,EAAO,OAAO,SAAU,EAAA;AAAA,oBACxB,CAAA;AAAA,oBACA,CAAA;AAAA,oBACA,EAAA;AAAA,oBACA,EAAA;AAAA,mBAAA;AAAA,kBAhBK,KAAA;AAAA,iBAiBP,CAAA;AAAA,eAEH,CAAA;AAAA,8BACD,GAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,OACE,KAAM,CAAA,SAAA,KAAc,WAAW,KAAM,CAAA,cAAA,GACjC,MAAM,UACN,GAAA,EAAA;AAAA,kBAEN,KAAO,EAAA,MAAA;AAAA,kBACP,SAAS,EAAA,IAAA;AAAA,kBACT,gBAAgB,OAAO;AAAA,oBACrB,UAAY,EAAA,KAAA;AAAA,oBACZ,cAAgB,EAAA,QAAA;AAAA,oBAChB,OAAA,EAAS,KAAM,CAAA,cAAA,GAAiB,MAAS,GAAA,MAAA;AAAA,mBAC3C,CAAA;AAAA,kBACA,aAAA,EAAe,CAAC,KAAU,KAAA;AACxB,oBAAA,IAAI,QAAQ,MAAO,CAAA,KAAA,CAAM,gBAAgB,OAAQ,CAAA,GAAA,EAAK,EAAE,CAAC,CAAA,CAAA;AACzD,oBAAA,IAAI,OAAU,GAAA,CAAA,CAAA,CAAA;AACd,oBAAA,MAAM,KAAQ,GAAA;AAAA,sBACZ,GAAA;AAAA,sBACA,GAAA;AAAA,sBACA,GAAA;AAAA,sBACA,GAAA;AAAA,sBACA,GAAA;AAAA,sBACA,GAAA;AAAA,sBACA,GAAA;AAAA,sBACA,GAAA;AAAA,sBACA,GAAA;AAAA,sBACA,GAAA;AAAA,qBACF,CAAA;AACA,oBAAA,OAAO,SAAS,GAAM,EAAA;AACpB,sBAAA,KAAA,GAAQ,KAAQ,GAAA,GAAA,CAAA;AAChB,sBAAA,OAAA,EAAA,CAAA;AAAA,qBACF;AACA,oBAAI,IAAA,WAAA,GAAc,GAAG,KAAK,CAAA,CAAA,CAAA;AAC1B,oBAAI,IAAA,WAAA,CAAY,SAAS,CAAG,EAAA;AAC1B,sBAAc,WAAA,GAAA,WAAA,CAAY,KAAM,CAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAAA,qBACtC;AACA,oBAAI,IAAA,WAAA,CAAY,QAAS,CAAA,GAAG,CAAG,EAAA;AAC7B,sBAAc,WAAA,GAAA,WAAA,CAAY,OAAQ,CAAA,GAAA,EAAK,EAAE,CAAA,CAAA;AAAA,qBAC3C;AACA,oBAAM,MAAA,QAAA,GAAW,GAAG,WAAW,CAAA,EAC7B,WAAW,CAAI,GAAA,KAAA,CAAM,OAAO,CAAA,GAAI,EAClC,CAAA,CAAA,CAAA;AAEA,oBACE,uBAAA,GAAA,CAAA,QAAA,EAAA,EACG,gBAAM,cACL,oBAAA,GAAA;AAAA,sBAAC,MAAA;AAAA,sBAAA;AAAA,wBACC,IAAI,KAAM,CAAA,EAAA;AAAA,wBACV,IAAI,KAAM,CAAA,EAAA;AAAA,wBACV,MAAM,KAAM,CAAA,IAAA;AAAA,wBACZ,UAAU,KAAM,CAAA,QAAA;AAAA,wBAChB,YAAY,KAAM,CAAA,UAAA;AAAA,wBAClB,GAAG,KAAM,CAAA,CAAA;AAAA,wBACT,GAAG,KAAM,CAAA,CAAA;AAAA,wBAER,QAAA,EAAA,QAAA;AAAA,uBAAA;AAAA,qBAGP,EAAA,CAAA,CAAA;AAAA,mBAEJ;AAAA,iBAAA;AAAA,eACF;AAAA,8BACA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA,MAAA;AAAA,kBACP,GAAK,EAAA,WAAA;AAAA,kBACL,cAAA,EAAgB,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,kBAClC,aAAA,EAAe,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,kBACjC,OACE,KAAM,CAAA,SAAA,KAAc,WAAW,KAAM,CAAA,cAAA,GACjC,MAAM,UACN,GAAA,EAAA;AAAA,iBAAA;AAAA,eAER;AAAA,aACF,EAAA,CAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KACF;AAAA,oBACC,GAAA,CAAA,GAAA,EAAA,EAAI,SAAU,EAAA,sBAAA,EACZ,QAAC,EAAA,CAAA,KAAA,CAAM,YAAgB,IAAA,MAAA,CAAO,MAAS,GAAA,CAAA,oBACrC,IAAA,CAAA,GAAA,EAAA,EAAI,WAAU,uBAEb,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAQ,EAAI,EAAA,IAAA,EAAO,QAAS,EAAA,QAAA,CAAA,aAAa,EAAE,IAAK,EAAA,CAAA;AAAA,sBACjD,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,OAAA;AAAA,UACA,MAAQ,EAAA,UAAA;AAAA,UACR,SAAU,EAAA,oBAAA;AAAA,UACV,OAAS,EAAA,UAAA;AAAA,UACT,UAAY,EAAA,aAAA;AAAA,SAAA;AAAA,OACd;AAAA,KAAA,EACF,CAoBJ,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"WaterfallBars.js","sources":["../../../src/charts/waterfallBars/WaterfallBars.tsx"],"sourcesContent":["import { Box, Heading } from '@apia/theme';\nimport { TChartRendererProps } from '../types';\nimport { arrayOrArray, getLabel, usePanAndZoom } from '@apia/util';\nimport React, { useMemo, useLayoutEffect, useState } from 'react';\nimport { scaleBand, scaleLinear } from '@visx/scale';\nimport { extent } from 'd3-array';\nimport { parseMargin } from '../util/parseMargin';\nimport { Group } from '@visx/group';\nimport { GridRows } from '@visx/grid';\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport uniqueId from 'lodash-es/uniqueId';\nimport ChartSelector from '../util/ChartSelector';\nimport { WaterfallBar } from './WaterfallBar';\n// import { LegendContainer } from '../util/LegendContainer';\n\nexport interface IParsedColumn {\n  columnName: string;\n  [key: string]: string;\n}\n\ntype TDatum = { key: string; value: string };\n\nconst calculateWaterfallSteps = ({\n  data,\n  xAccessor,\n  yAccessor,\n  showFinal,\n  colors,\n}: {\n  data: TDatum[];\n  xAccessor: (d: TDatum) => string;\n  yAccessor: (d: TDatum) => string;\n  showFinal: boolean;\n  colors: {\n    positive: string;\n    negative: string;\n    total: string;\n    stepConnector: string;\n  };\n}) => {\n  // Holds cumulative value\n  let cumulativeTotal = 0;\n\n  // Calculate bars for each data point\n  const steps = data.map((datum) => {\n    const xValue = xAccessor(datum);\n    const yValue = yAccessor(datum);\n\n    const prevTotal = cumulativeTotal;\n    cumulativeTotal += Number(yValue);\n\n    return {\n      x: xValue,\n      y: yValue,\n      start: prevTotal,\n      end: cumulativeTotal,\n      color: Number(yValue) > 0 ? colors.positive : colors.negative,\n    };\n  });\n\n  // Add final Total bar\n  if (showFinal) {\n    steps.push({\n      x: 'Total',\n      y: cumulativeTotal as unknown as string,\n      start: 0,\n      end: cumulativeTotal,\n      color: colors.total,\n    });\n  }\n\n  return steps;\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}\nexport const WaterfallBars = ({\n  margin = { top: 20, left: 100, bottom: 150, right: 70 },\n  chart: {\n    waterfallColors = {\n      positive: '#49b86f',\n      negative: '#c92e5b',\n      total: '#434857',\n      stepConnector: '#888d94',\n    },\n    ...chart\n  },\n  className,\n  chartId,\n  allowZoom,\n}: TChartRendererProps) => {\n  console.log({ margin });\n\n  const effectiveMargin = parseMargin(margin);\n\n  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {\n    effectiveMargin.left = 50;\n  }\n  let innerWidth =\n    chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;\n  let innerHeight =\n    chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;\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 getXValue = (d: TDatum) => d.key;\n  const getYValue = (d: TDatum) => d.value;\n\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 [currentPie, setCurrentPie] = useState('0');\n  const chartNames = charts.map((piece) => {\n    return piece.name;\n  });\n  const steps = useMemo(\n    () =>\n      calculateWaterfallSteps({\n        data: arrayOrArray(chart.dataSets.data)[currentPie as unknown as number]\n          .sets as TDatum[],\n        xAccessor: getXValue,\n        yAccessor: getYValue,\n        showFinal: chart.showTotal ?? true,\n        colors: waterfallColors,\n      }),\n    [chart.dataSets.data, chart.showTotal, currentPie, waterfallColors],\n  );\n\n  // Build scales\n  const padding = 0.2;\n\n  const xScale = scaleBand({\n    domain: steps.map((step) => step.x),\n    padding,\n    range: [0, innerWidth],\n  });\n\n  const yDomain = useMemo(() => {\n    const values = steps.flatMap((step) => [step.start, step.end]);\n    const [min, max] = extent<number>(values);\n    return min != null && max != null ? [min - 5, max + 5] : undefined;\n  }, [steps]);\n\n  const yScale = scaleLinear({\n    domain: yDomain,\n    nice: true,\n    range: [innerHeight, 0],\n  });\n\n  const id = useMemo(() => `WaterfallBars${uniqueId()}`, []);\n  useLayoutEffect(() => {\n    document\n      .querySelectorAll<HTMLElement>(`#${id} .tickLabel`)\n      .forEach((current) => {\n        const width = current.getBoundingClientRect().width;\n        // eslint-disable-next-line no-param-reassign\n        current.style.transformOrigin =\n          (current.getAttribute('x') as string) + 'px 14px';\n        // eslint-disable-next-line no-param-reassign\n        current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;\n      });\n  });\n\n  const { boxRef, elementRef } = usePanAndZoom<HTMLElement, SVGSVGElement>(\n    undefined,\n    !allowZoom ?? true,\n  );\n  return (\n    <>\n      <Box\n        id={id}\n        className={`${className ? className : ''} chartBox chartContainer`}\n        ref={boxRef}\n      >\n        <svg\n          height={chart.ratio.height}\n          width={chart.ratio.width}\n          ref={elementRef}\n        >\n          <Group left={effectiveMargin.left} top={effectiveMargin.top}>\n            <GridRows scale={yScale} width={innerWidth} strokeDasharray=\"5\" />\n            {steps.map((step, index) => {\n              const x = xScale(step.x);\n              const y = yScale(Math.max(step.start, step.end));\n\n              if (x == null || y == null) {\n                return null;\n              }\n\n              const barHeight = Math.abs(yScale(step.start) - yScale(step.end));\n\n              const isLast = index === steps.length - 1;\n              const linePadding = 2;\n              const x1 = x + xScale.bandwidth() + linePadding;\n              const x2 = x + xScale.bandwidth() / (1 - padding) - linePadding;\n              const lineY = step.end < step.start ? y + barHeight : y;\n\n              const labelOffset = 10;\n              const labelY =\n                yScale(step.end) +\n                ((step.y as unknown as number) < 0\n                  ? labelOffset\n                  : -labelOffset);\n\n              let currentYValue = 0;\n              steps\n                .filter((_, i) => {\n                  if ((chart.showTotal ?? true) && !steps[i + 1]) {\n                    return false;\n                  }\n                  return i <= index;\n                })\n                .forEach((step) => {\n                  currentYValue += Number(step.y);\n                });\n\n              return (\n                <WaterfallBar\n                  chart={chart}\n                  columnName={chartNames[currentPie as unknown as number]}\n                  fill={step.color}\n                  height={barHeight}\n                  isLast={isLast}\n                  key={index}\n                  lineY={lineY}\n                  step={step}\n                  stroke={waterfallColors.stepConnector}\n                  strokeDashArray={2}\n                  textContent={\n                    chart.showTotal ?? true\n                      ? step.y\n                      : (currentYValue as unknown as string)\n                  }\n                  textX={x + xScale.bandwidth() / 2}\n                  textY={labelY + 5}\n                  width={xScale.bandwidth()}\n                  x={x}\n                  y={y}\n                  x1={x1}\n                  x2={x2}\n                />\n              );\n            })}\n            <AxisLeft\n              label={''}\n              scale={yScale}\n              hideTicks\n              tickLabelProps={() => ({\n                textAnchor: 'end',\n                verticalAnchor: 'middle',\n                display: chart.showAxisYTitle ? 'auto' : 'none',\n              })}\n            />\n            <AxisBottom\n              scale={xScale}\n              top={innerHeight}\n              tickLabelProps={{ display: 'none' }}\n              tickLineProps={{ display: 'none' }}\n            />\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        {/* {chart.showLegend && (\n          <Box className=\"chart__legend__wrapper\"> */}\n        {/* TODO LABEL */}\n        {/* <Heading as={'h6'}>Legend</Heading>\n            <LegendContainer\n              id={chartId}\n              avoidEvent\n              references={[\n                {\n                  title: arrayOrArray(chart.dataSets.data)[\n                    currentPie as unknown as number\n                  ].name,\n                  color: 'transparent',\n                },\n              ]}\n            />\n          </Box>\n        )} */}\n      </Box>\n    </>\n  );\n};\n"],"names":["step"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,0BAA0B,CAAC;AAAA,EAC/B,IAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AACF,CAWM,KAAA;AAEJ,EAAA,IAAI,eAAkB,GAAA,CAAA,CAAA;AAGtB,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,GAAI,CAAA,CAAC,KAAU,KAAA;AAChC,IAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA,CAAA;AAC9B,IAAM,MAAA,MAAA,GAAS,UAAU,KAAK,CAAA,CAAA;AAE9B,IAAA,MAAM,SAAY,GAAA,eAAA,CAAA;AAClB,IAAA,eAAA,IAAmB,OAAO,MAAM,CAAA,CAAA;AAEhC,IAAO,OAAA;AAAA,MACL,CAAG,EAAA,MAAA;AAAA,MACH,CAAG,EAAA,MAAA;AAAA,MACH,KAAO,EAAA,SAAA;AAAA,MACP,GAAK,EAAA,eAAA;AAAA,MACL,OAAO,MAAO,CAAA,MAAM,IAAI,CAAI,GAAA,MAAA,CAAO,WAAW,MAAO,CAAA,QAAA;AAAA,KACvD,CAAA;AAAA,GACD,CAAA,CAAA;AAGD,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,KAAA,CAAM,IAAK,CAAA;AAAA,MACT,CAAG,EAAA,OAAA;AAAA,MACH,CAAG,EAAA,eAAA;AAAA,MACH,KAAO,EAAA,CAAA;AAAA,MACP,GAAK,EAAA,eAAA;AAAA,MACL,OAAO,MAAO,CAAA,KAAA;AAAA,KACf,CAAA,CAAA;AAAA,GACH;AAEA,EAAO,OAAA,KAAA,CAAA;AACT,CAAA,CAAA;AACA,SAAS,gBAAiB,CAAA;AAAA,EACxB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AACF,CAIG,EAAA;AACD,EAAA,IAAI,SAAS,QAAU,EAAA;AACrB,IAAO,OAAA,EAAE,OAAO,MAAO,EAAA,CAAA;AAAA,GACzB;AAEA,EAAA,MAAM,QAAQ,KAAQ,GAAA,MAAA,CAAA;AACtB,EAAA,MAAM,QAAW,GAAA,QAAA,CAAA;AACjB,EAAA,MAAM,SAAY,GAAA,IAAA,CAAK,KAAM,CAAA,QAAA,GAAW,KAAK,CAAA,CAAA;AAE7C,EAAA,OAAO,EAAE,KAAA,EAAO,QAAU,EAAA,MAAA,EAAQ,SAAU,EAAA,CAAA;AAC9C,CAAA;AACO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,MAAA,GAAS,EAAE,GAAK,EAAA,EAAA,EAAI,MAAM,GAAK,EAAA,MAAA,EAAQ,GAAK,EAAA,KAAA,EAAO,EAAG,EAAA;AAAA,EACtD,KAAO,EAAA;AAAA,IACL,eAAkB,GAAA;AAAA,MAChB,QAAU,EAAA,SAAA;AAAA,MACV,QAAU,EAAA,SAAA;AAAA,MACV,KAAO,EAAA,SAAA;AAAA,MACP,aAAe,EAAA,SAAA;AAAA,KACjB;AAAA,IACA,GAAG,KAAA;AAAA,GACL;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AACF,CAA2B,KAAA;AACzB,EAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,MAAA,EAAQ,CAAA,CAAA;AAEtB,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM,CAAA,CAAA;AAE1C,EAAA,IAAI,CAAC,KAAA,CAAM,cAAkB,IAAA,eAAA,CAAgB,OAAO,EAAI,EAAA;AACtD,IAAA,eAAA,CAAgB,IAAO,GAAA,EAAA,CAAA;AAAA,GACzB;AACA,EAAI,IAAA,UAAA,GACF,MAAM,KAAM,CAAA,KAAA,GAAA,CAAS,CAAC,eAAgB,CAAA,IAAA,GAAO,gBAAgB,KAAS,IAAA,CAAA,CAAA;AACxE,EAAI,IAAA,WAAA,GACF,MAAM,KAAM,CAAA,MAAA,GAAA,CAAU,CAAC,eAAgB,CAAA,GAAA,GAAM,gBAAgB,MAAU,IAAA,CAAA,CAAA;AACzE,EAAI,IAAA,UAAA,GAAa,KAAM,CAAA,KAAA,CAAM,QAAU,EAAA;AACrC,IAAA,MAAM,YAAY,gBAAiB,CAAA;AAAA,MACjC,MAAQ,EAAA,WAAA;AAAA,MACR,KAAO,EAAA,UAAA;AAAA,MACP,QAAA,EAAU,MAAM,KAAM,CAAA,QAAA;AAAA,KACvB,CAAA,CAAA;AACD,IAAA,UAAA,GAAa,SAAU,CAAA,KAAA,CAAA;AACvB,IAAA,WAAA,GAAc,SAAU,CAAA,MAAA,CAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,SAAA,GAAY,CAAC,CAAA,KAAc,CAAE,CAAA,GAAA,CAAA;AACnC,EAAM,MAAA,SAAA,GAAY,CAAC,CAAA,KAAc,CAAE,CAAA,KAAA,CAAA;AAEnC,EAAA,MAAM,SAAS,YAAa,CAAA,KAAA,CAAM,QAAU,EAAA,IAAI,EAC7C,MAAO,CAAA,CAAC,KAAU,KAAA,CAAC,CAAC,KAAM,CAAA,IAAI,CAC9B,CAAA,GAAA,CAAI,CAAC,KAAU,KAAA;AACd,IAAO,OAAA;AAAA,MACL,GAAG,KAAA;AAAA,MACH,YAAY,KAAM,CAAA,IAAA;AAAA,KACpB,CAAA;AAAA,GACD,CAAA,CAAA;AACH,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,GAAG,CAAA,CAAA;AAChD,EAAA,MAAM,UAAa,GAAA,MAAA,CAAO,GAAI,CAAA,CAAC,KAAU,KAAA;AACvC,IAAA,OAAO,KAAM,CAAA,IAAA,CAAA;AAAA,GACd,CAAA,CAAA;AACD,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,MACE,uBAAwB,CAAA;AAAA,MACtB,MAAM,YAAa,CAAA,KAAA,CAAM,SAAS,IAAI,CAAA,CAAE,UAA+B,CACpE,CAAA,IAAA;AAAA,MACH,SAAW,EAAA,SAAA;AAAA,MACX,SAAW,EAAA,SAAA;AAAA,MACX,SAAA,EAAW,MAAM,SAAa,IAAA,IAAA;AAAA,MAC9B,MAAQ,EAAA,eAAA;AAAA,KACT,CAAA;AAAA,IACH,CAAC,KAAM,CAAA,QAAA,CAAS,MAAM,KAAM,CAAA,SAAA,EAAW,YAAY,eAAe,CAAA;AAAA,GACpE,CAAA;AAGA,EAAA,MAAM,OAAU,GAAA,GAAA,CAAA;AAEhB,EAAA,MAAM,SAAS,SAAU,CAAA;AAAA,IACvB,QAAQ,KAAM,CAAA,GAAA,CAAI,CAAC,IAAA,KAAS,KAAK,CAAC,CAAA;AAAA,IAClC,OAAA;AAAA,IACA,KAAA,EAAO,CAAC,CAAA,EAAG,UAAU,CAAA;AAAA,GACtB,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,QAAQ,MAAM;AAC5B,IAAM,MAAA,MAAA,GAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,IAAA,KAAS,CAAC,IAAK,CAAA,KAAA,EAAO,IAAK,CAAA,GAAG,CAAC,CAAA,CAAA;AAC7D,IAAA,MAAM,CAAC,GAAA,EAAK,GAAG,CAAA,GAAI,OAAe,MAAM,CAAA,CAAA;AACxC,IAAO,OAAA,GAAA,IAAO,QAAQ,GAAO,IAAA,IAAA,GAAO,CAAC,GAAM,GAAA,CAAA,EAAG,GAAM,GAAA,CAAC,CAAI,GAAA,KAAA,CAAA,CAAA;AAAA,GAC3D,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EAAA,MAAM,SAAS,WAAY,CAAA;AAAA,IACzB,MAAQ,EAAA,OAAA;AAAA,IACR,IAAM,EAAA,IAAA;AAAA,IACN,KAAA,EAAO,CAAC,WAAA,EAAa,CAAC,CAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,QAAQ,MAAM,CAAA,aAAA,EAAgB,UAAU,CAAA,CAAA,EAAI,EAAE,CAAA,CAAA;AACzD,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,QAAA,CACG,iBAA8B,CAAI,CAAA,EAAA,EAAE,aAAa,CACjD,CAAA,OAAA,CAAQ,CAAC,OAAY,KAAA;AACpB,MAAM,MAAA,KAAA,GAAQ,OAAQ,CAAA,qBAAA,EAAwB,CAAA,KAAA,CAAA;AAE9C,MAAA,OAAA,CAAQ,KAAM,CAAA,eAAA,GACX,OAAQ,CAAA,YAAA,CAAa,GAAG,CAAe,GAAA,SAAA,CAAA;AAE1C,MAAA,OAAA,CAAQ,KAAM,CAAA,SAAA,GAAY,CAA4B,yBAAA,EAAA,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAA,CAAA;AAAA,KAChE,CAAA,CAAA;AAAA,GACJ,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,MAAQ,EAAA,UAAA,EAAe,GAAA,aAAA;AAAA,IAC7B,KAAA,CAAA;AAAA,IACA,CAAC,SAAA;AAAA,GACH,CAAA;AACA,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAA,CAAA,EAAG,SAAY,GAAA,SAAA,GAAY,EAAE,CAAA,wBAAA,CAAA;AAAA,QACxC,GAAK,EAAA,MAAA;AAAA,QAEL,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,MAAM,KAAM,CAAA,MAAA;AAAA,YACpB,KAAA,EAAO,MAAM,KAAM,CAAA,KAAA;AAAA,YACnB,GAAK,EAAA,UAAA;AAAA,YAEL,+BAAC,KAAM,EAAA,EAAA,IAAA,EAAM,gBAAgB,IAAM,EAAA,GAAA,EAAK,gBAAgB,GACtD,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,YAAS,KAAO,EAAA,MAAA,EAAQ,KAAO,EAAA,UAAA,EAAY,iBAAgB,GAAI,EAAA,CAAA;AAAA,cAC/D,KAAM,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KAAU,KAAA;AAC1B,gBAAM,MAAA,CAAA,GAAI,MAAO,CAAA,IAAA,CAAK,CAAC,CAAA,CAAA;AACvB,gBAAM,MAAA,CAAA,GAAI,OAAO,IAAK,CAAA,GAAA,CAAI,KAAK,KAAO,EAAA,IAAA,CAAK,GAAG,CAAC,CAAA,CAAA;AAE/C,gBAAI,IAAA,CAAA,IAAK,IAAQ,IAAA,CAAA,IAAK,IAAM,EAAA;AAC1B,kBAAO,OAAA,IAAA,CAAA;AAAA,iBACT;AAEA,gBAAM,MAAA,SAAA,GAAY,IAAK,CAAA,GAAA,CAAI,MAAO,CAAA,IAAA,CAAK,KAAK,CAAI,GAAA,MAAA,CAAO,IAAK,CAAA,GAAG,CAAC,CAAA,CAAA;AAEhE,gBAAM,MAAA,MAAA,GAAS,KAAU,KAAA,KAAA,CAAM,MAAS,GAAA,CAAA,CAAA;AACxC,gBAAA,MAAM,WAAc,GAAA,CAAA,CAAA;AACpB,gBAAA,MAAM,EAAK,GAAA,CAAA,GAAI,MAAO,CAAA,SAAA,EAAc,GAAA,WAAA,CAAA;AACpC,gBAAA,MAAM,KAAK,CAAI,GAAA,MAAA,CAAO,SAAU,EAAA,IAAK,IAAI,OAAW,CAAA,GAAA,WAAA,CAAA;AACpD,gBAAA,MAAM,QAAQ,IAAK,CAAA,GAAA,GAAM,IAAK,CAAA,KAAA,GAAQ,IAAI,SAAY,GAAA,CAAA,CAAA;AAEtD,gBAAA,MAAM,WAAc,GAAA,EAAA,CAAA;AACpB,gBAAM,MAAA,MAAA,GACJ,OAAO,IAAK,CAAA,GAAG,KACb,IAAK,CAAA,CAAA,GAA0B,CAC7B,GAAA,WAAA,GACA,CAAC,WAAA,CAAA,CAAA;AAEP,gBAAA,IAAI,aAAgB,GAAA,CAAA,CAAA;AACpB,gBACG,KAAA,CAAA,MAAA,CAAO,CAAC,CAAA,EAAG,CAAM,KAAA;AAChB,kBAAA,IAAA,CAAK,MAAM,SAAa,IAAA,IAAA,KAAS,CAAC,KAAM,CAAA,CAAA,GAAI,CAAC,CAAG,EAAA;AAC9C,oBAAO,OAAA,KAAA,CAAA;AAAA,mBACT;AACA,kBAAA,OAAO,CAAK,IAAA,KAAA,CAAA;AAAA,iBACb,CAAA,CACA,OAAQ,CAAA,CAACA,KAAS,KAAA;AACjB,kBAAiB,aAAA,IAAA,MAAA,CAAOA,MAAK,CAAC,CAAA,CAAA;AAAA,iBAC/B,CAAA,CAAA;AAEH,gBACE,uBAAA,GAAA;AAAA,kBAAC,YAAA;AAAA,kBAAA;AAAA,oBACC,KAAA;AAAA,oBACA,UAAA,EAAY,WAAW,UAA+B,CAAA;AAAA,oBACtD,MAAM,IAAK,CAAA,KAAA;AAAA,oBACX,MAAQ,EAAA,SAAA;AAAA,oBACR,MAAA;AAAA,oBAEA,KAAA;AAAA,oBACA,IAAA;AAAA,oBACA,QAAQ,eAAgB,CAAA,aAAA;AAAA,oBACxB,eAAiB,EAAA,CAAA;AAAA,oBACjB,WACE,EAAA,KAAA,CAAM,SAAa,IAAA,IAAA,GACf,KAAK,CACJ,GAAA,aAAA;AAAA,oBAEP,KAAO,EAAA,CAAA,GAAI,MAAO,CAAA,SAAA,EAAc,GAAA,CAAA;AAAA,oBAChC,OAAO,MAAS,GAAA,CAAA;AAAA,oBAChB,KAAA,EAAO,OAAO,SAAU,EAAA;AAAA,oBACxB,CAAA;AAAA,oBACA,CAAA;AAAA,oBACA,EAAA;AAAA,oBACA,EAAA;AAAA,mBAAA;AAAA,kBAhBK,KAAA;AAAA,iBAiBP,CAAA;AAAA,eAEH,CAAA;AAAA,8BACD,GAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA,EAAA;AAAA,kBACP,KAAO,EAAA,MAAA;AAAA,kBACP,SAAS,EAAA,IAAA;AAAA,kBACT,gBAAgB,OAAO;AAAA,oBACrB,UAAY,EAAA,KAAA;AAAA,oBACZ,cAAgB,EAAA,QAAA;AAAA,oBAChB,OAAA,EAAS,KAAM,CAAA,cAAA,GAAiB,MAAS,GAAA,MAAA;AAAA,mBAC3C,CAAA;AAAA,iBAAA;AAAA,eACF;AAAA,8BACA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA,MAAA;AAAA,kBACP,GAAK,EAAA,WAAA;AAAA,kBACL,cAAA,EAAgB,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,kBAClC,aAAA,EAAe,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,iBAAA;AAAA,eACnC;AAAA,aACF,EAAA,CAAA;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,KACF;AAAA,oBACC,GAAA,CAAA,GAAA,EAAA,EAAI,SAAU,EAAA,sBAAA,EACZ,QAAC,EAAA,CAAA,KAAA,CAAM,YAAgB,IAAA,MAAA,CAAO,MAAS,GAAA,CAAA,oBACrC,IAAA,CAAA,GAAA,EAAA,EAAI,WAAU,uBAEb,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAQ,EAAI,EAAA,IAAA,EAAO,QAAS,EAAA,QAAA,CAAA,aAAa,EAAE,IAAK,EAAA,CAAA;AAAA,sBACjD,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,OAAA;AAAA,UACA,MAAQ,EAAA,UAAA;AAAA,UACR,SAAU,EAAA,oBAAA;AAAA,UACV,OAAS,EAAA,UAAA;AAAA,UACT,UAAY,EAAA,aAAA;AAAA,SAAA;AAAA,OACd;AAAA,KAAA,EACF,CAoBJ,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}