Create attribution report template and parameters

src/app/(main)/reports/attribution/AttributionParameters.module.css

@@ -0,0 +1,12 @@
+.item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.value {
+  display: flex;
+  align-self: center;
+  gap: 20px;
+}

src/app/(main)/reports/attribution/AttributionParameters.tsx

@@ -0,0 +1,125 @@
+import { useMessages } from '@/components/hooks';
+import { useContext, useState } from 'react';
+import { Dropdown, Form, FormButtons, FormInput, FormRow, Item, SubmitButton } from 'react-basics';
+import BaseParameters from '../[reportId]/BaseParameters';
+import { ReportContext } from '../[reportId]/Report';
+
+export function AttributionParameters() {
+  const [model, setModel] = useState('firstClick');
+  const { report, runReport, isRunning } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { id, parameters } = report || {};
+  const { websiteId, dateRange } = parameters || {};
+  const queryEnabled = websiteId && dateRange;
+
+  const handleSubmit = (data: any, e: any) => {
+    e.stopPropagation();
+    e.preventDefault();
+
+    runReport(data);
+  };
+
+  // const handleAddStep = (step: { type: string; value: string }) => {
+  //   updateReport({ parameters: { steps: parameters.steps.concat(step) } });
+  // };
+
+  // const handleUpdateStep = (
+  //   close: () => void,
+  //   index: number,
+  //   step: { type: string; value: string },
+  // ) => {
+  //   const steps = [...parameters.steps];
+  //   steps[index] = step;
+  //   updateReport({ parameters: { steps } });
+  //   close();
+  // };
+
+  // const handleRemoveStep = (index: number) => {
+  //   const steps = [...parameters.steps];
+  //   delete steps[index];
+  //   updateReport({ parameters: { steps: steps.filter(n => n) } });
+  // };
+
+  // const AddStepButton = () => {
+  //   return (
+  //     <PopupTrigger>
+  //       <Button>
+  //         <Icon>
+  //           <Icons.Plus />
+  //         </Icon>
+  //       </Button>
+  //       <Popup alignment="start">
+  //         <PopupForm>
+  //           <FunnelStepAddForm onChange={handleAddStep} />
+  //         </PopupForm>
+  //       </Popup>
+  //     </PopupTrigger>
+  //   );
+  // };
+
+  const attributionModel = [
+    { label: 'First-Click', value: 'firstClick' },
+    { label: 'Last-Click', value: 'lastClick' },
+  ];
+
+  const renderModelValue = (value: any) => {
+    return attributionModel.find(item => item.value === value)?.label;
+  };
+
+  return (
+    <Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
+      <BaseParameters showDateSelect={true} allowWebsiteSelect={!id} />
+      <FormRow label={formatMessage(labels.model)}>
+        <FormInput name="model" rules={{ required: formatMessage(labels.required) }}>
+          <Dropdown
+            value={model}
+            renderValue={renderModelValue}
+            onChange={(value: any) => setModel(value)}
+            items={attributionModel}
+          >
+            {({ value, label }) => {
+              return <Item key={value}>{label}</Item>;
+            }}
+          </Dropdown>
+        </FormInput>
+      </FormRow>
+      {/* <FormRow label={formatMessage(labels.steps)} action={<AddStepButton />}>
+        <ParameterList>
+          {steps.map((step: { type: string; value: string }, index: number) => {
+            return (
+              <PopupTrigger key={index}>
+                <ParameterList.Item
+                  className={styles.item}
+                  icon={step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}
+                  onRemove={() => handleRemoveStep(index)}
+                >
+                  <div className={styles.value}>
+                    <div>{step.value}</div>
+                  </div>
+                </ParameterList.Item>
+                <Popup alignment="start">
+                  {(close: () => void) => (
+                    <PopupForm>
+                      <FunnelStepAddForm
+                        type={step.type}
+                        value={step.value}
+                        onChange={handleUpdateStep.bind(null, close, index)}
+                      />
+                    </PopupForm>
+                  )}
+                </Popup>
+              </PopupTrigger>
+            );
+          })}
+        </ParameterList>
+      </FormRow> */}
+      <FormButtons>
+        <SubmitButton variant="primary" disabled={!queryEnabled} isLoading={isRunning}>
+          {formatMessage(labels.runQuery)}
+        </SubmitButton>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default AttributionParameters;

src/app/(main)/reports/attribution/AttributionReport.tsx

@@ -0,0 +1,27 @@
+import Money from '@/assets/money.svg';
+import { REPORT_TYPES } from '@/lib/constants';
+import Report from '../[reportId]/Report';
+import ReportBody from '../[reportId]/ReportBody';
+import ReportHeader from '../[reportId]/ReportHeader';
+import ReportMenu from '../[reportId]/ReportMenu';
+import AttributionParameters from './AttributionParameters';
+import AttributionView from './AttributionView';
+
+const defaultParameters = {
+  type: REPORT_TYPES.attribution,
+  parameters: {},
+};
+
+export default function AttributionReport({ reportId }: { reportId?: string }) {
+  return (
+    <Report reportId={reportId} defaultParameters={defaultParameters}>
+      <ReportHeader icon={<Money />} />
+      <ReportMenu>
+        <AttributionParameters />
+      </ReportMenu>
+      <ReportBody>
+        <AttributionView />
+      </ReportBody>
+    </Report>
+  );
+}

src/app/(main)/reports/attribution/AttributionReportPage.tsx

@@ -0,0 +1,6 @@
+'use client';
+import AttributionReport from './AttributionReport';
+
+export default function AttributionReportPage() {
+  return <AttributionReport />;
+}

src/app/(main)/reports/attribution/AttributionStepAddForm.module.css

@@ -0,0 +1,7 @@
+.dropdown {
+  width: 140px;
+}
+
+.input {
+  width: 200px;
+}

src/app/(main)/reports/attribution/AttributionStepAddForm.tsx

@@ -0,0 +1,80 @@
+import { useState } from 'react';
+import { useMessages } from '@/components/hooks';
+import { Button, FormRow, TextField, Flexbox, Dropdown, Item } from 'react-basics';
+import styles from './AttributionStepAddForm.module.css';
+
+export interface AttributionStepAddFormProps {
+  type?: string;
+  value?: string;
+  onChange?: (step: { type: string; value: string }) => void;
+}
+
+export function AttributionStepAddForm({
+  type: defaultType = 'url',
+  value: defaultValue = '',
+  onChange,
+}: AttributionStepAddFormProps) {
+  const [type, setType] = useState(defaultType);
+  const [value, setValue] = useState(defaultValue);
+  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 });
+    setValue('');
+  };
+
+  const handleChange = e => {
+    setValue(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 (
+    <Flexbox direction="column" gap={10}>
+      <FormRow label={formatMessage(defaultValue ? labels.update : labels.add)}>
+        <Flexbox gap={10}>
+          <Dropdown
+            className={styles.dropdown}
+            items={items}
+            value={type}
+            renderValue={renderTypeValue}
+            onChange={(value: any) => setType(value)}
+          >
+            {({ value, label }) => {
+              return <Item key={value}>{label}</Item>;
+            }}
+          </Dropdown>
+          <TextField
+            className={styles.input}
+            value={value}
+            onChange={handleChange}
+            autoFocus={true}
+            autoComplete="off"
+            onKeyDown={handleKeyDown}
+          />
+        </Flexbox>
+      </FormRow>
+      <FormRow>
+        <Button variant="primary" onClick={handleSave} disabled={isDisabled}>
+          {formatMessage(defaultValue ? labels.update : labels.add)}
+        </Button>
+      </FormRow>
+    </Flexbox>
+  );
+}
+
+export default AttributionStepAddForm;

src/app/(main)/reports/attribution/AttributionTable.tsx

@@ -0,0 +1,38 @@
+import EmptyPlaceholder from '@/components/common/EmptyPlaceholder';
+import { useMessages } from '@/components/hooks';
+import { useContext } from 'react';
+import { GridColumn, GridTable } from 'react-basics';
+import { ReportContext } from '../[reportId]/Report';
+import { formatLongCurrency } from '@/lib/format';
+
+export function AttributionTable() {
+  const { report } = useContext(ReportContext);
+  const { formatMessage, labels } = useMessages();
+  const { data } = report || {};
+
+  if (!data) {
+    return <EmptyPlaceholder />;
+  }
+
+  return (
+    <GridTable data={data.table || []}>
+      <GridColumn name="currency" label={formatMessage(labels.currency)} alignment="end">
+        {row => row.currency}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.total)} width="300px" alignment="end">
+        {row => formatLongCurrency(row.sum, row.currency)}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.average)} alignment="end">
+        {row => formatLongCurrency(row.count ? row.sum / row.count : 0, row.currency)}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.transactions)} alignment="end">
+        {row => row.count}
+      </GridColumn>
+      <GridColumn name="currency" label={formatMessage(labels.uniqueCustomers)} alignment="end">
+        {row => row.unique_count}
+      </GridColumn>
+    </GridTable>
+  );
+}
+
+export default AttributionTable;

src/app/(main)/reports/attribution/AttributionView.module.css

@@ -0,0 +1,11 @@
+.container {
+  display: grid;
+  gap: 20px;
+  margin-bottom: 40px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}

src/app/(main)/reports/attribution/AttributionView.tsx

@@ -0,0 +1,156 @@
+import classNames from 'classnames';
+import { colord } from 'colord';
+import BarChart from '@/components/charts/BarChart';
+import PieChart from '@/components/charts/PieChart';
+import TypeIcon from '@/components/common/TypeIcon';
+import { useCountryNames, useLocale, useMessages } from '@/components/hooks';
+import { GridRow } from '@/components/layout/Grid';
+import ListTable from '@/components/metrics/ListTable';
+import MetricCard from '@/components/metrics/MetricCard';
+import MetricsBar from '@/components/metrics/MetricsBar';
+import { renderDateLabels } from '@/lib/charts';
+import { CHART_COLORS } from '@/lib/constants';
+import { formatLongCurrency, formatLongNumber } from '@/lib/format';
+import { useCallback, useContext, useMemo } from 'react';
+import { ReportContext } from '../[reportId]/Report';
+import AttributionTable from './AttributionTable';
+import styles from './AttributionView.module.css';
+
+export interface AttributionViewProps {
+  isLoading?: boolean;
+}
+
+export function AttributionView({ isLoading }: AttributionViewProps) {
+  const { formatMessage, labels } = useMessages();
+  const { locale } = useLocale();
+  const { countryNames } = useCountryNames(locale);
+  const { report } = useContext(ReportContext);
+  const {
+    data,
+    parameters: { dateRange, currency },
+  } = report || {};
+  const showTable = data?.table.length > 1;
+
+  const renderCountryName = useCallback(
+    ({ x: code }) => (
+      <span className={classNames(locale, styles.row)}>
+        <TypeIcon type="country" value={code?.toLowerCase()} />
+        {countryNames[code]}
+      </span>
+    ),
+    [countryNames, locale],
+  );
+
+  const chartData = useMemo(() => {
+    if (!data) return [];
+
+    const map = (data.chart as any[]).reduce((obj, { x, t, y }) => {
+      if (!obj[x]) {
+        obj[x] = [];
+      }
+
+      obj[x].push({ x: t, y });
+
+      return obj;
+    }, {});
+
+    return {
+      datasets: Object.keys(map).map((key, index) => {
+        const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
+        return {
+          label: key,
+          data: map[key],
+          lineTension: 0,
+          backgroundColor: color.alpha(0.6).toRgbString(),
+          borderColor: color.alpha(0.7).toRgbString(),
+          borderWidth: 1,
+        };
+      }),
+    };
+  }, [data]);
+
+  const countryData = useMemo(() => {
+    if (!data) return [];
+
+    const labels = data.country.map(({ name }) => name);
+    const datasets = [
+      {
+        data: data.country.map(({ value }) => value),
+        backgroundColor: CHART_COLORS,
+        borderWidth: 0,
+      },
+    ];
+
+    return { labels, datasets };
+  }, [data]);
+
+  const metricData = useMemo(() => {
+    if (!data) return [];
+
+    const { sum, count, unique_count } = data.total;
+
+    return [
+      {
+        value: sum,
+        label: formatMessage(labels.total),
+        formatValue: n => formatLongCurrency(n, currency),
+      },
+      {
+        value: count ? sum / count : 0,
+        label: formatMessage(labels.average),
+        formatValue: n => formatLongCurrency(n, currency),
+      },
+      {
+        value: count,
+        label: formatMessage(labels.transactions),
+        formatValue: formatLongNumber,
+      },
+      {
+        value: unique_count,
+        label: formatMessage(labels.uniqueCustomers),
+        formatValue: formatLongNumber,
+      },
+    ] as any;
+  }, [data, locale]);
+
+  return (
+    <>
+      <div className={styles.container}>
+        <MetricsBar isFetched={data}>
+          {metricData?.map(({ label, value, formatValue }) => {
+            return <MetricCard key={label} value={value} label={label} formatValue={formatValue} />;
+          })}
+        </MetricsBar>
+        {data && (
+          <>
+            <BarChart
+              minDate={dateRange?.startDate}
+              maxDate={dateRange?.endDate}
+              data={chartData}
+              unit={dateRange?.unit}
+              stacked={true}
+              currency={currency}
+              renderXLabel={renderDateLabels(dateRange?.unit, locale)}
+              isLoading={isLoading}
+            />
+            <GridRow columns="two">
+              <ListTable
+                metric={formatMessage(labels.country)}
+                data={data?.country.map(({ name, value }) => ({
+                  x: name,
+                  y: Number(value),
+                  z: (value / data?.total.sum) * 100,
+                }))}
+                renderLabel={renderCountryName}
+              />
+              <PieChart type="doughnut" data={countryData} />
+            </GridRow>
+          </>
+        )}
+        {showTable && <AttributionTable />}
+      </div>
+    </>
+  );
+}
+
+export default AttributionView;

src/app/(main)/reports/attribution/page.tsx

@@ -0,0 +1,10 @@
+import AttributionReportPage from './AttributionReportPage';
+import { Metadata } from 'next';
+
+export default function () {
+  return <AttributionReportPage />;
+}
+
+export const metadata: Metadata = {
+  title: 'Attribution Report',
+};

src/app/(main)/reports/create/ReportTemplates.tsx

@@ -58,6 +58,12 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
       url: renderTeamUrl('/reports/revenue'),
       icon: <Money />,
     },
+    {
+      title: formatMessage(labels.attribution),
+      description: formatMessage(labels.attributionDescription),
+      url: renderTeamUrl('/reports/attribution'),
+      icon: <Money />,
+    },
   ];
 
   return (

src/components/messages.ts

@@ -163,7 +163,13 @@ export const labels = defineMessages({
     id: 'label.revenue-description',
     defaultMessage: 'Look into your revenue data and how users are spending.',
   },
+  attribution: { id: 'label.attribution', defaultMessage: 'Attribution' },
+  attributionDescription: {
+    id: 'label.attribution-description',
+    defaultMessage: 'See how users engage with your marketing and what drives conversions.',
+  },
   currency: { id: 'label.currency', defaultMessage: 'Currency' },
+  model: { id: 'label.model', defaultMessage: 'Model' },
   url: { id: 'label.url', defaultMessage: 'URL' },
   urls: { id: 'label.urls', defaultMessage: 'URLs' },
   path: { id: 'label.path', defaultMessage: 'Path' },

src/lib/constants.ts

@@ -124,6 +124,7 @@ export const REPORT_TYPES = {
   utm: 'utm',
   journey: 'journey',
   revenue: 'revenue',
+  attribution: 'attribution',
 } as const;
 
 export const REPORT_PARAMETERS = {

src/lib/schema.ts

@@ -60,6 +60,7 @@ export const reportTypeParam = z.enum([
   'goals',
   'journey',
   'revenue',
+  'attribution',
 ]);
 
 export const reportParms = {