-
Notifications
You must be signed in to change notification settings - Fork 33
Expand file tree
/
Copy pathChart_View.php
More file actions
executable file
·120 lines (113 loc) · 6.34 KB
/
Chart_View.php
File metadata and controls
executable file
·120 lines (113 loc) · 6.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<?php
/**
* @package koko-analytics
* @license GPL-3.0+
* @author Danny van Kooten
*/
namespace KokoAnalytics;
class Chart_View
{
public function __construct(array $data, \DateTimeInterface $dateStart, \DateTimeInterface $dateEnd, int $height = 280, bool $showGroupOptions = true, string $group = 'day')
{
$y_max = array_reduce($data, function ($carry, $tick) {
return max($carry, $tick->pageviews);
}, 0);
$y_max_nice = $this->get_magnitude($y_max);
$padding_top = 6;
$padding_bottom = 24;
$padding_left = 4 + strlen(number_format_i18n($y_max_nice)) * 8;
$inner_height = $height - $padding_top - $padding_bottom;
$height_modifier = $y_max_nice > 0 ? $inner_height / $y_max_nice : 1;
$dateFormat = (string) get_option('date_format', 'Y-m-d');
$daysDiff = abs($dateEnd->diff($dateStart)->days);
$timezone = wp_timezone();
?>
<div class="ka-chart">
<?php if ($showGroupOptions && $daysDiff > 7) { ?>
<div class="text-end text-muted mb-2">
<?php esc_html_e('Group by', 'koko-analytics'); ?>
<?php if ($daysDiff <= 365) { ?>
<a class="text-muted" href="<?= esc_attr(remove_query_arg('group')); ?>"><?php esc_html_e('days', 'koko-analytics'); ?></a>
<?php } ?>
<a class="text-muted" href="<?= esc_attr(add_query_arg(['group' => 'week'])); ?>"><?php esc_html_e('weeks', 'koko-analytics'); ?></a>
<?php if ($daysDiff > 31) {
?><a class="text-muted" href="<?= esc_attr(add_query_arg(['group' => 'month'])); ?>"><?php esc_html_e('months', 'koko-analytics'); ?></a><?php
} ?>
<?php if ($daysDiff > 365) {
?><a class="text-muted" href="<?= esc_attr(add_query_arg(['group' => 'year'])); ?>"><?php esc_html_e('years', 'koko-analytics'); ?></a><?php
} ?>
</div>
<?php } /* end show group options */ ?>
<svg width="100%" height="<?= $height; ?>" id="ka-chart">
<g class="axes-y" transform="translate(<?= $padding_left; ?>, <?= $padding_top; ?>)" text-anchor="end" data-padding="<?= $padding_left; ?>">
<text x="0" y="<?= $inner_height; ?>" fill="#757575" dy="0.3em" >0</text>
<text x="0" y="<?= $inner_height / 2; ?>" fill="#757575" dy="0.3em"><?= \number_format_i18n($y_max_nice / 2); ?></text>
<text x="0" y="0" fill="#757575" dy="0.3em"><?= \number_format_i18n($y_max_nice); ?></text>
<line stroke="#eee" x1="8" x2="100%" y1="<?= $inner_height; ?>" y2="<?= $inner_height; ?>"></line>
<line stroke="#eee" x1="8" x2="100%" y1="<?= $inner_height / 2; ?>" y2="<?= $inner_height / 2; ?>"></line>
<line stroke="#eee" x1="8" x2="100%" y1="0" y2="0"></line>
</g>
<g class="axes-x" text-anchor="start" transform="translate(0, <?= $inner_height + 4; ?>)">
<text fill="#757575" x="<?= $padding_left; ?>" y="10" dy="1em" text-anchor="start"><?= \wp_date($dateFormat, $dateStart->getTimestamp()); ?></text>
<text fill="#757575" x="100%" y="10" dy="1em" text-anchor="end"><?= \wp_date($dateFormat, $dateEnd->getTimestamp()); ?></text>
</g>
<g class="bars" transform="translate(0, <?= $padding_top; ?>)">
<?php foreach ($data as $tick) {
$dt = (new \DateTimeImmutable($tick->date, $timezone));
$is_weekend = (int) $dt->format('N') >= 6;
$class_attr = $is_weekend ? 'class="weekend" ' : '';
$tick_label = $this->format_tick_date($dt, $group, $dateFormat);
// data attributes are for the hover tooltip, which is handled in JS
echo '<g ', $class_attr, 'data-date="', esc_attr($tick_label), '" data-pageviews="', \number_format_i18n($tick->pageviews), '" data-visitors="', \number_format_i18n($tick->visitors),'">';
echo '<rect class="ka--pageviews" width="0" height="', $tick->pageviews * $height_modifier,'" y="', ($inner_height - $tick->pageviews * $height_modifier),'"></rect>';
echo '<rect class="ka--visitors" width="0" height="', ($tick->visitors * $height_modifier), '" y="', ($inner_height - $tick->visitors * $height_modifier), '"></rect>';
echo '<line stroke="#ddd" y1="', $inner_height, '" y2="', ($inner_height + 6),'"></line>';
echo '</g>';
} ?>
</g>
</svg>
<div class="ka-chart--tooltip" style="display: none;">
<div class="ka-chart--tooltip-box">
<div class="ka-chart--tooltip-heading"></div>
<div style="display: flex">
<div class="ka-chart--tooltip-content ka--visitors">
<div class="ka-chart--tooltip-amount"></div>
<div><?php esc_html_e('Visitors', 'koko-analytics'); ?></div>
</div>
<div class="ka-chart--tooltip-content ka--pageviews">
<div class="ka-chart--tooltip-amount"></div>
<div><?php esc_html_e('Pageviews', 'koko-analytics'); ?></div>
</div>
</div>
</div>
<div class="ka-chart--tooltip-arrow"></div>
</div>
</div><?php
}
private function format_tick_date(\DateTimeImmutable $dt, string $group, string $dateFormat): string
{
switch ($group) {
case 'week':
$week_end = $dt->modify('+6 days');
return \wp_date('M j', $dt->getTimestamp()) . ' – ' . \wp_date('M j, Y', $week_end->getTimestamp());
case 'month':
return \wp_date('F Y', $dt->getTimestamp());
case 'year':
return \wp_date('Y', $dt->getTimestamp());
default:
return \wp_date($dateFormat, $dt->getTimestamp());
}
}
private function get_magnitude(int $n): int
{
if ($n < 10) {
return 10;
}
if ($n > 100000) {
return (int) ceil($n / 10000.0) * 10000;
}
$e = floor(log10($n));
$pow = pow(10, $e);
return (int) (ceil($n / $pow) * $pow);
}
}