@apia/charts 1.0.4 → 2.0.0

package/dist/charts/ChartContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+const ChartContext = createContext({});
+
+export { ChartContext };
+//# sourceMappingURL=ChartContext.js.map

package/dist/charts/ChartContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartContext.js","sources":["../../src/charts/ChartContext.tsx"],"sourcesContent":["import { createContext } from 'react';\n\nexport type TChartContext = {\n  chartId: string;\n};\n\nexport const ChartContext = createContext<TChartContext>({} as TChartContext);\n"],"names":[],"mappings":";;AAMa,MAAA,YAAA,GAAe,aAA6B,CAAA,EAAmB;;;;"}

package/dist/charts/ChartRenderer.d.ts

@@ -0,0 +1,17 @@
+import * as _apia_util from '@apia/util';
+import { TApiaChartDefinition, TChartRendererProps } from './types.js';
+import React__default from 'react';
+
+declare const ChartRenderer: React__default.FC<{
+    currentChart: TApiaChartDefinition;
+    chartConfig?: Partial<Omit<TApiaChartDefinition, "columns">> | undefined;
+    chartProps?: Partial<TChartRendererProps> | undefined;
+    allowScaleChange?: boolean | undefined;
+    chartId: string;
+    allowZoom?: boolean | undefined;
+} & React__default.RefAttributes<HTMLElement> & {
+    id: _apia_util.TId;
+}>;
+
+export { ChartRenderer };
+//# sourceMappingURL=ChartRenderer.d.ts.map

package/dist/charts/ChartRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartRenderer.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/charts/ChartRenderer.js

@@ -0,0 +1,175 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import React, { useMemo } from 'react';
+import { makeStyledComponent, responsive, spacing, Box, getVariant } from '@apia/theme';
+import { HorizontalBars } from './horizontalBars/HorizontalBars.js';
+import { PieChart } from './pie/Pie.js';
+import { makeImperativeComponent, useImperativeComponentContext, getIndex } from '@apia/util';
+import { VerticalBars } from './verticalBars/VerticalBars.js';
+import { ChartContext } from './ChartContext.js';
+import { LineChart } from './linear/LineChart.js';
+import { WaterfallBars } from './waterfallBars/WaterfallBars.js';
+
+const frontColor = "hsl(196, 37%, 13%)";
+function useMultipleRefs(...refs) {
+  return React.useCallback(
+    function setRef(element) {
+      refs.forEach((current) => {
+        if (current)
+          current.current = element;
+      });
+    },
+    [refs]
+  );
+}
+const [, chartMethods, ChartRenderer] = makeImperativeComponent()({
+  Component: makeStyledComponent(
+    "ChartRenderer",
+    "layout.charts",
+    {
+      red: {
+        schema: "schemas.red"
+      },
+      orange: {
+        schema: "schemas.orange"
+      },
+      green: {
+        schema: "schemas.green"
+      },
+      blue: {
+        schema: "schemas.blue"
+      },
+      violet: {
+        schema: "schemas.violet"
+      },
+      turquoise: {
+        schema: "schemas.turquoise"
+      },
+      yellow: {
+        schema: "schemas.yellow"
+      },
+      grey: {
+        schema: "schemas.grey"
+      },
+      ocean: {
+        schema: "schemas.ocean"
+      },
+      sunset: {
+        schema: "schemas.sunset"
+      },
+      common: {
+        axis: {
+          stroke: frontColor,
+          title: frontColor
+        },
+        schema: frontColor,
+        background: "hsl(200deg 20% 98%)",
+        grid: {
+          stroke: frontColor,
+          opacity: "0.1"
+        },
+        toolTip: {
+          backgroundColor: "rgb(232, 241, 255)",
+          border: "1px solid #07c",
+          color: frontColor,
+          padding: ".3rem .5rem",
+          borderRadius: "3px",
+          fontSize: "18px",
+          boxShadow: "0 1px 2px rgba(33,33,33,0.2)",
+          lineHeight: "1em"
+        }
+      },
+      ".chartBox": () => {
+        return {
+          position: responsive({ 0: "static", 3: "sticky" }),
+          top: "0",
+          background: "white",
+          zIndex: "1"
+        };
+      },
+      ".legendContainer": {
+        display: "flex",
+        flexDirection: "column",
+        gap: spacing(2),
+        overflow: "hidden",
+        alignItems: "start",
+        button: () => ({
+          justifyContent: "start",
+          textAlign: "start",
+          width: "100%",
+          textDecoration: "none",
+          svg: {
+            paddingLeft: spacing(1)
+          }
+        })
+      },
+      ".legendItem": {
+        transition: "opacity 200ms",
+        "&.isBlurred": {
+          opacity: "0.15"
+        },
+        ".button__content": {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          wordWrap: "normal",
+          display: "block",
+          whiteSpace: "nowrap",
+          p: spacing(1)
+        }
+      }
+    },
+    // eslint-disable-next-line react/display-name
+    React.forwardRef(
+      ({
+        currentChart,
+        chartId,
+        allowZoom,
+        id
+      }, ref) => {
+        const innerRef = React.useRef(null);
+        const setRefs = useMultipleRefs(
+          ref,
+          innerRef
+        );
+        const { id: imperativeId } = useImperativeComponentContext();
+        const contextValue = useMemo(
+          () => ({ chartId: String(imperativeId) }),
+          [imperativeId]
+        );
+        const CurrentChart = getIndex(
+          [PieChart, HorizontalBars, VerticalBars, LineChart, WaterfallBars],
+          [
+            currentChart.chartType === "pie2D",
+            currentChart.chartType === "barH2D",
+            currentChart.chartType === "barV2D",
+            currentChart.chartType === "linear",
+            currentChart.chartType === "waterfall"
+          ],
+          0
+        );
+        return /* @__PURE__ */ jsx(ChartContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            ref: setRefs,
+            className: "chart__chartRenderer",
+            ...getVariant("layout.charts"),
+            id,
+            children: /* @__PURE__ */ jsx(
+              CurrentChart,
+              {
+                chart: currentChart,
+                chartId,
+                parentRef: innerRef,
+                allowZoom,
+                margin: currentChart.margin
+              }
+            )
+          }
+        ) });
+      }
+    ),
+    true
+  )
+});
+
+export { ChartRenderer, chartMethods };
+//# sourceMappingURL=ChartRenderer.js.map

package/dist/charts/ChartRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartRenderer.js","sources":["../../src/charts/ChartRenderer.tsx"],"sourcesContent":["import { TApiaChartDefinition, TChartRendererProps } from './types';\nimport React, { useMemo, RefAttributes } from 'react';\nimport { Box, responsive } from '@apia/theme';\nimport { getVariant, makeStyledComponent, spacing } from '@apia/theme';\nimport { HorizontalBars } from './horizontalBars/HorizontalBars';\nimport { PieChart } from './pie/Pie';\nimport {\n  getIndex,\n  makeImperativeComponent,\n  useImperativeComponentContext,\n} from '@apia/util';\nimport { VerticalBars } from './verticalBars/VerticalBars';\nimport { ChartContext } from './ChartContext';\nimport { LineChart } from './linear/LineChart';\nimport { WaterfallBars } from './waterfallBars/WaterfallBars';\n\nconst frontColor = 'hsl(196, 37%, 13%)';\n\nfunction useMultipleRefs<T extends HTMLElement | null>(\n  ...refs: React.MutableRefObject<T>[]\n) {\n  return React.useCallback(\n    function setRef(element: T) {\n      refs.forEach((current) => {\n        // eslint-disable-next-line no-param-reassign\n        if (current) current.current = element;\n      });\n    },\n    [refs],\n  );\n}\n\nexport type TChartEvents = {\n  highlight: string;\n};\n\nexport const [, chartMethods, ChartRenderer] = makeImperativeComponent<\n  {\n    currentChart: TApiaChartDefinition;\n    chartConfig?: Partial<Omit<TApiaChartDefinition, 'columns'>>;\n    chartProps?: Partial<TChartRendererProps>;\n    allowScaleChange?: boolean;\n    chartId: string;\n    allowZoom?: boolean;\n  } & RefAttributes<HTMLElement>,\n  TChartEvents\n>()({\n  Component: makeStyledComponent(\n    'ChartRenderer',\n    'layout.charts',\n    {\n      red: {\n        schema: 'schemas.red',\n      },\n      orange: {\n        schema: 'schemas.orange',\n      },\n      green: {\n        schema: 'schemas.green',\n      },\n      blue: {\n        schema: 'schemas.blue',\n      },\n      violet: {\n        schema: 'schemas.violet',\n      },\n      turquoise: {\n        schema: 'schemas.turquoise',\n      },\n      yellow: {\n        schema: 'schemas.yellow',\n      },\n      grey: {\n        schema: 'schemas.grey',\n      },\n      ocean: {\n        schema: 'schemas.ocean',\n      },\n      sunset: {\n        schema: 'schemas.sunset',\n      },\n      common: {\n        axis: {\n          stroke: frontColor,\n          title: frontColor,\n        },\n        schema: frontColor,\n        background: 'hsl(200deg 20% 98%)',\n        grid: {\n          stroke: frontColor,\n          opacity: '0.1',\n        },\n        toolTip: {\n          backgroundColor: 'rgb(232, 241, 255)',\n          border: '1px solid #07c',\n          color: frontColor,\n          padding: '.3rem .5rem',\n          borderRadius: '3px',\n          fontSize: '18px',\n          boxShadow: '0 1px 2px rgba(33,33,33,0.2)',\n          lineHeight: '1em',\n        },\n      },\n      '.chartBox': () => {\n        return {\n          position: responsive({ 0: 'static', 3: 'sticky' }),\n          top: '0',\n          background: 'white',\n          zIndex: '1',\n        };\n      },\n      '.legendContainer': {\n        display: 'flex',\n        flexDirection: 'column',\n        gap: spacing(2),\n        overflow: 'hidden',\n        alignItems: 'start',\n        button: () => ({\n          justifyContent: 'start',\n          textAlign: 'start',\n          width: '100%',\n          textDecoration: 'none',\n          svg: {\n            paddingLeft: spacing(1),\n          },\n        }),\n      },\n\n      '.legendItem': {\n        transition: 'opacity 200ms',\n\n        '&.isBlurred': {\n          opacity: '0.15',\n        },\n\n        '.button__content': {\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          wordWrap: 'normal',\n          display: 'block',\n          whiteSpace: 'nowrap',\n          p: spacing(1),\n        },\n      },\n    },\n    // eslint-disable-next-line react/display-name\n    React.forwardRef(\n      (\n        {\n          currentChart,\n          chartId,\n          allowZoom,\n          id,\n        }: {\n          currentChart: TApiaChartDefinition;\n          chartProps?: Partial<TChartRendererProps>;\n          allowScaleChange?: boolean;\n          chartId: string;\n          id: string;\n          allowModal?: boolean;\n          allowZoom?: boolean;\n        },\n        ref,\n      ) => {\n        const innerRef = React.useRef<HTMLElement | null>(null);\n        const setRefs = useMultipleRefs(\n          ref as React.MutableRefObject<HTMLElement>,\n          innerRef,\n        );\n\n        const { id: imperativeId } = useImperativeComponentContext();\n\n        const contextValue = useMemo(\n          () => ({ chartId: String(imperativeId) }),\n          [imperativeId],\n        );\n        const CurrentChart = getIndex(\n          [PieChart, HorizontalBars, VerticalBars, LineChart, WaterfallBars],\n          [\n            currentChart.chartType === 'pie2D',\n            currentChart.chartType === 'barH2D',\n            currentChart.chartType === 'barV2D',\n            currentChart.chartType === 'linear',\n            currentChart.chartType === 'waterfall',\n          ],\n          0,\n        );\n        return (\n          <ChartContext.Provider value={contextValue}>\n            <Box\n              ref={setRefs}\n              className=\"chart__chartRenderer\"\n              {...getVariant('layout.charts')}\n              id={id}\n            >\n              <CurrentChart\n                chart={currentChart}\n                chartId={chartId}\n                parentRef={innerRef as React.MutableRefObject<HTMLElement>}\n                allowZoom={allowZoom}\n                margin={currentChart.margin}\n              />\n            </Box>\n          </ChartContext.Provider>\n        );\n      },\n    ),\n    true,\n  ),\n});\n"],"names":[],"mappings":"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"}

package/dist/charts/horizontalBars/Bar.js

@@ -0,0 +1,226 @@
+import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
+import tinycolor from 'tinycolor2';
+import { Box } from '@apia/theme';
+import { localPoint } from '@visx/event';
+import { arrayOrArray, useImperativeComponentEvents } from '@apia/util';
+import { legendContainerMethods } from '../util/LegendContainer.js';
+import { useState, useRef, useContext, useMemo } from 'react';
+import { ChartContext } from '../ChartContext.js';
+import { chartMethods } from '../ChartRenderer.js';
+import { ApiaUtil } from '@apia/components';
+
+const Bar = ({
+  bar,
+  barGroup,
+  chart,
+  parsedData,
+  isSingle,
+  effectiveMargin,
+  setsWithColor
+}) => {
+  const column = arrayOrArray(chart.dataSets.data)[bar.index];
+  const set = arrayOrArray(column?.sets)[barGroup.index];
+  const currentBarColor = setsWithColor.find(
+    (innerSet) => innerSet.columnName === column.name && innerSet.key === set.key
+  )?.color;
+  const [isHighlighted, setIsHighlighted] = useState(false);
+  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);
+  const ref = useRef(null);
+  useImperativeComponentEvents({
+    highlight(barNameColumn) {
+      let barName = barNameColumn;
+      let columnName = "";
+      if (barNameColumn.includes("_$_")) {
+        barName = barNameColumn.split("_$_")[0];
+        columnName = barNameColumn.split("_$_")[1];
+        if (isSingle && barNameColumn !== "" && barNameColumn !== void 0) {
+          barName = barNameColumn.split("_$_")[1];
+          columnName = barNameColumn.split("_$_")[1];
+        }
+      }
+      if (barName.split(" - ").length === 1) {
+        if (arrayOrArray(chart.dataSets.data).length === 1) {
+          setIsHighlighted(barName === parsedData[barGroup.index].columnName);
+          setIsAnyHighlighted(
+            barName !== parsedData[barGroup.index].columnName && barName !== ""
+          );
+          if (barName === parsedData[barGroup.index].columnName && columnName === parsedData[barGroup.index].columnName) {
+            if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
+              ApiaUtil.instance.tooltips.open({
+                children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        color: currentBarColor
+                      },
+                      children: /* @__PURE__ */ jsx("strong", { children: chart.showAxisXTitle ? parsedData[barGroup.index].columnName : chart.showLegend ? bar.key : "" })
+                    }
+                  ),
+                  chart.showValues && /* @__PURE__ */ jsx("div", { children: bar.value }),
+                  /* @__PURE__ */ jsx("div", { children: chart.showAxisXTitle && chart.showLegend ? bar.key : "" })
+                ] }),
+                attachToElement: () => ref.current,
+                attachToElementAnchorPoint: "center"
+              });
+            }
+          }
+        } else {
+          setIsHighlighted(barName === bar.key);
+          setIsAnyHighlighted(barName !== bar.key && barName !== "");
+          const currentBar = document.querySelector(
+            `.${parsedData[barGroup.index].columnName}__${bar.key}`
+          );
+          if (barName === bar.key && columnName === parsedData[barGroup.index].columnName) {
+            if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
+              ApiaUtil.instance.tooltips.open({
+                children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        color: currentBarColor
+                      },
+                      children: /* @__PURE__ */ jsx("strong", { children: chart.showAxisXTitle ? parsedData[barGroup.index].columnName : chart.showLegend ? bar.key : "" })
+                    }
+                  ),
+                  chart.showValues && /* @__PURE__ */ jsx("div", { children: bar.value }),
+                  /* @__PURE__ */ jsx("div", { children: chart.showAxisXTitle && chart.showLegend ? bar.key : "" })
+                ] }),
+                attachToElement: () => ref.current,
+                attachToElementAnchorPoint: "center"
+              });
+            }
+          } else if (barName === bar.key && currentBar && columnName === "") {
+            if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
+              ApiaUtil.instance.tooltips.open({
+                children: parsedData.map((dat, i) => {
+                  return /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          color: currentBarColor
+                        },
+                        children: /* @__PURE__ */ jsx("strong", { children: chart.showAxisXTitle ? dat.columnName : chart.showLegend ? Object.keys(dat).find(
+                          (key) => dat[key] === dat[barName]
+                        ) : "" })
+                      }
+                    ),
+                    chart.showValues && /* @__PURE__ */ jsx("div", { children: dat[barName] }),
+                    /* @__PURE__ */ jsx("div", {}),
+                    parsedData[i + 1] && /* @__PURE__ */ jsx("hr", {})
+                  ] }, `${dat.columnName}_${dat[barName]}`);
+                }),
+                attachToMousePosition: true
+              });
+            }
+          }
+        }
+      } else if (barName.split(" - ").length === 2) {
+        setIsHighlighted(
+          barName.split(" - ")[0] === bar.key && barName.split(" - ")[1] === set.key
+        );
+        setIsAnyHighlighted(
+          barName.split(" - ")[0] !== bar.key && barName.split(" - ")[0] !== ""
+        );
+        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({
+              children: /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      color: currentBarColor
+                    },
+                    children: /* @__PURE__ */ jsx("strong", { children: chart.showAxisXTitle ? parsedData[barGroup.index].columnName : chart.showLegend ? bar.key : "" })
+                  }
+                ),
+                chart.showValues && /* @__PURE__ */ jsx("div", { children: bar.value }),
+                /* @__PURE__ */ jsx("div", { children: chart.showAxisXTitle && chart.showLegend ? bar.key : "" })
+              ] }),
+              attachToElement: () => ref.current,
+              attachToElementAnchorPoint: "center"
+            });
+          }
+        }
+      }
+    }
+  });
+  const { chartId } = useContext(ChartContext);
+  return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "rect",
+      className: `chart__barRect ${parsedData[barGroup.index].columnName}__${bar.key}`,
+      ref,
+      sx: useMemo(
+        () => ({
+          fill: isAnyHighlighted ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}` : currentBarColor,
+          "&:hover": {
+            fill: `#${tinycolor(currentBarColor).saturate(25).toHex()}`
+          },
+          transition: "fill 500ms, opacity 500ms",
+          x: bar.x,
+          y: bar.y,
+          width: bar.width - effectiveMargin.left,
+          opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
+          height: bar.height > 0 ? bar.height : 0
+        }),
+        [
+          bar.height,
+          bar.width,
+          bar.x,
+          bar.y,
+          currentBarColor,
+          effectiveMargin.left,
+          isAnyHighlighted,
+          isHighlighted
+        ]
+      ),
+      onMouseEnter: (ev) => {
+        if (!isSingle) {
+          legendContainerMethods.highlight(chartId, bar.key);
+        } else {
+          legendContainerMethods.highlight(
+            chartId,
+            parsedData[barGroup.index].columnName
+          );
+        }
+        chartMethods(
+          chartId,
+          "highlight",
+          `${bar.key}_$_${parsedData[barGroup.index].columnName}`
+        );
+        ev.target.classList?.add("over");
+        const point = {
+          x: localPoint(ev)?.x,
+          y: localPoint(ev)?.y
+        };
+        if (!point || !chart.showValues)
+          return;
+      },
+      onMouseLeave: (ev) => {
+        legendContainerMethods.highlight(chartId, "");
+        chartMethods(chartId, "highlight", "");
+        ev.target.classList?.remove("over");
+      },
+      children: /* @__PURE__ */ jsx(
+        "animate",
+        {
+          attributeName: "width",
+          from: 0,
+          to: bar.width,
+          dur: "0.5s",
+          calcMode: "paced",
+          keySplines: "0.5 0 0.5 1;",
+          keyTimes: "0; 1"
+        }
+      )
+    }
+  ) });
+};
+
+export { Bar };
+//# sourceMappingURL=Bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","sources":["../../../src/charts/horizontalBars/Bar.tsx"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport { BarGroupBar, BarGroupHorizontal } from '@visx/shape/lib/types';\nimport {\n  TApiaChartColorDisposition,\n  TChartMargin,\n  TChartRendererProps,\n} from '../types';\nimport { Box } from '@apia/theme';\nimport { localPoint } from '@visx/event';\nimport { IParsedColumn } from './HorizontalBars';\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  effectiveMargin,\n  setsWithColor,\n}: Pick<TChartRendererProps, 'chart'> & {\n  isSingle: boolean;\n  bar: BarGroupBar<string>;\n  barGroup: BarGroupHorizontal<string>;\n  parsedData: IParsedColumn[];\n  effectiveMargin: TChartMargin;\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\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\n  const { chartId } = useContext(ChartContext);\n  return (\n    <g>\n      {/* {chart.showValues && (\n        <text\n          x={bar.x + 5}\n          y={bar.y - 5}\n          width={bar.width}\n          height={bar.height}\n          textAnchor=\"start\"\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 - effectiveMargin.left,\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            effectiveMargin.left,\n            isAnyHighlighted,\n            isHighlighted,\n          ],\n        )}\n        onMouseEnter={(ev) => {\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=\"width\"\n          from={0}\n          to={bar.width}\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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"}