92 lines
5.6 KiB
PHP
92 lines
5.6 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<script type="text/javascript">
|
|
const EXPORTCSSTEXT = ".chart-container{background-color: #ffffff; width: 1920px; height: 1080px; position:relative;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .legend-dataset-text{fill:#6c7680;font-weight:600}.graph-svg-tip{position:absolute;z-index:99999;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.graph-svg-tip ul{padding-left:0;display:flex}.graph-svg-tip ol{padding-left:0;display:flex}.graph-svg-tip ul.data-point-list li{min-width:90px;flex:1;font-weight:600}.graph-svg-tip strong{color:#dfe2e5;font-weight:600}.graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:' ';border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}";
|
|
function exportPNG(filename, chart) {
|
|
var clone = chart.svg.cloneNode(true);
|
|
clone.classList.add('chart-container');
|
|
clone.setAttribute('xmlns', "http://www.w3.org/2000/svg");
|
|
clone.setAttribute('xmlns:xlink', "http://www.w3.org/1999/xlink");
|
|
var styleEl = document.createElement('style');
|
|
styleEl.appendChild(document.createTextNode(EXPORTCSSTEXT));
|
|
clone.insertBefore(styleEl, clone.firstChild);
|
|
var width = 1920;
|
|
var scale = width/clone.getAttribute('width');
|
|
var svg = Pablo(clone);
|
|
svg.viewbox([0,0,clone.getAttribute('width'),clone.getAttribute('height')]).attr('width',width).attr('height',clone.getAttribute('height')*scale).download('png',filename+'.png');
|
|
}
|
|
</script>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">Settings</div>
|
|
<div class="card-body">
|
|
<form action="{{ url()->current() }}" method="GET">
|
|
<div class="form-group">
|
|
<label for="show-last">Show last:</label>
|
|
<select name="since" id="show-last" onchange="this.form.submit()">
|
|
<option value="">Show last..</option>
|
|
<option value="30" {{ $since == 30 ? "selected" : "" }} >30 minutes</option>
|
|
<option value="60" {{ $since == 60 ? "selected" : "" }} >1 hour</option>
|
|
<option value="180" {{ $since == 180 ? "selected" : "" }} >3 hours</option>
|
|
<option value="360" {{ $since == 360 ? "selected" : "" }} >6 hours</option>
|
|
<option value="1440" {{ $since == 1440 ? "selected" : "" }} >24 hours</option>
|
|
<option value="4320" {{ $since == 4320 ? "selected" : "" }} >3 days</option>
|
|
<option value="10080" {{ $since == 10080 ? "selected" : "" }} >1 week</option>
|
|
<option value="full" {{ $since == "full" ? "selected" : "" }} >Entire history</option>
|
|
</select>
|
|
</div>
|
|
</form>
|
|
<form action="{{ url()->current() }}" method="GET">
|
|
<div class="form-group">
|
|
<label for="datetimepicker1">Date since:</label>
|
|
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
|
|
<input name="date_since" type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
|
|
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
|
|
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$('#datetimepicker1').datetimepicker();
|
|
$('#datetimepicker1').on('change.datetimepicker', function() {
|
|
this.form.submit();
|
|
});
|
|
});
|
|
</script>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@foreach($chart_groups as $drama_name => $charts)
|
|
<div class="card">
|
|
<div class="card-header">{{ $drama_name }}</div>
|
|
<div class="card-body text-center">
|
|
<div>
|
|
@foreach($charts as $chart)
|
|
<div class="card">
|
|
<div class="card-header">{{ $chart["name"] }}</div>
|
|
<div class="card-body text-center">
|
|
{!! $chart["chart"]->container() !!}
|
|
<button class="btn btn-primary" onclick="exportPNG('{{ $chart["name"] }} ({{ $drama_name }})',window.{{ $chart["chart"]->id }})">Export as PNG</button>
|
|
</div>
|
|
{!! $chart["chart"]->script() !!}
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
<div class="card">
|
|
<div class="card-header">Information</div>
|
|
<div class="card-body text-center">
|
|
<p>Data generated from <a href="https://api.matsurihi.me/docs/">Princess — Public REST API</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|