From 8a479d42ffecf08b8b17e1dec8d40994f3b65c2e Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Tue, 18 Mar 2025 15:53:58 +0530
Subject: [PATCH] fix: fixed legend format not working for Pie Chart (#7300)

* fix: fixed legend format not working for Pie Chart

* fix: added enhancement to legend fit and show, also made pie-chart responsive

* fix: made some css fixes

* fix: css fixes
---
 .../PanelWrapper/PiePanelWrapper.styles.scss  | 103 ++++++++++++------
 .../PanelWrapper/PiePanelWrapper.tsx          |  85 ++++++++-------
 2 files changed, 110 insertions(+), 78 deletions(-)

diff --git a/frontend/src/container/PanelWrapper/PiePanelWrapper.styles.scss b/frontend/src/container/PanelWrapper/PiePanelWrapper.styles.scss
index 86f5ec3444..e04904233d 100644
--- a/frontend/src/container/PanelWrapper/PiePanelWrapper.styles.scss
+++ b/frontend/src/container/PanelWrapper/PiePanelWrapper.styles.scss
@@ -1,50 +1,81 @@
 .piechart-no-data {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	font-size: 14px;
+}
+
+.piechart-wrapper {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
 }
 
 .piechart-container {
-    height: 90%;
-    width: 100%;
+	flex: 1;
+	min-height: 0;
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
 .piechart-tooltip {
+	padding: 8px 12px;
+	border-radius: 4px;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 
-    .piechart-indicator {
-        width: 15px;
-        height: 3px;
-        border-radius: 2px;
-    }
+	.piechart-indicator {
+		width: 12px;
+		height: 12px;
+		border-radius: 2px;
+		margin-right: 8px;
+		display: inline-block;
+	}
 
-    .tooltip-value {
-        font-size: 12px;
-        font-weight: 600;
-    }
+	.tooltip-value {
+		font-weight: bold;
+		margin-top: 4px;
+	}
 }
 
 .piechart-legend {
-    width: 100%;
-    height: 40px;
-    overflow-y: scroll;
-    display: flex;
-    gap: 10px;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
+	padding: 8px;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 8px;
+	max-height: 68px;
+	overflow-y: auto;
+	width: 100%;
+	align-content: flex-start;
+}
 
-    .piechart-legend-item {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 5px;
+.piechart-legend-item {
+	display: flex;
+	align-items: center;
+	font-size: 10px;
+	white-space: nowrap;
+	margin-bottom: 2px;
+	cursor: pointer;
 
-        .piechart-legend-label {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-        }
-    }
-}
\ No newline at end of file
+	flex: 0 0 auto;
+}
+
+.piechart-legend-label {
+	width: 12px;
+	height: 12px;
+	margin-right: 4px;
+	border-radius: 2px;
+}
+
+/* Media query for smaller containers */
+@media (max-height: 300px) {
+	.piechart-legend {
+		max-height: 40%;
+	}
+}
diff --git a/frontend/src/container/PanelWrapper/PiePanelWrapper.tsx b/frontend/src/container/PanelWrapper/PiePanelWrapper.tsx
index 61998c7886..a583d60d6b 100644
--- a/frontend/src/container/PanelWrapper/PiePanelWrapper.tsx
+++ b/frontend/src/container/PanelWrapper/PiePanelWrapper.tsx
@@ -7,13 +7,13 @@ import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import getLabelName from 'lib/getLabelName';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { isNaN } from 'lodash-es';
 import { useRef, useState } from 'react';
-import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
 import { PanelWrapperProps, TooltipData } from './panelWrapper.types';
-import { getLabel, lightenColor, tooltipStyles } from './utils';
+import { lightenColor, tooltipStyles } from './utils';
 
 // refernce: https://www.youtube.com/watch?v=bL3P9CqQkKw
 function PiePanelWrapper({
@@ -40,8 +40,7 @@ function PiePanelWrapper({
 		detectBounds: true,
 	});
 
-	const panelData =
-		queryResponse.data?.payload?.data?.newResult?.data?.result || [];
+	const panelData = queryResponse.data?.payload?.data?.result || [];
 
 	const isDarkMode = useIsDarkMode();
 
@@ -51,21 +50,14 @@ function PiePanelWrapper({
 		color: string;
 	}[] = [].concat(
 		...(panelData
-			.map((d) =>
-				d.series?.map((s) => ({
-					label:
-						d.series?.length === 1
-							? getLabel(Object.values(s.labels)[0], widget.query, d.queryName)
-							: getLabel(Object.values(s.labels)[0], {} as Query, d.queryName, true),
-					value: s.values[0].value,
-					color: generateColor(
-						d.series?.length === 1
-							? getLabel(Object.values(s.labels)[0], widget.query, d.queryName)
-							: getLabel(Object.values(s.labels)[0], {} as Query, d.queryName, true),
-						isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
-					),
-				})),
-			)
+			.map((d) => ({
+				label: getLabelName(d.metric, d.queryName || '', d.legend || ''),
+				value: d.values?.[0]?.[1],
+				color: generateColor(
+					getLabelName(d.metric, d.queryName || '', d.legend || ''),
+					isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
+				),
+			}))
 			.filter((d) => d !== undefined) as never[]),
 	);
 	pieChartData = pieChartData.filter(
@@ -95,7 +87,7 @@ function PiePanelWrapper({
 	};
 
 	return (
-		<>
+		<div className="piechart-wrapper">
 			{!pieChartData.length && <div className="piechart-no-data">No data</div>}
 			{pieChartData.length > 0 && (
 				<>
@@ -127,6 +119,16 @@ function PiePanelWrapper({
 												const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.6;
 												const arcPath = pie.path(arc);
 												const arcFill = arc.data.color;
+
+												// Calculate available space for label text
+												const arcSize = arc.endAngle - arc.startAngle;
+												const maxLabelLength = Math.floor(arcSize * 15);
+												const labelText = arc.data.label;
+												const displayLabel =
+													labelText.length > maxLabelLength
+														? `${labelText.substring(0, maxLabelLength - 3)}...`
+														: labelText;
+
 												return (
 													<g
 														// eslint-disable-next-line react/no-array-index-key
@@ -160,12 +162,12 @@ function PiePanelWrapper({
 																x={centroidX}
 																y={centroidY}
 																dy=".33em"
-																fill="#000"
+																fill={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_400}
 																fontSize={10}
 																textAnchor="middle"
 																pointerEvents="none"
 															>
-																{arc.data.label}
+																{displayLabel}
 															</text>
 														)}
 													</g>
@@ -198,31 +200,30 @@ function PiePanelWrapper({
 						)}
 					</div>
 					<div className="piechart-legend">
-						{pieChartData.length > 0 &&
-							pieChartData.map((data) => (
+						{pieChartData.map((data) => (
+							<div
+								key={data.label}
+								className="piechart-legend-item"
+								onMouseEnter={(): void => {
+									setActive(data);
+								}}
+								onMouseLeave={(): void => {
+									setActive(null);
+								}}
+							>
 								<div
-									key={data.label}
-									className="piechart-legend-item"
-									onMouseEnter={(): void => {
-										setActive(data);
+									style={{
+										backgroundColor: getFillColor(data.color),
 									}}
-									onMouseLeave={(): void => {
-										setActive(null);
-									}}
-								>
-									<div
-										style={{
-											backgroundColor: getFillColor(data.color),
-										}}
-										className="piechart-legend-label"
-									/>
-									{data.label}
-								</div>
-							))}
+									className="piechart-legend-label"
+								/>
+								{data.label}
+							</div>
+						))}
 					</div>
 				</>
 			)}
-		</>
+		</div>
 	);
 }