active_analytics 0.2.1 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +97 -15
  3. data/app/controllers/active_analytics/application_controller.rb +29 -6
  4. data/app/controllers/active_analytics/assets_controller.rb +36 -0
  5. data/app/controllers/active_analytics/browsers_controller.rb +27 -0
  6. data/app/controllers/active_analytics/pages_controller.rb +9 -10
  7. data/app/controllers/active_analytics/referrers_controller.rb +9 -5
  8. data/app/controllers/active_analytics/sites_controller.rb +5 -4
  9. data/app/helpers/active_analytics/browsers_helper.rb +12 -0
  10. data/app/lib/active_analytics/histogram.rb +47 -0
  11. data/app/models/active_analytics/browsers_per_day.rb +40 -0
  12. data/app/models/active_analytics/views_per_day.rb +16 -53
  13. data/app/views/active_analytics/assets/_charts.css +249 -0
  14. data/app/{assets/stylesheets/active_analytics/style.css → views/active_analytics/assets/_style.css} +36 -26
  15. data/app/views/active_analytics/assets/application.css.erb +2 -0
  16. data/app/{assets/javascripts/active_analytics → views/active_analytics/assets}/application.js +1 -3
  17. data/app/{assets/stylesheets/active_analytics → views/active_analytics/assets}/ariato.css +237 -234
  18. data/app/views/active_analytics/assets/browsers/arc.svg +1 -0
  19. data/app/views/active_analytics/assets/browsers/brave.svg +1 -0
  20. data/app/views/active_analytics/assets/browsers/chrome.svg +1 -0
  21. data/app/views/active_analytics/assets/browsers/default.svg +8 -0
  22. data/app/views/active_analytics/assets/browsers/firefox.svg +1 -0
  23. data/app/views/active_analytics/assets/browsers/internet_explorer.svg +1 -0
  24. data/app/views/active_analytics/assets/browsers/microsoft_edge.svg +1 -0
  25. data/app/views/active_analytics/assets/browsers/opera.svg +1 -0
  26. data/app/views/active_analytics/assets/browsers/safari.svg +1 -0
  27. data/app/views/active_analytics/assets/browsers/samsung_internet.svg +1 -0
  28. data/app/views/active_analytics/assets/browsers/vivaldi.svg +1 -0
  29. data/app/views/active_analytics/assets/browsers/yandex.svg +1 -0
  30. data/app/views/active_analytics/browsers/_table.html.erb +17 -0
  31. data/app/views/active_analytics/browsers/_version_table.html.erb +16 -0
  32. data/app/views/active_analytics/browsers/index.html.erb +9 -0
  33. data/app/views/active_analytics/browsers/show.html.erb +17 -0
  34. data/app/views/active_analytics/pages/_table.html.erb +6 -17
  35. data/app/views/active_analytics/pages/index.html.erb +2 -2
  36. data/app/views/active_analytics/pages/show.html.erb +7 -4
  37. data/app/views/active_analytics/referrers/_table.html.erb +9 -2
  38. data/app/views/active_analytics/referrers/index.html.erb +3 -3
  39. data/app/views/active_analytics/referrers/show.html.erb +6 -3
  40. data/app/views/active_analytics/sites/_histogram.html.erb +11 -4
  41. data/app/views/active_analytics/sites/_histogram_header.html.erb +10 -0
  42. data/app/views/active_analytics/sites/show.html.erb +9 -4
  43. data/app/views/layouts/active_analytics/_footer.html.erb +7 -7
  44. data/app/views/layouts/active_analytics/_header.html.erb +1 -3
  45. data/app/views/layouts/active_analytics/application.html.erb +5 -3
  46. data/config/routes.rb +7 -1
  47. data/db/migrate/20210303094108_create_active_analytics_views_per_days.rb +2 -3
  48. data/db/migrate/20240823150626_create_active_analytics_browsers_per_days.rb +13 -0
  49. data/lib/active_analytics/engine.rb +0 -4
  50. data/lib/active_analytics/version.rb +1 -1
  51. data/lib/active_analytics.rb +77 -3
  52. metadata +49 -12
  53. data/app/assets/stylesheets/active_analytics/application.css +0 -15
  54. data/app/assets/stylesheets/active_analytics/charts.css +0 -296
  55. /data/app/{assets/javascripts/active_analytics → views/active_analytics/assets}/ariato.js +0 -0
@@ -0,0 +1,249 @@
1
+ /*
2
+ * Charts.css v0.9.0 (https://ChartsCSS.org/)
3
+ * Copyright 2020 Rami Yushuvaev
4
+ * Licensed under MIT
5
+ */
6
+ .active-analytics .charts-css {
7
+ --chart-bg-color: transparent;
8
+ --heading-size: 0px;
9
+ --primary-axis-color: rgba(var(--color-grey-100), 1);
10
+ --primary-axis-style: solid;
11
+ --primary-axis-width: 1px;
12
+ --secondary-axes-color: rgba(var(--color-grey-50), 1);
13
+ --secondary-axes-style: solid;
14
+ --secondary-axes-width: 1px;
15
+ --data-axes-color: rgba(var(--color-grey-200), 1);
16
+ --data-axes-style: solid;
17
+ --data-axes-width: 1px;
18
+ --legend-border-color: rgba(var(--color-grey-200), 1);
19
+ position: relative;
20
+ display: block;
21
+ margin: 0;
22
+ padding: 0;
23
+ border: 0;
24
+ }
25
+
26
+ /*
27
+ * Chart wrapper element
28
+ */
29
+
30
+ .active-analytics .charts-css,
31
+ .active-analytics .charts-css::after,
32
+ .active-analytics .charts-css::before,
33
+ .active-analytics .charts-css *,
34
+ .active-analytics .charts-css *::after,
35
+ .active-analytics .charts-css *::before {
36
+ box-sizing: border-box;
37
+ }
38
+
39
+ /*
40
+ * Reset table element
41
+ */
42
+ .active-analytics table.charts-css {
43
+ border-collapse: collapse;
44
+ border-spacing: 0;
45
+ empty-cells: show;
46
+ overflow: initial;
47
+ background-color: transparent;
48
+ }
49
+
50
+ .active-analytics table.charts-css caption,
51
+ .active-analytics table.charts-css colgroup,
52
+ .active-analytics table.charts-css thead,
53
+ .active-analytics table.charts-css tbody,
54
+ .active-analytics table.charts-css tr,
55
+ .active-analytics table.charts-css th,
56
+ .active-analytics table.charts-css td {
57
+ display: block;
58
+ margin: 0;
59
+ padding: 0;
60
+ border: 0;
61
+ background-color: transparent;
62
+ }
63
+
64
+ .active-analytics table.charts-css colgroup,
65
+ .active-analytics table.charts-css thead,
66
+ .active-analytics table.charts-css tfoot {
67
+ display: none;
68
+ }
69
+
70
+
71
+ /*
72
+ * Chart colors
73
+ */
74
+
75
+ .active-analytics .charts-css.column tbody tr td {
76
+ background: rgba(var(--color-grey-100), 1);
77
+ padding: 0;
78
+ }
79
+
80
+ /*
81
+ * Chart data
82
+ */
83
+ .active-analytics .charts-css.hide-data .data {
84
+ opacity: 0;
85
+ }
86
+
87
+ .active-analytics .charts-css.show-data-on-hover .data {
88
+ transition-duration: .3s;
89
+ opacity: 0;
90
+ }
91
+
92
+ .active-analytics .charts-css.show-data-on-hover tr:hover .data {
93
+ transition-duration: .3s;
94
+ opacity: 1;
95
+ }
96
+
97
+ /*
98
+ * Chart labels
99
+ */
100
+
101
+ .active-analytics .charts-css.column:not(.show-labels) {
102
+ --labels-size: 0;
103
+ }
104
+
105
+ .active-analytics .charts-css.column:not(.show-labels) tbody tr th {
106
+ display: none;
107
+ }
108
+
109
+ .active-analytics .charts-css.column.show-labels {
110
+ --labels-size: 1.5rem;
111
+ }
112
+
113
+ .active-analytics .charts-css.column.show-labels tbody tr th {
114
+ display: flex;
115
+ justify-content: var(--labels-align, center);
116
+ align-items: center;
117
+ flex-direction: column;
118
+ }
119
+
120
+ @media (max-width: 600px) {
121
+ .active-analytics .charts-css.column.show-labels {
122
+ --labels-size: 0;
123
+ }
124
+
125
+ .active-analytics .charts-css.column.show-labels tbody tr th {
126
+ display: none;
127
+ }
128
+ }
129
+
130
+ /*
131
+ * Chart axes
132
+ */
133
+ .active-analytics .charts-css.column.show-primary-axis:not(.reverse) tbody tr {
134
+ border-block-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
135
+ }
136
+
137
+ .active-analytics .charts-css.column.show-primary-axis.reverse tbody tr {
138
+ border-block-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
139
+ }
140
+
141
+ .active-analytics .charts-css.column.show-5-secondary-axes:not(.reverse) tbody tr {
142
+ background-size: 100% 20%;
143
+ background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
144
+ }
145
+
146
+ .active-analytics .charts-css.column.show-5-secondary-axes.reverse tbody tr {
147
+ background-size: 100% 20%;
148
+ background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
149
+ }
150
+
151
+ /*
152
+ * Chart tooltips
153
+ */
154
+ .active-analytics .charts-css .tooltip {
155
+ position: absolute;
156
+ z-index: 1;
157
+ bottom: 50%;
158
+ left: 50%;
159
+ transform: translateX(-50%);
160
+ width: max-content;
161
+ padding: 5px 10px;
162
+ border-radius: 6px;
163
+ visibility: hidden;
164
+ opacity: 0;
165
+ transition: opacity .3s;
166
+ background-color: rgba(var(--color-grey-500), 1);
167
+ color: rgba(var(--color-grey-00), 1);
168
+ text-align: center;
169
+ font-size: .9rem;
170
+ }
171
+
172
+ .active-analytics .charts-css .tooltip::after {
173
+ content: "";
174
+ position: absolute;
175
+ top: 100%;
176
+ left: 50%;
177
+ margin-left: -5px;
178
+ border-width: 5px;
179
+ border-style: solid;
180
+ border-color: rgba(var(--color-grey-500), 1) transparent transparent;
181
+ }
182
+
183
+ .active-analytics .charts-css tr:hover .tooltip {
184
+ visibility: visible;
185
+ opacity: 1;
186
+ }
187
+
188
+ /*
189
+ * Column Chart
190
+ */
191
+ .active-analytics .charts-css.column tbody {
192
+ display: flex;
193
+ justify-content: space-between;
194
+ align-items: stretch;
195
+ width: 100%;
196
+ gap: 1px;
197
+ height: calc(100% - var(--heading-size));
198
+ }
199
+
200
+ .active-analytics .charts-css.column tbody tr {
201
+ position: relative;
202
+ flex-grow: 1;
203
+ flex-shrink: 1;
204
+ flex-basis: 0;
205
+ overflow-wrap: anywhere;
206
+ display: flex;
207
+ justify-content: flex-start;
208
+ min-width: 0;
209
+ }
210
+
211
+ .active-analytics .charts-css.column tbody tr th {
212
+ position: absolute;
213
+ right: 0;
214
+ left: 0;
215
+ }
216
+
217
+ .active-analytics .charts-css.column tbody tr td {
218
+ display: flex;
219
+ justify-content: center;
220
+ width: 100%;
221
+ height: calc(100% * var(--size, 1));
222
+ position: relative;
223
+ }
224
+
225
+ .active-analytics .charts-css.column:not(.reverse) tbody tr {
226
+ align-items: flex-end;
227
+ margin-block-end: var(--labels-size);
228
+ }
229
+
230
+ .active-analytics .charts-css.column:not(.reverse) tbody tr th {
231
+ bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
232
+ height: var(--labels-size);
233
+ color: rgba(var(--color-grey-400), 1);
234
+ font-weight: 400;
235
+ }
236
+
237
+ .active-analytics .charts-css.column:not(.reverse) tbody tr td {
238
+ align-items: flex-start;
239
+ }
240
+
241
+ .active-analytics .charts-css.column:not(.stacked) tbody tr td {
242
+ flex-grow: 1;
243
+ flex-shrink: 1;
244
+ flex-basis: 0;
245
+ }
246
+
247
+ .active-analytics .charts-css.column:not(.reverse-data) tbody {
248
+ flex-direction: row;
249
+ }
@@ -1,10 +1,10 @@
1
- body {
1
+ .active-analytics body {
2
2
  padding: 0;
3
3
  margin: 0;
4
4
  width: 100%;
5
5
  }
6
6
 
7
- body > header nav {
7
+ .active-analytics body > header nav {
8
8
  width: 100%;
9
9
  max-width: 1280px;
10
10
  margin: 0 auto;
@@ -15,15 +15,15 @@ body > header nav {
15
15
  min-height: 88px;
16
16
  }
17
17
 
18
- header nav .menubutton {
18
+ .active-analytics header nav .menubutton {
19
19
  margin-left: auto;
20
20
  }
21
21
 
22
- header .logo {
22
+ .active-analytics header .logo {
23
23
  margin-right: 8px;
24
24
  }
25
25
 
26
- header .logo svg {
26
+ .active-analytics header .logo svg {
27
27
  width: 24px;
28
28
  height: 24px;
29
29
  fill: none;
@@ -32,7 +32,7 @@ header .logo svg {
32
32
  vertical-align: middle;
33
33
  }
34
34
 
35
- header .is-link {
35
+ .active-analytics header .is-link {
36
36
  text-transform: none;
37
37
  text-decoration: none;
38
38
  font-size: 1rem;
@@ -44,62 +44,72 @@ header .is-link {
44
44
  color: rgba(var(--color-grey-700), 1);
45
45
  }
46
46
 
47
- header .is-link:hover {
47
+ .active-analytics header .is-link:hover {
48
48
  background: rgba(var(--color-grey-50), 1);
49
49
  }
50
50
 
51
- main {
51
+ .active-analytics main {
52
52
  width: 100%;
53
53
  max-width: 1280px;
54
54
  margin: 0 auto;
55
55
  padding: 0 24px;
56
56
  }
57
57
 
58
- main h2 {
58
+ .active-analytics main h2 {
59
59
  word-break: break-word;
60
+ display: flex;
61
+ gap: var(--space);
60
62
  }
61
63
 
62
- section {
64
+ .active-analytics section {
63
65
  margin-bottom: var(--space-4x);
64
66
  }
65
67
 
66
- .tooltip-date {
68
+ .active-analytics .tooltip-date {
67
69
  color: rgba(var(--color-grey-100), 1);
68
70
  }
69
71
 
70
- .card h3 {
72
+ .active-analytics .card h3 {
71
73
  display: flex;
72
74
  }
73
75
 
74
- .card h3 a {
76
+ .active-analytics .card h3 small {
77
+ color: rgba(var(--color-red-500), 1);
78
+ }
79
+
80
+ .active-analytics .card h3 small.is-success {
81
+ color: rgba(var(--color-green-500), 1);
82
+ }
83
+
84
+ .active-analytics .card h3 a {
75
85
  margin-left: auto;
76
86
  font-weight: 400;
77
87
  font-size: 1rem;
78
88
  }
79
89
 
80
- .card table {
90
+ .active-analytics .card table {
81
91
  margin: 0 -24px -24px;
82
92
  width: calc(100% + 48px);
83
93
  }
84
94
 
85
- tr td:first-of-type {
95
+ .active-analytics tr td:first-of-type {
86
96
  padding: 12px 0px 12px 24px;
87
97
  }
88
98
 
89
- tr td:last-of-type {
99
+ .active-analytics tr td:last-of-type {
90
100
  padding: 12px 24px 12px 0;
91
101
  }
92
102
 
93
- td a {
103
+ .active-analytics td a {
94
104
  word-break: break-word;
95
105
  }
96
106
 
97
- td.number {
107
+ .active-analytics td.number {
98
108
  text-align: right;
99
109
  font-variant-numeric: tabular-nums;
100
110
  }
101
111
 
102
- .referer-favicon {
112
+ .active-analytics .referer-favicon {
103
113
  width: 16px;
104
114
  height: 16px;
105
115
  display: inline-block;
@@ -108,7 +118,7 @@ td.number {
108
118
  margin-right: 4px;
109
119
  }
110
120
 
111
- div.is-empty {
121
+ .active-analytics div.is-empty {
112
122
  display: flex;
113
123
  align-items: center;
114
124
  justify-content: center;
@@ -117,34 +127,34 @@ div.is-empty {
117
127
  color: rgba(var(--color-grey-300), 1);
118
128
  }
119
129
 
120
- body > footer {
130
+ .active-analytics body > footer {
121
131
  max-width: 1280px;
122
132
  margin: 48px auto 0;
123
133
  padding: 24px;
124
134
  }
125
135
 
126
- body > footer ul {
136
+ .active-analytics body > footer ul {
127
137
  margin: 0;
128
138
  list-style-type: none;
129
139
  padding: 0;
130
140
  }
131
141
 
132
- body > footer .card {
142
+ .active-analytics body > footer .card {
133
143
  margin: 0;
134
144
  background: rgba(var(--color-grey-50), 1);
135
145
  }
136
146
 
137
- body > footer .card p {
147
+ .active-analytics body > footer .card p {
138
148
  padding: 0 0 2px;
139
149
  color: rgba(var(--color-grey-400), 1);
140
150
  }
141
151
 
142
152
  @media (max-width: 480px) {
143
- header nav .menubutton {
153
+ .active-analytics header nav .menubutton {
144
154
  margin-top: 24px;
145
155
  }
146
156
 
147
- [role="dialog"] {
157
+ .active-analytics [role="dialog"] {
148
158
  min-width: 280px;
149
159
  }
150
160
  }
@@ -0,0 +1,2 @@
1
+ <%= render "charts" %>
2
+ <%= render "style" %>
@@ -1,5 +1,3 @@
1
- //= require active_analytics/ariato
2
-
3
1
  ActiveAnalytics = {}
4
2
 
5
3
  ActiveAnalytics.Header = function() {
@@ -13,4 +11,4 @@ ActiveAnalytics.Header.prototype.toggleDateRangeForm = function() {
13
11
  form.setAttribute("hidden", "hidden")
14
12
  }
15
13
 
16
- Ariato.launchWhenDomIsReady()
14
+ Ariato.launchWhenDomIsReady()