add graph data overview card

cardanoapi · May 27, 2024 · ab21cf6 · ab21cf6
1 parent b776dac
commit ab21cf6
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 41 deletions.
diff --git a/automonous_agent_frontend/src/app/components/OverViewCard.tsx b/automonous_agent_frontend/src/app/components/OverViewCard.tsx
@@ -1,16 +1,18 @@
 import { Card } from '@app/components/atoms/Card';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { cn } from '@app/components/lib/utils';
 
 export interface IOverViewCard {
     title?: string;
     value?: number | string;
     children?: React.ReactNode;
+    className?  :string
 }
 
-const OverViewCard: React.FC<IOverViewCard> = ({ title, value, children }) => {
+const OverViewCard: React.FC<IOverViewCard> = ({ title, value, children , className }) => {
     return (
-        <Card className="hover-transition-primary flex h-full w-full min-w-[269px] flex-col justify-between gap-y-0 p-4 pb-6">
+        <Card className= {cn("hover-transition-primary flex h-full w-full min-w-[269px] flex-col justify-between gap-y-0 p-4 pb-6",className)}>
             <div className="flex flex-col gap-y-2">
                 <div className="h4">{title}</div>
                 <div className="card-h1 pl-[2px]">{value}</div>

diff --git a/automonous_agent_frontend/src/app/components/OverViewGraphCard.tsx b/automonous_agent_frontend/src/app/components/OverViewGraphCard.tsx
@@ -0,0 +1,83 @@
+import { ArrowDown, ArrowUp, FileText } from 'lucide-react';
+import { FileCog } from 'lucide-react';
+
+import { Card } from '@app/components/atoms/Card';
+import CustomLineChart, {
+    ILineChartData
+} from '@app/components/molecules/chart/CustomLineChart';
+
+import OverViewCard from './OverViewCard';
+import { cn } from '@app/components/lib/utils';
+
+export interface IOverViewTemplatesCard {
+    title: string;
+    totalValue : number
+    changeRate : number
+    graphData?: ILineChartData[];
+    theme? : string
+}
+
+export const demoGraphData: ILineChartData[] = [
+    {
+        name: 'a',
+        amt: 0
+    },
+    {
+        name: 'b',
+        amt: 5
+    },
+    {
+        name : 'c',
+        amt : 12,
+    },
+    {
+        name : 'd',
+        amt : 11,
+    },
+    {
+        name: 'e',
+        amt: 7
+    }
+];
+
+export default function OverViewGraphCard({
+    title,
+    totalValue,
+    changeRate,
+    graphData = demoGraphData,
+    theme = "Primary"
+}: IOverViewTemplatesCard) {
+    return (
+        <OverViewCard title={title} value={totalValue}>
+            <div className="flex w-full items-center gap-x-12 4xl:gap-x-12 relative">
+                <div className="flex items-center gap-x-1">
+                    <div className={cn("rounded-full p-1" , theme === "Primary" ? "bg-brand-Orange-100" : "bg-brand-Green-100")}>
+                        {changeRate > 0 ? (
+                            <ArrowUp stroke={cn(theme === "Primary" ? "#FF660F" : "#007900" )} size={20} />
+                        ) :  (
+                            <ArrowDown stroke={cn(theme === "Primary" ? "#FF660F" : "#007900" )} size={20} />
+                        )}
+                    </div>
+                    <span className={cn("h4" , theme === "Primary" ? "text-brand-Orange-200" : "text-brand-Green-200")}>
+                        {changeRate} %
+                    </span>
+                </div>
+                <div className="absolute flex h-28 w-28 items-center gap-x-1 bottom-0 right-0">
+                    <CustomLineChart
+                        chartData={graphData}
+                        renderLines={false}
+                        renderXaxis={false}
+                        renderYaxis={false}
+                        renderDot={false}
+                        renderToolTip={false}
+                        strokeColor= {theme === "Primary" ? "#FF660F" : "#5F00D7"}
+                        strokeWidth="2"
+                        smoothStroke={false}
+                        fillGradiant={false}
+                        strokeCoverColor= {theme === "Primary" ? "#FFECD4" : "#F8E8F8"}
+                    />
+                </div>
+            </div>
+        </OverViewCard>
+    );
+}
diff --git a/automonous_agent_frontend/src/app/components/OverViewTemplatesCard.tsx b/automonous_agent_frontend/src/app/components/OverViewTemplatesCard.tsx
@@ -3,7 +3,6 @@ import { FileCog } from 'lucide-react';
 
 import { Card } from '@app/components/atoms/Card';
 
-import OverViewCardTitle from './OverViewCardTitle';
 import OverViewCard from './OverViewCard';
 
 export interface IOverViewTemplatesCard {

diff --git a/automonous_agent_frontend/src/app/page.tsx b/automonous_agent_frontend/src/app/page.tsx
@@ -11,13 +11,11 @@ import {
 import CustomLineChart, { ILineChartData } from '@app/components/molecules/chart/CustomLineChart';
 import OverViewAgentsCard from './components/OverViewAgentsCard';
 import OverViewTemplatesCard from './components/OverViewTemplatesCard';
-import OverViewTransactionsCard from './components/OverViewTransactionsCard';
 import { QueryClientProvider, useQuery } from '@tanstack/react-query';
 import { fetchActiveAgentsCount, fetchAgents } from './api/agents';
 import { fetchTemplates } from './api/templates';
-import { fetchFunctions } from './api/functions';
 import { fetchTransactionsCount, fetchTriggers } from './api/trigger';
-import OverViewTriggerCard from './components/OverViewTriggerCard';
+import OverViewGraphCard from './components/OverViewGraphCard';
 
 
 export interface IAgentsCardData {
@@ -26,6 +24,53 @@ export interface IAgentsCardData {
     inactiveAgents: number;
 }
 
+
+export const demoPropsalGraphData : ILineChartData[] = [
+    {
+        name: 'a',
+        amt: 0
+    },
+    {
+        name: 'b',
+        amt: 5
+    },
+    {
+        name : 'c',
+        amt : 12,
+    },
+    {
+        name : 'd',
+        amt : 11,
+    },
+    {
+        name: 'e',
+        amt: 7
+    } 
+]
+
+export const demoVoterGraphData : ILineChartData[] = [
+    {
+        name: 'a',
+        amt: 0
+    },
+    {
+        name: 'b',
+        amt: 4
+    },
+    {
+        name : 'c',
+        amt : 10,
+    },
+    {
+        name : 'd',
+        amt : 12,
+    },
+]
+
+
+
+
+
 export default function Home() {
 
     const [transactionChartData , setTransactionChartData] = useState<ILineChartData[]>([])
@@ -102,18 +147,18 @@ export default function Home() {
                     defaultTemplates={templates?.length}
                     customTemplates={0}
                 />
-                {/* To do Overview cards */}
-                <OverViewTransactionsCard
-                    title='Total Transactions'
-                    totalTransactions={transactionStats.totalTransactions}
-                    successPercentage={transactionStats.successPercentage}
-                    unsucessPercentage={transactionStats.unsuccessPercentage}
+                <OverViewGraphCard
+                  title='No of Proposals'
+                  totalValue={6}
+                  changeRate={5}
+                  graphData={demoPropsalGraphData}
                 />
-                <OverViewTriggerCard
-                    title="No of Triggers"
-                    total={triggers.length}
-                    active={triggers.length}
-                    inactive={0}
+                <OverViewGraphCard
+                  title='No of Voters'
+                  totalValue={5321}
+                  changeRate={19}
+                  theme="Secondary"
+                  graphData={demoVoterGraphData}
                 />
             </div>
 
@@ -135,7 +180,7 @@ export default function Home() {
                         </DropdownMenu>
                     </div>
                     <div className='h-[355px] mt-2 2xl:h-[500px] 4xl:h-[600px]'>
-                        <CustomLineChart chartData={transactionChartData}/>
+                        <CustomLineChart/>
                     </div>
                 </div>
             </Card>

diff --git a/automonous_agent_frontend/src/components/molecules/chart/CustomLineChart.tsx b/automonous_agent_frontend/src/components/molecules/chart/CustomLineChart.tsx
@@ -1,18 +1,18 @@
 'use client';
 
 import { useEffect } from 'react';
-
-import {
-    Area,
-    AreaChart,
-    CartesianGrid,
-    ResponsiveContainer,
-    Tooltip,
-    XAxis,
-    YAxis
+import { 
+    Area, 
+    AreaChart, 
+    CartesianGrid, 
+    ResponsiveContainer, 
+    Tooltip, 
+    XAxis, 
+    YAxis 
 } from 'recharts';
 
 import CustomTooltip from './CustomTooltip';
+import { v4 as uuidv4 } from 'uuid';  // Import the UUID library
 
 export interface ILineChartData {
     name: string;
@@ -36,42 +36,46 @@ export default function CustomLineChart({
     chartData,
     className,
     strokeColor = '#1C63E7',
-    strokeGradiantColor = '#0093FD1A',
+    strokeCoverColor = '#0093FD1A',
     fillGradiant = true,
     strokeWidth = '5',
-    renderLines = false,
+    renderLines = true,
     renderDot = false,
     renderToolTip = true,
     renderXaxis = true,
-    renderYaxis = true
+    renderYaxis = true,
+    smoothStroke = true
 }: {
-    chartData: ILineChartData[];
+    chartData?: ILineChartData[];
     className?: string;
     strokeColor?: string;
-    strokeGradiantColor? : string
-    fillGradiant? : boolean;
+    strokeCoverColor?: string;
+    fillGradiant?: boolean;
     strokeWidth?: string;
     renderLines?: boolean;
     renderDot?: boolean;
     renderToolTip?: boolean;
-    renderXaxis? : boolean,
-    renderYaxis? : boolean
+    renderXaxis?: boolean;
+    renderYaxis?: boolean;
+    smoothStroke?: boolean;
 }) {
 
     useEffect(() => {
         console.log(chartData);
     }, [chartData]);
 
+    const uniqueId = uuidv4();  // Generate a unique ID for this chart instance
+
     return (
         <ResponsiveContainer width="100%" height="100%" className={className}>
             <AreaChart
-                data={demoData}
+                data={chartData || demoData}
                 margin={{ top: 40, right: 0, left: 0, bottom: 0 }}
             >
                 <defs>
-                    <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
-                        <stop offset="5%" stopColor={strokeGradiantColor} stopOpacity={1} />
-                        <stop offset="90%" stopColor={strokeGradiantColor} stopOpacity={0} />
+                    <linearGradient id={`colorUv-${uniqueId}`} x1="0" y1="0" x2="0" y2="1">
+                        <stop offset="5%" stopColor={strokeCoverColor} stopOpacity={1} />
+                        <stop offset="90%" stopColor={strokeCoverColor} stopOpacity={0} />
                     </linearGradient>
                 </defs>
                 {renderLines && (
@@ -98,12 +102,12 @@ export default function CustomLineChart({
                     />
                 )}
                 <Area
-                    type="monotone"
+                    type={smoothStroke ? "monotone" : "linear"}
                     dataKey="amt"
                     stroke={strokeColor}
                     strokeWidth={strokeWidth}
                     fillOpacity={1}
-                    fill={fillGradiant ? "url(#colorUv)" : strokeColor}
+                    fill={fillGradiant ? `url(#colorUv-${uniqueId})` : strokeCoverColor}
                     isAnimationActive={false}
                     strokeLinecap="round"
                     dot={renderDot}

diff --git a/automonous_agent_frontend/tailwind.config.ts b/automonous_agent_frontend/tailwind.config.ts
@@ -78,6 +78,10 @@ const config = {
           Red : {
             100 : "#D04D52",
             200 : "#a32227"
+          },
+          Orange : {
+            100 : "#FFECD4",
+            200 : "#FF660F"
           }
         },
       },