npm - @servicetitan/marketing-ui - Versions diffs - 5.11.0 → 6.0.0 - Mend

@servicetitan/marketing-ui 5.11.0 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

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

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

package/dist/components/charts/pie-chart/components/pie.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pie.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,EAAE,EAAY,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAE,0BAA0B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;~~AAsG5F~~,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,EAAE,CAAC;IACb,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACvC,~~CAyHA~~,CAAC"}
1	+ {"version":3,"file":"pie.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,EAAE,EAAY,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAE,0BAA0B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAsK5F,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,EAAE,CAAC;IACb,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACvC,CA2HA,CAAC"}

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

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState, Fragment } from 'react';
 import { tokens } from '@servicetitan/tokens/core';
-import { BodyText, Popover, Stack, StatusLight } from '@servicetitan/design-system';
+import { BodyText, Popover, Stack } from '@servicetitan/design-system';
 import { useClientRect } from '../../../../utils/use-client-rect';
+import { ColorTag } from '../../common';
 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 ? /*#__PURE__*/ _jsxs("g", {
+const GAP_PX = 4;
+const PiePieceSvg = ({ piece: { id, color, points, text, path }, selected })=>points && path ? /*#__PURE__*/ _jsxs("g", {
         id: id,
         children: [
-            !!selected && /*#__PURE__*/ _jsx("path", {
+            selected && /*#__PURE__*/ _jsx("path", {
                 d: path,
                 fill: tokens.colorWhite,
                 stroke: tokens.colorBlue200,
@@ -20,21 +22,39 @@ const PiePieceSvg = ({ piece: { id, color, opacity, points, text, path }, select
                 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
-                })
+            points[4] && /*#__PURE__*/ _jsx("g", {
+                transform: `translate(${points[4][0]}, ${points[4][1]})`,
+                pointerEvents: "none",
+                children: (()=>{
+                    const fontSize = 3;
+                    const height = 6;
+                    const radius = height / 2;
+                    const width = Math.max(8, text.length);
+                    return /*#__PURE__*/ _jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("rect", {
+                                x: -width / 2,
+                                y: -height / 2,
+                                width: width,
+                                height: height,
+                                rx: radius,
+                                ry: radius,
+                                fill: "rgba(255,255,255,0.80)",
+                                strokeWidth: 0.6
+                            }),
+                            /*#__PURE__*/ _jsx("text", {
+                                x: "0",
+                                y: "0",
+                                fontSize: fontSize,
+                                fontWeight: 600,
+                                textAnchor: "middle",
+                                dominantBaseline: "middle",
+                                fill: tokens.colorBlack,
+                                children: text
+                            })
+                        ]
+                    });
+                })()
             })
         ]
     }) : null;
@@ -55,22 +75,79 @@ const PiePieceHover = ({ piece, onMouse })=>{
         onMouseLeave: onMouseLeave
     });
 };
-const PieSvg = ({ pieces, selectedIndex, radiusRelative })=>/*#__PURE__*/ _jsxs("svg", {
+const PieSvg = ({ pieces, selectedIndex, radiusRelative })=>{
+    const piePiece = pieces.find((p)=>p.points);
+    const innerR = piePiece ? Math.hypot(piePiece.points[3][0], piePiece.points[3][1]) : 0;
+    const outerR = piePiece ? Math.hypot(piePiece.points[1][0], piePiece.points[1][1]) : 0;
+    const boundaries = pieces.filter((p)=>p.points).map((p)=>{
+        const [outerX, outerY] = p.points[1];
+        const len = Math.hypot(outerX, outerY) || 1;
+        return {
+            x: outerX / len,
+            y: outerY / len
+        };
+    });
+    return /*#__PURE__*/ _jsxs("svg", {
         className: "position-absolute",
         style: {
-            inset: px(chartPadding)
+            inset: `${chartPadding}px`
         },
-        viewBox: `-${radiusRelative} -${radiusRelative} ` + `${radiusRelative * 2} ${radiusRelative * 2}`,
+        viewBox: `-${radiusRelative} -${radiusRelative} ${radiusRelative * 2} ${radiusRelative * 2}`,
         children: [
-            pieces.map((p, index)=>p.path ? /*#__PURE__*/ _jsx(PiePieceSvg, {
+            pieces.map((p, i)=>p.path ? /*#__PURE__*/ _jsx(PiePieceSvg, {
                     piece: p,
-                    selected: index === selectedIndex
+                    selected: i === selectedIndex
                 }, p.id) : null),
+            pieces.length > 1 && innerR > 0 && outerR > 0 && /*#__PURE__*/ _jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("defs", {
+                        children: /*#__PURE__*/ _jsxs("mask", {
+                            id: "ring-mask",
+                            children: [
+                                /*#__PURE__*/ _jsx("rect", {
+                                    x: -outerR,
+                                    y: -outerR,
+                                    width: outerR * 2,
+                                    height: outerR * 2,
+                                    fill: "black"
+                                }),
+                                /*#__PURE__*/ _jsx("circle", {
+                                    cx: "0",
+                                    cy: "0",
+                                    r: outerR,
+                                    fill: "white"
+                                }),
+                                /*#__PURE__*/ _jsx("circle", {
+                                    cx: "0",
+                                    cy: "0",
+                                    r: innerR,
+                                    fill: "black"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("g", {
+                        mask: "url(#ring-mask)",
+                        pointerEvents: "none",
+                        children: boundaries.map((boundary)=>/*#__PURE__*/ _jsx("line", {
+                                x1: boundary.x * innerR,
+                                y1: boundary.y * innerR,
+                                x2: boundary.x * outerR,
+                                y2: boundary.y * outerR,
+                                stroke: "#fff",
+                                strokeWidth: GAP_PX,
+                                vectorEffect: "non-scaling-stroke",
+                                strokeLinecap: "round"
+                            }, `sep-${boundary.x}-${boundary.y}`))
+                    })
+                ]
+            }),
             selectedIndex >= 0 && selectedIndex < pieces.length && /*#__PURE__*/ _jsx("use", {
-                xlinkHref: pieces[selectedIndex].id
+                xlinkHref: `#${pieces[selectedIndex].id}`
             })
         ]
     });
+};
 const PieSvgHover = ({ pieces, onMouse, radiusRelative })=>/*#__PURE__*/ _jsx("svg", {
         className: "position-absolute z-global-nav",
         style: {
@@ -98,8 +175,7 @@ export const Pie = ({ pieces, popoverContent: PopoverContent, content: PieConten
             height,
             internal: height ? height - chartPadding * 2 : 0,
             styles: height ? {
-                width: px(Math.max(250, height)),
-                overflow: 'hidden'
+                width: px(Math.max(250, height))
             } : {}
         };
     }, [
@@ -120,7 +196,7 @@ export const Pie = ({ pieces, popoverContent: PopoverContent, content: PieConten
     return /*#__PURE__*/ _jsx("div", {
         ref: ref,
         style: container.styles,
-        className: "position-relative",
+        className: "position-relative h-100",
         children: pieces.every((p)=>!p.path) ? /*#__PURE__*/ _jsx(Stack, {
             className: "h-100",
             justifyContent: "center",
@@ -149,7 +225,8 @@ export const Pie = ({ pieces, popoverContent: PopoverContent, content: PieConten
                                     !hideTitles && /*#__PURE__*/ _jsxs(Stack, {
                                         alignItems: "center",
                                         children: [
-                                            /*#__PURE__*/ _jsx(StatusLight, {
+                                            /*#__PURE__*/ _jsx(ColorTag, {
+                                                label: "",
                                                 color: pieces[ind].color
                                             }),
                                             /*#__PURE__*/ _jsx(BodyText, {

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

	@@ -1 +1 @@
1	- {"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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"}
1	+ {"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 } from '@servicetitan/design-system';\n\nimport { useClientRect } from '../../../../utils/use-client-rect';\nimport { PieChartPopoverContentType, PiePiece, PopoverDirection } from '../utils/interface';\nimport { ColorTag } from '../../common';\n\nconst chartPadding = 8;\nconst px = (value?: number) => `${value ?? 0}px`;\nconst GAP_PX = 4;\n\nconst PiePieceSvg: FC<{\n piece: PiePiece;\n selected?: boolean;\n}> = ({ piece: { id, color, 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 {points[4] && (\n <g transform={`translate(${points[4][0]}, ${points[4][1]})`} pointerEvents=\"none\">\n {(() => {\n const fontSize = 3;\n const height = 6;\n const radius = height / 2;\n\n const width = Math.max(8, text.length);\n\n return (\n <Fragment>\n <rect\n x={-width / 2}\n y={-height / 2}\n width={width}\n height={height}\n rx={radius}\n ry={radius}\n fill=\"rgba(255,255,255,0.80)\"\n strokeWidth={0.6}\n />\n <text\n x=\"0\"\n y=\"0\"\n fontSize={fontSize}\n fontWeight={600}\n textAnchor=\"middle\"\n dominantBaseline=\"middle\"\n fill={tokens.colorBlack}\n >\n {text}\n </text>\n </Fragment>\n );\n })()}\n </g>\n )}\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 const piePiece = pieces.find(p => p.points);\n const innerR = piePiece ? Math.hypot(piePiece.points![3][0], piePiece.points![3][1]) : 0;\n const outerR = piePiece ? Math.hypot(piePiece.points![1][0], piePiece.points![1][1]) : 0;\n\n const boundaries = pieces\n .filter(p => p.points)\n .map(p => {\n const [outerX, outerY] = p.points![1];\n const len = Math.hypot(outerX, outerY) \|\| 1;\n return { x: outerX / len, y: outerY / len };\n });\n\n return (\n <svg\n className=\"position-absolute\"\n style={{ inset: `${chartPadding}px` }}\n viewBox={`-${radiusRelative} -${radiusRelative} ${radiusRelative * 2} ${radiusRelative * 2}`}\n >\n {pieces.map((p, i) =>\n p.path ? <PiePieceSvg piece={p} key={p.id} selected={i === selectedIndex} /> : null\n )}\n\n {pieces.length > 1 && innerR > 0 && outerR > 0 && (\n <Fragment>\n <defs>\n <mask id=\"ring-mask\">\n <rect\n x={-outerR}\n y={-outerR}\n width={outerR * 2}\n height={outerR * 2}\n fill=\"black\"\n />\n <circle cx=\"0\" cy=\"0\" r={outerR} fill=\"white\" />\n <circle cx=\"0\" cy=\"0\" r={innerR} fill=\"black\" />\n </mask>\n </defs>\n <g mask=\"url(#ring-mask)\" pointerEvents=\"none\">\n {boundaries.map(boundary => (\n <line\n key={`sep-${boundary.x}-${boundary.y}`}\n x1={boundary.x * innerR}\n y1={boundary.y * innerR}\n x2={boundary.x * outerR}\n y2={boundary.y * outerR}\n stroke=\"#fff\"\n strokeWidth={GAP_PX}\n vectorEffect=\"non-scaling-stroke\"\n strokeLinecap=\"round\"\n />\n ))}\n </g>\n </Fragment>\n )}\n {selectedIndex >= 0 && selectedIndex < pieces.length && (\n <use xlinkHref={`#${pieces[selectedIndex].id}`} />\n )}\n </svg>\n );\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 }\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 h-100\">\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 <ColorTag\n label=\"\"\n color={pieces[ind].color}\n />\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","useClientRect","ColorTag","chartPadding","px","value","GAP_PX","PiePieceSvg","piece","id","color","points","text","path","selected","g","d","fill","colorWhite","stroke","colorBlue200","strokeOpacity","strokeWidth","paintOrder","transform","pointerEvents","fontSize","height","radius","width","Math","max","length","rect","x","y","rx","ry","fontWeight","textAnchor","dominantBaseline","colorBlack","PiePieceHover","onMouse","onMouseEnter","onMouseLeave","opacity","PieSvg","pieces","selectedIndex","radiusRelative","piePiece","find","p","innerR","hypot","outerR","boundaries","filter","map","outerX","outerY","len","svg","className","style","inset","viewBox","i","defs","mask","circle","cx","cy","r","boundary","line","x1","y1","x2","y2","vectorEffect","strokeLinecap","use","xlinkHref","PieSvgHover","Pie","popoverContent","PopoverContent","content","PieContent","hideTitles","popoverDirection","setSelectedIndex","ref","isEnter","findIndex","container","internal","styles","triggersStyles","key","top","left","div","every","justifyContent","alignItems","ts","ind","portal","trigger","span","open","direction","padding","data-cy","label","size","bold","title","Item","index","data"],"mappings":"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"}

package/dist/components/charts/pie-chart/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { PieChart } from './components/pie-chart';
-export { PieChartSection, PieChartPopoverContentType } from './utils/interface';
+export type { PieChartSection, PieChartPopoverContentType } from './utils/interface';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/charts/pie-chart/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,~~OAAO~~,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -1,4 +1,3 @@
 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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~~"}
1	+ {"version":3,"sources":["../../../../src/components/charts/pie-chart/index.ts"],"sourcesContent":["export { PieChart } from './components/pie-chart';\nexport type { PieChartSection, PieChartPopoverContentType } from './utils/interface';\n"],"names":["PieChart"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,yBAAyB"}

package/dist/components/charts/pie-chart/pie-chart.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pie-chart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/pie-chart.stories.tsx"],"names":[],"mappings":";;;;;AAGA,wBAIE;AAEF,eAAO,MAAM,kBAAkB,+CAa9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,+~~CAiB~~/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAMhC,CAAC;AAEF,eAAO,MAAM,cAAc,+CAAkE,CAAC"}
1	+ {"version":3,"file":"pie-chart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/pie-chart.stories.tsx"],"names":[],"mappings":";;;;;AAGA,wBAIE;AAEF,eAAO,MAAM,kBAAkB,+CAa9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAgB/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAMhC,CAAC;AAEF,eAAO,MAAM,cAAc,+CAAkE,CAAC"}

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

@@ -2,7 +2,7 @@ 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 getRadiusMid = (radiusRelative)=>2.75 * radiusRelative / 4;
 const angleInitial = -0.5;
 const lowestOpacity = 0.1;
 const formatValue = (val)=>{

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

	@@ -1 +1 @@
1	- {"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":"AACA,SAASA,YAAY,QAAQ,aAAa;AAE1C,OAAO,MAAMC,wBAAwB,GAAG;AACxC,MAAMC,YAAY;AAClB,MAAMC,eAAe,CAACC,iBAA2BA,iBAAiB,GAAG,mDAAmD;AACxH,MAAMC,eAAe,CAACD,iBAA2B,AAAC,~~IAAIA~~,iBAAkB;~~AAExE~~,MAAME,eAAe,CAAC;AACtB,MAAMC,gBAAgB;AAEtB,MAAMC,cAAc,CAACC;IACjB,IAAI,CAACA,KAAK;QACN,OAAO;IACX;IAEA,MAAMC,YAAYD,MAAME,KAAKC,GAAG,CAACD,KAAKE,KAAK,CAACJ,QAAQ;IAEpD,IAAIC,YAAY,GAAG;QACf,OAAOV,aAAaU,WAAW,KAAK;IACxC;IAEA,MAAMI,eAAeH,KAAKI,GAAG,CAACJ,KAAKK,KAAK,CAACP,MAAM,MAAMC,YAAY,IAAI;IAErE,OAAO,CAAC,EAAE,EAAEI,aAAa,CAAC,CAAC;AAC/B;AAEA,MAAMG,sBAAsB,CAACC,QAAqBC,WAAoBC,YAClE,CAAC,EAAE,EAAEF,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEA,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GACpC,CAAC,EAAE,EAAEA,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEA,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GACpC,CAAC,EAAE,EAAEE,UAAU,CAAC,EAAEA,UAAU,GAAG,EAAED,YAAY,IAAI,EAAE,GAAG,EAAED,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEA,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GACvF,CAAC,EAAE,EAAEA,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEA,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GACpC,CAAC,EAAE,EAAEhB,UAAU,CAAC,EAAEA,UAAU,GAAG,EAAEiB,YAAY,IAAI,EAAE,GAAG,EAAED,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEA,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GACvF,CAAC,EAAE,EAAEA,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEA,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAExC,OAAO,MAAMG,0BAA0B,CACnCC,UACAlB;IAEA,MAAMmB,QAAQD,SAASE,MAAM,CAAC,CAACC,KAAKC,OAASD,MAAMC,KAAKC,KAAK,EAAE;IAC/D,MAAMC,cAAc,AAAC,CAAA,IAAIrB,aAAY,IAAMI,CAAAA,KAAKI,GAAG,CAACO,SAASO,MAAM,EAAE,KAAK,CAAA;IAC1E,IAAIC,WAAW;IACf,MAAMV,YAAYjB,aAAaC;IAC/B,MAAM2B,YAAY1B,aAAaD;IAE/B,MAAM4B,SAASV,SACVW,KAAK,GACLC,IAAI,CAAC,CAACC,GAAGC,IAAMA,EAAET,KAAK,GAAGQ,EAAER,KAAK,EAChCU,GAAG,CAAC,CAACC,GAAGC;QACL,MAAMC,UAAUjB,QAAQe,EAAEX,KAAK,GAAGJ,QAAQ;QAC1C,MAAMkB,QAAQ,IAAI9B,KAAK+B,EAAE,GAAGF;QAC5B,MAAMG,aAAarC,eAAewB;QAClC,MAAMc,WAAWD,aAAaF,QAAQ;QACtC,MAAMI,WAAWF,aAAaF;QAC9B,MAAMK,UAAU,IAAIlB,cAAcW;QAElC,MAAMrB,SAAkCoB,EAAEX,KAAK,GACzC;YACI;gBAACP,YAAYT,KAAKoC,GAAG,CAACJ;gBAAa,CAAC,IAAIvB,YAAYT,KAAKqC,GAAG,CAACL;aAAY;YACzE;gBAACvB,YAAYT,KAAKoC,GAAG,CAACF;gBAAW,CAAC,IAAIzB,YAAYT,KAAKqC,GAAG,CAACH;aAAU;YACrE;gBAAC3C,YAAYS,KAAKoC,GAAG,CAACF;gBAAW,CAAC,IAAI3C,YAAYS,KAAKqC,GAAG,CAACH;aAAU;YACrE;gBAAC3C,YAAYS,KAAKoC,GAAG,CAACJ;gBAAa,CAAC,IAAIzC,YAAYS,KAAKqC,GAAG,CAACL;aAAY;YACzE;gBAACZ,YAAYpB,KAAKoC,GAAG,CAACH;gBAAW,CAAC,IAAIb,YAAYpB,KAAKqC,GAAG,CAACJ;aAAU;SACxE,GACDK;QAENnB,YAAYW;YAQDH;QANX,OAAO;YACHY,IAAI,CAAC,GAAG,EAAEX,MAAM,CAAC,EAAE5B,KAAKE,KAAK,CAACF,KAAKwC,MAAM,KAAK,QAAQ;YACtDC,KAAKd,EAAEc,GAAG;YACVC,OAAOf,EAAEe,KAAK;YACdC,MAAM9C,YAAYgC,UAAU;YAC5Be,MAAMjB,EAAEiB,IAAI;YACZC,OAAOlB,CAAAA,WAAAA,EAAEkB,KAAK,cAAPlB,sBAAAA,WAAW,CAAC,cAAc,EAAEQ,QAAQW,OAAO,CAAC,GAAG,CAAC,CAAC;YACxDX;YACAnB,OAAOW,EAAEX,KAAK;YACdT;YACAwC,MAAMxC,SACAD,oBAAoBC,QAAQ2B,WAAWF,cAAchC,KAAK+B,EAAE,EAAEtB,aAC9D6B;QACV;IACJ;IAEJ,IAAI3B,SAASqC,MAAM,CAACrB,CAAAA,IAAK,CAAC,CAACA,EAAEX,KAAK,EAAEE,MAAM,KAAK,GAAG;QAC9C,MAAM+B,QAAQ5B,OAAO6B,IAAI,CAACC,CAAAA,IAAK,CAAC,CAACA,EAAE5C,MAAM;QAEzC,IAAI0C,OAAO;YACPA,MAAM1C,MAAM,GAAG;gBACX;oBAAC,CAACE;oBAAWA;iBAAU;gBACvB;oBAACA;oBAAWA;iBAAU;gBACtB;oBAAClB;oBAAW,CAACA;iBAAU;gBACvB;oBAAC,CAACA;oBAAW,CAACA;iBAAU;gBACxB;oBAAC;oBAAG;iBAAE;aACT;YAED0D,MAAMF,IAAI,GACN,CAAC,EAAE,EAAE,CAACtC,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,GACvB,CAAC,EAAE,EAAEA,UAAU,CAAC,EAAEA,UAAU,OAAO,EAAEA,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC,GACtD,CAAC,EAAE,EAAEA,UAAU,CAAC,EAAEA,UAAU,OAAO,EAAE,CAACA,UAAU,CAAC,EAAE,EAAE,CAAC,CAAC;QAC/D;IACJ;IAEA,OAAOY;AACX,EAAE"}
1	+ {"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) => (2.75 * 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/image-cropper/image-cropper.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image-cropper.d.ts","sourceRoot":"","sources":["../../../src/components/image-cropper/image-cropper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;~~AAIlC~~,OAAO,qCAAqC,CAAC;AAE7C,UAAU,iBAAiB;IACvB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE;QACF,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAClB,CAAC;CACL;AAED,qBACa,YAAa,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9C,OAAO,CAAC,GAAG,CAAC,CAAS;IACrB,OAAO,CAAC,IAAI,CAAC,CAAO;IACpB,OAAO,CAAC,KAAK,CAAC,CAAmB;gBAEjC,KAAK,EAAE,iBAAiB;IAKpC,aAAa,GAAI,MAAM,MAAM,EAAE,UAAU,MAAM,+BA2CxC;IAGP,iBAAiB;IAIjB,oBAAoB;IAMpB,MAAM;IAaN,OAAO,CAAC,YAAY,CAAsC;IAG1D,OAAO,CAAC,iBAAiB,CAWvB;CACL"}
1	+ {"version":3,"file":"image-cropper.d.ts","sourceRoot":"","sources":["../../../src/components/image-cropper/image-cropper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKlC,OAAO,qCAAqC,CAAC;AAE7C,UAAU,iBAAiB;IACvB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE;QACF,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAClB,CAAC;CACL;AAED,qBACa,YAAa,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9C,OAAO,CAAC,GAAG,CAAC,CAAS;IACrB,OAAO,CAAC,IAAI,CAAC,CAAO;IACpB,OAAO,CAAC,KAAK,CAAC,CAAmB;gBAEjC,KAAK,EAAE,iBAAiB;IAKpC,aAAa,GAAI,MAAM,MAAM,EAAE,UAAU,MAAM,+BA2CxC;IAGP,iBAAiB;IAIjB,oBAAoB;IAMpB,MAAM;IAaN,OAAO,CAAC,YAAY,CAAsC;IAG1D,OAAO,CAAC,iBAAiB,CAWvB;CACL"}

package/dist/components/image-cropper/image-cropper.js CHANGED Viewed

@@ -24,7 +24,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
 import { observable, action, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
-import ReactCrop, { Crop } from 'react-image-crop';
+import ReactCrop from 'react-image-crop';
 import 'react-image-crop/dist/ReactCrop.css';
 export class ImageCropper extends Component {
     componentDidMount() {

package/dist/components/image-cropper/image-cropper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/image-cropper/image-cropper.tsx"],"sourcesContent":["import { Component } from 'react';\nimport { observable, action, makeObservable } from 'mobx';\nimport { observer } from 'mobx-react';\nimport ~~ReactCrop,~~ { Crop } from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\n\ninterface ImageCropperProps {\n file: File;\n crop: {\n width: number;\n height: number;\n };\n}\n\n@observer\nexport class ImageCropper extends Component<ImageCropperProps> {\n @observable private src?: string;\n @observable private crop?: Crop;\n @observable private image?: HTMLImageElement;\n\n constructor(props: ImageCropperProps) {\n super(props);\n makeObservable(this);\n }\n\n getCroppedImg = (type: string, fileName: string) =>\n new Promise<File \| undefined>(resolve => {\n if (!this.image \|\| !this.crop) {\n resolve(undefined);\n return;\n }\n\n const { x, y } = this.crop;\n if (x == null \|\| y == null) {\n resolve(undefined);\n return;\n }\n\n const { width, height } = this.props.crop;\n const canvas = document.createElement('canvas');\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n resolve(undefined);\n return;\n }\n\n ctx.drawImage(\n this.image,\n x * (this.image.naturalWidth / this.image.width),\n y * (this.image.naturalHeight / this.image.height),\n width,\n height,\n 0,\n 0,\n width,\n height\n );\n\n canvas.toBlob(\n blob => {\n const result = blob ? new File([blob], fileName) : undefined;\n resolve(result);\n },\n type,\n 1\n );\n });\n\n @action\n componentDidMount() {\n return (this.src = URL.createObjectURL(this.props.file));\n }\n\n componentWillUnmount() {\n if (this.src) {\n URL.revokeObjectURL(this.src);\n }\n }\n\n render() {\n return this.src ? (\n <ReactCrop\n locked\n src={this.src}\n crop={this.crop}\n onChange={this.handleChange}\n onImageLoaded={this.handleImageLoaded}\n />\n ) : null;\n }\n\n @action\n private handleChange = (crop: Crop) => (this.crop = crop);\n\n @action\n private handleImageLoaded = (image: HTMLImageElement) => {\n this.image = image;\n this.crop = {\n unit: 'px',\n x: 0,\n y: 0,\n width: this.props.crop.width * (image.width / image.naturalWidth),\n height: this.props.crop.height * (image.height / image.naturalHeight),\n };\n\n return false;\n };\n}\n"],"names":["Component","observable","action","makeObservable","observer","ReactCrop","~~Crop","~~ImageCropper","componentDidMount","src","URL","createObjectURL","props","file","componentWillUnmount","revokeObjectURL","render","locked","crop","onChange","handleChange","onImageLoaded","handleImageLoaded","image","getCroppedImg","type","fileName","Promise","resolve","undefined","x","y","width","height","canvas","document","createElement","ctx","getContext","drawImage","naturalWidth","naturalHeight","toBlob","blob","result","File","unit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,UAAU,EAAEC,MAAM,EAAEC,cAAc,QAAQ,OAAO;AAC1D,SAASC,QAAQ,QAAQ,aAAa;~~AACtC~~,OAAOC,~~aAAaC~~,~~IAAI,QAAQ,~~mBAAmB;~~AACnD~~,OAAO,sCAAsC;AAW7C,OAAO,MAAMC,~~qBAAqBP~~;~~IAwD9BQ~~,oBAAoB;QAChB,OAAQ,IAAI,CAACC,GAAG,GAAGC,IAAIC,eAAe,CAAC,IAAI,CAACC,KAAK,CAACC,IAAI;IAC1D;IAEAC,uBAAuB;QACnB,IAAI,IAAI,CAACL,GAAG,EAAE;YACVC,IAAIK,eAAe,CAAC,IAAI,CAACN,GAAG;QAChC;IACJ;IAEAO,SAAS;QACL,OAAO,IAAI,CAACP,GAAG,iBACX,~~KAACJ~~;~~YACGY~~,MAAM;YACNR,KAAK,IAAI,CAACA,GAAG;YACbS,MAAM,IAAI,CAACA,IAAI;YACfC,UAAU,IAAI,CAACC,YAAY;YAC3BC,eAAe,IAAI,CAACC,iBAAiB;aAEzC;IACR;IAvEA,YAAYV,KAAwB,CAAE;QAClC,KAAK,CAACA,QALV,uBAAoBH,OAApB,KAAA,IACA,uBAAoBS,QAApB,KAAA,IACA,uBAAoBK,SAApB,KAAA,IAOAC,uBAAAA,iBAAgB,CAACC,MAAcC,WAC3B,IAAIC,QAA0BC,CAAAA;gBAC1B,IAAI,CAAC,IAAI,CAACL,KAAK,IAAI,CAAC,IAAI,CAACL,IAAI,EAAE;oBAC3BU,QAAQC;oBACR;gBACJ;gBAEA,MAAM,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAG,IAAI,CAACb,IAAI;gBAC1B,IAAIY,KAAK,QAAQC,KAAK,MAAM;oBACxBH,QAAQC;oBACR;gBACJ;gBAEA,MAAM,EAAEG,KAAK,EAAEC,MAAM,EAAE,GAAG,IAAI,CAACrB,KAAK,CAACM,IAAI;gBACzC,MAAMgB,SAASC,SAASC,aAAa,CAAC;gBACtCF,OAAOF,KAAK,GAAGA;gBACfE,OAAOD,MAAM,GAAGA;gBAChB,MAAMI,MAAMH,OAAOI,UAAU,CAAC;gBAC9B,IAAI,CAACD,KAAK;oBACNT,QAAQC;oBACR;gBACJ;gBAEAQ,IAAIE,SAAS,CACT,IAAI,CAAChB,KAAK,EACVO,IAAK,CAAA,IAAI,CAACP,KAAK,CAACiB,YAAY,GAAG,IAAI,CAACjB,KAAK,CAACS,KAAK,AAAD,GAC9CD,IAAK,CAAA,IAAI,CAACR,KAAK,CAACkB,aAAa,GAAG,IAAI,CAAClB,KAAK,CAACU,MAAM,AAAD,GAChDD,OACAC,QACA,GACA,GACAD,OACAC;gBAGJC,OAAOQ,MAAM,CACTC,CAAAA;oBACI,MAAMC,SAASD,OAAO,IAAIE,KAAK;wBAACF;qBAAK,EAAEjB,YAAYG;oBACnDD,QAAQgB;gBACZ,GACAnB,MACA;YAER,KAyBJ,uBACQL,gBAAe,CAACF,OAAgB,IAAI,CAACA,IAAI,GAAGA,OAEpD,uBACQI,qBAAoB,CAACC;YACzB,IAAI,CAACA,KAAK,GAAGA;YACb,IAAI,CAACL,IAAI,GAAG;gBACR4B,MAAM;gBACNhB,GAAG;gBACHC,GAAG;gBACHC,OAAO,IAAI,CAACpB,KAAK,CAACM,IAAI,CAACc,KAAK,GAAIT,CAAAA,MAAMS,KAAK,GAAGT,MAAMiB,YAAY,AAAD;gBAC/DP,QAAQ,IAAI,CAACrB,KAAK,CAACM,IAAI,CAACe,MAAM,GAAIV,CAAAA,MAAMU,MAAM,GAAGV,MAAMkB,aAAa,AAAD;YACvE;YAEA,OAAO;QACX;~~QAtFItC~~,eAAe,IAAI;IACvB;AAsFJ"}
1	+ {"version":3,"sources":["../../../src/components/image-cropper/image-cropper.tsx"],"sourcesContent":["import { Component } from 'react';\nimport { observable, action, makeObservable } from 'mobx';\nimport { observer } from 'mobx-react';\nimport type { Crop } from 'react-image-crop';\nimport ReactCrop from 'react-image-crop';\nimport 'react-image-crop/dist/ReactCrop.css';\n\ninterface ImageCropperProps {\n file: File;\n crop: {\n width: number;\n height: number;\n };\n}\n\n@observer\nexport class ImageCropper extends Component<ImageCropperProps> {\n @observable private src?: string;\n @observable private crop?: Crop;\n @observable private image?: HTMLImageElement;\n\n constructor(props: ImageCropperProps) {\n super(props);\n makeObservable(this);\n }\n\n getCroppedImg = (type: string, fileName: string) =>\n new Promise<File \| undefined>(resolve => {\n if (!this.image \|\| !this.crop) {\n resolve(undefined);\n return;\n }\n\n const { x, y } = this.crop;\n if (x == null \|\| y == null) {\n resolve(undefined);\n return;\n }\n\n const { width, height } = this.props.crop;\n const canvas = document.createElement('canvas');\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n resolve(undefined);\n return;\n }\n\n ctx.drawImage(\n this.image,\n x * (this.image.naturalWidth / this.image.width),\n y * (this.image.naturalHeight / this.image.height),\n width,\n height,\n 0,\n 0,\n width,\n height\n );\n\n canvas.toBlob(\n blob => {\n const result = blob ? new File([blob], fileName) : undefined;\n resolve(result);\n },\n type,\n 1\n );\n });\n\n @action\n componentDidMount() {\n return (this.src = URL.createObjectURL(this.props.file));\n }\n\n componentWillUnmount() {\n if (this.src) {\n URL.revokeObjectURL(this.src);\n }\n }\n\n render() {\n return this.src ? (\n <ReactCrop\n locked\n src={this.src}\n crop={this.crop}\n onChange={this.handleChange}\n onImageLoaded={this.handleImageLoaded}\n />\n ) : null;\n }\n\n @action\n private handleChange = (crop: Crop) => (this.crop = crop);\n\n @action\n private handleImageLoaded = (image: HTMLImageElement) => {\n this.image = image;\n this.crop = {\n unit: 'px',\n x: 0,\n y: 0,\n width: this.props.crop.width * (image.width / image.naturalWidth),\n height: this.props.crop.height * (image.height / image.naturalHeight),\n };\n\n return false;\n };\n}\n"],"names":["Component","observable","action","makeObservable","observer","ReactCrop","ImageCropper","componentDidMount","src","URL","createObjectURL","props","file","componentWillUnmount","revokeObjectURL","render","locked","crop","onChange","handleChange","onImageLoaded","handleImageLoaded","image","getCroppedImg","type","fileName","Promise","resolve","undefined","x","y","width","height","canvas","document","createElement","ctx","getContext","drawImage","naturalWidth","naturalHeight","toBlob","blob","result","File","unit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,UAAU,EAAEC,MAAM,EAAEC,cAAc,QAAQ,OAAO;AAC1D,SAASC,QAAQ,QAAQ,aAAa;AAEtC,OAAOC,eAAe,mBAAmB;AACzC,OAAO,sCAAsC;AAW7C,OAAO,MAAMC,qBAAqBN;IAwD9BO,oBAAoB;QAChB,OAAQ,IAAI,CAACC,GAAG,GAAGC,IAAIC,eAAe,CAAC,IAAI,CAACC,KAAK,CAACC,IAAI;IAC1D;IAEAC,uBAAuB;QACnB,IAAI,IAAI,CAACL,GAAG,EAAE;YACVC,IAAIK,eAAe,CAAC,IAAI,CAACN,GAAG;QAChC;IACJ;IAEAO,SAAS;QACL,OAAO,IAAI,CAACP,GAAG,iBACX,KAACH;YACGW,MAAM;YACNR,KAAK,IAAI,CAACA,GAAG;YACbS,MAAM,IAAI,CAACA,IAAI;YACfC,UAAU,IAAI,CAACC,YAAY;YAC3BC,eAAe,IAAI,CAACC,iBAAiB;aAEzC;IACR;IAvEA,YAAYV,KAAwB,CAAE;QAClC,KAAK,CAACA,QALV,uBAAoBH,OAApB,KAAA,IACA,uBAAoBS,QAApB,KAAA,IACA,uBAAoBK,SAApB,KAAA,IAOAC,uBAAAA,iBAAgB,CAACC,MAAcC,WAC3B,IAAIC,QAA0BC,CAAAA;gBAC1B,IAAI,CAAC,IAAI,CAACL,KAAK,IAAI,CAAC,IAAI,CAACL,IAAI,EAAE;oBAC3BU,QAAQC;oBACR;gBACJ;gBAEA,MAAM,EAAEC,CAAC,EAAEC,CAAC,EAAE,GAAG,IAAI,CAACb,IAAI;gBAC1B,IAAIY,KAAK,QAAQC,KAAK,MAAM;oBACxBH,QAAQC;oBACR;gBACJ;gBAEA,MAAM,EAAEG,KAAK,EAAEC,MAAM,EAAE,GAAG,IAAI,CAACrB,KAAK,CAACM,IAAI;gBACzC,MAAMgB,SAASC,SAASC,aAAa,CAAC;gBACtCF,OAAOF,KAAK,GAAGA;gBACfE,OAAOD,MAAM,GAAGA;gBAChB,MAAMI,MAAMH,OAAOI,UAAU,CAAC;gBAC9B,IAAI,CAACD,KAAK;oBACNT,QAAQC;oBACR;gBACJ;gBAEAQ,IAAIE,SAAS,CACT,IAAI,CAAChB,KAAK,EACVO,IAAK,CAAA,IAAI,CAACP,KAAK,CAACiB,YAAY,GAAG,IAAI,CAACjB,KAAK,CAACS,KAAK,AAAD,GAC9CD,IAAK,CAAA,IAAI,CAACR,KAAK,CAACkB,aAAa,GAAG,IAAI,CAAClB,KAAK,CAACU,MAAM,AAAD,GAChDD,OACAC,QACA,GACA,GACAD,OACAC;gBAGJC,OAAOQ,MAAM,CACTC,CAAAA;oBACI,MAAMC,SAASD,OAAO,IAAIE,KAAK;wBAACF;qBAAK,EAAEjB,YAAYG;oBACnDD,QAAQgB;gBACZ,GACAnB,MACA;YAER,KAyBJ,uBACQL,gBAAe,CAACF,OAAgB,IAAI,CAACA,IAAI,GAAGA,OAEpD,uBACQI,qBAAoB,CAACC;YACzB,IAAI,CAACA,KAAK,GAAGA;YACb,IAAI,CAACL,IAAI,GAAG;gBACR4B,MAAM;gBACNhB,GAAG;gBACHC,GAAG;gBACHC,OAAO,IAAI,CAACpB,KAAK,CAACM,IAAI,CAACc,KAAK,GAAIT,CAAAA,MAAMS,KAAK,GAAGT,MAAMiB,YAAY,AAAD;gBAC/DP,QAAQ,IAAI,CAACrB,KAAK,CAACM,IAAI,CAACe,MAAM,GAAIV,CAAAA,MAAMU,MAAM,GAAGV,MAAMkB,aAAa,AAAD;YACvE;YAEA,OAAO;QACX;QAtFIrC,eAAe,IAAI;IACvB;AAsFJ"}

package/dist/components/stat/stat-card.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEH,mBAAmB,EAKtB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;~~AAgCtE~~,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,~~CAiDtC~~,CAAC;AAEF,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAyEtC,CAAC"}
1	+ {"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEH,mBAAmB,EAKtB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAmCtE,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAgEtC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAyEtC,CAAC"}

package/dist/components/stat/stat-card.js CHANGED Viewed

@@ -4,6 +4,9 @@ import classNames from 'classnames';
 import { BodyText, Eyebrow, Popover, Stack, Tooltip } from '@servicetitan/design-system';
 import * as Styles from './stat-card.module.less';
 import { formatValue } from '../../utils/formatters';
+import { Icon } from '@servicetitan/anvil2';
+import TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';
+import TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';
 const calculateDiff = (value, prev, percents)=>{
     const diff = (value - prev) * (percents ? 100 : 1);
     const absDiff = Math.abs(diff);
@@ -31,7 +34,11 @@ const formatDifferencePercentage = (value, isPlus)=>{
 export const StatDiff = ({ value, prev, size, format, inverted, neutral, className, diffPercentOnly = false })=>{
     const percents = format === 'percent';
     const [absDiff, diffPercent, isIncrease] = calculateDiff(value !== null && value !== void 0 ? value : 0, prev !== null && prev !== void 0 ? prev : 0, percents);
-    const diff = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
+    const diff = absDiff === 0 ? '' : /*#__PURE__*/ _jsx(Icon, {
+        svg: isIncrease ? TrendingUpSVG : TrendingDownSVG,
+        color: isIncrease ? 'green' : 'red',
+        className: "m-r-half m-t-half"
+    });
     let text = '';
     if (percents) {
         text += formatDifferencePercentage(absDiff, isIncrease);
@@ -46,19 +53,28 @@ export const StatDiff = ({ value, prev, size, format, inverted, neutral, classNa
             }
         }
     }
-    return /*#__PURE__*/ _jsxs(BodyText, {
-        className: classNames(Styles.statDiff, {
-            'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),
-            'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),
-            'c-neutral-200': !!neutral
-        }, className),
-        size: size !== null && size !== void 0 ? size : 'small',
-        "data-cy": "stat-diff-value",
+    return /*#__PURE__*/ _jsxs(Stack, {
+        className: classNames(Styles.statDiff, className),
+        justifyContent: "center",
+        alignItems: "center",
         children: [
-            /*#__PURE__*/ _jsx("span", {
-                children: diff
+            /*#__PURE__*/ _jsx(Stack.Item, {
+                children: /*#__PURE__*/ _jsx("span", {
+                    children: diff
+                })
             }),
-            value === undefined ? '\u00A0' : text
+            /*#__PURE__*/ _jsx(Stack.Item, {
+                children: /*#__PURE__*/ _jsx(BodyText, {
+                    size: size !== null && size !== void 0 ? size : 'small',
+                    "data-cy": "stat-diff-value",
+                    className: classNames({
+                        'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),
+                        'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),
+                        'c-neutral-200': !!neutral
+                    }),
+                    children: value === undefined ? '\u00A0' : text
+                })
+            })
         ]
     });
 };

package/dist/components/stat/stat-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/stat/stat-card.tsx"],"sourcesContent":["import { FC, ReactNode, useState } from 'react';\nimport classNames from 'classnames';\nimport {\n BodyText,\n BodyTextPropsStrict,\n Eyebrow,\n Popover,\n Stack,\n Tooltip,\n} from '@servicetitan/design-system';\nimport * as Styles from './stat-card.module.less';\nimport { formatValue, NumberFormatter } from '../../utils/formatters';\n\nconst calculateDiff = (\n value: number,\n prev: number,\n percents?: boolean\n): [number, number, boolean] => {\n const diff = (value - prev) * (percents ? 100 : 1);\n const absDiff = Math.abs(diff);\n let diffPercent = 0;\n\n if (percents) {\n diffPercent = diff;\n } else if (absDiff) {\n diffPercent = prev ? (100 * absDiff) / prev : 100;\n }\n\n return [absDiff, diffPercent, diff >= 0];\n};\n\nconst formatDifference = (value: number, isPlus: boolean, format: NumberFormatter): string => {\n return (isPlus ? '+' : '-') + formatValue(value, format);\n};\n\nconst formatDifferencePercentage = (value: number, isPlus: boolean): string => {\n if (!value) {\n return '';\n }\n\n return (isPlus ? '+' : '-') + formatValue(value, 'percent-100');\n};\n\ninterface StatDiffProps {\n value?: number;\n prev?: number;\n size?: BodyTextPropsStrict['size'];\n format: NumberFormatter;\n inverted?: boolean;\n neutral?: boolean;\n className?: string;\n diffPercentOnly?: boolean;\n}\n\nexport const StatDiff: FC<StatDiffProps> = ({\n value,\n prev,\n size,\n format,\n inverted,\n neutral,\n className,\n diffPercentOnly = false,\n}) => {\n const percents = format === 'percent';\n const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);\n const diff = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';\n let text = '';\n\n if (percents) {\n text += formatDifferencePercentage(absDiff, isIncrease);\n } else {\n const diffPercentage = formatDifferencePercentage(diffPercent, isIncrease);\n\n if (diffPercentOnly) {\n text += `${diffPercentage}`;\n } else {\n text += `${formatDifference(absDiff, isIncrease, format)}`;\n\n if (diffPercent !== 0) {\n text += ` (${diffPercentage})`;\n }\n }\n }\n\n return (\n <~~BodyText~~\n className={classNames(\n ~~Styles~~.~~statDiff,\~~n {\n 'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),\n 'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),\n 'c-neutral-200': !!neutral,\n }~~,\n className\n~~ )}\n ~~size={size ?? 'small'}\n data-cy=\"stat-diff-value\"\n~~ >\n ~~<span>~~{~~diff}</span>\n {~~value === undefined ? '\\u00A0' : text}\n </BodyText>\n );\n};\n\nexport interface StatCardProps {\n title: string;\n description?: string;\n popoverContent?: ReactNode;\n value?: number;\n prev?: number;\n percent?: boolean;\n money?: boolean;\n rate?: boolean;\n clean?: boolean;\n inverted?: boolean;\n neutral?: boolean;\n fill?: boolean;\n valueOnly?: boolean;\n className?: string;\n diffPercentOnly?: boolean;\n}\n\nexport const StatCard: FC<StatCardProps> = ({\n title,\n description,\n popoverContent,\n value,\n percent,\n money,\n rate,\n prev,\n clean,\n inverted,\n neutral,\n fill,\n valueOnly,\n className,\n diffPercentOnly = false,\n}) => {\n const [popoverShown, setPopoverShown] = useState(false);\n const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';\n const val = value === undefined ? '\\u00A0' : formatValue(value, format);\n\n const eyebrow = (\n <Eyebrow\n className={classNames(Styles.title, 'ta-center')}\n data-cy={`marketing-stat-${title}-title`}\n onMouseEnter={() => {\n setPopoverShown(true);\n }}\n >\n {title}\n </Eyebrow>\n );\n\n return (\n <Stack\n direction=\"column\"\n alignItems=\"center\"\n className={classNames(\n 'p-y-3',\n {\n 'bg-white border-radius-2 border': !clean,\n 'flex-grow-1 flex-basis-0': fill,\n },\n className\n )}\n onMouseLeave={() => setPopoverShown(false)}\n >\n {popoverContent ? (\n <Popover open={popoverShown} trigger={eyebrow}>\n {popoverContent}\n </Popover>\n ) : description ? (\n <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>\n {eyebrow}\n </Tooltip>\n ) : (\n eyebrow\n )}\n <BodyText className=\"fs-6-i ff-display\" data-cy={`marketing-stat-${title}-value`}>\n {val}\n </BodyText>\n {!valueOnly && (\n <StatDiff\n value={value}\n prev={prev}\n format={format}\n inverted={inverted}\n neutral={neutral}\n diffPercentOnly={diffPercentOnly}\n />\n )}\n </Stack>\n );\n};\n"],"names":["useState","classNames","BodyText","Eyebrow","Popover","Stack","Tooltip","Styles","formatValue","calculateDiff","value","prev","percents","diff","absDiff","Math","abs","diffPercent","formatDifference","isPlus","format","formatDifferencePercentage","StatDiff","size","inverted","neutral","className","diffPercentOnly","isIncrease","text","diffPercentage","statDiff","~~data-cy~~","span","undefined","StatCard","title","description","popoverContent","percent","money","rate","clean","fill","valueOnly","popoverShown","setPopoverShown","val","eyebrow","onMouseEnter","direction","~~alignItems","~~onMouseLeave","open","trigger"],"mappings":";AAAA,SAAwBA,QAAQ,QAAQ,QAAQ;AAChD,OAAOC,gBAAgB,aAAa;AACpC,SACIC,QAAQ,EAERC,OAAO,EACPC,OAAO,EACPC,KAAK,EACLC,OAAO,QACJ,8BAA8B;AACrC,YAAYC,YAAY,0BAA0B;AAClD,SAASC,WAAW,QAAyB,yBAAyB;~~AAEtE~~,MAAMC,gBAAgB,CAClBC,OACAC,MACAC;IAEA,MAAMC,OAAO,AAACH,CAAAA,QAAQC,IAAG,IAAMC,CAAAA,WAAW,MAAM,CAAA;IAChD,MAAME,UAAUC,KAAKC,GAAG,CAACH;IACzB,IAAII,cAAc;IAElB,IAAIL,UAAU;QACVK,cAAcJ;IAClB,OAAO,IAAIC,SAAS;QAChBG,cAAcN,OAAO,AAAC,MAAMG,UAAWH,OAAO;IAClD;IAEA,OAAO;QAACG;QAASG;QAAaJ,QAAQ;KAAE;AAC5C;AAEA,MAAMK,mBAAmB,CAACR,OAAeS,QAAiBC;IACtD,OAAO,AAACD,CAAAA,SAAS,MAAM,GAAE,~~IAAKX~~,~~YAAYE~~,OAAOU;AACrD;AAEA,MAAMC,6BAA6B,CAACX,OAAeS;IAC/C,IAAI,CAACT,OAAO;QACR,OAAO;IACX;IAEA,OAAO,AAACS,CAAAA,SAAS,MAAM,GAAE,~~IAAKX~~,~~YAAYE~~,OAAO;AACrD;AAaA,OAAO,MAAMY,WAA8B,CAAC,EACxCZ,KAAK,EACLC,IAAI,EACJY,IAAI,EACJH,MAAM,EACNI,QAAQ,EACRC,OAAO,EACPC,SAAS,EACTC,kBAAkB,KAAK,EAC1B;IACG,MAAMf,WAAWQ,WAAW;IAC5B,MAAM,CAACN,SAASG,aAAaW,WAAW,GAAGnB,cAAcC,kBAAAA,mBAAAA,QAAS,GAAGC,iBAAAA,kBAAAA,OAAQ,GAAGC;IAChF,MAAMC,~~OAAOC~~,YAAY,~~IAAI~~,~~KAAKc~~,aAAa,~~OAAO~~;~~IACtD~~,~~IAAIC~~,OAAO;IAEX,~~IAAIjB~~,UAAU;~~QACViB~~,~~QAAQR~~,2BAA2BP,SAASc;IAChD,OAAO;QACH,~~MAAME~~,~~iBAAiBT~~,2BAA2BJ,aAAaW;QAE/D,IAAID,iBAAiB;~~YACjBE~~,QAAQ,GAAGC,gBAAgB;QAC/B,OAAO;YACHD,QAAQ,~~GAAGX~~,iBAAiBJ,SAASc,YAAYR,SAAS;YAE1D,IAAIH,gBAAgB,GAAG;~~gBACnBY~~,QAAQ,CAAC,EAAE,EAAEC,eAAe,CAAC,CAAC;YAClC;QACJ;IACJ;IAEA,qBACI,~~MAAC5B~~;QACGwB,~~WAAWzB~~,~~WACPM~~,~~OAAOwB~~,QAAQ,~~EACf~~;~~YACI~~,aAAa,~~CAACN~~,WAAYD,CAAAA,WAAWI,aAAa,CAACA,UAAS;~~YAC5D~~,eAAe,CAACH,WAAYD,CAAAA,WAAW,CAACI,aAAaA,UAAS;~~YAC9D~~,iBAAiB,CAAC,CAACH;~~QACvB,GACAC~~;~~QAEJH~~,~~MAAMA~~,~~iBAAAA,kBAAAA,OAAQ;QACdS,WAAQ;;0BAER,KAACC;0BAAMpB;;YACNH,UAAUwB,~~YAAY,~~WAAWL;;;AAG9C~~,EAAE;AAoBF,OAAO,~~MAAMM~~,WAA8B,CAAC,EACxCC,KAAK,EACLC,WAAW,EACXC,cAAc,~~EACd5B~~,KAAK,~~EACL6B~~,OAAO,EACPC,KAAK,EACLC,IAAI,~~EACJ9B~~,IAAI,~~EACJ+B~~,KAAK,~~EACLlB~~,QAAQ,EACRC,OAAO,~~EACPkB~~,IAAI,EACJC,SAAS,~~EACTlB~~,SAAS,EACTC,kBAAkB,KAAK,EAC1B;IACG,MAAM,~~CAACkB~~,cAAcC,gBAAgB,~~GAAG9C~~,SAAS;IACjD,~~MAAMoB~~,~~SAASoB~~,QAAQ,UAAUD,UAAU,YAAYE,OAAO,SAAS;IACvE,MAAMM,~~MAAMrC~~,~~UAAUwB~~,YAAY,~~WAAW1B~~,~~YAAYE~~,OAAOU;IAEhE,~~MAAM4B~~,wBACF,~~KAAC7C~~;~~QACGuB~~,~~WAAWzB~~,WAAWM,~~OAAO6B~~,KAAK,EAAE;~~QACpCJ~~,WAAS,CAAC,eAAe,~~EAAEI~~,MAAM,MAAM,CAAC;QACxCa,cAAc;YACVH,gBAAgB;QACpB;kBAECV;;IAIT,qBACI,~~MAAC/B~~;~~QACG6C~~,WAAU;~~QACVC~~,YAAW;~~QACXzB~~,~~WAAWzB~~,WACP,SACA;YACI,mCAAmC,~~CAACyC~~;YACpC,4BAA4BC;QAChC,~~GACAjB~~;~~QAEJ0B~~,cAAc,~~IAAMN~~,gBAAgB;;YAEnCR,+BACG,~~KAAClC~~;~~gBAAQiD~~,~~MAAMR~~;~~gBAAcS~~,~~SAASN~~;0BACjCV;iBAELD,4BACA,~~KAAC/B~~;~~gBAAQuB~~,~~MAAMQ~~;~~gBAAaL~~,WAAS,CAAC,eAAe,~~EAAEI~~,MAAM,QAAQ,CAAC;0BACjEY;iBAGLA;0BAEJ,~~KAAC9C~~;~~gBAASwB~~,WAAU;~~gBAAoBM~~,WAAS,CAAC,eAAe,~~EAAEI~~,MAAM,MAAM,CAAC;0BAC3EW;;YAEJ,CAACH,2BACE,~~KAACtB~~;gBACGZ,OAAOA;gBACPC,MAAMA;gBACNS,QAAQA;gBACRI,UAAUA;gBACVC,SAASA;gBACTE,iBAAiBA;;;;AAKrC,EAAE"}
1	+ {"version":3,"sources":["../../../src/components/stat/stat-card.tsx"],"sourcesContent":["import { FC, ReactNode, useState } from 'react';\nimport classNames from 'classnames';\nimport {\n BodyText,\n BodyTextPropsStrict,\n Eyebrow,\n Popover,\n Stack,\n Tooltip,\n} from '@servicetitan/design-system';\nimport * as Styles from './stat-card.module.less';\nimport { formatValue, NumberFormatter } from '../../utils/formatters';\nimport { Icon } from '@servicetitan/anvil2';\nimport TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';\nimport TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';\n\nconst calculateDiff = (\n value: number,\n prev: number,\n percents?: boolean\n): [number, number, boolean] => {\n const diff = (value - prev) * (percents ? 100 : 1);\n const absDiff = Math.abs(diff);\n let diffPercent = 0;\n\n if (percents) {\n diffPercent = diff;\n } else if (absDiff) {\n diffPercent = prev ? (100 * absDiff) / prev : 100;\n }\n\n return [absDiff, diffPercent, diff >= 0];\n};\n\nconst formatDifference = (value: number, isPlus: boolean, format: NumberFormatter): string => {\n return (isPlus ? '+' : '-') + formatValue(value, format);\n};\n\nconst formatDifferencePercentage = (value: number, isPlus: boolean): string => {\n if (!value) {\n return '';\n }\n\n return (isPlus ? '+' : '-') + formatValue(value, 'percent-100');\n};\n\ninterface StatDiffProps {\n value?: number;\n prev?: number;\n size?: BodyTextPropsStrict['size'];\n format: NumberFormatter;\n inverted?: boolean;\n neutral?: boolean;\n className?: string;\n diffPercentOnly?: boolean;\n}\n\nexport const StatDiff: FC<StatDiffProps> = ({\n value,\n prev,\n size,\n format,\n inverted,\n neutral,\n className,\n diffPercentOnly = false,\n}) => {\n const percents = format === 'percent';\n const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);\n const diff =\n absDiff === 0 ? (\n ''\n ) : (\n <Icon\n svg={isIncrease ? TrendingUpSVG : TrendingDownSVG}\n color={isIncrease ? 'green' : 'red'}\n className=\"m-r-half m-t-half\"\n />\n );\n let text = '';\n\n if (percents) {\n text += formatDifferencePercentage(absDiff, isIncrease);\n } else {\n const diffPercentage = formatDifferencePercentage(diffPercent, isIncrease);\n\n if (diffPercentOnly) {\n text += `${diffPercentage}`;\n } else {\n text += `${formatDifference(absDiff, isIncrease, format)}`;\n\n if (diffPercent !== 0) {\n text += ` (${diffPercentage})`;\n }\n }\n }\n\n return (\n <Stack\n className={classNames(Styles.statDiff, className)}\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n <Stack.Item>\n <span>{diff}</span>\n </Stack.Item>\n <Stack.Item>\n <BodyText\n size={size ?? 'small'}\n data-cy=\"stat-diff-value\"\n className={classNames({\n 'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),\n 'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),\n 'c-neutral-200': !!neutral,\n })}\n >\n {value === undefined ? '\\u00A0' : text}\n </BodyText>\n </Stack.Item>\n </Stack>\n );\n};\n\nexport interface StatCardProps {\n title: string;\n description?: string;\n popoverContent?: ReactNode;\n value?: number;\n prev?: number;\n percent?: boolean;\n money?: boolean;\n rate?: boolean;\n clean?: boolean;\n inverted?: boolean;\n neutral?: boolean;\n fill?: boolean;\n valueOnly?: boolean;\n className?: string;\n diffPercentOnly?: boolean;\n}\n\nexport const StatCard: FC<StatCardProps> = ({\n title,\n description,\n popoverContent,\n value,\n percent,\n money,\n rate,\n prev,\n clean,\n inverted,\n neutral,\n fill,\n valueOnly,\n className,\n diffPercentOnly = false,\n}) => {\n const [popoverShown, setPopoverShown] = useState(false);\n const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';\n const val = value === undefined ? '\\u00A0' : formatValue(value, format);\n\n const eyebrow = (\n <Eyebrow\n className={classNames(Styles.title, 'ta-center')}\n data-cy={`marketing-stat-${title}-title`}\n onMouseEnter={() => {\n setPopoverShown(true);\n }}\n >\n {title}\n </Eyebrow>\n );\n\n return (\n <Stack\n direction=\"column\"\n alignItems=\"center\"\n className={classNames(\n 'p-y-3',\n {\n 'bg-white border-radius-2 border': !clean,\n 'flex-grow-1 flex-basis-0': fill,\n },\n className\n )}\n onMouseLeave={() => setPopoverShown(false)}\n >\n {popoverContent ? (\n <Popover open={popoverShown} trigger={eyebrow}>\n {popoverContent}\n </Popover>\n ) : description ? (\n <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>\n {eyebrow}\n </Tooltip>\n ) : (\n eyebrow\n )}\n <BodyText className=\"fs-6-i ff-display\" data-cy={`marketing-stat-${title}-value`}>\n {val}\n </BodyText>\n {!valueOnly && (\n <StatDiff\n value={value}\n prev={prev}\n format={format}\n inverted={inverted}\n neutral={neutral}\n diffPercentOnly={diffPercentOnly}\n />\n )}\n </Stack>\n );\n};\n"],"names":["useState","classNames","BodyText","Eyebrow","Popover","Stack","Tooltip","Styles","formatValue","Icon","TrendingUpSVG","TrendingDownSVG","calculateDiff","value","prev","percents","diff","absDiff","Math","abs","diffPercent","formatDifference","isPlus","format","formatDifferencePercentage","StatDiff","size","inverted","neutral","className","diffPercentOnly","isIncrease","svg","color","text","diffPercentage","statDiff","justifyContent","alignItems","Item","span","data-cy","undefined","StatCard","title","description","popoverContent","percent","money","rate","clean","fill","valueOnly","popoverShown","setPopoverShown","val","eyebrow","onMouseEnter","direction","onMouseLeave","open","trigger"],"mappings":"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"}

package/dist/utils/date/date-range-picker-state.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
-import { DateRangePickerOption, DateRangePickerOptions } from './date-range-picker-options';
-import { DateRange } from './date';
+import type { DateRangePickerOption } from './date-range-picker-options';
+import type { DateRange } from './date';
+import { DateRangePickerOptions } from './date-range-picker-options';
 interface DateRangePickerStateConfig {
     defaultValue?: DateRange;
 }

package/dist/utils/date/date-range-picker-state.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-range-picker-state.d.ts","sourceRoot":"","sources":["../../../src/utils/date/date-range-picker-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,~~sBAAsB,EAAE,~~MAAM,6BAA6B,CAAC;~~AAC5F~~,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;~~AAGnC~~,UAAU,0BAA0B;IAChC,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,wBAAwB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,+BAA+B,CAAC,UAAU,SAAS,MAAM,CACtE,SAAQ,wBAAwB;IAChC,QAAQ,CAAC,OAAO,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;IACrD,QAAQ,CAAC,cAAc,CAAC,EAAE,qBAAqB,CAAC,UAAU,CAAC,CAAC;CAC/D;AAED,qBAAa,oBAAoB,CAAC,UAAU,SAAS,MAAM,GAAG,KAAK;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAE9B,QAAQ,CAAC,OAAO,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;IAEtD,IAAc,cAAc,IAAI,qBAAqB,CAAC,UAAU,CAAC,GAAG,SAAS,CAM5E;gBAEW,MAAM,CAAC,EAAE,0BAA0B,EAAE,OAAO,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IAY7F,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,0BAA0B,GAAG,wBAAwB;IAI5E,MAAM,CAAC,iBAAiB,CAAC,UAAU,SAAS,MAAM,EAC9C,OAAO,EAAE,sBAAsB,CAAC,UAAU,CAAC,EAC3C,MAAM,CAAC,EAAE,0BAA0B,GACpC,+BAA+B,CAAC,UAAU,CAAC;IAOtC,QAAQ,GAAI,MAAM,SAAS,UAEjC;CACL"}
1	+ {"version":3,"file":"date-range-picker-state.d.ts","sourceRoot":"","sources":["../../../src/utils/date/date-range-picker-state.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAGrE,UAAU,0BAA0B;IAChC,YAAY,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,wBAAwB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,+BAA+B,CAAC,UAAU,SAAS,MAAM,CACtE,SAAQ,wBAAwB;IAChC,QAAQ,CAAC,OAAO,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;IACrD,QAAQ,CAAC,cAAc,CAAC,EAAE,qBAAqB,CAAC,UAAU,CAAC,CAAC;CAC/D;AAED,qBAAa,oBAAoB,CAAC,UAAU,SAAS,MAAM,GAAG,KAAK;IACnD,KAAK,CAAC,EAAE,SAAS,CAAC;IAE9B,QAAQ,CAAC,OAAO,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;IAEtD,IAAc,cAAc,IAAI,qBAAqB,CAAC,UAAU,CAAC,GAAG,SAAS,CAM5E;gBAEW,MAAM,CAAC,EAAE,0BAA0B,EAAE,OAAO,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC;IAY7F,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,0BAA0B,GAAG,wBAAwB;IAI5E,MAAM,CAAC,iBAAiB,CAAC,UAAU,SAAS,MAAM,EAC9C,OAAO,EAAE,sBAAsB,CAAC,UAAU,CAAC,EAC3C,MAAM,CAAC,EAAE,0BAA0B,GACpC,+BAA+B,CAAC,UAAU,CAAC;IAOtC,QAAQ,GAAI,MAAM,SAAS,UAEjC;CACL"}

package/dist/utils/date/date-range-picker-state.js CHANGED Viewed

@@ -20,7 +20,6 @@ function _ts_decorate(decorators, target, key, desc) {
 function _ts_metadata(k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
-import { DateRange } from './date';
 import { action, computed, makeObservable, observable } from 'mobx';
 export class DateRangePickerState {
     get selectedOption() {

package/dist/utils/date/date-range-picker-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/utils/date/date-range-picker-state.ts"],"sourcesContent":["import { DateRangePickerOption, ~~DateRangePickerOptions~~ } from './date-range-picker-options';\nimport { DateRange } from './date';\nimport { action, computed, makeObservable, observable } from 'mobx';\n\ninterface DateRangePickerStateConfig {\n defaultValue?: DateRange;\n}\n\nexport interface DateRangePickerStateType {\n value?: DateRange;\n onChange(val?: DateRange): void;\n}\n\nexport interface DateRangePickerOptionsStateType<OptionKeys extends string>\n extends DateRangePickerStateType {\n readonly options: DateRangePickerOptions<OptionKeys>;\n readonly selectedOption?: DateRangePickerOption<OptionKeys>;\n}\n\nexport class DateRangePickerState<OptionKeys extends string = never> {\n @observable value?: DateRange;\n\n readonly options?: DateRangePickerOptions<OptionKeys>;\n\n @computed get selectedOption(): DateRangePickerOption<OptionKeys> \| undefined {\n if (!this.value \|\| !this.options) {\n return undefined;\n }\n\n return this.options.findOption(this.value);\n }\n\n constructor(config?: DateRangePickerStateConfig, options?: DateRangePickerOptions<OptionKeys>) {\n makeObservable(this);\n\n this.options = options;\n\n if (config?.defaultValue) {\n this.value = config.defaultValue;\n } else if (this.options?.defaultOption) {\n this.value = this.options.findOption(this.options.defaultOption)?.value;\n }\n }\n\n static create(config?: DateRangePickerStateConfig): DateRangePickerStateType {\n return new DateRangePickerState(config);\n }\n\n static createWithOptions<OptionKeys extends string>(\n options: DateRangePickerOptions<OptionKeys>,\n config?: DateRangePickerStateConfig\n ): DateRangePickerOptionsStateType<OptionKeys> {\n return new DateRangePickerState(\n config,\n options\n ) as DateRangePickerOptionsStateType<OptionKeys>;\n }\n\n @action onChange = (val?: DateRange) => {\n this.value = val;\n };\n}\n"],"names":["~~DateRange","~~action","computed","makeObservable","observable","DateRangePickerState","selectedOption","value","options","undefined","findOption","create","config","createWithOptions","onChange","val","defaultValue","defaultOption"],"mappings":";;;;;;;;;;;;;;;;;;;;;;~~AACA~~,SAASA,~~SAAS,QAAQ,SAAS;AACnC,SAASC,~~MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,UAAU,QAAQ,OAAO;AAiBpE,OAAO,MAAMC;IAKT,IAAcC,iBAAgE;QAC1E,IAAI,CAAC,IAAI,CAACC,KAAK,IAAI,CAAC,IAAI,CAACC,OAAO,EAAE;YAC9B,OAAOC;QACX;QAEA,OAAO,IAAI,CAACD,OAAO,CAACE,UAAU,CAAC,IAAI,CAACH,KAAK;IAC7C;IAcA,OAAOI,OAAOC,MAAmC,EAA4B;QACzE,OAAO,IAAIP,qBAAqBO;IACpC;IAEA,OAAOC,kBACHL,OAA2C,EAC3CI,MAAmC,EACQ;QAC3C,OAAO,IAAIP,qBACPO,QACAJ;IAER;IAxBA,YAAYI,MAAmC,EAAEJ,OAA4C,CAAE;YAOhF;QAnBf,uBAAYD,SAAZ,KAAA;QAEA,uBAASC,WAAT,KAAA;QAoCA,uBAAQM,YAAW,CAACC;YAChB,IAAI,CAACR,KAAK,GAAGQ;QACjB;QA3BIZ,eAAe,IAAI;QAEnB,IAAI,CAACK,OAAO,GAAGA;QAEf,IAAII,mBAAAA,6BAAAA,OAAQI,YAAY,EAAE;YACtB,IAAI,CAACT,KAAK,GAAGK,OAAOI,YAAY;QACpC,OAAO,KAAI,gBAAA,IAAI,CAACR,OAAO,cAAZ,oCAAA,cAAcS,aAAa,EAAE;gBACvB;YAAb,IAAI,CAACV,KAAK,IAAG,2BAAA,IAAI,CAACC,OAAO,CAACE,UAAU,CAAC,IAAI,CAACF,OAAO,CAACS,aAAa,eAAlD,+CAAA,yBAAqDV,KAAK;QAC3E;IACJ;AAmBJ"}
1	+ {"version":3,"sources":["../../../src/utils/date/date-range-picker-state.ts"],"sourcesContent":["import type { DateRangePickerOption } from './date-range-picker-options';\nimport type { DateRange } from './date';\nimport { DateRangePickerOptions } from './date-range-picker-options';\nimport { action, computed, makeObservable, observable } from 'mobx';\n\ninterface DateRangePickerStateConfig {\n defaultValue?: DateRange;\n}\n\nexport interface DateRangePickerStateType {\n value?: DateRange;\n onChange(val?: DateRange): void;\n}\n\nexport interface DateRangePickerOptionsStateType<OptionKeys extends string>\n extends DateRangePickerStateType {\n readonly options: DateRangePickerOptions<OptionKeys>;\n readonly selectedOption?: DateRangePickerOption<OptionKeys>;\n}\n\nexport class DateRangePickerState<OptionKeys extends string = never> {\n @observable value?: DateRange;\n\n readonly options?: DateRangePickerOptions<OptionKeys>;\n\n @computed get selectedOption(): DateRangePickerOption<OptionKeys> \| undefined {\n if (!this.value \|\| !this.options) {\n return undefined;\n }\n\n return this.options.findOption(this.value);\n }\n\n constructor(config?: DateRangePickerStateConfig, options?: DateRangePickerOptions<OptionKeys>) {\n makeObservable(this);\n\n this.options = options;\n\n if (config?.defaultValue) {\n this.value = config.defaultValue;\n } else if (this.options?.defaultOption) {\n this.value = this.options.findOption(this.options.defaultOption)?.value;\n }\n }\n\n static create(config?: DateRangePickerStateConfig): DateRangePickerStateType {\n return new DateRangePickerState(config);\n }\n\n static createWithOptions<OptionKeys extends string>(\n options: DateRangePickerOptions<OptionKeys>,\n config?: DateRangePickerStateConfig\n ): DateRangePickerOptionsStateType<OptionKeys> {\n return new DateRangePickerState(\n config,\n options\n ) as DateRangePickerOptionsStateType<OptionKeys>;\n }\n\n @action onChange = (val?: DateRange) => {\n this.value = val;\n };\n}\n"],"names":["action","computed","makeObservable","observable","DateRangePickerState","selectedOption","value","options","undefined","findOption","create","config","createWithOptions","onChange","val","defaultValue","defaultOption"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAGA,SAASA,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,UAAU,QAAQ,OAAO;AAiBpE,OAAO,MAAMC;IAKT,IAAcC,iBAAgE;QAC1E,IAAI,CAAC,IAAI,CAACC,KAAK,IAAI,CAAC,IAAI,CAACC,OAAO,EAAE;YAC9B,OAAOC;QACX;QAEA,OAAO,IAAI,CAACD,OAAO,CAACE,UAAU,CAAC,IAAI,CAACH,KAAK;IAC7C;IAcA,OAAOI,OAAOC,MAAmC,EAA4B;QACzE,OAAO,IAAIP,qBAAqBO;IACpC;IAEA,OAAOC,kBACHL,OAA2C,EAC3CI,MAAmC,EACQ;QAC3C,OAAO,IAAIP,qBACPO,QACAJ;IAER;IAxBA,YAAYI,MAAmC,EAAEJ,OAA4C,CAAE;YAOhF;QAnBf,uBAAYD,SAAZ,KAAA;QAEA,uBAASC,WAAT,KAAA;QAoCA,uBAAQM,YAAW,CAACC;YAChB,IAAI,CAACR,KAAK,GAAGQ;QACjB;QA3BIZ,eAAe,IAAI;QAEnB,IAAI,CAACK,OAAO,GAAGA;QAEf,IAAII,mBAAAA,6BAAAA,OAAQI,YAAY,EAAE;YACtB,IAAI,CAACT,KAAK,GAAGK,OAAOI,YAAY;QACpC,OAAO,KAAI,gBAAA,IAAI,CAACR,OAAO,cAAZ,oCAAA,cAAcS,aAAa,EAAE;gBACvB;YAAb,IAAI,CAACV,KAAK,IAAG,2BAAA,IAAI,CAACC,OAAO,CAACE,UAAU,CAAC,IAAI,CAACF,OAAO,CAACS,aAAa,eAAlD,+CAAA,yBAAqDV,KAAK;QAC3E;IACJ;AAmBJ"}