Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(formatting): Add memory units adaptive formatter to format bytes #30559

Merged
merged 8 commits into from
Oct 11, 2024

Conversation

mkopec87
Copy link
Contributor

@mkopec87 mkopec87 commented Oct 9, 2024

Add new memory units adaptive formatter to format bytes units into kB, MB, GB, etc.

SUMMARY

Memory unit (bytes) is typically formatted into kB (kilobytes), MB (megabytes), etc.
Superset formatting options don't enable adaptive formatting with proper unit naming in case of bytes values.
There are two most commonly used multi-byte unit types (according to wikipedia), this PR implements them both.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

image

TESTING INSTRUCTIONS

  1. Create a Chart, for example Table, with at least one numeric data column.
  2. Edit the Chart, in the "Customize" tab select one of "Memory in bytes" options for formatting of your numeric column.

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • Migration is atomic, supports rollback & is backwards-compatible
    • Confirm DB migration upgrade and downgrade tested
    • Runtime estimates and downtime expectations provided
  • Introduces new feature or API
  • Removes existing feature or API

@mkopec87
Copy link
Contributor Author

mkopec87 commented Oct 9, 2024

I've created a discussion for this PR as well: #30558

@mkopec87 mkopec87 marked this pull request as ready for review October 9, 2024 12:37
@dosubot dosubot bot added the change:frontend Requires changing the frontend label Oct 9, 2024
Copy link
Member

@villebro villebro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a great feature, and one that many have been looking forward to seeing. In general this looks good, but would you be able to add some unit tests?

@mkopec87
Copy link
Contributor Author

@villebro , sure thing, let me give it a try :) I never wrote any Javascript before, therefore happy to get some feedback :)
CI setup is very useful here.

- Make decimals option a parameter of MemoryFormatter
- Handle negative values in MemoryFormatter
- Handle values exceeding maximal unit value in MemoryFormatter
@pull-request-size pull-request-size bot added size/L and removed size/M labels Oct 11, 2024
@mkopec87
Copy link
Contributor Author

@villebro I added unit tests and fixed some bugs on the way :) Let me know what you think!

@villebro
Copy link
Member

It seems there's a linting issue with the test:
image

Copy link
Member

@villebro villebro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM after the linting issue is fixed

expect(formatter(1000)).toBe('1kB');
expect(formatter(1111)).toBe('1.11kB');
expect(formatter(1024)).toBe('1.02kB');
expect(formatter(1337)).toBe('1.34kB');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol

if (value === 0) return '0B';

const sign = value > 0 ? '' : '-';
value = Math.abs(value);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just create a new const and use that to get around the linting error:

Suggested change
value = Math.abs(value);
const absValue = Math.abs(value);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed as suggested

Comment on lines 22 to 27
describe('createMemoryFormatter()', () => {
it('creates an instance of MemoryFormatter', () => {
const formatter = createMemoryFormatter();
expect(formatter).toBeInstanceOf(NumberFormatter);
});
it('formats bytes in human readable format with default options', () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, one more thing, we try to steer away from nested tests. So instead of doing describe('foo) with many it('bar') and it('baz'), just do individual test('foo bar') and test('foo baz')

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, done

Copy link
Member

@villebro villebro left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, fingers crossed for CI to pass 🤞 Only comment is it'd be great to be able to customize the decimals, but that's outside the scope of this PR. I believe there's a discussion about this lying around somewhere, and would be a great improvement (the idea would be to be able to provide arbitrary config objects to the formatters), but that would require a SIP, so let's leave that for a future improvement.

@villebro villebro merged commit 0e9c0f6 into apache:master Oct 11, 2024
34 checks passed
@mkopec87 mkopec87 deleted the feature/formatting-memory-units branch October 14, 2024 09:17
@mkopec87
Copy link
Contributor Author

Thanks @villebro for your help merging this :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
change:frontend Requires changing the frontend packages size/L
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants