fix(dashboards): Improve rendering of small and fractional numbers in charts (#104456)

**Before:**
<img width="727" height="389" alt="Screenshot 2025-12-05 at 11 33 32 AM"
src="https://github.com/user-attachments/assets/7b86c633-e7da-47c7-845b-7dab685bc1e5"
/>

**After:**
<img width="774" height="383" alt="Screenshot 2025-12-05 at 11 33 42 AM"
src="https://github.com/user-attachments/assets/6a8d51e8-62ea-40e3-a40c-0f9f98ce5f93"
/>

The "number" type is susceptible to Y axis and tooltip rendering
problems if the values are very small. This PR forces our charts to show
"number" values at _full precision_ in the Y axis and the tooltip. The
code for the formatters explains in detail the tradeoffs and aspects of
the problem.

This in particular affects the metrics UI where the type and unit of the
values might not be known.

Author: gggritso

static/app/views/dashboards/widgets/timeSeriesWidget/formatters/formatTooltipValue.spec.tsx

@@ -16,8 +16,12 @@ describe('formatTooltipValue', () => {
 
   describe('number', () => {
     it.each([
-      [17.1238, '17.124'],
+      [0.000033452, '0.000033452'],
+      [0.00003, '0.00003'],
+      [17.1238, '17.1238'],
+      [170, '170'],
       [1772313.1, '1,772,313.1'],
+      [1772313.11123, '1,772,313.11123'],
     ])('Formats %s as %s', (value, formattedValue) => {
       expect(formatTooltipValue(value, 'number')).toEqual(formattedValue);
     });

static/app/views/dashboards/widgets/timeSeriesWidget/formatters/formatTooltipValue.tsx

@@ -13,6 +13,20 @@ import {
   isASizeUnit,
 } from 'sentry/views/dashboards/widgets/common/typePredicates';
 
+/**
+ * Format a value for the tooltip on an ECharts graph.
+ *
+ * The value might be a user submitted metric, or an aggregate. For user metric
+ * values, it's wise to render the value at full precision, since the user might
+ * be interested in the exact value, and tooltips should generally show the full
+ * value. For aggregates, the precision is contrived, and the significant digits
+ * might not match the original data. In this case, it would be wise to truncate
+ * the value for display purposes, but we opt to do the safer thing and show the
+ * value at full precision.
+ *
+ * This concept mostly applies to "number" values, since integers, durations,
+ * and sizes naturally require less precision.
+ */
 export function formatTooltipValue(
   value: number | typeof ECHARTS_MISSING_DATA_VALUE,
   type: string,
@@ -25,7 +39,9 @@ export function formatTooltipValue(
   switch (type) {
     case 'integer':
     case 'number':
-      return value.toLocaleString();
+      return value.toLocaleString(undefined, {
+        maximumFractionDigits: 100,
+      });
     case 'percentage':
       return formatPercentage(value, 2);
     case 'duration': {

static/app/views/dashboards/widgets/timeSeriesWidget/formatters/formatYAxisValue.spec.tsx

@@ -16,8 +16,12 @@ describe('formatYAxisValue', () => {
 
   describe('number', () => {
     it.each([
-      [17.1238, '17.124'],
+      [0.000033452, '0.000033452'],
+      [0.00003, '0.00003'],
+      [17.1238, '17.1238'],
+      [170, '170'],
       [1772313.1, '1,772,313.1'],
+      [1772313.11123, '1,772,313.11123'],
     ])('Formats %s as %s', (value, formattedValue) => {
       expect(formatYAxisValue(value, 'number')).toEqual(formattedValue);
     });

static/app/views/dashboards/widgets/timeSeriesWidget/formatters/formatYAxisValue.tsx

@@ -19,6 +19,33 @@ import {
 
 import {formatYAxisDuration} from './formatYAxisDuration';
 
+/**
+ * Format a value for the Y axis on an ECharts graph.
+ *
+ * The values on the Y axis are chosen by ECharts. ECharts will automatically
+ * select, when possible, nice round values. We always format the chosen value
+ * at _full precision_ and trust EChart's choices. e.g., if it chooses "100", we
+ * should show "100", because it probably chose a Y axis scale like "0, 100,
+ * 200, 300". If it chooses "17.22" we should render "17.22" and not truncate
+ * the value, since ECharts is probably using a scale like "17.20, 17.21, 17.22"
+ * because the Y axis range is narrow. Similarly, a value like "0.00006"
+ * probably means the range was narrow starting from 0, "0.00000, 0.00002
+ * 0.00004 0.00006" and so on.
+ *
+ * This concept does not apply to:
+ * 1. Integers. There are no fractional values!
+ * 2. Durations. Durations have multiplier prefixes all the way down to nanoseconds, which should be enough. If needed, we can introduce smaller multipliers.
+ * 3. Sizes. Sizes are effectively integers, and we have "byte" is already
+ * small. It's an extremely rare case that we have fractional bytes with high
+ * precision.
+ * Rates and percentages would benefit from more precision, but it's not as critical there.
+ *
+ * The downside of this approach is that if the precision varies on the scale
+ * (e.g., "0, 0.5, 1, 1.5") the Y axis labels are not well-aligned. This is a
+ * limitation of ECharts, since it doesn't provide information about the entire
+ * scale to each number. The ideal solution here would be to coordinate the
+ * formatting of all the values.
+ */
 export function formatYAxisValue(value: number, type: string, unit?: string): string {
   if (value === 0) {
     return '0';
@@ -28,7 +55,9 @@ export function formatYAxisValue(value: number, type: string, unit?: string): st
     case 'integer':
       return formatAbbreviatedNumber(value);
     case 'number':
-      return value.toLocaleString();
+      return value.toLocaleString(undefined, {
+        maximumFractionDigits: 100,
+      });
     case 'percentage':
       return formatPercentage(value, 3);
     case 'duration': {