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

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

@@ -0,0 +1,49 @@
+"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 Pie_exports = {};
+__export(Pie_exports, {
+  PieChart: () => PieChart
+});
+module.exports = __toCommonJS(Pie_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ChartContainer = require("./parts/ChartContainer");
+var import_series = require("./series");
+var import_ChartContext = require("./ChartContext");
+var import_usePie = require("./config/usePie");
+var import_ColorLegend = require("./parts/ColorLegend");
+const PieChart = (props) => {
+  const ctx = (0, import_usePie.usePie)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartContext.PieChartContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartContainer.ChartContainer, {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorLegend.ColorLegend, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_series.Pie, {})
+      ]
+    })
+  });
+};
+//# sourceMappingURL=Pie.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/graphs/Chart/Pie.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,4BAA+B;AAC/B,oBAAoB;AACpB,0BAAgC;AAChC,oBAAuB;AAEvB,yBAA4B;AACrB,MAAM,WAA8C,CAAC,UAAU;AACpE,QAAM,UAAM,sBAAO,KAAK;AACxB,SACE,4CAAC,oCAAgB,UAAhB;AAAA,IAAyB,OAAO;AAAA,IAC/B,uDAAC;AAAA,MACC;AAAA,oDAAC,kCAAY;AAAA,QACb,4CAAC,qBAAI;AAAA;AAAA,KACP;AAAA,GACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,86 @@
+"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 AxisBottom_exports = {};
+__export(AxisBottom_exports, {
+  AxisBottom: () => AxisBottom
+});
+module.exports = __toCommonJS(AxisBottom_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_d3 = require("d3");
+var import_styles = require("../styles");
+var import_ChartContext = require("../ChartContext");
+const AxisBottom = () => {
+  const {
+    props: { xAxis, xAxisLabelOffset = 50, xAxisLabel },
+    innerHeight,
+    innerWidth,
+    xScale,
+    tickOffset = 3
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const axisRef = (0, import_react.useRef)();
+  const gridRef = (0, import_react.useRef)();
+  const ticks = xScale.ticks?.();
+  (0, import_react.useEffect)(() => {
+    const grid = (0, import_d3.axisBottom)(xScale).tickSize(xAxis?.showGrid ? -innerHeight : 0).tickFormat("").tickSizeOuter(0);
+    const axis = (0, import_d3.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 = (0, import_d3.timeFormat)(xAxis.tickFormat);
+        axis.tickFormat((d) => formatGenerator(d));
+      }
+      if (typeof xAxis.tickFormat === "function") {
+        axis.tickFormat(xAxis.tickFormat);
+      }
+    }
+    (0, import_d3.select)(gridRef.current).call(grid);
+    (0, import_d3.select)(axisRef.current).call(axis);
+  }, [innerHeight, ticks, xAxis?.showGrid, xAxis.tickFormat, xAxis.tickValues, xScale]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    transform: `translate(0,${innerHeight})`,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, {
+        ref: axisRef,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+          className: "axis-label",
+          x: innerWidth / 2,
+          y: xAxisLabelOffset,
+          textAnchor: "middle",
+          children: xAxis.label
+        })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, {
+        ref: gridRef
+      })
+    ]
+  });
+};
+//# sourceMappingURL=AxisBottom.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/parts/AxisBottom.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAqD;AACrD,gBAA+C;AAC/C,oBAAuC;AACvC,0BAA6B;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,QAAI,yBAAW,gCAAY;AAE3B,QAAM,cAAU,qBAAO;AACvB,QAAM,cAAU,qBAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ;AAC7B,8BAAU,MAAM;AACd,UAAM,WAAO,sBAAW,MAAM,EAC3B,SAAS,OAAO,WAAW,CAAC,cAAc,CAAC,EAC3C,WAAW,EAAE,EACb,cAAc,CAAC;AAElB,UAAM,WAAO,sBAAW,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,sBAAkB,sBAAW,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,0BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AACjC,0BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG,CAAC,aAAa,OAAO,OAAO,UAAU,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AAEpF,SACE,6CAAC;AAAA,IAAE,WAAW,eAAe;AAAA,IAC3B;AAAA,kDAAC;AAAA,QAAW,KAAK;AAAA,QACf,sDAAC;AAAA,UAAK,WAAU;AAAA,UAAa,GAAG,aAAa;AAAA,UAAG,GAAG;AAAA,UAAkB,YAAW;AAAA,UAC7E,gBAAM;AAAA,SACT;AAAA,OACF;AAAA,MACA,4CAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,79 @@
+"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 AxisLeft_exports = {};
+__export(AxisLeft_exports, {
+  AxisLeft: () => AxisLeft
+});
+module.exports = __toCommonJS(AxisLeft_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_d3 = require("d3");
+var import_styles = require("../styles");
+var import_ChartContext = require("../ChartContext");
+const AxisLeft = () => {
+  const {
+    props: { yAxis, yAxisLabelOffset = 45, yAxisLabel },
+    innerHeight,
+    innerWidth,
+    yScale
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  const ref = (0, import_react.useRef)();
+  const gridRef = (0, import_react.useRef)();
+  const ticks = yScale.ticks?.();
+  (0, import_react.useEffect)(() => {
+    const axis = (0, import_d3.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 = (0, import_d3.axisLeft)(yScale).tickFormat("").tickSize(yAxis?.showGrid ? -innerWidth : 0).tickSizeOuter(0);
+    (0, import_d3.select)(ref.current).call(axis);
+    (0, import_d3.select)(gridRef.current).call(grid);
+  }, [innerWidth, ticks, yAxis.overwriteTicks, yAxis?.showGrid, yAxis.tickFormat, yAxis.tickValues, yScale]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, {
+        ref,
+        color: yAxis.color,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+          className: "axis-label",
+          textAnchor: "middle",
+          transform: `translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`,
+          children: yAxis?.label
+        })
+      }),
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledGrid, {
+        ref: gridRef
+      })
+    ]
+  });
+};
+//# sourceMappingURL=AxisLeft.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/parts/AxisLeft.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAqD;AACrD,gBAAiC;AACjC,oBAAuC;AACvC,0BAA6B;AAEtB,MAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,mBAAmB,IAAI,WAAW;AAAA,IAClD;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,QAAM,UAAM,qBAAO;AACnB,QAAM,cAAU,qBAAO;AACvB,QAAM,QAAQ,OAAO,QAAQ;AAE7B,8BAAU,MAAM;AACd,UAAM,WAAO,oBAAS,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,WAAO,oBAAS,MAAM,EACzB,WAAW,EAAE,EACb,SAAS,OAAO,WAAW,CAAC,aAAa,CAAC,EAC1C,cAAc,CAAC;AAElB,0BAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAC7B,0BAAO,QAAQ,OAAO,EAAE,KAAK,IAAI;AAAA,EACnC,GAAG,CAAC,YAAY,OAAO,MAAM,gBAAgB,OAAO,UAAU,MAAM,YAAY,MAAM,YAAY,MAAM,CAAC;AACzG,SACE,6CAAC;AAAA,IACC;AAAA,kDAAC;AAAA,QAAW;AAAA,QAAU,OAAO,MAAM;AAAA,QACjC,sDAAC;AAAA,UACC,WAAU;AAAA,UACV,YAAW;AAAA,UACX,WAAW,aAAa,CAAC,oBAAoB,cAAc;AAAA,UAE1D,iBAAO;AAAA,SACV;AAAA,OACF;AAAA,MAAc;AAAA,MACd,4CAAC;AAAA,QAAW,KAAK;AAAA,OAAS;AAAA;AAAA,GAC5B;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,63 @@
+"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 AxisRight_exports = {};
+__export(AxisRight_exports, {
+  AxisRight: () => AxisRight
+});
+module.exports = __toCommonJS(AxisRight_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_d3 = require("d3");
+var import_styles = require("../styles");
+var import_ChartContext = require("../ChartContext");
+const AxisRight = () => {
+  const {
+    props: { y2Axis, yAxisLabelOffset = 45, y2AxisLabel },
+    innerHeight,
+    innerWidth,
+    y2Scale
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  if (!y2Axis)
+    return null;
+  const ref = (0, import_react.useRef)();
+  (0, import_react.useEffect)(() => {
+    const axis = (0, import_d3.axisRight)(y2Scale).tickSizeOuter(0);
+    (0, import_d3.select)(ref.current).call(axis);
+  }, [innerWidth, y2Scale]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
+    transform: `translate(${innerWidth},0)`,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledAxis, {
+      ref,
+      color: y2Axis.color,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+        className: "axis-label",
+        textAnchor: "middle",
+        transform: `translate(${-yAxisLabelOffset},${innerHeight / 2}) rotate(-90)`
+      })
+    })
+  });
+};
+//# sourceMappingURL=AxisRight.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/parts/AxisRight.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAqD;AACrD,gBAAkC;AAClC,oBAA2B;AAC3B,0BAA6B;AAEtB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ,mBAAmB,IAAI,YAAY;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,gCAAY;AAE3B,MAAI,CAAC;AAAQ,WAAO;AACpB,QAAM,UAAM,qBAAO;AACnB,8BAAU,MAAM;AACd,UAAM,WAAO,qBAAU,OAAO,EAAE,cAAc,CAAC;AAE/C,0BAAO,IAAI,OAAO,EAAE,KAAK,IAAI;AAAA,EAC/B,GAAG,CAAC,YAAY,OAAO,CAAC;AACxB,SACE,4CAAC;AAAA,IAAE,WAAW,aAAa;AAAA,IACzB,sDAAC;AAAA,MAAW;AAAA,MAAU,OAAO,OAAO;AAAA,MAClC,sDAAC;AAAA,QACC,WAAU;AAAA,QACV,YAAW;AAAA,QACX,WAAW,aAAa,CAAC,oBAAoB,cAAc;AAAA,OAG7D;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,70 @@
+"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 ColorLegend_exports = {};
+__export(ColorLegend_exports, {
+  ColorLegend: () => ColorLegend
+});
+module.exports = __toCommonJS(ColorLegend_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ChartContext = require("../ChartContext");
+const ColorLegend = ({ tickSpacing = 20, tickSize = 5, tickTextOffset = 20 }) => {
+  const {
+    colorScale,
+    innerWidth,
+    props: { colorLegend }
+  } = (0, import_react.useContext)(import_ChartContext.ChartContext);
+  if (!colorLegend)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+    transform: `translate(${innerWidth + 30},30)`,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+        x: 35,
+        y: -25,
+        className: "axis-label",
+        textAnchor: "middle",
+        children: colorLegend.label
+      }),
+      colorScale.domain().map((domainValue, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+        className: "tick",
+        transform: `translate(0,${i * tickSpacing})`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+            fill: colorScale(domainValue),
+            r: 4
+          }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+            x: tickTextOffset,
+            dy: ".32em",
+            children: domainValue
+          })
+        ]
+      }))
+    ]
+  });
+};
+//# sourceMappingURL=ColorLegend.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/parts/ColorLegend.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAkC;AAClC,0BAA6B;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,QAAI,yBAAW,gCAAY;AAE3B,MAAI,CAAC;AAAa,WAAO;AACzB,SACE,6CAAC;AAAA,IAAE,WAAW,aAAa,aAAa;AAAA,IACtC;AAAA,kDAAC;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,6CAAC;AAAA,QAAE,WAAU;AAAA,QAAO,WAAW,eAAe,IAAI;AAAA,QAChD;AAAA,sDAAC;AAAA,YAAO,MAAM,WAAW,WAAW;AAAA,YAAG,GAAG;AAAA,WAAG;AAAA,UAC7C,4CAAC;AAAA,YAAK,GAAG;AAAA,YAAgB,IAAG;AAAA,YACzB;AAAA,WACH;AAAA;AAAA,OACF,CACD;AAAA;AAAA,GACH;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,130 @@
+"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 Scrapper_exports = {};
+__export(Scrapper_exports, {
+  Scrapper: () => Scrapper
+});
+module.exports = __toCommonJS(Scrapper_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 Scrapper = () => {
+  const {
+    yScale,
+    y2Scale,
+    scrapperPosY,
+    setScrapperPosY,
+    xScale,
+    innerHeight,
+    innerWidth,
+    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 uniqueData = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)("g", {
+    children: Object.keys(uniqueData).map((key) => {
+      const yPosition = parseFloat(key);
+      const datum = uniqueData[key];
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+        children: [
+          scrapperPosY === yPosition ? /* @__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: innerWidth,
+                strokeWidth: "2px",
+                stroke: "transparent",
+                y1: yPosition,
+                x2: innerWidth,
+                y2: yPosition
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", {
+                x1: 0,
+                strokeWidth: "2px",
+                stroke: "grey",
+                strokeDasharray: (4, 4),
+                y1: yPosition,
+                x2: innerWidth,
+                y2: yPosition
+              })
+            ]
+          }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", {
+            onMouseEnter: () => setScrapperPosY(yPosition),
+            x1: 0,
+            strokeWidth: "4px",
+            stroke: "transparent",
+            y1: yPosition,
+            x2: innerWidth,
+            y2: yPosition
+          })
+        ]
+      }, key);
+    })
+  });
+};
+//# sourceMappingURL=Scrapper.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/graphs/Chart/parts/Scrapper.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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAqD;AACrD,yBAA2B;AAC3B,uBAAqC;AACrC,0BAA6B;AAC7B,oBAAoE;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,QAAI,yBAAW,gCAAY;AAC3B,QAAM,YAAQ,yBAAW,6BAAY;AACrC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAgD;AAEhG,QAAM,iBAAa,sBAAQ,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,4CAAC;AAAA,IACE,iBAAO,KAAK,UAAU,EAAE,IAAI,CAAC,QAAQ;AACpC,YAAM,YAAY,WAAW,GAAG;AAChC,YAAM,QAAQ,WAAW;AACzB,aACE,6CAAC;AAAA,QACE;AAAA,2BAAiB,YAChB,6CAAC;AAAA,YACE;AAAA,gCACC,4CAAC;AAAA,gBACC,uDAAC;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,gEAAC,6CAA4B;AAAA,oBAC7B,4CAAC;AAAA,sBACC,sDAAC;AAAA,wBAAgB,MAAM;AAAA,uBAAO;AAAA,qBAChC;AAAA;AAAA,iBACF;AAAA,eACF,IACE;AAAA,cACJ,4CAAC;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,4CAAC;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,4CAAC;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": []
+}