@elliemae/ds-dataviz 3.13.0-next.3 → 3.13.0

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

@@ -1,60 +1,60 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useMemo, useLayoutEffect, useRef, useState } from "react";
+import { useContext, useMemo, useEffect, useState } from "react";
 import { select } from "d3";
 import { ChartContext } from "../../ChartContext";
 import { LegendItem } from "./LegendItem";
 const BottomLegend = () => {
-  const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } = useContext(ChartContext);
-  const ref = useRef(null);
-  const firstRender = useRef(true);
-  const [xTransform, setXTransform] = useState(innerWidth / 2);
-  useLayoutEffect(() => {
-    if (ref.current) {
-      const cells = select(ref.current).selectAll(".cell");
-      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();
-          if (offset + width + padding > innerWidth - innerWidth / 3) {
-            offset = 0;
-            verticalOffset += 20;
-          } else {
-            offset += width + padding;
-          }
-          d3sel.attr("transform", `translate(${offset}, ${verticalOffset})`);
+  const {
+    colorScale,
+    bottomLegendWidth,
+    bottomLegend,
+    axisBottomHeight,
+    axisLeftWidth,
+    innerWidth,
+    innerHeight,
+    bottomLabelHeight,
+    internalMargin,
+    currentData,
+    width: graphWidth,
+    setBottomLegend
+  } = useContext(ChartContext);
+  const [xTransform, setXTransform] = useState(0);
+  useEffect(() => {
+    if (!bottomLegend)
+      return;
+    const cells = select(bottomLegend).selectAll(".cell");
+    const padding = 25;
+    let offset = 0;
+    let verticalOffset = 0;
+    currentData.forEach((_, i) => {
+      if (cells._groups[0][i - 1]) {
+        const lastCell = select(cells._groups[0][i - 1]);
+        const d3sel = select(cells._groups[0][i]);
+        const { width: currentCellWidth } = d3sel.node().getBBox();
+        const { width: lastCellWidth } = lastCell.node().getBBox();
+        if (offset + lastCellWidth + padding + currentCellWidth + 10 > graphWidth) {
+          offset = 0;
+          verticalOffset += 20;
+        } else {
+          offset += lastCellWidth + padding;
         }
-      });
-      const bounds = ref.current.getBoundingClientRect();
-      setXTransform((prev) => prev - bounds.width / 2);
-      firstRender.current = false;
-    }
-  }, [innerWidth]);
-  const margin = useMemo(() => {
-    let counter = 0;
-    if (bottomLabelHeight > 0) {
-      counter += bottomLabelHeight;
-    }
-    if (axisBottomHeight > 0) {
-      counter += axisBottomHeight;
-    }
-    return counter;
-  }, [axisBottomHeight, bottomLabelHeight]);
+        d3sel.attr("transform", `translate(${offset}, ${verticalOffset})`);
+      }
+    });
+    setXTransform(innerWidth / 2 + internalMargin.left - bottomLegendWidth / 2);
+  }, [bottomLegend, currentData, bottomLegendWidth, axisLeftWidth, innerWidth, internalMargin.left, graphWidth]);
   return useMemo(
-    () => /* @__PURE__ */ jsx("g", { ref: setBottomLegend, children: /* @__PURE__ */ jsx(
+    () => /* @__PURE__ */ jsx(
       "g",
       {
-        ref,
-        transform: `translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`,
+        ref: setBottomLegend,
+        transform: `translate(${xTransform}, ${innerHeight + bottomLabelHeight + axisBottomHeight + internalMargin.top})`,
         className: "bottom-legend",
         children: colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsx(LegendItem, { domainValue }, domainValue))
       }
-    ) }),
-    [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform]
+    ),
+    [axisBottomHeight, bottomLabelHeight, colorScale, innerHeight, internalMargin.top, setBottomLegend, xTransform]
   );
 };
 export {

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, useLayoutEffect, useRef, useState } from 'react';\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n  const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabelHeight, internalMargin, setBottomLegend } =\n    useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n  const firstRender = useRef(true);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2);\n  useLayoutEffect(() => {\n    if (ref.current) {\n      const cells = select(ref.current).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 (bottomLabelHeight > 0) {\n      counter += bottomLabelHeight;\n    }\n    if (axisBottomHeight > 0) {\n      counter += axisBottomHeight;\n    }\n    return counter;\n  }, [axisBottomHeight, bottomLabelHeight]);\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          {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;AC8DX;AA9DZ,SAAgB,YAAY,SAAS,iBAAiB,QAAQ,gBAAgB;AAC9E,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM,EAAE,YAAY,kBAAkB,YAAY,aAAa,mBAAmB,gBAAgB,gBAAgB,IAChH,WAAW,YAAY;AAEzB,QAAM,MAAM,OAAoB,IAAI;AACpC,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,CAAC;AAC3D,kBAAgB,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,YAAM,QAAQ,OAAO,IAAI,OAAO,EAAE,UAAU,OAAO;AACnD,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,oBAAoB,GAAG;AACzB,iBAAW;AAAA,IACb;AACA,QAAI,mBAAmB,GAAG;AACxB,iBAAW;AAAA,IACb;AACA,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,iBAAiB,CAAC;AAExC,SAAO;AAAA,IACL,MACE,oBAAC,OAAE,KAAK,iBACN;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,aAAa,aAAa,eAAe,SAAS,cAAc,eAAe,MAAM;AAAA,QAChG,WAAU;AAAA,QAET,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC,cAAW,eAA+B,WAAa,CACzD;AAAA;AAAA,IACH,GACF;AAAA,IAGF,CAAC,YAAY,aAAa,eAAe,MAAM,eAAe,KAAK,QAAQ,iBAAiB,UAAU;AAAA,EACxG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useEffect, useState } from 'react';\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const BottomLegend = () => {\n  const {\n    colorScale,\n    bottomLegendWidth,\n    bottomLegend,\n    axisBottomHeight,\n    axisLeftWidth,\n    innerWidth,\n    innerHeight,\n    bottomLabelHeight,\n    internalMargin,\n    currentData,\n    width: graphWidth,\n    setBottomLegend,\n  } = useContext(ChartContext);\n\n  const [xTransform, setXTransform] = useState(0);\n\n  useEffect(() => {\n    if (!bottomLegend) return;\n    const cells = select(bottomLegend).selectAll('.cell');\n    const padding = 25;\n    let offset = 0;\n    let verticalOffset = 0;\n\n    currentData.forEach((_, 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        const { width: currentCellWidth } = d3sel.node().getBBox();\n\n        const { width: lastCellWidth } = lastCell.node().getBBox();\n\n        if (offset + lastCellWidth + padding + currentCellWidth + 10 > graphWidth) {\n          offset = 0;\n          verticalOffset += 20;\n        } else {\n          offset += lastCellWidth + padding;\n        }\n\n        d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n      }\n    });\n\n    setXTransform(innerWidth / 2 + internalMargin.left - bottomLegendWidth / 2);\n  }, [bottomLegend, currentData, bottomLegendWidth, axisLeftWidth, innerWidth, internalMargin.left, graphWidth]);\n\n  return useMemo(\n    () => (\n      <g\n        ref={setBottomLegend}\n        transform={`translate(${xTransform}, ${\n          innerHeight + bottomLabelHeight + axisBottomHeight + internalMargin.top\n        })`}\n        className=\"bottom-legend\"\n      >\n        {colorScale.domain().map((domainValue, i) => (\n          <LegendItem domainValue={domainValue} key={domainValue} />\n        ))}\n      </g>\n    ),\n\n    [axisBottomHeight, bottomLabelHeight, colorScale, innerHeight, internalMargin.top, setBottomLegend, xTransform],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8Db;AA9DV,SAAgB,YAAY,SAAS,WAAW,gBAAgB;AAChE,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,CAAC;AAE9C,YAAU,MAAM;AACd,QAAI,CAAC;AAAc;AACnB,UAAM,QAAQ,OAAO,YAAY,EAAE,UAAU,OAAO;AACpD,UAAM,UAAU;AAChB,QAAI,SAAS;AACb,QAAI,iBAAiB;AAErB,gBAAY,QAAQ,CAAC,GAAG,MAAM;AAC5B,UAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,cAAM,WAAW,OAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,cAAM,QAAQ,OAAO,MAAM,QAAQ,GAAG,EAAE;AACxC,cAAM,EAAE,OAAO,iBAAiB,IAAI,MAAM,KAAK,EAAE,QAAQ;AAEzD,cAAM,EAAE,OAAO,cAAc,IAAI,SAAS,KAAK,EAAE,QAAQ;AAEzD,YAAI,SAAS,gBAAgB,UAAU,mBAAmB,KAAK,YAAY;AACzE,mBAAS;AACT,4BAAkB;AAAA,QACpB,OAAO;AACL,oBAAU,gBAAgB;AAAA,QAC5B;AAEA,cAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,MACnE;AAAA,IACF,CAAC;AAED,kBAAc,aAAa,IAAI,eAAe,OAAO,oBAAoB,CAAC;AAAA,EAC5E,GAAG,CAAC,cAAc,aAAa,mBAAmB,eAAe,YAAY,eAAe,MAAM,UAAU,CAAC;AAE7G,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,aAAa,eACtB,cAAc,oBAAoB,mBAAmB,eAAe;AAAA,QAEtE,WAAU;AAAA,QAET,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC,cAAW,eAA+B,WAAa,CACzD;AAAA;AAAA,IACH;AAAA,IAGF,CAAC,kBAAkB,mBAAmB,YAAY,aAAa,eAAe,KAAK,iBAAiB,UAAU;AAAA,EAChH;AACF;",
   "names": []
 }

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

@@ -1,18 +1,22 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useState, useLayoutEffect } from "react";
+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 {
+    originalSeries: series,
+    leftLegendHeight,
+    innerHeight,
+    internalMargin,
+    leftLegend,
+    setLeftLegend
+  } = useContext(ChartContext);
   const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);
-  useLayoutEffect(() => {
-    if (leftLegend) {
-      const bounds = leftLegend.getBoundingClientRect();
-      setYTransform((prev) => prev - bounds.height / 2);
-    }
-  }, [leftLegend]);
-  return /* @__PURE__ */ jsx("g", { transform: `translate(8,${yTransform})`, ref: setLeftLegend, children: colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsx("g", { className: "tick", transform: `translate(0,${i * 30})`, children: /* @__PURE__ */ jsx(LegendItem, { domainValue }) }, domainValue)) });
+  useEffect(() => {
+    setYTransform(innerHeight / 2 + internalMargin.top - leftLegendHeight / 2);
+  }, [innerHeight, internalMargin.top, leftLegend, leftLegendHeight]);
+  return /* @__PURE__ */ jsx("g", { transform: `translate(8,${yTransform})`, ref: setLeftLegend, children: series.map((serie, i) => /* @__PURE__ */ jsx("g", { className: "tick", transform: `translate(0,${i * 30})`, children: /* @__PURE__ */ jsx(LegendItem, { domainValue: serie.name }, serie.name) }, serie.name)) });
 };
 export {
   LeftLegend

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, useState, useLayoutEffect } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const LeftLegend = () => {\n  const { colorScale, innerHeight, internalMargin, leftLegend, setLeftLegend } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useLayoutEffect(() => {\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 * 30})`}>\n          <LegendItem domainValue={domainValue} />\n        </g>\n      ))}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoBb;AApBV,SAAgB,YAAY,UAAU,uBAAuB;AAC7D,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,aAAa,MAAM;AAC9B,QAAM,EAAE,YAAY,aAAa,gBAAgB,YAAY,cAAc,IAAI,WAAW,YAAY;AAEtG,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,kBAAgB,MAAM;AACpB,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,OAAE,WAAW,eAAe,eAAe,KAAK,eAC9C,qBAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC,OAAoB,WAAU,QAAO,WAAW,eAAe,IAAI,OAClE,8BAAC,cAAW,aAA0B,KADhC,WAER,CACD,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 {\n    originalSeries: series,\n    leftLegendHeight,\n    innerHeight,\n    internalMargin,\n    leftLegend,\n    setLeftLegend,\n  } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n  useEffect(() => {\n    setYTransform(innerHeight / 2 + internalMargin.top - leftLegendHeight / 2);\n  }, [innerHeight, internalMargin.top, leftLegend, leftLegendHeight]);\n\n  return (\n    <g transform={`translate(8,${yTransform})`} ref={setLeftLegend}>\n      {series.map((serie, i) => (\n        <g className=\"tick\" transform={`translate(0,${i * 30})`} key={serie.name}>\n          <LegendItem key={serie.name} domainValue={serie.name} />\n        </g>\n      ))}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBb;AAvBV,SAAgB,YAAY,UAAU,iBAAiB;AACvD,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,IAAI,eAAe,GAAG;AACjF,YAAU,MAAM;AACd,kBAAc,cAAc,IAAI,eAAe,MAAM,mBAAmB,CAAC;AAAA,EAC3E,GAAG,CAAC,aAAa,eAAe,KAAK,YAAY,gBAAgB,CAAC;AAElE,SACE,oBAAC,OAAE,WAAW,eAAe,eAAe,KAAK,eAC9C,iBAAO,IAAI,CAAC,OAAO,MAClB,oBAAC,OAAE,WAAU,QAAO,WAAW,eAAe,IAAI,OAChD,8BAAC,cAA4B,aAAa,MAAM,QAA/B,MAAM,IAA+B,KADM,MAAM,IAEpE,CACD,GACH;AAEJ;",
   "names": []
 }

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

@@ -17,10 +17,11 @@ const LegendItem = ({ domainValue }) => {
     colorScale,
     setHiddenSeries,
     hiddenSeries,
-    props: { series, types }
+    originalSeries: series,
+    props: { types }
   } = useContext(ChartContext);
   const serieData = series.find((serie) => serie.name === domainValue);
-  const LegendIcon = LegendItemsMap[serieData.pointStyle] ?? (serieData.type === "line" || types === "scatter" ? LegendItemCircle : LegendItemSquare);
+  const LegendIcon = LegendItemsMap[serieData?.pointStyle] ?? (serieData?.type === "line" || types === "scatter" ? LegendItemCircle : LegendItemSquare);
   const handleOnClick = useCallback(() => {
     setHiddenSeries((prev) => {
       if (prev.includes(domainValue))
@@ -39,19 +40,12 @@ const LegendItem = ({ domainValue }) => {
         style: hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: "pointer" } : { cursor: "pointer" },
         children: [
           /* @__PURE__ */ jsx(LegendIcon, { fill: colorScale(domainValue) }),
-          serieData.type === "line" ? /* @__PURE__ */ jsx(
-            LegendItemLine,
-            {
-              stroke: colorScale(domainValue),
-              strokeDasharray: LINE.DASH_STYLE_VALUES[serieData.dashStyle]
-            }
-          ) : null,
           /* @__PURE__ */ jsx("text", { x: 24, dy: ".32em", fontWeight: "600", children: domainValue })
         ]
       },
       domainValue
     ),
-    [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries, serieData.dashStyle, serieData.type]
+    [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries]
   );
 };
 export {

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

@@ -1,7 +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';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n  <g transform=\"rotate(45)\">\n    <rect x={-6} y={-6} width={12} height={12} {...props} />\n  </g>\n);\n\nconst LegendItemsMap = {\n  [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n  [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n  [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n  const {\n    colorScale,\n    setHiddenSeries,\n    hiddenSeries,\n    props: { series, types },\n  } = useContext(ChartContext);\n\n  const serieData = series.find((serie) => serie.name === domainValue);\n  const LegendIcon =\n    LegendItemsMap[serieData.pointStyle] ??\n    (serieData.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n  const handleOnClick = useCallback(() => {\n    setHiddenSeries((prev) => {\n      if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n      if (prev.length + 1 !== series.length) return [...prev, domainValue];\n      return prev;\n    });\n  }, [domainValue, series.length, setHiddenSeries]);\n\n  return useMemo(\n    () => (\n      <g\n        onClick={handleOnClick}\n        key={domainValue}\n        className=\"cell\"\n        style={hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: 'pointer' } : { cursor: 'pointer' }}\n      >\n        <LegendIcon fill={colorScale(domainValue)} />\n        {serieData.type === 'line' ? (\n          <LegendItemLine\n            stroke={colorScale(domainValue)}\n            strokeDasharray={LINE.DASH_STYLE_VALUES[serieData.dashStyle]}\n          />\n        ) : null}\n        <text x={24} dy=\".32em\" fontWeight=\"600\">\n          {domainValue}\n        </text>\n      </g>\n    ),\n\n    [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries, serieData.dashStyle, serieData.type],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIW,cAsC5B,YAtC4B;AAJlC,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB,CAAC,UAAU,oBAAC,UAAK,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,IAAI,GAAI,GAAG,OAAO,aAAa,GAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,oBAAC,YAAO,GAAG,GAAI,GAAG,OAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,oBAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,oBAAC,OAAE,WAAU,cACX,8BAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO,GACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,MAAM;AAAA,EACzB,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,UAAU,gBACxB,UAAU,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAEzE,QAAM,gBAAgB,YAAY,MAAM;AACtC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,OAAO,QAAQ,eAAe,CAAC;AAEhD,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QAET,WAAU;AAAA,QACV,OAAO,aAAa,SAAS,WAAW,IAAI,EAAE,SAAS,KAAK,QAAQ,UAAU,IAAI,EAAE,QAAQ,UAAU;AAAA,QAEtG;AAAA,8BAAC,cAAW,MAAM,WAAW,WAAW,GAAG;AAAA,UAC1C,UAAU,SAAS,SAClB;AAAA,YAAC;AAAA;AAAA,cACC,QAAQ,WAAW,WAAW;AAAA,cAC9B,iBAAiB,KAAK,kBAAkB,UAAU;AAAA;AAAA,UACpD,IACE;AAAA,UACJ,oBAAC,UAAK,GAAG,IAAI,IAAG,SAAQ,YAAW,OAChC,uBACH;AAAA;AAAA;AAAA,MAbK;AAAA,IAcP;AAAA,IAGF,CAAC,YAAY,YAAY,aAAa,eAAe,cAAc,UAAU,WAAW,UAAU,IAAI;AAAA,EACxG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { LINE } from '../../../constants';\nimport { ChartContext } from '../../ChartContext';\n\nconst LegendItemLine = (props) => <line x1={-18} x2={18} y1={0} y2={0} {...props} strokeWidth={2} />;\nconst LegendItemCircle = (props) => <circle r={6} {...props} />;\nconst LegendItemSquare = (props) => <rect x={-6} y={-6} width={12} height={12} {...props} />;\nconst LegendItemDiamond = (props) => (\n  <g transform=\"rotate(45)\">\n    <rect x={-6} y={-6} width={12} height={12} {...props} />\n  </g>\n);\n\nconst LegendItemsMap = {\n  [LINE.POINT_STYLE.CIRCLE]: LegendItemCircle,\n  [LINE.POINT_STYLE.SQUARE]: LegendItemSquare,\n  [LINE.POINT_STYLE.DIAMOND]: LegendItemDiamond,\n};\n\nexport const LegendItem = ({ domainValue }) => {\n  const {\n    colorScale,\n    setHiddenSeries,\n    hiddenSeries,\n    originalSeries: series,\n    props: { types },\n  } = useContext(ChartContext);\n\n  const serieData = series.find((serie) => serie.name === domainValue);\n  const LegendIcon =\n    LegendItemsMap[serieData?.pointStyle] ??\n    (serieData?.type === 'line' || types === 'scatter' ? LegendItemCircle : LegendItemSquare);\n\n  const handleOnClick = useCallback(() => {\n    setHiddenSeries((prev) => {\n      if (prev.includes(domainValue)) return prev.filter((serie) => serie !== domainValue);\n      if (prev.length + 1 !== series.length) return [...prev, domainValue];\n      return prev;\n    });\n  }, [domainValue, series.length, setHiddenSeries]);\n\n  return useMemo(\n    () => (\n      <g\n        onClick={handleOnClick}\n        key={domainValue}\n        className=\"cell\"\n        style={hiddenSeries.includes(domainValue) ? { opacity: 0.2, cursor: 'pointer' } : { cursor: 'pointer' }}\n      >\n        <LegendIcon fill={colorScale(domainValue)} />\n        <text x={24} dy=\".32em\" fontWeight=\"600\">\n          {domainValue}\n        </text>\n      </g>\n    ),\n\n    [LegendIcon, colorScale, domainValue, handleOnClick, hiddenSeries],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIW,cAuC5B,YAvC4B;AAJlC,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,MAAM,iBAAiB,CAAC,UAAU,oBAAC,UAAK,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,IAAI,GAAI,GAAG,OAAO,aAAa,GAAG;AAClG,MAAM,mBAAmB,CAAC,UAAU,oBAAC,YAAO,GAAG,GAAI,GAAG,OAAO;AAC7D,MAAM,mBAAmB,CAAC,UAAU,oBAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO;AAC1F,MAAM,oBAAoB,CAAC,UACzB,oBAAC,OAAE,WAAU,cACX,8BAAC,UAAK,GAAG,IAAI,GAAG,IAAI,OAAO,IAAI,QAAQ,IAAK,GAAG,OAAO,GACxD;AAGF,MAAM,iBAAiB;AAAA,EACrB,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,UAAU;AAC9B;AAEO,MAAM,aAAa,CAAC,EAAE,YAAY,MAAM;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,OAAO,EAAE,MAAM;AAAA,EACjB,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,OAAO,KAAK,CAAC,UAAU,MAAM,SAAS,WAAW;AACnE,QAAM,aACJ,eAAe,WAAW,gBACzB,WAAW,SAAS,UAAU,UAAU,YAAY,mBAAmB;AAE1E,QAAM,gBAAgB,YAAY,MAAM;AACtC,oBAAgB,CAAC,SAAS;AACxB,UAAI,KAAK,SAAS,WAAW;AAAG,eAAO,KAAK,OAAO,CAAC,UAAU,UAAU,WAAW;AACnF,UAAI,KAAK,SAAS,MAAM,OAAO;AAAQ,eAAO,CAAC,GAAG,MAAM,WAAW;AACnE,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,aAAa,OAAO,QAAQ,eAAe,CAAC;AAEhD,SAAO;AAAA,IACL,MACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QAET,WAAU;AAAA,QACV,OAAO,aAAa,SAAS,WAAW,IAAI,EAAE,SAAS,KAAK,QAAQ,UAAU,IAAI,EAAE,QAAQ,UAAU;AAAA,QAEtG;AAAA,8BAAC,cAAW,MAAM,WAAW,WAAW,GAAG;AAAA,UAC3C,oBAAC,UAAK,GAAG,IAAI,IAAG,SAAQ,YAAW,OAChC,uBACH;AAAA;AAAA;AAAA,MAPK;AAAA,IAQP;AAAA,IAGF,CAAC,YAAY,YAAY,aAAa,eAAe,YAAY;AAAA,EACnE;AACF;",
   "names": []
 }

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

@@ -1,27 +1,23 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useState, useLayoutEffect } from "react";
+import { useContext, useState, useEffect } from "react";
 import { ChartContext } from "../../ChartContext";
 import { LegendItem } from "./LegendItem";
 const RightLegend = () => {
   const {
-    colorScale,
     innerWidth,
     innerHeight,
     rightLabelWidth,
-    rightLegend,
     axisRightWidth,
     internalMargin,
+    rightLegendHeight,
     setRightLegend,
-    props: { series }
+    originalSeries: series
   } = useContext(ChartContext);
   const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);
-  useLayoutEffect(() => {
-    if (rightLegend) {
-      const bounds = rightLegend.getBoundingClientRect();
-      setYTransform((prev) => prev - bounds.height / 2);
-    }
-  }, [rightLegend]);
+  useEffect(() => {
+    setYTransform(innerHeight / 2 + internalMargin.top - rightLegendHeight / 2);
+  }, [innerHeight, internalMargin.top, rightLegendHeight]);
   return /* @__PURE__ */ jsxs(
     "g",
     {

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, useState, useLayoutEffect } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const RightLegend = () => {\n  const {\n    colorScale,\n    innerWidth,\n    innerHeight,\n    rightLabelWidth,\n    rightLegend,\n    axisRightWidth,\n    internalMargin,\n    setRightLegend,\n    props: { series },\n  } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useLayoutEffect(() => {\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(${innerWidth + internalMargin.left + axisRightWidth + rightLabelWidth},${yTransform})`}\n    >\n      <rect width=\"20\" height={1} fill=\"transparent\" />\n      <g transform={`translate(0,0)`}>\n        {series.map((serie, i) => (\n          <g className=\"tick\" transform={`translate(30,${i * 30})`} key={serie.name}>\n            <LegendItem domainValue={serie.name} />\n          </g>\n        ))}\n      </g>\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2BnB,SAIE,KAJF;AA3BJ,SAAgB,YAAY,UAAU,uBAAuB;AAC7D,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO;AAAA,EAClB,IAAI,WAAW,YAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,kBAAgB,MAAM;AACpB,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;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,aAAa,eAAe,OAAO,iBAAiB,mBAAmB;AAAA,MAE/F;AAAA,4BAAC,UAAK,OAAM,MAAK,QAAQ,GAAG,MAAK,eAAc;AAAA,QAC/C,oBAAC,OAAE,WAAW,kBACX,iBAAO,IAAI,CAAC,OAAO,MAClB,oBAAC,OAAE,WAAU,QAAO,WAAW,gBAAgB,IAAI,OACjD,8BAAC,cAAW,aAAa,MAAM,MAAM,KADwB,MAAM,IAErE,CACD,GACH;AAAA;AAAA;AAAA,EACF;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    innerWidth,\n    innerHeight,\n    rightLabelWidth,\n    axisRightWidth,\n    internalMargin,\n    rightLegendHeight,\n    setRightLegend,\n    originalSeries: series,\n  } = useContext(ChartContext);\n\n  const [yTransform, setYTransform] = useState(innerHeight / 2 + internalMargin.top);\n\n  useEffect(() => {\n    setYTransform(innerHeight / 2 + internalMargin.top - rightLegendHeight / 2);\n  }, [innerHeight, internalMargin.top, rightLegendHeight]);\n\n  return (\n    <g\n      ref={setRightLegend}\n      transform={`translate(${innerWidth + internalMargin.left + axisRightWidth + rightLabelWidth},${yTransform})`}\n    >\n      <rect width=\"20\" height={1} fill=\"transparent\" />\n      <g transform={`translate(0,0)`}>\n        {series.map((serie, i) => (\n          <g className=\"tick\" transform={`translate(30,${i * 30})`} key={serie.name}>\n            <LegendItem domainValue={serie.name} />\n          </g>\n        ))}\n      </g>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuBnB,SAIE,KAJF;AAvBJ,SAAgB,YAAY,UAAU,iBAAiB;AACvD,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI,WAAW,YAAY;AAE3B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,cAAc,IAAI,eAAe,GAAG;AAEjF,YAAU,MAAM;AACd,kBAAc,cAAc,IAAI,eAAe,MAAM,oBAAoB,CAAC;AAAA,EAC5E,GAAG,CAAC,aAAa,eAAe,KAAK,iBAAiB,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,aAAa,aAAa,eAAe,OAAO,iBAAiB,mBAAmB;AAAA,MAE/F;AAAA,4BAAC,UAAK,OAAM,MAAK,QAAQ,GAAG,MAAK,eAAc;AAAA,QAC/C,oBAAC,OAAE,WAAW,kBACX,iBAAO,IAAI,CAAC,OAAO,MAClB,oBAAC,OAAE,WAAU,QAAO,WAAW,gBAAgB,IAAI,OACjD,8BAAC,cAAW,aAAa,MAAM,MAAM,KADwB,MAAM,IAErE,CACD,GACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,47 +1,50 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useMemo, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo, useEffect, useRef, useState } from "react";
 import { select } from "d3";
 import { ChartContext } from "../../ChartContext";
 import { LegendItem } from "./LegendItem";
 const TopLegend = () => {
-  const { colorScale, internalMargin, innerWidth, setTopLegend, toolbarHeight } = useContext(ChartContext);
+  const {
+    colorScale,
+    currentData,
+    topLegendHeight,
+    internalMargin,
+    innerWidth,
+    setTopLegend,
+    width: graphWidth
+  } = useContext(ChartContext);
   const ref = useRef(null);
-  const firstRender = useRef(true);
   const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);
-  useLayoutEffect(() => {
-    if (ref.current && firstRender.current) {
+  useEffect(() => {
+    if (ref.current) {
       const cells = select(ref.current).selectAll(".cell");
       const padding = 30;
       let offset = 0;
       let verticalOffset = 0;
-      cells.each((d, i) => {
+      currentData.forEach((_, 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();
-          if (offset + width + padding > innerWidth - innerWidth / 3) {
+          const { width: currentCellWidth } = d3sel.node().getBBox();
+          const { width: lastCellWidth } = lastCell.node().getBBox();
+          if (offset + lastCellWidth + padding + currentCellWidth + 10 > graphWidth) {
             offset = 0;
             verticalOffset += 20;
           } else {
-            offset += width + padding;
+            offset += lastCellWidth + padding;
           }
           d3sel.attr("transform", `translate(${offset}, ${verticalOffset})`);
         }
       });
       const bounds = ref.current.getBoundingClientRect();
-      setXTransform((prev) => prev - bounds.width / 2);
-      firstRender.current = false;
+      setXTransform(innerWidth / 2 + internalMargin.left - bounds.width / 2);
     }
-  }, [innerWidth]);
-  const render = useMemo(
-    () => /* @__PURE__ */ jsx("g", { ref, transform: `translate(${xTransform},${toolbarHeight + 30})`, children: /* @__PURE__ */ jsxs("g", { ref: setTopLegend, children: [
-      /* @__PURE__ */ jsx("rect", { height: 40, width: 1, fill: "transparent" }),
-      colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsx(LegendItem, { domainValue }, domainValue))
-    ] }) }),
-    [colorScale, setTopLegend, xTransform, toolbarHeight]
+  }, [currentData, graphWidth, innerWidth, internalMargin.left]);
+  return useMemo(
+    () => /* @__PURE__ */ jsx("g", { ref, transform: `translate(${xTransform},10)`, children: /* @__PURE__ */ jsx("g", { ref: setTopLegend, children: colorScale.domain().map((domainValue) => /* @__PURE__ */ jsx(LegendItem, { domainValue }, domainValue)) }) }),
+    [xTransform, setTopLegend, colorScale]
   );
-  return render;
 };
 export {
   TopLegend

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, useLayoutEffect, 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, toolbarHeight } = 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  useLayoutEffect(() => {\n    if (ref.current && firstRender.current) {\n      const cells = select(ref.current).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  const render = useMemo(\n    () => (\n      <g ref={ref} transform={`translate(${xTransform},${toolbarHeight + 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, toolbarHeight],\n  );\n\n  return render;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6Cf,SACE,KADF;AA7CR,SAAgB,YAAY,SAAS,iBAAiB,QAAQ,gBAAgB;AAE9E,SAAoB,cAAc;AAClC,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,YAAY,gBAAgB,YAAY,cAAc,cAAc,IAAI,WAAW,YAAY;AAEvG,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,cAAc,OAAO,IAAI;AAE/B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,IAAI,eAAe,IAAI;AAEjF,kBAAgB,MAAM;AACpB,QAAI,IAAI,WAAW,YAAY,SAAS;AACtC,YAAM,QAAQ,OAAO,IAAI,OAAO,EAAE,UAAU,OAAO;AACnD,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;AACf,QAAM,SAAS;AAAA,IACb,MACE,oBAAC,OAAE,KAAU,WAAW,aAAa,cAAc,gBAAgB,OACjE,+BAAC,OAAE,KAAK,cACN;AAAA,0BAAC,UAAK,QAAQ,IAAI,OAAO,GAAG,MAAK,eAAc;AAAA,MAC9C,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,oBAAC,cAA6B,eAAb,WAAuC,CACzD;AAAA,OACH,GACF;AAAA,IAGF,CAAC,YAAY,cAAc,YAAY,aAAa;AAAA,EACtD;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useEffect, useRef, useState } from 'react';\n\nimport { select } from 'd3';\nimport { ChartContext } from '../../ChartContext';\nimport { LegendItem } from './LegendItem';\n\nexport const TopLegend = () => {\n  const {\n    colorScale,\n    currentData,\n    topLegendHeight,\n    internalMargin,\n    innerWidth,\n    setTopLegend,\n    width: graphWidth,\n  } = useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n\n  const [xTransform, setXTransform] = useState(innerWidth / 2 + internalMargin.left);\n\n  useEffect(() => {\n    if (ref.current) {\n      const cells = select(ref.current).selectAll('.cell');\n      const padding = 30;\n      let offset = 0;\n      let verticalOffset = 0;\n\n      currentData.forEach((_, 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          const { width: currentCellWidth } = d3sel.node().getBBox();\n\n          const { width: lastCellWidth } = lastCell.node().getBBox();\n\n          if (offset + lastCellWidth + padding + currentCellWidth + 10 > graphWidth) {\n            offset = 0;\n            verticalOffset += 20;\n          } else {\n            offset += lastCellWidth + padding;\n          }\n\n          d3sel.attr('transform', `translate(${offset}, ${verticalOffset})`);\n        }\n      });\n      const bounds = ref.current.getBoundingClientRect();\n      setXTransform(innerWidth / 2 + internalMargin.left - bounds.width / 2);\n    }\n  }, [currentData, graphWidth, innerWidth, internalMargin.left]);\n  return useMemo(\n    () => (\n      <g ref={ref} transform={`translate(${xTransform},10)`}>\n        <g ref={setTopLegend}>\n          {colorScale.domain().map((domainValue) => (\n            <LegendItem key={domainValue} domainValue={domainValue} />\n          ))}\n        </g>\n      </g>\n    ),\n\n    [xTransform, setTopLegend, colorScale],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACuDX;AAvDZ,SAAgB,YAAY,SAAS,WAAW,QAAQ,gBAAgB;AAExE,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAEpB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI,WAAW,YAAY;AAE3B,QAAM,MAAM,OAAoB,IAAI;AAEpC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,aAAa,IAAI,eAAe,IAAI;AAEjF,YAAU,MAAM;AACd,QAAI,IAAI,SAAS;AACf,YAAM,QAAQ,OAAO,IAAI,OAAO,EAAE,UAAU,OAAO;AACnD,YAAM,UAAU;AAChB,UAAI,SAAS;AACb,UAAI,iBAAiB;AAErB,kBAAY,QAAQ,CAAC,GAAG,MAAM;AAC5B,YAAI,MAAM,QAAQ,GAAG,IAAI,IAAI;AAC3B,gBAAM,WAAW,OAAO,MAAM,QAAQ,GAAG,IAAI,EAAE;AAC/C,gBAAM,QAAQ,OAAO,MAAM,QAAQ,GAAG,EAAE;AACxC,gBAAM,EAAE,OAAO,iBAAiB,IAAI,MAAM,KAAK,EAAE,QAAQ;AAEzD,gBAAM,EAAE,OAAO,cAAc,IAAI,SAAS,KAAK,EAAE,QAAQ;AAEzD,cAAI,SAAS,gBAAgB,UAAU,mBAAmB,KAAK,YAAY;AACzE,qBAAS;AACT,8BAAkB;AAAA,UACpB,OAAO;AACL,sBAAU,gBAAgB;AAAA,UAC5B;AAEA,gBAAM,KAAK,aAAa,aAAa,WAAW,iBAAiB;AAAA,QACnE;AAAA,MACF,CAAC;AACD,YAAM,SAAS,IAAI,QAAQ,sBAAsB;AACjD,oBAAc,aAAa,IAAI,eAAe,OAAO,OAAO,QAAQ,CAAC;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,aAAa,YAAY,YAAY,eAAe,IAAI,CAAC;AAC7D,SAAO;AAAA,IACL,MACE,oBAAC,OAAE,KAAU,WAAW,aAAa,kBACnC,8BAAC,OAAE,KAAK,cACL,qBAAW,OAAO,EAAE,IAAI,CAAC,gBACxB,oBAAC,cAA6B,eAAb,WAAuC,CACzD,GACH,GACF;AAAA,IAGF,CAAC,YAAY,cAAc,UAAU;AAAA,EACvC;AACF;",
   "names": []
 }

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

@@ -1,51 +1,74 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useCallback, useMemo } from "react";
+import { styled } from "@elliemae/ds-system";
 import { ChartContext } from "../../ChartContext";
+import { TOOLBAR } from "../../../constants";
+const StyledResetter = styled("g")`
+  cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "pointer"};
+  opacity: ${({ isDisabled }) => isDisabled ? "0.4" : "1"};
+  &focus {
+    outline: 2px solid blue;
+  }
+`;
 const Controllers = () => {
   const {
     props: { xScroll },
     width,
+    internalMargin,
     xScale,
     yScale,
+    containerRef,
     containerRatio,
     setContainerRatio,
     lastPosition,
     setToolbarRef,
     setXScrollbarPosition
   } = useContext(ChartContext);
+  const isDisabled = useMemo(() => containerRatio === 1, [containerRatio]);
   const handleOnClick = useCallback(() => {
     setContainerRatio(1);
     setXScrollbarPosition(0);
     lastPosition.current = 0;
   }, [lastPosition, setContainerRatio, setXScrollbarPosition]);
+  const handleOnKeyDown = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (e.code === "Space") {
+        setContainerRatio(1);
+        setXScrollbarPosition(0);
+        lastPosition.current = 0;
+        containerRef.focus();
+      }
+    },
+    [containerRef, lastPosition, setContainerRatio, setXScrollbarPosition]
+  );
   if (xScale.bandwidth || yScale.bandwidth)
     return null;
   if (!xScroll)
     return null;
-  return /* @__PURE__ */ jsxs(
-    "g",
+  return /* @__PURE__ */ jsx(
+    StyledResetter,
     {
       onClick: handleOnClick,
-      transform: `translate(${width - 17 * 2},4) scale(1.5,1.5)`,
+      onKeyDown: handleOnKeyDown,
+      onBlur: (e) => e.stopPropagation(),
+      transform: `translate(${width - TOOLBAR.RESET.WIDTH * 2},${internalMargin.top / 2 - TOOLBAR.RESET.HEIGHT / 2})`,
       strokeLinecap: "round",
-      opacity: "",
-      strokeOpacity: "1",
-      style: { cursor: "pointer", opacity: containerRatio > 1 ? 1 : 0.5 },
+      isDisabled,
       ref: setToolbarRef,
-      children: [
-        /* @__PURE__ */ jsx("rect", { width: "17", height: "17", fill: "white", stroke: "#c0c0c0", strokeWidth: "1" }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275",
-            fill: "#ffffff",
-            stroke: "#c2c2c2",
-            strokeLinecap: "round",
-            strokeWidth: "1"
-          }
-        )
-      ]
+      role: "button",
+      tabIndex: isDisabled ? -1 : 0,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\n        M 0 0 H 17 V 17 H 0 V 0 ",
+          fill: "#ffffff",
+          stroke: "#000000",
+          strokeLinecap: "round",
+          strokeWidth: "1"
+        }
+      )
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Scroller/Controllers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback } from 'react';\nimport { ChartContext } from '../../ChartContext';\n\nexport const Controllers = () => {\n  const {\n    props: { xScroll },\n    width,\n    xScale,\n    yScale,\n    containerRatio,\n    setContainerRatio,\n    lastPosition,\n    setToolbarRef,\n    setXScrollbarPosition,\n  } = useContext(ChartContext);\n\n  const handleOnClick = useCallback(() => {\n    setContainerRatio(1);\n    setXScrollbarPosition(0);\n    lastPosition.current = 0;\n  }, [lastPosition, setContainerRatio, setXScrollbarPosition]);\n\n  // if is a bar chart we dont give controls\n  if (xScale.bandwidth || yScale.bandwidth) return null;\n\n  if (!xScroll) return null;\n  return (\n    <g\n      onClick={handleOnClick}\n      transform={`translate(${width - 17 * 2},4) scale(1.5,1.5)`}\n      strokeLinecap=\"round\"\n      opacity=\"\"\n      strokeOpacity=\"1\"\n      style={{ cursor: 'pointer', opacity: containerRatio > 1 ? 1 : 0.5 }}\n      ref={setToolbarRef}\n    >\n      <rect width=\"17\" height=\"17\" fill=\"white\" stroke=\"#c0c0c0\" strokeWidth=\"1\"></rect>\n      <path\n        d=\"M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\"\n        fill=\"#ffffff\"\n        stroke=\"#c2c2c2\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"1\"\n      ></path>\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6BnB,SASE,KATF;AA3BJ,SAAgB,YAAY,mBAAmB;AAC/C,SAAS,oBAAoB;AAEtB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,gBAAgB,YAAY,MAAM;AACtC,sBAAkB,CAAC;AACnB,0BAAsB,CAAC;AACvB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,cAAc,mBAAmB,qBAAqB,CAAC;AAG3D,MAAI,OAAO,aAAa,OAAO;AAAW,WAAO;AAEjD,MAAI,CAAC;AAAS,WAAO;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,aAAa,QAAQ,KAAK;AAAA,MACrC,eAAc;AAAA,MACd,SAAQ;AAAA,MACR,eAAc;AAAA,MACd,OAAO,EAAE,QAAQ,WAAW,SAAS,iBAAiB,IAAI,IAAI,IAAI;AAAA,MAClE,KAAK;AAAA,MAEL;AAAA,4BAAC,UAAK,OAAM,MAAK,QAAO,MAAK,MAAK,SAAQ,QAAO,WAAU,aAAY,KAAI;AAAA,QAC3E;AAAA,UAAC;AAAA;AAAA,YACC,GAAE;AAAA,YACF,MAAK;AAAA,YACL,QAAO;AAAA,YACP,eAAc;AAAA,YACd,aAAY;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useCallback, useMemo } from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { ChartContext } from '../../ChartContext';\nimport { TOOLBAR } from '../../../constants';\n\nconst StyledResetter = styled('g')<{ isDisabled: 'boolean' }>`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};\n  opacity: ${({ isDisabled }) => (isDisabled ? '0.4' : '1')};\n  &focus {\n    outline: 2px solid blue;\n  }\n`;\nexport const Controllers = () => {\n  const {\n    props: { xScroll },\n    width,\n    internalMargin,\n    xScale,\n    yScale,\n    containerRef,\n    containerRatio,\n    setContainerRatio,\n    lastPosition,\n    setToolbarRef,\n    setXScrollbarPosition,\n  } = useContext(ChartContext);\n\n  const isDisabled = useMemo(() => containerRatio === 1, [containerRatio]);\n  const handleOnClick = useCallback(() => {\n    setContainerRatio(1);\n    setXScrollbarPosition(0);\n    lastPosition.current = 0;\n  }, [lastPosition, setContainerRatio, setXScrollbarPosition]);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (e.code === 'Space') {\n        setContainerRatio(1);\n        setXScrollbarPosition(0);\n        lastPosition.current = 0;\n        containerRef.focus();\n      }\n    },\n    [containerRef, lastPosition, setContainerRatio, setXScrollbarPosition],\n  );\n  // if is a bar chart we dont give controls\n  if (xScale.bandwidth || yScale.bandwidth) return null;\n\n  if (!xScroll) return null;\n  return (\n    <StyledResetter\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      onBlur={(e) => e.stopPropagation()}\n      transform={`translate(${width - TOOLBAR.RESET.WIDTH * 2},${internalMargin.top / 2 - TOOLBAR.RESET.HEIGHT / 2})`}\n      strokeLinecap=\"round\"\n      isDisabled={isDisabled}\n      ref={setToolbarRef}\n      role=\"button\"\n      tabIndex={isDisabled ? -1 : 0}\n    >\n      <path\n        d=\"M 2.875 7.75 A 5.625 5.625 0 1 1 4.5225 11.7275 L 8.2725 10.7275 L 6.5225 14.9775 L 4.5225 11.7275\n        M 0 0 H 17 V 17 H 0 V 0 \"\n        fill=\"#ffffff\"\n        stroke=\"#000000\"\n        strokeLinecap=\"round\"\n        strokeWidth=\"1\"\n      ></path>\n    </StyledResetter>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgEjB;AA9DN,SAAgB,YAAY,aAAa,eAAe;AACxD,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAExB,MAAM,iBAAiB,OAAO,GAAG;AAAA,YACrB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA,aACjD,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ;AAAA;AAAA;AAAA;AAAA;AAKhD,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,aAAa,QAAQ,MAAM,mBAAmB,GAAG,CAAC,cAAc,CAAC;AACvE,QAAM,gBAAgB,YAAY,MAAM;AACtC,sBAAkB,CAAC;AACnB,0BAAsB,CAAC;AACvB,iBAAa,UAAU;AAAA,EACzB,GAAG,CAAC,cAAc,mBAAmB,qBAAqB,CAAC;AAE3D,QAAM,kBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,QAAE,gBAAgB;AAClB,UAAI,EAAE,SAAS,SAAS;AACtB,0BAAkB,CAAC;AACnB,8BAAsB,CAAC;AACvB,qBAAa,UAAU;AACvB,qBAAa,MAAM;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,cAAc,mBAAmB,qBAAqB;AAAA,EACvE;AAEA,MAAI,OAAO,aAAa,OAAO;AAAW,WAAO;AAEjD,MAAI,CAAC;AAAS,WAAO;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ,CAAC,MAAM,EAAE,gBAAgB;AAAA,MACjC,WAAW,aAAa,QAAQ,QAAQ,MAAM,QAAQ,KAAK,eAAe,MAAM,IAAI,QAAQ,MAAM,SAAS;AAAA,MAC3G,eAAc;AAAA,MACd;AAAA,MACA,KAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAU,aAAa,KAAK;AAAA,MAE5B;AAAA,QAAC;AAAA;AAAA,UACC,GAAE;AAAA,UAEF,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,aAAY;AAAA;AAAA,MACb;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }