[Lens] fix performance on pie settings slider (#77181)
This commit is contained in:
parent
a49d8e8994
commit
42e03aa14f
|
@ -6,6 +6,7 @@
|
|||
|
||||
import './toolbar.scss';
|
||||
import React, { useState } from 'react';
|
||||
import { useDebounce } from 'react-use';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import {
|
||||
EuiFlexGroup,
|
||||
|
@ -192,19 +193,14 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
|
|||
fullWidth
|
||||
display="columnCompressed"
|
||||
>
|
||||
<EuiRange
|
||||
data-test-subj="indexPattern-dimension-formatDecimals"
|
||||
<DecimalPlaceSlider
|
||||
value={layer.percentDecimals ?? DEFAULT_PERCENT_DECIMALS}
|
||||
min={0}
|
||||
max={10}
|
||||
showInput
|
||||
compressed
|
||||
onChange={(e) => {
|
||||
setValue={(value) =>
|
||||
setState({
|
||||
...state,
|
||||
layers: [{ ...layer, percentDecimals: Number(e.currentTarget.value) }],
|
||||
});
|
||||
}}
|
||||
layers: [{ ...layer, percentDecimals: value }],
|
||||
})
|
||||
}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
<EuiHorizontalRule margin="s" />
|
||||
|
@ -279,3 +275,28 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
|
|||
</EuiFlexGroup>
|
||||
);
|
||||
}
|
||||
|
||||
const DecimalPlaceSlider = ({
|
||||
value,
|
||||
setValue,
|
||||
}: {
|
||||
value: number;
|
||||
setValue: (value: number) => void;
|
||||
}) => {
|
||||
const [localValue, setLocalValue] = useState(value);
|
||||
useDebounce(() => setValue(localValue), 256, [localValue]);
|
||||
|
||||
return (
|
||||
<EuiRange
|
||||
data-test-subj="indexPattern-dimension-formatDecimals"
|
||||
value={localValue}
|
||||
min={0}
|
||||
max={10}
|
||||
showInput
|
||||
compressed
|
||||
onChange={(e) => {
|
||||
setLocalValue(Number(e.currentTarget.value));
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue