mirror of
https://github.com/plausible/analytics.git
synced 2024-12-22 17:11:36 +03:00
100 lines
3.1 KiB
JavaScript
100 lines
3.1 KiB
JavaScript
import numberFormatter, {durationFormatter} from '../../util/number-formatter'
|
|
|
|
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',
|
|
'Views per visit': 'views_per_visit',
|
|
'Total visits': 'visits',
|
|
'Bounce rate': 'bounce_rate',
|
|
'Unique conversions': 'conversions',
|
|
}
|
|
|
|
export const METRIC_LABELS = {
|
|
'visitors': 'Visitors',
|
|
'pageviews': 'Pageviews',
|
|
'views_per_visit': 'Views per Visit',
|
|
'visits': 'Visits',
|
|
'bounce_rate': 'Bounce Rate',
|
|
'visit_duration': 'Visit Duration',
|
|
'conversions': 'Converted Visitors',
|
|
}
|
|
|
|
export const METRIC_FORMATTER = {
|
|
'visitors': numberFormatter,
|
|
'pageviews': numberFormatter,
|
|
'visits': numberFormatter,
|
|
'views_per_visit': (number) => (number),
|
|
'bounce_rate': (number) => (`${number}%`),
|
|
'visit_duration': durationFormatter,
|
|
'conversions': numberFormatter,
|
|
}
|
|
|
|
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) }
|
|
}
|
|
|
|
const buildComparisonDataset = function(comparisonPlot) {
|
|
if (!comparisonPlot) return []
|
|
|
|
return [{
|
|
data: comparisonPlot,
|
|
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',
|
|
}]
|
|
}
|
|
|
|
export const buildDataSet = (plot, comparisonPlot, present_index, ctx, label) => {
|
|
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)');
|
|
|
|
const defaultOptions = { label, borderWidth: 3, pointBorderColor: "transparent", pointHoverRadius: 4, backgroundColor: gradient, fill: true }
|
|
|
|
const dataset = [
|
|
...buildMainPlotDataset(plot, present_index),
|
|
...buildDashedDataset(plot, present_index),
|
|
...buildComparisonDataset(comparisonPlot)
|
|
]
|
|
|
|
return dataset.map((item) => Object.assign(item, defaultOptions))
|
|
}
|