@elliemae/ds-dataviz 3.8.0-next.6 → 3.8.0-next.7

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

@@ -32,7 +32,7 @@ var import_react = require("react");
 var import_useScales = require("./useScales");
 var import_helpers = require("../helpers");
 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);
@@ -68,10 +68,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,
@@ -81,8 +78,14 @@ const useChart = (props) => {
         value,
         position: index
       }))
-    })),
-    [series]
+    }))
+  );
+  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 +96,22 @@ 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]
+  );
   return (0, import_react.useMemo)(
     () => ({
       props: { ...props, data: currentData },
       innerHeight,
       innerWidth,
       groups,
+      visibleGroups,
       colorScale,
       stackedData,
       subGroupScale,
@@ -135,7 +148,11 @@ const useChart = (props) => {
       setTopLegend,
       setBottomLegend,
       setAxisBottomHeight,
-      setAxisRightWidth
+      setAxisRightWidth,
+      getXValue,
+      getYValue,
+      isHorizontal,
+      setCurrentData
     }),
     [
       props,
@@ -143,6 +160,7 @@ const useChart = (props) => {
       innerHeight,
       innerWidth,
       groups,
+      visibleGroups,
       colorScale,
       stackedData,
       subGroupScale,
@@ -174,7 +192,11 @@ const useChart = (props) => {
       setTopLegend,
       setBottomLegend,
       setAxisBottomHeight,
-      setAxisRightWidth
+      setAxisRightWidth,
+      getXValue,
+      getYValue,
+      isHorizontal,
+      setCurrentData
     ]
   );
 };

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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",
+  "sourcesContent": ["/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useRef, useCallback } 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, 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('');\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\n  const [currentData, setCurrentData] = useState(() =>\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  );\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  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      axisLeftWidth,\n      leftLegend,\n      setAxisLeftWidth,\n      setLeftLegend,\n      setRightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomHeight,\n      setAxisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setCurrentData,\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      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      getXValue,\n      getYValue,\n      isHorizontal,\n      setCurrentData,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -43,7 +43,7 @@ const useKeyboardNavigation = () => {
     activePoint,
     setActivePoint,
     containerRef,
-    groups,
+    visibleGroups,
     yScale,
     xScale,
     setXScrollbarPosition,
@@ -52,7 +52,7 @@ const useKeyboardNavigation = () => {
     innerWidth,
     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]);
   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),
@@ -109,16 +109,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]);
+        const nextGroupData = data.find((d) => d.name === visibleGroups[nextGroup]);
         setActivePoint(nextGroupData.data[currentItemIndex].key);
-        return groups[nextGroup];
+        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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAA2D;AAC3D,0BAA6B;AAEtB,MAAM,qBAAqB,CAChC,MACA,MAEA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,KAAK;AAAI,aAAO;AAAA,EACtB;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,MAAM;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM,MAAM;AAAA,EACvB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAS,OAAO,EAAE;AAE5E,QAAM,mBAAe,sBAAQ,MAAM,KAAK,KAAK,CAAC,MAAM,EAAE,SAAS,qBAAqB,GAAG,CAAC,uBAAuB,IAAI,CAAC;AAEpH,QAAM,uBAAmB;AAAA,IACvB,MAAM,aAAa,KAAK,UAAU,CAAC,QAAQ,IAAI,QAAQ,WAAW;AAAA,IAClE,CAAC,aAAa,YAAY;AAAA,EAC5B;AAEA,QAAM,oBAAyD;AAAA,IAC7D,CAAC,MAAM;AACL,UAAI,cAAc,YAAY,EAAE,QAAQ;AACtC,uBAAe,aAAa,KAAK,GAAG,GAAG;AACvC,8BAAsB,CAAC;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,aAAa,MAAM,gBAAgB,qBAAqB;AAAA,EACzE;AAEA,QAAM,mBAA0D,0BAAY,MAAM;AAChF,eAAW,MAAM;AACf,UACE,CAAC,cAAc,SAAS,SAAS,SAAS,aAAa,KACvD,cAAc,YAAY,SAAS,eACnC;AACA,uBAAe,EAAE;AAAA,MACnB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,cAAc,CAAC;AAEjC,QAAM,oBAAgB;AAAA,IACpB,CAAC,SAAiB;AAChB,YAAM,WAAW;AAAA,QACf,aAAa,KAAK,IAAI,CAAC,MAAM,EAAE,MAAM,SAAS,CAAC;AAAA,QAC/C;AAAA,QACA;AAAA,MACF;AACA,qBAAe,aAAa,KAAK,UAAU,GAAG;AAC9C,UAAI,iBAAiB,GAAG;AACtB,cAAM,SAAS,OAAO,MAAM,KAAK,aAAa,KAAK,UAAU,SAAS;AAEtE,cAAM,QAAQ,aAAa;AAC3B,YAAI,SAAS,QAAQ;AACnB,iCAAuB,QAAQ,cAAc,cAAc;AAAA,QAC7D,WAAW,SAAS,qBAAqB,iBAAiB;AACxD,gCAAsB,CAAC,SAAS,OAAO,EAAE;AAAA,iBAClC,SAAS,qBAAqB;AAAgB,gCAAsB,SAAS,cAAc;AAAA,MACtG;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAc;AAAA,IAClB,CAAC,SAAiB;AAChB,+BAAyB,CAAC,SAAS;AACjC,cAAM,YAAY;AAAA,UAChB;AAAA,UACA,OAAO,UAAU,CAAC,SAAS,SAAS,IAAI;AAAA,UACxC;AAAA,QACF;AACA,cAAM,gBAAgB,KAAK,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO,UAAU;AACnE,uBAAe,cAAc,KAAK,kBAAkB,GAAG;AACvD,eAAO,OAAO;AAAA,MAChB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,MAAM,gBAAgB,MAAM;AAAA,EACjD;AAEA,QAAM,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,KAAK,CAAC;AAAA;AAC9D,sBAAY,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA,MAClD;AAAA,IACF;AAAA,IACA,CAAC,aAAa,eAAe,OAAO,SAAS;AAAA,EAC/C;AAEA,aAAO;AAAA,IACL,OAAO,EAAE,gBAAgB,cAAc,cAAc;AAAA,IACrD,CAAC,cAAc,eAAe,cAAc;AAAA,EAC9C;AACF;",
+  "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    visibleGroups,\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(visibleGroups[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          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].key);\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": []
 }

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

@@ -47,13 +47,20 @@ const useScales = ({
   const getLinearDomain = (0, import_react.useCallback)(
     (axis, axisString, withStackData = true) => {
       const begin = axis?.beginAtZero ? 0 : void 0;
-      const data = series.filter((serie) => {
+      const data = currentData.filter((serie) => {
+        if (serie.isHidden)
+          return false;
         if (serie.scale === "y2") {
           return serie.scale === axisString;
         }
         return true;
       }).map(
-        (serie) => typeof serie.data[0] === "number" ? serie.data : serie.data.map((coord) => coord[axisString])
+        (serie) => serie.data.map((datum) => {
+          if (typeof datum.value === "number") {
+            return datum.value;
+          }
+          return datum.value[axisString];
+        })
       );
       const stack = withStackData && [
         (0, import_d3.min)(stackedData.flat(), (layer) => (0, import_d3.min)(layer, (sequence) => sequence[1])),
@@ -61,11 +68,14 @@ const useScales = ({
       ];
       const minRange = (0, import_d3.min)([begin, (0, import_d3.min)(data.flat()), stack[0]]);
       const maxRange = (0, import_d3.max)([(0, import_d3.max)(data.flat()), stack[1]]);
-      return [minRange, maxRange];
+      return [
+        minRange - (maxRange - minRange) * (axis.domainPadding ?? 0),
+        maxRange + (maxRange - minRange) * (axis.domainPadding ?? 0)
+      ];
     },
-    [series, stackedData]
+    [currentData, stackedData]
   );
-  const getScaleTime = (domain, range) => (0, import_d3.scaleTime)().domain([(0, import_d3.min)(domain) ?? 0, (0, import_d3.max)(domain) ?? 0]).range(range);
+  const getScaleTime = (domain, range) => (0, import_d3.scaleUtc)().domain([(0, import_d3.min)(domain) ?? 0, (0, import_d3.max)(domain) ?? 0]).range(range);
   const getScaleBand = (domain, range, padding = 0.2) => (0, import_d3.scaleBand)().domain(domain).range(range).padding(padding).paddingOuter(0.1);
   const getScaleLinear = (domain, range) => (0, import_d3.scaleLinear)().domain(domain).range(range);
   const getScaleLog = (domain, range) => (0, import_d3.scaleLog)().domain(domain).range(range);
@@ -76,8 +86,8 @@ const useScales = ({
       const withStackData = yAxis?.type === "band";
       return getScaleLinear(getLinearDomain(xAxis, "x", withStackData), [0, rangeTo], xAxis.padding);
     }
-    return getScaleBand(getBandDomain(xAxis), [0, innerWidth], xAxis.padding);
-  }, [getBandDomain, getLinearDomain, innerWidth, rangeTo, xAxis, yAxis?.type]);
+    return getScaleBand(getBandDomain(xAxis), [0, rangeTo], xAxis.padding);
+  }, [getBandDomain, getLinearDomain, rangeTo, xAxis, yAxis?.type]);
   const yScale = (0, import_react.useMemo)(() => {
     if (yAxis?.type === "band")
       return getScaleBand(getBandDomain(yAxis), [innerHeight, 0], yAxis.padding);
@@ -96,7 +106,7 @@ const useScales = ({
   }, [getBandDomain, getLinearDomain, innerHeight, y2Axis]);
   const colorScale = (0, import_d3.scaleOrdinal)().domain(groups).range(currentData.map((d) => import_colorPallet.COLOR_PALLET[d.color] ?? d.color));
   const subgroupsWithBars = currentData.filter(
-    (serie) => serie.type === "bar" && !(stackedSeries?.length && (0, import_helpers.getStackedIndex)(stackedSeries, serie.name) > -1)
+    (serie) => serie.type === "bar" && !(stackedSeries?.length && (0, import_helpers.getStackedIndex)(stackedSeries, serie.name) > -1) && !serie.isHidden
   ).map((serie) => serie.name);
   const getBandwidth = (0, import_react.useCallback)(() => {
     if (xScale.bandwidth)

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

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

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

@@ -54,11 +54,11 @@ const stackData = (groupsStacked, series) => {
   if (!groupsStacked)
     return [];
   groupsStacked?.forEach((g) => {
-    const seriesStacked = series.filter((serie) => g.includes(serie.name));
+    const seriesStacked = series.filter((serie) => g.includes(serie.name) && !serie.isHidden);
     const keys = seriesStacked.map((serie) => serie.name);
     const stackData2 = [];
     seriesStacked.forEach((serie) => {
-      serie.data.forEach((d, i) => {
+      serie.originalData.data.forEach((d, i) => {
         if (typeof stackData2[i] === "object") {
           stackData2[i][serie.name] = typeof d === "number" ? d : d.y;
         }

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

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

package/dist/cjs/graphs/Chart/parts/Axis/AxisBottom.js

@@ -29,13 +29,13 @@ __export(AxisBottom_exports, {
 module.exports = __toCommonJS(AxisBottom_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_d3 = require("d3");
 var import_styles = require("../../styles");
 var import_ChartContext = require("../../ChartContext");
-const AxisBottom = () => {
+const AxisBottom = import_react.default.memo(() => {
   const {
-    props: { xAxis, xAxisLabelOffset = 50 },
+    props: { xAxis, width },
     innerHeight,
     innerWidth,
     xScale,
@@ -44,13 +44,17 @@ const AxisBottom = () => {
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const axisRef = (0, import_react.useRef)();
   const gridRef = (0, import_react.useRef)();
-  const ticks = xScale.ticks?.();
+  const ticks = xScale.ticks?.(xAxis.tickCount ?? width / 80);
+  console.log(ticks, "ticks");
   (0, import_react.useEffect)(() => {
     const grid = (0, import_d3.axisBottom)(xScale).tickSize(xAxis?.showGrid ? -innerHeight : 0).tickFormat("").tickSizeOuter(0);
     const axis = (0, import_d3.axisBottom)(xScale);
     if (xAxis.tickValues && ticks) {
       const finalTicks = xAxis.overwriteTicks ? xAxis.tickValues : [...ticks, ...xAxis.tickValues];
       axis.tickValues(finalTicks);
+    } else {
+      axis.tickValues(ticks);
+      grid.tickValues(ticks);
     }
     if (xAxis.tickFormat) {
       if (typeof xAxis.tickFormat === "string") {
@@ -89,5 +93,5 @@ const AxisBottom = () => {
       })
     ]
   });
-};
+});
 //# sourceMappingURL=AxisBottom.js.map

package/dist/cjs/graphs/Chart/parts/Axis/AxisBottom.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisBottom.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisBottom, timeFormat } from 'd3';\nimport { StyledAxis, StyledGrid, StyledAxisLabel } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\n\nexport const AxisBottom = () => {\n  const {\n    props: { xAxis, xAxisLabelOffset = 50 },\n    innerHeight,\n    innerWidth,\n    xScale,\n    setAxisBottomHeight,\n    tickOffset = 3,\n  } = useContext(ChartContext);\n\n  const axisRef = useRef();\n  const gridRef = useRef();\n  const ticks = xScale.ticks?.();\n  useEffect(() => {\n    const grid = axisBottom(xScale)\n      .tickSize(xAxis?.showGrid ? -innerHeight : 0)\n      .tickFormat('')\n      .tickSizeOuter(0);\n\n    const axis = axisBottom(xScale);\n\n    if (xAxis.tickValues && ticks) {\n      const finalTicks = xAxis.overwriteTicks ? xAxis.tickValues : [...ticks, ...xAxis.tickValues];\n      axis.tickValues(finalTicks);\n    }\n\n    if (xAxis.tickFormat) {\n      if (typeof xAxis.tickFormat === 'string') {\n        const formatGenerator = timeFormat(xAxis.tickFormat);\n        axis.tickFormat((d) => formatGenerator(d));\n      }\n      if (typeof xAxis.tickFormat === 'function') {\n        axis.tickFormat(xAxis.tickFormat);\n      }\n    }\n\n    select(gridRef.current).call(grid);\n    select(axisRef.current).call(axis);\n  }, [innerHeight, ticks, xAxis.overwriteTicks, xAxis?.showGrid, xAxis.tickFormat, xAxis.tickValues, xScale]);\n\n  return (\n    <g transform={`translate(0,${innerHeight})`}>\n      <g ref={setAxisBottomHeight}>\n        <g transform={`translate(${innerWidth / 2},${axisRef.current?.getBoundingClientRect().height - 20 ?? 0})`}>\n          <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={50}>\n            {xAxis?.label}\n          </StyledAxisLabel>\n        </g>\n        <StyledAxis ref={axisRef}></StyledAxis>\n      </g>\n\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAqD;AACrD,gBAA+C;AAC/C,oBAAwD;AACxD,0BAA6B;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,mBAAmB,GAAG;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAU,qBAAO;AACvB,QAAM,cAAU,qBAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ;AAC7B,8BAAU,MAAM;AACd,UAAM,WAAO,sBAAW,MAAM,EAC3B,SAAS,OAAO,WAAW,CAAC,cAAc,CAAC,EAC3C,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,WAAO,sBAAW,MAAM;AAE9B,QAAI,MAAM,cAAc,OAAO;AAC7B,YAAM,aAAa,MAAM,iBAAiB,MAAM,aAAa,CAAC,GAAG,OAAO,GAAG,MAAM,UAAU;AAC3F,WAAK,WAAW,UAAU;AAAA,IAC5B;AAEA,QAAI,MAAM,YAAY;AACpB,UAAI,OAAO,MAAM,eAAe,UAAU;AACxC,cAAM,sBAAkB,sBAAW,MAAM,UAAU;AACnD,aAAK,WAAW,CAAC,MAAM,gBAAgB,CAAC,CAAC;AAAA,MAC3C;AACA,UAAI,OAAO,MAAM,eAAe,YAAY;AAC1C,aAAK,WAAW,MAAM,UAAU;AAAA,MAClC;AAAA,IACF;AAEA,0BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,0BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG,CAAC,aAAa,OAAO,MAAM,gBAAgB,OAAO,UAAU,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AAE1G,SACE,6CAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAC3B;AAAA,mDAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,sDAAC;AAAA,YAAE,WAAW,aAAa,aAAa,KAAK,QAAQ,SAAS,sBAAsB,EAAE,SAAS;AAAA,YAC7F,sDAAC;AAAA,cAAgB,WAAU;AAAA,cAAa,YAAW;AAAA,cAAS,IAAI;AAAA,cAC7D,iBAAO;AAAA,aACV;AAAA,WACF;AAAA,UACA,4CAAC;AAAA,YAAW,KAAK;AAAA,WAAS;AAAA;AAAA,OAC5B;AAAA,MAEA,4CAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
-  "names": []
+  "sourcesContent": ["import React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisBottom, timeFormat } from 'd3';\nimport { StyledAxis, StyledGrid, StyledAxisLabel } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis, width },\n    innerHeight,\n    innerWidth,\n    xScale,\n    setAxisBottomHeight,\n    tickOffset = 3,\n  } = useContext(ChartContext);\n\n  const axisRef = useRef();\n  const gridRef = useRef();\n  const ticks = xScale.ticks?.(xAxis.tickCount ?? width / 80);\n  console.log(ticks, 'ticks');\n\n  useEffect(() => {\n    const grid = axisBottom(xScale)\n      .tickSize(xAxis?.showGrid ? -innerHeight : 0)\n      .tickFormat('')\n      .tickSizeOuter(0);\n\n    const axis = axisBottom(xScale);\n\n    if (xAxis.tickValues && ticks) {\n      const finalTicks = xAxis.overwriteTicks ? xAxis.tickValues : [...ticks, ...xAxis.tickValues];\n      axis.tickValues(finalTicks);\n    } else {\n      axis.tickValues(ticks);\n      grid.tickValues(ticks);\n    }\n\n    if (xAxis.tickFormat) {\n      if (typeof xAxis.tickFormat === 'string') {\n        const formatGenerator = timeFormat(xAxis.tickFormat);\n        axis.tickFormat((d) => formatGenerator(d));\n      }\n      if (typeof xAxis.tickFormat === 'function') {\n        axis.tickFormat(xAxis.tickFormat);\n      }\n    }\n\n    select(gridRef.current).call(grid);\n    select(axisRef.current).call(axis);\n  }, [innerHeight, ticks, xAxis.overwriteTicks, xAxis?.showGrid, xAxis.tickFormat, xAxis.tickValues, xScale]);\n\n  return (\n    <g transform={`translate(0,${innerHeight})`}>\n      <g ref={setAxisBottomHeight}>\n        <g transform={`translate(${innerWidth / 2},${axisRef.current?.getBoundingClientRect().height - 20 ?? 0})`}>\n          <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={50}>\n            {xAxis?.label}\n          </StyledAxisLabel>\n        </g>\n        <StyledAxis ref={axisRef}></StyledAxis>\n      </g>\n\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAqD;AACrD,gBAA+C;AAC/C,oBAAwD;AACxD,0BAA6B;AAEtB,MAAM,aAAa,aAAAA,QAAM,KAAK,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,MAAM;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAU,qBAAO;AACvB,QAAM,cAAU,qBAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ,MAAM,aAAa,QAAQ,EAAE;AAC1D,UAAQ,IAAI,OAAO,OAAO;AAE1B,8BAAU,MAAM;AACd,UAAM,WAAO,sBAAW,MAAM,EAC3B,SAAS,OAAO,WAAW,CAAC,cAAc,CAAC,EAC3C,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,WAAO,sBAAW,MAAM;AAE9B,QAAI,MAAM,cAAc,OAAO;AAC7B,YAAM,aAAa,MAAM,iBAAiB,MAAM,aAAa,CAAC,GAAG,OAAO,GAAG,MAAM,UAAU;AAC3F,WAAK,WAAW,UAAU;AAAA,IAC5B,OAAO;AACL,WAAK,WAAW,KAAK;AACrB,WAAK,WAAW,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,YAAY;AACpB,UAAI,OAAO,MAAM,eAAe,UAAU;AACxC,cAAM,sBAAkB,sBAAW,MAAM,UAAU;AACnD,aAAK,WAAW,CAAC,MAAM,gBAAgB,CAAC,CAAC;AAAA,MAC3C;AACA,UAAI,OAAO,MAAM,eAAe,YAAY;AAC1C,aAAK,WAAW,MAAM,UAAU;AAAA,MAClC;AAAA,IACF;AAEA,0BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,0BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG,CAAC,aAAa,OAAO,MAAM,gBAAgB,OAAO,UAAU,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AAE1G,SACE,6CAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAC3B;AAAA,mDAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,sDAAC;AAAA,YAAE,WAAW,aAAa,aAAa,KAAK,QAAQ,SAAS,sBAAsB,EAAE,SAAS;AAAA,YAC7F,sDAAC;AAAA,cAAgB,WAAU;AAAA,cAAa,YAAW;AAAA,cAAS,IAAI;AAAA,cAC7D,iBAAO;AAAA,aACV;AAAA,WACF;AAAA,UACA,4CAAC;AAAA,YAAW,KAAK;AAAA,WAAS;AAAA;AAAA,OAC5B;AAAA,MAEA,4CAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ,CAAC;",
+  "names": ["React"]
 }

package/dist/cjs/graphs/Chart/parts/Axis/AxisLeft.js

@@ -35,7 +35,7 @@ var import_styles = require("../../styles");
 var import_ChartContext = require("../../ChartContext");
 const AxisLeft = () => {
   const {
-    props: { yAxis, yAxisLabelOffset = 45, yAxisLabel },
+    props: { yAxis, height },
     innerHeight,
     innerWidth,
     yScale,
@@ -44,17 +44,20 @@ const AxisLeft = () => {
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const ref = (0, import_react.useRef)();
   const gridRef = (0, import_react.useRef)();
-  const ticks = yScale.ticks?.();
+  const ticks = yScale.ticks?.(yAxis.tickCount ?? height / 80);
   (0, import_react.useEffect)(() => {
     const axis = (0, import_d3.axisLeft)(yScale);
+    const grid = (0, import_d3.axisLeft)(yScale).tickFormat("").tickSize(yAxis?.showGrid ? -innerWidth : 0).tickSizeOuter(0);
     if (yAxis.tickValues && ticks) {
       const finalTicks = yAxis.overwriteTicks ? yAxis.tickValues : [...ticks, ...yAxis.tickValues];
       axis.tickValues(finalTicks);
+    } else {
+      axis.tickValues(ticks);
+      grid.tickValues(ticks);
     }
     if (yAxis.tickFormat) {
       axis.tickFormat(yAxis.tickFormat);
     }
-    const grid = (0, import_d3.axisLeft)(yScale).tickFormat("").tickSize(yAxis?.showGrid ? -innerWidth : 0).tickSizeOuter(0);
     (0, import_d3.select)(ref.current).call(axis);
     (0, import_d3.select)(gridRef.current).call(grid);
   }, [

package/dist/cjs/graphs/Chart/parts/Axis/AxisLeft.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisLeft.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useCallback, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid, StyledAxisLabel } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nexport const AxisLeft = () => {\n  const {\n    props: { yAxis, yAxisLabelOffset = 45, yAxisLabel },\n    innerHeight,\n    innerWidth,\n    yScale,\n    internalMargin,\n    setAxisLeftWidth,\n  } = useContext(ChartContext);\n\n  const ref = useRef();\n  const gridRef = useRef();\n  const ticks = yScale.ticks?.();\n\n  useEffect(() => {\n    const axis = axisLeft(yScale);\n\n    if (yAxis.tickValues && ticks) {\n      const finalTicks = yAxis.overwriteTicks ? yAxis.tickValues : [...ticks, ...yAxis.tickValues];\n      axis.tickValues(finalTicks);\n    }\n\n    if (yAxis.tickFormat) {\n      axis.tickFormat(yAxis.tickFormat);\n    }\n\n    const grid = axisLeft(yScale)\n      .tickFormat('')\n      .tickSize(yAxis?.showGrid ? -innerWidth : 0)\n      .tickSizeOuter(0);\n\n    select(ref.current).call(axis);\n\n    select(gridRef.current).call(grid);\n  }, [\n    innerHeight,\n    innerWidth,\n    ticks,\n    yAxis.overwriteTicks,\n    yAxis?.showGrid,\n    yAxis.tickFormat,\n    yAxis.tickValues,\n    yScale,\n  ]);\n  return (\n    <g>\n      <g ref={setAxisLeftWidth}>\n        <g\n          transform={`translate(${-ref.current?.getBoundingClientRect().width ?? 0},${\n            innerHeight / 2 + 10\n          }) rotate(-90)`}\n        >\n          <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={-15}>\n            {yAxis?.label}\n          </StyledAxisLabel>\n        </g>\n        <StyledAxis ref={ref} color={yAxis.color} className=\"axis-left\"></StyledAxis>\n      </g>\n\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkE;AAClE,gBAAiC;AACjC,oBAAwD;AACxD,0BAA6B;AACtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,mBAAmB,IAAI,WAAW;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAO;AACnB,QAAM,cAAU,qBAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ;AAE7B,8BAAU,MAAM;AACd,UAAM,WAAO,oBAAS,MAAM;AAE5B,QAAI,MAAM,cAAc,OAAO;AAC7B,YAAM,aAAa,MAAM,iBAAiB,MAAM,aAAa,CAAC,GAAG,OAAO,GAAG,MAAM,UAAU;AAC3F,WAAK,WAAW,UAAU;AAAA,IAC5B;AAEA,QAAI,MAAM,YAAY;AACpB,WAAK,WAAW,MAAM,UAAU;AAAA,IAClC;AAEA,UAAM,WAAO,oBAAS,MAAM,EACzB,WAAW,EAAE,EACb,SAAS,OAAO,WAAW,CAAC,aAAa,CAAC,EAC1C,cAAc,CAAC;AAElB,0BAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAE7B,0BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACD,SACE,6CAAC;AAAA,IACC;AAAA,mDAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,sDAAC;AAAA,YACC,WAAW,aAAa,CAAC,IAAI,SAAS,sBAAsB,EAAE,SAC5D,cAAc,IAAI;AAAA,YAGpB,sDAAC;AAAA,cAAgB,WAAU;AAAA,cAAa,YAAW;AAAA,cAAS,IAAI;AAAA,cAC7D,iBAAO;AAAA,aACV;AAAA,WACF;AAAA,UACA,4CAAC;AAAA,YAAW;AAAA,YAAU,OAAO,MAAM;AAAA,YAAO,WAAU;AAAA,WAAY;AAAA;AAAA,OAClE;AAAA,MAEA,4CAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useCallback, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid, StyledAxisLabel } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nexport const AxisLeft = () => {\n  const {\n    props: { yAxis, height },\n    innerHeight,\n    innerWidth,\n    yScale,\n    internalMargin,\n    setAxisLeftWidth,\n  } = useContext(ChartContext);\n\n  const ref = useRef();\n  const gridRef = useRef();\n  const ticks = yScale.ticks?.(yAxis.tickCount ?? height / 80);\n\n  useEffect(() => {\n    const axis = axisLeft(yScale);\n\n    const grid = axisLeft(yScale)\n      .tickFormat('')\n      .tickSize(yAxis?.showGrid ? -innerWidth : 0)\n      .tickSizeOuter(0);\n\n    if (yAxis.tickValues && ticks) {\n      const finalTicks = yAxis.overwriteTicks ? yAxis.tickValues : [...ticks, ...yAxis.tickValues];\n      axis.tickValues(finalTicks);\n    } else {\n      axis.tickValues(ticks);\n      grid.tickValues(ticks);\n    }\n\n    if (yAxis.tickFormat) {\n      axis.tickFormat(yAxis.tickFormat);\n    }\n\n    select(ref.current).call(axis);\n\n    select(gridRef.current).call(grid);\n  }, [\n    innerHeight,\n    innerWidth,\n    ticks,\n    yAxis.overwriteTicks,\n    yAxis?.showGrid,\n    yAxis.tickFormat,\n    yAxis.tickValues,\n    yScale,\n  ]);\n  return (\n    <g>\n      <g ref={setAxisLeftWidth}>\n        <g\n          transform={`translate(${-ref.current?.getBoundingClientRect().width ?? 0},${\n            innerHeight / 2 + 10\n          }) rotate(-90)`}\n        >\n          <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={-15}>\n            {yAxis?.label}\n          </StyledAxisLabel>\n        </g>\n        <StyledAxis ref={ref} color={yAxis.color} className=\"axis-left\"></StyledAxis>\n      </g>\n\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkE;AAClE,gBAAiC;AACjC,oBAAwD;AACxD,0BAA6B;AACtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAO;AACnB,QAAM,cAAU,qBAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ,MAAM,aAAa,SAAS,EAAE;AAE3D,8BAAU,MAAM;AACd,UAAM,WAAO,oBAAS,MAAM;AAE5B,UAAM,WAAO,oBAAS,MAAM,EACzB,WAAW,EAAE,EACb,SAAS,OAAO,WAAW,CAAC,aAAa,CAAC,EAC1C,cAAc,CAAC;AAElB,QAAI,MAAM,cAAc,OAAO;AAC7B,YAAM,aAAa,MAAM,iBAAiB,MAAM,aAAa,CAAC,GAAG,OAAO,GAAG,MAAM,UAAU;AAC3F,WAAK,WAAW,UAAU;AAAA,IAC5B,OAAO;AACL,WAAK,WAAW,KAAK;AACrB,WAAK,WAAW,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,YAAY;AACpB,WAAK,WAAW,MAAM,UAAU;AAAA,IAClC;AAEA,0BAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAE7B,0BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACD,SACE,6CAAC;AAAA,IACC;AAAA,mDAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,sDAAC;AAAA,YACC,WAAW,aAAa,CAAC,IAAI,SAAS,sBAAsB,EAAE,SAC5D,cAAc,IAAI;AAAA,YAGpB,sDAAC;AAAA,cAAgB,WAAU;AAAA,cAAa,YAAW;AAAA,cAAS,IAAI;AAAA,cAC7D,iBAAO;AAAA,aACV;AAAA,WACF;AAAA,UACA,4CAAC;AAAA,YAAW;AAAA,YAAU,OAAO,MAAM;AAAA,YAAO,WAAU;AAAA,WAAY;AAAA;AAAA,OAClE;AAAA,MAEA,4CAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
   "names": []
 }

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

@@ -84,6 +84,18 @@ const ChartContainer = ({ children }) => {
     setIsGrabbed(false);
   }, [oldLastPosition, setIsGrabbed, xScrollbarPosition]);
   const key = `translate(${internalMargin.left},${internalMargin.top})`;
+  const handleScroll = (0, import_react.useCallback)((e) => {
+    e.preventDefault();
+    console.log("scroll2");
+  }, []);
+  (0, import_react.useEffect)(() => {
+    containerRef?.current?.addEventListener("mousemove", handleMouseMove);
+    containerRef?.current?.addEventListener("wheel", handleScroll);
+    return () => {
+      containerRef?.current?.removeEventListener("mousemove", handleMouseMove);
+      containerRef?.current?.removeEventListener("wheel", handleScroll);
+    };
+  }, [containerRef, handleMouseMove, handleScroll]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSVGWrapper, {
     ref: containerRef,
     onKeyDown: onInputKeyDown,
@@ -93,7 +105,6 @@ const ChartContainer = ({ children }) => {
     onFocus: handleOnFocus,
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler,
-    onMouseMove: handleMouseMove,
     onMouseUp: handleMouseUp,
     onMouseDown: (e) => e.preventDefault(),
     isGrabbed,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/ChartContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useCallback, useRef } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\ninterface ChartContainerT {\n  children: JSX.Element | JSX.Element[] | string | string[];\n}\nexport const ChartContainer: React.ComponentType<ChartContainerT> = ({ children }) => {\n  const {\n    props: { width, height },\n    containerRef,\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    oldLastPosition,\n    setIsScrollbarVisible,\n  } = useContext(ChartContext);\n\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n  }, [setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleMouseMove = useCallback(\n    (e: React.MouseEvent) => {\n      if (!isGrabbed) return;\n      setActivePoint('');\n      const newPosition = oldLastPosition?.current + e.clientX - startPosition;\n      if (newPosition < 0) setXScrollbarPosition(0);\n      else if (newPosition > innerWidth - innerWidth / containerRatio)\n        setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n      else setXScrollbarPosition(newPosition);\n    },\n    [isGrabbed, setActivePoint, oldLastPosition, startPosition, setXScrollbarPosition, innerWidth, containerRatio],\n  );\n\n  const handleMouseUp = useCallback(() => {\n    oldLastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [oldLastPosition, setIsGrabbed, xScrollbarPosition]);\n  const key = `translate(${internalMargin.left},${internalMargin.top})`;\n  return (\n    <StyledSVGWrapper\n      key={key}\n      ref={containerRef}\n      onKeyDown={onInputKeyDown}\n      aria-hidden=\"true\"\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: width }}\n    >\n      <svg ref={svgRef} width={width} height={height}>\n        <g>\n          <Legend />\n        </g>\n        <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n          {children}\n        </g>\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAuD;AACvD,oBAAiC;AAEjC,0BAA6B;AAC7B,mCAAsC;AACtC,oBAAuB;AAIhB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;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,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,EAAE,gBAAgB,cAAc,cAAc,QAAI,oDAAsB;AAE9E,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAC1B,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,oBAAgB,EAAE;AAClB,oBAAgB,EAAE;AAClB,0BAAsB,KAAK;AAC3B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,uBAAuB,iBAAiB,eAAe,CAAC;AAE1E,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,UAAI,CAAC;AAAW;AAChB,qBAAe,EAAE;AACjB,YAAM,cAAc,iBAAiB,UAAU,EAAE,UAAU;AAC3D,UAAI,cAAc;AAAG,8BAAsB,CAAC;AAAA,eACnC,cAAc,aAAa,aAAa;AAC/C,8BAAsB,aAAa,aAAa,cAAc;AAAA;AAC3D,8BAAsB,WAAW;AAAA,IACxC;AAAA,IACA,CAAC,WAAW,gBAAgB,iBAAiB,eAAe,uBAAuB,YAAY,cAAc;AAAA,EAC/G;AAEA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,oBAAgB,UAAU;AAC1B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,iBAAiB,cAAc,kBAAkB,CAAC;AACtD,QAAM,MAAM,aAAa,eAAe,QAAQ,eAAe;AAC/D,SACE,4CAAC;AAAA,IAEC,KAAK;AAAA,IACL,WAAW;AAAA,IACX,eAAY;AAAA,IACZ,UAAU,cAAc,KAAK;AAAA,IAC7B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc;AAAA,IACd,cAAc;AAAA,IACd,aAAa;AAAA,IACb,WAAW;AAAA,IACX,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,IACrC;AAAA,IACA,OAAO,EAAE,MAAa;AAAA,IAEtB,uDAAC;AAAA,MAAI,KAAK;AAAA,MAAQ;AAAA,MAAc;AAAA,MAC9B;AAAA,oDAAC;AAAA,UACC,sDAAC,wBAAO;AAAA,SACV;AAAA,QACA,4CAAC;AAAA,UAAE,WAAU;AAAA,UAAY,WAAW,aAAa,eAAe,QAAQ,eAAe;AAAA,UACpF;AAAA,SACH;AAAA;AAAA,KACF;AAAA,KAtBK,GAuBP;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\ninterface ChartContainerT {\n  children: JSX.Element | JSX.Element[] | string | string[];\n}\nexport const ChartContainer: React.ComponentType<ChartContainerT> = ({ children }) => {\n  const {\n    props: { width, height },\n    containerRef,\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    oldLastPosition,\n    setIsScrollbarVisible,\n  } = useContext(ChartContext);\n\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n  }, [setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleMouseMove = useCallback(\n    (e: React.MouseEvent) => {\n      if (!isGrabbed) return;\n      setActivePoint('');\n      const newPosition = oldLastPosition?.current + e.clientX - startPosition;\n      if (newPosition < 0) setXScrollbarPosition(0);\n      else if (newPosition > innerWidth - innerWidth / containerRatio)\n        setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n      else setXScrollbarPosition(newPosition);\n    },\n    [isGrabbed, setActivePoint, oldLastPosition, startPosition, setXScrollbarPosition, innerWidth, containerRatio],\n  );\n  const handleMouseUp = useCallback(() => {\n    oldLastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [oldLastPosition, setIsGrabbed, xScrollbarPosition]);\n  const key = `translate(${internalMargin.left},${internalMargin.top})`;\n\n  const handleScroll = useCallback((e) => {\n    e.preventDefault();\n    console.log('scroll2');\n  }, []);\n\n  useEffect(() => {\n    containerRef?.current?.addEventListener('mousemove', handleMouseMove);\n    containerRef?.current?.addEventListener('wheel', handleScroll);\n\n    return () => {\n      containerRef?.current?.removeEventListener('mousemove', handleMouseMove);\n      containerRef?.current?.removeEventListener('wheel', handleScroll);\n    };\n  }, [containerRef, handleMouseMove, handleScroll]);\n\n  return (\n    <StyledSVGWrapper\n      key={key}\n      ref={containerRef}\n      onKeyDown={onInputKeyDown}\n      aria-hidden=\"true\"\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      // // onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: width }}\n    >\n      <svg ref={svgRef} width={width} height={height}>\n        <g>\n          <Legend />\n        </g>\n        <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n          {children}\n        </g>\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA0D;AAC1D,oBAAiC;AAEjC,0BAA6B;AAC7B,mCAAsC;AACtC,oBAAuB;AAIhB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;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,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,EAAE,gBAAgB,cAAc,cAAc,QAAI,oDAAsB;AAE9E,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAC1B,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,oBAAgB,EAAE;AAClB,oBAAgB,EAAE;AAClB,0BAAsB,KAAK;AAC3B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,uBAAuB,iBAAiB,eAAe,CAAC;AAE1E,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,UAAI,CAAC;AAAW;AAChB,qBAAe,EAAE;AACjB,YAAM,cAAc,iBAAiB,UAAU,EAAE,UAAU;AAC3D,UAAI,cAAc;AAAG,8BAAsB,CAAC;AAAA,eACnC,cAAc,aAAa,aAAa;AAC/C,8BAAsB,aAAa,aAAa,cAAc;AAAA;AAC3D,8BAAsB,WAAW;AAAA,IACxC;AAAA,IACA,CAAC,WAAW,gBAAgB,iBAAiB,eAAe,uBAAuB,YAAY,cAAc;AAAA,EAC/G;AACA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,oBAAgB,UAAU;AAC1B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,iBAAiB,cAAc,kBAAkB,CAAC;AACtD,QAAM,MAAM,aAAa,eAAe,QAAQ,eAAe;AAE/D,QAAM,mBAAe,0BAAY,CAAC,MAAM;AACtC,MAAE,eAAe;AACjB,YAAQ,IAAI,SAAS;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,kBAAc,SAAS,iBAAiB,aAAa,eAAe;AACpE,kBAAc,SAAS,iBAAiB,SAAS,YAAY;AAE7D,WAAO,MAAM;AACX,oBAAc,SAAS,oBAAoB,aAAa,eAAe;AACvE,oBAAc,SAAS,oBAAoB,SAAS,YAAY;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,cAAc,iBAAiB,YAAY,CAAC;AAEhD,SACE,4CAAC;AAAA,IAEC,KAAK;AAAA,IACL,WAAW;AAAA,IACX,eAAY;AAAA,IACZ,UAAU,cAAc,KAAK;AAAA,IAC7B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc;AAAA,IACd,cAAc;AAAA,IAEd,WAAW;AAAA,IACX,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,IACrC;AAAA,IACA,OAAO,EAAE,MAAa;AAAA,IAEtB,uDAAC;AAAA,MAAI,KAAK;AAAA,MAAQ;AAAA,MAAc;AAAA,MAC9B;AAAA,oDAAC;AAAA,UACC,sDAAC,wBAAO;AAAA,SACV;AAAA,QACA,4CAAC;AAAA,UAAE,WAAU;AAAA,UAAY,WAAW,aAAa,eAAe,QAAQ,eAAe;AAAA,UACpF;AAAA,SACH;AAAA;AAAA,KACF;AAAA,KAtBK,GAuBP;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Legend/BottomLegend.js

@@ -32,6 +32,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_d3 = require("d3");
 var import_ChartContext = require("../../ChartContext");
+var import_LegendItem = require("./LegendItem");
 const BottomLegend = () => {
   const {
     colorScale,
@@ -76,24 +77,13 @@ const BottomLegend = () => {
             width: 1,
             fill: "transparent"
           }),
-          colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-            className: "cell",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-                fill: colorScale(domainValue),
-                r: 4
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
-                x: 10,
-                dy: ".32em",
-                children: domainValue
-              })
-            ]
-          }))
+          colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, {
+            domainValue
+          }, domainValue))
         ]
       })
     }),
-    [colorScale, height, setBottomLegend, xTransform]
+    [colorScale, height, internalMargin.left, setBottomLegend, xTransform]
   );
   return render;
 };