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

package/dist/esm/graphs/Chart/parts/Labels/BottomLabel.js

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ChartContext } from "../../ChartContext";
+import { StyledAxisLabel } from "../../styles";
+const BottomLabel = () => {
+  const {
+    internalMargin,
+    setBottomLabel,
+    innerHeight,
+    innerWidth,
+    props: { xAxis }
+  } = useContext(ChartContext);
+  return /* @__PURE__ */ jsx("g", {
+    ref: setBottomLabel,
+    transform: `translate(${innerWidth / 2 + internalMargin.left},${innerHeight + internalMargin.top})`,
+    children: /* @__PURE__ */ jsx(StyledAxisLabel, {
+      className: "axis-label",
+      textAnchor: "middle",
+      dy: 35,
+      children: xAxis?.label
+    })
+  });
+};
+export {
+  BottomLabel
+};
+//# sourceMappingURL=BottomLabel.js.map

package/dist/esm/graphs/Chart/parts/Labels/BottomLabel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Labels/BottomLabel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const BottomLabel = () => {\n  const {\n    internalMargin,\n    setBottomLabel,\n    // leftLegend,\n    innerHeight,\n    innerWidth,\n    props: { xAxis },\n  } = useContext(ChartContext);\n\n  return (\n    <g\n      ref={setBottomLabel}\n      transform={`translate(${innerWidth / 2 + internalMargin.left},${innerHeight + internalMargin.top})`}\n    >\n      <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={35}>\n        {xAxis?.label}\n      </StyledAxisLabel>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAA2B;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI,WAAW,YAAY;AAE3B,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,IAAI,eAAe,QAAQ,cAAc,eAAe;AAAA,IAE7F,8BAAC;AAAA,MAAgB,WAAU;AAAA,MAAa,YAAW;AAAA,MAAS,IAAI;AAAA,MAC7D,iBAAO;AAAA,KACV;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/Labels/Label.js

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { ChartContext } from "../../ChartContext";
+import { RightLabel } from "./RightLabel";
+import { LeftLabel } from "./LeftLabel";
+import { BottomLabel } from "./BottomLabel";
+const Label = () => {
+  const {
+    props: { xAxis, yAxis, y2Axis }
+  } = useContext(ChartContext);
+  return useMemo(
+    () => /* @__PURE__ */ jsxs("g", {
+      children: [
+        y2Axis?.label ? /* @__PURE__ */ jsx(RightLabel, {}) : "",
+        yAxis?.label ? /* @__PURE__ */ jsx(LeftLabel, {}) : "",
+        xAxis?.label ? /* @__PURE__ */ jsx(BottomLabel, {}) : ""
+      ]
+    }),
+    [xAxis?.label, y2Axis?.label, yAxis?.label]
+  );
+};
+export {
+  Label
+};
+//# sourceMappingURL=Label.js.map

package/dist/esm/graphs/Chart/parts/Labels/Label.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Labels/Label.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\n\nimport { ChartContext } from '../../ChartContext';\nimport { RightLabel } from './RightLabel';\nimport { LeftLabel } from './LeftLabel';\nimport { BottomLabel } from './BottomLabel';\n\nexport const Label = () => {\n  const {\n    props: { xAxis, yAxis, y2Axis },\n  } = useContext(ChartContext);\n\n  return useMemo(\n    () => (\n      <g>\n        {y2Axis?.label ? <RightLabel /> : ''}\n        {yAxis?.label ? <LeftLabel /> : ''}\n        {xAxis?.label ? <BottomLabel /> : ''}\n      </g>\n    ),\n    [xAxis?.label, y2Axis?.label, yAxis?.label],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAE3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAErB,MAAM,QAAQ,MAAM;AACzB,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO,OAAO;AAAA,EAChC,IAAI,WAAW,YAAY;AAE3B,SAAO;AAAA,IACL,MACE,qBAAC;AAAA,MACE;AAAA,gBAAQ,QAAQ,oBAAC,cAAW,IAAK;AAAA,QACjC,OAAO,QAAQ,oBAAC,aAAU,IAAK;AAAA,QAC/B,OAAO,QAAQ,oBAAC,eAAY,IAAK;AAAA;AAAA,KACpC;AAAA,IAEF,CAAC,OAAO,OAAO,QAAQ,OAAO,OAAO,KAAK;AAAA,EAC5C;AACF;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/Labels/LeftLabel.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { ChartContext } from "../../ChartContext";
+import { StyledAxisLabel } from "../../styles";
+const LeftLabel = () => {
+  const {
+    innerHeight,
+    internalMargin,
+    setLeftLabel,
+    leftLegend,
+    props: { yAxis }
+  } = useContext(ChartContext);
+  const leftMargin = useMemo(
+    () => leftLegend?.getBoundingClientRect().width ? leftLegend?.getBoundingClientRect().width + 15 : 8,
+    [leftLegend]
+  );
+  return /* @__PURE__ */ jsxs("g", {
+    ref: setLeftLabel,
+    transform: `translate(${leftMargin},${innerHeight / 2 + internalMargin.top}) rotate(-90)`,
+    children: [
+      /* @__PURE__ */ jsx("rect", {
+        height: "30",
+        width: "1",
+        fill: "transparent"
+      }),
+      /* @__PURE__ */ jsx(StyledAxisLabel, {
+        className: "axis-label",
+        textAnchor: "middle",
+        dy: 15,
+        children: yAxis?.label
+      })
+    ]
+  });
+};
+export {
+  LeftLabel
+};
+//# sourceMappingURL=LeftLabel.js.map

package/dist/esm/graphs/Chart/parts/Labels/LeftLabel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Labels/LeftLabel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const LeftLabel = () => {\n  const {\n    innerHeight,\n    internalMargin,\n    setLeftLabel,\n    leftLegend,\n    props: { yAxis },\n  } = useContext(ChartContext);\n\n  const leftMargin = useMemo(\n    () => (leftLegend?.getBoundingClientRect().width ? leftLegend?.getBoundingClientRect().width + 15 : 8),\n    [leftLegend],\n  );\n  return (\n    <g ref={setLeftLabel} transform={`translate(${leftMargin},${innerHeight / 2 + internalMargin.top}) rotate(-90)`}>\n      <rect height=\"30\" width=\"1\" fill=\"transparent\" />\n      <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={15}>\n        {yAxis?.label}\n      </StyledAxisLabel>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI,WAAW,YAAY;AAE3B,QAAM,aAAa;AAAA,IACjB,MAAO,YAAY,sBAAsB,EAAE,QAAQ,YAAY,sBAAsB,EAAE,QAAQ,KAAK;AAAA,IACpG,CAAC,UAAU;AAAA,EACb;AACA,SACE,qBAAC;AAAA,IAAE,KAAK;AAAA,IAAc,WAAW,aAAa,cAAc,cAAc,IAAI,eAAe;AAAA,IAC3F;AAAA,0BAAC;AAAA,QAAK,QAAO;AAAA,QAAK,OAAM;AAAA,QAAI,MAAK;AAAA,OAAc;AAAA,MAC/C,oBAAC;AAAA,QAAgB,WAAU;AAAA,QAAa,YAAW;AAAA,QAAS,IAAI;AAAA,QAC7D,iBAAO;AAAA,OACV;AAAA;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/Labels/RightLabel.js

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ChartContext } from "../../ChartContext";
+import { StyledAxisLabel } from "../../styles";
+const RightLabel = () => {
+  const {
+    colorScale,
+    innerWidth,
+    innerHeight,
+    setInnerWidth,
+    internalMargin,
+    axisRightWidth,
+    setRightLabel,
+    props: { margin, y2Axis }
+  } = useContext(ChartContext);
+  return /* @__PURE__ */ jsxs("g", {
+    ref: setRightLabel,
+    transform: `translate(${innerWidth + internalMargin.left + axisRightWidth?.getBoundingClientRect().width},${innerHeight / 2 + internalMargin.top}) `,
+    children: [
+      /* @__PURE__ */ jsx("rect", {
+        width: "20",
+        height: 1,
+        fill: "transparent"
+      }),
+      /* @__PURE__ */ jsx("g", {
+        transform: " rotate(90)",
+        children: /* @__PURE__ */ jsx(StyledAxisLabel, {
+          className: "axis-label",
+          textAnchor: "middle",
+          dy: "-15",
+          children: y2Axis?.label
+        })
+      })
+    ]
+  });
+};
+export {
+  RightLabel
+};
+//# sourceMappingURL=RightLabel.js.map

package/dist/esm/graphs/Chart/parts/Labels/RightLabel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Labels/RightLabel.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useRef, useState } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { StyledAxisLabel } from '../../styles';\n\nexport const RightLabel = () => {\n  const {\n    colorScale,\n    innerWidth,\n    innerHeight,\n    setInnerWidth,\n    internalMargin,\n    axisRightWidth,\n    setRightLabel,\n    props: { margin, y2Axis },\n  } = useContext(ChartContext);\n\n  return (\n    <g\n      ref={setRightLabel}\n      transform={`translate(${innerWidth + internalMargin.left + axisRightWidth?.getBoundingClientRect().width},${\n        innerHeight / 2 + internalMargin.top\n      }) `}\n    >\n      <rect width=\"20\" height={1} fill=\"transparent\" />\n      <g transform=\" rotate(90)\">\n        <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy=\"-15\">\n          {y2Axis?.label}\n        </StyledAxisLabel>\n      </g>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAA+C;AAC/D,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAEzB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,OAAO;AAAA,EAC1B,IAAI,WAAW,YAAY;AAE3B,SACE,qBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,eAAe,OAAO,gBAAgB,sBAAsB,EAAE,SACjG,cAAc,IAAI,eAAe;AAAA,IAGnC;AAAA,0BAAC;AAAA,QAAK,OAAM;AAAA,QAAK,QAAQ;AAAA,QAAG,MAAK;AAAA,OAAc;AAAA,MAC/C,oBAAC;AAAA,QAAE,WAAU;AAAA,QACX,8BAAC;AAAA,UAAgB,WAAU;AAAA,UAAa,YAAW;AAAA,UAAS,IAAG;AAAA,UAC5D,kBAAQ;AAAA,SACX;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/Legend/BottomLegend.js

@@ -3,43 +3,53 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useEffect, useRef, useState } from "react";
 import { selectAll, select } from "d3";
 import { ChartContext } from "../../ChartContext";
+import { LegendItem } from "./LegendItem";
 const BottomLegend = () => {
-  const {
-    colorScale,
-    innerWidth,
-    innerHeight,
-    internalMargin,
-    setBottomLegend,
-    props: { height }
-  } = useContext(ChartContext);
+  const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabel, internalMargin, setBottomLegend } = useContext(ChartContext);
   const ref = useRef(null);
   const firstRender = useRef(true);
   const [xTransform, setXTransform] = useState(innerWidth / 2);
   useEffect(() => {
     if (ref.current && firstRender.current) {
       const cells = selectAll(".cell");
-      const padding = 40;
+      const padding = 30;
       let offset = 0;
+      let verticalOffset = 0;
       cells.each((d, i) => {
         if (cells._groups[0][i - 1]) {
           const lastCell = select(cells._groups[0][i - 1]);
           const d3sel = select(cells._groups[0][i]);
           const { width } = lastCell.node().getBBox();
-          offset += width + padding;
-          d3sel.attr("transform", `translate(${offset}, 0)`);
+          if (offset + width + padding > innerWidth - innerWidth / 3) {
+            offset = 0;
+            verticalOffset += 20;
+          } else {
+            offset += width + padding;
+          }
+          d3sel.attr("transform", `translate(${offset}, ${verticalOffset})`);
         }
       });
       const bounds = ref.current.getBoundingClientRect();
       setXTransform((prev) => prev - bounds.width / 2);
       firstRender.current = false;
     }
-  }, []);
-  const render = useMemo(
+  }, [innerWidth]);
+  const margin = useMemo(() => {
+    let counter = 0;
+    if (bottomLabel) {
+      counter += bottomLabel?.getBoundingClientRect().height + 25;
+    }
+    if (axisBottomHeight) {
+      counter += axisBottomHeight?.getBoundingClientRect().height;
+    }
+    return counter;
+  }, [bottomLabel, axisBottomHeight]);
+  return useMemo(
     () => /* @__PURE__ */ jsx("g", {
       ref: setBottomLegend,
       children: /* @__PURE__ */ jsxs("g", {
         ref,
-        transform: `translate(${xTransform + internalMargin.left}, ${height - 30})`,
+        transform: `translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`,
         className: "bottom-legend",
         children: [
           /* @__PURE__ */ jsx("rect", {
@@ -47,26 +57,14 @@ const BottomLegend = () => {
             width: 1,
             fill: "transparent"
           }),
-          colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsxs("g", {
-            className: "cell",
-            children: [
-              /* @__PURE__ */ jsx("circle", {
-                fill: colorScale(domainValue),
-                r: 4
-              }),
-              /* @__PURE__ */ jsx("text", {
-                x: 10,
-                dy: ".32em",
-                children: domainValue
-              })
-            ]
-          }))
+          colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsx(LegendItem, {
+            domainValue
+          }, domainValue))
         ]
       })
     }),
-    [colorScale, height, setBottomLegend, xTransform]
+    [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform]
   );
-  return render;
 };
 export {
   BottomLegend

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/BottomLegend.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,WAAW,QAAQ,gBAAgB;AACxE,SAAS,WAAW,cAAc;AAClC,SAAS,oBAAoB;AAEtB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO;AAAA,EAClB,IAAI,WAAW,YAAY;AAE3B,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,CAAC;AAC3D,YAAU,MAAM;AACd,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,QAAQ,UAAU,OAAO;AAC/B,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,WAAW,OAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,QAAQ,OAAO,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,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE,KAAK;AAAA,MACN,+BAAC;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,SAAS;AAAA,QACtE,WAAU;AAAA,QAEV;AAAA,8BAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,qBAAC;AAAA,YAAE,WAAU;AAAA,YACX;AAAA,kCAAC;AAAA,gBAAO,MAAM,WAAW,WAAW;AAAA,gBAAG,GAAG;AAAA,eAAG;AAAA,cAC7C,oBAAC;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,WAAW,QAAQ,gBAAgB;AACxE,SAAS,WAAW,cAAc;AAClC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,aAAa,gBAAgB,gBAAgB,IAC1G,WAAW,YAAY;AAEzB,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,CAAC;AAC3D,YAAU,MAAM;AACd,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,QAAQ,UAAU,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,WAAW,OAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,QAAQ,OAAO,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,SAAS,QAAQ,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,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,KAAK;AAAA,MACN,+BAAC;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,cAAc,eAAe,MAAM;AAAA,QAChG,WAAU;AAAA,QAEV;AAAA,8BAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC;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/esm/graphs/Chart/parts/Legend/LeftLegend.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/LeftLegend.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,YAAY,aAAa,gBAAgB,YAAY,cAAc,IAAI,WAAW,YAAY;AAEtG,SACE,oBAAC;AAAA,IAAE,WAAW,eAAe,cAAc,IAAI,eAAe;AAAA,IAAQ,KAAK;AAAA,IACxE,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,qBAAC;AAAA,MAAE,WAAU;AAAA,MAAO,WAAW,eAAe,IAAI;AAAA,MAChD;AAAA,4BAAC;AAAA,UAAO,MAAM,WAAW,WAAW;AAAA,UAAG,GAAG;AAAA,SAAG;AAAA,QAC7C,oBAAC;AAAA,UAAK,GAAG;AAAA,UAAI,IAAG;AAAA,UACb;AAAA,SACH;AAAA,QACA,oBAAC;AAAA,UAAK,OAAM;AAAA,UAAM,QAAQ;AAAA,UAAG,MAAK;AAAA,SAAc;AAAA;AAAA,KAClD,CACD;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,UAAU,iBAAiB;AACvD,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,YAAY,aAAa,gBAAgB,cAAc,IAAI,WAAW,YAAY;AAE1F,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,YAAU,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,oBAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAAe,KAAK;AAAA,IAC9C,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC;AAAA,MAAoB,WAAU;AAAA,MAAO,WAAW,eAAe,IAAI;AAAA,MAClE,8BAAC;AAAA,QAAW;AAAA,OAA0B;AAAA,OADhC,WAER,CACD;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo, useCallback } from "react";
+import { ChartContext } from "../../ChartContext";
+const LegendItem = ({ domainValue }) => {
+  const {
+    colorScale,
+    setCurrentData,
+    props: { data }
+  } = useContext(ChartContext);
+  const serieData = data.find((serie) => serie.name === domainValue);
+  const handleOnClick = useCallback(() => {
+    setCurrentData(
+      data.map((data2) => {
+        if (data2.name === domainValue) {
+          return { ...data2, isHidden: !data2.isHidden };
+        }
+        return data2;
+      })
+    );
+  }, [data, domainValue, setCurrentData]);
+  return useMemo(
+    () => /* @__PURE__ */ jsxs("g", {
+      onClick: handleOnClick,
+      className: "cell",
+      children: [
+        /* @__PURE__ */ jsx("circle", {
+          fill: colorScale(domainValue),
+          r: 4
+        }),
+        /* @__PURE__ */ jsx("text", {
+          x: 10,
+          dy: ".32em",
+          textDecoration: serieData.isHidden ? "line-through" : "",
+          children: domainValue
+        })
+      ]
+    }, domainValue),
+    [colorScale, domainValue, handleOnClick, serieData.isHidden]
+  );
+};
+export {
+  LegendItem
+};
+//# sourceMappingURL=LegendItem.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/LegendItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,mBAAmB;AAExD,SAAS,oBAAoB;AAEtB,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,KAAK,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACjE,QAAM,gBAAgB,YAAY,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,SAAO;AAAA,IACL,MACE,qBAAC;AAAA,MAAE,SAAS;AAAA,MAAiC,WAAU;AAAA,MACrD;AAAA,4BAAC;AAAA,UAAO,MAAM,WAAW,WAAW;AAAA,UAAG,GAAG;AAAA,SAAG;AAAA,QAC7C,oBAAC;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/esm/graphs/Chart/parts/Legend/RightLegend.js

@@ -1,40 +1,47 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
+import { useContext, useState, useEffect } from "react";
 import { ChartContext } from "../../ChartContext";
+import { LegendItem } from "./LegendItem";
 const RightLegend = () => {
   const {
+    props: { y2Axis },
     colorScale,
     innerWidth,
     innerHeight,
-    setInnerWidth,
+    rightLabel,
+    rightLegend,
+    axisRightWidth,
     internalMargin,
-    setRightLegend,
-    props: { margin }
+    setRightLegend
   } = useContext(ChartContext);
-  return /* @__PURE__ */ jsx("g", {
+  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);
+  useEffect(() => {
+    if (rightLegend) {
+      const bounds = rightLegend.getBoundingClientRect();
+      setYTransform((prev) => prev - bounds.height / 2);
+    }
+  }, [rightLegend]);
+  return /* @__PURE__ */ jsxs("g", {
     ref: setRightLegend,
-    transform: `translate(${innerWidth + internalMargin.left},${innerHeight / 2 - internalMargin.top})`,
-    children: colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsxs("g", {
-      className: "tick",
-      transform: `translate(30,${i * 20})`,
-      children: [
-        /* @__PURE__ */ jsx("circle", {
-          fill: colorScale(domainValue),
-          r: 4
-        }),
-        /* @__PURE__ */ jsx("text", {
-          x: 10,
-          dy: ".32em",
-          children: domainValue
-        }),
-        /* @__PURE__ */ 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__ */ jsx("rect", {
+        width: "20",
+        height: 1,
+        fill: "transparent"
+      }),
+      /* @__PURE__ */ jsx("g", {
+        transform: `translate(0,0)`,
+        children: colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsx("g", {
+          className: "tick",
+          transform: `translate(30,${i * 20})`,
+          children: /* @__PURE__ */ jsx(LegendItem, {
+            domainValue
+          })
+        }, domainValue))
+      })
+    ]
   });
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/RightLegend.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAA+C;AAC/D,SAAS,oBAAoB;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,IAAI,WAAW,YAAY;AAa3B,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,eAAe,QAAQ,cAAc,IAAI,eAAe;AAAA,IAE5F,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,qBAAC;AAAA,MAAE,WAAU;AAAA,MAAO,WAAW,gBAAgB,IAAI;AAAA,MACjD;AAAA,4BAAC;AAAA,UAAO,MAAM,WAAW,WAAW;AAAA,UAAG,GAAG;AAAA,SAAG;AAAA,QAC7C,oBAAC;AAAA,UAAK,GAAG;AAAA,UAAI,IAAG;AAAA,UACb;AAAA,SACH;AAAA,QACA,oBAAC;AAAA,UAAK,OAAM;AAAA,UAAM,QAAQ;AAAA,UAAG,MAAK;AAAA,SAAc;AAAA;AAAA,KAClD,CACD;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,UAAU,iBAAiB;AACvD,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;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,IAAI,WAAW,YAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,YAAU,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,qBAAC;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,0BAAC;AAAA,QAAK,OAAM;AAAA,QAAK,QAAQ;AAAA,QAAG,MAAK;AAAA,OAAc;AAAA,MAC/C,oBAAC;AAAA,QAAE,WAAW;AAAA,QACX,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC;AAAA,UAAE,WAAU;AAAA,UAAO,WAAW,gBAAgB,IAAI;AAAA,UACjD,8BAAC;AAAA,YAAW;AAAA,WAA0B;AAAA,WADuB,WAE/D,CACD;AAAA,OACH;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useEffect, useRef, useState } from "react";
 import { selectAll, select } from "d3";
 import { ChartContext } from "../../ChartContext";
+import { LegendItem } from "./LegendItem";
 const TopLegend = () => {
   const { colorScale, internalMargin, innerWidth, setTopLegend } = useContext(ChartContext);
   const ref = useRef(null);
@@ -39,19 +40,8 @@ const TopLegend = () => {
             width: 1,
             fill: "transparent"
           }),
-          colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsxs("g", {
-            className: "cell",
-            children: [
-              /* @__PURE__ */ jsx("circle", {
-                fill: colorScale(domainValue),
-                r: 4
-              }),
-              /* @__PURE__ */ jsx("text", {
-                x: 10,
-                dy: ".32em",
-                children: domainValue
-              })
-            ]
+          colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsx(LegendItem, {
+            domainValue
           }, domainValue))
         ]
       })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Legend/TopLegend.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,WAAW,QAAQ,gBAAgB;AAExE,SAAS,WAAW,cAAc;AAClC,SAAS,oBAAoB;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,YAAY,gBAAgB,YAAY,aAAa,IAAI,WAAW,YAAY;AAExF,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,IAAI,eAAe,IAAI;AACjF,YAAU,MAAM;AACd,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,QAAQ,UAAU,OAAO;AAC/B,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,WAAW,OAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,QAAQ,OAAO,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,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE;AAAA,MAAU,WAAW,aAAa;AAAA,MACnC,+BAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,8BAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,qBAAC;AAAA,YAAoB,WAAU;AAAA,YAC7B;AAAA,kCAAC;AAAA,gBAAO,MAAM,WAAW,WAAW;AAAA,gBAAG,GAAG;AAAA,eAAG;AAAA,cAC7C,oBAAC;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,WAAW,QAAQ,gBAAgB;AAExE,SAAS,WAAW,cAAc;AAClC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,YAAY,gBAAgB,YAAY,aAAa,IAAI,WAAW,YAAY;AAExF,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,IAAI,eAAe,IAAI;AAEjF,YAAU,MAAM;AACd,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,QAAQ,UAAU,OAAO;AAC/B,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,YAAM,KAAK,CAAC,GAAG,MAAM;AACnB,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,WAAW,OAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,QAAQ,OAAO,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,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE;AAAA,MAAU,WAAW,aAAa;AAAA,MACnC,+BAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,8BAAC;AAAA,YAAK,QAAQ;AAAA,YAAI,OAAO;AAAA,YAAG,MAAK;AAAA,WAAc;AAAA,UAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC;AAAA,YAA6B;AAAA,aAAb,WAAuC,CACzD;AAAA;AAAA,OACH;AAAA,KACF;AAAA,IAGF,CAAC,YAAY,cAAc,UAAU;AAAA,EACvC;AAEA,SAAO;AACT;",
   "names": []
 }