Merge remote-tracking branch 'origin/dev' into dev

umami-software · Aug 16, 2023 · 2e2b141 · 2e2b141
2 parents 0dfa6c1 + 927ebd7
commit 2e2b141
Show file tree

Hide file tree

Showing 25 changed files with 196 additions and 100 deletions.
diff --git a/.github/workflows/stale-issues.yml b/.github/workflows/stale-issues.yml
@@ -19,5 +19,6 @@ jobs:
           close-issue-message: 'This issue was closed because it has been inactive for 7 days since being marked as stale.'
           days-before-pr-stale: -1
           days-before-pr-close: -1
-          operations-per-run: 500
+          operations-per-run: 200
+          ascending: true
           repo-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/components/input/DateFilter.js b/components/input/DateFilter.js
@@ -3,7 +3,7 @@ import { Icon, Modal, Dropdown, Item, Text, Flexbox } from 'react-basics';
 import { endOfYear, isSameDay } from 'date-fns';
 import DatePickerForm from 'components/metrics/DatePickerForm';
 import useLocale from 'hooks/useLocale';
-import { dateFormat } from 'lib/date';
+import { formatDate } from 'lib/date';
 import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 
@@ -135,8 +135,8 @@ const CustomRange = ({ startDate, endDate, onClick }) => {
         <Icons.Calendar />
       </Icon>
       <Text>
-        {dateFormat(startDate, 'd LLL y', locale)}
-        {!isSameDay(startDate, endDate) && ` — ${dateFormat(endDate, 'd LLL y', locale)}`}
+        {formatDate(startDate, 'd LLL y', locale)}
+        {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'd LLL y', locale)}`}
       </Text>
     </Flexbox>
   );

diff --git a/components/input/MonthSelect.js b/components/input/MonthSelect.js
@@ -0,0 +1,51 @@
+import { useRef, useState } from 'react';
+import { Text, Icon, CalendarMonthSelect, CalendarYearSelect, Button } from 'react-basics';
+import { startOfMonth, endOfMonth } from 'date-fns';
+import Icons from 'components/icons';
+import { useLocale } from 'hooks';
+import { formatDate } from 'lib/date';
+import { getDateLocale } from 'lib/lang';
+import styles from './MonthSelect.module.css';
+
+const MONTH = 'month';
+const YEAR = 'year';
+
+export function MonthSelect({ date = new Date(), onChange }) {
+  const { locale } = useLocale();
+  const [select, setSelect] = useState(null);
+  const month = formatDate(date, 'MMMM', locale);
+  const year = date.getFullYear();
+  const ref = useRef();
+
+  const handleSelect = value => {
+    setSelect(state => (state !== value ? value : null));
+  };
+
+  const handleChange = date => {
+    onChange(`range:${startOfMonth(date).getTime()}:${endOfMonth(date).getTime()}`);
+    setSelect(null);
+  };
+
+  return (
+    <>
+      <div ref={ref} className={styles.container}>
+        <Button className={styles.input} variant="quiet" onClick={() => handleSelect(MONTH)}>
+          <Text>{month}</Text>
+          <Icon size="sm">{select === MONTH ? <Icons.Close /> : <Icons.ChevronDown />}</Icon>
+        </Button>
+        <Button className={styles.input} variant="quiet" onClick={() => handleSelect(YEAR)}>
+          <Text>{year}</Text>
+          <Icon size="sm">{select === YEAR ? <Icons.Close /> : <Icons.ChevronDown />}</Icon>
+        </Button>
+      </div>
+      {select === MONTH && (
+        <CalendarMonthSelect date={date} locale={getDateLocale(locale)} onSelect={handleChange} />
+      )}
+      {select === YEAR && (
+        <CalendarYearSelect date={date} locale={getDateLocale(locale)} onSelect={handleChange} />
+      )}
+    </>
+  );
+}
+
+export default MonthSelect;
diff --git a/components/input/MonthSelect.module.css b/components/input/MonthSelect.module.css
@@ -0,0 +1,12 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
diff --git a/components/layout/SettingsLayout.module.css b/components/layout/SettingsLayout.module.css
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   padding-top: 40px;
+  padding-right: 20px;
 }
 
 .content {

diff --git a/components/pages/event-data/EventDataValueTable.js b/components/pages/event-data/EventDataValueTable.js
@@ -36,6 +36,7 @@ export function EventDataValueTable({ data = [], event }) {
           <GridColumn name="dataType" label={formatMessage(labels.type)}>
             {row => DATA_TYPES[row.dataType]}
           </GridColumn>
+          <GridColumn name="fieldValue" label={formatMessage(labels.value)} />
           <GridColumn name="total" label={formatMessage(labels.totalRecords)} width="200px">
             {({ total }) => total.toLocaleString()}
           </GridColumn>

diff --git a/components/pages/realtime/RealtimeLog.js b/components/pages/realtime/RealtimeLog.js
@@ -8,7 +8,7 @@ import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import { BROWSERS } from 'lib/constants';
 import { stringToColor } from 'lib/format';
-import { dateFormat } from 'lib/date';
+import { formatDate } from 'lib/date';
 import { safeDecodeURI } from 'next-basics';
 import Icons from 'components/icons';
 import styles from './RealtimeLog.module.css';
@@ -50,7 +50,7 @@ export function RealtimeLog({ data, websiteDomain }) {
     },
   ];
 
-  const getTime = ({ createdAt }) => dateFormat(new Date(createdAt), 'pp', locale);
+  const getTime = ({ createdAt }) => formatDate(new Date(createdAt), 'pp', locale);
 
   const getColor = ({ id, sessionId }) => stringToColor(sessionId || id);
 

diff --git a/components/pages/reports/BaseParameters.js b/components/pages/reports/BaseParameters.js
@@ -6,7 +6,12 @@ import { useContext } from 'react';
 import { ReportContext } from './Report';
 import { useMessages } from 'hooks';
 
-export function BaseParameters() {
+export function BaseParameters({
+  showWebsiteSelect = true,
+  allowWebsiteSelect = true,
+  showDateSelect = true,
+  allowDateSelect = true,
+}) {
   const { report, updateReport } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
 
@@ -24,17 +29,25 @@ export function BaseParameters() {
 
   return (
     <>
-      <FormRow label={formatMessage(labels.website)}>
-        <WebsiteSelect websiteId={websiteId} onSelect={handleWebsiteSelect} />
-      </FormRow>
-      <FormRow label={formatMessage(labels.dateRange)}>
-        <DateFilter
-          value={value}
-          startDate={startDate}
-          endDate={endDate}
-          onChange={handleDateChange}
-        />
-      </FormRow>
+      {showWebsiteSelect && (
+        <FormRow label={formatMessage(labels.website)}>
+          {allowWebsiteSelect && (
+            <WebsiteSelect websiteId={websiteId} onSelect={handleWebsiteSelect} />
+          )}
+        </FormRow>
+      )}
+      {showDateSelect && (
+        <FormRow label={formatMessage(labels.dateRange)}>
+          {allowDateSelect && (
+            <DateFilter
+              value={value}
+              startDate={startDate}
+              endDate={endDate}
+              onChange={handleDateChange}
+            />
+          )}
+        </FormRow>
+      )}
     </>
   );
 }

diff --git a/components/pages/reports/retention/RetentionParameters.js b/components/pages/reports/retention/RetentionParameters.js
@@ -1,21 +1,19 @@
 import { useContext, useRef } from 'react';
 import { useMessages } from 'hooks';
-import { Form, FormButtons, FormInput, FormRow, SubmitButton, TextField } from 'react-basics';
+import { Form, FormButtons, FormRow, SubmitButton } from 'react-basics';
 import { ReportContext } from 'components/pages/reports/Report';
+import { MonthSelect } from 'components/input/MonthSelect';
 import BaseParameters from '../BaseParameters';
-
-const fieldOptions = [
-  { name: 'daily', type: 'string' },
-  { name: 'weekly', type: 'string' },
-];
+import { parseDateRange } from 'lib/date';
 
 export function RetentionParameters() {
-  const { report, runReport, isRunning } = useContext(ReportContext);
+  const { report, runReport, isRunning, updateReport } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
   const ref = useRef(null);
 
   const { parameters } = report || {};
   const { websiteId, dateRange } = parameters || {};
+  const { startDate } = dateRange || {};
   const queryDisabled = !websiteId || !dateRange;
 
   const handleSubmit = (data, e) => {
@@ -26,9 +24,16 @@ export function RetentionParameters() {
     }
   };
 
+  const handleDateChange = value => {
+    updateReport({ parameters: { dateRange: { ...parseDateRange(value) } } });
+  };
+
   return (
     <Form ref={ref} values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
-      <BaseParameters />
+      <BaseParameters showDateSelect={false} />
+      <FormRow label={formatMessage(labels.dateRange)}>
+        <MonthSelect date={startDate} onChange={handleDateChange} />
+      </FormRow>
       <FormButtons>
         <SubmitButton variant="primary" disabled={queryDisabled} loading={isRunning}>
           {formatMessage(labels.runQuery)}

diff --git a/components/pages/reports/retention/RetentionTable.js b/components/pages/reports/retention/RetentionTable.js
@@ -1,9 +1,10 @@
 import { useContext } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
+import classNames from 'classnames';
 import { ReportContext } from '../Report';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import { useMessages } from 'hooks';
-import { dateFormat } from 'lib/date';
+import { formatDate } from 'lib/date';
 import styles from './RetentionTable.module.css';
 
 export function RetentionTable() {
@@ -15,34 +16,32 @@ export function RetentionTable() {
     return <EmptyPlaceholder />;
   }
 
-  const dates = data.reduce((arr, { date }) => {
-    if (!arr.includes(date)) {
-      return arr.concat(date);
+  const rows = data.reduce((arr, { date, visitors }) => {
+    if (!arr.find(a => a.date === date)) {
+      return arr.concat({ date, visitors });
     }
     return arr;
   }, []);
 
-  const days = Array(32).fill(null);
+  const days = [1, 2, 3, 4, 5, 6, 7, 14, 21, 30];
 
   return (
     <>
       <div className={styles.table}>
-        <div className={styles.row}>
+        <div className={classNames(styles.row, styles.header)}>
           <div className={styles.date}>{formatMessage(labels.date)}</div>
-          {days.map((n, i) => (
-            <div key={i} className={styles.header}>
-              {formatMessage(labels.day)} {i}
+          <div className={styles.visitors}>{formatMessage(labels.visitors)}</div>
+          {days.map(n => (
+            <div key={n} className={styles.day}>
+              {formatMessage(labels.day)} {n}
             </div>
           ))}
         </div>
-        {dates.map((date, i) => {
+        {rows.map(({ date, visitors }, i) => {
           return (
             <div key={i} className={styles.row}>
-              <div className={styles.date}>
-                {dateFormat(date, 'P')}
-                <br />
-                {date}
-              </div>
+              <div className={styles.date}>{formatDate(`${date} 00:00:00`, 'PP')}</div>
+              <div className={styles.visitors}>{visitors}</div>
               {days.map((n, day) => {
                 return (
                   <div key={day} className={styles.cell}>

diff --git a/components/pages/reports/retention/RetentionTable.module.css b/components/pages/reports/retention/RetentionTable.module.css
@@ -4,10 +4,7 @@
 }
 
 .header {
-  width: 60px;
-  height: 40px;
-  text-align: center;
-  font-size: var(--font-size-sm);
+  font-weight: 700;
 }
 
 .row {
@@ -28,5 +25,24 @@
 }
 
 .date {
-  min-width: 200px;
+  display: flex;
+  align-items: center;
+  min-width: 160px;
+}
+
+.visitors {
+  display: flex;
+  align-items: center;
+  min-width: 80px;
+}
+
+.day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  text-align: center;
+  font-size: var(--font-size-sm);
+  font-weight: 400;
 }
diff --git a/components/pages/websites/WebsiteEventData.js b/components/pages/websites/WebsiteEventData.js
@@ -5,18 +5,18 @@ import { EventDataMetricsBar } from 'components/pages/event-data/EventDataMetric
 import { useDateRange, useApi, usePageQuery } from 'hooks';
 import styles from './WebsiteEventData.module.css';
 
-function useData(websiteId, eventName) {
+function useData(websiteId, event) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
   const { get, useQuery } = useApi();
   const { data, error, isLoading } = useQuery(
-    ['event-data:events', { websiteId, startDate, endDate, eventName }],
+    ['event-data:events', { websiteId, startDate, endDate, event }],
     () =>
       get('/event-data/events', {
         websiteId,
         startAt: +startDate,
         endAt: +endDate,
-        eventName,
+        event,
       }),
     { enabled: !!(websiteId && startDate && endDate) },
   );

diff --git a/lib/charts.js b/lib/charts.js
@@ -1,5 +1,5 @@
 import { StatusLight } from 'react-basics';
-import { dateFormat } from 'lib/date';
+import { formatDate } from 'lib/date';
 import { formatLongNumber } from 'lib/format';
 
 export function renderNumberLabels(label) {
@@ -12,15 +12,15 @@ export function renderDateLabels(unit, locale) {
 
     switch (unit) {
       case 'minute':
-        return dateFormat(d, 'h:mm', locale);
+        return formatDate(d, 'h:mm', locale);
       case 'hour':
-        return dateFormat(d, 'p', locale);
+        return formatDate(d, 'p', locale);
       case 'day':
-        return dateFormat(d, 'MMM d', locale);
+        return formatDate(d, 'MMM d', locale);
       case 'month':
-        return dateFormat(d, 'MMM', locale);
+        return formatDate(d, 'MMM', locale);
       case 'year':
-        return dateFormat(d, 'YYY', locale);
+        return formatDate(d, 'YYY', locale);
       default:
         return label;
     }
@@ -50,7 +50,7 @@ export function renderStatusTooltipPopup(unit, locale) {
 
     setTooltipPopup(
       <>
-        <div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
+        <div>{formatDate(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
         <div>
           <StatusLight color={labelColors?.[0]?.backgroundColor}>
             {formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}

diff --git a/lib/clickhouse.ts b/lib/clickhouse.ts
@@ -63,12 +63,12 @@ function getDateFormat(date) {
   return `'${dateFormat(date, 'UTC:yyyy-mm-dd HH:MM:ss')}'`;
 }
 
-function mapFilter(column, operator, name) {
+function mapFilter(column, operator, name, type = 'String') {
   switch (operator) {
     case OPERATORS.equals:
-      return `${column} = {${name}:String}`;
+      return `${column} = {${name}:${type}`;
     case OPERATORS.notEquals:
-      return `${column} != {${name}:String}`;
+      return `${column} != {${name}:${type}}`;
     default:
       return '';
   }