@elliemae/ds-dataviz 3.14.8 → 3.14.10

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/useChart.js

@@ -130,9 +130,10 @@ const useChart = (props) => {
     })),
     [defaultScale, hiddenSeries, originalSeries]
   );
+  const isHorizontal = useMemo(() => yAxis?.type === "band", [yAxis]);
   const stackedData = useMemo(
-    () => stackData(groupsStacked, originalSeries, hiddenSeries),
-    [groupsStacked, originalSeries, hiddenSeries]
+    () => stackData(groupsStacked, originalSeries, hiddenSeries, isHorizontal),
+    [groupsStacked, originalSeries, hiddenSeries, isHorizontal]
   );
   const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);
   const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({
@@ -145,7 +146,6 @@ const useChart = (props) => {
     currentData,
     containerRatio
   });
-  const isHorizontal = useMemo(() => yScale?.type === "BAND", [yScale]);
   const { getXValue, getYValue, getXScaleValue, getYScaleValue, getYValueFormatted, getXValueFormatted } = useGetters({
     xAxis,
     yAxis,

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

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

package/dist/esm/graphs/Chart/config/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;
     },
@@ -208,12 +209,14 @@ const useScales = ({
     const barsLength = bar.length;
     if (!barsLength)
       return;
-    const divisor = Math.max(bar[0].data.length, xScale?.getTicks(innerWidth).length, 1);
-    const width = innerWidth / divisor;
+    const divisor = Math.max(bar[0].data.length, xScale?.scale.ticks().length, xScale?.getTicks(innerWidth).length, 1);
+    const leftMargin = xScale?.get(bar[0].data[0].value.x);
+    const rightMargin = innerWidth * containerRatio - xScale?.get(bar[0].data[bar[0].data.length - 1].value.x);
+    const width = (innerWidth - (leftMargin + rightMargin)) / divisor;
     if (containerRatio > 1) {
       return Math.max(0.5, width * containerRatio);
     }
-    return Math.max(0.5, Math.trunc(width - width * 0.4));
+    return Math.max(0.5, Math.trunc(width - width * 0.3));
   }, [currentData, innerWidth, containerRatio, xScale, yScale]);
   const subGroupScale = useMemo(
     () => getBandwidth() ? scaleBand().domain(subgroupsWithBars).range([0, getBandwidth()]).paddingInner(0.55).padding(0.2).paddingOuter(0.01) : 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    const divisor = Math.max(bar[0].data.length, xScale?.getTicks(innerWidth).length, 1);\n    const width = innerWidth / 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.4));\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": "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",
   "names": ["data"]
 }

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

@@ -17,14 +17,14 @@ const getStackedData = (stackedData, serie) => {
   }
   return false;
 };
-const checkSharedScale = (series) => {
-  const scales = series.map((serie) => serie.scale ?? "y").filter((value, index, self) => self.indexOf(value) === index);
+const checkSharedScale = (series, isHorizontal) => {
+  const scales = series.map((serie) => serie.scale || (isHorizontal ? "x" : "y")).filter((value, index, self) => self.indexOf(value) === index);
   if (scales.length > 1) {
     return false;
   }
   return scales[0];
 };
-const stackData = (groupsStacked, series, hiddenSeries) => {
+const stackData = (groupsStacked, series, hiddenSeries, isHorizontal) => {
   const allSeriesStackedByGroups = [];
   const scalesStackedDataMap = [];
   if (!groupsStacked)
@@ -33,7 +33,7 @@ const stackData = (groupsStacked, series, hiddenSeries) => {
     const seriesFilteredByStackGroup = series.filter(
       (serie) => g.includes(serie.name) && !hiddenSeries.includes(serie.name)
     );
-    const sharedScale = checkSharedScale(seriesFilteredByStackGroup);
+    const sharedScale = checkSharedScale(seriesFilteredByStackGroup, isHorizontal);
     if (!sharedScale)
       return;
     scalesStackedDataMap.push(sharedScale);
@@ -43,7 +43,7 @@ const stackData = (groupsStacked, series, hiddenSeries) => {
       serie.data.forEach((d, i) => {
         stackedData[i] = {
           ...stackedData[i],
-          [serie.name]: typeof d === "number" ? d : d?.value?.y || 0
+          [serie.name]: typeof d === "number" ? d : d?.y || 0
         };
       });
     });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/helpers/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { stack, timeFormat, stackOffsetDiverging, format, Series } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const getStackedIndex = (groups: string[][], serie: string) => {\n  for (let i = 0; i < groups.length; i += 1) {\n    for (let j = 0; j < groups[i].length; j += 1) {\n      if (groups[i][j] === serie) return i;\n    }\n  }\n  return -1;\n};\n\nexport const getStackedData = (stackedData, serie: DSChartT.SeriesT) => {\n  for (let i = 0; i < stackedData?.length; i += 1) {\n    const data = stackedData[i].find((d) => d.key === serie.name);\n    if (data) return data;\n  }\n  return false;\n};\n\n// this function check if the series that are stacked share the same scale.\n// return the scale or false if they dont share it\n\n// si serie.scale === undefined ... la scala es Y\n\nconst checkSharedScale = (series: DSChartT.SeriesT[]) => {\n  const scales = series\n    .map((serie) => serie.scale ?? 'y')\n    .filter((value, index, self) => self.indexOf(value) === index);\n  if (scales.length > 1) {\n    return false;\n  }\n  return scales[0];\n};\n\n// transform series grouped in stack into what d3 stack function need to read\nexport const stackData = (\n  groupsStacked: string[][] | undefined,\n  series: DSChartT.InternalData,\n  hiddenSeries: string[],\n) => {\n  const allSeriesStackedByGroups: DSChartT.StackedSeriesByGroupT = [];\n  const scalesStackedDataMap: string[] = [];\n  if (!groupsStacked) return [];\n\n  groupsStacked?.forEach((g) => {\n    const seriesFilteredByStackGroup = series.filter(\n      (serie) => g.includes(serie.name) && !hiddenSeries.includes(serie.name),\n    );\n    const sharedScale = checkSharedScale(seriesFilteredByStackGroup);\n    if (!sharedScale) return;\n    scalesStackedDataMap.push(sharedScale);\n    const keys = seriesFilteredByStackGroup.map((serie) => serie.name);\n    const stackedData: Array<{ [serieName: string]: number }> = [];\n    seriesFilteredByStackGroup.forEach((serie) => {\n      serie.data.forEach((d, i) => {\n        stackedData[i] = {\n          ...stackedData[i],\n          [serie.name]: typeof d === 'number' ? d : d?.value?.y || 0,\n        };\n      });\n    });\n\n    allSeriesStackedByGroups.push(stack().offset(stackOffsetDiverging).keys(keys)(stackedData));\n  });\n  allSeriesStackedByGroups.forEach((g, i) => (g.scale = scalesStackedDataMap[i]));\n  return allSeriesStackedByGroups;\n};\n\nexport const getFormatGenerator = (type: string) => {\n  if (type === 'DATETIME') return timeFormat;\n  if (type === 'LINEAR') return format;\n  return null;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,OAAO,YAAY,sBAAsB,cAAsB;AAGjE,MAAM,kBAAkB,CAAC,QAAoB,UAAkB;AACpE,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK,GAAG;AACzC,aAAS,IAAI,GAAG,IAAI,OAAO,GAAG,QAAQ,KAAK,GAAG;AAC5C,UAAI,OAAO,GAAG,OAAO;AAAO,eAAO;AAAA,IACrC;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,aAAa,UAA4B;AACtE,WAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,UAAM,OAAO,YAAY,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,IAAI;AAC5D,QAAI;AAAM,aAAO;AAAA,EACnB;AACA,SAAO;AACT;AAOA,MAAM,mBAAmB,CAAC,WAA+B;AACvD,QAAM,SAAS,OACZ,IAAI,CAAC,UAAU,MAAM,SAAS,GAAG,EACjC,OAAO,CAAC,OAAO,OAAO,SAAS,KAAK,QAAQ,KAAK,MAAM,KAAK;AAC/D,MAAI,OAAO,SAAS,GAAG;AACrB,WAAO;AAAA,EACT;AACA,SAAO,OAAO;AAChB;AAGO,MAAM,YAAY,CACvB,eACA,QACA,iBACG;AACH,QAAM,2BAA2D,CAAC;AAClE,QAAM,uBAAiC,CAAC;AACxC,MAAI,CAAC;AAAe,WAAO,CAAC;AAE5B,iBAAe,QAAQ,CAAC,MAAM;AAC5B,UAAM,6BAA6B,OAAO;AAAA,MACxC,CAAC,UAAU,EAAE,SAAS,MAAM,IAAI,KAAK,CAAC,aAAa,SAAS,MAAM,IAAI;AAAA,IACxE;AACA,UAAM,cAAc,iBAAiB,0BAA0B;AAC/D,QAAI,CAAC;AAAa;AAClB,yBAAqB,KAAK,WAAW;AACrC,UAAM,OAAO,2BAA2B,IAAI,CAAC,UAAU,MAAM,IAAI;AACjE,UAAM,cAAsD,CAAC;AAC7D,+BAA2B,QAAQ,CAAC,UAAU;AAC5C,YAAM,KAAK,QAAQ,CAAC,GAAG,MAAM;AAC3B,oBAAY,KAAK;AAAA,UACf,GAAG,YAAY;AAAA,UACf,CAAC,MAAM,OAAO,OAAO,MAAM,WAAW,IAAI,GAAG,OAAO,KAAK;AAAA,QAC3D;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,6BAAyB,KAAK,MAAM,EAAE,OAAO,oBAAoB,EAAE,KAAK,IAAI,EAAE,WAAW,CAAC;AAAA,EAC5F,CAAC;AACD,2BAAyB,QAAQ,CAAC,GAAG,MAAO,EAAE,QAAQ,qBAAqB,EAAG;AAC9E,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,SAAiB;AAClD,MAAI,SAAS;AAAY,WAAO;AAChC,MAAI,SAAS;AAAU,WAAO;AAC9B,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { stack, timeFormat, stackOffsetDiverging, format, Series } from 'd3';\nimport type { DSChartT } from '../react-desc-prop-types';\n\nexport const getStackedIndex = (groups: string[][], serie: string) => {\n  for (let i = 0; i < groups.length; i += 1) {\n    for (let j = 0; j < groups[i].length; j += 1) {\n      if (groups[i][j] === serie) return i;\n    }\n  }\n  return -1;\n};\n\nexport const getStackedData = (stackedData, serie: DSChartT.SeriesT) => {\n  for (let i = 0; i < stackedData?.length; i += 1) {\n    const data = stackedData[i].find((d) => d.key === serie.name);\n    if (data) return data;\n  }\n  return false;\n};\n\n// this function check if the series that are stacked share the same scale.\n// return the scale or false if they dont share it\n//\n// si serie.scale === undefined ... la scala es Y\n\nconst checkSharedScale = (series: DSChartT.SeriesT[], isHorizontal: boolean) => {\n  const scales = series\n    .map((serie) => serie.scale || (isHorizontal ? 'x' : 'y'))\n    .filter((value, index, self) => self.indexOf(value) === index);\n  if (scales.length > 1) {\n    return false;\n  }\n  return scales[0];\n};\n\n// transform series grouped in stack into what d3 stack function need to read\nexport const stackData = (\n  groupsStacked: string[][] | undefined,\n  series: DSChartT.InternalData,\n  hiddenSeries: string[],\n  isHorizontal: boolean,\n) => {\n  const allSeriesStackedByGroups: DSChartT.StackedSeriesByGroupT = [];\n  const scalesStackedDataMap: string[] = [];\n  if (!groupsStacked) return [];\n\n  groupsStacked?.forEach((g) => {\n    const seriesFilteredByStackGroup = series.filter(\n      (serie) => g.includes(serie.name) && !hiddenSeries.includes(serie.name),\n    );\n    const sharedScale = checkSharedScale(seriesFilteredByStackGroup, isHorizontal);\n    if (!sharedScale) return;\n    scalesStackedDataMap.push(sharedScale);\n    const keys = seriesFilteredByStackGroup.map((serie) => serie.name);\n    const stackedData: Array<{ [serieName: string]: number }> = [];\n    seriesFilteredByStackGroup.forEach((serie) => {\n      serie.data.forEach((d, i) => {\n        stackedData[i] = {\n          ...stackedData[i],\n          [serie.name]: typeof d === 'number' ? d : d?.y || 0,\n        };\n      });\n    });\n\n    allSeriesStackedByGroups.push(stack().offset(stackOffsetDiverging).keys(keys)(stackedData));\n  });\n  allSeriesStackedByGroups.forEach((g, i) => (g.scale = scalesStackedDataMap[i]));\n  return allSeriesStackedByGroups;\n};\n\nexport const getFormatGenerator = (type: string) => {\n  if (type === 'DATETIME') return timeFormat;\n  if (type === 'LINEAR') return format;\n  return null;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,OAAO,YAAY,sBAAsB,cAAsB;AAGjE,MAAM,kBAAkB,CAAC,QAAoB,UAAkB;AACpE,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK,GAAG;AACzC,aAAS,IAAI,GAAG,IAAI,OAAO,GAAG,QAAQ,KAAK,GAAG;AAC5C,UAAI,OAAO,GAAG,OAAO;AAAO,eAAO;AAAA,IACrC;AAAA,EACF;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAAC,aAAa,UAA4B;AACtE,WAAS,IAAI,GAAG,IAAI,aAAa,QAAQ,KAAK,GAAG;AAC/C,UAAM,OAAO,YAAY,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,MAAM,IAAI;AAC5D,QAAI;AAAM,aAAO;AAAA,EACnB;AACA,SAAO;AACT;AAOA,MAAM,mBAAmB,CAAC,QAA4B,iBAA0B;AAC9E,QAAM,SAAS,OACZ,IAAI,CAAC,UAAU,MAAM,UAAU,eAAe,MAAM,IAAI,EACxD,OAAO,CAAC,OAAO,OAAO,SAAS,KAAK,QAAQ,KAAK,MAAM,KAAK;AAC/D,MAAI,OAAO,SAAS,GAAG;AACrB,WAAO;AAAA,EACT;AACA,SAAO,OAAO;AAChB;AAGO,MAAM,YAAY,CACvB,eACA,QACA,cACA,iBACG;AACH,QAAM,2BAA2D,CAAC;AAClE,QAAM,uBAAiC,CAAC;AACxC,MAAI,CAAC;AAAe,WAAO,CAAC;AAE5B,iBAAe,QAAQ,CAAC,MAAM;AAC5B,UAAM,6BAA6B,OAAO;AAAA,MACxC,CAAC,UAAU,EAAE,SAAS,MAAM,IAAI,KAAK,CAAC,aAAa,SAAS,MAAM,IAAI;AAAA,IACxE;AACA,UAAM,cAAc,iBAAiB,4BAA4B,YAAY;AAC7E,QAAI,CAAC;AAAa;AAClB,yBAAqB,KAAK,WAAW;AACrC,UAAM,OAAO,2BAA2B,IAAI,CAAC,UAAU,MAAM,IAAI;AACjE,UAAM,cAAsD,CAAC;AAC7D,+BAA2B,QAAQ,CAAC,UAAU;AAC5C,YAAM,KAAK,QAAQ,CAAC,GAAG,MAAM;AAC3B,oBAAY,KAAK;AAAA,UACf,GAAG,YAAY;AAAA,UACf,CAAC,MAAM,OAAO,OAAO,MAAM,WAAW,IAAI,GAAG,KAAK;AAAA,QACpD;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,6BAAyB,KAAK,MAAM,EAAE,OAAO,oBAAoB,EAAE,KAAK,IAAI,EAAE,WAAW,CAAC;AAAA,EAC5F,CAAC;AACD,2BAAyB,QAAQ,CAAC,GAAG,MAAO,EAAE,QAAQ,qBAAqB,EAAG;AAC9E,SAAO;AACT;AAEO,MAAM,qBAAqB,CAAC,SAAiB;AAClD,MAAI,SAAS;AAAY,WAAO;AAChC,MAAI,SAAS;AAAU,WAAO;AAC9B,SAAO;AACT;",
   "names": []
 }

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