netbird/gvisor
0
0
Fork 0
mirror of https://github.com/netbirdio/gvisor.git synced 2026-05-22 17:12:49 -07:00
Code Issues Packages Projects Releases Wiki Activity

Metrics visualization: Link all charts' X axis together.

Browse Source 
This makes it such that hovering over the X axis on one chart shows the same
point on the other charts, and that zooming in on one chart zooms in on all
the others as well.

Sadly this setting doesn't seem to be exposed in the Go bindings of echarts,
so this works by injecting JavaScript code that sets the linkage.

PiperOrigin-RevId: 648519357
This commit is contained in:
Etienne Perot
2024-07-01 16:31:02 -07:00
committed by gVisor bot
parent bcc785fc78
commit 06e9d2b454
1 changed files with 25 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/metricsviz/metricsviz.go
+25 -1
View File
@@ -351,7 +351,7 @@ func (c *chart) Charter() (components.Charter, error) {
}),
charts.WithDataZoomOpts(opts.DataZoom{Type: "inside", XAxisIndex: 0}),
charts.WithDataZoomOpts(opts.DataZoom{Type: "slider", XAxisIndex: 0}),
charts.WithDataZoomOpts(opts.DataZoom{Type: "inside", YAxisIndex: 0}),
charts.WithDataZoomOpts(opts.DataZoom{Type: "inside", YAxisIndex: []int{}}),
charts.WithTooltipOpts(opts.Tooltip{Show: true, Trigger: "axis"}),
charts.WithToolboxOpts(opts.Toolbox{
Show: true,
@@ -364,6 +364,21 @@ func (c *chart) Charter() (components.Charter, error) {
return lineChart, nil
}
const connectAllChartsJavascript = `
<script type="text/javascript">
let all_charts = [];
document.querySelectorAll('canvas, div').forEach(function(element) {
const maybe_chart = echarts.getInstanceByDom(element);
if (maybe_chart) {
all_charts.push(maybe_chart);
}
});
if (all_charts.length > 1) {
echarts.connect(all_charts);
}
</script>
`
// ToHTML generates an HTML page with charts of the metrics data.
func (d *Data) ToHTML(opts HTMLOptions) (string, error) {
page := components.NewPage()
@@ -454,6 +469,15 @@ func (d *Data) ToHTML(opts HTMLOptions) (string, error) {
}
headTagFinishIndex := headTagIndex + len(headTag)
html = html[:headTagFinishIndex] + "\n<!--\n" + htmlRawLogsPrefix + "\n" + d.rawLogs + "\n" + htmlRawLogsSuffix + "\n-->\n" + html[headTagFinishIndex:]
// Insert a script to link the charts' X axis together.
const endBodyTag = "</body>"
endBodyTagIndex := strings.Index(html, endBodyTag)
if endBodyTagIndex == -1 {
return "", fmt.Errorf("no </body> tag found in HTML")
}
html = html[:endBodyTagIndex] + connectAllChartsJavascript + html[endBodyTagIndex:]
return html, nil
}