From 8df1648329858205e7f16736872f9758f341d430 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Mon, 17 Jul 2023 14:48:43 +0530
Subject: [PATCH] fix: dashboard pie chart legends overflow (#1528)
---
.../components/workspace/issues-pie-chart.tsx | 97 +++++++++----------
1 file changed, 48 insertions(+), 49 deletions(-)
diff --git a/apps/app/components/workspace/issues-pie-chart.tsx b/apps/app/components/workspace/issues-pie-chart.tsx
index dbd5eeceb..4a0222453 100644
--- a/apps/app/components/workspace/issues-pie-chart.tsx
+++ b/apps/app/components/workspace/issues-pie-chart.tsx
@@ -14,59 +14,58 @@ type Props = {
export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => (
<div>
<h3 className="mb-2 font-semibold">Issues by States</h3>
- <div className="rounded-[10px] border border-custom-border-300 bg-custom-background-100 p-4">
- <PieGraph
- data={
- groupedIssues?.map((cell) => ({
- id: cell.state_group,
- label: cell.state_group,
- value: cell.state_count,
- color: STATE_GROUP_COLORS[cell.state_group.toLowerCase()],
- })) ?? []
- }
- height="320px"
- innerRadius={0.6}
- cornerRadius={5}
- padAngle={2}
- enableArcLabels
- arcLabelsTextColor="#000000"
- enableArcLinkLabels={false}
- legends={[
- {
- anchor: "right",
- direction: "column",
- justify: false,
- translateX: 0,
- translateY: 56,
- itemsSpacing: 10,
- itemWidth: 100,
- itemHeight: 18,
- itemTextColor: "rgb(var(--color-text-secondary))",
- itemDirection: "left-to-right",
- itemOpacity: 1,
- symbolSize: 12,
- symbolShape: "square",
- data:
+ <div className="rounded-[10px] border border-custom-border-100 bg-custom-background-100 p-4">
+ <div className="grid grid-cols-1 sm:grid-cols-4">
+ <div className="sm:col-span-3">
+ <PieGraph
+ data={
groupedIssues?.map((cell) => ({
id: cell.state_group,
- label: capitalizeFirstLetter(cell.state_group),
+ label: cell.state_group,
value: cell.state_count,
color: STATE_GROUP_COLORS[cell.state_group.toLowerCase()],
- })) ?? [],
- },
- ]}
- activeInnerRadiusOffset={5}
- colors={(datum) => datum.data.color}
- tooltip={(datum) => (
- <div className="flex items-center gap-2 rounded-md border border-custom-border-300 bg-custom-background-80 p-2 text-xs">
- <span className="text-custom-text-200 capitalize">{datum.datum.label} issues:</span>{" "}
- {datum.datum.value}
- </div>
- )}
- theme={{
- background: "transparent",
- }}
- />
+ })) ?? []
+ }
+ height="320px"
+ innerRadius={0.6}
+ cornerRadius={5}
+ padAngle={2}
+ enableArcLabels
+ arcLabelsTextColor="#000000"
+ enableArcLinkLabels={false}
+ activeInnerRadiusOffset={5}
+ colors={(datum) => datum.data.color}
+ tooltip={(datum) => (
+ <div className="flex items-center gap-2 rounded-md border border-custom-border-100 bg-custom-background-80 p-2 text-xs">
+ <span className="text-custom-text-200 capitalize">{datum.datum.label} issues:</span>{" "}
+ {datum.datum.value}
+ </div>
+ )}
+ margin={{
+ top: 32,
+ right: 0,
+ bottom: 32,
+ left: 0,
+ }}
+ theme={{
+ background: "transparent",
+ }}
+ />
+ </div>
+ <div className="flex sm:block items-center gap-3 flex-wrap justify-center sm:space-y-2 sm:self-end sm:justify-self-end sm:px-8 sm:pb-8">
+ {groupedIssues?.map((cell) => (
+ <div key={cell.state_group} className="flex items-center gap-2">
+ <div
+ className="h-2 w-2"
+ style={{ backgroundColor: STATE_GROUP_COLORS[cell.state_group] }}
+ />
+ <div className="capitalize text-custom-text-200 text-xs">
+ {cell.state_group}- {cell.state_count}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
</div>
</div>
);