Merge branch 'feat/attribution-report' into dev

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' },
@@ -257,6 +263,7 @@ export const labels = defineMessages({
     id: 'label.utm-description',
     defaultMessage: 'Track your campaigns through UTM parameters.',
   },
+  conversionStep: { id: 'label.conversion-step', defaultMessage: 'Conversion Step' },
   steps: { id: 'label.steps', defaultMessage: 'Steps' },
   startStep: { id: 'label.start-step', defaultMessage: 'Start Step' },
   endStep: { id: 'label.end-step', defaultMessage: 'End Step' },
@@ -281,6 +288,11 @@ export const labels = defineMessages({
   firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
   properties: { id: 'label.properties', defaultMessage: 'Properties' },
   channels: { id: 'label.channels', defaultMessage: 'Channels' },
+  sources: { id: 'label.sources', defaultMessage: 'Sources' },
+  medium: { id: 'label.medium', defaultMessage: 'Medium' },
+  campaigns: { id: 'label.campaigns', defaultMessage: 'Campaigns' },
+  content: { id: 'label.content', defaultMessage: 'Content' },
+  terms: { id: 'label.terms', defaultMessage: 'Terms' },
   direct: { id: 'label.direct', defaultMessage: 'Direct' },
   referral: { id: 'label.referral', defaultMessage: 'Referral' },
   affiliate: { id: 'label.affiliate', defaultMessage: 'Affiliate' },

src/components/metrics/ListTable.tsx

@@ -1,11 +1,11 @@
-import { FixedSizeList } from 'react-window';
-import { useSpring, animated, config } from '@react-spring/web';
-import classNames from 'classnames';
 import Empty from '@/components/common/Empty';
-import { formatLongNumber } from '@/lib/format';
 import { useMessages } from '@/components/hooks';
-import styles from './ListTable.module.css';
+import { formatLongCurrency, formatLongNumber } from '@/lib/format';
+import { animated, config, useSpring } from '@react-spring/web';
+import classNames from 'classnames';
 import { ReactNode } from 'react';
+import { FixedSizeList } from 'react-window';
+import styles from './ListTable.module.css';
 
 const ITEM_SIZE = 30;
 
@@ -20,6 +20,7 @@ export interface ListTableProps {
   virtualize?: boolean;
   showPercentage?: boolean;
   itemCount?: number;
+  currency?: string;
 }
 
 export function ListTable({
@@ -33,6 +34,7 @@ export function ListTable({
   virtualize = false,
   showPercentage = true,
   itemCount = 10,
+  currency,
 }: ListTableProps) {
   const { formatMessage, labels } = useMessages();
 
@@ -48,6 +50,7 @@ export function ListTable({
         animate={animate && !virtualize}
         showPercentage={showPercentage}
         change={renderChange ? renderChange(row, index) : null}
+        currency={currency}
       />
     );
   };
@@ -81,7 +84,15 @@ export function ListTable({
   );
 }
 
-const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentage = true }) => {
+const AnimatedRow = ({
+  label,
+  value = 0,
+  percent,
+  change,
+  animate,
+  showPercentage = true,
+  currency,
+}) => {
   const props = useSpring({
     width: percent,
     y: value,
@@ -95,7 +106,9 @@ const AnimatedRow = ({ label, value = 0, percent, change, animate, showPercentag
       <div className={styles.value}>
         {change}
         <animated.div className={styles.value} title={props?.y as any}>
-          {props.y?.to(formatLongNumber)}
+          {currency
+            ? props.y?.to(n => formatLongCurrency(n, currency))
+            : props.y?.to(formatLongNumber)}
         </animated.div>
       </div>
       {showPercentage && (