add client-side CSV export for monthly/daily tables

Author: stklcode

css/dashboard.css

@@ -79,6 +79,10 @@ body.rtl .statify-chart * {
 	width: 80%;
 }
 
+.statify-table + a.button {
+	margin: 1em 0 0 1em;
+}
+
 
 #statify_dashboard .postbox-title-action a,
 #statify_dashboard .settings-link a {

inc/class-statify.php

@@ -269,7 +269,8 @@ public static function add_js(): void {
 			'statifyDashboard',
 			array(
 				'i18n'  => array(
-					'months' => array_map(
+					'sitename' => sanitize_key( get_bloginfo( 'name' ) ),
+					'months'   => array_map(
 						function ( $m ) {
 							return date_i18n( 'M', strtotime( '0000-' . $m . '-01' ) );
 						},

js/dashboard.js

@@ -354,13 +354,15 @@
 
 			tbody.insertBefore(row, tbody.firstChild);
 		}
+
+		addExportButton(table);
 	}
 
 	/**
 	 * Render yearly table.
 	 *
-	 * @param {HTMLElement} table Root element.
-	 * @param {any}         data  Data from API.
+	 * @param {HTMLTableElement} table Root element.
+	 * @param {any}              data  Data from API.
 	 */
 	function renderDailyTable(table, data) {
 		const rows = Array.from(table.querySelectorAll('tbody > tr'));
@@ -427,6 +429,8 @@
 		for (const row of rows) {
 			row.classList.remove('placeholder');
 		}
+
+		addExportButton(table);
 	}
 
 	/**
@@ -500,4 +504,43 @@
 					'</p>';
 			});
 	}
+
+	/**
+	 * Add a CSV export button to a table.
+	 *
+	 * @param {HTMLTableElement} table Table to process
+	 */
+	function addExportButton(table) {
+		const exportBtn = document.createElement('a');
+		exportBtn.classList.add('button');
+		exportBtn.role = 'button';
+
+		// Generate filename from table caption.
+		exportBtn.download =
+			statifyDashboard.i18n.sitename +
+			'-' +
+			table.caption.innerText.replaceAll(/\s+/g, '_') +
+			'-export-' +
+			new Date()
+				.toISOString()
+				.replace('T', '_')
+				.replaceAll(':', '-')
+				.substring(0, 16) +
+			'.csv';
+
+		// Generate CSV on demand.
+		exportBtn.innerText = wp.i18n.__('Export (CSV)', 'statify');
+		exportBtn.addEventListener('click', () => {
+			exportBtn.href =
+				'data:text/csv;charset=utf-8,' +
+				Array.from(table.rows)
+					.map((row) =>
+						Array.from(row.cells)
+							.map((col) => col.innerText)
+							.join(',')
+					)
+					.join('\r\n');
+		});
+		table.after(exportBtn);
+	}
 }

views/view-dashboard.php

@@ -91,6 +91,7 @@ class="nav-tab<?php echo ( $selected_year === $y ) ? ' nav-tab-active' : ''; ?>"
 	<section>
 		<h3><?php esc_html_e( 'Monthly / Yearly Views', 'statify' ); ?></h3>
 		<table id="statify-table-yearly" class="wp-list-table widefat striped statify-table">
+			<caption class="screen-reader-text"><?php esc_html_e( 'Monthly Views', 'statify' ); ?></caption>
 			<thead>
 				<tr>
 					<th scope="col"><?php esc_html_e( 'Year', 'statify' ); ?></th>
@@ -134,6 +135,15 @@ class="nav-tab<?php echo ( $selected_year === $y ) ? ' nav-tab-active' : ''; ?>"
 			?>
 		</h3>
 		<table id="statify-table-daily" class="wp-list-table widefat striped statify-table">
+			<caption class="screen-reader-text">
+				<?php
+				printf(
+					/* translators: %s is replaced by a year number (e.g. 2023) */
+					esc_html__( 'Daily Views %s', 'statify' ),
+					esc_html( $selected_year )
+				);
+				?>
+			</caption>
 			<thead>
 			<tr>
 				<th><?php esc_html_e( 'Day', 'statify' ); ?></th>