@elliemae/ds-dataviz 3.14.4 → 3.14.7

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

@@ -29,70 +29,100 @@ __export(AxisLeft_exports, {
 module.exports = __toCommonJS(AxisLeft_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_d3 = require("d3");
-var import_styles = require("../../styles");
+var import_react = __toESM(require("react"));
 var import_ChartContext = require("../../ChartContext");
-var import_helpers = require("../../helpers");
-const AxisLeft = () => {
+var import_Axis = require("./Axis");
+var import_Tick = require("./Tick");
+var import_GridLine = require("./GridLine");
+var import_colorPallet = require("../../helpers/colorPallet");
+const AxisLeft = import_react.default.memo(() => {
   const {
     props: { yAxis },
     innerHeight,
-    innerWidth,
-    yScale,
-    chartId,
     height,
+    yScale,
+    innerWidth,
     setAxisLeftRef
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const ref = (0, import_react.useRef)(null);
-  const gridRef = (0, import_react.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;
-  (0, import_react.useEffect)(() => {
-    const axis = (0, import_d3.axisLeft)(yScale).tickSizeOuter(0);
-    const grid = (0, import_d3.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 = (0, import_helpers.getFormatGenerator)(type ?? "linear");
-        axis.tickFormat((d) => formatGenerator(tickFormat)(d));
-      }
-      if (typeof tickFormat === "function") {
-        axis.tickFormat(tickFormat);
+  const { tickRotation } = yAxis.tick || {};
+  const { showGrid } = yAxis;
+  const textProps = (0, import_react.useMemo)(() => {
+    const commomProps = { fill: import_colorPallet.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 = (0, import_react.useMemo)(
+    () => ({
+      textAnchor: "end"
+    }),
+    []
+  );
+  const GridRenderer = (0, import_react.useCallback)(
+    (props) => {
+      if (!showGrid)
+        return null;
+      const { position, ...rest } = props;
+      const gridLineCoords = {
+        x1: 0,
+        x2: innerWidth,
+        y1: position,
+        y2: position
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GridLine.GridLine, { ...gridLineCoords, ...rest });
+    },
+    [showGrid, innerWidth]
+  );
+  const TickRenderer = (0, import_react.useCallback)(
+    (props) => {
+      const { position, tickValue, ...rest } = props;
+      const tickLineCoords = {
+        x2: -5,
+        stroke: import_colorPallet.COLOR_PALLET[yAxis?.tick?.color] || yAxis?.tick?.color
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Tick.Tick,
+        {
+          ...tickLineCoords,
+          xTranslate: 0,
+          yTranslate: position,
+          textProps,
+          textStyle: style,
+          tickValue: yScale.getTickFormatted(tickValue),
+          ...rest
+        }
+      );
+    },
+    [style, textProps, yAxis?.tick?.color, yScale]
+  );
+  const axisColor = (0, import_react.useMemo)(() => import_colorPallet.COLOR_PALLET[yAxis.color] || yAxis.color, [yAxis.color]);
+  return (0, import_react.useMemo)(() => {
+    if (yAxis.hideAxis)
+      return null;
+    const lineCoords = {
+      x1: 0,
+      x2: 0,
+      y1: 0,
+      y2: innerHeight
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Axis.Axis,
+      {
+        lineCoords,
+        scale: yScale,
+        innerRef: setAxisLeftRef,
+        dimension: height,
+        GridRenderer,
+        TickRenderer,
+        color: axisColor
       }
-    }
-    if (ref?.current && gridRef?.current) {
-      (0, import_d3.select)(gridRef.current).call(grid);
-      const axisNode = (0, import_d3.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__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { mask: `url(#mask-${chartId})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, { ref: gridRef }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: setAxisLeftRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, { axisColor, ref, tickColor, className: "axis-left" }) })
-  ] });
-};
+    );
+  }, [GridRenderer, TickRenderer, axisColor, height, innerHeight, setAxisLeftRef, yAxis.hideAxis, yScale]);
+});
 //# sourceMappingURL=AxisLeft.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisLeft.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkFnB;AAhFJ,mBAAqD;AACrD,gBAAiC;AACjC,oBAAuC;AACvC,0BAA6B;AAC7B,qBAAmC;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,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAsB,IAAI;AACtC,QAAM,cAAU,qBAAsB,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,8BAAU,MAAM;AACd,UAAM,WAAO,oBAAS,MAAM,EAAE,cAAc,CAAC;AAE7C,UAAM,WAAO,oBAAS,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,sBAAkB,mCAAmB,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,4BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,eAAW,kBAAO,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,6CAAC,OACC;AAAA,gDAAC,OAAE,MAAM,aAAa,YACpB,sDAAC,4BAAW,KAAK,SAAS,GAC5B;AAAA,IACA,4CAAC,OAAE,KAAK,gBACN,sDAAC,4BAAW,WAAsB,KAAU,WAAsB,WAAU,aAAY,GAC1F;AAAA,KACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDV;AAlDb,mBAA4E;AAC5E,0BAA6B;AAE7B,kBAAmE;AACnE,kBAAqB;AACrB,sBAAyB;AACzB,yBAA6B;AAEtB,MAAM,WAAW,aAAAA,QAAM,KAAK,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,EAAE,aAAa,IAAI,MAAM,QAAS,CAAC;AACzC,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,UAAM,cAAc,EAAE,MAAM,gCAAa,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,YAAuB;AAAA,IAC3B,OAAO;AAAA,MACL,YAAY;AAAA,IACd;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,mBAAe;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,4CAAC,4BAAU,GAAG,gBAAiB,GAAG,MAAM;AAAA,IACjD;AAAA,IACA,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,YAAM,EAAE,UAAU,cAAc,KAAK,IAAI;AACzC,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,QAAQ,gCAAa,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,gBAAY,sBAAQ,MAAM,gCAAa,MAAM,UAAuC,MAAM,OAAO,CAAC,MAAM,KAAK,CAAC;AAEpH,aAAO,sBAAQ,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/cjs/graphs/Chart/parts/Axis/AxisRight.js

@@ -29,68 +29,103 @@ __export(AxisRight_exports, {
 module.exports = __toCommonJS(AxisRight_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_d3 = require("d3");
-var import_styles = require("../../styles");
+var import_react = __toESM(require("react"));
 var import_ChartContext = require("../../ChartContext");
-var import_helpers = require("../../helpers");
-const AxisRight = () => {
+var import_Axis = require("./Axis");
+var import_Tick = require("./Tick");
+var import_GridLine = require("./GridLine");
+var import_colorPallet = require("../../helpers/colorPallet");
+const AxisRight = import_react.default.memo(() => {
   const {
     props: { y2Axis },
     innerHeight,
-    innerWidth,
     y2Scale,
-    chartId,
-    height,
+    innerWidth,
     setAxisRightRef
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const ref = (0, import_react.useRef)(null);
-  const gridRef = (0, import_react.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;
-  (0, import_react.useEffect)(() => {
-    const axis = (0, import_d3.axisRight)(y2Scale).tickSizeOuter(0);
-    const grid = (0, import_d3.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 = (0, import_helpers.getFormatGenerator)(type ?? "linear");
-        axis.tickFormat((d) => formatGenerator(tickFormat)(d));
+  const { tickRotation } = y2Axis?.tick || {};
+  const { showGrid } = y2Axis;
+  const textProps = (0, import_react.useMemo)(() => {
+    const commomProps = { fill: import_colorPallet.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 = (0, import_react.useMemo)(() => {
+    if (!tickRotation)
+      return {
+        textAnchor: "start"
+      };
+    return { textAnchor: tickRotation > 0 ? "start" : "end" };
+  }, [tickRotation]);
+  const GridRenderer = (0, import_react.useCallback)(
+    (props) => {
+      if (!showGrid)
+        return null;
+      const { position, ...rest } = props;
+      const gridLineCoords = {
+        x1: 0,
+        x2: innerWidth,
+        y1: position,
+        y2: position
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GridLine.GridLine, { ...gridLineCoords, ...rest });
+    },
+    [innerWidth, showGrid]
+  );
+  const TickRenderer = (0, import_react.useCallback)(
+    (props) => {
+      const { position, tickValue, ...rest } = props;
+      const tickLineCoords = {
+        x2: 5,
+        stroke: import_colorPallet.COLOR_PALLET[y2Axis?.tick?.color] || y2Axis?.tick?.color
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Tick.Tick,
+        {
+          ...tickLineCoords,
+          yTranslate: position,
+          xTranslate: innerWidth,
+          textProps,
+          textStyle: style,
+          tickValue: y2Scale.getTickFormatted(tickValue),
+          ...rest
+        }
+      );
+    },
+    [innerWidth, style, textProps, y2Axis?.tick?.color, y2Scale]
+  );
+  const axisColor = (0, import_react.useMemo)(
+    () => import_colorPallet.COLOR_PALLET[y2Axis.color] || y2Axis.color,
+    [y2Axis.color]
+  );
+  return (0, import_react.useMemo)(() => {
+    if (y2Axis?.hideAxis)
+      return null;
+    const lineCoords = {
+      x1: innerWidth,
+      x2: innerWidth,
+      y1: 0,
+      y2: innerHeight
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Axis.Axis,
+      {
+        lineCoords,
+        scale: y2Scale,
+        innerRef: setAxisRightRef,
+        dimension: innerHeight,
+        GridRenderer,
+        TickRenderer,
+        color: axisColor
       }
-      if (typeof tickFormat === "function") {
-        axis.tickFormat(tickFormat);
-      }
-    }
-    if (ref?.current && gridRef?.current) {
-      (0, import_d3.select)(gridRef.current).call(grid);
-      const axisNode = (0, import_d3.select)(ref.current);
-      axisNode.call(axis);
-    }
-  }, [
-    innerHeight,
-    innerWidth,
-    overwriteTicks,
-    showGrid,
-    tickFormat,
-    tickRotation,
-    tickValues,
-    ticks,
-    type,
-    y2Axis,
-    y2Scale
-  ]);
-  if (y2Axis.hideAxis)
-    return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${innerWidth},0)`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { mask: `url(#mask-${chartId})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, { ref: gridRef }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: setAxisRightRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, { axisColor, ref, tickColor, className: "axis-right" }) })
-  ] });
-};
+    );
+  }, [GridRenderer, TickRenderer, axisColor, innerHeight, innerWidth, setAxisRightRef, y2Axis?.hideAxis, y2Scale]);
+});
 //# sourceMappingURL=AxisRight.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisRight.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisRight } from 'd3';\nimport { StyledAxis, StyledGrid } from '../../styles';\nimport { ChartContext } from '../../ChartContext';\nimport { getFormatGenerator } from '../../helpers';\n\nexport const AxisRight = () => {\n  const {\n    props: { y2Axis },\n    innerHeight,\n    innerWidth,\n    y2Scale,\n    chartId,\n    height,\n    setAxisRightRef,\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 } = y2Axis.tick || {};\n\n  const ticks = y2Scale.ticks?.(tickCount ?? height / 80);\n\n  const { type, showGrid, color: axisColor } = y2Axis;\n\n  useEffect(() => {\n    const axis = axisRight(y2Scale).tickSizeOuter(0);\n\n    const grid = axisRight(y2Scale)\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    }\n  }, [\n    innerHeight,\n    innerWidth,\n    overwriteTicks,\n    showGrid,\n    tickFormat,\n    tickRotation,\n    tickValues,\n    ticks,\n    type,\n    y2Axis,\n    y2Scale,\n  ]);\n\n  if (y2Axis.hideAxis) return null;\n\n  return (\n    <g transform={`translate(${innerWidth},0)`}>\n      <g mask={`url(#mask-${chartId})`}>\n        <StyledGrid ref={gridRef}></StyledGrid>\n      </g>\n      <g ref={setAxisRightRef}>\n        <StyledAxis axisColor={axisColor} ref={ref} tickColor={tickColor} className=\"axis-right\"></StyledAxis>\n      </g>\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2EnB;AAzEJ,mBAAqD;AACrD,gBAAkC;AAClC,oBAAuC;AACvC,0BAA6B;AAC7B,qBAAmC;AAE5B,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAsB,IAAI;AACtC,QAAM,cAAU,qBAAsB,IAAI;AAC1C,QAAM,EAAE,YAAY,OAAO,WAAW,YAAY,gBAAgB,cAAc,UAAU,IAAI,OAAO,QAAQ,CAAC;AAE9G,QAAM,QAAQ,QAAQ,QAAQ,aAAa,SAAS,EAAE;AAEtD,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,IAAI;AAE7C,8BAAU,MAAM;AACd,UAAM,WAAO,qBAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,UAAM,WAAO,qBAAU,OAAO,EAC3B,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,sBAAkB,mCAAmB,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,4BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,YAAM,eAAW,kBAAO,IAAI,OAAO;AACnC,eAAS,KAAK,IAAI;AAAA,IACpB;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,OAAO;AAAU,WAAO;AAE5B,SACE,6CAAC,OAAE,WAAW,aAAa,iBACzB;AAAA,gDAAC,OAAE,MAAM,aAAa,YACpB,sDAAC,4BAAW,KAAK,SAAS,GAC5B;AAAA,IACA,4CAAC,OAAE,KAAK,iBACN,sDAAC,4BAAW,WAAsB,KAAU,WAAsB,WAAU,cAAa,GAC3F;AAAA,KACF;AAEJ;",
-  "names": []
+  "sourcesContent": ["/* 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 AxisRight = React.memo(() => {\n  const {\n    props: { y2Axis },\n    innerHeight,\n    y2Scale,\n    innerWidth,\n    setAxisRightRef,\n  } = useContext(ChartContext);\n\n  const { tickRotation } = y2Axis?.tick || ({} as DSChartT.AxisTickT);\n  const { showGrid } = y2Axis;\n  const textProps = useMemo(() => {\n    const commomProps = { fill: COLOR_PALLET[y2Axis?.tick?.color as keyof typeof COLOR_PALLET] || y2Axis?.tick?.color };\n\n    if (!tickRotation) return { ...commomProps, x: 10, dy: '0.32em' };\n    return {\n      ...commomProps,\n      dx: 8 * Math.sin(Math.PI * (tickRotation / 180)),\n      dy: '.71em',\n      y: 11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1),\n      transform: `rotate(${tickRotation})`,\n    };\n  }, [tickRotation, y2Axis?.tick?.color]);\n\n  const style: CSSProperties = useMemo(() => {\n    if (!tickRotation)\n      return {\n        textAnchor: 'start',\n      };\n    return { textAnchor: tickRotation > 0 ? 'start' : 'end' };\n  }, [tickRotation]);\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    [innerWidth, showGrid],\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[y2Axis?.tick?.color as keyof typeof COLOR_PALLET] || y2Axis?.tick?.color,\n      };\n      return (\n        <Tick\n          {...tickLineCoords}\n          yTranslate={position}\n          xTranslate={innerWidth}\n          textProps={textProps}\n          textStyle={style}\n          tickValue={y2Scale.getTickFormatted(tickValue)}\n          {...rest}\n        />\n      );\n    },\n    [innerWidth, style, textProps, y2Axis?.tick?.color, y2Scale],\n  );\n\n  const axisColor = useMemo(\n    () => COLOR_PALLET[y2Axis.color as keyof typeof COLOR_PALLET] || y2Axis.color,\n    [y2Axis.color],\n  );\n\n  return useMemo(() => {\n    if (y2Axis?.hideAxis) return null;\n    const lineCoords = {\n      x1: innerWidth,\n      x2: innerWidth,\n      y1: 0,\n      y2: innerHeight,\n    };\n\n    return (\n      <Axis\n        lineCoords={lineCoords}\n        scale={y2Scale}\n        innerRef={setAxisRightRef}\n        dimension={innerHeight}\n        GridRenderer={GridRenderer}\n        TickRenderer={TickRenderer}\n        color={axisColor}\n      />\n    );\n  }, [GridRenderer, TickRenderer, axisColor, innerHeight, innerWidth, setAxisRightRef, y2Axis?.hideAxis, y2Scale]);\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDV;AAlDb,mBAA4E;AAC5E,0BAA6B;AAE7B,kBAAmE;AACnE,kBAAqB;AACrB,sBAAyB;AACzB,yBAA6B;AAEtB,MAAM,YAAY,aAAAA,QAAM,KAAK,MAAM;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,EAAE,aAAa,IAAI,QAAQ,QAAS,CAAC;AAC3C,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,UAAM,cAAc,EAAE,MAAM,gCAAa,QAAQ,MAAM,UAAuC,QAAQ,MAAM,MAAM;AAElH,QAAI,CAAC;AAAc,aAAO,EAAE,GAAG,aAAa,GAAG,IAAI,IAAI,SAAS;AAChE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,IAAI,IAAI,KAAK,IAAI,KAAK,MAAM,eAAe,IAAI;AAAA,MAC/C,IAAI;AAAA,MACJ,GAAG,OAAO,OAAO,eAAe,OAAO,eAAe,IAAI,IAAI;AAAA,MAC9D,WAAW,UAAU;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,cAAc,QAAQ,MAAM,KAAK,CAAC;AAEtC,QAAM,YAAuB,sBAAQ,MAAM;AACzC,QAAI,CAAC;AACH,aAAO;AAAA,QACL,YAAY;AAAA,MACd;AACF,WAAO,EAAE,YAAY,eAAe,IAAI,UAAU,MAAM;AAAA,EAC1D,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,mBAAe;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,4CAAC,4BAAU,GAAG,gBAAiB,GAAG,MAAM;AAAA,IACjD;AAAA,IACA,CAAC,YAAY,QAAQ;AAAA,EACvB;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,YAAM,EAAE,UAAU,cAAc,KAAK,IAAI;AACzC,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,QAAQ,gCAAa,QAAQ,MAAM,UAAuC,QAAQ,MAAM;AAAA,MAC1F;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ;AAAA,UACA,WAAW;AAAA,UACX,WAAW,QAAQ,iBAAiB,SAAS;AAAA,UAC5C,GAAG;AAAA;AAAA,MACN;AAAA,IAEJ;AAAA,IACA,CAAC,YAAY,OAAO,WAAW,QAAQ,MAAM,OAAO,OAAO;AAAA,EAC7D;AAEA,QAAM,gBAAY;AAAA,IAChB,MAAM,gCAAa,OAAO,UAAuC,OAAO;AAAA,IACxE,CAAC,OAAO,KAAK;AAAA,EACf;AAEA,aAAO,sBAAQ,MAAM;AACnB,QAAI,QAAQ;AAAU,aAAO;AAC7B,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,aAAa,YAAY,iBAAiB,QAAQ,UAAU,OAAO,CAAC;AACjH,CAAC;",
+  "names": ["React"]
 }

package/dist/cjs/graphs/Chart/parts/{Labels/BottomLabel.js → Axis/GridLine.js}

@@ -22,32 +22,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var BottomLabel_exports = {};
-__export(BottomLabel_exports, {
-  BottomLabel: () => BottomLabel
+var GridLine_exports = {};
+__export(GridLine_exports, {
+  GridLine: () => GridLine
 });
-module.exports = __toCommonJS(BottomLabel_exports);
+module.exports = __toCommonJS(GridLine_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ChartContext = require("../../ChartContext");
-var import_styles = require("../../styles");
-const BottomLabel = () => {
-  const {
-    internalMargin,
-    setBottomLabel,
-    innerHeight,
-    innerWidth,
-    axisBottomHeight,
-    props: { xAxis }
-  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "g",
-    {
-      ref: setBottomLabel,
-      transform: `translate(${innerWidth / 2 + internalMargin.left},${innerHeight + axisBottomHeight + internalMargin.top})`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxisLabel, { className: "axis-label", textAnchor: "middle", children: xAxis?.label })
-    }
-  );
-};
-//# sourceMappingURL=BottomLabel.js.map
+var import_react = __toESM(require("react"));
+const GridLine = import_react.default.memo(({ x1 = 0, y1 = 0, x2 = 0, y2 = 0 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1, x2, y1, y2, stroke: "black", style: { opacity: 0.2 } }));
+//# sourceMappingURL=GridLine.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/parts/Axis/GridLine.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\n\ninterface GridLineT {\n  x1?: number;\n  y1?: number;\n  x2?: number;\n  y2?: number;\n}\nexport const GridLine: React.ComponentType<GridLineT> = React.memo(({ x1 = 0, y1 = 0, x2 = 0, y2 = 0 }) => (\n  <line x1={x1} x2={x2} y1={y1} y2={y2} stroke=\"black\" style={{ opacity: 0.2 }} />\n));\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADSrB;AATF,mBAAkB;AAQX,MAAM,WAA2C,aAAAA,QAAM,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,MACnG,4CAAC,UAAK,IAAQ,IAAQ,IAAQ,IAAQ,QAAO,SAAQ,OAAO,EAAE,SAAS,IAAI,GAAG,CAC/E;",
+  "names": ["React"]
+}

package/dist/cjs/graphs/Chart/parts/{Labels/LeftLabel.js → Axis/Tick.js}

@@ -22,31 +22,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var LeftLabel_exports = {};
-__export(LeftLabel_exports, {
-  LeftLabel: () => LeftLabel
+var Tick_exports = {};
+__export(Tick_exports, {
+  Tick: () => Tick
 });
-module.exports = __toCommonJS(LeftLabel_exports);
+module.exports = __toCommonJS(Tick_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ChartContext = require("../../ChartContext");
-var import_styles = require("../../styles");
-const LeftLabel = () => {
-  const {
-    innerHeight,
-    internalMargin,
-    setLeftLabel,
-    leftLegendWidth,
-    leftLabelWidth,
-    props: { yAxis }
-  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: setLeftLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "g",
-    {
-      transform: `translate(${leftLegendWidth + leftLabelWidth},${innerHeight / 2 + internalMargin.top}) rotate(-90)`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxisLabel, { className: "axis-label", textAnchor: "middle", children: yAxis?.label })
-    }
-  ) });
-};
-//# sourceMappingURL=LeftLabel.js.map
+var import_react = __toESM(require("react"));
+const Tick = import_react.default.memo(
+  ({ tickValue, stroke, textProps, xTranslate = 0, yTranslate = 0, textStyle, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${xTranslate},${yTranslate})`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { ...rest, stroke: stroke || "black" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { fill: "black", ...textProps, style: textStyle, children: tickValue.toString() })
+  ] })
+);
+//# sourceMappingURL=Tick.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/graphs/Chart/parts/Axis/Tick.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { type SVGAttributes, type CSSProperties } from 'react';\n\nexport interface TickT {\n  xTranslate?: number;\n  yTranslate?: number;\n  x1?: number;\n  y1?: number;\n  x2?: number;\n  y2?: number;\n  size?: number;\n  stroke?: string;\n  tickValue: string | number | Date;\n  textProps: Partial<SVGAttributes<SVGTextElement>>;\n  textStyle: CSSProperties;\n}\nexport const Tick: React.ComponentType<TickT> = React.memo(\n  ({ tickValue, stroke, textProps, xTranslate = 0, yTranslate = 0, textStyle, ...rest }) => (\n    <g transform={`translate(${xTranslate},${yTranslate})`}>\n      <line {...rest} stroke={stroke || 'black'} />\n      <text fill=\"black\" {...textProps} style={textStyle}>\n        {tickValue.toString()}\n      </text>\n    </g>\n  ),\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBnB;AAjBJ,mBAA8D;AAevD,MAAM,OAAmC,aAAAA,QAAM;AAAA,EACpD,CAAC,EAAE,WAAW,QAAQ,WAAW,aAAa,GAAG,aAAa,GAAG,cAAc,KAAK,MAClF,6CAAC,OAAE,WAAW,aAAa,cAAc,eACvC;AAAA,gDAAC,UAAM,GAAG,MAAM,QAAQ,UAAU,SAAS;AAAA,IAC3C,4CAAC,UAAK,MAAK,SAAS,GAAG,WAAW,OAAO,WACtC,oBAAU,SAAS,GACtB;AAAA,KACF;AAEJ;",
+  "names": ["React"]
+}

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

@@ -34,7 +34,7 @@ var import_styles = require("../styles");
 var import_ChartContext = require("../ChartContext");
 var import_useKeyboardNavigation = require("../config/useKeyboardNavigation");
 var import_Legend = require("./Legend/Legend");
-var import_Label = require("./Labels/Label");
+var import_Labels = require("./Labels");
 var import_BlurMask = require("./Scroller/BlurMask");
 var import_ClipPaths = require("./ClipPaths");
 var import_ScrollableContainerX = require("./Scroller/ScrollableContainerX");
@@ -192,7 +192,7 @@ const ChartContainer = () => {
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Controllers.Controllers, {}),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Legend.Legend, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.Label, {})
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Labels.Labels, {})
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "container", transform: `translate(${internalMargin.left},${internalMargin.top})`, children: render })
         ] })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/parts/ChartContainer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, 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 { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n  const {\n    props: { y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastPosition,\n    setIsScrollbarVisible,\n    currentData,\n    setStartPosition,\n    width,\n    height,\n  } = useContext(ChartContext);\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  // const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n  const { onInputKeyDown, handleOnKeyUp, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n    setActivePoint(null);\n  }, [setActivePoint, setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleOnTouchStart: React.TouchEventHandler = useCallback(\n    (e) => {\n      e.stopPropagation();\n      setScrapperPosX('');\n      setIsGrabbed(true);\n      setStartPosition(e.touches[0].clientX);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosX, setStartPosition],\n  );\n  const handleOnTouchEnd = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [setIsGrabbed, xScrollbarPosition, lastPosition]);\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      e.preventDefault();\n      const clientX = e.clientX ?? e.touches[0].clientX;\n      const clientY = e.clientY ?? e.touches[0].clientY;\n\n      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastPosition?.current + 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 = lastPosition?.current + clientY - startPosition;\n\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      lastPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n  // const key = useMemo(\n  //   () => `${width},${internalMargin.left},${internalMargin.top},${internalMargin.right},${internalMargin.bottom}`,\n  //   [internalMargin, width],\n  // );\n\n  const render = useMemo(() => {\n    if (currentData.length === 0) return null;\n    if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    }\n    if (yScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisBottom />\n          <ScrollableContainerY />\n        </>\n      );\n    }\n    return (\n      <>\n        {y2Axis ? <AxisRight /> : null}\n        <AxisLeft />\n        <AxisBottom />\n        <SeriesFactory />\n        {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n        {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n      </>\n    );\n  }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);\n  return (\n    <StyledSVGWrapper\n      ref={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      onKeyUp={handleOnKeyUp}\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onTouchMove={handleMouseMove}\n      onTouchStart={handleOnTouchStart}\n      onTouchEnd={handleOnTouchEnd}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: userWidth, height }}\n    >\n      {width !== 0 ? (\n        <svg ref={svgRef} width={width} height={height}>\n          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n          <ClipPaths />\n          <BlurMask />\n          <g>\n            <g>\n              <Controllers />\n              <Legend />\n              <Label />\n            </g>\n            <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n              {render}\n              {/* <ActivePoint/> @todo */}\n            </g>\n          </g>\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useContext, useMemo, useCallback } from 'react';\nimport { StyledSVGWrapper } from '../styles';\n\nimport { ChartContext } from '../ChartContext';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { Legend } from './Legend/Legend';\nimport { Labels } from './Labels';\nimport { BlurMask } from './Scroller/BlurMask';\nimport { ClipPaths } from './ClipPaths';\nimport { ScrollableContainerX } from './Scroller/ScrollableContainerX';\nimport { ScrollableContainerY } from './Scroller/ScrollableContainerY';\n\nimport { AxisBottom } from './Axis/AxisBottom';\nimport { AxisRight } from './Axis/AxisRight';\nimport { AxisLeft } from './Axis/AxisLeft';\nimport { SeriesFactory } from './SeriesFactory';\nimport { Scrapper } from './Scrapper/Scrapper';\nimport { VerticalScrapper } from './Scrapper/VerticalScrapper';\nimport { Controllers } from './Scroller/Controllers';\nexport const ChartContainer = () => {\n  const {\n    props: { y2Axis, yScroll, xScroll, scrapper, xAxis, width: userWidth },\n    activePoint,\n    internalMargin,\n    setScrapperPosY,\n    setScrapperPosX,\n    setContainerRef,\n    svgRef,\n    isGrabbed,\n    setIsGrabbed,\n    startPosition,\n    innerWidth,\n    innerHeight,\n    setActivePoint,\n    setXScrollbarPosition,\n    xScrollbarPosition,\n    containerRatio,\n    lastPosition,\n    setIsScrollbarVisible,\n    currentData,\n    setStartPosition,\n    width,\n    height,\n  } = useContext(ChartContext);\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  // const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n  const { onInputKeyDown, handleOnKeyUp, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  const onMouseEnterHandler = useCallback(() => {\n    setIsScrollbarVisible(true);\n    setActivePoint(null);\n  }, [setActivePoint, setIsScrollbarVisible]);\n  const onMouseLeaveHandler = useCallback(() => {\n    setScrapperPosY('');\n    setScrapperPosX('');\n    setIsScrollbarVisible(false);\n    setIsGrabbed(false);\n  }, [setIsGrabbed, setIsScrollbarVisible, setScrapperPosX, setScrapperPosY]);\n\n  const handleOnTouchStart: React.TouchEventHandler = useCallback(\n    (e) => {\n      e.stopPropagation();\n      setScrapperPosX('');\n      setIsGrabbed(true);\n      setStartPosition(e.touches[0].clientX);\n      e.preventDefault();\n    },\n    [setIsGrabbed, setScrapperPosX, setStartPosition],\n  );\n  const handleOnTouchEnd = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [setIsGrabbed, xScrollbarPosition, lastPosition]);\n  const handleMouseMove: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (!isGrabbed) return;\n      e.preventDefault();\n      const clientX = e.clientX ?? e.touches[0].clientX;\n      const clientY = e.clientY ?? e.touches[0].clientY;\n\n      setActivePoint(null);\n      if (xScroll) {\n        const newPosition = lastPosition?.current + 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 = lastPosition?.current + clientY - startPosition;\n\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      lastPosition,\n      startPosition,\n      setXScrollbarPosition,\n      innerWidth,\n      containerRatio,\n      innerHeight,\n    ],\n  );\n  const handleMouseUp = useCallback(() => {\n    lastPosition.current = xScrollbarPosition;\n    setIsGrabbed(false);\n  }, [lastPosition, setIsGrabbed, xScrollbarPosition]);\n\n  const render = useMemo(() => {\n    if (currentData.length === 0) return null;\n    if (xScroll || xAxis.advanced?.pointSpacing?.value > 1) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisLeft />\n          <ScrollableContainerX />\n        </>\n      );\n    }\n    if (yScroll) {\n      return (\n        <>\n          {y2Axis ? <AxisRight /> : null}\n          <AxisBottom />\n          <ScrollableContainerY />\n        </>\n      );\n    }\n    return (\n      <>\n        {y2Axis ? <AxisRight /> : null}\n        <AxisLeft />\n        <AxisBottom />\n        <SeriesFactory />\n        {scrapper?.type === 'horizontal' ? <Scrapper /> : null}\n        {scrapper?.type === 'vertical' ? <VerticalScrapper /> : null}\n      </>\n    );\n  }, [currentData.length, scrapper?.type, xAxis.advanced?.pointSpacing?.value, xScroll, y2Axis, yScroll]);\n  return (\n    <StyledSVGWrapper\n      ref={setContainerRef}\n      onKeyDown={onInputKeyDown}\n      onKeyUp={handleOnKeyUp}\n      tabIndex={activePoint ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onTouchMove={handleMouseMove}\n      onTouchStart={handleOnTouchStart}\n      onTouchEnd={handleOnTouchEnd}\n      onMouseEnter={onMouseEnterHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      onMouseMove={handleMouseMove}\n      onMouseUp={handleMouseUp}\n      onMouseDown={(e) => e.preventDefault()}\n      isGrabbed={isGrabbed}\n      style={{ width: userWidth, height }}\n    >\n      {width !== 0 ? (\n        <svg ref={svgRef} width={width} height={height}>\n          {/* this clipaths for animations and focus ring.. need to give a deeper look */}\n          <ClipPaths />\n          <BlurMask />\n          <g>\n            <g>\n              <Controllers />\n              <Legend />\n              <Labels />\n            </g>\n            <g className=\"container\" transform={`translate(${internalMargin.left},${internalMargin.top})`}>\n              {render}\n              {/* <ActivePoint/> @todo */}\n            </g>\n          </g>\n        </svg>\n      ) : null}\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -29,22 +29,7 @@ __export(Label_exports, {
 module.exports = __toCommonJS(Label_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ChartContext = require("../../ChartContext");
-var import_RightLabel = require("./RightLabel");
-var import_LeftLabel = require("./LeftLabel");
-var import_BottomLabel = require("./BottomLabel");
-const Label = () => {
-  const {
-    props: { xAxis, yAxis, y2Axis }
-  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  return (0, import_react.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-      y2Axis?.label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RightLabel.RightLabel, {}) : "",
-      yAxis?.label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LeftLabel.LeftLabel, {}) : "",
-      xAxis?.label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BottomLabel.BottomLabel, {}) : ""
-    ] }),
-    [xAxis?.label, y2Axis?.label, yAxis?.label]
-  );
-};
+var import_react = __toESM(require("react"));
+var import_styles = require("../../styles");
+const Label = import_react.default.memo(({ innerRef, x, y, label, rotateDegrees = 0 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref: innerRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: `translate(${x},${y}) rotate(${rotateDegrees})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxisLabel, { className: "axis-label", textAnchor: "middle", children: label }) }) }));
 //# sourceMappingURL=Label.js.map