feat(bullet): optional legend with per-item toggling

claude · claude · commit caa31e314ca2 · 2026-07-20T17:34:17.000-07:00
Every range, marker and marker line is now its own named series (marker
lines as empty line series carrying a markLine), so the new Show legend
control lists them all as always-visible entries whose clicks natively
toggle the corresponding element. Show labels remains independent, and
per-item tooltips are unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bullet/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Bullet/controlPanel.tsx
@@ -128,6 +128,20 @@ const config: ControlPanelConfig = {
             },
           },
         ],
+        [
+          {
+            name: 'show_legend',
+            config: {
+              type: 'CheckboxControl',
+              label: t('Show legend'),
+              renderTrigger: true,
+              default: false,
+              description: t(
+                'List every range, marker and marker line in a legend; clicking an entry toggles it on the chart',
+              ),
+            },
+          },
+        ],
         ['y_axis_format'],
       ],
     },
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bullet/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bullet/transformProps.ts
@@ -43,6 +43,7 @@ export default function transformProps(
     markerLineLabels: rawMarkerLineLabels,
     yAxisFormat,
     showLabels,
+    showLegend,
   } = formData;
   const refs: Refs = {};
   const { onContextMenu, setDataMask = () => {} } = hooks;
@@ -105,13 +106,20 @@ export default function transformProps(
     (MEASURE_BAR_FRACTION / 2) * gridHeight + 12,
   );
 
+  const rangeName = (value: number, i: number) =>
+    rangeLabels[i]
+      ? `${rangeLabels[i]}: \u2264 ${formatter(value)}`
+      : `\u2264 ${formatter(value)}`;
+  const markerName = (value: number, i: number, labels: string[]) =>
+    labels[i] ? `${labels[i]}: ${formatter(value)}` : String(formatter(value));
+
   const echartOptions: EChartsCoreOption = {
     animation: false,
-    // A single-measure chart needs no legend; the default one collides
-    // with the x-axis labels.
-    legend: { show: false },
+    // Optional legend listing every range, marker and line as a toggleable
+    // named entry; each is its own series so ECharts handles the toggling.
+    legend: { show: Boolean(showLegend), top: 0 },
     grid: {
-      top: theme.sizeUnit * 2,
+      top: showLegend ? theme.sizeUnit * 10 : theme.sizeUnit * 2,
       bottom: theme.sizeUnit * 6,
       left: theme.sizeUnit * 2,
       right: theme.sizeUnit * 2,
@@ -162,79 +170,84 @@ export default function transformProps(
             band.coords[1],
           ]),
         },
-        markLine: {
-          silent: true,
-          symbol: 'none',
-          data: markerLines.map((value, index) => ({
-            xAxis: value,
-            label: {
-              position: 'insideEndTop',
+      },
+      // Invisible hover targets at each range threshold: per-item tooltips
+      // (markArea is not reliably hoverable), optional on-chart labels, and a
+      // named legend entry each.
+      ...ranges.map((value, index) => ({
+        name: rangeName(value, index),
+        type: 'scatter',
+        data: [
+          {
+            value: [value, 0],
+            tooltip: {
               formatter: () =>
-                markerLabelAt(index, markerLineLabels, markerLines),
-              color: theme.colorTextSecondary,
+                sanitizeHtml(
+                  `${rangeLabels[index] || ''} \u2264 <b>${formatter(value)}</b>`,
+                ),
             },
-            lineStyle: {
-              color: theme.colorText,
-              type: 'solid',
-              width: 2,
+            label: {
+              show: Boolean(showLabels) && Boolean(rangeLabels[index]),
+              position: 'top',
+              color: theme.colorTextSecondary,
+              formatter: () => String(rangeLabels[index] || ''),
             },
-          })),
-        },
-      },
-      {
-        // Invisible hover targets at each range threshold so ranges get their
-        // own item tooltip (markArea itself is not reliably hoverable), and a
-        // place to hang always-on labels.
-        name: 'ranges',
-        type: 'scatter',
-        data: ranges.map((value, index) => ({
-          value: [value, 0],
-          tooltip: {
-            formatter: () =>
-              sanitizeHtml(
-                `${rangeLabels[index] || ''} \u2264 <b>${formatter(value)}</b>`,
-              ),
           },
-          label: {
-            show: Boolean(showLabels) && Boolean(rangeLabels[index]),
-            position: 'top',
-            color: theme.colorTextSecondary,
-            formatter: () => String(rangeLabels[index] || ''),
-          },
-        })),
+        ],
         symbol: 'rect',
         symbolSize: [14, 40],
         itemStyle: { color: 'transparent' },
         z: 15,
-      },
-      {
-        name: 'markers',
+      })),
+      ...markers.map((value, index) => ({
+        name: markerName(value, index, markerLabels),
         type: 'scatter',
-        data: markers.map((value, index) => ({
-          value: [value, 0],
-          tooltip: {
-            formatter: () =>
-              sanitizeHtml(
-                `${markerLabelAt(index, markerLabels, markers)}: <b>${formatter(
-                  value,
-                )}</b>`,
-              ),
+        data: [
+          {
+            value: [value, 0],
+            tooltip: {
+              formatter: () =>
+                sanitizeHtml(
+                  `${markerLabelAt(index, markerLabels, markers)}: <b>${formatter(value)}</b>`,
+                ),
+            },
           },
-        })),
+        ],
         symbol: 'triangle',
         symbolSize: 14,
+        symbolOffset: [0, markerOffsetPx],
         label: {
           show: Boolean(showLabels),
           position: 'bottom',
           color: theme.colorTextSecondary,
-          formatter: (params: { dataIndex: number }) =>
-            String(markerLabelAt(params.dataIndex, markerLabels, markers)),
+          formatter: () => String(markerLabelAt(index, markerLabels, markers)),
         },
-        // Sit below the measure bar pointing up at the marked value
-        symbolOffset: [0, markerOffsetPx],
         itemStyle: { color: theme.colorText },
         z: 20,
-      },
+      })),
+      // Marker lines as their own empty series so each gets a legend entry
+      // whose toggle shows and hides the line.
+      ...markerLines.map((value, index) => ({
+        name: markerName(value, index, markerLineLabels),
+        type: 'line',
+        data: [],
+        markLine: {
+          silent: true,
+          symbol: 'none',
+          data: [
+            {
+              xAxis: value,
+              label: {
+                position: 'insideEndTop',
+                formatter: () =>
+                  String(markerLabelAt(index, markerLineLabels, markerLines)),
+                color: theme.colorTextSecondary,
+              },
+              lineStyle: { color: theme.colorText, type: 'solid', width: 2 },
+            },
+          ],
+        },
+      })),
     ],
   };
 
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bullet/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bullet/types.ts
@@ -36,6 +36,7 @@ export type EchartsBulletFormData = QueryFormData & {
   markerLineLabels?: string;
   yAxisFormat?: string;
   showLabels?: boolean;
+  showLegend?: boolean;
 };
 
 export interface EchartsBulletChartProps extends BaseChartProps<EchartsBulletFormData> {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Bullet/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Bullet/transformProps.test.ts
@@ -51,27 +51,31 @@ test('renders the measure bar with markers, marker lines and range bands', () =>
   expect(series[0].type).toBe('bar');
   expect(series[0].data).toEqual([120]);
 
-  // marker lines on the bar series
-  expect(series[0].markLine.data).toHaveLength(1);
-  expect(series[0].markLine.data[0].xAxis).toBe(250);
+  // marker lines are their own named series so the legend can toggle them
+  const lineSeries = series.filter((x: any) => x.type === 'line');
+  expect(lineSeries).toHaveLength(1);
+  expect(lineSeries[0].markLine.data[0].xAxis).toBe(250);
 
   // nested range bands, largest drawn first
   const bandEnds = series[0].markArea.data.map((d: any) => d[1].xAxis);
   expect(bandEnds).toEqual([300, 200, 100]);
 
-  // triangle markers
-  expect(series[2].type).toBe('scatter');
-  expect(series[2].data[0].value).toEqual([150, 0]);
+  // triangle markers, one named series each
+  const markerSeries = series.filter((x: any) => x.symbol === 'triangle');
+  expect(markerSeries).toHaveLength(1);
+  expect(markerSeries[0].data[0].value).toEqual([150, 0]);
 
   // axis spans all values
   expect((echartOptions as any).xAxis.max).toBe(300);
 
-  // markers sit below the bar (pixel offset); no legend on this chart
-  expect(series[2].symbolOffset[1]).toBeGreaterThan(0);
+  // markers sit below the bar (pixel offset); legend off unless enabled
+  const marker = series.find((x: any) => x.symbol === 'triangle');
+  expect(marker.symbolOffset[1]).toBeGreaterThan(0);
   expect((echartOptions as any).legend.show).toBe(false);
 
-  // range thresholds get their own hover targets carrying the labels
-  const rangeTips = series[1].data.map((d: any) => d.tooltip.formatter());
+  // range thresholds get their own named hover-target series
+  const rangeSeries = series.filter((x: any) => x.symbol === 'rect');
+  const rangeTips = rangeSeries.map((x: any) => x.data[0].tooltip.formatter());
   expect(rangeTips.join(' ')).toContain('low');
   expect(rangeTips.join(' ')).toContain('high');
 });
@@ -91,7 +95,7 @@ test('defaults the band to 110% of the measure when no ranges are set', () => {
   expect(series[0].data).toEqual([120]);
   const bandEnds = series[0].markArea.data.map((d: any) => d[1].xAxis);
   expect(bandEnds).toEqual([120 * 1.1]);
-  expect(series[2].data).toHaveLength(0);
+  expect(series.filter((x: any) => x.symbol === 'triangle')).toHaveLength(0);
 });
 
 test('keeps distinct labels for duplicate marker and marker-line values', () => {
@@ -105,12 +109,14 @@ test('keeps distinct labels for duplicate marker and marker-line values', () =>
   );
   const { series } = echartOptions as any;
 
-  const markLineLabels = series[0].markLine.data.map((d: any) =>
-    d.label.formatter(),
-  );
+  const markLineLabels = series
+    .filter((x: any) => x.type === 'line')
+    .map((x: any) => x.markLine.data[0].label.formatter());
   expect(markLineLabels).toEqual(['stretch', 'ceiling']);
 
-  const markerTooltips = series[2].data.map((d: any) => d.tooltip.formatter());
+  const markerTooltips = series
+    .filter((x: any) => x.symbol === 'triangle')
+    .map((x: any) => x.data[0].tooltip.formatter());
   expect(markerTooltips[0]).toContain('goal');
   expect(markerTooltips[1]).toContain('forecast');
 });
