pepepper/tissue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

グラフ画面のインラインスクリプトをuser/stats.jsに移動

Browse Source
This commit is contained in:
shibafu 2019-03-05 01:04:20 +09:00
parent d4d98db686
commit 2c396da84e
3 changed files with 100 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
resources/assets/js/user/stats.js vendored Normal file
View File

@ -0,0 +1,90 @@
import CalHeatMap from 'cal-heatmap';
import Chart from 'chart.js';
function createLineGraph(id, labels, data) {
const context = document.getElementById(id).getContext('2d');
new Chart(context, {
type: 'line',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
elements: {
line: {
tension: 0
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
function createBarGraph(id, labels, data) {
const context = document.getElementById(id).getContext('2d');
new Chart(context, {
type: 'bar',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
// TODO: これはいくらなんでもひどすぎるだろ
const dailySum = JSON.parse(document.getElementById('graph-daily-sum').textContent);
const monthlyKey = JSON.parse(document.getElementById('graph-monthly-key').textContent);
const monthlySum = JSON.parse(document.getElementById('graph-monthly-sum').textContent);
const yearlyKey = JSON.parse(document.getElementById('graph-yearly-key').textContent);
const yearlySum = JSON.parse(document.getElementById('graph-yearly-sum').textContent);
const hourlyKey = JSON.parse(document.getElementById('graph-hourly-key').textContent);
const hourlySum = JSON.parse(document.getElementById('graph-hourly-sum').textContent);
const dowSum = JSON.parse(document.getElementById('graph-dow-sum').textContent);
new CalHeatMap().init({
itemSelector: '#cal-heatmap',
domain: 'month',
subDomain: 'day',
domainLabelFormat: '%Y/%m',
weekStartOnMonday: false,
start: new Date().setMonth(new Date().getMonth() - 9),
range: 10,
data: dailySum,
legend: [1, 2, 3, 4]
});
createLineGraph('monthly-graph', monthlyKey, monthlySum);
createLineGraph('yearly-graph', yearlyKey, yearlySum);
createBarGraph('hourly-graph', hourlyKey, hourlySum);
createBarGraph('dow-graph', ['日', '月', '火', '水', '木', '金', '土'], dowSum);

92
resources/views/user/stats.blade.php
View File

@ -30,87 +30,13 @@
@endsection @endsection
@push('script') @push('script')
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/chart.js@2.7.1/dist/Chart.min.js"></script> <script id="graph-daily-sum" type="application/javascript">@json($dailySum)</script>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script> <script id="graph-monthly-key" type="application/javascript">@json(array_keys($monthlySum))</script>
<script type="text/javascript" src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script> <script id="graph-monthly-sum" type="application/javascript">@json(array_values($monthlySum))</script>
<script> <script id="graph-yearly-key" type="application/javascript">@json(array_keys($yearlySum))</script>
var cal = new CalHeatMap(); <script id="graph-yearly-sum" type="application/javascript">@json(array_values($yearlySum))</script>
cal.init({ <script id="graph-hourly-key" type="application/javascript">@json(array_keys($hourlySum))</script>
itemSelector: '#cal-heatmap', <script id="graph-hourly-sum" type="application/javascript">@json(array_values($hourlySum))</script>
domain: 'month', <script id="graph-dow-sum" type="application/javascript">@json($dowSum)</script>
subDomain: 'day', <script src="{{ mix('js/user/stats.js') }}"></script>
domainLabelFormat: '%Y/%m',
weekStartOnMonday: false,
start: new Date({{ \Carbon\Carbon::now()->addMonths(-9)->timestamp * 1000 }}),
range: 10,
data: @json($dailySum),
legend: [1, 2, 3, 4]
});
function createLineGraph(id, labels, data) {
var context = document.getElementById(id).getContext('2d');
var chart = new Chart(context, {
type: 'line',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
elements: {
line: {
tension: 0
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
function createBarGraph(id, labels, data) {
var context = document.getElementById(id).getContext('2d');
var chart = new Chart(context, {
type: 'bar',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
createLineGraph('monthly-graph', @json(array_keys($monthlySum)), @json(array_values($monthlySum)));
createLineGraph('yearly-graph', @json(array_keys($yearlySum)), @json(array_values($yearlySum)));
createBarGraph('hourly-graph', @json(array_keys($hourlySum)), @json(array_values($hourlySum)));
createBarGraph('dow-graph', ['日', '月', '火', '水', '木', '金', '土'], @json($dowSum));
</script>
@endpush @endpush

1
webpack.mix.js vendored
View File

@ -13,6 +13,7 @@ let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js') mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/home.js', 'public/js') .js('resources/assets/js/home.js', 'public/js')
.js('resources/assets/js/user/stats.js', 'public/js/user')
.sass('resources/assets/sass/app.scss', 'public/css') .sass('resources/assets/sass/app.scss', 'public/css')
.autoload({ .autoload({
'jquery': ['$', 'jQuery', 'window.jQuery'] 'jquery': ['$', 'jQuery', 'window.jQuery']