feat(number-format): Add duration formatter with colon notation #30593
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
gerbermichi
force-pushed
the
gerbermichi/time-duration-formatter
branch
from
d0143f8 to
3e22d7b
Compare
michael-s-molina
added
the
review:checkpoint
| export default function createTimeDurationFormatter( | ||
| config: { | ||
| description?: string; | ||
| id?: string; | ||
| label?: string; | ||
| multiplier?: number; | ||
| } = {}, | ||
| ) { | ||
| const { description, id, label } = config; | ||
|
|
||
| return new NumberFormatter({ | ||
| description, | ||
| formatFunc: value => { | ||
| const v = Math.abs(Math.round(value)); | ||
| const h = Math.floor(v / 60); | ||
| const m = v % 60; | ||
| return `${h}:${String(m).padStart(2, '0')}`; | ||
| }, | ||
| id: id ?? 'duration_format', | ||
| label: label ?? `Duration formatter`, | ||
| }); | ||
| } |
There was a problem hiding this comment.
We already have a dependency on pretty-ms that achieves this and (see colonNotation option).
| @@ -78,6 +79,7 @@ export default function setupFormatters( | |||
| 'DURATION_SUB', | |||
| createDurationFormatter({ formatSubMilliseconds: true }), | |||
| ) | |||
| .registerValue('TIME_DURATION', createTimeDurationFormatter()) | |||
There was a problem hiding this comment.
Please check the README.md in the number-format directory for an example how to implement this. I believe this should do it:
| .registerValue('TIME_DURATION', createTimeDurationFormatter()) | |
| .registerValue('DURATION_COL', createTimeDurationFormatter({ colonNotation: true })) |
There was a problem hiding this comment.
Thank you. This does not the same, it will format it in yy:dd:hh:mm:ss and I would like to create a formatter for hh:mm. However, I can add both, DURATION_COL and DURATION_COL_SHORT. What are your thoughts?
There was a problem hiding this comment.
@gerbermichi as pretty-ms already supports colon notation, has good test coverage, and lots of customization options, I suggest looking into how this could be implemented with that library. Did you try adding secondsDecimalDigits: 0 to remove the seconds? See the unit tests for some typical use cases: https://github.com/sindresorhus/pretty-ms/blob/d00183f8a040315005452f6f6dec30c581b258a2/test.js#L312-L380 If pretty-ms still doesn't support what you're looking for, I suggest opening a PR on that repo, as that will also benefit the general OSS community.
There was a problem hiding this comment.
@villebro thank you for your feedback. I changed this PR so that it uses the colonNotation from ´pretty-ms´.
|
FYI: I opened a PR to bump |
michael-s-molina
removed
the
review:checkpoint
Introduces a new formatter, DURATION_COL, for durations presented in colon notation (e.g., 0:10.5). This update enhances the flexibility of duration display formats within the application.
gerbermichi
force-pushed
the
gerbermichi/time-duration-formatter
branch
from
3e22d7b to
8b7cf05
Compare
gerbermichi
changed the title
villebro
changed the title
SUMMARY
Introduces a new formatter, DURATION_COL, for durations presented in colon notation (e.g., 0:10.5).
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
TESTING INSTRUCTIONS
Duration in ms (10500 => 0:10.5)ADDITIONAL INFORMATION