feat: spice up contributors pr chart styles (#20)

* use v2 pr/search * fix build * wip data * data is fetched and structured * remove async functions * add nivo/line and prep data * o.filter is not a function * dirty fix for rendering the chart * fix type error * adds meta data * npm run format * swap Datum * npm run format * chore: add required packages * chore: disable comma dangle rule * chore: update chart styles and data * feat: fix all type errors and refactor implementation * chore: show stats data * chore: more updates to charts data * chore: update formating and color of chart lines * misc: minor refactor * fix: build now goes through * Update components/CIResponsiveLine.tsx * chore: fetch data from server and remove loading state * style: update styles for mobile * style: reduce chart margin right * fix: chart lines inconsistenccy * fix: time formating error --------- Co-authored-by: Brian 'bdougie' Douglas <[email protected]> Co-authored-by: Brian Douglas <[email protected]>
open-sauced · Jan 5, 2024 · bdf937f · bdf937f
1 parent 4af05a6
commit bdf937f
Show file tree

Hide file tree

Showing 7 changed files with 255 additions and 121 deletions.
diff --git a/components/CIResponsiveLine.tsx b/components/CIResponsiveLine.tsx
@@ -7,12 +7,13 @@ const CIResponsiveLine = ({ data }: Datum) => {
       <div style={{ height: 400, width: "100%" }}>
         <ResponsiveLine
           data={data}
-          margin={{ top: 50, right: 150, bottom: 50, left: 60 }}
+          margin={{ top: 50, right: 50, bottom: 50, left: 60 }}
           yScale={{
             type: "linear",
+            stacked: true,
           }}
           motionConfig="stiff"
-          curve="catmullRom"
+          curve="basis"
           enableSlices="x"
           axisTop={null}
           isInteractive={true}
@@ -28,8 +29,21 @@ const CIResponsiveLine = ({ data }: Datum) => {
           }}
           axisBottom={{
             tickSize: 0,
+            tickValues: 7,
+            tickPadding: 5,
             format: (value) => {
-              return format(parse(value, "MM/dd/yyyy", new Date()), "MMM d");
+              const date = parse(value, "MM/dd/yyyy", new Date());
+              return format(date, "MMM d");
+            },
+          }}
+          theme={{
+            axis: {},
+            grid: {
+              line: {
+                strokeDasharray: "4 4",
+                strokeWidth: 1,
+                strokeOpacity: 0.7,
+              },
             },
           }}
           pointSize={0}
@@ -38,7 +52,6 @@ const CIResponsiveLine = ({ data }: Datum) => {
           enableGridY={false}
           useMesh={true}
           enableArea={false}
-          enableCrosshair={true}
           enablePointLabel={false}
           colors={(d) => d.color}
         />

diff --git a/hooks/useContributorData.ts b/hooks/useContributorData.ts
@@ -1,13 +1,22 @@
-import useSWR from "swr";
+import useSWR, { Fetcher } from "swr";
 import { useCallback } from "react";
+import apiFetcher from "./useSWR";
 interface PaginatedDataResponse {
   readonly data: DBContributorsPR[];
   readonly meta: Meta;
 }
 
+type query = {
+  repo: string;
+  limit?: number;
+  startDate?: number;
+  status?: "closed" | "open";
+  initialData?: PaginatedDataResponse;
+};
+
 // We're not currently using this, we're just using useSWR directly inside ChildWithSWR
 // this needs useCallback wrap if we want to use it in the other component
-const useContributorData = (repo: string, startDate?: number, status?: "closed" | "open") => {
+const useContributorData = ({ repo, startDate, status, limit, initialData }: query) => {
   const query = new URLSearchParams();
 
   if (startDate) {
@@ -24,7 +33,11 @@ const useContributorData = (repo: string, startDate?: number, status?: "closed"
 
   const endpointString = `${baseEndpoint}?${query.toString()}`;
 
-  const { data, error, mutate } = useSWR<PaginatedDataResponse, Error>(repo ? endpointString : null);
+  const { data, error, mutate } = useSWR<PaginatedDataResponse, Error>(
+    repo ? endpointString : null,
+    apiFetcher as Fetcher<PaginatedDataResponse, Error>,
+    { fallbackData: initialData }
+  );
 
   return {
     data: data?.data ?? [],

diff --git a/lib/prCounts.ts b/lib/prCounts.ts
@@ -1,3 +1,5 @@
+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
@@ -13,8 +15,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_created_at);
-    const bDate = new Date(b.pr_created_at);
+    const aDate = new Date(a.pr_closed_at);
+    const bDate = new Date(b.pr_closed_at);
 
     return aDate.getTime() - bDate.getTime();
   });
@@ -26,7 +28,7 @@ const prPerDay = (open: DBContributorsPR[], closed: DBContributorsPR[]) => {
     return aDate.getTime() - bDate.getTime();
   });
   const mergedPRsPerDay = sortedMergedPRs.reduce<Record<string, number>>((acc, item) => {
-    const mergedDate = new Date(item.pr_merged_at).toLocaleDateString();
+    const mergedDate = format(new Date(item.pr_merged_at), "MM/dd/yyyy");
 
     if (item.pr_is_merged) {
       if (!acc[mergedDate]) {
@@ -39,7 +41,7 @@ const prPerDay = (open: DBContributorsPR[], closed: DBContributorsPR[]) => {
   }, {});
 
   const closedPRsPerDay = sortedMergedPRs.reduce<Record<string, number>>((acc, item) => {
-    const closedDate = new Date(item.pr_updated_at).toLocaleDateString();
+    const closedDate = format(new Date(item.pr_closed_at), "MM/dd/yyyy");
 
     if (item.pr_is_merged === false) {
       if (!acc[closedDate]) {
@@ -52,7 +54,7 @@ const prPerDay = (open: DBContributorsPR[], closed: DBContributorsPR[]) => {
   }, {});
 
   const openedPRsPerDay = sortedOpenedPRs.reduce<Record<string, number>>((acc, item) => {
-    const openedDate = new Date(item.pr_created_at).toLocaleDateString();
+    const openedDate = format(new Date(item.pr_created_at), "MM/dd/yyyy");
 
     if (!acc[openedDate]) {
       acc[openedDate] = 0;
@@ -75,7 +77,7 @@ const prPerDay = (open: DBContributorsPR[], closed: DBContributorsPR[]) => {
     },
     {
       id: "Merged PRs",
-      color: "#3b38f1",
+      color: "#A78BFA",
       data: mergedPrs,
     },
     {

diff --git a/next-types.d.ts b/next-types.d.ts
@@ -24,4 +24,5 @@ interface DBContributorsPR {
   readonly pr_title: string;
   readonly pr_updated_at: string;
   readonly repo_name: string;
+  readonly pr_closed_at: string;
 }
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json