X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftemplates%2Fadmin%2Ffederation.tpl;h=9850a37414502806dcddbaba8f09e06ddc5f3302;hb=8e3428764b67c90b3eef88a075060e8694be465b;hp=ee33df09b279ea32efe17e6d9e607b2da3153ccf;hpb=ff459441cfd86375a7b0ed5f2d6854fbd0ae3a00;p=friendica.git

diff --git a/view/templates/admin/federation.tpl b/view/templates/admin/federation.tpl
index ee33df09b2..9850a37414 100644
--- 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}}
-	<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']}})</li>
+	<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 nofilter}}</p>
 	{{/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>