analytics/assets/js/dashboard/datepicker.js

444 lines
13 KiB
JavaScript
Raw Normal View History

import React from "react";
import { withRouter } from "react-router-dom";
import Flatpickr from "react-flatpickr";
import {
shiftDays,
shiftMonths,
formatDay,
formatDayShort,
formatMonthYYYY,
formatISO,
isToday,
lastMonth,
nowForSite,
isSameMonth,
isThisMonth,
parseUTCDate,
isBefore,
isAfter,
} from "./date";
import Transition from "../transition";
import { navigateToQuery, QueryLink, QueryButton } from "./query";
class DatePicker extends React.Component {
constructor(props) {
super(props);
this.handleKeydown = this.handleKeydown.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 };
}
componentDidMount() {
document.addEventListener("keydown", this.handleKeydown);
document.addEventListener("mousedown", this.handleClick, false);
}
componentWillUnmount() {
document.removeEventListener("keydown", this.handleKeydown);
document.removeEventListener("mousedown", this.handleClick, false);
}
handleKeydown(e) {
const { query, history } = this.props;
if (e.target.tagName === 'INPUT') return true;
if (e.ctrlKey || e.metaKey || e.altKey || e.isComposing || e.keyCode === 229) return;
const newSearch = {
period: false,
from: false,
to: false,
date: false,
};
const insertionDate = parseUTCDate(this.props.site.insertedAt);
if (e.key === "ArrowLeft") {
const prevDate = formatISO(shiftDays(query.date, -1));
const prevMonth = formatISO(shiftMonths(query.date, -1));
if (
query.period === "day" &&
!isBefore(parseUTCDate(prevDate), insertionDate, query.period)
) {
newSearch.period = "day";
newSearch.date = prevDate;
} else if (
query.period === "month" &&
!isBefore(parseUTCDate(prevMonth), insertionDate, query.period)
) {
newSearch.period = "month";
newSearch.date = prevMonth;
}
} else if (e.key === "ArrowRight") {
const nextDate = formatISO(shiftDays(query.date, 1));
const nextMonth = formatISO(shiftMonths(query.date, 1));
if (
query.period === "day" &&
!isAfter(
parseUTCDate(nextDate),
nowForSite(this.props.site),
query.period
)
) {
newSearch.period = "day";
newSearch.date = nextDate;
} else if (
query.period === "month" &&
!isAfter(
parseUTCDate(nextMonth),
nowForSite(this.props.site),
query.period
)
) {
newSearch.period = "month";
newSearch.date = nextMonth;
}
}
this.setState({open: false});
const keys = ['d', 'r', 'w', 'm', 'y', 't', 's'];
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())) {
navigateToQuery(history, query, {...newSearch, ...(redirects[keys.indexOf(e.key.toLowerCase())])});
2021-06-29 11:33:46 +03:00
} else if (e.key.toLowerCase() === 'f') {
return history.push({pathname: `/${encodeURIComponent(this.props.site.domain)}/filter`, search: window.location.search})
} else if (e.key.toLowerCase() === 'c') {
this.setState({mode: 'calendar', open: true}, this.openCalendar);
} else if (newSearch.date) {
navigateToQuery(history, query, newSearch);
}
}
handleClick(e) {
if (this.dropDownNode && this.dropDownNode.contains(e.target)) return;
this.setState({ open: false });
}
timeFrameText() {
const { query, site } = this.props;
if (query.period === "day") {
if (isToday(site, query.date)) {
return "Today";
}
return formatDay(query.date);
} if (query.period === '7d') {
return 'Last 7 days'
} if (query.period === '30d') {
return 'Last 30 days'
} if (query.period === 'month') {
if (isThisMonth(site, query.date)) {
return 'Month to Date'
}
return formatMonthYYYY(query.date)
} if (query.period === '6mo') {
2020-01-08 12:25:46 +03:00
return 'Last 6 months'
} if (query.period === '12mo') {
2020-01-08 12:31:58 +03:00
return 'Last 12 months'
} if (query.period === 'custom') {
return `${formatDayShort(query.from)} - ${formatDayShort(query.to)}`
}
return 'Realtime'
}
renderArrow(period, prevDate, nextDate) {
const insertionDate = parseUTCDate(this.props.site.insertedAt);
const disabledLeft = isBefore(
parseUTCDate(prevDate),
insertionDate,
period
);
const disabledRight = isAfter(
parseUTCDate(nextDate),
nowForSite(this.props.site),
period
);
const leftClasses = `flex items-center px-2 border-r border-gray-300 rounded-l
dark:border-gray-500 dark:text-gray-100 ${
Adds manual, editable, auto-suggested filters, and negated&globbed path-based filters (#1121) * Adds manual-filters + friends commit 308192044d726e9a6f7406e333048ab3407aa260 Merge: 39287ab a299fab Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 03:40:55 2021 -0500 Merge branch 'manual-filters' into manual-filters-2 commit a299fab1fbe98ec04ea3dfbfbd175a2af5e73804 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 02:20:26 2021 -0500 Changes to split and pattern matched function for time_on_page commit 10f10c933af56a3482747f818bd580a8a1903ae2 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 01:53:18 2021 -0500 Fixes a couple of minor UX issues commit f2e5ce8eb33460cb2d1dc9ac0bd0d4ad0a20aa31 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 01:49:10 2021 -0500 Fixes time on page for globbed and negated page paths commit bb18af6526068860e4090dc91d02455e515f1238 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu Jun 10 05:24:05 2021 -0500 Close to finalized version of updated version Just needs some additional testing + potentially code cleanup commit d0b7bfe3dacb4c611e6857bed308b5954aa2cc1e Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 28 04:21:21 2021 -0500 Real Dialyzer Fix commit 296a76af34ff7e16c83e5b5bf62f0547dc30ece9 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 28 03:44:29 2021 -0500 Dialyzer fix commit 91f3b44017afb3838bbb4de8ec9f3ba4d39709bc Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:11:24 2021 -0500 Changelog commit e041f75745ab57b0d3c00d4a9ff7f8a490b27c17 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:09:52 2021 -0500 Formatting commit f689642204b02f6544dc072b95c9c22e180b9e87 Merge: e00929b 4ff25f6 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:08:47 2021 -0500 Merge branch 'master' into manual-filters commit e00929b1c51411fe4bf939266d3aeb6f67dcb2ab Merge: 83887c4 806975e Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:01:48 2021 -0500 Merge branch 'manual-filters' of github.com:Vigasaurus/plausible-analytics into manual-filters commit 83887c49ccc7fbc50ba1766bfa74c77994ef1900 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:59:32 2021 -0500 Adds tests for suggestions, formats goals suggestion query commit 1cb7732a08a50eddb81166fb796bf5731a0c5aba Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:36:31 2021 -0500 Adds goals as auto-complete capable filter commit 4ca39cc406777794bab7586116115031c6d8a82a Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:08:22 2021 -0500 95% completed auto-complete setup Still needs: - tests - goals added as filter commit 22d38c4cd83dd1d72ec435e1b8cf6fc3eb70d957 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 03:47:19 2021 -0500 80% of auto-complete filters progress Still needs - countries and screen into new format - re-style dropdown and background - drop debounce time - tests commit 806975ede9ebcbaa03ce888c41f20da866413697 Merge: 81c5e05 1a93542 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 15:28:21 2021 -0500 Merge branch 'master' into manual-filters commit 81c5e05760bf7f5d6fc05290e662ab61f9a4b73b Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 15:21:03 2021 -0500 Makes colorings on top bar elements consistent commit fa7f6c22680f5f00b89c7ea99032b409a5f8bbd2 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 14:58:25 2021 -0500 Makes requested changes, adds different version of filter button commit 7dc65b9b7a5a9678499a7c404109e710ae7da36d Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 04:29:01 2021 -0500 Changelog commit c684f1c76a2599324c19ca32de10b2f2849fd5e9 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 04:26:14 2021 -0500 Various UI Improvements - Makes edit buttons full-length & properly sized - Adds remove filter button in edit menu commit a632e7a8eea4a9897052cb08d3f7605403c227f7 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 03:11:50 2021 -0500 Adds tests for exclusions and wildcards commit eb91a7942b662d412511a4c47501a9b6d7f2d625 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 03:02:23 2021 -0500 Fixes editing UX on list view commit 6209d72aeede6aa8ce4f8e009d2ea168bb8f77a7 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 04:01:17 2021 -0500 Bugfix in realtime view, formatting commit 007d44df38dba254154b3450aacec9dd253ccd95 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 03:23:16 2021 -0500 Second pass - mostly everything user-facing is done Still needs: - Tests - Potentially negating other filters - Potentially some code cleanup commit cb7b5b9fbd83f618cf4ebbe6582a9202b4989033 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 01:49:52 2021 -0500 First pass on manual filter & path regex/negated filters Still needs: - Form structure on filter modal - Edit filter button - Filter dropdown UI improvement - Filter modal mount data collection - Tests - Potentially negating other filters * Fixes an issue between the updated React version and Flatpickr not showing up Reverting to v16 was the simplest fix without diving into the issue upstream with Flatpickr * Resolves comments on UI and code style Co-authored-by: Uku Taht <Uku.taht@gmail.com>
2021-06-21 14:42:16 +03:00
disabledLeft ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-200 dark:hover:bg-gray-900"
}`;
const rightClasses = `flex items-center px-2 rounded-r dark:text-gray-100 ${
Adds manual, editable, auto-suggested filters, and negated&globbed path-based filters (#1121) * Adds manual-filters + friends commit 308192044d726e9a6f7406e333048ab3407aa260 Merge: 39287ab a299fab Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 03:40:55 2021 -0500 Merge branch 'manual-filters' into manual-filters-2 commit a299fab1fbe98ec04ea3dfbfbd175a2af5e73804 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 02:20:26 2021 -0500 Changes to split and pattern matched function for time_on_page commit 10f10c933af56a3482747f818bd580a8a1903ae2 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 01:53:18 2021 -0500 Fixes a couple of minor UX issues commit f2e5ce8eb33460cb2d1dc9ac0bd0d4ad0a20aa31 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 01:49:10 2021 -0500 Fixes time on page for globbed and negated page paths commit bb18af6526068860e4090dc91d02455e515f1238 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu Jun 10 05:24:05 2021 -0500 Close to finalized version of updated version Just needs some additional testing + potentially code cleanup commit d0b7bfe3dacb4c611e6857bed308b5954aa2cc1e Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 28 04:21:21 2021 -0500 Real Dialyzer Fix commit 296a76af34ff7e16c83e5b5bf62f0547dc30ece9 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 28 03:44:29 2021 -0500 Dialyzer fix commit 91f3b44017afb3838bbb4de8ec9f3ba4d39709bc Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:11:24 2021 -0500 Changelog commit e041f75745ab57b0d3c00d4a9ff7f8a490b27c17 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:09:52 2021 -0500 Formatting commit f689642204b02f6544dc072b95c9c22e180b9e87 Merge: e00929b 4ff25f6 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:08:47 2021 -0500 Merge branch 'master' into manual-filters commit e00929b1c51411fe4bf939266d3aeb6f67dcb2ab Merge: 83887c4 806975e Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:01:48 2021 -0500 Merge branch 'manual-filters' of github.com:Vigasaurus/plausible-analytics into manual-filters commit 83887c49ccc7fbc50ba1766bfa74c77994ef1900 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:59:32 2021 -0500 Adds tests for suggestions, formats goals suggestion query commit 1cb7732a08a50eddb81166fb796bf5731a0c5aba Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:36:31 2021 -0500 Adds goals as auto-complete capable filter commit 4ca39cc406777794bab7586116115031c6d8a82a Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:08:22 2021 -0500 95% completed auto-complete setup Still needs: - tests - goals added as filter commit 22d38c4cd83dd1d72ec435e1b8cf6fc3eb70d957 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 03:47:19 2021 -0500 80% of auto-complete filters progress Still needs - countries and screen into new format - re-style dropdown and background - drop debounce time - tests commit 806975ede9ebcbaa03ce888c41f20da866413697 Merge: 81c5e05 1a93542 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 15:28:21 2021 -0500 Merge branch 'master' into manual-filters commit 81c5e05760bf7f5d6fc05290e662ab61f9a4b73b Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 15:21:03 2021 -0500 Makes colorings on top bar elements consistent commit fa7f6c22680f5f00b89c7ea99032b409a5f8bbd2 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 14:58:25 2021 -0500 Makes requested changes, adds different version of filter button commit 7dc65b9b7a5a9678499a7c404109e710ae7da36d Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 04:29:01 2021 -0500 Changelog commit c684f1c76a2599324c19ca32de10b2f2849fd5e9 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 04:26:14 2021 -0500 Various UI Improvements - Makes edit buttons full-length & properly sized - Adds remove filter button in edit menu commit a632e7a8eea4a9897052cb08d3f7605403c227f7 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 03:11:50 2021 -0500 Adds tests for exclusions and wildcards commit eb91a7942b662d412511a4c47501a9b6d7f2d625 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 03:02:23 2021 -0500 Fixes editing UX on list view commit 6209d72aeede6aa8ce4f8e009d2ea168bb8f77a7 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 04:01:17 2021 -0500 Bugfix in realtime view, formatting commit 007d44df38dba254154b3450aacec9dd253ccd95 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 03:23:16 2021 -0500 Second pass - mostly everything user-facing is done Still needs: - Tests - Potentially negating other filters - Potentially some code cleanup commit cb7b5b9fbd83f618cf4ebbe6582a9202b4989033 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 01:49:52 2021 -0500 First pass on manual filter & path regex/negated filters Still needs: - Form structure on filter modal - Edit filter button - Filter dropdown UI improvement - Filter modal mount data collection - Tests - Potentially negating other filters * Fixes an issue between the updated React version and Flatpickr not showing up Reverting to v16 was the simplest fix without diving into the issue upstream with Flatpickr * Resolves comments on UI and code style Co-authored-by: Uku Taht <Uku.taht@gmail.com>
2021-06-21 14:42:16 +03:00
disabledRight ? "bg-gray-300 dark:bg-gray-950" : "hover:bg-gray-200 dark:hover:bg-gray-900"
}`;
return (
<div className="flex rounded shadow bg-white mr-4 cursor-pointer dark:bg-gray-800">
<QueryButton
to={{ date: prevDate }}
query={this.props.query}
className={leftClasses}
disabled={disabledLeft}
>
<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>
</QueryButton>
<QueryButton
to={{ date: nextDate }}
query={this.props.query}
className={rightClasses}
disabled={disabledRight}
>
<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>
</QueryButton>
</div>
);
}
renderArrows() {
const { query } = this.props;
if (query.period === "month") {
const prevDate = formatISO(shiftMonths(query.date, -1));
const nextDate = formatISO(shiftMonths(query.date, 1));
return this.renderArrow("month", prevDate, nextDate);
} if (query.period === "day") {
const prevDate = formatISO(shiftDays(query.date, -1));
const nextDate = formatISO(shiftDays(query.date, 1));
return this.renderArrow("day", prevDate, nextDate);
}
}
open() {
this.setState({ mode: "menu", open: true });
}
renderDropDown() {
return (
<div
className="relative"
style={{ height: "35.5px", width: "190px" }}
ref={(node) => (this.dropDownNode = node)}
>
<div
onClick={this.open}
onKeyPress={this.open}
className="flex items-center justify-between rounded bg-white dark:bg-gray-800 shadow px-4
pr-3 py-2 leading-tight cursor-pointer text-sm font-medium text-gray-800
Adds manual, editable, auto-suggested filters, and negated&globbed path-based filters (#1121) * Adds manual-filters + friends commit 308192044d726e9a6f7406e333048ab3407aa260 Merge: 39287ab a299fab Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 03:40:55 2021 -0500 Merge branch 'manual-filters' into manual-filters-2 commit a299fab1fbe98ec04ea3dfbfbd175a2af5e73804 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 02:20:26 2021 -0500 Changes to split and pattern matched function for time_on_page commit 10f10c933af56a3482747f818bd580a8a1903ae2 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 01:53:18 2021 -0500 Fixes a couple of minor UX issues commit f2e5ce8eb33460cb2d1dc9ac0bd0d4ad0a20aa31 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 01:49:10 2021 -0500 Fixes time on page for globbed and negated page paths commit bb18af6526068860e4090dc91d02455e515f1238 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu Jun 10 05:24:05 2021 -0500 Close to finalized version of updated version Just needs some additional testing + potentially code cleanup commit d0b7bfe3dacb4c611e6857bed308b5954aa2cc1e Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 28 04:21:21 2021 -0500 Real Dialyzer Fix commit 296a76af34ff7e16c83e5b5bf62f0547dc30ece9 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 28 03:44:29 2021 -0500 Dialyzer fix commit 91f3b44017afb3838bbb4de8ec9f3ba4d39709bc Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:11:24 2021 -0500 Changelog commit e041f75745ab57b0d3c00d4a9ff7f8a490b27c17 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:09:52 2021 -0500 Formatting commit f689642204b02f6544dc072b95c9c22e180b9e87 Merge: e00929b 4ff25f6 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:08:47 2021 -0500 Merge branch 'master' into manual-filters commit e00929b1c51411fe4bf939266d3aeb6f67dcb2ab Merge: 83887c4 806975e Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:01:48 2021 -0500 Merge branch 'manual-filters' of github.com:Vigasaurus/plausible-analytics into manual-filters commit 83887c49ccc7fbc50ba1766bfa74c77994ef1900 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:59:32 2021 -0500 Adds tests for suggestions, formats goals suggestion query commit 1cb7732a08a50eddb81166fb796bf5731a0c5aba Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:36:31 2021 -0500 Adds goals as auto-complete capable filter commit 4ca39cc406777794bab7586116115031c6d8a82a Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:08:22 2021 -0500 95% completed auto-complete setup Still needs: - tests - goals added as filter commit 22d38c4cd83dd1d72ec435e1b8cf6fc3eb70d957 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 03:47:19 2021 -0500 80% of auto-complete filters progress Still needs - countries and screen into new format - re-style dropdown and background - drop debounce time - tests commit 806975ede9ebcbaa03ce888c41f20da866413697 Merge: 81c5e05 1a93542 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 15:28:21 2021 -0500 Merge branch 'master' into manual-filters commit 81c5e05760bf7f5d6fc05290e662ab61f9a4b73b Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 15:21:03 2021 -0500 Makes colorings on top bar elements consistent commit fa7f6c22680f5f00b89c7ea99032b409a5f8bbd2 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 14:58:25 2021 -0500 Makes requested changes, adds different version of filter button commit 7dc65b9b7a5a9678499a7c404109e710ae7da36d Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 04:29:01 2021 -0500 Changelog commit c684f1c76a2599324c19ca32de10b2f2849fd5e9 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 04:26:14 2021 -0500 Various UI Improvements - Makes edit buttons full-length & properly sized - Adds remove filter button in edit menu commit a632e7a8eea4a9897052cb08d3f7605403c227f7 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 03:11:50 2021 -0500 Adds tests for exclusions and wildcards commit eb91a7942b662d412511a4c47501a9b6d7f2d625 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 03:02:23 2021 -0500 Fixes editing UX on list view commit 6209d72aeede6aa8ce4f8e009d2ea168bb8f77a7 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 04:01:17 2021 -0500 Bugfix in realtime view, formatting commit 007d44df38dba254154b3450aacec9dd253ccd95 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 03:23:16 2021 -0500 Second pass - mostly everything user-facing is done Still needs: - Tests - Potentially negating other filters - Potentially some code cleanup commit cb7b5b9fbd83f618cf4ebbe6582a9202b4989033 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 01:49:52 2021 -0500 First pass on manual filter & path regex/negated filters Still needs: - Form structure on filter modal - Edit filter button - Filter dropdown UI improvement - Filter modal mount data collection - Tests - Potentially negating other filters * Fixes an issue between the updated React version and Flatpickr not showing up Reverting to v16 was the simplest fix without diving into the issue upstream with Flatpickr * Resolves comments on UI and code style Co-authored-by: Uku Taht <Uku.taht@gmail.com>
2021-06-21 14:42:16 +03:00
dark:text-gray-200 h-full hover:bg-gray-200 dark:hover:bg-gray-900"
tabIndex="0"
role="button"
aria-haspopup="true"
aria-expanded="false"
aria-controls="datemenu"
>
<span className="mr-2">{this.timeFrameText()}</span>
<svg
className="text-indigo-500 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="6 9 12 15 18 9"></polyline>
</svg>
</div>
<Transition
show={this.state.open}
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
{this.renderDropDownContent()}
</Transition>
</div>
);
}
close() {
this.setState({ open: false });
}
renderLink(period, text, opts = {}) {
const { query, site } = this.props;
let boldClass;
if (query.period === "day" && period === "day") {
boldClass = isToday(site, query.date) ? "font-bold" : "";
} else if (query.period === "month" && period === "month") {
const linkDate = opts.date || nowForSite(site);
boldClass = isSameMonth(linkDate, query.date) ? "font-bold" : "";
} else {
boldClass = query.period === period ? "font-bold" : "";
}
opts.date = opts.date ? formatISO(opts.date) : false;
const keybinds = {
'Today': 'D',
'Realtime': 'R',
'Last 7 days': 'W',
'Month to Date': 'M',
'Last 12 months': 'Y',
'Last 6 months': 'S',
'Last 30 days': 'T',
};
return (
<QueryLink
to={{from: false, to: false, period, ...opts}}
onClick={this.close.bind(this)}
query={this.props.query}
Adds manual, editable, auto-suggested filters, and negated&globbed path-based filters (#1121) * Adds manual-filters + friends commit 308192044d726e9a6f7406e333048ab3407aa260 Merge: 39287ab a299fab Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 03:40:55 2021 -0500 Merge branch 'manual-filters' into manual-filters-2 commit a299fab1fbe98ec04ea3dfbfbd175a2af5e73804 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 02:20:26 2021 -0500 Changes to split and pattern matched function for time_on_page commit 10f10c933af56a3482747f818bd580a8a1903ae2 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 01:53:18 2021 -0500 Fixes a couple of minor UX issues commit f2e5ce8eb33460cb2d1dc9ac0bd0d4ad0a20aa31 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri Jun 11 01:49:10 2021 -0500 Fixes time on page for globbed and negated page paths commit bb18af6526068860e4090dc91d02455e515f1238 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu Jun 10 05:24:05 2021 -0500 Close to finalized version of updated version Just needs some additional testing + potentially code cleanup commit d0b7bfe3dacb4c611e6857bed308b5954aa2cc1e Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 28 04:21:21 2021 -0500 Real Dialyzer Fix commit 296a76af34ff7e16c83e5b5bf62f0547dc30ece9 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 28 03:44:29 2021 -0500 Dialyzer fix commit 91f3b44017afb3838bbb4de8ec9f3ba4d39709bc Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:11:24 2021 -0500 Changelog commit e041f75745ab57b0d3c00d4a9ff7f8a490b27c17 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:09:52 2021 -0500 Formatting commit f689642204b02f6544dc072b95c9c22e180b9e87 Merge: e00929b 4ff25f6 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:08:47 2021 -0500 Merge branch 'master' into manual-filters commit e00929b1c51411fe4bf939266d3aeb6f67dcb2ab Merge: 83887c4 806975e Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 17:01:48 2021 -0500 Merge branch 'manual-filters' of github.com:Vigasaurus/plausible-analytics into manual-filters commit 83887c49ccc7fbc50ba1766bfa74c77994ef1900 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:59:32 2021 -0500 Adds tests for suggestions, formats goals suggestion query commit 1cb7732a08a50eddb81166fb796bf5731a0c5aba Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:36:31 2021 -0500 Adds goals as auto-complete capable filter commit 4ca39cc406777794bab7586116115031c6d8a82a Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 16:08:22 2021 -0500 95% completed auto-complete setup Still needs: - tests - goals added as filter commit 22d38c4cd83dd1d72ec435e1b8cf6fc3eb70d957 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Thu May 27 03:47:19 2021 -0500 80% of auto-complete filters progress Still needs - countries and screen into new format - re-style dropdown and background - drop debounce time - tests commit 806975ede9ebcbaa03ce888c41f20da866413697 Merge: 81c5e05 1a93542 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 15:28:21 2021 -0500 Merge branch 'master' into manual-filters commit 81c5e05760bf7f5d6fc05290e662ab61f9a4b73b Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 15:21:03 2021 -0500 Makes colorings on top bar elements consistent commit fa7f6c22680f5f00b89c7ea99032b409a5f8bbd2 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Tue May 25 14:58:25 2021 -0500 Makes requested changes, adds different version of filter button commit 7dc65b9b7a5a9678499a7c404109e710ae7da36d Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 04:29:01 2021 -0500 Changelog commit c684f1c76a2599324c19ca32de10b2f2849fd5e9 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 04:26:14 2021 -0500 Various UI Improvements - Makes edit buttons full-length & properly sized - Adds remove filter button in edit menu commit a632e7a8eea4a9897052cb08d3f7605403c227f7 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 03:11:50 2021 -0500 Adds tests for exclusions and wildcards commit eb91a7942b662d412511a4c47501a9b6d7f2d625 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Sat May 22 03:02:23 2021 -0500 Fixes editing UX on list view commit 6209d72aeede6aa8ce4f8e009d2ea168bb8f77a7 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 04:01:17 2021 -0500 Bugfix in realtime view, formatting commit 007d44df38dba254154b3450aacec9dd253ccd95 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 03:23:16 2021 -0500 Second pass - mostly everything user-facing is done Still needs: - Tests - Potentially negating other filters - Potentially some code cleanup commit cb7b5b9fbd83f618cf4ebbe6582a9202b4989033 Author: Vignesh Joglekar <rexvigasaurus@gmail.com> Date: Fri May 21 01:49:52 2021 -0500 First pass on manual filter & path regex/negated filters Still needs: - Form structure on filter modal - Edit filter button - Filter dropdown UI improvement - Filter modal mount data collection - Tests - Potentially negating other filters * Fixes an issue between the updated React version and Flatpickr not showing up Reverting to v16 was the simplest fix without diving into the issue upstream with Flatpickr * Resolves comments on UI and code style Co-authored-by: Uku Taht <Uku.taht@gmail.com>
2021-06-21 14:42:16 +03:00
className={`${boldClass } px-4 py-2 md:text-sm leading-tight hover:bg-gray-200
dark:hover:bg-gray-900 hover:text-gray-900 dark:hover:text-gray-100 flex items-center justify-between`}
>
{text}
<span className='font-normal'>{keybinds[text]}</span>
</QueryLink>
);
}
renderDropDownContent() {
if (this.state.mode === "menu") {
return (
<div
id="datemenu"
className="absolute mt-2 rounded shadow-md z-10"
style={{width: '235px', right: '-5px'}}
>
<div
className="rounded bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5
font-medium text-gray-800 dark:text-gray-200"
>
<div className="py-1">
{this.renderLink("day", "Today")}
{this.renderLink("realtime", "Realtime")}
</div>
<div className="border-t border-gray-200 dark:border-gray-500"></div>
<div className="py-1">
{this.renderLink("7d", "Last 7 days")}
{this.renderLink("30d", "Last 30 days")}
</div>
<div className="border-t border-gray-200 dark:border-gray-500"></div>
<div className="py-1">
{ this.renderLink('month', 'Month to Date') }
{ this.renderLink('month', 'Last month', {date: lastMonth(this.props.site)}) }
</div>
<div className="border-t border-gray-200 dark:border-gray-500"></div>
<div className="py-1">
{this.renderLink("6mo", "Last 6 months")}
{this.renderLink("12mo", "Last 12 months")}
</div>
<div className="border-t border-gray-200 dark:border-gray-500"></div>
<div className="py-1">
<span
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 flex items-center justify-between"
tabIndex="0"
role="button"
aria-haspopup="true"
aria-expanded="false"
aria-controls="calendar"
>
Custom range
<span className='font-normal'>C</span>
</span>
</div>
</div>
</div>
);
} if (this.state.mode === "calendar") {
const insertionDate = new Date(this.props.site.insertedAt);
const dayBeforeCreation = insertionDate - 86400000;
return (
<Flatpickr
id="calendar"
options={{
mode: 'range',
maxDate: 'today',
minDate: dayBeforeCreation,
showMonths: 1,
static: true,
animate: true}}
ref={calendar => this.calendar = calendar}
className="invisible"
onChange={this.setCustomDate.bind(this)}
/>
)
}
}
setCustomDate(dates) {
if (dates.length === 2) {
const [from, to] = dates
if (formatISO(from) === formatISO(to)) {
navigateToQuery(
this.props.history,
this.props.query,
{
period: 'day',
date: formatISO(from),
from: false,
to: false,
}
)
} else {
navigateToQuery(
this.props.history,
this.props.query,
{
period: 'custom',
date: false,
from: formatISO(from),
to: formatISO(to),
}
)
}
this.close()
}
}
openCalendar() {
this.calendar && this.calendar.flatpickr.open();
}
render() {
return (
<div className="flex justify-end ml-auto pl-2">
{ this.renderArrows() }
{ this.renderDropDown() }
</div>
);
}
}
export default withRouter(DatePicker);