@elliemae/ds-dataviz 3.6.0-next.3

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { line, curveNatural, curveLinear } from "d3";
+import { StyledLine } from "../styles";
+import { Points } from "./Points";
+import { ChartContext } from "../ChartContext";
+const Line = ({ serie }) => {
+  const {
+    props: { xAxis },
+    xScale,
+    yScale,
+    y2Scale,
+    colorScale,
+    activeSerie,
+    setActiveSerie
+  } = useContext(ChartContext);
+  const finalYScale = serie.scale === "y2" ? y2Scale : yScale;
+  const lineTypeMap = {
+    line: curveLinear,
+    spline: curveNatural
+  };
+  const lineD3 = useMemo(
+    () => line().x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position)).y((d) => finalYScale(d.value.y ?? d.value)).curve(lineTypeMap[serie.type] ?? curveLinear)(serie.data),
+    [lineTypeMap, serie.type, serie.data, xScale, xAxis?.cols, finalYScale]
+  );
+  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;
+  return /* @__PURE__ */ jsxs("g", {
+    transform: `translate(${xTranslate}, 0)`,
+    children: [
+      /* @__PURE__ */ jsx(StyledLine, {
+        d: lineD3,
+        stroke: colorScale(serie.name)
+      }),
+      /* @__PURE__ */ jsx(Points, {
+        serie
+      })
+    ]
+  });
+};
+export {
+  Line
+};
+//# sourceMappingURL=Line.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Line.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useState } from 'react';\nimport { line, curveNatural, curveLinear } from 'd3';\nimport { StyledLine } from '../styles';\nimport { Points } from './Points';\nimport { ChartContext } from '../ChartContext';\n\nexport const Line = ({ serie }) => {\n  const {\n    props: { xAxis },\n    xScale,\n    yScale,\n    y2Scale,\n    colorScale,\n    activeSerie,\n    setActiveSerie,\n  } = useContext(ChartContext);\n\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n  const lineTypeMap = {\n    line: curveLinear,\n    spline: curveNatural,\n  };\n\n  const lineD3 = useMemo(\n    () =>\n      line()\n        .x((d) => xScale(d.value.x ?? xAxis?.cols?.[d.position] ?? d.position))\n        .y((d) => finalYScale(d.value.y ?? d.value))\n        .curve(lineTypeMap[serie.type] ?? curveLinear)(serie.data),\n    [lineTypeMap, serie.type, serie.data, xScale, xAxis?.cols, finalYScale],\n  );\n\n  // we need to center the points and lines when\n  // using them in a band axis context\n  const xTranslate = (xScale?.bandwidth?.() ?? 0) / 2;\n\n  return (\n    <g\n      transform={`translate(${xTranslate}, 0)`}\n      // onMouseEnter={() => setActiveSerie(serie.key)}\n      // onMouseLeave={() => setActiveSerie('')}\n    >\n      <StyledLine d={lineD3} stroke={colorScale(serie.name)} />\n      <Points serie={serie} />\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAyB;AACrD,SAAS,MAAM,cAAc,mBAAmB;AAChD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAEtB,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,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AACrD,QAAM,cAAc;AAAA,IAClB,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAEA,QAAM,SAAS;AAAA,IACb,MACE,KAAK,EACF,EAAE,CAAC,MAAM,OAAO,EAAE,MAAM,KAAK,OAAO,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,EACrE,EAAE,CAAC,MAAM,YAAY,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,EAC1C,MAAM,YAAY,MAAM,SAAS,WAAW,EAAE,MAAM,IAAI;AAAA,IAC7D,CAAC,aAAa,MAAM,MAAM,MAAM,MAAM,QAAQ,OAAO,MAAM,WAAW;AAAA,EACxE;AAIA,QAAM,cAAc,QAAQ,YAAY,KAAK,KAAK;AAElD,SACE,qBAAC;AAAA,IACC,WAAW,aAAa;AAAA,IAIxB;AAAA,0BAAC;AAAA,QAAW,GAAG;AAAA,QAAQ,QAAQ,WAAW,MAAM,IAAI;AAAA,OAAG;AAAA,MACvD,oBAAC;AAAA,QAAO;AAAA,OAAc;AAAA;AAAA,GACxB;AAEJ;",
+  "names": []
+}

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

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

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

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

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

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { StyledPoint } from "../styles";
+import { ChartContext } from "../ChartContext";
+const Point = ({ x, y, pointRadius, id, opacity }) => {
+  const {
+    activePoint,
+    setActivePoint,
+    scrapperPosY,
+    scrapperPosX,
+    props: { xAxis, withScrapper }
+  } = useContext(ChartContext);
+  const isFocused = useMemo(() => {
+    if (activePoint === id) {
+      return true;
+    }
+    if (withScrapper === "horizontal") {
+      return y === scrapperPosY;
+    }
+    if (withScrapper === "vertical") {
+      return x === scrapperPosX;
+    }
+    return false;
+  }, [activePoint, id, withScrapper, y, scrapperPosY, x, scrapperPosX]);
+  return useMemo(
+    () => /* @__PURE__ */ jsx("g", {
+      children: /* @__PURE__ */ jsx(StyledPoint, {
+        id: `${id}-mark`,
+        isFocused,
+        r: pointRadius,
+        opacity
+      })
+    }),
+    [id, isFocused, opacity, pointRadius]
+  );
+};
+export {
+  Point
+};
+//# sourceMappingURL=Point.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Point.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledPoint } from '../styles';\nimport { ChartContext } from '../ChartContext';\n\nexport const Point = ({ x, y, pointRadius, id, opacity }) => {\n  const {\n    activePoint,\n    setActivePoint,\n    scrapperPosY,\n    scrapperPosX,\n    props: { xAxis, withScrapper },\n  } = useContext(ChartContext);\n  const isFocused = useMemo(() => {\n    if (activePoint === id) {\n      return true;\n    }\n    if (withScrapper === 'horizontal') {\n      return y === scrapperPosY;\n    }\n    if (withScrapper === 'vertical') {\n      return x === scrapperPosX;\n    }\n    return false;\n  }, [activePoint, id, withScrapper, y, scrapperPosY, x, scrapperPosX]);\n\n  return useMemo(\n    () => (\n      <g>\n        <StyledPoint id={`${id}-mark`} isFocused={isFocused} r={pointRadius} opacity={opacity}></StyledPoint>\n      </g>\n    ),\n    [id, isFocused, opacity, pointRadius],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAEtB,MAAM,QAAQ,CAAC,EAAE,GAAG,GAAG,aAAa,IAAI,QAAQ,MAAM;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,aAAa;AAAA,EAC/B,IAAI,WAAW,YAAY;AAC3B,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,gBAAgB,IAAI;AACtB,aAAO;AAAA,IACT;AACA,QAAI,iBAAiB,cAAc;AACjC,aAAO,MAAM;AAAA,IACf;AACA,QAAI,iBAAiB,YAAY;AAC/B,aAAO,MAAM;AAAA,IACf;AACA,WAAO;AAAA,EACT,GAAG,CAAC,aAAa,IAAI,cAAc,GAAG,cAAc,GAAG,YAAY,CAAC;AAEpE,SAAO;AAAA,IACL,MACE,oBAAC;AAAA,MACC,8BAAC;AAAA,QAAY,IAAI,GAAG;AAAA,QAAW;AAAA,QAAsB,GAAG;AAAA,QAAa;AAAA,OAAkB;AAAA,KACzF;AAAA,IAEF,CAAC,IAAI,WAAW,SAAS,WAAW;AAAA,EACtC;AACF;",
+  "names": []
+}

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

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

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Points.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Point } from './Point';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData } from '../helpers';\nimport { FocusableRegion } from '../parts/FocusableRegion';\nimport { Scrapper } from '../parts/Scrapper';\nimport { getSeriesValuesAt } from '../helpers';\nexport const Points = ({ serie }) => {\n  const {\n    colorScale,\n    xScale,\n    y2Scale,\n    yScale,\n    stackedData,\n    props: { xAxis, data, TooltipRenderer, types },\n  } = useContext(ChartContext);\n  const finalYScale = serie.scale === 'y2' ? y2Scale : yScale;\n\n  const opacity = useMemo(() => (types === 'scatter' ? 0.8 : 1), [serie.type]);\n  return (\n    <g fill={colorScale(serie.name)}>\n      {serie.data.map((point, i) => {\n        const { pointRadius } = serie;\n        const serieWithStackedValues = getStackedData(stackedData, serie);\n        const deltaY = serieWithStackedValues ? serieWithStackedValues[i][0] : 0;\n        const x = point.value.x ?? xAxis?.cols?.[point.position];\n        const y = point.value.y ?? point.value;\n        const xPosition = xScale(x);\n        const yPosition = finalYScale(y + deltaY);\n        return (\n          <g key={point.key}>\n            <g\n              transform={`translate(${xPosition},${yPosition})`}\n              // onMouseEnter={() => setActiveSerie(serie.key)}\n              // onMouseLeave={() => setActiveSerie('')}\n            >\n              <Point pointRadius={pointRadius} id={point.key} opacity={opacity} y={yPosition} />\n              {TooltipRenderer && (\n                <FocusableRegion\n                  id={point.key}\n                  width={pointRadius * 2}\n                  height={pointRadius * 2}\n                  pointRadius={pointRadius}\n                  style={{ transform: `translate(-${pointRadius}px, -${pointRadius}px)` }}\n                  content={<TooltipRenderer data={[{ name: serie.name, yValue: y, xValue: x }]} />}\n                />\n              )}\n            </g>\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAgB,SAAS,kBAAkB;AAC3C,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAGzB,MAAM,SAAS,CAAC,EAAE,MAAM,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,OAAO,MAAM,iBAAiB,MAAM;AAAA,EAC/C,IAAI,WAAW,YAAY;AAC3B,QAAM,cAAc,MAAM,UAAU,OAAO,UAAU;AAErD,QAAM,UAAU,QAAQ,MAAO,UAAU,YAAY,MAAM,GAAI,CAAC,MAAM,IAAI,CAAC;AAC3E,SACE,oBAAC;AAAA,IAAE,MAAM,WAAW,MAAM,IAAI;AAAA,IAC3B,gBAAM,KAAK,IAAI,CAAC,OAAO,MAAM;AAC5B,YAAM,EAAE,YAAY,IAAI;AACxB,YAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,YAAM,SAAS,yBAAyB,uBAAuB,GAAG,KAAK;AACvE,YAAM,IAAI,MAAM,MAAM,KAAK,OAAO,OAAO,MAAM;AAC/C,YAAM,IAAI,MAAM,MAAM,KAAK,MAAM;AACjC,YAAM,YAAY,OAAO,CAAC;AAC1B,YAAM,YAAY,YAAY,IAAI,MAAM;AACxC,aACE,oBAAC;AAAA,QACC,+BAAC;AAAA,UACC,WAAW,aAAa,aAAa;AAAA,UAIrC;AAAA,gCAAC;AAAA,cAAM;AAAA,cAA0B,IAAI,MAAM;AAAA,cAAK;AAAA,cAAkB,GAAG;AAAA,aAAW;AAAA,YAC/E,mBACC,oBAAC;AAAA,cACC,IAAI,MAAM;AAAA,cACV,OAAO,cAAc;AAAA,cACrB,QAAQ,cAAc;AAAA,cACtB;AAAA,cACA,OAAO,EAAE,WAAW,cAAc,mBAAmB,iBAAiB;AAAA,cACtE,SAAS,oBAAC;AAAA,gBAAgB,MAAM,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,QAAQ,EAAE,CAAC;AAAA,eAAG;AAAA,aAChF;AAAA;AAAA,SAEJ;AAAA,SAjBM,MAAM,GAkBd;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useContext, useRef } from "react";
+import { StyledMark, StyleFocusableRegion } from "../styles";
+import { ChartContext } from "../ChartContext";
+const Rect = ({ x, y, width, height, label, id }) => {
+  const {
+    props: { xAxis },
+    activePoint
+  } = useContext(ChartContext);
+  const isFocused = activePoint === id;
+  const focusableElement = useRef();
+  const handleRef = useCallback(
+    (newRef) => {
+      if (focusableElement.current)
+        focusableElement.current = newRef;
+      if (isFocused)
+        newRef?.focus();
+    },
+    [isFocused]
+  );
+  return useMemo(
+    () => /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(StyledMark, {
+          width,
+          height,
+          isFocused
+        }),
+        /* @__PURE__ */ jsx("foreignObject", {
+          width,
+          height,
+          children: /* @__PURE__ */ jsx(StyleFocusableRegion, {
+            role: "contentinfo",
+            style: {
+              width,
+              height
+            },
+            "aria-label": `serie: ${label} x Axis:${x} y Axis:  ${y}`,
+            tabIndex: -1,
+            ref: handleRef
+          })
+        })
+      ]
+    }),
+    [handleRef, height, isFocused, label, width, x, y]
+  );
+};
+export {
+  Rect
+};
+//# sourceMappingURL=Rect.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/Rect.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useCallback, useContext, useRef } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { StyledMark, StyleFocusableRegion } from '../styles';\nimport { ChartContext } from '../ChartContext';\nexport const Rect = ({ x, y, width, height, label, id }) => {\n  const {\n    props: { xAxis },\n    activePoint,\n  } = useContext(ChartContext);\n\n  const isFocused = activePoint === id;\n\n  const focusableElement = useRef<HTMLDivElement>();\n  const handleRef = useCallback(\n    (newRef: HTMLDivElement) => {\n      if (focusableElement.current) focusableElement.current = newRef;\n      if (isFocused) newRef?.focus();\n    },\n    [isFocused],\n  );\n  return useMemo(\n    () => (\n      <>\n        <StyledMark width={width} height={height} isFocused={isFocused}></StyledMark>\n        <foreignObject width={width} height={height}>\n          {/* <DSTooltipV3 withoutAnimation text={`x: ${x} y: ${y} label: ${label}`}> */}\n          <StyleFocusableRegion\n            role=\"contentinfo\"\n            style={{\n              width,\n              height,\n            }}\n            aria-label={`serie: ${label} x Axis:${x} y Axis:  ${y}`}\n            tabIndex={-1}\n            ref={handleRef}\n          ></StyleFocusableRegion>\n          {/* </DSTooltipV3> */}\n        </foreignObject>\n      </>\n    ),\n    [handleRef, height, isFocused, label, width, x, y],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,SAAS,aAAa,YAAY,cAAc;AAEhE,SAAS,YAAY,4BAA4B;AACjD,SAAS,oBAAoB;AACtB,MAAM,OAAO,CAAC,EAAE,GAAG,GAAG,OAAO,QAAQ,OAAO,GAAG,MAAM;AAC1D,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM;AAAA,IACf;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,YAAY,gBAAgB;AAElC,QAAM,mBAAmB,OAAuB;AAChD,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;AACA,SAAO;AAAA,IACL,MACE;AAAA,MACE;AAAA,4BAAC;AAAA,UAAW;AAAA,UAAc;AAAA,UAAgB;AAAA,SAAsB;AAAA,QAChE,oBAAC;AAAA,UAAc;AAAA,UAAc;AAAA,UAE3B,8BAAC;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,cACL;AAAA,cACA;AAAA,YACF;AAAA,YACA,cAAY,UAAU,gBAAgB,cAAc;AAAA,YACpD,UAAU;AAAA,YACV,KAAK;AAAA,WACN;AAAA,SAEH;AAAA;AAAA,KACF;AAAA,IAEF,CAAC,WAAW,QAAQ,WAAW,OAAO,OAAO,GAAG,CAAC;AAAA,EACnD;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Rect } from "./Rect";
+import { ChartContext } from "../ChartContext";
+import { getStackedData, getStackedIndex } from "../helpers";
+const StackedBar = ({ serie }) => {
+  const {
+    props: { xAxis, groups },
+    xScale,
+    yScale,
+    stackedData,
+    subGroupScale,
+    colorScale
+  } = useContext(ChartContext);
+  const serieWithStackedValues = getStackedData(stackedData, serie);
+  const stackIndex = getStackedIndex(groups, serie.name);
+  return /* @__PURE__ */ jsx("g", {
+    children: serieWithStackedValues.map((sequence, i) => {
+      const width = subGroupScale.bandwidth();
+      const height = yScale(sequence[0]) - yScale(sequence[1]);
+      return /* @__PURE__ */ jsx("g", {
+        fill: colorScale(serie.name),
+        transform: `translate(${xScale(xAxis?.cols?.[i] ?? i) + subGroupScale(`stacked-data-${stackIndex}`)},${yScale(sequence[1])})`,
+        children: /* @__PURE__ */ jsx(Rect, {
+          width,
+          height,
+          x: serie.data[i].position,
+          y: sequence[1],
+          id: serie.data[i].key,
+          label: serie.name
+        })
+      }, serie.data[i].key);
+    })
+  });
+};
+export {
+  StackedBar
+};
+//# sourceMappingURL=StackedBar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/graphs/Chart/series/StackedBar.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\n\nimport { Rect } from './Rect';\nimport { ChartContext } from '../ChartContext';\nimport { getStackedData, getStackedIndex } from '../helpers';\nexport const StackedBar = ({ serie }) => {\n  const {\n    props: { xAxis, groups },\n    xScale,\n    yScale,\n    stackedData,\n    subGroupScale,\n    colorScale,\n  } = useContext(ChartContext);\n\n  const serieWithStackedValues = getStackedData(stackedData, serie);\n  const stackIndex = getStackedIndex(groups, serie.name);\n  return (\n    <g>\n      {serieWithStackedValues.map((sequence, i) => {\n        const width = subGroupScale.bandwidth();\n        const height = yScale(sequence[0]) - yScale(sequence[1]);\n        return (\n          <g\n            key={serie.data[i].key}\n            fill={colorScale(serie.name)}\n            transform={`translate(${\n              xScale(xAxis?.cols?.[i] ?? i) + subGroupScale(`stacked-data-${stackIndex}`)\n            },${yScale(sequence[1])})`}\n          >\n            <Rect\n              width={width}\n              height={height}\n              x={serie.data[i].position}\n              y={sequence[1]}\n              id={serie.data[i].key}\n              label={serie.name}\n            />\n          </g>\n        );\n      })}\n    </g>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,kBAAkB;AAElC,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB,uBAAuB;AACzC,MAAM,aAAa,CAAC,EAAE,MAAM,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,OAAO;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,YAAY;AAE3B,QAAM,yBAAyB,eAAe,aAAa,KAAK;AAChE,QAAM,aAAa,gBAAgB,QAAQ,MAAM,IAAI;AACrD,SACE,oBAAC;AAAA,IACE,iCAAuB,IAAI,CAAC,UAAU,MAAM;AAC3C,YAAM,QAAQ,cAAc,UAAU;AACtC,YAAM,SAAS,OAAO,SAAS,EAAE,IAAI,OAAO,SAAS,EAAE;AACvD,aACE,oBAAC;AAAA,QAEC,MAAM,WAAW,MAAM,IAAI;AAAA,QAC3B,WAAW,aACT,OAAO,OAAO,OAAO,MAAM,CAAC,IAAI,cAAc,gBAAgB,YAAY,KACxE,OAAO,SAAS,EAAE;AAAA,QAEtB,8BAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA,GAAG,MAAM,KAAK,GAAG;AAAA,UACjB,GAAG,SAAS;AAAA,UACZ,IAAI,MAAM,KAAK,GAAG;AAAA,UAClB,OAAO,MAAM;AAAA,SACf;AAAA,SAbK,MAAM,KAAK,GAAG,GAcrB;AAAA,IAEJ,CAAC;AAAA,GACH;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+export * from "./Rect";
+export * from "./Bars";
+export * from "./StackedBar";
+export * from "./Points";
+export * from "./Line";
+export * from "./Area";
+export * from "./Pie";
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { styled, css } from "@elliemae/ds-system";
+const StyledSVGWrapper = styled.div`
+  :focus {
+    outline: none;
+  }
+  :focus-within {
+    outline: none;
+  }
+`;
+const StyledAxis = styled("g")`
+  text {
+    fill: #635f5d;
+  }
+
+  text.axis-label {
+    font-size: 2.5em;
+  }
+
+  .tick text {
+    ${({ color }) => color ? `fill: ${color}` : ""}
+  }
+  .tick line {
+    ${({ color }) => color ? `stroke: ${color}` : ""}
+  }
+  line {
+    stroke: #c0c0bb;
+  }
+`;
+const StyledGrid = styled("g")`
+  line {
+    stroke: #c0c0bb;
+  }
+`;
+const borderCircle = css`
+  stroke: red;
+  stroke-width: 2;
+`;
+const StyledMark = styled("rect")`
+  ${({ isFocused }) => isFocused ? borderCircle : ""};
+`;
+const StyleFocusableRegion = styled("div")`
+  width: ${({ s }) => s * 2}px;
+  height: ${({ s }) => s * 2}px;
+  :focus {
+    outline: none;
+  }
+`;
+const StyledLine = styled("path")`
+  fill: none;
+  stroke-width: ${({ isActiveLine }) => isActiveLine ? 5 : 3};
+  stroke-linejoin: round;
+`;
+const StyledArea = styled("path")`
+  stroke-width: ${({ isActiveLine }) => isActiveLine ? 5 : 3};
+  stroke-linejoin: round;
+  opacity: 0.8;
+`;
+const StyledPoint = styled("circle")`
+  //opacity: ${({ isFocused }) => isFocused ? 1 : 0};
+  ${({ isFocused }) => isFocused ? borderCircle : ""};
+`;
+const StyledTooltipContainer = styled.div`
+  text-align: center;
+  min-width: ${({ theme }) => theme.space.l};
+  max-width: 250px;
+  min-height: 30px;
+  display: grid;
+  align-items: center;
+  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};
+  position: relative;
+  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;
+`;
+export {
+  StyleFocusableRegion,
+  StyledArea,
+  StyledAxis,
+  StyledGrid,
+  StyledLine,
+  StyledMark,
+  StyledMouseOverDetectionBox,
+  StyledPoint,
+  StyledSVGWrapper,
+  StyledTooltipContainer
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/graphs/Chart/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\n\nexport const StyledSVGWrapper = styled.div`\n  :focus {\n    outline: none;\n  }\n  :focus-within {\n    outline: none;\n  }\n`;\n\nexport const StyledAxis = styled('g')`\n  text {\n    fill: #635f5d;\n  }\n\n  text.axis-label {\n    font-size: 2.5em;\n  }\n\n  .tick text {\n    ${({ color }) => (color ? `fill: ${color}` : '')}\n  }\n  .tick line {\n    ${({ color }) => (color ? `stroke: ${color}` : '')}\n  }\n  line {\n    stroke: #c0c0bb;\n  }\n`;\n\nexport const StyledGrid = styled('g')`\n  line {\n    stroke: #c0c0bb;\n  }\n`;\n\nconst borderCircle = css`\n  stroke: red;\n  stroke-width: 2;\n`;\nexport const StyledMark = styled('rect')<{ isFocused: boolean }>`\n  ${({ isFocused }) => (isFocused ? borderCircle : '')};\n`;\n\nexport const StyleFocusableRegion = styled('div')<{ s: number }>`\n  width: ${({ s }) => s * 2 ?? '1'}px;\n  height: ${({ s }) => s * 2 ?? '1'}px;\n  :focus {\n    outline: none;\n  }\n`;\n\nexport const StyledLine = styled('path')`\n  fill: none;\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n`;\nexport const StyledArea = styled('path')`\n  stroke-width: ${({ isActiveLine }) => (isActiveLine ? 5 : 3)};\n  stroke-linejoin: round;\n  opacity: 0.8;\n`;\n\nexport const StyledPoint = styled('circle')<{ isFocused: boolean }>`\n  //opacity: ${({ isFocused }) => (isFocused ? 1 : 0)};\n  ${({ isFocused }) => (isFocused ? borderCircle : '')};\n`;\n\nexport const StyledTooltipContainer = styled.div`\n  text-align: center;\n  min-width: ${({ theme }) => theme.space.l};\n  max-width: 250px;\n  min-height: 30px;\n  display: grid;\n  align-items: center;\n  padding: ${({ theme }) => `${theme.space.xxxs} ${theme.space.xs}`};\n  position: relative;\n  background-color: white;\n  border-radius: 2px;\n  font-size: 13px;\n  color: ${({ theme }) => theme.colors.neutral[600]};\n`;\n\nexport const StyledMouseOverDetectionBox = styled.div`\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  width: calc(100% + 30px);\n  height: calc(100% + 30px);\n  z-index: -1;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAErB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAU9B,CAAC,EAAE,MAAM,MAAO,QAAQ,SAAS,UAAU;AAAA;AAAA;AAAA,MAG3C,CAAC,EAAE,MAAM,MAAO,QAAQ,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,MAAM,aAAa,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAMpC,MAAM,eAAe;AAAA;AAAA;AAAA;AAId,MAAM,aAAa,OAAO,MAAM;AAAA,IACnC,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA;AAG5C,MAAM,uBAAuB,OAAO,KAAK;AAAA,WACrC,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA,YACd,CAAC,EAAE,EAAE,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA;AAMpB,MAAM,aAAa,OAAO,MAAM;AAAA;AAAA,kBAErB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAGrD,MAAM,aAAa,OAAO,MAAM;AAAA,kBACrB,CAAC,EAAE,aAAa,MAAO,eAAe,IAAI;AAAA;AAAA;AAAA;AAKrD,MAAM,cAAc,OAAO,QAAQ;AAAA,eAC3B,CAAC,EAAE,UAAU,MAAO,YAAY,IAAI;AAAA,IAC/C,CAAC,EAAE,UAAU,MAAO,YAAY,eAAe;AAAA;AAG5C,MAAM,yBAAyB,OAAO;AAAA;AAAA,eAE9B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,aAK7B,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,QAAQ,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,WAKpD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/graphs/constants.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { format, timeFormat } from "d3";
+const TICK_FORMATS = {
+  MILLIONS: (v) => format(".2s")(v).replace("G", "B"),
+  KSEPARATOR: (v) => format(",")(v),
+  TIME: (userFormat) => (v) => timeFormat(userFormat)(v)
+};
+export {
+  TICK_FORMATS
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/graphs/constants.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { format, timeFormat } from 'd3';\n\nexport const TICK_FORMATS = {\n  MILLIONS: (v) => format('.2s')(v).replace('G', 'B'),\n  KSEPARATOR: (v) => format(',')(v),\n  TIME: (userFormat: string) => (v) => timeFormat(userFormat)(v),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,kBAAkB;AAE5B,MAAM,eAAe;AAAA,EAC1B,UAAU,CAAC,MAAM,OAAO,KAAK,EAAE,CAAC,EAAE,QAAQ,KAAK,GAAG;AAAA,EAClD,YAAY,CAAC,MAAM,OAAO,GAAG,EAAE,CAAC;AAAA,EAChC,MAAM,CAAC,eAAuB,CAAC,MAAM,WAAW,UAAU,EAAE,CAAC;AAC/D;",
+  "names": []
+}

package/dist/esm/graphs/index.js

@@ -0,0 +1,4 @@
+import * as React from "react";
+export * from "./Chart";
+export * from "./constants";
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Chart, TICK_FORMATS } from "./graphs";
+export {
+  Chart,
+  TICK_FORMATS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { Chart, TICK_FORMATS } from './graphs';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,OAAO,oBAAoB;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@elliemae/ds-dataviz",
+  "version": "3.6.0-next.3",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - DataViz",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@elliemae/ds-grid": "3.6.0-next.3",
+    "@elliemae/ds-icon": "3.6.0-next.3",
+    "@elliemae/ds-icons": "3.6.0-next.3",
+    "@elliemae/ds-popperjs": "3.6.0-next.3",
+    "@elliemae/ds-system": "3.6.0-next.3",
+    "@elliemae/ds-tooltip": "3.6.0-next.3",
+    "@elliemae/ds-utilities": "3.6.0-next.3",
+    "d3": "~7.4.4"
+  },
+  "devDependencies": {
+    "@elliemae/pui-theme": "~2.6.0",
+    "@testing-library/dom": "~8.13.0",
+    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/react": "~12.1.3",
+    "@testing-library/user-event": "~13.5.0",
+    "@types/d3": "~7.4.0",
+    "styled-components": "~5.3.5",
+    "styled-system": "~5.1.5"
+  },
+  "peerDependencies": {
+    "@elliemae/pui-theme": "~2.6.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.5",
+    "styled-system": "^5.1.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
+    "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}