@elliemae/ds-dataviz 3.6.0-next.3

package/dist/esm/graphs/Chart/parts/ColorLegend.js

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ChartContext } from "../ChartContext";
+const ColorLegend = ({ tickSpacing = 20, tickSize = 5, tickTextOffset = 20 }) => {
+  const {
+    colorScale,
+    innerWidth,
+    props: { colorLegend }
+  } = useContext(ChartContext);
+  if (!colorLegend)
+    return null;
+  return /* @__PURE__ */ jsxs("g", {
+    transform: `translate(${innerWidth + 30},30)`,
+    children: [
+      /* @__PURE__ */ jsx("text", {
+        x: 35,
+        y: -25,
+        className: "axis-label",
+        textAnchor: "middle",
+        children: colorLegend.label
+      }),
+      colorScale.domain().map((domainValue, i) => /* @__PURE__ */ jsxs("g", {
+        className: "tick",
+        transform: `translate(0,${i * tickSpacing})`,
+        children: [
+          /* @__PURE__ */ jsx("circle", {
+            fill: colorScale(domainValue),
+            r: 4
+          }),
+          /* @__PURE__ */ jsx("text", {
+            x: tickTextOffset,
+            dy: ".32em",
+            children: domainValue
+          })
+        ]
+      }))
+    ]
+  });
+};
+export {
+  ColorLegend
+};
+//# sourceMappingURL=ColorLegend.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/ColorLegend.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { ChartContext } from '../ChartContext';\n\nexport const ColorLegend = ({ tickSpacing = 20, tickSize = 5, tickTextOffset = 20 }) => {\n  const {\n    colorScale,\n    innerWidth,\n    props: { colorLegend },\n  } = useContext(ChartContext);\n\n  if (!colorLegend) return null;\n  return (\n    <g transform={`translate(${innerWidth + 30},30)`}>\n      <text x={35} y={-25} className=\"axis-label\" textAnchor=\"middle\">\n        {colorLegend.label}\n      </text>\n      {colorScale.domain().map((domainValue, i) => (\n        <g className=\"tick\" transform={`translate(0,${i * tickSpacing})`}>\n          <circle fill={colorScale(domainValue)} r={4} />\n          <text x={tickTextOffset} dy=\".32em\">\n            {domainValue}\n          </text>\n        </g>\n      ))}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAClC,SAAS,oBAAoB;AAEtB,MAAM,cAAc,CAAC,EAAE,cAAc,IAAI,WAAW,GAAG,iBAAiB,GAAG,MAAM;AACtF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,YAAY;AAAA,EACvB,IAAI,WAAW,YAAY;AAE3B,MAAI,CAAC;AAAa,WAAO;AACzB,SACE,qBAAC;AAAA,IAAE,WAAW,aAAa,aAAa;AAAA,IACtC;AAAA,0BAAC;AAAA,QAAK,GAAG;AAAA,QAAI,GAAG;AAAA,QAAK,WAAU;AAAA,QAAa,YAAW;AAAA,QACpD,sBAAY;AAAA,OACf;AAAA,MACC,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,qBAAC;AAAA,QAAE,WAAU;AAAA,QAAO,WAAW,eAAe,IAAI;AAAA,QAChD;AAAA,8BAAC;AAAA,YAAO,MAAM,WAAW,WAAW;AAAA,YAAG,GAAG;AAAA,WAAG;AAAA,UAC7C,oBAAC;AAAA,YAAK,GAAG;AAAA,YAAgB,IAAG;AAAA,YACzB;AAAA,WACH;AAAA;AAAA,OACF,CACD;AAAA;AAAA,GACH;AAEJ;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/FocusableRegion.js

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useContext } from "react";
+import { DSPopperJS } from "@elliemae/ds-popperjs";
+import { ThemeContext, styled } from "@elliemae/ds-system";
+import { ChartContext } from "../ChartContext";
+import { StyleFocusableRegion } from "../styles";
+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;
+  background-color: white;
+  border-radius: 2px;
+  font-size: 13px;
+  color: ${({ theme }) => theme.colors.neutral[600]};
+`;
+const StyledMouseOverDetectionBox = styled.div`
+  position: absolute;
+  top: -15px;
+  right: -15px;
+  width: calc(100% + 30px);
+  height: calc(100% + 30px);
+  z-index: -1;
+`;
+const FocusableRegion = (props) => {
+  const { activePoint } = useContext(ChartContext);
+  const [referenceElement, setReferenceElement] = useState();
+  const theme = useContext(ThemeContext);
+  const [showPopover, setShowPopover] = useState(false);
+  const { id, pointRadius, content, ...rest } = props;
+  const isFocused = activePoint === id;
+  const focusableElement = useRef(null);
+  const handleRef = useCallback(
+    (newRef) => {
+      if (focusableElement.current)
+        focusableElement.current = newRef;
+      if (isFocused)
+        newRef?.focus();
+    },
+    [isFocused]
+  );
+  const onMouseEnter = () => {
+    setShowPopover(true);
+  };
+  const onMouseLeave = () => {
+    setShowPopover(false);
+  };
+  const onFocus = () => {
+    setShowPopover(true);
+  };
+  const onBlur = () => {
+    setShowPopover(false);
+  };
+  return /* @__PURE__ */ jsx("foreignObject", {
+    ...rest,
+    onFocus,
+    onBlur,
+    ref: setReferenceElement,
+    children: /* @__PURE__ */ jsxs("div", {
+      children: [
+        /* @__PURE__ */ jsx(StyleFocusableRegion, {
+          s: pointRadius,
+          tabIndex: -1,
+          ref: handleRef
+        }),
+        /* @__PURE__ */ jsxs(DSPopperJS, {
+          withoutAnimation: true,
+          referenceElement,
+          showPopover,
+          zIndex: theme.zIndex.tooltip,
+          children: [
+            /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {}),
+            /* @__PURE__ */ jsx(StyledTooltipContainer, {
+              children: content
+            })
+          ]
+        })
+      ]
+    })
+  });
+};
+export {
+  FocusableRegion
+};
+//# sourceMappingURL=FocusableRegion.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/FocusableRegion.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useState, useRef, useCallback, useContext } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext, styled } from '@elliemae/ds-system';\nimport { ChartContext } from '../ChartContext';\n\nimport { StyleFocusableRegion } from '../styles';\n\nconst 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\nconst 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\nexport const FocusableRegion: React.ComponentType<any> = (props) => {\n  const { activePoint } = useContext(ChartContext);\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n  const theme = useContext(ThemeContext);\n\n  const [showPopover, setShowPopover] = useState(false);\n  const { id, pointRadius, content, ...rest } = props;\n  const isFocused = activePoint === id;\n\n  const focusableElement = useRef(null);\n  const handleRef = useCallback(\n    (newRef: HTMLDivElement) => {\n      if (focusableElement.current) focusableElement.current = newRef;\n      if (isFocused) newRef?.focus();\n    },\n    [isFocused],\n  );\n\n  const onMouseEnter = () => {\n    setShowPopover(true);\n  };\n\n  const onMouseLeave = () => {\n    setShowPopover(false);\n  };\n\n  const onFocus = () => {\n    setShowPopover(true);\n  };\n\n  const onBlur = () => {\n    setShowPopover(false);\n  };\n\n  return (\n    <foreignObject\n      {...rest}\n      // onMouseEnter={onMouseEnter}\n      // onMouseLeave={onMouseLeave}\n      // onPointerEnter={onMouseEnter}\n      // onPointerLeave={onMouseLeave}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      ref={setReferenceElement}\n    >\n      <div>\n        <StyleFocusableRegion\n          s={pointRadius}\n          // aria-label={`${xValue} ${d[yValue]}`}\n          tabIndex={-1}\n          ref={handleRef}\n        ></StyleFocusableRegion>\n\n        <DSPopperJS\n          withoutAnimation\n          referenceElement={referenceElement}\n          showPopover={showPopover}\n          zIndex={theme.zIndex.tooltip}\n        >\n          <StyledMouseOverDetectionBox />\n          <StyledTooltipContainer>{content}</StyledTooltipContainer>\n        </DSPopperJS>\n      </div>\n    </foreignObject>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,UAAU,QAAQ,aAAa,kBAAkB;AACjE,SAAS,kBAAkB;AAC3B,SAAS,cAAc,cAAc;AACrC,SAAS,oBAAoB;AAE7B,SAAS,4BAA4B;AAErC,MAAM,yBAAyB,OAAO;AAAA;AAAA,eAEvB,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;AAG/C,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASpC,MAAM,kBAA4C,CAAC,UAAU;AAClE,QAAM,EAAE,YAAY,IAAI,WAAW,YAAY;AAE/C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiC;AACjF,QAAM,QAAQ,WAAW,YAAY;AAErC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,EAAE,IAAI,aAAa,YAAY,KAAK,IAAI;AAC9C,QAAM,YAAY,gBAAgB;AAElC,QAAM,mBAAmB,OAAO,IAAI;AACpC,QAAM,YAAY;AAAA,IAChB,CAAC,WAA2B;AAC1B,UAAI,iBAAiB;AAAS,yBAAiB,UAAU;AACzD,UAAI;AAAW,gBAAQ,MAAM;AAAA,IAC/B;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,eAAe,MAAM;AACzB,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,eAAe,MAAM;AACzB,mBAAe,KAAK;AAAA,EACtB;AAEA,QAAM,UAAU,MAAM;AACpB,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,SAAS,MAAM;AACnB,mBAAe,KAAK;AAAA,EACtB;AAEA,SACE,oBAAC;AAAA,IACE,GAAG;AAAA,IAKJ;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IAEL,+BAAC;AAAA,MACC;AAAA,4BAAC;AAAA,UACC,GAAG;AAAA,UAEH,UAAU;AAAA,UACV,KAAK;AAAA,SACN;AAAA,QAED,qBAAC;AAAA,UACC,kBAAgB;AAAA,UAChB;AAAA,UACA;AAAA,UACA,QAAQ,MAAM,OAAO;AAAA,UAErB;AAAA,gCAAC,+BAA4B;AAAA,YAC7B,oBAAC;AAAA,cAAwB;AAAA,aAAQ;AAAA;AAAA,SACnC;AAAA;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/Scrapper.js

@@ -0,0 +1,104 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo, useState } from "react";
+import { DSPopperJS } from "@elliemae/ds-popperjs";
+import { ThemeContext } from "@elliemae/ds-system";
+import { ChartContext } from "../ChartContext";
+import { StyledMouseOverDetectionBox, StyledTooltipContainer } from "../styles";
+const Scrapper = () => {
+  const {
+    yScale,
+    y2Scale,
+    scrapperPosY,
+    setScrapperPosY,
+    xScale,
+    innerHeight,
+    innerWidth,
+    props: { TooltipRenderer, xAxis, data, scrapper }
+  } = useContext(ChartContext);
+  const theme = useContext(ThemeContext);
+  const [referenceElement, setReferenceElement] = useState();
+  const uniqueData = useMemo(() => {
+    const valueToPositionPerSeries = data.map(
+      (serie) => serie.data.map((datum, i) => ({
+        position: serie.scale === "y" || !serie.scale ? yScale(datum.value) : y2Scale(datum.value),
+        name: serie.name,
+        xValue: xAxis.cols[i],
+        yValue: datum.value
+      }))
+    ).flat(1);
+    const postionUniqueData = {};
+    valueToPositionPerSeries.forEach((set) => {
+      if (postionUniqueData[[set.position]]) {
+        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];
+      } else {
+        postionUniqueData[[set.position]] = [{ ...set }];
+      }
+    });
+    return postionUniqueData;
+  }, [data, xAxis.cols, y2Scale, yScale]);
+  return /* @__PURE__ */ jsx("g", {
+    children: Object.keys(uniqueData).map((key) => {
+      const yPosition = parseFloat(key);
+      const datum = uniqueData[key];
+      return /* @__PURE__ */ jsxs("g", {
+        children: [
+          scrapperPosY === yPosition ? /* @__PURE__ */ jsxs("g", {
+            children: [
+              TooltipRenderer ? /* @__PURE__ */ jsx("foreignObject", {
+                children: /* @__PURE__ */ jsxs(DSPopperJS, {
+                  withoutAnimation: true,
+                  withoutArrow: true,
+                  customOffset: [0, 5],
+                  referenceElement,
+                  showPopover: true,
+                  zIndex: theme.zIndex.tooltip,
+                  startPlacementPreference: scrapper.tooltipPreference,
+                  children: [
+                    /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {}),
+                    /* @__PURE__ */ jsx(StyledTooltipContainer, {
+                      children: /* @__PURE__ */ jsx(TooltipRenderer, {
+                        data: datum
+                      })
+                    })
+                  ]
+                })
+              }) : null,
+              /* @__PURE__ */ jsx("line", {
+                ref: setReferenceElement,
+                x1: innerWidth,
+                strokeWidth: "2px",
+                stroke: "transparent",
+                y1: yPosition,
+                x2: innerWidth,
+                y2: yPosition
+              }),
+              /* @__PURE__ */ jsx("line", {
+                x1: 0,
+                strokeWidth: "2px",
+                stroke: "grey",
+                strokeDasharray: (4, 4),
+                y1: yPosition,
+                x2: innerWidth,
+                y2: yPosition
+              })
+            ]
+          }) : null,
+          /* @__PURE__ */ jsx("line", {
+            onMouseEnter: () => setScrapperPosY(yPosition),
+            x1: 0,
+            strokeWidth: "4px",
+            stroke: "transparent",
+            y1: yPosition,
+            x2: innerWidth,
+            y2: yPosition
+          })
+        ]
+      }, key);
+    })
+  });
+};
+export {
+  Scrapper
+};
+//# sourceMappingURL=Scrapper.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/Scrapper.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext, styled } from '@elliemae/ds-system';\nimport { ChartContext } from '../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../styles';\n\nexport const Scrapper = () => {\n  const {\n    yScale,\n    y2Scale,\n    scrapperPosY,\n    setScrapperPosY,\n    xScale,\n    innerHeight,\n    innerWidth,\n    props: { TooltipRenderer, xAxis, data, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n\n  const uniqueData = useMemo(() => {\n    const valueToPositionPerSeries = data\n      .map((serie) =>\n        serie.data.map((datum, i) => ({\n          position: serie.scale === 'y' || !serie.scale ? yScale(datum.value) : y2Scale(datum.value),\n          name: serie.name,\n          xValue: xAxis.cols[i],\n          yValue: datum.value,\n        })),\n      )\n      .flat(1);\n\n    const postionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (postionUniqueData[[set.position]]) {\n        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n      } else {\n        postionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return postionUniqueData;\n  }, [data, xAxis.cols, y2Scale, yScale]);\n\n  return (\n    <g>\n      {Object.keys(uniqueData).map((key) => {\n        const yPosition = parseFloat(key);\n        const datum = uniqueData[key];\n        return (\n          <g key={key}>\n            {scrapperPosY === yPosition ? (\n              <g>\n                {TooltipRenderer ? (\n                  <foreignObject>\n                    <DSPopperJS\n                      withoutAnimation\n                      withoutArrow\n                      customOffset={[0, 5]}\n                      referenceElement={referenceElement}\n                      showPopover\n                      zIndex={theme.zIndex.tooltip}\n                      // placementOrderPreference=\"\"\n                      startPlacementPreference={scrapper.tooltipPreference}\n                    >\n                      <StyledMouseOverDetectionBox />\n                      <StyledTooltipContainer>\n                        <TooltipRenderer data={datum} />\n                      </StyledTooltipContainer>\n                    </DSPopperJS>\n                  </foreignObject>\n                ) : null}\n                <line\n                  ref={setReferenceElement}\n                  x1={innerWidth}\n                  strokeWidth=\"2px\"\n                  stroke=\"transparent\"\n                  y1={yPosition}\n                  x2={innerWidth}\n                  y2={yPosition}\n                />\n                <line\n                  // ref={setReferenceElement}\n                  x1={0}\n                  strokeWidth=\"2px\"\n                  stroke=\"grey\"\n                  strokeDasharray={(4, 4)}\n                  y1={yPosition}\n                  x2={innerWidth}\n                  y2={yPosition}\n                />\n              </g>\n            ) : null}\n            <line\n              onMouseEnter={() => setScrapperPosY(yPosition)}\n              // onMouseLeave={() => setScrapperPosY('')}\n              // id=\"horizontal-scrapper-zone\"\n              x1={0}\n              strokeWidth=\"4px\"\n              stroke=\"transparent\"\n              y1={yPosition}\n              x2={innerWidth}\n              y2={yPosition}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,gBAAgB;AACrD,SAAS,kBAAkB;AAC3B,SAAS,oBAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,8BAA8B;AAE7D,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,iBAAiB,OAAO,MAAM,SAAS;AAAA,EAClD,IAAI,WAAW,YAAY;AAC3B,QAAM,QAAQ,WAAW,YAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAgD;AAEhG,QAAM,aAAa,QAAQ,MAAM;AAC/B,UAAM,2BAA2B,KAC9B;AAAA,MAAI,CAAC,UACJ,MAAM,KAAK,IAAI,CAAC,OAAO,OAAO;AAAA,QAC5B,UAAU,MAAM,UAAU,OAAO,CAAC,MAAM,QAAQ,OAAO,MAAM,KAAK,IAAI,QAAQ,MAAM,KAAK;AAAA,QACzF,MAAM,MAAM;AAAA,QACZ,QAAQ,MAAM,KAAK;AAAA,QACnB,QAAQ,MAAM;AAAA,MAChB,EAAE;AAAA,IACJ,EACC,KAAK,CAAC;AAET,UAAM,oBAAoB,CAAC;AAE3B,6BAAyB,QAAQ,CAAC,QAAQ;AACxC,UAAI,kBAAkB,CAAC,IAAI,QAAQ,IAAI;AACrC,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,GAAG,kBAAkB,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,IAAI,CAAC;AAAA,MACvF,OAAO;AACL,0BAAkB,CAAC,IAAI,QAAQ,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC;AAAA,MACjD;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT,GAAG,CAAC,MAAM,MAAM,MAAM,SAAS,MAAM,CAAC;AAEtC,SACE,oBAAC;AAAA,IACE,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,QAAQ;AACpC,YAAM,YAAY,WAAW,GAAG;AAChC,YAAM,QAAQ,WAAW;AACzB,aACE,qBAAC;AAAA,QACE;AAAA,2BAAiB,YAChB,qBAAC;AAAA,YACE;AAAA,gCACC,oBAAC;AAAA,gBACC,+BAAC;AAAA,kBACC,kBAAgB;AAAA,kBAChB,cAAY;AAAA,kBACZ,cAAc,CAAC,GAAG,CAAC;AAAA,kBACnB;AAAA,kBACA,aAAW;AAAA,kBACX,QAAQ,MAAM,OAAO;AAAA,kBAErB,0BAA0B,SAAS;AAAA,kBAEnC;AAAA,wCAAC,+BAA4B;AAAA,oBAC7B,oBAAC;AAAA,sBACC,8BAAC;AAAA,wBAAgB,MAAM;AAAA,uBAAO;AAAA,qBAChC;AAAA;AAAA,iBACF;AAAA,eACF,IACE;AAAA,cACJ,oBAAC;AAAA,gBACC,KAAK;AAAA,gBACL,IAAI;AAAA,gBACJ,aAAY;AAAA,gBACZ,QAAO;AAAA,gBACP,IAAI;AAAA,gBACJ,IAAI;AAAA,gBACJ,IAAI;AAAA,eACN;AAAA,cACA,oBAAC;AAAA,gBAEC,IAAI;AAAA,gBACJ,aAAY;AAAA,gBACZ,QAAO;AAAA,gBACP,kBAAkB,GAAG;AAAA,gBACrB,IAAI;AAAA,gBACJ,IAAI;AAAA,gBACJ,IAAI;AAAA,eACN;AAAA;AAAA,WACF,IACE;AAAA,UACJ,oBAAC;AAAA,YACC,cAAc,MAAM,gBAAgB,SAAS;AAAA,YAG7C,IAAI;AAAA,YACJ,aAAY;AAAA,YACZ,QAAO;AAAA,YACP,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI;AAAA,WACN;AAAA;AAAA,SArDM,GAsDR;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/SeriesFactory.js

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { ChartContext } from "../ChartContext";
+import { Line, Points, Bars, StackedBar, Area, Pie } from "../series";
+import { getStackedIndex } from "../helpers";
+const SeriesFactory = () => {
+  const {
+    props: { data, groups, types }
+  } = useContext(ChartContext);
+  const render = useMemo(() => {
+    if (types === "pie") {
+      return /* @__PURE__ */ jsx(Pie, {});
+    }
+    return data.map((serie) => {
+      const serieProps = {
+        key: serie.key,
+        serie
+      };
+      if (serie.type === "bar" && groups && getStackedIndex(groups, serie.name) > -1) {
+        return /* @__PURE__ */ jsx(StackedBar, {
+          ...serieProps
+        });
+      }
+      if (serie.type === "bar") {
+        return /* @__PURE__ */ jsx(Bars, {
+          ...serieProps
+        });
+      }
+      if (types === "scatter" && !serie.type || serie.type === "point") {
+        return /* @__PURE__ */ jsx(Points, {
+          ...serieProps
+        });
+      }
+      if (serie.type === "line") {
+        return /* @__PURE__ */ jsx(Line, {
+          ...serieProps
+        });
+      }
+      if (serie.type === "area") {
+        return /* @__PURE__ */ jsx(Area, {
+          ...serieProps
+        });
+      }
+      return /* @__PURE__ */ jsx(Fragment, {});
+    });
+  }, [data, groups, types]);
+  return /* @__PURE__ */ jsx("g", {
+    className: "content",
+    children: render
+  });
+};
+export {
+  SeriesFactory
+};
+//# sourceMappingURL=SeriesFactory.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/SeriesFactory.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable indent */\nimport React, { useContext, useMemo } from 'react';\nimport { ChartContext } from '../ChartContext';\nimport { Line, Points, Bars, StackedBar, Area, Pie } from '../series';\nimport { getStackedIndex } from '../helpers';\nexport const SeriesFactory = () => {\n  const {\n    props: { data, groups, types },\n  } = useContext(ChartContext);\n\n  const render: JSX.Element | JSX.Element[] = useMemo(() => {\n    if (types === 'pie') {\n      return <Pie />;\n    }\n    return data.map((serie) => {\n      const serieProps = {\n        key: serie.key,\n        serie,\n      };\n      if (serie.type === 'bar' && groups && getStackedIndex(groups, serie.name) > -1) {\n        return <StackedBar {...serieProps} />;\n      }\n      if (serie.type === 'bar') {\n        return <Bars {...serieProps} />;\n      }\n      if ((types === 'scatter' && !serie.type) || serie.type === 'point') {\n        return <Points {...serieProps} />;\n      }\n      if (serie.type === 'line') {\n        return <Line {...serieProps} />;\n      }\n      if (serie.type === 'area') {\n        return <Area {...serieProps} />;\n      }\n      return <></>;\n    }) as JSX.Element[];\n  }, [data, groups, types]);\n  return <g className=\"content\">{render}</g>;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,SAAgB,YAAY,eAAe;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,MAAM,QAAQ,MAAM,YAAY,MAAM,WAAW;AAC1D,SAAS,uBAAuB;AACzB,MAAM,gBAAgB,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,QAAQ,MAAM;AAAA,EAC/B,IAAI,WAAW,YAAY;AAE3B,QAAM,SAAsC,QAAQ,MAAM;AACxD,QAAI,UAAU,OAAO;AACnB,aAAO,oBAAC,OAAI;AAAA,IACd;AACA,WAAO,KAAK,IAAI,CAAC,UAAU;AACzB,YAAM,aAAa;AAAA,QACjB,KAAK,MAAM;AAAA,QACX;AAAA,MACF;AACA,UAAI,MAAM,SAAS,SAAS,UAAU,gBAAgB,QAAQ,MAAM,IAAI,IAAI,IAAI;AAC9E,eAAO,oBAAC;AAAA,UAAY,GAAG;AAAA,SAAY;AAAA,MACrC;AACA,UAAI,MAAM,SAAS,OAAO;AACxB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAK,UAAU,aAAa,CAAC,MAAM,QAAS,MAAM,SAAS,SAAS;AAClE,eAAO,oBAAC;AAAA,UAAQ,GAAG;AAAA,SAAY;AAAA,MACjC;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,oBAAC;AAAA,UAAM,GAAG;AAAA,SAAY;AAAA,MAC/B;AACA,aAAO,gCAAE;AAAA,IACX,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,QAAQ,KAAK,CAAC;AACxB,SAAO,oBAAC;AAAA,IAAE,WAAU;AAAA,IAAW;AAAA,GAAO;AACxC;",
+  "names": []
+}

package/dist/esm/graphs/Chart/parts/VerticalScrapper.js

@@ -0,0 +1,112 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo, useState } from "react";
+import { DSPopperJS } from "@elliemae/ds-popperjs";
+import { ThemeContext } from "@elliemae/ds-system";
+import { ChartContext } from "../ChartContext";
+import { StyledMouseOverDetectionBox, StyledTooltipContainer } from "../styles";
+const VerticalScrapper = () => {
+  const {
+    xScale,
+    scrapperPosX,
+    setScrapperPosX,
+    innerHeight,
+    innerWidth,
+    getBandwidth,
+    props: { TooltipRenderer, xAxis, data, scrapper }
+  } = useContext(ChartContext);
+  const theme = useContext(ThemeContext);
+  const [referenceElement, setReferenceElement] = useState();
+  const isBandAxis = !!(!xAxis.type || xAxis.cols);
+  const uniqueData = useMemo(() => {
+    let valueToPositionPerSeries;
+    if (isBandAxis) {
+      valueToPositionPerSeries = data.map(
+        (serie) => serie.data.map((datum) => {
+          const x = xAxis.cols ? xAxis.cols[datum.position] : datum.value.x;
+          const y = typeof datum.value === "number" ? datum.value : datum.value.y;
+          return {
+            position: xScale(x),
+            name: serie.name,
+            xValue: x,
+            yValue: y
+          };
+        })
+      ).flat(1);
+    } else {
+      valueToPositionPerSeries = data.map(
+        (serie) => serie.data.map((datum) => ({
+          position: xScale(datum.value.x),
+          name: serie.name,
+          xValue: datum.value.x,
+          yValue: datum.value.y
+        }))
+      ).flat(1);
+    }
+    const postionUniqueData = {};
+    valueToPositionPerSeries.forEach((set) => {
+      if (postionUniqueData[[set.position]]) {
+        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];
+      } else {
+        postionUniqueData[[set.position]] = [{ ...set }];
+      }
+    });
+    return postionUniqueData;
+  }, [isBandAxis, data, xScale, xAxis.cols]);
+  return /* @__PURE__ */ jsx("g", {
+    children: Object.keys(uniqueData).map((key) => {
+      const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);
+      const datum = uniqueData[key];
+      return /* @__PURE__ */ jsxs("g", {
+        children: [
+          scrapperPosX === xPosition ? /* @__PURE__ */ jsxs("g", {
+            children: [
+              TooltipRenderer ? /* @__PURE__ */ jsx("foreignObject", {
+                children: /* @__PURE__ */ jsxs(DSPopperJS, {
+                  withoutAnimation: true,
+                  withoutArrow: true,
+                  customOffset: [0, 5],
+                  referenceElement,
+                  showPopover: true,
+                  zIndex: theme.zIndex.tooltip,
+                  startPlacementPreference: scrapper.tooltipPreference,
+                  children: [
+                    /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {}),
+                    /* @__PURE__ */ jsx(StyledTooltipContainer, {
+                      children: /* @__PURE__ */ jsx(TooltipRenderer, {
+                        data: datum
+                      })
+                    })
+                  ]
+                })
+              }) : null,
+              /* @__PURE__ */ jsx("line", {
+                ref: setReferenceElement,
+                x1: xPosition,
+                strokeWidth: "2px",
+                stroke: scrapper.color,
+                y1: 0,
+                x2: xPosition,
+                y2: innerHeight,
+                strokeDasharray: (4, 4)
+              })
+            ]
+          }) : null,
+          /* @__PURE__ */ jsx("line", {
+            onMouseEnter: () => setScrapperPosX(xPosition),
+            x1: xPosition,
+            strokeWidth: `${isBandAxis ? getBandwidth() : "2"}px`,
+            stroke: "transparent",
+            y1: 0,
+            x2: xPosition,
+            y2: innerHeight
+          })
+        ]
+      }, key);
+    })
+  });
+};
+export {
+  VerticalScrapper
+};
+//# sourceMappingURL=VerticalScrapper.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/VerticalScrapper.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useState } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { ThemeContext, styled } from '@elliemae/ds-system';\nimport { ChartContext } from '../ChartContext';\nimport { StyledMouseOverDetectionBox, StyledTooltipContainer } from '../styles';\n\nexport const VerticalScrapper = () => {\n  const {\n    xScale,\n    scrapperPosX,\n    setScrapperPosX,\n    innerHeight,\n    innerWidth,\n    getBandwidth,\n    props: { TooltipRenderer, xAxis, data, scrapper },\n  } = useContext(ChartContext);\n  const theme = useContext(ThemeContext);\n  const [referenceElement, setReferenceElement] = useState<React.SVGProps<SVGLineElement> | null>();\n\n  const isBandAxis = !!(!xAxis.type || xAxis.cols);\n\n  const uniqueData = useMemo(() => {\n    let valueToPositionPerSeries;\n    if (isBandAxis) {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum) => {\n            const x = xAxis.cols ? xAxis.cols[datum.position] : datum.value.x;\n            const y = typeof datum.value === 'number' ? datum.value : datum.value.y;\n            return {\n              position: xScale(x),\n              name: serie.name,\n              xValue: x,\n              yValue: y,\n            };\n          }),\n        )\n        .flat(1);\n    } else {\n      valueToPositionPerSeries = data\n        .map((serie) =>\n          serie.data.map((datum) => ({\n            position: xScale(datum.value.x),\n            name: serie.name,\n            xValue: datum.value.x,\n            yValue: datum.value.y,\n          })),\n        )\n        .flat(1);\n    }\n\n    const postionUniqueData = {};\n\n    valueToPositionPerSeries.forEach((set) => {\n      if (postionUniqueData[[set.position]]) {\n        postionUniqueData[[set.position]] = [...postionUniqueData[[set.position]], { ...set }];\n      } else {\n        postionUniqueData[[set.position]] = [{ ...set }];\n      }\n    });\n\n    return postionUniqueData;\n  }, [isBandAxis, data, xScale, xAxis.cols]);\n\n  return (\n    <g>\n      {Object.keys(uniqueData).map((key) => {\n        const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);\n        const datum = uniqueData[key];\n        return (\n          <g key={key}>\n            {scrapperPosX === xPosition ? (\n              <g>\n                {TooltipRenderer ? (\n                  <foreignObject>\n                    <DSPopperJS\n                      withoutAnimation\n                      withoutArrow\n                      customOffset={[0, 5]}\n                      referenceElement={referenceElement}\n                      showPopover\n                      zIndex={theme.zIndex.tooltip}\n                      startPlacementPreference={scrapper.tooltipPreference}\n                    >\n                      <StyledMouseOverDetectionBox />\n                      <StyledTooltipContainer>\n                        <TooltipRenderer data={datum} />\n                      </StyledTooltipContainer>\n                    </DSPopperJS>\n                  </foreignObject>\n                ) : null}\n                <line\n                  ref={setReferenceElement}\n                  x1={xPosition}\n                  strokeWidth=\"2px\"\n                  stroke={scrapper.color}\n                  y1={0}\n                  x2={xPosition}\n                  y2={innerHeight}\n                  strokeDasharray={(4, 4)}\n                />\n              </g>\n            ) : null}\n            <line\n              onMouseEnter={() => setScrapperPosX(xPosition)}\n              // onMouseLeave={() => setScrapperPosY('')}\n              // id=\"horizontal-scrapper-zone\"\n              x1={xPosition}\n              strokeWidth={`${isBandAxis ? getBandwidth() : '2'}px`}\n              stroke=\"transparent\"\n              y1={0}\n              x2={xPosition}\n              y2={innerHeight}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/graphs/Chart/react-desc-prop-types.js

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { globalAttributesPropTypes, PropTypes } from "@elliemae/ds-utilities";
+const defaultProps = {
+  yAxis: {
+    showGrid: true,
+    color: "black",
+    type: "linear"
+  },
+  xAxis: {
+    showGrid: true,
+    color: "black",
+    type: "band"
+  }
+};
+const propTypes = {
+  ...globalAttributesPropTypes,
+  height: PropTypes.number.isRequired.description("height").defaultValue(""),
+  width: PropTypes.number.isRequired.description("height").defaultValue(""),
+  margin: PropTypes.shape({
+    top: PropTypes.number,
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number
+  }).isRequired.description("margin").defaultValue(""),
+  series: PropTypes.arrayOf(PropTypes.object).description("yValue").defaultValue("")
+};
+export {
+  defaultProps,
+  propTypes
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/graphs/Chart/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/react-desc-prop-types.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\ntype MarginT = {\n  top: number;\n  left: number;\n  right: number;\n  bottom: number;\n};\n\nexport declare namespace DSPieT {\n  export interface SeriesT {\n    name: string;\n    data: number;\n    color: string;\n  }\n  export interface Props {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n  }\n}\nexport declare namespace DSChartT {\n  export type SerieTypeT = 'line' | 'bar' | 'stackedBar' | 'spline';\n  export type AxisTypeT = 'log' | 'band' | 'time' | 'linear';\n\n  export interface SeriesT {\n    name: string;\n    data: number[] | { x: number; y: number }[];\n    type: SerieTypeT;\n    scale?: string;\n    color: string;\n  }\n\n  export interface AxisT {\n    showGrid: boolean;\n    color: string;\n    type: AxisTypeT;\n    cols?: number[] | string[] | Date[];\n    padding?: number;\n    beginAtZero?: boolean;\n  }\n\n  export interface InternalData {\n    key: string;\n    group: string;\n    type: DSChartT.SerieTypeT;\n    scale?: string;\n    color: string;\n    values: {\n      key: string;\n      value: number;\n      position: number;\n    }[];\n  }\n\n  export interface OptionalProps {\n    y2Axis?: AxisT;\n    groups?: string[][];\n    types?: 'scatter' | 'pie';\n  }\n\n  export interface DefaultProps {\n    yAxis: AxisT;\n    xAxis: AxisT;\n  }\n\n  export interface RequiredProps {\n    series: SeriesT[];\n    height: number;\n    width: number;\n    margin: MarginT;\n  }\n\n  export interface Props extends OptionalProps, DefaultProps, RequiredProps {}\n}\n\nexport const defaultProps: DSChartT.DefaultProps = {\n  yAxis: {\n    showGrid: true,\n    color: 'black',\n    type: 'linear',\n  },\n  xAxis: {\n    showGrid: true,\n    color: 'black',\n    type: 'band',\n  },\n};\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  height: PropTypes.number.isRequired.description('height').defaultValue(''),\n  width: PropTypes.number.isRequired.description('height').defaultValue(''),\n  margin: PropTypes.shape({\n    top: PropTypes.number,\n    bottom: PropTypes.number,\n    left: PropTypes.number,\n    right: PropTypes.number,\n  })\n    .isRequired.description('margin')\n    .defaultValue(''),\n  series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,iBAAiB;AA6E9C,MAAM,eAAsC;AAAA,EACjD,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,UAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,UAAU,MAAM;AAAA,IACtB,KAAK,UAAU;AAAA,IACf,QAAQ,UAAU;AAAA,IAClB,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,UAAU,QAAQ,UAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
+  "names": []
+}

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { area, curveMonotoneX } from "d3";
+import { Points } from "./Points";
+import { StyledArea } from "../styles";
+import { ChartContext } from "../ChartContext";
+import { getStackedData } from "../helpers";
+const Area = ({ serie }) => {
+  const {
+    props: { xAxis },
+    xScale,
+    yScale,
+    innerHeight,
+    y2Scale,
+    colorScale,
+    activeSerie,
+    stackedData,
+    setActiveSerie
+  } = useContext(ChartContext);
+  const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
+  const areaD3 = useMemo(() => {
+    const serieWithStackedValues = getStackedData(stackedData, serie);
+    if (serieWithStackedValues) {
+      return area().x((_, i) => xScale(serie.data[i].value.x)).y0(([y1]) => finalYScale(y1)).y1(([, y2]) => finalYScale(y2)).curve(curveMonotoneX)(serieWithStackedValues);
+    }
+    return area().x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position)).y0(innerHeight).y1((d) => finalYScale(d.value.y ?? d.value)).curve(curveMonotoneX)(serie.data);
+  }, [stackedData, serie, innerHeight, finalYScale, xScale, xAxis?.cols]);
+  return /* @__PURE__ */ jsxs("g", {
+    onMouseEnter: () => setActiveSerie(serie.key),
+    onMouseLeave: () => setActiveSerie(""),
+    children: [
+      /* @__PURE__ */ jsx(StyledArea, {
+        d: areaD3,
+        isActiveArea: activeSerie === serie.key,
+        fill: colorScale(serie.name)
+      }),
+      /* @__PURE__ */ jsx(Points, {
+        serie
+      })
+    ]
+  });
+};
+export {
+  Area
+};
+//# sourceMappingURL=Area.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Area.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { area, curveMonotoneX } from 'd3';\nimport { Points } from './Points';\nimport { StyledArea } from '../styles';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\nexport const Area = ({ serie }) => {\n  const {\n    props: { xAxis },\n    xScale,\n    yScale,\n    innerHeight,\n    y2Scale,\n    colorScale,\n    activeSerie,\n    stackedData,\n    setActiveSerie,\n  } = useContext(ChartContext);\n\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const areaD3 = useMemo(() => {\n    const serieWithStackedValues = getStackedData(stackedData, serie);\n    if (serieWithStackedValues) {\n      return area()\n        .x((_, i) => xScale(serie.data[i].value.x))\n        .y0(([y1]) => finalYScale(y1))\n        .y1(([, y2]) => finalYScale(y2))\n        .curve(curveMonotoneX)(serieWithStackedValues);\n    }\n    return area()\n      .x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n      .y0(innerHeight)\n      .y1((d) => finalYScale(d.value.y ?? d.value))\n      .curve(curveMonotoneX)(serie.data);\n  }, [stackedData, serie, innerHeight, finalYScale, xScale, xAxis?.cols]);\n\n  return (\n    <g\n      // transform={getBandwidth ? `translate(${getBandwidth() / 2}, 0)` : ''}\n      onMouseEnter={() => setActiveSerie(serie.key)}\n      onMouseLeave={() => setActiveSerie('')}\n    >\n      <StyledArea d={areaD3} isActiveArea={activeSerie === serie.key} fill={colorScale(serie.name)} />\n      <Points serie={serie} />\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,MAAM,sBAAsB;AACrC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AACxB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAM;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAI,wBAAwB;AAC1B,aAAO,KAAK,EACT,EAAE,CAAC,GAAG,MAAM,OAAO,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,EACzC,GAAG,CAAC,CAAC,EAAE,MAAM,YAAY,EAAE,CAAC,EAC5B,GAAG,CAAC,CAAC,EAAE,EAAE,MAAM,YAAY,EAAE,CAAC,EAC9B,MAAM,cAAc,EAAE,sBAAsB;AAAA,IACjD;AACA,WAAO,KAAK,EACT,EAAE,CAAC,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EACrE,GAAG,WAAW,EACd,GAAG,CAAC,MAAM,YAAY,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC3C,MAAM,cAAc,EAAE,MAAM,IAAI;AAAA,EACrC,GAAG,CAAC,aAAa,OAAO,aAAa,aAAa,QAAQ,OAAO,IAAI,CAAC;AAEtE,SACE,qBAAC;AAAA,IAEC,cAAc,MAAM,eAAe,MAAM,GAAG;AAAA,IAC5C,cAAc,MAAM,eAAe,EAAE;AAAA,IAErC;AAAA,0BAAC;AAAA,QAAW,GAAG;AAAA,QAAQ,cAAc,gBAAgB,MAAM;AAAA,QAAK,MAAM,WAAW,MAAM,IAAI;AAAA,OAAG;AAAA,MAC9F,oBAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Rect } from "./Rect";
+import { ChartContext } from "../ChartContext";
+const Bars = ({ serie }) => {
+  const {
+    props: { xAxis, yAxis },
+    innerHeight,
+    xScale,
+    yScale,
+    getBandwidth,
+    subGroupScale,
+    colorScale
+  } = useContext(ChartContext);
+  const isHorizontal = !!yScale.bandwidth;
+  return /* @__PURE__ */ jsx("g", {
+    fill: colorScale(serie.name),
+    children: serie.data.map((bar, i) => {
+      const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();
+      const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - yScale(bar.value.y ?? bar.value);
+      const x = xAxis?.cols?.[i] ?? bar.value.x ?? i;
+      const y = bar.value.y ?? bar.value;
+      const transformX = isHorizontal ? 0 : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? width / 2 * subGroupScale.domain().length : 0);
+      const transformY = isHorizontal ? subGroupScale(serie.name) + yScale(yAxis?.cols?.[i] ?? i) : yScale(y);
+      const diff = xScale(bar.value.x) - width / 2;
+      return /* @__PURE__ */ jsx("g", {
+        transform: `translate(${transformX},${transformY})`,
+        children: /* @__PURE__ */ jsx(Rect, {
+          width,
+          height,
+          label: serie.name,
+          id: bar.key
+        })
+      }, bar.key);
+    })
+  });
+};
+export {
+  Bars
+};
+//# sourceMappingURL=Bars.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Bars.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { ScaleBand } from 'd3';\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { DSChartT } from '../react-desc-prop-types';\n\ninterface BarsT {\n  serie: DSChartT.InternalData;\n}\nexport const Bars = ({ serie }: BarsT) => {\n  const {\n    props: { xAxis, yAxis },\n    innerHeight,\n    xScale,\n    yScale,\n    getBandwidth,\n    subGroupScale,\n    colorScale,\n  } = useContext(ChartContext);\n\n  const isHorizontal = !!(yScale as ScaleBand<string>).bandwidth;\n  return (\n    <g fill={colorScale(serie.name)}>\n      {serie.data.map((bar, i) => {\n        const width = isHorizontal ? xScale(bar.value) : subGroupScale?.bandwidth();\n        const height = isHorizontal ? subGroupScale?.bandwidth() : innerHeight - yScale(bar.value.y ?? bar.value);\n\n        const x = xAxis?.cols?.[i] ?? bar.value.x ?? i;\n        const y = bar.value.y ?? bar.value;\n\n        const transformX = isHorizontal\n          ? 0\n          : subGroupScale(serie.name) + xScale(x) - (bar.value.x ? (width / 2) * subGroupScale.domain().length : 0);\n        const transformY = isHorizontal ? subGroupScale(serie.name) + yScale(yAxis?.cols?.[i] ?? i) : yScale(y);\n\n        const diff = xScale(bar.value.x) - width / 2;\n        return (\n          <g key={bar.key} transform={`translate(${transformX},${transformY})`}>\n            <Rect width={width} height={height} label={serie.name} id={bar.key} />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAMtB,MAAM,OAAO,CAAC,EAAE,MAAM,MAAa;AACxC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,MAAM;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,eAAe,CAAC,CAAE,OAA6B;AACrD,SACE,oBAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAC3B,gBAAM,KAAK,IAAI,CAAC,KAAK,MAAM;AAC1B,YAAM,QAAQ,eAAe,OAAO,IAAI,KAAK,IAAI,eAAe,UAAU;AAC1E,YAAM,SAAS,eAAe,eAAe,UAAU,IAAI,cAAc,OAAO,IAAI,MAAM,KAAK,IAAI,KAAK;AAExG,YAAM,IAAI,OAAO,OAAO,MAAM,IAAI,MAAM,KAAK;AAC7C,YAAM,IAAI,IAAI,MAAM,KAAK,IAAI;AAE7B,YAAM,aAAa,eACf,IACA,cAAc,MAAM,IAAI,IAAI,OAAO,CAAC,KAAK,IAAI,MAAM,IAAK,QAAQ,IAAK,cAAc,OAAO,EAAE,SAAS;AACzG,YAAM,aAAa,eAAe,cAAc,MAAM,IAAI,IAAI,OAAO,OAAO,OAAO,MAAM,CAAC,IAAI,OAAO,CAAC;AAEtG,YAAM,OAAO,OAAO,IAAI,MAAM,CAAC,IAAI,QAAQ;AAC3C,aACE,oBAAC;AAAA,QAAgB,WAAW,aAAa,cAAc;AAAA,QACrD,8BAAC;AAAA,UAAK;AAAA,UAAc;AAAA,UAAgB,OAAO,MAAM;AAAA,UAAM,IAAI,IAAI;AAAA,SAAK;AAAA,SAD9D,IAAI,GAEZ;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "names": []
+}