Add "text-only" chart renderer (#5971)
* Add "text-only" chart renderer * Add options for prefix, suffix, and number of decinal places to show
Daniel Lo Nigro committed
May 13, 2019 at 04:29 UTC
f3473aa8466d73e0a26b437b8494f45030eec89c
4 files changed
+120
web/gui/Makefile.am
+1
@@ -29,6 +29,7 @@ DASHBOARD_JS_FILES = \
29
src/dashboard.js/charting/d3pie.js \
30
src/dashboard.js/charting/d3.js \
31
src/dashboard.js/charting/peity.js \
32
+ src/dashboard.js/charting/textonly.js \
33
src/dashboard.js/charting.js \
34
src/dashboard.js/chart-registry.js \
35
src/dashboard.js/common.js \
web/gui/dashboard.js
+59
@@ -4194,6 +4194,23 @@ NETDATA.peityChartCreate = function (state, data) {
4194
return true;
4195
};
4196
4197
+// ----------------------------------------------------------------------------------------------------------------
4198
+// "Text-only" chart - Just renders the raw value to the DOM
4199
+
4200
+NETDATA.textOnlyCreate = function(state, data) {
4201
+ var decimalPlaces = NETDATA.dataAttribute(state.element, 'textonly-decimal-places', 1);
4202
+ var prefix = NETDATA.dataAttribute(state.element, 'textonly-prefix', '');
4203
+ var suffix = NETDATA.dataAttribute(state.element, 'textonly-suffix', '');
4204
+
4205
+ // Round based on number of decimal places to show
4206
+ var precision = Math.pow(10, decimalPlaces);
4207
+ var value = Math.round(data.result[0] * precision) / precision;
4208
+
4209
+ state.element.textContent = prefix + value + suffix;
4210
+ return true;
4211
+}
4212
+
4213
+NETDATA.textOnlyUpdate = NETDATA.textOnlyCreate;
4214
// Charts Libraries Registration
4215
4216
NETDATA.chartLibraries = {
@@ -4631,6 +4648,48 @@ NETDATA.chartLibraries = {
4648
void(state);
4649
return 'netdata-container-gauge';
4650
}
4651
+ },
4652
+ "textonly": {
4653
+ autoresize: function (state) {
4654
+ void(state);
4655
+ return false;
4656
+ },
4657
+ container_class: function (state) {
4658
+ void(state);
4659
+ return 'netdata-container';
4660
+ },
4661
+ create: NETDATA.textOnlyCreate,
4662
+ enabled: true,
4663
+ format: function (state) {
4664
+ void(state);
4665
+ return 'array';
4666
+ },
4667
+ initialized: true,
4668
+ initialize: function (callback) {
4669
+ callback();
4670
+ },
4671
+ legend: function (state) {
4672
+ void(state);
4673
+ return null;
4674
+ },
4675
+ max_updates_to_recreate: function (state) {
4676
+ void(state);
4677
+ return 5000;
4678
+ },
4679
+ options: function (state) {
4680
+ void(state);
4681
+ return 'absolute';
4682
+ },
4683
+ pixels_per_point: function (state) {
4684
+ void(state);
4685
+ return 3;
4686
+ },
4687
+ track_colors: function (state) {
4688
+ void(state);
4689
+ return false;
4690
+ },
4691
+ update: NETDATA.textOnlyUpdate,
4692
+ xssRegexIgnore: new RegExp('^/api/v1/data\.result$'),
4693
}
4694
};
4695
web/gui/src/dashboard.js/charting.js
+42
@@ -436,6 +436,48 @@ NETDATA.chartLibraries = {
436
void(state);
437
return 'netdata-container-gauge';
438
}
439
+ },
440
+ "textonly": {
441
+ autoresize: function (state) {
442
+ void(state);
443
+ return false;
444
+ },
445
+ container_class: function (state) {
446
+ void(state);
447
+ return 'netdata-container';
448
+ },
449
+ create: NETDATA.textOnlyCreate,
450
+ enabled: true,
451
+ format: function (state) {
452
+ void(state);
453
+ return 'array';
454
+ },
455
+ initialized: true,
456
+ initialize: function (callback) {
457
+ callback();
458
+ },
459
+ legend: function (state) {
460
+ void(state);
461
+ return null;
462
+ },
463
+ max_updates_to_recreate: function (state) {
464
+ void(state);
465
+ return 5000;
466
+ },
467
+ options: function (state) {
468
+ void(state);
469
+ return 'absolute';
470
+ },
471
+ pixels_per_point: function (state) {
472
+ void(state);
473
+ return 3;
474
+ },
475
+ track_colors: function (state) {
476
+ void(state);
477
+ return false;
478
+ },
479
+ update: NETDATA.textOnlyUpdate,
480
+ xssRegexIgnore: new RegExp('^/api/v1/data\.result$'),
481
}
482
};
483
web/gui/src/dashboard.js/charting/textonly.js
new
+18
@@ -0,0 +1,18 @@
1
+
2
+// ----------------------------------------------------------------------------------------------------------------
3
+// "Text-only" chart - Just renders the raw value to the DOM
4
+
5
+NETDATA.textOnlyCreate = function(state, data) {
6
+ var decimalPlaces = NETDATA.dataAttribute(state.element, 'textonly-decimal-places', 1);
7
+ var prefix = NETDATA.dataAttribute(state.element, 'textonly-prefix', '');
8
+ var suffix = NETDATA.dataAttribute(state.element, 'textonly-suffix', '');
9
+
10
+ // Round based on number of decimal places to show
11
+ var precision = Math.pow(10, decimalPlaces);
12
+ var value = Math.round(data.result[0] * precision) / precision;
13
+
14
+ state.element.textContent = prefix + value + suffix;
15
+ return true;
16
+}
17
+
18
+NETDATA.textOnlyUpdate = NETDATA.textOnlyCreate;
\ No newline at end of file