easyPieChart integration

diff --git a/src/rrd2json.c b/src/rrd2json.c
index ce5d26e35e044990e0a2bfe95c3df701e465a0be..dba258504d37dddb4ab0be41f8aeec540b3a4534 100755 (executable)
--- a/src/rrd2json.c
+++ b/src/rrd2json.c
@@ -474,7 +474,9 @@ void rrdr_json_wrapper_begin(RRDR *r, BUFFER *wb, uint32_t format, uint32_t opti
                        "       %supdate_every%s: %d,\n"
                        "       %sfirst_entry%s: %u,\n"
                        "       %slast_entry%s: %u,\n"
-                       "       %smin%s: "
+                       "       %sbefore%s: %u,\n"
+                       "       %safter%s: %u,\n"
+                       "       %sdimension_names%s: ["
                        , kq, kq
                        , kq, kq, sq, r->st->id, sq
                        , 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
                        , kq, kq, r->st->update_every
                        , kq, kq, rrdset_first_entry_t(r->st)
                        , kq, kq, rrdset_last_entry_t(r->st)
-                       , kq, kq);
-
-       buffer_rrd_value(wb, r->min);
-       buffer_sprintf(wb, ",\n %smax%s: ", kq, kq);
-       buffer_rrd_value(wb, r->max);
-       buffer_sprintf(wb, ",\n"
-                       "       %sbefore%s: %u,\n"
-                       "       %safter%s: %u,\n"
-                       "       %sdimension_names%s: ["
                        , kq, kq, r->before
                        , kq, kq, r->after
                        , kq, kq);
@@ -612,14 +605,24 @@ void rrdr_json_wrapper_end(RRDR *r, BUFFER *wb, uint32_t format, uint32_t option
        if(r) {;}
        if(format) {;}
 
-       char sq[2] = "";                                                // string quote
+       char kq[2] = "",                                        // key quote
+               sq[2] = "";                                             // string quote
 
-       if( options & RRDR_OPTION_GOOGLE_JSON )
+       if( options & RRDR_OPTION_GOOGLE_JSON ) {
+               kq[0] = '\0';
                sq[0] = '\'';
-       else
+       }
+       else {
+               kq[0] = '"';
                sq[0] = '"';
+       }
 
        if(string_value) buffer_strcat(wb, sq);
+
+       buffer_sprintf(wb, ",\n %smin%s: ", kq, kq);
+       buffer_rrd_value(wb, r->min);
+       buffer_sprintf(wb, ",\n %smax%s: ", kq, kq);
+       buffer_rrd_value(wb, r->max);
        buffer_strcat(wb, "\n}\n");
 }
 
@@ -663,7 +666,7 @@ static void rrdr2json(RRDR *r, BUFFER *wb, uint32_t options, int datatable)
                snprintf(post_value, 100, "}");
                snprintf(post_line,  100, "]}");
                snprintf(data_begin, 100, "\n   ],\n    %srows%s:\n     [\n", kq, kq);
-               snprintf(finish,     100, "\n   ]\n}\n");
+               snprintf(finish,     100, "\n   ]\n}");
 
                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);
                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)
                else
                        snprintf(post_line,  100, "]");
                snprintf(data_begin, 100, "],\n %sdata%s:\n     [\n", kq, kq);
-               snprintf(finish,     100, "\n   ]\n}\n");
+               snprintf(finish,     100, "\n   ]\n}");
 
                buffer_sprintf(wb, "{\n %slabels%s: [", kq, kq);
                buffer_sprintf(wb, "%stime%s", sq, sq);
@@ -933,7 +936,7 @@ static void rrdr2ssv(RRDR *r, BUFFER *wb, uint32_t options, const char *prefix,
                calculated_number *cn = &r->v[ i * r->d ];
                uint8_t *co = &r->o[ i * r->d ];
 
-               calculated_number sum = 0, min = 0, max = 0;
+               calculated_number sum = 0, min = 0, max = 0, v;
                int all_null = 1, init = 1;
 
                // for each dimension
@@ -974,10 +977,23 @@ static void rrdr2ssv(RRDR *r, BUFFER *wb, uint32_t options, const char *prefix,
                        else
                                buffer_strcat(wb, "null");
                }
-               else if(options & RRDR_OPTION_MIN2MAX)
-                       buffer_rrd_value(wb, max - min);
-               else
-                       buffer_rrd_value(wb, sum);
+               else {
+                       if(options & RRDR_OPTION_MIN2MAX)
+                               v = max - min;
+                       else
+                               v = sum;
+
+                       if(likely(i != start)) {
+                               if(r->min > v) r->min = v;
+                               if(r->max < v) r->max = v;
+                       }
+                       else {
+                               r->min = v;
+                               r->max = v;
+                       }
+
+                       buffer_rrd_value(wb, v);
+               }
        }
        buffer_strcat(wb, suffix);
        //info("RRD2SSV(): %s: END", r->st->id);

diff --git a/web/dashboard.css b/web/dashboard.css
index 6cb3a58298918f3ddf9f8b52af838abe4df91f6c..86029bfbe81911b8e02e385298791d998ff50fc9 100755 (executable)
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -314,3 +314,44 @@ html {
   width: auto !important;
   height: auto !important;
 }
+
+.easyPieChart {
+       position: relative;
+       text-align: center;
+}
+
+.easyPieChart canvas {
+       position: absolute;
+       top: 0;
+       left: 0;
+}
+
+.easyPieChartLabel {
+       display: inline-block;
+       position: absolute;
+       float: left;
+       width: 100%;
+       text-align: center;
+       color: #333333;
+       font-weight: normal;
+}
+
+.easyPieChartTitle {
+       display: inline-block;
+       position: absolute;
+       float: left;
+       width: 100%;
+       text-align: center;
+       color: #999999;
+       font-weight: bold;
+}
+
+.easyPieChartUnits {
+       display: inline-block;
+       position: absolute;
+       float: left;
+       width: 100%;
+       text-align: center;
+       color: #333333;
+       font-weight: normal;
+}

diff --git a/web/dashboard.html b/web/dashboard.html
index 48c368aee3e3eb172390e291e76c85297f431305..786452a05934d8a79cc7a9f7f2a4bd79b728e87a 100755 (executable)
--- a/web/dashboard.html
+++ b/web/dashboard.html
@@ -38,7 +38,7 @@ This is a template for building custom dashboards. To build a dashboard you just
                data-after="-600"
                ></div>
 </body>
-&lt;script type="text/javascript" src="http://netdata.server:19999/dashboard.js"></script>
+&lt;script type="text/javascript" src="http://netdata.server:19999/dashboard.js">&lt;/script>
 &lt;/html>
 </pre>
 

diff --git a/web/dashboard.js b/web/dashboard.js
index b0192d8c694600cae1717a911bc202193bb1c623..dcddbea3a82545c74329e56c8a6c62538219fe43 100755 (executable)
--- a/web/dashboard.js
+++ b/web/dashboard.js
@@ -220,7 +220,7 @@
                        focus:                          false,
                        visibility:             false,
                        chart_data_url:         false,
-                       chart_errors:           false,
+                       chart_errors:           true,
                        chart_timing:           false,
                        chart_calls:            false,
                        libraries:                      false,
@@ -2082,7 +2082,7 @@
                        this.data_url += "&format="  + this.library.format();
                        this.data_url += "&points="  + this.data_points.toString();
                        this.data_url += "&group="   + this.method;
-                       this.data_url += "&options=" + this.library.options();
+                       this.data_url += "&options=" + this.library.options(this);
                        this.data_url += '|jsonwrap';
 
                        if(NETDATA.options.current.eliminate_zero_dimensions === true)
@@ -3899,33 +3899,104 @@
                }
        };
 
-       NETDATA.easypiechartChartUpdate = function(state, data) {
+       NETDATA.easypiechartClearSelection = function(state) {
+               var chart = $(state.element_chart);
+               state.easyPieChartLabel.innerHTML = '';
+               chart.data('easyPieChart').update(0);
+               return true;
+       };
+
+       NETDATA.easypiechartSetSelection = function(state, t) {
+               var chart = $(state.element_chart);
+
+               if(t < state.data_after || t > state.data_before)
+                       return NETDATA.easypiechartClearSelection(state);
+
+               var slot = state.data.result.length - 1 - (t - state.data_after) / state.data_update_every;
+               if(slot < 0 || slot >= state.data.result.length)
+                       return NETDATA.easypiechartClearSelection(state);
 
-               state.easypiechart_instance.update();
+               var value = state.data.result[slot];
+               var max = state.data.max;
+               var pcent = Math.round(value * 100 / max);
+
+               state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
+               chart.data('easyPieChart').update(pcent);
+
+               return true;
        };
 
-       NETDATA.easypiechartChartCreate = function(state, data) {
-               var self = $(state.element);
+       NETDATA.easypiechartChartUpdate = function(state, data) {
+               var chart = $(state.element_chart);
+
+               var value = data.result[0];
+               var max = data.max;
+               var pcent = Math.round(value * 100 / max);
 
-               var value = 10;
-               var pcent = 10;
+               // console.log('value = ' + value + ' max = ' + max + ' pcent = ' + pcent);
 
-               $(state.element_chart).data('data-percent', pcent);
-               data.element_chart.innerHTML = value.toString();
+               state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
+               chart.data('easyPieChart').update(pcent);
+       };
 
-               state.easypiechart_instance = new EasyPieChart(state.element_chart, {
-                       barColor: self.data('easypiechart-barcolor') || '#ef1e25',
+       NETDATA.easypiechartChartCreate = function(state, data) {
+               var self = $(state.element);
+               var chart = $(state.element_chart);
+
+               var value = data.result[0];
+               var max = data.max;
+               var pcent = Math.round(value * 100 / max);
+
+               // console.log('value = ' + value + ' max = ' + max + ' pcent = ' + pcent);
+               chart.data('data-percent', pcent);
+
+               var size = Math.min(state.chartWidth(), state.chartHeight());
+               var stroke = size / 15;
+               if(stroke < 3) stroke = 3;
+
+               var valuefontsize = Math.floor((size * 2 / 3) / 6);
+               var valuetop = Math.round((size - valuefontsize - 10) / 2);
+               state.easyPieChartLabel = document.createElement('span');
+               state.easyPieChartLabel.className = 'easyPieChartLabel';
+               state.easyPieChartLabel.innerHTML = state.legendFormatValue(value);
+               state.easyPieChartLabel.style.fontSize = valuefontsize + 'px';
+               state.easyPieChartLabel.style.top = valuetop.toString() + 'px';
+               state.element_chart.appendChild(state.easyPieChartLabel);
+
+               var titlefontsize = Math.floor((size * 2 / 3) / 10);
+               var titletop = Math.round(valuetop - titlefontsize - (size / 20));
+               state.easyPieChartTitle = document.createElement('span');
+               state.easyPieChartTitle.className = 'easyPieChartTitle';
+               state.easyPieChartTitle.innerHTML = state.chart.name;
+               state.easyPieChartTitle.style.fontSize = titlefontsize + 'px';
+               state.easyPieChartTitle.style.lineHeight = titlefontsize + 'px';
+               state.easyPieChartTitle.style.top = titletop.toString() + 'px';
+               state.element_chart.appendChild(state.easyPieChartTitle);
+
+               var unitfontsize = Math.floor((size * 2 / 3) / 10);
+               var unittop = Math.round(valuetop + valuefontsize + (size / 20));
+               state.easyPieChartUnits = document.createElement('span');
+               state.easyPieChartUnits.className = 'easyPieChartUnits';
+               state.easyPieChartUnits.innerHTML = state.chart.units;
+               state.easyPieChartUnits.style.fontSize = unitfontsize + 'px';
+               state.easyPieChartUnits.style.top = unittop.toString() + 'px';
+               state.element_chart.appendChild(state.easyPieChartUnits);
+
+               chart.easyPieChart({
+                       barColor: self.data('easypiechart-barcolor') || state.chartColors()[0], //'#ef1e25',
                        trackColor: self.data('easypiechart-trackcolor') || '#f2f2f2',
                        scaleColor: self.data('easypiechart-scalecolor') || '#dfe0e0',
                        scaleLength: self.data('easypiechart-scalelength') || 5,
                        lineCap: self.data('easypiechart-linecap') || 'round',
-                       lineWidth: self.data('easypiechart-linewidth') || 3,
+                       lineWidth: self.data('easypiechart-linewidth') || stroke,
                        trackWidth: self.data('easypiechart-trackwidth') || undefined,
-                       size: self.data('easypiechart-size') || Math.min(state.chartWidth(), state.chartHeight()),
+                       size: self.data('easypiechart-size') || size,
                        rotate: self.data('easypiechart-rotate') || 0,
-                       animate: self.data('easypiechart-rotate') || {duration: 0, enabled: false},
+                       animate: self.data('easypiechart-rotate') || {duration: data.view_update_every * 1000 / 2, enabled: true},
                        easing: self.data('easypiechart-easing') || undefined
-               })
+               });
+               
+               chart.data('easyPieChart').update(pcent);
        };
 
        // ----------------------------------------------------------------------------------------------------------------
@@ -3978,8 +4049,8 @@
                        create: NETDATA.sparklineChartCreate,
                        update: NETDATA.sparklineChartUpdate,
                        resize: null,
-                       setSelection: function(t) { return true; },
-                       clearSelection: function() { return true; },
+                       setSelection: undefined, // function(state, t) { return true; },
+                       clearSelection: undefined, // function(state) { return true; },
                        initialized: false,
                        enabled: true,
                        format: function(state) { return 'array'; },
@@ -3995,8 +4066,8 @@
                        create: NETDATA.peityChartCreate,
                        update: NETDATA.peityChartUpdate,
                        resize: null,
-                       setSelection: function(t) { return true; },
-                       clearSelection: function() { return true; },
+                       setSelection: undefined, // function(state, t) { return true; },
+                       clearSelection: undefined, // function(state) { return true; },
                        initialized: false,
                        enabled: true,
                        format: function(state) { return 'ssvcomma'; },
@@ -4012,8 +4083,8 @@
                        create: NETDATA.morrisChartCreate,
                        update: NETDATA.morrisChartUpdate,
                        resize: null,
-                       setSelection: function(t) { return true; },
-                       clearSelection: function() { return true; },
+                       setSelection: undefined, // function(state, t) { return true; },
+                       clearSelection: undefined, // function(state) { return true; },
                        initialized: false,
                        enabled: true,
                        format: function(state) { return 'json'; },
@@ -4029,8 +4100,8 @@
                        create: NETDATA.googleChartCreate,
                        update: NETDATA.googleChartUpdate,
                        resize: null,
-                       setSelection: function(t) { return true; },
-                       clearSelection: function() { return true; },
+                       setSelection: undefined, //function(state, t) { return true; },
+                       clearSelection: undefined, //function(state) { return true; },
                        initialized: false,
                        enabled: true,
                        format: function(state) { return 'datatable'; },
@@ -4046,8 +4117,8 @@
                        create: NETDATA.raphaelChartCreate,
                        update: NETDATA.raphaelChartUpdate,
                        resize: null,
-                       setSelection: function(t) { return true; },
-                       clearSelection: function() { return true; },
+                       setSelection: undefined, // function(state, t) { return true; },
+                       clearSelection: undefined, // function(state) { return true; },
                        initialized: false,
                        enabled: true,
                        format: function(state) { return 'json'; },
@@ -4063,12 +4134,12 @@
                        create: NETDATA.easypiechartChartCreate,
                        update: NETDATA.easypiechartChartUpdate,
                        resize: null,
-                       setSelection: function(t) { return true; },
-                       clearSelection: function() { return true; },
+                       setSelection: NETDATA.easypiechartSetSelection,
+                       clearSelection: NETDATA.easypiechartClearSelection,
                        initialized: false,
                        enabled: true,
-                       format: function(state) { return 'json'; },
-                       options: function(state) { return ''; },
+                       format: function(state) { return 'array'; },
+                       options: function(state) { if(state.chart.chart_type === 'stacked') return ''; else return 'min2max'; },
                        legend: function(state) { return null; },
                        autoresize: function(state) { return false; },
                        max_updates_to_recreate: function(state) { return 5000; },