@elliemae/ds-dataviz 3.14.4 → 3.14.7

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 type React from 'react';\nimport { createContext, createRef } from 'react';\nimport type { ScaleLinear, ScaleBand, ScaleOrdinal } from 'd3';\nimport { scaleLinear, scaleBand, scaleOrdinal } from 'd3';\nimport type { DSChartT } from './react-desc-prop-types';\nimport { defaultProps } from './react-desc-prop-types';\ninterface ContextT {\n  props: DSChartT.Props;\n  originalSeries: DSChartT.SeriesT;\n  currentData: DSChartT.InternalData;\n  xScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  yScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  y2Scale: ScaleLinear<number, number, never>;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: DSChartT.InternalDatum | null;\n  containerRef: HTMLDivElement | null;\n  setContainerRef: React.Dispatch<React.SetStateAction<SVGElement | null>>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, string>;\n  axisLeftRef: SVGGElement | null;\n  scrapperPosY: string;\n  scrapperPosX: string;\n  xScrollbarPosition: number;\n  isGrabbed: boolean;\n  startPosition: number;\n  isScrollbarVisible: boolean;\n  lastPosition: React.MutableRefObject<number>;\n  containerRatio: number;\n  internalMargin: {\n    bottom: number;\n    top: number;\n    right: number;\n    left: number;\n  };\n  toolbarHeight: number;\n  leftLegendHeight: number;\n  rightLegendHeight: number;\n  leftLabelHeight: number;\n  leftLegendWidth: number;\n  leftLegend: SVGGElement;\n  bottomLegend: SVGGElement;\n  rightLegend: SVGGElement;\n  axisBottomHeight: number;\n  bottomLabelHeight: number;\n  rightLabelWidth: number;\n  axisRightWidth: number;\n  isHorizontal: boolean;\n  leftLabel: SVGGElement;\n  chartId: string;\n  hiddenSeries: string[];\n  stackedData: DSChartT.StackedSeriesByGroupT;\n  width: number;\n  height: number;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getBandwidth: () => number;\n  setScrapperPosY: React.Dispatch<React.SetStateAction<string>>;\n  setScrapperPosX: React.Dispatch<React.SetStateAction<string>>;\n  setXScrollbarPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsGrabbed: React.Dispatch<React.SetStateAction<boolean>>;\n  setStartPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsScrollbarVisible: React.Dispatch<React.SetStateAction<boolean>>;\n  setAxisLeftRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setTopLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisBottomRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisRightRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getXValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getYValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getXValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  getYValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  setHiddenSeries: React.Dispatch<React.SetStateAction<string[]>>;\n  getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  setContainerRatio: React.Dispatch<React.SetStateAction<number>>;\n  setToolbarRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n}\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: null,\n  setActivePoint: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\nexport const ChartContext = createContext(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyC;AAEzC,gBAAqD;AAErD,mCAA6B;AA+E7B,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,YAAQ,qBAAU;AAAA,EAClB,YAAQ,uBAAY;AAAA,EACpB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,kBAAc,wBAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,gBAAY,wBAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AACO,MAAM,mBAAe,4BAAc,cAAc;",
+  "sourcesContent": ["import type React from 'react';\nimport { createContext, createRef } from 'react';\nimport type { ScaleBand, ScaleOrdinal } from 'd3';\nimport { scaleLinear, scaleBand, scaleOrdinal } from 'd3';\nimport type { DSChartT } from './react-desc-prop-types';\nimport { defaultProps } from './react-desc-prop-types';\nimport type { ScaleT } from './scales';\ninterface ContextT {\n  props: DSChartT.Props;\n  originalSeries: DSChartT.SeriesT;\n  currentData: DSChartT.InternalData;\n  xScale: ScaleT;\n  yScale: ScaleT;\n  y2Scale: ScaleT;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: DSChartT.InternalDatum | null;\n  containerRef: HTMLDivElement | null;\n  setContainerRef: React.Dispatch<React.SetStateAction<SVGElement | null>>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, string>;\n  axisLeftRef: SVGGElement | null;\n  scrapperPosY: string;\n  scrapperPosX: string;\n  xScrollbarPosition: number;\n  isGrabbed: boolean;\n  startPosition: number;\n  isScrollbarVisible: boolean;\n  lastPosition: React.MutableRefObject<number>;\n  containerRatio: number;\n  internalMargin: {\n    bottom: number;\n    top: number;\n    right: number;\n    left: number;\n  };\n  toolbarHeight: number;\n  leftLegendHeight: number;\n  rightLegendHeight: number;\n  leftLabelHeight: number;\n  leftLegendWidth: number;\n  leftLabelWidth: number;\n  leftLegend: SVGGElement;\n  bottomLegend: SVGGElement;\n  rightLegend: SVGGElement;\n  axisBottomHeight: number;\n  bottomLabelHeight: number;\n  rightLabelWidth: number;\n  axisRightWidth: number;\n  isHorizontal: boolean;\n  leftLabel: SVGGElement;\n  chartId: string;\n  hiddenSeries: string[];\n  stackedData: DSChartT.StackedSeriesByGroupT;\n  width: number;\n  height: number;\n  isZooming: boolean;\n  zoomStartingPosition: number;\n  movingPosition: number;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getBandwidth: () => number;\n  setScrapperPosY: React.Dispatch<React.SetStateAction<string>>;\n  setScrapperPosX: React.Dispatch<React.SetStateAction<string>>;\n  setXScrollbarPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsGrabbed: React.Dispatch<React.SetStateAction<boolean>>;\n  setStartPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsScrollbarVisible: React.Dispatch<React.SetStateAction<boolean>>;\n  setAxisLeftRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setTopLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisBottomRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisRightRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getXValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getYValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getXValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  getYValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  setHiddenSeries: React.Dispatch<React.SetStateAction<string[]>>;\n  getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  setContainerRatio: React.Dispatch<React.SetStateAction<number>>;\n  setToolbarRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setMovingPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsZooming: React.Dispatch<React.SetStateAction<boolean>>;\n  setZoomStartingPosition: React.Dispatch<React.SetStateAction<number>>;\n}\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: null,\n  setActivePoint: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\nexport const ChartContext = createContext(defaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAyC;AAEzC,gBAAqD;AAErD,mCAA6B;AAuF7B,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,YAAQ,qBAAU;AAAA,EAClB,YAAQ,uBAAY;AAAA,EACpB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,kBAAc,wBAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,gBAAY,wBAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AACO,MAAM,mBAAe,4BAAc,cAAc;",
   "names": []
 }

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

@@ -159,7 +159,10 @@ const useChart = (props) => {
     })),
     [defaultScale, hiddenSeries, originalSeries]
   );
-  const stackedData = (0, import_react.useMemo)(() => (0, import_helpers.stackData)(groupsStacked, currentData), [groupsStacked, currentData]);
+  const stackedData = (0, import_react.useMemo)(
+    () => (0, import_helpers.stackData)(groupsStacked, originalSeries, hiddenSeries),
+    [groupsStacked, originalSeries, hiddenSeries]
+  );
   const groups = (0, import_react.useMemo)(() => currentData.map((serie) => serie.name), [currentData]);
   const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = (0, import_useScales.useScales)({
     props,
@@ -171,7 +174,7 @@ const useChart = (props) => {
     currentData,
     containerRatio
   });
-  const isHorizontal = (0, import_react.useMemo)(() => !!yScale.bandwidth, [yScale]);
+  const isHorizontal = (0, import_react.useMemo)(() => yScale?.type === "BAND", [yScale]);
   const { getXValue, getYValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted } = (0, import_useGetters.useGetters)({
     xAxis,
     yAxis,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useChart.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { debounce } from 'lodash';\nimport type { ScaleBand } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { defaultProps, propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { useValidateProps } from './useValidateProps';\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n  const [dimensions, setDimensions] = useState<number>(0);\n\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver(\n        debounce((entries: ResizeObserverConstructorEntries) => {\n          entries.forEach((entry) => {\n            setDimensions(Math.ceil(entry.contentRect.width));\n          });\n        }, 200),\n      );\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [ref]);\n  return dimensions;\n};\n\nexport const useChart = (props: DSChartT.Props) => {\n  useValidateProps(props, propTypes);\n\n  // const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;\n\n  const originalSeries = useMemo(() => {\n    if (series.length === 0) {\n      return defaultProps.series;\n    }\n    return series;\n  }, [series]);\n  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);\n  const svgRef = useRef(null);\n\n  const dimensionWidth = useResizeObserver(containerRef);\n  const width = useMemo(() => userWidth ?? dimensionWidth ?? 0, [dimensionWidth, userWidth]);\n\n  const height = useMemo(() => userHeight ?? 500, [userHeight]);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  // zoom\n\n  const [isZooming, setIsZooming] = useState(false);\n  const [zoomStartingPosition, setZoomStartingPosition] = useState(0);\n  const [movingPosition, setMovingPosition] = useState(0);\n\n  //\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 [containerRatio, setContainerRatio] = useState(\n    props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1,\n  );\n\n  const lastPosition = useRef(0);\n\n  const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n  const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n  const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n  const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n  const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n  const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n  const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n  const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n  const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n  const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n  const [toolbarRef, setToolbarRef] = useState<SVGGElement | null>(null);\n\n  const {\n    toolbarHeight,\n    axisBottomHeight,\n    axisRightWidth,\n    bottomLabelHeight,\n    internalMargin,\n    leftLegendWidth,\n    rightLabelWidth,\n    leftLabelHeight,\n    rightLegendHeight,\n    bottomLegendWidth,\n    leftLabelWidth,\n    axisLeftWidth,\n    topLegendHeight,\n    leftLegendHeight,\n  } = useInternalMargins({\n    axisLeftRef,\n    axisBottomRef,\n    axisRightRef,\n    leftLabel,\n    leftLegend,\n    rightLegend,\n    topLegend,\n    bottomLegend,\n    rightLabel,\n    bottomLabel,\n    toolbarRef,\n  });\n\n  const innerWidth = useMemo(\n    () => width - internalMargin.left - internalMargin.right,\n    [internalMargin.left, internalMargin.right, width],\n  );\n  const innerHeight = useMemo(\n    () => height - internalMargin.top - internalMargin.bottom,\n    [internalMargin.top, internalMargin.bottom, height],\n  );\n\n  const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n  const defaultScale = useMemo(() => {\n    if (yAxis.type === 'band') {\n      return 'x';\n    }\n\n    if ([undefined, 'band'].includes(xAxis.type)) {\n      return 'y';\n    }\n\n    return 'y';\n  }, [xAxis.type, yAxis.type]);\n  const currentData = useMemo(\n    () =>\n      originalSeries\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\n          // we set a default on the scale if the user do not pass it\n          scale: d.scale || defaultScale,\n          key: `${d.name}-${i}`,\n          data: d.data\n            .map((value, index) => ({\n              key: `${d.name}-${i}-${index}`,\n              value,\n              position: index,\n              serie: d.name,\n              scale: d.scale,\n            }))\n            .filter((datum) => datum.value !== null && datum.value !== undefined), // basically converting from DSChartT.SeriesT to DSChartT.InternalData...\n        })) as DSChartT.InternalData,\n    [defaultScale, hiddenSeries, originalSeries],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n  // @TODO we need to create a logic to get this from both axis\n  // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    originalSeries,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => !!(yScale as ScaleBand<string>).bandwidth, [yScale]);\n\n  const { getXValue, getYValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted } = useGetters({\n    xAxis,\n    yAxis,\n    isHorizontal,\n    xScale,\n    yScale,\n    y2Scale,\n  });\n  const chartId = useMemo(() => uid(6), []);\n\n  return useMemo(\n    () => ({\n      props,\n      originalSeries,\n      isZooming,\n      setIsZooming,\n      zoomStartingPosition,\n      setZoomStartingPosition,\n      setMovingPosition,\n      movingPosition,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      svgRef,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      setScrapperPosY,\n      scrapperPosX,\n      setScrapperPosX,\n      activePoint,\n      setActivePoint,\n      activeSerie,\n      setActiveSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      setContainerRef,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      lastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      rightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      axisBottomHeight,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXScaleValue,\n      getYScaleValue,\n      getYValueFormatted,\n      getXValueFormatted,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n      height,\n      width,\n      setContainerRatio,\n      toolbarHeight,\n      setToolbarRef,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n      bottomLegend,\n      leftLabelWidth,\n      axisLeftWidth,\n      topLegendHeight,\n      leftLegendHeight,\n    }),\n    [\n      props,\n      originalSeries,\n      isZooming,\n      zoomStartingPosition,\n      movingPosition,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      scrapperPosX,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      isGrabbed,\n      startPosition,\n      isScrollbarVisible,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      rightLegend,\n      axisBottomHeight,\n      getXScaleValue,\n      getYScaleValue,\n      getYValueFormatted,\n      getXValueFormatted,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      height,\n      width,\n      toolbarHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n      bottomLegend,\n      leftLabelWidth,\n      axisLeftWidth,\n      topLegendHeight,\n      leftLegendHeight,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAkE;AAClE,iBAAoB;AACpB,oBAAyB;AAGzB,mCAAwC;AACxC,uBAA0B;AAC1B,qBAA0B;AAC1B,gCAAmC;AACnC,wBAA2B;AAC3B,sCAA2B;AAC3B,8BAAiC;AAGjC,MAAM,oBAAoB,CAAC,QAAwC;AACjE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAiB,CAAC;AAEtD,8BAAU,MAAM;AACd,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI,gCAAAA;AAAA,YACzB,wBAAS,CAAC,YAA8C;AACtD,kBAAQ,QAAQ,CAAC,UAAU;AACzB,0BAAc,KAAK,KAAK,MAAM,YAAY,KAAK,CAAC;AAAA,UAClD,CAAC;AAAA,QACH,GAAG,GAAG;AAAA,MACR;AACA,qBAAe,QAAQ,aAAa;AAEpC,aAAO,MAAM;AACX,uBAAe,UAAU,aAAa;AAAA,MACxC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,UAA0B;AACjD,gDAAiB,OAAO,sCAAS;AAGjC,QAAM,EAAE,QAAQ,OAAO,OAAO,OAAO,WAAW,QAAQ,YAAY,QAAQ,cAAc,IAAI;AAE9F,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,OAAO,WAAW,GAAG;AACvB,aAAO,0CAAa;AAAA,IACtB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AACX,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAgC,IAAI;AAC5E,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,iBAAiB,kBAAkB,YAAY;AACrD,QAAM,YAAQ,sBAAQ,MAAM,aAAa,kBAAkB,GAAG,CAAC,gBAAgB,SAAS,CAAC;AAEzF,QAAM,aAAS,sBAAQ,MAAM,cAAc,KAAK,CAAC,UAAU,CAAC;AAE5D,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,CAAC;AAIpD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,CAAC,sBAAsB,uBAAuB,QAAI,uBAAS,CAAC;AAClE,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAAS,CAAC;AAItD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,IAAI;AACnD,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AACjD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,EAAE;AACnD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,EAAE;AACnD,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,CAAC;AAC9D,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,CAAC,gBAAgB,iBAAiB,QAAI;AAAA,IAC1C,OAAO,MAAM,UAAU,cAAc,SAAS,OAAO,MAAM,UAAU,cAAc,SAAS;AAAA,EAC9F;AAEA,QAAM,mBAAe,qBAAO,CAAC;AAE7B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA6B,IAAI;AACvE,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAA6B,IAAI;AAC3E,QAAM,CAAC,cAAc,eAAe,QAAI,uBAA6B,IAAI;AAEzE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA6B,IAAI;AACrE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA6B,IAAI;AACvE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA6B,IAAI;AACnE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAA6B,IAAI;AAEzE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA6B,IAAI;AACrE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAA6B,IAAI;AACnE,QAAM,CAAC,aAAa,cAAc,QAAI,uBAA6B,IAAI;AAEvE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA6B,IAAI;AAErE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,8CAAmB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,iBAAa;AAAA,IACjB,MAAM,QAAQ,eAAe,OAAO,eAAe;AAAA,IACnD,CAAC,eAAe,MAAM,eAAe,OAAO,KAAK;AAAA,EACnD;AACA,QAAM,kBAAc;AAAA,IAClB,MAAM,SAAS,eAAe,MAAM,eAAe;AAAA,IACnD,CAAC,eAAe,KAAK,eAAe,QAAQ,MAAM;AAAA,EACpD;AAEA,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAmB,CAAC,CAAC;AAE7D,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,MAAM,SAAS,QAAQ;AACzB,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,QAAW,MAAM,EAAE,SAAS,MAAM,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAC3B,QAAM,kBAAc;AAAA,IAClB,MACE,eACG,OAAO,CAAC,UAAU,CAAC,aAAa,SAAS,MAAM,IAAI,CAAC,EACpD,IAAI,CAAC,GAAG,OAAO;AAAA,MACd,GAAG;AAAA,MAEH,OAAO,EAAE,SAAS;AAAA,MAClB,KAAK,GAAG,EAAE,QAAQ;AAAA,MAClB,MAAM,EAAE,KACL,IAAI,CAAC,OAAO,WAAW;AAAA,QACtB,KAAK,GAAG,EAAE,QAAQ,KAAK;AAAA,QACvB;AAAA,QACA,UAAU;AAAA,QACV,OAAO,EAAE;AAAA,QACT,OAAO,EAAE;AAAA,MACX,EAAE,EACD,OAAO,CAAC,UAAU,MAAM,UAAU,QAAQ,MAAM,UAAU,MAAS;AAAA,IACxE,EAAE;AAAA,IACN,CAAC,cAAc,cAAc,cAAc;AAAA,EAC7C;AAEA,QAAM,kBAAc,sBAAQ,UAAM,0BAAU,eAAe,WAAW,GAAG,CAAC,eAAe,WAAW,CAAC;AAKrG,QAAM,aAAS,sBAAQ,MAAM,YAAY,IAAI,CAAC,UAAU,MAAM,IAAI,GAAG,CAAC,WAAW,CAAC;AAElF,QAAM,EAAE,QAAQ,QAAQ,SAAS,eAAe,YAAY,aAAa,QAAI,4BAAU;AAAA,IACrF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAe,sBAAQ,MAAM,CAAC,CAAE,OAA6B,WAAW,CAAC,MAAM,CAAC;AAEtF,QAAM,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB,QAAI,8BAAW;AAAA,IAClH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,cAAU,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAExC,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { debounce } from 'lodash';\nimport type { ScaleBand } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { defaultProps, propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { useValidateProps } from './useValidateProps';\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n  const [dimensions, setDimensions] = useState<number>(0);\n\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver(\n        debounce((entries: ResizeObserverConstructorEntries) => {\n          entries.forEach((entry) => {\n            setDimensions(Math.ceil(entry.contentRect.width));\n          });\n        }, 200),\n      );\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [ref]);\n  return dimensions;\n};\n\nexport const useChart = (props: DSChartT.Props) => {\n  useValidateProps(props, propTypes);\n\n  // const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;\n\n  const originalSeries = useMemo(() => {\n    if (series.length === 0) {\n      return defaultProps.series;\n    }\n    return series;\n  }, [series]);\n  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);\n  const svgRef = useRef(null);\n\n  const dimensionWidth = useResizeObserver(containerRef);\n  const width = useMemo(() => userWidth ?? dimensionWidth ?? 0, [dimensionWidth, userWidth]);\n\n  const height = useMemo(() => userHeight ?? 500, [userHeight]);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  // zoom\n\n  const [isZooming, setIsZooming] = useState(false);\n  const [zoomStartingPosition, setZoomStartingPosition] = useState(0);\n  const [movingPosition, setMovingPosition] = useState(0);\n\n  //\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 [containerRatio, setContainerRatio] = useState(\n    props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1,\n  );\n\n  const lastPosition = useRef(0);\n\n  const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n  const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n  const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n  const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n  const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n  const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n  const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n  const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n  const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n  const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n  const [toolbarRef, setToolbarRef] = useState<SVGGElement | null>(null);\n\n  const {\n    toolbarHeight,\n    axisBottomHeight,\n    axisRightWidth,\n    bottomLabelHeight,\n    internalMargin,\n    leftLegendWidth,\n    rightLabelWidth,\n    leftLabelHeight,\n    rightLegendHeight,\n    bottomLegendWidth,\n    leftLabelWidth,\n    axisLeftWidth,\n    topLegendHeight,\n    leftLegendHeight,\n  } = useInternalMargins({\n    axisLeftRef,\n    axisBottomRef,\n    axisRightRef,\n    leftLabel,\n    leftLegend,\n    rightLegend,\n    topLegend,\n    bottomLegend,\n    rightLabel,\n    bottomLabel,\n    toolbarRef,\n  });\n\n  const innerWidth = useMemo(\n    () => width - internalMargin.left - internalMargin.right,\n    [internalMargin.left, internalMargin.right, width],\n  );\n  const innerHeight = useMemo(\n    () => height - internalMargin.top - internalMargin.bottom,\n    [internalMargin.top, internalMargin.bottom, height],\n  );\n\n  const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n  const defaultScale = useMemo(() => {\n    if (yAxis.type === 'band') {\n      return 'x';\n    }\n\n    if ([undefined, 'band'].includes(xAxis.type)) {\n      return 'y';\n    }\n\n    return 'y';\n  }, [xAxis.type, yAxis.type]);\n  const currentData = useMemo(\n    () =>\n      originalSeries\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\n          // we set a default on the scale if the user do not pass it\n          scale: d.scale || defaultScale,\n          key: `${d.name}-${i}`,\n          data: d.data\n            .map((value, index) => ({\n              key: `${d.name}-${i}-${index}`,\n              value,\n              position: index,\n              serie: d.name,\n              scale: d.scale,\n            }))\n            .filter((datum) => datum.value !== null && datum.value !== undefined), // basically converting from DSChartT.SeriesT to DSChartT.InternalData...\n        })) as DSChartT.InternalData,\n    [defaultScale, hiddenSeries, originalSeries],\n  );\n\n  const stackedData = useMemo(\n    () => stackData(groupsStacked, originalSeries, hiddenSeries),\n    [groupsStacked, originalSeries, hiddenSeries],\n  );\n\n  // @TODO we need to create a logic to get this from both axis\n  // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    originalSeries,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => yScale?.type === 'BAND', [yScale]);\n\n  const { getXValue, getYValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted } = useGetters({\n    xAxis,\n    yAxis,\n    isHorizontal,\n    xScale,\n    yScale,\n    y2Scale,\n  });\n  const chartId = useMemo(() => uid(6), []);\n\n  return useMemo(\n    () => ({\n      props,\n      originalSeries,\n      isZooming,\n      setIsZooming,\n      zoomStartingPosition,\n      setZoomStartingPosition,\n      setMovingPosition,\n      movingPosition,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      svgRef,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      setScrapperPosY,\n      scrapperPosX,\n      setScrapperPosX,\n      activePoint,\n      setActivePoint,\n      activeSerie,\n      setActiveSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      setContainerRef,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      lastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      rightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      axisBottomHeight,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXScaleValue,\n      getYScaleValue,\n      getYValueFormatted,\n      getXValueFormatted,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n      height,\n      width,\n      setContainerRatio,\n      toolbarHeight,\n      setToolbarRef,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n      bottomLegend,\n      leftLabelWidth,\n      axisLeftWidth,\n      topLegendHeight,\n      leftLegendHeight,\n    }),\n    [\n      props,\n      originalSeries,\n      isZooming,\n      zoomStartingPosition,\n      movingPosition,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      scrapperPosX,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      isGrabbed,\n      startPosition,\n      isScrollbarVisible,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      rightLegend,\n      axisBottomHeight,\n      getXScaleValue,\n      getYScaleValue,\n      getYValueFormatted,\n      getXValueFormatted,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      height,\n      width,\n      toolbarHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n      bottomLegend,\n      leftLabelWidth,\n      axisLeftWidth,\n      topLegendHeight,\n      leftLegendHeight,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["ResizeObserver"]
 }

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

@@ -73,9 +73,9 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
       if (!datum)
         return null;
       if (xAxis.type === "linear") {
-        return xScale(getXValue(datum));
+        return xScale.get(getXValue(datum));
       }
-      return xScale(getXValue(datum));
+      return xScale.get(getXValue(datum));
     },
     [getXValue, xAxis.type, xScale]
   );
@@ -85,9 +85,9 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
         return null;
       const finalYScale = datum?.scale === "y2" ? y2Scale : yScale;
       if (yAxis.type === "band") {
-        return finalYScale(getYValue(datum));
+        return finalYScale.get(getYValue(datum));
       }
-      return finalYScale(getYValue(datum));
+      return finalYScale.get(getYValue(datum));
     },
     [getYValue, y2Scale, yAxis.type, yScale]
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useGetters.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useMemo } from 'react';\nimport type { ScaleBand, ScaleLinear } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface UseGettersT {\n  xAxis: DSChartT.AxisT;\n  yAxis: DSChartT.AxisT;\n  isHorizontal: boolean;\n  xScale: DSChartT.Scales;\n  yScale: DSChartT.Scales;\n  y2Scale: DSChartT.Scales;\n}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }: UseGettersT) => {\n  const getXValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n      if (!isHorizontal) {\n        if (xAxis?.cols?.[datum.position]) {\n          return xAxis?.cols?.[datum.position];\n        }\n        if (typeof datum.value === 'object') return datum.value?.x;\n        return datum.position.toString();\n      }\n      if (typeof datum.value === 'number') {\n        return datum.value;\n      }\n      return datum.value?.x;\n    },\n    [isHorizontal, xAxis?.cols],\n  );\n\n  const getYValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      if (!isHorizontal) {\n        if (typeof datum.value === 'number') {\n          return datum.value;\n        }\n        return datum.value?.y;\n      }\n      if (yAxis?.cols?.[datum.position]) {\n        return yAxis?.cols?.[datum.position];\n      }\n      if (typeof datum.value === 'object') return datum.value?.y;\n      return datum.position.toString();\n    },\n    [isHorizontal, yAxis?.cols],\n  );\n\n  const getXScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      if (xAxis.type === 'linear') {\n        return (xScale as ScaleLinear<number, number, never>)(getXValue(datum) as number);\n      }\n      return (xScale as ScaleBand<string>)(getXValue(datum) as string);\n    },\n    [getXValue, xAxis.type, xScale],\n  );\n\n  const getYScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const finalYScale = datum?.scale === 'y2' ? y2Scale : yScale;\n      if (yAxis.type === 'band') {\n        return (finalYScale as ScaleBand<string>)(getYValue(datum) as string);\n      }\n      return (finalYScale as ScaleLinear<number, number, never>)(getYValue(datum) as number);\n    },\n    [getYValue, y2Scale, yAxis.type, yScale],\n  );\n\n  const getYValueFormatted = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const value = getYValue(datum);\n      if (typeof yAxis.tick?.tickFormat === 'function') return yAxis.tick.tickFormat(value);\n      return value;\n    },\n    [getYValue, yAxis.tick],\n  );\n\n  const getXValueFormatted = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const value = getXValue(datum);\n      if (typeof xAxis.tick?.tickFormat === 'function') return xAxis.tick.tickFormat(value);\n      return value;\n    },\n    [getXValue, xAxis.tick],\n  );\n\n  return useMemo(\n    () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted }),\n    [getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqC;AAY9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,QAAQ,QAAQ,MAAmB;AAClG,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AACnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,OAAO,MAAM,WAAW;AACjC,iBAAO,OAAO,OAAO,MAAM;AAAA,QAC7B;AACA,YAAI,OAAO,MAAM,UAAU;AAAU,iBAAO,MAAM,OAAO;AACzD,eAAO,MAAM,SAAS,SAAS;AAAA,MACjC;AACA,UAAI,OAAO,MAAM,UAAU,UAAU;AACnC,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,MAAM,UAAU,UAAU;AACnC,iBAAO,MAAM;AAAA,QACf;AACA,eAAO,MAAM,OAAO;AAAA,MACtB;AACA,UAAI,OAAO,OAAO,MAAM,WAAW;AACjC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AACA,UAAI,OAAO,MAAM,UAAU;AAAU,eAAO,MAAM,OAAO;AACzD,aAAO,MAAM,SAAS,SAAS;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,MAAM,SAAS,UAAU;AAC3B,eAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,MAClF;AACA,aAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,IACjE;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,cAAc,OAAO,UAAU,OAAO,UAAU;AACtD,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAQ,YAAkC,UAAU,KAAK,CAAW;AAAA,MACtE;AACA,aAAQ,YAAmD,UAAU,KAAK,CAAW;AAAA,IACvF;AAAA,IACA,CAAC,WAAW,SAAS,MAAM,MAAM,MAAM;AAAA,EACzC;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,aAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB;AAAA,IACtG,CAAC,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,kBAAkB;AAAA,EAC/F;AACF;",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useMemo } from 'react';\nimport type { ScaleBand, ScaleLinear } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface UseGettersT {\n  xAxis: DSChartT.AxisT;\n  yAxis: DSChartT.AxisT;\n  isHorizontal: boolean;\n  xScale: DSChartT.Scales;\n  yScale: DSChartT.Scales;\n  y2Scale: DSChartT.Scales;\n}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }: UseGettersT) => {\n  const getXValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n      if (!isHorizontal) {\n        if (xAxis?.cols?.[datum.position]) {\n          return xAxis?.cols?.[datum.position];\n        }\n        if (typeof datum.value === 'object') return datum.value?.x;\n        return datum.position.toString();\n      }\n      if (typeof datum.value === 'number') {\n        return datum.value;\n      }\n      return datum.value?.x;\n    },\n    [isHorizontal, xAxis?.cols],\n  );\n\n  const getYValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      if (!isHorizontal) {\n        if (typeof datum.value === 'number') {\n          return datum.value;\n        }\n        return datum.value?.y;\n      }\n      if (yAxis?.cols?.[datum.position]) {\n        return yAxis?.cols?.[datum.position];\n      }\n      if (typeof datum.value === 'object') return datum.value?.y;\n      return datum.position.toString();\n    },\n    [isHorizontal, yAxis?.cols],\n  );\n\n  const getXScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      if (xAxis.type === 'linear') {\n        return xScale.get(getXValue(datum) as number);\n      }\n      return xScale.get(getXValue(datum));\n    },\n    [getXValue, xAxis.type, xScale],\n  );\n\n  const getYScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const finalYScale = datum?.scale === 'y2' ? y2Scale : yScale;\n      if (yAxis.type === 'band') {\n        return (finalYScale as ScaleBand<string>).get(getYValue(datum) as string);\n      }\n      return (finalYScale as ScaleLinear<number, number, never>).get(getYValue(datum) as number);\n    },\n    [getYValue, y2Scale, yAxis.type, yScale],\n  );\n\n  const getYValueFormatted = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const value = getYValue(datum);\n      if (typeof yAxis.tick?.tickFormat === 'function') return yAxis.tick.tickFormat(value);\n      return value;\n    },\n    [getYValue, yAxis.tick],\n  );\n\n  const getXValueFormatted = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const value = getXValue(datum);\n      if (typeof xAxis.tick?.tickFormat === 'function') return xAxis.tick.tickFormat(value);\n      return value;\n    },\n    [getXValue, xAxis.tick],\n  );\n\n  return useMemo(\n    () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted }),\n    [getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqC;AAY9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,QAAQ,QAAQ,MAAmB;AAClG,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AACnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,OAAO,MAAM,WAAW;AACjC,iBAAO,OAAO,OAAO,MAAM;AAAA,QAC7B;AACA,YAAI,OAAO,MAAM,UAAU;AAAU,iBAAO,MAAM,OAAO;AACzD,eAAO,MAAM,SAAS,SAAS;AAAA,MACjC;AACA,UAAI,OAAO,MAAM,UAAU,UAAU;AACnC,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,gBAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,MAAM,UAAU,UAAU;AACnC,iBAAO,MAAM;AAAA,QACf;AACA,eAAO,MAAM,OAAO;AAAA,MACtB;AACA,UAAI,OAAO,OAAO,MAAM,WAAW;AACjC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AACA,UAAI,OAAO,MAAM,UAAU;AAAU,eAAO,MAAM,OAAO;AACzD,aAAO,MAAM,SAAS,SAAS;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,MAAM,SAAS,UAAU;AAC3B,eAAO,OAAO,IAAI,UAAU,KAAK,CAAW;AAAA,MAC9C;AACA,aAAO,OAAO,IAAI,UAAU,KAAK,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,QAAM,qBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,cAAc,OAAO,UAAU,OAAO,UAAU;AACtD,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAQ,YAAkC,IAAI,UAAU,KAAK,CAAW;AAAA,MAC1E;AACA,aAAQ,YAAmD,IAAI,UAAU,KAAK,CAAW;AAAA,IAC3F;AAAA,IACA,CAAC,WAAW,SAAS,MAAM,MAAM,MAAM;AAAA,EACzC;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,aAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB;AAAA,IACtG,CAAC,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,kBAAkB;AAAA,EAC/F;AACF;",
   "names": []
 }

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

@@ -64,11 +64,11 @@ const useInternalMargins = ({
   toolbarRef
 }) => {
   const { height: toolbarHeight } = useResizeObserver(toolbarRef, { offsetHeight: 10 });
-  const { width: axisRightWidth } = useResizeObserver(axisRightRef);
+  const { width: axisRightWidth } = useResizeObserver(axisRightRef, { offsetWidth: 10 });
   const { height: axisBottomHeight } = useResizeObserver(axisBottomRef, { offsetHeight: 20 });
   const { width: axisLeftWidth } = useResizeObserver(axisLeftRef, { offsetWidth: 10 });
   const { height: bottomLabelHeight } = useResizeObserver(bottomLabel, { offsetHeight: 10 });
-  const { width: rightLabelWidth } = useResizeObserver(rightLabel);
+  const { width: rightLabelWidth } = useResizeObserver(rightLabel, { offsetWidth: 10 });
   const { width: leftLabelWidth, height: leftLabelHeight } = useResizeObserver(leftLabel);
   const { height: topLegendHeight } = useResizeObserver(topLegend, { offsetHeight: 20 });
   const { height: bottomLegendHeight, width: bottomLegendWidth } = useResizeObserver(bottomLegend, {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useInternalMargins.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useEffect, useState } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ninterface UseInternalMarginsT {\n  axisLeftRef: SVGGElement | null;\n  axisBottomRef: SVGGElement | null;\n  axisRightRef: SVGGElement | null;\n  leftLegend: SVGGElement | null;\n  leftLabel: SVGGElement | null;\n  rightLegend: SVGGElement | null;\n  topLegend: SVGGElement | null;\n  bottomLegend: SVGGElement | null;\n  rightLabel: SVGGElement | null;\n  bottomLabel: SVGGElement | null;\n  toolbarRef: SVGGElement | null;\n}\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (\n  ref: SVGGElement | null,\n  { offsetHeight = 0, offsetWidth = 0 } = { offsetHeight: 0, offsetWidth: 0 },\n) => {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n        entries.forEach((entry) => {\n          setWidth(Math.ceil(entry.contentRect.width + offsetWidth));\n          setHeight(Math.ceil(entry.contentRect.height + offsetHeight));\n        });\n      });\n\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [offsetHeight, offsetWidth, ref]);\n  return { width, height };\n};\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  toolbarRef,\n}: UseInternalMarginsT) => {\n  // Toolbar\n  const { height: toolbarHeight } = useResizeObserver(toolbarRef, { offsetHeight: 10 });\n\n  // Axis\n  const { width: axisRightWidth } = useResizeObserver(axisRightRef);\n  const { height: axisBottomHeight } = useResizeObserver(axisBottomRef, { offsetHeight: 20 });\n  const { width: axisLeftWidth } = useResizeObserver(axisLeftRef, { offsetWidth: 10 });\n\n  // Labels\n  const { height: bottomLabelHeight } = useResizeObserver(bottomLabel, { offsetHeight: 10 });\n  const { width: rightLabelWidth } = useResizeObserver(rightLabel);\n  const { width: leftLabelWidth, height: leftLabelHeight } = useResizeObserver(leftLabel);\n\n  // Legends\n  const { height: topLegendHeight } = useResizeObserver(topLegend, { offsetHeight: 20 });\n  const { height: bottomLegendHeight, width: bottomLegendWidth } = useResizeObserver(bottomLegend, {\n    offsetHeight: 10,\n  });\n  const { width: rightLegendWidth, height: rightLegendHeight } = useResizeObserver(rightLegend);\n  const { width: leftLegendWidth, height: leftLegendHeight } = useResizeObserver(leftLegend, { offsetWidth: 20 });\n\n  const internalMargin = useMemo(\n    () => ({\n      bottom: axisBottomHeight + bottomLegendHeight + bottomLabelHeight || 10,\n      top: Math.max(topLegendHeight, toolbarHeight) || 10,\n      right: rightLabelWidth + axisRightWidth + rightLegendWidth || 10,\n      left: axisLeftWidth + leftLabelWidth + leftLegendWidth || 10,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      toolbarHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendHeight,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      toolbarHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    }),\n    [\n      axisBottomHeight,\n      toolbarHeight,\n      leftLegendHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    ],\n  );\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, useEffect, useState } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ninterface UseInternalMarginsT {\n  axisLeftRef: SVGGElement | null;\n  axisBottomRef: SVGGElement | null;\n  axisRightRef: SVGGElement | null;\n  leftLegend: SVGGElement | null;\n  leftLabel: SVGGElement | null;\n  rightLegend: SVGGElement | null;\n  topLegend: SVGGElement | null;\n  bottomLegend: SVGGElement | null;\n  rightLabel: SVGGElement | null;\n  bottomLabel: SVGGElement | null;\n  toolbarRef: SVGGElement | null;\n}\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (\n  ref: SVGGElement | null,\n  { offsetHeight = 0, offsetWidth = 0 } = { offsetHeight: 0, offsetWidth: 0 },\n) => {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n        entries.forEach((entry) => {\n          setWidth(Math.ceil(entry.contentRect.width + offsetWidth));\n          setHeight(Math.ceil(entry.contentRect.height + offsetHeight));\n        });\n      });\n\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [offsetHeight, offsetWidth, ref]);\n  return { width, height };\n};\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  toolbarRef,\n}: UseInternalMarginsT) => {\n  // Toolbar\n  const { height: toolbarHeight } = useResizeObserver(toolbarRef, { offsetHeight: 10 });\n\n  // Axis\n  const { width: axisRightWidth } = useResizeObserver(axisRightRef, { offsetWidth: 10 });\n  const { height: axisBottomHeight } = useResizeObserver(axisBottomRef, { offsetHeight: 20 });\n  const { width: axisLeftWidth } = useResizeObserver(axisLeftRef, { offsetWidth: 10 });\n\n  // Labels\n  const { height: bottomLabelHeight } = useResizeObserver(bottomLabel, { offsetHeight: 10 });\n  const { width: rightLabelWidth } = useResizeObserver(rightLabel, { offsetWidth: 10 });\n  const { width: leftLabelWidth, height: leftLabelHeight } = useResizeObserver(leftLabel);\n\n  // Legends\n  const { height: topLegendHeight } = useResizeObserver(topLegend, { offsetHeight: 20 });\n  const { height: bottomLegendHeight, width: bottomLegendWidth } = useResizeObserver(bottomLegend, {\n    offsetHeight: 10,\n  });\n  const { width: rightLegendWidth, height: rightLegendHeight } = useResizeObserver(rightLegend);\n  const { width: leftLegendWidth, height: leftLegendHeight } = useResizeObserver(leftLegend, { offsetWidth: 20 });\n\n  const internalMargin = useMemo(\n    () => ({\n      bottom: axisBottomHeight + bottomLegendHeight + bottomLabelHeight || 10,\n      top: Math.max(topLegendHeight, toolbarHeight) || 10,\n      right: rightLabelWidth + axisRightWidth + rightLegendWidth || 10,\n      left: axisLeftWidth + leftLabelWidth + leftLegendWidth || 10,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      toolbarHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendHeight,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      toolbarHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    }),\n    [\n      axisBottomHeight,\n      toolbarHeight,\n      leftLegendHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["ResizeObserver"]
 }

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

@@ -184,7 +184,7 @@ const useKeyboardNavigation = () => {
       }
       const { code } = e;
       const isShiftKey = ["ShiftLeft", "ShiftRight"].includes(code);
-      if (isShiftKey && !isZooming && !xScale.bandwidth) {
+      if (isShiftKey && !isZooming && !xScale.type === "BAND") {
         setIsZooming(true);
         setZoomStartingPosition(getXScaleValue(activePoint) - xScrollbarPosition * containerRatio);
       }
@@ -198,14 +198,14 @@ const useKeyboardNavigation = () => {
       navigateSerie,
       setIsZooming,
       setZoomStartingPosition,
-      xScale.bandwidth,
+      xScale.type === "BAND",
       xScrollbarPosition,
       yScale.bandwidth
     ]
   );
   const handleOnKeyUp = (0, import_react.useCallback)(
     (e) => {
-      if (!isZooming && xScale.bandwidth)
+      if (!isZooming && xScale.type === "BAND")
         return false;
       const { shiftKey, code } = e;
       const isShiftKey = ["ShiftLeft", "ShiftRight"].includes(code);
@@ -254,7 +254,7 @@ const useKeyboardNavigation = () => {
       setMovingPosition,
       setXScrollbarPosition,
       setZoomStartingPosition,
-      xScale.bandwidth,
+      xScale.type === "BAND",
       xScrollbarPosition,
       zoomStartingPosition
     ]

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 } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const findInCircularList = (\n  list: string[],\n  from: number,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (list[i]) return i;\n  }\n  return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n  const {\n    activePoint,\n    setActivePoint,\n    containerRef,\n    xScale,\n    yScale,\n    lastPosition,\n    setXScrollbarPosition,\n    containerRatio,\n    xScrollbarPosition,\n    innerWidth,\n    innerHeight,\n    getXScaleValue,\n    getYScaleValue,\n    groups,\n    isZooming,\n    setIsZooming,\n    zoomStartingPosition,\n    setZoomStartingPosition,\n    setMovingPosition,\n    setContainerRatio,\n    currentData: data,\n    props: { xAxis, yAxis, xScroll, yScroll },\n  } = useContext(ChartContext);\n\n  const xScrollable = xAxis.advanced?.pointSpacing?.value > 1 || xScroll;\n  const yScrollable = yAxis.advanced?.pointSpacing?.value > 1 || yScroll;\n\n  const currentSerie = useMemo(\n    () => data.find((d) => d.name === activePoint?.serie) ?? data[0],\n    [activePoint?.serie, data],\n  );\n\n  const currentActiveItemIndex = useMemo(\n    () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n    [activePoint, currentSerie],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (containerRef === e.target && activePoint === null) {\n        setActivePoint(currentSerie?.data[0]);\n        setXScrollbarPosition(0);\n      }\n    },\n    [activePoint, containerRef, currentSerie?.data, setActivePoint, setXScrollbarPosition],\n  );\n\n  // const config = useMemo(\n  //   () => ({\n  //     onBlur: () => {\n  //       setActivePoint(null);\n  //     },\n  //   }),\n  //   [setActivePoint],\n  // );\n  // const handleOnBlur = useOnBlurOut(config);\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setTimeout(() => {\n      if (!containerRef.contains(document.activeElement)) {\n        setActivePoint(null);\n      }\n    });\n  }, [setActivePoint, containerRef]);\n\n  const navigateSerie = useCallback(\n    (step: number) => {\n      const newValue = findInCircularList(\n        currentSerie?.data.map((d) => d.value.toString()),\n        currentActiveItemIndex,\n        step,\n      );\n      setActivePoint(currentSerie?.data[newValue]);\n\n      if (xScrollable) {\n        const xValue = getXScaleValue(currentSerie?.data[newValue]);\n        if (xValue === undefined) return;\n        const barWidth = innerWidth / containerRatio;\n        const total = innerWidth * containerRatio;\n        if (total <= xValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerWidth) / containerRatio);\n        } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (xValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerWidth) return innerWidth - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (xValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(xValue / containerRatio);\n      }\n      if (yScrollable) {\n        const yValue = getYScaleValue(currentSerie?.data[newValue]);\n        if (yValue === undefined) return;\n        const barWidth = innerHeight / containerRatio;\n        const total = innerHeight * containerRatio;\n        if (total <= yValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerHeight) / containerRatio);\n        } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (yValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerHeight) return innerHeight - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (yValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(yValue / containerRatio);\n      }\n    },\n    [\n      currentSerie?.data,\n      currentActiveItemIndex,\n      setActivePoint,\n      xScrollable,\n      yScrollable,\n      getXScaleValue,\n      innerWidth,\n      containerRatio,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      getYScaleValue,\n      innerHeight,\n    ],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      const nextSerie = data.find((d) => {\n        const nextSerieIndex = findInCircularList(\n          groups,\n          groups.findIndex((item) => item === currentSerie.name),\n          step,\n        );\n\n        return d.name === groups[nextSerieIndex];\n      });\n      setActivePoint(nextSerie?.data[currentActiveItemIndex] || nextSerie?.data?.[0] || null);\n    },\n    [data, setActivePoint, currentActiveItemIndex, groups, currentSerie.name],\n  );\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (!activePoint) return;\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      const { code } = e;\n      const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n      if (isShiftKey && !isZooming && !xScale.bandwidth) {\n        setIsZooming(true);\n        setZoomStartingPosition(getXScaleValue(activePoint) - xScrollbarPosition * containerRatio);\n      }\n    },\n    [\n      activePoint,\n      changeSerie,\n      containerRatio,\n      getXScaleValue,\n      isZooming,\n      navigateSerie,\n      setIsZooming,\n      setZoomStartingPosition,\n      xScale.bandwidth,\n      xScrollbarPosition,\n      yScale.bandwidth,\n    ],\n  );\n\n  const handleOnKeyUp: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (!isZooming && xScale.bandwidth) return false;\n      const { shiftKey, code } = e;\n      const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n      if (shiftKey && ['ArrowRight', 'ArrowLeft'].includes(code)) {\n        setMovingPosition(getXScaleValue(activePoint) - xScrollbarPosition * containerRatio);\n      }\n      if (isShiftKey) {\n        setIsZooming(false);\n        setZoomStartingPosition(0);\n        setMovingPosition(0);\n        const endingPosition = getXScaleValue(activePoint) - xScrollbarPosition * containerRatio;\n        // isRightDirection is used to know if we are zooming right or left direction\n        const isRightDirection = zoomStartingPosition < endingPosition;\n        const offsetActivePoint = findInCircularList(\n          currentSerie?.data.map((d) => d.value.toString()),\n          currentActiveItemIndex,\n          isRightDirection ? 1 : -1,\n        );\n        // we do this so the activePoint does not fall into the blur gradient\n        const correctEndingPosition =\n          getXScaleValue(currentSerie?.data[offsetActivePoint]) - xScrollbarPosition * containerRatio;\n        const diff = Math.abs(zoomStartingPosition - correctEndingPosition);\n        if (diff <= 0) return;\n        const newRatio =\n          innerWidth / ((innerWidth * containerRatio) / diff) < 40\n            ? innerWidth / 40\n            : (innerWidth * containerRatio) / diff;\n        const newPosition =\n          lastPosition?.current + (!isRightDirection ? correctEndingPosition : zoomStartingPosition) / containerRatio;\n\n        // if is bigger thant innerwidth possible we force the end\n        if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n        else setXScrollbarPosition(newPosition);\n        setActivePoint(null);\n        setTimeout(() => setActivePoint(activePoint));\n        setContainerRatio(newRatio);\n        lastPosition.current = newPosition;\n      }\n    },\n    [\n      activePoint,\n      containerRatio,\n      currentActiveItemIndex,\n      currentSerie?.data,\n      getXScaleValue,\n      innerWidth,\n      isZooming,\n      lastPosition,\n      setActivePoint,\n      setContainerRatio,\n      setIsZooming,\n      setMovingPosition,\n      setXScrollbarPosition,\n      setZoomStartingPosition,\n      xScale.bandwidth,\n      xScrollbarPosition,\n      zoomStartingPosition,\n    ],\n  );\n  return useMemo(\n    () => ({ handleOnKeyUp, onInputKeyDown, handleOnBlur, handleOnFocus }),\n    [handleOnBlur, handleOnFocus, handleOnKeyUp, onInputKeyDown],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const findInCircularList = (\n  list: string[],\n  from: number,\n  step = 1,\n  // eslint-disable-next-line max-params\n): number => {\n  for (\n    let i = (from + step + list.length) % list.length;\n    i !== from && from > -1;\n    i = (i + step + list.length) % list.length\n  ) {\n    if (list[i]) return i;\n  }\n  return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n  const {\n    activePoint,\n    setActivePoint,\n    containerRef,\n    xScale,\n    yScale,\n    lastPosition,\n    setXScrollbarPosition,\n    containerRatio,\n    xScrollbarPosition,\n    innerWidth,\n    innerHeight,\n    getXScaleValue,\n    getYScaleValue,\n    groups,\n    isZooming,\n    setIsZooming,\n    zoomStartingPosition,\n    setZoomStartingPosition,\n    setMovingPosition,\n    setContainerRatio,\n    currentData: data,\n    props: { xAxis, yAxis, xScroll, yScroll },\n  } = useContext(ChartContext);\n\n  const xScrollable = xAxis.advanced?.pointSpacing?.value > 1 || xScroll;\n  const yScrollable = yAxis.advanced?.pointSpacing?.value > 1 || yScroll;\n\n  const currentSerie = useMemo(\n    () => data.find((d) => d.name === activePoint?.serie) ?? data[0],\n    [activePoint?.serie, data],\n  );\n\n  const currentActiveItemIndex = useMemo(\n    () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n    [activePoint, currentSerie],\n  );\n\n  const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (containerRef === e.target && activePoint === null) {\n        setActivePoint(currentSerie?.data[0]);\n        setXScrollbarPosition(0);\n      }\n    },\n    [activePoint, containerRef, currentSerie?.data, setActivePoint, setXScrollbarPosition],\n  );\n\n  // const config = useMemo(\n  //   () => ({\n  //     onBlur: () => {\n  //       setActivePoint(null);\n  //     },\n  //   }),\n  //   [setActivePoint],\n  // );\n  // const handleOnBlur = useOnBlurOut(config);\n\n  const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n    setTimeout(() => {\n      if (!containerRef.contains(document.activeElement)) {\n        setActivePoint(null);\n      }\n    });\n  }, [setActivePoint, containerRef]);\n\n  const navigateSerie = useCallback(\n    (step: number) => {\n      const newValue = findInCircularList(\n        currentSerie?.data.map((d) => d.value.toString()),\n        currentActiveItemIndex,\n        step,\n      );\n      setActivePoint(currentSerie?.data[newValue]);\n\n      if (xScrollable) {\n        const xValue = getXScaleValue(currentSerie?.data[newValue]);\n        if (xValue === undefined) return;\n        const barWidth = innerWidth / containerRatio;\n        const total = innerWidth * containerRatio;\n        if (total <= xValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerWidth) / containerRatio);\n        } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (xValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerWidth) return innerWidth - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (xValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(xValue / containerRatio);\n      }\n      if (yScrollable) {\n        const yValue = getYScaleValue(currentSerie?.data[newValue]);\n        if (yValue === undefined) return;\n        const barWidth = innerHeight / containerRatio;\n        const total = innerHeight * containerRatio;\n        if (total <= yValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerHeight) / containerRatio);\n        } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (yValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerHeight) return innerHeight - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (yValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(yValue / containerRatio);\n      }\n    },\n    [\n      currentSerie?.data,\n      currentActiveItemIndex,\n      setActivePoint,\n      xScrollable,\n      yScrollable,\n      getXScaleValue,\n      innerWidth,\n      containerRatio,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      getYScaleValue,\n      innerHeight,\n    ],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      const nextSerie = data.find((d) => {\n        const nextSerieIndex = findInCircularList(\n          groups,\n          groups.findIndex((item) => item === currentSerie.name),\n          step,\n        );\n\n        return d.name === groups[nextSerieIndex];\n      });\n      setActivePoint(nextSerie?.data[currentActiveItemIndex] || nextSerie?.data?.[0] || null);\n    },\n    [data, setActivePoint, currentActiveItemIndex, groups, currentSerie.name],\n  );\n\n  const onInputKeyDown: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (!activePoint) return;\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      const { code } = e;\n      const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n      if (isShiftKey && !isZooming && !xScale.type === 'BAND') {\n        setIsZooming(true);\n        setZoomStartingPosition(getXScaleValue(activePoint) - xScrollbarPosition * containerRatio);\n      }\n    },\n    [\n      activePoint,\n      changeSerie,\n      containerRatio,\n      getXScaleValue,\n      isZooming,\n      navigateSerie,\n      setIsZooming,\n      setZoomStartingPosition,\n      xScale.type === 'BAND',\n      xScrollbarPosition,\n      yScale.bandwidth,\n    ],\n  );\n\n  const handleOnKeyUp: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (!isZooming && xScale.type === 'BAND') return false;\n      const { shiftKey, code } = e;\n      const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n      if (shiftKey && ['ArrowRight', 'ArrowLeft'].includes(code)) {\n        setMovingPosition(getXScaleValue(activePoint) - xScrollbarPosition * containerRatio);\n      }\n      if (isShiftKey) {\n        setIsZooming(false);\n        setZoomStartingPosition(0);\n        setMovingPosition(0);\n        const endingPosition = getXScaleValue(activePoint) - xScrollbarPosition * containerRatio;\n        // isRightDirection is used to know if we are zooming right or left direction\n        const isRightDirection = zoomStartingPosition < endingPosition;\n        const offsetActivePoint = findInCircularList(\n          currentSerie?.data.map((d) => d.value.toString()),\n          currentActiveItemIndex,\n          isRightDirection ? 1 : -1,\n        );\n        // we do this so the activePoint does not fall into the blur gradient\n        const correctEndingPosition =\n          getXScaleValue(currentSerie?.data[offsetActivePoint]) - xScrollbarPosition * containerRatio;\n        const diff = Math.abs(zoomStartingPosition - correctEndingPosition);\n        if (diff <= 0) return;\n        const newRatio =\n          innerWidth / ((innerWidth * containerRatio) / diff) < 40\n            ? innerWidth / 40\n            : (innerWidth * containerRatio) / diff;\n        const newPosition =\n          lastPosition?.current + (!isRightDirection ? correctEndingPosition : zoomStartingPosition) / containerRatio;\n\n        // if is bigger thant innerwidth possible we force the end\n        if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n        else setXScrollbarPosition(newPosition);\n        setActivePoint(null);\n        setTimeout(() => setActivePoint(activePoint));\n        setContainerRatio(newRatio);\n        lastPosition.current = newPosition;\n      }\n    },\n    [\n      activePoint,\n      containerRatio,\n      currentActiveItemIndex,\n      currentSerie?.data,\n      getXScaleValue,\n      innerWidth,\n      isZooming,\n      lastPosition,\n      setActivePoint,\n      setContainerRatio,\n      setIsZooming,\n      setMovingPosition,\n      setXScrollbarPosition,\n      setZoomStartingPosition,\n      xScale.type === 'BAND',\n      xScrollbarPosition,\n      zoomStartingPosition,\n    ],\n  );\n  return useMemo(\n    () => ({ handleOnKeyUp, onInputKeyDown, handleOnBlur, handleOnFocus }),\n    [handleOnBlur, handleOnFocus, handleOnKeyUp, 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

@@ -33,6 +33,7 @@ var import_d3 = require("d3");
 var import_helpers = require("../helpers");
 var import_colorPallet = require("../helpers/colorPallet");
 var import_constants = require("../../constants");
+var import_scales = require("../scales");
 const useScales = ({
   props,
   originalSeries: series,
@@ -44,8 +45,6 @@ const useScales = ({
 }) => {
   const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;
   const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
-  const rangeToWidth = innerWidth * (xScroll ? containerRatio : 1);
-  const rangeToHeight = innerHeight * (yScroll ? containerRatio : 1);
   const getBandDomain = (0, import_react.useCallback)(
     (axis) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],
     [series]
@@ -165,30 +164,52 @@ const useScales = ({
   const getScaleBand = (domain, range, padding = 0.2) => (0, import_d3.scaleBand)().domain(domain).range(range).padding(padding).paddingOuter(0.05);
   const getScaleLinear = (domain, range) => (0, import_d3.scaleLinear)().domain(domain).range(range);
   const getScaleLog = (domain, range) => (0, import_d3.scaleLog)().domain(domain).range(range);
-  const xScale = (0, import_react.useMemo)(() => {
-    if (xAxis?.type === "time")
-      return getScaleTime(getTimeLinearDomain(xAxis, "x"), [0, rangeToWidth]);
-    if (xAxis?.type === "linear" || yAxis?.type === "band") {
-      return getScaleLinear(getLinearDomain(xAxis, "x"), [0, rangeToWidth]);
-    }
-    return getScaleBand(getBandDomain(xAxis), [0, rangeToWidth]);
-  }, [getBandDomain, getLinearDomain, getTimeLinearDomain, rangeToWidth, xAxis, yAxis?.type]);
-  const yScale = (0, import_react.useMemo)(() => {
-    if (yAxis?.type === "band")
-      return getScaleBand(getBandDomain(yAxis), [0, rangeToHeight]);
-    if (yAxis?.type === "log")
-      return getScaleLog(getLinearDomain(yAxis, "y"), [rangeToHeight, 0]);
-    return getScaleLinear(getLinearDomain(yAxis, "y"), [rangeToHeight, 0]);
-  }, [getBandDomain, getLinearDomain, rangeToHeight, yAxis]);
-  const y2Scale = (0, import_react.useMemo)(() => {
-    if (!y2Axis)
+  const scaleFactory = (0, import_react.useCallback)(
+    (axis, axisProps, range) => {
+      if (!axisProps)
+        return null;
+      if (["time", "datetime"].includes(axisProps?.type)) {
+        return new import_scales.TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis), range), axisProps);
+      }
+      if (axisProps?.type === "linear" || ["y", "y2"].includes(axis) && axisProps?.type === void 0) {
+        return new import_scales.LinearScale(getScaleLinear(getLinearDomain(axisProps, axis), range), axisProps);
+      }
+      if (axisProps?.type === "log")
+        return new import_scales.LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));
+      if (axisProps?.type === "band" || axis === "x" && axisProps?.type === void 0) {
+        return new import_scales.BandScale(getScaleBand(getBandDomain(axisProps), range), axisProps);
+      }
       return null;
-    if (y2Axis?.type === "band")
-      return getScaleBand(getBandDomain(y2Axis), [0, innerHeight]);
-    if (y2Axis?.type === "log")
-      return getScaleLog(getLinearDomain(y2Axis, "y2"), [innerHeight, 0]);
-    return getScaleLinear(getLinearDomain(y2Axis, "y2"), [innerHeight, 0]);
-  }, [getBandDomain, getLinearDomain, innerHeight, y2Axis]);
+    },
+    [getBandDomain, getLinearDomain]
+  );
+  const xRangeFrom = (0, import_react.useMemo)(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);
+  const xRangeTo = (0, import_react.useMemo)(
+    () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),
+    [containerRatio, innerWidth, xAxis?.plotRange, xScroll]
+  );
+  const yRangeTo = (0, import_react.useMemo)(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);
+  const yRangeFrom = (0, import_react.useMemo)(
+    () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),
+    [containerRatio, innerHeight, yAxis?.plotRange, yScroll]
+  );
+  const y2RangeTo = (0, import_react.useMemo)(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);
+  const y2RangeFrom = (0, import_react.useMemo)(
+    () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),
+    [containerRatio, innerHeight, y2Axis?.plotRange, yScroll]
+  );
+  const xScale = (0, import_react.useMemo)(
+    () => scaleFactory("x", xAxis, [xRangeFrom, xRangeTo]),
+    [scaleFactory, xAxis, xRangeFrom, xRangeTo]
+  );
+  const yScale = (0, import_react.useMemo)(
+    () => scaleFactory("y", yAxis, [yRangeFrom, yRangeTo]),
+    [scaleFactory, yAxis, yRangeFrom, yRangeTo]
+  );
+  const y2Scale = (0, import_react.useMemo)(
+    () => scaleFactory("y2", y2Axis, [y2RangeFrom, y2RangeTo]),
+    [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo]
+  );
   const colorScale = (0, import_react.useMemo)(
     () => (0, import_d3.scaleOrdinal)().domain(series.map((d) => d.name)).range(series.map((d) => import_colorPallet.COLOR_PALLET[d.color] ?? d.color)).unknown("red"),
     [series]
@@ -205,31 +226,26 @@ const useScales = ({
     }
     return data;
   }, [currentData, stackedSeries]);
-  const isXAxisCategorical = (0, import_react.useMemo)(
-    () => (xAxis.type === void 0 || xAxis.type === "band") && yAxis.type !== "band",
-    [xAxis.type, yAxis.type]
-  );
-  const isYAxisCategorical = (0, import_react.useMemo)(() => yAxis.type === "band", [yAxis.type]);
   const getBandwidth = (0, import_react.useCallback)(() => {
-    if (isXAxisCategorical) {
-      return xScale.bandwidth();
+    if (xScale?.type === "BAND") {
+      return xScale.getBandwidth();
     }
-    if (isYAxisCategorical) {
-      return yScale.bandwidth();
+    if (yScale?.type === "BAND") {
+      return yScale?.getBandwidth();
     }
     const bar = currentData.filter((serie) => serie.type === "bar");
     const barsLength = bar.length;
     if (!barsLength)
       return;
-    const divisor = Math.max(bar[0].data.length, xScale?.ticks?.().length, 1);
+    const divisor = Math.max(bar[0].data.length, xScale?.getTicks(innerWidth).length, 1);
     const width = innerWidth / divisor;
     if (containerRatio > 1) {
       return Math.max(0.5, width * containerRatio);
     }
-    return Math.max(0.5, Math.trunc(width - width * 0.2));
-  }, [isXAxisCategorical, isYAxisCategorical, currentData, innerWidth, containerRatio, xScale, yScale]);
+    return Math.max(0.5, Math.trunc(width - width * 0.4));
+  }, [currentData, innerWidth, containerRatio, xScale, yScale]);
   const subGroupScale = (0, import_react.useMemo)(
-    () => getBandwidth() ? (0, import_d3.scaleBand)().domain(subgroupsWithBars).range([0, getBandwidth() ?? 0]).paddingInner(0.55).padding(0.2).paddingOuter(0.01) : null,
+    () => getBandwidth() ? (0, import_d3.scaleBand)().domain(subgroupsWithBars).range([0, getBandwidth()]).paddingInner(0.55).padding(0.2).paddingOuter(0.01) : null,
     [getBandwidth, subgroupsWithBars]
   );
   return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };