topcoat-data / topcoat-public

TopCoat components, visualizations and themes
MIT License
1 stars 3 forks source link

feat: create number formatting component #256

Closed sareg0 closed 1 year ago

sareg0 commented 1 year ago

What this does

This PR adds a component to format numbers in a consistent way. The intention is to centralise the logic for formatting numbers that lives in t-big-number, into a simple component. This will allow report authors to get consistent number formatting wherever they use this component. It will replace the logic in t-big-number in a separate PR.

This component will format the number to the 'en' locale until it reaches a threshold, and then it will be formatted using the 'compact' notation.

Notes for the reviewer

To test this component you can go follow the following steps

modules:
    - git: https://github.com/topcoat-data/topcoat-public.git
      revision: chore/formatted-number-component
<t-column header="TOTAL OPEN" id-or-name="OPEN_ISSUES">
  <div class="flex items-center gap-4">
    <t-formatted-number :value="JSON.parse(value)[JSON.parse(value).length - 1]" />
    <sparkline 
      :datum="value" 
      wrapperless
      style="width: 46px; height:30px;"
      stroke="#727184"
    />
  </div>
</t-column>

Missed anything?

More information

Screenshots / GIFs

Before

Screenshot 2023-07-25 at 11 26 35 Screenshot 2023-07-25 at 12 17 31

After

Screenshot 2023-07-25 at 11 21 43 Screenshot 2023-07-25 at 11 20 32