cats-charts 0.0.87 → 0.0.88

package/fesm2022/cats-charts.mjs

@@ -5195,7 +5195,9 @@ class GaugeChart {
         const midValueCount = Math.max(Math.floor(this.config.midValueCount ?? 0), 0);
         const splitNumber = showMidValue && midValueCount > 0 ? midValueCount + 1 : 1;
         const metricNameWidth = this.resolveMetricNameWidth();
-        const metricName = this.truncateMetricName(this.applyTextCase(this.config.name ?? 'Value', style?.metricNameTypography?.case), metricNameWidth, style?.metricNameTypography?.fontSize ?? 10);
+        const metricNameFontSize = this.clamp(style?.metricNameTypography?.fontSize ?? 10, 8, 40);
+        const metricValueFontSize = this.clamp(style?.metricValueTypography?.fontSize ?? 14, 8, 40);
+        const metricName = this.truncateMetricName(this.applyTextCase(this.config.name ?? 'Value', style?.metricNameTypography?.case), metricNameWidth, metricNameFontSize);
         const metricValue = this.applyTextCase(this.formatNumber(rawValue, compactNumber, precision), style?.metricValueTypography?.case);
         const generatedGaugeSeries = {
             type: 'gauge',
@@ -5302,14 +5304,16 @@ class GaugeChart {
                         overflow: 'truncate',
                         ellipsis: '...',
                         align: 'center',
-                        lineHeight: 16,
+                        // Keep each rich-text line tall enough for its current font size.
+                        // Fixed line heights make the name and value overlap at large sizes.
+                        lineHeight: this.resolveTypographyLineHeight(metricNameFontSize),
                     },
                     value: {
                         ...this.resolveTypography(style?.metricValueTypography, {
                             color: '#252a31',
                             fontSize: 14,
                         }),
-                        lineHeight: 18,
+                        lineHeight: this.resolveTypographyLineHeight(metricValueFontSize),
                     },
                 },
             },
@@ -5747,6 +5751,9 @@ class GaugeChart {
             ? `${name.slice(0, Math.max(maximumCharacters - 3, 1))}...`
             : name;
     }
+    resolveTypographyLineHeight(fontSize) {
+        return Math.ceil(fontSize * 1.3);
+    }
     resolveMetricValues() {
         return (this.config.data ?? [])
             .map((value) => this.toFiniteNumber(value))