From 2d778cfb6f9b85db0b9c101cc63612c5eeaf27f1 Mon Sep 17 00:00:00 2001
From: markusbloch <>
Date: Sun, 9 Jul 2017 13:54:14 +0000
Subject: [PATCH] statistics2: change pie chart minimum threshold to 0.5%, add
 values to legend, optimize pie chart generation. (Forum: #73792)

git-svn-id: https://svn.fhem.de/fhem/trunk@14679 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
 fhem/contrib/statistics/2017/js/statistics.js | 61 ++++++-------------
 1 file changed, 20 insertions(+), 41 deletions(-)

diff --git a/fhem/contrib/statistics/2017/js/statistics.js b/fhem/contrib/statistics/2017/js/statistics.js
index ecaef1411..ee25dc2a2 100644
--- a/fhem/contrib/statistics/2017/js/statistics.js
+++ b/fhem/contrib/statistics/2017/js/statistics.js
@@ -30,39 +30,7 @@ function rand(length) {
     return text;
 }
 
-
-function drawUpdatePieChart (data, el) {
-    
-    var id = rand(5);
-   
-    el.append("");
-    el.append("<div id='"+id+"' class='googlepiechart'></div>");
-
-    var array = new google.visualization.DataTable();
-   
-    array.addColumn("string","Topping");
-    array.addColumn("number","Slices");
-
-    array.addRow(["< 1 day", data["0"]]); 
-    array.addRow(["1 day - 1 week", data["7"] ]); 
-    array.addRow(["1 week - 1 month", data["30"]]); 
-    array.addRow(["1 month - 6 months", data["180"]]); 
-    array.addRow(["> 1 year", data["365"]]); 
-    
-    var options = {   is3D: true,
-                      chartArea : { height:'80%',width:'95%' },
-                      tooltip: { trigger: 'focus' },
-                      width: 450,
-                      legend: {position: 'right'},
-                      pieSliceText: 'none',
-                      height: 350,
-                  };
-   
-    var chart = new google.visualization.PieChart(document.getElementById(id));
-    chart.draw(array,options);
-}
-
-function drawGooglePieChart(data, el) {
+function drawGooglePieChart(data, el, subst, sort="byKey") {
    
     var id = rand(5);
    
@@ -72,11 +40,17 @@ function drawGooglePieChart(data, el) {
     var result = [];
 
     for(var i in data) {
-        result.push([i, parseInt(data[i])]);
+        result.push([((subst && i in subst) ? subst[i] : i)+" ("+data[i]+")", parseInt(data[i])]);
     }
    
-    result.sort();
-    result.reverse();
+    if(sort === "byKey") {
+        result.sort();
+        result.reverse();
+    }
+    else if(sort === "byValue")
+    {
+        result.sort(function(a,b) {return b[1] - a[1]});
+    }
  
     var array = new google.visualization.DataTable();
    
@@ -87,14 +61,17 @@ function drawGooglePieChart(data, el) {
    
     var options = {   is3D: true,
                       chartArea : { height:'80%',width:'95%' },
-                      tooltip: { trigger: 'focus' },
+                      tooltip: { trigger: 'selection' },
                       width: 450,
-                      legend: {position: 'right'},
+                      legend: {position: 'right',labeledValueText: 'both'},
                       pieSliceText: 'none',
                       height: 350,
+                      sliceVisibilityThreshold: 0.005
                   };
-   
+                  
+    var container = document.getElementById(id);
     var chart = new google.visualization.PieChart(document.getElementById(id));
+    
     chart.draw(array,options);
 }
 
@@ -353,9 +330,11 @@ function onSuccess(data, textStatus, jqXHR) {
         
         // draw google pie charts
         drawGooglePieChart(data.data.system.release, $("div#versiontab-FHEM"));
-        drawGooglePieChart(data.data.system.os, $("div#versiontab-os"));
+        drawGooglePieChart(data.data.system.os, $("div#versiontab-os"), {"linux":"Linux","MSWin32":"Windows","darwin":"MacOS"}, "byValue");
         drawGooglePieChart(data.data.system.perl, $("div#versiontab-perl"));
-        drawUpdatePieChart(data.data.system.age, $("div#versiontab-update"));
+        
+        delete data.data.system.age.unknown; // don't display unknown update age systems
+        drawGooglePieChart(data.data.system.age, $("div#versiontab-update"), {"0":"≤ 1 day", "7": "1 day - 1 week", "30": "1 week - 1 month", "180": "1 month - 6 months", "365": "> 6 months"}, false);
 
         // create module table
         createModulTable(data.data.modules,data.data.models, $("table#module-table"));