@elliemae/ds-dataviz 3.8.1 → 3.9.0-next.1

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

@@ -1,17 +1,19 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo, useContext } from "react";
 import { Point } from "./Point";
 import { ChartContext } from "../ChartContext";
-import { FocusableRegion } from "../parts/FocusableRegion";
+import { getStackedData } from "../helpers";
 const Points = ({ serie }) => {
   const {
     colorScale,
     xScale,
     y2Scale,
     yScale,
+    getXValue,
+    getYValue,
     stackedData,
-    props: { xAxis, data, TooltipRenderer, types }
+    props: { types }
   } = useContext(ChartContext);
   const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
   const opacity = useMemo(() => types === "scatter" ? 0.8 : 1, [serie.type]);
@@ -19,36 +21,30 @@ const Points = ({ serie }) => {
     () => /* @__PURE__ */ jsx("g", {
       fill: colorScale(serie.name),
       children: serie.data.map((point, i) => {
-        const { pointRadius } = serie;
-        const x = point.value.x ?? xAxis?.cols?.[point.position];
-        const y = point.value.y ?? point.value;
+        const { pointRadius, pointStyle } = serie;
+        const serieWithStackedValues = getStackedData(stackedData, serie);
+        const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;
+        const x = getXValue(point);
+        const y = getYValue(point);
         const xPosition = xScale(x);
-        const yPosition = finalYScale(y);
-        return /* @__PURE__ */ jsxs("g", {
+        const yPosition = finalYScale(y + deltaY);
+        return /* @__PURE__ */ jsx("g", {
           transform: `translate(${xPosition},${yPosition})`,
-          children: [
-            /* @__PURE__ */ jsx(Point, {
-              pointRadius,
-              id: point.key,
-              opacity,
-              x: xPosition,
-              y: yPosition
-            }),
-            TooltipRenderer && /* @__PURE__ */ jsx(FocusableRegion, {
-              id: point.key,
-              width: pointRadius * 2,
-              height: pointRadius * 2,
-              pointRadius,
-              style: { transform: `translate(-${pointRadius}px, -${pointRadius}px)` },
-              content: /* @__PURE__ */ jsx(TooltipRenderer, {
-                data: [{ name: serie.name, yValue: y, xValue: x }]
-              })
-            })
-          ]
+          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
+          })
         }, `${point.key}-p`);
       })
     }),
-    [TooltipRenderer, colorScale, finalYScale, opacity, serie, xAxis?.cols, xScale]
+    [colorScale, finalYScale, getXValue, getYValue, opacity, serie, stackedData, xScale]
   );
   return render;
 };

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';\n// import { getStackedData } from '../helpers';\nimport { FocusableRegion } from '../parts/FocusableRegion';\n\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    stackedData,\n    props: { xAxis, data, TooltipRenderer, 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 } = serie;\n          // const serieWithStackedValues = getStackedData(stackedData, serie);\n          // const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n          const x = point.value.x ?? xAxis?.cols?.[point.position];\n          const y = point.value.y ?? point.value;\n          const xPosition = xScale(x);\n          // const yPosition = finalYScale(y + deltaY);\n          const yPosition = finalYScale(y);\n\n          return (\n            <g\n              key={`${point.key}-p`}\n              transform={`translate(${xPosition},${yPosition})`}\n              // onMouseEnter={() => setActiveSerie(serie.key)}\n              // onMouseLeave={() => setActiveSerie('')}\n            >\n              <Point pointRadius={pointRadius} id={point.key} opacity={opacity} x={xPosition} y={yPosition} />\n              {TooltipRenderer && (\n                <FocusableRegion\n                  id={point.key}\n                  width={pointRadius * 2}\n                  height={pointRadius * 2}\n                  pointRadius={pointRadius}\n                  style={{ transform: `translate(-${pointRadius}px, -${pointRadius}px)` }}\n                  content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n                />\n              )}\n            </g>\n          );\n        })}\n      </g>\n    ),\n    [TooltipRenderer, colorScale, finalYScale, opacity, serie, xAxis?.cols, xScale],\n  );\n  return render;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAE7B,SAAS,uBAAuB;AAEzB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM,iBAAiB,MAAM;AAAA,EAC/C,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,YAAY,IAAI;AAGxB,cAAM,IAAI,MAAM,MAAM,KAAK,OAAO,OAAO,MAAM;AAC/C,cAAM,IAAI,MAAM,MAAM,KAAK,MAAM;AACjC,cAAM,YAAY,OAAO,CAAC;AAE1B,cAAM,YAAY,YAAY,CAAC;AAE/B,eACE,qBAAC;AAAA,UAEC,WAAW,aAAa,aAAa;AAAA,UAIrC;AAAA,gCAAC;AAAA,cAAM;AAAA,cAA0B,IAAI,MAAM;AAAA,cAAK;AAAA,cAAkB,GAAG;AAAA,cAAW,GAAG;AAAA,aAAW;AAAA,YAC7F,mBACC,oBAAC;AAAA,cACC,IAAI,MAAM;AAAA,cACV,OAAO,cAAc;AAAA,cACrB,QAAQ,cAAc;AAAA,cACtB;AAAA,cACA,OAAO,EAAE,WAAW,cAAc,mBAAmB,iBAAiB;AAAA,cACtE,SAAS,oBAAC;AAAA,gBAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,eAAG;AAAA,aAChF;AAAA;AAAA,WAdG,GAAG,MAAM,OAgBhB;AAAA,MAEJ,CAAC;AAAA,KACH;AAAA,IAEF,CAAC,iBAAiB,YAAY,aAAa,SAAS,OAAO,OAAO,MAAM,MAAM;AAAA,EAChF;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  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;",
   "names": []
 }

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

@@ -1,18 +1,115 @@
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useContext } from "react";
-import { StyledMark } from "../styles";
 import { ChartContext } from "../ChartContext";
-const Rect = ({ width, height, id }) => {
-  const { activePoint } = useContext(ChartContext);
-  const isFocused = activePoint === id;
+import { FOCUS_RING } from "../../constants";
+import { FocusableRegion } from "../parts/FocusableRegion";
+const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue }) => {
+  const {
+    activePoint,
+    isGrabbed,
+    chartId,
+    isHorizontal,
+    innerWidth,
+    yScale,
+    innerHeight,
+    props: { TooltipRenderer }
+  } = useContext(ChartContext);
+  const isFocused = activePoint?.key === id;
+  const animation = useMemo(() => {
+    if (isGrabbed)
+      return null;
+    if (isHorizontal)
+      return /* @__PURE__ */ jsx("animate", {
+        attributeName: "x",
+        from: -innerWidth,
+        to: x,
+        dur: "0.4s",
+        fill: "both"
+      });
+    if (isNegative)
+      return /* @__PURE__ */ jsx("animate", {
+        attributeName: "y",
+        from: yScale(0),
+        to: -y,
+        dur: "0.40s",
+        fill: "both"
+      });
+    return /* @__PURE__ */ jsx("animate", {
+      attributeName: "y",
+      from: -innerHeight - y,
+      to: -y,
+      dur: "0.40s",
+      fill: "both"
+    });
+  }, [innerHeight, innerWidth, isGrabbed, isHorizontal, isNegative, x, y, yScale]);
+  const clipPathSign = useMemo(() => {
+    if (isHorizontal)
+      return "";
+    if (isNegative)
+      return `url(#rects-negative-${chartId})`;
+    return `url(#rects-positive-${chartId})`;
+  }, [chartId, isHorizontal, isNegative]);
+  const transform = useMemo(() => {
+    if (isHorizontal)
+      return ``;
+    return `scale(1,-1) translate(0,${-height})`;
+  }, [height, isHorizontal]);
   return useMemo(
-    () => /* @__PURE__ */ jsx(StyledMark, {
+    () => /* @__PURE__ */ jsx("g", {
+      clipPath: clipPathSign,
+      children: /* @__PURE__ */ jsxs("g", {
+        id: isFocused ? `data-focused-${chartId}` : "",
+        transform,
+        children: [
+          isFocused ? /* @__PURE__ */ jsx("rect", {
+            x: (isHorizontal ? x : 0) - FOCUS_RING.STROKE_WIDTH,
+            y: (!isHorizontal ? -y : 0) - FOCUS_RING.STROKE_WIDTH,
+            width: width + FOCUS_RING.OFFSET,
+            height: height + FOCUS_RING.OFFSET,
+            fill: "none",
+            rx: "1",
+            ry: "1",
+            stroke: FOCUS_RING.COLOR,
+            strokeWidth: FOCUS_RING.STROKE_WIDTH
+          }) : null,
+          /* @__PURE__ */ jsx("rect", {
+            width,
+            height,
+            y: -y,
+            x
+          }),
+          activePoint?.key === id && TooltipRenderer ? /* @__PURE__ */ jsx(FocusableRegion, {
+            id,
+            y,
+            x,
+            width,
+            height,
+            transform,
+            content: /* @__PURE__ */ jsx(TooltipRenderer, {
+              data: [{ name, yValue, xValue }]
+            })
+          }) : ""
+        ]
+      })
+    }),
+    [
+      clipPathSign,
+      isFocused,
+      chartId,
+      transform,
+      isHorizontal,
+      x,
+      y,
       width,
       height,
-      isFocused
-    }),
-    [height, isFocused, width]
+      activePoint?.key,
+      id,
+      TooltipRenderer,
+      name,
+      yValue,
+      xValue
+    ]
   );
 };
 export {

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 { StyledMark } from '../styles';\nimport { ChartContext } from '../ChartContext';\nexport const Rect = ({ width, height, id }) => {\n  const { activePoint } = useContext(ChartContext);\n\n  const isFocused = activePoint === id;\n\n  return useMemo(\n    () => <StyledMark width={width} height={height} isFocused={isFocused}></StyledMark>,\n    [height, isFocused, width],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AACtB,MAAM,OAAO,CAAC,EAAE,OAAO,QAAQ,GAAG,MAAM;AAC7C,QAAM,EAAE,YAAY,IAAI,WAAW,YAAY;AAE/C,QAAM,YAAY,gBAAgB;AAElC,SAAO;AAAA,IACL,MAAM,oBAAC;AAAA,MAAW;AAAA,MAAc;AAAA,MAAgB;AAAA,KAAsB;AAAA,IACtE,CAAC,QAAQ,WAAW,KAAK;AAAA,EAC3B;AACF;",
+  "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;",
   "names": []
 }

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

@@ -1,51 +1,44 @@
 import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { Rect } from "./Rect";
 import { ChartContext } from "../ChartContext";
 import { getStackedData, getStackedIndex } from "../helpers";
-import { FocusableRegion } from "../parts/FocusableRegion";
 const StackedBar = ({ serie }) => {
   const {
-    props: { xAxis, yAxis, groups, TooltipRenderer },
+    props: { groups },
     xScale,
     yScale,
     stackedData,
     subGroupScale,
-    colorScale
+    colorScale,
+    chartId,
+    getXValue
   } = useContext(ChartContext);
-  const isHorizontal = !!yScale.bandwidth;
   const serieWithStackedValues = getStackedData(stackedData, serie);
   const stackIndex = getStackedIndex(groups, serie.name);
   return /* @__PURE__ */ jsx("g", {
+    clipPath: `url(#rect-focus-ring-${chartId})`,
     children: serieWithStackedValues.map((sequence, i) => {
-      const xValue = isHorizontal ? sequence[1] - sequence[0] : xAxis.cols[serie.data[i].position];
-      const yValue = isHorizontal ? yAxis.cols[serie.data[i].position] : sequence[1] - sequence[0];
-      const width = isHorizontal ? xScale(sequence[1]) - xScale(sequence[0]) : subGroupScale?.bandwidth();
-      const height = isHorizontal ? subGroupScale?.bandwidth() : yScale(sequence[0]) - yScale(sequence[1]);
-      const transformX = isHorizontal ? xScale(sequence[0]) : xScale(xAxis?.cols?.[i] ?? i) + subGroupScale(`stacked-data-${stackIndex}`);
-      const transformY = isHorizontal ? subGroupScale(`stacked-data-${stackIndex}`) + yScale(yAxis?.cols?.[i]) : yScale(sequence[1]);
-      return /* @__PURE__ */ jsxs("g", {
+      const isFloorStack = sequence[0] === 0;
+      const xValue = getXValue(serie.data[i]);
+      const yValue = sequence[0] - sequence[1];
+      const width = subGroupScale?.bandwidth();
+      const height = yScale(sequence[0]) - yScale(sequence[1]) - (!isFloorStack ? 1 : 0);
+      const transformX = xScale(xValue) + subGroupScale(`stacked-data-${stackIndex}`);
+      const transformY = yScale(sequence[1]);
+      return /* @__PURE__ */ jsx("g", {
         fill: colorScale(serie.name),
-        transform: `translate(${transformX}, ${transformY})`,
-        children: [
-          /* @__PURE__ */ jsx(Rect, {
-            width,
-            height,
-            x: serie.data[i].position,
-            y: sequence[1],
-            id: serie.data[i].key,
-            name: serie.name
-          }),
-          TooltipRenderer && /* @__PURE__ */ jsx(FocusableRegion, {
-            id: serie.data[i].key,
-            width,
-            height,
-            content: /* @__PURE__ */ jsx(TooltipRenderer, {
-              data: [{ name: serie.name, yValue, xValue }]
-            })
-          })
-        ]
+        transform: `translate(${transformX},0)`,
+        children: /* @__PURE__ */ jsx(Rect, {
+          width,
+          height,
+          xValue,
+          yValue,
+          y: transformY,
+          id: serie.data[i].key,
+          name: serie.name
+        })
       }, 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", "import React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\nimport { FocusableRegion } from '../parts/FocusableRegion';\n\nexport const StackedBar = ({ serie }) => {\n  const {\n    props: { xAxis, yAxis, groups, TooltipRenderer },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n  } = useContext(ChartContext);\n\n  const isHorizontal = !!(yScale as ScaleBand<string>).bandwidth;\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const xValue = isHorizontal ? sequence[1] - sequence[0] : xAxis.cols[serie.data[i].position];\n        const yValue = isHorizontal ? yAxis.cols[serie.data[i].position] : sequence[1] - sequence[0];\n        const width = isHorizontal ? xScale(sequence[1]) - xScale(sequence[0]) : subGroupScale?.bandwidth();\n        const height = isHorizontal ? subGroupScale?.bandwidth() : yScale(sequence[0]) - yScale(sequence[1]);\n\n        const transformX = isHorizontal\n          ? xScale(sequence[0])\n          : xScale(xAxis?.cols?.[i] ?? i) + subGroupScale(`stacked-data-${stackIndex}`);\n        const transformY = isHorizontal\n          ? subGroupScale(`stacked-data-${stackIndex}`) + yScale(yAxis?.cols?.[i])\n          : yScale(sequence[1]);\n\n        return (\n          <g\n            key={serie.data[i].key}\n            fill={colorScale(serie.name)}\n            transform={`translate(${transformX}, ${transformY})`}\n          >\n            <Rect\n              width={width}\n              height={height}\n              x={serie.data[i].position}\n              y={sequence[1]}\n              id={serie.data[i].key}\n              name={serie.name}\n            />\n            {TooltipRenderer && (\n              <FocusableRegion\n                id={serie.data[i].key}\n                width={width}\n                height={height}\n                content={<TooltipRenderer data={[{ name: serie.name, yValue: yValue, xValue: xValue }]} />}\n              />\n            )}\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,uBAAuB;AAEzB,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO,QAAQ,gBAAgB;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,eAAe,CAAC,CAAE,OAA6B;AACrD,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC;AAAA,IACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,SAAS,eAAe,SAAS,KAAK,SAAS,KAAK,MAAM,KAAK,MAAM,KAAK,GAAG;AACnF,YAAM,SAAS,eAAe,MAAM,KAAK,MAAM,KAAK,GAAG,YAAY,SAAS,KAAK,SAAS;AAC1F,YAAM,QAAQ,eAAe,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE,IAAI,eAAe,UAAU;AAClG,YAAM,SAAS,eAAe,eAAe,UAAU,IAAI,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE;AAEnG,YAAM,aAAa,eACf,OAAO,SAAS,EAAE,IAClB,OAAO,OAAO,OAAO,MAAM,CAAC,IAAI,cAAc,gBAAgB,YAAY;AAC9E,YAAM,aAAa,eACf,cAAc,gBAAgB,YAAY,IAAI,OAAO,OAAO,OAAO,EAAE,IACrE,OAAO,SAAS,EAAE;AAEtB,aACE,qBAAC;AAAA,QAEC,MAAM,WAAW,MAAM,IAAI;AAAA,QAC3B,WAAW,aAAa,eAAe;AAAA,QAEvC;AAAA,8BAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA,GAAG,MAAM,KAAK,GAAG;AAAA,YACjB,GAAG,SAAS;AAAA,YACZ,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB,MAAM,MAAM;AAAA,WACd;AAAA,UACC,mBACC,oBAAC;AAAA,YACC,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB;AAAA,YACA;AAAA,YACA,SAAS,oBAAC;AAAA,cAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAgB,OAAe,CAAC;AAAA,aAAG;AAAA,WAC1F;AAAA;AAAA,SAlBG,MAAM,KAAK,GAAG,GAoBrB;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      {serieWithStackedValues.map((sequence, i) => {\n        const isFloorStack = sequence[0] === 0;\n\n        const xValue = getXValue(serie.data[i]);\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,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,eAAe,SAAS,OAAO;AAErC,YAAM,SAAS,UAAU,MAAM,KAAK,EAAE;AACtC,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;",
   "names": []
 }

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

@@ -5,5 +5,4 @@ export * from "./StackedBar";
 export * from "./Points";
 export * from "./Line";
 export * from "./Area";
-export * from "./Pie";
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Rect';\nexport * from './Bars';\nexport * from './StackedBar';\nexport * from './Points';\nexport * from './Line';\nexport * from './Area';\nexport * from './Pie';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Rect';\nexport * from './Bars';\nexport * from './StackedBar';\nexport * from './Points';\nexport * from './Line';\nexport * from './Area';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }

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

@@ -10,6 +10,10 @@ const StyledSVGWrapper = styled.div`
   }
 
   cursor: ${({ isGrabbed }) => isGrabbed ? "grabbing" : "default"};
+
+  .domain {
+    stroke-width: 2px;
+  }
 `;
 const StyledAxis = styled("g")`
   text {
@@ -43,9 +47,6 @@ const borderCircle = css`
   stroke: #c64252;
   stroke-width: 2;
 `;
-const StyledMark = styled("rect")`
-  ${({ isFocused }) => isFocused ? borderCircle : ""};
-`;
 const StyleFocusableRegion = styled("div")`
   width: ${({ s }) => s * 2}px;
   height: ${({ s }) => s * 2}px;
@@ -63,23 +64,9 @@ const StyledArea = styled("path")`
   stroke-linejoin: round;
   opacity: 0.8;
 `;
-const StyledPoint = styled("circle")`
-  //opacity: ${({ isFocused }) => isFocused ? 1 : 0};
-  ${({ isFocused }) => isFocused ? borderCircle : ""};
-`;
 const StyledTooltipContainer = styled.div`
-  text-align: center;
-  min-width: ${({ theme }) => theme.space.l};
-  max-width: 250px;
-  min-height: 30px;
-  display: grid;
-  align-items: center;
-  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};
-  position: relative;
+  max-width: 350px;
   background-color: white;
-  border-radius: 2px;
-  font-size: 13px;
-  color: ${({ theme }) => theme.colors.neutral[600]};
 `;
 const StyledMouseOverDetectionBox = styled.div`
   position: absolute;
@@ -96,9 +83,7 @@ export {
   StyledAxisLabel,
   StyledGrid,
   StyledLine,
-  StyledMark,
   StyledMouseOverDetectionBox,
-  StyledPoint,
   StyledSVGWrapper,
   StyledTooltipContainer
 };

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';\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\nexport const StyledAxis = styled('g')`\n  text {\n    fill: #635f5d;\n  }\n\n  text.axis-label {\n    /* font-size: 2.5em; */\n  }\n\n  .tick text {\n    ${({ color }) => (color ? `fill: ${COLOR_PALLET[color] ?? color}` : '')}\n  }\n  .tick line {\n    ${({ color }) => (color ? `stroke: ${COLOR_PALLET[color] ?? color}` : '')}\n  }\n  line {\n    stroke: #c0c0bb;\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\nconst borderCircle = css`\n  stroke: #c64252;\n  stroke-width: 2;\n`;\nexport const StyledMark = styled('rect')<{ isFocused: boolean }>`\n  ${({ isFocused }) => (isFocused ? borderCircle : '')};\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.8;\n`;\n\nexport const StyledPoint = styled('circle')<{ isFocused: boolean }>`\n  //opacity: ${({ isFocused }) => (isFocused ? 1 : 0)};\n  ${({ isFocused }) => (isFocused ? borderCircle : '')};\n`;\n\nexport const StyledTooltipContainer = styled.div`\n  text-align: center;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.neutral[600]};\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,QAAQ,WAAW;AAC5B,SAAS,oBAAoB;AACtB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAGlD,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAU9B,CAAC,EAAE,MAAM,MAAO,QAAQ,SAAS,aAAa,UAAU,UAAU;AAAA;AAAA;AAAA,MAGlE,CAAC,EAAE,MAAM,MAAO,QAAQ,WAAW,aAAa,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnE,MAAM,kBAAkB,OAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,eAAe;AAAA;AAAA;AAAA;AAId,MAAM,aAAa,OAAO,MAAM;AAAA,IACnC,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA;AAG5C,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,cAAc,OAAO,QAAQ;AAAA,eAC3B,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI;AAAA,IAC/C,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA;AAG5C,MAAM,yBAAyB,OAAO;AAAA;AAAA,eAE9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,aAK7B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,QAAQ,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,WAKpD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGxC,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';\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: 2px;\n  }\n`;\n\nexport const StyledAxis = styled('g')`\n  text {\n    fill: #635f5d;\n  }\n\n  text.axis-label {\n    /* font-size: 2.5em; */\n  }\n\n  .tick text {\n    ${({ color }) => (color ? `fill: ${COLOR_PALLET[color] ?? color}` : '')}\n  }\n  .tick line {\n    ${({ color }) => (color ? `stroke: ${COLOR_PALLET[color] ?? color}` : '')}\n  }\n  line {\n    stroke: #c0c0bb;\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\nconst borderCircle = css`\n  stroke: #c64252;\n  stroke-width: 2;\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.8;\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,QAAQ,WAAW;AAC5B,SAAS,oBAAoB;AACtB,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;AAAA;AAAA;AAAA;AAAA,MAU9B,CAAC,EAAE,MAAM,MAAO,QAAQ,SAAS,aAAa,UAAU,UAAU;AAAA;AAAA;AAAA,MAGlE,CAAC,EAAE,MAAM,MAAO,QAAQ,WAAW,aAAa,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnE,MAAM,kBAAkB,OAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,eAAe;AAAA;AAAA;AAAA;AAKd,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/dist/esm/graphs/constants.js

@@ -5,7 +5,27 @@ const TICK_FORMATS = {
   KSEPARATOR: (v) => format(",")(v),
   TIME: (userFormat) => (v) => timeFormat(userFormat)(v)
 };
+const FOCUS_RING = {
+  COLOR: "#335cad",
+  STROKE_WIDTH: 2,
+  OFFSET: 4
+};
+const SCRAPPER = {
+  TYPE_HORIZONTAL: "horizontal",
+  TYPE_VERTICAL: "vertical"
+};
+const LINE = {
+  POINT_STYLE: {
+    CIRCLE: "CIRCLE",
+    SQUARE: "SQUARE",
+    DIAMOND: "DIAMOND"
+  },
+  DEFAULT_POINT_RADIUS: 4
+};
 export {
+  FOCUS_RING,
+  LINE,
+  SCRAPPER,
   TICK_FORMATS
 };
 //# sourceMappingURL=constants.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/graphs/constants.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { format, timeFormat } from 'd3';\n\nexport const TICK_FORMATS = {\n  MILLIONS: (v) => format('.2s')(v).replace('G', 'B'),\n  KSEPARATOR: (v) => format(',')(v),\n  TIME: (userFormat: string) => (v) => timeFormat(userFormat)(v),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,kBAAkB;AAE5B,MAAM,eAAe;AAAA,EAC1B,UAAU,CAAC,MAAM,OAAO,KAAK,EAAE,CAAC,EAAE,QAAQ,KAAK,GAAG;AAAA,EAClD,YAAY,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAAA,EAChC,MAAM,CAAC,eAAuB,CAAC,MAAM,WAAW,UAAU,EAAE,CAAC;AAC/D;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { format, timeFormat } from 'd3';\n\nexport const TICK_FORMATS = {\n  MILLIONS: (v) => format('.2s')(v).replace('G', 'B'),\n  KSEPARATOR: (v) => format(',')(v),\n  TIME: (userFormat: string) => (v) => timeFormat(userFormat)(v),\n};\n\nexport const FOCUS_RING = {\n  COLOR: '#335cad',\n  STROKE_WIDTH: 2,\n  OFFSET: 4,\n};\n\nexport const SCRAPPER = {\n  TYPE_HORIZONTAL: 'horizontal',\n  TYPE_VERTICAL: 'vertical',\n};\n\nexport const LINE = {\n  POINT_STYLE: {\n    CIRCLE: 'CIRCLE',\n    SQUARE: 'SQUARE',\n    DIAMOND: 'DIAMOND',\n  },\n  DEFAULT_POINT_RADIUS: 4,\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,kBAAkB;AAE5B,MAAM,eAAe;AAAA,EAC1B,UAAU,CAAC,MAAM,OAAO,KAAK,EAAE,CAAC,EAAE,QAAQ,KAAK,GAAG;AAAA,EAClD,YAAY,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAAA,EAChC,MAAM,CAAC,eAAuB,CAAC,MAAM,WAAW,UAAU,EAAE,CAAC;AAC/D;AAEO,MAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AACV;AAEO,MAAM,WAAW;AAAA,EACtB,iBAAiB;AAAA,EACjB,eAAe;AACjB;AAEO,MAAM,OAAO;AAAA,EAClB,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,sBAAsB;AACxB;",
   "names": []
 }

package/package.json

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

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../src/graphs/Chart/series/Pie.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { pie } from 'd3';\nimport { PieChartContext } from '../ChartContext';\n\nexport const Pie = () => {\n  const {\n    innerHeight,\n    innerWidth,\n    colorScale,\n    props: { data },\n  } = useContext(PieChartContext);\n\n  const pieData = data.reduce((acc, curr) => (acc[curr.name] = curr.value), {});\n\n  return <g transform={`translate(${innerWidth / 2},${innerHeight / 2}`}></g>;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAElC,0BAAgC;AAEzB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,QAAI,yBAAW,mCAAe;AAE9B,QAAM,UAAU,KAAK,OAAO,CAAC,KAAK,SAAU,IAAI,KAAK,QAAQ,KAAK,OAAQ,CAAC,CAAC;AAE5E,SAAO,4CAAC;AAAA,IAAE,WAAW,aAAa,aAAa,KAAK,cAAc;AAAA,GAAK;AACzE;",
-  "names": []
-}

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

@@ -1,20 +0,0 @@
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
-import { PieChartContext } from "../ChartContext";
-const Pie = () => {
-  const {
-    innerHeight,
-    innerWidth,
-    colorScale,
-    props: { data }
-  } = useContext(PieChartContext);
-  const pieData = data.reduce((acc, curr) => acc[curr.name] = curr.value, {});
-  return /* @__PURE__ */ jsx("g", {
-    transform: `translate(${innerWidth / 2},${innerHeight / 2}`
-  });
-};
-export {
-  Pie
-};
-//# sourceMappingURL=Pie.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Pie.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { pie } from 'd3';\nimport { PieChartContext } from '../ChartContext';\n\nexport const Pie = () => {\n  const {\n    innerHeight,\n    innerWidth,\n    colorScale,\n    props: { data },\n  } = useContext(PieChartContext);\n\n  const pieData = data.reduce((acc, curr) => (acc[curr.name] = curr.value), {});\n\n  return <g transform={`translate(${innerWidth / 2},${innerHeight / 2}`}></g>;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAElC,SAAS,uBAAuB;AAEzB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,eAAe;AAE9B,QAAM,UAAU,KAAK,OAAO,CAAC,KAAK,SAAU,IAAI,KAAK,QAAQ,KAAK,OAAQ,CAAC,CAAC;AAE5E,SAAO,oBAAC;AAAA,IAAE,WAAW,aAAa,aAAa,KAAK,cAAc;AAAA,GAAK;AACzE;",
-  "names": []
-}