- {children}
-
+ {icon && {icon} }
+
diff --git a/src/app/(main)/reports/[reportId]/ReportPage.tsx b/src/app/(main)/reports/[reportId]/ReportPage.tsx
index 7ecebd31..f28942b7 100644
--- a/src/app/(main)/reports/[reportId]/ReportPage.tsx
+++ b/src/app/(main)/reports/[reportId]/ReportPage.tsx
@@ -4,6 +4,7 @@ import EventDataReport from '../event-data/EventDataReport';
import InsightsReport from '../insights/InsightsReport';
import RetentionReport from '../retention/RetentionReport';
import UTMReport from '../utm/UTMReport';
+import GoalReport from '../goals/GoalsReport';
import { useReport } from 'components/hooks';
const reports = {
@@ -12,6 +13,7 @@ const reports = {
insights: InsightsReport,
retention: RetentionReport,
utm: UTMReport,
+ goals: GoalReport,
};
export default function ReportPage({ reportId }: { reportId: string }) {
diff --git a/src/app/(main)/reports/create/ReportTemplates.tsx b/src/app/(main)/reports/create/ReportTemplates.tsx
index 1bd84aec..fdf5c5f5 100644
--- a/src/app/(main)/reports/create/ReportTemplates.tsx
+++ b/src/app/(main)/reports/create/ReportTemplates.tsx
@@ -5,6 +5,7 @@ import Funnel from 'assets/funnel.svg';
import Lightbulb from 'assets/lightbulb.svg';
import Magnet from 'assets/magnet.svg';
import Tag from 'assets/tag.svg';
+import Target from 'assets/target.svg';
import styles from './ReportTemplates.module.css';
import { useMessages, useTeamUrl } from 'components/hooks';
@@ -37,6 +38,12 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
url: renderTeamUrl('/reports/utm'),
icon: {children}
+
-
diff --git a/src/app/(main)/reports/goals/GoalsAddForm.module.css b/src/app/(main)/reports/goals/GoalsAddForm.module.css
new file mode 100644
index 00000000..a254ff08
--- /dev/null
+++ b/src/app/(main)/reports/goals/GoalsAddForm.module.css
@@ -0,0 +1,7 @@
+.dropdown {
+ width: 140px;
+}
+
+.input {
+ width: 200px;
+}
diff --git a/src/app/(main)/reports/goals/GoalsAddForm.tsx b/src/app/(main)/reports/goals/GoalsAddForm.tsx
new file mode 100644
index 00000000..a8a77c58
--- /dev/null
+++ b/src/app/(main)/reports/goals/GoalsAddForm.tsx
@@ -0,0 +1,93 @@
+import { useMessages } from 'components/hooks';
+import { useState } from 'react';
+import { Button, Dropdown, Flexbox, FormRow, Item, TextField } from 'react-basics';
+import styles from './GoalsAddForm.module.css';
+
+export function GoalsAddForm({
+ type: defaultType = 'url',
+ value: defaultValue = '',
+ goal: defaultGoal = 10,
+ onChange,
+}: {
+ type?: string;
+ value?: string;
+ goal?: number;
+ onChange?: (step: { type: string; value: string; goal: number }) => void;
+}) {
+ const [type, setType] = useState(defaultType);
+ const [value, setValue] = useState(defaultValue);
+ const [goal, setGoal] = useState(defaultGoal);
+ const { formatMessage, labels } = useMessages();
+ const items = [
+ { label: formatMessage(labels.url), value: 'url' },
+ { label: formatMessage(labels.event), value: 'event' },
+ ];
+ const isDisabled = !type || !value;
+
+ const handleSave = () => {
+ onChange({ type, value, goal });
+ setValue('');
+ setGoal(10);
+ };
+
+ const handleChange = (e, set) => {
+ set(e.target.value);
+ };
+
+ const handleKeyDown = e => {
+ if (e.key === 'Enter') {
+ e.stopPropagation();
+ handleSave();
+ }
+ };
+
+ const renderTypeValue = (value: any) => {
+ return items.find(item => item.value === value)?.label;
+ };
+
+ return (
+
- {step.type === 'url' ?
-
{step.value}
+ {data?.map(({ type, value, goal, result }, index: number) => {
+ const percent = result > goal ? 100 : (result / goal) * 100;
+
+ return (
+
+ );
+}
+
+export default GoalsChart;
diff --git a/src/app/(main)/reports/goals/GoalsParameters.module.css b/src/app/(main)/reports/goals/GoalsParameters.module.css
new file mode 100644
index 00000000..fbe47b84
--- /dev/null
+++ b/src/app/(main)/reports/goals/GoalsParameters.module.css
@@ -0,0 +1,14 @@
+.value {
+ width: 100%;
+ margin-bottom: 8px;
+ font-weight: 600;
+}
+
+.goal {
+ color: var(--blue900);
+ background-color: var(--blue100);
+ font-size: 12px;
+ font-weight: 900;
+ padding: 2px 8px;
+ border-radius: 5px;
+}
diff --git a/src/app/(main)/reports/goals/GoalsParameters.tsx b/src/app/(main)/reports/goals/GoalsParameters.tsx
new file mode 100644
index 00000000..55955973
--- /dev/null
+++ b/src/app/(main)/reports/goals/GoalsParameters.tsx
@@ -0,0 +1,120 @@
+import { useMessages } from 'components/hooks';
+import Icons from 'components/icons';
+import { formatNumber } from 'lib/format';
+import { useContext } from 'react';
+import {
+ Button,
+ Form,
+ FormButtons,
+ FormRow,
+ Icon,
+ Popup,
+ PopupTrigger,
+ SubmitButton,
+} from 'react-basics';
+import BaseParameters from '../[reportId]/BaseParameters';
+import ParameterList from '../[reportId]/ParameterList';
+import PopupForm from '../[reportId]/PopupForm';
+import { ReportContext } from '../[reportId]/Report';
+import GoalsAddForm from './GoalsAddForm';
+import styles from './GoalsParameters.module.css';
+
+export function GoalsParameters() {
+ const { report, runReport, updateReport, isRunning } = useContext(ReportContext);
+ const { formatMessage, labels } = useMessages();
+
+ const { id, parameters } = report || {};
+ const { websiteId, dateRange, goals } = parameters || {};
+ const queryDisabled = !websiteId || !dateRange || goals?.length < 1;
+
+ const handleSubmit = (data: any, e: any) => {
+ e.stopPropagation();
+ e.preventDefault();
+
+ if (!queryDisabled) {
+ runReport(data);
+ }
+ };
+
+ const handleAddGoals = (goal: { type: string; value: string }) => {
+ updateReport({ parameters: { goals: parameters.goals.concat(goal) } });
+ };
+
+ const handleUpdateGoals = (
+ close: () => void,
+ index: number,
+ goal: { type: string; value: string },
+ ) => {
+ const goals = [...parameters.goals];
+ goals[index] = goal;
+ updateReport({ parameters: { goals } });
+ close();
+ };
+
+ const handleRemoveGoals = (index: number) => {
+ const goals = [...parameters.goals];
+ delete goals[index];
+ updateReport({ parameters: { goals: goals.filter(n => n) } });
+ };
+
+ const AddGoalsButton = () => {
+ return (
+
+
+ );
+ })}
+
+
+
+
+ {formatMessage(type === 'url' ? labels.viewedPage : labels.triggeredEvent)}
+
+ {value}
+
+
+
+ 20 && percent <= 40,
+ [styles.level3]: percent > 40 && percent <= 60,
+ [styles.level4]: percent > 60 && percent <= 80,
+ [styles.level5]: percent > 80,
+ }),
+ )}
+ style={{ width: `${percent}%` }}
+ >
+
+
+
+ {formatLongNumber(result)}
+ / {formatLongNumber(goal)}
+
+ {((result / goal) * 100).toFixed(2)}%
+ )
{countryNames[code]}
diff --git a/src/app/login/LoginPage.tsx b/src/app/login/LoginPage.tsx
index 28a3c024..8ea0b4e2 100644
--- a/src/app/login/LoginPage.tsx
+++ b/src/app/login/LoginPage.tsx
@@ -3,7 +3,7 @@ import LoginForm from './LoginForm';
import styles from './LoginPage.module.css';
export function LoginPage() {
- if (process.env.loginDisabled) {
+ if (process.env.disableLogin) {
return null;
}
diff --git a/src/assets/target.svg b/src/assets/target.svg
new file mode 100644
index 00000000..000f34c7
--- /dev/null
+++ b/src/assets/target.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/common/DataTable.module.css b/src/components/common/DataTable.module.css
index 98d84c75..9a7cffb7 100644
--- a/src/components/common/DataTable.module.css
+++ b/src/components/common/DataTable.module.css
@@ -1,22 +1,8 @@
-.table {
- grid-template-rows: repeat(auto-fit, max-content);
-}
-
-.table td {
- align-items: center;
- max-height: max-content;
-}
-
.search {
max-width: 300px;
margin: 20px 0;
}
-.action {
- justify-content: flex-end;
- gap: 5px;
-}
-
.body {
display: flex;
flex-direction: column;
diff --git a/src/components/common/DataTable.tsx b/src/components/common/DataTable.tsx
index 4bca7fc3..ed910def 100644
--- a/src/components/common/DataTable.tsx
+++ b/src/components/common/DataTable.tsx
@@ -4,8 +4,8 @@ import { Banner, Loading, SearchField } from 'react-basics';
import { useMessages } from 'components/hooks';
import Empty from 'components/common/Empty';
import Pager from 'components/common/Pager';
-import styles from './DataTable.module.css';
import { FilterQueryResult } from 'lib/types';
+import styles from './DataTable.module.css';
const DEFAULT_SEARCH_DELAY = 600;
diff --git a/src/components/hooks/queries/useRealtime.ts b/src/components/hooks/queries/useRealtime.ts
index ccf6a62d..92b03bd0 100644
--- a/src/components/hooks/queries/useRealtime.ts
+++ b/src/components/hooks/queries/useRealtime.ts
@@ -1,6 +1,6 @@
import { useMemo, useRef } from 'react';
import { RealtimeData } from 'lib/types';
-import { useApi } from 'components/hooks';
+import { useApi } from './useApi';
import { REALTIME_INTERVAL, REALTIME_RANGE } from 'lib/constants';
import { startOfMinute, subMinutes } from 'date-fns';
import { percentFilter } from 'lib/filters';
diff --git a/src/components/hooks/queries/useWebsiteValues.ts b/src/components/hooks/queries/useWebsiteValues.ts
index 02e26fc3..c5358df2 100644
--- a/src/components/hooks/queries/useWebsiteValues.ts
+++ b/src/components/hooks/queries/useWebsiteValues.ts
@@ -1,4 +1,4 @@
-import { useApi } from 'components/hooks';
+import { useApi } from './useApi';
export function useWebsiteValues({
websiteId,
diff --git a/src/components/hooks/useCountryNames.ts b/src/components/hooks/useCountryNames.ts
index acfada44..17b594b6 100644
--- a/src/components/hooks/useCountryNames.ts
+++ b/src/components/hooks/useCountryNames.ts
@@ -10,7 +10,7 @@ export function useCountryNames(locale: string) {
const [list, setList] = useState(countryNames[locale] || enUS);
async function loadData(locale: string) {
- const { data } = await httpGet(`${process.env.basePath}/intl/country/${locale}.json`);
+ const { data } = await httpGet(`${process.env.basePath || ''}/intl/country/${locale}.json`);
if (data) {
countryNames[locale] = data;
diff --git a/src/components/hooks/useLanguageNames.ts b/src/components/hooks/useLanguageNames.ts
index d4bfbf2f..276faa14 100644
--- a/src/components/hooks/useLanguageNames.ts
+++ b/src/components/hooks/useLanguageNames.ts
@@ -10,7 +10,7 @@ export function useLanguageNames(locale) {
const [list, setList] = useState(languageNames[locale] || enUS);
async function loadData(locale) {
- const { data } = await httpGet(`${process.env.basePath}/intl/language/${locale}.json`);
+ const { data } = await httpGet(`${process.env.basePath || ''}/intl/language/${locale}.json`);
if (data) {
languageNames[locale] = data;
diff --git a/src/components/hooks/useLocale.ts b/src/components/hooks/useLocale.ts
index 5e4e1ce8..69e7cc41 100644
--- a/src/components/hooks/useLocale.ts
+++ b/src/components/hooks/useLocale.ts
@@ -19,7 +19,9 @@ export function useLocale() {
const dateLocale = getDateLocale(locale);
async function loadMessages(locale: string) {
- const { ok, data } = await httpGet(`${process.env.basePath}/intl/messages/${locale}.json`);
+ const { ok, data } = await httpGet(
+ `${process.env.basePath || ''}/intl/messages/${locale}.json`,
+ );
if (ok) {
messages[locale] = data;
diff --git a/src/components/messages.ts b/src/components/messages.ts
index 7a11aa89..1413549f 100644
--- a/src/components/messages.ts
+++ b/src/components/messages.ts
@@ -235,6 +235,13 @@ export const labels = defineMessages({
},
steps: { id: 'label.steps', defaultMessage: 'Steps' },
addStep: { id: 'label.add-step', defaultMessage: 'Add step' },
+ goal: { id: 'label.goal', defaultMessage: 'Goal' },
+ goals: { id: 'label.goals', defaultMessage: 'Goals' },
+ goalsDescription: {
+ id: 'label.goals-description',
+ defaultMessage: 'Track your goals for pageviews or events.',
+ },
+ count: { id: 'label.count', defaultMessage: 'Count' },
});
export const messages = defineMessages({
diff --git a/src/components/metrics/BrowsersTable.tsx b/src/components/metrics/BrowsersTable.tsx
index c0c741cf..004b5e43 100644
--- a/src/components/metrics/BrowsersTable.tsx
+++ b/src/components/metrics/BrowsersTable.tsx
@@ -11,7 +11,7 @@ export function BrowsersTable(props: MetricsTableProps) {
return (
{country && (
)
)}
diff --git a/src/components/metrics/CountriesTable.tsx b/src/components/metrics/CountriesTable.tsx
index e38666bf..3e7c0af0 100644
--- a/src/components/metrics/CountriesTable.tsx
+++ b/src/components/metrics/CountriesTable.tsx
@@ -27,7 +27,7 @@ export function CountriesTable({
label={formatCountry(code)}
>
)