{},
onUpdate = () => {},
}) {
const canvas = useRef();
const chart = useRef();
- const [tooltip, setTooltip] = useState({});
+ const [tooltip, setTooltip] = useState(null);
const [locale] = useLocale();
+ const [theme] = useTheme();
+ const forceUpdate = useForceUpdate();
+
+ const colors = {
+ text: THEME_COLORS[theme].gray700,
+ line: THEME_COLORS[theme].gray200,
+ zeroLine: THEME_COLORS[theme].gray500,
+ };
function renderXLabel(label, index, values) {
+ if (loading) return '';
const d = new Date(values[index].value);
const w = canvas.current.width;
switch (unit) {
+ case 'minute':
+ return index % 2 === 0 ? dateFormat(d, 'h:mm', locale) : '';
case 'hour':
return dateFormat(d, 'ha', locale);
case 'day':
@@ -53,24 +69,25 @@ export default function BarChart({
}
function renderYLabel(label) {
- return +label > 1 ? formatLongNumber(label) : label;
+ return +label > 1000 ? formatLongNumber(label) : label;
}
function renderTooltip(model) {
const { opacity, title, body, labelColors } = model;
- if (!opacity) {
+ if (!opacity || !title) {
setTooltip(null);
- } else {
- const [label, value] = body[0].lines[0].split(':');
-
- setTooltip({
- title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
- value,
- label,
- labelColor: labelColors[0].backgroundColor,
- });
+ return;
}
+
+ const [label, value] = body[0].lines[0].split(':');
+
+ setTooltip({
+ title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
+ value,
+ label,
+ labelColor: labelColors[0].backgroundColor,
+ });
}
function getTooltipFormat(unit) {
@@ -97,6 +114,9 @@ export default function BarChart({
responsive: true,
responsiveAnimationDuration: 0,
maintainAspectRatio: false,
+ legend: {
+ display: false,
+ },
scales: {
xAxes: [
{
@@ -110,6 +130,7 @@ export default function BarChart({
callback: renderXLabel,
minRotation: 0,
maxRotation: 0,
+ fontColor: colors.text,
},
gridLines: {
display: false,
@@ -123,6 +144,11 @@ export default function BarChart({
ticks: {
callback: renderYLabel,
beginAtZero: true,
+ fontColor: colors.text,
+ },
+ gridLines: {
+ color: colors.line,
+ zeroLineColor: colors.zeroLine,
},
stacked,
},
@@ -144,12 +170,21 @@ export default function BarChart({
function updateChart() {
const { options } = chart.current;
+ options.legend.labels.fontColor = colors.text;
options.scales.xAxes[0].time.unit = unit;
options.scales.xAxes[0].ticks.callback = renderXLabel;
+ options.scales.xAxes[0].ticks.fontColor = colors.text;
+ options.scales.yAxes[0].ticks.fontColor = colors.text;
+ options.scales.yAxes[0].gridLines.color = colors.line;
+ options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
options.animation.duration = animationDuration;
options.tooltips.custom = renderTooltip;
onUpdate(chart.current);
+
+ chart.current.update();
+
+ forceUpdate();
}
useEffect(() => {
@@ -161,7 +196,7 @@ export default function BarChart({
updateChart();
}
}
- }, [datasets, unit, animationDuration, locale]);
+ }, [datasets, unit, animationDuration, locale, theme]);
return (
<>
@@ -173,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 88b785ca..aea86a4c 100644
--- a/components/metrics/BarChart.module.css
+++ b/components/metrics/BarChart.module.css
@@ -1,43 +1,3 @@
.chart {
position: relative;
}
-
-.tooltip {
- pointer-events: none;
- z-index: 1;
-}
-
-.content {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- color: var(--gray50);
- 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 f092e62f..12c1087b 100644
--- a/components/metrics/BrowsersTable.js
+++ b/components/metrics/BrowsersTable.js
@@ -3,17 +3,15 @@ import { FormattedMessage } from 'react-intl';
import MetricsTable from './MetricsTable';
import { browserFilter } from 'lib/filters';
-export default function BrowsersTable({ websiteId, token, limit, onExpand }) {
+export default function BrowsersTable({ websiteId, ...props }) {
return (
}
type="browser"
metric={
}
websiteId={websiteId}
- token={token}
- limit={limit}
dataFilter={browserFilter}
- onExpand={onExpand}
/>
);
}
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 1f516653..59d17dfb 100644
--- a/components/metrics/CountriesTable.js
+++ b/components/metrics/CountriesTable.js
@@ -1,26 +1,27 @@
import React from 'react';
import MetricsTable from './MetricsTable';
-import { countryFilter, percentFilter } from 'lib/filters';
+import { percentFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl';
+import useCountryNames from 'hooks/useCountryNames';
+import useLocale from 'hooks/useLocale';
+
+export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
+ const [locale] = useLocale();
+ const countryNames = useCountryNames(locale);
+
+ function renderLabel({ x }) {
+ return
{countryNames[x]}
;
+ }
-export default function CountriesTable({
- websiteId,
- token,
- limit,
- onDataLoad = () => {},
- onExpand,
-}) {
return (
}
type="country"
metric={
}
websiteId={websiteId}
- token={token}
- limit={limit}
- dataFilter={countryFilter}
- onDataLoad={data => onDataLoad(percentFilter(data))}
- onExpand={onExpand}
+ 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 85d2bdfd..52b6b5fc 100644
--- a/components/metrics/DevicesTable.js
+++ b/components/metrics/DevicesTable.js
@@ -4,18 +4,16 @@ import { deviceFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl';
import { getDeviceMessage } from 'components/messages';
-export default function DevicesTable({ websiteId, token, limit, onExpand }) {
+export default function DevicesTable({ websiteId, ...props }) {
return (
}
type="device"
metric={
}
websiteId={websiteId}
- token={token}
- limit={limit}
dataFilter={deviceFilter}
renderLabel={({ x }) => getDeviceMessage(x)}
- onExpand={onExpand}
/>
);
}
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 4a49d129..68556c96 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -1,37 +1,40 @@
import React, { useMemo } from 'react';
import tinycolor from 'tinycolor2';
import BarChart from './BarChart';
-import { getTimezone, getDateArray, getDateLength } from 'lib/date';
+import { getDateArray, getDateLength } from 'lib/date';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
+import useTimezone from 'hooks/useTimezone';
+import usePageQuery from 'hooks/usePageQuery';
+import useShareToken from 'hooks/useShareToken';
+import { EVENT_COLORS, TOKEN_HEADER } from 'lib/constants';
-const COLORS = [
- '#2680eb',
- '#9256d9',
- '#44b556',
- '#e68619',
- '#e34850',
- '#1b959a',
- '#d83790',
- '#85d044',
-];
-
-export default function EventsChart({ websiteId, token }) {
- const dateRange = useDateRange(websiteId);
+export default function EventsChart({ websiteId, className, token }) {
+ const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, modified } = dateRange;
- const { data } = useFetch(
+ const [timezone] = useTimezone();
+ const { query } = usePageQuery();
+ const shareToken = useShareToken();
+
+ const { data, loading } = useFetch(
`/api/website/${websiteId}/events`,
{
- start_at: +startDate,
- end_at: +endDate,
- unit,
- tz: getTimezone(),
- 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]) {
@@ -48,25 +51,17 @@ export default function EventsChart({ websiteId, token }) {
});
return Object.keys(map).map((key, index) => {
- const color = tinycolor(COLORS[index]);
+ const color = tinycolor(EVENT_COLORS[index % EVENT_COLORS.length]);
return {
label: key,
data: map[key],
lineTension: 0,
- backgroundColor: color.setAlpha(0.4).toRgbString(),
- borderColor: color.setAlpha(0.5).toRgbString(),
+ backgroundColor: color.setAlpha(0.6).toRgbString(),
+ borderColor: color.setAlpha(0.7).toRgbString(),
borderWidth: 1,
};
});
- }, [data]);
-
- function handleCreate(options) {
- const legend = {
- position: 'bottom',
- };
-
- options.legend = legend;
- }
+ }, [data, loading]);
function handleUpdate(chart) {
chart.data.datasets = datasets;
@@ -81,11 +76,13 @@ export default function EventsChart({ websiteId, token }) {
return (
);
diff --git a/components/metrics/EventsTable.js b/components/metrics/EventsTable.js
index 948b9f7a..c415a3e9 100644
--- a/components/metrics/EventsTable.js
+++ b/components/metrics/EventsTable.js
@@ -1,20 +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, onExpand, onDataLoad }) {
+export default function EventsTable({ websiteId, ...props }) {
return (
}
type="event"
metric={
}
websiteId={websiteId}
- token={token}
- limit={limit}
renderLabel={({ x }) =>
}
- onExpand={onExpand}
- onDataLoad={onDataLoad}
/>
);
}
@@ -23,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/MetricCard.module.css b/components/metrics/MetricCard.module.css
index 3f3405ee..50b92ac8 100644
--- a/components/metrics/MetricCard.module.css
+++ b/components/metrics/MetricCard.module.css
@@ -3,7 +3,6 @@
flex-direction: column;
justify-content: center;
min-width: 140px;
- padding-right: 20px;
}
.value {
diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
index 8d128c18..886ee5f0 100644
--- a/components/metrics/MetricsBar.js
+++ b/components/metrics/MetricsBar.js
@@ -2,27 +2,37 @@ import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import Loading from 'components/common/Loading';
+import ErrorMessage from 'components/common/ErrorMessage';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
+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 }) {
- const dateRange = useDateRange(websiteId);
+export default function MetricsBar({ websiteId, className }) {
+ const shareToken = useShareToken();
+ const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
- const { data } = useFetch(
- `/api/website/${websiteId}/metrics`,
- {
- start_at: +startDate,
- end_at: +endDate,
- token,
- },
- {
- update: [modified],
- },
- );
const [format, setFormat] = useState(true);
+ const {
+ query: { url },
+ } = usePageQuery();
+
+ const { data, error, loading } = useFetch(
+ `/api/website/${websiteId}/stats`,
+ {
+ params: {
+ start_at: +startDate,
+ end_at: +endDate,
+ url,
+ },
+ headers: { [TOKEN_HEADER]: shareToken?.token },
+ },
+ [url, modified],
+ );
const formatFunc = format ? formatLongNumber : formatNumber;
@@ -34,9 +44,9 @@ export default function MetricsBar({ websiteId, token, className }) {
return (
- {!data ? (
-
- ) : (
+ {!data && loading &&
}
+ {error &&
}
+ {data && !error && (
<>
}
diff --git a/components/metrics/MetricsBar.module.css b/components/metrics/MetricsBar.module.css
index 5f5cb1a7..b13e974f 100644
--- a/components/metrics/MetricsBar.module.css
+++ b/components/metrics/MetricsBar.module.css
@@ -1,13 +1,18 @@
.bar {
display: flex;
cursor: pointer;
+ min-height: 80px;
+}
+
+.bar > div + div {
+ padding-left: 20px;
}
@media only screen and (max-width: 992px) {
.bar {
justify-content: space-between;
}
- .bar > div:last-child {
+ .bar > div:nth-child(n + 3) {
display: none;
}
}
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 560c25f0..25bb4a08 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -1,143 +1,86 @@
-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 Button from 'components/common/Button';
+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';
export default function MetricsTable({
websiteId,
websiteDomain,
- token,
- title,
- metric,
type,
className,
dataFilter,
filterOptions,
limit,
- headerComponent,
- renderLabel,
- onDataLoad = () => {},
- onExpand = () => {},
+ onDataLoad,
+ ...props
}) {
- const dateRange = useDateRange(websiteId);
+ const shareToken = useShareToken();
+ const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
- const { data } = useFetch(
- `/api/website/${websiteId}/rankings`,
- {
- type,
- start_at: +startDate,
- end_at: +endDate,
- domain: websiteDomain,
- token,
- },
- { onDataLoad, delay: 300, update: [modified] },
- );
- const [format, setFormat] = useState(true);
- const formatFunc = format ? formatLongNumber : formatNumber;
- const shouldAnimate = limit > 0;
+ const {
+ resolve,
+ router,
+ query: { url },
+ } = usePageQuery();
- const rankings = useMemo(() => {
+ const { data, loading, error } = useFetch(
+ `/api/website/${websiteId}/metrics`,
+ {
+ params: {
+ type,
+ start_at: +startDate,
+ end_at: +endDate,
+ domain: websiteDomain,
+ url,
+ },
+ onDataLoad,
+ delay: DEFAULT_ANIMATION_DURATION,
+ headers: { [TOKEN_HEADER]: shareToken?.token },
+ },
+ [modified],
+ );
+
+ 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, 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])}
;
- };
+ }, [data, error, dataFilter, filterOptions]);
return (
- {!data &&
}
- {data && (
- <>
-
-
{title}
- {headerComponent}
-
- {metric}
-
-
-
- {rankings?.length === 0 && }
- {limit
- ? rankings.map(row => getRow(row))
- : rankings.length > 0 && (
-
- {Row}
-
- )}
-
-
- {limit && data.length > limit && (
-
} size="xsmall" onClick={() => onExpand(type)}>
-
-
-
-
- )}
-
-
- )}
+ {!data && loading &&
}
+ {error &&
}
+ {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 65680634..e93f536e 100644
--- a/components/metrics/MetricsTable.module.css
+++ b/components/metrics/MetricsTable.module.css
@@ -1,100 +1,11 @@
.container {
position: relative;
- min-height: 460px;
+ min-height: 430px;
font-size: var(--font-size-small);
- padding: 20px 0;
display: flex;
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);
- 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: #6e6e6e;
- 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 14f943a1..c1790e17 100644
--- a/components/metrics/OSTable.js
+++ b/components/metrics/OSTable.js
@@ -3,17 +3,15 @@ import MetricsTable from './MetricsTable';
import { osFilter } from 'lib/filters';
import { FormattedMessage } from 'react-intl';
-export default function OSTable({ websiteId, token, limit, onExpand }) {
+export default function OSTable({ websiteId, ...props }) {
return (
}
type="os"
metric={
}
websiteId={websiteId}
- token={token}
- limit={limit}
dataFilter={osFilter}
- onExpand={onExpand}
/>
);
}
diff --git a/components/metrics/PagesTable.js b/components/metrics/PagesTable.js
index 5730cf90..c137589f 100644
--- a/components/metrics/PagesTable.js
+++ b/components/metrics/PagesTable.js
@@ -1,12 +1,22 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
-import ButtonGroup from 'components/common/ButtonGroup';
+import classNames from 'classnames';
+import Link from 'next/link';
+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, onExpand }) {
+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,
+ query: { url },
+ } = usePageQuery();
const buttons = [
{
@@ -16,25 +26,34 @@ export default function PagesTable({ websiteId, token, websiteDomain, limit, onE
{ label:
, value: FILTER_RAW },
];
+ const renderLink = ({ x }) => {
+ return (
+
+
+ {decodeURI(x)}
+
+
+ );
+ };
+
return (
-
}
- type="url"
- metric={
}
- headerComponent={
- limit ? null :
- }
- websiteId={websiteId}
- token={token}
- limit={limit}
- dataFilter={urlFilter}
- filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
- renderLabel={({ x }) => decodeURI(x)}
- onExpand={onExpand}
- />
+ <>
+ {showFilters &&
}
+
}
+ type="url"
+ metric={
}
+ websiteId={websiteId}
+ dataFilter={urlFilter}
+ filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
+ renderLabel={renderLink}
+ {...props}
+ />
+
);
}
-
-const FilterButtons = ({ buttons, selected, onClick }) => {
- return
;
-};
diff --git a/components/metrics/PagesTable.module.css b/components/metrics/PagesTable.module.css
new file mode 100644
index 00000000..3c592a74
--- /dev/null
+++ b/components/metrics/PagesTable.module.css
@@ -0,0 +1,8 @@
+body .inactive {
+ color: var(--gray500);
+}
+
+body .active {
+ color: var(--gray900);
+ font-weight: 600;
+}
diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js
index 9c112798..e9d30449 100644
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@@ -1,17 +1,41 @@
import React from 'react';
import { useIntl } from 'react-intl';
+import tinycolor from 'tinycolor2';
import CheckVisible from 'components/helpers/CheckVisible';
import BarChart from './BarChart';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS, DEFAULT_ANIMATION_DURATION } from 'lib/constants';
-export default function PageviewsChart({ websiteId, data, unit, records, className }) {
+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);
+ const colors = {
+ views: {
+ background: primaryColor.setAlpha(0.4).toRgbString(),
+ border: primaryColor.setAlpha(0.5).toRgbString(),
+ },
+ visitors: {
+ background: primaryColor.setAlpha(0.6).toRgbString(),
+ border: primaryColor.setAlpha(0.7).toRgbString(),
+ },
+ };
const handleUpdate = chart => {
const {
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',
@@ -21,8 +45,6 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
id: 'metrics.page-views',
defaultMessage: 'Page views',
});
-
- chart.update();
};
if (!data) {
@@ -33,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}
+
+
+
+ } onClick={onClick} variant="action" iconRight>
+ {url}
+
+
+ );
+};
diff --git a/components/metrics/WebsiteChart.module.css b/components/metrics/WebsiteChart.module.css
index ea0fcaee..0e947aea 100644
--- a/components/metrics/WebsiteChart.module.css
+++ b/components/metrics/WebsiteChart.module.css
@@ -1,6 +1,7 @@
.container {
display: flex;
flex-direction: column;
+ align-self: stretch;
}
.title {
@@ -36,6 +37,11 @@
align-items: center;
}
+.url {
+ text-align: center;
+ margin-bottom: 10px;
+}
+
@media only screen and (max-width: 992px) {
.filter {
display: block;
diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js
index d8f53421..d5015d7c 100644
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@@ -4,26 +4,31 @@ import Link from 'components/common/Link';
import PageHeader from 'components/layout/PageHeader';
import RefreshButton from 'components/common/RefreshButton';
import ButtonLayout from 'components/layout/ButtonLayout';
-import Icon from 'components/common/Icon';
+import Favicon from 'components/common/Favicon';
import ActiveUsers from './ActiveUsers';
import Arrow from 'assets/arrow-right.svg';
import styles from './WebsiteHeader.module.css';
-export default function WebsiteHeader({ websiteId, token, title, showLink = false }) {
+export default function WebsiteHeader({ websiteId, title, domain, showLink = false }) {
return (
- {title}
-
-
+
+
+ {title}
+
+
+
{showLink && (
}
+ size="small"
+ iconRight
>
-
- } size="small" />
+
)}
diff --git a/components/metrics/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css
index 71ff5b1b..5b5876c6 100644
--- a/components/metrics/WebsiteHeader.module.css
+++ b/components/metrics/WebsiteHeader.module.css
@@ -1,18 +1,13 @@
.title {
- color: var(--gray-900);
+ color: var(--gray900);
font-size: var(--font-size-large);
line-height: var(--font-size-large);
}
.link {
- font-size: var(--font-size-small);
font-weight: 600;
}
-.link svg {
- margin-left: 10px;
-}
-
@media only screen and (max-width: 576px) {
.active {
display: none;
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/settings/Settings.js b/components/pages/Settings.js
similarity index 85%
rename from components/settings/Settings.js
rename to components/pages/Settings.js
index be9feb35..35d039df 100644
--- a/components/settings/Settings.js
+++ b/components/pages/Settings.js
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
import { useRouter } from 'next/router';
import Page from 'components/layout/Page';
import MenuLayout from 'components/layout/MenuLayout';
-import WebsiteSettings from './WebsiteSettings';
-import AccountSettings from './AccountSettings';
-import ProfileSettings from './ProfileSettings';
+import WebsiteSettings from '../settings/WebsiteSettings';
+import AccountSettings from '../settings/AccountSettings';
+import ProfileSettings from '../settings/ProfileSettings';
import { useSelector } from 'react-redux';
import { FormattedMessage } from 'react-intl';
@@ -26,7 +26,7 @@ export default function Settings() {
{
label: ,
value: ACCOUNTS,
- hidden: !user.is_admin,
+ hidden: !user?.is_admin,
},
{
label: ,
diff --git a/components/pages/TestConsole.js b/components/pages/TestConsole.js
new file mode 100644
index 00000000..b715b4a8
--- /dev/null
+++ b/components/pages/TestConsole.js
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
+import classNames from 'classnames';
+import Head from 'next/head';
+import Link from 'next/link';
+import Page from '../layout/Page';
+import PageHeader from '../layout/PageHeader';
+import useFetch from '../../hooks/useFetch';
+import DropDown from '../common/DropDown';
+import styles from './TestConsole.module.css';
+import WebsiteChart from '../metrics/WebsiteChart';
+import EventsChart from '../metrics/EventsChart';
+import Button from '../common/Button';
+import EmptyPlaceholder from '../common/EmptyPlaceholder';
+
+export default function TestConsole() {
+ const user = useSelector(state => state.user);
+ const [website, setWebsite] = useState();
+ const { data } = useFetch('/api/websites');
+
+ if (!data || !user?.is_admin) {
+ return null;
+ }
+
+ const options = data.map(({ name, website_id }) => ({ label: name, value: website_id }));
+ const selectedValue = options.find(({ value }) => value === website?.website_id)?.value;
+
+ function handleSelect(value) {
+ setWebsite(data.find(({ website_id }) => website_id === value));
+ }
+
+ function handleClick() {
+ window.umami('event (default)');
+ window.umami.trackView('/page-view', 'https://www.google.com');
+ window.umami.trackEvent('event (custom)', 'custom-type');
+ }
+
+ return (
+
+
+ {typeof window !== 'undefined' && website && (
+
+ )}
+
+
+ Test Console
+
+
+ {!selectedValue && }
+ {selectedValue && (
+ <>
+
+
+
+
CSS events
+
+
+
+
Javascript events
+
+
+
-
-
-
+
+ }
+ size="small"
+ >
+
+
+
);
const menuOptions = [
@@ -64,54 +67,48 @@ export default function WebsiteDetails({ websiteId, token }) {
},
{
label: ,
- value: `${path}?view=url`,
+ value: resolve({ view: 'url' }),
},
{
label: ,
- value: `${path}?view=referrer`,
+ value: resolve({ view: 'referrer' }),
},
{
label: ,
- value: `${path}?view=browser`,
+ value: resolve({ view: 'browser' }),
},
{
label: ,
- value: `${path}?view=os`,
+ value: resolve({ view: 'os' }),
},
{
label: ,
- value: `${path}?view=device`,
+ value: resolve({ view: 'device' }),
},
{
label: ,
- value: `${path}?view=country`,
+ value: resolve({ view: 'country' }),
},
{
label: ,
- value: `${path}?view=event`,
+ value: resolve({ view: 'event' }),
},
];
const tableProps = {
websiteId,
- token,
websiteDomain: data?.domain,
limit: 10,
- onExpand: handleExpand,
};
const DetailsComponent = views[view];
function handleDataLoad() {
if (!chartLoaded) {
- setTimeout(() => setChartLoaded(true), 300);
+ setTimeout(() => setChartLoaded(true), DEFAULT_ANIMATION_DURATION);
}
}
- function handleExpand(value) {
- router.push(`${path}?view=${value}`);
- }
-
if (!data) {
return null;
}
@@ -122,8 +119,8 @@ export default function WebsiteDetails({ websiteId, token }) {
{!chartLoaded && }
{chartLoaded && !view && (
- <>
-
-
-
+
+
+
+
-
-
+
+
-
-
+
+
-
-
0 })}
- >
-
+
+
+ 0 })}>
+
-
-
-
-
-
-
+
))}
{data.length === 0 && (
@@ -33,11 +31,9 @@ export default function WebsiteList({ userId }) {
/>
}
>
- } size="medium" onClick={() => router.push('/settings')}>
-
-
-
-
+ } iconRight>
+
+
)}
diff --git a/components/WebsiteList.module.css b/components/pages/WebsiteList.module.css
similarity index 87%
rename from components/WebsiteList.module.css
rename to components/pages/WebsiteList.module.css
index 942b71b2..816c5f36 100644
--- a/components/WebsiteList.module.css
+++ b/components/pages/WebsiteList.module.css
@@ -2,6 +2,7 @@
padding-bottom: 30px;
border-bottom: 1px solid var(--gray300);
margin-bottom: 30px;
+ align-self: stretch;
}
.website:last-child {
diff --git a/components/settings/AccountSettings.js b/components/settings/AccountSettings.js
index bc555a0f..b2b0011e 100644
--- a/components/settings/AccountSettings.js
+++ b/components/settings/AccountSettings.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
-import { useRouter } from 'next/router';
+import Link from 'next/link';
import classNames from 'classnames';
import PageHeader from 'components/layout/PageHeader';
import Button from 'components/common/Button';
@@ -16,39 +16,36 @@ import Pen from 'assets/pen.svg';
import Plus from 'assets/plus.svg';
import Trash from 'assets/trash.svg';
import Check from 'assets/check.svg';
-import List from 'assets/list-ul.svg';
+import LinkIcon from 'assets/external-link.svg';
import styles from './AccountSettings.module.css';
export default function AccountSettings() {
- const router = useRouter();
const [addAccount, setAddAccount] = useState();
const [editAccount, setEditAccount] = useState();
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);
+ const DashboardLink = row =>
+ row.is_admin ? null : (
+
+
+ } />
+
+
+ );
+
const Buttons = row =>
row.username !== 'admin' ? (
-
- }
- size="small"
- tooltip={}
- tooltipId={`button-websites-${row.username}`}
- onClick={() => router.push(`/dashboard/${row.user_id}/${row.username}`)}
- />
+
} size="small" onClick={() => setEditAccount(row)}>
-
-
-
+
} size="small" onClick={() => setDeleteAccount(row)}>
-
-
-
+
) : null;
@@ -57,17 +54,23 @@ export default function AccountSettings() {
{
key: 'username',
label: ,
- className: 'col-6 col-md-4',
+ className: 'col-4 col-md-3',
},
{
key: 'is_admin',
label: ,
- className: 'col-6 col-md-4',
+ className: 'col-4 col-md-3',
render: Checkmark,
},
+ {
+ key: 'dashboard',
+ label: ,
+ className: 'col-4 col-md-3',
+ render: DashboardLink,
+ },
{
key: 'actions',
- className: classNames(styles.buttons, 'col-12 col-md-4 pt-2 pt-md-0'),
+ className: classNames(styles.buttons, 'col-12 col-md-3 pt-2 pt-md-0'),
render: Buttons,
},
];
@@ -95,14 +98,12 @@ export default function AccountSettings() {
} size="small" onClick={() => setAddAccount(true)}>
-
-
-
+
{editAccount && (
- }>
+ }>
)}
{addAccount && (
- }>
+ }>
)}
{deleteAccount && (
}
+ title={}
>
+
+
+
+ );
+}
diff --git a/components/settings/DateRangeSetting.module.css b/components/settings/DateRangeSetting.module.css
new file mode 100644
index 00000000..230e7c97
--- /dev/null
+++ b/components/settings/DateRangeSetting.module.css
@@ -0,0 +1,3 @@
+.button {
+ margin-left: 10px;
+}
diff --git a/components/settings/LanguageButton.js b/components/settings/LanguageButton.js
new file mode 100644
index 00000000..14a1aaf1
--- /dev/null
+++ b/components/settings/LanguageButton.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import Head from 'next/head';
+import { menuOptions } from 'lib/lang';
+import useLocale from 'hooks/useLocale';
+import MenuButton from 'components/common/MenuButton';
+import Globe from 'assets/globe.svg';
+import styles from './LanguageButton.module.css';
+
+export default function LanguageButton() {
+ const [locale, setLocale] = useLocale();
+
+ function handleSelect(value) {
+ setLocale(value);
+ }
+
+ return (
+ <>
+
+ {(locale === 'zh-CN' || locale === 'zh-TW') && (
+
+ )}
+ {locale === 'ja-JP' && (
+
+ )}
+
+ }
+ options={menuOptions}
+ value={locale}
+ menuClassName={styles.menu}
+ renderValue={option => option?.display}
+ onSelect={handleSelect}
+ />
+
+ );
+}
diff --git a/components/settings/LanguageButton.module.css b/components/settings/LanguageButton.module.css
new file mode 100644
index 00000000..e1f840d5
--- /dev/null
+++ b/components/settings/LanguageButton.module.css
@@ -0,0 +1,25 @@
+.menu {
+ display: flex;
+ flex-flow: row wrap;
+ min-width: 500px;
+ max-width: 100vw;
+ padding: 10px;
+}
+
+.menu div {
+ border-radius: 5px;
+ min-width: calc(100% / 3);
+}
+
+@media only screen and (max-width: 992px) {
+ .menu {
+ min-width: 90vw;
+ transform: translateX(calc(40vw));
+ }
+}
+
+@media only screen and (max-width: 768px) {
+ .menu div {
+ min-width: 50%;
+ }
+}
diff --git a/components/settings/ProfileSettings.js b/components/settings/ProfileSettings.js
index 10386318..ecd9252d 100644
--- a/components/settings/ProfileSettings.js
+++ b/components/settings/ProfileSettings.js
@@ -1,39 +1,31 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
import PageHeader from 'components/layout/PageHeader';
import Button from 'components/common/Button';
import Modal from 'components/common/Modal';
import Toast from 'components/common/Toast';
import ChangePasswordForm from 'components/forms/ChangePasswordForm';
-import DateFilter from 'components/common/DateFilter';
+import TimezoneSetting from 'components/settings/TimezoneSetting';
import Dots from 'assets/ellipsis-h.svg';
-import { getTimezone } from 'lib/date';
-import { setItem } from 'lib/web';
-import useDateRange from 'hooks/useDateRange';
-import { setDateRange } from 'redux/actions/websites';
import styles from './ProfileSettings.module.css';
+import DateRangeSetting from './DateRangeSetting';
+import useEscapeKey from 'hooks/useEscapeKey';
export default function ProfileSettings() {
- const dispatch = useDispatch();
const user = useSelector(state => state.user);
const [changePassword, setChangePassword] = useState(false);
const [message, setMessage] = useState();
const { user_id } = user;
- const timezone = getTimezone();
- const dateRange = useDateRange(0);
- const { startDate, endDate, value } = dateRange;
function handleSave() {
setChangePassword(false);
setMessage();
}
- function handleDateChange(values) {
- const { value } = values;
- setItem(`umami.date-range`, value === 'custom' ? values : value);
- dispatch(setDateRange(0, values));
- }
+ useEscapeKey(() => {
+ setChangePassword(false);
+ });
return (
<>
@@ -42,12 +34,10 @@ export default function ProfileSettings() {
} size="small" onClick={() => setChangePassword(true)}>
-
-
-
+
-
+
-
@@ -55,22 +45,19 @@ export default function ProfileSettings() {
-
- - {timezone}
+ -
+
+
-
- -
-
+
-
+
{changePassword && (
}
+ title={}
>
theme, {
+ from: {
+ opacity: 0,
+ transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
+ },
+ enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
+ leave: {
+ opacity: 0,
+ transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
+ },
+ });
+
+ function handleClick() {
+ setTheme(theme === 'light' ? 'dark' : 'light');
+ }
+
+ return (
+
+ {transitions.map(({ item, key, props }) =>
+ item === 'light' ? (
+
+ } />
+
+ ) : (
+
+ } />
+
+ ),
+ )}
+
-
setShowMenu(state => !state)}>
- } size="large" />
- } size="small" />
-
- {showMenu && (
-
- )}
-
-
-
+
} size="small" onClick={() => setDeleteWebsite(row)}>
-
-
-
+
);
- const DetailsLink = ({ website_id, name }) => (
+ const DetailsLink = ({ website_id, name, domain }) => (
+
{name}
);
@@ -117,9 +115,7 @@ export default function WebsiteSettings() {
}
>
} size="medium" onClick={() => setAddWebsite(true)}>
-
-
-
+
);
@@ -131,25 +127,23 @@ export default function WebsiteSettings() {