save

packages/backend/src/api/v1/analytics/utils.ts

@@ -6,6 +6,7 @@ import { z } from "zod";
 
 export function buildFiltersQuery(checks: string) {
   const deserializedChecks = deserializeLogic(checks);
+  console.log(checks, deserializedChecks);
   return deserializedChecks?.length && deserializedChecks.length > 1
     ? convertChecksToSQL(deserializedChecks)
     : sql`1 = 1`;
@@ -21,6 +22,7 @@ export function parseQuery(projectId: string, query: unknown) {
         z.literal("hourly"),
         z.literal("daily"),
         z.literal("weekly"),
+        z.literal("monthly"),
       ]),
       checks: z.string().optional(),
     })

packages/backend/src/api/v1/dashboards.ts

@@ -34,7 +34,7 @@ dashboards.get("/", async (ctx: Context) => {
         ownerId: userId,
         name: "Default Dashboard",
         isHome: true,
-        charts: DEFAULT_CHARTS,
+        chartIds: DEFAULT_CHARTS,
       })}
       returning *
     `;
@@ -73,10 +73,10 @@ dashboards.post("/", async (ctx: Context) => {
     description: z.string().optional().nullable().default(null),
     filters: z.any(),
     isHome: z.boolean().optional().nullable().default(false),
-    charts: z.array(z.any()).nullable().optional().default(DEFAULT_CHARTS),
+    chartIds: z.array(z.string()).nullable().optional().default(DEFAULT_CHARTS),
   });
 
-  const { name, charts, description, filters, isHome } = bodySchema.parse(
+  const { name, chartIds, description, filters, isHome } = bodySchema.parse(
     ctx.request.body,
   );
 
@@ -101,7 +101,7 @@ dashboards.post("/", async (ctx: Context) => {
         description,
         filters,
         isHome,
-        charts,
+        chartIds,
       })}
       returning *
     `;
@@ -123,9 +123,9 @@ dashboards.patch("/:id", async (ctx: Context) => {
     description: z.string().optional(),
     filters: z.any(),
     isHome: z.boolean().optional(),
-    charts: z.array(z.string()).optional(),
+    chartIds: z.array(z.string()).optional(),
   });
-  const { name, charts, description, filters, isHome } = bodySchema.parse(
+  const { name, chartIds, description, filters, isHome } = bodySchema.parse(
     ctx.request.body,
   );
 
@@ -135,7 +135,7 @@ dashboards.patch("/:id", async (ctx: Context) => {
     description,
     filters,
     isHome,
-    charts,
+    chartIds,
   });
 
   const updatedDashboard = sql.begin(async (sql) => {

packages/db/0053.sql

@@ -1,3 +1,5 @@
+create type granularity_type as enum('hourly', 'daily', 'weekly', 'monthly');
+
 create table dashboard (
     id uuid default uuid_generate_v4 () primary key,
     created_at timestamp with time zone default now(),
@@ -6,9 +8,12 @@ create table dashboard (
     project_id uuid not null,
     name text not null,
     description text null,
-    filters jsonb default '{}' not null,
+    checks jsonb default '[]' not null,
+    startDate timestamptz,
+    endDate timestamptz,
+    granularity granularity_type,
    	is_home boolean default false not null,
-		charts jsonb default '[]' not null,
+		chart_ids jsonb default '[]' not null,
     constraint fk_checklist_owner_id foreign key (owner_id) references account (id) on delete set null,
     constraint fk_checklist_project_id foreign key (project_id) references project (id) on delete cascade
 );

packages/frontend/components/analytics/Charts/AreaChartComponent.tsx

@@ -1,9 +1,5 @@
 import { AreaChart, ChartTooltip } from "@mantine/charts";
 
-interface AreaChartComponent {
-  data: any[]; // TODO: define type
-}
-
 const COLOR_PALETTE = [
   "violet.6",
   "blue.6",
@@ -23,7 +19,21 @@ type InputData = {
   name: string | null;
 };
 
-function transformData(data: InputData[]): any[] {
+type TransformedData = {
+  date: string;
+  [key: string]: string | number;
+};
+
+type Series = {
+  name: string;
+  color: string;
+};
+
+interface AreaChartProps {
+  data: InputData[];
+}
+
+function transformData(data: InputData[]): TransformedData[] {
   const nameValues = data.reduce(
     (acc, item) => {
       if (item.name && item.value !== 0) {
@@ -40,53 +50,45 @@ function transformData(data: InputData[]): any[] {
     data.reduce(
       (acc, item) => {
         const date = item.date;
-
         if (!acc[date]) {
           acc[date] = {
             date,
             ...Object.fromEntries(relevantNames.map((name) => [name, 0])),
           };
         }
-
         if (item.name) {
           acc[date][item.name] = item.value;
         }
-
         return acc;
       },
-      {} as Record<string, any>,
+      {} as Record<string, TransformedData>,
     ),
   );
 }
 
-export function generateSeries(seriesNames: string[]) {
-  const sortedSeriesNames = [...seriesNames].sort((a, b) => a.localeCompare(b));
+function generateSeries(data: TransformedData[]): Series[] {
+  const keys = Object.keys(data[0]).filter((key) => key !== "date");
+  const sortedKeys = [...keys].sort((a, b) => a.localeCompare(b));
 
-  const seriesWithColors = sortedSeriesNames.map((name, index) => ({
+  return sortedKeys.map((name, index) => ({
     name,
     color: COLOR_PALETTE[index] || "gray.6",
   }));
-
-  return seriesWithColors;
 }
 
-export default function AreaChartComponent({ data }: AreaChartComponent) {
-  const uniqueSeriesNames = [
-    ...new Set(data.map((item) => item.name).filter((name) => name !== null)),
-  ];
-
-  console.log(data, transformData(data));
+export default function AreaChartComponent({ data }: AreaChartProps) {
+  const formattedData = transformData(data);
+  const series = generateSeries(formattedData);
 
   return (
     <AreaChart
       h="300"
-      data={transformData(data)}
+      data={formattedData}
       dataKey="date"
-      series={generateSeries(uniqueSeriesNames)}
+      series={series}
       withDots={false}
       tooltipProps={{
         content: ({ label, payload }) => {
-          console.log(payload);
           return <ChartTooltip label={label} payload={payload} />;
         },
       }}

packages/frontend/components/analytics/Charts/ChartComponent.tsx

@@ -1,13 +1,19 @@
 import { useAnalyticsChartData } from "@/utils/dataHooks/analytics";
-import { Box, Center, Flex, Loader, Overlay } from "@mantine/core";
+import { Box, Center, Flex, Loader, Overlay, Text } from "@mantine/core";
 import TopModels from "./TopModels";
 import TopTemplates from "../TopTemplates";
 import TopUsers from "../TopUsers";
 import LineChartComponent from "../OldLineChart";
 import AreaChartComponent from "./AreaChartComponent";
+import { LogicNode } from "shared";
 
 interface ChartProps {
   id: string;
+  dataKey: string;
+  startDate: Date;
+  endDate: Date;
+  granularity: "hourly" | "daily" | "weekly" | "monthly";
+  checks: LogicNode;
 }
 
 export default function ChartComponent({
@@ -16,12 +22,14 @@ export default function ChartComponent({
   startDate,
   endDate,
   granularity,
-}) {
+  checks,
+}: ChartProps) {
   let { data, isLoading } = useAnalyticsChartData<any>(
     dataKey,
     startDate,
     endDate,
     granularity,
+    checks,
   );
 
   if (isLoading) {
@@ -38,12 +46,10 @@ export default function ChartComponent({
 
   if (data.length === 0) {
     return (
-      <Box>
+      <Center ta="center" h="100%" w="100%">
         <Overlay blur={5} opacity={0.1} p="lg" zIndex={1} />
-        <Center ta="center" h="100%" w="100%">
-          No data available for this period
-        </Center>
-      </Box>
+        <Text>No data available for this period</Text>
+      </Center>
     );
   }
 
@@ -60,8 +66,6 @@ export default function ChartComponent({
   }
 
   if (id === "tokens") {
-    console.log(data);
-    // return "Tokens";
     return <AreaChartComponent data={data} />;
   }
 

packages/frontend/components/analytics/DashboardsSidebarButton.tsx

@@ -36,7 +36,7 @@ export default function DashboardsSidebarButton() {
             >
               <Group>
                 <Text style={{ overflow: "hidden" }}>{name}</Text>
-                {isHome && <IconHome fill="black" stroke="2px" size={18} />}
+                {isHome && <IconHome2 stroke="2px" size={18} />}
               </Group>
             </Menu.Item>
           ))}

packages/frontend/components/analytics/DateRangeGranularityPicker.tsx

@@ -90,7 +90,13 @@ export function useDateRangeGranularity() {
     setGranularity(determineGranularity(dateRange));
   }, [dateRange]);
 
-  return { dateRange, setDateRange, granularity, setGranularity };
+  return {
+    startDate: dateRange[0],
+    endDate: dateRange[1],
+    setDateRange,
+    granularity,
+    setGranularity,
+  };
 }
 
 // Component to handle date range selection

packages/frontend/components/analytics/TopUsers.tsx

@@ -1,5 +1,5 @@
 import { formatAppUser, formatCost } from "@/utils/format";
-import { Anchor, Center, Group, Overlay, Text } from "@mantine/core";
+import { Anchor, Box, Center, Group, Overlay, Text } from "@mantine/core";
 import AppUserAvatar from "../blocks/AppUserAvatar";
 import BarList from "./BarList";
 
@@ -13,6 +13,17 @@ interface TopUsers {
 }
 
 export default function TopUsers({ data }: { data: TopUsers[] }) {
+  data = data.filter((user) => user.cost > 0);
+
+  if (data.length === 0) {
+    return (
+      <Center ta="center" h="100%" w="100%">
+        <Overlay blur={5} opacity={0.1} p="lg" zIndex={1} />
+        <Text>No data available for this period</Text>
+      </Center>
+    );
+  }
+
   return (
     <BarList
       customMetric={{