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>