122 lines
2.3 KiB
PHP
122 lines
2.3 KiB
PHP
<script src="https://code.highcharts.com/highcharts.js"></script>
|
|
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
|
<script src="https://code.highcharts.com/modules/export-data.js"></script>
|
|
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
|
|
|
|
<figure class="highcharts-figure">
|
|
<div id="container"></div>
|
|
<p class="highcharts-description">
|
|
This shows the number of sites that have queried the version server to see if there is an update, and thus reporting
|
|
there version at the same time.
|
|
</p>
|
|
</figure>
|
|
|
|
<script>
|
|
Highcharts.chart('container', {
|
|
chart: {
|
|
type: 'area',
|
|
zoomType: 'x',
|
|
},
|
|
title: {
|
|
text: 'PLA version activity'
|
|
},
|
|
subtitle: {
|
|
text: 'Source: ' +
|
|
'<a href="https://demo.phpldapadmin.org/"' +
|
|
'target="_blank">PLA</a>'
|
|
},
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
title: {
|
|
text: 'Time'
|
|
},
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
//useHTML: true,
|
|
text: '# Sites'
|
|
}
|
|
},
|
|
tooltip: {
|
|
shared: true,
|
|
headerFormat: '<span style="font-size:12px"><b>{point.key}</b></span>' +
|
|
'<br>'
|
|
},
|
|
plotOptions: {
|
|
area: {
|
|
stacking: 'normal',
|
|
lineColor: '#666666',
|
|
lineWidth: 1,
|
|
marker: {
|
|
lineWidth: 1,
|
|
lineColor: '#666666'
|
|
}
|
|
}
|
|
},
|
|
|
|
series: [
|
|
@foreach($query->groupBy('ver') as $label => $o)
|
|
{
|
|
name: '{{ $label }}',
|
|
data: {!! $o->map(fn($item)=>['x'=>$item->date,'y'=>$item->total]) !!}
|
|
},
|
|
@endforeach
|
|
]
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#container {
|
|
height: 400px;
|
|
}
|
|
|
|
.highcharts-figure,
|
|
.highcharts-data-table table {
|
|
min-width: 310px;
|
|
max-width: 800px;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
.highcharts-data-table table {
|
|
font-family: Verdana, sans-serif;
|
|
border-collapse: collapse;
|
|
border: 1px solid #ebebeb;
|
|
margin: 10px auto;
|
|
text-align: center;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.highcharts-data-table caption {
|
|
padding: 1em 0;
|
|
font-size: 1.2em;
|
|
color: #555;
|
|
}
|
|
|
|
.highcharts-data-table th {
|
|
font-weight: 600;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.highcharts-data-table td,
|
|
.highcharts-data-table th,
|
|
.highcharts-data-table caption {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.highcharts-data-table thead tr,
|
|
.highcharts-data-table tr:nth-child(even) {
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
.highcharts-data-table tr:hover {
|
|
background: #f1f7ff;
|
|
}
|
|
|
|
.highcharts-description {
|
|
margin: 0.3rem 10px;
|
|
}
|
|
</style> |