DEAR-130 add some basic patterns, insight summary

24FSIIT16 · Jul 30, 2024 · ee9e5db · ee9e5db
1 parent 1e5af5c
commit ee9e5db
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/app/(main)/insights/components/InsightsSummary.tsx b/app/(main)/insights/components/InsightsSummary.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import { Card, CardContent } from '@components/ui/Card/Card';
+
+export default function InsightsSummary() {
+  return (
+    <Card>
+      <CardContent>
+        <div className="flex w-full items-start gap-2 text-sm">
+          <div className="grid gap-2">
+            <div className="flex items-center gap-2">
+              <p className="font-semibold">Know Your Happiness Patterns</p>
+            </div>
+            <div className="flex items-center text-xs font-light">happiness down, productivity down</div>
+            <div className="flex items-center text-xs font-light">most happiness influencing worktype..</div>
+            <div className="flex items-center text-xs font-light">correlations..</div>
+          </div>
+        </div>
+      </CardContent>{' '}
+    </Card>
+  );
+}
diff --git a/app/(main)/insights/components/WorkkindRadarChart.tsx b/app/(main)/insights/components/WorkkindRadarChart.tsx
@@ -14,7 +14,7 @@ const chartData = [
 ];
 
 const chartConfig = {
-  quantity: {
+  userAverage: {
     label: 'Quantity',
     color: '#E94B68',
   },
@@ -35,15 +35,16 @@ export default function WorkkindRadarChart() {
             <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
             <PolarAngleAxis dataKey="workkind" />
             <PolarGrid />
-            <Radar dataKey="quantity" fill="var(--color-quantity)" fillOpacity={0.4} />
+            <Radar dataKey="userAverage" fill="var(--color-quantity)" fillOpacity={0.4} />
+            <Radar dataKey="teamAverage" fill="var(--color-quantity)" fillOpacity={0.9} />
           </RadarChart>
         </ChartContainer>
       </CardContent>
       <CardFooter>
         <div className="flex w-full items-start gap-2 text-sm">
           <div className="grid gap-2">
             <div className="flex items-center gap-2">
-              <p className="font-semibold">Trackings per work type</p>
+              <p className="font-semibold">Happiness per work type - Personal vs. team</p>
             </div>
             <div className="flex items-center text-xs font-light">Showing number of tracked worktypes this year</div>
           </div>

diff --git a/app/(main)/insights/page.tsx b/app/(main)/insights/page.tsx
@@ -33,6 +33,10 @@ export interface Sprint {
   endDate: string;
 }
 
+function InsightsSummary() {
+  return null;
+}
+
 const InsightsPage: React.FC = () => {
   const { user } = useAuth();
   const { getInsightsByTeam } = useInsightsClient();
@@ -125,6 +129,8 @@ const InsightsPage: React.FC = () => {
     document.body.removeChild(link);
   };
 
+  // todo
+
   return (
     <div className="print-content">
       {user && selectedTeam && data && sprints ? (
@@ -175,7 +181,7 @@ const InsightsPage: React.FC = () => {
           </div>
           <div className="grid grid-cols-2 gap-4">
             <WorkkindBarChart />
-            <WorkkindRadarChart />
+            <InsightsSummary />
           </div>
           <div className="grid grid-cols-2 gap-4">
             <WorkkindRadarChart />