fix: update table chart no data validation logic (#8422) #8432
Conversation
Bug fix
___
- Fix table chart no-data validation
- Separate table logic from other charts
- Ensure presence check on x/y aliases
- Prevent false negatives with single row
___
```mermaid
flowchart LR
Renderer["PanelSchemaRenderer.vue"]
Charts["Non-table charts validation"]
Table["Table-specific validation"]
Metric["Metric validation (unchanged)"]
Renderer -- "refine validation" --> Charts
Renderer -- "add distinct logic" --> Table
Renderer -- "keep existing flow" --> Metric
```
<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>PanelSchemaRenderer.vue</strong><dd><code>Refine table
chart data validation logic</code>
</dd></summary>
<hr>
web/src/components/dashboards/PanelSchemaRenderer.vue
<ul><li>Remove table from generic chart validation branch.<br> <li> Add
table-specific data presence checks.<br> <li> Allow single-row tables
with any x/y value.<br> <li> Keep gauge and others using stricter alias
checks.</ul>
</details>
</td>
<td><a
href="https://github.com/openobserve/openobserve/pull/8422/files#diff-e5376e7e77bf3aaf6590c2522d8c2dbffcc95a8006ae0d6dc0040a37825367d6">+10/-2</a>
</td>
</tr>
</table></td></tr></tr></tbody></table>
</details>
___
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR fixes a bug in the table chart no-data validation logic within the PanelSchemaRenderer.vue component. The change addresses false "No Data" messages that were appearing for table charts containing valid data.
The core issue was that table charts were using the same validation logic as other chart types (line, bar, etc.), which required ALL x and y field aliases to contain non-null values using an every() condition. This approach was too restrictive for tables, which can legitimately display rows with partial data - unlike other charts that typically need complete coordinate pairs.
The fix separates table validation from the generic chart validation by:
- Removing "table" from the generic chart validation case (line 763)
- Adding a dedicated table-specific validation branch (lines 772-780) that uses a more lenient approach
- For tables with multiple rows, it simply checks if data exists
- For single-row tables, it uses
some()instead ofevery()to check if ANY x or y field contains non-null data
This change aligns the validation logic with how tables actually render data, where partially populated rows are valid and displayable, while maintaining the stricter validation requirements for other chart types that need complete data points.
Confidence score: 4/5
- This PR addresses a specific UI bug with targeted logic changes and minimal risk
- The fix correctly separates table validation logic from other chart types which have different data requirements
- The change is localized to a single validation function with clear, readable conditional logic
1 file reviewed, 1 comment
| xAlias.some((x: any) => data.value[0][0][x] != null) || | ||
| yAlias.some((y: any) => data.value[0][0][y] != null)) |
There was a problem hiding this comment.
syntax: Missing closing parenthesis - the OR condition with yAlias.some() should be wrapped in the same parentheses as the xAlias.some() condition for the single-row case.
| xAlias.some((x: any) => data.value[0][0][x] != null) || | |
| yAlias.some((y: any) => data.value[0][0][y] != null)) | |
| xAlias.some((x: any) => data.value[0][0][x] != null) || | |
| yAlias.some((y: any) => data.value[0][0][y] != null)) |
2 participants
Bug fix
Fix table chart no-data validation
Separate table logic from other charts
Ensure presence check on x/y aliases
Prevent false negatives with single row
File Walkthrough
PanelSchemaRenderer.vue
Refine table chart data validation logicweb/src/components/dashboards/PanelSchemaRenderer.vue