@servicetitan/marketing-ui 1.3.0 → 1.6.1
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.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/body.js +6 -7
- package/dist/components/charts/line-chart/components/body.js.map +1 -1
- package/dist/components/charts/line-chart/components/body.module.less +0 -1
- package/dist/components/charts/line-chart/components/hover-popover.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/hover-popover.js +4 -1
- package/dist/components/charts/line-chart/components/hover-popover.js.map +1 -1
- package/dist/components/charts/line-chart/components/hover-popover.module.less +0 -1
- package/dist/components/charts/line-chart/components/sidebar.d.ts +1 -1
- 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 +7 -3
- package/dist/components/charts/line-chart/components/stuff.d.ts +6 -0
- package/dist/components/charts/line-chart/components/stuff.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/stuff.js +62 -5
- package/dist/components/charts/line-chart/components/stuff.js.map +1 -1
- package/dist/components/charts/line-chart/components/stuff.module.less +12 -3
- package/dist/components/charts/line-chart/components/svg-bars.d.ts +1 -0
- package/dist/components/charts/line-chart/components/svg-bars.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/svg-bars.js +15 -7
- package/dist/components/charts/line-chart/components/svg-bars.js.map +1 -1
- package/dist/components/charts/line-chart/components/svg-body.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/svg-body.js +2 -1
- package/dist/components/charts/line-chart/components/svg-body.js.map +1 -1
- package/dist/components/charts/line-chart/components/svg.module.less +0 -1
- package/dist/components/charts/line-chart/line-chart.stories.d.ts +4 -1
- package/dist/components/charts/line-chart/line-chart.stories.d.ts.map +1 -1
- package/dist/components/charts/line-chart/line-chart.stories.js +113 -2
- package/dist/components/charts/line-chart/line-chart.stories.js.map +1 -1
- package/dist/components/charts/line-chart/stores/line-chart.store.d.ts.map +1 -1
- package/dist/components/charts/line-chart/stores/line-chart.store.js +21 -6
- package/dist/components/charts/line-chart/stores/line-chart.store.js.map +1 -1
- package/dist/components/charts/line-chart/stores/svg.store.js +1 -1
- package/dist/components/charts/line-chart/stores/svg.store.js.map +1 -1
- package/dist/components/charts/line-chart/utils/interfaces.d.ts +1 -1
- package/dist/components/charts/line-chart/utils/interfaces.d.ts.map +1 -1
- package/dist/components/charts/line-chart/utils/internal-interfaces.d.ts +1 -0
- package/dist/components/charts/line-chart/utils/internal-interfaces.d.ts.map +1 -1
- package/dist/utils/formatters.js +1 -1
- package/package.json +2 -2
- package/src/components/charts/line-chart/components/body.module.less +0 -1
- package/src/components/charts/line-chart/components/body.tsx +23 -28
- package/src/components/charts/line-chart/components/hover-popover.module.less +0 -1
- package/src/components/charts/line-chart/components/hover-popover.tsx +1 -0
- package/src/components/charts/line-chart/components/sidebar.module.less +7 -3
- package/src/components/charts/line-chart/components/sidebar.tsx +17 -16
- package/src/components/charts/line-chart/components/stuff.module.less +12 -3
- package/src/components/charts/line-chart/components/stuff.module.less.d.ts +2 -0
- package/src/components/charts/line-chart/components/stuff.tsx +104 -17
- package/src/components/charts/line-chart/components/svg-bars.tsx +37 -19
- package/src/components/charts/line-chart/components/svg-body.tsx +8 -0
- package/src/components/charts/line-chart/components/svg.module.less +0 -1
- package/src/components/charts/line-chart/line-chart.stories.tsx +159 -1
- package/src/components/charts/line-chart/stores/line-chart.store.ts +26 -6
- package/src/components/charts/line-chart/stores/svg.store.ts +1 -1
- package/src/components/charts/line-chart/utils/interfaces.ts +1 -1
- package/src/components/charts/line-chart/utils/internal-interfaces.ts +1 -0
- package/src/utils/__tests__/formatters.test.ts +1 -1
- package/src/utils/formatters.ts +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/charts/line-chart/line-chart.stories.tsx"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"line-chart.stories.js","sourceRoot":"","sources":["../../../../src/components/charts/line-chart/line-chart.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line-chart.store.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/stores/line-chart.store.ts"],"names":[],"mappings":"AAEA,OAAO,EACH,gBAAgB,EAGhB,eAAe,EACf,cAAc,EACd,mBAAmB,EACtB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"line-chart.store.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/stores/line-chart.store.ts"],"names":[],"mappings":"AAEA,OAAO,EACH,gBAAgB,EAGhB,eAAe,EACf,cAAc,EACd,mBAAmB,EACtB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAsEhF,qBACa,cAAc;IACX,MAAM,UAAS;IACf,OAAO,EAAE,gBAAgB,CAAoB;IAC7C,OAAO,EAAE,WAAW,EAAE,CAAM;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAM;IAChC,UAAU,EAAE,mBAAmB,CAAS;IAExC,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAE5B,YAAY,SAAM;;IAMtB,IAAI,UAAW,cAAc,UAsCnC;IAEM,eAAe,UAAW,MAAM,aAAa,OAAO,UAM1D;CACL"}
|
|
@@ -14,15 +14,29 @@ const react_ioc_1 = require("@servicetitan/react-ioc");
|
|
|
14
14
|
const mobx_1 = require("mobx");
|
|
15
15
|
const const_1 = require("../utils/const");
|
|
16
16
|
const formatters_1 = require("../utils/formatters");
|
|
17
|
-
const getSideMetricsSettings = (
|
|
17
|
+
const getSideMetricsSettings = (metrics, values, range, title, format) => {
|
|
18
|
+
var _a;
|
|
18
19
|
let maxRange = range !== null && range !== void 0 ? range : 0;
|
|
20
|
+
const lineBarMetricIDs = metrics
|
|
21
|
+
.filter(m => m.type === 'line' || m.type === 'bar')
|
|
22
|
+
.map(m => m.id);
|
|
23
|
+
const stackedBarMetricIDs = metrics.filter(m => m.type === 'stacked-bar').map(m => m.id);
|
|
19
24
|
if (!maxRange) {
|
|
20
|
-
maxRange = values.reduce((sum, metricValues) =>
|
|
25
|
+
maxRange = values.reduce((sum, metricValues) => lineBarMetricIDs.includes(metricValues.metricId)
|
|
21
26
|
? Math.max(sum, metricValues.values.reduce((acc, v) => Math.max(acc, v), 0))
|
|
22
27
|
: sum, 0);
|
|
23
28
|
}
|
|
29
|
+
if (stackedBarMetricIDs.length) {
|
|
30
|
+
const stackChartMetricValues = values
|
|
31
|
+
.filter(metricValues => stackedBarMetricIDs.includes(metricValues.metricId))
|
|
32
|
+
.map(metric => metric.values);
|
|
33
|
+
const summedStackedMetrics = (_a = stackChartMetricValues[0]) === null || _a === void 0 ? void 0 : _a.map((value, i) => stackChartMetricValues.reduce((sum, metricValues) => sum + metricValues[i], 0));
|
|
34
|
+
if (summedStackedMetrics === null || summedStackedMetrics === void 0 ? void 0 : summedStackedMetrics.length) {
|
|
35
|
+
maxRange = Math.max(...summedStackedMetrics, maxRange);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
24
38
|
if (!maxRange) {
|
|
25
|
-
if (!
|
|
39
|
+
if (!lineBarMetricIDs.length && !stackedBarMetricIDs.length) {
|
|
26
40
|
return undefined;
|
|
27
41
|
}
|
|
28
42
|
maxRange = 10;
|
|
@@ -37,7 +51,8 @@ const getSideMetricsSettings = (ids, values, range, title, format) => {
|
|
|
37
51
|
for (let i = 0; i < 10; i++) {
|
|
38
52
|
sums.push(formatter(maxRange - i * step));
|
|
39
53
|
}
|
|
40
|
-
|
|
54
|
+
const width = title ? 64 : 48;
|
|
55
|
+
return { maxRange, maxValue: 1.1 * maxRange, title: title !== null && title !== void 0 ? title : '', values: sums, width };
|
|
41
56
|
};
|
|
42
57
|
let LineChartStore = class LineChartStore {
|
|
43
58
|
constructor() {
|
|
@@ -101,8 +116,8 @@ let LineChartStore = class LineChartStore {
|
|
|
101
116
|
const mv = props.metricValues.find(mv => mv.metricId === m.id);
|
|
102
117
|
return Object.assign(Object.assign({}, m), { isRight: !!m.isRight, type: (_a = m.type) !== null && _a !== void 0 ? _a : 'line', opts: (_b = m.opts) !== null && _b !== void 0 ? _b : {}, values: (_c = mv === null || mv === void 0 ? void 0 : mv.values) !== null && _c !== void 0 ? _c : [], valuesOpts: mv === null || mv === void 0 ? void 0 : mv.opts });
|
|
103
118
|
});
|
|
104
|
-
this.left = getSideMetricsSettings(this.metrics.filter(m => !m.isRight)
|
|
105
|
-
this.right = getSideMetricsSettings(this.metrics.filter(m => m.isRight)
|
|
119
|
+
this.left = getSideMetricsSettings(this.metrics.filter(m => !m.isRight), props.metricValues, props.maxRange, props.titleY, this.display.yLeftFormat);
|
|
120
|
+
this.right = getSideMetricsSettings(this.metrics.filter(m => m.isRight), props.metricValues, props.maxRangeRight, props.titleYRight, this.display.yRightFormat);
|
|
106
121
|
this.resolution = props.resolution;
|
|
107
122
|
this.periods = props.periods || [];
|
|
108
123
|
this.hoveredIndex = -1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line-chart.store.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/stores/line-chart.store.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,uDAAqD;AACrD,+BAA0D;AAS1D,0CAAgD;AAEhD,oDAAmD;AAEnD,MAAM,sBAAsB,GAAG,CAC3B,
|
|
1
|
+
{"version":3,"file":"line-chart.store.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/stores/line-chart.store.ts"],"names":[],"mappings":"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"}
|
|
@@ -65,7 +65,7 @@ let SvgStore = class SvgStore {
|
|
|
65
65
|
value: (length, metrics, maxValueLeft, maxValueRight) => {
|
|
66
66
|
this.length = length || 1;
|
|
67
67
|
this.key = Date.now();
|
|
68
|
-
const hasBars = !!metrics.filter(m => m.type === 'bar').length;
|
|
68
|
+
const hasBars = !!metrics.filter(m => m.type === 'bar' || m.type === 'stacked-bar').length;
|
|
69
69
|
if (hasBars) {
|
|
70
70
|
this.fullBarWidth = 100 / this.length;
|
|
71
71
|
this.xOffset = this.fullBarWidth / 2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"svg.store.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/stores/svg.store.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,uDAAqD;AACrD,+BAA0D;AAG1D,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAC7B,MAAM,WAAW,GAAG,CAAC,CAAC;AAGtB,IAAa,QAAQ,GAArB,MAAa,QAAQ;IAUjB;QATY;;;;mBAAM,CAAC;WAAC;QACR;;;;mBAAS,CAAC;WAAC;QACX;;;;mBAAU,CAAC;WAAC;QACZ;;;;mBAAW,CAAC;WAAC;QAEzB;;;;mBAAuB,CAAC;WAAC;QACzB;;;;mBAAuB,CAAC;WAAC;QACzB;;;;mBAAwB,CAAC;WAAC;QAMlB;;;;mBAAO,CACX,MAAc,EACd,OAAsB,EACtB,YAAoB,EACpB,aAAqB,EACvB,EAAE;gBACA,IAAI,CAAC,MAAM,GAAG,MAAM,IAAI,CAAC,CAAC;gBAC1B,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;gBAEtB,MAAM,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"svg.store.js","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/stores/svg.store.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
export declare type LineChartResolution = 'hour' | 'day' | 'week' | 'month';
|
|
3
|
-
export declare type LineChartMetricType = 'line' | 'bar';
|
|
3
|
+
export declare type LineChartMetricType = 'line' | 'bar' | 'stacked-bar';
|
|
4
4
|
export declare type LineChartMetricsTitlePosition = 'top' | 'top-right' | 'bottom';
|
|
5
5
|
export interface LineChartMetricOpts {
|
|
6
6
|
dashed?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/utils/interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,oBAAY,mBAAmB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AACpE,oBAAY,mBAAmB,GAAG,MAAM,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/utils/interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,oBAAY,mBAAmB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AACpE,oBAAY,mBAAmB,GAAG,MAAM,GAAG,KAAK,GAAG,aAAa,CAAC;AACjE,oBAAY,6BAA6B,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE3E,MAAM,WAAW,mBAAmB;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,EAAE,CAAC,EAAE,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,oBAAY,wBAAwB,GAC9B,SAAS,GACT;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAER,MAAM,WAAW,qBAAqB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE,wBAAwB,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,aAAa;IAC1B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,YAAY,EAAE,qBAAqB,EAAE,CAAC;IACtC,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,oBAAY,kCAAkC,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AACnF,oBAAY,8BAA8B,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AACrE,oBAAY,2BAA2B,GACjC,8BAA8B,GAC9B,kCAAkC,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,2BAA2B,CAAC;IAC1C,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C,oBAAoB,CAAC,EAAE,6BAA6B,CAAC;IACrD,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;IAChD,kBAAkB,CAAC,EAAE,2BAA2B,CAAC;CACpD;AAED,MAAM,WAAW,cAAe,SAAQ,aAAa;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal-interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/utils/internal-interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAElG,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"internal-interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/utils/internal-interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAElG,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,WAAW;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,mBAAmB,CAAC;IAC1B,IAAI,EAAE,mBAAmB,CAAC;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,UAAU,CAAC,EAAE,wBAAwB,EAAE,CAAC;CAC3C;AAED,oBAAY,YAAY,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC"}
|
package/dist/utils/formatters.js
CHANGED
|
@@ -25,7 +25,7 @@ const formatPercentValue = (value) => {
|
|
|
25
25
|
if (!value) {
|
|
26
26
|
return '0';
|
|
27
27
|
}
|
|
28
|
-
const valueMain = value ? Math.abs(Math.
|
|
28
|
+
const valueMain = value ? Math.abs(Math.round(value)) : 0;
|
|
29
29
|
if (valueMain > 0) {
|
|
30
30
|
return accounting.formatNumber(valueMain, 0);
|
|
31
31
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/marketing-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.1",
|
|
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": "81e36a937db3b09f2a5bc1f03a22cd53f7b97932"
|
|
54
54
|
}
|
|
@@ -43,11 +43,7 @@ export const Body: React.FC<{ classNameTitle?: string }> = provide({ singletons:
|
|
|
43
43
|
return (
|
|
44
44
|
<div className="d-f flex-column">
|
|
45
45
|
<Stack alignItems="stretch">
|
|
46
|
-
{left &&
|
|
47
|
-
<Stack.Item>
|
|
48
|
-
<Sidebar settings={left} classNameTitle={classNameTitle} />
|
|
49
|
-
</Stack.Item>
|
|
50
|
-
)}
|
|
46
|
+
{left && <Sidebar settings={left} classNameTitle={classNameTitle} />}
|
|
51
47
|
<Stack.Item fill>
|
|
52
48
|
<div
|
|
53
49
|
ref={ref}
|
|
@@ -56,17 +52,18 @@ export const Body: React.FC<{ classNameTitle?: string }> = provide({ singletons:
|
|
|
56
52
|
'border-right': !!right && display.yRight,
|
|
57
53
|
})}
|
|
58
54
|
>
|
|
59
|
-
{!!periods.length && periods.length !== labels.length && (
|
|
60
|
-
<div className={Styles.labelBorders}>
|
|
61
|
-
{labels
|
|
62
|
-
.map(([text, flex], ind) => [flex, `${ind}${text}`])
|
|
63
|
-
.map(([flex, key]) => (
|
|
64
|
-
<div key={key} style={{ flex }} />
|
|
65
|
-
))}
|
|
66
|
-
</div>
|
|
67
|
-
)}
|
|
68
55
|
{periods.length ? (
|
|
69
56
|
<React.Fragment>
|
|
57
|
+
{periods.length !== labels.length && (
|
|
58
|
+
<div className={Styles.labelBorders}>
|
|
59
|
+
{labels
|
|
60
|
+
.map(([text, flex], ind) => [flex, `${ind}${text}`])
|
|
61
|
+
.map(([flex, key]) => (
|
|
62
|
+
<div key={key} style={{ flex }} />
|
|
63
|
+
))}
|
|
64
|
+
</div>
|
|
65
|
+
)}
|
|
66
|
+
|
|
70
67
|
<SvgBody horizontalGrid={display.yGrid} metrics={metrics} />
|
|
71
68
|
<HoverPopover />
|
|
72
69
|
<SvgBodyHover
|
|
@@ -85,22 +82,20 @@ export const Body: React.FC<{ classNameTitle?: string }> = provide({ singletons:
|
|
|
85
82
|
)}
|
|
86
83
|
</div>
|
|
87
84
|
</Stack.Item>
|
|
88
|
-
{right &&
|
|
89
|
-
<Stack.Item>
|
|
90
|
-
<Sidebar settings={right} right classNameTitle={classNameTitle} />
|
|
91
|
-
</Stack.Item>
|
|
92
|
-
)}
|
|
85
|
+
{right && <Sidebar settings={right} right classNameTitle={classNameTitle} />}
|
|
93
86
|
</Stack>
|
|
94
87
|
{display.xLabels && (
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
88
|
+
<XAxisLabels
|
|
89
|
+
labels={labels}
|
|
90
|
+
width={rect?.width ?? 0}
|
|
91
|
+
left={left?.width ?? 0}
|
|
92
|
+
right={right?.width ?? 0}
|
|
93
|
+
labelsMerged={periods.length !== labels.length}
|
|
94
|
+
hasBars={
|
|
95
|
+
!!metrics.filter(m => m.type === 'bar' || m.type === 'stacked-bar')
|
|
96
|
+
.length
|
|
97
|
+
}
|
|
98
|
+
/>
|
|
104
99
|
)}
|
|
105
100
|
{display.metricsTitlePosition === 'bottom' && (
|
|
106
101
|
<Stack direction="row" justifyContent="center" className="p-2">
|
|
@@ -61,6 +61,10 @@
|
|
|
61
61
|
.label {
|
|
62
62
|
justify-content: flex-end;
|
|
63
63
|
}
|
|
64
|
+
|
|
65
|
+
.sidebar-no-title {
|
|
66
|
+
padding: 0 0 0 @spacing-2;
|
|
67
|
+
}
|
|
64
68
|
}
|
|
65
69
|
|
|
66
70
|
.sidebar-right {
|
|
@@ -76,8 +80,8 @@
|
|
|
76
80
|
.label {
|
|
77
81
|
justify-content: flex-start;
|
|
78
82
|
}
|
|
79
|
-
}
|
|
80
83
|
|
|
81
|
-
.sidebar-no-title {
|
|
82
|
-
|
|
84
|
+
.sidebar-no-title {
|
|
85
|
+
padding: 0 @spacing-2 0 0;
|
|
86
|
+
}
|
|
83
87
|
}
|
|
@@ -6,29 +6,29 @@ import { SideMetricsSettings } from '../utils/internal-interfaces';
|
|
|
6
6
|
import { keyVal } from '../utils/key';
|
|
7
7
|
|
|
8
8
|
interface SidebarProps {
|
|
9
|
-
settings
|
|
9
|
+
settings: SideMetricsSettings;
|
|
10
10
|
className?: string;
|
|
11
11
|
classNameTitle?: string;
|
|
12
12
|
right?: boolean;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
export const Sidebar: React.FC<SidebarProps> = ({ settings, right, className, classNameTitle }) => {
|
|
16
|
-
const sidebarTitle =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
) : undefined;
|
|
16
|
+
const sidebarTitle = settings.title ? (
|
|
17
|
+
<Stack.Item
|
|
18
|
+
className={classNames(
|
|
19
|
+
Styles.sidebarTitle,
|
|
20
|
+
Styles.sidebarTitleText,
|
|
21
|
+
classNameTitle ?? Styles.sidebarTitleDefault
|
|
22
|
+
)}
|
|
23
|
+
>
|
|
24
|
+
{settings.title || ''}
|
|
25
|
+
</Stack.Item>
|
|
26
|
+
) : undefined;
|
|
28
27
|
|
|
29
28
|
return (
|
|
30
|
-
<
|
|
29
|
+
<div
|
|
31
30
|
className={classNames(
|
|
31
|
+
'd-f flex-row',
|
|
32
32
|
className,
|
|
33
33
|
Styles.sidebar,
|
|
34
34
|
sidebarTitle ? Styles.sidebarWithTitle : Styles.sidebarNoTitle,
|
|
@@ -37,6 +37,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ settings, right, className, cl
|
|
|
37
37
|
[Styles.sidebarNoTitle]: !sidebarTitle,
|
|
38
38
|
}
|
|
39
39
|
)}
|
|
40
|
+
style={{ width: `${settings.width}px` }}
|
|
40
41
|
>
|
|
41
42
|
{!right && sidebarTitle}
|
|
42
43
|
<Stack
|
|
@@ -45,7 +46,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ settings, right, className, cl
|
|
|
45
46
|
justifyContent="space-evenly"
|
|
46
47
|
>
|
|
47
48
|
<div className={Styles.labelGap} />
|
|
48
|
-
{settings
|
|
49
|
+
{settings.values.map((val, i) => (
|
|
49
50
|
<div key={keyVal(val, i)} className={Styles.label}>
|
|
50
51
|
{val}
|
|
51
52
|
</div>
|
|
@@ -53,6 +54,6 @@ export const Sidebar: React.FC<SidebarProps> = ({ settings, right, className, cl
|
|
|
53
54
|
<div className={Styles.labelGap} />
|
|
54
55
|
</Stack>
|
|
55
56
|
{!!right && sidebarTitle}
|
|
56
|
-
</
|
|
57
|
+
</div>
|
|
57
58
|
);
|
|
58
59
|
};
|
|
@@ -1,10 +1,19 @@
|
|
|
1
1
|
@import (reference) '~@servicetitan/tokens/dist/tokens.less';
|
|
2
2
|
|
|
3
3
|
.color-tag {
|
|
4
|
-
width: @spacing-
|
|
5
|
-
height: @spacing-2;
|
|
4
|
+
width: @spacing-3;
|
|
6
5
|
margin-right: @spacing-1;
|
|
7
|
-
|
|
6
|
+
height: 3px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.color-tag-dashed {
|
|
10
|
+
height: 0;
|
|
11
|
+
border-top-style: dashed;
|
|
12
|
+
border-top-width: 3px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.color-tag-small {
|
|
16
|
+
width: @spacing-2;
|
|
8
17
|
}
|
|
9
18
|
|
|
10
19
|
.x-axis-label {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { CSSProperties, useMemo } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { BodyText, Stack } from '@servicetitan/design-system';
|
|
4
4
|
import * as Styles from './stuff.module.less';
|
|
@@ -10,11 +10,27 @@ interface ColorTagProps {
|
|
|
10
10
|
color: string;
|
|
11
11
|
className?: string;
|
|
12
12
|
small?: boolean;
|
|
13
|
+
dashed?: boolean;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
|
-
export const ColorTag: React.FC<ColorTagProps> = ({ label, color, className, small }) => (
|
|
16
|
+
export const ColorTag: React.FC<ColorTagProps> = ({ label, color, className, small, dashed }) => (
|
|
16
17
|
<Stack alignItems="center" className={className}>
|
|
17
|
-
<div
|
|
18
|
+
<div
|
|
19
|
+
style={
|
|
20
|
+
dashed
|
|
21
|
+
? {
|
|
22
|
+
borderColor: color,
|
|
23
|
+
}
|
|
24
|
+
: {
|
|
25
|
+
backgroundColor: color,
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
className={classNames(
|
|
29
|
+
Styles.colorTag,
|
|
30
|
+
dashed && Styles.colorTagDashed,
|
|
31
|
+
small && Styles.colorTagSmall
|
|
32
|
+
)}
|
|
33
|
+
/>
|
|
18
34
|
<BodyText size={small ? 'xsmall' : 'small'}>{label}</BodyText>
|
|
19
35
|
</Stack>
|
|
20
36
|
);
|
|
@@ -26,21 +42,92 @@ interface MetricsTitleProps {
|
|
|
26
42
|
export const MetricsTitle: React.FC<MetricsTitleProps> = ({ metrics }) => (
|
|
27
43
|
<Stack alignItems="center">
|
|
28
44
|
{metrics.map(m => (
|
|
29
|
-
<ColorTag
|
|
45
|
+
<ColorTag
|
|
46
|
+
key={m.id}
|
|
47
|
+
label={m.title}
|
|
48
|
+
color={m.color}
|
|
49
|
+
dashed={m.opts?.dashed}
|
|
50
|
+
className="m-x-1"
|
|
51
|
+
/>
|
|
30
52
|
))}
|
|
31
53
|
</Stack>
|
|
32
54
|
);
|
|
33
55
|
|
|
34
|
-
export const XAxisLabels: React.FC<{
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
56
|
+
export const XAxisLabels: React.FC<{
|
|
57
|
+
labels: ChartXLabels;
|
|
58
|
+
width: number;
|
|
59
|
+
left: number;
|
|
60
|
+
right: number;
|
|
61
|
+
labelsMerged: boolean;
|
|
62
|
+
hasBars: boolean;
|
|
63
|
+
}> = ({ labels, width, left, right, labelsMerged, hasBars }) => {
|
|
64
|
+
const data = useMemo(() => {
|
|
65
|
+
const styles: CSSProperties = {};
|
|
66
|
+
const labelsMapped = labels.map(([text, flex], ind) => ({
|
|
67
|
+
text,
|
|
68
|
+
flex,
|
|
69
|
+
key: `${ind}${text}`,
|
|
70
|
+
className: '',
|
|
71
|
+
}));
|
|
72
|
+
|
|
73
|
+
if (hasBars) {
|
|
74
|
+
// when we have bars, all labels will get space equally, so no need to calculate margins
|
|
75
|
+
styles.marginLeft = `${left}px`;
|
|
76
|
+
styles.marginRight = `${right}px`;
|
|
77
|
+
} else if (labels.length && !!width && !labelsMerged) {
|
|
78
|
+
// when we have only lines, we should calculate available space for first and last label
|
|
79
|
+
|
|
80
|
+
const labelWidth = (width - left - right) / labels.length;
|
|
81
|
+
const labelHalfWidth = labelWidth / 2;
|
|
82
|
+
|
|
83
|
+
if (left) {
|
|
84
|
+
if (left > labelHalfWidth) {
|
|
85
|
+
styles.marginLeft = `${left - labelHalfWidth}px`;
|
|
86
|
+
} else {
|
|
87
|
+
labelsMapped[0].flex = (left + labelHalfWidth) / labelWidth;
|
|
88
|
+
}
|
|
89
|
+
} else {
|
|
90
|
+
labelsMapped[0].flex = 0.5;
|
|
91
|
+
labelsMapped[0].className = 't-truncate';
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
if (right) {
|
|
95
|
+
if (right > labelHalfWidth) {
|
|
96
|
+
styles.marginRight = `${right - labelHalfWidth}px`;
|
|
97
|
+
} else {
|
|
98
|
+
labelsMapped[labels.length - 1].flex = (right + labelHalfWidth) / labelWidth;
|
|
99
|
+
}
|
|
100
|
+
} else {
|
|
101
|
+
labelsMapped[labels.length - 1].flex = 0.5;
|
|
102
|
+
labelsMapped[labels.length - 1].className = 't-truncate';
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
return {
|
|
107
|
+
labels: labelsMapped,
|
|
108
|
+
styles,
|
|
109
|
+
};
|
|
110
|
+
}, [labels, left, right, labelsMerged, width, hasBars]);
|
|
111
|
+
|
|
112
|
+
return (
|
|
113
|
+
<div style={data.styles}>
|
|
114
|
+
<Stack
|
|
115
|
+
direction="row"
|
|
116
|
+
justifyContent="space-between"
|
|
117
|
+
alignItems="center"
|
|
118
|
+
className="m-t-1"
|
|
119
|
+
>
|
|
120
|
+
{data.labels.map(({ text, flex, key, className }) => (
|
|
121
|
+
<div key={key} style={{ flex }} className={className}>
|
|
122
|
+
<BodyText
|
|
123
|
+
size="xsmall"
|
|
124
|
+
className={classNames(Styles.xAxisLabel, 'ta-center')}
|
|
125
|
+
>
|
|
126
|
+
{text}
|
|
127
|
+
</BodyText>
|
|
128
|
+
</div>
|
|
129
|
+
))}
|
|
130
|
+
</Stack>
|
|
131
|
+
</div>
|
|
132
|
+
);
|
|
133
|
+
};
|
|
@@ -7,9 +7,10 @@ import { SvgStore } from '../stores/svg.store';
|
|
|
7
7
|
|
|
8
8
|
interface SvgBarsProps {
|
|
9
9
|
metrics: ChartMetric[];
|
|
10
|
+
isStackedBarChart?: boolean;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
|
-
export const SvgBars: React.FC<SvgBarsProps> = observer(({ metrics }) => {
|
|
13
|
+
export const SvgBars: React.FC<SvgBarsProps> = observer(({ metrics, isStackedBarChart }) => {
|
|
13
14
|
const [store] = useDependencies(SvgStore);
|
|
14
15
|
const { fpx, fpy, barWidth, length } = store;
|
|
15
16
|
const barWidthHalf = barWidth / 2;
|
|
@@ -17,25 +18,42 @@ export const SvgBars: React.FC<SvgBarsProps> = observer(({ metrics }) => {
|
|
|
17
18
|
|
|
18
19
|
for (let i = 0; i < length; i++) {
|
|
19
20
|
const x = store.periodX(i);
|
|
20
|
-
const values = metrics
|
|
21
|
-
.
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}))
|
|
26
|
-
.sort((a, b) => b.val - a.val);
|
|
21
|
+
const values = metrics.map(m => ({
|
|
22
|
+
id: m.id,
|
|
23
|
+
color: m.valuesOpts?.[i]?.color ?? m.color,
|
|
24
|
+
val: store.periodY(m, i),
|
|
25
|
+
}));
|
|
27
26
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
27
|
+
if (isStackedBarChart) {
|
|
28
|
+
let stackedBarHeight = values.reduce((sum, curr) => sum + curr.val, 0);
|
|
29
|
+
|
|
30
|
+
for (const value of values) {
|
|
31
|
+
paths.push(
|
|
32
|
+
<rect
|
|
33
|
+
key={keyVal(value.id, i)}
|
|
34
|
+
x={fpx(x - barWidthHalf)}
|
|
35
|
+
y={fpy(stackedBarHeight)}
|
|
36
|
+
width={fpx(barWidth)}
|
|
37
|
+
height={fpx(value.val)}
|
|
38
|
+
fill={value.color}
|
|
39
|
+
/>
|
|
40
|
+
);
|
|
41
|
+
stackedBarHeight -= value.val;
|
|
42
|
+
}
|
|
43
|
+
} else {
|
|
44
|
+
values.sort((a, b) => b.val - a.val);
|
|
45
|
+
for (const value of values) {
|
|
46
|
+
paths.push(
|
|
47
|
+
<rect
|
|
48
|
+
key={keyVal(value.id, i)}
|
|
49
|
+
x={fpx(x - barWidthHalf)}
|
|
50
|
+
y={fpy(value.val)}
|
|
51
|
+
width={fpx(barWidth)}
|
|
52
|
+
height={fpx(value.val)}
|
|
53
|
+
fill={value.color}
|
|
54
|
+
/>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
39
57
|
}
|
|
40
58
|
}
|
|
41
59
|
|