Support decimal values in table progress cell type

[vopani]

Is your feature request related to a problem? Please describe

I am using a ui.progress_table_cell_type to show some statistics in a table that has need for displaying decimal values.

Describe the solution you'd like

Support for showing additional decimals instead of rounding to an integer. Or Support some other cell type that is suitable to decimal stats.

Comments

It should be optional / configurable of course, in most other cases I think rounding works great.

[mturoci]

Thanks for the issue @vopani. Just to clarify, do you need to to show also the progress arc or just a standalone value?

[vopani]

The progress arc looks very attractive in a table and hence I've been using that. If it's just a standalone value I could just use a numeric column, right?

But, if there could be some 'other' cell_type that could be useful for decimal values then that would be good but maybe the easier solution now is to allow decimals in the value with the arc if that's feasible.

[mturoci]

If it's just a standalone value I could just use a numeric column, right? yes, exactly

Theoretically, there is a bit of space for 2 decimal places vs

@lo5 @shanaka-rajitha wdyt? Should we add decimals attr into existing progress_cell_type or create a new cell type?

[mturoci]

Let's go with updating the existing progress_cell_type.

[arshar2411]

Hi, can I work on this issue?

[dbranley]

Hello Wave,

I have a solution for this issue to support decimal values in table progress cell type.

As explained in the issue, the table progress cell currently rounds values to whole numbers when diplaying them as a percentage. With this change, the percentage will now render with up to 2 decimal places. This is accomplished by using toFixed(2) and parseFloat() together to ensure data is rounded properly and then trailing zeros are removed. The code change in ui/src/progress_table_cell_type.tsx looks like this:

<div className={css.percent}>{`${Number.parseFloat((progress * 100).toFixed(2))}%`}</div>

Here is a partial screen shot of the Table example where you can see the progress data now being displayed with up to 2 decimal places:

There is a new test case in progress_table_cell_type.test.tsx. The test rerenders the XProgressTableCellType component in a loop to make sure that the component is rendering the following input decimal values correctly:

  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.9%'},
    {input: 0.88999, output: '89%'},]

I have a branch in my fork of the project and will be submitting a PR later today. Let me know if this looks ok. Thanks!