Migrate federation page to latest version of Chart.js

diff --git a/view/global.css b/view/global.css
index f3ca22b75a3b6bace733d1cb213791b0db5bb23f..2cfd046ca2f635763108c19d90de9f2e06dbe3e6 100644 (file)
--- a/view/global.css
+++ b/view/global.css
@@ -399,14 +399,9 @@ a {
   color: #00a700;
 }
 .federation-graph {
-  width: 400px;
-  height: 400px;
-  float: right;
-  margin: 20px;
+  margin: 0 auto;
 }
 .federation-network-graph {
-  width: 240px;
-  height: 240px;
   float: left;
   margin: 20px;
 }

diff --git a/view/templates/admin/federation.tpl b/view/templates/admin/federation.tpl
index 6904be6b921d56ae412a2282deae615adbad320e..cbd3a40a1e7cf355376bfc08d9a8af500d5cfda0 100644 (file)
--- a/view/templates/admin/federation.tpl
+++ b/view/templates/admin/federation.tpl
@@ -1,5 +1,5 @@
-<script src="{{$baseurl}}/library/Chart.js-1.0.2/Chart.min.js"></script>
-<canvas id="FederationChart" class="federation-graph"></canvas>
+<script src="{{$baseurl}}/vendor/asset/Chart-js/dist/Chart.min.js"></script>
+<canvas id="FederationChart" class="federation-graph" width="400" height="400"></canvas>
 <div id="adminpage">
     <h1>{{$title}} - {{$page}}</h1>
     <p>{{$intro}}</p>
@@ -17,13 +17,40 @@
     </p>
 </div>
 <script>
-var FedData = [
+var FedData = {
+       datasets: [{
+        data: [
 {{foreach $counts as $c}}
-    { value: {{$c[0]['total']}}, label: "{{$c[0]['platform']}}", color: '{{$c[3]}}', highlight: "#EE90A1", },
+                       {{$c[0]['total']}},
 {{/foreach}}
-];
+               ],
+               backgroundColor: [
+{{foreach $counts as $c}}
+                       '{{$c[3]}}',
+{{/foreach}}
+               ],
+               hoverBackgroundColor: [
+{{foreach $counts as $c}}
+                       '#EE90A1',
+{{/foreach}}
+               ]
+    }],
+       labels: [
+{{foreach $counts as $c}}
+               "{{$c[0]['platform']}}",
+{{/foreach}}
+       ]
+};
 var ctx = document.getElementById("FederationChart").getContext("2d");
-var myDoughnutChart = new Chart(ctx).Doughnut(FedData, { animateRotate : false, });
+var myDoughnutChart = new Chart(ctx, {
+       type: 'doughnut',
+       data: FedData,
+       options: {
+               legend: {display: false},
+               animation: {animateRotate: false},
+               responsive: false
+       }
+});
 </script>
 
 <table id="federation-stats">
@@ -36,15 +63,42 @@ var myDoughnutChart = new Chart(ctx).Doughnut(FedData, { animateRotate : false,
     </tr>
     <tr>
     <td colspan="3" class="federation-data">
-    <canvas id="{{$c[2]}}Chart" class="federation-network-graph"></canvas>
+    <canvas id="{{$c[2]}}Chart" class="federation-network-graph" width="240" height="240"></canvas>
     <script>
-    var {{$c[2]}}data = [
-    {{foreach $c[1] as $v}}
-       { value: {{$v['total']}}, label: '{{$v['version']}}', color: "{{$c[3]}}", highlight: "#EE90A1",},
-    {{/foreach}}
-    ];
+       var {{$c[2]}}data = {
+               datasets: [{
+                       data: [
+       {{foreach $c[1] as $v}}
+                               {{$v['total']}},
+       {{/foreach}}
+                       ],
+                       backgroundColor: [
+       {{foreach $c[1] as $v}}
+                               '{{$c[3]}}',
+       {{/foreach}}
+                       ],
+                       hoverBackgroundColor: [
+       {{foreach $c[1] as $v}}
+                               '#EE90A1',
+       {{/foreach}}
+                       ]
+               }],
+               labels: [
+       {{foreach $c[1] as $v}}
+                       '{{$v['version']}}',
+       {{/foreach}}
+               ]
+       };
     var ctx = document.getElementById("{{$c[2]}}Chart").getContext("2d");
-    var my{{$c[2]}}DoughnutChart = new Chart(ctx).Doughnut({{$c[2]}}data, {animateRotate : false,});
+       var my{{$c[2]}}DoughnutChart = new Chart(ctx, {
+               type: 'doughnut',
+               data: {{$c[2]}}data,
+               options: {
+                       legend: {display: false},
+                       animation: {animateRotate: false},
+                       responsive: false
+               }
+       });
     </script>
     <ul class="federation-stats">
     {{foreach $c[1] as $v}}
@@ -55,4 +109,4 @@ var myDoughnutChart = new Chart(ctx).Doughnut(FedData, { animateRotate : false,
     </tr>
     {{/if}}
 {{/foreach}}
-</table>
+</table>
\ No newline at end of file