@apia/charts 1.0.4 → 2.0.0

package/dist/charts/verticalBars/Bar.js

@@ -0,0 +1,239 @@
+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,
+  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__ */ jsxs(
+    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,
+          opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
+          height: bar.height > 0 ? bar.height : 0
+        }),
+        [
+          bar.height,
+          bar.width,
+          bar.x,
+          bar.y,
+          currentBarColor,
+          isAnyHighlighted,
+          isHighlighted
+        ]
+      ),
+      onMouseEnter: (ev) => {
+        console.log(bar.key, parsedData[barGroup.index].columnName);
+        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: "height",
+            from: 0,
+            to: bar.height,
+            dur: "0.5s",
+            calcMode: "paced",
+            keySplines: "0.5 0 0.5 1;",
+            keyTimes: "0; 1"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "y",
+            from: bar.y + bar.height,
+            to: bar.y,
+            dur: "0.5s",
+            calcMode: "paced",
+            keySplines: "0.5 0 0.5 1;",
+            keyTimes: "0; 1"
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+export { Bar };
+//# sourceMappingURL=Bar.js.map

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

@@ -0,0 +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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"}

package/dist/charts/verticalBars/VerticalBars.js

@@ -0,0 +1,394 @@
+import { jsxs, Fragment, jsx } from '@apia/theme/jsx-runtime';
+import uniqueId from 'lodash-es/uniqueId';
+import { arrayOrArray, usePanAndZoom, getLabel } from '@apia/util';
+import { parseMargin } from '../util/parseMargin.js';
+import { scaleBand, scaleLog, scaleLinear, scaleOrdinal } from '@visx/scale';
+import { useMemo, useLayoutEffect } from 'react';
+import { Box, Heading } from '@apia/theme';
+import { Grid } from '@visx/visx';
+import { Group } from '@visx/group';
+import { BarGroup } from '@visx/shape';
+import { AxisLeft, AxisBottom } from '@visx/axis';
+import { useChartStyles } from '../util/useChartStyles.js';
+import { Bar } from './Bar.js';
+import { getBarColor } from '../util/getBarColor.js';
+import { LegendContainer } from '../util/LegendContainer.js';
+
+function adjustDimensions({
+  width,
+  height,
+  maxWidth
+}) {
+  if (width <= maxWidth) {
+    return { width, height };
+  }
+  const ratio = width / height;
+  const newWidth = maxWidth;
+  const newHeight = Math.floor(newWidth / ratio);
+  return { width: newWidth, height: newHeight };
+}
+const getXValue = (d) => d.columnName;
+const VerticalBars = ({
+  margin = { top: 20, left: 100, bottom: 24, right: 0 },
+  chart,
+  className,
+  chartId,
+  allowZoom
+}) => {
+  const effectiveMargin = parseMargin(margin);
+  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {
+    effectiveMargin.left = 50;
+  }
+  let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
+  let innerHeight = chart.ratio.height + (chart.showAxisXTitle ? -effectiveMargin.top - effectiveMargin.bottom : (-effectiveMargin.top - effectiveMargin.bottom) / 2);
+  if (innerWidth > chart.ratio.maxWidth) {
+    const newValues = adjustDimensions({
+      height: innerHeight,
+      width: innerWidth,
+      maxWidth: chart.ratio.maxWidth
+    });
+    innerWidth = newValues.width;
+    innerHeight = newValues.height;
+  }
+  const styles = useChartStyles(chart.colorSchema);
+  const columnas = arrayOrArray(chart.dataSets?.data).filter((column) => !!column.sets).map((column) => {
+    return {
+      ...column,
+      sets: column.sets
+    };
+  });
+  const xValues = arrayOrArray(columnas[0].sets).map(
+    (innerCoord) => innerCoord.key
+  );
+  const columnNames = columnas.map((col) => {
+    return col.name;
+  });
+  const parsedData = xValues.map((x) => {
+    const obj = columnas.reduce(
+      (acc, column) => {
+        return {
+          ...acc,
+          [column.name]: arrayOrArray(column.sets).filter((coord) => {
+            return coord.key === x;
+          })[0].value
+        };
+      },
+      { columnName: x }
+    );
+    return obj;
+  });
+  const xScale = scaleBand({
+    range: [
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
+      chart.ratio.width
+    ],
+    domain: parsedData.map(getXValue),
+    padding: 0.2
+  });
+  const numericXScale = scaleBand({
+    range: [
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
+      chart.ratio.width
+    ],
+    domain: parsedData.map((_, i) => `${i + 1}`),
+    padding: 0.2
+  });
+  const columnGroupScale = scaleBand({
+    domain: columnNames,
+    range: [0, xScale.bandwidth()]
+  });
+  const yScaleLog = scaleLog({
+    range: [
+      innerHeight,
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
+    ],
+    domain: [
+      1,
+      Math.max(
+        ...parsedData.map(
+          (d) => Math.max(...columnNames.map((key) => Number(d[key])))
+        )
+      )
+    ],
+    base: 10
+  });
+  const yScaleLine = scaleLinear({
+    range: [
+      innerHeight,
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
+    ],
+    domain: [
+      0,
+      Math.max(
+        ...parsedData.map(
+          (d) => Math.max(...columnNames.map((key) => Number(d[key])))
+        )
+      )
+    ]
+  });
+  const color = scaleOrdinal({
+    domain: columnNames,
+    range: columnas.map((col) => col.color)
+  });
+  const isLogScale = false;
+  const yScale = useMemo(() => {
+    {
+      return yScaleLine;
+    }
+  }, [isLogScale, yScaleLine, yScaleLog]);
+  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
+  useLayoutEffect(() => {
+    document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
+      const box = current.getBoundingClientRect();
+      if (box.width > 125) {
+        current.style.width = "125px";
+        current.style.overflow = "hidden";
+        current.style.textOverflow = "ellipsis";
+        current.style.whiteSpace = "nowrap";
+      }
+      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
+      current.style.transform = `rotate(25deg)`;
+    });
+  });
+  const { boxRef, elementRef } = usePanAndZoom(
+    void 0,
+    !allowZoom
+  );
+  const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {
+    const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
+    const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(
+      styles ? styles.schema : [
+        "#7ad6f4",
+        "#45bdee",
+        "#28a7ea",
+        "#006cbb",
+        "#034698",
+        "#032f64"
+      ]
+    ).length > 0 ? getBarColor(
+      arrayOrArray(
+        styles ? styles.schema : [
+          "#7ad6f4",
+          "#45bdee",
+          "#28a7ea",
+          "#006cbb",
+          "#034698",
+          "#032f64"
+        ]
+      ),
+      index,
+      isSingle
+    ) : "";
+    const returnColumnsArray = [];
+    arrayOrArray(data.sets).forEach((set) => {
+      if (set.color !== "" && set.color !== void 0) {
+        returnColumnsArray.push({ ...set, columnName: data.name });
+      } else {
+        returnColumnsArray.push({
+          ...set,
+          color: dataColor,
+          columnName: data.name
+        });
+      }
+    });
+    return returnColumnsArray;
+  });
+  const colorReference = arrayOrArray(chart.dataSets.data).map(
+    (data, index) => {
+      const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
+      const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(
+        styles ? styles.schema : [
+          "#7ad6f4",
+          "#45bdee",
+          "#28a7ea",
+          "#006cbb",
+          "#034698",
+          "#032f64"
+        ]
+      ).length > 0 ? getBarColor(
+        arrayOrArray(
+          styles ? styles.schema : [
+            "#7ad6f4",
+            "#45bdee",
+            "#28a7ea",
+            "#006cbb",
+            "#034698",
+            "#032f64"
+          ]
+        ),
+        index,
+        isSingle
+      ) : "";
+      return {
+        color: dataColor,
+        title: data.name
+      };
+    }
+  );
+  let numberReference = [];
+  if (colorReference.length === 1) {
+    numberReference = arrayOrArray(
+      arrayOrArray(chart.dataSets.data)[0].sets
+    ).map((data, index) => {
+      return {
+        color: `${index + 1}`,
+        title: data.key
+      };
+    });
+  }
+  arrayOrArray(chart.dataSets.data).map((data) => {
+    const returnArray = [];
+    arrayOrArray(data.sets).forEach((set) => {
+      if (set.color !== "" && set.color !== void 0) {
+        returnArray.push({
+          color: set.color,
+          title: data.name + " - " + set.key
+        });
+      }
+    });
+    return returnArray;
+  }).flat().forEach((addRef) => colorReference.push(addRef));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: boxRef,
+        id,
+        className: `${className ?? ""} ${chart.title} chartBox chartContainer`,
+        sx: {
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            ref: elementRef,
+            className: `_${chartId} chart__svg`,
+            height: chart.ratio.height,
+            width: chart.ratio.width,
+            children: [
+              chart.showGrid && /* @__PURE__ */ jsx(
+                Grid.Grid,
+                {
+                  xScale,
+                  yScale,
+                  left: 0,
+                  width: chart.ratio.width,
+                  height: innerHeight,
+                  numTicksRows: 10,
+                  numTicksColumns: 10,
+                  top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Group,
+                {
+                  top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
+                  children: /* @__PURE__ */ jsx(
+                    BarGroup,
+                    {
+                      data: parsedData,
+                      keys: columnNames,
+                      height: innerHeight,
+                      x0: getXValue,
+                      x0Scale: xScale,
+                      x1Scale: columnGroupScale,
+                      yScale,
+                      color,
+                      children: (barGroups) => barGroups.map((barGroup) => {
+                        return /* @__PURE__ */ jsx(
+                          Group,
+                          {
+                            left: barGroup.x0,
+                            children: barGroup.bars.map((bar) => {
+                              const key = `${barGroup.index}-${bar.index}-${bar.key}`;
+                              return /* @__PURE__ */ jsx(
+                                Bar,
+                                {
+                                  isSingle: barGroup.bars.length === 1,
+                                  bar,
+                                  barGroup,
+                                  chart,
+                                  parsedData,
+                                  setsWithColor: setsWithColor.flat()
+                                },
+                                key
+                              );
+                            })
+                          },
+                          `bar-group-${barGroup.index}-${barGroup.x0}`
+                        );
+                      })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AxisLeft,
+                {
+                  scale: yScale,
+                  left: effectiveMargin.left,
+                  label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : "",
+                  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(
+                AxisBottom,
+                {
+                  top: innerHeight,
+                  scale: colorReference.length === 1 && numberReference.length > 0 ? numericXScale : xScale,
+                  label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
+                  tickLabelProps: { display: "none" },
+                  tickLineProps: { display: "none" },
+                  labelOffset: 0
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { className: "chartLegend__Wrapper", children: chart.showLegend && colorReference.length !== 0 && /* @__PURE__ */ jsxs(Box, { className: "chart__legend__wrapper", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h6", children: getLabel("mnuLeyends").text }),
+      /* @__PURE__ */ jsx(
+        LegendContainer,
+        {
+          id: chartId,
+          references: colorReference.length === 1 && numberReference.length > 0 ? numberReference : colorReference,
+          useNumbered: colorReference.length === 1
+        }
+      )
+    ] }) })
+  ] });
+};
+
+export { VerticalBars };
+//# sourceMappingURL=VerticalBars.js.map