@elliemae/ds-dataviz 3.9.0 → 3.10.0-next.0

package/dist/esm/graphs/Chart/parts/Labels/BottomLabel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Labels/BottomLabel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const BottomLabel = () => {\n  const {\n    internalMargin,\n    setBottomLabel,\n    innerHeight,\n    innerWidth,\n    props: { xAxis },\n  } = useContext(ChartContext);\n\n  return (\n    <g\n      ref={setBottomLabel}\n      transform={`translate(${innerWidth / 2 + internalMargin.left},${innerHeight + internalMargin.top})`}\n    >\n      <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={35}>\n        {xAxis?.label}\n      </StyledAxisLabel>\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAA2B;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI,WAAW,YAAY;AAE3B,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,IAAI,eAAe,QAAQ,cAAc,eAAe;AAAA,IAE7F,8BAAC;AAAA,MAAgB,WAAU;AAAA,MAAa,YAAW;AAAA,MAAS,IAAI;AAAA,MAC7D,iBAAO;AAAA,KACV;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const BottomLabel = () => {\n  const {\n    internalMargin,\n    setBottomLabel,\n    innerHeight,\n    innerWidth,\n    axisBottomHeight,\n    props: { xAxis },\n  } = useContext(ChartContext);\n\n  return (\n    <g\n      ref={setBottomLabel}\n      transform={`translate(${innerWidth / 2 + internalMargin.left},${\n        innerHeight + axisBottomHeight + internalMargin.top + 20\n      })`}\n    >\n      <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\">\n        {xAxis?.label}\n      </StyledAxisLabel>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI,WAAW,YAAY;AAE3B,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,IAAI,eAAe,QACtD,cAAc,mBAAmB,eAAe,MAAM;AAAA,IAGxD,8BAAC;AAAA,MAAgB,WAAU;AAAA,MAAa,YAAW;AAAA,MAChD,iBAAO;AAAA,KACV;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Labels/LeftLabel.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { ChartContext } from "../../ChartContext";
 import { StyledAxisLabel } from "../../styles";
@@ -11,22 +11,15 @@ const LeftLabel = () => {
     leftLegendWidth,
     props: { yAxis }
   } = useContext(ChartContext);
-  return /* @__PURE__ */ jsxs("g", {
+  return /* @__PURE__ */ jsx("g", {
     ref: setLeftLabel,
     transform: `translate(${leftLegendWidth > 0 ? leftLegendWidth + 8 : 0},${innerHeight / 2 + internalMargin.top}) rotate(-90)`,
-    children: [
-      /* @__PURE__ */ jsx("rect", {
-        height: "30",
-        width: "1",
-        fill: "transparent"
-      }),
-      /* @__PURE__ */ jsx(StyledAxisLabel, {
-        className: "axis-label",
-        textAnchor: "middle",
-        dy: 15,
-        children: yAxis?.label
-      })
-    ]
+    children: /* @__PURE__ */ jsx(StyledAxisLabel, {
+      className: "axis-label",
+      textAnchor: "middle",
+      dy: 15,
+      children: yAxis?.label
+    })
   });
 };
 export {

package/dist/esm/graphs/Chart/parts/Labels/LeftLabel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Labels/LeftLabel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const LeftLabel = () => {\n  const {\n    innerHeight,\n    internalMargin,\n    setLeftLabel,\n    leftLegendWidth,\n    props: { yAxis },\n  } = useContext(ChartContext);\n\n  return (\n    <g\n      ref={setLeftLabel}\n      transform={`translate(${leftLegendWidth > 0 ? leftLegendWidth + 8 : 0},${\n        innerHeight / 2 + internalMargin.top\n      }) rotate(-90)`}\n    >\n      <rect height=\"30\" width=\"1\" fill=\"transparent\" />\n      <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={15}>\n        {yAxis?.label}\n      </StyledAxisLabel>\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAA2B;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI,WAAW,YAAY;AAE3B,SACE,qBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,kBAAkB,IAAI,kBAAkB,IAAI,KAClE,cAAc,IAAI,eAAe;AAAA,IAGnC;AAAA,0BAAC;AAAA,QAAK,QAAO;AAAA,QAAK,OAAM;AAAA,QAAI,MAAK;AAAA,OAAc;AAAA,MAC/C,oBAAC;AAAA,QAAgB,WAAU;AAAA,QAAa,YAAW;AAAA,QAAS,IAAI;AAAA,QAC7D,iBAAO;AAAA,OACV;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const LeftLabel = () => {\n  const {\n    innerHeight,\n    internalMargin,\n    setLeftLabel,\n    leftLegendWidth,\n    props: { yAxis },\n  } = useContext(ChartContext);\n\n  return (\n    <g\n      ref={setLeftLabel}\n      transform={`translate(${leftLegendWidth > 0 ? leftLegendWidth + 8 : 0},${\n        innerHeight / 2 + internalMargin.top\n      }) rotate(-90)`}\n    >\n      {/* <rect height=\"30\" width=\"1\" fill=\"transparent\" /> */}\n      <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={15}>\n        {yAxis?.label}\n      </StyledAxisLabel>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAA2B;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI,WAAW,YAAY;AAE3B,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,kBAAkB,IAAI,kBAAkB,IAAI,KAClE,cAAc,IAAI,eAAe;AAAA,IAInC,8BAAC;AAAA,MAAgB,WAAU;AAAA,MAAa,YAAW;AAAA,MAAS,IAAI;AAAA,MAC7D,iBAAO;AAAA,KACV;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Legend/BottomLegend.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useLayoutEffect, useRef, useState } from "react";
-import { selectAll, select } from "d3";
+import { select } from "d3";
 import { ChartContext } from "../../ChartContext";
 import { LegendItem } from "./LegendItem";
 const BottomLegend = () => {
@@ -11,7 +11,7 @@ const BottomLegend = () => {
   const [xTransform, setXTransform] = useState(innerWidth / 2);
   useLayoutEffect(() => {
     if (ref.current && firstRender.current) {
-      const cells = selectAll(".cell");
+      const cells = select(ref.current).selectAll(".cell");
       const padding = 30;
       let offset = 0;
       let verticalOffset = 0;
@@ -37,10 +37,10 @@ const BottomLegend = () => {
   const margin = useMemo(() => {
     let counter = 0;
     if (bottomLabelHeight > 0) {
-      counter += bottomLabelHeight + 25;
+      counter += bottomLabelHeight + 20;
     }
     if (axisBottomHeight > 0) {
-      counter += axisBottomHeight;
+      counter += axisBottomHeight + 15;
     }
     return counter;
   }, [bottomLabelHeight, axisBottomHeight]);
@@ -53,7 +53,7 @@ const BottomLegend = () => {
         className: "bottom-legend",
         children: [
           /* @__PURE__ */ jsx("rect", {
-            height: 40,
+            height: 60,
             width: 1,
             fill: "transparent"
           }),

package/dist/esm/graphs/Chart/parts/Legend/BottomLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/BottomLegend.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\nimport { selectAll, select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n  const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } =\n    useContext(ChartContext);\n\n  const ref = useRef(null);\n  const firstRender = useRef(true);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2);\n  useLayoutEffect(() => {\n    if (ref.current && firstRender.current) {\n      const cells = selectAll('.cell');\n      const padding = 30;\n      let offset = 0;\n      let verticalOffset = 0;\n\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          if (offset + width + padding > innerWidth - innerWidth / 3) {\n            offset = 0;\n            verticalOffset += 20;\n          } else {\n            offset += width + padding;\n          }\n\n          d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform((prev) => prev - bounds.width / 2);\n      firstRender.current = false;\n    }\n  }, [innerWidth]);\n\n  const margin = useMemo(() => {\n    let counter = 0;\n    if (bottomLabelHeight > 0) {\n      counter += bottomLabelHeight + 25;\n    }\n    if (axisBottomHeight > 0) {\n      counter += axisBottomHeight;\n    }\n    return counter;\n  }, [bottomLabelHeight, axisBottomHeight]);\n\n  return useMemo(\n    () => (\n      <g ref={setBottomLegend}>\n        <g\n          ref={ref}\n          transform={`translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`}\n          className=\"bottom-legend\"\n        >\n          <rect height={40} width={1} fill=\"transparent\" />\n          {colorScale.domain().map((domainValue, i) => (\n            <LegendItem domainValue={domainValue} key={domainValue} />\n          ))}\n        </g>\n      </g>\n    ),\n\n    [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,iBAAiB,QAAQ,gBAAgB;AAC9E,SAAS,WAAW,cAAc;AAClC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,mBAAmB,gBAAgB,gBAAgB,IAChH,WAAW,YAAY;AAEzB,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,CAAC;AAC3D,kBAAgB,MAAM;AACpB,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,QAAQ,UAAU,OAAO;AAC/B,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,UAAI,iBAAiB;AAErB,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,cAAI,SAAS,QAAQ,UAAU,aAAa,aAAa,GAAG;AAC1D,qBAAS;AACT,8BAAkB;AAAA,UACpB,OAAO;AACL,sBAAU,QAAQ;AAAA,UACpB;AAEA,gBAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,QACnE;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,UAAU,CAAC;AAEf,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,UAAU;AACd,QAAI,oBAAoB,GAAG;AACzB,iBAAW,oBAAoB;AAAA,IACjC;AACA,QAAI,mBAAmB,GAAG;AACxB,iBAAW;AAAA,IACb;AACA,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,gBAAgB,CAAC;AAExC,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,KAAK;AAAA,MACN,+BAAC;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,cAAc,eAAe,MAAM;AAAA,QAChG,WAAU;AAAA,QAEV;AAAA,8BAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC;AAAA,YAAW;AAAA,aAA+B,WAAa,CACzD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,aAAa,eAAe,MAAM,eAAe,KAAK,QAAQ,iBAAiB,UAAU;AAAA,EACxG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useLayoutEffect, useRef, useState } from 'react';\nimport { selectAll, select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n  const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } =\n    useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n  const firstRender = useRef(true);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2);\n  useLayoutEffect(() => {\n    if (ref.current && firstRender.current) {\n      const cells = select(ref.current).selectAll('.cell');\n      const padding = 30;\n      let offset = 0;\n      let verticalOffset = 0;\n\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          if (offset + width + padding > innerWidth - innerWidth / 3) {\n            offset = 0;\n            verticalOffset += 20;\n          } else {\n            offset += width + padding;\n          }\n\n          d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform((prev) => prev - bounds.width / 2);\n      firstRender.current = false;\n    }\n  }, [innerWidth]);\n\n  const margin = useMemo(() => {\n    let counter = 0;\n    if (bottomLabelHeight > 0) {\n      counter += bottomLabelHeight + 20;\n    }\n    if (axisBottomHeight > 0) {\n      counter += axisBottomHeight + 15;\n    }\n    return counter;\n  }, [bottomLabelHeight, axisBottomHeight]);\n\n  return useMemo(\n    () => (\n      <g ref={setBottomLegend}>\n        <g\n          ref={ref}\n          transform={`translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`}\n          className=\"bottom-legend\"\n        >\n          <rect height={60} width={1} fill=\"transparent\" />\n          {colorScale.domain().map((domainValue, i) => (\n            <LegendItem domainValue={domainValue} key={domainValue} />\n          ))}\n        </g>\n      </g>\n    ),\n\n    [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,iBAAiB,QAAQ,gBAAgB;AAC9E,SAAoB,cAAc;AAClC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,mBAAmB,gBAAgB,gBAAgB,IAChH,WAAW,YAAY;AAEzB,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,CAAC;AAC3D,kBAAgB,MAAM;AACpB,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,QAAQ,OAAO,IAAI,OAAO,EAAE,UAAU,OAAO;AACnD,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,UAAI,iBAAiB;AAErB,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,cAAI,SAAS,QAAQ,UAAU,aAAa,aAAa,GAAG;AAC1D,qBAAS;AACT,8BAAkB;AAAA,UACpB,OAAO;AACL,sBAAU,QAAQ;AAAA,UACpB;AAEA,gBAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,QACnE;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,UAAU,CAAC;AAEf,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,UAAU;AACd,QAAI,oBAAoB,GAAG;AACzB,iBAAW,oBAAoB;AAAA,IACjC;AACA,QAAI,mBAAmB,GAAG;AACxB,iBAAW,mBAAmB;AAAA,IAChC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,mBAAmB,gBAAgB,CAAC;AAExC,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,KAAK;AAAA,MACN,+BAAC;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,cAAc,eAAe,MAAM;AAAA,QAChG,WAAU;AAAA,QAEV;AAAA,8BAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC;AAAA,YAAW;AAAA,aAA+B,WAAa,CACzD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,aAAa,eAAe,MAAM,eAAe,KAAK,QAAQ,iBAAiB,UAAU;AAAA,EACxG;AACF;",
   "names": []
 }

package/dist/esm/graphs/Chart/parts/Legend/LegendItem.js

@@ -59,6 +59,7 @@ const LegendItem = ({ domainValue }) => {
     () => /* @__PURE__ */ jsxs("g", {
       onClick: handleOnClick,
       className: "cell",
+      style: hiddenSeries.includes(domainValue) ? { opacity: 0.2 } : null,
       children: [
         /* @__PURE__ */ jsx(LegendIcon, {
           fill: colorScale(domainValue)
@@ -70,7 +71,6 @@ const LegendItem = ({ domainValue }) => {
         /* @__PURE__ */ jsx("text", {
           x: 24,
           dy: ".32em",
-          textDecoration: hiddenSeries.includes(domainValue) ? "line-through" : "",
           fontWeight: "600",
           children: domainValue
         })

package/dist/esm/graphs/Chart/parts/Legend/LegendItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/LegendItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n  <g transform=\"rotate(45)\">\n    <rect x={-6} y={-6} width={12} height={12} {...props} />\n  </g>\n);\n\nconst LegendItemsMap = {\n  [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n  [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n  [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n  const {\n    colorScale,\n    setHiddenSeries,\n    hiddenSeries,\n    props: { series, types },\n  } = useContext(ChartContext);\n\n  const serieData = series.find((serie) => serie.name === domainValue);\n  const LegendIcon =\n    LegendItemsMap[serieData.pointStyle] ??\n    (serieData.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n  const handleOnClick = useCallback(() => {\n    setHiddenSeries((prev) => {\n      if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n      if (prev.length + 1 !== series.length) return [...prev, domainValue];\n      return prev;\n    });\n  }, [domainValue, series.length, setHiddenSeries]);\n\n  return useMemo(\n    () => (\n      <g onClick={handleOnClick} key={domainValue} className=\"cell\">\n        <LegendIcon fill={colorScale(domainValue)} />\n        {serieData.type === 'line' ? (\n          <LegendItemLine\n            stroke={colorScale(domainValue)}\n            strokeDasharray={LINE.DASH_STYLE_VALUES[serieData.dashStyle]}\n          />\n        ) : null}\n        <text\n          x={24}\n          dy=\".32em\"\n          textDecoration={hiddenSeries.includes(domainValue) ? 'line-through' : ''}\n          fontWeight=\"600\"\n        >\n          {domainValue}\n        </text>\n      </g>\n    ),\n\n    [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries, serieData.dashStyle, serieData.type],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB,CAAC,UAAU,oBAAC;AAAA,EAAK,IAAI;AAAA,EAAK,IAAI;AAAA,EAAI,IAAI;AAAA,EAAG,IAAI;AAAA,EAAI,GAAG;AAAA,EAAO,aAAa;AAAA,CAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,oBAAC;AAAA,EAAO,GAAG;AAAA,EAAI,GAAG;AAAA,CAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,oBAAC;AAAA,EAAK,GAAG;AAAA,EAAI,GAAG;AAAA,EAAI,OAAO;AAAA,EAAI,QAAQ;AAAA,EAAK,GAAG;AAAA,CAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,oBAAC;AAAA,EAAE,WAAU;AAAA,EACX,8BAAC;AAAA,IAAK,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,OAAO;AAAA,IAAI,QAAQ;AAAA,IAAK,GAAG;AAAA,GAAO;AAAA,CACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,MAAM;AAAA,EACzB,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,UAAU,gBACxB,UAAU,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAEzE,QAAM,gBAAgB,YAAY,MAAM;AACtC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,OAAO,QAAQ,eAAe,CAAC;AAEhD,SAAO;AAAA,IACL,MACE,qBAAC;AAAA,MAAE,SAAS;AAAA,MAAiC,WAAU;AAAA,MACrD;AAAA,4BAAC;AAAA,UAAW,MAAM,WAAW,WAAW;AAAA,SAAG;AAAA,QAC1C,UAAU,SAAS,SAClB,oBAAC;AAAA,UACC,QAAQ,WAAW,WAAW;AAAA,UAC9B,iBAAiB,KAAK,kBAAkB,UAAU;AAAA,SACpD,IACE;AAAA,QACJ,oBAAC;AAAA,UACC,GAAG;AAAA,UACH,IAAG;AAAA,UACH,gBAAgB,aAAa,SAAS,WAAW,IAAI,iBAAiB;AAAA,UACtE,YAAW;AAAA,UAEV;AAAA,SACH;AAAA;AAAA,OAf8B,WAgBhC;AAAA,IAGF,CAAC,YAAY,YAAY,aAAa,eAAe,cAAc,UAAU,WAAW,UAAU,IAAI;AAAA,EACxG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n  <g transform=\"rotate(45)\">\n    <rect x={-6} y={-6} width={12} height={12} {...props} />\n  </g>\n);\n\nconst LegendItemsMap = {\n  [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n  [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n  [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n  const {\n    colorScale,\n    setHiddenSeries,\n    hiddenSeries,\n    props: { series, types },\n  } = useContext(ChartContext);\n\n  const serieData = series.find((serie) => serie.name === domainValue);\n  const LegendIcon =\n    LegendItemsMap[serieData.pointStyle] ??\n    (serieData.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n  const handleOnClick = useCallback(() => {\n    setHiddenSeries((prev) => {\n      if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n      if (prev.length + 1 !== series.length) return [...prev, domainValue];\n      return prev;\n    });\n  }, [domainValue, series.length, setHiddenSeries]);\n\n  return useMemo(\n    () => (\n      <g\n        onClick={handleOnClick}\n        key={domainValue}\n        className=\"cell\"\n        style={hiddenSeries.includes(domainValue) ? { opacity: 0.2 } : null}\n      >\n        <LegendIcon fill={colorScale(domainValue)} />\n        {serieData.type === 'line' ? (\n          <LegendItemLine\n            stroke={colorScale(domainValue)}\n            strokeDasharray={LINE.DASH_STYLE_VALUES[serieData.dashStyle]}\n          />\n        ) : null}\n        <text x={24} dy=\".32em\" fontWeight=\"600\">\n          {domainValue}\n        </text>\n      </g>\n    ),\n\n    [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries, serieData.dashStyle, serieData.type],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB,CAAC,UAAU,oBAAC;AAAA,EAAK,IAAI;AAAA,EAAK,IAAI;AAAA,EAAI,IAAI;AAAA,EAAG,IAAI;AAAA,EAAI,GAAG;AAAA,EAAO,aAAa;AAAA,CAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,oBAAC;AAAA,EAAO,GAAG;AAAA,EAAI,GAAG;AAAA,CAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,oBAAC;AAAA,EAAK,GAAG;AAAA,EAAI,GAAG;AAAA,EAAI,OAAO;AAAA,EAAI,QAAQ;AAAA,EAAK,GAAG;AAAA,CAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,oBAAC;AAAA,EAAE,WAAU;AAAA,EACX,8BAAC;AAAA,IAAK,GAAG;AAAA,IAAI,GAAG;AAAA,IAAI,OAAO;AAAA,IAAI,QAAQ;AAAA,IAAK,GAAG;AAAA,GAAO;AAAA,CACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,MAAM;AAAA,EACzB,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,UAAU,gBACxB,UAAU,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAEzE,QAAM,gBAAgB,YAAY,MAAM;AACtC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,OAAO,QAAQ,eAAe,CAAC;AAEhD,SAAO;AAAA,IACL,MACE,qBAAC;AAAA,MACC,SAAS;AAAA,MAET,WAAU;AAAA,MACV,OAAO,aAAa,SAAS,WAAW,IAAI,EAAE,SAAS,IAAI,IAAI;AAAA,MAE/D;AAAA,4BAAC;AAAA,UAAW,MAAM,WAAW,WAAW;AAAA,SAAG;AAAA,QAC1C,UAAU,SAAS,SAClB,oBAAC;AAAA,UACC,QAAQ,WAAW,WAAW;AAAA,UAC9B,iBAAiB,KAAK,kBAAkB,UAAU;AAAA,SACpD,IACE;AAAA,QACJ,oBAAC;AAAA,UAAK,GAAG;AAAA,UAAI,IAAG;AAAA,UAAQ,YAAW;AAAA,UAChC;AAAA,SACH;AAAA;AAAA,OAbK,WAcP;AAAA,IAGF,CAAC,YAAY,YAAY,aAAa,eAAe,cAAc,UAAU,WAAW,UAAU,IAAI;AAAA,EACxG;AACF;",
   "names": []
 }

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

@@ -11,13 +11,17 @@ const ScrapperLine = ({ yPosition, datum }) => {
     setScrapperPosY,
     innerWidth,
     yScale,
+    setActivePoint,
+    isGrabbed,
     props: { TooltipRenderer, scrapper }
   } = useContext(ChartContext);
   const theme = useContext(ThemeContext);
   const [referenceElement, setReferenceElement] = useState();
   const handleOnMouseEnter = useCallback(() => {
-    setScrapperPosY(yPosition);
-  }, [setScrapperPosY, yPosition]);
+    if (!isGrabbed)
+      setScrapperPosY(yPosition);
+    setActivePoint(null);
+  }, [isGrabbed, setScrapperPosY, setActivePoint, yPosition]);
   const strokeDetectorWidth = yScale.bandwidth ? yScale.bandwidth() : "4px";
   return /* @__PURE__ */ jsxs("g", {
     children: [

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    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;",
+  "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    setActivePoint,\n    isGrabbed,\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    if (!isGrabbed) setScrapperPosY(yPosition);\n    setActivePoint(null);\n  }, [isGrabbed, setScrapperPosY, setActivePoint, 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;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,QAAI,CAAC;AAAW,sBAAgB,SAAS;AACzC,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,iBAAiB,gBAAgB,SAAS,CAAC;AAE1D,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

@@ -1,85 +1,10 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
-import { ChartContext } from "../../ChartContext";
+import { useMemo } from "react";
 import { VerticalScrapperLine } from "./VerticalScrapperLine";
+import { useUniqueData } from "../../helpers/useUniqueData";
 const VerticalScrapper = () => {
-  const {
-    xScale,
-    getBandwidth,
-    xScrollbarPosition,
-    containerRatio,
-    getXValue,
-    getYValue,
-    currentData: data,
-    props: { xAxis }
-  } = 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(
-        (serie) => serie.data.map((datum) => {
-          const x = getXValue(datum);
-          const y = getYValue(datum);
-          return {
-            position: xScale(x),
-            name: serie.name,
-            xValue: x,
-            yValue: y
-          };
-        })
-      ).flat(1);
-    } else {
-      valueToPositionPerSeries = data.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;
-        }).map((datum) => {
-          return {
-            position: xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x),
-            name: serie.name,
-            xValue: xAxis.cols ? xAxis.cols[datum.position] : datum.value.x,
-            yValue: typeof datum.value === "number" ? datum.value : datum.value.y
-          };
-        })
-      ).flat(1);
-    }
-    const postionUniqueData = {};
-    valueToPositionPerSeries.forEach((set) => {
-      if (postionUniqueData[[set.position]]) {
-        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];
-      } else {
-        postionUniqueData[[set.position]] = [{ ...set }];
-      }
-    });
-    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 uniqueData = useUniqueData();
   const render = useMemo(
     () => /* @__PURE__ */ jsx("g", {
       className: "vertical-scrapper",

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    getXValue,\n    getYValue,\n    currentData: data,\n    props: { xAxis },\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        .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        .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,aAAa;AAAA,IACb,OAAO,EAAE,MAAM;AAAA,EACjB,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;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,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;",
+  "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;",
   "names": []
 }

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useCallback, useState, useMemo } from "react";
+import React2, { useContext, useCallback, useState, useMemo } from "react";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
 import { ThemeContext } from "@elliemae/ds-system";
 import { ChartContext } from "../../ChartContext";
 import { StyledMouseOverDetectionBox, StyledTooltipContainer } from "../../styles";
-const VerticalScrapperLine = ({ rectDetector, xPosition, datum }) => {
+const VerticalScrapperLine = React2.memo(({ rectDetector, xPosition, datum }) => {
   const {
     scrapperPosX,
     setScrapperPosX,
@@ -86,7 +86,7 @@ const VerticalScrapperLine = ({ rectDetector, xPosition, datum }) => {
     ]
   );
   return render;
-};
+});
 export {
   VerticalScrapperLine
 };

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 = ({ 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": []
+  "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;",
+  "names": ["React"]
 }

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

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { ChartContext } from "../../ChartContext";
+const BlurMask = () => {
+  const {
+    xScrollbarPosition,
+    innerWidth,
+    containerRatio,
+    chartId,
+    props: { height }
+  } = useContext(ChartContext);
+  const gradient = useMemo(() => {
+    if (xScrollbarPosition === 0) {
+      return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx("stop", {
+            offset: "93%",
+            style: { stopColor: "white", stopOpacity: 1 }
+          }),
+          /* @__PURE__ */ jsx("stop", {
+            offset: "100%",
+            style: { stopColor: "white", stopOpacity: 0 }
+          })
+        ]
+      });
+    }
+    if (innerWidth * containerRatio === (xScrollbarPosition + innerWidth / containerRatio) * containerRatio) {
+      return /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx("stop", {
+            offset: "0%",
+            style: { stopColor: "white", stopOpacity: 0 }
+          }),
+          /* @__PURE__ */ jsx("stop", {
+            offset: "7%",
+            style: { stopColor: "white", stopOpacity: 1 }
+          })
+        ]
+      });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx("stop", {
+          offset: "0%",
+          style: { stopColor: "white", stopOpacity: 0 }
+        }),
+        /* @__PURE__ */ jsx("stop", {
+          offset: "7%",
+          style: { stopColor: "white", stopOpacity: 1 }
+        }),
+        /* @__PURE__ */ jsx("stop", {
+          offset: "93%",
+          style: { stopColor: "white", stopOpacity: 1 }
+        }),
+        /* @__PURE__ */ jsx("stop", {
+          offset: "100%",
+          style: { stopColor: "white", stopOpacity: 0 }
+        })
+      ]
+    });
+  }, [containerRatio, innerWidth, xScrollbarPosition]);
+  if (containerRatio === 1)
+    return null;
+  return /* @__PURE__ */ jsxs("defs", {
+    children: [
+      /* @__PURE__ */ jsx("linearGradient", {
+        id: `filter-fade-${chartId}`,
+        children: gradient
+      }),
+      /* @__PURE__ */ jsx("mask", {
+        id: `mask-${chartId}`,
+        children: /* @__PURE__ */ jsx("rect", {
+          x: 0,
+          width: innerWidth,
+          height,
+          fill: `url(#filter-fade-${chartId}`
+        })
+      })
+    ]
+  });
+};
+export {
+  BlurMask
+};
+//# sourceMappingURL=BlurMask.js.map

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

@@ -0,0 +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;",
+  "names": []
+}

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

@@ -17,7 +17,7 @@ const ScrollBarX = () => {
     isScrollbarVisible,
     oldLastPosition
   } = useContext(ChartContext);
-  const barWidth = useMemo(() => parseInt(innerWidth / containerRatio, 10), [containerRatio, innerWidth]);
+  const barWidth = useMemo(() => innerWidth / containerRatio, [containerRatio, innerWidth]);
   const handleMouseDown = useCallback(
     (e) => {
       setScrapperPosX("");
@@ -27,12 +27,9 @@ const ScrollBarX = () => {
     },
     [setIsGrabbed, setScrapperPosX, setStartPosition]
   );
-  const handleMouseEnter = useCallback(
-    (e) => {
-      setScrapperPosX("");
-    },
-    [setScrapperPosX]
-  );
+  const handleMouseEnter = useCallback(() => {
+    setScrapperPosX("");
+  }, [setScrapperPosX]);
   const handleClickFullBar = useCallback(
     (e) => {
       let newPosition = 0;

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 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;",
+  "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(() => innerWidth / containerRatio, [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: React.MouseEventHandler = useCallback(() => {\n    setScrapperPosX('');\n  }, [setScrapperPosX]);\n\n  const handleClickFullBar: React.MouseEventHandler = useCallback(\n    (e) => {\n      let newPosition = 0;\n      const bar = e.target as SVGGElement;\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,aAAa,gBAAgB,CAAC,gBAAgB,UAAU,CAAC;AAExF,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,mBAA4C,YAAY,MAAM;AAClE,oBAAgB,EAAE;AAAA,EACpB,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,qBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,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": []
 }