@servicetitan/marketing-ui 1.6.1 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/charts/line-chart/components/body.js +1 -1
- package/dist/components/charts/line-chart/components/body.module.less +1 -1
- package/dist/components/charts/line-chart/components/stuff.js +1 -1
- package/dist/components/stat/stat-card.d.ts.map +1 -1
- package/dist/components/stat/stat-card.js +4 -3
- 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-extended-card.d.ts.map +1 -1
- package/dist/components/stat/stat-extended-card.js +21 -1
- package/dist/components/stat/stat-extended-card.js.map +1 -1
- package/package.json +2 -2
- package/src/components/charts/line-chart/components/body.module.less +1 -1
- package/src/components/charts/line-chart/components/body.tsx +1 -1
- package/src/components/charts/line-chart/components/stuff.tsx +1 -1
- 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 +3 -1
- package/src/components/stat/stat-extended-card.tsx +4 -3
|
@@ -55,6 +55,6 @@ exports.Body = react_ioc_1.provide({ singletons: [svg_store_1.SvgStore] })(mobx_
|
|
|
55
55
|
}) }, { children: periods.length ? (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [periods.length !== labels.length && (jsx_runtime_1.jsx("div", Object.assign({ className: Styles.labelBorders }, { children: labels
|
|
56
56
|
.map(([text, flex], ind) => [flex, `${ind}${text}`])
|
|
57
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-
|
|
58
|
+
.length }, void 0)), display.metricsTitlePosition === 'bottom' && (jsx_runtime_1.jsx(design_system_1.Stack, Object.assign({ direction: "row", justifyContent: "center", className: "p-3" }, { children: jsx_runtime_1.jsx(stuff_1.MetricsTitle, { metrics: metrics }, void 0) }), void 0))] }), void 0));
|
|
59
59
|
}));
|
|
60
60
|
//# sourceMappingURL=body.js.map
|
|
@@ -38,7 +38,7 @@ const ColorTag = ({ label, color, className, small, dashed }) => (jsx_runtime_1.
|
|
|
38
38
|
exports.ColorTag = ColorTag;
|
|
39
39
|
const MetricsTitle = ({ metrics }) => (jsx_runtime_1.jsx(design_system_1.Stack, Object.assign({ alignItems: "center" }, { children: metrics.map(m => {
|
|
40
40
|
var _a;
|
|
41
|
-
return (jsx_runtime_1.jsx(exports.ColorTag, { label: m.title, color: m.color, dashed: (_a = m.opts) === null || _a === void 0 ? void 0 : _a.dashed, className: "m-
|
|
41
|
+
return (jsx_runtime_1.jsx(exports.ColorTag, { label: m.title, color: m.color, dashed: (_a = m.opts) === null || _a === void 0 ? void 0 : _a.dashed, className: "m-r-4" }, m.id));
|
|
42
42
|
}) }), void 0));
|
|
43
43
|
exports.MetricsTitle = MetricsTitle;
|
|
44
44
|
const XAxisLabels = ({ labels, width, left, right, labelsMerged, hasBars }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEH,mBAAmB,EAItB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AA0BtE,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEH,mBAAmB,EAItB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AA0BtE,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAyC5C,CAAC;AAEF,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8C5C,CAAC"}
|
|
@@ -46,7 +46,8 @@ const formatDifferencePercentage = (value, isPlus) => {
|
|
|
46
46
|
const StatDiff = ({ value, prev, size, format, inverted, neutral, className, }) => {
|
|
47
47
|
const percents = format === 'percent';
|
|
48
48
|
const [absDiff, diffPercent, isIncrease] = calculateDiff(value !== null && value !== void 0 ? value : 0, prev !== null && prev !== void 0 ? prev : 0, percents);
|
|
49
|
-
|
|
49
|
+
const diff = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
|
|
50
|
+
let text = '';
|
|
50
51
|
if (percents) {
|
|
51
52
|
text += formatDifferencePercentage(absDiff, isIncrease);
|
|
52
53
|
}
|
|
@@ -56,11 +57,11 @@ const StatDiff = ({ value, prev, size, format, inverted, neutral, className, })
|
|
|
56
57
|
text += ` (${formatDifferencePercentage(diffPercent, isIncrease)})`;
|
|
57
58
|
}
|
|
58
59
|
}
|
|
59
|
-
return (jsx_runtime_1.
|
|
60
|
+
return (jsx_runtime_1.jsxs(design_system_1.BodyText, Object.assign({ className: classnames_1.default(Styles.statDiff, {
|
|
60
61
|
'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),
|
|
61
62
|
'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),
|
|
62
63
|
'c-neutral-200': !!neutral,
|
|
63
|
-
}, className), size: size !== null && size !== void 0 ? size : 'small' }, { children: value === undefined ? '\u00A0' : text }), void 0));
|
|
64
|
+
}, className), size: size !== null && size !== void 0 ? size : 'small' }, { children: [jsx_runtime_1.jsx("span", { children: diff }, void 0), value === undefined ? '\u00A0' : text] }), void 0));
|
|
64
65
|
};
|
|
65
66
|
exports.StatDiff = StatDiff;
|
|
66
67
|
const StatCard = ({ title, description, value, percent, money, rate, prev, clean, inverted, neutral, fill, valueOnly, className, }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,4DAAoC;AACpC,+DAMqC;AACrC,gEAAkD;AAClD,uDAAsE;AAEtE,MAAM,aAAa,GAAG,CAClB,KAAa,EACb,IAAY,EACZ,QAAkB,EACO,EAAE;IAC3B,MAAM,IAAI,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACnD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnF,OAAO,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC;AAC7C,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,KAAa,EAAE,MAAe,EAAE,MAAuB,EAAU,EAAE;IACzF,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,wBAAW,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,CAAC,KAAa,EAAE,MAAe,EAAU,EAAE;IAC1E,IAAI,CAAC,KAAK,EAAE;QACR,OAAO,EAAE,CAAC;KACb;IAED,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,wBAAW,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;AACpE,CAAC,CAAC;AAYK,MAAM,QAAQ,GAA4B,CAAC,EAC9C,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,EAAE;IACD,MAAM,QAAQ,GAAG,MAAM,KAAK,SAAS,CAAC;IACtC,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,GAAG,aAAa,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC1F,
|
|
1
|
+
{"version":3,"file":"stat-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-extended-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"stat-extended-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAOlC,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AACD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA4DtD,CAAC"}
|
|
@@ -1,4 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
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
|
+
};
|
|
2
21
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
22
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
23
|
};
|
|
@@ -9,11 +28,12 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
9
28
|
const design_system_1 = require("@servicetitan/design-system");
|
|
10
29
|
const formatters_1 = require("../../utils/formatters");
|
|
11
30
|
const stat_card_1 = require("./stat-card");
|
|
31
|
+
const Styles = __importStar(require("./stat-card.module.less"));
|
|
12
32
|
const StatExtendedCard = ({ title, title2, description, value, goal, prev, percent, money, rate, inverted, neutral, fill, className, }) => {
|
|
13
33
|
const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
|
|
14
34
|
return (jsx_runtime_1.jsxs("div", Object.assign({ className: classnames_1.default('p-3 bg-white border border-radius-2', {
|
|
15
35
|
'flex-grow-1 flex-basis-0': fill,
|
|
16
|
-
}, className) }, { children: [jsx_runtime_1.jsxs(design_system_1.Stack, { children: [jsx_runtime_1.jsx(design_system_1.Headline, Object.assign({ size: "small" }, { children: title }), void 0), !!description && (jsx_runtime_1.jsx(design_system_1.Tooltip, Object.assign({ text: description }, { children: jsx_runtime_1.jsx(design_system_1.Icon, { name: "info", size: 18, className: "c-neutral-80 m-l-half" }, void 0) }), void 0))] }, void 0), jsx_runtime_1.jsx(design_system_1.Eyebrow, Object.assign({ size: "small", className: "m-t-
|
|
36
|
+
}, className) }, { children: [jsx_runtime_1.jsxs(design_system_1.Stack, { children: [jsx_runtime_1.jsx(design_system_1.Headline, Object.assign({ size: "small" }, { children: title }), void 0), !!description && (jsx_runtime_1.jsx(design_system_1.Tooltip, Object.assign({ text: description }, { children: jsx_runtime_1.jsx(design_system_1.Icon, { name: "info", size: 18, className: "c-neutral-80 m-l-half" }, void 0) }), void 0))] }, void 0), jsx_runtime_1.jsx(design_system_1.Eyebrow, Object.assign({ size: "small", className: "m-t-2 c-black" }, { children: title2 }), void 0), jsx_runtime_1.jsx(design_system_1.Stack, Object.assign({ justifyContent: "space-between", className: "m-t-half" }, { children: jsx_runtime_1.jsxs(design_system_1.Stack, Object.assign({ alignItems: "flex-end", className: "flex-grow-1 flex-basis-0" }, { children: [jsx_runtime_1.jsx(design_system_1.Headline, Object.assign({ className: "m-b-0-i m-r-half fw-normal-i", size: "xlarge" }, { children: formatters_1.formatValue(value, format) }), void 0), goal !== undefined ? (jsx_runtime_1.jsxs(design_system_1.BodyText, Object.assign({ subdued: true }, { children: ["/ ", formatters_1.formatValue(goal, format), " (Goal)"] }), void 0)) : prev !== undefined ? (jsx_runtime_1.jsx(stat_card_1.StatDiff, { value: value, prev: prev, format: format, inverted: inverted, neutral: neutral, className: classnames_1.default(Styles.statExtendedDiff, 'm-l-1') }, void 0)) : undefined] }), void 0) }), void 0)] }), void 0));
|
|
17
37
|
};
|
|
18
38
|
exports.StatExtendedCard = StatExtendedCard;
|
|
19
39
|
//# sourceMappingURL=stat-extended-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-extended-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"stat-extended-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,4DAAoC;AACpC,+DAAgG;AAChG,uDAAqD;AACrD,2CAAuC;AACvC,gEAAkD;AAiB3C,MAAM,gBAAgB,GAA8B,CAAC,EACxD,KAAK,EACL,MAAM,EACN,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,GACZ,EAAE,EAAE;IACD,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEhF,OAAO,CACH,0CACI,SAAS,EAAE,oBAAU,CACjB,qCAAqC,EACrC;YACI,0BAA0B,EAAE,IAAI;SACnC,EACD,SAAS,CACZ,iBAED,mBAAC,qBAAK,eACF,kBAAC,wBAAQ,kBAAC,IAAI,EAAC,OAAO,gBAAE,KAAK,YAAY,EACxC,CAAC,CAAC,WAAW,IAAI,CACd,kBAAC,uBAAO,kBAAC,IAAI,EAAE,WAAW,gBACtB,kBAAC,oBAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAC,uBAAuB,WAAG,YAC1D,CACb,YACG,EACR,kBAAC,uBAAO,kBAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,eAAe,gBAC1C,MAAM,YACD,EAEV,kBAAC,qBAAK,kBAAC,cAAc,EAAC,eAAe,EAAC,SAAS,EAAC,UAAU,gBACtD,mBAAC,qBAAK,kBAAC,UAAU,EAAC,UAAU,EAAC,SAAS,EAAC,0BAA0B,iBAC7D,kBAAC,wBAAQ,kBAAC,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,gBAC3D,wBAAW,CAAC,KAAK,EAAE,MAAM,CAAC,YACpB,EACV,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAClB,mBAAC,wBAAQ,kBAAC,OAAO,6BAAI,wBAAW,CAAC,IAAI,EAAE,MAAM,CAAC,wBAAmB,CACpE,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,kBAAC,oBAAQ,IACL,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,OAAO,CAAC,WACzD,CACL,CAAC,CAAC,CAAC,SAAS,aACT,YACJ,aACN,CACT,CAAC;AACN,CAAC,CAAC;AA5DW,QAAA,gBAAgB,oBA4D3B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/marketing-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0",
|
|
4
4
|
"description": "Marketing UI component and utils",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"less": true,
|
|
51
51
|
"webpack": false
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "bc6ae4e18c6ad7a6d9d2be761a36cf8606bb9b5e"
|
|
54
54
|
}
|
|
@@ -98,7 +98,7 @@ export const Body: React.FC<{ classNameTitle?: string }> = provide({ singletons:
|
|
|
98
98
|
/>
|
|
99
99
|
)}
|
|
100
100
|
{display.metricsTitlePosition === 'bottom' && (
|
|
101
|
-
<Stack direction="row" justifyContent="center" className="p-
|
|
101
|
+
<Stack direction="row" justifyContent="center" className="p-3">
|
|
102
102
|
<MetricsTitle metrics={metrics} />
|
|
103
103
|
</Stack>
|
|
104
104
|
)}
|
|
@@ -55,7 +55,8 @@ export const StatDiff: React.FC<StatDiffProps> = ({
|
|
|
55
55
|
}) => {
|
|
56
56
|
const percents = format === 'percent';
|
|
57
57
|
const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);
|
|
58
|
-
|
|
58
|
+
const diff = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
|
|
59
|
+
let text = '';
|
|
59
60
|
|
|
60
61
|
if (percents) {
|
|
61
62
|
text += formatDifferencePercentage(absDiff, isIncrease);
|
|
@@ -80,6 +81,7 @@ export const StatDiff: React.FC<StatDiffProps> = ({
|
|
|
80
81
|
)}
|
|
81
82
|
size={size ?? 'small'}
|
|
82
83
|
>
|
|
84
|
+
<span>{diff}</span>
|
|
83
85
|
{value === undefined ? '\u00A0' : text}
|
|
84
86
|
</BodyText>
|
|
85
87
|
);
|
|
@@ -3,6 +3,7 @@ import classNames from 'classnames';
|
|
|
3
3
|
import { BodyText, Icon, Headline, Eyebrow, Stack, Tooltip } from '@servicetitan/design-system';
|
|
4
4
|
import { formatValue } from '../../utils/formatters';
|
|
5
5
|
import { StatDiff } from './stat-card';
|
|
6
|
+
import * as Styles from './stat-card.module.less';
|
|
6
7
|
|
|
7
8
|
export interface StatExtendedCardProps {
|
|
8
9
|
title: string;
|
|
@@ -54,11 +55,11 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
|
|
|
54
55
|
</Tooltip>
|
|
55
56
|
)}
|
|
56
57
|
</Stack>
|
|
57
|
-
<Eyebrow size="small" className="m-t-
|
|
58
|
+
<Eyebrow size="small" className="m-t-2 c-black">
|
|
58
59
|
{title2}
|
|
59
60
|
</Eyebrow>
|
|
60
61
|
|
|
61
|
-
<Stack justifyContent="space-between">
|
|
62
|
+
<Stack justifyContent="space-between" className="m-t-half">
|
|
62
63
|
<Stack alignItems="flex-end" className="flex-grow-1 flex-basis-0">
|
|
63
64
|
<Headline className="m-b-0-i m-r-half fw-normal-i" size="xlarge">
|
|
64
65
|
{formatValue(value, format)}
|
|
@@ -72,7 +73,7 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
|
|
|
72
73
|
format={format}
|
|
73
74
|
inverted={inverted}
|
|
74
75
|
neutral={neutral}
|
|
75
|
-
className=
|
|
76
|
+
className={classNames(Styles.statExtendedDiff, 'm-l-1')}
|
|
76
77
|
/>
|
|
77
78
|
) : undefined}
|
|
78
79
|
</Stack>
|