fix: decrease the pad angle and remove the empty legend entries (#6507)

* fix: pie chart should not have padding between adjacent items

* fix: remove the labels which do not have any data
This commit is contained in:
Vikrant Gupta 2024-11-22 16:36:47 +05:30 committed by GitHub
parent 7fe4f8cc56
commit 96b5e0920f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -8,6 +8,7 @@ import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
import { themeColors } from 'constants/theme'; import { themeColors } from 'constants/theme';
import { useIsDarkMode } from 'hooks/useDarkMode'; import { useIsDarkMode } from 'hooks/useDarkMode';
import { generateColor } from 'lib/uPlotLib/utils/generateColor'; import { generateColor } from 'lib/uPlotLib/utils/generateColor';
import { isNaN } from 'lodash-es';
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { Query } from 'types/api/queryBuilder/queryBuilderData'; import { Query } from 'types/api/queryBuilder/queryBuilderData';
@ -44,7 +45,7 @@ function PiePanelWrapper({
const isDarkMode = useIsDarkMode(); const isDarkMode = useIsDarkMode();
const pieChartData: { let pieChartData: {
label: string; label: string;
value: string; value: string;
color: string; color: string;
@ -67,6 +68,10 @@ function PiePanelWrapper({
) )
.filter((d) => d !== undefined) as never[]), .filter((d) => d !== undefined) as never[]),
); );
pieChartData = pieChartData.filter(
(arc) =>
arc.value && !isNaN(parseFloat(arc.value)) && parseFloat(arc.value) > 0,
);
let size = 0; let size = 0;
let width = 0; let width = 0;
@ -108,7 +113,7 @@ function PiePanelWrapper({
if (!active) return half - 3; if (!active) return half - 3;
return data.label === active.label ? half : half - 3; return data.label === active.label ? half : half - 3;
}} }}
padAngle={0.02} padAngle={0.01}
cornerRadius={3} cornerRadius={3}
width={size} width={size}
height={size} height={size}