Fix issue when click on pie chart shows in popover NaN instead of value (#24413)

* Fix issue when click on pie chart shows in popover NaN instead of value

* Add changelog

* fix issue with metric value

Author: maxiadlovskii

changelog/unreleased/issue-23853.toml

@@ -0,0 +1,5 @@
+type = "fixed"
+message = "Fix issue when click on pie chart shows in popover NaN instead of value."
+
+issues = ["23853"]
+pulls = ["24413"]

graylog2-web-interface/src/views/components/visualizations/OnClickPopover/PieOnClickPopoverDropdown.tsx

@@ -27,6 +27,7 @@ import type { ValueGroups, OnClickPopoverDropdownProps } from 'views/components/
 const PieOnClickPopoverDropdown = ({ clickPoint, config, setFieldData }: OnClickPopoverDropdownProps) => {
   const { rowPivotValues, columnPivotValues, metricValue } = useMemo<ValueGroups>(() => {
     if (!clickPoint || !config) return {};
+
     const traceColor = getHoverSwatchColor(clickPoint);
     const splitNames: Array<string | number> = (clickPoint.data.originalName ?? clickPoint.data.name).split(
       keySeparator,
@@ -57,17 +58,19 @@ const PieOnClickPopoverDropdown = ({ clickPoint, config, setFieldData }: OnClick
       metricValue: {
         value: clickPoint.value,
         field: metric,
-        text: `${String(clickPoint.text ?? clickPoint?.value)}`,
+        text: `${String(clickPoint?.value)}`,
         traceColor,
       },
     };
   }, [clickPoint, config]);
 
   const formatedPercentageValue = useMemo(() => {
-    const { value, unit } = getPrettifiedValue(clickPoint?.percent, { abbrev: 'd%', unitType: 'percent' });
+    if (!clickPoint.percent) return clickPoint.text;
+
+    const { value, unit } = getPrettifiedValue(clickPoint.percent, { abbrev: 'd%', unitType: 'percent' });
 
     return formatValueWithUnitLabel(value, unit?.abbrev);
-  }, [clickPoint?.percent]);
+  }, [clickPoint.percent, clickPoint.text]);
 
   return (
     <Popover.Dropdown title={formatedPercentageValue}>