@elliemae/ds-dataviz 3.8.1 → 3.9.0-next.1

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\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;AAE1B,SACE,4CAAC,iCAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,IAC5B,sDAAC;AAAA,MACC,sDAAC,oBAAK;AAAA,KACR;AAAA,GACF;AAEJ;",
+  "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;",
   "names": []
 }

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

@@ -48,7 +48,9 @@ const defaultContext = {
   },
   containerRef: (0, import_react.createRef)(),
   groups: [],
-  colorScale: (0, import_d3.scaleOrdinal)()
+  colorScale: (0, import_d3.scaleOrdinal)(),
+  setLeftAxisRef: () => {
+  }
 };
 const ChartContext = (0, import_react.createContext)(defaultContext);
 //# sourceMappingURL=ChartContext.js.map

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: Partial<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}\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};\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;AAkBvC,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;AAC3B;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';\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;",
   "names": []
 }

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

@@ -29,37 +29,45 @@ __export(useChart_exports, {
 module.exports = __toCommonJS(useChart_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
+var import_uuid = require("uuid");
 var import_useScales = require("./useScales");
 var import_helpers = require("../helpers");
+var import_useInternalMargins = require("./useInternalMargins");
 const useChart = (props) => {
-  const { series, yAxis, width, height, groups: groupsStacked } = props;
+  const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;
   const containerRef = (0, import_react.useRef)(null);
   const svgRef = (0, import_react.useRef)(null);
   const [isGrabbed, setIsGrabbed] = (0, import_react.useState)(false);
   const [startPosition, setStartPosition] = (0, import_react.useState)(0);
-  const [activePoint, setActivePoint] = (0, import_react.useState)("");
+  const [activePoint, setActivePoint] = (0, import_react.useState)(null);
   const [activeSerie, setActiveSerie] = (0, import_react.useState)("");
   const [scrapperPosY, setScrapperPosY] = (0, import_react.useState)("");
   const [scrapperPosX, setScrapperPosX] = (0, import_react.useState)("");
   const [xScrollbarPosition, setXScrollbarPosition] = (0, import_react.useState)(0);
   const [isScrollbarVisible, setIsScrollbarVisible] = (0, import_react.useState)(false);
   const oldLastPosition = (0, import_react.useRef)(0);
-  const [axisLeftWidth, setAxisLeftWidth] = (0, import_react.useState)(null);
-  const [axisBottomHeight, setAxisBottomHeight] = (0, import_react.useState)(null);
-  const [axisRightWidth, setAxisRightWidth] = (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 internalMargin = (0, import_react.useMemo)(
-    () => ({
-      bottom: 10 + (axisBottomHeight?.getBoundingClientRect().height ?? 0) + (bottomLegend?.getBoundingClientRect().height ?? 0),
-      top: 10 + (topLegend?.getBoundingClientRect().height ?? 0),
-      right: 10 + (axisRightWidth?.getBoundingClientRect().width ?? 0) + (rightLegend?.getBoundingClientRect().width ?? 0),
-      left: 10 + (axisLeftWidth?.getBoundingClientRect().width ?? 0) + (leftLegend?.getBoundingClientRect().width ?? 0)
-    }),
-    [axisBottomHeight, axisLeftWidth, axisRightWidth, bottomLegend, leftLegend, rightLegend, topLegend]
-  );
+  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 { axisBottomHeight, axisRightWidth, bottomLabelHeight, internalMargin, leftLegendWidth, rightLabelWidth } = (0, import_useInternalMargins.useInternalMargins)({
+    axisLeftRef,
+    axisBottomRef,
+    axisRightRef,
+    leftLabel,
+    leftLegend,
+    rightLegend,
+    topLegend,
+    bottomLegend,
+    rightLabel,
+    bottomLabel
+  });
   const innerWidth = (0, import_react.useMemo)(
     () => width - internalMargin.left - internalMargin.right,
     [internalMargin.left, internalMargin.right, width]
@@ -68,10 +76,7 @@ const useChart = (props) => {
     () => height - internalMargin.top - internalMargin.bottom,
     [internalMargin.top, internalMargin.bottom, height]
   );
-  const groups = (0, import_react.useMemo)(() => series.map((serie) => serie.name), []);
-  const stackedData = (0, import_react.useMemo)(() => (0, import_helpers.stackData)(groupsStacked, series), [groupsStacked, series]);
-  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? 1;
-  const currentData = (0, import_react.useMemo)(
+  const [currentData, setCurrentData] = (0, import_react.useState)(
     () => series.map((d, i) => ({
       ...d,
       originalData: d,
@@ -80,9 +85,15 @@ const useChart = (props) => {
         key: `${d.name}-${i}-${index}`,
         value,
         position: index
-      }))
-    })),
-    [series]
+      })).filter((datum) => datum.value !== null)
+    }))
+  );
+  const stackedData = (0, import_react.useMemo)(() => (0, import_helpers.stackData)(groupsStacked, currentData), [groupsStacked, currentData]);
+  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? 1;
+  const groups = (0, import_react.useMemo)(() => currentData.map((serie) => serie.name), [currentData]);
+  const visibleGroups = (0, import_react.useMemo)(
+    () => currentData.filter((serie) => !serie.isHidden).map((serie) => serie.name),
+    [currentData]
   );
   const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = (0, import_useScales.useScales)({
     props,
@@ -93,12 +104,23 @@ const useChart = (props) => {
     currentData,
     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 chartId = (0, import_react.useMemo)(() => (0, import_uuid.v4)(), []);
   return (0, import_react.useMemo)(
     () => ({
       props: { ...props, data: currentData },
       innerHeight,
       innerWidth,
       groups,
+      visibleGroups,
       colorScale,
       stackedData,
       subGroupScale,
@@ -127,15 +149,30 @@ const useChart = (props) => {
       oldLastPosition,
       containerRatio,
       internalMargin,
-      axisLeftWidth,
+      axisLeftRef,
+      leftLegendWidth,
       leftLegend,
-      setAxisLeftWidth,
+      setAxisLeftRef,
       setLeftLegend,
       setRightLegend,
+      rightLegend,
       setTopLegend,
       setBottomLegend,
-      setAxisBottomHeight,
-      setAxisRightWidth
+      setAxisBottomRef,
+      axisBottomHeight,
+      setAxisRightRef,
+      setRightLabel,
+      setBottomLabel,
+      bottomLabelHeight,
+      rightLabelWidth,
+      axisRightWidth,
+      getXValue,
+      getYValue,
+      isHorizontal,
+      setCurrentData,
+      setLeftLabel,
+      leftLabel,
+      chartId
     }),
     [
       props,
@@ -143,6 +180,7 @@ const useChart = (props) => {
       innerHeight,
       innerWidth,
       groups,
+      visibleGroups,
       colorScale,
       stackedData,
       subGroupScale,
@@ -161,20 +199,35 @@ const useChart = (props) => {
       setIsGrabbed,
       startPosition,
       setStartPosition,
+      rightLabelWidth,
+      rightLegend,
+      bottomLabelHeight,
       isScrollbarVisible,
       setIsScrollbarVisible,
       oldLastPosition,
       containerRatio,
       internalMargin,
-      axisLeftWidth,
+      axisBottomHeight,
+      axisLeftRef,
+      leftLegendWidth,
       leftLegend,
-      setAxisLeftWidth,
+      setAxisLeftRef,
       setLeftLegend,
       setRightLegend,
       setTopLegend,
       setBottomLegend,
-      setAxisBottomHeight,
-      setAxisRightWidth
+      setAxisBottomRef,
+      setAxisRightRef,
+      setRightLabel,
+      setBottomLabel,
+      getXValue,
+      getYValue,
+      isHorizontal,
+      setCurrentData,
+      axisRightWidth,
+      setLeftLabel,
+      leftLabel,
+      chartId
     ]
   );
 };

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-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useRef, useEffect } from 'react';\n\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';\nexport const useChart = (props: DSChartT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, yAxis, 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('');\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 [axisLeftWidth, setAxisLeftWidth] = useState(null);\n  const [axisBottomHeight, setAxisBottomHeight] = useState(null);\n  const [axisRightWidth, setAxisRightWidth] = useState(null);\n\n  const [leftLegend, setLeftLegend] = useState(null);\n  const [rightLegend, setRightLegend] = useState(null);\n  const [topLegend, setTopLegend] = useState(null);\n  const [bottomLegend, setBottomLegend] = useState(null);\n\n  // @todo create a useInternalMargin\n  const internalMargin = useMemo(\n    () => ({\n      bottom:\n        10 +\n        (axisBottomHeight?.getBoundingClientRect().height ?? 0) +\n        (bottomLegend?.getBoundingClientRect().height ?? 0),\n      top: 10 + (topLegend?.getBoundingClientRect().height ?? 0),\n      right:\n        10 + (axisRightWidth?.getBoundingClientRect().width ?? 0) + (rightLegend?.getBoundingClientRect().width ?? 0),\n      left: 10 + (axisLeftWidth?.getBoundingClientRect().width ?? 0) + (leftLegend?.getBoundingClientRect().width ?? 0),\n    }),\n    [axisBottomHeight, axisLeftWidth, axisRightWidth, bottomLegend, leftLegend, rightLegend, topLegend],\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  const groups = useMemo(() => series.map((serie) => serie.name), []);\n  const stackedData = useMemo(() => stackData(groupsStacked, series), [groupsStacked, series]);\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 currentData = useMemo(\n    () =>\n      series.map((d, i) => ({\n        ...d,\n        originalData: d,\n        key: `${d.name}-${i}`,\n        data: d.data.map((value, index) => ({\n          key: `${d.name}-${i}-${index}`,\n          value,\n          position: index,\n        })),\n      })),\n    [series],\n  );\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  return useMemo(\n    () => ({\n      props: { ...props, data: currentData },\n      innerHeight,\n      innerWidth,\n      groups,\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      axisLeftWidth,\n      leftLegend,\n      setAxisLeftWidth,\n      setLeftLegend,\n      setRightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomHeight,\n      setAxisRightWidth,\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      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftWidth,\n      leftLegend,\n      setAxisLeftWidth,\n      setLeftLegend,\n      setRightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomHeight,\n      setAxisRightWidth,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
+  "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 [currentData, setCurrentData] = useState(() =>\n    series.map((d, i) => ({\n      ...d,\n      originalData: 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        }))\n        .filter((datum) => datum.value !== null),\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 visibleGroups = useMemo(\n    () => currentData.filter((serie) => !serie.isHidden).map((serie) => serie.name),\n    [currentData],\n  );\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, data: currentData },\n      innerHeight,\n      innerWidth,\n      //  @todo change this to series and visible series\n      groups,\n      visibleGroups,\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      setCurrentData,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n    }),\n    [\n      props,\n      currentData,\n      innerHeight,\n      innerWidth,\n      groups,\n      visibleGroups,\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      setCurrentData,\n      axisRightWidth,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["uuidv4"]
 }

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

@@ -0,0 +1,103 @@
+"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 useInternalMargins_exports = {};
+__export(useInternalMargins_exports, {
+  useInternalMargins: () => useInternalMargins
+});
+module.exports = __toCommonJS(useInternalMargins_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const useInternalMargins = ({
+  axisLeftRef,
+  axisBottomRef,
+  axisRightRef,
+  leftLabel,
+  leftLegend,
+  rightLegend,
+  topLegend,
+  bottomLegend,
+  rightLabel,
+  bottomLabel
+}) => {
+  const axisLeftWidth = (0, import_react.useMemo)(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);
+  const axisBottomHeight = (0, import_react.useMemo)(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);
+  const axisRightWidth = (0, import_react.useMemo)(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);
+  const bottomLabelHeight = (0, import_react.useMemo)(() => bottomLabel?.getBoundingClientRect()?.height || 0, [bottomLabel]);
+  const rightLabelWidth = (0, import_react.useMemo)(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);
+  const leftLabelWidth = (0, import_react.useMemo)(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);
+  const topLegendHeight = (0, import_react.useMemo)(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);
+  const bottomLegendHeight = (0, import_react.useMemo)(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);
+  const rightLegendWidth = (0, import_react.useMemo)(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);
+  const leftLegendWidth = (0, import_react.useMemo)(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);
+  const internalMargin = (0, import_react.useMemo)(
+    () => ({
+      bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,
+      top: 10 + topLegendHeight,
+      right: 10 + rightLabelWidth + axisRightWidth + rightLegendWidth,
+      left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth
+    }),
+    [
+      axisBottomHeight,
+      bottomLegendHeight,
+      bottomLabelHeight,
+      topLegendHeight,
+      rightLabelWidth,
+      axisRightWidth,
+      rightLegendWidth,
+      axisLeftWidth,
+      leftLabelWidth,
+      leftLegendWidth
+    ]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      internalMargin,
+      leftLegendWidth,
+      axisBottomHeight,
+      bottomLegendHeight,
+      bottomLabelHeight,
+      topLegendHeight,
+      rightLabelWidth,
+      axisRightWidth,
+      rightLegendWidth,
+      axisLeftWidth,
+      leftLabelWidth
+    }),
+    [
+      axisBottomHeight,
+      axisLeftWidth,
+      axisRightWidth,
+      bottomLabelHeight,
+      bottomLegendHeight,
+      internalMargin,
+      leftLabelWidth,
+      leftLegendWidth,
+      rightLabelWidth,
+      rightLegendWidth,
+      topLegendHeight
+    ]
+  );
+};
+//# sourceMappingURL=useInternalMargins.js.map

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

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

@@ -43,25 +43,29 @@ const useKeyboardNavigation = () => {
     activePoint,
     setActivePoint,
     containerRef,
-    groups,
+    visibleGroups,
     yScale,
     xScale,
     setXScrollbarPosition,
     containerRatio,
     xScrollbarPosition,
     innerWidth,
+    getXValue,
     props: { data, xAxis }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const [currentFocusedDataset, setCurrentFocusedDataset] = (0, import_react.useState)(groups[0]);
+  const [currentFocusedDataset, setCurrentFocusedDataset] = (0, import_react.useState)(visibleGroups[0]);
+  (0, import_react.useEffect)(() => {
+    setCurrentFocusedDataset(visibleGroups[0]);
+  }, [visibleGroups]);
   const currentGroup = (0, import_react.useMemo)(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);
   const currentItemIndex = (0, import_react.useMemo)(
-    () => currentGroup.data.findIndex((opt) => opt.key === activePoint),
+    () => currentGroup.data.findIndex((opt) => opt.key === activePoint?.key),
     [activePoint, currentGroup]
   );
   const handleOnFocus = (0, import_react.useCallback)(
     (e) => {
       if (containerRef?.current === e.target) {
-        setActivePoint(currentGroup.data[0].key);
+        setActivePoint(currentGroup.data[0]);
         setXScrollbarPosition(0);
       }
     },
@@ -70,7 +74,7 @@ const useKeyboardNavigation = () => {
   const handleOnBlur = (0, import_react.useCallback)(() => {
     setTimeout(() => {
       if (!containerRef?.current?.contains(document.activeElement) || containerRef?.current === document.activeElement) {
-        setActivePoint("");
+        setActivePoint(null);
       }
     });
   }, [containerRef, setActivePoint]);
@@ -81,14 +85,20 @@ const useKeyboardNavigation = () => {
         currentItemIndex,
         step
       );
-      setActivePoint(currentGroup.data[newValue].key);
+      setActivePoint(currentGroup.data[newValue]);
       if (containerRatio > 1) {
-        const xValue = xScale(xAxis.cols[currentGroup.data[newValue].position]);
+        const xValue = xScale(getXValue(currentGroup.data[newValue]));
+        const barWidth = innerWidth / containerRatio;
         const total = innerWidth * containerRatio;
         if (total <= xValue) {
           setXScrollbarPosition((total - innerWidth) / containerRatio);
         } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)
-          setXScrollbarPosition((prev) => prev + 10);
+          setXScrollbarPosition((prev) => {
+            const nextPosition = prev + (xValue / containerRatio - prev);
+            if (nextPosition + barWidth > innerWidth)
+              return innerWidth - barWidth;
+            return nextPosition;
+          });
         else if (xValue < xScrollbarPosition * containerRatio)
           setXScrollbarPosition(xValue / containerRatio);
       }
@@ -97,10 +107,10 @@ const useKeyboardNavigation = () => {
       containerRatio,
       currentGroup.data,
       currentItemIndex,
+      getXValue,
       innerWidth,
       setActivePoint,
       setXScrollbarPosition,
-      xAxis.cols,
       xScale,
       xScrollbarPosition
     ]
@@ -109,16 +119,16 @@ const useKeyboardNavigation = () => {
     (step) => {
       setCurrentFocusedDataset((prev) => {
         const nextGroup = findInCircularList(
-          groups,
-          groups.findIndex((item) => item === prev),
+          visibleGroups,
+          visibleGroups.findIndex((item) => item === prev),
           step
         );
-        const nextGroupData = data.find((d) => d.name === groups[nextGroup]);
-        setActivePoint(nextGroupData.data[currentItemIndex].key);
-        return groups[nextGroup];
+        const nextGroupData = data.find((d) => d.name === visibleGroups[nextGroup]);
+        setActivePoint(nextGroupData.data[currentItemIndex] ?? nextGroupData.data[0]);
+        return visibleGroups[nextGroup];
       });
     },
-    [currentItemIndex, data, setActivePoint, groups]
+    [currentItemIndex, data, setActivePoint, visibleGroups]
   );
   const onInputKeyDown = (0, import_react.useCallback)(
     (e) => {

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, 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    xScale,\n    setXScrollbarPosition,\n    containerRatio,\n    xScrollbarPosition,\n    innerWidth,\n    props: { data, xAxis },\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        setXScrollbarPosition(0);\n      }\n    },\n    [containerRef, currentGroup.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('');\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      if (containerRatio > 1) {\n        const xValue = xScale(xAxis.cols[currentGroup.data[newValue].position]);\n\n        const total = innerWidth * containerRatio;\n        if (total <= xValue) {\n          setXScrollbarPosition((total - innerWidth) / containerRatio);\n        } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n          setXScrollbarPosition((prev) => prev + 10);\n        else if (xValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(xValue / containerRatio);\n      }\n    },\n    [\n      containerRatio,\n      currentGroup.data,\n      currentItemIndex,\n      innerWidth,\n      setActivePoint,\n      setXScrollbarPosition,\n      xAxis.cols,\n      xScale,\n      xScrollbarPosition,\n    ],\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 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, 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    visibleGroups,\n    yScale,\n    xScale,\n    setXScrollbarPosition,\n    containerRatio,\n    xScrollbarPosition,\n    innerWidth,\n    getXValue,\n    props: { data, xAxis },\n  } = useContext(ChartContext);\n\n  const [currentFocusedDataset, setCurrentFocusedDataset] = useState(visibleGroups[0]);\n\n  useEffect(() => {\n    setCurrentFocusedDataset(visibleGroups[0]);\n  }, [visibleGroups]);\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?.key),\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]);\n        setXScrollbarPosition(0);\n      }\n    },\n    [containerRef, currentGroup.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        currentGroup.data.map((d) => d.value.toString()),\n        currentItemIndex,\n        step,\n      );\n      setActivePoint(currentGroup.data[newValue]);\n      if (containerRatio > 1) {\n        const xValue = xScale(getXValue(currentGroup.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      currentGroup.data,\n      currentItemIndex,\n      getXValue,\n      innerWidth,\n      setActivePoint,\n      setXScrollbarPosition,\n      xScale,\n      xScrollbarPosition,\n    ],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      setCurrentFocusedDataset((prev) => {\n        const nextGroup = findInCircularList(\n          visibleGroups,\n          visibleGroups.findIndex((item) => item === prev),\n          step,\n        );\n        const nextGroupData = data.find((d) => d.name === visibleGroups[nextGroup]);\n        setActivePoint(nextGroupData.data[currentItemIndex] ?? nextGroupData.data[0]);\n        return visibleGroups[nextGroup];\n      });\n    },\n    [currentItemIndex, data, setActivePoint, visibleGroups],\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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",
   "names": []
 }