Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: created unique IDs for each chart . #4189 #4194

Open
wants to merge 1 commit into
base: beta
Choose a base branch
from
Open

fix: created unique IDs for each chart . #4189 #4194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions components/Graphs/ForksChart.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading