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

293 lines
10 KiB
TypeScript
Raw Normal View History

2020-09-05 09:49:18 +03:00
import { isEmpty, propEq, values } from 'ramda';
2020-11-14 00:44:26 +03:00
import { useState, useEffect, useMemo, FC } from 'react';
import { Button, Card, Nav, NavLink, Progress, Row } from 'reactstrap';
2020-09-05 09:49:18 +03:00
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
2021-03-14 14:49:12 +03:00
import { faCalendarAlt, faMapMarkedAlt, faList, faChartPie, faFileExport } from '@fortawesome/free-solid-svg-icons';
import { IconDefinition } from '@fortawesome/fontawesome-common-types';
2020-12-20 21:28:09 +03:00
import { Route, Switch, NavLink as RouterNavLink, Redirect } from 'react-router-dom';
import { Location } from 'history';
import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
2020-09-05 09:49:18 +03:00
import Message from '../utils/Message';
import { formatIsoDate } from '../utils/helpers/date';
import { ShlinkVisitsParams } from '../api/types';
import { DateInterval, DateRange, intervalToDateRange } from '../utils/dates/types';
import { Result } from '../utils/Result';
import { ShlinkApiError } from '../api/ShlinkApiError';
2021-03-06 12:56:49 +03:00
import { Settings } from '../settings/reducers/settings';
2020-09-05 09:49:18 +03:00
import SortableBarGraph from './helpers/SortableBarGraph';
import GraphCard from './helpers/GraphCard';
import LineChartCard from './helpers/LineChartCard';
import VisitsTable from './VisitsTable';
import { NormalizedVisit, Stats, VisitsInfo } from './types';
import OpenMapModalBtn from './helpers/OpenMapModalBtn';
import { normalizeVisits, processStatsFromVisits } from './services/VisitsParser';
import './VisitsStats.scss';
2020-09-05 09:49:18 +03:00
export interface VisitsStatsProps {
getVisits: (params: Partial<ShlinkVisitsParams>) => void;
visitsInfo: VisitsInfo;
2021-03-06 12:56:49 +03:00
settings: Settings;
2020-09-05 09:49:18 +03:00
cancelGetVisits: () => void;
2020-12-20 21:28:09 +03:00
baseUrl: string;
domain?: string;
2021-03-14 14:49:12 +03:00
exportCsv: (visits: NormalizedVisit[]) => void;
2020-09-05 09:49:18 +03:00
}
interface VisitsNavLinkProps {
title: string;
subPath: string;
icon: IconDefinition;
}
2020-09-05 09:49:18 +03:00
type HighlightableProps = 'referer' | 'country' | 'city';
type Section = 'byTime' | 'byContext' | 'byLocation' | 'list';
const sections: Record<Section, VisitsNavLinkProps> = {
byTime: { title: 'By time', subPath: '', 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
const highlightedVisitsToStats = (
highlightedVisits: NormalizedVisit[],
prop: HighlightableProps,
): Stats => highlightedVisits.reduce<Stats>((acc, highlightedVisit) => {
if (!acc[highlightedVisit[prop]]) {
acc[highlightedVisit[prop]] = 0;
}
acc[highlightedVisit[prop]] += 1;
return acc;
}, {});
let selectedBar: string | undefined;
const VisitsNavLink: FC<VisitsNavLinkProps & { to: string }> = ({ subPath, title, icon, to }) => (
<NavLink
tag={RouterNavLink}
className="visits-stats__nav-link"
to={to}
isActive={(_: null, { pathname }: Location) => pathname.endsWith(`visits${subPath}`)}
replace
>
<FontAwesomeIcon icon={icon} />
<span className="ml-2 d-none d-sm-inline">{title}</span>
</NavLink>
);
2021-03-06 12:56:49 +03:00
const VisitsStats: FC<VisitsStatsProps> = (
2021-03-14 14:49:12 +03:00
{ children, visitsInfo, getVisits, cancelGetVisits, baseUrl, domain, settings, exportCsv },
2021-03-06 12:56:49 +03:00
) => {
const initialInterval: DateInterval = settings.visits?.defaultInterval ?? 'last30Days';
const [ dateRange, setDateRange ] = useState<DateRange>(intervalToDateRange(initialInterval));
2020-09-05 09:49:18 +03:00
const [ highlightedVisits, setHighlightedVisits ] = useState<NormalizedVisit[]>([]);
const [ highlightedLabel, setHighlightedLabel ] = useState<string | undefined>();
2020-12-20 21:28:09 +03:00
const buildSectionUrl = (subPath?: string) => {
const query = domain ? `?domain=${domain}` : '';
return !subPath ? `${baseUrl}${query}` : `${baseUrl}${subPath}${query}`;
2020-12-20 21:28:09 +03:00
};
const { visits, loading, loadingLarge, error, errorData, progress } = visitsInfo;
2020-09-05 09:49:18 +03:00
const normalizedVisits = useMemo(() => normalizeVisits(visits), [ visits ]);
const { os, browsers, referrers, countries, cities, citiesForMap } = useMemo(
() => processStatsFromVisits(normalizedVisits),
[ normalizedVisits ],
);
const mapLocations = values(citiesForMap);
const setSelectedVisits = (selectedVisits: NormalizedVisit[]) => {
selectedBar = undefined;
setHighlightedVisits(selectedVisits);
};
const highlightVisitsForProp = (prop: HighlightableProps) => (value: string) => {
const newSelectedBar = `${prop}_${value}`;
if (selectedBar === newSelectedBar) {
setHighlightedVisits([]);
setHighlightedLabel(undefined);
selectedBar = undefined;
} else {
setHighlightedVisits(normalizedVisits.filter(propEq(prop, value)));
setHighlightedLabel(value);
selectedBar = newSelectedBar;
}
};
useEffect(() => cancelGetVisits, []);
2020-09-05 09:49:18 +03:00
useEffect(() => {
const { startDate, endDate } = dateRange;
getVisits({ startDate: formatIsoDate(startDate) ?? undefined, endDate: formatIsoDate(endDate) ?? undefined });
}, [ dateRange ]);
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>;
}
return (
<>
<Card className="visits-stats__nav p-0 overflow-hidden" body>
<Nav pills fill>
{Object.entries(sections).map(([ section, props ]) =>
<VisitsNavLink key={section} {...props} to={buildSectionUrl(props.subPath)} />)}
</Nav>
</Card>
<Row>
2020-12-20 21:28:09 +03:00
<Switch>
<Route exact path={baseUrl}>
<div className="col-12 mt-4">
<LineChartCard
title="Visits during time"
visits={normalizedVisits}
highlightedVisits={highlightedVisits}
highlightedLabel={highlightedLabel}
setSelectedVisits={setSelectedVisits}
/>
</div>
</Route>
<Route exact path={`${baseUrl}${sections.byContext.subPath}`}>
<div className="col-xl-4 col-lg-6 mt-4">
<GraphCard title="Operating systems" stats={os} />
</div>
<div className="col-xl-4 col-lg-6 mt-4">
<GraphCard title="Browsers" stats={browsers} />
</div>
<div className="col-xl-4 mt-4">
<SortableBarGraph
title="Referrers"
stats={referrers}
withPagination={false}
highlightedStats={highlightedVisitsToStats(highlightedVisits, 'referer')}
highlightedLabel={highlightedLabel}
sortingItems={{
name: 'Referrer name',
amount: 'Visits amount',
}}
onClick={highlightVisitsForProp('referer')}
/>
</div>
2020-12-20 21:28:09 +03:00
</Route>
<Route exact path={`${baseUrl}${sections.byLocation.subPath}`}>
<div className="col-lg-6 mt-4">
<SortableBarGraph
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-4">
<SortableBarGraph
title="Cities"
stats={cities}
highlightedStats={highlightedVisitsToStats(highlightedVisits, 'city')}
highlightedLabel={highlightedLabel}
extraHeaderContent={(activeCities: string[]) =>
mapLocations.length > 0 &&
<OpenMapModalBtn modalTitle="Cities" locations={mapLocations} activeCities={activeCities} />
}
sortingItems={{
name: 'City name',
amount: 'Visits amount',
}}
onClick={highlightVisitsForProp('city')}
/>
</div>
2020-12-20 21:28:09 +03:00
</Route>
<Route exact path={`${baseUrl}${sections.list.subPath}`}>
2020-12-20 21:28:09 +03:00
<div className="col-12">
<VisitsTable
visits={normalizedVisits}
selectedVisits={highlightedVisits}
setSelectedVisits={setSelectedVisits}
/>
</div>
</Route>
<Redirect to={baseUrl} />
</Switch>
</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-4">
<div className="row flex-md-row-reverse">
<div className="col-lg-7 col-xl-6">
<DateRangeSelector
2020-09-05 09:49:18 +03:00
disabled={loading}
initialDateRange={initialInterval}
defaultText="All visits"
onDatesChange={setDateRange}
2020-09-05 09:49:18 +03:00
/>
</div>
{visits.length > 0 && (
<div className="col-lg-5 col-xl-6 mt-4 mt-lg-0">
<div className="d-flex">
<Button
outline
disabled={highlightedVisits.length === 0}
className="btn-md-block mr-2"
onClick={() => setSelectedVisits([])}
>
Clear selection {highlightedVisits.length > 0 && <>({highlightedVisits.length})</>}
</Button>
<Button
outline
color="primary"
className="btn-md-block"
onClick={() => exportCsv(normalizedVisits)}
>
Export <FontAwesomeIcon icon={faFileExport} />
</Button>
</div>
</div>
)}
2020-09-05 09:49:18 +03:00
</div>
</section>
<section className="mt-4">
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
);
};
export default VisitsStats;