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

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

@@ -30,18 +30,115 @@ module.exports = __toCommonJS(Rect_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_styles = require("../styles");
 var import_ChartContext = require("../ChartContext");
-const Rect = ({ width, height, id }) => {
-  const { activePoint } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const isFocused = activePoint === id;
+var import_constants = require("../../constants");
+var import_FocusableRegion = require("../parts/FocusableRegion");
+const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue }) => {
+  const {
+    activePoint,
+    isGrabbed,
+    chartId,
+    isHorizontal,
+    innerWidth,
+    yScale,
+    innerHeight,
+    props: { TooltipRenderer }
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const isFocused = activePoint?.key === id;
+  const animation = (0, import_react.useMemo)(() => {
+    if (isGrabbed)
+      return null;
+    if (isHorizontal)
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animate", {
+        attributeName: "x",
+        from: -innerWidth,
+        to: x,
+        dur: "0.4s",
+        fill: "both"
+      });
+    if (isNegative)
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animate", {
+        attributeName: "y",
+        from: yScale(0),
+        to: -y,
+        dur: "0.40s",
+        fill: "both"
+      });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("animate", {
+      attributeName: "y",
+      from: -innerHeight - y,
+      to: -y,
+      dur: "0.40s",
+      fill: "both"
+    });
+  }, [innerHeight, innerWidth, isGrabbed, isHorizontal, isNegative, x, y, yScale]);
+  const clipPathSign = (0, import_react.useMemo)(() => {
+    if (isHorizontal)
+      return "";
+    if (isNegative)
+      return `url(#rects-negative-${chartId})`;
+    return `url(#rects-positive-${chartId})`;
+  }, [chartId, isHorizontal, isNegative]);
+  const transform = (0, import_react.useMemo)(() => {
+    if (isHorizontal)
+      return ``;
+    return `scale(1,-1) translate(0,${-height})`;
+  }, [height, isHorizontal]);
   return (0, import_react.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMark, {
+    () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+      clipPath: clipPathSign,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+        id: isFocused ? `data-focused-${chartId}` : "",
+        transform,
+        children: [
+          isFocused ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+            x: (isHorizontal ? x : 0) - import_constants.FOCUS_RING.STROKE_WIDTH,
+            y: (!isHorizontal ? -y : 0) - import_constants.FOCUS_RING.STROKE_WIDTH,
+            width: width + import_constants.FOCUS_RING.OFFSET,
+            height: height + import_constants.FOCUS_RING.OFFSET,
+            fill: "none",
+            rx: "1",
+            ry: "1",
+            stroke: import_constants.FOCUS_RING.COLOR,
+            strokeWidth: import_constants.FOCUS_RING.STROKE_WIDTH
+          }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+            width,
+            height,
+            y: -y,
+            x
+          }),
+          activePoint?.key === id && TooltipRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FocusableRegion.FocusableRegion, {
+            id,
+            y,
+            x,
+            width,
+            height,
+            transform,
+            content: /* @__PURE__ */ (0, import_jsx_runtime.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
+    ]
   );
 };
 //# sourceMappingURL=Rect.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/Rect.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,oBAA2B;AAC3B,0BAA6B;AACtB,MAAM,OAAO,CAAC,EAAE,OAAO,QAAQ,GAAG,MAAM;AAC7C,QAAM,EAAE,YAAY,QAAI,yBAAW,gCAAY;AAE/C,QAAM,YAAY,gBAAgB;AAElC,aAAO;AAAA,IACL,MAAM,4CAAC;AAAA,MAAW;AAAA,MAAc;AAAA,MAAgB;AAAA,KAAsB;AAAA,IACtE,CAAC,QAAQ,WAAW,KAAK;AAAA,EAC3B;AACF;",
+  "sourcesContent": ["import React, { useMemo, useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { FOCUS_RING } from '../../constants';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nexport const Rect = ({ name, width, height, isNegative = false, x = null, y = null, id, xValue, yValue }) => {\n  const {\n    activePoint,\n    isGrabbed,\n    chartId,\n    isHorizontal,\n    innerWidth,\n    yScale,\n    innerHeight,\n    props: { TooltipRenderer },\n  } = useContext(ChartContext);\n\n  const isFocused = activePoint?.key === id;\n\n  const animation = useMemo(() => {\n    if (isGrabbed) return null;\n    if (isHorizontal) return <animate attributeName=\"x\" from={-innerWidth} to={x} dur=\"0.4s\" fill=\"both\" />;\n    if (isNegative) return <animate attributeName=\"y\" from={yScale(0)} to={-y} dur=\"0.40s\" fill=\"both\" />;\n    return <animate attributeName=\"y\" from={-innerHeight - y} to={-y} dur=\"0.40s\" fill=\"both\" />;\n  }, [innerHeight, innerWidth, isGrabbed, isHorizontal, isNegative, x, y, yScale]);\n\n  const clipPathSign = useMemo(() => {\n    // @todo horizontal clip paths\n    if (isHorizontal) return '';\n    if (isNegative) return `url(#rects-negative-${chartId})`;\n    return `url(#rects-positive-${chartId})`;\n  }, [chartId, isHorizontal, isNegative]);\n\n  const transform = useMemo(() => {\n    if (isHorizontal) return ``;\n    return `scale(1,-1) translate(0,${-height})`;\n  }, [height, isHorizontal]);\n  return useMemo(\n    () => (\n      <g clipPath={clipPathSign}>\n        <g id={isFocused ? `data-focused-${chartId}` : ''} transform={transform}>\n          {isFocused ? (\n            <rect\n              x={(isHorizontal ? x : 0) - FOCUS_RING.STROKE_WIDTH}\n              y={(!isHorizontal ? -y : 0) - FOCUS_RING.STROKE_WIDTH}\n              width={width + FOCUS_RING.OFFSET}\n              height={height + FOCUS_RING.OFFSET}\n              fill=\"none\"\n              rx=\"1\"\n              ry=\"1\"\n              stroke={FOCUS_RING.COLOR}\n              strokeWidth={FOCUS_RING.STROKE_WIDTH}\n            ></rect>\n          ) : null}\n          <rect width={width} height={height} y={-y} x={x}>\n            {/* {animation} */}\n          </rect>\n          {activePoint?.key === id && TooltipRenderer ? (\n            <FocusableRegion\n              id={id}\n              y={y}\n              x={x}\n              width={width}\n              height={height}\n              transform={transform}\n              content={<TooltipRenderer data={[{ name, yValue, xValue }]} />}\n            />\n          ) : (\n            ''\n          )}\n        </g>\n      </g>\n    ),\n    [\n      clipPathSign,\n      isFocused,\n      chartId,\n      transform,\n      isHorizontal,\n      x,\n      y,\n      width,\n      height,\n      // animation,\n      activePoint?.key,\n      id,\n      TooltipRenderer,\n      name,\n      yValue,\n      xValue,\n    ],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,0BAA6B;AAC7B,uBAA2B;AAC3B,6BAAgC;AACzB,MAAM,OAAO,CAAC,EAAE,MAAM,OAAO,QAAQ,aAAa,OAAO,IAAI,MAAM,IAAI,MAAM,IAAI,QAAQ,OAAO,MAAM;AAC3G,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,gBAAgB;AAAA,EAC3B,QAAI,yBAAW,gCAAY;AAE3B,QAAM,YAAY,aAAa,QAAQ;AAEvC,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI;AAAW,aAAO;AACtB,QAAI;AAAc,aAAO,4CAAC;AAAA,QAAQ,eAAc;AAAA,QAAI,MAAM,CAAC;AAAA,QAAY,IAAI;AAAA,QAAG,KAAI;AAAA,QAAO,MAAK;AAAA,OAAO;AACrG,QAAI;AAAY,aAAO,4CAAC;AAAA,QAAQ,eAAc;AAAA,QAAI,MAAM,OAAO,CAAC;AAAA,QAAG,IAAI,CAAC;AAAA,QAAG,KAAI;AAAA,QAAQ,MAAK;AAAA,OAAO;AACnG,WAAO,4CAAC;AAAA,MAAQ,eAAc;AAAA,MAAI,MAAM,CAAC,cAAc;AAAA,MAAG,IAAI,CAAC;AAAA,MAAG,KAAI;AAAA,MAAQ,MAAK;AAAA,KAAO;AAAA,EAC5F,GAAG,CAAC,aAAa,YAAY,WAAW,cAAc,YAAY,GAAG,GAAG,MAAM,CAAC;AAE/E,QAAM,mBAAe,sBAAQ,MAAM;AAEjC,QAAI;AAAc,aAAO;AACzB,QAAI;AAAY,aAAO,uBAAuB;AAC9C,WAAO,uBAAuB;AAAA,EAChC,GAAG,CAAC,SAAS,cAAc,UAAU,CAAC;AAEtC,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,QAAI;AAAc,aAAO;AACzB,WAAO,2BAA2B,CAAC;AAAA,EACrC,GAAG,CAAC,QAAQ,YAAY,CAAC;AACzB,aAAO;AAAA,IACL,MACE,4CAAC;AAAA,MAAE,UAAU;AAAA,MACX,uDAAC;AAAA,QAAE,IAAI,YAAY,gBAAgB,YAAY;AAAA,QAAI;AAAA,QAChD;AAAA,sBACC,4CAAC;AAAA,YACC,IAAI,eAAe,IAAI,KAAK,4BAAW;AAAA,YACvC,IAAI,CAAC,eAAe,CAAC,IAAI,KAAK,4BAAW;AAAA,YACzC,OAAO,QAAQ,4BAAW;AAAA,YAC1B,QAAQ,SAAS,4BAAW;AAAA,YAC5B,MAAK;AAAA,YACL,IAAG;AAAA,YACH,IAAG;AAAA,YACH,QAAQ,4BAAW;AAAA,YACnB,aAAa,4BAAW;AAAA,WACzB,IACC;AAAA,UACJ,4CAAC;AAAA,YAAK;AAAA,YAAc;AAAA,YAAgB,GAAG,CAAC;AAAA,YAAG;AAAA,WAE3C;AAAA,UACC,aAAa,QAAQ,MAAM,kBAC1B,4CAAC;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS,4CAAC;AAAA,cAAgB,MAAM,CAAC,EAAE,MAAM,QAAQ,OAAO,CAAC;AAAA,aAAG;AAAA,WAC9D,IAEA;AAAA;AAAA,OAEJ;AAAA,KACF;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -33,48 +33,41 @@ var import_react = require("react");
 var import_Rect = require("./Rect");
 var import_ChartContext = require("../ChartContext");
 var import_helpers = require("../helpers");
-var import_FocusableRegion = require("../parts/FocusableRegion");
 const StackedBar = ({ serie }) => {
   const {
-    props: { xAxis, yAxis, groups, TooltipRenderer },
+    props: { groups },
     xScale,
     yScale,
     stackedData,
     subGroupScale,
-    colorScale
+    colorScale,
+    chartId,
+    getXValue
   } = (0, import_react.useContext)(import_ChartContext.ChartContext);
-  const isHorizontal = !!yScale.bandwidth;
   const serieWithStackedValues = (0, import_helpers.getStackedData)(stackedData, serie);
   const stackIndex = (0, import_helpers.getStackedIndex)(groups, serie.name);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+    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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("g", {
         fill: colorScale(serie.name),
-        transform: `translate(${transformX}, ${transformY})`,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Rect.Rect, {
-            width,
-            height,
-            x: serie.data[i].position,
-            y: sequence[1],
-            id: serie.data[i].key,
-            name: serie.name
-          }),
-          TooltipRenderer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FocusableRegion.FocusableRegion, {
-            id: serie.data[i].key,
-            width,
-            height,
-            content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, {
-              data: [{ name: serie.name, yValue, xValue }]
-            })
-          })
-        ]
+        transform: `translate(${transformX},0)`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Rect.Rect, {
+          width,
+          height,
+          xValue,
+          yValue,
+          y: transformY,
+          id: serie.data[i].key,
+          name: serie.name
+        })
       }, serie.data[i].key);
     })
   });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/StackedBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAChD,6BAAgC;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,QAAI,yBAAW,gCAAY;AAE3B,QAAM,eAAe,CAAC,CAAE,OAA6B;AACrD,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC;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,6CAAC;AAAA,QAEC,MAAM,WAAW,MAAM,IAAI;AAAA,QAC3B,WAAW,aAAa,eAAe;AAAA,QAEvC;AAAA,sDAAC;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,4CAAC;AAAA,YACC,IAAI,MAAM,KAAK,GAAG;AAAA,YAClB;AAAA,YACA;AAAA,YACA,SAAS,4CAAC;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": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,mBAAkC;AAElC,kBAAqB;AACrB,0BAA6B;AAC7B,qBAAgD;AAEzC,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,6BAAyB,+BAAe,aAAa,KAAK;AAChE,QAAM,iBAAa,gCAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,4CAAC;AAAA,IAAE,UAAU,wBAAwB;AAAA,IAClC,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,4CAAC;AAAA,QAA0B,MAAM,WAAW,MAAM,IAAI;AAAA,QAAG,WAAW,aAAa;AAAA,QAC/E,sDAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,UACH,IAAI,MAAM,KAAK,GAAG;AAAA,UAClB,MAAM,MAAM;AAAA,SACd;AAAA,SATM,MAAM,KAAK,GAAG,GAUtB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
   "names": []
 }

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

@@ -28,5 +28,4 @@ __reExport(series_exports, require("./StackedBar"), module.exports);
 __reExport(series_exports, require("./Points"), module.exports);
 __reExport(series_exports, require("./Line"), module.exports);
 __reExport(series_exports, require("./Area"), module.exports);
-__reExport(series_exports, require("./Pie"), module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/graphs/Chart/series/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './Rect';\nexport * from './Bars';\nexport * from './StackedBar';\nexport * from './Points';\nexport * from './Line';\nexport * from './Area';\nexport * from './Pie';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAAc,mBAAd;AACA,2BAAc,mBADd;AAEA,2BAAc,yBAFd;AAGA,2BAAc,qBAHd;AAIA,2BAAc,mBAJd;AAKA,2BAAc,mBALd;AAMA,2BAAc,kBANd;",
+  "sourcesContent": ["export * from './Rect';\nexport * from './Bars';\nexport * from './StackedBar';\nexport * from './Points';\nexport * from './Line';\nexport * from './Area';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,2BAAc,mBAAd;AACA,2BAAc,mBADd;AAEA,2BAAc,yBAFd;AAGA,2BAAc,qBAHd;AAIA,2BAAc,mBAJd;AAKA,2BAAc,mBALd;",
   "names": []
 }

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

@@ -30,9 +30,7 @@ __export(styles_exports, {
   StyledAxisLabel: () => StyledAxisLabel,
   StyledGrid: () => StyledGrid,
   StyledLine: () => StyledLine,
-  StyledMark: () => StyledMark,
   StyledMouseOverDetectionBox: () => StyledMouseOverDetectionBox,
-  StyledPoint: () => StyledPoint,
   StyledSVGWrapper: () => StyledSVGWrapper,
   StyledTooltipContainer: () => StyledTooltipContainer
 });
@@ -49,6 +47,10 @@ const StyledSVGWrapper = import_ds_system.styled.div`
   }
 
   cursor: ${({ isGrabbed }) => isGrabbed ? "grabbing" : "default"};
+
+  .domain {
+    stroke-width: 2px;
+  }
 `;
 const StyledAxis = (0, import_ds_system.styled)("g")`
   text {
@@ -82,9 +84,6 @@ const borderCircle = import_ds_system.css`
   stroke: #c64252;
   stroke-width: 2;
 `;
-const StyledMark = (0, import_ds_system.styled)("rect")`
-  ${({ isFocused }) => isFocused ? borderCircle : ""};
-`;
 const StyleFocusableRegion = (0, import_ds_system.styled)("div")`
   width: ${({ s }) => s * 2}px;
   height: ${({ s }) => s * 2}px;
@@ -102,23 +101,9 @@ const StyledArea = (0, import_ds_system.styled)("path")`
   stroke-linejoin: round;
   opacity: 0.8;
 `;
-const StyledPoint = (0, import_ds_system.styled)("circle")`
-  //opacity: ${({ isFocused }) => isFocused ? 1 : 0};
-  ${({ isFocused }) => isFocused ? borderCircle : ""};
-`;
 const StyledTooltipContainer = import_ds_system.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 = import_ds_system.styled.div`
   position: absolute;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/graphs/Chart/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { COLOR_PALLET } from './helpers/colorPallet';\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,yBAA6B;AACtB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAGlD,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAU9B,CAAC,EAAE,MAAM,MAAO,QAAQ,SAAS,gCAAa,UAAU,UAAU;AAAA;AAAA;AAAA,MAGlE,CAAC,EAAE,MAAM,MAAO,QAAQ,WAAW,gCAAa,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnE,MAAM,sBAAkB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,eAAe;AAAA;AAAA;AAAA;AAId,MAAM,iBAAa,yBAAO,MAAM;AAAA,IACnC,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA;AAG5C,MAAM,2BAAuB,yBAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,iBAAa,yBAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,kBAAc,yBAAO,QAAQ;AAAA,eAC3B,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI;AAAA,IAC/C,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA;AAG5C,MAAM,yBAAyB,wBAAO;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,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,yBAA6B;AACtB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQ3B,CAAC,EAAE,UAAU,MAAO,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlD,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAU9B,CAAC,EAAE,MAAM,MAAO,QAAQ,SAAS,gCAAa,UAAU,UAAU;AAAA;AAAA;AAAA,MAGlE,CAAC,EAAE,MAAM,MAAO,QAAQ,WAAW,gCAAa,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnE,MAAM,sBAAkB,yBAAO,MAAM;AAAA;AAAA;AAAA;AAKrC,MAAM,iBAAa,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,eAAe;AAAA;AAAA;AAAA;AAKd,MAAM,2BAAuB,yBAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,iBAAa,yBAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,iBAAa,yBAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/graphs/constants.js

@@ -24,6 +24,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
+  FOCUS_RING: () => FOCUS_RING,
+  LINE: () => LINE,
+  SCRAPPER: () => SCRAPPER,
   TICK_FORMATS: () => TICK_FORMATS
 });
 module.exports = __toCommonJS(constants_exports);
@@ -34,4 +37,21 @@ const TICK_FORMATS = {
   KSEPARATOR: (v) => (0, import_d3.format)(",")(v),
   TIME: (userFormat) => (v) => (0, import_d3.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
+};
 //# sourceMappingURL=constants.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/graphs/constants.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gBAAmC;AAE5B,MAAM,eAAe;AAAA,EAC1B,UAAU,CAAC,UAAM,kBAAO,KAAK,EAAE,CAAC,EAAE,QAAQ,KAAK,GAAG;AAAA,EAClD,YAAY,CAAC,UAAM,kBAAO,GAAG,EAAE,CAAC;AAAA,EAChC,MAAM,CAAC,eAAuB,CAAC,UAAM,sBAAW,UAAU,EAAE,CAAC;AAC/D;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,gBAAmC;AAE5B,MAAM,eAAe;AAAA,EAC1B,UAAU,CAAC,UAAM,kBAAO,KAAK,EAAE,CAAC,EAAE,QAAQ,KAAK,GAAG;AAAA,EAClD,YAAY,CAAC,UAAM,kBAAO,GAAG,EAAE,CAAC;AAAA,EAChC,MAAM,CAAC,eAAuB,CAAC,UAAM,sBAAW,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/dist/esm/graphs/Chart/Chart.js.map

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

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

@@ -19,7 +19,9 @@ const defaultContext = {
   },
   containerRef: createRef(),
   groups: [],
-  colorScale: scaleOrdinal()
+  colorScale: scaleOrdinal(),
+  setLeftAxisRef: () => {
+  }
 };
 const ChartContext = createContext(defaultContext);
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/ChartContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { ScaleLinear, ScaleBand, scaleLinear, scaleBand, scaleOrdinal, ScaleOrdinal } from 'd3';\nimport { defaultProps, DSChartT } from './react-desc-prop-types';\n\ninterface ContextT {\n  props: Partial<DSChartT.Props>;\n  xScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  yScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: string;\n  setActivePoint: React.Dispatch<React.SetStateAction<string>>;\n  activeSerie: string;\n  setActiveSerie: React.Dispatch<React.SetStateAction<string>>;\n  containerRef: React.RefObject<HTMLDivElement>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, never>;\n}\n\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: '',\n  setActivePoint: () => {},\n  activeSerie: '',\n  setActiveSerie: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n};\n\nexport const ChartContext = createContext(defaultContext);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AACzC,SAAiC,aAAa,WAAW,oBAAkC;AAC3F,SAAS,oBAA8B;AAkBvC,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ,UAAU;AAAA,EAClB,QAAQ,YAAY;AAAA,EACpB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,cAAc,UAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,YAAY,aAAa;AAC3B;AAEO,MAAM,eAAe,cAAc,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { ScaleLinear, ScaleBand, scaleLinear, scaleBand, scaleOrdinal, ScaleOrdinal } from 'd3';\nimport { defaultProps, DSChartT } from './react-desc-prop-types';\n\ninterface ContextT {\n  props: DSChartT.Props;\n  xScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  yScale: ScaleLinear<number, number, never> | ScaleBand<string>;\n  innerHeight: number;\n  innerWidth: number;\n  activePoint: string;\n  setActivePoint: React.Dispatch<React.SetStateAction<string>>;\n  activeSerie: string;\n  setActiveSerie: React.Dispatch<React.SetStateAction<string>>;\n  containerRef: React.RefObject<HTMLDivElement>;\n  groups: string[];\n  subGroupScale?: ScaleBand<string> | null;\n  colorScale: ScaleOrdinal<string, unknown, never>;\n  setLeftAxisRef: React.Dispatch<React.SetStateAction<Element | undefined>>;\n  axisLeftRef: Element;\n}\n\nconst defaultContext: ContextT = {\n  props: defaultProps,\n  xScale: scaleBand(),\n  yScale: scaleLinear(),\n  innerHeight: 0,\n  innerWidth: 0,\n  activePoint: '',\n  setActivePoint: () => {},\n  activeSerie: '',\n  setActiveSerie: () => {},\n  scrapperPosY: '',\n  setScrapperPosY: () => {},\n  containerRef: createRef<HTMLDivElement>(),\n  groups: [],\n  colorScale: scaleOrdinal(),\n  setLeftAxisRef: () => {},\n};\n\nexport const ChartContext = createContext(defaultContext);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AACzC,SAAiC,aAAa,WAAW,oBAAkC;AAC3F,SAAS,oBAA8B;AAoBvC,MAAM,iBAA2B;AAAA,EAC/B,OAAO;AAAA,EACP,QAAQ,UAAU;AAAA,EAClB,QAAQ,YAAY;AAAA,EACpB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAc;AAAA,EACd,iBAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,cAAc,UAA0B;AAAA,EACxC,QAAQ,CAAC;AAAA,EACT,YAAY,aAAa;AAAA,EACzB,gBAAgB,MAAM;AAAA,EAAC;AACzB;AAEO,MAAM,eAAe,cAAc,cAAc;",
   "names": []
 }

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

@@ -1,36 +1,44 @@
 import * as React from "react";
-import { useMemo, useState, useRef } from "react";
+import { useMemo, useState, useRef, useCallback } from "react";
+import { v4 as uuidv4 } from "uuid";
 import { useScales } from "./useScales";
 import { stackData } from "../helpers";
+import { useInternalMargins } from "./useInternalMargins";
 const useChart = (props) => {
-  const { series, yAxis, width, height, groups: groupsStacked } = props;
+  const { series, yAxis, xAxis, width, height, groups: groupsStacked } = props;
   const containerRef = useRef(null);
   const svgRef = useRef(null);
   const [isGrabbed, setIsGrabbed] = useState(false);
   const [startPosition, setStartPosition] = useState(0);
-  const [activePoint, setActivePoint] = useState("");
+  const [activePoint, setActivePoint] = useState(null);
   const [activeSerie, setActiveSerie] = useState("");
   const [scrapperPosY, setScrapperPosY] = useState("");
   const [scrapperPosX, setScrapperPosX] = useState("");
   const [xScrollbarPosition, setXScrollbarPosition] = useState(0);
   const [isScrollbarVisible, setIsScrollbarVisible] = useState(false);
   const oldLastPosition = useRef(0);
-  const [axisLeftWidth, setAxisLeftWidth] = useState(null);
-  const [axisBottomHeight, setAxisBottomHeight] = useState(null);
-  const [axisRightWidth, setAxisRightWidth] = useState(null);
-  const [leftLegend, setLeftLegend] = useState(null);
-  const [rightLegend, setRightLegend] = useState(null);
-  const [topLegend, setTopLegend] = useState(null);
-  const [bottomLegend, setBottomLegend] = useState(null);
-  const internalMargin = useMemo(
-    () => ({
-      bottom: 10 + (axisBottomHeight?.getBoundingClientRect().height ?? 0) + (bottomLegend?.getBoundingClientRect().height ?? 0),
-      top: 10 + (topLegend?.getBoundingClientRect().height ?? 0),
-      right: 10 + (axisRightWidth?.getBoundingClientRect().width ?? 0) + (rightLegend?.getBoundingClientRect().width ?? 0),
-      left: 10 + (axisLeftWidth?.getBoundingClientRect().width ?? 0) + (leftLegend?.getBoundingClientRect().width ?? 0)
-    }),
-    [axisBottomHeight, axisLeftWidth, axisRightWidth, bottomLegend, leftLegend, rightLegend, topLegend]
-  );
+  const [axisLeftRef, setAxisLeftRef] = useState();
+  const [axisBottomRef, setAxisBottomRef] = useState();
+  const [axisRightRef, setAxisRightRef] = useState();
+  const [leftLegend, setLeftLegend] = useState();
+  const [rightLegend, setRightLegend] = useState();
+  const [topLegend, setTopLegend] = useState();
+  const [bottomLegend, setBottomLegend] = useState();
+  const [rightLabel, setRightLabel] = useState();
+  const [leftLabel, setLeftLabel] = useState();
+  const [bottomLabel, setBottomLabel] = useState();
+  const { axisBottomHeight, axisRightWidth, bottomLabelHeight, internalMargin, leftLegendWidth, rightLabelWidth } = useInternalMargins({
+    axisLeftRef,
+    axisBottomRef,
+    axisRightRef,
+    leftLabel,
+    leftLegend,
+    rightLegend,
+    topLegend,
+    bottomLegend,
+    rightLabel,
+    bottomLabel
+  });
   const innerWidth = useMemo(
     () => width - internalMargin.left - internalMargin.right,
     [internalMargin.left, internalMargin.right, width]
@@ -39,10 +47,7 @@ const useChart = (props) => {
     () => height - internalMargin.top - internalMargin.bottom,
     [internalMargin.top, internalMargin.bottom, height]
   );
-  const groups = useMemo(() => series.map((serie) => serie.name), []);
-  const stackedData = useMemo(() => stackData(groupsStacked, series), [groupsStacked, series]);
-  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? 1;
-  const currentData = useMemo(
+  const [currentData, setCurrentData] = useState(
     () => series.map((d, i) => ({
       ...d,
       originalData: d,
@@ -51,9 +56,15 @@ const useChart = (props) => {
         key: `${d.name}-${i}-${index}`,
         value,
         position: index
-      }))
-    })),
-    [series]
+      })).filter((datum) => datum.value !== null)
+    }))
+  );
+  const stackedData = useMemo(() => stackData(groupsStacked, currentData), [groupsStacked, currentData]);
+  const containerRatio = props?.xAxis.advanced?.pointSpacing?.value ?? 1;
+  const groups = useMemo(() => currentData.map((serie) => serie.name), [currentData]);
+  const visibleGroups = useMemo(
+    () => currentData.filter((serie) => !serie.isHidden).map((serie) => serie.name),
+    [currentData]
   );
   const { xScale, yScale, y2Scale, subGroupScale, colorScale, getBandwidth } = useScales({
     props,
@@ -64,12 +75,23 @@ const useChart = (props) => {
     currentData,
     containerRatio
   });
+  const isHorizontal = useMemo(() => !!yScale.bandwidth, [yScale]);
+  const getXValue = useCallback(
+    (datum) => !isHorizontal ? xAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position : datum.value.x ?? datum.value,
+    [isHorizontal, xAxis?.cols]
+  );
+  const getYValue = useCallback(
+    (datum) => !isHorizontal ? datum.value?.y ?? datum.value : yAxis?.cols?.[datum.position] ?? datum.value.x ?? datum.position,
+    [isHorizontal, yAxis?.cols]
+  );
+  const chartId = useMemo(() => uuidv4(), []);
   return useMemo(
     () => ({
       props: { ...props, data: currentData },
       innerHeight,
       innerWidth,
       groups,
+      visibleGroups,
       colorScale,
       stackedData,
       subGroupScale,
@@ -98,15 +120,30 @@ const useChart = (props) => {
       oldLastPosition,
       containerRatio,
       internalMargin,
-      axisLeftWidth,
+      axisLeftRef,
+      leftLegendWidth,
       leftLegend,
-      setAxisLeftWidth,
+      setAxisLeftRef,
       setLeftLegend,
       setRightLegend,
+      rightLegend,
       setTopLegend,
       setBottomLegend,
-      setAxisBottomHeight,
-      setAxisRightWidth
+      setAxisBottomRef,
+      axisBottomHeight,
+      setAxisRightRef,
+      setRightLabel,
+      setBottomLabel,
+      bottomLabelHeight,
+      rightLabelWidth,
+      axisRightWidth,
+      getXValue,
+      getYValue,
+      isHorizontal,
+      setCurrentData,
+      setLeftLabel,
+      leftLabel,
+      chartId
     }),
     [
       props,
@@ -114,6 +151,7 @@ const useChart = (props) => {
       innerHeight,
       innerWidth,
       groups,
+      visibleGroups,
       colorScale,
       stackedData,
       subGroupScale,
@@ -132,20 +170,35 @@ const useChart = (props) => {
       setIsGrabbed,
       startPosition,
       setStartPosition,
+      rightLabelWidth,
+      rightLegend,
+      bottomLabelHeight,
       isScrollbarVisible,
       setIsScrollbarVisible,
       oldLastPosition,
       containerRatio,
       internalMargin,
-      axisLeftWidth,
+      axisBottomHeight,
+      axisLeftRef,
+      leftLegendWidth,
       leftLegend,
-      setAxisLeftWidth,
+      setAxisLeftRef,
       setLeftLegend,
       setRightLegend,
       setTopLegend,
       setBottomLegend,
-      setAxisBottomHeight,
-      setAxisRightWidth
+      setAxisBottomRef,
+      setAxisRightRef,
+      setRightLabel,
+      setBottomLabel,
+      getXValue,
+      getYValue,
+      isHorizontal,
+      setCurrentData,
+      axisRightWidth,
+      setLeftLabel,
+      leftLabel,
+      chartId
     ]
   );
 };