feat: enhancement of dashboard custom chart with examples #9606
+3,733
−392
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
944a65b to
23c5314
Compare
Contributor
|
Failed to generate code suggestions for PR |
eab0d14 to
228e999
Compare
Contributor
|
Failed to generate code suggestions for PR |
Contributor
Greptile OverviewGreptile SummaryThis PR significantly enhances OpenObserve's dashboard custom chart functionality by introducing a comprehensive template library with 25 pre-built chart examples. The enhancement includes a new visual chart selector interface that allows users to browse chart categories (Line, Bar, Pie, Scatter, Radar, 3D, etc.), preview chart types with images, and apply templates that include both example SQL queries and corresponding ECharts JavaScript code. The implementation adds internationalization support across 11 languages, introduces a dynamic template loading system for performance optimization, and includes a confirmation dialog to prevent accidental loss of existing chart code. The enhancement transforms custom chart creation from requiring deep ECharts knowledge to a user-friendly template selection process. Important Files Changed
Confidence score: 4/5
|
| option = { | ||
| tooltip: { | ||
| trigger: 'item', | ||
| formatter: '{a} <br/>{b} : {c}%' |
Contributor
There was a problem hiding this comment.
logic: formatter displays percentage but the data processing doesn't convert values to percentages
Suggested change
| formatter: '{a} <br/>{b} : {c}%' | |
| formatter: '{a} <br/>{b} : {c}' |
Should the processData function calculate percentages or should the formatter be updated to display raw values?
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/components/dashboards/addPanel/customChartExamples/customChartTemplates/funnelCustomize.ts
Line: 57:57
Comment:
**logic:** formatter displays percentage but the data processing doesn't convert values to percentages
```suggestion
formatter: '{a} <br/>{b} : {c}'
```
Should the processData function calculate percentages or should the formatter be updated to display raw values?
How can I resolve this? If you propose a fix, please make it concise.
.../components/dashboards/addPanel/customChartExamples/customChartTemplates/scatter3dDataset.ts
Outdated
Show resolved
Hide resolved
| radius: [30, '80%'] | ||
| }, | ||
| angleAxis: { | ||
| max: Math.max(...values) * 1.2, |
Contributor
There was a problem hiding this comment.
logic: Potential runtime error if values array is empty - Math.max(...[]) returns -Infinity
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/components/dashboards/addPanel/customChartExamples/customChartTemplates/barPolarStackRadial.ts
Line: 44:44
Comment:
**logic:** Potential runtime error if values array is empty - Math.max(...[]) returns -Infinity
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
11
to
16
| SELECT 'Metric A' as metric, 'Series 2' as series, 70 as value | ||
| UNION ALL | ||
| SELECT 'Metric B' as metric, 'Series 2' as series, 85 as value | ||
| UNION ALL | ||
| SELECT 'Metric C' as metric, 'Series 2' as series, 60 as value | ||
| UNION ALL |
Contributor
There was a problem hiding this comment.
syntax: Missing 'from default' clause in these UNION statements - should be consistent with lines 3-9
Suggested change
| SELECT 'Metric A' as metric, 'Series 2' as series, 70 as value | |
| UNION ALL | |
| SELECT 'Metric B' as metric, 'Series 2' as series, 85 as value | |
| UNION ALL | |
| SELECT 'Metric C' as metric, 'Series 2' as series, 60 as value | |
| UNION ALL | |
| SELECT 'Metric A' as metric, 'Series 2' as series, 70 as value from default | |
| UNION ALL | |
| SELECT 'Metric B' as metric, 'Series 2' as series, 85 as value from default | |
| UNION ALL | |
| SELECT 'Metric C' as metric, 'Series 2' as series, 60 as value from default | |
| UNION ALL |
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/components/dashboards/addPanel/customChartExamples/customChartTemplates/radarMultiple2.ts
Line: 11:16
Comment:
**syntax:** Missing 'from default' clause in these UNION statements - should be consistent with lines 3-9
```suggestion
SELECT 'Metric A' as metric, 'Series 2' as series, 70 as value from default
UNION ALL
SELECT 'Metric B' as metric, 'Series 2' as series, 85 as value from default
UNION ALL
SELECT 'Metric C' as metric, 'Series 2' as series, 60 as value from default
UNION ALL
```
How can I resolve this? If you propose a fix, please make it concise.| return { name: 'root', children: rootNodes }; | ||
| }; | ||
| const treeData = processData(data[0], nameAlias, parentAlias, valueAlias); |
Contributor
There was a problem hiding this comment.
logic: assumes data[0] exists without nullcheck, could cause runtime error if data is empty
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/components/dashboards/addPanel/customChartExamples/customChartTemplates/treemapChart.ts
Line: 64:64
Comment:
**logic:** assumes data[0] exists without nullcheck, could cause runtime error if data is empty
How can I resolve this? If you propose a fix, please make it concise.| return { hours: [], days: [], chartData: [] }; | ||
| } | ||
|
|
||
| const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p']; |
Contributor
There was a problem hiding this comment.
style: Missing spaces in hour labels between '9a','10a','11a' affects readability
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/components/dashboards/addPanel/customChartExamples/customChartTemplates/bar3dPunchCard.ts
Line: 36:36
Comment:
**style:** Missing spaces in hour labels between '9a','10a','11a' affects readability
<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>
How can I resolve this? If you propose a fix, please make it concise.| return { hours, days, chartData: data }; | ||
| }; | ||
|
|
||
| const { hours, days, chartData } = processData(data[0]); |
Contributor
There was a problem hiding this comment.
logic: Accessing data[0] assumes the data structure without validation - this could cause runtime errors if data is empty or has a different structure
Suggested change
| const { hours, days, chartData } = processData(data[0]); | |
| const { hours, days, chartData } = processData(data && data.length > 0 ? data[0] : []); |
Should there be validation to ensure data[0] exists and has the expected structure?
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/components/dashboards/addPanel/customChartExamples/customChartTemplates/bar3dPunchCard.ts
Line: 51:51
Comment:
**logic:** Accessing `data[0]` assumes the data structure without validation - this could cause runtime errors if `data` is empty or has a different structure
```suggestion
const { hours, days, chartData } = processData(data && data.length > 0 ? data[0] : []);
```
Should there be validation to ensure data[0] exists and has the expected structure?
How can I resolve this? If you propose a fix, please make it concise.
Comment on lines
+3
to
+7
| const exampleQuery = `SELECT | ||
| kubernetes_namespace_name as "x_axis", | ||
| kubernetes_container_name as "y_axis", | ||
| code as "z_axis" | ||
| FROM "default"`; |
Contributor
There was a problem hiding this comment.
logic: The example query uses column aliases (x_axis, y_axis, z_axis) that don't match the aliases expected in the chart code (category, subcategory, value). This mismatch will cause the chart to display empty data.
Suggested change
| const exampleQuery = `SELECT | |
| kubernetes_namespace_name as "x_axis", | |
| kubernetes_container_name as "y_axis", | |
| code as "z_axis" | |
| FROM "default"`; | |
| const exampleQuery = `SELECT | |
| kubernetes_namespace_name as "category", | |
| kubernetes_container_name as "subcategory", | |
| code as "value" | |
| FROM "default"`; |
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/components/dashboards/addPanel/customChartExamples/customChartTemplates/dataTransformMultiplePie.ts
Line: 3:7
Comment:
**logic:** The example query uses column aliases (x_axis, y_axis, z_axis) that don't match the aliases expected in the chart code (category, subcategory, value). This mismatch will cause the chart to display empty data.
```suggestion
const exampleQuery = `SELECT
kubernetes_namespace_name as "category",
kubernetes_container_name as "subcategory",
code as "value"
FROM "default"`;
```
How can I resolve this? If you propose a fix, please make it concise.| // ----------------------------------------------------------- | ||
|
|
||
| const yData = chartData.map(item => item[yAlias]); | ||
| const zData = chartData.map(item => item[zAlias] || Math.random() * 100); |
Contributor
There was a problem hiding this comment.
logic: Using Math.random() as fallback creates misleading data when zAlias values are missing. Consider using 0 or null instead.
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/components/dashboards/addPanel/customChartExamples/customChartTemplates/bar3dDataset.ts
Line: 36:36
Comment:
**logic:** Using Math.random() as fallback creates misleading data when zAlias values are missing. Consider using 0 or null instead.
How can I resolve this? If you propose a fix, please make it concise.| }, | ||
| series: [{ | ||
| type: 'bar3D', | ||
| data: xData.map((x, i) => [i, i % yData.length, zData[i]]), |
Contributor
There was a problem hiding this comment.
logic: The data mapping logic assumes xData and yData have the same length and creates incorrect coordinate mappings. Should map actual category indices, not array indices.
Suggested change
| data: xData.map((x, i) => [i, i % yData.length, zData[i]]), | |
| data: chartData.map((item, i) => { | |
| const xIndex = [...new Set(xData)].indexOf(item[xAlias]); | |
| const yIndex = [...new Set(yData)].indexOf(item[yAlias]); | |
| return [xIndex, yIndex, item[zAlias] || 0]; | |
| }), |
Should this create a proper 3D grid mapping between unique x and y categories instead of using array indices?
Prompt To Fix With AI
This is a comment left during a code review.
Path: web/src/components/dashboards/addPanel/customChartExamples/customChartTemplates/bar3dDataset.ts
Line: 65:65
Comment:
**logic:** The data mapping logic assumes xData and yData have the same length and creates incorrect coordinate mappings. Should map actual category indices, not array indices.
```suggestion
data: chartData.map((item, i) => {
const xIndex = [...new Set(xData)].indexOf(item[xAlias]);
const yIndex = [...new Set(yData)].indexOf(item[yAlias]);
return [xIndex, yIndex, item[zAlias] || 0];
}),
```
Should this create a proper 3D grid mapping between unique x and y categories instead of using array indices?
How can I resolve this? If you propose a fix, please make it concise.
ktx-kirtan
approved these changes
Dec 14, 2025
…tomChartTemplates/scatter3dDataset.ts Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
504796e to
432c00b
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Design at: https://github.com/openobserve/designs/tree/main/customcharts