@elliemae/ds-dataviz 3.10.3 → 3.11.0-next.2

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, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING, SCRAPPER, LINE } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nexport const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity }) => {\n  const {\n    activePoint,\n    scrapperPosY,\n    scrapperPosX,\n    props: { scrapper, TooltipRenderer },\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  return (\n    <g>\n      {point}\n      {activePoint?.key === id && TooltipRenderer ? (\n        <FocusableRegion\n          id={id}\n          width={(pointRadius ?? 3) * 2}\n          height={(pointRadius ?? 3) * 2}\n          pointRadius={pointRadius}\n          style={{ transform: `translate(-${pointRadius}px, -${pointRadius}px)` }}\n          content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n        />\n      ) : (\n        ''\n      )}\n    </g>\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            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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",
   "names": []
 }

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

@@ -46,7 +46,7 @@ const Points = ({ serie }) => {
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
   const opacity = (0, import_react.useMemo)(() => types === "scatter" ? 0.8 : 1, [serie.type]);
-  const render = (0, import_react.useMemo)(
+  return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
       fill: colorScale(serie.name),
       children: serie.data.map((point, i) => {
@@ -57,24 +57,21 @@ const Points = ({ serie }) => {
         const y = getYValue(point);
         const xPosition = xScale(x);
         const yPosition = finalYScale(y + deltaY);
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-          transform: `translate(${xPosition},${yPosition})`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Point.Point, {
-            pointRadius,
-            id: point.key,
-            opacity,
-            x: xPosition + (xScale.bandwidth?.() ?? 0) / 2,
-            y: yPosition,
-            xValue: x,
-            yValue: y,
-            pointStyle,
-            name: serie.name
-          })
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Point.Point, {
+          pointRadius,
+          id: point.key,
+          opacity,
+          x: xPosition,
+          y: yPosition,
+          xValue: x,
+          yValue: y,
+          pointStyle,
+          name: serie.name,
+          datum: point
         }, `${point.key}-p`);
       })
     }),
     [colorScale, finalYScale, getXValue, getYValue, opacity, serie, stackedData, xScale]
   );
-  return render;
 };
 //# sourceMappingURL=Points.js.map

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

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

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

@@ -33,7 +33,8 @@ var import_react = require("react");
 var import_ChartContext = require("../ChartContext");
 var import_constants = require("../../constants");
 var import_FocusableRegion = require("../parts/FocusableRegion");
-const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue }) => {
+var import_DataTestIds = require("../DataTestIds");
+const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue, datum }) => {
   const {
     activePoint,
     isGrabbed,
@@ -42,7 +43,8 @@ const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id,
     innerWidth,
     yScale,
     innerHeight,
-    props: { TooltipRenderer }
+    setActivePoint,
+    props: { TooltipRenderer, scrapper }
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
   const isFocused = activePoint?.key === id;
   const animation = (0, import_react.useMemo)(() => {
@@ -84,12 +86,23 @@ const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id,
       return ``;
     return `scale(1,-1) translate(0,${-height})`;
   }, [height, isHorizontal]);
+  const handleMouseEnter = (0, import_react.useCallback)(() => {
+    if (!scrapper)
+      setActivePoint(datum);
+  }, [datum, scrapper, setActivePoint]);
+  const handleOnMouseLeave = (0, import_react.useCallback)(() => {
+    if (!scrapper)
+      setActivePoint(null);
+  }, [scrapper, setActivePoint]);
   return (0, import_react.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
       clipPath: clipPathSign,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
         id: isFocused ? `data-focused-${chartId}` : "",
         transform,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        "data-testid": import_DataTestIds.DataVizDataTestIds.BAR,
         children: [
           isFocused ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
             x: (isHorizontal ? x : 0) - import_constants.FOCUS_RING.STROKE_WIDTH,
@@ -132,6 +145,8 @@ const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id,
       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 } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nexport const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue }) => {\n  const {\n    activePoint,\n    isGrabbed,\n    chartId,\n    isHorizontal,\n    innerWidth,\n    yScale,\n    innerHeight,\n    props: { TooltipRenderer },\n  } = useContext(ChartContext);\n\n  const isFocused = activePoint?.key === id;\n\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  return useMemo(\n    () => (\n      <g clipPath={clipPathSign}>\n        <g id={isFocused ? `data-focused-${chartId}` : ''} transform={transform}>\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      // animation,\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,0BAA6B;AAC7B,uBAA2B;AAC3B,6BAAgC;AACzB,MAAM,OAAO,CAAC,EAAE,MAAM,OAAO,QAAQ,aAAa,OAAO,IAAI,MAAM,IAAI,MAAM,IAAI,QAAQ,OAAO,MAAM;AAC3G,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,gBAAgB;AAAA,EAC3B,QAAI,yBAAW,gCAAY;AAE3B,QAAM,YAAY,aAAa,QAAQ;AAEvC,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI;AAAW,aAAO;AACtB,QAAI;AAAc,aAAO,4CAAC;AAAA,QAAQ,eAAc;AAAA,QAAI,MAAM,CAAC;AAAA,QAAY,IAAI;AAAA,QAAG,KAAI;AAAA,QAAO,MAAK;AAAA,OAAO;AACrG,QAAI;AAAY,aAAO,4CAAC;AAAA,QAAQ,eAAc;AAAA,QAAI,MAAM,OAAO,CAAC;AAAA,QAAG,IAAI,CAAC;AAAA,QAAG,KAAI;AAAA,QAAQ,MAAK;AAAA,OAAO;AACnG,WAAO,4CAAC;AAAA,MAAQ,eAAc;AAAA,MAAI,MAAM,CAAC,cAAc;AAAA,MAAG,IAAI,CAAC;AAAA,MAAG,KAAI;AAAA,MAAQ,MAAK;AAAA,KAAO;AAAA,EAC5F,GAAG,CAAC,aAAa,YAAY,WAAW,cAAc,YAAY,GAAG,GAAG,MAAM,CAAC;AAE/E,QAAM,mBAAe,sBAAQ,MAAM;AAEjC,QAAI;AAAc,aAAO;AACzB,QAAI;AAAY,aAAO,uBAAuB;AAC9C,WAAO,uBAAuB;AAAA,EAChC,GAAG,CAAC,SAAS,cAAc,UAAU,CAAC;AAEtC,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI;AAAc,aAAO;AACzB,WAAO,2BAA2B,CAAC;AAAA,EACrC,GAAG,CAAC,QAAQ,YAAY,CAAC;AACzB,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,UAAU;AAAA,MACX,uDAAC;AAAA,QAAE,IAAI,YAAY,gBAAgB,YAAY;AAAA,QAAI;AAAA,QAChD;AAAA,sBACC,4CAAC;AAAA,YACC,IAAI,eAAe,IAAI,KAAK,4BAAW;AAAA,YACvC,IAAI,CAAC,eAAe,CAAC,IAAI,KAAK,4BAAW;AAAA,YACzC,OAAO,QAAQ,4BAAW;AAAA,YAC1B,QAAQ,SAAS,4BAAW;AAAA,YAC5B,MAAK;AAAA,YACL,IAAG;AAAA,YACH,IAAG;AAAA,YACH,QAAQ,4BAAW;AAAA,YACnB,aAAa,4BAAW;AAAA,WACzB,IACC;AAAA,UACJ,4CAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,GAAG,CAAC;AAAA,YAAG;AAAA,WAE3C;AAAA,UACC,aAAa,QAAQ,MAAM,kBAC1B,4CAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,4CAAC;AAAA,cAAgB,MAAM,CAAC,EAAE,MAAM,QAAQ,OAAO,CAAC;AAAA,aAAG;AAAA,WAC9D,IAEA;AAAA;AAAA,OAEJ;AAAA,KACF;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -52,11 +52,11 @@ const StackedBar = ({ serie }) => {
       const sequence = serieWithStackedValues[bar.position];
       const isFloorStack = sequence[0] === 0;
       const xValue = getXValue(bar);
-      const yValue = sequence[0] - sequence[1];
+      const yValue = sequence[1] - sequence[0];
       const width = subGroupScale?.bandwidth();
-      const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);
+      const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 2 : 0);
       const transformX = xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);
-      const transformY = yScale(sequence[1]);
+      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)`,
@@ -67,7 +67,8 @@ const StackedBar = ({ serie }) => {
           yValue,
           y: transformY,
           id: serie.data[i].key,
-          name: serie.name
+          name: serie.name,
+          datum: bar
         })
       }, serie.data[i].key);
     })

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        const yValue = sequence[0] - sequence[1];\n        const width = subGroupScale?.bandwidth();\n        const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);\n        const transformX = xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);\n        const transformY = yScale(sequence[1]);\n\n        return (\n          <g key={serie.data[i].key} fill={colorScale(serie.name)} transform={`translate(${transformX},0)`}>\n            <Rect\n              width={width}\n              height={height}\n              xValue={xValue}\n              yValue={yValue}\n              y={transformY}\n              id={serie.data[i].key}\n              name={serie.name}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAEzC,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC;AAAA,IAAE,UAAU,wBAAwB;AAAA,IAClC,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,WAAW,uBAAuB,IAAI;AAC5C,YAAM,eAAe,SAAS,OAAO;AAErC,YAAM,SAAS,UAAU,GAAG;AAC5B,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAChF,YAAM,aAAa,OAAO,MAAM,IAAI,cAAc,gBAAgB,YAAY;AAC9E,YAAM,aAAa,OAAO,SAAS,EAAE;AAErC,aACE,4CAAC;AAAA,QAA0B,MAAM,WAAW,MAAM,IAAI;AAAA,QAAG,WAAW,aAAa;AAAA,QAC/E,sDAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH,IAAI,MAAM,KAAK,GAAG;AAAA,UAClB,MAAM,MAAM;AAAA,SACd;AAAA,SATM,MAAM,KAAK,GAAG,GAUtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAEzC,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC;AAAA,IAAE,UAAU,wBAAwB;AAAA,IAClC,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,WAAW,uBAAuB,IAAI;AAC5C,YAAM,eAAe,SAAS,OAAO;AAErC,YAAM,SAAS,UAAU,GAAG;AAE5B,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,QAAQ,eAAe,UAAU;AACvC,YAAM,SAAS,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAChF,YAAM,aAAa,OAAO,MAAM,IAAI,cAAc,gBAAgB,YAAY;AAC9E,YAAM,aAAa,OAAO,SAAS,EAAE,KAAK,SAAS,KAAK,IAAI,IAAI;AAEhE,aACE,4CAAC;AAAA,QAA0B,MAAM,WAAW,MAAM,IAAI;AAAA,QAAG,WAAW,aAAa;AAAA,QAC/E,sDAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH,IAAI,MAAM,KAAK,GAAG;AAAA,UAClB,MAAM,MAAM;AAAA,UACZ,OAAO;AAAA,SACT;AAAA,SAVM,MAAM,KAAK,GAAG,GAWtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -51,6 +51,8 @@ const StyledSVGWrapper = import_ds_system.styled.div`
   .domain {
     stroke-width: 1px;
   }
+
+  min-width: 300px;
 `;
 const StyledAxis = (0, import_ds_system.styled)("g")`
   text {
@@ -58,6 +60,7 @@ const StyledAxis = (0, import_ds_system.styled)("g")`
   }
 
   .tick text {
+    font-size: 12px;
     ${({ tickColor }) => tickColor ? `fill: ${import_colorPallet.COLOR_PALLET[tickColor] ?? tickColor}` : ""}
   }
   .tick line {

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+const DataVizDataTestIds = {
+  POINT: "ds-dataviz-point",
+  BAR: "ds-dataviz-bar",
+  LINE: "ds-dataviz-line"
+};
+export {
+  DataVizDataTestIds
+};
+//# sourceMappingURL=DataTestIds.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/DataTestIds.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DataVizDataTestIds = {\n  POINT: 'ds-dataviz-point',\n  BAR: 'ds-dataviz-bar',\n  LINE: 'ds-dataviz-line',\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB;AAAA,EAChC,OAAO;AAAA,EACP,KAAK;AAAA,EACL,MAAM;AACR;",
+  "names": []
+}

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

@@ -1,14 +1,42 @@
 import * as React from "react";
-import { useMemo, useState, useRef } from "react";
+import { useMemo, useState, useEffect, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
+import { debounce } from "lodash";
 import { useScales } from "./useScales";
 import { stackData } from "../helpers";
 import { useInternalMargins } from "./useInternalMargins";
 import { useGetters } from "./useGetters";
+const useResizeObserver = (ref) => {
+  const [dimensions, setDimensions] = useState(null);
+  const firstRender = useRef(true);
+  useEffect(() => {
+    const observeTarget = ref?.current || ref;
+    if (firstRender.current) {
+      firstRender.current = false;
+      return () => {
+      };
+    }
+    const resizeObserver = new ResizeObserver(
+      debounce((entries) => {
+        entries.forEach((entry) => {
+          setDimensions(entry.contentRect);
+        });
+      }, 200)
+    );
+    resizeObserver.observe(observeTarget);
+    return () => {
+      resizeObserver.unobserve(observeTarget);
+    };
+  }, [ref]);
+  return dimensions;
+};
 const useChart = (props) => {
-  const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;
-  const containerRef = useRef(null);
+  const { series, yAxis, xAxis, width: userWidth, height: userHeight, groups: groupsStacked } = props;
+  const [containerRef, setContainerRef] = useState(null);
   const svgRef = useRef(null);
+  const dimensions = useResizeObserver(containerRef?.parentElement);
+  const width = useMemo(() => userWidth ?? dimensions?.width ?? 0, [dimensions, userWidth]);
+  const height = useMemo(() => userHeight ?? 500, [userHeight]);
   const [isGrabbed, setIsGrabbed] = useState(false);
   const [startPosition, setStartPosition] = useState(0);
   const [activePoint, setActivePoint] = useState(null);
@@ -17,7 +45,10 @@ const useChart = (props) => {
   const [scrapperPosX, setScrapperPosX] = useState("");
   const [xScrollbarPosition, setXScrollbarPosition] = useState(0);
   const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);
-  const oldLastPosition = useRef(0);
+  const [containerRatio, setContainerRatio] = useState(
+    props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1
+  );
+  const lastPosition = useRef(0);
   const [axisLeftRef, setAxisLeftRef] = useState(null);
   const [axisBottomRef, setAxisBottomRef] = useState(null);
   const [axisRightRef, setAxisRightRef] = useState(null);
@@ -28,7 +59,16 @@ const useChart = (props) => {
   const [rightLabel, setRightLabel] = useState(null);
   const [leftLabel, setLeftLabel] = useState(null);
   const [bottomLabel, setBottomLabel] = useState(null);
-  const { axisBottomHeight, axisRightWidth, bottomLabelHeight, internalMargin, leftLegendWidth, rightLabelWidth } = useInternalMargins({
+  const [toolbarRef, setToolbarRef] = useState(null);
+  const {
+    toolbarHeight,
+    axisBottomHeight,
+    axisRightWidth,
+    bottomLabelHeight,
+    internalMargin,
+    leftLegendWidth,
+    rightLabelWidth
+  } = useInternalMargins({
     axisLeftRef,
     axisBottomRef,
     axisRightRef,
@@ -38,7 +78,8 @@ const useChart = (props) => {
     topLegend,
     bottomLegend,
     rightLabel,
-    bottomLabel
+    bottomLabel,
+    toolbarRef
   });
   const innerWidth = useMemo(
     () => width - internalMargin.left - internalMargin.right,
@@ -57,13 +98,13 @@ const useChart = (props) => {
         key: `${d.name}-${i}-${index}`,
         value,
         position: index,
-        serie: d.name
+        serie: d.name,
+        scale: d.scale
       })).filter((datum) => datum.value !== null && datum.value !== void 0)
     })),
     [hiddenSeries, series]
   );
   const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);
-  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;
   const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);
   const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({
     props,
@@ -80,7 +121,8 @@ const useChart = (props) => {
     yAxis,
     isHorizontal,
     xScale,
-    yScale
+    yScale,
+    y2Scale
   });
   const chartId = useMemo(() => uuidv4(), []);
   return useMemo(
@@ -111,11 +153,12 @@ const useChart = (props) => {
       setXScrollbarPosition,
       isGrabbed,
       setIsGrabbed,
+      setContainerRef,
       startPosition,
       setStartPosition,
       isScrollbarVisible,
       setIsScrollbarVisible,
-      oldLastPosition,
+      lastPosition,
       containerRatio,
       internalMargin,
       axisLeftRef,
@@ -144,64 +187,58 @@ const useChart = (props) => {
       leftLabel,
       chartId,
       hiddenSeries,
-      setHiddenSeries
+      setHiddenSeries,
+      height,
+      width,
+      setContainerRatio,
+      toolbarHeight,
+      setToolbarRef
     }),
     [
       props,
-      currentData,
       innerHeight,
       innerWidth,
       groups,
+      currentData,
       colorScale,
       stackedData,
       subGroupScale,
-      scrapperPosX,
-      setScrapperPosX,
       xScale,
       yScale,
       y2Scale,
+      containerRef,
       getBandwidth,
       scrapperPosY,
+      scrapperPosX,
       activePoint,
       activeSerie,
       xScrollbarPosition,
-      setXScrollbarPosition,
       isGrabbed,
-      setIsGrabbed,
       startPosition,
-      setStartPosition,
-      rightLabelWidth,
-      rightLegend,
-      bottomLabelHeight,
       isScrollbarVisible,
-      setIsScrollbarVisible,
-      oldLastPosition,
       containerRatio,
       internalMargin,
-      axisBottomHeight,
       axisLeftRef,
       leftLegendWidth,
       leftLegend,
-      setAxisLeftRef,
-      setLeftLegend,
-      setRightLegend,
-      setTopLegend,
-      setBottomLegend,
-      setAxisBottomRef,
-      setAxisRightRef,
-      setRightLabel,
-      setBottomLabel,
+      rightLegend,
+      axisBottomHeight,
+      getXScaleValue,
+      getYScaleValue,
+      bottomLabelHeight,
+      rightLabelWidth,
+      axisRightWidth,
       getXValue,
       getYValue,
       isHorizontal,
-      axisRightWidth,
-      setLeftLabel,
       leftLabel,
       chartId,
       hiddenSeries,
-      setHiddenSeries,
-      getXScaleValue,
-      getYScaleValue
+      height,
+      width,
+      setContainerRatio,
+      toolbarHeight,
+      setToolbarRef
     ]
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/config/useChart.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-nested-callbacks */\n/* eslint-disable max-statements */\n/* eslint-disable indent */\nimport { useMemo, useState, useRef } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { ScaleBand } from 'd3';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSChartT } from '../react-desc-prop-types';\n// import { propTypes } from '../react-desc-prop-types';\nimport { useScales } from './useScales';\nimport { stackData } from '../helpers';\nimport { useInternalMargins } from './useInternalMargins';\nimport { useGetters } from './useGetters';\nexport const useChart = (props: DSChartT.Props) => {\n  // useValidateTypescriptPropTypes(props, propTypes);\n\n  const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;\n\n  const containerRef = useRef(null);\n  const svgRef = useRef(null);\n\n  const [isGrabbed, setIsGrabbed] = useState(false);\n  const [startPosition, setStartPosition] = useState(0);\n\n  const [activePoint, setActivePoint] = useState(null);\n  const [activeSerie, setActiveSerie] = useState('');\n  const [scrapperPosY, setScrapperPosY] = useState('');\n  const [scrapperPosX, setScrapperPosX] = useState('');\n  const [xScrollbarPosition, setXScrollbarPosition] = useState(0);\n  const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);\n  const oldLastPosition = useRef(0);\n\n  const [axisLeftRef, setAxisLeftRef] = useState<SVGGElement | null>(null);\n  const [axisBottomRef, setAxisBottomRef] = useState<SVGGElement | null>(null);\n  const [axisRightRef, setAxisRightRef] = useState<SVGGElement | null>(null);\n\n  const [leftLegend, setLeftLegend] = useState<SVGGElement | null>(null);\n  const [rightLegend, setRightLegend] = useState<SVGGElement | null>(null);\n  const [topLegend, setTopLegend] = useState<SVGGElement | null>(null);\n  const [bottomLegend, setBottomLegend] = useState<SVGGElement | null>(null);\n\n  const [rightLabel, setRightLabel] = useState<SVGGElement | null>(null);\n  const [leftLabel, setLeftLabel] = useState<SVGGElement | null>(null);\n  const [bottomLabel, setBottomLabel] = useState<SVGGElement | null>(null);\n\n  const { axisBottomHeight, axisRightWidth, bottomLabelHeight, internalMargin, leftLegendWidth, rightLabelWidth } =\n    useInternalMargins({\n      axisLeftRef,\n      axisBottomRef,\n      axisRightRef,\n      leftLabel,\n      leftLegend,\n      rightLegend,\n      topLegend,\n      bottomLegend,\n      rightLabel,\n      bottomLabel,\n    });\n  const innerWidth = useMemo(\n    () => width - internalMargin.left - internalMargin.right,\n    [internalMargin.left, internalMargin.right, width],\n  );\n  const innerHeight = useMemo(\n    () => height - internalMargin.top - internalMargin.bottom,\n    [internalMargin.top, internalMargin.bottom, height],\n  );\n\n  const [hiddenSeries, setHiddenSeries] = useState<string[]>([]);\n\n  const currentData = useMemo(\n    () =>\n      series\n        .filter((serie) => !hiddenSeries.includes(serie.name))\n        .map((d, i) => ({\n          ...d,\n          key: `${d.name}-${i}`,\n          data: d.data\n            .map((value, index) => ({\n              key: `${d.name}-${i}-${index}`,\n              value,\n              position: index,\n              serie: d.name,\n            }))\n            .filter((datum) => datum.value !== null && datum.value !== undefined),\n        })),\n    [hiddenSeries, series],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n  // @TODO we need to create a logic to get this from both axis\n  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => !!(yScale as ScaleBand<string>).bandwidth, [yScale]);\n\n  const { getXValue, getYValue, getXScaleValue, getYScaleValue } = useGetters({\n    xAxis,\n    yAxis,\n    isHorizontal,\n    xScale,\n    yScale,\n  });\n  const chartId = useMemo(() => uuidv4(), []);\n\n  return useMemo(\n    () => ({\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      svgRef,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      setScrapperPosY,\n      scrapperPosX,\n      setScrapperPosX,\n      activePoint,\n      setActivePoint,\n      activeSerie,\n      setActiveSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      rightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      axisBottomHeight,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXScaleValue,\n      getYScaleValue,\n      bottomLabelHeight,\n      rightLabelWidth,\n      axisRightWidth,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n    }),\n    [\n      props,\n      currentData,\n      innerHeight,\n      innerWidth,\n      groups,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      scrapperPosX,\n      setScrapperPosX,\n      xScale,\n      yScale,\n      y2Scale,\n      getBandwidth,\n      scrapperPosY,\n      activePoint,\n      activeSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      startPosition,\n      setStartPosition,\n      rightLabelWidth,\n      rightLegend,\n      bottomLabelHeight,\n      isScrollbarVisible,\n      setIsScrollbarVisible,\n      oldLastPosition,\n      containerRatio,\n      internalMargin,\n      axisBottomHeight,\n      axisLeftRef,\n      leftLegendWidth,\n      leftLegend,\n      setAxisLeftRef,\n      setLeftLegend,\n      setRightLegend,\n      setTopLegend,\n      setBottomLegend,\n      setAxisBottomRef,\n      setAxisRightRef,\n      setRightLabel,\n      setBottomLabel,\n      getXValue,\n      getYValue,\n      isHorizontal,\n      axisRightWidth,\n      setLeftLabel,\n      leftLabel,\n      chartId,\n      hiddenSeries,\n      setHiddenSeries,\n      getXScaleValue,\n      getYScaleValue,\n    ],\n  );\n};\n"],
-  "mappings": "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IACA;AAAA,EACF,CAAC;AACD,QAAM,UAAU,QAAQ,MAAM,OAAO,GAAG,CAAC,CAAC;AAE1C,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "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 { v4 as uuidv4 } from 'uuid';\nimport { debounce } from 'lodash';\nimport { 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';\n\nconst useResizeObserver = (ref) => {\n  const [dimensions, setDimensions] = useState(null);\n  const firstRender = useRef(true);\n  useEffect(() => {\n    const observeTarget = ref?.current || ref;\n\n    if (firstRender.current) {\n      firstRender.current = false;\n      return () => {};\n    }\n    const resizeObserver = new ResizeObserver(\n      debounce((entries) => {\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  }, [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);\n  const svgRef = useRef(null);\n\n  const dimensions = useResizeObserver(containerRef?.parentElement);\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),\n        })),\n    [hiddenSeries, series],\n  );\n\n  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);\n\n  // @TODO we need to create a logic to get this from both axis\n  // const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? props?.yAxis.advanced?.pointSpacing?.value ?? 1;\n\n  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);\n\n  const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({\n    props,\n    innerHeight,\n    innerWidth,\n    groups,\n    stackedData,\n    currentData,\n    containerRatio,\n  });\n\n  const isHorizontal = useMemo(() => !!(yScale as ScaleBand<string>).bandwidth, [yScale]);\n\n  const { getXValue, getYValue, getXScaleValue, getYScaleValue } = useGetters({\n    xAxis,\n    yAxis,\n    isHorizontal,\n    xScale,\n    yScale,\n    y2Scale,\n  });\n  const chartId = useMemo(() => uuidv4(), []);\n\n  return useMemo(\n    () => ({\n      props,\n      innerHeight,\n      innerWidth,\n      groups,\n      currentData,\n      colorScale,\n      stackedData,\n      subGroupScale,\n      svgRef,\n      xScale,\n      yScale,\n      y2Scale,\n      containerRef,\n      getBandwidth,\n      scrapperPosY,\n      setScrapperPosY,\n      scrapperPosX,\n      setScrapperPosX,\n      activePoint,\n      setActivePoint,\n      activeSerie,\n      setActiveSerie,\n      xScrollbarPosition,\n      setXScrollbarPosition,\n      isGrabbed,\n      setIsGrabbed,\n      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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AAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,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;",
   "names": []
 }