m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-18 15:23:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update table components.

Browse Source
This commit is contained in:
Mike Cao 2020-10-11 01:33:26 -07:00
parent 1fcb610bdd
commit 4119e80a9a
11 changed files with 38 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/metrics/BrowsersTable.js
View File

@ -3,15 +3,15 @@ import { FormattedMessage } from 'react-intl';
import MetricsTable from './MetricsTable'; import MetricsTable from './MetricsTable';
import { browserFilter } from 'lib/filters'; import { browserFilter } from 'lib/filters';
export default function BrowsersTable({ websiteId, token, limit }) { export default function BrowsersTable({ websiteId, token, ...props }) {
return ( return (
<MetricsTable <MetricsTable
{...props}
title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />} title={<FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />}
type="browser" type="browser"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />} metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId} websiteId={websiteId}
token={token} token={token}
limit={limit}
dataFilter={browserFilter} dataFilter={browserFilter}
/> />
); );

6
components/metrics/CountriesTable.js
View File

@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
import useCountryNames from 'hooks/useCountryNames'; import useCountryNames from 'hooks/useCountryNames';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
export default function CountriesTable({ websiteId, token, limit, onDataLoad = () => {} }) { export default function CountriesTable({ websiteId, token, onDataLoad, ...props }) {
const [locale] = useLocale(); const [locale] = useLocale();
const countryNames = useCountryNames(locale); const countryNames = useCountryNames(locale);
@ -15,13 +15,13 @@ export default function CountriesTable({ websiteId, token, limit, onDataLoad = (
return ( return (
<MetricsTable <MetricsTable
{...props}
title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />} title={<FormattedMessage id="metrics.countries" defaultMessage="Countries" />}
type="country" type="country"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />} metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId} websiteId={websiteId}
token={token} token={token}
limit={limit} onDataLoad={data => onDataLoad?.(percentFilter(data))}
onDataLoad={data => onDataLoad(percentFilter(data))}
renderLabel={renderLabel} renderLabel={renderLabel}
/> />
); );

10
components/metrics/DataTable.js
View File

@ -11,10 +11,10 @@ export default function DataTable({
title, title,
metric, metric,
className, className,
limit,
renderLabel, renderLabel,
height = 400, height = 400,
animate = true, animate = true,
virtualize = false,
}) { }) {
const [format, setFormat] = useState(true); const [format, setFormat] = useState(true);
const formatFunc = format ? formatLongNumber : formatNumber; const formatFunc = format ? formatLongNumber : formatNumber;
@ -30,7 +30,7 @@ export default function DataTable({
label={renderLabel ? renderLabel(row) : label} label={renderLabel ? renderLabel(row) : label}
value={value} value={value}
percent={percent} percent={percent}
animate={animate} animate={animate && !virtualize}
format={formatFunc} format={formatFunc}
onClick={handleSetFormat} onClick={handleSetFormat}
/> />
@ -51,12 +51,12 @@ export default function DataTable({
</div> </div>
<div className={styles.body}> <div className={styles.body}>
{data?.length === 0 && <NoData />} {data?.length === 0 && <NoData />}
{limit {virtualize && data.length > 0 ? (
? data.map(row => getRow(row))
: data.length > 0 && (
<FixedSizeList height={height} itemCount={data.length} itemSize={30}> <FixedSizeList height={height} itemCount={data.length} itemSize={30}>
{Row} {Row}
</FixedSizeList> </FixedSizeList>
) : (
data.map(row => getRow(row))
)} )}
</div> </div>
</div> </div>

4
components/metrics/DevicesTable.js
View File

@ -4,15 +4,15 @@ import { deviceFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { getDeviceMessage } from 'components/messages'; import { getDeviceMessage } from 'components/messages';
export default function DevicesTable({ websiteId, token, limit }) { export default function DevicesTable({ websiteId, token, ...props }) {
return ( return (
<MetricsTable <MetricsTable
{...props}
title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />} title={<FormattedMessage id="metrics.devices" defaultMessage="Devices" />}
type="device" type="device"
metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />} metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
websiteId={websiteId} websiteId={websiteId}
token={token} token={token}
limit={limit}
dataFilter={deviceFilter} dataFilter={deviceFilter}
renderLabel={({ x }) => getDeviceMessage(x)} renderLabel={({ x }) => getDeviceMessage(x)}
/> />

5
components/metrics/EventsTable.js
View File

@ -3,17 +3,16 @@ import { FormattedMessage } from 'react-intl';
import MetricsTable from './MetricsTable'; import MetricsTable from './MetricsTable';
import Tag from 'components/common/Tag'; import Tag from 'components/common/Tag';
export default function EventsTable({ websiteId, token, limit, onDataLoad }) { export default function EventsTable({ websiteId, token, ...props }) {
return ( return (
<MetricsTable <MetricsTable
{...props}
title={<FormattedMessage id="metrics.events" defaultMessage="Events" />} title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
type="event" type="event"
metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />} metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
websiteId={websiteId} websiteId={websiteId}
token={token} token={token}
limit={limit}
renderLabel={({ x }) => <Label value={x} />} renderLabel={({ x }) => <Label value={x} />}
onDataLoad={onDataLoad}
/> />
); );
} }

8
components/metrics/MetricsTable.js
View File

@ -24,9 +24,11 @@ export default function MetricsTable({
dataFilter, dataFilter,
filterOptions, filterOptions,
limit, limit,
virtualize,
renderLabel, renderLabel,
height, height,
onDataLoad = () => {}, onDataLoad,
...props
}) { }) {
const [dateRange] = useDateRange(websiteId); const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange; const { startDate, endDate, modified } = dateRange;
@ -70,14 +72,14 @@ export default function MetricsTable({
{error && <ErrorMessage />} {error && <ErrorMessage />}
{data && !error && ( {data && !error && (
<DataTable <DataTable
{...props}
title={title} title={title}
data={filteredData} data={filteredData}
metric={metric} metric={metric}
className={className} className={className}
renderLabel={renderLabel} renderLabel={renderLabel}
limit={limit}
height={height} height={height}
animate={limit > 0} virtualize={virtualize}
/> />
)} )}
<div className={styles.footer}> <div className={styles.footer}>

4
components/metrics/PagesTable.js
View File

@ -10,7 +10,7 @@ import usePageQuery from 'hooks/usePageQuery';
import MetricsTable from './MetricsTable'; import MetricsTable from './MetricsTable';
import styles from './PagesTable.module.css'; import styles from './PagesTable.module.css';
export default function PagesTable({ websiteId, token, websiteDomain, limit, showFilters }) { export default function PagesTable({ websiteId, token, websiteDomain, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED); const [filter, setFilter] = useState(FILTER_COMBINED);
const { const {
resolve, resolve,
@ -49,10 +49,10 @@ export default function PagesTable({ websiteId, token, websiteDomain, limit, sho
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />} metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
websiteId={websiteId} websiteId={websiteId}
token={token} token={token}
limit={limit}
dataFilter={urlFilter} dataFilter={urlFilter}
filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }} filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
renderLabel={renderLink} renderLabel={renderLink}
{...props}
/> />
</> </>
); );

4
components/metrics/ReferrersTable.js
View File

@ -6,7 +6,7 @@ import ButtonGroup from 'components/common/ButtonGroup';
import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants'; import { FILTER_DOMAIN_ONLY, FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
import ButtonLayout from '../layout/ButtonLayout'; import ButtonLayout from '../layout/ButtonLayout';
export default function ReferrersTable({ websiteId, websiteDomain, token, limit, showFilters }) { export default function ReferrersTable({ websiteId, websiteDomain, token, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED); const [filter, setFilter] = useState(FILTER_COMBINED);
const buttons = [ const buttons = [
@ -35,13 +35,13 @@ export default function ReferrersTable({ websiteId, websiteDomain, token, limit,
<> <>
{showFilters && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />} {showFilters && <FilterButtons buttons={buttons} selected={filter} onClick={setFilter} />}
<MetricsTable <MetricsTable
{...props}
title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />} title={<FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />}
type="referrer" type="referrer"
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />} metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
websiteId={websiteId} websiteId={websiteId}
websiteDomain={websiteDomain} websiteDomain={websiteDomain}
token={token} token={token}
limit={limit}
dataFilter={refFilter} dataFilter={refFilter}
filterOptions={{ filterOptions={{
domain: websiteDomain, domain: websiteDomain,

18
components/pages/RealtimeDashboard.js
View File

@ -1,19 +1,19 @@
import React, { useState, useEffect, useMemo, useCallback } from 'react'; import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { FormattedMessage } from 'react-intl';
import { subMinutes, startOfMinute } from 'date-fns'; import { subMinutes, startOfMinute } from 'date-fns';
import firstBy from 'thenby'; import firstBy from 'thenby';
import { percentFilter } from 'lib/filters';
import Page from 'components/layout/Page'; import Page from 'components/layout/Page';
import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout'; import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
import RealtimeChart from '../metrics/RealtimeChart'; import RealtimeChart from 'components/metrics/RealtimeChart';
import RealtimeLog from '../metrics/RealtimeLog'; import RealtimeLog from 'components/metrics/RealtimeLog';
import styles from './RealtimeDashboard.module.css'; import RealtimeHeader from 'components/metrics/RealtimeHeader';
import RealtimeHeader from '../metrics/RealtimeHeader'; import WorldMap from 'components/common/WorldMap';
import DataTable from 'components/metrics/DataTable';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import WorldMap from '../common/WorldMap';
import DataTable from '../metrics/DataTable';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames'; import useCountryNames from 'hooks/useCountryNames';
import { FormattedMessage } from 'react-intl'; import { percentFilter } from 'lib/filters';
import styles from './RealtimeDashboard.module.css';
const REALTIME_RANGE = 30; const REALTIME_RANGE = 30;
const REALTIME_INTERVAL = 3000; const REALTIME_INTERVAL = 3000;
@ -162,7 +162,6 @@ export default function RealtimeDashboard() {
metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />} metric={<FormattedMessage id="metrics.views" defaultMessage="Views" />}
data={referrers} data={referrers}
height={400} height={400}
animate={false}
/> />
</GridColumn> </GridColumn>
<GridColumn xs={12} lg={8}> <GridColumn xs={12} lg={8}>
@ -177,7 +176,6 @@ export default function RealtimeDashboard() {
data={countries} data={countries}
renderLabel={renderCountryName} renderLabel={renderCountryName}
height={500} height={500}
animate={false}
/> />
</GridColumn> </GridColumn>
<GridColumn xs={12} lg={8}> <GridColumn xs={12} lg={8}>

4
components/pages/WebsiteDetails.js
View File

@ -164,14 +164,14 @@ export default function WebsiteDetails({ websiteId, token }) {
</GridRow> </GridRow>
</GridLayout> </GridLayout>
)} )}
{view && ( {view && chartLoaded && (
<MenuLayout <MenuLayout
className={styles.view} className={styles.view}
menuClassName={styles.menu} menuClassName={styles.menu}
contentClassName={styles.content} contentClassName={styles.content}
menu={menuOptions} menu={menuOptions}
> >
<DetailsComponent {...tableProps} height={500} limit={false} showFilters={true} /> <DetailsComponent {...tableProps} height={500} limit={false} showFilters virtualize />
</MenuLayout> </MenuLayout>
)} )}
</Page> </Page>

2
pages/api/website/[id]/metrics.js
View File

@ -55,7 +55,7 @@ export default async (req, res) => {
getColumn(type), getColumn(type),
getTable(type), getTable(type),
{ {
domain, domain: type !== 'event' && domain,
url: type !== 'url' && url, url: type !== 'url' && url,
}, },
); );