plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-12-24 01:54:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Clean graph JavaScript code (#2441)

Browse Source 
This commit lints JavaScript files, removes commented-out code, and
moves 3 constants to `graph-util.js`. This is part of the Intervals
work, in order to make the original pull request smaller and release
this feature incrementally.

Related: #1574

Co-authored-by: Vignesh Joglekar <hey@vigneshjoglekar.com>
This commit is contained in:
Vini Brasil 2022-11-15 11:38:39 -03:00 committed by GitHub
parent 9c98a3f2e8
commit bea227d71b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/js/dashboard/datepicker.js
View File

@ -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 (
<div className="flex rounded shadow bg-white mr-2 sm:mr-4 cursor-pointer dark:bg-gray-800">
<QueryButton
@ -140,7 +140,7 @@ class DatePicker extends React.Component {
period: false,
from: false,
to: false,
date: false,
date: false
};
const insertionDate = parseUTCDate(this.props.site.statsBegin);
@ -209,7 +209,7 @@ class DatePicker extends React.Component {
period: 'day',
date: formatISO(from),
from: false,
to: false,
to: false
}
)
} else {
@ -383,7 +383,7 @@ class DatePicker extends React.Component {
onChange={this.setCustomDate}
/>
</div>
)
)
}
}

12
assets/js/dashboard/query.js
View File

@ -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)

80
assets/js/dashboard/stats/graph/graph-util.js
View File

@ -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 `<span class='text-green-500 font-bold'>${formattedComparison}%</span>`
// }
// if (change < 0) {
// return `<span class='text-red-400 font-bold'>${formattedComparison}%</span>`
// }
// if (change === 0) {
// return `<span class='font-bold'>0%</span>`
// }
// }
// 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 = `
<div class='text-gray-100 flex flex-col'>
<div class='flex justify-between items-center'>
<span class='font-semibold mr-4 text-lg'>${METRIC_LABELS[metric]}</span>
</div>
<div class='flex flex-col'>
<div class='flex flex-row justify-between items-center'>
<span class='flex items-center mr-4'>
<div class='w-3 h-3 mr-1 rounded-full' style='background-color: rgba(101,116,205)'></div>
<span>${renderLabel(label)}</span>
</span>
<span class='text-base font-bold'>${METRIC_FORMATTER[metric](point)}</span>
</div>
</div>
<span class='font-semibold italic'>${graphData.interval === 'month' ? 'Click to view month' : graphData.interval === 'date' ? 'Click to view day' : ''}</span>
</div>
`;
<div class='text-gray-100 flex flex-col'>
<div class='flex justify-between items-center'>
<span class='font-semibold mr-4 text-lg'>${METRIC_LABELS[metric]}</span>
</div>
<div class='flex flex-col'>
<div class='flex flex-row justify-between items-center'>
<span class='flex items-center mr-4'>
<div class='w-3 h-3 mr-1 rounded-full' style='background-color: rgba(101,116,205)'></div>
<span>${renderLabel(label)}</span>
</span>
<span class='text-base font-bold'>${METRIC_FORMATTER[metric](point)}</span>
</div>
</div>
<span class='font-semibold italic'>${graphData.interval === 'month' ? 'Click to view month' : graphData.interval === 'date' ? 'Click to view day' : ''}</span>
</div>
`;
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',

2
assets/js/dashboard/stats/graph/top-stats.js
View File

@ -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) {

38
assets/js/dashboard/stats/graph/visitor-graph.js
View File

@ -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);