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

package/dist/cjs/graphs/Chart/parts/ClipPaths.js

@@ -41,45 +41,21 @@ const ClipPaths = () => {
     props: { xAxis, yAxis }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", {
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", {
-          id: `rect-focus-ring-${chartId}`,
-          children: yScroll ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
-            width: innerWidth + 4,
-            height: innerHeight * containerRatio,
-            x: -4
-          }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
-            width: innerWidth * containerRatio,
-            height: innerHeight + 4,
-            y: -4
-          })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", {
+        id: `rect-focus-ring-${chartId}`,
+        children: yScroll ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+          width: innerWidth + 4,
+          height: innerHeight * containerRatio,
+          x: -4
+        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+          width: innerWidth * containerRatio,
+          height: innerHeight + 4,
+          y: -4
         })
-      }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", {
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", {
-          id: `rects-positive-${chartId}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
-            width: innerWidth * containerRatio,
-            height: yScale(0) + 8,
-            y: -8,
-            x: -10
-          })
-        })
-      }),
-      innerHeight - yScale(0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", {
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", {
-          id: `rects-negative-${chartId}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
-            width: innerWidth * containerRatio,
-            height: innerHeight - yScale(0),
-            x: -10,
-            y: yScale(0)
-          })
-        })
-      }) : null
-    ]
+      })
+    })
   });
 };
 //# sourceMappingURL=ClipPaths.js.map

package/dist/cjs/graphs/Chart/parts/ClipPaths.js.map

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

package/dist/cjs/graphs/Chart/parts/Legend/Legend.js

@@ -37,14 +37,15 @@ var import_BottomLegend = require("./BottomLegend");
 var import_LeftLegend = require("./LeftLegend");
 const Legend = () => {
   const {
-    props: { legend }
+    props: { legend },
+    width
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  if (legend?.position === "right")
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RightLegend.RightLegend, {});
-  if (legend?.position === "top")
+  if (legend?.position === "top" || legend?.position === "left" && width <= 400)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TopLegend.TopLegend, {});
-  if (legend?.position === "bottom")
+  if (legend?.position === "bottom" || legend?.position === "right" && width <= 400)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BottomLegend.BottomLegend, {});
+  if (legend?.position === "right")
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RightLegend.RightLegend, {});
   if (legend?.position === "left")
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftLegend.LeftLegend, {});
   return null;

package/dist/cjs/graphs/Chart/parts/Legend/Legend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/Legend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { RightLegend } from './RightLegend';\nimport { TopLegend } from './TopLegend';\nimport { ChartContext } from '../../ChartContext';\nimport { BottomLegend } from './BottomLegend';\nimport { LeftLegend } from './LeftLegend';\nexport const Legend = () => {\n  const {\n    props: { legend },\n  } = useContext(ChartContext);\n\n  if (legend?.position === 'right') return <RightLegend />;\n  if (legend?.position === 'top') return <TopLegend />;\n  if (legend?.position === 'bottom') return <BottomLegend />;\n  if (legend?.position === 'left') return <LeftLegend />;\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,yBAA4B;AAC5B,uBAA0B;AAC1B,0BAA6B;AAC7B,0BAA6B;AAC7B,wBAA2B;AACpB,MAAM,SAAS,MAAM;AAC1B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,EAClB,QAAI,yBAAW,gCAAY;AAE3B,MAAI,QAAQ,aAAa;AAAS,WAAO,4CAAC,kCAAY;AACtD,MAAI,QAAQ,aAAa;AAAO,WAAO,4CAAC,8BAAU;AAClD,MAAI,QAAQ,aAAa;AAAU,WAAO,4CAAC,oCAAa;AACxD,MAAI,QAAQ,aAAa;AAAQ,WAAO,4CAAC,gCAAW;AACpD,SAAO;AACT;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { RightLegend } from './RightLegend';\nimport { TopLegend } from './TopLegend';\nimport { ChartContext } from '../../ChartContext';\nimport { BottomLegend } from './BottomLegend';\nimport { LeftLegend } from './LeftLegend';\nexport const Legend = () => {\n  const {\n    props: { legend },\n    width,\n  } = useContext(ChartContext);\n  if (legend?.position === 'top' || (legend?.position === 'left' && width <= 400)) return <TopLegend />;\n  if (legend?.position === 'bottom' || (legend?.position === 'right' && width <= 400)) return <BottomLegend />;\n  if (legend?.position === 'right') return <RightLegend />;\n  if (legend?.position === 'left') return <LeftLegend />;\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,yBAA4B;AAC5B,uBAA0B;AAC1B,0BAA6B;AAC7B,0BAA6B;AAC7B,wBAA2B;AACpB,MAAM,SAAS,MAAM;AAC1B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,MAAI,QAAQ,aAAa,SAAU,QAAQ,aAAa,UAAU,SAAS;AAAM,WAAO,4CAAC,8BAAU;AACnG,MAAI,QAAQ,aAAa,YAAa,QAAQ,aAAa,WAAW,SAAS;AAAM,WAAO,4CAAC,oCAAa;AAC1G,MAAI,QAAQ,aAAa;AAAS,WAAO,4CAAC,kCAAY;AACtD,MAAI,QAAQ,aAAa;AAAQ,WAAO,4CAAC,gCAAW;AACpD,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Legend/TopLegend.js

@@ -34,7 +34,7 @@ var import_d3 = require("d3");
 var import_ChartContext = require("../../ChartContext");
 var import_LegendItem = require("./LegendItem");
 const TopLegend = () => {
-  const { colorScale, internalMargin, innerWidth, setTopLegend } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const { colorScale, internalMargin, innerWidth, setTopLegend, toolbarHeight } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const ref = (0, import_react.useRef)(null);
   const firstRender = (0, import_react.useRef)(true);
   const [xTransform, setXTransform] = (0, import_react.useState)(innerWidth / 2 + internalMargin.left);
@@ -60,7 +60,7 @@ const TopLegend = () => {
   const render = (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
       ref,
-      transform: `translate(${xTransform},30)`,
+      transform: `translate(${xTransform},${toolbarHeight + 30})`,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
         ref: setTopLegend,
         children: [
@@ -75,7 +75,7 @@ const TopLegend = () => {
         ]
       })
     }),
-    [colorScale, setTopLegend, xTransform]
+    [colorScale, setTopLegend, xTransform, toolbarHeight]
   );
   return render;
 };

package/dist/cjs/graphs/Chart/parts/Legend/TopLegend.js.map

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

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

@@ -34,7 +34,7 @@ var import_VerticalScrapperLine = require("./VerticalScrapperLine");
 var import_useUniqueData = require("../../helpers/useUniqueData");
 const VerticalScrapper = () => {
   const uniqueData = (0, import_useUniqueData.useUniqueData)();
-  const render = (0, import_react.useMemo)(
+  return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
       className: "vertical-scrapper",
       children: uniqueData.map((line) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VerticalScrapperLine.VerticalScrapperLine, {
@@ -45,6 +45,5 @@ const VerticalScrapper = () => {
     }),
     [uniqueData]
   );
-  return render;
 };
 //# sourceMappingURL=VerticalScrapper.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scrapper/VerticalScrapper.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+B;AAC/B,kCAAqC;AACrC,2BAA8B;AACvB,MAAM,mBAAmB,MAAM;AACpC,QAAM,iBAAa,oCAAc;AACjC,QAAM,aAAS;AAAA,IACb,MACE,4CAAC;AAAA,MAAE,WAAU;AAAA,MACV,qBAAW,IAAI,CAAC,SACf,4CAAC;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 React, { useMemo } from 'react';\nimport { VerticalScrapperLine } from './VerticalScrapperLine';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nexport const VerticalScrapper = () => {\n  const uniqueData = useUniqueData();\n  return useMemo(\n    () => (\n      <g className=\"vertical-scrapper\">\n        {uniqueData.map((line) => (\n          <VerticalScrapperLine\n            rectDetector={line?.rectDetector}\n            xPosition={line.xPosition}\n            key={line.xPosition}\n            datum={line.datum}\n          />\n        ))}\n      </g>\n    ),\n\n    [uniqueData],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+B;AAC/B,kCAAqC;AACrC,2BAA8B;AACvB,MAAM,mBAAmB,MAAM;AACpC,QAAM,iBAAa,oCAAc;AACjC,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,WAAU;AAAA,MACV,qBAAW,IAAI,CAAC,SACf,4CAAC;AAAA,QACC,cAAc,MAAM;AAAA,QACpB,WAAW,KAAK;AAAA,QAEhB,OAAO,KAAK;AAAA,SADP,KAAK,SAEZ,CACD;AAAA,KACH;AAAA,IAGF,CAAC,UAAU;AAAA,EACb;AACF;",
   "names": []
 }

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

@@ -40,6 +40,7 @@ const VerticalScrapperLine = import_react.default.memo(({ rectDetector, xPositio
     setScrapperPosX,
     isGrabbed,
     xScale,
+    yScale,
     setActivePoint,
     innerHeight,
     props: { TooltipRenderer, scrapper }
@@ -52,8 +53,9 @@ const VerticalScrapperLine = import_react.default.memo(({ rectDetector, xPositio
       setScrapperPosX(xPosition);
     setActivePoint(null);
   }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);
-  const render = (0, import_react.useMemo)(
+  return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+      transform: `translate(${xScale.bandwidth ? xScale.bandwidth() / 2 : 0}, 0)`,
       children: [
         isActive && !isGrabbed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
           children: [
@@ -114,6 +116,5 @@ const VerticalScrapperLine = import_react.default.memo(({ rectDetector, xPositio
       rectDetector
     ]
   );
-  return render;
 });
 //# sourceMappingURL=VerticalScrapperLine.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scrapper/VerticalScrapperLine.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkE;AAClE,yBAA2B;AAC3B,uBAA6B;AAC7B,0BAA6B;AAC7B,oBAAoE;AAE7D,MAAM,uBAAuB,aAAAA,QAAM,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,QAAI,yBAAW,gCAAY;AAC3B,QAAM,YAAQ,yBAAW,6BAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAgD;AAChG,QAAM,WAAW,iBAAiB;AAClC,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AACzC,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAI1D,QAAM,aAAS;AAAA,IACb,MACE,6CAAC;AAAA,MACE;AAAA,oBAAY,CAAC,YACZ,6CAAC;AAAA,UACE;AAAA,8BACC,4CAAC;AAAA,cACC,uDAAC;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,8DAAC,6CAA4B;AAAA,kBAC7B,4CAAC;AAAA,oBACC,sDAAC;AAAA,sBAAgB,MAAM;AAAA,qBAAO;AAAA,mBAChC;AAAA;AAAA,eACF;AAAA,aACF,IACE;AAAA,YACJ,4CAAC;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,4CAAC;AAAA,UACC,aAAa;AAAA,UAGb,GAAG,OAAO,YAAY,YAAY,OAAO,UAAU,IAAI,IAAI,YAAY,cAAc;AAAA,UACrF,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OAAO,OAAO,YAAY,KAAK,cAAc,QAAQ,cAAc;AAAA,UACnE,QAAQ;AAAA,SACV;AAAA;AAAA,KACF;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT,CAAC;",
+  "sourcesContent": ["import React, { useContext, useCallback, useState, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\nimport { TrendHighlight } from '../TrendHighlight';\n\nexport const VerticalScrapperLine = React.memo(({ rectDetector, xPosition, datum }) => {\n  const {\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    yScale,\n    setActivePoint,\n    innerHeight,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n  const isActive = scrapperPosX === xPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosX(xPosition);\n    setActivePoint(null);\n  }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);\n\n  // const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;\n  return useMemo(\n    () => (\n      <g transform={`translate(${xScale.bandwidth ? xScale.bandwidth() / 2 : 0}, 0)`}>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement}\n                  showPopover\n                  zIndex={theme.zIndex.tooltip}\n                  startPlacementPreference={scrapper.tooltipPreference}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={datum} />\n                  </StyledTooltipContainer>\n                </DSPopperJS>\n              </foreignObject>\n            ) : null}\n            <line\n              ref={setReferenceElement}\n              x1={xPosition}\n              strokeWidth=\"2px\"\n              stroke={scrapper.color}\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n              strokeDasharray={(4, 4)}\n            />\n          </g>\n        ) : null}\n        <rect\n          onMouseOver={handleOnMouseEnter}\n          x={xScale.bandwidth ? xPosition - xScale.bandwidth() / 2 : xPosition - rectDetector?.left}\n          fill=\"transparent\"\n          y={0}\n          width={xScale.bandwidth?.() ?? rectDetector?.right + rectDetector?.left}\n          height={innerHeight}\n        />\n      </g>\n    ),\n    [\n      isActive,\n      isGrabbed,\n      TooltipRenderer,\n      referenceElement,\n      theme.zIndex.tooltip,\n      scrapper.tooltipPreference,\n      scrapper.color,\n      datum,\n      xPosition,\n      innerHeight,\n      handleOnMouseEnter,\n      xScale,\n      rectDetector,\n    ],\n  );\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkE;AAClE,yBAA2B;AAC3B,uBAA6B;AAC7B,0BAA6B;AAC7B,oBAAoE;AAG7D,MAAM,uBAAuB,aAAAA,QAAM,KAAK,CAAC,EAAE,cAAc,WAAW,MAAM,MAAM;AACrF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,QAAI,yBAAW,gCAAY;AAC3B,QAAM,YAAQ,yBAAW,6BAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAgD;AAChG,QAAM,WAAW,iBAAiB;AAClC,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AACzC,mBAAe,IAAI;AAAA,EACrB,GAAG,CAAC,WAAW,gBAAgB,iBAAiB,SAAS,CAAC;AAG1D,aAAO;AAAA,IACL,MACE,6CAAC;AAAA,MAAE,WAAW,aAAa,OAAO,YAAY,OAAO,UAAU,IAAI,IAAI;AAAA,MACpE;AAAA,oBAAY,CAAC,YACZ,6CAAC;AAAA,UACE;AAAA,8BACC,4CAAC;AAAA,cACC,uDAAC;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,8DAAC,6CAA4B;AAAA,kBAC7B,4CAAC;AAAA,oBACC,sDAAC;AAAA,sBAAgB,MAAM;AAAA,qBAAO;AAAA,mBAChC;AAAA;AAAA,eACF;AAAA,aACF,IACE;AAAA,YACJ,4CAAC;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,4CAAC;AAAA,UACC,aAAa;AAAA,UACb,GAAG,OAAO,YAAY,YAAY,OAAO,UAAU,IAAI,IAAI,YAAY,cAAc;AAAA,UACrF,MAAK;AAAA,UACL,GAAG;AAAA,UACH,OAAO,OAAO,YAAY,KAAK,cAAc,QAAQ,cAAc;AAAA,UACnE,QAAQ;AAAA,SACV;AAAA;AAAA,KACF;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF,CAAC;",
   "names": ["React"]
 }

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

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

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

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

package/dist/cjs/graphs/Chart/parts/Scroller/Controllers.js

@@ -0,0 +1,80 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Controllers_exports = {};
+__export(Controllers_exports, {
+  Controllers: () => Controllers
+});
+module.exports = __toCommonJS(Controllers_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ChartContext = require("../../ChartContext");
+const Controllers = () => {
+  const {
+    props: { xScroll },
+    width,
+    xScale,
+    containerRatio,
+    setContainerRatio,
+    lastPosition,
+    setToolbarRef,
+    setXScrollbarPosition
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const handleOnClick = (0, import_react.useCallback)(() => {
+    setContainerRatio(1);
+    setXScrollbarPosition(0);
+    lastPosition.current = 0;
+  }, [lastPosition, setContainerRatio, setXScrollbarPosition]);
+  if (xScale.bandwidth)
+    return null;
+  if (!xScroll)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    onClick: handleOnClick,
+    transform: `translate(${width - 17 * 2},4) scale(1.5,1.5)`,
+    strokeLinecap: "round",
+    opacity: "",
+    strokeOpacity: "1",
+    style: { cursor: "pointer", opacity: containerRatio > 1 ? 1 : 0.5 },
+    ref: setToolbarRef,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+        width: "17",
+        height: "17",
+        fill: "white",
+        stroke: "#c0c0c0",
+        strokeWidth: "1"
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+        d: "M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275",
+        fill: "#ffffff",
+        stroke: "#c2c2c2",
+        strokeLinecap: "round",
+        strokeWidth: "1"
+      })
+    ]
+  });
+};
+//# sourceMappingURL=Controllers.js.map

package/dist/cjs/graphs/Chart/parts/Scroller/Controllers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/parts/Scroller/Controllers.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const Controllers = () => {\n  const {\n    props: { xScroll },\n    width,\n    xScale,\n    containerRatio,\n    setContainerRatio,\n    lastPosition,\n    setToolbarRef,\n    setXScrollbarPosition,\n  } = useContext(ChartContext);\n\n  const handleOnClick = useCallback(() => {\n    setContainerRatio(1);\n    setXScrollbarPosition(0);\n    lastPosition.current = 0;\n  }, [lastPosition, setContainerRatio, setXScrollbarPosition]);\n\n  // if is a bar chart we dont give controls\n  if (xScale.bandwidth) return null;\n\n  if (!xScroll) return null;\n  return (\n    <g\n      onClick={handleOnClick}\n      transform={`translate(${width - 17 * 2},4) scale(1.5,1.5)`}\n      strokeLinecap=\"round\"\n      opacity=\"\"\n      strokeOpacity=\"1\"\n      style={{ cursor: 'pointer', opacity: containerRatio > 1 ? 1 : 0.5 }}\n      ref={setToolbarRef}\n    >\n      <rect width=\"17\" height=\"17\" fill=\"white\" stroke=\"#c0c0c0\" strokeWidth=\"1\"></rect>\n      <path\n        d=\"M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\"\n        fill=\"#ffffff\"\n        stroke=\"#c2c2c2\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"1\"\n      ></path>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAA+C;AAC/C,0BAA6B;AAEtB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,oBAAgB,0BAAY,MAAM;AACtC,sBAAkB,CAAC;AACnB,0BAAsB,CAAC;AACvB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,cAAc,mBAAmB,qBAAqB,CAAC;AAG3D,MAAI,OAAO;AAAW,WAAO;AAE7B,MAAI,CAAC;AAAS,WAAO;AACrB,SACE,6CAAC;AAAA,IACC,SAAS;AAAA,IACT,WAAW,aAAa,QAAQ,KAAK;AAAA,IACrC,eAAc;AAAA,IACd,SAAQ;AAAA,IACR,eAAc;AAAA,IACd,OAAO,EAAE,QAAQ,WAAW,SAAS,iBAAiB,IAAI,IAAI,IAAI;AAAA,IAClE,KAAK;AAAA,IAEL;AAAA,kDAAC;AAAA,QAAK,OAAM;AAAA,QAAK,QAAO;AAAA,QAAK,MAAK;AAAA,QAAQ,QAAO;AAAA,QAAU,aAAY;AAAA,OAAI;AAAA,MAC3E,4CAAC;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,QACL,QAAO;AAAA,QACP,eAAc;AAAA,QACd,aAAY;AAAA,OACb;AAAA;AAAA,GACH;AAEJ;",
+  "names": []
+}

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

@@ -44,11 +44,12 @@ const ScrollBarX = () => {
     containerRatio,
     setScrapperPosX,
     isScrollbarVisible,
-    oldLastPosition
+    lastPosition
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const barWidth = (0, import_react.useMemo)(() => innerWidth / containerRatio, [containerRatio, innerWidth]);
   const handleMouseDown = (0, import_react.useCallback)(
     (e) => {
+      e.stopPropagation();
       setScrapperPosX("");
       setIsGrabbed(true);
       setStartPosition(e.clientX);
@@ -71,10 +72,10 @@ const ScrollBarX = () => {
         newPosition = left - barWidth / 2;
       }
       setXScrollbarPosition(newPosition);
-      oldLastPosition.current = newPosition;
+      lastPosition.current = newPosition;
       e.preventDefault();
     },
-    [barWidth, innerWidth, oldLastPosition, setXScrollbarPosition]
+    [barWidth, innerWidth, lastPosition, setXScrollbarPosition]
   );
   const isBarVisible = (0, import_react.useMemo)(
     () => (isScrollbarVisible || activePoint) && containerRatio > 1,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scroller/ScrollBarX.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAwD;AACxD,0BAA6B;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,QAAI,yBAAW,gCAAY;AAE3B,QAAM,eAAW,sBAAQ,MAAM,aAAa,gBAAgB,CAAC,gBAAgB,UAAU,CAAC;AAExF,QAAM,sBAAkB;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,uBAA4C,0BAAY,MAAM;AAClE,oBAAgB,EAAE;AAAA,EACpB,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,yBAA8C;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,mBAAe;AAAA,IACnB,OAAO,sBAAsB,gBAAgB,iBAAiB;AAAA,IAC9D,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,EAClD;AAEA,SACE,6CAAC;AAAA,IACC,WAAU;AAAA,IACV,WAAW,eAAe;AAAA,IAC1B,OAAO,EAAE,YAAY,eAAe,YAAY,SAAS;AAAA,IACzD,cAAc;AAAA,IAEd;AAAA,kDAAC;AAAA,QAAK,OAAO,EAAE,QAAQ,UAAU;AAAA,QAAG,OAAO;AAAA,QAAY,QAAO;AAAA,QAAI,MAAK;AAAA,QAAY,SAAS;AAAA,OAAoB;AAAA,MAChH,4CAAC;AAAA,QAAE,WAAW,aAAa;AAAA,QACzB,sDAAC;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": ["/* 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    lastPosition,\n  } = useContext(ChartContext);\n\n  const barWidth = useMemo(() => innerWidth / containerRatio, [containerRatio, innerWidth]);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\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      lastPosition.current = newPosition;\n      e.preventDefault();\n    },\n    [barWidth, innerWidth, lastPosition, 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAwD;AACxD,0BAA6B;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,QAAI,yBAAW,gCAAY;AAE3B,QAAM,eAAW,sBAAQ,MAAM,aAAa,gBAAgB,CAAC,gBAAgB,UAAU,CAAC;AAExF,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,QAAE,gBAAgB;AAClB,sBAAgB,EAAE;AAClB,mBAAa,IAAI;AACjB,uBAAiB,EAAE,OAAO;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,cAAc,iBAAiB,gBAAgB;AAAA,EAClD;AAEA,QAAM,uBAA4C,0BAAY,MAAM;AAClE,oBAAgB,EAAE;AAAA,EACpB,GAAG,CAAC,eAAe,CAAC;AAEpB,QAAM,yBAA8C;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,mBAAa,UAAU;AACvB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,UAAU,YAAY,cAAc,qBAAqB;AAAA,EAC5D;AAEA,QAAM,mBAAe;AAAA,IACnB,OAAO,sBAAsB,gBAAgB,iBAAiB;AAAA,IAC9D,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,EAClD;AAEA,SACE,6CAAC;AAAA,IACC,WAAU;AAAA,IACV,WAAW,eAAe;AAAA,IAC1B,OAAO,EAAE,YAAY,eAAe,YAAY,SAAS;AAAA,IACzD,cAAc;AAAA,IAEd;AAAA,kDAAC;AAAA,QAAK,OAAO,EAAE,QAAQ,UAAU;AAAA,QAAG,OAAO;AAAA,QAAY,QAAO;AAAA,QAAI,MAAK;AAAA,QAAY,SAAS;AAAA,OAAoB;AAAA,MAChH,4CAAC;AAAA,QAAE,WAAW,aAAa;AAAA,QACzB,sDAAC;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/cjs/graphs/Chart/parts/Scroller/ScrollBarY.js

@@ -45,7 +45,7 @@ const ScrollBarY = () => {
     setScrapperPosX,
     setScrapperPosY,
     isScrollbarVisible,
-    oldLastPosition
+    lastPosition
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const barHeight = (0, import_react.useMemo)(() => parseInt(innerHeight / containerRatio, 10), [containerRatio, innerHeight]);
   const handleMouseDown = (0, import_react.useCallback)(
@@ -76,10 +76,10 @@ const ScrollBarY = () => {
         newPosition = top - barHeight / 2;
       }
       setXScrollbarPosition(newPosition);
-      oldLastPosition.current = newPosition;
+      lastPosition.current = newPosition;
       e.preventDefault();
     },
-    [barHeight, innerHeight, oldLastPosition, setXScrollbarPosition]
+    [barHeight, innerHeight, lastPosition, setXScrollbarPosition]
   );
   const isBarVisible = (0, import_react.useMemo)(
     () => (isScrollbarVisible || activePoint) && containerRatio > 1,

package/dist/cjs/graphs/Chart/parts/Scroller/ScrollBarY.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scroller/ScrollBarY.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const ScrollBarY = () => {\n  const {\n    setIsGrabbed,\n    setStartPosition,\n    innerWidth,\n    xScrollbarPosition,\n    activePoint,\n    setXScrollbarPosition,\n    innerHeight,\n    isGrabbed,\n    containerRatio,\n    setScrapperPosX,\n    setScrapperPosY,\n    isScrollbarVisible,\n    oldLastPosition,\n  } = useContext(ChartContext);\n\n  const barHeight = useMemo(() => parseInt(innerHeight / containerRatio, 10), [containerRatio, innerHeight]);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n      setScrapperPosY('');\n      setIsGrabbed(true);\n      setStartPosition(e.clientY);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosY, 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 top = e.clientY - bounds.top;\n      if (top + barHeight / 2 > innerHeight) {\n        newPosition = innerHeight - barHeight;\n      } else if (top - barHeight / 2 > 0) {\n        newPosition = top - barHeight / 2;\n      }\n\n      setXScrollbarPosition(newPosition);\n      oldLastPosition.current = newPosition;\n      e.preventDefault();\n    },\n    [barHeight, innerHeight, 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=\"scrollbary\"\n      transform=\"translate(-6,0)\"\n      style={{ visibility: isBarVisible ? 'visible' : 'hidden' }}\n      onMouseEnter={handleMouseEnter}\n    >\n      <rect\n        style={{ cursor: 'pointer' }}\n        width=\"6\"\n        height={innerHeight}\n        fill=\"#ebecf0c5\"\n        onClick={handleClickFullBar}\n      />\n      <g transform={`translate(0,${xScrollbarPosition})`}>\n        <rect\n          style={{ cursor: isGrabbed ? 'grabbing' : 'grab' }}\n          width=\"6\"\n          height={barHeight}\n          fill=\"grey\"\n          onMouseDown={handleMouseDown}\n        />\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAwD;AACxD,0BAA6B;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,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM,SAAS,cAAc,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,WAAW,CAAC;AAEzG,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAClB,sBAAgB,EAAE;AAClB,mBAAa,IAAI;AACjB,uBAAiB,EAAE,OAAO;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,cAAc,iBAAiB,iBAAiB,gBAAgB;AAAA,EACnE;AAEA,QAAM,uBAAmB;AAAA,IACvB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAAA,IACpB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAAwB;AACvB,UAAI,cAAc;AAClB,YAAM,MAAM,EAAE;AACd,YAAM,SAAS,IAAI,sBAAsB;AACzC,YAAM,MAAM,EAAE,UAAU,OAAO;AAC/B,UAAI,MAAM,YAAY,IAAI,aAAa;AACrC,sBAAc,cAAc;AAAA,MAC9B,WAAW,MAAM,YAAY,IAAI,GAAG;AAClC,sBAAc,MAAM,YAAY;AAAA,MAClC;AAEA,4BAAsB,WAAW;AACjC,sBAAgB,UAAU;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,WAAW,aAAa,iBAAiB,qBAAqB;AAAA,EACjE;AAEA,QAAM,mBAAe;AAAA,IACnB,OAAO,sBAAsB,gBAAgB,iBAAiB;AAAA,IAC9D,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,EAClD;AAEA,SACE,6CAAC;AAAA,IACC,WAAU;AAAA,IACV,WAAU;AAAA,IACV,OAAO,EAAE,YAAY,eAAe,YAAY,SAAS;AAAA,IACzD,cAAc;AAAA,IAEd;AAAA,kDAAC;AAAA,QACC,OAAO,EAAE,QAAQ,UAAU;AAAA,QAC3B,OAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS;AAAA,OACX;AAAA,MACA,4CAAC;AAAA,QAAE,WAAW,eAAe;AAAA,QAC3B,sDAAC;AAAA,UACC,OAAO,EAAE,QAAQ,YAAY,aAAa,OAAO;AAAA,UACjD,OAAM;AAAA,UACN,QAAQ;AAAA,UACR,MAAK;AAAA,UACL,aAAa;AAAA,SACf;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const ScrollBarY = () => {\n  const {\n    setIsGrabbed,\n    setStartPosition,\n    innerWidth,\n    xScrollbarPosition,\n    activePoint,\n    setXScrollbarPosition,\n    innerHeight,\n    isGrabbed,\n    containerRatio,\n    setScrapperPosX,\n    setScrapperPosY,\n    isScrollbarVisible,\n    lastPosition,\n  } = useContext(ChartContext);\n\n  const barHeight = useMemo(() => parseInt(innerHeight / containerRatio, 10), [containerRatio, innerHeight]);\n\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n      setScrapperPosY('');\n      setIsGrabbed(true);\n      setStartPosition(e.clientY);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosY, 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 top = e.clientY - bounds.top;\n      if (top + barHeight / 2 > innerHeight) {\n        newPosition = innerHeight - barHeight;\n      } else if (top - barHeight / 2 > 0) {\n        newPosition = top - barHeight / 2;\n      }\n\n      setXScrollbarPosition(newPosition);\n      lastPosition.current = newPosition;\n      e.preventDefault();\n    },\n    [barHeight, innerHeight, lastPosition, setXScrollbarPosition],\n  );\n\n  const isBarVisible = useMemo(\n    () => (isScrollbarVisible || activePoint) && containerRatio > 1,\n    [activePoint, containerRatio, isScrollbarVisible],\n  );\n\n  return (\n    <g\n      className=\"scrollbary\"\n      transform=\"translate(-6,0)\"\n      style={{ visibility: isBarVisible ? 'visible' : 'hidden' }}\n      onMouseEnter={handleMouseEnter}\n    >\n      <rect\n        style={{ cursor: 'pointer' }}\n        width=\"6\"\n        height={innerHeight}\n        fill=\"#ebecf0c5\"\n        onClick={handleClickFullBar}\n      />\n      <g transform={`translate(0,${xScrollbarPosition})`}>\n        <rect\n          style={{ cursor: isGrabbed ? 'grabbing' : 'grab' }}\n          width=\"6\"\n          height={barHeight}\n          fill=\"grey\"\n          onMouseDown={handleMouseDown}\n        />\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAAwD;AACxD,0BAA6B;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,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM,SAAS,cAAc,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,WAAW,CAAC;AAEzG,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAClB,sBAAgB,EAAE;AAClB,mBAAa,IAAI;AACjB,uBAAiB,EAAE,OAAO;AAC1B,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,cAAc,iBAAiB,iBAAiB,gBAAgB;AAAA,EACnE;AAEA,QAAM,uBAAmB;AAAA,IACvB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAAA,IACpB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAAwB;AACvB,UAAI,cAAc;AAClB,YAAM,MAAM,EAAE;AACd,YAAM,SAAS,IAAI,sBAAsB;AACzC,YAAM,MAAM,EAAE,UAAU,OAAO;AAC/B,UAAI,MAAM,YAAY,IAAI,aAAa;AACrC,sBAAc,cAAc;AAAA,MAC9B,WAAW,MAAM,YAAY,IAAI,GAAG;AAClC,sBAAc,MAAM,YAAY;AAAA,MAClC;AAEA,4BAAsB,WAAW;AACjC,mBAAa,UAAU;AACvB,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAC,WAAW,aAAa,cAAc,qBAAqB;AAAA,EAC9D;AAEA,QAAM,mBAAe;AAAA,IACnB,OAAO,sBAAsB,gBAAgB,iBAAiB;AAAA,IAC9D,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,EAClD;AAEA,SACE,6CAAC;AAAA,IACC,WAAU;AAAA,IACV,WAAU;AAAA,IACV,OAAO,EAAE,YAAY,eAAe,YAAY,SAAS;AAAA,IACzD,cAAc;AAAA,IAEd;AAAA,kDAAC;AAAA,QACC,OAAO,EAAE,QAAQ,UAAU;AAAA,QAC3B,OAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS;AAAA,OACX;AAAA,MACA,4CAAC;AAAA,QAAE,WAAW,eAAe;AAAA,QAC3B,sDAAC;AAAA,UACC,OAAO,EAAE,QAAQ,YAAY,aAAa,OAAO;AAAA,UACjD,OAAM;AAAA,UACN,QAAQ;AAAA,UACR,MAAK;AAAA,UACL,aAAa;AAAA,SACf;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }