{items.map(({ label, url, icon, divider }) => {
return (
-
+
{label}
-
+
);
})}
diff --git a/components/layout/PageHeader.js b/components/layout/PageHeader.js
index bf243c217..f13631409 100644
--- a/components/layout/PageHeader.js
+++ b/components/layout/PageHeader.js
@@ -1,10 +1,11 @@
+import classNames from 'classnames';
import React from 'react';
import styles from './PageHeader.module.css';
-export function PageHeader({ title, children }) {
+export function PageHeader({ title, children, className }) {
return (
-
-
{title}
+
+ {title &&
{title}
}
{children}
);
diff --git a/components/layout/PageHeader.module.css b/components/layout/PageHeader.module.css
index 5ea85b700..03a1c7c8a 100644
--- a/components/layout/PageHeader.module.css
+++ b/components/layout/PageHeader.module.css
@@ -4,7 +4,6 @@
align-items: center;
align-content: center;
align-self: stretch;
- margin-bottom: 40px;
flex-wrap: wrap;
}
@@ -23,6 +22,7 @@
font-weight: 700;
gap: 20px;
height: 60px;
+ flex: 1;
}
.actions {
diff --git a/components/layout/ReportsLayout.js b/components/layout/ReportsLayout.js
new file mode 100644
index 000000000..fd63a67e7
--- /dev/null
+++ b/components/layout/ReportsLayout.js
@@ -0,0 +1,23 @@
+import { Column, Row } from 'react-basics';
+import styles from './ReportsLayout.module.css';
+
+export function SettingsLayout({ children, filter, header }) {
+ return (
+ <>
+
{header}
+
+ {filter && (
+
+ Filters
+ {filter}
+
+ )}
+
+ {children}
+
+
+
+ );
+}
+
+export default SettingsLayout;
diff --git a/components/layout/ReportsLayout.module.css b/components/layout/ReportsLayout.module.css
new file mode 100644
index 000000000..6922665fa
--- /dev/null
+++ b/components/layout/ReportsLayout.module.css
@@ -0,0 +1,23 @@
+.filter {
+ margin-top: 30px;
+ min-width: 200px;
+ max-width: 100vw;
+ padding: 10px;
+ background: var(--base50);
+ border-radius: 5px;
+ border: 1px solid var(--border-color);
+}
+
+.filter h2 {
+ padding-bottom: 20px;
+}
+
+.content {
+ min-height: 50vh;
+}
+
+@media only screen and (max-width: 768px) {
+ .menu {
+ display: none;
+ }
+}
diff --git a/components/messages.js b/components/messages.js
index aa268225f..9499e2a6d 100644
--- a/components/messages.js
+++ b/components/messages.js
@@ -18,6 +18,7 @@ export const labels = defineMessages({
admin: { id: 'label.admin', defaultMessage: 'Administrator' },
confirm: { id: 'label.confirm', defaultMessage: 'Confirm' },
details: { id: 'label.details', defaultMessage: 'Details' },
+ website: { id: 'label.website', defaultMessage: 'Website' },
websites: { id: 'label.websites', defaultMessage: 'Websites' },
created: { id: 'label.created', defaultMessage: 'Created' },
edit: { id: 'label.edit', defaultMessage: 'Edit' },
@@ -47,6 +48,8 @@ export const labels = defineMessages({
deleteWebsite: { id: 'label.delete-website', defaultMessage: 'Delete website' },
reset: { id: 'label.reset', defaultMessage: 'Reset' },
addWebsite: { id: 'label.add-website', defaultMessage: 'Add website' },
+ addField: { id: 'label.add-field', defaultMessage: 'Add field' },
+ addDescription: { id: 'label.add-description', defaultMessage: 'Add description' },
changePassword: { id: 'label.change-password', defaultMessage: 'Change password' },
currentPassword: { id: 'label.current-password', defaultMessage: 'Current password' },
newPassword: { id: 'label.new-password', defaultMessage: 'New password' },
@@ -79,7 +82,8 @@ export const labels = defineMessages({
countries: { id: 'label.countries', defaultMessage: 'Countries' },
languages: { id: 'label.languages', defaultMessage: 'Languages' },
events: { id: 'label.events', defaultMessage: 'Events' },
- query: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },
+ query: { id: 'label.query', defaultMessage: 'Query' },
+ queryParameters: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },
back: { id: 'label.back', defaultMessage: 'Back' },
visitors: { id: 'label.visitors', defaultMessage: 'Visitors' },
filterCombined: { id: 'label.filter-combined', defaultMessage: 'Combined' },
@@ -97,6 +101,7 @@ export const labels = defineMessages({
allTime: { id: 'label.all-time', defaultMessage: 'All time' },
customRange: { id: 'label.custom-range', defaultMessage: 'Custom range' },
selectWebsite: { id: 'label.select-website', defaultMessage: 'Select website' },
+ selectDate: { id: 'label.select-date', defaultMessage: 'Select date' },
all: { id: 'label.all', defaultMessage: 'All' },
sessions: { id: 'label.sessions', defaultMessage: 'Sessions' },
pageNotFound: { id: 'message.page-not-found', defaultMessage: 'Page not found' },
@@ -117,6 +122,21 @@ export const labels = defineMessages({
view: { id: 'label.view', defaultMessage: 'View' },
cities: { id: 'label.cities', defaultMessage: 'Cities' },
regions: { id: 'label.regions', defaultMessage: 'Regions' },
+ reports: { id: 'label.reports', defaultMessage: 'Reports' },
+ eventData: { id: 'label.event-data', defaultMessage: 'Event data' },
+ funnel: { id: 'label.funnel', defaultMessage: 'Funnel' },
+ url: { id: 'label.url', defaultMessage: 'URL' },
+ urls: { id: 'label.urls', defaultMessage: 'URLs' },
+ add: { id: 'label.add', defaultMessage: 'Add' },
+ window: { id: 'label.window', defaultMessage: 'Window' },
+ addUrl: { id: 'label.add-url', defaultMessage: 'Add URL' },
+ runQuery: { id: 'label.run-query', defaultMessage: 'Run query' },
+ field: { id: 'label.field', defaultMessage: 'Field' },
+ fields: { id: 'label.fields', defaultMessage: 'Fields' },
+ createReport: { id: 'labels.create-report', defaultMessage: 'Create report' },
+ description: { id: 'labels.description', defaultMessage: 'Description' },
+ untitled: { id: 'labels.untitled', defaultMessage: 'Untitled' },
+ type: { id: 'labels.type', defaultMessage: 'Type' },
});
export const messages = defineMessages({
@@ -158,6 +178,10 @@ export const messages = defineMessages({
id: 'message.team-already-member',
defaultMessage: 'You are already a member of the team.',
},
+ deleteAccount: {
+ id: 'message.delete-account',
+ defaultMessage: 'To delete this account, type {confirmation} in the box below to confirm.',
+ },
deleteWebsite: {
id: 'message.delete-website',
defaultMessage: 'To delete this website, type {confirmation} in the box below to confirm.',
@@ -179,6 +203,10 @@ export const messages = defineMessages({
id: 'message.delete-website-warning',
defaultMessage: 'All website data will be deleted.',
},
+ noResultsFound: {
+ id: 'messages.no-results-found',
+ defaultMessage: 'No results were found.',
+ },
noWebsitesConfigured: {
id: 'messages.no-websites-configured',
defaultMessage: 'You do not have any websites configured.',
diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index cd7070e88..c086017e8 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -1,14 +1,13 @@
-import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { StatusLight, Loading } from 'react-basics';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Loading } from 'react-basics';
import classNames from 'classnames';
import Chart from 'chart.js/auto';
import HoverTooltip from 'components/common/HoverTooltip';
import Legend from 'components/metrics/Legend';
-import { formatLongNumber } from 'lib/format';
-import { dateFormat } from 'lib/date';
import useLocale from 'hooks/useLocale';
import useTheme from 'hooks/useTheme';
-import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
+import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
+import { renderNumberLabels } from 'lib/charts';
import styles from './BarChart.module.css';
export function BarChart({
@@ -17,84 +16,20 @@ export function BarChart({
animationDuration = DEFAULT_ANIMATION_DURATION,
stacked = false,
loading = false,
- onCreate = () => {},
- onUpdate = () => {},
+ renderXLabel,
+ renderYLabel,
+ XAxisType = 'time',
+ YAxisType = 'linear',
+ renderTooltipPopup,
+ onCreate,
+ onUpdate,
className,
}) {
const canvas = useRef();
const chart = useRef(null);
- const [tooltip, setTooltip] = useState(null);
+ const [tooltip, setTooltipPopup] = useState(null);
const { locale } = useLocale();
- const [theme] = useTheme();
-
- const colors = useMemo(
- () => ({
- text: THEME_COLORS[theme].gray700,
- line: THEME_COLORS[theme].gray200,
- }),
- [theme],
- );
-
- const renderYLabel = label => {
- return +label > 1000 ? formatLongNumber(label) : label;
- };
-
- const renderXLabel = useCallback(
- (label, index, values) => {
- const d = new Date(values[index].value);
-
- switch (unit) {
- case 'minute':
- return dateFormat(d, 'h:mm', locale);
- case 'hour':
- return dateFormat(d, 'p', locale);
- case 'day':
- return dateFormat(d, 'MMM d', locale);
- case 'month':
- return dateFormat(d, 'MMM', locale);
- default:
- return label;
- }
- },
- [locale, unit],
- );
-
- const renderTooltip = useCallback(
- model => {
- const { opacity, labelColors, dataPoints } = model.tooltip;
-
- if (!dataPoints?.length || !opacity) {
- setTooltip(null);
- return;
- }
-
- const formats = {
- millisecond: 'T',
- second: 'pp',
- minute: 'p',
- hour: 'h:mm aaa - PP',
- day: 'PPPP',
- week: 'PPPP',
- month: 'LLLL yyyy',
- quarter: 'qqq',
- year: 'yyyy',
- };
-
- setTooltip(
-
-
{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}
-
-
-
- {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
-
-
-
-
,
- );
- },
- [unit],
- );
+ const { theme, colors } = useTheme();
const getOptions = useCallback(() => {
return {
@@ -115,12 +50,12 @@ export function BarChart({
},
tooltip: {
enabled: false,
- external: renderTooltip,
+ external: renderTooltipPopup ? renderTooltipPopup.bind(null, setTooltipPopup) : undefined,
},
},
scales: {
x: {
- type: 'time',
+ type: XAxisType,
stacked: true,
time: {
unit,
@@ -129,34 +64,44 @@ export function BarChart({
display: false,
},
border: {
- color: colors.line,
+ color: colors.chart.line,
},
ticks: {
- color: colors.text,
+ color: colors.chart.text,
autoSkip: false,
maxRotation: 0,
callback: renderXLabel,
},
},
y: {
- type: 'linear',
+ type: YAxisType,
min: 0,
beginAtZero: true,
stacked,
grid: {
- color: colors.line,
+ color: colors.chart.line,
},
border: {
- color: colors.line,
+ color: colors.chart.line,
},
ticks: {
color: colors.text,
- callback: renderYLabel,
+ callback: renderYLabel || renderNumberLabels,
},
},
},
};
- }, [animationDuration, renderTooltip, renderXLabel, stacked, colors, unit, locale]);
+ }, [
+ animationDuration,
+ renderTooltipPopup,
+ renderXLabel,
+ XAxisType,
+ YAxisType,
+ stacked,
+ colors,
+ unit,
+ locale,
+ ]);
const createChart = () => {
Chart.defaults.font.family = 'Inter';
@@ -171,11 +116,11 @@ export function BarChart({
options,
});
- onCreate(chart.current);
+ onCreate?.(chart.current);
};
const updateChart = () => {
- setTooltip(null);
+ setTooltipPopup(null);
datasets.forEach((dataset, index) => {
chart.current.data.datasets[index].data = dataset.data;
@@ -184,7 +129,7 @@ export function BarChart({
chart.current.options = getOptions();
- onUpdate(chart.current);
+ onUpdate?.(chart.current);
chart.current.update();
};
@@ -206,7 +151,11 @@ export function BarChart({
{selected === FILTER_DAY && (
-
+
)}
{selected === FILTER_RANGE && (
<>
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index eb397cc99..82b8c8f71 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -2,16 +2,15 @@ import { useMemo } from 'react';
import { Loading } from 'react-basics';
import { colord } from 'colord';
import BarChart from './BarChart';
-import { getDateArray, getDateLength } from 'lib/date';
-import useApi from 'hooks/useApi';
-import useDateRange from 'hooks/useDateRange';
-import useTimezone from 'hooks/useTimezone';
-import usePageQuery from 'hooks/usePageQuery';
+import { getDateArray } from 'lib/date';
+import { useApi, useLocale, useDateRange, useTimezone, usePageQuery } from 'hooks';
import { EVENT_COLORS } from 'lib/constants';
+import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
export function EventsChart({ websiteId, className, token }) {
const { get, useQuery } = useApi();
const [{ startDate, endDate, unit, modified }] = useDateRange(websiteId);
+ const { locale } = useLocale();
const [timezone] = useTimezone();
const {
query: { url, eventName },
@@ -70,9 +69,10 @@ export function EventsChart({ websiteId, className, token }) {
datasets={datasets}
unit={unit}
height={300}
- records={getDateLength(startDate, endDate, unit)}
loading={isLoading}
stacked
+ renderXLabel={renderDateLabels(unit, locale)}
+ renderTooltipPopup={renderStatusTooltipPopup(unit, locale)}
/>
);
}
diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
index 25b93115c..ccaf627c6 100644
--- a/components/metrics/MetricsBar.js
+++ b/components/metrics/MetricsBar.js
@@ -16,13 +16,13 @@ export function MetricsBar({ websiteId }) {
const { startDate, endDate, modified } = dateRange;
const [format, setFormat] = useState(true);
const {
- query: { url, referrer, os, browser, device, country, region, city },
+ query: { url, referrer, title, os, browser, device, country, region, city },
} = usePageQuery();
const { data, error, isLoading, isFetched } = useQuery(
[
'websites:stats',
- { websiteId, modified, url, referrer, os, browser, device, country, region, city },
+ { websiteId, modified, url, referrer, title, os, browser, device, country, region, city },
],
() =>
get(`/websites/${websiteId}/stats`, {
@@ -30,6 +30,7 @@ export function MetricsBar({ websiteId }) {
endAt: +endDate,
url,
referrer,
+ title,
os,
browser,
device,
diff --git a/components/metrics/MetricsBar.module.css b/components/metrics/MetricsBar.module.css
index 0e305c70c..eaf81c485 100644
--- a/components/metrics/MetricsBar.module.css
+++ b/components/metrics/MetricsBar.module.css
@@ -1,7 +1,7 @@
.bar {
display: flex;
cursor: pointer;
- min-height: 80px;
+ min-height: 110px;
gap: 20px;
flex-wrap: wrap;
}
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 97deb39d6..502627984 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -30,7 +30,7 @@ export function MetricsTable({
const {
resolveUrl,
router,
- query: { url, referrer, os, browser, device, country, region, city },
+ query: { url, referrer, title, os, browser, device, country, region, city },
} = usePageQuery();
const { formatMessage, labels } = useMessages();
const { get, useQuery } = useApi();
@@ -38,7 +38,20 @@ export function MetricsTable({
const { data, isLoading, isFetched, error } = useQuery(
[
'websites:metrics',
- { websiteId, type, modified, url, referrer, os, browser, device, country, region, city },
+ {
+ websiteId,
+ type,
+ modified,
+ url,
+ referrer,
+ os,
+ title,
+ browser,
+ device,
+ country,
+ region,
+ city,
+ },
],
() =>
get(`/websites/${websiteId}/metrics`, {
@@ -46,6 +59,7 @@ export function MetricsTable({
startAt: +startDate,
endAt: +endDate,
url,
+ title,
referrer,
os,
browser,
@@ -59,13 +73,27 @@ export function MetricsTable({
const filteredData = useMemo(() => {
if (data) {
- let items = percentFilter(dataFilter ? dataFilter(data, filterOptions) : data);
+ let items = data;
+
+ if (dataFilter) {
+ if (Array.isArray(dataFilter)) {
+ items = dataFilter.reduce((arr, filter) => {
+ return filter(arr);
+ }, items);
+ } else {
+ items = dataFilter(data);
+ }
+ }
+
+ items = percentFilter(items);
+
if (limit) {
items = items.filter((e, i) => i < limit);
}
if (filterOptions?.sort === false) {
return items;
}
+
return items.sort(firstBy('y', -1).thenBy('x'));
}
return [];
diff --git a/components/metrics/PageviewsChart.js b/components/metrics/PageviewsChart.js
index 6ea162268..362c616e2 100644
--- a/components/metrics/PageviewsChart.js
+++ b/components/metrics/PageviewsChart.js
@@ -1,34 +1,13 @@
import { useMemo } from 'react';
-import { colord } from 'colord';
import BarChart from './BarChart';
-import { THEME_COLORS } from 'lib/constants';
-import useTheme from 'hooks/useTheme';
-import useMessages from 'hooks/useMessages';
-import useLocale from 'hooks/useLocale';
+import { useLocale, useTheme, useMessages } from 'hooks';
+import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
-export function PageviewsChart({ websiteId, data, unit, records, className, loading, ...props }) {
+export function PageviewsChart({ websiteId, data, unit, className, loading, ...props }) {
const { formatMessage, labels } = useMessages();
- const [theme] = useTheme();
+ const { colors } = useTheme();
const { locale } = useLocale();
- const colors = useMemo(() => {
- const primaryColor = colord(THEME_COLORS[theme].primary);
- return {
- views: {
- hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
- backgroundColor: primaryColor.alpha(0.4).toRgbString(),
- borderColor: primaryColor.alpha(0.7).toRgbString(),
- hoverBorderColor: primaryColor.toRgbString(),
- },
- visitors: {
- hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
- backgroundColor: primaryColor.alpha(0.6).toRgbString(),
- borderColor: primaryColor.alpha(0.9).toRgbString(),
- hoverBorderColor: primaryColor.toRgbString(),
- },
- };
- }, [theme]);
-
const datasets = useMemo(() => {
if (!data) return [];
@@ -37,13 +16,13 @@ export function PageviewsChart({ websiteId, data, unit, records, className, load
label: formatMessage(labels.uniqueVisitors),
data: data.sessions,
borderWidth: 1,
- ...colors.visitors,
+ ...colors.chart.visitors,
},
{
label: formatMessage(labels.pageViews),
data: data.pageviews,
borderWidth: 1,
- ...colors.views,
+ ...colors.chart.views,
},
];
}, [data, locale, colors]);
@@ -55,8 +34,9 @@ export function PageviewsChart({ websiteId, data, unit, records, className, load
className={className}
datasets={datasets}
unit={unit}
- records={records}
loading={loading}
+ renderXLabel={renderDateLabels(unit, locale)}
+ renderTooltipPopup={renderStatusTooltipPopup(unit, locale)}
/>
);
}
diff --git a/components/metrics/QueryParametersTable.js b/components/metrics/QueryParametersTable.js
index c5f573e3c..23193c2e1 100644
--- a/components/metrics/QueryParametersTable.js
+++ b/components/metrics/QueryParametersTable.js
@@ -9,7 +9,7 @@ import styles from './QueryParametersTable.module.css';
const filters = {
[FILTER_RAW]: emptyFilter,
- [FILTER_COMBINED]: paramFilter,
+ [FILTER_COMBINED]: [emptyFilter, paramFilter],
};
export function QueryParametersTable({ websiteId, showFilters, ...props }) {
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index 6614d40f0..7b902df12 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -5,7 +5,7 @@ import classNames from 'classnames';
import PageviewsChart from './PageviewsChart';
import MetricsBar from './MetricsBar';
import WebsiteHeader from './WebsiteHeader';
-import DateFilter from 'components/input/DateFilter';
+import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import ErrorMessage from 'components/common/ErrorMessage';
import FilterTags from 'components/metrics/FilterTags';
import RefreshButton from 'components/input/RefreshButton';
@@ -107,7 +107,7 @@ export function WebsiteChart({
diff --git a/components/metrics/WebsiteHeader.module.css b/components/metrics/WebsiteHeader.module.css
index e5ebcca71..68fd22f82 100644
--- a/components/metrics/WebsiteHeader.module.css
+++ b/components/metrics/WebsiteHeader.module.css
@@ -1,3 +1,9 @@
+.header {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
.title {
display: flex;
flex-direction: row;
diff --git a/components/pages/console/TestConsole.js b/components/pages/console/TestConsole.js
index 745bf94c5..eda93f0b5 100644
--- a/components/pages/console/TestConsole.js
+++ b/components/pages/console/TestConsole.js
@@ -28,20 +28,41 @@ export function TestConsole() {
window.umami.track({ url: '/page-view', referrer: 'https://www.google.com' });
window.umami.track('track-event-no-data');
window.umami.track('track-event-with-data', {
- data: {
+ test: 'test-data',
+ boolean: true,
+ booleanError: 'true',
+ time: new Date(),
+ number: 1,
+ time2: new Date().toISOString(),
+ nested: {
test: 'test-data',
- time: new Date(),
number: 1,
- time2: new Date().toISOString(),
- nested: {
+ object: {
test: 'test-data',
- number: 1,
- object: {
- test: 'test-data',
- },
},
- array: [1, 2, 3],
},
+ array: [1, 2, 3],
+ });
+ }
+
+ function handleIdentifyClick() {
+ window.umami.identify({
+ userId: 123,
+ name: 'brian',
+ number: Math.random() * 100,
+ test: 'test-data',
+ boolean: true,
+ booleanError: 'true',
+ time: new Date(),
+ time2: new Date().toISOString(),
+ nested: {
+ test: 'test-data',
+ number: 1,
+ object: {
+ test: 'test-data',
+ },
+ },
+ array: [1, 2, 3],
});
}
@@ -114,6 +135,10 @@ export function TestConsole() {
Run script
+
+
+ Run identify
+
diff --git a/components/pages/realtime/RealtimeUrls.js b/components/pages/realtime/RealtimeUrls.js
index dfbf1fda6..18d8f2f65 100644
--- a/components/pages/realtime/RealtimeUrls.js
+++ b/components/pages/realtime/RealtimeUrls.js
@@ -10,6 +10,7 @@ export function RealtimeUrls({ websiteDomain, data = {} }) {
const { formatMessage, labels } = useMessages();
const { pageviews } = data;
const [filter, setFilter] = useState(FILTER_REFERRERS);
+ const limit = 15;
const buttons = [
{
@@ -47,7 +48,8 @@ export function RealtimeUrls({ websiteDomain, data = {} }) {
}
return arr;
}, [])
- .sort(firstBy('y', -1)),
+ .sort(firstBy('y', -1))
+ .slice(0, limit),
);
const pages = percentFilter(
@@ -62,7 +64,8 @@ export function RealtimeUrls({ websiteDomain, data = {} }) {
}
return arr;
}, [])
- .sort(firstBy('y', -1)),
+ .sort(firstBy('y', -1))
+ .slice(0, limit),
);
return [referrers, pages];
diff --git a/components/pages/reports/BaseParameters.js b/components/pages/reports/BaseParameters.js
new file mode 100644
index 000000000..5dbe0f603
--- /dev/null
+++ b/components/pages/reports/BaseParameters.js
@@ -0,0 +1,43 @@
+import { FormRow } from 'react-basics';
+import DateFilter from 'components/input/DateFilter';
+import WebsiteSelect from 'components/input/WebsiteSelect';
+import { parseDateRange } from 'lib/date';
+import { useContext } from 'react';
+import { ReportContext } from './Report';
+import { useMessages } from 'hooks';
+
+export function BaseParameters() {
+ const { report, updateReport } = useContext(ReportContext);
+ const { formatMessage, labels } = useMessages();
+
+ const { parameters } = report || {};
+ const { websiteId, dateRange } = parameters || {};
+ const { value, startDate, endDate } = dateRange || {};
+
+ const handleWebsiteSelect = websiteId => {
+ updateReport({ websiteId, parameters: { websiteId } });
+ };
+
+ const handleDateChange = value => {
+ updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
+ };
+
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+export default BaseParameters;
diff --git a/components/pages/reports/Report.js b/components/pages/reports/Report.js
new file mode 100644
index 000000000..0a98ef756
--- /dev/null
+++ b/components/pages/reports/Report.js
@@ -0,0 +1,20 @@
+import { createContext } from 'react';
+import Page from 'components/layout/Page';
+import styles from './reports.module.css';
+import { useReport } from 'hooks';
+
+export const ReportContext = createContext(null);
+
+export function Report({ reportId, defaultParameters, children, ...props }) {
+ const report = useReport(reportId, defaultParameters);
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export default Report;
diff --git a/components/pages/reports/ReportBody.js b/components/pages/reports/ReportBody.js
new file mode 100644
index 000000000..2310c8af8
--- /dev/null
+++ b/components/pages/reports/ReportBody.js
@@ -0,0 +1,7 @@
+import styles from './reports.module.css';
+
+export function ReportBody({ children }) {
+ return {children}
;
+}
+
+export default ReportBody;
diff --git a/components/pages/reports/ReportHeader.js b/components/pages/reports/ReportHeader.js
new file mode 100644
index 000000000..394b1951f
--- /dev/null
+++ b/components/pages/reports/ReportHeader.js
@@ -0,0 +1,89 @@
+import { useContext } from 'react';
+import { useRouter } from 'next/router';
+import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
+import PageHeader from 'components/layout/PageHeader';
+import { useMessages, useApi } from 'hooks';
+import { ReportContext } from './Report';
+import styles from './ReportHeader.module.css';
+import reportStyles from './reports.module.css';
+
+export function ReportHeader({ icon }) {
+ const { report, updateReport } = useContext(ReportContext);
+ const { formatMessage, labels, messages } = useMessages();
+ const { showToast } = useToasts();
+ const { post, useMutation } = useApi();
+ const router = useRouter();
+ const { mutate: create, isLoading: isCreating } = useMutation(data => post(`/reports`, data));
+ const { mutate: update, isLoading: isUpdating } = useMutation(data =>
+ post(`/reports/${data.id}`, data),
+ );
+
+ const { name, description, parameters } = report || {};
+ const { websiteId, dateRange } = parameters || {};
+
+ const handleSave = async () => {
+ if (!report.id) {
+ create(report, {
+ onSuccess: async ({ id }) => {
+ showToast({ message: formatMessage(messages.saved), variant: 'success' });
+ router.push(`/reports/${id}`, null, { shallow: true });
+ },
+ });
+ } else {
+ update(report, {
+ onSuccess: async () => {
+ showToast({ message: formatMessage(messages.saved), variant: 'success' });
+ },
+ });
+ }
+ };
+
+ const handleNameChange = name => {
+ updateReport({ name: name || 'Untitled' });
+ };
+
+ const handleDescriptionChange = description => {
+ updateReport({ description });
+ };
+
+ const Title = () => {
+ return (
+ <>
+ {icon}
+
+
}>
+
+ {formatMessage(labels.save)}
+
+
+
+
+
{children}
;
+}
+
+export default ReportMenu;
diff --git a/components/pages/reports/ReportTemplates.js b/components/pages/reports/ReportTemplates.js
new file mode 100644
index 000000000..7ed40af75
--- /dev/null
+++ b/components/pages/reports/ReportTemplates.js
@@ -0,0 +1,71 @@
+import Link from 'next/link';
+import { Button, Icons, Text, Icon } from 'react-basics';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import Funnel from 'assets/funnel.svg';
+import Nodes from 'assets/nodes.svg';
+import Lightbulb from 'assets/lightbulb.svg';
+import styles from './ReportTemplates.module.css';
+import { useMessages } from 'hooks';
+
+const reports = [
+ {
+ title: 'Event data',
+ description: 'Query your custom event data.',
+ url: '/reports/event-data',
+ icon:
+
+ {icon}
+ {title}
+
+
{description}
+
+
+
+
+ Create
+
+
+
+
+
+ {reports.map(({ title, description, url, icon }) => {
+ return (
+
+
+ );
+}
+
+export default ReportTemplates;
diff --git a/components/pages/reports/ReportTemplates.module.css b/components/pages/reports/ReportTemplates.module.css
new file mode 100644
index 000000000..0cdcb8351
--- /dev/null
+++ b/components/pages/reports/ReportTemplates.module.css
@@ -0,0 +1,32 @@
+.reports {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+ gap: 20px;
+}
+
+.report {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ padding: 20px;
+ border: 1px solid var(--base500);
+ border-radius: var(--border-radius);
+}
+
+.title {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ font-size: var(--font-size-lg);
+ font-weight: 700;
+}
+
+.description {
+ flex: 1;
+}
+
+.buttons {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/components/pages/reports/ReportsList.js b/components/pages/reports/ReportsList.js
new file mode 100644
index 000000000..255cb5468
--- /dev/null
+++ b/components/pages/reports/ReportsList.js
@@ -0,0 +1,29 @@
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import Link from 'next/link';
+import { Button, Icon, Icons, Text } from 'react-basics';
+import { useMessages, useReports } from 'hooks';
+import ReportsTable from './ReportsTable';
+
+export function ReportsList() {
+ const { formatMessage, labels } = useMessages();
+ const { reports, error, isLoading } = useReports();
+
+ return (
+
+
+
+
+
+ {formatMessage(labels.createReport)}
+
+
+
+
+ );
+}
+
+export default ReportsList;
diff --git a/components/pages/reports/ReportsTable.js b/components/pages/reports/ReportsTable.js
new file mode 100644
index 000000000..bcc97204d
--- /dev/null
+++ b/components/pages/reports/ReportsTable.js
@@ -0,0 +1,36 @@
+import Link from 'next/link';
+import { Button, Text, Icon, Icons } from 'react-basics';
+import SettingsTable from 'components/common/SettingsTable';
+import useMessages from 'hooks/useMessages';
+
+export function ReportsTable({ data = [] }) {
+ const { formatMessage, labels } = useMessages();
+
+ const columns = [
+ { name: 'name', label: formatMessage(labels.name) },
+ { name: 'description', label: formatMessage(labels.description) },
+ { name: 'type', label: formatMessage(labels.type) },
+ { name: 'action', label: ' ' },
+ ];
+
+ return (
+
+ {row => {
+ const { id } = row;
+
+ return (
+
+
+
+ {formatMessage(labels.view)}
+
+
+ );
+ }}
+
+ );
+}
+
+export default ReportsTable;
diff --git a/components/pages/reports/event-data/EventDataParameters.js b/components/pages/reports/event-data/EventDataParameters.js
new file mode 100644
index 000000000..8255ae921
--- /dev/null
+++ b/components/pages/reports/event-data/EventDataParameters.js
@@ -0,0 +1,60 @@
+import { useContext, useRef } from 'react';
+import { useApi, useMessages } from 'hooks';
+import { Form, FormRow, FormButtons, SubmitButton, Loading } from 'react-basics';
+import { ReportContext } from 'components/pages/reports/Report';
+import NoData from 'components/common/NoData';
+import styles from './EventDataParameters.module.css';
+import { DATA_TYPES } from 'lib/constants';
+import BaseParameters from '../BaseParameters';
+
+function useFields(websiteId, startDate, endDate) {
+ const { get, useQuery } = useApi();
+ const { data, error, isLoading } = useQuery(
+ ['fields', websiteId, startDate, endDate],
+ () => get('/reports/event-data', { websiteId, startAt: +startDate, endAt: +endDate }),
+ { enabled: !!(websiteId && startDate && endDate) },
+ );
+
+ return { data, error, isLoading };
+}
+
+export function EventDataParameters() {
+ const { report, runReport, isRunning } = useContext(ReportContext);
+ const { formatMessage, labels } = useMessages();
+ const ref = useRef(null);
+ const { parameters } = report || {};
+ const { websiteId, dateRange } = parameters || {};
+ const { startDate, endDate } = dateRange || {};
+ const queryDisabled = !websiteId || !dateRange;
+ const { data, error, isLoading } = useFields(websiteId, startDate, endDate);
+
+ const handleSubmit = values => {
+ runReport(values);
+ };
+
+ return (
+
+ );
+}
+
+export default EventDataParameters;
diff --git a/components/pages/reports/event-data/EventDataParameters.module.css b/components/pages/reports/event-data/EventDataParameters.module.css
new file mode 100644
index 000000000..66c828427
--- /dev/null
+++ b/components/pages/reports/event-data/EventDataParameters.module.css
@@ -0,0 +1,27 @@
+.fields {
+ max-height: 300px;
+ overflow: auto;
+}
+
+.field {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ height: 30px;
+ cursor: pointer;
+ padding: 4px;
+ border-radius: var(--border-radius);
+}
+
+.field:hover {
+ background: var(--base75);
+}
+
+.key {
+ font-weight: 400;
+}
+
+.type {
+ color: var(--font-color300);
+}
diff --git a/components/pages/reports/event-data/EventDataReport.js b/components/pages/reports/event-data/EventDataReport.js
new file mode 100644
index 000000000..163829825
--- /dev/null
+++ b/components/pages/reports/event-data/EventDataReport.js
@@ -0,0 +1,23 @@
+import Report from '../Report';
+import ReportHeader from '../ReportHeader';
+import ReportMenu from '../ReportMenu';
+import ReportBody from '../ReportBody';
+import EventDataParameters from './EventDataParameters';
+import Nodes from 'assets/nodes.svg';
+
+const defaultParameters = {
+ type: 'event-data',
+ parameters: { fields: [], filters: [] },
+};
+
+export default function EventDataReport({ reportId }) {
+ return (
+
+
+
+ hi.
+
+ );
+}
diff --git a/components/pages/reports/event-data/FieldAddForm.js b/components/pages/reports/event-data/FieldAddForm.js
new file mode 100644
index 000000000..b0258608f
--- /dev/null
+++ b/components/pages/reports/event-data/FieldAddForm.js
@@ -0,0 +1,28 @@
+import { useMessages } from 'hooks';
+import { Button, Form, FormButtons, FormRow } from 'react-basics';
+
+export function FieldAddForm({ onClose }) {
+ const { formatMessage, labels } = useMessages();
+
+ const handleSave = () => {
+ onClose();
+ };
+
+ const handleClose = () => {
+ onClose();
+ };
+
+ return (
+
+ );
+}
+
+export default FieldAddForm;
diff --git a/components/pages/reports/funnel/FunnelChart.js b/components/pages/reports/funnel/FunnelChart.js
new file mode 100644
index 000000000..7253c3fa5
--- /dev/null
+++ b/components/pages/reports/funnel/FunnelChart.js
@@ -0,0 +1,63 @@
+import { useCallback, useContext, useMemo } from 'react';
+import { Loading } from 'react-basics';
+import useMessages from 'hooks/useMessages';
+import useTheme from 'hooks/useTheme';
+import BarChart from 'components/metrics/BarChart';
+import { formatLongNumber } from 'lib/format';
+import styles from './FunnelChart.module.css';
+import { ReportContext } from '../Report';
+
+export function FunnelChart({ className, loading }) {
+ const { report } = useContext(ReportContext);
+ const { formatMessage, labels } = useMessages();
+ const { colors } = useTheme();
+
+ const { parameters, data } = report || {};
+
+ const renderXLabel = useCallback(
+ (label, index) => {
+ return parameters.urls[index];
+ },
+ [parameters],
+ );
+
+ const renderTooltipPopup = useCallback((setTooltipPopup, model) => {
+ const { opacity, dataPoints } = model.tooltip;
+
+ if (!dataPoints?.length || !opacity) {
+ setTooltipPopup(null);
+ return;
+ }
+
+ setTooltipPopup(`${formatLongNumber(dataPoints[0].raw.y)} ${formatMessage(labels.visitors)}`);
+ }, []);
+
+ const datasets = useMemo(() => {
+ return [
+ {
+ label: formatMessage(labels.uniqueVisitors),
+ data: data,
+ borderWidth: 1,
+ ...colors.chart.visitors,
+ },
+ ];
+ }, [data]);
+
+ if (loading) {
+ return
+
+
+
+
+
+ {(close, element) => {
+ const { right, bottom } = element.getBoundingClientRect();
+
+ return
+
+ );
+}
+
+export default FunnelParameters;
diff --git a/components/pages/reports/funnel/FunnelParameters.module.css b/components/pages/reports/funnel/FunnelParameters.module.css
new file mode 100644
index 000000000..98ae0831d
--- /dev/null
+++ b/components/pages/reports/funnel/FunnelParameters.module.css
@@ -0,0 +1,20 @@
+.urls {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.url {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px;
+ border: 1px solid var(--base400);
+ border-radius: var(--border-radius);
+ box-shadow: 1px 1px 1px var(--base400);
+}
+
+.icon {
+ align-self: center;
+}
diff --git a/components/pages/reports/funnel/FunnelReport.js b/components/pages/reports/funnel/FunnelReport.js
new file mode 100644
index 000000000..7b4d8eced
--- /dev/null
+++ b/components/pages/reports/funnel/FunnelReport.js
@@ -0,0 +1,28 @@
+import FunnelChart from './FunnelChart';
+import FunnelTable from './FunnelTable';
+import FunnelParameters from './FunnelParameters';
+import Report from '../Report';
+import ReportHeader from '../ReportHeader';
+import ReportMenu from '../ReportMenu';
+import ReportBody from '../ReportBody';
+import Funnel from 'assets/funnel.svg';
+
+const defaultParameters = {
+ type: 'funnel',
+ parameters: { window: 60, urls: [] },
+};
+
+export default function FunnelReport({ reportId }) {
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/components/pages/reports/funnel/FunnelReport.module.css b/components/pages/reports/funnel/FunnelReport.module.css
new file mode 100644
index 000000000..aed66b74e
--- /dev/null
+++ b/components/pages/reports/funnel/FunnelReport.module.css
@@ -0,0 +1,10 @@
+.filters {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ border: 1px solid var(--base400);
+ border-radius: var(--border-radius);
+ line-height: 32px;
+ padding: 10px;
+ overflow: hidden;
+}
diff --git a/components/pages/reports/funnel/FunnelTable.js b/components/pages/reports/funnel/FunnelTable.js
new file mode 100644
index 000000000..ff6bdfb52
--- /dev/null
+++ b/components/pages/reports/funnel/FunnelTable.js
@@ -0,0 +1,20 @@
+import { useContext } from 'react';
+import DataTable from 'components/metrics/DataTable';
+import { useMessages } from 'hooks';
+import { ReportContext } from '../Report';
+
+export function FunnelTable() {
+ const { report } = useContext(ReportContext);
+ const { formatMessage, labels } = useMessages();
+
+ return (
+
- {formatMessage(labels.reset)}
);
diff --git a/components/pages/settings/profile/PasswordChangeButton.js b/components/pages/settings/profile/PasswordChangeButton.js
index 9aa6fdcae..03bf74bc6 100644
--- a/components/pages/settings/profile/PasswordChangeButton.js
+++ b/components/pages/settings/profile/PasswordChangeButton.js
@@ -1,11 +1,11 @@
-import { Button, Icon, Text, useToast, ModalTrigger, Modal } from 'react-basics';
+import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
import PasswordEditForm from 'components/pages/settings/profile/PasswordEditForm';
import Icons from 'components/icons';
import useMessages from 'hooks/useMessages';
export function PasswordChangeButton() {
const { formatMessage, labels, messages } = useMessages();
- const { toast, showToast } = useToast();
+ const { showToast } = useToasts();
const handleSave = () => {
showToast({ message: formatMessage(messages.saved), variant: 'success' });
@@ -13,7 +13,6 @@ export function PasswordChangeButton() {
return (
<>
- {toast}
diff --git a/components/pages/settings/profile/ThemeSetting.js b/components/pages/settings/profile/ThemeSetting.js
index f45032680..54a8dac8b 100644
--- a/components/pages/settings/profile/ThemeSetting.js
+++ b/components/pages/settings/profile/ThemeSetting.js
@@ -6,13 +6,13 @@ import Moon from 'assets/moon.svg';
import styles from './ThemeSetting.module.css';
export function ThemeSetting() {
- const [theme, setTheme] = useTheme();
+ const { theme, saveTheme } = useTheme();
return (
setTheme('light')}
+ onClick={() => saveTheme('light')}
>
setTheme('dark')}
+ onClick={() => saveTheme('dark')}
>