@elliemae/ds-dataviz-pie 3.12.0-rc.2 → 3.12.0-rc.4

package/dist/cjs/Pie.js

@@ -36,14 +36,9 @@ 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_PieContext.PieContext.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_Pie.Pie, {})
-      ]
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PieContext.PieContext.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_Pie.Pie, {})
+  ] }) });
 };
 //# sourceMappingURL=Pie.js.map

package/dist/cjs/Pie.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/Pie.tsx", "../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer';\nimport { Pie } from './parts/Pie';\nimport { PieContext } from './PieContext';\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    <PieContext.Provider value={ctx}>\n      <ChartContainer>\n        <ColorLegend />\n        <Pie />\n      </ChartContainer>\n    </PieContext.Provider>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWjB;AAVN,4BAA+B;AAC/B,iBAAoB;AACpB,wBAA2B;AAC3B,oBAAuB;AAEvB,yBAA4B;AACrB,MAAM,WAA8C,CAAC,UAAU;AACpE,QAAM,UAAM,sBAAO,KAAK;AACxB,SACE,4CAAC,6BAAW,UAAX;AAAA,IAAoB,OAAO;AAAA,IAC1B,uDAAC;AAAA,MACC;AAAA,oDAAC,kCAAY;AAAA,QACb,4CAAC,kBAAI;AAAA;AAAA,KACP;AAAA,GACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWjB;AAVN,4BAA+B;AAC/B,iBAAoB;AACpB,wBAA2B;AAC3B,oBAAuB;AAEvB,yBAA4B;AACrB,MAAM,WAA8C,CAAC,UAAU;AACpE,QAAM,UAAM,sBAAO,KAAK;AACxB,SACE,4CAAC,6BAAW,UAAX,EAAoB,OAAO,KAC1B,uDAAC,wCACC;AAAA,gDAAC,kCAAY;AAAA,IACb,4CAAC,kBAAI;AAAA,KACP,GACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/ChartContainer.js

@@ -57,32 +57,31 @@ const ChartContainer = ({ children }) => {
     return radius * 0.1;
   });
   const { onInputKeyDown, handleOnBlur, handleOnFocus } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSVGWrapper, {
-    ref: containerRef,
-    onKeyDown: onInputKeyDown,
-    tabIndex: activeSerie ? -1 : 0,
-    onBlur: handleOnBlur,
-    onFocus: handleOnFocus,
-    onMouseDown: (e) => e.preventDefault(),
-    style: { width: `${width}px`, height: `${height}px` },
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
-      ...dimensions,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
-          className: "container",
-          transform: `translate(${margin.left + marginRadius},${margin.top + marginRadius})`,
-          children
-        }),
-        hasBaseline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", {
-          x1: 0,
-          x2: width,
-          y1: innerHeight + marginRadius,
-          y2: innerHeight + marginRadius,
-          stroke: "grey",
-          strokeWidth: "2"
-        }) : null
-      ]
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.StyledSVGWrapper,
+    {
+      ref: containerRef,
+      onKeyDown: onInputKeyDown,
+      tabIndex: activeSerie ? -1 : 0,
+      onBlur: handleOnBlur,
+      onFocus: handleOnFocus,
+      onMouseDown: (e) => e.preventDefault(),
+      style: { width: `${width}px`, height: `${height}px` },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...dimensions, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { className: "container", transform: `translate(${margin.left + marginRadius},${margin.top + marginRadius})`, children }),
+        hasBaseline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "line",
+          {
+            x1: 0,
+            x2: width,
+            y1: innerHeight + marginRadius,
+            y2: innerHeight + marginRadius,
+            stroke: "grey",
+            strokeWidth: "2"
+          }
+        ) : null
+      ] })
+    }
+  );
 };
 //# sourceMappingURL=ChartContainer.js.map

package/dist/cjs/parts/ChartContainer.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/parts/ChartContainer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledSVGWrapper } from '../styles';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { PieContext } from '../PieContext';\n// import { useKeyboardNavigation } from '../config/useKeyboardNavigation';\ninterface ChartContainerT {\n  children: JSX.Element | JSX.Element[] | string | string[];\n}\nexport const ChartContainer: React.ComponentType<ChartContainerT> = ({ children }) => {\n  const {\n    props: { width, height, margin, responsive, hasBaseline, isHalfPie },\n    containerRef,\n    innerHeight,\n    radius,\n    activeSerie,\n  } = useContext(PieContext);\n\n  const dimensions = useMemo(\n    () =>\n      responsive\n        ? {\n            viewBox: `0 0 ${width} ${height}`,\n          }\n        : {\n            width,\n            height,\n          },\n    [height, responsive, width],\n  );\n\n  const marginRadius = useMemo(() => {\n    if (isHalfPie) {\n      return radius * 0.1;\n    }\n    return radius * 0.1;\n  });\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  return (\n    <StyledSVGWrapper\n      ref={containerRef}\n      onKeyDown={onInputKeyDown}\n      // aria-hidden=\"true\"\n      tabIndex={activeSerie ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseDown={(e) => e.preventDefault()}\n      style={{ width: `${width}px`, height: `${height}px` }}\n    >\n      <svg {...dimensions}>\n        <g className=\"container\" transform={`translate(${margin.left + marginRadius},${margin.top + marginRadius})`}>\n          {children}\n        </g>\n        {hasBaseline ? (\n          <line\n            x1={0}\n            x2={width}\n            y1={innerHeight + marginRadius}\n            y2={innerHeight + marginRadius}\n            stroke=\"grey\"\n            strokeWidth=\"2\"\n          />\n        ) : null}\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDjB;AAjDN,mBAA2C;AAC3C,oBAAiC;AACjC,mCAAsC;AACtC,wBAA2B;AAKpB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,YAAY,aAAa,UAAU;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,4BAAU;AAEzB,QAAM,iBAAa;AAAA,IACjB,MACE,aACI;AAAA,MACE,SAAS,OAAO,SAAS;AAAA,IAC3B,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACN,CAAC,QAAQ,YAAY,KAAK;AAAA,EAC5B;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,WAAW;AACb,aAAO,SAAS;AAAA,IAClB;AACA,WAAO,SAAS;AAAA,EAClB,CAAC;AACD,QAAM,EAAE,gBAAgB,cAAc,cAAc,QAAI,oDAAsB;AAE9E,SACE,4CAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW;AAAA,IAEX,UAAU,cAAc,KAAK;AAAA,IAC7B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,IACrC,OAAO,EAAE,OAAO,GAAG,WAAW,QAAQ,GAAG,WAAW;AAAA,IAEpD,uDAAC;AAAA,MAAK,GAAG;AAAA,MACP;AAAA,oDAAC;AAAA,UAAE,WAAU;AAAA,UAAY,WAAW,aAAa,OAAO,OAAO,gBAAgB,OAAO,MAAM;AAAA,UACzF;AAAA,SACH;AAAA,QACC,cACC,4CAAC;AAAA,UACC,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI,cAAc;AAAA,UAClB,IAAI,cAAc;AAAA,UAClB,QAAO;AAAA,UACP,aAAY;AAAA,SACd,IACE;AAAA;AAAA,KACN;AAAA,GACF;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDjB;AAjDN,mBAA2C;AAC3C,oBAAiC;AACjC,mCAAsC;AACtC,wBAA2B;AAKpB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,YAAY,aAAa,UAAU;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,4BAAU;AAEzB,QAAM,iBAAa;AAAA,IACjB,MACE,aACI;AAAA,MACE,SAAS,OAAO,SAAS;AAAA,IAC3B,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACN,CAAC,QAAQ,YAAY,KAAK;AAAA,EAC5B;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,WAAW;AACb,aAAO,SAAS;AAAA,IAClB;AACA,WAAO,SAAS;AAAA,EAClB,CAAC;AACD,QAAM,EAAE,gBAAgB,cAAc,cAAc,QAAI,oDAAsB;AAE9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,MAEX,UAAU,cAAc,KAAK;AAAA,MAC7B,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,MACrC,OAAO,EAAE,OAAO,GAAG,WAAW,QAAQ,GAAG,WAAW;AAAA,MAEpD,uDAAC,SAAK,GAAG,YACP;AAAA,oDAAC,OAAE,WAAU,aAAY,WAAW,aAAa,OAAO,OAAO,gBAAgB,OAAO,MAAM,iBACzF,UACH;AAAA,QACC,cACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI,cAAc;AAAA,YAClB,IAAI,cAAc;AAAA,YAClB,QAAO;AAAA,YACP,aAAY;AAAA;AAAA,QACd,IACE;AAAA,SACN;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/ColorLegend.js

@@ -39,32 +39,12 @@ const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) =
   } = (0, import_react.useContext)(import_PieContext.PieContext);
   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: circleRadius ?? tickSize
-          }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
-            x: tickTextOffset,
-            dy: ".32em",
-            children: domainValue
-          })
-        ]
-      }))
-    ]
-  });
+  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: circleRadius ?? tickSize }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: tickTextOffset, dy: ".32em", children: domainValue })
+    ] }))
+  ] });
 };
 //# sourceMappingURL=ColorLegend.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/parts/ColorLegend.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext } from 'react';\nimport { PieContext } from '../PieContext';\n\nexport const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {\n  const {\n    colorScale,\n    innerWidth,\n    props: { colorLegend, circleRadius },\n  } = useContext(PieContext);\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={circleRadius ?? tickSize} />\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;ADajB;AAbN,mBAAkC;AAClC,wBAA2B;AAEpB,MAAM,cAAc,CAAC,EAAE,cAAc,IAAI,WAAW,IAAI,iBAAiB,GAAG,MAAM;AACvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,aAAa;AAAA,EACrC,QAAI,yBAAW,4BAAU;AAEzB,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,gBAAgB;AAAA,WAAU;AAAA,UACpE,4CAAC;AAAA,YAAK,GAAG;AAAA,YAAgB,IAAG;AAAA,YACzB;AAAA,WACH;AAAA;AAAA,OACF,CACD;AAAA;AAAA,GACH;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADajB;AAbN,mBAAkC;AAClC,wBAA2B;AAEpB,MAAM,cAAc,CAAC,EAAE,cAAc,IAAI,WAAW,IAAI,iBAAiB,GAAG,MAAM;AACvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,aAAa;AAAA,EACrC,QAAI,yBAAW,4BAAU;AAEzB,MAAI,CAAC;AAAa,WAAO;AACzB,SACE,6CAAC,OAAE,WAAW,aAAa,aAAa,UACtC;AAAA,gDAAC,UAAK,GAAG,IAAI,GAAG,KAAK,WAAU,cAAa,YAAW,UACpD,sBAAY,OACf;AAAA,IACC,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,6CAAC,OAAE,WAAU,QAAO,WAAW,eAAe,IAAI,gBAChD;AAAA,kDAAC,YAAO,MAAM,WAAW,WAAW,GAAG,GAAG,gBAAgB,UAAU;AAAA,MACpE,4CAAC,UAAK,GAAG,gBAAgB,IAAG,SACzB,uBACH;AAAA,OACF,CACD;AAAA,KACH;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Pie.js

@@ -42,27 +42,10 @@ const Pie = () => {
   } = (0, import_react.useContext)(import_PieContext.PieContext);
   const radius = Math.min(innerWidth, innerHeight) / 2;
   const currentInnerHeight = isHalfPie ? innerHeight : innerHeight / 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-    transform: `translate(${innerWidth / 2},${currentInnerHeight})`,
-    children: [
-      pieData.map((slice) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Slice.Slice, {
-        data: slice
-      }, slice.index)),
-      !isHalfPie && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledInnerText, {
-        x: 0,
-        y: 0,
-        textAnchor: "middle",
-        alignmentBaseline: "middle",
-        children: label
-      }) : null,
-      isHalfPie && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledInnerText, {
-        x: 0,
-        y: -innerRadius / 4,
-        textAnchor: "middle",
-        alignmentBaseline: "middle",
-        children: label
-      }) : null
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { transform: `translate(${innerWidth / 2},${currentInnerHeight})`, children: [
+    pieData.map((slice) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Slice.Slice, { data: slice }, slice.index)),
+    !isHalfPie && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledInnerText, { x: 0, y: 0, textAnchor: "middle", alignmentBaseline: "middle", children: label }) : null,
+    isHalfPie && label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledInnerText, { x: 0, y: -innerRadius / 4, textAnchor: "middle", alignmentBaseline: "middle", children: label }) : null
+  ] });
 };
 //# sourceMappingURL=Pie.js.map

package/dist/cjs/parts/Pie.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/parts/Pie.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext } from 'react';\nimport { Slice } from './Slice';\nimport { PieContext } from '../PieContext';\nimport { StyledInnerText } from '../styles';\nexport const Pie = () => {\n  const {\n    innerHeight,\n    innerWidth,\n    pieData,\n\n    props: { isHalfPie, label, innerRadius },\n  } = useContext(PieContext);\n\n  const radius = Math.min(innerWidth, innerHeight) / 2;\n\n  const currentInnerHeight = isHalfPie ? innerHeight : innerHeight / 2;\n  return (\n    <g transform={`translate(${innerWidth / 2},${currentInnerHeight})`}>\n      {pieData.map((slice) => (\n        <Slice key={slice.index} data={slice} />\n      ))}\n      {!isHalfPie && label ? (\n        <StyledInnerText x={0} y={0} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </StyledInnerText>\n      ) : null}\n      {isHalfPie && label ? (\n        <StyledInnerText x={0} y={-innerRadius / 4} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </StyledInnerText>\n      ) : null}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBnB;AAjBJ,mBAAkC;AAClC,mBAAsB;AACtB,wBAA2B;AAC3B,oBAAgC;AACzB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEA,OAAO,EAAE,WAAW,OAAO,YAAY;AAAA,EACzC,QAAI,yBAAW,4BAAU;AAEzB,QAAM,SAAS,KAAK,IAAI,YAAY,WAAW,IAAI;AAEnD,QAAM,qBAAqB,YAAY,cAAc,cAAc;AACnE,SACE,6CAAC;AAAA,IAAE,WAAW,aAAa,aAAa,KAAK;AAAA,IAC1C;AAAA,cAAQ,IAAI,CAAC,UACZ,4CAAC;AAAA,QAAwB,MAAM;AAAA,SAAnB,MAAM,KAAoB,CACvC;AAAA,MACA,CAAC,aAAa,QACb,4CAAC;AAAA,QAAgB,GAAG;AAAA,QAAG,GAAG;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QAChE;AAAA,OACH,IACE;AAAA,MACH,aAAa,QACZ,4CAAC;AAAA,QAAgB,GAAG;AAAA,QAAG,GAAG,CAAC,cAAc;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QAC/E;AAAA,OACH,IACE;AAAA;AAAA,GACN;AAEJ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBnB;AAjBJ,mBAAkC;AAClC,mBAAsB;AACtB,wBAA2B;AAC3B,oBAAgC;AACzB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEA,OAAO,EAAE,WAAW,OAAO,YAAY;AAAA,EACzC,QAAI,yBAAW,4BAAU;AAEzB,QAAM,SAAS,KAAK,IAAI,YAAY,WAAW,IAAI;AAEnD,QAAM,qBAAqB,YAAY,cAAc,cAAc;AACnE,SACE,6CAAC,OAAE,WAAW,aAAa,aAAa,KAAK,uBAC1C;AAAA,YAAQ,IAAI,CAAC,UACZ,4CAAC,sBAAwB,MAAM,SAAnB,MAAM,KAAoB,CACvC;AAAA,IACA,CAAC,aAAa,QACb,4CAAC,iCAAgB,GAAG,GAAG,GAAG,GAAG,YAAW,UAAS,mBAAkB,UAChE,iBACH,IACE;AAAA,IACH,aAAa,QACZ,4CAAC,iCAAgB,GAAG,GAAG,GAAG,CAAC,cAAc,GAAG,YAAW,UAAS,mBAAkB,UAC/E,iBACH,IACE;AAAA,KACN;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Slice.js

@@ -79,37 +79,12 @@ const Slice = ({ data }) => {
     if (name)
       setActiveSerie("");
   }, [name, setActiveSerie]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleOnMouseLeave,
-    transform: isHalfPie ? "rotate(-90)" : "",
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
-        ref: arcRef,
-        fill: import_colorPallet.COLOR_PALLET[color] ?? color,
-        stroke: "white"
-      }),
-      name && TooltipRenderer && isFocus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", {
-        x,
-        y,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-          ref: setReferenceElement,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_popperjs.DSPopperJS, {
-            referenceElement,
-            showPopover: true,
-            zIndex: 3e3,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, {
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, {
-                  data: serieData
-                })
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {})
-            ]
-          })
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { onMouseEnter: handleMouseEnter, onMouseLeave: handleOnMouseLeave, transform: isHalfPie ? "rotate(-90)" : "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { ref: arcRef, fill: import_colorPallet.COLOR_PALLET[color] ?? color, stroke: "white" }),
+    name && TooltipRenderer && isFocus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", { x, y, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: setReferenceElement, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_popperjs.DSPopperJS, { referenceElement, showPopover: true, zIndex: 3e3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledTooltipContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipRenderer, { data: serieData }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledMouseOverDetectionBox, {})
+    ] }) }) })
+  ] });
 };
 //# sourceMappingURL=Slice.js.map

package/dist/cjs/parts/Slice.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/parts/Slice.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';\nimport { arc, select } from 'd3';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PieContext } from '../PieContext';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles';\nexport const Slice = ({ data }) => {\n  const {\n    innerHeight,\n    innerWidth,\n    activeSerie,\n    setActiveSerie,\n    props: { series, innerRadius, isHalfPie, TooltipRenderer },\n  } = useContext(PieContext);\n\n  const arcRef = useRef(null);\n\n  const radius = isHalfPie ? Math.min(innerWidth, innerHeight) : Math.min(innerWidth, innerHeight) / 2;\n  const { startAngle, endAngle, index } = data;\n  const currentStartAngle = isHalfPie ? startAngle / 2 : startAngle;\n  const currentEndAngle = isHalfPie ? endAngle / 2 : endAngle;\n\n  const serieData = series?.find((serie) => serie.name === data.data[0]);\n  const { color, name } = serieData || { name: undefined, color: 'grey' };\n\n  const sliceData = useMemo(\n    () =>\n      arc()\n        .innerRadius(innerRadius ? radius * innerRadius : 0)\n        .outerRadius(radius)\n        .startAngle(currentStartAngle)\n        .endAngle(currentEndAngle)(),\n    [currentEndAngle, currentStartAngle, innerRadius, radius],\n  );\n\n  const sliceOver = useMemo(\n    () =>\n      arc()\n        .innerRadius(innerRadius ? radius * innerRadius : 0)\n        .outerRadius(radius + radius * 0.1)\n        .startAngle(currentStartAngle)\n        .endAngle(currentEndAngle),\n    [currentEndAngle, currentStartAngle, innerRadius, radius],\n  );\n\n  const deltaAngle = currentStartAngle + (currentEndAngle - currentStartAngle) / 2;\n  const x = radius * Math.sin(deltaAngle);\n  const y = -radius * Math.cos(deltaAngle);\n\n  const isFocus = useMemo(() => activeSerie === `${name}-${index}`, [activeSerie, index, name]);\n  useEffect(() => {\n    if (arcRef.current) {\n      if (isFocus) select(arcRef.current).transition().attr('d', sliceOver).duration(300);\n      else select(arcRef.current).transition().attr('d', sliceData).duration(300);\n    }\n  }, [sliceData, isFocus, sliceOver]);\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n  const handleMouseEnter = useCallback(() => {\n    if (name) setActiveSerie(`${name}-${index}`);\n  }, [index, name, setActiveSerie]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (name) setActiveSerie('');\n  }, [name, setActiveSerie]);\n  return (\n    <g onMouseEnter={handleMouseEnter} onMouseLeave={handleOnMouseLeave} transform={isHalfPie ? 'rotate(-90)' : ''}>\n      <path ref={arcRef} fill={COLOR_PALLET[color] ?? color} stroke=\"white\"></path>\n\n      {name && TooltipRenderer && isFocus && (\n        <foreignObject x={x} y={y}>\n          <div ref={setReferenceElement}>\n            <DSPopperJS referenceElement={referenceElement} showPopover zIndex={3000}>\n              <StyledTooltipContainer>\n                <TooltipRenderer data={serieData} />\n              </StyledTooltipContainer>\n              <StyledMouseOverDetectionBox />\n            </DSPopperJS>\n          </div>\n        </foreignObject>\n      )}\n    </g>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsEjB;AApEN,mBAAqF;AACrF,gBAA4B;AAC5B,yBAA2B;AAC3B,wBAA2B;AAC3B,yBAA6B;AAC7B,oBAAoE;AAC7D,MAAM,QAAQ,CAAC,EAAE,KAAK,MAAM;AACjC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,QAAQ,aAAa,WAAW,gBAAgB;AAAA,EAC3D,QAAI,yBAAW,4BAAU;AAEzB,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,SAAS,YAAY,KAAK,IAAI,YAAY,WAAW,IAAI,KAAK,IAAI,YAAY,WAAW,IAAI;AACnG,QAAM,EAAE,YAAY,UAAU,MAAM,IAAI;AACxC,QAAM,oBAAoB,YAAY,aAAa,IAAI;AACvD,QAAM,kBAAkB,YAAY,WAAW,IAAI;AAEnD,QAAM,YAAY,QAAQ,KAAK,CAAC,UAAU,MAAM,SAAS,KAAK,KAAK,EAAE;AACrE,QAAM,EAAE,OAAO,KAAK,IAAI,aAAa,EAAE,MAAM,QAAW,OAAO,OAAO;AAEtE,QAAM,gBAAY;AAAA,IAChB,UACE,eAAI,EACD,YAAY,cAAc,SAAS,cAAc,CAAC,EAClD,YAAY,MAAM,EAClB,WAAW,iBAAiB,EAC5B,SAAS,eAAe,EAAE;AAAA,IAC/B,CAAC,iBAAiB,mBAAmB,aAAa,MAAM;AAAA,EAC1D;AAEA,QAAM,gBAAY;AAAA,IAChB,UACE,eAAI,EACD,YAAY,cAAc,SAAS,cAAc,CAAC,EAClD,YAAY,SAAS,SAAS,GAAG,EACjC,WAAW,iBAAiB,EAC5B,SAAS,eAAe;AAAA,IAC7B,CAAC,iBAAiB,mBAAmB,aAAa,MAAM;AAAA,EAC1D;AAEA,QAAM,aAAa,qBAAqB,kBAAkB,qBAAqB;AAC/E,QAAM,IAAI,SAAS,KAAK,IAAI,UAAU;AACtC,QAAM,IAAI,CAAC,SAAS,KAAK,IAAI,UAAU;AAEvC,QAAM,cAAU,sBAAQ,MAAM,gBAAgB,GAAG,QAAQ,SAAS,CAAC,aAAa,OAAO,IAAI,CAAC;AAC5F,8BAAU,MAAM;AACd,QAAI,OAAO,SAAS;AAClB,UAAI;AAAS,8BAAO,OAAO,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,SAAS,EAAE,SAAS,GAAG;AAAA;AAC7E,8BAAO,OAAO,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,SAAS,EAAE,SAAS,GAAG;AAAA,IAC5E;AAAA,EACF,GAAG,CAAC,WAAW,SAAS,SAAS,CAAC;AAElC,QAAM,CAAC,kBAAkB,mBAAmB,QAAI,uBAAiC;AAEjF,QAAM,uBAAmB,0BAAY,MAAM;AACzC,QAAI;AAAM,qBAAe,GAAG,QAAQ,OAAO;AAAA,EAC7C,GAAG,CAAC,OAAO,MAAM,cAAc,CAAC;AAEhC,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI;AAAM,qBAAe,EAAE;AAAA,EAC7B,GAAG,CAAC,MAAM,cAAc,CAAC;AACzB,SACE,6CAAC,OAAE,cAAc,kBAAkB,cAAc,oBAAoB,WAAW,YAAY,gBAAgB,IAC1G;AAAA,gDAAC,UAAK,KAAK,QAAQ,MAAM,gCAAa,UAAU,OAAO,QAAO,SAAQ;AAAA,IAErE,QAAQ,mBAAmB,WAC1B,4CAAC,mBAAc,GAAM,GACnB,sDAAC,SAAI,KAAK,qBACR,uDAAC,iCAAW,kBAAoC,aAAW,MAAC,QAAQ,KAClE;AAAA,kDAAC,wCACC,sDAAC,mBAAgB,MAAM,WAAW,GACpC;AAAA,MACA,4CAAC,6CAA4B;AAAA,OAC/B,GACF,GACF;AAAA,KAEJ;AAEJ;",
   "names": []
 }

package/dist/esm/Pie.js

@@ -7,15 +7,10 @@ import { usePie } from "./config/usePie";
 import { ColorLegend } from "./parts/ColorLegend";
 const PieChart = (props) => {
   const ctx = usePie(props);
-  return /* @__PURE__ */ jsx(PieContext.Provider, {
-    value: ctx,
-    children: /* @__PURE__ */ jsxs(ChartContainer, {
-      children: [
-        /* @__PURE__ */ jsx(ColorLegend, {}),
-        /* @__PURE__ */ jsx(Pie, {})
-      ]
-    })
-  });
+  return /* @__PURE__ */ jsx(PieContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(ChartContainer, { children: [
+    /* @__PURE__ */ jsx(ColorLegend, {}),
+    /* @__PURE__ */ jsx(Pie, {})
+  ] }) });
 };
 export {
   PieChart

package/dist/esm/Pie.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Pie.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer';\nimport { Pie } from './parts/Pie';\nimport { PieContext } from './PieContext';\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    <PieContext.Provider value={ctx}>\n      <ChartContainer>\n        <ColorLegend />\n        <Pie />\n      </ChartContainer>\n    </PieContext.Provider>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACWjB,SACE,KADF;AAVN,SAAS,sBAAsB;AAC/B,SAAS,WAAW;AACpB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AACrB,MAAM,WAA8C,CAAC,UAAU;AACpE,QAAM,MAAM,OAAO,KAAK;AACxB,SACE,oBAAC,WAAW,UAAX;AAAA,IAAoB,OAAO;AAAA,IAC1B,+BAAC;AAAA,MACC;AAAA,4BAAC,eAAY;AAAA,QACb,oBAAC,OAAI;AAAA;AAAA,KACP;AAAA,GACF;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACWjB,SACE,KADF;AAVN,SAAS,sBAAsB;AAC/B,SAAS,WAAW;AACpB,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AACrB,MAAM,WAA8C,CAAC,UAAU;AACpE,QAAM,MAAM,OAAO,KAAK;AACxB,SACE,oBAAC,WAAW,UAAX,EAAoB,OAAO,KAC1B,+BAAC,kBACC;AAAA,wBAAC,eAAY;AAAA,IACb,oBAAC,OAAI;AAAA,KACP,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/ChartContainer.js

@@ -28,33 +28,32 @@ const ChartContainer = ({ children }) => {
     return radius * 0.1;
   });
   const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();
-  return /* @__PURE__ */ jsx(StyledSVGWrapper, {
-    ref: containerRef,
-    onKeyDown: onInputKeyDown,
-    tabIndex: activeSerie ? -1 : 0,
-    onBlur: handleOnBlur,
-    onFocus: handleOnFocus,
-    onMouseDown: (e) => e.preventDefault(),
-    style: { width: `${width}px`, height: `${height}px` },
-    children: /* @__PURE__ */ jsxs("svg", {
-      ...dimensions,
-      children: [
-        /* @__PURE__ */ jsx("g", {
-          className: "container",
-          transform: `translate(${margin.left + marginRadius},${margin.top + marginRadius})`,
-          children
-        }),
-        hasBaseline ? /* @__PURE__ */ jsx("line", {
-          x1: 0,
-          x2: width,
-          y1: innerHeight + marginRadius,
-          y2: innerHeight + marginRadius,
-          stroke: "grey",
-          strokeWidth: "2"
-        }) : null
-      ]
-    })
-  });
+  return /* @__PURE__ */ jsx(
+    StyledSVGWrapper,
+    {
+      ref: containerRef,
+      onKeyDown: onInputKeyDown,
+      tabIndex: activeSerie ? -1 : 0,
+      onBlur: handleOnBlur,
+      onFocus: handleOnFocus,
+      onMouseDown: (e) => e.preventDefault(),
+      style: { width: `${width}px`, height: `${height}px` },
+      children: /* @__PURE__ */ jsxs("svg", { ...dimensions, children: [
+        /* @__PURE__ */ jsx("g", { className: "container", transform: `translate(${margin.left + marginRadius},${margin.top + marginRadius})`, children }),
+        hasBaseline ? /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: 0,
+            x2: width,
+            y1: innerHeight + marginRadius,
+            y2: innerHeight + marginRadius,
+            stroke: "grey",
+            strokeWidth: "2"
+          }
+        ) : null
+      ] })
+    }
+  );
 };
 export {
   ChartContainer

package/dist/esm/parts/ChartContainer.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ChartContainer.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledSVGWrapper } from '../styles';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation';\nimport { PieContext } from '../PieContext';\n// import { useKeyboardNavigation } from '../config/useKeyboardNavigation';\ninterface ChartContainerT {\n  children: JSX.Element | JSX.Element[] | string | string[];\n}\nexport const ChartContainer: React.ComponentType<ChartContainerT> = ({ children }) => {\n  const {\n    props: { width, height, margin, responsive, hasBaseline, isHalfPie },\n    containerRef,\n    innerHeight,\n    radius,\n    activeSerie,\n  } = useContext(PieContext);\n\n  const dimensions = useMemo(\n    () =>\n      responsive\n        ? {\n            viewBox: `0 0 ${width} ${height}`,\n          }\n        : {\n            width,\n            height,\n          },\n    [height, responsive, width],\n  );\n\n  const marginRadius = useMemo(() => {\n    if (isHalfPie) {\n      return radius * 0.1;\n    }\n    return radius * 0.1;\n  });\n  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\n\n  return (\n    <StyledSVGWrapper\n      ref={containerRef}\n      onKeyDown={onInputKeyDown}\n      // aria-hidden=\"true\"\n      tabIndex={activeSerie ? -1 : 0}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      onMouseDown={(e) => e.preventDefault()}\n      style={{ width: `${width}px`, height: `${height}px` }}\n    >\n      <svg {...dimensions}>\n        <g className=\"container\" transform={`translate(${margin.left + marginRadius},${margin.top + marginRadius})`}>\n          {children}\n        </g>\n        {hasBaseline ? (\n          <line\n            x1={0}\n            x2={width}\n            y1={innerHeight + marginRadius}\n            y2={innerHeight + marginRadius}\n            stroke=\"grey\"\n            strokeWidth=\"2\"\n          />\n        ) : null}\n      </svg>\n    </StyledSVGWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiDjB,SACE,KADF;AAjDN,SAAgB,YAAY,eAAe;AAC3C,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAKpB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,YAAY,aAAa,UAAU;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,UAAU;AAEzB,QAAM,aAAa;AAAA,IACjB,MACE,aACI;AAAA,MACE,SAAS,OAAO,SAAS;AAAA,IAC3B,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACN,CAAC,QAAQ,YAAY,KAAK;AAAA,EAC5B;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,WAAW;AACb,aAAO,SAAS;AAAA,IAClB;AACA,WAAO,SAAS;AAAA,EAClB,CAAC;AACD,QAAM,EAAE,gBAAgB,cAAc,cAAc,IAAI,sBAAsB;AAE9E,SACE,oBAAC;AAAA,IACC,KAAK;AAAA,IACL,WAAW;AAAA,IAEX,UAAU,cAAc,KAAK;AAAA,IAC7B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,IACrC,OAAO,EAAE,OAAO,GAAG,WAAW,QAAQ,GAAG,WAAW;AAAA,IAEpD,+BAAC;AAAA,MAAK,GAAG;AAAA,MACP;AAAA,4BAAC;AAAA,UAAE,WAAU;AAAA,UAAY,WAAW,aAAa,OAAO,OAAO,gBAAgB,OAAO,MAAM;AAAA,UACzF;AAAA,SACH;AAAA,QACC,cACC,oBAAC;AAAA,UACC,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,IAAI,cAAc;AAAA,UAClB,IAAI,cAAc;AAAA,UAClB,QAAO;AAAA,UACP,aAAY;AAAA,SACd,IACE;AAAA;AAAA,KACN;AAAA,GACF;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACiDjB,SACE,KADF;AAjDN,SAAgB,YAAY,eAAe;AAC3C,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAKpB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,YAAY,aAAa,UAAU;AAAA,IACnE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,UAAU;AAEzB,QAAM,aAAa;AAAA,IACjB,MACE,aACI;AAAA,MACE,SAAS,OAAO,SAAS;AAAA,IAC3B,IACA;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,IACN,CAAC,QAAQ,YAAY,KAAK;AAAA,EAC5B;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,WAAW;AACb,aAAO,SAAS;AAAA,IAClB;AACA,WAAO,SAAS;AAAA,EAClB,CAAC;AACD,QAAM,EAAE,gBAAgB,cAAc,cAAc,IAAI,sBAAsB;AAE9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,MAEX,UAAU,cAAc,KAAK;AAAA,MAC7B,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,MACrC,OAAO,EAAE,OAAO,GAAG,WAAW,QAAQ,GAAG,WAAW;AAAA,MAEpD,+BAAC,SAAK,GAAG,YACP;AAAA,4BAAC,OAAE,WAAU,aAAY,WAAW,aAAa,OAAO,OAAO,gBAAgB,OAAO,MAAM,iBACzF,UACH;AAAA,QACC,cACC;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,IAAI,cAAc;AAAA,YAClB,IAAI,cAAc;AAAA,YAClB,QAAO;AAAA,YACP,aAAY;AAAA;AAAA,QACd,IACE;AAAA,SACN;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/ColorLegend.js

@@ -10,33 +10,13 @@ const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) =
   } = useContext(PieContext);
   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: circleRadius ?? tickSize
-          }),
-          /* @__PURE__ */ jsx("text", {
-            x: tickTextOffset,
-            dy: ".32em",
-            children: domainValue
-          })
-        ]
-      }))
-    ]
-  });
+  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: circleRadius ?? tickSize }),
+      /* @__PURE__ */ jsx("text", { x: tickTextOffset, dy: ".32em", children: domainValue })
+    ] }))
+  ] });
 };
 export {
   ColorLegend

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ColorLegend.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { PieContext } from '../PieContext';\n\nexport const ColorLegend = ({ tickSpacing = 20, tickSize = 10, tickTextOffset = 20 }) => {\n  const {\n    colorScale,\n    innerWidth,\n    props: { colorLegend, circleRadius },\n  } = useContext(PieContext);\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={circleRadius ?? tickSize} />\n          <text x={tickTextOffset} dy=\".32em\">\n            {domainValue}\n          </text>\n        </g>\n      ))}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACajB,cAIE,YAJF;AAbN,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,cAAc,CAAC,EAAE,cAAc,IAAI,WAAW,IAAI,iBAAiB,GAAG,MAAM;AACvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,aAAa;AAAA,EACrC,IAAI,WAAW,UAAU;AAEzB,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,gBAAgB;AAAA,WAAU;AAAA,UACpE,oBAAC;AAAA,YAAK,GAAG;AAAA,YAAgB,IAAG;AAAA,YACzB;AAAA,WACH;AAAA;AAAA,OACF,CACD;AAAA;AAAA,GACH;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACajB,cAIE,YAJF;AAbN,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB;AAEpB,MAAM,cAAc,CAAC,EAAE,cAAc,IAAI,WAAW,IAAI,iBAAiB,GAAG,MAAM;AACvF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,aAAa;AAAA,EACrC,IAAI,WAAW,UAAU;AAEzB,MAAI,CAAC;AAAa,WAAO;AACzB,SACE,qBAAC,OAAE,WAAW,aAAa,aAAa,UACtC;AAAA,wBAAC,UAAK,GAAG,IAAI,GAAG,KAAK,WAAU,cAAa,YAAW,UACpD,sBAAY,OACf;AAAA,IACC,WAAW,OAAO,EAAE,IAAI,CAAC,aAAa,MACrC,qBAAC,OAAE,WAAU,QAAO,WAAW,eAAe,IAAI,gBAChD;AAAA,0BAAC,YAAO,MAAM,WAAW,WAAW,GAAG,GAAG,gBAAgB,UAAU;AAAA,MACpE,oBAAC,UAAK,GAAG,gBAAgB,IAAG,SACzB,uBACH;AAAA,OACF,CACD;AAAA,KACH;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Pie.js

@@ -13,28 +13,11 @@ const Pie = () => {
   } = useContext(PieContext);
   const radius = Math.min(innerWidth, innerHeight) / 2;
   const currentInnerHeight = isHalfPie ? innerHeight : innerHeight / 2;
-  return /* @__PURE__ */ jsxs("g", {
-    transform: `translate(${innerWidth / 2},${currentInnerHeight})`,
-    children: [
-      pieData.map((slice) => /* @__PURE__ */ jsx(Slice, {
-        data: slice
-      }, slice.index)),
-      !isHalfPie && label ? /* @__PURE__ */ jsx(StyledInnerText, {
-        x: 0,
-        y: 0,
-        textAnchor: "middle",
-        alignmentBaseline: "middle",
-        children: label
-      }) : null,
-      isHalfPie && label ? /* @__PURE__ */ jsx(StyledInnerText, {
-        x: 0,
-        y: -innerRadius / 4,
-        textAnchor: "middle",
-        alignmentBaseline: "middle",
-        children: label
-      }) : null
-    ]
-  });
+  return /* @__PURE__ */ jsxs("g", { transform: `translate(${innerWidth / 2},${currentInnerHeight})`, children: [
+    pieData.map((slice) => /* @__PURE__ */ jsx(Slice, { data: slice }, slice.index)),
+    !isHalfPie && label ? /* @__PURE__ */ jsx(StyledInnerText, { x: 0, y: 0, textAnchor: "middle", alignmentBaseline: "middle", children: label }) : null,
+    isHalfPie && label ? /* @__PURE__ */ jsx(StyledInnerText, { x: 0, y: -innerRadius / 4, textAnchor: "middle", alignmentBaseline: "middle", children: label }) : null
+  ] });
 };
 export {
   Pie

package/dist/esm/parts/Pie.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Pie.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { Slice } from './Slice';\nimport { PieContext } from '../PieContext';\nimport { StyledInnerText } from '../styles';\nexport const Pie = () => {\n  const {\n    innerHeight,\n    innerWidth,\n    pieData,\n\n    props: { isHalfPie, label, innerRadius },\n  } = useContext(PieContext);\n\n  const radius = Math.min(innerWidth, innerHeight) / 2;\n\n  const currentInnerHeight = isHalfPie ? innerHeight : innerHeight / 2;\n  return (\n    <g transform={`translate(${innerWidth / 2},${currentInnerHeight})`}>\n      {pieData.map((slice) => (\n        <Slice key={slice.index} data={slice} />\n      ))}\n      {!isHalfPie && label ? (\n        <StyledInnerText x={0} y={0} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </StyledInnerText>\n      ) : null}\n      {isHalfPie && label ? (\n        <StyledInnerText x={0} y={-innerRadius / 4} textAnchor=\"middle\" alignmentBaseline=\"middle\">\n          {label}\n        </StyledInnerText>\n      ) : null}\n    </g>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiBnB,SAEI,KAFJ;AAjBJ,SAAgB,kBAAkB;AAClC,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AACzB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEA,OAAO,EAAE,WAAW,OAAO,YAAY;AAAA,EACzC,IAAI,WAAW,UAAU;AAEzB,QAAM,SAAS,KAAK,IAAI,YAAY,WAAW,IAAI;AAEnD,QAAM,qBAAqB,YAAY,cAAc,cAAc;AACnE,SACE,qBAAC;AAAA,IAAE,WAAW,aAAa,aAAa,KAAK;AAAA,IAC1C;AAAA,cAAQ,IAAI,CAAC,UACZ,oBAAC;AAAA,QAAwB,MAAM;AAAA,SAAnB,MAAM,KAAoB,CACvC;AAAA,MACA,CAAC,aAAa,QACb,oBAAC;AAAA,QAAgB,GAAG;AAAA,QAAG,GAAG;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QAChE;AAAA,OACH,IACE;AAAA,MACH,aAAa,QACZ,oBAAC;AAAA,QAAgB,GAAG;AAAA,QAAG,GAAG,CAAC,cAAc;AAAA,QAAG,YAAW;AAAA,QAAS,mBAAkB;AAAA,QAC/E;AAAA,OACH,IACE;AAAA;AAAA,GACN;AAEJ;",
+  "mappings": "AAAA,YAAY,WAAW;ACiBnB,SAEI,KAFJ;AAjBJ,SAAgB,kBAAkB;AAClC,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AACzB,MAAM,MAAM,MAAM;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IAEA,OAAO,EAAE,WAAW,OAAO,YAAY;AAAA,EACzC,IAAI,WAAW,UAAU;AAEzB,QAAM,SAAS,KAAK,IAAI,YAAY,WAAW,IAAI;AAEnD,QAAM,qBAAqB,YAAY,cAAc,cAAc;AACnE,SACE,qBAAC,OAAE,WAAW,aAAa,aAAa,KAAK,uBAC1C;AAAA,YAAQ,IAAI,CAAC,UACZ,oBAAC,SAAwB,MAAM,SAAnB,MAAM,KAAoB,CACvC;AAAA,IACA,CAAC,aAAa,QACb,oBAAC,mBAAgB,GAAG,GAAG,GAAG,GAAG,YAAW,UAAS,mBAAkB,UAChE,iBACH,IACE;AAAA,IACH,aAAa,QACZ,oBAAC,mBAAgB,GAAG,GAAG,GAAG,CAAC,cAAc,GAAG,YAAW,UAAS,mBAAkB,UAC/E,iBACH,IACE;AAAA,KACN;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Slice.js

@@ -50,38 +50,13 @@ const Slice = ({ data }) => {
     if (name)
       setActiveSerie("");
   }, [name, setActiveSerie]);
-  return /* @__PURE__ */ jsxs("g", {
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleOnMouseLeave,
-    transform: isHalfPie ? "rotate(-90)" : "",
-    children: [
-      /* @__PURE__ */ jsx("path", {
-        ref: arcRef,
-        fill: COLOR_PALLET[color] ?? color,
-        stroke: "white"
-      }),
-      name && TooltipRenderer && isFocus && /* @__PURE__ */ jsx("foreignObject", {
-        x,
-        y,
-        children: /* @__PURE__ */ jsx("div", {
-          ref: setReferenceElement,
-          children: /* @__PURE__ */ jsxs(DSPopperJS, {
-            referenceElement,
-            showPopover: true,
-            zIndex: 3e3,
-            children: [
-              /* @__PURE__ */ jsx(StyledTooltipContainer, {
-                children: /* @__PURE__ */ jsx(TooltipRenderer, {
-                  data: serieData
-                })
-              }),
-              /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {})
-            ]
-          })
-        })
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxs("g", { onMouseEnter: handleMouseEnter, onMouseLeave: handleOnMouseLeave, transform: isHalfPie ? "rotate(-90)" : "", children: [
+    /* @__PURE__ */ jsx("path", { ref: arcRef, fill: COLOR_PALLET[color] ?? color, stroke: "white" }),
+    name && TooltipRenderer && isFocus && /* @__PURE__ */ jsx("foreignObject", { x, y, children: /* @__PURE__ */ jsx("div", { ref: setReferenceElement, children: /* @__PURE__ */ jsxs(DSPopperJS, { referenceElement, showPopover: true, zIndex: 3e3, children: [
+      /* @__PURE__ */ jsx(StyledTooltipContainer, { children: /* @__PURE__ */ jsx(TooltipRenderer, { data: serieData }) }),
+      /* @__PURE__ */ jsx(StyledMouseOverDetectionBox, {})
+    ] }) }) })
+  ] });
 };
 export {
   Slice

package/dist/esm/parts/Slice.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Slice.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';\nimport { arc, select } from 'd3';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PieContext } from '../PieContext';\nimport { COLOR_PALLET } from '../helpers/colorPallet';\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles';\nexport const Slice = ({ data }) => {\n  const {\n    innerHeight,\n    innerWidth,\n    activeSerie,\n    setActiveSerie,\n    props: { series, innerRadius, isHalfPie, TooltipRenderer },\n  } = useContext(PieContext);\n\n  const arcRef = useRef(null);\n\n  const radius = isHalfPie ? Math.min(innerWidth, innerHeight) : Math.min(innerWidth, innerHeight) / 2;\n  const { startAngle, endAngle, index } = data;\n  const currentStartAngle = isHalfPie ? startAngle / 2 : startAngle;\n  const currentEndAngle = isHalfPie ? endAngle / 2 : endAngle;\n\n  const serieData = series?.find((serie) => serie.name === data.data[0]);\n  const { color, name } = serieData || { name: undefined, color: 'grey' };\n\n  const sliceData = useMemo(\n    () =>\n      arc()\n        .innerRadius(innerRadius ? radius * innerRadius : 0)\n        .outerRadius(radius)\n        .startAngle(currentStartAngle)\n        .endAngle(currentEndAngle)(),\n    [currentEndAngle, currentStartAngle, innerRadius, radius],\n  );\n\n  const sliceOver = useMemo(\n    () =>\n      arc()\n        .innerRadius(innerRadius ? radius * innerRadius : 0)\n        .outerRadius(radius + radius * 0.1)\n        .startAngle(currentStartAngle)\n        .endAngle(currentEndAngle),\n    [currentEndAngle, currentStartAngle, innerRadius, radius],\n  );\n\n  const deltaAngle = currentStartAngle + (currentEndAngle - currentStartAngle) / 2;\n  const x = radius * Math.sin(deltaAngle);\n  const y = -radius * Math.cos(deltaAngle);\n\n  const isFocus = useMemo(() => activeSerie === `${name}-${index}`, [activeSerie, index, name]);\n  useEffect(() => {\n    if (arcRef.current) {\n      if (isFocus) select(arcRef.current).transition().attr('d', sliceOver).duration(300);\n      else select(arcRef.current).transition().attr('d', sliceData).duration(300);\n    }\n  }, [sliceData, isFocus, sliceOver]);\n\n  const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n  const handleMouseEnter = useCallback(() => {\n    if (name) setActiveSerie(`${name}-${index}`);\n  }, [index, name, setActiveSerie]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (name) setActiveSerie('');\n  }, [name, setActiveSerie]);\n  return (\n    <g onMouseEnter={handleMouseEnter} onMouseLeave={handleOnMouseLeave} transform={isHalfPie ? 'rotate(-90)' : ''}>\n      <path ref={arcRef} fill={COLOR_PALLET[color] ?? color} stroke=\"white\"></path>\n\n      {name && TooltipRenderer && isFocus && (\n        <foreignObject x={x} y={y}>\n          <div ref={setReferenceElement}>\n            <DSPopperJS referenceElement={referenceElement} showPopover zIndex={3000}>\n              <StyledTooltipContainer>\n                <TooltipRenderer data={serieData} />\n              </StyledTooltipContainer>\n              <StyledMouseOverDetectionBox />\n            </DSPopperJS>\n          </div>\n        </foreignObject>\n      )}\n    </g>\n  );\n};\n"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dataviz-pie",
-  "version": "3.12.0-rc.2",
+  "version": "3.12.0-rc.4",
   "license": "MIT",
   "description": "ICE MT - Dimsum - DataViz",
   "files": [
@@ -35,9 +35,9 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-popperjs": "3.12.0-rc.2",
-    "@elliemae/ds-system": "3.12.0-rc.2",
-    "@elliemae/ds-utilities": "3.12.0-rc.2",
+    "@elliemae/ds-popperjs": "3.12.0-rc.4",
+    "@elliemae/ds-system": "3.12.0-rc.4",
+    "@elliemae/ds-utilities": "3.12.0-rc.4",
     "d3": "~7.6.1",
     "d3-shape": "^3.1.0"
   },