charts toolbox can be sped up using SHIFT, ALT, CONTROL keys #246
Costa Tsaousis (ktsaou) committed
Apr 16, 2016 at 20:05 UTC
b3fa2f8b596c989e0bde1097c613f3e1053e3d6e
2 files changed
+30
-12
web/dashboard.js
+29
-11
@@ -243,6 +243,8 @@
243
destroy_on_hide: false, // destroy charts when they are not visible
244
245
show_help: true, // when enabled the charts will show some help
246
+ show_help_delay_show_ms: 500,
247
+ show_help_delay_hide_ms: 0,
248
249
eliminate_zero_dimensions: true, // do not show dimensions with just zeros
250
@@ -260,6 +262,9 @@
262
color_fill_opacity_stacked: 0.8,
263
264
pan_and_zoom_step: 0.1, // the increment when panning and zooming with the toolbox
265
+ pan_and_zoom_step_multiplier_shift: 2,
266
+ pan_and_zoom_step_multiplier_alt: 5,
267
+ pan_and_zoom_step_multiplier_control: 10,
268
269
setOptionCallback: function() { ; }
270
},
@@ -2149,6 +2154,18 @@
2154
this.element_legend.innerHTML = '';
2155
2156
if(this.library.toolboxPanAndZoom !== null) {
2157
+
2158
+ function get_pan_and_zoom_step(event) {
2159
+ if (event.shiftKey)
2160
+ return NETDATA.options.current.pan_and_zoom_step * NETDATA.options.current.pan_and_zoom_step_multiplier_shift;
2161
+ else if (event.altKey)
2162
+ return NETDATA.options.current.pan_and_zoom_step * NETDATA.options.current.pan_and_zoom_step_multiplier_alt;
2163
+ else if (event.ctrlKey)
2164
+ return NETDATA.options.current.pan_and_zoom_step * NETDATA.options.current.pan_and_zoom_step_multiplier_control;
2165
+ else
2166
+ return NETDATA.options.current.pan_and_zoom_step;
2167
+ }
2168
+
2169
this.element_legend_childs.toolbox.className += ' netdata-legend-toolbox';
2170
this.element.appendChild(this.element_legend_childs.toolbox);
2171
@@ -2157,7 +2174,8 @@
2174
this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_left);
2175
this.element_legend_childs.toolbox_left.onclick = function(e) {
2176
e.preventDefault();
2160
- var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step;
2177
+
2178
+ var dt = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
2179
var before = that.view_before - dt;
2180
var after = that.view_after - dt;
2181
if(after >= that.netdata_first)
@@ -2170,7 +2188,7 @@
2188
html: true,
2189
trigger: 'hover',
2190
placement: 'bottom',
2173
- delay: 100,
2191
+ delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2192
title: 'Pan Left',
2193
content: 'Pan the chart to the left. You can also <b>drag it</b> with your mouse or your finger (on touch devices).<br/><small>Help, can be disabled from the settings.</small>'
2194
});
@@ -2190,7 +2208,7 @@
2208
html: true,
2209
trigger: 'hover',
2210
placement: 'bottom',
2193
- delay: 100,
2211
+ delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2212
title: 'Chart Reset',
2213
content: 'Reset all the charts to their default auto-refreshing state. You can also <b>double click</b> the chart contents with your mouse or your finger (on touch devices).<br/><small>Help, can be disabled from the settings.</small>'
2214
});
@@ -2200,7 +2218,7 @@
2218
this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_right);
2219
this.element_legend_childs.toolbox_right.onclick = function(e) {
2220
e.preventDefault();
2203
- var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step;
2221
+ var dt = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
2222
var before = that.view_before + dt;
2223
var after = that.view_after + dt;
2224
if(before <= that.netdata_last)
@@ -2213,7 +2231,7 @@
2231
html: true,
2232
trigger: 'hover',
2233
placement: 'bottom',
2216
- delay: 100,
2234
+ delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2235
title: 'Pan Right',
2236
content: 'Pan the chart to the right. You can also <b>drag it</b> with your mouse or your finger (on touch devices).<br/><small>Help, can be disabled from the settings.</small>'
2237
});
@@ -2224,7 +2242,7 @@
2242
this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomin);
2243
this.element_legend_childs.toolbox_zoomin.onclick = function(e) {
2244
e.preventDefault();
2227
- var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step;
2245
+ var dt = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
2246
var before = that.view_before - dt;
2247
var after = that.view_after + dt;
2248
that.library.toolboxPanAndZoom(that, after, before);
@@ -2236,7 +2254,7 @@
2254
html: true,
2255
trigger: 'hover',
2256
placement: 'bottom',
2239
- delay: 100,
2257
+ delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2258
title: 'Chart Zoom In',
2259
content: 'Zoom in the chart. You can also press SHIFT and select an area of the chart to zoom in. On Chrome and Opera, you can press the SHIFT or the ALT keys and then use the mouse wheel to zoom in or out.<br/><small>Help, can be disabled from the settings.</small>'
2260
});
@@ -2246,7 +2264,7 @@
2264
this.element_legend_childs.toolbox.appendChild(this.element_legend_childs.toolbox_zoomout);
2265
this.element_legend_childs.toolbox_zoomout.onclick = function(e) {
2266
e.preventDefault();
2249
- var dt = (that.view_before - that.view_after) * NETDATA.options.current.pan_and_zoom_step;
2267
+ var dt = (that.view_before - that.view_after) * get_pan_and_zoom_step(e);
2268
var before = that.view_before + dt;
2269
var after = that.view_after - dt;
2270
@@ -2259,7 +2277,7 @@
2277
html: true,
2278
trigger: 'hover',
2279
placement: 'bottom',
2262
- delay: 100,
2280
+ delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2281
title: 'Chart Zoom Out',
2282
content: 'Zoom out the chart. On Chrome and Opera, you can also press the SHIFT or the ALT keys and then use the mouse wheel to zoom in or out.<br/><small>Help, can be disabled from the settings.</small>'
2283
});
@@ -2293,7 +2311,7 @@
2311
html: true,
2312
trigger: 'hover',
2313
placement: 'bottom',
2296
- delay: 100,
2314
+ delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2315
title: 'Chart Resize',
2316
content: 'Drag this point with your mouse or your finger (on touch devices), to resize the chart vertically. You can also <b>double click it</b> or <b>double tap it</b> to reset between 2 states: the default and the one that fits all the values.<br/><small>Help, can be disabled from the settings.</small>'
2317
});
@@ -2338,7 +2356,7 @@
2356
trigger: 'hover',
2357
placement: 'bottom',
2358
title: 'Chart Legend',
2341
- delay: 100,
2359
+ delay: { show: NETDATA.options.current.show_help_delay_show_ms, hide: NETDATA.options.current.show_help_delay_hide_ms },
2360
content: 'You can click or tap on the values or the labels to select dimentions. By pressing SHIFT or CONTROL, you can enable or disable multiple dimensions.<br/><small>Help, can be disabled from the settings.</small>'
2361
});
2362
}
web/index.html
+1
-1
@@ -330,7 +330,7 @@
330
</script>
331
332
<!-- load the dashboard manager - it will do the rest -->
333
- <script type="text/javascript" src="dashboard.js?v27"></script>
333
+ <script type="text/javascript" src="dashboard.js?v28"></script>
334
</head>
335
336
<body data-spy="scroll" data-target="#sidebar">