Skip to content

Commit

Permalink
fix: change syncId type from number to string in chart components. al…
Browse files Browse the repository at this point in the history 
…so create seperate syncId in order to avoid the issue.
  • Loading branch information
@Himanshu-Kathania
Himanshu-Kathania committed Nov 17, 2024
1 parent ca77bc3 commit dd4469b
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 67 deletions.
24 changes: 12 additions & 12 deletions components/Graphs/ForksChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import humanizeNumber from "lib/utils/humanizeNumber";
type ForksChartProps = {
stats: StatsType[] | undefined;
total: number;
syncId: number;
syncId: string;
range: DayRange;
isLoading: boolean;
onCategoryClick?: (category: string) => void;
Expand Down Expand Up @@ -88,35 +88,35 @@ export default function ForksChart({

return (
<Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
<section className="flex flex-col xl:flex-row w-full items-start xl:items-center gap-4 xl:justify-between px-2">
<section className="flex flex-col items-start w-full gap-4 px-2 xl:flex-row xl:items-center xl:justify-between">
{isLoading ? (
<SkeletonWrapper width={100} height={24} />
) : (
<>
<div className="flex flex-col gap-4 grow">
<div className="flex gap-2 items-center w-fit">
<div className="flex items-center gap-2 w-fit">
<BiGitRepoForked className="text-xl" />
<div className="flex gap-1 items-center">
<div className="flex items-center gap-1">
<h3 className="text-sm font-semibold xl:text-lg text-slate-800">Forks</h3>
<p className="text-sm xl:text-base w-fit pl-2 text-slate-500 font-medium">{range} days</p>
<p className="pl-2 text-sm font-medium xl:text-base w-fit text-slate-500">{range} days</p>
</div>
</div>
<aside className="flex gap-8">
<div>
<h3 className="text-xs xl:text-sm text-slate-500">Total</h3>
<p className="font-semibold text-lg lg:text-xl">{humanizeNumber(total)}</p>
<p className="text-lg font-semibold lg:text-xl">{humanizeNumber(total)}</p>
</div>
<div>
<h3 className="text-xs xl:text-sm text-slate-500">Over {range} days</h3>
<p className="font-semibold text-lg lg:text-xl">{forksRangedTotal}</p>
<p className="text-lg font-semibold lg:text-xl">{forksRangedTotal}</p>
</div>
<div>
<h3 className="text-xs xl:text-sm text-slate-500">Avg. per day</h3>
<p className="font-semibold text-lg lg:text-xl">{humanizeNumber(averageOverRange)}</p>
<p className="text-lg font-semibold lg:text-xl">{humanizeNumber(averageOverRange)}</p>
</div>
</aside>
</div>
<div className="flex gap-2 items-center w-fit lg:self-start">
<div className="flex items-center gap-2 w-fit lg:self-start">
<Button
variant={category === "daily" ? "outline" : "default"}
onClick={() => {
Expand Down Expand Up @@ -149,13 +149,13 @@ export default function ForksChart({
function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
if (active && payload) {
return (
<figcaption className="flex flex-col gap-1 bg-white px-4 py-2 rounded-lg border">
<section className="flex gap-2 items-center">
<figcaption className="flex flex-col gap-1 px-4 py-2 bg-white border rounded-lg">
<section className="flex items-center gap-2">
<BiGitRepoForked className="fill-sauced-orange" />
<p>Forks: {payload[0]?.value}</p>
</section>

<p className="text-light-slate-9 text-sm">{payload[0]?.payload.bucket}</p>
<p className="text-sm text-light-slate-9">{payload[0]?.payload.bucket}</p>
</figcaption>
);
}
Expand Down
24 changes: 12 additions & 12 deletions components/Graphs/IssuesChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { humanizeNumber } from "netlify/og-image-utils";
type IssuesChartProps = {
stats: StatsType[] | undefined;
velocity: number;
syncId: number;
syncId: string;
range: DayRange;
isLoading: boolean;
className?: string;
Expand All @@ -47,34 +47,34 @@ export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoa

return (
<Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
<section className="flex flex-col lg:flex-row w-full items-start gap-4 lg:justify-between px-2">
<section className="flex flex-col items-start w-full gap-4 px-2 lg:flex-row lg:justify-between">
{isLoading ? (
<SkeletonWrapper width={100} height={24} />
) : (
<div className="flex flex-col gap-4 w-full items-start justify-between px-2">
<div className="flex gap-1 items-center w-fit">
<div className="flex flex-col items-start justify-between w-full gap-4 px-2">
<div className="flex items-center gap-1 w-fit">
<VscIssues className="text-xl" />
<h3 className="text-sm font-semibold xl:text-lg text-slate-800">Issues</h3>
<p className="text-sm xl:text-lg w-fit pl-2 text-slate-500 font-medium">{range} days</p>
<p className="pl-2 text-sm font-medium xl:text-lg w-fit text-slate-500">{range} days</p>
</div>
<aside className="flex gap-6">
<div>
<h3 className="text-xs xl:text-sm !font-medium text-slate-500">
Opened
<span className={`w-2 h-2 rounded-full bg-[#16a34a] mx-1 inline-block`}></span>
</h3>
<p className="font-semibold text-xl xl:text-2xl">{humanizeNumber(openedRangedTotal)}</p>
<p className="text-xl font-semibold xl:text-2xl">{humanizeNumber(openedRangedTotal)}</p>
</div>
<div>
<h3 className="text-xs xl:text-sm !font-medium text-slate-500">
Closed
<span className={`w-2 h-2 rounded-full bg-[#9333ea] mx-1 inline-block`}></span>
</h3>
<p className="font-semibold text-xl xl:text-2xl">{humanizeNumber(closedRangedTotal)}</p>
<p className="text-xl font-semibold xl:text-2xl">{humanizeNumber(closedRangedTotal)}</p>
</div>
<div>
<h3 className="text-xs xl:text-sm !font-medium text-slate-500">Velocity</h3>
<p className="font-semibold text-xl xl:text-2xl">
<p className="text-xl font-semibold xl:text-2xl">
{humanizeNumber(velocity)}
<span className="text-lg xl:text-xl text-slate-500 pl-0.5">d</span>
</p>
Expand Down Expand Up @@ -110,21 +110,21 @@ export default function IssuesChart({ stats, velocity, syncId, range = 30, isLoa
function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
if (active && payload) {
return (
<figcaption className="flex flex-col gap-1 text-sm bg-white px-4 py-3 rounded-lg border w-fit">
<section className="flex gap-2 font-medium text-slate-500 items-center text-xs w-fit">
<figcaption className="flex flex-col gap-1 px-4 py-3 text-sm bg-white border rounded-lg w-fit">
<section className="flex items-center gap-2 text-xs font-medium text-slate-500 w-fit">
<VscIssues className="fill-slate-500" />
<p>Issues</p>
<p>{payload[0]?.payload.bucket}</p>
</section>
<section className="flex justify-between">
<p className="flex gap-2 items-center text-slate-500">
<p className="flex items-center gap-2 text-slate-500">
<span className={`w-2 h-2 rounded-full bg-[#16a34a] inline-block`}></span>
Opened:
</p>
<p className="font-medium">{payload[0]?.value}</p>
</section>
<section className="flex justify-between">
<p className="flex gap-2 items-center text-slate-500">
<p className="flex items-center gap-2 text-slate-500">
<span className={`w-2 h-2 rounded-full bg-[#9333ea] inline-block`}></span>
Closed:
</p>
Expand Down
30 changes: 15 additions & 15 deletions components/Graphs/PRChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { humanizeNumber } from "netlify/og-image-utils";
type PRChartProps = {
stats: StatsType[] | undefined;
velocity: number;
syncId: number;
syncId: string;
range: DayRange;
isLoading: boolean;
className?: string;
Expand All @@ -47,34 +47,34 @@ export default function PRChart({ stats, velocity, syncId, range = 30, isLoading

return (
<Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
<section className="flex flex-col lg:flex-row w-full items-start gap-4 lg:justify-between px-2">
<section className="flex flex-col items-start w-full gap-4 px-2 lg:flex-row lg:justify-between">
{isLoading ? (
<SkeletonWrapper width={100} height={24} />
) : (
<div className="flex flex-col gap-4 w-full items-start justify-between px-2">
<div className="flex gap-1 items-center w-fit">
<div className="flex flex-col items-start justify-between w-full gap-4 px-2">
<div className="flex items-center gap-1 w-fit">
<BiGitPullRequest className="text-xl" />
<h3 className="text-sm xl:text-lg font-semibold text-slate-800">Pull Requests</h3>
<p className="text-sm xl:text-lg w-fit pl-2 text-slate-500 font-medium">{range} days</p>
<h3 className="text-sm font-semibold xl:text-lg text-slate-800">Pull Requests</h3>
<p className="pl-2 text-sm font-medium xl:text-lg w-fit text-slate-500">{range} days</p>
</div>
<aside className="flex gap-4">
<div>
<h3 className="text-xs xl:text-sm !font-medium text-slate-500">
Opened
<span className={`w-2 h-2 rounded-full bg-[#16a34a] mx-1 inline-block`}></span>
</h3>
<p className="font-semibold text-xl xl:text-2xl">{humanizeNumber(openedRangedTotal)}</p>
<p className="text-xl font-semibold xl:text-2xl">{humanizeNumber(openedRangedTotal)}</p>
</div>
<div>
<h3 className="text-xs xl:text-sm !font-medium text-slate-500">
Merged
<span className={`w-2 h-2 rounded-full bg-[#9333ea] mx-1 inline-block`}></span>
</h3>
<p className="font-semibold text-xl xl:text-2xl">{humanizeNumber(closedRangedTotal)}</p>
<p className="text-xl font-semibold xl:text-2xl">{humanizeNumber(closedRangedTotal)}</p>
</div>
<div>
<h3 className="text-xs xl:text-sm !font-medium text-slate-500">Velocity</h3>
<p className="font-semibold text-xl xl:text-2xl">
<p className="text-xl font-semibold xl:text-2xl">
{humanizeNumber(velocity)}
<span className="text-lg xl:text-xl text-slate-500 pl-0.5">d</span>
</p>
Expand Down Expand Up @@ -110,25 +110,25 @@ export default function PRChart({ stats, velocity, syncId, range = 30, isLoading
function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
if (active && payload) {
return (
<figcaption className="flex flex-col gap-1 text-sm bg-white px-4 py-3 rounded-lg border w-fit">
<section className="flex gap-2 font-medium text-slate-500 items-center text-xs w-fit">
<figcaption className="flex flex-col gap-1 px-4 py-3 text-sm bg-white border rounded-lg w-fit">
<section className="flex items-center gap-2 text-xs font-medium text-slate-500 w-fit">
<BiGitPullRequest className="fill-slate-500" />
<p>Pull Requests</p>
<p>{payload[0]?.payload.bucket}</p>
</section>
<section className="flex justify-between">
<p className="flex gap-2 items-center px-1 text-slate-500">
<p className="flex items-center gap-2 px-1 text-slate-500">
<span className={`w-2 h-2 rounded-full bg-[#16a34a] inline-block`}></span>
Opened:
</p>
<p className="font-medium pl-2">{payload[0]?.value}</p>
<p className="pl-2 font-medium">{payload[0]?.value}</p>
</section>
<section className="flex justify-between">
<p className="flex gap-2 items-center px-1 text-slate-500">
<p className="flex items-center gap-2 px-1 text-slate-500">
<span className={`w-2 h-2 rounded-full bg-[#9333ea] inline-block`}></span>
Merged:
</p>
<p className="font-medium pl-2">{payload[1]?.value}</p>
<p className="pl-2 font-medium">{payload[1]?.value}</p>
</section>
</figcaption>
);
Expand Down
24 changes: 12 additions & 12 deletions components/Graphs/StarsChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import humanizeNumber from "lib/utils/humanizeNumber";
type StarsChartProps = {
stats: StatsType[] | undefined;
total: number;
syncId: number;
syncId: string;
range: DayRange;
isLoading: boolean;
onCategoryClick?: (category: string) => void;
Expand Down Expand Up @@ -88,35 +88,35 @@ export default function StarsChart({

return (
<Card className={`${className ?? ""} flex flex-col gap-8 w-full h-full items-center !px-6 !py-8`}>
<section className="flex flex-col xl:flex-row w-full items-start xl:items-center gap-4 xl:justify-between px-2">
<section className="flex flex-col items-start w-full gap-4 px-2 xl:flex-row xl:items-center xl:justify-between">
{isLoading ? (
<SkeletonWrapper width={100} height={24} />
) : (
<>
<div className="flex flex-col gap-4">
<div className="flex gap-2 items-center w-fit">
<div className="flex items-center gap-2 w-fit">
<FaStar className="text-xl" />
<div className="flex gap-1 items-center">
<div className="flex items-center gap-1">
<h3 className="text-sm font-semibold xl:text-lg text-slate-800">Stars</h3>
<p className="text-sm xl:text-base w-fit pl-2 text-slate-500 font-medium">{range} days</p>
<p className="pl-2 text-sm font-medium xl:text-base w-fit text-slate-500">{range} days</p>
</div>
</div>
<aside className="flex gap-8">
<div>
<h3 className="text-xs xl:text-sm text-slate-500">Total</h3>
<p className="font-semibold text-lg lg:text-xl">{humanizeNumber(total)}</p>
<p className="text-lg font-semibold lg:text-xl">{humanizeNumber(total)}</p>
</div>
<div>
<h3 className="text-xs xl:text-sm text-slate-500">Over {range} days</h3>
<p className="font-semibold text-lg lg:text-xl">{starsRangedTotal}</p>
<p className="text-lg font-semibold lg:text-xl">{starsRangedTotal}</p>
</div>
<div>
<h3 className="text-xs xl:mtext-sm text-slate-500">Avg. per day</h3>
<p className="font-semibold text-lg lg:text-xl">{humanizeNumber(averageOverRange)}</p>
<p className="text-lg font-semibold lg:text-xl">{humanizeNumber(averageOverRange)}</p>
</div>
</aside>
</div>
<div className="flex gap-2 items-center lg:self-start">
<div className="flex items-center gap-2 lg:self-start">
<Button
variant={category === "daily" ? "outline" : "default"}
onClick={() => {
Expand Down Expand Up @@ -149,13 +149,13 @@ export default function StarsChart({
function CustomTooltip({ active, payload }: TooltipProps<ValueType, NameType>) {
if (active && payload) {
return (
<figcaption className="flex flex-col gap-1 bg-white px-4 py-2 rounded-lg border">
<section className="flex gap-2 items-center">
<figcaption className="flex flex-col gap-1 px-4 py-2 bg-white border rounded-lg">
<section className="flex items-center gap-2">
<FaStar className="fill-sauced-orange" />
<p>Stars: {payload[0]?.value}</p>
</section>

<p className="text-light-slate-9 text-sm">{payload[0]?.payload.bucket}</p>
<p className="text-sm text-light-slate-9">{payload[0]?.payload.bucket}</p>
</figcaption>
);
}
Expand Down
Loading

0 comments on commit dd4469b

Please sign in to comment.