plausible/analytics
1
1
Fork 0
mirror of https://github.com/plausible/analytics.git synced 2024-11-30 11:13:22 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixes case-sensitivity and residual keys in date-keybinds (#709)

Browse Source 
* Fixes case-sensitivity and residual keys

* Adds 30d and 6mo shortcuts

* Changelog, rename function appropriately
This commit is contained in:
Vignesh Joglekar 2021-02-18 03:18:54 -06:00 committed by GitHub
parent 600378ba22
commit e55c2213a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
### Added ### Added
- Stats API [currently in beta] plausible/analytics#679 - Stats API [currently in beta] plausible/analytics#679
- 30 day and 6 month keybindings (`3` and `6`, respectively) plausible/analytics#709
### Fixed
- Capitalized date/time selection keybinds not working plausible/analytics#709
## [1.2] - 2021-01-26 ## [1.2] - 2021-01-26

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

@ -23,7 +23,7 @@ import { navigateToQuery, QueryLink, QueryButton } from "./query";
class DatePicker extends React.Component { class DatePicker extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleKeyup = this.handleKeyup.bind(this); this.handleKeydown = this.handleKeydown.bind(this);
this.handleClick = this.handleClick.bind(this); this.handleClick = this.handleClick.bind(this);
this.openCalendar = this.openCalendar.bind(this); this.openCalendar = this.openCalendar.bind(this);
this.open = this.open.bind(this); this.open = this.open.bind(this);
@ -31,19 +31,19 @@ class DatePicker extends React.Component {
} }
componentDidMount() { componentDidMount() {
document.addEventListener("keyup", this.handleKeyup); document.addEventListener("keydown", this.handleKeydown);
document.addEventListener("mousedown", this.handleClick, false); document.addEventListener("mousedown", this.handleClick, false);
} }
componentWillUnmount() { componentWillUnmount() {
document.removeEventListener("keyup", this.handleKeyup); document.removeEventListener("keydown", this.handleKeydown);
document.removeEventListener("mousedown", this.handleClick, false); document.removeEventListener("mousedown", this.handleClick, false);
} }
handleKeyup(e) { handleKeydown(e) {
const { query, history } = this.props; const { query, history } = this.props;
if (e.ctrlKey || e.metaKey || e.altKey) return if (e.ctrlKey || e.metaKey || e.altKey || e.isComposing || e.keyCode === 229) return
const newSearch = { const newSearch = {
period: false, period: false,
@ -100,11 +100,11 @@ class DatePicker extends React.Component {
this.setState({open: false}); this.setState({open: false});
const keys = ['d', 'r', 'w', 'm', 'y']; const keys = ['d', 'r', 'w', 'm', 'y', '3', '6'];
const redirects = [{date: false, period: 'day'}, {period: 'realtime'}, {date: false, period: '7d'}, {date: false, period: 'month'}, {date: false, period: '12mo'}]; const redirects = [{date: false, period: 'day'}, {period: 'realtime'}, {date: false, period: '7d'}, {date: false, period: 'month'}, {date: false, period: '12mo'}, {date: false, period: '30d'}, {date: false, period: '6mo'}];
if (keys.includes(e.key.toLowerCase())) { if (keys.includes(e.key.toLowerCase())) {
navigateToQuery(history, query, {...newSearch, ...(redirects[keys.indexOf(e.key) % 5])}); navigateToQuery(history, query, {...newSearch, ...(redirects[keys.indexOf(e.key.toLowerCase())])});
} else if (e.key.toLowerCase() === 'c') { } else if (e.key.toLowerCase() === 'c') {
this.setState({mode: 'calendar', open: true}, this.openCalendar); this.setState({mode: 'calendar', open: true}, this.openCalendar);
} else if (newSearch.date) { } else if (newSearch.date) {
@ -302,6 +302,8 @@ class DatePicker extends React.Component {
'Last 7 days': 'W', 'Last 7 days': 'W',
'Month to Date': 'M', 'Month to Date': 'M',
'Last 12 months': 'Y', 'Last 12 months': 'Y',
'Last 6 months': '6',
'Last 30 days': '3',
}; };
return ( return (