Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fargoats capybaras #9

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fargoats capybaras #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c0f8a8
feat: add modals
0xr3x Nov 12, 2024
2afcbb8
feat: more charts ser
0xr3x Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 69 additions & 5 deletions src/app/(dashboard)/founder/contracts/analytics/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Bar, BarChart, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { ChartData } from '@/services/subservice';
import RealTimeChart from '@/components/founder/analytics/charts/RealTimeChart';
Expand All @@ -16,6 +17,22 @@ const AnalyticsPage = () => {
});
const [activeTab, setActiveTab] = useState('tvl');

const [level, setLevel] = useState('aggregate'); // State for level selector
const [questType, setQuestType] = useState(''); // State for quest type selector
const [individualQuest, setIndividualQuest] = useState(''); // State for individual quest selector

const metrics = {
uniqueUsers: 1250,
transactions: 8700,
tokenVolume: 342000,
tvl: 1250000,
creditsUsed: 800,
creditsUnused: 200,
retention: '65%',
dailyEngagements: 450,
totalQuests: 50,
};

useEffect(() => {
const subscription = pubSubService.subscribeToChartData((data) => {
setChartData(prevData => {
Expand All @@ -30,17 +47,64 @@ const AnalyticsPage = () => {
const latestData = chartData[chartData.length - 1] || { tvl: 0, dau: 0, trx: 0 };

return (

<div className="container mx-auto p-6">
<h1 className="text-3xl font-bold mb-6">Analytics Dashboard</h1>
{/* Button Group for Level Selection */}
<div className="mb-6 flex space-x-4">
{['aggregate', 'quest-type-aggregate', 'individual-quest'].map((option) => (
<button
key={option}
onClick={() => setLevel(option)}
className={`px-4 py-2 font-semibold rounded ${
level === option ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-700'
}`}
>
{option.replace(/-/g, ' ')}
</button>
))}
</div>
{/* Conditional Quest Type Selector */}
{level === 'quest-type-aggregate' && (
<div className="mb-6">
<Select value={questType} onValueChange={setQuestType}>
<SelectTrigger><SelectValue placeholder="Select Quest Type" /></SelectTrigger>
<SelectContent>
{/* These values can be replaced with actual quest types */}
<SelectItem value="type1">Type 1</SelectItem>
<SelectItem value="type2">Type 2</SelectItem>
</SelectContent>
</Select>
</div>
)}

{/* Conditional Individual Quest Selector */}
{level === 'individual-quest' && (
<div className="mb-6">
<Select value={individualQuest} onValueChange={setIndividualQuest}>
<SelectTrigger><SelectValue placeholder="Select Individual Quest" /></SelectTrigger>
<SelectContent>
{/* These values can be replaced with actual individual quests */}
<SelectItem value="quest1">Quest 1</SelectItem>
<SelectItem value="quest2">Quest 2</SelectItem>
</SelectContent>
</Select>
</div>
)}

<div className="mb-6">
<RealTimeChart />
</div>

{/* High-Level Metrics */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<MetricCard title="Daily Active Users" value={latestData.dau.toLocaleString()} change="+5%" />
<MetricCard title="Daily Transactions (TRX)" value={latestData.trx.toLocaleString()} change="+7%" />
<MetricCard title="Daily Transaction Volume (DTV)" value={`$${latestData.dtv? latestData.dtv.toLocaleString(): '0'}`} change="+10%" />
<MetricCard title="TVL" value={`$${((latestData?.tvl ?? 0) / 1000000).toFixed(2)}M`} change="+10%"/>
</div>

<div className="grid gap-6 lg:grid-cols-4">
<div className="space-y-6 lg:col-span-1">
<MetricCard title="Total Value Locked (TVL)" value={`$${((latestData?.tvl ?? 0) / 1000000).toFixed(2)}M`} change="+10%" />
<MetricCard title="Daily Active Users (DAU)" value={latestData.dau.toLocaleString()} change="+5%" />
<MetricCard title="Daily Transactions (TRX)" value={latestData.trx.toLocaleString()} change="+7%" />
</div>
<Card className="lg:col-span-3">
<CardHeader>
<CardTitle>{getChartTitle(activeTab)}</CardTitle>
Expand Down
1 change: 1 addition & 0 deletions src/services/subservice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export interface ChartData {
tvl: number;
dau: number;
trx: number;
dtv?: number;
}

export interface TableData {
Expand Down