diff --git a/assets/js/dashboard/datepicker.js b/assets/js/dashboard/datepicker.js index 7ddd35be3..9c9ad9182 100644 --- a/assets/js/dashboard/datepicker.js +++ b/assets/js/dashboard/datepicker.js @@ -38,11 +38,11 @@ function renderArrow(query, site, period, prevDate, nextDate) { const leftClasses = `flex items-center px-1 sm:px-2 border-r border-gray-300 rounded-l dark:border-gray-500 dark:text-gray-100 ${ - disabledLeft ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-100 dark:hover:bg-gray-900" - }`; + disabledLeft ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-100 dark:hover:bg-gray-900" +}`; const rightClasses = `flex items-center px-1 sm:px-2 rounded-r dark:text-gray-100 ${ - disabledRight ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-100 dark:hover:bg-gray-900" - }`; + disabledRight ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-100 dark:hover:bg-gray-900" + }`; return (
- ) + ) } } diff --git a/assets/js/dashboard/query.js b/assets/js/dashboard/query.js index 34356b349..45fc98274 100644 --- a/assets/js/dashboard/query.js +++ b/assets/js/dashboard/query.js @@ -8,15 +8,15 @@ const PERIODS = ['realtime', 'day', 'month', '7d', '30d', '6mo', '12mo', 'year', export function parseQuery(querystring, site) { const q = new URLSearchParams(querystring) let period = q.get('period') - const periodKey = `period__${ site.domain}` + const periodKey = `period__${site.domain}` if (PERIODS.includes(period)) { if (period !== 'custom' && period !== 'realtime') storage.setItem(periodKey, period) } else if (storage.getItem(periodKey)) { - period = storage.getItem(periodKey) - } else { - period = '30d' - } + period = storage.getItem(periodKey) + } else { + period = '30d' + } return { period, @@ -101,7 +101,7 @@ class QueryLink extends React.Component { to={{ pathname: window.location.pathname, search: generateQueryString(to) }} onClick={this.onClick} /> -) + ) } } const QueryLinkWithRouter = withRouter(QueryLink) diff --git a/assets/js/dashboard/stats/graph/graph-util.js b/assets/js/dashboard/stats/graph/graph-util.js index d1edec3e3..69c5519e6 100644 --- a/assets/js/dashboard/stats/graph/graph-util.js +++ b/assets/js/dashboard/stats/graph/graph-util.js @@ -1,5 +1,31 @@ -import { METRIC_LABELS, METRIC_FORMATTER } from './visitor-graph' import { parseUTCDate, formatMonthYYYY, formatDay } from '../../util/date' +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', + 'Bounce rate': 'bounce_rate', + 'Unique conversions': 'conversions', +} + +export const METRIC_LABELS = { + 'visitors': 'Visitors', + 'pageviews': 'Pageviews', + 'bounce_rate': 'Bounce Rate', + 'visit_duration': 'Visit Duration', + 'conversions': 'Converted Visitors', +} + +export const METRIC_FORMATTER = { + 'visitors': numberFormatter, + 'pageviews': numberFormatter, + 'bounce_rate': (number) => (`${number}%`), + 'visit_duration': durationFormatter, + 'conversions': numberFormatter, +} export const dateFormatter = (interval, longForm) => { return function(isoDate, _index, _ticks) { @@ -86,20 +112,6 @@ export const GraphTooltip = (graphData, metric) => { return !prev_label ? formattedLabel : prev_formattedLabel } - // function renderComparison(change) { - // const formattedComparison = numberFormatter(Math.abs(change)) - - // if (change > 0) { - // return `${formattedComparison}%` - // } - // if (change < 0) { - // return `${formattedComparison}%` - // } - // if (change === 0) { - // return `0%` - // } - // } - // Set Tooltip Body if (tooltipModel.body) { var bodyLines = tooltipModel.body.map(getBody); @@ -113,28 +125,23 @@ export const GraphTooltip = (graphData, metric) => { const label = graphData.labels[data.dataIndex] const point = data.raw || 0 - // const prev_data = tooltipModel.dataPoints.slice(-1)[0] - // const prev_label = graphData.prev_labels && graphData.prev_labels[prev_data.dataIndex] - // const prev_point = prev_data.raw || 0 - // const pct_change = point === prev_point ? 0 : prev_point === 0 ? 100 : Math.round(((point - prev_point) / prev_point * 100).toFixed(1)) - let innerHtml = ` -
-
- ${METRIC_LABELS[metric]} -
-
-
- -
- ${renderLabel(label)} - - ${METRIC_FORMATTER[metric](point)} -
-
- ${graphData.interval === 'month' ? 'Click to view month' : graphData.interval === 'date' ? 'Click to view day' : ''} -
- `; +
+
+ ${METRIC_LABELS[metric]} +
+
+
+ +
+ ${renderLabel(label)} + + ${METRIC_FORMATTER[metric](point)} +
+
+ ${graphData.interval === 'month' ? 'Click to view month' : graphData.interval === 'date' ? 'Click to view day' : ''} +
+ `; tooltipEl.innerHTML = innerHtml; } @@ -201,7 +208,6 @@ export const buildDataSet = (plot, present_index, ctx, label, isPrevious) => { label, data: plot, borderWidth: 2, - // borderDash: [10, 1], borderColor: 'rgba(166,187,210,0.5)', pointHoverBackgroundColor: 'rgba(166,187,210,0.8)', pointBorderColor: 'transparent', diff --git a/assets/js/dashboard/stats/graph/top-stats.js b/assets/js/dashboard/stats/graph/top-stats.js index c4fe52921..670222460 100644 --- a/assets/js/dashboard/stats/graph/top-stats.js +++ b/assets/js/dashboard/stats/graph/top-stats.js @@ -2,7 +2,7 @@ import React from "react"; import classNames from "classnames"; import { Tooltip } from '../../util/tooltip' import numberFormatter, { durationFormatter } from '../../util/number-formatter' -import { METRIC_MAPPING } from './visitor-graph' +import { METRIC_MAPPING } from './graph-util' export default class TopStats extends React.Component { renderComparison(name, comparison) { diff --git a/assets/js/dashboard/stats/graph/visitor-graph.js b/assets/js/dashboard/stats/graph/visitor-graph.js index c8ea97bff..ee8a72b04 100644 --- a/assets/js/dashboard/stats/graph/visitor-graph.js +++ b/assets/js/dashboard/stats/graph/visitor-graph.js @@ -2,49 +2,13 @@ import React from 'react'; import { withRouter, Link } from 'react-router-dom' import Chart from 'chart.js/auto'; import { navigateToQuery } from '../../query' -import numberFormatter, {durationFormatter} from '../../util/number-formatter' import * as api from '../../api' import * as storage from '../../util/storage' import LazyLoader from '../../components/lazy-loader' -import {GraphTooltip, buildDataSet, dateFormatter} from './graph-util'; +import {GraphTooltip, buildDataSet, dateFormatter, METRIC_MAPPING, METRIC_LABELS, METRIC_FORMATTER} from './graph-util'; import TopStats from './top-stats'; import * as url from '../../util/url' -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', - 'Bounce rate': 'bounce_rate', - 'Unique conversions': 'conversions', - // 'Time on Page': 'time', - // 'Conversion rate': 'conversion_rate', - // 'Total conversions': 't_conversions', -} - -export const METRIC_LABELS = { - 'visitors': 'Visitors', - 'pageviews': 'Pageviews', - 'bounce_rate': 'Bounce Rate', - 'visit_duration': 'Visit Duration', - 'conversions': 'Converted Visitors', - // 'time': 'Time on Page', - // 'conversion_rate': 'Conversion Rate', - // 't_conversions': 'Total Conversions' -} - -export const METRIC_FORMATTER = { - 'visitors': numberFormatter, - 'pageviews': numberFormatter, - 'bounce_rate': (number) => (`${number}%`), - 'visit_duration': durationFormatter, - 'conversions': numberFormatter, - // 'time': durationFormatter, - // 'conversion_rate': (number) => (`${Math.max(number, 100)}%`), - // 't_conversions': numberFormatter -} - class LineGraph extends React.Component { constructor(props) { super(props);