diff --git a/.gitignore b/.gitignore index 8f39d0f1..b11f4509 100644 --- a/.gitignore +++ b/.gitignore @@ -22,6 +22,7 @@ node_modules # misc .DS_Store .idea +.yarn *.iml *.log .vscode diff --git a/package.json b/package.json index 9cea8cbe..03f0f79a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "umami", - "version": "2.10.2", + "version": "2.11.0", "description": "A simple, fast, privacy-focused alternative to Google Analytics.", "author": "Umami Software, Inc. ", "license": "MIT", @@ -69,7 +69,7 @@ "@prisma/client": "5.10.2", "@prisma/extension-read-replicas": "^0.3.0", "@react-spring/web": "^9.7.3", - "@tanstack/react-query": "^5.12.2", + "@tanstack/react-query": "^5.28.6", "@umami/prisma-client": "^0.14.0", "@umami/redis-client": "^0.18.0", "chalk": "^4.1.1", @@ -176,6 +176,6 @@ "tar": "^6.1.2", "ts-jest": "^29.1.2", "ts-node": "^10.9.1", - "typescript": "^5.1.6" + "typescript": "^5.4.3" } } diff --git a/src/app/(main)/NavBar.tsx b/src/app/(main)/NavBar.tsx index 08007b1c..5e0e3da2 100644 --- a/src/app/(main)/NavBar.tsx +++ b/src/app/(main)/NavBar.tsx @@ -14,7 +14,7 @@ import styles from './NavBar.module.css'; export function NavBar() { const { formatMessage, labels } = useMessages(); const { pathname, router } = useNavigation(); - const { renderTeamUrl } = useTeamUrl(); + const { teamId, renderTeamUrl } = useTeamUrl(); const cloudMode = !!process.env.cloudMode; @@ -34,25 +34,38 @@ export function NavBar() { label: formatMessage(labels.settings), url: renderTeamUrl('/settings'), children: [ + ...(teamId + ? [ + { + label: formatMessage(labels.team), + url: renderTeamUrl('/settings/team'), + }, + ] + : []), { label: formatMessage(labels.websites), - url: '/settings/websites', - }, - { - label: formatMessage(labels.teams), - url: '/settings/teams', - }, - { - label: formatMessage(labels.users), - url: '/settings/users', - }, - { - label: formatMessage(labels.profile), - url: '/profile', + url: renderTeamUrl('/settings/websites'), }, + ...(!teamId + ? [ + { + label: formatMessage(labels.teams), + url: renderTeamUrl('/settings/teams'), + }, + { + label: formatMessage(labels.users), + url: '/settings/users', + }, + ] + : [ + { + label: formatMessage(labels.members), + url: renderTeamUrl('/settings/members'), + }, + ]), ], }, - cloudMode && { + { label: formatMessage(labels.profile), url: '/profile', }, @@ -94,6 +107,7 @@ export function NavBar() {
+
diff --git a/src/app/(main)/profile/LanguageSetting.tsx b/src/app/(main)/profile/LanguageSetting.tsx index 3004af1e..41ff3dde 100644 --- a/src/app/(main)/profile/LanguageSetting.tsx +++ b/src/app/(main)/profile/LanguageSetting.tsx @@ -20,7 +20,7 @@ export function LanguageSetting() { const handleReset = () => saveLocale(DEFAULT_LOCALE); - const renderValue = (value: string | number) => languages[value].label; + const renderValue = (value: string | number) => languages?.[value]?.label; return ( diff --git a/src/app/(main)/reports/[reportId]/FieldAddForm.module.css b/src/app/(main)/reports/[reportId]/FieldAddForm.module.css deleted file mode 100644 index 5c5aaa4f..00000000 --- a/src/app/(main)/reports/[reportId]/FieldAddForm.module.css +++ /dev/null @@ -1,38 +0,0 @@ -.menu { - width: 360px; - max-height: 300px; - overflow: auto; -} - -.item { - display: flex; - flex-direction: row; - justify-content: space-between; - border-radius: var(--border-radius); -} - -.item:hover { - background: var(--base75); -} - -.type { - color: var(--font-color300); -} - -.selected { - font-weight: bold; -} - -.popup { - display: flex; -} - -.filter { - display: flex; - flex-direction: column; - gap: 20px; -} - -.dropdown { - min-width: 60px; -} diff --git a/src/app/(main)/reports/[reportId]/FieldAddForm.tsx b/src/app/(main)/reports/[reportId]/FieldAddForm.tsx index 9db472d8..32a0b0af 100644 --- a/src/app/(main)/reports/[reportId]/FieldAddForm.tsx +++ b/src/app/(main)/reports/[reportId]/FieldAddForm.tsx @@ -4,8 +4,7 @@ import { REPORT_PARAMETERS } from 'lib/constants'; import PopupForm from './PopupForm'; import FieldSelectForm from './FieldSelectForm'; import FieldAggregateForm from './FieldAggregateForm'; -import FieldFilterForm from './FieldFilterForm'; -import styles from './FieldAddForm.module.css'; +import FieldFilterEditForm from './FieldFilterEditForm'; export function FieldAddForm({ fields = [], @@ -38,13 +37,13 @@ export function FieldAddForm({ }; return createPortal( - + {!selected && } {selected && group === REPORT_PARAMETERS.fields && ( )} {selected && group === REPORT_PARAMETERS.filters && ( - + )} , document.body, diff --git a/src/app/(main)/reports/[reportId]/FieldFilterForm.module.css b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.module.css similarity index 73% rename from src/app/(main)/reports/[reportId]/FieldFilterForm.module.css rename to src/app/(main)/reports/[reportId]/FieldFilterEditForm.module.css index 826cc949..ed78512d 100644 --- a/src/app/(main)/reports/[reportId]/FieldFilterForm.module.css +++ b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.module.css @@ -1,8 +1,8 @@ .popup { display: flex; max-width: 300px; - max-height: 400px; - overflow-x: hidden; + max-height: 210px; + overflow: hidden; } .popup > div { @@ -19,6 +19,6 @@ min-width: 180px; } -.menu { - min-width: 200px; +.text { + min-width: 180px; } diff --git a/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx new file mode 100644 index 00000000..f3b5b247 --- /dev/null +++ b/src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx @@ -0,0 +1,153 @@ +import { useState, useMemo } from 'react'; +import { + Form, + FormRow, + Item, + Flexbox, + Dropdown, + Button, + TextField, + Menu, + Popup, + PopupTrigger, + Loading, +} from 'react-basics'; +import { useMessages, useFilters, useFormat, useLocale, useWebsiteValues } from 'components/hooks'; +import { safeDecodeURIComponent } from 'next-basics'; +import { OPERATORS } from 'lib/constants'; +import styles from './FieldFilterEditForm.module.css'; + +export interface FieldFilterFormProps { + websiteId?: string; + name: string; + label?: string; + type: string; + defaultValue?: string; + onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void; + allowFilterSelect?: boolean; + isNew?: boolean; +} + +export default function FieldFilterEditForm({ + websiteId, + name, + label, + type, + defaultValue, + onChange, + allowFilterSelect = true, + isNew, +}: FieldFilterFormProps) { + const { formatMessage, labels } = useMessages(); + const [filter, setFilter] = useState('eq'); + const [value, setValue] = useState(defaultValue ?? ''); + const { getFilters } = useFilters(); + const { formatValue } = useFormat(); + const { locale } = useLocale(); + const filters = getFilters(type); + const { data: values = [], isLoading } = useWebsiteValues(websiteId, name); + + const formattedValues = useMemo(() => { + if (!values) { + return {}; + } + const formatted = {}; + const format = (val: string) => { + formatted[val] = formatValue(val, name); + return formatted[val]; + }; + + if (values?.length !== 1) { + const { compare } = new Intl.Collator(locale, { numeric: true }); + values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b))); + } else { + format(values[0]); + } + + return formatted; + }, [formatValue, locale, name, values]); + + const filteredValues = useMemo(() => { + return value + ? values.filter(n => formattedValues[n].toLowerCase().includes(value.toLowerCase())) + : values; + }, [value, formattedValues]); + + const renderFilterValue = value => { + return filters.find(f => f.value === value)?.label; + }; + + const handleAdd = () => { + onChange({ name, type, filter, value }); + }; + + const handleMenuSelect = value => { + setValue(value); + }; + + const showMenu = + [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any) && + !(filteredValues?.length === 1 && filteredValues[0] === formattedValues[value]); + + return ( +
+ + + {allowFilterSelect && ( + setFilter(key)} + > + {({ value, label }) => { + return {label}; + }} + + )} + + setValue(e.target.value)} + /> + {showMenu && ( + + + + )} + + + + +
+ ); +} + +const ResultsMenu = ({ values, type, isLoading, onSelect }) => { + const { formatValue } = useFormat(); + if (isLoading) { + return ; + } + + if (!values?.length) { + return null; + } + + return ( + + {values?.map(value => { + return {safeDecodeURIComponent(formatValue(value, type))}; + })} + + ); +}; diff --git a/src/app/(main)/reports/[reportId]/FieldFilterForm.tsx b/src/app/(main)/reports/[reportId]/FieldFilterForm.tsx deleted file mode 100644 index 932f302b..00000000 --- a/src/app/(main)/reports/[reportId]/FieldFilterForm.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { useState, useMemo } from 'react'; -import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics'; -import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks'; -import styles from './FieldFilterForm.module.css'; - -export interface FieldFilterFormProps { - name: string; - label?: string; - type: string; - values?: any[]; - onSelect?: (key: any) => void; - allowFilterSelect?: boolean; -} - -export default function FieldFilterForm({ - name, - label, - type, - values, - onSelect, - allowFilterSelect = true, -}: FieldFilterFormProps) { - const { formatMessage, labels } = useMessages(); - const [filter, setFilter] = useState('eq'); - const [value, setValue] = useState(); - const { getFilters } = useFilters(); - const { formatValue } = useFormat(); - const { locale } = useLocale(); - const filters = getFilters(type); - const [search, setSearch] = useState(''); - - const formattedValues = useMemo(() => { - const formatted = {}; - const format = (val: string) => { - formatted[val] = formatValue(val, name); - return formatted[val]; - }; - if (values.length !== 1) { - const { compare } = new Intl.Collator(locale, { numeric: true }); - values.sort((a, b) => compare(formatted[a] ?? format(a), formatted[b] ?? format(b))); - } else { - format(values[0]); - } - return formatted; - }, [formatValue, locale, name, values]); - - const filteredValues = useMemo(() => { - return search ? values.filter(n => n.includes(search)) : values; - }, [search, formattedValues]); - - const renderFilterValue = value => { - return filters.find(f => f.value === value)?.label; - }; - - const renderValue = value => { - return formattedValues[value]; - }; - - const handleAdd = () => { - onSelect({ name, type, filter, value }); - }; - - return ( -
- - - {allowFilterSelect && ( - setFilter(key)} - > - {({ value, label }) => { - return {label}; - }} - - )} - setValue(key)} - allowSearch={true} - onSearch={setSearch} - > - {(value: string) => { - return {formattedValues[value]}; - }} - - - - -
- ); -} diff --git a/src/app/(main)/reports/[reportId]/FieldParameters.tsx b/src/app/(main)/reports/[reportId]/FieldParameters.tsx new file mode 100644 index 00000000..ded9dee7 --- /dev/null +++ b/src/app/(main)/reports/[reportId]/FieldParameters.tsx @@ -0,0 +1,63 @@ +import { useFields, useMessages } from 'components/hooks'; +import Icons from 'components/icons'; +import { useContext } from 'react'; +import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics'; +import FieldSelectForm from '../[reportId]/FieldSelectForm'; +import ParameterList from '../[reportId]/ParameterList'; +import PopupForm from '../[reportId]/PopupForm'; +import { ReportContext } from '../[reportId]/Report'; + +export function FieldParameters() { + const { report, updateReport } = useContext(ReportContext); + const { formatMessage, labels } = useMessages(); + const { parameters } = report || {}; + const { fields } = parameters || {}; + const { fields: fieldOptions } = useFields(); + + const handleAdd = (value: { name: any }) => { + if (!fields.find(({ name }) => name === value.name)) { + updateReport({ parameters: { fields: fields.concat(value) } }); + } + }; + + const handleRemove = (name: string) => { + updateReport({ parameters: { fields: fields.filter(f => f.name !== name) } }); + }; + + const AddButton = () => { + return ( + + + + + !fields.find(f => f.name === name))} + onSelect={handleAdd} + showType={false} + /> + + + + ); + }; + + return ( + }> + + {fields.map(({ name }) => { + return ( + handleRemove(name)}> + {fieldOptions.find(f => f.name === name)?.label} + + ); + })} + + + ); +} + +export default FieldParameters; diff --git a/src/app/(main)/reports/[reportId]/FilterParameters.module.css b/src/app/(main)/reports/[reportId]/FilterParameters.module.css new file mode 100644 index 00000000..022c0d7e --- /dev/null +++ b/src/app/(main)/reports/[reportId]/FilterParameters.module.css @@ -0,0 +1,40 @@ +.item { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 10px; + overflow: hidden; +} + +.label { + color: var(--base800); + border: 1px solid var(--base300); + font-weight: 900; + padding: 2px 8px; + border-radius: 5px; + white-space: nowrap; +} + +.filter { + color: var(--blue900); + background-color: var(--blue100); + font-size: 12px; + font-weight: 900; + padding: 2px 8px; + border-radius: 5px; + text-transform: uppercase; + white-space: nowrap; +} + +.value { + color: var(--base900); + background-color: var(--base100); + font-weight: 900; + padding: 2px 8px; + border-radius: 5px; + white-space: nowrap; +} + +.edit { + margin-top: 20px; +} diff --git a/src/app/(main)/reports/[reportId]/FilterParameters.tsx b/src/app/(main)/reports/[reportId]/FilterParameters.tsx new file mode 100644 index 00000000..cd7a555e --- /dev/null +++ b/src/app/(main)/reports/[reportId]/FilterParameters.tsx @@ -0,0 +1,113 @@ +import { useContext } from 'react'; +import { safeDecodeURIComponent } from 'next-basics'; +import { useMessages, useFormat, useFilters, useFields } from 'components/hooks'; +import Icons from 'components/icons'; +import { Button, FormRow, Icon, Popup, PopupTrigger } from 'react-basics'; +import FilterSelectForm from '../[reportId]/FilterSelectForm'; +import ParameterList from '../[reportId]/ParameterList'; +import PopupForm from '../[reportId]/PopupForm'; +import { ReportContext } from './Report'; +import { OPERATORS } from 'lib/constants'; +import FieldFilterEditForm from '../[reportId]/FieldFilterEditForm'; +import styles from './FilterParameters.module.css'; + +export function FilterParameters() { + const { report, updateReport } = useContext(ReportContext); + const { formatMessage, labels } = useMessages(); + const { formatValue } = useFormat(); + const { filterLabels } = useFilters(); + const { parameters } = report || {}; + const { websiteId, filters } = parameters || {}; + const { fields } = useFields(); + + const handleAdd = (value: { name: any }) => { + if (!filters.find(({ name }) => name === value.name)) { + updateReport({ parameters: { filters: filters.concat(value) } }); + } + }; + + const handleRemove = (name: string) => { + updateReport({ parameters: { filters: filters.filter(f => f.name !== name) } }); + }; + + const handleChange = filter => { + updateReport({ + parameters: { + filters: filters.map(f => { + if (filter.name === f.name) { + return filter; + } + return f; + }), + }, + }); + }; + + const AddButton = () => { + return ( + + + + + !filters.find(f => f.name === name))} + onChange={handleAdd} + /> + + + + ); + }; + + return ( + }> + + {filters.map(({ name, filter, value }: { name: string; filter: string; value: string }) => { + const label = fields.find(f => f.name === name)?.label; + const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any); + return ( + handleRemove(name)}> + + + ); + })} + + + ); +} + +const FilterParameter = ({ name, label, filter, value, type = 'string', onChange }) => { + return ( + +
+
{label}
+
{filter}
+
{safeDecodeURIComponent(value)}
+
+ + + + + + + ); +}; + +export default FilterParameters; diff --git a/src/app/(main)/reports/[reportId]/FilterSelectForm.tsx b/src/app/(main)/reports/[reportId]/FilterSelectForm.tsx index 4f9b9264..f43ac5f6 100644 --- a/src/app/(main)/reports/[reportId]/FilterSelectForm.tsx +++ b/src/app/(main)/reports/[reportId]/FilterSelectForm.tsx @@ -1,59 +1,37 @@ import { useState } from 'react'; -import { Loading } from 'react-basics'; -import { subDays } from 'date-fns'; import FieldSelectForm from './FieldSelectForm'; -import FieldFilterForm from './FieldFilterForm'; -import { useApi } from 'components/hooks'; - -function useValues(websiteId: string, type: string) { - const now = Date.now(); - const { get, useQuery } = useApi(); - const { data, error, isLoading } = useQuery({ - queryKey: ['websites:values', websiteId, type], - queryFn: () => - get(`/websites/${websiteId}/values`, { - type, - startAt: +subDays(now, 90), - endAt: now, - }), - enabled: !!(websiteId && type), - }); - - return { data, error, isLoading }; -} +import FieldFilterEditForm from './FieldFilterEditForm'; export interface FilterSelectFormProps { - websiteId: string; - items: any[]; - onSelect?: (key: any) => void; + websiteId?: string; + fields: any[]; + onChange?: (filter: { name: string; type: string; filter: string; value: string }) => void; allowFilterSelect?: boolean; } export default function FilterSelectForm({ websiteId, - items, - onSelect, + fields, + onChange, allowFilterSelect, }: FilterSelectFormProps) { const [field, setField] = useState<{ name: string; label: string; type: string }>(); - const { data, isLoading } = useValues(websiteId, field?.name); if (!field) { - return ; + return ; } - if (isLoading) { - return ; - } + const { name, label, type } = field; return ( - ); } diff --git a/src/app/(main)/reports/[reportId]/ParameterList.module.css b/src/app/(main)/reports/[reportId]/ParameterList.module.css index 0f85fa0f..fca087ca 100644 --- a/src/app/(main)/reports/[reportId]/ParameterList.module.css +++ b/src/app/(main)/reports/[reportId]/ParameterList.module.css @@ -13,9 +13,4 @@ border: 1px solid var(--base400); border-radius: var(--border-radius); box-shadow: 1px 1px 1px var(--base400); - gap: 10px; -} - -.icon { - align-self: center; } diff --git a/src/app/(main)/reports/[reportId]/ParameterList.tsx b/src/app/(main)/reports/[reportId]/ParameterList.tsx index eb1a646a..046e85dc 100644 --- a/src/app/(main)/reports/[reportId]/ParameterList.tsx +++ b/src/app/(main)/reports/[reportId]/ParameterList.tsx @@ -1,40 +1,44 @@ import { ReactNode } from 'react'; -import { Icon, TooltipPopup } from 'react-basics'; +import { Icon } from 'react-basics'; import Icons from 'components/icons'; import Empty from 'components/common/Empty'; import { useMessages } from 'components/hooks'; import styles from './ParameterList.module.css'; export interface ParameterListProps { - items: any[]; - children?: ReactNode | ((item: any) => ReactNode); - onRemove: (index: number, e: any) => void; + children?: ReactNode; } -export function ParameterList({ items = [], children, onRemove }: ParameterListProps) { +export function ParameterList({ children }: ParameterListProps) { const { formatMessage, labels } = useMessages(); return (
- {!items.length && } - {items.map((item, index) => { - return ( -
- {typeof children === 'function' ? children(item) : item} - - - - - -
- ); - })} + {!children && } + {children}
); } +const Item = ({ + children, + onClick, + onRemove, +}: { + children?: ReactNode; + onClick?: () => void; + onRemove?: () => void; +}) => { + return ( +
+ {children} + + + +
+ ); +}; + +ParameterList.Item = Item; + export default ParameterList; diff --git a/src/app/(main)/reports/[reportId]/Report.module.css b/src/app/(main)/reports/[reportId]/Report.module.css index 18153655..be5bb815 100644 --- a/src/app/(main)/reports/[reportId]/Report.module.css +++ b/src/app/(main)/reports/[reportId]/Report.module.css @@ -2,4 +2,5 @@ display: grid; grid-template-rows: max-content 1fr; grid-template-columns: max-content 1fr; + margin-bottom: 60px; } diff --git a/src/app/(main)/reports/event-data/EventDataParameters.tsx b/src/app/(main)/reports/event-data/EventDataParameters.tsx index efa9fb67..adc18274 100644 --- a/src/app/(main)/reports/event-data/EventDataParameters.tsx +++ b/src/app/(main)/reports/event-data/EventDataParameters.tsx @@ -60,10 +60,9 @@ export function EventDataParameters() { } }; - const handleRemove = (group: string, index: number) => { + const handleRemove = (group: string) => { const data = [...parameterData[group]]; - data.splice(index, 1); - updateReport({ parameters: { [group]: data } }); + updateReport({ parameters: { [group]: data.filter(({ name }) => name !== group) } }); }; const AddButton = ({ group, onAdd }) => { @@ -104,29 +103,28 @@ export function EventDataParameters() { label={label} action={} > - handleRemove(group, index)} - > - {({ name, value }) => { + + {parameterData[group].map(({ name, value }) => { return ( -
- {group === REPORT_PARAMETERS.fields && ( - <> -
{name}
-
{value}
- - )} - {group === REPORT_PARAMETERS.filters && ( - <> -
{name}
-
{value[0]}
-
{value[1]}
- - )} -
+ handleRemove(group)}> +
+ {group === REPORT_PARAMETERS.fields && ( + <> +
{name}
+
{value}
+ + )} + {group === REPORT_PARAMETERS.filters && ( + <> +
{name}
+
{value[0]}
+
{value[1]}
+ + )} +
+ ); - }} + })} ); diff --git a/src/app/(main)/reports/funnel/FunnelParameters.tsx b/src/app/(main)/reports/funnel/FunnelParameters.tsx index 6eefbaae..7c4aa845 100644 --- a/src/app/(main)/reports/funnel/FunnelParameters.tsx +++ b/src/app/(main)/reports/funnel/FunnelParameters.tsx @@ -38,11 +38,9 @@ export function FunnelParameters() { updateReport({ parameters: { urls: parameters.urls.concat(url) } }); }; - const handleRemoveUrl = (index: number, e: any) => { - e.stopPropagation(); + const handleRemoveUrl = (url: string) => { const urls = [...parameters.urls]; - urls.splice(index, 1); - updateReport({ parameters: { urls } }); + updateReport({ parameters: { urls: urls.filter(n => n.url !== url) } }); }; const AddUrlButton = () => { @@ -72,10 +70,11 @@ export function FunnelParameters() { }> - handleRemoveUrl(index, e)} - /> + + {urls.map(url => { + return handleRemoveUrl(url)} />; + })} + diff --git a/src/app/(main)/reports/insights/InsightsParameters.module.css b/src/app/(main)/reports/insights/InsightsParameters.module.css deleted file mode 100644 index ba089b9a..00000000 --- a/src/app/(main)/reports/insights/InsightsParameters.module.css +++ /dev/null @@ -1,17 +0,0 @@ -.parameter { - display: flex; - gap: 10px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - min-width: 0; -} - -.op { - font-weight: bold; -} - -.popup { - margin-top: -10px; - margin-inline-start: 30px; -} diff --git a/src/app/(main)/reports/insights/InsightsParameters.tsx b/src/app/(main)/reports/insights/InsightsParameters.tsx index a3e4e72f..7f58de6a 100644 --- a/src/app/(main)/reports/insights/InsightsParameters.tsx +++ b/src/app/(main)/reports/insights/InsightsParameters.tsx @@ -1,136 +1,29 @@ -import { useFilters, useFormat, useMessages } from 'components/hooks'; -import Icons from 'components/icons'; +import { useMessages } from 'components/hooks'; import { useContext } from 'react'; -import { - Form, - FormButtons, - FormRow, - Icon, - Popup, - PopupTrigger, - SubmitButton, - TooltipPopup, -} from 'react-basics'; +import { Form, FormButtons, SubmitButton } from 'react-basics'; import BaseParameters from '../[reportId]/BaseParameters'; -import FieldSelectForm from '../[reportId]/FieldSelectForm'; -import FilterSelectForm from '../[reportId]/FilterSelectForm'; -import ParameterList from '../[reportId]/ParameterList'; -import PopupForm from '../[reportId]/PopupForm'; import { ReportContext } from '../[reportId]/Report'; -import styles from './InsightsParameters.module.css'; +import FieldParameters from '../[reportId]/FieldParameters'; +import FilterParameters from '../[reportId]/FilterParameters'; export function InsightsParameters() { - const { report, runReport, updateReport, isRunning } = useContext(ReportContext); + const { report, runReport, isRunning } = useContext(ReportContext); const { formatMessage, labels } = useMessages(); - const { formatValue } = useFormat(); - const { filterLabels } = useFilters(); const { id, parameters } = report || {}; const { websiteId, dateRange, fields, filters } = parameters || {}; const { startDate, endDate } = dateRange || {}; const parametersSelected = websiteId && startDate && endDate; const queryEnabled = websiteId && dateRange && (fields?.length || filters?.length); - const fieldOptions = [ - { name: 'url', type: 'string', label: formatMessage(labels.url) }, - { name: 'title', type: 'string', label: formatMessage(labels.pageTitle) }, - { name: 'referrer', type: 'string', label: formatMessage(labels.referrer) }, - { name: 'query', type: 'string', label: formatMessage(labels.query) }, - { name: 'browser', type: 'string', label: formatMessage(labels.browser) }, - { name: 'os', type: 'string', label: formatMessage(labels.os) }, - { name: 'device', type: 'string', label: formatMessage(labels.device) }, - { name: 'country', type: 'string', label: formatMessage(labels.country) }, - { name: 'region', type: 'string', label: formatMessage(labels.region) }, - { name: 'city', type: 'string', label: formatMessage(labels.city) }, - ]; - - const parameterGroups = [ - { id: 'fields', label: formatMessage(labels.fields) }, - { id: 'filters', label: formatMessage(labels.filters) }, - ]; - - const parameterData = { - fields, - filters, - }; - const handleSubmit = (values: any) => { runReport(values); }; - const handleAdd = (id: string | number, value: { name: any }) => { - const data = parameterData[id]; - - if (!data.find(({ name }) => name === value.name)) { - updateReport({ parameters: { [id]: data.concat(value) } }); - } - }; - - const handleRemove = (id: string, index: number) => { - const data = [...parameterData[id]]; - data.splice(index, 1); - updateReport({ parameters: { [id]: data } }); - }; - - const AddButton = ({ id, onAdd }) => { - return ( - - - - - - - - - {id === 'fields' && ( - - )} - {id === 'filters' && ( - - )} - - - - ); - }; - return (
- {parametersSelected && - parameterGroups.map(({ id, label }) => { - return ( - }> - handleRemove(id, index)}> - {({ name, filter, value }) => { - return ( -
- {id === 'fields' && ( - <> -
{fieldOptions.find(f => f.name === name)?.label}
- - )} - {id === 'filters' && ( - <> -
{fieldOptions.find(f => f.name === name)?.label}
-
{filterLabels[filter]}
-
{formatValue(value, name)}
- - )} -
- ); - }} - - - ); - })} + {parametersSelected && } + {parametersSelected && } {formatMessage(labels.runQuery)} diff --git a/src/app/(main)/reports/utm/UTMView.module.css b/src/app/(main)/reports/utm/UTMView.module.css index 9792e0f3..fa7cc0b4 100644 --- a/src/app/(main)/reports/utm/UTMView.module.css +++ b/src/app/(main)/reports/utm/UTMView.module.css @@ -1,5 +1,5 @@ .title { - font-size: 18px; + font-size: 24px; line-height: 36px; font-weight: 700; } diff --git a/src/app/(main)/reports/utm/UTMView.tsx b/src/app/(main)/reports/utm/UTMView.tsx index 48fb6497..e59b60eb 100644 --- a/src/app/(main)/reports/utm/UTMView.tsx +++ b/src/app/(main)/reports/utm/UTMView.tsx @@ -7,7 +7,7 @@ import ListTable from 'components/metrics/ListTable'; import styles from './UTMView.module.css'; import { useMessages } from 'components/hooks'; -function toArray(data: { [key: string]: number }) { +function toArray(data: { [key: string]: number } = {}) { return Object.keys(data) .map(key => { return { name: key, value: data[key] }; @@ -26,8 +26,8 @@ export default function UTMView() { return (
- {UTM_PARAMS.map(key => { - const items = toArray(data[key]); + {UTM_PARAMS.map(param => { + const items = toArray(data[param]); const chartData = { labels: items.map(({ name }) => name), datasets: [ @@ -42,9 +42,9 @@ export default function UTMView() { }, 0); return ( -
+
-
{key}
+
{param.replace(/^utm_/, '')}
({ diff --git a/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx index dc6760a6..c733e3e3 100644 --- a/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx +++ b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx @@ -1,4 +1,4 @@ -import { GridColumn, GridTable, Icon, Text } from 'react-basics'; +import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics'; import { useLogin, useMessages } from 'components/hooks'; import Icons from 'components/icons'; import LinkButton from 'components/common/LinkButton'; @@ -14,9 +14,10 @@ export function TeamWebsitesTable({ }) { const { user } = useLogin(); const { formatMessage, labels } = useMessages(); + const breakpoint = useBreakpoint(); return ( - + diff --git a/src/app/(main)/settings/websites/WebsitesTable.module.css b/src/app/(main)/settings/websites/WebsitesTable.module.css deleted file mode 100644 index a26c349f..00000000 --- a/src/app/(main)/settings/websites/WebsitesTable.module.css +++ /dev/null @@ -1,13 +0,0 @@ -@media screen and (max-width: 992px) { - .row { - flex-wrap: wrap; - } - - .header .actions { - display: none; - } - - .actions { - flex-basis: 100%; - } -} diff --git a/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx b/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx index b35b6f1f..6484e383 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx @@ -6,7 +6,7 @@ import WebsiteChart from './WebsiteChart'; import useDashboard from 'store/dashboard'; import WebsiteHeader from './WebsiteHeader'; import { WebsiteMetricsBar } from './WebsiteMetricsBar'; -import { useMessages, useLocale } from 'components/hooks'; +import { useMessages, useLocale, useTeamUrl } from 'components/hooks'; export default function WebsiteChartList({ websites, @@ -19,6 +19,7 @@ export default function WebsiteChartList({ }) { const { formatMessage, labels } = useMessages(); const { websiteOrder } = useDashboard(); + const { renderTeamUrl } = useTeamUrl(); const { dir } = useLocale(); const ordered = useMemo( @@ -35,7 +36,7 @@ export default function WebsiteChartList({ return index < limit ? (
- +
); diff --git a/src/lang/nl-NL.json b/src/lang/nl-NL.json index c3a38584..92be3142 100644 --- a/src/lang/nl-NL.json +++ b/src/lang/nl-NL.json @@ -2,86 +2,86 @@ "label.access-code": "Toegangscode", "label.actions": "Acties", "label.activity-log": "Activiteiten logboek", - "label.add": "Add", - "label.add-description": "Add description", + "label.add": "Toevoegen", + "label.add-description": "Omschrijving toevoegen", "label.add-member": "Add member", "label.add-website": "Website koppelen", "label.administrator": "Beheerder", - "label.after": "After", + "label.after": "Na", "label.all": "Alles", "label.all-time": "Onbeperkt", "label.analytics": "Analytics", - "label.average": "Average", + "label.average": "Gemiddelde", "label.average-visit-time": "Gemiddelde bezoektijd", "label.back": "Terug", - "label.before": "Before", + "label.before": "Voor", "label.bounce-rate": "Bouncepercentage", - "label.breakdown": "Breakdown", + "label.breakdown": "Opsplitsen", "label.browser": "Browser", "label.browsers": "Browsers", "label.cancel": "Annuleren", "label.change-password": "Wachtwoord wijzigen", "label.cities": "Steden", - "label.city": "City", + "label.city": "Stad", "label.clear-all": "Filters wissen", "label.confirm": "Bevestigen", "label.confirm-password": "Wachtwoord bevestigen", - "label.contains": "Contains", + "label.contains": "Bevat", "label.continue": "Doorgaan", "label.countries": "Landen", - "label.country": "Country", - "label.create": "Create", - "label.create-report": "Create report", + "label.country": "Land", + "label.create": "Aanmaken", + "label.create-report": "Rapport aanmaken", "label.create-team": "Team aanmaken", "label.create-user": "Gebruiker maken", "label.created": "Gemaakt", - "label.created-by": "Created By", + "label.created-by": "Gemaakt Door", "label.current-password": "Huidig wachtwoord", "label.custom-range": "Aangepast bereik", "label.dashboard": "Overzicht", "label.data": "Gegevens", - "label.date": "Date", + "label.date": "Datum", "label.date-range": "Datumbereik", - "label.day": "Day", + "label.day": "Dag", "label.default-date-range": "Standaard bereik", "label.delete": "Verwijderen", - "label.delete-report": "Delete report", + "label.delete-report": "Rapport verwijderen", "label.delete-team": "Team verwijderen", "label.delete-user": "Verwijder gebruiker", "label.delete-website": "Website verwijderen", - "label.description": "Description", + "label.description": "Omschrijving", "label.desktop": "Computer", "label.details": "Informatie", - "label.device": "Device", + "label.device": "Apparaat", "label.devices": "Apparaten", "label.dismiss": "Negeren", - "label.does-not-contain": "Does not contain", + "label.does-not-contain": "Bevat geen", "label.domain": "Domein", - "label.dropoff": "Dropoff", + "label.dropoff": "Uitval", "label.edit": "Bewerken", "label.edit-dashboard": "Dashboard aanpassen", - "label.edit-member": "Edit member", + "label.edit-member": "Gebruiker aanpassen", "label.enable-share-url": "Sta delen via openbare URL toe", - "label.event": "Event", - "label.event-data": "Event data", + "label.event": "Gebeurtenis", + "label.event-data": "Datum gebeurtenis", "label.events": "Gebeurtenissen", - "label.false": "False", - "label.field": "Field", - "label.fields": "Fields", + "label.false": "Onwaar", + "label.field": "Veld", + "label.fields": "Velden", "label.filter": "Filter", "label.filter-combined": "Gecombineerd", "label.filter-raw": "Ruw", "label.filters": "Filters", "label.funnel": "Funnel", - "label.funnel-description": "Understand the conversion and drop-off rate of users.", - "label.greater-than": "Greater than", - "label.greater-than-equals": "Greater than or equals", - "label.insights": "Insights", - "label.insights-description": "Dive deeper into your data by using segments and filters.", + "label.funnel-description": "Ontdek de conversie- en uitvalpercentages van gebruikers.", + "label.greater-than": "Groter dan", + "label.greater-than-equals": "Groter of gelijk aan", + "label.insights": "Inzichten", + "label.insights-description": "Verken je gegevens verder door segmenten en filters te gebruiken.", "label.is": "Is", - "label.is-not": "Is not", - "label.is-not-set": "Is not set", - "label.is-set": "Is set", + "label.is-not": "Is niet", + "label.is-not-set": "Is niet ingesteld", + "label.is-set": "Is ingesteld", "label.join": "Lid worden", "label.join-team": "Word lid van een team", "label.language": "Taal", @@ -91,30 +91,30 @@ "label.last-hours": "Laatste {x} uur", "label.leave": "Verlaten", "label.leave-team": "Verlaat team", - "label.less-than": "Less than", - "label.less-than-equals": "Less than or equals", + "label.less-than": "Minder dan", + "label.less-than-equals": "Minder of gelijk aan", "label.login": "Inloggen", "label.logout": "Uitloggen", - "label.manage": "Manage", + "label.manage": "Beheren", "label.max": "Max", - "label.member": "Member", + "label.member": "Gebruiker", "label.members": "Gebruikers", "label.min": "Min", "label.mobile": "Mobiel", "label.more": "Toon meer", - "label.my-account": "My account", - "label.my-websites": "My websites", + "label.my-account": "Mijn profiel", + "label.my-websites": "Mijn websites", "label.name": "Naam", "label.new-password": "Nieuw wachtwoord", "label.none": "Geen", "label.number-of-records": "{x} {x, plural, one {record} other {records}}", "label.ok": "OK", "label.os": "OS", - "label.overview": "Overview", + "label.overview": "Overzicht", "label.owner": "Eigenaar", - "label.page-of": "Page {current} of {total}", + "label.page-of": "Pagina {current} van {total}", "label.page-views": "Paginaweergaven", - "label.pageTitle": "Page title", + "label.pageTitle": "Pagina titel", "label.pages": "Pagina's", "label.password": "Wachtwoord", "label.powered-by": "mogelijk gemaakt door {name}", @@ -127,37 +127,37 @@ "label.referrers": "Verwijzers", "label.refresh": "Vernieuwen", "label.regenerate": "Opnieuw genereren", - "label.region": "Region", + "label.region": "Regio", "label.regions": "Regio's", "label.remove": "Verwijderen", - "label.remove-member": "Remove member", - "label.reports": "Reports", + "label.remove-member": "Gebruiker verwijderen", + "label.reports": "Rapporten", "label.required": "Verplicht", "label.reset": "Opnieuw instellen", "label.reset-website": "Statistieken opnieuw instellen", - "label.retention": "Retention", - "label.retention-description": "Measure your website stickiness by tracking how often users return.", + "label.retention": "Retentie", + "label.retention-description": "Meet de retentie van je website door door bij te houden hoe vaak gebruikers terugkeren.", "label.role": "Gebruikersrol", - "label.run-query": "Run query", + "label.run-query": "Query uitvoeren", "label.save": "Opslaan", "label.screens": "Schermen", - "label.search": "Search", - "label.select": "Select", - "label.select-date": "Select date", - "label.select-role": "Select role", + "label.search": "Zoeken", + "label.select": "Selecteer", + "label.select-date": "Datum selecteren", + "label.select-role": "Rol selecteren", "label.select-website": "Website selecteren", "label.sessions": "Sessies", "label.settings": "Instellingen", "label.share-url": "URL delen", "label.single-day": "Enkele dag", - "label.sum": "Sum", + "label.sum": "Som", "label.tablet": "Tablet", "label.team": "Team", "label.team-id": "Team ID", "label.team-member": "Teamlid", - "label.team-name": "Team name", + "label.team-name": "Teamnaam", "label.team-owner": "Teameigenaar", - "label.team-view-only": "Team view only", + "label.team-view-only": "Team alleen lezen", "label.team-websites": "Team websites", "label.teams": "Teams", "label.theme": "Thema", @@ -168,26 +168,26 @@ "label.title": "Titel", "label.today": "Vandaag", "label.toggle-charts": "Grafieken tonen/verbergen", - "label.total": "Total", - "label.total-records": "Total records", + "label.total": "Totaal", + "label.total-records": "Totaal records", "label.tracking-code": "Volgcode", "label.transfer": "Transfer", "label.transfer-website": "Transfer website", - "label.true": "True", + "label.true": "Waar", "label.type": "Type", "label.unique": "Unique", "label.unique-visitors": "Unieke bezoekers", "label.unknown": "Onbekend", - "label.untitled": "Untitled", + "label.untitled": "Ongetiteld", "label.url": "URL", - "label.urls": "URLs", + "label.urls": "URL's", "label.user": "Gebruiker", "label.username": "Gebruikersnaam", "label.users": "Gebruikers", - "label.value": "Value", + "label.value": "Waarde", "label.view": "Weergave", "label.view-details": "Meer details", - "label.view-only": "View only", + "label.view-only": "Alleen inzien", "label.views": "Weergaven", "label.visitors": "Bezoekers", "label.website": "Website", @@ -195,31 +195,31 @@ "label.websites": "Websites", "label.window": "Window", "label.yesterday": "Gisteren", - "message.action-confirmation": "Type {confirmation} in the box below to confirm.", + "message.action-confirmation": "Typ {confirmation} in het veld hieronder om te bevestigen.", "message.active-users": "{x} actieve {x, plural, one {bezoeker} other {bezoekers}}", "message.confirm-delete": "Weet je zeker dat je {target} wilt verwijderen?", "message.confirm-leave": "Weet je zeker dat je {target} wilt verlaten?", - "message.confirm-remove": "Are you sure you want to remove {target}?", + "message.confirm-remove": "Weet je zeker dat je {target} wilt verwijderen?", "message.confirm-reset": "Weet je zeker dat je de statistieken van {target} opnieuw wilt instellen?", - "message.delete-team-warning": "Deleting a team will also delete all team websites.", - "message.delete-website-warning": "Alle verwante gegezens zullen ook verwijderd worden.", + "message.delete-team-warning": "Als een team wordt verwijderd, worden ook alle websites van dat team verwijderd.", + "message.delete-website-warning": "Alle verwante gegevens zullen ook verwijderd worden.", "message.error": "Er is iets misgegaan.", "message.event-log": "{event} op {url}", "message.go-to-settings": "Naar instellingen", "message.incorrect-username-password": "Incorrecte gebruikersnaam/wachtwoord.", "message.invalid-domain": "Ongeldig domein", "message.min-password-length": "Minimale lengte van {n} tekens", - "message.new-version-available": "A new version of Umami {version} is available!", + "message.new-version-available": "Een nieuwe versie van Umami {version} is beschikbaar!", "message.no-data-available": "Geen gegevens beschikbaar.", - "message.no-event-data": "No event data is available.", + "message.no-event-data": "Geen gegevens over de gebeurtenis beschikbaar.", "message.no-match-password": "Wachtwoorden komen niet overeen", - "message.no-results-found": "No results were found.", + "message.no-results-found": "Geen resultaten gevonden.", "message.no-team-websites": "Er zijn geen websites gekoppeld aan dit team.", "message.no-teams": "Er zijn nog geen teams aangemaakt.", "message.no-users": "Er zijn geen gebruikers.", "message.no-websites-configured": "Je hebt geen websites ingesteld.", "message.page-not-found": "Pagina niet gevonden.", - "message.reset-website": "To reset this website, type {confirmation} in the box below to confirm.", + "message.reset-website": "Typ {confirmation} in het veld hieronder om te bevestigen dat je de website wilt resetten.", "message.reset-website-warning": "Alle bijhorende statistieken van deze website worden verwijderd, maar jouw volgcode blijft gelden.", "message.saved": "Opslaan succesvol.", "message.share-url": "Met deze URL kan {target} openbaar gedeeld worden.", @@ -227,12 +227,12 @@ "message.team-not-found": "Team niet gevonden.", "message.team-websites-info": "Websites kunnen door iedereen in het team worden bekeken.", "message.tracking-code": "Volgcode", - "message.transfer-team-website-to-user": "Transfer this website to your account?", - "message.transfer-user-website-to-team": "Select the team to transfer this website to.", - "message.transfer-website": "Transfer website ownership to your account or another team.", - "message.triggered-event": "Triggered event", - "message.user-deleted": "Gebruiker verwijderd.", - "message.viewed-page": "Viewed page", + "message.transfer-team-website-to-user": "Deze website toevoegen aan je account?", + "message.transfer-user-website-to-team": "Selecteer het team om deze website aan toe te voegen.", + "message.transfer-website": "Draag het eigenaarschap van de website over naar jouw account, of een ander team.", + "message.triggered-event": "Getriggerde gebeurtenis", + "message.user-deleted": "Gebruiker verwijderd", + "message.viewed-page": "Bekeken pagina", "message.visitor-log": "Bezoeker uit {country} met {browser} op een {os} {device}", - "message.visitors-dropped-off": "Visitors dropped off" + "message.visitors-dropped-off": "Afgehaakte bezoekers" } diff --git a/src/lib/clickhouse.ts b/src/lib/clickhouse.ts index 6206f2f0..4be15db2 100644 --- a/src/lib/clickhouse.ts +++ b/src/lib/clickhouse.ts @@ -69,6 +69,8 @@ function mapFilter(column: string, filter: string, name: string, type: string = return `${column} != {${name}:${type}}`; case OPERATORS.contains: return `positionCaseInsensitive(${column}, {${name}:${type}}) > 0`; + case OPERATORS.doesNotContain: + return `positionCaseInsensitive(${column}, {${name}:${type}}) = 0`; default: return ''; } diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 78e7a71e..6b042603 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -228,7 +228,7 @@ export const URL_LENGTH = 500; export const PAGE_TITLE_LENGTH = 500; export const EVENT_NAME_LENGTH = 50; -export const UTM_PARAMS = ['source', 'medium', 'campaign', 'term', 'content']; +export const UTM_PARAMS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']; export const DESKTOP_OS = [ 'BeOS', diff --git a/src/lib/date.ts b/src/lib/date.ts index 3998170e..6348e04b 100644 --- a/src/lib/date.ts +++ b/src/lib/date.ts @@ -151,105 +151,50 @@ export function parseDateRange(value: string | object, locale = 'en-US'): DateRa const dateLocale = getDateLocale(locale); const { num, unit } = parseDateValue(value); - if (num === 1) { - switch (unit) { - case 'day': - return { - startDate: startOfDay(now), - endDate: endOfDay(now), - unit: 'hour', - num: +num, - offset: 0, - value, - }; - case 'week': - return { - startDate: startOfWeek(now, { locale: dateLocale }), - endDate: endOfWeek(now, { locale: dateLocale }), - unit: 'day', - num: +num, - offset: 0, - value, - }; - case 'month': - return { - startDate: startOfMonth(now), - endDate: endOfMonth(now), - unit: 'day', - num: +num, - offset: 0, - value, - }; - case 'year': - return { - startDate: startOfYear(now), - endDate: endOfYear(now), - unit: 'month', - num: +num, - offset: 0, - value, - }; - } - } - - if (num === -1) { - switch (unit) { - case 'day': - return { - startDate: subDays(startOfDay(now), 1), - endDate: subDays(endOfDay(now), 1), - unit: 'hour', - num: +num, - offset: 0, - value, - }; - case 'week': - return { - startDate: subDays(startOfWeek(now, { locale: dateLocale }), 7), - endDate: subDays(endOfWeek(now, { locale: dateLocale }), 1), - unit: 'day', - num: +num, - offset: 0, - value, - }; - case 'month': - return { - startDate: subMonths(startOfMonth(now), 1), - endDate: subMonths(endOfMonth(now), 1), - unit: 'day', - num: +num, - offset: 0, - value, - }; - case 'year': - return { - startDate: subYears(startOfYear(now), 1), - endDate: subYears(endOfYear(now), 1), - unit: 'month', - num: +num, - offset: 0, - value, - }; - } - } - switch (unit) { - case 'day': + case 'hour': return { - startDate: subDays(startOfDay(now), +num - 1), - endDate: endOfDay(now), - num: +num, + startDate: subHours(startOfHour(now), num), + endDate: endOfHour(now), offset: 0, + num: num || 1, unit, value, }; - case 'hour': + case 'day': return { - startDate: subHours(startOfHour(now), +num - 1), - endDate: endOfHour(now), - num: +num, + startDate: subDays(startOfDay(now), num), + endDate: subDays(endOfDay(now), num ? 1 : 0), + unit: num ? 'day' : 'hour', offset: 0, - unit, + num: num || 1, + value, + }; + case 'week': + return { + startDate: subWeeks(startOfWeek(now, { locale: dateLocale }), num), + endDate: subWeeks(endOfWeek(now, { locale: dateLocale }), num), + unit: 'day', + offset: 0, + num: num || 1, + value, + }; + case 'month': + return { + startDate: subMonths(startOfMonth(now), num), + endDate: subMonths(endOfMonth(now), num ? 1 : 0), + unit: num ? 'month' : 'day', + offset: 0, + num: num || 1, + value, + }; + case 'year': + return { + startDate: subYears(startOfYear(now), num), + endDate: subYears(endOfYear(now), num), + unit: 'month', + offset: 0, + num: num || 1, value, }; } diff --git a/src/lib/prisma.ts b/src/lib/prisma.ts index 4230cea6..9352eaea 100644 --- a/src/lib/prisma.ts +++ b/src/lib/prisma.ts @@ -100,6 +100,8 @@ function mapFilter(column: string, filter: string, name: string, type = 'varchar return `${column} != {{${name}::${type}}}`; case OPERATORS.contains: return `${column} like {{${name}::${type}}}`; + case OPERATORS.doesNotContain: + return `${column} not like {{${name}::${type}}}`; default: return ''; } diff --git a/src/queries/analytics/reports/getUTM.ts b/src/queries/analytics/reports/getUTM.ts index 118caa23..f30c1c8a 100644 --- a/src/queries/analytics/reports/getUTM.ts +++ b/src/queries/analytics/reports/getUTM.ts @@ -1,6 +1,7 @@ import clickhouse from 'lib/clickhouse'; import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db'; import prisma from 'lib/prisma'; +import { safeDecodeURIComponent } from 'next-basics'; export async function getUTM( ...args: [ @@ -44,6 +45,7 @@ async function relationalQuery( where website_id = {{websiteId::uuid}} and created_at between {{startDate}} and {{endDate}} and url_query is not null + and event_type = 1 group by 1 `, { @@ -82,6 +84,7 @@ async function clickhouseQuery( where website_id = {websiteId:UUID} and created_at between {startDate:DateTime64} and {endDate:DateTime64} and url_query != '' + and event_type = 1 group by 1 `, { @@ -92,29 +95,27 @@ async function clickhouseQuery( ).then(result => parseParameters(result as any[])); } -function parseParameters(result: any[]) { - return Object.values(result).reduce((data, { url_query, num }) => { - const params = url_query.split('&').map(n => decodeURIComponent(n)); +function parseParameters(data: any[]) { + return data.reduce((obj, { url_query, num }) => { + try { + const searchParams = new URLSearchParams(url_query); - for (const param of params) { - const [key, value] = param.split('='); - - const match = key.match(/^utm_(\w+)$/); - - if (match) { - const group = match[1]; - const name = decodeURIComponent(value); - - if (!data[group]) { - data[group] = { [name]: +num }; - } else if (!data[group][name]) { - data[group][name] = +num; - } else { - data[group][name] += +num; + for (const [key, value] of searchParams) { + if (key.match(/^utm_(\w+)$/)) { + const name = safeDecodeURIComponent(value); + if (!obj[key]) { + obj[key] = { [name]: +num }; + } else if (!obj[key][name]) { + obj[key][name] = +num; + } else { + obj[key][name] += +num; + } } } + } catch { + // Ignore } - return data; + return obj; }, {}); } diff --git a/yarn.lock b/yarn.lock index 55199fe0..a6ccbe27 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2718,17 +2718,17 @@ dependencies: tslib "^2.4.0" -"@tanstack/query-core@5.25.0": - version "5.25.0" - resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.25.0.tgz#e08ed0a9fad34c8005d1a282e57280031ac50cdc" - integrity sha512-vlobHP64HTuSE68lWF1mEhwSRC5Q7gaT+a/m9S+ItuN+ruSOxe1rFnR9j0ACWQ314BPhBEVKfBQ6mHL0OWfdbQ== +"@tanstack/query-core@5.28.6": + version "5.28.6" + resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.28.6.tgz#a3bdb108f9f8d4e2ba3163068dbe6ff55b905a81" + integrity sha512-hnhotV+DnQtvtR3jPvbQMPNMW4KEK0J4k7c609zJ8muiNknm+yoDyMHmxTWM5ZnlZpsz0zOxYFr+mzRJNHWJsA== -"@tanstack/react-query@^5.12.2": - version "5.25.0" - resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.25.0.tgz#f4dac794cf10dd956aa56dbbdf67049a5ba2669d" - integrity sha512-u+n5R7mLO7RmeiIonpaCRVXNRWtZEef/aVZ/XGWRPa7trBIvGtzlfo0Ah7ZtnTYfrKEVwnZ/tzRCBcoiqJ/tFw== +"@tanstack/react-query@^5.28.6": + version "5.28.6" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.28.6.tgz#0d52b0a98a1d842debf9c65496e20a9981a23bc4" + integrity sha512-/DdYuDBSsA21Qbcder1R8Cr/3Nx0ZnA2lgtqKsLMvov8wL4+g0HBz/gWYZPlIsof7iyfQafyhg4wUVUsS3vWZw== dependencies: - "@tanstack/query-core" "5.25.0" + "@tanstack/query-core" "5.28.6" "@trysound/sax@0.2.0": version "0.2.0" @@ -5829,9 +5829,9 @@ flatted@^3.2.9: integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw== follow-redirects@^1.15.2: - version "1.15.4" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf" - integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw== + version "1.15.6" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b" + integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA== for-each@^0.3.3: version "0.3.3" @@ -10354,7 +10354,16 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -10430,7 +10439,14 @@ string_decoder@^1.1.1: dependencies: safe-buffer "~5.2.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -11024,10 +11040,10 @@ typescript@^4.0, typescript@^4.5: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== -typescript@^5.1.6: - version "5.4.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372" - integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ== +typescript@^5.4.3: + version "5.4.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.3.tgz#5c6fedd4c87bee01cd7a528a30145521f8e0feff" + integrity sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg== ufo@^1.0.0, ufo@^1.2.0, ufo@^1.3.0, ufo@^1.3.1, ufo@^1.3.2: version "1.3.2" @@ -11333,7 +11349,7 @@ which@^2.0.1: dependencies: isexe "^2.0.0" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -11351,6 +11367,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.0.1, wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"