Goal improvements (#1007)

* Refactor BotSection and introduce BotSectionTabs for improved modularity

This commit refactors the BotSection component to separate data handling and presentation logic, introducing the useBotSectionData hook for data fetching. Additionally, it creates the BotSectionTabs component to manage tabbed navigation for different bot dimensions, enhancing code organization and reusability. The BotCountries, BotDevices, BotMetadata, BotPages, and BotReferrers components are updated to utilize the new BotSectionTabs, streamlining their implementations and improving user experience.

* goal improvements

* Update GoalCard component styles and layout for improved responsiveness and visual consistency

* Enhance StandardSectionDialog with error handling and update BucketSelection component for size prop

This commit introduces error handling in the StandardSectionDialog by displaying an ErrorState component when data fetching fails. Additionally, the BucketSelection component is updated to accept a size prop, allowing for more flexible styling in different contexts. The GoalsPage is also modified to utilize the new size prop for the BucketSelection component.

* Integrate GoalBarChartSkeleton into GoalCard and GoalsPage for improved loading states

This commit introduces the GoalBarChartSkeleton component into both the GoalCard and GoalsPage components, enhancing the user experience during data loading. The layout is adjusted to accommodate the new skeleton, ensuring a consistent and visually appealing loading state across the application.

* Refactor GoalCardSkeleton and GoalBarChartSkeleton for improved layout consistency

This commit modifies the GoalCardSkeleton to enhance its layout by adjusting the flex properties for better alignment. Additionally, the GoalBarChartSkeleton is updated to be hidden on smaller screens, ensuring a responsive design that maintains visual integrity across different device sizes.

Author: goldflag

client/src/api/analytics/endpoints/goals.ts

@@ -1,5 +1,12 @@
 import { authedFetch } from "../../utils";
-import { CommonApiParams, PaginationParams, SortParams, toQueryParams } from "./types";
+import {
+  BucketedParams,
+  CommonApiParams,
+  PaginationParams,
+  SortParams,
+  toBucketedQueryParams,
+  toQueryParams,
+} from "./types";
 import type { GetSessionsResponse } from "./sessions";
 
 // Goal type
@@ -39,12 +46,24 @@ export interface GoalsResponse {
   meta: PaginationMeta;
 }
 
+export interface GoalTimeSeriesPoint {
+  time: string;
+  goal_id: number;
+  conversions: number;
+  total_sessions: number;
+  conversion_rate: number;
+}
+
 export interface GoalsParams extends CommonApiParams, PaginationParams, SortParams {
   pageSize?: number;
   sort?: "goalId" | "name" | "goalType" | "createdAt";
   order?: "asc" | "desc";
 }
 
+export interface GoalTimeSeriesParams extends BucketedParams {
+  goalIds: number[];
+}
+
 export interface GoalSessionsParams extends CommonApiParams, PaginationParams {
   goalId: number;
 }
@@ -73,10 +92,7 @@ export interface UpdateGoalParams extends CreateGoalParams {
  * Fetch goals with pagination
  * GET /api/goals/:site
  */
-export async function fetchGoals(
-  site: string | number,
-  params: GoalsParams
-): Promise<GoalsResponse> {
+export async function fetchGoals(site: string | number, params: GoalsParams): Promise<GoalsResponse> {
   const queryParams = {
     ...toQueryParams(params),
     page: params.page,
@@ -89,6 +105,23 @@ export async function fetchGoals(
   return response;
 }
 
+/**
+ * Fetch bucketed conversion data for goals
+ * GET /api/goals/bucketed/:site
+ */
+export async function fetchGoalTimeSeries(
+  site: string | number,
+  params: GoalTimeSeriesParams
+): Promise<GoalTimeSeriesPoint[]> {
+  const queryParams = {
+    ...toBucketedQueryParams(params),
+    goal_ids: params.goalIds,
+  };
+
+  const response = await authedFetch<{ data: GoalTimeSeriesPoint[] }>(`/sites/${site}/goals/bucketed`, queryParams);
+  return response.data;
+}
+
 /**
  * Fetch sessions that completed a goal
  * GET /api/goals/:goalId/sessions/:site
@@ -118,14 +151,10 @@ export async function createGoal(
   site: string | number,
   params: CreateGoalParams
 ): Promise<{ success: boolean; goalId: number }> {
-  const response = await authedFetch<{ success: boolean; goalId: number }>(
-    `/sites/${site}/goals`,
-    undefined,
-    {
-      method: "POST",
-      data: params,
-    }
-  );
+  const response = await authedFetch<{ success: boolean; goalId: number }>(`/sites/${site}/goals`, undefined, {
+    method: "POST",
+    data: params,
+  });
   return response;
 }
 
@@ -152,16 +181,9 @@ export async function updateGoal(
  * Delete a goal
  * DELETE /api/goals/:goalId/:site
  */
-export async function deleteGoal(
-  site: string | number,
-  goalId: number
-): Promise<{ success: boolean }> {
-  const response = await authedFetch<{ success: boolean }>(
-    `/sites/${site}/goals/${goalId}`,
-    undefined,
-    {
-      method: "DELETE",
-    }
-  );
+export async function deleteGoal(site: string | number, goalId: number): Promise<{ success: boolean }> {
+  const response = await authedFetch<{ success: boolean }>(`/sites/${site}/goals/${goalId}`, undefined, {
+    method: "DELETE",
+  });
   return response;
 }

client/src/api/analytics/endpoints/index.ts

@@ -34,7 +34,6 @@ export type {
   SiteEventCountParams,
 } from "./events";
 
-
 // Errors endpoints
 export { fetchErrorNames, fetchErrorEvents, fetchErrorBucketed } from "./errors";
 export type {
@@ -51,12 +50,14 @@ export type {
 } from "./errors";
 
 // Goals endpoints
-export { fetchGoals, fetchGoalSessions, createGoal, updateGoal, deleteGoal } from "./goals";
+export { fetchGoals, fetchGoalTimeSeries, fetchGoalSessions, createGoal, updateGoal, deleteGoal } from "./goals";
 export type {
   Goal,
+  GoalTimeSeriesPoint,
   PaginationMeta,
   GoalsResponse,
   GoalsParams,
+  GoalTimeSeriesParams,
   GoalSessionsParams,
   CreateGoalParams,
   UpdateGoalParams,

client/src/api/analytics/hooks/goals/useCreateGoal.ts

@@ -34,6 +34,9 @@ export function useCreateGoal() {
       queryClient.invalidateQueries({
         queryKey: ["goals", variables.siteId.toString()],
       });
+      queryClient.invalidateQueries({
+        queryKey: ["goal-time-series", variables.siteId.toString()],
+      });
     },
   });
 }

client/src/api/analytics/hooks/goals/useDeleteGoal.ts

@@ -15,6 +15,9 @@ export function useDeleteGoal() {
       queryClient.invalidateQueries({
         queryKey: ["goals", site],
       });
+      queryClient.invalidateQueries({
+        queryKey: ["goal-time-series", site],
+      });
     },
   });
 }

client/src/api/analytics/hooks/goals/useGetGoalTimeSeries.ts

@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query";
+import { TimeBucket } from "@rybbit/shared";
+import { GOALS_PAGE_FILTERS } from "../../../../lib/filterGroups";
+import { getFilteredFilters, useStore } from "../../../../lib/store";
+import { buildApiParams } from "../../../utils";
+import { fetchGoalTimeSeries } from "../../endpoints";
+
+export function useGetGoalTimeSeries({ goalIds, bucket }: { goalIds: number[]; bucket?: TimeBucket }) {
+  const { site, time, bucket: storeBucket, timezone } = useStore();
+  const filteredFilters = getFilteredFilters(GOALS_PAGE_FILTERS);
+  const bucketToUse = bucket || storeBucket;
+  const params = buildApiParams(time, { filters: filteredFilters });
+
+  return useQuery({
+    queryKey: ["goal-time-series", site, time, bucketToUse, filteredFilters, goalIds, timezone],
+    queryFn: async () => {
+      return fetchGoalTimeSeries(site, {
+        ...params,
+        bucket: bucketToUse,
+        goalIds,
+      });
+    },
+    enabled: !!site && goalIds.length > 0,
+  });
+}

client/src/api/analytics/hooks/goals/useUpdateGoal.ts

@@ -43,6 +43,9 @@ export function useUpdateGoal() {
       queryClient.invalidateQueries({
         queryKey: ["goals", site],
       });
+      queryClient.invalidateQueries({
+        queryKey: ["goal-time-series", site],
+      });
     },
   });
 }

client/src/api/analytics/hooks/useGetMetric.ts

@@ -129,16 +129,39 @@ export function useInfiniteMetric({
   parameter,
   limit = 25,
   useFilters = true,
+  additionalFilters = [],
+  customFilters = [],
+  customTime,
 }: {
   parameter: FilterParameter;
   limit?: number;
   useFilters?: boolean;
+  additionalFilters?: Filter[];
+  customFilters?: Filter[];
+  customTime?: Time;
 }): UseInfiniteQueryResult<InfiniteData<PaginatedResponse>> {
   const { time, site, filters, timezone } = useStore();
-  const params = buildApiParams(time, { filters: useFilters ? filters : undefined });
+  const timeToUse = customTime ?? time;
+  const combinedFilters = useFilters
+    ? customFilters.length > 0
+      ? customFilters
+      : [...filters, ...additionalFilters]
+    : undefined;
+  const params = buildApiParams(timeToUse, { filters: combinedFilters });
 
   return useInfiniteQuery({
-    queryKey: [parameter, time, site, filters, limit, "infinite-metric", timezone],
+    queryKey: [
+      parameter,
+      customTime,
+      time,
+      site,
+      filters,
+      limit,
+      additionalFilters,
+      customFilters,
+      "infinite-metric",
+      timezone,
+    ],
     queryFn: async ({ pageParam = 1 }) => {
       return fetchMetric(site, {
         ...params,