@elliemae/ds-dataviz 3.14.9 → 3.14.11

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useInternalMargins.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useEffect, useState } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\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  toolbarRef: SVGGElement | null;\n}\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (\n  ref: SVGGElement | null,\n  { offsetHeight = 0, offsetWidth = 0 } = { offsetHeight: 0, offsetWidth: 0 },\n) => {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n        entries.forEach((entry) => {\n          setWidth(Math.ceil(entry.contentRect.width + offsetWidth));\n          setHeight(Math.ceil(entry.contentRect.height + offsetHeight));\n        });\n      });\n\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [offsetHeight, offsetWidth, ref]);\n  return { width, height };\n};\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  toolbarRef,\n}: UseInternalMarginsT) => {\n  // Toolbar\n  const { height: toolbarHeight } = useResizeObserver(toolbarRef, { offsetHeight: 10 });\n\n  // Axis\n  const { width: axisRightWidth } = useResizeObserver(axisRightRef, { offsetWidth: 10 });\n  const { height: axisBottomHeight } = useResizeObserver(axisBottomRef, { offsetHeight: 20 });\n  const { width: axisLeftWidth } = useResizeObserver(axisLeftRef, { offsetWidth: 10 });\n\n  // Labels\n  const { height: bottomLabelHeight } = useResizeObserver(bottomLabel, { offsetHeight: 10 });\n  const { width: rightLabelWidth } = useResizeObserver(rightLabel, { offsetWidth: 10 });\n  const { width: leftLabelWidth, height: leftLabelHeight } = useResizeObserver(leftLabel);\n\n  // Legends\n  const { height: topLegendHeight } = useResizeObserver(topLegend, { offsetHeight: 20 });\n  const { height: bottomLegendHeight, width: bottomLegendWidth } = useResizeObserver(bottomLegend, {\n    offsetHeight: 10,\n  });\n  const { width: rightLegendWidth, height: rightLegendHeight } = useResizeObserver(rightLegend);\n  const { width: leftLegendWidth, height: leftLegendHeight } = useResizeObserver(leftLegend, { offsetWidth: 20 });\n\n  const internalMargin = useMemo(\n    () => ({\n      bottom: axisBottomHeight + bottomLegendHeight + bottomLabelHeight || 10,\n      top: Math.max(topLegendHeight, toolbarHeight) || 10,\n      right: rightLabelWidth + axisRightWidth + rightLegendWidth || 10,\n      left: axisLeftWidth + leftLabelWidth + leftLegendWidth || 10,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      toolbarHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendHeight,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      toolbarHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    }),\n    [\n      axisBottomHeight,\n      toolbarHeight,\n      leftLegendHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useEffect, useState } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\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  toolbarRef: SVGGElement | null;\n}\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (\n  ref: SVGGElement | null,\n  { offsetHeight = 0, offsetWidth = 0 } = { offsetHeight: 0, offsetWidth: 0 },\n) => {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n        entries.forEach((entry) => {\n          setWidth(Math.ceil(entry.contentRect.width + offsetWidth));\n          setHeight(Math.ceil(entry.contentRect.height + offsetHeight));\n        });\n      });\n\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [offsetHeight, offsetWidth, ref]);\n  return { width, height };\n};\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  toolbarRef,\n}: UseInternalMarginsT) => {\n  // Toolbar\n  const { height: toolbarHeight } = useResizeObserver(toolbarRef, { offsetHeight: 10 });\n\n  // Axis\n  const { width: axisRightWidth } = useResizeObserver(axisRightRef, { offsetWidth: 10 });\n  const { height: axisBottomHeight } = useResizeObserver(axisBottomRef, { offsetHeight: 20 });\n  const { width: axisLeftWidth } = useResizeObserver(axisLeftRef, { offsetWidth: 10 });\n\n  // Labels\n  const { height: bottomLabelHeight } = useResizeObserver(bottomLabel, { offsetHeight: 10 });\n  const { width: rightLabelWidth } = useResizeObserver(rightLabel, { offsetWidth: 10 });\n  const { width: leftLabelWidth, height: leftLabelHeight } = useResizeObserver(leftLabel);\n\n  // Legends\n  const { height: topLegendHeight } = useResizeObserver(topLegend, { offsetHeight: 20 });\n  const { height: bottomLegendHeight, width: bottomLegendWidth } = useResizeObserver(bottomLegend, {\n    offsetHeight: 10,\n  });\n  const { width: rightLegendWidth, height: rightLegendHeight } = useResizeObserver(rightLegend);\n  const { width: leftLegendWidth, height: leftLegendHeight } = useResizeObserver(leftLegend, { offsetWidth: 20 });\n\n  const internalMargin = useMemo(\n    () => ({\n      bottom: axisBottomHeight + bottomLegendHeight + bottomLabelHeight || 10,\n      top: Math.max(topLegendHeight, toolbarHeight) || 10,\n      right: rightLabelWidth + axisRightWidth + rightLegendWidth || 15,\n      left: axisLeftWidth + leftLabelWidth + leftLegendWidth || 10,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      toolbarHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendHeight,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      toolbarHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    }),\n    [\n      axisBottomHeight,\n      toolbarHeight,\n      leftLegendHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": "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",
   "names": ["ResizeObserver"]
 }

package/dist/cjs/graphs/Chart/config/useScales.js

@@ -177,7 +177,8 @@ const useScales = ({
       if (axisProps?.type === "log")
         return new import_scales.LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));
       if (axisProps?.type === "band" || axis === "x" && axisProps?.type === void 0) {
-        return new import_scales.BandScale(getScaleBand(getBandDomain(axisProps), range), axisProps);
+        const realRange = axis === "y" ? range.reverse() : range;
+        return new import_scales.BandScale(getScaleBand(getBandDomain(axisProps), realRange), axisProps);
       }
       return null;
     },

package/dist/cjs/graphs/Chart/config/useScales.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/config/useScales.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { Series } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { getStackedIndex } from '../helpers';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\nimport { TIME_OFFSET } from '../../constants';\nimport { BandScale, LinearScale, TimeLinearScale, LogScale } from '../scales';\ninterface UseScales {\n  props: DSChartT.Props;\n  innerHeight: number;\n  innerWidth: number;\n  stackedData: Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n  currentData: DSChartT.InternalData;\n  groups: string[];\n  containerRatio: number;\n}\n\nexport const useScales = ({\n  props,\n  originalSeries: series,\n  innerHeight,\n  innerWidth,\n  stackedData,\n  currentData,\n  containerRatio,\n}: UseScales) => {\n  const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  const getBandDomain = useCallback(\n    (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n    [series],\n  );\n\n  const getPadding = (domainPadding: number | Array<number>) =>\n    typeof domainPadding === 'number' ? [domainPadding, domainPadding] : domainPadding ?? [0, 0];\n\n  const getLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n      const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n      const end = axis.max ?? undefined;\n      const data = currentData\n        // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n        .filter((serie) => serie.scale === axisString || axisString === 'x')\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n\n      const dataFlattened = data.flat();\n      const stackedDataFlatten = stackedData.filter((data) => data.scale === axisString).flat();\n      const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n      const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n\n      const getMin = () => {\n        const aux = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (types.includes(typeof minData)) aux.push(minData);\n        if (typeof minStackedData === 'number') aux.push(minStackedData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (typeof end === 'number' || typeof end === 'object') aux.push(end);\n        if (types.includes(typeof maxData)) aux.push(maxData);\n        if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n      if (typeof minRange === 'number' && typeof maxRange === 'number') {\n        // @TODO fix this domain padding\n        return [\n          minRange - (maxRange - minRange) * (leftPadding ?? 0),\n          maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n        ];\n      }\n      // timelinear case\n      if (typeof minRange === 'object' && typeof maxRange === 'object') {\n        if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n          return [\n            TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n            TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n          ];\n        }\n        return [minRange, maxRange];\n      }\n\n      return [];\n    },\n    [currentData, stackedData],\n  );\n\n  const getTimeLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n\n      const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n      const end = axis.max ?? undefined;\n      const data = currentData\n        // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n        .filter((serie) => serie.scale === axisString || axisString === 'x')\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n\n      const dataFlattened = data.flat();\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n\n      const getMin = () => {\n        const aux = [];\n        aux.push(begin);\n        if (types.includes(typeof minData)) aux.push(minData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux = [];\n        aux.push(begin);\n        aux.push(end);\n        if (types.includes(typeof maxData)) aux.push(maxData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n      // timelinear case\n      if (typeof minRange === 'object' && typeof maxRange === 'object') {\n        if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n          return [\n            TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n            TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n          ];\n        }\n        return [minRange, maxRange];\n      }\n\n      return [];\n    },\n    [currentData],\n  );\n\n  // d3 scale functions\n  const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n  const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n    scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n  const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n  const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n  // dataviz scales\n\n  const scaleFactory = useCallback(\n    (axis: 'x' | 'y' | 'y2', axisProps: DSChartT.AxisT, range: number[]) => {\n      if (!axisProps) return null;\n      if (['time', 'datetime'].includes(axisProps?.type)) {\n        return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis), range), axisProps);\n      }\n\n      if (axisProps?.type === 'linear' || (['y', 'y2'].includes(axis) && axisProps?.type === undefined)) {\n        return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis), range), axisProps);\n      }\n\n      if (axisProps?.type === 'log') return new LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));\n\n      if (axisProps?.type === 'band' || (axis === 'x' && axisProps?.type === undefined)) {\n        return new BandScale(getScaleBand(getBandDomain(axisProps), range), axisProps);\n      }\n      return null;\n    },\n    [getBandDomain, getLinearDomain],\n  );\n\n  const xRangeFrom = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);\n  const xRangeTo = useMemo(\n    () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),\n    [containerRatio, innerWidth, xAxis?.plotRange, xScroll],\n  );\n\n  const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);\n  const yRangeFrom = useMemo(\n    () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, yAxis?.plotRange, yScroll],\n  );\n\n  const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);\n  const y2RangeFrom = useMemo(\n    () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, y2Axis?.plotRange, yScroll],\n  );\n\n  const xScale = useMemo(\n    () => scaleFactory('x', xAxis, [xRangeFrom, xRangeTo]),\n    [scaleFactory, xAxis, xRangeFrom, xRangeTo],\n  );\n\n  const yScale = useMemo(\n    () => scaleFactory('y', yAxis, [yRangeFrom, yRangeTo]),\n    [scaleFactory, yAxis, yRangeFrom, yRangeTo],\n  );\n\n  const y2Scale = useMemo(\n    () => scaleFactory('y2', y2Axis, [y2RangeFrom, y2RangeTo]),\n    [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo],\n  );\n\n  const colorScale = useMemo(\n    () =>\n      scaleOrdinal()\n        .domain(series.map((d) => d.name))\n        .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n        .unknown('red'),\n    [series],\n  );\n  // get only groups bars to calculate the subgroup scale\n\n  const subgroupsWithBars = useMemo(() => {\n    const data = currentData\n      .filter(\n        (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n      )\n      .map((serie) => serie.name);\n\n    if (stackedSeries?.length) {\n      stackedSeries.forEach((stackedGroup, i) => {\n        if (stackedGroup.length > 0) data.push(`stacked-data-${i}`);\n      });\n    }\n    return data;\n  }, [currentData, stackedSeries]);\n\n  const getBandwidth = useCallback(() => {\n    if (xScale?.type === 'BAND') {\n      return xScale.getBandwidth();\n    }\n    if (yScale?.type === 'BAND') {\n      return yScale?.getBandwidth();\n    }\n    // @todo explore this. is to create bars with a linear axis\n    const bar = currentData.filter((serie) => serie.type === 'bar');\n    const barsLength = bar.length;\n    if (!barsLength) return;\n    // we get the size of the bars using the length of the data or the ticks amounts\n    // the biggest is the one we use to get the real width we need.\n    // we are doing calculations only for x axis because we are not expecting\n    // y axis linear cases.\n    const divisor = Math.max(bar[0].data.length, xScale?.scale.ticks().length, xScale?.getTicks(innerWidth).length, 1);\n    const leftMargin = xScale?.get(bar[0].data[0].value.x);\n    const rightMargin = innerWidth * containerRatio - xScale?.get(bar[0].data[bar[0].data.length - 1].value.x);\n\n    const width = (innerWidth - (leftMargin + rightMargin)) / divisor;\n    if (containerRatio > 1) {\n      return Math.max(0.5, width * containerRatio);\n    }\n    return Math.max(0.5, Math.trunc(width - width * 0.3));\n  }, [currentData, innerWidth, containerRatio, xScale, yScale]);\n\n  const subGroupScale = useMemo(\n    () =>\n      getBandwidth()\n        ? scaleBand()\n            .domain(subgroupsWithBars)\n            .range([0, getBandwidth()])\n            .paddingInner(0.55)\n            .padding(0.2)\n            .paddingOuter(0.01)\n        : null,\n    [getBandwidth, subgroupsWithBars],\n  );\n\n  return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { Series } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { getStackedIndex } from '../helpers';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\nimport { TIME_OFFSET } from '../../constants';\nimport { BandScale, LinearScale, TimeLinearScale, LogScale } from '../scales';\ninterface UseScales {\n  props: DSChartT.Props;\n  innerHeight: number;\n  innerWidth: number;\n  stackedData: Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n  currentData: DSChartT.InternalData;\n  groups: string[];\n  containerRatio: number;\n}\n\nexport const useScales = ({\n  props,\n  originalSeries: series,\n  innerHeight,\n  innerWidth,\n  stackedData,\n  currentData,\n  containerRatio,\n}: UseScales) => {\n  const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  const getBandDomain = useCallback(\n    (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n    [series],\n  );\n\n  const getPadding = (domainPadding: number | Array<number>) =>\n    typeof domainPadding === 'number' ? [domainPadding, domainPadding] : domainPadding ?? [0, 0];\n\n  const getLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n      const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n      const end = axis.max ?? undefined;\n      const data = currentData\n        // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n        .filter((serie) => serie.scale === axisString || axisString === 'x')\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n\n      const dataFlattened = data.flat();\n      const stackedDataFlatten = stackedData.filter((data) => data.scale === axisString).flat();\n      const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n      const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n\n      const getMin = () => {\n        const aux = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (types.includes(typeof minData)) aux.push(minData);\n        if (typeof minStackedData === 'number') aux.push(minStackedData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (typeof end === 'number' || typeof end === 'object') aux.push(end);\n        if (types.includes(typeof maxData)) aux.push(maxData);\n        if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n      if (typeof minRange === 'number' && typeof maxRange === 'number') {\n        // @TODO fix this domain padding\n        return [\n          minRange - (maxRange - minRange) * (leftPadding ?? 0),\n          maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n        ];\n      }\n      // timelinear case\n      if (typeof minRange === 'object' && typeof maxRange === 'object') {\n        if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n          return [\n            TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n            TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n          ];\n        }\n        return [minRange, maxRange];\n      }\n\n      return [];\n    },\n    [currentData, stackedData],\n  );\n\n  const getTimeLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n\n      const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n      const end = axis.max ?? undefined;\n      const data = currentData\n        // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n        .filter((serie) => serie.scale === axisString || axisString === 'x')\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n\n      const dataFlattened = data.flat();\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n\n      const getMin = () => {\n        const aux = [];\n        aux.push(begin);\n        if (types.includes(typeof minData)) aux.push(minData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux = [];\n        aux.push(begin);\n        aux.push(end);\n        if (types.includes(typeof maxData)) aux.push(maxData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n      // timelinear case\n      if (typeof minRange === 'object' && typeof maxRange === 'object') {\n        if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n          return [\n            TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n            TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n          ];\n        }\n        return [minRange, maxRange];\n      }\n\n      return [];\n    },\n    [currentData],\n  );\n\n  // d3 scale functions\n  const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n  const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n    scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n  const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n  const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n  // dataviz scales\n\n  const scaleFactory = useCallback(\n    (axis: 'x' | 'y' | 'y2', axisProps: DSChartT.AxisT, range: number[]) => {\n      if (!axisProps) return null;\n      if (['time', 'datetime'].includes(axisProps?.type)) {\n        return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis), range), axisProps);\n      }\n\n      if (axisProps?.type === 'linear' || (['y', 'y2'].includes(axis) && axisProps?.type === undefined)) {\n        return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis), range), axisProps);\n      }\n\n      if (axisProps?.type === 'log') return new LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));\n\n      if (axisProps?.type === 'band' || (axis === 'x' && axisProps?.type === undefined)) {\n        // we need to reverse the range in case is a horizontal bar char\n        const realRange = axis === 'y' ? range.reverse() : range;\n        return new BandScale(getScaleBand(getBandDomain(axisProps), realRange), axisProps);\n      }\n      return null;\n    },\n    [getBandDomain, getLinearDomain],\n  );\n\n  const xRangeFrom = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);\n  const xRangeTo = useMemo(\n    () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),\n    [containerRatio, innerWidth, xAxis?.plotRange, xScroll],\n  );\n\n  const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);\n  const yRangeFrom = useMemo(\n    () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, yAxis?.plotRange, yScroll],\n  );\n\n  const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);\n  const y2RangeFrom = useMemo(\n    () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, y2Axis?.plotRange, yScroll],\n  );\n\n  const xScale = useMemo(\n    () => scaleFactory('x', xAxis, [xRangeFrom, xRangeTo]),\n    [scaleFactory, xAxis, xRangeFrom, xRangeTo],\n  );\n\n  const yScale = useMemo(\n    () => scaleFactory('y', yAxis, [yRangeFrom, yRangeTo]),\n    [scaleFactory, yAxis, yRangeFrom, yRangeTo],\n  );\n\n  const y2Scale = useMemo(\n    () => scaleFactory('y2', y2Axis, [y2RangeFrom, y2RangeTo]),\n    [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo],\n  );\n\n  const colorScale = useMemo(\n    () =>\n      scaleOrdinal()\n        .domain(series.map((d) => d.name))\n        .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n        .unknown('red'),\n    [series],\n  );\n  // get only groups bars to calculate the subgroup scale\n\n  const subgroupsWithBars = useMemo(() => {\n    const data = currentData\n      .filter(\n        (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n      )\n      .map((serie) => serie.name);\n\n    if (stackedSeries?.length) {\n      stackedSeries.forEach((stackedGroup, i) => {\n        if (stackedGroup.length > 0) data.push(`stacked-data-${i}`);\n      });\n    }\n    return data;\n  }, [currentData, stackedSeries]);\n\n  const getBandwidth = useCallback(() => {\n    if (xScale?.type === 'BAND') {\n      return xScale.getBandwidth();\n    }\n    if (yScale?.type === 'BAND') {\n      return yScale?.getBandwidth();\n    }\n    // @todo explore this. is to create bars with a linear axis\n    const bar = currentData.filter((serie) => serie.type === 'bar');\n    const barsLength = bar.length;\n    if (!barsLength) return;\n    // we get the size of the bars using the length of the data or the ticks amounts\n    // the biggest is the one we use to get the real width we need.\n    // we are doing calculations only for x axis because we are not expecting\n    // y axis linear cases.\n    const divisor = Math.max(bar[0].data.length, xScale?.scale.ticks().length, xScale?.getTicks(innerWidth).length, 1);\n    const leftMargin = xScale?.get(bar[0].data[0].value.x);\n    const rightMargin = innerWidth * containerRatio - xScale?.get(bar[0].data[bar[0].data.length - 1].value.x);\n\n    const width = (innerWidth - (leftMargin + rightMargin)) / divisor;\n    if (containerRatio > 1) {\n      return Math.max(0.5, width * containerRatio);\n    }\n    return Math.max(0.5, Math.trunc(width - width * 0.3));\n  }, [currentData, innerWidth, containerRatio, xScale, yScale]);\n\n  const subGroupScale = useMemo(\n    () =>\n      getBandwidth()\n        ? scaleBand()\n            .domain(subgroupsWithBars)\n            .range([0, getBandwidth()])\n            .paddingInner(0.55)\n            .padding(0.2)\n            .paddingOuter(0.01)\n        : null,\n    [getBandwidth, subgroupsWithBars],\n  );\n\n  return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAqC;AAErC,gBAAmF;AAEnF,qBAAgC;AAChC,yBAA6B;AAC7B,uBAA4B;AAC5B,oBAAkE;AAgB3D,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACf,QAAM,EAAE,OAAO,OAAO,QAAQ,QAAQ,eAAe,QAAQ,IAAI;AAGjE,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,QAAM,oBAAgB;AAAA,IACpB,CAAC,SAAyB,KAAK,QAAQ,CAAC,GAAG,OAAO,GAAG,KAAK,IAAI,CAAC,GAAG,MAAM,EAAE,SAAS,CAAC,CAAC;AAAA,IACrF,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,aAAa,CAAC,kBAClB,OAAO,kBAAkB,WAAW,CAAC,eAAe,aAAa,IAAI,iBAAiB,CAAC,GAAG,CAAC;AAE7F,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAAsB,eAAiC;AAGtD,YAAM,QAAQ,MAAM,cAAc,IAAI,KAAK,OAAO;AAClD,YAAM,MAAM,KAAK,OAAO;AACxB,YAAM,OAAO,YAEV,OAAO,CAAC,UAAU,MAAM,UAAU,cAAc,eAAe,GAAG,EAClE;AAAA,QAAI,CAAC,UACJ,MAAM,KACH,OAAO,CAAC,UAAU,MAAM,UAAU,IAAI,EACtC,IAAI,CAAC,UAAU;AACd,cAAI,OAAO,MAAM,UAAU,UAAU;AACnC,mBAAO,MAAM;AAAA,UACf;AAEA,iBAAO,MAAM,MAAM,eAAe,OAAO,MAAM;AAAA,QACjD,CAAC;AAAA,MACL;AAEF,YAAM,gBAAgB,KAAK,KAAK;AAChC,YAAM,qBAAqB,YAAY,OAAO,CAACA,UAASA,MAAK,UAAU,UAAU,EAAE,KAAK;AACxF,YAAM,qBAAiB,eAAI,oBAAoB,CAAC,cAAU,eAAI,OAAO,CAAC,aAAa,SAAS,EAAE,CAAC;AAC/F,YAAM,qBAAiB,eAAI,oBAAoB,CAAC,cAAU,eAAI,OAAO,CAAC,aAAa,SAAS,EAAE,CAAC;AAC/F,YAAM,cAAU,eAAI,aAAa;AACjC,YAAM,cAAU,eAAI,aAAa;AACjC,YAAM,QAAQ,CAAC,UAAU,QAAQ;AAEjC,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,OAAO,UAAU,YAAY,OAAO,UAAU;AAAU,cAAI,KAAK,KAAK;AAC1E,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,YAAI,OAAO,mBAAmB;AAAU,cAAI,KAAK,cAAc;AAC/D,mBAAO,eAAI,GAAG;AAAA,MAChB;AACA,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,OAAO,UAAU,YAAY,OAAO,UAAU;AAAU,cAAI,KAAK,KAAK;AAC1E,YAAI,OAAO,QAAQ,YAAY,OAAO,QAAQ;AAAU,cAAI,KAAK,GAAG;AACpE,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,YAAI,OAAO,mBAAmB;AAAU,cAAI,KAAK,cAAc;AAC/D,mBAAO,eAAI,GAAG;AAAA,MAChB;AACA,YAAM,WAAW,OAAO;AACxB,YAAM,WAAW,OAAO;AAExB,YAAM,CAAC,aAAa,YAAY,IAAI,WAAW,KAAK,aAAa;AAEjE,UAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAEhE,eAAO;AAAA,UACL,YAAY,WAAW,aAAa,eAAe;AAAA,UACnD,YAAY,WAAW,aAAa,gBAAgB;AAAA,QACtD;AAAA,MACF;AAEA,UAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAChE,YAAI,KAAK,qBAAqB,6BAAY,KAAK,oBAAoB;AACjE,iBAAO;AAAA,YACL,6BAAY,KAAK,mBAAmB,OAAO,UAAU,CAAC,WAAW;AAAA,YACjE,6BAAY,KAAK,mBAAmB,OAAO,UAAU,YAAY;AAAA,UACnE;AAAA,QACF;AACA,eAAO,CAAC,UAAU,QAAQ;AAAA,MAC5B;AAEA,aAAO,CAAC;AAAA,IACV;AAAA,IACA,CAAC,aAAa,WAAW;AAAA,EAC3B;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAAsB,eAAiC;AAItD,YAAM,QAAQ,MAAM,cAAc,IAAI,KAAK,OAAO;AAClD,YAAM,MAAM,KAAK,OAAO;AACxB,YAAM,OAAO,YAEV,OAAO,CAAC,UAAU,MAAM,UAAU,cAAc,eAAe,GAAG,EAClE;AAAA,QAAI,CAAC,UACJ,MAAM,KACH,OAAO,CAAC,UAAU,MAAM,UAAU,IAAI,EACtC,IAAI,CAAC,UAAU;AACd,cAAI,OAAO,MAAM,UAAU,UAAU;AACnC,mBAAO,MAAM;AAAA,UACf;AAEA,iBAAO,MAAM,MAAM,eAAe,OAAO,MAAM;AAAA,QACjD,CAAC;AAAA,MACL;AAEF,YAAM,gBAAgB,KAAK,KAAK;AAChC,YAAM,cAAU,eAAI,aAAa;AACjC,YAAM,cAAU,eAAI,aAAa;AACjC,YAAM,QAAQ,CAAC,UAAU,QAAQ;AAEjC,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,KAAK,KAAK;AACd,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,mBAAO,eAAI,GAAG;AAAA,MAChB;AACA,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,KAAK,KAAK;AACd,YAAI,KAAK,GAAG;AACZ,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,mBAAO,eAAI,GAAG;AAAA,MAChB;AACA,YAAM,WAAW,OAAO;AACxB,YAAM,WAAW,OAAO;AAExB,YAAM,CAAC,aAAa,YAAY,IAAI,WAAW,KAAK,aAAa;AAGjE,UAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAChE,YAAI,KAAK,qBAAqB,6BAAY,KAAK,oBAAoB;AACjE,iBAAO;AAAA,YACL,6BAAY,KAAK,mBAAmB,OAAO,UAAU,CAAC,WAAW;AAAA,YACjE,6BAAY,KAAK,mBAAmB,OAAO,UAAU,YAAY;AAAA,UACnE;AAAA,QACF;AACA,eAAO,CAAC,UAAU,QAAQ;AAAA,MAC5B;AAEA,aAAO,CAAC;AAAA,IACV;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAGA,QAAM,eAAe,CAAC,QAAgB,cAAoB,oBAAS,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AAE/F,QAAM,eAAe,CAAC,QAAkB,OAAiB,UAAU,YACjE,qBAAU,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,aAAa,IAAI;AAC5E,QAAM,iBAAiB,CAAC,QAAkB,cAAoB,uBAAY,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AACtG,QAAM,cAAc,CAAC,QAAkB,cAAoB,oBAAS,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AAIhG,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAwB,WAA2B,UAAoB;AACtE,UAAI,CAAC;AAAW,eAAO;AACvB,UAAI,CAAC,QAAQ,UAAU,EAAE,SAAS,WAAW,IAAI,GAAG;AAClD,eAAO,IAAI,8BAAgB,aAAa,gBAAgB,WAAW,IAAI,GAAG,KAAK,GAAG,SAAS;AAAA,MAC7F;AAEA,UAAI,WAAW,SAAS,YAAa,CAAC,KAAK,IAAI,EAAE,SAAS,IAAI,KAAK,WAAW,SAAS,QAAY;AACjG,eAAO,IAAI,0BAAY,eAAe,gBAAgB,WAAW,IAAI,GAAG,KAAK,GAAG,SAAS;AAAA,MAC3F;AAEA,UAAI,WAAW,SAAS;AAAO,eAAO,IAAI,uBAAS,YAAY,gBAAgB,WAAW,IAAI,GAAG,KAAK,CAAC;AAEvG,UAAI,WAAW,SAAS,UAAW,SAAS,OAAO,WAAW,SAAS,QAAY;AAEjF,cAAM,YAAY,SAAS,MAAM,MAAM,QAAQ,IAAI;AACnD,eAAO,IAAI,wBAAU,aAAa,cAAc,SAAS,GAAG,SAAS,GAAG,SAAS;AAAA,MACnF;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,eAAe,eAAe;AAAA,EACjC;AAEA,QAAM,iBAAa,sBAAQ,MAAM,kBAAkB,OAAO,YAAY,MAAM,IAAI,CAAC,gBAAgB,OAAO,SAAS,CAAC;AAClH,QAAM,eAAW;AAAA,IACf,OAAO,cAAc,OAAO,YAAY,MAAM,OAAO,UAAU,iBAAiB;AAAA,IAChF,CAAC,gBAAgB,YAAY,OAAO,WAAW,OAAO;AAAA,EACxD;AAEA,QAAM,eAAW,sBAAQ,MAAM,OAAO,YAAY,MAAM,GAAG,CAAC,OAAO,SAAS,CAAC;AAC7E,QAAM,iBAAa;AAAA,IACjB,OAAO,eAAe,OAAO,YAAY,MAAM,OAAO,UAAU,iBAAiB;AAAA,IACjF,CAAC,gBAAgB,aAAa,OAAO,WAAW,OAAO;AAAA,EACzD;AAEA,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,YAAY,MAAM,GAAG,CAAC,QAAQ,SAAS,CAAC;AAChF,QAAM,kBAAc;AAAA,IAClB,OAAO,eAAe,QAAQ,YAAY,MAAM,OAAO,UAAU,iBAAiB;AAAA,IAClF,CAAC,gBAAgB,aAAa,QAAQ,WAAW,OAAO;AAAA,EAC1D;AAEA,QAAM,aAAS;AAAA,IACb,MAAM,aAAa,KAAK,OAAO,CAAC,YAAY,QAAQ,CAAC;AAAA,IACrD,CAAC,cAAc,OAAO,YAAY,QAAQ;AAAA,EAC5C;AAEA,QAAM,aAAS;AAAA,IACb,MAAM,aAAa,KAAK,OAAO,CAAC,YAAY,QAAQ,CAAC;AAAA,IACrD,CAAC,cAAc,OAAO,YAAY,QAAQ;AAAA,EAC5C;AAEA,QAAM,cAAU;AAAA,IACd,MAAM,aAAa,MAAM,QAAQ,CAAC,aAAa,SAAS,CAAC;AAAA,IACzD,CAAC,cAAc,QAAQ,aAAa,SAAS;AAAA,EAC/C;AAEA,QAAM,iBAAa;AAAA,IACjB,UACE,wBAAa,EACV,OAAO,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAChC,MAAM,OAAO,IAAI,CAAC,MAAM,gCAAa,EAAE,UAAuC,EAAE,KAAK,CAAC,EACtF,QAAQ,KAAK;AAAA,IAClB,CAAC,MAAM;AAAA,EACT;AAGA,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,UAAM,OAAO,YACV;AAAA,MACC,CAAC,UAAU,MAAM,SAAS,SAAS,EAAE,eAAe,cAAU,gCAAgB,eAAe,MAAM,IAAI,IAAI;AAAA,IAC7G,EACC,IAAI,CAAC,UAAU,MAAM,IAAI;AAE5B,QAAI,eAAe,QAAQ;AACzB,oBAAc,QAAQ,CAAC,cAAc,MAAM;AACzC,YAAI,aAAa,SAAS;AAAG,eAAK,KAAK,gBAAgB,GAAG;AAAA,MAC5D,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B,QAAM,mBAAe,0BAAY,MAAM;AACrC,QAAI,QAAQ,SAAS,QAAQ;AAC3B,aAAO,OAAO,aAAa;AAAA,IAC7B;AACA,QAAI,QAAQ,SAAS,QAAQ;AAC3B,aAAO,QAAQ,aAAa;AAAA,IAC9B;AAEA,UAAM,MAAM,YAAY,OAAO,CAAC,UAAU,MAAM,SAAS,KAAK;AAC9D,UAAM,aAAa,IAAI;AACvB,QAAI,CAAC;AAAY;AAKjB,UAAM,UAAU,KAAK,IAAI,IAAI,GAAG,KAAK,QAAQ,QAAQ,MAAM,MAAM,EAAE,QAAQ,QAAQ,SAAS,UAAU,EAAE,QAAQ,CAAC;AACjH,UAAM,aAAa,QAAQ,IAAI,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AACrD,UAAM,cAAc,aAAa,iBAAiB,QAAQ,IAAI,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,SAAS,GAAG,MAAM,CAAC;AAEzG,UAAM,SAAS,cAAc,aAAa,gBAAgB;AAC1D,QAAI,iBAAiB,GAAG;AACtB,aAAO,KAAK,IAAI,KAAK,QAAQ,cAAc;AAAA,IAC7C;AACA,WAAO,KAAK,IAAI,KAAK,KAAK,MAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,EACtD,GAAG,CAAC,aAAa,YAAY,gBAAgB,QAAQ,MAAM,CAAC;AAE5D,QAAM,oBAAgB;AAAA,IACpB,MACE,aAAa,QACT,qBAAU,EACP,OAAO,iBAAiB,EACxB,MAAM,CAAC,GAAG,aAAa,CAAC,CAAC,EACzB,aAAa,IAAI,EACjB,QAAQ,GAAG,EACX,aAAa,IAAI,IACpB;AAAA,IACN,CAAC,cAAc,iBAAiB;AAAA,EAClC;AAEA,SAAO,EAAE,QAAQ,SAAS,QAAQ,eAAe,YAAY,aAAa;AAC5E;",
   "names": ["data"]
 }

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

@@ -37,14 +37,17 @@ var import_GridLine = require("./GridLine");
 var import_colorPallet = require("../../helpers/colorPallet");
 const AxisBottom = import_react.default.memo(() => {
   const {
-    props: { xAxis },
+    props: { xAxis, xScroll },
     innerHeight,
     xScale,
-    yScale,
     innerWidth,
     containerRatio,
     setAxisBottomRef
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const realInnerWidth = (0, import_react.useMemo)(
+    () => innerWidth * (xScroll ? containerRatio : 1),
+    [containerRatio, innerWidth, xScroll]
+  );
   const { tickRotation } = xAxis.tick || {};
   const { showGrid } = xAxis;
   const textProps = (0, import_react.useMemo)(() => {
@@ -107,7 +110,7 @@ const AxisBottom = import_react.default.memo(() => {
       return null;
     const lineCoords = {
       x1: 0,
-      x2: innerWidth * containerRatio,
+      x2: realInnerWidth,
       y1: innerHeight,
       y2: innerHeight
     };
@@ -117,22 +120,12 @@ const AxisBottom = import_react.default.memo(() => {
         lineCoords,
         scale: xScale,
         innerRef: setAxisBottomRef,
-        dimension: innerWidth * containerRatio,
+        dimension: realInnerWidth,
         TickRenderer,
         GridRenderer,
         color: axisColor
       }
     );
-  }, [
-    GridRenderer,
-    TickRenderer,
-    containerRatio,
-    axisColor,
-    innerHeight,
-    innerWidth,
-    setAxisBottomRef,
-    xAxis.hideAxis,
-    xScale
-  ]);
+  }, [GridRenderer, TickRenderer, axisColor, innerHeight, realInnerWidth, setAxisBottomRef, xAxis.hideAxis, xScale]);
 });
 //# sourceMappingURL=AxisBottom.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisBottom.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport type { CSSProperties } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { Axis, type GridRenderPropsT, type TickRenderPropsT } from './Axis';\nimport { Tick } from './Tick';\nimport { GridLine } from './GridLine';\nimport { COLOR_PALLET } from '../../helpers/colorPallet';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis },\n    innerHeight,\n    xScale,\n    yScale,\n    innerWidth,\n    containerRatio,\n    setAxisBottomRef,\n  } = useContext(ChartContext);\n\n  const { tickRotation } = xAxis.tick || ({} as DSChartT.AxisTickT);\n  const { showGrid } = xAxis;\n\n  const textProps = useMemo(() => {\n    const commomProps = { fill: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color };\n    if (!tickRotation) return { ...commomProps, y: 17 };\n    return {\n      ...commomProps,\n      dx: 8 * Math.sin(Math.PI * (tickRotation / 180)),\n      dy: '.71em',\n      y: Math.ceil(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1)),\n      transform: `rotate(${tickRotation})`,\n    };\n  }, [tickRotation, xAxis?.tick?.color]);\n\n  const style: CSSProperties = useMemo(() => {\n    if (!tickRotation) return { textAnchor: 'middle' };\n    return { textAnchor: tickRotation > 0 ? 'start' : 'end' };\n  }, [tickRotation]);\n\n  const GridRenderer = useCallback(\n    (props: GridRenderPropsT) => {\n      if (!showGrid) return null;\n\n      const { position, ...rest } = props;\n      const gridLineCoords = {\n        x1: position,\n        x2: position,\n        y1: 0,\n        y2: innerHeight,\n      };\n      return <GridLine {...gridLineCoords} {...rest} />;\n    },\n    [innerHeight, showGrid],\n  );\n\n  const TickRenderer = useCallback(\n    (props: TickRenderPropsT) => {\n      const { position, tickValue, ...rest } = props;\n      const tickLineCoords = {\n        y2: 5,\n        stroke: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color,\n      };\n      return (\n        <Tick\n          {...tickLineCoords}\n          tickValue={xScale.getTickFormatted(tickValue)}\n          xTranslate={position}\n          yTranslate={innerHeight}\n          textProps={textProps}\n          textStyle={style}\n          {...rest}\n        />\n      );\n    },\n    [xAxis?.tick?.color, xScale, innerHeight, textProps, style],\n  );\n\n  const axisColor = useMemo(() => COLOR_PALLET[xAxis.color as keyof typeof COLOR_PALLET] || xAxis.color, [xAxis.color]);\n\n  return useMemo(() => {\n    if (xAxis.hideAxis) return null;\n    const lineCoords = {\n      x1: 0,\n      x2: innerWidth * containerRatio,\n      y1: innerHeight,\n      y2: innerHeight,\n    };\n\n    return (\n      <Axis\n        lineCoords={lineCoords}\n        scale={xScale}\n        innerRef={setAxisBottomRef}\n        dimension={innerWidth * containerRatio}\n        TickRenderer={TickRenderer}\n        GridRenderer={GridRenderer}\n        color={axisColor}\n      />\n    );\n  }, [\n    GridRenderer,\n    TickRenderer,\n    containerRatio,\n    axisColor,\n    innerHeight,\n    innerWidth,\n    setAxisBottomRef,\n    xAxis.hideAxis,\n    xScale,\n  ]);\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDV;AAnDb,mBAAwD;AAExD,0BAA6B;AAE7B,kBAAmE;AACnE,kBAAqB;AACrB,sBAAyB;AACzB,yBAA6B;AAEtB,MAAM,aAAa,aAAAA,QAAM,KAAK,MAAM;AACzC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,EAAE,aAAa,IAAI,MAAM,QAAS,CAAC;AACzC,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,UAAM,cAAc,EAAE,MAAM,gCAAa,OAAO,MAAM,UAAuC,OAAO,MAAM,MAAM;AAChH,QAAI,CAAC;AAAc,aAAO,EAAE,GAAG,aAAa,GAAG,GAAG;AAClD,WAAO;AAAA,MACL,GAAG;AAAA,MACH,IAAI,IAAI,KAAK,IAAI,KAAK,MAAM,eAAe,IAAI;AAAA,MAC/C,IAAI;AAAA,MACJ,GAAG,KAAK,KAAK,OAAO,OAAO,eAAe,OAAO,eAAe,IAAI,IAAI,GAAG;AAAA,MAC3E,WAAW,UAAU;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,cAAc,OAAO,MAAM,KAAK,CAAC;AAErC,QAAM,YAAuB,sBAAQ,MAAM;AACzC,QAAI,CAAC;AAAc,aAAO,EAAE,YAAY,SAAS;AACjD,WAAO,EAAE,YAAY,eAAe,IAAI,UAAU,MAAM;AAAA,EAC1D,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,UAAI,CAAC;AAAU,eAAO;AAEtB,YAAM,EAAE,aAAa,KAAK,IAAI;AAC9B,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AACA,aAAO,4CAAC,4BAAU,GAAG,gBAAiB,GAAG,MAAM;AAAA,IACjD;AAAA,IACA,CAAC,aAAa,QAAQ;AAAA,EACxB;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,YAAM,EAAE,UAAU,cAAc,KAAK,IAAI;AACzC,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,QAAQ,gCAAa,OAAO,MAAM,UAAuC,OAAO,MAAM;AAAA,MACxF;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,OAAO,iBAAiB,SAAS;AAAA,UAC5C,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ;AAAA,UACA,WAAW;AAAA,UACV,GAAG;AAAA;AAAA,MACN;AAAA,IAEJ;AAAA,IACA,CAAC,OAAO,MAAM,OAAO,QAAQ,aAAa,WAAW,KAAK;AAAA,EAC5D;AAEA,QAAM,gBAAY,sBAAQ,MAAM,gCAAa,MAAM,UAAuC,MAAM,OAAO,CAAC,MAAM,KAAK,CAAC;AAEpH,aAAO,sBAAQ,MAAM;AACnB,QAAI,MAAM;AAAU,aAAO;AAC3B,UAAM,aAAa;AAAA,MACjB,IAAI;AAAA,MACJ,IAAI,aAAa;AAAA,MACjB,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW,aAAa;AAAA,QACxB;AAAA,QACA;AAAA,QACA,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AACH,CAAC;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport type { CSSProperties } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { Axis, type GridRenderPropsT, type TickRenderPropsT } from './Axis';\nimport { Tick } from './Tick';\nimport { GridLine } from './GridLine';\nimport { COLOR_PALLET } from '../../helpers/colorPallet';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis, xScroll },\n    innerHeight,\n    xScale,\n    innerWidth,\n    containerRatio,\n    setAxisBottomRef,\n  } = useContext(ChartContext);\n\n  const realInnerWidth = useMemo(\n    () => innerWidth * (xScroll ? containerRatio : 1),\n    [containerRatio, innerWidth, xScroll],\n  );\n\n  const { tickRotation } = xAxis.tick || ({} as DSChartT.AxisTickT);\n  const { showGrid } = xAxis;\n\n  const textProps = useMemo(() => {\n    const commomProps = { fill: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color };\n    if (!tickRotation) return { ...commomProps, y: 17 };\n    return {\n      ...commomProps,\n      dx: 8 * Math.sin(Math.PI * (tickRotation / 180)),\n      dy: '.71em',\n      y: Math.ceil(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1)),\n      transform: `rotate(${tickRotation})`,\n    };\n  }, [tickRotation, xAxis?.tick?.color]);\n\n  const style: CSSProperties = useMemo(() => {\n    if (!tickRotation) return { textAnchor: 'middle' };\n    return { textAnchor: tickRotation > 0 ? 'start' : 'end' };\n  }, [tickRotation]);\n\n  const GridRenderer = useCallback(\n    (props: GridRenderPropsT) => {\n      if (!showGrid) return null;\n\n      const { position, ...rest } = props;\n      const gridLineCoords = {\n        x1: position,\n        x2: position,\n        y1: 0,\n        y2: innerHeight,\n      };\n      return <GridLine {...gridLineCoords} {...rest} />;\n    },\n    [innerHeight, showGrid],\n  );\n\n  const TickRenderer = useCallback(\n    (props: TickRenderPropsT) => {\n      const { position, tickValue, ...rest } = props;\n      const tickLineCoords = {\n        y2: 5,\n        stroke: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color,\n      };\n      return (\n        <Tick\n          {...tickLineCoords}\n          tickValue={xScale.getTickFormatted(tickValue)}\n          xTranslate={position}\n          yTranslate={innerHeight}\n          textProps={textProps}\n          textStyle={style}\n          {...rest}\n        />\n      );\n    },\n    [xAxis?.tick?.color, xScale, innerHeight, textProps, style],\n  );\n\n  const axisColor = useMemo(() => COLOR_PALLET[xAxis.color as keyof typeof COLOR_PALLET] || xAxis.color, [xAxis.color]);\n\n  return useMemo(() => {\n    if (xAxis.hideAxis) return null;\n    const lineCoords = {\n      x1: 0,\n      x2: realInnerWidth,\n      y1: innerHeight,\n      y2: innerHeight,\n    };\n\n    return (\n      <Axis\n        lineCoords={lineCoords}\n        scale={xScale}\n        innerRef={setAxisBottomRef}\n        dimension={realInnerWidth}\n        TickRenderer={TickRenderer}\n        GridRenderer={GridRenderer}\n        color={axisColor}\n      />\n    );\n  }, [GridRenderer, TickRenderer, axisColor, innerHeight, realInnerWidth, setAxisBottomRef, xAxis.hideAxis, xScale]);\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -37,15 +37,20 @@ var import_GridLine = require("./GridLine");
 var import_colorPallet = require("../../helpers/colorPallet");
 const AxisLeft = import_react.default.memo(() => {
   const {
-    props: { yAxis },
+    props: { yAxis, yScroll },
     innerHeight,
     height,
     yScale,
     innerWidth,
+    containerRatio,
     setAxisLeftRef
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const { tickRotation } = yAxis.tick || {};
   const { showGrid } = yAxis;
+  const realInnerHeight = (0, import_react.useMemo)(
+    () => innerHeight * (yScroll ? containerRatio : 1),
+    [containerRatio, innerHeight, yScroll]
+  );
   const textProps = (0, import_react.useMemo)(() => {
     const commomProps = { fill: import_colorPallet.COLOR_PALLET[yAxis?.tick?.color] || yAxis?.tick?.color };
     if (!tickRotation)
@@ -109,7 +114,7 @@ const AxisLeft = import_react.default.memo(() => {
       x1: 0,
       x2: 0,
       y1: 0,
-      y2: innerHeight
+      y2: realInnerHeight
     };
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Axis.Axis,
@@ -123,6 +128,6 @@ const AxisLeft = import_react.default.memo(() => {
         color: axisColor
       }
     );
-  }, [GridRenderer, TickRenderer, axisColor, height, innerHeight, setAxisLeftRef, yAxis.hideAxis, yScale]);
+  }, [GridRenderer, TickRenderer, axisColor, height, realInnerHeight, setAxisLeftRef, yAxis.hideAxis, yScale]);
 });
 //# sourceMappingURL=AxisLeft.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/graphs/Chart/parts/Axis/AxisLeft.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { type CSSProperties, useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { Axis, type TickRenderPropsT, type GridRenderPropsT } from './Axis';\nimport { Tick } from './Tick';\nimport { GridLine } from './GridLine';\nimport { COLOR_PALLET } from '../../helpers/colorPallet';\n\nexport const AxisLeft = React.memo(() => {\n  const {\n    props: { yAxis },\n    innerHeight,\n    height,\n    yScale,\n    innerWidth,\n    setAxisLeftRef,\n  } = useContext(ChartContext);\n\n  const { tickRotation } = yAxis.tick || ({} as DSChartT.AxisTickT);\n  const { showGrid } = yAxis;\n\n  const textProps = useMemo(() => {\n    const commomProps = { fill: COLOR_PALLET[yAxis?.tick?.color as keyof typeof COLOR_PALLET] || yAxis?.tick?.color };\n    if (!tickRotation) return { ...commomProps, x: -10, dy: '0.32em' };\n    return {\n      ...commomProps,\n      dy: '.30em',\n      dx: '-.10em',\n      x: Math.trunc(-(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))),\n      transform: `rotate(${tickRotation})`,\n    };\n  }, [tickRotation, yAxis?.tick?.color]);\n\n  const style: CSSProperties = useMemo(\n    () => ({\n      textAnchor: 'end',\n    }),\n    [],\n  );\n\n  const GridRenderer = useCallback(\n    (props: GridRenderPropsT) => {\n      if (!showGrid) return null;\n      const { position, ...rest } = props;\n      const gridLineCoords = {\n        x1: 0,\n        x2: innerWidth,\n        y1: position,\n        y2: position,\n      };\n      return <GridLine {...gridLineCoords} {...rest} />;\n    },\n    [showGrid, innerWidth],\n  );\n\n  const TickRenderer = useCallback(\n    (props: TickRenderPropsT) => {\n      const { position, tickValue, ...rest } = props;\n      const tickLineCoords = {\n        x2: -5,\n        stroke: COLOR_PALLET[yAxis?.tick?.color as keyof typeof COLOR_PALLET] || yAxis?.tick?.color,\n      };\n      return (\n        <Tick\n          {...tickLineCoords}\n          xTranslate={0}\n          yTranslate={position}\n          textProps={textProps}\n          textStyle={style}\n          tickValue={yScale.getTickFormatted(tickValue)}\n          {...rest}\n        />\n      );\n    },\n    [style, textProps, yAxis?.tick?.color, yScale],\n  );\n\n  const axisColor = useMemo(() => COLOR_PALLET[yAxis.color as keyof typeof COLOR_PALLET] || yAxis.color, [yAxis.color]);\n\n  return useMemo(() => {\n    if (yAxis.hideAxis) return null;\n    const lineCoords = {\n      x1: 0,\n      x2: 0,\n      y1: 0,\n      y2: innerHeight,\n    };\n\n    return (\n      <Axis\n        lineCoords={lineCoords}\n        scale={yScale}\n        innerRef={setAxisLeftRef}\n        dimension={height}\n        GridRenderer={GridRenderer}\n        TickRenderer={TickRenderer}\n        color={axisColor}\n      />\n    );\n  }, [GridRenderer, TickRenderer, axisColor, height, innerHeight, setAxisLeftRef, yAxis.hideAxis, yScale]);\n});\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDV;AAlDb,mBAA4E;AAC5E,0BAA6B;AAE7B,kBAAmE;AACnE,kBAAqB;AACrB,sBAAyB;AACzB,yBAA6B;AAEtB,MAAM,WAAW,aAAAA,QAAM,KAAK,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,EAAE,aAAa,IAAI,MAAM,QAAS,CAAC;AACzC,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,UAAM,cAAc,EAAE,MAAM,gCAAa,OAAO,MAAM,UAAuC,OAAO,MAAM,MAAM;AAChH,QAAI,CAAC;AAAc,aAAO,EAAE,GAAG,aAAa,GAAG,KAAK,IAAI,SAAS;AACjE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,GAAG,KAAK,MAAM,EAAE,OAAO,OAAO,eAAe,OAAO,eAAe,IAAI,IAAI,IAAI;AAAA,MAC/E,WAAW,UAAU;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,cAAc,OAAO,MAAM,KAAK,CAAC;AAErC,QAAM,YAAuB;AAAA,IAC3B,OAAO;AAAA,MACL,YAAY;AAAA,IACd;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,UAAI,CAAC;AAAU,eAAO;AACtB,YAAM,EAAE,aAAa,KAAK,IAAI;AAC9B,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AACA,aAAO,4CAAC,4BAAU,GAAG,gBAAiB,GAAG,MAAM;AAAA,IACjD;AAAA,IACA,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,YAAM,EAAE,UAAU,cAAc,KAAK,IAAI;AACzC,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,QAAQ,gCAAa,OAAO,MAAM,UAAuC,OAAO,MAAM;AAAA,MACxF;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ;AAAA,UACA,WAAW;AAAA,UACX,WAAW,OAAO,iBAAiB,SAAS;AAAA,UAC3C,GAAG;AAAA;AAAA,MACN;AAAA,IAEJ;AAAA,IACA,CAAC,OAAO,WAAW,OAAO,MAAM,OAAO,MAAM;AAAA,EAC/C;AAEA,QAAM,gBAAY,sBAAQ,MAAM,gCAAa,MAAM,UAAuC,MAAM,OAAO,CAAC,MAAM,KAAK,CAAC;AAEpH,aAAO,sBAAQ,MAAM;AACnB,QAAI,MAAM;AAAU,aAAO;AAC3B,UAAM,aAAa;AAAA,MACjB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ,GAAG,CAAC,cAAc,cAAc,WAAW,QAAQ,aAAa,gBAAgB,MAAM,UAAU,MAAM,CAAC;AACzG,CAAC;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { type CSSProperties, useCallback, useContext, useMemo } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { Axis, type TickRenderPropsT, type GridRenderPropsT } from './Axis';\nimport { Tick } from './Tick';\nimport { GridLine } from './GridLine';\nimport { COLOR_PALLET } from '../../helpers/colorPallet';\n\nexport const AxisLeft = React.memo(() => {\n  const {\n    props: { yAxis, yScroll },\n    innerHeight,\n    height,\n    yScale,\n    innerWidth,\n    containerRatio,\n    setAxisLeftRef,\n  } = useContext(ChartContext);\n\n  const { tickRotation } = yAxis.tick || ({} as DSChartT.AxisTickT);\n  const { showGrid } = yAxis;\n\n  const realInnerHeight = useMemo(\n    () => innerHeight * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, yScroll],\n  );\n\n  const textProps = useMemo(() => {\n    const commomProps = { fill: COLOR_PALLET[yAxis?.tick?.color as keyof typeof COLOR_PALLET] || yAxis?.tick?.color };\n    if (!tickRotation) return { ...commomProps, x: -10, dy: '0.32em' };\n    return {\n      ...commomProps,\n      dy: '.30em',\n      dx: '-.10em',\n      x: Math.trunc(-(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1))),\n      transform: `rotate(${tickRotation})`,\n    };\n  }, [tickRotation, yAxis?.tick?.color]);\n\n  const style: CSSProperties = useMemo(\n    () => ({\n      textAnchor: 'end',\n    }),\n    [],\n  );\n\n  const GridRenderer = useCallback(\n    (props: GridRenderPropsT) => {\n      if (!showGrid) return null;\n      const { position, ...rest } = props;\n      const gridLineCoords = {\n        x1: 0,\n        x2: innerWidth,\n        y1: position,\n        y2: position,\n      };\n      return <GridLine {...gridLineCoords} {...rest} />;\n    },\n    [showGrid, innerWidth],\n  );\n\n  const TickRenderer = useCallback(\n    (props: TickRenderPropsT) => {\n      const { position, tickValue, ...rest } = props;\n      const tickLineCoords = {\n        x2: -5,\n        stroke: COLOR_PALLET[yAxis?.tick?.color as keyof typeof COLOR_PALLET] || yAxis?.tick?.color,\n      };\n      return (\n        <Tick\n          {...tickLineCoords}\n          xTranslate={0}\n          yTranslate={position}\n          textProps={textProps}\n          textStyle={style}\n          tickValue={yScale.getTickFormatted(tickValue)}\n          {...rest}\n        />\n      );\n    },\n    [style, textProps, yAxis?.tick?.color, yScale],\n  );\n\n  const axisColor = useMemo(() => COLOR_PALLET[yAxis.color as keyof typeof COLOR_PALLET] || yAxis.color, [yAxis.color]);\n\n  return useMemo(() => {\n    if (yAxis.hideAxis) return null;\n    const lineCoords = {\n      x1: 0,\n      x2: 0,\n      y1: 0,\n      y2: realInnerHeight,\n    };\n\n    return (\n      <Axis\n        lineCoords={lineCoords}\n        scale={yScale}\n        innerRef={setAxisLeftRef}\n        dimension={height}\n        GridRenderer={GridRenderer}\n        TickRenderer={TickRenderer}\n        color={axisColor}\n      />\n    );\n  }, [GridRenderer, TickRenderer, axisColor, height, realInnerHeight, setAxisLeftRef, yAxis.hideAxis, yScale]);\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0DV;AAxDb,mBAA4E;AAC5E,0BAA6B;AAE7B,kBAAmE;AACnE,kBAAqB;AACrB,sBAAyB;AACzB,yBAA6B;AAEtB,MAAM,WAAW,aAAAA,QAAM,KAAK,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,EAAE,aAAa,IAAI,MAAM,QAAS,CAAC;AACzC,QAAM,EAAE,SAAS,IAAI;AAErB,QAAM,sBAAkB;AAAA,IACtB,MAAM,eAAe,UAAU,iBAAiB;AAAA,IAChD,CAAC,gBAAgB,aAAa,OAAO;AAAA,EACvC;AAEA,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,UAAM,cAAc,EAAE,MAAM,gCAAa,OAAO,MAAM,UAAuC,OAAO,MAAM,MAAM;AAChH,QAAI,CAAC;AAAc,aAAO,EAAE,GAAG,aAAa,GAAG,KAAK,IAAI,SAAS;AACjE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,GAAG,KAAK,MAAM,EAAE,OAAO,OAAO,eAAe,OAAO,eAAe,IAAI,IAAI,IAAI;AAAA,MAC/E,WAAW,UAAU;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,cAAc,OAAO,MAAM,KAAK,CAAC;AAErC,QAAM,YAAuB;AAAA,IAC3B,OAAO;AAAA,MACL,YAAY;AAAA,IACd;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,UAAI,CAAC;AAAU,eAAO;AACtB,YAAM,EAAE,aAAa,KAAK,IAAI;AAC9B,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AACA,aAAO,4CAAC,4BAAU,GAAG,gBAAiB,GAAG,MAAM;AAAA,IACjD;AAAA,IACA,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,UAA4B;AAC3B,YAAM,EAAE,UAAU,cAAc,KAAK,IAAI;AACzC,YAAM,iBAAiB;AAAA,QACrB,IAAI;AAAA,QACJ,QAAQ,gCAAa,OAAO,MAAM,UAAuC,OAAO,MAAM;AAAA,MACxF;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,YAAY;AAAA,UACZ,YAAY;AAAA,UACZ;AAAA,UACA,WAAW;AAAA,UACX,WAAW,OAAO,iBAAiB,SAAS;AAAA,UAC3C,GAAG;AAAA;AAAA,MACN;AAAA,IAEJ;AAAA,IACA,CAAC,OAAO,WAAW,OAAO,MAAM,OAAO,MAAM;AAAA,EAC/C;AAEA,QAAM,gBAAY,sBAAQ,MAAM,gCAAa,MAAM,UAAuC,MAAM,OAAO,CAAC,MAAM,KAAK,CAAC;AAEpH,aAAO,sBAAQ,MAAM;AACnB,QAAI,MAAM;AAAU,aAAO;AAC3B,UAAM,aAAa;AAAA,MACjB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ,GAAG,CAAC,cAAc,cAAc,WAAW,QAAQ,iBAAiB,gBAAgB,MAAM,UAAU,MAAM,CAAC;AAC7G,CAAC;",
   "names": ["React"]
 }

package/dist/cjs/graphs/Chart/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/react-desc-prop-types.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color?: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: string;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface LegendT {\n    position: 'right' | 'bottom' | 'left' | 'top';\n    preventFilterAction: boolean;\n  }\n\n  export interface AxisTickT {\n    tickValues: number[] | Date[];\n    tickFormat?: (value: string | number | Date) => string;\n    tickCount: number;\n    tickRotation: number;\n    overwriteTicks: boolean;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    label: string;\n    type: AxisTypeT;\n    cols?: string[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    advanced: {\n      pointSpacing: {\n        type: 'string';\n        value: number;\n      };\n    };\n    tick: AxisTickT;\n    plotRange: number[];\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string | undefined;\n    color?: string;\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export type InternalData = InternalSerie[];\n\n  export interface OptionalProps {\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper: ScrapperT;\n    withTrendHighlight: boolean;\n    TooltipRenderer: () => JSX.Element;\n    height: number;\n    width: number;\n    legend: LegendT;\n  }\n\n  export interface DefaultProps {\n    yAxis: AxisT;\n    xAxis: AxisT;\n    y2Axis: AxisT;\n    series: SeriesT[];\n  }\n\n  export interface RequiredProps {}\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n  series: [\n    {\n      name: '1',\n      data: [0],\n      color: 'grey-100',\n      type: 'bar',\n    },\n  ],\n  xAxis: {\n    cols: ['0'],\n  },\n  yAxis: {},\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AAkH9C,MAAM,eAAsC;AAAA,EACjD,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM,CAAC,CAAC;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,MAAM,CAAC,GAAG;AAAA,EACZ;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,8BAAU,MAAM;AAAA,IACtB,KAAK,8BAAU;AAAA,IACf,QAAQ,8BAAU;AAAA,IAClB,MAAM,8BAAU;AAAA,IAChB,OAAO,8BAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
+  "sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color?: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: string;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface LegendT {\n    position: 'right' | 'bottom' | 'left' | 'top';\n    preventFilterAction: boolean;\n  }\n\n  export interface AxisTickT {\n    tickValues: number[] | Date[];\n    tickFormat?: (value: string | number | Date) => string;\n    tickCount: number;\n    tickRotation: number;\n    overwriteTicks: boolean;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    label: string;\n    type: AxisTypeT;\n    cols?: string[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    advanced: {\n      pointSpacing: {\n        type: 'string';\n        value: number;\n      };\n    };\n    tick: AxisTickT;\n    plotRange: number[];\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string | undefined;\n    color?: string;\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export type InternalData = InternalSerie[];\n\n  export interface OptionalProps {\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper: ScrapperT;\n    withTrendHighlight: boolean;\n    TooltipRenderer: () => JSX.Element;\n    height: number;\n    width: number;\n    legend: LegendT;\n    xScroll: boolean;\n    yScroll: boolean;\n  }\n\n  export interface DefaultProps {\n    yAxis: AxisT;\n    xAxis: AxisT;\n    y2Axis: AxisT;\n    series: SeriesT[];\n  }\n\n  export interface RequiredProps {}\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n  series: [\n    {\n      name: '1',\n      data: [0],\n      color: 'grey-100',\n      type: 'bar',\n    },\n  ],\n  xAxis: {\n    cols: ['0'],\n  },\n  yAxis: {},\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAqD;AAoH9C,MAAM,eAAsC;AAAA,EACjD,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM,CAAC,CAAC;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,MAAM,CAAC,GAAG;AAAA,EACZ;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,8BAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,8BAAU,MAAM;AAAA,IACtB,KAAK,8BAAU;AAAA,IACf,QAAQ,8BAAU;AAAA,IAClB,MAAM,8BAAU;AAAA,IAChB,OAAO,8BAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,8BAAU,QAAQ,8BAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
   "names": []
 }

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

@@ -35,38 +35,48 @@ var import_ChartContext = require("../ChartContext");
 var import_helpers = require("../helpers");
 const HorizontalStackedBars = ({ serie }) => {
   const {
-    props: { groups },
+    props: { groups, yScroll },
     xScale,
     yScale,
     stackedData,
     subGroupScale,
     colorScale,
+    innerHeight,
+    containerRatio,
     chartId,
     getYValue
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const serieWithStackedValues = (0, import_helpers.getStackedData)(stackedData, serie);
   const stackIndex = (0, import_helpers.getStackedIndex)(groups, serie.name);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: serieWithStackedValues.map((sequence, i) => {
-    const isFloorStack = sequence[0] === 0;
-    const xValue = sequence[1] - sequence[0];
-    const yValue = getYValue(serie.data[i]);
-    const width = xScale.get(sequence[1]) - xScale.get(sequence[0]) - (!isFloorStack ? 2 : 0);
-    const height = subGroupScale?.bandwidth();
-    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,
-      {
-        width,
-        height,
-        x: transformX,
-        xValue,
-        yValue,
-        id: serie.data[i].key,
-        name: serie.name,
-        datum: serie.data[i]
-      }
-    ) }) }, serie.data[i].key);
-  }) });
+  const realInnerHeight = (0, import_react.useMemo)(
+    () => innerHeight * (yScroll ? containerRatio : 1),
+    [containerRatio, innerHeight, yScroll]
+  );
+  return (0, import_react.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: serie.data.map((bar, i) => {
+      const sequence = serieWithStackedValues[bar.position];
+      const isFloorStack = sequence[0] === 0;
+      const xValue = sequence[1] - sequence[0];
+      const yValue = getYValue(serie.data[i]);
+      const width = xScale.get(sequence[1]) - xScale.get(sequence[0]) - (!isFloorStack ? 2 : 0);
+      const height = subGroupScale?.bandwidth();
+      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,
+        {
+          width,
+          height,
+          x: transformX,
+          xValue,
+          yValue,
+          id: serie.data[i]?.key,
+          name: serie.name,
+          datum: serie.data[i]
+        }
+      ) }) }, serie.data[i]?.key);
+    }) }),
+    [chartId, colorScale, getYValue, serie, serieWithStackedValues, stackIndex, subGroupScale, xScale, yScale]
+  );
 };
 //# sourceMappingURL=HorizontalStackedBars.js.map

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.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;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\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, yScroll },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    innerHeight,\n    containerRatio,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n\n  const realInnerHeight = useMemo(\n    () => innerHeight * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, yScroll],\n  );\n\n  return useMemo(\n    () => (\n      <g>\n        {serie.data.map((bar, i) => {\n          const sequence = serieWithStackedValues[bar.position];\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          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    [chartId, colorScale, getYValue, serie, serieWithStackedValues, stackIndex, subGroupScale, xScale, yScale],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8CP;AA7ChB,mBAA2C;AAC3C,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAGzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAgC;AAC5E,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,QAAQ;AAAA,IACzB;AAAA,IACA;AAAA,IACA;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;AAErD,QAAM,sBAAkB;AAAA,IACtB,MAAM,eAAe,UAAU,iBAAiB;AAAA,IAChD,CAAC,gBAAgB,aAAa,OAAO;AAAA,EACvC;AAEA,aAAO;AAAA,IACL,MACE,4CAAC,OACE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,WAAW,uBAAuB,IAAI;AAC5C,YAAM,eAAe,SAAS,OAAO;AACrC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,YAAM,QAAQ,OAAO,IAAI,SAAS,EAAE,IAAI,OAAO,IAAI,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAEvF,YAAM,SAAS,eAAe,UAAU;AAExC,YAAM,aAAa,OAAO,IAAI,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAClE,YAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,IAAI,MAAM;AAClF,aACE,4CAAC,OAA2B,UAAU,wBAAwB,YAC5D,sDAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,WAAW,gBAAgB,eAC1D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UACA,IAAI,MAAM,KAAK,IAAI;AAAA,UACnB,MAAM,MAAM;AAAA,UACZ,OAAO,MAAM,KAAK;AAAA;AAAA,MACpB,GACF,KAZM,MAAM,KAAK,IAAI,GAavB;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF,CAAC,SAAS,YAAY,WAAW,OAAO,wBAAwB,YAAY,eAAe,QAAQ,MAAM;AAAA,EAC3G;AACF;",
   "names": []
 }

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

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

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, useEffect, useState } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\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  toolbarRef: SVGGElement | null;\n}\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (\n  ref: SVGGElement | null,\n  { offsetHeight = 0, offsetWidth = 0 } = { offsetHeight: 0, offsetWidth: 0 },\n) => {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n        entries.forEach((entry) => {\n          setWidth(Math.ceil(entry.contentRect.width + offsetWidth));\n          setHeight(Math.ceil(entry.contentRect.height + offsetHeight));\n        });\n      });\n\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [offsetHeight, offsetWidth, ref]);\n  return { width, height };\n};\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  toolbarRef,\n}: UseInternalMarginsT) => {\n  // Toolbar\n  const { height: toolbarHeight } = useResizeObserver(toolbarRef, { offsetHeight: 10 });\n\n  // Axis\n  const { width: axisRightWidth } = useResizeObserver(axisRightRef, { offsetWidth: 10 });\n  const { height: axisBottomHeight } = useResizeObserver(axisBottomRef, { offsetHeight: 20 });\n  const { width: axisLeftWidth } = useResizeObserver(axisLeftRef, { offsetWidth: 10 });\n\n  // Labels\n  const { height: bottomLabelHeight } = useResizeObserver(bottomLabel, { offsetHeight: 10 });\n  const { width: rightLabelWidth } = useResizeObserver(rightLabel, { offsetWidth: 10 });\n  const { width: leftLabelWidth, height: leftLabelHeight } = useResizeObserver(leftLabel);\n\n  // Legends\n  const { height: topLegendHeight } = useResizeObserver(topLegend, { offsetHeight: 20 });\n  const { height: bottomLegendHeight, width: bottomLegendWidth } = useResizeObserver(bottomLegend, {\n    offsetHeight: 10,\n  });\n  const { width: rightLegendWidth, height: rightLegendHeight } = useResizeObserver(rightLegend);\n  const { width: leftLegendWidth, height: leftLegendHeight } = useResizeObserver(leftLegend, { offsetWidth: 20 });\n\n  const internalMargin = useMemo(\n    () => ({\n      bottom: axisBottomHeight + bottomLegendHeight + bottomLabelHeight || 10,\n      top: Math.max(topLegendHeight, toolbarHeight) || 10,\n      right: rightLabelWidth + axisRightWidth + rightLegendWidth || 10,\n      left: axisLeftWidth + leftLabelWidth + leftLegendWidth || 10,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      toolbarHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendHeight,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      toolbarHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    }),\n    [\n      axisBottomHeight,\n      toolbarHeight,\n      leftLegendHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    ],\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useEffect, useState } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\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  toolbarRef: SVGGElement | null;\n}\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\n\nconst useResizeObserver = (\n  ref: SVGGElement | null,\n  { offsetHeight = 0, offsetWidth = 0 } = { offsetHeight: 0, offsetWidth: 0 },\n) => {\n  const [width, setWidth] = useState<number>(0);\n  const [height, setHeight] = useState<number>(0);\n\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver((entries: ResizeObserverConstructorEntries) => {\n        entries.forEach((entry) => {\n          setWidth(Math.ceil(entry.contentRect.width + offsetWidth));\n          setHeight(Math.ceil(entry.contentRect.height + offsetHeight));\n        });\n      });\n\n      resizeObserver.observe(observeTarget);\n\n      return () => {\n        resizeObserver.unobserve(observeTarget);\n      };\n    }\n  }, [offsetHeight, offsetWidth, ref]);\n  return { width, height };\n};\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  toolbarRef,\n}: UseInternalMarginsT) => {\n  // Toolbar\n  const { height: toolbarHeight } = useResizeObserver(toolbarRef, { offsetHeight: 10 });\n\n  // Axis\n  const { width: axisRightWidth } = useResizeObserver(axisRightRef, { offsetWidth: 10 });\n  const { height: axisBottomHeight } = useResizeObserver(axisBottomRef, { offsetHeight: 20 });\n  const { width: axisLeftWidth } = useResizeObserver(axisLeftRef, { offsetWidth: 10 });\n\n  // Labels\n  const { height: bottomLabelHeight } = useResizeObserver(bottomLabel, { offsetHeight: 10 });\n  const { width: rightLabelWidth } = useResizeObserver(rightLabel, { offsetWidth: 10 });\n  const { width: leftLabelWidth, height: leftLabelHeight } = useResizeObserver(leftLabel);\n\n  // Legends\n  const { height: topLegendHeight } = useResizeObserver(topLegend, { offsetHeight: 20 });\n  const { height: bottomLegendHeight, width: bottomLegendWidth } = useResizeObserver(bottomLegend, {\n    offsetHeight: 10,\n  });\n  const { width: rightLegendWidth, height: rightLegendHeight } = useResizeObserver(rightLegend);\n  const { width: leftLegendWidth, height: leftLegendHeight } = useResizeObserver(leftLegend, { offsetWidth: 20 });\n\n  const internalMargin = useMemo(\n    () => ({\n      bottom: axisBottomHeight + bottomLegendHeight + bottomLabelHeight || 10,\n      top: Math.max(topLegendHeight, toolbarHeight) || 10,\n      right: rightLabelWidth + axisRightWidth + rightLegendWidth || 15,\n      left: axisLeftWidth + leftLabelWidth + leftLegendWidth || 10,\n    }),\n\n    [\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      toolbarHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      leftLegendWidth,\n    ],\n  );\n\n  return useMemo(\n    () => ({\n      internalMargin,\n      leftLegendHeight,\n      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      toolbarHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    }),\n    [\n      axisBottomHeight,\n      toolbarHeight,\n      leftLegendHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n      leftLabelHeight,\n      rightLegendHeight,\n      bottomLegendWidth,\n    ],\n  );\n};\n"],
   "mappings": "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",
   "names": []
 }

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

@@ -148,7 +148,8 @@ const useScales = ({
       if (axisProps?.type === "log")
         return new LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));
       if (axisProps?.type === "band" || axis === "x" && axisProps?.type === void 0) {
-        return new BandScale(getScaleBand(getBandDomain(axisProps), range), axisProps);
+        const realRange = axis === "y" ? range.reverse() : range;
+        return new BandScale(getScaleBand(getBandDomain(axisProps), realRange), axisProps);
       }
       return null;
     },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useScales.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { Series } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { getStackedIndex } from '../helpers';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\nimport { TIME_OFFSET } from '../../constants';\nimport { BandScale, LinearScale, TimeLinearScale, LogScale } from '../scales';\ninterface UseScales {\n  props: DSChartT.Props;\n  innerHeight: number;\n  innerWidth: number;\n  stackedData: Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n  currentData: DSChartT.InternalData;\n  groups: string[];\n  containerRatio: number;\n}\n\nexport const useScales = ({\n  props,\n  originalSeries: series,\n  innerHeight,\n  innerWidth,\n  stackedData,\n  currentData,\n  containerRatio,\n}: UseScales) => {\n  const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  const getBandDomain = useCallback(\n    (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n    [series],\n  );\n\n  const getPadding = (domainPadding: number | Array<number>) =>\n    typeof domainPadding === 'number' ? [domainPadding, domainPadding] : domainPadding ?? [0, 0];\n\n  const getLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n      const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n      const end = axis.max ?? undefined;\n      const data = currentData\n        // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n        .filter((serie) => serie.scale === axisString || axisString === 'x')\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n\n      const dataFlattened = data.flat();\n      const stackedDataFlatten = stackedData.filter((data) => data.scale === axisString).flat();\n      const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n      const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n\n      const getMin = () => {\n        const aux = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (types.includes(typeof minData)) aux.push(minData);\n        if (typeof minStackedData === 'number') aux.push(minStackedData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (typeof end === 'number' || typeof end === 'object') aux.push(end);\n        if (types.includes(typeof maxData)) aux.push(maxData);\n        if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n      if (typeof minRange === 'number' && typeof maxRange === 'number') {\n        // @TODO fix this domain padding\n        return [\n          minRange - (maxRange - minRange) * (leftPadding ?? 0),\n          maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n        ];\n      }\n      // timelinear case\n      if (typeof minRange === 'object' && typeof maxRange === 'object') {\n        if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n          return [\n            TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n            TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n          ];\n        }\n        return [minRange, maxRange];\n      }\n\n      return [];\n    },\n    [currentData, stackedData],\n  );\n\n  const getTimeLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n\n      const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n      const end = axis.max ?? undefined;\n      const data = currentData\n        // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n        .filter((serie) => serie.scale === axisString || axisString === 'x')\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n\n      const dataFlattened = data.flat();\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n\n      const getMin = () => {\n        const aux = [];\n        aux.push(begin);\n        if (types.includes(typeof minData)) aux.push(minData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux = [];\n        aux.push(begin);\n        aux.push(end);\n        if (types.includes(typeof maxData)) aux.push(maxData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n      // timelinear case\n      if (typeof minRange === 'object' && typeof maxRange === 'object') {\n        if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n          return [\n            TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n            TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n          ];\n        }\n        return [minRange, maxRange];\n      }\n\n      return [];\n    },\n    [currentData],\n  );\n\n  // d3 scale functions\n  const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n  const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n    scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n  const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n  const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n  // dataviz scales\n\n  const scaleFactory = useCallback(\n    (axis: 'x' | 'y' | 'y2', axisProps: DSChartT.AxisT, range: number[]) => {\n      if (!axisProps) return null;\n      if (['time', 'datetime'].includes(axisProps?.type)) {\n        return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis), range), axisProps);\n      }\n\n      if (axisProps?.type === 'linear' || (['y', 'y2'].includes(axis) && axisProps?.type === undefined)) {\n        return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis), range), axisProps);\n      }\n\n      if (axisProps?.type === 'log') return new LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));\n\n      if (axisProps?.type === 'band' || (axis === 'x' && axisProps?.type === undefined)) {\n        return new BandScale(getScaleBand(getBandDomain(axisProps), range), axisProps);\n      }\n      return null;\n    },\n    [getBandDomain, getLinearDomain],\n  );\n\n  const xRangeFrom = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);\n  const xRangeTo = useMemo(\n    () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),\n    [containerRatio, innerWidth, xAxis?.plotRange, xScroll],\n  );\n\n  const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);\n  const yRangeFrom = useMemo(\n    () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, yAxis?.plotRange, yScroll],\n  );\n\n  const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);\n  const y2RangeFrom = useMemo(\n    () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, y2Axis?.plotRange, yScroll],\n  );\n\n  const xScale = useMemo(\n    () => scaleFactory('x', xAxis, [xRangeFrom, xRangeTo]),\n    [scaleFactory, xAxis, xRangeFrom, xRangeTo],\n  );\n\n  const yScale = useMemo(\n    () => scaleFactory('y', yAxis, [yRangeFrom, yRangeTo]),\n    [scaleFactory, yAxis, yRangeFrom, yRangeTo],\n  );\n\n  const y2Scale = useMemo(\n    () => scaleFactory('y2', y2Axis, [y2RangeFrom, y2RangeTo]),\n    [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo],\n  );\n\n  const colorScale = useMemo(\n    () =>\n      scaleOrdinal()\n        .domain(series.map((d) => d.name))\n        .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n        .unknown('red'),\n    [series],\n  );\n  // get only groups bars to calculate the subgroup scale\n\n  const subgroupsWithBars = useMemo(() => {\n    const data = currentData\n      .filter(\n        (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n      )\n      .map((serie) => serie.name);\n\n    if (stackedSeries?.length) {\n      stackedSeries.forEach((stackedGroup, i) => {\n        if (stackedGroup.length > 0) data.push(`stacked-data-${i}`);\n      });\n    }\n    return data;\n  }, [currentData, stackedSeries]);\n\n  const getBandwidth = useCallback(() => {\n    if (xScale?.type === 'BAND') {\n      return xScale.getBandwidth();\n    }\n    if (yScale?.type === 'BAND') {\n      return yScale?.getBandwidth();\n    }\n    // @todo explore this. is to create bars with a linear axis\n    const bar = currentData.filter((serie) => serie.type === 'bar');\n    const barsLength = bar.length;\n    if (!barsLength) return;\n    // we get the size of the bars using the length of the data or the ticks amounts\n    // the biggest is the one we use to get the real width we need.\n    // we are doing calculations only for x axis because we are not expecting\n    // y axis linear cases.\n    const divisor = Math.max(bar[0].data.length, xScale?.scale.ticks().length, xScale?.getTicks(innerWidth).length, 1);\n    const leftMargin = xScale?.get(bar[0].data[0].value.x);\n    const rightMargin = innerWidth * containerRatio - xScale?.get(bar[0].data[bar[0].data.length - 1].value.x);\n\n    const width = (innerWidth - (leftMargin + rightMargin)) / divisor;\n    if (containerRatio > 1) {\n      return Math.max(0.5, width * containerRatio);\n    }\n    return Math.max(0.5, Math.trunc(width - width * 0.3));\n  }, [currentData, innerWidth, containerRatio, xScale, yScale]);\n\n  const subGroupScale = useMemo(\n    () =>\n      getBandwidth()\n        ? scaleBand()\n            .domain(subgroupsWithBars)\n            .range([0, getBandwidth()])\n            .paddingInner(0.55)\n            .padding(0.2)\n            .paddingOuter(0.01)\n        : null,\n    [getBandwidth, subgroupsWithBars],\n  );\n\n  return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useCallback } from 'react';\nimport type { Series } from 'd3';\nimport { max, min, scaleLinear, scaleBand, scaleUtc, scaleOrdinal, scaleLog } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\nimport { getStackedIndex } from '../helpers';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\nimport { TIME_OFFSET } from '../../constants';\nimport { BandScale, LinearScale, TimeLinearScale, LogScale } from '../scales';\ninterface UseScales {\n  props: DSChartT.Props;\n  innerHeight: number;\n  innerWidth: number;\n  stackedData: Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n  currentData: DSChartT.InternalData;\n  groups: string[];\n  containerRatio: number;\n}\n\nexport const useScales = ({\n  props,\n  originalSeries: series,\n  innerHeight,\n  innerWidth,\n  stackedData,\n  currentData,\n  containerRatio,\n}: UseScales) => {\n  const { xAxis, yAxis, y2Axis, groups: stackedSeries, xScroll } = props;\n\n  // const xScroll = xAxis.advanced?.pointSpacing?.value > 1;\n  const yScroll = yAxis.advanced?.pointSpacing?.value > 1;\n\n  const getBandDomain = useCallback(\n    (axis: DSChartT.AxisT) => axis.cols ?? [...series[0].data.map((_, i) => i.toString())],\n    [series],\n  );\n\n  const getPadding = (domainPadding: number | Array<number>) =>\n    typeof domainPadding === 'number' ? [domainPadding, domainPadding] : domainPadding ?? [0, 0];\n\n  const getLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n      const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n      const end = axis.max ?? undefined;\n      const data = currentData\n        // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n        .filter((serie) => serie.scale === axisString || axisString === 'x')\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n\n      const dataFlattened = data.flat();\n      const stackedDataFlatten = stackedData.filter((data) => data.scale === axisString).flat();\n      const minStackedData = min(stackedDataFlatten, (layer) => min(layer, (sequence) => sequence[0]));\n      const maxStackedData = max(stackedDataFlatten, (layer) => max(layer, (sequence) => sequence[1]));\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n\n      const getMin = () => {\n        const aux = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (types.includes(typeof minData)) aux.push(minData);\n        if (typeof minStackedData === 'number') aux.push(minStackedData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux = [];\n        if (typeof begin === 'number' || typeof begin === 'object') aux.push(begin);\n        if (typeof end === 'number' || typeof end === 'object') aux.push(end);\n        if (types.includes(typeof maxData)) aux.push(maxData);\n        if (typeof maxStackedData === 'number') aux.push(maxStackedData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n      if (typeof minRange === 'number' && typeof maxRange === 'number') {\n        // @TODO fix this domain padding\n        return [\n          minRange - (maxRange - minRange) * (leftPadding ?? 0),\n          maxRange + (maxRange - minRange) * (rightPadding ?? 0),\n        ];\n      }\n      // timelinear case\n      if (typeof minRange === 'object' && typeof maxRange === 'object') {\n        if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n          return [\n            TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n            TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n          ];\n        }\n        return [minRange, maxRange];\n      }\n\n      return [];\n    },\n    [currentData, stackedData],\n  );\n\n  const getTimeLinearDomain = useCallback(\n    (axis: DSChartT.AxisT, axisString: 'x' | 'y' | 'y2') => {\n      // we are calculating the min and max between all the data\n      // including the stacked groups if exists\n\n      const begin = axis?.beginAtZero ? 0 : axis.min ?? undefined;\n      const end = axis.max ?? undefined;\n      const data = currentData\n        // we filter the data based on scale.. if is x axis we dont because theres no x2 axis\n        .filter((serie) => serie.scale === axisString || axisString === 'x')\n        .map((serie) =>\n          serie.data\n            .filter((datum) => datum.value !== null)\n            .map((datum) => {\n              if (typeof datum.value === 'number') {\n                return datum.value;\n              }\n\n              return datum.value[axisString === 'y2' ? 'y' : axisString];\n            }),\n        );\n\n      const dataFlattened = data.flat();\n      const minData = min(dataFlattened);\n      const maxData = max(dataFlattened);\n      const types = ['number', 'object'];\n\n      const getMin = () => {\n        const aux = [];\n        aux.push(begin);\n        if (types.includes(typeof minData)) aux.push(minData);\n        return min(aux);\n      };\n      const getMax = () => {\n        const aux = [];\n        aux.push(begin);\n        aux.push(end);\n        if (types.includes(typeof maxData)) aux.push(maxData);\n        return max(aux);\n      };\n      const minRange = getMin();\n      const maxRange = getMax();\n\n      const [leftPadding, rightPadding] = getPadding(axis.domainPadding);\n\n      // timelinear case\n      if (typeof minRange === 'object' && typeof maxRange === 'object') {\n        if (axis.domainPaddingType && TIME_OFFSET[axis.domainPaddingType]) {\n          return [\n            TIME_OFFSET[axis.domainPaddingType].offset(minRange, -leftPadding),\n            TIME_OFFSET[axis.domainPaddingType].offset(maxRange, rightPadding),\n          ];\n        }\n        return [minRange, maxRange];\n      }\n\n      return [];\n    },\n    [currentData],\n  );\n\n  // d3 scale functions\n  const getScaleTime = (domain: Date[], range: number[]) => scaleUtc().domain(domain).range(range);\n\n  const getScaleBand = (domain: string[], range: number[], padding = 0.2) =>\n    scaleBand().domain(domain).range(range).padding(padding).paddingOuter(0.05);\n  const getScaleLinear = (domain: number[], range: number[]) => scaleLinear().domain(domain).range(range);\n  const getScaleLog = (domain: number[], range: number[]) => scaleLog().domain(domain).range(range);\n\n  // dataviz scales\n\n  const scaleFactory = useCallback(\n    (axis: 'x' | 'y' | 'y2', axisProps: DSChartT.AxisT, range: number[]) => {\n      if (!axisProps) return null;\n      if (['time', 'datetime'].includes(axisProps?.type)) {\n        return new TimeLinearScale(getScaleTime(getLinearDomain(axisProps, axis), range), axisProps);\n      }\n\n      if (axisProps?.type === 'linear' || (['y', 'y2'].includes(axis) && axisProps?.type === undefined)) {\n        return new LinearScale(getScaleLinear(getLinearDomain(axisProps, axis), range), axisProps);\n      }\n\n      if (axisProps?.type === 'log') return new LogScale(getScaleLog(getLinearDomain(axisProps, axis), range));\n\n      if (axisProps?.type === 'band' || (axis === 'x' && axisProps?.type === undefined)) {\n        // we need to reverse the range in case is a horizontal bar char\n        const realRange = axis === 'y' ? range.reverse() : range;\n        return new BandScale(getScaleBand(getBandDomain(axisProps), realRange), axisProps);\n      }\n      return null;\n    },\n    [getBandDomain, getLinearDomain],\n  );\n\n  const xRangeFrom = useMemo(() => containerRatio * (xAxis?.plotRange?.[0] || 0), [containerRatio, xAxis?.plotRange]);\n  const xRangeTo = useMemo(\n    () => (innerWidth - (xAxis?.plotRange?.[1] || 0)) * (xScroll ? containerRatio : 1),\n    [containerRatio, innerWidth, xAxis?.plotRange, xScroll],\n  );\n\n  const yRangeTo = useMemo(() => yAxis?.plotRange?.[0] || 0, [yAxis?.plotRange]);\n  const yRangeFrom = useMemo(\n    () => (innerHeight - (yAxis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, yAxis?.plotRange, yScroll],\n  );\n\n  const y2RangeTo = useMemo(() => y2Axis?.plotRange?.[0] || 0, [y2Axis?.plotRange]);\n  const y2RangeFrom = useMemo(\n    () => (innerHeight - (y2Axis?.plotRange?.[1] || 0)) * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, y2Axis?.plotRange, yScroll],\n  );\n\n  const xScale = useMemo(\n    () => scaleFactory('x', xAxis, [xRangeFrom, xRangeTo]),\n    [scaleFactory, xAxis, xRangeFrom, xRangeTo],\n  );\n\n  const yScale = useMemo(\n    () => scaleFactory('y', yAxis, [yRangeFrom, yRangeTo]),\n    [scaleFactory, yAxis, yRangeFrom, yRangeTo],\n  );\n\n  const y2Scale = useMemo(\n    () => scaleFactory('y2', y2Axis, [y2RangeFrom, y2RangeTo]),\n    [scaleFactory, y2Axis, y2RangeFrom, y2RangeTo],\n  );\n\n  const colorScale = useMemo(\n    () =>\n      scaleOrdinal()\n        .domain(series.map((d) => d.name))\n        .range(series.map((d) => COLOR_PALLET[d.color as keyof typeof COLOR_PALLET] ?? d.color))\n        .unknown('red'),\n    [series],\n  );\n  // get only groups bars to calculate the subgroup scale\n\n  const subgroupsWithBars = useMemo(() => {\n    const data = currentData\n      .filter(\n        (serie) => serie.type === 'bar' && !(stackedSeries?.length && getStackedIndex(stackedSeries, serie.name) > -1),\n      )\n      .map((serie) => serie.name);\n\n    if (stackedSeries?.length) {\n      stackedSeries.forEach((stackedGroup, i) => {\n        if (stackedGroup.length > 0) data.push(`stacked-data-${i}`);\n      });\n    }\n    return data;\n  }, [currentData, stackedSeries]);\n\n  const getBandwidth = useCallback(() => {\n    if (xScale?.type === 'BAND') {\n      return xScale.getBandwidth();\n    }\n    if (yScale?.type === 'BAND') {\n      return yScale?.getBandwidth();\n    }\n    // @todo explore this. is to create bars with a linear axis\n    const bar = currentData.filter((serie) => serie.type === 'bar');\n    const barsLength = bar.length;\n    if (!barsLength) return;\n    // we get the size of the bars using the length of the data or the ticks amounts\n    // the biggest is the one we use to get the real width we need.\n    // we are doing calculations only for x axis because we are not expecting\n    // y axis linear cases.\n    const divisor = Math.max(bar[0].data.length, xScale?.scale.ticks().length, xScale?.getTicks(innerWidth).length, 1);\n    const leftMargin = xScale?.get(bar[0].data[0].value.x);\n    const rightMargin = innerWidth * containerRatio - xScale?.get(bar[0].data[bar[0].data.length - 1].value.x);\n\n    const width = (innerWidth - (leftMargin + rightMargin)) / divisor;\n    if (containerRatio > 1) {\n      return Math.max(0.5, width * containerRatio);\n    }\n    return Math.max(0.5, Math.trunc(width - width * 0.3));\n  }, [currentData, innerWidth, containerRatio, xScale, yScale]);\n\n  const subGroupScale = useMemo(\n    () =>\n      getBandwidth()\n        ? scaleBand()\n            .domain(subgroupsWithBars)\n            .range([0, getBandwidth()])\n            .paddingInner(0.55)\n            .padding(0.2)\n            .paddingOuter(0.01)\n        : null,\n    [getBandwidth, subgroupsWithBars],\n  );\n\n  return { xScale, y2Scale, yScale, subGroupScale, colorScale, getBandwidth };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,SAAS,mBAAmB;AAErC,SAAS,KAAK,KAAK,aAAa,WAAW,UAAU,cAAc,gBAAgB;AAEnF,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,WAAW,aAAa,iBAAiB,gBAAgB;AAgB3D,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAiB;AACf,QAAM,EAAE,OAAO,OAAO,QAAQ,QAAQ,eAAe,QAAQ,IAAI;AAGjE,QAAM,UAAU,MAAM,UAAU,cAAc,QAAQ;AAEtD,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAyB,KAAK,QAAQ,CAAC,GAAG,OAAO,GAAG,KAAK,IAAI,CAAC,GAAG,MAAM,EAAE,SAAS,CAAC,CAAC;AAAA,IACrF,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,aAAa,CAAC,kBAClB,OAAO,kBAAkB,WAAW,CAAC,eAAe,aAAa,IAAI,iBAAiB,CAAC,GAAG,CAAC;AAE7F,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAsB,eAAiC;AAGtD,YAAM,QAAQ,MAAM,cAAc,IAAI,KAAK,OAAO;AAClD,YAAM,MAAM,KAAK,OAAO;AACxB,YAAM,OAAO,YAEV,OAAO,CAAC,UAAU,MAAM,UAAU,cAAc,eAAe,GAAG,EAClE;AAAA,QAAI,CAAC,UACJ,MAAM,KACH,OAAO,CAAC,UAAU,MAAM,UAAU,IAAI,EACtC,IAAI,CAAC,UAAU;AACd,cAAI,OAAO,MAAM,UAAU,UAAU;AACnC,mBAAO,MAAM;AAAA,UACf;AAEA,iBAAO,MAAM,MAAM,eAAe,OAAO,MAAM;AAAA,QACjD,CAAC;AAAA,MACL;AAEF,YAAM,gBAAgB,KAAK,KAAK;AAChC,YAAM,qBAAqB,YAAY,OAAO,CAACA,UAASA,MAAK,UAAU,UAAU,EAAE,KAAK;AACxF,YAAM,iBAAiB,IAAI,oBAAoB,CAAC,UAAU,IAAI,OAAO,CAAC,aAAa,SAAS,EAAE,CAAC;AAC/F,YAAM,iBAAiB,IAAI,oBAAoB,CAAC,UAAU,IAAI,OAAO,CAAC,aAAa,SAAS,EAAE,CAAC;AAC/F,YAAM,UAAU,IAAI,aAAa;AACjC,YAAM,UAAU,IAAI,aAAa;AACjC,YAAM,QAAQ,CAAC,UAAU,QAAQ;AAEjC,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,OAAO,UAAU,YAAY,OAAO,UAAU;AAAU,cAAI,KAAK,KAAK;AAC1E,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,YAAI,OAAO,mBAAmB;AAAU,cAAI,KAAK,cAAc;AAC/D,eAAO,IAAI,GAAG;AAAA,MAChB;AACA,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,OAAO,UAAU,YAAY,OAAO,UAAU;AAAU,cAAI,KAAK,KAAK;AAC1E,YAAI,OAAO,QAAQ,YAAY,OAAO,QAAQ;AAAU,cAAI,KAAK,GAAG;AACpE,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,YAAI,OAAO,mBAAmB;AAAU,cAAI,KAAK,cAAc;AAC/D,eAAO,IAAI,GAAG;AAAA,MAChB;AACA,YAAM,WAAW,OAAO;AACxB,YAAM,WAAW,OAAO;AAExB,YAAM,CAAC,aAAa,YAAY,IAAI,WAAW,KAAK,aAAa;AAEjE,UAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAEhE,eAAO;AAAA,UACL,YAAY,WAAW,aAAa,eAAe;AAAA,UACnD,YAAY,WAAW,aAAa,gBAAgB;AAAA,QACtD;AAAA,MACF;AAEA,UAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAChE,YAAI,KAAK,qBAAqB,YAAY,KAAK,oBAAoB;AACjE,iBAAO;AAAA,YACL,YAAY,KAAK,mBAAmB,OAAO,UAAU,CAAC,WAAW;AAAA,YACjE,YAAY,KAAK,mBAAmB,OAAO,UAAU,YAAY;AAAA,UACnE;AAAA,QACF;AACA,eAAO,CAAC,UAAU,QAAQ;AAAA,MAC5B;AAEA,aAAO,CAAC;AAAA,IACV;AAAA,IACA,CAAC,aAAa,WAAW;AAAA,EAC3B;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAAsB,eAAiC;AAItD,YAAM,QAAQ,MAAM,cAAc,IAAI,KAAK,OAAO;AAClD,YAAM,MAAM,KAAK,OAAO;AACxB,YAAM,OAAO,YAEV,OAAO,CAAC,UAAU,MAAM,UAAU,cAAc,eAAe,GAAG,EAClE;AAAA,QAAI,CAAC,UACJ,MAAM,KACH,OAAO,CAAC,UAAU,MAAM,UAAU,IAAI,EACtC,IAAI,CAAC,UAAU;AACd,cAAI,OAAO,MAAM,UAAU,UAAU;AACnC,mBAAO,MAAM;AAAA,UACf;AAEA,iBAAO,MAAM,MAAM,eAAe,OAAO,MAAM;AAAA,QACjD,CAAC;AAAA,MACL;AAEF,YAAM,gBAAgB,KAAK,KAAK;AAChC,YAAM,UAAU,IAAI,aAAa;AACjC,YAAM,UAAU,IAAI,aAAa;AACjC,YAAM,QAAQ,CAAC,UAAU,QAAQ;AAEjC,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,KAAK,KAAK;AACd,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,eAAO,IAAI,GAAG;AAAA,MAChB;AACA,YAAM,SAAS,MAAM;AACnB,cAAM,MAAM,CAAC;AACb,YAAI,KAAK,KAAK;AACd,YAAI,KAAK,GAAG;AACZ,YAAI,MAAM,SAAS,OAAO,OAAO;AAAG,cAAI,KAAK,OAAO;AACpD,eAAO,IAAI,GAAG;AAAA,MAChB;AACA,YAAM,WAAW,OAAO;AACxB,YAAM,WAAW,OAAO;AAExB,YAAM,CAAC,aAAa,YAAY,IAAI,WAAW,KAAK,aAAa;AAGjE,UAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAChE,YAAI,KAAK,qBAAqB,YAAY,KAAK,oBAAoB;AACjE,iBAAO;AAAA,YACL,YAAY,KAAK,mBAAmB,OAAO,UAAU,CAAC,WAAW;AAAA,YACjE,YAAY,KAAK,mBAAmB,OAAO,UAAU,YAAY;AAAA,UACnE;AAAA,QACF;AACA,eAAO,CAAC,UAAU,QAAQ;AAAA,MAC5B;AAEA,aAAO,CAAC;AAAA,IACV;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAGA,QAAM,eAAe,CAAC,QAAgB,UAAoB,SAAS,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AAE/F,QAAM,eAAe,CAAC,QAAkB,OAAiB,UAAU,QACjE,UAAU,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,aAAa,IAAI;AAC5E,QAAM,iBAAiB,CAAC,QAAkB,UAAoB,YAAY,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AACtG,QAAM,cAAc,CAAC,QAAkB,UAAoB,SAAS,EAAE,OAAO,MAAM,EAAE,MAAM,KAAK;AAIhG,QAAM,eAAe;AAAA,IACnB,CAAC,MAAwB,WAA2B,UAAoB;AACtE,UAAI,CAAC;AAAW,eAAO;AACvB,UAAI,CAAC,QAAQ,UAAU,EAAE,SAAS,WAAW,IAAI,GAAG;AAClD,eAAO,IAAI,gBAAgB,aAAa,gBAAgB,WAAW,IAAI,GAAG,KAAK,GAAG,SAAS;AAAA,MAC7F;AAEA,UAAI,WAAW,SAAS,YAAa,CAAC,KAAK,IAAI,EAAE,SAAS,IAAI,KAAK,WAAW,SAAS,QAAY;AACjG,eAAO,IAAI,YAAY,eAAe,gBAAgB,WAAW,IAAI,GAAG,KAAK,GAAG,SAAS;AAAA,MAC3F;AAEA,UAAI,WAAW,SAAS;AAAO,eAAO,IAAI,SAAS,YAAY,gBAAgB,WAAW,IAAI,GAAG,KAAK,CAAC;AAEvG,UAAI,WAAW,SAAS,UAAW,SAAS,OAAO,WAAW,SAAS,QAAY;AAEjF,cAAM,YAAY,SAAS,MAAM,MAAM,QAAQ,IAAI;AACnD,eAAO,IAAI,UAAU,aAAa,cAAc,SAAS,GAAG,SAAS,GAAG,SAAS;AAAA,MACnF;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,eAAe,eAAe;AAAA,EACjC;AAEA,QAAM,aAAa,QAAQ,MAAM,kBAAkB,OAAO,YAAY,MAAM,IAAI,CAAC,gBAAgB,OAAO,SAAS,CAAC;AAClH,QAAM,WAAW;AAAA,IACf,OAAO,cAAc,OAAO,YAAY,MAAM,OAAO,UAAU,iBAAiB;AAAA,IAChF,CAAC,gBAAgB,YAAY,OAAO,WAAW,OAAO;AAAA,EACxD;AAEA,QAAM,WAAW,QAAQ,MAAM,OAAO,YAAY,MAAM,GAAG,CAAC,OAAO,SAAS,CAAC;AAC7E,QAAM,aAAa;AAAA,IACjB,OAAO,eAAe,OAAO,YAAY,MAAM,OAAO,UAAU,iBAAiB;AAAA,IACjF,CAAC,gBAAgB,aAAa,OAAO,WAAW,OAAO;AAAA,EACzD;AAEA,QAAM,YAAY,QAAQ,MAAM,QAAQ,YAAY,MAAM,GAAG,CAAC,QAAQ,SAAS,CAAC;AAChF,QAAM,cAAc;AAAA,IAClB,OAAO,eAAe,QAAQ,YAAY,MAAM,OAAO,UAAU,iBAAiB;AAAA,IAClF,CAAC,gBAAgB,aAAa,QAAQ,WAAW,OAAO;AAAA,EAC1D;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,aAAa,KAAK,OAAO,CAAC,YAAY,QAAQ,CAAC;AAAA,IACrD,CAAC,cAAc,OAAO,YAAY,QAAQ;AAAA,EAC5C;AAEA,QAAM,SAAS;AAAA,IACb,MAAM,aAAa,KAAK,OAAO,CAAC,YAAY,QAAQ,CAAC;AAAA,IACrD,CAAC,cAAc,OAAO,YAAY,QAAQ;AAAA,EAC5C;AAEA,QAAM,UAAU;AAAA,IACd,MAAM,aAAa,MAAM,QAAQ,CAAC,aAAa,SAAS,CAAC;AAAA,IACzD,CAAC,cAAc,QAAQ,aAAa,SAAS;AAAA,EAC/C;AAEA,QAAM,aAAa;AAAA,IACjB,MACE,aAAa,EACV,OAAO,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,EAChC,MAAM,OAAO,IAAI,CAAC,MAAM,aAAa,EAAE,UAAuC,EAAE,KAAK,CAAC,EACtF,QAAQ,KAAK;AAAA,IAClB,CAAC,MAAM;AAAA,EACT;AAGA,QAAM,oBAAoB,QAAQ,MAAM;AACtC,UAAM,OAAO,YACV;AAAA,MACC,CAAC,UAAU,MAAM,SAAS,SAAS,EAAE,eAAe,UAAU,gBAAgB,eAAe,MAAM,IAAI,IAAI;AAAA,IAC7G,EACC,IAAI,CAAC,UAAU,MAAM,IAAI;AAE5B,QAAI,eAAe,QAAQ;AACzB,oBAAc,QAAQ,CAAC,cAAc,MAAM;AACzC,YAAI,aAAa,SAAS;AAAG,eAAK,KAAK,gBAAgB,GAAG;AAAA,MAC5D,CAAC;AAAA,IACH;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,aAAa,CAAC;AAE/B,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,QAAQ,SAAS,QAAQ;AAC3B,aAAO,OAAO,aAAa;AAAA,IAC7B;AACA,QAAI,QAAQ,SAAS,QAAQ;AAC3B,aAAO,QAAQ,aAAa;AAAA,IAC9B;AAEA,UAAM,MAAM,YAAY,OAAO,CAAC,UAAU,MAAM,SAAS,KAAK;AAC9D,UAAM,aAAa,IAAI;AACvB,QAAI,CAAC;AAAY;AAKjB,UAAM,UAAU,KAAK,IAAI,IAAI,GAAG,KAAK,QAAQ,QAAQ,MAAM,MAAM,EAAE,QAAQ,QAAQ,SAAS,UAAU,EAAE,QAAQ,CAAC;AACjH,UAAM,aAAa,QAAQ,IAAI,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;AACrD,UAAM,cAAc,aAAa,iBAAiB,QAAQ,IAAI,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,SAAS,GAAG,MAAM,CAAC;AAEzG,UAAM,SAAS,cAAc,aAAa,gBAAgB;AAC1D,QAAI,iBAAiB,GAAG;AACtB,aAAO,KAAK,IAAI,KAAK,QAAQ,cAAc;AAAA,IAC7C;AACA,WAAO,KAAK,IAAI,KAAK,KAAK,MAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,EACtD,GAAG,CAAC,aAAa,YAAY,gBAAgB,QAAQ,MAAM,CAAC;AAE5D,QAAM,gBAAgB;AAAA,IACpB,MACE,aAAa,IACT,UAAU,EACP,OAAO,iBAAiB,EACxB,MAAM,CAAC,GAAG,aAAa,CAAC,CAAC,EACzB,aAAa,IAAI,EACjB,QAAQ,GAAG,EACX,aAAa,IAAI,IACpB;AAAA,IACN,CAAC,cAAc,iBAAiB;AAAA,EAClC;AAEA,SAAO,EAAE,QAAQ,SAAS,QAAQ,eAAe,YAAY,aAAa;AAC5E;",
   "names": ["data"]
 }

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

@@ -8,14 +8,17 @@ import { GridLine } from "./GridLine";
 import { COLOR_PALLET } from "../../helpers/colorPallet";
 const AxisBottom = React2.memo(() => {
   const {
-    props: { xAxis },
+    props: { xAxis, xScroll },
     innerHeight,
     xScale,
-    yScale,
     innerWidth,
     containerRatio,
     setAxisBottomRef
   } = useContext(ChartContext);
+  const realInnerWidth = useMemo(
+    () => innerWidth * (xScroll ? containerRatio : 1),
+    [containerRatio, innerWidth, xScroll]
+  );
   const { tickRotation } = xAxis.tick || {};
   const { showGrid } = xAxis;
   const textProps = useMemo(() => {
@@ -78,7 +81,7 @@ const AxisBottom = React2.memo(() => {
       return null;
     const lineCoords = {
       x1: 0,
-      x2: innerWidth * containerRatio,
+      x2: realInnerWidth,
       y1: innerHeight,
       y2: innerHeight
     };
@@ -88,23 +91,13 @@ const AxisBottom = React2.memo(() => {
         lineCoords,
         scale: xScale,
         innerRef: setAxisBottomRef,
-        dimension: innerWidth * containerRatio,
+        dimension: realInnerWidth,
         TickRenderer,
         GridRenderer,
         color: axisColor
       }
     );
-  }, [
-    GridRenderer,
-    TickRenderer,
-    containerRatio,
-    axisColor,
-    innerHeight,
-    innerWidth,
-    setAxisBottomRef,
-    xAxis.hideAxis,
-    xScale
-  ]);
+  }, [GridRenderer, TickRenderer, axisColor, innerHeight, realInnerWidth, setAxisBottomRef, xAxis.hideAxis, xScale]);
 });
 export {
   AxisBottom

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/graphs/Chart/parts/Axis/AxisBottom.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport type { CSSProperties } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { Axis, type GridRenderPropsT, type TickRenderPropsT } from './Axis';\nimport { Tick } from './Tick';\nimport { GridLine } from './GridLine';\nimport { COLOR_PALLET } from '../../helpers/colorPallet';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis },\n    innerHeight,\n    xScale,\n    yScale,\n    innerWidth,\n    containerRatio,\n    setAxisBottomRef,\n  } = useContext(ChartContext);\n\n  const { tickRotation } = xAxis.tick || ({} as DSChartT.AxisTickT);\n  const { showGrid } = xAxis;\n\n  const textProps = useMemo(() => {\n    const commomProps = { fill: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color };\n    if (!tickRotation) return { ...commomProps, y: 17 };\n    return {\n      ...commomProps,\n      dx: 8 * Math.sin(Math.PI * (tickRotation / 180)),\n      dy: '.71em',\n      y: Math.ceil(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1)),\n      transform: `rotate(${tickRotation})`,\n    };\n  }, [tickRotation, xAxis?.tick?.color]);\n\n  const style: CSSProperties = useMemo(() => {\n    if (!tickRotation) return { textAnchor: 'middle' };\n    return { textAnchor: tickRotation > 0 ? 'start' : 'end' };\n  }, [tickRotation]);\n\n  const GridRenderer = useCallback(\n    (props: GridRenderPropsT) => {\n      if (!showGrid) return null;\n\n      const { position, ...rest } = props;\n      const gridLineCoords = {\n        x1: position,\n        x2: position,\n        y1: 0,\n        y2: innerHeight,\n      };\n      return <GridLine {...gridLineCoords} {...rest} />;\n    },\n    [innerHeight, showGrid],\n  );\n\n  const TickRenderer = useCallback(\n    (props: TickRenderPropsT) => {\n      const { position, tickValue, ...rest } = props;\n      const tickLineCoords = {\n        y2: 5,\n        stroke: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color,\n      };\n      return (\n        <Tick\n          {...tickLineCoords}\n          tickValue={xScale.getTickFormatted(tickValue)}\n          xTranslate={position}\n          yTranslate={innerHeight}\n          textProps={textProps}\n          textStyle={style}\n          {...rest}\n        />\n      );\n    },\n    [xAxis?.tick?.color, xScale, innerHeight, textProps, style],\n  );\n\n  const axisColor = useMemo(() => COLOR_PALLET[xAxis.color as keyof typeof COLOR_PALLET] || xAxis.color, [xAxis.color]);\n\n  return useMemo(() => {\n    if (xAxis.hideAxis) return null;\n    const lineCoords = {\n      x1: 0,\n      x2: innerWidth * containerRatio,\n      y1: innerHeight,\n      y2: innerHeight,\n    };\n\n    return (\n      <Axis\n        lineCoords={lineCoords}\n        scale={xScale}\n        innerRef={setAxisBottomRef}\n        dimension={innerWidth * containerRatio}\n        TickRenderer={TickRenderer}\n        GridRenderer={GridRenderer}\n        color={axisColor}\n      />\n    );\n  }, [\n    GridRenderer,\n    TickRenderer,\n    containerRatio,\n    axisColor,\n    innerHeight,\n    innerWidth,\n    setAxisBottomRef,\n    xAxis.hideAxis,\n    xScale,\n  ]);\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useContext, useMemo, useCallback } from 'react';\nimport type { CSSProperties } from 'react';\nimport { ChartContext } from '../../ChartContext';\nimport type { DSChartT } from '../../react-desc-prop-types';\nimport { Axis, type GridRenderPropsT, type TickRenderPropsT } from './Axis';\nimport { Tick } from './Tick';\nimport { GridLine } from './GridLine';\nimport { COLOR_PALLET } from '../../helpers/colorPallet';\n\nexport const AxisBottom = React.memo(() => {\n  const {\n    props: { xAxis, xScroll },\n    innerHeight,\n    xScale,\n    innerWidth,\n    containerRatio,\n    setAxisBottomRef,\n  } = useContext(ChartContext);\n\n  const realInnerWidth = useMemo(\n    () => innerWidth * (xScroll ? containerRatio : 1),\n    [containerRatio, innerWidth, xScroll],\n  );\n\n  const { tickRotation } = xAxis.tick || ({} as DSChartT.AxisTickT);\n  const { showGrid } = xAxis;\n\n  const textProps = useMemo(() => {\n    const commomProps = { fill: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color };\n    if (!tickRotation) return { ...commomProps, y: 17 };\n    return {\n      ...commomProps,\n      dx: 8 * Math.sin(Math.PI * (tickRotation / 180)),\n      dy: '.71em',\n      y: Math.ceil(11.5 - 2.5 * (tickRotation / 15) * (tickRotation > 0 ? 1 : -1)),\n      transform: `rotate(${tickRotation})`,\n    };\n  }, [tickRotation, xAxis?.tick?.color]);\n\n  const style: CSSProperties = useMemo(() => {\n    if (!tickRotation) return { textAnchor: 'middle' };\n    return { textAnchor: tickRotation > 0 ? 'start' : 'end' };\n  }, [tickRotation]);\n\n  const GridRenderer = useCallback(\n    (props: GridRenderPropsT) => {\n      if (!showGrid) return null;\n\n      const { position, ...rest } = props;\n      const gridLineCoords = {\n        x1: position,\n        x2: position,\n        y1: 0,\n        y2: innerHeight,\n      };\n      return <GridLine {...gridLineCoords} {...rest} />;\n    },\n    [innerHeight, showGrid],\n  );\n\n  const TickRenderer = useCallback(\n    (props: TickRenderPropsT) => {\n      const { position, tickValue, ...rest } = props;\n      const tickLineCoords = {\n        y2: 5,\n        stroke: COLOR_PALLET[xAxis?.tick?.color as keyof typeof COLOR_PALLET] || xAxis?.tick?.color,\n      };\n      return (\n        <Tick\n          {...tickLineCoords}\n          tickValue={xScale.getTickFormatted(tickValue)}\n          xTranslate={position}\n          yTranslate={innerHeight}\n          textProps={textProps}\n          textStyle={style}\n          {...rest}\n        />\n      );\n    },\n    [xAxis?.tick?.color, xScale, innerHeight, textProps, style],\n  );\n\n  const axisColor = useMemo(() => COLOR_PALLET[xAxis.color as keyof typeof COLOR_PALLET] || xAxis.color, [xAxis.color]);\n\n  return useMemo(() => {\n    if (xAxis.hideAxis) return null;\n    const lineCoords = {\n      x1: 0,\n      x2: realInnerWidth,\n      y1: innerHeight,\n      y2: innerHeight,\n    };\n\n    return (\n      <Axis\n        lineCoords={lineCoords}\n        scale={xScale}\n        innerRef={setAxisBottomRef}\n        dimension={realInnerWidth}\n        TickRenderer={TickRenderer}\n        GridRenderer={GridRenderer}\n        color={axisColor}\n      />\n    );\n  }, [GridRenderer, TickRenderer, axisColor, innerHeight, realInnerWidth, setAxisBottomRef, xAxis.hideAxis, xScale]);\n});\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -8,15 +8,20 @@ import { GridLine } from "./GridLine";
 import { COLOR_PALLET } from "../../helpers/colorPallet";
 const AxisLeft = React2.memo(() => {
   const {
-    props: { yAxis },
+    props: { yAxis, yScroll },
     innerHeight,
     height,
     yScale,
     innerWidth,
+    containerRatio,
     setAxisLeftRef
   } = useContext(ChartContext);
   const { tickRotation } = yAxis.tick || {};
   const { showGrid } = yAxis;
+  const realInnerHeight = useMemo(
+    () => innerHeight * (yScroll ? containerRatio : 1),
+    [containerRatio, innerHeight, yScroll]
+  );
   const textProps = useMemo(() => {
     const commomProps = { fill: COLOR_PALLET[yAxis?.tick?.color] || yAxis?.tick?.color };
     if (!tickRotation)
@@ -80,7 +85,7 @@ const AxisLeft = React2.memo(() => {
       x1: 0,
       x2: 0,
       y1: 0,
-      y2: innerHeight
+      y2: realInnerHeight
     };
     return /* @__PURE__ */ jsx(
       Axis,
@@ -94,7 +99,7 @@ const AxisLeft = React2.memo(() => {
         color: axisColor
       }
     );
-  }, [GridRenderer, TickRenderer, axisColor, height, innerHeight, setAxisLeftRef, yAxis.hideAxis, yScale]);
+  }, [GridRenderer, TickRenderer, axisColor, height, realInnerHeight, setAxisLeftRef, yAxis.hideAxis, yScale]);
 });
 export {
   AxisLeft

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

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

package/dist/esm/graphs/Chart/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color?: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: string;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface LegendT {\n    position: 'right' | 'bottom' | 'left' | 'top';\n    preventFilterAction: boolean;\n  }\n\n  export interface AxisTickT {\n    tickValues: number[] | Date[];\n    tickFormat?: (value: string | number | Date) => string;\n    tickCount: number;\n    tickRotation: number;\n    overwriteTicks: boolean;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    label: string;\n    type: AxisTypeT;\n    cols?: string[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    advanced: {\n      pointSpacing: {\n        type: 'string';\n        value: number;\n      };\n    };\n    tick: AxisTickT;\n    plotRange: number[];\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string | undefined;\n    color?: string;\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export type InternalData = InternalSerie[];\n\n  export interface OptionalProps {\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper: ScrapperT;\n    withTrendHighlight: boolean;\n    TooltipRenderer: () => JSX.Element;\n    height: number;\n    width: number;\n    legend: LegendT;\n  }\n\n  export interface DefaultProps {\n    yAxis: AxisT;\n    xAxis: AxisT;\n    y2Axis: AxisT;\n    series: SeriesT[];\n  }\n\n  export interface RequiredProps {}\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n  series: [\n    {\n      name: '1',\n      data: [0],\n      color: 'grey-100',\n      type: 'bar',\n    },\n  ],\n  xAxis: {\n    cols: ['0'],\n  },\n  yAxis: {},\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AAkH9C,MAAM,eAAsC;AAAA,EACjD,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM,CAAC,CAAC;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,MAAM,CAAC,GAAG;AAAA,EACZ;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,UAAU,MAAM;AAAA,IACtB,KAAK,UAAU;AAAA,IACf,QAAQ,UAAU;AAAA,IAClB,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\nimport type { Series, ScaleLinear, ScaleBand } from 'd3';\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'area' | 'point';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export type LinearScale = ScaleLinear<number, number, never>;\n  export type BandScale = ScaleBand<string>;\n\n  export type Scales = LinearScale | BandScale;\n  export interface SeriesT {\n    name: string;\n    data: Array<number | null | { x: number; y: number }>;\n    type: SerieTypeT;\n    scale?: string;\n    color?: string;\n    // line\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export interface ScrapperT {\n    type: 'horizontal' | 'vertical';\n    color: string;\n    tooltipPreference: string;\n  }\n\n  export interface SerieComponentT {\n    serie: InternalSerie;\n  }\n\n  export interface LegendT {\n    position: 'right' | 'bottom' | 'left' | 'top';\n    preventFilterAction: boolean;\n  }\n\n  export interface AxisTickT {\n    tickValues: number[] | Date[];\n    tickFormat?: (value: string | number | Date) => string;\n    tickCount: number;\n    tickRotation: number;\n    overwriteTicks: boolean;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    label: string;\n    type: AxisTypeT;\n    cols?: string[];\n    domainPadding: number;\n    hideAxis: boolean;\n    beginAtZero?: boolean;\n    advanced: {\n      pointSpacing: {\n        type: 'string';\n        value: number;\n      };\n    };\n    tick: AxisTickT;\n    plotRange: number[];\n  }\n\n  export interface InternalDatum {\n    key: string;\n    value: number | { x: number; y: number };\n    position: number;\n    serie: string;\n  }\n\n  export interface InternalSerie {\n    key: string;\n    data: InternalDatum[];\n    name: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string | undefined;\n    color?: string;\n    dashStyle?: string;\n    pointRadius?: number;\n  }\n\n  export type InternalData = InternalSerie[];\n\n  export interface OptionalProps {\n    groups?: string[][];\n    types?: 'scatter';\n    scrapper: ScrapperT;\n    withTrendHighlight: boolean;\n    TooltipRenderer: () => JSX.Element;\n    height: number;\n    width: number;\n    legend: LegendT;\n    xScroll: boolean;\n    yScroll: boolean;\n  }\n\n  export interface DefaultProps {\n    yAxis: AxisT;\n    xAxis: AxisT;\n    y2Axis: AxisT;\n    series: SeriesT[];\n  }\n\n  export interface RequiredProps {}\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n\n  export type StackedSeriesByGroupT = Series<\n    {\n      [key: string]: number;\n    },\n    string\n  >[][];\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n  series: [\n    {\n      name: '1',\n      data: [0],\n      color: 'grey-100',\n      type: 'bar',\n    },\n  ],\n  xAxis: {\n    cols: ['0'],\n  },\n  yAxis: {},\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AAoH9C,MAAM,eAAsC;AAAA,EACjD,QAAQ;AAAA,IACN;AAAA,MACE,MAAM;AAAA,MACN,MAAM,CAAC,CAAC;AAAA,MACR,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,MAAM,CAAC,GAAG;AAAA,EACZ;AAAA,EACA,OAAO,CAAC;AACV;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,UAAU,MAAM;AAAA,IACtB,KAAK,UAAU;AAAA,IACf,QAAQ,UAAU;AAAA,IAClB,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
   "names": []
 }

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

@@ -1,44 +1,54 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { Rect } from "./Rect";
 import { ChartContext } from "../ChartContext";
 import { getStackedData, getStackedIndex } from "../helpers";
 const HorizontalStackedBars = ({ serie }) => {
   const {
-    props: { groups },
+    props: { groups, yScroll },
     xScale,
     yScale,
     stackedData,
     subGroupScale,
     colorScale,
+    innerHeight,
+    containerRatio,
     chartId,
     getYValue
   } = useContext(ChartContext);
   const serieWithStackedValues = getStackedData(stackedData, serie);
   const stackIndex = getStackedIndex(groups, serie.name);
-  return /* @__PURE__ */ jsx("g", { children: serieWithStackedValues.map((sequence, i) => {
-    const isFloorStack = sequence[0] === 0;
-    const xValue = sequence[1] - sequence[0];
-    const yValue = getYValue(serie.data[i]);
-    const width = xScale.get(sequence[1]) - xScale.get(sequence[0]) - (!isFloorStack ? 2 : 0);
-    const height = subGroupScale?.bandwidth();
-    const transformX = xScale.get(sequence[0]) + (!isFloorStack ? 2 : 0);
-    const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale.get(yValue);
-    return /* @__PURE__ */ jsx("g", { clipPath: `url(#rect-focus-ring-${chartId})`, children: /* @__PURE__ */ jsx("g", { fill: colorScale(serie.name), transform: `translate(0, ${transformY})`, children: /* @__PURE__ */ jsx(
-      Rect,
-      {
-        width,
-        height,
-        x: transformX,
-        xValue,
-        yValue,
-        id: serie.data[i].key,
-        name: serie.name,
-        datum: serie.data[i]
-      }
-    ) }) }, serie.data[i].key);
-  }) });
+  const realInnerHeight = useMemo(
+    () => innerHeight * (yScroll ? containerRatio : 1),
+    [containerRatio, innerHeight, yScroll]
+  );
+  return useMemo(
+    () => /* @__PURE__ */ jsx("g", { children: serie.data.map((bar, i) => {
+      const sequence = serieWithStackedValues[bar.position];
+      const isFloorStack = sequence[0] === 0;
+      const xValue = sequence[1] - sequence[0];
+      const yValue = getYValue(serie.data[i]);
+      const width = xScale.get(sequence[1]) - xScale.get(sequence[0]) - (!isFloorStack ? 2 : 0);
+      const height = subGroupScale?.bandwidth();
+      const transformX = xScale.get(sequence[0]) + (!isFloorStack ? 2 : 0);
+      const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale.get(yValue);
+      return /* @__PURE__ */ jsx("g", { clipPath: `url(#rect-focus-ring-${chartId})`, children: /* @__PURE__ */ jsx("g", { fill: colorScale(serie.name), transform: `translate(0, ${transformY})`, children: /* @__PURE__ */ jsx(
+        Rect,
+        {
+          width,
+          height,
+          x: transformX,
+          xValue,
+          yValue,
+          id: serie.data[i]?.key,
+          name: serie.name,
+          datum: serie.data[i]
+        }
+      ) }) }, serie.data[i]?.key);
+    }) }),
+    [chartId, colorScale, getYValue, serie, serieWithStackedValues, stackIndex, subGroupScale, xScale, yScale]
+  );
 };
 export {
   HorizontalStackedBars

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/HorizontalStackedBars.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACsCT;AArCd,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;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,IAAI,WAAW,YAAY;AAC3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC,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,oBAAC,OAA0B,UAAU,wBAAwB,YAC3D,8BAAC,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": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext, useMemo } from 'react';\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, yScroll },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    innerHeight,\n    containerRatio,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n\n  const realInnerHeight = useMemo(\n    () => innerHeight * (yScroll ? containerRatio : 1),\n    [containerRatio, innerHeight, yScroll],\n  );\n\n  return useMemo(\n    () => (\n      <g>\n        {serie.data.map((bar, i) => {\n          const sequence = serieWithStackedValues[bar.position];\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          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    [chartId, colorScale, getYValue, serie, serieWithStackedValues, stackIndex, subGroupScale, xScale, yScale],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8CP;AA7ChB,SAAgB,YAAY,eAAe;AAC3C,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AAGzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAgC;AAC5E,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,QAAQ;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAC3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AAErD,QAAM,kBAAkB;AAAA,IACtB,MAAM,eAAe,UAAU,iBAAiB;AAAA,IAChD,CAAC,gBAAgB,aAAa,OAAO;AAAA,EACvC;AAEA,SAAO;AAAA,IACL,MACE,oBAAC,OACE,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,WAAW,uBAAuB,IAAI;AAC5C,YAAM,eAAe,SAAS,OAAO;AACrC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,YAAM,QAAQ,OAAO,IAAI,SAAS,EAAE,IAAI,OAAO,IAAI,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAEvF,YAAM,SAAS,eAAe,UAAU;AAExC,YAAM,aAAa,OAAO,IAAI,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAClE,YAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,IAAI,MAAM;AAClF,aACE,oBAAC,OAA2B,UAAU,wBAAwB,YAC5D,8BAAC,OAAE,MAAM,WAAW,MAAM,IAAI,GAAG,WAAW,gBAAgB,eAC1D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH;AAAA,UACA;AAAA,UACA,IAAI,MAAM,KAAK,IAAI;AAAA,UACnB,MAAM,MAAM;AAAA,UACZ,OAAO,MAAM,KAAK;AAAA;AAAA,MACpB,GACF,KAZM,MAAM,KAAK,IAAI,GAavB;AAAA,IAEJ,CAAC,GACH;AAAA,IAEF,CAAC,SAAS,YAAY,WAAW,OAAO,wBAAwB,YAAY,eAAe,QAAQ,MAAM;AAAA,EAC3G;AACF;",
   "names": []
 }

package/dist/types/graphs/Chart/react-desc-prop-types.d.ts

@@ -84,6 +84,8 @@ export declare namespace DSChartT {
         height: number;
         width: number;
         legend: LegendT;
+        xScroll: boolean;
+        yScroll: boolean;
     }
     interface DefaultProps {
         yAxis: AxisT;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dataviz",
-  "version": "3.14.9",
+  "version": "3.14.11",
   "license": "MIT",
   "description": "ICE MT - Dimsum - DataViz",
   "files": [
@@ -40,9 +40,9 @@
     "d3-shape": "~3.1.0",
     "resize-observer-polyfill": "~1.5.1",
     "uid": "~2.0.0",
-    "@elliemae/ds-popperjs": "3.14.9",
-    "@elliemae/ds-system": "3.14.9",
-    "@elliemae/ds-utilities": "3.14.9"
+    "@elliemae/ds-popperjs": "3.14.11",
+    "@elliemae/ds-utilities": "3.14.11",
+    "@elliemae/ds-system": "3.14.11"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.6.0",