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

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

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useCallback, useMemo } from "react";
+import { ChartContext } from "../../ChartContext";
+const ScrollBarY = () => {
+  const {
+    setIsGrabbed,
+    setStartPosition,
+    innerWidth,
+    xScrollbarPosition,
+    activePoint,
+    setXScrollbarPosition,
+    innerHeight,
+    isGrabbed,
+    containerRatio,
+    setScrapperPosX,
+    setScrapperPosY,
+    isScrollbarVisible,
+    oldLastPosition
+  } = useContext(ChartContext);
+  const barHeight = useMemo(() => parseInt(innerHeight / containerRatio, 10), [containerRatio, innerHeight]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      setScrapperPosX("");
+      setScrapperPosY("");
+      setIsGrabbed(true);
+      setStartPosition(e.clientY);
+      e.preventDefault();
+    },
+    [setIsGrabbed, setScrapperPosY, setScrapperPosX, setStartPosition]
+  );
+  const handleMouseEnter = useCallback(
+    (e) => {
+      setScrapperPosX("");
+    },
+    [setScrapperPosX]
+  );
+  const handleClickFullBar = useCallback(
+    (e) => {
+      let newPosition = 0;
+      const bar = e.target;
+      const bounds = bar.getBoundingClientRect();
+      const top = e.clientY - bounds.top;
+      if (top + barHeight / 2 > innerHeight) {
+        newPosition = innerHeight - barHeight;
+      } else if (top - barHeight / 2 > 0) {
+        newPosition = top - barHeight / 2;
+      }
+      setXScrollbarPosition(newPosition);
+      oldLastPosition.current = newPosition;
+      e.preventDefault();
+    },
+    [barHeight, innerHeight, oldLastPosition, setXScrollbarPosition]
+  );
+  const isBarVisible = useMemo(
+    () => (isScrollbarVisible || activePoint) && containerRatio > 1,
+    [activePoint, containerRatio, isScrollbarVisible]
+  );
+  return /* @__PURE__ */ jsxs("g", {
+    className: "scrollbary",
+    transform: "translate(-6,0)",
+    style: { visibility: isBarVisible ? "visible" : "hidden" },
+    onMouseEnter: handleMouseEnter,
+    children: [
+      /* @__PURE__ */ jsx("rect", {
+        style: { cursor: "pointer" },
+        width: "6",
+        height: innerHeight,
+        fill: "#ebecf0c5",
+        onClick: handleClickFullBar
+      }),
+      /* @__PURE__ */ jsx("g", {
+        transform: `translate(0,${xScrollbarPosition})`,
+        children: /* @__PURE__ */ jsx("rect", {
+          style: { cursor: isGrabbed ? "grabbing" : "grab" },
+          width: "6",
+          height: barHeight,
+          fill: "grey",
+          onMouseDown: handleMouseDown
+        })
+      })
+    ]
+  });
+};
+export {
+  ScrollBarY
+};
+//# sourceMappingURL=ScrollBarY.js.map

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

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

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

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

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

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { ChartContext } from "../../ChartContext";
+import { SeriesFactory } from "../SeriesFactory";
+import { ScrollBarY } from "./ScrollBarY";
+import { Scrapper } from "../Scrapper/Scrapper";
+import { VerticalScrapper } from "../Scrapper/VerticalScrapper";
+import { AxisLeft } from "../Axis/AxisLeft";
+const ScrollableContainerY = () => {
+  const {
+    props: { scrapper, height, width },
+    xScrollbarPosition,
+    containerRatio,
+    innerHeight,
+    innerWidth,
+    internalMargin,
+    chartId
+  } = useContext(ChartContext);
+  const Scrappers = useMemo(() => {
+    if (scrapper?.type === "horizontal")
+      return /* @__PURE__ */ jsx(Scrapper, {});
+    else if (scrapper?.type === "vertical")
+      return /* @__PURE__ */ jsx(VerticalScrapper, {});
+    return null;
+  }, [scrapper?.type]);
+  return /* @__PURE__ */ jsxs("g", {
+    className: "scrollable-container-x",
+    clipPath: `url(#scroll-clip-y-${chartId})`,
+    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`
+          })
+        })
+      })
+    ]
+  });
+};
+export {
+  ScrollableContainerY
+};
+//# sourceMappingURL=ScrollableContainerY.js.map

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

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

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { ChartContext } from "../ChartContext";
 import { Line, Points, Bars, StackedBar, Area, HorizontalBars, HorizontalStackedBars } from "../series";
@@ -7,13 +7,8 @@ import { getStackedIndex } from "../helpers";
 import { useVirtualizedSeries } from "../helpers/useVirtualizedSeries";
 const SeriesFactory = () => {
   const {
-    props: { xAxis, groups, types },
-    xScrollbarPosition,
-    innerWidth,
-    xScale,
-    containerRatio,
-    isHorizontal,
-    currentData: data
+    props: { groups, types },
+    isHorizontal
   } = useContext(ChartContext);
   const virtualizedSeries = useVirtualizedSeries();
   return useMemo(
@@ -59,10 +54,10 @@ const SeriesFactory = () => {
             ...serieProps
           });
         }
-        return /* @__PURE__ */ jsx(Fragment, {});
+        return null;
       })
     }),
-    [containerRatio, data, groups, innerWidth, isHorizontal, types, xAxis.cols, xScale, xScrollbarPosition]
+    [groups, isHorizontal, types, virtualizedSeries]
   );
 };
 export {

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: { xAxis, groups, types },\n    xScrollbarPosition,\n    innerWidth,\n    xScale,\n    containerRatio,\n    isHorizontal,\n    currentData: data,\n  } = useContext(ChartContext);\n\n  const virtualizedSeries = useVirtualizedSeries();\n\n  return useMemo(\n    () => (\n      <g className=\"content\">\n        {\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 <></>;\n          }) as JSX.Element[]\n        }\n      </g>\n    ),\n    [containerRatio, data, groups, innerWidth, isHorizontal, types, xAxis.cols, xScale, xScrollbarPosition],\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,OAAO,QAAQ,MAAM;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,IAAI,WAAW,YAAY;AAE3B,QAAM,oBAAoB,qBAAqB;AAE/C,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,WAAU;AAAA,MAET,4BAAkB,IAAI,CAAC,UAAU;AAC/B,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,gCAAE;AAAA,MACX,CAAC;AAAA,KAEL;AAAA,IAEF,CAAC,gBAAgB,MAAM,QAAQ,YAAY,cAAc,OAAO,MAAM,MAAM,QAAQ,kBAAkB;AAAA,EACxG;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, 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;",
   "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';\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: 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 AxisT {\n    showGrid: boolean;\n    color: string;\n    type: AxisTypeT;\n    cols?: number[] | string[] | Date[];\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      serie: string;\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    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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AAgE9C,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  }\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;",
   "names": []
 }

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

@@ -29,7 +29,7 @@ const Area = ({ serie }) => {
     if (serieWithStackedValues) {
       return area().x((_, i) => {
         return xScale(typeof serie.data[i]?.value === "number" ? xAxis.cols[i] : serie.data[i]?.value?.x);
-      }).y0(([y1]) => finalYScale(y1)).y1(([, y2]) => finalYScale(y2)).curve(curveStyle)(serieWithStackedValues);
+      }).y0(([y1, y2]) => finalYScale(y2)).y1(([y1, y2]) => finalYScale(y1)).curve(curveStyle)(serieWithStackedValues);
     }
     return area().x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position)).y0(innerHeight).y1((d) => finalYScale(d.value.y ?? d.value)).curve(curveStyle)(serie.data);
   }, [stackedData, serie, innerHeight, finalYScale, xScale, xAxis?.cols]);
@@ -46,8 +46,6 @@ const Area = ({ serie }) => {
   return /* @__PURE__ */ jsx("g", {
     children: /* @__PURE__ */ jsxs("g", {
       transform: `translate(${xTranslate}, 0)`,
-      onMouseEnter: () => setActiveSerie(serie.key),
-      onMouseLeave: () => setActiveSerie(""),
       children: [
         /* @__PURE__ */ jsx(Points, {
           serie

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Area.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { area, line } from 'd3';\nimport { StyledArea } from '../styles';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\nimport { Points } from './Points';\nimport { LINE, curveStyleMap } from '../../constants';\n\nexport const Area = ({ serie }) => {\n  const {\n    props: { xAxis },\n    xScale,\n    yScale,\n    innerHeight,\n    y2Scale,\n    colorScale,\n    activeSerie,\n    stackedData,\n    setActiveSerie,\n  } = useContext(ChartContext);\n\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [curveStyleMap, serie.curveStyle],\n  );\n  const areaD3 = useMemo(() => {\n    const serieWithStackedValues = getStackedData(stackedData, serie);\n    if (serieWithStackedValues) {\n      return area()\n        .x((_, i) => {\n          return xScale(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x);\n        })\n        .y0(([y1]) => finalYScale(y1))\n        .y1(([, y2]) => finalYScale(y2))\n        .curve(curveStyle)(serieWithStackedValues);\n    }\n    return area()\n      .x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n      .y0(innerHeight)\n      .y1((d) => finalYScale(d.value.y ?? d.value))\n      .curve(curveStyle)(serie.data);\n  }, [stackedData, serie, innerHeight, finalYScale, xScale, xAxis?.cols]);\n\n  const lineD3 = useMemo(() => {\n    const serieWithStackedValues = getStackedData(stackedData, serie);\n    if (serieWithStackedValues) {\n      return (\n        line()\n          .x((_, i) => {\n            return xScale(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x);\n          })\n          // .y0(([y1]) => finalYScale(y1))\n          .y(([, y2]) => finalYScale(y2))\n          .curve(curveStyle)(serieWithStackedValues)\n      );\n    }\n    return (\n      line()\n        .x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n        // .y0(innerHeight)\n        .y((d) => finalYScale(d.value.y ?? d.value))\n        .curve(curveStyle)(serie.data)\n    );\n  }, [stackedData, serie, curveStyle, xScale, xAxis.cols, finalYScale]);\n\n  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;\n\n  return (\n    <g>\n      <g\n        transform={`translate(${xTranslate}, 0)`}\n        onMouseEnter={() => setActiveSerie(serie.key)}\n        onMouseLeave={() => setActiveSerie('')}\n      >\n        <Points serie={serie} />\n        <path d={lineD3} fill=\"none\" strokeWidth={2} stroke={colorScale(serie.name)} />\n        <StyledArea d={areaD3} isActiveArea={activeSerie === serie.key} fill={colorScale(serie.name)} />\n      </g>\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,MAAM,YAAY;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,MAAM,qBAAqB;AAE7B,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,aAAa;AAAA,IACjB,MAAM,cAAc,MAAM,eAAe,cAAc,KAAK,YAAY;AAAA,IACxE,CAAC,eAAe,MAAM,UAAU;AAAA,EAClC;AACA,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAI,wBAAwB;AAC1B,aAAO,KAAK,EACT,EAAE,CAAC,GAAG,MAAM;AACX,eAAO,OAAO,OAAO,MAAM,KAAK,IAAI,UAAU,WAAW,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC;AAAA,MAClG,CAAC,EACA,GAAG,CAAC,CAAC,EAAE,MAAM,YAAY,EAAE,CAAC,EAC5B,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,YAAY,EAAE,CAAC,EAC9B,MAAM,UAAU,EAAE,sBAAsB;AAAA,IAC7C;AACA,WAAO,KAAK,EACT,EAAE,CAAC,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EACrE,GAAG,WAAW,EACd,GAAG,CAAC,MAAM,YAAY,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC3C,MAAM,UAAU,EAAE,MAAM,IAAI;AAAA,EACjC,GAAG,CAAC,aAAa,OAAO,aAAa,aAAa,QAAQ,OAAO,IAAI,CAAC;AAEtE,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAI,wBAAwB;AAC1B,aACE,KAAK,EACF,EAAE,CAAC,GAAG,MAAM;AACX,eAAO,OAAO,OAAO,MAAM,KAAK,IAAI,UAAU,WAAW,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC;AAAA,MAClG,CAAC,EAEA,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,YAAY,EAAE,CAAC,EAC7B,MAAM,UAAU,EAAE,sBAAsB;AAAA,IAE/C;AACA,WACE,KAAK,EACF,EAAE,CAAC,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EAErE,EAAE,CAAC,MAAM,YAAY,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC1C,MAAM,UAAU,EAAE,MAAM,IAAI;AAAA,EAEnC,GAAG,CAAC,aAAa,OAAO,YAAY,QAAQ,MAAM,MAAM,WAAW,CAAC;AAEpE,QAAM,cAAc,QAAQ,YAAY,KAAK,KAAK;AAElD,SACE,oBAAC;AAAA,IACC,+BAAC;AAAA,MACC,WAAW,aAAa;AAAA,MACxB,cAAc,MAAM,eAAe,MAAM,GAAG;AAAA,MAC5C,cAAc,MAAM,eAAe,EAAE;AAAA,MAErC;AAAA,4BAAC;AAAA,UAAO;AAAA,SAAc;AAAA,QACtB,oBAAC;AAAA,UAAK,GAAG;AAAA,UAAQ,MAAK;AAAA,UAAO,aAAa;AAAA,UAAG,QAAQ,WAAW,MAAM,IAAI;AAAA,SAAG;AAAA,QAC7E,oBAAC;AAAA,UAAW,GAAG;AAAA,UAAQ,cAAc,gBAAgB,MAAM;AAAA,UAAK,MAAM,WAAW,MAAM,IAAI;AAAA,SAAG;AAAA;AAAA,KAChG;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { area, line } from 'd3';\nimport { StyledArea } from '../styles';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\nimport { Points } from './Points';\nimport { LINE, curveStyleMap } from '../../constants';\n\nexport const Area = ({ serie }) => {\n  const {\n    props: { xAxis },\n    xScale,\n    yScale,\n    innerHeight,\n    y2Scale,\n    colorScale,\n    activeSerie,\n    stackedData,\n    setActiveSerie,\n  } = useContext(ChartContext);\n\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [curveStyleMap, serie.curveStyle],\n  );\n  const areaD3 = useMemo(() => {\n    const serieWithStackedValues = getStackedData(stackedData, serie);\n    if (serieWithStackedValues) {\n      return area()\n        .x((_, i) => {\n          return xScale(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x);\n        })\n        .y0(([y1, y2]) => finalYScale(y2))\n        .y1(([y1, y2]) => finalYScale(y1))\n        .curve(curveStyle)(serieWithStackedValues);\n    }\n    return area()\n      .x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n      .y0(innerHeight)\n      .y1((d) => finalYScale(d.value.y ?? d.value))\n      .curve(curveStyle)(serie.data);\n  }, [stackedData, serie, innerHeight, finalYScale, xScale, xAxis?.cols]);\n\n  const lineD3 = useMemo(() => {\n    const serieWithStackedValues = getStackedData(stackedData, serie);\n    if (serieWithStackedValues) {\n      return (\n        line()\n          .x((_, i) => {\n            return xScale(typeof serie.data[i]?.value === 'number' ? xAxis.cols[i] : serie.data[i]?.value?.x);\n          })\n          // .y0(([y1]) => finalYScale(y1))\n          .y(([, y2]) => finalYScale(y2))\n          .curve(curveStyle)(serieWithStackedValues)\n      );\n    }\n    return (\n      line()\n        .x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n        // .y0(innerHeight)\n        .y((d) => finalYScale(d.value.y ?? d.value))\n        .curve(curveStyle)(serie.data)\n    );\n  }, [stackedData, serie, curveStyle, xScale, xAxis.cols, finalYScale]);\n\n  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;\n\n  return (\n    <g>\n      <g transform={`translate(${xTranslate}, 0)`}>\n        <Points serie={serie} />\n        <path d={lineD3} fill=\"none\" strokeWidth={2} stroke={colorScale(serie.name)} />\n        <StyledArea d={areaD3} isActiveArea={activeSerie === serie.key} fill={colorScale(serie.name)} />\n      </g>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,MAAM,YAAY;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,MAAM,qBAAqB;AAE7B,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,aAAa;AAAA,IACjB,MAAM,cAAc,MAAM,eAAe,cAAc,KAAK,YAAY;AAAA,IACxE,CAAC,eAAe,MAAM,UAAU;AAAA,EAClC;AACA,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAI,wBAAwB;AAC1B,aAAO,KAAK,EACT,EAAE,CAAC,GAAG,MAAM;AACX,eAAO,OAAO,OAAO,MAAM,KAAK,IAAI,UAAU,WAAW,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC;AAAA,MAClG,CAAC,EACA,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,YAAY,EAAE,CAAC,EAChC,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,YAAY,EAAE,CAAC,EAChC,MAAM,UAAU,EAAE,sBAAsB;AAAA,IAC7C;AACA,WAAO,KAAK,EACT,EAAE,CAAC,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EACrE,GAAG,WAAW,EACd,GAAG,CAAC,MAAM,YAAY,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC3C,MAAM,UAAU,EAAE,MAAM,IAAI;AAAA,EACjC,GAAG,CAAC,aAAa,OAAO,aAAa,aAAa,QAAQ,OAAO,IAAI,CAAC;AAEtE,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAI,wBAAwB;AAC1B,aACE,KAAK,EACF,EAAE,CAAC,GAAG,MAAM;AACX,eAAO,OAAO,OAAO,MAAM,KAAK,IAAI,UAAU,WAAW,MAAM,KAAK,KAAK,MAAM,KAAK,IAAI,OAAO,CAAC;AAAA,MAClG,CAAC,EAEA,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,YAAY,EAAE,CAAC,EAC7B,MAAM,UAAU,EAAE,sBAAsB;AAAA,IAE/C;AACA,WACE,KAAK,EACF,EAAE,CAAC,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EAErE,EAAE,CAAC,MAAM,YAAY,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC1C,MAAM,UAAU,EAAE,MAAM,IAAI;AAAA,EAEnC,GAAG,CAAC,aAAa,OAAO,YAAY,QAAQ,MAAM,MAAM,WAAW,CAAC;AAEpE,QAAM,cAAc,QAAQ,YAAY,KAAK,KAAK;AAElD,SACE,oBAAC;AAAA,IACC,+BAAC;AAAA,MAAE,WAAW,aAAa;AAAA,MACzB;AAAA,4BAAC;AAAA,UAAO;AAAA,SAAc;AAAA,QACtB,oBAAC;AAAA,UAAK,GAAG;AAAA,UAAQ,MAAK;AAAA,UAAO,aAAa;AAAA,UAAG,QAAQ,WAAW,MAAM,IAAI;AAAA,SAAG;AAAA,QAC7E,oBAAC;AAAA,UAAW,GAAG;AAAA,UAAQ,cAAc,gBAAgB,MAAM;AAAA,UAAK,MAAM,WAAW,MAAM,IAAI;AAAA,SAAG;AAAA;AAAA,KAChG;AAAA,GACF;AAEJ;",
   "names": []
 }

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, 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAA2B;AAE3C,SAAS,YAAY;AACrB,SAAS,oBAAoB;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,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            />\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;",
   "names": []
 }

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

@@ -4,17 +4,7 @@ import { useContext, useMemo } from "react";
 import { Rect } from "./Rect";
 import { ChartContext } from "../ChartContext";
 const HorizontalBars = ({ serie }) => {
-  const {
-    props: { yAxis },
-    xScale,
-    yScale,
-    y2Scale,
-    subGroupScale,
-    colorScale,
-    getXValue,
-    getYValue,
-    chartId
-  } = useContext(ChartContext);
+  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } = useContext(ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
   return useMemo(
     () => /* @__PURE__ */ jsx("g", {
@@ -25,10 +15,11 @@ const HorizontalBars = ({ serie }) => {
         const y = getYValue(bar);
         const width = xScale(x);
         const height = subGroupScale?.bandwidth();
-        const transformY = subGroupScale(serie.name) + finalYScale(yAxis?.cols?.[i] ?? i);
+        const transformY = subGroupScale(serie.name) + finalYScale(y);
         return /* @__PURE__ */ jsx("g", {
           transform: `translate(0,${transformY})`,
           children: /* @__PURE__ */ jsx(Rect, {
+            name: serie.name,
             width,
             height,
             id: bar.key,
@@ -39,18 +30,7 @@ const HorizontalBars = ({ serie }) => {
         }, bar.key);
       })
     }),
-    [
-      chartId,
-      colorScale,
-      finalYScale,
-      getXValue,
-      getYValue,
-      serie.data,
-      serie.name,
-      subGroupScale,
-      xScale,
-      yAxis?.cols
-    ]
+    [chartId, colorScale, finalYScale, getXValue, getYValue, 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';\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const HorizontalBars = ({ serie }: BarsT) => {\n  const {\n    props: { yAxis },\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  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(yAxis?.cols?.[i] ?? i);\n\n          return (\n            <g key={bar.key} transform={`translate(0,${transformY})`}>\n              <Rect width={width} height={height} id={bar.key} x={0} xValue={x} yValue={y} />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [\n      chartId,\n      colorScale,\n      finalYScale,\n      getXValue,\n      getYValue,\n      serie.data,\n      serie.name,\n      subGroupScale,\n      xScale,\n      yAxis?.cols,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,YAAY,eAAe;AAC3C,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAKtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAa;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;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,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,OAAO,OAAO,MAAM,CAAC;AAEhF,eACE,oBAAC;AAAA,UAAgB,WAAW,eAAe;AAAA,UACzC,8BAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,YAAK,GAAG;AAAA,YAAG,QAAQ;AAAA,YAAG,QAAQ;AAAA,WAAG;AAAA,WADvE,IAAI,GAEZ;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,IACT;AAAA,EACF;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, 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;",
   "names": []
 }

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

@@ -6,7 +6,7 @@ import { ChartContext } from "../ChartContext";
 import { getStackedData, getStackedIndex } from "../helpers";
 const HorizontalStackedBars = ({ serie }) => {
   const {
-    props: { yAxis, groups },
+    props: { groups },
     xScale,
     yScale,
     stackedData,
@@ -25,7 +25,7 @@ const HorizontalStackedBars = ({ serie }) => {
       const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 1 : 0);
       const height = subGroupScale?.bandwidth();
       const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 0);
-      const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yAxis?.cols?.[i]);
+      const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);
       return /* @__PURE__ */ jsx("g", {
         clipPath: `url(#rect-focus-ring-${chartId})`,
         children: /* @__PURE__ */ jsx("g", {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/HorizontalStackedBars.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\n\nexport const HorizontalStackedBars = ({ serie }) => {\n  const {\n    props: { yAxis, groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n        const xValue = sequence[1] - sequence[0];\n        const yValue = getYValue(serie.data[i]);\n\n        const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 1 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yAxis?.cols?.[i]);\n\n        return (\n          <g key={serie.data[i].key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n            <g fill={colorScale(serie.name)} transform={`translate(0, ${transformY})`}>\n              <Rect\n                width={width}\n                height={height}\n                x={transformX}\n                xValue={xValue}\n                yValue={yValue}\n                id={serie.data[i].key}\n                name={serie.name}\n              />\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAM;AAClD,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC;AAAA,IACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AACrC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,YAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAE/E,YAAM,SAAS,eAAe,UAAU;AAExC,YAAM,aAAa,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAC9D,YAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,OAAO,OAAO,EAAE;AAExF,aACE,oBAAC;AAAA,QAA0B,UAAU,wBAAwB;AAAA,QAC3D,8BAAC;AAAA,UAAE,MAAM,WAAW,MAAM,IAAI;AAAA,UAAG,WAAW,gBAAgB;AAAA,UAC1D,8BAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA,GAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB,MAAM,MAAM;AAAA,WACd;AAAA,SACF;AAAA,SAXM,MAAM,KAAK,GAAG,GAYtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalStackedBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n        const xValue = sequence[1] - sequence[0];\n        const yValue = getYValue(serie.data[i]);\n\n        const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 1 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);\n\n        return (\n          <g key={serie.data[i].key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n            <g fill={colorScale(serie.name)} transform={`translate(0, ${transformY})`}>\n              <Rect\n                width={width}\n                height={height}\n                x={transformX}\n                xValue={xValue}\n                yValue={yValue}\n                id={serie.data[i].key}\n                name={serie.name}\n              />\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AAGzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAgC;AAC5E,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAC3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC;AAAA,IACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AACrC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,YAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAE/E,YAAM,SAAS,eAAe,UAAU;AAExC,YAAM,aAAa,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAC9D,YAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,MAAM;AAE9E,aACE,oBAAC;AAAA,QAA0B,UAAU,wBAAwB;AAAA,QAC3D,8BAAC;AAAA,UAAE,MAAM,WAAW,MAAM,IAAI;AAAA,UAAG,WAAW,gBAAgB;AAAA,UAC1D,8BAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA,GAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB,MAAM,MAAM;AAAA,WACd;AAAA,SACF;AAAA,SAXM,MAAM,KAAK,GAAG,GAYtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -19,9 +19,10 @@ const StackedBar = ({ serie }) => {
   const stackIndex = getStackedIndex(groups, serie.name);
   return /* @__PURE__ */ jsx("g", {
     clipPath: `url(#rect-focus-ring-${chartId})`,
-    children: serieWithStackedValues.map((sequence, i) => {
+    children: serie.data.map((bar, i) => {
+      const sequence = serieWithStackedValues[bar.position];
       const isFloorStack = sequence[0] === 0;
-      const xValue = getXValue(serie.data[i]);
+      const xValue = getXValue(bar);
       const yValue = sequence[0] - sequence[1];
       const width = subGroupScale?.bandwidth();
       const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/StackedBar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\n\nexport const StackedBar = ({ serie }) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(serie.data[i]);\n        const yValue = sequence[0] - sequence[1];\n        const width = subGroupScale?.bandwidth();\n        const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);\n        const transformX = xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n        const transformY = yScale(sequence[1]);\n\n        return (\n          <g key={serie.data[i].key} fill={colorScale(serie.name)} transform={`translate(${transformX},0)`}>\n            <Rect\n              width={width}\n              height={height}\n              xValue={xValue}\n              yValue={yValue}\n              y={transformY}\n              id={serie.data[i].key}\n              name={serie.name}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC;AAAA,IAAE,UAAU,wBAAwB;AAAA,IAClC,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AAErC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AACtC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAChF,YAAM,aAAa,OAAO,MAAM,IAAI,cAAc,gBAAgB,YAAY;AAC9E,YAAM,aAAa,OAAO,SAAS,EAAE;AAErC,aACE,oBAAC;AAAA,QAA0B,MAAM,WAAW,MAAM,IAAI;AAAA,QAAG,WAAW,aAAa;AAAA,QAC/E,8BAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH,IAAI,MAAM,KAAK,GAAG;AAAA,UAClB,MAAM,MAAM;AAAA,SACd;AAAA,SATM,MAAM,KAAK,GAAG,GAUtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\n\nexport const StackedBar = ({ serie }) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const sequence = serieWithStackedValues[bar.position];\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(bar);\n        const yValue = sequence[0] - sequence[1];\n        const width = subGroupScale?.bandwidth();\n        const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);\n        const transformX = xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n        const transformY = yScale(sequence[1]);\n\n        return (\n          <g key={serie.data[i].key} fill={colorScale(serie.name)} transform={`translate(${transformX},0)`}>\n            <Rect\n              width={width}\n              height={height}\n              xValue={xValue}\n              yValue={yValue}\n              y={transformY}\n              id={serie.data[i].key}\n              name={serie.name}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AAEzC,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC;AAAA,IAAE,UAAU,wBAAwB;AAAA,IAClC,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,WAAW,uBAAuB,IAAI;AAC5C,YAAM,eAAe,SAAS,OAAO;AAErC,YAAM,SAAS,UAAU,GAAG;AAC5B,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAChF,YAAM,aAAa,OAAO,MAAM,IAAI,cAAc,gBAAgB,YAAY;AAC9E,YAAM,aAAa,OAAO,SAAS,EAAE;AAErC,aACE,oBAAC;AAAA,QAA0B,MAAM,WAAW,MAAM,IAAI;AAAA,QAAG,WAAW,aAAa;AAAA,QAC/E,8BAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH,IAAI,MAAM,KAAK,GAAG;AAAA,UAClB,MAAM,MAAM;AAAA,SACd;AAAA,SATM,MAAM,KAAK,GAAG,GAUtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }