fix(bullet): tolerate partial input, place markers below the bar, tooltip range labels

Tokenizing is lenient instead of throwing: the controls re-render on every
keystroke, so partial input like a trailing comma must not error the chart
(or leave it stuck in the error state). Empty and non-numeric tokens are
dropped. The marker offset is computed in pixels from the chart height
since a percentage offset of the symbol size lands inside a tall measure
bar. Range labels, which markArea labels never rendered, now surface as
lines on the measure bar's tooltip.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: claude

superset-frontend/plugins/plugin-chart-echarts/src/Bullet/transformProps.ts

@@ -85,13 +85,7 @@ export default function transformProps(
     itemStyle: {
       color: bandFills[Math.min(i, bandFills.length - 1)],
     },
-    // Surface the range label inside the band's right edge
-    label: {
-      show: Boolean(label),
-      position: 'insideRight',
-      color: theme.colorTextSecondary,
-      fontSize: theme.fontSizeSM,
-    },
+    label: { show: false },
     // markArea item: [{start}, {end}]
     coords: [{ xAxis: axisMin }, { xAxis: value }],
   }));
@@ -102,6 +96,21 @@ export default function transformProps(
   const markerLabelAt = (index: number, labels: string[], values: number[]) =>
     labels[index] ? labels[index] : formatter(values[index]);
 
+  // The measure bar spans MEASURE_BAR_FRACTION of the category band
+  // (roughly the grid height), so a percentage symbolOffset lands inside a
+  // tall bar. Compute pixels: half the bar plus a small gap below it.
+  const gridHeight = Math.max(height - theme.sizeUnit * 10, 40);
+  const markerOffsetPx = Math.round(
+    (MEASURE_BAR_FRACTION / 2) * gridHeight + 12,
+  );
+
+  // Surface range labels on the measure bar's tooltip
+  const rangeTooltipLines = [...ranges]
+    .map((value, i) => ({ value, label: rangeLabels[i] }))
+    .filter(({ label }) => Boolean(label))
+    .sort((a, b) => a.value - b.value)
+    .map(({ value, label }) => `${label}: \u2264 ${formatter(value)}`);
+
   const echartOptions: EChartsCoreOption = {
     // A single-measure chart needs no legend; the default one collides
     // with the x-axis labels.
@@ -133,7 +142,12 @@ export default function transformProps(
     tooltip: {
       confine: true,
       formatter: () =>
-        sanitizeHtml(`${metricLabel}: <b>${formatter(measure)}</b>`),
+        sanitizeHtml(
+          [
+            `${metricLabel}: <b>${formatter(measure)}</b>`,
+            ...rangeTooltipLines,
+          ].join('<br />'),
+        ),
     },
     series: [
       {
@@ -191,7 +205,7 @@ export default function transformProps(
         symbol: 'triangle',
         symbolSize: 14,
         // Sit below the measure bar pointing up at the marked value
-        symbolOffset: [0, '160%'],
+        symbolOffset: [0, markerOffsetPx],
         itemStyle: { color: theme.colorText },
         z: 20,
       },

superset-frontend/plugins/plugin-chart-echarts/src/Bullet/utils.ts

@@ -16,16 +16,19 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { validateNumber } from '@superset-ui/core';
-
 // Ported from the nvd3 bullet chart so saved comma-separated control values
 // keep their exact semantics.
 export function tokenizeToNumericArray(value?: string): number[] | null {
   if (!value?.trim()) return null;
-  const tokens = value.split(',');
-  if (tokens.some(token => validateNumber(token)))
-    throw new Error('All values should be numeric');
-  return tokens.map(token => parseFloat(token));
+  // Lenient by design: this runs on every keystroke, so partial input like
+  // "50," must not throw. Empty and non-numeric tokens are dropped.
+  const numbers = value
+    .split(',')
+    .map(token => token.trim())
+    .filter(token => token !== '')
+    .map(token => Number(token))
+    .filter(n => !Number.isNaN(n));
+  return numbers.length ? numbers : null;
 }
 
 export function tokenizeToStringArray(value?: string): string[] | null {

superset-frontend/plugins/plugin-chart-echarts/test/Bullet/transformProps.test.ts

@@ -66,15 +66,14 @@ test('renders the measure bar with markers, marker lines and range bands', () =>
   // axis spans all values
   expect((echartOptions as any).xAxis.max).toBe(300);
 
-  // markers sit below the bar; no legend on a single-measure chart
-  expect(series[1].symbolOffset).toEqual([0, '160%']);
+  // markers sit below the bar (pixel offset); no legend on this chart
+  expect(series[1].symbolOffset[1]).toBeGreaterThan(0);
   expect((echartOptions as any).legend.show).toBe(false);
 
-  // range labels surface inside their bands
-  const labeled = series[0].markArea.data.find(
-    (d: any) => d[0].name === 'high',
-  );
-  expect(labeled[0].label.show).toBe(true);
+  // range labels surface in the measure tooltip
+  const tooltip = (echartOptions as any).tooltip.formatter();
+  expect(tooltip).toContain('low');
+  expect(tooltip).toContain('high');
 });
 
 test('defaults the band to 110% of the measure when no ranges are set', () => {