diff options
| author | Arthur de Jong <arthur@arthurdejong.org> | 2023-07-29 17:44:37 +0200 |
|---|---|---|
| committer | Arthur de Jong <arthur@arthurdejong.org> | 2023-07-29 17:48:08 +0200 |
| commit | 886dd498e9323eba1c379100bb40cc8e082581a9 (patch) | |
| tree | 6f08b540cb28ba1f4cca65917274ace476f43b54 | |
| parent | 1aa9d67a9205b35639a1e59f1b566c458bece5a0 (diff) | |
Add buttons to toggle selection of values in graph
This adds "Select all", "Toggle selection" and "Select none" buttons to
the legend to allow bulk enabling and disabling individual metrics in
graphs.
This also switches to using Plotly.newPlot() over Plotly.redraw() (or
Plotly.react()) because Plotly has some issues if all traces are removed
from a graph and later re-added.
| -rw-r--r-- | src/index.html | 9 | ||||
| -rw-r--r-- | src/munin-plot.js | 62 |
2 files changed, 67 insertions, 4 deletions
diff --git a/src/index.html b/src/index.html index d5281af..2a6d9d7 100644 --- a/src/index.html +++ b/src/index.html @@ -79,7 +79,14 @@ </div> <div class="card-rightbody"> <div class="container-fluid px-0"> - <div class="row graphtitle small"></div> + <div class="row small"> + <div class="col graphtitle"></div> + <div class="col text-end"> + <span class="selectall mx-2" title="Select all"><i class="fa-solid fa-circle-check fa-xs"></i></span> + <span class="selecttoggle mx-2" title="Toggle selection"><i class="fa-solid fa-circle-half-stroke fa-xs"></i></span> + <span class="selectnone mx-2" title="Select none"><i class="fa-regular fa-circle fa-xs"></i></span> + </div> + </div> <div class="row"> <div class="myplot col col-8"> <div class="loading loading-small"></div> diff --git a/src/munin-plot.js b/src/munin-plot.js index ae35c60..2d6359a 100644 --- a/src/munin-plot.js +++ b/src/munin-plot.js @@ -332,9 +332,9 @@ $(document).ready(function () { const legend = clone.find('.mylegend') plot.graph = graph // update graph title - clone.find('.graphtitle').append($('<div>').addClass('col').text(graph.host + ' / ') + clone.find('.graphtitle').text(graph.host + ' / ') .append($('<b>').text(graph.graph_title)) - .attr('title', graph.graph_info || '')) + .attr('title', graph.graph_info || '') // set the size changing actions clone.find('.sizesm').click(function () { clone.find('.sizeactive').removeClass('sizeactive') @@ -369,6 +369,62 @@ $(document).ready(function () { saveCurrentGraphs() }) }) + // set the selection changing actions + clone.find('.selectall').click(function () { + if (plot.data) { + traces.slice().reverse().forEach(function (trace) { + if (trace.showlegend !== false) { + plot.legendbyfield[trace.field_name].style.opacity = 1 + plot.data.forEach(function (t) { + if (t.field_name === trace.field_name) { + t.visible = true + } + }) + } + }) + saveCurrentGraphs() + Plotly.newPlot(plot, plot.data, plot.layout, plot.config) + } + }) + clone.find('.selecttoggle').click(function () { + if (plot.data) { + traces.slice().reverse().forEach(function (trace) { + if (trace.showlegend !== false) { + const visible = (trace.visible === false) + plot.legendbyfield[trace.field_name].style.opacity = visible ? 1 : 0.2 + plot.data.forEach(function (t) { + if (t.field_name === trace.field_name) { + t.visible = visible + } + }) + } + }) + saveCurrentGraphs() + Plotly.newPlot(plot, plot.data, plot.layout, plot.config) + } + }) + clone.find('.selectnone').click(function () { + if (plot.data) { + traces.slice().reverse().forEach(function (trace) { + if (trace.field_name === 'idle') { + console.log(trace) + console.log(trace.name, trace.field_name, trace.visible) + } + }) + traces.slice().reverse().forEach(function (trace) { + if (trace.showlegend !== false) { + plot.legendbyfield[trace.field_name].style.opacity = 0.2 + plot.data.forEach(function (t) { + if (t.field_name === trace.field_name) { + t.visible = false + } + }) + } + }) + saveCurrentGraphs() + Plotly.newPlot(plot, plot.data, plot.layout, plot.config) + } + }) // set the wanted size $(plot).addClass('plot-' + size) legend.addClass('legend-' + size) @@ -479,7 +535,7 @@ $(document).ready(function () { } }) saveCurrentGraphs() - Plotly.redraw(plot) + Plotly.newPlot(plot, plot.data, plot.layout, plot.config) } }) // highlight the trace by lowering the opacity of the others traces |