ibnu
/
siopas-istw-website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update chart

master
Gunawan19621 1 year ago
parent
2d9a9e34d0
commit
8d305749a7
3 changed files with 63 additions and 137 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      app/Http/Controllers/PeminjamanController.php
  2. 2
      resources/views/dashboard/Peminjaman/index.blade.php
  3. 184
      resources/views/dashboard/index.blade.php

14
app/Http/Controllers/PeminjamanController.php
Unescape View File

@ -123,22 +123,9 @@ class PeminjamanController extends Controller
*/
public function create()
{
$petiWithStatusNotZeroOrEmptyAndActive = Peti::where(function ($query) {
$query->whereHas('assetStatuses', function ($subquery) {
$subquery->where('status', '!=', 0)
->where('created_at', '=', function ($maxQuery) {
$maxQuery->selectRaw('MAX(created_at)')
->from('asset_statuses')
->whereColumn('peti_id', 'petis.id');
});
})->orWhereDoesntHave('assetStatuses');
})->where('status', 'AKTIF')->get();
$data = [
// 'peti' => Peti::all(),
'peminjaman' => asset_status::get(),
'warehouse' => m_warehouse::get(),
'peti_block' => $petiWithStatusNotZeroOrEmptyAndActive,
'customer' => Customer::get(),
'existingPeti' => asset_status::pluck('peti_id')->toArray(),
'active' => 'menu-peminjaman',
@ -255,7 +242,6 @@ class PeminjamanController extends Controller
->where('status', 'AKTIF')
->get();
}
return response()->json(['peti' => $petiData, 'customer' => $customerData]);
}

2
resources/views/dashboard/Peminjaman/index.blade.php
Unescape View File

@ -107,7 +107,7 @@
</tr>
@empty
<tr>
<td colspan="8" class="text-center">Data Kosong</td>
<td colspan="9" class="text-center">Data Kosong</td>
</tr>
@endforelse
</tbody>

184
resources/views/dashboard/index.blade.php
Unescape View File

@ -90,40 +90,17 @@
</div>
</div>
</div>
<!-- Area Bar Chart -->
{{-- <div class="col-xl-7 col-lg-7">
<div class="card shadow mb-4" style="max-height: 600px;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Grafik Peminjaman VS Pengembalian</h6>
</div>
@php
$chartData = app('App\Http\Controllers\HomeController')->generateChartData();
@endphp
<div class="card-body" style="height: 80%;"> <!-- Sesuaikan persentase tinggi konten yang diinginkan -->
<label for="yearFilter">Pilih Tahun:</label>
<select id="yearFilter" class="form-control">
@foreach ($chartData['years'] as $year)
@if ($chartData['exitData'][$loop->index] || $chartData['enterData'][$loop->index])
<option value="{{ $year }}">{{ $year }}</option>
@endif
@endforeach
</select>
<canvas id="ChartAssetStatus" style="width: 100px; height: 68px;"></canvas>
</div>
</div>
</div> --}}
<!-- Area Bar Chart -->
{{-- <div class="col-xl-7 col-lg-7">
<div class="card shadow mb-4" style="max-height: 600px;">
</div>
{{-- <div class="row" style="height: 100%;">
<div class="col-6">
<div class="card shadow mb-4" style="height: 600px;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Grafik Peminjaman VS Pengembalian</h6>
</div>
@php
$chartData = app('App\Http\Controllers\HomeController')->generateChartData();
@endphp
<div class="card-body" style="height: 80%;">
<div class="card-body" style="height: 100%; display: flex; flex-direction: column;">
<label for="yearFilter">Pilih Tahun:</label>
<select id="yearFilter" class="form-control">
@foreach ($chartData['years'] as $year)
@ -133,17 +110,15 @@
@endforeach
</select>
<!-- Add a container div for the chart -->
<div id="chartContainer" style="position: relative; height: 100%;">
<!-- Add a container div for the chart with 100% height -->
<div id="chartContainer" style="position: relative; flex: 1;">
<canvas id="ChartAssetStatus"></canvas>
</div>
</div>
</div>
</div>
<!-- Area Pie Chart -->
<div class="col-xl-5 col-lg-5">
<div class="card shadow mb-4">
<div class="col-6">
<div class="card shadow mb-4" style="height: 600px;">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Grafik Pengadaan Peti</h6>
@ -152,7 +127,7 @@
$chartDataPie = app('App\Http\Controllers\HomeController')->generateChartDataPie();
@endphp
<div class="card-body">
<div class="card-body" style="height: 100%; display: flex; flex-direction: column;">
<label for="yearFilterPie">Pilih Tahun:</label>
<select id="yearFilterPie" class="form-control">
@foreach ($chartDataPie['years'] as $year)
@ -162,21 +137,23 @@
@endforeach
</select>
<canvas id="myPieChartsiopas"></canvas>
<div id="chartContainerPie" style="position: relative; flex: 1;">
<canvas id="myPieChartsiopas"></canvas>
</div>
</div>
</div>
</div> --}}
</div>
{{-- <div class="row">
</div>
</div> --}}
{{-- <div class="row" style="height: 100%;">
<div class="col-6">
<div class="card shadow mb-4" style="max-height: 600px;">
<div class="card shadow mb-4" style="height: 600px;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Grafik Peminjaman VS Pengembalian</h6>
</div>
@php
$chartData = app('App\Http\Controllers\HomeController')->generateChartData();
@endphp
<div class="card-body" style="height: 80%;">
<div class="card-body" style="height: 100%; display: flex; flex-direction: column;">
<label for="yearFilter">Pilih Tahun:</label>
<select id="yearFilter" class="form-control">
@foreach ($chartData['years'] as $year)
@ -186,15 +163,15 @@
@endforeach
</select>
<!-- Add a container div for the chart -->
<div id="chartContainer" style="position: relative; height: 100%;">
<!-- Add a container div for the chart with 100% height -->
<div id="chartContainer" style="position: relative; flex: 1;">
<canvas id="ChartAssetStatus"></canvas>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card shadow mb-4">
<div class="card shadow mb-4" style="height: 600px;">
<!-- Card Header - Dropdown -->
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Grafik Pengadaan Peti</h6>
@ -203,7 +180,7 @@
$chartDataPie = app('App\Http\Controllers\HomeController')->generateChartDataPie();
@endphp
<div class="card-body">
<div class="card-body" style="height: 100%; display: flex; flex-direction: column;">
<label for="yearFilterPie">Pilih Tahun:</label>
<select id="yearFilterPie" class="form-control">
@foreach ($chartDataPie['years'] as $year)
@ -213,12 +190,15 @@
@endforeach
</select>
<canvas id="myPieChartsiopas"></canvas>
<!-- Add a container div for the pie chart with 100% height and resize both -->
<div id="chartContainerPie" style="position: relative; flex: 1; resize: both; overflow: auto;">
<canvas id="myPieChartsiopas" style="height: 100%; width: 100%;"></canvas>
</div>
</div>
</div>
</div>
</div> --}}
<div class="row">
<div class="row" style="height: 100%;">
<div class="col-6">
<div class="card shadow mb-4" style="height: 600px;">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
@ -264,15 +244,28 @@
@endforeach
</select>
<div id="chartContainerPie" style="position: relative; flex: 1;">
<canvas id="myPieChartsiopas"></canvas>
{{-- <div id="chartContainerPie"
style="position: relative; flex: 1; overflow: hidden; text-align: center; margin: 0 5%;">
<canvas id="myPieChartsiopas"
style="max-width: 100%; max-height: 100%; width: auto; height: auto;"></canvas>
</div> --}}
<div id="chartContainerPie"
style="position: relative; flex: 1; overflow: hidden; text-align: center; margin: 0 5%;">
<canvas id="myPieChartsiopas"
style="max-width: 100%; max-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></canvas>
</div>
</div>
</div>
</div>
</div>
@push('script')
<!-- script pie chart -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@ -351,78 +344,6 @@
</script>
<!-- script bar chart -->
{{-- <script>
document.addEventListener('DOMContentLoaded', function() {
var ctx = document.getElementById('ChartAssetStatus').getContext('2d');
var myChart;
var chartData = @json($chartData);
function updateChart(selectedYear) {
var selectedYearIndex = chartData.years.indexOf(selectedYear);
// Mengambil data berdasarkan tahun yang dipilih
var updatedExitData = chartData.exitData[selectedYearIndex];
var updatedEnterData = chartData.enterData[selectedYearIndex];
// Memperbarui chart hanya dengan data tahun yang dipilih
myChart.data.labels = chartData.monthNames;
myChart.data.datasets[0].data = updatedExitData;
myChart.data.datasets[1].data = updatedEnterData;
myChart.update();
}
myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: chartData.monthNames, // Menggunakan nama bulan sebagai label
datasets: [{
label: 'Peminjaman',
data: chartData.exitData[
0], // Menggunakan data tahun saat ini sebagai awalan
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
label: 'Pengembalian',
data: chartData.enterData[
0], // Menggunakan data tahun saat ini sebagai awalan
backgroundColor: 'rgba(255, 159, 64, 0.2)',
borderColor: 'rgba(255, 159, 64, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
var yearFilter = document.getElementById('yearFilter');
yearFilter.addEventListener('change', function() {
var selectedYear = yearFilter.value;
updateChart(selectedYear);
// Simpan tahun yang dipilih ke local storage
localStorage.setItem('selectedYear', selectedYear);
});
// Kondisi Pertama: Setelah halaman dimuat
// Coba baca tahun yang disimpan di local storage
var selectedYear = localStorage.getItem('selectedYear');
if (selectedYear) {
yearFilter.value = selectedYear;
updateChart(selectedYear);
} else {
// Jika tidak ada tahun yang disimpan, pilih tahun saat ini
selectedYear = new Date().getFullYear();
yearFilter.value = selectedYear;
updateChart(selectedYear);
}
});
</script> --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
var ctx = document.getElementById('ChartAssetStatus').getContext('2d');
@ -519,7 +440,6 @@
});
</script>
<!-- script generate report -->
<script>
function downloadReport(routeName) {
@ -538,6 +458,26 @@
downloadReport('StokOpname/export');
});
</script>
{{-- <script>
var chartContainerPie = document.getElementById('chartContainerPie');
var pieChartCanvas = document.getElementById('myPieChartsiopas');
function updatePieChartSize() {
var containerWidth = chartContainerPie.clientWidth * 0.9; // 90% of container width
var containerHeight = chartContainerPie.clientHeight;
// Set canvas dimensions based on container size
pieChartCanvas.width = containerWidth;
pieChartCanvas.height = containerHeight;
}
// Add event listener for window resize
window.addEventListener('resize', updatePieChartSize);
// Initial setup
updatePieChartSize();
</script> --}}
@endpush
@elseif(auth()->user()->role_id == 2)
@include('pages.user.dashboard.index')

Write Preview
Loading…
Cancel
Save