rlei-odes opened a new pull request, #45421:
URL: https://github.com/apache/superset/pull/45421
### SUMMARY
Writing a `series` object in *Customize → ECharts Options* currently empties
the
chart. The custom-options merge replaces any value that is not a plain
object on
both sides, so the object takes the place of the whole series array and every
series loses its data. With this change the object is merged into each series
instead, which is how theme overrides (`mergeEchartsThemeOverrides`) already
treat the same input.
That makes properties that are already allowed in the options schema usable
per chart: `decal` for hatching, `borderType` and `lineStyle.type` for
dashes,
border colour and width, opacity.
```json
{ "series": { "itemStyle": { "borderType": "dashed", "borderWidth": 2,
"borderColor": "#333" } } }
```
Scope is intentionally narrow:
- **Only `series`.** Other keys whose generated value is an array keep
today's
replace behaviour. `dataZoom` is the case that matters: it is an array when
zoom is on, and an object written there today does a working replace.
Merging
into each entry would change charts that render correctly now.
- **A `series` array still replaces.** That is existing, documented behaviour
and someone may rely on it.
- **No chart without a `series` object is affected.** The merge only runs
when
the chart has saved ECharts Options, and the new branch only when `series`
is
an object, the input that currently produces an empty chart.
The object reaches every series the transform emits, including forecast
trend,
confidence band and observation series, and both queries of a Mixed chart.
That
matches the theme behaviour. A setting that suits one series type can look
wrong
on another, e.g. `itemStyle.color: "transparent"` turns bars into outlines
but
makes lines invisible. That is the nature of applying one object to all
series;
the docs note it applies to forecast series too.
Affected charts are the ones that call `mergeCustomEChartOptions`: the
Timeseries family (Line, Bar, Area, Scatter, Smooth Line, Step), Mixed
Timeseries and Candlestick.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Each row is one chart type. Columns, left to right: no ECharts Options, a
hatching decal, a dashed border plus dashed line style, and a transparent
fill
with `borderColor: "auto"`. Before, every chart with a `series` object is
empty;
the first column is identical before and after.
**Bar**
Before:
<img width="3072" height="800" alt="before_row01"
src="https://github.com/user-attachments/assets/33eb6177-4888-426a-bfa6-d52fbd4f5501";
/>
After:
<img width="3072" height="800" alt="after_row01"
src="https://github.com/user-attachments/assets/a6b23b94-05f1-412a-b019-445e565b5bbe";
/>
**Line**
Before:
<img width="3072" height="800" alt="before_row03"
src="https://github.com/user-attachments/assets/673c8aa6-f168-4cee-becb-b7323c094641";
/>
After:
<img width="3072" height="800" alt="after_row03"
src="https://github.com/user-attachments/assets/fb195a94-8d81-4470-94ff-ed959e0ecaf7";
/>
**Mixed**
Before:
<img width="3072" height="800" alt="before_row08"
src="https://github.com/user-attachments/assets/d45dd35f-2f95-4177-88f7-6d39c1cc5f97";
/>
After:
<img width="3072" height="800" alt="after_row08"
src="https://github.com/user-attachments/assets/16ff689f-5a09-4b17-80b2-f56d25d420be";
/>
**Line with forecast**
Before:
<img width="3072" height="800" alt="before_row09"
src="https://github.com/user-attachments/assets/937ca49b-0cc2-400f-a5d7-3ae5b550301d";
/>
After:
<img width="3072" height="800" alt="after_row09"
src="https://github.com/user-attachments/assets/aa8a8983-e9e4-4f30-aa86-7ecb93465df5";
/>
**Candlestick**
Before:
<img width="3072" height="800" alt="before_row11"
src="https://github.com/user-attachments/assets/0bd4ae94-2d6f-4538-aaca-33662c110ccb";
/>
After:
<img width="3072" height="800" alt="after_row11"
src="https://github.com/user-attachments/assets/f04c3c23-b4cb-4c2f-b533-ea85ee3bab20";
/>
**Unlocks combinations**
Fill, hatch and border colours are independent, so a single-series chart can
be
given a fully custom look:
<img width="3072" height="800" alt="after_row12"
src="https://github.com/user-attachments/assets/bc74f68c-549f-4b94-a6f8-c4b46e33061c";
/>
### TESTING INSTRUCTIONS
Unit tests: `npm run test --
plugins/plugin-chart-echarts/src/utils/mergeCustomEChartOptions.test.ts`
Manually, on any Bar or Line chart:
1. Open a chart without ECharts Options and confirm it renders as before.
2. In *Customize → ECharts Options*, enter
`{"series": {"itemStyle": {"borderType": "dashed", "borderWidth": 2,
"borderColor": "#333"}}}`.
Before this change the chart goes blank. After, every series keeps its
data
and gains a dashed border.
3. Replace it with
`{"series": {"itemStyle": {"decal": {"symbol": "rect", "dashArrayX": [1,
0], "dashArrayY": [4, 3], "rotation": 0.785}}}}`
to see hatching on bars and area fills.
4. Enter a `series` array, e.g. `{"series": [{"name": "x"}]}`. It still
replaces the generated series, as before.
5. On a chart with zoom enabled, enter `{"dataZoom": {"type": "slider"}}`. It
still replaces the zoom components, as before.
### ADDITIONAL INFORMATION
- [x] Has associated issue:
https://github.com/apache/superset/discussions/43426
- [ ] Required feature flags:
- [ ] 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]
