npm - @elliemae/ds-dataviz - Versions diffs - 3.50.1-next.9 → 3.51.0-next.0 - Mend

@elliemae/ds-dataviz 3.50.1-next.9 → 3.51.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist/esm/graphs/Chart/config/useInternalMargins.js CHANGED Viewed

@@ -18,6 +18,8 @@ const useResizeObserver = (ref, { offsetHeight = 0, offsetWidth = 0 } = { offset
         resizeObserver.unobserve(observeTarget);
       };
     }
+    return () => {
+    };
   }, [offsetHeight, offsetWidth, ref]);
   return { width, height };
 };

package/dist/esm/graphs/Chart/config/useInternalMargins.js.map CHANGED Viewed

@@ -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, { 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 || 15,\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": "AAAA,YAAY,WAAW;ACEvB,SAAS,SAAS,WAAW,gBAAgB;AAC7C,OAAO,oBAAoB;AAkB3B,MAAM,oBAAoB,CACxB,KACA,EAAE,eAAe,GAAG,cAAc,EAAE,IAAI,EAAE,cAAc,GAAG,aAAa,EAAE,MACvE;AACH,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,gBAAQ,QAAQ,CAAC,UAAU;AACzB,mBAAS,KAAK,KAAK,MAAM,YAAY,QAAQ,WAAW,CAAC;AACzD,oBAAU,KAAK,KAAK,MAAM,YAAY,SAAS,YAAY,CAAC;AAAA,QAC9D,CAAC;AAAA,MACH,CAAC;AAED,qBAAe,QAAQ,aAAa;AAEpC,aAAO,MAAM;AACX,uBAAe,UAAU,aAAa;AAAA,MACxC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,cAAc,aAAa,GAAG,CAAC;AACnC,SAAO,EAAE,OAAO,OAAO;AACzB;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AAEzB,QAAM,EAAE,QAAQ,cAAc,IAAI,kBAAkB,YAAY,EAAE,cAAc,GAAG,CAAC;AAGpF,QAAM,EAAE,OAAO,eAAe,IAAI,kBAAkB,cAAc,EAAE,aAAa,GAAG,CAAC;AACrF,QAAM,EAAE,QAAQ,iBAAiB,IAAI,kBAAkB,eAAe,EAAE,cAAc,GAAG,CAAC;AAC1F,QAAM,EAAE,OAAO,cAAc,IAAI,kBAAkB,aAAa,EAAE,aAAa,GAAG,CAAC;AAGnF,QAAM,EAAE,QAAQ,kBAAkB,IAAI,kBAAkB,aAAa,EAAE,cAAc,GAAG,CAAC;AACzF,QAAM,EAAE,OAAO,gBAAgB,IAAI,kBAAkB,YAAY,EAAE,aAAa,GAAG,CAAC;AACpF,QAAM,EAAE,OAAO,gBAAgB,QAAQ,gBAAgB,IAAI,kBAAkB,SAAS;AAGtF,QAAM,EAAE,QAAQ,gBAAgB,IAAI,kBAAkB,WAAW,EAAE,cAAc,GAAG,CAAC;AACrF,QAAM,EAAE,QAAQ,oBAAoB,OAAO,kBAAkB,IAAI,kBAAkB,cAAc;AAAA,IAC/F,cAAc;AAAA,EAChB,CAAC;AACD,QAAM,EAAE,OAAO,kBAAkB,QAAQ,kBAAkB,IAAI,kBAAkB,WAAW;AAC5F,QAAM,EAAE,OAAO,iBAAiB,QAAQ,iBAAiB,IAAI,kBAAkB,YAAY,EAAE,aAAa,GAAG,CAAC;AAE9G,QAAM,iBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,QAAQ,mBAAmB,qBAAqB,qBAAqB;AAAA,MACrE,KAAK,KAAK,IAAI,iBAAiB,aAAa,KAAK;AAAA,MACjD,OAAO,kBAAkB,iBAAiB,oBAAoB;AAAA,MAC9D,MAAM,gBAAgB,iBAAiB,mBAAmB;AAAA,IAC5D;AAAA,IAEA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,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,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,IACF;AAAA,EACF;AACF;",
+  "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    return () => {};\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 || 15,\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": "AAAA,YAAY,WAAW;ACEvB,SAAS,SAAS,WAAW,gBAAgB;AAC7C,OAAO,oBAAoB;AAkB3B,MAAM,oBAAoB,CACxB,KACA,EAAE,eAAe,GAAG,cAAc,EAAE,IAAI,EAAE,cAAc,GAAG,aAAa,EAAE,MACvE;AACH,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI,eAAe,CAAC,YAA8C;AACvF,gBAAQ,QAAQ,CAAC,UAAU;AACzB,mBAAS,KAAK,KAAK,MAAM,YAAY,QAAQ,WAAW,CAAC;AACzD,oBAAU,KAAK,KAAK,MAAM,YAAY,SAAS,YAAY,CAAC;AAAA,QAC9D,CAAC;AAAA,MACH,CAAC;AAED,qBAAe,QAAQ,aAAa;AAEpC,aAAO,MAAM;AACX,uBAAe,UAAU,aAAa;AAAA,MACxC;AAAA,IACF;AACA,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB,GAAG,CAAC,cAAc,aAAa,GAAG,CAAC;AACnC,SAAO,EAAE,OAAO,OAAO;AACzB;AAEO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AAEzB,QAAM,EAAE,QAAQ,cAAc,IAAI,kBAAkB,YAAY,EAAE,cAAc,GAAG,CAAC;AAGpF,QAAM,EAAE,OAAO,eAAe,IAAI,kBAAkB,cAAc,EAAE,aAAa,GAAG,CAAC;AACrF,QAAM,EAAE,QAAQ,iBAAiB,IAAI,kBAAkB,eAAe,EAAE,cAAc,GAAG,CAAC;AAC1F,QAAM,EAAE,OAAO,cAAc,IAAI,kBAAkB,aAAa,EAAE,aAAa,GAAG,CAAC;AAGnF,QAAM,EAAE,QAAQ,kBAAkB,IAAI,kBAAkB,aAAa,EAAE,cAAc,GAAG,CAAC;AACzF,QAAM,EAAE,OAAO,gBAAgB,IAAI,kBAAkB,YAAY,EAAE,aAAa,GAAG,CAAC;AACpF,QAAM,EAAE,OAAO,gBAAgB,QAAQ,gBAAgB,IAAI,kBAAkB,SAAS;AAGtF,QAAM,EAAE,QAAQ,gBAAgB,IAAI,kBAAkB,WAAW,EAAE,cAAc,GAAG,CAAC;AACrF,QAAM,EAAE,QAAQ,oBAAoB,OAAO,kBAAkB,IAAI,kBAAkB,cAAc;AAAA,IAC/F,cAAc;AAAA,EAChB,CAAC;AACD,QAAM,EAAE,OAAO,kBAAkB,QAAQ,kBAAkB,IAAI,kBAAkB,WAAW;AAC5F,QAAM,EAAE,OAAO,iBAAiB,QAAQ,iBAAiB,IAAI,kBAAkB,YAAY,EAAE,aAAa,GAAG,CAAC;AAE9G,QAAM,iBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,QAAQ,mBAAmB,qBAAqB,qBAAqB;AAAA,MACrE,KAAK,KAAK,IAAI,iBAAiB,aAAa,KAAK;AAAA,MACjD,OAAO,kBAAkB,iBAAiB,oBAAoB;AAAA,MAC9D,MAAM,gBAAgB,iBAAiB,mBAAmB;AAAA,IAC5D;AAAA,IAEA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,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,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,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -166,7 +166,7 @@ const useKeyboardNavigation = () => {
   const handleOnKeyUp = useCallback(
     (e) => {
       if (!activePoint) return;
-      if (!isZooming && xScale?.type === "BAND") return false;
+      if (!isZooming && xScale?.type === "BAND") return;
       const { shiftKey, code } = e;
       const isShiftKey = ["ShiftLeft", "ShiftRight"].includes(code);
       const xScaledActivePoint = getXScaleValue(activePoint);
@@ -185,7 +185,7 @@ const useKeyboardNavigation = () => {
         const diff = Math.abs(zoomStartingPosition - correctEndingPosition);
         if (diff <= 0) return;
         const newRatio = innerWidth / (innerWidth * containerRatio / diff) < 40 ? innerWidth / 40 : innerWidth * containerRatio / diff;
-        const newPosition = lastScrollbarPosition?.current + (!isRightDirection ? correctEndingPosition : zoomStartingPosition) / containerRatio;
+        const newPosition = lastScrollbarPosition.current + (!isRightDirection ? correctEndingPosition : zoomStartingPosition) / containerRatio;
         if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);
         else setXScrollbarPosition(newPosition);
         setActivePoint(null);

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

@@ -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.js';\n\nexport const findInCircularList = (\n  list: string[],\n  from: number,\n  step = 1,\n  criteria = (item: number) => item !== undefined,\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] && criteria(i)) {\n      return i;\n    }\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    lastScrollbarPosition,\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    currentDataWithNullValues,\n    props: { xScroll, yScroll },\n  } = useContext(ChartContext);\n\n  const currentSerie = useMemo(\n    () => currentDataWithNullValues.find((d) => d.name === activePoint?.serie) ?? currentDataWithNullValues[0],\n    [activePoint?.serie, currentDataWithNullValues],\n  );\n\n  const currentActiveItemIndex = useMemo(\n    () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n    [activePoint, currentSerie],\n  );\n\n  const listMap = useMemo(\n    () =>\n      currentSerie?.data.map((d) => {\n        if (typeof d.value === 'object') return JSON.stringify(d.value);\n        return d.value?.toString();\n      }) ?? [],\n    [currentSerie?.data],\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 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(listMap, currentActiveItemIndex, step);\n      setActivePoint(currentSerie?.data[newValue]);\n\n      if (xScroll) {\n        const xValue = getXScaleValue(currentSerie?.data[newValue]);\n        if (xValue === undefined) return;\n        const barWidth = innerWidth / containerRatio;\n        const total = innerWidth * containerRatio;\n        if (total <= xValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerWidth) / containerRatio);\n        } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (xValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerWidth) return innerWidth - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (xValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(xValue / containerRatio);\n      } else if (yScroll) {\n        const yValue = getYScaleValue(currentSerie?.data[newValue]);\n        if (yValue === undefined) return;\n        const barWidth = innerHeight / containerRatio;\n        const total = innerHeight * containerRatio;\n        if (total <= yValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerHeight) / containerRatio);\n        } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (yValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerHeight) return innerHeight - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (yValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(yValue / containerRatio);\n      }\n    },\n    [\n      listMap,\n      currentActiveItemIndex,\n      setActivePoint,\n      currentSerie?.data,\n      xScroll,\n      yScroll,\n      getXScaleValue,\n      innerWidth,\n      containerRatio,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      getYScaleValue,\n      innerHeight,\n    ],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      const nextSerieIndex = findInCircularList(\n        groups,\n        groups.findIndex((item) => item === currentSerie.name),\n        step,\n        (idx: number) => currentDataWithNullValues[idx].data[currentActiveItemIndex].value !== null,\n      );\n      setActivePoint(currentDataWithNullValues[nextSerieIndex].data[currentActiveItemIndex]);\n    },\n    [groups, setActivePoint, currentActiveItemIndex, currentSerie.name, currentDataWithNullValues],\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?.type === 'BAND') 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?.type === 'BAND') 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      const xScaledActivePoint = getXScaleValue(activePoint);\n      if (isShiftKey && !isZooming && xScale?.type !== 'BAND' && xScaledActivePoint) {\n        setIsZooming(true);\n        setZoomStartingPosition(xScaledActivePoint - xScrollbarPosition * containerRatio);\n      }\n    },\n    [\n      activePoint,\n      changeSerie,\n      containerRatio,\n      getXScaleValue,\n      isZooming,\n      navigateSerie,\n      setIsZooming,\n      setZoomStartingPosition,\n      xScale?.type,\n      xScrollbarPosition,\n      yScale?.type,\n    ],\n  );\n\n  const handleOnKeyUp: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (!activePoint) return;\n\n      if (!isZooming && xScale?.type === 'BAND') return false;\n      const { shiftKey, code } = e;\n      const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n      const xScaledActivePoint = getXScaleValue(activePoint);\n\n      if (shiftKey && ['ArrowRight', 'ArrowLeft'].includes(code) && xScaledActivePoint) {\n        setMovingPosition(xScaledActivePoint - xScrollbarPosition * containerRatio);\n      }\n      if (isShiftKey && xScaledActivePoint) {\n        setIsZooming(false);\n        setZoomStartingPosition(0);\n        setMovingPosition(0);\n        const endingPosition = xScaledActivePoint - 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(listMap, currentActiveItemIndex, isRightDirection ? 1 : -1);\n        // we do this so the activePoint does not fall into the blur gradient\n        const offSetXScaledActivePoint = getXScaleValue(currentSerie?.data[offsetActivePoint]);\n        const correctEndingPosition = offSetXScaledActivePoint ?? 0 - 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          lastScrollbarPosition?.current +\n          (!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        lastScrollbarPosition.current = newPosition;\n      }\n    },\n    [\n      activePoint,\n      containerRatio,\n      currentActiveItemIndex,\n      currentSerie?.data,\n      getXScaleValue,\n\n      innerWidth,\n      isZooming,\n      lastScrollbarPosition,\n      listMap,\n      setActivePoint,\n      setContainerRatio,\n      setIsZooming,\n      setMovingPosition,\n      setXScrollbarPosition,\n      setZoomStartingPosition,\n      xScale?.type,\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.js';\n\nexport const findInCircularList = (\n  list: string[],\n  from: number,\n  step = 1,\n  criteria = (item: number) => item !== undefined,\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] && criteria(i)) {\n      return i;\n    }\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    lastScrollbarPosition,\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    currentDataWithNullValues,\n    props: { xScroll, yScroll },\n  } = useContext(ChartContext);\n\n  const currentSerie = useMemo(\n    () => currentDataWithNullValues.find((d) => d.name === activePoint?.serie) ?? currentDataWithNullValues[0],\n    [activePoint?.serie, currentDataWithNullValues],\n  );\n\n  const currentActiveItemIndex = useMemo(\n    () => currentSerie?.data.findIndex((opt) => opt.key === activePoint?.key),\n    [activePoint, currentSerie],\n  );\n\n  const listMap = useMemo(\n    () =>\n      currentSerie?.data.map((d) => {\n        if (typeof d.value === 'object') return JSON.stringify(d.value);\n        return d.value?.toString();\n      }) ?? [],\n    [currentSerie?.data],\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 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(listMap, currentActiveItemIndex, step);\n      setActivePoint(currentSerie?.data[newValue]);\n\n      if (xScroll) {\n        const xValue = getXScaleValue(currentSerie?.data[newValue]);\n        if (xValue === undefined) return;\n        const barWidth = innerWidth / containerRatio;\n        const total = innerWidth * containerRatio;\n        if (total <= xValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerWidth) / containerRatio);\n        } else if (xValue > xScrollbarPosition * containerRatio + innerWidth)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (xValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerWidth) return innerWidth - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (xValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(xValue / containerRatio);\n      } else if (yScroll) {\n        const yValue = getYScaleValue(currentSerie?.data[newValue]);\n        if (yValue === undefined) return;\n        const barWidth = innerHeight / containerRatio;\n        const total = innerHeight * containerRatio;\n        if (total <= yValue) {\n          // to go from the first to last\n          setXScrollbarPosition((total - innerHeight) / containerRatio);\n        } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)\n          // if is not visible we move the scroll to the next best position\n          setXScrollbarPosition((prev) => {\n            const nextPosition = prev + (yValue / containerRatio - prev);\n            if (nextPosition + barWidth > innerHeight) return innerHeight - barWidth;\n            return nextPosition;\n          });\n        // move backwards - 2 because focus ring in bars\n        else if (yValue < xScrollbarPosition * containerRatio) setXScrollbarPosition(yValue / containerRatio);\n      }\n    },\n    [\n      listMap,\n      currentActiveItemIndex,\n      setActivePoint,\n      currentSerie?.data,\n      xScroll,\n      yScroll,\n      getXScaleValue,\n      innerWidth,\n      containerRatio,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      getYScaleValue,\n      innerHeight,\n    ],\n  );\n\n  const changeSerie = useCallback(\n    (step: number) => {\n      const nextSerieIndex = findInCircularList(\n        groups,\n        groups.findIndex((item) => item === currentSerie.name),\n        step,\n        (idx: number) => currentDataWithNullValues[idx].data[currentActiveItemIndex].value !== null,\n      );\n      setActivePoint(currentDataWithNullValues[nextSerieIndex].data[currentActiveItemIndex]);\n    },\n    [groups, setActivePoint, currentActiveItemIndex, currentSerie.name, currentDataWithNullValues],\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?.type === 'BAND') 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?.type === 'BAND') 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      const xScaledActivePoint = getXScaleValue(activePoint);\n      if (isShiftKey && !isZooming && xScale?.type !== 'BAND' && xScaledActivePoint) {\n        setIsZooming(true);\n        setZoomStartingPosition(xScaledActivePoint - xScrollbarPosition * containerRatio);\n      }\n    },\n    [\n      activePoint,\n      changeSerie,\n      containerRatio,\n      getXScaleValue,\n      isZooming,\n      navigateSerie,\n      setIsZooming,\n      setZoomStartingPosition,\n      xScale?.type,\n      xScrollbarPosition,\n      yScale?.type,\n    ],\n  );\n\n  const handleOnKeyUp: React.KeyboardEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      if (!activePoint) return;\n\n      if (!isZooming && xScale?.type === 'BAND') return;\n      const { shiftKey, code } = e;\n      const isShiftKey = ['ShiftLeft', 'ShiftRight'].includes(code);\n\n      const xScaledActivePoint = getXScaleValue(activePoint);\n\n      if (shiftKey && ['ArrowRight', 'ArrowLeft'].includes(code) && xScaledActivePoint) {\n        setMovingPosition(xScaledActivePoint - xScrollbarPosition * containerRatio);\n      }\n      if (isShiftKey && xScaledActivePoint) {\n        setIsZooming(false);\n        setZoomStartingPosition(0);\n        setMovingPosition(0);\n        const endingPosition = xScaledActivePoint - 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(listMap, currentActiveItemIndex, isRightDirection ? 1 : -1);\n        // we do this so the activePoint does not fall into the blur gradient\n        const offSetXScaledActivePoint = getXScaleValue(currentSerie?.data[offsetActivePoint]);\n        const correctEndingPosition = offSetXScaledActivePoint ?? 0 - 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          lastScrollbarPosition.current +\n          (!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        lastScrollbarPosition.current = newPosition;\n      }\n    },\n    [\n      activePoint,\n      containerRatio,\n      currentActiveItemIndex,\n      currentSerie?.data,\n      getXScaleValue,\n\n      innerWidth,\n      isZooming,\n      lastScrollbarPosition,\n      listMap,\n      setActivePoint,\n      setContainerRatio,\n      setIsZooming,\n      setMovingPosition,\n      setXScrollbarPosition,\n      setZoomStartingPosition,\n      xScale?.type,\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.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useScales.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { Series } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types.js';\nimport { getStackedIndex } from '../helpers/index.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { TIME_OFFSET } from '../../constants.js';\nimport { BandScale, LinearScale, TimeLinearScale, LogScale } from '../scales/index.js';\ninterface UseScales {\n  props: DSChartT.Props;\n  innerHeight: number;\n  innerWidth: number;\n  originalSeries: DSChartT.SeriesT[];\n  stackedData: Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n  currentData: DSChartT.InternalData;\n  groups: string[];\n  containerRatio: number;\n  scalesStackedDataMap: string[];\n}\n\nexport const useScales = ({\n  props,\n  originalSeries: series,\n  innerHeight,\n  innerWidth,\n  stackedData,\n  currentData,\n  scalesStackedDataMap,\n  containerRatio,\n}: UseScales) => {\n  const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll, yScroll } = props;\n\n  const getBandDomain = useCallback(\n    (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n    [series],\n  );\n\n  const getPadding = (domainPadding?: number | Array<number>) =>\n    typeof domainPadding === 'number' ? [domainPadding, domainPadding] : domainPadding ?? [0, 0];\n\n  const getLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n      const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n      const end = axis.max ?? undefined;\n      const data = currentData\n        // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n        .filter((serie) => serie.scale === axisString || axisString === 'x')\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n      const dataFlattened = data.flat();\n      const stackedDataFlatten = stackedData.filter((_, i) => scalesStackedDataMap[i] === axisString).flat();\n      const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n      const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n      const getMin = () => {\n        const aux: (number | Date)[] = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (types.includes(typeof minData) && minData !== undefined) aux.push(minData);\n        if (typeof minStackedData === 'number') aux.push(minStackedData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux: (number | Date)[] = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (typeof end === 'number' || typeof end === 'object') aux.push(end);\n        if (types.includes(typeof maxData) && maxData !== undefined) aux.push(maxData);\n        if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n      if (typeof minRange === 'number' && typeof maxRange === 'number') {\n        // @TODO fix this domain padding\n        return [\n          minRange - (maxRange - minRange) * (leftPadding ?? 0),\n          maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n        ];\n      }\n      // timelinear case\n      if (typeof minRange === 'object' && typeof maxRange === 'object') {\n        if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n          return [\n            TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n            TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n          ];\n        }\n        return [minRange, maxRange];\n      }\n\n      return [];\n    },\n    [currentData, scalesStackedDataMap, stackedData],\n  );\n\n  // d3 scale functions\n  const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n  const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n    scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n  const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n  const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n  // dataviz scales\n\n  const scaleFactory = useCallback(\n    (axis: 'x' | 'y' | 'y2', axisProps?: DSChartT.AxisT, range: number[] = []) => {\n      if (!axisProps) return null;\n      if (['time', 'datetime'].includes(axisProps?.type)) {\n        return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis) as Date[], range), axisProps);\n      }\n\n      if (axisProps?.type === 'linear' || (['y', 'y2'].includes(axis) && axisProps?.type === undefined)) {\n        return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis) as number[], range), axisProps);\n      }\n\n      if (axisProps?.type === 'log')\n        return new LogScale(getScaleLog(getLinearDomain(axisProps, axis) as number[], range), axisProps);\n\n      if (axisProps?.type === 'band' || (axis === 'x' && axisProps?.type === undefined)) {\n        // we need to reverse the range in case is a horizontal bar char\n        const realRange = axis === 'y' ? range.reverse() : range;\n        return new BandScale(getScaleBand(getBandDomain(axisProps), realRange), axisProps);\n      }\n      return null;\n    },\n    [getBandDomain, getLinearDomain],\n  );\n\n  const xRangeFrom = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);\n  const xRangeTo = useMemo(\n    () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),\n    [containerRatio, innerWidth, xAxis?.plotRange, xScroll],\n  );\n\n  const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);\n  const yRangeFrom = useMemo(\n    () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, yAxis?.plotRange, yScroll],\n  );\n\n  const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);\n  const y2RangeFrom = useMemo(\n    () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, y2Axis?.plotRange, yScroll],\n  );\n\n  const xScale = useMemo(\n    () => scaleFactory('x', xAxis, [xRangeFrom, xRangeTo]),\n    [scaleFactory, xAxis, xRangeFrom, xRangeTo],\n  );\n\n  const yScale = useMemo(\n    () => scaleFactory('y', yAxis, [yRangeFrom, yRangeTo]),\n    [scaleFactory, yAxis, yRangeFrom, yRangeTo],\n  );\n\n  const y2Scale = useMemo(\n    () => scaleFactory('y2', y2Axis, [y2RangeFrom, y2RangeTo]),\n    [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo],\n  );\n\n  const colorScale = useMemo(\n    () =>\n      scaleOrdinal()\n        .domain(series.map((d) => d.name))\n        .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n        .unknown('red'),\n    [series],\n  );\n  // get only groups bars to calculate the subgroup scale\n\n  const subgroupsWithBars = useMemo(() => {\n    const data = currentData\n      .filter(\n        (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n      )\n      .map((serie) => serie.name);\n\n    if (stackedSeries?.length) {\n      stackedSeries.forEach((stackedGroup, i) => {\n        if (stackedGroup.length > 0) data.push(`stacked-data-${i}`);\n      });\n    }\n    return data;\n  }, [currentData, stackedSeries]);\n\n  const getBandwidth = useCallback(() => {\n    if (xScale?.type === 'BAND') {\n      return xScale?.getBandwidth();\n    }\n    if (yScale?.type === 'BAND') {\n      return yScale?.getBandwidth();\n    }\n    // @todo explore this. is to create bars with a linear axis\n    const bars = currentData.filter((serie) => serie.type === 'bar');\n    const barsLength = bars.length;\n    if (!barsLength) return 0;\n    // we get the size of the bars using the length of the data or the ticks amounts\n    // the biggest is the one we use to get the real width we need.\n    // we are doing calculations only for x axis because we are not expecting\n    // y axis linear cases.\n    const maxDataLength = Math.max(...bars.map((bar) => bar.data.length));\n    if (xScale && xScale instanceof BandScale) return 0;\n    const divisor = Math.max(\n      maxDataLength,\n      xScale?.scale.ticks().length ?? 0,\n      xScale?.getTicks(innerWidth, '').length ?? 0,\n      1,\n    );\n\n    const width = innerWidth / divisor;\n    if (containerRatio > 1) {\n      return Math.max(0.5, width * containerRatio);\n    }\n    // this reduce the width of the bars under small width graphs\n    const modificator = innerWidth > 400 ? 0.5 : 0.8;\n    return Math.max(0.5, Math.min(20, Math.trunc(width - width * modificator)));\n  }, [currentData, innerWidth, containerRatio, xScale, yScale]);\n\n  const subGroupScale = useMemo(\n    () =>\n      getBandwidth()\n        ? scaleBand()\n            .domain(subgroupsWithBars)\n            .range([0, getBandwidth()])\n            .paddingInner(0.55)\n            .padding(0.2)\n            .paddingOuter(0.01)\n        : null,\n    [getBandwidth, subgroupsWithBars],\n  );\n\n  return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { Series } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types.js';\nimport { getStackedIndex } from '../helpers/index.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { TIME_OFFSET } from '../../constants.js';\nimport { BandScale, LinearScale, TimeLinearScale, LogScale } from '../scales/index.js';\ninterface UseScales {\n  props: DSChartT.Props;\n  innerHeight: number;\n  innerWidth: number;\n  originalSeries: DSChartT.SeriesT[];\n  stackedData: Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n  currentData: DSChartT.InternalData;\n  groups: string[];\n  containerRatio: number;\n  scalesStackedDataMap: string[];\n}\n\nexport const useScales = ({\n  props,\n  originalSeries: series,\n  innerHeight,\n  innerWidth,\n  stackedData,\n  currentData,\n  scalesStackedDataMap,\n  containerRatio,\n}: UseScales) => {\n  const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll, yScroll } = props;\n\n  const getBandDomain = useCallback(\n    (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n    [series],\n  );\n\n  const getPadding = (domainPadding?: number | Array<number>) =>\n    typeof domainPadding === 'number' ? [domainPadding, domainPadding] : (domainPadding ?? [0, 0]);\n\n  const getLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n      const begin = axis?.beginAtZero ? 0 : (axis.min ?? undefined);\n      const end = axis.max ?? undefined;\n      const data = currentData\n        // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n        .filter((serie) => serie.scale === axisString || axisString === 'x')\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n      const dataFlattened = data.flat();\n      const stackedDataFlatten = stackedData.filter((_, i) => scalesStackedDataMap[i] === axisString).flat();\n      const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n      const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n      const getMin = () => {\n        const aux: (number | Date)[] = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (types.includes(typeof minData) && minData !== undefined) aux.push(minData);\n        if (typeof minStackedData === 'number') aux.push(minStackedData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux: (number | Date)[] = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (typeof end === 'number' || typeof end === 'object') aux.push(end);\n        if (types.includes(typeof maxData) && maxData !== undefined) aux.push(maxData);\n        if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n      if (typeof minRange === 'number' && typeof maxRange === 'number') {\n        // @TODO fix this domain padding\n        return [\n          minRange - (maxRange - minRange) * (leftPadding ?? 0),\n          maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n        ];\n      }\n      // timelinear case\n      if (typeof minRange === 'object' && typeof maxRange === 'object') {\n        if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n          return [\n            TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n            TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n          ];\n        }\n        return [minRange, maxRange];\n      }\n\n      return [];\n    },\n    [currentData, scalesStackedDataMap, stackedData],\n  );\n\n  // d3 scale functions\n  const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n  const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n    scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n  const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n  const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n  // dataviz scales\n\n  const scaleFactory = useCallback(\n    (axis: 'x' | 'y' | 'y2', axisProps?: DSChartT.AxisT, range: number[] = []) => {\n      if (!axisProps) return null;\n      if (['time', 'datetime'].includes(axisProps?.type)) {\n        return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis) as Date[], range), axisProps);\n      }\n\n      if (axisProps?.type === 'linear' || (['y', 'y2'].includes(axis) && axisProps?.type === undefined)) {\n        return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis) as number[], range), axisProps);\n      }\n\n      if (axisProps?.type === 'log')\n        return new LogScale(getScaleLog(getLinearDomain(axisProps, axis) as number[], range), axisProps);\n\n      if (axisProps?.type === 'band' || (axis === 'x' && axisProps?.type === undefined)) {\n        // we need to reverse the range in case is a horizontal bar char\n        const realRange = axis === 'y' ? range.reverse() : range;\n        return new BandScale(getScaleBand(getBandDomain(axisProps), realRange), axisProps);\n      }\n      return null;\n    },\n    [getBandDomain, getLinearDomain],\n  );\n\n  const xRangeFrom = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);\n  const xRangeTo = useMemo(\n    () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),\n    [containerRatio, innerWidth, xAxis?.plotRange, xScroll],\n  );\n\n  const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);\n  const yRangeFrom = useMemo(\n    () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, yAxis?.plotRange, yScroll],\n  );\n\n  const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);\n  const y2RangeFrom = useMemo(\n    () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, y2Axis?.plotRange, yScroll],\n  );\n\n  const xScale = useMemo(\n    () => scaleFactory('x', xAxis, [xRangeFrom, xRangeTo]),\n    [scaleFactory, xAxis, xRangeFrom, xRangeTo],\n  );\n\n  const yScale = useMemo(\n    () => scaleFactory('y', yAxis, [yRangeFrom, yRangeTo]),\n    [scaleFactory, yAxis, yRangeFrom, yRangeTo],\n  );\n\n  const y2Scale = useMemo(\n    () => scaleFactory('y2', y2Axis, [y2RangeFrom, y2RangeTo]),\n    [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo],\n  );\n\n  const colorScale = useMemo(\n    () =>\n      scaleOrdinal()\n        .domain(series.map((d) => d.name))\n        .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n        .unknown('red'),\n    [series],\n  );\n  // get only groups bars to calculate the subgroup scale\n\n  const subgroupsWithBars = useMemo(() => {\n    const data = currentData\n      .filter(\n        (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n      )\n      .map((serie) => serie.name);\n\n    if (stackedSeries?.length) {\n      stackedSeries.forEach((stackedGroup, i) => {\n        if (stackedGroup.length > 0) data.push(`stacked-data-${i}`);\n      });\n    }\n    return data;\n  }, [currentData, stackedSeries]);\n\n  const getBandwidth = useCallback(() => {\n    if (xScale?.type === 'BAND') {\n      return xScale?.getBandwidth();\n    }\n    if (yScale?.type === 'BAND') {\n      return yScale?.getBandwidth();\n    }\n    // @todo explore this. is to create bars with a linear axis\n    const bars = currentData.filter((serie) => serie.type === 'bar');\n    const barsLength = bars.length;\n    if (!barsLength) return 0;\n    // we get the size of the bars using the length of the data or the ticks amounts\n    // the biggest is the one we use to get the real width we need.\n    // we are doing calculations only for x axis because we are not expecting\n    // y axis linear cases.\n    const maxDataLength = Math.max(...bars.map((bar) => bar.data.length));\n    if (xScale && xScale instanceof BandScale) return 0;\n    const divisor = Math.max(\n      maxDataLength,\n      xScale?.scale.ticks().length ?? 0,\n      xScale?.getTicks(innerWidth, '').length ?? 0,\n      1,\n    );\n\n    const width = innerWidth / divisor;\n    if (containerRatio > 1) {\n      return Math.max(0.5, width * containerRatio);\n    }\n    // this reduce the width of the bars under small width graphs\n    const modificator = innerWidth > 400 ? 0.5 : 0.8;\n    return Math.max(0.5, Math.min(20, Math.trunc(width - width * modificator)));\n  }, [currentData, innerWidth, containerRatio, xScale, yScale]);\n\n  const subGroupScale = useMemo(\n    () =>\n      getBandwidth()\n        ? scaleBand()\n            .domain(subgroupsWithBars)\n            .range([0, getBandwidth()])\n            .paddingInner(0.55)\n            .padding(0.2)\n            .paddingOuter(0.01)\n        : null,\n    [getBandwidth, subgroupsWithBars],\n  );\n\n  return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/graphs/Chart/helpers/useVirtualizedSeries.js CHANGED Viewed

@@ -23,7 +23,8 @@ const useVirtualizedSeries = () => {
           return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) - innerWidth && xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth * 2;
         })
       }));
-    } else if (yScroll) {
+    }
+    if (yScroll) {
       return data.map((serie) => ({
         ...serie,
         data: serie.data.filter((datum) => {

package/dist/esm/graphs/Chart/helpers/useVirtualizedSeries.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/helpers/useVirtualizedSeries.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 { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext.js';\n\nexport const useVirtualizedSeries = () => {\n  const {\n    containerRatio,\n    innerWidth,\n    xScrollbarPosition,\n    yScale,\n    getXScaleValue,\n    getYScaleValue,\n    innerHeight,\n    currentData: data,\n    props: { xScroll, yScroll },\n  } = useContext(ChartContext);\n  return useMemo(() => {\n    if (xScroll) {\n      return data.map((serie) => ({\n        ...serie,\n        data: serie.data.filter((datum) => {\n          const xScaleValue = getXScaleValue(datum);\n          if (xScaleValue === undefined) return false;\n          return (\n            xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) - innerWidth &&\n            xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth * 2\n          );\n        }),\n      }));\n    } else if (yScroll) {\n      return data.map((serie) => ({\n        ...serie,\n        data: serie.data.filter((datum) => {\n          const yScaleValue = getYScaleValue(datum);\n          const offset = yScale?.getBandwidth() ?? 20;\n          if (yScaleValue === undefined) return false;\n          return (\n            yScaleValue > xScrollbarPosition * (containerRatio ?? 1) - offset &&\n            yScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerHeight\n          );\n        }),\n      }));\n    }\n    return data;\n  }, [\n    containerRatio,\n    data,\n    getXScaleValue,\n    getYScaleValue,\n    innerHeight,\n    innerWidth,\n    xScroll,\n    xScrollbarPosition,\n    yScale,\n    yScroll,\n  ]);\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,YAAY,eAAe;AACpC,SAAS,oBAAoB;AAEtB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC5B,IAAI,WAAW,YAAY;AAC3B,SAAO,QAAQ,MAAM;AACnB,QAAI,SAAS;AACX,aAAO,KAAK,IAAI,CAAC,WAAW;AAAA,QAC1B,GAAG;AAAA,QACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,gBAAM,cAAc,eAAe,KAAK;AACxC,cAAI,gBAAgB,OAAW,QAAO;AACtC,iBACE,eAAe,sBAAsB,kBAAkB,KAAK,cAC5D,eAAe,sBAAsB,kBAAkB,KAAK,aAAa;AAAA,QAE7E,CAAC;AAAA,MACH,EAAE;AAAA,IACJ,WAAW,SAAS;AAClB,aAAO,KAAK,IAAI,CAAC,WAAW;AAAA,QAC1B,GAAG;AAAA,QACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,gBAAM,cAAc,eAAe,KAAK;AACxC,gBAAM,SAAS,QAAQ,aAAa,KAAK;AACzC,cAAI,gBAAgB,OAAW,QAAO;AACtC,iBACE,cAAc,sBAAsB,kBAAkB,KAAK,UAC3D,cAAc,sBAAsB,kBAAkB,KAAK;AAAA,QAE/D,CAAC;AAAA,MACH,EAAE;AAAA,IACJ;AACA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
+  "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 { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext.js';\n\nexport const useVirtualizedSeries = () => {\n  const {\n    containerRatio,\n    innerWidth,\n    xScrollbarPosition,\n    yScale,\n    getXScaleValue,\n    getYScaleValue,\n    innerHeight,\n    currentData: data,\n    props: { xScroll, yScroll },\n  } = useContext(ChartContext);\n  return useMemo(() => {\n    if (xScroll) {\n      return data.map((serie) => ({\n        ...serie,\n        data: serie.data.filter((datum) => {\n          const xScaleValue = getXScaleValue(datum);\n          if (xScaleValue === undefined) return false;\n          return (\n            xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) - innerWidth &&\n            xScaleValue <= xScrollbarPosition * (containerRatio ?? 1) + innerWidth * 2\n          );\n        }),\n      }));\n    }\n    if (yScroll) {\n      return data.map((serie) => ({\n        ...serie,\n        data: serie.data.filter((datum) => {\n          const yScaleValue = getYScaleValue(datum);\n          const offset = yScale?.getBandwidth() ?? 20;\n          if (yScaleValue === undefined) return false;\n          return (\n            yScaleValue > xScrollbarPosition * (containerRatio ?? 1) - offset &&\n            yScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerHeight\n          );\n        }),\n      }));\n    }\n    return data;\n  }, [\n    containerRatio,\n    data,\n    getXScaleValue,\n    getYScaleValue,\n    innerHeight,\n    innerWidth,\n    xScroll,\n    xScrollbarPosition,\n    yScale,\n    yScroll,\n  ]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,YAAY,eAAe;AACpC,SAAS,oBAAoB;AAEtB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC5B,IAAI,WAAW,YAAY;AAC3B,SAAO,QAAQ,MAAM;AACnB,QAAI,SAAS;AACX,aAAO,KAAK,IAAI,CAAC,WAAW;AAAA,QAC1B,GAAG;AAAA,QACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,gBAAM,cAAc,eAAe,KAAK;AACxC,cAAI,gBAAgB,OAAW,QAAO;AACtC,iBACE,eAAe,sBAAsB,kBAAkB,KAAK,cAC5D,eAAe,sBAAsB,kBAAkB,KAAK,aAAa;AAAA,QAE7E,CAAC;AAAA,MACH,EAAE;AAAA,IACJ;AACA,QAAI,SAAS;AACX,aAAO,KAAK,IAAI,CAAC,WAAW;AAAA,QAC1B,GAAG;AAAA,QACH,MAAM,MAAM,KAAK,OAAO,CAAC,UAAU;AACjC,gBAAM,cAAc,eAAe,KAAK;AACxC,gBAAM,SAAS,QAAQ,aAAa,KAAK;AACzC,cAAI,gBAAgB,OAAW,QAAO;AACtC,iBACE,cAAc,sBAAsB,kBAAkB,KAAK,UAC3D,cAAc,sBAAsB,kBAAkB,KAAK;AAAA,QAE/D,CAAC;AAAA,MACH,EAAE;AAAA,IACJ;AACA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/ChartContainer.js CHANGED Viewed

@@ -1,25 +1,25 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useMemo, useCallback } from "react";
-import { StyledSVGWrapper } from "../styles.js";
+import { useCallback, useContext, useMemo } from "react";
 import { ChartContext } from "../ChartContext.js";
 import { useKeyboardNavigation } from "../config/useKeyboardNavigation.js";
-import { Legend } from "./Legend/Legend.js";
-import { Labels } from "./Labels/index.js";
-import { BlurMask } from "./Scroller/BlurMask.js";
-import { ClipPaths } from "./ClipPaths.js";
-import { ScrollableContainerX } from "./Scroller/ScrollableContainerX.js";
-import { ScrollableContainerY } from "./Scroller/ScrollableContainerY.js";
+import { StyledSVGWrapper } from "../styles.js";
 import { AxisBottom } from "./Axis/AxisBottom.js";
-import { AxisRight } from "./Axis/AxisRight.js";
 import { AxisLeft } from "./Axis/AxisLeft.js";
-import { SeriesFactory } from "./SeriesFactory.js";
+import { AxisRight } from "./Axis/AxisRight.js";
+import { ClipPaths } from "./ClipPaths.js";
+import { Labels } from "./Labels/index.js";
+import { Legend } from "./Legend/Legend.js";
 import { Scrapper } from "./Scrapper/Scrapper.js";
 import { VerticalScrapper } from "./Scrapper/VerticalScrapper.js";
+import { BlurMask } from "./Scroller/BlurMask.js";
 import { Controllers } from "./Scroller/Controllers.js";
+import { ScrollableContainerX } from "./Scroller/ScrollableContainerX.js";
+import { ScrollableContainerY } from "./Scroller/ScrollableContainerY.js";
+import { SeriesFactory } from "./SeriesFactory.js";
 const ChartContainer = () => {
   const {
-    props: { y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },
+    props: { y2Axis, yScroll, xScroll, scrapper, width: userWidth },
     activePoint,
     internalMargin,
     setScrapperPosY,
@@ -55,18 +55,18 @@ const ChartContainer = () => {
     (e) => {
       if (!isGrabbed) return;
       e.preventDefault();
-      const clientX = e.clientX;
-      const clientY = e.clientY;
+      const { clientX } = e;
+      const { clientY } = e;
       setActivePoint(null);
       if (xScroll) {
-        const newPosition = lastScrollbarPosition?.current + clientX - startPosition;
+        const newPosition = lastScrollbarPosition.current + clientX - startPosition;
         if (newPosition < 0) setXScrollbarPosition(0);
         else if (newPosition > innerWidth - innerWidth / containerRatio)
           setXScrollbarPosition(innerWidth - innerWidth / containerRatio);
         else setXScrollbarPosition(newPosition);
       }
       if (yScroll) {
-        const newPosition = lastScrollbarPosition?.current + clientY - startPosition;
+        const newPosition = lastScrollbarPosition.current + clientY - startPosition;
         if (newPosition < 0) setXScrollbarPosition(0);
         else if (newPosition > innerHeight - innerHeight / containerRatio)
           setXScrollbarPosition(innerHeight - innerHeight / containerRatio);
@@ -98,7 +98,8 @@ const ChartContainer = () => {
         /* @__PURE__ */ jsx(AxisLeft, {}),
         /* @__PURE__ */ jsx(ScrollableContainerX, {})
       ] });
-    } else if (yScroll) {
+    }
+    if (yScroll) {
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         y2Axis ? /* @__PURE__ */ jsx(AxisRight, {}) : null,
         /* @__PURE__ */ jsx(AxisBottom, {}),
@@ -113,7 +114,7 @@ const ChartContainer = () => {
       scrapper?.type === "horizontal" ? /* @__PURE__ */ jsx(Scrapper, {}) : null,
       scrapper?.type === "vertical" ? /* @__PURE__ */ jsx(VerticalScrapper, {}) : null
     ] });
-  }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);
+  }, [currentData.length, scrapper?.type, xScroll, y2Axis, yScroll]);
   return /* @__PURE__ */ jsx(
     StyledSVGWrapper,
     {

package/dist/esm/graphs/Chart/parts/ChartContainer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/ChartContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledSVGWrapper } from '../styles.js';\nimport { ChartContext } from '../ChartContext.js';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation.js';\nimport { Legend } from './Legend/Legend.js';\nimport { Labels } from './Labels/index.js';\nimport { BlurMask } from './Scroller/BlurMask.js';\nimport { ClipPaths } from './ClipPaths.js';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX.js';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY.js';\nimport { AxisBottom } from './Axis/AxisBottom.js';\nimport { AxisRight } from './Axis/AxisRight.js';\nimport { AxisLeft } from './Axis/AxisLeft.js';\nimport { SeriesFactory } from './SeriesFactory.js';\nimport { Scrapper } from './Scrapper/Scrapper.js';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper.js';\nimport { Controllers } from './Scroller/Controllers.js';\nexport const ChartContainer = () => {\n  const {\n    props: { y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastScrollbarPosition,\n    setIsScrollbarVisible,\n    currentData,\n    width,\n    height,\n  } = useContext(ChartContext);\n\n  const { onInputKeyDown, handleOnKeyUp, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n    setActivePoint(null);\n  }, [setActivePoint, setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY(-1);\n    setScrapperPosX(-1);\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      e.preventDefault();\n      const clientX = e.clientX;\n      const clientY = e.clientY;\n\n      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastScrollbarPosition?.current + clientX - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerWidth - innerWidth / containerRatio)\n          setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n      if (yScroll) {\n        const newPosition = lastScrollbarPosition?.current + clientY - startPosition;\n\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerHeight - innerHeight / containerRatio)\n          setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n    },\n    [\n      isGrabbed,\n      setActivePoint,\n      xScroll,\n      yScroll,\n      lastScrollbarPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastScrollbarPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastScrollbarPosition, setIsGrabbed, xScrollbarPosition]);\n\n  const render = useMemo(() => {\n    if (currentData.length === 0) return null;\n    if (xScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    } else if (yScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisBottom />\n          <ScrollableContainerY />\n        </>\n      );\n    }\n    return (\n      <>\n        {y2Axis ? <AxisRight /> : null}\n        <AxisLeft />\n        <AxisBottom />\n        <SeriesFactory />\n        {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n        {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n      </>\n    );\n  }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);\n  return (\n    <StyledSVGWrapper\n      innerRef={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      onKeyUp={handleOnKeyUp}\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: userWidth, height }}\n    >\n      {width !== 0 ? (\n        <svg width={width} height={height}>\n          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n          <ClipPaths />\n          <BlurMask />\n          <g>\n            <g>\n              <Controllers />\n              <Legend />\n              <Labels />\n            </g>\n            <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n              {render}\n              {/* <ActivePoint/> @todo */}\n            </g>\n          </g>\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext.js';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation.js';\nimport { StyledSVGWrapper } from '../styles.js';\nimport { AxisBottom } from './Axis/AxisBottom.js';\nimport { AxisLeft } from './Axis/AxisLeft.js';\nimport { AxisRight } from './Axis/AxisRight.js';\nimport { ClipPaths } from './ClipPaths.js';\nimport { Labels } from './Labels/index.js';\nimport { Legend } from './Legend/Legend.js';\nimport { Scrapper } from './Scrapper/Scrapper.js';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper.js';\nimport { BlurMask } from './Scroller/BlurMask.js';\nimport { Controllers } from './Scroller/Controllers.js';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX.js';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY.js';\nimport { SeriesFactory } from './SeriesFactory.js';\nexport const ChartContainer = () => {\n  const {\n    props: { y2Axis, yScroll, xScroll, scrapper, width: userWidth },\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastScrollbarPosition,\n    setIsScrollbarVisible,\n    currentData,\n    width,\n    height,\n  } = useContext(ChartContext);\n\n  const { onInputKeyDown, handleOnKeyUp, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n    setActivePoint(null);\n  }, [setActivePoint, setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY(-1);\n    setScrapperPosX(-1);\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      e.preventDefault();\n      const { clientX } = e;\n      const { clientY } = e;\n\n      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastScrollbarPosition.current + clientX - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerWidth - innerWidth / containerRatio)\n          setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n      if (yScroll) {\n        const newPosition = lastScrollbarPosition.current + clientY - startPosition;\n\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerHeight - innerHeight / containerRatio)\n          setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n    },\n    [\n      isGrabbed,\n      setActivePoint,\n      xScroll,\n      yScroll,\n      lastScrollbarPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastScrollbarPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastScrollbarPosition, setIsGrabbed, xScrollbarPosition]);\n\n  const render = useMemo(() => {\n    if (currentData.length === 0) return null;\n    if (xScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    }\n    if (yScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisBottom />\n          <ScrollableContainerY />\n        </>\n      );\n    }\n    return (\n      <>\n        {y2Axis ? <AxisRight /> : null}\n        <AxisLeft />\n        <AxisBottom />\n        <SeriesFactory />\n        {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n        {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n      </>\n    );\n  }, [currentData.length, scrapper?.type, xScroll, y2Axis, yScroll]);\n  return (\n    <StyledSVGWrapper\n      innerRef={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      onKeyUp={handleOnKeyUp}\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: userWidth, height }}\n    >\n      {width !== 0 ? (\n        <svg width={width} height={height}>\n          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n          <ClipPaths />\n          <BlurMask />\n          <g>\n            <g>\n              <Controllers />\n              <Legend />\n              <Labels />\n            </g>\n            <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n              {render}\n              {/* <ActivePoint/> @todo */}\n            </g>\n          </g>\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Legend/RightLegend.js CHANGED Viewed

@@ -25,7 +25,7 @@ const RightLegend = () => {
       transform: `translate(${innerWidth + internalMargin.left + axisRightWidth + rightLabelWidth},${yTransform})`,
       children: [
         /* @__PURE__ */ jsx("rect", { width: "20", height: 1, fill: "transparent" }),
-        /* @__PURE__ */ jsx("g", { transform: `translate(0,0)`, children: series.map((serie, i) => /* @__PURE__ */ jsx("g", { className: "tick", transform: `translate(30,${i * 30})`, children: /* @__PURE__ */ jsx(LegendItem, { domainValue: serie.name }) }, serie.name)) })
+        /* @__PURE__ */ jsx("g", { transform: "translate(0,0)", children: series.map((serie, i) => /* @__PURE__ */ jsx("g", { className: "tick", transform: `translate(30,${i * 30})`, children: /* @__PURE__ */ jsx(LegendItem, { domainValue: serie.name }) }, serie.name)) })
       ]
     }
   );

package/dist/esm/graphs/Chart/parts/Legend/RightLegend.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/RightLegend.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useState, useEffect } from 'react';\nimport { ChartContext } from '../../ChartContext.js';\nimport { LegendItem } from './LegendItem.js';\n\nexport const RightLegend = () => {\n  const {\n    innerWidth,\n    innerHeight,\n    rightLabelWidth,\n    axisRightWidth,\n    internalMargin,\n    rightLegendHeight,\n    setRightLegend,\n    originalSeries: series,\n  } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useEffect(() => {\n    setYTransform(innerHeight / 2 + internalMargin.top - rightLegendHeight / 2);\n  }, [innerHeight, internalMargin.top, rightLegendHeight]);\n\n  return (\n    <g\n      ref={setRightLegend}\n      transform={`translate(${innerWidth + internalMargin.left + axisRightWidth + rightLabelWidth},${yTransform})`}\n    >\n      <rect width=\"20\" height={1} fill=\"transparent\" />\n      <g transform={`translate(0,0)`}>\n        {series.map((serie, i) => (\n          <g className=\"tick\" transform={`translate(30,${i * 30})`} key={serie.name}>\n            <LegendItem domainValue={serie.name} />\n          </g>\n        ))}\n      </g>\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACuBnB,SAIE,KAJF;AAvBJ,SAAgB,YAAY,UAAU,iBAAiB;AACvD,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI,WAAW,YAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,YAAU,MAAM;AACd,kBAAc,cAAc,IAAI,eAAe,MAAM,oBAAoB,CAAC;AAAA,EAC5E,GAAG,CAAC,aAAa,eAAe,KAAK,iBAAiB,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,aAAa,eAAe,OAAO,iBAAiB,eAAe,IAAI,UAAU;AAAA,MAEzG;AAAA,4BAAC,UAAK,OAAM,MAAK,QAAQ,GAAG,MAAK,eAAc;AAAA,QAC/C,oBAAC,OAAE,WAAW,kBACX,iBAAO,IAAI,CAAC,OAAO,MAClB,oBAAC,OAAE,WAAU,QAAO,WAAW,gBAAgB,IAAI,EAAE,KACnD,8BAAC,cAAW,aAAa,MAAM,MAAM,KADwB,MAAM,IAErE,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useState, useEffect } from 'react';\nimport { ChartContext } from '../../ChartContext.js';\nimport { LegendItem } from './LegendItem.js';\n\nexport const RightLegend = () => {\n  const {\n    innerWidth,\n    innerHeight,\n    rightLabelWidth,\n    axisRightWidth,\n    internalMargin,\n    rightLegendHeight,\n    setRightLegend,\n    originalSeries: series,\n  } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useEffect(() => {\n    setYTransform(innerHeight / 2 + internalMargin.top - rightLegendHeight / 2);\n  }, [innerHeight, internalMargin.top, rightLegendHeight]);\n\n  return (\n    <g\n      ref={setRightLegend}\n      transform={`translate(${innerWidth + internalMargin.left + axisRightWidth + rightLabelWidth},${yTransform})`}\n    >\n      <rect width=\"20\" height={1} fill=\"transparent\" />\n      <g transform=\"translate(0,0)\">\n        {series.map((serie, i) => (\n          <g className=\"tick\" transform={`translate(30,${i * 30})`} key={serie.name}>\n            <LegendItem domainValue={serie.name} />\n          </g>\n        ))}\n      </g>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBnB,SAIE,KAJF;AAvBJ,SAAgB,YAAY,UAAU,iBAAiB;AACvD,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI,WAAW,YAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,YAAU,MAAM;AACd,kBAAc,cAAc,IAAI,eAAe,MAAM,oBAAoB,CAAC;AAAA,EAC5E,GAAG,CAAC,aAAa,eAAe,KAAK,iBAAiB,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,aAAa,eAAe,OAAO,iBAAiB,eAAe,IAAI,UAAU;AAAA,MAEzG;AAAA,4BAAC,UAAK,OAAM,MAAK,QAAQ,GAAG,MAAK,eAAc;AAAA,QAC/C,oBAAC,OAAE,WAAU,kBACV,iBAAO,IAAI,CAAC,OAAO,MAClB,oBAAC,OAAE,WAAU,QAAO,WAAW,gBAAgB,IAAI,EAAE,KACnD,8BAAC,cAAW,aAAa,MAAM,MAAM,KADwB,MAAM,IAErE,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Scrapper/ScrapperLine.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scrapper/ScrapperLine.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext.js';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\ninterface ScrapperLineProps {\n  yPosition: number;\n  datum: DSChartT.ScrapperDatum[];\n}\n\nexport const ScrapperLine: React.ComponentType<ScrapperLineProps> = ({ yPosition, datum }) => {\n  const {\n    scrapperPosY,\n    setScrapperPosY,\n    innerWidth,\n    yScale,\n    setActivePoint,\n    isGrabbed,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<HTMLOrSVGElement | null>(null);\n\n  const yPositionString = yPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosY(yPositionString);\n    setActivePoint(null);\n  }, [isGrabbed, setScrapperPosY, setActivePoint, yPositionString]);\n\n  const strokeDetectorWidth = yScale?.type === 'BAND' ? yScale?.getBandwidth() : '4px';\n\n  return (\n    <g>\n      {scrapperPosY === yPositionString ? (\n        <g>\n          {TooltipRenderer ? (\n            <foreignObject>\n              <DSPopperJS\n                withoutAnimation\n                withoutArrow\n                customOffset={[0, 5]}\n                referenceElement={referenceElement as HTMLElement}\n                showPopover\n                zIndex={theme.zIndex.tooltip}\n                startPlacementPreference={scrapper?.tooltipPreference}\n              >\n                <StyledMouseOverDetectionBox />\n                <StyledTooltipContainer>\n                  <TooltipRenderer data={datum} />\n                </StyledTooltipContainer>\n              </DSPopperJS>\n            </foreignObject>\n          ) : null}\n          <line\n            ref={setReferenceElement}\n            x1={innerWidth}\n            strokeWidth=\"2px\"\n            stroke=\"transparent\"\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n          <line\n            x1={0}\n            strokeWidth=\"2px\"\n            stroke=\"grey\"\n            strokeDasharray={'4 4'}\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n        </g>\n      ) : null}\n      <line\n        onMouseEnter={handleOnMouseEnter}\n        x1={0}\n        strokeWidth={strokeDetectorWidth}\n        stroke=\"transparent\"\n        y1={yPosition}\n        x2={innerWidth}\n        y2={yPosition}\n      />\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsCT,SASE,KATF;AAtCd,SAAgB,YAAY,aAAa,gBAAgB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAO7D,MAAM,eAAuD,CAAC,EAAE,WAAW,MAAM,MAAM;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,YAAY;AAC3B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAkC,IAAI;AAEtF,QAAM,kBAAkB;AACxB,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,CAAC,UAAW,iBAAgB,eAAe;AAC/C,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,iBAAiB,gBAAgB,eAAe,CAAC;AAEhE,QAAM,sBAAsB,QAAQ,SAAS,SAAS,QAAQ,aAAa,IAAI;AAE/E,SACE,qBAAC,OACE;AAAA,qBAAiB,kBAChB,qBAAC,OACE;AAAA,wBACC,oBAAC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,kBAAgB;AAAA,UAChB,cAAY;AAAA,UACZ,cAAc,CAAC,GAAG,CAAC;AAAA,UACnB;AAAA,UACA,aAAW;AAAA,UACX,QAAQ,MAAM,OAAO;AAAA,UACrB,0BAA0B,UAAU;AAAA,UAEpC;AAAA,gCAAC,+BAA4B;AAAA,YAC7B,oBAAC,0BACC,8BAAC,mBAAgB,MAAM,OAAO,GAChC;AAAA;AAAA;AAAA,MACF,GACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,iBAAiB;AAAA,UACjB,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,OACF,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,QAAO;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext.js';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\ninterface ScrapperLineProps {\n  yPosition: number;\n  datum: DSChartT.ScrapperDatum[];\n}\n\nexport const ScrapperLine: React.ComponentType<ScrapperLineProps> = ({ yPosition, datum }) => {\n  const {\n    scrapperPosY,\n    setScrapperPosY,\n    innerWidth,\n    yScale,\n    setActivePoint,\n    isGrabbed,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<HTMLOrSVGElement | null>(null);\n\n  const yPositionString = yPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosY(yPositionString);\n    setActivePoint(null);\n  }, [isGrabbed, setScrapperPosY, setActivePoint, yPositionString]);\n\n  const strokeDetectorWidth = yScale?.type === 'BAND' ? yScale?.getBandwidth() : '4px';\n\n  return (\n    <g>\n      {scrapperPosY === yPositionString ? (\n        <g>\n          {TooltipRenderer ? (\n            <foreignObject>\n              <DSPopperJS\n                withoutAnimation\n                withoutArrow\n                customOffset={[0, 5]}\n                referenceElement={referenceElement as HTMLElement}\n                showPopover\n                zIndex={theme.zIndex.tooltip}\n                startPlacementPreference={scrapper?.tooltipPreference}\n              >\n                <StyledMouseOverDetectionBox />\n                <StyledTooltipContainer>\n                  <TooltipRenderer data={datum} />\n                </StyledTooltipContainer>\n              </DSPopperJS>\n            </foreignObject>\n          ) : null}\n          <line\n            ref={setReferenceElement}\n            x1={innerWidth}\n            strokeWidth=\"2px\"\n            stroke=\"transparent\"\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n          <line\n            x1={0}\n            strokeWidth=\"2px\"\n            stroke=\"grey\"\n            strokeDasharray=\"4 4\"\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n        </g>\n      ) : null}\n      <line\n        onMouseEnter={handleOnMouseEnter}\n        x1={0}\n        strokeWidth={strokeDetectorWidth}\n        stroke=\"transparent\"\n        y1={yPosition}\n        x2={innerWidth}\n        y2={yPosition}\n      />\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsCT,SASE,KATF;AAtCd,SAAgB,YAAY,aAAa,gBAAgB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAO7D,MAAM,eAAuD,CAAC,EAAE,WAAW,MAAM,MAAM;AAC5F,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,YAAY;AAC3B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAkC,IAAI;AAEtF,QAAM,kBAAkB;AACxB,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,CAAC,UAAW,iBAAgB,eAAe;AAC/C,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,iBAAiB,gBAAgB,eAAe,CAAC;AAEhE,QAAM,sBAAsB,QAAQ,SAAS,SAAS,QAAQ,aAAa,IAAI;AAE/E,SACE,qBAAC,OACE;AAAA,qBAAiB,kBAChB,qBAAC,OACE;AAAA,wBACC,oBAAC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,kBAAgB;AAAA,UAChB,cAAY;AAAA,UACZ,cAAc,CAAC,GAAG,CAAC;AAAA,UACnB;AAAA,UACA,aAAW;AAAA,UACX,QAAQ,MAAM,OAAO;AAAA,UACrB,0BAA0B,UAAU;AAAA,UAEpC;AAAA,gCAAC,+BAA4B;AAAA,YAC7B,oBAAC,0BACC,8BAAC,mBAAgB,MAAM,OAAO,GAChC;AAAA;AAAA;AAAA,MACF,GACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,aAAY;AAAA,UACZ,QAAO;AAAA,UACP,iBAAgB;AAAA,UAChB,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA;AAAA,MACN;AAAA,OACF,IACE;AAAA,IACJ;AAAA,MAAC;AAAA;AAAA,QACC,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,QAAO;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js CHANGED Viewed

@@ -25,7 +25,8 @@ const VerticalScrapperLine = React2.memo(
       if (!isGrabbed) setScrapperPosX(xPosition);
       setActivePoint(null);
     }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);
-    return /* @__PURE__ */ jsxs("g", { transform: `translate(${xScale?.type === "BAND" ? xScale?.getBandwidth() / 2 : 0}, 0)`, children: [
+    const nonNullXscale = xScale ?? { type: "notBANDAndEverythingElseIsCurrentlyTreatedTheSame" };
+    return /* @__PURE__ */ jsxs("g", { transform: `translate(${nonNullXscale.type === "BAND" ? nonNullXscale.getBandwidth() / 2 : 0}, 0)`, children: [
       isActive && !isGrabbed ? /* @__PURE__ */ jsxs("g", { children: [
         TooltipRenderer ? /* @__PURE__ */ jsx("foreignObject", { children: /* @__PURE__ */ jsxs(
           DSPopperJS,
@@ -61,10 +62,10 @@ const VerticalScrapperLine = React2.memo(
         "rect",
         {
           onMouseOver: handleOnMouseEnter,
-          x: xScale?.type === "BAND" ? xPosition - xScale?.getBandwidth() / 2 : xPosition - (rectDetector?.left ?? 0),
+          x: nonNullXscale.type === "BAND" ? xPosition - nonNullXscale.getBandwidth() / 2 : xPosition - (rectDetector?.left ?? 0),
           fill: "transparent",
           y: 0,
-          width: xScale?.type === "BAND" ? xScale?.getBandwidth() : (rectDetector?.right ?? 0) + (rectDetector?.left ?? 0),
+          width: nonNullXscale.type === "BAND" ? nonNullXscale.getBandwidth() : (rectDetector?.right ?? 0) + (rectDetector?.left ?? 0),
           height: innerHeight
         }
       )

package/dist/esm/graphs/Chart/parts/Scrapper/VerticalScrapperLine.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scrapper/VerticalScrapperLine.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\nimport type { ScaleT } from '../../scales/index.js';\ninterface VerticalScrapperLineProps {\n  rectDetector?: { left: number; right: number };\n  xPosition: number;\n  data: DSChartT.ScrapperDatum[];\n  scrapperPosX: number;\n  setScrapperPosX: (x: number) => void;\n  isGrabbed: boolean;\n  xScale: ScaleT | null;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  innerHeight: number;\n  TooltipRenderer?:\n    | React.ComponentType<{\n        data: {\n          name: string;\n          xValue: string | number | Date | null;\n          yValue: string | number | Date | null;\n          datum: DSChartT.InternalDatum;\n        }[];\n      }>\n    | undefined;\n  scrapper: DSChartT.ScrapperT;\n}\n\nexport const VerticalScrapperLine: React.ComponentType<VerticalScrapperLineProps> = React.memo(\n  ({\n    rectDetector,\n    xPosition,\n    data,\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    setActivePoint,\n    innerHeight,\n    TooltipRenderer,\n    scrapper,\n  }) => {\n    const theme = useContext(ThemeContext);\n    const [referenceElement, setReferenceElement] = useState<HTMLOrSVGElement | null>();\n    const isActive = scrapperPosX === xPosition;\n    const handleOnMouseEnter = useCallback(() => {\n      if (!isGrabbed) setScrapperPosX(xPosition);\n      setActivePoint(null);\n    }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);\n    return (\n      <g transform={`translate(${xScale?.type === 'BAND' ? xScale?.getBandwidth() / 2 : 0}, 0)`}>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement as HTMLElement}\n                  showPopover\n                  zIndex={theme.zIndex.tooltip}\n                  startPlacementPreference={scrapper.tooltipPreference}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={data} />\n                  </StyledTooltipContainer>\n                </DSPopperJS>\n              </foreignObject>\n            ) : null}\n            <line\n              ref={setReferenceElement}\n              x1={xPosition}\n              strokeWidth=\"2px\"\n              stroke={scrapper.color}\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n              strokeDasharray={'4 4'}\n            />\n          </g>\n        ) : null}\n        <rect\n          onMouseOver={handleOnMouseEnter}\n          x={xScale?.type === 'BAND' ? xPosition - xScale?.getBandwidth() / 2 : xPosition - (rectDetector?.left ?? 0)}\n          fill=\"transparent\"\n          y={0}\n          width={\n            xScale?.type === 'BAND' ? xScale?.getBandwidth() : (rectDetector?.right ?? 0) + (rectDetector?.left ?? 0)\n          }\n          height={innerHeight}\n        />\n      </g>\n    );\n  },\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwDP,SASE,KATF;AAxDhB,OAAOA,UAAS,YAAY,aAAa,gBAAgB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AA0B7D,MAAM,uBAAuEA,OAAM;AAAA,EACxF,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,QAAQ,WAAW,YAAY;AACrC,UAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAkC;AAClF,UAAM,WAAW,iBAAiB;AAClC,UAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAI,CAAC,UAAW,iBAAgB,SAAS;AACzC,qBAAe,IAAI;AAAA,IACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAC1D,WACE,qBAAC,OAAE,WAAW,aAAa,QAAQ,SAAS,SAAS,QAAQ,aAAa,IAAI,IAAI,CAAC,QAChF;AAAA,kBAAY,CAAC,YACZ,qBAAC,OACE;AAAA,0BACC,oBAAC,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,kBAAgB;AAAA,YAChB,cAAY;AAAA,YACZ,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAW;AAAA,YACX,QAAQ,MAAM,OAAO;AAAA,YACrB,0BAA0B,SAAS;AAAA,YAEnC;AAAA,kCAAC,+BAA4B;AAAA,cAC7B,oBAAC,0BACC,8BAAC,mBAAgB,MAAY,GAC/B;AAAA;AAAA;AAAA,QACF,GACF,IACE;AAAA,QACJ;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAQ,SAAS;AAAA,YACjB,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,iBAAiB;AAAA;AAAA,QACnB;AAAA,SACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,GAAG,QAAQ,SAAS,SAAS,YAAY,QAAQ,aAAa,IAAI,IAAI,aAAa,cAAc,QAAQ;AAAA,UACzG,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OACE,QAAQ,SAAS,SAAS,QAAQ,aAAa,KAAK,cAAc,SAAS,MAAM,cAAc,QAAQ;AAAA,UAEzG,QAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles.js';\nimport type { DSChartT } from '../../react-desc-prop-types.js';\nimport type { ScaleT } from '../../scales/index.js';\ninterface VerticalScrapperLineProps {\n  rectDetector?: { left: number; right: number };\n  xPosition: number;\n  data: DSChartT.ScrapperDatum[];\n  scrapperPosX: number;\n  setScrapperPosX: (x: number) => void;\n  isGrabbed: boolean;\n  xScale: ScaleT | null;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  innerHeight: number;\n  TooltipRenderer?:\n    | React.ComponentType<{\n        data: {\n          name: string;\n          xValue: string | number | Date | null;\n          yValue: string | number | Date | null;\n          datum: DSChartT.InternalDatum;\n        }[];\n      }>\n    | undefined;\n  scrapper: DSChartT.ScrapperT;\n}\n\nexport const VerticalScrapperLine: React.ComponentType<VerticalScrapperLineProps> = React.memo(\n  ({\n    rectDetector,\n    xPosition,\n    data,\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    setActivePoint,\n    innerHeight,\n    TooltipRenderer,\n    scrapper,\n  }) => {\n    const theme = useContext(ThemeContext);\n    const [referenceElement, setReferenceElement] = useState<HTMLOrSVGElement | null>();\n    const isActive = scrapperPosX === xPosition;\n    const handleOnMouseEnter = useCallback(() => {\n      if (!isGrabbed) setScrapperPosX(xPosition);\n      setActivePoint(null);\n    }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);\n    // the code was abusing `xScale?.` even in place where it could lead to NaN\n    // I am not sure what the `?.` was solving but xScale typescript says | null\n    //   this line is a monkeypatch to avoid the NaN but it charts should be properly revisited to use typesafe code and algorithms\n    const nonNullXscale = xScale ?? { type: 'notBANDAndEverythingElseIsCurrentlyTreatedTheSame' };\n    return (\n      <g transform={`translate(${nonNullXscale.type === 'BAND' ? nonNullXscale.getBandwidth() / 2 : 0}, 0)`}>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement as HTMLElement}\n                  showPopover\n                  zIndex={theme.zIndex.tooltip}\n                  startPlacementPreference={scrapper.tooltipPreference}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={data} />\n                  </StyledTooltipContainer>\n                </DSPopperJS>\n              </foreignObject>\n            ) : null}\n            <line\n              ref={setReferenceElement}\n              x1={xPosition}\n              strokeWidth=\"2px\"\n              stroke={scrapper.color}\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n              strokeDasharray=\"4 4\"\n            />\n          </g>\n        ) : null}\n        <rect\n          onMouseOver={handleOnMouseEnter}\n          x={\n            nonNullXscale.type === 'BAND'\n              ? xPosition - nonNullXscale.getBandwidth() / 2\n              : xPosition - (rectDetector?.left ?? 0)\n          }\n          fill=\"transparent\"\n          y={0}\n          width={\n            nonNullXscale.type === 'BAND'\n              ? nonNullXscale.getBandwidth()\n              : (rectDetector?.right ?? 0) + (rectDetector?.left ?? 0)\n          }\n          height={innerHeight}\n        />\n      </g>\n    );\n  },\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6DP,SASE,KATF;AA5DhB,OAAOA,UAAS,YAAY,aAAa,gBAAgB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AA0B7D,MAAM,uBAAuEA,OAAM;AAAA,EACxF,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAM;AACJ,UAAM,QAAQ,WAAW,YAAY;AACrC,UAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAkC;AAClF,UAAM,WAAW,iBAAiB;AAClC,UAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAI,CAAC,UAAW,iBAAgB,SAAS;AACzC,qBAAe,IAAI;AAAA,IACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAI1D,UAAM,gBAAgB,UAAU,EAAE,MAAM,oDAAoD;AAC5F,WACE,qBAAC,OAAE,WAAW,aAAa,cAAc,SAAS,SAAS,cAAc,aAAa,IAAI,IAAI,CAAC,QAC5F;AAAA,kBAAY,CAAC,YACZ,qBAAC,OACE;AAAA,0BACC,oBAAC,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,kBAAgB;AAAA,YAChB,cAAY;AAAA,YACZ,cAAc,CAAC,GAAG,CAAC;AAAA,YACnB;AAAA,YACA,aAAW;AAAA,YACX,QAAQ,MAAM,OAAO;AAAA,YACrB,0BAA0B,SAAS;AAAA,YAEnC;AAAA,kCAAC,+BAA4B;AAAA,cAC7B,oBAAC,0BACC,8BAAC,mBAAgB,MAAY,GAC/B;AAAA;AAAA;AAAA,QACF,GACF,IACE;AAAA,QACJ;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAQ,SAAS;AAAA,YACjB,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,iBAAgB;AAAA;AAAA,QAClB;AAAA,SACF,IACE;AAAA,MACJ;AAAA,QAAC;AAAA;AAAA,UACC,aAAa;AAAA,UACb,GACE,cAAc,SAAS,SACnB,YAAY,cAAc,aAAa,IAAI,IAC3C,aAAa,cAAc,QAAQ;AAAA,UAEzC,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OACE,cAAc,SAAS,SACnB,cAAc,aAAa,KAC1B,cAAc,SAAS,MAAM,cAAc,QAAQ;AAAA,UAE1D,QAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js CHANGED Viewed

@@ -63,7 +63,7 @@ const ScrollableContainerX = () => {
       const diff = Math.abs(zoomStartingPosition - endingPosition);
       if (diff <= 0) return;
       const newRatio = innerWidth / (innerWidth * containerRatio / diff) < 40 ? innerWidth / 40 : innerWidth * containerRatio / diff;
-      const newPosition = lastScrollbarPosition?.current + (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / containerRatio;
+      const newPosition = lastScrollbarPosition.current + (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / containerRatio;
       if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);
       else setXScrollbarPosition(newPosition);
       setContainerRatio(newRatio);

package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerX.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext.js';\nimport { AxisBottom } from '../Axis/AxisBottom.js';\nimport { SeriesFactory } from '../SeriesFactory.js';\nimport { ScrollBarX } from './ScrollBarX.js';\nimport { Scrapper } from '../Scrapper/Scrapper.js';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper.js';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    xScale,\n    containerRatio,\n    innerWidth,\n    isGrabbed,\n    containerRef,\n    setXScrollbarPosition,\n    setContainerRatio,\n    lastScrollbarPosition,\n    innerHeight,\n    internalMargin,\n    chartId,\n    isZooming,\n    setIsZooming,\n    zoomStartingPosition,\n    setZoomStartingPosition,\n    movingPosition,\n    setMovingPosition,\n  } = useContext(ChartContext);\n\n  const getRealClientX = useCallback(\n    (clientX: number) => clientX - internalMargin.left - (containerRef?.getBoundingClientRect().left || 0),\n    [containerRef, internalMargin.left],\n  );\n\n  const Scrappers = useMemo(() => {\n    if (scrapper && scrapper?.type === 'horizontal') return <Scrapper />;\n    if (scrapper && scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper]);\n\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (!isGrabbed && xScale?.type !== 'BAND') {\n        setIsZooming(true);\n        setZoomStartingPosition(getRealClientX(clientX));\n        setMovingPosition(0);\n      }\n    },\n    [getRealClientX, isGrabbed, setIsZooming, setMovingPosition, setZoomStartingPosition, xScale?.type],\n  );\n\n  const handleOnMouseMove: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (isZooming) setMovingPosition(getRealClientX(clientX));\n    },\n    [getRealClientX, isZooming, setMovingPosition],\n  );\n  const handleOnMouseUp: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isZooming) return;\n      setIsZooming(false);\n      setMovingPosition(0);\n      const endingPosition = getRealClientX(e.clientX);\n\n      const diff = Math.abs(zoomStartingPosition - endingPosition);\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        lastScrollbarPosition?.current +\n        (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / containerRatio;\n\n      // if (newPosition < 0) setXScrollbarPosition(0);\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\n      setContainerRatio(newRatio);\n      lastScrollbarPosition.current = newPosition;\n      e.stopPropagation();\n    },\n    [\n      isZooming,\n      setIsZooming,\n      setMovingPosition,\n      getRealClientX,\n      zoomStartingPosition,\n      innerWidth,\n      containerRatio,\n      lastScrollbarPosition,\n      setXScrollbarPosition,\n      setContainerRatio,\n    ],\n  );\n  return (\n    <g\n      className=\"scrollable-container-x\"\n      onMouseDown={handleOnMouseDown}\n      onMouseMove={handleOnMouseMove}\n      onMouseUp={handleOnMouseUp}\n    >\n      <g mask={`url(#mask-${chartId})`}>\n        <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n          <AxisBottom />\n          <SeriesFactory />\n          {Scrappers}\n        </g>\n        {isZooming && movingPosition !== 0 ? (\n          <rect\n            x={movingPosition < zoomStartingPosition ? movingPosition : zoomStartingPosition}\n            width={Math.abs(movingPosition - zoomStartingPosition)}\n            height={innerHeight}\n            fill=\"orange\"\n            style={{ opacity: 0.2 }}\n          />\n        ) : null}\n      </g>\n      <ScrollBarX />\n    </g>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext.js';\nimport { AxisBottom } from '../Axis/AxisBottom.js';\nimport { SeriesFactory } from '../SeriesFactory.js';\nimport { ScrollBarX } from './ScrollBarX.js';\nimport { Scrapper } from '../Scrapper/Scrapper.js';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper.js';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    xScale,\n    containerRatio,\n    innerWidth,\n    isGrabbed,\n    containerRef,\n    setXScrollbarPosition,\n    setContainerRatio,\n    lastScrollbarPosition,\n    innerHeight,\n    internalMargin,\n    chartId,\n    isZooming,\n    setIsZooming,\n    zoomStartingPosition,\n    setZoomStartingPosition,\n    movingPosition,\n    setMovingPosition,\n  } = useContext(ChartContext);\n\n  const getRealClientX = useCallback(\n    (clientX: number) => clientX - internalMargin.left - (containerRef?.getBoundingClientRect().left || 0),\n    [containerRef, internalMargin.left],\n  );\n\n  const Scrappers = useMemo(() => {\n    if (scrapper && scrapper?.type === 'horizontal') return <Scrapper />;\n    if (scrapper && scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper]);\n\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (!isGrabbed && xScale?.type !== 'BAND') {\n        setIsZooming(true);\n        setZoomStartingPosition(getRealClientX(clientX));\n        setMovingPosition(0);\n      }\n    },\n    [getRealClientX, isGrabbed, setIsZooming, setMovingPosition, setZoomStartingPosition, xScale?.type],\n  );\n\n  const handleOnMouseMove: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (isZooming) setMovingPosition(getRealClientX(clientX));\n    },\n    [getRealClientX, isZooming, setMovingPosition],\n  );\n  const handleOnMouseUp: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isZooming) return;\n      setIsZooming(false);\n      setMovingPosition(0);\n      const endingPosition = getRealClientX(e.clientX);\n\n      const diff = Math.abs(zoomStartingPosition - endingPosition);\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        lastScrollbarPosition.current +\n        (zoomStartingPosition > endingPosition ? endingPosition : zoomStartingPosition) / containerRatio;\n\n      // if (newPosition < 0) setXScrollbarPosition(0);\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\n      setContainerRatio(newRatio);\n      lastScrollbarPosition.current = newPosition;\n      e.stopPropagation();\n    },\n    [\n      isZooming,\n      setIsZooming,\n      setMovingPosition,\n      getRealClientX,\n      zoomStartingPosition,\n      innerWidth,\n      containerRatio,\n      lastScrollbarPosition,\n      setXScrollbarPosition,\n      setContainerRatio,\n    ],\n  );\n  return (\n    <g\n      className=\"scrollable-container-x\"\n      onMouseDown={handleOnMouseDown}\n      onMouseMove={handleOnMouseMove}\n      onMouseUp={handleOnMouseUp}\n    >\n      <g mask={`url(#mask-${chartId})`}>\n        <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n          <AxisBottom />\n          <SeriesFactory />\n          {Scrappers}\n        </g>\n        {isZooming && movingPosition !== 0 ? (\n          <rect\n            x={movingPosition < zoomStartingPosition ? movingPosition : zoomStartingPosition}\n            width={Math.abs(movingPosition - zoomStartingPosition)}\n            height={innerHeight}\n            fill=\"orange\"\n            style={{ opacity: 0.2 }}\n          />\n        ) : null}\n      </g>\n      <ScrollBarX />\n    </g>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Scroller/ScrollableContainerY.js CHANGED Viewed

@@ -16,7 +16,7 @@ const ScrollableContainerY = () => {
   } = useContext(ChartContext);
   const Scrappers = useMemo(() => {
     if (scrapper?.type === "horizontal") return /* @__PURE__ */ jsx(Scrapper, {});
-    else if (scrapper?.type === "vertical") return /* @__PURE__ */ jsx(VerticalScrapper, {});
+    if (scrapper?.type === "vertical") return /* @__PURE__ */ jsx(VerticalScrapper, {});
     return null;
   }, [scrapper?.type]);
   return /* @__PURE__ */ jsxs("g", { className: "scrollable-container-y", children: [