shlink-web-client/src/visits/VisitsStats.tsx

337 lines
13 KiB
TypeScript
Raw Normal View History

2023-02-18 13:11:01 +03:00
import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
import { faCalendarAlt, faChartPie, faList, faMapMarkedAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import { isEmpty, pipe, propEq, values } from 'ramda';
2023-02-18 12:40:37 +03:00
import type { FC, PropsWithChildren } from 'react';
2023-02-18 13:11:01 +03:00
import { useEffect, useMemo, useRef, useState } from 'react';
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
import { Button, Progress, Row } from 'reactstrap';
import { ShlinkApiError } from '../api/ShlinkApiError';
2023-02-18 12:40:37 +03:00
import type { Settings } from '../settings/reducers/settings';
2023-02-18 13:11:01 +03:00
import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
import { ExportBtn } from '../utils/ExportBtn';
import type { DateInterval, DateRange } from '../utils/helpers/dateIntervals';
import { toDateRange } from '../utils/helpers/dateIntervals';
import { prettify } from '../utils/helpers/numbers';
2023-02-18 13:11:01 +03:00
import { Message } from '../utils/Message';
import { NavPillItem, NavPills } from '../utils/NavPills';
2023-02-18 13:11:01 +03:00
import { Result } from '../utils/Result';
import { DoughnutChartCard } from './charts/DoughnutChartCard';
import { LineChartCard } from './charts/LineChartCard';
2023-02-18 13:11:01 +03:00
import { SortableBarChartCard } from './charts/SortableBarChartCard';
import { useVisitsQuery } from './helpers/hooks';
import { OpenMapModalBtn } from './helpers/OpenMapModalBtn';
import { VisitsFilterDropdown } from './helpers/VisitsFilterDropdown';
2023-02-18 13:11:01 +03:00
import type { VisitsInfo } from './reducers/types';
import { normalizeVisits, processStatsFromVisits } from './services/VisitsParser';
import type { NormalizedOrphanVisit, NormalizedVisit, VisitsParams } from './types';
2023-02-18 12:40:37 +03:00
import type { HighlightableProps } from './types/helpers';
import { highlightedVisitsToStats } from './types/helpers';
2023-02-18 13:11:01 +03:00
import { VisitsTable } from './VisitsTable';
2020-09-05 09:49:18 +03:00
export type VisitsStatsProps = PropsWithChildren<{
getVisits: (params: VisitsParams, doIntervalFallback?: boolean) => void;
2020-09-05 09:49:18 +03:00
visitsInfo: VisitsInfo;
2021-03-06 12:56:49 +03:00
settings: Settings;
2020-09-05 09:49:18 +03:00
cancelGetVisits: () => void;
2021-03-14 14:49:12 +03:00
exportCsv: (visits: NormalizedVisit[]) => void;
isOrphanVisits?: boolean;
}>;
2020-09-05 09:49:18 +03:00
interface VisitsNavLinkProps {
title: string;
subPath: string;
icon: IconDefinition;
}
type Section = 'byTime' | 'byContext' | 'byLocation' | 'list';
const sections: Record<Section, VisitsNavLinkProps> = {
2022-02-06 22:07:18 +03:00
byTime: { title: 'By time', subPath: 'by-time', icon: faCalendarAlt },
byContext: { title: 'By context', subPath: 'by-context', icon: faChartPie },
byLocation: { title: 'By location', subPath: 'by-location', icon: faMapMarkedAlt },
list: { title: 'List', subPath: 'list', icon: faList },
};
2020-09-05 09:49:18 +03:00
let selectedBar: string | undefined;
export const VisitsStats: FC<VisitsStatsProps> = ({
children,
visitsInfo,
getVisits,
cancelGetVisits,
settings,
exportCsv,
isOrphanVisits = false,
}) => {
const { visits, loading, loadingLarge, error, errorData, progress, fallbackInterval } = visitsInfo;
const [{ dateRange, visitsFilter }, updateFiltering] = useVisitsQuery();
const setDates = pipe(
({ startDate: theStartDate, endDate: theEndDate }: DateRange) => ({
dateRange: {
startDate: theStartDate ?? undefined,
endDate: theEndDate ?? undefined,
},
}),
updateFiltering,
);
const initialInterval = useRef<DateRange | DateInterval>(
dateRange ?? fallbackInterval ?? settings.visits?.defaultInterval ?? 'last30Days',
);
2022-03-26 14:17:42 +03:00
const [highlightedVisits, setHighlightedVisits] = useState<NormalizedVisit[]>([]);
const [highlightedLabel, setHighlightedLabel] = useState<string | undefined>();
const isFirstLoad = useRef(true);
const { search } = useLocation();
2020-09-05 09:49:18 +03:00
const buildSectionUrl = (subPath?: string) => (!subPath ? search : `${subPath}${search}`);
2022-03-26 14:17:42 +03:00
const normalizedVisits = useMemo(() => normalizeVisits(visits), [visits]);
const { os, browsers, referrers, countries, cities, citiesForMap, visitedUrls } = useMemo(
2020-09-05 09:49:18 +03:00
() => processStatsFromVisits(normalizedVisits),
2022-03-26 14:17:42 +03:00
[normalizedVisits],
2020-09-05 09:49:18 +03:00
);
const resolvedFilter = useMemo(() => ({
...visitsFilter,
excludeBots: visitsFilter.excludeBots ?? settings.visits?.excludeBots,
}), [visitsFilter]);
2020-09-05 09:49:18 +03:00
const mapLocations = values(citiesForMap);
const setSelectedVisits = (selectedVisits: NormalizedVisit[]) => {
selectedBar = undefined;
setHighlightedVisits(selectedVisits);
};
const highlightVisitsForProp = (prop: HighlightableProps<NormalizedOrphanVisit>) => (value: string) => {
2020-09-05 09:49:18 +03:00
const newSelectedBar = `${prop}_${value}`;
if (selectedBar === newSelectedBar) {
setHighlightedVisits([]);
setHighlightedLabel(undefined);
selectedBar = undefined;
} else {
setHighlightedVisits((normalizedVisits as NormalizedOrphanVisit[]).filter(propEq(prop, value)));
2020-09-05 09:49:18 +03:00
setHighlightedLabel(value);
selectedBar = newSelectedBar;
}
};
useEffect(() => cancelGetVisits, []);
2020-09-05 09:49:18 +03:00
useEffect(() => {
const resolvedDateRange = !isFirstLoad.current ? dateRange : (dateRange ?? toDateRange(initialInterval.current));
getVisits({ dateRange: resolvedDateRange, filter: resolvedFilter }, isFirstLoad.current);
isFirstLoad.current = false;
2022-03-26 14:17:42 +03:00
}, [dateRange, visitsFilter]);
useEffect(() => {
// As soon as the fallback is loaded, if the initial interval used the settings one, we do fall back
if (fallbackInterval && initialInterval.current === (settings.visits?.defaultInterval ?? 'last30Days')) {
initialInterval.current = fallbackInterval;
}
}, [fallbackInterval]);
2020-09-05 09:49:18 +03:00
const renderVisitsContent = () => {
if (loadingLarge) {
return (
<Message loading>
This is going to take a while... :S
<Progress value={progress} striped={progress === 100} className="mt-3" />
</Message>
);
}
if (loading) {
return <Message loading />;
}
if (error) {
return (
<Result type="error">
<ShlinkApiError errorData={errorData} fallbackMessage="An error occurred while loading visits :(" />
</Result>
);
2020-09-05 09:49:18 +03:00
}
if (isEmpty(visits)) {
return <Message>There are no visits matching current filter</Message>;
2020-09-05 09:49:18 +03:00
}
return (
<>
2022-02-14 22:28:28 +03:00
<NavPills fill>
{Object.values(sections).map(({ title, icon, subPath }, index) => (
<NavPillItem key={index} to={buildSectionUrl(subPath)} replace>
<FontAwesomeIcon icon={icon} />
<span className="ms-2 d-none d-sm-inline">{title}</span>
</NavPillItem>
))}
</NavPills>
<Row>
2022-02-06 22:07:18 +03:00
<Routes>
<Route
path={sections.byTime.subPath}
element={(
<div className="col-12 mt-3">
<LineChartCard
title="Visits during time"
visits={normalizedVisits}
highlightedVisits={highlightedVisits}
highlightedLabel={highlightedLabel}
2022-02-06 22:07:18 +03:00
setSelectedVisits={setSelectedVisits}
/>
</div>
)}
2022-02-06 22:07:18 +03:00
/>
2020-12-20 21:28:09 +03:00
2022-02-06 22:07:18 +03:00
<Route
path={sections.byContext.subPath}
element={(
<>
<div className={classNames('mt-3 col-lg-6', { 'col-xl-4': !isOrphanVisits })}>
<DoughnutChartCard title="Operating systems" stats={os} />
</div>
<div className={classNames('mt-3 col-lg-6', { 'col-xl-4': !isOrphanVisits })}>
<DoughnutChartCard title="Browsers" stats={browsers} />
</div>
<div className={classNames('mt-3', { 'col-xl-4': !isOrphanVisits, 'col-lg-6': isOrphanVisits })}>
<SortableBarChartCard
title="Referrers"
stats={referrers}
withPagination={false}
highlightedStats={highlightedVisitsToStats(highlightedVisits, 'referer')}
highlightedLabel={highlightedLabel}
sortingItems={{
name: 'Referrer name',
amount: 'Visits amount',
}}
onClick={highlightVisitsForProp('referer')}
/>
</div>
{isOrphanVisits && (
<div className="mt-3 col-lg-6">
<SortableBarChartCard
title="Visited URLs"
stats={visitedUrls}
highlightedLabel={highlightedLabel}
highlightedStats={highlightedVisitsToStats(highlightedVisits, 'visitedUrl')}
sortingItems={{
visitedUrl: 'Visited URL',
amount: 'Visits amount',
}}
onClick={highlightVisitsForProp('visitedUrl')}
/>
</div>
)}
</>
)}
/>
2020-12-20 21:28:09 +03:00
2022-02-06 22:07:18 +03:00
<Route
path={sections.byLocation.subPath}
element={(
<>
<div className="col-lg-6 mt-3">
<SortableBarChartCard
title="Countries"
stats={countries}
highlightedStats={highlightedVisitsToStats(highlightedVisits, 'country')}
highlightedLabel={highlightedLabel}
sortingItems={{
name: 'Country name',
amount: 'Visits amount',
}}
onClick={highlightVisitsForProp('country')}
/>
</div>
<div className="col-lg-6 mt-3">
<SortableBarChartCard
title="Cities"
stats={cities}
highlightedStats={highlightedVisitsToStats(highlightedVisits, 'city')}
highlightedLabel={highlightedLabel}
extraHeaderContent={(activeCities) => mapLocations.length > 0 && (
2022-02-06 22:07:18 +03:00
<OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} />
2022-03-26 14:17:42 +03:00
)}
2022-02-06 22:07:18 +03:00
sortingItems={{
name: 'City name',
amount: 'Visits amount',
}}
onClick={highlightVisitsForProp('city')}
/>
</div>
</>
)}
/>
<Route
path={sections.list.subPath}
element={(
<div className="col-12">
<VisitsTable
visits={normalizedVisits}
selectedVisits={highlightedVisits}
setSelectedVisits={setSelectedVisits}
isOrphanVisits={isOrphanVisits}
/>
</div>
)}
/>
2020-12-20 21:28:09 +03:00
2022-02-06 22:07:18 +03:00
<Route path="*" element={<Navigate replace to={buildSectionUrl(sections.byTime.subPath)} />} />
</Routes>
</Row>
</>
2020-09-05 09:49:18 +03:00
);
};
return (
2020-11-14 00:44:26 +03:00
<>
2020-09-05 09:49:18 +03:00
{children}
<section className="mt-3">
2020-09-05 09:49:18 +03:00
<div className="row flex-md-row-reverse">
<div className="col-lg-7 col-xl-6">
<div className="d-md-flex">
<div className="flex-fill">
<DateRangeSelector
updatable
disabled={loading}
initialDateRange={initialInterval.current}
defaultText="All visits"
onDatesChange={setDates}
/>
</div>
<VisitsFilterDropdown
className="ms-0 ms-md-2 mt-3 mt-md-0"
isOrphanVisits={isOrphanVisits}
selected={resolvedFilter}
onChange={(newVisitsFilter) => updateFiltering({ visitsFilter: newVisitsFilter })}
/>
</div>
2020-09-05 09:49:18 +03:00
</div>
{visits.length > 0 && (
<div className="col-lg-5 col-xl-6 mt-3 mt-lg-0">
<div className="d-flex">
2022-05-25 19:26:34 +03:00
<ExportBtn
className="btn-md-block"
amount={normalizedVisits.length}
onClick={() => exportCsv(normalizedVisits)}
/>
<Button
outline
disabled={highlightedVisits.length === 0}
2022-05-25 19:26:34 +03:00
className="btn-md-block ms-2"
onClick={() => setSelectedVisits([])}
>
Clear selection {highlightedVisits.length > 0 && <>({prettify(highlightedVisits.length)})</>}
</Button>
</div>
</div>
)}
2020-09-05 09:49:18 +03:00
</div>
</section>
<section className="mt-3">
2020-09-05 09:49:18 +03:00
{renderVisitsContent()}
</section>
2020-11-14 00:44:26 +03:00
</>
2020-09-05 09:49:18 +03:00
);
};