Merge branch 'dev' into feat/um-202-event-data-new

pull/1841/head
Brian Cao 2023-03-20 20:40:22 -07:00
commit da7f02bb73
38 changed files with 437 additions and 414 deletions

2
.gitignore vendored
View File

@ -15,7 +15,7 @@
# production
/build
/public/umami.js
/public/script.js
/public/geo
# misc

View File

@ -0,0 +1,25 @@
import { useEffect, useState } from 'react';
import { Tooltip } from 'react-basics';
import styles from './HoverTooltip.module.css';
export default function HoverTooltip({ tooltip }) {
const [position, setPosition] = useState({ x: -1000, y: -1000 });
useEffect(() => {
const handler = e => {
setPosition({ x: e.clientX, y: e.clientY });
};
document.addEventListener('mousemove', handler);
return () => {
document.removeEventListener('mousemove', handler);
};
}, []);
return (
<div className={styles.tooltip} style={{ left: position.x, top: position.y }}>
<Tooltip position="top" action="none" label={tooltip} />
</div>
);
}

View File

@ -3,7 +3,7 @@
}
.tooltip {
color: var(--msgColor);
position: fixed;
pointer-events: none;
z-index: 1;
}

View File

@ -1,6 +1,5 @@
import { useState, useMemo } from 'react';
import { useRouter } from 'next/router';
import ReactTooltip from 'react-tooltip';
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
import classNames from 'classnames';
import { colord } from 'colord';
@ -9,6 +8,8 @@ import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
import styles from './WorldMap.module.css';
import useCountryNames from 'hooks/useCountryNames';
import useLocale from 'hooks/useLocale';
import HoverTooltip from './HoverTooltip';
import { formatLongNumber } from '../../lib/format';
function WorldMap({ data, className }) {
const { basePath } = useRouter();
@ -46,7 +47,7 @@ function WorldMap({ data, className }) {
function handleHover(code) {
if (code === 'AQ') return;
const country = data?.find(({ x }) => x === code);
setTooltip(`${countryNames[code]}: ${country?.y || 0} visitors`);
setTooltip(`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} visitors`);
}
return (
@ -83,7 +84,7 @@ function WorldMap({ data, className }) {
</Geographies>
</ZoomableGroup>
</ComposableMap>
<ReactTooltip id="world-map-tooltip">{tooltip}</ReactTooltip>
{tooltip && <HoverTooltip tooltip={tooltip} />}
</div>
);
}

View File

@ -12,7 +12,7 @@
gap: 10px;
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--font-color100);
color: var(--font-color100) !important;
}
.buttons {

View File

@ -1,224 +1,185 @@
import { useState, useRef, useEffect } from 'react';
import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
import { StatusLight } from 'react-basics';
import classNames from 'classnames';
import ChartJS from 'chart.js';
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 useForceUpdate from 'hooks/useForceUpdate';
import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
import styles from './BarChart.module.css';
import ChartTooltip from './ChartTooltip';
export default function BarChart({
chartId,
datasets,
unit,
records,
animationDuration = DEFAULT_ANIMATION_DURATION,
className,
stacked = false,
loading = false,
onCreate = () => {},
onUpdate = () => {},
className,
}) {
const canvas = useRef();
const chart = useRef();
const chart = useRef(null);
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,
const colors = useMemo(
() => ({
text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200,
}),
[theme],
);
const renderYLabel = label => {
return +label > 1000 ? formatLongNumber(label) : label;
};
function renderXLabel(label, index, values) {
if (loading) return '';
const d = new Date(values[index].value);
const sw = canvas.current.width / window.devicePixelRatio;
const renderTooltip = useCallback(
model => {
const { opacity, labelColors, dataPoints } = model.tooltip;
switch (unit) {
case 'minute':
return index % 2 === 0 ? dateFormat(d, 'H:mm', locale) : '';
case 'hour':
return dateFormat(d, 'p', locale);
case 'day':
if (records > 25) {
if (sw <= 275) {
return index % 10 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
if (sw <= 550) {
return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
if (sw <= 700) {
return index % 2 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
return dateFormat(d, 'MMM d', locale);
}
if (sw <= 375) {
return index % 2 === 0 ? dateFormat(d, 'MMM d', locale) : '';
}
if (sw <= 425) {
return dateFormat(d, 'MMM d', locale);
}
return dateFormat(d, 'EEE M/d', locale);
case 'month':
if (sw <= 330) {
return index % 2 === 0 ? dateFormat(d, 'MMM', locale) : '';
}
return dateFormat(d, 'MMM', locale);
default:
return label;
}
}
if (!dataPoints?.length || !opacity) {
setTooltip(null);
return;
}
function renderYLabel(label) {
return +label > 1000 ? formatLongNumber(label) : label;
}
const formats = {
millisecond: 'T',
second: 'pp',
minute: 'p',
hour: 'h aaa',
day: 'PPPP',
week: 'PPPP',
month: 'LLLL yyyy',
quarter: 'qqq',
year: 'yyyy',
};
function renderTooltip(model) {
const { opacity, title, body, labelColors } = model;
setTooltip(
<div className={styles.tooltip}>
<div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
<div>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
<div className={styles.value}>
{formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
</div>
</StatusLight>
</div>
</div>,
);
},
[unit],
);
if (!opacity || !title) {
setTooltip(null);
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) {
switch (unit) {
case 'hour':
return 'EEE p — PPP';
default:
return 'PPPP';
}
}
function createChart() {
const options = {
const getOptions = useCallback(() => {
return {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: animationDuration,
resize: {
duration: 0,
},
active: {
duration: 0,
},
},
tooltips: {
enabled: false,
custom: renderTooltip,
},
hover: {
animationDuration: 0,
},
responsive: true,
responsiveAnimationDuration: 0,
maintainAspectRatio: false,
legend: {
display: false,
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: renderTooltip,
},
},
scales: {
xAxes: [
{
type: 'time',
distribution: 'series',
time: {
unit,
tooltipFormat: 'x',
},
ticks: {
callback: renderXLabel,
minRotation: 0,
maxRotation: 0,
fontColor: colors.text,
autoSkipPadding: 1,
},
gridLines: {
display: false,
},
offset: true,
stacked: true,
x: {
type: 'time',
stacked: true,
time: {
unit,
},
],
yAxes: [
{
ticks: {
callback: renderYLabel,
beginAtZero: true,
fontColor: colors.text,
},
gridLines: {
color: colors.line,
zeroLineColor: colors.zeroLine,
},
stacked,
grid: {
display: false,
},
],
border: {
color: colors.line,
},
ticks: {
color: colors.text,
autoSkip: false,
maxRotation: 0,
},
},
y: {
type: 'linear',
min: 0,
beginAtZero: true,
stacked,
grid: {
color: colors.line,
},
border: {
color: colors.line,
},
ticks: {
color: colors.text,
callback: renderYLabel,
},
},
},
};
}, [animationDuration, renderTooltip, stacked, colors]);
const createChart = () => {
Chart.defaults.font.family = 'Inter';
const options = getOptions();
onCreate(options);
chart.current = new ChartJS(canvas.current, {
chart.current = new Chart(canvas.current, {
type: 'bar',
data: {
datasets,
},
options,
});
}
};
function updateChart() {
const { options } = chart.current;
const updateChart = () => {
setTooltip(null);
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].ticks.precision = 0;
options.scales.yAxes[0].gridLines.color = colors.line;
options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
options.animation.duration = animationDuration;
options.tooltips.custom = renderTooltip;
chart.current.options = getOptions();
onUpdate(chart.current);
chart.current.update();
forceUpdate();
}
};
useEffect(() => {
if (datasets) {
if (!chart.current) {
createChart();
} else {
setTooltip(null);
updateChart();
}
}
}, [datasets, unit, animationDuration, locale, theme]);
}, [datasets, unit, theme, animationDuration, locale, loading]);
return (
<>
<div
data-tip=""
data-for={`${chartId}-tooltip`}
className={classNames(styles.chart, className)}
>
<div className={classNames(styles.chart, className)}>
<canvas ref={canvas} />
</div>
<Legend chart={chart.current} />
<ChartTooltip chartId={chartId} tooltip={tooltip} />
{tooltip && <HoverTooltip tooltip={tooltip} />}
</>
);
}

View File

@ -1,10 +1,21 @@
.chart {
position: relative;
height: 400px;
overflow: hidden;
}
.tooltip {
display: flex;
flex-direction: column;
gap: 10px;
}
.tooltip .value {
text-transform: lowercase;
}
@media only screen and (max-width: 992px) {
.chart {
height: 200px;
/*height: 200px;*/
}
}

View File

@ -1,26 +0,0 @@
import { StatusLight } from 'react-basics';
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 (
<ReactTooltip id={`${chartId}-tooltip`}>
<div className={styles.tooltip}>
<div className={styles.content}>
<div className={styles.title}>{title}</div>
<div className={styles.metric}>
<StatusLight color={labelColor}>
{value} {label}
</StatusLight>
</div>
</div>
</div>
</ReactTooltip>
);
}

View File

@ -33,12 +33,12 @@ export default function EventsChart({ websiteId, className, token }) {
if (!data) return [];
if (isLoading) return data;
const map = data.reduce((obj, { x, t, y }) => {
const map = data.reduce((obj, { x, y }) => {
if (!obj[x]) {
obj[x] = [];
}
obj[x].push({ t, y });
obj[x].push({ x, y });
return obj;
}, {});
@ -76,7 +76,6 @@ export default function EventsChart({ websiteId, className, token }) {
return (
<BarChart
chartId={`events-${websiteId}`}
className={className}
datasets={datasets}
unit={unit}

View File

@ -32,15 +32,13 @@ export default function FilterTags({ websiteId, params, onClick }) {
return null;
}
return (
<div key={key} className={styles.tag}>
<Button onClick={() => handleCloseFilter(key)} variant="primary" size="sm">
<Text>
<b>{`${key}`}</b> {`${safeDecodeURI(params[key])}`}
</Text>
<Icon>
<Icons.Close />
</Icon>
</Button>
<div key={key} className={styles.tag} onClick={() => handleCloseFilter(key)}>
<Text>
<b>{`${key}`}</b> = {`${safeDecodeURI(params[key])}`}
</Text>
<Icon>
<Icons.Close />
</Icon>
</div>
);
})}

View File

@ -1,11 +1,22 @@
.filters {
display: flex;
justify-content: flex-start;
align-items: flex-start;
align-items: center;
gap: 10px;
}
.tag {
text-align: center;
margin-bottom: 10px;
margin-right: 20px;
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
font-size: var(--font-size-sm);
border: 1px solid var(--base600);
border-radius: var(--border-radius);
line-height: 30px;
padding: 0 8px;
cursor: pointer;
}
.tag:hover {
background: var(--base75);
}

View File

@ -2,13 +2,13 @@
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 10px;
padding: 10px 0;
}
.label {
display: flex;
align-items: center;
font-size: var(--font-size-xs);
font-size: var(--font-size-sm);
cursor: pointer;
}

View File

@ -40,7 +40,7 @@ export default function MetricsTable({
const { data, isLoading, isFetched, error } = useQuery(
[
'websites:mnetrics',
'websites:metrics',
{ websiteId, type, modified, url, referrer, os, browser, device, country },
],
() =>

View File

@ -25,12 +25,16 @@ export default function PageviewsChart({
const primaryColor = colord(THEME_COLORS[theme].primary);
return {
views: {
background: primaryColor.alpha(0.4).toRgbString(),
border: primaryColor.alpha(0.5).toRgbString(),
hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
backgroundColor: primaryColor.alpha(0.4).toRgbString(),
borderColor: primaryColor.alpha(0.7).toRgbString(),
hoverBorderColor: primaryColor.toRgbString(),
},
visitors: {
background: primaryColor.alpha(0.6).toRgbString(),
border: primaryColor.alpha(0.7).toRgbString(),
hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
backgroundColor: primaryColor.alpha(0.6).toRgbString(),
borderColor: primaryColor.alpha(0.9).toRgbString(),
hoverBorderColor: primaryColor.toRgbString(),
},
};
}, [theme]);
@ -50,30 +54,28 @@ export default function PageviewsChart({
return null;
}
const datasets = [
{
label: formatMessage(labels.uniqueVisitors),
data: data.sessions,
borderWidth: 1,
...colors.visitors,
},
{
label: formatMessage(labels.pageViews),
data: data.pageviews,
borderWidth: 1,
...colors.views,
},
];
return (
<div ref={ref}>
<BarChart
{...props}
key={websiteId}
className={className}
chartId={websiteId}
datasets={[
{
label: formatMessage(labels.uniqueVisitors),
data: data.sessions,
lineTension: 0,
backgroundColor: colors.visitors.background,
borderColor: colors.visitors.border,
borderWidth: 1,
},
{
label: formatMessage(labels.pageViews),
data: data.pageviews,
lineTension: 0,
backgroundColor: colors.views.background,
borderColor: colors.views.border,
borderWidth: 1,
},
]}
datasets={datasets}
unit={unit}
records={records}
animationDuration={visible ? animationDuration : 0}

View File

@ -1,29 +1,11 @@
import { useState } from 'react';
import { useIntl } from 'react-intl';
import MetricsTable from './MetricsTable';
import FilterButtons from 'components/common/FilterButtons';
import FilterLink from 'components/common/FilterLink';
import { refFilter } from 'lib/filters';
import { labels } from 'components/messages';
import { FILTER_COMBINED, FILTER_RAW } from 'lib/constants';
const filters = {
[FILTER_RAW]: null,
[FILTER_COMBINED]: refFilter,
};
export default function ReferrersTable({ websiteId, showFilters, ...props }) {
const [filter, setFilter] = useState(FILTER_COMBINED);
export default function ReferrersTable({ websiteId, ...props }) {
const { formatMessage } = useIntl();
const items = [
{
label: formatMessage(labels.filterCombined),
key: FILTER_COMBINED,
},
{ label: formatMessage(labels.filterRaw), key: FILTER_RAW },
];
const renderLink = ({ w: link, x: referrer }) => {
return referrer ? (
<FilterLink id="referrer" value={referrer} externalUrl={link} />
@ -34,14 +16,12 @@ export default function ReferrersTable({ websiteId, showFilters, ...props }) {
return (
<>
{showFilters && <FilterButtons items={items} selectedKey={filter} onSelect={setFilter} />}
<MetricsTable
{...props}
title={formatMessage(labels.referrers)}
type="referrer"
metric={formatMessage(labels.views)}
websiteId={websiteId}
dataFilter={filters[filter]}
renderLabel={renderLink}
/>
</>

View File

@ -7,7 +7,7 @@
.chart {
position: relative;
padding-bottom: 10px;
overflow: hidden;
}
.title {

View File

@ -5,7 +5,7 @@ import { FixedSizeList } from 'react-window';
import firstBy from 'thenby';
import FilterButtons from 'components/common/FilterButtons';
import NoData from 'components/common/NoData';
import { getDeviceMessage, labels, messages } from 'components/messages';
import { labels, messages } from 'components/messages';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
import { BROWSERS } from 'lib/constants';
@ -102,7 +102,7 @@ export default function RealtimeLog({ data, websiteDomain }) {
country: <b>{countryNames[country] || formatMessage(labels.unknown)}</b>,
browser: <b>{BROWSERS[browser]}</b>,
os: <b>{os}</b>,
device: <b>{formatMessage(getDeviceMessage(device))}</b>,
device: <b>{formatMessage(labels[device] || labels.unknown)}</b>,
}}
/>
);

View File

@ -17,14 +17,14 @@ import { labels } from 'components/messages';
import useUser from 'hooks/useUser';
import useApi from 'hooks/useApi';
export default function TeamWebsitesTable({ teamId, data = [], onSave }) {
export default function TeamWebsitesTable({ data = [], onSave }) {
const { formatMessage } = useIntl();
const { user } = useUser();
const { del, useMutation } = useApi();
const { mutate } = useMutation(data => del(`/teamWebsites/${data.teamWebsiteId}`));
const { mutate } = useMutation(({ teamWebsiteId }) => del(`/teamWebsites/${teamWebsiteId}`));
const columns = [
{ name: 'name', label: formatMessage(labels.name), style: { flex: 2 } },
{ name: 'name', label: formatMessage(labels.name) },
{ name: 'domain', label: formatMessage(labels.domain) },
{ name: 'action', label: ' ' },
];

View File

@ -19,8 +19,11 @@ CREATE TABLE event
subdivision2 LowCardinality(String),
city String,
--pageview
url String,
referrer String,
url_path String,
url_query String,
referrer_path String,
referrer_query String,
referrer_domain String,
page_title String,
--event
event_type UInt32,
@ -48,8 +51,11 @@ CREATE TABLE event_queue (
subdivision2 LowCardinality(String),
city String,
--pageview
url String,
referrer String,
url_path String,
url_query String,
referrer_path String,
referrer_query String,
referrer_domain String,
page_title String,
--event
event_type UInt32,
@ -79,8 +85,11 @@ SELECT website_id,
subdivision1,
subdivision2,
city,
url,
referrer,
url_path,
url_query,
referrer_path,
referrer_query,
referrer_domain,
page_title,
event_type,
event_name,

View File

@ -61,8 +61,11 @@ CREATE TABLE `website_event` (
`website_id` VARCHAR(36) NOT NULL,
`session_id` VARCHAR(36) NOT NULL,
`created_at` TIMESTAMP(0) NULL DEFAULT CURRENT_TIMESTAMP(0),
`url` VARCHAR(500) NOT NULL,
`referrer` VARCHAR(500) NULL,
`url_path` VARCHAR(500) NOT NULL,
`url_query` VARCHAR(500) NULL,
`referrer_path` VARCHAR(500) NULL,
`referrer_query` VARCHAR(500) NULL,
`referrer_domain` VARCHAR(500) NULL,
`page_title` VARCHAR(500) NULL,
`event_type` INTEGER UNSIGNED NOT NULL DEFAULT 1,
`event_name` VARCHAR(50) NULL,
@ -79,14 +82,12 @@ CREATE TABLE `website_event` (
CREATE TABLE `team` (
`team_id` VARCHAR(36) NOT NULL,
`name` VARCHAR(50) NOT NULL,
`user_id` VARCHAR(36) NOT NULL,
`access_code` VARCHAR(50) NULL,
`created_at` TIMESTAMP(0) NULL DEFAULT CURRENT_TIMESTAMP(0),
`updated_at` TIMESTAMP(0) NULL,
UNIQUE INDEX `team_team_id_key`(`team_id`),
UNIQUE INDEX `team_access_code_key`(`access_code`),
INDEX `team_user_id_idx`(`user_id`),
INDEX `team_access_code_idx`(`access_code`),
PRIMARY KEY (`team_id`)
) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
@ -110,13 +111,11 @@ CREATE TABLE `team_user` (
CREATE TABLE `team_website` (
`team_website_id` VARCHAR(36) NOT NULL,
`team_id` VARCHAR(36) NOT NULL,
`user_id` VARCHAR(36) NOT NULL,
`website_id` VARCHAR(36) NOT NULL,
`created_at` TIMESTAMP(0) NULL DEFAULT CURRENT_TIMESTAMP(0),
UNIQUE INDEX `team_website_team_website_id_key`(`team_website_id`),
INDEX `team_website_team_id_idx`(`team_id`),
INDEX `team_website_user_id_idx`(`user_id`),
INDEX `team_website_website_id_idx`(`website_id`),
PRIMARY KEY (`team_website_id`)
) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

View File

@ -19,7 +19,6 @@ model User {
teamUser TeamUser[]
Website Website[]
teamWebsite TeamWebsite[]
@@map("user")
}
@ -65,15 +64,18 @@ model Website {
}
model WebsiteEvent {
id String @id() @map("event_id") @db.VarChar(36)
websiteId String @map("website_id") @db.VarChar(36)
sessionId String @map("session_id") @db.VarChar(36)
createdAt DateTime? @default(now()) @map("created_at") @db.Timestamp(0)
url String @db.VarChar(500)
referrer String? @db.VarChar(500)
pageTitle String? @map("page_title") @db.VarChar(500)
eventType Int @default(1) @map("event_type") @db.UnsignedInt
eventName String? @map("event_name") @db.VarChar(50)
id String @id() @map("event_id") @db.VarChar(36)
websiteId String @map("website_id") @db.VarChar(36)
sessionId String @map("session_id") @db.VarChar(36)
createdAt DateTime? @default(now()) @map("created_at") @db.Timestamp(0)
urlPath String @map("url_path") @db.VarChar(500)
urlQuery String? @map("url_query") @db.VarChar(500)
referrerPath String? @map("referrer_path") @db.VarChar(500)
referrerQuery String? @map("referrer_query") @db.VarChar(500)
referrerDomain String? @map("referrer_domain") @db.VarChar(500)
pageTitle String? @map("page_title") @db.VarChar(500)
eventType Int @default(1) @map("event_type") @db.UnsignedInt
eventName String? @map("event_name") @db.VarChar(50)
@@index([createdAt])
@@index([sessionId])
@ -86,7 +88,6 @@ model WebsiteEvent {
model Team {
id String @id() @unique() @map("team_id") @db.VarChar(36)
name String @db.VarChar(50)
userId String @map("user_id") @db.VarChar(36)
accessCode String? @unique @map("access_code") @db.VarChar(50)
createdAt DateTime? @default(now()) @map("created_at") @db.Timestamp(0)
updatedAt DateTime? @map("updated_at") @db.Timestamp(0)
@ -94,7 +95,6 @@ model Team {
teamUsers TeamUser[]
teamWebsite TeamWebsite[]
@@index([userId])
@@index([accessCode])
@@map("team")
}
@ -118,16 +118,13 @@ model TeamUser {
model TeamWebsite {
id String @id() @unique() @map("team_website_id") @db.VarChar(36)
teamId String @map("team_id") @db.VarChar(36)
userId String @map("user_id") @db.VarChar(36)
websiteId String @map("website_id") @db.VarChar(36)
createdAt DateTime? @default(now()) @map("created_at") @db.Timestamp(0)
team Team @relation(fields: [teamId], references: [id])
user User @relation(fields: [userId], references: [id])
website Website @relation(fields: [websiteId], references: [id])
@@index([teamId])
@@index([userId])
@@index([websiteId])
@@map("team_website")
}

View File

@ -15,5 +15,4 @@ DROP INDEX "team_website_user_id_idx";
ALTER TABLE "team" DROP COLUMN "user_id";
-- AlterTable
ALTER TABLE "team_website" DROP COLUMN "user_id",
ADD COLUMN "userId" UUID;
ALTER TABLE "team_website" DROP COLUMN "user_id";

View File

@ -0,0 +1,16 @@
/*
Warnings:
- You are about to drop the column `referrer` on the `website_event` table. All the data in the column will be lost.
- You are about to drop the column `url` on the `website_event` table. All the data in the column will be lost.
- Added the required column `url_path` to the `website_event` table without a default value. This is not possible if the table is not empty.
*/
-- AlterTable
ALTER TABLE "website_event" DROP COLUMN "referrer",
DROP COLUMN "url",
ADD COLUMN "referrer_domain" VARCHAR(500),
ADD COLUMN "referrer_path" VARCHAR(500),
ADD COLUMN "referrer_query" VARCHAR(500),
ADD COLUMN "url_path" VARCHAR(500) NOT NULL,
ADD COLUMN "url_query" VARCHAR(500);

View File

@ -64,15 +64,18 @@ model Website {
}
model WebsiteEvent {
id String @id() @map("event_id") @db.Uuid
websiteId String @map("website_id") @db.Uuid
sessionId String @map("session_id") @db.Uuid
createdAt DateTime? @default(now()) @map("created_at") @db.Timestamptz(6)
url String @db.VarChar(500)
referrer String? @db.VarChar(500)
pageTitle String? @map("page_title") @db.VarChar(500)
eventType Int @default(1) @map("event_type") @db.Integer
eventName String? @map("event_name") @db.VarChar(50)
id String @id() @map("event_id") @db.Uuid
websiteId String @map("website_id") @db.Uuid
sessionId String @map("session_id") @db.Uuid
createdAt DateTime? @default(now()) @map("created_at") @db.Timestamptz(6)
urlPath String @map("url_path") @db.VarChar(500)
urlQuery String? @map("url_query") @db.VarChar(500)
referrerPath String? @map("referrer_path") @db.VarChar(500)
referrerQuery String? @map("referrer_query") @db.VarChar(500)
referrerDomain String? @map("referrer_domain") @db.VarChar(500)
pageTitle String? @map("page_title") @db.VarChar(500)
eventType Int @default(1) @map("event_type") @db.Integer
eventName String? @map("event_name") @db.VarChar(50)
@@index([createdAt])
@@index([sessionId])

View File

@ -1,4 +1,3 @@
import { parseISO } from 'date-fns';
import { parseDateRange } from 'lib/date';
import { setItem } from 'next-basics';
import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';

View File

@ -74,6 +74,9 @@ function getFilterQuery(filters = {}, params = {}) {
switch (key) {
case 'url':
arr.push(`and url_path = {${key}:String}`);
params[key] = filter;
break;
case 'pageTitle':
case 'os':
case 'browser':
@ -92,18 +95,20 @@ function getFilterQuery(filters = {}, params = {}) {
break;
case 'referrer':
arr.push(`and referrer ILIKE {${key}:String}`);
params[key] = `%${filter}`;
arr.push(`and referrer_domain= {${key}:String}`);
params[key] = filter;
break;
case 'domain':
arr.push(`and referrer NOT ILIKE {${key}:String}`);
arr.push(`and referrer NOT ILIKE '/%'`);
arr.push(`and referrer_domain NOT ILIKE {${key}:String}`);
arr.push(`and referrer_domain NOT ILIKE '/%'`);
params[key] = `%://${filter}/%`;
break;
case 'query':
arr.push(`and url like '%?%'`);
arr.push(`and url_query= {${key}:String}`);
params[key] = filter;
break;
}
return arr;

View File

@ -181,18 +181,18 @@ export function getDateArray(data, startDate, endDate, unit) {
const n = diff(endDate, startDate) + 1;
function findData(t) {
const x = data.find(e => {
return normalize(getDateFromString(e.t)).getTime() === t.getTime();
const d = data.find(({ x }) => {
return normalize(getDateFromString(x)).getTime() === t.getTime();
});
return x?.y || 0;
return d?.y || 0;
}
for (let i = 0; i < n; i++) {
const t = normalize(add(startDate, i));
const y = findData(t);
arr.push({ ...data[i], t, y });
arr.push({ x: t, y });
}
return arr;

View File

@ -1,30 +1,10 @@
export const urlFilter = data => {
const isValidUrl = url => {
return url !== '' && url !== null;
};
const cleanUrl = url => {
try {
const { pathname } = new URL(url, location.origin);
return pathname;
} catch {
return null;
}
};
const map = data.reduce((obj, { x, y }) => {
if (!isValidUrl(x)) {
return obj;
}
const url = cleanUrl(x);
if (url) {
if (!obj[url]) {
obj[url] = y;
if (x) {
if (!obj[x]) {
obj[x] = y;
} else {
obj[url] += y;
obj[x] += y;
}
}

View File

@ -74,6 +74,9 @@ function getFilterQuery(filters = {}, params = []): string {
switch (key) {
case 'url':
arr.push(`and url_path=$${params.length + 1}`);
params.push(decodeURIComponent(filter));
break;
case 'os':
case 'pageTitle':
case 'browser':
@ -92,18 +95,20 @@ function getFilterQuery(filters = {}, params = []): string {
break;
case 'referrer':
arr.push(`and referrer like $${params.length + 1}`);
params.push(`%${decodeURIComponent(filter)}%`);
arr.push(`and referrer_domain=$${params.length + 1}`);
params.push(decodeURIComponent(filter));
break;
case 'domain':
arr.push(`and referrer not like $${params.length + 1}`);
arr.push(`and referrer not like '/%'`);
arr.push(`and referrer_domain not like $${params.length + 1}`);
arr.push(`and referrer_domain not like '/%'`);
params.push(`%://${filter}/%`);
break;
case 'query':
arr.push(`and url like '%?%'`);
arr.push(`and url_query=$${params.length + 1}`);
params.push(decodeURIComponent(filter));
break;
}
return arr;

View File

@ -64,7 +64,8 @@
"@umami/prisma-client": "^0.2.0",
"@umami/redis-client": "^0.2.0",
"chalk": "^4.1.1",
"chart.js": "^2.9.4",
"chart.js": "^4.2.1",
"chartjs-adapter-date-fns": "^3.0.0",
"classnames": "^2.3.1",
"clickhouse": "^2.5.0",
"colord": "^2.9.2",
@ -93,13 +94,12 @@
"node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5",
"react": "^18.2.0",
"react-basics": "^0.71.0",
"react-basics": "^0.73.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0",
"react-intl": "^5.24.7",
"react-simple-maps": "^2.3.0",
"react-spring": "^9.4.4",
"react-tooltip": "^4.2.21",
"react-use-measure": "^2.0.4",
"react-window": "^1.8.6",
"request-ip": "^3.3.0",

View File

@ -10,6 +10,7 @@ import 'styles/locale.css';
import 'styles/index.css';
import '@fontsource/inter/400.css';
import '@fontsource/inter/700.css';
import 'chartjs-adapter-date-fns';
import Script from 'next/script';
const client = new QueryClient({

View File

@ -34,8 +34,7 @@ export default async (req: NextApiRequestCollect, res: NextApiResponse) => {
const { type, payload } = getJsonBody(req);
const { referrer, eventName, eventData, pageTitle } = payload;
let { url } = payload;
const { url, referrer, eventName, eventData, pageTitle } = payload;
// Validate eventData is JSON
if (eventData && !(typeof eventData === 'object' && !Array.isArray(eventData))) {
@ -88,17 +87,41 @@ export default async (req: NextApiRequestCollect, res: NextApiResponse) => {
const session = req.session;
let urlPath = url.split('?')[0];
const urlQuery = url.split('?')[1];
let referrerPath;
let referrerQuery;
let referrerDomain;
try {
const newRef = new URL(referrer);
referrerPath = newRef.pathname;
referrerDomain = newRef.hostname;
referrerQuery = newRef.search.substring(1);
} catch {
referrerPath = referrer.split('?')[0];
referrerQuery = referrer.split('?')[1];
}
if (process.env.REMOVE_TRAILING_SLASH) {
url = url.replace(/\/$/, '');
urlPath = urlPath.replace(/\/$/, '');
}
if (type === 'pageview') {
await savePageView({ ...session, url, referrer, pageTitle });
await savePageView({
...session,
urlPath,
urlQuery,
referrerPath,
referrerQuery,
referrerDomain,
pageTitle,
});
} else if (type === 'event') {
await saveEvent({
...session,
url,
referrer,
urlPath,
urlQuery,
pageTitle,
eventName,
eventData,

View File

@ -6,7 +6,17 @@ import { NextApiResponse } from 'next';
import { badRequest, methodNotAllowed, ok, unauthorized } from 'next-basics';
import { getPageviewMetrics, getSessionMetrics, getWebsite } from 'queries';
const sessionColumns = ['browser', 'os', 'device', 'screen', 'country', 'language'];
const sessionColumns = [
'browser',
'os',
'device',
'screen',
'country',
'language',
'subdivision1',
'subdivision2',
'city',
];
const pageviewColumns = ['url', 'referrer', 'query', 'pageTitle'];
function getTable(type) {
@ -26,12 +36,17 @@ function getTable(type) {
}
function getColumn(type) {
if (type === 'event') {
return 'event_name';
}
if (type === 'query') {
return 'url';
switch (type) {
case 'url':
return 'url_path';
case 'referrer':
return 'referrer_domain';
case 'event':
return 'event_name';
case 'query':
return 'url_query';
}
return type;
}

View File

@ -9,8 +9,8 @@ import { saveEventData } from '../eventData/saveEventData';
export async function saveEvent(args: {
id: string;
websiteId: string;
url: string;
referrer?: string;
urlPath: string;
urlQuery?: string;
pageTitle?: string;
eventName?: string;
eventData?: any;
@ -34,21 +34,21 @@ export async function saveEvent(args: {
async function relationalQuery(data: {
id: string;
websiteId: string;
url: string;
referrer?: string;
urlPath: string;
urlQuery?: string;
pageTitle?: string;
eventName?: string;
eventData?: any;
}) {
const { websiteId, id: sessionId, url, eventName, referrer, pageTitle } = data;
const { websiteId, id: sessionId, urlPath, urlQuery, eventName, pageTitle } = data;
return prisma.client.websiteEvent.create({
data: {
id: uuid(),
websiteId,
sessionId,
url: url?.substring(0, URL_LENGTH),
referrer: referrer?.substring(0, URL_LENGTH),
urlPath: urlPath?.substring(0, URL_LENGTH),
urlQuery: urlQuery?.substring(0, URL_LENGTH),
pageTitle: pageTitle,
eventType: EVENT_TYPE.customEvent,
eventName: eventName?.substring(0, EVENT_NAME_LENGTH),
@ -59,8 +59,8 @@ async function relationalQuery(data: {
async function clickhouseQuery(data: {
id: string;
websiteId: string;
url: string;
referrer?: string;
urlPath: string;
urlQuery?: string;
pageTitle?: string;
eventName?: string;
eventData?: any;
@ -78,7 +78,8 @@ async function clickhouseQuery(data: {
const {
websiteId,
id: sessionId,
url,
urlPath,
urlQuery,
pageTitle,
eventName,
eventData,
@ -101,7 +102,8 @@ async function clickhouseQuery(data: {
subdivision1: subdivision1 ? subdivision1 : null,
subdivision2: subdivision2 ? subdivision2 : null,
city: city ? city : null,
url: url?.substring(0, URL_LENGTH),
urlPath: urlPath?.substring(0, URL_LENGTH),
urlQuery: urlQuery?.substring(0, URL_LENGTH),
page_title: pageTitle,
event_type: EVENT_TYPE.customEvent,
event_name: eventName?.substring(0, EVENT_NAME_LENGTH),

View File

@ -50,7 +50,7 @@ async function relationalQuery(
const { filterQuery, joinSession } = parseFilters(filters, params);
return rawQuery(
`select ${getDateQuery('website_event.created_at', unit, timezone)} t,
`select ${getDateQuery('website_event.created_at', unit, timezone)} x,
count(${count !== '*' ? `${count}${sessionKey}` : count}) y
from website_event
${joinSession}
@ -83,7 +83,7 @@ async function clickhouseQuery(
return rawQuery(
`select
${getDateStringQuery('g.t', unit)} as t,
${getDateStringQuery('g.t', unit)} as x,
g.y as y
from
(select

View File

@ -8,8 +8,11 @@ import { uuid } from 'lib/crypto';
export async function savePageView(args: {
id: string;
websiteId: string;
url: string;
referrer?: string;
urlPath: string;
urlQuery?: string;
referrerPath?: string;
referrerQuery?: string;
referrerDomain?: string;
pageTitle?: string;
hostname?: string;
browser?: string;
@ -31,19 +34,34 @@ export async function savePageView(args: {
async function relationalQuery(data: {
id: string;
websiteId: string;
url: string;
referrer?: string;
urlPath: string;
urlQuery?: string;
referrerPath?: string;
referrerQuery?: string;
referrerDomain?: string;
pageTitle?: string;
}) {
const { websiteId, id: sessionId, url, referrer, pageTitle } = data;
const {
websiteId,
id: sessionId,
urlPath,
urlQuery,
referrerPath,
referrerQuery,
referrerDomain,
pageTitle,
} = data;
return prisma.client.websiteEvent.create({
data: {
id: uuid(),
websiteId,
sessionId,
url: url?.substring(0, URL_LENGTH),
referrer: referrer?.substring(0, URL_LENGTH),
urlPath: urlPath?.substring(0, URL_LENGTH),
urlQuery: urlQuery?.substring(0, URL_LENGTH),
referrerPath: referrerPath?.substring(0, URL_LENGTH),
referrerQuery: referrerQuery?.substring(0, URL_LENGTH),
referrerDomain: referrerDomain?.substring(0, URL_LENGTH),
pageTitle: pageTitle,
eventType: EVENT_TYPE.pageView,
},
@ -53,8 +71,11 @@ async function relationalQuery(data: {
async function clickhouseQuery(data: {
id: string;
websiteId: string;
url: string;
referrer?: string;
urlPath: string;
urlQuery?: string;
referrerPath?: string;
referrerQuery?: string;
referrerDomain?: string;
pageTitle?: string;
hostname?: string;
browser?: string;
@ -70,8 +91,11 @@ async function clickhouseQuery(data: {
const {
websiteId,
id: sessionId,
url,
referrer,
urlPath,
urlQuery,
referrerPath,
referrerQuery,
referrerDomain,
pageTitle,
country,
subdivision1,
@ -91,8 +115,11 @@ async function clickhouseQuery(data: {
subdivision1: subdivision1 ? subdivision1 : null,
subdivision2: subdivision2 ? subdivision2 : null,
city: city ? city : null,
url: url?.substring(0, URL_LENGTH),
referrer: referrer?.substring(0, URL_LENGTH),
urlPath: urlPath?.substring(0, URL_LENGTH),
urlQuery: urlQuery?.substring(0, URL_LENGTH),
referrerPath: referrerPath?.substring(0, URL_LENGTH),
referrerQuery: referrerQuery?.substring(0, URL_LENGTH),
referrerDomain: referrerDomain?.substring(0, URL_LENGTH),
page_title: pageTitle,
event_type: EVENT_TYPE.pageView,
created_at: getDateFormat(new Date()),

View File

@ -6,7 +6,7 @@ import { terser } from 'rollup-plugin-terser';
export default {
input: 'tracker/index.js',
output: {
file: 'public/umami.js',
file: 'public/script.js',
format: 'iife',
},
plugins: [

View File

@ -1760,6 +1760,11 @@
"@jridgewell/resolve-uri" "3.1.0"
"@jridgewell/sourcemap-codec" "1.4.14"
"@kurkle/color@^0.3.0":
version "0.3.2"
resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
"@netlify/esbuild-android-64@0.14.39":
version "0.14.39"
resolved "https://registry.yarnpkg.com/@netlify/esbuild-android-64/-/esbuild-android-64-0.14.39.tgz#7bd30aba94a92351d2c5e25e178ceb824f3c2f99"
@ -3393,28 +3398,17 @@ chalk@^4.0.0, chalk@^4.1.1, chalk@^4.1.2:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
chart.js@^2.9.4:
version "2.9.4"
resolved "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz"
integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
chart.js@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.2.1.tgz#d2bd5c98e9a0ae35408975b638f40513b067ba1d"
integrity sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
"@kurkle/color" "^0.3.0"
chartjs-color-string@^0.6.0:
version "0.6.0"
resolved "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz"
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.4.1"
resolved "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz"
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
dependencies:
chartjs-color-string "^0.6.0"
color-convert "^1.9.3"
chartjs-adapter-date-fns@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz#c25f63c7f317c1f96f9a7c44bd45eeedb8a478e5"
integrity sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==
chokidar@^3.5.3:
version "3.5.3"
@ -3509,7 +3503,7 @@ cluster-key-slot@^1.1.0:
resolved "https://registry.yarnpkg.com/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz#88ddaa46906e303b5de30d3153b7d9fe0a0c19ac"
integrity sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==
color-convert@^1.9.0, color-convert@^1.9.3:
color-convert@^1.9.0:
version "1.9.3"
resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@ -6177,7 +6171,7 @@ moment-timezone@^0.5.35:
dependencies:
moment "^2.29.4"
"moment@>= 2.9.0", moment@^2.10.2, moment@^2.29.4:
"moment@>= 2.9.0", moment@^2.29.4:
version "2.29.4"
resolved "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
@ -7142,10 +7136,10 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-basics@^0.71.0:
version "0.71.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.71.0.tgz#317ab58cdbadd4ba36b233cc64dec2a64fe0f1b8"
integrity sha512-DLhx9bweJz2JG0lETnRrjQNeLL/pmyBqd0SFLM+VXaw8+6SnFheVhQ1Q/W8UerNRsN2oLGH4Hg1XuULG0JlrgA==
react-basics@^0.73.0:
version "0.73.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.73.0.tgz#9555563f3407ac417dc833dfca47588123d55535"
integrity sha512-eEK8yWWrXO7JATBlPKBfFQlD1hNZoNeEtlYNx+QjOCLKu1qjClutP5nXWHmX4gHE97XFwUKzbTU35NkNEy5C0w==
dependencies:
classnames "^2.3.1"
date-fns "^2.29.3"
@ -7258,14 +7252,6 @@ react-spring@^9.5.5:
"@react-spring/web" "~9.5.5"
"@react-spring/zdog" "~9.5.5"
react-tooltip@^4.2.21:
version "4.5.1"
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.5.1.tgz#77eccccdf16adec804132e558ec20ca5783b866a"
integrity sha512-Zo+CSFUGXar1uV+bgXFFDe7VeS2iByeIp5rTgTcc2HqtuOS5D76QapejNNfx320MCY91TlhTQat36KGFTqgcvw==
dependencies:
prop-types "^15.8.1"
uuid "^7.0.3"
react-use-measure@^2.0.4:
version "2.1.1"
resolved "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.1.tgz"
@ -8641,11 +8627,6 @@ uuid@3.4.0, uuid@^3.3.2:
resolved "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz"
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
uuid@^7.0.3:
version "7.0.3"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
uuid@^8.3.0, uuid@^8.3.2:
version "8.3.2"
resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"