Migrate federation page to latest version of Chart.js
This commit is contained in:
parent
ffa240dfde
commit
383641f58f
2 changed files with 69 additions and 20 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}}
|
||||||
|
|
Loading…
Reference in a new issue