@elliemae/ds-dataviz 3.9.0 → 3.10.0-next.0

package/dist/cjs/graphs/Chart/Chart.js

@@ -32,14 +32,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ChartContainer = require("./parts/ChartContainer");
 var import_ChartContext = require("./ChartContext");
 var import_useChart = require("./config/useChart");
-var import_Axes = require("./parts/Axis/Axes");
 const Chart = (props) => {
   const ctx = (0, import_useChart.useChart)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartContext.ChartContext.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartContainer.ChartContainer, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Axes.Axes, {})
-    })
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartContainer.ChartContainer, {})
   });
 };
 //# sourceMappingURL=Chart.js.map

package/dist/cjs/graphs/Chart/Chart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/Chart.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\n\nimport { ChartContainer } from './parts/ChartContainer';\n// import { SeriesFactory } from './parts/SeriesFactory';\n// import { ActivePoint } from './parts/ActivePoint';\n\nimport { ChartContext } from './ChartContext';\nimport { useChart } from './config/useChart';\nimport type { DSChartT } from './react-desc-prop-types';\n\nimport { Axes } from './parts/Axis/Axes';\nexport const Chart: React.ComponentType<DSChartT.Props> = (props) => {\n  const ctx = useChart(props);\n  return (\n    <ChartContext.Provider value={ctx}>\n      <ChartContainer>\n        <Axes />\n      </ChartContainer>\n    </ChartContext.Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,4BAA+B;AAI/B,0BAA6B;AAC7B,sBAAyB;AAGzB,kBAAqB;AACd,MAAM,QAA6C,CAAC,UAAU;AACnE,QAAM,UAAM,0BAAS,KAAK;AAC1B,SACE,4CAAC,iCAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,IAC5B,sDAAC;AAAA,MACC,sDAAC,oBAAK;AAAA,KACR;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer';\nimport { ChartContext } from './ChartContext';\nimport { useChart } from './config/useChart';\nimport type { DSChartT } from './react-desc-prop-types';\n\nimport { Axes } from './parts/Axis/Axes';\nexport const Chart: React.ComponentType<DSChartT.Props> = (props) => {\n  const ctx = useChart(props);\n  return (\n    <ChartContext.Provider value={ctx}>\n      <ChartContainer />\n    </ChartContext.Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,4BAA+B;AAC/B,0BAA6B;AAC7B,sBAAyB;AAIlB,MAAM,QAA6C,CAAC,UAAU;AACnE,QAAM,UAAM,0BAAS,KAAK;AAC1B,SACE,4CAAC,iCAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,IAC5B,sDAAC,wCAAe;AAAA,GAClB;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/ChartContext.js

@@ -37,12 +37,9 @@ const defaultContext = {
   yScale: (0, import_d3.scaleLinear)(),
   innerHeight: 0,
   innerWidth: 0,
-  activePoint: "",
+  activePoint: null,
   setActivePoint: () => {
   },
-  activeSerie: "",
-  setActiveSerie: () => {
-  },
   scrapperPosY: "",
   setScrapperPosY: () => {
   },

package/dist/cjs/graphs/Chart/ChartContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/ChartContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { ScaleLinear, ScaleBand, scaleLinear, scaleBand, scaleOrdinal, ScaleOrdinal } from 'd3';\nimport { defaultProps, DSChartT } from './react-desc-prop-types';\n\ninterface ContextT {\n  props: DSChartT.Props;\n  xScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  yScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: string;\n  setActivePoint: React.Dispatch<React.SetStateAction<string>>;\n  activeSerie: string;\n  setActiveSerie: React.Dispatch<React.SetStateAction<string>>;\n  containerRef: React.RefObject<HTMLDivElement>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, never>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<Element | undefined>>;\n  axisLeftRef: Element;\n}\n\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: '',\n  setActivePoint: () => {},\n  activeSerie: '',\n  setActiveSerie: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\n\nexport const ChartContext = createContext(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,gBAA2F;AAC3F,mCAAuC;AAoBvC,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,YAAQ,qBAAU;AAAA,EAClB,YAAQ,uBAAY;AAAA,EACpB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,kBAAc,wBAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,gBAAY,wBAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AAEO,MAAM,mBAAe,4BAAc,cAAc;",
+  "sourcesContent": ["import { createContext, createRef } from 'react';\nimport { ScaleLinear, ScaleBand, scaleLinear, scaleBand, scaleOrdinal, ScaleOrdinal } from 'd3';\nimport { defaultProps, DSChartT } from './react-desc-prop-types';\ninterface ContextT {\n  props: DSChartT.Props;\n  currentData: DSChartT.InternalData;\n  xScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  yScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  y2Scale: ScaleLinear<number, number, never>;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: DSChartT.InternalDatum | null;\n  containerRef: React.RefObject<HTMLDivElement>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, string>;\n  axisLeftRef: SVGGElement | null;\n  scrapperPosY: string;\n  scrapperPosX: string;\n  xScrollbarPosition: number;\n  isGrabbed: boolean;\n  startPosition: number;\n  isScrollbarVisible: boolean;\n  oldLastPosition: React.MutableRefObject<number>;\n  containerRatio: number;\n  internalMargin: {\n    bottom: number;\n    top: number;\n    right: number;\n    left: number;\n  };\n  leftLegendWidth: number;\n  leftLegend: SVGGElement;\n  rightLegend: SVGGElement;\n  axisBottomHeight: number;\n  bottomLabelHeight: number;\n  rightLabelWidth: number;\n  axisRightWidth: number;\n  isHorizontal: boolean;\n  leftLabel: SVGGElement;\n  chartId: string;\n  hiddenSeries: string[];\n  stackedData: DSChartT.StackedSeriesByGroupT;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getBandwidth: () => number;\n  setScrapperPosY: React.Dispatch<React.SetStateAction<string>>;\n  setScrapperPosX: React.Dispatch<React.SetStateAction<string>>;\n  setXScrollbarPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsGrabbed: React.Dispatch<React.SetStateAction<boolean>>;\n  setStartPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsScrollbarVisible: React.Dispatch<React.SetStateAction<boolean>>;\n  setAxisLeftRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setTopLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisBottomRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisRightRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getXValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getYValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  setHiddenSeries: React.Dispatch<React.SetStateAction<string[]>>;\n  getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n}\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: null,\n  setActivePoint: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\nexport const ChartContext = createContext(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,gBAA2F;AAC3F,mCAAuC;AAkEvC,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,YAAQ,qBAAU;AAAA,EAClB,YAAQ,uBAAY;AAAA,EACpB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,kBAAc,wBAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,gBAAY,wBAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AACO,MAAM,mBAAe,4BAAc,cAAc;",
   "names": []
 }

package/dist/cjs/graphs/Chart/config/useChart.js

@@ -33,6 +33,7 @@ var import_uuid = require("uuid");
 var import_useScales = require("./useScales");
 var import_helpers = require("../helpers");
 var import_useInternalMargins = require("./useInternalMargins");
+var import_useGetters = require("./useGetters");
 const useChart = (props) => {
   const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;
   const containerRef = (0, import_react.useRef)(null);
@@ -46,16 +47,16 @@ const useChart = (props) => {
   const [xScrollbarPosition, setXScrollbarPosition] = (0, import_react.useState)(0);
   const [isScrollbarVisible, setIsScrollbarVisible] = (0, import_react.useState)(false);
   const oldLastPosition = (0, import_react.useRef)(0);
-  const [axisLeftRef, setAxisLeftRef] = (0, import_react.useState)();
-  const [axisBottomRef, setAxisBottomRef] = (0, import_react.useState)();
-  const [axisRightRef, setAxisRightRef] = (0, import_react.useState)();
-  const [leftLegend, setLeftLegend] = (0, import_react.useState)();
-  const [rightLegend, setRightLegend] = (0, import_react.useState)();
-  const [topLegend, setTopLegend] = (0, import_react.useState)();
-  const [bottomLegend, setBottomLegend] = (0, import_react.useState)();
-  const [rightLabel, setRightLabel] = (0, import_react.useState)();
-  const [leftLabel, setLeftLabel] = (0, import_react.useState)();
-  const [bottomLabel, setBottomLabel] = (0, import_react.useState)();
+  const [axisLeftRef, setAxisLeftRef] = (0, import_react.useState)(null);
+  const [axisBottomRef, setAxisBottomRef] = (0, import_react.useState)(null);
+  const [axisRightRef, setAxisRightRef] = (0, import_react.useState)(null);
+  const [leftLegend, setLeftLegend] = (0, import_react.useState)(null);
+  const [rightLegend, setRightLegend] = (0, import_react.useState)(null);
+  const [topLegend, setTopLegend] = (0, import_react.useState)(null);
+  const [bottomLegend, setBottomLegend] = (0, import_react.useState)(null);
+  const [rightLabel, setRightLabel] = (0, import_react.useState)(null);
+  const [leftLabel, setLeftLabel] = (0, import_react.useState)(null);
+  const [bottomLabel, setBottomLabel] = (0, import_react.useState)(null);
   const { axisBottomHeight, axisRightWidth, bottomLabelHeight, internalMargin, leftLegendWidth, rightLabelWidth } = (0, import_useInternalMargins.useInternalMargins)({
     axisLeftRef,
     axisBottomRef,
@@ -86,12 +87,12 @@ const useChart = (props) => {
         value,
         position: index,
         serie: d.name
-      })).filter((datum) => datum.value !== null)
+      })).filter((datum) => datum.value !== null && datum.value !== void 0)
     })),
     [hiddenSeries, series]
   );
   const stackedData = (0, import_react.useMemo)(() => (0, import_helpers.stackData)(groupsStacked, currentData), [groupsStacked, currentData]);
-  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? 1;
+  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;
   const groups = (0, import_react.useMemo)(() => currentData.map((serie) => serie.name), [currentData]);
   const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = (0, import_useScales.useScales)({
     props,
@@ -103,18 +104,17 @@ const useChart = (props) => {
     containerRatio
   });
   const isHorizontal = (0, import_react.useMemo)(() => !!yScale.bandwidth, [yScale]);
-  const getXValue = (0, import_react.useCallback)(
-    (datum) => !isHorizontal ? xAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position : datum.value.x ?? datum.value,
-    [isHorizontal, xAxis?.cols]
-  );
-  const getYValue = (0, import_react.useCallback)(
-    (datum) => !isHorizontal ? datum.value?.y ?? datum.value : yAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position,
-    [isHorizontal, yAxis?.cols]
-  );
+  const { getXValue, getYValue, getXScaleValue, getYScaleValue } = (0, import_useGetters.useGetters)({
+    xAxis,
+    yAxis,
+    isHorizontal,
+    xScale,
+    yScale
+  });
   const chartId = (0, import_react.useMemo)(() => (0, import_uuid.v4)(), []);
   return (0, import_react.useMemo)(
     () => ({
-      props: { ...props },
+      props,
       innerHeight,
       innerWidth,
       groups,
@@ -161,6 +161,8 @@ const useChart = (props) => {
       setAxisRightRef,
       setRightLabel,
       setBottomLabel,
+      getXScaleValue,
+      getYScaleValue,
       bottomLabelHeight,
       rightLabelWidth,
       axisRightWidth,
@@ -226,7 +228,9 @@ const useChart = (props) => {
       leftLabel,
       chartId,
       hiddenSeries,
-      setHiddenSeries
+      setHiddenSeries,
+      getXScaleValue,
+      getYScaleValue
     ]
   );
 };

package/dist/cjs/graphs/Chart/config/useChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useChart.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useRef, useCallback } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSChartT } from '../react-desc-prop-types';\n// import { propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nexport const useChart = (props: DSChartT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  const [activePoint, setActivePoint] = useState(null);\n  const [activeSerie, setActiveSerie] = useState('');\n  const [scrapperPosY, setScrapperPosY] = useState('');\n  const [scrapperPosX, setScrapperPosX] = useState('');\n  const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n  const oldLastPosition = useRef(0);\n\n  const [axisLeftRef, setAxisLeftRef] = useState<Element>();\n  const [axisBottomRef, setAxisBottomRef] = useState<Element>();\n  const [axisRightRef, setAxisRightRef] = useState<Element>();\n\n  const [leftLegend, setLeftLegend] = useState<Element>();\n  const [rightLegend, setRightLegend] = useState<Element>();\n  const [topLegend, setTopLegend] = useState<Element>();\n  const [bottomLegend, setBottomLegend] = useState<Element>();\n\n  const [rightLabel, setRightLabel] = useState<Element>();\n  const [leftLabel, setLeftLabel] = useState<Element>();\n  const [bottomLabel, setBottomLabel] = useState<Element>();\n\n  const { axisBottomHeight, axisRightWidth, bottomLabelHeight, internalMargin, leftLegendWidth, rightLabelWidth } =\n    useInternalMargins({\n      axisLeftRef,\n      axisBottomRef,\n      axisRightRef,\n      leftLabel,\n      leftLegend,\n      rightLegend,\n      topLegend,\n      bottomLegend,\n      rightLabel,\n      bottomLabel,\n    });\n  const innerWidth = useMemo(\n    () => width - internalMargin.left - internalMargin.right,\n    [internalMargin.left, internalMargin.right, width],\n  );\n  const innerHeight = useMemo(\n    () => height - internalMargin.top - internalMargin.bottom,\n    [internalMargin.top, internalMargin.bottom, height],\n  );\n\n  const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n  const currentData = useMemo(\n    () =>\n      series\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\n          key: `${d.name}-${i}`,\n          data: d.data\n            .map((value, index) => ({\n              key: `${d.name}-${i}-${index}`,\n              value,\n              position: index,\n              serie: d.name,\n            }))\n            .filter((datum) => datum.value !== null),\n        })),\n    [hiddenSeries, series],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n  // @TODO we need to create a logic to get this from both axis\n  const containerRatio = (props?.xAxis.advanced?.pointSpacing?.value as number) ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => !!yScale.bandwidth, [yScale]);\n\n  const getXValue = useCallback(\n    (datum) =>\n      !isHorizontal ? xAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position : datum.value.x ?? datum.value,\n    [isHorizontal, xAxis?.cols],\n  );\n\n  const getYValue = useCallback(\n    (datum) =>\n      !isHorizontal ? datum.value?.y ?? datum.value : yAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position,\n    [isHorizontal, yAxis?.cols],\n  );\n\n  const chartId = useMemo(() => uuidv4(), []);\n\n  return useMemo(\n    () => ({\n      props: { ...props },\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      svgRef,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      setScrapperPosY,\n      scrapperPosX,\n      setScrapperPosX,\n      activePoint,\n      setActivePoint,\n      activeSerie,\n      setActiveSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      rightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      axisBottomHeight,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n    }),\n    [\n      props,\n      currentData,\n      innerHeight,\n      innerWidth,\n      groups,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      scrapperPosX,\n      setScrapperPosX,\n      xScale,\n      yScale,\n      y2Scale,\n      getBandwidth,\n      scrapperPosY,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      rightLabelWidth,\n      rightLegend,\n      bottomLabelHeight,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisBottomHeight,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      axisRightWidth,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAuD;AACvD,kBAA6B;AAI7B,uBAA0B;AAC1B,qBAA0B;AAC1B,gCAAmC;AAC5B,MAAM,WAAW,CAAC,UAA0B;AAGjD,QAAM,EAAE,QAAQ,OAAO,OAAO,OAAO,QAAQ,QAAQ,cAAc,IAAI;AAEvE,QAAM,mBAAe,qBAAO,IAAI;AAChC,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,CAAC;AAEpD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,IAAI;AACnD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AACjD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,EAAE;AACnD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,EAAE;AACnD,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,CAAC;AAC9D,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,sBAAkB,qBAAO,CAAC;AAEhC,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB;AACxD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAkB;AAC5D,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAkB;AAE1D,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAkB;AACtD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB;AACxD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAkB;AACpD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAkB;AAE1D,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAkB;AACtD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAkB;AACpD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAkB;AAExD,QAAM,EAAE,kBAAkB,gBAAgB,mBAAmB,gBAAgB,iBAAiB,gBAAgB,QAC5G,8CAAmB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH,QAAM,iBAAa;AAAA,IACjB,MAAM,QAAQ,eAAe,OAAO,eAAe;AAAA,IACnD,CAAC,eAAe,MAAM,eAAe,OAAO,KAAK;AAAA,EACnD;AACA,QAAM,kBAAc;AAAA,IAClB,MAAM,SAAS,eAAe,MAAM,eAAe;AAAA,IACnD,CAAC,eAAe,KAAK,eAAe,QAAQ,MAAM;AAAA,EACpD;AAEA,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAmB,CAAC,CAAC;AAE7D,QAAM,kBAAc;AAAA,IAClB,MACE,OACG,OAAO,CAAC,UAAU,CAAC,aAAa,SAAS,MAAM,IAAI,CAAC,EACpD,IAAI,CAAC,GAAG,OAAO;AAAA,MACd,GAAG;AAAA,MACH,KAAK,GAAG,EAAE,QAAQ;AAAA,MAClB,MAAM,EAAE,KACL,IAAI,CAAC,OAAO,WAAW;AAAA,QACtB,KAAK,GAAG,EAAE,QAAQ,KAAK;AAAA,QACvB;AAAA,QACA,UAAU;AAAA,QACV,OAAO,EAAE;AAAA,MACX,EAAE,EACD,OAAO,CAAC,UAAU,MAAM,UAAU,IAAI;AAAA,IAC3C,EAAE;AAAA,IACN,CAAC,cAAc,MAAM;AAAA,EACvB;AAEA,QAAM,kBAAc,sBAAQ,UAAM,0BAAU,eAAe,WAAW,GAAG,CAAC,eAAe,WAAW,CAAC;AAErG,QAAM,iBAAkB,OAAO,MAAM,UAAU,cAAc,SAAoB;AAEjF,QAAM,aAAS,sBAAQ,MAAM,YAAY,IAAI,CAAC,UAAU,MAAM,IAAI,GAAG,CAAC,WAAW,CAAC;AAElF,QAAM,EAAE,QAAQ,QAAQ,SAAS,eAAe,YAAY,aAAa,QAAI,4BAAU;AAAA,IACrF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAe,sBAAQ,MAAM,CAAC,CAAC,OAAO,WAAW,CAAC,MAAM,CAAC;AAE/D,QAAM,gBAAY;AAAA,IAChB,CAAC,UACC,CAAC,eAAe,OAAO,OAAO,MAAM,aAAa,MAAM,MAAM,KAAK,MAAM,WAAW,MAAM,MAAM,KAAK,MAAM;AAAA,IAC5G,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,UACC,CAAC,eAAe,MAAM,OAAO,KAAK,MAAM,QAAQ,OAAO,OAAO,MAAM,aAAa,MAAM,MAAM,KAAK,MAAM;AAAA,IAC1G,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,cAAU,sBAAQ,UAAM,YAAAA,IAAO,GAAG,CAAC,CAAC;AAE1C,aAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO,EAAE,GAAG,MAAM;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useRef } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { ScaleBand } from 'd3';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSChartT } from '../react-desc-prop-types';\n// import { propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\nexport const useChart = (props: DSChartT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  const [activePoint, setActivePoint] = useState(null);\n  const [activeSerie, setActiveSerie] = useState('');\n  const [scrapperPosY, setScrapperPosY] = useState('');\n  const [scrapperPosX, setScrapperPosX] = useState('');\n  const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n  const oldLastPosition = useRef(0);\n\n  const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n  const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n  const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n  const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n  const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n  const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n  const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n  const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n  const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n  const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n  const { axisBottomHeight, axisRightWidth, bottomLabelHeight, internalMargin, leftLegendWidth, rightLabelWidth } =\n    useInternalMargins({\n      axisLeftRef,\n      axisBottomRef,\n      axisRightRef,\n      leftLabel,\n      leftLegend,\n      rightLegend,\n      topLegend,\n      bottomLegend,\n      rightLabel,\n      bottomLabel,\n    });\n  const innerWidth = useMemo(\n    () => width - internalMargin.left - internalMargin.right,\n    [internalMargin.left, internalMargin.right, width],\n  );\n  const innerHeight = useMemo(\n    () => height - internalMargin.top - internalMargin.bottom,\n    [internalMargin.top, internalMargin.bottom, height],\n  );\n\n  const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n  const currentData = useMemo(\n    () =>\n      series\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\n          key: `${d.name}-${i}`,\n          data: d.data\n            .map((value, index) => ({\n              key: `${d.name}-${i}-${index}`,\n              value,\n              position: index,\n              serie: d.name,\n            }))\n            .filter((datum) => datum.value !== null && datum.value !== undefined),\n        })),\n    [hiddenSeries, series],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n  // @TODO we need to create a logic to get this from both axis\n  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => !!(yScale as ScaleBand<string>).bandwidth, [yScale]);\n\n  const { getXValue, getYValue, getXScaleValue, getYScaleValue } = useGetters({\n    xAxis,\n    yAxis,\n    isHorizontal,\n    xScale,\n    yScale,\n  });\n  const chartId = useMemo(() => uuidv4(), []);\n\n  return useMemo(\n    () => ({\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      svgRef,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      setScrapperPosY,\n      scrapperPosX,\n      setScrapperPosX,\n      activePoint,\n      setActivePoint,\n      activeSerie,\n      setActiveSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      rightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      axisBottomHeight,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXScaleValue,\n      getYScaleValue,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n    }),\n    [\n      props,\n      currentData,\n      innerHeight,\n      innerWidth,\n      groups,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      scrapperPosX,\n      setScrapperPosX,\n      xScale,\n      yScale,\n      y2Scale,\n      getBandwidth,\n      scrapperPosY,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      rightLabelWidth,\n      rightLegend,\n      bottomLabelHeight,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisBottomHeight,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      axisRightWidth,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n      getXScaleValue,\n      getYScaleValue,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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1E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,cAAU,sBAAQ,UAAM,YAAAA,IAAO,GAAG,CAAC,CAAC;AAE1C,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": ["uuidv4"]
 }

package/dist/cjs/graphs/Chart/config/useGetters.js

@@ -0,0 +1,90 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useGetters_exports = {};
+__export(useGetters_exports, {
+  useGetters: () => useGetters
+});
+module.exports = __toCommonJS(useGetters_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale }) => {
+  const getXValue = (0, import_react.useCallback)(
+    (datum) => {
+      if (!isHorizontal) {
+        if (xAxis?.cols?.[datum.position]) {
+          return xAxis?.cols?.[datum.position];
+        }
+        if (typeof datum.value === "object")
+          return datum.value?.x;
+        return datum.position.toString();
+      }
+      if (typeof datum.value === "number") {
+        return datum.value;
+      }
+      return datum.value?.x;
+    },
+    [isHorizontal, xAxis?.cols]
+  );
+  const getYValue = (0, import_react.useCallback)(
+    (datum) => {
+      if (!isHorizontal) {
+        if (typeof datum.value === "number") {
+          return datum.value;
+        }
+        return datum.value?.y;
+      }
+      if (yAxis?.cols?.[datum.position]) {
+        return yAxis?.cols?.[datum.position];
+      }
+      if (typeof datum.value === "object")
+        return datum.value?.y;
+      return datum.position.toString();
+    },
+    [isHorizontal, yAxis?.cols]
+  );
+  const getXScaleValue = (0, import_react.useCallback)(
+    (datum) => {
+      if (xAxis.type === "linear") {
+        return xScale(getXValue(datum));
+      }
+      return xScale(getXValue(datum));
+    },
+    [getXValue, xAxis.type, xScale]
+  );
+  const getYScaleValue = (0, import_react.useCallback)(
+    (datum) => {
+      if (yAxis.type === "band") {
+        return yScale(getYValue(datum));
+      }
+      return yScale(getYValue(datum));
+    },
+    [getYValue, yAxis.type, yScale]
+  );
+  return (0, import_react.useMemo)(
+    () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue }),
+    [getYValue, getXValue, getXScaleValue, getYScaleValue]
+  );
+};
+//# sourceMappingURL=useGetters.js.map

package/dist/cjs/graphs/Chart/config/useGetters.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/config/useGetters.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useMemo } from 'react';\nimport { ScaleBand, ScaleLinear } from 'd3';\nimport { DSChartT } from '../react-desc-prop-types';\n\ninterface UseGettersT {\n  xAxis: DSChartT.AxisT;\n  yAxis: DSChartT.AxisT;\n  isHorizontal: boolean;\n  xScale: DSChartT.Scales;\n  yScale: DSChartT.Scales;\n}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale }: UseGettersT) => {\n  const getXValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!isHorizontal) {\n        if (xAxis?.cols?.[datum.position]) {\n          return xAxis?.cols?.[datum.position];\n        }\n        if (typeof datum.value === 'object') return datum.value?.x;\n        return datum.position.toString();\n      }\n      if (typeof datum.value === 'number') {\n        return datum.value;\n      }\n      return datum.value?.x;\n    },\n    [isHorizontal, xAxis?.cols],\n  );\n\n  const getYValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!isHorizontal) {\n        if (typeof datum.value === 'number') {\n          return datum.value;\n        }\n        return datum.value?.y;\n      }\n      if (yAxis?.cols?.[datum.position]) {\n        return yAxis?.cols?.[datum.position];\n      }\n      if (typeof datum.value === 'object') return datum.value?.y;\n      return datum.position.toString();\n    },\n    [isHorizontal, yAxis?.cols],\n  );\n\n  const getXScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (xAxis.type === 'linear') {\n        return (xScale as ScaleLinear<number, number, never>)(getXValue(datum) as number);\n      }\n      return (xScale as ScaleBand<string>)(getXValue(datum) as string);\n    },\n    [getXValue, xAxis.type, xScale],\n  );\n\n  const getYScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (yAxis.type === 'band') {\n        return (yScale as ScaleBand<string>)(getYValue(datum) as string);\n      }\n      return (yScale as ScaleLinear<number, number, never>)(getYValue(datum) as number);\n    },\n    [getYValue, yAxis.type, yScale],\n  );\n\n  return useMemo(\n    () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue }),\n    [getYValue, getXValue, getXScaleValue, getYScaleValue],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqC;AAW9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,OAAO,MAAmB;AACzF,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,OAAO,MAAM,WAAW;AACjC,iBAAO,OAAO,OAAO,MAAM;AAAA,QAC7B;AACA,YAAI,OAAO,MAAM,UAAU;AAAU,iBAAO,MAAM,OAAO;AACzD,eAAO,MAAM,SAAS,SAAS;AAAA,MACjC;AACA,UAAI,OAAO,MAAM,UAAU,UAAU;AACnC,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,MAAM,UAAU,UAAU;AACnC,iBAAO,MAAM;AAAA,QACf;AACA,eAAO,MAAM,OAAO;AAAA,MACtB;AACA,UAAI,OAAO,OAAO,MAAM,WAAW;AACjC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AACA,UAAI,OAAO,MAAM,UAAU;AAAU,eAAO,MAAM,OAAO;AACzD,aAAO,MAAM,SAAS,SAAS;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,MAAM,SAAS,UAAU;AAC3B,eAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,MAClF;AACA,aAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,IACjE;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,MACjE;AACA,aAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,IAClF;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,aAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,eAAe;AAAA,IAC9D,CAAC,WAAW,WAAW,gBAAgB,cAAc;AAAA,EACvD;AACF;",
+  "names": []
+}

package/dist/cjs/graphs/Chart/config/useInternalMargins.js

@@ -55,7 +55,7 @@ const useInternalMargins = ({
     () => ({
       bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,
       top: 10 + topLegendHeight,
-      right: 10 + rightLabelWidth + axisRightWidth + rightLegendWidth,
+      right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,
       left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth
     }),
     [

package/dist/cjs/graphs/Chart/config/useInternalMargins.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useInternalMargins.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo } from 'react';\n\ninterface UseInternalMarginsT {\n  axisLeftRef?: Element;\n  axisBottomRef?: Element;\n  axisRightRef?: Element;\n  leftLegend?: Element;\n  leftLabel?: Element;\n  rightLegend?: Element;\n  topLegend?: Element;\n  bottomLegend?: Element;\n  rightLabel?: Element;\n  bottomLabel?: Element;\n}\nexport const useInternalMargins = ({\n  axisLeftRef,\n  axisBottomRef,\n  axisRightRef,\n  leftLabel,\n  leftLegend,\n  rightLegend,\n  topLegend,\n  bottomLegend,\n  rightLabel,\n  bottomLabel,\n}: UseInternalMarginsT) => {\n  // Axis\n  const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);\n  const axisBottomHeight = useMemo(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);\n  const axisRightWidth = useMemo(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);\n\n  // Labels\n  const bottomLabelHeight = useMemo(() => bottomLabel?.getBoundingClientRect()?.height || 0, [bottomLabel]);\n  const rightLabelWidth = useMemo(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);\n  const leftLabelWidth = useMemo(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);\n\n  // Legends\n  const topLegendHeight = useMemo(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);\n  const bottomLegendHeight = useMemo(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);\n  const rightLegendWidth = useMemo(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);\n  const leftLegendWidth = useMemo(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);\n  // @todo create a useInternalMargin\n  const internalMargin = useMemo(\n    () => ({\n      bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,\n      top: 10 + topLegendHeight,\n      right: 10 + rightLabelWidth + axisRightWidth + rightLegendWidth,\n      left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n    }),\n    [\n      axisBottomHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n    ],\n  );\n};\n\n// const [axisLeftRef, setAxisLeftRef] = useState<Element>();\n// const [axisBottomRef, setAxisBottomRef] = useState<Element>();\n// const [axisRightRef, setAxisRightRef] = useState<Element>();\n\n// const [leftLegend, setLeftLegend] = useState<Element>();\n// const [rightLegend, setRightLegend] = useState<Element>();\n// const [topLegend, setTopLegend] = useState<Element>();\n// const [bottomLegend, setBottomLegend] = useState<Element>();\n\n// const [rightLabel, setRightLabel] = useState<Element>();\n// const [leftLabel, setLeftLabel] = useState<Element>();\n// const [bottomLabel, setBottomLabel] = useState<Element>();\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo } from 'react';\n\ninterface UseInternalMarginsT {\n  axisLeftRef: SVGGElement | null;\n  axisBottomRef: SVGGElement | null;\n  axisRightRef: SVGGElement | null;\n  leftLegend: SVGGElement | null;\n  leftLabel: SVGGElement | null;\n  rightLegend: SVGGElement | null;\n  topLegend: SVGGElement | null;\n  bottomLegend: SVGGElement | null;\n  rightLabel: SVGGElement | null;\n  bottomLabel: SVGGElement | null;\n}\nexport const useInternalMargins = ({\n  axisLeftRef,\n  axisBottomRef,\n  axisRightRef,\n  leftLabel,\n  leftLegend,\n  rightLegend,\n  topLegend,\n  bottomLegend,\n  rightLabel,\n  bottomLabel,\n}: UseInternalMarginsT) => {\n  // Axis\n  const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);\n  const axisBottomHeight = useMemo(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);\n  const axisRightWidth = useMemo(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);\n\n  // Labels\n  const bottomLabelHeight = useMemo(() => bottomLabel?.getBoundingClientRect()?.height || 0, [bottomLabel]);\n  const rightLabelWidth = useMemo(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);\n  const leftLabelWidth = useMemo(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);\n\n  // Legends\n  const topLegendHeight = useMemo(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);\n  const bottomLegendHeight = useMemo(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);\n  const rightLegendWidth = useMemo(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);\n  const leftLegendWidth = useMemo(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);\n\n  const internalMargin = useMemo(\n    () => ({\n      bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,\n      top: 10 + topLegendHeight,\n      right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,\n      left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n    }),\n    [\n      axisBottomHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAwB;AAcjB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AAEzB,QAAM,oBAAgB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACnG,QAAM,uBAAmB,sBAAQ,MAAM,eAAe,sBAAsB,GAAG,UAAU,GAAG,CAAC,aAAa,CAAC;AAC3G,QAAM,qBAAiB,sBAAQ,MAAM,cAAc,sBAAsB,GAAG,SAAS,GAAG,CAAC,YAAY,CAAC;AAGtG,QAAM,wBAAoB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,UAAU,GAAG,CAAC,WAAW,CAAC;AACxG,QAAM,sBAAkB,sBAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AACnG,QAAM,qBAAiB,sBAAQ,MAAM,WAAW,sBAAsB,GAAG,SAAS,GAAG,CAAC,SAAS,CAAC;AAGhG,QAAM,sBAAkB,sBAAQ,MAAM,WAAW,sBAAsB,GAAG,UAAU,GAAG,CAAC,SAAS,CAAC;AAClG,QAAM,yBAAqB,sBAAQ,MAAM,cAAc,sBAAsB,GAAG,UAAU,GAAG,CAAC,YAAY,CAAC;AAC3G,QAAM,uBAAmB,sBAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACtG,QAAM,sBAAkB,sBAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AAEnG,QAAM,qBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,QAAQ,KAAK,mBAAmB,qBAAqB;AAAA,MACrD,KAAK,KAAK;AAAA,MACV,OAAO,KAAK,kBAAkB,iBAAiB;AAAA,MAC/C,MAAM,KAAK,gBAAgB,iBAAiB;AAAA,IAC9C;AAAA,IAEA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -31,6 +31,7 @@ module.exports = __toCommonJS(useKeyboardNavigation_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_ChartContext = require("../ChartContext");
+var import_constants = require("../../constants");
 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])
@@ -44,15 +45,20 @@ const useKeyboardNavigation = () => {
     setActivePoint,
     containerRef,
     yScale,
-    xScale,
     setXScrollbarPosition,
     containerRatio,
     xScrollbarPosition,
     innerWidth,
-    getXValue,
+    innerHeight,
+    getYValue,
+    getXScaleValue,
+    getYScaleValue,
     groups,
-    currentData: data
+    currentData: data,
+    props: { xAxis, yAxis }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;
+  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
   const currentSerie = (0, import_react.useMemo)(
     () => data.find((d) => d.name === activePoint?.serie) ?? data[0],
     [activePoint?.serie, data]
@@ -85,8 +91,10 @@ const useKeyboardNavigation = () => {
         step
       );
       setActivePoint(currentSerie?.data[newValue]);
-      if (containerRatio > 1) {
-        const xValue = xScale(getXValue(currentSerie?.data[newValue]));
+      if (xScroll) {
+        const xValue = getXScaleValue(currentSerie?.data[newValue]);
+        if (xValue === void 0)
+          return;
         const barWidth = innerWidth / containerRatio;
         const total = innerWidth * containerRatio;
         if (total <= xValue) {
@@ -99,19 +107,40 @@ const useKeyboardNavigation = () => {
             return nextPosition;
           });
         else if (xValue < xScrollbarPosition * containerRatio)
-          setXScrollbarPosition(xValue / containerRatio);
+          setXScrollbarPosition(xValue / containerRatio - import_constants.FOCUS_RING.STROKE_WIDTH);
+      }
+      if (yScroll) {
+        const yValue = getYScaleValue(currentSerie?.data[newValue]);
+        if (yValue === void 0)
+          return;
+        const barWidth = innerHeight / containerRatio;
+        const total = innerHeight * containerRatio;
+        if (total <= yValue) {
+          setXScrollbarPosition((total - innerHeight) / containerRatio);
+        } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)
+          setXScrollbarPosition((prev) => {
+            const nextPosition = prev + (yValue / containerRatio - prev);
+            if (nextPosition + barWidth > innerHeight)
+              return innerHeight - barWidth;
+            return nextPosition;
+          });
+        else if (yValue < xScrollbarPosition * containerRatio)
+          setXScrollbarPosition(yValue / containerRatio - import_constants.FOCUS_RING.STROKE_WIDTH);
       }
     },
     [
-      containerRatio,
       currentSerie?.data,
       currentActiveItemIndex,
-      getXValue,
-      innerWidth,
       setActivePoint,
+      xScroll,
+      yScroll,
+      getXScaleValue,
+      innerWidth,
+      containerRatio,
+      xScrollbarPosition,
       setXScrollbarPosition,
-      xScale,
-      xScrollbarPosition
+      getYScaleValue,
+      innerHeight
     ]
   );
   const changeSerie = (0, import_react.useCallback)(
@@ -124,7 +153,7 @@ const useKeyboardNavigation = () => {
         );
         return d.name === groups[nextSerieIndex];
       });
-      setActivePoint(nextSerie?.data[currentActiveItemIndex] ?? nextSerie?.data?.[0]);
+      setActivePoint(nextSerie?.data[currentActiveItemIndex] || nextSerie?.data?.[0] || null);
     },
     [data, setActivePoint, currentActiveItemIndex, groups, currentSerie.name]
   );
@@ -141,7 +170,7 @@ const useKeyboardNavigation = () => {
       }
       if (["ArrowDown", "ArrowUp"].includes(e.code)) {
         if (yScale.bandwidth)
-          navigateSerie(e.code === "ArrowDown" ? -1 : 1);
+          navigateSerie(e.code === "ArrowDown" ? 1 : -1);
         else
           changeSerie(e.code === "ArrowDown" ? -1 : 1);
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useKeyboardNavigation.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useEffect, 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    yScale,\n    xScale,\n    setXScrollbarPosition,\n    containerRatio,\n    xScrollbarPosition,\n    innerWidth,\n    getXValue,\n    groups,\n    currentData: data,\n  } = useContext(ChartContext);\n\n  const currentSerie = useMemo(\n    () => data.find((d) => d.name === activePoint?.serie) ?? data[0],\n    [activePoint?.serie, data],\n  );\n\n  const currentActiveItemIndex = useMemo(\n    () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n    [activePoint, currentSerie],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (containerRef?.current === e.target) {\n        setActivePoint(currentSerie?.data[0]);\n        setXScrollbarPosition(0);\n      }\n    },\n    [containerRef, currentSerie?.data, setActivePoint, setXScrollbarPosition],\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(null);\n      }\n    });\n  }, [containerRef, setActivePoint]);\n\n  const navigateSerie = useCallback(\n    (step: number) => {\n      const newValue = findInCircularList(\n        currentSerie?.data.map((d) => d.value.toString()),\n        currentActiveItemIndex,\n        step,\n      );\n      setActivePoint(currentSerie?.data[newValue]);\n      if (containerRatio > 1) {\n        const xValue = xScale(getXValue(currentSerie?.data[newValue]));\n        const barWidth = innerWidth / containerRatio;\n        const total = innerWidth * containerRatio;\n        if (total <= xValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerWidth) / containerRatio);\n        } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (xValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerWidth) return innerWidth - barWidth;\n            return nextPosition;\n          });\n        // move backwards\n        else if (xValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(xValue / containerRatio);\n      }\n    },\n    [\n      containerRatio,\n      currentSerie?.data,\n      currentActiveItemIndex,\n      getXValue,\n      innerWidth,\n      setActivePoint,\n      setXScrollbarPosition,\n      xScale,\n      xScrollbarPosition,\n    ],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      const nextSerie = data.find((d) => {\n        const nextSerieIndex = findInCircularList(\n          groups,\n          groups.findIndex((item) => item === currentSerie.name),\n          step,\n        );\n\n        return d.name === groups[nextSerieIndex];\n      });\n      setActivePoint(nextSerie?.data[currentActiveItemIndex] ?? nextSerie?.data?.[0]);\n    },\n    [data, setActivePoint, currentActiveItemIndex, groups, currentSerie.name],\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 useMemo(\n    () => ({ onInputKeyDown, handleOnBlur, handleOnFocus }),\n    [handleOnBlur, handleOnFocus, onInputKeyDown],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING } from '../../constants';\nexport const findInCircularList = (\n  list: string[],\n  from: number,\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    yScale,\n    setXScrollbarPosition,\n    containerRatio,\n    xScrollbarPosition,\n    innerWidth,\n    innerHeight,\n    getYValue,\n    getXScaleValue,\n    getYScaleValue,\n    groups,\n    currentData: data,\n    props: { xAxis, yAxis },\n  } = useContext(ChartContext);\n\n  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  const currentSerie = useMemo(\n    () => data.find((d) => d.name === activePoint?.serie) ?? data[0],\n    [activePoint?.serie, data],\n  );\n\n  const currentActiveItemIndex = useMemo(\n    () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n    [activePoint, currentSerie],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (containerRef?.current === e.target) {\n        setActivePoint(currentSerie?.data[0]);\n        setXScrollbarPosition(0);\n      }\n    },\n    [containerRef, currentSerie?.data, setActivePoint, setXScrollbarPosition],\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(null);\n      }\n    });\n  }, [containerRef, setActivePoint]);\n\n  const navigateSerie = useCallback(\n    (step: number) => {\n      const newValue = findInCircularList(\n        currentSerie?.data.map((d) => d.value.toString()),\n        currentActiveItemIndex,\n        step,\n      );\n      setActivePoint(currentSerie?.data[newValue]);\n      if (xScroll) {\n        const xValue = getXScaleValue(currentSerie?.data[newValue]);\n        if (xValue === undefined) return;\n        const barWidth = innerWidth / containerRatio;\n        const total = innerWidth * containerRatio;\n        if (total <= xValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerWidth) / containerRatio);\n        } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (xValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerWidth) return innerWidth - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (xValue < xScrollbarPosition * containerRatio)\n          setXScrollbarPosition(xValue / containerRatio - FOCUS_RING.STROKE_WIDTH);\n      }\n      if (yScroll) {\n        const yValue = getYScaleValue(currentSerie?.data[newValue]);\n        if (yValue === undefined) return;\n        const barWidth = innerHeight / containerRatio;\n        const total = innerHeight * containerRatio;\n        if (total <= yValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerHeight) / containerRatio);\n        } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (yValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerHeight) return innerHeight - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (yValue < xScrollbarPosition * containerRatio)\n          setXScrollbarPosition(yValue / containerRatio - FOCUS_RING.STROKE_WIDTH);\n      }\n    },\n    [\n      currentSerie?.data,\n      currentActiveItemIndex,\n      setActivePoint,\n      xScroll,\n      yScroll,\n      getXScaleValue,\n      innerWidth,\n      containerRatio,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      getYScaleValue,\n      innerHeight,\n    ],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      const nextSerie = data.find((d) => {\n        const nextSerieIndex = findInCircularList(\n          groups,\n          groups.findIndex((item) => item === currentSerie.name),\n          step,\n        );\n\n        return d.name === groups[nextSerieIndex];\n      });\n      setActivePoint(nextSerie?.data[currentActiveItemIndex] || nextSerie?.data?.[0] || null);\n    },\n    [data, setActivePoint, currentActiveItemIndex, groups, currentSerie.name],\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 useMemo(\n    () => ({ onInputKeyDown, handleOnBlur, handleOnFocus }),\n    [handleOnBlur, handleOnFocus, onInputKeyDown],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAiD;AACjD,0BAA6B;AAC7B,uBAA2B;AACpB,MAAM,qBAAqB,CAChC,MACA,MACA,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;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AACtD,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,QAAM,mBAAe;AAAA,IACnB,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE,SAAS,aAAa,KAAK,KAAK,KAAK;AAAA,IAC9D,CAAC,aAAa,OAAO,IAAI;AAAA,EAC3B;AAEA,QAAM,6BAAyB;AAAA,IAC7B,MAAM,cAAc,KAAK,UAAU,CAAC,QAAQ,IAAI,QAAQ,aAAa,GAAG;AAAA,IACxE,CAAC,aAAa,YAAY;AAAA,EAC5B;AAEA,QAAM,oBAAyD;AAAA,IAC7D,CAAC,MAAM;AACL,UAAI,cAAc,YAAY,EAAE,QAAQ;AACtC,uBAAe,cAAc,KAAK,EAAE;AACpC,8BAAsB,CAAC;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,cAAc,MAAM,gBAAgB,qBAAqB;AAAA,EAC1E;AAEA,QAAM,mBAA0D,0BAAY,MAAM;AAChF,eAAW,MAAM;AACf,UACE,CAAC,cAAc,SAAS,SAAS,SAAS,aAAa,KACvD,cAAc,YAAY,SAAS,eACnC;AACA,uBAAe,IAAI;AAAA,MACrB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,cAAc,CAAC;AAEjC,QAAM,oBAAgB;AAAA,IACpB,CAAC,SAAiB;AAChB,YAAM,WAAW;AAAA,QACf,cAAc,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,SAAS,CAAC;AAAA,QAChD;AAAA,QACA;AAAA,MACF;AACA,qBAAe,cAAc,KAAK,SAAS;AAC3C,UAAI,SAAS;AACX,cAAM,SAAS,eAAe,cAAc,KAAK,SAAS;AAC1D,YAAI,WAAW;AAAW;AAC1B,cAAM,WAAW,aAAa;AAC9B,cAAM,QAAQ,aAAa;AAC3B,YAAI,SAAS,QAAQ;AAEnB,iCAAuB,QAAQ,cAAc,cAAc;AAAA,QAC7D,WAAW,SAAS,qBAAqB,iBAAiB;AAExD,gCAAsB,CAAC,SAAS;AAC9B,kBAAM,eAAe,QAAQ,SAAS,iBAAiB;AACvD,gBAAI,eAAe,WAAW;AAAY,qBAAO,aAAa;AAC9D,mBAAO;AAAA,UACT,CAAC;AAAA,iBAEM,SAAS,qBAAqB;AACrC,gCAAsB,SAAS,iBAAiB,4BAAW,YAAY;AAAA,MAC3E;AACA,UAAI,SAAS;AACX,cAAM,SAAS,eAAe,cAAc,KAAK,SAAS;AAC1D,YAAI,WAAW;AAAW;AAC1B,cAAM,WAAW,cAAc;AAC/B,cAAM,QAAQ,cAAc;AAC5B,YAAI,SAAS,QAAQ;AAEnB,iCAAuB,QAAQ,eAAe,cAAc;AAAA,QAC9D,WAAW,SAAS,qBAAqB,iBAAiB;AAExD,gCAAsB,CAAC,SAAS;AAC9B,kBAAM,eAAe,QAAQ,SAAS,iBAAiB;AACvD,gBAAI,eAAe,WAAW;AAAa,qBAAO,cAAc;AAChE,mBAAO;AAAA,UACT,CAAC;AAAA,iBAEM,SAAS,qBAAqB;AACrC,gCAAsB,SAAS,iBAAiB,4BAAW,YAAY;AAAA,MAC3E;AAAA,IACF;AAAA,IACA;AAAA,MACE,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAc;AAAA,IAClB,CAAC,SAAiB;AAChB,YAAM,YAAY,KAAK,KAAK,CAAC,MAAM;AACjC,cAAM,iBAAiB;AAAA,UACrB;AAAA,UACA,OAAO,UAAU,CAAC,SAAS,SAAS,aAAa,IAAI;AAAA,UACrD;AAAA,QACF;AAEA,eAAO,EAAE,SAAS,OAAO;AAAA,MAC3B,CAAC;AACD,qBAAe,WAAW,KAAK,2BAA2B,WAAW,OAAO,MAAM,IAAI;AAAA,IACxF;AAAA,IACA,CAAC,MAAM,gBAAgB,wBAAwB,QAAQ,aAAa,IAAI;AAAA,EAC1E;AAEA,QAAM,qBAA+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,IAAI,EAAE;AAAA;AAC9D,sBAAY,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA,MAClD;AAAA,IACF;AAAA,IACA,CAAC,aAAa,eAAe,OAAO,SAAS;AAAA,EAC/C;AAEA,aAAO;AAAA,IACL,OAAO,EAAE,gBAAgB,cAAc,cAAc;AAAA,IACrD,CAAC,cAAc,eAAe,cAAc;AAAA,EAC9C;AACF;",
   "names": []
 }