Migrate federation page to latest version of Chart.js
This commit is contained in:
parent
ffa240dfde
commit
383641f58f
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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}}
|
||||
|
@ -55,4 +109,4 @@ var myDoughnutChart = new Chart(ctx).Doughnut(FedData, { animateRotate : false,
|
|||
</tr>
|
||||
{{/if}}
|
||||
{{/foreach}}
|
||||
</table>
|
||||
</table>
|
Loading…
Reference in a new issue