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

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      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(serie.data[i]);\n        const yValue = sequence[0] - sequence[1];\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]);\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            />\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;ADAvB;AACA,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;AAAA,IAAE,UAAU,wBAAwB;AAAA,IAClC,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AAErC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AACtC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAChF,YAAM,aAAa,OAAO,MAAM,IAAI,cAAc,gBAAgB,YAAY;AAC9E,YAAM,aAAa,OAAO,SAAS,EAAE;AAErC,aACE,4CAAC;AAAA,QAA0B,MAAM,WAAW,MAAM,IAAI;AAAA,QAAG,WAAW,aAAa;AAAA,QAC/E,sDAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH,IAAI,MAAM,KAAK,GAAG;AAAA,UAClB,MAAM,MAAM;AAAA,SACd;AAAA,SATM,MAAM,KAAK,GAAG,GAUtB;AAAA,IAEJ,CAAC;AAAA,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        const yValue = sequence[0] - sequence[1];\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]);\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            />\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;ADAvB;AACA,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;AAAA,IAAE,UAAU,wBAAwB;AAAA,IAClC,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,WAAW,uBAAuB,IAAI;AAC5C,YAAM,eAAe,SAAS,OAAO;AAErC,YAAM,SAAS,UAAU,GAAG;AAC5B,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAChF,YAAM,aAAa,OAAO,MAAM,IAAI,cAAc,gBAAgB,YAAY;AAC9E,YAAM,aAAa,OAAO,SAAS,EAAE;AAErC,aACE,4CAAC;AAAA,QAA0B,MAAM,WAAW,MAAM,IAAI;AAAA,QAAG,WAAW,aAAa;AAAA,QAC/E,sDAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH,IAAI,MAAM,KAAK,GAAG;AAAA,UAClB,MAAM,MAAM;AAAA,SACd;AAAA,SATM,MAAM,KAAK,GAAG,GAUtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -49,7 +49,7 @@ const StyledSVGWrapper = import_ds_system.styled.div`
   cursor: ${({ isGrabbed }) => isGrabbed ? "grabbing" : "default"};
 
   .domain {
-    stroke-width: 2px;
+    stroke-width: 1px;
   }
 `;
 const StyledAxis = (0, import_ds_system.styled)("g")`
@@ -57,19 +57,20 @@ const StyledAxis = (0, import_ds_system.styled)("g")`
     fill: #635f5d;
   }
 
-  text.axis-label {
-    /* font-size: 2.5em; */
-  }
-
   .tick text {
-    ${({ color }) => color ? `fill: ${import_colorPallet.COLOR_PALLET[color] ?? color}` : ""}
+    ${({ tickColor }) => tickColor ? `fill: ${import_colorPallet.COLOR_PALLET[tickColor] ?? tickColor}` : ""}
   }
   .tick line {
-    ${({ color }) => color ? `stroke: ${import_colorPallet.COLOR_PALLET[color] ?? color}` : ""}
+    ${({ tickColor }) => tickColor ? `stroke: ${import_colorPallet.COLOR_PALLET[tickColor] ?? tickColor}` : ""}
   }
+
   line {
     stroke: #c0c0bb;
   }
+
+  .domain {
+    ${({ axisColor }) => axisColor ? `stroke: ${import_colorPallet.COLOR_PALLET[axisColor] ?? axisColor}` : ""}
+  }
 `;
 const StyledAxisLabel = (0, import_ds_system.styled)("text")`
   font-size: 13px;
@@ -79,10 +80,10 @@ const StyledGrid = (0, import_ds_system.styled)("g")`
   line {
     stroke: #c0c0bb;
   }
-`;
-const borderCircle = import_ds_system.css`
-  stroke: #c64252;
-  stroke-width: 2;
+
+  .domain {
+    display: none;
+  }
 `;
 const StyleFocusableRegion = (0, import_ds_system.styled)("div")`
   width: ${({ s }) => s * 2}px;

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';\nexport const StyledSVGWrapper = styled.div`\n  :focus {\n    outline: none;\n  }\n  :focus-within {\n    outline: none;\n  }\n\n  cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n  .domain {\n    stroke-width: 2px;\n  }\n`;\n\nexport const StyledAxis = styled('g')`\n  text {\n    fill: #635f5d;\n  }\n\n  text.axis-label {\n    /* font-size: 2.5em; */\n  }\n\n  .tick text {\n    ${({ color }) => (color ? `fill: ${COLOR_PALLET[color] ?? color}` : '')}\n  }\n  .tick line {\n    ${({ color }) => (color ? `stroke: ${COLOR_PALLET[color] ?? color}` : '')}\n  }\n  line {\n    stroke: #c0c0bb;\n  }\n`;\n\nexport const StyledAxisLabel = styled('text')`\n  font-size: 13px;\n  font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n  line {\n    stroke: #c0c0bb;\n  }\n`;\n\nconst borderCircle = css`\n  stroke: #c64252;\n  stroke-width: 2;\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;AACtB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlD,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAU9B,CAAC,EAAE,MAAM,MAAO,QAAQ,SAAS,gCAAa,UAAU,UAAU;AAAA;AAAA;AAAA,MAGlE,CAAC,EAAE,MAAM,MAAO,QAAQ,WAAW,gCAAa,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnE,MAAM,sBAAkB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,eAAe;AAAA;AAAA;AAAA;AAKd,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, 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  :focus {\n    outline: none;\n  }\n  :focus-within {\n    outline: none;\n  }\n\n  cursor: ${({ isGrabbed }) => (isGrabbed ? 'grabbing' : 'default')};\n\n  .domain {\n    stroke-width: 1px;\n  }\n`;\n\nexport const StyledAxis = styled('g')<StyledAxisT>`\n  text {\n    fill: #635f5d;\n  }\n\n  .tick text {\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: 13px;\n  font-weight: 600;\n`;\n\nexport const StyledGrid = styled('g')`\n  line {\n    stroke: #c0c0bb;\n  }\n\n  .domain {\n    display: none;\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,YAQ3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlD,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM9B,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;AAAA;AAAA;AAAA;AAAA;AAU7B,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/cjs/graphs/constants.js

@@ -26,17 +26,18 @@ var constants_exports = {};
 __export(constants_exports, {
   FOCUS_RING: () => FOCUS_RING,
   LINE: () => LINE,
+  SCALE_TYPES: () => SCALE_TYPES,
   SCRAPPER: () => SCRAPPER,
-  TICK_FORMATS: () => TICK_FORMATS,
   curveStyleMap: () => curveStyleMap
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
 var import_d3 = require("d3");
-const TICK_FORMATS = {
-  MILLIONS: (v) => (0, import_d3.format)(".2s")(v).replace("G", "B"),
-  KSEPARATOR: (v) => (0, import_d3.format)(",")(v),
-  TIME: (userFormat) => (v) => (0, import_d3.timeFormat)(userFormat)(v)
+const SCALE_TYPES = {
+  LINEAR: "linear",
+  BAND: "band",
+  LOG: "log",
+  TIME: "time"
 };
 const FOCUS_RING = {
   COLOR: "#335cad",

package/dist/cjs/graphs/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/graphs/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { format, timeFormat, curveLinear, curveMonotoneX, curveNatural } from 'd3';\n\nexport const TICK_FORMATS = {\n  MILLIONS: (v) => format('.2s')(v).replace('G', 'B'),\n  KSEPARATOR: (v) => format(',')(v),\n  TIME: (userFormat: string) => (v) => timeFormat(userFormat)(v),\n};\n\nexport const FOCUS_RING = {\n  COLOR: '#335cad',\n  STROKE_WIDTH: 2,\n  OFFSET: 4,\n};\n\nexport const SCRAPPER = {\n  TYPE_HORIZONTAL: 'horizontal',\n  TYPE_VERTICAL: 'vertical',\n};\n\nexport const LINE = {\n  POINT_STYLE: {\n    CIRCLE: 'CIRCLE',\n    SQUARE: 'SQUARE',\n    DIAMOND: 'DIAMOND',\n  },\n  DEFAULT_POINT_RADIUS: 4,\n  DASH_STYLE: {\n    SHORTDOT: 'SHORTDOT',\n    SHORTDASHDOT: 'SHORTDASHDOT',\n    DASH: 'DASH',\n    SHORTDASH: 'SHORTDASH',\n  },\n  DASH_STYLE_VALUES: {\n    SHORTDOT: [2, 2],\n    SHORTDASHDOT: [6, 2, 2, 2],\n    DASH: [8, 6],\n    SHORTDASH: [6, 2],\n  },\n  CURVE_STYLE: {\n    LINEAR: 'LINEAR',\n    SPLINE: 'SPLINE',\n  },\n};\n\nexport const curveStyleMap = {\n  [LINE.CURVE_STYLE.LINEAR]: curveLinear,\n  [LINE.CURVE_STYLE.SPLINE]: curveMonotoneX,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gBAA8E;AAEvE,MAAM,eAAe;AAAA,EAC1B,UAAU,CAAC,UAAM,kBAAO,KAAK,EAAE,CAAC,EAAE,QAAQ,KAAK,GAAG;AAAA,EAClD,YAAY,CAAC,UAAM,kBAAO,GAAG,EAAE,CAAC;AAAA,EAChC,MAAM,CAAC,eAAuB,CAAC,UAAM,sBAAW,UAAU,EAAE,CAAC;AAC/D;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AACV;AAEO,MAAM,WAAW;AAAA,EACtB,iBAAiB;AAAA,EACjB,eAAe;AACjB;AAEO,MAAM,OAAO;AAAA,EAClB,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU,CAAC,GAAG,CAAC;AAAA,IACf,cAAc,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACzB,MAAM,CAAC,GAAG,CAAC;AAAA,IACX,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAC7B;",
+  "sourcesContent": ["import { curveLinear, curveMonotoneX } from 'd3';\n\nexport const SCALE_TYPES = {\n  LINEAR: 'linear',\n  BAND: 'band',\n  LOG: 'log',\n  TIME: 'time',\n};\n\nexport const FOCUS_RING = {\n  COLOR: '#335cad',\n  STROKE_WIDTH: 2,\n  OFFSET: 4,\n};\n\nexport const SCRAPPER = {\n  TYPE_HORIZONTAL: 'horizontal',\n  TYPE_VERTICAL: 'vertical',\n};\n\nexport const LINE = {\n  POINT_STYLE: {\n    CIRCLE: 'CIRCLE',\n    SQUARE: 'SQUARE',\n    DIAMOND: 'DIAMOND',\n  },\n  DEFAULT_POINT_RADIUS: 4,\n  DASH_STYLE: {\n    SHORTDOT: 'SHORTDOT',\n    SHORTDASHDOT: 'SHORTDASHDOT',\n    DASH: 'DASH',\n    SHORTDASH: 'SHORTDASH',\n  },\n  DASH_STYLE_VALUES: {\n    SHORTDOT: [2, 2],\n    SHORTDASHDOT: [6, 2, 2, 2],\n    DASH: [8, 6],\n    SHORTDASH: [6, 2],\n  },\n  CURVE_STYLE: {\n    LINEAR: 'LINEAR',\n    SPLINE: 'SPLINE',\n  },\n};\n\nexport const curveStyleMap = {\n  [LINE.CURVE_STYLE.LINEAR]: curveLinear,\n  [LINE.CURVE_STYLE.SPLINE]: curveMonotoneX,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gBAA4C;AAErC,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AACV;AAEO,MAAM,WAAW;AAAA,EACtB,iBAAiB;AAAA,EACjB,eAAe;AACjB;AAEO,MAAM,OAAO;AAAA,EAClB,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU,CAAC,GAAG,CAAC;AAAA,IACf,cAAc,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACzB,MAAM,CAAC,GAAG,CAAC;AAAA,IACX,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAC7B;",
   "names": []
 }

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

@@ -3,14 +3,11 @@ import { jsx } from "react/jsx-runtime";
 import { ChartContainer } from "./parts/ChartContainer";
 import { ChartContext } from "./ChartContext";
 import { useChart } from "./config/useChart";
-import { Axes } from "./parts/Axis/Axes";
 const Chart = (props) => {
   const ctx = useChart(props);
   return /* @__PURE__ */ jsx(ChartContext.Provider, {
     value: ctx,
-    children: /* @__PURE__ */ jsx(ChartContainer, {
-      children: /* @__PURE__ */ jsx(Axes, {})
-    })
+    children: /* @__PURE__ */ jsx(ChartContainer, {})
   });
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/Chart.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nimport { ChartContainer } from './parts/ChartContainer';\n// import { SeriesFactory } from './parts/SeriesFactory';\n// import { ActivePoint } from './parts/ActivePoint';\n\nimport { ChartContext } from './ChartContext';\nimport { useChart } from './config/useChart';\nimport type { DSChartT } from './react-desc-prop-types';\n\nimport { Axes } from './parts/Axis/Axes';\nexport const Chart: React.ComponentType<DSChartT.Props> = (props) => {\n  const ctx = useChart(props);\n  return (\n    <ChartContext.Provider value={ctx}>\n      <ChartContainer>\n        <Axes />\n      </ChartContainer>\n    </ChartContext.Provider>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAS,sBAAsB;AAI/B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AAGzB,SAAS,YAAY;AACd,MAAM,QAA6C,CAAC,UAAU;AACnE,QAAM,MAAM,SAAS,KAAK;AAC1B,SACE,oBAAC,aAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,IAC5B,8BAAC;AAAA,MACC,8BAAC,QAAK;AAAA,KACR;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer';\nimport { ChartContext } from './ChartContext';\nimport { useChart } from './config/useChart';\nimport type { DSChartT } from './react-desc-prop-types';\n\nimport { Axes } from './parts/Axis/Axes';\nexport const Chart: React.ComponentType<DSChartT.Props> = (props) => {\n  const ctx = useChart(props);\n  return (\n    <ChartContext.Provider value={ctx}>\n      <ChartContainer />\n    </ChartContext.Provider>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AAIlB,MAAM,QAA6C,CAAC,UAAU;AACnE,QAAM,MAAM,SAAS,KAAK;AAC1B,SACE,oBAAC,aAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,IAC5B,8BAAC,kBAAe;AAAA,GAClB;AAEJ;",
   "names": []
 }

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

@@ -8,12 +8,9 @@ const defaultContext = {
   yScale: scaleLinear(),
   innerHeight: 0,
   innerWidth: 0,
-  activePoint: "",
+  activePoint: null,
   setActivePoint: () => {
   },
-  activeSerie: "",
-  setActiveSerie: () => {
-  },
   scrapperPosY: "",
   setScrapperPosY: () => {
   },

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 { createContext, createRef } from 'react';\nimport { ScaleLinear, ScaleBand, scaleLinear, scaleBand, scaleOrdinal, ScaleOrdinal } from 'd3';\nimport { defaultProps, DSChartT } from './react-desc-prop-types';\n\ninterface ContextT {\n  props: DSChartT.Props;\n  xScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  yScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: string;\n  setActivePoint: React.Dispatch<React.SetStateAction<string>>;\n  activeSerie: string;\n  setActiveSerie: React.Dispatch<React.SetStateAction<string>>;\n  containerRef: React.RefObject<HTMLDivElement>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, never>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<Element | undefined>>;\n  axisLeftRef: Element;\n}\n\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: '',\n  setActivePoint: () => {},\n  activeSerie: '',\n  setActiveSerie: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\n\nexport const ChartContext = createContext(defaultContext);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AACzC,SAAiC,aAAa,WAAW,oBAAkC;AAC3F,SAAS,oBAA8B;AAoBvC,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,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;AAEO,MAAM,eAAe,cAAc,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { ScaleLinear, ScaleBand, scaleLinear, scaleBand, scaleOrdinal, ScaleOrdinal } from 'd3';\nimport { defaultProps, DSChartT } from './react-desc-prop-types';\ninterface ContextT {\n  props: DSChartT.Props;\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: React.RefObject<HTMLDivElement>;\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  oldLastPosition: React.MutableRefObject<number>;\n  containerRatio: number;\n  internalMargin: {\n    bottom: number;\n    top: number;\n    right: number;\n    left: number;\n  };\n  leftLegendWidth: number;\n  leftLegend: 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  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  setHiddenSeries: React.Dispatch<React.SetStateAction<string[]>>;\n  getXScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\n  getYScaleValue: (datum: DSChartT.InternalDatum) => number | undefined;\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;ACAvB,SAAS,eAAe,iBAAiB;AACzC,SAAiC,aAAa,WAAW,oBAAkC;AAC3F,SAAS,oBAA8B;AAkEvC,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

@@ -1,9 +1,10 @@
 import * as React from "react";
-import { useMemo, useState, useRef, useCallback } from "react";
+import { useMemo, useState, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { useScales } from "./useScales";
 import { stackData } from "../helpers";
 import { useInternalMargins } from "./useInternalMargins";
+import { useGetters } from "./useGetters";
 const useChart = (props) => {
   const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;
   const containerRef = useRef(null);
@@ -17,16 +18,16 @@ const useChart = (props) => {
   const [xScrollbarPosition, setXScrollbarPosition] = useState(0);
   const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);
   const oldLastPosition = useRef(0);
-  const [axisLeftRef, setAxisLeftRef] = useState();
-  const [axisBottomRef, setAxisBottomRef] = useState();
-  const [axisRightRef, setAxisRightRef] = useState();
-  const [leftLegend, setLeftLegend] = useState();
-  const [rightLegend, setRightLegend] = useState();
-  const [topLegend, setTopLegend] = useState();
-  const [bottomLegend, setBottomLegend] = useState();
-  const [rightLabel, setRightLabel] = useState();
-  const [leftLabel, setLeftLabel] = useState();
-  const [bottomLabel, setBottomLabel] = useState();
+  const [axisLeftRef, setAxisLeftRef] = useState(null);
+  const [axisBottomRef, setAxisBottomRef] = useState(null);
+  const [axisRightRef, setAxisRightRef] = useState(null);
+  const [leftLegend, setLeftLegend] = useState(null);
+  const [rightLegend, setRightLegend] = useState(null);
+  const [topLegend, setTopLegend] = useState(null);
+  const [bottomLegend, setBottomLegend] = useState(null);
+  const [rightLabel, setRightLabel] = useState(null);
+  const [leftLabel, setLeftLabel] = useState(null);
+  const [bottomLabel, setBottomLabel] = useState(null);
   const { axisBottomHeight, axisRightWidth, bottomLabelHeight, internalMargin, leftLegendWidth, rightLabelWidth } = useInternalMargins({
     axisLeftRef,
     axisBottomRef,
@@ -57,12 +58,12 @@ const useChart = (props) => {
         value,
         position: index,
         serie: d.name
-      })).filter((datum) => datum.value !== null)
+      })).filter((datum) => datum.value !== null && datum.value !== void 0)
     })),
     [hiddenSeries, series]
   );
   const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);
-  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? 1;
+  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;
   const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);
   const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({
     props,
@@ -74,18 +75,17 @@ const useChart = (props) => {
     containerRatio
   });
   const isHorizontal = useMemo(() => !!yScale.bandwidth, [yScale]);
-  const getXValue = useCallback(
-    (datum) => !isHorizontal ? xAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position : datum.value.x ?? datum.value,
-    [isHorizontal, xAxis?.cols]
-  );
-  const getYValue = useCallback(
-    (datum) => !isHorizontal ? datum.value?.y ?? datum.value : yAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position,
-    [isHorizontal, yAxis?.cols]
-  );
+  const { getXValue, getYValue, getXScaleValue, getYScaleValue } = useGetters({
+    xAxis,
+    yAxis,
+    isHorizontal,
+    xScale,
+    yScale
+  });
   const chartId = useMemo(() => uuidv4(), []);
   return useMemo(
     () => ({
-      props: { ...props },
+      props,
       innerHeight,
       innerWidth,
       groups,
@@ -132,6 +132,8 @@ const useChart = (props) => {
       setAxisRightRef,
       setRightLabel,
       setBottomLabel,
+      getXScaleValue,
+      getYScaleValue,
       bottomLabelHeight,
       rightLabelWidth,
       axisRightWidth,
@@ -197,7 +199,9 @@ const useChart = (props) => {
       leftLabel,
       chartId,
       hiddenSeries,
-      setHiddenSeries
+      setHiddenSeries,
+      getXScaleValue,
+      getYScaleValue
     ]
   );
 };

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, useRef, useCallback } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSChartT } from '../react-desc-prop-types';\n// import { propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nexport const useChart = (props: DSChartT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\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 oldLastPosition = useRef(0);\n\n  const [axisLeftRef, setAxisLeftRef] = useState<Element>();\n  const [axisBottomRef, setAxisBottomRef] = useState<Element>();\n  const [axisRightRef, setAxisRightRef] = useState<Element>();\n\n  const [leftLegend, setLeftLegend] = useState<Element>();\n  const [rightLegend, setRightLegend] = useState<Element>();\n  const [topLegend, setTopLegend] = useState<Element>();\n  const [bottomLegend, setBottomLegend] = useState<Element>();\n\n  const [rightLabel, setRightLabel] = useState<Element>();\n  const [leftLabel, setLeftLabel] = useState<Element>();\n  const [bottomLabel, setBottomLabel] = useState<Element>();\n\n  const { axisBottomHeight, axisRightWidth, bottomLabelHeight, internalMargin, leftLegendWidth, rightLabelWidth } =\n    useInternalMargins({\n      axisLeftRef,\n      axisBottomRef,\n      axisRightRef,\n      leftLabel,\n      leftLegend,\n      rightLegend,\n      topLegend,\n      bottomLegend,\n      rightLabel,\n      bottomLabel,\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 currentData = useMemo(\n    () =>\n      series\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\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            }))\n            .filter((datum) => datum.value !== null),\n        })),\n    [hiddenSeries, series],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n  // @TODO we need to create a logic to get this from both axis\n  const containerRatio = (props?.xAxis.advanced?.pointSpacing?.value as number) ?? 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    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => !!yScale.bandwidth, [yScale]);\n\n  const getXValue = useCallback(\n    (datum) =>\n      !isHorizontal ? xAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position : datum.value.x ?? datum.value,\n    [isHorizontal, xAxis?.cols],\n  );\n\n  const getYValue = useCallback(\n    (datum) =>\n      !isHorizontal ? datum.value?.y ?? datum.value : yAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position,\n    [isHorizontal, yAxis?.cols],\n  );\n\n  const chartId = useMemo(() => uuidv4(), []);\n\n  return useMemo(\n    () => ({\n      props: { ...props },\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      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\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      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n    }),\n    [\n      props,\n      currentData,\n      innerHeight,\n      innerWidth,\n      groups,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      scrapperPosX,\n      setScrapperPosX,\n      xScale,\n      yScale,\n      y2Scale,\n      getBandwidth,\n      scrapperPosY,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      rightLabelWidth,\n      rightLegend,\n      bottomLabelHeight,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisBottomHeight,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      axisRightWidth,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\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, useRef } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { ScaleBand } from 'd3';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSChartT } from '../react-desc-prop-types';\n// import { propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\nexport const useChart = (props: DSChartT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\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 oldLastPosition = 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 { axisBottomHeight, axisRightWidth, bottomLabelHeight, internalMargin, leftLegendWidth, rightLabelWidth } =\n    useInternalMargins({\n      axisLeftRef,\n      axisBottomRef,\n      axisRightRef,\n      leftLabel,\n      leftLegend,\n      rightLegend,\n      topLegend,\n      bottomLegend,\n      rightLabel,\n      bottomLabel,\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 currentData = useMemo(\n    () =>\n      series\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\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            }))\n            .filter((datum) => datum.value !== null && datum.value !== undefined),\n        })),\n    [hiddenSeries, series],\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    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 } = useGetters({\n    xAxis,\n    yAxis,\n    isHorizontal,\n    xScale,\n    yScale,\n  });\n  const chartId = useMemo(() => uuidv4(), []);\n\n  return useMemo(\n    () => ({\n      props,\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      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\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      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n    }),\n    [\n      props,\n      currentData,\n      innerHeight,\n      innerWidth,\n      groups,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      scrapperPosX,\n      setScrapperPosX,\n      xScale,\n      yScale,\n      y2Scale,\n      getBandwidth,\n      scrapperPosY,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      rightLabelWidth,\n      rightLegend,\n      bottomLabelHeight,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisBottomHeight,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      axisRightWidth,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n      getXScaleValue,\n      getYScaleValue,\n    ],\n  );\n};\n"],
+  "mappings": "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IACA;AAAA,EACF,CAAC;AACD,QAAM,UAAU,QAAQ,MAAM,OAAO,GAAG,CAAC,CAAC;AAE1C,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,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,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { useCallback, useMemo } from "react";
+const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale }) => {
+  const getXValue = useCallback(
+    (datum) => {
+      if (!isHorizontal) {
+        if (xAxis?.cols?.[datum.position]) {
+          return xAxis?.cols?.[datum.position];
+        }
+        if (typeof datum.value === "object")
+          return datum.value?.x;
+        return datum.position.toString();
+      }
+      if (typeof datum.value === "number") {
+        return datum.value;
+      }
+      return datum.value?.x;
+    },
+    [isHorizontal, xAxis?.cols]
+  );
+  const getYValue = useCallback(
+    (datum) => {
+      if (!isHorizontal) {
+        if (typeof datum.value === "number") {
+          return datum.value;
+        }
+        return datum.value?.y;
+      }
+      if (yAxis?.cols?.[datum.position]) {
+        return yAxis?.cols?.[datum.position];
+      }
+      if (typeof datum.value === "object")
+        return datum.value?.y;
+      return datum.position.toString();
+    },
+    [isHorizontal, yAxis?.cols]
+  );
+  const getXScaleValue = useCallback(
+    (datum) => {
+      if (xAxis.type === "linear") {
+        return xScale(getXValue(datum));
+      }
+      return xScale(getXValue(datum));
+    },
+    [getXValue, xAxis.type, xScale]
+  );
+  const getYScaleValue = useCallback(
+    (datum) => {
+      if (yAxis.type === "band") {
+        return yScale(getYValue(datum));
+      }
+      return yScale(getYValue(datum));
+    },
+    [getYValue, yAxis.type, yScale]
+  );
+  return useMemo(
+    () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue }),
+    [getYValue, getXValue, getXScaleValue, getYScaleValue]
+  );
+};
+export {
+  useGetters
+};
+//# sourceMappingURL=useGetters.js.map

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

@@ -0,0 +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 { ScaleBand, ScaleLinear } from 'd3';\nimport { 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}\nexport const useGetters = ({ xAxis, isHorizontal, yAxis, xScale, yScale }: UseGettersT) => {\n  const getXValue = useCallback(\n    (datum: DSChartT.InternalDatum) => {\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 (!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 (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 (yAxis.type === 'band') {\n        return (yScale as ScaleBand<string>)(getYValue(datum) as string);\n      }\n      return (yScale as ScaleLinear<number, number, never>)(getYValue(datum) as number);\n    },\n    [getYValue, yAxis.type, yScale],\n  );\n\n  return useMemo(\n    () => ({ getYValue, getXValue, getXScaleValue, getYScaleValue }),\n    [getYValue, getXValue, getXScaleValue, getYScaleValue],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,eAAe;AAW9B,MAAM,aAAa,CAAC,EAAE,OAAO,cAAc,OAAO,QAAQ,OAAO,MAAmB;AACzF,QAAM,YAAY;AAAA,IAChB,CAAC,UAAkC;AACjC,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,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,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,MAAM,SAAS,QAAQ;AACzB,eAAQ,OAA6B,UAAU,KAAK,CAAW;AAAA,MACjE;AACA,aAAQ,OAA8C,UAAU,KAAK,CAAW;AAAA,IAClF;AAAA,IACA,CAAC,WAAW,MAAM,MAAM,MAAM;AAAA,EAChC;AAEA,SAAO;AAAA,IACL,OAAO,EAAE,WAAW,WAAW,gBAAgB,eAAe;AAAA,IAC9D,CAAC,WAAW,WAAW,gBAAgB,cAAc;AAAA,EACvD;AACF;",
+  "names": []
+}

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

@@ -26,7 +26,7 @@ const useInternalMargins = ({
     () => ({
       bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,
       top: 10 + topLegendHeight,
-      right: 10 + rightLabelWidth + axisRightWidth + rightLegendWidth,
+      right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,
       left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth
     }),
     [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useInternalMargins.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo } from 'react';\n\ninterface UseInternalMarginsT {\n  axisLeftRef?: Element;\n  axisBottomRef?: Element;\n  axisRightRef?: Element;\n  leftLegend?: Element;\n  leftLabel?: Element;\n  rightLegend?: Element;\n  topLegend?: Element;\n  bottomLegend?: Element;\n  rightLabel?: Element;\n  bottomLabel?: Element;\n}\nexport const useInternalMargins = ({\n  axisLeftRef,\n  axisBottomRef,\n  axisRightRef,\n  leftLabel,\n  leftLegend,\n  rightLegend,\n  topLegend,\n  bottomLegend,\n  rightLabel,\n  bottomLabel,\n}: UseInternalMarginsT) => {\n  // Axis\n  const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);\n  const axisBottomHeight = useMemo(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);\n  const axisRightWidth = useMemo(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);\n\n  // Labels\n  const bottomLabelHeight = useMemo(() => bottomLabel?.getBoundingClientRect()?.height || 0, [bottomLabel]);\n  const rightLabelWidth = useMemo(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);\n  const leftLabelWidth = useMemo(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);\n\n  // Legends\n  const topLegendHeight = useMemo(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);\n  const bottomLegendHeight = useMemo(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);\n  const rightLegendWidth = useMemo(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);\n  const leftLegendWidth = useMemo(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);\n  // @todo create a useInternalMargin\n  const internalMargin = useMemo(\n    () => ({\n      bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,\n      top: 10 + topLegendHeight,\n      right: 10 + rightLabelWidth + axisRightWidth + rightLegendWidth,\n      left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n    }),\n    [\n      axisBottomHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n    ],\n  );\n};\n\n// const [axisLeftRef, setAxisLeftRef] = useState<Element>();\n// const [axisBottomRef, setAxisBottomRef] = useState<Element>();\n// const [axisRightRef, setAxisRightRef] = useState<Element>();\n\n// const [leftLegend, setLeftLegend] = useState<Element>();\n// const [rightLegend, setRightLegend] = useState<Element>();\n// const [topLegend, setTopLegend] = useState<Element>();\n// const [bottomLegend, setBottomLegend] = useState<Element>();\n\n// const [rightLabel, setRightLabel] = useState<Element>();\n// const [leftLabel, setLeftLabel] = useState<Element>();\n// const [bottomLabel, setBottomLabel] = useState<Element>();\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo } from 'react';\n\ninterface UseInternalMarginsT {\n  axisLeftRef: SVGGElement | null;\n  axisBottomRef: SVGGElement | null;\n  axisRightRef: SVGGElement | null;\n  leftLegend: SVGGElement | null;\n  leftLabel: SVGGElement | null;\n  rightLegend: SVGGElement | null;\n  topLegend: SVGGElement | null;\n  bottomLegend: SVGGElement | null;\n  rightLabel: SVGGElement | null;\n  bottomLabel: SVGGElement | null;\n}\nexport const useInternalMargins = ({\n  axisLeftRef,\n  axisBottomRef,\n  axisRightRef,\n  leftLabel,\n  leftLegend,\n  rightLegend,\n  topLegend,\n  bottomLegend,\n  rightLabel,\n  bottomLabel,\n}: UseInternalMarginsT) => {\n  // Axis\n  const axisLeftWidth = useMemo(() => axisLeftRef?.getBoundingClientRect()?.width || 0, [axisLeftRef]);\n  const axisBottomHeight = useMemo(() => axisBottomRef?.getBoundingClientRect()?.height || 0, [axisBottomRef]);\n  const axisRightWidth = useMemo(() => axisRightRef?.getBoundingClientRect()?.width || 0, [axisRightRef]);\n\n  // Labels\n  const bottomLabelHeight = useMemo(() => bottomLabel?.getBoundingClientRect()?.height || 0, [bottomLabel]);\n  const rightLabelWidth = useMemo(() => rightLabel?.getBoundingClientRect()?.width || 0, [rightLabel]);\n  const leftLabelWidth = useMemo(() => leftLabel?.getBoundingClientRect()?.width || 0, [leftLabel]);\n\n  // Legends\n  const topLegendHeight = useMemo(() => topLegend?.getBoundingClientRect()?.height || 0, [topLegend]);\n  const bottomLegendHeight = useMemo(() => bottomLegend?.getBoundingClientRect()?.height || 0, [bottomLegend]);\n  const rightLegendWidth = useMemo(() => rightLegend?.getBoundingClientRect()?.width || 0, [rightLegend]);\n  const leftLegendWidth = useMemo(() => leftLegend?.getBoundingClientRect()?.width || 0, [leftLegend]);\n\n  const internalMargin = useMemo(\n    () => ({\n      bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,\n      top: 10 + topLegendHeight,\n      right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,\n      left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n    }),\n    [\n      axisBottomHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n    ],\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,eAAe;AAcjB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AAEzB,QAAM,gBAAgB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACnG,QAAM,mBAAmB,QAAQ,MAAM,eAAe,sBAAsB,GAAG,UAAU,GAAG,CAAC,aAAa,CAAC;AAC3G,QAAM,iBAAiB,QAAQ,MAAM,cAAc,sBAAsB,GAAG,SAAS,GAAG,CAAC,YAAY,CAAC;AAGtG,QAAM,oBAAoB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,UAAU,GAAG,CAAC,WAAW,CAAC;AACxG,QAAM,kBAAkB,QAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AACnG,QAAM,iBAAiB,QAAQ,MAAM,WAAW,sBAAsB,GAAG,SAAS,GAAG,CAAC,SAAS,CAAC;AAGhG,QAAM,kBAAkB,QAAQ,MAAM,WAAW,sBAAsB,GAAG,UAAU,GAAG,CAAC,SAAS,CAAC;AAClG,QAAM,qBAAqB,QAAQ,MAAM,cAAc,sBAAsB,GAAG,UAAU,GAAG,CAAC,YAAY,CAAC;AAC3G,QAAM,mBAAmB,QAAQ,MAAM,aAAa,sBAAsB,GAAG,SAAS,GAAG,CAAC,WAAW,CAAC;AACtG,QAAM,kBAAkB,QAAQ,MAAM,YAAY,sBAAsB,GAAG,SAAS,GAAG,CAAC,UAAU,CAAC;AAEnG,QAAM,iBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,QAAQ,KAAK,mBAAmB,qBAAqB;AAAA,MACrD,KAAK,KAAK;AAAA,MACV,OAAO,KAAK,kBAAkB,iBAAiB;AAAA,MAC/C,MAAM,KAAK,gBAAgB,iBAAiB;AAAA,IAC9C;AAAA,IAEA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,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,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,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useCallback, useContext, useMemo } from "react";
 import { ChartContext } from "../ChartContext";
+import { FOCUS_RING } from "../../constants";
 const findInCircularList = (list, from, step = 1) => {
   for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
     if (list[i])
@@ -14,15 +15,20 @@ const useKeyboardNavigation = () => {
     setActivePoint,
     containerRef,
     yScale,
-    xScale,
     setXScrollbarPosition,
     containerRatio,
     xScrollbarPosition,
     innerWidth,
-    getXValue,
+    innerHeight,
+    getYValue,
+    getXScaleValue,
+    getYScaleValue,
     groups,
-    currentData: data
+    currentData: data,
+    props: { xAxis, yAxis }
   } = useContext(ChartContext);
+  const xScroll = xAxis.advanced?.pointSpacing?.value > 1;
+  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;
   const currentSerie = useMemo(
     () => data.find((d) => d.name === activePoint?.serie) ?? data[0],
     [activePoint?.serie, data]
@@ -55,8 +61,10 @@ const useKeyboardNavigation = () => {
         step
       );
       setActivePoint(currentSerie?.data[newValue]);
-      if (containerRatio > 1) {
-        const xValue = xScale(getXValue(currentSerie?.data[newValue]));
+      if (xScroll) {
+        const xValue = getXScaleValue(currentSerie?.data[newValue]);
+        if (xValue === void 0)
+          return;
         const barWidth = innerWidth / containerRatio;
         const total = innerWidth * containerRatio;
         if (total <= xValue) {
@@ -69,19 +77,40 @@ const useKeyboardNavigation = () => {
             return nextPosition;
           });
         else if (xValue < xScrollbarPosition * containerRatio)
-          setXScrollbarPosition(xValue / containerRatio);
+          setXScrollbarPosition(xValue / containerRatio - FOCUS_RING.STROKE_WIDTH);
+      }
+      if (yScroll) {
+        const yValue = getYScaleValue(currentSerie?.data[newValue]);
+        if (yValue === void 0)
+          return;
+        const barWidth = innerHeight / containerRatio;
+        const total = innerHeight * containerRatio;
+        if (total <= yValue) {
+          setXScrollbarPosition((total - innerHeight) / containerRatio);
+        } else if (yValue > xScrollbarPosition * containerRatio + innerHeight)
+          setXScrollbarPosition((prev) => {
+            const nextPosition = prev + (yValue / containerRatio - prev);
+            if (nextPosition + barWidth > innerHeight)
+              return innerHeight - barWidth;
+            return nextPosition;
+          });
+        else if (yValue < xScrollbarPosition * containerRatio)
+          setXScrollbarPosition(yValue / containerRatio - FOCUS_RING.STROKE_WIDTH);
       }
     },
     [
-      containerRatio,
       currentSerie?.data,
       currentActiveItemIndex,
-      getXValue,
-      innerWidth,
       setActivePoint,
+      xScroll,
+      yScroll,
+      getXScaleValue,
+      innerWidth,
+      containerRatio,
+      xScrollbarPosition,
       setXScrollbarPosition,
-      xScale,
-      xScrollbarPosition
+      getYScaleValue,
+      innerHeight
     ]
   );
   const changeSerie = useCallback(
@@ -94,7 +123,7 @@ const useKeyboardNavigation = () => {
         );
         return d.name === groups[nextSerieIndex];
       });
-      setActivePoint(nextSerie?.data[currentActiveItemIndex] ?? nextSerie?.data?.[0]);
+      setActivePoint(nextSerie?.data[currentActiveItemIndex] || nextSerie?.data?.[0] || null);
     },
     [data, setActivePoint, currentActiveItemIndex, groups, currentSerie.name]
   );
@@ -111,7 +140,7 @@ const useKeyboardNavigation = () => {
       }
       if (["ArrowDown", "ArrowUp"].includes(e.code)) {
         if (yScale.bandwidth)
-          navigateSerie(e.code === "ArrowDown" ? -1 : 1);
+          navigateSerie(e.code === "ArrowDown" ? 1 : -1);
         else
           changeSerie(e.code === "ArrowDown" ? -1 : 1);
       }