feature: add recommendation conversion rate chart

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

@@ -25,7 +25,7 @@ export const MessagesPerUser = ({
       granularity={granularity}
       date_range={filters.date_range}
       xAxis={"time_stamp"}
-      yAxis={"messages_per_user"}
+      yAxis={"point"}
       label="Messages Per User"
       tooltipContent="The average number of messages a user sends in one session."
     />

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

@@ -26,7 +26,7 @@ export const TopicCTRRate = ({
       date_range={filters.date_range}
       dataType="percentage"
       xAxis={"time_stamp"}
-      yAxis={"ctr"}
+      yAxis={"point"}
       label="CTR Rate"
       tooltipContent="The rate at which users click on products within the chat sessions."
     />

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

@@ -13,7 +13,9 @@ export const TopicsUsage = ({
   granularity: Granularity;
 }) => {
   const { trieve } = useTrieve();
-  const { data, isLoading } = useQuery(topicsUsageQuery(trieve, filters, granularity));
+  const { data, isLoading } = useQuery(
+    topicsUsageQuery(trieve, filters, granularity),
+  );
 
   return (
     <GraphComponent
@@ -23,7 +25,7 @@ export const TopicsUsage = ({
       granularity={granularity}
       date_range={filters.date_range}
       xAxis={"time_stamp"}
-      yAxis={"topic_count"}
+      yAxis={"point"}
       label="Chat Sessions Created"
       tooltipContent="The total number of chat sessions that were created by users."
     />

clients/trieve-shopify-extension/app/components/analytics/component/TotalUniqueVisitors.tsx

@@ -24,7 +24,7 @@ export const TotalUniqueVisitors = ({
       graphData={data?.points}
       granularity={granularity}
       xAxis={"time_stamp"}
-      yAxis={"unique_users"}
+      yAxis={"point"}
       dateRange={filters.date_range}
       label="Total Unique Visitors"
       tooltipContent="The total number of unique visitors to your store that interacted with the Trieve component."

clients/trieve-shopify-extension/app/components/analytics/recommendations/RecommendationsCTRRate.tsx

@@ -26,7 +26,7 @@ export const RecommendationsCTRRate = ({
       date_range={filters.date_range}
       dataType="percentage"
       xAxis={"time_stamp"}
-      yAxis={"ctr"}
+      yAxis={"point"}
       label="CTR Rate"
       tooltipContent="The rate at which users click on products after being recommended."
     />

clients/trieve-shopify-extension/app/components/analytics/recommendations/RecommendationsPerUser.tsx

@@ -25,7 +25,7 @@ export const RecommendationsPerUser = ({
       granularity={granularity}
       date_range={filters.date_range}
       xAxis={"time_stamp"}
-      yAxis={"recommendations_per_user"}
+      yAxis={"point"}
       label="Recommendations Per User"
       tooltipContent="The average number of recommendations a user receives in one session."
     />

clients/trieve-shopify-extension/app/components/analytics/recommendations/RecommendationsUsageChart.tsx

@@ -25,7 +25,7 @@ export const RecommendationsUsageChart = ({
       granularity={granularity}
       date_range={filters.date_range}
       xAxis={"time_stamp"}
-      yAxis={"requests"}
+      yAxis={"point"}
       label="Recommendations Usage"
       tooltipContent="The total number of recommendations made by users."
     />

clients/trieve-shopify-extension/app/components/analytics/recommendations/RecommnedationConversionRate.tsx

@@ -0,0 +1,34 @@
+import { Box, Card, Text, Spinner } from "@shopify/polaris";
+import { useQuery } from "@tanstack/react-query";
+import { useTrieve } from "app/context/trieveContext";
+import { RecommendationAnalyticsFilter, Granularity } from "trieve-ts-sdk";
+import { GraphComponent } from "../GraphComponent";
+import { recommendationConversionRateQuery } from "app/queries/analytics/recommendation";
+
+export const RecommendationConversionRate = ({
+  filters,
+  granularity,
+}: {
+  filters: RecommendationAnalyticsFilter;
+  granularity: Granularity;
+}) => {
+  const { trieve } = useTrieve();
+  const { data, isLoading } = useQuery(
+    recommendationConversionRateQuery(trieve, filters, granularity),
+  );
+
+  return (
+    <GraphComponent
+      loading={isLoading}
+      topLevelMetric={data?.conversion_rate}
+      graphData={data?.points}
+      granularity={granularity}
+      date_range={filters.date_range}
+      dataType="percentage"
+      xAxis={"time_stamp"}
+      yAxis={"point"}
+      label="Recommendation Conversion Rate"
+      tooltipContent="The percentage of recommendations that led to cart additions or purchases."
+    />
+  );
+};

clients/trieve-shopify-extension/app/components/analytics/search/SearchCTR.tsx

@@ -26,9 +26,9 @@ export const SearchCTRChart = ({
       date_range={filters.date_range}
       dataType="percentage"
       xAxis={"time_stamp"}
-      yAxis={"ctr"}
-      label="CTR Rate"
-      tooltipContent="The rate at which users click on products within the chat sessions."
+      yAxis={"point"}
+      label="Search CTR Rate"
+      tooltipContent="The rate at which users click on products within the search sessions."
     />
   );
-}
+};

clients/trieve-shopify-extension/app/components/analytics/search/SearchConversionRate.tsx

@@ -26,7 +26,7 @@ export const SearchConversionRate = ({
       date_range={filters.date_range}
       dataType="percentage"
       xAxis={"time_stamp"}
-      yAxis={"conversion_rate"}
+      yAxis={"point"}
       label="Search Conversion Rate"
       tooltipContent="The percentage of searches that led to cart additions or purchases."
     />

clients/trieve-shopify-extension/app/components/analytics/search/SearchUsageChart.tsx

@@ -26,7 +26,7 @@ export const SearchUsageChart = ({
       granularity={granularity}
       date_range={filters.date_range}
       xAxis={"time_stamp"}
-      yAxis={"requests"}
+      yAxis={"point"}
       label="Search Usage"
       tooltipContent="The total number of searches made by users."
     />

clients/trieve-shopify-extension/app/queries/analytics/recommendation.ts

@@ -1,5 +1,5 @@
 import { QueryOptions } from "@tanstack/react-query";
-import { TrieveSDK, RecommendationAnalyticsFilter, Granularity, RecommendationUsageGraphResponse, RecommendationsPerUserResponse, RecommendationsCTRRateResponse, RecommendationSortBy, RecommendationsEventResponse, SortOrder } from "trieve-ts-sdk";
+import { TrieveSDK, RecommendationAnalyticsFilter, Granularity, RecommendationUsageGraphResponse, RecommendationsPerUserResponse, RecommendationsCTRRateResponse, RecommendationSortBy, RecommendationsEventResponse, SortOrder, RecommendationsConversionRateResponse } from "trieve-ts-sdk";
 
 export const recommendationsUsageQuery = (
   trieve: TrieveSDK,
@@ -79,4 +79,22 @@ export const allRecommendationsQuery = (
       return result as RecommendationsEventResponse;
     },
   } satisfies QueryOptions;
-};
+};
+
+export const recommendationConversionRateQuery = (
+  trieve: TrieveSDK,
+  filters: RecommendationAnalyticsFilter,
+  granularity: Granularity,
+) => {
+  return {
+    queryKey: ["recommendationConversionRate", filters, granularity],
+    queryFn: async () => {
+      const result = await trieve.getRecommendationAnalytics({
+        filter: filters,
+        type: "recommendation_conversion_rate",
+        granularity: granularity,
+      });
+      return result as RecommendationsConversionRateResponse;
+    },
+  } satisfies QueryOptions;
+};

clients/trieve-shopify-extension/app/routes/app._dashboard.recommendations.tsx

@@ -11,14 +11,14 @@ import { RecommendationsUsageChart } from "app/components/analytics/recommendati
 import { RecommendationsPerUser } from "app/components/analytics/recommendations/RecommendationsPerUser";
 import { RecommendationsCTRRate } from "app/components/analytics/recommendations/RecommendationsCTRRate";
 import { AllRecommendationsTable } from "app/components/analytics/recommendations/AllRecommendationsTable";
+import { RecommendationConversionRate } from "app/components/analytics/recommendations/RecommnedationConversionRate";
 
 export default function SearchAnalyticsPage() {
   const [filters, setFilters] = useState(defaultSearchAnalyticsFilter);
   const [granularity, setGranularity] = useState<Granularity>("day");
   const [selectedTab, setSelectedTab] = useState(0);
   return (
     <>
-
       <div className="-ml-2">
         <Tabs
           tabs={[
@@ -46,12 +46,26 @@ export default function SearchAnalyticsPage() {
           />
           <Grid>
             <Grid.Cell columnSpan={{ xs: 6, sm: 6, md: 6, lg: 6, xl: 6 }}>
-              <RecommendationsUsageChart filters={filters} granularity={granularity} />
+              <RecommendationsUsageChart
+                filters={filters}
+                granularity={granularity}
+              />
               <div className="py-3"></div>
-              <RecommendationsPerUser filters={filters} granularity={granularity} />
+              <RecommendationsPerUser
+                filters={filters}
+                granularity={granularity}
+              />
             </Grid.Cell>
             <Grid.Cell columnSpan={{ xs: 6, sm: 6, md: 6, lg: 6, xl: 6 }}>
-              <RecommendationsCTRRate filters={filters} granularity={granularity} />
+              <RecommendationsCTRRate
+                filters={filters}
+                granularity={granularity}
+              />
+              <div className="py-3"></div>
+              <RecommendationConversionRate
+                filters={filters}
+                granularity={granularity}
+              />
             </Grid.Cell>
           </Grid>
         </>