1 ? formatLongNumber(label) : label;
+ return +label > 1000 ? formatLongNumber(label) : label;
}
function renderTooltip(model) {
@@ -109,9 +115,7 @@ export default function BarChart({
responsiveAnimationDuration: 0,
maintainAspectRatio: false,
legend: {
- labels: {
- fontColor: colors.text,
- },
+ display: false,
},
scales: {
xAxes: [
@@ -177,6 +181,10 @@ export default function BarChart({
options.tooltips.custom = renderTooltip;
onUpdate(chart.current);
+
+ chart.current.update();
+
+ forceUpdate();
}
useEffect(() => {
@@ -200,23 +208,8 @@ export default function BarChart({
>
-
- {tooltip ? : null}
-
+
+
);
}
-
-const Tooltip = ({ title, value, label, labelColor }) => (
-
-);
diff --git a/components/metrics/BarChart.module.css b/components/metrics/BarChart.module.css
index cd26d3af..aea86a4c 100644
--- a/components/metrics/BarChart.module.css
+++ b/components/metrics/BarChart.module.css
@@ -1,43 +1,3 @@
.chart {
position: relative;
}
-
-.tooltip {
- color: var(--msgColor);
- pointer-events: none;
- z-index: 1;
-}
-
-.content {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- text-align: center;
-}
-
-.title {
- font-size: var(--font-size-xsmall);
- font-weight: 600;
-}
-
-.metric {
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: var(--font-size-small);
- font-weight: 600;
-}
-
-.dot {
- position: relative;
- overflow: hidden;
- border-radius: 100%;
- margin-right: 8px;
- background: var(--gray50);
-}
-
-.color {
- width: 10px;
- height: 10px;
-}
diff --git a/components/metrics/BrowsersTable.js b/components/metrics/BrowsersTable.js
index 97f9bfbd..12c1087b 100644
--- a/components/metrics/BrowsersTable.js
+++ b/components/metrics/BrowsersTable.js
@@ -3,15 +3,14 @@ import { FormattedMessage } from 'react-intl';
import MetricsTable from './MetricsTable';
import { browserFilter } from 'lib/filters';
-export default function BrowsersTable({ websiteId, token, limit }) {
+export default function BrowsersTable({ websiteId, ...props }) {
return (
}
type="browser"
metric={
}
websiteId={websiteId}
- token={token}
- limit={limit}
dataFilter={browserFilter}
/>
);
diff --git a/components/metrics/ChartTooltip.js b/components/metrics/ChartTooltip.js
new file mode 100644
index 00000000..fb290b66
--- /dev/null
+++ b/components/metrics/ChartTooltip.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import Dot from 'components/common/Dot';
+import styles from './ChartTooltip.module.css';
+import ReactTooltip from 'react-tooltip';
+
+export default function ChartTooltip({ chartId, tooltip }) {
+ if (!tooltip) {
+ return null;
+ }
+
+ const { title, value, label, labelColor } = tooltip;
+
+ return (
+
+
+
+
{title}
+
+
+ {value} {label}
+
+
+
+ );
+}
diff --git a/components/metrics/ChartTooltip.module.css b/components/metrics/ChartTooltip.module.css
new file mode 100644
index 00000000..cd26d3af
--- /dev/null
+++ b/components/metrics/ChartTooltip.module.css
@@ -0,0 +1,43 @@
+.chart {
+ position: relative;
+}
+
+.tooltip {
+ color: var(--msgColor);
+ pointer-events: none;
+ z-index: 1;
+}
+
+.content {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
+.title {
+ font-size: var(--font-size-xsmall);
+ font-weight: 600;
+}
+
+.metric {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: var(--font-size-small);
+ font-weight: 600;
+}
+
+.dot {
+ position: relative;
+ overflow: hidden;
+ border-radius: 100%;
+ margin-right: 8px;
+ background: var(--gray50);
+}
+
+.color {
+ width: 10px;
+ height: 10px;
+}
diff --git a/components/metrics/CountriesTable.js b/components/metrics/CountriesTable.js
index d562b464..59d17dfb 100644
--- a/components/metrics/CountriesTable.js
+++ b/components/metrics/CountriesTable.js
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
import useCountryNames from 'hooks/useCountryNames';
import useLocale from 'hooks/useLocale';
-export default function CountriesTable({ websiteId, token, limit, onDataLoad = () => {} }) {
+export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
const [locale] = useLocale();
const countryNames = useCountryNames(locale);
@@ -15,13 +15,12 @@ export default function CountriesTable({ websiteId, token, limit, onDataLoad = (
return (
}
type="country"
metric={
}
websiteId={websiteId}
- token={token}
- limit={limit}
- onDataLoad={data => onDataLoad(percentFilter(data))}
+ onDataLoad={data => onDataLoad?.(percentFilter(data))}
renderLabel={renderLabel}
/>
);
diff --git a/components/metrics/DataTable.js b/components/metrics/DataTable.js
new file mode 100644
index 00000000..5cf9ddb4
--- /dev/null
+++ b/components/metrics/DataTable.js
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { FixedSizeList } from 'react-window';
+import { useSpring, animated, config } from 'react-spring';
+import classNames from 'classnames';
+import NoData from 'components/common/NoData';
+import { formatNumber, formatLongNumber } from 'lib/format';
+import styles from './DataTable.module.css';
+
+export default function DataTable({
+ data,
+ title,
+ metric,
+ className,
+ renderLabel,
+ height,
+ animate = true,
+ virtualize = false,
+}) {
+ const [format, setFormat] = useState(true);
+ const formatFunc = format ? formatLongNumber : formatNumber;
+
+ const handleSetFormat = () => setFormat(state => !state);
+
+ const getRow = row => {
+ const { x: label, y: value, z: percent } = row;
+
+ return (
+
+ );
+ };
+
+ const Row = ({ index, style }) => {
+ return
{getRow(data[index])}
;
+ };
+
+ return (
+
+
+
{title}
+
+ {metric}
+
+
+
+ {data?.length === 0 && }
+ {virtualize && data.length > 0 ? (
+
+ {Row}
+
+ ) : (
+ data.map(row => getRow(row))
+ )}
+
+
+ );
+}
+
+const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) => {
+ const props = useSpring({
+ width: percent,
+ y: value,
+ from: { width: 0, y: 0 },
+ config: animate ? config.default : { duration: 0 },
+ });
+
+ return (
+
+
{label}
+
+
{props.y?.interpolate(format)}
+
+
+
`${n}%`) }}
+ />
+
+ {props.width.interpolate(n => `${n.toFixed(0)}%`)}
+
+
+
+ );
+};
diff --git a/components/metrics/DataTable.module.css b/components/metrics/DataTable.module.css
new file mode 100644
index 00000000..79a60577
--- /dev/null
+++ b/components/metrics/DataTable.module.css
@@ -0,0 +1,95 @@
+.table {
+ position: relative;
+ font-size: var(--font-size-small);
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.body {
+ position: relative;
+ overflow: auto;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ line-height: 40px;
+}
+
+.title {
+ display: flex;
+ font-weight: 600;
+ font-size: var(--font-size-normal);
+}
+
+.metric {
+ font-size: var(--font-size-small);
+ font-weight: 600;
+ text-align: center;
+ width: 100px;
+ cursor: pointer;
+}
+
+.row {
+ position: relative;
+ height: 30px;
+ line-height: 30px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 5px;
+ overflow: hidden;
+}
+
+.label {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ flex: 2;
+}
+
+.label a {
+ color: inherit;
+ text-decoration: none;
+}
+
+.label a:hover {
+ color: var(--primary400);
+}
+
+.label:empty {
+ color: #b3b3b3;
+}
+
+.label:empty:before {
+ content: 'Unknown';
+}
+
+.value {
+ width: 50px;
+ text-align: right;
+ margin-right: 10px;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+.percent {
+ position: relative;
+ width: 50px;
+ color: var(--gray600);
+ border-left: 1px solid var(--gray600);
+ padding-left: 10px;
+ z-index: 1;
+}
+
+.bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 30px;
+ opacity: 0.1;
+ background: var(--primary400);
+ z-index: -1;
+}
diff --git a/components/metrics/DevicesTable.js b/components/metrics/DevicesTable.js
index 7d87d1c1..52b6b5fc 100644
--- a/components/metrics/DevicesTable.js
+++ b/components/metrics/DevicesTable.js
@@ -4,15 +4,14 @@ import { deviceFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl';
import { getDeviceMessage } from 'components/messages';
-export default function DevicesTable({ websiteId, token, limit }) {
+export default function DevicesTable({ websiteId, ...props }) {
return (
}
type="device"
metric={
}
websiteId={websiteId}
- token={token}
- limit={limit}
dataFilter={deviceFilter}
renderLabel={({ x }) => getDeviceMessage(x)}
/>
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 113c6f56..68556c96 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -5,29 +5,36 @@ import { getDateArray, getDateLength } from 'lib/date';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
-import { EVENT_COLORS } from 'lib/constants';
-import usePageQuery from '../../hooks/usePageQuery';
+import usePageQuery from 'hooks/usePageQuery';
+import useShareToken from 'hooks/useShareToken';
+import { EVENT_COLORS, TOKEN_HEADER } from 'lib/constants';
-export default function EventsChart({ websiteId, token }) {
+export default function EventsChart({ websiteId, className, token }) {
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, modified } = dateRange;
const [timezone] = useTimezone();
const { query } = usePageQuery();
+ const shareToken = useShareToken();
- const { data } = useFetch(
+ const { data, loading } = useFetch(
`/api/website/${websiteId}/events`,
{
- start_at: +startDate,
- end_at: +endDate,
- unit,
- tz: timezone,
- url: query.url,
- token,
+ params: {
+ start_at: +startDate,
+ end_at: +endDate,
+ unit,
+ tz: timezone,
+ url: query.url,
+ token,
+ },
+ headers: { [TOKEN_HEADER]: shareToken?.token },
},
- { update: [modified] },
+ [modified],
);
+
const datasets = useMemo(() => {
if (!data) return [];
+ if (loading) return data;
const map = data.reduce((obj, { x, t, y }) => {
if (!obj[x]) {
@@ -44,7 +51,7 @@ export default function EventsChart({ websiteId, token }) {
});
return Object.keys(map).map((key, index) => {
- const color = tinycolor(EVENT_COLORS[index]);
+ const color = tinycolor(EVENT_COLORS[index % EVENT_COLORS.length]);
return {
label: key,
data: map[key],
@@ -54,15 +61,7 @@ export default function EventsChart({ websiteId, token }) {
borderWidth: 1,
};
});
- }, [data]);
-
- function handleCreate(options) {
- const legend = {
- position: 'bottom',
- };
-
- options.legend = legend;
- }
+ }, [data, loading]);
function handleUpdate(chart) {
chart.data.datasets = datasets;
@@ -77,11 +76,13 @@ export default function EventsChart({ websiteId, token }) {
return (
);
diff --git a/components/metrics/EventsTable.js b/components/metrics/EventsTable.js
index 9a7a09cb..c415a3e9 100644
--- a/components/metrics/EventsTable.js
+++ b/components/metrics/EventsTable.js
@@ -1,19 +1,17 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import MetricsTable from './MetricsTable';
-import styles from './EventsTable.module.css';
+import Tag from 'components/common/Tag';
-export default function EventsTable({ websiteId, token, limit, onDataLoad }) {
+export default function EventsTable({ websiteId, ...props }) {
return (
}
type="event"
metric={
}
websiteId={websiteId}
- token={token}
- limit={limit}
renderLabel={({ x }) =>
}
- onDataLoad={onDataLoad}
/>
);
}
@@ -22,7 +20,7 @@ const Label = ({ value }) => {
const [event, label] = value.split(':');
return (
<>
-
{event}
+
{event}
{label}
);
diff --git a/components/metrics/Legend.js b/components/metrics/Legend.js
new file mode 100644
index 00000000..a40ff411
--- /dev/null
+++ b/components/metrics/Legend.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import classNames from 'classnames';
+import Dot from 'components/common/Dot';
+import useLocale from 'hooks/useLocale';
+import styles from './Legend.module.css';
+import useForceUpdate from '../../hooks/useForceUpdate';
+
+export default function Legend({ chart }) {
+ const [locale] = useLocale();
+ const forceUpdate = useForceUpdate();
+
+ function handleClick(index) {
+ const meta = chart.getDatasetMeta(index);
+
+ meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
+
+ chart.update();
+
+ forceUpdate();
+ }
+
+ if (!chart?.legend?.legendItems.find(({ text }) => text)) {
+ return null;
+ }
+
+ return (
+
+ {chart.legend.legendItems.map(({ text, fillStyle, datasetIndex, hidden }) => (
+
handleClick(datasetIndex)}
+ >
+
+ {text}
+
+ ))}
+
+ );
+}
diff --git a/components/metrics/Legend.module.css b/components/metrics/Legend.module.css
new file mode 100644
index 00000000..faa197e3
--- /dev/null
+++ b/components/metrics/Legend.module.css
@@ -0,0 +1,21 @@
+.legend {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ margin-top: 10px;
+}
+
+.label {
+ display: flex;
+ align-items: center;
+ font-size: var(--font-size-xsmall);
+ cursor: pointer;
+}
+
+.label + .label {
+ margin-left: 20px;
+}
+
+.hidden {
+ color: var(--gray400);
+}
diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
index b7a47a10..886ee5f0 100644
--- a/components/metrics/MetricsBar.js
+++ b/components/metrics/MetricsBar.js
@@ -5,12 +5,15 @@ import Loading from 'components/common/Loading';
import ErrorMessage from 'components/common/ErrorMessage';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
-import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import usePageQuery from 'hooks/usePageQuery';
+import useShareToken from 'hooks/useShareToken';
+import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
+import { TOKEN_HEADER } from 'lib/constants';
import MetricCard from './MetricCard';
import styles from './MetricsBar.module.css';
-export default function MetricsBar({ websiteId, token, className }) {
+export default function MetricsBar({ websiteId, className }) {
+ const shareToken = useShareToken();
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
const [format, setFormat] = useState(true);
@@ -19,16 +22,16 @@ export default function MetricsBar({ websiteId, token, className }) {
} = usePageQuery();
const { data, error, loading } = useFetch(
- `/api/website/${websiteId}/metrics`,
+ `/api/website/${websiteId}/stats`,
{
- start_at: +startDate,
- end_at: +endDate,
- url,
- token,
- },
- {
- update: [modified],
+ params: {
+ start_at: +startDate,
+ end_at: +endDate,
+ url,
+ },
+ headers: { [TOKEN_HEADER]: shareToken?.token },
},
+ [url, modified],
);
const formatFunc = format ? formatLongNumber : formatNumber;
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 6850a3bf..25bb4a08 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -1,34 +1,32 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
-import { FixedSizeList } from 'react-window';
-import { useSpring, animated, config } from 'react-spring';
+import firstBy from 'thenby';
import classNames from 'classnames';
import Link from 'components/common/Link';
import Loading from 'components/common/Loading';
-import NoData from 'components/common/NoData';
import useFetch from 'hooks/useFetch';
import Arrow from 'assets/arrow-right.svg';
import { percentFilter } from 'lib/filters';
-import { formatNumber, formatLongNumber } from 'lib/format';
import useDateRange from 'hooks/useDateRange';
import usePageQuery from 'hooks/usePageQuery';
+import useShareToken from 'hooks/useShareToken';
+import ErrorMessage from 'components/common/ErrorMessage';
+import DataTable from './DataTable';
+import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants';
import styles from './MetricsTable.module.css';
-import ErrorMessage from '../common/ErrorMessage';
export default function MetricsTable({
websiteId,
websiteDomain,
- token,
- title,
- metric,
type,
className,
dataFilter,
filterOptions,
limit,
- renderLabel,
- onDataLoad = () => {},
+ onDataLoad,
+ ...props
}) {
+ const shareToken = useShareToken();
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
const {
@@ -38,117 +36,51 @@ export default function MetricsTable({
} = usePageQuery();
const { data, loading, error } = useFetch(
- `/api/website/${websiteId}/rankings`,
+ `/api/website/${websiteId}/metrics`,
{
- type,
- start_at: +startDate,
- end_at: +endDate,
- domain: websiteDomain,
- url,
- token,
+ params: {
+ type,
+ start_at: +startDate,
+ end_at: +endDate,
+ domain: websiteDomain,
+ url,
+ },
+ onDataLoad,
+ delay: DEFAULT_ANIMATION_DURATION,
+ headers: { [TOKEN_HEADER]: shareToken?.token },
},
- { onDataLoad, delay: 300, update: [modified] },
+ [modified],
);
- const [format, setFormat] = useState(true);
- const formatFunc = format ? formatLongNumber : formatNumber;
- const shouldAnimate = limit > 0;
- const rankings = useMemo(() => {
+ const filteredData = useMemo(() => {
if (data) {
const items = percentFilter(dataFilter ? dataFilter(data, filterOptions) : data);
if (limit) {
- return items.filter((e, i) => i < limit);
+ return items.filter((e, i) => i < limit).sort(firstBy('y', -1).thenBy('x'));
}
- return items;
+ return items.sort(firstBy('y', -1).thenBy('x'));
}
return [];
}, [data, error, dataFilter, filterOptions]);
- const handleSetFormat = () => setFormat(state => !state);
-
- const getRow = row => {
- const { x: label, y: value, z: percent } = row;
- return (
-
- );
- };
-
- const Row = ({ index, style }) => {
- return
{getRow(rankings[index])}
;
- };
-
return (
{!data && loading &&
}
{error &&
}
- {data && !error && (
- <>
-
-
{title}
-
- {metric}
-
-
-
- {rankings?.length === 0 && }
- {limit
- ? rankings.map(row => getRow(row))
- : rankings.length > 0 && (
-
- {Row}
-
- )}
-
-
- {limit && (
- }
- href={router.pathname}
- as={resolve({ view: type })}
- size="small"
- iconRight
- >
-
-
- )}
-
-
- )}
+ {data && !error &&
}
+
+ {data && !error && limit && (
+ }
+ href={router.pathname}
+ as={resolve({ view: type })}
+ size="small"
+ iconRight
+ >
+
+
+ )}
+
);
}
-
-const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) => {
- const props = useSpring({
- width: percent,
- y: value,
- from: { width: 0, y: 0 },
- config: animate ? config.default : { duration: 0 },
- });
-
- return (
-
-
{label}
-
-
{props.y?.interpolate(format)}
-
-
-
`${n}%`) }}
- />
-
- {props.width.interpolate(n => `${n.toFixed(0)}%`)}
-
-
-
- );
-};
diff --git a/components/metrics/MetricsTable.module.css b/components/metrics/MetricsTable.module.css
index bbba0009..e93f536e 100644
--- a/components/metrics/MetricsTable.module.css
+++ b/components/metrics/MetricsTable.module.css
@@ -6,95 +6,6 @@
flex-direction: column;
}
-.header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- line-height: 40px;
-}
-
-.title {
- display: flex;
- font-weight: 600;
- font-size: var(--font-size-normal);
-}
-
-.metric {
- font-size: var(--font-size-small);
- font-weight: 600;
- text-align: center;
- width: 100px;
- cursor: pointer;
-}
-
-.row {
- position: relative;
- height: 30px;
- line-height: 30px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 5px;
- overflow: hidden;
-}
-
-.label {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- flex: 2;
-}
-
-.label a {
- color: inherit;
- text-decoration: none;
-}
-
-.label a:hover {
- color: var(--primary400);
-}
-
-.label:empty {
- color: #b3b3b3;
-}
-
-.label:empty:before {
- content: 'Unknown';
-}
-
-.value {
- width: 50px;
- text-align: right;
- margin-right: 10px;
- font-weight: 600;
- cursor: pointer;
-}
-
-.percent {
- position: relative;
- width: 50px;
- color: var(--gray600);
- border-left: 1px solid var(--gray600);
- padding-left: 10px;
- z-index: 1;
-}
-
-.bar {
- position: absolute;
- top: 0;
- left: 0;
- height: 30px;
- opacity: 0.1;
- background: var(--primary400);
- z-index: -1;
-}
-
-.body {
- position: relative;
- flex: 1;
- overflow: hidden;
-}
-
.footer {
display: flex;
justify-content: center;
diff --git a/components/metrics/OSTable.js b/components/metrics/OSTable.js
index 63d4739c..c1790e17 100644
--- a/components/metrics/OSTable.js
+++ b/components/metrics/OSTable.js
@@ -3,15 +3,14 @@ import MetricsTable from './MetricsTable';
import { osFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl';
-export default function OSTable({ websiteId, token, limit }) {
+export default function OSTable({ websiteId, ...props }) {
return (
}
type="os"
metric={
}
websiteId={websiteId}
- token={token}
- limit={limit}
dataFilter={osFilter}
/>
);
diff --git a/components/metrics/PagesTable.js b/components/metrics/PagesTable.js
index 0acda811..c137589f 100644
--- a/components/metrics/PagesTable.js
+++ b/components/metrics/PagesTable.js
@@ -2,15 +2,16 @@ import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import Link from 'next/link';
-import ButtonGroup from 'components/common/ButtonGroup';
-import ButtonLayout from 'components/layout/ButtonLayout';
+import FilterButtons from 'components/common/FilterButtons';
import { urlFilter } from 'lib/filters';
-import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
import usePageQuery from 'hooks/usePageQuery';
import MetricsTable from './MetricsTable';
import styles from './PagesTable.module.css';
-export default function PagesTable({ websiteId, token, websiteDomain, limit, showFilters }) {
+export const FILTER_COMBINED = 0;
+export const FILTER_RAW = 1;
+
+export default function PagesTable({ websiteId, websiteDomain, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED);
const {
resolve,
@@ -48,20 +49,11 @@ export default function PagesTable({ websiteId, token, websiteDomain, limit, sho
type="url"
metric={
}
websiteId={websiteId}
- token={token}
- limit={limit}
dataFilter={urlFilter}
filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
renderLabel={renderLink}
+ {...props}
/>
);
}
-
-const FilterButtons = ({ buttons, selected, onClick }) => {
- return (
-
-
-
- );
-};
diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js
index 9120a6c3..e9d30449 100644
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@@ -4,9 +4,18 @@ import tinycolor from 'tinycolor2';
import CheckVisible from 'components/helpers/CheckVisible';
import BarChart from './BarChart';
import useTheme from 'hooks/useTheme';
-import { THEME_COLORS } from 'lib/constants';
+import { THEME_COLORS, DEFAULT_ANIMATION_DURATION } from 'lib/constants';
-export default function PageviewsChart({ websiteId, data, unit, records, className, loading }) {
+export default function PageviewsChart({
+ websiteId,
+ data,
+ unit,
+ records,
+ className,
+ loading,
+ animationDuration = DEFAULT_ANIMATION_DURATION,
+ ...props
+}) {
const intl = useIntl();
const [theme] = useTheme();
const primaryColor = tinycolor(THEME_COLORS[theme].primary);
@@ -26,7 +35,7 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
data: { datasets },
} = chart;
- datasets[0].data = data.uniques;
+ datasets[0].data = data.sessions;
datasets[0].label = intl.formatMessage({
id: 'metrics.unique-visitors',
defaultMessage: 'Unique visitors',
@@ -36,8 +45,6 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
id: 'metrics.page-views',
defaultMessage: 'Page views',
});
-
- chart.update();
};
if (!data) {
@@ -48,6 +55,7 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
{visible => (
diff --git a/components/metrics/RealtimeChart.js b/components/metrics/RealtimeChart.js
new file mode 100644
index 00000000..6acfd653
--- /dev/null
+++ b/components/metrics/RealtimeChart.js
@@ -0,0 +1,60 @@
+import React, { useMemo, useRef } from 'react';
+import { format, parseISO, startOfMinute, subMinutes, isBefore } from 'date-fns';
+import PageviewsChart from './PageviewsChart';
+import { getDateArray } from 'lib/date';
+import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from 'lib/constants';
+
+function mapData(data) {
+ let last = 0;
+ const arr = [];
+
+ data.reduce((obj, val) => {
+ const { created_at } = val;
+ const t = startOfMinute(parseISO(created_at));
+ if (t.getTime() > last) {
+ obj = { t: format(t, 'yyyy-LL-dd HH:mm:00'), y: 1 };
+ arr.push(obj);
+ last = t;
+ } else {
+ obj.y += 1;
+ }
+ return obj;
+ }, {});
+
+ return arr;
+}
+
+export default function RealtimeChart({ data, unit, ...props }) {
+ const endDate = startOfMinute(new Date());
+ const startDate = subMinutes(endDate, REALTIME_RANGE);
+ const prevEndDate = useRef(endDate);
+
+ const chartData = useMemo(() => {
+ if (data) {
+ return {
+ pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
+ sessions: getDateArray(mapData(data.sessions), startDate, endDate, unit),
+ };
+ }
+ return { pageviews: [], sessions: [] };
+ }, [data]);
+
+ // Don't animate the bars shifting over because it looks weird
+ const animationDuration = useMemo(() => {
+ if (isBefore(prevEndDate.current, endDate)) {
+ prevEndDate.current = endDate;
+ return 0;
+ }
+ return DEFAULT_ANIMATION_DURATION;
+ }, [data]);
+
+ return (
+
+ );
+}
diff --git a/components/metrics/RealtimeHeader.js b/components/metrics/RealtimeHeader.js
new file mode 100644
index 00000000..c501937a
--- /dev/null
+++ b/components/metrics/RealtimeHeader.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PageHeader from '../layout/PageHeader';
+import DropDown from '../common/DropDown';
+import MetricCard from './MetricCard';
+import styles from './RealtimeHeader.module.css';
+
+export default function RealtimeHeader({ websites, data, websiteId, onSelect }) {
+ const options = [
+ { label: , value: 0 },
+ ].concat(
+ websites.map(({ name, website_id }, index) => ({
+ label: name,
+ value: website_id,
+ divider: index === 0,
+ })),
+ );
+
+ const { pageviews, sessions, events, countries } = data;
+
+ return (
+ <>
+
+
+
+
+
+
+
+ }
+ value={pageviews.length}
+ />
+ }
+ value={sessions.length}
+ />
+ }
+ value={events.length}
+ />
+ }
+ value={countries.length}
+ />
+
+
+ );
+}
diff --git a/components/metrics/RealtimeHeader.module.css b/components/metrics/RealtimeHeader.module.css
new file mode 100644
index 00000000..28aabc3e
--- /dev/null
+++ b/components/metrics/RealtimeHeader.module.css
@@ -0,0 +1,4 @@
+.metrics {
+ display: flex;
+ margin-bottom: 10px;
+}
diff --git a/components/metrics/RealtimeLog.js b/components/metrics/RealtimeLog.js
new file mode 100644
index 00000000..6c39dd87
--- /dev/null
+++ b/components/metrics/RealtimeLog.js
@@ -0,0 +1,183 @@
+import React, { useMemo, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { FixedSizeList } from 'react-window';
+import firstBy from 'thenby';
+import { format } from 'date-fns';
+import Icon from 'components/common/Icon';
+import Tag from 'components/common/Tag';
+import Dot from 'components/common/Dot';
+import FilterButtons from 'components/common/FilterButtons';
+import { devices } from 'components/messages';
+import useLocale from 'hooks/useLocale';
+import useCountryNames from 'hooks/useCountryNames';
+import { BROWSERS } from 'lib/constants';
+import Bolt from 'assets/bolt.svg';
+import Visitor from 'assets/visitor.svg';
+import Eye from 'assets/eye.svg';
+import { stringToColor } from 'lib/format';
+import styles from './RealtimeLog.module.css';
+import NoData from '../common/NoData';
+
+const TYPE_ALL = 0;
+const TYPE_PAGEVIEW = 1;
+const TYPE_SESSION = 2;
+const TYPE_EVENT = 3;
+
+const TYPE_ICONS = {
+ [TYPE_PAGEVIEW]: ,
+ [TYPE_SESSION]: ,
+ [TYPE_EVENT]: ,
+};
+
+export default function RealtimeLog({ data, websites }) {
+ const intl = useIntl();
+ const [locale] = useLocale();
+ const countryNames = useCountryNames(locale);
+ const [filter, setFilter] = useState(TYPE_ALL);
+
+ const logs = useMemo(() => {
+ const { pageviews, sessions, events } = data;
+ const logs = [...pageviews, ...sessions, ...events].sort(firstBy('created_at', -1));
+ if (filter) {
+ return logs.filter(row => getType(row) === filter);
+ }
+ return logs;
+ }, [data, filter]);
+
+ const uuids = useMemo(() => {
+ return data.sessions.reduce((obj, { session_id, session_uuid }) => {
+ obj[session_id] = session_uuid;
+ return obj;
+ }, {});
+ }, [data]);
+
+ const buttons = [
+ {
+ label: ,
+ value: TYPE_ALL,
+ },
+ {
+ label: ,
+ value: TYPE_PAGEVIEW,
+ },
+ {
+ label: ,
+ value: TYPE_SESSION,
+ },
+ {
+ label: ,
+ value: TYPE_EVENT,
+ },
+ ];
+
+ function getType({ view_id, session_id, event_id }) {
+ if (event_id) {
+ return TYPE_EVENT;
+ }
+ if (view_id) {
+ return TYPE_PAGEVIEW;
+ }
+ if (session_id) {
+ return TYPE_SESSION;
+ }
+ return null;
+ }
+
+ function getIcon(row) {
+ return TYPE_ICONS[getType(row)];
+ }
+
+ function getWebsite({ website_id }) {
+ return websites.find(n => n.website_id === website_id)?.name;
+ }
+
+ function getDetail({
+ event_type,
+ event_value,
+ view_id,
+ session_id,
+ url,
+ browser,
+ os,
+ country,
+ device,
+ website_id,
+ }) {
+ if (event_type) {
+ return (
+
+ {event_type} {event_value}
+
+ );
+ }
+ if (view_id) {
+ const domain = getWebsite({ website_id });
+ return (
+
+ {url}
+
+ );
+ }
+ if (session_id) {
+ return (
+ {countryNames[country]},
+ browser: {BROWSERS[browser]},
+ os: {os},
+ device: {intl.formatMessage(devices[device])?.toLowerCase()},
+ }}
+ />
+ );
+ }
+ }
+
+ function getTime({ created_at }) {
+ return format(new Date(created_at), 'h:mm:ss');
+ }
+
+ function getColor(row) {
+ const { session_id } = row;
+
+ return stringToColor(uuids[session_id] || `${session_id}${getWebsite(row)}`);
+ }
+
+ const Row = ({ index, style }) => {
+ const row = logs[index];
+ return (
+
+
+
+
+
{getTime(row)}
+
+
+ {getDetail(row)}
+
+
{getWebsite(row)}
+
+
+
+
+
+
+ {logs?.length === 0 && }
+
+ {Row}
+
+
+
-
+
{url && }
-
+
}
- {title}
-
+
+
+ {title}
+
+
{showLink && (
@@ -24,7 +28,7 @@ export default function WebsiteHeader({ websiteId, token, title, showLink = fals
size="small"
iconRight
>
-
+
)}
diff --git a/components/metrics/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css
index 67d23e61..5b5876c6 100644
--- a/components/metrics/WebsiteHeader.module.css
+++ b/components/metrics/WebsiteHeader.module.css
@@ -1,5 +1,5 @@
.title {
- color: var(--gray-900);
+ color: var(--gray900);
font-size: var(--font-size-large);
line-height: var(--font-size-large);
}
diff --git a/components/pages/RealtimeDashboard.js b/components/pages/RealtimeDashboard.js
new file mode 100644
index 00000000..1a2a3f54
--- /dev/null
+++ b/components/pages/RealtimeDashboard.js
@@ -0,0 +1,158 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { subMinutes, startOfMinute } from 'date-fns';
+import firstBy from 'thenby';
+import Page from 'components/layout/Page';
+import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
+import RealtimeChart from 'components/metrics/RealtimeChart';
+import RealtimeLog from 'components/metrics/RealtimeLog';
+import RealtimeHeader from 'components/metrics/RealtimeHeader';
+import WorldMap from 'components/common/WorldMap';
+import DataTable from 'components/metrics/DataTable';
+import RealtimeViews from 'components/metrics/RealtimeViews';
+import useFetch from 'hooks/useFetch';
+import useLocale from 'hooks/useLocale';
+import useCountryNames from 'hooks/useCountryNames';
+import { percentFilter } from 'lib/filters';
+import { TOKEN_HEADER, REALTIME_RANGE, REALTIME_INTERVAL } from 'lib/constants';
+import styles from './RealtimeDashboard.module.css';
+
+function mergeData(state, data, time) {
+ const ids = state.map(({ __id }) => __id);
+ return state
+ .concat(data.filter(({ __id }) => !ids.includes(__id)))
+ .filter(({ created_at }) => new Date(created_at).getTime() >= time);
+}
+
+function filterWebsite(data, id) {
+ return data.filter(({ website_id }) => website_id === id);
+}
+
+export default function RealtimeDashboard() {
+ const [locale] = useLocale();
+ const countryNames = useCountryNames(locale);
+ const [data, setData] = useState();
+ const [websiteId, setWebsiteId] = useState(0);
+ const { data: init, loading } = useFetch('/api/realtime/init');
+ const { data: updates } = useFetch('/api/realtime/update', {
+ params: { start_at: data?.timestamp },
+ disabled: !init?.websites?.length || !data,
+ interval: REALTIME_INTERVAL,
+ headers: { [TOKEN_HEADER]: init?.token },
+ });
+
+ const renderCountryName = useCallback(
+ ({ x }) => {countryNames[x]},
+ [countryNames],
+ );
+
+ const realtimeData = useMemo(() => {
+ if (data) {
+ const { pageviews, sessions, events } = data;
+
+ if (websiteId) {
+ return {
+ pageviews: filterWebsite(pageviews, websiteId),
+ sessions: filterWebsite(sessions, websiteId),
+ events: filterWebsite(events, websiteId),
+ };
+ }
+ }
+
+ return data;
+ }, [data, websiteId]);
+
+ const countries = useMemo(() => {
+ if (realtimeData?.sessions) {
+ return percentFilter(
+ realtimeData.sessions
+ .reduce((arr, { country }) => {
+ if (country) {
+ const row = arr.find(({ x }) => x === country);
+
+ if (!row) {
+ arr.push({ x: country, y: 1 });
+ } else {
+ row.y += 1;
+ }
+ }
+ return arr;
+ }, [])
+ .sort(firstBy('y', -1)),
+ );
+ }
+ return [];
+ }, [realtimeData?.sessions]);
+
+ useEffect(() => {
+ if (init && !data) {
+ const { websites, data } = init;
+
+ setData({ websites, ...data });
+ }
+ }, [init]);
+
+ useEffect(() => {
+ if (updates) {
+ const { pageviews, sessions, events, timestamp } = updates;
+ const time = subMinutes(startOfMinute(new Date()), REALTIME_RANGE).getTime();
+
+ setData(state => ({
+ ...state,
+ pageviews: mergeData(state.pageviews, pageviews, time),
+ sessions: mergeData(state.sessions, sessions, time),
+ events: mergeData(state.events, events, time),
+ timestamp,
+ }));
+ }
+ }, [updates]);
+
+ if (!init || !data || loading) {
+ return null;
+ }
+
+ const { websites } = data;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ metric={}
+ data={countries}
+ renderLabel={renderCountryName}
+ height={500}
+ />
+
+
+
+
+
+
+
+ );
+}
diff --git a/components/pages/RealtimeDashboard.module.css b/components/pages/RealtimeDashboard.module.css
new file mode 100644
index 00000000..b9b5a632
--- /dev/null
+++ b/components/pages/RealtimeDashboard.module.css
@@ -0,0 +1,7 @@
+.container {
+ display: flex;
+}
+
+.chart {
+ margin-bottom: 30px;
+}
diff --git a/components/pages/TestConsole.js b/components/pages/TestConsole.js
index f6fa8a23..b715b4a8 100644
--- a/components/pages/TestConsole.js
+++ b/components/pages/TestConsole.js
@@ -7,7 +7,7 @@ import Page from '../layout/Page';
import PageHeader from '../layout/PageHeader';
import useFetch from '../../hooks/useFetch';
import DropDown from '../common/DropDown';
-import styles from './Test.module.css';
+import styles from './TestConsole.module.css';
import WebsiteChart from '../metrics/WebsiteChart';
import EventsChart from '../metrics/EventsChart';
import Button from '../common/Button';
@@ -82,7 +82,12 @@ export default function TestConsole() {
diff --git a/components/pages/Test.module.css b/components/pages/TestConsole.module.css
similarity index 100%
rename from components/pages/Test.module.css
rename to components/pages/TestConsole.module.css
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index 66545928..81cde3ad 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -4,6 +4,7 @@ import classNames from 'classnames';
import WebsiteChart from 'components/metrics/WebsiteChart';
import WorldMap from 'components/common/WorldMap';
import Page from 'components/layout/Page';
+import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
import MenuLayout from 'components/layout/MenuLayout';
import Link from 'components/common/Link';
import Loading from 'components/common/Loading';
@@ -19,6 +20,8 @@ import EventsTable from '../metrics/EventsTable';
import EventsChart from '../metrics/EventsChart';
import useFetch from 'hooks/useFetch';
import usePageQuery from 'hooks/usePageQuery';
+import useShareToken from 'hooks/useShareToken';
+import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants';
const views = {
url: PagesTable,
@@ -30,8 +33,11 @@ const views = {
event: EventsTable,
};
-export default function WebsiteDetails({ websiteId, token }) {
- const { data } = useFetch(`/api/website/${websiteId}`, { token });
+export default function WebsiteDetails({ websiteId }) {
+ const shareToken = useShareToken();
+ const { data } = useFetch(`/api/website/${websiteId}`, {
+ headers: { [TOKEN_HEADER]: shareToken?.token },
+ });
const [chartLoaded, setChartLoaded] = useState(false);
const [countryData, setCountryData] = useState();
const [eventsData, setEventsData] = useState();
@@ -50,7 +56,7 @@ export default function WebsiteDetails({ websiteId, token }) {
icon={
}
size="small"
>
-
+
);
@@ -91,7 +97,6 @@ export default function WebsiteDetails({ websiteId, token }) {
const tableProps = {
websiteId,
- token,
websiteDomain: data?.domain,
limit: 10,
};
@@ -100,7 +105,7 @@ export default function WebsiteDetails({ websiteId, token }) {
function handleDataLoad() {
if (!chartLoaded) {
- setTimeout(() => setChartLoaded(true), 300);
+ setTimeout(() => setChartLoaded(true), DEFAULT_ANIMATION_DURATION);
}
}
@@ -114,8 +119,8 @@ export default function WebsiteDetails({ websiteId, token }) {
{!chartLoaded && }
{chartLoaded && !view && (
- <>
-
-
-
+
+
+
+
-
-
+
+
-
-
+
+
-
-
0 })}
- >
-
+
+
+ 0 })}>
+
-
-
-
-
-
-
+
))}
{data.length === 0 && (
diff --git a/components/settings/AccountSettings.js b/components/settings/AccountSettings.js
index aa206fa9..b2b0011e 100644
--- a/components/settings/AccountSettings.js
+++ b/components/settings/AccountSettings.js
@@ -25,7 +25,7 @@ export default function AccountSettings() {
const [deleteAccount, setDeleteAccount] = useState();
const [saved, setSaved] = useState(0);
const [message, setMessage] = useState();
- const { data } = useFetch(`/api/accounts`, {}, { update: [saved] });
+ const { data } = useFetch(`/api/accounts`, {}, [saved]);
const Checkmark = ({ is_admin }) => (is_admin ? } size="medium" /> : null);
@@ -42,10 +42,10 @@ export default function AccountSettings() {
row.username !== 'admin' ? (
} size="small" onClick={() => setEditAccount(row)}>
-
+
} size="small" onClick={() => setDeleteAccount(row)}>
-
+
) : null;
@@ -98,12 +98,12 @@ export default function AccountSettings() {
} size="small" onClick={() => setAddAccount(true)}>
-
+
{editAccount && (
- }>
+ }>
)}
{addAccount && (
- }>
+ }>
)}
{deleteAccount && (
}
+ title={}
>
);
diff --git a/components/settings/LanguageButton.js b/components/settings/LanguageButton.js
index 2d340ed0..14a1aaf1 100644
--- a/components/settings/LanguageButton.js
+++ b/components/settings/LanguageButton.js
@@ -16,7 +16,7 @@ export default function LanguageButton() {
return (
<>
- {locale === 'zh-CN' && (
+ {(locale === 'zh-CN' || locale === 'zh-TW') && (
} size="small" onClick={() => setChangePassword(true)}>
-
+
@@ -57,7 +57,7 @@ export default function ProfileSettings() {
{changePassword && (
}
+ title={
}
>
);
diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js
index 17fc5952..686605f2 100644
--- a/components/settings/WebsiteSettings.js
+++ b/components/settings/WebsiteSettings.js
@@ -13,6 +13,7 @@ import ShareUrlForm from 'components/forms/ShareUrlForm';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import ButtonLayout from 'components/layout/ButtonLayout';
import Toast from 'components/common/Toast';
+import Favicon from 'components/common/Favicon';
import Pen from 'assets/pen.svg';
import Trash from 'assets/trash.svg';
import Plus from 'assets/plus.svg';
@@ -29,7 +30,7 @@ export default function WebsiteSettings() {
const [showUrl, setShowUrl] = useState();
const [saved, setSaved] = useState(0);
const [message, setMessage] = useState();
- const { data } = useFetch(`/api/websites`, {}, { update: [saved] });
+ const { data } = useFetch(`/api/websites`, {}, [saved]);
const Buttons = row => (
@@ -52,16 +53,17 @@ export default function WebsiteSettings() {
onClick={() => setShowCode(row)}
/>
} size="small" onClick={() => setEditWebsite(row)}>
-
+
} size="small" onClick={() => setDeleteWebsite(row)}>
-
+
);
- const DetailsLink = ({ website_id, name }) => (
+ const DetailsLink = ({ website_id, name, domain }) => (
+
{name}
);
@@ -113,7 +115,7 @@ export default function WebsiteSettings() {
}
>
} size="medium" onClick={() => setAddWebsite(true)}>
-
+
);
@@ -125,23 +127,23 @@ export default function WebsiteSettings() {