npm - @elliemae/ds-dataviz - Versions diffs - 3.10.3 → 3.11.0-next.2 - Mend

@elliemae/ds-dataviz 3.10.3 → 3.11.0-next.2

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 (141) hide show

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

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useMemo, useCallback, useEffect } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo, useCallback } from "react";
 import { StyledSVGWrapper } from "../styles";
 import { ChartContext } from "../ChartContext";
 import { useKeyboardNavigation } from "../config/useKeyboardNavigation";
@@ -8,15 +8,24 @@ import { Legend } from "./Legend/Legend";
 import { Label } from "./Labels/Label";
 import { BlurMask } from "./Scroller/BlurMask";
 import { ClipPaths } from "./ClipPaths";
-import { Axes } from "./Axis/Axes";
+import { ScrollableContainerX } from "./Scroller/ScrollableContainerX";
+import { ScrollableContainerY } from "./Scroller/ScrollableContainerY";
+import { AxisBottom } from "./Axis/AxisBottom";
+import { AxisRight } from "./Axis/AxisRight";
+import { AxisLeft } from "./Axis/AxisLeft";
+import { SeriesFactory } from "./SeriesFactory";
+import { Scrapper } from "./Scrapper/Scrapper";
+import { VerticalScrapper } from "./Scrapper/VerticalScrapper";
+import { Controllers } from "./Scroller/Controllers";
 const ChartContainer = () => {
   const {
-    props: { width, height, xAxis, yAxis },
+    props: { yAxis, xScroll, scrapper, xAxis },
     containerRef,
     activePoint,
     internalMargin,
     setScrapperPosY,
     setScrapperPosX,
+    setContainerRef,
     svgRef,
     isGrabbed,
     setIsGrabbed,
@@ -27,13 +36,12 @@ const ChartContainer = () => {
     setXScrollbarPosition,
     xScrollbarPosition,
     containerRatio,
-    oldLastPosition,
+    lastPosition,
     setIsScrollbarVisible,
-    chartId,
-    yScale,
+    width,
+    height,
     currentData
   } = useContext(ChartContext);
-  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;
   const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
   const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();
   const onMouseEnterHandler = useCallback(() => {
@@ -51,7 +59,7 @@ const ChartContainer = () => {
         return;
       setActivePoint(null);
       if (xScroll) {
-        const newPosition = oldLastPosition?.current + e.clientX - startPosition;
+        const newPosition = lastPosition?.current + e.clientX - startPosition;
         if (newPosition < 0)
           setXScrollbarPosition(0);
         else if (newPosition > innerWidth - innerWidth / containerRatio)
@@ -60,7 +68,7 @@ const ChartContainer = () => {
           setXScrollbarPosition(newPosition);
       }
       if (yScroll) {
-        const newPosition = oldLastPosition?.current + e.clientY - startPosition;
+        const newPosition = lastPosition?.current + e.clientY - startPosition;
         if (newPosition < 0)
           setXScrollbarPosition(0);
         else if (newPosition > innerHeight - innerHeight / containerRatio)
@@ -74,7 +82,7 @@ const ChartContainer = () => {
       setActivePoint,
       xScroll,
       yScroll,
-      oldLastPosition,
+      lastPosition,
       startPosition,
       setXScrollbarPosition,
       innerWidth,
@@ -83,24 +91,46 @@ const ChartContainer = () => {
     ]
   );
   const handleMouseUp = useCallback(() => {
-    oldLastPosition.current = xScrollbarPosition;
+    lastPosition.current = xScrollbarPosition;
     setIsGrabbed(false);
-  }, [oldLastPosition, setIsGrabbed, xScrollbarPosition]);
+  }, [lastPosition, setIsGrabbed, xScrollbarPosition]);
   const key = useMemo(
-    () => `translate(${internalMargin.left},${internalMargin.top},${internalMargin.right})`,
-    [internalMargin]
+    () => `translate(${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom})`,
+    [internalMargin, width]
   );
-  useEffect(() => {
-    containerRef?.current?.addEventListener("mousemove", handleMouseMove);
-    const container = containerRef?.current;
-    return () => {
-      container?.removeEventListener("mousemove", handleMouseMove);
-    };
-  }, [containerRef, handleMouseMove]);
   if (currentData.length === 0)
     return null;
+  const render = useMemo(() => {
+    if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {
+      return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx(AxisRight, {}),
+          /* @__PURE__ */ jsx(AxisLeft, {}),
+          /* @__PURE__ */ jsx(ScrollableContainerX, {})
+        ]
+      });
+    }
+    if (yScroll) {
+      return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx(AxisBottom, {}),
+          /* @__PURE__ */ jsx(ScrollableContainerY, {})
+        ]
+      });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(AxisRight, {}),
+        /* @__PURE__ */ jsx(AxisLeft, {}),
+        /* @__PURE__ */ jsx(AxisBottom, {}),
+        /* @__PURE__ */ jsx(SeriesFactory, {}),
+        scrapper?.type === "horizontal" ? /* @__PURE__ */ jsx(Scrapper, {}) : null,
+        scrapper?.type === "vertical" ? /* @__PURE__ */ jsx(VerticalScrapper, {}) : null
+      ]
+    });
+  }, [scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, yScroll]);
   return /* @__PURE__ */ jsx(StyledSVGWrapper, {
-    ref: containerRef,
+    ref: setContainerRef,
     onKeyDown: onInputKeyDown,
     "aria-hidden": "true",
     tabIndex: activePoint ? -1 : 0,
@@ -108,20 +138,22 @@ const ChartContainer = () => {
     onFocus: handleOnFocus,
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler,
+    onMouseMove: handleMouseMove,
     onMouseUp: handleMouseUp,
     onMouseDown: (e) => e.preventDefault(),
     isGrabbed,
-    style: { width },
-    children: /* @__PURE__ */ jsxs("svg", {
+    children: width !== 0 ? /* @__PURE__ */ jsxs("svg", {
       ref: svgRef,
       width,
       height,
       children: [
+        /* @__PURE__ */ jsx(ClipPaths, {}),
         /* @__PURE__ */ jsx(BlurMask, {}),
         /* @__PURE__ */ jsxs("g", {
           children: [
             /* @__PURE__ */ jsxs("g", {
               children: [
+                /* @__PURE__ */ jsx(Controllers, {}),
                 /* @__PURE__ */ jsx(Legend, {}),
                 /* @__PURE__ */ jsx(Label, {})
               ]
@@ -129,13 +161,12 @@ const ChartContainer = () => {
             /* @__PURE__ */ jsx("g", {
               className: "container",
               transform: `translate(${internalMargin.left},${internalMargin.top})`,
-              children: /* @__PURE__ */ jsx(Axes, {})
+              children: render
             })
           ]
-        }, key),
-        /* @__PURE__ */ jsx(ClipPaths, {})
+        }, key)
       ]
-    })
+    }) : null
   });
 };
 export {

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, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { Axes } from './Axis/Axes';\n\nexport const ChartContainer = () => {\n  const {\n    props: { width, height, xAxis, yAxis },\n    containerRef,\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    oldLastPosition,\n    setIsScrollbarVisible,\n    chartId,\n    yScale,\n    currentData,\n  } = useContext(ChartContext);\n\n  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n  }, [setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      setActivePoint(null);\n\n      if (xScroll) {\n        const newPosition = oldLastPosition?.current + e.clientX - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerWidth - innerWidth / containerRatio)\n          setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n      if (yScroll) {\n        const newPosition = oldLastPosition?.current + e.clientY - startPosition;\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      oldLastPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    oldLastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [oldLastPosition, setIsGrabbed, xScrollbarPosition]);\n  const key = useMemo(\n    () => `translate(${internalMargin.left},${internalMargin.top},${internalMargin.right})`,\n    [internalMargin],\n  );\n\n  useEffect(() => {\n    containerRef?.current?.addEventListener('mousemove', handleMouseMove);\n    // containerRef?.current?.addEventListener('wheel', handleScroll);\n    const container = containerRef?.current;\n    return () => {\n      container?.removeEventListener('mousemove', handleMouseMove);\n      // containerRef?.current?.removeEventListener('wheel', handleScroll);\n    };\n  }, [containerRef, handleMouseMove]);\n\n  if (currentData.length === 0) return null;\n\n  return (\n    <StyledSVGWrapper\n      ref={containerRef}\n      onKeyDown={onInputKeyDown}\n      aria-hidden=\"true\"\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      // // onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width }}\n    >\n      <svg ref={svgRef} width={width} height={height}>\n        <BlurMask />\n        <g key={key}>\n          <g>\n            <Legend />\n            <Label />\n          </g>\n          <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n            <Axes />\n          </g>\n        </g>\n        {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n        <ClipPaths />\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n  const {\n    props: { yAxis, xScroll, scrapper, xAxis },\n    containerRef,\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastPosition,\n    setIsScrollbarVisible,\n    width,\n    height,\n    currentData,\n  } = useContext(ChartContext);\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n  }, [setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastPosition?.current + e.clientX - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerWidth - innerWidth / containerRatio)\n          setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n      if (yScroll) {\n        const newPosition = lastPosition?.current + e.clientY - startPosition;\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      lastPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n  const key = useMemo(\n    () =>\n      `translate(${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom})`,\n    [internalMargin, width],\n  );\n\n  if (currentData.length === 0) return null;\n\n  const render = useMemo(() => {\n    if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n      return (\n        <>\n          <AxisRight />\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    }\n    if (yScroll) {\n      return (\n        <>\n          <AxisBottom />\n          <ScrollableContainerY />\n        </>\n      );\n    }\n    return (\n      <>\n        <AxisRight />\n        <AxisLeft />\n        <AxisBottom />\n        <SeriesFactory />\n        {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n        {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n      </>\n    );\n  }, [scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, yScroll]);\n  return (\n    <StyledSVGWrapper\n      ref={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      aria-hidden=\"true\"\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n    >\n      {width !== 0 ? (\n        <svg ref={svgRef} width={width} height={height}>\n          <ClipPaths />\n          <BlurMask />\n          <g key={key}>\n            <g>\n              <Controllers />\n              <Legend />\n              <Label />\n            </g>\n            <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n              {render}\n              {/* <ActivePoint/> @todo */}\n            </g>\n          </g>\n          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,mBAA8B;AACnE,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAErC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AACrB,MAAM,iBAAiB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,SAAS,UAAU,MAAM;AAAA,IACzC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAG3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AACtD,QAAM,EAAE,gBAAgB,cAAc,cAAc,IAAI,sBAAsB;AAE9E,QAAM,sBAAsB,YAAY,MAAM;AAC5C,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAC1B,QAAM,sBAAsB,YAAY,MAAM;AAC5C,oBAAgB,EAAE;AAClB,oBAAgB,EAAE;AAClB,0BAAsB,KAAK;AAC3B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,uBAAuB,iBAAiB,eAAe,CAAC;AAE1E,QAAM,kBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,UAAI,CAAC;AAAW;AAChB,qBAAe,IAAI;AACnB,UAAI,SAAS;AACX,cAAM,cAAc,cAAc,UAAU,EAAE,UAAU;AACxD,YAAI,cAAc;AAAG,gCAAsB,CAAC;AAAA,iBACnC,cAAc,aAAa,aAAa;AAC/C,gCAAsB,aAAa,aAAa,cAAc;AAAA;AAC3D,gCAAsB,WAAW;AAAA,MACxC;AACA,UAAI,SAAS;AACX,cAAM,cAAc,cAAc,UAAU,EAAE,UAAU;AACxD,YAAI,cAAc;AAAG,gCAAsB,CAAC;AAAA,iBACnC,cAAc,cAAc,cAAc;AACjD,gCAAsB,cAAc,cAAc,cAAc;AAAA;AAC7D,gCAAsB,WAAW;AAAA,MACxC;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,IACF;AAAA,EACF;AACA,QAAM,gBAAgB,YAAY,MAAM;AACtC,iBAAa,UAAU;AACvB,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,cAAc,kBAAkB,CAAC;AAEnD,QAAM,MAAM;AAAA,IACV,MACE,aAAa,SAAS,eAAe,QAAQ,eAAe,OAAO,eAAe,SAAS,eAAe;AAAA,IAC5G,CAAC,gBAAgB,KAAK;AAAA,EACxB;AAEA,MAAI,YAAY,WAAW;AAAG,WAAO;AAErC,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,WAAW,MAAM,UAAU,cAAc,QAAQ,GAAG;AACtD,aACE;AAAA,QACE;AAAA,8BAAC,aAAU;AAAA,UACX,oBAAC,YAAS;AAAA,UACV,oBAAC,wBAAqB;AAAA;AAAA,OACxB;AAAA,IAEJ;AACA,QAAI,SAAS;AACX,aACE;AAAA,QACE;AAAA,8BAAC,cAAW;AAAA,UACZ,oBAAC,wBAAqB;AAAA;AAAA,OACxB;AAAA,IAEJ;AACA,WACE;AAAA,MACE;AAAA,4BAAC,aAAU;AAAA,QACX,oBAAC,YAAS;AAAA,QACV,oBAAC,cAAW;AAAA,QACZ,oBAAC,iBAAc;AAAA,QACd,UAAU,SAAS,eAAe,oBAAC,YAAS,IAAK;AAAA,QACjD,UAAU,SAAS,aAAa,oBAAC,oBAAiB,IAAK;AAAA;AAAA,KAC1D;AAAA,EAEJ,GAAG,CAAC,UAAU,MAAM,MAAM,UAAU,cAAc,OAAO,SAAS,OAAO,CAAC;AAC1E,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW;AAAA,IACX,eAAY;AAAA,IACZ,UAAU,cAAc,KAAK;AAAA,IAC7B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc;AAAA,IACd,cAAc;AAAA,IACd,aAAa;AAAA,IACb,WAAW;AAAA,IACX,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,IACrC;AAAA,IAEC,oBAAU,IACT,qBAAC;AAAA,MAAI,KAAK;AAAA,MAAQ;AAAA,MAAc;AAAA,MAC9B;AAAA,4BAAC,aAAU;AAAA,QACX,oBAAC,YAAS;AAAA,QACV,qBAAC;AAAA,UACC;AAAA,iCAAC;AAAA,cACC;AAAA,oCAAC,eAAY;AAAA,gBACb,oBAAC,UAAO;AAAA,gBACR,oBAAC,SAAM;AAAA;AAAA,aACT;AAAA,YACA,oBAAC;AAAA,cAAE,WAAU;AAAA,cAAY,WAAW,aAAa,eAAe,QAAQ,eAAe;AAAA,cACpF;AAAA,aAEH;AAAA;AAAA,WATM,GAUR;AAAA;AAAA,KAEF,IACE;AAAA,GACN;AAEJ;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { ChartContext } from "../ChartContext";
 const ClipPaths = () => {
@@ -12,45 +12,21 @@ const ClipPaths = () => {
     props: { xAxis, yAxis }
   } = useContext(ChartContext);
   const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx("defs", {
-        children: /* @__PURE__ */ jsx("clipPath", {
-          id: `rect-focus-ring-${chartId}`,
-          children: yScroll ? /* @__PURE__ */ jsx("rect", {
-            width: innerWidth + 4,
-            height: innerHeight * containerRatio,
-            x: -4
-          }) : /* @__PURE__ */ jsx("rect", {
-            width: innerWidth * containerRatio,
-            height: innerHeight + 4,
-            y: -4
-          })
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsx("defs", {
+      children: /* @__PURE__ */ jsx("clipPath", {
+        id: `rect-focus-ring-${chartId}`,
+        children: yScroll ? /* @__PURE__ */ jsx("rect", {
+          width: innerWidth + 4,
+          height: innerHeight * containerRatio,
+          x: -4
+        }) : /* @__PURE__ */ jsx("rect", {
+          width: innerWidth * containerRatio,
+          height: innerHeight + 4,
+          y: -4
         })
-      }),
-      /* @__PURE__ */ jsx("defs", {
-        children: /* @__PURE__ */ jsx("clipPath", {
-          id: `rects-positive-${chartId}`,
-          children: /* @__PURE__ */ jsx("rect", {
-            width: innerWidth * containerRatio,
-            height: yScale(0) + 8,
-            y: -8,
-            x: -10
-          })
-        })
-      }),
-      innerHeight - yScale(0) > 0 ? /* @__PURE__ */ jsx("defs", {
-        children: /* @__PURE__ */ jsx("clipPath", {
-          id: `rects-negative-${chartId}`,
-          children: /* @__PURE__ */ jsx("rect", {
-            width: innerWidth * containerRatio,
-            height: innerHeight - yScale(0),
-            x: -10,
-            y: yScale(0)
-          })
-        })
-      }) : null
-    ]
+      })
+    })
   });
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/ClipPaths.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const ClipPaths = () => {\n  const {\n    innerWidth,\n    containerRatio,\n    innerHeight,\n    chartId,\n    yScale,\n    props: { xAxis, yAxis },\n  } = useContext(ChartContext);\n\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  return (\n    <>\n      <defs>\n        <clipPath id={`rect-focus-ring-${chartId}`}>\n          {yScroll ? (\n            <rect width={innerWidth + 4} height={innerHeight * containerRatio} x={-4} />\n          ) : (\n            <rect width={innerWidth * containerRatio} height={innerHeight + 4} y={-4} />\n          )}\n        </clipPath>\n      </defs>\n      <defs>\n        <clipPath id={`rects-positive-${chartId}`}>\n          <rect width={innerWidth * containerRatio} height={yScale(0) + 8} y={-8} x={-10} />\n        </clipPath>\n      </defs>\n      {innerHeight - yScale(0) > 0 ? (\n        <defs>\n          <clipPath id={`rects-negative-${chartId}`}>\n            <rect width={innerWidth * containerRatio} height={innerHeight - yScale(0)} x={-10} y={yScale(0)} />\n          </clipPath>\n        </defs>\n      ) : null}\n    </>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,SACE;AAAA,IACE;AAAA,0BAAC;AAAA,QACC,8BAAC;AAAA,UAAS,IAAI,mBAAmB;AAAA,UAC9B,oBACC,oBAAC;AAAA,YAAK,OAAO,aAAa;AAAA,YAAG,QAAQ,cAAc;AAAA,YAAgB,GAAG;AAAA,WAAI,IAE1E,oBAAC;AAAA,YAAK,OAAO,aAAa;AAAA,YAAgB,QAAQ,cAAc;AAAA,YAAG,GAAG;AAAA,WAAI;AAAA,SAE9E;AAAA,OACF;AAAA,MACA,oBAAC;AAAA,QACC,8BAAC;AAAA,UAAS,IAAI,kBAAkB;AAAA,UAC9B,8BAAC;AAAA,YAAK,OAAO,aAAa;AAAA,YAAgB,QAAQ,OAAO,CAAC,IAAI;AAAA,YAAG,GAAG;AAAA,YAAI,GAAG;AAAA,WAAK;AAAA,SAClF;AAAA,OACF;AAAA,MACC,cAAc,OAAO,CAAC,IAAI,IACzB,oBAAC;AAAA,QACC,8BAAC;AAAA,UAAS,IAAI,kBAAkB;AAAA,UAC9B,8BAAC;AAAA,YAAK,OAAO,aAAa;AAAA,YAAgB,QAAQ,cAAc,OAAO,CAAC;AAAA,YAAG,GAAG;AAAA,YAAK,GAAG,OAAO,CAAC;AAAA,WAAG;AAAA,SACnG;AAAA,OACF,IACE;AAAA;AAAA,GACN;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const ClipPaths = () => {\n  const {\n    innerWidth,\n    containerRatio,\n    innerHeight,\n    chartId,\n    yScale,\n    props: { xAxis, yAxis },\n  } = useContext(ChartContext);\n\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  return (\n    <>\n      <defs>\n        <clipPath id={`rect-focus-ring-${chartId}`}>\n          {yScroll ? (\n            <rect width={innerWidth + 4} height={innerHeight * containerRatio} x={-4} />\n          ) : (\n            <rect width={innerWidth * containerRatio} height={innerHeight + 4} y={-4} />\n          )}\n        </clipPath>\n      </defs>\n      {/* \n      this can be useful when implementing animations\n      <defs>\n        <clipPath id={`rects-positive-${chartId}`}>\n          <rect width={innerWidth * containerRatio} height={yScale(0) + 8} y={-8} x={-10} />\n        </clipPath>\n      </defs>\n      {innerHeight - yScale(0) > 0 ? (\n        <defs>\n          <clipPath id={`rects-negative-${chartId}`}>\n            <rect width={innerWidth * containerRatio} height={innerHeight - yScale(0)} x={-10} y={yScale(0)} />\n          </clipPath>\n        </defs>\n      ) : null} */}\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,SACE;AAAA,IACE,8BAAC;AAAA,MACC,8BAAC;AAAA,QAAS,IAAI,mBAAmB;AAAA,QAC9B,oBACC,oBAAC;AAAA,UAAK,OAAO,aAAa;AAAA,UAAG,QAAQ,cAAc;AAAA,UAAgB,GAAG;AAAA,SAAI,IAE1E,oBAAC;AAAA,UAAK,OAAO,aAAa;AAAA,UAAgB,QAAQ,cAAc;AAAA,UAAG,GAAG;AAAA,SAAI;AAAA,OAE9E;AAAA,KACF;AAAA,GAeF;AAEJ;",
   "names": []
 }

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

@@ -8,14 +8,15 @@ import { BottomLegend } from "./BottomLegend";
 import { LeftLegend } from "./LeftLegend";
 const Legend = () => {
   const {
-    props: { legend }
+    props: { legend },
+    width
   } = useContext(ChartContext);
-  if (legend?.position === "right")
-    return /* @__PURE__ */ jsx(RightLegend, {});
-  if (legend?.position === "top")
+  if (legend?.position === "top" || legend?.position === "left" && width <= 400)
     return /* @__PURE__ */ jsx(TopLegend, {});
-  if (legend?.position === "bottom")
+  if (legend?.position === "bottom" || legend?.position === "right" && width <= 400)
     return /* @__PURE__ */ jsx(BottomLegend, {});
+  if (legend?.position === "right")
+    return /* @__PURE__ */ jsx(RightLegend, {});
   if (legend?.position === "left")
     return /* @__PURE__ */ jsx(LeftLegend, {});
   return null;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/Legend.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { RightLegend } from './RightLegend';\nimport { TopLegend } from './TopLegend';\nimport { ChartContext } from '../../ChartContext';\nimport { BottomLegend } from './BottomLegend';\nimport { LeftLegend } from './LeftLegend';\nexport const Legend = () => {\n  const {\n    props: { legend },\n  } = useContext(ChartContext);\n\n  if (legend?.position === 'right') return <RightLegend />;\n  if (legend?.position === 'top') return <TopLegend />;\n  if (legend?.position === 'bottom') return <BottomLegend />;\n  if (legend?.position === 'left') return <LeftLegend />;\n  return null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AACpB,MAAM,SAAS,MAAM;AAC1B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,EAClB,IAAI,WAAW,YAAY;AAE3B,MAAI,QAAQ,aAAa;AAAS,WAAO,oBAAC,eAAY;AACtD,MAAI,QAAQ,aAAa;AAAO,WAAO,oBAAC,aAAU;AAClD,MAAI,QAAQ,aAAa;AAAU,WAAO,oBAAC,gBAAa;AACxD,MAAI,QAAQ,aAAa;AAAQ,WAAO,oBAAC,cAAW;AACpD,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { RightLegend } from './RightLegend';\nimport { TopLegend } from './TopLegend';\nimport { ChartContext } from '../../ChartContext';\nimport { BottomLegend } from './BottomLegend';\nimport { LeftLegend } from './LeftLegend';\nexport const Legend = () => {\n  const {\n    props: { legend },\n    width,\n  } = useContext(ChartContext);\n  if (legend?.position === 'top' || (legend?.position === 'left' && width <= 400)) return <TopLegend />;\n  if (legend?.position === 'bottom' || (legend?.position === 'right' && width <= 400)) return <BottomLegend />;\n  if (legend?.position === 'right') return <RightLegend />;\n  if (legend?.position === 'left') return <LeftLegend />;\n  return null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AACpB,MAAM,SAAS,MAAM;AAC1B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,EACF,IAAI,WAAW,YAAY;AAC3B,MAAI,QAAQ,aAAa,SAAU,QAAQ,aAAa,UAAU,SAAS;AAAM,WAAO,oBAAC,aAAU;AACnG,MAAI,QAAQ,aAAa,YAAa,QAAQ,aAAa,WAAW,SAAS;AAAM,WAAO,oBAAC,gBAAa;AAC1G,MAAI,QAAQ,aAAa;AAAS,WAAO,oBAAC,eAAY;AACtD,MAAI,QAAQ,aAAa;AAAQ,WAAO,oBAAC,cAAW;AACpD,SAAO;AACT;",
   "names": []
 }

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

@@ -5,7 +5,7 @@ import { selectAll, select } from "d3";
 import { ChartContext } from "../../ChartContext";
 import { LegendItem } from "./LegendItem";
 const TopLegend = () => {
-  const { colorScale, internalMargin, innerWidth, setTopLegend } = useContext(ChartContext);
+  const { colorScale, internalMargin, innerWidth, setTopLegend, toolbarHeight } = useContext(ChartContext);
   const ref = useRef(null);
   const firstRender = useRef(true);
   const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);
@@ -31,7 +31,7 @@ const TopLegend = () => {
   const render = useMemo(
     () => /* @__PURE__ */ jsx("g", {
       ref,
-      transform: `translate(${xTransform},30)`,
+      transform: `translate(${xTransform},${toolbarHeight + 30})`,
       children: /* @__PURE__ */ jsxs("g", {
         ref: setTopLegend,
         children: [
@@ -46,7 +46,7 @@ const TopLegend = () => {
         ]
       })
     }),
-    [colorScale, setTopLegend, xTransform]
+    [colorScale, setTopLegend, xTransform, toolbarHeight]
   );
   return render;
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/TopLegend.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\n\nimport { selectAll, select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const TopLegend = () => {\n  const { colorScale, internalMargin, innerWidth, setTopLegend } = useContext(ChartContext);\n\n  const ref = useRef(null);\n  const firstRender = useRef(true);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);\n\n  useLayoutEffect(() => {\n    if (ref.current && firstRender.current) {\n      const cells = selectAll('.cell');\n      const padding = 40;\n      let offset = 0;\n      cells.each((d, i) => {\n        if (cells._groups[0][i - 1]) {\n          const lastCell = select(cells._groups[0][i - 1]);\n          const d3sel = select(cells._groups[0][i]);\n\n          const { width } = lastCell.node().getBBox();\n          offset += width + padding;\n          d3sel.attr('transform', `translate(${offset}, 0)`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform((prev) => prev - bounds.width / 2);\n      firstRender.current = false;\n    }\n  }, []);\n\n  const render = useMemo(\n    () => (\n      <g ref={ref} transform={`translate(${xTransform},30)`}>\n        <g ref={setTopLegend}>\n          <rect height={40} width={1} fill=\"transparent\" />\n          {colorScale.domain().map((domainValue, i) => (\n            <LegendItem key={domainValue} domainValue={domainValue} />\n          ))}\n        </g>\n      </g>\n    ),\n\n    [colorScale, setTopLegend, xTransform],\n  );\n\n  return render;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,iBAAiB,QAAQ,gBAAgB;AAE9E,SAAS,WAAW,cAAc;AAClC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,YAAY,gBAAgB,YAAY,aAAa,IAAI,WAAW,YAAY;AAExF,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,IAAI,eAAe,IAAI;AAEjF,kBAAgB,MAAM;AACpB,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,QAAQ,UAAU,OAAO;AAC/B,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,WAAW,OAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,QAAQ,OAAO,MAAM,QAAQ,GAAG,EAAE;AAExC,gBAAM,EAAE,MAAM,IAAI,SAAS,KAAK,EAAE,QAAQ;AAC1C,oBAAU,QAAQ;AAClB,gBAAM,KAAK,aAAa,aAAa,YAAY;AAAA,QACnD;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,QAAQ,CAAC;AAC/C,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE;AAAA,MAAU,WAAW,aAAa;AAAA,MACnC,+BAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,8BAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC;AAAA,YAA6B;AAAA,aAAb,WAAuC,CACzD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,cAAc,UAAU;AAAA,EACvC;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\n\nimport { selectAll, select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const TopLegend = () => {\n  const { colorScale, internalMargin, innerWidth, setTopLegend, toolbarHeight } = useContext(ChartContext);\n\n  const ref = useRef(null);\n  const firstRender = useRef(true);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);\n\n  useLayoutEffect(() => {\n    if (ref.current && firstRender.current) {\n      const cells = selectAll('.cell');\n      const padding = 40;\n      let offset = 0;\n      cells.each((d, i) => {\n        if (cells._groups[0][i - 1]) {\n          const lastCell = select(cells._groups[0][i - 1]);\n          const d3sel = select(cells._groups[0][i]);\n\n          const { width } = lastCell.node().getBBox();\n          offset += width + padding;\n          d3sel.attr('transform', `translate(${offset}, 0)`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform((prev) => prev - bounds.width / 2);\n      firstRender.current = false;\n    }\n  }, []);\n\n  const render = useMemo(\n    () => (\n      <g ref={ref} transform={`translate(${xTransform},${toolbarHeight + 30})`}>\n        <g ref={setTopLegend}>\n          <rect height={40} width={1} fill=\"transparent\" />\n          {colorScale.domain().map((domainValue, i) => (\n            <LegendItem key={domainValue} domainValue={domainValue} />\n          ))}\n        </g>\n      </g>\n    ),\n\n    [colorScale, setTopLegend, xTransform, toolbarHeight],\n  );\n\n  return render;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,iBAAiB,QAAQ,gBAAgB;AAE9E,SAAS,WAAW,cAAc;AAClC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,YAAY,gBAAgB,YAAY,cAAc,cAAc,IAAI,WAAW,YAAY;AAEvG,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,IAAI,eAAe,IAAI;AAEjF,kBAAgB,MAAM;AACpB,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,QAAQ,UAAU,OAAO;AAC/B,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,WAAW,OAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,QAAQ,OAAO,MAAM,QAAQ,GAAG,EAAE;AAExC,gBAAM,EAAE,MAAM,IAAI,SAAS,KAAK,EAAE,QAAQ;AAC1C,oBAAU,QAAQ;AAClB,gBAAM,KAAK,aAAa,aAAa,YAAY;AAAA,QACnD;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,QAAQ,CAAC;AAC/C,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE;AAAA,MAAU,WAAW,aAAa,cAAc,gBAAgB;AAAA,MACjE,+BAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,8BAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC;AAAA,YAA6B;AAAA,aAAb,WAAuC,CACzD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,cAAc,YAAY,aAAa;AAAA,EACtD;AAEA,SAAO;AACT;",
   "names": []
 }

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

@@ -5,7 +5,7 @@ import { VerticalScrapperLine } from "./VerticalScrapperLine";
 import { useUniqueData } from "../../helpers/useUniqueData";
 const VerticalScrapper = () => {
   const uniqueData = useUniqueData();
-  const render = useMemo(
+  return useMemo(
     () => /* @__PURE__ */ jsx("g", {
       className: "vertical-scrapper",
       children: uniqueData.map((line) => /* @__PURE__ */ jsx(VerticalScrapperLine, {
@@ -16,7 +16,6 @@ const VerticalScrapper = () => {
     }),
     [uniqueData]
   );
-  return render;
 };
 export {
   VerticalScrapper

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scrapper/VerticalScrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { VerticalScrapperLine } from './VerticalScrapperLine';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nexport const VerticalScrapper = () => {\n  const uniqueData = useUniqueData();\n  const render = useMemo(\n    () => (\n      <g className=\"vertical-scrapper\">\n        {uniqueData.map((line) => (\n          <VerticalScrapperLine\n            rectDetector={line?.rectDetector}\n            xPosition={line.xPosition}\n            key={line.xPosition}\n            datum={line.datum}\n          />\n        ))}\n      </g>\n    ),\n\n    [uniqueData],\n  );\n\n  return render;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,eAAe;AAC/B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AACvB,MAAM,mBAAmB,MAAM;AACpC,QAAM,aAAa,cAAc;AACjC,QAAM,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE,WAAU;AAAA,MACV,qBAAW,IAAI,CAAC,SACf,oBAAC;AAAA,QACC,cAAc,MAAM;AAAA,QACpB,WAAW,KAAK;AAAA,QAEhB,OAAO,KAAK;AAAA,SADP,KAAK,SAEZ,CACD;AAAA,KACH;AAAA,IAGF,CAAC,UAAU;AAAA,EACb;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { VerticalScrapperLine } from './VerticalScrapperLine';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nexport const VerticalScrapper = () => {\n  const uniqueData = useUniqueData();\n  return useMemo(\n    () => (\n      <g className=\"vertical-scrapper\">\n        {uniqueData.map((line) => (\n          <VerticalScrapperLine\n            rectDetector={line?.rectDetector}\n            xPosition={line.xPosition}\n            key={line.xPosition}\n            datum={line.datum}\n          />\n        ))}\n      </g>\n    ),\n\n    [uniqueData],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,eAAe;AAC/B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AACvB,MAAM,mBAAmB,MAAM;AACpC,QAAM,aAAa,cAAc;AACjC,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,WAAU;AAAA,MACV,qBAAW,IAAI,CAAC,SACf,oBAAC;AAAA,QACC,cAAc,MAAM;AAAA,QACpB,WAAW,KAAK;AAAA,QAEhB,OAAO,KAAK;AAAA,SADP,KAAK,SAEZ,CACD;AAAA,KACH;AAAA,IAGF,CAAC,UAAU;AAAA,EACb;AACF;",
   "names": []
 }

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

@@ -11,6 +11,7 @@ const VerticalScrapperLine = React2.memo(({ rectDetector, xPosition, datum }) =>
     setScrapperPosX,
     isGrabbed,
     xScale,
+    yScale,
     setActivePoint,
     innerHeight,
     props: { TooltipRenderer, scrapper }
@@ -23,8 +24,9 @@ const VerticalScrapperLine = React2.memo(({ rectDetector, xPosition, datum }) =>
       setScrapperPosX(xPosition);
     setActivePoint(null);
   }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);
-  const render = useMemo(
+  return useMemo(
     () => /* @__PURE__ */ jsxs("g", {
+      transform: `translate(${xScale.bandwidth ? xScale.bandwidth() / 2 : 0}, 0)`,
       children: [
         isActive && !isGrabbed ? /* @__PURE__ */ jsxs("g", {
           children: [
@@ -85,7 +87,6 @@ const VerticalScrapperLine = React2.memo(({ rectDetector, xPosition, datum }) =>
       rectDetector
     ]
   );
-  return render;
 });
 export {
   VerticalScrapperLine

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, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const VerticalScrapperLine = React.memo(({ rectDetector, xPosition, datum }) => {\n  const {\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    setActivePoint,\n    innerHeight,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n  const isActive = scrapperPosX === xPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosX(xPosition);\n    setActivePoint(null);\n  }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);\n\n  // const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;\n\n  const render = useMemo(\n    () => (\n      <g>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement}\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={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          // onMouseLeave={() => setScrapperPosY('')}\n          // id=\"horizontal-scrapper-zone\"\n          x={xScale.bandwidth ? xPosition - xScale.bandwidth() / 2 : xPosition - rectDetector?.left}\n          fill=\"transparent\"\n          y={0}\n          width={xScale.bandwidth?.() ?? rectDetector?.right + rectDetector?.left}\n          height={innerHeight}\n        />\n      </g>\n    ),\n    [\n      isActive,\n      isGrabbed,\n      TooltipRenderer,\n      referenceElement,\n      theme.zIndex.tooltip,\n      scrapper.tooltipPreference,\n      scrapper.color,\n      datum,\n      xPosition,\n      innerHeight,\n      handleOnMouseEnter,\n      xScale,\n      rectDetector,\n    ],\n  );\n  return render;\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,UAAS,YAAY,aAAa,UAAU,eAAe;AAClE,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,uBAAuBA,OAAM,KAAK,CAAC,EAAE,cAAc,WAAW,MAAM,MAAM;AACrF,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,SAAgD;AAChG,QAAM,WAAW,iBAAiB;AAClC,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AACzC,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAI1D,QAAM,SAAS;AAAA,IACb,MACE,qBAAC;AAAA,MACE;AAAA,oBAAY,CAAC,YACZ,qBAAC;AAAA,UACE;AAAA,8BACC,oBAAC;AAAA,cACC,+BAAC;AAAA,gBACC,kBAAgB;AAAA,gBAChB,cAAY;AAAA,gBACZ,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAW;AAAA,gBACX,QAAQ,MAAM,OAAO;AAAA,gBACrB,0BAA0B,SAAS;AAAA,gBAEnC;AAAA,sCAAC,+BAA4B;AAAA,kBAC7B,oBAAC;AAAA,oBACC,8BAAC;AAAA,sBAAgB,MAAM;AAAA,qBAAO;AAAA,mBAChC;AAAA;AAAA,eACF;AAAA,aACF,IACE;AAAA,YACJ,oBAAC;AAAA,cACC,KAAK;AAAA,cACL,IAAI;AAAA,cACJ,aAAY;AAAA,cACZ,QAAQ,SAAS;AAAA,cACjB,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,kBAAkB,GAAG;AAAA,aACvB;AAAA;AAAA,SACF,IACE;AAAA,QACJ,oBAAC;AAAA,UACC,aAAa;AAAA,UAGb,GAAG,OAAO,YAAY,YAAY,OAAO,UAAU,IAAI,IAAI,YAAY,cAAc;AAAA,UACrF,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OAAO,OAAO,YAAY,KAAK,cAAc,QAAQ,cAAc;AAAA,UACnE,QAAQ;AAAA,SACV;AAAA;AAAA,KACF;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\nimport { TrendHighlight } from '../TrendHighlight';\n\nexport const VerticalScrapperLine = React.memo(({ rectDetector, xPosition, datum }) => {\n  const {\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    yScale,\n    setActivePoint,\n    innerHeight,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n  const isActive = scrapperPosX === xPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosX(xPosition);\n    setActivePoint(null);\n  }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);\n\n  // const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;\n  return useMemo(\n    () => (\n      <g transform={`translate(${xScale.bandwidth ? xScale.bandwidth() / 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}\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={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.bandwidth ? xPosition - xScale.bandwidth() / 2 : xPosition - rectDetector?.left}\n          fill=\"transparent\"\n          y={0}\n          width={xScale.bandwidth?.() ?? rectDetector?.right + rectDetector?.left}\n          height={innerHeight}\n        />\n      </g>\n    ),\n    [\n      isActive,\n      isGrabbed,\n      TooltipRenderer,\n      referenceElement,\n      theme.zIndex.tooltip,\n      scrapper.tooltipPreference,\n      scrapper.color,\n      datum,\n      xPosition,\n      innerHeight,\n      handleOnMouseEnter,\n      xScale,\n      rectDetector,\n    ],\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,UAAS,YAAY,aAAa,UAAU,eAAe;AAClE,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAG7D,MAAM,uBAAuBA,OAAM,KAAK,CAAC,EAAE,cAAc,WAAW,MAAM,MAAM;AACrF,QAAM;AAAA,IACJ;AAAA,IACA;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,SAAgD;AAChG,QAAM,WAAW,iBAAiB;AAClC,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AACzC,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAG1D,SAAO;AAAA,IACL,MACE,qBAAC;AAAA,MAAE,WAAW,aAAa,OAAO,YAAY,OAAO,UAAU,IAAI,IAAI;AAAA,MACpE;AAAA,oBAAY,CAAC,YACZ,qBAAC;AAAA,UACE;AAAA,8BACC,oBAAC;AAAA,cACC,+BAAC;AAAA,gBACC,kBAAgB;AAAA,gBAChB,cAAY;AAAA,gBACZ,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAW;AAAA,gBACX,QAAQ,MAAM,OAAO;AAAA,gBACrB,0BAA0B,SAAS;AAAA,gBAEnC;AAAA,sCAAC,+BAA4B;AAAA,kBAC7B,oBAAC;AAAA,oBACC,8BAAC;AAAA,sBAAgB,MAAM;AAAA,qBAAO;AAAA,mBAChC;AAAA;AAAA,eACF;AAAA,aACF,IACE;AAAA,YACJ,oBAAC;AAAA,cACC,KAAK;AAAA,cACL,IAAI;AAAA,cACJ,aAAY;AAAA,cACZ,QAAQ,SAAS;AAAA,cACjB,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,kBAAkB,GAAG;AAAA,aACvB;AAAA;AAAA,SACF,IACE;AAAA,QACJ,oBAAC;AAAA,UACC,aAAa;AAAA,UACb,GAAG,OAAO,YAAY,YAAY,OAAO,UAAU,IAAI,IAAI,YAAY,cAAc;AAAA,UACrF,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OAAO,OAAO,YAAY,KAAK,cAAc,QAAQ,cAAc;AAAA,UACnE,QAAQ;AAAA,SACV;AAAA;AAAA,KACF;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
   "names": ["React"]
 }

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

@@ -4,12 +4,18 @@ import { useContext, useMemo } from "react";
 import { ChartContext } from "../../ChartContext";
 const BlurMask = () => {
   const {
+    props: { yAxis, xScroll, xAxis },
     xScrollbarPosition,
     innerWidth,
+    internalMargin,
     containerRatio,
+    innerHeight,
     chartId,
-    props: { height }
+    height,
+    width
   } = useContext(ChartContext);
+  const yScrolled = yAxis.advanced?.pointSpacing?.value > 1;
+  const xScrolled = xScroll || xAxis.advanced?.pointSpacing?.value > 1;
   const gradient = useMemo(() => {
     if (xScrollbarPosition === 0) {
       return /* @__PURE__ */ jsxs(Fragment, {
@@ -25,7 +31,9 @@ const BlurMask = () => {
         ]
       });
     }
-    if (innerWidth * containerRatio === (xScrollbarPosition + innerWidth / containerRatio) * containerRatio) {
+    const isAtEndXScroll = innerWidth * containerRatio === (xScrollbarPosition + innerWidth / containerRatio) * containerRatio;
+    const isAtEndYScroll = innerHeight * containerRatio === (xScrollbarPosition + innerHeight / containerRatio) * containerRatio;
+    if (isAtEndXScroll || isAtEndYScroll) {
       return /* @__PURE__ */ jsxs(Fragment, {
         children: [
           /* @__PURE__ */ jsx("stop", {
@@ -59,16 +67,29 @@ const BlurMask = () => {
         })
       ]
     });
-  }, [containerRatio, innerWidth, xScrollbarPosition]);
+  }, [containerRatio, innerHeight, innerWidth, xScrollbarPosition]);
   if (containerRatio === 1)
     return null;
   return /* @__PURE__ */ jsxs("defs", {
     children: [
-      /* @__PURE__ */ jsx("linearGradient", {
+      yScrolled ? /* @__PURE__ */ jsx("linearGradient", {
+        x2: "0%",
+        y2: "100%",
+        id: `filter-fade-${chartId}`,
+        children: gradient
+      }) : /* @__PURE__ */ jsx("linearGradient", {
         id: `filter-fade-${chartId}`,
         children: gradient
       }),
-      /* @__PURE__ */ jsx("mask", {
+      yScrolled ? /* @__PURE__ */ jsx("mask", {
+        id: `mask-y-${chartId}`,
+        children: /* @__PURE__ */ jsx("rect", {
+          x: -internalMargin.left,
+          width,
+          height: innerHeight,
+          fill: `url(#filter-fade-${chartId}`
+        })
+      }) : /* @__PURE__ */ jsx("mask", {
         id: `mask-${chartId}`,
         children: /* @__PURE__ */ jsx("rect", {
           x: 0,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/BlurMask.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const BlurMask = () => {\n  const {\n    xScrollbarPosition,\n    innerWidth,\n    containerRatio,\n    chartId,\n    props: { height },\n  } = useContext(ChartContext);\n\n  const gradient = useMemo(() => {\n    if (xScrollbarPosition === 0) {\n      return (\n        <>\n          <stop offset=\"93%\" style={{ stopColor: 'white', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: 'white', stopOpacity: 0 }} />\n        </>\n      );\n    }\n\n    if (innerWidth * containerRatio === (xScrollbarPosition + innerWidth / containerRatio) * containerRatio) {\n      return (\n        <>\n          <stop offset=\"0%\" style={{ stopColor: 'white', stopOpacity: 0 }} />\n          <stop offset=\"7%\" style={{ stopColor: 'white', stopOpacity: 1 }} />\n        </>\n      );\n    }\n\n    return (\n      <>\n        <stop offset=\"0%\" style={{ stopColor: 'white', stopOpacity: 0 }} />\n        <stop offset=\"7%\" style={{ stopColor: 'white', stopOpacity: 1 }} />\n        <stop offset=\"93%\" style={{ stopColor: 'white', stopOpacity: 1 }} />\n        <stop offset=\"100%\" style={{ stopColor: 'white', stopOpacity: 0 }} />\n      </>\n    );\n  }, [containerRatio, innerWidth, xScrollbarPosition]);\n\n  if (containerRatio === 1) return null;\n  return (\n    <defs>\n      <linearGradient id={`filter-fade-${chartId}`}>{gradient}</linearGradient>\n\n      <mask id={`mask-${chartId}`}>\n        <rect x={0} width={innerWidth} height={height} fill={`url(#filter-fade-${chartId}`}></rect>\n      </mask>\n    </defs>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAEtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO;AAAA,EAClB,IAAI,WAAW,YAAY;AAE3B,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,uBAAuB,GAAG;AAC5B,aACE;AAAA,QACE;AAAA,8BAAC;AAAA,YAAK,QAAO;AAAA,YAAM,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,WAAG;AAAA,UAClE,oBAAC;AAAA,YAAK,QAAO;AAAA,YAAO,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,WAAG;AAAA;AAAA,OACrE;AAAA,IAEJ;AAEA,QAAI,aAAa,oBAAoB,qBAAqB,aAAa,kBAAkB,gBAAgB;AACvG,aACE;AAAA,QACE;AAAA,8BAAC;AAAA,YAAK,QAAO;AAAA,YAAK,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,WAAG;AAAA,UACjE,oBAAC;AAAA,YAAK,QAAO;AAAA,YAAK,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,WAAG;AAAA;AAAA,OACnE;AAAA,IAEJ;AAEA,WACE;AAAA,MACE;AAAA,4BAAC;AAAA,UAAK,QAAO;AAAA,UAAK,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,SAAG;AAAA,QACjE,oBAAC;AAAA,UAAK,QAAO;AAAA,UAAK,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,SAAG;AAAA,QACjE,oBAAC;AAAA,UAAK,QAAO;AAAA,UAAM,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,SAAG;AAAA,QAClE,oBAAC;AAAA,UAAK,QAAO;AAAA,UAAO,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,SAAG;AAAA;AAAA,KACrE;AAAA,EAEJ,GAAG,CAAC,gBAAgB,YAAY,kBAAkB,CAAC;AAEnD,MAAI,mBAAmB;AAAG,WAAO;AACjC,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAAe,IAAI,eAAe;AAAA,QAAY;AAAA,OAAS;AAAA,MAExD,oBAAC;AAAA,QAAK,IAAI,QAAQ;AAAA,QAChB,8BAAC;AAAA,UAAK,GAAG;AAAA,UAAG,OAAO;AAAA,UAAY;AAAA,UAAgB,MAAM,oBAAoB;AAAA,SAAW;AAAA,OACtF;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const BlurMask = () => {\n  const {\n    props: { yAxis, xScroll, xAxis },\n    xScrollbarPosition,\n    innerWidth,\n    internalMargin,\n    containerRatio,\n    innerHeight,\n    chartId,\n    height,\n    width,\n  } = useContext(ChartContext);\n\n  const yScrolled = yAxis.advanced?.pointSpacing?.value > 1;\n  const xScrolled = xScroll || xAxis.advanced?.pointSpacing?.value > 1;\n  const gradient = useMemo(() => {\n    if (xScrollbarPosition === 0) {\n      return (\n        <>\n          <stop offset=\"93%\" style={{ stopColor: 'white', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: 'white', stopOpacity: 0 }} />\n        </>\n      );\n    }\n\n    const isAtEndXScroll =\n      innerWidth * containerRatio === (xScrollbarPosition + innerWidth / containerRatio) * containerRatio;\n    const isAtEndYScroll =\n      innerHeight * containerRatio === (xScrollbarPosition + innerHeight / containerRatio) * containerRatio;\n    if (isAtEndXScroll || isAtEndYScroll) {\n      return (\n        <>\n          <stop offset=\"0%\" style={{ stopColor: 'white', stopOpacity: 0 }} />\n          <stop offset=\"7%\" style={{ stopColor: 'white', stopOpacity: 1 }} />\n        </>\n      );\n    }\n\n    return (\n      <>\n        <stop offset=\"0%\" style={{ stopColor: 'white', stopOpacity: 0 }} />\n        <stop offset=\"7%\" style={{ stopColor: 'white', stopOpacity: 1 }} />\n        <stop offset=\"93%\" style={{ stopColor: 'white', stopOpacity: 1 }} />\n        <stop offset=\"100%\" style={{ stopColor: 'white', stopOpacity: 0 }} />\n      </>\n    );\n  }, [containerRatio, innerHeight, innerWidth, xScrollbarPosition]);\n\n  if (containerRatio === 1) return null;\n  return (\n    <defs>\n      {yScrolled ? (\n        <linearGradient x2=\"0%\" y2=\"100%\" id={`filter-fade-${chartId}`}>\n          {gradient}\n        </linearGradient>\n      ) : (\n        <linearGradient id={`filter-fade-${chartId}`}>{gradient}</linearGradient>\n      )}\n\n      {yScrolled ? (\n        <mask id={`mask-y-${chartId}`}>\n          <rect x={-internalMargin.left} width={width} height={innerHeight} fill={`url(#filter-fade-${chartId}`}></rect>\n        </mask>\n      ) : (\n        <mask id={`mask-${chartId}`}>\n          <rect x={0} width={innerWidth} height={height} fill={`url(#filter-fade-${chartId}`}></rect>\n        </mask>\n      )}\n    </defs>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAEtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,SAAS,MAAM;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,MAAM,UAAU,cAAc,QAAQ;AACxD,QAAM,YAAY,WAAW,MAAM,UAAU,cAAc,QAAQ;AACnE,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,uBAAuB,GAAG;AAC5B,aACE;AAAA,QACE;AAAA,8BAAC;AAAA,YAAK,QAAO;AAAA,YAAM,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,WAAG;AAAA,UAClE,oBAAC;AAAA,YAAK,QAAO;AAAA,YAAO,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,WAAG;AAAA;AAAA,OACrE;AAAA,IAEJ;AAEA,UAAM,iBACJ,aAAa,oBAAoB,qBAAqB,aAAa,kBAAkB;AACvF,UAAM,iBACJ,cAAc,oBAAoB,qBAAqB,cAAc,kBAAkB;AACzF,QAAI,kBAAkB,gBAAgB;AACpC,aACE;AAAA,QACE;AAAA,8BAAC;AAAA,YAAK,QAAO;AAAA,YAAK,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,WAAG;AAAA,UACjE,oBAAC;AAAA,YAAK,QAAO;AAAA,YAAK,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,WAAG;AAAA;AAAA,OACnE;AAAA,IAEJ;AAEA,WACE;AAAA,MACE;AAAA,4BAAC;AAAA,UAAK,QAAO;AAAA,UAAK,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,SAAG;AAAA,QACjE,oBAAC;AAAA,UAAK,QAAO;AAAA,UAAK,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,SAAG;AAAA,QACjE,oBAAC;AAAA,UAAK,QAAO;AAAA,UAAM,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,SAAG;AAAA,QAClE,oBAAC;AAAA,UAAK,QAAO;AAAA,UAAO,OAAO,EAAE,WAAW,SAAS,aAAa,EAAE;AAAA,SAAG;AAAA;AAAA,KACrE;AAAA,EAEJ,GAAG,CAAC,gBAAgB,aAAa,YAAY,kBAAkB,CAAC;AAEhE,MAAI,mBAAmB;AAAG,WAAO;AACjC,SACE,qBAAC;AAAA,IACE;AAAA,kBACC,oBAAC;AAAA,QAAe,IAAG;AAAA,QAAK,IAAG;AAAA,QAAO,IAAI,eAAe;AAAA,QAClD;AAAA,OACH,IAEA,oBAAC;AAAA,QAAe,IAAI,eAAe;AAAA,QAAY;AAAA,OAAS;AAAA,MAGzD,YACC,oBAAC;AAAA,QAAK,IAAI,UAAU;AAAA,QAClB,8BAAC;AAAA,UAAK,GAAG,CAAC,eAAe;AAAA,UAAM;AAAA,UAAc,QAAQ;AAAA,UAAa,MAAM,oBAAoB;AAAA,SAAW;AAAA,OACzG,IAEA,oBAAC;AAAA,QAAK,IAAI,QAAQ;AAAA,QAChB,8BAAC;AAAA,UAAK,GAAG;AAAA,UAAG,OAAO;AAAA,UAAY;AAAA,UAAgB,MAAM,oBAAoB;AAAA,SAAW;AAAA,OACtF;AAAA;AAAA,GAEJ;AAEJ;",
   "names": []
 }