feat: Support decimal values in table progress cell type #824 (#2329)

h2oai · May 15, 2024 · 0260430 · 0260430
1 parent 9bd3cb3
commit 0260430
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/ui/src/progress_table_cell_type.test.tsx b/ui/src/progress_table_cell_type.test.tsx
@@ -19,7 +19,14 @@ import { ProgressTableCellType, XProgressTableCellType } from './progress_table_
 const
  name = 'progress-cell',
  progress = 0.0,
- progressCellProps: ProgressTableCellType = { name }
+ progressCellProps: ProgressTableCellType = { name },
+ progressValues = [
+ {input: 0.88, output: '88%'},
+ {input: 0.888, output: '88.8%'},
+ {input: 0.8888, output: '88.88%'},
+ {input: 0.88888, output: '88.89%'},
+ {input: 0.88899, output: '88.90%'},
+ {input: 0.88999, output: '89.00%'},] 
 
 describe('ProgressTableCellType.tsx', () => {
 
@@ -32,4 +39,13 @@ describe('ProgressTableCellType.tsx', () => {
  const { queryByTestId } = render(<XProgressTableCellType model={progressCellProps} progress={progress} />)
  expect(queryByTestId(name)).toBeInTheDocument()
  })
+
+ it('Renders data-test attr with decimal values', () => {
+ const { queryByTestId, rerender } = render(<XProgressTableCellType model={progressCellProps} progress={progress} />)
+ progressValues.map(progressValue => {
+ rerender(<XProgressTableCellType model={progressCellProps} progress={progressValue.input} />)
+ expect(queryByTestId(name)).toBeInTheDocument()
+ expect(queryByTestId(name)).toHaveTextContent(progressValue.output) 
+ })
+ }) 
 })
diff --git a/ui/src/progress_table_cell_type.tsx b/ui/src/progress_table_cell_type.tsx
@@ -50,7 +50,7 @@ export const XProgressTableCellType = ({ model: m, progress }: { model: Progress
  <div data-test={m.name} className={css.container}>
  <ProgressArc thickness={2} color={cssVar(m.color || '$red')} value={progress} />
  <Fluent.Stack horizontalAlign='center' verticalAlign='center' className={clas(css.percentContainer, 'wave-s12')}>
- <div className={css.percent}>{`${Math.round(progress * 100)}%`}</div>
+ <div className={css.percent}>{`${Number.isInteger(progress * 1000) ? (progress * 100) : (progress * 100).toFixed(2)}%`}</div>
  </Fluent.Stack>
  </div >
 )