@elliemae/ds-dataviz-pie 3.10.3 → 3.11.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/cjs/config/usePie.js +19 -6
  2. package/dist/cjs/config/usePie.js.map +2 -2
  3. package/dist/cjs/parts/ChartContainer.js +26 -7
  4. package/dist/cjs/parts/ChartContainer.js.map +2 -2
  5. package/dist/cjs/parts/Slice.js +15 -18
  6. package/dist/cjs/parts/Slice.js.map +2 -2
  7. package/dist/cjs/styles.js +3 -1
  8. package/dist/cjs/styles.js.map +2 -2
  9. package/dist/esm/config/usePie.js +19 -6
  10. package/dist/esm/config/usePie.js.map +2 -2
  11. package/dist/esm/parts/ChartContainer.js +27 -8
  12. package/dist/esm/parts/ChartContainer.js.map +2 -2
  13. package/dist/esm/parts/Slice.js +15 -18
  14. package/dist/esm/parts/Slice.js.map +2 -2
  15. package/dist/esm/styles.js +3 -1
  16. package/dist/esm/styles.js.map +2 -2
  17. package/package.json +8 -8
  18. package/dist/cjs/parts/Point.js +0 -81
  19. package/dist/cjs/parts/Point.js.map +0 -7
  20. package/dist/esm/parts/Point.js +0 -55
  21. package/dist/esm/parts/Point.js.map +0 -7
package/dist/cjs/config/usePie.js CHANGED
@@ -31,12 +31,16 @@ var React = __toESM(require("react"));
31
31
  var import_react = require("react");
32
32
  var import_d3 = require("d3");
33
33
  const usePie = (props) => {
34
- const { series, width, height, margin } = props;
34
+ const { series, width, height, margin, isHalfPie, size } = props;
35
35
  const containerRef = (0, import_react.useRef)(null);
36
36
  const svgRef = (0, import_react.useRef)(null);
37
37
  const [activeSerie, setActiveSerie] = (0, import_react.useState)("");
38
- const innerHeight = height - margin.top - margin.bottom;
39
- const innerWidth = width - margin.left - margin.right;
38
+ const prevInnerWidth = width - margin.left - margin.right;
39
+ const prevInnerHeight = height - margin.top - margin.bottom;
40
+ const prevRadius = isHalfPie ? Math.min(prevInnerWidth, prevInnerHeight) : Math.min(prevInnerWidth, prevInnerHeight) / 2;
41
+ const innerHeight = (0, import_react.useMemo)(() => prevInnerHeight - prevRadius * 0.1 * 2, [prevInnerHeight, prevRadius]);
42
+ const innerWidth = (0, import_react.useMemo)(() => prevInnerWidth - prevRadius * 0.1 * 2, [prevInnerWidth, prevRadius]);
43
+ const radius = isHalfPie ? Math.min(innerHeight, innerWidth) : Math.min(innerHeight, innerWidth) / 2;
40
44
  const groups = series.map((serie) => serie.name);
41
45
  const currentData = (0, import_react.useMemo)(
42
46
  () => series.map((serie, i) => ({
@@ -45,7 +49,14 @@ const usePie = (props) => {
45
49
  })),
46
50
  [series]
47
51
  );
48
- const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});
52
+ let total = 0;
53
+ const data = series.reduce((acc, curr) => {
54
+ total += curr.data;
55
+ return { ...acc, [curr.name]: curr.data };
56
+ }, {});
57
+ if (size) {
58
+ data["rest"] = size - total;
59
+ }
49
60
  const pieGenerator = (0, import_d3.pie)().value((d) => d[1]).sort(null).padAngle(0.02);
50
61
  const pieData = pieGenerator(Object.entries(data));
51
62
  return (0, import_react.useMemo)(
@@ -59,9 +70,11 @@ const usePie = (props) => {
59
70
  activeSerie,
60
71
  pieData,
61
72
  setActiveSerie,
62
- currentData
73
+ currentData,
74
+ prevRadius,
75
+ radius
63
76
  }),
64
- [props, innerHeight, innerWidth, groups, activeSerie, pieData, currentData]
77
+ [props, radius, prevRadius, innerHeight, innerWidth, groups, activeSerie, pieData, currentData]
65
78
  );
66
79
  };
67
80
  //# sourceMappingURL=usePie.js.map
package/dist/cjs/config/usePie.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/config/usePie.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPieT } from '../react-desc-prop-types';\n\nexport const usePie = (props: DSPieT.Props) => {\n // useValidateTypescriptPropTypes(props, propTypes);\n\n const { series, width, height, margin } = props;\n\n const containerRef = useRef(null);\n const svgRef = useRef(null);\n\n const [activeSerie, setActiveSerie] = useState('');\n\n const innerHeight = height - margin.top - margin.bottom;\n const innerWidth = width - margin.left - margin.right;\n\n const groups = series.map((serie) => serie.name);\n\n const currentData = useMemo(\n () =>\n series.map((serie, i) => ({\n ...serie,\n key: `${serie.name}-${i}`,\n })),\n [series],\n );\n const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});\n const pieGenerator = pie()\n .value((d) => d[1])\n .sort(null)\n .padAngle(0.02);\n const pieData = pieGenerator(Object.entries(data));\n\n return useMemo(\n () => ({\n props,\n innerHeight,\n innerWidth,\n groups,\n svgRef,\n containerRef,\n activeSerie,\n pieData,\n setActiveSerie,\n currentData,\n }),\n [props, innerHeight, innerWidth, groups, activeSerie, pieData, currentData],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0C;AAC1C,gBAAoB;AAIb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,IAAI;AAE1C,QAAM,mBAAe,qBAAO,IAAI;AAChC,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AAEjD,QAAM,cAAc,SAAS,OAAO,MAAM,OAAO;AACjD,QAAM,aAAa,QAAQ,OAAO,OAAO,OAAO;AAEhD,QAAM,SAAS,OAAO,IAAI,CAAC,UAAU,MAAM,IAAI;AAE/C,QAAM,kBAAc;AAAA,IAClB,MACE,OAAO,IAAI,CAAC,OAAO,OAAO;AAAA,MACxB,GAAG;AAAA,MACH,KAAK,GAAG,MAAM,QAAQ;AAAA,IACxB,EAAE;AAAA,IACJ,CAAC,MAAM;AAAA,EACT;AACA,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK,IAAI,CAAC,CAAC;AAClF,QAAM,mBAAe,eAAI,EACtB,MAAM,CAAC,MAAM,EAAE,EAAE,EACjB,KAAK,IAAI,EACT,SAAS,IAAI;AAChB,QAAM,UAAU,aAAa,OAAO,QAAQ,IAAI,CAAC;AAEjD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,aAAa,YAAY,QAAQ,aAAa,SAAS,WAAW;AAAA,EAC5E;AACF;",
4
+ "sourcesContent": ["import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPieT } from '../react-desc-prop-types';\n\nexport const usePie = (props: DSPieT.Props) => {\n // useValidateTypescriptPropTypes(props, propTypes);\n\n const { series, width, height, margin, isHalfPie, size } = props;\n\n const containerRef = useRef(null);\n const svgRef = useRef(null);\n\n const [activeSerie, setActiveSerie] = useState('');\n\n const prevInnerWidth = width - margin.left - margin.right;\n const prevInnerHeight = height - margin.top - margin.bottom;\n const prevRadius = isHalfPie\n ? Math.min(prevInnerWidth, prevInnerHeight)\n : Math.min(prevInnerWidth, prevInnerHeight) / 2;\n\n const innerHeight = useMemo(() => prevInnerHeight - prevRadius * 0.1 * 2, [prevInnerHeight, prevRadius]);\n const innerWidth = useMemo(() => prevInnerWidth - prevRadius * 0.1 * 2, [prevInnerWidth, prevRadius]);\n\n const radius = isHalfPie ? Math.min(innerHeight, innerWidth) : Math.min(innerHeight, innerWidth) / 2;\n\n const groups = series.map((serie) => serie.name);\n\n const currentData = useMemo(\n () =>\n series.map((serie, i) => ({\n ...serie,\n key: `${serie.name}-${i}`,\n })),\n [series],\n );\n let total = 0;\n const data = series.reduce((acc, curr) => {\n total += curr.data;\n return { ...acc, [curr.name]: curr.data };\n }, {});\n if (size) {\n data['rest'] = size - total;\n }\n const pieGenerator = pie()\n .value((d) => d[1])\n .sort(null)\n .padAngle(0.02);\n const pieData = pieGenerator(Object.entries(data));\n\n return useMemo(\n () => ({\n props,\n innerHeight,\n innerWidth,\n groups,\n svgRef,\n containerRef,\n activeSerie,\n pieData,\n setActiveSerie,\n currentData,\n prevRadius,\n radius,\n }),\n [props, radius, prevRadius, innerHeight, innerWidth, groups, activeSerie, pieData, currentData],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0C;AAC1C,gBAAoB;AAIb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,QAAQ,WAAW,KAAK,IAAI;AAE3D,QAAM,mBAAe,qBAAO,IAAI;AAChC,QAAM,aAAS,qBAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,EAAE;AAEjD,QAAM,iBAAiB,QAAQ,OAAO,OAAO,OAAO;AACpD,QAAM,kBAAkB,SAAS,OAAO,MAAM,OAAO;AACrD,QAAM,aAAa,YACf,KAAK,IAAI,gBAAgB,eAAe,IACxC,KAAK,IAAI,gBAAgB,eAAe,IAAI;AAEhD,QAAM,kBAAc,sBAAQ,MAAM,kBAAkB,aAAa,MAAM,GAAG,CAAC,iBAAiB,UAAU,CAAC;AACvG,QAAM,iBAAa,sBAAQ,MAAM,iBAAiB,aAAa,MAAM,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAEpG,QAAM,SAAS,YAAY,KAAK,IAAI,aAAa,UAAU,IAAI,KAAK,IAAI,aAAa,UAAU,IAAI;AAEnG,QAAM,SAAS,OAAO,IAAI,CAAC,UAAU,MAAM,IAAI;AAE/C,QAAM,kBAAc;AAAA,IAClB,MACE,OAAO,IAAI,CAAC,OAAO,OAAO;AAAA,MACxB,GAAG;AAAA,MACH,KAAK,GAAG,MAAM,QAAQ;AAAA,IACxB,EAAE;AAAA,IACJ,CAAC,MAAM;AAAA,EACT;AACA,MAAI,QAAQ;AACZ,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,SAAS;AACxC,aAAS,KAAK;AACd,WAAO,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK;AAAA,EAC1C,GAAG,CAAC,CAAC;AACL,MAAI,MAAM;AACR,SAAK,UAAU,OAAO;AAAA,EACxB;AACA,QAAM,mBAAe,eAAI,EACtB,MAAM,CAAC,MAAM,EAAE,EAAE,EACjB,KAAK,IAAI,EACT,SAAS,IAAI;AAChB,QAAM,UAAU,aAAa,OAAO,QAAQ,IAAI,CAAC;AAEjD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ,YAAY,aAAa,YAAY,QAAQ,aAAa,SAAS,WAAW;AAAA,EAChG;AACF;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/ChartContainer.js CHANGED
@@ -35,8 +35,10 @@ var import_useKeyboardNavigation = require("../config/useKeyboardNavigation");
35
35
  var import_PieContext = require("../PieContext");
36
36
  const ChartContainer = ({ children }) => {
37
37
  const {
38
- props: { width, height, margin, responsive },
38
+ props: { width, height, margin, responsive, hasBaseline, isHalfPie },
39
39
  containerRef,
40
+ innerHeight,
41
+ radius,
40
42
  activeSerie
41
43
  } = (0, import_react.useContext)(import_PieContext.PieContext);
42
44
  const dimensions = (0, import_react.useMemo)(
@@ -48,6 +50,12 @@ const ChartContainer = ({ children }) => {
48
50
  },
49
51
  [height, responsive, width]
50
52
  );
53
+ const marginRadius = (0, import_react.useMemo)(() => {
54
+ if (isHalfPie) {
55
+ return radius * 0.1;
56
+ }
57
+ return radius * 0.1;
58
+ });
51
59
  const { onInputKeyDown, handleOnBlur, handleOnFocus } = (0, import_useKeyboardNavigation.useKeyboardNavigation)();
52
60
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledSVGWrapper, {
53
61
  ref: containerRef,
@@ -56,13 +64,24 @@ const ChartContainer = ({ children }) => {
56
64
  onBlur: handleOnBlur,
57
65
  onFocus: handleOnFocus,
58
66
  onMouseDown: (e) => e.preventDefault(),
59
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
67
+ style: { width: `${width}px`, height: `${height}px` },
68
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
60
69
  ...dimensions,
61
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
62
- className: "container",
63
- transform: `translate(${margin.left},${margin.top})`,
64
- children
65
- })
70
+ children: [
71
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", {
72
+ className: "container",
73
+ transform: `translate(${margin.left + marginRadius},${margin.top + marginRadius})`,
74
+ children
75
+ }),
76
+ hasBaseline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", {
77
+ x1: 0,
78
+ x2: width,
79
+ y1: innerHeight + marginRadius,
80
+ y2: innerHeight + marginRadius,
81
+ stroke: "grey",
82
+ strokeWidth: "2"
83
+ }) : null
84
+ ]
66
85
  })
67
86
  });
68
87
  };
package/dist/cjs/parts/ChartContainer.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/ChartContainer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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 },\n containerRef,\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 const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\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 >\n <svg {...dimensions}>\n <g className=\"container\" transform={`translate(${margin.left},${margin.top})`}>\n {children}\n </g>\n </svg>\n </StyledSVGWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA2C;AAC3C,oBAAiC;AACjC,mCAAsC;AACtC,wBAA2B;AAKpB,MAAM,iBAAuD,CAAC,EAAE,SAAS,MAAM;AACpF,QAAM;AAAA,IACJ,OAAO,EAAE,OAAO,QAAQ,QAAQ,WAAW;AAAA,IAC3C;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;AACA,QAAM,EAAE,gBAAgB,cAAc,cAAc,QAAI,oDAAsB;AAC9E,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,IAErC,sDAAC;AAAA,MAAK,GAAG;AAAA,MACP,sDAAC;AAAA,QAAE,WAAU;AAAA,QAAY,WAAW,aAAa,OAAO,QAAQ,OAAO;AAAA,QACpE;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
4
+ "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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,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;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/Slice.js CHANGED
@@ -44,44 +44,41 @@ const Slice = ({ data }) => {
44
44
  props: { series, innerRadius, isHalfPie, TooltipRenderer }
45
45
  } = (0, import_react.useContext)(import_PieContext.PieContext);
46
46
  const arcRef = (0, import_react.useRef)(null);
47
- const arcFocusedRef = (0, import_react.useRef)(null);
48
47
  const radius = isHalfPie ? Math.min(innerWidth, innerHeight) : Math.min(innerWidth, innerHeight) / 2;
49
48
  const { startAngle, endAngle, index } = data;
50
49
  const currentStartAngle = isHalfPie ? startAngle / 2 : startAngle;
51
50
  const currentEndAngle = isHalfPie ? endAngle / 2 : endAngle;
52
51
  const serieData = series?.find((serie) => serie.name === data.data[0]);
53
- const { color, name } = serieData;
52
+ const { color, name } = serieData || { name: void 0, color: "grey" };
54
53
  const sliceData = (0, import_react.useMemo)(
55
- () => (0, import_d3.arc)().innerRadius(innerRadius ?? 0).outerRadius(radius).startAngle(currentStartAngle).endAngle(currentEndAngle)(),
54
+ () => (0, import_d3.arc)().innerRadius(innerRadius ? radius * innerRadius : 0).outerRadius(radius).startAngle(currentStartAngle).endAngle(currentEndAngle)(),
56
55
  [currentEndAngle, currentStartAngle, innerRadius, radius]
57
56
  );
58
57
  const sliceOver = (0, import_react.useMemo)(
59
- () => (0, import_d3.arc)().innerRadius(innerRadius ?? 0).outerRadius(radius + 5).startAngle(currentStartAngle).endAngle(currentEndAngle),
58
+ () => (0, import_d3.arc)().innerRadius(innerRadius ? radius * innerRadius : 0).outerRadius(radius + radius * 0.1).startAngle(currentStartAngle).endAngle(currentEndAngle),
60
59
  [currentEndAngle, currentStartAngle, innerRadius, radius]
61
60
  );
62
61
  const deltaAngle = currentStartAngle + (currentEndAngle - currentStartAngle) / 2;
63
62
  const x = radius * Math.sin(deltaAngle);
64
63
  const y = -radius * Math.cos(deltaAngle);
65
64
  const isFocus = (0, import_react.useMemo)(() => activeSerie === `${name}-${index}`, [activeSerie, index, name]);
66
- const [isHover, setIsHover] = (0, import_react.useState)(false);
67
65
  (0, import_react.useEffect)(() => {
68
66
  if (arcRef.current) {
69
- (0, import_d3.select)(arcRef.current).attr("d", sliceData);
67
+ if (isFocus)
68
+ (0, import_d3.select)(arcRef.current).transition().attr("d", sliceOver).duration(300);
69
+ else
70
+ (0, import_d3.select)(arcRef.current).transition().attr("d", sliceData).duration(300);
70
71
  }
71
- }, [sliceData, sliceOver]);
72
+ }, [sliceData, isFocus, sliceOver]);
72
73
  const [referenceElement, setReferenceElement] = (0, import_react.useState)();
73
74
  const handleMouseEnter = (0, import_react.useCallback)(() => {
74
- setActiveSerie(`${name}-${index}`);
75
- setIsHover(true);
76
- if (!isHalfPie)
77
- (0, import_d3.select)(arcRef.current).transition().attr("d", sliceOver).duration(300);
78
- }, [index, isHalfPie, name, setActiveSerie, sliceOver]);
75
+ if (name)
76
+ setActiveSerie(`${name}-${index}`);
77
+ }, [index, name, setActiveSerie]);
79
78
  const handleOnMouseLeave = (0, import_react.useCallback)(() => {
80
- setActiveSerie("");
81
- setIsHover(false);
82
- if (!isHalfPie)
83
- (0, import_d3.select)(arcRef.current).transition().attr("d", sliceData).duration(300);
84
- }, [isHalfPie, setActiveSerie, sliceData]);
79
+ if (name)
80
+ setActiveSerie("");
81
+ }, [name, setActiveSerie]);
85
82
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
86
83
  onMouseEnter: handleMouseEnter,
87
84
  onMouseLeave: handleOnMouseLeave,
@@ -92,7 +89,7 @@ const Slice = ({ data }) => {
92
89
  fill: import_colorPallet.COLOR_PALLET[color] ?? color,
93
90
  stroke: "white"
94
91
  }),
95
- name !== "no-data" && TooltipRenderer && isFocus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", {
92
+ name && TooltipRenderer && isFocus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", {
96
93
  x,
97
94
  y,
98
95
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
package/dist/cjs/parts/Slice.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/parts/Slice.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "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 const arcFocusedRef = 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;\n\n const sliceData = useMemo(\n () =>\n arc()\n .innerRadius(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 ?? 0)\n .outerRadius(radius + 5)\n .startAngle(currentStartAngle)\n .endAngle(currentEndAngle),\n [currentEndAngle, currentStartAngle, innerRadius, radius],\n );\n\n // const sliceFocus = useMemo(\n // () =>\n // arc()\n // .innerRadius(innerRadius ?? 0)\n // .outerRadius(radius + 5)\n // .startAngle(currentStartAngle + 5)\n // .endAngle(currentEndAngle + 5),\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 const [isHover, setIsHover] = useState(false);\n useEffect(() => {\n if (arcRef.current) {\n select(arcRef.current).attr('d', sliceData);\n }\n // if (arcFocusedRef.current) {\n // select(arcFocusedRef.current).attr('d', sliceFocus);\n // }\n }, [sliceData, sliceOver]);\n\n const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n const handleMouseEnter = useCallback(() => {\n setActiveSerie(`${name}-${index}`);\n setIsHover(true);\n if (!isHalfPie) select(arcRef.current).transition().attr('d', sliceOver).duration(300);\n }, [index, isHalfPie, name, setActiveSerie, sliceOver]);\n\n const handleOnMouseLeave = useCallback(() => {\n setActiveSerie('');\n setIsHover(false);\n if (!isHalfPie) select(arcRef.current).transition().attr('d', sliceData).duration(300);\n }, [isHalfPie, setActiveSerie, sliceData]);\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 {/* <path\n ref={arcFocusedRef}\n fill=\"none\"\n stroke=\"#335cad\"\n stoke-width={2}\n style={{ visibility: isFocus && !isHover ? 'visible' : 'hidden' }}\n ></path> */}\n\n {name !== 'no-data' && 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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAEA,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;AAAA,IAAE,cAAc;AAAA,IAAkB,cAAc;AAAA,IAAoB,WAAW,YAAY,gBAAgB;AAAA,IAC1G;AAAA,kDAAC;AAAA,QAAK,KAAK;AAAA,QAAQ,MAAM,gCAAa,UAAU;AAAA,QAAO,QAAO;AAAA,OAAQ;AAAA,MAErE,QAAQ,mBAAmB,WAC1B,4CAAC;AAAA,QAAc;AAAA,QAAM;AAAA,QACnB,sDAAC;AAAA,UAAI,KAAK;AAAA,UACR,uDAAC;AAAA,YAAW;AAAA,YAAoC,aAAW;AAAA,YAAC,QAAQ;AAAA,YAClE;AAAA,0DAAC;AAAA,gBACC,sDAAC;AAAA,kBAAgB,MAAM;AAAA,iBAAW;AAAA,eACpC;AAAA,cACA,4CAAC,6CAA4B;AAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAAA;AAAA,GAEJ;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/styles.js CHANGED
@@ -41,12 +41,13 @@ const StyledSVGWrapper = import_ds_system.styled.div`
41
41
  }
42
42
  `;
43
43
  const StyledInnerText = import_ds_system.styled.text`
44
- font-size: 14px;
44
+ font-size: 18px;
45
45
  font-weight: 600;
46
46
  `;
47
47
  const StyledTooltipContainer = import_ds_system.styled.div`
48
48
  max-width: 350px;
49
49
  background-color: white;
50
+ pointer-events: none;
50
51
  `;
51
52
  const StyledMouseOverDetectionBox = import_ds_system.styled.div`
52
53
  position: absolute;
@@ -55,5 +56,6 @@ const StyledMouseOverDetectionBox = import_ds_system.styled.div`
55
56
  width: calc(100% + 30px);
56
57
  height: calc(100% + 30px);
57
58
  z-index: -1;
59
+ pointer-events: none;
58
60
  `;
59
61
  //# sourceMappingURL=styles.js.map
package/dist/cjs/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["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 StyledInnerText = styled.text`\n font-size: 14px;\n font-weight: 600;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n max-width: 350px;\n background-color: white;\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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAErB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAK/B,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["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 StyledInnerText = styled.text`\n font-size: 18px;\n font-weight: 600;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n max-width: 350px;\n background-color: white;\n pointer-events: none;\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 pointer-events: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAErB,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAK/B,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/dist/esm/config/usePie.js CHANGED
@@ -2,12 +2,16 @@ import * as React from "react";
2
2
  import { useMemo, useState, useRef } from "react";
3
3
  import { pie } from "d3";
4
4
  const usePie = (props) => {
5
- const { series, width, height, margin } = props;
5
+ const { series, width, height, margin, isHalfPie, size } = props;
6
6
  const containerRef = useRef(null);
7
7
  const svgRef = useRef(null);
8
8
  const [activeSerie, setActiveSerie] = useState("");
9
- const innerHeight = height - margin.top - margin.bottom;
10
- const innerWidth = width - margin.left - margin.right;
9
+ const prevInnerWidth = width - margin.left - margin.right;
10
+ const prevInnerHeight = height - margin.top - margin.bottom;
11
+ const prevRadius = isHalfPie ? Math.min(prevInnerWidth, prevInnerHeight) : Math.min(prevInnerWidth, prevInnerHeight) / 2;
12
+ const innerHeight = useMemo(() => prevInnerHeight - prevRadius * 0.1 * 2, [prevInnerHeight, prevRadius]);
13
+ const innerWidth = useMemo(() => prevInnerWidth - prevRadius * 0.1 * 2, [prevInnerWidth, prevRadius]);
14
+ const radius = isHalfPie ? Math.min(innerHeight, innerWidth) : Math.min(innerHeight, innerWidth) / 2;
11
15
  const groups = series.map((serie) => serie.name);
12
16
  const currentData = useMemo(
13
17
  () => series.map((serie, i) => ({
@@ -16,7 +20,14 @@ const usePie = (props) => {
16
20
  })),
17
21
  [series]
18
22
  );
19
- const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});
23
+ let total = 0;
24
+ const data = series.reduce((acc, curr) => {
25
+ total += curr.data;
26
+ return { ...acc, [curr.name]: curr.data };
27
+ }, {});
28
+ if (size) {
29
+ data["rest"] = size - total;
30
+ }
20
31
  const pieGenerator = pie().value((d) => d[1]).sort(null).padAngle(0.02);
21
32
  const pieData = pieGenerator(Object.entries(data));
22
33
  return useMemo(
@@ -30,9 +41,11 @@ const usePie = (props) => {
30
41
  activeSerie,
31
42
  pieData,
32
43
  setActiveSerie,
33
- currentData
44
+ currentData,
45
+ prevRadius,
46
+ radius
34
47
  }),
35
- [props, innerHeight, innerWidth, groups, activeSerie, pieData, currentData]
48
+ [props, radius, prevRadius, innerHeight, innerWidth, groups, activeSerie, pieData, currentData]
36
49
  );
37
50
  };
38
51
  export {
package/dist/esm/config/usePie.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/usePie.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPieT } from '../react-desc-prop-types';\n\nexport const usePie = (props: DSPieT.Props) => {\n // useValidateTypescriptPropTypes(props, propTypes);\n\n const { series, width, height, margin } = props;\n\n const containerRef = useRef(null);\n const svgRef = useRef(null);\n\n const [activeSerie, setActiveSerie] = useState('');\n\n const innerHeight = height - margin.top - margin.bottom;\n const innerWidth = width - margin.left - margin.right;\n\n const groups = series.map((serie) => serie.name);\n\n const currentData = useMemo(\n () =>\n series.map((serie, i) => ({\n ...serie,\n key: `${serie.name}-${i}`,\n })),\n [series],\n );\n const data = series.reduce((acc, curr) => ({ ...acc, [curr.name]: curr.data }), {});\n const pieGenerator = pie()\n .value((d) => d[1])\n .sort(null)\n .padAngle(0.02);\n const pieData = pieGenerator(Object.entries(data));\n\n return useMemo(\n () => ({\n props,\n innerHeight,\n innerWidth,\n groups,\n svgRef,\n containerRef,\n activeSerie,\n pieData,\n setActiveSerie,\n currentData,\n }),\n [props, innerHeight, innerWidth, groups, activeSerie, pieData, currentData],\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,UAAU,cAAc;AAC1C,SAAS,WAAW;AAIb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,OAAO,IAAI;AAE1C,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,cAAc,SAAS,OAAO,MAAM,OAAO;AACjD,QAAM,aAAa,QAAQ,OAAO,OAAO,OAAO;AAEhD,QAAM,SAAS,OAAO,IAAI,CAAC,UAAU,MAAM,IAAI;AAE/C,QAAM,cAAc;AAAA,IAClB,MACE,OAAO,IAAI,CAAC,OAAO,OAAO;AAAA,MACxB,GAAG;AAAA,MACH,KAAK,GAAG,MAAM,QAAQ;AAAA,IACxB,EAAE;AAAA,IACJ,CAAC,MAAM;AAAA,EACT;AACA,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,UAAU,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK,IAAI,CAAC,CAAC;AAClF,QAAM,eAAe,IAAI,EACtB,MAAM,CAAC,MAAM,EAAE,EAAE,EACjB,KAAK,IAAI,EACT,SAAS,IAAI;AAChB,QAAM,UAAU,aAAa,OAAO,QAAQ,IAAI,CAAC;AAEjD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,aAAa,YAAY,QAAQ,aAAa,SAAS,WAAW;AAAA,EAC5E;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n// import { useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport type { DSPieT } from '../react-desc-prop-types';\n\nexport const usePie = (props: DSPieT.Props) => {\n // useValidateTypescriptPropTypes(props, propTypes);\n\n const { series, width, height, margin, isHalfPie, size } = props;\n\n const containerRef = useRef(null);\n const svgRef = useRef(null);\n\n const [activeSerie, setActiveSerie] = useState('');\n\n const prevInnerWidth = width - margin.left - margin.right;\n const prevInnerHeight = height - margin.top - margin.bottom;\n const prevRadius = isHalfPie\n ? Math.min(prevInnerWidth, prevInnerHeight)\n : Math.min(prevInnerWidth, prevInnerHeight) / 2;\n\n const innerHeight = useMemo(() => prevInnerHeight - prevRadius * 0.1 * 2, [prevInnerHeight, prevRadius]);\n const innerWidth = useMemo(() => prevInnerWidth - prevRadius * 0.1 * 2, [prevInnerWidth, prevRadius]);\n\n const radius = isHalfPie ? Math.min(innerHeight, innerWidth) : Math.min(innerHeight, innerWidth) / 2;\n\n const groups = series.map((serie) => serie.name);\n\n const currentData = useMemo(\n () =>\n series.map((serie, i) => ({\n ...serie,\n key: `${serie.name}-${i}`,\n })),\n [series],\n );\n let total = 0;\n const data = series.reduce((acc, curr) => {\n total += curr.data;\n return { ...acc, [curr.name]: curr.data };\n }, {});\n if (size) {\n data['rest'] = size - total;\n }\n const pieGenerator = pie()\n .value((d) => d[1])\n .sort(null)\n .padAngle(0.02);\n const pieData = pieGenerator(Object.entries(data));\n\n return useMemo(\n () => ({\n props,\n innerHeight,\n innerWidth,\n groups,\n svgRef,\n containerRef,\n activeSerie,\n pieData,\n setActiveSerie,\n currentData,\n prevRadius,\n radius,\n }),\n [props, radius, prevRadius, innerHeight, innerWidth, groups, activeSerie, pieData, currentData],\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,UAAU,cAAc;AAC1C,SAAS,WAAW;AAIb,MAAM,SAAS,CAAC,UAAwB;AAG7C,QAAM,EAAE,QAAQ,OAAO,QAAQ,QAAQ,WAAW,KAAK,IAAI;AAE3D,QAAM,eAAe,OAAO,IAAI;AAChC,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AAEjD,QAAM,iBAAiB,QAAQ,OAAO,OAAO,OAAO;AACpD,QAAM,kBAAkB,SAAS,OAAO,MAAM,OAAO;AACrD,QAAM,aAAa,YACf,KAAK,IAAI,gBAAgB,eAAe,IACxC,KAAK,IAAI,gBAAgB,eAAe,IAAI;AAEhD,QAAM,cAAc,QAAQ,MAAM,kBAAkB,aAAa,MAAM,GAAG,CAAC,iBAAiB,UAAU,CAAC;AACvG,QAAM,aAAa,QAAQ,MAAM,iBAAiB,aAAa,MAAM,GAAG,CAAC,gBAAgB,UAAU,CAAC;AAEpG,QAAM,SAAS,YAAY,KAAK,IAAI,aAAa,UAAU,IAAI,KAAK,IAAI,aAAa,UAAU,IAAI;AAEnG,QAAM,SAAS,OAAO,IAAI,CAAC,UAAU,MAAM,IAAI;AAE/C,QAAM,cAAc;AAAA,IAClB,MACE,OAAO,IAAI,CAAC,OAAO,OAAO;AAAA,MACxB,GAAG;AAAA,MACH,KAAK,GAAG,MAAM,QAAQ;AAAA,IACxB,EAAE;AAAA,IACJ,CAAC,MAAM;AAAA,EACT;AACA,MAAI,QAAQ;AACZ,QAAM,OAAO,OAAO,OAAO,CAAC,KAAK,SAAS;AACxC,aAAS,KAAK;AACd,WAAO,EAAE,GAAG,KAAK,CAAC,KAAK,OAAO,KAAK,KAAK;AAAA,EAC1C,GAAG,CAAC,CAAC;AACL,MAAI,MAAM;AACR,SAAK,UAAU,OAAO;AAAA,EACxB;AACA,QAAM,eAAe,IAAI,EACtB,MAAM,CAAC,MAAM,EAAE,EAAE,EACjB,KAAK,IAAI,EACT,SAAS,IAAI;AAChB,QAAM,UAAU,aAAa,OAAO,QAAQ,IAAI,CAAC;AAEjD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,QAAQ,YAAY,aAAa,YAAY,QAAQ,aAAa,SAAS,WAAW;AAAA,EAChG;AACF;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/ChartContainer.js CHANGED
@@ -1,13 +1,15 @@
1
1
  import * as React from "react";
2
- import { jsx } from "react/jsx-runtime";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { useContext, useMemo } from "react";
4
4
  import { StyledSVGWrapper } from "../styles";
5
5
  import { useKeyboardNavigation } from "../config/useKeyboardNavigation";
6
6
  import { PieContext } from "../PieContext";
7
7
  const ChartContainer = ({ children }) => {
8
8
  const {
9
- props: { width, height, margin, responsive },
9
+ props: { width, height, margin, responsive, hasBaseline, isHalfPie },
10
10
  containerRef,
11
+ innerHeight,
12
+ radius,
11
13
  activeSerie
12
14
  } = useContext(PieContext);
13
15
  const dimensions = useMemo(
@@ -19,6 +21,12 @@ const ChartContainer = ({ children }) => {
19
21
  },
20
22
  [height, responsive, width]
21
23
  );
24
+ const marginRadius = useMemo(() => {
25
+ if (isHalfPie) {
26
+ return radius * 0.1;
27
+ }
28
+ return radius * 0.1;
29
+ });
22
30
  const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();
23
31
  return /* @__PURE__ */ jsx(StyledSVGWrapper, {
24
32
  ref: containerRef,
@@ -27,13 +35,24 @@ const ChartContainer = ({ children }) => {
27
35
  onBlur: handleOnBlur,
28
36
  onFocus: handleOnFocus,
29
37
  onMouseDown: (e) => e.preventDefault(),
30
- children: /* @__PURE__ */ jsx("svg", {
38
+ style: { width: `${width}px`, height: `${height}px` },
39
+ children: /* @__PURE__ */ jsxs("svg", {
31
40
  ...dimensions,
32
- children: /* @__PURE__ */ jsx("g", {
33
- className: "container",
34
- transform: `translate(${margin.left},${margin.top})`,
35
- children
36
- })
41
+ children: [
42
+ /* @__PURE__ */ jsx("g", {
43
+ className: "container",
44
+ transform: `translate(${margin.left + marginRadius},${margin.top + marginRadius})`,
45
+ children
46
+ }),
47
+ hasBaseline ? /* @__PURE__ */ jsx("line", {
48
+ x1: 0,
49
+ x2: width,
50
+ y1: innerHeight + marginRadius,
51
+ y2: innerHeight + marginRadius,
52
+ stroke: "grey",
53
+ strokeWidth: "2"
54
+ }) : null
55
+ ]
37
56
  })
38
57
  });
39
58
  };
package/dist/esm/parts/ChartContainer.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ChartContainer.tsx"],
4
- "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 },\n containerRef,\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 const { onInputKeyDown, handleOnBlur, handleOnFocus } = useKeyboardNavigation();\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 >\n <svg {...dimensions}>\n <g className=\"container\" transform={`translate(${margin.left},${margin.top})`}>\n {children}\n </g>\n </svg>\n </StyledSVGWrapper>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,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,WAAW;AAAA,IAC3C;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;AACA,QAAM,EAAE,gBAAgB,cAAc,cAAc,IAAI,sBAAsB;AAC9E,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,IAErC,8BAAC;AAAA,MAAK,GAAG;AAAA,MACP,8BAAC;AAAA,QAAE,WAAU;AAAA,QAAY,WAAW,aAAa,OAAO,QAAQ,OAAO;AAAA,QACpE;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
4
+ "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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,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;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Slice.js CHANGED
@@ -15,44 +15,41 @@ const Slice = ({ data }) => {
15
15
  props: { series, innerRadius, isHalfPie, TooltipRenderer }
16
16
  } = useContext(PieContext);
17
17
  const arcRef = useRef(null);
18
- const arcFocusedRef = useRef(null);
19
18
  const radius = isHalfPie ? Math.min(innerWidth, innerHeight) : Math.min(innerWidth, innerHeight) / 2;
20
19
  const { startAngle, endAngle, index } = data;
21
20
  const currentStartAngle = isHalfPie ? startAngle / 2 : startAngle;
22
21
  const currentEndAngle = isHalfPie ? endAngle / 2 : endAngle;
23
22
  const serieData = series?.find((serie) => serie.name === data.data[0]);
24
- const { color, name } = serieData;
23
+ const { color, name } = serieData || { name: void 0, color: "grey" };
25
24
  const sliceData = useMemo(
26
- () => arc().innerRadius(innerRadius ?? 0).outerRadius(radius).startAngle(currentStartAngle).endAngle(currentEndAngle)(),
25
+ () => arc().innerRadius(innerRadius ? radius * innerRadius : 0).outerRadius(radius).startAngle(currentStartAngle).endAngle(currentEndAngle)(),
27
26
  [currentEndAngle, currentStartAngle, innerRadius, radius]
28
27
  );
29
28
  const sliceOver = useMemo(
30
- () => arc().innerRadius(innerRadius ?? 0).outerRadius(radius + 5).startAngle(currentStartAngle).endAngle(currentEndAngle),
29
+ () => arc().innerRadius(innerRadius ? radius * innerRadius : 0).outerRadius(radius + radius * 0.1).startAngle(currentStartAngle).endAngle(currentEndAngle),
31
30
  [currentEndAngle, currentStartAngle, innerRadius, radius]
32
31
  );
33
32
  const deltaAngle = currentStartAngle + (currentEndAngle - currentStartAngle) / 2;
34
33
  const x = radius * Math.sin(deltaAngle);
35
34
  const y = -radius * Math.cos(deltaAngle);
36
35
  const isFocus = useMemo(() => activeSerie === `${name}-${index}`, [activeSerie, index, name]);
37
- const [isHover, setIsHover] = useState(false);
38
36
  useEffect(() => {
39
37
  if (arcRef.current) {
40
- select(arcRef.current).attr("d", sliceData);
38
+ if (isFocus)
39
+ select(arcRef.current).transition().attr("d", sliceOver).duration(300);
40
+ else
41
+ select(arcRef.current).transition().attr("d", sliceData).duration(300);
41
42
  }
42
- }, [sliceData, sliceOver]);
43
+ }, [sliceData, isFocus, sliceOver]);
43
44
  const [referenceElement, setReferenceElement] = useState();
44
45
  const handleMouseEnter = useCallback(() => {
45
- setActiveSerie(`${name}-${index}`);
46
- setIsHover(true);
47
- if (!isHalfPie)
48
- select(arcRef.current).transition().attr("d", sliceOver).duration(300);
49
- }, [index, isHalfPie, name, setActiveSerie, sliceOver]);
46
+ if (name)
47
+ setActiveSerie(`${name}-${index}`);
48
+ }, [index, name, setActiveSerie]);
50
49
  const handleOnMouseLeave = useCallback(() => {
51
- setActiveSerie("");
52
- setIsHover(false);
53
- if (!isHalfPie)
54
- select(arcRef.current).transition().attr("d", sliceData).duration(300);
55
- }, [isHalfPie, setActiveSerie, sliceData]);
50
+ if (name)
51
+ setActiveSerie("");
52
+ }, [name, setActiveSerie]);
56
53
  return /* @__PURE__ */ jsxs("g", {
57
54
  onMouseEnter: handleMouseEnter,
58
55
  onMouseLeave: handleOnMouseLeave,
@@ -63,7 +60,7 @@ const Slice = ({ data }) => {
63
60
  fill: COLOR_PALLET[color] ?? color,
64
61
  stroke: "white"
65
62
  }),
66
- name !== "no-data" && TooltipRenderer && isFocus && /* @__PURE__ */ jsx("foreignObject", {
63
+ name && TooltipRenderer && isFocus && /* @__PURE__ */ jsx("foreignObject", {
67
64
  x,
68
65
  y,
69
66
  children: /* @__PURE__ */ jsx("div", {
package/dist/esm/parts/Slice.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Slice.tsx"],
4
- "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 const arcFocusedRef = 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;\n\n const sliceData = useMemo(\n () =>\n arc()\n .innerRadius(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 ?? 0)\n .outerRadius(radius + 5)\n .startAngle(currentStartAngle)\n .endAngle(currentEndAngle),\n [currentEndAngle, currentStartAngle, innerRadius, radius],\n );\n\n // const sliceFocus = useMemo(\n // () =>\n // arc()\n // .innerRadius(innerRadius ?? 0)\n // .outerRadius(radius + 5)\n // .startAngle(currentStartAngle + 5)\n // .endAngle(currentEndAngle + 5),\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 const [isHover, setIsHover] = useState(false);\n useEffect(() => {\n if (arcRef.current) {\n select(arcRef.current).attr('d', sliceData);\n }\n // if (arcFocusedRef.current) {\n // select(arcFocusedRef.current).attr('d', sliceFocus);\n // }\n }, [sliceData, sliceOver]);\n\n const [referenceElement, setReferenceElement] = useState<HTMLSpanElement | null>();\n\n const handleMouseEnter = useCallback(() => {\n setActiveSerie(`${name}-${index}`);\n setIsHover(true);\n if (!isHalfPie) select(arcRef.current).transition().attr('d', sliceOver).duration(300);\n }, [index, isHalfPie, name, setActiveSerie, sliceOver]);\n\n const handleOnMouseLeave = useCallback(() => {\n setActiveSerie('');\n setIsHover(false);\n if (!isHalfPie) select(arcRef.current).transition().attr('d', sliceData).duration(300);\n }, [isHalfPie, setActiveSerie, sliceData]);\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 {/* <path\n ref={arcFocusedRef}\n fill=\"none\"\n stroke=\"#335cad\"\n stoke-width={2}\n style={{ visibility: isFocus && !isHover ? 'visible' : 'hidden' }}\n ></path> */}\n\n {name !== 'no-data' && 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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/esm/styles.js CHANGED
@@ -9,12 +9,13 @@ const StyledSVGWrapper = styled.div`
9
9
  }
10
10
  `;
11
11
  const StyledInnerText = styled.text`
12
- font-size: 14px;
12
+ font-size: 18px;
13
13
  font-weight: 600;
14
14
  `;
15
15
  const StyledTooltipContainer = styled.div`
16
16
  max-width: 350px;
17
17
  background-color: white;
18
+ pointer-events: none;
18
19
  `;
19
20
  const StyledMouseOverDetectionBox = styled.div`
20
21
  position: absolute;
@@ -23,6 +24,7 @@ const StyledMouseOverDetectionBox = styled.div`
23
24
  width: calc(100% + 30px);
24
25
  height: calc(100% + 30px);
25
26
  z-index: -1;
27
+ pointer-events: none;
26
28
  `;
27
29
  export {
28
30
  StyledInnerText,
package/dist/esm/styles.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
4
- "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 StyledInnerText = styled.text`\n font-size: 14px;\n font-weight: 600;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n max-width: 350px;\n background-color: white;\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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAmB;AAErB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAK/B,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAKtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
4
+ "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 StyledInnerText = styled.text`\n font-size: 18px;\n font-weight: 600;\n`;\n\nexport const StyledTooltipContainer = styled.div`\n max-width: 350px;\n background-color: white;\n pointer-events: none;\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 pointer-events: none;\n`;\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAmB;AAErB,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShC,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAK/B,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMtC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-dataviz-pie",
3
- "version": "3.10.3",
3
+ "version": "3.11.0-next.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - DataViz",
6
6
  "files": [
@@ -35,13 +35,13 @@
35
35
  "indent": 4
36
36
  },
37
37
  "dependencies": {
38
- "@elliemae/ds-grid": "3.10.3",
39
- "@elliemae/ds-icon": "3.10.3",
40
- "@elliemae/ds-icons": "3.10.3",
41
- "@elliemae/ds-popperjs": "3.10.3",
42
- "@elliemae/ds-system": "3.10.3",
43
- "@elliemae/ds-tooltip": "3.10.3",
44
- "@elliemae/ds-utilities": "3.10.3",
38
+ "@elliemae/ds-grid": "3.11.0-next.2",
39
+ "@elliemae/ds-icon": "3.11.0-next.2",
40
+ "@elliemae/ds-icons": "3.11.0-next.2",
41
+ "@elliemae/ds-popperjs": "3.11.0-next.2",
42
+ "@elliemae/ds-system": "3.11.0-next.2",
43
+ "@elliemae/ds-tooltip": "3.11.0-next.2",
44
+ "@elliemae/ds-utilities": "3.11.0-next.2",
45
45
  "d3": "~7.4.4"
46
46
  },
47
47
  "devDependencies": {
package/dist/cjs/parts/Point.js DELETED
@@ -1,81 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
- mod
23
- ));
24
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
25
- var Point_exports = {};
26
- __export(Point_exports, {
27
- Point: () => Point
28
- });
29
- module.exports = __toCommonJS(Point_exports);
30
- var React = __toESM(require("react"));
31
- var import_jsx_runtime = require("react/jsx-runtime");
32
- var import_react = require("react");
33
- var import_ds_tooltip = require("@elliemae/ds-tooltip");
34
- var import_styles = require("../styles");
35
- var import_PieContext = require("../PieContext");
36
- const Point = ({ x, y, id, label, opacity }) => {
37
- const {
38
- activePoint,
39
- props: { circleRadius, xAxis }
40
- } = (0, import_react.useContext)(import_PieContext.PieContext);
41
- const isFocused = activePoint === id;
42
- const focusableElement = (0, import_react.useRef)();
43
- const handleRef = (0, import_react.useCallback)(
44
- (newRef) => {
45
- if (focusableElement.current)
46
- focusableElement.current = newRef;
47
- if (isFocused)
48
- newRef?.focus();
49
- },
50
- [isFocused]
51
- );
52
- return (0, import_react.useMemo)(
53
- () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
54
- transform: `translate(${x},${y})`,
55
- children: [
56
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledPoint, {
57
- id: `${id}-mark`,
58
- isFocused,
59
- r: circleRadius,
60
- opacity
61
- }),
62
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("foreignObject", {
63
- width: circleRadius * 2,
64
- height: circleRadius * 2,
65
- style: { transform: `translate(-${circleRadius}px, -${circleRadius}px)` },
66
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, {
67
- withoutAnimation: true,
68
- text: label,
69
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyleFocusableRegion, {
70
- s: circleRadius,
71
- tabIndex: -1,
72
- ref: handleRef
73
- })
74
- })
75
- })
76
- ]
77
- }),
78
- [circleRadius, handleRef, id, isFocused, label, opacity, x, y]
79
- );
80
- };
81
- //# sourceMappingURL=Point.js.map
package/dist/cjs/parts/Point.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../src/parts/Point.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useContext, useMemo, useRef, useCallback } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { StyledPoint, StyleFocusableRegion } from '../styles';\nimport { PieContext } from '../PieContext';\n\nexport const Point = ({ x, y, id, label, opacity }) => {\n const {\n activePoint,\n\n props: { circleRadius, xAxis },\n } = useContext(PieContext);\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\n return useMemo(\n () => (\n <g transform={`translate(${x},${y})`}>\n <StyledPoint id={`${id}-mark`} isFocused={isFocused} r={circleRadius} opacity={opacity}></StyledPoint>\n <foreignObject\n width={circleRadius * 2}\n height={circleRadius * 2}\n style={{ transform: `translate(-${circleRadius}px, -${circleRadius}px)` }}\n >\n <DSTooltipV3 withoutAnimation text={label}>\n <StyleFocusableRegion\n s={circleRadius}\n // aria-label={`${xValue} ${d[yValue]}`}\n tabIndex={-1}\n ref={handleRef}\n ></StyleFocusableRegion>\n </DSTooltipV3>\n </foreignObject>\n </g>\n ),\n [circleRadius, handleRef, id, isFocused, label, opacity, x, y],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAgE;AAChE,wBAA4B;AAC5B,oBAAkD;AAClD,wBAA2B;AAEpB,MAAM,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI,OAAO,QAAQ,MAAM;AACrD,QAAM;AAAA,IACJ;AAAA,IAEA,OAAO,EAAE,cAAc,MAAM;AAAA,EAC/B,QAAI,yBAAW,4BAAU;AAEzB,QAAM,YAAY,gBAAgB;AAElC,QAAM,uBAAmB,qBAAuB;AAChD,QAAM,gBAAY;AAAA,IAChB,CAAC,WAA2B;AAC1B,UAAI,iBAAiB;AAAS,yBAAiB,UAAU;AACzD,UAAI;AAAW,gBAAQ,MAAM;AAAA,IAC/B;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,aAAO;AAAA,IACL,MACE,6CAAC;AAAA,MAAE,WAAW,aAAa,KAAK;AAAA,MAC9B;AAAA,oDAAC;AAAA,UAAY,IAAI,GAAG;AAAA,UAAW;AAAA,UAAsB,GAAG;AAAA,UAAc;AAAA,SAAkB;AAAA,QACxF,4CAAC;AAAA,UACC,OAAO,eAAe;AAAA,UACtB,QAAQ,eAAe;AAAA,UACvB,OAAO,EAAE,WAAW,cAAc,oBAAoB,kBAAkB;AAAA,UAExE,sDAAC;AAAA,YAAY,kBAAgB;AAAA,YAAC,MAAM;AAAA,YAClC,sDAAC;AAAA,cACC,GAAG;AAAA,cAEH,UAAU;AAAA,cACV,KAAK;AAAA,aACN;AAAA,WACH;AAAA,SACF;AAAA;AAAA,KACF;AAAA,IAEF,CAAC,cAAc,WAAW,IAAI,WAAW,OAAO,SAAS,GAAG,CAAC;AAAA,EAC/D;AACF;",
6
- "names": []
7
- }
package/dist/esm/parts/Point.js DELETED
@@ -1,55 +0,0 @@
1
- import * as React from "react";
2
- import { jsx, jsxs } from "react/jsx-runtime";
3
- import { useContext, useMemo, useRef, useCallback } from "react";
4
- import { DSTooltipV3 } from "@elliemae/ds-tooltip";
5
- import { StyledPoint, StyleFocusableRegion } from "../styles";
6
- import { PieContext } from "../PieContext";
7
- const Point = ({ x, y, id, label, opacity }) => {
8
- const {
9
- activePoint,
10
- props: { circleRadius, xAxis }
11
- } = useContext(PieContext);
12
- const isFocused = activePoint === id;
13
- const focusableElement = useRef();
14
- const handleRef = useCallback(
15
- (newRef) => {
16
- if (focusableElement.current)
17
- focusableElement.current = newRef;
18
- if (isFocused)
19
- newRef?.focus();
20
- },
21
- [isFocused]
22
- );
23
- return useMemo(
24
- () => /* @__PURE__ */ jsxs("g", {
25
- transform: `translate(${x},${y})`,
26
- children: [
27
- /* @__PURE__ */ jsx(StyledPoint, {
28
- id: `${id}-mark`,
29
- isFocused,
30
- r: circleRadius,
31
- opacity
32
- }),
33
- /* @__PURE__ */ jsx("foreignObject", {
34
- width: circleRadius * 2,
35
- height: circleRadius * 2,
36
- style: { transform: `translate(-${circleRadius}px, -${circleRadius}px)` },
37
- children: /* @__PURE__ */ jsx(DSTooltipV3, {
38
- withoutAnimation: true,
39
- text: label,
40
- children: /* @__PURE__ */ jsx(StyleFocusableRegion, {
41
- s: circleRadius,
42
- tabIndex: -1,
43
- ref: handleRef
44
- })
45
- })
46
- })
47
- ]
48
- }),
49
- [circleRadius, handleRef, id, isFocused, label, opacity, x, y]
50
- );
51
- };
52
- export {
53
- Point
54
- };
55
- //# sourceMappingURL=Point.js.map
package/dist/esm/parts/Point.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Point.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useRef, useCallback } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { StyledPoint, StyleFocusableRegion } from '../styles';\nimport { PieContext } from '../PieContext';\n\nexport const Point = ({ x, y, id, label, opacity }) => {\n const {\n activePoint,\n\n props: { circleRadius, xAxis },\n } = useContext(PieContext);\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\n return useMemo(\n () => (\n <g transform={`translate(${x},${y})`}>\n <StyledPoint id={`${id}-mark`} isFocused={isFocused} r={circleRadius} opacity={opacity}></StyledPoint>\n <foreignObject\n width={circleRadius * 2}\n height={circleRadius * 2}\n style={{ transform: `translate(-${circleRadius}px, -${circleRadius}px)` }}\n >\n <DSTooltipV3 withoutAnimation text={label}>\n <StyleFocusableRegion\n s={circleRadius}\n // aria-label={`${xValue} ${d[yValue]}`}\n tabIndex={-1}\n ref={handleRef}\n ></StyleFocusableRegion>\n </DSTooltipV3>\n </foreignObject>\n </g>\n ),\n [circleRadius, handleRef, id, isFocused, label, opacity, x, y],\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,SAAS,QAAQ,mBAAmB;AAChE,SAAS,mBAAmB;AAC5B,SAAS,aAAa,4BAA4B;AAClD,SAAS,kBAAkB;AAEpB,MAAM,QAAQ,CAAC,EAAE,GAAG,GAAG,IAAI,OAAO,QAAQ,MAAM;AACrD,QAAM;AAAA,IACJ;AAAA,IAEA,OAAO,EAAE,cAAc,MAAM;AAAA,EAC/B,IAAI,WAAW,UAAU;AAEzB,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;AAEA,SAAO;AAAA,IACL,MACE,qBAAC;AAAA,MAAE,WAAW,aAAa,KAAK;AAAA,MAC9B;AAAA,4BAAC;AAAA,UAAY,IAAI,GAAG;AAAA,UAAW;AAAA,UAAsB,GAAG;AAAA,UAAc;AAAA,SAAkB;AAAA,QACxF,oBAAC;AAAA,UACC,OAAO,eAAe;AAAA,UACtB,QAAQ,eAAe;AAAA,UACvB,OAAO,EAAE,WAAW,cAAc,oBAAoB,kBAAkB;AAAA,UAExE,8BAAC;AAAA,YAAY,kBAAgB;AAAA,YAAC,MAAM;AAAA,YAClC,8BAAC;AAAA,cACC,GAAG;AAAA,cAEH,UAAU;AAAA,cACV,KAAK;AAAA,aACN;AAAA,WACH;AAAA,SACF;AAAA;AAAA,KACF;AAAA,IAEF,CAAC,cAAc,WAAW,IAAI,WAAW,OAAO,SAAS,GAAG,CAAC;AAAA,EAC/D;AACF;",
6
- "names": []
7
- }