plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-12-23 09:33:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix date links with a goal selected

Browse Source
This commit is contained in:
Uku Taht 2019-11-22 15:38:58 +08:00
parent 529d4f3018
commit 426963d6c5
2 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,24 +17,37 @@ class DatePicker extends React.Component {
document.removeEventListener("keyup", this.handleKeyup);
}
queryWithPeriod(period, date) {
const query = new URLSearchParams(window.location.search)
query.set('period', period)
if (date) {
query.set('date', date)
} else {
query.delete('date')
}
return query.toString()
}
handleKeyup(e) {
const {query, history} = this.props
if (e.key === 'ArrowLeft') {
if (query.period === 'day') {
const prevDate = formatISO(shiftDays(query.date, -1))
history.push('?period=day&date=' + prevDate)
history.push({search: this.queryWithPeriod('day', prevDate)})
} else if (query.period === 'month') {
const prevMonth = formatISO(shiftMonths(query.date, -1))
history.push('?period=month&date=' + prevMonth)
history.push({search: this.queryWithPeriod('month', prevMonth)})
}
} else if (e.key === 'ArrowRight') {
if (query.period === 'day') {
const nextDate = formatISO(shiftDays(query.date, 1))
history.push('?period=day&date=' + nextDate)
history.push({search: this.queryWithPeriod('day', nextDate)})
} else if (query.period === 'month') {
const nextMonth = formatISO(shiftMonths(query.date, 1))
history.push('?period=month&date=' + nextMonth)
history.push({search: this.queryWithPeriod('month', nextMonth)})
}
}
}
@ -64,12 +77,12 @@ class DatePicker extends React.Component {
renderArrow(period, prevDate, nextDate) {
return (
<div className="flex rounded shadow bg-white mr-4 cursor-pointer">
<Link to={`/${this.props.site.domain}?period=${period}&date=${prevDate}`} className="flex items-center px-2 border-r border-grey-light">
<Link to={{search: this.queryWithPeriod(period, prevDate)}} className="flex items-center px-2 border-r border-grey-light">
<svg className="fill-current h-4 w-4" style={{transform: 'translateY(-2px)'}}>
<use xlinkHref="#feather-chevron-left" />
</svg>
</Link>
<Link to={`/${this.props.site.domain}?period=${period}&date=${nextDate}`} className="flex items-center px-2">
<Link to={{search: this.queryWithPeriod(period, nextDate)}} className="flex items-center px-2">
<svg className="fill-current h-4 w-4" style={{transform: 'translateY(-2px)'}}>
<use xlinkHref="#feather-chevron-right" />
</svg>
@ -105,11 +118,11 @@ class DatePicker extends React.Component {
</div>
<div data-dropdown style={{top: '42px', right: '0px', width: '225px'}} className="dropdown-content hidden absolute pin-r bg-white border border-grey-light rounded shadow z-10 font-bold text-sm text-grey-darker">
<Link to={`/${this.props.site.domain}?period=day`} className="block p-2 hover:bg-grey-lighter">Today</Link>
<Link to={`/${this.props.site.domain}?period=7d`} className="block p-2 hover:bg-grey-lighter">Last 7 days</Link>
<Link to={`/${this.props.site.domain}?period=30d`} className="block p-2 hover:bg-grey-lighter">Last 30 days</Link>
<Link to={`/${this.props.site.domain}?period=3mo`} className="block p-2 hover:bg-grey-lighter">Last 3 months</Link>
<Link to={`/${this.props.site.domain}?period=6mo`} className="block p-2 hover:bg-grey-lighter">Last 6 months</Link>
<Link to={{search: this.queryWithPeriod('day')}} className="block p-2 hover:bg-grey-lighter">Today</Link>
<Link to={{search: this.queryWithPeriod('7d')}} className="block p-2 hover:bg-grey-lighter">Last 7 days</Link>
<Link to={{search: this.queryWithPeriod('30d')}} className="block p-2 hover:bg-grey-lighter">Last 30 days</Link>
<Link to={{search: this.queryWithPeriod('3mo')}} className="block p-2 hover:bg-grey-lighter">Last 3 months</Link>
<Link to={{search: this.queryWithPeriod('6mo')}} className="block p-2 hover:bg-grey-lighter">Last 6 months</Link>
</div>
</div>
)

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

@ -149,12 +149,17 @@ class LineGraph extends React.Component {
}
onClick(e) {
const query = new URLSearchParams(window.location.search)
const element = this.chart.getElementsAtEventForMode(e, 'index', {intersect: false})[0]
const date = element._chart.config.data.labels[element._index]
if (this.props.graphData.interval === 'month') {
this.props.history.push('?period=month&date=' + date)
query.set('period', 'month')
query.set('date', date)
this.props.history.push({search: query.toString()})
} else if (this.props.graphData.interval === 'date') {
this.props.history.push('?period=day&date=' + date)
query.set('period', 'day')
query.set('date', date)
this.props.history.push({search: query.toString()})
}
}