jacek/wp-cycling-stats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Genetrowanie PNG

Browse Source
This commit is contained in:
Jacek Fefliński
2026-04-22 14:04:56 +02:00
parent 45e4a44db2
commit 3c7f82b1ae
1 changed files with 53 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
includes/admin/pages/page-infographic.php
+53 -14
View File
@@ -71,6 +71,7 @@ function statpress_infographic_page() {
// Włączenie skryptów dla Chart.js // Włączenie skryptów dla Chart.js
wp_enqueue_script( 'chart-js', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true ); wp_enqueue_script( 'chart-js', 'https://cdn.jsdelivr.net/npm/chart.js', array(), null, true );
wp_enqueue_script( 'html2canvas', 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', array(), null, true );
wp_register_script( 'statpress-infographic-chart-loader', false ); wp_register_script( 'statpress-infographic-chart-loader', false );
wp_enqueue_script( 'statpress-infographic-chart-loader' ); wp_enqueue_script( 'statpress-infographic-chart-loader' );
wp_add_inline_script( wp_add_inline_script(
@@ -101,6 +102,36 @@ function statpress_infographic_page() {
} }
} }
}); });
// Logika eksportu PNG
const exportBtn = document.getElementById("statpress-export-btn");
if (exportBtn) {
exportBtn.addEventListener("click", function() {
const originalText = exportBtn.innerText;
exportBtn.innerText = "Generowanie obrazu...";
exportBtn.disabled = true;
const exportArea = document.getElementById("statpress-export-area");
html2canvas(exportArea, {
scale: 2, // 2x lepsza rozdzielczość obrazka (Retina)
backgroundColor: "#f0f0f1", // Domyślne tło WP Admin
onclone: function(clonedDoc) {
// Pokazujemy nasz ukryty tytuł i dodajemy marginesy tylko na obrazku
const brand = clonedDoc.getElementById("statpress-export-brand");
if (brand) brand.style.display = "block";
clonedDoc.getElementById("statpress-export-area").style.padding = "24px";
}
}).then(canvas => {
let link = document.createElement("a");
link.download = "statpress-podsumowanie-' . esc_js( $current_year ) . '.png";
link.href = canvas.toDataURL("image/png");
link.click();
exportBtn.innerText = originalText;
exportBtn.disabled = false;
});
});
}
}); });
' '
); );
@@ -110,7 +141,7 @@ function statpress_infographic_page() {
<h1>Infografika Statystyk Sportowych</h1> <h1>Infografika Statystyk Sportowych</h1>
<hr class="wp-header-end"> <hr class="wp-header-end">
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
<form method="get" style="display: flex; gap: 10px; align-items: center;"> <form method="get" style="display: flex; gap: 10px; align-items: center;">
<input type="hidden" name="page" value="statpress-infographic"> <input type="hidden" name="page" value="statpress-infographic">
<label for="filter-by-year" style="font-weight: 500; color: #3c4043;">Filtruj według roku:</label> <label for="filter-by-year" style="font-weight: 500; color: #3c4043;">Filtruj według roku:</label>
@@ -121,6 +152,7 @@ function statpress_infographic_page() {
</select> </select>
<?php submit_button( 'Filtruj', 'secondary', 'filter_action', false, array( 'style' => 'margin: 0;' ) ); ?> <?php submit_button( 'Filtruj', 'secondary', 'filter_action', false, array( 'style' => 'margin: 0;' ) ); ?>
</form> </form>
<button type="button" id="statpress-export-btn" class="button button-primary">Pobierz PNG</button>
</div> </div>
<div class="postbox" style="margin-bottom: 20px;"> <div class="postbox" style="margin-bottom: 20px;">
@@ -133,21 +165,28 @@ function statpress_infographic_page() {
</div> </div>
</div> </div>
<div class="postbox" style="margin-bottom: 20px;"> <div id="statpress-export-area">
<div class="postbox-header"><h2 class="hndle">Statystyki dla <?php echo esc_html( $current_year ); ?></h2></div> <div id="statpress-export-brand" style="display: none; text-align: center; margin-bottom: 24px;">
<div class="inside statpress-infographic-grid"> <h2 style="font-size: 28px; margin: 0 0 6px 0; color: #202124;">Podsumowanie Sportowe <?php echo esc_html( $current_year ); ?></h2>
<div class="statpress-infographic-card"><h3>Dystans</h3><p><?php echo number_format( $yearly_stats->total_distance, 2, ',', ' ' ); ?> km</p></div> <p style="margin: 0; color: #5f6368; font-size: 14px;">Wygenerowano z wtyczki StatPress</p>
<div class="statpress-infographic-card"><h3>Czas</h3><p><?php echo esc_html( $yearly_stats->total_duration ); ?></p></div>
<div class="statpress-infographic-card"><h3>Wznios</h3><p><?php echo number_format( $yearly_stats->total_elevation_gain, 0, ',', ' ' ); ?> m</p></div>
<div class="statpress-infographic-card"><h3>Aktywności</h3><p><?php echo number_format( $yearly_stats->total_activities, 0, ',', ' ' ); ?></p></div>
</div> </div>
</div>
<div class="postbox" style="margin-bottom: 20px;"> <div class="postbox" style="margin-bottom: 20px;">
<div class="postbox-header"><h2 class="hndle">Rozkład Dystansu wg Kategorii w <?php echo esc_html( $current_year ); ?></h2></div> <div class="postbox-header"><h2 class="hndle">Statystyki dla <?php echo esc_html( $current_year ); ?></h2></div>
<div class="inside"> <div class="inside statpress-infographic-grid">
<div style="position: relative; height:40vh; width:100%; max-width: 600px; margin: 0 auto;"> <div class="statpress-infographic-card"><h3>Dystans</h3><p><?php echo number_format( $yearly_stats->total_distance, 2, ',', ' ' ); ?> km</p></div>
<canvas id="statpressCategoryPieChart"></canvas> <div class="statpress-infographic-card"><h3>Czas</h3><p><?php echo esc_html( $yearly_stats->total_duration ); ?></p></div>
<div class="statpress-infographic-card"><h3>Wznios</h3><p><?php echo number_format( $yearly_stats->total_elevation_gain, 0, ',', ' ' ); ?> m</p></div>
<div class="statpress-infographic-card"><h3>Aktywności</h3><p><?php echo number_format( $yearly_stats->total_activities, 0, ',', ' ' ); ?></p></div>
</div>
</div>
<div class="postbox" style="margin-bottom: 20px;">
<div class="postbox-header"><h2 class="hndle">Rozkład Dystansu wg Kategorii w <?php echo esc_html( $current_year ); ?></h2></div>
<div class="inside">
<div style="position: relative; height:40vh; width:100%; max-width: 600px; margin: 0 auto;">
<canvas id="statpressCategoryPieChart"></canvas>
</div>
</div> </div>
</div> </div>
</div> </div>