Merge pull request #2 from umami-software/dev

Dev

src/app/(main)/reports/[reportId]/FieldFilterForm.module.css

@@ -1,7 +1,7 @@
 .popup {
   display: flex;
   max-width: 300px;
-  max-height: 400px;
+  max-height: 210px;
   overflow-x: hidden;
 }
 
@@ -19,6 +19,6 @@
   min-width: 180px;
 }
 
-.menu {
+.text {
-  min-width: 200px;
+  min-width: 180px;
 }

src/app/(main)/reports/[reportId]/FieldFilterForm.tsx

@@ -1,6 +1,19 @@
 import { useState, useMemo } from 'react';
-import { Form, FormRow, Item, Flexbox, Dropdown, Button } from 'react-basics';
+import {
+  Form,
+  FormRow,
+  Item,
+  Flexbox,
+  Dropdown,
+  Button,
+  TextField,
+  Menu,
+  Popup,
+  PopupTrigger,
+} from 'react-basics';
 import { useMessages, useFilters, useFormat, useLocale } from 'components/hooks';
+import { safeDecodeURIComponent } from 'next-basics';
+import { OPERATORS } from 'lib/constants';
 import styles from './FieldFilterForm.module.css';
 
 export interface FieldFilterFormProps {
@@ -22,12 +35,11 @@ export default function FieldFilterForm({
 }: FieldFilterFormProps) {
   const { formatMessage, labels } = useMessages();
   const [filter, setFilter] = useState('eq');
-  const [value, setValue] = useState();
+  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 = {};
@@ -45,21 +57,25 @@ export default function FieldFilterForm({
   }, [formatValue, locale, name, values]);
 
   const filteredValues = useMemo(() => {
-    return search ? values.filter(n => n.includes(search)) : values;
+    return value ? values.filter(n => n.includes(value)) : values;
-  }, [search, formattedValues]);
+  }, [value, 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 });
   };
 
+  const handleMenuSelect = value => {
+    setValue(value);
+  };
+
+  const showMenu =
+    [OPERATORS.equals, OPERATORS.notEquals].includes(filter as any) &&
+    !(filteredValues.length === 1 && filteredValues[0] === value);
+
   return (
     <Form>
       <FormRow label={label} className={styles.filter}>
@@ -77,21 +93,24 @@ export default function FieldFilterForm({
               }}
             </Dropdown>
           )}
-          <Dropdown
+          <PopupTrigger>
-            className={styles.dropdown}
+            <TextField
-            popupProps={{ className: styles.popup }}
+              className={styles.text}
-            menuProps={{ className: styles.menu }}
+              value={decodeURIComponent(value)}
-            items={filteredValues}
+              onChange={e => setValue(e.target.value)}
-            value={value}
+            />
-            renderValue={renderValue}
+            {showMenu && (
-            onChange={(key: any) => setValue(key)}
+              <Popup className={styles.popup} alignment="end">
-            allowSearch={true}
+                {filteredValues.length > 0 && (
-            onSearch={setSearch}
+                  <Menu variant="popup" onSelect={handleMenuSelect}>
-          >
+                    {filteredValues.map(value => {
-            {(value: string) => {
+                      return <Item key={value}>{safeDecodeURIComponent(value)}</Item>;
-              return <Item key={value}>{formattedValues[value]}</Item>;
+                    })}
-            }}
+                  </Menu>
-          </Dropdown>
+                )}
+              </Popup>
+            )}
+          </PopupTrigger>
         </Flexbox>
         <Button variant="primary" onClick={handleAdd} disabled={!filter || !value}>
           {formatMessage(labels.add)}

src/app/(main)/reports/[reportId]/FilterSelectForm.tsx

@@ -24,14 +24,14 @@ function useValues(websiteId: string, type: string) {
 
 export interface FilterSelectFormProps {
   websiteId: string;
-  items: any[];
+  fields: any[];
   onSelect?: (key: any) => void;
   allowFilterSelect?: boolean;
 }
 
 export default function FilterSelectForm({
   websiteId,
-  items,
+  fields,
   onSelect,
   allowFilterSelect,
 }: FilterSelectFormProps) {
@@ -39,7 +39,7 @@ export default function FilterSelectForm({
   const { data, isLoading } = useValues(websiteId, field?.name);
 
   if (!field) {
-    return <FieldSelectForm fields={items} onSelect={setField} showType={false} />;
+    return <FieldSelectForm fields={fields} onSelect={setField} showType={false} />;
   }
 
   if (isLoading) {

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;
 }

src/app/(main)/reports/[reportId]/ParameterList.tsx

@@ -1,40 +1,36 @@
 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;
-  children?: ReactNode | ((item: any) => ReactNode);
-  onRemove: (index: number, e: any) => void;
 }
 
-export function ParameterList({ items = [], children, onRemove }: ParameterListProps) {
+export function ParameterList({ children }: ParameterListProps) {
   const { formatMessage, labels } = useMessages();
 
   return (
     <div className={styles.list}>
-      {!items.length && <Empty message={formatMessage(labels.none)} />}
+      {!children && <Empty message={formatMessage(labels.none)} />}
-      {items.map((item, index) => {
+      {children}
-        return (
-          <div key={index} className={styles.item}>
-            {typeof children === 'function' ? children(item) : item}
-            <TooltipPopup
-              className={styles.icon}
-              label={formatMessage(labels.remove)}
-              position="right"
-            >
-              <Icon onClick={onRemove.bind(null, index)}>
-                <Icons.Close />
-              </Icon>
-            </TooltipPopup>
-          </div>
-        );
-      })}
     </div>
   );
 }
 
+const Item = ({ children, onRemove }: { children?: ReactNode; onRemove?: () => void }) => {
+  return (
+    <div className={styles.item}>
+      {children}
+      <Icon onClick={onRemove}>
+        <Icons.Close />
+      </Icon>
+    </div>
+  );
+};
+
+ParameterList.Item = Item;
+
 export default ParameterList;

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;
 }

src/app/(main)/reports/insights/InsightsFieldParameters.tsx

@@ -0,0 +1,75 @@
+import { 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 InsightsFieldParameters() {
+  const { report, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { parameters } = report || {};
+  const { fields } = parameters || {};
+
+  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 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 (
+      <PopupTrigger>
+        <Button size="sm">
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </Button>
+        <Popup position="bottom" alignment="start">
+          <PopupForm>
+            <FieldSelectForm
+              fields={fieldOptions.filter(({ name }) => !fields.find(f => f.name === name))}
+              onSelect={handleAdd}
+              showType={false}
+            />
+          </PopupForm>
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
+  return (
+    <FormRow label={formatMessage(labels.fields)} action={<AddButton />}>
+      <ParameterList>
+        {fields.map(({ name }) => {
+          return (
+            <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
+              {fieldOptions.find(f => f.name === name)?.label}
+            </ParameterList.Item>
+          );
+        })}
+      </ParameterList>
+    </FormRow>
+  );
+}
+
+export default InsightsFieldParameters;

src/app/(main)/reports/insights/InsightsFilterParameters.module.css

@@ -0,0 +1,36 @@
+.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;
+}

src/app/(main)/reports/insights/InsightsFilterParameters.tsx

@@ -0,0 +1,88 @@
+import { useMessages, useFormat, useFilters } from 'components/hooks';
+import Icons from 'components/icons';
+import { useContext } from 'react';
+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 '../[reportId]/Report';
+import styles from './InsightsFilterParameters.module.css';
+import { safeDecodeURIComponent } from 'next-basics';
+import { OPERATORS } from 'lib/constants';
+
+export function InsightsFilterParameters() {
+  const { report, updateReport } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { formatValue } = useFormat();
+  const { filterLabels } = useFilters();
+  const { parameters } = report || {};
+  const { websiteId, filters } = parameters || {};
+
+  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 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 AddButton = () => {
+    return (
+      <PopupTrigger>
+        <Button size="sm">
+          <Icon>
+            <Icons.Plus />
+          </Icon>
+        </Button>
+        <Popup position="bottom" alignment="start">
+          <PopupForm>
+            <FilterSelectForm
+              websiteId={websiteId}
+              fields={fieldOptions.filter(({ name }) => !filters.find(f => f.name === name))}
+              onSelect={handleAdd}
+            />
+          </PopupForm>
+        </Popup>
+      </PopupTrigger>
+    );
+  };
+
+  return (
+    <FormRow label={formatMessage(labels.filters)} action={<AddButton />}>
+      <ParameterList>
+        {filters.map(({ name, filter, value }) => {
+          const label = fieldOptions.find(f => f.name === name)?.label;
+          const isEquals = [OPERATORS.equals, OPERATORS.notEquals].includes(filter);
+          return (
+            <ParameterList.Item key={name} onRemove={() => handleRemove(name)}>
+              <div className={styles.item}>
+                <div className={styles.label}>{label}</div>
+                <div className={styles.filter}>{filterLabels[filter]}</div>
+                <div className={styles.value}>
+                  {safeDecodeURIComponent(isEquals ? formatValue(value, name) : value)}
+                </div>
+              </div>
+            </ParameterList.Item>
+          );
+        })}
+      </ParameterList>
+    </FormRow>
+  );
+}
+
+export default InsightsFilterParameters;

src/app/(main)/reports/insights/InsightsParameters.module.css

@@ -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;
-}

src/app/(main)/reports/insights/InsightsParameters.tsx

@@ -1,136 +1,29 @@
-import { useFilters, useFormat, useMessages } from 'components/hooks';
+import { useMessages } from 'components/hooks';
-import Icons from 'components/icons';
 import { useContext } from 'react';
-import {
+import { Form, FormButtons, SubmitButton } from 'react-basics';
-  Form,
-  FormButtons,
-  FormRow,
-  Icon,
-  Popup,
-  PopupTrigger,
-  SubmitButton,
-  TooltipPopup,
-} 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 InsightsFieldParameters from './InsightsFieldParameters';
+import InsightsFilterParameters from './InsightsFilterParameters';
 
 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 (
-      <PopupTrigger>
-        <TooltipPopup label={formatMessage(labels.add)} position="top">
-          <Icon>
-            <Icons.Plus />
-          </Icon>
-        </TooltipPopup>
-        <Popup position="bottom" alignment="start" className={styles.popup}>
-          <PopupForm>
-            {id === 'fields' && (
-              <FieldSelectForm
-                fields={fieldOptions}
-                onSelect={onAdd.bind(null, id)}
-                showType={false}
-              />
-            )}
-            {id === 'filters' && (
-              <FilterSelectForm
-                websiteId={websiteId}
-                items={fieldOptions}
-                onSelect={onAdd.bind(null, id)}
-              />
-            )}
-          </PopupForm>
-        </Popup>
-      </PopupTrigger>
-    );
-  };
-
   return (
     <Form values={parameters} onSubmit={handleSubmit}>
       <BaseParameters allowWebsiteSelect={!id} />
-      {parametersSelected &&
+      {parametersSelected && <InsightsFieldParameters />}
-        parameterGroups.map(({ id, label }) => {
+      {parametersSelected && <InsightsFilterParameters />}
-          return (
-            <FormRow key={label} label={label} action={<AddButton id={id} onAdd={handleAdd} />}>
-              <ParameterList items={parameterData[id]} onRemove={index => handleRemove(id, index)}>
-                {({ name, filter, value }) => {
-                  return (
-                    <div className={styles.parameter}>
-                      {id === 'fields' && (
-                        <>
-                          <div>{fieldOptions.find(f => f.name === name)?.label}</div>
-                        </>
-                      )}
-                      {id === 'filters' && (
-                        <>
-                          <div>{fieldOptions.find(f => f.name === name)?.label}</div>
-                          <div className={styles.op}>{filterLabels[filter]}</div>
-                          <div>{formatValue(value, name)}</div>
-                        </>
-                      )}
-                    </div>
-                  );
-                }}
-              </ParameterList>
-            </FormRow>
-          );
-        })}
       <FormButtons>
         <SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
           {formatMessage(labels.runQuery)}

src/components/common/Breadcrumb.module.css

@@ -1,5 +1,5 @@
 .bar {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--base600);

src/components/hooks/useFilters.ts

@@ -22,7 +22,7 @@ export function useFilters() {
   };
 
   const typeFilters = {
-    string: [OPERATORS.equals, OPERATORS.notEquals],
+    string: [OPERATORS.equals, OPERATORS.notEquals, OPERATORS.contains, OPERATORS.doesNotContain],
     array: [OPERATORS.contains, OPERATORS.doesNotContain],
     boolean: [OPERATORS.true, OPERATORS.false],
     number: [

src/components/input/DateFilter.tsx

@@ -59,7 +59,15 @@ export function DateFilter({
       label: formatMessage(labels.lastDays, { x: 90 }),
       value: '90day',
     },
-    { label: formatMessage(labels.thisYear), value: '0year' },
+    { label: formatMessage(labels.thisYear), value: '0year', divider: true },
+    {
+      label: formatMessage(labels.lastMonths, { x: 6 }),
+      value: '6month',
+    },
+    {
+      label: formatMessage(labels.lastMonths, { x: 12 }),
+      value: '12month',
+    },
     showAllTime && {
       label: formatMessage(labels.allTime),
       value: 'all',

src/components/messages.ts

@@ -110,6 +110,7 @@ export const labels = defineMessages({
   yesterday: { id: 'label.yesterday', defaultMessage: 'Yesterday' },
   thisWeek: { id: 'label.this-week', defaultMessage: 'This week' },
   lastDays: { id: 'label.last-days', defaultMessage: 'Last {x} days' },
+  lastMonths: { id: 'label.last-months', defaultMessage: 'Last {x} months' },
   thisMonth: { id: 'label.this-month', defaultMessage: 'This month' },
   thisYear: { id: 'label.this-year', defaultMessage: 'This year' },
   allTime: { id: 'label.all-time', defaultMessage: 'All time' },

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": "Toevoegen",
-  "label.add-description": "Add description",
+  "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.country": "Land",
-  "label.create": "Create",
+  "label.create": "Aanmaken",
-  "label.create-report": "Create report",
+  "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": "Gebeurtenis",
-  "label.event-data": "Event data",
+  "label.event-data": "Datum gebeurtenis",
   "label.events": "Gebeurtenissen",
-  "label.false": "False",
+  "label.false": "Onwaar",
-  "label.field": "Field",
+  "label.field": "Veld",
-  "label.fields": "Fields",
+  "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.funnel-description": "Ontdek de conversie- en uitvalpercentages van gebruikers.",
-  "label.greater-than": "Greater than",
+  "label.greater-than": "Groter dan",
-  "label.greater-than-equals": "Greater than or equals",
+  "label.greater-than-equals": "Groter of gelijk aan",
-  "label.insights": "Insights",
+  "label.insights": "Inzichten",
-  "label.insights-description": "Dive deeper into your data by using segments and filters.",
+  "label.insights-description": "Verken je gegevens verder door segmenten en filters te gebruiken.",
   "label.is": "Is",
-  "label.is-not": "Is not",
+  "label.is-not": "Is niet",
-  "label.is-not-set": "Is not set",
+  "label.is-not-set": "Is niet ingesteld",
-  "label.is-set": "Is set",
+  "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": "Minder dan",
-  "label.less-than-equals": "Less than or equals",
+  "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-account": "Mijn profiel",
-  "label.my-websites": "My websites",
+  "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.remove-member": "Gebruiker verwijderen",
-  "label.reports": "Reports",
+  "label.reports": "Rapporten",
   "label.required": "Verplicht",
   "label.reset": "Opnieuw instellen",
   "label.reset-website": "Statistieken opnieuw instellen",
-  "label.retention": "Retention",
+  "label.retention": "Retentie",
-  "label.retention-description": "Measure your website stickiness by tracking how often users return.",
+  "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.search": "Zoeken",
-  "label.select": "Select",
+  "label.select": "Selecteer",
-  "label.select-date": "Select date",
+  "label.select-date": "Datum selecteren",
-  "label.select-role": "Select role",
+  "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": "Totaal",
-  "label.total-records": "Total records",
+  "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-team-warning": "Als een team wordt verwijderd, worden ook alle websites van dat team verwijderd.",
-  "message.delete-website-warning": "Alle verwante gegezens zullen ook verwijderd worden.",
+  "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-team-website-to-user": "Deze website toevoegen aan je account?",
-  "message.transfer-user-website-to-team": "Select the team to transfer this website to.",
+  "message.transfer-user-website-to-team": "Selecteer het team om deze website aan toe te voegen.",
-  "message.transfer-website": "Transfer website ownership to your account or another team.",
+  "message.transfer-website": "Draag het eigenaarschap van de website over naar jouw account, of een ander team.",
-  "message.triggered-event": "Triggered event",
+  "message.triggered-event": "Getriggerde gebeurtenis",
-  "message.user-deleted": "Gebruiker verwijderd.",
+  "message.user-deleted": "Gebruiker verwijderd",
-  "message.viewed-page": "Viewed page",
+  "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"
 }

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 '';
   }

src/lib/date.ts

@@ -182,8 +182,8 @@ export function parseDateRange(value: string | object, locale = 'en-US'): DateRa
     case 'month':
       return {
         startDate: subMonths(startOfMonth(now), num),
-        endDate: subMonths(endOfMonth(now), num),
+        endDate: subMonths(endOfMonth(now), num ? 1 : 0),
-        unit: 'day',
+        unit: num ? 'month' : 'day',
         offset: 0,
         num: num || 1,
         value,

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 '';
   }

yarn.lock

@@ -5829,9 +5829,9 @@ flatted@^3.2.9:
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
 follow-redirects@^1.15.2:
-  version "1.15.4"
+  version "1.15.6"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.4.tgz#cdc7d308bf6493126b17ea2191ea0ccf3e535adf"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
-  integrity sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==
+  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
 
 for-each@^0.3.3:
   version "0.3.3"