@elliemae/ds-dataviz 3.14.4 → 3.14.7

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

@@ -37,7 +37,6 @@ __export(styles_exports, {
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_colorPallet = require("./helpers/colorPallet");
 const StyledSVGWrapper = import_ds_system.styled.div`
   rect:focus,
   rect:focus-visible,
@@ -53,37 +52,16 @@ const StyledSVGWrapper = import_ds_system.styled.div`
 
   cursor: ${({ isGrabbed }) => isGrabbed ? "grabbing" : "default"};
 
-  .domain {
-    stroke-width: 2px;
-    stroke: ${({ theme }) => theme.colors.neutral["700"]};
-  }
-
   text {
     font-size: 1rem;
   }
 
   min-width: 300px;
 `;
-const StyledAxis = (0, import_ds_system.styled)("g")`
-  text {
-    fill: #635f5d;
-  }
-
-  .tick text {
-    font-size: 1rem;
-    ${({ tickColor }) => tickColor ? `fill: ${import_colorPallet.COLOR_PALLET[tickColor] ?? tickColor}` : ""}
-  }
-  .tick line {
-    ${({ tickColor }) => tickColor ? `stroke: ${import_colorPallet.COLOR_PALLET[tickColor] ?? tickColor}` : ""}
-  }
-
-  line {
-    stroke: #c0c0bb;
-  }
-
-  .domain {
-    ${({ axisColor }) => axisColor ? `stroke: ${import_colorPallet.COLOR_PALLET[axisColor] ?? axisColor}` : ""}
-  }
+const StyledAxis = (0, import_ds_system.styled)("line")`
+  stroke-width: 2px;
+  stroke: ${({ theme }) => theme.colors.neutral["700"]};
+  ${({ axisColor }) => axisColor ? `stroke: ${axisColor}` : ""}
 `;
 const StyledAxisLabel = (0, import_ds_system.styled)("text")`
   font-size: 1rem;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from './helpers/colorPallet';\n\ninterface StyledAxisT {\n  axisColor: string;\n  tickColor: string;\n}\nexport const StyledSVGWrapper = styled.div`\n  rect:focus,\n  rect:focus-visible,\n  circle:focus,\n  circle:focus-visible {\n    outline: none;\n  }\n\n  :focus,\n  :focus-visible {\n    outline: none;\n  }\n\n  cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n  .domain {\n    stroke-width: 2px;\n    stroke: ${({ theme }) => theme.colors.neutral['700']};\n  }\n\n  text {\n    font-size: 1rem;\n  }\n\n  min-width: 300px;\n`;\n\nexport const StyledAxis = styled('g')<StyledAxisT>`\n  text {\n    fill: #635f5d;\n  }\n\n  .tick text {\n    font-size: 1rem;\n    ${({ tickColor }) => (tickColor ? `fill: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n  }\n  .tick line {\n    ${({ tickColor }) => (tickColor ? `stroke: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n  }\n\n  line {\n    stroke: #c0c0bb;\n  }\n\n  .domain {\n    ${({ axisColor }) => (axisColor ? `stroke: ${COLOR_PALLET[axisColor] ?? axisColor}` : '')}\n  }\n`;\n\nexport const StyledAxisLabel = styled('text')`\n  font-size: 1rem;\n  font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n  line {\n    opacity: 0.2;\n  }\n`;\n\nexport const StyleFocusableRegion = styled('div')<{ s: number }>`\n  width: ${({ s }) => s * 2 ?? '1'}px;\n  height: ${({ s }) => s * 2 ?? '1'}px;\n  :focus {\n    outline: none;\n  }\n`;\n\nexport const StyledLine = styled('path')`\n  fill: none;\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n`;\nexport const StyledArea = styled('path')`\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n  opacity: 0.2;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n  max-width: 350px;\n  background-color: white;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  width: calc(100% + 30px);\n  height: calc(100% + 30px);\n  z-index: -1;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,yBAA6B;AAMtB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAa3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,cAI3C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU3C,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO9B,CAAC,EAAE,UAAU,MAAO,YAAY,SAAS,gCAAa,cAAc,cAAc;AAAA;AAAA;AAAA,MAGlF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,gCAAa,cAAc,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQpF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,gCAAa,cAAc,cAAc;AAAA;AAAA;AAInF,MAAM,sBAAkB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAM,2BAAuB,yBAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,iBAAa,yBAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from './helpers/colorPallet';\n\ninterface StyledAxisT {\n  axisColor: string;\n}\nexport const StyledSVGWrapper = styled.div`\n  rect:focus,\n  rect:focus-visible,\n  circle:focus,\n  circle:focus-visible {\n    outline: none;\n  }\n\n  :focus,\n  :focus-visible {\n    outline: none;\n  }\n\n  cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n  text {\n    font-size: 1rem;\n  }\n\n  min-width: 300px;\n`;\n\nexport const StyledAxis = styled('line')<StyledAxisT>`\n  stroke-width: 2px;\n  stroke: ${({ theme }) => theme.colors.neutral['700']};\n  ${({ axisColor }) => (axisColor ? `stroke: ${axisColor}` : '')}\n`;\n\nexport const StyledAxisLabel = styled('text')`\n  font-size: 1rem;\n  font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n  line {\n    opacity: 0.2;\n  }\n`;\n\nexport const StyleFocusableRegion = styled('div')<{ s: number }>`\n  width: ${({ s }) => s * 2 ?? '1'}px;\n  height: ${({ s }) => s * 2 ?? '1'}px;\n  :focus {\n    outline: none;\n  }\n`;\n\nexport const StyledLine = styled('path')`\n  fill: none;\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n`;\nexport const StyledArea = styled('path')`\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n  opacity: 0.2;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n  max-width: 350px;\n  background-color: white;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  width: calc(100% + 30px);\n  height: calc(100% + 30px);\n  z-index: -1;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAMhB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAa3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,YAE3B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC5C,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,cAAc;AAAA;AAGtD,MAAM,sBAAkB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAM,2BAAuB,yBAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,iBAAa,yBAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/ChartContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe,iBAAiB;AAEzC,SAAS,aAAa,WAAW,oBAAoB;AAErD,SAAS,oBAAoB;AA+E7B,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ,UAAU;AAAA,EAClB,QAAQ,YAAY;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,cAAc,UAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,YAAY,aAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AACO,MAAM,eAAe,cAAc,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe,iBAAiB;AAEzC,SAAS,aAAa,WAAW,oBAAoB;AAErD,SAAS,oBAAoB;AAuF7B,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ,UAAU;AAAA,EAClB,QAAQ,YAAY;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,cAAc,UAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,YAAY,aAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AACO,MAAM,eAAe,cAAc,cAAc;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useChart.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,WAAW,cAA2B;AAClE,SAAS,WAAW;AACpB,SAAS,gBAAgB;AAGzB,SAAS,cAAc,iBAAiB;AACxC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,OAAO,oBAAoB;AAC3B,SAAS,wBAAwB;AAGjC,MAAM,oBAAoB,CAAC,QAAwC;AACjE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,CAAC;AAEtD,YAAU,MAAM;AACd,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI;AAAA,QACzB,SAAS,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,mBAAiB,OAAO,SAAS;AAGjC,QAAM,EAAE,QAAQ,OAAO,OAAO,OAAO,WAAW,QAAQ,YAAY,QAAQ,cAAc,IAAI;AAE9F,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,OAAO,WAAW,GAAG;AACvB,aAAO,aAAa;AAAA,IACtB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AACX,QAAM,CAAC,cAAc,eAAe,IAAI,SAAgC,IAAI;AAC5E,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,iBAAiB,kBAAkB,YAAY;AACrD,QAAM,QAAQ,QAAQ,MAAM,aAAa,kBAAkB,GAAG,CAAC,gBAAgB,SAAS,CAAC;AAEzF,QAAM,SAAS,QAAQ,MAAM,cAAc,KAAK,CAAC,UAAU,CAAC;AAE5D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AAIpD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,CAAC;AAClE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAItD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AACjD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,EAAE;AACnD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,EAAE;AACnD,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,CAAC;AAC9D,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C,OAAO,MAAM,UAAU,cAAc,SAAS,OAAO,MAAM,UAAU,cAAc,SAAS;AAAA,EAC9F;AAEA,QAAM,eAAe,OAAO,CAAC;AAE7B,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B,IAAI;AACvE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA6B,IAAI;AAC3E,QAAM,CAAC,cAAc,eAAe,IAAI,SAA6B,IAAI;AAEzE,QAAM,CAAC,YAAY,aAAa,IAAI,SAA6B,IAAI;AACrE,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B,IAAI;AACvE,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,IAAI;AACnE,QAAM,CAAC,cAAc,eAAe,IAAI,SAA6B,IAAI;AAEzE,QAAM,CAAC,YAAY,aAAa,IAAI,SAA6B,IAAI;AACrE,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,IAAI;AACnE,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B,IAAI;AAEvE,QAAM,CAAC,YAAY,aAAa,IAAI,SAA6B,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,IAAI,mBAAmB;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,aAAa;AAAA,IACjB,MAAM,QAAQ,eAAe,OAAO,eAAe;AAAA,IACnD,CAAC,eAAe,MAAM,eAAe,OAAO,KAAK;AAAA,EACnD;AACA,QAAM,cAAc;AAAA,IAClB,MAAM,SAAS,eAAe,MAAM,eAAe;AAAA,IACnD,CAAC,eAAe,KAAK,eAAe,QAAQ,MAAM;AAAA,EACpD;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmB,CAAC,CAAC;AAE7D,QAAM,eAAe,QAAQ,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,cAAc;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,cAAc;AAAA,IAClB,MAAM,UAAU,eAAe,gBAAgB,YAAY;AAAA,IAC3D,CAAC,eAAe,gBAAgB,YAAY;AAAA,EAC9C;AAKA,QAAM,SAAS,QAAQ,MAAM,YAAY,IAAI,CAAC,UAAU,MAAM,IAAI,GAAG,CAAC,WAAW,CAAC;AAElF,QAAM,EAAE,QAAQ,QAAQ,SAAS,eAAe,YAAY,aAAa,IAAI,UAAU;AAAA,IACrF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,QAAQ,MAAM,QAAQ,SAAS,QAAQ,CAAC,MAAM,CAAC;AAEpE,QAAM,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB,IAAI,WAAW;AAAA,IAClH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,UAAU,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAExC,SAAO;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;",
   "names": []
 }

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

@@ -44,9 +44,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]
   );
@@ -56,9 +56,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/esm/graphs/Chart/config/useGetters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useGetters.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,eAAe;AAY9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,QAAQ,QAAQ,MAAmB;AAClG,QAAM,YAAY;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,YAAY;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,iBAAiB;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,iBAAiB;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,qBAAqB;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,qBAAqB;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,SAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB;AAAA,IACtG,CAAC,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,kBAAkB;AAAA,EAC/F;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,eAAe;AAY9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,QAAQ,QAAQ,MAAmB;AAClG,QAAM,YAAY;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,YAAY;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,iBAAiB;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,iBAAiB;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,qBAAqB;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,qBAAqB;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,SAAO;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/esm/graphs/Chart/config/useInternalMargins.js

@@ -35,11 +35,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/esm/graphs/Chart/config/useInternalMargins.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useInternalMargins.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -154,7 +154,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);
       }
@@ -168,14 +168,14 @@ const useKeyboardNavigation = () => {
       navigateSerie,
       setIsZooming,
       setZoomStartingPosition,
-      xScale.bandwidth,
+      xScale.type === "BAND",
       xScrollbarPosition,
       yScale.bandwidth
     ]
   );
   const handleOnKeyUp = useCallback(
     (e) => {
-      if (!isZooming && xScale.bandwidth)
+      if (!isZooming && xScale.type === "BAND")
         return false;
       const { shiftKey, code } = e;
       const isShiftKey = ["ShiftLeft", "ShiftRight"].includes(code);
@@ -224,7 +224,7 @@ const useKeyboardNavigation = () => {
       setMovingPosition,
       setXScrollbarPosition,
       setZoomStartingPosition,
-      xScale.bandwidth,
+      xScale.type === "BAND",
       xScrollbarPosition,
       zoomStartingPosition
     ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useKeyboardNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo } 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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext, useMemo } 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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -4,6 +4,7 @@ import { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } fr
 import { getStackedIndex } from "../helpers";
 import { COLOR_PALLET } from "../helpers/colorPallet";
 import { TIME_OFFSET } from "../../constants";
+import { BandScale, LinearScale, TimeLinearScale, LogScale } from "../scales";
 const useScales = ({
   props,
   originalSeries: series,
@@ -15,8 +16,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 = useCallback(
     (axis) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],
     [series]
@@ -136,30 +135,52 @@ const useScales = ({
   const getScaleBand = (domain, range, padding = 0.2) => scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);
   const getScaleLinear = (domain, range) => scaleLinear().domain(domain).range(range);
   const getScaleLog = (domain, range) => scaleLog().domain(domain).range(range);
-  const xScale = useMemo(() => {
-    if (xAxis?.type === "time")
-      return getScaleTime(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 = 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 = useMemo(() => {
-    if (!y2Axis)
+  const scaleFactory = useCallback(
+    (axis, axisProps, range) => {
+      if (!axisProps)
+        return null;
+      if (["time", "datetime"].includes(axisProps?.type)) {
+        return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis), range), axisProps);
+      }
+      if (axisProps?.type === "linear" || ["y", "y2"].includes(axis) && axisProps?.type === void 0) {
+        return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis), range), axisProps);
+      }
+      if (axisProps?.type === "log")
+        return new LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));
+      if (axisProps?.type === "band" || axis === "x" && axisProps?.type === void 0) {
+        return new 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 = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);
+  const xRangeTo = useMemo(
+    () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),
+    [containerRatio, innerWidth, xAxis?.plotRange, xScroll]
+  );
+  const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);
+  const yRangeFrom = useMemo(
+    () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),
+    [containerRatio, innerHeight, yAxis?.plotRange, yScroll]
+  );
+  const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);
+  const y2RangeFrom = useMemo(
+    () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),
+    [containerRatio, innerHeight, y2Axis?.plotRange, yScroll]
+  );
+  const xScale = useMemo(
+    () => scaleFactory("x", xAxis, [xRangeFrom, xRangeTo]),
+    [scaleFactory, xAxis, xRangeFrom, xRangeTo]
+  );
+  const yScale = useMemo(
+    () => scaleFactory("y", yAxis, [yRangeFrom, yRangeTo]),
+    [scaleFactory, yAxis, yRangeFrom, yRangeTo]
+  );
+  const y2Scale = useMemo(
+    () => scaleFactory("y2", y2Axis, [y2RangeFrom, y2RangeTo]),
+    [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo]
+  );
   const colorScale = useMemo(
     () => scaleOrdinal().domain(series.map((d) => d.name)).range(series.map((d) => COLOR_PALLET[d.color] ?? d.color)).unknown("red"),
     [series]
@@ -176,31 +197,26 @@ const useScales = ({
     }
     return data;
   }, [currentData, stackedSeries]);
-  const isXAxisCategorical = useMemo(
-    () => (xAxis.type === void 0 || xAxis.type === "band") && yAxis.type !== "band",
-    [xAxis.type, yAxis.type]
-  );
-  const isYAxisCategorical = useMemo(() => yAxis.type === "band", [yAxis.type]);
   const getBandwidth = 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 = useMemo(
-    () => getBandwidth() ? scaleBand().domain(subgroupsWithBars).range([0, getBandwidth() ?? 0]).paddingInner(0.55).padding(0.2).paddingOuter(0.01) : null,
+    () => getBandwidth() ? 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 };