TCVis/resources/views/home.blade.php

92 lines
5.6 KiB
PHP
Raw Normal View History

2018-12-21 12:45:08 +00:00
@extends('layouts.app')
@section('content')
2018-12-22 03:47:09 +00:00
<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>
2018-12-21 12:45:08 +00:00
<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">
2018-12-22 03:47:09 +00:00
<div class="form-group">
<label for="show-last">Show last:</label>
2018-12-21 12:45:08 +00:00
<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>
2018-12-22 03:47:09 +00:00
</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>
2018-12-21 12:45:08 +00:00
</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() !!}
2018-12-22 03:47:09 +00:00
<button class="btn btn-primary" onclick="exportPNG('{{ $chart["name"] }} ({{ $drama_name }})',window.{{ $chart["chart"]->id }})">Export as PNG</button>
2018-12-21 12:45:08 +00:00
</div>
{!! $chart["chart"]->script() !!}
</div>
@endforeach
</div>
</div>
</div>
@endforeach
<div class="card">
2018-12-22 03:47:09 +00:00
<div class="card-header">Information</div>
2018-12-21 12:45:08 +00:00
<div class="card-body text-center">
2018-12-22 03:47:09 +00:00
<p>Data generated from <a href="https://api.matsurihi.me/docs/">Princess Public REST API</a></p>
2018-12-21 12:45:08 +00:00
</div>
</div>
</div>
</div>
</div>
@endsection