[Lens] Fix pie chart with 0 decimal places for percent (#105672) (#105787)

Co-authored-by: Wylie Conlon <william.conlon@elastic.co>

Author: kibanamachine

x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx

@@ -84,7 +84,7 @@ export function TableDimensionEditor(
       onChange: onSummaryLabelChangeToDebounce,
       value: column?.summaryLabel,
     },
-    { allowEmptyString: true } // empty string is a valid label for this feature
+    { allowFalsyValue: true } // falsy values are valid for this feature
   );
 
   if (!column) return null;

x-pack/plugins/lens/public/pie_visualization/toolbar.tsx

@@ -182,12 +182,12 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
         >
           <DecimalPlaceSlider
             value={layer.percentDecimals ?? DEFAULT_PERCENT_DECIMALS}
-            setValue={(value) =>
+            setValue={(value) => {
               setState({
                 ...state,
                 layers: [{ ...layer, percentDecimals: value }],
-              })
-            }
+              });
+            }}
           />
         </EuiFormRow>
       </ToolbarPopover>
@@ -232,7 +232,13 @@ const DecimalPlaceSlider = ({
   value: number;
   setValue: (value: number) => void;
 }) => {
-  const { inputValue, handleInputChange } = useDebouncedValue({ value, onChange: setValue });
+  const { inputValue, handleInputChange } = useDebouncedValue(
+    {
+      value,
+      onChange: setValue,
+    },
+    { allowFalsyValue: true }
+  );
   return (
     <EuiRange
       data-test-subj="indexPattern-dimension-formatDecimals"

x-pack/plugins/lens/public/shared_components/debounced_value.test.ts

@@ -43,7 +43,7 @@ describe('useDebouncedValue', () => {
   it('should allow empty input to be updated', () => {
     const onChangeMock = jest.fn();
     const { result } = renderHook(() =>
-      useDebouncedValue({ value: 'a', onChange: onChangeMock }, { allowEmptyString: true })
+      useDebouncedValue({ value: 'a', onChange: onChangeMock }, { allowFalsyValue: true })
     );
 
     act(() => {

x-pack/plugins/lens/public/shared_components/debounced_value.ts

@@ -21,11 +21,11 @@ export const useDebouncedValue = <T>(
     onChange: (val: T) => void;
     value: T;
   },
-  { allowEmptyString }: { allowEmptyString?: boolean } = {}
+  { allowFalsyValue }: { allowFalsyValue?: boolean } = {}
 ) => {
   const [inputValue, setInputValue] = useState(value);
   const unflushedChanges = useRef(false);
-  const shouldUpdateWithEmptyString = Boolean(allowEmptyString);
+  const shouldUpdateWithFalsyValue = Boolean(allowFalsyValue);
 
   // Save the initial value
   const initialValue = useRef(value);
@@ -57,7 +57,7 @@ export const useDebouncedValue = <T>(
 
   const handleInputChange = (val: T) => {
     setInputValue(val);
-    const valueToUpload = shouldUpdateWithEmptyString
+    const valueToUpload = shouldUpdateWithFalsyValue
       ? val ?? initialValue.current
       : val || initialValue.current;
     onChangeDebounced(valueToUpload);

x-pack/test/functional/apps/lens/chart_data.ts

@@ -45,6 +45,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       { x: 'Other', y: 5722.77 },
     ];
 
+    const expectedPieData = [
+      { name: '97.220.3.248', value: 19755 },
+      { name: '169.228.188.120', value: 18994 },
+      { name: '78.83.247.30', value: 17246 },
+      { name: '226.82.228.233', value: 15687 },
+      { name: '93.28.27.24', value: 15614.33 },
+      { name: '__other__', value: 5722.77 },
+    ];
+
     function assertMatchesExpectedData(state: DebugState) {
       expect(
         state.bars![0].bars.map((bar) => ({
@@ -54,32 +63,41 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       ).to.eql(expectedData);
     }
 
+    function assertMatchesExpectedPieData(state: DebugState) {
+      expect(
+        state
+          .partition![0].partitions.map((partition) => ({
+            name: partition.name,
+            value: Math.floor(partition.value * 100) / 100,
+          }))
+          .sort(({ value: a }, { value: b }) => b - a)
+      ).to.eql(expectedPieData);
+    }
+
     it('should render xy chart', async () => {
       const data = await PageObjects.lens.getCurrentChartDebugState();
       assertMatchesExpectedData(data!);
     });
 
-    // Partition chart tests have to be skipped until
-    // https://github.com/elastic/elastic-charts/issues/917 gets fixed
-    it.skip('should render pie chart', async () => {
+    it('should render pie chart', async () => {
       await PageObjects.lens.switchToVisualization('pie');
       await PageObjects.lens.waitForVisualization();
       const data = await PageObjects.lens.getCurrentChartDebugState();
-      assertMatchesExpectedData(data!);
+      assertMatchesExpectedPieData(data!);
     });
 
-    it.skip('should render donut chart', async () => {
+    it('should render donut chart', async () => {
       await PageObjects.lens.switchToVisualization('donut');
       await PageObjects.lens.waitForVisualization();
       const data = await PageObjects.lens.getCurrentChartDebugState();
-      assertMatchesExpectedData(data!);
+      assertMatchesExpectedPieData(data!);
     });
 
-    it.skip('should render treemap chart', async () => {
+    it('should render treemap chart', async () => {
       await PageObjects.lens.switchToVisualization('treemap', 'treemap');
       await PageObjects.lens.waitForVisualization();
       const data = await PageObjects.lens.getCurrentChartDebugState();
-      assertMatchesExpectedData(data!);
+      assertMatchesExpectedPieData(data!);
     });
 
     it('should render heatmap chart', async () => {