Created PieChart component. Refactored charts.

src/app/(main)/reports/utm/UTMView.module.css

@@ -1,24 +1,14 @@
 .title {
   font-size: 18px;
+  line-height: 36px;
   font-weight: 700;
 }
 
-.params {
-  display: grid;
-  gap: 10px;
-  padding: 20px 0;
-}
-
 .row {
-  display: flex;
+  display: grid;
+  grid-template-columns: 50% 50%;
   gap: 20px;
-}
-
-.label {
-  min-width: 200px;
-}
-
-.value {
-  min-width: 50px;
-  text-align: right;
+  border-bottom: 1px solid var(--base300);
+  padding-bottom: 30px;
+  margin-bottom: 30px;
 }

src/app/(main)/reports/utm/UTMView.tsx

@@ -1,8 +1,11 @@
 import { useContext } from 'react';
 import { firstBy } from 'thenby';
 import { ReportContext } from '../[reportId]/Report';
+import { CHART_COLORS, UTM_PARAMS } from 'lib/constants';
+import PieChart from 'components/charts/PieChart';
+import ListTable from 'components/metrics/ListTable';
 import styles from './UTMView.module.css';
-import { UTM_PARAMS } from 'lib/constants';
+import { useMessages } from 'components/hooks';
 
 function toArray(data: { [key: string]: number }) {
   return Object.keys(data)
@@ -13,6 +16,7 @@ function toArray(data: { [key: string]: number }) {
 }
 
 export default function UTMView() {
+  const { formatMessage, labels } = useMessages();
   const { report } = useContext(ReportContext);
   const { data } = report || {};
 
@@ -23,18 +27,35 @@ export default function UTMView() {
   return (
     <div>
       {UTM_PARAMS.map(key => {
+        const items = toArray(data[key]);
+        const chartData = {
+          labels: items.map(({ name }) => name),
+          datasets: [
+            {
+              data: items.map(({ value }) => value),
+              backgroundColor: CHART_COLORS,
+            },
+          ],
+        };
+        const total = items.reduce((sum, { value }) => {
+          return +sum + +value;
+        }, 0);
+
         return (
-          <div key={key}>
-            <div className={styles.title}>{key}</div>
-            <div className={styles.params}>
-              {toArray(data[key]).map(({ name, value }) => {
-                return (
-                  <div key={name} className={styles.row}>
-                    <div className={styles.label}>{name}</div>
-                    <div className={styles.value}>{value}</div>
-                  </div>
-                );
-              })}
+          <div key={key} className={styles.row}>
+            <div>
+              <div className={styles.title}>{key}</div>
+              <ListTable
+                metric={formatMessage(labels.views)}
+                data={items.map(({ name, value }) => ({
+                  x: name,
+                  y: value,
+                  z: (value / total) * 100,
+                }))}
+              />
+            </div>
+            <div>
+              <PieChart type="doughnut" data={chartData} />
             </div>
           </div>
         );