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

Update DatePicker to use new navigation function

Browse Source
This commit is contained in:
birjolaxew 2020-11-11 11:30:29 +01:00
parent 0a565025d2
commit 8e9349e1d8
1 changed files with 61 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ import Transition from "../transition.js";
import { withRouter, Link } from 'react-router-dom'
import Flatpickr from "react-flatpickr";
import {shiftDays, shiftMonths, formatDay, formatDayShort, formatMonthYYYY, formatISO, isToday, lastMonth, nowForSite, isSameMonth} from './date'
import { navigateToQuery } from './query.js';
class DatePicker extends React.Component {
@ -44,23 +45,42 @@ class DatePicker extends React.Component {
if (e.ctrlKey || e.ctrlKey || e.altKey) return
const newSearch = {
period: false,
from: false,
to: false,
date: false
}
if (e.key === 'ArrowLeft') {
if (query.period === 'day') {
const prevDate = formatISO(shiftDays(query.date, -1))
history.push({search: this.queryWithPeriod('day', {date: prevDate})})
newSearch.period = 'day'
newSearch.date = prevDate
} else if (query.period === 'month') {
const prevMonth = formatISO(shiftMonths(query.date, -1))
history.push({search: this.queryWithPeriod('month', {date: prevMonth})})
newSearch.period = 'month'
newSearch.date = prevMonth
}
} else if (e.key === 'ArrowRight') {
if (query.period === 'day') {
const nextDate = formatISO(shiftDays(query.date, 1))
history.push({search: this.queryWithPeriod('day', {date: nextDate})})
newSearch.period = 'day'
newSearch.date = nextDate
} else if (query.period === 'month') {
const nextMonth = formatISO(shiftMonths(query.date, 1))
history.push({search: this.queryWithPeriod('month', {date: nextMonth})})
newSearch.period = 'month'
newSearch.date = nextMonth
}
}
if (newSearch.date) {
navigateToQuery(
history,
query,
newSearch
)
}
}
handleClick(e) {
@ -96,12 +116,23 @@ class DatePicker extends React.Component {
}
renderArrow(period, prevDate, nextDate) {
const navigateGenerator = data => {
return e => {
e.preventDefault()
navigateToQuery(
this.props.history,
this.props.query,
data
)
}
}
return (
<div className="flex rounded shadow bg-white mr-4 cursor-pointer">
<Link to={{search: this.queryWithPeriod(period, {date: prevDate})}} className="flex items-center px-2 border-r border-gray-300">
<Link to={{search: this.queryWithPeriod(period, {date: prevDate})}} onClick={navigateGenerator({date: prevDate})} className="flex items-center px-2 border-r border-gray-300">
<svg className="feather h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
</Link>
<Link to={{search: this.queryWithPeriod(period, {date: nextDate})}} className="flex items-center px-2">
<Link to={{search: this.queryWithPeriod(period, {date: nextDate})}} onClick={navigateGenerator({date: nextDate})} className="flex items-center px-2">
<svg className="feather h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</Link>
</div>
@ -171,8 +202,21 @@ class DatePicker extends React.Component {
if (opts.date) { opts.date = formatISO(opts.date) }
const onClick = e => {
e.preventDefault()
navigateToQuery(
this.props.history,
this.props.query,
{
period,
...opts
}
)
this.close()
}
return (
<Link to={{search: this.queryWithPeriod(period, opts)}} onClick={this.close.bind(this)} className={boldClass + ' block px-4 py-2 text-sm leading-tight hover:bg-gray-100 hover:text-gray-900'}>
<Link to={{search: this.queryWithPeriod(period, opts)}} onClick={onClick} className={boldClass + ' block px-4 py-2 text-sm leading-tight hover:bg-gray-100 hover:text-gray-900'}>
{text}
</Link>
)
@ -217,7 +261,16 @@ class DatePicker extends React.Component {
setCustomDate(dates) {
if (dates.length === 2) {
const [from, to] = dates
this.props.history.push({search: this.queryWithPeriod('custom', {from: formatISO(from), to: formatISO(to)})})
navigateToQuery(
this.props.history,
this.props.query,
{
period: 'custom',
date: false,
from: formatISO(from),
to: formatISO(to),
}
)
this.close()
}
}