feat: ✨ updated chart and stats colors

WasiqB · Sep 26, 2024 · 9643ac4 · 9643ac4
1 parent 38172bf
commit 9643ac4
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 92 deletions.
diff --git a/app/(app)/globals.css b/app/(app)/globals.css
@@ -34,10 +34,9 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --passed: 142.1 76.2% 36.3%;
-    --failed: 346.8 77.2% 49.8%;
+    --passed: 141.7 76.6% 73.1%;
+    --failed: 0 84.2% 60.2%;
     --skipped: 50.4 97.8% 63.5%;
-    --ignored: 198.4 93.2% 59.6%;
     --radius: 0.5rem;
   }
   .dark {
@@ -65,10 +64,9 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
-    --passed: 142.1 76.2% 36.3%;
-    --failed: 346.8 77.2% 49.8%;
+    --passed: 141.7 76.6% 73.1%;
+    --failed: 0 84.2% 60.2%;
     --skipped: 50.4 97.8% 63.5%;
-    --ignored: 198.4 93.2% 59.6%;
   }
 }
 

diff --git a/app/(app)/results/page.tsx b/app/(app)/results/page.tsx
@@ -21,6 +21,8 @@ import { ChartConfig } from '@/components/ui/chart';
 import DoughNutComponent from '@/components/charts/dough-nut-chart';
 import { getData, TestResultData } from '@/components/data-table/data';
 import { columns } from '@/components/data-table/columns';
+import { PieComponent } from '@/components/charts/pie-chart';
+import { round } from '@/lib/formatting';
 
 const chartConfig: ChartConfig = {
   total: {
@@ -68,56 +70,83 @@ const ResultsPage = (): JSX.Element => {
     }
   }, []);
 
-  const chartData = [
+  const totalTests = passed + failed + skipped;
+
+  const chartCountData = [
     { status: 'pass', total: passed, fill: 'var(--color-pass)' },
     { status: 'fail', total: failed, fill: 'var(--color-fail)' },
     { status: 'skip', total: skipped, fill: 'var(--color-skip)' },
-    { status: 'ignored', total: 0, fill: 'var(--color-ignored)' },
+  ];
+
+  const chartPieData = [
+    {
+      status: 'pass',
+      total: round((passed / totalTests) * 100),
+      fill: 'var(--color-pass)',
+    },
+    {
+      status: 'fail',
+      total: round((failed / totalTests) * 100),
+      fill: 'var(--color-fail)',
+    },
+    {
+      status: 'skip',
+      total: round((skipped / totalTests) * 100),
+      fill: 'var(--color-skip)',
+    },
   ];
 
   return (
     <section className='container mx-auto space-y-6 p-4'>
       <h1 className='mb-8 text-center text-3xl font-bold'>Ultra Report</h1>
-      <div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
+      <div className='grid grid-cols-1 gap-6'>
         <Card>
           <CardHeader>
-            <CardTitle>Test Statistics</CardTitle>
+            <CardTitle className='text-xl'>Test Statistics</CardTitle>
             <CardDescription>Overall Test execution statistics</CardDescription>
           </CardHeader>
           <CardContent>
-            <div className='grid grid-cols-2 gap-4'>
-              <div className='rounded-lg bg-blue-100 p-4'>
+            <div className='grid grid-cols-4 gap-4'>
+              <div className='rounded-lg bg-blue-200 p-4'>
                 <CardDescription>Total Tests</CardDescription>
                 <CardTitle>{passed + failed + skipped}</CardTitle>
               </div>
-              <div className='rounded-lg bg-green-100 p-4'>
+              <div className='rounded-lg bg-green-200 p-4'>
                 <CardDescription>Passed</CardDescription>
                 <CardTitle>{passed}</CardTitle>
               </div>
-              <div className='rounded-lg bg-red-100 p-4'>
+              <div className='rounded-lg bg-red-200 p-4'>
                 <CardDescription>Failed</CardDescription>
                 <CardTitle>{failed}</CardTitle>
               </div>
-              <div className='rounded-lg bg-yellow-100 p-4'>
+              <div className='rounded-lg bg-yellow-200 p-4'>
                 <CardDescription>Skipped</CardDescription>
                 <CardTitle>{skipped}</CardTitle>
               </div>
             </div>
           </CardContent>
         </Card>
+      </div>
+      <div className='grid grid-cols-2 gap-6'>
         <DoughNutComponent
-          title='Test Summary'
-          description='Status based distribution of Automated Test cases result'
+          title='Test Summary Counts'
+          description='Status based % distribution of Test results'
           config={chartConfig}
-          data={chartData}
-          totalValue={passed + failed + skipped}
+          data={chartCountData}
+          totalValue={totalTests}
           valueLabel='Test cases'
         />
+        <PieComponent
+          title='Test Summary %'
+          description='Status based distribution of Automated Test cases result'
+          config={chartConfig}
+          data={chartPieData}
+        />
       </div>
       {result ? (
         <Card>
           <CardHeader>
-            <CardTitle>Test Details</CardTitle>
+            <CardTitle className='text-xl'>Test Details</CardTitle>
             <CardDescription>
               List of all the executed test cases
             </CardDescription>

diff --git a/components/charts/dough-nut-chart.tsx b/components/charts/dough-nut-chart.tsx
@@ -38,7 +38,7 @@ const DoughNutComponent = ({
   return (
     <Card>
       <CardHeader className='items-center pb-0'>
-        <CardTitle>{title}</CardTitle>
+        <CardTitle className='text-xl'>{title}</CardTitle>
         {description && <CardDescription>{description}</CardDescription>}
       </CardHeader>
       <CardContent className='flex-1 pb-0'>
@@ -60,7 +60,7 @@ const DoughNutComponent = ({
               data={data}
               dataKey='total'
               nameKey='status'
-              innerRadius={60}
+              innerRadius={50}
               strokeWidth={5}
             >
               <Label

diff --git a/components/charts/pie-chart.tsx b/components/charts/pie-chart.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { TrendingUp } from 'lucide-react';
 import { Pie, PieChart } from 'recharts';
 
 import {
@@ -14,97 +13,62 @@ import {
 import {
   ChartConfig,
   ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart';
 
-export const description = 'A pie chart with a custom label';
-
-const chartData = [
-  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
-  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
-  { browser: 'firefox', visitors: 187, fill: 'var(--color-firefox)' },
-  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
-  { browser: 'other', visitors: 90, fill: 'var(--color-other)' },
-];
-
-const chartConfig = {
-  visitors: {
-    label: 'Visitors',
-  },
-  chrome: {
-    label: 'Chrome',
-    color: 'hsl(var(--chart-1))',
-  },
-  safari: {
-    label: 'Safari',
-    color: 'hsl(var(--chart-2))',
-  },
-  firefox: {
-    label: 'Firefox',
-    color: 'hsl(var(--chart-3))',
-  },
-  edge: {
-    label: 'Edge',
-    color: 'hsl(var(--chart-4))',
-  },
-  other: {
-    label: 'Other',
-    color: 'hsl(var(--chart-5))',
-  },
-} satisfies ChartConfig;
+interface PieProps {
+  title: string;
+  description?: string;
+  config: ChartConfig;
+  data: any[];
+  footer?: string;
+}
 
-export function Component(): JSX.Element {
+export function PieComponent({
+  config,
+  data,
+  title,
+  description,
+  footer,
+}: PieProps): JSX.Element {
   return (
     <Card className='flex flex-col'>
       <CardHeader className='items-center pb-0'>
-        <CardTitle>Pie Chart - Custom Label</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
+        <CardTitle className='text-xl'>{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
       </CardHeader>
       <CardContent className='flex-1 pb-0'>
         <ChartContainer
-          config={chartConfig}
+          config={config}
           className='mx-auto aspect-square max-h-[250px]'
         >
           <PieChart>
             <ChartTooltip
-              content={<ChartTooltipContent nameKey='visitors' hideLabel />}
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <ChartLegend
+              className='pb-2'
+              align='left'
+              content={<ChartLegendContent />}
             />
             <Pie
-              data={chartData}
-              dataKey='visitors'
+              data={data}
+              dataKey='total'
+              nameKey='status'
               labelLine={false}
-              label={({ payload, ...props }) => {
-                return (
-                  <text
-                    cx={props.cx}
-                    cy={props.cy}
-                    x={props.x}
-                    y={props.y}
-                    textAnchor={props.textAnchor}
-                    dominantBaseline={props.dominantBaseline}
-                    fill='hsla(var(--foreground))'
-                  >
-                    {`${
-                      chartConfig[payload.browser as keyof typeof chartConfig]
-                        ?.label
-                    } (${payload.visitors})`}
-                  </text>
-                );
-              }}
-              nameKey='browser'
             />
           </PieChart>
         </ChartContainer>
       </CardContent>
-      <CardFooter className='flex-col gap-2 text-sm'>
-        <div className='flex items-center gap-2 font-medium leading-none'>
-          Trending up by 5.2% this month <TrendingUp className='h-4 w-4' />
-        </div>
-        <div className='leading-none text-muted-foreground'>
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
+      {footer && (
+        <CardFooter className='flex-col gap-2 text-sm'>
+          <div className='leading-none text-muted-foreground'>{footer}</div>
+        </CardFooter>
+      )}
     </Card>
   );
 }
diff --git a/lib/formatting.ts b/lib/formatting.ts
@@ -15,3 +15,7 @@ export const formatTime = (dateTime: string): string => {
 
   return formattedTime;
 };
+
+export const round = (value: number): number => {
+  return Math.round((value + Number.EPSILON) * 100) / 100;
+};