2022-11-15 17:38:39 +03:00
|
|
|
import numberFormatter, {durationFormatter} from '../../util/number-formatter'
|
2022-11-22 15:50:58 +03:00
|
|
|
|
2022-11-15 17:38:39 +03:00
|
|
|
export const METRIC_MAPPING = {
|
|
|
|
'Unique visitors (last 30 min)': 'visitors',
|
|
|
|
'Pageviews (last 30 min)': 'pageviews',
|
|
|
|
'Unique visitors': 'visitors',
|
|
|
|
'Visit duration': 'visit_duration',
|
|
|
|
'Total pageviews': 'pageviews',
|
2023-03-07 14:58:36 +03:00
|
|
|
'Views per visit': 'views_per_visit',
|
|
|
|
'Total visits': 'visits',
|
2022-11-15 17:38:39 +03:00
|
|
|
'Bounce rate': 'bounce_rate',
|
|
|
|
'Unique conversions': 'conversions',
|
|
|
|
}
|
|
|
|
|
|
|
|
export const METRIC_LABELS = {
|
|
|
|
'visitors': 'Visitors',
|
|
|
|
'pageviews': 'Pageviews',
|
2023-03-07 14:58:36 +03:00
|
|
|
'views_per_visit': 'Views per Visit',
|
2023-02-22 19:10:18 +03:00
|
|
|
'visits': 'Visits',
|
2022-11-15 17:38:39 +03:00
|
|
|
'bounce_rate': 'Bounce Rate',
|
|
|
|
'visit_duration': 'Visit Duration',
|
|
|
|
'conversions': 'Converted Visitors',
|
|
|
|
}
|
|
|
|
|
|
|
|
export const METRIC_FORMATTER = {
|
|
|
|
'visitors': numberFormatter,
|
|
|
|
'pageviews': numberFormatter,
|
2023-02-22 19:10:18 +03:00
|
|
|
'visits': numberFormatter,
|
2023-03-07 14:58:36 +03:00
|
|
|
'views_per_visit': (number) => (number),
|
2022-11-15 17:38:39 +03:00
|
|
|
'bounce_rate': (number) => (`${number}%`),
|
|
|
|
'visit_duration': durationFormatter,
|
|
|
|
'conversions': numberFormatter,
|
|
|
|
}
|
2022-04-13 10:38:47 +03:00
|
|
|
|
2023-01-31 22:11:51 +03:00
|
|
|
export const LoadingState = {
|
|
|
|
loading: 'loading',
|
|
|
|
refreshing: 'refreshing',
|
|
|
|
loaded: 'loaded',
|
|
|
|
isLoadingOrRefreshing: function (state) { return [this.loading, this.refreshing].includes(state) },
|
|
|
|
isLoadedOrRefreshing: function (state) { return [this.loaded, this.refreshing].includes(state) }
|
|
|
|
}
|
|
|
|
|
2023-02-21 17:36:26 +03:00
|
|
|
const buildComparisonDataset = function(comparisonPlot, presentIndex) {
|
|
|
|
if (!comparisonPlot) return []
|
|
|
|
|
|
|
|
let data = [...comparisonPlot]
|
|
|
|
if (presentIndex) {
|
|
|
|
const dashedPartIncludedIndex = presentIndex + 1
|
|
|
|
data = data.slice(0, dashedPartIncludedIndex)
|
|
|
|
}
|
|
|
|
|
|
|
|
return [{
|
|
|
|
data: data,
|
|
|
|
borderColor: 'rgba(60,70,110,0.2)',
|
|
|
|
pointBackgroundColor: 'rgba(60,70,110,0.2)',
|
|
|
|
pointHoverBackgroundColor: 'rgba(60, 70, 110)',
|
|
|
|
yAxisID: 'yComparison',
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
|
|
|
|
const buildDashedDataset = function(plot, presentIndex) {
|
|
|
|
if (!presentIndex) return []
|
|
|
|
|
|
|
|
const dashedPart = plot.slice(presentIndex - 1, presentIndex + 1);
|
|
|
|
const dashedPlot = (new Array(presentIndex - 1)).concat(dashedPart)
|
|
|
|
|
|
|
|
return [{
|
|
|
|
data: dashedPlot,
|
|
|
|
borderDash: [3, 3],
|
|
|
|
borderColor: 'rgba(101,116,205)',
|
|
|
|
pointHoverBackgroundColor: 'rgba(71, 87, 193)',
|
|
|
|
yAxisID: 'y',
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
|
|
|
|
const buildMainPlotDataset = function(plot, presentIndex) {
|
|
|
|
const data = presentIndex ? plot.slice(0, presentIndex) : plot
|
|
|
|
|
|
|
|
return [{
|
|
|
|
data: data,
|
|
|
|
borderColor: 'rgba(101,116,205)',
|
|
|
|
pointBackgroundColor: 'rgba(101,116,205)',
|
|
|
|
pointHoverBackgroundColor: 'rgba(71, 87, 193)',
|
|
|
|
yAxisID: 'y',
|
|
|
|
}]
|
2023-02-07 16:00:49 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
export const buildDataSet = (plot, comparisonPlot, present_index, ctx, label) => {
|
2022-04-13 10:38:47 +03:00
|
|
|
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
|
|
|
|
var prev_gradient = ctx.createLinearGradient(0, 0, 0, 300);
|
|
|
|
gradient.addColorStop(0, 'rgba(101,116,205, 0.2)');
|
|
|
|
gradient.addColorStop(1, 'rgba(101,116,205, 0)');
|
|
|
|
prev_gradient.addColorStop(0, 'rgba(101,116,205, 0.075)');
|
|
|
|
prev_gradient.addColorStop(1, 'rgba(101,116,205, 0)');
|
|
|
|
|
2023-02-21 17:36:26 +03:00
|
|
|
const defaultOptions = { label, borderWidth: 3, pointBorderColor: "transparent", pointHoverRadius: 4, backgroundColor: gradient, fill: true }
|
2023-02-07 16:00:49 +03:00
|
|
|
|
2023-02-21 17:36:26 +03:00
|
|
|
const dataset = [
|
|
|
|
...buildMainPlotDataset(plot, present_index),
|
|
|
|
...buildDashedDataset(plot, present_index),
|
|
|
|
...buildComparisonDataset(comparisonPlot, present_index)
|
|
|
|
]
|
|
|
|
|
|
|
|
return dataset.map((item) => Object.assign(item, defaultOptions))
|
2022-04-13 10:38:47 +03:00
|
|
|
}
|