keith/friendica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Migrate federation page to latest version of Chart.js

Browse source
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;
}
.federation-graph {
width: 400px;
height: 400px;
float: right;
margin: 20px;
margin: 0 auto;
}
.federation-network-graph {
width: 240px;
height: 240px;
float: left;
margin: 20px;
}

80
view/templates/admin/federation.tpl
View file

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