ch attribution report, schema changes, and migration

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

@@ -1,19 +1,13 @@
-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 { useMessages } from '@/components/hooks';
+import { Grid, 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 { formatLongNumber } from '@/lib/format';
+import { useContext } from 'react';
 import { ReportContext } from '../[reportId]/Report';
-import AttributionTable from './AttributionTable';
 import styles from './AttributionView.module.css';
 
 export interface AttributionViewProps {
@@ -22,134 +16,118 @@ export interface AttributionViewProps {
 
 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 },
+    parameters: { currency },
   } = report || {};
-  const showTable = data?.table.length > 1;
+  const ATTRIBUTION_PARAMS = [
+    { value: 'referrer', label: formatMessage(labels.referrers) },
+    { value: 'paidAds', label: formatMessage(labels.paidAds) },
+  ];
 
-  const renderCountryName = useCallback(
-    ({ x: code }) => (
-      <span className={classNames(locale, styles.row)}>
-        <TypeIcon type="country" value={code?.toLowerCase()} />
-        {countryNames[code]}
-      </span>
-    ),
-    [countryNames, locale],
-  );
+  if (!data) {
+    return null;
+  }
 
-  const chartData = useMemo(() => {
-    if (!data) return [];
+  const { pageviews, visitors, visits } = data.total;
 
-    const map = (data.chart as any[]).reduce((obj, { x, t, y }) => {
-      if (!obj[x]) {
-        obj[x] = [];
-      }
+  const metrics = data
+    ? [
+        {
+          value: pageviews,
+          label: formatMessage(labels.views),
+          formatValue: formatLongNumber,
+        },
+        {
+          value: visits,
+          label: formatMessage(labels.visits),
+          formatValue: formatLongNumber,
+        },
+        {
+          value: visitors,
+          label: formatMessage(labels.visitors),
+          formatValue: formatLongNumber,
+        },
+      ]
+    : [];
 
-      obj[x].push({ x: t, y });
+  function UTMTable(UTMTableProps: { data: any; title: string; utm: string }) {
+    const { data, title, utm } = UTMTableProps;
+    const total = data[utm].reduce((sum, { value }) => {
+      return +sum + +value;
+    }, 0);
 
-      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 (
+      <ListTable
+        title={title}
+        metric={formatMessage(currency ? labels.revenue : labels.visitors)}
+        currency={currency}
+        data={data[utm].map(({ name, value }) => ({
+          x: name,
+          y: Number(value),
+          z: (value / total) * 100,
+        }))}
+      />
+    );
+  }
 
   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">
+    <div className={styles.container}>
+      <MetricsBar isFetched={data}>
+        {metrics?.map(({ label, value, formatValue }) => {
+          return <MetricCard key={label} value={value} label={label} formatValue={formatValue} />;
+        })}
+      </MetricsBar>
+      {ATTRIBUTION_PARAMS.map(({ value, label }) => {
+        const items = data[value];
+        const total = items.reduce((sum, { value }) => {
+          return +sum + +value;
+        }, 0);
+
+        const chartData = {
+          labels: items.map(({ name }) => name),
+          datasets: [
+            {
+              data: items.map(({ value }) => value),
+              backgroundColor: CHART_COLORS,
+              borderWidth: 0,
+            },
+          ],
+        };
+
+        return (
+          <div key={value} className={styles.row}>
+            <div>
+              <div className={styles.title}>{label}</div>
               <ListTable
-                metric={formatMessage(labels.country)}
-                data={data?.country.map(({ name, value }) => ({
+                metric={formatMessage(currency ? labels.revenue : labels.visitors)}
+                currency={currency}
+                data={items.map(({ name, value }) => ({
                   x: name,
                   y: Number(value),
-                  z: (value / data?.total.sum) * 100,
+                  z: (value / total) * 100,
                 }))}
-                renderLabel={renderCountryName}
               />
-              <PieChart type="doughnut" data={countryData} />
-            </GridRow>
-          </>
-        )}
-        {showTable && <AttributionTable />}
-      </div>
-    </>
+            </div>
+            <div>
+              <PieChart type="doughnut" data={chartData} isLoading={isLoading} />
+            </div>
+          </div>
+        );
+      })}
+      <Grid>
+        <GridRow columns="two">
+          <UTMTable data={data} title={formatMessage(labels.sources)} utm={'utm_source'} />
+          <UTMTable data={data} title={formatMessage(labels.medium)} utm={'utm_medium'} />
+        </GridRow>
+        <GridRow columns="three">
+          <UTMTable data={data} title={formatMessage(labels.campaigns)} utm={'utm_campaign'} />
+          <UTMTable data={data} title={formatMessage(labels.content)} utm={'utm_content'} />
+          <UTMTable data={data} title={formatMessage(labels.terms)} utm={'utm_term'} />
+        </GridRow>
+      </Grid>
+    </div>
   );
 }