Elgato_dark/hyperdx
1
0
Fork 0
mirror of https://github.com/hyperdxio/hyperdx synced 2026-04-21 13:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

fix: Set correct values when opening number format form (#1616)

Browse source
This commit is contained in:
Drew Davis 2026-01-16 09:08:36 -05:00 committed by GitHub
parent 190c66b8df
commit 1d96140909
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/neat-geckos-report.md Normal file
View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
fix: Set correct values when opening number format form

62
packages/app/src/components/NumberFormat.tsx
View file

@ -39,34 +39,27 @@ const FORMAT_ICONS: Record<string, React.ReactNode> = {
time: <IconClock size={14} />,
};
const DEFAULT_NUMBER_FORMAT: NumberFormat = {
factor: 1,
output: 'number',
mantissa: 2,
thousandSeparated: true,
average: false,
decimalBytes: false,
};
const TEST_NUMBER = 1234;
export const NumberFormatForm: React.FC<{
value?: NumberFormat;
onApply: (value: NumberFormat) => void;
onClose: () => void;
}> = ({ value, onApply, onClose }) => {
const { register, handleSubmit, control, setValue } = useForm<NumberFormat>({
values: value,
defaultValues: {
factor: 1,
output: 'number',
mantissa: 2,
thousandSeparated: true,
average: false,
decimalBytes: false,
},
defaultValues: value ?? DEFAULT_NUMBER_FORMAT,
});
const values = useWatch({ control });
const valuesWithDefaults = values ?? {
factor: 1,
output: 'number' as const,
mantissa: 2,
thousandSeparated: true,
average: false,
decimalBytes: false,
};
const testNumber = 1234;
const format = useWatch({ control });
return (
<>
@ -99,10 +92,7 @@ export const NumberFormatForm: React.FC<{
>
<NativeSelect
label="Output format"
leftSection={
valuesWithDefaults.output &&
FORMAT_ICONS[valuesWithDefaults.output]
}
leftSection={format.output && FORMAT_ICONS[format.output]}
style={{ flex: 1 }}
data={[
{ value: 'number', label: 'Number' },
@ -113,7 +103,7 @@ export const NumberFormatForm: React.FC<{
]}
{...register('output')}
/>
{valuesWithDefaults.output === 'currency' && (
{format.output === 'currency' && (
<TextInput
w={80}
label="Symbol"
@ -121,12 +111,6 @@ export const NumberFormatForm: React.FC<{
{...register('currencySymbol')}
/>
)}
{/* <TextInput
w={100}
label="Unit"
placeholder=""
{...register('unit')}
/> */}
</div>
<div style={{ marginTop: -6 }}>
@ -138,11 +122,11 @@ export const NumberFormatForm: React.FC<{
>
Example
</div>
{formatNumber(testNumber || 0, valuesWithDefaults as NumberFormat)}
{formatNumber(TEST_NUMBER, format as NumberFormat)}
</Paper>
</div>
{valuesWithDefaults.output !== 'time' && (
{format.output !== 'time' && (
<div>
<div className="fs-8 mt-2 fw-bold mb-1">Decimals</div>
<Slider
@ -154,7 +138,7 @@ export const NumberFormatForm: React.FC<{
{ value: 0, label: '0' },
{ value: 10, label: '10' },
]}
value={values.mantissa}
value={format.mantissa}
onChange={value => {
setValue('mantissa', value);
}}
@ -162,14 +146,14 @@ export const NumberFormatForm: React.FC<{
</div>
)}
<Stack gap="xs">
{values.output === 'byte' ? (
{format.output === 'byte' ? (
<MCheckbox
size="xs"
label="Decimal base"
description="Use 1KB = 1000 bytes"
{...register('decimalBytes')}
/>
) : values.output === 'time' ? (
) : format.output === 'time' ? (
<NativeSelect
size="sm"
label="Input unit"
@ -211,17 +195,11 @@ export const NumberFormatForm: React.FC<{
);
};
const TEST_NUMBER = 1234;
export const NumberFormatInput: React.FC<{
value?: NumberFormat;
onChange: (value?: NumberFormat) => void;
}> = ({ value, onChange }) => {
const [opened, { open, close }] = useDisclosure(false);
const example = React.useMemo(
() => formatNumber(TEST_NUMBER, value),
[value],
);
const handleApply = React.useCallback(
(value?: NumberFormat) => {