update property names for list table to label, count, percent

src/app/(main)/websites/[websiteId]/(reports)/attribution/Attribution.tsx

@@ -61,18 +61,24 @@ export function Attribution({
       ]
     : [];
 
-  function UTMTable({ data = [], title }: { data: any; title: string }) {
+  function AttributionTable({ data = [], title }: { data: any; title: string }) {
+    const attributionData = percentFilter(
+      data.map(({ name, value }) => ({
+        x: name,
+        y: Number(value),
+      })),
+    );
+
     return (
       <ListTable
         title={title}
         metric={formatMessage(currency ? labels.revenue : labels.visitors)}
         currency={currency}
-        data={percentFilter(
+        data={attributionData.map(({ x, y, z }: { x: string; y: number; z: number }) => ({
-          data.map(({ name, value }) => ({
+          label: x,
-            x: name,
+          count: y,
-            y: Number(value),
+          percent: z,
-          })),
+        }))}
-        )}
       />
     );
   }
@@ -91,48 +97,34 @@ export function Attribution({
           <SectionHeader title={formatMessage(labels.sources)} />
           <Grid columns="1fr 1fr" gap>
             <Panel>
-              <ListTable
+              <AttributionTable data={data?.['referrer']} title={formatMessage(labels.referrer)} />
-                title={formatMessage(labels.referrer)}
-                metric={formatMessage(currency ? labels.revenue : labels.visitors)}
-                currency={currency}
-                data={percentFilter(
-                  data?.['referrer']?.map(({ name, value }) => ({
-                    x: name,
-                    y: Number(value),
-                  })),
-                )}
-              />
             </Panel>
             <Panel>
-              <ListTable
+              <AttributionTable data={data?.['paidAds']} title={formatMessage(labels.paidAds)} />
-                title={formatMessage(labels.paidAds)}
-                metric={formatMessage(currency ? labels.revenue : labels.visitors)}
-                currency={currency}
-                data={percentFilter(
-                  data?.['paidAds']?.map(({ name, value }) => ({
-                    x: name,
-                    y: Number(value),
-                  })),
-                )}
-              />
             </Panel>
           </Grid>
           <SectionHeader title="UTM" />
           <Grid columns="1fr 1fr" gap>
             <Panel>
-              <UTMTable data={data?.['utm_source']} title={formatMessage(labels.sources)} />
+              <AttributionTable data={data?.['utm_source']} title={formatMessage(labels.sources)} />
             </Panel>
             <Panel>
-              <UTMTable data={data?.['utm_medium']} title={formatMessage(labels.medium)} />
+              <AttributionTable data={data?.['utm_medium']} title={formatMessage(labels.medium)} />
             </Panel>
             <Panel>
-              <UTMTable data={data?.['utm_cmapaign']} title={formatMessage(labels.campaigns)} />
+              <AttributionTable
+                data={data?.['utm_cmapaign']}
+                title={formatMessage(labels.campaigns)}
+              />
             </Panel>
             <Panel>
-              <UTMTable data={data?.['utm_content']} title={formatMessage(labels.content)} />
+              <AttributionTable
+                data={data?.['utm_content']}
+                title={formatMessage(labels.content)}
+              />
             </Panel>
             <Panel>
-              <UTMTable data={data?.['utm_term']} title={formatMessage(labels.terms)} />
+              <AttributionTable data={data?.['utm_term']} title={formatMessage(labels.terms)} />
             </Panel>
           </Grid>
         </Column>

src/app/(main)/websites/[websiteId]/(reports)/revenue/Revenue.tsx

@@ -38,7 +38,7 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
   });
 
   const renderCountryName = useCallback(
-    ({ x: code }) => (
+    ({ label: code }) => (
       <Row className={classNames(locale)} gap>
         <TypeIcon type="country" value={code} />
         <Text>{countryNames[code] || formatMessage(labels.unknown)}</Text>
@@ -136,9 +136,9 @@ export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
                 title={formatMessage(labels.country)}
                 metric={formatMessage(labels.revenue)}
                 data={data?.country.map(({ name, value }: { name: string; value: number }) => ({
-                  x: name,
+                  label: name,
-                  y: value,
+                  count: value,
-                  z: (value / data?.total.sum) * 100,
+                  percent: (value / data?.total.sum) * 100,
                 }))}
                 currency={currency}
                 renderLabel={renderCountryName}

src/app/(main)/websites/[websiteId]/(reports)/utm/UTM.tsx

@@ -26,6 +26,7 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
         <Column gap>
           {UTM_PARAMS.map(param => {
             const items = data?.[param];
+
             const chartData = {
               labels: items.map(({ utm }) => utm),
               datasets: [
@@ -50,9 +51,9 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
                     <ListTable
                       metric={formatMessage(labels.views)}
                       data={items.map(({ utm, views }) => ({
-                        x: utm,
+                        label: utm,
-                        y: views,
+                        count: views,
-                        z: (views / total) * 100,
+                        percent: (views / total) * 100,
                       }))}
                     />
                   </Column>

src/app/(main)/websites/[websiteId]/realtime/RealtimeCountries.tsx

@@ -11,7 +11,7 @@ export function RealtimeCountries({ data }) {
   const { countryNames } = useCountryNames(locale);
 
   const renderCountryName = useCallback(
-    ({ x: code }) => (
+    ({ label: code }) => (
       <span className={classNames(styles.row)}>
         <TypeIcon type="country" value={code} />
         {countryNames[code]}
@@ -24,7 +24,11 @@ export function RealtimeCountries({ data }) {
     <ListTable
       title={formatMessage(labels.countries)}
       metric={formatMessage(labels.visitors)}
-      data={data}
+      data={data.map(({ x, y, z }: { x: string; y: number; z: number }) => ({
+        label: x,
+        count: y,
+        percent: z,
+      }))}
       renderLabel={renderCountryName}
     />
   );

src/app/(main)/websites/[websiteId]/realtime/RealtimeUrls.tsx

@@ -27,7 +27,7 @@ export function RealtimeUrls({ data }: { data: any }) {
     },
   ];
 
-  const renderLink = ({ x }) => {
+  const renderLink = ({ label: x }) => {
     const domain = x.startsWith('/') ? website?.domain : '';
     return (
       <a href={`//${domain}${x}`} target="_blank" rel="noreferrer noopener">
@@ -70,7 +70,11 @@ export function RealtimeUrls({ data }: { data: any }) {
           title={formatMessage(labels.referrers)}
           metric={formatMessage(labels.views)}
           renderLabel={renderLink}
-          data={domains}
+          data={domains.map(({ x, y, z }: { x: string; y: number; z: number }) => ({
+            label: x,
+            count: y,
+            percent: z,
+          }))}
         />
       )}
       {filter === FILTER_PAGES && (
@@ -78,7 +82,11 @@ export function RealtimeUrls({ data }: { data: any }) {
           title={formatMessage(labels.pages)}
           metric={formatMessage(labels.views)}
           renderLabel={renderLink}
-          data={pages}
+          data={pages.map(({ x, y, z }: { x: string; y: number; z: number }) => ({
+            label: x,
+            count: y,
+            percent: z,
+          }))}
         />
       )}
     </>