@elastic/charts 68.0.0 → 68.0.2
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/chart_types/bullet_graph/renderer/canvas/index.js +17 -10
- package/dist/chart_types/bullet_graph/renderer/canvas/index.js.map +1 -1
- package/dist/chart_types/metric/renderer/dom/index.js +56 -38
- package/dist/chart_types/metric/renderer/dom/index.js.map +1 -1
- package/dist/chart_types/metric/renderer/dom/metric.js +10 -12
- package/dist/chart_types/metric/renderer/dom/metric.js.map +1 -1
- package/dist/chart_types/metric/renderer/dom/text.js +11 -185
- package/dist/chart_types/metric/renderer/dom/text.js.map +1 -1
- package/dist/chart_types/metric/renderer/dom/text_measurements.d.ts +2 -0
- package/dist/chart_types/metric/renderer/dom/text_measurements.d.ts.map +1 -0
- package/dist/chart_types/metric/renderer/dom/text_measurements.js +189 -0
- package/dist/chart_types/metric/renderer/dom/text_measurements.js.map +1 -0
- package/dist/chart_types/metric/renderer/dom/text_processing.d.ts +2 -0
- package/dist/chart_types/metric/renderer/dom/text_processing.d.ts.map +1 -0
- package/dist/chart_types/metric/renderer/dom/text_processing.js +43 -0
- package/dist/chart_types/metric/renderer/dom/text_processing.js.map +1 -0
- package/dist/chart_types/xy_chart/renderer/canvas/areas.js +1 -1
- package/dist/chart_types/xy_chart/renderer/canvas/areas.js.map +1 -1
- package/dist/chart_types/xy_chart/renderer/canvas/lines.js +1 -1
- package/dist/chart_types/xy_chart/renderer/canvas/lines.js.map +1 -1
- package/dist/chart_types/xy_chart/specs/line_annotation.d.ts +1 -1
- package/dist/chart_types/xy_chart/specs/line_annotation.d.ts.map +1 -1
- package/dist/chart_types/xy_chart/specs/line_annotation.js +0 -1
- package/dist/chart_types/xy_chart/specs/line_annotation.js.map +1 -1
- package/dist/chart_types/xy_chart/utils/fill_series.js +1 -4
- package/dist/chart_types/xy_chart/utils/fill_series.js.map +1 -1
- package/dist/chart_types/xy_chart/utils/series.js +6 -11
- package/dist/chart_types/xy_chart/utils/series.js.map +1 -1
- package/dist/chart_types/xy_chart/utils/specs.d.ts +0 -5
- package/dist/chart_types/xy_chart/utils/specs.d.ts.map +1 -1
- package/dist/chart_types/xy_chart/utils/specs.js.map +1 -1
- package/dist/theme_dark.css +1 -1
- package/dist/theme_dark.css.map +1 -1
- package/dist/theme_light.css +1 -1
- package/dist/theme_light.css.map +1 -1
- package/dist/theme_only_dark.css.map +1 -1
- package/dist/theme_only_light.css.map +1 -1
- package/package.json +1 -1
|
@@ -23,6 +23,7 @@ const common_1 = require("../../../../utils/common");
|
|
|
23
23
|
const fast_deep_equal_1 = require("../../../../utils/fast_deep_equal");
|
|
24
24
|
const light_theme_1 = require("../../../../utils/themes/light_theme");
|
|
25
25
|
const metric_1 = require("../../../metric/renderer/dom/metric");
|
|
26
|
+
const text_measurements_1 = require("../../../metric/renderer/dom/text_measurements");
|
|
26
27
|
const get_active_values_1 = require("../../selectors/get_active_values");
|
|
27
28
|
const get_bullet_spec_1 = require("../../selectors/get_bullet_spec");
|
|
28
29
|
const get_chart_size_1 = require("../../selectors/get_chart_size");
|
|
@@ -98,16 +99,22 @@ class Component extends react_1.default.Component {
|
|
|
98
99
|
' ',
|
|
99
100
|
react_1.default.createElement("strong", null, ((_d = datum.targetFormatter) !== null && _d !== void 0 ? _d : datum.valueFormatter)(datum.target)))) : undefined,
|
|
100
101
|
};
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
102
|
+
const bulletToMetricStyle = (0, common_1.mergePartial)(metricStyle, {
|
|
103
|
+
barBackground: colorScale(datum.value).hex(),
|
|
104
|
+
emptyBackground: colors_1.Colors.Transparent.keyword,
|
|
105
|
+
border: 'gray',
|
|
106
|
+
minHeight: 0,
|
|
107
|
+
textLightColor: 'white',
|
|
108
|
+
textDarkColor: 'black',
|
|
109
|
+
nonFiniteText: 'N/A',
|
|
110
|
+
valueFontSize: 'default',
|
|
111
|
+
});
|
|
112
|
+
const panel = { width: size.width / stats.columns, height: size.height / stats.rows };
|
|
113
|
+
const textDimensions = (0, text_measurements_1.getMetricTextPartDimensions)(bulletDatum, panel, bulletToMetricStyle, locale);
|
|
114
|
+
const sizes = (0, text_measurements_1.getSnappedFontSizes)(textDimensions.heightBasedSizes.valueFontSize, panel.height, bulletToMetricStyle);
|
|
115
|
+
textDimensions.heightBasedSizes.valueFontSize = sizes.valueFontSize;
|
|
116
|
+
textDimensions.heightBasedSizes.valuePartFontSize = sizes.valuePartFontSize;
|
|
117
|
+
return (react_1.default.createElement(metric_1.Metric, { chartId: `${this.props.chartId}-${stats.rowIndex}-${stats.columnIndex}`, datum: bulletDatum, hasTitles: this.props.hasTitles, totalRows: stats.rows, totalColumns: stats.columns, columnIndex: stats.columnIndex, rowIndex: stats.rowIndex, style: bulletToMetricStyle, backgroundColor: backgroundColor, contrastOptions: contrastOptions, textDimensions: textDimensions }));
|
|
111
118
|
} }),
|
|
112
119
|
");"))));
|
|
113
120
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chart_types/bullet_graph/renderer/canvas/index.tsx"],"names":[],"mappings":";;;;;;AAQA,kDAAyC;AACzC,6CAAsC;AACtC,iCAAqD;AAErD,qCAAwC;AAExC,sFAAwE;AACxE,sDAA0D;AAC1D,wEAA2E;AAC3E,2EAAuE;AACvE,6CAA4E;AAC5E,2DAAkE;AAElE,mGAI8D;AAC9D,iFAAoF;AACpF,uGAAsH;AACtH,6GAA+G;AAC/G,qFAAwF;AACxF,qDAAwD;AAExD,uEAA8D;AAE9D,sEAAmE;AAEnE,gEAA6D;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chart_types/bullet_graph/renderer/canvas/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,7 +32,7 @@ const react_1 = __importStar(require("react"));
|
|
|
32
32
|
const react_redux_1 = require("react-redux");
|
|
33
33
|
const redux_1 = require("redux");
|
|
34
34
|
const metric_1 = require("./metric");
|
|
35
|
-
const
|
|
35
|
+
const text_measurements_1 = require("./text_measurements");
|
|
36
36
|
const color_calcs_1 = require("../../../../common/color_calcs");
|
|
37
37
|
const color_library_wrappers_1 = require("../../../../common/color_library_wrappers");
|
|
38
38
|
const specs_1 = require("../../../../specs");
|
|
@@ -55,9 +55,7 @@ function Component({ chartId, hasTitles, initialized, size: { width, height }, a
|
|
|
55
55
|
}
|
|
56
56
|
const { data } = spec;
|
|
57
57
|
const totalRows = data.length;
|
|
58
|
-
const maxColumns = data.reduce((acc, row) =>
|
|
59
|
-
return Math.max(acc, row.length);
|
|
60
|
-
}, 0);
|
|
58
|
+
const maxColumns = data.reduce((acc, row) => Math.max(acc, row.length), 0);
|
|
61
59
|
const panel = { width: width / maxColumns, height: height / totalRows };
|
|
62
60
|
const contrastOptions = {
|
|
63
61
|
lightColor: (0, color_library_wrappers_1.colorToRgba)(style.textLightColor),
|
|
@@ -65,43 +63,63 @@ function Component({ chartId, hasTitles, initialized, size: { width, height }, a
|
|
|
65
63
|
};
|
|
66
64
|
const emptyBackgroundRGBA = (0, color_calcs_1.combineColors)((0, color_library_wrappers_1.colorToRgba)(style.emptyBackground), (0, color_library_wrappers_1.colorToRgba)(backgroundColor));
|
|
67
65
|
const emptyBackground = (0, color_library_wrappers_1.RGBATupleToString)(emptyBackgroundRGBA);
|
|
68
|
-
const
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
66
|
+
const emptyForegroundColor = (0, color_calcs_1.highContrastColor)(emptyBackgroundRGBA, undefined, contrastOptions).color;
|
|
67
|
+
const metricsConfigs = data.reduce((acc, columns, rowIndex) => {
|
|
68
|
+
acc.configs = acc.configs.concat(columns.map((datum, columnIndex) => {
|
|
69
|
+
const key = `${columnIndex}-${rowIndex}`;
|
|
70
|
+
if (!datum) {
|
|
71
|
+
return {
|
|
72
|
+
key,
|
|
73
|
+
type: 'left-empty',
|
|
74
|
+
className: (0, classnames_1.default)('echMetric', {
|
|
75
|
+
'echMetric--rightBorder': columnIndex < maxColumns - 1,
|
|
76
|
+
'echMetric--bottomBorder': rowIndex < totalRows - 1,
|
|
77
|
+
'echMetric--topBorder': hasTitles && rowIndex === 0,
|
|
78
|
+
}),
|
|
79
|
+
};
|
|
80
|
+
}
|
|
81
|
+
const textDimensions = (0, text_measurements_1.getMetricTextPartDimensions)(datum, panel, style, locale);
|
|
82
|
+
const fontSize = (0, text_measurements_1.getFitValueFontSize)(textDimensions.heightBasedSizes.valueFontSize, panel.width - textDimensions.progressBarWidth, textDimensions.visibility.gapHeight, textDimensions.textParts, style.minValueFontSize, datum.valueIcon !== undefined);
|
|
83
|
+
acc.fittedValueFontSize = Math.min(acc.fittedValueFontSize, fontSize);
|
|
84
|
+
return {
|
|
85
|
+
type: 'metric',
|
|
86
|
+
key,
|
|
87
|
+
datum,
|
|
88
|
+
columnIndex,
|
|
89
|
+
rowIndex,
|
|
90
|
+
textDimensions,
|
|
91
|
+
};
|
|
92
|
+
}), Array.from({ length: maxColumns - columns.length }, (_, zeroBasedColumnIndex) => {
|
|
93
|
+
const columnIndex = zeroBasedColumnIndex + columns.length;
|
|
94
|
+
return {
|
|
95
|
+
key: `missing-${columnIndex}-${rowIndex}`,
|
|
96
|
+
type: 'right-empty',
|
|
97
|
+
className: (0, classnames_1.default)('echMetric', {
|
|
98
|
+
'echMetric--bottomBorder': rowIndex < totalRows - 1,
|
|
99
|
+
'echMetric--topBorder': hasTitles && rowIndex === 0,
|
|
100
|
+
}),
|
|
101
|
+
};
|
|
102
|
+
}));
|
|
103
|
+
return acc;
|
|
104
|
+
}, { configs: [], fittedValueFontSize: Number.MAX_SAFE_INTEGER });
|
|
105
|
+
const { valueFontSize, valuePartFontSize } = typeof style.valueFontSize === 'number'
|
|
106
|
+
? (0, text_measurements_1.getFixedFontSizes)(style.valueFontSize)
|
|
107
|
+
: style.valueFontSize === 'default'
|
|
108
|
+
? (0, text_measurements_1.getSnappedFontSizes)(metricsConfigs.fittedValueFontSize, panel.height, style)
|
|
109
|
+
: (0, text_measurements_1.getFittedFontSizes)(metricsConfigs.fittedValueFontSize);
|
|
110
|
+
metricsConfigs.configs.forEach((config) => {
|
|
111
|
+
if (config.type === 'metric') {
|
|
112
|
+
config.textDimensions.heightBasedSizes.valueFontSize = valueFontSize;
|
|
113
|
+
config.textDimensions.heightBasedSizes.valuePartFontSize = valuePartFontSize;
|
|
114
|
+
}
|
|
115
|
+
});
|
|
79
116
|
return (react_1.default.createElement("ul", { role: "list", className: "echMetricContainer", "aria-labelledby": a11y.labelId, "aria-describedby": a11y.descriptionId, style: {
|
|
80
117
|
gridTemplateColumns: `repeat(${maxColumns}, minmax(0, 1fr)`,
|
|
81
118
|
gridTemplateRows: `repeat(${totalRows}, minmax(${style.minHeight}px, 1fr)`,
|
|
82
|
-
} },
|
|
83
|
-
return
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
'echMetric--rightBorder': columnIndex < maxColumns - 1,
|
|
87
|
-
'echMetric--bottomBorder': rowIndex < totalRows - 1,
|
|
88
|
-
'echMetric--topBorder': hasTitles && rowIndex === 0,
|
|
89
|
-
});
|
|
90
|
-
return !datum ? (react_1.default.createElement("li", { key: `${columnIndex}-${rowIndex}`, role: "presentation" },
|
|
91
|
-
react_1.default.createElement("div", { className: emptyMetricClassName, style: { borderColor: style.border, backgroundColor: emptyBackground } },
|
|
92
|
-
react_1.default.createElement("div", { className: "echMetricEmpty", style: { borderColor: emptyForegroundColor.keyword } })))) : (react_1.default.createElement("li", { key: `${columnIndex}-${rowIndex}` },
|
|
93
|
-
react_1.default.createElement(metric_1.Metric, { chartId: chartId, hasTitles: hasTitles, datum: datum, totalRows: totalRows, totalColumns: maxColumns, rowIndex: rowIndex, columnIndex: columnIndex, panel: panel, style: style, backgroundColor: backgroundColor, contrastOptions: contrastOptions, onElementClick: onElementClick, onElementOut: onElementOut, onElementOver: onElementOver, locale: locale, fittedValueFontSize: fittedValueFontSize })));
|
|
94
|
-
}),
|
|
95
|
-
...Array.from({ length: maxColumns - columns.length }, (_, zeroBasedColumnIndex) => {
|
|
96
|
-
const columnIndex = zeroBasedColumnIndex + columns.length;
|
|
97
|
-
const emptyMetricClassName = (0, classnames_1.default)('echMetric', {
|
|
98
|
-
'echMetric--bottomBorder': rowIndex < totalRows - 1,
|
|
99
|
-
'echMetric--topBorder': hasTitles && rowIndex === 0,
|
|
100
|
-
});
|
|
101
|
-
return (react_1.default.createElement("li", { key: `missing-${columnIndex}-${rowIndex}`, role: "presentation" },
|
|
102
|
-
react_1.default.createElement("div", { className: emptyMetricClassName, style: { borderColor: style.border, backgroundColor: emptyBackground } })));
|
|
103
|
-
}),
|
|
104
|
-
];
|
|
119
|
+
} }, metricsConfigs.configs.map((config) => {
|
|
120
|
+
return config.type !== 'metric' ? (react_1.default.createElement("li", { key: config.key, role: "presentation" },
|
|
121
|
+
react_1.default.createElement("div", { className: config.className, style: { borderColor: style.border, backgroundColor: emptyBackground } }, config.type === 'left-empty' && (react_1.default.createElement("div", { className: "echMetricEmpty", style: { borderColor: emptyForegroundColor.keyword } }))))) : (react_1.default.createElement("li", { key: config.key },
|
|
122
|
+
react_1.default.createElement(metric_1.Metric, { chartId: chartId, hasTitles: hasTitles, datum: config.datum, totalRows: totalRows, totalColumns: maxColumns, rowIndex: config.rowIndex, columnIndex: config.columnIndex, style: style, backgroundColor: backgroundColor, contrastOptions: contrastOptions, onElementClick: onElementClick, onElementOut: onElementOut, onElementOver: onElementOver, textDimensions: config.textDimensions })));
|
|
105
123
|
})));
|
|
106
124
|
}
|
|
107
125
|
Component.displayName = 'Metric';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,4DAAoC;AACpC,+CAAyC;AACzC,6CAAsC;AACtC,iCAAqD;AAErD,qCAAqD;AACrD,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,4DAAoC;AACpC,+CAAyC;AACzC,6CAAsC;AACtC,iCAAqD;AAErD,qCAAqD;AACrD,2DAO6B;AAC7B,gEAAwG;AACxG,sFAA2F;AAE3F,6CAAiH;AACjH,2DAA2F;AAE3F,mGAI8D;AAC9D,iFAAoF;AACpF,uGAAsH;AACtH,6GAA+G;AAC/G,qFAAwF;AACxF,sEAAmE;AAGnE,iEAA6D;AAC7D,qDAA4D;AAC5D,6EAAwE;AAwBxE,SAAS,SAAS,CAAC,EACjB,OAAO,EACP,SAAS,EACT,WAAW,EACX,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EACvB,IAAI,EACJ,KAAK,EAAE,CAAC,IAAI,CAAC,EACb,KAAK,EACL,eAAe,EACf,cAAc,EACd,YAAY,EACZ,aAAa,EACb,MAAM,EACN,eAAe,GACY;IAC3B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,eAAe,EAAE,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,IAAI,KAAK,KAAK,CAAC,IAAI,MAAM,KAAK,CAAC,EAAE,CAAC;QACzD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAEtB,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC;IAC9B,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;IAE3E,MAAM,KAAK,GAAG,EAAE,KAAK,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,CAAC;IACxE,MAAM,eAAe,GAAyB;QAC5C,UAAU,EAAE,IAAA,oCAAW,EAAC,KAAK,CAAC,cAAc,CAAC;QAC7C,SAAS,EAAE,IAAA,oCAAW,EAAC,KAAK,CAAC,aAAa,CAAC;KAC5C,CAAC;IAEF,MAAM,mBAAmB,GAAG,IAAA,2BAAa,EAAC,IAAA,oCAAW,EAAC,KAAK,CAAC,eAAe,CAAC,EAAE,IAAA,oCAAW,EAAC,eAAe,CAAC,CAAC,CAAC;IAC5G,MAAM,eAAe,GAAG,IAAA,0CAAiB,EAAC,mBAAmB,CAAC,CAAC;IAC/D,MAAM,oBAAoB,GAAG,IAAA,+BAAiB,EAAC,mBAAmB,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC,KAAK,CAAC;IAEtG,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAchC,CAAC,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;QACzB,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,MAAM,CAC9B,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE;YACjC,MAAM,GAAG,GAAG,GAAG,WAAW,IAAI,QAAQ,EAAE,CAAC;YACzC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAEX,OAAO;oBACL,GAAG;oBACH,IAAI,EAAE,YAAY;oBAClB,SAAS,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;wBACjC,wBAAwB,EAAE,WAAW,GAAG,UAAU,GAAG,CAAC;wBACtD,yBAAyB,EAAE,QAAQ,GAAG,SAAS,GAAG,CAAC;wBACnD,sBAAsB,EAAE,SAAS,IAAI,QAAQ,KAAK,CAAC;qBACpD,CAAC;iBACH,CAAC;YACJ,CAAC;YACD,MAAM,cAAc,GAAG,IAAA,+CAA2B,EAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;YAEhF,MAAM,QAAQ,GAAG,IAAA,uCAAmB,EAClC,cAAc,CAAC,gBAAgB,CAAC,aAAa,EAC7C,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC,gBAAgB,EAC7C,cAAc,CAAC,UAAU,CAAC,SAAS,EACnC,cAAc,CAAC,SAAS,EACxB,KAAK,CAAC,gBAAgB,EACtB,KAAK,CAAC,SAAS,KAAK,SAAS,CAC9B,CAAC;YACF,GAAG,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;YAEtE,OAAO;gBACL,IAAI,EAAE,QAAQ;gBACd,GAAG;gBACH,KAAK;gBACL,WAAW;gBACX,QAAQ;gBACR,cAAc;aACf,CAAC;QACJ,CAAC,CAAC,EAEF,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,GAAG,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,oBAAoB,EAAE,EAAE;YAC9E,MAAM,WAAW,GAAG,oBAAoB,GAAG,OAAO,CAAC,MAAM,CAAC;YAC1D,OAAO;gBACL,GAAG,EAAE,WAAW,WAAW,IAAI,QAAQ,EAAE;gBACzC,IAAI,EAAE,aAAa;gBACnB,SAAS,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;oBACjC,yBAAyB,EAAE,QAAQ,GAAG,SAAS,GAAG,CAAC;oBACnD,sBAAsB,EAAE,SAAS,IAAI,QAAQ,KAAK,CAAC;iBACpD,CAAC;aACH,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;QAEF,OAAO,GAAG,CAAC;IACb,CAAC,EACD,EAAE,OAAO,EAAE,EAAE,EAAE,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,EAAE,CAC9D,CAAC;IAGF,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,GACxC,OAAO,KAAK,CAAC,aAAa,KAAK,QAAQ;QACrC,CAAC,CAAC,IAAA,qCAAiB,EAAC,KAAK,CAAC,aAAa,CAAC;QACxC,CAAC,CAAC,KAAK,CAAC,aAAa,KAAK,SAAS;YACjC,CAAC,CAAC,IAAA,uCAAmB,EAAC,cAAc,CAAC,mBAAmB,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;YAC9E,CAAC,CAAC,IAAA,sCAAkB,EAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;IAE/D,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QACxC,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC7B,MAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC,aAAa,GAAG,aAAa,CAAC;YACrE,MAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;QAC/E,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CAEL,sCACE,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,oBAAoB,qBACb,IAAI,CAAC,OAAO,sBACX,IAAI,CAAC,aAAa,EACpC,KAAK,EAAE;YACL,mBAAmB,EAAE,UAAU,UAAU,kBAAkB;YAC3D,gBAAgB,EAAE,UAAU,SAAS,YAAY,KAAK,CAAC,SAAS,UAAU;SAC3E,IAEA,cAAc,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QACrC,OAAO,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAChC,sCAAI,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,IAAI,EAAC,cAAc;YACtC,uCAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,IACrG,MAAM,CAAC,IAAI,KAAK,YAAY,IAAI,CAC/B,uCAAK,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,oBAAoB,CAAC,OAAO,EAAE,GAAQ,CAC7F,CACG,CACH,CACN,CAAC,CAAC,CAAC,CACF,sCAAI,GAAG,EAAE,MAAM,CAAC,GAAG;YACjB,8BAAC,eAAe,IACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,UAAU,EACxB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,WAAW,EAAE,MAAM,CAAC,WAAW,EAC/B,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,EAChC,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,MAAM,CAAC,cAAc,GACrC,CACC,CACN,CAAC;IACJ,CAAC,CAAC,CACC,CACN,CAAC;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,QAAQ,CAAC;AAEjC,MAAM,kBAAkB,GAAG,CAAC,QAAkB,EAAiB,EAAE,CAC/D,IAAA,0BAAkB,EAChB;IACE,eAAe,EAAE,uBAAqB;CACvC,EACD,QAAQ,CACT,CAAC;AAEJ,MAAM,aAAa,GAAe;IAChC,WAAW,EAAE,KAAK;IAClB,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,KAAK;IAChB,KAAK,EAAE,EAAE;IACT,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV;IACD,IAAI,EAAE,gDAAqB;IAC3B,KAAK,EAAE,yBAAW,CAAC,MAAM;IACzB,eAAe,EAAE,yBAAW,CAAC,UAAU,CAAC,KAAK;IAC7C,MAAM,EAAE,0BAAkB,CAAC,QAAQ,CAAC,MAAM;CAC3C,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,KAAuB,EAAc,EAAE;IAC9D,IAAI,IAAA,6DAAgC,EAAC,KAAK,CAAC,KAAK,uCAAU,CAAC,WAAW,EAAE,CAAC;QACvE,OAAO,aAAa,CAAC;IACvB,CAAC;IACD,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,IAAA,2CAAuB,EAAC,KAAK,CAAC,CAAC;IAC/F,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uCAAqB,EAAC,KAAK,CAAC,CAAC;IACvD,OAAO;QACL,WAAW,EAAE,IAAI;QACjB,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,SAAS,EAAE,IAAA,iCAAc,EAAC,KAAK,CAAC;QAChC,KAAK,EAAE,IAAA,qBAAc,EAAC,KAAK,CAAC;QAC5B,IAAI,EAAE,IAAA,sBAAS,EAAC,KAAK,CAAC;QACtB,IAAI,EAAE,IAAA,kDAAuB,EAAC,KAAK,CAAC;QACpC,cAAc;QACd,aAAa;QACb,YAAY;QACZ,eAAe,EAAE,IAAA,kEAAkC,EAAC,KAAK,CAAC;QAC1D,KAAK;QACL,MAAM;KACP,CAAC;AACJ,CAAC,CAAC;AAGW,QAAA,MAAM,GAAG,IAAA,qBAAO,EAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC,SAAS,CAAC,CAAC"}
|
|
@@ -38,7 +38,7 @@ const constants_1 = require("../../../../common/constants");
|
|
|
38
38
|
const fill_text_color_1 = require("../../../../common/fill_text_color");
|
|
39
39
|
const common_1 = require("../../../../utils/common");
|
|
40
40
|
const specs_1 = require("../../specs");
|
|
41
|
-
const Metric = ({ chartId, hasTitles, rowIndex, columnIndex, totalColumns, totalRows, datum,
|
|
41
|
+
const Metric = ({ chartId, hasTitles, rowIndex, columnIndex, totalColumns, totalRows, datum, style, backgroundColor: chartBackgroundColor, contrastOptions, textDimensions, onElementClick, onElementOver, onElementOut, }) => {
|
|
42
42
|
const progressBarSize = 'small';
|
|
43
43
|
const [mouseState, setMouseState] = (0, react_1.useState)('leave');
|
|
44
44
|
const [lastMouseDownTimestamp, setLastMouseDownTimestamp] = (0, react_1.useState)(0);
|
|
@@ -64,10 +64,7 @@ const Metric = ({ chartId, hasTitles, rowIndex, columnIndex, totalColumns, total
|
|
|
64
64
|
const interactionColor = (0, color_library_wrappers_1.changeColorLightness)(hasProgressBar ? backgroundColor : datum.color, lightnessAmount, 0.8);
|
|
65
65
|
const blendedColor = (0, color_library_wrappers_1.RGBATupleToString)((0, color_calcs_1.combineColors)((0, color_library_wrappers_1.colorToRgba)(datum.color), blendingBackgroundColor));
|
|
66
66
|
const blendedInteractionColor = (0, color_library_wrappers_1.RGBATupleToString)((0, color_calcs_1.combineColors)((0, color_library_wrappers_1.colorToRgba)(interactionColor), blendingBackgroundColor));
|
|
67
|
-
const datumWithInteractionColor = {
|
|
68
|
-
...datum,
|
|
69
|
-
color: blendedInteractionColor,
|
|
70
|
-
};
|
|
67
|
+
const datumWithInteractionColor = { ...datum, color: blendedInteractionColor };
|
|
71
68
|
const event = { type: 'metricElementEvent', rowIndex, columnIndex };
|
|
72
69
|
const containerStyle = {
|
|
73
70
|
backgroundColor: (0, specs_1.isMetricWTrend)(datumWithInteractionColor) ? backgroundColor : datumWithInteractionColor.color,
|
|
@@ -83,36 +80,37 @@ const Metric = ({ chartId, hasTitles, rowIndex, columnIndex, totalColumns, total
|
|
|
83
80
|
}
|
|
84
81
|
}
|
|
85
82
|
const onElementClickHandler = () => onElementClick && onElementClick([event]);
|
|
83
|
+
const hasMouseEventsHandler = onElementOut || onElementOver || onElementClick;
|
|
86
84
|
return (react_1.default.createElement("div", { role: "figure", "aria-labelledby": datum.title && metricHTMLId, className: containerClassName, style: containerStyle, onMouseLeave: () => {
|
|
87
|
-
if (
|
|
85
|
+
if (hasMouseEventsHandler)
|
|
88
86
|
setMouseState('leave');
|
|
89
87
|
if (onElementOut)
|
|
90
88
|
onElementOut();
|
|
91
89
|
}, onMouseEnter: () => {
|
|
92
|
-
if (
|
|
90
|
+
if (hasMouseEventsHandler)
|
|
93
91
|
setMouseState('enter');
|
|
94
92
|
if (onElementOver)
|
|
95
93
|
onElementOver([event]);
|
|
96
94
|
}, onMouseDown: () => {
|
|
97
|
-
if (
|
|
95
|
+
if (hasMouseEventsHandler)
|
|
98
96
|
setMouseState('down');
|
|
99
97
|
setLastMouseDownTimestamp(Date.now());
|
|
100
98
|
}, onMouseUp: () => {
|
|
101
|
-
if (
|
|
99
|
+
if (hasMouseEventsHandler)
|
|
102
100
|
setMouseState('enter');
|
|
103
101
|
if (Date.now() - lastMouseDownTimestamp < 200 && onElementClick) {
|
|
104
102
|
onElementClickHandler();
|
|
105
103
|
}
|
|
106
104
|
}, onFocus: () => {
|
|
107
|
-
if (
|
|
105
|
+
if (hasMouseEventsHandler)
|
|
108
106
|
setMouseState('enter');
|
|
109
107
|
}, onBlur: () => {
|
|
110
|
-
if (
|
|
108
|
+
if (hasMouseEventsHandler)
|
|
111
109
|
setMouseState('leave');
|
|
112
110
|
}, onClick: (e) => {
|
|
113
111
|
e.stopPropagation();
|
|
114
112
|
} },
|
|
115
|
-
react_1.default.createElement(text_1.MetricText, { id: metricHTMLId, datum: datumWithInteractionColor,
|
|
113
|
+
react_1.default.createElement(text_1.MetricText, { id: metricHTMLId, datum: datumWithInteractionColor, style: style, onElementClick: onElementClick ? onElementClickHandler : undefined, progressBarSize: progressBarSize, highContrastTextColor: finalTextColor.keyword, textDimensions: textDimensions }),
|
|
116
114
|
(0, specs_1.isMetricWTrend)(datumWithInteractionColor) && react_1.default.createElement(sparkline_1.SparkLine, { id: metricHTMLId, datum: datumWithInteractionColor }),
|
|
117
115
|
(0, specs_1.isMetricWProgress)(datumWithInteractionColor) && (react_1.default.createElement(progress_1.ProgressBar, { datum: datumWithInteractionColor, barBackground: style.barBackground, blendedBarColor: blendedColor, size: progressBarSize })),
|
|
118
116
|
react_1.default.createElement("div", { className: "echMetric--outline", style: { color: finalTextColor.keyword } })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/metric.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,4DAAoC;AACpC,+CAAuD;AAEvD,yCAAyC;AACzC,2CAA2D;AAC3D,iCAAoC;
|
|
1
|
+
{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/metric.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,112 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.MetricText = void 0;
|
|
7
|
-
exports.getFitValueFontSize = getFitValueFontSize;
|
|
8
|
-
exports.getMetricTextPartDimensions = getMetricTextPartDimensions;
|
|
9
7
|
const classnames_1 = __importDefault(require("classnames"));
|
|
10
8
|
const react_1 = __importDefault(require("react"));
|
|
11
|
-
const
|
|
12
|
-
const canvas_text_bbox_calculator_1 = require("../../../../utils/bbox/canvas_text_bbox_calculator");
|
|
9
|
+
const text_measurements_1 = require("./text_measurements");
|
|
13
10
|
const common_1 = require("../../../../utils/common");
|
|
14
|
-
const wrap_1 = require("../../../../utils/text/wrap");
|
|
15
11
|
const specs_1 = require("../../specs");
|
|
16
|
-
const PROGRESS_BAR_WIDTH = 10;
|
|
17
|
-
const PROGRESS_BAR_TARGET_WIDTH = 4;
|
|
18
|
-
const HEIGHT_BP = [
|
|
19
|
-
[0, 200, 'xs'],
|
|
20
|
-
[200, 300, 's'],
|
|
21
|
-
[300, 400, 'm'],
|
|
22
|
-
[400, 500, 'l'],
|
|
23
|
-
[500, 600, 'xl'],
|
|
24
|
-
[600, Infinity, 'xxl'],
|
|
25
|
-
];
|
|
26
|
-
const PADDING = 8;
|
|
27
|
-
const LINE_HEIGHT = 1.2;
|
|
28
|
-
const ICON_SIZE = { xs: 16, s: 16, m: 24, l: 24, xl: 32, xxl: 42 };
|
|
29
|
-
const TITLE_FONT_SIZE = { xs: 16, s: 16, m: 24, l: 24, xl: 32, xxl: 42 };
|
|
30
|
-
const SUBTITLE_FONT_SIZE = { xs: 14, s: 14, m: 16, l: 20, xl: 26, xxl: 36 };
|
|
31
|
-
const EXTRA_FONT_SIZE = { xs: 14, s: 14, m: 16, l: 20, xl: 26, xxl: 36 };
|
|
32
|
-
const VALUE_FONT_SIZE = { xs: 36, s: 36, m: 56, l: 72, xl: 104, xxl: 170 };
|
|
33
|
-
const VALUE_PART_FONT_SIZE = { xs: 24, s: 24, m: 42, l: 56, xl: 80, xxl: 130 };
|
|
34
|
-
const VALUE_PART_FONT_RATIO = 1.3;
|
|
35
|
-
const TITLE_FONT = {
|
|
36
|
-
fontStyle: 'normal',
|
|
37
|
-
fontFamily: default_theme_attributes_1.DEFAULT_FONT_FAMILY,
|
|
38
|
-
fontVariant: 'normal',
|
|
39
|
-
fontWeight: 'bold',
|
|
40
|
-
textColor: 'black',
|
|
41
|
-
};
|
|
42
|
-
const VALUE_FONT = TITLE_FONT;
|
|
43
|
-
const SUBTITLE_FONT = {
|
|
44
|
-
...TITLE_FONT,
|
|
45
|
-
fontWeight: 'normal',
|
|
46
|
-
};
|
|
47
|
-
function getFontSizes(ranges, value, style) {
|
|
48
|
-
var _a, _b;
|
|
49
|
-
const range = ranges.find(([min, max]) => min <= value && value < max);
|
|
50
|
-
const size = range ? range[2] : (_b = (_a = ranges[0]) === null || _a === void 0 ? void 0 : _a[2]) !== null && _b !== void 0 ? _b : 's';
|
|
51
|
-
const valueFontSize = typeof style.valueFontSize === 'number' ? style.valueFontSize : VALUE_FONT_SIZE[size];
|
|
52
|
-
const valuePartFontSize = typeof style.valueFontSize === 'number'
|
|
53
|
-
? Math.ceil(valueFontSize / VALUE_PART_FONT_RATIO)
|
|
54
|
-
: VALUE_PART_FONT_SIZE[size];
|
|
55
|
-
return {
|
|
56
|
-
iconSize: ICON_SIZE[size],
|
|
57
|
-
titleFontSize: TITLE_FONT_SIZE[size],
|
|
58
|
-
subtitleFontSize: SUBTITLE_FONT_SIZE[size],
|
|
59
|
-
extraFontSize: EXTRA_FONT_SIZE[size],
|
|
60
|
-
valueFontSize,
|
|
61
|
-
valuePartFontSize,
|
|
62
|
-
};
|
|
63
|
-
}
|
|
64
|
-
function elementVisibility(datum, panel, sizes, locale, fit) {
|
|
65
|
-
const maxTitlesWidth = 0.95 * panel.width - (datum.icon ? 24 : 0) - 2 * PADDING;
|
|
66
|
-
const titleHeight = (maxLines, textMeasure) => {
|
|
67
|
-
return datum.title
|
|
68
|
-
? PADDING +
|
|
69
|
-
(0, wrap_1.wrapText)(datum.title, TITLE_FONT, sizes.titleFontSize, maxTitlesWidth, maxLines, textMeasure, locale).length *
|
|
70
|
-
sizes.titleFontSize *
|
|
71
|
-
LINE_HEIGHT
|
|
72
|
-
: 0;
|
|
73
|
-
};
|
|
74
|
-
const subtitleHeight = (maxLines, textMeasure) => {
|
|
75
|
-
return datum.subtitle
|
|
76
|
-
? PADDING +
|
|
77
|
-
(0, wrap_1.wrapText)(datum.subtitle, SUBTITLE_FONT, sizes.subtitleFontSize, maxTitlesWidth, maxLines, textMeasure, locale)
|
|
78
|
-
.length *
|
|
79
|
-
sizes.subtitleFontSize *
|
|
80
|
-
LINE_HEIGHT
|
|
81
|
-
: 0;
|
|
82
|
-
};
|
|
83
|
-
const extraHeight = sizes.extraFontSize * LINE_HEIGHT;
|
|
84
|
-
const valueHeight = sizes.valueFontSize * LINE_HEIGHT;
|
|
85
|
-
const responsiveBreakPoints = [
|
|
86
|
-
{ titleMaxLines: 3, subtitleMaxLines: 2, title: !!datum.title, subtitle: !!datum.subtitle, extra: !!datum.extra },
|
|
87
|
-
{ titleMaxLines: 3, subtitleMaxLines: 1, title: !!datum.title, subtitle: !!datum.subtitle, extra: !!datum.extra },
|
|
88
|
-
{ titleMaxLines: 2, subtitleMaxLines: 1, title: !!datum.title, subtitle: !!datum.subtitle, extra: !!datum.extra },
|
|
89
|
-
{ titleMaxLines: 1, subtitleMaxLines: 1, title: !!datum.title, subtitle: !!datum.subtitle, extra: !!datum.extra },
|
|
90
|
-
{ titleMaxLines: 1, subtitleMaxLines: 0, title: !!datum.title, subtitle: false, extra: !!datum.extra },
|
|
91
|
-
{ titleMaxLines: 1, subtitleMaxLines: 0, title: !!datum.title, subtitle: false, extra: false },
|
|
92
|
-
{ titleMaxLines: 1, subtitleMaxLines: 0, title: !!datum.title, subtitle: false, extra: false },
|
|
93
|
-
];
|
|
94
|
-
const getCombinedHeight = ({ titleMaxLines, subtitleMaxLines, title, subtitle, extra }, measure) => (title && titleMaxLines > 0 ? titleHeight(titleMaxLines, measure) : 0) +
|
|
95
|
-
(subtitle && subtitleMaxLines > 0 ? subtitleHeight(subtitleMaxLines, measure) : 0) +
|
|
96
|
-
(extra ? extraHeight : 0) +
|
|
97
|
-
valueHeight +
|
|
98
|
-
PADDING;
|
|
99
|
-
const isVisible = (ev, measure) => getCombinedHeight(ev, measure) < panel.height;
|
|
100
|
-
return (0, canvas_text_bbox_calculator_1.withTextMeasure)((textMeasure) => {
|
|
101
|
-
var _a, _b, _c;
|
|
102
|
-
const visibilityBreakpoint = fit
|
|
103
|
-
? responsiveBreakPoints.at(0)
|
|
104
|
-
: (_a = responsiveBreakPoints.find((breakpoint) => isVisible(breakpoint, textMeasure))) !== null && _a !== void 0 ? _a : responsiveBreakPoints.at(-1);
|
|
105
|
-
return {
|
|
106
|
-
...visibilityBreakpoint,
|
|
107
|
-
gapHeight: Math.max(0, panel.height - getCombinedHeight(visibilityBreakpoint, textMeasure)),
|
|
108
|
-
titleLines: (0, wrap_1.wrapText)((_b = datum.title) !== null && _b !== void 0 ? _b : '', TITLE_FONT, sizes.titleFontSize, maxTitlesWidth, visibilityBreakpoint.titleMaxLines, textMeasure, locale),
|
|
109
|
-
subtitleLines: (0, wrap_1.wrapText)((_c = datum.subtitle) !== null && _c !== void 0 ? _c : '', SUBTITLE_FONT, sizes.subtitleFontSize, maxTitlesWidth, visibilityBreakpoint.subtitleMaxLines, textMeasure, locale),
|
|
110
|
-
};
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
12
|
function lineClamp(maxLines) {
|
|
114
13
|
return {
|
|
115
14
|
textOverflow: 'ellipsis',
|
|
@@ -121,21 +20,15 @@ function lineClamp(maxLines) {
|
|
|
121
20
|
whiteSpace: 'pre-wrap',
|
|
122
21
|
};
|
|
123
22
|
}
|
|
124
|
-
const MetricText = ({ id, datum,
|
|
23
|
+
const MetricText = ({ id, datum, style, onElementClick, highContrastTextColor, progressBarSize, textDimensions }) => {
|
|
125
24
|
var _a, _b;
|
|
126
|
-
const { sizes, hasProgressBar, progressBarDirection, visibility, textParts } =
|
|
25
|
+
const { heightBasedSizes: sizes, hasProgressBar, progressBarDirection, visibility, textParts } = textDimensions;
|
|
127
26
|
const { extra, body } = datum;
|
|
128
27
|
const containerClassName = (0, classnames_1.default)('echMetricText', {
|
|
129
28
|
[`echMetricText--${progressBarSize}`]: hasProgressBar,
|
|
130
29
|
'echMetricText--vertical': progressBarDirection === common_1.LayoutDirection.Vertical,
|
|
131
30
|
'echMetricText--horizontal': progressBarDirection === common_1.LayoutDirection.Horizontal,
|
|
132
31
|
});
|
|
133
|
-
const { valueFontSize, valuePartFontSize } = style.valueFontSize === 'fit'
|
|
134
|
-
? {
|
|
135
|
-
valueFontSize: fittedValueFontSize,
|
|
136
|
-
valuePartFontSize: fittedValueFontSize / VALUE_PART_FONT_RATIO,
|
|
137
|
-
}
|
|
138
|
-
: sizes;
|
|
139
32
|
const TitleElement = () => (react_1.default.createElement("span", { style: {
|
|
140
33
|
fontSize: sizes.titleFontSize,
|
|
141
34
|
textAlign: style.titlesTextAlign,
|
|
@@ -143,8 +36,8 @@ const MetricText = ({ id, datum, panel, style, onElementClick, highContrastTextC
|
|
|
143
36
|
}, title: datum.title }, datum.title));
|
|
144
37
|
return (react_1.default.createElement("div", { className: containerClassName, style: { color: highContrastTextColor } },
|
|
145
38
|
react_1.default.createElement("div", { className: (0, classnames_1.default)('echMetricText__titlesBlock', `echMetricText__titlesBlock--${style.titlesTextAlign}`), style: datum.icon && {
|
|
146
|
-
marginLeft: 'center' === style.titlesTextAlign || style.iconAlign === 'left' ? sizes.iconSize + PADDING : 0,
|
|
147
|
-
marginRight: 'center' === style.titlesTextAlign || style.iconAlign === 'right' ? sizes.iconSize + PADDING : 0,
|
|
39
|
+
marginLeft: 'center' === style.titlesTextAlign || style.iconAlign === 'left' ? sizes.iconSize + text_measurements_1.PADDING : 0,
|
|
40
|
+
marginRight: 'center' === style.titlesTextAlign || style.iconAlign === 'right' ? sizes.iconSize + text_measurements_1.PADDING : 0,
|
|
148
41
|
} },
|
|
149
42
|
visibility.title && (react_1.default.createElement("h2", { id: id, className: "echMetricText__title" }, onElementClick ? (react_1.default.createElement("button", { style: { outline: 'none' }, onMouseDown: (e) => e.stopPropagation(), onMouseUp: (e) => e.stopPropagation(), onClick: (e) => {
|
|
150
43
|
e.stopPropagation();
|
|
@@ -165,91 +58,24 @@ const MetricText = ({ id, datum, panel, style, onElementClick, highContrastTextC
|
|
|
165
58
|
react_1.default.createElement("div", null, visibility.extra && (react_1.default.createElement("p", { className: "echMetricText__extra", style: { fontSize: sizes.extraFontSize } }, extra))),
|
|
166
59
|
react_1.default.createElement("div", { className: "echMetricText__valueGroup" },
|
|
167
60
|
react_1.default.createElement("p", { className: "echMetricText__value", style: {
|
|
168
|
-
fontSize: valueFontSize,
|
|
61
|
+
fontSize: sizes.valueFontSize,
|
|
169
62
|
textOverflow: (0, specs_1.isMetricWNumber)(datum) ? undefined : 'ellipsis',
|
|
170
63
|
color: datum.valueColor,
|
|
171
64
|
}, title: textParts.map(({ text }) => text).join('') }, textParts.map(({ emphasis, text }, i) => {
|
|
172
65
|
return emphasis === 'small' ? (react_1.default.createElement("span", { key: `${text}${i}`, className: "echMetricText__part", style: {
|
|
173
|
-
fontSize: valuePartFontSize,
|
|
66
|
+
fontSize: sizes.valuePartFontSize,
|
|
174
67
|
} }, text)) : (text);
|
|
175
68
|
})),
|
|
176
69
|
datum.valueIcon && (react_1.default.createElement("p", { className: "echMetricText__valueIcon", style: {
|
|
177
|
-
fontSize: valueFontSize,
|
|
70
|
+
fontSize: sizes.valueFontSize,
|
|
178
71
|
color: (_a = datum.valueColor) !== null && _a !== void 0 ? _a : highContrastTextColor,
|
|
179
|
-
marginRight: style.valuesTextAlign === 'center' ? -(valuePartFontSize + PADDING) : undefined,
|
|
72
|
+
marginRight: style.valuesTextAlign === 'center' ? -(sizes.valuePartFontSize + text_measurements_1.PADDING) : undefined,
|
|
180
73
|
} }, (0, common_1.renderWithProps)(datum.valueIcon, {
|
|
181
|
-
width: valuePartFontSize,
|
|
182
|
-
height: valuePartFontSize,
|
|
74
|
+
width: sizes.valuePartFontSize,
|
|
75
|
+
height: sizes.valuePartFontSize,
|
|
183
76
|
color: (_b = datum.valueColor) !== null && _b !== void 0 ? _b : highContrastTextColor,
|
|
184
77
|
verticalAlign: 'middle',
|
|
185
78
|
})))))));
|
|
186
79
|
};
|
|
187
80
|
exports.MetricText = MetricText;
|
|
188
|
-
function getTextParts(datum, style) {
|
|
189
|
-
const values = Array.isArray(datum.value) ? datum.value : [datum.value];
|
|
190
|
-
const valueFormatter = (0, specs_1.isMetricWNumber)(datum) || (0, specs_1.isMetricWNumberArrayValues)(datum) ? datum.valueFormatter : (v) => `${v}`;
|
|
191
|
-
const textParts = values.reduce((acc, value, i, { length }) => {
|
|
192
|
-
const parts = typeof value === 'number'
|
|
193
|
-
? (0, common_1.isFiniteNumber)(value)
|
|
194
|
-
? splitNumericSuffixPrefix(valueFormatter(value))
|
|
195
|
-
: [{ emphasis: 'normal', text: style.nonFiniteText }]
|
|
196
|
-
: [{ emphasis: 'normal', text: value }];
|
|
197
|
-
if (i < length - 1) {
|
|
198
|
-
parts.push({ emphasis: 'normal', text: ', ' });
|
|
199
|
-
}
|
|
200
|
-
return [...acc, ...parts];
|
|
201
|
-
}, []);
|
|
202
|
-
if (!Array.isArray(datum.value))
|
|
203
|
-
return textParts;
|
|
204
|
-
return [{ emphasis: 'normal', text: '[' }, ...textParts, { emphasis: 'normal', text: ']' }];
|
|
205
|
-
}
|
|
206
|
-
function splitNumericSuffixPrefix(text) {
|
|
207
|
-
return text
|
|
208
|
-
.split('')
|
|
209
|
-
.reduce((acc, curr) => {
|
|
210
|
-
var _a, _b;
|
|
211
|
-
const emphasis = curr === '.' || curr === ',' || (0, common_1.isFiniteNumber)(Number.parseInt(curr)) ? 'normal' : 'small';
|
|
212
|
-
if (acc.length > 0 && ((_a = acc.at(-1)) === null || _a === void 0 ? void 0 : _a.emphasis) === emphasis) {
|
|
213
|
-
(_b = acc.at(-1)) === null || _b === void 0 ? void 0 : _b.textParts.push(curr);
|
|
214
|
-
}
|
|
215
|
-
else {
|
|
216
|
-
acc.push({ emphasis, textParts: [curr] });
|
|
217
|
-
}
|
|
218
|
-
return acc;
|
|
219
|
-
}, [])
|
|
220
|
-
.map(({ emphasis, textParts }) => ({
|
|
221
|
-
emphasis,
|
|
222
|
-
text: textParts.join(''),
|
|
223
|
-
}));
|
|
224
|
-
}
|
|
225
|
-
function getFitValueFontSize(valueFontSize, width, gapHeight, textParts, minValueFontSize, hasIcon) {
|
|
226
|
-
const maxWidth = (width - 2 * PADDING) * 0.98;
|
|
227
|
-
const widthConstrainedSize = (0, canvas_text_bbox_calculator_1.withTextMeasure)((textMeasure) => {
|
|
228
|
-
const iconMultiplier = hasIcon ? 1 : 0;
|
|
229
|
-
const textWidth = textParts.reduce((sum, { text, emphasis }) => {
|
|
230
|
-
const fontSize = emphasis === 'small' ? valueFontSize / VALUE_PART_FONT_RATIO : valueFontSize;
|
|
231
|
-
return sum + textMeasure(text, VALUE_FONT, fontSize).width;
|
|
232
|
-
}, 0);
|
|
233
|
-
const ratio = textWidth / valueFontSize;
|
|
234
|
-
return (maxWidth - iconMultiplier * PADDING) / (ratio + iconMultiplier / VALUE_PART_FONT_RATIO);
|
|
235
|
-
});
|
|
236
|
-
const heightConstrainedSize = valueFontSize + gapHeight;
|
|
237
|
-
return Math.max(Math.min(heightConstrainedSize, widthConstrainedSize), minValueFontSize);
|
|
238
|
-
}
|
|
239
|
-
function getMetricTextPartDimensions(datum, panel, style, locale) {
|
|
240
|
-
const sizes = getFontSizes(HEIGHT_BP, panel.height, style);
|
|
241
|
-
const hasProgressBar = (0, specs_1.isMetricWProgress)(datum);
|
|
242
|
-
const hasTarget = !(0, common_1.isNil)(datum === null || datum === void 0 ? void 0 : datum.target);
|
|
243
|
-
const progressBarDirection = (0, specs_1.isMetricWProgress)(datum) ? datum.progressBarDirection : undefined;
|
|
244
|
-
return {
|
|
245
|
-
sizes,
|
|
246
|
-
hasProgressBar,
|
|
247
|
-
progressBarDirection,
|
|
248
|
-
progressBarWidth: hasProgressBar && progressBarDirection === common_1.LayoutDirection.Vertical
|
|
249
|
-
? PROGRESS_BAR_WIDTH + (hasTarget ? PROGRESS_BAR_TARGET_WIDTH : 0)
|
|
250
|
-
: 0,
|
|
251
|
-
visibility: elementVisibility(datum, panel, sizes, locale, style.valueFontSize === 'fit'),
|
|
252
|
-
textParts: getTextParts(datum, style),
|
|
253
|
-
};
|
|
254
|
-
}
|
|
255
81
|
//# sourceMappingURL=text.js.map
|