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

frontend/src/container/PanelWrapper/PiePanelWrapper.styles.scss

@@ -4,47 +4,78 @@
 	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%;
+	flex: 1;
-    width: 100%;
+	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;
+		width: 12px;
-        height: 3px;
+		height: 12px;
 		border-radius: 2px;
+		margin-right: 8px;
+		display: inline-block;
 	}
 
 	.tooltip-value {
-        font-size: 12px;
+		font-weight: bold;
-        font-weight: 600;
+		margin-top: 4px;
 	}
 }
 
 .piechart-legend {
-    width: 100%;
+	padding: 8px;
-    height: 40px;
-    overflow-y: scroll;
 	display: flex;
-    gap: 10px;
-    justify-content: center;
-    align-items: center;
 	flex-wrap: wrap;
-
-    .piechart-legend-item {
-        display: flex;
 	justify-content: center;
-        align-items: center;
+	gap: 8px;
-        gap: 5px;
+	max-height: 68px;
+	overflow-y: auto;
+	width: 100%;
+	align-content: flex-start;
+}
 
-        .piechart-legend-label {
+.piechart-legend-item {
-            width: 10px;
+	display: flex;
-            height: 10px;
+	align-items: center;
-            border-radius: 50%;
+	font-size: 10px;
-        }
+	white-space: nowrap;
+	margin-bottom: 2px;
+	cursor: pointer;
+
+	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%;
 	}
 }

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 =
+	const panelData = queryResponse.data?.payload?.data?.result || [];
-		queryResponse.data?.payload?.data?.newResult?.data?.result || [];
 
 	const isDarkMode = useIsDarkMode();
 
@@ -51,21 +50,14 @@ function PiePanelWrapper({
 		color: string;
 	}[] = [].concat(
 		...(panelData
-			.map((d) =>
+			.map((d) => ({
-				d.series?.map((s) => ({
+				label: getLabelName(d.metric, d.queryName || '', d.legend || ''),
-					label:
+				value: d.values?.[0]?.[1],
-						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
+					getLabelName(d.metric, d.queryName || '', d.legend || ''),
-							? 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,
 				),
-				})),
+			}))
-			)
 			.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,8 +200,7 @@ function PiePanelWrapper({
 						)}
 					</div>
 					<div className="piechart-legend">
-						{pieChartData.length > 0 &&
+						{pieChartData.map((data) => (
-							pieChartData.map((data) => (
 							<div
 								key={data.label}
 								className="piechart-legend-item"
@@ -222,7 +223,7 @@ function PiePanelWrapper({
 					</div>
 				</>
 			)}
-		</>
+		</div>
 	);
 }