From aec531485e909101d6174a84f431aeed65e87d57 Mon Sep 17 00:00:00 2001 From: Vignesh Joglekar Date: Wed, 20 Jan 2021 12:41:30 -0600 Subject: [PATCH 1/3] Main Pass --- assets/js/dashboard/datepicker.js | 51 +++++++++++++++++++++++++------ 1 file changed, 42 insertions(+), 9 deletions(-) diff --git a/assets/js/dashboard/datepicker.js b/assets/js/dashboard/datepicker.js index b8007c361172..7e194b75e7ab 100644 --- a/assets/js/dashboard/datepicker.js +++ b/assets/js/dashboard/datepicker.js @@ -25,6 +25,8 @@ class DatePicker extends React.Component { super(props); this.handleKeyup = this.handleKeyup.bind(this); this.handleClick = this.handleClick.bind(this); + this.openCalendar = this.openCalendar.bind(this); + this.open = this.open.bind(this); this.state = { mode: "menu", open: false }; } @@ -96,7 +98,16 @@ class DatePicker extends React.Component { } } - if (newSearch.date) { + this.setState({open: false}); + + const keys = ['d', 'r', 'w', 'm', 'y', 'D', 'R', 'W', 'M', 'Y']; + const redirects = [{date: false, period: 'day'}, {period: 'realtime'}, {date: false, period: '7d'}, {date: false, period: 'month'}, {date: false, period: '12mo'}]; + + if (keys.includes(e.key)) { + navigateToQuery(history, query, {...newSearch, ...(redirects[keys.indexOf(e.key) % 5])}); + } else if (e.key === 'C' || e.key === 'c') { + this.setState({mode: 'calendar', open: true}, this.openCalendar); + } else if (newSearch.date) { navigateToQuery(history, query, newSearch); } } @@ -226,8 +237,8 @@ class DatePicker extends React.Component { ref={(node) => (this.dropDownNode = node)} >
{text} + {keybind} ); } @@ -332,11 +364,11 @@ class DatePicker extends React.Component {
this.setState({mode: 'calendar'}, this.openCalendar.bind(this))} - onKeyPress={() => this.setState({mode: 'calendar'}, this.openCalendar.bind(this))} - className="block px-4 py-2 md:text-sm leading-tight hover:bg-gray-100 + onClick={() => this.setState({mode: 'calendar'}, this.openCalendar)} + onKeyPress={() => this.setState({mode: 'calendar'}, this.openCalendar)} + className="px-4 py-2 md:text-sm leading-tight hover:bg-gray-100 dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 - cursor-pointer" + cursor-pointer flex items-center justify-between" tabIndex="0" role="button" aria-haspopup="true" @@ -344,6 +376,7 @@ class DatePicker extends React.Component { aria-controls="calendar" > Custom range + C
From 471874d366555e4441c578bb7a8accd2a555c771 Mon Sep 17 00:00:00 2001 From: Vignesh Joglekar Date: Wed, 20 Jan 2021 12:46:34 -0600 Subject: [PATCH 2/3] Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 13ce0479c6db..7c24ea2ac89e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ All notable changes to this project will be documented in this file. - "Load More" capability to pages modal plausible/analytics#480 - Unique Visitors (last 30 min) as a top stat in realtime view plausible/analytics#500 - Pinned filter and date selector rows while scrolling plausible/analytics#472 +- Keybindings for selection dates/ranges plausible/analytics#630 ### Changed - Use alpine as base image to decrease Docker image size plausible/analytics#353 From fac6b7226c612d08cd09a4570c3f4318d24e4730 Mon Sep 17 00:00:00 2001 From: Vignesh Joglekar Date: Thu, 21 Jan 2021 15:39:14 -0600 Subject: [PATCH 3/3] Resolves comments --- assets/js/dashboard/datepicker.js | 34 ++++++++++--------------------- 1 file changed, 11 insertions(+), 23 deletions(-) diff --git a/assets/js/dashboard/datepicker.js b/assets/js/dashboard/datepicker.js index 7e194b75e7ab..b7078dc89adc 100644 --- a/assets/js/dashboard/datepicker.js +++ b/assets/js/dashboard/datepicker.js @@ -100,12 +100,12 @@ class DatePicker extends React.Component { this.setState({open: false}); - const keys = ['d', 'r', 'w', 'm', 'y', 'D', 'R', 'W', 'M', 'Y']; + const keys = ['d', 'r', 'w', 'm', 'y']; const redirects = [{date: false, period: 'day'}, {period: 'realtime'}, {date: false, period: '7d'}, {date: false, period: 'month'}, {date: false, period: '12mo'}]; - if (keys.includes(e.key)) { + if (keys.includes(e.key.toLowerCase())) { navigateToQuery(history, query, {...newSearch, ...(redirects[keys.indexOf(e.key) % 5])}); - } else if (e.key === 'C' || e.key === 'c') { + } else if (e.key.toLowerCase() === 'c') { this.setState({mode: 'calendar', open: true}, this.openCalendar); } else if (newSearch.date) { navigateToQuery(history, query, newSearch); @@ -296,25 +296,13 @@ class DatePicker extends React.Component { const date = opts.date ? formatISO(opts.date) : false; - let keybind = ''; - - switch (text) { - case 'Today': - keybind = 'D' - break; - case 'Realtime': - keybind = 'R' - break; - case 'Last 7 days': - keybind = 'W' - break; - case 'Month to Date': - keybind = 'M' - break; - case 'Last 12 months': - keybind = 'Y' - break; - } + const keybinds = { + 'Today': 'D', + 'Realtime': 'R', + 'Last 7 days': 'W', + 'Month to Date': 'M', + 'Last 12 months': 'Y', + }; return ( {text} - {keybind} + {keybinds[text]} ); }