fix: graphs issue (#655)

* fix: prevent y axis to have decimal

* fix: add padding and labels to line chart
This commit is contained in:
Saheb Giri 2023-03-31 17:33:51 +05:30 committed by GitHub
parent f6500914be
commit f074f9f003
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 3 deletions

View File

@ -80,6 +80,7 @@ const ProgressChart: React.FC<Props> = ({ issues, start, end }) => {
tick={{ fontSize: "12px", fill: "#1f2937" }} tick={{ fontSize: "12px", fill: "#1f2937" }}
tickSize={10} tickSize={10}
minTickGap={10} minTickGap={10}
allowDecimals={false}
/> />
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip />} />
<Area <Area

View File

@ -31,7 +31,7 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
for (let i = 1; i <= weeks; i++) { for (let i = 1; i <= weeks; i++) {
data.push({ data.push({
week_in_month: i, week_in_month: `Week ${i}`,
completed_count: issues?.find((item) => item.week_in_month === i)?.completed_count ?? 0, completed_count: issues?.find((item) => item.week_in_month === i)?.completed_count ?? 0,
}); });
} }
@ -58,8 +58,8 @@ export const CompletedIssuesGraph: React.FC<Props> = ({ month, issues, setMonth
<div className="rounded-[10px] border bg-white p-8 pl-4"> <div className="rounded-[10px] border bg-white p-8 pl-4">
<ResponsiveContainer width="100%" height={250}> <ResponsiveContainer width="100%" height={250}>
<LineChart data={data}> <LineChart data={data}>
<CartesianGrid stroke="#e2e2e2" /> <CartesianGrid stroke="#e2e2e280" />
<XAxis dataKey="week_in_month" /> <XAxis dataKey="week_in_month" padding={{ left: 48, right: 48 }} />
<YAxis dataKey="completed_count" allowDecimals={false} /> <YAxis dataKey="completed_count" allowDecimals={false} />
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip />} />
<Line <Line