feat: Clean up charts so it makes sense (sort of) (#33)

* wip getting a zero based chart going * fixes closed totals * removed sorting * remove merged state * removes console.log * format * fixes build error * fix spacing * still fixing the build, merged error * indent eslint remove
open-sauced · Feb 1, 2024 · c16965a · c16965a
1 parent 3fbdb14
commit c16965a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 41 deletions.
diff --git a/components/CIResponsiveLine.tsx b/components/CIResponsiveLine.tsx
@@ -13,7 +13,7 @@ const CIResponsiveLine = ({ data }: Datum) => {
             stacked: true,
           }}
           motionConfig="stiff"
-          curve="basis"
+          curve="linear"
           enableSlices="x"
           axisTop={null}
           isInteractive={true}
@@ -48,10 +48,10 @@ const CIResponsiveLine = ({ data }: Datum) => {
           }}
           pointSize={0}
           pointColor={{ theme: "background" }}
-          enableGridX={false}
+          enableGridX={true}
           enableGridY={false}
           useMesh={true}
-          enableArea={false}
+          enableArea={true}
           enablePointLabel={false}
           colors={(d) => d.color}
         />

diff --git a/hooks/useContributorData.ts b/hooks/useContributorData.ts
@@ -27,7 +27,7 @@ const useContributorData = ({ repo, startDate, status, limit, initialData }: que
   }
   query.set("repo", `${repo}`);
 
-  query.set("limit", "100");
+  query.set("orderBy", "updated_at");
 
   const baseEndpoint = "prs/search";
 

diff --git a/lib/prCounts.ts b/lib/prCounts.ts
@@ -1,5 +1,3 @@
-import { format, parse } from "date-fns";
-
 const count = (prData: DBContributorsPR[]): { mergedCount: number; closedCount: number; totalCount: number } => {
   const mergedCount = prData.filter((item) => item.pr_is_merged).length; // Merged PRs
   const closedCount = prData.filter((item) => item.pr_state === "closed").length; // Closed PRs
@@ -14,21 +12,8 @@ const count = (prData: DBContributorsPR[]): { mergedCount: number; closedCount:
 };
 
 const prPerDay = (open: DBContributorsPR[], closed: DBContributorsPR[]) => {
-  const sortedMergedPRs = closed.sort((a, b) => {
-    const aDate = new Date(a.pr_closed_at);
-    const bDate = new Date(b.pr_closed_at);
-
-    return aDate.getTime() - bDate.getTime();
-  });
-
-  const sortedOpenedPRs = open.sort((a, b) => {
-    const aDate = new Date(a.pr_created_at);
-    const bDate = new Date(b.pr_created_at);
-
-    return aDate.getTime() - bDate.getTime();
-  });
-  const mergedPRsPerDay = sortedMergedPRs.reduce<Record<string, number>>((acc, item) => {
-    const mergedDate = format(new Date(item.pr_merged_at), "MM/dd/yyyy");
+  const mergedPRsPerDay = closed.reduce<Record<string, number>>((acc, item) => {
+    const mergedDate = new Date(item.pr_merged_at).toLocaleDateString();
 
     if (item.pr_is_merged) {
       if (!acc[mergedDate]) {
@@ -40,8 +25,8 @@ const prPerDay = (open: DBContributorsPR[], closed: DBContributorsPR[]) => {
     return acc;
   }, {});
 
-  const closedPRsPerDay = sortedMergedPRs.reduce<Record<string, number>>((acc, item) => {
-    const closedDate = format(new Date(item.pr_closed_at), "MM/dd/yyyy");
+  const closedPRsPerDay = closed.reduce<Record<string, number>>((acc, item) => {
+    const closedDate = new Date(item.pr_closed_at).toLocaleDateString();
 
     if (item.pr_is_merged === false) {
       if (!acc[closedDate]) {
@@ -53,8 +38,8 @@ const prPerDay = (open: DBContributorsPR[], closed: DBContributorsPR[]) => {
     return acc;
   }, {});
 
-  const openedPRsPerDay = sortedOpenedPRs.reduce<Record<string, number>>((acc, item) => {
-    const openedDate = format(new Date(item.pr_created_at), "MM/dd/yyyy");
+  const openedPRsPerDay = open.reduce<Record<string, number>>((acc, item) => {
+    const openedDate = new Date(item.pr_updated_at).toLocaleDateString();
 
     if (!acc[openedDate]) {
       acc[openedDate] = 0;
@@ -73,17 +58,17 @@ const prPerDay = (open: DBContributorsPR[], closed: DBContributorsPR[]) => {
     {
       id: "Opened PRs",
       color: "#10b981",
-      data: openedPRs,
+      data: openedPRs.reverse(),
     },
     {
       id: "Merged PRs",
-      color: "#A78BFA",
-      data: mergedPrs,
+      color: "#3b38f1",
+      data: mergedPrs.reverse(),
     },
     {
       id: "Closed PRs",
       color: "#ef4444",
-      data: closedPRs,
+      data: closedPRs.reverse(),
     },
   ];
 };

diff --git a/pages/[owner]/[repo]/index.tsx b/pages/[owner]/[repo]/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable indent */
 import React from "react";
 import { useRouter } from "next/router";
 import dynamic from "next/dynamic";
@@ -20,7 +21,7 @@ export interface PaginatedDataResponse {
 interface StatsCardProps {
   type: "issue" | "pr";
   count: number;
-  status: "open" | "closed" | "merged";
+  status: "open" | "closed";
   prevMonthCount?: number;
 }
 
@@ -51,9 +52,7 @@ const StatsCard = ({ type, status, count, prevMonthCount }: StatsCardProps) => {
       >
         {IconMap[type][status]}
       </div>
-      <div className="capitalize text-gray-500 text-sm">
-        Pull Requests {status === "merged" || status === "closed" ? status : null}
-      </div>
+      <div className="capitalize text-gray-500 text-sm">Pull Requests {status === "closed" ? status : null}</div>
       <div className="flex items-center justify-between">
         <span className="text-3xl font-semibold">{count}</span>
         <div className="flex items-center gap-1">
@@ -75,12 +74,12 @@ const StatsCard = ({ type, status, count, prevMonthCount }: StatsCardProps) => {
 const DataLabel = ({ label, type }: { label: string; type: "merged" | "closed" | "open" }) => {
   const getColorByType = (type: string) => {
     switch (type) {
-    case "merged":
-      return "bg-violet-400";
-    case "closed":
-      return "bg-red-500";
-    case "open":
-      return "bg-green-500";
+      case "merged":
+        return "bg-violet-400";
+      case "closed":
+        return "bg-red-500";
+      case "open":
+        return "bg-green-500";
     }
   };
 
@@ -147,14 +146,14 @@ const OwnerRepo = ({
             />
             <StatsCard
               type="pr"
-              status="merged"
+              status="closed"
               count={closedPrs.filter((pr) => pr.pr_is_merged === true).length}
               prevMonthCount={prevMonthClosedPrs ? prevMonthClosedPrsMeta.itemCount : undefined}
             />
             <StatsCard
               type="pr"
               status="closed"
-              count={closedPrs.filter((item) => item.pr_state === "close" && !item.pr_is_merged).length}
+              count={closedPrs.filter((item) => item.pr_state === "closed" && !item.pr_is_merged).length}
               prevMonthCount={prevMonthClosedPrsMeta ? prevMonthClosedPrsMeta.itemCount : undefined}
             />
           </div>