easyPieChart integration
Costa Tsaousis (ktsaou) committed
Jan 5, 2016 at 03:45 UTC
5b9fda02b0685047fa6a601ec2b78f030f4b175c
4 files changed
+179
-51
src/rrd2json.c
+36
-20
@@ -474,7 +474,9 @@ void rrdr_json_wrapper_begin(RRDR *r, BUFFER *wb, uint32_t format, uint32_t opti
474
" %supdate_every%s: %d,\n"
475
" %sfirst_entry%s: %u,\n"
476
" %slast_entry%s: %u,\n"
477
- " %smin%s: "
477
+ " %sbefore%s: %u,\n"
478
+ " %safter%s: %u,\n"
479
+ " %sdimension_names%s: ["
480
, kq, kq
481
, kq, kq, sq, r->st->id, sq
482
, kq, kq, sq, r->st->name, sq
@@ -482,15 +484,6 @@ void rrdr_json_wrapper_begin(RRDR *r, BUFFER *wb, uint32_t format, uint32_t opti
484
, kq, kq, r->st->update_every
485
, kq, kq, rrdset_first_entry_t(r->st)
486
, kq, kq, rrdset_last_entry_t(r->st)
485
- , kq, kq);
486
-
487
- buffer_rrd_value(wb, r->min);
488
- buffer_sprintf(wb, ",\n %smax%s: ", kq, kq);
489
- buffer_rrd_value(wb, r->max);
490
- buffer_sprintf(wb, ",\n"
491
- " %sbefore%s: %u,\n"
492
- " %safter%s: %u,\n"
493
- " %sdimension_names%s: ["
487
, kq, kq, r->before
488
, kq, kq, r->after
489
, kq, kq);
@@ -612,14 +605,24 @@ void rrdr_json_wrapper_end(RRDR *r, BUFFER *wb, uint32_t format, uint32_t option
605
if(r) {;}
606
if(format) {;}
607
615
- char sq[2] = ""; // string quote
608
+ char kq[2] = "", // key quote
609
+ sq[2] = ""; // string quote
610
617
- if( options & RRDR_OPTION_GOOGLE_JSON )
611
+ if( options & RRDR_OPTION_GOOGLE_JSON ) {
612
+ kq[0] = '\0';
613
sq[0] = '\'';
619
- else
614
+ }
615
+ else {
616
+ kq[0] = '"';
617
sq[0] = '"';
618
+ }
619
620
if(string_value) buffer_strcat(wb, sq);
621
+
622
+ buffer_sprintf(wb, ",\n %smin%s: ", kq, kq);
623
+ buffer_rrd_value(wb, r->min);
624
+ buffer_sprintf(wb, ",\n %smax%s: ", kq, kq);
625
+ buffer_rrd_value(wb, r->max);
626
buffer_strcat(wb, "\n}\n");
627
}
628
@@ -663,7 +666,7 @@ static void rrdr2json(RRDR *r, BUFFER *wb, uint32_t options, int datatable)
666
snprintf(post_value, 100, "}");
667
snprintf(post_line, 100, "]}");
668
snprintf(data_begin, 100, "\n ],\n %srows%s:\n [\n", kq, kq);
666
- snprintf(finish, 100, "\n ]\n}\n");
669
+ snprintf(finish, 100, "\n ]\n}");
670
671
snprintf(overflow_annotation, 200, ",{%sv%s:%sRESET OR OVERFLOW%s},{%sv%s:%sThe counters have been wrapped.%s}", kq, kq, sq, sq, kq, kq, sq, sq);
672
snprintf(normal_annotation, 200, ",{%sv%s:null},{%sv%s:null}", kq, kq, kq, kq);
@@ -701,7 +704,7 @@ static void rrdr2json(RRDR *r, BUFFER *wb, uint32_t options, int datatable)
704
else
705
snprintf(post_line, 100, "]");
706
snprintf(data_begin, 100, "],\n %sdata%s:\n [\n", kq, kq);
704
- snprintf(finish, 100, "\n ]\n}\n");
707
+ snprintf(finish, 100, "\n ]\n}");
708
709
buffer_sprintf(wb, "{\n %slabels%s: [", kq, kq);
710
buffer_sprintf(wb, "%stime%s", sq, sq);
@@ -933,7 +936,7 @@ static void rrdr2ssv(RRDR *r, BUFFER *wb, uint32_t options, const char *prefix,
936
calculated_number *cn = &r->v[ i * r->d ];
937
uint8_t *co = &r->o[ i * r->d ];
938
936
- calculated_number sum = 0, min = 0, max = 0;
939
+ calculated_number sum = 0, min = 0, max = 0, v;
940
int all_null = 1, init = 1;
941
942
// for each dimension
@@ -974,10 +977,23 @@ static void rrdr2ssv(RRDR *r, BUFFER *wb, uint32_t options, const char *prefix,
977
else
978
buffer_strcat(wb, "null");
979
}
977
- else if(options & RRDR_OPTION_MIN2MAX)
978
- buffer_rrd_value(wb, max - min);
979
- else
980
- buffer_rrd_value(wb, sum);
980
+ else {
981
+ if(options & RRDR_OPTION_MIN2MAX)
982
+ v = max - min;
983
+ else
984
+ v = sum;
985
+
986
+ if(likely(i != start)) {
987
+ if(r->min > v) r->min = v;
988
+ if(r->max < v) r->max = v;
989
+ }
990
+ else {
991
+ r->min = v;
992
+ r->max = v;
993
+ }
994
+
995
+ buffer_rrd_value(wb, v);
996
+ }
997
}
998
buffer_strcat(wb, suffix);
999
//info("RRD2SSV(): %s: END", r->st->id);
web/dashboard.css
+41
@@ -314,3 +314,44 @@ html {
314
width: auto !important;
315
height: auto !important;
316
}
317
+
318
+.easyPieChart {
319
+ position: relative;
320
+ text-align: center;
321
+}
322
+
323
+.easyPieChart canvas {
324
+ position: absolute;
325
+ top: 0;
326
+ left: 0;
327
+}
328
+
329
+.easyPieChartLabel {
330
+ display: inline-block;
331
+ position: absolute;
332
+ float: left;
333
+ width: 100%;
334
+ text-align: center;
335
+ color: #333333;
336
+ font-weight: normal;
337
+}
338
+
339
+.easyPieChartTitle {
340
+ display: inline-block;
341
+ position: absolute;
342
+ float: left;
343
+ width: 100%;
344
+ text-align: center;
345
+ color: #999999;
346
+ font-weight: bold;
347
+}
348
+
349
+.easyPieChartUnits {
350
+ display: inline-block;
351
+ position: absolute;
352
+ float: left;
353
+ width: 100%;
354
+ text-align: center;
355
+ color: #333333;
356
+ font-weight: normal;
357
+}
web/dashboard.html
+1
-1
@@ -38,7 +38,7 @@ This is a template for building custom dashboards. To build a dashboard you just
38
data-after="-600"
39
></div>
40
</body>
41
-<script type="text/javascript" src="http://netdata.server:19999/dashboard.js"></script>
41
+<script type="text/javascript" src="http://netdata.server:19999/dashboard.js"></script>
42
</html>
43
</pre>
44
web/dashboard.js
+101
-30
@@ -220,7 +220,7 @@
220
focus: false,
221
visibility: false,
222
chart_data_url: false,
223
- chart_errors: false,
223
+ chart_errors: true,
224
chart_timing: false,
225
chart_calls: false,
226
libraries: false,
@@ -2082,7 +2082,7 @@
2082
this.data_url += "&format=" + this.library.format();
2083
this.data_url += "&points=" + this.data_points.toString();
2084
this.data_url += "&group=" + this.method;
2085
- this.data_url += "&options=" + this.library.options();
2085
+ this.data_url += "&options=" + this.library.options(this);
2086
this.data_url += '|jsonwrap';
2087
2088
if(NETDATA.options.current.eliminate_zero_dimensions === true)
@@ -3899,33 +3899,104 @@
3899
}
3900
};
3901
3902
- NETDATA.easypiechartChartUpdate = function(state, data) {
3902
+ NETDATA.easypiechartClearSelection = function(state) {
3903
+ var chart = $(state.element_chart);
3904
+ state.easyPieChartLabel.innerHTML = '';
3905
+ chart.data('easyPieChart').update(0);
3906
+ return true;
3907
+ };
3908
+
3909
+ NETDATA.easypiechartSetSelection = function(state, t) {
3910
+ var chart = $(state.element_chart);
3911
+
3912
+ if(t < state.data_after || t > state.data_before)
3913
+ return NETDATA.easypiechartClearSelection(state);
3914
+
3915
+ var slot = state.data.result.length - 1 - (t - state.data_after) / state.data_update_every;
3916
+ if(slot < 0 || slot >= state.data.result.length)
3917
+ return NETDATA.easypiechartClearSelection(state);
3918
3904
- state.easypiechart_instance.update();
3919
+ var value = state.data.result[slot];
3920
+ var max = state.data.max;
3921
+ var pcent = Math.round(value * 100 / max);
3922
+
3923
+ state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
3924
+ chart.data('easyPieChart').update(pcent);
3925
+
3926
+ return true;
3927
};
3928
3907
- NETDATA.easypiechartChartCreate = function(state, data) {
3908
- var self = $(state.element);
3929
+ NETDATA.easypiechartChartUpdate = function(state, data) {
3930
+ var chart = $(state.element_chart);
3931
+
3932
+ var value = data.result[0];
3933
+ var max = data.max;
3934
+ var pcent = Math.round(value * 100 / max);
3935
3910
- var value = 10;
3911
- var pcent = 10;
3936
+ // console.log('value = ' + value + ' max = ' + max + ' pcent = ' + pcent);
3937
3913
- $(state.element_chart).data('data-percent', pcent);
3914
- data.element_chart.innerHTML = value.toString();
3938
+ state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
3939
+ chart.data('easyPieChart').update(pcent);
3940
+ };
3941
3916
- state.easypiechart_instance = new EasyPieChart(state.element_chart, {
3917
- barColor: self.data('easypiechart-barcolor') || '#ef1e25',
3942
+ NETDATA.easypiechartChartCreate = function(state, data) {
3943
+ var self = $(state.element);
3944
+ var chart = $(state.element_chart);
3945
+
3946
+ var value = data.result[0];
3947
+ var max = data.max;
3948
+ var pcent = Math.round(value * 100 / max);
3949
+
3950
+ // console.log('value = ' + value + ' max = ' + max + ' pcent = ' + pcent);
3951
+ chart.data('data-percent', pcent);
3952
+
3953
+ var size = Math.min(state.chartWidth(), state.chartHeight());
3954
+ var stroke = size / 15;
3955
+ if(stroke < 3) stroke = 3;
3956
+
3957
+ var valuefontsize = Math.floor((size * 2 / 3) / 6);
3958
+ var valuetop = Math.round((size - valuefontsize - 10) / 2);
3959
+ state.easyPieChartLabel = document.createElement('span');
3960
+ state.easyPieChartLabel.className = 'easyPieChartLabel';
3961
+ state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
3962
+ state.easyPieChartLabel.style.fontSize = valuefontsize + 'px';
3963
+ state.easyPieChartLabel.style.top = valuetop.toString() + 'px';
3964
+ state.element_chart.appendChild(state.easyPieChartLabel);
3965
+
3966
+ var titlefontsize = Math.floor((size * 2 / 3) / 10);
3967
+ var titletop = Math.round(valuetop - titlefontsize - (size / 20));
3968
+ state.easyPieChartTitle = document.createElement('span');
3969
+ state.easyPieChartTitle.className = 'easyPieChartTitle';
3970
+ state.easyPieChartTitle.innerHTML = state.chart.name;
3971
+ state.easyPieChartTitle.style.fontSize = titlefontsize + 'px';
3972
+ state.easyPieChartTitle.style.lineHeight = titlefontsize + 'px';
3973
+ state.easyPieChartTitle.style.top = titletop.toString() + 'px';
3974
+ state.element_chart.appendChild(state.easyPieChartTitle);
3975
+
3976
+ var unitfontsize = Math.floor((size * 2 / 3) / 10);
3977
+ var unittop = Math.round(valuetop + valuefontsize + (size / 20));
3978
+ state.easyPieChartUnits = document.createElement('span');
3979
+ state.easyPieChartUnits.className = 'easyPieChartUnits';
3980
+ state.easyPieChartUnits.innerHTML = state.chart.units;
3981
+ state.easyPieChartUnits.style.fontSize = unitfontsize + 'px';
3982
+ state.easyPieChartUnits.style.top = unittop.toString() + 'px';
3983
+ state.element_chart.appendChild(state.easyPieChartUnits);
3984
+
3985
+ chart.easyPieChart({
3986
+ barColor: self.data('easypiechart-barcolor') || state.chartColors()[0], //'#ef1e25',
3987
trackColor: self.data('easypiechart-trackcolor') || '#f2f2f2',
3988
scaleColor: self.data('easypiechart-scalecolor') || '#dfe0e0',
3989
scaleLength: self.data('easypiechart-scalelength') || 5,
3990
lineCap: self.data('easypiechart-linecap') || 'round',
3922
- lineWidth: self.data('easypiechart-linewidth') || 3,
3991
+ lineWidth: self.data('easypiechart-linewidth') || stroke,
3992
trackWidth: self.data('easypiechart-trackwidth') || undefined,
3924
- size: self.data('easypiechart-size') || Math.min(state.chartWidth(), state.chartHeight()),
3993
+ size: self.data('easypiechart-size') || size,
3994
rotate: self.data('easypiechart-rotate') || 0,
3926
- animate: self.data('easypiechart-rotate') || {duration: 0, enabled: false},
3995
+ animate: self.data('easypiechart-rotate') || {duration: data.view_update_every * 1000 / 2, enabled: true},
3996
easing: self.data('easypiechart-easing') || undefined
3928
- })
3997
+ });
3998
+
3999
+ chart.data('easyPieChart').update(pcent);
4000
};
4001
4002
// ----------------------------------------------------------------------------------------------------------------
@@ -3978,8 +4049,8 @@
4049
create: NETDATA.sparklineChartCreate,
4050
update: NETDATA.sparklineChartUpdate,
4051
resize: null,
3981
- setSelection: function(t) { return true; },
3982
- clearSelection: function() { return true; },
4052
+ setSelection: undefined, // function(state, t) { return true; },
4053
+ clearSelection: undefined, // function(state) { return true; },
4054
initialized: false,
4055
enabled: true,
4056
format: function(state) { return 'array'; },
@@ -3995,8 +4066,8 @@
4066
create: NETDATA.peityChartCreate,
4067
update: NETDATA.peityChartUpdate,
4068
resize: null,
3998
- setSelection: function(t) { return true; },
3999
- clearSelection: function() { return true; },
4069
+ setSelection: undefined, // function(state, t) { return true; },
4070
+ clearSelection: undefined, // function(state) { return true; },
4071
initialized: false,
4072
enabled: true,
4073
format: function(state) { return 'ssvcomma'; },
@@ -4012,8 +4083,8 @@
4083
create: NETDATA.morrisChartCreate,
4084
update: NETDATA.morrisChartUpdate,
4085
resize: null,
4015
- setSelection: function(t) { return true; },
4016
- clearSelection: function() { return true; },
4086
+ setSelection: undefined, // function(state, t) { return true; },
4087
+ clearSelection: undefined, // function(state) { return true; },
4088
initialized: false,
4089
enabled: true,
4090
format: function(state) { return 'json'; },
@@ -4029,8 +4100,8 @@
4100
create: NETDATA.googleChartCreate,
4101
update: NETDATA.googleChartUpdate,
4102
resize: null,
4032
- setSelection: function(t) { return true; },
4033
- clearSelection: function() { return true; },
4103
+ setSelection: undefined, //function(state, t) { return true; },
4104
+ clearSelection: undefined, //function(state) { return true; },
4105
initialized: false,
4106
enabled: true,
4107
format: function(state) { return 'datatable'; },
@@ -4046,8 +4117,8 @@
4117
create: NETDATA.raphaelChartCreate,
4118
update: NETDATA.raphaelChartUpdate,
4119
resize: null,
4049
- setSelection: function(t) { return true; },
4050
- clearSelection: function() { return true; },
4120
+ setSelection: undefined, // function(state, t) { return true; },
4121
+ clearSelection: undefined, // function(state) { return true; },
4122
initialized: false,
4123
enabled: true,
4124
format: function(state) { return 'json'; },
@@ -4063,12 +4134,12 @@
4134
create: NETDATA.easypiechartChartCreate,
4135
update: NETDATA.easypiechartChartUpdate,
4136
resize: null,
4066
- setSelection: function(t) { return true; },
4067
- clearSelection: function() { return true; },
4137
+ setSelection: NETDATA.easypiechartSetSelection,
4138
+ clearSelection: NETDATA.easypiechartClearSelection,
4139
initialized: false,
4140
enabled: true,
4070
- format: function(state) { return 'json'; },
4071
- options: function(state) { return ''; },
4141
+ format: function(state) { return 'array'; },
4142
+ options: function(state) { if(state.chart.chart_type === 'stacked') return ''; else return 'min2max'; },
4143
legend: function(state) { return null; },
4144
autoresize: function(state) { return false; },
4145
max_updates_to_recreate: function(state) { return 5000; },