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

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

@@ -22,9 +22,9 @@ const HorizontalStackedBars = ({ serie }) => {
       const isFloorStack = sequence[0] === 0;
       const xValue = sequence[1] - sequence[0];
       const yValue = getYValue(serie.data[i]);
-      const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 1 : 0);
+      const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 2 : 0);
       const height = subGroupScale?.bandwidth();
-      const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 0);
+      const transformX = xScale(sequence[0]) + (!isFloorStack ? 2 : 0);
       const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);
       return /* @__PURE__ */ jsx("g", {
         clipPath: `url(#rect-focus-ring-${chartId})`,
@@ -38,7 +38,8 @@ const HorizontalStackedBars = ({ serie }) => {
             xValue,
             yValue,
             id: serie.data[i].key,
-            name: serie.name
+            name: serie.name,
+            datum: serie.data[i]
           })
         })
       }, serie.data[i].key);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/HorizontalStackedBars.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalStackedBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n        const xValue = sequence[1] - sequence[0];\n        const yValue = getYValue(serie.data[i]);\n\n        const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 1 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale(sequence[0]) + (!isFloorStack ? 1 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);\n\n        return (\n          <g key={serie.data[i].key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n            <g fill={colorScale(serie.name)} transform={`translate(0, ${transformY})`}>\n              <Rect\n                width={width}\n                height={height}\n                x={transformX}\n                xValue={xValue}\n                yValue={yValue}\n                id={serie.data[i].key}\n                name={serie.name}\n              />\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AAGzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAgC;AAC5E,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAC3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC;AAAA,IACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AACrC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,YAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAE/E,YAAM,SAAS,eAAe,UAAU;AAExC,YAAM,aAAa,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAC9D,YAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,MAAM;AAE9E,aACE,oBAAC;AAAA,QAA0B,UAAU,wBAAwB;AAAA,QAC3D,8BAAC;AAAA,UAAE,MAAM,WAAW,MAAM,IAAI;AAAA,UAAG,WAAW,gBAAgB;AAAA,UAC1D,8BAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA,GAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB,MAAM,MAAM;AAAA,WACd;AAAA,SACF;AAAA,SAXM,MAAM,KAAK,GAAG,GAYtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\nimport { DSChartT } from '../react-desc-prop-types';\n\nexport const HorizontalStackedBars = ({ serie }: DSChartT.SerieComponentT) => {\n  const {\n    props: { groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n    chartId,\n    getYValue,\n  } = useContext(ChartContext);\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n        const xValue = sequence[1] - sequence[0];\n        const yValue = getYValue(serie.data[i]);\n\n        const width = xScale(sequence[1]) - xScale(sequence[0]) - (!isFloorStack ? 2 : 0);\n\n        const height = subGroupScale?.bandwidth();\n\n        const transformX = xScale(sequence[0]) + (!isFloorStack ? 2 : 0);\n        const transformY = subGroupScale(`stacked-data-${stackIndex}`) + yScale(yValue);\n\n        return (\n          <g key={serie.data[i].key} clipPath={`url(#rect-focus-ring-${chartId})`}>\n            <g fill={colorScale(serie.name)} transform={`translate(0, ${transformY})`}>\n              <Rect\n                width={width}\n                height={height}\n                x={transformX}\n                xValue={xValue}\n                yValue={yValue}\n                id={serie.data[i].key}\n                name={serie.name}\n                datum={serie.data[i]}\n              />\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AAGzC,MAAM,wBAAwB,CAAC,EAAE,MAAM,MAAgC;AAC5E,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAC3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC;AAAA,IACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AACrC,YAAM,SAAS,SAAS,KAAK,SAAS;AACtC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AAEtC,YAAM,QAAQ,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAE/E,YAAM,SAAS,eAAe,UAAU;AAExC,YAAM,aAAa,OAAO,SAAS,EAAE,KAAK,CAAC,eAAe,IAAI;AAC9D,YAAM,aAAa,cAAc,gBAAgB,YAAY,IAAI,OAAO,MAAM;AAE9E,aACE,oBAAC;AAAA,QAA0B,UAAU,wBAAwB;AAAA,QAC3D,8BAAC;AAAA,UAAE,MAAM,WAAW,MAAM,IAAI;AAAA,UAAG,WAAW,gBAAgB;AAAA,UAC1D,8BAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA,GAAG;AAAA,YACH;AAAA,YACA;AAAA,YACA,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB,MAAM,MAAM;AAAA,YACZ,OAAO,MAAM,KAAK;AAAA,WACpB;AAAA,SACF;AAAA,SAZM,MAAM,KAAK,GAAG,GAatB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -5,6 +5,7 @@ import { line, select } from "d3";
 import { Points } from "./Points";
 import { ChartContext } from "../ChartContext";
 import { LINE, curveStyleMap } from "../../constants";
+import { DataVizDataTestIds } from "../DataTestIds";
 const Line = ({ serie }) => {
   const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = useContext(ChartContext);
   const ref = useRef(null);
@@ -31,7 +32,8 @@ const Line = ({ serie }) => {
     transform: `translate(${xTranslate}, 0)`,
     children: [
       /* @__PURE__ */ jsx("g", {
-        ref
+        ref,
+        "data-testid": DataVizDataTestIds.LINE
       }),
       /* @__PURE__ */ jsx(Points, {
         serie

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Line.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { line, select } from 'd3';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\nimport { LINE, curveStyleMap } from '../../constants';\n\nexport const Line = ({ serie }) => {\n  const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = useContext(ChartContext);\n\n  const ref = useRef<React.SVGProps<SVGGElement> | SVGGElement>(null);\n  // const firstRender = useRef(true);\n\n  const finalYScale = useMemo(() => (serie.scale === 'y2' ? y2Scale : yScale), [serie.scale, y2Scale, yScale]);\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [serie.curveStyle],\n  );\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(getXValue(d)))\n        .y((d) => finalYScale(getYValue(d)))\n        .curve(curveStyle),\n    [curveStyle, finalYScale, getXValue, getYValue, xScale],\n  );\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const groupContent = select(ref?.current);\n\n    groupContent.selectAll('*').remove();\n    const path = groupContent\n      .append('path')\n      .datum(serie.data)\n      .attr('fill', 'none')\n      .attr('stroke', colorScale(serie.name))\n      .attr('stroke-linejoin', 'round')\n      // .attr('stroke-linecap', 'round')\n      .attr('stroke-width', 2)\n      .attr('d', lineD3);\n\n    if (serie.dashStyle) path.attr('stroke-dasharray', LINE.DASH_STYLE_VALUES[serie.dashStyle]);\n\n    // const pathLength = path.node()?.getTotalLength();\n\n    // if (firstRender?.current) {\n    //   const transitionPath = transition().ease(easeLinear).duration(800);\n\n    //   path\n    //     .attr('stroke-dashoffset', pathLength)\n    //     .attr('stroke-dasharray', pathLength)\n    //     .transition(transitionPath)\n    //     .attr('stroke-dashoffset', 0);\n\n    //   firstRender.current = false;\n    // }\n  }, [colorScale, finalYScale, getXValue, getYValue, lineD3, serie, xScale]);\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = useMemo(() => (xScale?.bandwidth?.() ?? 0) / 2, [xScale]);\n\n  return (\n    <g transform={`translate(${xTranslate}, 0)`}>\n      <g ref={ref}></g>\n\n      <Points serie={serie} />\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,SAAS,cAAc;AAC9D,SAAS,MAAM,cAAc;AAC7B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,MAAM,qBAAqB;AAE7B,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,QAAQ,QAAQ,SAAS,YAAY,WAAW,UAAU,IAAI,WAAW,YAAY;AAE7F,QAAM,MAAM,OAAkD,IAAI;AAGlE,QAAM,cAAc,QAAQ,MAAO,MAAM,UAAU,OAAO,UAAU,QAAS,CAAC,MAAM,OAAO,SAAS,MAAM,CAAC;AAE3G,QAAM,aAAa;AAAA,IACjB,MAAM,cAAc,MAAM,eAAe,cAAc,KAAK,YAAY;AAAA,IACxE,CAAC,MAAM,UAAU;AAAA,EACnB;AAEA,QAAM,SAAS;AAAA,IACb,MACE,KAAK,EACF,EAAE,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC,CAAC,EAC7B,EAAE,CAAC,MAAM,YAAY,UAAU,CAAC,CAAC,CAAC,EAClC,MAAM,UAAU;AAAA,IACrB,CAAC,YAAY,aAAa,WAAW,WAAW,MAAM;AAAA,EACxD;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAElB,UAAM,eAAe,OAAO,KAAK,OAAO;AAExC,iBAAa,UAAU,GAAG,EAAE,OAAO;AACnC,UAAM,OAAO,aACV,OAAO,MAAM,EACb,MAAM,MAAM,IAAI,EAChB,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,WAAW,MAAM,IAAI,CAAC,EACrC,KAAK,mBAAmB,OAAO,EAE/B,KAAK,gBAAgB,CAAC,EACtB,KAAK,KAAK,MAAM;AAEnB,QAAI,MAAM;AAAW,WAAK,KAAK,oBAAoB,KAAK,kBAAkB,MAAM,UAAU;AAAA,EAe5F,GAAG,CAAC,YAAY,aAAa,WAAW,WAAW,QAAQ,OAAO,MAAM,CAAC;AAIzE,QAAM,aAAa,QAAQ,OAAO,QAAQ,YAAY,KAAK,KAAK,GAAG,CAAC,MAAM,CAAC;AAE3E,SACE,qBAAC;AAAA,IAAE,WAAW,aAAa;AAAA,IACzB;AAAA,0BAAC;AAAA,QAAE;AAAA,OAAU;AAAA,MAEb,oBAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useMemo, useRef } from 'react';\nimport { line, select } from 'd3';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\nimport { LINE, curveStyleMap } from '../../constants';\nimport { DataVizDataTestIds } from '../DataTestIds';\nexport const Line = ({ serie }) => {\n  const { xScale, yScale, y2Scale, colorScale, getXValue, getYValue } = useContext(ChartContext);\n\n  const ref = useRef<SVGGElement>(null);\n  // const firstRender = useRef(true);\n\n  const finalYScale = useMemo(() => (serie.scale === 'y2' ? y2Scale : yScale), [serie.scale, y2Scale, yScale]);\n\n  const curveStyle = useMemo(\n    () => curveStyleMap[serie.curveStyle] ?? curveStyleMap[LINE.CURVE_STYLE.LINEAR],\n    [serie.curveStyle],\n  );\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(getXValue(d)))\n        .y((d) => finalYScale(getYValue(d)))\n        .curve(curveStyle),\n    [curveStyle, finalYScale, getXValue, getYValue, xScale],\n  );\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    const groupContent = select(ref?.current);\n\n    groupContent.selectAll('*').remove();\n    const path = groupContent\n      .append('path')\n      .datum(serie.data)\n      .attr('fill', 'none')\n      .attr('stroke', colorScale(serie.name))\n      .attr('stroke-linejoin', 'round')\n      // .attr('stroke-linecap', 'round')\n      .attr('stroke-width', 2)\n      .attr('d', lineD3);\n\n    if (serie.dashStyle) path.attr('stroke-dasharray', LINE.DASH_STYLE_VALUES[serie.dashStyle]);\n\n    // const pathLength = path.node()?.getTotalLength();\n\n    // if (firstRender?.current) {\n    //   const transitionPath = transition().ease(easeLinear).duration(800);\n\n    //   path\n    //     .attr('stroke-dashoffset', pathLength)\n    //     .attr('stroke-dasharray', pathLength)\n    //     .transition(transitionPath)\n    //     .attr('stroke-dashoffset', 0);\n\n    //   firstRender.current = false;\n    // }\n  }, [colorScale, finalYScale, getXValue, getYValue, lineD3, serie, xScale]);\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = useMemo(() => (xScale?.bandwidth?.() ?? 0) / 2, [xScale]);\n\n  return (\n    <g transform={`translate(${xTranslate}, 0)`}>\n      <g ref={ref} data-testid={DataVizDataTestIds.LINE} />\n\n      <Points serie={serie} />\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,SAAS,cAAc;AAC9D,SAAS,MAAM,cAAc;AAC7B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,MAAM,qBAAqB;AACpC,SAAS,0BAA0B;AAC5B,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM,EAAE,QAAQ,QAAQ,SAAS,YAAY,WAAW,UAAU,IAAI,WAAW,YAAY;AAE7F,QAAM,MAAM,OAAoB,IAAI;AAGpC,QAAM,cAAc,QAAQ,MAAO,MAAM,UAAU,OAAO,UAAU,QAAS,CAAC,MAAM,OAAO,SAAS,MAAM,CAAC;AAE3G,QAAM,aAAa;AAAA,IACjB,MAAM,cAAc,MAAM,eAAe,cAAc,KAAK,YAAY;AAAA,IACxE,CAAC,MAAM,UAAU;AAAA,EACnB;AAEA,QAAM,SAAS;AAAA,IACb,MACE,KAAK,EACF,EAAE,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC,CAAC,EAC7B,EAAE,CAAC,MAAM,YAAY,UAAU,CAAC,CAAC,CAAC,EAClC,MAAM,UAAU;AAAA,IACrB,CAAC,YAAY,aAAa,WAAW,WAAW,MAAM;AAAA,EACxD;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAElB,UAAM,eAAe,OAAO,KAAK,OAAO;AAExC,iBAAa,UAAU,GAAG,EAAE,OAAO;AACnC,UAAM,OAAO,aACV,OAAO,MAAM,EACb,MAAM,MAAM,IAAI,EAChB,KAAK,QAAQ,MAAM,EACnB,KAAK,UAAU,WAAW,MAAM,IAAI,CAAC,EACrC,KAAK,mBAAmB,OAAO,EAE/B,KAAK,gBAAgB,CAAC,EACtB,KAAK,KAAK,MAAM;AAEnB,QAAI,MAAM;AAAW,WAAK,KAAK,oBAAoB,KAAK,kBAAkB,MAAM,UAAU;AAAA,EAe5F,GAAG,CAAC,YAAY,aAAa,WAAW,WAAW,QAAQ,OAAO,MAAM,CAAC;AAIzE,QAAM,aAAa,QAAQ,OAAO,QAAQ,YAAY,KAAK,KAAK,GAAG,CAAC,MAAM,CAAC;AAE3E,SACE,qBAAC;AAAA,IAAE,WAAW,aAAa;AAAA,IACzB;AAAA,0BAAC;AAAA,QAAE;AAAA,QAAU,eAAa,mBAAmB;AAAA,OAAM;AAAA,MAEnD,oBAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
   "names": []
 }

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

@@ -1,15 +1,18 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useCallback, useMemo } from "react";
 import { ChartContext } from "../ChartContext";
 import { FOCUS_RING, SCRAPPER, LINE } from "../../constants";
 import { FocusableRegion } from "../parts/FocusableRegion";
-const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity }) => {
+import { TrendHighlight } from "../parts/TrendHighlight";
+import { DataVizDataTestIds } from "../DataTestIds";
+const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacity, datum }) => {
   const {
     activePoint,
     scrapperPosY,
     scrapperPosX,
-    props: { scrapper, TooltipRenderer }
+    setActivePoint,
+    props: { scrapper, TooltipRenderer, withTrendHighlight }
   } = useContext(ChartContext);
   const isFocused = useMemo(() => {
     if (activePoint?.key === id) {
@@ -89,19 +92,38 @@ const Point = ({ x, y, xValue, yValue, name, pointStyle, pointRadius, id, opacit
       ]
     });
   }, [id, isFocused, opacity, pointRadius, pointStyle]);
-  return /* @__PURE__ */ jsxs("g", {
+  const handleMouseEnter = useCallback(() => {
+    if (!scrapper)
+      setActivePoint(datum);
+  }, [datum, scrapper, setActivePoint]);
+  const handleOnMouseLeave = useCallback(() => {
+    if (!scrapper)
+      setActivePoint(null);
+  }, [scrapper, setActivePoint]);
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      point,
-      activePoint?.key === id && TooltipRenderer ? /* @__PURE__ */ jsx(FocusableRegion, {
-        id,
-        width: (pointRadius ?? 3) * 2,
-        height: (pointRadius ?? 3) * 2,
-        pointRadius,
-        style: { transform: `translate(-${pointRadius}px, -${pointRadius}px)` },
-        content: /* @__PURE__ */ jsx(TooltipRenderer, {
-          data: [{ name, yValue, xValue }]
-        })
-      }) : ""
+      /* @__PURE__ */ jsxs("g", {
+        "data-testid": DataVizDataTestIds.POINT,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        transform: `translate(${x},${y})`,
+        children: [
+          point,
+          activePoint?.key === id && TooltipRenderer ? /* @__PURE__ */ jsx(FocusableRegion, {
+            id,
+            width: (pointRadius ?? 3) * 4,
+            height: (pointRadius ?? 3) * 4,
+            pointRadius,
+            style: { transform: `translate(-${pointRadius}px, -${pointRadius}px)` },
+            content: /* @__PURE__ */ jsx(TooltipRenderer, {
+              data: [{ name, yValue, xValue }]
+            })
+          }) : null
+        ]
+      }),
+      isFocused && withTrendHighlight ? /* @__PURE__ */ jsx(TrendHighlight, {
+        currentDatum: datum
+      }) : null
     ]
   });
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Point.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -17,7 +17,7 @@ const Points = ({ serie }) => {
   } = useContext(ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
   const opacity = useMemo(() => types === "scatter" ? 0.8 : 1, [serie.type]);
-  const render = useMemo(
+  return useMemo(
     () => /* @__PURE__ */ jsx("g", {
       fill: colorScale(serie.name),
       children: serie.data.map((point, i) => {
@@ -28,25 +28,22 @@ const Points = ({ serie }) => {
         const y = getYValue(point);
         const xPosition = xScale(x);
         const yPosition = finalYScale(y + deltaY);
-        return /* @__PURE__ */ jsx("g", {
-          transform: `translate(${xPosition},${yPosition})`,
-          children: /* @__PURE__ */ jsx(Point, {
-            pointRadius,
-            id: point.key,
-            opacity,
-            x: xPosition + (xScale.bandwidth?.() ?? 0) / 2,
-            y: yPosition,
-            xValue: x,
-            yValue: y,
-            pointStyle,
-            name: serie.name
-          })
+        return /* @__PURE__ */ jsx(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;
 };
 export {
   Points

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Points.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;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,IAAI,WAAW,YAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,UAAU,QAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,QAAM,SAAS;AAAA,IACb,MACE,oBAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,cAAM,EAAE,aAAa,WAAW,IAAI;AAEpC,cAAM,yBAAyB,eAAe,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,oBAAC;AAAA,UAAyB,WAAW,aAAa,aAAa;AAAA,UAC7D,8BAAC;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": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;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,IAAI,WAAW,YAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,UAAU,QAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,MAAM,WAAW,MAAM,IAAI;AAAA,MAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,cAAM,EAAE,aAAa,WAAW,IAAI;AAEpC,cAAM,yBAAyB,eAAe,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,oBAAC;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/esm/graphs/Chart/series/Rect.js

@@ -1,10 +1,11 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useContext } from "react";
+import { useMemo, useContext, useCallback } from "react";
 import { ChartContext } from "../ChartContext";
 import { FOCUS_RING } from "../../constants";
 import { FocusableRegion } from "../parts/FocusableRegion";
-const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue }) => {
+import { DataVizDataTestIds } from "../DataTestIds";
+const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue, datum }) => {
   const {
     activePoint,
     isGrabbed,
@@ -13,7 +14,8 @@ const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id,
     innerWidth,
     yScale,
     innerHeight,
-    props: { TooltipRenderer }
+    setActivePoint,
+    props: { TooltipRenderer, scrapper }
   } = useContext(ChartContext);
   const isFocused = activePoint?.key === id;
   const animation = useMemo(() => {
@@ -55,12 +57,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 = useCallback(() => {
+    if (!scrapper)
+      setActivePoint(datum);
+  }, [datum, scrapper, setActivePoint]);
+  const handleOnMouseLeave = useCallback(() => {
+    if (!scrapper)
+      setActivePoint(null);
+  }, [scrapper, setActivePoint]);
   return useMemo(
     () => /* @__PURE__ */ jsx("g", {
       clipPath: clipPathSign,
       children: /* @__PURE__ */ jsxs("g", {
         id: isFocused ? `data-focused-${chartId}` : "",
         transform,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleOnMouseLeave,
+        "data-testid": DataVizDataTestIds.BAR,
         children: [
           isFocused ? /* @__PURE__ */ jsx("rect", {
             x: (isHorizontal ? x : 0) - FOCUS_RING.STROKE_WIDTH,
@@ -103,6 +116,8 @@ const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id,
       y,
       width,
       height,
+      handleMouseEnter,
+      handleOnMouseLeave,
       activePoint?.key,
       id,
       TooltipRenderer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Rect.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;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,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,aAAa,QAAQ;AAEvC,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI;AAAW,aAAO;AACtB,QAAI;AAAc,aAAO,oBAAC;AAAA,QAAQ,eAAc;AAAA,QAAI,MAAM,CAAC;AAAA,QAAY,IAAI;AAAA,QAAG,KAAI;AAAA,QAAO,MAAK;AAAA,OAAO;AACrG,QAAI;AAAY,aAAO,oBAAC;AAAA,QAAQ,eAAc;AAAA,QAAI,MAAM,OAAO,CAAC;AAAA,QAAG,IAAI,CAAC;AAAA,QAAG,KAAI;AAAA,QAAQ,MAAK;AAAA,OAAO;AACnG,WAAO,oBAAC;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,eAAe,QAAQ,MAAM;AAEjC,QAAI;AAAc,aAAO;AACzB,QAAI;AAAY,aAAO,uBAAuB;AAC9C,WAAO,uBAAuB;AAAA,EAChC,GAAG,CAAC,SAAS,cAAc,UAAU,CAAC;AAEtC,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI;AAAc,aAAO;AACzB,WAAO,2BAA2B,CAAC;AAAA,EACrC,GAAG,CAAC,QAAQ,YAAY,CAAC;AACzB,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MAAE,UAAU;AAAA,MACX,+BAAC;AAAA,QAAE,IAAI,YAAY,gBAAgB,YAAY;AAAA,QAAI;AAAA,QAChD;AAAA,sBACC,oBAAC;AAAA,YACC,IAAI,eAAe,IAAI,KAAK,WAAW;AAAA,YACvC,IAAI,CAAC,eAAe,CAAC,IAAI,KAAK,WAAW;AAAA,YACzC,OAAO,QAAQ,WAAW;AAAA,YAC1B,QAAQ,SAAS,WAAW;AAAA,YAC5B,MAAK;AAAA,YACL,IAAG;AAAA,YACH,IAAG;AAAA,YACH,QAAQ,WAAW;AAAA,YACnB,aAAa,WAAW;AAAA,WACzB,IACC;AAAA,UACJ,oBAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,GAAG,CAAC;AAAA,YAAG;AAAA,WAE3C;AAAA,UACC,aAAa,QAAQ,MAAM,kBAC1B,oBAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,oBAAC;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "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",
   "names": []
 }

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

@@ -23,11 +23,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__ */ jsx("g", {
         fill: colorScale(serie.name),
         transform: `translate(${transformX},0)`,
@@ -38,7 +38,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/esm/graphs/Chart/series/StackedBar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/StackedBar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;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,IAAI,WAAW,YAAY;AAE3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC;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,oBAAC;AAAA,QAA0B,MAAM,WAAW,MAAM,IAAI;AAAA,QAAG,WAAW,aAAa;AAAA,QAC/E,8BAAC;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": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;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,IAAI,WAAW,YAAY;AAE3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC;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,oBAAC;AAAA,QAA0B,MAAM,WAAW,MAAM,IAAI;AAAA,QAAG,WAAW,aAAa;AAAA,QAC/E,8BAAC;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/esm/graphs/Chart/styles.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAmB;AAC5B,SAAS,oBAAoB;AAMtB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlD,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM9B,CAAC,EAAE,UAAU,MAAO,YAAY,SAAS,aAAa,cAAc,cAAc;AAAA;AAAA;AAAA,MAGlF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,aAAa,cAAc,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQpF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,aAAa,cAAc,cAAc;AAAA;AAAA;AAInF,MAAM,kBAAkB,OAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU7B,MAAM,uBAAuB,OAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,aAAa,OAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,aAAa,OAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAmB;AAC5B,SAAS,oBAAoB;AAMtB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASlD,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAO9B,CAAC,EAAE,UAAU,MAAO,YAAY,SAAS,aAAa,cAAc,cAAc;AAAA;AAAA;AAAA,MAGlF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,aAAa,cAAc,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQpF,CAAC,EAAE,UAAU,MAAO,YAAY,WAAW,aAAa,cAAc,cAAc;AAAA;AAAA;AAInF,MAAM,kBAAkB,OAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU7B,MAAM,uBAAuB,OAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,aAAa,OAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,aAAa,OAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dataviz",
-  "version": "3.10.3",
+  "version": "3.11.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - DataViz",
   "files": [
@@ -35,13 +35,13 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-grid": "3.10.3",
-    "@elliemae/ds-icon": "3.10.3",
-    "@elliemae/ds-icons": "3.10.3",
-    "@elliemae/ds-popperjs": "3.10.3",
-    "@elliemae/ds-system": "3.10.3",
-    "@elliemae/ds-tooltip": "3.10.3",
-    "@elliemae/ds-utilities": "3.10.3",
+    "@elliemae/ds-grid": "3.11.0-next.2",
+    "@elliemae/ds-icon": "3.11.0-next.2",
+    "@elliemae/ds-icons": "3.11.0-next.2",
+    "@elliemae/ds-popperjs": "3.11.0-next.2",
+    "@elliemae/ds-system": "3.11.0-next.2",
+    "@elliemae/ds-tooltip": "3.11.0-next.2",
+    "@elliemae/ds-utilities": "3.11.0-next.2",
     "d3": "~7.4.4"
   },
   "devDependencies": {