npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

physical-quantity

v1.1.88

Published

A web component bundle to represent physical quantities with automated unit conversion.

Downloads

537

Readme

Web Components for Physical Quantities with Built-in Unit Conversion

Physical Quantity to/from Feet-Inches (Gif Animation)

This package introduces three custom HTML elements designed for expressing and manipulating physical quantities with seamless unit conversion:

  • <physical-quantity> (alias: <uc-qty>) A versatile component for single quantities, featuring a value input and a unit dropdown. It automatically handles conversions within the same unit category.

  • <uc-qty-pair> Represents a pair of physical quantities sharing the same unit. It displays two values and a unit dropdown, enabling simultaneous conversion of both quantities.

  • <uc-qty-triplet> Designed for triplets of physical quantities with a common unit. It presents three values and a unit dropdown, facilitating synchronized conversion across all three quantities.

These web components offer:

  • Self-contained unit conversion
  • A clean, compact user interface
  • Elimination of redundant dual units
  • Seamless integration across various websites and platforms

By leveraging these custom elements, developers can easily incorporate sophisticated physical quantity handling and unit conversion into their web applications, enhancing user experience and data presentation.

Features

  • Create a physical quantity with a value and unit.
  • Automatically convert between units within the same category.
  • Display values with customizable decimal places if not an integer; show integers without decimal parts.
  • Easy to integrate into any web project.

Demo: Physical Quantity element - No Unit Converter or Dual Units Needed

Live Demo 1 - technical writing
Live Demo 2 - typical product specs
Live Demo 3 - typical product specs
Live Demo 4 - unique ft-in conversion

Physical Quantity (Gif Animation)

Example 1 in UI

Example 2 in UI

Installation

You can install the physical-quantity package using npm:

npm install physical-quantity

Usage

For Web Visitors

The unit list displays available units for the physical quantity category. Users can easily switch between units to view the same quantity in different measurements.

When hovering over the unit list, an icon appears, providing access to a comprehensive Generic Unit Converter powered by AutoCalcs. This tool allows users to convert quantities across 60+ categories.

For Developers

After installation, you can import and use the physical-quantity component in your project.

Importing the Component

Include the following script tag in your HTML file:

<script src="node_modules/physical-quantity/dist/pq.es.js"></script>  

Using the Component

Add the <physical-quantity>, <uc-qty>, <uc-qty-pair>, or <uc-qty-triplet> tag to your HTML file:

<physical-quantity value="25.4" unit="mm" decimal-places="4"></physical-quantity> 
<uc-qty value="25.4" unit="mm" decimal-places="4"></uc-qty> 
<uc-qty value="25.4" unit="mm" show-unit-arrow="false"></uc-qty> Compact mode, no arrow.<br>
<physical-quantity value="25.4" unit="mxm" decimal-places="2"></physical-quantity> Non-exist unit, shown as is.<br>
<physical-quantity value="25" unit="mm" decimal-places="2"></physical-quantity><br>
<physical-quantity value="25" unit="mm" decimal-places="3"></physical-quantity> 3 digits<br>
<physical-quantity value="25" unit="mm" decimal-places="4"></physical-quantity> 4 digits<br>
<physical-quantity value="25" unit="mm" decimal-places="5"></physical-quantity> 5 digits<br>
<physical-quantity value="1500" unit="g"></physical-quantity> <br>
<physical-quantity value="1500" unit="psf"></physical-quantity> <br>
<physical-quantity value="137.16" unit="cm"></physical-quantity>x
<physical-quantity value="137.16" unit="cm"></physical-quantity>x
<physical-quantity value="91.44" unit="cm"></physical-quantity><br>
<physical-quantity value="800" unit="kg/m³"></physical-quantity><br>
<physical-quantity value="800" unit="kg/m³" show-unit-arrow="false"></physical-quantity>Compact mode, no arrow.<br>
<uc-qty value="91" unit="cm"></uc-qty><br>
<uc-qty value="2" unit="minute"></uc-qty><br>
<uc-qty value="2" unit="A"></uc-qty> Default with arrow.<br>
<uc-qty value="2" unit="A" show-unit-arrow="false"></uc-qty>Compact mode, no arrow.<br>
<uc-qty value="37.778" unit="°C" show-unit-arrow="false"></uc-qty>Compact mode, no arrow.<br>
<uc-qty value="100" unit="°F"></uc-qty><br>
<uc-qty value="2'-3" unit="ft-in"></uc-qty>For Feet-Inches unit<br>
<physical-quantity value="2'-3 3/16" unit="ft-in" ></physical-quantity>
<physical-quantity value="2" unit="ft-in"></physical-quantity>
<physical-quantity value="2'-3" unit="ft-in" ></physical-quantity><br>
<physical-quantity value="10" unit="kgf" ></physical-quantity>
<physical-quantity value="10" unit="Volt" ></physical-quantity>

<uc-qty-pair values="10,20" unit="cm"></uc-qty-pair> Quantity pair<br>
    
<uc-qty-triplet values="10x20x30" unit="cm"></uc-qty-triplet> Quantity triplet values="10x20x30" unit="cm"<br>

Above Rendered in Web Browser

Example - Linking the Code

Here's an example of how to use the component in an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Physical Quantity Component Example</title>
</head>
<body>
  <physical-quantity value="25.4" unit="mm"></physical-quantity>
  <uc-qty value="25.4" unit="mm" decimal-places="4"></uc-qty> <br>
  <uc-qty-pair values="10,20" unit="cm"></uc-qty-pair><br>
    
  <uc-qty-triplet values="10x20x30" unit="cm"></uc-qty-triplet><br>

  <script src="node_modules/physical-quantity/src/pq.es.js"></script>
</body>
</html>

Example - HTML File Using CDN

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Physical Quantity Component Example</title>
  <script src="https://unpkg.com/physical-quantity@latest/dist/pq.umd.js"></script>
</head>
<body>
  <physical-quantity value="25.4" unit="mm"></physical-quantity>
  <physical-quantity value="1500" unit="psf" decimal-places=4></physical-quantity> <br>
  <uc-qty value="2" unit="lbm" decimal-places="2"></uc-qty> <br>
  <uc-qty-pair values="10,20" unit="cm"></uc-qty-pair><br>    
  <uc-qty-triplet values="10x20x30" unit="cm"></uc-qty-triplet><br>
  
</body>
</html>

Attributes

The physical-quantity component supports the following attributes:

  • value: The initial value of the physical quantity. It can be any number.
  • unit: The initial unit of the physical quantity.
    When a valid unit within the supported unit categories (e.g., mm, cm, m, in, ft for length), unit conversion is automated;
    When a unit provided is not in the library, it will show per the author's input, like a regular text input.
  • decimal-places: web author can specify the decimal-places depending on the magnitude of the quantity. Default to 2.
  • show-unit-arrow: specify to show the downward arrow following the units list. Default to be true. When set to false, it is suitable when the author wants to show in a compact format.

Supported Units

Currently, the component supports the following categories and units: | Category | Unit | Description | |---|---|---| | Length | m |meter| | |km |kilometer| | |mm |millimeter| | |cm |centimeter| | |in |inch| | |ft-in |foot-inch| | |ft |foot| | Mass | kg |kilogram| | | g |gram| | |lbm |pound mass| | Time | s[second] || | | s|| | | minute|| | | h|| | | h[hour]|| | | day|| | | week|| | ElectricalCurrent | A || | | Ampere[amp]|| | | mA|| | | µA|| | | kA|| | | MA|| | | esu/s || | Temperature | °K || | | °C || | | °F || | | °Ra || | Amount of Substance | mol || | | mmol || | | kmol || | Luminous Intensity | cd[candela] || | | lm/sr || | | cp[candlepower] || | | cp[candlepower(before 1948)] || | Acceleration | m/s² || | | m/min² || | | mm/s² || | | ft/s² || | | ft/min² || | | in/s² || | Gravitational Constant | m³/kg/s² || | | N⋅m²/kg² || | | dyn⋅cm²/g² || | Velocity (Angular) | rad/s || | | rad/min || | | rad/h || | | deg°/s || | | deg°/min || | | deg°/h || | | rpm[rev/min]|| | | rev/s || | Pressure/Stress | Pa || | | kPa || | | MPa || | | GPa || | | bar || | | mbar|| | | atm|| | | mm HG|| | | cm HG|| | | in HG|| | | mm W.C.|| | | m W.C.|| | | in W.C.|| | | psf| pound per square foot| | | psi| pound per square foot| | | ksi| kilo-pound per square foot| | | ksi[kip/in²]|| | Density | kg/m³|| | | kg/L|| | | g/cm³|| | | g/mm³|| | | lbm/ft³|| | | lbm/in³|| | Force | N|| | | kN|| | | MN|| | | kgf|| | | lb| pound weight | | | lbf| pount force | | | kip[kilo pounds]|| | Flow Rate (Volume) | m³/s || | | m³/min || | | m³/h || | | L/s || | | L/min || | | L/h || | | cm³/s || | | cm³/min || | | in³/s || | | in³/min || | | ft³/s || | | CFM || | | CFM[ft³/min] || | | CFH || | | CFH[ft³/h] || | | yd³/min || | | yd³/h || | | gpm(US) | gallons(US) per minute | | | gph(US) | gallons(US) per hour | | | bushel(UK-imperial)/h || | | bushel(US)/h || | Electrical Potential Difference (Voltage) | V || | | Volt || | | joule/coulomb || | | J/C || | | µV || | | mV || | | kV || | | M || | more to update. | (feel free to send your request for other units & categories) ||

Note:

  • lbm, lbmass are used for mass units;
  • lb, lbf are used for weight/force units.

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributing

Contributions are welcome! Please contact the developer for any bugs, features, or improvements.

Change Log

| Version | Date | Description | |---|---|---| | v1.1.88 |20241016| Code optimized. | | v1.1.85 |20241015| Bug fixes. | | v1.1.81 |20241014| Added uc-qty-pair & uc-qty-triplet. | | v1.1.80 |20241013| Minor bug fixes. | | v1.1.75 |20241010| Added more ounces and cups for volume. | | v1.1.70 |20240810| Fine-tuned style. Checked usage of PQ element in Vue 3 app. Works with both unpkg and npm installation. | | v1.1.68 |20240722| Readme update with Technical Writing example. | | v1.1.67 |20240721| Number formatting with comma, eg: 20000 to 23,000; bug fixes. | | v1.1.60 |20240721| A main refactoring. | | v1.1.52 |20240718| Added category "Electrical Potential Difference (Voltage)".| | v1.1.50 |20240716| Corrected decimal point format, default to 2.| | v1.1.47 |20240712| Added flow rate (volume) category.| | v1.1.46 |20240629| Added more categories; add notes for mass/weight differences.| | v1.1.43 |20240623| Added more categories.| | v1.1.41 |20240620| Added Force category.| | v1.1.40 |20240619| Added ft-in (ie: Foot-Inch) in Length category.| | v1.1.35 |20240616| Added temperature category.| | v1.1.30 |20240615| Added "show-unit-arrow" prop to allow web author to create a compact UI; Unit width is now responsive to the chosen unit; Author can force init unit.| | v1.1.28 |20240610| Tooltip for unit list provides a link to the unit converter page for all unit categories. Added more categories.| | v1.1.21 |20240603| Added alias uc-qty. | | v1.1.19 |20240602| Changed to umd for unpkg, and es for module. |

Contact

If you have any questions or feedback, feel free to contact me at [email protected].
For more info, please visit:
AutoCalcs
AutoCalcs Docs and Library Demo