Skip to content

Tambahkan fungsi export excel pada halaman data statistik #788

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vickyrolanda merged 3 commits into from
Aug 7, 2025
Merged

Tambahkan fungsi export excel pada halaman data statistik #788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc41315
update .gitignore
pandigresik Aug 6, 2025
c2a3553
Tambahkan fungsi export pada halaman statistik
pandigresik Aug 6, 2025
c63ad12
[ci skip] memutahirkan catatan rilis
vickyrolanda Aug 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,8 @@ yarn-error.log
/.vscode
package-lock.json
.php-cs-fixer.cache

# E2E Testing
/test-results/
/playwright-report/
.env.e2e
22 changes: 2 additions & 20 deletions catatan_rilis.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,11 @@ Di rilis ini, versi 2508.0.0 berisi penambahan dan perbaikan yang diminta penggu

#### Penambahan Fitur

1. [#770](https://github.com/OpenSID/OpenKab/issues/770) Penambahan datatable pada rincian kependudukan laporan bulanan.
2. [#775](https://github.com/OpenSID/OpenKab/issues/775) Penambahan sorting pada datatable di halaman daftar desa.
1. [#784](https://github.com/OpenSID/OpenKab/issues/784) Penambahan fungsi export excel pada halaman data statistik pada OpenKab.

#### Perbaikan BUG

1. [#764](https://github.com/OpenSID/OpenKab/issues/764) Perbaikan statistik RTM tidak tampil.
2. [#726](https://github.com/OpenSID/OpenKab/issues/726) Perbaikan Request Time out - Modul data statistik penduduk.
3. [#732](https://github.com/OpenSID/OpenKab/issues/732) Perbaikan jumlah statistik Penduduk - BPJS ketenagakerjaan.
4. [#734](https://github.com/OpenSID/OpenKab/issues/734) Perbaikan jumlah statistik Penduduk - Akte Kelahiran.
5. [#749](https://github.com/OpenSID/OpenKab/issues/749) Perbaikan dropdown pada filter wilayah halaman website utama.
6. [#748](https://github.com/OpenSID/OpenKab/issues/748) Perbaikan statistik website utama.
7. [#772](https://github.com/OpenSID/OpenKab/issues/772) Perbaikan response json ketika kirim data ke pantau, untuk mempermudah pengecekan pesan error.
8. [#766](https://github.com/OpenSID/OpenKab/issues/766) Perbaikan dropdown dashboard demografi.
9. [#769](https://github.com/OpenSID/OpenKab/issues/769) Perbaiki halaman bagan organisasi.


#### Perubahan Teknis

1. [#753](https://github.com/OpenSID/OpenKab/issues/753) Penambahan unit testing pada menu CMS CategoryController.
2. [#754](https://github.com/OpenSID/OpenKab/issues/754) Penambahan unit testing pada menu CMS ArticleController.
3. [#755](https://github.com/OpenSID/OpenKab/issues/755) Penambahan unti testing pada CMS MenusController dan StatistikPengunjungController.
4. [#757](https://github.com/OpenSID/OpenKab/issues/757) Penambahan unit testing pada SlideController.
5. [#756](https://github.com/OpenSID/OpenKab/issues/756) Penambahan unit testing pada PageController.
6. [#751](https://github.com/OpenSID/OpenKab/issues/751) Penambahan unit testing DownloadController Daftar Unduhan.
7. [#750](https://github.com/OpenSID/OpenKab/issues/750) Penyesuaian route dan hapus file yang tidak di butuhkan pada controller data-summary dan desa-aktif api.
8. [#758](https://github.com/OpenSID/OpenKab/issues/758) Hapus ketergantungan terhadap database gabungan secara langsung.
9. [#747](https://github.com/OpenSID/OpenKab/issues/747) Sesuaikan test pada github action.
2 changes: 2 additions & 0 deletions public/assets/js/excellentexport.js
View file
Open in desktop

Large diffs are not rendered by default.

205 changes: 199 additions & 6 deletions resources/views/statistik/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,12 @@
class="fa fa-print"></i>
Cetak</button>
</div>
<div class="col-md-2">
<button type="button" id="export-excel" class="btn btn-info btn-block btn-sm">
<i class="fa fa-file-excel"></i>
Excel
</button>
</div>
<div class="col-md-2">
<button id="btn-grafik" class="btn btn-sm btn-success btn-block btn-sm" data-toggle="collapse"
href="#grafik-statistik" role="button" aria-expanded="false"
Expand Down Expand Up @@ -149,7 +155,7 @@ class="fa fa-print"></i>
<thead>
<tr>
<th>No</th>
<th id="judul_kolom_nama" width="50%"></th>
<th id="judul_kolom_nama" width="50%">Jenis Kelompok</th>
<th colspan="2" class="dt-head-center">Jumlah</th>
<th colspan="2" class="dt-head-center">Laki - laki</th>
<th colspan="2" class="dt-head-center">Perempuan</th>
Expand All @@ -165,6 +171,7 @@ class="fa fa-print"></i>
@endsection

@section('js')
<script nonce="{{ csp_nonce() }}" src="{{ asset('assets/js/excellentexport.js') }}"></script>
@include('statistik.chart')
<script nonce="{{ csp_nonce() }}">
let data_grafik = [];
Expand Down Expand Up @@ -241,6 +248,190 @@ class="fa fa-print"></i>
window.open(url, '_blank');
});

// Helper function to create Excel export caption
function createExportCaption(categoryName, options = {}) {
const {
includeDate = true,
includeLocation = true,
includePeriod = true,
customTitle = null,
} = options;

var caption = {
title: customTitle || `Data Statistik ${categoryName}`,
period: '',
date: '',
location: ''
};

// Add period information
if (includePeriod) {
var tahun = $("#tahun").val();
var bulan = $("#bulan").val();

if (tahun || bulan) {
var periodParts = [];
if (bulan) {
const bulanNames = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
];
periodParts.push(`Bulan: ${bulanNames[parseInt(bulan)]}`);
}
if (tahun) {
periodParts.push(`Tahun: ${tahun}`);
}
caption.period = periodParts.join(' | ');
}
}

// Add export date
if (includeDate) {
var now = new Date();
caption.date =
`Diekspor pada: ${now.toLocaleDateString('id-ID')} ${now.toLocaleTimeString('id-ID')}`;
}

// Add location info
if (includeLocation) {
caption.location =
`Kabupaten: {{ session('kabupaten.nama_kabupaten') ?? 'N/A' }} | Kecamatan: {{ session('kecamatan.nama_kecamatan') ?? 'N/A' }}`;
}

return caption;
}

// Function to generate dynamic Excel export
function exportToExcel() {
console.log('Starting Excel export...');

// Check if table has data
var tableRows = $('#tabel-data tbody tr').length;
console.log('Table rows count:', tableRows);

if (tableRows === 0) {
alert('Tidak ada data untuk diekspor. Silakan pilih kategori terlebih dahulu.');
return false;
}

// Get current active category
var activeCategory = $('#daftar-statistik .active');
var categoryName = activeCategory.data('nama') || 'Statistik';
var tahun = $("#tahun").val();
var bulan = $("#bulan").val();

console.log('Category:', categoryName, 'Year:', tahun, 'Month:', bulan);

// Generate dynamic filename
var filename = `Statistik_${categoryName}_${nama_desa}`;
if (tahun) {
filename += `_${tahun}`;
}
if (bulan) {
const bulanNames = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
];
filename += `_${bulanNames[parseInt(bulan)]}`;
}

// Clean filename - remove special characters
filename = filename.replace(/[^a-zA-Z0-9_-]/g, '_');

// Generate sheet name (max 31 chars for Excel)
var sheetName = categoryName.replace(/[^a-zA-Z0-9]/g, '_').substring(0, 31) || 'Statistik';

// Create export caption using helper function
// Anda bisa mengkustomisasi caption dengan mengubah opsi di bawah ini:
var caption = createExportCaption(categoryName, {
includeDate: true, // Tampilkan tanggal export
includeLocation: false, // Tampilkan info kabupaten/kecamatan
includePeriod: true, // Tampilkan info tahun/bulan
customTitle: `Laporan Statistik {{ $judul }} Kategori ${categoryName}`, // Custom judul utama
});

// Create a clone of the table for export
var $originalTable = $('#tabel-data');
var $exportTable = $originalTable.clone();
$exportTable.attr('id', 'export-table');

// Add title rows before the header
var titleRows = '';
titleRows +=
`<tr><td colspan="8" style="text-align: center; font-weight: bold; font-size: 18px; background-color: #2c3e50; color: white; padding: 10px;">${caption.title}</td></tr>`;

if (caption.period) {
titleRows +=
`<tr><td colspan="8" style="text-align: center; font-size: 12px; background-color: #ecf0f1; padding: 5px;">${caption.period}</td></tr>`;
}

if (caption.date) {
titleRows +=
`<tr><td colspan="8" style="text-align: center; font-size: 10px; background-color: #bdc3c7; padding: 3px;">${caption.date}</td></tr>`;
}

// Add empty row for spacing
titleRows += '<tr><td colspan="8" style="height: 15px; background-color: white;"></td></tr>';

// Insert title rows into the table
$exportTable.find('thead').prepend(titleRows);

// Add footer information
var footerRows = '';
footerRows += '<tr><td colspan="8" style="height: 15px; background-color: white;"></td></tr>';
footerRows +=
`<tr><td colspan="8" style="text-align: left; font-size: 10px; background-color: #ecf0f1; padding: 5px;">Catatan: Data statistik ini dihasilkan dari sistem informasi desa</td></tr>`;

if (caption.location) {
footerRows +=
`<tr><td colspan="8" style="text-align: left; font-size: 10px; background-color: #ecf0f1; padding: 5px;">${caption.location}</td></tr>`;
}

// Add footer to table
$exportTable.find('tbody').append(footerRows);

// Temporarily add the export table to DOM (hidden)
$exportTable.css('display', 'none');
$('body').append($exportTable);

// Create temporary anchor with proper attributes
var tempAnchor = document.createElement('a');
tempAnchor.download = filename + '.xls';
tempAnchor.href = '#';
tempAnchor.setAttribute('download', filename + '.xls');

// Add to DOM temporarily
document.body.appendChild(tempAnchor);

try {
// Call ExcellentExport directly using the export table
console.log('Calling ExcellentExport.excel...');
var result = ExcellentExport.excel(tempAnchor, 'export-table', sheetName);
console.log('Export result:', result);

if (result) {
tempAnchor.click(); // Trigger download
// Optional: Show success message
console.log('File Excel berhasil diunduh: ' + filename + '.xls');
} else {
console.error('Excel export failed - no result returned');
alert('Gagal mengunduh file Excel. Silakan coba lagi.');
}
} catch (error) {
console.error('Excel export error:', error);
alert('Terjadi kesalahan saat mengunduh Excel: ' + error.message);
} finally {
// Clean up
document.body.removeChild(tempAnchor);
$('#export-table').remove(); // Remove the temporary table
}

return result;
}

$('#export-excel').on('click', function() {
console.log('Export button clicked');
exportToExcel();
});

$('#btn-grafik').on('click', function() {
$("#pie-statistik").collapse('hide');
});
Expand Down Expand Up @@ -322,24 +513,26 @@ className: 'dt-body-right',
columns: [{
data: null,
}, {
data: function(data) {
data: function(data) {

const id = data.id?.toString() ?? '';

if(data.attributes.nama !== 'JUMLAH' && data.attributes.nama !== 'BELUM MENGISI' && data.attributes.nama !== 'TOTAL'){
if (data.attributes.nama !== 'JUMLAH' && data.attributes.nama !==
'BELUM MENGISI' && data.attributes.nama !== 'TOTAL') {

let kriteria = new URLSearchParams(JSON.parse(data.attributes
.kriteria));

let judul = $('.pilih-kategori > a.active').text() + ' : ' + data
.attributes.nama;
let urlDetail = new URL(urlDetailLink);
urlDetail.searchParams.set('filter[kriteria]', kriteria.toString());
urlDetail.searchParams.set('judul', judul);
urlDetail.searchParams.set('nama', data.attributes.nama);
urlDetail.searchParams.set('tipe', $('.pilih-kategori > a.active').text().trim());
urlDetail.searchParams.set('tipe', $('.pilih-kategori > a.active')
.text().trim());
urlDetail.searchParams.set('chart-view', true);

return `<a target="_blank" href=${urlDetail.href}>${data.attributes.nama}</a>`
}

Expand Down