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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/BottomLegend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo, useEffect, useRef, useState } from 'react';\nimport { selectAll, select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\n\nexport const BottomLegend = () => {\n  const {\n    colorScale,\n    innerWidth,\n    innerHeight,\n    internalMargin,\n    setBottomLegend,\n    props: { height },\n  } = useContext(ChartContext);\n\n  const ref = useRef(null);\n  const firstRender = useRef(true);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2);\n  useEffect(() => {\n    if (ref.current && firstRender.current) {\n      const cells = selectAll('.cell');\n      const padding = 40;\n      let offset = 0;\n      cells.each((d, i) => {\n        if (cells._groups[0][i - 1]) {\n          const lastCell = select(cells._groups[0][i - 1]);\n          const d3sel = select(cells._groups[0][i]);\n\n          const { width } = lastCell.node().getBBox();\n          offset += width + padding;\n          d3sel.attr('transform', `translate(${offset}, 0)`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform((prev) => prev - bounds.width / 2);\n      firstRender.current = false;\n    }\n  }, []);\n\n  const render = useMemo(\n    () => (\n      <g ref={setBottomLegend}>\n        <g\n          ref={ref}\n          transform={`translate(${xTransform + internalMargin.left}, ${height - 30})`}\n          className=\"bottom-legend\"\n        >\n          <rect height={40} width={1} fill=\"transparent\" />\n          {colorScale.domain().map((domainValue, i) => (\n            <g className=\"cell\">\n              <circle fill={colorScale(domainValue)} r={4} />\n              <text x={10} dy=\".32em\">\n                {domainValue}\n              </text>\n            </g>\n          ))}\n        </g>\n      </g>\n    ),\n\n    [colorScale, height, setBottomLegend, xTransform],\n  );\n\n  return render;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAwE;AACxE,gBAAkC;AAClC,0BAA6B;AAEtB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO;AAAA,EAClB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,aAAa,CAAC;AAC3D,8BAAU,MAAM;AACd,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,YAAQ,qBAAU,OAAO;AAC/B,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,eAAW,kBAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,YAAQ,kBAAO,MAAM,QAAQ,GAAG,EAAE;AAExC,gBAAM,EAAE,MAAM,IAAI,SAAS,KAAK,EAAE,QAAQ;AAC1C,oBAAU,QAAQ;AAClB,gBAAM,KAAK,aAAa,aAAa,YAAY;AAAA,QACnD;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,QAAQ,CAAC;AAC/C,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,aAAS;AAAA,IACb,MACE,4CAAC;AAAA,MAAE,KAAK;AAAA,MACN,uDAAC;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,SAAS;AAAA,QACtE,WAAU;AAAA,QAEV;AAAA,sDAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,6CAAC;AAAA,YAAE,WAAU;AAAA,YACX;AAAA,0DAAC;AAAA,gBAAO,MAAM,WAAW,WAAW;AAAA,gBAAG,GAAG;AAAA,eAAG;AAAA,cAC7C,4CAAC;AAAA,gBAAK,GAAG;AAAA,gBAAI,IAAG;AAAA,gBACb;AAAA,eACH;AAAA;AAAA,WACF,CACD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,QAAQ,iBAAiB,UAAU;AAAA,EAClD;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import React, { useContext, useMemo, useEffect, useRef, useState } from 'react';\nimport { selectAll, select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n  const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabel, internalMargin, setBottomLegend } =\n    useContext(ChartContext);\n\n  const ref = useRef(null);\n  const firstRender = useRef(true);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2);\n  useEffect(() => {\n    if (ref.current && firstRender.current) {\n      const cells = selectAll('.cell');\n      const padding = 30;\n      let offset = 0;\n      let verticalOffset = 0;\n\n      cells.each((d, i) => {\n        if (cells._groups[0][i - 1]) {\n          const lastCell = select(cells._groups[0][i - 1]);\n          const d3sel = select(cells._groups[0][i]);\n\n          const { width } = lastCell.node().getBBox();\n          if (offset + width + padding > innerWidth - innerWidth / 3) {\n            offset = 0;\n            verticalOffset += 20;\n          } else {\n            offset += width + padding;\n          }\n\n          d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform((prev) => prev - bounds.width / 2);\n      firstRender.current = false;\n    }\n  }, [innerWidth]);\n\n  const margin = useMemo(() => {\n    let counter = 0;\n    if (bottomLabel) {\n      counter += bottomLabel?.getBoundingClientRect().height + 25;\n    }\n    if (axisBottomHeight) {\n      counter += axisBottomHeight?.getBoundingClientRect().height;\n    }\n    return counter;\n  }, [bottomLabel, axisBottomHeight]);\n\n  return useMemo(\n    () => (\n      <g ref={setBottomLegend}>\n        <g\n          ref={ref}\n          transform={`translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`}\n          className=\"bottom-legend\"\n        >\n          <rect height={40} width={1} fill=\"transparent\" />\n          {colorScale.domain().map((domainValue, i) => (\n            <LegendItem domainValue={domainValue} key={domainValue} />\n          ))}\n        </g>\n      </g>\n    ),\n\n    [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAwE;AACxE,gBAAkC;AAClC,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,aAAa,gBAAgB,gBAAgB,QAC1G,yBAAW,gCAAY;AAEzB,QAAM,UAAM,qBAAO,IAAI;AACvB,QAAM,kBAAc,qBAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,aAAa,CAAC;AAC3D,8BAAU,MAAM;AACd,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,YAAQ,qBAAU,OAAO;AAC/B,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,UAAI,iBAAiB;AAErB,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,eAAW,kBAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,YAAQ,kBAAO,MAAM,QAAQ,GAAG,EAAE;AAExC,gBAAM,EAAE,MAAM,IAAI,SAAS,KAAK,EAAE,QAAQ;AAC1C,cAAI,SAAS,QAAQ,UAAU,aAAa,aAAa,GAAG;AAC1D,qBAAS;AACT,8BAAkB;AAAA,UACpB,OAAO;AACL,sBAAU,QAAQ;AAAA,UACpB;AAEA,gBAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,QACnE;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,QAAQ,CAAC;AAC/C,kBAAY,UAAU;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,aAAS,sBAAQ,MAAM;AAC3B,QAAI,UAAU;AACd,QAAI,aAAa;AACf,iBAAW,aAAa,sBAAsB,EAAE,SAAS;AAAA,IAC3D;AACA,QAAI,kBAAkB;AACpB,iBAAW,kBAAkB,sBAAsB,EAAE;AAAA,IACvD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,gBAAgB,CAAC;AAElC,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,KAAK;AAAA,MACN,uDAAC;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,cAAc,eAAe,MAAM;AAAA,QAChG,WAAU;AAAA,QAEV;AAAA,sDAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC;AAAA,YAAW;AAAA,aAA+B,WAAa,CACzD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,aAAa,eAAe,MAAM,eAAe,KAAK,QAAQ,iBAAiB,UAAU;AAAA,EACxG;AACF;",
   "names": []
 }

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

@@ -31,31 +31,26 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ChartContext = require("../../ChartContext");
+var import_LegendItem = require("./LegendItem");
 const LeftLegend = () => {
-  const { colorScale, innerHeight, internalMargin, leftLegend, setLeftLegend } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const { colorScale, innerHeight, internalMargin, setLeftLegend } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const [yTransform, setYTransform] = (0, import_react.useState)(innerHeight / 2 + internalMargin.top);
+  (0, import_react.useEffect)(() => {
+    if (leftLegend) {
+      const bounds = leftLegend.getBoundingClientRect();
+      setYTransform((prev) => prev - bounds.height / 2);
+    }
+  }, [leftLegend]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-    transform: `translate(8,${innerHeight / 2 - internalMargin.top})`,
+    transform: `translate(8,${yTransform})`,
     ref: setLeftLegend,
-    children: colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    children: colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
       className: "tick",
       transform: `translate(0,${i * 20})`,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-          fill: colorScale(domainValue),
-          r: 4
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
-          x: 10,
-          dy: ".32em",
-          children: domainValue
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
-          width: "180",
-          height: 1,
-          fill: "transparent"
-        })
-      ]
-    }))
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, {
+        domainValue
+      })
+    }, domainValue))
   });
 };
 //# sourceMappingURL=LeftLegend.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/LeftLegend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const LeftLegend = () => {\n  const { colorScale, innerHeight, internalMargin, leftLegend, setLeftLegend } = useContext(ChartContext);\n\n  return (\n    <g transform={`translate(8,${innerHeight / 2 - internalMargin.top})`} ref={setLeftLegend}>\n      {colorScale.domain().map((domainValue, i) => (\n        <g className=\"tick\" transform={`translate(0,${i * 20})`}>\n          <circle fill={colorScale(domainValue)} r={4} />\n          <text x={10} dy=\".32em\">\n            {domainValue}\n          </text>\n          <rect width=\"180\" height={1} fill=\"transparent\" />\n        </g>\n      ))}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,0BAA6B;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,YAAY,aAAa,gBAAgB,YAAY,cAAc,QAAI,yBAAW,gCAAY;AAEtG,SACE,4CAAC;AAAA,IAAE,WAAW,eAAe,cAAc,IAAI,eAAe;AAAA,IAAQ,KAAK;AAAA,IACxE,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,6CAAC;AAAA,MAAE,WAAU;AAAA,MAAO,WAAW,eAAe,IAAI;AAAA,MAChD;AAAA,oDAAC;AAAA,UAAO,MAAM,WAAW,WAAW;AAAA,UAAG,GAAG;AAAA,SAAG;AAAA,QAC7C,4CAAC;AAAA,UAAK,GAAG;AAAA,UAAI,IAAG;AAAA,UACb;AAAA,SACH;AAAA,QACA,4CAAC;AAAA,UAAK,OAAM;AAAA,UAAM,QAAQ;AAAA,UAAG,MAAK;AAAA,SAAc;AAAA;AAAA,KAClD,CACD;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useState, useEffect } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const LeftLegend = () => {\n  const { colorScale, innerHeight, internalMargin, setLeftLegend } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useEffect(() => {\n    if (leftLegend) {\n      const bounds = leftLegend.getBoundingClientRect();\n      setYTransform((prev) => prev - bounds.height / 2);\n    }\n  }, [leftLegend]);\n\n  return (\n    <g transform={`translate(8,${yTransform})`} ref={setLeftLegend}>\n      {colorScale.domain().map((domainValue, i) => (\n        <g key={domainValue} className=\"tick\" transform={`translate(0,${i * 20})`}>\n          <LegendItem domainValue={domainValue} />\n        </g>\n      ))}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAuD;AACvD,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,YAAY,aAAa,gBAAgB,cAAc,QAAI,yBAAW,gCAAY;AAE1F,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,8BAAU,MAAM;AACd,QAAI,YAAY;AACd,YAAM,SAAS,WAAW,sBAAsB;AAChD,oBAAc,CAAC,SAAS,OAAO,OAAO,SAAS,CAAC;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,4CAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAAe,KAAK;AAAA,IAC9C,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC;AAAA,MAAoB,WAAU;AAAA,MAAO,WAAW,eAAe,IAAI;AAAA,MAClE,sDAAC;AAAA,QAAW;AAAA,OAA0B;AAAA,OADhC,WAER,CACD;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,71 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LegendItem_exports = {};
+__export(LegendItem_exports, {
+  LegendItem: () => LegendItem
+});
+module.exports = __toCommonJS(LegendItem_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ChartContext = require("../../ChartContext");
+const LegendItem = ({ domainValue }) => {
+  const {
+    colorScale,
+    setCurrentData,
+    props: { data }
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const serieData = data.find((serie) => serie.name === domainValue);
+  const handleOnClick = (0, import_react.useCallback)(() => {
+    setCurrentData(
+      data.map((data2) => {
+        if (data2.name === domainValue) {
+          return { ...data2, isHidden: !data2.isHidden };
+        }
+        return data2;
+      })
+    );
+  }, [data, domainValue, setCurrentData]);
+  return (0, import_react.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+      onClick: handleOnClick,
+      className: "cell",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+          fill: colorScale(domainValue),
+          r: 4
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+          x: 10,
+          dy: ".32em",
+          textDecoration: serieData.isHidden ? "line-through" : "",
+          children: domainValue
+        })
+      ]
+    }, domainValue),
+    [colorScale, domainValue, handleOnClick, serieData.isHidden]
+  );
+};
+//# sourceMappingURL=LegendItem.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/parts/Legend/LegendItem.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\n\nimport { ChartContext } from '../../ChartContext';\n\nexport const LegendItem = ({ domainValue }) => {\n  const {\n    colorScale,\n    setCurrentData,\n    props: { data },\n  } = useContext(ChartContext);\n\n  const serieData = data.find((serie) => serie.name === domainValue);\n  const handleOnClick = useCallback(() => {\n    setCurrentData(\n      data.map((data) => {\n        if (data.name === domainValue) {\n          return { ...data, isHidden: !data.isHidden };\n        }\n\n        return data;\n      }),\n    );\n  }, [data, domainValue, setCurrentData]);\n\n  return useMemo(\n    () => (\n      <g onClick={handleOnClick} key={domainValue} className=\"cell\">\n        <circle fill={colorScale(domainValue)} r={4} />\n        <text x={10} dy=\".32em\" textDecoration={serieData.isHidden ? 'line-through' : ''}>\n          {domainValue}\n        </text>\n      </g>\n    ),\n\n    [colorScale, domainValue, handleOnClick, serieData.isHidden],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAwD;AAExD,0BAA6B;AAEtB,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,YAAY,KAAK,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACjE,QAAM,oBAAgB,0BAAY,MAAM;AACtC;AAAA,MACE,KAAK,IAAI,CAACA,UAAS;AACjB,YAAIA,MAAK,SAAS,aAAa;AAC7B,iBAAO,EAAE,GAAGA,OAAM,UAAU,CAACA,MAAK,SAAS;AAAA,QAC7C;AAEA,eAAOA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,MAAM,aAAa,cAAc,CAAC;AAEtC,aAAO;AAAA,IACL,MACE,6CAAC;AAAA,MAAE,SAAS;AAAA,MAAiC,WAAU;AAAA,MACrD;AAAA,oDAAC;AAAA,UAAO,MAAM,WAAW,WAAW;AAAA,UAAG,GAAG;AAAA,SAAG;AAAA,QAC7C,4CAAC;AAAA,UAAK,GAAG;AAAA,UAAI,IAAG;AAAA,UAAQ,gBAAgB,UAAU,WAAW,iBAAiB;AAAA,UAC3E;AAAA,SACH;AAAA;AAAA,OAJ8B,WAKhC;AAAA,IAGF,CAAC,YAAY,aAAa,eAAe,UAAU,QAAQ;AAAA,EAC7D;AACF;",
+  "names": ["data"]
+}

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

@@ -31,39 +31,46 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_ChartContext = require("../../ChartContext");
+var import_LegendItem = require("./LegendItem");
 const RightLegend = () => {
   const {
+    props: { y2Axis },
     colorScale,
     innerWidth,
     innerHeight,
-    setInnerWidth,
+    rightLabel,
+    rightLegend,
+    axisRightWidth,
     internalMargin,
-    setRightLegend,
-    props: { margin }
+    setRightLegend
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+  const [yTransform, setYTransform] = (0, import_react.useState)(innerHeight / 2 + internalMargin.top);
+  (0, import_react.useEffect)(() => {
+    if (rightLegend) {
+      const bounds = rightLegend.getBoundingClientRect();
+      setYTransform((prev) => prev - bounds.height / 2);
+    }
+  }, [rightLegend]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
     ref: setRightLegend,
-    transform: `translate(${innerWidth + internalMargin.left},${innerHeight / 2 - internalMargin.top})`,
-    children: colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-      className: "tick",
-      transform: `translate(30,${i * 20})`,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-          fill: colorScale(domainValue),
-          r: 4
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
-          x: 10,
-          dy: ".32em",
-          children: domainValue
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
-          width: "180",
-          height: 1,
-          fill: "transparent"
-        })
-      ]
-    }))
+    transform: `translate(${innerWidth + internalMargin.left + (y2Axis ? axisRightWidth?.getBoundingClientRect().width : 0) + (y2Axis?.label ? rightLabel?.getBoundingClientRect().width : 0)},${yTransform})`,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+        width: "20",
+        height: 1,
+        fill: "transparent"
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+        transform: `translate(0,0)`,
+        children: colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+          className: "tick",
+          transform: `translate(30,${i * 20})`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, {
+            domainValue
+          })
+        }, domainValue))
+      })
+    ]
   });
 };
 //# sourceMappingURL=RightLegend.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Legend/RightLegend.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useEffect, useRef, useState } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const RightLegend = () => {\n  const {\n    colorScale,\n    innerWidth,\n    innerHeight,\n    setInnerWidth,\n    internalMargin,\n    setRightLegend,\n    props: { margin },\n  } = useContext(ChartContext);\n\n  // const ref = useRef(null);\n\n  // const [yTransform, setYTransform] = useState(innerHeight / 2);\n  // useEffect(() => {\n  //   if (ref.current) {\n  //     const bounds = ref.current.getBoundingClientRect();\n  //     setYTransform((prev) => prev - bounds.height / 2);\n  //     setInnerWidth((prev) => prev - (bounds.width + 30));\n  //   }\n  // }, [setInnerWidth]);\n\n  return (\n    <g\n      ref={setRightLegend}\n      transform={`translate(${innerWidth + internalMargin.left},${innerHeight / 2 - internalMargin.top})`}\n    >\n      {colorScale.domain().map((domainValue, i) => (\n        <g className=\"tick\" transform={`translate(30,${i * 20})`}>\n          <circle fill={colorScale(domainValue)} r={4} />\n          <text x={10} dy=\".32em\">\n            {domainValue}\n          </text>\n          <rect width=\"180\" height={1} fill=\"transparent\" />\n        </g>\n      ))}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+D;AAC/D,0BAA6B;AAEtB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO;AAAA,EAClB,QAAI,yBAAW,gCAAY;AAa3B,SACE,4CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,eAAe,QAAQ,cAAc,IAAI,eAAe;AAAA,IAE5F,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,6CAAC;AAAA,MAAE,WAAU;AAAA,MAAO,WAAW,gBAAgB,IAAI;AAAA,MACjD;AAAA,oDAAC;AAAA,UAAO,MAAM,WAAW,WAAW;AAAA,UAAG,GAAG;AAAA,SAAG;AAAA,QAC7C,4CAAC;AAAA,UAAK,GAAG;AAAA,UAAI,IAAG;AAAA,UACb;AAAA,SACH;AAAA,QACA,4CAAC;AAAA,UAAK,OAAM;AAAA,UAAM,QAAQ;AAAA,UAAG,MAAK;AAAA,SAAc;AAAA;AAAA,KAClD,CACD;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useState, useEffect } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const RightLegend = () => {\n  const {\n    props: { y2Axis },\n    colorScale,\n    innerWidth,\n    innerHeight,\n    rightLabel,\n    rightLegend,\n    axisRightWidth,\n    internalMargin,\n    setRightLegend,\n  } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useEffect(() => {\n    if (rightLegend) {\n      const bounds = rightLegend.getBoundingClientRect();\n      setYTransform((prev) => prev - bounds.height / 2);\n    }\n  }, [rightLegend]);\n\n  return (\n    <g\n      ref={setRightLegend}\n      transform={`translate(${\n        innerWidth +\n        internalMargin.left +\n        (y2Axis ? axisRightWidth?.getBoundingClientRect().width : 0) +\n        (y2Axis?.label ? rightLabel?.getBoundingClientRect().width : 0)\n      },${yTransform})`}\n    >\n      <rect width=\"20\" height={1} fill=\"transparent\" />\n      <g transform={`translate(0,0)`}>\n        {colorScale.domain().map((domainValue, i) => (\n          <g className=\"tick\" transform={`translate(30,${i * 20})`} key={domainValue}>\n            <LegendItem domainValue={domainValue} />\n          </g>\n        ))}\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAuD;AACvD,0BAA6B;AAC7B,wBAA2B;AAEpB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,8BAAU,MAAM;AACd,QAAI,aAAa;AACf,YAAM,SAAS,YAAY,sBAAsB;AACjD,oBAAc,CAAC,SAAS,OAAO,OAAO,SAAS,CAAC;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,SACE,6CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aACT,aACA,eAAe,QACd,SAAS,gBAAgB,sBAAsB,EAAE,QAAQ,MACzD,QAAQ,QAAQ,YAAY,sBAAsB,EAAE,QAAQ,MAC3D;AAAA,IAEJ;AAAA,kDAAC;AAAA,QAAK,OAAM;AAAA,QAAK,QAAQ;AAAA,QAAG,MAAK;AAAA,OAAc;AAAA,MAC/C,4CAAC;AAAA,QAAE,WAAW;AAAA,QACX,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,4CAAC;AAAA,UAAE,WAAU;AAAA,UAAO,WAAW,gBAAgB,IAAI;AAAA,UACjD,sDAAC;AAAA,YAAW;AAAA,WAA0B;AAAA,WADuB,WAE/D,CACD;AAAA,OACH;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -32,6 +32,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_d3 = require("d3");
 var import_ChartContext = require("../../ChartContext");
+var import_LegendItem = require("./LegendItem");
 const TopLegend = () => {
   const { colorScale, internalMargin, innerWidth, setTopLegend } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const ref = (0, import_react.useRef)(null);
@@ -68,19 +69,8 @@ const TopLegend = () => {
             width: 1,
             fill: "transparent"
           }),
-          colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-            className: "cell",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-                fill: colorScale(domainValue),
-                r: 4
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
-                x: 10,
-                dy: ".32em",
-                children: domainValue
-              })
-            ]
+          colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, {
+            domainValue
           }, domainValue))
         ]
       })

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

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

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

@@ -36,30 +36,64 @@ const Scrapper = () => {
   const {
     yScale,
     y2Scale,
-    props: { xAxis, data }
+    xScale,
+    getXValue,
+    getYValue,
+    isHorizontal,
+    getBandwidth,
+    props: { data }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const getPosition = (0, import_react.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 = (0, import_react.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_ScrapperLine.ScrapperLine, {
         yPosition,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scrapper/Scrapper.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,0BAA6B;AAC7B,0BAA6B;AACtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,KAAK;AAAA,EACvB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,iBAAa,sBAAQ,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,4CAAC;AAAA,IACE,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,QAAQ;AACpC,YAAM,YAAY,WAAW,GAAG;AAChC,YAAM,QAAQ,WAAW;AACzB,aAAO,4CAAC;AAAA,QAAuB;AAAA,QAAsB;AAAA,SAA3B,GAAyC;AAAA,IACrE,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAwD;AACxD,0BAA6B;AAC7B,0BAA6B;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,QAAI,yBAAW,gCAAY;AAE3B,QAAM,kBAAc;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,iBAAa,sBAAQ,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,4CAAC;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,4CAAC;AAAA,QAAuB;AAAA,QAAsB;AAAA,SAA3B,GAAyC;AAAA,IACrE,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Scrapper/ScrapperLine.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAyD;AACzD,yBAA2B;AAC3B,uBAA6B;AAC7B,0BAA6B;AAC7B,oBAAoE;AAE7D,MAAM,eAAe,CAAC,EAAE,WAAW,MAAM,MAAM;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,SAAS;AAAA,EACrC,QAAI,yBAAW,gCAAY;AAC3B,QAAM,YAAQ,yBAAW,6BAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAgD;AAEhG,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,oBAAgB,SAAS;AAAA,EAC3B,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAE/B,SACE,6CAAC;AAAA,IACE;AAAA,uBAAiB,YAChB,6CAAC;AAAA,QACE;AAAA,4BACC,4CAAC;AAAA,YACC,uDAAC;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,4DAAC,6CAA4B;AAAA,gBAC7B,4CAAC;AAAA,kBACC,sDAAC;AAAA,oBAAgB,MAAM;AAAA,mBAAO;AAAA,iBAChC;AAAA;AAAA,aACF;AAAA,WACF,IACE;AAAA,UACJ,4CAAC;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,4CAAC;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,4CAAC;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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAyD;AACzD,yBAA2B;AAC3B,uBAA6B;AAC7B,0BAA6B;AAC7B,oBAAoE;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,QAAI,yBAAW,gCAAY;AAC3B,QAAM,YAAQ,yBAAW,6BAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAgD;AAEhG,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,oBAAgB,SAAS;AAAA,EAC3B,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAE/B,QAAM,sBAAsB,OAAO,YAAY,OAAO,UAAU,IAAI;AAEpE,SACE,6CAAC;AAAA,IACE;AAAA,uBAAiB,YAChB,6CAAC;AAAA,QACE;AAAA,4BACC,4CAAC;AAAA,YACC,uDAAC;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,4DAAC,6CAA4B;AAAA,gBAC7B,4CAAC;AAAA,kBACC,sDAAC;AAAA,oBAAgB,MAAM;AAAA,mBAAO;AAAA,iBAChC;AAAA;AAAA,aACF;AAAA,WACF,IACE;AAAA,UACJ,4CAAC;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,4CAAC;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,4CAAC;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/cjs/graphs/Chart/parts/Scrapper/VerticalScrapper.js

@@ -38,16 +38,18 @@ const VerticalScrapper = () => {
     getBandwidth,
     xScrollbarPosition,
     containerRatio,
+    getXValue,
+    getYValue,
     props: { xAxis, data }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const isBandAxis = !!xScale.bandwidth;
   const uniqueData = (0, import_react.useMemo)(() => {
     let valueToPositionPerSeries;
     if (isBandAxis) {
-      valueToPositionPerSeries = data.map(
+      valueToPositionPerSeries = data.filter((serie) => !serie.isHidden).map(
         (serie) => serie.data.map((datum) => {
-          const x = xAxis.cols ? xAxis.cols[datum.position] : datum.value.x;
-          const y = typeof datum.value === "number" ? datum.value : datum.value.y;
+          const x = getXValue(datum);
+          const y = getYValue(datum);
           return {
             position: xScale(x),
             name: serie.name,
@@ -57,7 +59,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;
@@ -80,7 +82,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 = (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {

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

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

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

@@ -51,9 +51,9 @@ const VerticalScrapperLine = ({ lineWidth, xPosition, datum }) => {
     if (!isGrabbed)
       setScrapperPosX(xPosition);
   }, [isGrabbed, setScrapperPosX, xPosition]);
-  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : lineWidth;
-  const render = (0, import_react.useMemo)(() => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+  const strokeDetectorWidth = xScale.bandwidth ? xScale.bandwidth() : "4px";
+  const render = (0, import_react.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
       children: [
         isActive && !isGrabbed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
           children: [
@@ -98,21 +98,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;
 };
 //# sourceMappingURL=VerticalScrapperLine.js.map