@elastic/charts 70.1.2 → 71.0.0

package/dist/chart_types/metric/renderer/dom/badge.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=badge.d.ts.map

package/dist/chart_types/metric/renderer/dom/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/badge.tsx"],"names":[],"mappings":""}

package/dist/chart_types/metric/renderer/dom/badge.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = exports.BADGE_BORDER = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const fill_text_color_1 = require("../../../../common/fill_text_color");
+exports.BADGE_BORDER = 1;
+const ICON_MARGIN = 4;
+const Badge = ({ className, value, backgroundColor, borderColor, icon, iconPosition = 'after', }) => {
+    const classes = (0, classnames_1.default)('echBadge__content', className);
+    const highContrastColor = (0, fill_text_color_1.fillTextColor)(backgroundColor, backgroundColor);
+    const iconStyles = value !== ''
+        ? {
+            [iconPosition === 'before' ? 'marginInlineEnd' : 'marginInlineStart']: icon ? ICON_MARGIN : undefined,
+        }
+        : undefined;
+    const optionalIcon = icon ? react_1.default.createElement("span", { style: iconStyles }, icon) : null;
+    return (react_1.default.createElement("span", { className: classes, style: { backgroundColor, borderColor, color: highContrastColor.color.keyword } },
+        iconPosition === 'before' && optionalIcon,
+        react_1.default.createElement("span", { className: "echBadge__text" }, value),
+        iconPosition === 'after' && optionalIcon));
+};
+exports.Badge = Badge;
+//# sourceMappingURL=badge.js.map

package/dist/chart_types/metric/renderer/dom/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/badge.tsx"],"names":[],"mappings":";;;;;;AAQA,4DAAoC;AACpC,kDAA0B;AAG1B,wEAAmE;AAGtD,QAAA,YAAY,GAAG,CAAC,CAAC;AAE9B,MAAM,WAAW,GAAG,CAAC,CAAC;AAkBf,MAAM,KAAK,GAAyB,CAAC,EAC1C,SAAS,EACT,KAAK,EACL,eAAe,EACf,WAAW,EACX,IAAI,EACJ,YAAY,GAAG,OAAO,GACvB,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAC3D,MAAM,iBAAiB,GAAG,IAAA,+BAAa,EAAC,eAAe,EAAE,eAAe,CAAC,CAAC;IAE1E,MAAM,UAAU,GACd,KAAK,KAAK,EAAE;QACV,CAAC,CAAC;YACE,CAAC,YAAY,KAAK,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS;SACtG;QACH,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC,wCAAM,KAAK,EAAE,UAAU,IAAG,IAAI,CAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1E,OAAO,CACL,wCAAM,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,eAAe,EAAE,WAAW,EAAE,KAAK,EAAE,iBAAiB,CAAC,KAAK,CAAC,OAAO,EAAE;QACtG,YAAY,KAAK,QAAQ,IAAI,YAAY;QAC1C,wCAAM,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAQ;QAC9C,YAAY,KAAK,OAAO,IAAI,YAAY,CACpC,CACR,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,KAAK,SA0BhB"}

package/dist/chart_types/metric/renderer/dom/index.js

@@ -46,6 +46,16 @@ const light_theme_1 = require("../../../../utils/themes/light_theme");
 const chart_size_1 = require("../../state/selectors/chart_size");
 const data_1 = require("../../state/selectors/data");
 const has_chart_titles_1 = require("../../state/selectors/has_chart_titles");
+function getTextContrastOptions(style) {
+    return {
+        text: { lightColor: (0, color_library_wrappers_1.colorToRgba)(style.textLightColor), darkColor: (0, color_library_wrappers_1.colorToRgba)(style.textDarkColor) },
+        subtitle: {
+            lightColor: (0, color_library_wrappers_1.colorToRgba)(style.textSubtitleLightColor),
+            darkColor: (0, color_library_wrappers_1.colorToRgba)(style.textSubtitleDarkColor),
+        },
+        extra: { lightColor: (0, color_library_wrappers_1.colorToRgba)(style.textExtraLightColor), darkColor: (0, color_library_wrappers_1.colorToRgba)(style.textExtraDarkColor) },
+    };
+}
 function Component({ chartId, hasTitles, initialized, size: { width, height }, a11y, specs: [spec], style, backgroundColor, onElementClick, onElementOut, onElementOver, locale, onChartRendered, }) {
     (0, react_1.useEffect)(() => {
         onChartRendered();
@@ -57,13 +67,10 @@ function Component({ chartId, hasTitles, initialized, size: { width, height }, a
     const totalRows = data.length;
     const maxColumns = data.reduce((acc, row) => Math.max(acc, row.length), 0);
     const panel = { width: width / maxColumns, height: height / totalRows };
-    const contrastOptions = {
-        lightColor: (0, color_library_wrappers_1.colorToRgba)(style.textLightColor),
-        darkColor: (0, color_library_wrappers_1.colorToRgba)(style.textDarkColor),
-    };
+    const textContrastOptions = getTextContrastOptions(style);
     const emptyBackgroundRGBA = (0, color_calcs_1.combineColors)((0, color_library_wrappers_1.colorToRgba)(style.emptyBackground), (0, color_library_wrappers_1.colorToRgba)(backgroundColor));
     const emptyBackground = (0, color_library_wrappers_1.RGBATupleToString)(emptyBackgroundRGBA);
-    const emptyForegroundColor = (0, color_calcs_1.highContrastColor)(emptyBackgroundRGBA, undefined, contrastOptions).color;
+    const emptyForegroundColor = (0, color_calcs_1.highContrastColor)(emptyBackgroundRGBA, undefined, textContrastOptions.text).color;
     const metricsConfigs = data.reduce((acc, columns, rowIndex) => {
         acc.configs = acc.configs.concat(columns.map((datum, columnIndex) => {
             const key = `${columnIndex}-${rowIndex}`;
@@ -79,8 +86,9 @@ function Component({ chartId, hasTitles, initialized, size: { width, height }, a
                 };
             }
             const textDimensions = (0, text_measurements_1.getMetricTextPartDimensions)(datum, panel, style, locale);
-            const fontSize = (0, text_measurements_1.getFitValueFontSize)(textDimensions.heightBasedSizes.valueFontSize, panel.width - textDimensions.progressBarWidth, textDimensions.visibility.gapHeight, textDimensions.textParts, style.minValueFontSize, datum.valueIcon !== undefined);
-            acc.fittedValueFontSize = Math.min(acc.fittedValueFontSize, fontSize);
+            const totalWidth = panel.width - textDimensions.progressBarWidth - textDimensions.iconGridColumnWidth;
+            const valueFontSize = (0, text_measurements_1.getFitValueFontSize)(textDimensions.heightBasedSizes.valueFontSize, totalWidth, textDimensions.visibility.gapHeight, textDimensions.textParts, style.minValueFontSize, datum.valueIcon !== undefined);
+            acc.fittedValueFontSize = Math.min(acc.fittedValueFontSize, valueFontSize);
             return {
                 type: 'metric',
                 key,
@@ -119,7 +127,7 @@ function Component({ chartId, hasTitles, initialized, size: { width, height }, a
         } }, metricsConfigs.configs.map((config) => {
         return config.type !== 'metric' ? (react_1.default.createElement("li", { key: config.key, role: "presentation" },
             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 },
-            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 })));
+            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: textContrastOptions, onElementClick: onElementClick, onElementOut: onElementOut, onElementOver: onElementOver, textDimensions: config.textDimensions })));
     })));
 }
 Component.displayName = 'Metric';

package/dist/chart_types/metric/renderer/dom/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/index.tsx"],"names":[],"mappings":"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"}

package/dist/chart_types/metric/renderer/dom/metric.js

@@ -38,13 +38,51 @@ const constants_1 = require("../../../../common/constants");
 const fill_text_color_1 = require("../../../../common/fill_text_color");
 const common_1 = require("../../../../utils/common");
 const specs_1 = require("../../specs");
+const progressBarMap = {
+    4: 'small',
+    8: 'medium',
+    16: 'large',
+};
+const getTextColor = ({ metricContext: { backgroundColor, blendedColor, hasProgressBar, hasTrend }, contrastOptions, }) => {
+    const highContrastTextColor = (0, fill_text_color_1.fillTextColor)(backgroundColor, hasProgressBar ? backgroundColor : blendedColor, undefined, contrastOptions);
+    let finalTextColor = highContrastTextColor.color;
+    if (hasTrend) {
+        const { ratio, color, shade } = (0, fill_text_color_1.fillTextColor)(backgroundColor, (0, sparkline_1.getSparkLineColor)(blendedColor), undefined, contrastOptions);
+        if (shade !== highContrastTextColor.shade && ratio > highContrastTextColor.ratio) {
+            finalTextColor = color;
+        }
+    }
+    return finalTextColor.keyword;
+};
+const getTextColors = ({ metricContext, textContrastOptions, }) => {
+    return {
+        highContrast: getTextColor({
+            metricContext,
+            contrastOptions: textContrastOptions.text,
+        }),
+        subtitle: getTextColor({
+            metricContext,
+            contrastOptions: textContrastOptions.subtitle,
+        }),
+        extra: getTextColor({
+            metricContext,
+            contrastOptions: textContrastOptions.extra,
+        }),
+    };
+};
+const CONTRAST_THRESHOLD = 3.0;
+function isColorContrastOptions(options) {
+    return !('text' in options);
+}
 const Metric = ({ chartId, hasTitles, rowIndex, columnIndex, totalColumns, totalRows, datum, style, backgroundColor: chartBackgroundColor, contrastOptions, textDimensions, onElementClick, onElementOver, onElementOut, }) => {
-    const progressBarSize = 'small';
+    const { progressBarThickness } = textDimensions.heightBasedSizes;
+    const progressBarSize = progressBarMap[progressBarThickness] ?? 'medium';
     const [mouseState, setMouseState] = (0, react_1.useState)('leave');
     const [lastMouseDownTimestamp, setLastMouseDownTimestamp] = (0, react_1.useState)(0);
     const metricHTMLId = `echMetric-${chartId}-${rowIndex}-${columnIndex}`;
     const hasProgressBar = (0, specs_1.isMetricWProgress)(datum);
     const progressBarDirection = hasProgressBar ? datum.progressBarDirection : undefined;
+    const hasTrend = (0, specs_1.isMetricWTrend)(datum);
     const containerClassName = (0, classnames_1.default)('echMetric', {
         'echMetric--rightBorder': columnIndex < totalColumns - 1,
         'echMetric--bottomBorder': rowIndex < totalRows - 1,
@@ -67,16 +105,37 @@ const Metric = ({ chartId, hasTitles, rowIndex, columnIndex, totalColumns, total
     const datumWithInteractionColor = { ...datum, color: blendedInteractionColor };
     const event = { type: 'metricElementEvent', rowIndex, columnIndex };
     const containerStyle = {
-        backgroundColor: (0, specs_1.isMetricWTrend)(datumWithInteractionColor) ? backgroundColor : datumWithInteractionColor.color,
+        backgroundColor: hasTrend ? backgroundColor : datumWithInteractionColor.color,
         cursor: onElementClick ? 'pointer' : constants_1.DEFAULT_CSS_CURSOR,
         borderColor: style.border,
     };
-    const highContrastTextColor = (0, fill_text_color_1.fillTextColor)(backgroundColor, (0, specs_1.isMetricWProgress)(datum) ? backgroundColor : blendedColor, undefined, contrastOptions);
-    let finalTextColor = highContrastTextColor.color;
-    if ((0, specs_1.isMetricWTrend)(datum)) {
-        const { ratio, color, shade } = (0, fill_text_color_1.fillTextColor)(backgroundColor, (0, sparkline_1.getSparkLineColor)(blendedColor), undefined, contrastOptions);
-        if (shade !== highContrastTextColor.shade && ratio > highContrastTextColor.ratio) {
-            finalTextColor = color;
+    const textContrastOptions = isColorContrastOptions(contrastOptions)
+        ? {
+            text: contrastOptions,
+            subtitle: contrastOptions,
+            extra: contrastOptions,
+        }
+        : contrastOptions;
+    const textColors = getTextColors({
+        metricContext: { backgroundColor, blendedColor, hasProgressBar, hasTrend },
+        textContrastOptions,
+    });
+    let badgeBorderColor;
+    if ((0, specs_1.isSecondaryMetricProps)(datum.extra) && !!datum.extra.badgeColor && !datum.extra.badgeBorderColor) {
+        const metricBackgroundColor = hasProgressBar ? backgroundColor : blendedColor;
+        const borderRecommendation = (0, color_calcs_1.getContrastRecommendation)(metricBackgroundColor, datum.extra.badgeColor, {
+            contrastThreshold: CONTRAST_THRESHOLD,
+            borderOptions: textContrastOptions.extra,
+        });
+        badgeBorderColor = borderRecommendation.borderColor;
+        if (hasTrend) {
+            const { shade, borderColor, contrastRatio } = (0, color_calcs_1.getContrastRecommendation)((0, sparkline_1.getSparkLineColor)(blendedColor), datum.extra.badgeColor, {
+                contrastThreshold: CONTRAST_THRESHOLD,
+                borderOptions: textContrastOptions.extra,
+            });
+            if (shade !== borderRecommendation.shade && contrastRatio > borderRecommendation.contrastRatio) {
+                badgeBorderColor = borderColor;
+            }
         }
     }
     const onElementClickHandler = () => onElementClick && onElementClick([event]);
@@ -110,10 +169,10 @@ const Metric = ({ chartId, hasTitles, rowIndex, columnIndex, totalColumns, total
         }, onClick: (e) => {
             e.stopPropagation();
         } },
-        react_1.default.createElement(text_1.MetricText, { id: metricHTMLId, datum: datumWithInteractionColor, style: style, onElementClick: onElementClick ? onElementClickHandler : undefined, progressBarSize: progressBarSize, highContrastTextColor: finalTextColor.keyword, textDimensions: textDimensions }),
+        react_1.default.createElement(text_1.MetricText, { id: metricHTMLId, datum: datumWithInteractionColor, style: style, onElementClick: onElementClick ? onElementClickHandler : undefined, progressBarSize: progressBarSize, textDimensions: textDimensions, colors: textColors, badgeBorderColor: badgeBorderColor }),
         (0, specs_1.isMetricWTrend)(datumWithInteractionColor) && react_1.default.createElement(sparkline_1.SparkLine, { id: metricHTMLId, datum: datumWithInteractionColor }),
         (0, specs_1.isMetricWProgress)(datumWithInteractionColor) && (react_1.default.createElement(progress_1.ProgressBar, { datum: datumWithInteractionColor, barBackground: style.barBackground, blendedBarColor: blendedColor, size: progressBarSize })),
-        react_1.default.createElement("div", { className: "echMetric--outline", style: { color: finalTextColor.keyword } })));
+        react_1.default.createElement("div", { className: "echMetric--outline", style: { color: textColors.highContrast } })));
 };
 exports.Metric = Metric;
 //# sourceMappingURL=metric.js.map

package/dist/chart_types/metric/renderer/dom/metric.js.map

@@ -1 +1 @@
-{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/metric.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/metric.tsx"],"names":[],"mappings":"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"}

package/dist/chart_types/metric/renderer/dom/progress.js

@@ -7,11 +7,16 @@ exports.ProgressBar = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const d3_scale_1 = require("d3-scale");
 const react_1 = __importDefault(require("react"));
+const text_measurements_1 = require("./text_measurements");
 const icon_1 = require("../../../../components/icons/icon");
 const common_1 = require("../../../../utils/common");
 const specs_1 = require("../../specs");
-const TARGET_SIZE = 8;
-const BASELINE_SIZE = 2;
+const PROGRESS_BAR_BORDER_RADIUS = 8;
+const zeroBaselineSizeMap = {
+    small: 2,
+    medium: 2,
+    large: 4,
+};
 const ProgressBar = ({ datum, barBackground, blendedBarColor, size, }) => {
     const { title, value, target, valueFormatter, targetFormatter, progressBarDirection } = datum;
     const isBullet = (0, specs_1.isBulletMetric)(datum);
@@ -25,33 +30,66 @@ const ProgressBar = ({ datum, barBackground, blendedBarColor, size, }) => {
     const [domainMin, domainMax] = (0, common_1.sortNumbers)(updatedDomain);
     const scaledValue = scale(value);
     const [min, max] = (0, common_1.sortNumbers)([scale(0), scaledValue]);
+    const endValue = 100 - max;
+    const safeStartValue = Math.max(0, min);
+    const safeEndValue = Math.max(0, endValue);
     const positionStyle = isVertical
         ? {
-            bottom: `${min}%`,
-            top: `${100 - max}%`,
+            bottom: `${safeStartValue}%`,
+            top: `${safeEndValue}%`,
         }
         : {
-            left: `${min}%`,
-            right: `${100 - max}%`,
+            left: `${safeStartValue}%`,
+            right: `${safeEndValue}%`,
+        };
+    let borderRadius = {};
+    if (!isVertical && endValue <= 0) {
+        borderRadius = {
+            ...borderRadius,
+            borderTopRightRadius: PROGRESS_BAR_BORDER_RADIUS,
+            borderBottomRightRadius: PROGRESS_BAR_BORDER_RADIUS,
         };
-    const targetPlacement = (0, common_1.isNil)(target) ? null : `calc(${scale(target)}% - ${TARGET_SIZE / 2}px)`;
-    const zeroPlacement = domainMin >= 0 || domainMax <= 0 ? null : `calc(${scale(0)}% - ${BASELINE_SIZE / 2}px)`;
+    }
+    if (!isVertical && min <= 0) {
+        borderRadius = {
+            ...borderRadius,
+            borderTopLeftRadius: PROGRESS_BAR_BORDER_RADIUS,
+            borderBottomLeftRadius: PROGRESS_BAR_BORDER_RADIUS,
+        };
+    }
+    if (isVertical && endValue <= 0) {
+        borderRadius = {
+            ...borderRadius,
+            borderTopLeftRadius: PROGRESS_BAR_BORDER_RADIUS,
+            borderTopRightRadius: PROGRESS_BAR_BORDER_RADIUS,
+        };
+    }
+    if (isVertical && min <= 0) {
+        borderRadius = {
+            ...borderRadius,
+            borderBottomLeftRadius: PROGRESS_BAR_BORDER_RADIUS,
+            borderBottomRightRadius: PROGRESS_BAR_BORDER_RADIUS,
+        };
+    }
+    const zeroBaselineSize = zeroBaselineSizeMap[size];
+    const targetPlacement = (0, common_1.isNil)(target) ? null : `calc(${scale(target)}% - ${text_measurements_1.PROGRESS_BAR_TARGET_SIZE / 2}px)`;
+    const zeroPlacement = domainMin >= 0 || domainMax <= 0 ? null : `calc(${scale(0)}% - ${zeroBaselineSize / 2}px)`;
     const labelType = isBullet ? 'Value' : 'Percentage';
-    return (react_1.default.createElement("div", { className: getDirectionalClasses('Progress', isVertical, size), style: { backgroundColor: size === 'small' ? barBackground : undefined }, title: !isBullet ? '' : `${updatedDomain[0]} to ${updatedDomain[1]}` },
+    return (react_1.default.createElement("div", { className: getDirectionalClasses('Progress', isVertical, size), style: { backgroundColor: barBackground }, title: !isBullet ? '' : `${updatedDomain[0]} to ${updatedDomain[1]}` },
         targetPlacement && (react_1.default.createElement("div", { className: getDirectionalClasses('Target', isVertical, size), style: {
                 [isVertical ? 'bottom' : 'left']: targetPlacement,
             }, "aria-valuenow": target, title: `${isBullet ? `${datum.valueLabels.target}: ` : ''}${(targetFormatter ?? valueFormatter)(target || 0)}` },
-            react_1.default.createElement(icon_1.Icon, { height: TARGET_SIZE, width: TARGET_SIZE, type: "downArrow", color: blendedBarColor }))),
+            react_1.default.createElement(icon_1.Icon, { height: text_measurements_1.PROGRESS_BAR_TARGET_SIZE, width: text_measurements_1.PROGRESS_BAR_TARGET_SIZE, type: "downArrow", color: blendedBarColor }))),
         zeroPlacement && (react_1.default.createElement("div", { className: getDirectionalClasses('ZeroBaseline', isVertical, size), style: {
                 backgroundColor: blendedBarColor,
                 [isVertical ? 'bottom' : 'left']: zeroPlacement,
             } })),
-        react_1.default.createElement("div", { className: getDirectionalClasses('ProgressBar', isVertical, size), style: { ...positionStyle, backgroundColor: blendedBarColor }, role: "meter", title: isBullet ? `${datum.valueLabels.value}: ${valueFormatter(value)}` : `${scaledValue}%`, "aria-label": title ? `${labelType} of ${title}` : labelType, "aria-valuemin": isBullet ? domainMin : 0, "aria-valuemax": isBullet ? domainMax : 100, "aria-valuenow": isBullet ? value : scaledValue })));
+        react_1.default.createElement("div", { className: getDirectionalClasses('ProgressBar', isVertical, size), style: { ...positionStyle, ...borderRadius, backgroundColor: blendedBarColor }, role: "meter", title: isBullet ? `${datum.valueLabels.value}: ${valueFormatter(value)}` : `${scaledValue}%`, "aria-label": title ? `${labelType} of ${title}` : labelType, "aria-valuemin": isBullet ? domainMin : 0, "aria-valuemax": isBullet ? domainMax : 100, "aria-valuenow": isBullet ? value : scaledValue })));
 };
 exports.ProgressBar = ProgressBar;
-function getDirectionalClasses(element, isVertical, size) {
+function getDirectionalClasses(element, isVertical, progressBarSize) {
     const base = `echSingleMetric${element}`;
-    return (0, classnames_1.default)(base, `${base}--${size}`, {
+    return (0, classnames_1.default)(base, `${base}--${progressBarSize}`, {
         [`${base}--vertical`]: isVertical,
         [`${base}--horizontal`]: !isVertical,
     });

package/dist/chart_types/metric/renderer/dom/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/progress.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"progress.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/progress.tsx"],"names":[],"mappings":"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"}

package/dist/chart_types/metric/renderer/dom/secondary_metric.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=secondary_metric.d.ts.map

package/dist/chart_types/metric/renderer/dom/secondary_metric.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"secondary_metric.d.ts","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/secondary_metric.tsx"],"names":[],"mappings":""}

package/dist/chart_types/metric/renderer/dom/secondary_metric.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SecondaryMetric = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const badge_1 = require("./badge");
+const SecondaryMetric = ({ value, label, badgeColor, labelPosition = 'before', style, ariaDescription, badgeBorderColor, icon, iconPosition, }) => {
+    const hasLabel = !!label;
+    const labelNode = hasLabel ? (react_1.default.createElement("span", { className: "echSecondaryMetric__label echSecondaryMetric__truncate" }, label)) : undefined;
+    return (react_1.default.createElement("span", { className: "echSecondaryMetric", ...(style ? { style } : {}), ...(ariaDescription ? { 'aria-describedby': ariaDescription } : {}) },
+        labelPosition === 'before' && labelNode,
+        badgeColor ? (react_1.default.createElement(badge_1.Badge, { className: (0, classnames_1.default)('echSecondaryMetric__value', {
+                'echSecondaryMetric__value--full': !hasLabel,
+            }), value: value, backgroundColor: badgeColor, borderColor: badgeBorderColor, icon: icon, iconPosition: iconPosition })) : (react_1.default.createElement("span", { className: (0, classnames_1.default)('echSecondaryMetric__value', 'echSecondaryMetric__truncate', {
+                'echSecondaryMetric__value--full': !hasLabel,
+            }) }, value)),
+        labelPosition === 'after' && labelNode));
+};
+exports.SecondaryMetric = SecondaryMetric;
+//# sourceMappingURL=secondary_metric.js.map

package/dist/chart_types/metric/renderer/dom/secondary_metric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"secondary_metric.js","sourceRoot":"","sources":["../../../../../src/chart_types/metric/renderer/dom/secondary_metric.tsx"],"names":[],"mappings":";;;;;;AAQA,4DAAoC;AACpC,kDAA0B;AAE1B,mCAAgC;AAIzB,MAAM,eAAe,GAAmC,CAAC,EAC9D,KAAK,EACL,KAAK,EACL,UAAU,EACV,aAAa,GAAG,QAAQ,EACxB,KAAK,EACL,eAAe,EACf,gBAAgB,EAChB,IAAI,EACJ,YAAY,GACb,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC;IACzB,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC3B,wCAAM,SAAS,EAAC,wDAAwD,IAAE,KAAK,CAAQ,CACxF,CAAC,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,wCACE,SAAS,EAAC,oBAAoB,KAC1B,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACxB,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,kBAAkB,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAEnE,aAAa,KAAK,QAAQ,IAAI,SAAS;QACvC,UAAU,CAAC,CAAC,CAAC,CACZ,8BAAC,aAAK,IACJ,SAAS,EAAE,IAAA,oBAAU,EAAC,2BAA2B,EAAE;gBACjD,iCAAiC,EAAE,CAAC,QAAQ;aAC7C,CAAC,EACF,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,UAAU,EAC3B,WAAW,EAAE,gBAAgB,EAC7B,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,GAC1B,CACH,CAAC,CAAC,CAAC,CACF,wCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,2BAA2B,EAAE,8BAA8B,EAAE;gBACjF,iCAAiC,EAAE,CAAC,QAAQ;aAC7C,CAAC,IAED,KAAK,CACD,CACR;QACA,aAAa,KAAK,OAAO,IAAI,SAAS,CAClC,CACR,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,eAAe,mBA8C1B"}

package/dist/chart_types/metric/renderer/dom/text.js

@@ -6,21 +6,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MetricText = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
+const secondary_metric_1 = require("./secondary_metric");
 const text_measurements_1 = require("./text_measurements");
+const titles_1 = require("./titles");
 const common_1 = require("../../../../utils/common");
 const specs_1 = require("../../specs");
-function lineClamp(maxLines) {
-    return {
-        textOverflow: 'ellipsis',
-        display: '-webkit-box',
-        WebkitLineClamp: maxLines,
-        lineClamp: maxLines,
-        WebkitBoxOrient: 'vertical',
-        overflow: 'hidden',
-        whiteSpace: 'pre-wrap',
-    };
-}
-const MetricText = ({ id, datum, style, onElementClick, highContrastTextColor, progressBarSize, textDimensions }) => {
+const GRID_SPAN_THREE = '1 / span 3';
+const gridRows = {
+    top: { value: '1', titles: '2', body: '3', extra: '4' },
+    bottom: { value: '4', titles: '1', body: '2', extra: '3' },
+};
+const gridSingleColumn = { value: '1', titles: '1', body: '1', extra: '1' };
+const gridColumnsValuePostitionTop = {
+    left: { value: '2 / span 2', titles: GRID_SPAN_THREE, body: GRID_SPAN_THREE, extra: GRID_SPAN_THREE },
+    right: { value: '1 / span 2', titles: GRID_SPAN_THREE, body: GRID_SPAN_THREE, extra: GRID_SPAN_THREE },
+};
+const gridColumnsValuePositionBottom = {
+    left: { value: GRID_SPAN_THREE, titles: '2 / span 2', body: GRID_SPAN_THREE, extra: GRID_SPAN_THREE },
+    right: { value: GRID_SPAN_THREE, titles: '1 / span 2', body: GRID_SPAN_THREE, extra: GRID_SPAN_THREE },
+};
+const gridColumns = {
+    top: gridColumnsValuePostitionTop,
+    bottom: gridColumnsValuePositionBottom,
+};
+const getGridTemplateColumnsWithIcon = (iconSize) => {
+    const iconSizeWithPadding = `${iconSize + text_measurements_1.PADDING}px`;
+    return `${iconSizeWithPadding} minmax(0, 1fr) ${iconSizeWithPadding}`;
+};
+const MetricText = ({ id, datum, style, onElementClick, progressBarSize, textDimensions, colors, badgeBorderColor, }) => {
     const { heightBasedSizes: sizes, hasProgressBar, progressBarDirection, visibility, textParts } = textDimensions;
     const { extra, body } = datum;
     const containerClassName = (0, classnames_1.default)('echMetricText', {
@@ -28,53 +41,57 @@ const MetricText = ({ id, datum, style, onElementClick, highContrastTextColor, p
         'echMetricText--vertical': progressBarDirection === common_1.LayoutDirection.Vertical,
         'echMetricText--horizontal': progressBarDirection === common_1.LayoutDirection.Horizontal,
     });
-    const TitleElement = () => (react_1.default.createElement("span", { style: {
-            fontSize: sizes.titleFontSize,
-            textAlign: style.titlesTextAlign,
-            ...lineClamp(visibility.titleLines.length),
-        }, title: datum.title }, datum.title));
-    return (react_1.default.createElement("div", { className: containerClassName, style: { color: highContrastTextColor } },
-        react_1.default.createElement("div", { className: (0, classnames_1.default)('echMetricText__titlesBlock', `echMetricText__titlesBlock--${style.titlesTextAlign}`), style: datum.icon && {
-                marginLeft: 'center' === style.titlesTextAlign || style.iconAlign === 'left' ? sizes.iconSize + text_measurements_1.PADDING : 0,
-                marginRight: 'center' === style.titlesTextAlign || style.iconAlign === 'right' ? sizes.iconSize + text_measurements_1.PADDING : 0,
-            } },
-            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) => {
-                    e.stopPropagation();
-                    onElementClick();
-                } },
-                react_1.default.createElement(TitleElement, null))) : (react_1.default.createElement(TitleElement, null)))),
-            visibility.subtitle && (react_1.default.createElement("p", { className: "echMetricText__subtitle", style: {
-                    fontSize: sizes.subtitleFontSize,
-                    ...lineClamp(visibility.subtitleLines.length),
-                }, title: datum.subtitle }, datum.subtitle))),
-        datum.icon && (react_1.default.createElement("div", { className: (0, classnames_1.default)('echMetricText__icon', `echMetricText__icon--${style.iconAlign}`) }, (0, common_1.renderWithProps)(datum.icon, {
+    const { valuePosition, iconAlign } = style;
+    const isIconVisible = !!datum.icon;
+    const gridTemplateColumns = isIconVisible ? getGridTemplateColumnsWithIcon(sizes.iconSize) : undefined;
+    const iconGridStyles = isIconVisible ? { gridRow: '1', gridColumn: iconAlign === 'left' ? '1' : '3' } : {};
+    const currentGridRows = gridRows[valuePosition];
+    let currentGridColumns = isIconVisible ? gridColumns[valuePosition][iconAlign] : gridSingleColumn;
+    if (isIconVisible && valuePosition === 'top' && style.valueTextAlign === 'center') {
+        currentGridColumns = { ...currentGridColumns, value: '2' };
+    }
+    if (isIconVisible && valuePosition === 'bottom' && style.titlesTextAlign === 'center') {
+        currentGridColumns = { ...currentGridColumns, titles: '2' };
+    }
+    let extraElement = null;
+    if ((0, specs_1.isSecondaryMetricProps)(extra)) {
+        const { style: extraStyle = {}, ...secondaryMetricProps } = extra;
+        extraElement = (react_1.default.createElement(secondary_metric_1.SecondaryMetric, { style: { ...extraStyle, fontSize: sizes.extraFontSize, color: colors.extra }, badgeBorderColor: badgeBorderColor, ...secondaryMetricProps }));
+    }
+    else if (react_1.default.isValidElement(extra) || typeof extra === 'function') {
+        extraElement = (react_1.default.createElement("p", { className: "echMetricText__extra", style: { fontSize: sizes.extraFontSize } }, (0, common_1.renderWithProps)(extra, { fontSize: sizes.extraFontSize, color: colors.extra })));
+    }
+    return (react_1.default.createElement("div", { className: containerClassName, style: { color: colors.highContrast, gridTemplateColumns } },
+        react_1.default.createElement(titles_1.TitlesBlock, { metricId: id, title: datum.title, subtitle: datum.subtitle, sizes: sizes, visibility: visibility, textAlign: style.titlesTextAlign, titleWeight: style.titleWeight, isIconVisible: isIconVisible, titlesRow: currentGridRows.titles, titlesColumn: currentGridColumns.titles, subtitleColor: colors.subtitle, onElementClick: onElementClick }),
+        datum.icon && (react_1.default.createElement("div", { className: (0, classnames_1.default)('echMetricText__icon', `echMetricText__icon--${style.iconAlign}`), style: { ...iconGridStyles } }, (0, common_1.renderWithProps)(datum.icon, {
             width: sizes.iconSize,
             height: sizes.iconSize,
-            color: highContrastTextColor,
+            color: colors.highContrast,
         }))),
-        react_1.default.createElement("div", { className: "echMetricText__gap" }, body && react_1.default.createElement("div", { className: "echMetricText__body" }, body)),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)('echMetricText__valuesBlock', `echMetricText__valuesBlock--${style.valuesTextAlign}`) },
-            react_1.default.createElement("div", null, visibility.extra && (react_1.default.createElement("p", { className: "echMetricText__extra", style: { fontSize: sizes.extraFontSize } }, (0, common_1.renderWithProps)(extra, { fontSize: sizes.extraFontSize, color: highContrastTextColor })))),
-            react_1.default.createElement("div", { className: "echMetricText__valueGroup" },
-                react_1.default.createElement("p", { className: "echMetricText__value", style: {
-                        fontSize: sizes.valueFontSize,
-                        textOverflow: (0, specs_1.isMetricWNumber)(datum) ? undefined : 'ellipsis',
-                        color: datum.valueColor,
-                    }, title: textParts.map(({ text }) => text).join('') }, textParts.map(({ emphasis, text }, i) => {
-                    return emphasis === 'small' ? (react_1.default.createElement("span", { key: `${text}${i}`, className: "echMetricText__part", style: {
-                            fontSize: sizes.valuePartFontSize,
-                        } }, text)) : (text);
-                })),
-                datum.valueIcon && (react_1.default.createElement("p", { className: "echMetricText__valueIcon", style: {
-                        fontSize: sizes.valueFontSize,
-                        color: datum.valueColor ?? highContrastTextColor,
-                        marginRight: style.valuesTextAlign === 'center' ? -(sizes.valuePartFontSize + text_measurements_1.PADDING) : undefined,
-                    } }, (0, common_1.renderWithProps)(datum.valueIcon, {
-                    width: sizes.valuePartFontSize,
-                    height: sizes.valuePartFontSize,
-                    color: datum.valueColor ?? highContrastTextColor,
-                    verticalAlign: 'middle',
-                })))))));
+        react_1.default.createElement("div", { className: "echMetricText__gap", style: { gridRow: currentGridRows.body, gridColumn: currentGridColumns.body } }, body && react_1.default.createElement("div", { className: "echMetricText__body" }, body)),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('echMetricText__extraBlock', `echMetricText__extraBlock--${style.extraTextAlign}`), style: {
+                gridRow: currentGridRows.extra,
+                gridColumn: currentGridColumns.extra,
+                color: colors.extra,
+            } }, visibility.extra && extraElement),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)('echMetricText__valueBlock', `echMetricText__valueBlock--${style.valueTextAlign}`), style: { gridRow: currentGridRows.value, gridColumn: currentGridColumns.value } },
+            react_1.default.createElement("p", { className: "echMetricText__value", style: {
+                    fontSize: sizes.valueFontSize,
+                    textOverflow: (0, specs_1.isMetricWNumber)(datum) ? undefined : 'ellipsis',
+                    color: datum.valueColor,
+                }, title: textParts.map(({ text }) => text).join('') }, textParts.map(({ emphasis, text }, i) => {
+                return emphasis === 'small' ? (react_1.default.createElement("span", { key: `${text}${i}`, className: "echMetricText__part", style: { fontSize: sizes.valuePartFontSize } }, text)) : (text);
+            })),
+            datum.valueIcon && (react_1.default.createElement("p", { className: "echMetricText__valueIcon", style: {
+                    fontSize: sizes.valueFontSize,
+                    color: datum.valueColor ?? colors.highContrast,
+                    marginRight: style.valueTextAlign === 'center' ? -(sizes.valuePartFontSize + text_measurements_1.PADDING) : undefined,
+                } }, (0, common_1.renderWithProps)(datum.valueIcon, {
+                width: sizes.valuePartFontSize,
+                height: sizes.valuePartFontSize,
+                color: datum.valueColor ?? colors.highContrast,
+                verticalAlign: 'middle',
+            }))))));
 };
 exports.MetricText = MetricText;
 //# sourceMappingURL=text.js.map