@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, dmy, mdy, dm, md, wdmy } from "https://cdn.jsdelivr.net/npm/@gramex/ui/dist/format.js"

• 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:

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 s.anand@gramener.com

License

AGPL-3.0-only