@elliemae/ds-dataviz 3.13.0-next.3 → 3.13.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Point.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING, SCRAPPER, LINE } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nimport { TrendHighlight } from '../parts/TrendHighlight';\nimport { DataVizDataTestIds } from '../DataTestIds';\nexport const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity, datum }) => {\n  const {\n    activePoint,\n    scrapperPosY,\n    scrapperPosX,\n    setActivePoint,\n    props: { scrapper, TooltipRenderer, withTrendHighlight },\n  } = useContext(ChartContext);\n  const isFocused = useMemo(() => {\n    if (activePoint?.key === id) {\n      return true;\n    }\n    if (scrapper?.type === SCRAPPER.TYPE_HORIZONTAL) {\n      return y === scrapperPosY;\n    }\n    if (scrapper?.type === SCRAPPER.TYPE_VERTICAL) {\n      return x === scrapperPosX;\n    }\n    return false;\n  }, [activePoint, id, scrapper, y, scrapperPosY, x, scrapperPosX]);\n\n  const point = useMemo(() => {\n    if (LINE.POINT_STYLE.DIAMOND === pointStyle) {\n      const squareEdge = pointRadius * 2;\n\n      return (\n        <g transform=\"rotate(45)\">\n          {isFocused ? (\n            <rect\n              x={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              y={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              width={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              height={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              fill=\"none\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect x={-pointRadius} y={-pointRadius} id={`${id}-mark`} width={squareEdge} height={squareEdge}></rect>\n        </g>\n      );\n    }\n    if (LINE.POINT_STYLE.SQUARE === pointStyle) {\n      const squareEdge = pointRadius * 2;\n\n      return (\n        <g>\n          {isFocused ? (\n            <rect\n              x={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              y={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              width={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              height={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              fill=\"none\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect x={-pointRadius} y={-pointRadius} id={`${id}-mark`} width={squareEdge} height={squareEdge}></rect>\n        </g>\n      );\n    }\n\n    return (\n      <g>\n        {isFocused ? (\n          <g>\n            <circle\n              r={(pointRadius ?? LINE.DEFAULT_POINT_RADIUS) + FOCUS_RING.STROKE_WIDTH}\n              fill=\"none\"\n              // data-z-index=\"99\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></circle>\n          </g>\n        ) : null}\n        <circle\n          id={`${id}-mark`}\n          r={pointRadius ?? (isFocused ? LINE.DEFAULT_POINT_RADIUS : 0)}\n          opacity={opacity}\n        ></circle>\n      </g>\n    );\n  }, [id, isFocused, opacity, pointRadius, pointStyle]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!scrapper) setActivePoint(datum);\n  }, [datum, scrapper, setActivePoint]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (!scrapper) setActivePoint(null);\n  }, [scrapper, setActivePoint]);\n  return (\n    <>\n      <g\n        data-testid={DataVizDataTestIds.POINT}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        transform={`translate(${x},${y})`}\n      >\n        {point}\n        {activePoint?.key === id && TooltipRenderer ? (\n          <FocusableRegion\n            id={id}\n            width={(pointRadius ?? 3) * 4}\n            height={(pointRadius ?? 3) * 4}\n            pointRadius={pointRadius}\n            style={{ transform: `translate(-${pointRadius}px, -${pointRadius}px)` }}\n            content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n          />\n        ) : null}\n      </g>\n      {isFocused && withTrendHighlight ? <TrendHighlight currentDatum={datum} /> : null}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useContext, useCallback, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING, SCRAPPER, LINE } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nimport { TrendHighlight } from '../parts/TrendHighlight';\nimport { DataVizDataTestIds } from '../DataTestIds';\nexport const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity, datum }) => {\n  const {\n    activePoint,\n    scrapperPosY,\n    scrapperPosX,\n    setActivePoint,\n    props: { scrapper, TooltipRenderer, withTrendHighlight },\n  } = useContext(ChartContext);\n  const isFocused = useMemo(() => {\n    if (activePoint?.key === id) {\n      return true;\n    }\n    if (scrapper?.type === SCRAPPER.TYPE_HORIZONTAL) {\n      return y === scrapperPosY;\n    }\n    if (scrapper?.type === SCRAPPER.TYPE_VERTICAL) {\n      return x === scrapperPosX;\n    }\n    return false;\n  }, [activePoint, id, scrapper, y, scrapperPosY, x, scrapperPosX]);\n\n  const point = useMemo(() => {\n    if (LINE.POINT_STYLE.DIAMOND === pointStyle) {\n      const squareEdge = pointRadius * 2;\n\n      return (\n        <g transform=\"rotate(45)\">\n          {isFocused ? (\n            <rect\n              x={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              y={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              width={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              height={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              fill=\"none\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect x={-pointRadius} y={-pointRadius} id={`${id}-mark`} width={squareEdge} height={squareEdge}></rect>\n        </g>\n      );\n    }\n    if (LINE.POINT_STYLE.SQUARE === pointStyle) {\n      const squareEdge = pointRadius * 2;\n\n      return (\n        <g>\n          {isFocused ? (\n            <rect\n              x={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              y={-pointRadius - FOCUS_RING.STROKE_WIDTH}\n              width={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              height={squareEdge + FOCUS_RING.STROKE_WIDTH * 2}\n              fill=\"none\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect x={-pointRadius} y={-pointRadius} id={`${id}-mark`} width={squareEdge} height={squareEdge}></rect>\n        </g>\n      );\n    }\n\n    return (\n      <g>\n        {isFocused ? (\n          <g>\n            <circle\n              r={(pointRadius ?? LINE.DEFAULT_POINT_RADIUS) + FOCUS_RING.STROKE_WIDTH}\n              fill=\"none\"\n              // data-z-index=\"99\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></circle>\n          </g>\n        ) : null}\n        <circle\n          id={`${id}-mark`}\n          r={pointRadius ?? (isFocused ? LINE.DEFAULT_POINT_RADIUS : 0)}\n          opacity={opacity}\n        ></circle>\n      </g>\n    );\n  }, [id, isFocused, opacity, pointRadius, pointStyle]);\n\n  const handleMouseEnter = useCallback(() => {\n    if (!scrapper) setActivePoint(datum);\n  }, [datum, scrapper, setActivePoint]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (!scrapper) setActivePoint(null);\n  }, [scrapper, setActivePoint]);\n  return (\n    <>\n      <g\n        data-testid={DataVizDataTestIds.POINT}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleOnMouseLeave}\n        transform={`translate(${x},${y})`}\n      >\n        {point}\n        {activePoint?.key === id && TooltipRenderer ? (\n          <FocusableRegion\n            id={id}\n            width={(pointRadius ?? 3) * 4}\n            height={(pointRadius ?? 3) * 4}\n            style={{ transform: `translate(-${pointRadius ?? 3}px, -${pointRadius ?? 3}px)` }}\n            content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n          />\n        ) : null}\n      </g>\n      {isFocused && withTrendHighlight ? <TrendHighlight currentDatum={datum} /> : null}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -121,13 +121,13 @@ const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id,
       isFocused,
       chartId,
       transform,
+      handleMouseEnter,
+      handleOnMouseLeave,
       isHorizontal,
       x,
       y,
       width,
       height,
-      handleMouseEnter,
-      handleOnMouseLeave,
       activePoint?.key,
       id,
       TooltipRenderer,

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

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

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

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

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

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

package/dist/cjs/graphs/constants.js

@@ -28,6 +28,7 @@ __export(constants_exports, {
   LINE: () => LINE,
   SCALE_TYPES: () => SCALE_TYPES,
   SCRAPPER: () => SCRAPPER,
+  TOOLBAR: () => TOOLBAR,
   curveStyleMap: () => curveStyleMap
 });
 module.exports = __toCommonJS(constants_exports);
@@ -76,4 +77,10 @@ const curveStyleMap = {
   [LINE.CURVE_STYLE.LINEAR]: import_d3.curveLinear,
   [LINE.CURVE_STYLE.SPLINE]: import_d3.curveMonotoneX
 };
+const TOOLBAR = {
+  RESET: {
+    HEIGHT: 21,
+    WIDTH: 21
+  }
+};
 //# sourceMappingURL=constants.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/graphs/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { curveLinear, curveMonotoneX } from 'd3';\n\nexport const SCALE_TYPES = {\n  LINEAR: 'linear',\n  BAND: 'band',\n  LOG: 'log',\n  TIME: 'time',\n};\n\nexport const FOCUS_RING = {\n  COLOR: '#335cad',\n  STROKE_WIDTH: 2,\n  OFFSET: 4,\n};\n\nexport const SCRAPPER = {\n  TYPE_HORIZONTAL: 'horizontal',\n  TYPE_VERTICAL: 'vertical',\n};\n\nexport const LINE = {\n  POINT_STYLE: {\n    CIRCLE: 'CIRCLE',\n    SQUARE: 'SQUARE',\n    DIAMOND: 'DIAMOND',\n  },\n  DEFAULT_POINT_RADIUS: 4,\n  DASH_STYLE: {\n    SHORTDOT: 'SHORTDOT',\n    SHORTDASHDOT: 'SHORTDASHDOT',\n    DASH: 'DASH',\n    SHORTDASH: 'SHORTDASH',\n  },\n  DASH_STYLE_VALUES: {\n    SHORTDOT: [2, 2],\n    SHORTDASHDOT: [6, 2, 2, 2],\n    DASH: [8, 6],\n    SHORTDASH: [6, 2],\n  },\n  CURVE_STYLE: {\n    LINEAR: 'LINEAR',\n    SPLINE: 'SPLINE',\n  },\n};\n\nexport const curveStyleMap = {\n  [LINE.CURVE_STYLE.LINEAR]: curveLinear,\n  [LINE.CURVE_STYLE.SPLINE]: curveMonotoneX,\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gBAA4C;AAErC,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AACV;AAEO,MAAM,WAAW;AAAA,EACtB,iBAAiB;AAAA,EACjB,eAAe;AACjB;AAEO,MAAM,OAAO;AAAA,EAClB,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU,CAAC,GAAG,CAAC;AAAA,IACf,cAAc,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACzB,MAAM,CAAC,GAAG,CAAC;AAAA,IACX,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAC7B;",
+  "sourcesContent": ["import { curveLinear, curveMonotoneX } from 'd3';\n\nexport const SCALE_TYPES = {\n  LINEAR: 'linear',\n  BAND: 'band',\n  LOG: 'log',\n  TIME: 'time',\n};\n\nexport const FOCUS_RING = {\n  COLOR: '#335cad',\n  STROKE_WIDTH: 2,\n  OFFSET: 4,\n};\n\nexport const SCRAPPER = {\n  TYPE_HORIZONTAL: 'horizontal',\n  TYPE_VERTICAL: 'vertical',\n};\n\nexport const LINE = {\n  POINT_STYLE: {\n    CIRCLE: 'CIRCLE',\n    SQUARE: 'SQUARE',\n    DIAMOND: 'DIAMOND',\n  },\n  DEFAULT_POINT_RADIUS: 4,\n  DASH_STYLE: {\n    SHORTDOT: 'SHORTDOT',\n    SHORTDASHDOT: 'SHORTDASHDOT',\n    DASH: 'DASH',\n    SHORTDASH: 'SHORTDASH',\n  },\n  DASH_STYLE_VALUES: {\n    SHORTDOT: [2, 2],\n    SHORTDASHDOT: [6, 2, 2, 2],\n    DASH: [8, 6],\n    SHORTDASH: [6, 2],\n  },\n  CURVE_STYLE: {\n    LINEAR: 'LINEAR',\n    SPLINE: 'SPLINE',\n  },\n};\n\nexport const curveStyleMap = {\n  [LINE.CURVE_STYLE.LINEAR]: curveLinear,\n  [LINE.CURVE_STYLE.SPLINE]: curveMonotoneX,\n};\n\nexport const TOOLBAR = {\n  RESET: {\n    HEIGHT: 21,\n    WIDTH: 21,\n  },\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gBAA4C;AAErC,MAAM,cAAc;AAAA,EACzB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AACV;AAEO,MAAM,WAAW;AAAA,EACtB,iBAAiB;AAAA,EACjB,eAAe;AACjB;AAEO,MAAM,OAAO;AAAA,EAClB,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,sBAAsB;AAAA,EACtB,YAAY;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,mBAAmB;AAAA,IACjB,UAAU,CAAC,GAAG,CAAC;AAAA,IACf,cAAc,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,IACzB,MAAM,CAAC,GAAG,CAAC;AAAA,IACX,WAAW,CAAC,GAAG,CAAC;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AACF;AAEO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAAA,EAC3B,CAAC,KAAK,YAAY,SAAS;AAC7B;AAEO,MAAM,UAAU;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AACF;",
   "names": []
 }

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

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

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

@@ -2,20 +2,22 @@ import * as React from "react";
 import { useMemo, useState, useEffect, useRef } from "react";
 import { uid } from "uid";
 import { debounce } from "lodash";
+import { defaultProps, propTypes } from "../react-desc-prop-types";
 import { useScales } from "./useScales";
 import { stackData } from "../helpers";
 import { useInternalMargins } from "./useInternalMargins";
 import { useGetters } from "./useGetters";
 import ResizeObserver from "resize-observer-polyfill";
+import { useValidateProps } from "./useValidateProps";
 const useResizeObserver = (ref) => {
-  const [dimensions, setDimensions] = useState(null);
+  const [dimensions, setDimensions] = useState(0);
   useEffect(() => {
     if (ref) {
       const observeTarget = ref;
       const resizeObserver = new ResizeObserver(
         debounce((entries) => {
           entries.forEach((entry) => {
-            setDimensions(entry.contentRect);
+            setDimensions(Math.ceil(entry.contentRect.width));
           });
         }, 200)
       );
@@ -28,14 +30,24 @@ const useResizeObserver = (ref) => {
   return dimensions;
 };
 const useChart = (props) => {
+  useValidateProps(props, propTypes);
   const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;
+  const originalSeries = useMemo(() => {
+    if (series.length === 0) {
+      return defaultProps.series;
+    }
+    return series;
+  }, [series]);
   const [containerRef, setContainerRef] = useState(null);
   const svgRef = useRef(null);
-  const dimensions = useResizeObserver(containerRef);
-  const width = useMemo(() => userWidth ?? dimensions?.width ?? 0, [dimensions, userWidth]);
+  const dimensionWidth = useResizeObserver(containerRef);
+  const width = useMemo(() => userWidth ?? dimensionWidth ?? 0, [dimensionWidth, userWidth]);
   const height = useMemo(() => userHeight ?? 500, [userHeight]);
   const [isGrabbed, setIsGrabbed] = useState(false);
   const [startPosition, setStartPosition] = useState(0);
+  const [isZooming, setIsZooming] = useState(false);
+  const [zoomStartingPosition, setZoomStartingPosition] = useState(0);
+  const [movingPosition, setMovingPosition] = useState(0);
   const [activePoint, setActivePoint] = useState(null);
   const [activeSerie, setActiveSerie] = useState("");
   const [scrapperPosY, setScrapperPosY] = useState("");
@@ -64,7 +76,14 @@ const useChart = (props) => {
     bottomLabelHeight,
     internalMargin,
     leftLegendWidth,
-    rightLabelWidth
+    rightLabelWidth,
+    leftLabelHeight,
+    rightLegendHeight,
+    bottomLegendWidth,
+    leftLabelWidth,
+    axisLeftWidth,
+    topLegendHeight,
+    leftLegendHeight
   } = useInternalMargins({
     axisLeftRef,
     axisBottomRef,
@@ -88,7 +107,7 @@ const useChart = (props) => {
   );
   const [hiddenSeries, setHiddenSeries] = useState([]);
   const currentData = useMemo(
-    () => series.filter((serie) => !hiddenSeries.includes(serie.name)).map((d, i) => ({
+    () => originalSeries.filter((serie) => !hiddenSeries.includes(serie.name)).map((d, i) => ({
       ...d,
       key: `${d.name}-${i}`,
       data: d.data.map((value, index) => ({
@@ -99,12 +118,13 @@ const useChart = (props) => {
         scale: d.scale
       })).filter((datum) => datum.value !== null && datum.value !== void 0)
     })),
-    [hiddenSeries, series]
+    [hiddenSeries, originalSeries]
   );
   const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);
   const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);
   const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({
     props,
+    originalSeries,
     innerHeight,
     innerWidth,
     groups,
@@ -125,6 +145,13 @@ const useChart = (props) => {
   return useMemo(
     () => ({
       props,
+      originalSeries,
+      isZooming,
+      setIsZooming,
+      zoomStartingPosition,
+      setZoomStartingPosition,
+      setMovingPosition,
+      movingPosition,
       innerHeight,
       innerWidth,
       groups,
@@ -189,10 +216,22 @@ const useChart = (props) => {
       width,
       setContainerRatio,
       toolbarHeight,
-      setToolbarRef
+      setToolbarRef,
+      leftLabelHeight,
+      rightLegendHeight,
+      bottomLegendWidth,
+      bottomLegend,
+      leftLabelWidth,
+      axisLeftWidth,
+      topLegendHeight,
+      leftLegendHeight
     }),
     [
       props,
+      originalSeries,
+      isZooming,
+      zoomStartingPosition,
+      movingPosition,
       innerHeight,
       innerWidth,
       groups,
@@ -233,9 +272,15 @@ const useChart = (props) => {
       hiddenSeries,
       height,
       width,
-      setContainerRatio,
       toolbarHeight,
-      setToolbarRef
+      leftLabelHeight,
+      rightLegendHeight,
+      bottomLegendWidth,
+      bottomLegend,
+      leftLabelWidth,
+      axisLeftWidth,
+      topLegendHeight,
+      leftLegendHeight
     ]
   );
 };

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 } from 'react';\nimport { uid } from 'uid';\nimport { debounce } from 'lodash';\nimport type { ScaleBand } from 'd3';\n// import { useResizeObserver } from '@elliemae/ds-utilities';\nimport type { DSChartT } from '../react-desc-prop-types';\n// import { propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ntype ResizeObserverConstructorEntries = Parameters<ConstructorParameters<typeof ResizeObserver>[0]>[0];\ntype DimensionT = ResizeObserverConstructorEntries[0]['contentRect'] | null;\n\nconst useResizeObserver = (ref: HTMLElement | null | undefined) => {\n  const [dimensions, setDimensions] = useState<DimensionT>(null);\n  useEffect(() => {\n    if (ref) {\n      const observeTarget = ref;\n      const resizeObserver = new ResizeObserver(\n        debounce((entries: ResizeObserverConstructorEntries) => {\n          entries.forEach((entry) => {\n            setDimensions(entry.contentRect);\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  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;\n\n  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);\n  const svgRef = useRef(null);\n\n  const dimensions = useResizeObserver(containerRef);\n  const width = useMemo(() => userWidth ?? dimensions?.width ?? 0, [dimensions, userWidth]);\n\n  const height = useMemo(() => userHeight ?? 500, [userHeight]);\n\n  // useResizeObserver(({ width: newWidth, height: newHeight }) => {\n  //   setResizeWidth(newWidth);\n  // }, containerRef?.parentElement);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  const [activePoint, setActivePoint] = useState(null);\n  const [activeSerie, setActiveSerie] = useState('');\n  const [scrapperPosY, setScrapperPosY] = useState('');\n  const [scrapperPosX, setScrapperPosX] = useState('');\n  const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n  const [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  } = 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 currentData = useMemo(\n    () =>\n      series\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\n          key: `${d.name}-${i}`,\n          data: d.data\n            .map((value, index) => ({\n              key: `${d.name}-${i}-${index}`,\n              value,\n              position: index,\n              serie: d.name,\n              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    [hiddenSeries, series],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n  // @TODO we need to create a logic to get this from both axis\n  // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => !!(yScale as ScaleBand<string>).bandwidth, [yScale]);\n\n  const { getXValue, getYValue, getXScaleValue, getYScaleValue } = useGetters({\n    xAxis,\n    yAxis,\n    isHorizontal,\n    xScale,\n    yScale,\n    y2Scale,\n  });\n  const chartId = useMemo(() => uid(6), []);\n\n  return useMemo(\n    () => ({\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      svgRef,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      setScrapperPosY,\n      scrapperPosX,\n      setScrapperPosX,\n      activePoint,\n      setActivePoint,\n      activeSerie,\n      setActiveSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      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      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    }),\n    [\n      props,\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      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      height,\n      width,\n      setContainerRatio,\n      toolbarHeight,\n      setToolbarRef,\n    ],\n  );\n};\n"],
-  "mappings": "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AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,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,IACF;AAAA,EACF;AACF;",
+  "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 } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\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 currentData = useMemo(\n    () =>\n      originalSeries\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\n          key: `${d.name}-${i}`,\n          data: d.data\n            .map((value, index) => ({\n              key: `${d.name}-${i}-${index}`,\n              value,\n              position: index,\n              serie: d.name,\n              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    [hiddenSeries, originalSeries],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n  // @TODO we need to create a logic to get this from both axis\n  // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    originalSeries,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => !!(yScale as ScaleBand<string>).bandwidth, [yScale]);\n\n  const { getXValue, getYValue, getXScaleValue, getYScaleValue } = 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      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      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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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,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,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,7 +1,26 @@
 import * as React from "react";
-import { useMemo } from "react";
-const getElementWidthCeiled = (element, offset = 0) => element?.getBoundingClientRect()?.width ? Math.ceil(element?.getBoundingClientRect()?.width + offset) : 0;
-const getElementHeightCeiled = (element, offset = 0) => element?.getBoundingClientRect()?.height ? Math.ceil(element?.getBoundingClientRect()?.height + offset) : 0;
+import { useMemo, useEffect, useState } from "react";
+import ResizeObserver from "resize-observer-polyfill";
+const useResizeObserver = (ref, { offsetHeight = 0, offsetWidth = 0 } = { offsetHeight: 0, offsetWidth: 0 }) => {
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    if (ref) {
+      const observeTarget = ref;
+      const resizeObserver = new ResizeObserver((entries) => {
+        entries.forEach((entry) => {
+          setWidth(Math.ceil(entry.contentRect.width + offsetWidth));
+          setHeight(Math.ceil(entry.contentRect.height + offsetHeight));
+        });
+      });
+      resizeObserver.observe(observeTarget);
+      return () => {
+        resizeObserver.unobserve(observeTarget);
+      };
+    }
+  }, [offsetHeight, offsetWidth, ref]);
+  return { width, height };
+};
 const useInternalMargins = ({
   axisLeftRef,
   axisBottomRef,
@@ -15,23 +34,25 @@ const useInternalMargins = ({
   bottomLabel,
   toolbarRef
 }) => {
-  const axisLeftWidth = useMemo(() => getElementWidthCeiled(axisLeftRef), [axisLeftRef]);
-  const axisBottomHeight = useMemo(() => getElementHeightCeiled(axisBottomRef, 20), [axisBottomRef]);
-  const axisRightWidth = useMemo(() => getElementWidthCeiled(axisRightRef), [axisRightRef]);
-  const bottomLabelHeight = useMemo(() => getElementHeightCeiled(bottomLabel, 10), [bottomLabel]);
-  const rightLabelWidth = useMemo(() => getElementWidthCeiled(rightLabel), [rightLabel]);
-  const leftLabelWidth = useMemo(() => getElementWidthCeiled(leftLabel), [leftLabel]);
-  const topLegendHeight = useMemo(() => getElementHeightCeiled(topLegend), [topLegend]);
-  const bottomLegendHeight = useMemo(() => getElementHeightCeiled(bottomLegend), [bottomLegend]);
-  const rightLegendWidth = useMemo(() => getElementWidthCeiled(rightLegend), [rightLegend]);
-  const leftLegendWidth = useMemo(() => getElementWidthCeiled(leftLegend), [leftLegend]);
-  const toolbarHeight = useMemo(() => getElementHeightCeiled(toolbarRef), [toolbarRef]);
+  const { height: toolbarHeight } = useResizeObserver(toolbarRef, { offsetHeight: 10 });
+  const { width: axisRightWidth } = useResizeObserver(axisRightRef);
+  const { height: axisBottomHeight } = useResizeObserver(axisBottomRef, { offsetHeight: 20 });
+  const { width: axisLeftWidth } = useResizeObserver(axisLeftRef, { offsetWidth: 10 });
+  const { height: bottomLabelHeight } = useResizeObserver(bottomLabel, { offsetHeight: 10 });
+  const { width: rightLabelWidth } = useResizeObserver(rightLabel);
+  const { width: leftLabelWidth, height: leftLabelHeight } = useResizeObserver(leftLabel);
+  const { height: topLegendHeight } = useResizeObserver(topLegend, { offsetHeight: 20 });
+  const { height: bottomLegendHeight, width: bottomLegendWidth } = useResizeObserver(bottomLegend, {
+    offsetHeight: 10
+  });
+  const { width: rightLegendWidth, height: rightLegendHeight } = useResizeObserver(rightLegend);
+  const { width: leftLegendWidth, height: leftLegendHeight } = useResizeObserver(leftLegend, { offsetWidth: 20 });
   const internalMargin = useMemo(
     () => ({
-      bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,
-      top: 10 + topLegendHeight + toolbarHeight,
-      right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,
-      left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth
+      bottom: axisBottomHeight + bottomLegendHeight + bottomLabelHeight || 10,
+      top: Math.max(topLegendHeight, toolbarHeight) || 10,
+      right: rightLabelWidth + axisRightWidth + rightLegendWidth || 10,
+      left: axisLeftWidth + leftLabelWidth + leftLegendWidth || 10
     }),
     [
       axisBottomHeight,
@@ -50,6 +71,7 @@ const useInternalMargins = ({
   return useMemo(
     () => ({
       internalMargin,
+      leftLegendHeight,
       leftLegendWidth,
       axisBottomHeight,
       bottomLegendHeight,
@@ -60,11 +82,15 @@ const useInternalMargins = ({
       rightLegendWidth,
       axisLeftWidth,
       leftLabelWidth,
-      toolbarHeight
+      toolbarHeight,
+      leftLabelHeight,
+      rightLegendHeight,
+      bottomLegendWidth
     }),
     [
       axisBottomHeight,
       toolbarHeight,
+      leftLegendHeight,
       axisLeftWidth,
       axisRightWidth,
       bottomLabelHeight,
@@ -74,7 +100,10 @@ const useInternalMargins = ({
       leftLegendWidth,
       rightLabelWidth,
       rightLegendWidth,
-      topLegendHeight
+      topLegendHeight,
+      leftLabelHeight,
+      rightLegendHeight,
+      bottomLegendWidth
     ]
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useInternalMargins.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo } from 'react';\n\ninterface UseInternalMarginsT {\n  axisLeftRef: 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\nconst getElementWidthCeiled = (element: SVGGElement | null, offset = 0) =>\n  element?.getBoundingClientRect()?.width ? Math.ceil(element?.getBoundingClientRect()?.width + offset) : 0;\n\nconst getElementHeightCeiled = (element: SVGGElement | null, offset = 0) =>\n  element?.getBoundingClientRect()?.height ? Math.ceil(element?.getBoundingClientRect()?.height + offset) : 0;\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  // We get the measurements of the elements that are outside of the chart\n  // We ceil those numbers to avoid having double datatype on the variables\n  // So that the use memos don't retrigger to often because of the dependency\n\n  // Axis\n  const axisLeftWidth = useMemo(() => getElementWidthCeiled(axisLeftRef), [axisLeftRef]);\n  const axisBottomHeight = useMemo(() => getElementHeightCeiled(axisBottomRef, 20), [axisBottomRef]);\n  const axisRightWidth = useMemo(() => getElementWidthCeiled(axisRightRef), [axisRightRef]);\n\n  // Labels\n  const bottomLabelHeight = useMemo(() => getElementHeightCeiled(bottomLabel, 10), [bottomLabel]);\n  const rightLabelWidth = useMemo(() => getElementWidthCeiled(rightLabel), [rightLabel]);\n  const leftLabelWidth = useMemo(() => getElementWidthCeiled(leftLabel), [leftLabel]);\n  // Legends\n  const topLegendHeight = useMemo(() => getElementHeightCeiled(topLegend), [topLegend]);\n  const bottomLegendHeight = useMemo(() => getElementHeightCeiled(bottomLegend), [bottomLegend]);\n  const rightLegendWidth = useMemo(() => getElementWidthCeiled(rightLegend), [rightLegend]);\n  const leftLegendWidth = useMemo(() => getElementWidthCeiled(leftLegend), [leftLegend]);\n\n  const toolbarHeight = useMemo(() => getElementHeightCeiled(toolbarRef), [toolbarRef]);\n\n  const internalMargin = useMemo(\n    () => ({\n      bottom: 10 + axisBottomHeight + bottomLegendHeight + bottomLabelHeight,\n      top: 10 + topLegendHeight + toolbarHeight,\n      right: 15 + rightLabelWidth + axisRightWidth + rightLegendWidth,\n      left: 10 + axisLeftWidth + leftLabelWidth + leftLegendWidth,\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      leftLegendWidth,\n      axisBottomHeight,\n      bottomLegendHeight,\n      bottomLabelHeight,\n      topLegendHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      rightLegendWidth,\n      axisLeftWidth,\n      leftLabelWidth,\n      toolbarHeight,\n    }),\n    [\n      axisBottomHeight,\n      toolbarHeight,\n      axisLeftWidth,\n      axisRightWidth,\n      bottomLabelHeight,\n      bottomLegendHeight,\n      internalMargin,\n      leftLabelWidth,\n      leftLegendWidth,\n      rightLabelWidth,\n      rightLegendWidth,\n      topLegendHeight,\n    ],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,eAAe;AAgBxB,MAAM,wBAAwB,CAAC,SAA6B,SAAS,MACnE,SAAS,sBAAsB,GAAG,QAAQ,KAAK,KAAK,SAAS,sBAAsB,GAAG,QAAQ,MAAM,IAAI;AAE1G,MAAM,yBAAyB,CAAC,SAA6B,SAAS,MACpE,SAAS,sBAAsB,GAAG,SAAS,KAAK,KAAK,SAAS,sBAAsB,GAAG,SAAS,MAAM,IAAI;AAErG,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AAMzB,QAAM,gBAAgB,QAAQ,MAAM,sBAAsB,WAAW,GAAG,CAAC,WAAW,CAAC;AACrF,QAAM,mBAAmB,QAAQ,MAAM,uBAAuB,eAAe,EAAE,GAAG,CAAC,aAAa,CAAC;AACjG,QAAM,iBAAiB,QAAQ,MAAM,sBAAsB,YAAY,GAAG,CAAC,YAAY,CAAC;AAGxF,QAAM,oBAAoB,QAAQ,MAAM,uBAAuB,aAAa,EAAE,GAAG,CAAC,WAAW,CAAC;AAC9F,QAAM,kBAAkB,QAAQ,MAAM,sBAAsB,UAAU,GAAG,CAAC,UAAU,CAAC;AACrF,QAAM,iBAAiB,QAAQ,MAAM,sBAAsB,SAAS,GAAG,CAAC,SAAS,CAAC;AAElF,QAAM,kBAAkB,QAAQ,MAAM,uBAAuB,SAAS,GAAG,CAAC,SAAS,CAAC;AACpF,QAAM,qBAAqB,QAAQ,MAAM,uBAAuB,YAAY,GAAG,CAAC,YAAY,CAAC;AAC7F,QAAM,mBAAmB,QAAQ,MAAM,sBAAsB,WAAW,GAAG,CAAC,WAAW,CAAC;AACxF,QAAM,kBAAkB,QAAQ,MAAM,sBAAsB,UAAU,GAAG,CAAC,UAAU,CAAC;AAErF,QAAM,gBAAgB,QAAQ,MAAM,uBAAuB,UAAU,GAAG,CAAC,UAAU,CAAC;AAEpF,QAAM,iBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,QAAQ,KAAK,mBAAmB,qBAAqB;AAAA,MACrD,KAAK,KAAK,kBAAkB;AAAA,MAC5B,OAAO,KAAK,kBAAkB,iBAAiB;AAAA,MAC/C,MAAM,KAAK,gBAAgB,iBAAiB;AAAA,IAC9C;AAAA,IAEA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,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,IACF;AAAA,EACF;AACF;",
+  "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);\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);\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"],
+  "mappings": "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",
   "names": []
 }