@servicetitan/marketing-ui 1.9.0 → 1.10.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.
- package/dist/components/charts/pie-chart/components/pie-chart.d.ts.map +1 -1
- package/dist/components/charts/pie-chart/components/pie-chart.js +3 -3
- package/dist/components/charts/pie-chart/components/pie-chart.js.map +1 -1
- package/dist/components/charts/pie-chart/components/pie.d.ts +3 -0
- package/dist/components/charts/pie-chart/components/pie.d.ts.map +1 -1
- package/dist/components/charts/pie-chart/components/pie.js +10 -11
- package/dist/components/charts/pie-chart/components/pie.js.map +1 -1
- package/dist/components/charts/pie-chart/pie-chart.stories.d.ts +1 -0
- package/dist/components/charts/pie-chart/pie-chart.stories.d.ts.map +1 -1
- package/dist/components/charts/pie-chart/pie-chart.stories.js +7 -1
- package/dist/components/charts/pie-chart/pie-chart.stories.js.map +1 -1
- package/dist/components/charts/pie-chart/utils/const.d.ts +2 -2
- package/dist/components/charts/pie-chart/utils/const.d.ts.map +1 -1
- package/dist/components/charts/pie-chart/utils/const.js +9 -7
- package/dist/components/charts/pie-chart/utils/const.js.map +1 -1
- package/dist/components/charts/pie-chart/utils/interface.d.ts +3 -0
- package/dist/components/charts/pie-chart/utils/interface.d.ts.map +1 -1
- package/dist/components/stat/stat-card.d.ts +2 -0
- package/dist/components/stat/stat-card.d.ts.map +1 -1
- package/dist/components/stat/stat-card.js +12 -6
- package/dist/components/stat/stat-card.js.map +1 -1
- package/dist/components/stat/stat-cards.stories.d.ts +1 -0
- package/dist/components/stat/stat-cards.stories.d.ts.map +1 -1
- package/dist/components/stat/stat-cards.stories.js +2 -1
- package/dist/components/stat/stat-cards.stories.js.map +1 -1
- package/package.json +2 -2
- package/src/components/charts/pie-chart/components/pie-chart.tsx +24 -5
- package/src/components/charts/pie-chart/components/pie.tsx +34 -14
- package/src/components/charts/pie-chart/pie-chart.stories.tsx +20 -0
- package/src/components/charts/pie-chart/utils/const.ts +11 -6
- package/src/components/charts/pie-chart/utils/interface.ts +3 -0
- package/src/components/stat/stat-card.tsx +14 -3
- package/src/components/stat/stat-cards.stories.tsx +3 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAY,MAAM,oBAAoB,CAAC;AA2B7D,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAY,MAAM,oBAAoB,CAAC;AA2B7D,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA6BtC,CAAC"}
|
|
@@ -33,10 +33,10 @@ const Styles = __importStar(require("./pie-chart.module.less"));
|
|
|
33
33
|
const PieTitles = ({ title, pieces }) => {
|
|
34
34
|
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)(Styles.titleWrapper, 'of-y-auto p-t-2') }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [!!pieces.length && ((0, jsx_runtime_1.jsx)(design_system_1.Stack.Item, Object.assign({ className: "p-l-1 p-b-1" }, { children: (0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ bold: true }, { children: title }), void 0) }), void 0)), pieces.map(piece => ((0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(design_system_1.StatusLight, { color: piece.color }, void 0), (0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ className: "c-neutral-90", size: "medium" }, { children: piece.title }), void 0)] }), piece.title)))] }, void 0) }), void 0));
|
|
35
35
|
};
|
|
36
|
-
const PieChart = ({ height, width, title, sections, popoverContent }) => {
|
|
37
|
-
const pieces = (0, react_1.useMemo)(() => (0, const_1.convertSessionsToPieces)(sections), [sections]);
|
|
36
|
+
const PieChart = ({ height, width, title, sections, popoverContent, content, radiusRelative = const_1.radiusRelativeDefault, hideTitles = false, }) => {
|
|
37
|
+
const pieces = (0, react_1.useMemo)(() => (0, const_1.convertSessionsToPieces)(sections, radiusRelative), [sections, radiusRelative]);
|
|
38
38
|
const style = (0, react_1.useMemo)(() => ({ height, width }), [height, width]);
|
|
39
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "d-f flex-row", style: style }, { children: [(0, jsx_runtime_1.jsx)(pie_1.Pie, { title: title, pieces: pieces, popoverContent: popoverContent }, void 0), (0, jsx_runtime_1.jsx)(PieTitles, { title: title, pieces: pieces }, void 0)] }), void 0));
|
|
39
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "d-f flex-row", style: style }, { children: [(0, jsx_runtime_1.jsx)(pie_1.Pie, { title: title, pieces: pieces, content: content, popoverContent: popoverContent, radiusRelative: radiusRelative, hideTitles: hideTitles }, void 0), !hideTitles && (0, jsx_runtime_1.jsx)(PieTitles, { title: title, pieces: pieces }, void 0)] }), void 0));
|
|
40
40
|
};
|
|
41
41
|
exports.PieChart = PieChart;
|
|
42
42
|
//# sourceMappingURL=pie-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAoC;AACpC,4DAAoC;AACpC,+DAA2E;AAE3E,
|
|
1
|
+
{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAAoC;AACpC,4DAAoC;AACpC,+DAA2E;AAE3E,0CAAgF;AAChF,+BAA4B;AAC5B,gEAAkD;AAElD,MAAM,SAAS,GAA8C,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IAC/E,OAAO,CACH,8CAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAAC,gBAC9D,4CACK,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAChB,uBAAC,qBAAK,CAAC,IAAI,kBAAC,SAAS,EAAC,aAAa,gBAC/B,uBAAC,wBAAQ,kBAAC,IAAI,sBAAE,KAAK,YAAY,YACxB,CAChB,EACA,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACjB,wBAAC,qBAAK,kBAAmB,UAAU,EAAC,QAAQ,iBACxC,uBAAC,2BAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,WAAI,EACnC,uBAAC,wBAAQ,kBAAC,SAAS,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,gBAC3C,KAAK,CAAC,KAAK,YACL,MAJH,KAAK,CAAC,KAAK,CAKf,CACX,CAAC,YACA,YACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEK,MAAM,QAAQ,GAAsB,CAAC,EACxC,MAAM,EACN,KAAK,EACL,KAAK,EACL,QAAQ,EACR,cAAc,EACd,OAAO,EACP,cAAc,GAAG,6BAAqB,EACtC,UAAU,GAAG,KAAK,GACrB,EAAE,EAAE;IACD,MAAM,MAAM,GAAG,IAAA,eAAO,EAClB,GAAG,EAAE,CAAC,IAAA,+BAAuB,EAAC,QAAQ,EAAE,cAAc,CAAC,EACvD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC7B,CAAC;IACF,MAAM,KAAK,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAElE,OAAO,CACH,+CAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK,iBACtC,uBAAC,SAAG,IACA,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,WACxB,EACD,CAAC,UAAU,IAAI,uBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,WAAI,aACzD,CACT,CAAC;AACN,CAAC,CAAC;AA7BW,QAAA,QAAQ,YA6BnB"}
|
|
@@ -3,6 +3,9 @@ import { PieChartPopoverContentType, PiePiece } from '../utils/interface';
|
|
|
3
3
|
export declare const Pie: FC<{
|
|
4
4
|
title: string;
|
|
5
5
|
pieces: PiePiece[];
|
|
6
|
+
radiusRelative: number;
|
|
7
|
+
content?: FC;
|
|
6
8
|
popoverContent?: PieChartPopoverContentType;
|
|
9
|
+
hideTitles?: boolean;
|
|
7
10
|
}>;
|
|
8
11
|
//# sourceMappingURL=pie.d.ts.map
|
|
@@ -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;
|
|
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,MAAM,oBAAoB,CAAC;AAsG1E,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;CACxB,CAkHA,CAAC"}
|
|
@@ -9,7 +9,6 @@ const react_1 = require("react");
|
|
|
9
9
|
const tokens_1 = __importDefault(require("@servicetitan/tokens"));
|
|
10
10
|
const design_system_1 = require("@servicetitan/design-system");
|
|
11
11
|
const use_client_rect_1 = require("../../../../utils/use-client-rect");
|
|
12
|
-
const const_1 = require("../utils/const");
|
|
13
12
|
const chartPadding = 8;
|
|
14
13
|
const px = (value) => `${value !== null && value !== void 0 ? value : 0}px`;
|
|
15
14
|
const PiePieceSvg = ({ piece: { id, color, opacity, points, text, path }, selected }) => points && path ? ((0, jsx_runtime_1.jsxs)("g", Object.assign({ id: id }, { children: [!!selected && ((0, jsx_runtime_1.jsx)("path", { d: path, fill: tokens_1.default.colorWhite, stroke: tokens_1.default.colorBlue200, strokeOpacity: "50%", strokeWidth: "3", paintOrder: "stroke" }, void 0)), (0, jsx_runtime_1.jsx)("path", { d: path, fill: color }, void 0), (0, jsx_runtime_1.jsx)("svg", Object.assign({ x: points[4][0] - 10, y: points[4][1] - (points[4][1] > 0 ? 3 : 1), width: 20, height: 6 }, { children: (0, jsx_runtime_1.jsx)("text", Object.assign({ x: "50%", y: "50%", fontSize: 4, fontWeight: 600, fill: opacity > 0.3 ? tokens_1.default.colorWhite : tokens_1.default.colorBlack, dominantBaseline: "middle", textAnchor: "middle" }, { children: text }), void 0) }), void 0)] }), void 0)) : null;
|
|
@@ -18,9 +17,9 @@ const PiePieceHover = ({ piece, onMouse }) => {
|
|
|
18
17
|
const onMouseLeave = (0, react_1.useCallback)(() => onMouse(piece.id, false), [onMouse, piece.id]);
|
|
19
18
|
return ((0, jsx_runtime_1.jsx)("path", { d: piece.path, fill: "white", opacity: "0", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, void 0));
|
|
20
19
|
};
|
|
21
|
-
const PieSvg = ({ pieces, selectedIndex }) => ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ className: "position-absolute", style: { inset: px(chartPadding) }, viewBox: `-${
|
|
22
|
-
const PieSvgHover = ({ pieces, onMouse }) => ((0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "position-absolute z-global-nav", style: { inset: px(chartPadding) }, viewBox: `-${
|
|
23
|
-
const Pie = ({ pieces, popoverContent: PopoverContent }) => {
|
|
20
|
+
const PieSvg = ({ pieces, selectedIndex, radiusRelative }) => ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ className: "position-absolute", style: { inset: px(chartPadding) }, viewBox: `-${radiusRelative} -${radiusRelative} ` + `${radiusRelative * 2} ${radiusRelative * 2}` }, { children: [pieces.map((p, index) => p.path ? (0, jsx_runtime_1.jsx)(PiePieceSvg, { piece: p, selected: index === selectedIndex }, p.id) : null), selectedIndex >= 0 && selectedIndex < pieces.length && ((0, jsx_runtime_1.jsx)("use", { xlinkHref: pieces[selectedIndex].id }, void 0))] }), void 0));
|
|
21
|
+
const PieSvgHover = ({ pieces, onMouse, radiusRelative }) => ((0, jsx_runtime_1.jsx)("svg", Object.assign({ className: "position-absolute z-global-nav", style: { inset: px(chartPadding) }, viewBox: `-${radiusRelative} -${radiusRelative} ` + `${radiusRelative * 2} ${radiusRelative * 2}` }, { children: pieces.map(p => p.path ? (0, jsx_runtime_1.jsx)(PiePieceHover, { piece: p, onMouse: onMouse }, p.id) : null) }), void 0));
|
|
22
|
+
const Pie = ({ pieces, popoverContent: PopoverContent, content: PieContent, radiusRelative, hideTitles, }) => {
|
|
24
23
|
const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(-1);
|
|
25
24
|
const [rect, ref] = (0, use_client_rect_1.useClientRect)();
|
|
26
25
|
const onMouse = (0, react_1.useCallback)((id, isEnter) => {
|
|
@@ -43,20 +42,20 @@ const Pie = ({ pieces, popoverContent: PopoverContent }) => {
|
|
|
43
42
|
const triggersStyles = (0, react_1.useMemo)(() => container.height
|
|
44
43
|
? pieces.map(p => p.points
|
|
45
44
|
? {
|
|
46
|
-
top: px((container.height * (
|
|
47
|
-
(
|
|
48
|
-
left: px((container.height * (
|
|
49
|
-
(
|
|
45
|
+
top: px((container.height * (radiusRelative + p.points[4][1])) /
|
|
46
|
+
(radiusRelative * 2)),
|
|
47
|
+
left: px((container.height * (radiusRelative + p.points[4][0])) /
|
|
48
|
+
(radiusRelative * 2) +
|
|
50
49
|
20),
|
|
51
50
|
}
|
|
52
51
|
: { top: '', left: '' })
|
|
53
|
-
: [], [pieces, container]);
|
|
52
|
+
: [], [pieces, container, radiusRelative]);
|
|
54
53
|
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: container.styles, className: "position-relative" }, { children: pieces.every(p => !p.path) ? ((0, jsx_runtime_1.jsx)(design_system_1.Stack, Object.assign({ className: "h-100", justifyContent: "center", alignItems: "center" }, { children: "No Data" }), void 0)) : ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [triggersStyles
|
|
55
54
|
.filter(ts => !!ts.left && !!ts.top)
|
|
56
55
|
.map((ts, ind) => {
|
|
57
56
|
var _a, _b, _c;
|
|
58
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: ts, className: "position-absolute" }, { children: (0, jsx_runtime_1.jsx)(design_system_1.Popover, Object.assign({ portal: true, trigger: (0, jsx_runtime_1.jsx)("span", { children: " " }, void 0), open: selectedIndex === ind, direction: "rb", padding: "s", width: "auto" }, { children: selectedIndex === ind && ((0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ direction: "column" }, { children: [(0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(design_system_1.StatusLight, { color: pieces[ind].color }, void 0), (0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ size: "small", bold: true }, { children: pieces[ind].title }), void 0)] }), void 0), !!PopoverContent && ((0, jsx_runtime_1.jsx)(design_system_1.Stack.Item, Object.assign({ className: "m-l-1" }, { children: (0, jsx_runtime_1.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 }, void 0) }), void 0))] }), void 0)) }), void 0) }), ts.left + ts.top));
|
|
59
|
-
}), (0, jsx_runtime_1.jsx)(PieSvg, { pieces: pieces, selectedIndex: selectedIndex }, void 0), (0, jsx_runtime_1.jsx)(PieSvgHover, { pieces: pieces, onMouse: onMouse }, void 0)] }, void 0)) }), void 0));
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: ts, className: "position-absolute" }, { children: (0, jsx_runtime_1.jsx)(design_system_1.Popover, Object.assign({ portal: true, trigger: (0, jsx_runtime_1.jsx)("span", { children: " " }, void 0), open: selectedIndex === ind, direction: "rb", padding: "s", width: "auto" }, { children: selectedIndex === ind && ((0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ direction: "column" }, { children: [!hideTitles && ((0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(design_system_1.StatusLight, { color: pieces[ind].color }, void 0), (0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ size: "small", bold: true }, { children: pieces[ind].title }), void 0)] }), void 0)), !!PopoverContent && ((0, jsx_runtime_1.jsx)(design_system_1.Stack.Item, Object.assign({ className: "m-l-1" }, { children: (0, jsx_runtime_1.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 }, void 0) }), void 0))] }), void 0)) }), void 0) }), ts.left + ts.top));
|
|
58
|
+
}), !!PieContent && (0, jsx_runtime_1.jsx)(PieContent, {}, void 0), (0, jsx_runtime_1.jsx)(PieSvg, { pieces: pieces, selectedIndex: selectedIndex, radiusRelative: radiusRelative }, void 0), (0, jsx_runtime_1.jsx)(PieSvgHover, { pieces: pieces, onMouse: onMouse, radiusRelative: radiusRelative }, void 0)] }, void 0)) }), void 0));
|
|
60
59
|
};
|
|
61
60
|
exports.Pie = Pie;
|
|
62
61
|
//# sourceMappingURL=pie.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAqE;AACrE,kEAA0C;AAC1C,+DAAoF;AAEpF,uEAAkE;
|
|
1
|
+
{"version":3,"file":"pie.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ declare const _default: {
|
|
|
6
6
|
};
|
|
7
7
|
export default _default;
|
|
8
8
|
export declare const pieChart5AutoColor: () => JSX.Element;
|
|
9
|
+
export declare const pieChartWithContent: () => JSX.Element;
|
|
9
10
|
export declare const pieChart1CustomColor: () => JSX.Element;
|
|
10
11
|
export declare const pieChartNoData: () => JSX.Element;
|
|
11
12
|
//# sourceMappingURL=pie-chart.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-chart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/pie-chart.stories.tsx"],"names":[],"mappings":";;;;;;
|
|
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,mBAY9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,mBAiB/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBAMhC,CAAC;AAEF,eAAO,MAAM,cAAc,mBAAkE,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.pieChartNoData = exports.pieChart1CustomColor = exports.pieChart5AutoColor = void 0;
|
|
3
|
+
exports.pieChartNoData = exports.pieChart1CustomColor = exports.pieChartWithContent = exports.pieChart5AutoColor = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const index_1 = require("./index");
|
|
6
|
+
const design_system_1 = require("@servicetitan/design-system");
|
|
6
7
|
exports.default = {
|
|
7
8
|
title: 'Marketing UI/charts/PieChart',
|
|
8
9
|
component: index_1.PieChart,
|
|
@@ -16,6 +17,11 @@ const pieChart5AutoColor = () => ((0, jsx_runtime_1.jsx)(index_1.PieChart, { tit
|
|
|
16
17
|
{ title: 'amet', value: 22 },
|
|
17
18
|
] }, void 0));
|
|
18
19
|
exports.pieChart5AutoColor = pieChart5AutoColor;
|
|
20
|
+
const pieChartWithContent = () => ((0, jsx_runtime_1.jsx)(index_1.PieChart, { title: "Pie Chart", height: 300, sections: [
|
|
21
|
+
{ title: 'New Customer', value: 61 },
|
|
22
|
+
{ title: 'Existing Customer', value: 90 },
|
|
23
|
+
], content: () => ((0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ className: "h-100", justifyContent: "center", alignItems: "center", direction: "column" }, { children: [(0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ bold: true }, { children: "244" }), void 0), (0, jsx_runtime_1.jsx)(design_system_1.Eyebrow, Object.assign({ size: "small" }, { children: "Total Leads" }), void 0)] }), void 0)), radiusRelative: 45, hideTitles: true }, void 0));
|
|
24
|
+
exports.pieChartWithContent = pieChartWithContent;
|
|
19
25
|
const pieChart1CustomColor = () => ((0, jsx_runtime_1.jsx)(index_1.PieChart, { title: "Pie Chart", height: 250, sections: [{ title: 'lorem', value: 99, color: '#ffe278' }] }, void 0));
|
|
20
26
|
exports.pieChart1CustomColor = pieChart1CustomColor;
|
|
21
27
|
const pieChartNoData = () => (0, jsx_runtime_1.jsx)(index_1.PieChart, { title: "Pie Chart", height: 250, sections: [] }, void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/pie-chart.stories.tsx"],"names":[],"mappings":";;;;AAAA,mCAAmC;
|
|
1
|
+
{"version":3,"file":"pie-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/pie-chart.stories.tsx"],"names":[],"mappings":";;;;AAAA,mCAAmC;AACnC,+DAAuE;AAEvE,kBAAe;IACX,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,gBAAQ;IACnB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEK,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,CACpC,uBAAC,gBAAQ,IACL,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE;QACN,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;QAC7B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;QAC7B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;QAC7B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;QAC3B,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE;KAC/B,WACH,CACL,CAAC;AAZW,QAAA,kBAAkB,sBAY7B;AAEK,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CACrC,uBAAC,gBAAQ,IACL,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE;QACN,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE;QACpC,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,EAAE,EAAE;KAC5C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CACX,wBAAC,qBAAK,kBAAC,SAAS,EAAC,OAAO,EAAC,cAAc,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,iBACnF,uBAAC,wBAAQ,kBAAC,IAAI,uCAAe,EAC7B,uBAAC,uBAAO,kBAAC,IAAI,EAAC,OAAO,yCAAsB,aACvC,CACX,EACD,cAAc,EAAE,EAAE,EAClB,UAAU,iBACZ,CACL,CAAC;AAjBW,QAAA,mBAAmB,uBAiB9B;AAEK,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACtC,uBAAC,gBAAQ,IACL,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,GAAG,EACX,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,WAC7D,CACL,CAAC;AANW,QAAA,oBAAoB,wBAM/B;AAEK,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,uBAAC,gBAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,WAAI,CAAC;AAAjF,QAAA,cAAc,kBAAmE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { PieChartSection, PiePiece } from './interface';
|
|
2
|
-
export declare const
|
|
3
|
-
export declare const convertSessionsToPieces: <T>(sections: PieChartSection<T>[]) => PiePiece<T>[];
|
|
2
|
+
export declare const radiusRelativeDefault = 50;
|
|
3
|
+
export declare const convertSessionsToPieces: <T>(sections: PieChartSection<T>[], radiusRelative: number) => PiePiece<T>[];
|
|
4
4
|
//# sourceMappingURL=const.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/utils/const.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,eAAe,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGrE,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"const.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/utils/const.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,eAAe,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGrE,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAgCxC,eAAO,MAAM,uBAAuB,sDAEhB,MAAM,kBAkEzB,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.convertSessionsToPieces = exports.
|
|
3
|
+
exports.convertSessionsToPieces = exports.radiusRelativeDefault = void 0;
|
|
4
4
|
const accounting_1 = require("accounting");
|
|
5
|
-
exports.
|
|
5
|
+
exports.radiusRelativeDefault = 50;
|
|
6
6
|
const radiusInt = 20;
|
|
7
|
-
const
|
|
8
|
-
const
|
|
7
|
+
const getRadiusExt = (radiusRelative) => radiusRelative - 5; // need to have some space to stroke selected piece
|
|
8
|
+
const getRadiusMid = (radiusRelative) => (3 * radiusRelative) / 4;
|
|
9
9
|
const angleInitial = -0.5;
|
|
10
10
|
const lowestOpacity = 0.1;
|
|
11
11
|
const formatValue = (val) => {
|
|
@@ -19,16 +19,18 @@ const formatValue = (val) => {
|
|
|
19
19
|
const valueDecimal = Math.max(Math.floor(val * 10) - valueMain * 10, 1);
|
|
20
20
|
return `0.${valueDecimal}%`;
|
|
21
21
|
};
|
|
22
|
-
const convertPointsToPath = (points, wideAngle) => `M ${points[3][0]},${points[3][1]} ` +
|
|
22
|
+
const convertPointsToPath = (points, wideAngle, radiusExt) => `M ${points[3][0]},${points[3][1]} ` +
|
|
23
23
|
`L ${points[0][0]},${points[0][1]} ` +
|
|
24
24
|
`A ${radiusExt},${radiusExt} 0 ${wideAngle ? 1 : 0} 1 ${points[1][0]},${points[1][1]} ` +
|
|
25
25
|
`L ${points[2][0]},${points[2][1]} ` +
|
|
26
26
|
`A ${radiusInt},${radiusInt} 0 ${wideAngle ? 1 : 0} 0 ${points[3][0]},${points[3][1]} ` +
|
|
27
27
|
`L ${points[0][0]},${points[0][1]} `;
|
|
28
|
-
const convertSessionsToPieces = (sections) => {
|
|
28
|
+
const convertSessionsToPieces = (sections, radiusRelative) => {
|
|
29
29
|
const total = sections.reduce((sum, curr) => sum + curr.value, 0);
|
|
30
30
|
const opacityStep = (1 - lowestOpacity) / (Math.max(sections.length, 2) - 1);
|
|
31
31
|
let angleSum = 0;
|
|
32
|
+
const radiusExt = getRadiusExt(radiusRelative);
|
|
33
|
+
const radiusMid = getRadiusMid(radiusRelative);
|
|
32
34
|
const pieces = sections
|
|
33
35
|
.slice()
|
|
34
36
|
.sort((a, b) => b.value - a.value)
|
|
@@ -60,7 +62,7 @@ const convertSessionsToPieces = (sections) => {
|
|
|
60
62
|
value: s.value,
|
|
61
63
|
points,
|
|
62
64
|
path: points
|
|
63
|
-
? convertPointsToPath(points, angleEnd - angleStart >= Math.PI)
|
|
65
|
+
? convertPointsToPath(points, angleEnd - angleStart >= Math.PI, radiusExt)
|
|
64
66
|
: undefined,
|
|
65
67
|
};
|
|
66
68
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/utils/const.ts"],"names":[],"mappings":";;;AACA,2CAA0C;AAE7B,QAAA,
|
|
1
|
+
{"version":3,"file":"const.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/utils/const.ts"],"names":[],"mappings":"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"}
|
|
@@ -15,8 +15,11 @@ export interface PieChartProps<T = any> {
|
|
|
15
15
|
title: string;
|
|
16
16
|
sections: PieChartSection<T>[];
|
|
17
17
|
popoverContent?: PieChartPopoverContentType<T>;
|
|
18
|
+
content?: FC<T>;
|
|
18
19
|
height?: number;
|
|
19
20
|
width?: number;
|
|
21
|
+
radiusRelative?: number;
|
|
22
|
+
hideTitles?: boolean;
|
|
20
23
|
}
|
|
21
24
|
export declare type PiecePoint = [number, number];
|
|
22
25
|
export declare type PiecePoints = [PiecePoint, PiecePoint, PiecePoint, PiecePoint, PiecePoint];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/utils/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,MAAM,WAAW,eAAe,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,CAAC,CAAC;CACZ;AAED,oBAAY,0BAA0B,CAAC,CAAC,GAAG,GAAG,IAAI,EAAE,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/utils/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,MAAM,WAAW,eAAe,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,CAAC,CAAC;CACZ;AAED,oBAAY,0BAA0B,CAAC,CAAC,GAAG,GAAG,IAAI,EAAE,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,cAAc,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,oBAAY,UAAU,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,oBAAY,WAAW,GAAG,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC;AAEvF,MAAM,WAAW,QAAQ,CAAC,CAAC,GAAG,SAAS;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB"}
|
|
@@ -9,6 +9,7 @@ interface StatDiffProps {
|
|
|
9
9
|
inverted?: boolean;
|
|
10
10
|
neutral?: boolean;
|
|
11
11
|
className?: string;
|
|
12
|
+
diffPercentOnly?: boolean;
|
|
12
13
|
}
|
|
13
14
|
export declare const StatDiff: FC<StatDiffProps>;
|
|
14
15
|
export interface StatCardProps {
|
|
@@ -25,6 +26,7 @@ export interface StatCardProps {
|
|
|
25
26
|
fill?: boolean;
|
|
26
27
|
valueOnly?: boolean;
|
|
27
28
|
className?: string;
|
|
29
|
+
diffPercentOnly?: boolean;
|
|
28
30
|
}
|
|
29
31
|
export declare const StatCard: FC<StatCardProps>;
|
|
30
32
|
export {};
|
|
@@ -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,MAAM,OAAO,CAAC;AAE3B,OAAO,EAEH,mBAAmB,EAItB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AA0BtE,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;
|
|
1
|
+
{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAEH,mBAAmB,EAItB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AA0BtE,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,CAgDtC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,CAgDtC,CAAC"}
|
|
@@ -43,7 +43,7 @@ const formatDifferencePercentage = (value, isPlus) => {
|
|
|
43
43
|
}
|
|
44
44
|
return (isPlus ? '+' : '-') + (0, formatters_1.formatValue)(value, 'percent-100');
|
|
45
45
|
};
|
|
46
|
-
const StatDiff = ({ value, prev, size, format, inverted, neutral, className, }) => {
|
|
46
|
+
const StatDiff = ({ value, prev, size, format, inverted, neutral, className, diffPercentOnly = false, }) => {
|
|
47
47
|
const percents = format === 'percent';
|
|
48
48
|
const [absDiff, diffPercent, isIncrease] = calculateDiff(value !== null && value !== void 0 ? value : 0, prev !== null && prev !== void 0 ? prev : 0, percents);
|
|
49
49
|
const diff = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
|
|
@@ -52,9 +52,15 @@ const StatDiff = ({ value, prev, size, format, inverted, neutral, className, })
|
|
|
52
52
|
text += formatDifferencePercentage(absDiff, isIncrease);
|
|
53
53
|
}
|
|
54
54
|
else {
|
|
55
|
-
|
|
56
|
-
if (
|
|
57
|
-
text +=
|
|
55
|
+
const diffPercentage = formatDifferencePercentage(diffPercent, isIncrease);
|
|
56
|
+
if (diffPercentOnly) {
|
|
57
|
+
text += `${diffPercentage}`;
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
text += `${formatDifference(absDiff, isIncrease, format)}`;
|
|
61
|
+
if (diffPercent !== 0) {
|
|
62
|
+
text += ` (${diffPercentage})`;
|
|
63
|
+
}
|
|
58
64
|
}
|
|
59
65
|
}
|
|
60
66
|
return ((0, jsx_runtime_1.jsxs)(design_system_1.BodyText, Object.assign({ className: (0, classnames_1.default)(Styles.statDiff, {
|
|
@@ -64,14 +70,14 @@ const StatDiff = ({ value, prev, size, format, inverted, neutral, className, })
|
|
|
64
70
|
}, className), size: size !== null && size !== void 0 ? size : 'small' }, { children: [(0, jsx_runtime_1.jsx)("span", { children: diff }, void 0), value === undefined ? '\u00A0' : text] }), void 0));
|
|
65
71
|
};
|
|
66
72
|
exports.StatDiff = StatDiff;
|
|
67
|
-
const StatCard = ({ title, description, value, percent, money, rate, prev, clean, inverted, neutral, fill, valueOnly, className, }) => {
|
|
73
|
+
const StatCard = ({ title, description, value, percent, money, rate, prev, clean, inverted, neutral, fill, valueOnly, className, diffPercentOnly = false, }) => {
|
|
68
74
|
const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
|
|
69
75
|
const val = value === undefined ? '\u00A0' : (0, formatters_1.formatValue)(value, format);
|
|
70
76
|
const eyebrow = (0, jsx_runtime_1.jsx)(design_system_1.Eyebrow, Object.assign({ className: (0, classnames_1.default)(Styles.title, 'ta-center') }, { children: title }), void 0);
|
|
71
77
|
return ((0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ direction: "column", alignItems: "center", className: (0, classnames_1.default)('p-y-3', {
|
|
72
78
|
'bg-white border-radius-2 border': !clean,
|
|
73
79
|
'flex-grow-1 flex-basis-0': fill,
|
|
74
|
-
}, className) }, { children: [description ? (0, jsx_runtime_1.jsx)(design_system_1.Tooltip, Object.assign({ text: description }, { children: eyebrow }), void 0) : eyebrow, (0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ className: "fs-6-i ff-display" }, { children: val }), void 0), !valueOnly && ((0, jsx_runtime_1.jsx)(exports.StatDiff, { value: value, prev: prev, format: format, inverted: inverted, neutral: neutral }, void 0))] }), void 0));
|
|
80
|
+
}, className) }, { children: [description ? (0, jsx_runtime_1.jsx)(design_system_1.Tooltip, Object.assign({ text: description }, { children: eyebrow }), void 0) : eyebrow, (0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ className: "fs-6-i ff-display" }, { children: val }), void 0), !valueOnly && ((0, jsx_runtime_1.jsx)(exports.StatDiff, { value: value, prev: prev, format: format, inverted: inverted, neutral: neutral, diffPercentOnly: diffPercentOnly }, void 0))] }), void 0));
|
|
75
81
|
};
|
|
76
82
|
exports.StatCard = StatCard;
|
|
77
83
|
//# sourceMappingURL=stat-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,4DAAoC;AACpC,+DAMqC;AACrC,gEAAkD;AAClD,uDAAsE;AAEtE,MAAM,aAAa,GAAG,CAClB,KAAa,EACb,IAAY,EACZ,QAAkB,EACO,EAAE;IAC3B,MAAM,IAAI,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnF,OAAO,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,MAAe,EAAE,MAAuB,EAAU,EAAE;IACzF,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAA,wBAAW,EAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,KAAa,EAAE,MAAe,EAAU,EAAE;IAC1E,IAAI,CAAC,KAAK,EAAE;QACR,OAAO,EAAE,CAAC;KACb;IAED,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAA,wBAAW,EAAC,KAAK,EAAE,aAAa,CAAC,CAAC;AACpE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"stat-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ declare const _default: {
|
|
|
6
6
|
};
|
|
7
7
|
export default _default;
|
|
8
8
|
export declare const statCardNumber: () => JSX.Element;
|
|
9
|
+
export declare const statDiffNumberPercentOnly: () => JSX.Element;
|
|
9
10
|
export declare const statCardMoney: () => JSX.Element;
|
|
10
11
|
export declare const statCardPercentInverted: () => JSX.Element;
|
|
11
12
|
export declare const statCardRate: () => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-cards.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-cards.stories.tsx"],"names":[],"mappings":";;;;;;AAGA,wBAIE;AAIF,eAAO,MAAM,cAAc,mBAA+D,CAAC;AAC3F,eAAO,MAAM,aAAa,mBAAuE,CAAC;AAClG,eAAO,MAAM,uBAAuB,mBAElC,CAAC;AACH,eAAO,MAAM,YAAY,mBAAiE,CAAC"}
|
|
1
|
+
{"version":3,"file":"stat-cards.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-cards.stories.tsx"],"names":[],"mappings":";;;;;;AAGA,wBAIE;AAIF,eAAO,MAAM,cAAc,mBAA+D,CAAC;AAC3F,eAAO,MAAM,yBAAyB,mBAEpC,CAAC;AACH,eAAO,MAAM,aAAa,mBAAuE,CAAC;AAClG,eAAO,MAAM,uBAAuB,mBAElC,CAAC;AACH,eAAO,MAAM,YAAY,mBAAiE,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.statCardRate = exports.statCardPercentInverted = exports.statCardMoney = exports.statCardNumber = void 0;
|
|
3
|
+
exports.statCardRate = exports.statCardPercentInverted = exports.statCardMoney = exports.statDiffNumberPercentOnly = exports.statCardNumber = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const stat_card_1 = require("./stat-card");
|
|
6
6
|
exports.default = {
|
|
@@ -10,6 +10,7 @@ exports.default = {
|
|
|
10
10
|
};
|
|
11
11
|
const w = (cb) => () => (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { width: '400px' } }, { children: cb() }), void 0);
|
|
12
12
|
exports.statCardNumber = w(() => (0, jsx_runtime_1.jsx)(stat_card_1.StatCard, { title: "number", value: 133, prev: 1000 }, void 0));
|
|
13
|
+
exports.statDiffNumberPercentOnly = w(() => ((0, jsx_runtime_1.jsx)(stat_card_1.StatCard, { title: "number", value: 133, prev: 1000, diffPercentOnly: true }, void 0)));
|
|
13
14
|
exports.statCardMoney = w(() => (0, jsx_runtime_1.jsx)(stat_card_1.StatCard, { title: "money", value: 10000, prev: 11000, money: true }, void 0));
|
|
14
15
|
exports.statCardPercentInverted = w(() => ((0, jsx_runtime_1.jsx)(stat_card_1.StatCard, { title: "percent", value: 0.27, prev: 0.27333, percent: true, inverted: true }, void 0)));
|
|
15
16
|
exports.statCardRate = w(() => (0, jsx_runtime_1.jsx)(stat_card_1.StatCard, { title: "rate", value: 5.5, prev: 4.5, rate: true }, void 0));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-cards.stories.js","sourceRoot":"","sources":["../../../src/components/stat/stat-cards.stories.tsx"],"names":[],"mappings":";;;;AACA,2CAAuC;AAEvC,kBAAe;IACX,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,oBAAQ;IACnB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,GAAG,CAAC,EAAsB,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,8CAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAG,EAAE,EAAE,YAAO,CAAC;AAE5E,QAAA,cAAc,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,uBAAC,oBAAQ,IAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,WAAI,CAAC,CAAC;AAC9E,QAAA,aAAa,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,uBAAC,oBAAQ,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,iBAAG,CAAC,CAAC;AACrF,QAAA,uBAAuB,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAC3C,uBAAC,oBAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,QAAC,QAAQ,iBAAG,CAC5E,CAAC,CAAC;AACU,QAAA,YAAY,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,uBAAC,oBAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,iBAAG,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"stat-cards.stories.js","sourceRoot":"","sources":["../../../src/components/stat/stat-cards.stories.tsx"],"names":[],"mappings":";;;;AACA,2CAAuC;AAEvC,kBAAe;IACX,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,oBAAQ;IACnB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,GAAG,CAAC,EAAsB,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,8CAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAG,EAAE,EAAE,YAAO,CAAC;AAE5E,QAAA,cAAc,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,uBAAC,oBAAQ,IAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,WAAI,CAAC,CAAC;AAC9E,QAAA,yBAAyB,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAC7C,uBAAC,oBAAQ,IAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,eAAe,iBAAG,CACtE,CAAC,CAAC;AACU,QAAA,aAAa,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,uBAAC,oBAAQ,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,iBAAG,CAAC,CAAC;AACrF,QAAA,uBAAuB,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAC3C,uBAAC,oBAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,QAAC,QAAQ,iBAAG,CAC5E,CAAC,CAAC;AACU,QAAA,YAAY,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,uBAAC,oBAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,iBAAG,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/marketing-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
4
|
"description": "Marketing UI component and utils",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"less": true,
|
|
51
51
|
"webpack": false
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "9d9535ae5a97e07a1f2d4de2c6db4e6f5a64ea5e"
|
|
54
54
|
}
|
|
@@ -2,7 +2,7 @@ import { useMemo, FC } from 'react';
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { BodyText, Stack, StatusLight } from '@servicetitan/design-system';
|
|
4
4
|
import { PieChartProps, PiePiece } from '../utils/interface';
|
|
5
|
-
import { convertSessionsToPieces } from '../utils/const';
|
|
5
|
+
import { convertSessionsToPieces, radiusRelativeDefault } from '../utils/const';
|
|
6
6
|
import { Pie } from './pie';
|
|
7
7
|
import * as Styles from './pie-chart.module.less';
|
|
8
8
|
|
|
@@ -28,14 +28,33 @@ const PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces })
|
|
|
28
28
|
);
|
|
29
29
|
};
|
|
30
30
|
|
|
31
|
-
export const PieChart: FC<PieChartProps> = ({
|
|
32
|
-
|
|
31
|
+
export const PieChart: FC<PieChartProps> = ({
|
|
32
|
+
height,
|
|
33
|
+
width,
|
|
34
|
+
title,
|
|
35
|
+
sections,
|
|
36
|
+
popoverContent,
|
|
37
|
+
content,
|
|
38
|
+
radiusRelative = radiusRelativeDefault,
|
|
39
|
+
hideTitles = false,
|
|
40
|
+
}) => {
|
|
41
|
+
const pieces = useMemo(
|
|
42
|
+
() => convertSessionsToPieces(sections, radiusRelative),
|
|
43
|
+
[sections, radiusRelative]
|
|
44
|
+
);
|
|
33
45
|
const style = useMemo(() => ({ height, width }), [height, width]);
|
|
34
46
|
|
|
35
47
|
return (
|
|
36
48
|
<div className="d-f flex-row" style={style}>
|
|
37
|
-
<Pie
|
|
38
|
-
|
|
49
|
+
<Pie
|
|
50
|
+
title={title}
|
|
51
|
+
pieces={pieces}
|
|
52
|
+
content={content}
|
|
53
|
+
popoverContent={popoverContent}
|
|
54
|
+
radiusRelative={radiusRelative}
|
|
55
|
+
hideTitles={hideTitles}
|
|
56
|
+
/>
|
|
57
|
+
{!hideTitles && <PieTitles title={title} pieces={pieces} />}
|
|
39
58
|
</div>
|
|
40
59
|
);
|
|
41
60
|
};
|
|
@@ -3,7 +3,6 @@ import tokens from '@servicetitan/tokens';
|
|
|
3
3
|
import { BodyText, Popover, Stack, StatusLight } from '@servicetitan/design-system';
|
|
4
4
|
|
|
5
5
|
import { useClientRect } from '../../../../utils/use-client-rect';
|
|
6
|
-
import { radiusRelative } from '../utils/const';
|
|
7
6
|
import { PieChartPopoverContentType, PiePiece } from '../utils/interface';
|
|
8
7
|
|
|
9
8
|
const chartPadding = 8;
|
|
@@ -69,7 +68,8 @@ const PiePieceHover: FC<{
|
|
|
69
68
|
const PieSvg: FC<{
|
|
70
69
|
pieces: PiePiece[];
|
|
71
70
|
selectedIndex: number;
|
|
72
|
-
|
|
71
|
+
radiusRelative: number;
|
|
72
|
+
}> = ({ pieces, selectedIndex, radiusRelative }) => (
|
|
73
73
|
<svg
|
|
74
74
|
className="position-absolute"
|
|
75
75
|
style={{ inset: px(chartPadding) }}
|
|
@@ -89,8 +89,9 @@ const PieSvg: FC<{
|
|
|
89
89
|
|
|
90
90
|
const PieSvgHover: FC<{
|
|
91
91
|
pieces: PiePiece[];
|
|
92
|
+
radiusRelative: number;
|
|
92
93
|
onMouse(id: string, isEnter: boolean): void;
|
|
93
|
-
}> = ({ pieces, onMouse }) => (
|
|
94
|
+
}> = ({ pieces, onMouse, radiusRelative }) => (
|
|
94
95
|
<svg
|
|
95
96
|
className="position-absolute z-global-nav"
|
|
96
97
|
style={{ inset: px(chartPadding) }}
|
|
@@ -107,8 +108,17 @@ const PieSvgHover: FC<{
|
|
|
107
108
|
export const Pie: FC<{
|
|
108
109
|
title: string;
|
|
109
110
|
pieces: PiePiece[];
|
|
111
|
+
radiusRelative: number;
|
|
112
|
+
content?: FC;
|
|
110
113
|
popoverContent?: PieChartPopoverContentType;
|
|
111
|
-
|
|
114
|
+
hideTitles?: boolean;
|
|
115
|
+
}> = ({
|
|
116
|
+
pieces,
|
|
117
|
+
popoverContent: PopoverContent,
|
|
118
|
+
content: PieContent,
|
|
119
|
+
radiusRelative,
|
|
120
|
+
hideTitles,
|
|
121
|
+
}) => {
|
|
112
122
|
const [selectedIndex, setSelectedIndex] = useState(-1);
|
|
113
123
|
const [rect, ref] = useClientRect();
|
|
114
124
|
|
|
@@ -153,7 +163,7 @@ export const Pie: FC<{
|
|
|
153
163
|
: { top: '', left: '' }
|
|
154
164
|
)
|
|
155
165
|
: [],
|
|
156
|
-
[pieces, container]
|
|
166
|
+
[pieces, container, radiusRelative]
|
|
157
167
|
);
|
|
158
168
|
|
|
159
169
|
return (
|
|
@@ -178,12 +188,14 @@ export const Pie: FC<{
|
|
|
178
188
|
>
|
|
179
189
|
{selectedIndex === ind && (
|
|
180
190
|
<Stack direction="column">
|
|
181
|
-
|
|
182
|
-
<
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
191
|
+
{!hideTitles && (
|
|
192
|
+
<Stack alignItems="center">
|
|
193
|
+
<StatusLight color={pieces[ind].color} />
|
|
194
|
+
<BodyText size="small" bold>
|
|
195
|
+
{pieces[ind].title}
|
|
196
|
+
</BodyText>
|
|
197
|
+
</Stack>
|
|
198
|
+
)}
|
|
187
199
|
{!!PopoverContent && (
|
|
188
200
|
<Stack.Item className="m-l-1">
|
|
189
201
|
<PopoverContent
|
|
@@ -199,9 +211,17 @@ export const Pie: FC<{
|
|
|
199
211
|
</Popover>
|
|
200
212
|
</div>
|
|
201
213
|
))}
|
|
202
|
-
|
|
203
|
-
<PieSvg
|
|
204
|
-
|
|
214
|
+
{!!PieContent && <PieContent />}
|
|
215
|
+
<PieSvg
|
|
216
|
+
pieces={pieces}
|
|
217
|
+
selectedIndex={selectedIndex}
|
|
218
|
+
radiusRelative={radiusRelative}
|
|
219
|
+
/>
|
|
220
|
+
<PieSvgHover
|
|
221
|
+
pieces={pieces}
|
|
222
|
+
onMouse={onMouse}
|
|
223
|
+
radiusRelative={radiusRelative}
|
|
224
|
+
/>
|
|
205
225
|
</Fragment>
|
|
206
226
|
)}
|
|
207
227
|
</div>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { PieChart } from './index';
|
|
2
|
+
import { Eyebrow, Stack, BodyText } from '@servicetitan/design-system';
|
|
2
3
|
|
|
3
4
|
export default {
|
|
4
5
|
title: 'Marketing UI/charts/PieChart',
|
|
@@ -20,6 +21,25 @@ export const pieChart5AutoColor = () => (
|
|
|
20
21
|
/>
|
|
21
22
|
);
|
|
22
23
|
|
|
24
|
+
export const pieChartWithContent = () => (
|
|
25
|
+
<PieChart
|
|
26
|
+
title="Pie Chart"
|
|
27
|
+
height={300}
|
|
28
|
+
sections={[
|
|
29
|
+
{ title: 'New Customer', value: 61 },
|
|
30
|
+
{ title: 'Existing Customer', value: 90 },
|
|
31
|
+
]}
|
|
32
|
+
content={() => (
|
|
33
|
+
<Stack className="h-100" justifyContent="center" alignItems="center" direction="column">
|
|
34
|
+
<BodyText bold>244</BodyText>
|
|
35
|
+
<Eyebrow size="small">Total Leads</Eyebrow>
|
|
36
|
+
</Stack>
|
|
37
|
+
)}
|
|
38
|
+
radiusRelative={45}
|
|
39
|
+
hideTitles
|
|
40
|
+
/>
|
|
41
|
+
);
|
|
42
|
+
|
|
23
43
|
export const pieChart1CustomColor = () => (
|
|
24
44
|
<PieChart
|
|
25
45
|
title="Pie Chart"
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { PiecePoints, PieChartSection, PiePiece } from './interface';
|
|
2
2
|
import { formatNumber } from 'accounting';
|
|
3
3
|
|
|
4
|
-
export const
|
|
4
|
+
export const radiusRelativeDefault = 50;
|
|
5
5
|
const radiusInt = 20;
|
|
6
|
-
const
|
|
7
|
-
const
|
|
6
|
+
const getRadiusExt = (radiusRelative: number) => radiusRelative - 5; // need to have some space to stroke selected piece
|
|
7
|
+
const getRadiusMid = (radiusRelative: number) => (3 * radiusRelative) / 4;
|
|
8
8
|
|
|
9
9
|
const angleInitial = -0.5;
|
|
10
10
|
const lowestOpacity = 0.1;
|
|
@@ -25,7 +25,7 @@ const formatValue = (val: number): string => {
|
|
|
25
25
|
return `0.${valueDecimal}%`;
|
|
26
26
|
};
|
|
27
27
|
|
|
28
|
-
const convertPointsToPath = (points: PiecePoints, wideAngle: boolean): string =>
|
|
28
|
+
const convertPointsToPath = (points: PiecePoints, wideAngle: boolean, radiusExt: number): string =>
|
|
29
29
|
`M ${points[3][0]},${points[3][1]} ` +
|
|
30
30
|
`L ${points[0][0]},${points[0][1]} ` +
|
|
31
31
|
`A ${radiusExt},${radiusExt} 0 ${wideAngle ? 1 : 0} 1 ${points[1][0]},${points[1][1]} ` +
|
|
@@ -33,10 +33,15 @@ const convertPointsToPath = (points: PiecePoints, wideAngle: boolean): string =>
|
|
|
33
33
|
`A ${radiusInt},${radiusInt} 0 ${wideAngle ? 1 : 0} 0 ${points[3][0]},${points[3][1]} ` +
|
|
34
34
|
`L ${points[0][0]},${points[0][1]} `;
|
|
35
35
|
|
|
36
|
-
export const convertSessionsToPieces = <T>(
|
|
36
|
+
export const convertSessionsToPieces = <T>(
|
|
37
|
+
sections: PieChartSection<T>[],
|
|
38
|
+
radiusRelative: number
|
|
39
|
+
): PiePiece<T>[] => {
|
|
37
40
|
const total = sections.reduce((sum, curr) => sum + curr.value, 0);
|
|
38
41
|
const opacityStep = (1 - lowestOpacity) / (Math.max(sections.length, 2) - 1);
|
|
39
42
|
let angleSum = 0;
|
|
43
|
+
const radiusExt = getRadiusExt(radiusRelative);
|
|
44
|
+
const radiusMid = getRadiusMid(radiusRelative);
|
|
40
45
|
|
|
41
46
|
const pieces = sections
|
|
42
47
|
.slice()
|
|
@@ -71,7 +76,7 @@ export const convertSessionsToPieces = <T>(sections: PieChartSection<T>[]): PieP
|
|
|
71
76
|
value: s.value,
|
|
72
77
|
points,
|
|
73
78
|
path: points
|
|
74
|
-
? convertPointsToPath(points, angleEnd - angleStart >= Math.PI)
|
|
79
|
+
? convertPointsToPath(points, angleEnd - angleStart >= Math.PI, radiusExt)
|
|
75
80
|
: undefined,
|
|
76
81
|
};
|
|
77
82
|
});
|
|
@@ -18,8 +18,11 @@ export interface PieChartProps<T = any> {
|
|
|
18
18
|
title: string;
|
|
19
19
|
sections: PieChartSection<T>[];
|
|
20
20
|
popoverContent?: PieChartPopoverContentType<T>;
|
|
21
|
+
content?: FC<T>;
|
|
21
22
|
height?: number;
|
|
22
23
|
width?: number;
|
|
24
|
+
radiusRelative?: number;
|
|
25
|
+
hideTitles?: boolean;
|
|
23
26
|
}
|
|
24
27
|
|
|
25
28
|
export type PiecePoint = [number, number];
|
|
@@ -42,6 +42,7 @@ interface StatDiffProps {
|
|
|
42
42
|
inverted?: boolean;
|
|
43
43
|
neutral?: boolean;
|
|
44
44
|
className?: string;
|
|
45
|
+
diffPercentOnly?: boolean;
|
|
45
46
|
}
|
|
46
47
|
|
|
47
48
|
export const StatDiff: FC<StatDiffProps> = ({
|
|
@@ -52,6 +53,7 @@ export const StatDiff: FC<StatDiffProps> = ({
|
|
|
52
53
|
inverted,
|
|
53
54
|
neutral,
|
|
54
55
|
className,
|
|
56
|
+
diffPercentOnly = false,
|
|
55
57
|
}) => {
|
|
56
58
|
const percents = format === 'percent';
|
|
57
59
|
const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);
|
|
@@ -61,10 +63,16 @@ export const StatDiff: FC<StatDiffProps> = ({
|
|
|
61
63
|
if (percents) {
|
|
62
64
|
text += formatDifferencePercentage(absDiff, isIncrease);
|
|
63
65
|
} else {
|
|
64
|
-
|
|
66
|
+
const diffPercentage = formatDifferencePercentage(diffPercent, isIncrease);
|
|
65
67
|
|
|
66
|
-
if (
|
|
67
|
-
text +=
|
|
68
|
+
if (diffPercentOnly) {
|
|
69
|
+
text += `${diffPercentage}`;
|
|
70
|
+
} else {
|
|
71
|
+
text += `${formatDifference(absDiff, isIncrease, format)}`;
|
|
72
|
+
|
|
73
|
+
if (diffPercent !== 0) {
|
|
74
|
+
text += ` (${diffPercentage})`;
|
|
75
|
+
}
|
|
68
76
|
}
|
|
69
77
|
}
|
|
70
78
|
|
|
@@ -101,6 +109,7 @@ export interface StatCardProps {
|
|
|
101
109
|
fill?: boolean;
|
|
102
110
|
valueOnly?: boolean;
|
|
103
111
|
className?: string;
|
|
112
|
+
diffPercentOnly?: boolean;
|
|
104
113
|
}
|
|
105
114
|
|
|
106
115
|
export const StatCard: FC<StatCardProps> = ({
|
|
@@ -117,6 +126,7 @@ export const StatCard: FC<StatCardProps> = ({
|
|
|
117
126
|
fill,
|
|
118
127
|
valueOnly,
|
|
119
128
|
className,
|
|
129
|
+
diffPercentOnly = false,
|
|
120
130
|
}) => {
|
|
121
131
|
const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
|
|
122
132
|
const val = value === undefined ? '\u00A0' : formatValue(value, format);
|
|
@@ -145,6 +155,7 @@ export const StatCard: FC<StatCardProps> = ({
|
|
|
145
155
|
format={format}
|
|
146
156
|
inverted={inverted}
|
|
147
157
|
neutral={neutral}
|
|
158
|
+
diffPercentOnly={diffPercentOnly}
|
|
148
159
|
/>
|
|
149
160
|
)}
|
|
150
161
|
</Stack>
|
|
@@ -10,6 +10,9 @@ export default {
|
|
|
10
10
|
const w = (cb: () => ReactElement) => () => <div style={{ width: '400px' }}>{cb()}</div>;
|
|
11
11
|
|
|
12
12
|
export const statCardNumber = w(() => <StatCard title="number" value={133} prev={1000} />);
|
|
13
|
+
export const statDiffNumberPercentOnly = w(() => (
|
|
14
|
+
<StatCard title="number" value={133} prev={1000} diffPercentOnly />
|
|
15
|
+
));
|
|
13
16
|
export const statCardMoney = w(() => <StatCard title="money" value={10000} prev={11000} money />);
|
|
14
17
|
export const statCardPercentInverted = w(() => (
|
|
15
18
|
<StatCard title="percent" value={0.27} prev={0.27333} percent inverted />
|