From 0670858785fa2ef9797b9a2170e13460ac1672ed Mon Sep 17 00:00:00 2001
From: vaibhav-xp <vibhu.astute@gmail.com>
Date: Wed, 20 Nov 2024 09:16:30 +0530
Subject: [PATCH 1/2] Bug: Charts hover states are not standalone #4189

---
 components/Graphs/ForksChart.tsx  |  9 +++++----
 components/Graphs/IssuesChart.tsx |  8 +++++---
 components/Graphs/PRChart.tsx     |  8 +++++---
 components/Graphs/StarsChart.tsx  | 10 ++++++----
 pages/s/[org]/[repo]/index.tsx    | 10 +++++-----
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/components/Graphs/ForksChart.tsx b/components/Graphs/ForksChart.tsx
index c9010c3e3..a479914c0 100644
--- a/components/Graphs/ForksChart.tsx
+++ b/components/Graphs/ForksChart.tsx
@@ -25,7 +25,7 @@ import humanizeNumber from "lib/utils/humanizeNumber";
 type ForksChartProps = {
   stats: StatsType[] | undefined;
   total: number;
-  syncId: number;
+  // syncId: number;
   range: DayRange;
   isLoading: boolean;
   onCategoryClick?: (category: string) => void;
@@ -35,7 +35,7 @@ type ForksChartProps = {
 export default function ForksChart({
   stats,
   total,
-  syncId,
+  // syncId,
   range = 30,
   isLoading,
   onCategoryClick,
@@ -52,7 +52,8 @@ export default function ForksChart({
     switch (category) {
       case "daily":
         return (
-          <BarChart data={dailyData} syncId={syncId} className="!-left-6">
+          // <BarChart data={dailyData} syncId={syncId} className="!-left-6">
+          <BarChart data={dailyData} className="!-left-6">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
             <YAxis
               interval={1}
@@ -69,7 +70,7 @@ export default function ForksChart({
         );
       case "history":
         return (
-          <LineChart data={historyData} syncId={syncId} className="!-left-6">
+          <LineChart data={historyData} className="!-left-6">
             <XAxis dataKey="bucket" tick={false} />
             <YAxis
               domain={["auto", "auto"]}
diff --git a/components/Graphs/IssuesChart.tsx b/components/Graphs/IssuesChart.tsx
index abe2a66ec..986316c44 100644
--- a/components/Graphs/IssuesChart.tsx
+++ b/components/Graphs/IssuesChart.tsx
@@ -22,13 +22,14 @@ import { humanizeNumber } from "netlify/og-image-utils";
 type IssuesChartProps = {
   stats: StatsType[] | undefined;
   velocity: number;
-  syncId: number;
+  // syncId: number;
   range: DayRange;
   isLoading: boolean;
   className?: string;
 };
 
-export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoading, className }: IssuesChartProps) {
+// export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoading, className }: IssuesChartProps) {
+export default function IssuesChart({ stats, velocity, range = 30, isLoading, className }: IssuesChartProps) {
   const dailyData = useMemo(() => getDailyIssuesHistogramToDays({ stats, range }), [stats, range]);
   const bucketTicks = useMemo(() => getTicks({ histogram: dailyData, range }), [dailyData, range]);
   const { openedRangedTotal, closedRangedTotal } = useMemo(
@@ -87,7 +88,8 @@ export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoa
         {isLoading ? (
           <SkeletonWrapper width={100} height={100} />
         ) : (
-          <LineChart data={dailyData} syncId={syncId} className="-left-6">
+          // <LineChart data={dailyData} syncId={syncId} className="-left-6">
+          <LineChart data={dailyData} className="-left-6">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
             <YAxis
               domain={["auto", "auto"]}
diff --git a/components/Graphs/PRChart.tsx b/components/Graphs/PRChart.tsx
index 260f653e3..e114ba9d8 100644
--- a/components/Graphs/PRChart.tsx
+++ b/components/Graphs/PRChart.tsx
@@ -22,13 +22,14 @@ import { humanizeNumber } from "netlify/og-image-utils";
 type PRChartProps = {
   stats: StatsType[] | undefined;
   velocity: number;
-  syncId: number;
+  // syncId: number;
   range: DayRange;
   isLoading: boolean;
   className?: string;
 };
 
-export default function PRChart({ stats, velocity, syncId, range = 30, isLoading, className }: PRChartProps) {
+// export default function PRChart({ stats, velocity, syncId, range = 30, isLoading, className }: PRChartProps) {
+export default function PRChart({ stats, velocity, range = 30, isLoading, className }: PRChartProps) {
   const dailyData = useMemo(() => getDailyPullRequestsHistogramToDays({ stats, range }), [stats, range]);
   const bucketTicks = useMemo(() => getTicks({ histogram: dailyData, range }), [dailyData, range]);
   const { openedRangedTotal, closedRangedTotal } = useMemo(
@@ -87,7 +88,8 @@ export default function PRChart({ stats, velocity, syncId, range = 30, isLoading
         {isLoading ? (
           <SkeletonWrapper width={100} height={100} />
         ) : (
-          <LineChart data={dailyData} syncId={syncId} className="-left-6">
+          // <LineChart data={dailyData} syncId={syncId} className="-left-6">
+          <LineChart data={dailyData} className="-left-6">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
             <YAxis
               domain={["auto", "auto"]}
diff --git a/components/Graphs/StarsChart.tsx b/components/Graphs/StarsChart.tsx
index ff88a9ebe..e4a3f298c 100644
--- a/components/Graphs/StarsChart.tsx
+++ b/components/Graphs/StarsChart.tsx
@@ -25,7 +25,7 @@ import humanizeNumber from "lib/utils/humanizeNumber";
 type StarsChartProps = {
   stats: StatsType[] | undefined;
   total: number;
-  syncId: number;
+  // syncId: number;
   range: DayRange;
   isLoading: boolean;
   onCategoryClick?: (category: string) => void;
@@ -35,7 +35,7 @@ type StarsChartProps = {
 export default function StarsChart({
   stats,
   total,
-  syncId,
+  // syncId,
   range = 30,
   isLoading,
   onCategoryClick,
@@ -52,7 +52,8 @@ export default function StarsChart({
     switch (category) {
       case "daily":
         return (
-          <BarChart data={dailyData} syncId={syncId} className="-left-5">
+          // <BarChart data={dailyData} syncId={syncId} className="-left-5">
+          <BarChart data={dailyData} className="-left-5">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
             <YAxis
               interval={1}
@@ -69,7 +70,8 @@ export default function StarsChart({
         );
       case "history":
         return (
-          <LineChart data={historyData} syncId={syncId} className="-left-5">
+          // <LineChart data={historyData} syncId={syncId} className="-left-5">
+          <LineChart data={historyData} className="-left-5">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
             <YAxis
               domain={["auto", "auto"]}
diff --git a/pages/s/[org]/[repo]/index.tsx b/pages/s/[org]/[repo]/index.tsx
index a8ec3e5b3..4f6eded4b 100644
--- a/pages/s/[org]/[repo]/index.tsx
+++ b/pages/s/[org]/[repo]/index.tsx
@@ -92,7 +92,7 @@ interface RepoPageProps {
 }
 
 export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
-  const syncId = repoData.id;
+  // const syncId = repoData.id;
   const router = useRouter();
   const { toast } = useToast();
   const posthog = usePostHog();
@@ -572,7 +572,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={issueStats}
                         range={range}
                         velocity={repoStats?.issues_velocity_count ?? 0}
-                        syncId={syncId}
+                        // syncId={syncId}
                         isLoading={isIssueDataLoading}
                       />
                     </CopyContainer>
@@ -599,7 +599,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={prStats}
                         range={range}
                         velocity={repoStats?.pr_velocity_count ?? 0}
-                        syncId={syncId}
+                        // syncId={syncId}
                         isLoading={isPrDataLoading}
                       />
                     </CopyContainer>
@@ -631,7 +631,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={starsData}
                         total={repoData.stars}
                         range={range}
-                        syncId={syncId}
+                        // syncId={syncId}
                         isLoading={isStarsDataLoading}
                         onCategoryClick={(category) =>
                           posthog.capture("Repo Pages: clicked Stars Chart category", {
@@ -665,7 +665,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={forkStats}
                         total={repoData.forks}
                         range={range}
-                        syncId={syncId}
+                        // syncId={syncId}
                         isLoading={isForksDataLoading}
                         onCategoryClick={(category) =>
                           posthog.capture("Repo Pages: clicked Forks Chart category", {

From 1424c721835819c02f04111988370c392caaaf68 Mon Sep 17 00:00:00 2001
From: vaibhav-xp <vibhu.astute@gmail.com>
Date: Wed, 20 Nov 2024 09:16:30 +0530
Subject: [PATCH 2/2] fix: Charts hover states are not standalone #4189

---
 components/Graphs/ForksChart.tsx  |  9 +++++----
 components/Graphs/IssuesChart.tsx |  8 +++++---
 components/Graphs/PRChart.tsx     |  8 +++++---
 components/Graphs/StarsChart.tsx  | 10 ++++++----
 pages/s/[org]/[repo]/index.tsx    | 10 +++++-----
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/components/Graphs/ForksChart.tsx b/components/Graphs/ForksChart.tsx
index c9010c3e3..a479914c0 100644
--- a/components/Graphs/ForksChart.tsx
+++ b/components/Graphs/ForksChart.tsx
@@ -25,7 +25,7 @@ import humanizeNumber from "lib/utils/humanizeNumber";
 type ForksChartProps = {
   stats: StatsType[] | undefined;
   total: number;
-  syncId: number;
+  // syncId: number;
   range: DayRange;
   isLoading: boolean;
   onCategoryClick?: (category: string) => void;
@@ -35,7 +35,7 @@ type ForksChartProps = {
 export default function ForksChart({
   stats,
   total,
-  syncId,
+  // syncId,
   range = 30,
   isLoading,
   onCategoryClick,
@@ -52,7 +52,8 @@ export default function ForksChart({
     switch (category) {
       case "daily":
         return (
-          <BarChart data={dailyData} syncId={syncId} className="!-left-6">
+          // <BarChart data={dailyData} syncId={syncId} className="!-left-6">
+          <BarChart data={dailyData} className="!-left-6">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
             <YAxis
               interval={1}
@@ -69,7 +70,7 @@ export default function ForksChart({
         );
       case "history":
         return (
-          <LineChart data={historyData} syncId={syncId} className="!-left-6">
+          <LineChart data={historyData} className="!-left-6">
             <XAxis dataKey="bucket" tick={false} />
             <YAxis
               domain={["auto", "auto"]}
diff --git a/components/Graphs/IssuesChart.tsx b/components/Graphs/IssuesChart.tsx
index abe2a66ec..986316c44 100644
--- a/components/Graphs/IssuesChart.tsx
+++ b/components/Graphs/IssuesChart.tsx
@@ -22,13 +22,14 @@ import { humanizeNumber } from "netlify/og-image-utils";
 type IssuesChartProps = {
   stats: StatsType[] | undefined;
   velocity: number;
-  syncId: number;
+  // syncId: number;
   range: DayRange;
   isLoading: boolean;
   className?: string;
 };
 
-export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoading, className }: IssuesChartProps) {
+// export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoading, className }: IssuesChartProps) {
+export default function IssuesChart({ stats, velocity, range = 30, isLoading, className }: IssuesChartProps) {
   const dailyData = useMemo(() => getDailyIssuesHistogramToDays({ stats, range }), [stats, range]);
   const bucketTicks = useMemo(() => getTicks({ histogram: dailyData, range }), [dailyData, range]);
   const { openedRangedTotal, closedRangedTotal } = useMemo(
@@ -87,7 +88,8 @@ export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoa
         {isLoading ? (
           <SkeletonWrapper width={100} height={100} />
         ) : (
-          <LineChart data={dailyData} syncId={syncId} className="-left-6">
+          // <LineChart data={dailyData} syncId={syncId} className="-left-6">
+          <LineChart data={dailyData} className="-left-6">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
             <YAxis
               domain={["auto", "auto"]}
diff --git a/components/Graphs/PRChart.tsx b/components/Graphs/PRChart.tsx
index 260f653e3..e114ba9d8 100644
--- a/components/Graphs/PRChart.tsx
+++ b/components/Graphs/PRChart.tsx
@@ -22,13 +22,14 @@ import { humanizeNumber } from "netlify/og-image-utils";
 type PRChartProps = {
   stats: StatsType[] | undefined;
   velocity: number;
-  syncId: number;
+  // syncId: number;
   range: DayRange;
   isLoading: boolean;
   className?: string;
 };
 
-export default function PRChart({ stats, velocity, syncId, range = 30, isLoading, className }: PRChartProps) {
+// export default function PRChart({ stats, velocity, syncId, range = 30, isLoading, className }: PRChartProps) {
+export default function PRChart({ stats, velocity, range = 30, isLoading, className }: PRChartProps) {
   const dailyData = useMemo(() => getDailyPullRequestsHistogramToDays({ stats, range }), [stats, range]);
   const bucketTicks = useMemo(() => getTicks({ histogram: dailyData, range }), [dailyData, range]);
   const { openedRangedTotal, closedRangedTotal } = useMemo(
@@ -87,7 +88,8 @@ export default function PRChart({ stats, velocity, syncId, range = 30, isLoading
         {isLoading ? (
           <SkeletonWrapper width={100} height={100} />
         ) : (
-          <LineChart data={dailyData} syncId={syncId} className="-left-6">
+          // <LineChart data={dailyData} syncId={syncId} className="-left-6">
+          <LineChart data={dailyData} className="-left-6">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
             <YAxis
               domain={["auto", "auto"]}
diff --git a/components/Graphs/StarsChart.tsx b/components/Graphs/StarsChart.tsx
index ff88a9ebe..e4a3f298c 100644
--- a/components/Graphs/StarsChart.tsx
+++ b/components/Graphs/StarsChart.tsx
@@ -25,7 +25,7 @@ import humanizeNumber from "lib/utils/humanizeNumber";
 type StarsChartProps = {
   stats: StatsType[] | undefined;
   total: number;
-  syncId: number;
+  // syncId: number;
   range: DayRange;
   isLoading: boolean;
   onCategoryClick?: (category: string) => void;
@@ -35,7 +35,7 @@ type StarsChartProps = {
 export default function StarsChart({
   stats,
   total,
-  syncId,
+  // syncId,
   range = 30,
   isLoading,
   onCategoryClick,
@@ -52,7 +52,8 @@ export default function StarsChart({
     switch (category) {
       case "daily":
         return (
-          <BarChart data={dailyData} syncId={syncId} className="-left-5">
+          // <BarChart data={dailyData} syncId={syncId} className="-left-5">
+          <BarChart data={dailyData} className="-left-5">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
             <YAxis
               interval={1}
@@ -69,7 +70,8 @@ export default function StarsChart({
         );
       case "history":
         return (
-          <LineChart data={historyData} syncId={syncId} className="-left-5">
+          // <LineChart data={historyData} syncId={syncId} className="-left-5">
+          <LineChart data={historyData} className="-left-5">
             <XAxis dataKey="bucket" ticks={bucketTicks} tick={CustomTick} />
             <YAxis
               domain={["auto", "auto"]}
diff --git a/pages/s/[org]/[repo]/index.tsx b/pages/s/[org]/[repo]/index.tsx
index a8ec3e5b3..4f6eded4b 100644
--- a/pages/s/[org]/[repo]/index.tsx
+++ b/pages/s/[org]/[repo]/index.tsx
@@ -92,7 +92,7 @@ interface RepoPageProps {
 }
 
 export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
-  const syncId = repoData.id;
+  // const syncId = repoData.id;
   const router = useRouter();
   const { toast } = useToast();
   const posthog = usePostHog();
@@ -572,7 +572,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={issueStats}
                         range={range}
                         velocity={repoStats?.issues_velocity_count ?? 0}
-                        syncId={syncId}
+                        // syncId={syncId}
                         isLoading={isIssueDataLoading}
                       />
                     </CopyContainer>
@@ -599,7 +599,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={prStats}
                         range={range}
                         velocity={repoStats?.pr_velocity_count ?? 0}
-                        syncId={syncId}
+                        // syncId={syncId}
                         isLoading={isPrDataLoading}
                       />
                     </CopyContainer>
@@ -631,7 +631,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={starsData}
                         total={repoData.stars}
                         range={range}
-                        syncId={syncId}
+                        // syncId={syncId}
                         isLoading={isStarsDataLoading}
                         onCategoryClick={(category) =>
                           posthog.capture("Repo Pages: clicked Stars Chart category", {
@@ -665,7 +665,7 @@ export default function RepoPage({ repoData, ogImageUrl }: RepoPageProps) {
                         stats={forkStats}
                         total={repoData.forks}
                         range={range}
-                        syncId={syncId}
+                        // syncId={syncId}
                         isLoading={isForksDataLoading}
                         onCategoryClick={(category) =>
                           posthog.capture("Repo Pages: clicked Forks Chart category", {