active_analytics 0.2.0 → 0.3.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 (34) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +105 -15
  3. data/app/controllers/active_analytics/application_controller.rb +24 -4
  4. data/app/controllers/active_analytics/assets_controller.rb +29 -0
  5. data/app/controllers/active_analytics/pages_controller.rb +9 -10
  6. data/app/controllers/active_analytics/referrers_controller.rb +9 -5
  7. data/app/controllers/active_analytics/sites_controller.rb +4 -4
  8. data/app/models/active_analytics/views_per_day.rb +22 -3
  9. data/app/views/active_analytics/assets/_charts.css +249 -0
  10. data/app/{assets/stylesheets/active_analytics/style.css → views/active_analytics/assets/_style.css} +37 -38
  11. data/app/views/active_analytics/assets/application.css.erb +2 -0
  12. data/app/{assets/javascripts/active_analytics → views/active_analytics/assets}/application.js +1 -3
  13. data/app/views/active_analytics/assets/ariato.css +875 -0
  14. data/app/views/active_analytics/assets/ariato.js +322 -0
  15. data/app/views/active_analytics/pages/_table.html.erb +6 -17
  16. data/app/views/active_analytics/pages/index.html.erb +1 -1
  17. data/app/views/active_analytics/pages/show.html.erb +7 -8
  18. data/app/views/active_analytics/referrers/_table.html.erb +9 -2
  19. data/app/views/active_analytics/referrers/index.html.erb +2 -2
  20. data/app/views/active_analytics/referrers/show.html.erb +6 -3
  21. data/app/views/active_analytics/sites/_histogram.html.erb +9 -2
  22. data/app/views/active_analytics/sites/_histogram_header.html.erb +10 -0
  23. data/app/views/active_analytics/sites/show.html.erb +2 -2
  24. data/app/views/layouts/active_analytics/_footer.html.erb +3 -3
  25. data/app/views/layouts/active_analytics/_header.html.erb +1 -3
  26. data/app/views/layouts/active_analytics/application.html.erb +5 -3
  27. data/config/routes.rb +2 -1
  28. data/lib/active_analytics/version.rb +1 -1
  29. data/lib/active_analytics.rb +47 -4
  30. metadata +15 -11
  31. data/app/assets/javascripts/active_analytics/ariato.js +0 -746
  32. data/app/assets/stylesheets/active_analytics/application.css +0 -15
  33. data/app/assets/stylesheets/active_analytics/ariato.css +0 -3548
  34. data/app/assets/stylesheets/active_analytics/charts.css +0 -424
@@ -1,424 +0,0 @@
1
- /*
2
- * Charts.css v0.9.0 (https://ChartsCSS.org/)
3
- * Copyright 2020 Rami Yushuvaev
4
- * Licensed under MIT
5
- */
6
- .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
- .charts-css, .charts-css::after, .charts-css::before,
31
- .charts-css *,
32
- .charts-css *::after,
33
- .charts-css *::before {
34
- -webkit-box-sizing: border-box;
35
- box-sizing: border-box;
36
- }
37
-
38
- /*
39
- * Reset table element
40
- */
41
- table.charts-css {
42
- border-collapse: collapse;
43
- border-spacing: 0;
44
- empty-cells: show;
45
- overflow: initial;
46
- background-color: transparent;
47
- }
48
-
49
- table.charts-css caption,
50
- table.charts-css colgroup,
51
- table.charts-css thead,
52
- table.charts-css tbody,
53
- table.charts-css tr,
54
- table.charts-css th,
55
- table.charts-css td {
56
- display: block;
57
- margin: 0;
58
- padding: 0;
59
- border: 0;
60
- background-color: transparent;
61
- }
62
-
63
- table.charts-css colgroup,
64
- table.charts-css thead,
65
- table.charts-css tfoot {
66
- display: none;
67
- }
68
-
69
-
70
- /*
71
- * Chart colors
72
- */
73
-
74
- .charts-css.column tbody tr td {
75
- background: rgba(var(--color-grey-100), 1);
76
- padding: 0;
77
- }
78
-
79
- /*
80
- * Chart data
81
- */
82
- .charts-css.hide-data .data {
83
- opacity: 0;
84
- }
85
-
86
- .charts-css.show-data-on-hover .data {
87
- -webkit-transition-duration: .3s;
88
- transition-duration: .3s;
89
- opacity: 0;
90
- }
91
-
92
- .charts-css.show-data-on-hover tr:hover .data {
93
- -webkit-transition-duration: .3s;
94
- transition-duration: .3s;
95
- opacity: 1;
96
- }
97
-
98
- /*
99
- * Chart labels
100
- */
101
-
102
- .charts-css.column:not(.show-labels) {
103
- --labels-size: 0;
104
- }
105
-
106
- .charts-css.column:not(.show-labels) tbody tr th {
107
- display: none;
108
- }
109
-
110
- .charts-css.column.show-labels {
111
- --labels-size: 1.5rem;
112
- }
113
-
114
- .charts-css.column.show-labels tbody tr th {
115
- display: -webkit-box;
116
- display: -ms-flexbox;
117
- display: flex;
118
- -webkit-box-pack: var(--labels-align, center);
119
- -ms-flex-pack: var(--labels-align, center);
120
- justify-content: var(--labels-align, center);
121
- -webkit-box-align: center;
122
- -ms-flex-align: center;
123
- align-items: center;
124
- -webkit-box-orient: vertical;
125
- -webkit-box-direction: normal;
126
- -ms-flex-direction: column;
127
- flex-direction: column;
128
- }
129
-
130
- @media (max-width: 600px) {
131
- .charts-css.column.show-labels {
132
- --labels-size: 0;
133
- }
134
-
135
- .charts-css.column.show-labels tbody tr th {
136
- display: none;
137
- }
138
- }
139
-
140
- /*
141
- * Chart axes
142
- */
143
- .charts-css.column.show-primary-axis:not(.reverse) tbody tr {
144
- -webkit-border-after: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
145
- border-block-end: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
146
- }
147
-
148
- .charts-css.column.show-primary-axis.reverse tbody tr {
149
- -webkit-border-before: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
150
- border-block-start: var(--primary-axis-width) var(--primary-axis-style) var(--primary-axis-color);
151
- }
152
-
153
- .charts-css.column.show-1-secondary-axes:not(.reverse) tbody tr {
154
- background-size: 100% 100%;
155
- background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
156
- background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
157
- }
158
-
159
- .charts-css.column.show-1-secondary-axes.reverse tbody tr {
160
- background-size: 100% 100%;
161
- background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
162
- background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
163
- }
164
-
165
- .charts-css.column.show-2-secondary-axes:not(.reverse) tbody tr {
166
- background-size: 100% 50%;
167
- background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
168
- background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
169
- }
170
-
171
- .charts-css.column.show-2-secondary-axes.reverse tbody tr {
172
- background-size: 100% 50%;
173
- background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
174
- background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
175
- }
176
-
177
- .charts-css.column.show-3-secondary-axes:not(.reverse) tbody tr {
178
- background-size: 100% 33.333333%;
179
- background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
180
- background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
181
- }
182
-
183
- .charts-css.column.show-3-secondary-axes.reverse tbody tr {
184
- background-size: 100% 33.333333%;
185
- background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
186
- background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
187
- }
188
-
189
- .charts-css.column.show-4-secondary-axes:not(.reverse) tbody tr {
190
- background-size: 100% 25%;
191
- background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
192
- background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
193
- }
194
-
195
- .charts-css.column.show-4-secondary-axes.reverse tbody tr {
196
- background-size: 100% 25%;
197
- background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
198
- background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
199
- }
200
-
201
- .charts-css.column.show-5-secondary-axes:not(.reverse) tbody tr {
202
- background-size: 100% 20%;
203
- background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
204
- background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
205
- }
206
-
207
- .charts-css.column.show-5-secondary-axes.reverse tbody tr {
208
- background-size: 100% 20%;
209
- background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
210
- background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
211
- }
212
-
213
- .charts-css.column.show-6-secondary-axes:not(.reverse) tbody tr {
214
- background-size: 100% 16.666667%;
215
- background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
216
- background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
217
- }
218
-
219
- .charts-css.column.show-6-secondary-axes.reverse tbody tr {
220
- background-size: 100% 16.666667%;
221
- background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
222
- background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
223
- }
224
-
225
- .charts-css.column.show-7-secondary-axes:not(.reverse) tbody tr {
226
- background-size: 100% 14.285714%;
227
- background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
228
- background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
229
- }
230
-
231
- .charts-css.column.show-7-secondary-axes.reverse tbody tr {
232
- background-size: 100% 14.285714%;
233
- background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
234
- background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
235
- }
236
-
237
- .charts-css.column.show-8-secondary-axes:not(.reverse) tbody tr {
238
- background-size: 100% 12.5%;
239
- background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
240
- background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
241
- }
242
-
243
- .charts-css.column.show-8-secondary-axes.reverse tbody tr {
244
- background-size: 100% 12.5%;
245
- background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
246
- background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
247
- }
248
-
249
- .charts-css.column.show-9-secondary-axes:not(.reverse) tbody tr {
250
- background-size: 100% 11.111111%;
251
- background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
252
- background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
253
- }
254
-
255
- .charts-css.column.show-9-secondary-axes.reverse tbody tr {
256
- background-size: 100% 11.111111%;
257
- background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
258
- background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
259
- }
260
-
261
- .charts-css.column.show-10-secondary-axes:not(.reverse) tbody tr {
262
- background-size: 100% 10%;
263
- background-image: -webkit-gradient(linear, left top, left bottom, from(var(--secondary-axes-color)), to(transparent));
264
- background-image: linear-gradient(var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
265
- }
266
-
267
- .charts-css.column.show-10-secondary-axes.reverse tbody tr {
268
- background-size: 100% 10%;
269
- background-image: -webkit-gradient(linear, left bottom, left top, from(var(--secondary-axes-color)), to(transparent));
270
- background-image: linear-gradient(0deg, var(--secondary-axes-color) var(--secondary-axes-width), transparent var(--secondary-axes-width));
271
- }
272
-
273
- .charts-css.column.show-data-axes tbody tr {
274
- -webkit-border-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
275
- border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
276
- }
277
-
278
- .charts-css.column.show-data-axes:not(.reverse-data) tbody tr:first-of-type {
279
- -webkit-border-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
280
- border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
281
- }
282
-
283
- .charts-css.column.show-dataset-axes tbody tr td {
284
- -webkit-border-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
285
- border-inline-end: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
286
- }
287
-
288
- .charts-css.column.show-dataset-axes:not(.reverse-data) tbody tr:first-of-type td {
289
- -webkit-border-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
290
- border-inline-start: var(--data-axes-width) var(--data-axes-style) var(--data-axes-color);
291
- }
292
-
293
- /*
294
- * Chart tooltips
295
- */
296
- .charts-css .tooltip {
297
- position: absolute;
298
- z-index: 1;
299
- bottom: 50%;
300
- left: 50%;
301
- -webkit-transform: translateX(-50%);
302
- transform: translateX(-50%);
303
- width: -webkit-max-content;
304
- width: -moz-max-content;
305
- width: max-content;
306
- padding: 5px 10px;
307
- border-radius: 6px;
308
- visibility: hidden;
309
- opacity: 0;
310
- -webkit-transition: opacity .3s;
311
- transition: opacity .3s;
312
- background-color: rgba(var(--color-grey-500), 1);
313
- color: rgba(var(--color-grey-00), 1);
314
- text-align: center;
315
- font-size: .9rem;
316
- }
317
-
318
- .charts-css .tooltip::after {
319
- content: "";
320
- position: absolute;
321
- top: 100%;
322
- left: 50%;
323
- margin-left: -5px;
324
- border-width: 5px;
325
- border-style: solid;
326
- border-color: rgba(var(--color-grey-500), 1) transparent transparent;
327
- }
328
-
329
- .charts-css tr:hover .tooltip {
330
- visibility: visible;
331
- opacity: 1;
332
- }
333
-
334
- /*
335
- * Column Chart
336
- */
337
- .charts-css.column tbody {
338
- display: -webkit-box;
339
- display: -ms-flexbox;
340
- display: flex;
341
- -webkit-box-pack: justify;
342
- -ms-flex-pack: justify;
343
- justify-content: space-between;
344
- -webkit-box-align: stretch;
345
- -ms-flex-align: stretch;
346
- align-items: stretch;
347
- width: 100%;
348
- height: calc(100% - var(--heading-size));
349
- }
350
-
351
- .charts-css.column tbody tr {
352
- position: relative;
353
- -webkit-box-flex: 1;
354
- -ms-flex-positive: 1;
355
- flex-grow: 1;
356
- -ms-flex-negative: 1;
357
- flex-shrink: 1;
358
- -ms-flex-preferred-size: 0;
359
- flex-basis: 0;
360
- overflow-wrap: anywhere;
361
- display: -webkit-box;
362
- display: -ms-flexbox;
363
- display: flex;
364
- -webkit-box-pack: start;
365
- -ms-flex-pack: start;
366
- justify-content: flex-start;
367
- min-width: 0;
368
- }
369
-
370
- .charts-css.column tbody tr th {
371
- position: absolute;
372
- right: 0;
373
- left: 0;
374
- }
375
-
376
- .charts-css.column tbody tr td {
377
- display: -webkit-box;
378
- display: -ms-flexbox;
379
- display: flex;
380
- -webkit-box-pack: center;
381
- -ms-flex-pack: center;
382
- justify-content: center;
383
- width: 100%;
384
- height: calc(100% * var(--size, 1));
385
- position: relative;
386
- }
387
-
388
- .charts-css.column:not(.reverse) tbody tr {
389
- -webkit-box-align: end;
390
- -ms-flex-align: end;
391
- align-items: flex-end;
392
- -webkit-margin-after: var(--labels-size);
393
- margin-block-end: var(--labels-size);
394
- }
395
-
396
- .charts-css.column:not(.reverse) tbody tr th {
397
- bottom: calc(-1 * var(--labels-size) - var(--primary-axis-width));
398
- height: var(--labels-size);
399
- color: rgba(var(--color-grey-400), 1);
400
- font-weight: 400;
401
- }
402
-
403
- .charts-css.column:not(.reverse) tbody tr td {
404
- -webkit-box-align: start;
405
- -ms-flex-align: start;
406
- align-items: flex-start;
407
- }
408
-
409
- .charts-css.column:not(.stacked) tbody tr td {
410
- -webkit-box-flex: 1;
411
- -ms-flex-positive: 1;
412
- flex-grow: 1;
413
- -ms-flex-negative: 1;
414
- flex-shrink: 1;
415
- -ms-flex-preferred-size: 0;
416
- flex-basis: 0;
417
- }
418
-
419
- .charts-css.column:not(.reverse-data) tbody {
420
- -webkit-box-orient: horizontal;
421
- -webkit-box-direction: normal;
422
- -ms-flex-direction: row;
423
- flex-direction: row;
424
- }