@servicetitan/marketing-ui 5.9.0 → 5.11.0

package/dist/components/charts/pie-chart/components/pie-chart.js

@@ -5,12 +5,66 @@ import { BodyText, Stack, StatusLight } from '@servicetitan/design-system';
 import { convertSessionsToPieces, radiusRelativeDefault } from '../utils/const';
 import { Pie } from './pie';
 import * as Styles from './pie-chart.module.less';
-const PieTitles = ({ title, pieces }) => {
-    return (_jsx("div", { className: classNames(Styles.titleWrapper, 'of-y-auto p-t-2'), children: _jsxs("div", { children: [!!pieces.length && (_jsx(Stack.Item, { className: "p-l-1 p-b-1", children: _jsx(BodyText, { bold: true, children: title }) })), pieces.map(piece => (_jsxs(Stack, { alignItems: "center", children: [_jsx(StatusLight, { color: piece.color }), _jsx(BodyText, { className: "c-neutral-90", size: "medium", children: piece.title })] }, piece.title)))] }) }));
+const PieTitles = ({ title, pieces })=>{
+    return /*#__PURE__*/ _jsx("div", {
+        className: classNames(Styles.titleWrapper, 'of-y-auto p-t-2'),
+        children: /*#__PURE__*/ _jsxs("div", {
+            children: [
+                !!pieces.length && /*#__PURE__*/ _jsx(Stack.Item, {
+                    className: "p-l-1 p-b-1",
+                    children: /*#__PURE__*/ _jsx(BodyText, {
+                        bold: true,
+                        children: title
+                    })
+                }),
+                pieces.map((piece)=>/*#__PURE__*/ _jsxs(Stack, {
+                        alignItems: "center",
+                        children: [
+                            /*#__PURE__*/ _jsx(StatusLight, {
+                                color: piece.color
+                            }),
+                            /*#__PURE__*/ _jsx(BodyText, {
+                                className: "c-neutral-90",
+                                size: "medium",
+                                children: piece.title
+                            })
+                        ]
+                    }, piece.title))
+            ]
+        })
+    });
 };
-export const PieChart = ({ height, width, title, sections, popoverContent, content, radiusRelative = radiusRelativeDefault, popoverDirection = 'rb', hideTitles = false, }) => {
-    const pieces = useMemo(() => convertSessionsToPieces(sections, radiusRelative), [sections, radiusRelative]);
-    const style = useMemo(() => ({ height, width }), [height, width]);
-    return (_jsxs("div", { className: "d-f flex-row", style: style, children: [_jsx(Pie, { title: title, pieces: pieces, content: content, popoverContent: popoverContent, popoverDirection: popoverDirection, radiusRelative: radiusRelative, hideTitles: hideTitles }), !hideTitles && _jsx(PieTitles, { title: title, pieces: pieces })] }));
+export const PieChart = ({ height, width, title, sections, popoverContent, content, radiusRelative = radiusRelativeDefault, popoverDirection = 'rb', hideTitles = false })=>{
+    const pieces = useMemo(()=>convertSessionsToPieces(sections, radiusRelative), [
+        sections,
+        radiusRelative
+    ]);
+    const style = useMemo(()=>({
+            height,
+            width
+        }), [
+        height,
+        width
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "d-f flex-row",
+        style: style,
+        children: [
+            /*#__PURE__*/ _jsx(Pie, {
+                title: title,
+                pieces: pieces,
+                content: content,
+                popoverContent: popoverContent,
+                popoverDirection: popoverDirection,
+                radiusRelative: radiusRelative,
+                hideTitles: hideTitles
+            }),
+            !hideTitles && /*#__PURE__*/ _jsx(PieTitles, {
+                title: title,
+                pieces: pieces
+            })
+        ]
+    });
 };
+
 //# sourceMappingURL=pie-chart.js.map

package/dist/components/charts/pie-chart/components/pie-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAM,MAAM,OAAO,CAAC;AACpC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE3E,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;AAElD,MAAM,SAAS,GAA8C,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IAC/E,OAAO,CACH,cAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAAC,YAC9D,0BACK,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAChB,KAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAC,aAAa,YAC/B,KAAC,QAAQ,IAAC,IAAI,kBAAE,KAAK,GAAY,GACxB,CAChB,EACA,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACjB,MAAC,KAAK,IAAmB,UAAU,EAAC,QAAQ,aACxC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,EACnC,KAAC,QAAQ,IAAC,SAAS,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,YAC3C,KAAK,CAAC,KAAK,GACL,KAJH,KAAK,CAAC,KAAK,CAKf,CACX,CAAC,IACA,GACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EACxC,MAAM,EACN,KAAK,EACL,KAAK,EACL,QAAQ,EACR,cAAc,EACd,OAAO,EACP,cAAc,GAAG,qBAAqB,EACtC,gBAAgB,GAAG,IAAI,EACvB,UAAU,GAAG,KAAK,GACrB,EAAE,EAAE;IACD,MAAM,MAAM,GAAG,OAAO,CAClB,GAAG,EAAE,CAAC,uBAAuB,CAAC,QAAQ,EAAE,cAAc,CAAC,EACvD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC7B,CAAC;IACF,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAElE,OAAO,CACH,eAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK,aACtC,KAAC,GAAG,IACA,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,GACxB,EACD,CAAC,UAAU,IAAI,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,IACzD,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"sourcesContent":["import { useMemo, FC } from 'react';\nimport classNames from 'classnames';\nimport { BodyText, Stack, StatusLight } from '@servicetitan/design-system';\nimport { PieChartProps, PiePiece } from '../utils/interface';\nimport { convertSessionsToPieces, radiusRelativeDefault } from '../utils/const';\nimport { Pie } from './pie';\nimport * as Styles from './pie-chart.module.less';\n\nconst PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces }) => {\n    return (\n        <div className={classNames(Styles.titleWrapper, 'of-y-auto p-t-2')}>\n            <div>\n                {!!pieces.length && (\n                    <Stack.Item className=\"p-l-1 p-b-1\">\n                        <BodyText bold>{title}</BodyText>\n                    </Stack.Item>\n                )}\n                {pieces.map(piece => (\n                    <Stack key={piece.title} alignItems=\"center\">\n                        <StatusLight color={piece.color} />\n                        <BodyText className=\"c-neutral-90\" size=\"medium\">\n                            {piece.title}\n                        </BodyText>\n                    </Stack>\n                ))}\n            </div>\n        </div>\n    );\n};\n\nexport const PieChart: FC<PieChartProps> = ({\n    height,\n    width,\n    title,\n    sections,\n    popoverContent,\n    content,\n    radiusRelative = radiusRelativeDefault,\n    popoverDirection = 'rb',\n    hideTitles = false,\n}) => {\n    const pieces = useMemo(\n        () => convertSessionsToPieces(sections, radiusRelative),\n        [sections, radiusRelative]\n    );\n    const style = useMemo(() => ({ height, width }), [height, width]);\n\n    return (\n        <div className=\"d-f flex-row\" style={style}>\n            <Pie\n                title={title}\n                pieces={pieces}\n                content={content}\n                popoverContent={popoverContent}\n                popoverDirection={popoverDirection}\n                radiusRelative={radiusRelative}\n                hideTitles={hideTitles}\n            />\n            {!hideTitles && <PieTitles title={title} pieces={pieces} />}\n        </div>\n    );\n};\n"],"names":["useMemo","classNames","BodyText","Stack","StatusLight","convertSessionsToPieces","radiusRelativeDefault","Pie","Styles","PieTitles","title","pieces","div","className","titleWrapper","length","Item","bold","map","piece","alignItems","color","size","PieChart","height","width","sections","popoverContent","content","radiusRelative","popoverDirection","hideTitles","style"],"mappings":";AAAA,SAASA,OAAO,QAAY,QAAQ;AACpC,OAAOC,gBAAgB,aAAa;AACpC,SAASC,QAAQ,EAAEC,KAAK,EAAEC,WAAW,QAAQ,8BAA8B;AAE3E,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,iBAAiB;AAChF,SAASC,GAAG,QAAQ,QAAQ;AAC5B,YAAYC,YAAY,0BAA0B;AAElD,MAAMC,YAAuD,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAE;IAC3E,qBACI,KAACC;QAAIC,WAAWZ,WAAWO,OAAOM,YAAY,EAAE;kBAC5C,cAAA,MAACF;;gBACI,CAAC,CAACD,OAAOI,MAAM,kBACZ,KAACZ,MAAMa,IAAI;oBAACH,WAAU;8BAClB,cAAA,KAACX;wBAASe,IAAI;kCAAEP;;;gBAGvBC,OAAOO,GAAG,CAACC,CAAAA,sBACR,MAAChB;wBAAwBiB,YAAW;;0CAChC,KAAChB;gCAAYiB,OAAOF,MAAME,KAAK;;0CAC/B,KAACnB;gCAASW,WAAU;gCAAeS,MAAK;0CACnCH,MAAMT,KAAK;;;uBAHRS,MAAMT,KAAK;;;;AAU3C;AAEA,OAAO,MAAMa,WAA8B,CAAC,EACxCC,MAAM,EACNC,KAAK,EACLf,KAAK,EACLgB,QAAQ,EACRC,cAAc,EACdC,OAAO,EACPC,iBAAiBvB,qBAAqB,EACtCwB,mBAAmB,IAAI,EACvBC,aAAa,KAAK,EACrB;IACG,MAAMpB,SAASX,QACX,IAAMK,wBAAwBqB,UAAUG,iBACxC;QAACH;QAAUG;KAAe;IAE9B,MAAMG,QAAQhC,QAAQ,IAAO,CAAA;YAAEwB;YAAQC;QAAM,CAAA,GAAI;QAACD;QAAQC;KAAM;IAEhE,qBACI,MAACb;QAAIC,WAAU;QAAemB,OAAOA;;0BACjC,KAACzB;gBACGG,OAAOA;gBACPC,QAAQA;gBACRiB,SAASA;gBACTD,gBAAgBA;gBAChBG,kBAAkBA;gBAClBD,gBAAgBA;gBAChBE,YAAYA;;YAEf,CAACA,4BAAc,KAACtB;gBAAUC,OAAOA;gBAAOC,QAAQA;;;;AAG7D,EAAE"}

package/dist/components/charts/pie-chart/components/pie-chart.module.less.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const titleWrapper: string;
+

package/dist/components/charts/pie-chart/components/pie.js

@@ -4,52 +4,189 @@ import { tokens } from '@servicetitan/tokens/core';
 import { BodyText, Popover, Stack, StatusLight } from '@servicetitan/design-system';
 import { useClientRect } from '../../../../utils/use-client-rect';
 const chartPadding = 8;
-const px = (value) => `${value !== null && value !== void 0 ? value : 0}px`;
-const PiePieceSvg = ({ piece: { id, color, opacity, points, text, path }, selected }) => points && path ? (_jsxs("g", { id: id, children: [!!selected && (_jsx("path", { d: path, fill: tokens.colorWhite, stroke: tokens.colorBlue200, strokeOpacity: "50%", strokeWidth: "3", paintOrder: "stroke" })), _jsx("path", { d: path, fill: color }), _jsx("svg", { x: points[4][0] - 10, y: points[4][1] - (points[4][1] > 0 ? 3 : 1), width: 20, height: 6, children: _jsx("text", { x: "50%", y: "50%", fontSize: 4, fontWeight: 600, fill: opacity > 0.3 ? tokens.colorWhite : tokens.colorBlack, dominantBaseline: "middle", textAnchor: "middle", children: text }) })] })) : null;
-const PiePieceHover = ({ piece, onMouse }) => {
-    const onMouseEnter = useCallback(() => onMouse(piece.id, true), [onMouse, piece.id]);
-    const onMouseLeave = useCallback(() => onMouse(piece.id, false), [onMouse, piece.id]);
-    return (_jsx("path", { d: piece.path, fill: "white", opacity: "0", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }));
+const px = (value)=>`${value !== null && value !== void 0 ? value : 0}px`;
+const PiePieceSvg = ({ piece: { id, color, opacity, points, text, path }, selected })=>points && path ? /*#__PURE__*/ _jsxs("g", {
+        id: id,
+        children: [
+            !!selected && /*#__PURE__*/ _jsx("path", {
+                d: path,
+                fill: tokens.colorWhite,
+                stroke: tokens.colorBlue200,
+                strokeOpacity: "50%",
+                strokeWidth: "3",
+                paintOrder: "stroke"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: path,
+                fill: color
+            }),
+            /*#__PURE__*/ _jsx("svg", {
+                x: points[4][0] - 10,
+                y: points[4][1] - (points[4][1] > 0 ? 3 : 1),
+                width: 20,
+                height: 6,
+                children: /*#__PURE__*/ _jsx("text", {
+                    x: "50%",
+                    y: "50%",
+                    fontSize: 4,
+                    fontWeight: 600,
+                    fill: opacity > 0.3 ? tokens.colorWhite : tokens.colorBlack,
+                    dominantBaseline: "middle",
+                    textAnchor: "middle",
+                    children: text
+                })
+            })
+        ]
+    }) : null;
+const PiePieceHover = ({ piece, onMouse })=>{
+    const onMouseEnter = useCallback(()=>onMouse(piece.id, true), [
+        onMouse,
+        piece.id
+    ]);
+    const onMouseLeave = useCallback(()=>onMouse(piece.id, false), [
+        onMouse,
+        piece.id
+    ]);
+    return /*#__PURE__*/ _jsx("path", {
+        d: piece.path,
+        fill: "white",
+        opacity: "0",
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+    });
 };
-const PieSvg = ({ pieces, selectedIndex, radiusRelative }) => (_jsxs("svg", { className: "position-absolute", style: { inset: px(chartPadding) }, viewBox: `-${radiusRelative} -${radiusRelative} ` + `${radiusRelative * 2} ${radiusRelative * 2}`, children: [pieces.map((p, index) => p.path ? _jsx(PiePieceSvg, { piece: p, selected: index === selectedIndex }, p.id) : null), selectedIndex >= 0 && selectedIndex < pieces.length && (_jsx("use", { xlinkHref: pieces[selectedIndex].id }))] }));
-const PieSvgHover = ({ pieces, onMouse, radiusRelative }) => (_jsx("svg", { className: "position-absolute z-global-nav", style: { inset: px(chartPadding) }, viewBox: `-${radiusRelative} -${radiusRelative} ` + `${radiusRelative * 2} ${radiusRelative * 2}`, children: pieces.map(p => p.path ? _jsx(PiePieceHover, { piece: p, onMouse: onMouse }, p.id) : null) }));
-export const Pie = ({ pieces, popoverContent: PopoverContent, content: PieContent, radiusRelative, hideTitles, popoverDirection, }) => {
+const PieSvg = ({ pieces, selectedIndex, radiusRelative })=>/*#__PURE__*/ _jsxs("svg", {
+        className: "position-absolute",
+        style: {
+            inset: px(chartPadding)
+        },
+        viewBox: `-${radiusRelative} -${radiusRelative} ` + `${radiusRelative * 2} ${radiusRelative * 2}`,
+        children: [
+            pieces.map((p, index)=>p.path ? /*#__PURE__*/ _jsx(PiePieceSvg, {
+                    piece: p,
+                    selected: index === selectedIndex
+                }, p.id) : null),
+            selectedIndex >= 0 && selectedIndex < pieces.length && /*#__PURE__*/ _jsx("use", {
+                xlinkHref: pieces[selectedIndex].id
+            })
+        ]
+    });
+const PieSvgHover = ({ pieces, onMouse, radiusRelative })=>/*#__PURE__*/ _jsx("svg", {
+        className: "position-absolute z-global-nav",
+        style: {
+            inset: px(chartPadding)
+        },
+        viewBox: `-${radiusRelative} -${radiusRelative} ` + `${radiusRelative * 2} ${radiusRelative * 2}`,
+        children: pieces.map((p)=>p.path ? /*#__PURE__*/ _jsx(PiePieceHover, {
+                piece: p,
+                onMouse: onMouse
+            }, p.id) : null)
+    });
+export const Pie = ({ pieces, popoverContent: PopoverContent, content: PieContent, radiusRelative, hideTitles, popoverDirection })=>{
     const [selectedIndex, setSelectedIndex] = useState(-1);
     const [rect, ref] = useClientRect();
-    const onMouse = useCallback((id, isEnter) => {
-        setSelectedIndex(isEnter ? pieces.findIndex(p => p.id === id) : -1);
-    }, [pieces, setSelectedIndex]);
-    const container = useMemo(() => {
-        var _a;
-        const height = (_a = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _a !== void 0 ? _a : 0;
+    const onMouse = useCallback((id, isEnter)=>{
+        setSelectedIndex(isEnter ? pieces.findIndex((p)=>p.id === id) : -1);
+    }, [
+        pieces,
+        setSelectedIndex
+    ]);
+    const container = useMemo(()=>{
+        var _rect_height;
+        const height = (_rect_height = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _rect_height !== void 0 ? _rect_height : 0;
         return {
             height,
             internal: height ? height - chartPadding * 2 : 0,
-            styles: height
-                ? {
-                    width: px(Math.max(250, height)),
-                    overflow: 'hidden',
-                }
-                : {},
+            styles: height ? {
+                width: px(Math.max(250, height)),
+                overflow: 'hidden'
+            } : {}
         };
-    }, [rect]);
-    const triggersStyles = useMemo(() => container.height
-        ? pieces.map(p => p.points
-            ? {
+    }, [
+        rect
+    ]);
+    const triggersStyles = useMemo(()=>container.height ? pieces.map((p)=>p.points ? {
                 key: p.key,
-                top: px((container.height * (radiusRelative + p.points[4][1])) /
-                    (radiusRelative * 2)),
-                left: px((container.height * (radiusRelative + p.points[4][0])) /
-                    (radiusRelative * 2) +
-                    20),
-            }
-            : { top: '', left: '' })
-        : [], [pieces, container, radiusRelative]);
-    return (_jsx("div", { ref: ref, style: container.styles, className: "position-relative", children: pieces.every(p => !p.path) ? (_jsx(Stack, { className: "h-100", justifyContent: "center", alignItems: "center", children: "No Data" })) : (_jsxs(Fragment, { children: [triggersStyles
-                    .filter(ts => !!ts.left && !!ts.top)
-                    .map((ts, ind) => {
-                    var _a, _b, _c;
-                    return (_jsx("div", { style: ts, className: "position-absolute", children: (!!PopoverContent || !hideTitles) && (_jsx(Popover, { portal: true, trigger: _jsx("span", { children: " " }), open: selectedIndex === ind, direction: popoverDirection, padding: "s", width: "auto", children: selectedIndex === ind && (_jsxs(Stack, { direction: "column", "data-cy": `customer-lead-rate-section-${ts.key}-popover`, children: [!hideTitles && (_jsxs(Stack, { alignItems: "center", children: [_jsx(StatusLight, { color: pieces[ind].color }), _jsx(BodyText, { size: "small", bold: true, children: pieces[ind].title })] })), !!PopoverContent && (_jsx(Stack.Item, { className: "m-l-1", children: _jsx(PopoverContent, { index: ind, data: (_a = pieces[ind]) === null || _a === void 0 ? void 0 : _a.data, text: (_b = pieces[ind]) === null || _b === void 0 ? void 0 : _b.text, value: (_c = pieces[ind]) === null || _c === void 0 ? void 0 : _c.value }) }))] })) })) }, ts.left + ts.top));
-                }), !!PieContent && _jsx(PieContent, {}), _jsx(PieSvg, { pieces: pieces, selectedIndex: selectedIndex, radiusRelative: radiusRelative }), _jsx(PieSvgHover, { pieces: pieces, onMouse: onMouse, radiusRelative: radiusRelative })] })) }));
+                top: px(container.height * (radiusRelative + p.points[4][1]) / (radiusRelative * 2)),
+                left: px(container.height * (radiusRelative + p.points[4][0]) / (radiusRelative * 2) + 20)
+            } : {
+                top: '',
+                left: ''
+            }) : [], [
+        pieces,
+        container,
+        radiusRelative
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        ref: ref,
+        style: container.styles,
+        className: "position-relative",
+        children: pieces.every((p)=>!p.path) ? /*#__PURE__*/ _jsx(Stack, {
+            className: "h-100",
+            justifyContent: "center",
+            alignItems: "center",
+            children: "No Data"
+        }) : /*#__PURE__*/ _jsxs(Fragment, {
+            children: [
+                triggersStyles.filter((ts)=>!!ts.left && !!ts.top).map((ts, ind)=>{
+                    var _pieces_ind, _pieces_ind1, _pieces_ind2;
+                    return /*#__PURE__*/ _jsx("div", {
+                        style: ts,
+                        className: "position-absolute",
+                        children: (!!PopoverContent || !hideTitles) && /*#__PURE__*/ _jsx(Popover, {
+                            portal: true,
+                            trigger: /*#__PURE__*/ _jsx("span", {
+                                children: " "
+                            }),
+                            open: selectedIndex === ind,
+                            direction: popoverDirection,
+                            padding: "s",
+                            width: "auto",
+                            children: selectedIndex === ind && /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "column",
+                                "data-cy": `customer-lead-rate-section-${ts.key}-popover`,
+                                children: [
+                                    !hideTitles && /*#__PURE__*/ _jsxs(Stack, {
+                                        alignItems: "center",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(StatusLight, {
+                                                color: pieces[ind].color
+                                            }),
+                                            /*#__PURE__*/ _jsx(BodyText, {
+                                                size: "small",
+                                                bold: true,
+                                                children: pieces[ind].title
+                                            })
+                                        ]
+                                    }),
+                                    !!PopoverContent && /*#__PURE__*/ _jsx(Stack.Item, {
+                                        className: "m-l-1",
+                                        children: /*#__PURE__*/ _jsx(PopoverContent, {
+                                            index: ind,
+                                            data: (_pieces_ind = pieces[ind]) === null || _pieces_ind === void 0 ? void 0 : _pieces_ind.data,
+                                            text: (_pieces_ind1 = pieces[ind]) === null || _pieces_ind1 === void 0 ? void 0 : _pieces_ind1.text,
+                                            value: (_pieces_ind2 = pieces[ind]) === null || _pieces_ind2 === void 0 ? void 0 : _pieces_ind2.value
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    }, ts.left + ts.top);
+                }),
+                !!PieContent && /*#__PURE__*/ _jsx(PieContent, {}),
+                /*#__PURE__*/ _jsx(PieSvg, {
+                    pieces: pieces,
+                    selectedIndex: selectedIndex,
+                    radiusRelative: radiusRelative
+                }),
+                /*#__PURE__*/ _jsx(PieSvgHover, {
+                    pieces: pieces,
+                    onMouse: onMouse,
+                    radiusRelative: radiusRelative
+                })
+            ]
+        })
+    });
 };
+
 //# sourceMappingURL=pie.js.map

package/dist/components/charts/pie-chart/components/pie.js.map

@@ -1 +1 @@
-{"version":3,"file":"pie.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAEpF,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGlE,MAAM,YAAY,GAAG,CAAC,CAAC;AACvB,MAAM,EAAE,GAAG,CAAC,KAAc,EAAE,EAAE,CAAC,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,IAAI,CAAC;AAEjD,MAAM,WAAW,GAGZ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,CACrE,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,CACb,aAAG,EAAE,EAAE,EAAE,aACJ,CAAC,CAAC,QAAQ,IAAI,CACX,eACI,CAAC,EAAE,IAAI,EACP,IAAI,EAAE,MAAM,CAAC,UAAU,EACvB,MAAM,EAAE,MAAM,CAAC,YAAY,EAC3B,aAAa,EAAC,KAAK,EACnB,WAAW,EAAC,GAAG,EACf,UAAU,EAAC,QAAQ,GACrB,CACL,EACD,eAAM,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,GAAI,EAE9B,cACI,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EACpB,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC5C,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,CAAC,YAET,eACI,CAAC,EAAC,KAAK,EACP,CAAC,EAAC,KAAK,EACP,QAAQ,EAAE,CAAC,EACX,UAAU,EAAE,GAAG,EACf,IAAI,EAAE,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAC3D,gBAAgB,EAAC,QAAQ,EACzB,UAAU,EAAC,QAAQ,YAElB,IAAI,GACF,GACL,IACN,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AAEb,MAAM,aAAa,GAGd,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IACxB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IACrF,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAEtF,OAAO,CACH,eACI,CAAC,EAAE,KAAK,CAAC,IAAI,EACb,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,GAAG,EACX,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,GAC5B,CACL,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,MAAM,GAIP,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAChD,eACI,SAAS,EAAC,mBAAmB,EAC7B,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,EAClC,OAAO,EACH,IAAI,cAAc,KAAK,cAAc,GAAG,GAAG,GAAG,cAAc,GAAG,CAAC,IAAI,cAAc,GAAG,CAAC,EAAE,aAG3F,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CACrB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,CAAC,EAAa,QAAQ,EAAE,KAAK,KAAK,aAAa,IAAvC,CAAC,CAAC,EAAE,CAAuC,CAAC,CAAC,CAAC,IAAI,CAC1F,EAEA,aAAa,IAAI,CAAC,IAAI,aAAa,GAAG,MAAM,CAAC,MAAM,IAAI,CACpD,cAAK,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,GAAI,CAC/C,IACC,CACT,CAAC;AAEF,MAAM,WAAW,GAIZ,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAC1C,cACI,SAAS,EAAC,gCAAgC,EAC1C,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,EAAE,EAClC,OAAO,EACH,IAAI,cAAc,KAAK,cAAc,GAAG,GAAG,GAAG,cAAc,GAAG,CAAC,IAAI,cAAc,GAAG,CAAC,EAAE,YAG3F,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CACZ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,aAAa,IAAC,KAAK,EAAE,CAAC,EAAa,OAAO,EAAE,OAAO,IAAtB,CAAC,CAAC,EAAE,CAAsB,CAAC,CAAC,CAAC,IAAI,CAC3E,GACC,CACT,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAQX,CAAC,EACF,MAAM,EACN,cAAc,EAAE,cAAc,EAC9B,OAAO,EAAE,UAAU,EACnB,cAAc,EACd,UAAU,EACV,gBAAgB,GACnB,EAAE,EAAE;IACD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,aAAa,EAAE,CAAC;IAEpC,MAAM,OAAO,GAAG,WAAW,CACvB,CAAC,EAAU,EAAE,OAAgB,EAAE,EAAE;QAC7B,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACxE,CAAC,EACD,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAC7B,CAAC;IAEF,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;;QAC3B,MAAM,MAAM,GAAG,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,mCAAI,CAAC,CAAC;QAEjC,OAAO;YACH,MAAM;YACN,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YAChD,MAAM,EAAE,MAAM;gBACV,CAAC,CAAC;oBACI,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;oBAChC,QAAQ,EAAE,QAAQ;iBACrB;gBACH,CAAC,CAAC,EAAE;SACX,CAAC;IACN,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,cAAc,GAAG,OAAO,CAC1B,GAAG,EAAE,CACD,SAAS,CAAC,MAAM;QACZ,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CACX,CAAC,CAAC,MAAM;YACJ,CAAC,CAAC;gBACI,GAAG,EAAE,CAAC,CAAC,GAAG;gBACV,GAAG,EAAE,EAAE,CACH,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAClD,CAAC,cAAc,GAAG,CAAC,CAAC,CAC3B;gBACD,IAAI,EAAE,EAAE,CACJ,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,cAAc,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAClD,CAAC,cAAc,GAAG,CAAC,CAAC;oBACpB,EAAE,CACT;aACJ;YACH,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAC9B;QACH,CAAC,CAAC,EAAE,EACZ,CAAC,MAAM,EAAE,SAAS,EAAE,cAAc,CAAC,CACtC,CAAC;IAEF,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,SAAS,EAAC,mBAAmB,YAChE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAC1B,KAAC,KAAK,IAAC,SAAS,EAAC,OAAO,EAAC,cAAc,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,wBAE5D,CACX,CAAC,CAAC,CAAC,CACA,MAAC,QAAQ,eACJ,cAAc;qBACV,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC;qBACnC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE;;oBAAC,OAAA,CACd,cAA4B,KAAK,EAAE,EAAE,EAAE,SAAS,EAAC,mBAAmB,YAC/D,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,UAAU,CAAC,IAAI,CAClC,KAAC,OAAO,IACJ,MAAM,QACN,OAAO,EAAE,+BAAc,EACvB,IAAI,EAAE,aAAa,KAAK,GAAG,EAC3B,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAC,GAAG,EACX,KAAK,EAAC,MAAM,YAEX,aAAa,KAAK,GAAG,IAAI,CACtB,MAAC,KAAK,IACF,SAAS,EAAC,QAAQ,aACT,8BAA8B,EAAE,CAAC,GAAG,UAAU,aAEtD,CAAC,UAAU,IAAI,CACZ,MAAC,KAAK,IAAC,UAAU,EAAC,QAAQ,aACtB,KAAC,WAAW,IAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,GAAI,EACzC,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,kBACtB,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,GACX,IACP,CACX,EACA,CAAC,CAAC,cAAc,IAAI,CACjB,KAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAC,OAAO,YACzB,KAAC,cAAc,IACX,KAAK,EAAE,GAAG,EACV,IAAI,EAAE,MAAA,MAAM,CAAC,GAAG,CAAC,0CAAE,IAAI,EACvB,IAAI,EAAE,MAAA,MAAM,CAAC,GAAG,CAAC,0CAAE,IAAI,EACvB,KAAK,EAAE,MAAA,MAAM,CAAC,GAAG,CAAC,0CAAE,KAAK,GAC3B,GACO,CAChB,IACG,CACX,GACK,CACb,IApCK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,CAqCpB,CACT,CAAA;iBAAA,CAAC,EACL,CAAC,CAAC,UAAU,IAAI,KAAC,UAAU,KAAG,EAC/B,KAAC,MAAM,IACH,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,GAChC,EACF,KAAC,WAAW,IACR,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,GAChC,IACK,CACd,GACC,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../../../../src/components/charts/pie-chart/components/pie.tsx"],"sourcesContent":["import { useCallback, useMemo, useState, FC, Fragment } from 'react';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { BodyText, Popover, Stack, StatusLight } from '@servicetitan/design-system';\n\nimport { useClientRect } from '../../../../utils/use-client-rect';\nimport { PieChartPopoverContentType, PiePiece, PopoverDirection } from '../utils/interface';\n\nconst chartPadding = 8;\nconst px = (value?: number) => `${value ?? 0}px`;\n\nconst PiePieceSvg: FC<{\n    piece: PiePiece;\n    selected?: boolean;\n}> = ({ piece: { id, color, opacity, points, text, path }, selected }) =>\n    points && path ? (\n        <g id={id}>\n            {!!selected && (\n                <path\n                    d={path}\n                    fill={tokens.colorWhite}\n                    stroke={tokens.colorBlue200}\n                    strokeOpacity=\"50%\"\n                    strokeWidth=\"3\"\n                    paintOrder=\"stroke\"\n                />\n            )}\n            <path d={path} fill={color} />\n\n            <svg\n                x={points[4][0] - 10}\n                y={points[4][1] - (points[4][1] > 0 ? 3 : 1)}\n                width={20}\n                height={6}\n            >\n                <text\n                    x=\"50%\"\n                    y=\"50%\"\n                    fontSize={4}\n                    fontWeight={600}\n                    fill={opacity > 0.3 ? tokens.colorWhite : tokens.colorBlack}\n                    dominantBaseline=\"middle\"\n                    textAnchor=\"middle\"\n                >\n                    {text}\n                </text>\n            </svg>\n        </g>\n    ) : null;\n\nconst PiePieceHover: FC<{\n    piece: PiePiece;\n    onMouse(id: string, isEnter: boolean): void;\n}> = ({ piece, onMouse }) => {\n    const onMouseEnter = useCallback(() => onMouse(piece.id, true), [onMouse, piece.id]);\n    const onMouseLeave = useCallback(() => onMouse(piece.id, false), [onMouse, piece.id]);\n\n    return (\n        <path\n            d={piece.path}\n            fill=\"white\"\n            opacity=\"0\"\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n        />\n    );\n};\n\nconst PieSvg: FC<{\n    pieces: PiePiece[];\n    selectedIndex: number;\n    radiusRelative: number;\n}> = ({ pieces, selectedIndex, radiusRelative }) => (\n    <svg\n        className=\"position-absolute\"\n        style={{ inset: px(chartPadding) }}\n        viewBox={\n            `-${radiusRelative} -${radiusRelative} ` + `${radiusRelative * 2} ${radiusRelative * 2}`\n        }\n    >\n        {pieces.map((p, index) =>\n            p.path ? <PiePieceSvg piece={p} key={p.id} selected={index === selectedIndex} /> : null\n        )}\n\n        {selectedIndex >= 0 && selectedIndex < pieces.length && (\n            <use xlinkHref={pieces[selectedIndex].id} />\n        )}\n    </svg>\n);\n\nconst PieSvgHover: FC<{\n    pieces: PiePiece[];\n    radiusRelative: number;\n    onMouse(id: string, isEnter: boolean): void;\n}> = ({ pieces, onMouse, radiusRelative }) => (\n    <svg\n        className=\"position-absolute z-global-nav\"\n        style={{ inset: px(chartPadding) }}\n        viewBox={\n            `-${radiusRelative} -${radiusRelative} ` + `${radiusRelative * 2} ${radiusRelative * 2}`\n        }\n    >\n        {pieces.map(p =>\n            p.path ? <PiePieceHover piece={p} key={p.id} onMouse={onMouse} /> : null\n        )}\n    </svg>\n);\n\nexport const Pie: FC<{\n    title: string;\n    pieces: PiePiece[];\n    radiusRelative: number;\n    content?: FC;\n    popoverContent?: PieChartPopoverContentType;\n    hideTitles?: boolean;\n    popoverDirection?: PopoverDirection;\n}> = ({\n    pieces,\n    popoverContent: PopoverContent,\n    content: PieContent,\n    radiusRelative,\n    hideTitles,\n    popoverDirection,\n}) => {\n    const [selectedIndex, setSelectedIndex] = useState(-1);\n    const [rect, ref] = useClientRect();\n\n    const onMouse = useCallback(\n        (id: string, isEnter: boolean) => {\n            setSelectedIndex(isEnter ? pieces.findIndex(p => p.id === id) : -1);\n        },\n        [pieces, setSelectedIndex]\n    );\n\n    const container = useMemo(() => {\n        const height = rect?.height ?? 0;\n\n        return {\n            height,\n            internal: height ? height - chartPadding * 2 : 0,\n            styles: height\n                ? {\n                      width: px(Math.max(250, height)),\n                      overflow: 'hidden',\n                  }\n                : {},\n        };\n    }, [rect]);\n\n    const triggersStyles = useMemo(\n        () =>\n            container.height\n                ? pieces.map(p =>\n                      p.points\n                          ? {\n                                key: p.key,\n                                top: px(\n                                    (container.height * (radiusRelative + p.points[4][1])) /\n                                        (radiusRelative * 2)\n                                ),\n                                left: px(\n                                    (container.height * (radiusRelative + p.points[4][0])) /\n                                        (radiusRelative * 2) +\n                                        20\n                                ),\n                            }\n                          : { top: '', left: '' }\n                  )\n                : [],\n        [pieces, container, radiusRelative]\n    );\n\n    return (\n        <div ref={ref} style={container.styles} className=\"position-relative\">\n            {pieces.every(p => !p.path) ? (\n                <Stack className=\"h-100\" justifyContent=\"center\" alignItems=\"center\">\n                    No Data\n                </Stack>\n            ) : (\n                <Fragment>\n                    {triggersStyles\n                        .filter(ts => !!ts.left && !!ts.top)\n                        .map((ts, ind) => (\n                            <div key={ts.left + ts.top} style={ts} className=\"position-absolute\">\n                                {(!!PopoverContent || !hideTitles) && (\n                                    <Popover\n                                        portal\n                                        trigger={<span> </span>}\n                                        open={selectedIndex === ind}\n                                        direction={popoverDirection}\n                                        padding=\"s\"\n                                        width=\"auto\"\n                                    >\n                                        {selectedIndex === ind && (\n                                            <Stack\n                                                direction=\"column\"\n                                                data-cy={`customer-lead-rate-section-${ts.key}-popover`}\n                                            >\n                                                {!hideTitles && (\n                                                    <Stack alignItems=\"center\">\n                                                        <StatusLight color={pieces[ind].color} />\n                                                        <BodyText size=\"small\" bold>\n                                                            {pieces[ind].title}\n                                                        </BodyText>\n                                                    </Stack>\n                                                )}\n                                                {!!PopoverContent && (\n                                                    <Stack.Item className=\"m-l-1\">\n                                                        <PopoverContent\n                                                            index={ind}\n                                                            data={pieces[ind]?.data}\n                                                            text={pieces[ind]?.text}\n                                                            value={pieces[ind]?.value}\n                                                        />\n                                                    </Stack.Item>\n                                                )}\n                                            </Stack>\n                                        )}\n                                    </Popover>\n                                )}\n                            </div>\n                        ))}\n                    {!!PieContent && <PieContent />}\n                    <PieSvg\n                        pieces={pieces}\n                        selectedIndex={selectedIndex}\n                        radiusRelative={radiusRelative}\n                    />\n                    <PieSvgHover\n                        pieces={pieces}\n                        onMouse={onMouse}\n                        radiusRelative={radiusRelative}\n                    />\n                </Fragment>\n            )}\n        </div>\n    );\n};\n"],"names":["useCallback","useMemo","useState","Fragment","tokens","BodyText","Popover","Stack","StatusLight","useClientRect","chartPadding","px","value","PiePieceSvg","piece","id","color","opacity","points","text","path","selected","g","d","fill","colorWhite","stroke","colorBlue200","strokeOpacity","strokeWidth","paintOrder","svg","x","y","width","height","fontSize","fontWeight","colorBlack","dominantBaseline","textAnchor","PiePieceHover","onMouse","onMouseEnter","onMouseLeave","PieSvg","pieces","selectedIndex","radiusRelative","className","style","inset","viewBox","map","p","index","length","use","xlinkHref","PieSvgHover","Pie","popoverContent","PopoverContent","content","PieContent","hideTitles","popoverDirection","setSelectedIndex","rect","ref","isEnter","findIndex","container","internal","styles","Math","max","overflow","triggersStyles","key","top","left","div","every","justifyContent","alignItems","filter","ts","ind","portal","trigger","span","open","direction","padding","data-cy","size","bold","title","Item","data"],"mappings":"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"}

package/dist/components/charts/pie-chart/index.js

@@ -1,2 +1,4 @@
 export { PieChart } from './components/pie-chart';
+export { PieChartSection, PieChartPopoverContentType } from './utils/interface';
+
 //# sourceMappingURL=index.js.map

package/dist/components/charts/pie-chart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"sources":["../../../../src/components/charts/pie-chart/index.ts"],"sourcesContent":["export { PieChart } from './components/pie-chart';\nexport { PieChartSection, PieChartPopoverContentType } from './utils/interface';\n"],"names":["PieChart","PieChartSection","PieChartPopoverContentType"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,yBAAyB;AAClD,SAASC,eAAe,EAAEC,0BAA0B,QAAQ,oBAAoB"}

package/dist/components/charts/pie-chart/utils/const.js

@@ -1,11 +1,11 @@
 import { formatNumber } from 'accounting';
 export const radiusRelativeDefault = 50;
 const radiusInt = 20;
-const getRadiusExt = (radiusRelative) => radiusRelative - 5; // need to have some space to stroke selected piece
-const getRadiusMid = (radiusRelative) => (3 * radiusRelative) / 4;
+const getRadiusExt = (radiusRelative)=>radiusRelative - 5; // need to have some space to stroke selected piece
+const getRadiusMid = (radiusRelative)=>3 * radiusRelative / 4;
 const angleInitial = -0.5;
 const lowestOpacity = 0.1;
-const formatValue = (val) => {
+const formatValue = (val)=>{
     if (!val) {
         return '0%';
     }
@@ -16,70 +16,86 @@ const formatValue = (val) => {
     const valueDecimal = Math.max(Math.floor(val * 10) - valueMain * 10, 1);
     return `0.${valueDecimal}%`;
 };
-const convertPointsToPath = (points, wideAngle, radiusExt) => `M ${points[3][0]},${points[3][1]} ` +
-    `L ${points[0][0]},${points[0][1]} ` +
-    `A ${radiusExt},${radiusExt} 0 ${wideAngle ? 1 : 0} 1 ${points[1][0]},${points[1][1]} ` +
-    `L ${points[2][0]},${points[2][1]} ` +
-    `A ${radiusInt},${radiusInt} 0 ${wideAngle ? 1 : 0} 0 ${points[3][0]},${points[3][1]} ` +
-    `L ${points[0][0]},${points[0][1]} `;
-export const convertSessionsToPieces = (sections, radiusRelative) => {
-    const total = sections.reduce((sum, curr) => sum + curr.value, 0);
+const convertPointsToPath = (points, wideAngle, radiusExt)=>`M ${points[3][0]},${points[3][1]} ` + `L ${points[0][0]},${points[0][1]} ` + `A ${radiusExt},${radiusExt} 0 ${wideAngle ? 1 : 0} 1 ${points[1][0]},${points[1][1]} ` + `L ${points[2][0]},${points[2][1]} ` + `A ${radiusInt},${radiusInt} 0 ${wideAngle ? 1 : 0} 0 ${points[3][0]},${points[3][1]} ` + `L ${points[0][0]},${points[0][1]} `;
+export const convertSessionsToPieces = (sections, radiusRelative)=>{
+    const total = sections.reduce((sum, curr)=>sum + curr.value, 0);
     const opacityStep = (1 - lowestOpacity) / (Math.max(sections.length, 2) - 1);
     let angleSum = 0;
     const radiusExt = getRadiusExt(radiusRelative);
     const radiusMid = getRadiusMid(radiusRelative);
-    const pieces = sections
-        .slice()
-        .sort((a, b) => b.value - a.value)
-        .map((s, index) => {
-        var _a;
+    const pieces = sections.slice().sort((a, b)=>b.value - a.value).map((s, index)=>{
         const percent = total ? s.value / total : 0;
         const angle = 2 * Math.PI * percent;
         const angleStart = angleInitial + angleSum;
         const angleMid = angleStart + angle / 2;
         const angleEnd = angleStart + angle;
         const opacity = 1 - opacityStep * index;
-        const points = s.value
-            ? [
-                [radiusExt * Math.sin(angleStart), -1 * radiusExt * Math.cos(angleStart)],
-                [radiusExt * Math.sin(angleEnd), -1 * radiusExt * Math.cos(angleEnd)],
-                [radiusInt * Math.sin(angleEnd), -1 * radiusInt * Math.cos(angleEnd)],
-                [radiusInt * Math.sin(angleStart), -1 * radiusInt * Math.cos(angleStart)],
-                [radiusMid * Math.sin(angleMid), -1 * radiusMid * Math.cos(angleMid)],
+        const points = s.value ? [
+            [
+                radiusExt * Math.sin(angleStart),
+                -1 * radiusExt * Math.cos(angleStart)
+            ],
+            [
+                radiusExt * Math.sin(angleEnd),
+                -1 * radiusExt * Math.cos(angleEnd)
+            ],
+            [
+                radiusInt * Math.sin(angleEnd),
+                -1 * radiusInt * Math.cos(angleEnd)
+            ],
+            [
+                radiusInt * Math.sin(angleStart),
+                -1 * radiusInt * Math.cos(angleStart)
+            ],
+            [
+                radiusMid * Math.sin(angleMid),
+                -1 * radiusMid * Math.cos(angleMid)
             ]
-            : undefined;
+        ] : undefined;
         angleSum += angle;
+        var _s_color;
         return {
             id: `pie${index}-${Math.round(Math.random() * 10000)}`,
             key: s.key,
             title: s.title,
             text: formatValue(percent * 100),
             data: s.data,
-            color: (_a = s.color) !== null && _a !== void 0 ? _a : `rgba(0,76,195,${opacity.toFixed(2)})`,
+            color: (_s_color = s.color) !== null && _s_color !== void 0 ? _s_color : `rgba(0,76,195,${opacity.toFixed(2)})`,
             opacity,
             value: s.value,
             points,
-            path: points
-                ? convertPointsToPath(points, angleEnd - angleStart >= Math.PI, radiusExt)
-                : undefined,
+            path: points ? convertPointsToPath(points, angleEnd - angleStart >= Math.PI, radiusExt) : undefined
         };
     });
-    if (sections.filter(s => !!s.value).length === 1) {
-        const piece = pieces.find(p => !!p.points);
+    if (sections.filter((s)=>!!s.value).length === 1) {
+        const piece = pieces.find((p)=>!!p.points);
         if (piece) {
             piece.points = [
-                [-radiusExt, radiusExt],
-                [radiusExt, radiusExt],
-                [radiusInt, -radiusInt],
-                [-radiusInt, -radiusInt],
-                [0, 0],
+                [
+                    -radiusExt,
+                    radiusExt
+                ],
+                [
+                    radiusExt,
+                    radiusExt
+                ],
+                [
+                    radiusInt,
+                    -radiusInt
+                ],
+                [
+                    -radiusInt,
+                    -radiusInt
+                ],
+                [
+                    0,
+                    0
+                ]
             ];
-            piece.path =
-                `M ${-radiusExt},${0} ` +
-                    `A ${radiusExt},${radiusExt} 0 1 1 ${radiusExt},${0} ` +
-                    `A ${radiusExt},${radiusExt} 0 1 1 ${-radiusExt},${0} `;
+            piece.path = `M ${-radiusExt},${0} ` + `A ${radiusExt},${radiusExt} 0 1 1 ${radiusExt},${0} ` + `A ${radiusExt},${radiusExt} 0 1 1 ${-radiusExt},${0} `;
         }
     }
     return pieces;
 };
+
 //# sourceMappingURL=const.js.map

package/dist/components/charts/pie-chart/utils/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/utils/const.ts"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/charts/pie-chart/utils/const.ts"],"sourcesContent":["import { PiecePoints, PieChartSection, PiePiece } from './interface';\nimport { formatNumber } from 'accounting';\n\nexport const radiusRelativeDefault = 50;\nconst radiusInt = 20;\nconst getRadiusExt = (radiusRelative: number) => radiusRelative - 5; // need to have some space to stroke selected piece\nconst getRadiusMid = (radiusRelative: number) => (3 * radiusRelative) / 4;\n\nconst angleInitial = -0.5;\nconst lowestOpacity = 0.1;\n\nconst formatValue = (val: number): string => {\n    if (!val) {\n        return '0%';\n    }\n\n    const valueMain = val ? Math.abs(Math.round(val)) : 0;\n\n    if (valueMain > 0) {\n        return formatNumber(valueMain, 0) + '%';\n    }\n\n    const valueDecimal = Math.max(Math.floor(val * 10) - valueMain * 10, 1);\n\n    return `0.${valueDecimal}%`;\n};\n\nconst convertPointsToPath = (points: PiecePoints, wideAngle: boolean, radiusExt: number): string =>\n    `M ${points[3][0]},${points[3][1]} ` +\n    `L ${points[0][0]},${points[0][1]} ` +\n    `A ${radiusExt},${radiusExt} 0 ${wideAngle ? 1 : 0} 1 ${points[1][0]},${points[1][1]} ` +\n    `L ${points[2][0]},${points[2][1]} ` +\n    `A ${radiusInt},${radiusInt} 0 ${wideAngle ? 1 : 0} 0 ${points[3][0]},${points[3][1]} ` +\n    `L ${points[0][0]},${points[0][1]} `;\n\nexport const convertSessionsToPieces = <T>(\n    sections: PieChartSection<T>[],\n    radiusRelative: number\n): PiePiece<T>[] => {\n    const total = sections.reduce((sum, curr) => sum + curr.value, 0);\n    const opacityStep = (1 - lowestOpacity) / (Math.max(sections.length, 2) - 1);\n    let angleSum = 0;\n    const radiusExt = getRadiusExt(radiusRelative);\n    const radiusMid = getRadiusMid(radiusRelative);\n\n    const pieces = sections\n        .slice()\n        .sort((a, b) => b.value - a.value)\n        .map((s, index) => {\n            const percent = total ? s.value / total : 0;\n            const angle = 2 * Math.PI * percent;\n            const angleStart = angleInitial + angleSum;\n            const angleMid = angleStart + angle / 2;\n            const angleEnd = angleStart + angle;\n            const opacity = 1 - opacityStep * index;\n\n            const points: PiecePoints | undefined = s.value\n                ? [\n                      [radiusExt * Math.sin(angleStart), -1 * radiusExt * Math.cos(angleStart)],\n                      [radiusExt * Math.sin(angleEnd), -1 * radiusExt * Math.cos(angleEnd)],\n                      [radiusInt * Math.sin(angleEnd), -1 * radiusInt * Math.cos(angleEnd)],\n                      [radiusInt * Math.sin(angleStart), -1 * radiusInt * Math.cos(angleStart)],\n                      [radiusMid * Math.sin(angleMid), -1 * radiusMid * Math.cos(angleMid)],\n                  ]\n                : undefined;\n\n            angleSum += angle;\n\n            return {\n                id: `pie${index}-${Math.round(Math.random() * 10000)}`,\n                key: s.key,\n                title: s.title,\n                text: formatValue(percent * 100),\n                data: s.data,\n                color: s.color ?? `rgba(0,76,195,${opacity.toFixed(2)})`,\n                opacity,\n                value: s.value,\n                points,\n                path: points\n                    ? convertPointsToPath(points, angleEnd - angleStart >= Math.PI, radiusExt)\n                    : undefined,\n            };\n        });\n\n    if (sections.filter(s => !!s.value).length === 1) {\n        const piece = pieces.find(p => !!p.points);\n\n        if (piece) {\n            piece.points = [\n                [-radiusExt, radiusExt],\n                [radiusExt, radiusExt],\n                [radiusInt, -radiusInt],\n                [-radiusInt, -radiusInt],\n                [0, 0],\n            ];\n\n            piece.path =\n                `M ${-radiusExt},${0} ` +\n                `A ${radiusExt},${radiusExt} 0 1 1 ${radiusExt},${0} ` +\n                `A ${radiusExt},${radiusExt} 0 1 1 ${-radiusExt},${0} `;\n        }\n    }\n\n    return pieces;\n};\n"],"names":["formatNumber","radiusRelativeDefault","radiusInt","getRadiusExt","radiusRelative","getRadiusMid","angleInitial","lowestOpacity","formatValue","val","valueMain","Math","abs","round","valueDecimal","max","floor","convertPointsToPath","points","wideAngle","radiusExt","convertSessionsToPieces","sections","total","reduce","sum","curr","value","opacityStep","length","angleSum","radiusMid","pieces","slice","sort","a","b","map","s","index","percent","angle","PI","angleStart","angleMid","angleEnd","opacity","sin","cos","undefined","id","random","key","title","text","data","color","toFixed","path","filter","piece","find","p"],"mappings":"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"}

package/dist/components/charts/pie-chart/utils/interface.js

@@ -1,2 +1,3 @@
-export {};
+export { };
+
 //# sourceMappingURL=interface.js.map

package/dist/components/charts/pie-chart/utils/interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/utils/interface.ts"],"names":[],"mappings":""}
+{"version":3,"sources":["../../../../../src/components/charts/pie-chart/utils/interface.ts"],"sourcesContent":["import { FC } from 'react';\n\nexport interface PieChartSection<T> {\n    key?: string;\n    title: string;\n    value: number;\n    color?: string;\n    data?: T;\n}\n\nexport type PieChartPopoverContentType<T = any> = FC<{\n    index: number;\n    value: number;\n    data?: T;\n    text: string;\n}>;\n\nexport interface PieChartProps<T = any> {\n    title: string;\n    sections: PieChartSection<T>[];\n    popoverContent?: PieChartPopoverContentType<T>;\n    popoverDirection?: PopoverDirection;\n    content?: FC<T>;\n    height?: number;\n    width?: number;\n    radiusRelative?: number;\n    hideTitles?: boolean;\n}\n\nexport type PiecePoint = [number, number];\nexport type PiecePoints = [PiecePoint, PiecePoint, PiecePoint, PiecePoint, PiecePoint];\n\nexport interface PiePiece<T = undefined> {\n    id: string;\n    title: string;\n    color: string;\n    text: string;\n    data?: T;\n    opacity: number;\n    value: number;\n    points?: PiecePoints;\n    path?: string;\n    key?: string;\n}\n\nexport type PopoverDirection =\n    | 't'\n    | 'tr'\n    | 'tl'\n    | 'r'\n    | 'rt'\n    | 'rb'\n    | 'b'\n    | 'br'\n    | 'bl'\n    | 'l'\n    | 'lt'\n    | 'lb'\n    | 'c';\n"],"names":[],"mappings":"AA6CA,WAaU"}