Merge remote-tracking branch 'upstream/develop' into update-self

[friendica.git] / view / templates / admin / federation.tpl

diff --git a/view/templates/admin/federation.tpl b/view/templates/admin/federation.tpl
index 6904be6b921d56ae412a2282deae615adbad320e..5f89d4f7d01cffa6a8e9a30ce55d494b3f8093d2 100644 (file)
--- a/view/templates/admin/federation.tpl
+++ b/view/templates/admin/federation.tpl
@@ -1,58 +1,123 @@
-<script src="{{$baseurl}}/library/Chart.js-1.0.2/Chart.min.js"></script>
-<canvas id="FederationChart" class="federation-graph"></canvas>
+<script src="{{$baseurl}}/view/asset/Chart-js/dist/Chart.min.js"></script>
 <div id="adminpage">
-    <h1>{{$title}} - {{$page}}</h1>
-    <p>{{$intro}}</p>
-    {{if not $autoactive}}
+       <h1>{{$title}} - {{$page}}</h1>
+
+       <canvas id="FederationChart" class="federation-graph" width="320" height="320"></canvas>
+       <p>{{$intro}}</p>
+
+       {{if not $autoactive}}
        <p class="error-message">{{$hint}}</p>
-    {{/if}}
-    <p>{{$legendtext}}
-    <ul>
-    {{foreach $counts as $c}}
-       {{if $c[0]['total'] > 0}}
-           <li>{{$c[0]['platform']}} ({{$c[0]['total']}}/{{$c[0]['users']}})</li>
        {{/if}}
-    {{/foreach}}
-    </ul>
-    </p>
-</div>
-<script>
-var FedData = [
-{{foreach $counts as $c}}
-    { value: {{$c[0]['total']}}, label: "{{$c[0]['platform']}}", color: '{{$c[3]}}', highlight: "#EE90A1", },
-{{/foreach}}
-];
-var ctx = document.getElementById("FederationChart").getContext("2d");
-var myDoughnutChart = new Chart(ctx).Doughnut(FedData, { animateRotate : false, });
-</script>
 
-<table id="federation-stats">
-{{foreach $counts as $c}}
-    {{if $c[0]['total'] > 0}}
-    <tr>
-           <th>{{$c[0]['platform']}}</th>
-           <th><strong>{{$c[0]['total']}}</strong></td>
-           <td>{{$c[0]['network']}}</td>
-    </tr>
-    <tr>
-    <td colspan="3" class="federation-data">
-    <canvas id="{{$c[2]}}Chart" class="federation-network-graph"></canvas>
-    <script>
-    var {{$c[2]}}data = [
-    {{foreach $c[1] as $v}}
-       { value: {{$v['total']}}, label: '{{$v['version']}}', color: "{{$c[3]}}", highlight: "#EE90A1",},
-    {{/foreach}}
-    ];
-    var ctx = document.getElementById("{{$c[2]}}Chart").getContext("2d");
-    var my{{$c[2]}}DoughnutChart = new Chart(ctx).Doughnut({{$c[2]}}data, {animateRotate : false,});
-    </script>
-    <ul class="federation-stats">
-    {{foreach $c[1] as $v}}
-       <li>{{if ($c[0]['platform']==='Friendica' and  $version===$v['version']) }}<span class="version-match">{{$v['version']}}</span>{{else}}{{$v['version']}}{{/if}} ({{$v['total']}})</li>
-    {{/foreach}}
-    </ul>
-    </td>
-    </tr>
-    {{/if}}
-{{/foreach}}
-</table>
+       <p>{{$legendtext}}</p>
+
+       <ul>
+               {{foreach $counts as $c}}
+                       {{if $c[0]['total'] > 0}}
+                       <li>{{$c[0]['platform']}} ({{$c[0]['total']}}/{{$c[0]['users']}})</li>
+                       {{/if}}
+               {{/foreach}}
+       </ul>
+
+       <script>
+       var FedData = {
+               datasets: [{
+                       data: [
+                               {{foreach $counts as $c}}
+                                       {{$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, {
+               type: 'doughnut',
+               data: FedData,
+               options: {
+                   legend: {display: false},
+                   animation: {animateRotate: false},
+                   responsive: false
+               }
+       });
+       </script>
+
+       <table id="federation-stats">
+       {{foreach $counts as $c}}
+               {{if $c[0]['total'] > 0}}
+               <tr>
+                       <th>{{$c[0]['platform']}}</th>
+                       <th><strong>{{$c[0]['total']}}</strong></td>
+                       <td>{{$c[0]['network']}}</td>
+               </tr>
+               <tr>
+                       <td colspan="3" class="federation-data">
+                               <canvas id="{{$c[2]}}Chart" class="federation-network-graph" width="240" height="240"></canvas>
+                               <script>
+                                       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, {
+                                               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}}
+                                       <li>
+                                               {{if ($c[0]['platform']==='Friendica' and  $version===$v['version']) }}
+                                               <span class="version-match">{{$v['version']}}</span>
+                                               {{else}}
+                                               {{$v['version']}}
+                                               {{/if}}
+                                               ({{$v['total']}})
+                                       </li>
+                               {{/foreach}}
+                               </ul>
+                       </td>
+               </tr>
+               {{/if}}
+       {{/foreach}}
+       </table>
+</div>