refactor: hero

Signed-off-by: Jad Chahed <[email protected]>
vitessio · Jul 12, 2024 · 45cd486 · 45cd486
1 parent ac7c561
commit 45cd486
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 12 deletions.
diff --git a/website/src/assets/styles/tailwind.css b/website/src/assets/styles/tailwind.css
@@ -97,6 +97,7 @@ limitations under the License.
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --chart-day: 20.5 90.2% 48.2%;
 
     --front: 0 0% 100%;
     --back: 0 0% 10%;

diff --git a/website/src/pages/StatusPage/components/StatusHero.tsx b/website/src/pages/StatusPage/components/StatusHero.tsx
@@ -14,54 +14,111 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import useApiCall from "@/utils/Hook";
-import { statusDataTypes } from "@/types";
 import Hero, { HeroProps } from "@/common/Hero";
-import { Card, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import useApiCall from "@/utils/Hook";
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 const info = [
-  { title: "Total Benchmarks", content: "Total" },
-  { title: "Successful", content: "Finished" },
-  { title: `Total (last 30 days)`, content: "Last30Days" },
+  { title: "Benchmark in total", content: "Total" },
+  { title: "Benchmark this month", content: "Last30Days" },
+  { title: `Commits Benchmarked`, content: "Commits" },
 ];
 
+type DataStatusType = {
+  Total: number;
+  Last30Days: number;
+  Last7Days: number[];
+  Commits: number;
+};
+
 const heroProps: HeroProps = {
   title: "Status",
   description: (
     <>
       Arewefastyet has a single execution queue with tasks that are executed
       sequentially on our benchmarking server. Each execution has a status that
-      can be either: started, failed or finished. When a benchmark is marked as
-      finished it means that it ran successfully.
+      can be either: <b>started</b>started, <b>failed</b> or <b>finished</b>.
+      When a benchmark is marked as finished it means that it ran successfully.
     </>
   ),
 };
 
 export default function StatusHero() {
-  const { data: dataStatusStats } = useApiCall<statusDataTypes>(
+  const { data: dataStatusStats } = useApiCall<DataStatusType>(
     `${import.meta.env.VITE_API_URL}status/stats`
   );
 
+  console.log({ dataStatusStats });
+
+  const chartConfig = {
+    day: {
+      label: "Day",
+      color: "hsl(var(--chart-1))",
+    },
+  };
+
+  const last7days = [234, 283, 210, 371, 234, 283, 210];
+
+  const chartData = last7days.map((commits, index) => ({
+    day: index.toString(),
+    commits,
+  }));
 
   return (
     <Hero title={heroProps.title} description={heroProps.description}>
       <div className="flex flex-col md:flex-row justify-between items-center w-full md:w-fit md:gap-x-24">
         {info.map(({ content, title }, key) => (
           <Card
             key={key}
-            className="w-[214px] h-fit md:min-h-fit border-border"
+            className="w-[300px] h-[150px] md:min-h-[130px] border-border"
           >
             <CardHeader>
               <CardTitle
                 className="counter text-3xl md:text-5xl text-primary"
-                style={{ "--num": dataStatusStats[content] }}
+                style={{ ["--num" as string]: dataStatusStats[content] }}
               ></CardTitle>
             </CardHeader>
-            <CardFooter className="text-xs md:text-lg font-light md:font-medium">
+            <CardFooter className="text-xs md:text-xl font-light md:font-medium">
               {title}
             </CardFooter>
           </Card>
         ))}
+        <Card className=" w-[300px] max-h-[150px] border-border">
+          <CardContent className="w-[300px] max-h-[150px]">
+            <ChartContainer config={chartConfig}>
+              <BarChart
+                margin={{ top: 12, right: 0, left: -32, bottom: 0 }}
+                barSize={10}
+                accessibilityLayer
+                data={chartData}
+              >
+                <YAxis tickMargin={0} />
+                <XAxis tickMargin={0} tick={false} />
+                <CartesianGrid vertical={false} />
+                <ChartTooltip
+                  cursor={true}
+                  content={<ChartTooltipContent hideLabel />}
+                />
+                <Bar dataKey="commits" fill="var(--color-day)" />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+          <CardFooter className="text-xs text-primary flex justify-center md:text-sm font-light md:font-medium mt-[-28px]">
+            Benchmarks over the last 7 days
+          </CardFooter>
+        </Card>
       </div>
     </Hero>
   );