Work in progress

VinceMacBuche · Feb 24, 2017 · 8e125fb · 8e125fb
1 parent 7611737
commit 8e125fb
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/rudder-web/src/main/webapp/javascript/rudder/homePage.js b/rudder-web/src/main/webapp/javascript/rudder/homePage.js
@@ -124,13 +124,32 @@ function doughnutChart (id,data,count, colors) {
       } ]
   };
 
+  function highlight(chart, index) {
+    chart.segments
+  }
   var chartOptions = {
       type: 'doughnut'
     , data: chartData
     , options: {
         legend: {
-          position : "bottom"
+          display:false
+
         }
+      , legendCallback: function(chart) {
+        console.log(chart.data);
+        var text = [];
+        text.push('<ul>');
+        for (var i=0; i<chart.data.datasets[0].data.length; i++) {
+            text.push('<li>');
+            text.push('<span style="background-color:' + chart.data.datasets[0].backgroundColor[i] + '">' + chart.data.datasets[0].data[i] + '</span>');
+            if (chart.data.labels[i]) {
+                text.push(chart.data.labels[i]);
+            }
+            text.push('</li>');
+        }
+        text.push('</ul>');
+        return text.join("");
+      }
       , tooltips: {
           callbacks: {
             label: function(tooltipItem, data) {
@@ -147,7 +166,10 @@ function doughnutChart (id,data,count, colors) {
       }
   }
 
-  new Chart(context, chartOptions);
+  var chart = new Chart(context, chartOptions);
+  console.log(chart.generateLegend());
+  console.log(chart);
+  context.after(chart.generateLegend())
 }
 
 function homePageInventory (

diff --git a/rudder-web/src/main/webapp/secure/index.html b/rudder-web/src/main/webapp/secure/index.html
@@ -72,7 +72,7 @@ <h3 class="text-center" id="globalComplianceStats"></h3>
      </div>
    </div>
 
-   <div class="col-lg-8" id="nodeBreakdown">
+   <div class="col-lg-7 col-lg-offset-1" id="nodeBreakdown">
        <div class="panel panel-default">
          <div class="panel-heading">Node breakdown</div>
          <div class=" col-lg-4 col-md-4 col-sm-4">