@elliemae/ds-dataviz 3.8.0-rc.3 → 3.8.0

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

@@ -0,0 +1,138 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var VerticalScrapper_exports = {};
+__export(VerticalScrapper_exports, {
+  VerticalScrapper: () => VerticalScrapper
+});
+module.exports = __toCommonJS(VerticalScrapper_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ds_popperjs = require("@elliemae/ds-popperjs");
+var import_ds_system = require("@elliemae/ds-system");
+var import_ChartContext = require("../ChartContext");
+var import_styles = require("../styles");
+const VerticalScrapper = () => {
+  const {
+    xScale,
+    scrapperPosX,
+    setScrapperPosX,
+    innerHeight,
+    innerWidth,
+    getBandwidth,
+    props: { TooltipRenderer, xAxis, data, scrapper }
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const theme = (0, import_react.useContext)(import_ds_system.ThemeContext);
+  const [referenceElement, setReferenceElement] = (0, import_react.useState)();
+  const isBandAxis = !!(!xAxis.type || xAxis.cols);
+  const uniqueData = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)("g", {
+    children: Object.keys(uniqueData).map((key) => {
+      const xPosition = parseFloat(key) + (isBandAxis ? getBandwidth() / 2 : 0);
+      const datum = uniqueData[key];
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+        children: [
+          scrapperPosX === xPosition ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+            children: [
+              TooltipRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", {
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_popperjs.DSPopperJS, {
+                  withoutAnimation: true,
+                  withoutArrow: true,
+                  customOffset: [0, 5],
+                  referenceElement,
+                  showPopover: true,
+                  zIndex: theme.zIndex.tooltip,
+                  startPlacementPreference: scrapper.tooltipPreference,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, {
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, {
+                        data: datum
+                      })
+                    })
+                  ]
+                })
+              }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", {
+                ref: setReferenceElement,
+                x1: xPosition,
+                strokeWidth: "2px",
+                stroke: scrapper.color,
+                y1: 0,
+                x2: xPosition,
+                y2: innerHeight,
+                strokeDasharray: (4, 4)
+              })
+            ]
+          }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", {
+            onMouseEnter: () => setScrapperPosX(xPosition),
+            x1: xPosition,
+            strokeWidth: `${isBandAxis ? getBandwidth() : "2"}px`,
+            stroke: "transparent",
+            y1: 0,
+            x2: xPosition,
+            y2: innerHeight
+          })
+        ]
+      }, key);
+    })
+  });
+};
+//# sourceMappingURL=VerticalScrapper.js.map

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

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

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChartContainer } from "./parts/ChartContainer";
+import { Pie } from "./series";
+import { PieChartContext } from "./ChartContext";
+import { usePie } from "./config/usePie";
+import { ColorLegend } from "./parts/ColorLegend";
+const PieChart = (props) => {
+  const ctx = usePie(props);
+  return /* @__PURE__ */ jsx(PieChartContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsxs(ChartContainer, {
+      children: [
+        /* @__PURE__ */ jsx(ColorLegend, {}),
+        /* @__PURE__ */ jsx(Pie, {})
+      ]
+    })
+  });
+};
+export {
+  PieChart
+};
+//# sourceMappingURL=Pie.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/Pie.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer';\nimport { Pie } from './series';\nimport { PieChartContext } from './ChartContext';\nimport { usePie } from './config/usePie';\nimport type { DSPieT } from './react-desc-prop-types';\nimport { ColorLegend } from './parts/ColorLegend';\nexport const PieChart: React.ComponentType<DSPieT.Props> = (props) => {\n  const ctx = usePie(props);\n  return (\n    <PieChartContext.Provider value={ctx}>\n      <ChartContainer>\n        <ColorLegend />\n        <Pie />\n      </ChartContainer>\n    </PieChartContext.Provider>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,sBAAsB;AAC/B,SAAS,WAAW;AACpB,SAAS,uBAAuB;AAChC,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AACrB,MAAM,WAA8C,CAAC,UAAU;AACpE,QAAM,MAAM,OAAO,KAAK;AACxB,SACE,oBAAC,gBAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,IAC/B,+BAAC;AAAA,MACC;AAAA,4BAAC,eAAY;AAAA,QACb,oBAAC,OAAI;AAAA;AAAA,KACP;AAAA,GACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useRef } from "react";
+import { select, axisBottom, timeFormat } from "d3";
+import { StyledAxis, StyledGrid } from "../styles";
+import { ChartContext } from "../ChartContext";
+const AxisBottom = () => {
+  const {
+    props: { xAxis, xAxisLabelOffset = 50, xAxisLabel },
+    innerHeight,
+    innerWidth,
+    xScale,
+    tickOffset = 3
+  } = useContext(ChartContext);
+  const axisRef = useRef();
+  const gridRef = useRef();
+  const ticks = xScale.ticks?.();
+  useEffect(() => {
+    const grid = axisBottom(xScale).tickSize(xAxis?.showGrid ? -innerHeight : 0).tickFormat("").tickSizeOuter(0);
+    const axis = axisBottom(xScale);
+    if (xAxis.tickValues && ticks) {
+      console.log(ticks, "ticks");
+      const finalTicks = xAxis.overwriteTicks ? xAxis.tickValues : [...ticks, ...xAxis.tickValues];
+      axis.tickValues(finalTicks);
+    }
+    if (xAxis.tickFormat) {
+      if (typeof xAxis.tickFormat === "string") {
+        const formatGenerator = timeFormat(xAxis.tickFormat);
+        axis.tickFormat((d) => formatGenerator(d));
+      }
+      if (typeof xAxis.tickFormat === "function") {
+        axis.tickFormat(xAxis.tickFormat);
+      }
+    }
+    select(gridRef.current).call(grid);
+    select(axisRef.current).call(axis);
+  }, [innerHeight, ticks, xAxis?.showGrid, xAxis.tickFormat, xAxis.tickValues, xScale]);
+  return /* @__PURE__ */ jsxs("g", {
+    transform: `translate(0,${innerHeight})`,
+    children: [
+      /* @__PURE__ */ jsx(StyledAxis, {
+        ref: axisRef,
+        children: /* @__PURE__ */ jsx("text", {
+          className: "axis-label",
+          x: innerWidth / 2,
+          y: xAxisLabelOffset,
+          textAnchor: "middle",
+          children: xAxis.label
+        })
+      }),
+      /* @__PURE__ */ jsx(StyledGrid, {
+        ref: gridRef
+      })
+    ]
+  });
+};
+export {
+  AxisBottom
+};
+//# sourceMappingURL=AxisBottom.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/AxisBottom.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisBottom, timeFormat } from 'd3';\nimport { StyledAxis, StyledGrid } from '../styles';\nimport { ChartContext } from '../ChartContext';\n\nexport const AxisBottom = () => {\n  const {\n    props: { xAxis, xAxisLabelOffset = 50, xAxisLabel },\n    innerHeight,\n    innerWidth,\n    xScale,\n    tickOffset = 3,\n  } = useContext(ChartContext);\n\n  const axisRef = useRef();\n  const gridRef = useRef();\n  const ticks = xScale.ticks?.();\n  useEffect(() => {\n    const grid = axisBottom(xScale)\n      .tickSize(xAxis?.showGrid ? -innerHeight : 0)\n      .tickFormat('')\n      .tickSizeOuter(0);\n\n    const axis = axisBottom(xScale);\n\n    if (xAxis.tickValues && ticks) {\n      console.log(ticks, 'ticks');\n      const finalTicks = xAxis.overwriteTicks ? xAxis.tickValues : [...ticks, ...xAxis.tickValues];\n      axis.tickValues(finalTicks);\n    }\n\n    if (xAxis.tickFormat) {\n      if (typeof xAxis.tickFormat === 'string') {\n        const formatGenerator = timeFormat(xAxis.tickFormat);\n        axis.tickFormat((d) => formatGenerator(d));\n      }\n      if (typeof xAxis.tickFormat === 'function') {\n        axis.tickFormat(xAxis.tickFormat);\n      }\n    }\n\n    select(gridRef.current).call(grid);\n    select(axisRef.current).call(axis);\n  }, [innerHeight, ticks, xAxis?.showGrid, xAxis.tickFormat, xAxis.tickValues, xScale]);\n\n  return (\n    <g transform={`translate(0,${innerHeight})`}>\n      <StyledAxis ref={axisRef}>\n        <text className=\"axis-label\" x={innerWidth / 2} y={xAxisLabelOffset} textAnchor=\"middle\">\n          {xAxis.label}\n        </text>\n      </StyledAxis>\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,YAAY,kBAAkB;AAC/C,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAEtB,MAAM,aAAa,MAAM;AAC9B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,mBAAmB,IAAI,WAAW;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,EACf,IAAI,WAAW,YAAY;AAE3B,QAAM,UAAU,OAAO;AACvB,QAAM,UAAU,OAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ;AAC7B,YAAU,MAAM;AACd,UAAM,OAAO,WAAW,MAAM,EAC3B,SAAS,OAAO,WAAW,CAAC,cAAc,CAAC,EAC3C,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,OAAO,WAAW,MAAM;AAE9B,QAAI,MAAM,cAAc,OAAO;AAC7B,cAAQ,IAAI,OAAO,OAAO;AAC1B,YAAM,aAAa,MAAM,iBAAiB,MAAM,aAAa,CAAC,GAAG,OAAO,GAAG,MAAM,UAAU;AAC3F,WAAK,WAAW,UAAU;AAAA,IAC5B;AAEA,QAAI,MAAM,YAAY;AACpB,UAAI,OAAO,MAAM,eAAe,UAAU;AACxC,cAAM,kBAAkB,WAAW,MAAM,UAAU;AACnD,aAAK,WAAW,CAAC,MAAM,gBAAgB,CAAC,CAAC;AAAA,MAC3C;AACA,UAAI,OAAO,MAAM,eAAe,YAAY;AAC1C,aAAK,WAAW,MAAM,UAAU;AAAA,MAClC;AAAA,IACF;AAEA,WAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,WAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG,CAAC,aAAa,OAAO,OAAO,UAAU,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AAEpF,SACE,qBAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAC3B;AAAA,0BAAC;AAAA,QAAW,KAAK;AAAA,QACf,8BAAC;AAAA,UAAK,WAAU;AAAA,UAAa,GAAG,aAAa;AAAA,UAAG,GAAG;AAAA,UAAkB,YAAW;AAAA,UAC7E,gBAAM;AAAA,SACT;AAAA,OACF;AAAA,MACA,oBAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useRef } from "react";
+import { select, axisLeft } from "d3";
+import { StyledAxis, StyledGrid } from "../styles";
+import { ChartContext } from "../ChartContext";
+const AxisLeft = () => {
+  const {
+    props: { yAxis, yAxisLabelOffset = 45, yAxisLabel },
+    innerHeight,
+    innerWidth,
+    yScale
+  } = useContext(ChartContext);
+  const ref = useRef();
+  const gridRef = useRef();
+  const ticks = yScale.ticks?.();
+  useEffect(() => {
+    const axis = axisLeft(yScale);
+    if (yAxis.tickValues && ticks) {
+      console.log(ticks, "ticks");
+      const finalTicks = yAxis.overwriteTicks ? yAxis.tickValues : [...ticks, ...yAxis.tickValues];
+      axis.tickValues(finalTicks);
+    }
+    if (yAxis.tickFormat) {
+      axis.tickFormat(yAxis.tickFormat);
+    }
+    const grid = axisLeft(yScale).tickFormat("").tickSize(yAxis?.showGrid ? -innerWidth : 0).tickSizeOuter(0);
+    select(ref.current).call(axis);
+    select(gridRef.current).call(grid);
+  }, [innerWidth, ticks, yAxis.overwriteTicks, yAxis?.showGrid, yAxis.tickFormat, yAxis.tickValues, yScale]);
+  return /* @__PURE__ */ jsxs("g", {
+    children: [
+      /* @__PURE__ */ jsx(StyledAxis, {
+        ref,
+        color: yAxis.color,
+        children: /* @__PURE__ */ jsx("text", {
+          className: "axis-label",
+          textAnchor: "middle",
+          transform: `translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`,
+          children: yAxis?.label
+        })
+      }),
+      " ",
+      /* @__PURE__ */ jsx(StyledGrid, {
+        ref: gridRef
+      })
+    ]
+  });
+};
+export {
+  AxisLeft
+};
+//# sourceMappingURL=AxisLeft.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/AxisLeft.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisLeft } from 'd3';\nimport { StyledAxis, StyledGrid } from '../styles';\nimport { ChartContext } from '../ChartContext';\n\nexport const AxisLeft = () => {\n  const {\n    props: { yAxis, yAxisLabelOffset = 45, yAxisLabel },\n    innerHeight,\n    innerWidth,\n    yScale,\n  } = useContext(ChartContext);\n\n  const ref = useRef();\n  const gridRef = useRef();\n  const ticks = yScale.ticks?.();\n\n  useEffect(() => {\n    const axis = axisLeft(yScale);\n\n    if (yAxis.tickValues && ticks) {\n      console.log(ticks, 'ticks');\n      const finalTicks = yAxis.overwriteTicks ? yAxis.tickValues : [...ticks, ...yAxis.tickValues];\n      axis.tickValues(finalTicks);\n    }\n\n    if (yAxis.tickFormat) {\n      axis.tickFormat(yAxis.tickFormat);\n    }\n\n    const grid = axisLeft(yScale)\n      .tickFormat('')\n      .tickSize(yAxis?.showGrid ? -innerWidth : 0)\n      .tickSizeOuter(0);\n\n    select(ref.current).call(axis);\n    select(gridRef.current).call(grid);\n  }, [innerWidth, ticks, yAxis.overwriteTicks, yAxis?.showGrid, yAxis.tickFormat, yAxis.tickValues, yScale]);\n  return (\n    <g>\n      <StyledAxis ref={ref} color={yAxis.color}>\n        <text\n          className=\"axis-label\"\n          textAnchor=\"middle\"\n          transform={`translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`}\n        >\n          {yAxis?.label}\n        </text>\n      </StyledAxis>{' '}\n      <StyledGrid ref={gridRef}></StyledGrid>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,gBAAgB;AACjC,SAAS,YAAY,kBAAkB;AACvC,SAAS,oBAAoB;AAEtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,mBAAmB,IAAI,WAAW;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,MAAM,OAAO;AACnB,QAAM,UAAU,OAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ;AAE7B,YAAU,MAAM;AACd,UAAM,OAAO,SAAS,MAAM;AAE5B,QAAI,MAAM,cAAc,OAAO;AAC7B,cAAQ,IAAI,OAAO,OAAO;AAC1B,YAAM,aAAa,MAAM,iBAAiB,MAAM,aAAa,CAAC,GAAG,OAAO,GAAG,MAAM,UAAU;AAC3F,WAAK,WAAW,UAAU;AAAA,IAC5B;AAEA,QAAI,MAAM,YAAY;AACpB,WAAK,WAAW,MAAM,UAAU;AAAA,IAClC;AAEA,UAAM,OAAO,SAAS,MAAM,EACzB,WAAW,EAAE,EACb,SAAS,OAAO,WAAW,CAAC,aAAa,CAAC,EAC1C,cAAc,CAAC;AAElB,WAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAC7B,WAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG,CAAC,YAAY,OAAO,MAAM,gBAAgB,OAAO,UAAU,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AACzG,SACE,qBAAC;AAAA,IACC;AAAA,0BAAC;AAAA,QAAW;AAAA,QAAU,OAAO,MAAM;AAAA,QACjC,8BAAC;AAAA,UACC,WAAU;AAAA,UACV,YAAW;AAAA,UACX,WAAW,aAAa,CAAC,oBAAoB,cAAc;AAAA,UAE1D,iBAAO;AAAA,SACV;AAAA,OACF;AAAA,MAAc;AAAA,MACd,oBAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useRef } from "react";
+import { select, axisRight } from "d3";
+import { StyledAxis } from "../styles";
+import { ChartContext } from "../ChartContext";
+const AxisRight = () => {
+  const {
+    props: { y2Axis, yAxisLabelOffset = 45, y2AxisLabel },
+    innerHeight,
+    innerWidth,
+    y2Scale
+  } = useContext(ChartContext);
+  if (!y2Axis)
+    return null;
+  const ref = useRef();
+  useEffect(() => {
+    const axis = axisRight(y2Scale).tickSizeOuter(0);
+    select(ref.current).call(axis);
+  }, [innerWidth, y2Scale]);
+  return /* @__PURE__ */ jsx("g", {
+    transform: `translate(${innerWidth},0)`,
+    children: /* @__PURE__ */ jsx(StyledAxis, {
+      ref,
+      color: y2Axis.color,
+      children: /* @__PURE__ */ jsx("text", {
+        className: "axis-label",
+        textAnchor: "middle",
+        transform: `translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`
+      })
+    })
+  });
+};
+export {
+  AxisRight
+};
+//# sourceMappingURL=AxisRight.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/parts/AxisRight.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useEffect, useRef } from 'react';\nimport { select, axisRight } from 'd3';\nimport { StyledAxis } from '../styles';\nimport { ChartContext } from '../ChartContext';\n\nexport const AxisRight = () => {\n  const {\n    props: { y2Axis, yAxisLabelOffset = 45, y2AxisLabel },\n    innerHeight,\n    innerWidth,\n    y2Scale,\n  } = useContext(ChartContext);\n\n  if (!y2Axis) return null;\n  const ref = useRef();\n  useEffect(() => {\n    const axis = axisRight(y2Scale).tickSizeOuter(0);\n\n    select(ref.current).call(axis);\n  }, [innerWidth, y2Scale]);\n  return (\n    <g transform={`translate(${innerWidth},0)`}>\n      <StyledAxis ref={ref} color={y2Axis.color}>\n        <text\n          className=\"axis-label\"\n          textAnchor=\"middle\"\n          transform={`translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`}\n        >\n          {/* {y2Axis?.label} */}\n        </text>\n      </StyledAxis>\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,WAAW,cAAc;AACrD,SAAS,QAAQ,iBAAiB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,mBAAmB,IAAI,YAAY;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,MAAI,CAAC;AAAQ,WAAO;AACpB,QAAM,MAAM,OAAO;AACnB,YAAU,MAAM;AACd,UAAM,OAAO,UAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,WAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAAA,EAC/B,GAAG,CAAC,YAAY,OAAO,CAAC;AACxB,SACE,oBAAC;AAAA,IAAE,WAAW,aAAa;AAAA,IACzB,8BAAC;AAAA,MAAW;AAAA,MAAU,OAAO,OAAO;AAAA,MAClC,8BAAC;AAAA,QACC,WAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAW,aAAa,CAAC,oBAAoB,cAAc;AAAA,OAG7D;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "names": []
+}

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/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": []
+}