@elliemae/ds-dataviz 3.14.4 → 3.14.6

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

@@ -1,93 +1,110 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import React2, { useContext, useEffect, useRef } from "react";
-import { select, axisBottom } from "d3";
-import { StyledAxis, StyledGrid } from "../../styles";
+import { jsx } from "react/jsx-runtime";
+import React2, { useContext, useMemo, useCallback } from "react";
 import { ChartContext } from "../../ChartContext";
-import { useUniqueData } from "../../helpers/useUniqueData";
-import { getFormatGenerator } from "../../helpers";
+import { Axis } from "./Axis";
+import { Tick } from "./Tick";
+import { GridLine } from "./GridLine";
+import { COLOR_PALLET } from "../../helpers/colorPallet";
 const AxisBottom = React2.memo(() => {
   const {
     props: { xAxis },
     innerHeight,
     xScale,
+    yScale,
     innerWidth,
     containerRatio,
-    internalMargin,
-    isHorizontal,
     setAxisBottomRef
   } = useContext(ChartContext);
-  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(-innerHeight).tickFormat("").tickSizeOuter(0);
-    const axis = axisBottom(xScale).tickSizeOuter(0);
-    if (ticksScales.includes(xAxis.type)) {
-      const ticksNum = (() => {
-        if (tickCount)
-          return tickCount;
-        if (containerRatio > 1) {
-          return innerWidth / 80 * containerRatio;
+  const { tickRotation } = xAxis.tick || {};
+  const { showGrid } = xAxis;
+  const textProps = useMemo(() => {
+    const commomProps = { fill: COLOR_PALLET[xAxis?.tick?.color] || xAxis?.tick?.color };
+    if (!tickRotation)
+      return { ...commomProps, y: 17 };
+    return {
+      ...commomProps,
+      dx: 8 * Math.sin(Math.PI * (tickRotation / 180)),
+      dy: ".71em",
+      y: Math.ceil(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1)),
+      transform: `rotate(${tickRotation})`
+    };
+  }, [tickRotation, xAxis?.tick?.color]);
+  const style = useMemo(() => {
+    if (!tickRotation)
+      return { textAnchor: "middle" };
+    return { textAnchor: tickRotation > 0 ? "start" : "end" };
+  }, [tickRotation]);
+  const GridRenderer = useCallback(
+    (props) => {
+      if (!showGrid)
+        return null;
+      const { position, ...rest } = props;
+      const gridLineCoords = {
+        x1: position,
+        x2: position,
+        y1: 0,
+        y2: innerHeight
+      };
+      return /* @__PURE__ */ jsx(GridLine, { ...gridLineCoords, ...rest });
+    },
+    [innerHeight, showGrid]
+  );
+  const TickRenderer = useCallback(
+    (props) => {
+      const { position, tickValue, ...rest } = props;
+      const tickLineCoords = {
+        y2: 5,
+        stroke: COLOR_PALLET[xAxis?.tick?.color] || xAxis?.tick?.color
+      };
+      return /* @__PURE__ */ jsx(
+        Tick,
+        {
+          ...tickLineCoords,
+          tickValue: xScale.getTickFormatted(tickValue),
+          xTranslate: position,
+          yTranslate: innerHeight,
+          textProps,
+          textStyle: style,
+          ...rest
         }
-        return innerWidth / 80;
-      })();
-      const ticks = xScale.ticks?.(ticksNum);
-      if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {
-        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);
+      );
+    },
+    [xAxis?.tick?.color, xScale, innerHeight, textProps, style]
+  );
+  const axisColor = useMemo(() => COLOR_PALLET[xAxis.color] || xAxis.color, [xAxis.color]);
+  return useMemo(() => {
+    if (xAxis.hideAxis)
+      return null;
+    const lineCoords = {
+      x1: 0,
+      x2: innerWidth * containerRatio,
+      y1: innerHeight,
+      y2: innerHeight
+    };
+    return /* @__PURE__ */ jsx(
+      Axis,
+      {
+        lineCoords,
+        scale: xScale,
+        innerRef: setAxisBottomRef,
+        dimension: innerWidth * containerRatio,
+        TickRenderer,
+        GridRenderer,
+        color: axisColor
       }
-    }
-    if (tickFormat) {
-      if (typeof tickFormat === "string") {
-        const formatGenerator = getFormatGenerator(xAxis.type ?? "linear");
-        axis.tickFormat((d) => formatGenerator(tickFormat)(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);
-      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})`);
-    }
+    );
   }, [
-    innerHeight,
-    overwriteTicks,
-    xAxis?.showGrid,
-    tickFormat,
-    tickValues,
-    xScale,
-    tickRotation,
-    xAxis.type,
-    ticksScales,
-    tickCount,
+    GridRenderer,
+    TickRenderer,
     containerRatio,
+    axisColor,
+    innerHeight,
     innerWidth,
-    uniqueData.length,
-    uniqueData,
-    internalMargin.left,
-    isHorizontal
+    setAxisBottomRef,
+    xAxis.hideAxis,
+    xScale
   ]);
-  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 }) }),
-    /* @__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", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport type { ScaleLinear, ScaleTime } from 'd3';\nimport { select, axisBottom } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { useUniqueData } from '../../helpers/useUniqueData';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis },\n    innerHeight,\n    xScale,\n    innerWidth,\n    containerRatio,\n    internalMargin,\n    isHorizontal,\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 / 80) * containerRatio;\n        }\n        return innerWidth / 80;\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      // @todo we need to improve this logic\n      if (containerRatio > 1 && uniqueData.length < 10 && !isHorizontal) {\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\n    if (tickFormat) {\n      if (typeof tickFormat === 'string') {\n        const formatGenerator = getFormatGenerator(xAxis.type ?? 'linear');\n        axis.tickFormat((d) => formatGenerator(tickFormat)(d));\n      }\n      if (typeof tickFormat === 'function') {\n        axis.tickFormat(tickFormat);\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 && !xScale.bandwidth) {\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    isHorizontal,\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      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n});\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkHnB,SAEI,KAFJ;AAhHJ,OAAOA,UAAS,YAAY,WAAW,cAAc;AAErD,SAAS,QAAQ,kBAAkB;AACnC,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AAE5B,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,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,KAAM;AAAA,QAC7B;AACA,eAAO,aAAa;AAAA,MACtB,GAAG;AACH,YAAM,QAAS,OAA0E,QAAQ,QAAQ;AAIzG,UAAI,iBAAiB,KAAK,WAAW,SAAS,MAAM,CAAC,cAAc;AACjE,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;AAAA,IACF;AAEA,QAAI,YAAY;AACd,UAAI,OAAO,eAAe,UAAU;AAClC,cAAM,kBAAkB,mBAAmB,MAAM,QAAQ,QAAQ;AACjE,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,SAAS,WAAW,SAAS,SAAS;AACxC,UAAI,OAAO;AAAU,eAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACtD,YAAM,WAAW,OAAO,QAAQ,OAAO;AACvC,eAAS,KAAK,IAAI;AAOlB,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,IACf;AAAA,EACF,CAAC;AACD,MAAI,MAAM;AAAU,WAAO;AAC3B,SACE,qBAAC,OAAE,WAAW,eAAe,gBAC3B;AAAA,wBAAC,OAAE,KAAK,kBACN,8BAAC,cAAW,WAAW,MAAM,OAAO,WAAW,OAAO,KAAK,SAAS,GACtE;AAAA,IACA,oBAAC,cAAW,KAAK,SAAS;AAAA,KAC5B;AAEJ,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport type { CSSProperties } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { Axis, type GridRenderPropsT, type TickRenderPropsT } from './Axis';\nimport { Tick } from './Tick';\nimport { GridLine } from './GridLine';\nimport { COLOR_PALLET } from '../../helpers/colorPallet';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis },\n    innerHeight,\n    xScale,\n    yScale,\n    innerWidth,\n    containerRatio,\n    setAxisBottomRef,\n  } = useContext(ChartContext);\n\n  const { tickRotation } = xAxis.tick || ({} as DSChartT.AxisTickT);\n  const { showGrid } = xAxis;\n\n  const textProps = useMemo(() => {\n    const commomProps = { fill: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color };\n    if (!tickRotation) return { ...commomProps, y: 17 };\n    return {\n      ...commomProps,\n      dx: 8 * Math.sin(Math.PI * (tickRotation / 180)),\n      dy: '.71em',\n      y: Math.ceil(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1)),\n      transform: `rotate(${tickRotation})`,\n    };\n  }, [tickRotation, xAxis?.tick?.color]);\n\n  const style: CSSProperties = useMemo(() => {\n    if (!tickRotation) return { textAnchor: 'middle' };\n    return { textAnchor: tickRotation > 0 ? 'start' : 'end' };\n  }, [tickRotation]);\n\n  const GridRenderer = useCallback(\n    (props: GridRenderPropsT) => {\n      if (!showGrid) return null;\n\n      const { position, ...rest } = props;\n      const gridLineCoords = {\n        x1: position,\n        x2: position,\n        y1: 0,\n        y2: innerHeight,\n      };\n      return <GridLine {...gridLineCoords} {...rest} />;\n    },\n    [innerHeight, showGrid],\n  );\n\n  const TickRenderer = useCallback(\n    (props: TickRenderPropsT) => {\n      const { position, tickValue, ...rest } = props;\n      const tickLineCoords = {\n        y2: 5,\n        stroke: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color,\n      };\n      return (\n        <Tick\n          {...tickLineCoords}\n          tickValue={xScale.getTickFormatted(tickValue)}\n          xTranslate={position}\n          yTranslate={innerHeight}\n          textProps={textProps}\n          textStyle={style}\n          {...rest}\n        />\n      );\n    },\n    [xAxis?.tick?.color, xScale, innerHeight, textProps, style],\n  );\n\n  const axisColor = useMemo(() => COLOR_PALLET[xAxis.color as keyof typeof COLOR_PALLET] || xAxis.color, [xAxis.color]);\n\n  return useMemo(() => {\n    if (xAxis.hideAxis) return null;\n    const lineCoords = {\n      x1: 0,\n      x2: innerWidth * containerRatio,\n      y1: innerHeight,\n      y2: innerHeight,\n    };\n\n    return (\n      <Axis\n        lineCoords={lineCoords}\n        scale={xScale}\n        innerRef={setAxisBottomRef}\n        dimension={innerWidth * containerRatio}\n        TickRenderer={TickRenderer}\n        GridRenderer={GridRenderer}\n        color={axisColor}\n      />\n    );\n  }, [\n    GridRenderer,\n    TickRenderer,\n    containerRatio,\n    axisColor,\n    innerHeight,\n    innerWidth,\n    setAxisBottomRef,\n    xAxis.hideAxis,\n    xScale,\n  ]);\n});\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -1,71 +1,101 @@
 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 } from "../../styles";
+import { jsx } from "react/jsx-runtime";
+import React2, { useCallback, useContext, useMemo } from "react";
 import { ChartContext } from "../../ChartContext";
-import { getFormatGenerator } from "../../helpers";
-const AxisLeft = () => {
+import { Axis } from "./Axis";
+import { Tick } from "./Tick";
+import { GridLine } from "./GridLine";
+import { COLOR_PALLET } from "../../helpers/colorPallet";
+const AxisLeft = React2.memo(() => {
   const {
     props: { yAxis },
     innerHeight,
-    innerWidth,
-    yScale,
-    chartId,
     height,
+    yScale,
+    innerWidth,
     setAxisLeftRef
   } = useContext(ChartContext);
-  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(showGrid ? -innerWidth : 0).tickSizeOuter(0);
-    if (tickValues && ticks) {
-      const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];
-      axis.tickValues(finalTicks);
-    } else {
-      axis.tickValues(ticks);
-      grid.tickValues(ticks);
-    }
-    if (tickFormat) {
-      if (typeof tickFormat === "string") {
-        const formatGenerator = getFormatGenerator(type ?? "linear");
-        axis.tickFormat((d) => formatGenerator(tickFormat)(d));
+  const { tickRotation } = yAxis.tick || {};
+  const { showGrid } = yAxis;
+  const textProps = useMemo(() => {
+    const commomProps = { fill: COLOR_PALLET[yAxis?.tick?.color] || yAxis?.tick?.color };
+    if (!tickRotation)
+      return { ...commomProps, x: -10, dy: "0.32em" };
+    return {
+      ...commomProps,
+      dy: ".30em",
+      dx: "-.10em",
+      x: Math.trunc(-(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))),
+      transform: `rotate(${tickRotation})`
+    };
+  }, [tickRotation, yAxis?.tick?.color]);
+  const style = useMemo(
+    () => ({
+      textAnchor: "end"
+    }),
+    []
+  );
+  const GridRenderer = useCallback(
+    (props) => {
+      if (!showGrid)
+        return null;
+      const { position, ...rest } = props;
+      const gridLineCoords = {
+        x1: 0,
+        x2: innerWidth,
+        y1: position,
+        y2: position
+      };
+      return /* @__PURE__ */ jsx(GridLine, { ...gridLineCoords, ...rest });
+    },
+    [showGrid, innerWidth]
+  );
+  const TickRenderer = useCallback(
+    (props) => {
+      const { position, tickValue, ...rest } = props;
+      const tickLineCoords = {
+        x2: -5,
+        stroke: COLOR_PALLET[yAxis?.tick?.color] || yAxis?.tick?.color
+      };
+      return /* @__PURE__ */ jsx(
+        Tick,
+        {
+          ...tickLineCoords,
+          xTranslate: 0,
+          yTranslate: position,
+          textProps,
+          textStyle: style,
+          tickValue: yScale.getTickFormatted(tickValue),
+          ...rest
+        }
+      );
+    },
+    [style, textProps, yAxis?.tick?.color, yScale]
+  );
+  const axisColor = useMemo(() => COLOR_PALLET[yAxis.color] || yAxis.color, [yAxis.color]);
+  return useMemo(() => {
+    if (yAxis.hideAxis)
+      return null;
+    const lineCoords = {
+      x1: 0,
+      x2: 0,
+      y1: 0,
+      y2: innerHeight
+    };
+    return /* @__PURE__ */ jsx(
+      Axis,
+      {
+        lineCoords,
+        scale: yScale,
+        innerRef: setAxisLeftRef,
+        dimension: height,
+        GridRenderer,
+        TickRenderer,
+        color: axisColor
       }
-      if (typeof tickFormat === "function") {
-        axis.tickFormat(tickFormat);
-      }
-    }
-    if (ref?.current && gridRef?.current) {
-      select(gridRef.current).call(grid);
-      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})`);
-    }
-  }, [
-    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, tickColor, className: "axis-left" }) })
-  ] });
-};
+    );
+  }, [GridRenderer, TickRenderer, axisColor, height, innerHeight, setAxisLeftRef, yAxis.hideAxis, yScale]);
+});
 export {
   AxisLeft
 };

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';\n\nexport const AxisLeft = () => {\n  const {\n    props: { yAxis },\n    innerHeight,\n    innerWidth,\n    yScale,\n    chartId,\n    height,\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\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;ACkFnB,SAEI,KAFJ;AAhFJ,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAE5B,MAAM,WAAW,MAAM;AAC5B,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,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;AAE7C,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,OACC;AAAA,wBAAC,OAAE,MAAM,aAAa,YACpB,8BAAC,cAAW,KAAK,SAAS,GAC5B;AAAA,IACA,oBAAC,OAAE,KAAK,gBACN,8BAAC,cAAW,WAAsB,KAAU,WAAsB,WAAU,aAAY,GAC1F;AAAA,KACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { type CSSProperties, useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { Axis, type TickRenderPropsT, type GridRenderPropsT } from './Axis';\nimport { Tick } from './Tick';\nimport { GridLine } from './GridLine';\nimport { COLOR_PALLET } from '../../helpers/colorPallet';\n\nexport const AxisLeft = React.memo(() => {\n  const {\n    props: { yAxis },\n    innerHeight,\n    height,\n    yScale,\n    innerWidth,\n    setAxisLeftRef,\n  } = useContext(ChartContext);\n\n  const { tickRotation } = yAxis.tick || ({} as DSChartT.AxisTickT);\n  const { showGrid } = yAxis;\n\n  const textProps = useMemo(() => {\n    const commomProps = { fill: COLOR_PALLET[yAxis?.tick?.color as keyof typeof COLOR_PALLET] || yAxis?.tick?.color };\n    if (!tickRotation) return { ...commomProps, x: -10, dy: '0.32em' };\n    return {\n      ...commomProps,\n      dy: '.30em',\n      dx: '-.10em',\n      x: Math.trunc(-(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))),\n      transform: `rotate(${tickRotation})`,\n    };\n  }, [tickRotation, yAxis?.tick?.color]);\n\n  const style: CSSProperties = useMemo(\n    () => ({\n      textAnchor: 'end',\n    }),\n    [],\n  );\n\n  const GridRenderer = useCallback(\n    (props: GridRenderPropsT) => {\n      if (!showGrid) return null;\n      const { position, ...rest } = props;\n      const gridLineCoords = {\n        x1: 0,\n        x2: innerWidth,\n        y1: position,\n        y2: position,\n      };\n      return <GridLine {...gridLineCoords} {...rest} />;\n    },\n    [showGrid, innerWidth],\n  );\n\n  const TickRenderer = useCallback(\n    (props: TickRenderPropsT) => {\n      const { position, tickValue, ...rest } = props;\n      const tickLineCoords = {\n        x2: -5,\n        stroke: COLOR_PALLET[yAxis?.tick?.color as keyof typeof COLOR_PALLET] || yAxis?.tick?.color,\n      };\n      return (\n        <Tick\n          {...tickLineCoords}\n          xTranslate={0}\n          yTranslate={position}\n          textProps={textProps}\n          textStyle={style}\n          tickValue={yScale.getTickFormatted(tickValue)}\n          {...rest}\n        />\n      );\n    },\n    [style, textProps, yAxis?.tick?.color, yScale],\n  );\n\n  const axisColor = useMemo(() => COLOR_PALLET[yAxis.color as keyof typeof COLOR_PALLET] || yAxis.color, [yAxis.color]);\n\n  return useMemo(() => {\n    if (yAxis.hideAxis) return null;\n    const lineCoords = {\n      x1: 0,\n      x2: 0,\n      y1: 0,\n      y2: innerHeight,\n    };\n\n    return (\n      <Axis\n        lineCoords={lineCoords}\n        scale={yScale}\n        innerRef={setAxisLeftRef}\n        dimension={height}\n        GridRenderer={GridRenderer}\n        TickRenderer={TickRenderer}\n        color={axisColor}\n      />\n    );\n  }, [GridRenderer, TickRenderer, axisColor, height, innerHeight, setAxisLeftRef, yAxis.hideAxis, yScale]);\n});\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoDV;AAlDb,OAAOA,UAA6B,aAAa,YAAY,eAAe;AAC5E,SAAS,oBAAoB;AAE7B,SAAS,YAA0D;AACnE,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAEtB,MAAM,WAAWA,OAAM,KAAK,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,EAAE,aAAa,IAAI,MAAM,QAAS,CAAC;AACzC,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM,YAAY,QAAQ,MAAM;AAC9B,UAAM,cAAc,EAAE,MAAM,aAAa,OAAO,MAAM,UAAuC,OAAO,MAAM,MAAM;AAChH,QAAI,CAAC;AAAc,aAAO,EAAE,GAAG,aAAa,GAAG,KAAK,IAAI,SAAS;AACjE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,GAAG,KAAK,MAAM,EAAE,OAAO,OAAO,eAAe,OAAO,eAAe,IAAI,IAAI,IAAI;AAAA,MAC/E,WAAW,UAAU;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,cAAc,OAAO,MAAM,KAAK,CAAC;AAErC,QAAM,QAAuB;AAAA,IAC3B,OAAO;AAAA,MACL,YAAY;AAAA,IACd;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,UAAI,CAAC;AAAU,eAAO;AACtB,YAAM,EAAE,aAAa,KAAK,IAAI;AAC9B,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AACA,aAAO,oBAAC,YAAU,GAAG,gBAAiB,GAAG,MAAM;AAAA,IACjD;AAAA,IACA,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,YAAM,EAAE,UAAU,cAAc,KAAK,IAAI;AACzC,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,QAAQ,aAAa,OAAO,MAAM,UAAuC,OAAO,MAAM;AAAA,MACxF;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ;AAAA,UACA,WAAW;AAAA,UACX,WAAW,OAAO,iBAAiB,SAAS;AAAA,UAC3C,GAAG;AAAA;AAAA,MACN;AAAA,IAEJ;AAAA,IACA,CAAC,OAAO,WAAW,OAAO,MAAM,OAAO,MAAM;AAAA,EAC/C;AAEA,QAAM,YAAY,QAAQ,MAAM,aAAa,MAAM,UAAuC,MAAM,OAAO,CAAC,MAAM,KAAK,CAAC;AAEpH,SAAO,QAAQ,MAAM;AACnB,QAAI,MAAM;AAAU,aAAO;AAC3B,UAAM,aAAa;AAAA,MACjB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ,GAAG,CAAC,cAAc,cAAc,WAAW,QAAQ,aAAa,gBAAgB,MAAM,UAAU,MAAM,CAAC;AACzG,CAAC;",
+  "names": ["React"]
 }

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

@@ -1,69 +1,104 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useRef } from "react";
-import { select, axisRight } from "d3";
-import { StyledAxis, StyledGrid } from "../../styles";
+import { jsx } from "react/jsx-runtime";
+import React2, { useCallback, useContext, useMemo } from "react";
 import { ChartContext } from "../../ChartContext";
-import { getFormatGenerator } from "../../helpers";
-const AxisRight = () => {
+import { Axis } from "./Axis";
+import { Tick } from "./Tick";
+import { GridLine } from "./GridLine";
+import { COLOR_PALLET } from "../../helpers/colorPallet";
+const AxisRight = React2.memo(() => {
   const {
     props: { y2Axis },
     innerHeight,
-    innerWidth,
     y2Scale,
-    chartId,
-    height,
+    innerWidth,
     setAxisRightRef
   } = useContext(ChartContext);
-  const ref = useRef(null);
-  const gridRef = useRef(null);
-  const { tickValues, color: tickColor, tickFormat, overwriteTicks, tickRotation, tickCount } = y2Axis.tick || {};
-  const ticks = y2Scale.ticks?.(tickCount ?? height / 80);
-  const { type, showGrid, color: axisColor } = y2Axis;
-  useEffect(() => {
-    const axis = axisRight(y2Scale).tickSizeOuter(0);
-    const grid = axisRight(y2Scale).tickFormat((_) => "").tickSize(showGrid ? -innerWidth : 0).tickSizeOuter(0);
-    if (tickValues && ticks) {
-      const finalTicks = overwriteTicks ? tickValues : [...ticks, ...tickValues];
-      axis.tickValues(finalTicks);
-    } else {
-      axis.tickValues(ticks);
-      grid.tickValues(ticks);
-    }
-    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 { tickRotation } = y2Axis?.tick || {};
+  const { showGrid } = y2Axis;
+  const textProps = useMemo(() => {
+    const commomProps = { fill: COLOR_PALLET[y2Axis?.tick?.color] || y2Axis?.tick?.color };
+    if (!tickRotation)
+      return { ...commomProps, x: 10, dy: "0.32em" };
+    return {
+      ...commomProps,
+      dx: 8 * Math.sin(Math.PI * (tickRotation / 180)),
+      dy: ".71em",
+      y: 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1),
+      transform: `rotate(${tickRotation})`
+    };
+  }, [tickRotation, y2Axis?.tick?.color]);
+  const style = useMemo(() => {
+    if (!tickRotation)
+      return {
+        textAnchor: "start"
+      };
+    return { textAnchor: tickRotation > 0 ? "start" : "end" };
+  }, [tickRotation]);
+  const GridRenderer = useCallback(
+    (props) => {
+      if (!showGrid)
+        return null;
+      const { position, ...rest } = props;
+      const gridLineCoords = {
+        x1: 0,
+        x2: innerWidth,
+        y1: position,
+        y2: position
+      };
+      return /* @__PURE__ */ jsx(GridLine, { ...gridLineCoords, ...rest });
+    },
+    [innerWidth, showGrid]
+  );
+  const TickRenderer = useCallback(
+    (props) => {
+      const { position, tickValue, ...rest } = props;
+      const tickLineCoords = {
+        x2: 5,
+        stroke: COLOR_PALLET[y2Axis?.tick?.color] || y2Axis?.tick?.color
+      };
+      return /* @__PURE__ */ jsx(
+        Tick,
+        {
+          ...tickLineCoords,
+          yTranslate: position,
+          xTranslate: innerWidth,
+          textProps,
+          textStyle: style,
+          tickValue: y2Scale.getTickFormatted(tickValue),
+          ...rest
+        }
+      );
+    },
+    [innerWidth, style, textProps, y2Axis?.tick?.color, y2Scale]
+  );
+  const axisColor = useMemo(
+    () => COLOR_PALLET[y2Axis.color] || y2Axis.color,
+    [y2Axis.color]
+  );
+  return useMemo(() => {
+    if (y2Axis?.hideAxis)
+      return null;
+    const lineCoords = {
+      x1: innerWidth,
+      x2: innerWidth,
+      y1: 0,
+      y2: innerHeight
+    };
+    return /* @__PURE__ */ jsx(
+      Axis,
+      {
+        lineCoords,
+        scale: y2Scale,
+        innerRef: setAxisRightRef,
+        dimension: innerHeight,
+        GridRenderer,
+        TickRenderer,
+        color: axisColor
       }
-    }
-    if (ref?.current && gridRef?.current) {
-      select(gridRef.current).call(grid);
-      const axisNode = select(ref.current);
-      axisNode.call(axis);
-    }
-  }, [
-    innerHeight,
-    innerWidth,
-    overwriteTicks,
-    showGrid,
-    tickFormat,
-    tickRotation,
-    tickValues,
-    ticks,
-    type,
-    y2Axis,
-    y2Scale
-  ]);
-  if (y2Axis.hideAxis)
-    return null;
-  return /* @__PURE__ */ jsxs("g", { transform: `translate(${innerWidth},0)`, children: [
-    /* @__PURE__ */ jsx("g", { mask: `url(#mask-${chartId})`, children: /* @__PURE__ */ jsx(StyledGrid, { ref: gridRef }) }),
-    /* @__PURE__ */ jsx("g", { ref: setAxisRightRef, children: /* @__PURE__ */ jsx(StyledAxis, { axisColor, ref, tickColor, className: "axis-right" }) })
-  ] });
-};
+    );
+  }, [GridRenderer, TickRenderer, axisColor, innerHeight, innerWidth, setAxisRightRef, y2Axis?.hideAxis, y2Scale]);
+});
 export {
   AxisRight
 };