@elliemae/ds-dataviz 3.6.0-next.3

package/dist/esm/graphs/Chart/config/useKeyboardNavigation.js

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { useCallback, useContext, useMemo, useState } from "react";
+import { ChartContext } from "../ChartContext";
+const findInCircularList = (list, from, step = 1) => {
+  for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
+    if (list[i])
+      return i;
+  }
+  return from;
+};
+const useKeyboardNavigation = () => {
+  const {
+    activePoint,
+    setActivePoint,
+    containerRef,
+    groups,
+    yScale,
+    props: { data }
+  } = useContext(ChartContext);
+  const [currentFocusedDataset, setCurrentFocusedDataset] = useState(groups[0]);
+  const currentGroup = useMemo(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);
+  const currentItemIndex = useMemo(
+    () => currentGroup.data.findIndex((opt) => opt.key === activePoint),
+    [activePoint, currentGroup]
+  );
+  const handleOnFocus = useCallback(
+    (e) => {
+      if (containerRef?.current === e.target) {
+        setActivePoint(currentGroup.data[0].key);
+      }
+    },
+    [containerRef, currentGroup, setActivePoint]
+  );
+  const handleOnBlur = useCallback(() => {
+    setTimeout(() => {
+      if (!containerRef?.current?.contains(document.activeElement) || containerRef?.current === document.activeElement) {
+        setActivePoint("");
+      }
+    });
+  }, [containerRef, setActivePoint]);
+  const navigateSerie = useCallback(
+    (step) => {
+      const newValue = findInCircularList(
+        currentGroup.data.map((d) => d.value.toString()),
+        currentItemIndex,
+        step
+      );
+      setActivePoint(currentGroup.data[newValue].key);
+    },
+    [currentGroup.data, currentItemIndex, setActivePoint]
+  );
+  const changeSerie = useCallback(
+    (step) => {
+      setCurrentFocusedDataset((prev) => {
+        const nextGroup = findInCircularList(
+          groups,
+          groups.findIndex((item) => item === prev),
+          step
+        );
+        const nextGroupData = data.find((d) => d.name === groups[nextGroup]);
+        setActivePoint(nextGroupData.data[currentItemIndex].key);
+        return groups[nextGroup];
+      });
+    },
+    [currentItemIndex, data, setActivePoint, groups]
+  );
+  const onInputKeyDown = useCallback(
+    (e) => {
+      if (e.code !== "Tab") {
+        e.preventDefault();
+      }
+      if (["ArrowLeft", "ArrowRight"].includes(e.code)) {
+        if (yScale.bandwidth)
+          changeSerie(e.code === "ArrowLeft" ? -1 : 1);
+        else
+          navigateSerie(e.code === "ArrowLeft" ? -1 : 1);
+      }
+      if (["ArrowDown", "ArrowUp"].includes(e.code)) {
+        if (yScale.bandwidth)
+          navigateSerie(e.code === "ArrowDown" ? -1 : 1);
+        else
+          changeSerie(e.code === "ArrowDown" ? -1 : 1);
+      }
+    },
+    [changeSerie, navigateSerie, yScale.bandwidth]
+  );
+  return { onInputKeyDown, handleOnBlur, handleOnFocus };
+};
+export {
+  findInCircularList,
+  useKeyboardNavigation
+};
+//# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/esm/graphs/Chart/config/useKeyboardNavigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useKeyboardNavigation.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const findInCircularList = (\n  list,\n  from: number,\n  //criteria: (item) => boolean,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (list[i]) return i;\n  }\n  return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n  const {\n    activePoint,\n    setActivePoint,\n    containerRef,\n    groups,\n    yScale,\n    props: { data },\n  } = useContext(ChartContext);\n\n  const [currentFocusedDataset, setCurrentFocusedDataset] = useState(groups[0]);\n\n  const currentGroup = useMemo(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);\n\n  const currentItemIndex = useMemo(\n    () => currentGroup.data.findIndex((opt) => opt.key === activePoint),\n    [activePoint, currentGroup],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (containerRef?.current === e.target) {\n        setActivePoint(currentGroup.data[0].key);\n      }\n    },\n    [containerRef, currentGroup, setActivePoint],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setTimeout(() => {\n      if (\n        !containerRef?.current?.contains(document.activeElement) ||\n        containerRef?.current === document.activeElement\n      ) {\n        setActivePoint('');\n      }\n    });\n  }, [containerRef, setActivePoint]);\n\n  const navigateSerie = useCallback(\n    (step: number) => {\n      const newValue = findInCircularList(\n        currentGroup.data.map((d) => d.value.toString()),\n        currentItemIndex,\n        step,\n      );\n      setActivePoint(currentGroup.data[newValue].key);\n    },\n    [currentGroup.data, currentItemIndex, setActivePoint],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      setCurrentFocusedDataset((prev) => {\n        const nextGroup = findInCircularList(\n          groups,\n          groups.findIndex((item) => item === prev),\n          step,\n        );\n        const nextGroupData = data.find((d) => d.name === groups[nextGroup]);\n        setActivePoint(nextGroupData.data[currentItemIndex].key);\n        return groups[nextGroup];\n      });\n    },\n    [currentItemIndex, data, setActivePoint, groups],\n  );\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n    (e) => {\n      if (e.code !== 'Tab') {\n        e.preventDefault();\n      }\n      if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n        if (yScale.bandwidth) changeSerie(e.code === 'ArrowLeft' ? -1 : 1);\n        else navigateSerie(e.code === 'ArrowLeft' ? -1 : 1);\n      }\n\n      if (['ArrowDown', 'ArrowUp'].includes(e.code)) {\n        if (yScale.bandwidth) navigateSerie(e.code === 'ArrowDown' ? -1 : 1);\n        else changeSerie(e.code === 'ArrowDown' ? -1 : 1);\n      }\n    },\n    [changeSerie, navigateSerie, yScale.bandwidth],\n  );\n\n  return { onInputKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,YAAY,SAAS,gBAAgB;AAC3D,SAAS,oBAAoB;AAEtB,MAAM,qBAAqB,CAChC,MACA,MAEA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,KAAK;AAAI,aAAO;AAAA,EACtB;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,YAAY;AAE3B,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,OAAO,EAAE;AAE5E,QAAM,eAAe,QAAQ,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE,SAAS,qBAAqB,GAAG,CAAC,uBAAuB,IAAI,CAAC;AAEpH,QAAM,mBAAmB;AAAA,IACvB,MAAM,aAAa,KAAK,UAAU,CAAC,QAAQ,IAAI,QAAQ,WAAW;AAAA,IAClE,CAAC,aAAa,YAAY;AAAA,EAC5B;AAEA,QAAM,gBAAyD;AAAA,IAC7D,CAAC,MAAM;AACL,UAAI,cAAc,YAAY,EAAE,QAAQ;AACtC,uBAAe,aAAa,KAAK,GAAG,GAAG;AAAA,MACzC;AAAA,IACF;AAAA,IACA,CAAC,cAAc,cAAc,cAAc;AAAA,EAC7C;AAEA,QAAM,eAA0D,YAAY,MAAM;AAChF,eAAW,MAAM;AACf,UACE,CAAC,cAAc,SAAS,SAAS,SAAS,aAAa,KACvD,cAAc,YAAY,SAAS,eACnC;AACA,uBAAe,EAAE;AAAA,MACnB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,cAAc,CAAC;AAEjC,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAiB;AAChB,YAAM,WAAW;AAAA,QACf,aAAa,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,SAAS,CAAC;AAAA,QAC/C;AAAA,QACA;AAAA,MACF;AACA,qBAAe,aAAa,KAAK,UAAU,GAAG;AAAA,IAChD;AAAA,IACA,CAAC,aAAa,MAAM,kBAAkB,cAAc;AAAA,EACtD;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,SAAiB;AAChB,+BAAyB,CAAC,SAAS;AACjC,cAAM,YAAY;AAAA,UAChB;AAAA,UACA,OAAO,UAAU,CAAC,SAAS,SAAS,IAAI;AAAA,UACxC;AAAA,QACF;AACA,cAAM,gBAAgB,KAAK,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,UAAU;AACnE,uBAAe,cAAc,KAAK,kBAAkB,GAAG;AACvD,eAAO,OAAO;AAAA,MAChB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,MAAM,gBAAgB,MAAM;AAAA,EACjD;AAEA,QAAM,iBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,OAAO;AACpB,UAAE,eAAe;AAAA,MACnB;AACA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,YAAI,OAAO;AAAW,sBAAY,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA;AAC5D,wBAAc,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA,MACpD;AAEA,UAAI,CAAC,aAAa,SAAS,EAAE,SAAS,EAAE,IAAI,GAAG;AAC7C,YAAI,OAAO;AAAW,wBAAc,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA;AAC9D,sBAAY,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA,MAClD;AAAA,IACF;AAAA,IACA,CAAC,aAAa,eAAe,OAAO,SAAS;AAAA,EAC/C;AAEA,SAAO,EAAE,gBAAgB,cAAc,cAAc;AACvD;",
+  "names": []
+}

package/dist/esm/graphs/Chart/config/useScales.js

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { useMemo, useCallback } from "react";
+import { max, min, scaleLinear, scaleBand, scaleTime, scaleOrdinal, scaleLog } from "d3";
+import { getStackedIndex } from "../helpers";
+const useScales = ({ props, innerHeight, innerWidth, stackedData, currentData, groups }) => {
+  const { series, xAxis, yAxis, y2Axis, groups: stackedSeries, types } = props;
+  const getBandDomain = useCallback((axis) => axis.cols ?? [...series[0].data.keys()], [series]);
+  const getLinearDomain = useCallback(
+    (axis, axisString, withStackData = true) => {
+      const begin = axis?.beginAtZero ? 0 : void 0;
+      const data = series.filter((serie) => {
+        if (serie.scale === "y2") {
+          return serie.scale === axisString;
+        }
+        return true;
+      }).map(
+        (serie) => typeof serie.data[0] === "number" ? serie.data : serie.data.map((coord) => coord[axisString])
+      );
+      const stack = withStackData && [
+        min(stackedData.flat(), (layer) => min(layer, (sequence) => sequence[1])),
+        max(stackedData.flat(), (layer) => max(layer, (sequence) => sequence[1]))
+      ];
+      const minRange = min([begin, min(data.flat()), stack[0]]);
+      const maxRange = max([max(data.flat()), stack[1]]);
+      return [
+        minRange - (axisString === "x" ? (maxRange - minRange) * 0.05 : 0),
+        maxRange + (axisString === "x" ? (maxRange - minRange) * 0.05 : 0)
+      ];
+    },
+    [series, stackedData]
+  );
+  const getScaleTime = (domain, range) => scaleTime().domain([min(domain) ?? 0, max(domain) ?? 0]).range(range).nice();
+  const getScaleBand = (domain, range, padding = 0.2) => scaleBand().domain(domain).range(range).padding(padding);
+  const getScaleLinear = (domain, range) => scaleLinear().domain(domain).range(range);
+  const getScaleLog = (domain, range) => scaleLog().domain(domain).range(range);
+  const xScale = useMemo(() => {
+    if (xAxis?.type === "time")
+      return getScaleTime(xAxis.cols, [0, innerWidth]);
+    if (xAxis?.type === "linear" || yAxis?.type === "band") {
+      const withStackData = yAxis?.type === "band";
+      return getScaleLinear(getLinearDomain(xAxis, "x", withStackData), [0, innerWidth]);
+    }
+    return getScaleBand(getBandDomain(xAxis), [0, innerWidth], xAxis.padding);
+  }, [getBandDomain, getLinearDomain, innerWidth, xAxis, yAxis?.type]);
+  const yScale = useMemo(() => {
+    if (yAxis?.type === "band")
+      return getScaleBand(getBandDomain(yAxis), [innerHeight, 0], yAxis.padding);
+    if (yAxis?.type === "log")
+      return getScaleLog(getLinearDomain(yAxis, "y"), [innerHeight, 0]);
+    return getScaleLinear(getLinearDomain(yAxis, "y"), [innerHeight, 0]);
+  }, [getBandDomain, getLinearDomain, innerHeight, yAxis]);
+  const y2Scale = useMemo(() => {
+    if (!y2Axis)
+      return null;
+    if (y2Axis?.type === "band")
+      return getScaleBand(getBandDomain(y2Axis), [innerHeight, 0], y2Scale.padding);
+    if (y2Axis?.type === "log")
+      return getScaleLog(getLinearDomain(y2Axis, "y2"), [innerHeight, 0]);
+    return getScaleLinear(getLinearDomain(y2Axis, "y2"), [innerHeight, 0]);
+  }, [getBandDomain, getLinearDomain, innerHeight, y2Axis]);
+  const colorScale = scaleOrdinal().domain(groups).range(currentData.map((d) => d.color));
+  const subgroupsWithBars = currentData.filter(
+    (serie) => serie.type === "bar" && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1)
+  ).map((serie) => serie.name);
+  const getBandwidth = useCallback(() => {
+    if (xScale.bandwidth)
+      return xScale.bandwidth();
+    if (yScale.bandwidth)
+      return yScale.bandwidth();
+    return innerWidth / xScale.ticks().length / 2;
+  }, [innerWidth, xScale, yScale]);
+  if (stackedSeries?.length) {
+    stackedSeries.forEach((_, i) => subgroupsWithBars.push(`stacked-data-${i}`));
+  }
+  const subGroupScale = getBandwidth() ? scaleBand().domain(subgroupsWithBars).range([0, getBandwidth() ?? 0]).padding(0.05) : null;
+  return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };
+};
+export {
+  useScales
+};
+//# sourceMappingURL=useScales.js.map

package/dist/esm/graphs/Chart/config/useScales.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useScales.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport { max, min, scaleLinear, scaleBand, scaleTime, scaleOrdinal, scaleLog, Series, ScaleBand } from 'd3';\nimport { DSChartT } from '../react-desc-prop-types';\nimport { getStackedIndex } from '../helpers';\n\ninterface UseScales {\n  props: DSChartT.Props;\n  innerHeight: number;\n  innerWidth: number;\n  stackedData: Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n  currentData: {\n    key: string;\n    group: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string;\n    color: string;\n    data: {\n      key: string;\n      value: number | { x: number; y: number };\n      position: number;\n    }[];\n  }[];\n  groups: string[];\n}\nexport const useScales = ({ props, innerHeight, innerWidth, stackedData, currentData, groups }: UseScales) => {\n  const { series, xAxis, yAxis, y2Axis, groups: stackedSeries, types } = props;\n\n  const getBandDomain = useCallback((axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.keys()], [series]);\n\n  const getLinearDomain = useCallback(\n    (axis?: DSChartT.AxisT, axisString?: string, withStackData = true) => {\n      // const data2 = data ? extent(data) : [];\n      const begin = axis?.beginAtZero ? 0 : undefined;\n      const data = series\n        .filter((serie) => {\n          if (serie.scale === 'y2') {\n            return serie.scale === axisString;\n          }\n          return true;\n        })\n        .map((serie) =>\n          typeof serie.data[0] === 'number' ? serie.data : serie.data.map((coord) => coord[axisString]),\n        );\n\n      const stack = withStackData && [\n        min(stackedData.flat(), (layer) => min(layer, (sequence) => sequence[1])),\n        max(stackedData.flat(), (layer) => max(layer, (sequence) => sequence[1])),\n      ];\n      const minRange = min([begin, min(data.flat()), stack[0]]);\n      const maxRange = max([max(data.flat()), stack[1]]);\n      // we set a pad on the x axis, we can create a prop to set this constant\n      return [\n        minRange - (axisString === 'x' ? (maxRange - minRange) * 0.05 : 0),\n        maxRange + (axisString === 'x' ? (maxRange - minRange) * 0.05 : 0),\n      ];\n    },\n    [series, stackedData],\n  );\n\n  const getScaleTime = (domain: Date[], range: number[]) =>\n    scaleTime()\n      .domain([min(domain) ?? 0, max(domain) ?? 0])\n      .range(range)\n      .nice();\n  const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n    scaleBand().domain(domain).range(range).padding(padding);\n  const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n  const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n  const xScale = useMemo(() => {\n    if (xAxis?.type === 'time') return getScaleTime(xAxis.cols as Date[], [0, innerWidth]);\n    if (xAxis?.type === 'linear' || yAxis?.type === 'band') {\n      const withStackData = yAxis?.type === 'band';\n      return getScaleLinear(getLinearDomain(xAxis, 'x', withStackData) as number[], [0, innerWidth]);\n    }\n\n    return getScaleBand(getBandDomain(xAxis) as string[], [0, innerWidth], xAxis.padding);\n  }, [getBandDomain, getLinearDomain, innerWidth, xAxis, yAxis?.type]);\n\n  const yScale = useMemo(() => {\n    if (yAxis?.type === 'band') return getScaleBand(getBandDomain(yAxis), [innerHeight, 0], yAxis.padding);\n    if (yAxis?.type === 'log') return getScaleLog(getLinearDomain(yAxis, 'y'), [innerHeight, 0]);\n    return getScaleLinear(getLinearDomain(yAxis, 'y'), [innerHeight, 0]);\n  }, [getBandDomain, getLinearDomain, innerHeight, yAxis]);\n\n  const y2Scale = useMemo(() => {\n    if (!y2Axis) return null;\n    if (y2Axis?.type === 'band') return getScaleBand(getBandDomain(y2Axis), [innerHeight, 0], y2Scale.padding);\n    if (y2Axis?.type === 'log') return getScaleLog(getLinearDomain(y2Axis, 'y2'), [innerHeight, 0]);\n    return getScaleLinear(getLinearDomain(y2Axis, 'y2'), [innerHeight, 0]);\n  }, [getBandDomain, getLinearDomain, innerHeight, y2Axis]);\n\n  const colorScale = scaleOrdinal()\n    .domain(groups)\n    .range(currentData.map((d) => d.color));\n  // get only groups bars to calculate the subgroup scale\n\n  const subgroupsWithBars = currentData\n    .filter(\n      (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n    )\n    .map((serie) => serie.name);\n\n  const getBandwidth = useCallback(() => {\n    if ((xScale as ScaleBand<string>).bandwidth) return (xScale as ScaleBand<string>).bandwidth();\n    if ((yScale as ScaleBand<string>).bandwidth) return (yScale as ScaleBand<string>).bandwidth();\n    return innerWidth / xScale.ticks().length / 2;\n  }, [innerWidth, xScale, yScale]);\n\n  if (stackedSeries?.length) {\n    stackedSeries.forEach((_, i) => subgroupsWithBars.push(`stacked-data-${i}`));\n  }\n\n  const subGroupScale = getBandwidth()\n    ? scaleBand()\n        .domain(subgroupsWithBars)\n        .range([0, getBandwidth() ?? 0])\n        .padding(0.05)\n    : null;\n\n  return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/graphs/Chart/helpers/index.js

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { stack } from "d3";
+const getStackedIndex = (groups, serie) => {
+  for (let i = 0; i < groups.length; i += 1) {
+    for (let j = 0; j < groups[i].length; j += 1) {
+      if (groups[i][j] === serie)
+        return i;
+    }
+  }
+  return -1;
+};
+const getStackedData = (stackedData, serie) => {
+  for (let i = 0; i < stackedData?.length; i += 1) {
+    const data = stackedData[i].find((d) => d.key === serie.name);
+    if (data)
+      return data;
+  }
+  return false;
+};
+const stackData = (groupsStacked, series) => {
+  const aux = [];
+  if (!groupsStacked)
+    return [];
+  groupsStacked?.forEach((g) => {
+    const seriesStacked = series.filter((serie) => g.includes(serie.name));
+    const keys = seriesStacked.map((serie) => serie.name);
+    const stackData2 = [];
+    seriesStacked.forEach((serie) => {
+      serie.data.forEach((d, i) => {
+        if (typeof stackData2[i] === "object") {
+          stackData2[i][serie.name] = typeof d === "number" ? d : d.y;
+        }
+        stackData2[i] = { ...stackData2[i], [serie.name]: typeof d === "number" ? d : d.y };
+      });
+    });
+    aux.push(stack().keys(keys)(stackData2));
+  });
+  return aux;
+};
+const getSeriesValuesAt = (data, point) => {
+  const seriesValuesAtPoint = {};
+  data.forEach((serie) => {
+    serie.data.forEach((datum) => {
+      if (datum.value === point) {
+        seriesValuesAtPoint[serie.name] = seriesValuesAtPoint[serie.name] ? [...seriesValuesAtPoint[serie.name], point] : [point];
+      }
+    });
+  });
+  return seriesValuesAtPoint;
+};
+export {
+  getSeriesValuesAt,
+  getStackedData,
+  getStackedIndex,
+  stackData
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/graphs/Chart/helpers/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/helpers/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { stack } from 'd3';\nimport { values } from 'lodash';\n\nexport const getStackedIndex = (groups: string[][], serie: string) => {\n  for (let i = 0; i < groups.length; i += 1) {\n    for (let j = 0; j < groups[i].length; j += 1) {\n      if (groups[i][j] === serie) return i;\n    }\n  }\n  return -1;\n};\n\nexport const getStackedData = (stackedData, serie) => {\n  for (let i = 0; i < stackedData?.length; i += 1) {\n    const data = stackedData[i].find((d) => d.key === serie.name);\n    if (data) return data;\n  }\n  return false;\n};\n\nexport const stackData = (groupsStacked, series) => {\n  const aux = [];\n  if (!groupsStacked) return [];\n  groupsStacked?.forEach((g) => {\n    const seriesStacked = series.filter((serie) => g.includes(serie.name));\n    const keys = seriesStacked.map((serie) => serie.name);\n    const stackData: Array<{ [key: string]: number }> = [];\n    seriesStacked.forEach((serie) => {\n      serie.data.forEach((d, i) => {\n        if (typeof stackData[i] === 'object') {\n          stackData[i][serie.name] = typeof d === 'number' ? d : d.y;\n        }\n        stackData[i] = { ...stackData[i], [serie.name]: typeof d === 'number' ? d : d.y };\n      });\n    });\n\n    aux.push(stack().keys(keys)(stackData));\n  });\n  return aux;\n};\n\nexport const getSeriesValuesAt = (data, point) => {\n  const seriesValuesAtPoint = {};\n  data.forEach((serie) => {\n    serie.data.forEach((datum) => {\n      if (datum.value === point) {\n        seriesValuesAtPoint[serie.name] = seriesValuesAtPoint[serie.name]\n          ? [...seriesValuesAtPoint[serie.name], point]\n          : [point];\n      }\n    });\n  });\n  return seriesValuesAtPoint;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa;AAGf,MAAM,kBAAkB,CAAC,QAAoB,UAAkB;AACpE,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK,GAAG;AACzC,aAAS,IAAI,GAAG,IAAI,OAAO,GAAG,QAAQ,KAAK,GAAG;AAC5C,UAAI,OAAO,GAAG,OAAO;AAAO,eAAO;AAAA,IACrC;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,aAAa,UAAU;AACpD,WAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,UAAM,OAAO,YAAY,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,IAAI;AAC5D,QAAI;AAAM,aAAO;AAAA,EACnB;AACA,SAAO;AACT;AAEO,MAAM,YAAY,CAAC,eAAe,WAAW;AAClD,QAAM,MAAM,CAAC;AACb,MAAI,CAAC;AAAe,WAAO,CAAC;AAC5B,iBAAe,QAAQ,CAAC,MAAM;AAC5B,UAAM,gBAAgB,OAAO,OAAO,CAAC,UAAU,EAAE,SAAS,MAAM,IAAI,CAAC;AACrE,UAAM,OAAO,cAAc,IAAI,CAAC,UAAU,MAAM,IAAI;AACpD,UAAMA,aAA8C,CAAC;AACrD,kBAAc,QAAQ,CAAC,UAAU;AAC/B,YAAM,KAAK,QAAQ,CAAC,GAAG,MAAM;AAC3B,YAAI,OAAOA,WAAU,OAAO,UAAU;AACpC,UAAAA,WAAU,GAAG,MAAM,QAAQ,OAAO,MAAM,WAAW,IAAI,EAAE;AAAA,QAC3D;AACA,QAAAA,WAAU,KAAK,EAAE,GAAGA,WAAU,IAAI,CAAC,MAAM,OAAO,OAAO,MAAM,WAAW,IAAI,EAAE,EAAE;AAAA,MAClF,CAAC;AAAA,IACH,CAAC;AAED,QAAI,KAAK,MAAM,EAAE,KAAK,IAAI,EAAEA,UAAS,CAAC;AAAA,EACxC,CAAC;AACD,SAAO;AACT;AAEO,MAAM,oBAAoB,CAAC,MAAM,UAAU;AAChD,QAAM,sBAAsB,CAAC;AAC7B,OAAK,QAAQ,CAAC,UAAU;AACtB,UAAM,KAAK,QAAQ,CAAC,UAAU;AAC5B,UAAI,MAAM,UAAU,OAAO;AACzB,4BAAoB,MAAM,QAAQ,oBAAoB,MAAM,QACxD,CAAC,GAAG,oBAAoB,MAAM,OAAO,KAAK,IAC1C,CAAC,KAAK;AAAA,MACZ;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;",
+  "names": ["stackData"]
+}

package/dist/esm/graphs/Chart/index.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+export * from "./Chart";
+//# sourceMappingURL=index.js.map

package/dist/esm/graphs/Chart/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Chart';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/ActivePoint.js

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo, useRef } from "react";
+import { ChartContext } from "../ChartContext";
+import { Line, Points, Bars, StackedBar } from "../series";
+import { getStackedIndex } from "../helpers";
+const ActivePoint = () => {
+  const {
+    props: { data, groups },
+    activePoint,
+    activeSerie
+  } = useContext(ChartContext);
+  const lastActiveSerie = useRef(null);
+  const activeItem = useMemo(() => {
+    let item = null;
+    if (!activePoint && !activeSerie && lastActiveSerie.current) {
+      item = lastActiveSerie.current;
+    }
+    if (activeSerie) {
+      item = data.find((serie) => serie.key === activeSerie);
+      lastActiveSerie.current = item;
+    } else if (activePoint) {
+      item = data.find((serie) => serie.data.some((value) => activePoint === value.key));
+      lastActiveSerie.current = item;
+    } else if (!lastActiveSerie.current) {
+      return;
+    }
+    if (item.type === "bar" && groups && getStackedIndex(groups, item.name) > -1) {
+      return /* @__PURE__ */ jsx(StackedBar, {
+        serie: item
+      });
+    }
+    if (item.type === "bar") {
+      return /* @__PURE__ */ jsx(Bars, {
+        serie: item
+      });
+    }
+    if (item.type === "point") {
+      return /* @__PURE__ */ jsx(Points, {
+        serie: item
+      });
+    }
+    if (item.type === "line") {
+      return /* @__PURE__ */ jsx(Line, {
+        serie: item
+      });
+    }
+  }, [activePoint, activeSerie, data, groups]);
+  return /* @__PURE__ */ jsx("g", {
+    className: "redraw",
+    children: activeItem
+  });
+};
+export {
+  ActivePoint
+};
+//# sourceMappingURL=ActivePoint.js.map

package/dist/esm/graphs/Chart/parts/ActivePoint.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/ActivePoint.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar } from '../series';\nimport { getStackedIndex } from '../helpers';\n\nexport const ActivePoint = () => {\n  const {\n    props: { data, groups },\n    activePoint,\n    activeSerie,\n  } = useContext(ChartContext);\n\n  const lastActiveSerie = useRef(null);\n  const activeItem = useMemo(() => {\n    let item = null;\n    if (!activePoint && !activeSerie && lastActiveSerie.current) {\n      item = lastActiveSerie.current;\n    }\n    if (activeSerie) {\n      item = data.find((serie) => serie.key === activeSerie);\n      lastActiveSerie.current = item;\n    } else if (activePoint) {\n      item = data.find((serie) => serie.data.some((value) => activePoint === value.key));\n      lastActiveSerie.current = item;\n    } else if (!lastActiveSerie.current) {\n      return;\n    }\n\n    if (item.type === 'bar' && groups && getStackedIndex(groups, item.name) > -1) {\n      return <StackedBar serie={item} />;\n    }\n    if (item.type === 'bar') {\n      return <Bars serie={item} />;\n    }\n    if (item.type === 'point') {\n      return <Points serie={item} />;\n    }\n    if (item.type === 'line') {\n      return <Line serie={item} />;\n    }\n  }, [activePoint, activeSerie, data, groups]);\n\n  return <g className=\"redraw\">{activeItem}</g>;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,SAAgB,YAAY,SAAS,cAAc;AACnD,SAAS,oBAAoB;AAC7B,SAAS,MAAM,QAAQ,MAAM,kBAAkB;AAC/C,SAAS,uBAAuB;AAEzB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,OAAO;AAAA,IACtB;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,kBAAkB,OAAO,IAAI;AACnC,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,OAAO;AACX,QAAI,CAAC,eAAe,CAAC,eAAe,gBAAgB,SAAS;AAC3D,aAAO,gBAAgB;AAAA,IACzB;AACA,QAAI,aAAa;AACf,aAAO,KAAK,KAAK,CAAC,UAAU,MAAM,QAAQ,WAAW;AACrD,sBAAgB,UAAU;AAAA,IAC5B,WAAW,aAAa;AACtB,aAAO,KAAK,KAAK,CAAC,UAAU,MAAM,KAAK,KAAK,CAAC,UAAU,gBAAgB,MAAM,GAAG,CAAC;AACjF,sBAAgB,UAAU;AAAA,IAC5B,WAAW,CAAC,gBAAgB,SAAS;AACnC;AAAA,IACF;AAEA,QAAI,KAAK,SAAS,SAAS,UAAU,gBAAgB,QAAQ,KAAK,IAAI,IAAI,IAAI;AAC5E,aAAO,oBAAC;AAAA,QAAW,OAAO;AAAA,OAAM;AAAA,IAClC;AACA,QAAI,KAAK,SAAS,OAAO;AACvB,aAAO,oBAAC;AAAA,QAAK,OAAO;AAAA,OAAM;AAAA,IAC5B;AACA,QAAI,KAAK,SAAS,SAAS;AACzB,aAAO,oBAAC;AAAA,QAAO,OAAO;AAAA,OAAM;AAAA,IAC9B;AACA,QAAI,KAAK,SAAS,QAAQ;AACxB,aAAO,oBAAC;AAAA,QAAK,OAAO;AAAA,OAAM;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,aAAa,aAAa,MAAM,MAAM,CAAC;AAE3C,SAAO,oBAAC;AAAA,IAAE,WAAU;AAAA,IAAU;AAAA,GAAW;AAC3C;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/AxisBottom.js

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useRef } from "react";
+import { select, axisBottom, timeFormat } from "d3";
+import { StyledAxis, StyledGrid } from "../styles";
+import { ChartContext } from "../ChartContext";
+const AxisBottom = () => {
+  const {
+    props: { xAxis, xAxisLabelOffset = 50, xAxisLabel },
+    innerHeight,
+    innerWidth,
+    xScale,
+    tickOffset = 3
+  } = useContext(ChartContext);
+  const axisRef = useRef();
+  const gridRef = useRef();
+  const ticks = xScale.ticks?.();
+  useEffect(() => {
+    const grid = axisBottom(xScale).tickSize(xAxis?.showGrid ? -innerHeight : 0).tickFormat("").tickSizeOuter(0);
+    const axis = axisBottom(xScale);
+    if (xAxis.tickValues && ticks) {
+      console.log(ticks, "ticks");
+      const finalTicks = xAxis.overwriteTicks ? xAxis.tickValues : [...ticks, ...xAxis.tickValues];
+      axis.tickValues(finalTicks);
+    }
+    if (xAxis.tickFormat) {
+      if (typeof xAxis.tickFormat === "string") {
+        const formatGenerator = timeFormat(xAxis.tickFormat);
+        axis.tickFormat((d) => formatGenerator(d));
+      }
+      if (typeof xAxis.tickFormat === "function") {
+        axis.tickFormat(xAxis.tickFormat);
+      }
+    }
+    select(gridRef.current).call(grid);
+    select(axisRef.current).call(axis);
+  }, [innerHeight, ticks, xAxis?.showGrid, xAxis.tickFormat, xAxis.tickValues, xScale]);
+  return /* @__PURE__ */ jsxs("g", {
+    transform: `translate(0,${innerHeight})`,
+    children: [
+      /* @__PURE__ */ jsx(StyledAxis, {
+        ref: axisRef,
+        children: /* @__PURE__ */ jsx("text", {
+          className: "axis-label",
+          x: innerWidth / 2,
+          y: xAxisLabelOffset,
+          textAnchor: "middle",
+          children: xAxis.label
+        })
+      }),
+      /* @__PURE__ */ jsx(StyledGrid, {
+        ref: gridRef
+      })
+    ]
+  });
+};
+export {
+  AxisBottom
+};
+//# sourceMappingURL=AxisBottom.js.map

package/dist/esm/graphs/Chart/parts/AxisBottom.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/AxisBottom.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisBottom, timeFormat } from 'd3';\nimport { StyledAxis, StyledGrid } from '../styles';\nimport { ChartContext } from '../ChartContext';\n\nexport const AxisBottom = () => {\n  const {\n    props: { xAxis, xAxisLabelOffset = 50, xAxisLabel },\n    innerHeight,\n    innerWidth,\n    xScale,\n    tickOffset = 3,\n  } = useContext(ChartContext);\n\n  const axisRef = useRef();\n  const gridRef = useRef();\n  const ticks = xScale.ticks?.();\n  useEffect(() => {\n    const grid = axisBottom(xScale)\n      .tickSize(xAxis?.showGrid ? -innerHeight : 0)\n      .tickFormat('')\n      .tickSizeOuter(0);\n\n    const axis = axisBottom(xScale);\n\n    if (xAxis.tickValues && ticks) {\n      console.log(ticks, 'ticks');\n      const finalTicks = xAxis.overwriteTicks ? xAxis.tickValues : [...ticks, ...xAxis.tickValues];\n      axis.tickValues(finalTicks);\n    }\n\n    if (xAxis.tickFormat) {\n      if (typeof xAxis.tickFormat === 'string') {\n        const formatGenerator = timeFormat(xAxis.tickFormat);\n        axis.tickFormat((d) => formatGenerator(d));\n      }\n      if (typeof xAxis.tickFormat === 'function') {\n        axis.tickFormat(xAxis.tickFormat);\n      }\n    }\n\n    select(gridRef.current).call(grid);\n    select(axisRef.current).call(axis);\n  }, [innerHeight, ticks, xAxis?.showGrid, xAxis.tickFormat, xAxis.tickValues, xScale]);\n\n  return (\n    <g transform={`translate(0,${innerHeight})`}>\n      <StyledAxis ref={axisRef}>\n        <text className=\"axis-label\" x={innerWidth / 2} y={xAxisLabelOffset} textAnchor=\"middle\">\n          {xAxis.label}\n        </text>\n      </StyledAxis>\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,YAAY,kBAAkB;AAC/C,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,mBAAmB,IAAI,WAAW;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,OAAO;AACvB,QAAM,UAAU,OAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ;AAC7B,YAAU,MAAM;AACd,UAAM,OAAO,WAAW,MAAM,EAC3B,SAAS,OAAO,WAAW,CAAC,cAAc,CAAC,EAC3C,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,OAAO,WAAW,MAAM;AAE9B,QAAI,MAAM,cAAc,OAAO;AAC7B,cAAQ,IAAI,OAAO,OAAO;AAC1B,YAAM,aAAa,MAAM,iBAAiB,MAAM,aAAa,CAAC,GAAG,OAAO,GAAG,MAAM,UAAU;AAC3F,WAAK,WAAW,UAAU;AAAA,IAC5B;AAEA,QAAI,MAAM,YAAY;AACpB,UAAI,OAAO,MAAM,eAAe,UAAU;AACxC,cAAM,kBAAkB,WAAW,MAAM,UAAU;AACnD,aAAK,WAAW,CAAC,MAAM,gBAAgB,CAAC,CAAC;AAAA,MAC3C;AACA,UAAI,OAAO,MAAM,eAAe,YAAY;AAC1C,aAAK,WAAW,MAAM,UAAU;AAAA,MAClC;AAAA,IACF;AAEA,WAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,WAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG,CAAC,aAAa,OAAO,OAAO,UAAU,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AAEpF,SACE,qBAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAC3B;AAAA,0BAAC;AAAA,QAAW,KAAK;AAAA,QACf,8BAAC;AAAA,UAAK,WAAU;AAAA,UAAa,GAAG,aAAa;AAAA,UAAG,GAAG;AAAA,UAAkB,YAAW;AAAA,UAC7E,gBAAM;AAAA,SACT;AAAA,OACF;AAAA,MACA,oBAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/AxisLeft.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useRef } from "react";
+import { select, axisLeft } from "d3";
+import { StyledAxis, StyledGrid } from "../styles";
+import { ChartContext } from "../ChartContext";
+const AxisLeft = () => {
+  const {
+    props: { yAxis, yAxisLabelOffset = 45, yAxisLabel },
+    innerHeight,
+    innerWidth,
+    yScale
+  } = useContext(ChartContext);
+  const ref = useRef();
+  const gridRef = useRef();
+  const ticks = yScale.ticks?.();
+  useEffect(() => {
+    const axis = axisLeft(yScale);
+    if (yAxis.tickValues && ticks) {
+      console.log(ticks, "ticks");
+      const finalTicks = yAxis.overwriteTicks ? yAxis.tickValues : [...ticks, ...yAxis.tickValues];
+      axis.tickValues(finalTicks);
+    }
+    if (yAxis.tickFormat) {
+      axis.tickFormat(yAxis.tickFormat);
+    }
+    const grid = axisLeft(yScale).tickFormat("").tickSize(yAxis?.showGrid ? -innerWidth : 0).tickSizeOuter(0);
+    select(ref.current).call(axis);
+    select(gridRef.current).call(grid);
+  }, [innerWidth, ticks, yAxis.overwriteTicks, yAxis?.showGrid, yAxis.tickFormat, yAxis.tickValues, yScale]);
+  return /* @__PURE__ */ jsxs("g", {
+    children: [
+      /* @__PURE__ */ jsx(StyledAxis, {
+        ref,
+        color: yAxis.color,
+        children: /* @__PURE__ */ jsx("text", {
+          className: "axis-label",
+          textAnchor: "middle",
+          transform: `translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`,
+          children: yAxis?.label
+        })
+      }),
+      " ",
+      /* @__PURE__ */ jsx(StyledGrid, {
+        ref: gridRef
+      })
+    ]
+  });
+};
+export {
+  AxisLeft
+};
+//# sourceMappingURL=AxisLeft.js.map

package/dist/esm/graphs/Chart/parts/AxisLeft.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/AxisLeft.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid } from '../styles';\nimport { ChartContext } from '../ChartContext';\n\nexport const AxisLeft = () => {\n  const {\n    props: { yAxis, yAxisLabelOffset = 45, yAxisLabel },\n    innerHeight,\n    innerWidth,\n    yScale,\n  } = useContext(ChartContext);\n\n  const ref = useRef();\n  const gridRef = useRef();\n  const ticks = yScale.ticks?.();\n\n  useEffect(() => {\n    const axis = axisLeft(yScale);\n\n    if (yAxis.tickValues && ticks) {\n      console.log(ticks, 'ticks');\n      const finalTicks = yAxis.overwriteTicks ? yAxis.tickValues : [...ticks, ...yAxis.tickValues];\n      axis.tickValues(finalTicks);\n    }\n\n    if (yAxis.tickFormat) {\n      axis.tickFormat(yAxis.tickFormat);\n    }\n\n    const grid = axisLeft(yScale)\n      .tickFormat('')\n      .tickSize(yAxis?.showGrid ? -innerWidth : 0)\n      .tickSizeOuter(0);\n\n    select(ref.current).call(axis);\n    select(gridRef.current).call(grid);\n  }, [innerWidth, ticks, yAxis.overwriteTicks, yAxis?.showGrid, yAxis.tickFormat, yAxis.tickValues, yScale]);\n  return (\n    <g>\n      <StyledAxis ref={ref} color={yAxis.color}>\n        <text\n          className=\"axis-label\"\n          textAnchor=\"middle\"\n          transform={`translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`}\n        >\n          {yAxis?.label}\n        </text>\n      </StyledAxis>{' '}\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAEtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,mBAAmB,IAAI,WAAW;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,MAAM,OAAO;AACnB,QAAM,UAAU,OAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ;AAE7B,YAAU,MAAM;AACd,UAAM,OAAO,SAAS,MAAM;AAE5B,QAAI,MAAM,cAAc,OAAO;AAC7B,cAAQ,IAAI,OAAO,OAAO;AAC1B,YAAM,aAAa,MAAM,iBAAiB,MAAM,aAAa,CAAC,GAAG,OAAO,GAAG,MAAM,UAAU;AAC3F,WAAK,WAAW,UAAU;AAAA,IAC5B;AAEA,QAAI,MAAM,YAAY;AACpB,WAAK,WAAW,MAAM,UAAU;AAAA,IAClC;AAEA,UAAM,OAAO,SAAS,MAAM,EACzB,WAAW,EAAE,EACb,SAAS,OAAO,WAAW,CAAC,aAAa,CAAC,EAC1C,cAAc,CAAC;AAElB,WAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAC7B,WAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG,CAAC,YAAY,OAAO,MAAM,gBAAgB,OAAO,UAAU,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AACzG,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAAW;AAAA,QAAU,OAAO,MAAM;AAAA,QACjC,8BAAC;AAAA,UACC,WAAU;AAAA,UACV,YAAW;AAAA,UACX,WAAW,aAAa,CAAC,oBAAoB,cAAc;AAAA,UAE1D,iBAAO;AAAA,SACV;AAAA,OACF;AAAA,MAAc;AAAA,MACd,oBAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/AxisRight.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useRef } from "react";
+import { select, axisRight } from "d3";
+import { StyledAxis } from "../styles";
+import { ChartContext } from "../ChartContext";
+const AxisRight = () => {
+  const {
+    props: { y2Axis, yAxisLabelOffset = 45, y2AxisLabel },
+    innerHeight,
+    innerWidth,
+    y2Scale
+  } = useContext(ChartContext);
+  if (!y2Axis)
+    return null;
+  const ref = useRef();
+  useEffect(() => {
+    const axis = axisRight(y2Scale).tickSizeOuter(0);
+    select(ref.current).call(axis);
+  }, [innerWidth, y2Scale]);
+  return /* @__PURE__ */ jsx("g", {
+    transform: `translate(${innerWidth},0)`,
+    children: /* @__PURE__ */ jsx(StyledAxis, {
+      ref,
+      color: y2Axis.color,
+      children: /* @__PURE__ */ jsx("text", {
+        className: "axis-label",
+        textAnchor: "middle",
+        transform: `translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`
+      })
+    })
+  });
+};
+export {
+  AxisRight
+};
+//# sourceMappingURL=AxisRight.js.map

package/dist/esm/graphs/Chart/parts/AxisRight.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/AxisRight.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisRight } from 'd3';\nimport { StyledAxis } from '../styles';\nimport { ChartContext } from '../ChartContext';\n\nexport const AxisRight = () => {\n  const {\n    props: { y2Axis, yAxisLabelOffset = 45, y2AxisLabel },\n    innerHeight,\n    innerWidth,\n    y2Scale,\n  } = useContext(ChartContext);\n\n  if (!y2Axis) return null;\n  const ref = useRef();\n  useEffect(() => {\n    const axis = axisRight(y2Scale).tickSizeOuter(0);\n\n    select(ref.current).call(axis);\n  }, [innerWidth, y2Scale]);\n  return (\n    <g transform={`translate(${innerWidth},0)`}>\n      <StyledAxis ref={ref} color={y2Axis.color}>\n        <text\n          className=\"axis-label\"\n          textAnchor=\"middle\"\n          transform={`translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`}\n        >\n          {/* {y2Axis?.label} */}\n        </text>\n      </StyledAxis>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,iBAAiB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,mBAAmB,IAAI,YAAY;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,MAAI,CAAC;AAAQ,WAAO;AACpB,QAAM,MAAM,OAAO;AACnB,YAAU,MAAM;AACd,UAAM,OAAO,UAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,WAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAAA,EAC/B,GAAG,CAAC,YAAY,OAAO,CAAC;AACxB,SACE,oBAAC;AAAA,IAAE,WAAW,aAAa;AAAA,IACzB,8BAAC;AAAA,MAAW;AAAA,MAAU,OAAO,OAAO;AAAA,MAClC,8BAAC;AAAA,QACC,WAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAW,aAAa,CAAC,oBAAoB,cAAc;AAAA,OAG7D;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/ChartContainer.js

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useCallback, useMemo } from "react";
+import { StyledSVGWrapper } from "../styles";
+import { ChartContext } from "../ChartContext";
+import { useKeyboardNavigation } from "../config/useKeyboardNavigation";
+const ChartContainer = ({ children }) => {
+  const {
+    props: { width, height, margin, responsive },
+    containerRef,
+    activePoint,
+    setScrapperPosY,
+    setScrapperPosX,
+    svgRef
+  } = useContext(ChartContext);
+  const dimensions = useMemo(
+    () => responsive ? {
+      viewBox: `0 0 ${width} ${height}`
+    } : {
+      width,
+      height
+    },
+    [height, responsive, width]
+  );
+  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();
+  const onMouseLeaveHandler = useCallback(() => {
+    setScrapperPosY("");
+    setScrapperPosX("");
+  }, [setScrapperPosX, setScrapperPosY]);
+  return /* @__PURE__ */ jsx(StyledSVGWrapper, {
+    ref: containerRef,
+    onKeyDown: onInputKeyDown,
+    "aria-hidden": "true",
+    tabIndex: activePoint ? -1 : 0,
+    onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
+    onMouseLeave: onMouseLeaveHandler,
+    children: /* @__PURE__ */ jsx("svg", {
+      ref: svgRef,
+      ...dimensions,
+      children: /* @__PURE__ */ jsx("g", {
+        className: "container",
+        transform: `translate(${margin.left},${margin.top})`,
+        children
+      })
+    })
+  });
+};
+export {
+  ChartContainer
+};
+//# sourceMappingURL=ChartContainer.js.map

package/dist/esm/graphs/Chart/parts/ChartContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/ChartContainer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\ninterface ChartContainerT {\n  children: JSX.Element | JSX.Element[] | string | string[];\n}\nexport const ChartContainer: React.ComponentType<ChartContainerT> = ({ children }) => {\n  const {\n    props: { width, height, margin, responsive },\n    containerRef,\n    activePoint,\n    setScrapperPosY,\n    setScrapperPosX,\n    svgRef,\n  } = useContext(ChartContext);\n\n  const dimensions = useMemo(\n    () =>\n      responsive\n        ? {\n            viewBox: `0 0 ${width} ${height}`,\n          }\n        : {\n            width,\n            height,\n          },\n    [height, responsive, width],\n  );\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n  }, [setScrapperPosX, setScrapperPosY]);\n\n  return (\n    <StyledSVGWrapper\n      ref={containerRef}\n      onKeyDown={onInputKeyDown}\n      aria-hidden=\"true\"\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      // onMouseDown={(e) => e.preventDefault()}\n      onMouseLeave={onMouseLeaveHandler}\n    >\n      <svg ref={svgRef} {...dimensions}>\n        <g className=\"container\" transform={`translate(${margin.left},${margin.top})`}>\n          {children}\n        </g>\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AAI/B,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,WAAW;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,aAAa;AAAA,IACjB,MACE,aACI;AAAA,MACE,SAAS,OAAO,SAAS;AAAA,IAC3B,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACN,CAAC,QAAQ,YAAY,KAAK;AAAA,EAC5B;AACA,QAAM,EAAE,gBAAgB,cAAc,cAAc,IAAI,sBAAsB;AAE9E,QAAM,sBAAsB,YAAY,MAAM;AAC5C,oBAAgB,EAAE;AAClB,oBAAgB,EAAE;AAAA,EACpB,GAAG,CAAC,iBAAiB,eAAe,CAAC;AAErC,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW;AAAA,IACX,eAAY;AAAA,IACZ,UAAU,cAAc,KAAK;AAAA,IAC7B,QAAQ;AAAA,IACR,SAAS;AAAA,IAET,cAAc;AAAA,IAEd,8BAAC;AAAA,MAAI,KAAK;AAAA,MAAS,GAAG;AAAA,MACpB,8BAAC;AAAA,QAAE,WAAU;AAAA,QAAY,WAAW,aAAa,OAAO,QAAQ,OAAO;AAAA,QACpE;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "names": []
+}