mirror of
https://github.com/openobserve/openobserve.git
synced 2026-11-04 16:09:05 +00:00
fix: series list issue for color override config on pie chart (#8540)
### **PR Type**
Bug fix, Enhancement
___
### **Description**
- Correct series extraction for pie/donut
- Fallback to existing options logic
- Prevent invalid items via filtering
___
### Diagram Walkthrough
```mermaid
flowchart LR
A["panelType check"] -- "pie/donut" --> B["extract from data[].name"]
A -- "other types" --> C["use existing options"]
B -- "build series list" --> D["return { series: names }"]
C -- "fallback" --> E["return options or empty series"]
```
<details> <summary><h3> File Walkthrough</h3></summary>
<table><thead><tr><th></th><th align="left">Relevant
files</th></tr></thead><tbody><tr><td><strong>Bug
fix</strong></td><td><table>
<tr>
<td>
<details>
<summary><strong>ColorBySeries.vue</strong><dd><code>Properly derive
series for pie/donut charts</code>
</dd></summary>
<hr>
web/src/components/dashboards/addPanel/ColorBySeries.vue
<ul><li>Add panel type detection for pie/donut.<br> <li> Extract series
names from data[].name.<br> <li> Filter out invalid data items.<br> <li>
Preserve fallback to existing options.</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8540/files#diff-2783259507b45f0b3664d9be68ca236690bbbf151472da3fa8b552d230af5b3f">+16/-0</a>
</td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___
This commit is contained in:
@@ -106,6 +106,22 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
const seriesOptions = computed(() => {
|
||||
const panelType = dashboardPanelData.data.type;
|
||||
const chartOptions = props.colorBySeriesData?.options;
|
||||
// For pie and donut charts, extract series names from data[].name
|
||||
if (
|
||||
(panelType === "pie" || panelType === "donut") &&
|
||||
chartOptions?.series?.[0]?.data
|
||||
) {
|
||||
const pieDonutSeriesNames = chartOptions.series[0].data
|
||||
.filter((item: any) => item && item.name) // Filter out invalid items
|
||||
.map((item: any) => ({
|
||||
name: item.name,
|
||||
}));
|
||||
return { series: pieDonutSeriesNames };
|
||||
}
|
||||
|
||||
// For other chart types, use the existing logic
|
||||
return props.colorBySeriesData?.options || { series: [] };
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user