[WIP] Feat/analytics clickhouse db

.vscode/settings.json

@@ -7,5 +7,6 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "eslint.workingDirectories": ["apps", "packages"],
-  "prettier.enable": true
+  "prettier.enable": true,
+  "cSpell.words": ["clvh", "clyetopos"]
 }

apps/bullmq-receiver/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "bullmq-receiver",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "ts-node-dev --respawn --transpile-only src/index.ts",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "bullmq": "^5.8.2",
+    "ioredis": "^5.4.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.31",
+    "ts-node-dev": "^1.1.6",
+    "typescript": "^4.2.3"
+  }
+}

apps/bullmq-receiver/src/index.ts

@@ -0,0 +1 @@
+console.log("hi");

apps/web/clickhouse/createDatabase.ts

@@ -0,0 +1,64 @@
+import { createClient } from "@clickhouse/client";
+import { Prisma, PrismaClient } from "@prisma/client";
+import { AbbyEventType } from "@tryabby/core";
+
+const client = createClient({
+  url: "http://localhost:8123",
+});
+
+// client
+//   .command({
+//     query: "CREATE DATABASE IF NOT EXISTS abby",
+//   })
+//   .then((res) => {
+//     client.command({
+//       query: `
+//         DROP TABLE IF EXISTS abby.Event;
+//       `,
+//     });
+//   })
+//   .then((res) => {
+//     client.command({
+//       query: `
+//         CREATE TABLE IF NOT EXISTS abby.Event (
+//           id UUID,
+//           project_id String,
+//           testName String,
+//           type Int,
+//           selectedVariant String,
+//           createdAt DateTime DEFAULT toDateTime(now()) NOT NULL,
+//         )
+//         ENGINE = MergeTree()
+//         ORDER BY (project_id, testName)
+//       `,
+//     });
+//   })
+//   .catch((error) => {
+//     console.error("Error creating table:", error);
+//   });
+
+async function insertEvents() {
+  const projectId = "clvh4sv5n0001furg6tj08z63";
+  const testName = "clyetopos0001yd6wa4yybkvw";
+
+  for (let i = 0; i < 100_000; i++) {
+    await client.insert({
+      table: "abby.Event",
+      format: "JSONEachRow",
+      values: [
+        {
+          project_id: projectId,
+          testName: testName,
+          type: Math.random() < 0.5 ? AbbyEventType.PING : AbbyEventType.ACT,
+          selectedVariant:
+            Math.random() < 0.5 ? "New Variant 1" : "New Variant 2",
+          createdAt:
+            Math.floor(Date.now() / 1000) -
+            Math.floor(Math.random() * 24 * 60 * 60),
+        },
+      ],
+    });
+  }
+}
+
+insertEvents();

apps/web/package.json

@@ -14,12 +14,15 @@
     "seed:events": "ts-node --compiler-options {\\\"module\\\":\\\"CommonJS\\\"} prisma/seedEvents.ts",
     "db:migrate": "prisma migrate dev",
     "generate:coupons": "pnpm ts-node -r tsconfig-paths/register  --compiler-options {\\\"module\\\":\\\"CommonJS\\\"} prisma/generateCoupons.ts",
+    "clickhouse:migrate": "pnpm ts-node -r tsconfig-paths/register  --compiler-options {\\\"module\\\":\\\"CommonJS\\\"} clickhouse/setupDB.ts",
+    "clickhouse:create": "pnpm ts-node -r tsconfig-paths/register  --compiler-options {\\\"module\\\":\\\"CommonJS\\\"} clickhouse/createDatabase.ts",
     "mailhog:up": "docker-compose -f docker-compose.mailhog.yaml up",
     "mailhog:down": "docker-compose -f docker-compose.mailhog.yaml down",
     "test": "vitest",
     "start:docker": "npx prisma migrate deploy || { echo 'Migration failed, exiting'; exit 1; } && node server.js"
   },
   "dependencies": {
+    "@clickhouse/client": "^1.0.1",
     "@code-hike/mdx": "0.9.0",
     "@databases/cache": "^1.0.0",
     "@dnd-kit/core": "^6.0.8",

apps/web/src/api/routes/v1_event.ts

@@ -1,11 +1,8 @@
 import { zValidator } from "@hono/zod-validator";
-import { abbyEventSchema, AbbyEventType } from "@tryabby/core";
+import { abbyEventSchema } from "@tryabby/core";
 import { Hono } from "hono";
 
 import isbot from "isbot";
-import { EventService } from "server/services/EventService";
-import { RequestCache } from "server/services/RequestCache";
-import { RequestService } from "server/services/RequestService";
 import { checkRateLimit } from "server/common/ratelimit";
 import { eventQueue } from "server/queue/queues";
 

apps/web/src/components/Test/Metrics.tsx

@@ -30,10 +30,10 @@ export const OPTIONS: ChartOptions<"bar"> = {
   maintainAspectRatio: false,
   scales: {
     y: {
-      min: 0,
-      max: 100,
+      beginAtZero: true,
     },
   },
+
   plugins: {
     legend: {
       position: "top" as const,
@@ -42,28 +42,18 @@ export const OPTIONS: ChartOptions<"bar"> = {
 };
 
 const Metrics = ({
-  pingEvents,
-  options,
+  visitData,
 }: {
-  pingEvents: Event[];
-  options: ClientOption[];
+  visitData: (ClientOption & { actEventCount: number })[];
 }) => {
-  const labels = options.map((option) => option.identifier);
-  const actualData = useMemo(() => {
-    return options.map((option) => {
-      return {
-        pings: pingEvents.filter(
-          (event) => event.selectedVariant === option.identifier
-        ).length,
-        weight: option.chance,
-      };
-    });
-  }, [options, pingEvents]);
+  const labels = visitData.map((data) => data.identifier);
 
-  const absPings = actualData.reduce((accumulator, value) => {
-    return accumulator + value.pings;
+  const absPings = visitData.reduce((accumulator, value) => {
+    return accumulator + value.actEventCount;
   }, 0);
 
+  console.log(absPings, visitData);
+
   return (
     <div className="relative mb-6 h-full w-full">
       <Bar
@@ -74,12 +64,13 @@ const Metrics = ({
           datasets: [
             {
               label: "Actual",
-              data: actualData.map((d) => d.pings),
+              data: visitData.map((data) => data.actEventCount),
+
               backgroundColor: "#A9E4EF",
             },
             {
               label: "Expected",
-              data: actualData.map((data) => absPings * data.weight),
+              data: visitData.map((data) => absPings * data.chance),
               backgroundColor: "#f472b6",
             },
           ],

apps/web/src/components/Test/Section.tsx

@@ -18,28 +18,27 @@ import { TitleEdit } from "components/TitleEdit";
 import { Modal } from "components/Modal";
 import { cn } from "lib/utils";
 
-function getBestVariant({
-  absPings,
-  options,
-}: {
-  absPings: number;
-  options: ClientOption[];
-}) {
-  const bestVariant = options.reduce(
-    (accumulator, option) => {
-      const pings = absPings * option.chance;
-      if (pings > accumulator.pings) {
-        return {
-          pings,
-          identifier: option.identifier,
-        };
-      }
-      return accumulator;
-    },
-    { pings: 0, identifier: "" }
-  );
+function getBestVariant(visitData: VisitData) {
+  const absPings = visitData
+    .map((data) => data.actEventCount)
+    .reduce((acc, curr) => acc + curr);
 
-  return bestVariant;
+  const diffToExpected = visitData.map((data) => {
+    return {
+      variantName: data.variantName,
+      difference: data.actEventCount - data.chance * absPings,
+    };
+  });
+
+  let currentMax = diffToExpected[0];
+
+  diffToExpected.forEach((diff) => {
+    if (currentMax!.difference < diff.difference) {
+      currentMax = diff;
+    }
+  });
+
+  return currentMax?.variantName;
 }
 
 const DeleteTestModal = ({
@@ -125,24 +124,31 @@ export const Card = ({
   );
 };
 
+export type VisitData = {
+  visitedEventCount: number;
+  actEventCount: number;
+  id: string;
+  identifier: string;
+  testId: string;
+  chance: number;
+
+  variantName: string;
+}[];
+
 const Section = ({
   name,
-  options = [],
-  events = [],
   id,
-}: Test & {
-  options: ClientOption[];
-  events: Event[];
+  visitData,
+}: {
+  name: string;
+  id: string;
+  visitData: VisitData;
 }) => {
   const router = useRouter();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const trpcContext = trpc.useContext();
   const showAdvancedTestStats = useFeatureFlag("AdvancedTestStats");
-
-  const bestVariant = getBestVariant({
-    absPings: events.filter((event) => event.type === AbbyEventType.ACT).length,
-    options,
-  }).identifier;
+  const bestVariant = getBestVariant(visitData);
 
   const { mutate: updateTestName } = trpc.tests.updateName.useMutation({
     onSuccess() {
@@ -190,7 +196,7 @@ const Section = ({
             </p>
           }
         >
-          <Weights options={options} />
+          <Weights options={visitData} />
         </Card>
         <Card
           title="Visits"
@@ -201,12 +207,7 @@ const Section = ({
             </p>
           }
         >
-          <Serves
-            options={options}
-            pingEvents={events.filter(
-              (event) => event.type === AbbyEventType.PING
-            )}
-          />
+          <Serves visitData={visitData} />
         </Card>
         <Card
           title="Interactions"
@@ -220,12 +221,7 @@ const Section = ({
             </p>
           }
         >
-          <Metrics
-            options={options}
-            pingEvents={events.filter(
-              (event) => event.type === AbbyEventType.ACT
-            )}
-          />
+          <Metrics visitData={visitData} />
         </Card>
       </div>
       <div className="mt-3 flex">

apps/web/src/components/Test/Serves.tsx

@@ -57,28 +57,17 @@ export const OPTIONS: ChartOptions<"bar"> = {
 };
 
 const Serves = ({
-  pingEvents,
-  options,
+  visitData,
 }: {
-  pingEvents: Event[];
-  options: ClientOption[];
+  visitData: (ClientOption & { visitedEventCount: number })[];
 }) => {
-  const labels = options.map((option) => option.identifier);
-
-  const actualData = useMemo(() => {
-    return options.map((option) => {
-      return pingEvents.filter(
-        (event) => event.selectedVariant === option.identifier
-      ).length;
-    });
-  }, [options, pingEvents]);
-
-  const absPings = actualData.reduce((accumulator, value) => {
-    return accumulator + value;
+  const labels = visitData.map((data) => data.identifier);
+  const absPings = visitData.reduce((accumulator, value) => {
+    return accumulator + value.visitedEventCount;
   }, 0);
 
   return (
-    <div className="relative h-full w-full">
+    <div className="relative h-full w-full ">
       <Bar
         className="self-end"
         options={OPTIONS}
@@ -87,16 +76,16 @@ const Serves = ({
           datasets: [
             {
               label: "Target",
-              data: options.map(
-                (option) => parseFloat(option.chance.toString()) * 100
-              ),
+              data: visitData.map((data) => {
+                return parseFloat(data.chance.toString()) * 100;
+              }),
               backgroundColor: "#A9E4EF",
             },
             {
               label: "Actual",
-              data: actualData.map((data) =>
-                Math.round((data / absPings) * 100)
-              ),
+              data: visitData.map((data) => {
+                return Math.round((data.visitedEventCount / absPings) * 100);
+              }),
               backgroundColor: "#f472b6",
             },
           ],