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

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

@@ -1,36 +1,70 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
+import { useContext, useCallback, useMemo } from "react";
 import { ChartContext } from "../../ChartContext";
 import { ScrapperLine } from "./ScrapperLine";
 const Scrapper = () => {
   const {
     yScale,
     y2Scale,
-    props: { xAxis, data }
+    xScale,
+    getXValue,
+    getYValue,
+    isHorizontal,
+    getBandwidth,
+    props: { data }
   } = useContext(ChartContext);
+  const getPosition = useCallback(
+    (datum, scale) => {
+      if (isHorizontal) {
+        return xScale(getXValue(datum));
+      }
+      if (scale === "y" || !scale) {
+        return yScale(getYValue(datum));
+      }
+      return y2Scale(getYValue(datum));
+    },
+    [getXValue, getYValue, isHorizontal, xScale, y2Scale, yScale]
+  );
+  const isBandAxis = !!yScale.bandwidth;
   const uniqueData = useMemo(() => {
-    const valueToPositionPerSeries = data.map(
-      (serie) => serie.data.map((datum, i) => ({
-        position: serie.scale === "y" || !serie.scale ? yScale(datum.value) : y2Scale(datum.value),
-        name: serie.name,
-        xValue: xAxis.cols[i],
-        yValue: datum.value
-      }))
-    ).flat(1);
-    const postionUniqueData = {};
+    let valueToPositionPerSeries;
+    if (isBandAxis) {
+      valueToPositionPerSeries = data.map(
+        (serie) => serie.data.map((datum) => {
+          const x = getXValue(datum);
+          const y = getYValue(datum);
+          return {
+            position: yScale(y),
+            name: serie.name,
+            xValue: x,
+            yValue: y
+          };
+        })
+      ).flat(1);
+    } else {
+      valueToPositionPerSeries = data.map(
+        (serie) => serie.data.map((datum, i) => ({
+          position: getPosition(datum, serie.scale),
+          name: serie.name,
+          xValue: getXValue(datum),
+          yValue: getYValue(datum)
+        }))
+      ).flat(1);
+    }
+    const positionUniqueData = {};
     valueToPositionPerSeries.forEach((set) => {
-      if (postionUniqueData[[set.position]]) {
-        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];
+      if (positionUniqueData[[set.position]]) {
+        positionUniqueData[[set.position]] = [...positionUniqueData[[set.position]], { ...set }];
       } else {
-        postionUniqueData[[set.position]] = [{ ...set }];
+        positionUniqueData[[set.position]] = [{ ...set }];
       }
     });
-    return postionUniqueData;
-  }, [data, xAxis.cols, y2Scale, yScale]);
+    return positionUniqueData;
+  }, [data, getXValue, getYValue, y2Scale, yScale]);
   return /* @__PURE__ */ jsx("g", {
     children: Object.keys(uniqueData).map((key) => {
-      const yPosition = parseFloat(key);
+      const yPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);
       const datum = uniqueData[key];
       return /* @__PURE__ */ jsx(ScrapperLine, {
         yPosition,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scrapper/Scrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { ScrapperLine } from './ScrapperLine';\nexport const Scrapper = () => {\n  const {\n    yScale,\n    y2Scale,\n    props: { xAxis, data },\n  } = useContext(ChartContext);\n\n  const uniqueData = useMemo(() => {\n    const valueToPositionPerSeries = data\n      .map((serie) =>\n        serie.data.map((datum, i) => ({\n          position: serie.scale === 'y' || !serie.scale ? yScale(datum.value) : y2Scale(datum.value),\n          name: serie.name,\n          xValue: xAxis.cols[i],\n          yValue: datum.value,\n        })),\n      )\n      .flat(1);\n\n    const postionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (postionUniqueData[[set.position]]) {\n        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n      } else {\n        postionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return postionUniqueData;\n  }, [data, xAxis.cols, y2Scale, yScale]);\n\n  return (\n    <g>\n      {Object.keys(uniqueData).map((key) => {\n        const yPosition = parseFloat(key);\n        const datum = uniqueData[key];\n        return <ScrapperLine key={key} yPosition={yPosition} datum={datum} />;\n      })}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AACtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,KAAK;AAAA,EACvB,IAAI,WAAW,YAAY;AAE3B,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,2BAA2B,KAC9B;AAAA,MAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,OAAO,OAAO;AAAA,QAC5B,UAAU,MAAM,UAAU,OAAO,CAAC,MAAM,QAAQ,OAAO,MAAM,KAAK,IAAI,QAAQ,MAAM,KAAK;AAAA,QACzF,MAAM,MAAM;AAAA,QACZ,QAAQ,MAAM,KAAK;AAAA,QACnB,QAAQ,MAAM;AAAA,MAChB,EAAE;AAAA,IACJ,EACC,KAAK,CAAC;AAET,UAAM,oBAAoB,CAAC;AAE3B,6BAAyB,QAAQ,CAAC,QAAQ;AACxC,UAAI,kBAAkB,CAAC,IAAI,QAAQ,IAAI;AACrC,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,GAAG,kBAAkB,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC;AAAA,MACvF,OAAO;AACL,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;AAAA,MACjD;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,MAAM,MAAM,SAAS,MAAM,CAAC;AAEtC,SACE,oBAAC;AAAA,IACE,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,QAAQ;AACpC,YAAM,YAAY,WAAW,GAAG;AAChC,YAAM,QAAQ,WAAW;AACzB,aAAO,oBAAC;AAAA,QAAuB;AAAA,QAAsB;AAAA,SAA3B,GAAyC;AAAA,IACrE,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { ScrapperLine } from './ScrapperLine';\nexport const Scrapper = () => {\n  const {\n    yScale,\n    y2Scale,\n    xScale,\n    getXValue,\n    getYValue,\n    isHorizontal,\n    getBandwidth,\n    props: { data },\n  } = useContext(ChartContext);\n\n  const getPosition = useCallback(\n    (datum, scale) => {\n      if (isHorizontal) {\n        return xScale(getXValue(datum));\n      }\n      if (scale === 'y' || !scale) {\n        return yScale(getYValue(datum));\n      }\n      return y2Scale(getYValue(datum));\n    },\n    [getXValue, getYValue, isHorizontal, xScale, y2Scale, yScale],\n  );\n  const isBandAxis = !!yScale.bandwidth;\n\n  const uniqueData = useMemo(() => {\n    let valueToPositionPerSeries;\n\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum) => {\n            const x = getXValue(datum);\n            const y = getYValue(datum);\n            return {\n              position: yScale(y),\n              name: serie.name,\n              xValue: x,\n              yValue: y,\n            };\n          }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum, i) => ({\n            position: getPosition(datum, serie.scale),\n            name: serie.name,\n            xValue: getXValue(datum),\n            yValue: getYValue(datum),\n          })),\n        )\n        .flat(1);\n    }\n    const positionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (positionUniqueData[[set.position]]) {\n        positionUniqueData[[set.position]] = [...positionUniqueData[[set.position]], { ...set }];\n      } else {\n        positionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return positionUniqueData;\n  }, [data, getXValue, getYValue, y2Scale, yScale]);\n\n  return (\n    <g>\n      {Object.keys(uniqueData).map((key) => {\n        const yPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);\n        const datum = uniqueData[key];\n        return <ScrapperLine key={key} yPosition={yPosition} datum={datum} />;\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AACtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc;AAAA,IAClB,CAAC,OAAO,UAAU;AAChB,UAAI,cAAc;AAChB,eAAO,OAAO,UAAU,KAAK,CAAC;AAAA,MAChC;AACA,UAAI,UAAU,OAAO,CAAC,OAAO;AAC3B,eAAO,OAAO,UAAU,KAAK,CAAC;AAAA,MAChC;AACA,aAAO,QAAQ,UAAU,KAAK,CAAC;AAAA,IACjC;AAAA,IACA,CAAC,WAAW,WAAW,cAAc,QAAQ,SAAS,MAAM;AAAA,EAC9D;AACA,QAAM,aAAa,CAAC,CAAC,OAAO;AAE5B,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI;AAEJ,QAAI,YAAY;AACd,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,UAAU;AACxB,gBAAM,IAAI,UAAU,KAAK;AACzB,gBAAM,IAAI,UAAU,KAAK;AACzB,iBAAO;AAAA,YACL,UAAU,OAAO,CAAC;AAAA,YAClB,MAAM,MAAM;AAAA,YACZ,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF,CAAC;AAAA,MACH,EACC,KAAK,CAAC;AAAA,IACX,OAAO;AACL,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,OAAO,OAAO;AAAA,UAC5B,UAAU,YAAY,OAAO,MAAM,KAAK;AAAA,UACxC,MAAM,MAAM;AAAA,UACZ,QAAQ,UAAU,KAAK;AAAA,UACvB,QAAQ,UAAU,KAAK;AAAA,QACzB,EAAE;AAAA,MACJ,EACC,KAAK,CAAC;AAAA,IACX;AACA,UAAM,qBAAqB,CAAC;AAE5B,6BAAyB,QAAQ,CAAC,QAAQ;AACxC,UAAI,mBAAmB,CAAC,IAAI,QAAQ,IAAI;AACtC,2BAAmB,CAAC,IAAI,QAAQ,KAAK,CAAC,GAAG,mBAAmB,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC;AAAA,MACzF,OAAO;AACL,2BAAmB,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;AAAA,MAClD;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,WAAW,WAAW,SAAS,MAAM,CAAC;AAEhD,SACE,oBAAC;AAAA,IACE,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,QAAQ;AACpC,YAAM,YAAY,WAAW,GAAG,KAAK,aAAa,aAAa,IAAI,IAAI;AACvE,YAAM,QAAQ,WAAW;AACzB,aAAO,oBAAC;AAAA,QAAuB;AAAA,QAAsB;AAAA,SAA3B,GAAyC;AAAA,IACrE,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -10,6 +10,7 @@ const ScrapperLine = ({ yPosition, datum }) => {
     scrapperPosY,
     setScrapperPosY,
     innerWidth,
+    yScale,
     props: { TooltipRenderer, scrapper }
   } = useContext(ChartContext);
   const theme = useContext(ThemeContext);
@@ -17,6 +18,7 @@ const ScrapperLine = ({ yPosition, datum }) => {
   const handleOnMouseEnter = useCallback(() => {
     setScrapperPosY(yPosition);
   }, [setScrapperPosY, yPosition]);
+  const strokeDetectorWidth = yScale.bandwidth ? yScale.bandwidth() : "4px";
   return /* @__PURE__ */ jsxs("g", {
     children: [
       scrapperPosY === yPosition ? /* @__PURE__ */ jsxs("g", {
@@ -63,7 +65,7 @@ const ScrapperLine = ({ yPosition, datum }) => {
       /* @__PURE__ */ jsx("line", {
         onMouseEnter: handleOnMouseEnter,
         x1: 0,
-        strokeWidth: "4px",
+        strokeWidth: strokeDetectorWidth,
         stroke: "transparent",
         y1: yPosition,
         x2: innerWidth,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scrapper/ScrapperLine.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const ScrapperLine = ({ yPosition, datum }) => {\n  const {\n    scrapperPosY,\n    setScrapperPosY,\n    innerWidth,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n\n  const handleOnMouseEnter = useCallback(() => {\n    setScrapperPosY(yPosition);\n  }, [setScrapperPosY, yPosition]);\n\n  return (\n    <g>\n      {scrapperPosY === yPosition ? (\n        <g>\n          {TooltipRenderer ? (\n            <foreignObject>\n              <DSPopperJS\n                withoutAnimation\n                withoutArrow\n                customOffset={[0, 5]}\n                referenceElement={referenceElement}\n                showPopover\n                zIndex={theme.zIndex.tooltip}\n                // placementOrderPreference=\"\"\n                startPlacementPreference={scrapper.tooltipPreference}\n              >\n                <StyledMouseOverDetectionBox />\n                <StyledTooltipContainer>\n                  <TooltipRenderer data={datum} />\n                </StyledTooltipContainer>\n              </DSPopperJS>\n            </foreignObject>\n          ) : null}\n          <line\n            ref={setReferenceElement}\n            x1={innerWidth}\n            strokeWidth=\"2px\"\n            stroke=\"transparent\"\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n          <line\n            // ref={setReferenceElement}\n            x1={0}\n            strokeWidth=\"2px\"\n            stroke=\"grey\"\n            strokeDasharray={(4, 4)}\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n        </g>\n      ) : null}\n      <line\n        onMouseEnter={handleOnMouseEnter}\n        x1={0}\n        strokeWidth=\"4px\"\n        stroke=\"transparent\"\n        y1={yPosition}\n        x2={innerWidth}\n        y2={yPosition}\n      />\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,aAAa,gBAAgB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,eAAe,CAAC,EAAE,WAAW,MAAM,MAAM;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,YAAY;AAC3B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAgD;AAEhG,QAAM,qBAAqB,YAAY,MAAM;AAC3C,oBAAgB,SAAS;AAAA,EAC3B,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAE/B,SACE,qBAAC;AAAA,IACE;AAAA,uBAAiB,YAChB,qBAAC;AAAA,QACE;AAAA,4BACC,oBAAC;AAAA,YACC,+BAAC;AAAA,cACC,kBAAgB;AAAA,cAChB,cAAY;AAAA,cACZ,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB;AAAA,cACA,aAAW;AAAA,cACX,QAAQ,MAAM,OAAO;AAAA,cAErB,0BAA0B,SAAS;AAAA,cAEnC;AAAA,oCAAC,+BAA4B;AAAA,gBAC7B,oBAAC;AAAA,kBACC,8BAAC;AAAA,oBAAgB,MAAM;AAAA,mBAAO;AAAA,iBAChC;AAAA;AAAA,aACF;AAAA,WACF,IACE;AAAA,UACJ,oBAAC;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,WACN;AAAA,UACA,oBAAC;AAAA,YAEC,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,kBAAkB,GAAG;AAAA,YACrB,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,WACN;AAAA;AAAA,OACF,IACE;AAAA,MACJ,oBAAC;AAAA,QACC,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,aAAY;AAAA,QACZ,QAAO;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,OACN;AAAA;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const ScrapperLine = ({ yPosition, datum }) => {\n  const {\n    scrapperPosY,\n    setScrapperPosY,\n    innerWidth,\n    yScale,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n\n  const handleOnMouseEnter = useCallback(() => {\n    setScrapperPosY(yPosition);\n  }, [setScrapperPosY, yPosition]);\n\n  const strokeDetectorWidth = yScale.bandwidth ? yScale.bandwidth() : '4px';\n\n  return (\n    <g>\n      {scrapperPosY === yPosition ? (\n        <g>\n          {TooltipRenderer ? (\n            <foreignObject>\n              <DSPopperJS\n                withoutAnimation\n                withoutArrow\n                customOffset={[0, 5]}\n                referenceElement={referenceElement}\n                showPopover\n                zIndex={theme.zIndex.tooltip}\n                // placementOrderPreference=\"\"\n                startPlacementPreference={scrapper.tooltipPreference}\n              >\n                <StyledMouseOverDetectionBox />\n                <StyledTooltipContainer>\n                  <TooltipRenderer data={datum} />\n                </StyledTooltipContainer>\n              </DSPopperJS>\n            </foreignObject>\n          ) : null}\n          <line\n            ref={setReferenceElement}\n            x1={innerWidth}\n            strokeWidth=\"2px\"\n            stroke=\"transparent\"\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n          <line\n            // ref={setReferenceElement}\n            x1={0}\n            strokeWidth=\"2px\"\n            stroke=\"grey\"\n            strokeDasharray={(4, 4)}\n            y1={yPosition}\n            x2={innerWidth}\n            y2={yPosition}\n          />\n        </g>\n      ) : null}\n      <line\n        onMouseEnter={handleOnMouseEnter}\n        x1={0}\n        strokeWidth={strokeDetectorWidth}\n        stroke=\"transparent\"\n        y1={yPosition}\n        x2={innerWidth}\n        y2={yPosition}\n      />\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,aAAa,gBAAgB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,eAAe,CAAC,EAAE,WAAW,MAAM,MAAM;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,YAAY;AAC3B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAgD;AAEhG,QAAM,qBAAqB,YAAY,MAAM;AAC3C,oBAAgB,SAAS;AAAA,EAC3B,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAE/B,QAAM,sBAAsB,OAAO,YAAY,OAAO,UAAU,IAAI;AAEpE,SACE,qBAAC;AAAA,IACE;AAAA,uBAAiB,YAChB,qBAAC;AAAA,QACE;AAAA,4BACC,oBAAC;AAAA,YACC,+BAAC;AAAA,cACC,kBAAgB;AAAA,cAChB,cAAY;AAAA,cACZ,cAAc,CAAC,GAAG,CAAC;AAAA,cACnB;AAAA,cACA,aAAW;AAAA,cACX,QAAQ,MAAM,OAAO;AAAA,cAErB,0BAA0B,SAAS;AAAA,cAEnC;AAAA,oCAAC,+BAA4B;AAAA,gBAC7B,oBAAC;AAAA,kBACC,8BAAC;AAAA,oBAAgB,MAAM;AAAA,mBAAO;AAAA,iBAChC;AAAA;AAAA,aACF;AAAA,WACF,IACE;AAAA,UACJ,oBAAC;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,WACN;AAAA,UACA,oBAAC;AAAA,YAEC,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,kBAAkB,GAAG;AAAA,YACrB,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,WACN;AAAA;AAAA,OACF,IACE;AAAA,MACJ,oBAAC;AAAA,QACC,cAAc;AAAA,QACd,IAAI;AAAA,QACJ,aAAa;AAAA,QACb,QAAO;AAAA,QACP,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,OACN;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -9,16 +9,18 @@ const VerticalScrapper = () => {
     getBandwidth,
     xScrollbarPosition,
     containerRatio,
+    getXValue,
+    getYValue,
     props: { xAxis, data }
   } = useContext(ChartContext);
   const isBandAxis = !!xScale.bandwidth;
   const uniqueData = useMemo(() => {
     let valueToPositionPerSeries;
     if (isBandAxis) {
-      valueToPositionPerSeries = data.map(
+      valueToPositionPerSeries = data.filter((serie) => !serie.isHidden).map(
         (serie) => serie.data.map((datum) => {
-          const x = xAxis.cols ? xAxis.cols[datum.position] : datum.value.x;
-          const y = typeof datum.value === "number" ? datum.value : datum.value.y;
+          const x = getXValue(datum);
+          const y = getYValue(datum);
           return {
             position: xScale(x),
             name: serie.name,
@@ -28,7 +30,7 @@ const VerticalScrapper = () => {
         })
       ).flat(1);
     } else {
-      valueToPositionPerSeries = data.map(
+      valueToPositionPerSeries = data.filter((serie) => !serie.isHidden).map(
         (serie) => serie.data.filter((datum) => {
           const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
           return xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) && xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth;
@@ -51,7 +53,7 @@ const VerticalScrapper = () => {
       }
     });
     return postionUniqueData;
-  }, [isBandAxis, data, xAxis.cols, xScale, xScrollbarPosition, containerRatio]);
+  }, [isBandAxis, data, getXValue, getYValue, xScale, xAxis.cols, xScrollbarPosition, containerRatio]);
   const lineWidth = parseFloat(innerWidth / Object.keys(uniqueData).length, 10);
   const render = useMemo(
     () => /* @__PURE__ */ jsx("g", {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scrapper/VerticalScrapper.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { VerticalScrapperLine } from './VerticalScrapperLine';\n\nexport const VerticalScrapper = () => {\n  const {\n    xScale,\n    getBandwidth,\n    xScrollbarPosition,\n    containerRatio,\n    props: { xAxis, data },\n  } = useContext(ChartContext);\n\n  const isBandAxis = !!xScale.bandwidth;\n  const uniqueData = useMemo(() => {\n    let valueToPositionPerSeries;\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum) => {\n            const x = xAxis.cols ? xAxis.cols[datum.position] : datum.value.x;\n            const y = typeof datum.value === 'number' ? datum.value : datum.value.y;\n            return {\n              position: xScale(x),\n              name: serie.name,\n              xValue: x,\n              yValue: y,\n            };\n          }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data\n            .filter((datum) => {\n              const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n              return (\n                xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) &&\n                xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth\n              );\n            })\n            .map((datum) => {\n              return {\n                position: xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x),\n                name: serie.name,\n                xValue: xAxis.cols ? xAxis.cols[datum.position] : datum.value.x,\n                yValue: typeof datum.value === 'number' ? datum.value : datum.value.y,\n              };\n            }),\n        )\n        .flat(1);\n    }\n    const postionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (postionUniqueData[[set.position]]) {\n        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n      } else {\n        postionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return postionUniqueData;\n  }, [isBandAxis, data, xAxis.cols, xScale, xScrollbarPosition, containerRatio]);\n\n  const lineWidth = parseFloat(innerWidth / Object.keys(uniqueData).length, 10);\n\n  const render = useMemo(\n    () => (\n      <g className=\"vertical-scrapper\">\n        {Object.keys(uniqueData).map((key, i) => {\n          const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);\n          const datum = uniqueData[key];\n\n          return <VerticalScrapperLine lineWidth={lineWidth} xPosition={xPosition} key={key} datum={datum} />;\n        })}\n      </g>\n    ),\n\n    [getBandwidth, isBandAxis, lineWidth, uniqueData],\n  );\n\n  return render;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAE9B,MAAM,mBAAmB,MAAM;AACpC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,KAAK;AAAA,EACvB,IAAI,WAAW,YAAY;AAE3B,QAAM,aAAa,CAAC,CAAC,OAAO;AAC5B,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI;AACJ,QAAI,YAAY;AACd,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,UAAU;AACxB,gBAAM,IAAI,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM;AAChE,gBAAM,IAAI,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,MAAM,MAAM;AACtE,iBAAO;AAAA,YACL,UAAU,OAAO,CAAC;AAAA,YAClB,MAAM,MAAM;AAAA,YACZ,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF,CAAC;AAAA,MACH,EACC,KAAK,CAAC;AAAA,IACX,OAAO;AACL,iCAA2B,KACxB;AAAA,QAAI,CAAC,UACJ,MAAM,KACH,OAAO,CAAC,UAAU;AACjB,gBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,iBACE,eAAe,sBAAsB,kBAAkB,MACvD,cAAc,sBAAsB,kBAAkB,KAAK;AAAA,QAE/D,CAAC,EACA,IAAI,CAAC,UAAU;AACd,iBAAO;AAAA,YACL,UAAU,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAAA,YACxE,MAAM,MAAM;AAAA,YACZ,QAAQ,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM;AAAA,YAC9D,QAAQ,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,MAAM,MAAM;AAAA,UACtE;AAAA,QACF,CAAC;AAAA,MACL,EACC,KAAK,CAAC;AAAA,IACX;AACA,UAAM,oBAAoB,CAAC;AAE3B,6BAAyB,QAAQ,CAAC,QAAQ;AACxC,UAAI,kBAAkB,CAAC,IAAI,QAAQ,IAAI;AACrC,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,GAAG,kBAAkB,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC;AAAA,MACvF,OAAO;AACL,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;AAAA,MACjD;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,MAAM,MAAM,MAAM,QAAQ,oBAAoB,cAAc,CAAC;AAE7E,QAAM,YAAY,WAAW,aAAa,OAAO,KAAK,UAAU,EAAE,QAAQ,EAAE;AAE5E,QAAM,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE,WAAU;AAAA,MACV,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,KAAK,MAAM;AACvC,cAAM,YAAY,WAAW,GAAG,KAAK,aAAa,aAAa,IAAI,IAAI;AACvE,cAAM,QAAQ,WAAW;AAEzB,eAAO,oBAAC;AAAA,UAAqB;AAAA,UAAsB;AAAA,UAAgC;AAAA,WAAL,GAAmB;AAAA,MACnG,CAAC;AAAA,KACH;AAAA,IAGF,CAAC,cAAc,YAAY,WAAW,UAAU;AAAA,EAClD;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { VerticalScrapperLine } from './VerticalScrapperLine';\n\nexport const VerticalScrapper = () => {\n  const {\n    xScale,\n    getBandwidth,\n    xScrollbarPosition,\n    containerRatio,\n    getXValue,\n    getYValue,\n    props: { xAxis, data },\n  } = useContext(ChartContext);\n\n  const isBandAxis = !!xScale.bandwidth;\n  const uniqueData = useMemo(() => {\n    let valueToPositionPerSeries;\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .filter((serie) => !serie.isHidden)\n        .map((serie) =>\n          serie.data.map((datum) => {\n            const x = getXValue(datum);\n            const y = getYValue(datum);\n            return {\n              position: xScale(x),\n              name: serie.name,\n              xValue: x,\n              yValue: y,\n            };\n          }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .filter((serie) => !serie.isHidden)\n        .map((serie) =>\n          serie.data\n            .filter((datum) => {\n              const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n              return (\n                xScaleValue >= xScrollbarPosition * (containerRatio ?? 1) &&\n                xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth\n              );\n            })\n            .map((datum) => {\n              return {\n                position: xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x),\n                name: serie.name,\n                xValue: xAxis.cols ? xAxis.cols[datum.position] : datum.value.x,\n                yValue: typeof datum.value === 'number' ? datum.value : datum.value.y,\n              };\n            }),\n        )\n        .flat(1);\n    }\n    const postionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (postionUniqueData[[set.position]]) {\n        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n      } else {\n        postionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return postionUniqueData;\n  }, [isBandAxis, data, getXValue, getYValue, xScale, xAxis.cols, xScrollbarPosition, containerRatio]);\n\n  const lineWidth = parseFloat(innerWidth / Object.keys(uniqueData).length, 10);\n\n  const render = useMemo(\n    () => (\n      <g className=\"vertical-scrapper\">\n        {Object.keys(uniqueData).map((key, i) => {\n          const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);\n          const datum = uniqueData[key];\n\n          return <VerticalScrapperLine lineWidth={lineWidth} xPosition={xPosition} key={key} datum={datum} />;\n        })}\n      </g>\n    ),\n\n    [getBandwidth, isBandAxis, lineWidth, uniqueData],\n  );\n\n  return render;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AAE9B,MAAM,mBAAmB,MAAM;AACpC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,KAAK;AAAA,EACvB,IAAI,WAAW,YAAY;AAE3B,QAAM,aAAa,CAAC,CAAC,OAAO;AAC5B,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI;AACJ,QAAI,YAAY;AACd,iCAA2B,KACxB,OAAO,CAAC,UAAU,CAAC,MAAM,QAAQ,EACjC;AAAA,QAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,UAAU;AACxB,gBAAM,IAAI,UAAU,KAAK;AACzB,gBAAM,IAAI,UAAU,KAAK;AACzB,iBAAO;AAAA,YACL,UAAU,OAAO,CAAC;AAAA,YAClB,MAAM,MAAM;AAAA,YACZ,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF,CAAC;AAAA,MACH,EACC,KAAK,CAAC;AAAA,IACX,OAAO;AACL,iCAA2B,KACxB,OAAO,CAAC,UAAU,CAAC,MAAM,QAAQ,EACjC;AAAA,QAAI,CAAC,UACJ,MAAM,KACH,OAAO,CAAC,UAAU;AACjB,gBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,iBACE,eAAe,sBAAsB,kBAAkB,MACvD,cAAc,sBAAsB,kBAAkB,KAAK;AAAA,QAE/D,CAAC,EACA,IAAI,CAAC,UAAU;AACd,iBAAO;AAAA,YACL,UAAU,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAAA,YACxE,MAAM,MAAM;AAAA,YACZ,QAAQ,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM;AAAA,YAC9D,QAAQ,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,MAAM,MAAM;AAAA,UACtE;AAAA,QACF,CAAC;AAAA,MACL,EACC,KAAK,CAAC;AAAA,IACX;AACA,UAAM,oBAAoB,CAAC;AAE3B,6BAAyB,QAAQ,CAAC,QAAQ;AACxC,UAAI,kBAAkB,CAAC,IAAI,QAAQ,IAAI;AACrC,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,GAAG,kBAAkB,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC;AAAA,MACvF,OAAO;AACL,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;AAAA,MACjD;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,MAAM,WAAW,WAAW,QAAQ,MAAM,MAAM,oBAAoB,cAAc,CAAC;AAEnG,QAAM,YAAY,WAAW,aAAa,OAAO,KAAK,UAAU,EAAE,QAAQ,EAAE;AAE5E,QAAM,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE,WAAU;AAAA,MACV,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,KAAK,MAAM;AACvC,cAAM,YAAY,WAAW,GAAG,KAAK,aAAa,aAAa,IAAI,IAAI;AACvE,cAAM,QAAQ,WAAW;AAEzB,eAAO,oBAAC;AAAA,UAAqB;AAAA,UAAsB;AAAA,UAAgC;AAAA,WAAL,GAAmB;AAAA,MACnG,CAAC;AAAA,KACH;AAAA,IAGF,CAAC,cAAc,YAAY,WAAW,UAAU;AAAA,EAClD;AAEA,SAAO;AACT;",
   "names": []
 }

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

@@ -22,9 +22,9 @@ const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {
     if (!isGrabbed)
       setScrapperPosX(xPosition);
   }, [isGrabbed, setScrapperPosX, xPosition]);
-  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;
-  const render = useMemo(() => {
-    return /* @__PURE__ */ jsxs("g", {
+  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : "4px";
+  const render = useMemo(
+    () => /* @__PURE__ */ jsxs("g", {
       children: [
         isActive && !isGrabbed ? /* @__PURE__ */ jsxs("g", {
           children: [
@@ -69,21 +69,22 @@ const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {
           y2: innerHeight
         })
       ]
-    });
-  }, [
-    isActive,
-    isGrabbed,
-    TooltipRenderer,
-    referenceElement,
-    theme.zIndex.tooltip,
-    scrapper.tooltipPreference,
-    scrapper.color,
-    datum,
-    xPosition,
-    innerHeight,
-    handleOnMouseEnter,
-    strokeDetectorWidth
-  ]);
+    }),
+    [
+      isActive,
+      isGrabbed,
+      TooltipRenderer,
+      referenceElement,
+      theme.zIndex.tooltip,
+      scrapper.tooltipPreference,
+      scrapper.color,
+      datum,
+      xPosition,
+      innerHeight,
+      handleOnMouseEnter,
+      strokeDetectorWidth
+    ]
+  );
   return render;
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scrapper/VerticalScrapperLine.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {\n  const {\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    innerWidth,\n    innerHeight,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n  const isActive = scrapperPosX === xPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosX(xPosition);\n  }, [isGrabbed, setScrapperPosX, xPosition]);\n\n  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;\n\n  const render = useMemo(() => {\n    return (\n      <g>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement}\n                  showPopover\n                  zIndex={theme.zIndex.tooltip}\n                  startPlacementPreference={scrapper.tooltipPreference}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={datum} />\n                  </StyledTooltipContainer>\n                </DSPopperJS>\n              </foreignObject>\n            ) : null}\n            <line\n              ref={setReferenceElement}\n              x1={xPosition}\n              strokeWidth=\"2px\"\n              stroke={scrapper.color}\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n              strokeDasharray={(4, 4)}\n            />\n          </g>\n        ) : null}\n\n        <line\n          onMouseOver={handleOnMouseEnter}\n          // onMouseLeave={() => setScrapperPosY('')}\n          // id=\"horizontal-scrapper-zone\"\n          x1={xPosition}\n          strokeWidth={strokeDetectorWidth}\n          stroke=\"transparent\"\n          y1={0}\n          x2={xPosition}\n          y2={innerHeight}\n        />\n      </g>\n    );\n  }, [\n    isActive,\n    isGrabbed,\n    TooltipRenderer,\n    referenceElement,\n    theme.zIndex.tooltip,\n    scrapper.tooltipPreference,\n    scrapper.color,\n    datum,\n    xPosition,\n    innerHeight,\n    handleOnMouseEnter,\n    strokeDetectorWidth,\n  ]);\n  return render;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,aAAa,UAAU,eAAe;AAClE,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,uBAAuB,CAAC,EAAE,WAAW,WAAW,MAAM,MAAM;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,YAAY;AAC3B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAgD;AAChG,QAAM,WAAW,iBAAiB;AAClC,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AAAA,EAC3C,GAAG,CAAC,WAAW,iBAAiB,SAAS,CAAC;AAE1C,QAAM,sBAAsB,OAAO,YAAY,OAAO,UAAU,IAAI;AAEpE,QAAM,SAAS,QAAQ,MAAM;AAC3B,WACE,qBAAC;AAAA,MACE;AAAA,oBAAY,CAAC,YACZ,qBAAC;AAAA,UACE;AAAA,8BACC,oBAAC;AAAA,cACC,+BAAC;AAAA,gBACC,kBAAgB;AAAA,gBAChB,cAAY;AAAA,gBACZ,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAW;AAAA,gBACX,QAAQ,MAAM,OAAO;AAAA,gBACrB,0BAA0B,SAAS;AAAA,gBAEnC;AAAA,sCAAC,+BAA4B;AAAA,kBAC7B,oBAAC;AAAA,oBACC,8BAAC;AAAA,sBAAgB,MAAM;AAAA,qBAAO;AAAA,mBAChC;AAAA;AAAA,eACF;AAAA,aACF,IACE;AAAA,YACJ,oBAAC;AAAA,cACC,KAAK;AAAA,cACL,IAAI;AAAA,cACJ,aAAY;AAAA,cACZ,QAAQ,SAAS;AAAA,cACjB,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,kBAAkB,GAAG;AAAA,aACvB;AAAA;AAAA,SACF,IACE;AAAA,QAEJ,oBAAC;AAAA,UACC,aAAa;AAAA,UAGb,IAAI;AAAA,UACJ,aAAa;AAAA,UACb,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,SACN;AAAA;AAAA,KACF;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM,OAAO;AAAA,IACb,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useState, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../../styles';\n\nexport const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {\n  const {\n    scrapperPosX,\n    setScrapperPosX,\n    isGrabbed,\n    xScale,\n    innerWidth,\n    innerHeight,\n    props: { TooltipRenderer, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n  const isActive = scrapperPosX === xPosition;\n  const handleOnMouseEnter = useCallback(() => {\n    if (!isGrabbed) setScrapperPosX(xPosition);\n  }, [isGrabbed, setScrapperPosX, xPosition]);\n\n  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : '4px';\n\n  const render = useMemo(\n    () => (\n      <g>\n        {isActive && !isGrabbed ? (\n          <g>\n            {TooltipRenderer ? (\n              <foreignObject>\n                <DSPopperJS\n                  withoutAnimation\n                  withoutArrow\n                  customOffset={[0, 5]}\n                  referenceElement={referenceElement}\n                  showPopover\n                  zIndex={theme.zIndex.tooltip}\n                  startPlacementPreference={scrapper.tooltipPreference}\n                >\n                  <StyledMouseOverDetectionBox />\n                  <StyledTooltipContainer>\n                    <TooltipRenderer data={datum} />\n                  </StyledTooltipContainer>\n                </DSPopperJS>\n              </foreignObject>\n            ) : null}\n            <line\n              ref={setReferenceElement}\n              x1={xPosition}\n              strokeWidth=\"2px\"\n              stroke={scrapper.color}\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n              strokeDasharray={(4, 4)}\n            />\n          </g>\n        ) : null}\n\n        <line\n          onMouseOver={handleOnMouseEnter}\n          // onMouseLeave={() => setScrapperPosY('')}\n          // id=\"horizontal-scrapper-zone\"\n          x1={xPosition}\n          strokeWidth={strokeDetectorWidth}\n          stroke=\"transparent\"\n          y1={0}\n          x2={xPosition}\n          y2={innerHeight}\n        />\n      </g>\n    ),\n    [\n      isActive,\n      isGrabbed,\n      TooltipRenderer,\n      referenceElement,\n      theme.zIndex.tooltip,\n      scrapper.tooltipPreference,\n      scrapper.color,\n      datum,\n      xPosition,\n      innerHeight,\n      handleOnMouseEnter,\n      strokeDetectorWidth,\n    ],\n  );\n  return render;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,aAAa,UAAU,eAAe;AAClE,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,uBAAuB,CAAC,EAAE,WAAW,WAAW,MAAM,MAAM;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,IAAI,WAAW,YAAY;AAC3B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAgD;AAChG,QAAM,WAAW,iBAAiB;AAClC,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,CAAC;AAAW,sBAAgB,SAAS;AAAA,EAC3C,GAAG,CAAC,WAAW,iBAAiB,SAAS,CAAC;AAE1C,QAAM,sBAAsB,OAAO,YAAY,OAAO,UAAU,IAAI;AAEpE,QAAM,SAAS;AAAA,IACb,MACE,qBAAC;AAAA,MACE;AAAA,oBAAY,CAAC,YACZ,qBAAC;AAAA,UACE;AAAA,8BACC,oBAAC;AAAA,cACC,+BAAC;AAAA,gBACC,kBAAgB;AAAA,gBAChB,cAAY;AAAA,gBACZ,cAAc,CAAC,GAAG,CAAC;AAAA,gBACnB;AAAA,gBACA,aAAW;AAAA,gBACX,QAAQ,MAAM,OAAO;AAAA,gBACrB,0BAA0B,SAAS;AAAA,gBAEnC;AAAA,sCAAC,+BAA4B;AAAA,kBAC7B,oBAAC;AAAA,oBACC,8BAAC;AAAA,sBAAgB,MAAM;AAAA,qBAAO;AAAA,mBAChC;AAAA;AAAA,eACF;AAAA,aACF,IACE;AAAA,YACJ,oBAAC;AAAA,cACC,KAAK;AAAA,cACL,IAAI;AAAA,cACJ,aAAY;AAAA,cACZ,QAAQ,SAAS;AAAA,cACjB,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,cACJ,kBAAkB,GAAG;AAAA,aACvB;AAAA;AAAA,SACF,IACE;AAAA,QAEJ,oBAAC;AAAA,UACC,aAAa;AAAA,UAGb,IAAI;AAAA,UACJ,aAAa;AAAA,UACb,QAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI;AAAA,SACN;AAAA;AAAA,KACF;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM,OAAO;AAAA,MACb,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

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

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

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

@@ -14,14 +14,14 @@ const SeriesFactory = () => {
   } = useContext(ChartContext);
   return /* @__PURE__ */ jsx("g", {
     className: "content",
-    children: data.map((serie) => {
+    children: data.filter((serie) => !serie.isHidden).map((serie) => {
       const serieProps = {
         key: serie.key,
         serie: {
           ...serie,
           data: containerRatio > 1 ? serie.data.filter((datum) => {
             const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);
-            return xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 20 * containerRatio && xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 20 * containerRatio;
+            return xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 40 * containerRatio && xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 40 * containerRatio;
           }) : serie.data
         }
       };

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 } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { throttle } from 'lodash';\nexport const SeriesFactory = () => {\n  const {\n    props: { data, xAxis, groups, types },\n    xScrollbarPosition,\n    innerWidth,\n    xScale,\n    containerRatio,\n  } = useContext(ChartContext);\n\n  return (\n    <g className=\"content\">\n      {\n        data.map((serie) => {\n          const serieProps = {\n            key: serie.key,\n            // @todo fix this for both axis make a hook useVirtualize\n            serie: {\n              ...serie,\n              data:\n                containerRatio > 1\n                  ? serie.data.filter((datum) => {\n                      const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n                      return (\n                        xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 20 * containerRatio &&\n                        xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 20 * containerRatio\n                      );\n                    })\n                  : serie.data,\n            },\n          };\n          if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n            return <StackedBar {...serieProps} />;\n          }\n          if (serie.type === 'bar') {\n            return <Bars {...serieProps} />;\n          }\n          if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n            return <Points {...serieProps} />;\n          }\n          if (serie.type === 'line') {\n            return <Line {...serieProps} />;\n          }\n          if (serie.type === 'area') {\n            return <Area {...serieProps} />;\n          }\n          return <></>;\n        }) as JSX.Element[]\n      }\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,SAAgB,kBAA2B;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,MAAM,QAAQ,MAAM,YAAY,YAAY;AACrD,SAAS,uBAAuB;AAEzB,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,SACE,oBAAC;AAAA,IAAE,WAAU;AAAA,IAET,eAAK,IAAI,CAAC,UAAU;AAClB,YAAM,aAAa;AAAA,QACjB,KAAK,MAAM;AAAA,QAEX,OAAO;AAAA,UACL,GAAG;AAAA,UACH,MACE,iBAAiB,IACb,MAAM,KAAK,OAAO,CAAC,UAAU;AAC3B,kBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,mBACE,cAAc,sBAAsB,kBAAkB,KAAK,KAAK,kBAChE,cAAc,sBAAsB,kBAAkB,KAAK,aAAa,KAAK;AAAA,UAEjF,CAAC,IACD,MAAM;AAAA,QACd;AAAA,MACF;AACA,UAAI,MAAM,SAAS,SAAS,UAAU,gBAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,eAAO,oBAAC;AAAA,UAAY,GAAG;AAAA,SAAY;AAAA,MACrC;AACA,UAAI,MAAM,SAAS,OAAO;AACxB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,eAAO,oBAAC;AAAA,UAAQ,GAAG;AAAA,SAAY;AAAA,MACjC;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,aAAO,gCAAE;AAAA,IACX,CAAC;AAAA,GAEL;AAEJ;",
+  "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 } from '../series';\nimport { getStackedIndex } from '../helpers';\nimport { throttle } from 'lodash';\nexport const SeriesFactory = () => {\n  const {\n    props: { data, xAxis, groups, types },\n    xScrollbarPosition,\n    innerWidth,\n    xScale,\n    containerRatio,\n  } = useContext(ChartContext);\n\n  return (\n    <g className=\"content\">\n      {\n        data\n          .filter((serie) => !serie.isHidden)\n          .map((serie) => {\n            const serieProps = {\n              key: serie.key,\n              // @todo fix this for both axis make a hook useVirtualize\n              serie: {\n                ...serie,\n                data:\n                  containerRatio > 1\n                    ? serie.data.filter((datum) => {\n                        const xScaleValue = xScale(xAxis.cols ? xAxis.cols[datum.position] : datum.value.x);\n                        return (\n                          xScaleValue > xScrollbarPosition * (containerRatio ?? 1) - 40 * containerRatio &&\n                          xScaleValue < xScrollbarPosition * (containerRatio ?? 1) + innerWidth + 40 * containerRatio\n                        );\n                      })\n                    : serie.data,\n              },\n            };\n            if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n              return <StackedBar {...serieProps} />;\n            }\n            if (serie.type === 'bar') {\n              return <Bars {...serieProps} />;\n            }\n            if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n              return <Points {...serieProps} />;\n            }\n            if (serie.type === 'line') {\n              return <Line {...serieProps} />;\n            }\n            if (serie.type === 'area') {\n              return <Area {...serieProps} />;\n            }\n            return <></>;\n          }) as JSX.Element[]\n      }\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAGA,SAAgB,kBAA2B;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,MAAM,QAAQ,MAAM,YAAY,YAAY;AACrD,SAAS,uBAAuB;AAEzB,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,OAAO,QAAQ,MAAM;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,SACE,oBAAC;AAAA,IAAE,WAAU;AAAA,IAET,eACG,OAAO,CAAC,UAAU,CAAC,MAAM,QAAQ,EACjC,IAAI,CAAC,UAAU;AACd,YAAM,aAAa;AAAA,QACjB,KAAK,MAAM;AAAA,QAEX,OAAO;AAAA,UACL,GAAG;AAAA,UACH,MACE,iBAAiB,IACb,MAAM,KAAK,OAAO,CAAC,UAAU;AAC3B,kBAAM,cAAc,OAAO,MAAM,OAAO,MAAM,KAAK,MAAM,YAAY,MAAM,MAAM,CAAC;AAClF,mBACE,cAAc,sBAAsB,kBAAkB,KAAK,KAAK,kBAChE,cAAc,sBAAsB,kBAAkB,KAAK,aAAa,KAAK;AAAA,UAEjF,CAAC,IACD,MAAM;AAAA,QACd;AAAA,MACF;AACA,UAAI,MAAM,SAAS,SAAS,UAAU,gBAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,eAAO,oBAAC;AAAA,UAAY,GAAG;AAAA,SAAY;AAAA,MACrC;AACA,UAAI,MAAM,SAAS,OAAO;AACxB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,eAAO,oBAAC;AAAA,UAAQ,GAAG;AAAA,SAAY;AAAA,MACjC;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,aAAO,gCAAE;AAAA,IACX,CAAC;AAAA,GAEP;AAEJ;",
   "names": []
 }

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

@@ -6,23 +6,27 @@ import { ChartContext } from "../ChartContext";
 import { FocusableRegion } from "../parts/FocusableRegion";
 const Bars = ({ serie }) => {
   const {
-    props: { xAxis, yAxis, TooltipRenderer },
+    props: { yAxis, TooltipRenderer },
     innerHeight,
     xScale,
     yScale,
+    y2Scale,
     subGroupScale,
-    colorScale
+    colorScale,
+    getXValue,
+    getYValue,
+    isHorizontal
   } = useContext(ChartContext);
-  const isHorizontal = !!yScale.bandwidth;
+  const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
   return /* @__PURE__ */ jsx("g", {
     fill: colorScale(serie.name),
     children: serie.data.map((bar, i) => {
       const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();
-      const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - yScale(bar.value.y ?? bar.value);
-      const x = !isHorizontal ? xAxis?.cols?.[i] ?? bar.value.x ?? i : bar.value.x ?? bar.value;
-      const y = !isHorizontal ? bar.value.y ?? bar.value : yAxis?.cols?.[i] ?? bar.value.x ?? i;
-      const transformX = isHorizontal ? 0 : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? width / 2 * subGroupScale.domain().length : 0);
-      const transformY = isHorizontal ? subGroupScale(serie.name) + yScale(yAxis?.cols?.[i] ?? i) : yScale(y);
+      const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - finalYScale(bar.value.y ?? bar.value);
+      const x = getXValue(bar);
+      const y = getYValue(bar);
+      const transformX = isHorizontal ? 0 : subGroupScale(serie.name) + xScale(x);
+      const transformY = isHorizontal ? subGroupScale(serie.name) + finalYScale(yAxis?.cols?.[i] ?? i) : finalYScale(y);
       return /* @__PURE__ */ jsxs("g", {
         transform: `translate(${transformX},${transformY})`,
         children: [

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';\nimport { FocusableRegion } from '../parts/FocusableRegion';\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const Bars = ({ serie }: BarsT) => {\n  const {\n    props: { xAxis, yAxis, TooltipRenderer },\n    innerHeight,\n    xScale,\n    yScale,\n    subGroupScale,\n    colorScale,\n  } = useContext(ChartContext);\n\n  const isHorizontal = !!(yScale as ScaleBand<string>).bandwidth;\n  return (\n    <g fill={colorScale(serie.name)}>\n      {serie.data.map((bar, i) => {\n        const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();\n        const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - yScale(bar.value.y ?? bar.value);\n\n        const x = !isHorizontal ? xAxis?.cols?.[i] ?? bar.value.x ?? i : bar.value.x ?? bar.value;\n        const y = !isHorizontal ? bar.value.y ?? bar.value : yAxis?.cols?.[i] ?? bar.value.x ?? i;\n\n        const transformX = isHorizontal\n          ? 0\n          : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n        const transformY = isHorizontal ? subGroupScale(serie.name) + yScale(yAxis?.cols?.[i] ?? i) : yScale(y);\n\n        return (\n          <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n            <Rect width={width} height={height} id={bar.key} />\n            {TooltipRenderer && (\n              <FocusableRegion\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\n            )}\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,SAAS,uBAAuB;AAIzB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAa;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO,gBAAgB;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,eAAe,CAAC,CAAE,OAA6B;AACrD,SACE,oBAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAC3B,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,QAAQ,eAAe,OAAO,IAAI,KAAK,IAAI,eAAe,UAAU;AAC1E,YAAM,SAAS,eAAe,eAAe,UAAU,IAAI,cAAc,OAAO,IAAI,MAAM,KAAK,IAAI,KAAK;AAExG,YAAM,IAAI,CAAC,eAAe,OAAO,OAAO,MAAM,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,IAAI;AACpF,YAAM,IAAI,CAAC,eAAe,IAAI,MAAM,KAAK,IAAI,QAAQ,OAAO,OAAO,MAAM,IAAI,MAAM,KAAK;AAExF,YAAM,aAAa,eACf,IACA,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,IAAK,QAAQ,IAAK,cAAc,OAAO,EAAE,SAAS;AACzG,YAAM,aAAa,eAAe,cAAc,MAAM,IAAI,IAAI,OAAO,OAAO,OAAO,MAAM,CAAC,IAAI,OAAO,CAAC;AAEtG,aACE,qBAAC;AAAA,QAAgB,WAAW,aAAa,cAAc;AAAA,QACrD;AAAA,8BAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,WAAK;AAAA,UAChD,mBACC,oBAAC;AAAA,YACC,IAAI,IAAI;AAAA,YACR;AAAA,YACA;AAAA,YACA,SAAS,oBAAC;AAAA,cAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,aAAG;AAAA,WAChF;AAAA;AAAA,SARI,IAAI,GAUZ;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["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';\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    isHorizontal,\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  return (\n    <g fill={colorScale(serie.name)}>\n      {serie.data.map((bar, i) => {\n        const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();\n        const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - finalYScale(bar.value.y ?? bar.value);\n\n        const x = getXValue(bar);\n        const y = getYValue(bar);\n\n        const transformX = isHorizontal ? 0 : 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        const transformY = isHorizontal\n          ? subGroupScale(serie.name) + finalYScale(yAxis?.cols?.[i] ?? i)\n          : finalYScale(y);\n\n        return (\n          <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n            <Rect width={width} height={height} id={bar.key} />\n            {TooltipRenderer && (\n              <FocusableRegion\n                id={bar.key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n              />\n            )}\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,SAAS,uBAAuB;AAIzB,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,SACE,oBAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAC3B,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,QAAQ,eAAe,OAAO,IAAI,KAAK,IAAI,eAAe,UAAU;AAC1E,YAAM,SAAS,eAAe,eAAe,UAAU,IAAI,cAAc,YAAY,IAAI,MAAM,KAAK,IAAI,KAAK;AAE7G,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AAEvB,YAAM,aAAa,eAAe,IAAI,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAO1E,YAAM,aAAa,eACf,cAAc,MAAM,IAAI,IAAI,YAAY,OAAO,OAAO,MAAM,CAAC,IAC7D,YAAY,CAAC;AAEjB,aACE,qBAAC;AAAA,QAAgB,WAAW,aAAa,cAAc;AAAA,QACrD;AAAA,8BAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,IAAI,IAAI;AAAA,WAAK;AAAA,UAChD,mBACC,oBAAC;AAAA,YACC,IAAI,IAAI;AAAA,YACR;AAAA,YACA;AAAA,YACA,SAAS,oBAAC;AAAA,cAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,aAAG;AAAA,WAChF;AAAA;AAAA,SARI,IAAI,GAUZ;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -11,7 +11,9 @@ const Line = ({ serie }) => {
     xScale,
     yScale,
     y2Scale,
-    colorScale
+    colorScale,
+    getXValue,
+    getYValue
   } = useContext(ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
   const lineTypeMap = {
@@ -19,8 +21,8 @@ const Line = ({ serie }) => {
     spline: curveNatural
   };
   const lineD3 = useMemo(
-    () => line().x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position)).y((d) => finalYScale(d.value.y ?? d.value)).curve(lineTypeMap[serie.type] ?? curveLinear)(serie.data),
-    [lineTypeMap, serie.type, serie.data, xScale, xAxis?.cols, finalYScale]
+    () => line().x((d) => xScale(getXValue(d))).y((d) => finalYScale(getYValue(d))).curve(lineTypeMap[serie.type] ?? curveLinear)(serie.data),
+    [lineTypeMap, serie.type, serie.data, xScale, getXValue, finalYScale, getYValue]
   );
   const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;
   return /* @__PURE__ */ jsxs("g", {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Line.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useState } from 'react';\nimport { line, curveNatural, curveLinear } from 'd3';\nimport { StyledLine } from '../styles';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\n\nexport const Line = ({ serie }) => {\n  const {\n    props: { xAxis },\n    xScale,\n    yScale,\n    y2Scale,\n    colorScale,\n    // activeSerie,\n    // setActiveSerie,\n  } = useContext(ChartContext);\n\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n  const lineTypeMap = {\n    line: curveLinear,\n    spline: curveNatural,\n  };\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n        .y((d) => finalYScale(d.value.y ?? d.value))\n        .curve(lineTypeMap[serie.type] ?? curveLinear)(serie.data),\n    [lineTypeMap, serie.type, serie.data, xScale, xAxis?.cols, finalYScale],\n  );\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;\n\n  return (\n    <g\n      transform={`translate(${xTranslate}, 0)`}\n      // onMouseEnter={() => setActiveSerie(serie.key)}\n      // onMouseLeave={() => setActiveSerie('')}\n    >\n      <StyledLine d={lineD3} stroke={colorScale(serie.name)} />\n      <Points serie={serie} />\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAyB;AACrD,SAAS,MAAM,cAAc,mBAAmB;AAChD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAEtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAGF,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AACrD,QAAM,cAAc;AAAA,IAClB,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAEA,QAAM,SAAS;AAAA,IACb,MACE,KAAK,EACF,EAAE,CAAC,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EACrE,EAAE,CAAC,MAAM,YAAY,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC1C,MAAM,YAAY,MAAM,SAAS,WAAW,EAAE,MAAM,IAAI;AAAA,IAC7D,CAAC,aAAa,MAAM,MAAM,MAAM,MAAM,QAAQ,OAAO,MAAM,WAAW;AAAA,EACxE;AAIA,QAAM,cAAc,QAAQ,YAAY,KAAK,KAAK;AAElD,SACE,qBAAC;AAAA,IACC,WAAW,aAAa;AAAA,IAIxB;AAAA,0BAAC;AAAA,QAAW,GAAG;AAAA,QAAQ,QAAQ,WAAW,MAAM,IAAI;AAAA,OAAG;AAAA,MACvD,oBAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useState } from 'react';\nimport { line, curveNatural, curveLinear } from 'd3';\nimport { StyledLine } from '../styles';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\n\nexport const Line = ({ serie }) => {\n  const {\n    props: { xAxis },\n    xScale,\n    yScale,\n    y2Scale,\n    colorScale,\n    getXValue,\n    getYValue,\n  } = useContext(ChartContext);\n\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n  const lineTypeMap = {\n    line: curveLinear,\n    spline: curveNatural,\n  };\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(getXValue(d)))\n        .y((d) => finalYScale(getYValue(d)))\n        .curve(lineTypeMap[serie.type] ?? curveLinear)(serie.data),\n    [lineTypeMap, serie.type, serie.data, xScale, getXValue, finalYScale, getYValue],\n  );\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;\n\n  return (\n    <g\n      transform={`translate(${xTranslate}, 0)`}\n      // onMouseEnter={() => setActiveSerie(serie.key)}\n      // onMouseLeave={() => setActiveSerie('')}\n    >\n      <StyledLine d={lineD3} stroke={colorScale(serie.name)} />\n      <Points serie={serie} />\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAyB;AACrD,SAAS,MAAM,cAAc,mBAAmB;AAChD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAEtB,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,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AACrD,QAAM,cAAc;AAAA,IAClB,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAEA,QAAM,SAAS;AAAA,IACb,MACE,KAAK,EACF,EAAE,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC,CAAC,EAC7B,EAAE,CAAC,MAAM,YAAY,UAAU,CAAC,CAAC,CAAC,EAClC,MAAM,YAAY,MAAM,SAAS,WAAW,EAAE,MAAM,IAAI;AAAA,IAC7D,CAAC,aAAa,MAAM,MAAM,MAAM,MAAM,QAAQ,WAAW,aAAa,SAAS;AAAA,EACjF;AAIA,QAAM,cAAc,QAAQ,YAAY,KAAK,KAAK;AAElD,SACE,qBAAC;AAAA,IACC,WAAW,aAAa;AAAA,IAIxB;AAAA,0BAAC;AAAA,QAAW,GAAG;AAAA,QAAQ,QAAQ,WAAW,MAAM,IAAI;AAAA,OAAG;AAAA,MACvD,oBAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
   "names": []
 }

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

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useContext } from "react";
 import { Point } from "./Point";
 import { ChartContext } from "../ChartContext";
+import { getStackedData } from "../helpers";
 import { FocusableRegion } from "../parts/FocusableRegion";
 const Points = ({ serie }) => {
   const {
@@ -10,6 +11,8 @@ const Points = ({ serie }) => {
     xScale,
     y2Scale,
     yScale,
+    getXValue,
+    getYValue,
     stackedData,
     props: { xAxis, data, TooltipRenderer, types }
   } = useContext(ChartContext);
@@ -20,10 +23,12 @@ const Points = ({ serie }) => {
       fill: colorScale(serie.name),
       children: serie.data.map((point, i) => {
         const { pointRadius } = serie;
-        const x = point.value.x ?? xAxis?.cols?.[point.position];
-        const y = point.value.y ?? point.value;
+        const serieWithStackedValues = getStackedData(stackedData, serie);
+        const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;
+        const x = getXValue(point);
+        const y = getYValue(point);
         const xPosition = xScale(x);
-        const yPosition = finalYScale(y);
+        const yPosition = finalYScale(y + deltaY);
         return /* @__PURE__ */ jsxs("g", {
           transform: `translate(${xPosition},${yPosition})`,
           children: [
@@ -48,7 +53,7 @@ const Points = ({ serie }) => {
         }, `${point.key}-p`);
       })
     }),
-    [TooltipRenderer, colorScale, finalYScale, opacity, serie, xAxis?.cols, xScale]
+    [TooltipRenderer, colorScale, finalYScale, getXValue, opacity, serie, stackedData, xScale]
   );
   return render;
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Points.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Point } from './Point';\nimport { ChartContext } from '../ChartContext';\n// import { getStackedData } from '../helpers';\nimport { FocusableRegion } from '../parts/FocusableRegion';\n\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    stackedData,\n    props: { xAxis, data, TooltipRenderer, types },\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const opacity = useMemo(() => (types === 'scatter' ? 0.8 : 1), [serie.type]);\n  const render = useMemo(\n    () => (\n      <g fill={colorScale(serie.name)}>\n        {serie.data.map((point, i) => {\n          const { pointRadius } = serie;\n          // const serieWithStackedValues = getStackedData(stackedData, serie);\n          // const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n          const x = point.value.x ?? xAxis?.cols?.[point.position];\n          const y = point.value.y ?? point.value;\n          const xPosition = xScale(x);\n          // const yPosition = finalYScale(y + deltaY);\n          const yPosition = finalYScale(y);\n\n          return (\n            <g\n              key={`${point.key}-p`}\n              transform={`translate(${xPosition},${yPosition})`}\n              // onMouseEnter={() => setActiveSerie(serie.key)}\n              // onMouseLeave={() => setActiveSerie('')}\n            >\n              <Point pointRadius={pointRadius} id={point.key} opacity={opacity} x={xPosition} y={yPosition} />\n              {TooltipRenderer && (\n                <FocusableRegion\n                  id={point.key}\n                  width={pointRadius * 2}\n                  height={pointRadius * 2}\n                  pointRadius={pointRadius}\n                  style={{ transform: `translate(-${pointRadius}px, -${pointRadius}px)` }}\n                  content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n                />\n              )}\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [TooltipRenderer, colorScale, finalYScale, opacity, serie, xAxis?.cols, xScale],\n  );\n  return render;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAE7B,SAAS,uBAAuB;AAEzB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM,iBAAiB,MAAM;AAAA,EAC/C,IAAI,WAAW,YAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,UAAU,QAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,QAAM,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,cAAM,EAAE,YAAY,IAAI;AAGxB,cAAM,IAAI,MAAM,MAAM,KAAK,OAAO,OAAO,MAAM;AAC/C,cAAM,IAAI,MAAM,MAAM,KAAK,MAAM;AACjC,cAAM,YAAY,OAAO,CAAC;AAE1B,cAAM,YAAY,YAAY,CAAC;AAE/B,eACE,qBAAC;AAAA,UAEC,WAAW,aAAa,aAAa;AAAA,UAIrC;AAAA,gCAAC;AAAA,cAAM;AAAA,cAA0B,IAAI,MAAM;AAAA,cAAK;AAAA,cAAkB,GAAG;AAAA,cAAW,GAAG;AAAA,aAAW;AAAA,YAC7F,mBACC,oBAAC;AAAA,cACC,IAAI,MAAM;AAAA,cACV,OAAO,cAAc;AAAA,cACrB,QAAQ,cAAc;AAAA,cACtB;AAAA,cACA,OAAO,EAAE,WAAW,cAAc,mBAAmB,iBAAiB;AAAA,cACtE,SAAS,oBAAC;AAAA,gBAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,eAAG;AAAA,aAChF;AAAA;AAAA,WAdG,GAAG,MAAM,OAgBhB;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,iBAAiB,YAAY,aAAa,SAAS,OAAO,OAAO,MAAM,MAAM;AAAA,EAChF;AACA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Point } from './Point';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\nimport { FocusableRegion } from '../parts/FocusableRegion';\n\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    getXValue,\n    getYValue,\n    stackedData,\n    props: { xAxis, data, TooltipRenderer, types },\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const opacity = useMemo(() => (types === 'scatter' ? 0.8 : 1), [serie.type]);\n  const render = useMemo(\n    () => (\n      <g fill={colorScale(serie.name)}>\n        {serie.data.map((point, i) => {\n          const { pointRadius } = serie;\n          // we need to recalculate the height  with stacked data if is an AREA STACKED ELEMENT\n          const serieWithStackedValues = getStackedData(stackedData, serie);\n          const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n          const x = getXValue(point);\n          const y = getYValue(point);\n          const xPosition = xScale(x);\n          const yPosition = finalYScale(y + deltaY);\n\n          return (\n            <g\n              key={`${point.key}-p`}\n              transform={`translate(${xPosition},${yPosition})`}\n              // onMouseEnter={() => setActiveSerie(serie.key)}\n              // onMouseLeave={() => setActiveSerie('')}\n            >\n              <Point pointRadius={pointRadius} id={point.key} opacity={opacity} x={xPosition} y={yPosition} />\n              {TooltipRenderer && (\n                <FocusableRegion\n                  id={point.key}\n                  width={pointRadius * 2}\n                  height={pointRadius * 2}\n                  pointRadius={pointRadius}\n                  style={{ transform: `translate(-${pointRadius}px, -${pointRadius}px)` }}\n                  content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n                />\n              )}\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [TooltipRenderer, colorScale, finalYScale, getXValue, opacity, serie, stackedData, xScale],\n  );\n  return render;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAEzB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM,iBAAiB,MAAM;AAAA,EAC/C,IAAI,WAAW,YAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,UAAU,QAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,QAAM,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,cAAM,EAAE,YAAY,IAAI;AAExB,cAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,cAAM,SAAS,yBAAyB,uBAAuB,GAAG,KAAK;AACvE,cAAM,IAAI,UAAU,KAAK;AACzB,cAAM,IAAI,UAAU,KAAK;AACzB,cAAM,YAAY,OAAO,CAAC;AAC1B,cAAM,YAAY,YAAY,IAAI,MAAM;AAExC,eACE,qBAAC;AAAA,UAEC,WAAW,aAAa,aAAa;AAAA,UAIrC;AAAA,gCAAC;AAAA,cAAM;AAAA,cAA0B,IAAI,MAAM;AAAA,cAAK;AAAA,cAAkB,GAAG;AAAA,cAAW,GAAG;AAAA,aAAW;AAAA,YAC7F,mBACC,oBAAC;AAAA,cACC,IAAI,MAAM;AAAA,cACV,OAAO,cAAc;AAAA,cACrB,QAAQ,cAAc;AAAA,cACtB;AAAA,cACA,OAAO,EAAE,WAAW,cAAc,mBAAmB,iBAAiB;AAAA,cACtE,SAAS,oBAAC;AAAA,gBAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,eAAG;AAAA,aAChF;AAAA;AAAA,WAdG,GAAG,MAAM,OAgBhB;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,iBAAiB,YAAY,aAAa,WAAW,SAAS,OAAO,aAAa,MAAM;AAAA,EAC3F;AACA,SAAO;AACT;",
   "names": []
 }

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

@@ -5,5 +5,4 @@ export * from "./StackedBar";
 export * from "./Points";
 export * from "./Line";
 export * from "./Area";
-export * from "./Pie";
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Rect';\nexport * from './Bars';\nexport * from './StackedBar';\nexport * from './Points';\nexport * from './Line';\nexport * from './Area';\nexport * from './Pie';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Rect';\nexport * from './Bars';\nexport * from './StackedBar';\nexport * from './Points';\nexport * from './Line';\nexport * from './Area';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }