m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-14 21:10:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update events chart when filter selected. Closes #494

Browse Source
This commit is contained in:
Mike Cao 2022-03-17 20:56:43 -07:00
parent 7530de87d2
commit 607e6a7be1
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/metrics/EventsChart.js
View File

@ -12,7 +12,9 @@ import { EVENT_COLORS, TOKEN_HEADER } from 'lib/constants';
export default function EventsChart({ websiteId, className, token }) { export default function EventsChart({ websiteId, className, token }) {
const [{ startDate, endDate, unit, modified }] = useDateRange(websiteId); const [{ startDate, endDate, unit, modified }] = useDateRange(websiteId);
const [timezone] = useTimezone(); const [timezone] = useTimezone();
const { query } = usePageQuery(); const {
query: { url, eventType },
} = usePageQuery();
const shareToken = useShareToken(); const shareToken = useShareToken();
const { data, loading } = useFetch( const { data, loading } = useFetch(
@ -23,12 +25,13 @@ export default function EventsChart({ websiteId, className, token }) {
end_at: +endDate, end_at: +endDate,
unit, unit,
tz: timezone, tz: timezone,
url: query.url, url,
event_type: eventType,
token, token,
}, },
headers: { [TOKEN_HEADER]: shareToken?.token }, headers: { [TOKEN_HEADER]: shareToken?.token },
}, },
[modified], [modified, eventType],
); );
const datasets = useMemo(() => { const datasets = useMemo(() => {

11
components/metrics/EventsTable.js
View File

@ -4,16 +4,18 @@ import MetricsTable from './MetricsTable';
import Tag from 'components/common/Tag'; import Tag from 'components/common/Tag';
import DropDown from 'components/common/DropDown'; import DropDown from 'components/common/DropDown';
import { eventTypeFilter } from 'lib/filters'; import { eventTypeFilter } from 'lib/filters';
import usePageQuery from 'hooks/usePageQuery';
import styles from './EventsTable.module.css'; import styles from './EventsTable.module.css';
const EVENT_FILTER_DEFAULT = { const EVENT_FILTER_DEFAULT = {
value: 'EVENT_FILTER_DEFAULT', value: 'all',
label: <FormattedMessage id="label.all-events" defaultMessage="All events" />, label: <FormattedMessage id="label.all-events" defaultMessage="All events" />,
}; };
export default function EventsTable({ websiteId, ...props }) { export default function EventsTable({ websiteId, ...props }) {
const [eventType, setEventType] = useState(EVENT_FILTER_DEFAULT.value); const [eventType, setEventType] = useState(EVENT_FILTER_DEFAULT.value);
const [eventTypes, setEventTypes] = useState([]); const [eventTypes, setEventTypes] = useState([]);
const { resolve, router } = usePageQuery();
const dropDownOptions = [EVENT_FILTER_DEFAULT, ...eventTypes.map(t => ({ value: t, label: t }))]; const dropDownOptions = [EVENT_FILTER_DEFAULT, ...eventTypes.map(t => ({ value: t, label: t }))];
@ -22,11 +24,16 @@ export default function EventsTable({ websiteId, ...props }) {
props.onDataLoad?.(data); props.onDataLoad?.(data);
} }
function handleChange(value) {
router.replace(resolve({ eventType: value === 'all' ? undefined : value }));
setEventType(value);
}
return ( return (
<> <>
{eventTypes?.length > 1 && ( {eventTypes?.length > 1 && (
<div className={styles.filter}> <div className={styles.filter}>
<DropDown value={eventType} options={dropDownOptions} onChange={setEventType} /> <DropDown value={eventType} options={dropDownOptions} onChange={handleChange} />
</div> </div>
)} )}
<MetricsTable <MetricsTable