Aleem89 opened a new pull request, #45648: URL: https://github.com/apache/superset/pull/45648
### SUMMARY (Written with help from Claude Code Fable 5.1; I reviewed the code and the design decisions, wrote the tests first, and checked the result against local 6.1.0 and 7.0.0rc2 containers.) Since #43314 the List legend at the top or bottom of a Timeseries chart is plain HTML, and every entry got the same filled square. That lost what the legend used to tell you at a glance: which line is solid, dashed or dotted, and which marker belongs to which series. A dashed "reporting limit" annotation and a solid data series looked identical, while the Scroll legend next to it still showed the difference. This draws each entry the way the ECharts legend does: a short line in the series' dash style with its marker on it, a filled marker for scatter charts, and a rounded box for bars. Deselected entries go grey as before. The icon is a small inline SVG built from the series settings the legend already receives, so toggling, All/Inverse and hover are untouched. - `TimeseriesLegendIcon` (new) draws the icon; `buildTimeseriesCustomLegend` decides which icon each entry gets. - Icons follow the series opacity too, so time-shifted series read as lighter, as they do in the Scroll legend. Fixes #45488 ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF Same charts on 6.1.0, 7.0.0rc2 before, 7.0.0rc2 with this change, and the Scroll legend on rc2 for reference. Line chart with solid, dashed and dotted annotation lines: <!-- legend-line_list_top.png --> Time comparison with time-shift colors, which uses every marker shape: <!-- legend-tc_list_top.png --> The report used a line chart, but bar, scatter and area lost their icons the same way. They are back to what 6.1 and the Scroll legend show: <!-- legend-bar-scatter-area.png --> ### TESTING INSTRUCTIONS 1. Line chart with a couple of metrics and a Formula annotation with Style "Dashed". Under Customize set Legend Type to List and Legend Orientation to Top. The annotation shows as a dashed line in the legend and the metrics as a line with a hollow circle. 2. Switch Legend Type to Scroll: the icons look the same. 3. Turn on a few time comparisons with "Time shift color": the legend shows the triangle, diamond, square and pin markers with their dash patterns. 4. Bar chart: rounded box. Scatter: a dot. 5. Click an entry: it turns grey and its series hides. Unit tests: `plugins/plugin-chart-echarts/test/Timeseries/TimeseriesLegendIcon.test.tsx` and the new cases in `transformProps.test.ts`. ### ADDITIONAL INFORMATION - [x] Has associated issue: Fixes #45488 - [ ] Required feature flags: - [x] Changes UI - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [ ] Introduces new feature or API - [ ] Removes existing feature or API -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
