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

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

@@ -4,46 +4,95 @@ import React2, { useContext, useEffect, useRef } from "react";
 import { select, axisBottom, timeFormat } from "d3";
 import { StyledAxis, StyledGrid } from "../../styles";
 import { ChartContext } from "../../ChartContext";
+import { useUniqueData } from "../../helpers/useUniqueData";
 const AxisBottom = React2.memo(() => {
   const {
-    props: { xAxis, width },
+    props: { xAxis },
     innerHeight,
     xScale,
+    innerWidth,
+    containerRatio,
+    internalMargin,
     setAxisBottomRef
   } = useContext(ChartContext);
-  if (xAxis.hideAxis)
-    return null;
-  const axisRef = useRef();
-  const gridRef = useRef();
-  const ticks = xScale.ticks?.(xAxis.tickCount ?? width / 100);
+  const axisRef = useRef(null);
+  const gridRef = useRef(null);
+  const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } = xAxis.tick || {};
+  const ticksScales = ["linear", "time", "log"];
+  const uniqueData = useUniqueData();
   useEffect(() => {
-    const grid = axisBottom(xScale).tickSize(xAxis?.showGrid ? -innerHeight : 0).tickFormat("").tickSizeOuter(0);
+    const grid = axisBottom(xScale).tickSize(-innerHeight).tickFormat("").tickSizeOuter(0);
     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") {
-        const formatGenerator = timeFormat(xAxis.tickFormat);
-        axis.tickFormat((d) => formatGenerator(d));
+    if (ticksScales.includes(xAxis.type)) {
+      const ticksNum = (() => {
+        if (tickCount)
+          return tickCount;
+        if (containerRatio > 1) {
+          return innerWidth / 100 * containerRatio;
+        }
+        return innerWidth / 100;
+      })();
+      const ticks = xScale.ticks?.(ticksNum);
+      if (containerRatio > 1 && uniqueData.length < 10) {
+        const ticksName = uniqueData.map((u) => u.xValue);
+        axis.tickValues(ticksName);
+        grid.tickValues(ticksName);
+      } else if (tickValues && ticks) {
+        const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];
+        axis.tickValues(finalTicks);
+      } else {
+        axis.tickValues(ticks);
+        grid.tickValues(ticks);
       }
-      if (typeof xAxis.tickFormat === "function") {
-        axis.tickFormat(xAxis.tickFormat);
+      if (tickFormat) {
+        if (typeof tickFormat === "string") {
+          const formatGenerator = timeFormat(tickFormat);
+          axis.tickFormat((d) => formatGenerator(d));
+        }
+        if (typeof tickFormat === "function") {
+          axis.tickFormat(tickFormat);
+        }
+      }
+    }
+    if (axisRef?.current && gridRef?.current) {
+      if (xAxis?.showGrid)
+        select(gridRef.current).call(grid);
+      const axisNode = select(axisRef.current);
+      axisNode.call(axis);
+      const firstTick = axisNode.select(".tick").node();
+      if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10) {
+        firstTick.remove();
       }
+      if (tickRotation)
+        axisNode.selectAll("text").style("text-anchor", tickRotation > 0 ? "start" : "end").attr("dx", 8 * Math.sin(Math.PI * (tickRotation / 180))).attr("dy", ".71em").attr("y", 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1)).attr("transform", `rotate(${tickRotation})`);
     }
-    select(gridRef.current).call(grid);
-    select(axisRef.current).call(axis);
-  }, [innerHeight, ticks, xAxis.overwriteTicks, xAxis?.showGrid, xAxis.tickFormat, xAxis.tickValues, xScale]);
+  }, [
+    innerHeight,
+    overwriteTicks,
+    xAxis?.showGrid,
+    tickFormat,
+    tickValues,
+    xScale,
+    tickRotation,
+    xAxis.type,
+    ticksScales,
+    tickCount,
+    containerRatio,
+    innerWidth,
+    uniqueData.length,
+    uniqueData,
+    internalMargin.left
+  ]);
+  if (xAxis.hideAxis)
+    return null;
   return /* @__PURE__ */ jsxs("g", {
     transform: `translate(0,${innerHeight})`,
     children: [
       /* @__PURE__ */ jsx("g", {
         ref: setAxisBottomRef,
         children: /* @__PURE__ */ jsx(StyledAxis, {
+          axisColor: xAxis.color,
+          tickColor: color,
           ref: axisRef
         })
       }),

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, 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;",
+  "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, axisBottom, timeFormat, ScaleLinear, ScaleTime } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis },\n    innerHeight,\n    xScale,\n    innerWidth,\n    containerRatio,\n    internalMargin,\n    setAxisBottomRef,\n  } = useContext(ChartContext);\n\n  const axisRef = useRef<SVGSVGElement>(null);\n  const gridRef = useRef<SVGSVGElement>(null);\n  const { tickValues, tickFormat, overwriteTicks, color, tickRotation, tickCount } =\n    xAxis.tick || ({} as DSChartT.AxisTickT);\n\n  const ticksScales = ['linear', 'time', 'log'];\n  // const ticks = xScale.ticks?.(tickCount ?? width / 100);\n\n  const uniqueData = useUniqueData();\n  useEffect(() => {\n    const grid = axisBottom(xScale as ScaleLinear<number, number>)\n      .tickSize(-innerHeight)\n      .tickFormat('')\n      .tickSizeOuter(0);\n\n    const axis = axisBottom(xScale as ScaleLinear<number, number>).tickSizeOuter(0);\n\n    if (ticksScales.includes(xAxis.type)) {\n      const ticksNum = (() => {\n        if (tickCount) return tickCount;\n        if (containerRatio > 1) {\n          return (innerWidth / 100) * containerRatio;\n        }\n        return innerWidth / 100;\n      })();\n      const ticks = (xScale as ScaleLinear<number, number> | ScaleTime<number, number, never>).ticks?.(ticksNum);\n\n      // we show the only the ticks values on the screen when zoomed enough\n      if (containerRatio > 1 && uniqueData.length < 10) {\n        const ticksName = uniqueData.map((u) => u.xValue);\n        axis.tickValues(ticksName);\n        grid.tickValues(ticksName);\n      } else if (tickValues && ticks) {\n        const finalTicks = overwriteTicks ? tickValues : [...ticks, ...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 = timeFormat(tickFormat);\n          axis.tickFormat((d) => formatGenerator(d));\n        }\n        if (typeof tickFormat === 'function') {\n          axis.tickFormat(tickFormat);\n        }\n      }\n    }\n\n    if (axisRef?.current && gridRef?.current) {\n      if (xAxis?.showGrid) select(gridRef.current).call(grid);\n      const axisNode = select(axisRef.current);\n      axisNode.call(axis);\n\n      // need to remove the first tick when live under the domain line\n      const firstTick = axisNode.select('.tick').node() as SVGGElement; // select all the text elements\n      if (firstTick?.getBoundingClientRect().left < internalMargin.left + 10) {\n        firstTick.remove();\n      }\n      if (tickRotation)\n        axisNode\n          .selectAll('text')\n          .style('text-anchor', tickRotation > 0 ? 'start' : 'end')\n          .attr('dx', 8 * Math.sin(Math.PI * (tickRotation / 180)))\n          .attr('dy', '.71em')\n          .attr('y', 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))\n          .attr('transform', `rotate(${tickRotation})`);\n    }\n  }, [\n    innerHeight,\n    overwriteTicks,\n    xAxis?.showGrid,\n    tickFormat,\n    tickValues,\n    xScale,\n    tickRotation,\n    xAxis.type,\n    ticksScales,\n    tickCount,\n    containerRatio,\n    innerWidth,\n    uniqueData.length,\n    uniqueData,\n    internalMargin.left,\n  ]);\n  if (xAxis.hideAxis) return null;\n  return (\n    <g transform={`translate(0,${innerHeight})`}>\n      <g ref={setAxisBottomRef}>\n        <StyledAxis axisColor={xAxis.color} tickColor={color} ref={axisRef}></StyledAxis>\n      </g>\n\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,OAAOA,UAAS,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,YAAY,kBAA0C;AACvE,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAEvB,MAAM,aAAaA,OAAM,KAAK,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,YAAY,gBAAgB,OAAO,cAAc,UAAU,IAC7E,MAAM,QAAS,CAAC;AAElB,QAAM,cAAc,CAAC,UAAU,QAAQ,KAAK;AAG5C,QAAM,aAAa,cAAc;AACjC,YAAU,MAAM;AACd,UAAM,OAAO,WAAW,MAAqC,EAC1D,SAAS,CAAC,WAAW,EACrB,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,OAAO,WAAW,MAAqC,EAAE,cAAc,CAAC;AAE9E,QAAI,YAAY,SAAS,MAAM,IAAI,GAAG;AACpC,YAAM,YAAY,MAAM;AACtB,YAAI;AAAW,iBAAO;AACtB,YAAI,iBAAiB,GAAG;AACtB,iBAAQ,aAAa,MAAO;AAAA,QAC9B;AACA,eAAO,aAAa;AAAA,MACtB,GAAG;AACH,YAAM,QAAS,OAA0E,QAAQ,QAAQ;AAGzG,UAAI,iBAAiB,KAAK,WAAW,SAAS,IAAI;AAChD,cAAM,YAAY,WAAW,IAAI,CAAC,MAAM,EAAE,MAAM;AAChD,aAAK,WAAW,SAAS;AACzB,aAAK,WAAW,SAAS;AAAA,MAC3B,WAAW,cAAc,OAAO;AAC9B,cAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,aAAK,WAAW,UAAU;AAAA,MAC5B,OAAO;AACL,aAAK,WAAW,KAAK;AACrB,aAAK,WAAW,KAAK;AAAA,MACvB;AAEA,UAAI,YAAY;AACd,YAAI,OAAO,eAAe,UAAU;AAClC,gBAAM,kBAAkB,WAAW,UAAU;AAC7C,eAAK,WAAW,CAAC,MAAM,gBAAgB,CAAC,CAAC;AAAA,QAC3C;AACA,YAAI,OAAO,eAAe,YAAY;AACpC,eAAK,WAAW,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAEA,QAAI,SAAS,WAAW,SAAS,SAAS;AACxC,UAAI,OAAO;AAAU,eAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACtD,YAAM,WAAW,OAAO,QAAQ,OAAO;AACvC,eAAS,KAAK,IAAI;AAGlB,YAAM,YAAY,SAAS,OAAO,OAAO,EAAE,KAAK;AAChD,UAAI,WAAW,sBAAsB,EAAE,OAAO,eAAe,OAAO,IAAI;AACtE,kBAAU,OAAO;AAAA,MACnB;AACA,UAAI;AACF,iBACG,UAAU,MAAM,EAChB,MAAM,eAAe,eAAe,IAAI,UAAU,KAAK,EACvD,KAAK,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,eAAe,IAAI,CAAC,EACvD,KAAK,MAAM,OAAO,EAClB,KAAK,KAAK,OAAO,OAAO,eAAe,OAAO,eAAe,IAAI,IAAI,GAAG,EACxE,KAAK,aAAa,UAAU,eAAe;AAAA,IAClD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,EACjB,CAAC;AACD,MAAI,MAAM;AAAU,WAAO;AAC3B,SACE,qBAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAC3B;AAAA,0BAAC;AAAA,QAAE,KAAK;AAAA,QACN,8BAAC;AAAA,UAAW,WAAW,MAAM;AAAA,UAAO,WAAW;AAAA,UAAO,KAAK;AAAA,SAAS;AAAA,OACtE;AAAA,MAEA,oBAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ,CAAC;",
   "names": ["React"]
 }

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

@@ -11,20 +11,19 @@ const AxisLeft = () => {
     innerHeight,
     innerWidth,
     yScale,
+    chartId,
     setAxisLeftRef
   } = useContext(ChartContext);
-  if (yAxis.hideAxis)
-    return null;
-  const ref = useRef();
-  const gridRef = useRef();
-  const ticks = yScale.ticks?.(yAxis.tickCount ?? height / 80);
-  const hasNegativeDomain = yScale(innerHeight) < 0;
-  const { tickFormat, type } = yAxis;
+  const ref = useRef(null);
+  const gridRef = useRef(null);
+  const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = yAxis.tick || {};
+  const ticks = yScale.ticks?.(tickCount ?? height / 80);
+  const { type, showGrid, color: axisColor } = yAxis;
   useEffect(() => {
     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];
+    const grid = axisLeft(yScale).tickFormat((_) => "").tickSize(showGrid ? -innerWidth : 0).tickSizeOuter(0);
+    if (tickValues && ticks) {
+      const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];
       axis.tickValues(finalTicks);
     } else {
       axis.tickValues(ticks);
@@ -41,21 +40,42 @@ const AxisLeft = () => {
     }
     if (ref?.current && gridRef?.current) {
       select(gridRef.current).call(grid);
-      select(ref.current).call(axis);
+      const axisNode = select(ref.current);
+      axisNode.call(axis);
+      if (tickRotation)
+        axisNode.selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", ".15em").attr("transform", `rotate(-${tickRotation})`);
     }
-  }, [hasNegativeDomain, innerHeight, innerWidth, tickFormat, ticks, type, yAxis, yScale]);
+  }, [
+    innerHeight,
+    innerWidth,
+    overwriteTicks,
+    showGrid,
+    tickFormat,
+    tickRotation,
+    tickValues,
+    ticks,
+    type,
+    yAxis,
+    yScale
+  ]);
+  if (yAxis.hideAxis)
+    return null;
   return /* @__PURE__ */ jsxs("g", {
     children: [
+      /* @__PURE__ */ jsx("g", {
+        mask: `url(#mask-${chartId})`,
+        children: /* @__PURE__ */ jsx(StyledGrid, {
+          ref: gridRef
+        })
+      }),
       /* @__PURE__ */ jsx("g", {
         ref: setAxisLeftRef,
         children: /* @__PURE__ */ jsx(StyledAxis, {
+          axisColor,
           ref,
-          color: yAxis.color,
+          tickColor,
           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", "/* 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;",
+  "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    chartId,\n    setAxisLeftRef,\n  } = useContext(ChartContext);\n\n  const ref = useRef<SVGSVGElement>(null);\n  const gridRef = useRef<SVGSVGElement>(null);\n  const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = yAxis.tick || {};\n\n  const ticks = yScale.ticks?.(tickCount ?? height / 80);\n\n  const { type, showGrid, color: axisColor } = yAxis;\n  useEffect(() => {\n    const axis = axisLeft(yScale).tickSizeOuter(0);\n\n    const grid = axisLeft(yScale)\n      .tickFormat((_) => '')\n      .tickSize(showGrid ? -innerWidth : 0)\n      .tickSizeOuter(0);\n\n    if (tickValues && ticks) {\n      const finalTicks = overwriteTicks ? tickValues : [...ticks, ...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    if (ref?.current && gridRef?.current) {\n      select(gridRef.current).call(grid);\n      const axisNode = select(ref.current);\n      axisNode.call(axis);\n      if (tickRotation)\n        axisNode\n          .selectAll('text')\n          .style('text-anchor', 'end')\n          .attr('dx', '-.8em')\n          .attr('dy', '.15em')\n          .attr('transform', `rotate(-${tickRotation})`);\n    }\n  }, [\n    innerHeight,\n    innerWidth,\n    overwriteTicks,\n    showGrid,\n    tickFormat,\n    tickRotation,\n    tickValues,\n    ticks,\n    type,\n    yAxis,\n    yScale,\n  ]);\n\n  if (yAxis.hideAxis) return null;\n\n  return (\n    <g>\n      <g mask={`url(#mask-${chartId})`}>\n        <StyledGrid ref={gridRef}></StyledGrid>\n      </g>\n      <g ref={setAxisLeftRef}>\n        <StyledAxis axisColor={axisColor} ref={ref} tickColor={tickColor} className=\"axis-left\"></StyledAxis>\n      </g>\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,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,MAAM,OAAsB,IAAI;AACtC,QAAM,UAAU,OAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,OAAO,WAAW,YAAY,gBAAgB,cAAc,UAAU,IAAI,MAAM,QAAQ,CAAC;AAE7G,QAAM,QAAQ,OAAO,QAAQ,aAAa,SAAS,EAAE;AAErD,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,IAAI;AAC7C,YAAU,MAAM;AACd,UAAM,OAAO,SAAS,MAAM,EAAE,cAAc,CAAC;AAE7C,UAAM,OAAO,SAAS,MAAM,EACzB,WAAW,CAAC,MAAM,EAAE,EACpB,SAAS,WAAW,CAAC,aAAa,CAAC,EACnC,cAAc,CAAC;AAElB,QAAI,cAAc,OAAO;AACvB,YAAM,aAAa,iBAAiB,aAAa,CAAC,GAAG,OAAO,GAAG,UAAU;AACzE,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;AACA,QAAI,KAAK,WAAW,SAAS,SAAS;AACpC,aAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,WAAW,OAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;AAClB,UAAI;AACF,iBACG,UAAU,MAAM,EAChB,MAAM,eAAe,KAAK,EAC1B,KAAK,MAAM,OAAO,EAClB,KAAK,MAAM,OAAO,EAClB,KAAK,aAAa,WAAW,eAAe;AAAA,IACnD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,MAAM;AAAU,WAAO;AAE3B,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAAE,MAAM,aAAa;AAAA,QACpB,8BAAC;AAAA,UAAW,KAAK;AAAA,SAAS;AAAA,OAC5B;AAAA,MACA,oBAAC;AAAA,QAAE,KAAK;AAAA,QACN,8BAAC;AAAA,UAAW;AAAA,UAAsB;AAAA,UAAU;AAAA,UAAsB,WAAU;AAAA,SAAY;AAAA,OAC1F;AAAA;AAAA,GACF;AAEJ;",
   "names": []
 }

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

@@ -6,27 +6,29 @@ import { StyledAxis } from "../../styles";
 import { ChartContext } from "../../ChartContext";
 const AxisRight = () => {
   const {
-    props: { y2Axis, height },
+    props: { y2Axis },
     innerWidth,
     y2Scale,
     setAxisRightRef
   } = useContext(ChartContext);
-  if (!y2Axis)
-    return null;
-  const ticks = y2Scale.ticks?.(y2Axis.tickCount ?? height / 80);
-  const ref = useRef();
+  const { color: tickColor } = y2Axis?.tick || {};
+  const ref = useRef(null);
   useEffect(() => {
     const axis = axisRight(y2Scale).tickSizeOuter(0);
-    select(ref.current).call(axis);
+    if (ref.current)
+      select(ref.current).call(axis);
   }, [innerWidth, y2Scale]);
+  if (!y2Axis)
+    return null;
   return /* @__PURE__ */ jsx("g", {
     ref: setAxisRightRef,
     transform: `translate(${innerWidth},0)`,
     children: /* @__PURE__ */ jsx(StyledAxis, {
+      axisColor: y2Axis?.color,
       ref,
-      color: y2Axis.color
+      tickColor
     })
-  }, 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, 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;",
+  "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';\nexport const AxisRight = () => {\n  const {\n    props: { y2Axis },\n    innerWidth,\n    y2Scale,\n    setAxisRightRef,\n  } = useContext(ChartContext);\n\n  const { color: tickColor } = y2Axis?.tick || {};\n  const ref = useRef<SVGGElement>(null);\n  useEffect(() => {\n    const axis = axisRight(y2Scale).tickSizeOuter(0);\n\n    if (ref.current) select(ref.current).call(axis);\n  }, [innerWidth, y2Scale]);\n  if (!y2Axis) return null;\n  return (\n    <g ref={setAxisRightRef} transform={`translate(${innerWidth},0)`}>\n      <StyledAxis axisColor={y2Axis?.color} ref={ref} tickColor={tickColor} />\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;AACtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,EAAE,OAAO,UAAU,IAAI,QAAQ,QAAQ,CAAC;AAC9C,QAAM,MAAM,OAAoB,IAAI;AACpC,YAAU,MAAM;AACd,UAAM,OAAO,UAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,QAAI,IAAI;AAAS,aAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAAA,EAChD,GAAG,CAAC,YAAY,OAAO,CAAC;AACxB,MAAI,CAAC;AAAQ,WAAO;AACpB,SACE,oBAAC;AAAA,IAAE,KAAK;AAAA,IAAiB,WAAW,aAAa;AAAA,IAC/C,8BAAC;AAAA,MAAW,WAAW,QAAQ;AAAA,MAAO;AAAA,MAAU;AAAA,KAAsB;AAAA,GACxE;AAEJ;",
   "names": []
 }

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

@@ -6,9 +6,12 @@ import { ChartContext } from "../ChartContext";
 import { useKeyboardNavigation } from "../config/useKeyboardNavigation";
 import { Legend } from "./Legend/Legend";
 import { Label } from "./Labels/Label";
-const ChartContainer = ({ children }) => {
+import { BlurMask } from "./Scroller/BlurMask";
+import { ClipPaths } from "./ClipPaths";
+import { Axes } from "./Axis/Axes";
+const ChartContainer = () => {
   const {
-    props: { width, height },
+    props: { width, height, xAxis, yAxis },
     containerRef,
     activePoint,
     internalMargin,
@@ -30,8 +33,8 @@ const ChartContainer = ({ children }) => {
     yScale,
     currentData
   } = useContext(ChartContext);
-  if (currentData.length === 0)
-    return null;
+  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;
+  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
   const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();
   const onMouseEnterHandler = useCallback(() => {
     setIsScrollbarVisible(true);
@@ -47,15 +50,37 @@ const ChartContainer = ({ children }) => {
       if (!isGrabbed)
         return;
       setActivePoint(null);
-      const newPosition = oldLastPosition?.current + e.clientX - startPosition;
-      if (newPosition < 0)
-        setXScrollbarPosition(0);
-      else if (newPosition > innerWidth - innerWidth / containerRatio)
-        setXScrollbarPosition(innerWidth - innerWidth / containerRatio);
-      else
-        setXScrollbarPosition(newPosition);
+      if (xScroll) {
+        const newPosition = oldLastPosition?.current + e.clientX - startPosition;
+        if (newPosition < 0)
+          setXScrollbarPosition(0);
+        else if (newPosition > innerWidth - innerWidth / containerRatio)
+          setXScrollbarPosition(innerWidth - innerWidth / containerRatio);
+        else
+          setXScrollbarPosition(newPosition);
+      }
+      if (yScroll) {
+        const newPosition = oldLastPosition?.current + e.clientY - startPosition;
+        if (newPosition < 0)
+          setXScrollbarPosition(0);
+        else if (newPosition > innerHeight - innerHeight / containerRatio)
+          setXScrollbarPosition(innerHeight - innerHeight / containerRatio);
+        else
+          setXScrollbarPosition(newPosition);
+      }
     },
-    [isGrabbed, setActivePoint, oldLastPosition, startPosition, setXScrollbarPosition, innerWidth, containerRatio]
+    [
+      isGrabbed,
+      setActivePoint,
+      xScroll,
+      yScroll,
+      oldLastPosition,
+      startPosition,
+      setXScrollbarPosition,
+      innerWidth,
+      containerRatio,
+      innerHeight
+    ]
   );
   const handleMouseUp = useCallback(() => {
     oldLastPosition.current = xScrollbarPosition;
@@ -67,10 +92,13 @@ const ChartContainer = ({ children }) => {
   );
   useEffect(() => {
     containerRef?.current?.addEventListener("mousemove", handleMouseMove);
+    const container = containerRef?.current;
     return () => {
-      containerRef?.current?.removeEventListener("mousemove", handleMouseMove);
+      container?.removeEventListener("mousemove", handleMouseMove);
     };
   }, [containerRef, handleMouseMove]);
+  if (currentData.length === 0)
+    return null;
   return /* @__PURE__ */ jsx(StyledSVGWrapper, {
     ref: containerRef,
     onKeyDown: onInputKeyDown,
@@ -84,57 +112,29 @@ const ChartContainer = ({ children }) => {
     onMouseDown: (e) => e.preventDefault(),
     isGrabbed,
     style: { width },
-    children: /* @__PURE__ */ jsx("svg", {
+    children: /* @__PURE__ */ jsxs("svg", {
       ref: svgRef,
       width,
       height,
-      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)
-              })
+      children: [
+        /* @__PURE__ */ jsx(BlurMask, {}),
+        /* @__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(Axes, {})
             })
-          }) : null
-        ]
-      }, key)
+          ]
+        }, key),
+        /* @__PURE__ */ jsx(ClipPaths, {})
+      ]
     })
   });
 };

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, 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    currentData,\n  } = useContext(ChartContext);\n\n  if (currentData.length === 0) return null;\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": "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",
+  "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';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { Axes } from './Axis/Axes';\n\nexport const ChartContainer = () => {\n  const {\n    props: { width, height, xAxis, yAxis },\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    currentData,\n  } = useContext(ChartContext);\n\n  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\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: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      setActivePoint(null);\n\n      if (xScroll) {\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      if (yScroll) {\n        const newPosition = oldLastPosition?.current + e.clientY - startPosition;\n        if (newPosition < 0) setXScrollbarPosition(0);\n        else if (newPosition > innerHeight - innerHeight / containerRatio)\n          setXScrollbarPosition(innerHeight - innerHeight / containerRatio);\n        else setXScrollbarPosition(newPosition);\n      }\n    },\n    [\n      isGrabbed,\n      setActivePoint,\n      xScroll,\n      yScroll,\n      oldLastPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\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    const container = containerRef?.current;\n    return () => {\n      container?.removeEventListener('mousemove', handleMouseMove);\n      // containerRef?.current?.removeEventListener('wheel', handleScroll);\n    };\n  }, [containerRef, handleMouseMove]);\n\n  if (currentData.length === 0) return null;\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        <BlurMask />\n        <g key={key}>\n          <g>\n            <Legend />\n            <Label />\n          </g>\n          <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n            <Axes />\n          </g>\n        </g>\n        {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n        <ClipPaths />\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ChartContext } from "../ChartContext";
+const ClipPaths = () => {
+  const {
+    innerWidth,
+    containerRatio,
+    innerHeight,
+    chartId,
+    yScale,
+    props: { xAxis, yAxis }
+  } = useContext(ChartContext);
+  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("defs", {
+        children: /* @__PURE__ */ jsx("clipPath", {
+          id: `rect-focus-ring-${chartId}`,
+          children: yScroll ? /* @__PURE__ */ jsx("rect", {
+            width: innerWidth + 4,
+            height: innerHeight * containerRatio,
+            x: -4
+          }) : /* @__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
+    ]
+  });
+};
+export {
+  ClipPaths
+};
+//# sourceMappingURL=ClipPaths.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/ClipPaths.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const ClipPaths = () => {\n  const {\n    innerWidth,\n    containerRatio,\n    innerHeight,\n    chartId,\n    yScale,\n    props: { xAxis, yAxis },\n  } = useContext(ChartContext);\n\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  return (\n    <>\n      <defs>\n        <clipPath id={`rect-focus-ring-${chartId}`}>\n          {yScroll ? (\n            <rect width={innerWidth + 4} height={innerHeight * containerRatio} x={-4} />\n          ) : (\n            <rect width={innerWidth * containerRatio} height={innerHeight + 4} y={-4} />\n          )}\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    </>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM;AAAA,EACxB,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,SACE;AAAA,IACE;AAAA,0BAAC;AAAA,QACC,8BAAC;AAAA,UAAS,IAAI,mBAAmB;AAAA,UAC9B,oBACC,oBAAC;AAAA,YAAK,OAAO,aAAa;AAAA,YAAG,QAAQ,cAAc;AAAA,YAAgB,GAAG;AAAA,WAAI,IAE1E,oBAAC;AAAA,YAAK,OAAO,aAAa;AAAA,YAAgB,QAAQ,cAAc;AAAA,YAAG,GAAG;AAAA,WAAI;AAAA,SAE9E;AAAA,OACF;AAAA,MACA,oBAAC;AAAA,QACC,8BAAC;AAAA,UAAS,IAAI,kBAAkB;AAAA,UAC9B,8BAAC;AAAA,YAAK,OAAO,aAAa;AAAA,YAAgB,QAAQ,OAAO,CAAC,IAAI;AAAA,YAAG,GAAG;AAAA,YAAI,GAAG;AAAA,WAAK;AAAA,SAClF;AAAA,OACF;AAAA,MACC,cAAc,OAAO,CAAC,IAAI,IACzB,oBAAC;AAAA,QACC,8BAAC;AAAA,UAAS,IAAI,kBAAkB;AAAA,UAC9B,8BAAC;AAAA,YAAK,OAAO,aAAa;AAAA,YAAgB,QAAQ,cAAc,OAAO,CAAC;AAAA,YAAG,GAAG;AAAA,YAAK,GAAG,OAAO,CAAC;AAAA,WAAG;AAAA,SACnG;AAAA,OACF,IACE;AAAA;AAAA,GACN;AAEJ;",
+  "names": []
+}

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

@@ -9,15 +9,15 @@ const BottomLabel = () => {
     setBottomLabel,
     innerHeight,
     innerWidth,
+    axisBottomHeight,
     props: { xAxis }
   } = useContext(ChartContext);
   return /* @__PURE__ */ jsx("g", {
     ref: setBottomLabel,
-    transform: `translate(${innerWidth / 2 + internalMargin.left},${innerHeight + internalMargin.top})`,
+    transform: `translate(${innerWidth / 2 + internalMargin.left},${innerHeight + axisBottomHeight + internalMargin.top + 20})`,
     children: /* @__PURE__ */ jsx(StyledAxisLabel, {
       className: "axis-label",
       textAnchor: "middle",
-      dy: 35,
       children: xAxis?.label
     })
   });