@elliemae/ds-dataviz 3.8.1 → 3.9.0-next.1

package/dist/esm/graphs/Chart/parts/Axis/AxisBottom.js

@@ -1,27 +1,30 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useRef } from "react";
+import React2, { useContext, useEffect, useRef } from "react";
 import { select, axisBottom, timeFormat } from "d3";
-import { StyledAxis, StyledGrid, StyledAxisLabel } from "../../styles";
+import { StyledAxis, StyledGrid } from "../../styles";
 import { ChartContext } from "../../ChartContext";
-const AxisBottom = () => {
+const AxisBottom = React2.memo(() => {
   const {
-    props: { xAxis, xAxisLabelOffset = 50 },
+    props: { xAxis, width },
     innerHeight,
-    innerWidth,
     xScale,
-    setAxisBottomHeight,
-    tickOffset = 3
+    setAxisBottomRef
   } = useContext(ChartContext);
+  if (xAxis.hideAxis)
+    return null;
   const axisRef = useRef();
   const gridRef = useRef();
-  const ticks = xScale.ticks?.();
+  const ticks = xScale.ticks?.(xAxis.tickCount ?? width / 100);
   useEffect(() => {
     const grid = axisBottom(xScale).tickSize(xAxis?.showGrid ? -innerHeight : 0).tickFormat("").tickSizeOuter(0);
-    const axis = axisBottom(xScale);
+    const axis = axisBottom(xScale).tickSizeOuter(0);
     if (xAxis.tickValues && ticks) {
       const finalTicks = xAxis.overwriteTicks ? xAxis.tickValues : [...ticks, ...xAxis.tickValues];
       axis.tickValues(finalTicks);
+    } else {
+      axis.tickValues(ticks);
+      grid.tickValues(ticks);
     }
     if (xAxis.tickFormat) {
       if (typeof xAxis.tickFormat === "string") {
@@ -38,29 +41,18 @@ const AxisBottom = () => {
   return /* @__PURE__ */ jsxs("g", {
     transform: `translate(0,${innerHeight})`,
     children: [
-      /* @__PURE__ */ jsxs("g", {
-        ref: setAxisBottomHeight,
-        children: [
-          /* @__PURE__ */ jsx("g", {
-            transform: `translate(${innerWidth / 2},${axisRef.current?.getBoundingClientRect().height - 20})`,
-            children: /* @__PURE__ */ jsx(StyledAxisLabel, {
-              className: "axis-label",
-              textAnchor: "middle",
-              dy: 50,
-              children: xAxis?.label
-            })
-          }),
-          /* @__PURE__ */ jsx(StyledAxis, {
-            ref: axisRef
-          })
-        ]
+      /* @__PURE__ */ jsx("g", {
+        ref: setAxisBottomRef,
+        children: /* @__PURE__ */ jsx(StyledAxis, {
+          ref: axisRef
+        })
       }),
       /* @__PURE__ */ jsx(StyledGrid, {
         ref: gridRef
       })
     ]
   });
-};
+});
 export {
   AxisBottom
 };

package/dist/esm/graphs/Chart/parts/Axis/AxisBottom.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/AxisBottom.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisBottom, timeFormat } from 'd3';\nimport { StyledAxis, StyledGrid, StyledAxisLabel } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\n\nexport const AxisBottom = () => {\n  const {\n    props: { xAxis, xAxisLabelOffset = 50 },\n    innerHeight,\n    innerWidth,\n    xScale,\n    setAxisBottomHeight,\n    tickOffset = 3,\n  } = useContext(ChartContext);\n\n  const axisRef = useRef();\n  const gridRef = useRef();\n  const ticks = xScale.ticks?.();\n  useEffect(() => {\n    const grid = axisBottom(xScale)\n      .tickSize(xAxis?.showGrid ? -innerHeight : 0)\n      .tickFormat('')\n      .tickSizeOuter(0);\n\n    const axis = axisBottom(xScale);\n\n    if (xAxis.tickValues && ticks) {\n      const finalTicks = xAxis.overwriteTicks ? xAxis.tickValues : [...ticks, ...xAxis.tickValues];\n      axis.tickValues(finalTicks);\n    }\n\n    if (xAxis.tickFormat) {\n      if (typeof xAxis.tickFormat === 'string') {\n        const formatGenerator = timeFormat(xAxis.tickFormat);\n        axis.tickFormat((d) => formatGenerator(d));\n      }\n      if (typeof xAxis.tickFormat === 'function') {\n        axis.tickFormat(xAxis.tickFormat);\n      }\n    }\n\n    select(gridRef.current).call(grid);\n    select(axisRef.current).call(axis);\n  }, [innerHeight, ticks, xAxis.overwriteTicks, xAxis?.showGrid, xAxis.tickFormat, xAxis.tickValues, xScale]);\n\n  return (\n    <g transform={`translate(0,${innerHeight})`}>\n      <g ref={setAxisBottomHeight}>\n        <g transform={`translate(${innerWidth / 2},${axisRef.current?.getBoundingClientRect().height - 20 ?? 0})`}>\n          <StyledAxisLabel className=\"axis-label\" textAnchor=\"middle\" dy={50}>\n            {xAxis?.label}\n          </StyledAxisLabel>\n        </g>\n        <StyledAxis ref={axisRef}></StyledAxis>\n      </g>\n\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,YAAY,kBAAkB;AAC/C,SAAS,YAAY,YAAY,uBAAuB;AACxD,SAAS,oBAAoB;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,mBAAmB,GAAG;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,OAAO;AACvB,QAAM,UAAU,OAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ;AAC7B,YAAU,MAAM;AACd,UAAM,OAAO,WAAW,MAAM,EAC3B,SAAS,OAAO,WAAW,CAAC,cAAc,CAAC,EAC3C,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,OAAO,WAAW,MAAM;AAE9B,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,UAAI,OAAO,MAAM,eAAe,UAAU;AACxC,cAAM,kBAAkB,WAAW,MAAM,UAAU;AACnD,aAAK,WAAW,CAAC,MAAM,gBAAgB,CAAC,CAAC;AAAA,MAC3C;AACA,UAAI,OAAO,MAAM,eAAe,YAAY;AAC1C,aAAK,WAAW,MAAM,UAAU;AAAA,MAClC;AAAA,IACF;AAEA,WAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,WAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG,CAAC,aAAa,OAAO,MAAM,gBAAgB,OAAO,UAAU,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AAE1G,SACE,qBAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAC3B;AAAA,2BAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,8BAAC;AAAA,YAAE,WAAW,aAAa,aAAa,KAAK,QAAQ,SAAS,sBAAsB,EAAE,SAAS;AAAA,YAC7F,8BAAC;AAAA,cAAgB,WAAU;AAAA,cAAa,YAAW;AAAA,cAAS,IAAI;AAAA,cAC7D,iBAAO;AAAA,aACV;AAAA,WACF;AAAA,UACA,oBAAC;AAAA,YAAW,KAAK;AAAA,WAAS;AAAA;AAAA,OAC5B;AAAA,MAEA,oBAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useEffect, useRef } from 'react';\nimport { select, axisBottom, timeFormat } from 'd3';\nimport { StyledAxis, StyledGrid, StyledAxisLabel } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis, width },\n    innerHeight,\n    xScale,\n    setAxisBottomRef,\n  } = useContext(ChartContext);\n  if (xAxis.hideAxis) return null;\n  const axisRef = useRef();\n  const gridRef = useRef();\n  const ticks = xScale.ticks?.(xAxis.tickCount ?? width / 100);\n\n  useEffect(() => {\n    const grid = axisBottom(xScale)\n      .tickSize(xAxis?.showGrid ? -innerHeight : 0)\n      .tickFormat('')\n      .tickSizeOuter(0);\n\n    const axis = axisBottom(xScale).tickSizeOuter(0);\n\n    if (xAxis.tickValues && ticks) {\n      const finalTicks = xAxis.overwriteTicks ? xAxis.tickValues : [...ticks, ...xAxis.tickValues];\n      axis.tickValues(finalTicks);\n    } else {\n      axis.tickValues(ticks);\n      grid.tickValues(ticks);\n    }\n\n    if (xAxis.tickFormat) {\n      if (typeof xAxis.tickFormat === 'string') {\n        const formatGenerator = timeFormat(xAxis.tickFormat);\n        axis.tickFormat((d) => formatGenerator(d));\n      }\n      if (typeof xAxis.tickFormat === 'function') {\n        axis.tickFormat(xAxis.tickFormat);\n      }\n    }\n\n    select(gridRef.current).call(grid);\n    select(axisRef.current).call(axis);\n  }, [innerHeight, ticks, xAxis.overwriteTicks, xAxis?.showGrid, xAxis.tickFormat, xAxis.tickValues, xScale]);\n\n  return (\n    <g transform={`translate(0,${innerHeight})`}>\n      <g ref={setAxisBottomRef}>\n        <StyledAxis ref={axisRef}></StyledAxis>\n      </g>\n\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,UAAS,YAAqB,WAAW,cAAc;AAC9D,SAAS,QAAQ,YAAY,kBAAkB;AAC/C,SAAS,YAAY,kBAAmC;AACxD,SAAS,oBAAoB;AAEtB,MAAM,aAAaA,OAAM,KAAK,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,MAAM;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAC3B,MAAI,MAAM;AAAU,WAAO;AAC3B,QAAM,UAAU,OAAO;AACvB,QAAM,UAAU,OAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ,MAAM,aAAa,QAAQ,GAAG;AAE3D,YAAU,MAAM;AACd,UAAM,OAAO,WAAW,MAAM,EAC3B,SAAS,OAAO,WAAW,CAAC,cAAc,CAAC,EAC3C,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,OAAO,WAAW,MAAM,EAAE,cAAc,CAAC;AAE/C,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,UAAI,OAAO,MAAM,eAAe,UAAU;AACxC,cAAM,kBAAkB,WAAW,MAAM,UAAU;AACnD,aAAK,WAAW,CAAC,MAAM,gBAAgB,CAAC,CAAC;AAAA,MAC3C;AACA,UAAI,OAAO,MAAM,eAAe,YAAY;AAC1C,aAAK,WAAW,MAAM,UAAU;AAAA,MAClC;AAAA,IACF;AAEA,WAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,WAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG,CAAC,aAAa,OAAO,MAAM,gBAAgB,OAAO,UAAU,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AAE1G,SACE,qBAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAC3B;AAAA,0BAAC;AAAA,QAAE,KAAK;AAAA,QACN,8BAAC;AAAA,UAAW,KAAK;AAAA,SAAS;AAAA,OAC5B;AAAA,MAEA,oBAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ,CAAC;",
+  "names": ["React"]
 }

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

@@ -2,62 +2,57 @@ import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useEffect, useRef } from "react";
 import { select, axisLeft } from "d3";
-import { StyledAxis, StyledGrid, StyledAxisLabel } from "../../styles";
+import { StyledAxis, StyledGrid } from "../../styles";
 import { ChartContext } from "../../ChartContext";
+import { getFormatGenerator } from "../../helpers";
 const AxisLeft = () => {
   const {
-    props: { yAxis, yAxisLabelOffset = 45, yAxisLabel },
+    props: { yAxis, height },
     innerHeight,
     innerWidth,
     yScale,
-    internalMargin,
-    setAxisLeftWidth
+    setAxisLeftRef
   } = useContext(ChartContext);
+  if (yAxis.hideAxis)
+    return null;
   const ref = useRef();
   const gridRef = useRef();
-  const ticks = yScale.ticks?.();
+  const ticks = yScale.ticks?.(yAxis.tickCount ?? height / 80);
+  const hasNegativeDomain = yScale(innerHeight) < 0;
+  const { tickFormat, type } = yAxis;
   useEffect(() => {
-    const axis = axisLeft(yScale);
+    const axis = axisLeft(yScale).tickSizeOuter(0);
+    const grid = 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);
+    if (tickFormat) {
+      if (typeof tickFormat === "string") {
+        const formatGenerator = getFormatGenerator(type ?? "linear");
+        axis.tickFormat((d) => formatGenerator(tickFormat)(d));
+      }
+      if (typeof tickFormat === "function") {
+        axis.tickFormat(tickFormat);
+      }
     }
-    const grid = axisLeft(yScale).tickFormat("").tickSize(yAxis?.showGrid ? -innerWidth : 0).tickSizeOuter(0);
-    select(ref.current).call(axis);
-    select(gridRef.current).call(grid);
-  }, [
-    innerHeight,
-    innerWidth,
-    ticks,
-    yAxis.overwriteTicks,
-    yAxis?.showGrid,
-    yAxis.tickFormat,
-    yAxis.tickValues,
-    yScale
-  ]);
+    if (ref?.current && gridRef?.current) {
+      select(gridRef.current).call(grid);
+      select(ref.current).call(axis);
+    }
+  }, [hasNegativeDomain, innerHeight, innerWidth, tickFormat, ticks, type, yAxis, yScale]);
   return /* @__PURE__ */ jsxs("g", {
     children: [
-      /* @__PURE__ */ jsxs("g", {
-        ref: setAxisLeftWidth,
-        children: [
-          /* @__PURE__ */ jsx("g", {
-            transform: `translate(${-ref.current?.getBoundingClientRect().width},${innerHeight / 2 + 10}) rotate(-90)`,
-            children: /* @__PURE__ */ jsx(StyledAxisLabel, {
-              className: "axis-label",
-              textAnchor: "middle",
-              dy: -15,
-              children: yAxis?.label
-            })
-          }),
-          /* @__PURE__ */ jsx(StyledAxis, {
-            ref,
-            color: yAxis.color,
-            className: "axis-left"
-          })
-        ]
+      /* @__PURE__ */ jsx("g", {
+        ref: setAxisLeftRef,
+        children: /* @__PURE__ */ jsx(StyledAxis, {
+          ref,
+          color: yAxis.color,
+          className: "axis-left"
+        })
       }),
       /* @__PURE__ */ jsx(StyledGrid, {
         ref: gridRef

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/AxisLeft.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAyB,WAAW,cAAc;AAClE,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY,YAAY,uBAAuB;AACxD,SAAS,oBAAoB;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,IAAI,WAAW,YAAY;AAE3B,QAAM,MAAM,OAAO;AACnB,QAAM,UAAU,OAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ;AAE7B,YAAU,MAAM;AACd,UAAM,OAAO,SAAS,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,OAAO,SAAS,MAAM,EACzB,WAAW,EAAE,EACb,SAAS,OAAO,WAAW,CAAC,aAAa,CAAC,EAC1C,cAAc,CAAC;AAElB,WAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAE7B,WAAO,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,qBAAC;AAAA,IACC;AAAA,2BAAC;AAAA,QAAE,KAAK;AAAA,QACN;AAAA,8BAAC;AAAA,YACC,WAAW,aAAa,CAAC,IAAI,SAAS,sBAAsB,EAAE,SAC5D,cAAc,IAAI;AAAA,YAGpB,8BAAC;AAAA,cAAgB,WAAU;AAAA,cAAa,YAAW;AAAA,cAAS,IAAI;AAAA,cAC7D,iBAAO;AAAA,aACV;AAAA,WACF;AAAA,UACA,oBAAC;AAAA,YAAW;AAAA,YAAU,OAAO,MAAM;AAAA,YAAO,WAAU;AAAA,WAAY;AAAA;AAAA,OAClE;AAAA,MAEA,oBAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { getFormatGenerator } from '../../helpers';\nexport const AxisLeft = () => {\n  const {\n    props: { yAxis, height },\n    innerHeight,\n    innerWidth,\n    yScale,\n    setAxisLeftRef,\n  } = useContext(ChartContext);\n  if (yAxis.hideAxis) return null;\n\n  const ref = useRef<SVGSVGElement>();\n  const gridRef = useRef<SVGSVGElement>();\n  const ticks = yScale.ticks?.(yAxis.tickCount ?? height / 80);\n  const hasNegativeDomain = yScale(innerHeight) < 0;\n  const { tickFormat, type } = yAxis;\n  useEffect(() => {\n    const axis = axisLeft(yScale).tickSizeOuter(0);\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 (tickFormat) {\n      if (typeof tickFormat === 'string') {\n        const formatGenerator = getFormatGenerator(type ?? 'linear');\n\n        axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n      }\n      if (typeof tickFormat === 'function') {\n        axis.tickFormat(tickFormat);\n      }\n    }\n\n    if (ref?.current && gridRef?.current) {\n      select(gridRef.current).call(grid);\n      select(ref.current).call(axis);\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    }\n  }, [hasNegativeDomain, innerHeight, innerWidth, tickFormat, ticks, type, yAxis, yScale]);\n  return (\n    <g>\n      <g ref={setAxisLeftRef}>\n        <StyledAxis ref={ref} color={yAxis.color} className=\"axis-left\"></StyledAxis>\n      </g>\n\n      <StyledGrid ref={gridRef}></StyledGrid>\n      {/* {hasNegativeDomain ? (\n        <line stroke=\"black\" strokeWidth={2} x1={0} x2={innerWidth} y1={yScale(0)} y2={yScale(0)} />\n      ) : null} */}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAC5B,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAC3B,MAAI,MAAM;AAAU,WAAO;AAE3B,QAAM,MAAM,OAAsB;AAClC,QAAM,UAAU,OAAsB;AACtC,QAAM,QAAQ,OAAO,QAAQ,MAAM,aAAa,SAAS,EAAE;AAC3D,QAAM,oBAAoB,OAAO,WAAW,IAAI;AAChD,QAAM,EAAE,YAAY,KAAK,IAAI;AAC7B,YAAU,MAAM;AACd,UAAM,OAAO,SAAS,MAAM,EAAE,cAAc,CAAC;AAE7C,UAAM,OAAO,SAAS,MAAM,EACzB,WAAW,CAAC,MAAM,EAAE,EACpB,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,YAAY;AACd,UAAI,OAAO,eAAe,UAAU;AAClC,cAAM,kBAAkB,mBAAmB,QAAQ,QAAQ;AAE3D,aAAK,WAAW,CAAC,MAAM,gBAAgB,UAAU,EAAE,CAAC,CAAC;AAAA,MACvD;AACA,UAAI,OAAO,eAAe,YAAY;AACpC,aAAK,WAAW,UAAU;AAAA,MAC5B;AAAA,IACF;AAEA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,aAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,aAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAAA,IAS/B;AAAA,EACF,GAAG,CAAC,mBAAmB,aAAa,YAAY,YAAY,OAAO,MAAM,OAAO,MAAM,CAAC;AACvF,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAAE,KAAK;AAAA,QACN,8BAAC;AAAA,UAAW;AAAA,UAAU,OAAO,MAAM;AAAA,UAAO,WAAU;AAAA,SAAY;AAAA,OAClE;AAAA,MAEA,oBAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAI5B;AAEJ;",
   "names": []
 }

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

@@ -6,32 +6,27 @@ import { StyledAxis } from "../../styles";
 import { ChartContext } from "../../ChartContext";
 const AxisRight = () => {
   const {
-    props: { y2Axis, yAxisLabelOffset = 45, y2AxisLabel },
-    innerHeight,
+    props: { y2Axis, height },
     innerWidth,
     y2Scale,
-    setAxisRightWidth
+    setAxisRightRef
   } = useContext(ChartContext);
   if (!y2Axis)
     return null;
+  const ticks = y2Scale.ticks?.(y2Axis.tickCount ?? height / 80);
   const ref = useRef();
   useEffect(() => {
     const axis = axisRight(y2Scale).tickSizeOuter(0);
     select(ref.current).call(axis);
   }, [innerWidth, y2Scale]);
   return /* @__PURE__ */ jsx("g", {
-    ref: setAxisRightWidth,
+    ref: setAxisRightRef,
     transform: `translate(${innerWidth},0)`,
     children: /* @__PURE__ */ jsx(StyledAxis, {
       ref,
-      color: y2Axis.color,
-      children: /* @__PURE__ */ jsx("text", {
-        className: "axis-label",
-        textAnchor: "middle",
-        transform: `translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`
-      })
+      color: y2Axis.color
     })
-  });
+  }, ticks.toString());
 };
 export {
   AxisRight

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/AxisRight.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,iBAAiB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,mBAAmB,IAAI,YAAY;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,MAAI,CAAC;AAAQ,WAAO;AACpB,QAAM,MAAM,OAAO;AACnB,YAAU,MAAM;AACd,UAAM,OAAO,UAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,WAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAAA,EAC/B,GAAG,CAAC,YAAY,OAAO,CAAC;AACxB,SACE,oBAAC;AAAA,IAAE,KAAK;AAAA,IAAmB,WAAW,aAAa;AAAA,IACjD,8BAAC;AAAA,MAAW;AAAA,MAAU,OAAO,OAAO;AAAA,MAClC,8BAAC;AAAA,QACC,WAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAW,aAAa,CAAC,oBAAoB,cAAc;AAAA,OAG7D;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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    setAxisRightRef,\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={setAxisRightRef} transform={`translate(${innerWidth},0)`}>\n      <StyledAxis ref={ref} color={y2Axis.color} />\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAoB,cAAc;AAC9D,SAAS,QAAQ,iBAAiB;AAClC,SAAS,kBAAmC;AAC5C,SAAS,oBAAoB;AACtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,OAAO;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAC3B,MAAI,CAAC;AAAQ,WAAO;AAEpB,QAAM,QAAQ,QAAQ,QAAQ,OAAO,aAAa,SAAS,EAAE;AAE7D,QAAM,MAAM,OAAO;AACnB,YAAU,MAAM;AACd,UAAM,OAAO,UAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,WAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAAA,EAC/B,GAAG,CAAC,YAAY,OAAO,CAAC;AAExB,SACE,oBAAC;AAAA,IAAyB,KAAK;AAAA,IAAiB,WAAW,aAAa;AAAA,IACtE,8BAAC;AAAA,MAAW;AAAA,MAAU,OAAO,OAAO;AAAA,KAAO;AAAA,KADrC,MAAM,SAAS,CAEvB;AAEJ;",
   "names": []
 }

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

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useCallback } from "react";
+import { useContext, useMemo, useCallback, useEffect } from "react";
 import { StyledSVGWrapper } from "../styles";
 import { ChartContext } from "../ChartContext";
 import { useKeyboardNavigation } from "../config/useKeyboardNavigation";
 import { Legend } from "./Legend/Legend";
+import { Label } from "./Labels/Label";
 const ChartContainer = ({ children }) => {
   const {
     props: { width, height },
@@ -18,12 +19,15 @@ const ChartContainer = ({ children }) => {
     setIsGrabbed,
     startPosition,
     innerWidth,
+    innerHeight,
     setActivePoint,
     setXScrollbarPosition,
     xScrollbarPosition,
     containerRatio,
     oldLastPosition,
-    setIsScrollbarVisible
+    setIsScrollbarVisible,
+    chartId,
+    yScale
   } = useContext(ChartContext);
   const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();
   const onMouseEnterHandler = useCallback(() => {
@@ -39,7 +43,7 @@ const ChartContainer = ({ children }) => {
     (e) => {
       if (!isGrabbed)
         return;
-      setActivePoint("");
+      setActivePoint(null);
       const newPosition = oldLastPosition?.current + e.clientX - startPosition;
       if (newPosition < 0)
         setXScrollbarPosition(0);
@@ -54,7 +58,16 @@ const ChartContainer = ({ children }) => {
     oldLastPosition.current = xScrollbarPosition;
     setIsGrabbed(false);
   }, [oldLastPosition, setIsGrabbed, xScrollbarPosition]);
-  const key = `translate(${internalMargin.left},${internalMargin.top})`;
+  const key = useMemo(
+    () => `translate(${internalMargin.left},${internalMargin.top},${internalMargin.right})`,
+    [internalMargin]
+  );
+  useEffect(() => {
+    containerRef?.current?.addEventListener("mousemove", handleMouseMove);
+    return () => {
+      containerRef?.current?.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [containerRef, handleMouseMove]);
   return /* @__PURE__ */ jsx(StyledSVGWrapper, {
     ref: containerRef,
     onKeyDown: onInputKeyDown,
@@ -64,27 +77,63 @@ const ChartContainer = ({ children }) => {
     onFocus: handleOnFocus,
     onMouseEnter: onMouseEnterHandler,
     onMouseLeave: onMouseLeaveHandler,
-    onMouseMove: handleMouseMove,
     onMouseUp: handleMouseUp,
     onMouseDown: (e) => e.preventDefault(),
     isGrabbed,
     style: { width },
-    children: /* @__PURE__ */ jsxs("svg", {
+    children: /* @__PURE__ */ jsx("svg", {
       ref: svgRef,
       width,
       height,
-      children: [
-        /* @__PURE__ */ jsx("g", {
-          children: /* @__PURE__ */ jsx(Legend, {})
-        }),
-        /* @__PURE__ */ jsx("g", {
-          className: "container",
-          transform: `translate(${internalMargin.left},${internalMargin.top})`,
-          children
-        })
-      ]
+      children: /* @__PURE__ */ jsxs("g", {
+        children: [
+          /* @__PURE__ */ jsxs("g", {
+            children: [
+              /* @__PURE__ */ jsx(Legend, {}),
+              /* @__PURE__ */ jsx(Label, {})
+            ]
+          }),
+          /* @__PURE__ */ jsx("g", {
+            className: "container",
+            transform: `translate(${internalMargin.left},${internalMargin.top})`,
+            children
+          }),
+          /* @__PURE__ */ jsx("defs", {
+            children: /* @__PURE__ */ jsx("clipPath", {
+              id: `rect-focus-ring-${chartId}`,
+              children: /* @__PURE__ */ jsx("rect", {
+                width: innerWidth * containerRatio,
+                height: innerHeight + 4,
+                y: -4
+              })
+            })
+          }),
+          /* @__PURE__ */ jsx("defs", {
+            children: /* @__PURE__ */ jsx("clipPath", {
+              id: `rects-positive-${chartId}`,
+              children: /* @__PURE__ */ jsx("rect", {
+                width: innerWidth * containerRatio,
+                height: yScale(0) + 8,
+                y: -8,
+                x: -10
+              })
+            })
+          }),
+          innerHeight - yScale(0) > 0 ? /* @__PURE__ */ jsx("defs", {
+            children: /* @__PURE__ */ jsx("clipPath", {
+              id: `rects-negative-${chartId}`,
+              children: /* @__PURE__ */ jsx("rect", {
+                width: innerWidth * containerRatio,
+                height: innerHeight - yScale(0),
+                x: -10,
+                y: yScale(0)
+              })
+            })
+          }) : null
+        ]
+      }, key)
     })
-  }, key);
+  });
 };
 export {
   ChartContainer

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/ChartContainer.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,mBAA2B;AACvD,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,cAAc;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,IAAI,WAAW,YAAY;AAE3B,QAAM,EAAE,gBAAgB,cAAc,cAAc,IAAI,sBAAsB;AAE9E,QAAM,sBAAsB,YAAY,MAAM;AAC5C,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAC1B,QAAM,sBAAsB,YAAY,MAAM;AAC5C,oBAAgB,EAAE;AAClB,oBAAgB,EAAE;AAClB,0BAAsB,KAAK;AAC3B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,uBAAuB,iBAAiB,eAAe,CAAC;AAE1E,QAAM,kBAAkB;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,gBAAgB,YAAY,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,oBAAC;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,+BAAC;AAAA,MAAI,KAAK;AAAA,MAAQ;AAAA,MAAc;AAAA,MAC9B;AAAA,4BAAC;AAAA,UACC,8BAAC,UAAO;AAAA,SACV;AAAA,QACA,oBAAC;AAAA,UAAE,WAAU;AAAA,UAAY,WAAW,aAAa,eAAe,QAAQ,eAAe;AAAA,UACpF;AAAA,SACH;AAAA;AAAA,KACF;AAAA,KAtBK,GAuBP;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    oldLastPosition,\n    setIsScrollbarVisible,\n    chartId,\n    yScale,\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(null);\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 }}\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          {/* @todo we need to put this somewhere. this will clip the focus ring bottom line */}\n          <defs>\n            <clipPath id={`rect-focus-ring-${chartId}`}>\n              <rect width={innerWidth * containerRatio} height={innerHeight + 4} y={-4} />\n            </clipPath>\n          </defs>\n          <defs>\n            <clipPath id={`rects-positive-${chartId}`}>\n              <rect width={innerWidth * containerRatio} height={yScale(0) + 8} y={-8} x={-10} />\n            </clipPath>\n          </defs>\n          {innerHeight - yScale(0) > 0 ? (\n            <defs>\n              <clipPath id={`rects-negative-${chartId}`}>\n                <rect width={innerWidth * containerRatio} height={innerHeight - yScale(0)} x={-10} y={yScale(0)} />\n              </clipPath>\n            </defs>\n          ) : null}\n        </g>\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,aAAa,iBAAiB;AACnE,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,cAAc;AACvB,SAAS,aAAa;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,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,EAAE,gBAAgB,cAAc,cAAc,IAAI,sBAAsB;AAE9E,QAAM,sBAAsB,YAAY,MAAM;AAC5C,0BAAsB,IAAI;AAAA,EAC5B,GAAG,CAAC,qBAAqB,CAAC;AAC1B,QAAM,sBAAsB,YAAY,MAAM;AAC5C,oBAAgB,EAAE;AAClB,oBAAgB,EAAE;AAClB,0BAAsB,KAAK;AAC3B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,cAAc,uBAAuB,iBAAiB,eAAe,CAAC;AAE1E,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAwB;AACvB,UAAI,CAAC;AAAW;AAChB,qBAAe,IAAI;AACnB,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,gBAAgB,YAAY,MAAM;AACtC,oBAAgB,UAAU;AAC1B,iBAAa,KAAK;AAAA,EACpB,GAAG,CAAC,iBAAiB,cAAc,kBAAkB,CAAC;AACtD,QAAM,MAAM;AAAA,IACV,MAAM,aAAa,eAAe,QAAQ,eAAe,OAAO,eAAe;AAAA,IAC/E,CAAC,cAAc;AAAA,EACjB;AAEA,YAAU,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,oBAAC;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,MAAM;AAAA,IAEf,8BAAC;AAAA,MAAI,KAAK;AAAA,MAAQ;AAAA,MAAc;AAAA,MAC9B,+BAAC;AAAA,QACC;AAAA,+BAAC;AAAA,YACC;AAAA,kCAAC,UAAO;AAAA,cACR,oBAAC,SAAM;AAAA;AAAA,WACT;AAAA,UACA,oBAAC;AAAA,YAAE,WAAU;AAAA,YAAY,WAAW,aAAa,eAAe,QAAQ,eAAe;AAAA,YACpF;AAAA,WACH;AAAA,UAEA,oBAAC;AAAA,YACC,8BAAC;AAAA,cAAS,IAAI,mBAAmB;AAAA,cAC/B,8BAAC;AAAA,gBAAK,OAAO,aAAa;AAAA,gBAAgB,QAAQ,cAAc;AAAA,gBAAG,GAAG;AAAA,eAAI;AAAA,aAC5E;AAAA,WACF;AAAA,UACA,oBAAC;AAAA,YACC,8BAAC;AAAA,cAAS,IAAI,kBAAkB;AAAA,cAC9B,8BAAC;AAAA,gBAAK,OAAO,aAAa;AAAA,gBAAgB,QAAQ,OAAO,CAAC,IAAI;AAAA,gBAAG,GAAG;AAAA,gBAAI,GAAG;AAAA,eAAK;AAAA,aAClF;AAAA,WACF;AAAA,UACC,cAAc,OAAO,CAAC,IAAI,IACzB,oBAAC;AAAA,YACC,8BAAC;AAAA,cAAS,IAAI,kBAAkB;AAAA,cAC9B,8BAAC;AAAA,gBAAK,OAAO,aAAa;AAAA,gBAAgB,QAAQ,cAAc,OAAO,CAAC;AAAA,gBAAG,GAAG;AAAA,gBAAK,GAAG,OAAO,CAAC;AAAA,eAAG;AAAA,aACnG;AAAA,WACF,IACE;AAAA;AAAA,SAzBE,GA0BR;AAAA,KACF;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -1,88 +1,37 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useContext } from "react";
+import { useState, useContext, useMemo } from "react";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
-import { ThemeContext, styled } from "@elliemae/ds-system";
-import { ChartContext } from "../ChartContext";
-import { StyleFocusableRegion } from "../styles";
-const StyledTooltipContainer = styled.div`
-  text-align: center;
-  min-width: ${({ theme }) => theme.space.l};
-  max-width: 250px;
-  min-height: 30px;
-  display: grid;
-  align-items: center;
-  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};
-  position: relative;
-  background-color: white;
-  border-radius: 2px;
-  font-size: 13px;
-  color: ${({ theme }) => theme.colors.neutral[600]};
-`;
-const StyledMouseOverDetectionBox = styled.div`
-  position: absolute;
-  top: -15px;
-  right: -15px;
-  width: calc(100% + 30px);
-  height: calc(100% + 30px);
-  z-index: -1;
-`;
+import { ThemeContext } from "@elliemae/ds-system";
+import { StyledTooltipContainer, StyledMouseOverDetectionBox } from "../styles";
 const FocusableRegion = (props) => {
-  const { activePoint } = useContext(ChartContext);
   const [referenceElement, setReferenceElement] = useState();
   const theme = useContext(ThemeContext);
-  const [showPopover, setShowPopover] = useState(false);
-  const { id, pointRadius, content, ...rest } = props;
-  const isFocused = activePoint === id;
-  const focusableElement = useRef(null);
-  const handleRef = useCallback(
-    (newRef) => {
-      if (focusableElement.current)
-        focusableElement.current = newRef;
-      if (isFocused)
-        newRef?.focus();
-    },
-    [isFocused]
-  );
-  const onMouseEnter = () => {
-    setShowPopover(true);
-  };
-  const onMouseLeave = () => {
-    setShowPopover(false);
-  };
-  const onFocus = () => {
-    setShowPopover(true);
-  };
-  const onBlur = () => {
-    setShowPopover(false);
-  };
-  return /* @__PURE__ */ jsx("foreignObject", {
-    ...rest,
-    onFocus,
-    onBlur,
-    ref: setReferenceElement,
-    children: /* @__PURE__ */ jsxs("div", {
-      children: [
-        /* @__PURE__ */ jsx(StyleFocusableRegion, {
-          s: pointRadius,
-          tabIndex: -1,
-          ref: handleRef
-        }),
-        showPopover && /* @__PURE__ */ jsxs(DSPopperJS, {
+  const { content, ...rest } = props;
+  return useMemo(
+    () => /* @__PURE__ */ jsx("foreignObject", {
+      ...rest,
+      ref: setReferenceElement,
+      children: /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsxs(DSPopperJS, {
           withoutAnimation: true,
           referenceElement,
-          showPopover,
+          showPopover: true,
           zIndex: theme.zIndex.tooltip,
           children: [
             /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {}),
             /* @__PURE__ */ jsx(StyledTooltipContainer, {
+              "aria-live": "polite",
+              "aria-atomic": "false",
+              "aria-relevant": "additions text",
               children: content
             })
           ]
         })
-      ]
-    })
-  });
+      })
+    }),
+    [content, referenceElement, rest, theme.zIndex.tooltip]
+  );
 };
 export {
   FocusableRegion

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/FocusableRegion.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useRef, useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext, styled } from '@elliemae/ds-system';\nimport { ChartContext } from '../ChartContext';\n\nimport { StyleFocusableRegion } from '../styles';\n\nconst StyledTooltipContainer = styled.div`\n  text-align: center;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.neutral[600]};\n`;\n\nconst StyledMouseOverDetectionBox = styled.div`\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  width: calc(100% + 30px);\n  height: calc(100% + 30px);\n  z-index: -1;\n`;\n\nexport const FocusableRegion: React.ComponentType<any> = (props) => {\n  const { activePoint } = useContext(ChartContext);\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n  const theme = useContext(ThemeContext);\n\n  const [showPopover, setShowPopover] = useState(false);\n  const { id, pointRadius, content, ...rest } = props;\n  const isFocused = activePoint === id;\n\n  const focusableElement = useRef(null);\n  const handleRef = useCallback(\n    (newRef: HTMLDivElement) => {\n      if (focusableElement.current) focusableElement.current = newRef;\n      if (isFocused) newRef?.focus();\n    },\n    [isFocused],\n  );\n\n  const onMouseEnter = () => {\n    setShowPopover(true);\n  };\n\n  const onMouseLeave = () => {\n    setShowPopover(false);\n  };\n\n  const onFocus = () => {\n    setShowPopover(true);\n  };\n\n  const onBlur = () => {\n    setShowPopover(false);\n  };\n\n  return (\n    <foreignObject\n      {...rest}\n      // onMouseEnter={onMouseEnter}\n      // onMouseLeave={onMouseLeave}\n      // onPointerEnter={onMouseEnter}\n      // onPointerLeave={onMouseLeave}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      ref={setReferenceElement}\n    >\n      <div>\n        <StyleFocusableRegion\n          s={pointRadius}\n          // aria-label={`${xValue} ${d[yValue]}`}\n          tabIndex={-1}\n          ref={handleRef}\n        ></StyleFocusableRegion>\n        {showPopover && (\n          <DSPopperJS\n            withoutAnimation\n            referenceElement={referenceElement}\n            showPopover={showPopover}\n            zIndex={theme.zIndex.tooltip}\n          >\n            <StyledMouseOverDetectionBox />\n            <StyledTooltipContainer>{content}</StyledTooltipContainer>\n          </DSPopperJS>\n        )}\n      </div>\n    </foreignObject>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,UAAU,QAAQ,aAAa,kBAAkB;AACjE,SAAS,kBAAkB;AAC3B,SAAS,cAAc,cAAc;AACrC,SAAS,oBAAoB;AAE7B,SAAS,4BAA4B;AAErC,MAAM,yBAAyB,OAAO;AAAA;AAAA,eAEvB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,aAK7B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,QAAQ,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,WAKpD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAG/C,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpC,MAAM,kBAA4C,CAAC,UAAU;AAClE,QAAM,EAAE,YAAY,IAAI,WAAW,YAAY;AAE/C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiC;AACjF,QAAM,QAAQ,WAAW,YAAY;AAErC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,EAAE,IAAI,aAAa,YAAY,KAAK,IAAI;AAC9C,QAAM,YAAY,gBAAgB;AAElC,QAAM,mBAAmB,OAAO,IAAI;AACpC,QAAM,YAAY;AAAA,IAChB,CAAC,WAA2B;AAC1B,UAAI,iBAAiB;AAAS,yBAAiB,UAAU;AACzD,UAAI;AAAW,gBAAQ,MAAM;AAAA,IAC/B;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,eAAe,MAAM;AACzB,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,eAAe,MAAM;AACzB,mBAAe,KAAK;AAAA,EACtB;AAEA,QAAM,UAAU,MAAM;AACpB,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,SAAS,MAAM;AACnB,mBAAe,KAAK;AAAA,EACtB;AAEA,SACE,oBAAC;AAAA,IACE,GAAG;AAAA,IAKJ;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IAEL,+BAAC;AAAA,MACC;AAAA,4BAAC;AAAA,UACC,GAAG;AAAA,UAEH,UAAU;AAAA,UACV,KAAK;AAAA,SACN;AAAA,QACA,eACC,qBAAC;AAAA,UACC,kBAAgB;AAAA,UAChB;AAAA,UACA;AAAA,UACA,QAAQ,MAAM,OAAO;AAAA,UAErB;AAAA,gCAAC,+BAA4B;AAAA,YAC7B,oBAAC;AAAA,cAAwB;AAAA,aAAQ;AAAA;AAAA,SACnC;AAAA;AAAA,KAEJ;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useContext, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext } from '@elliemae/ds-system';\n\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles';\n\nexport const FocusableRegion: React.ComponentType<any> = (props) => {\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n  const theme = useContext(ThemeContext);\n\n  const { content, ...rest } = props;\n\n  return useMemo(\n    () => (\n      <foreignObject {...rest} ref={setReferenceElement}>\n        <div>\n          <DSPopperJS withoutAnimation referenceElement={referenceElement} showPopover zIndex={theme.zIndex.tooltip}>\n            <StyledMouseOverDetectionBox />\n            <StyledTooltipContainer aria-live=\"polite\" aria-atomic=\"false\" aria-relevant=\"additions text\">\n              {content}\n            </StyledTooltipContainer>\n          </DSPopperJS>\n        </div>\n      </foreignObject>\n    ),\n    [content, referenceElement, rest, theme.zIndex.tooltip],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,UAAU,YAAY,eAAe;AACrD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAE7B,SAAS,wBAAwB,mCAAmC;AAE7D,MAAM,kBAA4C,CAAC,UAAU;AAClE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiC;AACjF,QAAM,QAAQ,WAAW,YAAY;AAErC,QAAM,EAAE,YAAY,KAAK,IAAI;AAE7B,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAe,GAAG;AAAA,MAAM,KAAK;AAAA,MAC5B,8BAAC;AAAA,QACC,+BAAC;AAAA,UAAW,kBAAgB;AAAA,UAAC;AAAA,UAAoC,aAAW;AAAA,UAAC,QAAQ,MAAM,OAAO;AAAA,UAChG;AAAA,gCAAC,+BAA4B;AAAA,YAC7B,oBAAC;AAAA,cAAuB,aAAU;AAAA,cAAS,eAAY;AAAA,cAAQ,iBAAc;AAAA,cAC1E;AAAA,aACH;AAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IAEF,CAAC,SAAS,kBAAkB,MAAM,MAAM,OAAO,OAAO;AAAA,EACxD;AACF;",
   "names": []
 }

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

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

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

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