@gramex/ui NPM

@gramex/ui

Commonly used UI components and interactions.

Install via npm:

npm install @gramex/ui

JavaScript supports the Intl object to format numbers, dates, lists, etc. based on locale.

These utility functions provide commonly used number, percentage and date formats.

Import the functions as:

import { num, num0, num2, pc, pc0, pc1 } from "https://cdn.jsdelivr.net/npm/@gramex/ui@0.3/dist/format.js";

	0.0038	0.038	0.38	3.81	381	38,104	3,810,369.24
`num(val)`	0.0038	0.038	0.38	3.8	381	38K	3.8M
`num0(val)`	0	0	0	4	381	38,104	3,810,369
`num2(val)`	0	0.04	0.38	3.81	381.04	38,103.69	3,810,369.24
`pc(val)`	0.38%	3.8%	38%	381%
`pc0(val)`	0%	4%	38%	381%
`pc1(val)`	0.4%	3.8%	38.1%	381.0%

num(value): Use by default. Shows 2-3 significant digits and shortens to "K", "M", etc.
num0(value): Integers. Use when values are typically between 1 - 1,000,000
num2(value): 2 decimal numbers. Use when values are typically between 1 - 1,000
pc(value): Use by default. Shows 2-3 digits
pc0(value): 0 decimal percent. Use if % is between 10-100% and never below 1%
pc1(value): 1 decimal percent. Use if % is between 1-10% and never below 0.1%

See the source to create your own formats. Refer to Intl.NumberFormat().

The following date formats are supported:

import { dmy, mdy, dm, md, wdmy } from "https://cdn.jsdelivr.net/npm/@gramex/ui@0.3/dist/format.js";

This code adds a dropdown to switch the Bootstrap color mode between light and dark themes.

To run this project locally:

To release, run:

npm version minor
npm publish
git push --tags

9 months ago

2 years ago

2 years ago