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

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

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

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

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

@@ -34,13 +34,13 @@ var import_ds_popperjs = require("@elliemae/ds-popperjs");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ChartContext = require("../../ChartContext");
 var import_styles = require("../../styles");
-const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {
+const VerticalScrapperLine = ({ rectDetector, xPosition, datum }) => {
   const {
     scrapperPosX,
     setScrapperPosX,
     isGrabbed,
     xScale,
-    innerWidth,
+    setActivePoint,
     innerHeight,
     props: { TooltipRenderer, scrapper }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
@@ -50,10 +50,10 @@ const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {
   const handleOnMouseEnter = (0, import_react.useCallback)(() => {
     if (!isGrabbed)
       setScrapperPosX(xPosition);
-  }, [isGrabbed, setScrapperPosX, xPosition]);
-  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;
-  const render = (0, import_react.useMemo)(() => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    setActivePoint(null);
+  }, [isGrabbed, setActivePoint, setScrapperPosX, xPosition]);
+  const render = (0, import_react.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
       children: [
         isActive && !isGrabbed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
           children: [
@@ -88,31 +88,32 @@ const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {
             })
           ]
         }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", {
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
           onMouseOver: handleOnMouseEnter,
-          x1: xPosition,
-          strokeWidth: strokeDetectorWidth,
-          stroke: "transparent",
-          y1: 0,
-          x2: xPosition,
-          y2: innerHeight
+          x: xScale.bandwidth ? xPosition - xScale.bandwidth() / 2 : xPosition - rectDetector?.left,
+          fill: "transparent",
+          y: 0,
+          width: xScale.bandwidth?.() ?? rectDetector?.right + rectDetector?.left,
+          height: innerHeight
         })
       ]
-    });
-  }, [
-    isActive,
-    isGrabbed,
-    TooltipRenderer,
-    referenceElement,
-    theme.zIndex.tooltip,
-    scrapper.tooltipPreference,
-    scrapper.color,
-    datum,
-    xPosition,
-    innerHeight,
-    handleOnMouseEnter,
-    strokeDetectorWidth
-  ]);
+    }),
+    [
+      isActive,
+      isGrabbed,
+      TooltipRenderer,
+      referenceElement,
+      theme.zIndex.tooltip,
+      scrapper.tooltipPreference,
+      scrapper.color,
+      datum,
+      xPosition,
+      innerHeight,
+      handleOnMouseEnter,
+      xScale,
+      rectDetector
+    ]
+  );
   return render;
 };
 //# 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 = ({ lineWidth, xPosition, datum }) => {\n  const {\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    innerWidth,\n    innerHeight,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n  const isActive = scrapperPosX === xPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosX(xPosition);\n  }, [isGrabbed, setScrapperPosX, xPosition]);\n\n  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;\n\n  const render = useMemo(() => {\n    return (\n      <g>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement}\n                  showPopover\n                  zIndex={theme.zIndex.tooltip}\n                  startPlacementPreference={scrapper.tooltipPreference}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={datum} />\n                  </StyledTooltipContainer>\n                </DSPopperJS>\n              </foreignObject>\n            ) : null}\n            <line\n              ref={setReferenceElement}\n              x1={xPosition}\n              strokeWidth=\"2px\"\n              stroke={scrapper.color}\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n              strokeDasharray={(4, 4)}\n            />\n          </g>\n        ) : null}\n\n        <line\n          onMouseOver={handleOnMouseEnter}\n          // onMouseLeave={() => setScrapperPosY('')}\n          // id=\"horizontal-scrapper-zone\"\n          x1={xPosition}\n          strokeWidth={strokeDetectorWidth}\n          stroke=\"transparent\"\n          y1={0}\n          x2={xPosition}\n          y2={innerHeight}\n        />\n      </g>\n    );\n  }, [\n    isActive,\n    isGrabbed,\n    TooltipRenderer,\n    referenceElement,\n    theme.zIndex.tooltip,\n    scrapper.tooltipPreference,\n    scrapper.color,\n    datum,\n    xPosition,\n    innerHeight,\n    handleOnMouseEnter,\n    strokeDetectorWidth,\n  ]);\n  return render;\n};\n", "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,CAAC,EAAE,WAAW,WAAW,MAAM,MAAM;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,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;AAAA,EAC3C,GAAG,CAAC,WAAW,iBAAiB,SAAS,CAAC;AAE1C,QAAM,sBAAsB,OAAO,YAAY,OAAO,UAAU,IAAI;AAEpE,QAAM,aAAS,sBAAQ,MAAM;AAC3B,WACE,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,QAEJ,4CAAC;AAAA,UACC,aAAa;AAAA,UAGb,IAAI;AAAA,UACJ,aAAa;AAAA,UACb,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,SACN;AAAA;AAAA,KACF;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,OAAO;AAAA,IACb,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["import 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", "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,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,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;",
   "names": []
 }

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(() => parseInt(innerWidth / containerRatio, 10), [containerRatio, innerWidth]);\n\n  // const [endPosition, setEndPosition] = useState(0);\n  const handleMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n      setIsGrabbed(true);\n      setStartPosition(e.clientX);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosX, setStartPosition],\n  );\n\n  const handleMouseEnter = useCallback(\n    (e: React.MouseEvent) => {\n      setScrapperPosX('');\n    },\n    [setScrapperPosX],\n  );\n\n  // const [endPosition, setEndPosition] = useState(0);\n  const handleClickFullBar = useCallback(\n    (e: React.MouseEvent) => {\n      let newPosition = 0;\n      const bar = e.target;\n      const bounds = bar.getBoundingClientRect();\n      const left = e.clientX - bounds.left;\n      if (left + barWidth / 2 > innerWidth) {\n        newPosition = innerWidth - barWidth;\n      } else if (left - barWidth / 2 > 0) {\n        newPosition = left - barWidth / 2;\n      }\n\n      setXScrollbarPosition(newPosition);\n      oldLastPosition.current = newPosition;\n      e.preventDefault();\n    },\n    [barWidth, innerWidth, oldLastPosition, setXScrollbarPosition],\n  );\n\n  const isBarVisible = useMemo(\n    () => (isScrollbarVisible || activePoint) && containerRatio > 1,\n    [activePoint, containerRatio, isScrollbarVisible],\n  );\n\n  return (\n    <g\n      className=\"scrollbarx\"\n      transform={`translate(0,${innerHeight})`}\n      style={{ visibility: isBarVisible ? 'visible' : 'hidden' }}\n      onMouseEnter={handleMouseEnter}\n    >\n      <rect style={{ cursor: 'pointer' }} width={innerWidth} height=\"6\" fill=\"#ebecf0c5\" onClick={handleClickFullBar} />\n      <g transform={`translate(${xScrollbarPosition},0)`}>\n        <rect\n          style={{ cursor: isGrabbed ? 'grabbing' : 'grab' }}\n          width={barWidth}\n          height=\"6\"\n          fill=\"grey\"\n          onMouseDown={handleMouseDown}\n        />\n      </g>\n    </g>\n  );\n};\n", "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,SAAS,aAAa,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAGtG,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,uBAAmB;AAAA,IACvB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAAA,IACpB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAGA,QAAM,yBAAqB;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,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    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", "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,SAAS,aAAa,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAEtG,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,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,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;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerX.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';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper, height },\n    xScrollbarPosition,\n    containerRatio,\n    innerHeight,\n    innerWidth,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    else if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  return (\n    <g className=\"scrollable-container-x\" clipPath=\"url(#myClip)\">\n      <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n        <AxisBottom />\n        <SeriesFactory />\n        {Scrappers}\n      </g>\n      <ScrollBarX />\n\n      <defs>\n        <clipPath id=\"myClip\">\n          <path\n            d={`M 0 -10 \n            H ${innerWidth} \n            V ${innerHeight} \n            L ${innerWidth + 10}  ${innerHeight} \n            L ${innerWidth + 10}  ${height} \n            L -10 ${height} \n            L -10 ${innerHeight}  \n            L 0 ${innerHeight}  \n            L 0 -10`}\n          />\n        </clipPath>\n      </defs>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAA2C;AAC3C,0BAA6B;AAC7B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AAC1B,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,OAAO;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,4CAAC,4BAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,4CAAC,4CAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,6CAAC;AAAA,IAAE,WAAU;AAAA,IAAyB,UAAS;AAAA,IAC7C;AAAA,mDAAC;AAAA,QAAE,WAAW,aAAa,CAAC,qBAAqB;AAAA,QAC/C;AAAA,sDAAC,gCAAW;AAAA,UACZ,4CAAC,sCAAc;AAAA,UACd;AAAA;AAAA,OACH;AAAA,MACA,4CAAC,gCAAW;AAAA,MAEZ,4CAAC;AAAA,QACC,sDAAC;AAAA,UAAS,IAAG;AAAA,UACX,sDAAC;AAAA,YACC,GAAG;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,aAAa,OAAO;AAAA,gBACpB,aAAa,OAAO;AAAA,oBAChB;AAAA,oBACA;AAAA,kBACF;AAAA;AAAA,WAER;AAAA,SACF;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper, height },\n    xScrollbarPosition,\n    containerRatio,\n    innerHeight,\n    innerWidth,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    else if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  return (\n    <g className=\"scrollable-container-x\" clipPath=\"url(#myClip)\">\n      <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n        <AxisBottom />\n        <SeriesFactory />\n        {Scrappers}\n      </g>\n      <ScrollBarX />\n\n      <defs>\n        <clipPath id=\"myClip\">\n          <path\n            d={`M 0 -10 \n            H ${innerWidth} \n            V ${innerHeight + 2} \n            L ${innerWidth + 10}  ${innerHeight + 2} \n            L ${innerWidth + 10}  ${height} \n            L -10 ${height} \n            L -10 ${innerHeight}  \n            L 0 ${innerHeight}  \n            L 0 -10`}\n          />\n        </clipPath>\n      </defs>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,mBAA2C;AAC3C,0BAA6B;AAC7B,wBAA2B;AAC3B,2BAA8B;AAC9B,wBAA2B;AAC3B,sBAAyB;AACzB,8BAAiC;AAC1B,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,OAAO;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,4CAAC,4BAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,4CAAC,4CAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,6CAAC;AAAA,IAAE,WAAU;AAAA,IAAyB,UAAS;AAAA,IAC7C;AAAA,mDAAC;AAAA,QAAE,WAAW,aAAa,CAAC,qBAAqB;AAAA,QAC/C;AAAA,sDAAC,gCAAW;AAAA,UACZ,4CAAC,sCAAc;AAAA,UACd;AAAA;AAAA,OACH;AAAA,MACA,4CAAC,gCAAW;AAAA,MAEZ,4CAAC;AAAA,QACC,sDAAC;AAAA,UAAS,IAAG;AAAA,UACX,sDAAC;AAAA,YACC,GAAG;AAAA,gBACC;AAAA,gBACA,cAAc;AAAA,gBACd,aAAa,OAAO,cAAc;AAAA,gBAClC,aAAa,OAAO;AAAA,oBAChB;AAAA,oBACA;AAAA,kBACF;AAAA;AAAA,WAER;AAAA,SACF;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -33,54 +33,70 @@ var import_react = require("react");
 var import_ChartContext = require("../ChartContext");
 var import_series = require("../series");
 var import_helpers = require("../helpers");
+var import_HorizontalBars = require("../series/HorizontalBars");
+var import_HorizontalStackedBars = require("../series/HorizontalStackedBars");
 const SeriesFactory = () => {
   const {
     props: { data, xAxis, groups, types },
     xScrollbarPosition,
     innerWidth,
     xScale,
-    containerRatio
+    containerRatio,
+    isHorizontal
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-    className: "content",
-    children: data.map((serie) => {
-      const serieProps = {
-        key: serie.key,
-        serie: {
-          ...serie,
-          data: containerRatio > 1 ? serie.data.filter((datum) => {
-            const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
-            return xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 20 * containerRatio && xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 20 * containerRatio;
-          }) : serie.data
+  return (0, import_react.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+      className: "content",
+      children: data.filter((serie) => !serie.isHidden).map((serie) => {
+        const serieProps = {
+          key: serie.key,
+          serie: {
+            ...serie,
+            data: containerRatio > 1 ? serie.data.filter((datum) => {
+              const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
+              return xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 40 * containerRatio && xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 40 * containerRatio;
+            }) : serie.data
+          }
+        };
+        if (serie.type === "bar" && groups && (0, import_helpers.getStackedIndex)(groups, serie.name) > -1 && isHorizontal) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HorizontalStackedBars.HorizontalStackedBars, {
+            ...serieProps
+          });
         }
-      };
-      if (serie.type === "bar" && groups && (0, import_helpers.getStackedIndex)(groups, serie.name) > -1) {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.StackedBar, {
-          ...serieProps
-        });
-      }
-      if (serie.type === "bar") {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.Bars, {
-          ...serieProps
-        });
-      }
-      if (types === "scatter" && !serie.type || serie.type === "point") {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.Points, {
-          ...serieProps
-        });
-      }
-      if (serie.type === "line") {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.Line, {
-          ...serieProps
-        });
-      }
-      if (serie.type === "area") {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.Area, {
-          ...serieProps
-        });
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
-    })
-  });
+        if (serie.type === "bar" && groups && (0, import_helpers.getStackedIndex)(groups, serie.name) > -1) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.StackedBar, {
+            ...serieProps
+          });
+        }
+        if (serie.type === "bar" && isHorizontal) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HorizontalBars.HorizontalBars, {
+            ...serieProps
+          });
+        }
+        if (serie.type === "bar") {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.Bars, {
+            ...serieProps
+          });
+        }
+        if (types === "scatter" && !serie.type || serie.type === "point") {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.Points, {
+            ...serieProps
+          });
+        }
+        if (serie.type === "line") {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.Line, {
+            ...serieProps
+          });
+        }
+        if (serie.type === "area") {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.Area, {
+            ...serieProps
+          });
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+      })
+    }),
+    [containerRatio, data, groups, innerWidth, isHorizontal, types, xAxis.cols, xScale, xScrollbarPosition]
+  );
 };
 //# sourceMappingURL=SeriesFactory.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/SeriesFactory.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { throttle } from 'lodash';\nexport const SeriesFactory = () => {\n  const {\n    props: { data, xAxis, groups, types },\n    xScrollbarPosition,\n    innerWidth,\n    xScale,\n    containerRatio,\n  } = useContext(ChartContext);\n\n  return (\n    <g className=\"content\">\n      {\n        data.map((serie) => {\n          const serieProps = {\n            key: serie.key,\n            // @todo fix this for both axis make a hook useVirtualize\n            serie: {\n              ...serie,\n              data:\n                containerRatio > 1\n                  ? serie.data.filter((datum) => {\n                      const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n                      return (\n                        xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 20 * containerRatio &&\n                        xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 20 * containerRatio\n                      );\n                    })\n                  : serie.data,\n            },\n          };\n          if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n            return <StackedBar {...serieProps} />;\n          }\n          if (serie.type === 'bar') {\n            return <Bars {...serieProps} />;\n          }\n          if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n            return <Points {...serieProps} />;\n          }\n          if (serie.type === 'line') {\n            return <Line {...serieProps} />;\n          }\n          if (serie.type === 'area') {\n            return <Area {...serieProps} />;\n          }\n          return <></>;\n        }) as JSX.Element[]\n      }\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,mBAA2C;AAC3C,0BAA6B;AAC7B,oBAAqD;AACrD,qBAAgC;AAEzB,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,SACE,4CAAC;AAAA,IAAE,WAAU;AAAA,IAET,eAAK,IAAI,CAAC,UAAU;AAClB,YAAM,aAAa;AAAA,QACjB,KAAK,MAAM;AAAA,QAEX,OAAO;AAAA,UACL,GAAG;AAAA,UACH,MACE,iBAAiB,IACb,MAAM,KAAK,OAAO,CAAC,UAAU;AAC3B,kBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,mBACE,cAAc,sBAAsB,kBAAkB,KAAK,KAAK,kBAChE,cAAc,sBAAsB,kBAAkB,KAAK,aAAa,KAAK;AAAA,UAEjF,CAAC,IACD,MAAM;AAAA,QACd;AAAA,MACF;AACA,UAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,eAAO,4CAAC;AAAA,UAAY,GAAG;AAAA,SAAY;AAAA,MACrC;AACA,UAAI,MAAM,SAAS,OAAO;AACxB,eAAO,4CAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,eAAO,4CAAC;AAAA,UAAQ,GAAG;AAAA,SAAY;AAAA,MACjC;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,4CAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,4CAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,aAAO,2EAAE;AAAA,IACX,CAAC;AAAA,GAEL;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { HorizontalBars } from '../series/HorizontalBars';\nimport { HorizontalStackedBars } from '../series/HorizontalStackedBars';\nexport const SeriesFactory = () => {\n  const {\n    props: { data, xAxis, groups, types },\n    xScrollbarPosition,\n    innerWidth,\n    xScale,\n    containerRatio,\n    isHorizontal,\n  } = useContext(ChartContext);\n\n  return useMemo(\n    () => (\n      <g className=\"content\">\n        {\n          data\n            .filter((serie) => !serie.isHidden)\n            .map((serie) => {\n              const serieProps = {\n                key: serie.key,\n                // @todo fix this for both axis make a hook useVirtualize\n                serie: {\n                  ...serie,\n                  data:\n                    containerRatio > 1\n                      ? serie.data.filter((datum) => {\n                          const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n                          return (\n                            xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 40 * containerRatio &&\n                            xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 40 * containerRatio\n                          );\n                        })\n                      : serie.data,\n                },\n              };\n              if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1 && isHorizontal) {\n                return <HorizontalStackedBars {...serieProps} />;\n              }\n              if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n                return <StackedBar {...serieProps} />;\n              }\n              if (serie.type === 'bar' && isHorizontal) {\n                return <HorizontalBars {...serieProps} />;\n              }\n              if (serie.type === 'bar') {\n                return <Bars {...serieProps} />;\n              }\n              if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n                return <Points {...serieProps} />;\n              }\n              if (serie.type === 'line') {\n                return <Line {...serieProps} />;\n              }\n              if (serie.type === 'area') {\n                return <Area {...serieProps} />;\n              }\n              return <></>;\n            }) as JSX.Element[]\n        }\n      </g>\n    ),\n    [containerRatio, data, groups, innerWidth, isHorizontal, types, xAxis.cols, xScale, xScrollbarPosition],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAGA,mBAA2C;AAC3C,0BAA6B;AAC7B,oBAAqD;AACrD,qBAAgC;AAChC,4BAA+B;AAC/B,mCAAsC;AAC/B,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,WAAU;AAAA,MAET,eACG,OAAO,CAAC,UAAU,CAAC,MAAM,QAAQ,EACjC,IAAI,CAAC,UAAU;AACd,cAAM,aAAa;AAAA,UACjB,KAAK,MAAM;AAAA,UAEX,OAAO;AAAA,YACL,GAAG;AAAA,YACH,MACE,iBAAiB,IACb,MAAM,KAAK,OAAO,CAAC,UAAU;AAC3B,oBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,qBACE,cAAc,sBAAsB,kBAAkB,KAAK,KAAK,kBAChE,cAAc,sBAAsB,kBAAkB,KAAK,aAAa,KAAK;AAAA,YAEjF,CAAC,IACD,MAAM;AAAA,UACd;AAAA,QACF;AACA,YAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,MAAM,cAAc;AAC9F,iBAAO,4CAAC;AAAA,YAAuB,GAAG;AAAA,WAAY;AAAA,QAChD;AACA,YAAI,MAAM,SAAS,SAAS,cAAU,gCAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,iBAAO,4CAAC;AAAA,YAAY,GAAG;AAAA,WAAY;AAAA,QACrC;AACA,YAAI,MAAM,SAAS,SAAS,cAAc;AACxC,iBAAO,4CAAC;AAAA,YAAgB,GAAG;AAAA,WAAY;AAAA,QACzC;AACA,YAAI,MAAM,SAAS,OAAO;AACxB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,iBAAO,4CAAC;AAAA,YAAQ,GAAG;AAAA,WAAY;AAAA,QACjC;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,4CAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,eAAO,2EAAE;AAAA,MACX,CAAC;AAAA,KAEP;AAAA,IAEF,CAAC,gBAAgB,MAAM,QAAQ,YAAY,cAAc,OAAO,MAAM,MAAM,QAAQ,kBAAkB;AAAA,EACxG;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/react-desc-prop-types.js

@@ -30,18 +30,7 @@ __export(react_desc_prop_types_exports, {
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_utilities = require("@elliemae/ds-utilities");
-const defaultProps = {
-  yAxis: {
-    showGrid: true,
-    color: "black",
-    type: "linear"
-  },
-  xAxis: {
-    showGrid: true,
-    color: "black",
-    type: "band"
-  }
-};
+const defaultProps = {};
 const propTypes = {
   ...import_ds_utilities.globalAttributesPropTypes,
   height: import_ds_utilities.PropTypes.number.isRequired.description("height").defaultValue(""),

package/dist/cjs/graphs/Chart/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/react-desc-prop-types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\ntype MarginT = {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n};\n\nexport declare namespace DSPieT {\n  export interface SeriesT {\n    name: string;\n    data: number;\n    color: string;\n  }\n  export interface Props {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n  }\n}\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'stackedBar' | 'spline';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export interface SeriesT {\n    name: string;\n    data: number[] | { x: number; y: number }[];\n    type: SerieTypeT;\n    scale?: string;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    type: AxisTypeT;\n    cols?: number[] | string[] | Date[];\n    padding?: number;\n    beginAtZero?: boolean;\n  }\n\n  export interface InternalData {\n    key: string;\n    group: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string;\n    color: string;\n    values: {\n      key: string;\n      value: number;\n      position: number;\n    }[];\n  }\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter' | 'pie';\n  }\n\n  export interface DefaultProps {\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n  yAxis: {\n    showGrid: true,\n    color: 'black',\n    type: 'linear',\n  },\n  xAxis: {\n    showGrid: true,\n    color: 'black',\n    type: 'band',\n  },\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AA6E9C,MAAM,eAAsC;AAAA,EACjD,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,8BAAU,MAAM;AAAA,IACtB,KAAK,8BAAU;AAAA,IACf,QAAQ,8BAAU;AAAA,IAClB,MAAM,8BAAU;AAAA,IAChB,OAAO,8BAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
+  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\ntype MarginT = {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n};\n\nexport declare namespace DSPieT {\n  export interface SeriesT {\n    name: string;\n    data: number;\n    color: string;\n  }\n  export interface Props {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n  }\n}\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'stackedBar' | 'spline';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export interface SeriesT {\n    name: string;\n    data: number[] | { x: number; y: number }[];\n    type: SerieTypeT;\n    scale?: string;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    type: AxisTypeT;\n    cols?: number[] | string[] | Date[];\n    //padding?: number;\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    tickValues: number[] | string[] | Date[];\n    tickFormat: () => void | string;\n    tickCount: number;\n    overwriteTicks: boolean;\n  }\n\n  export interface InternalData {\n    key: string;\n    group: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string;\n    color: string;\n    values: {\n      key: string;\n      value: number;\n      position: number;\n    }[];\n  }\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter';\n  }\n\n  export interface DefaultProps {}\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AAkF9C,MAAM,eAAsC,CAAC;AAE7C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,8BAAU,MAAM;AAAA,IACtB,KAAK,8BAAU;AAAA,IACf,QAAQ,8BAAU;AAAA,IAClB,MAAM,8BAAU;AAAA,IAChB,OAAO,8BAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Bars.js

@@ -32,43 +32,45 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Rect = require("./Rect");
 var import_ChartContext = require("../ChartContext");
-var import_FocusableRegion = require("../parts/FocusableRegion");
 const Bars = ({ serie }) => {
   const {
-    props: { xAxis, yAxis, TooltipRenderer },
+    props: { yAxis, TooltipRenderer },
     innerHeight,
     xScale,
     yScale,
+    y2Scale,
     subGroupScale,
-    colorScale
+    colorScale,
+    getXValue,
+    getYValue,
+    chartId
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const isHorizontal = !!yScale.bandwidth;
+  const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
+  const negativeSize = innerHeight - finalYScale(0);
+  const positiveSize = innerHeight - negativeSize;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
     fill: colorScale(serie.name),
+    clipPath: `url(#rect-focus-ring-${chartId})`,
     children: serie.data.map((bar, i) => {
-      const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();
-      const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - yScale(bar.value.y ?? bar.value);
-      const x = !isHorizontal ? xAxis?.cols?.[i] ?? bar.value.x ?? i : bar.value.x ?? bar.value;
-      const y = !isHorizontal ? bar.value.y ?? bar.value : yAxis?.cols?.[i] ?? bar.value.x ?? i;
-      const transformX = isHorizontal ? 0 : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? width / 2 * subGroupScale.domain().length : 0);
-      const transformY = isHorizontal ? subGroupScale(serie.name) + yScale(yAxis?.cols?.[i] ?? i) : yScale(y);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-        transform: `translate(${transformX},${transformY})`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Rect.Rect, {
-            width,
-            height,
-            id: bar.key
-          }),
-          TooltipRenderer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FocusableRegion.FocusableRegion, {
-            id: bar.key,
-            width,
-            height,
-            content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, {
-              data: [{ name: serie.name, yValue: y, xValue: x }]
-            })
-          })
-        ]
+      const x = getXValue(bar);
+      const y = getYValue(bar);
+      const width = subGroupScale?.bandwidth();
+      const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);
+      const transformX = subGroupScale(serie.name) + xScale(x);
+      const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+        id: `${serie.name}-rects`,
+        transform: `translate(${transformX},0)`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Rect.Rect, {
+          name: serie.name,
+          xValue: x,
+          yValue: y,
+          width,
+          height,
+          id: bar.key,
+          y: transformY,
+          isNegative: y < 0
+        })
       }, bar.key);
     })
   });

package/dist/cjs/graphs/Chart/series/Bars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Bars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { ScaleBand } from 'd3';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\nimport { FocusableRegion } from '../parts/FocusableRegion';\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const Bars = ({ serie }: BarsT) => {\n  const {\n    props: { xAxis, yAxis, TooltipRenderer },\n    innerHeight,\n    xScale,\n    yScale,\n    subGroupScale,\n    colorScale,\n  } = useContext(ChartContext);\n\n  const isHorizontal = !!(yScale as ScaleBand<string>).bandwidth;\n  return (\n    <g fill={colorScale(serie.name)}>\n      {serie.data.map((bar, i) => {\n        const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();\n        const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - yScale(bar.value.y ?? bar.value);\n\n        const x = !isHorizontal ? xAxis?.cols?.[i] ?? bar.value.x ?? i : bar.value.x ?? bar.value;\n        const y = !isHorizontal ? bar.value.y ?? bar.value : yAxis?.cols?.[i] ?? bar.value.x ?? i;\n\n        const transformX = isHorizontal\n          ? 0\n          : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n        const transformY = isHorizontal ? subGroupScale(serie.name) + yScale(yAxis?.cols?.[i] ?? i) : yScale(y);\n\n        return (\n          <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n            <Rect width={width} height={height} id={bar.key} />\n            {TooltipRenderer && (\n              <FocusableRegion\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\n            )}\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAE7B,6BAAgC;AAIzB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAa;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO,gBAAgB;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,eAAe,CAAC,CAAE,OAA6B;AACrD,SACE,4CAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAC3B,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,QAAQ,eAAe,OAAO,IAAI,KAAK,IAAI,eAAe,UAAU;AAC1E,YAAM,SAAS,eAAe,eAAe,UAAU,IAAI,cAAc,OAAO,IAAI,MAAM,KAAK,IAAI,KAAK;AAExG,YAAM,IAAI,CAAC,eAAe,OAAO,OAAO,MAAM,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,IAAI;AACpF,YAAM,IAAI,CAAC,eAAe,IAAI,MAAM,KAAK,IAAI,QAAQ,OAAO,OAAO,MAAM,IAAI,MAAM,KAAK;AAExF,YAAM,aAAa,eACf,IACA,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,IAAK,QAAQ,IAAK,cAAc,OAAO,EAAE,SAAS;AACzG,YAAM,aAAa,eAAe,cAAc,MAAM,IAAI,IAAI,OAAO,OAAO,OAAO,MAAM,CAAC,IAAI,OAAO,CAAC;AAEtG,aACE,6CAAC;AAAA,QAAgB,WAAW,aAAa,cAAc;AAAA,QACrD;AAAA,sDAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,WAAK;AAAA,UAChD,mBACC,4CAAC;AAAA,YACC,IAAI,IAAI;AAAA,YACR;AAAA,YACA;AAAA,YACA,SAAS,4CAAC;AAAA,cAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,aAAG;AAAA,WAChF;AAAA;AAAA,SARI,IAAI,GAUZ;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { ScaleBand } from 'd3';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\nimport { FocusableRegion } from '../parts/FocusableRegion';\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const Bars = ({ serie }: BarsT) => {\n  const {\n    props: { yAxis, TooltipRenderer },\n    innerHeight,\n    xScale,\n    yScale,\n    y2Scale,\n    subGroupScale,\n    colorScale,\n    getXValue,\n    getYValue,\n    chartId,\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerHeight - finalYScale(0);\n  const positiveSize = innerHeight - negativeSize;\n\n  return (\n    <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const x = getXValue(bar);\n        const y = getYValue(bar);\n\n        const width = subGroupScale?.bandwidth();\n        const height = y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0);\n\n        const transformX = subGroupScale(serie.name) + xScale(x);\n\n        // @todo find a way to create bars with linear\n        //       scale here is something but conflict with bars like {x: 'Monday', y: 10}\n        // const transformX = isHorizontal\n        //   ? 0\n        //   : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n\n        const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);\n\n        return (\n          <g id={`${serie.name}-rects`} key={bar.key} transform={`translate(${transformX},0)`}>\n            <Rect\n              name={serie.name}\n              xValue={x}\n              yValue={y}\n              width={width}\n              height={height}\n              id={bar.key}\n              y={transformY}\n              isNegative={y < 0}\n            />\n            {/* {TooltipRenderer && (\n              <FocusableRegion\n                transform={`scale(1,-1) translate(0,${-height})`}\n                y={-transformY}\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\n            )} */}\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAA2C;AAE3C,kBAAqB;AACrB,0BAA6B;AAMtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAa;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,gBAAgB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,4CAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAAG,UAAU,wBAAwB;AAAA,IAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AAEvB,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC;AAErF,YAAM,aAAa,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAQvD,YAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,aACE,4CAAC;AAAA,QAAE,IAAI,GAAG,MAAM;AAAA,QAA4B,WAAW,aAAa;AAAA,QAClE,sDAAC;AAAA,UACC,MAAM,MAAM;AAAA,UACZ,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,UACA;AAAA,UACA,IAAI,IAAI;AAAA,UACR,GAAG;AAAA,UACH,YAAY,IAAI;AAAA,SAClB;AAAA,SAViC,IAAI,GAqBvC;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }