@elliemae/ds-dataviz-pie 3.16.0-next.11 → 3.16.0-next.12
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.
- package/dist/cjs/Pie.js +4 -0
- package/dist/cjs/Pie.js.map +1 -1
- package/dist/cjs/PieContext.js +14 -1
- package/dist/cjs/PieContext.js.map +1 -1
- package/dist/cjs/config/useKeyboardNavigation.js +4 -0
- package/dist/cjs/config/useKeyboardNavigation.js.map +1 -1
- package/dist/cjs/config/usePie.js +4 -0
- package/dist/cjs/config/usePie.js.map +1 -1
- package/dist/cjs/helpers/colorPallet.js +4 -0
- package/dist/cjs/helpers/colorPallet.js.map +1 -1
- package/dist/cjs/index.js +4 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/parts/ChartContainer.js +4 -0
- package/dist/cjs/parts/ChartContainer.js.map +1 -1
- package/dist/cjs/parts/ColorLegend.js +4 -0
- package/dist/cjs/parts/ColorLegend.js.map +1 -1
- package/dist/cjs/parts/Pie.js +4 -0
- package/dist/cjs/parts/Pie.js.map +1 -1
- package/dist/cjs/parts/Slice.js +4 -0
- package/dist/cjs/parts/Slice.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +4 -0
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/cjs/styles.js +4 -0
- package/dist/cjs/styles.js.map +1 -1
- package/dist/esm/PieContext.js +10 -1
- package/dist/esm/PieContext.js.map +1 -1
- package/dist/esm/config/useKeyboardNavigation.js.map +1 -1
- package/dist/esm/config/usePie.js.map +1 -1
- package/dist/esm/parts/Slice.js.map +1 -1
- package/dist/types/parts/ColorLegend.d.ts +1 -0
- package/dist/types/parts/Pie.d.ts +1 -0
- package/dist/types/parts/Slice.d.ts +1 -0
- package/dist/types/styles.d.ts +1 -0
- package/package.json +8 -8
package/dist/cjs/Pie.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
package/dist/cjs/Pie.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Pie.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { ChartContainer } from './parts/ChartContainer.js';\nimport { Pie } from './parts/Pie.js';\nimport { PieContext } from './PieContext.js';\nimport { usePie } from './config/usePie.js';\nimport type { DSPieT } from './react-desc-prop-types.js';\nimport { ColorLegend } from './parts/ColorLegend.js';\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"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/PieContext.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -29,6 +33,15 @@ __export(PieContext_exports, {
|
|
|
29
33
|
module.exports = __toCommonJS(PieContext_exports);
|
|
30
34
|
var React = __toESM(require("react"));
|
|
31
35
|
var import_react = require("react");
|
|
32
|
-
const pieChartdefaultContext = {
|
|
36
|
+
const pieChartdefaultContext = {
|
|
37
|
+
// props: defaultProps,
|
|
38
|
+
// innerHeight: 0,
|
|
39
|
+
// innerWidth: 0,
|
|
40
|
+
// activeSerie: '',
|
|
41
|
+
// setActiveSerie: () => {},
|
|
42
|
+
// containerRef: createRef<HTMLDivElement>(),
|
|
43
|
+
// groups: [],
|
|
44
|
+
// colorScale: scaleOrdinal(),
|
|
45
|
+
};
|
|
33
46
|
const PieContext = (0, import_react.createContext)(pieChartdefaultContext);
|
|
34
47
|
//# sourceMappingURL=PieContext.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/PieContext.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { createContext, createRef } from 'react';\nimport type { ScaleOrdinal } from 'd3';\nimport { scaleOrdinal } from 'd3';\nimport type { DSPieT } from './react-desc-prop-types.js';\n\ninterface PieChartContextT {\n props: Partial<DSPieT.Props>;\n innerHeight: number;\n innerWidth: number;\n activeSerie: string;\n setActiveSerie: React.Dispatch<React.SetStateAction<string>>;\n containerRef: React.RefObject<HTMLDivElement>;\n groups: string[];\n colorScale: ScaleOrdinal<string, unknown, never>;\n}\n\nconst pieChartdefaultContext: PieChartContextT = {\n // props: defaultProps,\n // innerHeight: 0,\n // innerWidth: 0,\n // activeSerie: '',\n // setActiveSerie: () => {},\n // containerRef: createRef<HTMLDivElement>(),\n // groups: [],\n // colorScale: scaleOrdinal(),\n};\n\nexport const PieContext = createContext(pieChartdefaultContext);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AAgBzC,MAAM,yBAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASjD;AAEO,MAAM,iBAAa,4BAAc,sBAAsB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useKeyboardNavigation.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport { PieContext } from '../PieContext.js';\n\nexport const findInCircularList = (\n list,\n from: number,\n //criteria: (item) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (list[i]) return i;\n }\n return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n const { activeSerie, setActiveSerie, containerRef, currentData } = useContext(PieContext);\n\n // const currentGroup = useMemo(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);\n\n const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {\n setActiveSerie(currentData[0].key);\n }, [currentData, setActiveSerie]);\n\n const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setTimeout(() => {\n if (\n !containerRef?.current?.contains(document.activeElement) ||\n containerRef?.current === document.activeElement\n ) {\n setActiveSerie('');\n }\n });\n }, [containerRef, setActiveSerie]);\n\n const navigateSerie = useCallback(\n (step: number) => {\n const newFocusedSliceIndex = findInCircularList(\n currentData,\n currentData.findIndex((serie) => serie.key === activeSerie),\n step,\n );\n setActiveSerie(currentData[newFocusedSliceIndex].key);\n },\n [activeSerie, currentData, setActiveSerie],\n );\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n if (e.code !== 'Tab') {\n e.preventDefault();\n }\n if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n navigateSerie(e.code === 'ArrowLeft' ? -1 : 1);\n }\n },\n [navigateSerie],\n );\n\n return { onInputKeyDown, handleOnBlur, handleOnFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIvB,mBAAwC;AACxC,wBAA2B;AAEpB,MAAM,qBAAqB,CAChC,MACA,MAEA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,KAAK,CAAC;AAAG,aAAO;AAAA,EACtB;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,aAAa,gBAAgB,cAAc,YAAY,QAAI,yBAAW,4BAAU;AAIxF,QAAM,oBAAyD,0BAAY,MAAM;AAC/E,mBAAe,YAAY,CAAC,EAAE,GAAG;AAAA,EACnC,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,mBAA0D,0BAAY,MAAM;AAChF,eAAW,MAAM;AACf,UACE,CAAC,cAAc,SAAS,SAAS,SAAS,aAAa,KACvD,cAAc,YAAY,SAAS,eACnC;AACA,uBAAe,EAAE;AAAA,MACnB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,cAAc,CAAC;AAEjC,QAAM,oBAAgB;AAAA,IACpB,CAAC,SAAiB;AAChB,YAAM,uBAAuB;AAAA,QAC3B;AAAA,QACA,YAAY,UAAU,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA,QAC1D;AAAA,MACF;AACA,qBAAe,YAAY,oBAAoB,EAAE,GAAG;AAAA,IACtD;AAAA,IACA,CAAC,aAAa,aAAa,cAAc;AAAA,EAC3C;AAEA,QAAM,qBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,OAAO;AACpB,UAAE,eAAe;AAAA,MACnB;AACA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,sBAAc,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,SAAO,EAAE,gBAAgB,cAAc,cAAc;AACvD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/usePie.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n//\nimport { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPieT } from '../react-desc-prop-types.js';\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": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0C;AAC1C,gBAAoB;AAKb,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,IAAI,GAAG,KAAK,KAAK;AAAA,EAC1C,GAAG,CAAC,CAAC;AACL,MAAI,MAAM;AACR,SAAK,OAAO,OAAO;AAAA,EACrB;AACA,QAAM,mBAAe,eAAI,EACtB,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,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
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/colorPallet.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export const COLOR_PALLET = {\n 'blue-100': '#1E79C2',\n 'blue-200': '#165A91',\n 'blue-400': '#10426A',\n 'magenta-100': '#CA3981',\n 'magenta-200': '#832553',\n 'magenta-400': '#6E1F46',\n 'orange-100': '#B25119',\n 'orange-200': '#853C12',\n 'orange-400': '#612C0D',\n 'purple-100': '#8E49B2',\n 'purple-200': '#61327A',\n 'purple-400': '#4D2861',\n 'green-100': '#007A78',\n 'green-200': '#005B59',\n 'green-400': '#004241',\n 'grey-100': '#697489',\n 'grey-200': '#4E5666',\n 'grey-400': '#323842',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAAA,EAC1B,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export { PieChart } from './Pie.js';\nexport { COLOR_PALLET } from './helpers/colorPallet.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,iBAAyB;AACzB,yBAA6B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/ChartContainer.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { StyledSVGWrapper } from '../styles.js';\nimport { useKeyboardNavigation } from '../config/useKeyboardNavigation.js';\nimport { PieContext } from '../PieContext.js';\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": "
|
|
5
|
+
"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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/ColorLegend.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext } from 'react';\nimport { PieContext } from '../PieContext.js';\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"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/parts/Pie.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Pie.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext } from 'react';\nimport { Slice } from './Slice.js';\nimport { PieContext } from '../PieContext.js';\nimport { StyledInnerText } from '../styles.js';\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"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/parts/Slice.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/Slice.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles.js';\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": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\n\ntype MarginT = {\n top: number;\n left: number;\n right: number;\n bottom: number;\n};\n\nexport declare namespace DSPieT {\n export interface SeriesT {\n name: string;\n data: number;\n color: string;\n }\n export interface Props {\n series: SeriesT[];\n height: number;\n width: number;\n margin: MarginT;\n }\n}\n\nexport const propTypes = {\n ...globalAttributesPropTypes,\n height: PropTypes.number.isRequired.description('height').defaultValue(''),\n width: PropTypes.number.isRequired.description('height').defaultValue(''),\n margin: PropTypes.shape({\n top: PropTypes.number,\n bottom: PropTypes.number,\n left: PropTypes.number,\n right: PropTypes.number,\n })\n .isRequired.description('margin')\n .defaultValue(''),\n series: PropTypes.arrayOf(PropTypes.object).description('yValue').defaultValue(''),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAqD;AAuB9C,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,kCAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACzE,OAAO,kCAAU,OAAO,WAAW,YAAY,QAAQ,EAAE,aAAa,EAAE;AAAA,EACxE,QAAQ,kCAAU,MAAM;AAAA,IACtB,KAAK,kCAAU;AAAA,IACf,QAAQ,kCAAU;AAAA,IAClB,MAAM,kCAAU;AAAA,IAChB,OAAO,kCAAU;AAAA,EACnB,CAAC,EACE,WAAW,YAAY,QAAQ,EAC/B,aAAa,EAAE;AAAA,EAClB,QAAQ,kCAAU,QAAQ,kCAAU,MAAM,EAAE,YAAY,QAAQ,EAAE,aAAa,EAAE;AACnF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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": "
|
|
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/PieContext.js
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { createContext } from "react";
|
|
3
|
-
const pieChartdefaultContext = {
|
|
3
|
+
const pieChartdefaultContext = {
|
|
4
|
+
// props: defaultProps,
|
|
5
|
+
// innerHeight: 0,
|
|
6
|
+
// innerWidth: 0,
|
|
7
|
+
// activeSerie: '',
|
|
8
|
+
// setActiveSerie: () => {},
|
|
9
|
+
// containerRef: createRef<HTMLDivElement>(),
|
|
10
|
+
// groups: [],
|
|
11
|
+
// colorScale: scaleOrdinal(),
|
|
12
|
+
};
|
|
4
13
|
const PieContext = createContext(pieChartdefaultContext);
|
|
5
14
|
export {
|
|
6
15
|
PieContext
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PieContext.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport type { ScaleOrdinal } from 'd3';\nimport { scaleOrdinal } from 'd3';\nimport type { DSPieT } from './react-desc-prop-types.js';\n\ninterface PieChartContextT {\n props: Partial<DSPieT.Props>;\n innerHeight: number;\n innerWidth: number;\n activeSerie: string;\n setActiveSerie: React.Dispatch<React.SetStateAction<string>>;\n containerRef: React.RefObject<HTMLDivElement>;\n groups: string[];\n colorScale: ScaleOrdinal<string, unknown, never>;\n}\n\nconst pieChartdefaultContext: PieChartContextT = {\n // props: defaultProps,\n // innerHeight: 0,\n // innerWidth: 0,\n // activeSerie: '',\n // setActiveSerie: () => {},\n // containerRef: createRef<HTMLDivElement>(),\n // groups: [],\n // colorScale: scaleOrdinal(),\n};\n\nexport const PieContext = createContext(pieChartdefaultContext);\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAgC;AAgBzC,MAAM,yBAA2C
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAgC;AAgBzC,MAAM,yBAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASjD;AAEO,MAAM,aAAa,cAAc,sBAAsB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useKeyboardNavigation.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable max-depth */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport { useCallback, useContext } from 'react';\nimport { PieContext } from '../PieContext.js';\n\nexport const findInCircularList = (\n list,\n from: number,\n //criteria: (item) => boolean,\n step = 1,\n // eslint-disable-next-line max-params\n): number => {\n for (\n let i = (from + step + list.length) % list.length;\n i !== from && from > -1;\n i = (i + step + list.length) % list.length\n ) {\n if (list[i]) return i;\n }\n return from; // return same item\n};\n\nexport const useKeyboardNavigation = () => {\n const { activeSerie, setActiveSerie, containerRef, currentData } = useContext(PieContext);\n\n // const currentGroup = useMemo(() => data.find((d) => d.name === currentFocusedDataset), [currentFocusedDataset, data]);\n\n const handleOnFocus: React.FocusEventHandler<HTMLDivElement> = useCallback(() => {\n setActiveSerie(currentData[0].key);\n }, [currentData, setActiveSerie]);\n\n const handleOnBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(() => {\n setTimeout(() => {\n if (\n !containerRef?.current?.contains(document.activeElement) ||\n containerRef?.current === document.activeElement\n ) {\n setActiveSerie('');\n }\n });\n }, [containerRef, setActiveSerie]);\n\n const navigateSerie = useCallback(\n (step: number) => {\n const newFocusedSliceIndex = findInCircularList(\n currentData,\n currentData.findIndex((serie) => serie.key === activeSerie),\n step,\n );\n setActiveSerie(currentData[newFocusedSliceIndex].key);\n },\n [activeSerie, currentData, setActiveSerie],\n );\n\n const onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n if (e.code !== 'Tab') {\n e.preventDefault();\n }\n if (['ArrowLeft', 'ArrowRight'].includes(e.code)) {\n navigateSerie(e.code === 'ArrowLeft' ? -1 : 1);\n }\n },\n [navigateSerie],\n );\n\n return { onInputKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,kBAAkB;AAEpB,MAAM,qBAAqB,CAChC,MACA,MAEA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,KAAK;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIvB,SAAS,aAAa,kBAAkB;AACxC,SAAS,kBAAkB;AAEpB,MAAM,qBAAqB,CAChC,MACA,MAEA,OAAO,MAEI;AACX,WACM,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAC3C,MAAM,QAAQ,OAAO,IACrB,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QACpC;AACA,QAAI,KAAK,CAAC;AAAG,aAAO;AAAA,EACtB;AACA,SAAO;AACT;AAEO,MAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,aAAa,gBAAgB,cAAc,YAAY,IAAI,WAAW,UAAU;AAIxF,QAAM,gBAAyD,YAAY,MAAM;AAC/E,mBAAe,YAAY,CAAC,EAAE,GAAG;AAAA,EACnC,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,eAA0D,YAAY,MAAM;AAChF,eAAW,MAAM;AACf,UACE,CAAC,cAAc,SAAS,SAAS,SAAS,aAAa,KACvD,cAAc,YAAY,SAAS,eACnC;AACA,uBAAe,EAAE;AAAA,MACnB;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,cAAc,cAAc,CAAC;AAEjC,QAAM,gBAAgB;AAAA,IACpB,CAAC,SAAiB;AAChB,YAAM,uBAAuB;AAAA,QAC3B;AAAA,QACA,YAAY,UAAU,CAAC,UAAU,MAAM,QAAQ,WAAW;AAAA,QAC1D;AAAA,MACF;AACA,qBAAe,YAAY,oBAAoB,EAAE,GAAG;AAAA,IACtD;AAAA,IACA,CAAC,aAAa,aAAa,cAAc;AAAA,EAC3C;AAEA,QAAM,iBAA+D;AAAA,IACnE,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,OAAO;AACpB,UAAE,eAAe;AAAA,MACnB;AACA,UAAI,CAAC,aAAa,YAAY,EAAE,SAAS,EAAE,IAAI,GAAG;AAChD,sBAAc,EAAE,SAAS,cAAc,KAAK,CAAC;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,SAAO,EAAE,gBAAgB,cAAc,cAAc;AACvD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/usePie.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState, useRef } from 'react';\nimport { pie } from 'd3';\n//\nimport { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSPieT } from '../react-desc-prop-types.js';\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;AAKb,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,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,UAAU,cAAc;AAC1C,SAAS,WAAW;AAKb,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,IAAI,GAAG,KAAK,KAAK;AAAA,EAC1C,GAAG,CAAC,CAAC;AACL,MAAI,MAAM;AACR,SAAK,OAAO,OAAO;AAAA,EACrB;AACA,QAAM,eAAe,IAAI,EACtB,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,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
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Slice.tsx"],
|
|
4
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.js';\nimport { COLOR_PALLET } from '../helpers/colorPallet.js';\nimport { StyledTooltipContainer, StyledMouseOverDetectionBox } from '../styles.js';\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": "AAAA,YAAY,WAAW;ACsEjB,cAKM,YALN;AApEN,SAAgB,UAAU,WAAW,aAAa,SAAS,QAAQ,kBAAkB;AACrF,SAAS,KAAK,cAAc;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB,mCAAmC;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,IAAI,WAAW,UAAU;AAEzB,QAAM,SAAS,OAAO,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,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/styles.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export declare const StyledSVGWrapper: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
|
|
2
3
|
export declare const StyledInnerText: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
|
|
3
4
|
export declare const StyledTooltipContainer: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dataviz-pie",
|
|
3
|
-
"version": "3.16.0-next.
|
|
3
|
+
"version": "3.16.0-next.12",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - DataViz",
|
|
6
6
|
"files": [
|
|
@@ -35,17 +35,17 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"d3": "~7.
|
|
39
|
-
"d3-shape": "^3.
|
|
40
|
-
"@elliemae/ds-popperjs": "3.16.0-next.
|
|
41
|
-
"@elliemae/ds-props-helpers": "3.16.0-next.
|
|
42
|
-
"@elliemae/ds-system": "3.16.0-next.
|
|
43
|
-
"@elliemae/ds-utilities": "3.16.0-next.
|
|
38
|
+
"d3": "~7.8.2",
|
|
39
|
+
"d3-shape": "^3.2.0",
|
|
40
|
+
"@elliemae/ds-popperjs": "3.16.0-next.12",
|
|
41
|
+
"@elliemae/ds-props-helpers": "3.16.0-next.12",
|
|
42
|
+
"@elliemae/ds-system": "3.16.0-next.12",
|
|
43
|
+
"@elliemae/ds-utilities": "3.16.0-next.12"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@elliemae/pui-theme": "~2.6.0",
|
|
47
47
|
"@types/d3": "~7.4.0",
|
|
48
|
-
"styled-components": "~5.3.
|
|
48
|
+
"styled-components": "~5.3.9"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"@elliemae/pui-theme": "~2.6.0",
|