ホーム画面のインラインスクリプトをhome.jsに移動

This commit is contained in:
shibafu 2019-03-05 00:25:13 +09:00
parent 81e37034ce
commit d4d98db686
3 changed files with 42 additions and 39 deletions

38
resources/assets/js/home.js vendored Normal file
View File

@ -0,0 +1,38 @@
import Chart from 'chart.js';
const graph = document.getElementById('global-count-graph');
const labels = JSON.parse(document.getElementById('global-count-labels').textContent);
const data = JSON.parse(document.getElementById('global-count-data').textContent);
new Chart(graph.getContext('2d'), {
type: 'bar',
data: {
labels,
datasets: [{
data,
backgroundColor: 'rgba(0, 0, 0, .1)',
borderColor: 'rgba(0, 0, 0, .25)',
borderWidth: 1
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: false
},
elements: {
line: {}
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false,
ticks: {
beginAtZero: true
}
}]
}
}
});

View File

@ -102,43 +102,7 @@
@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="global-count-labels" type="application/json">@json(array_keys($globalEjaculationCounts))</script>
<script> <script id="global-count-data" type="application/json">@json(array_values($globalEjaculationCounts))</script>
$('.link-card').linkCard({ <script src="{{ mix('js/home.js') }}"></script>
endpoint: '{{ url('/api/checkin/card') }}'
});
new Chart(document.getElementById('global-count-graph').getContext('2d'), {
type: 'bar',
data: {
labels: @json(array_keys($globalEjaculationCounts)),
datasets: [{
data: @json(array_values($globalEjaculationCounts)),
backgroundColor: 'rgba(0, 0, 0, .1)',
borderColor: 'rgba(0, 0, 0, .25)',
borderWidth: 1
}]
},
options: {
maintainAspectRatio: false,
legend: {
display: false
},
elements: {
line: {}
},
scales: {
xAxes: [{
display: false
}],
yAxes: [{
display: false,
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
@endpush @endpush

1
webpack.mix.js vendored
View File

@ -12,6 +12,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')
.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']