From 6654a1162f2073711c6196f73990b8820b0c1047 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 13 Jun 2024 13:48:57 +0200
Subject: [PATCH 01/10] feat: Add View table to Prisma schema

---
 app/prisma/schema.prisma | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/prisma/schema.prisma b/app/prisma/schema.prisma
index 77f2e7a7c..445554d53 100644
--- a/app/prisma/schema.prisma
+++ b/app/prisma/schema.prisma
@@ -23,6 +23,8 @@ model Config {
   user    User? @relation(fields: [user_id], references: [id])
   user_id Int?
 
+  views View[]
+
   published_state PUBLISHED_STATE @default(PUBLISHED)
 
   @@map("config")
@@ -37,6 +39,16 @@ model User {
   @@map("users")
 }
 
+model View {
+  id        Int      @id @default(autoincrement())
+  viewed_at DateTime @default(now()) @db.Timestamp(6)
+
+  config    Config @relation(fields: [config_key], references: [key])
+  config_key String
+
+  @@map("view")
+}
+
 model OldMigrations {
   id          Int       @id
   name        String    @unique @db.VarChar(100)

From 9e9079f50088fa821feea8bc318aad36be0b60a7 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 13 Jun 2024 13:50:00 +0200
Subject: [PATCH 02/10] feat: Increase view count on /v/ or /embed/ page view

---
 app/db/config.ts              | 11 +++++++++++
 app/pages/embed/[chartId].tsx |  3 ++-
 app/pages/v/[chartId].tsx     | 11 ++++++++---
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/db/config.ts b/app/db/config.ts
index 61819a701..c7f6fc1d1 100644
--- a/app/db/config.ts
+++ b/app/db/config.ts
@@ -185,6 +185,17 @@ export const getAllConfigs = async () => {
   return await Promise.all(parsedConfigs.map(upgradeDbConfig));
 };
 
+/**
+ * Increase the view count of a config.
+ */
+export const increaseConfigViewCount = async (configKey: string) => {
+  await prisma.view.create({
+    data: {
+      config_key: configKey,
+    },
+  });
+};
+
 /**
  * Get config from a user.
  */
diff --git a/app/pages/embed/[chartId].tsx b/app/pages/embed/[chartId].tsx
index 4247a8d4c..bab65f00c 100644
--- a/app/pages/embed/[chartId].tsx
+++ b/app/pages/embed/[chartId].tsx
@@ -8,7 +8,7 @@ import {
   ConfiguratorStateProvider,
   ConfiguratorStatePublished,
 } from "@/configurator";
-import { getConfig } from "@/db/config";
+import { getConfig, increaseConfigViewCount } from "@/db/config";
 import { serializeProps } from "@/db/serialize";
 import { EmbedOptionsProvider } from "@/utils/embed";
 
@@ -30,6 +30,7 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async ({
   const config = await getConfig(query.chartId as string);
 
   if (config?.data) {
+    await increaseConfigViewCount(config.key);
     return {
       props: serializeProps({
         status: "found",
diff --git a/app/pages/v/[chartId].tsx b/app/pages/v/[chartId].tsx
index d453b49c7..fa7421af6 100644
--- a/app/pages/v/[chartId].tsx
+++ b/app/pages/v/[chartId].tsx
@@ -24,7 +24,7 @@ import { ContentLayout } from "@/components/layout";
 import { PublishActions } from "@/components/publish-actions";
 import { ConfiguratorStatePublished, getChartConfig } from "@/config-types";
 import { ConfiguratorStateProvider } from "@/configurator/configurator-state";
-import { getConfig } from "@/db/config";
+import { getConfig, increaseConfigViewCount } from "@/db/config";
 import { deserializeProps, Serialized, serializeProps } from "@/db/serialize";
 import { useLocale } from "@/locales/use-locale";
 import { useDataSourceStore } from "@/stores/data-source";
@@ -49,8 +49,13 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async ({
   const config = await getConfig(query.chartId as string);
 
   if (config && config.data) {
-    // TODO validate configuration
-    return { props: serializeProps({ status: "found", config }) };
+    await increaseConfigViewCount(config.key);
+    return {
+      props: serializeProps({
+        status: "found",
+        config,
+      }),
+    };
   }
 
   res.statusCode = 404;

From 8bc762c99bcdc14329dac14db0647a5b5c6c907a Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 13 Jun 2024 13:51:36 +0200
Subject: [PATCH 03/10] feat: Display chart view count on /v/ page

---
 app/db/config.ts          | 18 ++++++++++++++++++
 app/pages/v/[chartId].tsx | 33 +++++++++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/app/db/config.ts b/app/db/config.ts
index c7f6fc1d1..d920ce707 100644
--- a/app/db/config.ts
+++ b/app/db/config.ts
@@ -185,6 +185,24 @@ export const getAllConfigs = async () => {
   return await Promise.all(parsedConfigs.map(upgradeDbConfig));
 };
 
+export const getConfigViewCount = async (configKey: string) => {
+  return await prisma.config
+    .findFirstOrThrow({
+      where: {
+        key: configKey,
+      },
+      include: {
+        _count: {
+          select: {
+            views: true,
+          },
+        },
+      },
+    })
+    .then((config) => config._count.views)
+    .catch(() => 0);
+};
+
 /**
  * Increase the view count of a config.
  */
diff --git a/app/pages/v/[chartId].tsx b/app/pages/v/[chartId].tsx
index fa7421af6..ab222a876 100644
--- a/app/pages/v/[chartId].tsx
+++ b/app/pages/v/[chartId].tsx
@@ -24,8 +24,13 @@ import { ContentLayout } from "@/components/layout";
 import { PublishActions } from "@/components/publish-actions";
 import { ConfiguratorStatePublished, getChartConfig } from "@/config-types";
 import { ConfiguratorStateProvider } from "@/configurator/configurator-state";
-import { getConfig, increaseConfigViewCount } from "@/db/config";
+import {
+  getConfig,
+  getConfigViewCount,
+  increaseConfigViewCount,
+} from "@/db/config";
 import { deserializeProps, Serialized, serializeProps } from "@/db/serialize";
+import SvgIcEye from "@/icons/components/IcEye";
 import { useLocale } from "@/locales/use-locale";
 import { useDataSourceStore } from "@/stores/data-source";
 import { EmbedOptionsProvider } from "@/utils/embed";
@@ -34,12 +39,14 @@ type PageProps =
   | {
       status: "notfound";
       config: null;
+      viewCount: null;
     }
   | {
       status: "found";
       config: Omit<PrismaConfig, "data"> & {
         data: Omit<ConfiguratorStatePublished, "activeField" | "state">;
       };
+      viewCount: number;
     };
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async ({
@@ -50,24 +57,27 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async ({
 
   if (config && config.data) {
     await increaseConfigViewCount(config.key);
+    const viewCount = await getConfigViewCount(config.key);
     return {
       props: serializeProps({
         status: "found",
         config,
+        viewCount,
       }),
     };
   }
 
   res.statusCode = 404;
 
-  return { props: { status: "notfound", config: null } };
+  return { props: { status: "notfound", config: null, viewCount: null } };
 };
 
 const useStyles = makeStyles((theme: Theme) => ({
   actionBar: {
     backgroundColor: "white",
     padding: `${theme.spacing(3)} 2.25rem`,
-    justifyContent: "flex-end",
+    justifyContent: "space-between",
+    alignItems: "center",
     display: "flex",
     width: "100%",
     borderBottom: "1px solid",
@@ -76,6 +86,14 @@ const useStyles = makeStyles((theme: Theme) => ({
       padding: `${theme.spacing(3)} 0.75rem`,
     },
   },
+  viewCount: {
+    display: "flex",
+    alignItems: "center",
+    "& svg": {
+      marginRight: theme.spacing(1),
+    },
+    color: theme.palette.text.secondary,
+  },
 }));
 
 const VisualizationPage = (props: Serialized<PageProps>) => {
@@ -85,7 +103,7 @@ const VisualizationPage = (props: Serialized<PageProps>) => {
 
   // Keep initial value of publishSuccess
   const [publishSuccess] = useState(() => !!query.publishSuccess);
-  const { status, config } = deserializeProps(props);
+  const { status, config, viewCount } = deserializeProps(props);
 
   const session = useSession();
   const canEdit =
@@ -156,6 +174,13 @@ const VisualizationPage = (props: Serialized<PageProps>) => {
       </Head>
       <ContentLayout>
         <Box className={classes.actionBar}>
+          {viewCount ? (
+            <Typography className={classes.viewCount} variant="caption">
+              <SvgIcEye /> {viewCount}
+            </Typography>
+          ) : (
+            <span />
+          )}
           <PublishActions configKey={key} locale={locale} />
         </Box>
         <Box

From db54823f4c201ed7a322b39b3f8455df9585a60e Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 13 Jun 2024 14:50:27 +0200
Subject: [PATCH 04/10] refactor: Prepare for multiple cards on Statistics page

---
 app/pages/statistics.tsx | 87 ++++++++++++++++++++++++++--------------
 1 file changed, 56 insertions(+), 31 deletions(-)

diff --git a/app/pages/statistics.tsx b/app/pages/statistics.tsx
index 033b10a9d..6e3b7d0ef 100644
--- a/app/pages/statistics.tsx
+++ b/app/pages/statistics.tsx
@@ -13,7 +13,7 @@ import prisma from "@/db/client";
 import { Serialized, deserializeProps, serializeProps } from "@/db/serialize";
 import { useFlag } from "@/flags";
 
-type PageProps = {
+type StatProps = {
   countByDay: { day: Date; count: number }[];
   trendAverages: {
     lastMonthDailyAverage: number;
@@ -21,8 +21,12 @@ type PageProps = {
   };
 };
 
+type PageProps = {
+  charts: StatProps;
+};
+
 export const getServerSideProps: GetServerSideProps<PageProps> = async () => {
-  const [countByDay, trendAverages] = await Promise.all([
+  const [chartCountByDay, chartTrendAverages] = await Promise.all([
     prisma.$queryRaw`
       SELECT
         DATE_TRUNC('day', created_at) AS day,
@@ -76,48 +80,38 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async () => {
   ]);
   return {
     props: serializeProps({
-      countByDay,
-      trendAverages,
+      charts: {
+        countByDay: chartCountByDay,
+        trendAverages: chartTrendAverages,
+      },
     }),
   };
 };
 
 const Statistics = (props: Serialized<PageProps>) => {
-  const { countByDay, trendAverages } = deserializeProps(props);
-  const { countByYearMonth, total } = useMemo(() => {
-    return {
-      countByYearMonth: groupByYearMonth(countByDay),
-      total: sum(countByDay, (d) => d.count) ?? 0,
-    };
-  }, [countByDay]);
-  const averageChartCountPerMonth = Math.round(total / countByYearMonth.length);
-  const { lastMonthDailyAverage, previousThreeMonthsDailyAverage } =
-    trendAverages;
+  const { charts } = deserializeProps(props);
   return (
     <AppLayout>
       <Box
         sx={{
           width: "100%",
-          maxWidth: 840,
+          maxWidth: 1400,
           mx: "auto",
           my: `${BANNER_MARGIN_TOP + 36}px`,
           px: 4,
         }}
       >
         <h1 style={{ margin: 0 }}>Statistics</h1>
-        <CreatedChartsCard
-          title={`Visualize users created ${total} charts in total`}
-          subtitle={`${total ? ` It's around ${averageChartCountPerMonth} chart${averageChartCountPerMonth > 1 ? "s" : ""} per month on average.` : ""}`}
-          data={countByYearMonth}
-          trend={{
-            direction:
-              lastMonthDailyAverage > previousThreeMonthsDailyAverage
-                ? "up"
-                : "down",
-            lastMonthDailyAverage,
-            previousThreeMonthsDailyAverage,
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: ["column", "column", "row"],
+            gap: 2,
+            my: [4, 6],
           }}
-        />
+        >
+          <CreatedChartsStatsCard {...charts} />
+        </Box>
       </Box>
     </AppLayout>
   );
@@ -128,7 +122,9 @@ export default Statistics;
 const formatShortMonth = timeFormat("%b");
 const formatYearMonth = timeFormat("%Y-%m");
 
-const groupByYearMonth = (countByDay: PageProps["countByDay"]) => {
+const groupByYearMonth = (
+  countByDay: PageProps[keyof PageProps]["countByDay"]
+) => {
   const countByDate = rollups(
     countByDay,
     (v) => ({
@@ -159,7 +155,7 @@ const groupByYearMonth = (countByDay: PageProps["countByDay"]) => {
   return countByDate;
 };
 
-const CreatedChartsCard = ({
+const StatsCard = ({
   title,
   subtitle,
   data,
@@ -178,7 +174,7 @@ const CreatedChartsCard = ({
   return (
     <Card
       sx={{
-        my: 6,
+        width: "100%",
         pt: 4,
         boxShadow: 2,
         borderRadius: 4,
@@ -295,7 +291,7 @@ const Bar = ({
   monthStr,
   count,
   maxCount,
-}: ComponentProps<typeof CreatedChartsCard>["data"][number][1] & {
+}: ComponentProps<typeof StatsCard>["data"][number][1] & {
   dateStr: string;
   maxCount: number;
 }) => {
@@ -369,3 +365,32 @@ const Bar = ({
     </>
   );
 };
+
+const CreatedChartsStatsCard = (props: PageProps["charts"]) => {
+  const { countByDay, trendAverages } = props;
+  const { countByYearMonth, total } = useMemo(() => {
+    return {
+      countByYearMonth: groupByYearMonth(countByDay),
+      total: sum(countByDay, (d) => d.count) ?? 0,
+    };
+  }, [countByDay]);
+  const averageChartCountPerMonth = Math.round(total / countByYearMonth.length);
+  const { lastMonthDailyAverage, previousThreeMonthsDailyAverage } =
+    trendAverages;
+
+  return (
+    <StatsCard
+      title={`Visualize users created ${total} charts in total`}
+      subtitle={`${total ? ` It's around ${averageChartCountPerMonth} chart${averageChartCountPerMonth > 1 ? "s" : ""} per month on average.` : ""}`}
+      data={countByYearMonth}
+      trend={{
+        direction:
+          lastMonthDailyAverage > previousThreeMonthsDailyAverage
+            ? "up"
+            : "down",
+        lastMonthDailyAverage,
+        previousThreeMonthsDailyAverage,
+      }}
+    />
+  );
+};

From 65b1af4802ac4076ede26a74f3ef870e76cd9bd9 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 13 Jun 2024 15:14:26 +0200
Subject: [PATCH 05/10] fix: Filling up missing dates

---
 app/pages/statistics.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/pages/statistics.tsx b/app/pages/statistics.tsx
index 6e3b7d0ef..078b5c010 100644
--- a/app/pages/statistics.tsx
+++ b/app/pages/statistics.tsx
@@ -139,6 +139,7 @@ const groupByYearMonth = (
   );
   const start = countByDate[0][1].date;
   const end = countByDate[countByDate.length - 1][1].date;
+  if (start.getTime() !== end.getTime()) {
   for (let date = start; date <= end; date.setMonth(date.getMonth() + 1)) {
     if (!allYearMonthStrings.includes(formatYearMonth(date))) {
       countByDate.push([
@@ -149,6 +150,7 @@ const groupByYearMonth = (
           monthStr: formatShortMonth(date),
         },
       ]);
+      }
     }
   }
   countByDate.sort(([a], [b]) => b.localeCompare(a));

From acdd54c3d6cc3a4a6c85d4eff173cc8e95107df4 Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 13 Jun 2024 15:19:46 +0200
Subject: [PATCH 06/10] feat: Add chart view numbers to Statistics page

---
 app/pages/statistics.tsx | 133 +++++++++++++++++++++++++++++++--------
 1 file changed, 107 insertions(+), 26 deletions(-)

diff --git a/app/pages/statistics.tsx b/app/pages/statistics.tsx
index 078b5c010..af28cdf6a 100644
--- a/app/pages/statistics.tsx
+++ b/app/pages/statistics.tsx
@@ -23,10 +23,16 @@ type StatProps = {
 
 type PageProps = {
   charts: StatProps;
+  views: StatProps;
 };
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async () => {
-  const [chartCountByDay, chartTrendAverages] = await Promise.all([
+  const [
+    chartCountByDay,
+    chartTrendAverages,
+    viewCountByDay,
+    viewTrendAverages,
+  ] = await Promise.all([
     prisma.$queryRaw`
       SELECT
         DATE_TRUNC('day', created_at) AS day,
@@ -49,15 +55,67 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async () => {
         SELECT COUNT(*) / 30.0 AS daily_average
         FROM config
         WHERE
-            created_at > CURRENT_DATE - INTERVAL '30 days'
-            AND created_at <= CURRENT_DATE
+          created_at > CURRENT_DATE - INTERVAL '30 days'
+          AND created_at <= CURRENT_DATE
     ),
     last_three_months_daily_average AS (
         SELECT COUNT(*) / 90.0 AS daily_average
         FROM config
         WHERE
-            created_at > CURRENT_DATE - INTERVAL '90 days'
-            AND created_at <= CURRENT_DATE
+          created_at > CURRENT_DATE - INTERVAL '90 days'
+          AND created_at <= CURRENT_DATE
+    )
+    SELECT
+      (SELECT daily_average FROM last_month_daily_average) AS last_month_daily_average,
+      (SELECT daily_average FROM last_three_months_daily_average) AS previous_three_months_daily_average;
+    `.then((rows) => {
+      const row = (
+        rows as {
+          last_month_daily_average: number;
+          previous_three_months_daily_average: number;
+        }[]
+      )[0];
+      return {
+        // superjson conversion breaks when we use default BigInt
+        lastMonthDailyAverage: Number(row.last_month_daily_average),
+        previousThreeMonthsDailyAverage: Number(
+          row.previous_three_months_daily_average
+        ),
+      };
+    }),
+    // Unfortunately we can't abstract this out to a function because of the way Prisma works
+    // see https://www.prisma.io/docs/orm/prisma-client/queries/raw-database-access/raw-queries#considerations
+    prisma.$queryRaw`
+      SELECT
+        DATE_TRUNC('day', viewed_at) AS day,
+        COUNT(*) AS count
+      FROM
+        view
+      GROUP BY
+        DATE_TRUNC('day', viewed_at)
+      ORDER BY
+        day DESC;`.then((rows) =>
+      (rows as { day: Date; count: BigInt }[]).map((row) => ({
+        ...row,
+        // superjson conversion breaks when we use default BigInt
+        count: Number(row.count),
+      }))
+    ),
+    prisma.$queryRaw`
+    WITH
+    last_month_daily_average AS (
+        SELECT COUNT(*) / 30.0 AS daily_average
+        FROM view
+        WHERE
+          viewed_at > CURRENT_DATE - INTERVAL '30 days'
+          AND viewed_at <= CURRENT_DATE
+    ),
+    last_three_months_daily_average AS (
+        SELECT COUNT(*) / 90.0 AS daily_average
+        FROM view
+        WHERE
+          viewed_at > CURRENT_DATE - INTERVAL '90 days'
+          AND viewed_at <= CURRENT_DATE
     )
     SELECT
       (SELECT daily_average FROM last_month_daily_average) AS last_month_daily_average,
@@ -84,12 +142,16 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async () => {
         countByDay: chartCountByDay,
         trendAverages: chartTrendAverages,
       },
+      views: {
+        countByDay: viewCountByDay,
+        trendAverages: viewTrendAverages,
+      },
     }),
   };
 };
 
 const Statistics = (props: Serialized<PageProps>) => {
-  const { charts } = deserializeProps(props);
+  const { charts, views } = deserializeProps(props);
   return (
     <AppLayout>
       <Box
@@ -110,7 +172,22 @@ const Statistics = (props: Serialized<PageProps>) => {
             my: [4, 6],
           }}
         >
-          <CreatedChartsStatsCard {...charts} />
+          <StatsCard
+            {...charts}
+            title={(total) =>
+              `Visualize users created ${total} charts in total`
+            }
+            subtitle={(total, avgMonthlyCount) =>
+              `${total ? ` It's around ${avgMonthlyCount} chart${avgMonthlyCount > 1 ? "s" : ""} per month on average.` : ""}`
+            }
+          />
+          <StatsCard
+            {...views}
+            title={(total) => `Charts were viewed ${total} times in total`}
+            subtitle={(total, avgMonthlyCount) =>
+              `${total ? ` It's around ${avgMonthlyCount} view${avgMonthlyCount > 1 ? "s" : ""} per month on average.` : ""}`
+            }
+          />
         </Box>
       </Box>
     </AppLayout>
@@ -140,16 +217,16 @@ const groupByYearMonth = (
   const start = countByDate[0][1].date;
   const end = countByDate[countByDate.length - 1][1].date;
   if (start.getTime() !== end.getTime()) {
-  for (let date = start; date <= end; date.setMonth(date.getMonth() + 1)) {
-    if (!allYearMonthStrings.includes(formatYearMonth(date))) {
-      countByDate.push([
-        formatYearMonth(date),
-        {
-          count: 0,
-          date,
-          monthStr: formatShortMonth(date),
-        },
-      ]);
+    for (let date = start; date <= end; date.setMonth(date.getMonth() + 1)) {
+      if (!allYearMonthStrings.includes(formatYearMonth(date))) {
+        countByDate.push([
+          formatYearMonth(date),
+          {
+            count: 0,
+            date,
+            monthStr: formatShortMonth(date),
+          },
+        ]);
       }
     }
   }
@@ -157,7 +234,7 @@ const groupByYearMonth = (
   return countByDate;
 };
 
-const StatsCard = ({
+const BaseStatsCard = ({
   title,
   subtitle,
   data,
@@ -293,7 +370,7 @@ const Bar = ({
   monthStr,
   count,
   maxCount,
-}: ComponentProps<typeof StatsCard>["data"][number][1] & {
+}: ComponentProps<typeof BaseStatsCard>["data"][number][1] & {
   dateStr: string;
   maxCount: number;
 }) => {
@@ -368,22 +445,26 @@ const Bar = ({
   );
 };
 
-const CreatedChartsStatsCard = (props: PageProps["charts"]) => {
-  const { countByDay, trendAverages } = props;
+const StatsCard = (
+  props: PageProps["charts"] & {
+    title: (total: number) => string;
+    subtitle: (total: number, avgMonthlyCount: number) => string;
+  }
+) => {
+  const { title, subtitle, countByDay, trendAverages } = props;
   const { countByYearMonth, total } = useMemo(() => {
     return {
       countByYearMonth: groupByYearMonth(countByDay),
       total: sum(countByDay, (d) => d.count) ?? 0,
     };
   }, [countByDay]);
-  const averageChartCountPerMonth = Math.round(total / countByYearMonth.length);
+  const avgMonthlyCount = Math.round(total / countByYearMonth.length);
   const { lastMonthDailyAverage, previousThreeMonthsDailyAverage } =
     trendAverages;
-
   return (
-    <StatsCard
-      title={`Visualize users created ${total} charts in total`}
-      subtitle={`${total ? ` It's around ${averageChartCountPerMonth} chart${averageChartCountPerMonth > 1 ? "s" : ""} per month on average.` : ""}`}
+    <BaseStatsCard
+      title={title(total)}
+      subtitle={subtitle(total, avgMonthlyCount)}
       data={countByYearMonth}
       trend={{
         direction:

From 565c14f24b0687c268ac191dbcffc2b71e8231cc Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 13 Jun 2024 15:24:06 +0200
Subject: [PATCH 07/10] style: Add integer formatting (with spaces as thousand
 separators)

---
 app/pages/statistics.tsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/pages/statistics.tsx b/app/pages/statistics.tsx
index af28cdf6a..c92435e2c 100644
--- a/app/pages/statistics.tsx
+++ b/app/pages/statistics.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable visualize-admin/no-large-sx */
 import { Box, Card, Tooltip, Typography } from "@mui/material";
 import { max, rollups, sum } from "d3-array";
+import { formatLocale } from "d3-format";
 import { timeFormat } from "d3-time-format";
 import { motion } from "framer-motion";
 import uniq from "lodash/uniq";
@@ -175,17 +176,19 @@ const Statistics = (props: Serialized<PageProps>) => {
           <StatsCard
             {...charts}
             title={(total) =>
-              `Visualize users created ${total} charts in total`
+              `Visualize users created ${formatInteger(total)} charts in total`
             }
             subtitle={(total, avgMonthlyCount) =>
-              `${total ? ` It's around ${avgMonthlyCount} chart${avgMonthlyCount > 1 ? "s" : ""} per month on average.` : ""}`
+              `${total ? ` It's around ${formatInteger(avgMonthlyCount)} chart${avgMonthlyCount > 1 ? "s" : ""} per month on average.` : ""}`
             }
           />
           <StatsCard
             {...views}
-            title={(total) => `Charts were viewed ${total} times in total`}
+            title={(total) =>
+              `Charts were viewed ${formatInteger(total)} times in total`
+            }
             subtitle={(total, avgMonthlyCount) =>
-              `${total ? ` It's around ${avgMonthlyCount} view${avgMonthlyCount > 1 ? "s" : ""} per month on average.` : ""}`
+              `${total ? ` It's around ${formatInteger(avgMonthlyCount)} view${avgMonthlyCount > 1 ? "s" : ""} per month on average.` : ""}`
             }
           />
         </Box>
@@ -398,7 +401,7 @@ const Bar = ({
           textAlign: "end",
         }}
       >
-        <Typography variant="caption">{count}</Typography>
+        <Typography variant="caption">{formatInteger(count)}</Typography>
       </Box>
       <Box
         sx={{
@@ -477,3 +480,12 @@ const StatsCard = (
     />
   );
 };
+
+const formatInteger = formatLocale({
+  decimal: ".",
+  thousands: "\u00a0",
+  grouping: [3],
+  currency: ["", "\u00a0 CHF"],
+  minus: "\u2212",
+  percent: "%",
+}).format(",d");

From cd7934c2484ee0f5e6f2eeb15a6c43f3eebd9ffe Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Thu, 13 Jun 2024 15:38:30 +0200
Subject: [PATCH 08/10] fix: Do not render when doesn't make sense

---
 app/pages/statistics.tsx | 40 ++++++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/app/pages/statistics.tsx b/app/pages/statistics.tsx
index c92435e2c..7ef869e9a 100644
--- a/app/pages/statistics.tsx
+++ b/app/pages/statistics.tsx
@@ -173,24 +173,28 @@ const Statistics = (props: Serialized<PageProps>) => {
             my: [4, 6],
           }}
         >
-          <StatsCard
-            {...charts}
-            title={(total) =>
-              `Visualize users created ${formatInteger(total)} charts in total`
-            }
-            subtitle={(total, avgMonthlyCount) =>
-              `${total ? ` It's around ${formatInteger(avgMonthlyCount)} chart${avgMonthlyCount > 1 ? "s" : ""} per month on average.` : ""}`
-            }
-          />
-          <StatsCard
-            {...views}
-            title={(total) =>
-              `Charts were viewed ${formatInteger(total)} times in total`
-            }
-            subtitle={(total, avgMonthlyCount) =>
-              `${total ? ` It's around ${formatInteger(avgMonthlyCount)} view${avgMonthlyCount > 1 ? "s" : ""} per month on average.` : ""}`
-            }
-          />
+          {charts.countByDay.length > 0 && (
+            <StatsCard
+              {...charts}
+              title={(total) =>
+                `Visualize users created ${formatInteger(total)} charts in total`
+              }
+              subtitle={(total, avgMonthlyCount) =>
+                `${total ? ` It's around ${formatInteger(avgMonthlyCount)} chart${avgMonthlyCount > 1 ? "s" : ""} per month on average.` : ""}`
+              }
+            />
+          )}
+          {views.countByDay.length > 0 && (
+            <StatsCard
+              {...views}
+              title={(total) =>
+                `Charts were viewed ${formatInteger(total)} times in total`
+              }
+              subtitle={(total, avgMonthlyCount) =>
+                `${total ? ` It's around ${formatInteger(avgMonthlyCount)} view${avgMonthlyCount > 1 ? "s" : ""} per month on average.` : ""}`
+              }
+            />
+          )}
         </Box>
       </Box>
     </AppLayout>

From e42556eb6251cae6913c595000390b87204749cb Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Mon, 17 Jun 2024 09:42:14 +0200
Subject: [PATCH 09/10] chore: Remove view count from /v/ page

---
 app/pages/v/[chartId].tsx | 22 +++-------------------
 1 file changed, 3 insertions(+), 19 deletions(-)

diff --git a/app/pages/v/[chartId].tsx b/app/pages/v/[chartId].tsx
index ab222a876..eafc38ac2 100644
--- a/app/pages/v/[chartId].tsx
+++ b/app/pages/v/[chartId].tsx
@@ -24,13 +24,8 @@ import { ContentLayout } from "@/components/layout";
 import { PublishActions } from "@/components/publish-actions";
 import { ConfiguratorStatePublished, getChartConfig } from "@/config-types";
 import { ConfiguratorStateProvider } from "@/configurator/configurator-state";
-import {
-  getConfig,
-  getConfigViewCount,
-  increaseConfigViewCount,
-} from "@/db/config";
+import { getConfig, increaseConfigViewCount } from "@/db/config";
 import { deserializeProps, Serialized, serializeProps } from "@/db/serialize";
-import SvgIcEye from "@/icons/components/IcEye";
 import { useLocale } from "@/locales/use-locale";
 import { useDataSourceStore } from "@/stores/data-source";
 import { EmbedOptionsProvider } from "@/utils/embed";
@@ -39,14 +34,12 @@ type PageProps =
   | {
       status: "notfound";
       config: null;
-      viewCount: null;
     }
   | {
       status: "found";
       config: Omit<PrismaConfig, "data"> & {
         data: Omit<ConfiguratorStatePublished, "activeField" | "state">;
       };
-      viewCount: number;
     };
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async ({
@@ -57,12 +50,10 @@ export const getServerSideProps: GetServerSideProps<PageProps> = async ({
 
   if (config && config.data) {
     await increaseConfigViewCount(config.key);
-    const viewCount = await getConfigViewCount(config.key);
     return {
       props: serializeProps({
         status: "found",
         config,
-        viewCount,
       }),
     };
   }
@@ -76,7 +67,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   actionBar: {
     backgroundColor: "white",
     padding: `${theme.spacing(3)} 2.25rem`,
-    justifyContent: "space-between",
+    justifyContent: "flex-end",
     alignItems: "center",
     display: "flex",
     width: "100%",
@@ -103,7 +94,7 @@ const VisualizationPage = (props: Serialized<PageProps>) => {
 
   // Keep initial value of publishSuccess
   const [publishSuccess] = useState(() => !!query.publishSuccess);
-  const { status, config, viewCount } = deserializeProps(props);
+  const { status, config } = deserializeProps(props);
 
   const session = useSession();
   const canEdit =
@@ -174,13 +165,6 @@ const VisualizationPage = (props: Serialized<PageProps>) => {
       </Head>
       <ContentLayout>
         <Box className={classes.actionBar}>
-          {viewCount ? (
-            <Typography className={classes.viewCount} variant="caption">
-              <SvgIcEye /> {viewCount}
-            </Typography>
-          ) : (
-            <span />
-          )}
           <PublishActions configKey={key} locale={locale} />
         </Box>
         <Box

From 96562567bd28ef53060844f0f9b528bf1993ea5d Mon Sep 17 00:00:00 2001
From: Bartosz Prusinowski <bartosz@interactivethings.com>
Date: Mon, 17 Jun 2024 10:14:17 +0200
Subject: [PATCH 10/10] refactor: View -> ConfigView

---
 app/db/config.ts         | 2 +-
 app/prisma/schema.prisma | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/db/config.ts b/app/db/config.ts
index d920ce707..b06cc3834 100644
--- a/app/db/config.ts
+++ b/app/db/config.ts
@@ -207,7 +207,7 @@ export const getConfigViewCount = async (configKey: string) => {
  * Increase the view count of a config.
  */
 export const increaseConfigViewCount = async (configKey: string) => {
-  await prisma.view.create({
+  await prisma.configView.create({
     data: {
       config_key: configKey,
     },
diff --git a/app/prisma/schema.prisma b/app/prisma/schema.prisma
index 445554d53..2888643d9 100644
--- a/app/prisma/schema.prisma
+++ b/app/prisma/schema.prisma
@@ -23,7 +23,7 @@ model Config {
   user    User? @relation(fields: [user_id], references: [id])
   user_id Int?
 
-  views View[]
+  views ConfigView[]
 
   published_state PUBLISHED_STATE @default(PUBLISHED)
 
@@ -39,14 +39,14 @@ model User {
   @@map("users")
 }
 
-model View {
+model ConfigView {
   id        Int      @id @default(autoincrement())
   viewed_at DateTime @default(now()) @db.Timestamp(6)
 
   config    Config @relation(fields: [config_key], references: [key])
   config_key String
 
-  @@map("view")
+  @@map("config_view")
 }
 
 model OldMigrations {