fix: series list issue for color override config on pie chart #8540

ktx-abhay · 2025-09-19T09:50:27Z

PR Type

Bug fix, Enhancement

Description

Correct series extraction for pie/donut
Fallback to existing options logic
Prevent invalid items via filtering

Diagram Walkthrough

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"]

File Walkthrough

Relevant files

Bug fix

ColorBySeries.vue `Properly derive series for pie/donut charts` web/src/components/dashboards/addPanel/ColorBySeries.vue Add panel type detection for pie/donut. Extract series names from data[].name. Filter out invalid data items. Preserve fallback to existing options.	+16/-0

greptile-apps

Greptile Summary

This PR fixes a data extraction issue in the ColorBySeries.vue component that was preventing users from configuring color overrides for pie and donut charts. The change addresses a fundamental difference in how chart data is structured between pie/donut charts versus other chart types.

In the existing codebase, the color override functionality works by extracting series names from the chart options to populate a dropdown for users to select which series to customize. However, pie and donut charts store their series information differently - instead of having multiple series objects, they have a single series with data points stored in series[0].data[].name, where each data point represents a segment of the pie/donut.

The fix adds conditional logic in the seriesOptions computed property that detects when the chart type is pie or donut, then extracts series names from the appropriate data structure (chartOptions.series[0].data.name). For all other chart types, it maintains the existing logic to ensure backward compatibility. The implementation includes proper validation by filtering out invalid items before mapping the data.

This change integrates seamlessly with the dashboard's existing color customization system, allowing users to override colors for individual pie/donut segments just like they can for other chart types, providing a consistent user experience across all chart types in the dashboard builder.

Confidence score: 4/5

This PR is safe to merge with minimal risk as it only affects the ColorBySeries component's data extraction logic
Score reflects a focused fix with proper conditional logic and backward compatibility maintained
Pay close attention to the conditional logic in ColorBySeries.vue to ensure pie/donut detection works correctly

_{1 file reviewed, 1 comment}

_{Edit Code Review Bot Settings | Greptile}

greptile-apps · 2025-09-19T09:51:08Z

web/src/components/dashboards/addPanel/ColorBySeries.vue

+          .map((item: any) => ({  
+            name: item.name,
+          }));


style: Trailing spaces after the opening brace on line 118. Clean up whitespace for consistency.

Suggested change

.map((item: any) => ({

name: item.name,

}));

.map((item: any) => ({

name: item.name,

}));

github-actions · 2025-09-19T09:51:11Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Type Safety The code uses 'any' for items in 'series[0].data' and for the save function param, which can hide shape issues. Consider typing the expected series data objects and guarding for non-string names to avoid runtime issues. .filter((item: any) => item && item.name) // Filter out invalid items .map((item: any) => ({ name: item.name, })); Fallback Behavior Returning '{ series: [] }' for non-pie/donut when options are missing may differ from previous behavior if other keys in 'options' were relied upon. Validate that downstream consumers only need 'series' in this path. // For other chart types, use the existing logic return props.colorBySeriesData?.options \|\| { series: [] }; }); Panel Type Matching Panel type comparison uses exact strings "pie"/"donut". Confirm these match all possible values (e.g., "doughnut", capitalization) or normalize the type to avoid missing the specialized path. (panelType === "pie" \|\| panelType === "donut") && chartOptions?.series?.[0]?.data ) {

github-actions · 2025-09-19T09:51:35Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Preserve options object shape Avoid returning a differently shaped object for pie/donut versus other chart types, as downstream consumers may expect the original options structure (e.g., other keys like tooltip, xaxis). Instead, preserve the original options and only override the series array for pie/donut. This prevents breaking UI logic relying on additional option fields. web/src/components/dashboards/addPanel/ColorBySeries.vue [108-126] const seriesOptions = computed(() => { const panelType = dashboardPanelData.data.type; - const chartOptions = props.colorBySeriesData?.options; - // For pie and donut charts, extract series names from data[].name + const chartOptions = props.colorBySeriesData?.options \|\| {}; 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 }; + .filter((item: any) => item && item.name) + .map((item: any) => ({ name: item.name })); + return { + ...chartOptions, + series: pieDonutSeriesNames, + }; } - - // For other chart types, use the existing logic - return props.colorBySeriesData?.options \|\| { series: [] }; + return chartOptions \|\| { series: [] }; }); Suggestion importance[1-10]: 7 __ Why: Returning `{ series: [...] }` for pie/donut alters the options shape and could break consumers expecting other option keys; merging into `chartOptions` is a sensible improvement with moderate impact.	Medium
Possible issue	Add safe optional chaining Guard against missing nested properties to prevent runtime errors when `dashboardPanelData.data` or `colorBySeriesData` is undefined during initial renders. Use optional chaining with safe fallbacks for both references. web/src/components/dashboards/addPanel/ColorBySeries.vue [109-110] -const panelType = dashboardPanelData.data.type; +const panelType = dashboardPanelData?.data?.type; const chartOptions = props.colorBySeriesData?.options; Suggestion importance[1-10]: 4 __ Why: Adding optional chaining to `dashboardPanelData.data.type` can avoid rare runtime errors during initial renders; impact is limited and may be unnecessary if guarantees exist.	Low
General	Normalize and validate series names Ensure that `name` is consistently treated as a string to avoid downstream key mismatches (e.g., numbers/booleans). Normalize and trim names, and drop empty strings after trimming to avoid blank legend entries or config collisions. web/src/components/dashboards/addPanel/ColorBySeries.vue [117-121] -.filter((item: any) => item && item.name) // Filter out invalid items -.map((item: any) => ({ - name: item.name, -})); +.filter((item: any) => item && item.name != null) +.map((item: any) => ({ name: String(item.name).trim() })) +.filter((item: any) => item.name.length > 0); Suggestion importance[1-10]: 5 __ Why: Normalizing and trimming names can prevent subtle UI/config issues; it's reasonable and low risk, but it's an enhancement rather than fixing a clear bug.	Low

### **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> ___

fix: series list issue for color override config

65054c4

github-actions bot added the ☢️ Bug Something isn't working label Sep 19, 2025

greptile-apps bot reviewed Sep 19, 2025

View reviewed changes

github-actions bot added the Review effort 2/5 label Sep 19, 2025

ktx-kirtan approved these changes Sep 19, 2025

View reviewed changes

ktx-abhay merged commit b2535e2 into main Sep 19, 2025
40 of 43 checks passed

ktx-abhay deleted the fix/dashboard/pie-color-series-list-issue branch September 19, 2025 10:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: series list issue for color override config on pie chart #8540

fix: series list issue for color override config on pie chart #8540

Uh oh!

ktx-abhay commented Sep 19, 2025 •

edited by github-actions bot

Loading

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Sep 19, 2025

Uh oh!

github-actions bot commented Sep 19, 2025

Uh oh!

github-actions bot commented Sep 19, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

fix: series list issue for color override config on pie chart #8540

fix: series list issue for color override config on pie chart #8540

Uh oh!

Conversation

ktx-abhay commented Sep 19, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Summary

Confidence score: 4/5

Uh oh!

greptile-apps bot Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 19, 2025

PR Reviewer Guide 🔍

Uh oh!

github-actions bot commented Sep 19, 2025

PR Code Suggestions ✨

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ktx-abhay commented Sep 19, 2025 •

edited by github-actions bot

Loading