@elliemae/ds-dataviz 3.14.3 → 3.14.6

package/dist/cjs/graphs/Chart/series/Bars.js

@@ -36,15 +36,18 @@ var import_A11yRegion = require("../parts/A11yRegion");
 const Bars = ({ serie }) => {
   const { innerHeight, xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
-  const negativeSize = innerHeight - finalYScale(0);
+  const negativeSize = innerHeight - finalYScale.get(0);
   const positiveSize = innerHeight - negativeSize;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_A11yRegion.A11yRegion, { serieName: serie.name, clipPath: `url(#rect-focus-ring-${chartId})`, fill: colorScale(serie.name), children: serie.data.map((bar) => {
     const x = getXValue(bar);
     const y = getYValue(bar);
     const width = subGroupScale?.bandwidth();
-    const height = parseInt(y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0), 10);
-    const transformX = !xScale.bandwidth ? xScale(x) - width / 2 : subGroupScale(serie.name) + xScale(x);
-    const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);
+    const height = parseInt(
+      y > 0 ? positiveSize - finalYScale.get(y) : finalYScale.get(y) - finalYScale.get(0),
+      10
+    );
+    const transformX = xScale.type !== "BAND" ? xScale.get(x) - width / 2 : subGroupScale(serie.name) + xScale.get(x);
+    const transformY = y > 0 ? finalYScale.get(0) - height : finalYScale.get(0);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: `${serie.name}-rects-${bar.key}`, transform: `translate(${transformX},0)`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Rect.Rect,
       {

package/dist/cjs/graphs/Chart/series/Bars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Bars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { A11yRegion } from '../parts/A11yRegion';\nexport const Bars = ({ serie }) => {\n  const { innerHeight, xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } =\n    useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerHeight - finalYScale(0);\n  const positiveSize = innerHeight - negativeSize;\n\n  return (\n    <A11yRegion serieName={serie.name} clipPath={`url(#rect-focus-ring-${chartId})`} fill={colorScale(serie.name)}>\n      {serie.data.map((bar) => {\n        const x = getXValue(bar);\n        const y = getYValue(bar);\n\n        const width = subGroupScale?.bandwidth();\n        const height = parseInt(y > 0 ? positiveSize - finalYScale(y) : finalYScale(y) - finalYScale(0), 10);\n        const transformX = !xScale.bandwidth\n          ? xScale(x) - width / 2\n          : // ? subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0)\n            subGroupScale(serie.name) + xScale(x);\n\n        const transformY = y > 0 ? finalYScale(0) - height : finalYScale(0);\n\n        return (\n          <g id={`${serie.name}-rects-${bar.key}`} key={bar.key} transform={`translate(${transformX},0)`}>\n            <Rect\n              name={serie.name}\n              xValue={x}\n              yValue={y}\n              width={width}\n              height={height}\n              id={bar.key}\n              y={transformY}\n              isNegative={y < 0}\n              datum={bar}\n            />\n          </g>\n        );\n      })}\n    </A11yRegion>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BX;AA7BZ,mBAAkC;AAClC,kBAAqB;AACrB,0BAA6B;AAC7B,wBAA2B;AACpB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,aAAa,QAAQ,QAAQ,SAAS,eAAe,YAAY,WAAW,WAAW,QAAQ,QACrG,yBAAW,gCAAY;AACzB,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,CAAC;AAChD,QAAM,eAAe,cAAc;AAEnC,SACE,4CAAC,gCAAW,WAAW,MAAM,MAAM,UAAU,wBAAwB,YAAY,MAAM,WAAW,MAAM,IAAI,GACzG,gBAAM,KAAK,IAAI,CAAC,QAAQ;AACvB,UAAM,IAAI,UAAU,GAAG;AACvB,UAAM,IAAI,UAAU,GAAG;AAEvB,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,SAAS,IAAI,IAAI,eAAe,YAAY,CAAC,IAAI,YAAY,CAAC,IAAI,YAAY,CAAC,GAAG,EAAE;AACnG,UAAM,aAAa,CAAC,OAAO,YACvB,OAAO,CAAC,IAAI,QAAQ,IAEpB,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC;AAExC,UAAM,aAAa,IAAI,IAAI,YAAY,CAAC,IAAI,SAAS,YAAY,CAAC;AAElE,WACE,4CAAC,OAAE,IAAI,GAAG,MAAM,cAAc,IAAI,OAAqB,WAAW,aAAa,iBAC7E;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,IAAI,IAAI;AAAA,QACR,GAAG;AAAA,QACH,YAAY,IAAI;AAAA,QAChB,OAAO;AAAA;AAAA,IACT,KAX4C,IAAI,GAYlD;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { A11yRegion } from '../parts/A11yRegion';\nexport const Bars = ({ serie }) => {\n  const { innerHeight, xScale, yScale, y2Scale, subGroupScale, colorScale, getXValue, getYValue, chartId } =\n    useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerHeight - finalYScale.get(0);\n  const positiveSize = innerHeight - negativeSize;\n\n  return (\n    <A11yRegion serieName={serie.name} clipPath={`url(#rect-focus-ring-${chartId})`} fill={colorScale(serie.name)}>\n      {serie.data.map((bar) => {\n        const x = getXValue(bar);\n        const y = getYValue(bar);\n\n        const width = subGroupScale?.bandwidth();\n        const height = parseInt(\n          y > 0 ? positiveSize - finalYScale.get(y) : finalYScale.get(y) - finalYScale.get(0),\n          10,\n        );\n        const transformX =\n          xScale.type !== 'BAND'\n            ? xScale.get(x) - width / 2\n            : // ? subGroupScale(serie.name) + xScale.get(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0)\n              subGroupScale(serie.name) + xScale.get(x);\n\n        const transformY = y > 0 ? finalYScale.get(0) - height : finalYScale.get(0);\n\n        return (\n          <g id={`${serie.name}-rects-${bar.key}`} key={bar.key} transform={`translate(${transformX},0)`}>\n            <Rect\n              name={serie.name}\n              xValue={x}\n              yValue={y}\n              width={width}\n              height={height}\n              id={bar.key}\n              y={transformY}\n              isNegative={y < 0}\n              datum={bar}\n            />\n          </g>\n        );\n      })}\n    </A11yRegion>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCX;AAjCZ,mBAAkC;AAClC,kBAAqB;AACrB,0BAA6B;AAC7B,wBAA2B;AACpB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,aAAa,QAAQ,QAAQ,SAAS,eAAe,YAAY,WAAW,WAAW,QAAQ,QACrG,yBAAW,gCAAY;AACzB,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,cAAc,YAAY,IAAI,CAAC;AACpD,QAAM,eAAe,cAAc;AAEnC,SACE,4CAAC,gCAAW,WAAW,MAAM,MAAM,UAAU,wBAAwB,YAAY,MAAM,WAAW,MAAM,IAAI,GACzG,gBAAM,KAAK,IAAI,CAAC,QAAQ;AACvB,UAAM,IAAI,UAAU,GAAG;AACvB,UAAM,IAAI,UAAU,GAAG;AAEvB,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS;AAAA,MACb,IAAI,IAAI,eAAe,YAAY,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC;AAAA,MAClF;AAAA,IACF;AACA,UAAM,aACJ,OAAO,SAAS,SACZ,OAAO,IAAI,CAAC,IAAI,QAAQ,IAExB,cAAc,MAAM,IAAI,IAAI,OAAO,IAAI,CAAC;AAE9C,UAAM,aAAa,IAAI,IAAI,YAAY,IAAI,CAAC,IAAI,SAAS,YAAY,IAAI,CAAC;AAE1E,WACE,4CAAC,OAAE,IAAI,GAAG,MAAM,cAAc,IAAI,OAAqB,WAAW,aAAa,iBAC7E;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM;AAAA,QACZ,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,IAAI,IAAI;AAAA,QACR,GAAG;AAAA,QACH,YAAY,IAAI;AAAA,QAChB,OAAO;AAAA;AAAA,IACT,KAX4C,IAAI,GAYlD;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/HorizontalBars.js

@@ -48,17 +48,17 @@ const HorizontalBars = ({ serie }) => {
     chartId
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
-  const negativeSize = innerWidth - xScale(0);
+  const negativeSize = innerWidth - xScale.get(0);
   const positiveSize = innerWidth - negativeSize;
   return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { fill: colorScale(serie.name), clipPath: `url(#rect-focus-ring-${chartId})`, children: serie.data.map((bar, i) => {
       const x = getXValue(bar);
       const y = getYValue(bar);
       const minX = beginAtZero ? 0 : xScale.invert(0);
-      const width = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(minX);
+      const width = x < 0 ? positiveSize - xScale.get(x) : xScale.get(x) - xScale.get(minX);
       const height = subGroupScale?.bandwidth();
-      const transformX = x < 0 ? xScale(0) - width : xScale(minX);
-      const transformY = subGroupScale(serie.name) + finalYScale(y);
+      const transformX = x < 0 ? xScale.get(0) - width : xScale.get(minX);
+      const transformY = subGroupScale(serie.name) + finalYScale.get(y);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { transform: `translate(${transformX},${transformY})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Rect.Rect,
         {

package/dist/cjs/graphs/Chart/series/HorizontalBars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/HorizontalBars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: {\n      xAxis: { beginAtZero },\n    },\n    xScale,\n    yScale,\n    innerWidth,\n    y2Scale,\n    subGroupScale,\n    colorScale,\n    getXValue,\n    getYValue,\n    chartId,\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerWidth - xScale(0);\n  const positiveSize = innerWidth - negativeSize;\n\n  return useMemo(\n    () => (\n      <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n        {serie.data.map((bar, i) => {\n          const x = getXValue(bar);\n          const y = getYValue(bar);\n          const minX = beginAtZero ? 0 : xScale.invert(0);\n          const width = x < 0 ? positiveSize - xScale(x) : xScale(x) - xScale(minX);\n          const height = subGroupScale?.bandwidth();\n          const transformX = x < 0 ? xScale(0) - width : xScale(minX);\n          const transformY = subGroupScale(serie.name) + finalYScale(y);\n\n          return (\n            <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n              <Rect\n                datum={bar}\n                name={serie.name}\n                width={width}\n                height={height}\n                id={bar.key}\n                x={0}\n                xValue={x}\n                yValue={y}\n              />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [\n      beginAtZero,\n      chartId,\n      colorScale,\n      finalYScale,\n      getXValue,\n      getYValue,\n      positiveSize,\n      serie.data,\n      serie.name,\n      subGroupScale,\n      xScale,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCT;AAvCd,mBAA2C;AAC3C,kBAAqB;AACrB,0BAA6B;AAGtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAgC;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL,OAAO,EAAE,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,aAAa,OAAO,CAAC;AAC1C,QAAM,eAAe,aAAa;AAElC,aAAO;AAAA,IACL,MACE,4CAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,UAAU,wBAAwB,YAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,OAAO,cAAc,IAAI,OAAO,OAAO,CAAC;AAC9C,YAAM,QAAQ,IAAI,IAAI,eAAe,OAAO,CAAC,IAAI,OAAO,CAAC,IAAI,OAAO,IAAI;AACxE,YAAM,SAAS,eAAe,UAAU;AACxC,YAAM,aAAa,IAAI,IAAI,OAAO,CAAC,IAAI,QAAQ,OAAO,IAAI;AAC1D,YAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,CAAC;AAE5D,aACE,4CAAC,OAAgB,WAAW,aAAa,cAAc,eACrD;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,MAAM,MAAM;AAAA,UACZ;AAAA,UACA;AAAA,UACA,IAAI,IAAI;AAAA,UACR,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,QAAQ;AAAA;AAAA,MACV,KAVM,IAAI,GAWZ;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: {\n      xAxis: { beginAtZero },\n    },\n    xScale,\n    yScale,\n    innerWidth,\n    y2Scale,\n    subGroupScale,\n    colorScale,\n    getXValue,\n    getYValue,\n    chartId,\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const negativeSize = innerWidth - xScale.get(0);\n  const positiveSize = innerWidth - negativeSize;\n\n  return useMemo(\n    () => (\n      <g fill={colorScale(serie.name)} clipPath={`url(#rect-focus-ring-${chartId})`}>\n        {serie.data.map((bar, i) => {\n          const x = getXValue(bar);\n          const y = getYValue(bar);\n          const minX = beginAtZero ? 0 : xScale.invert(0);\n          const width = x < 0 ? positiveSize - xScale.get(x) : xScale.get(x) - xScale.get(minX);\n          const height = subGroupScale?.bandwidth();\n          const transformX = x < 0 ? xScale.get(0) - width : xScale.get(minX);\n          const transformY = subGroupScale(serie.name) + finalYScale.get(y);\n\n          return (\n            <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n              <Rect\n                datum={bar}\n                name={serie.name}\n                width={width}\n                height={height}\n                id={bar.key}\n                x={0}\n                xValue={x}\n                yValue={y}\n              />\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [\n      beginAtZero,\n      chartId,\n      colorScale,\n      finalYScale,\n      getXValue,\n      getYValue,\n      positiveSize,\n      serie.data,\n      serie.name,\n      subGroupScale,\n      xScale,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwCT;AAvCd,mBAA2C;AAC3C,kBAAqB;AACrB,0BAA6B;AAGtB,MAAM,iBAAiB,CAAC,EAAE,MAAM,MAAgC;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL,OAAO,EAAE,YAAY;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,eAAe,aAAa,OAAO,IAAI,CAAC;AAC9C,QAAM,eAAe,aAAa;AAElC,aAAO;AAAA,IACL,MACE,4CAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,UAAU,wBAAwB,YAChE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,IAAI,UAAU,GAAG;AACvB,YAAM,OAAO,cAAc,IAAI,OAAO,OAAO,CAAC;AAC9C,YAAM,QAAQ,IAAI,IAAI,eAAe,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI,IAAI;AACpF,YAAM,SAAS,eAAe,UAAU;AACxC,YAAM,aAAa,IAAI,IAAI,OAAO,IAAI,CAAC,IAAI,QAAQ,OAAO,IAAI,IAAI;AAClE,YAAM,aAAa,cAAc,MAAM,IAAI,IAAI,YAAY,IAAI,CAAC;AAEhE,aACE,4CAAC,OAAgB,WAAW,aAAa,cAAc,eACrD;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,MAAM,MAAM;AAAA,UACZ;AAAA,UACA;AAAA,UACA,IAAI,IAAI;AAAA,UACR,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,QAAQ;AAAA;AAAA,MACV,KAVM,IAAI,GAWZ;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js

@@ -50,10 +50,10 @@ const HorizontalStackedBars = ({ serie }) => {
     const isFloorStack = sequence[0] === 0;
     const xValue = sequence[1] - sequence[0];
     const yValue = getYValue(serie.data[i]);
-    const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 2 : 0);
+    const width = xScale.get(sequence[1]) - xScale.get(sequence[0]) - (!isFloorStack ? 2 : 0);
     const height = subGroupScale?.bandwidth();
-    const transformX = xScale(sequence[0]) + (!isFloorStack ? 2 : 0);
-    const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);
+    const transformX = xScale.get(sequence[0]) + (!isFloorStack ? 2 : 0);
+    const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale.get(yValue);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { clipPath: `url(#rect-focus-ring-${chartId})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { fill: colorScale(serie.name), transform: `translate(0, ${transformY})`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Rect.Rect,
       {

package/dist/cjs/graphs/Chart/series/HorizontalStackedBars.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/HorizontalStackedBars.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalStackedBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n        const xValue = sequence[1] - sequence[0];\n        const yValue = getYValue(serie.data[i]);\n\n        const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 2 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale(sequence[0]) + (!isFloorStack ? 2 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);\n\n        return (\n          <g key={serie.data[i].key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n            <g fill={colorScale(serie.name)} transform={`translate(0, ${transformY})`}>\n              <Rect\n                width={width}\n                height={height}\n                x={transformX}\n                xValue={xValue}\n                yValue={yValue}\n                id={serie.data[i].key}\n                name={serie.name}\n                datum={serie.data[i]}\n              />\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCT;AArCd,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAGzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAgC;AAC5E,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC,OACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,UAAM,eAAe,SAAS,OAAO;AACrC,UAAM,SAAS,SAAS,KAAK,SAAS;AACtC,UAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,UAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAE/E,UAAM,SAAS,eAAe,UAAU;AAExC,UAAM,aAAa,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAC9D,UAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,MAAM;AAE9E,WACE,4CAAC,OAA0B,UAAU,wBAAwB,YAC3D,sDAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,WAAW,gBAAgB,eAC1D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,IAAI,MAAM,KAAK,GAAG;AAAA,QAClB,MAAM,MAAM;AAAA,QACZ,OAAO,MAAM,KAAK;AAAA;AAAA,IACpB,GACF,KAZM,MAAM,KAAK,GAAG,GAatB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalStackedBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n        const xValue = sequence[1] - sequence[0];\n        const yValue = getYValue(serie.data[i]);\n\n        const width = xScale.get(sequence[1]) - xScale.get(sequence[0]) - (!isFloorStack ? 2 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale.get(sequence[0]) + (!isFloorStack ? 2 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale.get(yValue);\n\n        return (\n          <g key={serie.data[i].key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n            <g fill={colorScale(serie.name)} transform={`translate(0, ${transformY})`}>\n              <Rect\n                width={width}\n                height={height}\n                x={transformX}\n                xValue={xValue}\n                yValue={yValue}\n                id={serie.data[i].key}\n                name={serie.name}\n                datum={serie.data[i]}\n              />\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsCT;AArCd,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAGzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAgC;AAC5E,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAC3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC,OACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,UAAM,eAAe,SAAS,OAAO;AACrC,UAAM,SAAS,SAAS,KAAK,SAAS;AACtC,UAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,UAAM,QAAQ,OAAO,IAAI,SAAS,EAAE,IAAI,OAAO,IAAI,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAEvF,UAAM,SAAS,eAAe,UAAU;AAExC,UAAM,aAAa,OAAO,IAAI,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAClE,UAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,IAAI,MAAM;AAElF,WACE,4CAAC,OAA0B,UAAU,wBAAwB,YAC3D,sDAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,WAAW,gBAAgB,eAC1D;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,IAAI,MAAM,KAAK,GAAG;AAAA,QAClB,MAAM,MAAM;AAAA,QACZ,OAAO,MAAM,KAAK;AAAA;AAAA,IACpB,GACF,KAZM,MAAM,KAAK,GAAG,GAatB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Line.js

@@ -45,7 +45,7 @@ const Line = ({ serie }) => {
     [serie.curveStyle]
   );
   const lineD3 = (0, import_react.useMemo)(
-    () => (0, import_d3.line)().x((d) => xScale(getXValue(d))).y((d) => finalYScale(getYValue(d))).curve(curveStyle),
+    () => (0, import_d3.line)().x((d) => xScale.get(getXValue(d))).y((d) => finalYScale.get(getYValue(d))).curve(curveStyle),
     [curveStyle, finalYScale, getXValue, getYValue, xScale]
   );
   (0, import_react.useEffect)(() => {
@@ -57,7 +57,7 @@ const Line = ({ serie }) => {
     if (serie.dashStyle)
       path.attr("stroke-dasharray", import_constants.LINE.DASH_STYLE_VALUES[serie.dashStyle]);
   }, [colorScale, finalYScale, getXValue, getYValue, lineD3, serie, xScale]);
-  const xTranslate = (0, import_react.useMemo)(() => (xScale?.bandwidth?.() ?? 0) / 2, [xScale]);
+  const xTranslate = (0, import_react.useMemo)(() => (xScale?.getBandwidth?.() ?? 0) / 2, [xScale]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_A11yRegion.A11yRegion, { serieName: serie.name, transform: `translate(${xTranslate}, 0)`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { ref, "data-testid": import_DataTestIds.DataVizDataTestIds.LINE }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Points.Points, { serie })

package/dist/cjs/graphs/Chart/series/Line.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Line.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { line, select } from 'd3';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\nimport { LINE, curveStyleMap } from '../../constants';\nimport { DataVizDataTestIds } from '../DataTestIds';\nimport { A11yRegion } from '../parts/A11yRegion';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface LineSerieT {\n  serie: DSChartT.InternalSerie;\n}\nexport const Line: React.ComponentType<LineSerieT> = ({ serie }) => {\n  const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n\n  const finalYScale = useMemo(() => (serie.scale === 'y2' ? y2Scale : yScale), [serie.scale, y2Scale, yScale]);\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [serie.curveStyle],\n  );\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(getXValue(d)))\n        .y((d) => finalYScale(getYValue(d)))\n        .curve(curveStyle),\n    [curveStyle, finalYScale, getXValue, getYValue, xScale],\n  );\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const groupContent = select(ref?.current);\n\n    groupContent.selectAll('*').remove();\n    const path = groupContent\n      .append('path')\n      .datum(serie.data)\n      .attr('fill', 'none')\n      .attr('stroke', colorScale(serie.name))\n      .attr('stroke-linejoin', 'round')\n      .attr('stroke-width', 2)\n      .attr('d', lineD3);\n\n    if (serie.dashStyle) path.attr('stroke-dasharray', LINE.DASH_STYLE_VALUES[serie.dashStyle]);\n  }, [colorScale, finalYScale, getXValue, getYValue, lineD3, serie, xScale]);\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = useMemo(() => (xScale?.bandwidth?.() ?? 0) / 2, [xScale]);\n\n  return (\n    <A11yRegion serieName={serie.name} transform={`translate(${xTranslate}, 0)`}>\n      <g ref={ref} data-testid={DataVizDataTestIds.LINE} />\n      <Points serie={serie} />\n    </A11yRegion>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAxDJ,mBAA8D;AAC9D,gBAA6B;AAC7B,oBAAuB;AACvB,0BAA6B;AAC7B,uBAAoC;AACpC,yBAAmC;AACnC,wBAA2B;AAMpB,MAAM,OAAwC,CAAC,EAAE,MAAM,MAAM;AAClE,QAAM,EAAE,QAAQ,QAAQ,SAAS,YAAY,WAAW,UAAU,QAAI,yBAAW,gCAAY;AAE7F,QAAM,UAAM,qBAAoB,IAAI;AAEpC,QAAM,kBAAc,sBAAQ,MAAO,MAAM,UAAU,OAAO,UAAU,QAAS,CAAC,MAAM,OAAO,SAAS,MAAM,CAAC;AAE3G,QAAM,iBAAa;AAAA,IACjB,MAAM,+BAAc,MAAM,eAAe,+BAAc,sBAAK,YAAY;AAAA,IACxE,CAAC,MAAM,UAAU;AAAA,EACnB;AAEA,QAAM,aAAS;AAAA,IACb,UACE,gBAAK,EACF,EAAE,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC,CAAC,EAC7B,EAAE,CAAC,MAAM,YAAY,UAAU,CAAC,CAAC,CAAC,EAClC,MAAM,UAAU;AAAA,IACrB,CAAC,YAAY,aAAa,WAAW,WAAW,MAAM;AAAA,EACxD;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAElB,UAAM,mBAAe,kBAAO,KAAK,OAAO;AAExC,iBAAa,UAAU,GAAG,EAAE,OAAO;AACnC,UAAM,OAAO,aACV,OAAO,MAAM,EACb,MAAM,MAAM,IAAI,EAChB,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,WAAW,MAAM,IAAI,CAAC,EACrC,KAAK,mBAAmB,OAAO,EAC/B,KAAK,gBAAgB,CAAC,EACtB,KAAK,KAAK,MAAM;AAEnB,QAAI,MAAM;AAAW,WAAK,KAAK,oBAAoB,sBAAK,kBAAkB,MAAM,UAAU;AAAA,EAC5F,GAAG,CAAC,YAAY,aAAa,WAAW,WAAW,QAAQ,OAAO,MAAM,CAAC;AAIzE,QAAM,iBAAa,sBAAQ,OAAO,QAAQ,YAAY,KAAK,KAAK,GAAG,CAAC,MAAM,CAAC;AAE3E,SACE,6CAAC,gCAAW,WAAW,MAAM,MAAM,WAAW,aAAa,kBACzD;AAAA,gDAAC,OAAE,KAAU,eAAa,sCAAmB,MAAM;AAAA,IACnD,4CAAC,wBAAO,OAAc;AAAA,KACxB;AAEJ;",
+  "sourcesContent": ["import React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { line, select } from 'd3';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\nimport { LINE, curveStyleMap } from '../../constants';\nimport { DataVizDataTestIds } from '../DataTestIds';\nimport { A11yRegion } from '../parts/A11yRegion';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface LineSerieT {\n  serie: DSChartT.InternalSerie;\n}\nexport const Line: React.ComponentType<LineSerieT> = ({ serie }) => {\n  const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n\n  const finalYScale = useMemo(() => (serie.scale === 'y2' ? y2Scale : yScale), [serie.scale, y2Scale, yScale]);\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [serie.curveStyle],\n  );\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale.get(getXValue(d)))\n        .y((d) => finalYScale.get(getYValue(d)))\n        .curve(curveStyle),\n    [curveStyle, finalYScale, getXValue, getYValue, xScale],\n  );\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const groupContent = select(ref?.current);\n\n    groupContent.selectAll('*').remove();\n    const path = groupContent\n      .append('path')\n      .datum(serie.data)\n      .attr('fill', 'none')\n      .attr('stroke', colorScale(serie.name))\n      .attr('stroke-linejoin', 'round')\n      .attr('stroke-width', 2)\n      .attr('d', lineD3);\n\n    if (serie.dashStyle) path.attr('stroke-dasharray', LINE.DASH_STYLE_VALUES[serie.dashStyle]);\n  }, [colorScale, finalYScale, getXValue, getYValue, lineD3, serie, xScale]);\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = useMemo(() => (xScale?.getBandwidth?.() ?? 0) / 2, [xScale]);\n\n  return (\n    <A11yRegion serieName={serie.name} transform={`translate(${xTranslate}, 0)`}>\n      <g ref={ref} data-testid={DataVizDataTestIds.LINE} />\n      <Points serie={serie} />\n    </A11yRegion>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwDnB;AAxDJ,mBAA8D;AAC9D,gBAA6B;AAC7B,oBAAuB;AACvB,0BAA6B;AAC7B,uBAAoC;AACpC,yBAAmC;AACnC,wBAA2B;AAMpB,MAAM,OAAwC,CAAC,EAAE,MAAM,MAAM;AAClE,QAAM,EAAE,QAAQ,QAAQ,SAAS,YAAY,WAAW,UAAU,QAAI,yBAAW,gCAAY;AAE7F,QAAM,UAAM,qBAAoB,IAAI;AAEpC,QAAM,kBAAc,sBAAQ,MAAO,MAAM,UAAU,OAAO,UAAU,QAAS,CAAC,MAAM,OAAO,SAAS,MAAM,CAAC;AAE3G,QAAM,iBAAa;AAAA,IACjB,MAAM,+BAAc,MAAM,eAAe,+BAAc,sBAAK,YAAY;AAAA,IACxE,CAAC,MAAM,UAAU;AAAA,EACnB;AAEA,QAAM,aAAS;AAAA,IACb,UACE,gBAAK,EACF,EAAE,CAAC,MAAM,OAAO,IAAI,UAAU,CAAC,CAAC,CAAC,EACjC,EAAE,CAAC,MAAM,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,EACtC,MAAM,UAAU;AAAA,IACrB,CAAC,YAAY,aAAa,WAAW,WAAW,MAAM;AAAA,EACxD;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAElB,UAAM,mBAAe,kBAAO,KAAK,OAAO;AAExC,iBAAa,UAAU,GAAG,EAAE,OAAO;AACnC,UAAM,OAAO,aACV,OAAO,MAAM,EACb,MAAM,MAAM,IAAI,EAChB,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,WAAW,MAAM,IAAI,CAAC,EACrC,KAAK,mBAAmB,OAAO,EAC/B,KAAK,gBAAgB,CAAC,EACtB,KAAK,KAAK,MAAM;AAEnB,QAAI,MAAM;AAAW,WAAK,KAAK,oBAAoB,sBAAK,kBAAkB,MAAM,UAAU;AAAA,EAC5F,GAAG,CAAC,YAAY,aAAa,WAAW,WAAW,QAAQ,OAAO,MAAM,CAAC;AAIzE,QAAM,iBAAa,sBAAQ,OAAO,QAAQ,eAAe,KAAK,KAAK,GAAG,CAAC,MAAM,CAAC;AAE9E,SACE,6CAAC,gCAAW,WAAW,MAAM,MAAM,WAAW,aAAa,kBACzD;AAAA,gDAAC,OAAE,KAAU,eAAa,sCAAmB,MAAM;AAAA,IACnD,4CAAC,wBAAO,OAAc;AAAA,KACxB;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Points.js

@@ -53,8 +53,8 @@ const Points = ({ serie }) => {
       const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;
       const x = getXValue(point);
       const y = getYValue(point);
-      const xPosition = xScale(x);
-      const yPosition = finalYScale(y + deltaY);
+      const xPosition = xScale.get(x);
+      const yPosition = finalYScale.get(y + deltaY);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_Point.Point,
         {

package/dist/cjs/graphs/Chart/series/Points.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Points.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Point } from './Point';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\n\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    getXValue,\n    getYValue,\n    stackedData,\n    props: { types },\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const opacity = useMemo(() => (types === 'scatter' ? 0.8 : 1), [serie.type]);\n  return useMemo(\n    () => (\n      <g fill={colorScale(serie.name)}>\n        {serie.data.map((point, i) => {\n          const { pointRadius, pointStyle } = serie;\n          // we need to recalculate the height  with stacked data if is an AREA STACKED ELEMENT\n          const serieWithStackedValues = getStackedData(stackedData, serie);\n          const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n          const x = getXValue(point);\n          const y = getYValue(point);\n          const xPosition = xScale(x);\n          const yPosition = finalYScale(y + deltaY);\n\n          return (\n            <Point\n              pointRadius={pointRadius}\n              id={point.key}\n              opacity={opacity}\n              x={xPosition}\n              y={yPosition}\n              xValue={x}\n              yValue={y}\n              pointStyle={pointStyle}\n              name={serie.name}\n              datum={point}\n              key={`${point.key}-p`}\n            />\n          );\n        })}\n      </g>\n    ),\n    [colorScale, finalYScale, getXValue, getYValue, opacity, serie, stackedData, xScale],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCX;AAjCZ,mBAA2C;AAC3C,mBAAsB;AACtB,0BAA6B;AAC7B,qBAA+B;AAExB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,cAAU,sBAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,aAAO;AAAA,IACL,MACE,4CAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,YAAM,EAAE,aAAa,WAAW,IAAI;AAEpC,YAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,YAAM,SAAS,yBAAyB,uBAAuB,GAAG,KAAK;AACvE,YAAM,IAAI,UAAU,KAAK;AACzB,YAAM,IAAI,UAAU,KAAK;AACzB,YAAM,YAAY,OAAO,CAAC;AAC1B,YAAM,YAAY,YAAY,IAAI,MAAM;AAExC,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,IAAI,MAAM;AAAA,UACV;AAAA,UACA,GAAG;AAAA,UACH,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,UACA,MAAM,MAAM;AAAA,UACZ,OAAO;AAAA;AAAA,QACF,GAAG,MAAM;AAAA,MAChB;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF,CAAC,YAAY,aAAa,WAAW,WAAW,SAAS,OAAO,aAAa,MAAM;AAAA,EACrF;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Point } from './Point';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\n\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    getXValue,\n    getYValue,\n    stackedData,\n    props: { types },\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const opacity = useMemo(() => (types === 'scatter' ? 0.8 : 1), [serie.type]);\n  return useMemo(\n    () => (\n      <g fill={colorScale(serie.name)}>\n        {serie.data.map((point, i) => {\n          const { pointRadius, pointStyle } = serie;\n          // we need to recalculate the height  with stacked data if is an AREA STACKED ELEMENT\n          const serieWithStackedValues = getStackedData(stackedData, serie);\n          const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n          const x = getXValue(point);\n          const y = getYValue(point);\n          const xPosition = xScale.get(x);\n          const yPosition = finalYScale.get(y + deltaY);\n\n          return (\n            <Point\n              pointRadius={pointRadius}\n              id={point.key}\n              opacity={opacity}\n              x={xPosition}\n              y={yPosition}\n              xValue={x}\n              yValue={y}\n              pointStyle={pointStyle}\n              name={serie.name}\n              datum={point}\n              key={`${point.key}-p`}\n            />\n          );\n        })}\n      </g>\n    ),\n    [colorScale, finalYScale, getXValue, getYValue, opacity, serie, stackedData, xScale],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkCX;AAjCZ,mBAA2C;AAC3C,mBAAsB;AACtB,0BAA6B;AAC7B,qBAA+B;AAExB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,MAAM;AAAA,EACjB,QAAI,yBAAW,gCAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,cAAU,sBAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,aAAO;AAAA,IACL,MACE,4CAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,YAAM,EAAE,aAAa,WAAW,IAAI;AAEpC,YAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,YAAM,SAAS,yBAAyB,uBAAuB,GAAG,KAAK;AACvE,YAAM,IAAI,UAAU,KAAK;AACzB,YAAM,IAAI,UAAU,KAAK;AACzB,YAAM,YAAY,OAAO,IAAI,CAAC;AAC9B,YAAM,YAAY,YAAY,IAAI,IAAI,MAAM;AAE5C,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,IAAI,MAAM;AAAA,UACV;AAAA,UACA,GAAG;AAAA,UACH,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR;AAAA,UACA,MAAM,MAAM;AAAA,UACZ,OAAO;AAAA;AAAA,QACF,GAAG,MAAM;AAAA,MAChB;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF,CAAC,YAAY,aAAa,WAAW,WAAW,SAAS,OAAO,aAAa,MAAM;AAAA,EACrF;AACF;",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/Rect.js

@@ -58,7 +58,7 @@ const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id,
     if (isHorizontal)
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animate", { attributeName: "x", from: -innerWidth, to: x, dur: "0.4s", fill: "both" });
     if (isNegative)
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animate", { attributeName: "y", from: yScale(0), to: -y, dur: "0.40s", fill: "both" });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animate", { attributeName: "y", from: yScale.get(0), to: -y, dur: "0.40s", fill: "both" });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animate", { attributeName: "y", from: -innerHeight - y, to: -y, dur: "0.40s", fill: "both" });
   }, [innerHeight, innerWidth, isGrabbed, isHorizontal, isNegative, x, y, yScale]);
   const clipPathSign = (0, import_react.useMemo)(() => {

package/dist/cjs/graphs/Chart/series/Rect.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Rect.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo, useContext, useCallback } from 'react';\n\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nimport { DataVizDataTestIds } from '../DataTestIds';\n\nexport const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue, datum }) => {\n  const {\n    activePoint,\n    isGrabbed,\n    chartId,\n    isHorizontal,\n    innerWidth,\n    yScale,\n    innerHeight,\n    setActivePoint,\n    getYValueFormatted,\n    getXValueFormatted,\n    props: { TooltipRenderer, scrapper, xAxis, yAxis, y2Axis },\n  } = useContext(ChartContext);\n  const finalYAxis = datum.scale === 'y2' ? y2Axis : yAxis;\n  const yValueFormatted = getYValueFormatted(datum);\n  const xValueFormatted = getXValueFormatted(datum);\n\n  const isFocused = activePoint?.key === id;\n  const animation = useMemo(() => {\n    if (isGrabbed) return null;\n    if (isHorizontal) return <animate attributeName=\"x\" from={-innerWidth} to={x} dur=\"0.4s\" fill=\"both\" />;\n    if (isNegative) return <animate attributeName=\"y\" from={yScale(0)} to={-y} dur=\"0.40s\" fill=\"both\" />;\n    return <animate attributeName=\"y\" from={-innerHeight - y} to={-y} dur=\"0.40s\" fill=\"both\" />;\n  }, [innerHeight, innerWidth, isGrabbed, isHorizontal, isNegative, x, y, yScale]);\n\n  const clipPathSign = useMemo(() => {\n    // @todo horizontal clip paths\n    if (isHorizontal) return '';\n    if (isNegative) return `url(#rects-negative-${chartId})`;\n    return `url(#rects-positive-${chartId})`;\n  }, [chartId, isHorizontal, isNegative]);\n\n  const transform = useMemo(() => {\n    if (isHorizontal) return ``;\n    return `scale(1,-1) translate(0,${-height})`;\n  }, [height, isHorizontal]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!scrapper) setActivePoint(datum);\n  }, [datum, scrapper, setActivePoint]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (!scrapper) setActivePoint(null);\n  }, [scrapper, setActivePoint]);\n\n  return useMemo(\n    () => (\n      <g clipPath={clipPathSign}>\n        <g\n          id={isFocused ? `data-focused-${chartId}` : ''}\n          transform={transform}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleOnMouseLeave}\n          data-testid={DataVizDataTestIds.BAR}\n        >\n          {isFocused ? (\n            <rect\n              x={(isHorizontal ? x : 0) - FOCUS_RING.STROKE_WIDTH}\n              y={(!isHorizontal ? -y : 0) - FOCUS_RING.STROKE_WIDTH}\n              width={width + FOCUS_RING.OFFSET}\n              height={height + FOCUS_RING.OFFSET}\n              fill=\"none\"\n              rx=\"1\"\n              ry=\"1\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect\n            width={width}\n            height={height}\n            y={-y}\n            x={x}\n            aria-label={`${datum.serie} ${xAxis.label || ''} ${xValueFormatted} ${\n              finalYAxis?.label || ''\n            } ${yValueFormatted}`}\n            role=\"img\"\n            tabIndex={-1}\n            ref={(_ref) => {\n              if (isFocused) {\n                _ref?.focus();\n              }\n            }}\n          >\n            {/* {animation} */}\n          </rect>\n          {activePoint?.key === id && TooltipRenderer ? (\n            <FocusableRegion\n              id={id}\n              y={y}\n              x={x}\n              width={width}\n              height={height}\n              transform={transform}\n              content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n            />\n          ) : (\n            ''\n          )}\n        </g>\n      </g>\n    ),\n    [\n      clipPathSign,\n      isFocused,\n      chartId,\n      transform,\n      handleMouseEnter,\n      handleOnMouseLeave,\n      isHorizontal,\n      x,\n      y,\n      width,\n      height,\n      datum.serie,\n      xAxis.label,\n      xValueFormatted,\n      finalYAxis?.label,\n      yValueFormatted,\n      activePoint?.key,\n      id,\n      TooltipRenderer,\n      name,\n      yValue,\n      xValue,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useMemo, useContext, useCallback } from 'react';\n\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nimport { DataVizDataTestIds } from '../DataTestIds';\n\nexport const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue, datum }) => {\n  const {\n    activePoint,\n    isGrabbed,\n    chartId,\n    isHorizontal,\n    innerWidth,\n    yScale,\n    innerHeight,\n    setActivePoint,\n    getYValueFormatted,\n    getXValueFormatted,\n    props: { TooltipRenderer, scrapper, xAxis, yAxis, y2Axis },\n  } = useContext(ChartContext);\n  const finalYAxis = datum.scale === 'y2' ? y2Axis : yAxis;\n  const yValueFormatted = getYValueFormatted(datum);\n  const xValueFormatted = getXValueFormatted(datum);\n\n  const isFocused = activePoint?.key === id;\n  const animation = useMemo(() => {\n    if (isGrabbed) return null;\n    if (isHorizontal) return <animate attributeName=\"x\" from={-innerWidth} to={x} dur=\"0.4s\" fill=\"both\" />;\n    if (isNegative) return <animate attributeName=\"y\" from={yScale.get(0)} to={-y} dur=\"0.40s\" fill=\"both\" />;\n    return <animate attributeName=\"y\" from={-innerHeight - y} to={-y} dur=\"0.40s\" fill=\"both\" />;\n  }, [innerHeight, innerWidth, isGrabbed, isHorizontal, isNegative, x, y, yScale]);\n\n  const clipPathSign = useMemo(() => {\n    // @todo horizontal clip paths\n    if (isHorizontal) return '';\n    if (isNegative) return `url(#rects-negative-${chartId})`;\n    return `url(#rects-positive-${chartId})`;\n  }, [chartId, isHorizontal, isNegative]);\n\n  const transform = useMemo(() => {\n    if (isHorizontal) return ``;\n    return `scale(1,-1) translate(0,${-height})`;\n  }, [height, isHorizontal]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!scrapper) setActivePoint(datum);\n  }, [datum, scrapper, setActivePoint]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (!scrapper) setActivePoint(null);\n  }, [scrapper, setActivePoint]);\n\n  return useMemo(\n    () => (\n      <g clipPath={clipPathSign}>\n        <g\n          id={isFocused ? `data-focused-${chartId}` : ''}\n          transform={transform}\n          onMouseEnter={handleMouseEnter}\n          onMouseLeave={handleOnMouseLeave}\n          data-testid={DataVizDataTestIds.BAR}\n        >\n          {isFocused ? (\n            <rect\n              x={(isHorizontal ? x : 0) - FOCUS_RING.STROKE_WIDTH}\n              y={(!isHorizontal ? -y : 0) - FOCUS_RING.STROKE_WIDTH}\n              width={width + FOCUS_RING.OFFSET}\n              height={height + FOCUS_RING.OFFSET}\n              fill=\"none\"\n              rx=\"1\"\n              ry=\"1\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect\n            width={width}\n            height={height}\n            y={-y}\n            x={x}\n            aria-label={`${datum.serie} ${xAxis.label || ''} ${xValueFormatted} ${\n              finalYAxis?.label || ''\n            } ${yValueFormatted}`}\n            role=\"img\"\n            tabIndex={-1}\n            ref={(_ref) => {\n              if (isFocused) {\n                _ref?.focus();\n              }\n            }}\n          >\n            {/* {animation} */}\n          </rect>\n          {activePoint?.key === id && TooltipRenderer ? (\n            <FocusableRegion\n              id={id}\n              y={y}\n              x={x}\n              width={width}\n              height={height}\n              transform={transform}\n              content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n            />\n          ) : (\n            ''\n          )}\n        </g>\n      </g>\n    ),\n    [\n      clipPathSign,\n      isFocused,\n      chartId,\n      transform,\n      handleMouseEnter,\n      handleOnMouseLeave,\n      isHorizontal,\n      x,\n      y,\n      width,\n      height,\n      datum.serie,\n      xAxis.label,\n      xValueFormatted,\n      finalYAxis?.label,\n      yValueFormatted,\n      activePoint?.key,\n      id,\n      TooltipRenderer,\n      name,\n      yValue,\n      xValue,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/graphs/Chart/series/StackedBar.js

@@ -52,9 +52,9 @@ const StackedBar = ({ serie }) => {
     const xValue = getXValue(bar);
     const yValue = sequence[1] - sequence[0];
     const width = subGroupScale?.bandwidth();
-    const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);
-    const transformY = yScale(sequence[1]) + (sequence[0] < 0 ? 2 : 0);
-    const transformX = !xScale.bandwidth ? xScale(xValue) - width / 2 : xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);
+    const height = yScale.get(sequence[0]) - yScale.get(sequence[1]) - (!isFloorStack ? 1 : 0);
+    const transformY = yScale.get(sequence[1]) + (sequence[0] < 0 ? 2 : 0);
+    const transformX = xScale.type !== "BAND" ? xScale.get(xValue) - width / 2 : xScale.get(xValue) + subGroupScale(`stacked-data-${stackIndex}`);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { fill: colorScale(serie.name), transform: `translate(${transformX},0)`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Rect.Rect,
       {

package/dist/cjs/graphs/Chart/series/StackedBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/StackedBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\n\nexport const StackedBar = ({ serie }) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const sequence = serieWithStackedValues[bar.position];\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(bar);\n\n        const yValue = sequence[1] - sequence[0];\n        const width = subGroupScale?.bandwidth();\n        const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);\n        // const transformX = xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n        const transformY = yScale(sequence[1]) + (sequence[0] < 0 ? 2 : 0);\n\n        const transformX = !xScale.bandwidth\n          ? xScale(xValue) - width / 2\n          : // ? subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0)\n            xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n\n        return (\n          <g key={serie.data[i].key} fill={colorScale(serie.name)} transform={`translate(${transformX},0)`}>\n            <Rect\n              width={width}\n              height={height}\n              xValue={xValue}\n              yValue={yValue}\n              y={transformY}\n              id={serie.data[i].key}\n              name={serie.name}\n              datum={bar}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0CX;AAzCZ,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAEzC,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC,OAAE,UAAU,wBAAwB,YAClC,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,UAAM,WAAW,uBAAuB,IAAI;AAC5C,UAAM,eAAe,SAAS,OAAO;AAErC,UAAM,SAAS,UAAU,GAAG;AAE5B,UAAM,SAAS,SAAS,KAAK,SAAS;AACtC,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAEhF,UAAM,aAAa,OAAO,SAAS,EAAE,KAAK,SAAS,KAAK,IAAI,IAAI;AAEhE,UAAM,aAAa,CAAC,OAAO,YACvB,OAAO,MAAM,IAAI,QAAQ,IAEzB,OAAO,MAAM,IAAI,cAAc,gBAAgB,YAAY;AAE/D,WACE,4CAAC,OAA0B,MAAM,WAAW,MAAM,IAAI,GAAG,WAAW,aAAa,iBAC/E;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,QACH,IAAI,MAAM,KAAK,GAAG;AAAA,QAClB,MAAM,MAAM;AAAA,QACZ,OAAO;AAAA;AAAA,IACT,KAVM,MAAM,KAAK,GAAG,GAWtB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\n\nexport const StackedBar = ({ serie }) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getXValue,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g clipPath={`url(#rect-focus-ring-${chartId})`}>\n      {serie.data.map((bar, i) => {\n        const sequence = serieWithStackedValues[bar.position];\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(bar);\n\n        const yValue = sequence[1] - sequence[0];\n        const width = subGroupScale?.bandwidth();\n        const height = yScale.get(sequence[0]) - yScale.get(sequence[1]) - (!isFloorStack ? 1 : 0);\n        // const transformX = xScale.get(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n        const transformY = yScale.get(sequence[1]) + (sequence[0] < 0 ? 2 : 0);\n\n        const transformX =\n          xScale.type !== 'BAND'\n            ? xScale.get(xValue) - width / 2\n            : // ? subGroupScale(serie.name) + xScale.get(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0)\n              xScale.get(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n\n        return (\n          <g key={serie.data[i].key} fill={colorScale(serie.name)} transform={`translate(${transformX},0)`}>\n            <Rect\n              width={width}\n              height={height}\n              xValue={xValue}\n              yValue={yValue}\n              y={transformY}\n              id={serie.data[i].key}\n              name={serie.name}\n              datum={bar}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2CX;AA1CZ,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAEzC,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC,OAAE,UAAU,wBAAwB,YAClC,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,UAAM,WAAW,uBAAuB,IAAI;AAC5C,UAAM,eAAe,SAAS,OAAO;AAErC,UAAM,SAAS,UAAU,GAAG;AAE5B,UAAM,SAAS,SAAS,KAAK,SAAS;AACtC,UAAM,QAAQ,eAAe,UAAU;AACvC,UAAM,SAAS,OAAO,IAAI,SAAS,EAAE,IAAI,OAAO,IAAI,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAExF,UAAM,aAAa,OAAO,IAAI,SAAS,EAAE,KAAK,SAAS,KAAK,IAAI,IAAI;AAEpE,UAAM,aACJ,OAAO,SAAS,SACZ,OAAO,IAAI,MAAM,IAAI,QAAQ,IAE7B,OAAO,IAAI,MAAM,IAAI,cAAc,gBAAgB,YAAY;AAErE,WACE,4CAAC,OAA0B,MAAM,WAAW,MAAM,IAAI,GAAG,WAAW,aAAa,iBAC/E;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,QACH,IAAI,MAAM,KAAK,GAAG;AAAA,QAClB,MAAM,MAAM;AAAA,QACZ,OAAO;AAAA;AAAA,IACT,KAVM,MAAM,KAAK,GAAG,GAWtB;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

package/dist/cjs/graphs/Chart/styles.js

@@ -37,7 +37,6 @@ __export(styles_exports, {
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_colorPallet = require("./helpers/colorPallet");
 const StyledSVGWrapper = import_ds_system.styled.div`
   rect:focus,
   rect:focus-visible,
@@ -53,37 +52,16 @@ const StyledSVGWrapper = import_ds_system.styled.div`
 
   cursor: ${({ isGrabbed }) => isGrabbed ? "grabbing" : "default"};
 
-  .domain {
-    stroke-width: 2px;
-    stroke: ${({ theme }) => theme.colors.neutral["700"]};
-  }
-
   text {
     font-size: 1rem;
   }
 
   min-width: 300px;
 `;
-const StyledAxis = (0, import_ds_system.styled)("g")`
-  text {
-    fill: #635f5d;
-  }
-
-  .tick text {
-    font-size: 1rem;
-    ${({ tickColor }) => tickColor ? `fill: ${import_colorPallet.COLOR_PALLET[tickColor] ?? tickColor}` : ""}
-  }
-  .tick line {
-    ${({ tickColor }) => tickColor ? `stroke: ${import_colorPallet.COLOR_PALLET[tickColor] ?? tickColor}` : ""}
-  }
-
-  line {
-    stroke: #c0c0bb;
-  }
-
-  .domain {
-    ${({ axisColor }) => axisColor ? `stroke: ${import_colorPallet.COLOR_PALLET[axisColor] ?? axisColor}` : ""}
-  }
+const StyledAxis = (0, import_ds_system.styled)("line")`
+  stroke-width: 2px;
+  stroke: ${({ theme }) => theme.colors.neutral["700"]};
+  ${({ axisColor }) => axisColor ? `stroke: ${axisColor}` : ""}
 `;
 const StyledAxisLabel = (0, import_ds_system.styled)("text")`
   font-size: 1rem;

package/dist/cjs/graphs/Chart/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from './helpers/colorPallet';\n\ninterface StyledAxisT {\n  axisColor: string;\n  tickColor: string;\n}\nexport const StyledSVGWrapper = styled.div`\n  rect:focus,\n  rect:focus-visible,\n  circle:focus,\n  circle:focus-visible {\n    outline: none;\n  }\n\n  :focus,\n  :focus-visible {\n    outline: none;\n  }\n\n  cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n  .domain {\n    stroke-width: 2px;\n    stroke: ${({ theme }) => theme.colors.neutral['700']};\n  }\n\n  text {\n    font-size: 1rem;\n  }\n\n  min-width: 300px;\n`;\n\nexport const StyledAxis = styled('g')<StyledAxisT>`\n  text {\n    fill: #635f5d;\n  }\n\n  .tick text {\n    font-size: 1rem;\n    ${({ tickColor }) => (tickColor ? `fill: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n  }\n  .tick line {\n    ${({ tickColor }) => (tickColor ? `stroke: ${COLOR_PALLET[tickColor] ?? tickColor}` : '')}\n  }\n\n  line {\n    stroke: #c0c0bb;\n  }\n\n  .domain {\n    ${({ axisColor }) => (axisColor ? `stroke: ${COLOR_PALLET[axisColor] ?? axisColor}` : '')}\n  }\n`;\n\nexport const StyledAxisLabel = styled('text')`\n  font-size: 1rem;\n  font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n  line {\n    opacity: 0.2;\n  }\n`;\n\nexport const StyleFocusableRegion = styled('div')<{ s: number }>`\n  width: ${({ s }) => s * 2 ?? '1'}px;\n  height: ${({ s }) => s * 2 ?? '1'}px;\n  :focus {\n    outline: none;\n  }\n`;\n\nexport const StyledLine = styled('path')`\n  fill: none;\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n`;\nexport const StyledArea = styled('path')`\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n  opacity: 0.2;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n  max-width: 350px;\n  background-color: white;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  width: calc(100% + 30px);\n  height: calc(100% + 30px);\n  z-index: -1;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,yBAA6B;AAMtB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAa3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,cAI3C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU3C,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO9B,CAAC,EAAE,UAAU,MAAO,YAAY,SAAS,gCAAa,cAAc,cAAc;AAAA;AAAA;AAAA,MAGlF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,gCAAa,cAAc,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQpF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,gCAAa,cAAc,cAAc;AAAA;AAAA;AAInF,MAAM,sBAAkB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAM,2BAAuB,yBAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,iBAAa,yBAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from './helpers/colorPallet';\n\ninterface StyledAxisT {\n  axisColor: string;\n}\nexport const StyledSVGWrapper = styled.div`\n  rect:focus,\n  rect:focus-visible,\n  circle:focus,\n  circle:focus-visible {\n    outline: none;\n  }\n\n  :focus,\n  :focus-visible {\n    outline: none;\n  }\n\n  cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n  text {\n    font-size: 1rem;\n  }\n\n  min-width: 300px;\n`;\n\nexport const StyledAxis = styled('line')<StyledAxisT>`\n  stroke-width: 2px;\n  stroke: ${({ theme }) => theme.colors.neutral['700']};\n  ${({ axisColor }) => (axisColor ? `stroke: ${axisColor}` : '')}\n`;\n\nexport const StyledAxisLabel = styled('text')`\n  font-size: 1rem;\n  font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n  line {\n    opacity: 0.2;\n  }\n`;\n\nexport const StyleFocusableRegion = styled('div')<{ s: number }>`\n  width: ${({ s }) => s * 2 ?? '1'}px;\n  height: ${({ s }) => s * 2 ?? '1'}px;\n  :focus {\n    outline: none;\n  }\n`;\n\nexport const StyledLine = styled('path')`\n  fill: none;\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n`;\nexport const StyledArea = styled('path')`\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n  opacity: 0.2;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n  max-width: 350px;\n  background-color: white;\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  width: calc(100% + 30px);\n  height: calc(100% + 30px);\n  z-index: -1;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAMhB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAa3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,YAE3B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA,IAC5C,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,cAAc;AAAA;AAGtD,MAAM,sBAAkB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAM7B,MAAM,2BAAuB,yBAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,iBAAa,yBAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/graphs/Chart/ChartContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/ChartContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { createContext, createRef } from 'react';\nimport type { ScaleLinear, ScaleBand, ScaleOrdinal } from 'd3';\nimport { scaleLinear, scaleBand, scaleOrdinal } from 'd3';\nimport type { DSChartT } from './react-desc-prop-types';\nimport { defaultProps } from './react-desc-prop-types';\ninterface ContextT {\n  props: DSChartT.Props;\n  originalSeries: DSChartT.SeriesT;\n  currentData: DSChartT.InternalData;\n  xScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  yScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  y2Scale: ScaleLinear<number, number, never>;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: DSChartT.InternalDatum | null;\n  containerRef: HTMLDivElement | null;\n  setContainerRef: React.Dispatch<React.SetStateAction<SVGElement | null>>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, string>;\n  axisLeftRef: SVGGElement | null;\n  scrapperPosY: string;\n  scrapperPosX: string;\n  xScrollbarPosition: number;\n  isGrabbed: boolean;\n  startPosition: number;\n  isScrollbarVisible: boolean;\n  lastPosition: React.MutableRefObject<number>;\n  containerRatio: number;\n  internalMargin: {\n    bottom: number;\n    top: number;\n    right: number;\n    left: number;\n  };\n  toolbarHeight: number;\n  leftLegendHeight: number;\n  rightLegendHeight: number;\n  leftLabelHeight: number;\n  leftLegendWidth: number;\n  leftLegend: SVGGElement;\n  bottomLegend: SVGGElement;\n  rightLegend: SVGGElement;\n  axisBottomHeight: number;\n  bottomLabelHeight: number;\n  rightLabelWidth: number;\n  axisRightWidth: number;\n  isHorizontal: boolean;\n  leftLabel: SVGGElement;\n  chartId: string;\n  hiddenSeries: string[];\n  stackedData: DSChartT.StackedSeriesByGroupT;\n  width: number;\n  height: number;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getBandwidth: () => number;\n  setScrapperPosY: React.Dispatch<React.SetStateAction<string>>;\n  setScrapperPosX: React.Dispatch<React.SetStateAction<string>>;\n  setXScrollbarPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsGrabbed: React.Dispatch<React.SetStateAction<boolean>>;\n  setStartPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsScrollbarVisible: React.Dispatch<React.SetStateAction<boolean>>;\n  setAxisLeftRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setTopLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisBottomRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisRightRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getXValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getYValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getXValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  getYValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  setHiddenSeries: React.Dispatch<React.SetStateAction<string[]>>;\n  getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  setContainerRatio: React.Dispatch<React.SetStateAction<number>>;\n  setToolbarRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n}\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: null,\n  setActivePoint: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\nexport const ChartContext = createContext(defaultContext);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe,iBAAiB;AAEzC,SAAS,aAAa,WAAW,oBAAoB;AAErD,SAAS,oBAAoB;AA+E7B,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ,UAAU;AAAA,EAClB,QAAQ,YAAY;AAAA,EACpB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,cAAc,UAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,YAAY,aAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AACO,MAAM,eAAe,cAAc,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { createContext, createRef } from 'react';\nimport type { ScaleBand, ScaleOrdinal } from 'd3';\nimport { scaleLinear, scaleBand, scaleOrdinal } from 'd3';\nimport type { DSChartT } from './react-desc-prop-types';\nimport { defaultProps } from './react-desc-prop-types';\nimport type { ScaleT } from './scales';\ninterface ContextT {\n  props: DSChartT.Props;\n  originalSeries: DSChartT.SeriesT;\n  currentData: DSChartT.InternalData;\n  xScale: ScaleT;\n  yScale: ScaleT;\n  y2Scale: ScaleT;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: DSChartT.InternalDatum | null;\n  containerRef: HTMLDivElement | null;\n  setContainerRef: React.Dispatch<React.SetStateAction<SVGElement | null>>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, string>;\n  axisLeftRef: SVGGElement | null;\n  scrapperPosY: string;\n  scrapperPosX: string;\n  xScrollbarPosition: number;\n  isGrabbed: boolean;\n  startPosition: number;\n  isScrollbarVisible: boolean;\n  lastPosition: React.MutableRefObject<number>;\n  containerRatio: number;\n  internalMargin: {\n    bottom: number;\n    top: number;\n    right: number;\n    left: number;\n  };\n  toolbarHeight: number;\n  leftLegendHeight: number;\n  rightLegendHeight: number;\n  leftLabelHeight: number;\n  leftLegendWidth: number;\n  leftLabelWidth: number;\n  leftLegend: SVGGElement;\n  bottomLegend: SVGGElement;\n  rightLegend: SVGGElement;\n  axisBottomHeight: number;\n  bottomLabelHeight: number;\n  rightLabelWidth: number;\n  axisRightWidth: number;\n  isHorizontal: boolean;\n  leftLabel: SVGGElement;\n  chartId: string;\n  hiddenSeries: string[];\n  stackedData: DSChartT.StackedSeriesByGroupT;\n  width: number;\n  height: number;\n  isZooming: boolean;\n  zoomStartingPosition: number;\n  movingPosition: number;\n  setActivePoint: React.Dispatch<React.SetStateAction<DSChartT.InternalDatum | null>>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getBandwidth: () => number;\n  setScrapperPosY: React.Dispatch<React.SetStateAction<string>>;\n  setScrapperPosX: React.Dispatch<React.SetStateAction<string>>;\n  setXScrollbarPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsGrabbed: React.Dispatch<React.SetStateAction<boolean>>;\n  setStartPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsScrollbarVisible: React.Dispatch<React.SetStateAction<boolean>>;\n  setAxisLeftRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setTopLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLegend: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisBottomRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setLeftLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setAxisRightRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setRightLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setBottomLabel: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  getXValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getYValue: (datum: DSChartT.InternalDatum) => string | number | Date;\n  getXValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  getYValueFormatted: (datum: DSChartT.InternalDatum) => string;\n  setHiddenSeries: React.Dispatch<React.SetStateAction<string[]>>;\n  getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  setContainerRatio: React.Dispatch<React.SetStateAction<number>>;\n  setToolbarRef: React.Dispatch<React.SetStateAction<SVGGElement | null>>;\n  setMovingPosition: React.Dispatch<React.SetStateAction<number>>;\n  setIsZooming: React.Dispatch<React.SetStateAction<boolean>>;\n  setZoomStartingPosition: React.Dispatch<React.SetStateAction<number>>;\n}\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: null,\n  setActivePoint: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\nexport const ChartContext = createContext(defaultContext);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,eAAe,iBAAiB;AAEzC,SAAS,aAAa,WAAW,oBAAoB;AAErD,SAAS,oBAAoB;AAuF7B,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ,UAAU;AAAA,EAClB,QAAQ,YAAY;AAAA,EACpB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,cAAc,UAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,YAAY,aAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AACO,MAAM,eAAe,cAAc,cAAc;",
   "names": []
 }

package/dist/esm/graphs/Chart/config/useChart.js

@@ -142,7 +142,7 @@ const useChart = (props) => {
     currentData,
     containerRatio
   });
-  const isHorizontal = useMemo(() => !!yScale.bandwidth, [yScale]);
+  const isHorizontal = useMemo(() => yScale?.type === "BAND", [yScale]);
   const { getXValue, getYValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted } = useGetters({
     xAxis,
     yAxis,

package/dist/esm/graphs/Chart/config/useChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useChart.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { debounce } from 'lodash';\nimport type { ScaleBand } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { defaultProps, propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { useValidateProps } from './useValidateProps';\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n  const [dimensions, setDimensions] = useState<number>(0);\n\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver(\n        debounce((entries: ResizeObserverConstructorEntries) => {\n          entries.forEach((entry) => {\n            setDimensions(Math.ceil(entry.contentRect.width));\n          });\n        }, 200),\n      );\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [ref]);\n  return dimensions;\n};\n\nexport const useChart = (props: DSChartT.Props) => {\n  useValidateProps(props, propTypes);\n\n  // const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;\n\n  const originalSeries = useMemo(() => {\n    if (series.length === 0) {\n      return defaultProps.series;\n    }\n    return series;\n  }, [series]);\n  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);\n  const svgRef = useRef(null);\n\n  const dimensionWidth = useResizeObserver(containerRef);\n  const width = useMemo(() => userWidth ?? dimensionWidth ?? 0, [dimensionWidth, userWidth]);\n\n  const height = useMemo(() => userHeight ?? 500, [userHeight]);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  // zoom\n\n  const [isZooming, setIsZooming] = useState(false);\n  const [zoomStartingPosition, setZoomStartingPosition] = useState(0);\n  const [movingPosition, setMovingPosition] = useState(0);\n\n  //\n\n  const [activePoint, setActivePoint] = useState(null);\n  const [activeSerie, setActiveSerie] = useState('');\n  const [scrapperPosY, setScrapperPosY] = useState('');\n  const [scrapperPosX, setScrapperPosX] = useState('');\n  const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n  const [containerRatio, setContainerRatio] = useState(\n    props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1,\n  );\n\n  const lastPosition = useRef(0);\n\n  const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n  const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n  const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n  const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n  const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n  const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n  const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n  const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n  const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n  const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n  const [toolbarRef, setToolbarRef] = useState<SVGGElement | null>(null);\n\n  const {\n    toolbarHeight,\n    axisBottomHeight,\n    axisRightWidth,\n    bottomLabelHeight,\n    internalMargin,\n    leftLegendWidth,\n    rightLabelWidth,\n    leftLabelHeight,\n    rightLegendHeight,\n    bottomLegendWidth,\n    leftLabelWidth,\n    axisLeftWidth,\n    topLegendHeight,\n    leftLegendHeight,\n  } = useInternalMargins({\n    axisLeftRef,\n    axisBottomRef,\n    axisRightRef,\n    leftLabel,\n    leftLegend,\n    rightLegend,\n    topLegend,\n    bottomLegend,\n    rightLabel,\n    bottomLabel,\n    toolbarRef,\n  });\n\n  const innerWidth = useMemo(\n    () => width - internalMargin.left - internalMargin.right,\n    [internalMargin.left, internalMargin.right, width],\n  );\n  const innerHeight = useMemo(\n    () => height - internalMargin.top - internalMargin.bottom,\n    [internalMargin.top, internalMargin.bottom, height],\n  );\n\n  const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n  const defaultScale = useMemo(() => {\n    if (yAxis.type === 'band') {\n      return 'x';\n    }\n\n    if ([undefined, 'band'].includes(xAxis.type)) {\n      return 'y';\n    }\n\n    return 'y';\n  }, [xAxis.type, yAxis.type]);\n  const currentData = useMemo(\n    () =>\n      originalSeries\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\n          // we set a default on the scale if the user do not pass it\n          scale: d.scale || defaultScale,\n          key: `${d.name}-${i}`,\n          data: d.data\n            .map((value, index) => ({\n              key: `${d.name}-${i}-${index}`,\n              value,\n              position: index,\n              serie: d.name,\n              scale: d.scale,\n            }))\n            .filter((datum) => datum.value !== null && datum.value !== undefined), // basically converting from DSChartT.SeriesT to DSChartT.InternalData...\n        })) as DSChartT.InternalData,\n    [defaultScale, hiddenSeries, originalSeries],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n  // @TODO we need to create a logic to get this from both axis\n  // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    originalSeries,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => !!(yScale as ScaleBand<string>).bandwidth, [yScale]);\n\n  const { getXValue, getYValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted } = useGetters({\n    xAxis,\n    yAxis,\n    isHorizontal,\n    xScale,\n    yScale,\n    y2Scale,\n  });\n  const chartId = useMemo(() => uid(6), []);\n\n  return useMemo(\n    () => ({\n      props,\n      originalSeries,\n      isZooming,\n      setIsZooming,\n      zoomStartingPosition,\n      setZoomStartingPosition,\n      setMovingPosition,\n      movingPosition,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      svgRef,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      setScrapperPosY,\n      scrapperPosX,\n      setScrapperPosX,\n      activePoint,\n      setActivePoint,\n      activeSerie,\n      setActiveSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      setContainerRef,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      lastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      rightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      axisBottomHeight,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXScaleValue,\n      getYScaleValue,\n      getYValueFormatted,\n      getXValueFormatted,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n      height,\n      width,\n      setContainerRatio,\n      toolbarHeight,\n      setToolbarRef,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n      bottomLegend,\n      leftLabelWidth,\n      axisLeftWidth,\n      topLegendHeight,\n      leftLegendHeight,\n    }),\n    [\n      props,\n      originalSeries,\n      isZooming,\n      zoomStartingPosition,\n      movingPosition,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      scrapperPosX,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      isGrabbed,\n      startPosition,\n      isScrollbarVisible,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      rightLegend,\n      axisBottomHeight,\n      getXScaleValue,\n      getYScaleValue,\n      getYValueFormatted,\n      getXValueFormatted,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      height,\n      width,\n      toolbarHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n      bottomLegend,\n      leftLabelWidth,\n      axisLeftWidth,\n      topLegendHeight,\n      leftLegendHeight,\n    ],\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useEffect, useRef, useCallback } from 'react';\nimport { uid } from 'uid';\nimport { debounce } from 'lodash';\nimport type { ScaleBand } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { defaultProps, propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { useValidateProps } from './useValidateProps';\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n  const [dimensions, setDimensions] = useState<number>(0);\n\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver(\n        debounce((entries: ResizeObserverConstructorEntries) => {\n          entries.forEach((entry) => {\n            setDimensions(Math.ceil(entry.contentRect.width));\n          });\n        }, 200),\n      );\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [ref]);\n  return dimensions;\n};\n\nexport const useChart = (props: DSChartT.Props) => {\n  useValidateProps(props, propTypes);\n\n  // const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n  const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;\n\n  const originalSeries = useMemo(() => {\n    if (series.length === 0) {\n      return defaultProps.series;\n    }\n    return series;\n  }, [series]);\n  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);\n  const svgRef = useRef(null);\n\n  const dimensionWidth = useResizeObserver(containerRef);\n  const width = useMemo(() => userWidth ?? dimensionWidth ?? 0, [dimensionWidth, userWidth]);\n\n  const height = useMemo(() => userHeight ?? 500, [userHeight]);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  // zoom\n\n  const [isZooming, setIsZooming] = useState(false);\n  const [zoomStartingPosition, setZoomStartingPosition] = useState(0);\n  const [movingPosition, setMovingPosition] = useState(0);\n\n  //\n\n  const [activePoint, setActivePoint] = useState(null);\n  const [activeSerie, setActiveSerie] = useState('');\n  const [scrapperPosY, setScrapperPosY] = useState('');\n  const [scrapperPosX, setScrapperPosX] = useState('');\n  const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n  const [containerRatio, setContainerRatio] = useState(\n    props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1,\n  );\n\n  const lastPosition = useRef(0);\n\n  const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n  const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n  const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n  const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n  const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n  const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n  const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n  const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n  const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n  const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n  const [toolbarRef, setToolbarRef] = useState<SVGGElement | null>(null);\n\n  const {\n    toolbarHeight,\n    axisBottomHeight,\n    axisRightWidth,\n    bottomLabelHeight,\n    internalMargin,\n    leftLegendWidth,\n    rightLabelWidth,\n    leftLabelHeight,\n    rightLegendHeight,\n    bottomLegendWidth,\n    leftLabelWidth,\n    axisLeftWidth,\n    topLegendHeight,\n    leftLegendHeight,\n  } = useInternalMargins({\n    axisLeftRef,\n    axisBottomRef,\n    axisRightRef,\n    leftLabel,\n    leftLegend,\n    rightLegend,\n    topLegend,\n    bottomLegend,\n    rightLabel,\n    bottomLabel,\n    toolbarRef,\n  });\n\n  const innerWidth = useMemo(\n    () => width - internalMargin.left - internalMargin.right,\n    [internalMargin.left, internalMargin.right, width],\n  );\n  const innerHeight = useMemo(\n    () => height - internalMargin.top - internalMargin.bottom,\n    [internalMargin.top, internalMargin.bottom, height],\n  );\n\n  const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n  const defaultScale = useMemo(() => {\n    if (yAxis.type === 'band') {\n      return 'x';\n    }\n\n    if ([undefined, 'band'].includes(xAxis.type)) {\n      return 'y';\n    }\n\n    return 'y';\n  }, [xAxis.type, yAxis.type]);\n  const currentData = useMemo(\n    () =>\n      originalSeries\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\n          // we set a default on the scale if the user do not pass it\n          scale: d.scale || defaultScale,\n          key: `${d.name}-${i}`,\n          data: d.data\n            .map((value, index) => ({\n              key: `${d.name}-${i}-${index}`,\n              value,\n              position: index,\n              serie: d.name,\n              scale: d.scale,\n            }))\n            .filter((datum) => datum.value !== null && datum.value !== undefined), // basically converting from DSChartT.SeriesT to DSChartT.InternalData...\n        })) as DSChartT.InternalData,\n    [defaultScale, hiddenSeries, originalSeries],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n  // @TODO we need to create a logic to get this from both axis\n  // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    originalSeries,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => yScale?.type === 'BAND', [yScale]);\n\n  const { getXValue, getYValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted } = useGetters({\n    xAxis,\n    yAxis,\n    isHorizontal,\n    xScale,\n    yScale,\n    y2Scale,\n  });\n  const chartId = useMemo(() => uid(6), []);\n\n  return useMemo(\n    () => ({\n      props,\n      originalSeries,\n      isZooming,\n      setIsZooming,\n      zoomStartingPosition,\n      setZoomStartingPosition,\n      setMovingPosition,\n      movingPosition,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      svgRef,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      setScrapperPosY,\n      scrapperPosX,\n      setScrapperPosX,\n      activePoint,\n      setActivePoint,\n      activeSerie,\n      setActiveSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      setContainerRef,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      lastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      rightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      axisBottomHeight,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXScaleValue,\n      getYScaleValue,\n      getYValueFormatted,\n      getXValueFormatted,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n      height,\n      width,\n      setContainerRatio,\n      toolbarHeight,\n      setToolbarRef,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n      bottomLegend,\n      leftLabelWidth,\n      axisLeftWidth,\n      topLegendHeight,\n      leftLegendHeight,\n    }),\n    [\n      props,\n      originalSeries,\n      isZooming,\n      zoomStartingPosition,\n      movingPosition,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      scrapperPosX,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      isGrabbed,\n      startPosition,\n      isScrollbarVisible,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      rightLegend,\n      axisBottomHeight,\n      getXScaleValue,\n      getYScaleValue,\n      getYValueFormatted,\n      getXValueFormatted,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      height,\n      width,\n      toolbarHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n      bottomLegend,\n      leftLabelWidth,\n      axisLeftWidth,\n      topLegendHeight,\n      leftLegendHeight,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,UAAU,WAAW,cAA2B;AAClE,SAAS,WAAW;AACpB,SAAS,gBAAgB;AAGzB,SAAS,cAAc,iBAAiB;AACxC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,OAAO,oBAAoB;AAC3B,SAAS,wBAAwB;AAGjC,MAAM,oBAAoB,CAAC,QAAwC;AACjE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,CAAC;AAEtD,YAAU,MAAM;AACd,QAAI,KAAK;AACP,YAAM,gBAAgB;AACtB,YAAM,iBAAiB,IAAI;AAAA,QACzB,SAAS,CAAC,YAA8C;AACtD,kBAAQ,QAAQ,CAAC,UAAU;AACzB,0BAAc,KAAK,KAAK,MAAM,YAAY,KAAK,CAAC;AAAA,UAClD,CAAC;AAAA,QACH,GAAG,GAAG;AAAA,MACR;AACA,qBAAe,QAAQ,aAAa;AAEpC,aAAO,MAAM;AACX,uBAAe,UAAU,aAAa;AAAA,MACxC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACR,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,UAA0B;AACjD,mBAAiB,OAAO,SAAS;AAGjC,QAAM,EAAE,QAAQ,OAAO,OAAO,OAAO,WAAW,QAAQ,YAAY,QAAQ,cAAc,IAAI;AAE9F,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,OAAO,WAAW,GAAG;AACvB,aAAO,aAAa;AAAA,IACtB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,CAAC;AACX,QAAM,CAAC,cAAc,eAAe,IAAI,SAAgC,IAAI;AAC5E,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,iBAAiB,kBAAkB,YAAY;AACrD,QAAM,QAAQ,QAAQ,MAAM,aAAa,kBAAkB,GAAG,CAAC,gBAAgB,SAAS,CAAC;AAEzF,QAAM,SAAS,QAAQ,MAAM,cAAc,KAAK,CAAC,UAAU,CAAC;AAE5D,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,CAAC;AAIpD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,CAAC;AAClE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAItD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AACjD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,EAAE;AACnD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,EAAE;AACnD,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,CAAC;AAC9D,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAC1C,OAAO,MAAM,UAAU,cAAc,SAAS,OAAO,MAAM,UAAU,cAAc,SAAS;AAAA,EAC9F;AAEA,QAAM,eAAe,OAAO,CAAC;AAE7B,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B,IAAI;AACvE,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA6B,IAAI;AAC3E,QAAM,CAAC,cAAc,eAAe,IAAI,SAA6B,IAAI;AAEzE,QAAM,CAAC,YAAY,aAAa,IAAI,SAA6B,IAAI;AACrE,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B,IAAI;AACvE,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,IAAI;AACnE,QAAM,CAAC,cAAc,eAAe,IAAI,SAA6B,IAAI;AAEzE,QAAM,CAAC,YAAY,aAAa,IAAI,SAA6B,IAAI;AACrE,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,IAAI;AACnE,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B,IAAI;AAEvE,QAAM,CAAC,YAAY,aAAa,IAAI,SAA6B,IAAI;AAErE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa;AAAA,IACjB,MAAM,QAAQ,eAAe,OAAO,eAAe;AAAA,IACnD,CAAC,eAAe,MAAM,eAAe,OAAO,KAAK;AAAA,EACnD;AACA,QAAM,cAAc;AAAA,IAClB,MAAM,SAAS,eAAe,MAAM,eAAe;AAAA,IACnD,CAAC,eAAe,KAAK,eAAe,QAAQ,MAAM;AAAA,EACpD;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmB,CAAC,CAAC;AAE7D,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,MAAM,SAAS,QAAQ;AACzB,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,QAAW,MAAM,EAAE,SAAS,MAAM,IAAI,GAAG;AAC5C,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC;AAC3B,QAAM,cAAc;AAAA,IAClB,MACE,eACG,OAAO,CAAC,UAAU,CAAC,aAAa,SAAS,MAAM,IAAI,CAAC,EACpD,IAAI,CAAC,GAAG,OAAO;AAAA,MACd,GAAG;AAAA,MAEH,OAAO,EAAE,SAAS;AAAA,MAClB,KAAK,GAAG,EAAE,QAAQ;AAAA,MAClB,MAAM,EAAE,KACL,IAAI,CAAC,OAAO,WAAW;AAAA,QACtB,KAAK,GAAG,EAAE,QAAQ,KAAK;AAAA,QACvB;AAAA,QACA,UAAU;AAAA,QACV,OAAO,EAAE;AAAA,QACT,OAAO,EAAE;AAAA,MACX,EAAE,EACD,OAAO,CAAC,UAAU,MAAM,UAAU,QAAQ,MAAM,UAAU,MAAS;AAAA,IACxE,EAAE;AAAA,IACN,CAAC,cAAc,cAAc,cAAc;AAAA,EAC7C;AAEA,QAAM,cAAc,QAAQ,MAAM,UAAU,eAAe,WAAW,GAAG,CAAC,eAAe,WAAW,CAAC;AAKrG,QAAM,SAAS,QAAQ,MAAM,YAAY,IAAI,CAAC,UAAU,MAAM,IAAI,GAAG,CAAC,WAAW,CAAC;AAElF,QAAM,EAAE,QAAQ,QAAQ,SAAS,eAAe,YAAY,aAAa,IAAI,UAAU;AAAA,IACrF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,QAAQ,MAAM,QAAQ,SAAS,QAAQ,CAAC,MAAM,CAAC;AAEpE,QAAM,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB,IAAI,WAAW;AAAA,IAClH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,UAAU,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAExC,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/graphs/Chart/config/useGetters.js

@@ -44,9 +44,9 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
       if (!datum)
         return null;
       if (xAxis.type === "linear") {
-        return xScale(getXValue(datum));
+        return xScale.get(getXValue(datum));
       }
-      return xScale(getXValue(datum));
+      return xScale.get(getXValue(datum));
     },
     [getXValue, xAxis.type, xScale]
   );
@@ -56,9 +56,9 @@ const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }) =>
         return null;
       const finalYScale = datum?.scale === "y2" ? y2Scale : yScale;
       if (yAxis.type === "band") {
-        return finalYScale(getYValue(datum));
+        return finalYScale.get(getYValue(datum));
       }
-      return finalYScale(getYValue(datum));
+      return finalYScale.get(getYValue(datum));
     },
     [getYValue, y2Scale, yAxis.type, yScale]
   );

package/dist/esm/graphs/Chart/config/useGetters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useGetters.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useMemo } from 'react';\nimport type { ScaleBand, ScaleLinear } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface UseGettersT {\n  xAxis: DSChartT.AxisT;\n  yAxis: DSChartT.AxisT;\n  isHorizontal: boolean;\n  xScale: DSChartT.Scales;\n  yScale: DSChartT.Scales;\n  y2Scale: DSChartT.Scales;\n}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }: UseGettersT) => {\n  const getXValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n      if (!isHorizontal) {\n        if (xAxis?.cols?.[datum.position]) {\n          return xAxis?.cols?.[datum.position];\n        }\n        if (typeof datum.value === 'object') return datum.value?.x;\n        return datum.position.toString();\n      }\n      if (typeof datum.value === 'number') {\n        return datum.value;\n      }\n      return datum.value?.x;\n    },\n    [isHorizontal, xAxis?.cols],\n  );\n\n  const getYValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      if (!isHorizontal) {\n        if (typeof datum.value === 'number') {\n          return datum.value;\n        }\n        return datum.value?.y;\n      }\n      if (yAxis?.cols?.[datum.position]) {\n        return yAxis?.cols?.[datum.position];\n      }\n      if (typeof datum.value === 'object') return datum.value?.y;\n      return datum.position.toString();\n    },\n    [isHorizontal, yAxis?.cols],\n  );\n\n  const getXScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      if (xAxis.type === 'linear') {\n        return (xScale as ScaleLinear<number, number, never>)(getXValue(datum) as number);\n      }\n      return (xScale as ScaleBand<string>)(getXValue(datum) as string);\n    },\n    [getXValue, xAxis.type, xScale],\n  );\n\n  const getYScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const finalYScale = datum?.scale === 'y2' ? y2Scale : yScale;\n      if (yAxis.type === 'band') {\n        return (finalYScale as ScaleBand<string>)(getYValue(datum) as string);\n      }\n      return (finalYScale as ScaleLinear<number, number, never>)(getYValue(datum) as number);\n    },\n    [getYValue, y2Scale, yAxis.type, yScale],\n  );\n\n  const getYValueFormatted = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const value = getYValue(datum);\n      if (typeof yAxis.tick?.tickFormat === 'function') return yAxis.tick.tickFormat(value);\n      return value;\n    },\n    [getYValue, yAxis.tick],\n  );\n\n  const getXValueFormatted = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const value = getXValue(datum);\n      if (typeof xAxis.tick?.tickFormat === 'function') return xAxis.tick.tickFormat(value);\n      return value;\n    },\n    [getXValue, xAxis.tick],\n  );\n\n  return useMemo(\n    () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted }),\n    [getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,eAAe;AAY9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,QAAQ,QAAQ,MAAmB;AAClG,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AACnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,OAAO,MAAM,WAAW;AACjC,iBAAO,OAAO,OAAO,MAAM;AAAA,QAC7B;AACA,YAAI,OAAO,MAAM,UAAU;AAAU,iBAAO,MAAM,OAAO;AACzD,eAAO,MAAM,SAAS,SAAS;AAAA,MACjC;AACA,UAAI,OAAO,MAAM,UAAU,UAAU;AACnC,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,MAAM,UAAU,UAAU;AACnC,iBAAO,MAAM;AAAA,QACf;AACA,eAAO,MAAM,OAAO;AAAA,MACtB;AACA,UAAI,OAAO,OAAO,MAAM,WAAW;AACjC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AACA,UAAI,OAAO,MAAM,UAAU;AAAU,eAAO,MAAM,OAAO;AACzD,aAAO,MAAM,SAAS,SAAS;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,MAAM,SAAS,UAAU;AAC3B,eAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,MAClF;AACA,aAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,IACjE;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,cAAc,OAAO,UAAU,OAAO,UAAU;AACtD,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAQ,YAAkC,UAAU,KAAK,CAAW;AAAA,MACtE;AACA,aAAQ,YAAmD,UAAU,KAAK,CAAW;AAAA,IACvF;AAAA,IACA,CAAC,WAAW,SAAS,MAAM,MAAM,MAAM;AAAA,EACzC;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB;AAAA,IACtG,CAAC,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,kBAAkB;AAAA,EAC/F;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useMemo } from 'react';\nimport type { ScaleBand, ScaleLinear } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\ninterface UseGettersT {\n  xAxis: DSChartT.AxisT;\n  yAxis: DSChartT.AxisT;\n  isHorizontal: boolean;\n  xScale: DSChartT.Scales;\n  yScale: DSChartT.Scales;\n  y2Scale: DSChartT.Scales;\n}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale, y2Scale }: UseGettersT) => {\n  const getXValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n      if (!isHorizontal) {\n        if (xAxis?.cols?.[datum.position]) {\n          return xAxis?.cols?.[datum.position];\n        }\n        if (typeof datum.value === 'object') return datum.value?.x;\n        return datum.position.toString();\n      }\n      if (typeof datum.value === 'number') {\n        return datum.value;\n      }\n      return datum.value?.x;\n    },\n    [isHorizontal, xAxis?.cols],\n  );\n\n  const getYValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      if (!isHorizontal) {\n        if (typeof datum.value === 'number') {\n          return datum.value;\n        }\n        return datum.value?.y;\n      }\n      if (yAxis?.cols?.[datum.position]) {\n        return yAxis?.cols?.[datum.position];\n      }\n      if (typeof datum.value === 'object') return datum.value?.y;\n      return datum.position.toString();\n    },\n    [isHorizontal, yAxis?.cols],\n  );\n\n  const getXScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      if (xAxis.type === 'linear') {\n        return xScale.get(getXValue(datum) as number);\n      }\n      return xScale.get(getXValue(datum));\n    },\n    [getXValue, xAxis.type, xScale],\n  );\n\n  const getYScaleValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const finalYScale = datum?.scale === 'y2' ? y2Scale : yScale;\n      if (yAxis.type === 'band') {\n        return (finalYScale as ScaleBand<string>).get(getYValue(datum) as string);\n      }\n      return (finalYScale as ScaleLinear<number, number, never>).get(getYValue(datum) as number);\n    },\n    [getYValue, y2Scale, yAxis.type, yScale],\n  );\n\n  const getYValueFormatted = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const value = getYValue(datum);\n      if (typeof yAxis.tick?.tickFormat === 'function') return yAxis.tick.tickFormat(value);\n      return value;\n    },\n    [getYValue, yAxis.tick],\n  );\n\n  const getXValueFormatted = useCallback(\n    (datum: DSChartT.InternalDatum) => {\n      if (!datum) return null;\n\n      const value = getXValue(datum);\n      if (typeof xAxis.tick?.tickFormat === 'function') return xAxis.tick.tickFormat(value);\n      return value;\n    },\n    [getXValue, xAxis.tick],\n  );\n\n  return useMemo(\n    () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted }),\n    [getYValue, getXValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,eAAe;AAY9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,QAAQ,QAAQ,MAAmB;AAClG,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AACnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,OAAO,MAAM,WAAW;AACjC,iBAAO,OAAO,OAAO,MAAM;AAAA,QAC7B;AACA,YAAI,OAAO,MAAM,UAAU;AAAU,iBAAO,MAAM,OAAO;AACzD,eAAO,MAAM,SAAS,SAAS;AAAA,MACjC;AACA,UAAI,OAAO,MAAM,UAAU,UAAU;AACnC,eAAO,MAAM;AAAA,MACf;AACA,aAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,CAAC,cAAc;AACjB,YAAI,OAAO,MAAM,UAAU,UAAU;AACnC,iBAAO,MAAM;AAAA,QACf;AACA,eAAO,MAAM,OAAO;AAAA,MACtB;AACA,UAAI,OAAO,OAAO,MAAM,WAAW;AACjC,eAAO,OAAO,OAAO,MAAM;AAAA,MAC7B;AACA,UAAI,OAAO,MAAM,UAAU;AAAU,eAAO,MAAM,OAAO;AACzD,aAAO,MAAM,SAAS,SAAS;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,OAAO,IAAI;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,UAAI,MAAM,SAAS,UAAU;AAC3B,eAAO,OAAO,IAAI,UAAU,KAAK,CAAW;AAAA,MAC9C;AACA,aAAO,OAAO,IAAI,UAAU,KAAK,CAAC;AAAA,IACpC;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,cAAc,OAAO,UAAU,OAAO,UAAU;AACtD,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAQ,YAAkC,IAAI,UAAU,KAAK,CAAW;AAAA,MAC1E;AACA,aAAQ,YAAmD,IAAI,UAAU,KAAK,CAAW;AAAA,IAC3F;AAAA,IACA,CAAC,WAAW,SAAS,MAAM,MAAM,MAAM;AAAA,EACzC;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAkC;AACjC,UAAI,CAAC;AAAO,eAAO;AAEnB,YAAM,QAAQ,UAAU,KAAK;AAC7B,UAAI,OAAO,MAAM,MAAM,eAAe;AAAY,eAAO,MAAM,KAAK,WAAW,KAAK;AACpF,aAAO;AAAA,IACT;AAAA,IACA,CAAC,WAAW,MAAM,IAAI;AAAA,EACxB;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,mBAAmB;AAAA,IACtG,CAAC,WAAW,WAAW,gBAAgB,gBAAgB,oBAAoB,kBAAkB;AAAA,EAC/F;AACF;",
   "names": []
 }

package/dist/esm/graphs/Chart/config/useInternalMargins.js

@@ -35,11 +35,11 @@ const useInternalMargins = ({
   toolbarRef
 }) => {
   const { height: toolbarHeight } = useResizeObserver(toolbarRef, { offsetHeight: 10 });
-  const { width: axisRightWidth } = useResizeObserver(axisRightRef);
+  const { width: axisRightWidth } = useResizeObserver(axisRightRef, { offsetWidth: 10 });
   const { height: axisBottomHeight } = useResizeObserver(axisBottomRef, { offsetHeight: 20 });
   const { width: axisLeftWidth } = useResizeObserver(axisLeftRef, { offsetWidth: 10 });
   const { height: bottomLabelHeight } = useResizeObserver(bottomLabel, { offsetHeight: 10 });
-  const { width: rightLabelWidth } = useResizeObserver(rightLabel);
+  const { width: rightLabelWidth } = useResizeObserver(rightLabel, { offsetWidth: 10 });
   const { width: leftLabelWidth, height: leftLabelHeight } = useResizeObserver(leftLabel);
   const { height: topLegendHeight } = useResizeObserver(topLegend, { offsetHeight: 20 });
   const { height: bottomLegendHeight, width: bottomLegendWidth } = useResizeObserver(bottomLegend, {