feature: segment the user journey into search,chat,and reccomendations

Author: densumesh

clients/trieve-shopify-extension/app/components/analytics/AnalyticsChart.tsx

@@ -8,18 +8,18 @@ import Crosshair from "chartjs-plugin-crosshair";
 
 Chart.register(Crosshair);
 
-interface AnalyticsChartProps<T> {
+interface AnalyticsChartProps<T extends Record<string, any>> {
   data: T[] | null | undefined;
   granularity: Granularity;
-  date_range?: SearchAnalyticsFilter["date_range"];
+  dateRange?: SearchAnalyticsFilter["date_range"];
   yAxis: keyof T;
   xAxis: keyof T;
   label: string;
   wholeUnits?: boolean;
   dataType?: "number" | "percentage" | "currency" | "time";
 }
 
-export const AnalyticsChart = <T,>(props: AnalyticsChartProps<T>) => {
+export const AnalyticsChart = <T extends Record<string, any>>(props: AnalyticsChartProps<T>) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const chartInstanceRef = useRef<Chart | null>(null);
 
@@ -205,9 +205,9 @@ export const AnalyticsChart = <T,>(props: AnalyticsChartProps<T>) => {
       chartInstance.options.scales["x"].time.round = undefined;
     }
 
-    const info = fillDate({
+    const info = fillDate<T>({
       data,
-      date_range: props.date_range,
+      dateRange: props.dateRange,
       granularity: props.granularity,
       dataKey: props.yAxis,
       timestampKey: props.xAxis,
@@ -234,7 +234,7 @@ export const AnalyticsChart = <T,>(props: AnalyticsChartProps<T>) => {
   }, [
     props.data,
     props.granularity,
-    props.date_range,
+    props.dateRange,
     props.yAxis,
     props.xAxis,
     props.label,

clients/trieve-shopify-extension/app/components/analytics/EventPathSelector.tsx

@@ -1,17 +1,25 @@
 import { KnownEventNames } from "app/utils/formatting";
 
 export const chatEvents: KnownEventNames[] = [
-  "trieve-modal_load",
-  "trieve-modal_click",
-  "start_conversation",
-  "send_message",
+  "component_load",
+  "component_click",
+  "conversation_started",
   "site-add_to_cart",
   "site-checkout",
 ];
 
 export const searchEvents: KnownEventNames[] = [
-  "trieve-modal_load",
-  "trieve-modal_click",
+  "component_load",
+  "component_click",
+  "searched",
   "site-add_to_cart",
   "site-checkout",
 ];
+
+export const recommendationEvents: KnownEventNames[] = [
+  "component_load",
+  "component_click",
+  "recommendation_created",
+  "site-add_to_cart",
+  "site-checkout",
+];

clients/trieve-shopify-extension/app/components/analytics/GraphComponent.tsx

@@ -19,7 +19,7 @@ interface GraphComponentProps<T extends Record<string, any>> {
   xAxis: keyof T;
   yAxis: keyof T;
   label: string;
-  date_range: ComponentAnalyticsFilter["date_range"];
+  dateRange: ComponentAnalyticsFilter["date_range"];
   tooltipContent: string;
   dataType?: "number" | "percentage" | "currency" | "time";
 }
@@ -32,7 +32,7 @@ export const GraphComponent = <T extends Record<string, any>>({
   xAxis,
   yAxis,
   label,
-  date_range,
+  dateRange,
   tooltipContent,
   dataType = "number",
 }: GraphComponentProps<T>) => {
@@ -80,7 +80,7 @@ export const GraphComponent = <T extends Record<string, any>>({
             yAxis={yAxis}
             granularity={granularity}
             label={label}
-            date_range={date_range}
+            dateRange={dateRange}
           />
         )}
       </Box>

clients/trieve-shopify-extension/app/components/analytics/chat/ChatAverageRating.tsx

@@ -23,7 +23,7 @@ export const ChatAverageRating = ({
       topLevelMetric={data?.avg_chat_rating}
       graphData={data?.points}
       granularity={granularity}
-      date_range={filters.date_range}
+      dateRange={filters.date_range}
       xAxis={"time_stamp"}
       yAxis={"point"}
       label="Average Chat Rating"

clients/trieve-shopify-extension/app/components/analytics/chat/ChatConversionRate.tsx

@@ -23,7 +23,7 @@ export const ChatConversionRate = ({
       topLevelMetric={data?.conversion_rate}
       graphData={data?.points}
       granularity={granularity}
-      date_range={filters.date_range}
+      dateRange={filters.date_range}
       dataType="percentage"
       xAxis={"time_stamp"}
       yAxis={"point"}

clients/trieve-shopify-extension/app/components/analytics/chat/ChatRevenue.tsx

@@ -20,10 +20,10 @@ export const ChatRevenue = ({
   return (
     <GraphComponent
       loading={isLoading}
-      topLevelMetric={data?.avg_chat_revenue}
+      topLevelMetric={data?.avg_revenue}
       graphData={data?.points}
       granularity={granularity}
-      date_range={filters.date_range}
+      dateRange={filters.date_range}
       dataType="currency"
       xAxis={"time_stamp"}
       yAxis={"point"}

clients/trieve-shopify-extension/app/components/analytics/chat/ChatUserJourneyFunnel.tsx

@@ -0,0 +1,215 @@
+import {
+  Box,
+  Card,
+  SkeletonBodyText,
+  Tooltip,
+  Text,
+  ColumnContentType,
+  Select,
+} from "@shopify/polaris";
+import { useQuery } from "@tanstack/react-query";
+import { useTrieve } from "app/context/trieveContext";
+import { formatEventName, KnownEventNames } from "app/utils/formatting";
+import { Chart, ChartConfiguration } from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+import { useEffect, useMemo, useRef } from "react";
+import { ComponentAnalyticsFilter, EventNameAndCounts } from "trieve-ts-sdk";
+import { BasicTableComponent } from "../BasicTableComponent";
+import { chatEvents } from "../EventPathSelector";
+import { chatEventFunnelQuery } from "app/queries/analytics/chat";
+
+export const ChatUserJourneyFunnel = ({
+  filters,
+}: {
+  filters: ComponentAnalyticsFilter;
+}) => {
+  const { trieve } = useTrieve();
+  const events = chatEvents;
+
+  const { data, status } = useQuery(chatEventFunnelQuery(trieve, filters));
+
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const chartInstanceRef = useRef<Chart | null>(null);
+
+
+  const filteredData = useMemo(() => {
+    if (!data) return [];
+    const selected = events.map((event) => {
+      return (
+        data.event_names.find((e: EventNameAndCounts) => e.event_name === event) || {
+          event_name: event,
+          event_count: 0,
+        }
+      );
+    });
+
+    // Return in the same order of selectedEvents
+    return selected.sort((a, b) => {
+      const indexA = events.indexOf(a.event_name as KnownEventNames);
+      const indexB = events.indexOf(b.event_name as KnownEventNames);
+      if (indexA === -1 || indexB === -1) {
+        return 0;
+      } else {
+        return indexA - indexB;
+      }
+    });
+  }, [data, events]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+
+    if (!canvas || !filteredData) return;
+
+    if (!chartInstanceRef.current) {
+      chartInstanceRef.current = new Chart(canvas, {
+        type: "funnel",
+        data: {
+          labels: filteredData.map((t) => t.event_name),
+          datasets: [
+            {
+              data: filteredData.map((t) => t.event_count),
+            },
+          ],
+        },
+        options: {
+          animation: false,
+          indexAxis: "x",
+          responsive: true,
+          elements: {
+            trapezoid: {
+              backgroundColor: "rgba(128, 0, 128, 0.26)",
+            },
+          },
+          aspectRatio: 1,
+          interaction: {
+            mode: "nearest",
+            axis: "x",
+            intersect: false,
+          },
+          plugins: {
+            legend: { display: false },
+            datalabels: {
+              formatter(_, context) {
+                const thisOne = filteredData[context.dataIndex];
+                return formatEventName(thisOne.event_name);
+              },
+              color(context) {
+                const thisOne = filteredData[context.dataIndex];
+                if (thisOne.event_count === 0) {
+                  return "rgba(128, 0, 128, 0.26)";
+                }
+                return "rgba(58, 0, 58, 0.76)";
+              },
+              font: {
+                size: 12,
+              },
+            },
+            tooltip: {
+              callbacks: {
+                title(tooltipItem) {
+                  const index = tooltipItem[0].dataIndex;
+                  return formatEventName(filteredData[index].event_name);
+                },
+              },
+              backgroundColor: "rgba(128, 0, 128, 0.9)",
+              titleColor: "white",
+              bodyColor: "white",
+              padding: 4,
+              displayColors: false,
+              position: "nearest",
+              titleFont: { size: 11 },
+              bodyFont: { size: 11 },
+            },
+            // @ts-expect-error library types not updated
+            crosshair: {
+              line: {
+                color: "rgba(128, 0, 128, 0)",
+                width: 1,
+                dashPattern: [6, 6],
+              },
+              sync: {
+                enabled: true,
+                group: 1,
+              },
+              snap: {
+                enabled: true,
+              },
+              zoom: {
+                enabled: false,
+              },
+            },
+          },
+        },
+        plugins: [ChartDataLabels],
+      } satisfies ChartConfiguration<"funnel">);
+    }
+
+    const chartInstance = chartInstanceRef.current;
+
+    // Update the chart data
+    chartInstance.data.labels = filteredData.map((t) => t.event_name);
+    chartInstance.data.datasets[0].data = filteredData.map(
+      (t) => t.event_count,
+    );
+    chartInstance.update();
+
+    // Cleanup function
+    return () => {
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.destroy();
+        chartInstanceRef.current = null;
+      }
+    };
+  }, [filteredData]);
+
+  const tableData = filteredData
+    ? filteredData.map((item) => [
+      formatEventName(item.event_name),
+      item.event_count.toString(),
+    ])
+    : [];
+  const tableHeadings = ["Event Name", "Unique Users"];
+  const tableContentTypes: ColumnContentType[] = ["text", "numeric"];
+  const hasNext = false;
+
+  return (
+    <Card>
+      <div className="pb-2 w-full flex justify-between">
+        <div>
+          <Tooltip
+            content={"Stages of the purchase journey by unique users"}
+            hasUnderline
+          >
+            <Text as="span" variant="bodyLg" fontWeight="bold">
+              User Journey
+            </Text>
+          </Tooltip>
+        </div>
+      </div>
+      {events.length > 0 ? (
+        <>
+          <Box paddingBlockStart="800" minHeight="150px">
+            {status === "pending" ? (
+              <div className="pl-2">
+                <SkeletonBodyText lines={10} />
+              </div>
+            ) : (
+              <canvas ref={canvasRef} className="max-h-[200px] w-full" />
+            )}
+          </Box>
+          <div className="py-2"></div>
+          <BasicTableComponent
+            noCard
+            hidePagination
+            data={tableData}
+            page={1}
+            setPage={() => { }}
+            tableContentTypes={tableContentTypes}
+            tableHeadings={tableHeadings}
+            hasNext={hasNext}
+          />
+        </>
+      ) : null}
+    </Card>
+  );
+};

clients/trieve-shopify-extension/app/components/analytics/chat/MessagesPerUser.tsx

@@ -23,7 +23,7 @@ export const MessagesPerUser = ({
       topLevelMetric={data?.avg_messages_per_user}
       graphData={data?.points}
       granularity={granularity}
-      date_range={filters.date_range}
+      dateRange={filters.date_range}
       xAxis={"time_stamp"}
       yAxis={"point"}
       label="Messages Per User"

clients/trieve-shopify-extension/app/components/analytics/chat/TopicCTRRate.tsx

@@ -23,7 +23,7 @@ export const TopicCTRRate = ({
       topLevelMetric={data?.total_ctr}
       graphData={data?.points}
       granularity={granularity}
-      date_range={filters.date_range}
+      dateRange={filters.date_range}
       dataType="percentage"
       xAxis={"time_stamp"}
       yAxis={"point"}

clients/trieve-shopify-extension/app/components/analytics/chat/TopicsGraph.tsx

@@ -23,7 +23,7 @@ export const TopicsUsage = ({
       topLevelMetric={data?.total_topics}
       graphData={data?.points}
       granularity={granularity}
-      date_range={filters.date_range}
+      dateRange={filters.date_range}
       xAxis={"time_stamp"}
       yAxis={"point"}
       label="Chat Sessions Created"