friendica
/
friendica
mirror of https://github.com/friendica/friendica
6
0
Fork 1
Code Issues Packages Projects Releases 1 Wiki Activity

Migrate federation page to latest version of Chart.js

This commit is contained in:
Hypolite Petovan 2018-01-16 22:50:48 -05:00
parent ffa240dfde
commit 383641f58f
2 changed files with 69 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
view/global.css
View File

@ -399,14 +399,9 @@ a {
color: #00a700; color: #00a700;
} }
.federation-graph { .federation-graph {
width: 400px; margin: 0 auto;
height: 400px;
float: right;
margin: 20px;
} }
.federation-network-graph { .federation-network-graph {
width: 240px;
height: 240px;
float: left; float: left;
margin: 20px; margin: 20px;
} }

82
view/templates/admin/federation.tpl
View File

@ -1,5 +1,5 @@
<script src="{{$baseurl}}/library/Chart.js-1.0.2/Chart.min.js"></script> <script src="{{$baseurl}}/vendor/asset/Chart-js/dist/Chart.min.js"></script>
<canvas id="FederationChart" class="federation-graph"></canvas> <canvas id="FederationChart" class="federation-graph" width="400" height="400"></canvas>
<div id="adminpage"> <div id="adminpage">
<h1>{{$title}} - {{$page}}</h1> <h1>{{$title}} - {{$page}}</h1>
<p>{{$intro}}</p> <p>{{$intro}}</p>
@ -17,13 +17,40 @@
</p> </p>
</div> </div>
<script> <script>
var FedData = [ var FedData = {
datasets: [{
data: [
{{foreach $counts as $c}} {{foreach $counts as $c}}
{ value: {{$c[0]['total']}}, label: "{{$c[0]['platform']}}", color: '{{$c[3]}}', highlight: "#EE90A1", }, {{$c[0]['total']}},
{{/foreach}} {{/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 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> </script>
<table id="federation-stats"> <table id="federation-stats">
@ -36,15 +63,42 @@ var myDoughnutChart = new Chart(ctx).Doughnut(FedData, { animateRotate : false,
</tr> </tr>
<tr> <tr>
<td colspan="3" class="federation-data"> <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> <script>
var {{$c[2]}}data = [ var {{$c[2]}}data = {
{{foreach $c[1] as $v}} datasets: [{
{ value: {{$v['total']}}, label: '{{$v['version']}}', color: "{{$c[3]}}", highlight: "#EE90A1",}, data: [
{{/foreach}} {{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 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> </script>
<ul class="federation-stats"> <ul class="federation-stats">
{{foreach $c[1] as $v}} {{foreach $c[1] as $v}}
@ -55,4 +109,4 @@ var myDoughnutChart = new Chart(ctx).Doughnut(FedData, { animateRotate : false,
</tr> </tr>
{{/if}} {{/if}}
{{/foreach}} {{/foreach}}
</table> </table>