From b2535e2fa04f09df2f008b8e373cebb59f0ad850 Mon Sep 17 00:00:00 2001
From: Abhay Padamani <141122205+ktx-abhay@users.noreply.github.com>
Date: Fri, 19 Sep 2025 16:15:20 +0530
Subject: [PATCH] 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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</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>&nbsp;
&nbsp; </td>

</tr>
</table></td></tr></tr></tbody></table>

</details>

___
---
 .../dashboards/addPanel/ColorBySeries.vue        | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/web/src/components/dashboards/addPanel/ColorBySeries.vue b/web/src/components/dashboards/addPanel/ColorBySeries.vue
index 404ec24d38..378e531b3d 100644
--- a/web/src/components/dashboards/addPanel/ColorBySeries.vue
+++ b/web/src/components/dashboards/addPanel/ColorBySeries.vue
@@ -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: [] };
     });