@elliemae/ds-dataviz 3.8.1 → 3.9.0-next.1

package/dist/esm/graphs/Chart/parts/Scrapper/Scrapper.js

@@ -1,36 +1,70 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
+import { useContext, useCallback, useMemo } from "react";
 import { ChartContext } from "../../ChartContext";
 import { ScrapperLine } from "./ScrapperLine";
 const Scrapper = () => {
   const {
     yScale,
     y2Scale,
-    props: { xAxis, data }
+    xScale,
+    getXValue,
+    getYValue,
+    isHorizontal,
+    getBandwidth,
+    props: { data }
   } = useContext(ChartContext);
+  const getPosition = useCallback(
+    (datum, scale) => {
+      if (isHorizontal) {
+        return xScale(getXValue(datum));
+      }
+      if (scale === "y" || !scale) {
+        return yScale(getYValue(datum));
+      }
+      return y2Scale(getYValue(datum));
+    },
+    [getXValue, getYValue, isHorizontal, xScale, y2Scale, yScale]
+  );
+  const isBandAxis = !!yScale.bandwidth;
   const uniqueData = useMemo(() => {
-    const valueToPositionPerSeries = data.map(
-      (serie) => serie.data.map((datum, i) => ({
-        position: serie.scale === "y" || !serie.scale ? yScale(datum.value) : y2Scale(datum.value),
-        name: serie.name,
-        xValue: xAxis.cols[i],
-        yValue: datum.value
-      }))
-    ).flat(1);
-    const postionUniqueData = {};
+    let valueToPositionPerSeries;
+    if (isBandAxis) {
+      valueToPositionPerSeries = data.map(
+        (serie) => serie.data.map((datum) => {
+          const x = getXValue(datum);
+          const y = getYValue(datum);
+          return {
+            position: yScale(y),
+            name: serie.name,
+            xValue: x,
+            yValue: y
+          };
+        })
+      ).flat(1);
+    } else {
+      valueToPositionPerSeries = data.map(
+        (serie) => serie.data.map((datum, i) => ({
+          position: getPosition(datum, serie.scale),
+          name: serie.name,
+          xValue: getXValue(datum),
+          yValue: getYValue(datum)
+        }))
+      ).flat(1);
+    }
+    const positionUniqueData = {};
     valueToPositionPerSeries.forEach((set) => {
-      if (postionUniqueData[[set.position]]) {
-        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];
+      if (positionUniqueData[[set.position]]) {
+        positionUniqueData[[set.position]] = [...positionUniqueData[[set.position]], { ...set }];
       } else {
-        postionUniqueData[[set.position]] = [{ ...set }];
+        positionUniqueData[[set.position]] = [{ ...set }];
       }
     });
-    return postionUniqueData;
-  }, [data, xAxis.cols, y2Scale, yScale]);
+    return positionUniqueData;
+  }, [data, getXValue, getYValue, y2Scale, yScale]);
   return /* @__PURE__ */ jsx("g", {
     children: Object.keys(uniqueData).map((key) => {
-      const yPosition = parseFloat(key);
+      const yPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);
       const datum = uniqueData[key];
       return /* @__PURE__ */ jsx(ScrapperLine, {
         yPosition,

package/dist/esm/graphs/Chart/parts/Scrapper/Scrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scrapper/Scrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { ScrapperLine } from './ScrapperLine';\nexport const Scrapper = () => {\n  const {\n    yScale,\n    y2Scale,\n    props: { xAxis, data },\n  } = useContext(ChartContext);\n\n  const uniqueData = useMemo(() => {\n    const valueToPositionPerSeries = data\n      .map((serie) =>\n        serie.data.map((datum, i) => ({\n          position: serie.scale === 'y' || !serie.scale ? yScale(datum.value) : y2Scale(datum.value),\n          name: serie.name,\n          xValue: xAxis.cols[i],\n          yValue: datum.value,\n        })),\n      )\n      .flat(1);\n\n    const postionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (postionUniqueData[[set.position]]) {\n        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n      } else {\n        postionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return postionUniqueData;\n  }, [data, xAxis.cols, y2Scale, yScale]);\n\n  return (\n    <g>\n      {Object.keys(uniqueData).map((key) => {\n        const yPosition = parseFloat(key);\n        const datum = uniqueData[key];\n        return <ScrapperLine key={key} yPosition={yPosition} datum={datum} />;\n      })}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AACtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,KAAK;AAAA,EACvB,IAAI,WAAW,YAAY;AAE3B,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,2BAA2B,KAC9B;AAAA,MAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,OAAO,OAAO;AAAA,QAC5B,UAAU,MAAM,UAAU,OAAO,CAAC,MAAM,QAAQ,OAAO,MAAM,KAAK,IAAI,QAAQ,MAAM,KAAK;AAAA,QACzF,MAAM,MAAM;AAAA,QACZ,QAAQ,MAAM,KAAK;AAAA,QACnB,QAAQ,MAAM;AAAA,MAChB,EAAE;AAAA,IACJ,EACC,KAAK,CAAC;AAET,UAAM,oBAAoB,CAAC;AAE3B,6BAAyB,QAAQ,CAAC,QAAQ;AACxC,UAAI,kBAAkB,CAAC,IAAI,QAAQ,IAAI;AACrC,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,GAAG,kBAAkB,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC;AAAA,MACvF,OAAO;AACL,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;AAAA,MACjD;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,MAAM,MAAM,SAAS,MAAM,CAAC;AAEtC,SACE,oBAAC;AAAA,IACE,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,QAAQ;AACpC,YAAM,YAAY,WAAW,GAAG;AAChC,YAAM,QAAQ,WAAW;AACzB,aAAO,oBAAC;AAAA,QAAuB;AAAA,QAAsB;AAAA,SAA3B,GAAyC;AAAA,IACrE,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { ScrapperLine } from './ScrapperLine';\nexport const Scrapper = () => {\n  const {\n    yScale,\n    y2Scale,\n    xScale,\n    getXValue,\n    getYValue,\n    isHorizontal,\n    getBandwidth,\n    props: { data },\n  } = useContext(ChartContext);\n\n  const getPosition = useCallback(\n    (datum, scale) => {\n      if (isHorizontal) {\n        return xScale(getXValue(datum));\n      }\n      if (scale === 'y' || !scale) {\n        return yScale(getYValue(datum));\n      }\n      return y2Scale(getYValue(datum));\n    },\n    [getXValue, getYValue, isHorizontal, xScale, y2Scale, yScale],\n  );\n  const isBandAxis = !!yScale.bandwidth;\n\n  const uniqueData = useMemo(() => {\n    let valueToPositionPerSeries;\n\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum) => {\n            const x = getXValue(datum);\n            const y = getYValue(datum);\n            return {\n              position: yScale(y),\n              name: serie.name,\n              xValue: x,\n              yValue: y,\n            };\n          }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum, i) => ({\n            position: getPosition(datum, serie.scale),\n            name: serie.name,\n            xValue: getXValue(datum),\n            yValue: getYValue(datum),\n          })),\n        )\n        .flat(1);\n    }\n    const positionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (positionUniqueData[[set.position]]) {\n        positionUniqueData[[set.position]] = [...positionUniqueData[[set.position]], { ...set }];\n      } else {\n        positionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return positionUniqueData;\n  }, [data, getXValue, getYValue, y2Scale, yScale]);\n\n  return (\n    <g>\n      {Object.keys(uniqueData).map((key) => {\n        const yPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);\n        const datum = uniqueData[key];\n        return <ScrapperLine key={key} yPosition={yPosition} datum={datum} />;\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AACtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc;AAAA,IAClB,CAAC,OAAO,UAAU;AAChB,UAAI,cAAc;AAChB,eAAO,OAAO,UAAU,KAAK,CAAC;AAAA,MAChC;AACA,UAAI,UAAU,OAAO,CAAC,OAAO;AAC3B,eAAO,OAAO,UAAU,KAAK,CAAC;AAAA,MAChC;AACA,aAAO,QAAQ,UAAU,KAAK,CAAC;AAAA,IACjC;AAAA,IACA,CAAC,WAAW,WAAW,cAAc,QAAQ,SAAS,MAAM;AAAA,EAC9D;AACA,QAAM,aAAa,CAAC,CAAC,OAAO;AAE5B,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI;AAEJ,QAAI,YAAY;AACd,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,UAAU;AACxB,gBAAM,IAAI,UAAU,KAAK;AACzB,gBAAM,IAAI,UAAU,KAAK;AACzB,iBAAO;AAAA,YACL,UAAU,OAAO,CAAC;AAAA,YAClB,MAAM,MAAM;AAAA,YACZ,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF,CAAC;AAAA,MACH,EACC,KAAK,CAAC;AAAA,IACX,OAAO;AACL,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,OAAO,OAAO;AAAA,UAC5B,UAAU,YAAY,OAAO,MAAM,KAAK;AAAA,UACxC,MAAM,MAAM;AAAA,UACZ,QAAQ,UAAU,KAAK;AAAA,UACvB,QAAQ,UAAU,KAAK;AAAA,QACzB,EAAE;AAAA,MACJ,EACC,KAAK,CAAC;AAAA,IACX;AACA,UAAM,qBAAqB,CAAC;AAE5B,6BAAyB,QAAQ,CAAC,QAAQ;AACxC,UAAI,mBAAmB,CAAC,IAAI,QAAQ,IAAI;AACtC,2BAAmB,CAAC,IAAI,QAAQ,KAAK,CAAC,GAAG,mBAAmB,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC;AAAA,MACzF,OAAO;AACL,2BAAmB,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;AAAA,MAClD;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,WAAW,WAAW,SAAS,MAAM,CAAC;AAEhD,SACE,oBAAC;AAAA,IACE,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,QAAQ;AACpC,YAAM,YAAY,WAAW,GAAG,KAAK,aAAa,aAAa,IAAI,IAAI;AACvE,YAAM,QAAQ,WAAW;AACzB,aAAO,oBAAC;AAAA,QAAuB;AAAA,QAAsB;AAAA,SAA3B,GAAyC;AAAA,IACrE,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Scrapper/ScrapperLine.js

@@ -10,6 +10,7 @@ const ScrapperLine = ({ yPosition, datum }) => {
     scrapperPosY,
     setScrapperPosY,
     innerWidth,
+    yScale,
     props: { TooltipRenderer, scrapper }
   } = useContext(ChartContext);
   const theme = useContext(ThemeContext);
@@ -17,6 +18,7 @@ const ScrapperLine = ({ yPosition, datum }) => {
   const handleOnMouseEnter = useCallback(() => {
     setScrapperPosY(yPosition);
   }, [setScrapperPosY, yPosition]);
+  const strokeDetectorWidth = yScale.bandwidth ? yScale.bandwidth() : "4px";
   return /* @__PURE__ */ jsxs("g", {
     children: [
       scrapperPosY === yPosition ? /* @__PURE__ */ jsxs("g", {
@@ -63,7 +65,7 @@ const ScrapperLine = ({ yPosition, datum }) => {
       /* @__PURE__ */ jsx("line", {
         onMouseEnter: handleOnMouseEnter,
         x1: 0,
-        strokeWidth: "4px",
+        strokeWidth: strokeDetectorWidth,
         stroke: "transparent",
         y1: yPosition,
         x2: innerWidth,

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

@@ -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';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const ScrapperLine = ({ yPosition, datum }) => {\n  const {\n    scrapperPosY,\n    setScrapperPosY,\n    innerWidth,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n\n  const handleOnMouseEnter = useCallback(() => {\n    setScrapperPosY(yPosition);\n  }, [setScrapperPosY, yPosition]);\n\n  return (\n    <g>\n      {scrapperPosY === yPosition ? (\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                // placementOrderPreference=\"\"\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            // ref={setReferenceElement}\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=\"4px\"\n        stroke=\"transparent\"\n        y1={yPosition}\n        x2={innerWidth}\n        y2={yPosition}\n      />\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,aAAa,gBAAgB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,eAAe,CAAC,EAAE,WAAW,MAAM,MAAM;AACpD,QAAM;AAAA,IACJ;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;AAEhG,QAAM,qBAAqB,YAAY,MAAM;AAC3C,oBAAgB,SAAS;AAAA,EAC3B,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAE/B,SACE,qBAAC;AAAA,IACE;AAAA,uBAAiB,YAChB,qBAAC;AAAA,QACE;AAAA,4BACC,oBAAC;AAAA,YACC,+BAAC;AAAA,cACC,kBAAgB;AAAA,cAChB,cAAY;AAAA,cACZ,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB;AAAA,cACA,aAAW;AAAA,cACX,QAAQ,MAAM,OAAO;AAAA,cAErB,0BAA0B,SAAS;AAAA,cAEnC;AAAA,oCAAC,+BAA4B;AAAA,gBAC7B,oBAAC;AAAA,kBACC,8BAAC;AAAA,oBAAgB,MAAM;AAAA,mBAAO;AAAA,iBAChC;AAAA;AAAA,aACF;AAAA,WACF,IACE;AAAA,UACJ,oBAAC;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,WACN;AAAA,UACA,oBAAC;AAAA,YAEC,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,kBAAkB,GAAG;AAAA,YACrB,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,WACN;AAAA;AAAA,OACF,IACE;AAAA,MACJ,oBAAC;AAAA,QACC,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,aAAY;AAAA,QACZ,QAAO;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,OACN;AAAA;AAAA,GACF;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';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const ScrapperLine = ({ yPosition, datum }) => {\n  const {\n    scrapperPosY,\n    setScrapperPosY,\n    innerWidth,\n    yScale,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n\n  const handleOnMouseEnter = useCallback(() => {\n    setScrapperPosY(yPosition);\n  }, [setScrapperPosY, yPosition]);\n\n  const strokeDetectorWidth = yScale.bandwidth ? yScale.bandwidth() : '4px';\n\n  return (\n    <g>\n      {scrapperPosY === yPosition ? (\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                // placementOrderPreference=\"\"\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            // ref={setReferenceElement}\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;ACAvB;AAAA,SAAgB,YAAY,aAAa,gBAAgB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,eAAe,CAAC,EAAE,WAAW,MAAM,MAAM;AACpD,QAAM;AAAA,IACJ;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;AAEhG,QAAM,qBAAqB,YAAY,MAAM;AAC3C,oBAAgB,SAAS;AAAA,EAC3B,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAE/B,QAAM,sBAAsB,OAAO,YAAY,OAAO,UAAU,IAAI;AAEpE,SACE,qBAAC;AAAA,IACE;AAAA,uBAAiB,YAChB,qBAAC;AAAA,QACE;AAAA,4BACC,oBAAC;AAAA,YACC,+BAAC;AAAA,cACC,kBAAgB;AAAA,cAChB,cAAY;AAAA,cACZ,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB;AAAA,cACA,aAAW;AAAA,cACX,QAAQ,MAAM,OAAO;AAAA,cAErB,0BAA0B,SAAS;AAAA,cAEnC;AAAA,oCAAC,+BAA4B;AAAA,gBAC7B,oBAAC;AAAA,kBACC,8BAAC;AAAA,oBAAgB,MAAM;AAAA,mBAAO;AAAA,iBAChC;AAAA;AAAA,aACF;AAAA,WACF,IACE;AAAA,UACJ,oBAAC;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,WACN;AAAA,UACA,oBAAC;AAAA,YAEC,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,kBAAkB,GAAG;AAAA,YACrB,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,WACN;AAAA;AAAA,OACF,IACE;AAAA,MACJ,oBAAC;AAAA,QACC,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,QAAO;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,OACN;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -9,16 +9,27 @@ const VerticalScrapper = () => {
     getBandwidth,
     xScrollbarPosition,
     containerRatio,
+    getXValue,
+    getYValue,
     props: { xAxis, data }
   } = useContext(ChartContext);
+  function compare(a, b) {
+    if (a.xPosition < b.xPosition) {
+      return -1;
+    }
+    if (a.xPosition > b.xPosition) {
+      return 1;
+    }
+    return 0;
+  }
   const isBandAxis = !!xScale.bandwidth;
   const uniqueData = useMemo(() => {
     let valueToPositionPerSeries;
     if (isBandAxis) {
-      valueToPositionPerSeries = data.map(
+      valueToPositionPerSeries = data.filter((serie) => !serie.isHidden).map(
         (serie) => serie.data.map((datum) => {
-          const x = xAxis.cols ? xAxis.cols[datum.position] : datum.value.x;
-          const y = typeof datum.value === "number" ? datum.value : datum.value.y;
+          const x = getXValue(datum);
+          const y = getYValue(datum);
           return {
             position: xScale(x),
             name: serie.name,
@@ -28,7 +39,7 @@ const VerticalScrapper = () => {
         })
       ).flat(1);
     } else {
-      valueToPositionPerSeries = data.map(
+      valueToPositionPerSeries = data.filter((serie) => !serie.isHidden).map(
         (serie) => serie.data.filter((datum) => {
           const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
           return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) && xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth;
@@ -50,23 +61,34 @@ const VerticalScrapper = () => {
         postionUniqueData[[set.position]] = [{ ...set }];
       }
     });
-    return postionUniqueData;
-  }, [isBandAxis, data, xAxis.cols, xScale, xScrollbarPosition, containerRatio]);
-  const lineWidth = parseFloat(innerWidth / Object.keys(uniqueData).length, 10);
+    const postionUniqueDataArray = Object.keys(postionUniqueData).map((key) => {
+      const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);
+      const datum = postionUniqueData[key];
+      return { xPosition, datum };
+    });
+    if (isBandAxis) {
+      return postionUniqueDataArray;
+    }
+    return postionUniqueDataArray.sort(compare).map((line, i, array) => {
+      const prevPoint = parseFloat(array[i - 1]?.xPosition ?? 0);
+      const postPoint = parseFloat(array[i + 1]?.xPosition ?? 0);
+      const rectDetector = {
+        left: (line.xPosition - prevPoint) / 2,
+        right: Math.abs((postPoint === 0 ? 0 : postPoint - line.xPosition) / 2)
+      };
+      return { ...line, rectDetector };
+    });
+  }, [isBandAxis, data, getXValue, getYValue, xScale, xAxis.cols, xScrollbarPosition, containerRatio, getBandwidth]);
   const render = useMemo(
     () => /* @__PURE__ */ jsx("g", {
       className: "vertical-scrapper",
-      children: Object.keys(uniqueData).map((key, i) => {
-        const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);
-        const datum = uniqueData[key];
-        return /* @__PURE__ */ jsx(VerticalScrapperLine, {
-          lineWidth,
-          xPosition,
-          datum
-        }, key);
-      })
+      children: uniqueData.map((line) => /* @__PURE__ */ jsx(VerticalScrapperLine, {
+        rectDetector: line?.rectDetector,
+        xPosition: line.xPosition,
+        datum: line.datum
+      }, line.xPosition))
     }),
-    [getBandwidth, isBandAxis, lineWidth, uniqueData]
+    [uniqueData]
   );
   return render;
 };

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

@@ -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, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { VerticalScrapperLine } from './VerticalScrapperLine';\n\nexport const VerticalScrapper = () => {\n  const {\n    xScale,\n    getBandwidth,\n    xScrollbarPosition,\n    containerRatio,\n    props: { xAxis, data },\n  } = useContext(ChartContext);\n\n  const isBandAxis = !!xScale.bandwidth;\n  const uniqueData = useMemo(() => {\n    let valueToPositionPerSeries;\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum) => {\n            const x = xAxis.cols ? xAxis.cols[datum.position] : datum.value.x;\n            const y = typeof datum.value === 'number' ? datum.value : datum.value.y;\n            return {\n              position: xScale(x),\n              name: serie.name,\n              xValue: x,\n              yValue: y,\n            };\n          }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data\n            .filter((datum) => {\n              const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n              return (\n                xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) &&\n                xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth\n              );\n            })\n            .map((datum) => {\n              return {\n                position: xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x),\n                name: serie.name,\n                xValue: xAxis.cols ? xAxis.cols[datum.position] : datum.value.x,\n                yValue: typeof datum.value === 'number' ? datum.value : datum.value.y,\n              };\n            }),\n        )\n        .flat(1);\n    }\n    const postionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (postionUniqueData[[set.position]]) {\n        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n      } else {\n        postionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return postionUniqueData;\n  }, [isBandAxis, data, xAxis.cols, xScale, xScrollbarPosition, containerRatio]);\n\n  const lineWidth = parseFloat(innerWidth / Object.keys(uniqueData).length, 10);\n\n  const render = useMemo(\n    () => (\n      <g className=\"vertical-scrapper\">\n        {Object.keys(uniqueData).map((key, i) => {\n          const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);\n          const datum = uniqueData[key];\n\n          return <VerticalScrapperLine lineWidth={lineWidth} xPosition={xPosition} key={key} datum={datum} />;\n        })}\n      </g>\n    ),\n\n    [getBandwidth, isBandAxis, lineWidth, uniqueData],\n  );\n\n  return render;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAE9B,MAAM,mBAAmB,MAAM;AACpC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,KAAK;AAAA,EACvB,IAAI,WAAW,YAAY;AAE3B,QAAM,aAAa,CAAC,CAAC,OAAO;AAC5B,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI;AACJ,QAAI,YAAY;AACd,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,UAAU;AACxB,gBAAM,IAAI,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM;AAChE,gBAAM,IAAI,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,MAAM,MAAM;AACtE,iBAAO;AAAA,YACL,UAAU,OAAO,CAAC;AAAA,YAClB,MAAM,MAAM;AAAA,YACZ,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF,CAAC;AAAA,MACH,EACC,KAAK,CAAC;AAAA,IACX,OAAO;AACL,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KACH,OAAO,CAAC,UAAU;AACjB,gBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,iBACE,eAAe,sBAAsB,kBAAkB,MACvD,cAAc,sBAAsB,kBAAkB,KAAK;AAAA,QAE/D,CAAC,EACA,IAAI,CAAC,UAAU;AACd,iBAAO;AAAA,YACL,UAAU,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAAA,YACxE,MAAM,MAAM;AAAA,YACZ,QAAQ,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM;AAAA,YAC9D,QAAQ,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,MAAM,MAAM;AAAA,UACtE;AAAA,QACF,CAAC;AAAA,MACL,EACC,KAAK,CAAC;AAAA,IACX;AACA,UAAM,oBAAoB,CAAC;AAE3B,6BAAyB,QAAQ,CAAC,QAAQ;AACxC,UAAI,kBAAkB,CAAC,IAAI,QAAQ,IAAI;AACrC,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,GAAG,kBAAkB,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC;AAAA,MACvF,OAAO;AACL,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;AAAA,MACjD;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,MAAM,MAAM,MAAM,QAAQ,oBAAoB,cAAc,CAAC;AAE7E,QAAM,YAAY,WAAW,aAAa,OAAO,KAAK,UAAU,EAAE,QAAQ,EAAE;AAE5E,QAAM,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE,WAAU;AAAA,MACV,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,KAAK,MAAM;AACvC,cAAM,YAAY,WAAW,GAAG,KAAK,aAAa,aAAa,IAAI,IAAI;AACvE,cAAM,QAAQ,WAAW;AAEzB,eAAO,oBAAC;AAAA,UAAqB;AAAA,UAAsB;AAAA,UAAgC;AAAA,WAAL,GAAmB;AAAA,MACnG,CAAC;AAAA,KACH;AAAA,IAGF,CAAC,cAAc,YAAY,WAAW,UAAU;AAAA,EAClD;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { VerticalScrapperLine } from './VerticalScrapperLine';\n\nexport const VerticalScrapper = () => {\n  const {\n    xScale,\n    getBandwidth,\n    xScrollbarPosition,\n    containerRatio,\n    getXValue,\n    getYValue,\n    props: { xAxis, data },\n  } = useContext(ChartContext);\n\n  function compare(a, b) {\n    if (a.xPosition < b.xPosition) {\n      return -1;\n    }\n    if (a.xPosition > b.xPosition) {\n      return 1;\n    }\n    return 0;\n  }\n\n  const isBandAxis = !!xScale.bandwidth;\n  const uniqueData = useMemo(() => {\n    let valueToPositionPerSeries;\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .filter((serie) => !serie.isHidden)\n        .map((serie) =>\n          serie.data.map((datum) => {\n            const x = getXValue(datum);\n            const y = getYValue(datum);\n            return {\n              position: xScale(x),\n              name: serie.name,\n              xValue: x,\n              yValue: y,\n            };\n          }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .filter((serie) => !serie.isHidden)\n        .map((serie) =>\n          serie.data\n            .filter((datum) => {\n              const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n              return (\n                xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) &&\n                xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth\n              );\n            })\n            .map((datum) => {\n              return {\n                position: xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x),\n                name: serie.name,\n                xValue: xAxis.cols ? xAxis.cols[datum.position] : datum.value.x,\n                yValue: typeof datum.value === 'number' ? datum.value : datum.value.y,\n              };\n            }),\n        )\n        .flat(1);\n    }\n    const postionUniqueData = {};\n\n    // grouping points by xAxis position\n    valueToPositionPerSeries.forEach((set) => {\n      if (postionUniqueData[[set.position]]) {\n        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n      } else {\n        postionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    const postionUniqueDataArray = Object.keys(postionUniqueData).map((key) => {\n      const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);\n      const datum = postionUniqueData[key];\n\n      return { xPosition, datum };\n    });\n\n    if (isBandAxis) {\n      return postionUniqueDataArray;\n    }\n    return postionUniqueDataArray.sort(compare).map((line, i, array) => {\n      const prevPoint = parseFloat(array[i - 1]?.xPosition ?? 0);\n      const postPoint = parseFloat(array[i + 1]?.xPosition ?? 0);\n\n      const rectDetector = {\n        left: (line.xPosition - prevPoint) / 2,\n        right: Math.abs((postPoint === 0 ? 0 : postPoint - line.xPosition) / 2),\n      };\n\n      return { ...line, rectDetector };\n    });\n  }, [isBandAxis, data, getXValue, getYValue, xScale, xAxis.cols, xScrollbarPosition, containerRatio, getBandwidth]);\n\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,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAE9B,MAAM,mBAAmB,MAAM;AACpC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,KAAK;AAAA,EACvB,IAAI,WAAW,YAAY;AAE3B,WAAS,QAAQ,GAAG,GAAG;AACrB,QAAI,EAAE,YAAY,EAAE,WAAW;AAC7B,aAAO;AAAA,IACT;AACA,QAAI,EAAE,YAAY,EAAE,WAAW;AAC7B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,CAAC,CAAC,OAAO;AAC5B,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI;AACJ,QAAI,YAAY;AACd,iCAA2B,KACxB,OAAO,CAAC,UAAU,CAAC,MAAM,QAAQ,EACjC;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,UAAU;AACxB,gBAAM,IAAI,UAAU,KAAK;AACzB,gBAAM,IAAI,UAAU,KAAK;AACzB,iBAAO;AAAA,YACL,UAAU,OAAO,CAAC;AAAA,YAClB,MAAM,MAAM;AAAA,YACZ,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF,CAAC;AAAA,MACH,EACC,KAAK,CAAC;AAAA,IACX,OAAO;AACL,iCAA2B,KACxB,OAAO,CAAC,UAAU,CAAC,MAAM,QAAQ,EACjC;AAAA,QAAI,CAAC,UACJ,MAAM,KACH,OAAO,CAAC,UAAU;AACjB,gBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,iBACE,eAAe,sBAAsB,kBAAkB,MACvD,cAAc,sBAAsB,kBAAkB,KAAK;AAAA,QAE/D,CAAC,EACA,IAAI,CAAC,UAAU;AACd,iBAAO;AAAA,YACL,UAAU,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAAA,YACxE,MAAM,MAAM;AAAA,YACZ,QAAQ,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM;AAAA,YAC9D,QAAQ,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,MAAM,MAAM;AAAA,UACtE;AAAA,QACF,CAAC;AAAA,MACL,EACC,KAAK,CAAC;AAAA,IACX;AACA,UAAM,oBAAoB,CAAC;AAG3B,6BAAyB,QAAQ,CAAC,QAAQ;AACxC,UAAI,kBAAkB,CAAC,IAAI,QAAQ,IAAI;AACrC,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,GAAG,kBAAkB,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC;AAAA,MACvF,OAAO;AACL,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;AAAA,MACjD;AAAA,IACF,CAAC;AAED,UAAM,yBAAyB,OAAO,KAAK,iBAAiB,EAAE,IAAI,CAAC,QAAQ;AACzE,YAAM,YAAY,WAAW,GAAG,KAAK,aAAa,aAAa,IAAI,IAAI;AACvE,YAAM,QAAQ,kBAAkB;AAEhC,aAAO,EAAE,WAAW,MAAM;AAAA,IAC5B,CAAC;AAED,QAAI,YAAY;AACd,aAAO;AAAA,IACT;AACA,WAAO,uBAAuB,KAAK,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,UAAU;AAClE,YAAM,YAAY,WAAW,MAAM,IAAI,IAAI,aAAa,CAAC;AACzD,YAAM,YAAY,WAAW,MAAM,IAAI,IAAI,aAAa,CAAC;AAEzD,YAAM,eAAe;AAAA,QACnB,OAAO,KAAK,YAAY,aAAa;AAAA,QACrC,OAAO,KAAK,KAAK,cAAc,IAAI,IAAI,YAAY,KAAK,aAAa,CAAC;AAAA,MACxE;AAEA,aAAO,EAAE,GAAG,MAAM,aAAa;AAAA,IACjC,CAAC;AAAA,EACH,GAAG,CAAC,YAAY,MAAM,WAAW,WAAW,QAAQ,MAAM,MAAM,oBAAoB,gBAAgB,YAAY,CAAC;AAEjH,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;",
   "names": []
 }

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

@@ -5,13 +5,13 @@ import { DSPopperJS } from "@elliemae/ds-popperjs";
 import { ThemeContext } from "@elliemae/ds-system";
 import { ChartContext } from "../../ChartContext";
 import { StyledMouseOverDetectionBox, StyledTooltipContainer } from "../../styles";
-const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {
+const VerticalScrapperLine = ({ rectDetector, xPosition, datum }) => {
   const {
     scrapperPosX,
     setScrapperPosX,
     isGrabbed,
     xScale,
-    innerWidth,
+    setActivePoint,
     innerHeight,
     props: { TooltipRenderer, scrapper }
   } = useContext(ChartContext);
@@ -21,10 +21,10 @@ const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {
   const handleOnMouseEnter = useCallback(() => {
     if (!isGrabbed)
       setScrapperPosX(xPosition);
-  }, [isGrabbed, setScrapperPosX, xPosition]);
-  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;
-  const render = useMemo(() => {
-    return /* @__PURE__ */ jsxs("g", {
+    setActivePoint(null);
+  }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);
+  const render = useMemo(
+    () => /* @__PURE__ */ jsxs("g", {
       children: [
         isActive && !isGrabbed ? /* @__PURE__ */ jsxs("g", {
           children: [
@@ -59,31 +59,32 @@ const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {
             })
           ]
         }) : null,
-        /* @__PURE__ */ jsx("line", {
+        /* @__PURE__ */ jsx("rect", {
           onMouseOver: handleOnMouseEnter,
-          x1: xPosition,
-          strokeWidth: strokeDetectorWidth,
-          stroke: "transparent",
-          y1: 0,
-          x2: xPosition,
-          y2: innerHeight
+          x: xScale.bandwidth ? xPosition - xScale.bandwidth() / 2 : xPosition - rectDetector?.left,
+          fill: "transparent",
+          y: 0,
+          width: xScale.bandwidth?.() ?? rectDetector?.right + rectDetector?.left,
+          height: innerHeight
         })
       ]
-    });
-  }, [
-    isActive,
-    isGrabbed,
-    TooltipRenderer,
-    referenceElement,
-    theme.zIndex.tooltip,
-    scrapper.tooltipPreference,
-    scrapper.color,
-    datum,
-    xPosition,
-    innerHeight,
-    handleOnMouseEnter,
-    strokeDetectorWidth
-  ]);
+    }),
+    [
+      isActive,
+      isGrabbed,
+      TooltipRenderer,
+      referenceElement,
+      theme.zIndex.tooltip,
+      scrapper.tooltipPreference,
+      scrapper.color,
+      datum,
+      xPosition,
+      innerHeight,
+      handleOnMouseEnter,
+      xScale,
+      rectDetector
+    ]
+  );
   return render;
 };
 export {

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

@@ -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 = ({ lineWidth, xPosition, datum }) => {\n  const {\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    innerWidth,\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  }, [isGrabbed, setScrapperPosX, xPosition]);\n\n  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;\n\n  const render = useMemo(() => {\n    return (\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\n        <line\n          onMouseOver={handleOnMouseEnter}\n          // onMouseLeave={() => setScrapperPosY('')}\n          // id=\"horizontal-scrapper-zone\"\n          x1={xPosition}\n          strokeWidth={strokeDetectorWidth}\n          stroke=\"transparent\"\n          y1={0}\n          x2={xPosition}\n          y2={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    strokeDetectorWidth,\n  ]);\n  return render;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,aAAa,UAAU,eAAe;AAClE,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,uBAAuB,CAAC,EAAE,WAAW,WAAW,MAAM,MAAM;AACvE,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;AAAA,EAC3C,GAAG,CAAC,WAAW,iBAAiB,SAAS,CAAC;AAE1C,QAAM,sBAAsB,OAAO,YAAY,OAAO,UAAU,IAAI;AAEpE,QAAM,SAAS,QAAQ,MAAM;AAC3B,WACE,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,QAEJ,oBAAC;AAAA,UACC,aAAa;AAAA,UAGb,IAAI;AAAA,UACJ,aAAa;AAAA,UACb,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,SACN;AAAA;AAAA,KACF;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,OAAO;AAAA,IACb,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAO;AACT;",
+  "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 = ({ 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,SAAgB,YAAY,aAAa,UAAU,eAAe;AAClE,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,uBAAuB,CAAC,EAAE,cAAc,WAAW,MAAM,MAAM;AAC1E,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;",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Scroller/ScrollBarX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/ScrollBarX.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';\n\nexport const ScrollBarX = () => {\n  const {\n    setIsGrabbed,\n    setStartPosition,\n    innerWidth,\n    xScrollbarPosition,\n    activePoint,\n    setXScrollbarPosition,\n    innerHeight,\n    isGrabbed,\n    containerRatio,\n    setScrapperPosX,\n    isScrollbarVisible,\n    oldLastPosition,\n  } = useContext(ChartContext);\n\n  const barWidth = useMemo(() => parseInt(innerWidth / containerRatio, 10), [containerRatio, innerWidth]);\n\n  // const [endPosition, setEndPosition] = useState(0);\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n      setIsGrabbed(true);\n      setStartPosition(e.clientX);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosX, setStartPosition],\n  );\n\n  const handleMouseEnter = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n    },\n    [setScrapperPosX],\n  );\n\n  // const [endPosition, setEndPosition] = useState(0);\n  const handleClickFullBar = useCallback(\n    (e: React.MouseEvent) => {\n      let newPosition = 0;\n      const bar = e.target;\n      const bounds = bar.getBoundingClientRect();\n      const left = e.clientX - bounds.left;\n      if (left + barWidth / 2 > innerWidth) {\n        newPosition = innerWidth - barWidth;\n      } else if (left - barWidth / 2 > 0) {\n        newPosition = left - barWidth / 2;\n      }\n\n      setXScrollbarPosition(newPosition);\n      oldLastPosition.current = newPosition;\n      e.preventDefault();\n    },\n    [barWidth, innerWidth, oldLastPosition, setXScrollbarPosition],\n  );\n\n  const isBarVisible = useMemo(\n    () => (isScrollbarVisible || activePoint) && containerRatio > 1,\n    [activePoint, containerRatio, isScrollbarVisible],\n  );\n\n  return (\n    <g\n      className=\"scrollbarx\"\n      transform={`translate(0,${innerHeight})`}\n      style={{ visibility: isBarVisible ? 'visible' : 'hidden' }}\n      onMouseEnter={handleMouseEnter}\n    >\n      <rect style={{ cursor: 'pointer' }} width={innerWidth} height=\"6\" fill=\"#ebecf0c5\" onClick={handleClickFullBar} />\n      <g transform={`translate(${xScrollbarPosition},0)`}>\n        <rect\n          style={{ cursor: isGrabbed ? 'grabbing' : 'grab' }}\n          width={barWidth}\n          height=\"6\"\n          fill=\"grey\"\n          onMouseDown={handleMouseDown}\n        />\n      </g>\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,oBAAoB;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,WAAW,QAAQ,MAAM,SAAS,aAAa,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAGtG,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAClB,mBAAa,IAAI;AACjB,uBAAiB,EAAE,OAAO;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,cAAc,iBAAiB,gBAAgB;AAAA,EAClD;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAAA,IACpB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,MAAwB;AACvB,UAAI,cAAc;AAClB,YAAM,MAAM,EAAE;AACd,YAAM,SAAS,IAAI,sBAAsB;AACzC,YAAM,OAAO,EAAE,UAAU,OAAO;AAChC,UAAI,OAAO,WAAW,IAAI,YAAY;AACpC,sBAAc,aAAa;AAAA,MAC7B,WAAW,OAAO,WAAW,IAAI,GAAG;AAClC,sBAAc,OAAO,WAAW;AAAA,MAClC;AAEA,4BAAsB,WAAW;AACjC,sBAAgB,UAAU;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,YAAY,iBAAiB,qBAAqB;AAAA,EAC/D;AAEA,QAAM,eAAe;AAAA,IACnB,OAAO,sBAAsB,gBAAgB,iBAAiB;AAAA,IAC9D,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,EAClD;AAEA,SACE,qBAAC;AAAA,IACC,WAAU;AAAA,IACV,WAAW,eAAe;AAAA,IAC1B,OAAO,EAAE,YAAY,eAAe,YAAY,SAAS;AAAA,IACzD,cAAc;AAAA,IAEd;AAAA,0BAAC;AAAA,QAAK,OAAO,EAAE,QAAQ,UAAU;AAAA,QAAG,OAAO;AAAA,QAAY,QAAO;AAAA,QAAI,MAAK;AAAA,QAAY,SAAS;AAAA,OAAoB;AAAA,MAChH,oBAAC;AAAA,QAAE,WAAW,aAAa;AAAA,QACzB,8BAAC;AAAA,UACC,OAAO,EAAE,QAAQ,YAAY,aAAa,OAAO;AAAA,UACjD,OAAO;AAAA,UACP,QAAO;AAAA,UACP,MAAK;AAAA,UACL,aAAa;AAAA,SACf;AAAA,OACF;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, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const ScrollBarX = () => {\n  const {\n    setIsGrabbed,\n    setStartPosition,\n    innerWidth,\n    xScrollbarPosition,\n    activePoint,\n    setXScrollbarPosition,\n    innerHeight,\n    isGrabbed,\n    containerRatio,\n    setScrapperPosX,\n    isScrollbarVisible,\n    oldLastPosition,\n  } = useContext(ChartContext);\n\n  const barWidth = useMemo(() => parseInt(innerWidth / containerRatio, 10), [containerRatio, innerWidth]);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n      setIsGrabbed(true);\n      setStartPosition(e.clientX);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosX, setStartPosition],\n  );\n\n  const handleMouseEnter = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n    },\n    [setScrapperPosX],\n  );\n\n  const handleClickFullBar = useCallback(\n    (e: React.MouseEvent) => {\n      let newPosition = 0;\n      const bar = e.target;\n      const bounds = bar.getBoundingClientRect();\n      const left = e.clientX - bounds.left;\n      if (left + barWidth / 2 > innerWidth) {\n        newPosition = innerWidth - barWidth;\n      } else if (left - barWidth / 2 > 0) {\n        newPosition = left - barWidth / 2;\n      }\n\n      setXScrollbarPosition(newPosition);\n      oldLastPosition.current = newPosition;\n      e.preventDefault();\n    },\n    [barWidth, innerWidth, oldLastPosition, setXScrollbarPosition],\n  );\n\n  const isBarVisible = useMemo(\n    () => (isScrollbarVisible || activePoint) && containerRatio > 1,\n    [activePoint, containerRatio, isScrollbarVisible],\n  );\n\n  return (\n    <g\n      className=\"scrollbarx\"\n      transform={`translate(0,${innerHeight})`}\n      style={{ visibility: isBarVisible ? 'visible' : 'hidden' }}\n      onMouseEnter={handleMouseEnter}\n    >\n      <rect style={{ cursor: 'pointer' }} width={innerWidth} height=\"6\" fill=\"#ebecf0c5\" onClick={handleClickFullBar} />\n      <g transform={`translate(${xScrollbarPosition},0)`}>\n        <rect\n          style={{ cursor: isGrabbed ? 'grabbing' : 'grab' }}\n          width={barWidth}\n          height=\"6\"\n          fill=\"grey\"\n          onMouseDown={handleMouseDown}\n        />\n      </g>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,oBAAoB;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,WAAW,QAAQ,MAAM,SAAS,aAAa,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAEtG,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAClB,mBAAa,IAAI;AACjB,uBAAiB,EAAE,OAAO;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,cAAc,iBAAiB,gBAAgB;AAAA,EAClD;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAAA,IACpB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,MAAwB;AACvB,UAAI,cAAc;AAClB,YAAM,MAAM,EAAE;AACd,YAAM,SAAS,IAAI,sBAAsB;AACzC,YAAM,OAAO,EAAE,UAAU,OAAO;AAChC,UAAI,OAAO,WAAW,IAAI,YAAY;AACpC,sBAAc,aAAa;AAAA,MAC7B,WAAW,OAAO,WAAW,IAAI,GAAG;AAClC,sBAAc,OAAO,WAAW;AAAA,MAClC;AAEA,4BAAsB,WAAW;AACjC,sBAAgB,UAAU;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,YAAY,iBAAiB,qBAAqB;AAAA,EAC/D;AAEA,QAAM,eAAe;AAAA,IACnB,OAAO,sBAAsB,gBAAgB,iBAAiB;AAAA,IAC9D,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,EAClD;AAEA,SACE,qBAAC;AAAA,IACC,WAAU;AAAA,IACV,WAAW,eAAe;AAAA,IAC1B,OAAO,EAAE,YAAY,eAAe,YAAY,SAAS;AAAA,IACzD,cAAc;AAAA,IAEd;AAAA,0BAAC;AAAA,QAAK,OAAO,EAAE,QAAQ,UAAU;AAAA,QAAG,OAAO;AAAA,QAAY,QAAO;AAAA,QAAI,MAAK;AAAA,QAAY,SAAS;AAAA,OAAoB;AAAA,MAChH,oBAAC;AAAA,QAAE,WAAW,aAAa;AAAA,QACzB,8BAAC;AAAA,UACC,OAAO,EAAE,QAAQ,YAAY,aAAa,OAAO;AAAA,UACjD,OAAO;AAAA,UACP,QAAO;AAAA,UACP,MAAK;AAAA,UACL,aAAa;AAAA,SACf;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -41,8 +41,8 @@ const ScrollableContainerX = () => {
           children: /* @__PURE__ */ jsx("path", {
             d: `M 0 -10 
             H ${innerWidth} 
-            V ${innerHeight} 
-            L ${innerWidth + 10}  ${innerHeight} 
+            V ${innerHeight + 2} 
+            L ${innerWidth + 10}  ${innerHeight + 2} 
             L ${innerWidth + 10}  ${height} 
             L -10 ${height} 
             L -10 ${innerHeight}  

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

@@ -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, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper, height },\n    xScrollbarPosition,\n    containerRatio,\n    innerHeight,\n    innerWidth,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    else if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  return (\n    <g className=\"scrollable-container-x\" clipPath=\"url(#myClip)\">\n      <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n        <AxisBottom />\n        <SeriesFactory />\n        {Scrappers}\n      </g>\n      <ScrollBarX />\n\n      <defs>\n        <clipPath id=\"myClip\">\n          <path\n            d={`M 0 -10 \n            H ${innerWidth} \n            V ${innerHeight} \n            L ${innerWidth + 10}  ${innerHeight} \n            L ${innerWidth + 10}  ${height} \n            L -10 ${height} \n            L -10 ${innerHeight}  \n            L 0 ${innerHeight}  \n            L 0 -10`}\n          />\n        </clipPath>\n      </defs>\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAC1B,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,OAAO;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,oBAAC,YAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,oBAAC,oBAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,qBAAC;AAAA,IAAE,WAAU;AAAA,IAAyB,UAAS;AAAA,IAC7C;AAAA,2BAAC;AAAA,QAAE,WAAW,aAAa,CAAC,qBAAqB;AAAA,QAC/C;AAAA,8BAAC,cAAW;AAAA,UACZ,oBAAC,iBAAc;AAAA,UACd;AAAA;AAAA,OACH;AAAA,MACA,oBAAC,cAAW;AAAA,MAEZ,oBAAC;AAAA,QACC,8BAAC;AAAA,UAAS,IAAG;AAAA,UACX,8BAAC;AAAA,YACC,GAAG;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,aAAa,OAAO;AAAA,gBACpB,aAAa,OAAO;AAAA,oBAChB;AAAA,oBACA;AAAA,kBACF;AAAA;AAAA,WAER;AAAA,SACF;AAAA,OACF;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';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper, height },\n    xScrollbarPosition,\n    containerRatio,\n    innerHeight,\n    innerWidth,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    else if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  return (\n    <g className=\"scrollable-container-x\" clipPath=\"url(#myClip)\">\n      <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n        <AxisBottom />\n        <SeriesFactory />\n        {Scrappers}\n      </g>\n      <ScrollBarX />\n\n      <defs>\n        <clipPath id=\"myClip\">\n          <path\n            d={`M 0 -10 \n            H ${innerWidth} \n            V ${innerHeight + 2} \n            L ${innerWidth + 10}  ${innerHeight + 2} \n            L ${innerWidth + 10}  ${height} \n            L -10 ${height} \n            L -10 ${innerHeight}  \n            L 0 ${innerHeight}  \n            L 0 -10`}\n          />\n        </clipPath>\n      </defs>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAC1B,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,OAAO;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,oBAAC,YAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,oBAAC,oBAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,qBAAC;AAAA,IAAE,WAAU;AAAA,IAAyB,UAAS;AAAA,IAC7C;AAAA,2BAAC;AAAA,QAAE,WAAW,aAAa,CAAC,qBAAqB;AAAA,QAC/C;AAAA,8BAAC,cAAW;AAAA,UACZ,oBAAC,iBAAc;AAAA,UACd;AAAA;AAAA,OACH;AAAA,MACA,oBAAC,cAAW;AAAA,MAEZ,oBAAC;AAAA,QACC,8BAAC;AAAA,UAAS,IAAG;AAAA,UACX,8BAAC;AAAA,YACC,GAAG;AAAA,gBACC;AAAA,gBACA,cAAc;AAAA,gBACd,aAAa,OAAO,cAAc;AAAA,gBAClC,aAAa,OAAO;AAAA,oBAChB;AAAA,oBACA;AAAA,kBACF;AAAA;AAAA,WAER;AAAA,SACF;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/SeriesFactory.js

@@ -1,58 +1,74 @@
 import * as React from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { ChartContext } from "../ChartContext";
 import { Line, Points, Bars, StackedBar, Area } from "../series";
 import { getStackedIndex } from "../helpers";
+import { HorizontalBars } from "../series/HorizontalBars";
+import { HorizontalStackedBars } from "../series/HorizontalStackedBars";
 const SeriesFactory = () => {
   const {
     props: { data, xAxis, groups, types },
     xScrollbarPosition,
     innerWidth,
     xScale,
-    containerRatio
+    containerRatio,
+    isHorizontal
   } = useContext(ChartContext);
-  return /* @__PURE__ */ jsx("g", {
-    className: "content",
-    children: data.map((serie) => {
-      const serieProps = {
-        key: serie.key,
-        serie: {
-          ...serie,
-          data: containerRatio > 1 ? serie.data.filter((datum) => {
-            const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
-            return xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 20 * containerRatio && xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 20 * containerRatio;
-          }) : serie.data
+  return useMemo(
+    () => /* @__PURE__ */ jsx("g", {
+      className: "content",
+      children: data.filter((serie) => !serie.isHidden).map((serie) => {
+        const serieProps = {
+          key: serie.key,
+          serie: {
+            ...serie,
+            data: containerRatio > 1 ? serie.data.filter((datum) => {
+              const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
+              return xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 40 * containerRatio && xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 40 * containerRatio;
+            }) : serie.data
+          }
+        };
+        if (serie.type === "bar" && groups && getStackedIndex(groups, serie.name) > -1 && isHorizontal) {
+          return /* @__PURE__ */ jsx(HorizontalStackedBars, {
+            ...serieProps
+          });
         }
-      };
-      if (serie.type === "bar" && groups && getStackedIndex(groups, serie.name) > -1) {
-        return /* @__PURE__ */ jsx(StackedBar, {
-          ...serieProps
-        });
-      }
-      if (serie.type === "bar") {
-        return /* @__PURE__ */ jsx(Bars, {
-          ...serieProps
-        });
-      }
-      if (types === "scatter" && !serie.type || serie.type === "point") {
-        return /* @__PURE__ */ jsx(Points, {
-          ...serieProps
-        });
-      }
-      if (serie.type === "line") {
-        return /* @__PURE__ */ jsx(Line, {
-          ...serieProps
-        });
-      }
-      if (serie.type === "area") {
-        return /* @__PURE__ */ jsx(Area, {
-          ...serieProps
-        });
-      }
-      return /* @__PURE__ */ jsx(Fragment, {});
-    })
-  });
+        if (serie.type === "bar" && groups && getStackedIndex(groups, serie.name) > -1) {
+          return /* @__PURE__ */ jsx(StackedBar, {
+            ...serieProps
+          });
+        }
+        if (serie.type === "bar" && isHorizontal) {
+          return /* @__PURE__ */ jsx(HorizontalBars, {
+            ...serieProps
+          });
+        }
+        if (serie.type === "bar") {
+          return /* @__PURE__ */ jsx(Bars, {
+            ...serieProps
+          });
+        }
+        if (types === "scatter" && !serie.type || serie.type === "point") {
+          return /* @__PURE__ */ jsx(Points, {
+            ...serieProps
+          });
+        }
+        if (serie.type === "line") {
+          return /* @__PURE__ */ jsx(Line, {
+            ...serieProps
+          });
+        }
+        if (serie.type === "area") {
+          return /* @__PURE__ */ jsx(Area, {
+            ...serieProps
+          });
+        }
+        return /* @__PURE__ */ jsx(Fragment, {});
+      })
+    }),
+    [containerRatio, data, groups, innerWidth, isHorizontal, types, xAxis.cols, xScale, xScrollbarPosition]
+  );
 };
 export {
   SeriesFactory