view/templates/admin/federation.tpl

   1 <script src="{{$baseurl}}/vendor/asset/Chart-js/dist/Chart.min.js"></script>
   2 <canvas id="FederationChart" class="federation-graph" width="400" height="400"></canvas>
   3 <div id="adminpage">
   4     <h1>{{$title}} - {{$page}}</h1>
   5     <p>{{$intro}}</p>
   6     {{if not $autoactive}}
   7         <p class="error-message">{{$hint}}</p>
   8     {{/if}}
   9     <p>{{$legendtext}}
  10     <ul>
  11     {{foreach $counts as $c}}
  12         {{if $c[0]['total'] > 0}}
  13             <li>{{$c[0]['platform']}} ({{$c[0]['total']}}/{{$c[0]['users']}})</li>
  14         {{/if}}
  15     {{/foreach}}
  16     </ul>
  17     </p>
  18 </div>
  19 <script>
  20 var FedData = {
  21         datasets: [{
  22         data: [
  23 {{foreach $counts as $c}}
  24                         {{$c[0]['total']}},
  25 {{/foreach}}
  26                 ],
  27                 backgroundColor: [
  28 {{foreach $counts as $c}}
  29                         '{{$c[3]}}',
  30 {{/foreach}}
  31                 ],
  32                 hoverBackgroundColor: [
  33 {{foreach $counts as $c}}
  34                         '#EE90A1',
  35 {{/foreach}}
  36                 ]
  37     }],
  38         labels: [
  39 {{foreach $counts as $c}}
  40                 "{{$c[0]['platform']}}",
  41 {{/foreach}}
  42         ]
  43 };
  44 var ctx = document.getElementById("FederationChart").getContext("2d");
  45 var myDoughnutChart = new Chart(ctx, {
  46         type: 'doughnut',
  47         data: FedData,
  48         options: {
  49                 legend: {display: false},
  50                 animation: {animateRotate: false},
  51                 responsive: false
  52         }
  53 });
  54 </script>
  55
  56 <table id="federation-stats">
  57 {{foreach $counts as $c}}
  58     {{if $c[0]['total'] > 0}}
  59     <tr>
  60             <th>{{$c[0]['platform']}}</th>
  61             <th><strong>{{$c[0]['total']}}</strong></td>
  62             <td>{{$c[0]['network']}}</td>
  63     </tr>
  64     <tr>
  65     <td colspan="3" class="federation-data">
  66     <canvas id="{{$c[2]}}Chart" class="federation-network-graph" width="240" height="240"></canvas>
  67     <script>
  68         var {{$c[2]}}data = {
  69                 datasets: [{
  70                         data: [
  71         {{foreach $c[1] as $v}}
  72                                 {{$v['total']}},
  73         {{/foreach}}
  74                         ],
  75                         backgroundColor: [
  76         {{foreach $c[1] as $v}}
  77                                 '{{$c[3]}}',
  78         {{/foreach}}
  79                         ],
  80                         hoverBackgroundColor: [
  81         {{foreach $c[1] as $v}}
  82                                 '#EE90A1',
  83         {{/foreach}}
  84                         ]
  85                 }],
  86                 labels: [
  87         {{foreach $c[1] as $v}}
  88                         '{{$v['version']}}',
  89         {{/foreach}}
  90                 ]
  91         };
  92     var ctx = document.getElementById("{{$c[2]}}Chart").getContext("2d");
  93         var my{{$c[2]}}DoughnutChart = new Chart(ctx, {
  94                 type: 'doughnut',
  95                 data: {{$c[2]}}data,
  96                 options: {
  97                         legend: {display: false},
  98                         animation: {animateRotate: false},
  99                         responsive: false
 100                 }
 101         });
 102     </script>
 103     <ul class="federation-stats">
 104     {{foreach $c[1] as $v}}
 105         <li>{{if ($c[0]['platform']==='Friendica' and  $version===$v['version']) }}<span class="version-match">{{$v['version']}}</span>{{else}}{{$v['version']}}{{/if}} ({{$v['total']}})</li>
 106     {{/foreach}}
 107     </ul>
 108     </td>
 109     </tr>
 110     {{/if}}
 111 {{/foreach}}
 112 </table>