@servicetitan/marketing-ui 1.6.1 → 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/ads/ads-stat.d.ts +3 -3
- package/dist/components/ads/ads-stat.d.ts.map +1 -1
- package/dist/components/ads/ads-stat.js +4 -4
- package/dist/components/ads/ads-stat.js.map +1 -1
- package/dist/components/charts/funnel-chart/components/funnel-chart.d.ts +2 -2
- package/dist/components/charts/funnel-chart/components/funnel-chart.d.ts.map +1 -1
- package/dist/components/charts/funnel-chart/components/funnel-chart.js +4 -4
- package/dist/components/charts/funnel-chart/components/funnel-chart.js.map +1 -1
- package/dist/components/charts/funnel-chart/components/funnel-svg.d.ts +2 -2
- package/dist/components/charts/funnel-chart/components/funnel-svg.d.ts.map +1 -1
- package/dist/components/charts/funnel-chart/components/funnel-svg.js +4 -4
- package/dist/components/charts/funnel-chart/components/funnel-svg.js.map +1 -1
- package/dist/components/charts/funnel-chart/funnel-chart.stories.d.ts +2 -2
- package/dist/components/charts/funnel-chart/funnel-chart.stories.d.ts.map +1 -1
- package/dist/components/charts/funnel-chart/funnel-chart.stories.js +5 -5
- package/dist/components/charts/funnel-chart/funnel-chart.stories.js.map +1 -1
- package/dist/components/charts/line-chart/components/body.d.ts +2 -2
- package/dist/components/charts/line-chart/components/body.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/body.js +12 -12
- package/dist/components/charts/line-chart/components/body.js.map +1 -1
- package/dist/components/charts/line-chart/components/body.module.less +1 -1
- package/dist/components/charts/line-chart/components/container.d.ts +2 -2
- package/dist/components/charts/line-chart/components/container.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/container.js +5 -5
- package/dist/components/charts/line-chart/components/container.js.map +1 -1
- package/dist/components/charts/line-chart/components/hover-popover.d.ts +2 -2
- package/dist/components/charts/line-chart/components/hover-popover.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/hover-popover.js +8 -8
- package/dist/components/charts/line-chart/components/hover-popover.js.map +1 -1
- package/dist/components/charts/line-chart/components/hover-popover.module.less +1 -1
- package/dist/components/charts/line-chart/components/sidebar.d.ts +2 -2
- package/dist/components/charts/line-chart/components/sidebar.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/sidebar.js +3 -3
- package/dist/components/charts/line-chart/components/sidebar.js.map +1 -1
- package/dist/components/charts/line-chart/components/sidebar.module.less +2 -2
- package/dist/components/charts/line-chart/components/stuff.d.ts +4 -4
- package/dist/components/charts/line-chart/components/stuff.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/stuff.js +6 -6
- package/dist/components/charts/line-chart/components/stuff.js.map +1 -1
- package/dist/components/charts/line-chart/components/svg-bars.d.ts +3 -3
- package/dist/components/charts/line-chart/components/svg-bars.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/svg-bars.js +9 -9
- package/dist/components/charts/line-chart/components/svg-bars.js.map +1 -1
- package/dist/components/charts/line-chart/components/svg-body.d.ts +3 -3
- package/dist/components/charts/line-chart/components/svg-body.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/svg-body.js +6 -6
- package/dist/components/charts/line-chart/components/svg-body.js.map +1 -1
- package/dist/components/charts/line-chart/components/svg-lines.d.ts +2 -2
- package/dist/components/charts/line-chart/components/svg-lines.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/svg-lines.js +5 -5
- package/dist/components/charts/line-chart/components/svg-lines.js.map +1 -1
- package/dist/components/charts/line-chart/line-chart.stories.d.ts +2 -2
- package/dist/components/charts/line-chart/line-chart.stories.d.ts.map +1 -1
- package/dist/components/charts/line-chart/line-chart.stories.js +7 -7
- package/dist/components/charts/line-chart/line-chart.stories.js.map +1 -1
- package/dist/components/charts/line-chart/stores/line-chart.store.js +5 -5
- package/dist/components/charts/line-chart/stores/line-chart.store.js.map +1 -1
- package/dist/components/charts/line-chart/stores/svg.store.js +2 -2
- package/dist/components/charts/line-chart/stores/svg.store.js.map +1 -1
- package/dist/components/charts/line-chart/utils/formatters.js +2 -2
- package/dist/components/charts/line-chart/utils/formatters.js.map +1 -1
- package/dist/components/charts/line-chart/utils/interfaces.d.ts +2 -2
- package/dist/components/charts/line-chart/utils/interfaces.d.ts.map +1 -1
- package/dist/components/charts/line-chart/utils/labels.js +16 -16
- package/dist/components/charts/line-chart/utils/labels.js.map +1 -1
- package/dist/components/charts/pie-chart/components/pie-chart.d.ts +2 -2
- package/dist/components/charts/pie-chart/components/pie-chart.d.ts.map +1 -1
- package/dist/components/charts/pie-chart/components/pie-chart.js +5 -5
- package/dist/components/charts/pie-chart/components/pie-chart.js.map +1 -1
- package/dist/components/charts/pie-chart/components/pie.d.ts +5 -2
- package/dist/components/charts/pie-chart/components/pie.d.ts.map +1 -1
- package/dist/components/charts/pie-chart/components/pie.js +21 -41
- package/dist/components/charts/pie-chart/components/pie.js.map +1 -1
- package/dist/components/charts/pie-chart/pie-chart.stories.d.ts +3 -2
- package/dist/components/charts/pie-chart/pie-chart.stories.d.ts.map +1 -1
- package/dist/components/charts/pie-chart/pie-chart.stories.js +10 -4
- 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 +10 -8
- package/dist/components/charts/pie-chart/utils/const.js.map +1 -1
- package/dist/components/charts/pie-chart/utils/interface.d.ts +5 -2
- package/dist/components/charts/pie-chart/utils/interface.d.ts.map +1 -1
- package/dist/components/image-cropper/image-cropper.d.ts +2 -2
- package/dist/components/image-cropper/image-cropper.d.ts.map +1 -1
- package/dist/components/image-cropper/image-cropper.js +4 -4
- package/dist/components/image-cropper/image-cropper.js.map +1 -1
- package/dist/components/image-cropper/image-cropper.stories.js +6 -9
- package/dist/components/image-cropper/image-cropper.stories.js.map +1 -1
- package/dist/components/stat/stat-card.d.ts +5 -3
- package/dist/components/stat/stat-card.d.ts.map +1 -1
- package/dist/components/stat/stat-card.js +21 -14
- package/dist/components/stat/stat-card.js.map +1 -1
- package/dist/components/stat/stat-card.module.less +7 -0
- package/dist/components/stat/stat-cards.stories.d.ts +3 -2
- package/dist/components/stat/stat-cards.stories.d.ts.map +1 -1
- package/dist/components/stat/stat-cards.stories.js +7 -6
- package/dist/components/stat/stat-cards.stories.js.map +1 -1
- package/dist/components/stat/stat-extended-card.d.ts.map +1 -1
- package/dist/components/stat/stat-extended-card.js +22 -2
- package/dist/components/stat/stat-extended-card.js.map +1 -1
- package/dist/components/stat/stat-extended-card.stories.d.ts +2 -2
- package/dist/components/stat/stat-extended-card.stories.d.ts.map +1 -1
- package/dist/components/stat/stat-extended-card.stories.js +4 -4
- package/dist/components/stat/stat-extended-card.stories.js.map +1 -1
- package/dist/components/ui/centered-spinner.d.ts +2 -2
- package/dist/components/ui/centered-spinner.d.ts.map +1 -1
- package/dist/components/ui/centered-spinner.js +2 -2
- package/dist/components/ui/centered-spinner.js.map +1 -1
- package/dist/components/ui/centered-spinner.stories.d.ts +2 -2
- package/dist/components/ui/centered-spinner.stories.d.ts.map +1 -1
- package/dist/components/ui/centered-spinner.stories.js +4 -4
- package/dist/components/ui/centered-spinner.stories.js.map +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.js +5 -5
- package/dist/components/ui/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.module.less +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.stories.js +3 -3
- package/dist/components/ui/date-range-picker/date-range-picker.stories.js.map +1 -1
- package/dist/components/ui/disabled-button.d.ts +2 -2
- package/dist/components/ui/disabled-button.d.ts.map +1 -1
- package/dist/components/ui/disabled-button.js +1 -1
- package/dist/components/ui/disabled-button.js.map +1 -1
- package/dist/components/ui/line-text/line-text-body.stories.d.ts +2 -2
- package/dist/components/ui/line-text/line-text-body.stories.d.ts.map +1 -1
- package/dist/components/ui/line-text/line-text-body.stories.js +3 -3
- package/dist/components/ui/line-text/line-text-body.stories.js.map +1 -1
- package/dist/components/ui/line-text/line-text-head.stories.d.ts +2 -2
- package/dist/components/ui/line-text/line-text-head.stories.d.ts.map +1 -1
- package/dist/components/ui/line-text/line-text-head.stories.js +3 -3
- package/dist/components/ui/line-text/line-text-head.stories.js.map +1 -1
- package/dist/components/ui/line-text/line-text.d.ts +3 -3
- package/dist/components/ui/line-text/line-text.d.ts.map +1 -1
- package/dist/components/ui/line-text/line-text.js +7 -7
- package/dist/components/ui/line-text/line-text.js.map +1 -1
- package/dist/utils/date/date-range-picker-options.js +2 -2
- package/dist/utils/date/date-range-picker-options.js.map +1 -1
- package/dist/utils/date/date-range-picker-state.js +1 -1
- package/dist/utils/date/date-range-picker-state.js.map +1 -1
- package/dist/utils/date/date.js +1 -1
- package/dist/utils/date/date.js.map +1 -1
- package/dist/utils/formatters.js +7 -7
- package/dist/utils/formatters.js.map +1 -1
- package/dist/utils/use-client-rect.js +6 -25
- package/dist/utils/use-client-rect.js.map +1 -1
- package/package.json +2 -2
- package/src/components/ads/ads-stat.tsx +3 -3
- package/src/components/charts/funnel-chart/components/funnel-chart.tsx +2 -2
- package/src/components/charts/funnel-chart/components/funnel-svg.tsx +2 -2
- package/src/components/charts/funnel-chart/funnel-chart.stories.tsx +2 -2
- package/src/components/charts/line-chart/components/body.module.less +1 -1
- package/src/components/charts/line-chart/components/body.tsx +5 -5
- package/src/components/charts/line-chart/components/container.tsx +2 -2
- package/src/components/charts/line-chart/components/hover-popover.module.less +1 -1
- package/src/components/charts/line-chart/components/hover-popover.tsx +4 -4
- package/src/components/charts/line-chart/components/sidebar.module.less +2 -2
- package/src/components/charts/line-chart/components/sidebar.tsx +2 -2
- package/src/components/charts/line-chart/components/stuff.tsx +5 -5
- package/src/components/charts/line-chart/components/svg-bars.tsx +3 -3
- package/src/components/charts/line-chart/components/svg-body.tsx +4 -4
- package/src/components/charts/line-chart/components/svg-lines.tsx +3 -3
- package/src/components/charts/line-chart/line-chart.stories.tsx +1 -1
- package/src/components/charts/line-chart/utils/interfaces.ts +2 -2
- package/src/components/charts/pie-chart/components/pie-chart.tsx +20 -7
- package/src/components/charts/pie-chart/components/pie.tsx +42 -22
- package/src/components/charts/pie-chart/pie-chart.stories.tsx +20 -1
- package/src/components/charts/pie-chart/utils/const.ts +11 -6
- package/src/components/charts/pie-chart/utils/interface.ts +5 -2
- package/src/components/image-cropper/image-cropper.stories.tsx +8 -8
- package/src/components/image-cropper/image-cropper.tsx +2 -2
- package/src/components/stat/stat-card.module.less +7 -0
- package/src/components/stat/stat-card.module.less.d.ts +1 -0
- package/src/components/stat/stat-card.tsx +20 -7
- package/src/components/stat/stat-cards.stories.tsx +5 -2
- package/src/components/stat/stat-extended-card.stories.tsx +2 -2
- package/src/components/stat/stat-extended-card.tsx +5 -4
- package/src/components/ui/centered-spinner.stories.tsx +2 -2
- package/src/components/ui/centered-spinner.tsx +2 -6
- package/src/components/ui/date-range-picker/date-range-picker.module.less +1 -1
- package/src/components/ui/date-range-picker/date-range-picker.stories.tsx +2 -2
- package/src/components/ui/date-range-picker/date-range-picker.tsx +1 -1
- package/src/components/ui/disabled-button.tsx +2 -2
- package/src/components/ui/line-text/line-text-body.stories.tsx +2 -2
- package/src/components/ui/line-text/line-text-head.stories.tsx +2 -2
- package/src/components/ui/line-text/line-text.tsx +3 -11
- package/src/utils/use-client-rect.ts +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
import { StatCardProps } from '../stat/stat-card';
|
|
3
3
|
import { StatExtendedCardProps } from '../stat/stat-extended-card';
|
|
4
4
|
import { AdsStatType } from '../../utils/ads-texts';
|
|
@@ -6,12 +6,12 @@ interface AdsPerformanceStatProps extends Omit<StatCardProps, 'title'> {
|
|
|
6
6
|
stat: AdsStatType;
|
|
7
7
|
title?: string;
|
|
8
8
|
}
|
|
9
|
-
export declare const AdsPerformanceStatCard:
|
|
9
|
+
export declare const AdsPerformanceStatCard: FC<AdsPerformanceStatProps>;
|
|
10
10
|
interface AdsPerformanceStatExtendedProps extends Omit<StatExtendedCardProps, 'title'> {
|
|
11
11
|
stat: AdsStatType;
|
|
12
12
|
title?: string;
|
|
13
13
|
title2: string;
|
|
14
14
|
}
|
|
15
|
-
export declare const AdsPerformanceStatExtendedCard:
|
|
15
|
+
export declare const AdsPerformanceStatExtendedCard: FC<AdsPerformanceStatExtendedProps>;
|
|
16
16
|
export {};
|
|
17
17
|
//# sourceMappingURL=ads-stat.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ads-stat.d.ts","sourceRoot":"","sources":["../../../src/components/ads/ads-stat.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ads-stat.d.ts","sourceRoot":"","sources":["../../../src/components/ads/ads-stat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAY,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAoB,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EAAuB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzE,UAAU,uBAAwB,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IAClE,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,uBAAuB,CAK9D,CAAC;AAEF,UAAU,+BAAgC,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC;IAClF,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,8BAA8B,EAAE,EAAE,CAAC,+BAA+B,CAK9E,CAAC"}
|
|
@@ -8,16 +8,16 @@ const ads_texts_1 = require("../../utils/ads-texts");
|
|
|
8
8
|
const string_case_1 = require("../../utils/string-case");
|
|
9
9
|
const AdsPerformanceStatCard = props => {
|
|
10
10
|
var _a, _b;
|
|
11
|
-
const titleText = (_a = props.title) !== null && _a !== void 0 ? _a : string_case_1.camelCaseToTitleCase(props.stat);
|
|
11
|
+
const titleText = (_a = props.title) !== null && _a !== void 0 ? _a : (0, string_case_1.camelCaseToTitleCase)(props.stat);
|
|
12
12
|
const hintText = (_b = props.description) !== null && _b !== void 0 ? _b : ads_texts_1.adsStatDescriptions[props.stat];
|
|
13
|
-
return jsx_runtime_1.jsx(stat_card_1.StatCard, Object.assign({}, props, { title: titleText, description: hintText }), void 0);
|
|
13
|
+
return (0, jsx_runtime_1.jsx)(stat_card_1.StatCard, Object.assign({}, props, { title: titleText, description: hintText }), void 0);
|
|
14
14
|
};
|
|
15
15
|
exports.AdsPerformanceStatCard = AdsPerformanceStatCard;
|
|
16
16
|
const AdsPerformanceStatExtendedCard = props => {
|
|
17
17
|
var _a, _b;
|
|
18
|
-
const titleText = (_a = props.title) !== null && _a !== void 0 ? _a : string_case_1.camelCaseToTitleCase(props.stat);
|
|
18
|
+
const titleText = (_a = props.title) !== null && _a !== void 0 ? _a : (0, string_case_1.camelCaseToTitleCase)(props.stat);
|
|
19
19
|
const hintText = (_b = props.description) !== null && _b !== void 0 ? _b : ads_texts_1.adsStatDescriptions[props.stat];
|
|
20
|
-
return jsx_runtime_1.jsx(stat_extended_card_1.StatExtendedCard, Object.assign({}, props, { title: titleText, description: hintText }), void 0);
|
|
20
|
+
return (0, jsx_runtime_1.jsx)(stat_extended_card_1.StatExtendedCard, Object.assign({}, props, { title: titleText, description: hintText }), void 0);
|
|
21
21
|
};
|
|
22
22
|
exports.AdsPerformanceStatExtendedCard = AdsPerformanceStatExtendedCard;
|
|
23
23
|
//# sourceMappingURL=ads-stat.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ads-stat.js","sourceRoot":"","sources":["../../../src/components/ads/ads-stat.tsx"],"names":[],"mappings":";;;;AACA,iDAA4D;AAC5D,mEAAqF;AACrF,qDAAyE;AACzE,yDAA+D;AAOxD,MAAM,sBAAsB,
|
|
1
|
+
{"version":3,"file":"ads-stat.js","sourceRoot":"","sources":["../../../src/components/ads/ads-stat.tsx"],"names":[],"mappings":";;;;AACA,iDAA4D;AAC5D,mEAAqF;AACrF,qDAAyE;AACzE,yDAA+D;AAOxD,MAAM,sBAAsB,GAAgC,KAAK,CAAC,EAAE;;IACvE,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,IAAA,kCAAoB,EAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAClE,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,+BAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEtE,OAAO,uBAAC,oBAAQ,oBAAK,KAAK,IAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,YAAI,CAAC;AAC5E,CAAC,CAAC;AALW,QAAA,sBAAsB,0BAKjC;AAQK,MAAM,8BAA8B,GAAwC,KAAK,CAAC,EAAE;;IACvF,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,IAAA,kCAAoB,EAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAClE,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,+BAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEtE,OAAO,uBAAC,qCAAgB,oBAAK,KAAK,IAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,YAAI,CAAC;AACpF,CAAC,CAAC;AALW,QAAA,8BAA8B,kCAKzC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
import { FunnelChartProps } from '../utils/interface';
|
|
3
|
-
export declare const FunnelChart:
|
|
3
|
+
export declare const FunnelChart: FC<FunnelChartProps>;
|
|
4
4
|
//# sourceMappingURL=funnel-chart.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"funnel-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"funnel-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,EAAE,EAAE,MAAM,OAAO,CAAC;AAgB9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAKtD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAoH5C,CAAC"}
|
|
@@ -34,11 +34,11 @@ const const_1 = require("../utils/const");
|
|
|
34
34
|
const funnel_svg_1 = require("./funnel-svg");
|
|
35
35
|
const Styles = __importStar(require("./funnel-chart.module.less"));
|
|
36
36
|
const FunnelChart = ({ sections, format, topSideLength = const_1.defaultTopSideLength, bottomSideLength = const_1.defaultBottomSideLength, popoverContent: PopoverContent, loading, className, }) => {
|
|
37
|
-
const [popoverShown, setPopoverShown] = react_1.useState(undefined);
|
|
38
|
-
const colors = react_1.useMemo(() => sections.map(s => s.color), [sections]);
|
|
37
|
+
const [popoverShown, setPopoverShown] = (0, react_1.useState)(undefined);
|
|
38
|
+
const colors = (0, react_1.useMemo)(() => sections.map(s => s.color), [sections]);
|
|
39
39
|
const hidePopover = () => setPopoverShown(undefined);
|
|
40
|
-
const pyramidTextsStyles = react_1.useMemo(() => ({ left: `${100 - topSideLength}%` }), [topSideLength]);
|
|
41
|
-
return (jsx_runtime_1.jsxs(design_system_1.Mask, Object.assign({ className: classnames_1.default('h-100 bg-white border border-radius-2 p-3 of-hidden position-relative', className), active: !!loading }, { children: [jsx_runtime_1.jsx("div", Object.assign({ className: Styles.pyramidWrapper }, { children: jsx_runtime_1.jsx(funnel_svg_1.FunnelPyramidSvg, { colors: colors, topSideLength: topSideLength, bottomSideLength: bottomSideLength }, void 0) }), void 0), jsx_runtime_1.jsx("div", Object.assign({ className: classnames_1.default('d-f flex-column justify-content-around', Styles.pyramidBoxRight), style: pyramidTextsStyles }, { children: sections.map(({ id, title, value, color, prev, textClass, data }, ind) => (jsx_runtime_1.jsx(design_system_1.Stack, Object.assign({ className: Styles.flex1, justifyContent: "center", alignItems: "center", onMouseEnter: () => setPopoverShown(id), onMouseLeave: hidePopover }, { children: jsx_runtime_1.jsxs(design_system_1.Popover, Object.assign({ className: "of-hidden", trigger: jsx_runtime_1.jsx(design_system_1.Headline, Object.assign({ size: "small", className: classnames_1.default('m-x-2 m-b-0-i', textClass) }, { children: formatters_1.formatValue(value, format) }), void 0), open: popoverShown === id, direction: ind === 0 ? 'lt' : 'lb', padding: "s", width: "auto", portal: true }, { children: [jsx_runtime_1.jsxs(design_system_1.Stack, Object.assign({ alignItems: "center", justifyContent: "flex-start" }, { children: [jsx_runtime_1.jsx(design_system_1.StatusLight, { color: color }, void 0), jsx_runtime_1.jsx(design_system_1.BodyText, Object.assign({ bold: true, className: "m-r-half" }, { children: formatters_1.formatValue(value, format) }), void 0), jsx_runtime_1.jsx(design_system_1.BodyText, Object.assign({ bold: true, className: "m-r-1" }, { children: title }), void 0), jsx_runtime_1.jsx(stat_card_1.StatDiff, { value: value, prev: prev, size: "xsmall", format: format }, void 0)] }), void 0), !!PopoverContent && (jsx_runtime_1.jsx(PopoverContent, { id: id, value: value, text: formatters_1.formatValue(value, format), data: data }, void 0))] }), void 0) }), title))) }), void 0), jsx_runtime_1.jsx(design_system_1.Stack, Object.assign({ className: Styles.pyramidBoxLeft, direction: "column" }, { children: sections.map(s => (jsx_runtime_1.jsxs(design_system_1.Stack, Object.assign({ className: Styles.flex1, justifyContent: "flex-start", alignItems: "flex-end" }, { children: [jsx_runtime_1.jsx(design_system_1.Eyebrow, Object.assign({ size: "small", className: classnames_1.default(Styles.statTitle, 'm-r-half') }, { children: s.title }), void 0), jsx_runtime_1.jsx(design_system_1.Tooltip, Object.assign({ direction: "t", portal: true, text: s.description }, { children: jsx_runtime_1.jsx(design_system_1.Icon, { name: "info", className: "m-r-1", size: "14px", color: tokens_1.default.colorNeutral90 }, void 0) }), void 0), jsx_runtime_1.jsx(stat_card_1.StatDiff, { value: s.value, prev: s.prev, size: "xsmall", format: format }, void 0)] }), s.id))) }), void 0)] }), void 0));
|
|
40
|
+
const pyramidTextsStyles = (0, react_1.useMemo)(() => ({ left: `${100 - topSideLength}%` }), [topSideLength]);
|
|
41
|
+
return ((0, jsx_runtime_1.jsxs)(design_system_1.Mask, Object.assign({ className: (0, classnames_1.default)('h-100 bg-white border border-radius-2 p-3 of-hidden position-relative', className), active: !!loading }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: Styles.pyramidWrapper }, { children: (0, jsx_runtime_1.jsx)(funnel_svg_1.FunnelPyramidSvg, { colors: colors, topSideLength: topSideLength, bottomSideLength: bottomSideLength }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, classnames_1.default)('d-f flex-column justify-content-around', Styles.pyramidBoxRight), style: pyramidTextsStyles }, { children: sections.map(({ id, title, value, color, prev, textClass, data }, ind) => ((0, jsx_runtime_1.jsx)(design_system_1.Stack, Object.assign({ className: Styles.flex1, justifyContent: "center", alignItems: "center", onMouseEnter: () => setPopoverShown(id), onMouseLeave: hidePopover }, { children: (0, jsx_runtime_1.jsxs)(design_system_1.Popover, Object.assign({ className: "of-hidden", trigger: (0, jsx_runtime_1.jsx)(design_system_1.Headline, Object.assign({ size: "small", className: (0, classnames_1.default)('m-x-2 m-b-0-i', textClass) }, { children: (0, formatters_1.formatValue)(value, format) }), void 0), open: popoverShown === id, direction: ind === 0 ? 'lt' : 'lb', padding: "s", width: "auto", portal: true }, { children: [(0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ alignItems: "center", justifyContent: "flex-start" }, { children: [(0, jsx_runtime_1.jsx)(design_system_1.StatusLight, { color: color }, void 0), (0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ bold: true, className: "m-r-half" }, { children: (0, formatters_1.formatValue)(value, format) }), void 0), (0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ bold: true, className: "m-r-1" }, { children: title }), void 0), (0, jsx_runtime_1.jsx)(stat_card_1.StatDiff, { value: value, prev: prev, size: "xsmall", format: format }, void 0)] }), void 0), !!PopoverContent && ((0, jsx_runtime_1.jsx)(PopoverContent, { id: id, value: value, text: (0, formatters_1.formatValue)(value, format), data: data }, void 0))] }), void 0) }), title))) }), void 0), (0, jsx_runtime_1.jsx)(design_system_1.Stack, Object.assign({ className: Styles.pyramidBoxLeft, direction: "column" }, { children: sections.map(s => ((0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ className: Styles.flex1, justifyContent: "flex-start", alignItems: "flex-end" }, { children: [(0, jsx_runtime_1.jsx)(design_system_1.Eyebrow, Object.assign({ size: "small", className: (0, classnames_1.default)(Styles.statTitle, 'm-r-half') }, { children: s.title }), void 0), (0, jsx_runtime_1.jsx)(design_system_1.Tooltip, Object.assign({ direction: "t", portal: true, text: s.description }, { children: (0, jsx_runtime_1.jsx)(design_system_1.Icon, { name: "info", className: "m-r-1", size: "14px", color: tokens_1.default.colorNeutral90 }, void 0) }), void 0), (0, jsx_runtime_1.jsx)(stat_card_1.StatDiff, { value: s.value, prev: s.prev, size: "xsmall", format: format }, void 0)] }), s.id))) }), void 0)] }), void 0));
|
|
42
42
|
};
|
|
43
43
|
exports.FunnelChart = FunnelChart;
|
|
44
44
|
//# sourceMappingURL=funnel-chart.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"funnel-chart.js","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"funnel-chart.js","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
export interface FunnelPyramidSvgProps {
|
|
3
3
|
colors: string[];
|
|
4
4
|
topSideLength?: number;
|
|
5
5
|
bottomSideLength?: number;
|
|
6
6
|
}
|
|
7
|
-
export declare const FunnelPyramidSvg:
|
|
7
|
+
export declare const FunnelPyramidSvg: FC<FunnelPyramidSvgProps>;
|
|
8
8
|
//# sourceMappingURL=funnel-svg.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"funnel-svg.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-svg.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"funnel-svg.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-svg.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAE,MAAM,OAAO,CAAC;AAMpC,MAAM,WAAW,qBAAqB;IAClC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA+FtD,CAAC"}
|
|
@@ -10,7 +10,7 @@ const tokens_1 = __importDefault(require("@servicetitan/tokens"));
|
|
|
10
10
|
const const_1 = require("../utils/const");
|
|
11
11
|
const st = (v) => v.toFixed(2);
|
|
12
12
|
const FunnelPyramidSvg = ({ colors, topSideLength = const_1.defaultTopSideLength, bottomSideLength = const_1.defaultBottomSideLength, }) => {
|
|
13
|
-
const sections = react_1.useMemo(() => {
|
|
13
|
+
const sections = (0, react_1.useMemo)(() => {
|
|
14
14
|
if (!colors.length) {
|
|
15
15
|
return [];
|
|
16
16
|
}
|
|
@@ -30,7 +30,7 @@ const FunnelPyramidSvg = ({ colors, topSideLength = const_1.defaultTopSideLength
|
|
|
30
30
|
};
|
|
31
31
|
});
|
|
32
32
|
}, [colors, topSideLength, bottomSideLength]);
|
|
33
|
-
const paths = react_1.useMemo(() => {
|
|
33
|
+
const paths = (0, react_1.useMemo)(() => {
|
|
34
34
|
if (!sections.length) {
|
|
35
35
|
return [];
|
|
36
36
|
}
|
|
@@ -48,8 +48,8 @@ const FunnelPyramidSvg = ({ colors, topSideLength = const_1.defaultTopSideLength
|
|
|
48
48
|
};
|
|
49
49
|
});
|
|
50
50
|
}, [sections]);
|
|
51
|
-
const lines = react_1.useMemo(() => sections.slice(1).map((s, ind) => [ind, s.xtr, s.yt]), [sections]);
|
|
52
|
-
return (jsx_runtime_1.jsxs("svg", Object.assign({ width: "100%", height: "100%", preserveAspectRatio: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsx_runtime_1.jsx("svg", Object.assign({ width: "100%", height: "100%", x: "0%", y: "0", viewBox: "0 0 100 100", preserveAspectRatio: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: paths.map(({ key, path, color }) => (jsx_runtime_1.jsx("path", { d: path, fill: color }, key))) }), void 0), jsx_runtime_1.jsx("svg", Object.assign({ width: "100%", height: "100%", x: "0", y: "0", viewBox: "0 0 100 100", preserveAspectRatio: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: lines.map(([id, x, y]) => (jsx_runtime_1.jsx("line", { x1: "0", y1: st(y), x2: st(x), y2: st(y), stroke: tokens_1.default.colorNeutral60, strokeWidth: 0.5 }, id))) }), void 0)] }), void 0));
|
|
51
|
+
const lines = (0, react_1.useMemo)(() => sections.slice(1).map((s, ind) => [ind, s.xtr, s.yt]), [sections]);
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ width: "100%", height: "100%", preserveAspectRatio: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "100%", height: "100%", x: "0%", y: "0", viewBox: "0 0 100 100", preserveAspectRatio: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: paths.map(({ key, path, color }) => ((0, jsx_runtime_1.jsx)("path", { d: path, fill: color }, key))) }), void 0), (0, jsx_runtime_1.jsx)("svg", Object.assign({ width: "100%", height: "100%", x: "0", y: "0", viewBox: "0 0 100 100", preserveAspectRatio: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: lines.map(([id, x, y]) => ((0, jsx_runtime_1.jsx)("line", { x1: "0", y1: st(y), x2: st(x), y2: st(y), stroke: tokens_1.default.colorNeutral60, strokeWidth: 0.5 }, id))) }), void 0)] }), void 0));
|
|
53
53
|
};
|
|
54
54
|
exports.FunnelPyramidSvg = FunnelPyramidSvg;
|
|
55
55
|
//# sourceMappingURL=funnel-svg.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"funnel-svg.js","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-svg.tsx"],"names":[],"mappings":";;;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"funnel-svg.js","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-svg.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
declare const _default: {
|
|
3
3
|
title: string;
|
|
4
|
-
component:
|
|
4
|
+
component: import("react").FC<import("./index").FunnelChartProps<any>>;
|
|
5
5
|
parameters: {};
|
|
6
6
|
};
|
|
7
7
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"funnel-chart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/funnel-chart/funnel-chart.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"funnel-chart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/funnel-chart/funnel-chart.stories.tsx"],"names":[],"mappings":";;;;;;AAIA,wBAIE;AA2CF,eAAO,MAAM,oBAAoB,mBAE/B,CAAC;AAEH,eAAO,MAAM,oBAAoB,mBAsC/B,CAAC;AAEH,eAAO,MAAM,wBAAwB,mBAQnC,CAAC"}
|
|
@@ -9,7 +9,7 @@ exports.default = {
|
|
|
9
9
|
component: index_1.FunnelChart,
|
|
10
10
|
parameters: {},
|
|
11
11
|
};
|
|
12
|
-
const w = (cb) => () => jsx_runtime_1.jsx("div", Object.assign({ style: { height: '300px', width: '420px' } }, { children: cb() }), void 0);
|
|
12
|
+
const w = (cb) => () => (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { height: '300px', width: '420px' } }, { children: cb() }), void 0);
|
|
13
13
|
const sections3 = () => [
|
|
14
14
|
{
|
|
15
15
|
id: 1,
|
|
@@ -39,9 +39,9 @@ const sections3 = () => [
|
|
|
39
39
|
textClass: 'c-white',
|
|
40
40
|
},
|
|
41
41
|
];
|
|
42
|
-
const CustomPopoverContent = ({ data }) => (data === null || data === void 0 ? void 0 : data.info.length) ? (jsx_runtime_1.jsx("div", { children: data.info.map(t => (jsx_runtime_1.jsx(design_system_1.BodyText, { children: t }, t))) }, void 0)) : null;
|
|
43
|
-
exports.funnelChart3Sections = w(() => (jsx_runtime_1.jsx(index_1.FunnelChart, { format: "percent", sections: sections3() }, void 0)));
|
|
44
|
-
exports.funnelChart4Sections = w(() => (jsx_runtime_1.jsx(index_1.FunnelChart, { format: "percent", sections: [
|
|
42
|
+
const CustomPopoverContent = ({ data }) => (data === null || data === void 0 ? void 0 : data.info.length) ? ((0, jsx_runtime_1.jsx)("div", { children: data.info.map(t => ((0, jsx_runtime_1.jsx)(design_system_1.BodyText, { children: t }, t))) }, void 0)) : null;
|
|
43
|
+
exports.funnelChart3Sections = w(() => ((0, jsx_runtime_1.jsx)(index_1.FunnelChart, { format: "percent", sections: sections3() }, void 0)));
|
|
44
|
+
exports.funnelChart4Sections = w(() => ((0, jsx_runtime_1.jsx)(index_1.FunnelChart, { format: "percent", sections: [
|
|
45
45
|
{
|
|
46
46
|
id: 1,
|
|
47
47
|
color: '#A9D1FF',
|
|
@@ -75,5 +75,5 @@ exports.funnelChart4Sections = w(() => (jsx_runtime_1.jsx(index_1.FunnelChart, {
|
|
|
75
75
|
prev: 0.221,
|
|
76
76
|
},
|
|
77
77
|
] }, void 0)));
|
|
78
|
-
exports.funnelChartCustomContent = w(() => (jsx_runtime_1.jsx(index_1.FunnelChart, { format: "percent", topSideLength: 80, bottomSideLength: 20, sections: sections3(), popoverContent: CustomPopoverContent }, void 0)));
|
|
78
|
+
exports.funnelChartCustomContent = w(() => ((0, jsx_runtime_1.jsx)(index_1.FunnelChart, { format: "percent", topSideLength: 80, bottomSideLength: 20, sections: sections3(), popoverContent: CustomPopoverContent }, void 0)));
|
|
79
79
|
//# sourceMappingURL=funnel-chart.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"funnel-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/charts/funnel-chart/funnel-chart.stories.tsx"],"names":[],"mappings":";;;;AACA,mCAAyF;AACzF,+DAAuD;AAEvD,kBAAe;IACX,KAAK,EAAE,iCAAiC;IACxC,SAAS,EAAE,mBAAW;IACtB,UAAU,EAAE,EAAE;CACjB,CAAC;AACF,MAAM,CAAC,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"funnel-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/charts/funnel-chart/funnel-chart.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/body.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"body.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/body.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmC,EAAE,EAAY,MAAM,OAAO,CAAC;AAiBtE,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC;IAAE,cAAc,CAAC,EAAE,MAAM,CAAA;CAAE,CA0FhD,CAAC"}
|
|
@@ -24,7 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
25
|
exports.Body = void 0;
|
|
26
26
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
27
|
-
const react_1 =
|
|
27
|
+
const react_1 = require("react");
|
|
28
28
|
const mobx_react_1 = require("mobx-react");
|
|
29
29
|
const classnames_1 = __importDefault(require("classnames"));
|
|
30
30
|
const design_system_1 = require("@servicetitan/design-system");
|
|
@@ -38,23 +38,23 @@ const stuff_1 = require("./stuff");
|
|
|
38
38
|
const svg_body_1 = require("./svg-body");
|
|
39
39
|
const hover_popover_1 = require("./hover-popover");
|
|
40
40
|
const Styles = __importStar(require("./body.module.less"));
|
|
41
|
-
exports.Body = react_ioc_1.provide({ singletons: [svg_store_1.SvgStore] })(mobx_react_1.observer(({ classNameTitle }) => {
|
|
41
|
+
exports.Body = (0, react_ioc_1.provide)({ singletons: [svg_store_1.SvgStore] })((0, mobx_react_1.observer)(({ classNameTitle }) => {
|
|
42
42
|
var _a, _b, _c;
|
|
43
|
-
const [{ display, metrics, left, right, periods, resolution, setHoveredIndex }, svgStore] = react_ioc_1.useDependencies(line_chart_store_1.LineChartStore, svg_store_1.SvgStore);
|
|
44
|
-
react_1.useEffect(() => {
|
|
43
|
+
const [{ display, metrics, left, right, periods, resolution, setHoveredIndex }, svgStore] = (0, react_ioc_1.useDependencies)(line_chart_store_1.LineChartStore, svg_store_1.SvgStore);
|
|
44
|
+
(0, react_1.useEffect)(() => {
|
|
45
45
|
var _a, _b;
|
|
46
46
|
svgStore.init(periods.length, metrics, (_a = left === null || left === void 0 ? void 0 : left.maxValue) !== null && _a !== void 0 ? _a : 0, (_b = right === null || right === void 0 ? void 0 : right.maxValue) !== null && _b !== void 0 ? _b : 0);
|
|
47
47
|
}, [svgStore, periods, metrics, left, right]);
|
|
48
|
-
const [rect, ref] = use_client_rect_1.useClientRect();
|
|
49
|
-
const onBarHover = react_1.useCallback((ind) => setHoveredIndex(ind, true), [setHoveredIndex]);
|
|
50
|
-
const onBarLeave = react_1.useCallback((ind) => setHoveredIndex(ind, false), [setHoveredIndex]);
|
|
51
|
-
const labels = react_1.useMemo(() => { var _a; return (display.xLabels ? labels_1.getXLabels(periods, resolution, (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0) : []); }, [display, periods, resolution, rect]);
|
|
52
|
-
return (jsx_runtime_1.jsxs("div", Object.assign({ className: "d-f flex-column" }, { children: [jsx_runtime_1.jsxs(design_system_1.Stack, Object.assign({ alignItems: "stretch" }, { children: [left && jsx_runtime_1.jsx(sidebar_1.Sidebar, { settings: left, classNameTitle: classNameTitle }, void 0), jsx_runtime_1.jsx(design_system_1.Stack.Item, Object.assign({ fill: true }, { children: jsx_runtime_1.jsx("div", Object.assign({ ref: ref, className: classnames_1.default(Styles.chartWrapper, 'border-bottom', {
|
|
48
|
+
const [rect, ref] = (0, use_client_rect_1.useClientRect)();
|
|
49
|
+
const onBarHover = (0, react_1.useCallback)((ind) => setHoveredIndex(ind, true), [setHoveredIndex]);
|
|
50
|
+
const onBarLeave = (0, react_1.useCallback)((ind) => setHoveredIndex(ind, false), [setHoveredIndex]);
|
|
51
|
+
const labels = (0, react_1.useMemo)(() => { var _a; return (display.xLabels ? (0, labels_1.getXLabels)(periods, resolution, (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0) : []); }, [display, periods, resolution, rect]);
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "d-f flex-column" }, { children: [(0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ alignItems: "stretch" }, { children: [left && (0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { settings: left, classNameTitle: classNameTitle }, void 0), (0, jsx_runtime_1.jsx)(design_system_1.Stack.Item, Object.assign({ fill: true }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(Styles.chartWrapper, 'border-bottom', {
|
|
53
53
|
'border-left': !!left && display.yLeft,
|
|
54
54
|
'border-right': !!right && display.yRight,
|
|
55
|
-
}) }, { children: periods.length ? (jsx_runtime_1.jsxs(react_1.
|
|
55
|
+
}) }, { children: periods.length ? ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [periods.length !== labels.length && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: Styles.labelBorders }, { children: labels
|
|
56
56
|
.map(([text, flex], ind) => [flex, `${ind}${text}`])
|
|
57
|
-
.map(([flex, key]) => (jsx_runtime_1.jsx("div", { style: { flex } }, key))) }), void 0)), jsx_runtime_1.jsx(svg_body_1.SvgBody, { horizontalGrid: display.yGrid, metrics: metrics }, void 0), jsx_runtime_1.jsx(hover_popover_1.HoverPopover, {}, void 0), jsx_runtime_1.jsx(svg_body_1.SvgBodyHover, { onValueHover: onBarHover, onValueLeave: onBarLeave }, void 0)] }, void 0)) : (jsx_runtime_1.jsx(design_system_1.Stack, Object.assign({ className: "h-100", justifyContent: "center", alignItems: "center" }, { children: "No Data" }), void 0)) }), void 0) }), void 0), right && jsx_runtime_1.jsx(sidebar_1.Sidebar, { settings: right, right: true, classNameTitle: classNameTitle }, void 0)] }), void 0), display.xLabels && (jsx_runtime_1.jsx(stuff_1.XAxisLabels, { labels: labels, width: (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0, left: (_b = left === null || left === void 0 ? void 0 : left.width) !== null && _b !== void 0 ? _b : 0, right: (_c = right === null || right === void 0 ? void 0 : right.width) !== null && _c !== void 0 ? _c : 0, labelsMerged: periods.length !== labels.length, hasBars: !!metrics.filter(m => m.type === 'bar' || m.type === 'stacked-bar')
|
|
58
|
-
.length }, void 0)), display.metricsTitlePosition === 'bottom' && (jsx_runtime_1.jsx(design_system_1.Stack, Object.assign({ direction: "row", justifyContent: "center", className: "p-
|
|
57
|
+
.map(([flex, key]) => ((0, jsx_runtime_1.jsx)("div", { style: { flex } }, key))) }), void 0)), (0, jsx_runtime_1.jsx)(svg_body_1.SvgBody, { horizontalGrid: display.yGrid, metrics: metrics }, void 0), (0, jsx_runtime_1.jsx)(hover_popover_1.HoverPopover, {}, void 0), (0, jsx_runtime_1.jsx)(svg_body_1.SvgBodyHover, { onValueHover: onBarHover, onValueLeave: onBarLeave }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(design_system_1.Stack, Object.assign({ className: "h-100", justifyContent: "center", alignItems: "center" }, { children: "No Data" }), void 0)) }), void 0) }), void 0), right && (0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { settings: right, right: true, classNameTitle: classNameTitle }, void 0)] }), void 0), display.xLabels && ((0, jsx_runtime_1.jsx)(stuff_1.XAxisLabels, { labels: labels, width: (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0, left: (_b = left === null || left === void 0 ? void 0 : left.width) !== null && _b !== void 0 ? _b : 0, right: (_c = right === null || right === void 0 ? void 0 : right.width) !== null && _c !== void 0 ? _c : 0, labelsMerged: periods.length !== labels.length, hasBars: !!metrics.filter(m => m.type === 'bar' || m.type === 'stacked-bar')
|
|
58
|
+
.length }, void 0)), display.metricsTitlePosition === 'bottom' && ((0, jsx_runtime_1.jsx)(design_system_1.Stack, Object.assign({ direction: "row", justifyContent: "center", className: "p-3" }, { children: (0, jsx_runtime_1.jsx)(stuff_1.MetricsTitle, { metrics: metrics }, void 0) }), void 0))] }), void 0));
|
|
59
59
|
}));
|
|
60
60
|
//# sourceMappingURL=body.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/body.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA
|
|
1
|
+
{"version":3,"file":"body.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/body.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/container.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,EAAE,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAIrD,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAUxC,CAAC"}
|
|
@@ -7,11 +7,11 @@ const mobx_react_1 = require("mobx-react");
|
|
|
7
7
|
const react_ioc_1 = require("@servicetitan/react-ioc");
|
|
8
8
|
const line_chart_store_1 = require("../stores/line-chart.store");
|
|
9
9
|
const body_1 = require("./body");
|
|
10
|
-
exports.LineChart = react_ioc_1.provide({
|
|
10
|
+
exports.LineChart = (0, react_ioc_1.provide)({
|
|
11
11
|
singletons: [line_chart_store_1.LineChartStore],
|
|
12
|
-
})(mobx_react_1.observer(props => {
|
|
13
|
-
const [{ init, isInit }] = react_ioc_1.useDependencies(line_chart_store_1.LineChartStore);
|
|
14
|
-
react_1.useEffect(() => init(props), [init, props]);
|
|
15
|
-
return isInit ? jsx_runtime_1.jsx(body_1.Body, { classNameTitle: props.classNameTitle }, void 0) : null;
|
|
12
|
+
})((0, mobx_react_1.observer)(props => {
|
|
13
|
+
const [{ init, isInit }] = (0, react_ioc_1.useDependencies)(line_chart_store_1.LineChartStore);
|
|
14
|
+
(0, react_1.useEffect)(() => init(props), [init, props]);
|
|
15
|
+
return isInit ? (0, jsx_runtime_1.jsx)(body_1.Body, { classNameTitle: props.classNameTitle }, void 0) : null;
|
|
16
16
|
}));
|
|
17
17
|
//# sourceMappingURL=container.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/container.tsx"],"names":[],"mappings":";;;;AAAA,
|
|
1
|
+
{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/container.tsx"],"names":[],"mappings":";;;;AAAA,iCAAsC;AACtC,2CAAsC;AACtC,uDAAmE;AAEnE,iEAA4D;AAC5D,iCAA8B;AAEjB,QAAA,SAAS,GAAuB,IAAA,mBAAO,EAAC;IACjD,UAAU,EAAE,CAAC,iCAAc,CAAC;CAC/B,CAAC,CACE,IAAA,qBAAQ,EAAC,KAAK,CAAC,EAAE;IACb,MAAM,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,GAAG,IAAA,2BAAe,EAAC,iCAAc,CAAC,CAAC;IAE3D,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAE5C,OAAO,MAAM,CAAC,CAAC,CAAC,uBAAC,WAAI,IAAC,cAAc,EAAE,KAAK,CAAC,cAAc,WAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1E,CAAC,CAAC,CACL,CAAC"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
export declare const HoverPopover:
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
export declare const HoverPopover: FC;
|
|
3
3
|
//# sourceMappingURL=hover-popover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hover-popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/hover-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"hover-popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/hover-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,EAAE,EAAY,MAAM,OAAO,CAAC;AAY3D,eAAO,MAAM,YAAY,EAAE,EAiEzB,CAAC"}
|
|
@@ -24,7 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
25
|
exports.HoverPopover = void 0;
|
|
26
26
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
27
|
-
const react_1 =
|
|
27
|
+
const react_1 = require("react");
|
|
28
28
|
const classnames_1 = __importDefault(require("classnames"));
|
|
29
29
|
const mobx_react_1 = require("mobx-react");
|
|
30
30
|
const react_ioc_1 = require("@servicetitan/react-ioc");
|
|
@@ -35,13 +35,13 @@ const formatters_1 = require("../utils/formatters");
|
|
|
35
35
|
const labels_1 = require("../utils/labels");
|
|
36
36
|
const Styles = __importStar(require("./hover-popover.module.less"));
|
|
37
37
|
const stuff_1 = require("./stuff");
|
|
38
|
-
exports.HoverPopover = mobx_react_1.observer(() => {
|
|
39
|
-
const [{ periods, resolution, hoveredIndex, metrics, display }, svgStore] = react_ioc_1.useDependencies(line_chart_store_1.LineChartStore, svg_store_1.SvgStore);
|
|
40
|
-
const formatDateTitle = react_1.useMemo(() => labels_1.periodDateTitleFormatter[resolution], [resolution]);
|
|
41
|
-
const formatValue = react_1.useCallback((title, value, isRight) => formatters_1.getFormatter(isRight ? display.metricsRightFormat : display.metricsLeftFormat)(value) +
|
|
38
|
+
exports.HoverPopover = (0, mobx_react_1.observer)(() => {
|
|
39
|
+
const [{ periods, resolution, hoveredIndex, metrics, display }, svgStore] = (0, react_ioc_1.useDependencies)(line_chart_store_1.LineChartStore, svg_store_1.SvgStore);
|
|
40
|
+
const formatDateTitle = (0, react_1.useMemo)(() => labels_1.periodDateTitleFormatter[resolution], [resolution]);
|
|
41
|
+
const formatValue = (0, react_1.useCallback)((title, value, isRight) => (0, formatters_1.getFormatter)(isRight ? display.metricsRightFormat : display.metricsLeftFormat)(value) +
|
|
42
42
|
' ' +
|
|
43
43
|
title, [display]);
|
|
44
|
-
const popoverStyle = react_1.useMemo(() => {
|
|
44
|
+
const popoverStyle = (0, react_1.useMemo)(() => {
|
|
45
45
|
const pos = svgStore.periodX(hoveredIndex);
|
|
46
46
|
if (hoveredIndex < periods.length / 2) {
|
|
47
47
|
return { left: `${svgStore.fpx(pos + 2)}%` };
|
|
@@ -53,9 +53,9 @@ exports.HoverPopover = mobx_react_1.observer(() => {
|
|
|
53
53
|
}
|
|
54
54
|
const period = periods[hoveredIndex];
|
|
55
55
|
const partialWeek = !!period.partial;
|
|
56
|
-
return (jsx_runtime_1.jsxs(react_1.
|
|
56
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: Styles.line, style: { left: svgStore.fpx(svgStore.periodX(hoveredIndex)) + '%' } }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(Styles.popover, 'bg-white border border-radius-1 p-1'), style: popoverStyle }, { children: [(0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ size: "small", bold: true }, { children: formatDateTitle(period) }), void 0), partialWeek && ((0, jsx_runtime_1.jsx)(design_system_1.BodyText, Object.assign({ size: "xsmall", subdued: true }, { children: "Partial week" }), void 0)), metrics.map(m => {
|
|
57
57
|
var _a;
|
|
58
|
-
return m.values[hoveredIndex] !== undefined && (jsx_runtime_1.jsx(stuff_1.ColorTag, { label: formatValue(m.title, m.values[hoveredIndex], m.isRight), color: m.color, className: "m-t-1", dashed: (_a = m.opts) === null || _a === void 0 ? void 0 : _a.dashed, small: true }, m.title));
|
|
58
|
+
return m.values[hoveredIndex] !== undefined && ((0, jsx_runtime_1.jsx)(stuff_1.ColorTag, { label: formatValue(m.title, m.values[hoveredIndex], m.isRight), color: m.color, className: "m-t-1", dashed: (_a = m.opts) === null || _a === void 0 ? void 0 : _a.dashed, small: true }, m.title));
|
|
59
59
|
})] }), void 0)] }, void 0));
|
|
60
60
|
});
|
|
61
61
|
//# sourceMappingURL=hover-popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hover-popover.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/hover-popover.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA
|
|
1
|
+
{"version":3,"file":"hover-popover.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/hover-popover.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iCAA2D;AAC3D,4DAAoC;AACpC,2CAAsC;AACtC,uDAA0D;AAC1D,+DAAuD;AACvD,iEAA4D;AAC5D,mDAA+C;AAC/C,oDAAmD;AACnD,4CAA2D;AAC3D,oEAAsD;AACtD,mCAAmC;AAEtB,QAAA,YAAY,GAAO,IAAA,qBAAQ,EAAC,GAAG,EAAE;IAC1C,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,QAAQ,CAAC,GAAG,IAAA,2BAAe,EACvF,iCAAc,EACd,oBAAQ,CACX,CAAC;IAEF,MAAM,eAAe,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,iCAAwB,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAC1F,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC3B,CAAC,KAAa,EAAE,KAAa,EAAE,OAAgB,EAAE,EAAE,CAC/C,IAAA,yBAAY,EAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC;QACrF,GAAG;QACH,KAAK,EACT,CAAC,OAAO,CAAC,CACZ,CAAC;IACF,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC9B,MAAM,GAAG,GAAG,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAE3C,IAAI,YAAY,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;YACnC,OAAO,EAAE,IAAI,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;SAChD;QAED,OAAO,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC;IACpD,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;IAE7C,IAAI,YAAY,GAAG,CAAC,IAAI,YAAY,IAAI,OAAO,CAAC,MAAM,EAAE;QACpD,OAAO,IAAI,CAAC;KACf;IAED,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,CAAE,CAAC;IACtC,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;IAErC,OAAO,CACH,wBAAC,gBAAQ,eACL,gCACI,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,GAAG,GAAG,EAAE,WACrE,EACF,+CACI,SAAS,EAAE,IAAA,oBAAU,EAAC,MAAM,CAAC,OAAO,EAAE,qCAAqC,CAAC,EAC5E,KAAK,EAAE,YAAY,iBAEnB,uBAAC,wBAAQ,kBAAC,IAAI,EAAC,OAAO,EAAC,IAAI,sBACtB,eAAe,CAAC,MAAM,CAAC,YACjB,EACV,WAAW,IAAI,CACZ,uBAAC,wBAAQ,kBAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,gDAEpB,CACd,EACA,OAAO,CAAC,GAAG,CACR,CAAC,CAAC,EAAE;;wBACA,OAAA,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,SAAS,IAAI,CACpC,uBAAC,gBAAQ,IACL,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,EAC9D,KAAK,EAAE,CAAC,CAAC,KAAK,EAEd,SAAS,EAAC,OAAO,EACjB,MAAM,EAAE,MAAA,CAAC,CAAC,IAAI,0CAAE,MAAM,EACtB,KAAK,UAHA,CAAC,CAAC,KAAK,CAId,CACL,CAAA;qBAAA,CACR,aACC,YACC,CACd,CAAC;AACN,CAAC,CAAC,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
import { SideMetricsSettings } from '../utils/internal-interfaces';
|
|
3
3
|
interface SidebarProps {
|
|
4
4
|
settings: SideMetricsSettings;
|
|
@@ -6,6 +6,6 @@ interface SidebarProps {
|
|
|
6
6
|
classNameTitle?: string;
|
|
7
7
|
right?: boolean;
|
|
8
8
|
}
|
|
9
|
-
export declare const Sidebar:
|
|
9
|
+
export declare const Sidebar: FC<SidebarProps>;
|
|
10
10
|
export {};
|
|
11
11
|
//# sourceMappingURL=sidebar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGnE,UAAU,YAAY;IAClB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA4CpC,CAAC"}
|
|
@@ -29,10 +29,10 @@ const design_system_1 = require("@servicetitan/design-system");
|
|
|
29
29
|
const Styles = __importStar(require("./sidebar.module.less"));
|
|
30
30
|
const key_1 = require("../utils/key");
|
|
31
31
|
const Sidebar = ({ settings, right, className, classNameTitle }) => {
|
|
32
|
-
const sidebarTitle = settings.title ? (jsx_runtime_1.jsx(design_system_1.Stack.Item, Object.assign({ className: classnames_1.default(Styles.sidebarTitle, Styles.sidebarTitleText, classNameTitle !== null && classNameTitle !== void 0 ? classNameTitle : Styles.sidebarTitleDefault) }, { children: settings.title || '' }), void 0)) : undefined;
|
|
33
|
-
return (jsx_runtime_1.jsxs("div", Object.assign({ className: classnames_1.default('d-f flex-row', className, Styles.sidebar, sidebarTitle ? Styles.sidebarWithTitle : Styles.sidebarNoTitle, right ? Styles.sidebarRight : Styles.sidebarLeft, {
|
|
32
|
+
const sidebarTitle = settings.title ? ((0, jsx_runtime_1.jsx)(design_system_1.Stack.Item, Object.assign({ className: (0, classnames_1.default)(Styles.sidebarTitle, Styles.sidebarTitleText, classNameTitle !== null && classNameTitle !== void 0 ? classNameTitle : Styles.sidebarTitleDefault) }, { children: settings.title || '' }), void 0)) : undefined;
|
|
33
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)('d-f flex-row', className, Styles.sidebar, sidebarTitle ? Styles.sidebarWithTitle : Styles.sidebarNoTitle, right ? Styles.sidebarRight : Styles.sidebarLeft, {
|
|
34
34
|
[Styles.sidebarNoTitle]: !sidebarTitle,
|
|
35
|
-
}), style: { width: `${settings.width}px` } }, { children: [!right && sidebarTitle, jsx_runtime_1.jsxs(design_system_1.Stack, Object.assign({ className: Styles.sidebarValues, direction: "column", justifyContent: "space-evenly" }, { children: [jsx_runtime_1.jsx("div", { className: Styles.labelGap }, void 0), settings.values.map((val, i) => (jsx_runtime_1.jsx("div", Object.assign({ className: Styles.label }, { children: val }), key_1.keyVal(val, i)))), jsx_runtime_1.jsx("div", { className: Styles.labelGap }, void 0)] }), void 0), !!right && sidebarTitle] }), void 0));
|
|
35
|
+
}), style: { width: `${settings.width}px` } }, { children: [!right && sidebarTitle, (0, jsx_runtime_1.jsxs)(design_system_1.Stack, Object.assign({ className: Styles.sidebarValues, direction: "column", justifyContent: "space-evenly" }, { children: [(0, jsx_runtime_1.jsx)("div", { className: Styles.labelGap }, void 0), settings.values.map((val, i) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: Styles.label }, { children: val }), (0, key_1.keyVal)(val, i)))), (0, jsx_runtime_1.jsx)("div", { className: Styles.labelGap }, void 0)] }), void 0), !!right && sidebarTitle] }), void 0));
|
|
36
36
|
};
|
|
37
37
|
exports.Sidebar = Sidebar;
|
|
38
38
|
//# sourceMappingURL=sidebar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/sidebar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,4DAAoC;AACpC,+DAAoD;AACpD,8DAAgD;AAEhD,sCAAsC;AAS/B,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/sidebar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,4DAAoC;AACpC,+DAAoD;AACpD,8DAAgD;AAEhD,sCAAsC;AAS/B,MAAM,OAAO,GAAqB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,EAAE;IACxF,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAClC,uBAAC,qBAAK,CAAC,IAAI,kBACP,SAAS,EAAE,IAAA,oBAAU,EACjB,MAAM,CAAC,YAAY,EACnB,MAAM,CAAC,gBAAgB,EACvB,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,MAAM,CAAC,mBAAmB,CAC/C,gBAEA,QAAQ,CAAC,KAAK,IAAI,EAAE,YACZ,CAChB,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACH,+CACI,SAAS,EAAE,IAAA,oBAAU,EACjB,cAAc,EACd,SAAS,EACT,MAAM,CAAC,OAAO,EACd,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,EAC9D,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,EAChD;YACI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,CAAC,YAAY;SACzC,CACJ,EACD,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,KAAK,IAAI,EAAE,iBAEtC,CAAC,KAAK,IAAI,YAAY,EACvB,wBAAC,qBAAK,kBACF,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,SAAS,EAAC,QAAQ,EAClB,cAAc,EAAC,cAAc,iBAE7B,gCAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,WAAI,EAClC,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAC7B,8CAA0B,SAAS,EAAE,MAAM,CAAC,KAAK,gBAC5C,GAAG,KADE,IAAA,YAAM,EAAC,GAAG,EAAE,CAAC,CAAC,CAElB,CACT,CAAC,EACF,gCAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,WAAI,aAC/B,EACP,CAAC,CAAC,KAAK,IAAI,YAAY,aACtB,CACT,CAAC;AACN,CAAC,CAAC;AA5CW,QAAA,OAAO,WA4ClB"}
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.sidebar-no-title {
|
|
66
|
-
padding: 0 0 0 @spacing-2;
|
|
66
|
+
padding: @spacing-0 @spacing-0 @spacing-0 @spacing-2;
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
|
|
@@ -82,6 +82,6 @@
|
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
.sidebar-no-title {
|
|
85
|
-
padding: 0 @spacing-2 0 0;
|
|
85
|
+
padding: @spacing-0 @spacing-2 @spacing-0 @spacing-0;
|
|
86
86
|
}
|
|
87
87
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { FC } from 'react';
|
|
2
2
|
import { LineChartMetric } from '../utils/interfaces';
|
|
3
3
|
import { ChartXLabels } from '../utils/internal-interfaces';
|
|
4
4
|
interface ColorTagProps {
|
|
@@ -8,12 +8,12 @@ interface ColorTagProps {
|
|
|
8
8
|
small?: boolean;
|
|
9
9
|
dashed?: boolean;
|
|
10
10
|
}
|
|
11
|
-
export declare const ColorTag:
|
|
11
|
+
export declare const ColorTag: FC<ColorTagProps>;
|
|
12
12
|
interface MetricsTitleProps {
|
|
13
13
|
metrics: LineChartMetric[];
|
|
14
14
|
}
|
|
15
|
-
export declare const MetricsTitle:
|
|
16
|
-
export declare const XAxisLabels:
|
|
15
|
+
export declare const MetricsTitle: FC<MetricsTitleProps>;
|
|
16
|
+
export declare const XAxisLabels: FC<{
|
|
17
17
|
labels: ChartXLabels;
|
|
18
18
|
width: number;
|
|
19
19
|
left: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stuff.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/stuff.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"stuff.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/stuff.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0B,EAAE,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,UAAU,aAAa;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAoBtC,CAAC;AAEF,UAAU,iBAAiB;IACvB,OAAO,EAAE,eAAe,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAY9C,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC;IACzB,MAAM,EAAE,YAAY,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;CACpB,CAsEA,CAAC"}
|