feat: add support to configure units for pie chart values (#5960)

* feat: add units for pie chart * chore: set the default to none in case no unit present * chore: rename the y axis unit to unit --------- Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>
SigNoz · Sep 14, 2024 · 3573c08 · 3573c08
1 parent b444c1e
commit 3573c08
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/frontend/src/container/NewWidget/RightContainer/constants.ts b/frontend/src/container/NewWidget/RightContainer/constants.ts
@@ -74,7 +74,7 @@ export const panelTypeVsYAxisUnit: { [key in PANEL_TYPES]: boolean } = {
 	[PANEL_TYPES.VALUE]: true,
 	[PANEL_TYPES.TABLE]: false,
 	[PANEL_TYPES.LIST]: false,
-	[PANEL_TYPES.PIE]: false,
+	[PANEL_TYPES.PIE]: true,
 	[PANEL_TYPES.BAR]: true,
 	[PANEL_TYPES.HISTOGRAM]: false,
 	[PANEL_TYPES.TRACE]: false,

diff --git a/frontend/src/container/NewWidget/RightContainer/index.tsx b/frontend/src/container/NewWidget/RightContainer/index.tsx
@@ -211,7 +211,11 @@ function RightContainer({
 					<YAxisUnitSelector
 						defaultValue={yAxisUnit}
 						onSelect={setYAxisUnit}
-						fieldLabel={selectedGraphType === 'Value' ? 'Unit' : 'Y Axis Unit'}
+						fieldLabel={
+							selectedGraphType === 'Value' || selectedGraphType === 'Pie'
+								? 'Unit'
+								: 'Y Axis Unit'
+						}
 					/>
 				)}
 				{allowSoftMinMax && (

diff --git a/frontend/src/container/PanelWrapper/PiePanelWrapper.tsx b/frontend/src/container/PanelWrapper/PiePanelWrapper.tsx
@@ -4,6 +4,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
@@ -129,7 +130,12 @@ function PiePanelWrapper({
 															showTooltip({
 																tooltipData: {
 																	label,
-																	value: arc.data.value,
+																	// do not update the unit in the data as the arc allotment is based on value
+																	// and treats 4K smaller than 40
+																	value: getYAxisFormattedValue(
+																		arc.data.value,
+																		widget?.yAxisUnit || 'none',
+																	),
 																	color: arc.data.color,
 																	key: label,
 																},