@apia/charts 3.0.1 → 3.0.2

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

@@ -1 +0,0 @@
-{"version":3,"file":"HorizontalBars.js","sources":["../../../src/charts/horizontalBars/HorizontalBars.tsx"],"sourcesContent":["import uniqueId from 'lodash-es/uniqueId';\nimport { TApiaChartColorDisposition, TChartRendererProps } from '../types';\nimport { arrayOrArray, getLabel } from '@apia/util';\nimport { parseMargin } from '../util/parseMargin';\nimport { scaleLinear, scaleBand, scaleLog, scaleOrdinal } from '@visx/scale';\nimport React, { useLayoutEffect, useMemo } from 'react';\nimport { Box, Heading } from '@apia/theme';\nimport { Grid } from '@visx/visx';\nimport { Group } from '@visx/group';\nimport { BarGroupHorizontal } from '@visx/shape';\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport { Bar } from './Bar';\nimport { usePanAndZoom } from '@apia/util';\nimport { LegendContainer, TChartReference } from '../util/LegendContainer';\nimport { getBarColor } from '../util/getBarColor';\nimport { useChartStyles } from '../util/useChartStyles';\nexport interface IParsedColumn {\n  columnName: string;\n  [key: string]: string;\n}\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\nconst getYValue = (d: IParsedColumn) => d.columnName;\n\nexport type THorizontalBarsEvents = { highlight: { barName: string } };\n\n/**\n * Acepta parámetro pieces que debe ser compuesto por...\n *\n * @example\n *\n * // Instanciar con solamente x\n * <Pie pieces={{x: 3}} />\n *\n * // Instanciar con x e y\n * <Pie pieces={{x: 3, y: 5}} />\n */\nconst HorizontalBars = ({\n  margin = { top: 20, left: 50, bottom: 150, right: 20 },\n  chart,\n  className,\n  chartId,\n  outerClassName,\n  allowZoom,\n}: TChartRendererProps) => {\n  const effectiveMargin = parseMargin(margin);\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 columnas = arrayOrArray(chart.dataSets?.data)\n    .filter((column) => !!column.sets)\n    .map((column) => {\n      return {\n        ...column,\n        sets: column.sets,\n      };\n    });\n\n  const xValues = arrayOrArray(columnas[0].sets).map(\n    (innerCoord) => innerCoord.key,\n  );\n  const columnNames = columnas.map((col) => {\n    return col.name;\n  });\n\n  const parsedData: IParsedColumn[] = xValues.map((x) => {\n    const obj: IParsedColumn = columnas.reduce<IParsedColumn>(\n      (acc, column) => {\n        return {\n          ...acc,\n          [column.name]: arrayOrArray(column.sets).filter((coord) => {\n            return coord.key === x;\n          })[0].value,\n        };\n      },\n      { columnName: x },\n    );\n    return obj;\n  });\n\n  const yScale = scaleBand<string>({\n    range: [\n      typeof effectiveMargin === 'number'\n        ? effectiveMargin\n        : effectiveMargin.top,\n      innerHeight,\n    ],\n    domain: parsedData.map(getYValue),\n    padding: 0.2,\n  });\n\n  const columnGroupScale = scaleBand<string>({\n    domain: columnNames,\n    range: [0, yScale.bandwidth()],\n  });\n\n  const xScaleLog = scaleLog<number>({\n    range: [\n      typeof effectiveMargin === 'number'\n        ? effectiveMargin\n        : effectiveMargin.left,\n      innerWidth,\n    ],\n    domain: [\n      1,\n      Math.max(\n        ...parsedData.map((d) =>\n          Math.max(...columnNames.map((key) => Number(d[key]))),\n        ),\n      ),\n    ],\n    base: 10,\n  });\n\n  const xScaleLine = scaleLinear<number>({\n    range: [\n      typeof effectiveMargin === 'number'\n        ? effectiveMargin\n        : effectiveMargin.left,\n      innerWidth,\n    ],\n    domain: [\n      0,\n      Math.max(\n        ...parsedData.map((d) =>\n          Math.max(...columnNames.map((key) => Number(d[key]))),\n        ),\n      ),\n    ],\n  });\n\n  const color = scaleOrdinal<string, string>({\n    domain: columnNames,\n    range: columnas.map((col) => col.color),\n  });\n\n  const isLogScale = false;\n\n  const xScale = useMemo(() => {\n    if (!isLogScale) {\n      return xScaleLine;\n    }\n    return xScaleLog;\n  }, [isLogScale, xScaleLine, xScaleLog]);\n\n  const id = useMemo(() => `HorizontalBars${uniqueId()}`, []);\n  useLayoutEffect(() => {\n    document\n      .querySelectorAll<HTMLElement>(\n        `#${id} .__${(chartId as string) ?? outerClassName}`,\n      )\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(15deg) translateX(${width / 2}px)`;\n      });\n  });\n  const styles = useChartStyles(chart.colorSchema);\n  const { boxRef, elementRef } = usePanAndZoom<HTMLElement, SVGSVGElement>(\n    undefined,\n    !allowZoom ?? true,\n  );\n  const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {\n    const isSingle = arrayOrArray(chart.dataSets.data).length === 1;\n    const dataColor =\n      data.color !== '' && data.color !== undefined\n        ? data.color\n        : arrayOrArray(\n              styles\n                ? styles.schema\n                : [\n                    '#7ad6f4',\n                    '#45bdee',\n                    '#28a7ea',\n                    '#006cbb',\n                    '#034698',\n                    '#032f64',\n                  ],\n            ).length > 0\n          ? getBarColor(\n              arrayOrArray(\n                styles\n                  ? styles.schema\n                  : [\n                      '#7ad6f4',\n                      '#45bdee',\n                      '#28a7ea',\n                      '#006cbb',\n                      '#034698',\n                      '#032f64',\n                    ],\n              ),\n              index,\n              isSingle,\n            )\n          : '';\n    const returnColumnsArray: TApiaChartColorDisposition[] = [];\n    arrayOrArray(data.sets).forEach((set) => {\n      if (set.color !== '' && set.color !== undefined) {\n        returnColumnsArray.push({ ...set, columnName: data.name });\n      } else {\n        returnColumnsArray.push({\n          ...set,\n          color: dataColor,\n          columnName: data.name,\n        });\n      }\n    });\n    return returnColumnsArray;\n  });\n\n  const colorReference: TChartReference = arrayOrArray(chart.dataSets.data).map(\n    (data, index) => {\n      const isSingle = arrayOrArray(chart.dataSets.data).length === 1;\n      const dataColor =\n        data.color !== '' && data.color !== undefined\n          ? data.color\n          : arrayOrArray(\n                styles\n                  ? styles.schema\n                  : [\n                      '#7ad6f4',\n                      '#45bdee',\n                      '#28a7ea',\n                      '#006cbb',\n                      '#034698',\n                      '#032f64',\n                    ],\n              ).length > 0\n            ? getBarColor(\n                arrayOrArray(\n                  styles\n                    ? styles.schema\n                    : [\n                        '#7ad6f4',\n                        '#45bdee',\n                        '#28a7ea',\n                        '#006cbb',\n                        '#034698',\n                        '#032f64',\n                      ],\n                ),\n                index,\n                isSingle,\n              )\n            : '';\n      return {\n        color: dataColor,\n        title: data.name,\n      };\n    },\n  );\n  let numberReference: TChartReference = [];\n  if (colorReference.length === 1) {\n    numberReference = arrayOrArray(\n      arrayOrArray(chart.dataSets.data)[0].sets,\n    ).map((data, index) => {\n      return {\n        color: `${index + 1}`,\n        title: data.key,\n      };\n    });\n  }\n  arrayOrArray(chart.dataSets.data)\n    .map((data) => {\n      const returnArray: { color: string; title: string }[] = [];\n      arrayOrArray(data.sets).forEach((set) => {\n        if (set.color !== '' && set.color !== undefined) {\n          returnArray.push({\n            color: set.color,\n            title: data.name + ' - ' + set.key,\n          });\n        }\n      });\n      return returnArray;\n    })\n    .flat()\n    .forEach((addRef) => colorReference.push(addRef));\n\n  return (\n    <>\n      <Box\n        ref={boxRef}\n        id={id}\n        className={`${outerClassName ?? ''} ${chartId} ${\n          chart.title\n        } chartBox chartContainer`}\n        sx={React.useMemo(() => {\n          return {\n            [`.__${(chartId as string) ?? outerClassName}`]: {\n              transform: 'rotate(45deg)',\n              transformOrigin: 'attr(x) 18px',\n            },\n            overflow: 'hidden',\n            position: 'relative',\n\n            height: `${chart.ratio.height}px`,\n            // width: `${chart.ratio.width}px`,\n          };\n        }, [chart.ratio.height, chartId, outerClassName])}\n      >\n        <svg\n          ref={elementRef}\n          className={`_${chartId} ${className ? className : ''} chart__svg`}\n          height={chart.ratio.height}\n          width={chart.ratio.width}\n          style={{\n            position: 'absolute',\n          }}\n        >\n          {chart.showGrid && (\n            <Grid.Grid\n              xScale={xScale}\n              yScale={yScale}\n              left={0}\n              width={innerWidth}\n              height={innerHeight}\n              numTicksRows={10}\n              numTicksColumns={10}\n              top={\n                (typeof effectiveMargin === 'number'\n                  ? effectiveMargin\n                  : effectiveMargin.top) - 20\n              }\n            />\n          )}\n          <Group\n            top={\n              (typeof effectiveMargin === 'number'\n                ? effectiveMargin\n                : effectiveMargin.top) - 20\n            }\n            left={effectiveMargin.left}\n          >\n            <BarGroupHorizontal\n              data={parsedData}\n              keys={columnNames}\n              width={innerWidth}\n              y0={getYValue}\n              y0Scale={yScale}\n              y1Scale={columnGroupScale}\n              xScale={xScale}\n              color={color}\n            >\n              {(barGroups) =>\n                barGroups.map((barGroup) => {\n                  return (\n                    <Group\n                      key={`bar-group-${barGroup.index}-${barGroup.y0}`}\n                      top={barGroup.y0}\n                    >\n                      {barGroup.bars.map((bar) => {\n                        const key = `${barGroup.index}-${bar.index}-${bar.key}`;\n                        return (\n                          <Bar\n                            isSingle={barGroup.bars.length === 1}\n                            key={key}\n                            bar={bar}\n                            barGroup={barGroup}\n                            chart={chart}\n                            parsedData={parsedData}\n                            effectiveMargin={effectiveMargin}\n                            setsWithColor={setsWithColor.flat()}\n                          />\n                        );\n                      })}\n                    </Group>\n                  );\n                })\n              }\n            </BarGroupHorizontal>\n          </Group>\n          <AxisLeft\n            scale={yScale}\n            left={effectiveMargin.left}\n            label={\n              chart.chartType !== 'pie2D' && chart.showAxisXTitle\n                ? chart.axisXTitle\n                : ''\n            }\n            labelOffset={10}\n            tickLabelProps={() => ({\n              display: 'none',\n            })}\n          />\n          <AxisBottom\n            top={innerHeight}\n            scale={xScale}\n            label={\n              chart.chartType !== 'pie2D' && chart.showAxisYTitle\n                ? chart.axisYTitle\n                : ''\n            }\n            tickLabelProps={{ display: 'none' }}\n            tickLineProps={{ display: 'none' }}\n            labelOffset={30}\n          />\n        </svg>\n      </Box>\n      <Box className=\"chartLegend__Wrapper\">\n        {chart.showLegend && colorReference.length !== 0 && (\n          <Box className=\"chart__legend__wrapper\">\n            {/* TODO LABEL */}\n            <Heading as={'h6'}>{getLabel('mnuLeyends').text}</Heading>\n            <LegendContainer\n              id={chartId}\n              references={\n                // hideLegendsColors\n                //   ? colorReference.map((ref) => {\n                //       return { ...ref, color: 'transparent' };\n                //     })\n                colorReference.length === 1 && numberReference.length > 0\n                  ? numberReference\n                  : colorReference\n              }\n              useNumbered={colorReference.length === 1}\n            />\n          </Box>\n        )}\n      </Box>\n    </>\n  );\n};\n\nexport { HorizontalBars };\n"],"names":[],"mappings":"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"}

package/dist/charts/linear/LineChart.js

@@ -1,528 +0,0 @@
-import { jsxs, jsx, Fragment } from '@apia/theme/jsx-runtime';
-import { arrayOrArray, useImperativeComponentEvents, usePanAndZoom, usePrevious, getLabel } from '@apia/util';
-import { scaleOrdinal, scaleLinear, scaleLog } from '@visx/scale';
-import { min, max } from 'd3-array';
-import { parseMargin } from '../util/parseMargin.js';
-import { useMemo, useState, useLayoutEffect } from 'react';
-import { useChartStyles } from '../util/useChartStyles.js';
-import { Box, Heading } from '@apia/theme';
-import { Grid } from '@visx/visx';
-import { Group } from '@visx/group';
-import { LinePath } from '@visx/shape';
-import { AxisLeft, AxisBottom } from '@visx/axis';
-import * as allCurves from '@visx/curve';
-import uniqueId from 'lodash-es/uniqueId';
-import { Node } from './Node.js';
-import { getBarColor } from '../util/getBarColor.js';
-import { LegendContainer } from '../util/LegendContainer.js';
-import { ApiaUtil } from '@apia/components';
-
-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 };
-}
-function getX(coordinate) {
-  return coordinate.key;
-}
-function getY(coordinate) {
-  return Number(coordinate.value);
-}
-function parseData(chart) {
-  const setsArray = arrayOrArray(chart.dataSets?.data).map(
-    (col) => arrayOrArray(col.sets)
-  );
-  let longestLine = [];
-  let longestLineIndex = -1;
-  for (let i = 0; i < setsArray.length; i++) {
-    const array = setsArray[i];
-    if (!longestLine || array.length > longestLine.length) {
-      longestLine = array;
-      longestLineIndex = i;
-    }
-  }
-  const lines = arrayOrArray(chart.dataSets?.data);
-  const nodesDataArray = lines.map((line) => line.sets);
-  const nodesData = nodesDataArray.reduce(
-    (rec, d) => arrayOrArray(rec).concat(d),
-    []
-  );
-  return {
-    lines,
-    longestLine,
-    longestLineIndex,
-    tallestLine: [...new Set(nodesData.map((value) => value.value))],
-    xScale: scaleOrdinal({
-      domain: longestLine.map(getX)
-    }),
-    yScale: scaleLinear({
-      domain: [
-        (min(nodesData, getY) ?? 0) < 0 ? min(nodesData, getY) ?? 0 : 0,
-        max(nodesData, getY) ?? 1
-      ]
-    }),
-    yScaleLog: scaleLog({
-      domain: [
-        (min(nodesData, getY) ?? 1) > 0 ? min(nodesData, getY) ?? 1 : 1,
-        max(nodesData, getY) ?? 10
-      ]
-    })
-  };
-}
-const LineChart = ({
-  chart,
-  margin = { top: 20, left: 100, bottom: 24, right: 0 },
-  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 - (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 { lines, xScale, yScale, yScaleLog, longestLine } = parseData(chart);
-  const styles = useChartStyles(chart.colorSchema);
-  const coordinates = arrayOrArray(lines[0].sets);
-  const coordinatesArray = lines.map((col) => {
-    return col.sets;
-  });
-  const divideRangeBetweenStrings = (min2, max2, strings) => {
-    const numStrings = strings.length;
-    const step = (max2 - min2) / (numStrings - 1);
-    const resultArray = [];
-    let currentValue = min2;
-    for (let i = 0; i < numStrings; i++) {
-      resultArray.push(currentValue);
-      currentValue += step;
-    }
-    return resultArray;
-  };
-  const xScaleRange = useMemo(() => {
-    const rangeArr = [
-      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
-      innerWidth
-    ];
-    return divideRangeBetweenStrings(rangeArr[0], rangeArr[1], longestLine);
-  }, [effectiveMargin, innerWidth, longestLine]);
-  xScale.range(xScaleRange);
-  const yScaleRange = useMemo(() => {
-    const rangeArr = [
-      innerHeight - (effectiveMargin.top + effectiveMargin.bottom),
-      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
-    ];
-    return rangeArr;
-  }, [effectiveMargin, innerHeight]);
-  yScale.range(yScaleRange);
-  yScaleLog.range([
-    innerHeight,
-    typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
-  ]);
-  const [currentCircle, setCurrentCircle] = useState([]);
-  const actualYScale = useMemo(() => {
-    return yScale;
-  }, [yScale]);
-  const id = useMemo(() => `Linear${uniqueId()}`, []);
-  useLayoutEffect(() => {
-    document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
-      const width = current.getBoundingClientRect().width;
-      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
-      current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;
-    });
-  });
-  function addNameToProps(names, objects, fixedValue) {
-    return objects.map((object, index) => {
-      const nameIndex = Math.floor(index / fixedValue);
-      const name = names[nameIndex];
-      return { ...object, columnName: name };
-    });
-  }
-  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, columnColor: dataColor };
-  });
-  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
-      };
-    }
-  );
-  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));
-  const [highlightedBar, setHighlightedBar] = useState("");
-  useImperativeComponentEvents({
-    highlight(barName) {
-      if (barName.split(" - ").length === 1) {
-        setHighlightedBar(barName);
-        if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
-          console.log({ barName, lines });
-          const selectedLineGroup = lines.find((l) => l.name === barName);
-          const selectedLineGroupIndex = lines.findIndex(
-            (l) => l.name === barName
-          );
-          console.log({ selectedLineGroup, selectedLineGroupIndex });
-          if (selectedLineGroup && selectedLineGroupIndex !== -1) {
-            ApiaUtil.instance.tooltips.open({
-              children: arrayOrArray(selectedLineGroup.sets).map((dat, i) => {
-                return /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        color: colorReference[selectedLineGroupIndex].color
-                      },
-                      children: /* @__PURE__ */ jsx("strong", { children: chart.showAxisXTitle ? dat.key : chart.showLegend ? barName : "" })
-                    }
-                  ),
-                  chart.showValues && /* @__PURE__ */ jsx("div", { children: dat.value }),
-                  /* @__PURE__ */ jsx("div", {}),
-                  arrayOrArray(selectedLineGroup.sets)[i + 1] && /* @__PURE__ */ jsx("hr", {})
-                ] }, `${dat.key}`);
-              }),
-              attachToMousePosition: true
-            });
-          }
-        }
-      } else if (barName.split(" - ").length === 2) {
-        setHighlightedBar(barName.split(" - ")[0]);
-      }
-    }
-  });
-  const { boxRef, elementRef } = usePanAndZoom(
-    void 0,
-    !allowZoom
-  );
-  const coords = coordinatesArray.flat().map((coord) => {
-    return {
-      xValue: coord.key,
-      yValue: coord.value,
-      x: xScale(getX(coord)),
-      y: actualYScale(getY(coord))
-    };
-  });
-  const columnNames = lines.map((column) => {
-    return column.name;
-  });
-  const nodes = addNameToProps(columnNames, coords, coordinates.length);
-  const [nearNodesArray, setNearNodesArray] = useState([]);
-  const previousNearNodesArray = usePrevious(nearNodesArray);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { id, ref: boxRef, className: "chartBox chartContainer", children: /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        ref: elementRef,
-        width: innerWidth,
-        height: innerHeight,
-        id: "LinesChart",
-        className: `_${chartId} chart__svg`,
-        onMouseMove: (ev) => {
-          const rect = elementRef.current?.getBoundingClientRect();
-          let clientX = ev.clientX - (effectiveMargin.left + effectiveMargin.right) / 2;
-          let clientY = ev.clientY - (effectiveMargin.top + effectiveMargin.bottom) / 2;
-          if (rect) {
-            clientX = ev.clientX - rect.left;
-            clientY = ev.clientY - rect.top;
-          }
-          const nearNodes = nodes.filter((node) => {
-            return Math.sqrt((node.x - clientX) ** 2 + (node.y - clientY) ** 2) < 20;
-          });
-          if (previousNearNodesArray.current && nearNodes.length > 0) {
-            const currentColumns = lines.map((col) => {
-              let colNames = "";
-              nearNodes.forEach((node) => {
-                if (col.name === node.columnName) {
-                  colNames = node.columnName;
-                }
-              });
-              return colNames;
-            }).filter((name) => name !== "");
-            const currentIndex = coordinates.findIndex((coord) => {
-              return coord.key === nearNodes[0].xValue;
-            });
-            if (currentColumns && currentIndex !== void 0) {
-              const newCircleValues = currentColumns.map((col) => {
-                return `${col}${currentIndex}`;
-              });
-              setCurrentCircle([...newCircleValues]);
-            }
-            setNearNodesArray(nearNodes);
-            const elementUnderCursor = document.elementFromPoint(
-              ev.clientX,
-              ev.clientY
-            );
-            if (elementUnderCursor && elementUnderCursor.tagName === "circle") {
-              if (chart.showAxisXTitle || chart.showLegend || chart.showValues) {
-                ApiaUtil.instance.tooltips.open({
-                  children: nearNodes.sort((a, b) => Number(b.yValue) - Number(a.yValue)).map((node, i) => {
-                    const useSpecific = colorReference.some(
-                      (ref) => ref.title === node.columnName + " - " + node.xValue
-                    );
-                    return /* @__PURE__ */ jsxs(
-                      Box,
-                      {
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              style: {
-                                color: colorReference[colorReference.findIndex((ref) => {
-                                  return ref.title === (useSpecific ? node.columnName + " - " + node.xValue : node.columnName);
-                                })].color
-                              },
-                              children: /* @__PURE__ */ jsx("strong", { children: chart.showAxisXTitle ? node.xValue : chart.showLegend ? node.columnName : "" })
-                            }
-                          ),
-                          chart.showValues && /* @__PURE__ */ jsx("div", { children: node.yValue }),
-                          /* @__PURE__ */ jsx("div", { children: chart.showAxisXTitle && chart.showLegend ? node.columnName : "" }),
-                          nearNodesArray[i + 1] && /* @__PURE__ */ jsx("hr", {})
-                        ]
-                      },
-                      `${node.columnName}_${node.xValue}_${node.yValue}`
-                    );
-                  }),
-                  attachToMousePosition: true
-                });
-              }
-            } else {
-              ApiaUtil.instance.tooltips.closeAll();
-            }
-          } else if (nearNodes.length === 0) {
-            setCurrentCircle([]);
-          }
-        },
-        children: [
-          chart.showGrid && /* @__PURE__ */ jsx(
-            Grid.Grid,
-            {
-              top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
-              left: 0,
-              xScale,
-              yScale: actualYScale,
-              width: innerWidth,
-              height: innerHeight,
-              stroke: styles?.grid.stroke,
-              strokeOpacity: styles?.grid.opacity
-            }
-          ),
-          lines.map((column, i) => {
-            const currentCoordinates = arrayOrArray(column.sets);
-            const newColor = setsWithColor.find(
-              (data) => data.returnColumnsArray[0].columnName === column.name
-            )?.columnColor;
-            return /* @__PURE__ */ jsxs(
-              Group,
-              {
-                top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
-                style: {
-                  opacity: highlightedBar !== "" && highlightedBar !== column.name ? 0.15 : 1,
-                  transition: "opacity 500ms"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    LinePath,
-                    {
-                      curve: allCurves.curveMonotoneX,
-                      data: currentCoordinates,
-                      x: (coordinate) => {
-                        return xScale(getX(coordinate)) ?? 0;
-                      },
-                      y: (coordinate) => actualYScale(getY(coordinate)) ?? 0,
-                      stroke: newColor ?? "black",
-                      strokeWidth: 2,
-                      strokeOpacity: 1,
-                      shapeRendering: "geometricPrecision",
-                      color: "transparent"
-                    }
-                  ),
-                  currentCoordinates.map((coordinate, j) => {
-                    const key = column.name + j.toString();
-                    const realColor = setsWithColor.map((sets) => sets.returnColumnsArray).flat().find(
-                      (set) => set.columnName === column.name && set.key === coordinate.key
-                    )?.color;
-                    return /* @__PURE__ */ jsxs("g", { children: [
-                      chart.showValues && /* @__PURE__ */ jsx(
-                        "text",
-                        {
-                          x: xScale(getX(coordinate)) + 10,
-                          y: actualYScale(getY(coordinate)) - 5,
-                          textAnchor: "middle",
-                          style: {
-                            display: highlightedBar === column.name ? "block" : "none",
-                            opacity: highlightedBar === column.name ? 1 : 0,
-                            transition: "opacity 500ms"
-                          },
-                          children: coordinate.value
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Node,
-                        {
-                          color: realColor ?? "black",
-                          coordinate,
-                          currentCircle,
-                          cx: xScale(getX(coordinate)),
-                          cy: actualYScale(getY(coordinate)),
-                          setCurrentCircle,
-                          innerKey: key,
-                          column
-                        }
-                      )
-                    ] }, key);
-                  })
-                ]
-              },
-              `lines-${column.name + i.toString()}`
-            );
-          }),
-          /* @__PURE__ */ jsx(
-            AxisLeft,
-            {
-              scale: actualYScale,
-              left: effectiveMargin.left,
-              label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : "",
-              tickLabelProps: {
-                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(
-            AxisBottom,
-            {
-              top: innerHeight - (effectiveMargin.top + effectiveMargin.bottom),
-              scale: xScale,
-              label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
-              tickLabelProps: { display: "none" },
-              tickLineProps: { display: "none" },
-              labelOffset: 10
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__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 })
-    ] }) })
-  ] });
-};
-
-export { LineChart };
-//# sourceMappingURL=LineChart.js.map