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

resources/views/user/stats.blade.php

@@ -30,87 +30,13 @@
 @endsection
 
 @push('script')
-<script type="text/javascript" src="//cdn.jsdelivr.net/npm/chart.js@2.7.1/dist/Chart.min.js"></script>
-<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
-<script type="text/javascript" src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
-<script>
-    var cal = new CalHeatMap();
-    cal.init({
-        itemSelector: '#cal-heatmap',
-        domain: 'month',
-        subDomain: 'day',
-        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>
+<script id="graph-daily-sum" type="application/javascript">@json($dailySum)</script>
+<script id="graph-monthly-key" type="application/javascript">@json(array_keys($monthlySum))</script>
+<script id="graph-monthly-sum" type="application/javascript">@json(array_values($monthlySum))</script>
+<script id="graph-yearly-key" type="application/javascript">@json(array_keys($yearlySum))</script>
+<script id="graph-yearly-sum" type="application/javascript">@json(array_values($yearlySum))</script>
+<script id="graph-hourly-key" type="application/javascript">@json(array_keys($hourlySum))</script>
+<script id="graph-hourly-sum" type="application/javascript">@json(array_values($hourlySum))</script>
+<script id="graph-dow-sum" type="application/javascript">@json($dowSum)</script>
+<script src="{{ mix('js/user/stats.js') }}"></script>
 @endpush