ahoy_captain 0.9 → 0.10.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +8 -4
- data/app/assets/javascript/ahoy_captain/controllers/active_links_controller.js +19 -3
- data/app/assets/javascript/ahoy_captain/controllers/application_controller.js +8 -0
- data/app/assets/javascript/ahoy_captain/controllers/combobox_controller.js +341 -0
- data/app/assets/javascript/ahoy_captain/controllers/filter_modal_controller.js +45 -0
- data/app/assets/javascript/ahoy_captain/controllers/funnel_chart_controller.js +58 -16
- data/app/assets/javascript/ahoy_captain/controllers/interval_controller.js +5 -0
- data/app/assets/javascript/ahoy_captain/controllers/line_chart_controller.js +170 -19
- data/app/assets/javascript/ahoy_captain/controllers/predicate_select_controller.js +0 -1
- data/app/assets/javascript/ahoy_captain/controllers/properties_controller.js +8 -0
- data/app/assets/javascript/ahoy_captain/controllers/property_filter_controller.js +45 -0
- data/app/assets/javascript/ahoy_captain/controllers/realtime_controller.js +4 -2
- data/app/assets/javascript/ahoy_captain/controllers/tile_controller.js +9 -0
- data/app/assets/javascript/ahoy_captain/helpers/chart_utils.js +156 -0
- data/app/assets/javascript/ahoy_captain/helpers/number_formatters.js +55 -0
- data/app/components/ahoy_captain/combobox_component.html.erb +33 -0
- data/app/components/ahoy_captain/combobox_component.rb +13 -0
- data/app/components/ahoy_captain/comparison_link_component.rb +40 -0
- data/app/components/ahoy_captain/filter/dropdown_component.html.erb +8 -6
- data/app/components/ahoy_captain/filter/modal_component.html.erb +7 -5
- data/app/components/ahoy_captain/filter/select_component.html.erb +23 -21
- data/app/components/ahoy_captain/filter/select_component.rb +2 -1
- data/app/components/ahoy_captain/filter/tag_component.html.erb +1 -1
- data/app/components/ahoy_captain/stats/comparable_container_component.html.erb +25 -0
- data/app/components/ahoy_captain/stats/comparable_container_component.rb +86 -0
- data/app/components/ahoy_captain/stats/container_component.html.erb +13 -6
- data/app/components/ahoy_captain/stats/container_component.rb +16 -1
- data/app/components/ahoy_captain/sticky_nav_component.html.erb +7 -4
- data/app/components/ahoy_captain/sticky_nav_component.rb +3 -0
- data/app/components/ahoy_captain/table_component.rb +13 -4
- data/app/components/ahoy_captain/tables/devices_table_component.rb +11 -0
- data/app/components/ahoy_captain/tables/dynamic_table.rb +13 -0
- data/app/components/ahoy_captain/tables/dynamic_table_component.rb +204 -0
- data/app/components/ahoy_captain/tables/goals_table_component.rb +17 -0
- data/app/components/ahoy_captain/tables/header_component.html.erb +5 -0
- data/app/components/ahoy_captain/tables/header_component.rb +18 -0
- data/app/components/ahoy_captain/tables/headers/header_component.rb +4 -0
- data/app/components/ahoy_captain/tables/properties_table_component.rb +27 -0
- data/app/components/ahoy_captain/tables/row_component.html.erb +4 -0
- data/app/components/ahoy_captain/tables/rows/row_component.rb +0 -1
- data/app/components/ahoy_captain/tile_component.html.erb +19 -9
- data/app/components/ahoy_captain/tile_component.rb +2 -1
- data/app/controllers/ahoy_captain/application_controller.rb +7 -16
- data/app/controllers/ahoy_captain/exports_controller.rb +1 -2
- data/app/controllers/ahoy_captain/filters/base_controller.rb +1 -3
- data/app/controllers/ahoy_captain/filters/goals_controller.rb +9 -0
- data/app/controllers/ahoy_captain/filters/pages/actions_controller.rb +1 -1
- data/app/controllers/ahoy_captain/filters/pages/entry_pages_controller.rb +1 -1
- data/app/controllers/ahoy_captain/filters/pages/exit_pages_controller.rb +1 -1
- data/app/controllers/ahoy_captain/filters/properties/values_controller.rb +4 -4
- data/app/controllers/ahoy_captain/filters/utms_controller.rb +1 -1
- data/app/controllers/ahoy_captain/properties_controller.rb +41 -0
- data/app/controllers/ahoy_captain/stats/base_controller.rb +86 -5
- data/app/controllers/ahoy_captain/stats/bounce_rates_controller.rb +1 -1
- data/app/controllers/ahoy_captain/stats/total_pageviews_controller.rb +1 -1
- data/app/controllers/ahoy_captain/stats/total_visits_controller.rb +1 -1
- data/app/controllers/ahoy_captain/stats/unique_visitors_controller.rb +2 -1
- data/app/controllers/ahoy_captain/stats/views_per_visits_controller.rb +1 -10
- data/app/controllers/ahoy_captain/stats/visit_durations_controller.rb +1 -1
- data/app/helpers/ahoy_captain/application_helper.rb +35 -9
- data/app/models/ahoy_captain/comparison_mode.rb +72 -0
- data/app/models/ahoy_captain/filter_parser.rb +33 -18
- data/app/models/ahoy_captain/range_from_params.rb +75 -0
- data/app/models/ahoy_captain/rangeable.rb +0 -3
- data/app/models/concerns/ahoy_captain/compare_mode.rb +19 -0
- data/app/models/concerns/ahoy_captain/limitable.rb +17 -0
- data/app/models/concerns/ahoy_captain/range_options.rb +1 -14
- data/app/presenters/ahoy_captain/dashboard_presenter.rb +18 -54
- data/app/queries/ahoy_captain/application_query.rb +74 -10
- data/app/queries/ahoy_captain/event_query.rb +7 -2
- data/app/queries/ahoy_captain/stats/average_views_per_visit_query.rb +11 -4
- data/app/queries/ahoy_captain/stats/average_visit_duration_query.rb +14 -2
- data/app/queries/ahoy_captain/stats/base_query.rb +18 -0
- data/app/queries/ahoy_captain/stats/bounce_rates_query.rb +15 -1
- data/app/queries/ahoy_captain/stats/total_pageviews_query.rb +2 -2
- data/app/queries/ahoy_captain/stats/total_visitors_query.rb +1 -1
- data/app/queries/ahoy_captain/stats/unique_visitors_query.rb +1 -1
- data/app/queries/ahoy_captain/stats/views_per_visit_query.rb +1 -1
- data/app/queries/ahoy_captain/stats/visit_duration_query.rb +3 -3
- data/app/queries/ahoy_captain/visit_query.rb +1 -2
- data/app/queries/concerns/ahoy_captain/comparable_queries.rb +25 -0
- data/app/queries/concerns/ahoy_captain/comparable_query.rb +138 -0
- data/app/queries/concerns/ahoy_captain/lazy_comparable_query.rb +42 -0
- data/app/views/ahoy_captain/devices/_table.html.erb +1 -4
- data/app/views/ahoy_captain/goals/index.html.erb +1 -4
- data/app/views/ahoy_captain/layouts/application.html.erb +0 -1
- data/app/views/ahoy_captain/properties/_form.html.erb +6 -0
- data/app/views/ahoy_captain/properties/index.html.erb +3 -0
- data/app/views/ahoy_captain/properties/show.html.erb +6 -0
- data/app/views/ahoy_captain/roots/_filters.html.erb +47 -1
- data/app/views/ahoy_captain/roots/show.html.erb +60 -31
- data/app/views/ahoy_captain/stats/base/index.html.erb +36 -8
- data/app/views/ahoy_captain/stats/show.html.erb +8 -10
- data/config/routes.rb +2 -0
- data/lib/ahoy_captain/ahoy/event_methods.rb +13 -15
- data/lib/ahoy_captain/configuration.rb +7 -6
- data/lib/ahoy_captain/engine.rb +4 -0
- data/lib/ahoy_captain/filters_configuration.rb +5 -1
- data/lib/ahoy_captain/version.rb +1 -1
- data/lib/ahoy_captain.rb +6 -1
- data/lib/generators/ahoy_captain/templates/config.rb.tt +7 -0
- metadata +35 -12
- data/app/assets/javascript/ahoy_captain/controllers/filter_tag_controller.js +0 -20
- data/app/assets/javascript/ahoy_captain/controllers/search_select_controller.js +0 -65
- data/app/components/ahoy_captain/tables/headers/devices_header_component.html.erb +0 -3
- data/app/components/ahoy_captain/tables/headers/devices_header_component.rb +0 -9
- data/app/components/ahoy_captain/tables/headers/goals_header_component.html.erb +0 -6
- data/app/components/ahoy_captain/tables/headers/goals_header_component.rb +0 -9
- data/app/components/ahoy_captain/tables/rows/devices_row_component.html.erb +0 -5
- data/app/components/ahoy_captain/tables/rows/devices_row_component.rb +0 -12
- data/app/components/ahoy_captain/tables/rows/goals_row_component.html.erb +0 -11
- data/app/components/ahoy_captain/tables/rows/goals_row_component.rb +0 -20
@@ -1,37 +1,188 @@
|
|
1
1
|
import { Controller } from '@hotwired/stimulus';
|
2
|
+
import { getCSS, externalTooltipHandler, dateFormatter, metricFormatter } from 'helpers/chart_utils';
|
3
|
+
|
4
|
+
const calculatePercentageDifference = function(oldValue, newValue) {
|
5
|
+
if(!oldValue) { return false }
|
6
|
+
if (oldValue == 0 && newValue > 0) {
|
7
|
+
return 100
|
8
|
+
} else if (oldValue == 0 && newValue == 0) {
|
9
|
+
return 0
|
10
|
+
} else {
|
11
|
+
return Math.round((newValue - oldValue) / oldValue * 100)
|
12
|
+
}
|
13
|
+
}
|
14
|
+
|
15
|
+
const footer = (tooltipItems) => {
|
16
|
+
let sum = 0;
|
17
|
+
|
18
|
+
tooltipItems.forEach(function(tooltipItem) {
|
19
|
+
sum += tooltipItem.parsed.y;
|
20
|
+
});
|
21
|
+
return 'Sum: ' + sum;
|
22
|
+
};
|
2
23
|
|
3
24
|
export default class extends Controller {
|
4
25
|
static values = {
|
5
|
-
|
6
|
-
|
26
|
+
current: Object,
|
27
|
+
comparedTo: Object,
|
28
|
+
interval: String,
|
29
|
+
label: String,
|
30
|
+
metric: String,
|
31
|
+
comparison: String
|
7
32
|
}
|
33
|
+
|
8
34
|
connect() {
|
9
|
-
const
|
10
|
-
|
35
|
+
const onClick = (e) => {
|
36
|
+
const element = this.chart.getElementsAtEventForMode(e, 'index', { intersect: false })[0];
|
37
|
+
const searchParams = new URLSearchParams(window.location.search);
|
38
|
+
|
39
|
+
searchParams.delete('period')
|
40
|
+
searchParams.delete('start_date')
|
41
|
+
searchParams.delete('end_date')
|
42
|
+
searchParams.delete('compare_to_start_date')
|
43
|
+
searchParams.delete('compare_to_end_date')
|
44
|
+
searchParams.set('date', Object.keys(this.currentValue)[element.index])
|
45
|
+
|
46
|
+
Turbo.visit(window.location.pathname + "?" + searchParams.toString())
|
47
|
+
}
|
48
|
+
const datasets = [
|
49
|
+
{
|
50
|
+
label: Object.keys(this.currentValue),
|
51
|
+
data: Object.values(this.currentValue),
|
52
|
+
borderColor: getCSS('--a'),
|
53
|
+
backgroundColor: getCSS('--a'),
|
54
|
+
color: getCSS('--bc'),
|
55
|
+
yAxisID: 'y',
|
56
|
+
}
|
57
|
+
]
|
58
|
+
|
59
|
+
if(this.hasComparedToValue) {
|
60
|
+
datasets.push({
|
61
|
+
label: Object.keys(this.comparedToValue),
|
62
|
+
data: Object.values(this.comparedToValue),
|
63
|
+
borderColor: getCSS('--s', 0.8),
|
64
|
+
backgroundColor: getCSS('--s', 0.8),
|
65
|
+
color: getCSS('--bc'),
|
66
|
+
yAxisID: 'yComparison',
|
67
|
+
})
|
11
68
|
}
|
12
69
|
|
13
|
-
|
70
|
+
const calculateMaximumY = function(dataset) {
|
71
|
+
if (dataset) {
|
72
|
+
return Math.max(Object.values(dataset))
|
73
|
+
} else {
|
74
|
+
return 1
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
const typeForDate = this.comparisonValue === 'year' ? 'long' : "short"
|
79
|
+
this.chart = new Chart(this.element,
|
14
80
|
{
|
15
81
|
type: 'line',
|
16
82
|
data: {
|
17
|
-
labels: Object.keys(this.
|
18
|
-
datasets:
|
19
|
-
{
|
20
|
-
label: this.labelValue,
|
21
|
-
data: Object.values(this.dataValue),
|
22
|
-
borderColor: getCSS('--s'),
|
23
|
-
backgroundColor: getCSS('--sc'),
|
24
|
-
color: getCSS('--sf')
|
25
|
-
}
|
26
|
-
]
|
83
|
+
labels: Object.keys(this.currentValue),
|
84
|
+
datasets: datasets
|
27
85
|
},
|
28
|
-
|
29
|
-
|
30
|
-
|
86
|
+
options: {
|
87
|
+
onClick: onClick,
|
88
|
+
responsive: true,
|
89
|
+
maintainAspectRatio: false,
|
90
|
+
interaction: {
|
91
|
+
intersect: false,
|
92
|
+
mode: 'index',
|
93
|
+
},
|
94
|
+
plugins: {
|
95
|
+
legend: false,
|
96
|
+
tooltip: {
|
97
|
+
enabled: false,
|
98
|
+
position: 'nearest',
|
99
|
+
external: externalTooltipHandler(this)
|
100
|
+
}
|
101
|
+
},
|
102
|
+
scales: {
|
103
|
+
y: {
|
104
|
+
min: 0,
|
105
|
+
suggestedMax: calculateMaximumY(this.currentValue),
|
106
|
+
ticks: {
|
107
|
+
},
|
108
|
+
grid: {
|
109
|
+
zeroLineColor: 'transparent',
|
110
|
+
drawBorder: false,
|
111
|
+
}
|
112
|
+
},
|
113
|
+
yComparison: {
|
114
|
+
min: 0,
|
115
|
+
suggestedMax: calculateMaximumY(this.currentValue),
|
116
|
+
display: false,
|
117
|
+
grid: { display: false },
|
118
|
+
},
|
119
|
+
x: {
|
120
|
+
ticks: {
|
121
|
+
grid: { display: false },
|
122
|
+
|
123
|
+
color: getCSS('--bc'),
|
124
|
+
callback: (val, idx) => {
|
125
|
+
if(idx % 2 == 0) {
|
126
|
+
const date = Object.keys(this.currentValue)[val];
|
127
|
+
return dateFormatter[this.intervalValue](date, typeForDate)
|
128
|
+
} else {
|
129
|
+
return ""
|
130
|
+
}
|
131
|
+
|
132
|
+
}
|
133
|
+
}
|
134
|
+
}
|
135
|
+
},
|
136
|
+
elements: {
|
137
|
+
point: {
|
138
|
+
radius: 0
|
139
|
+
}
|
31
140
|
}
|
32
141
|
}
|
33
142
|
},
|
34
|
-
)
|
143
|
+
);
|
144
|
+
}
|
145
|
+
|
146
|
+
formatLabel(label) {
|
147
|
+
return dateFormatter[this.intervalValue](label, 'long')
|
148
|
+
}
|
35
149
|
|
150
|
+
formatMetric(value) {
|
151
|
+
return metricFormatter[this.metricValue](value)
|
152
|
+
}
|
153
|
+
|
154
|
+
resize() { this.chart.resize() };
|
155
|
+
|
156
|
+
extractTooltipData(tooltip) {
|
157
|
+
const data = this.chart.config.data.datasets.find((set) => set.yAxisID == "y")
|
158
|
+
const comparisonData = this.chart.config.data.datasets.find((set) => set.yAxisID == "yComparison");
|
159
|
+
const dataIndex = this.chart.config.data.datasets.indexOf(data)
|
160
|
+
const comparisonDataIndex = this.chart.config.data.datasets.indexOf(comparisonData);
|
161
|
+
|
162
|
+
const tooltipData = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == dataIndex)
|
163
|
+
const label = data.label[tooltipData.dataIndex];
|
164
|
+
let comparisonLabel = false
|
165
|
+
let comparisonValue = false
|
166
|
+
let comparisonLabelBackgroundColor = false
|
167
|
+
if(this.hasComparedToValue) {
|
168
|
+
const tooltipComparisonData = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == comparisonDataIndex);
|
169
|
+
comparisonLabel = comparisonData.label[tooltipComparisonData.dataIndex];
|
170
|
+
comparisonValue = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == comparisonDataIndex)?.raw || 0
|
171
|
+
comparisonLabelBackgroundColor = comparisonData.backgroundColor
|
172
|
+
}
|
173
|
+
|
174
|
+
const value = tooltip.dataPoints.find((dataPoint) => dataPoint.datasetIndex == dataIndex)?.raw || 0
|
175
|
+
|
176
|
+
return {
|
177
|
+
comparison: this.hasComparedToValue,
|
178
|
+
comparisonDifference: calculatePercentageDifference(comparisonValue, value),
|
179
|
+
metric: this.labelValue,
|
180
|
+
label: this.formatLabel(label),
|
181
|
+
labelBackgroundColor: data.backgroundColor,
|
182
|
+
formattedValue: this.formatMetric(value),
|
183
|
+
comparisonLabel: this.formatLabel(comparisonLabel),
|
184
|
+
comparisonLabelBackgroundColor: comparisonLabelBackgroundColor,
|
185
|
+
formattedComparisonValue: this.formatMetric(comparisonValue)
|
186
|
+
}
|
36
187
|
}
|
37
188
|
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import { Controller } from '@hotwired/stimulus';
|
2
|
+
|
3
|
+
export default class extends Controller {
|
4
|
+
static targets = ['name', 'value'];
|
5
|
+
|
6
|
+
connect() {
|
7
|
+
this.init = this.init.bind(this)
|
8
|
+
|
9
|
+
const interval = setInterval(() => {
|
10
|
+
if(window.comboboxConnected === 2) {
|
11
|
+
clearInterval(interval);
|
12
|
+
this.init()
|
13
|
+
}
|
14
|
+
}, 100)
|
15
|
+
}
|
16
|
+
|
17
|
+
init() {
|
18
|
+
|
19
|
+
if(this.nameTarget.value) {
|
20
|
+
this.valueTarget.combobox.element.dataset.comboboxQueryValue = `q[properties.${this.nameTarget.value}_i_cont]`
|
21
|
+
}
|
22
|
+
|
23
|
+
this.nameTarget.addEventListener("change", (event) => {
|
24
|
+
if(event.target.value) {
|
25
|
+
event.target.dataset.column = event.target.value;
|
26
|
+
this.valueTarget.combobox.element.dataset.comboboxQueryValue = `q[properties.${event.target.value}_i_cont]`
|
27
|
+
this.valueTarget.combobox.setDisabled(false)
|
28
|
+
this.valueTarget.combobox.isOpenValue = false
|
29
|
+
} else {
|
30
|
+
this.valueTarget.combobox.setSelected([])
|
31
|
+
this.valueTarget.combobox.setDisabled(true)
|
32
|
+
}
|
33
|
+
})
|
34
|
+
this.valueTarget.addEventListener("change", (event) => {
|
35
|
+
if(event.target.value.length > 0) {
|
36
|
+
this.valueTarget.name = `q[properties.${this.nameTarget.dataset.column}_in]`
|
37
|
+
} else {
|
38
|
+
this.valueTarget.name = null
|
39
|
+
this.valueTarget.combobox.element.dataset.comboboxQueryValue = ""
|
40
|
+
}
|
41
|
+
})
|
42
|
+
|
43
|
+
}
|
44
|
+
|
45
|
+
}
|
@@ -2,12 +2,14 @@ import { Controller } from '@hotwired/stimulus';
|
|
2
2
|
|
3
3
|
export default class extends Controller {
|
4
4
|
static targets = ['label'];
|
5
|
-
|
5
|
+
static values = {
|
6
|
+
interval: Number
|
7
|
+
}
|
6
8
|
connect() {
|
7
9
|
this.reload = this.reload.bind(this);
|
8
10
|
this.setLabel = this.setLabel.bind(this);
|
9
11
|
this.labelCount = 0;
|
10
|
-
this.reloadInterval = setInterval(this.reload, 1000 *
|
12
|
+
this.reloadInterval = setInterval(this.reload, 1000 * this.intervalValue);
|
11
13
|
this.labelInterval = setInterval(this.setLabel, 1000);
|
12
14
|
}
|
13
15
|
|
@@ -0,0 +1,156 @@
|
|
1
|
+
import { numberFormatter, durationFormatter, percentageFormatter } from "helpers/number_formatters";
|
2
|
+
|
3
|
+
export const getCSS = (varname, alpha = 1) => {
|
4
|
+
const value = getComputedStyle(document.documentElement).getPropertyValue(varname);
|
5
|
+
if(value.includes("em") || value.includes("px")) {
|
6
|
+
return value
|
7
|
+
}
|
8
|
+
return `hsl(${getComputedStyle(document.documentElement).getPropertyValue(varname)} / ${alpha})`
|
9
|
+
}
|
10
|
+
|
11
|
+
const buildTooltipData = (controller, tooltip) => {
|
12
|
+
return controller.extractTooltipData(tooltip)
|
13
|
+
}
|
14
|
+
|
15
|
+
export const metricFormatter = {
|
16
|
+
"ActiveSupport::Duration": durationFormatter,
|
17
|
+
"BigDecimal": numberFormatter,
|
18
|
+
"Float": percentageFormatter,
|
19
|
+
"Integer": numberFormatter
|
20
|
+
}
|
21
|
+
|
22
|
+
export const dateFormatter = {
|
23
|
+
month: (value, type = 'short') => {
|
24
|
+
if(type === 'short') {
|
25
|
+
return new Date(value).toLocaleString(
|
26
|
+
'en-US',
|
27
|
+
{ month: 'short', day: 'numeric', hour: 'numeric' }
|
28
|
+
)
|
29
|
+
} else {
|
30
|
+
return new Date(value).toLocaleString(
|
31
|
+
'en-US',
|
32
|
+
{ year: "numeric", month: 'short', day: 'numeric', hour: 'numeric' }
|
33
|
+
)
|
34
|
+
}
|
35
|
+
},
|
36
|
+
week: (value, type = 'short') => {
|
37
|
+
return new Date(value).toLocaleString(
|
38
|
+
'en-US',
|
39
|
+
{ month: 'short', day: 'numeric', hour: 'numeric' }
|
40
|
+
)
|
41
|
+
},
|
42
|
+
day: (value, type = 'short') => {
|
43
|
+
return new Date(value).toLocaleString(
|
44
|
+
'en-US',
|
45
|
+
{ month: 'short', day: 'numeric', hour: 'numeric' }
|
46
|
+
)
|
47
|
+
},
|
48
|
+
hour: (value, type = 'short') => {
|
49
|
+
if(type == 'long') {
|
50
|
+
return new Date(value).toLocaleString(
|
51
|
+
'en-US',
|
52
|
+
{ year: 'numeric', hour: 'numeric' }
|
53
|
+
)
|
54
|
+
} else {
|
55
|
+
return new Date(value).toLocaleString(
|
56
|
+
'en-US',
|
57
|
+
{ hour: 'numeric' }
|
58
|
+
)
|
59
|
+
}
|
60
|
+
},
|
61
|
+
minute: (value, type = 'short') => {
|
62
|
+
if(type == 'short') {
|
63
|
+
return new Date(value).toLocaleString(
|
64
|
+
'en-US',
|
65
|
+
{ minute: 'numeric', hour: 'numeric' }
|
66
|
+
)
|
67
|
+
} else {
|
68
|
+
return new Date(value).toLocaleString(
|
69
|
+
'en-US',
|
70
|
+
{ year: 'numeric', minute: 'numeric', hour: 'numeric' }
|
71
|
+
)
|
72
|
+
}
|
73
|
+
},
|
74
|
+
}
|
75
|
+
|
76
|
+
export const externalTooltipHandler = (controller) => {
|
77
|
+
|
78
|
+
return ({chart, tooltip}) => {
|
79
|
+
const offset = controller.chart.canvas.getBoundingClientRect()
|
80
|
+
let tooltipEl = document.getElementById('chartjs-tooltip')
|
81
|
+
|
82
|
+
if (!tooltipEl) {
|
83
|
+
tooltipEl = document.createElement('div')
|
84
|
+
tooltipEl.id = 'chartjs-tooltip'
|
85
|
+
tooltipEl.style.background = getCSS('--n', );
|
86
|
+
tooltipEl.style.borderRadius = getCSS('--rounded-btn');
|
87
|
+
tooltipEl.style.opacity = 1;
|
88
|
+
tooltipEl.style.pointerEvents = 'none';
|
89
|
+
tooltipEl.style.position = 'absolute';
|
90
|
+
tooltipEl.style.transform = 'translate(-50%, 50%)';
|
91
|
+
tooltipEl.style.transition = 'all .1s ease';
|
92
|
+
tooltipEl.style.minWidth = '250px'
|
93
|
+
|
94
|
+
chart.canvas.parentNode.appendChild(tooltipEl);
|
95
|
+
}
|
96
|
+
|
97
|
+
if (tooltipEl && offset && window.innerWidth < 768) {
|
98
|
+
tooltipEl.style.top = offset.y + offset.height + window.scrollY + 15 + 'px'
|
99
|
+
tooltipEl.style.left = offset.x + 'px'
|
100
|
+
tooltipEl.style.right = null
|
101
|
+
tooltipEl.style.opacity = 1
|
102
|
+
}
|
103
|
+
|
104
|
+
if (tooltip.opacity === 0) {
|
105
|
+
tooltipEl.style.display = 'none'
|
106
|
+
return
|
107
|
+
}
|
108
|
+
|
109
|
+
if (tooltip.body) {
|
110
|
+
const tooltipData = buildTooltipData(controller, tooltip)
|
111
|
+
|
112
|
+
tooltipEl.innerHTML = `
|
113
|
+
<aside class="flex flex-col text-neutral-content">
|
114
|
+
<div class="flex justify-between items-center">
|
115
|
+
<span class="text-sm font-bold uppercase whitespace-nowrap flex mr-4">${tooltipData.metric}</span>
|
116
|
+
${tooltipData.comparison && tooltipData.comparisonDifference ?
|
117
|
+
`<div class="inline-flex items-center space-x-1">
|
118
|
+
${tooltipData.comparisonDifference > 0 ? `<span class="font-semibold text-sm text-green-500">↑</span><span>${tooltipData.comparisonDifference}%</span>` : ""}
|
119
|
+
${tooltipData.comparisonDifference < 0 ? `<span class="font-semibold text-sm text-red-400">↓</span><span>${tooltipData.comparisonDifference * -1}%</span>` : ""}
|
120
|
+
${tooltipData.comparisonDifference == 0 ? `<span class="font-semibold text-sm">〰 0%</span>` : ""}
|
121
|
+
</div>` : ''}
|
122
|
+
</div>
|
123
|
+
|
124
|
+
${tooltipData.label ?
|
125
|
+
`<div class="flex flex-col">
|
126
|
+
<div class="flex flex-row justify-between items-center">
|
127
|
+
<span class="badge relative badge-xs" style="background-color: ${tooltipData.labelBackgroundColor}"></span>
|
128
|
+
<span class="flex items-center grow ml-4 mr-4">
|
129
|
+
<span>${tooltipData.label}</span>
|
130
|
+
</span>
|
131
|
+
<span class="font-bold">${tooltipData.formattedValue}</span>
|
132
|
+
</div>` : ''}
|
133
|
+
|
134
|
+
${tooltipData.comparison ?
|
135
|
+
`<div class="flex flex-row justify-between items-center">
|
136
|
+
<span class="badge relative badge-xs" style="background-color: ${tooltipData.comparisonLabelBackgroundColor}"></span>
|
137
|
+
<span class="flex items-center grow ml-4 mr-4">
|
138
|
+
<span>${tooltipData.comparisonLabel}</span>
|
139
|
+
</span>
|
140
|
+
<span class="font-bold">${tooltipData.formattedComparisonValue}</span>
|
141
|
+
</div>` : ""}
|
142
|
+
</div>
|
143
|
+
</aside>
|
144
|
+
`
|
145
|
+
}
|
146
|
+
const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas;
|
147
|
+
|
148
|
+
// Display, position, and set styles for font
|
149
|
+
tooltipEl.style.opacity = 1;
|
150
|
+
tooltipEl.style.display = null;
|
151
|
+
tooltipEl.style.left = positionX + tooltip._eventPosition.x + 'px';
|
152
|
+
tooltipEl.style.top = positionY + tooltip._eventPosition.y + 'px';
|
153
|
+
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
154
|
+
tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px';
|
155
|
+
}
|
156
|
+
};
|
@@ -0,0 +1,55 @@
|
|
1
|
+
const THOUSAND = 1000
|
2
|
+
const HUNDRED_THOUSAND = 100000
|
3
|
+
const MILLION = 1000000
|
4
|
+
const HUNDRED_MILLION = 100000000
|
5
|
+
const BILLION = 1000000000
|
6
|
+
const HUNDRED_BILLION = 100000000000
|
7
|
+
const TRILLION = 1000000000000
|
8
|
+
|
9
|
+
export function numberFormatter(num) {
|
10
|
+
if (num >= THOUSAND && num < MILLION) {
|
11
|
+
const thousands = num / THOUSAND
|
12
|
+
if (thousands === Math.floor(thousands) || num >= HUNDRED_THOUSAND) {
|
13
|
+
return Math.floor(thousands) + 'k'
|
14
|
+
} else {
|
15
|
+
return (Math.floor(thousands * 10) / 10) + 'k'
|
16
|
+
}
|
17
|
+
} else if (num >= MILLION && num < BILLION) {
|
18
|
+
const millions = num / MILLION
|
19
|
+
if (millions === Math.floor(millions) || num >= HUNDRED_MILLION) {
|
20
|
+
return Math.floor(millions) + 'M'
|
21
|
+
} else {
|
22
|
+
return (Math.floor(millions * 10) / 10) + 'M'
|
23
|
+
}
|
24
|
+
} else if (num >= BILLION && num < TRILLION) {
|
25
|
+
const billions = num / BILLION
|
26
|
+
if (billions === Math.floor(billions) || num >= HUNDRED_BILLION) {
|
27
|
+
return Math.floor(billions) + 'B'
|
28
|
+
} else {
|
29
|
+
return (Math.floor(billions * 10) / 10) + 'B'
|
30
|
+
}
|
31
|
+
} else {
|
32
|
+
return num
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
function pad(num, size) {
|
37
|
+
return ('000' + num).slice(size * -1);
|
38
|
+
}
|
39
|
+
|
40
|
+
export function durationFormatter(duration) {
|
41
|
+
const hours = Math.floor(duration / 60 / 60)
|
42
|
+
const minutes = Math.floor(duration / 60) % 60
|
43
|
+
const seconds = Math.floor(duration - (minutes * 60) - (hours * 60 * 60))
|
44
|
+
if (hours > 0) {
|
45
|
+
return `${hours}h ${minutes}m ${seconds}s`
|
46
|
+
} else if (minutes > 0) {
|
47
|
+
return `${minutes}m ${pad(seconds, 2)}s`
|
48
|
+
} else {
|
49
|
+
return `${seconds}s`
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
export function percentageFormatter(float) {
|
54
|
+
return Number(float/100).toLocaleString(undefined,{style: 'percent', minimumFractionDigits:2});
|
55
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
<div data-controller="combobox"
|
2
|
+
data-combobox-single-option-value="<%= !@multiple %>"
|
3
|
+
data-combobox-placeholder-value="Select an option..."
|
4
|
+
data-combobox-is-disabled-value="false"
|
5
|
+
data-combobox-url-value="<%= @url %>"
|
6
|
+
data-combobox-disabled-value="<%= @disabled %>"
|
7
|
+
data-combobox-query-value="q[<%= @column %>_i_cont]"
|
8
|
+
data-combobox-selected-value="<%= @value.map { |value| { text: value, value: value } }.to_json %>"
|
9
|
+
class=" w-full "
|
10
|
+
>
|
11
|
+
<div data-action="click->combobox#toggleOpen" data-combobox-target="box"
|
12
|
+
class="
|
13
|
+
bg-gray-900 ring-0 focus-within:ring-0 focus-within:ring-0 focus:ring-0 focus:outline-none w-full rounded-md px-4 py-2 text-sm
|
14
|
+
w-full"
|
15
|
+
data-combobox-box-open-class="border-secondary-500 ring-1 ring-secondary-500">
|
16
|
+
<select data-combobox-target="select" style="display:none;"
|
17
|
+
data-predicate-select-target="select"
|
18
|
+
name="<%= @name %>"
|
19
|
+
id="<%= @select_html[:id] || "filter_#{@name}" %>"
|
20
|
+
<% @select_html.each do |k,v| %><%=k %>="<%=v %>"<% end %>
|
21
|
+
><% @value.each do |value| %><option value="<%= value %>" selected><%= value %></option><% end %></select>
|
22
|
+
<div data-combobox-target="selected" class="" style="display:none;"></div>
|
23
|
+
<input data-combobox-target="input"
|
24
|
+
data-action="input->combobox#onInput"
|
25
|
+
class="input input-sm input-ghost w-full inline-block rounded-md focus:outline-none focus:ring-0 focus:bg-gray-900"
|
26
|
+
type="text"
|
27
|
+
placeholder="Select an option...">
|
28
|
+
</div>
|
29
|
+
<ul data-combobox-target="list"
|
30
|
+
class="z-50 absolute mt-1 max-h-60 w-full overflow-auto rounded-md py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm bg-gray-800 text-gray-350"
|
31
|
+
style="display: none;">
|
32
|
+
</ul>
|
33
|
+
</div>
|
@@ -0,0 +1,13 @@
|
|
1
|
+
module AhoyCaptain
|
2
|
+
class ComboboxComponent < ViewComponent::Base
|
3
|
+
def initialize(name:, multiple: false, disabled: false, column:, url:, value: [], select_html: {})
|
4
|
+
@name = name
|
5
|
+
@multiple = multiple
|
6
|
+
@column = column
|
7
|
+
@url = url
|
8
|
+
@value = value
|
9
|
+
@select_html = select_html
|
10
|
+
@disabled = disabled
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
@@ -0,0 +1,40 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
class AhoyCaptain::ComparisonLinkComponent < AhoyCaptain::DropdownLinkComponent
|
4
|
+
include ::AhoyCaptain::CompareMode
|
5
|
+
include ::AhoyCaptain::RangeOptions
|
6
|
+
include ::AhoyCaptain::Rangeable
|
7
|
+
|
8
|
+
def initialize(title: "", classes: "btn btn-sm btn-base-100 no-underline hover:bg-base-100")
|
9
|
+
@classes = classes
|
10
|
+
end
|
11
|
+
|
12
|
+
# cheating
|
13
|
+
def title
|
14
|
+
self.with_option_content(options_for_option)
|
15
|
+
|
16
|
+
comparison_mode.label
|
17
|
+
end
|
18
|
+
|
19
|
+
def render?
|
20
|
+
comparison_mode.enabled?
|
21
|
+
end
|
22
|
+
|
23
|
+
def options_for_option
|
24
|
+
[
|
25
|
+
(link_to "Disable Comparison", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: false))),
|
26
|
+
(link_to "Previous period", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :previous)), class: selected(:previous, :true)),
|
27
|
+
(link_to "Year-over-year", AhoyCaptain::Engine.routes.url_helpers.root_path(**helpers.search_params.merge(comparison: :year)), class: selected(:year)),
|
28
|
+
(link_to "Custom period", "javascript:customComparisonModal.showModal()", class: selected(:custom)),
|
29
|
+
|
30
|
+
].join.html_safe
|
31
|
+
end
|
32
|
+
|
33
|
+
private
|
34
|
+
|
35
|
+
def selected(*types)
|
36
|
+
return "font-bold" if comparison_mode.type.in?(types)
|
37
|
+
|
38
|
+
nil
|
39
|
+
end
|
40
|
+
end
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<div class="dropdown dropdown-end">
|
2
2
|
<label
|
3
3
|
tabindex="0"
|
4
|
-
class="btn btn-ghost dark:hover:bg-neutral flex"
|
4
|
+
class="btn btn-sm btn-ghost dark:hover:bg-neutral flex"
|
5
5
|
>
|
6
6
|
<%= header_icon %>
|
7
7
|
<span><%= title %></span>
|
@@ -18,7 +18,8 @@
|
|
18
18
|
class="flex w-full justify-between link no-underline items-center group <% if filter.modal %>cursor-pointer<% else %>cursor-text<% end %> text-left"
|
19
19
|
onclick="<% if filter.modal %><%= filter.modal %>.showModal() <% end %>">
|
20
20
|
<span class="truncate w-48 ">
|
21
|
-
<%= filter.
|
21
|
+
<%= filter.column.titleize %> <%= filter.predicate.titleize %>
|
22
|
+
<%= filter.values.to_sentence %>
|
22
23
|
</span>
|
23
24
|
<% if filter.modal %>
|
24
25
|
<span class="group-hover:text-primary hover:text-primary ">
|
@@ -30,8 +31,8 @@
|
|
30
31
|
class="hover:text-primary link no-underline pl-2" href="<%= filter.url %>">
|
31
32
|
<%= remove_icon %>
|
32
33
|
</a>
|
33
|
-
|
34
|
-
|
34
|
+
</li>
|
35
|
+
<div class="divider my-1" data-toggle-target='toggleable'></div>
|
35
36
|
<% end %>
|
36
37
|
<li data-toggle-target='toggleable'>
|
37
38
|
<a class="block mx-auto pl-4 pb-1 " href="<%= AhoyCaptain::Engine.app.url_helpers.root_path %>">Clear all filters</a>
|
@@ -39,10 +40,11 @@
|
|
39
40
|
</div>
|
40
41
|
<% end %>
|
41
42
|
|
42
|
-
<
|
43
|
+
<ul id="core-filters" class="menu <%= 'hidden' if advanced_filter_menu? %> pt-0" data-toggle-target='toggleable'>
|
43
44
|
<% AhoyCaptain.config.filters.each do |label, filter_group| %>
|
44
45
|
<li><button onClick="<%= filter_group.modal_name %>.showModal()" class='link no-underline' data-action="click->toggle#trigger"><%= label %></button></li>
|
45
46
|
<% end %>
|
46
|
-
|
47
|
+
<li><button onClick="customPropertyFilterModal.showModal()" class='link no-underline' data-action="click->toggle#trigger">Property</button></li>
|
48
|
+
</ul>
|
47
49
|
</ul>
|
48
50
|
</div>
|
@@ -1,11 +1,13 @@
|
|
1
|
-
<dialog id="<%= id %>" class="modal">
|
2
|
-
<div class="modal-box
|
1
|
+
<dialog id="<%= id %>" class="modal" data-controller="filter-modal">
|
2
|
+
<div class="modal-box h-5/6 max-w-5xl">
|
3
|
+
<h1 class="text-xl mb-4"><%= title %></h1>
|
3
4
|
<fieldset>
|
4
|
-
<h5><%= title %></h5>
|
5
5
|
<%= modal_display %>
|
6
|
-
<button class="btn btn-active btn-primary mt-4" type="submit">Apply</button>
|
7
|
-
<button class="btn btn-active btn-primary mt-4" type="reset">Reset</button>
|
8
6
|
</fieldset>
|
7
|
+
<div class="mt-10">
|
8
|
+
<button class="btn btn-active btn-primary" type="submit">Apply</button>
|
9
|
+
<button class="btn btn-active btn-primary" type="reset">Reset</button>
|
10
|
+
</div>
|
9
11
|
</div>
|
10
12
|
<label class="modal-backdrop">
|
11
13
|
<button onclick="event.preventDefault(); <%=id %>.close();">Close</button>
|