@servicetitan/marketing-ui 1.15.0 → 1.16.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/CHANGELOG.md +328 -0
- package/dist/components/ads/ads-stat.js +13 -18
- package/dist/components/ads/ads-stat.js.map +1 -1
- package/dist/components/charts/funnel-chart/components/funnel-chart.js +15 -41
- package/dist/components/charts/funnel-chart/components/funnel-chart.js.map +1 -1
- package/dist/components/charts/funnel-chart/components/funnel-svg.js +9 -16
- package/dist/components/charts/funnel-chart/components/funnel-svg.js.map +1 -1
- package/dist/components/charts/funnel-chart/funnel-chart.stories.js +11 -14
- package/dist/components/charts/funnel-chart/funnel-chart.stories.js.map +1 -1
- package/dist/components/charts/funnel-chart/index.js +2 -16
- package/dist/components/charts/funnel-chart/index.js.map +1 -1
- package/dist/components/charts/funnel-chart/utils/const.js +2 -5
- package/dist/components/charts/funnel-chart/utils/const.js.map +1 -1
- package/dist/components/charts/funnel-chart/utils/interface.js +1 -2
- package/dist/components/charts/line-chart/components/body.js +26 -51
- package/dist/components/charts/line-chart/components/body.js.map +1 -1
- package/dist/components/charts/line-chart/components/container.js +12 -15
- package/dist/components/charts/line-chart/components/container.js.map +1 -1
- package/dist/components/charts/line-chart/components/hover-popover.js +20 -45
- package/dist/components/charts/line-chart/components/hover-popover.js.map +1 -1
- package/dist/components/charts/line-chart/components/sidebar.js +9 -35
- package/dist/components/charts/line-chart/components/sidebar.js.map +1 -1
- package/dist/components/charts/line-chart/components/stuff.js +13 -41
- package/dist/components/charts/line-chart/components/stuff.js.map +1 -1
- package/dist/components/charts/line-chart/components/svg-bars.js +14 -17
- package/dist/components/charts/line-chart/components/svg-bars.js.map +1 -1
- package/dist/components/charts/line-chart/components/svg-body.js +15 -41
- package/dist/components/charts/line-chart/components/svg-body.js.map +1 -1
- package/dist/components/charts/line-chart/components/svg-lines.js +11 -33
- package/dist/components/charts/line-chart/components/svg-lines.js.map +1 -1
- package/dist/components/charts/line-chart/index.js +2 -14
- package/dist/components/charts/line-chart/index.js.map +1 -1
- package/dist/components/charts/line-chart/line-chart.stories.js +19 -27
- package/dist/components/charts/line-chart/line-chart.stories.js.map +1 -1
- package/dist/components/charts/line-chart/stores/line-chart.store.js +20 -23
- package/dist/components/charts/line-chart/stores/line-chart.store.js.map +1 -1
- package/dist/components/charts/line-chart/stores/svg.store.js +10 -13
- package/dist/components/charts/line-chart/stores/svg.store.js.map +1 -1
- package/dist/components/charts/line-chart/utils/const.js +2 -6
- package/dist/components/charts/line-chart/utils/const.js.map +1 -1
- package/dist/components/charts/line-chart/utils/formatters.js +7 -11
- package/dist/components/charts/line-chart/utils/formatters.js.map +1 -1
- package/dist/components/charts/line-chart/utils/interfaces.js +1 -2
- package/dist/components/charts/line-chart/utils/internal-interfaces.js +1 -2
- package/dist/components/charts/line-chart/utils/key.js +1 -5
- package/dist/components/charts/line-chart/utils/key.js.map +1 -1
- package/dist/components/charts/line-chart/utils/labels.js +19 -26
- package/dist/components/charts/line-chart/utils/labels.js.map +1 -1
- package/dist/components/charts/pie-chart/components/pie-chart.js +12 -38
- package/dist/components/charts/pie-chart/components/pie-chart.js.map +1 -1
- package/dist/components/charts/pie-chart/components/pie.js +20 -27
- package/dist/components/charts/pie-chart/components/pie.js.map +1 -1
- package/dist/components/charts/pie-chart/index.js +1 -5
- package/dist/components/charts/pie-chart/index.js.map +1 -1
- package/dist/components/charts/pie-chart/pie-chart.stories.js +11 -18
- package/dist/components/charts/pie-chart/pie-chart.stories.js.map +1 -1
- package/dist/components/charts/pie-chart/utils/const.js +4 -8
- package/dist/components/charts/pie-chart/utils/const.js.map +1 -1
- package/dist/components/charts/pie-chart/utils/interface.js +1 -2
- package/dist/components/image-cropper/image-cropper.js +17 -23
- package/dist/components/image-cropper/image-cropper.js.map +1 -1
- package/dist/components/image-cropper/image-cropper.stories.js +10 -14
- package/dist/components/image-cropper/image-cropper.stories.js.map +1 -1
- package/dist/components/stat/stat-card.js +15 -42
- package/dist/components/stat/stat-card.js.map +1 -1
- package/dist/components/stat/stat-cards.stories.js +10 -13
- package/dist/components/stat/stat-cards.stories.js.map +1 -1
- package/dist/components/stat/stat-extended-card.js +9 -35
- package/dist/components/stat/stat-extended-card.js.map +1 -1
- package/dist/components/stat/stat-extended-card.stories.js +8 -11
- package/dist/components/stat/stat-extended-card.stories.js.map +1 -1
- package/dist/components/ui/action-button/action-button.d.ts +14 -0
- package/dist/components/ui/action-button/action-button.d.ts.map +1 -0
- package/dist/components/ui/action-button/action-button.js +32 -0
- package/dist/components/ui/action-button/action-button.js.map +1 -0
- package/dist/components/ui/action-button/action-button.module.less +51 -0
- package/dist/components/ui/action-button/action-button.stories.d.ts +10 -0
- package/dist/components/ui/action-button/action-button.stories.d.ts.map +1 -0
- package/dist/components/ui/action-button/action-button.stories.js +11 -0
- package/dist/components/ui/action-button/action-button.stories.js.map +1 -0
- package/dist/components/ui/centered-spinner.js +5 -12
- package/dist/components/ui/centered-spinner.js.map +1 -1
- package/dist/components/ui/centered-spinner.stories.js +8 -11
- package/dist/components/ui/centered-spinner.stories.js.map +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.js +11 -36
- package/dist/components/ui/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.stories.js +9 -12
- package/dist/components/ui/date-range-picker/date-range-picker.stories.js.map +1 -1
- package/dist/components/ui/disabled-button.js +4 -8
- package/dist/components/ui/disabled-button.js.map +1 -1
- package/dist/components/ui/line-text/index.js +1 -13
- package/dist/components/ui/line-text/index.js.map +1 -1
- package/dist/components/ui/line-text/line-text-body.stories.js +7 -10
- package/dist/components/ui/line-text/line-text-body.stories.js.map +1 -1
- package/dist/components/ui/line-text/line-text-head.stories.js +7 -10
- package/dist/components/ui/line-text/line-text-head.stories.js.map +1 -1
- package/dist/components/ui/line-text/line-text.js +15 -42
- package/dist/components/ui/line-text/line-text.js.map +1 -1
- package/dist/components/ui/title-popover/title-popover.d.ts +17 -0
- package/dist/components/ui/title-popover/title-popover.d.ts.map +1 -0
- package/dist/components/ui/title-popover/title-popover.js +96 -0
- package/dist/components/ui/title-popover/title-popover.js.map +1 -0
- package/dist/components/ui/title-popover/title-popover.module.less +10 -0
- package/dist/components/ui/title-popover/title-popover.stories.d.ts +11 -0
- package/dist/components/ui/title-popover/title-popover.stories.d.ts.map +1 -0
- package/dist/components/ui/title-popover/title-popover.stories.js +17 -0
- package/dist/components/ui/title-popover/title-popover.stories.js.map +1 -0
- package/dist/index.js +12 -24
- package/dist/index.js.map +1 -1
- package/dist/utils/ads-texts.js +1 -4
- package/dist/utils/ads-texts.js.map +1 -1
- package/dist/utils/date/__mocks__/date-mock.js +1 -5
- package/dist/utils/date/__mocks__/date-mock.js.map +1 -1
- package/dist/utils/date/date-range-picker-options.js +7 -12
- package/dist/utils/date/date-range-picker-options.js.map +1 -1
- package/dist/utils/date/date-range-picker-state.js +6 -10
- package/dist/utils/date/date-range-picker-state.js.map +1 -1
- package/dist/utils/date/date-tenant.js +1 -5
- package/dist/utils/date/date-tenant.js.map +1 -1
- package/dist/utils/date/date.js +3 -9
- package/dist/utils/date/date.js.map +1 -1
- package/dist/utils/date/index.js +4 -16
- package/dist/utils/date/index.js.map +1 -1
- package/dist/utils/format-big-numbers.js +1 -5
- package/dist/utils/format-big-numbers.js.map +1 -1
- package/dist/utils/formatters.js +13 -41
- package/dist/utils/formatters.js.map +1 -1
- package/dist/utils/helpers.js +2 -7
- package/dist/utils/helpers.js.map +1 -1
- package/dist/utils/string-case.js +2 -7
- package/dist/utils/string-case.js.map +1 -1
- package/dist/utils/use-client-rect.js +7 -11
- package/dist/utils/use-client-rect.js.map +1 -1
- package/dist/utils/use-target-range-store.d.ts +7 -0
- package/dist/utils/use-target-range-store.d.ts.map +1 -0
- package/dist/utils/use-target-range-store.js +9 -0
- package/dist/utils/use-target-range-store.js.map +1 -0
- package/package.json +2 -2
- package/src/components/ui/action-button/action-button.module.less +51 -0
- package/src/components/ui/action-button/action-button.module.less.d.ts +9 -0
- package/src/components/ui/action-button/action-button.stories.tsx +19 -0
- package/src/components/ui/action-button/action-button.tsx +82 -0
- package/src/components/ui/title-popover/title-popover.module.less +10 -0
- package/src/components/ui/title-popover/title-popover.module.less.d.ts +3 -0
- package/src/components/ui/title-popover/title-popover.stories.tsx +28 -0
- package/src/components/ui/title-popover/title-popover.tsx +86 -0
- package/src/utils/use-target-range-store.ts +17 -0
|
@@ -1,16 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.periodDateTitleFormatter = exports.getXLabels = void 0;
|
|
7
|
-
const moment_1 = __importDefault(require("moment"));
|
|
1
|
+
import moment from 'moment';
|
|
8
2
|
const xLabelFormats = {
|
|
9
3
|
hour: 'HH:mm',
|
|
10
4
|
day: 'MM/DD',
|
|
11
5
|
month: 'MMM',
|
|
12
6
|
};
|
|
13
|
-
const getXLabels = (periods, resolution, width) => {
|
|
7
|
+
export const getXLabels = (periods, resolution, width) => {
|
|
14
8
|
let labels = [];
|
|
15
9
|
if (resolution === 'hour') {
|
|
16
10
|
if (width / periods.length < 76) {
|
|
@@ -22,16 +16,16 @@ const getXLabels = (periods, resolution, width) => {
|
|
|
22
16
|
continue;
|
|
23
17
|
}
|
|
24
18
|
day = d;
|
|
25
|
-
labels.push([(
|
|
19
|
+
labels.push([moment(p.from).format(xLabelFormats.day), 1]);
|
|
26
20
|
}
|
|
27
21
|
}
|
|
28
22
|
else {
|
|
29
23
|
labels = periods.map(p => {
|
|
30
24
|
var _a;
|
|
31
25
|
return [
|
|
32
|
-
(
|
|
26
|
+
moment(p.from).format(xLabelFormats.hour) +
|
|
33
27
|
' - ' +
|
|
34
|
-
(
|
|
28
|
+
moment((_a = p.to) !== null && _a !== void 0 ? _a : p.from).format(xLabelFormats.hour),
|
|
35
29
|
1,
|
|
36
30
|
];
|
|
37
31
|
});
|
|
@@ -47,11 +41,11 @@ const getXLabels = (periods, resolution, width) => {
|
|
|
47
41
|
continue;
|
|
48
42
|
}
|
|
49
43
|
month = m;
|
|
50
|
-
labels.push([(
|
|
44
|
+
labels.push([moment(p.from).format(xLabelFormats.month), 1]);
|
|
51
45
|
}
|
|
52
46
|
}
|
|
53
47
|
else {
|
|
54
|
-
labels = periods.map(p => [(
|
|
48
|
+
labels = periods.map(p => [moment(p.from).format(xLabelFormats.day), 1]);
|
|
55
49
|
}
|
|
56
50
|
}
|
|
57
51
|
else if (resolution === 'week') {
|
|
@@ -65,11 +59,11 @@ const getXLabels = (periods, resolution, width) => {
|
|
|
65
59
|
}
|
|
66
60
|
if (p.to && p.to.getDate() > 3) {
|
|
67
61
|
month = p.to.getMonth();
|
|
68
|
-
labels.push([(
|
|
62
|
+
labels.push([moment(p.to).format(xLabelFormats.month), 1]);
|
|
69
63
|
}
|
|
70
64
|
else {
|
|
71
65
|
month = m;
|
|
72
|
-
labels.push([(
|
|
66
|
+
labels.push([moment(p.from).format(xLabelFormats.month), 1]);
|
|
73
67
|
}
|
|
74
68
|
}
|
|
75
69
|
}
|
|
@@ -77,28 +71,27 @@ const getXLabels = (periods, resolution, width) => {
|
|
|
77
71
|
labels = periods.map(p => {
|
|
78
72
|
var _a;
|
|
79
73
|
return [
|
|
80
|
-
(
|
|
74
|
+
moment(p.from).format(xLabelFormats.day) +
|
|
81
75
|
' - ' +
|
|
82
|
-
(
|
|
76
|
+
moment((_a = p.to) !== null && _a !== void 0 ? _a : p.from).format(xLabelFormats.day),
|
|
83
77
|
1,
|
|
84
78
|
];
|
|
85
79
|
});
|
|
86
80
|
}
|
|
87
81
|
}
|
|
88
82
|
else if (resolution === 'month') {
|
|
89
|
-
labels = periods.map(p => [(
|
|
83
|
+
labels = periods.map(p => [moment(p.from).format(xLabelFormats.month), 1]);
|
|
90
84
|
}
|
|
91
85
|
return labels;
|
|
92
86
|
};
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
hour: period => (0, moment_1.default)(period.from).format('MM/DD') +
|
|
87
|
+
export const periodDateTitleFormatter = {
|
|
88
|
+
hour: period => moment(period.from).format('MM/DD') +
|
|
96
89
|
' ' +
|
|
97
|
-
(
|
|
90
|
+
moment(period.from).format('HH:mm') +
|
|
98
91
|
' - ' +
|
|
99
|
-
(
|
|
100
|
-
day: period => (
|
|
101
|
-
month: period => (
|
|
102
|
-
week: period => (
|
|
92
|
+
moment(period.to).format('HH:mm'),
|
|
93
|
+
day: period => moment(period.from).format('MMMM DD, YYYY'),
|
|
94
|
+
month: period => moment(period.from).format('MMMM YYYY'),
|
|
95
|
+
week: period => moment(period.from).format('MM/DD/YYYY') + '-' + moment(period.to).format('MM/DD/YYYY'),
|
|
103
96
|
};
|
|
104
97
|
//# sourceMappingURL=labels.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/utils/labels.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"labels.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/utils/labels.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,42 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}));
|
|
9
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
-
}) : function(o, v) {
|
|
12
|
-
o["default"] = v;
|
|
13
|
-
});
|
|
14
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
-
if (mod && mod.__esModule) return mod;
|
|
16
|
-
var result = {};
|
|
17
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
-
__setModuleDefault(result, mod);
|
|
19
|
-
return result;
|
|
20
|
-
};
|
|
21
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
22
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
|
-
};
|
|
24
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
|
-
exports.PieChart = void 0;
|
|
26
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
27
|
-
const react_1 = require("react");
|
|
28
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
29
|
-
const design_system_1 = require("@servicetitan/design-system");
|
|
30
|
-
const const_1 = require("../utils/const");
|
|
31
|
-
const pie_1 = require("./pie");
|
|
32
|
-
const Styles = __importStar(require("./pie-chart.module.less"));
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
import { BodyText, Stack, StatusLight } from '@servicetitan/design-system';
|
|
5
|
+
import { convertSessionsToPieces, radiusRelativeDefault } from '../utils/const';
|
|
6
|
+
import { Pie } from './pie';
|
|
7
|
+
import * as Styles from './pie-chart.module.less';
|
|
33
8
|
const PieTitles = ({ title, pieces }) => {
|
|
34
|
-
return ((
|
|
9
|
+
return (_jsx("div", Object.assign({ className: classNames(Styles.titleWrapper, 'of-y-auto p-t-2') }, { children: _jsxs("div", { children: [!!pieces.length && (_jsx(Stack.Item, Object.assign({ className: "p-l-1 p-b-1" }, { children: _jsx(BodyText, Object.assign({ bold: true }, { children: title })) }))), pieces.map(piece => (_jsxs(Stack, Object.assign({ alignItems: "center" }, { children: [_jsx(StatusLight, { color: piece.color }), _jsx(BodyText, Object.assign({ className: "c-neutral-90", size: "medium" }, { children: piece.title }))] }), piece.title)))] }) })));
|
|
35
10
|
};
|
|
36
|
-
const PieChart = ({ height, width, title, sections, popoverContent, content, radiusRelative =
|
|
37
|
-
const pieces =
|
|
38
|
-
const style =
|
|
39
|
-
return ((
|
|
11
|
+
export const PieChart = ({ height, width, title, sections, popoverContent, content, radiusRelative = radiusRelativeDefault, hideTitles = false, }) => {
|
|
12
|
+
const pieces = useMemo(() => convertSessionsToPieces(sections, radiusRelative), [sections, radiusRelative]);
|
|
13
|
+
const style = useMemo(() => ({ height, width }), [height, width]);
|
|
14
|
+
return (_jsxs("div", Object.assign({ className: "d-f flex-row", style: style }, { children: [_jsx(Pie, { title: title, pieces: pieces, content: content, popoverContent: popoverContent, radiusRelative: radiusRelative, hideTitles: hideTitles }), !hideTitles && _jsx(PieTitles, { title: title, pieces: pieces })] })));
|
|
40
15
|
};
|
|
41
|
-
exports.PieChart = PieChart;
|
|
42
16
|
//# 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":"
|
|
1
|
+
{"version":3,"file":"pie-chart.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAM,MAAM,OAAO,CAAC;AACpC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE3E,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;AAElD,MAAM,SAAS,GAA8C,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;IAC/E,OAAO,CACH,4BAAK,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAAC,gBAC9D,0BACK,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAChB,KAAC,KAAK,CAAC,IAAI,kBAAC,SAAS,EAAC,aAAa,gBAC/B,KAAC,QAAQ,kBAAC,IAAI,sBAAE,KAAK,IAAY,IACxB,CAChB,EACA,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACjB,MAAC,KAAK,kBAAmB,UAAU,EAAC,QAAQ,iBACxC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAI,EACnC,KAAC,QAAQ,kBAAC,SAAS,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,gBAC3C,KAAK,CAAC,KAAK,IACL,MAJH,KAAK,CAAC,KAAK,CAKf,CACX,CAAC,IACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAsB,CAAC,EACxC,MAAM,EACN,KAAK,EACL,KAAK,EACL,QAAQ,EACR,cAAc,EACd,OAAO,EACP,cAAc,GAAG,qBAAqB,EACtC,UAAU,GAAG,KAAK,GACrB,EAAE,EAAE;IACD,MAAM,MAAM,GAAG,OAAO,CAClB,GAAG,EAAE,CAAC,uBAAuB,CAAC,QAAQ,EAAE,cAAc,CAAC,EACvD,CAAC,QAAQ,EAAE,cAAc,CAAC,CAC7B,CAAC;IACF,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAElE,OAAO,CACH,6BAAK,SAAS,EAAC,cAAc,EAAC,KAAK,EAAE,KAAK,iBACtC,KAAC,GAAG,IACA,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,GACxB,EACD,CAAC,UAAU,IAAI,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,GAAI,KACzD,CACT,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1,31 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
};
|
|
5
|
-
|
|
6
|
-
exports.Pie = void 0;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const react_1 = require("react");
|
|
9
|
-
const tokens_1 = __importDefault(require("@servicetitan/tokens"));
|
|
10
|
-
const design_system_1 = require("@servicetitan/design-system");
|
|
11
|
-
const use_client_rect_1 = require("../../../../utils/use-client-rect");
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useMemo, useState, Fragment } from 'react';
|
|
3
|
+
import tokens from '@servicetitan/tokens';
|
|
4
|
+
import { BodyText, Popover, Stack, StatusLight } from '@servicetitan/design-system';
|
|
5
|
+
import { useClientRect } from '../../../../utils/use-client-rect';
|
|
12
6
|
const chartPadding = 8;
|
|
13
7
|
const px = (value) => `${value !== null && value !== void 0 ? value : 0}px`;
|
|
14
|
-
const PiePieceSvg = ({ piece: { id, color, opacity, points, text, path }, selected }) => points && path ? ((
|
|
8
|
+
const PiePieceSvg = ({ piece: { id, color, opacity, points, text, path }, selected }) => points && path ? (_jsxs("g", Object.assign({ id: id }, { children: [!!selected && (_jsx("path", { d: path, fill: tokens.colorWhite, stroke: tokens.colorBlue200, strokeOpacity: "50%", strokeWidth: "3", paintOrder: "stroke" })), _jsx("path", { d: path, fill: color }), _jsx("svg", Object.assign({ x: points[4][0] - 10, y: points[4][1] - (points[4][1] > 0 ? 3 : 1), width: 20, height: 6 }, { children: _jsx("text", Object.assign({ x: "50%", y: "50%", fontSize: 4, fontWeight: 600, fill: opacity > 0.3 ? tokens.colorWhite : tokens.colorBlack, dominantBaseline: "middle", textAnchor: "middle" }, { children: text })) }))] }))) : null;
|
|
15
9
|
const PiePieceHover = ({ piece, onMouse }) => {
|
|
16
|
-
const onMouseEnter =
|
|
17
|
-
const onMouseLeave =
|
|
18
|
-
return ((
|
|
10
|
+
const onMouseEnter = useCallback(() => onMouse(piece.id, true), [onMouse, piece.id]);
|
|
11
|
+
const onMouseLeave = useCallback(() => onMouse(piece.id, false), [onMouse, piece.id]);
|
|
12
|
+
return (_jsx("path", { d: piece.path, fill: "white", opacity: "0", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }));
|
|
19
13
|
};
|
|
20
|
-
const PieSvg = ({ pieces, selectedIndex, radiusRelative }) => ((
|
|
21
|
-
const PieSvgHover = ({ pieces, onMouse, radiusRelative }) => ((
|
|
22
|
-
const Pie = ({ pieces, popoverContent: PopoverContent, content: PieContent, radiusRelative, hideTitles, }) => {
|
|
23
|
-
const [selectedIndex, setSelectedIndex] =
|
|
24
|
-
const [rect, ref] =
|
|
25
|
-
const onMouse =
|
|
14
|
+
const PieSvg = ({ pieces, selectedIndex, radiusRelative }) => (_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 ? _jsx(PiePieceSvg, { piece: p, selected: index === selectedIndex }, p.id) : null), selectedIndex >= 0 && selectedIndex < pieces.length && (_jsx("use", { xlinkHref: pieces[selectedIndex].id }))] })));
|
|
15
|
+
const PieSvgHover = ({ pieces, onMouse, radiusRelative }) => (_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 ? _jsx(PiePieceHover, { piece: p, onMouse: onMouse }, p.id) : null) })));
|
|
16
|
+
export const Pie = ({ pieces, popoverContent: PopoverContent, content: PieContent, radiusRelative, hideTitles, }) => {
|
|
17
|
+
const [selectedIndex, setSelectedIndex] = useState(-1);
|
|
18
|
+
const [rect, ref] = useClientRect();
|
|
19
|
+
const onMouse = useCallback((id, isEnter) => {
|
|
26
20
|
setSelectedIndex(isEnter ? pieces.findIndex(p => p.id === id) : -1);
|
|
27
21
|
}, [pieces, setSelectedIndex]);
|
|
28
|
-
const container =
|
|
22
|
+
const container = useMemo(() => {
|
|
29
23
|
var _a;
|
|
30
24
|
const height = (_a = rect === null || rect === void 0 ? void 0 : rect.height) !== null && _a !== void 0 ? _a : 0;
|
|
31
25
|
return {
|
|
@@ -39,7 +33,7 @@ const Pie = ({ pieces, popoverContent: PopoverContent, content: PieContent, radi
|
|
|
39
33
|
: {},
|
|
40
34
|
};
|
|
41
35
|
}, [rect]);
|
|
42
|
-
const triggersStyles =
|
|
36
|
+
const triggersStyles = useMemo(() => container.height
|
|
43
37
|
? pieces.map(p => p.points
|
|
44
38
|
? {
|
|
45
39
|
top: px((container.height * (radiusRelative + p.points[4][1])) /
|
|
@@ -50,12 +44,11 @@ const Pie = ({ pieces, popoverContent: PopoverContent, content: PieContent, radi
|
|
|
50
44
|
}
|
|
51
45
|
: { top: '', left: '' })
|
|
52
46
|
: [], [pieces, container, radiusRelative]);
|
|
53
|
-
return ((
|
|
47
|
+
return (_jsx("div", Object.assign({ ref: ref, style: container.styles, className: "position-relative" }, { children: pieces.every(p => !p.path) ? (_jsx(Stack, Object.assign({ className: "h-100", justifyContent: "center", alignItems: "center" }, { children: "No Data" }))) : (_jsxs(Fragment, { children: [triggersStyles
|
|
54
48
|
.filter(ts => !!ts.left && !!ts.top)
|
|
55
49
|
.map((ts, ind) => {
|
|
56
50
|
var _a, _b, _c;
|
|
57
|
-
return ((
|
|
58
|
-
}), !!PieContent && (
|
|
51
|
+
return (_jsx("div", Object.assign({ style: ts, className: "position-absolute" }, { children: _jsx(Popover, Object.assign({ portal: true, trigger: _jsx("span", { children: " " }), open: selectedIndex === ind, direction: "rb", padding: "s", width: "auto" }, { children: selectedIndex === ind && (_jsxs(Stack, Object.assign({ direction: "column" }, { children: [!hideTitles && (_jsxs(Stack, Object.assign({ alignItems: "center" }, { children: [_jsx(StatusLight, { color: pieces[ind].color }), _jsx(BodyText, Object.assign({ size: "small", bold: true }, { children: pieces[ind].title }))] }))), !!PopoverContent && (_jsx(Stack.Item, Object.assign({ className: "m-l-1" }, { children: _jsx(PopoverContent, { index: ind, data: (_a = pieces[ind]) === null || _a === void 0 ? void 0 : _a.data, text: (_b = pieces[ind]) === null || _b === void 0 ? void 0 : _b.text, value: (_c = pieces[ind]) === null || _c === void 0 ? void 0 : _c.value }) })))] }))) })) }), ts.left + ts.top));
|
|
52
|
+
}), !!PieContent && _jsx(PieContent, {}), _jsx(PieSvg, { pieces: pieces, selectedIndex: selectedIndex, radiusRelative: radiusRelative }), _jsx(PieSvgHover, { pieces: pieces, onMouse: onMouse, radiusRelative: radiusRelative })] })) })));
|
|
59
53
|
};
|
|
60
|
-
exports.Pie = Pie;
|
|
61
54
|
//# sourceMappingURL=pie.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pie.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PieChart = void 0;
|
|
4
|
-
var pie_chart_1 = require("./components/pie-chart");
|
|
5
|
-
Object.defineProperty(exports, "PieChart", { enumerable: true, get: function () { return pie_chart_1.PieChart; } });
|
|
1
|
+
export { PieChart } from './components/pie-chart';
|
|
6
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC"}
|
|
@@ -1,29 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
const index_1 = require("./index");
|
|
6
|
-
const design_system_1 = require("@servicetitan/design-system");
|
|
7
|
-
exports.default = {
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { PieChart } from './index';
|
|
3
|
+
import { Eyebrow, Stack, BodyText } from '@servicetitan/design-system';
|
|
4
|
+
export default {
|
|
8
5
|
title: 'Marketing UI/charts/PieChart',
|
|
9
|
-
component:
|
|
6
|
+
component: PieChart,
|
|
10
7
|
parameters: {},
|
|
11
8
|
};
|
|
12
|
-
const pieChart5AutoColor = () => ((
|
|
9
|
+
export const pieChart5AutoColor = () => (_jsx(PieChart, { title: "Pie Chart", height: 250, sections: [
|
|
13
10
|
{ title: 'lorem', value: 99 },
|
|
14
11
|
{ title: 'ipsum', value: 88 },
|
|
15
12
|
{ title: 'dolor', value: 66 },
|
|
16
13
|
{ title: 'sit', value: 55 },
|
|
17
14
|
{ title: 'amet', value: 22 },
|
|
18
|
-
] }
|
|
19
|
-
|
|
20
|
-
const pieChartWithContent = () => ((0, jsx_runtime_1.jsx)(index_1.PieChart, { title: "Pie Chart", height: 300, sections: [
|
|
15
|
+
] }));
|
|
16
|
+
export const pieChartWithContent = () => (_jsx(PieChart, { title: "Pie Chart", height: 300, sections: [
|
|
21
17
|
{ title: 'New Customer', value: 61 },
|
|
22
18
|
{ title: 'Existing Customer', value: 90 },
|
|
23
|
-
], content: () => ((
|
|
24
|
-
|
|
25
|
-
const
|
|
26
|
-
exports.pieChart1CustomColor = pieChart1CustomColor;
|
|
27
|
-
const pieChartNoData = () => (0, jsx_runtime_1.jsx)(index_1.PieChart, { title: "Pie Chart", height: 250, sections: [] }, void 0);
|
|
28
|
-
exports.pieChartNoData = pieChartNoData;
|
|
19
|
+
], content: () => (_jsxs(Stack, Object.assign({ className: "h-100", justifyContent: "center", alignItems: "center", direction: "column" }, { children: [_jsx(BodyText, Object.assign({ bold: true }, { children: "244" })), _jsx(Eyebrow, Object.assign({ size: "small" }, { children: "Total Leads" }))] }))), radiusRelative: 45, hideTitles: true }));
|
|
20
|
+
export const pieChart1CustomColor = () => (_jsx(PieChart, { title: "Pie Chart", height: 250, sections: [{ title: 'lorem', value: 99, color: '#ffe278' }] }));
|
|
21
|
+
export const pieChartNoData = () => _jsx(PieChart, { title: "Pie Chart", height: 250, sections: [] });
|
|
29
22
|
//# sourceMappingURL=pie-chart.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/pie-chart.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pie-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/charts/pie-chart/pie-chart.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvE,eAAe;IACX,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,CACpC,KAAC,QAAQ,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,GACH,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CACrC,KAAC,QAAQ,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,MAAC,KAAK,kBAAC,SAAS,EAAC,OAAO,EAAC,cAAc,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,iBACnF,KAAC,QAAQ,kBAAC,IAAI,+BAAe,EAC7B,KAAC,OAAO,kBAAC,IAAI,EAAC,OAAO,iCAAsB,KACvC,CACX,EACD,cAAc,EAAE,EAAE,EAClB,UAAU,SACZ,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACtC,KAAC,QAAQ,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,GAC7D,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,GAAI,CAAC"}
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.convertSessionsToPieces = exports.radiusRelativeDefault = void 0;
|
|
4
|
-
const accounting_1 = require("accounting");
|
|
5
|
-
exports.radiusRelativeDefault = 50;
|
|
1
|
+
import { formatNumber } from 'accounting';
|
|
2
|
+
export const radiusRelativeDefault = 50;
|
|
6
3
|
const radiusInt = 20;
|
|
7
4
|
const getRadiusExt = (radiusRelative) => radiusRelative - 5; // need to have some space to stroke selected piece
|
|
8
5
|
const getRadiusMid = (radiusRelative) => (3 * radiusRelative) / 4;
|
|
@@ -14,7 +11,7 @@ const formatValue = (val) => {
|
|
|
14
11
|
}
|
|
15
12
|
const valueMain = val ? Math.abs(Math.round(val)) : 0;
|
|
16
13
|
if (valueMain > 0) {
|
|
17
|
-
return
|
|
14
|
+
return formatNumber(valueMain, 0) + '%';
|
|
18
15
|
}
|
|
19
16
|
const valueDecimal = Math.max(Math.floor(val * 10) - valueMain * 10, 1);
|
|
20
17
|
return `0.${valueDecimal}%`;
|
|
@@ -25,7 +22,7 @@ const convertPointsToPath = (points, wideAngle, radiusExt) => `M ${points[3][0]}
|
|
|
25
22
|
`L ${points[2][0]},${points[2][1]} ` +
|
|
26
23
|
`A ${radiusInt},${radiusInt} 0 ${wideAngle ? 1 : 0} 0 ${points[3][0]},${points[3][1]} ` +
|
|
27
24
|
`L ${points[0][0]},${points[0][1]} `;
|
|
28
|
-
const convertSessionsToPieces = (sections, radiusRelative) => {
|
|
25
|
+
export const convertSessionsToPieces = (sections, radiusRelative) => {
|
|
29
26
|
const total = sections.reduce((sum, curr) => sum + curr.value, 0);
|
|
30
27
|
const opacityStep = (1 - lowestOpacity) / (Math.max(sections.length, 2) - 1);
|
|
31
28
|
let angleSum = 0;
|
|
@@ -84,5 +81,4 @@ const convertSessionsToPieces = (sections, radiusRelative) => {
|
|
|
84
81
|
}
|
|
85
82
|
return pieces;
|
|
86
83
|
};
|
|
87
|
-
exports.convertSessionsToPieces = convertSessionsToPieces;
|
|
88
84
|
//# sourceMappingURL=const.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"const.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/utils/const.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"const.js","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/utils/const.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,CAAC,MAAM,qBAAqB,GAAG,EAAE,CAAC;AACxC,MAAM,SAAS,GAAG,EAAE,CAAC;AACrB,MAAM,YAAY,GAAG,CAAC,cAAsB,EAAE,EAAE,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,mDAAmD;AACxH,MAAM,YAAY,GAAG,CAAC,cAAsB,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;AAE1E,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC;AAC1B,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B,MAAM,WAAW,GAAG,CAAC,GAAW,EAAU,EAAE;IACxC,IAAI,CAAC,GAAG,EAAE;QACN,OAAO,IAAI,CAAC;KACf;IAED,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtD,IAAI,SAAS,GAAG,CAAC,EAAE;QACf,OAAO,YAAY,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC;KAC3C;IAED,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,SAAS,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;IAExE,OAAO,KAAK,YAAY,GAAG,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,MAAmB,EAAE,SAAkB,EAAE,SAAiB,EAAU,EAAE,CAC/F,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;IACpC,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;IACpC,KAAK,SAAS,IAAI,SAAS,MAAM,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;IACvF,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;IACpC,KAAK,SAAS,IAAI,SAAS,MAAM,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;IACvF,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAEzC,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACnC,QAA8B,EAC9B,cAAsB,EACT,EAAE;IACf,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAClE,MAAM,WAAW,GAAG,CAAC,CAAC,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7E,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAC;IAE/C,MAAM,MAAM,GAAG,QAAQ;SAClB,KAAK,EAAE;SACP,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;SACjC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;;QACd,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5C,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC;QACpC,MAAM,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;QAC3C,MAAM,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,CAAC,CAAC;QACxC,MAAM,QAAQ,GAAG,UAAU,GAAG,KAAK,CAAC;QACpC,MAAM,OAAO,GAAG,CAAC,GAAG,WAAW,GAAG,KAAK,CAAC;QAExC,MAAM,MAAM,GAA4B,CAAC,CAAC,KAAK;YAC3C,CAAC,CAAC;gBACI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;gBACzE,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;gBACrE,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;gBACrE,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;gBACzE,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;aACxE;YACH,CAAC,CAAC,SAAS,CAAC;QAEhB,QAAQ,IAAI,KAAK,CAAC;QAElB,OAAO;YACH,EAAE,EAAE,MAAM,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE;YACtD,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,IAAI,EAAE,WAAW,CAAC,OAAO,GAAG,GAAG,CAAC;YAChC,IAAI,EAAE,CAAC,CAAC,IAAI;YACZ,KAAK,EAAE,MAAA,CAAC,CAAC,KAAK,mCAAI,iBAAiB,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;YACxD,OAAO;YACP,KAAK,EAAE,CAAC,CAAC,KAAK;YACd,MAAM;YACN,IAAI,EAAE,MAAM;gBACR,CAAC,CAAC,mBAAmB,CAAC,MAAM,EAAE,QAAQ,GAAG,UAAU,IAAI,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;gBAC1E,CAAC,CAAC,SAAS;SAClB,CAAC;IACN,CAAC,CAAC,CAAC;IAEP,IAAI,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAE3C,IAAI,KAAK,EAAE;YACP,KAAK,CAAC,MAAM,GAAG;gBACX,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC;gBACvB,CAAC,SAAS,EAAE,SAAS,CAAC;gBACtB,CAAC,SAAS,EAAE,CAAC,SAAS,CAAC;gBACvB,CAAC,CAAC,SAAS,EAAE,CAAC,SAAS,CAAC;gBACxB,CAAC,CAAC,EAAE,CAAC,CAAC;aACT,CAAC;YAEF,KAAK,CAAC,IAAI;gBACN,KAAK,CAAC,SAAS,IAAI,CAAC,GAAG;oBACvB,KAAK,SAAS,IAAI,SAAS,UAAU,SAAS,IAAI,CAAC,GAAG;oBACtD,KAAK,SAAS,IAAI,SAAS,UAAU,CAAC,SAAS,IAAI,CAAC,GAAG,CAAC;SAC/D;KACJ;IAED,OAAO,MAAM,CAAC;AAClB,CAAC,CAAC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
3
2
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
4
3
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -8,18 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
8
7
|
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
9
8
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
10
9
|
};
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const mobx_1 = require("mobx");
|
|
19
|
-
const mobx_react_1 = require("mobx-react");
|
|
20
|
-
const react_image_crop_1 = __importDefault(require("react-image-crop"));
|
|
21
|
-
require("react-image-crop/dist/ReactCrop.css");
|
|
22
|
-
let ImageCropper = class ImageCropper extends react_1.Component {
|
|
10
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
+
import { Component } from 'react';
|
|
12
|
+
import { observable, action, makeObservable } from 'mobx';
|
|
13
|
+
import { observer } from 'mobx-react';
|
|
14
|
+
import ReactCrop from 'react-image-crop';
|
|
15
|
+
import 'react-image-crop/dist/ReactCrop.css';
|
|
16
|
+
let ImageCropper = class ImageCropper extends Component {
|
|
23
17
|
constructor(props) {
|
|
24
18
|
super(props);
|
|
25
19
|
Object.defineProperty(this, "src", {
|
|
@@ -108,39 +102,39 @@ let ImageCropper = class ImageCropper extends react_1.Component {
|
|
|
108
102
|
return false;
|
|
109
103
|
}
|
|
110
104
|
});
|
|
111
|
-
|
|
105
|
+
makeObservable(this);
|
|
112
106
|
}
|
|
113
107
|
render() {
|
|
114
|
-
return this.src ? ((
|
|
108
|
+
return this.src ? (_jsx(ReactCrop, { locked: true, src: this.src, crop: this.crop, onChange: this.handleChange, onImageLoaded: this.handleImageLoaded })) : null;
|
|
115
109
|
}
|
|
116
110
|
};
|
|
117
111
|
__decorate([
|
|
118
|
-
|
|
112
|
+
observable,
|
|
119
113
|
__metadata("design:type", String)
|
|
120
114
|
], ImageCropper.prototype, "src", void 0);
|
|
121
115
|
__decorate([
|
|
122
|
-
|
|
116
|
+
observable,
|
|
123
117
|
__metadata("design:type", Object)
|
|
124
118
|
], ImageCropper.prototype, "crop", void 0);
|
|
125
119
|
__decorate([
|
|
126
|
-
|
|
120
|
+
observable,
|
|
127
121
|
__metadata("design:type", HTMLImageElement)
|
|
128
122
|
], ImageCropper.prototype, "image", void 0);
|
|
129
123
|
__decorate([
|
|
130
|
-
|
|
124
|
+
action,
|
|
131
125
|
__metadata("design:type", Object)
|
|
132
126
|
], ImageCropper.prototype, "componentDidMount", void 0);
|
|
133
127
|
__decorate([
|
|
134
|
-
|
|
128
|
+
action,
|
|
135
129
|
__metadata("design:type", Object)
|
|
136
130
|
], ImageCropper.prototype, "handleChange", void 0);
|
|
137
131
|
__decorate([
|
|
138
|
-
|
|
132
|
+
action,
|
|
139
133
|
__metadata("design:type", Object)
|
|
140
134
|
], ImageCropper.prototype, "handleImageLoaded", void 0);
|
|
141
135
|
ImageCropper = __decorate([
|
|
142
|
-
|
|
136
|
+
observer,
|
|
143
137
|
__metadata("design:paramtypes", [Object])
|
|
144
138
|
], ImageCropper);
|
|
145
|
-
|
|
139
|
+
export { ImageCropper };
|
|
146
140
|
//# sourceMappingURL=image-cropper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-cropper.js","sourceRoot":"","sources":["../../../src/components/image-cropper/image-cropper.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"image-cropper.js","sourceRoot":"","sources":["../../../src/components/image-cropper/image-cropper.tsx"],"names":[],"mappings":"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"}
|