@gramex/ui

Commonly used UI components and interactions.

Installation

Install via npm:

npm install @gramex/ui

Formats

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/[email protected]/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/[email protected]/dist/format.js";

| Function | 23 Jan 2023 | | ----------: | ---------------: | | dmy(val) | 23 Jan 2023 | | mdy(val) | Jan 23, 2023 | | dm(val) | 23 Jan | | md(val) | Jan 23 | | wdmy(val) | Mon, 23 Jan 2023 |

Dark theme

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

Source code

Setup

To run this project locally:

• Clone this repo, and run npm install to install dependencies
• Run npm run build to compile
• Open index.html using a HTTP server (e.g. python -m http.server)

To release, run:

npm version minor
npm publish
git push --tags

Release notes

• 0.1.0: 5 Aug 2023. Dark theme published

Authors

Anand S [email protected]

License

MIT