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

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useCallback } from "react";
+import { ChartContext } from "../../ChartContext";
+const Controllers = () => {
+  const {
+    props: { xScroll },
+    width,
+    xScale,
+    containerRatio,
+    setContainerRatio,
+    lastPosition,
+    setToolbarRef,
+    setXScrollbarPosition
+  } = useContext(ChartContext);
+  const handleOnClick = useCallback(() => {
+    setContainerRatio(1);
+    setXScrollbarPosition(0);
+    lastPosition.current = 0;
+  }, [lastPosition, setContainerRatio, setXScrollbarPosition]);
+  if (xScale.bandwidth)
+    return null;
+  if (!xScroll)
+    return null;
+  return /* @__PURE__ */ 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__ */ jsx("rect", {
+        width: "17",
+        height: "17",
+        fill: "white",
+        stroke: "#c0c0c0",
+        strokeWidth: "1"
+      }),
+      /* @__PURE__ */ 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"
+      })
+    ]
+  });
+};
+export {
+  Controllers
+};
+//# sourceMappingURL=Controllers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/Controllers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,mBAAmB;AAC/C,SAAS,oBAAoB;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,IAAI,WAAW,YAAY;AAE3B,QAAM,gBAAgB,YAAY,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,qBAAC;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,0BAAC;AAAA,QAAK,OAAM;AAAA,QAAK,QAAO;AAAA,QAAK,MAAK;AAAA,QAAQ,QAAO;AAAA,QAAU,aAAY;AAAA,OAAI;AAAA,MAC3E,oBAAC;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,QACL,QAAO;AAAA,QACP,eAAc;AAAA,QACd,aAAY;AAAA,OACb;AAAA;AAAA,GACH;AAEJ;",
+  "names": []
+}

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

@@ -15,11 +15,12 @@ const ScrollBarX = () => {
     containerRatio,
     setScrapperPosX,
     isScrollbarVisible,
-    oldLastPosition
+    lastPosition
   } = useContext(ChartContext);
   const barWidth = useMemo(() => innerWidth / containerRatio, [containerRatio, innerWidth]);
   const handleMouseDown = useCallback(
     (e) => {
+      e.stopPropagation();
       setScrapperPosX("");
       setIsGrabbed(true);
       setStartPosition(e.clientX);
@@ -42,10 +43,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 = useMemo(
     () => (isScrollbarVisible || activePoint) && containerRatio > 1,

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

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

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

@@ -16,7 +16,7 @@ const ScrollBarY = () => {
     setScrapperPosX,
     setScrapperPosY,
     isScrollbarVisible,
-    oldLastPosition
+    lastPosition
   } = useContext(ChartContext);
   const barHeight = useMemo(() => parseInt(innerHeight / containerRatio, 10), [containerRatio, innerHeight]);
   const handleMouseDown = useCallback(
@@ -47,10 +47,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 = useMemo(
     () => (isScrollbarVisible || activePoint) && containerRatio > 1,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/ScrollBarY.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,oBAAoB;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,QAAQ,MAAM,SAAS,cAAc,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,WAAW,CAAC;AAEzG,QAAM,kBAAkB;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,mBAAmB;AAAA,IACvB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAAA,IACpB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,MAAwB;AACvB,UAAI,cAAc;AAClB,YAAM,MAAM,EAAE;AACd,YAAM,SAAS,IAAI,sBAAsB;AACzC,YAAM,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,eAAe;AAAA,IACnB,OAAO,sBAAsB,gBAAgB,iBAAiB;AAAA,IAC9D,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,EAClD;AAEA,SACE,qBAAC;AAAA,IACC,WAAU;AAAA,IACV,WAAU;AAAA,IACV,OAAO,EAAE,YAAY,eAAe,YAAY,SAAS;AAAA,IACzD,cAAc;AAAA,IAEd;AAAA,0BAAC;AAAA,QACC,OAAO,EAAE,QAAQ,UAAU;AAAA,QAC3B,OAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS;AAAA,OACX;AAAA,MACA,oBAAC;AAAA,QAAE,WAAW,eAAe;AAAA,QAC3B,8BAAC;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": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,oBAAoB;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,QAAQ,MAAM,SAAS,cAAc,gBAAgB,EAAE,GAAG,CAAC,gBAAgB,WAAW,CAAC;AAEzG,QAAM,kBAAkB;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,mBAAmB;AAAA,IACvB,CAAC,MAAwB;AACvB,sBAAgB,EAAE;AAAA,IACpB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,MAAwB;AACvB,UAAI,cAAc;AAClB,YAAM,MAAM,EAAE;AACd,YAAM,SAAS,IAAI,sBAAsB;AACzC,YAAM,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,eAAe;AAAA,IACnB,OAAO,sBAAsB,gBAAgB,iBAAiB;AAAA,IAC9D,CAAC,aAAa,gBAAgB,kBAAkB;AAAA,EAClD;AAEA,SACE,qBAAC;AAAA,IACC,WAAU;AAAA,IACV,WAAU;AAAA,IACV,OAAO,EAAE,YAAY,eAAe,YAAY,SAAS;AAAA,IACzD,cAAc;AAAA,IAEd;AAAA,0BAAC;AAAA,QACC,OAAO,EAAE,QAAQ,UAAU;AAAA,QAC3B,OAAM;AAAA,QACN,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS;AAAA,OACX;AAAA,MACA,oBAAC;AAAA,QAAE,WAAW,eAAe;AAAA,QAC3B,8BAAC;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": []
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
+import { useContext, useState, useCallback, useMemo } from "react";
 import { ChartContext } from "../../ChartContext";
 import { AxisBottom } from "../Axis/AxisBottom";
 import { SeriesFactory } from "../SeriesFactory";
@@ -12,6 +12,13 @@ const ScrollableContainerX = () => {
     props: { scrapper },
     xScrollbarPosition,
     containerRatio,
+    innerWidth,
+    isGrabbed,
+    setXScrollbarPosition,
+    setContainerRatio,
+    lastPosition,
+    innerHeight,
+    internalMargin,
     chartId
   } = useContext(ChartContext);
   const Scrappers = useMemo(() => {
@@ -21,19 +28,82 @@ const ScrollableContainerX = () => {
       return /* @__PURE__ */ jsx(VerticalScrapper, {});
     return null;
   }, [scrapper?.type]);
+  const [isZooming, setIsZooming] = useState(false);
+  const [startingPosition, setStartingPosition] = useState(0);
+  const [movingPosition, setMovingPosition] = useState(0);
+  const handleOnMouseDown = useCallback(
+    (e) => {
+      if (!isGrabbed) {
+        setIsZooming(true);
+        setStartingPosition(e.clientX);
+        setMovingPosition(0);
+      }
+    },
+    [isGrabbed]
+  );
+  const handleOnMouseMove = useCallback(
+    ({ clientX }) => {
+      if (isZooming)
+        setMovingPosition(clientX);
+    },
+    [isZooming]
+  );
+  const handleOnMouseUp = useCallback(
+    (e) => {
+      const bounds = e.currentTarget.closest("div").getBoundingClientRect();
+      if (!isZooming)
+        return;
+      setIsZooming(false);
+      const endingPosition = e.clientX;
+      const diff = Math.abs(startingPosition - endingPosition);
+      if (diff <= 0)
+        return;
+      const newRatio = innerWidth / (innerWidth * containerRatio / diff) < 40 ? innerWidth / 40 : innerWidth * containerRatio / diff;
+      const newPosition = lastPosition?.current + ((startingPosition > endingPosition ? endingPosition : startingPosition) - bounds.left - internalMargin.left) / containerRatio;
+      if (newPosition > innerWidth - innerWidth / newRatio)
+        setXScrollbarPosition(innerWidth - innerWidth / newRatio);
+      else
+        setXScrollbarPosition(newPosition);
+      setContainerRatio(newRatio);
+      lastPosition.current = newPosition;
+      e.stopPropagation();
+    },
+    [
+      containerRatio,
+      innerWidth,
+      isZooming,
+      internalMargin,
+      lastPosition,
+      setContainerRatio,
+      setXScrollbarPosition,
+      startingPosition
+    ]
+  );
   return /* @__PURE__ */ jsxs("g", {
     className: "scrollable-container-x",
+    onMouseDown: handleOnMouseDown,
+    onMouseMove: handleOnMouseMove,
+    onMouseUp: handleOnMouseUp,
     children: [
-      /* @__PURE__ */ jsx("g", {
+      /* @__PURE__ */ jsxs("g", {
         mask: `url(#mask-${chartId})`,
-        children: /* @__PURE__ */ jsxs("g", {
-          transform: `translate(${-xScrollbarPosition * containerRatio},0)`,
-          children: [
-            /* @__PURE__ */ jsx(SeriesFactory, {}),
-            Scrappers,
-            /* @__PURE__ */ jsx(AxisBottom, {})
-          ]
-        })
+        children: [
+          /* @__PURE__ */ jsxs("g", {
+            transform: `translate(${-xScrollbarPosition * containerRatio},0)`,
+            children: [
+              /* @__PURE__ */ jsx(SeriesFactory, {}),
+              Scrappers,
+              /* @__PURE__ */ jsx(AxisBottom, {})
+            ]
+          }),
+          isZooming && movingPosition !== 0 ? /* @__PURE__ */ jsx("rect", {
+            x: (movingPosition < startingPosition ? movingPosition : startingPosition) - internalMargin.left,
+            width: Math.abs(movingPosition - startingPosition),
+            height: innerHeight,
+            fill: "orange",
+            style: { opacity: 0.2 }
+          }) : null
+        ]
       }),
       /* @__PURE__ */ jsx(ScrollBarX, {})
     ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { AxisBottom } from '../Axis/AxisBottom';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarX } from './ScrollBarX';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    containerRatio,\n    chartId,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  return (\n    <g className=\"scrollable-container-x\">\n      <g mask={`url(#mask-${chartId})`}>\n        <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n          <SeriesFactory />\n          {Scrappers}\n          <AxisBottom />\n        </g>\n      </g>\n      <ScrollBarX />\n      {/* <defs>\n        <clipPath id={`scroll-clip-x-${chartId}`}>\n          <path\n            d={`M 0 -10 \n            H ${innerWidth} \n            V ${innerHeight + 2} \n            L ${innerWidth + 10}  ${innerHeight + 2} \n            L ${innerWidth + 10}  ${height} \n            L -10 ${height} \n            L -10 ${innerHeight}  \n            L 0 ${innerHeight}  \n            L 0 -10`}\n          />\n        </clipPath>\n      </defs> */}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAC1B,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,oBAAC,YAAS;AACtD,QAAI,UAAU,SAAS;AAAY,aAAO,oBAAC,oBAAiB;AAC5D,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,qBAAC;AAAA,IAAE,WAAU;AAAA,IACX;AAAA,0BAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB,+BAAC;AAAA,UAAE,WAAW,aAAa,CAAC,qBAAqB;AAAA,UAC/C;AAAA,gCAAC,iBAAc;AAAA,YACd;AAAA,YACD,oBAAC,cAAW;AAAA;AAAA,SACd;AAAA,OACF;AAAA,MACA,oBAAC,cAAW;AAAA;AAAA,GAgBd;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useState, useCallback, 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';\nimport { Controllers } from './Controllers';\nexport const ScrollableContainerX = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    containerRatio,\n    innerWidth,\n    isGrabbed,\n    setXScrollbarPosition,\n    setContainerRatio,\n    lastPosition,\n    innerHeight,\n    internalMargin,\n    chartId,\n  } = useContext(ChartContext);\n\n  const Scrappers = useMemo(() => {\n    if (scrapper?.type === 'horizontal') return <Scrapper />;\n    if (scrapper?.type === 'vertical') return <VerticalScrapper />;\n    return null;\n  }, [scrapper?.type]);\n\n  const [isZooming, setIsZooming] = useState(false);\n  const [startingPosition, setStartingPosition] = useState(0);\n  const [movingPosition, setMovingPosition] = useState(0);\n\n  const handleOnMouseDown: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) {\n        setIsZooming(true);\n        setStartingPosition(e.clientX);\n        setMovingPosition(0);\n      }\n    },\n    [isGrabbed],\n  );\n  const handleOnMouseMove: React.MouseEventHandler = useCallback(\n    ({ clientX }) => {\n      if (isZooming) setMovingPosition(clientX);\n    },\n    [isZooming],\n  );\n  const handleOnMouseUp: React.MouseEventHandler = useCallback(\n    (e) => {\n      const bounds = e.currentTarget.closest('div').getBoundingClientRect();\n      if (!isZooming) return;\n      setIsZooming(false);\n      const endingPosition = e.clientX;\n\n      const diff = Math.abs(startingPosition - endingPosition);\n      if (diff <= 0) return;\n      const newRatio =\n        innerWidth / ((innerWidth * containerRatio) / diff) < 40\n          ? innerWidth / 40\n          : (innerWidth * containerRatio) / diff;\n      const newPosition =\n        lastPosition?.current +\n        ((startingPosition > endingPosition ? endingPosition : startingPosition) - bounds.left - internalMargin.left) /\n          containerRatio;\n\n      // if (newPosition < 0) setXScrollbarPosition(0);\n      // if is bigger thant innerwidth possible we force the end\n      if (newPosition > innerWidth - innerWidth / newRatio) setXScrollbarPosition(innerWidth - innerWidth / newRatio);\n      else setXScrollbarPosition(newPosition);\n\n      setContainerRatio(newRatio);\n      lastPosition.current = newPosition;\n      e.stopPropagation();\n    },\n    [\n      containerRatio,\n      innerWidth,\n      isZooming,\n      internalMargin,\n      lastPosition,\n      setContainerRatio,\n      setXScrollbarPosition,\n      startingPosition,\n    ],\n  );\n  return (\n    <g\n      className=\"scrollable-container-x\"\n      onMouseDown={handleOnMouseDown}\n      onMouseMove={handleOnMouseMove}\n      onMouseUp={handleOnMouseUp}\n    >\n      <g mask={`url(#mask-${chartId})`}>\n        <g transform={`translate(${-xScrollbarPosition * containerRatio},0)`}>\n          <SeriesFactory />\n          {Scrappers}\n          <AxisBottom />\n        </g>\n        {isZooming && movingPosition !== 0 ? (\n          <rect\n            x={(movingPosition < startingPosition ? movingPosition : startingPosition) - internalMargin.left}\n            width={Math.abs(movingPosition - startingPosition)}\n            height={innerHeight}\n            fill=\"orange\"\n            style={{ opacity: 0.2 }}\n          />\n        ) : null}\n      </g>\n      <ScrollBarX />\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,UAAU,aAAa,eAAe;AAClE,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAE1B,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,oBAAC,YAAS;AACtD,QAAI,UAAU,SAAS;AAAY,aAAO,oBAAC,oBAAiB;AAC5D,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,CAAC;AAC1D,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAEtD,QAAM,oBAA6C;AAAA,IACjD,CAAC,MAAM;AACL,UAAI,CAAC,WAAW;AACd,qBAAa,IAAI;AACjB,4BAAoB,EAAE,OAAO;AAC7B,0BAAkB,CAAC;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,oBAA6C;AAAA,IACjD,CAAC,EAAE,QAAQ,MAAM;AACf,UAAI;AAAW,0BAAkB,OAAO;AAAA,IAC1C;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AACA,QAAM,kBAA2C;AAAA,IAC/C,CAAC,MAAM;AACL,YAAM,SAAS,EAAE,cAAc,QAAQ,KAAK,EAAE,sBAAsB;AACpE,UAAI,CAAC;AAAW;AAChB,mBAAa,KAAK;AAClB,YAAM,iBAAiB,EAAE;AAEzB,YAAM,OAAO,KAAK,IAAI,mBAAmB,cAAc;AACvD,UAAI,QAAQ;AAAG;AACf,YAAM,WACJ,cAAe,aAAa,iBAAkB,QAAQ,KAClD,aAAa,KACZ,aAAa,iBAAkB;AACtC,YAAM,cACJ,cAAc,YACZ,mBAAmB,iBAAiB,iBAAiB,oBAAoB,OAAO,OAAO,eAAe,QACtG;AAIJ,UAAI,cAAc,aAAa,aAAa;AAAU,8BAAsB,aAAa,aAAa,QAAQ;AAAA;AACzG,8BAAsB,WAAW;AAEtC,wBAAkB,QAAQ;AAC1B,mBAAa,UAAU;AACvB,QAAE,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SACE,qBAAC;AAAA,IACC,WAAU;AAAA,IACV,aAAa;AAAA,IACb,aAAa;AAAA,IACb,WAAW;AAAA,IAEX;AAAA,2BAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB;AAAA,+BAAC;AAAA,YAAE,WAAW,aAAa,CAAC,qBAAqB;AAAA,YAC/C;AAAA,kCAAC,iBAAc;AAAA,cACd;AAAA,cACD,oBAAC,cAAW;AAAA;AAAA,WACd;AAAA,UACC,aAAa,mBAAmB,IAC/B,oBAAC;AAAA,YACC,IAAI,iBAAiB,mBAAmB,iBAAiB,oBAAoB,eAAe;AAAA,YAC5F,OAAO,KAAK,IAAI,iBAAiB,gBAAgB;AAAA,YACjD,QAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAO,EAAE,SAAS,IAAI;AAAA,WACxB,IACE;AAAA;AAAA,OACN;AAAA,MACA,oBAAC,cAAW;AAAA;AAAA,GACd;AAEJ;",
   "names": []
 }

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

@@ -9,13 +9,14 @@ import { VerticalScrapper } from "../Scrapper/VerticalScrapper";
 import { AxisLeft } from "../Axis/AxisLeft";
 const ScrollableContainerY = () => {
   const {
-    props: { scrapper, height, width },
+    props: { scrapper },
     xScrollbarPosition,
     containerRatio,
     innerHeight,
     innerWidth,
     internalMargin,
-    chartId
+    chartId,
+    width
   } = useContext(ChartContext);
   const Scrappers = useMemo(() => {
     if (scrapper?.type === "horizontal")
@@ -25,30 +26,20 @@ const ScrollableContainerY = () => {
     return null;
   }, [scrapper?.type]);
   return /* @__PURE__ */ jsxs("g", {
-    className: "scrollable-container-x",
-    clipPath: `url(#scroll-clip-y-${chartId})`,
+    className: "scrollable-container-y",
     children: [
-      /* @__PURE__ */ jsxs("g", {
-        transform: `translate(0,${-xScrollbarPosition * containerRatio})`,
-        children: [
-          /* @__PURE__ */ jsx(AxisLeft, {}),
-          /* @__PURE__ */ jsx(SeriesFactory, {}),
-          Scrappers
-        ]
-      }),
-      /* @__PURE__ */ jsx(ScrollBarY, {}),
-      /* @__PURE__ */ jsx("defs", {
-        children: /* @__PURE__ */ jsx("clipPath", {
-          id: `scroll-clip-y-${chartId}`,
-          children: /* @__PURE__ */ jsx("path", {
-            d: `M ${-internalMargin.left} 0 
-            H ${width} 
-            V ${innerHeight - 1} 
-            L ${-internalMargin.left} ${innerHeight - 1}
-            L ${-internalMargin.left}  0`
-          })
+      /* @__PURE__ */ jsx("g", {
+        mask: `url(#mask-y-${chartId})`,
+        children: /* @__PURE__ */ jsxs("g", {
+          transform: `translate(0,${-xScrollbarPosition * containerRatio})`,
+          children: [
+            /* @__PURE__ */ jsx(SeriesFactory, {}),
+            Scrappers,
+            /* @__PURE__ */ jsx(AxisLeft, {})
+          ]
         })
-      })
+      }),
+      /* @__PURE__ */ jsx(ScrollBarY, {})
     ]
   });
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/ScrollableContainerY.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarY } from './ScrollBarY';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nimport { AxisLeft } from '../Axis/AxisLeft';\nexport const ScrollableContainerY = () => {\n  const {\n    props: { scrapper, height, width },\n    xScrollbarPosition,\n    containerRatio,\n    innerHeight,\n    innerWidth,\n    internalMargin,\n    chartId,\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(#scroll-clip-y-${chartId})`}>\n      <g transform={`translate(0,${-xScrollbarPosition * containerRatio})`}>\n        <AxisLeft />\n        <SeriesFactory />\n        {Scrappers}\n      </g>\n      <ScrollBarY />\n\n      <defs>\n        <clipPath id={`scroll-clip-y-${chartId}`}>\n          <path\n            d={`M ${-internalMargin.left} 0 \n            H ${width} \n            V ${innerHeight - 1} \n            L ${-internalMargin.left} ${innerHeight - 1}\n            L ${-internalMargin.left}  0`}\n          />\n        </clipPath>\n      </defs>\n    </g>\n  );\n};\n\n// L ${innerWidth + 10}  ${innerHeight + 2}\n// L ${innerWidth + 10}  ${height}\n// L -10 ${height}\n// L -10 ${innerHeight}\n// L 0 ${innerHeight}\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AAClB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,UAAU,QAAQ,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,oBAAC,YAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,oBAAC,oBAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,qBAAC;AAAA,IAAE,WAAU;AAAA,IAAyB,UAAU,sBAAsB;AAAA,IACpE;AAAA,2BAAC;AAAA,QAAE,WAAW,eAAe,CAAC,qBAAqB;AAAA,QACjD;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC,iBAAc;AAAA,UACd;AAAA;AAAA,OACH;AAAA,MACA,oBAAC,cAAW;AAAA,MAEZ,oBAAC;AAAA,QACC,8BAAC;AAAA,UAAS,IAAI,iBAAiB;AAAA,UAC7B,8BAAC;AAAA,YACC,GAAG,KAAK,CAAC,eAAe;AAAA,gBACpB;AAAA,gBACA,cAAc;AAAA,gBACd,CAAC,eAAe,QAAQ,cAAc;AAAA,gBACtC,CAAC,eAAe;AAAA,WACtB;AAAA,SACF;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { SeriesFactory } from '../SeriesFactory';\nimport { ScrollBarY } from './ScrollBarY';\nimport { Scrapper } from '../Scrapper/Scrapper';\nimport { VerticalScrapper } from '../Scrapper/VerticalScrapper';\nimport { AxisLeft } from '../Axis/AxisLeft';\nexport const ScrollableContainerY = () => {\n  const {\n    props: { scrapper },\n    xScrollbarPosition,\n    containerRatio,\n    innerHeight,\n    innerWidth,\n    internalMargin,\n    chartId,\n    width,\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-y\">\n      <g mask={`url(#mask-y-${chartId})`}>\n        <g transform={`translate(0,${-xScrollbarPosition * containerRatio})`}>\n          <SeriesFactory />\n          {Scrappers}\n          <AxisLeft />\n        </g>\n      </g>\n      <ScrollBarY />\n\n      {/* <defs>\n        <clipPath id={`scroll-clip-y-${chartId}`}>\n          <path\n            d={`M ${-internalMargin.left} 0 \n            H ${width} \n            V ${innerHeight - 1} \n            L ${-internalMargin.left} ${innerHeight - 1}\n            L ${-internalMargin.left}  0`}\n          />\n        </clipPath>\n      </defs> */}\n    </g>\n  );\n};\n\n// L ${innerWidth + 10}  ${innerHeight + 2}\n// L ${innerWidth + 10}  ${height}\n// L -10 ${height}\n// L -10 ${innerHeight}\n// L 0 ${innerHeight}\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AAClB,MAAM,uBAAuB,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,UAAU,SAAS;AAAc,aAAO,oBAAC,YAAS;AAAA,aAC7C,UAAU,SAAS;AAAY,aAAO,oBAAC,oBAAiB;AACjE,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE,qBAAC;AAAA,IAAE,WAAU;AAAA,IACX;AAAA,0BAAC;AAAA,QAAE,MAAM,eAAe;AAAA,QACtB,+BAAC;AAAA,UAAE,WAAW,eAAe,CAAC,qBAAqB;AAAA,UACjD;AAAA,gCAAC,iBAAc;AAAA,YACd;AAAA,YACD,oBAAC,YAAS;AAAA;AAAA,SACZ;AAAA,OACF;AAAA,MACA,oBAAC,cAAW;AAAA;AAAA,GAad;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/SeriesFactory.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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, HorizontalBars, HorizontalStackedBars } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { useVirtualizedSeries } from '../helpers/useVirtualizedSeries';\n\nexport const SeriesFactory = () => {\n  const {\n    props: { groups, types },\n    isHorizontal,\n  } = useContext(ChartContext);\n\n  const virtualizedSeries = useVirtualizedSeries();\n  return useMemo(\n    () => (\n      <g className=\"content\">\n        {/* <g className=\"content\"> */}\n        {virtualizedSeries.map((serie) => {\n          const serieProps = {\n            key: serie.key,\n            serie,\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 null;\n        })}\n      </g>\n    ),\n    [groups, isHorizontal, types, virtualizedSeries],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,MAAM,QAAQ,MAAM,YAAY,MAAM,gBAAgB,6BAA6B;AAC5F,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAE9B,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,MAAM;AAAA,IACvB;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,oBAAoB,qBAAqB;AAC/C,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,WAAU;AAAA,MAEV,4BAAkB,IAAI,CAAC,UAAU;AAChC,cAAM,aAAa;AAAA,UACjB,KAAK,MAAM;AAAA,UACX;AAAA,QACF;AACA,YAAI,MAAM,SAAS,SAAS,UAAU,gBAAgB,QAAQ,MAAM,IAAI,IAAI,MAAM,cAAc;AAC9F,iBAAO,oBAAC;AAAA,YAAuB,GAAG;AAAA,WAAY;AAAA,QAChD;AACA,YAAI,MAAM,SAAS,SAAS,UAAU,gBAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,iBAAO,oBAAC;AAAA,YAAY,GAAG;AAAA,WAAY;AAAA,QACrC;AACA,YAAI,MAAM,SAAS,SAAS,cAAc;AACxC,iBAAO,oBAAC;AAAA,YAAgB,GAAG;AAAA,WAAY;AAAA,QACzC;AACA,YAAI,MAAM,SAAS,OAAO;AACxB,iBAAO,oBAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,iBAAO,oBAAC;AAAA,YAAQ,GAAG;AAAA,WAAY;AAAA,QACjC;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,oBAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,oBAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,eAAO;AAAA,MACT,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,QAAQ,cAAc,OAAO,iBAAiB;AAAA,EACjD;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useState, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area, HorizontalBars, HorizontalStackedBars } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { useVirtualizedSeries } from '../helpers/useVirtualizedSeries';\n\nexport const SeriesFactory = () => {\n  const {\n    props: { groups, types },\n    isHorizontal,\n  } = useContext(ChartContext);\n\n  const virtualizedSeries = useVirtualizedSeries();\n\n  return useMemo(\n    () => (\n      <g className=\"content\">\n        {/* <g className=\"content\"> */}\n        {virtualizedSeries.map((serie) => {\n          const serieProps = {\n            key: serie.key,\n            serie,\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 null;\n        })}\n      </g>\n    ),\n    [groups, isHorizontal, types, virtualizedSeries],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,SAAgB,YAAmC,eAAe;AAClE,SAAS,oBAAoB;AAC7B,SAAS,MAAM,QAAQ,MAAM,YAAY,MAAM,gBAAgB,6BAA6B;AAC5F,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAE9B,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,MAAM;AAAA,IACvB;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,oBAAoB,qBAAqB;AAE/C,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,WAAU;AAAA,MAEV,4BAAkB,IAAI,CAAC,UAAU;AAChC,cAAM,aAAa;AAAA,UACjB,KAAK,MAAM;AAAA,UACX;AAAA,QACF;AACA,YAAI,MAAM,SAAS,SAAS,UAAU,gBAAgB,QAAQ,MAAM,IAAI,IAAI,MAAM,cAAc;AAC9F,iBAAO,oBAAC;AAAA,YAAuB,GAAG;AAAA,WAAY;AAAA,QAChD;AACA,YAAI,MAAM,SAAS,SAAS,UAAU,gBAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,iBAAO,oBAAC;AAAA,YAAY,GAAG;AAAA,WAAY;AAAA,QACrC;AACA,YAAI,MAAM,SAAS,SAAS,cAAc;AACxC,iBAAO,oBAAC;AAAA,YAAgB,GAAG;AAAA,WAAY;AAAA,QACzC;AACA,YAAI,MAAM,SAAS,OAAO;AACxB,iBAAO,oBAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,iBAAO,oBAAC;AAAA,YAAQ,GAAG;AAAA,WAAY;AAAA,QACjC;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,oBAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,YAAI,MAAM,SAAS,QAAQ;AACzB,iBAAO,oBAAC;AAAA,YAAM,GAAG;AAAA,WAAY;AAAA,QAC/B;AACA,eAAO;AAAA,MACT,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,QAAQ,cAAc,OAAO,iBAAiB;AAAA,EACjD;AACF;",
   "names": []
 }

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ChartContext } from "../ChartContext";
+const TrendHighlight = ({ currentDatum }) => {
+  const { currentData, xScale, getXScaleValue, getYScaleValue, yScale } = useContext(ChartContext);
+  const prevPoint = currentData?.find((serie) => serie.name === currentDatum.serie && serie.type === "line")?.data?.find((datum) => datum.position === currentDatum.position - 1);
+  if (!prevPoint || prevPoint?.length === 0)
+    return null;
+  const xCurrentPosition = getXScaleValue(currentDatum);
+  const yCurrentPosition = getYScaleValue(currentDatum);
+  const xPreviousPosition = getXScaleValue(prevPoint);
+  const yPreviousPosition = getYScaleValue(prevPoint);
+  return /* @__PURE__ */ jsx("line", {
+    strokeWidth: "2",
+    stroke: yPreviousPosition > yCurrentPosition ? "green" : "red",
+    x1: xPreviousPosition,
+    x2: xCurrentPosition,
+    y1: yPreviousPosition,
+    y2: yCurrentPosition
+  });
+};
+export {
+  TrendHighlight
+};
+//# sourceMappingURL=TrendHighlight.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/TrendHighlight.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const TrendHighlight = ({ currentDatum }) => {\n  const { currentData, xScale, getXScaleValue, getYScaleValue, yScale } = useContext(ChartContext);\n\n  const prevPoint = currentData\n    ?.find((serie) => serie.name === currentDatum.serie && serie.type === 'line')\n    ?.data?.find((datum) => datum.position === currentDatum.position - 1);\n\n  if (!prevPoint || prevPoint?.length === 0) return null;\n  // const offset = xScale.bandwidth ? xScale.bandwidth() / 2 : 0;\n\n  const xCurrentPosition = getXScaleValue(currentDatum);\n  const yCurrentPosition = getYScaleValue(currentDatum);\n  const xPreviousPosition = getXScaleValue(prevPoint);\n  const yPreviousPosition = getYScaleValue(prevPoint);\n\n  return (\n    <line\n      strokeWidth=\"2\"\n      stroke={yPreviousPosition > yCurrentPosition ? 'green' : 'red'}\n      x1={xPreviousPosition}\n      x2={xCurrentPosition}\n      y1={yPreviousPosition}\n      y2={yCurrentPosition}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAGtB,MAAM,iBAAiB,CAAC,EAAE,aAAa,MAAM;AAClD,QAAM,EAAE,aAAa,QAAQ,gBAAgB,gBAAgB,OAAO,IAAI,WAAW,YAAY;AAE/F,QAAM,YAAY,aACd,KAAK,CAAC,UAAU,MAAM,SAAS,aAAa,SAAS,MAAM,SAAS,MAAM,GAC1E,MAAM,KAAK,CAAC,UAAU,MAAM,aAAa,aAAa,WAAW,CAAC;AAEtE,MAAI,CAAC,aAAa,WAAW,WAAW;AAAG,WAAO;AAGlD,QAAM,mBAAmB,eAAe,YAAY;AACpD,QAAM,mBAAmB,eAAe,YAAY;AACpD,QAAM,oBAAoB,eAAe,SAAS;AAClD,QAAM,oBAAoB,eAAe,SAAS;AAElD,SACE,oBAAC;AAAA,IACC,aAAY;AAAA,IACZ,QAAQ,oBAAoB,mBAAmB,UAAU;AAAA,IACzD,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,GACN;AAEJ;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color?: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: string;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface AxisTickT {\n    tickValues: number[] | Date[];\n    tickFormat: () => void | string;\n    tickCount: number;\n    tickRotation: number;\n    overwriteTicks: boolean;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    label: string;\n    type: AxisTypeT;\n    cols?: string[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    advanced: {\n      pointSpacing: {\n        type: 'string';\n        value: number;\n      };\n    };\n    tick: AxisTickT;\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string | undefined;\n    color?: string;\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export type InternalData = InternalSerie[];\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper: ScrapperT;\n  }\n\n  export interface DefaultProps {}\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AAyG9C,MAAM,eAAsC,CAAC;AAE7C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,UAAU,MAAM;AAAA,IACtB,KAAK,UAAU;AAAA,IACf,QAAQ,UAAU;AAAA,IAClB,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color?: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: string;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface AxisTickT {\n    tickValues: number[] | Date[];\n    tickFormat: () => void | string;\n    tickCount: number;\n    tickRotation: number;\n    overwriteTicks: boolean;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    label: string;\n    type: AxisTypeT;\n    cols?: string[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    advanced: {\n      pointSpacing: {\n        type: 'string';\n        value: number;\n      };\n    };\n    tick: AxisTickT;\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string | undefined;\n    color?: string;\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export type InternalData = InternalSerie[];\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper: ScrapperT;\n    withTrendHighlight: boolean;\n    TooltipRenderer: () => JSX.Element;\n  }\n\n  export interface DefaultProps {}\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AA2G9C,MAAM,eAAsC,CAAC;AAE7C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,UAAU,MAAM;AAAA,IACtB,KAAK,UAAU;AAAA,IACf,QAAQ,UAAU;AAAA,IAClB,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
   "names": []
 }

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

@@ -40,7 +40,8 @@ const Bars = ({ serie }) => {
           height,
           id: bar.key,
           y: transformY,
-          isNegative: y < 0
+          isNegative: y < 0,
+          datum: bar
         })
       }, bar.key);
     })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Bars.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\n\nexport const Bars = ({ serie }) => {\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAGtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,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,IAAI,WAAW,YAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,oBAAC;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,oBAAC;AAAA,QAAE,IAAI,GAAG,MAAM;AAAA,QAA4B,WAAW,aAAa;AAAA,QAClE,8BAAC;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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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';\n\nexport const Bars = ({ serie }) => {\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              datum={bar}\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAGtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,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,IAAI,WAAW,YAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,oBAAC;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,oBAAC;AAAA,QAAE,IAAI,GAAG,MAAM;AAAA,QAA4B,WAAW,aAAa;AAAA,QAClE,8BAAC;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,UAChB,OAAO;AAAA,SACT;AAAA,SAXiC,IAAI,GAsBvC;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

package/dist/esm/graphs/Chart/series/HorizontalBars.js

@@ -4,8 +4,10 @@ import { useContext, useMemo } from "react";
 import { Rect } from "./Rect";
 import { ChartContext } from "../ChartContext";
 const HorizontalBars = ({ serie }) => {
-  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } = useContext(ChartContext);
+  const { xScale, yScale, innerWidth, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } = useContext(ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
+  const negativeSize = innerWidth - xScale(0);
+  const positiveSize = innerWidth - negativeSize;
   return useMemo(
     () => /* @__PURE__ */ jsx("g", {
       fill: colorScale(serie.name),
@@ -13,12 +15,14 @@ const HorizontalBars = ({ serie }) => {
       children: serie.data.map((bar, i) => {
         const x = getXValue(bar);
         const y = getYValue(bar);
-        const width = xScale(x);
+        const width = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(0);
         const height = subGroupScale?.bandwidth();
+        const transformX = x < 0 ? xScale(0) - width : xScale(0);
         const transformY = subGroupScale(serie.name) + finalYScale(y);
         return /* @__PURE__ */ jsx("g", {
-          transform: `translate(0,${transformY})`,
+          transform: `translate(${transformX},${transformY})`,
           children: /* @__PURE__ */ jsx(Rect, {
+            datum: bar,
             name: serie.name,
             width,
             height,
@@ -30,7 +34,18 @@ const HorizontalBars = ({ serie }) => {
         }, bar.key);
       })
     }),
-    [chartId, colorScale, finalYScale, getXValue, getYValue, serie.data, serie.name, subGroupScale, xScale]
+    [
+      chartId,
+      colorScale,
+      finalYScale,
+      getXValue,
+      getYValue,
+      positiveSize,
+      serie.data,
+      serie.name,
+      subGroupScale,
+      xScale
+    ]
   );
 };
 export {

package/dist/esm/graphs/Chart/series/HorizontalBars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/HorizontalBars.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } =\n    useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  return useMemo(\n    () => (\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 = xScale(x);\n          const height = subGroupScale?.bandwidth();\n\n          const transformY = subGroupScale(serie.name) + finalYScale(y);\n\n          return (\n            <g key={bar.key} transform={`translate(0,${transformY})`}>\n              <Rect name={serie.name} width={width} height={height} id={bar.key} x={0} xValue={x} yValue={y} />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [chartId, colorScale, finalYScale, getXValue, getYValue, serie.data, serie.name, subGroupScale, xScale],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,YAAY,eAAe;AAC3C,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAGtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAgC;AACrE,QAAM,EAAE,QAAQ,QAAQ,SAAS,eAAe,YAAY,WAAW,WAAW,QAAQ,IACxF,WAAW,YAAY;AACzB,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAAG,UAAU,wBAAwB;AAAA,MAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,cAAM,IAAI,UAAU,GAAG;AACvB,cAAM,IAAI,UAAU,GAAG;AAEvB,cAAM,QAAQ,OAAO,CAAC;AACtB,cAAM,SAAS,eAAe,UAAU;AAExC,cAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,CAAC;AAE5D,eACE,oBAAC;AAAA,UAAgB,WAAW,eAAe;AAAA,UACzC,8BAAC;AAAA,YAAK,MAAM,MAAM;AAAA,YAAM;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,YAAK,GAAG;AAAA,YAAG,QAAQ;AAAA,YAAG,QAAQ;AAAA,WAAG;AAAA,WADzF,IAAI,GAEZ;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,SAAS,YAAY,aAAa,WAAW,WAAW,MAAM,MAAM,MAAM,MAAM,eAAe,MAAM;AAAA,EACxG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const { xScale, yScale, innerWidth, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } =\n    useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerWidth - xScale(0);\n  const positiveSize = innerWidth - negativeSize;\n\n  return useMemo(\n    () => (\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 = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(0);\n          const height = subGroupScale?.bandwidth();\n          const transformX = x < 0 ? xScale(0) - width : xScale(0);\n          const transformY = subGroupScale(serie.name) + finalYScale(y);\n\n          return (\n            <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n              <Rect\n                datum={bar}\n                name={serie.name}\n                width={width}\n                height={height}\n                id={bar.key}\n                x={0}\n                xValue={x}\n                yValue={y}\n              />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [\n      chartId,\n      colorScale,\n      finalYScale,\n      getXValue,\n      getYValue,\n      positiveSize,\n      serie.data,\n      serie.name,\n      subGroupScale,\n      xScale,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,YAAY,eAAe;AAC3C,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAGtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAgC;AACrE,QAAM,EAAE,QAAQ,QAAQ,YAAY,SAAS,eAAe,YAAY,WAAW,WAAW,QAAQ,IACpG,WAAW,YAAY;AACzB,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,aAAa,OAAO,CAAC;AAC1C,QAAM,eAAe,aAAa;AAElC,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAAG,UAAU,wBAAwB;AAAA,MAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,cAAM,IAAI,UAAU,GAAG;AACvB,cAAM,IAAI,UAAU,GAAG;AAEvB,cAAM,QAAQ,IAAI,IAAI,eAAe,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,OAAO,CAAC;AACrE,cAAM,SAAS,eAAe,UAAU;AACxC,cAAM,aAAa,IAAI,IAAI,OAAO,CAAC,IAAI,QAAQ,OAAO,CAAC;AACvD,cAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,CAAC;AAE5D,eACE,oBAAC;AAAA,UAAgB,WAAW,aAAa,cAAc;AAAA,UACrD,8BAAC;AAAA,YACC,OAAO;AAAA,YACP,MAAM,MAAM;AAAA,YACZ;AAAA,YACA;AAAA,YACA,IAAI,IAAI;AAAA,YACR,GAAG;AAAA,YACH,QAAQ;AAAA,YACR,QAAQ;AAAA,WACV;AAAA,WAVM,IAAI,GAWZ;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }