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

package/dist/cjs/graphs/Chart/parts/Axis/AxisLeft.js

@@ -35,7 +35,7 @@ var import_styles = require("../../styles");
 var import_ChartContext = require("../../ChartContext");
 const AxisLeft = () => {
   const {
-    props: { yAxis, yAxisLabelOffset = 45, yAxisLabel },
+    props: { yAxis, height },
     innerHeight,
     innerWidth,
     yScale,
@@ -44,49 +44,39 @@ const AxisLeft = () => {
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const ref = (0, import_react.useRef)();
   const gridRef = (0, import_react.useRef)();
-  const ticks = yScale.ticks?.();
+  const ticks = yScale.ticks?.(yAxis.tickCount ?? height / 80);
   (0, import_react.useEffect)(() => {
     const axis = (0, import_d3.axisLeft)(yScale);
+    const grid = (0, import_d3.axisLeft)(yScale).tickFormat("").tickSize(yAxis?.showGrid ? -innerWidth : 0).tickSizeOuter(0);
     if (yAxis.tickValues && ticks) {
       const finalTicks = yAxis.overwriteTicks ? yAxis.tickValues : [...ticks, ...yAxis.tickValues];
       axis.tickValues(finalTicks);
+    } else {
+      axis.tickValues(ticks);
+      grid.tickValues(ticks);
     }
     if (yAxis.tickFormat) {
       axis.tickFormat(yAxis.tickFormat);
     }
-    const grid = (0, import_d3.axisLeft)(yScale).tickFormat("").tickSize(yAxis?.showGrid ? -innerWidth : 0).tickSizeOuter(0);
     (0, import_d3.select)(ref.current).call(axis);
     (0, import_d3.select)(gridRef.current).call(grid);
-  }, [
-    innerHeight,
-    innerWidth,
-    ticks,
-    yAxis.overwriteTicks,
-    yAxis?.showGrid,
-    yAxis.tickFormat,
-    yAxis.tickValues,
-    yScale
-  ]);
+    if (yAxis.hideAxis) {
+      (0, import_d3.select)(ref.current).call((g) => {
+        g.selectAll(".tick").remove();
+        g.select(".domain").remove();
+      });
+      (0, import_d3.select)(gridRef.current).call((g) => g.select(".domain").remove());
+    }
+  }, [innerHeight, innerWidth, ticks, yAxis, yScale]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
         ref: setAxisLeftWidth,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-            transform: `translate(${-ref.current?.getBoundingClientRect().width},${innerHeight / 2 + 10}) rotate(-90)`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxisLabel, {
-              className: "axis-label",
-              textAnchor: "middle",
-              dy: -15,
-              children: yAxis?.label
-            })
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, {
-            ref,
-            color: yAxis.color,
-            className: "axis-left"
-          })
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, {
+          ref,
+          color: yAxis.color,
+          className: "axis-left"
+        })
       }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, {
         ref: gridRef

package/dist/cjs/graphs/Chart/parts/Axis/AxisLeft.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisLeft.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useCallback, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid, StyledAxisLabel } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nexport const AxisLeft = () => {\n  const {\n    props: { yAxis, yAxisLabelOffset = 45, yAxisLabel },\n    innerHeight,\n    innerWidth,\n    yScale,\n    internalMargin,\n    setAxisLeftWidth,\n  } = useContext(ChartContext);\n\n  const ref = useRef();\n  const gridRef = useRef();\n  const ticks = yScale.ticks?.();\n\n  useEffect(() => {\n    const axis = axisLeft(yScale);\n\n    if (yAxis.tickValues && ticks) {\n      const finalTicks = yAxis.overwriteTicks ? yAxis.tickValues : [...ticks, ...yAxis.tickValues];\n      axis.tickValues(finalTicks);\n    }\n\n    if (yAxis.tickFormat) {\n      axis.tickFormat(yAxis.tickFormat);\n    }\n\n    const grid = axisLeft(yScale)\n      .tickFormat('')\n      .tickSize(yAxis?.showGrid ? -innerWidth : 0)\n      .tickSizeOuter(0);\n\n    select(ref.current).call(axis);\n\n    select(gridRef.current).call(grid);\n  }, [\n    innerHeight,\n    innerWidth,\n    ticks,\n    yAxis.overwriteTicks,\n    yAxis?.showGrid,\n    yAxis.tickFormat,\n    yAxis.tickValues,\n    yScale,\n  ]);\n  return (\n    <g>\n      <g ref={setAxisLeftWidth}>\n        <g\n          transform={`translate(${-ref.current?.getBoundingClientRect().width ?? 0},${\n            innerHeight / 2 + 10\n          }) rotate(-90)`}\n        >\n          <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={-15}>\n            {yAxis?.label}\n          </StyledAxisLabel>\n        </g>\n        <StyledAxis ref={ref} color={yAxis.color} className=\"axis-left\"></StyledAxis>\n      </g>\n\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkE;AAClE,gBAAiC;AACjC,oBAAwD;AACxD,0BAA6B;AACtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,mBAAmB,IAAI,WAAW;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAO;AACnB,QAAM,cAAU,qBAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ;AAE7B,8BAAU,MAAM;AACd,UAAM,WAAO,oBAAS,MAAM;AAE5B,QAAI,MAAM,cAAc,OAAO;AAC7B,YAAM,aAAa,MAAM,iBAAiB,MAAM,aAAa,CAAC,GAAG,OAAO,GAAG,MAAM,UAAU;AAC3F,WAAK,WAAW,UAAU;AAAA,IAC5B;AAEA,QAAI,MAAM,YAAY;AACpB,WAAK,WAAW,MAAM,UAAU;AAAA,IAClC;AAEA,UAAM,WAAO,oBAAS,MAAM,EACzB,WAAW,EAAE,EACb,SAAS,OAAO,WAAW,CAAC,aAAa,CAAC,EAC1C,cAAc,CAAC;AAElB,0BAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAE7B,0BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACD,SACE,6CAAC;AAAA,IACC;AAAA,mDAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,sDAAC;AAAA,YACC,WAAW,aAAa,CAAC,IAAI,SAAS,sBAAsB,EAAE,SAC5D,cAAc,IAAI;AAAA,YAGpB,sDAAC;AAAA,cAAgB,WAAU;AAAA,cAAa,YAAW;AAAA,cAAS,IAAI;AAAA,cAC7D,iBAAO;AAAA,aACV;AAAA,WACF;AAAA,UACA,4CAAC;AAAA,YAAW;AAAA,YAAU,OAAO,MAAM;AAAA,YAAO,WAAU;AAAA,WAAY;AAAA;AAAA,OAClE;AAAA,MAEA,4CAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useCallback, useEffect, useRef } from 'react';\nimport { select, selectAll, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid, StyledAxisLabel } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nexport const AxisLeft = () => {\n  const {\n    props: { yAxis, height },\n    innerHeight,\n    innerWidth,\n    yScale,\n    internalMargin,\n    setAxisLeftWidth,\n  } = useContext(ChartContext);\n\n  const ref = useRef();\n  const gridRef = useRef();\n  const ticks = yScale.ticks?.(yAxis.tickCount ?? height / 80);\n\n  useEffect(() => {\n    const axis = axisLeft(yScale);\n\n    const grid = axisLeft(yScale)\n      .tickFormat('')\n      .tickSize(yAxis?.showGrid ? -innerWidth : 0)\n      .tickSizeOuter(0);\n\n    if (yAxis.tickValues && ticks) {\n      const finalTicks = yAxis.overwriteTicks ? yAxis.tickValues : [...ticks, ...yAxis.tickValues];\n      axis.tickValues(finalTicks);\n    } else {\n      axis.tickValues(ticks);\n      grid.tickValues(ticks);\n    }\n\n    if (yAxis.tickFormat) {\n      axis.tickFormat(yAxis.tickFormat);\n    }\n\n    select(ref.current).call(axis);\n\n    select(gridRef.current).call(grid);\n\n    if (yAxis.hideAxis) {\n      select(ref.current).call((g) => {\n        g.selectAll('.tick').remove();\n        g.select('.domain').remove();\n      });\n      select(gridRef.current).call((g) => g.select('.domain').remove());\n    }\n  }, [innerHeight, innerWidth, ticks, yAxis, yScale]);\n  return (\n    <g>\n      <g ref={setAxisLeftWidth}>\n        <StyledAxis ref={ref} color={yAxis.color} className=\"axis-left\"></StyledAxis>\n      </g>\n\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkE;AAClE,gBAA4C;AAC5C,oBAAwD;AACxD,0BAA6B;AACtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAO;AACnB,QAAM,cAAU,qBAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ,MAAM,aAAa,SAAS,EAAE;AAE3D,8BAAU,MAAM;AACd,UAAM,WAAO,oBAAS,MAAM;AAE5B,UAAM,WAAO,oBAAS,MAAM,EACzB,WAAW,EAAE,EACb,SAAS,OAAO,WAAW,CAAC,aAAa,CAAC,EAC1C,cAAc,CAAC;AAElB,QAAI,MAAM,cAAc,OAAO;AAC7B,YAAM,aAAa,MAAM,iBAAiB,MAAM,aAAa,CAAC,GAAG,OAAO,GAAG,MAAM,UAAU;AAC3F,WAAK,WAAW,UAAU;AAAA,IAC5B,OAAO;AACL,WAAK,WAAW,KAAK;AACrB,WAAK,WAAW,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,YAAY;AACpB,WAAK,WAAW,MAAM,UAAU;AAAA,IAClC;AAEA,0BAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAE7B,0BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAEjC,QAAI,MAAM,UAAU;AAClB,4BAAO,IAAI,OAAO,EAAE,KAAK,CAAC,MAAM;AAC9B,UAAE,UAAU,OAAO,EAAE,OAAO;AAC5B,UAAE,OAAO,SAAS,EAAE,OAAO;AAAA,MAC7B,CAAC;AACD,4BAAO,QAAQ,OAAO,EAAE,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS,EAAE,OAAO,CAAC;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,aAAa,YAAY,OAAO,OAAO,MAAM,CAAC;AAClD,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QAAE,KAAK;AAAA,QACN,sDAAC;AAAA,UAAW;AAAA,UAAU,OAAO,MAAM;AAAA,UAAO,WAAU;AAAA,SAAY;AAAA,OAClE;AAAA,MAEA,4CAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/parts/Axis/AxisRight.js

@@ -35,14 +35,14 @@ var import_styles = require("../../styles");
 var import_ChartContext = require("../../ChartContext");
 const AxisRight = () => {
   const {
-    props: { y2Axis, yAxisLabelOffset = 45, y2AxisLabel },
-    innerHeight,
+    props: { y2Axis, height },
     innerWidth,
     y2Scale,
     setAxisRightWidth
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   if (!y2Axis)
     return null;
+  const ticks = y2Scale.ticks?.(y2Axis.tickCount ?? height / 80);
   const ref = (0, import_react.useRef)();
   (0, import_react.useEffect)(() => {
     const axis = (0, import_d3.axisRight)(y2Scale).tickSizeOuter(0);
@@ -53,13 +53,8 @@ const AxisRight = () => {
     transform: `translate(${innerWidth},0)`,
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, {
       ref,
-      color: y2Axis.color,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
-        className: "axis-label",
-        textAnchor: "middle",
-        transform: `translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`
-      })
+      color: y2Axis.color
     })
-  });
+  }, ticks.toString());
 };
 //# sourceMappingURL=AxisRight.js.map

package/dist/cjs/graphs/Chart/parts/Axis/AxisRight.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisRight.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisRight } from 'd3';\nimport { StyledAxis } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\n\nexport const AxisRight = () => {\n  const {\n    props: { y2Axis, yAxisLabelOffset = 45, y2AxisLabel },\n    innerHeight,\n    innerWidth,\n    y2Scale,\n    setAxisRightWidth,\n  } = useContext(ChartContext);\n\n  if (!y2Axis) return null;\n  const ref = useRef();\n  useEffect(() => {\n    const axis = axisRight(y2Scale).tickSizeOuter(0);\n\n    select(ref.current).call(axis);\n  }, [innerWidth, y2Scale]);\n  return (\n    <g ref={setAxisRightWidth} transform={`translate(${innerWidth},0)`}>\n      <StyledAxis ref={ref} color={y2Axis.color}>\n        <text\n          className=\"axis-label\"\n          textAnchor=\"middle\"\n          transform={`translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`}\n        >\n          {/* {y2Axis?.label} */}\n        </text>\n      </StyledAxis>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAqD;AACrD,gBAAkC;AAClC,oBAA2B;AAC3B,0BAA6B;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,mBAAmB,IAAI,YAAY;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,MAAI,CAAC;AAAQ,WAAO;AACpB,QAAM,UAAM,qBAAO;AACnB,8BAAU,MAAM;AACd,UAAM,WAAO,qBAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,0BAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAAA,EAC/B,GAAG,CAAC,YAAY,OAAO,CAAC;AACxB,SACE,4CAAC;AAAA,IAAE,KAAK;AAAA,IAAmB,WAAW,aAAa;AAAA,IACjD,sDAAC;AAAA,MAAW;AAAA,MAAU,OAAO,OAAO;AAAA,MAClC,sDAAC;AAAA,QACC,WAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAW,aAAa,CAAC,oBAAoB,cAAc;AAAA,OAG7D;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { select, axisRight } from 'd3';\nimport { StyledAxis, StyledAxisLabel } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nexport const AxisRight = () => {\n  const {\n    props: { y2Axis, height },\n    innerWidth,\n    y2Scale,\n    setAxisRightWidth,\n  } = useContext(ChartContext);\n  if (!y2Axis) return null;\n\n  const ticks = y2Scale.ticks?.(y2Axis.tickCount ?? height / 80);\n\n  const ref = useRef();\n  useEffect(() => {\n    const axis = axisRight(y2Scale).tickSizeOuter(0);\n\n    select(ref.current).call(axis);\n  }, [innerWidth, y2Scale]);\n\n  return (\n    <g key={ticks.toString()} ref={setAxisRightWidth} transform={`translate(${innerWidth},0)`}>\n      <StyledAxis ref={ref} color={y2Axis.color} />\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA8D;AAC9D,gBAAkC;AAClC,oBAA4C;AAC5C,0BAA6B;AACtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,OAAO;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,MAAI,CAAC;AAAQ,WAAO;AAEpB,QAAM,QAAQ,QAAQ,QAAQ,OAAO,aAAa,SAAS,EAAE;AAE7D,QAAM,UAAM,qBAAO;AACnB,8BAAU,MAAM;AACd,UAAM,WAAO,qBAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,0BAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAAA,EAC/B,GAAG,CAAC,YAAY,OAAO,CAAC;AAExB,SACE,4CAAC;AAAA,IAAyB,KAAK;AAAA,IAAmB,WAAW,aAAa;AAAA,IACxE,sDAAC;AAAA,MAAW;AAAA,MAAU,OAAO,OAAO;AAAA,KAAO;AAAA,KADrC,MAAM,SAAS,CAEvB;AAEJ;",
   "names": []
 }

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

@@ -34,6 +34,7 @@ var import_styles = require("../styles");
 var import_ChartContext = require("../ChartContext");
 var import_useKeyboardNavigation = require("../config/useKeyboardNavigation");
 var import_Legend = require("./Legend/Legend");
+var import_Label = require("./Labels/Label");
 const ChartContainer = ({ children }) => {
   const {
     props: { width, height },
@@ -83,7 +84,16 @@ const ChartContainer = ({ children }) => {
     oldLastPosition.current = xScrollbarPosition;
     setIsGrabbed(false);
   }, [oldLastPosition, setIsGrabbed, xScrollbarPosition]);
-  const key = `translate(${internalMargin.left},${internalMargin.top})`;
+  const key = (0, import_react.useMemo)(
+    () => `translate(${internalMargin.left},${internalMargin.top},${internalMargin.right})`,
+    [internalMargin]
+  );
+  (0, import_react.useEffect)(() => {
+    containerRef?.current?.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      containerRef?.current?.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [containerRef, handleMouseMove]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSVGWrapper, {
     ref: containerRef,
     onKeyDown: onInputKeyDown,
@@ -93,26 +103,30 @@ const ChartContainer = ({ children }) => {
     onFocus: handleOnFocus,
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler,
-    onMouseMove: handleMouseMove,
     onMouseUp: handleMouseUp,
     onMouseDown: (e) => e.preventDefault(),
     isGrabbed,
     style: { width },
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
       ref: svgRef,
       width,
       height,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Legend.Legend, {})
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-          className: "container",
-          transform: `translate(${internalMargin.left},${internalMargin.top})`,
-          children
-        })
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Legend.Legend, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.Label, {})
+            ]
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+            className: "container",
+            transform: `translate(${internalMargin.left},${internalMargin.top})`,
+            children
+          })
+        ]
+      }, key)
     })
-  }, key);
+  });
 };
 //# sourceMappingURL=ChartContainer.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/ChartContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useCallback, useRef } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\ninterface ChartContainerT {\n  children: JSX.Element | JSX.Element[] | string | string[];\n}\nexport const ChartContainer: React.ComponentType<ChartContainerT> = ({ children }) => {\n  const {\n    props: { width, height },\n    containerRef,\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    oldLastPosition,\n    setIsScrollbarVisible,\n  } = useContext(ChartContext);\n\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n  }, [setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleMouseMove = useCallback(\n    (e: React.MouseEvent) => {\n      if (!isGrabbed) return;\n      setActivePoint('');\n      const newPosition = oldLastPosition?.current + e.clientX - startPosition;\n      if (newPosition < 0) setXScrollbarPosition(0);\n      else if (newPosition > innerWidth - innerWidth / containerRatio)\n        setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n      else setXScrollbarPosition(newPosition);\n    },\n    [isGrabbed, setActivePoint, oldLastPosition, startPosition, setXScrollbarPosition, innerWidth, containerRatio],\n  );\n\n  const handleMouseUp = useCallback(() => {\n    oldLastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [oldLastPosition, setIsGrabbed, xScrollbarPosition]);\n  const key = `translate(${internalMargin.left},${internalMargin.top})`;\n  return (\n    <StyledSVGWrapper\n      key={key}\n      ref={containerRef}\n      onKeyDown={onInputKeyDown}\n      aria-hidden=\"true\"\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: width }}\n    >\n      <svg ref={svgRef} width={width} height={height}>\n        <g>\n          <Legend />\n        </g>\n        <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n          {children}\n        </g>\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAuD;AACvD,oBAAiC;AAEjC,0BAA6B;AAC7B,mCAAsC;AACtC,oBAAuB;AAIhB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,EAAE,gBAAgB,cAAc,cAAc,QAAI,oDAAsB;AAE9E,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAC1B,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,oBAAgB,EAAE;AAClB,oBAAgB,EAAE;AAClB,0BAAsB,KAAK;AAC3B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,uBAAuB,iBAAiB,eAAe,CAAC;AAE1E,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,UAAI,CAAC;AAAW;AAChB,qBAAe,EAAE;AACjB,YAAM,cAAc,iBAAiB,UAAU,EAAE,UAAU;AAC3D,UAAI,cAAc;AAAG,8BAAsB,CAAC;AAAA,eACnC,cAAc,aAAa,aAAa;AAC/C,8BAAsB,aAAa,aAAa,cAAc;AAAA;AAC3D,8BAAsB,WAAW;AAAA,IACxC;AAAA,IACA,CAAC,WAAW,gBAAgB,iBAAiB,eAAe,uBAAuB,YAAY,cAAc;AAAA,EAC/G;AAEA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,oBAAgB,UAAU;AAC1B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,iBAAiB,cAAc,kBAAkB,CAAC;AACtD,QAAM,MAAM,aAAa,eAAe,QAAQ,eAAe;AAC/D,SACE,4CAAC;AAAA,IAEC,KAAK;AAAA,IACL,WAAW;AAAA,IACX,eAAY;AAAA,IACZ,UAAU,cAAc,KAAK;AAAA,IAC7B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc;AAAA,IACd,cAAc;AAAA,IACd,aAAa;AAAA,IACb,WAAW;AAAA,IACX,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,IACrC;AAAA,IACA,OAAO,EAAE,MAAa;AAAA,IAEtB,uDAAC;AAAA,MAAI,KAAK;AAAA,MAAQ;AAAA,MAAc;AAAA,MAC9B;AAAA,oDAAC;AAAA,UACC,sDAAC,wBAAO;AAAA,SACV;AAAA,QACA,4CAAC;AAAA,UAAE,WAAU;AAAA,UAAY,WAAW,aAAa,eAAe,QAAQ,eAAe;AAAA,UACpF;AAAA,SACH;AAAA;AAAA,KACF;AAAA,KAtBK,GAuBP;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback, useEffect } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Label } from './Labels/Label';\ninterface ChartContainerT {\n  children: JSX.Element | JSX.Element[] | string | string[];\n}\nexport const ChartContainer: React.ComponentType<ChartContainerT> = ({ children }) => {\n  const {\n    props: { width, height },\n    containerRef,\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    oldLastPosition,\n    setIsScrollbarVisible,\n  } = useContext(ChartContext);\n\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n  }, [setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleMouseMove = useCallback(\n    (e: React.MouseEvent) => {\n      if (!isGrabbed) return;\n      setActivePoint('');\n      const newPosition = oldLastPosition?.current + e.clientX - startPosition;\n      if (newPosition < 0) setXScrollbarPosition(0);\n      else if (newPosition > innerWidth - innerWidth / containerRatio)\n        setXScrollbarPosition(innerWidth - innerWidth / containerRatio);\n      else setXScrollbarPosition(newPosition);\n    },\n    [isGrabbed, setActivePoint, oldLastPosition, startPosition, setXScrollbarPosition, innerWidth, containerRatio],\n  );\n  const handleMouseUp = useCallback(() => {\n    oldLastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [oldLastPosition, setIsGrabbed, xScrollbarPosition]);\n  const key = useMemo(\n    () => `translate(${internalMargin.left},${internalMargin.top},${internalMargin.right})`,\n    [internalMargin],\n  );\n\n  useEffect(() => {\n    containerRef?.current?.addEventListener('mousemove', handleMouseMove);\n    // containerRef?.current?.addEventListener('wheel', handleScroll);\n\n    return () => {\n      containerRef?.current?.removeEventListener('mousemove', handleMouseMove);\n      // containerRef?.current?.removeEventListener('wheel', handleScroll);\n    };\n  }, [containerRef, handleMouseMove]);\n\n  return (\n    <StyledSVGWrapper\n      ref={containerRef}\n      onKeyDown={onInputKeyDown}\n      aria-hidden=\"true\"\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      // // onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: width }}\n    >\n      <svg ref={svgRef} width={width} height={height}>\n        <g key={key}>\n          <g>\n            <Legend />\n            <Label />\n          </g>\n          <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n            {children}\n          </g>\n        </g>\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAmE;AACnE,oBAAiC;AAEjC,0BAA6B;AAC7B,mCAAsC;AACtC,oBAAuB;AACvB,mBAAsB;AAIf,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,EAAE,gBAAgB,cAAc,cAAc,QAAI,oDAAsB;AAE9E,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAC1B,QAAM,0BAAsB,0BAAY,MAAM;AAC5C,oBAAgB,EAAE;AAClB,oBAAgB,EAAE;AAClB,0BAAsB,KAAK;AAC3B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,uBAAuB,iBAAiB,eAAe,CAAC;AAE1E,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,UAAI,CAAC;AAAW;AAChB,qBAAe,EAAE;AACjB,YAAM,cAAc,iBAAiB,UAAU,EAAE,UAAU;AAC3D,UAAI,cAAc;AAAG,8BAAsB,CAAC;AAAA,eACnC,cAAc,aAAa,aAAa;AAC/C,8BAAsB,aAAa,aAAa,cAAc;AAAA;AAC3D,8BAAsB,WAAW;AAAA,IACxC;AAAA,IACA,CAAC,WAAW,gBAAgB,iBAAiB,eAAe,uBAAuB,YAAY,cAAc;AAAA,EAC/G;AACA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,oBAAgB,UAAU;AAC1B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,iBAAiB,cAAc,kBAAkB,CAAC;AACtD,QAAM,UAAM;AAAA,IACV,MAAM,aAAa,eAAe,QAAQ,eAAe,OAAO,eAAe;AAAA,IAC/E,CAAC,cAAc;AAAA,EACjB;AAEA,8BAAU,MAAM;AACd,kBAAc,SAAS,iBAAiB,aAAa,eAAe;AAGpE,WAAO,MAAM;AACX,oBAAc,SAAS,oBAAoB,aAAa,eAAe;AAAA,IAEzE;AAAA,EACF,GAAG,CAAC,cAAc,eAAe,CAAC;AAElC,SACE,4CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW;AAAA,IACX,eAAY;AAAA,IACZ,UAAU,cAAc,KAAK;AAAA,IAC7B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc;AAAA,IACd,cAAc;AAAA,IAEd,WAAW;AAAA,IACX,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,IACrC;AAAA,IACA,OAAO,EAAE,MAAa;AAAA,IAEtB,sDAAC;AAAA,MAAI,KAAK;AAAA,MAAQ;AAAA,MAAc;AAAA,MAC9B,uDAAC;AAAA,QACC;AAAA,uDAAC;AAAA,YACC;AAAA,0DAAC,wBAAO;AAAA,cACR,4CAAC,sBAAM;AAAA;AAAA,WACT;AAAA,UACA,4CAAC;AAAA,YAAE,WAAU;AAAA,YAAY,WAAW,aAAa,eAAe,QAAQ,eAAe;AAAA,YACpF;AAAA,WACH;AAAA;AAAA,SAPM,GAQR;AAAA,KACF;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/{series/Pie.js → parts/Labels/BottomLabel.js}

@@ -22,25 +22,33 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Pie_exports = {};
-__export(Pie_exports, {
-  Pie: () => Pie
+var BottomLabel_exports = {};
+__export(BottomLabel_exports, {
+  BottomLabel: () => BottomLabel
 });
-module.exports = __toCommonJS(Pie_exports);
+module.exports = __toCommonJS(BottomLabel_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_ChartContext = require("../ChartContext");
-const Pie = () => {
+var import_ChartContext = require("../../ChartContext");
+var import_styles = require("../../styles");
+const BottomLabel = () => {
   const {
+    internalMargin,
+    setBottomLabel,
     innerHeight,
     innerWidth,
-    colorScale,
-    props: { data }
-  } = (0, import_react.useContext)(import_ChartContext.PieChartContext);
-  const pieData = data.reduce((acc, curr) => acc[curr.name] = curr.value, {});
+    props: { xAxis }
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-    transform: `translate(${innerWidth / 2},${innerHeight / 2}`
+    ref: setBottomLabel,
+    transform: `translate(${innerWidth / 2 + internalMargin.left},${innerHeight + internalMargin.top})`,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxisLabel, {
+      className: "axis-label",
+      textAnchor: "middle",
+      dy: 35,
+      children: xAxis?.label
+    })
   });
 };
-//# sourceMappingURL=Pie.js.map
+//# sourceMappingURL=BottomLabel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/parts/Labels/BottomLabel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IAEA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,SACE,4CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,IAAI,eAAe,QAAQ,cAAc,eAAe;AAAA,IAE7F,sDAAC;AAAA,MAAgB,WAAU;AAAA,MAAa,YAAW;AAAA,MAAS,IAAI;AAAA,MAC7D,iBAAO;AAAA,KACV;AAAA,GACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Label_exports = {};
+__export(Label_exports, {
+  Label: () => Label
+});
+module.exports = __toCommonJS(Label_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ChartContext = require("../../ChartContext");
+var import_RightLabel = require("./RightLabel");
+var import_LeftLabel = require("./LeftLabel");
+var import_BottomLabel = require("./BottomLabel");
+const Label = () => {
+  const {
+    props: { xAxis, yAxis, y2Axis }
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  return (0, import_react.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+      children: [
+        y2Axis?.label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RightLabel.RightLabel, {}) : "",
+        yAxis?.label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftLabel.LeftLabel, {}) : "",
+        xAxis?.label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BottomLabel.BottomLabel, {}) : ""
+      ]
+    }),
+    [xAxis?.label, y2Axis?.label, yAxis?.label]
+  );
+};
+//# sourceMappingURL=Label.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/parts/Labels/Label.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAE3C,0BAA6B;AAC7B,wBAA2B;AAC3B,uBAA0B;AAC1B,yBAA4B;AAErB,MAAM,QAAQ,MAAM;AACzB,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO,OAAO;AAAA,EAChC,QAAI,yBAAW,gCAAY;AAE3B,aAAO;AAAA,IACL,MACE,6CAAC;AAAA,MACE;AAAA,gBAAQ,QAAQ,4CAAC,gCAAW,IAAK;AAAA,QACjC,OAAO,QAAQ,4CAAC,8BAAU,IAAK;AAAA,QAC/B,OAAO,QAAQ,4CAAC,kCAAY,IAAK;AAAA;AAAA,KACpC;AAAA,IAEF,CAAC,OAAO,OAAO,QAAQ,OAAO,OAAO,KAAK;AAAA,EAC5C;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,65 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LeftLabel_exports = {};
+__export(LeftLabel_exports, {
+  LeftLabel: () => LeftLabel
+});
+module.exports = __toCommonJS(LeftLabel_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ChartContext = require("../../ChartContext");
+var import_styles = require("../../styles");
+const LeftLabel = () => {
+  const {
+    innerHeight,
+    internalMargin,
+    setLeftLabel,
+    leftLegend,
+    props: { yAxis }
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const leftMargin = (0, import_react.useMemo)(
+    () => leftLegend?.getBoundingClientRect().width ? leftLegend?.getBoundingClientRect().width + 15 : 8,
+    [leftLegend]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    ref: setLeftLabel,
+    transform: `translate(${leftMargin},${innerHeight / 2 + internalMargin.top}) rotate(-90)`,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+        height: "30",
+        width: "1",
+        fill: "transparent"
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxisLabel, {
+        className: "axis-label",
+        textAnchor: "middle",
+        dy: 15,
+        children: yAxis?.label
+      })
+    ]
+  });
+};
+//# sourceMappingURL=LeftLabel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/parts/Labels/LeftLabel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,0BAA6B;AAC7B,oBAAgC;AAEzB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAE3B,QAAM,iBAAa;AAAA,IACjB,MAAO,YAAY,sBAAsB,EAAE,QAAQ,YAAY,sBAAsB,EAAE,QAAQ,KAAK;AAAA,IACpG,CAAC,UAAU;AAAA,EACb;AACA,SACE,6CAAC;AAAA,IAAE,KAAK;AAAA,IAAc,WAAW,aAAa,cAAc,cAAc,IAAI,eAAe;AAAA,IAC3F;AAAA,kDAAC;AAAA,QAAK,QAAO;AAAA,QAAK,OAAM;AAAA,QAAI,MAAK;AAAA,OAAc;AAAA,MAC/C,4CAAC;AAAA,QAAgB,WAAU;AAAA,QAAa,YAAW;AAAA,QAAS,IAAI;AAAA,QAC7D,iBAAO;AAAA,OACV;AAAA;AAAA,GACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,67 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RightLabel_exports = {};
+__export(RightLabel_exports, {
+  RightLabel: () => RightLabel
+});
+module.exports = __toCommonJS(RightLabel_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ChartContext = require("../../ChartContext");
+var import_styles = require("../../styles");
+const RightLabel = () => {
+  const {
+    colorScale,
+    innerWidth,
+    innerHeight,
+    setInnerWidth,
+    internalMargin,
+    axisRightWidth,
+    setRightLabel,
+    props: { margin, y2Axis }
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    ref: setRightLabel,
+    transform: `translate(${innerWidth + internalMargin.left + axisRightWidth?.getBoundingClientRect().width},${innerHeight / 2 + internalMargin.top}) `,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+        width: "20",
+        height: 1,
+        fill: "transparent"
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+        transform: " rotate(90)",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxisLabel, {
+          className: "axis-label",
+          textAnchor: "middle",
+          dy: "-15",
+          children: y2Axis?.label
+        })
+      })
+    ]
+  });
+};
+//# sourceMappingURL=RightLabel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/parts/Labels/RightLabel.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+D;AAC/D,0BAA6B;AAC7B,oBAAgC;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,QAAI,yBAAW,gCAAY;AAE3B,SACE,6CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW,aAAa,aAAa,eAAe,OAAO,gBAAgB,sBAAsB,EAAE,SACjG,cAAc,IAAI,eAAe;AAAA,IAGnC;AAAA,kDAAC;AAAA,QAAK,OAAM;AAAA,QAAK,QAAQ;AAAA,QAAG,MAAK;AAAA,OAAc;AAAA,MAC/C,4CAAC;AAAA,QAAE,WAAU;AAAA,QACX,sDAAC;AAAA,UAAgB,WAAU;AAAA,UAAa,YAAW;AAAA,UAAS,IAAG;AAAA,UAC5D,kBAAQ;AAAA,SACX;AAAA,OACF;AAAA;AAAA,GACF;AAEJ;",
+  "names": []
+}

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

@@ -32,43 +32,53 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_d3 = require("d3");
 var import_ChartContext = require("../../ChartContext");
+var import_LegendItem = require("./LegendItem");
 const BottomLegend = () => {
-  const {
-    colorScale,
-    innerWidth,
-    innerHeight,
-    internalMargin,
-    setBottomLegend,
-    props: { height }
-  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const { colorScale, axisBottomHeight, innerWidth, innerHeight, bottomLabel, internalMargin, setBottomLegend } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const ref = (0, import_react.useRef)(null);
   const firstRender = (0, import_react.useRef)(true);
   const [xTransform, setXTransform] = (0, import_react.useState)(innerWidth / 2);
   (0, import_react.useEffect)(() => {
     if (ref.current && firstRender.current) {
       const cells = (0, import_d3.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 = (0, import_d3.select)(cells._groups[0][i - 1]);
           const d3sel = (0, import_d3.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 = (0, import_react.useMemo)(
+  }, [innerWidth]);
+  const margin = (0, import_react.useMemo)(() => {
+    let counter = 0;
+    if (bottomLabel) {
+      counter += bottomLabel?.getBoundingClientRect().height + 25;
+    }
+    if (axisBottomHeight) {
+      counter += axisBottomHeight?.getBoundingClientRect().height;
+    }
+    return counter;
+  }, [bottomLabel, axisBottomHeight]);
+  return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
       ref: setBottomLegend,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
         ref,
-        transform: `translate(${xTransform + internalMargin.left}, ${height - 30})`,
+        transform: `translate(${xTransform + internalMargin.left}, ${innerHeight + internalMargin.top + margin})`,
         className: "bottom-legend",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
@@ -76,25 +86,13 @@ const BottomLegend = () => {
             width: 1,
             fill: "transparent"
           }),
-          colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-            className: "cell",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
-                fill: colorScale(domainValue),
-                r: 4
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
-                x: 10,
-                dy: ".32em",
-                children: domainValue
-              })
-            ]
-          }))
+          colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendItem.LegendItem, {
+            domainValue
+          }, domainValue))
         ]
       })
     }),
-    [colorScale, height, setBottomLegend, xTransform]
+    [colorScale, innerHeight, internalMargin.left, internalMargin.top, margin, setBottomLegend, xTransform]
   );
-  return render;
 };
 //# sourceMappingURL=BottomLegend.js.map