Skip to content

Commit

Permalink
simplify data provision
Browse files Browse the repository at this point in the history
  • Loading branch information
@dannyvankooten
dannyvankooten committed Oct 31, 2023
1 parent bbb54d2 commit a541554
Show file tree
Hide file tree
Showing 7 changed files with 62 additions and 63 deletions.
22 changes: 13 additions & 9 deletions assets/src/js/components/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,8 @@ const tooltip = createTooltip()
*/
function yScale (yMax) {
const max = magnitude(yMax)
const nTicks = 2
const step = max / nTicks
const ticks = []
for (let i = 0; i <= max; i += step) {
ticks.push(i)
}

return {
ticks,
ticks: [0, max / 2, max],
max
}
}
Expand Down Expand Up @@ -59,6 +52,12 @@ function hideTooltip() {
tooltip.style.display = 'none'
}

/**
* @param {HTMLElement|VNode} root
* @param {array} data
* @param {number} height
* @returns {{update: update}}
*/
export default function(root, data, height) {
if (!height) {
height = Math.max(240, Math.min(window.innerHeight / 3, window.innerWidth / 2, 360));
Expand All @@ -73,13 +72,18 @@ export default function(root, data, height) {
document.body.appendChild(tooltip)
document.addEventListener('click', (evt) => {
// don't hide if click was inside tooltip
if (evt.target.matches && evt.target.matches('.ka-chart *,.ka-chart--tooltip *')) {
if (evt.target.matches('.ka-chart *,.ka-chart--tooltip *')) {
return
}

tooltip.style.display = 'none'
})

/**
* @param {{pageviews: number, visitors: number, date: Date}} data
* @param {number} barWidth
* @returns {(function(*): void)|*}
*/
function createShowTooltip (data, barWidth) {
return (evt) => {
tooltip.querySelector('.ka-chart--tooltip-heading').textContent = format(data.date, dateFormatOptions);
Expand Down
2 changes: 1 addition & 1 deletion assets/src/js/dashboard-widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ function maybeRender() {
return;
}

let chart = Chart(el, 200);
let chart = Chart(el, [], 200);
chart.update(startDate, endDate)
}

Expand Down
3 changes: 1 addition & 2 deletions assets/src/js/dashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ import Datepicker from './components/datepicker.js'
import Totals from './components/totals.js'
import { PostsComponent, ReferrersComponent } from './components/block-components.js'
import { parseISO8601, toISO8601 } from './util/dates.js'
const data = window.koko_analytics_data;
let { startDate, endDate } = window.koko_analytics
let { startDate, endDate, data } = window.koko_analytics
startDate = parseISO8601(startDate)
endDate = parseISO8601(endDate)

Expand Down
33 changes: 22 additions & 11 deletions src/class-dashboard.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,30 @@ public function show(): void

private function get_script_data(): array
{
// TODO: Determine group parameter for pre-loading chart data

$settings = get_settings();
$dateRange = (new Dates())->get_range($settings['default_view']);
return array(
$stats = new Stats();
$dates = new Dates();
[$dateStart, $dateEnd] = $dates->get_range($settings['default_view']);
$items_per_page = (int) apply_filters('koko_analytics_items_per_page', 20);

return apply_filters('koko_analytics_dashboard_script_data', array(
'root' => rest_url(),
'nonce' => wp_create_nonce('wp_rest'),
'items_per_page' => (int) apply_filters('koko_analytics_items_per_page', 20),
'startDate' => $_GET['start_date'] ?? $dateRange[0]->format('Y-m-d'),
'endDate' => $_GET['end_date'] ?? $dateRange[1]->format('Y-m-d'),
'items_per_page' => $items_per_page,
'startDate' => $_GET['start_date'] ?? $dateStart->format('Y-m-d'),
'endDate' => $_GET['end_date'] ?? $dateEnd->format('Y-m-d'),
'i18n' => array(
'Visitors' => __('Visitors', 'koko-analytics'),
'Pageviews' => __('Pageviews', 'koko-analytics'),
),
'data' => array(
'chart' => $stats->get_stats($dateStart->format("Y-m-d"), $dateEnd->format('Y-m-d'), 'day'),
'posts' => $stats->get_posts($dateStart->format("Y-m-d"), $dateEnd->format('Y-m-d'), 0, $items_per_page),
'referrers' => $stats->get_referrers($dateStart->format("Y-m-d"), $dateEnd->format('Y-m-d'), 0, $items_per_page),
)
);
), $dateStart, $dateEnd);
}

public function get_date_presets(): array
Expand All @@ -81,23 +92,23 @@ public function get_date_presets(): array
private function get_usage_tip(): string
{
$tips = [
__('Tip: use the arrow keys on your keyboard to cycle through date ranges.', 'koko-analytics'),
__('Tip: you can set a default date range in the plugin settings.', 'koko-analytics'),
esc_html__('Tip: use the arrow keys on your keyboard to cycle through date ranges.', 'koko-analytics'),
esc_html__('Tip: you can set a default date range in the plugin settings.', 'koko-analytics'),
sprintf(__('Tip: did you know there is a widget, shortcode and template function to <a href="%1s">show a list of the most viewed posts</a> on your site?', 'koko-analytics'), 'https://www.kokoanalytics.com/kb/showing-most-viewed-posts-on-your-wordpress-site/'),
sprintf(__('Tip: Use <a href="%1s">Koko Analytics Pro</a> to set up custom event tracking.', 'koko-analytics'), 'https://www.kokoanalytics.com/pricing/')
];
return $tips[array_rand($tips)];
}

private function maybe_show_adblocker_notice()
private function maybe_show_adblocker_notice(): void
{
?>
<div class="notice notice-warning is-dismissible" id="koko-analytics-adblock-notice" style="display: none;">
<p>
<?php _e('You appear to be using an ad-blocker that has Koko Analytics on its blocklist. Please whitelist this domain in your ad-blocker setting if your dashboard does not seem to be working correctly.', 'koko-analytics'); ?>
<?php echo esc_html__('You appear to be using an ad-blocker that has Koko Analytics on its blocklist. Please whitelist this domain in your ad-blocker setting if your dashboard does not seem to be working correctly.', 'koko-analytics'); ?>
</p>
</div>
<script src="<?php echo plugins_url('/assets/dist/js/koko-analytics-script-test.js', KOKO_ANALYTICS_PLUGIN_FILE); ?>"
<script src="<?php echo plugins_url('/assets/dist/js/koko-analytics-script-test.js', KOKO_ANALYTICS_PLUGIN_FILE); ?>?v=<?php echo KOKO_ANALYTICS_VERSION; ?>"
defer onerror="document.getElementById('koko-analytics-adblock-notice').style.display = '';"></script>
<?php
}
Expand Down
32 changes: 16 additions & 16 deletions src/class-dates.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,45 +9,45 @@ public function get_range(string $key): array
switch ($key) {
case 'today':
return [
new \DateTime('today midnight'),
new \DateTime('tomorrow midnight, -1 second')
new \DateTimeImmutable('today midnight'),
new \DateTimeImmutable('tomorrow midnight, -1 second')
];
case 'yesterday':
return [
new \DateTime('yesterday midnight'),
new \DateTime('today midnight, -1 second')
new \DateTimeImmutable('yesterday midnight'),
new \DateTimeImmutable('today midnight, -1 second')
];
case 'this_week':
$offset = get_option('start_of_week', 0);
return [
(new \DateTime('last sunday, midnight'))->modify("+$offset days"),
(new \DateTime('next sunday, midnight, -1 second'))->modify("+$offset days")
(new \DateTimeImmutable('last sunday, midnight'))->modify("+$offset days"),
(new \DateTimeImmutable('next sunday, midnight, -1 second'))->modify("+$offset days")
];
case 'last_week':
$offset = get_option('start_of_week', 0);
return [
(new \DateTime('last sunday, midnight, -7 days'))->modify("+$offset days"),
(new \DateTime('last sunday, midnight, -1 second'))->modify("+$offset days"),
(new \DateTimeImmutable('last sunday, midnight, -7 days'))->modify("+$offset days"),
(new \DateTimeImmutable('last sunday, midnight, -1 second'))->modify("+$offset days"),
];
case 'last_14_days':
return [
new \DateTime('-14 days'),
new \DateTime('tomorrow midnight, -1 second')
new \DateTimeImmutable('-14 days'),
new \DateTimeImmutable('tomorrow midnight, -1 second')
];
case 'last_28_days':
return [
new \DateTime('-28 days'),
new \DateTime('tomorrow midnight, -1 second')
new \DateTimeImmutable('-28 days'),
new \DateTimeImmutable('tomorrow midnight, -1 second')
];
case 'this_month':
return [
new \DateTime('first day of this month'),
new \DateTime('last day of this month')
new \DateTimeImmutable('first day of this month'),
new \DateTimeImmutable('last day of this month')
];
case 'last_month':
return [
new \DateTime('first day of last month, midnight'),
new \DateTime('last day of last month')
new \DateTimeImmutable('first day of last month, midnight'),
new \DateTimeImmutable('last day of last month')
];
case 'this_year':
$now = new \DateTimeImmutable('now');
Expand Down
23 changes: 4 additions & 19 deletions src/views/dashboard-page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,10 @@
use function KokoAnalytics\fmt_large_number;
?>
<script src="<?php echo plugins_url('assets/dist/js/dashboard.js', KOKO_ANALYTICS_PLUGIN_FILE); ?>?v=<?php echo KOKO_ANALYTICS_VERSION; ?>" defer></script>
<script>
var koko_analytics = <?php echo json_encode($this->get_script_data()); ?>;
</script>
<?php do_action('koko_analytics_dashboard_print_assets'); ?>
<link rel="stylesheet" href="<?php echo plugins_url('assets/dist/css/dashboard.css', KOKO_ANALYTICS_PLUGIN_FILE); ?>?v=<?php echo KOKO_ANALYTICS_VERSION; ?>">
<div class="wrap">

<?php $this->maybe_show_adblocker_notice(); ?>

<noscript>
<p><?php echo esc_html__('Please enable JavaScript for this page to work.', 'koko-analytics'); ?></p>
</noscript>

<?php require __DIR__ . '/nav.php'; ?>

<div class="ka-datepicker">
Expand All @@ -42,7 +33,7 @@
<span class="ka-datepicker--quicknav-next" title=<?php echo esc_html__('Next', 'koko-analytics'); ?>></span>
</div>
<div class="ka-datepicker--dropdown-content">
<label for="ka-date-presets"><?php echo __('Date range', 'koko-analytics'); ?></label>
<label for="ka-date-presets"><?php echo esc_html__('Date range', 'koko-analytics'); ?></label>
<select id="ka-date-presets">
<option value="custom" <?php echo $preset === 'custom' ? 'selected' : ''; ?> disabled><?php echo esc_html__('Custom', 'koko-analytics'); ?></option>
<?php foreach ($this->get_date_presets() as $key => $label) {
Expand All @@ -55,13 +46,13 @@
</select>
<div style="display: flex; margin-top: 12px;">
<div>
<label for='ka-date-start'><?php echo __('Start date', 'koko-analytics'); ?></label>
<label for='ka-date-start'><?php echo esc_html__('Start date', 'koko-analytics'); ?></label>
<input id='ka-date-start' type="date" size="10" placeholder="YYYY-MM-DD" min="2000-01-01" max="2100-01-01"
value="<?php echo $dateStart->format('Y-m-d'); ?>">
<span>&nbsp;&mdash;&nbsp;</span>
</div>
<div>
<label for='ka-date-end'><?php echo __('End date', 'koko-analytics'); ?></label>
<label for='ka-date-end'><?php echo esc_html__('End date', 'koko-analytics'); ?></label>
<input id='ka-date-end' type="date" size="10" placeholder="YYYY-MM-DD" min="2000-01-01" max="2100-01-01"
value="<?php echo $dateEnd->format('Y-m-d'); ?>">
</div>
Expand Down Expand Up @@ -147,14 +138,8 @@
<div class="ka-margin-s" style="text-align: right">
<p><?php echo $this->get_usage_tip(); ?></p>
</div>

</div>

<script>
var koko_analytics_data = {
chart: <?php echo json_encode($stats->get_stats($dateStart->format("Y-m-d"), $dateEnd->format('Y-m-d'), 'day')) ?>,
posts: <?php echo json_encode($stats->get_posts($dateStart->format("Y-m-d"), $dateEnd->format('Y-m-d'), 0, 20)) ?>,
referrers: <?php echo json_encode($stats->get_referrers($dateStart->format("Y-m-d"), $dateEnd->format('Y-m-d'), 0, 20)) ?>,
<?php do_action('koko_analytics_print_dashboard_data', $dateStart, $dateEnd); ?>
}
var koko_analytics = <?php echo json_encode($this->get_script_data()); ?>;
</script>
10 changes: 5 additions & 5 deletions src/views/settings-page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@
<?php require __DIR__ . '/nav.php'; ?>

<div class="ka-admin-container">
<h1 class="ka-logo"><?php esc_html_e('Koko Analytics Settings', 'koko-analytics'); ?></h1>
<h1 class="ka-logo"><?php echo esc_html__('Koko Analytics Settings', 'koko-analytics'); ?></h1>

<?php if (isset($_GET['settings-updated'])) { ?>
<div class="notice notice-success is-dismissible">
<p><strong><?php echo __('Settings saved.'); ?></strong></p>
<p><strong><?php echo esc_html__('Settings saved.'); ?></strong></p>
</div>
<?php } ?>

Expand Down Expand Up @@ -58,15 +58,15 @@
<label class="ka-setings--cb-label"><input type="radio" name="koko_analytics_settings[is_dashboard_public]" value="0" <?php checked($settings['is_dashboard_public'], 0); ?>> <?php esc_html_e('No'); ?></label>
</fieldset>
<p class="description">
<?php printf(__('Set to "yes" if you want your dashboard to be publicly accessible. With this setting enabled, you can <a href="%s">find your public dashboard here</a>.', 'koko-analytics'), $public_dashboard_url); ?>
<?php echo sprintf(__('Set to "yes" if you want your dashboard to be publicly accessible. With this setting enabled, you can <a href="%s">find your public dashboard here</a>.', 'koko-analytics'), $public_dashboard_url); ?>
</p>
</div>
<div class="ka-margin-m">
<label for="ka-default-date-period" class="ka-settings--label"><?php esc_html_e('Default date period', 'koko-analytics'); ?></label>
<select id="ka-default-date-period" name="koko_analytics_settings[default_view]">
<?php
foreach ($date_presets as $key => $value) {
echo sprintf('<option value="%s" %s>%s</option>', esc_attr($key), selected($key === $settings['default_view'], true, false), esc_html($value));
foreach ($date_presets as $key => $label) {
echo sprintf('<option value="%s" %s>%s</option>', esc_attr($key), selected($key === $settings['default_view'], true, false), esc_html($label));
}
?>
</select>
Expand Down

0 comments on commit a541554

Please sign in to comment.