@protoqol/directus-extension-formatted-numbers 1.0.0

package/README.md

@@ -0,0 +1,55 @@
+# Directus Extension: Formatted Numbers
+
+A custom display extension for Directus that provides highly readable, localised, and abbreviated number formatting.
+Perfect for dashboards and tables where space is limited or where accurate numbers are not a must.
+
+## Features
+
+- **Smart Abbreviations**: Automatically scales large numbers using standard signifiers (k, M, B, T, P, E, Z, Y).
+- **Localisation Support**: Correctly formats abbreviations based on the selected language (e.g., `Mrd.` for German
+  Billions, `億` for Japanese). Configure via the "Localisation" field option.
+- **Full Value Tooltip**: Hover over any abbreviated number to see the exact, unformatted value in a tooltip.
+- **Customisable Appearance**: Add custom prefixes (like currency symbols) and suffixes.
+
+## Configuration Options
+
+When configuring a field to use the "Formatted numbers" display, you can customise the following options:
+
+- **Decimals**: Set the maximum number of decimal places to display (default: 2). This controls how accurate the
+  displayed number is.
+- **Localisation**: Choose the formatting rules for a specific language. Supported languages:
+    - English (en)
+    - French (fr)
+    - German (de)
+    - Spanish (es)
+    - Japanese (ja)
+    - Chinese (zh)
+- **Prefix**: Add text or symbols before the number (e.g., `$`, `€`).
+- **Suffix**: Add text or symbols after the number (e.g., ` units`, ` EUR`).
+
+## Examples
+
+| Raw Value             | Config            | Output      |
+|:----------------------|:------------------|:------------|
+| `1,234,567`           | `en`, 2 decimals  | `1.23M`     |
+| `123,456,789,000`     | `de`, 1 decimal   | `123,5Mrd.` |
+| `5,000`               | `en`, prefix: `$` | `$5K`       |
+| `100,000,000,000,000` | `en`              | `100T`      |
+
+## Supported Scales
+
+The extension supports values from thousands up to septillions. Do you require more? Open an issue and we'll add
+it!
+
+- **K**: Kilo (10³)
+- **M**: Mega (10⁶)
+- **B / G**: Giga / Billion (10⁹)
+- **T**: Tera / Trillion (10¹²)
+- **P**: Peta / Quadrillion (10¹⁵)
+- **E**: Exa (10¹⁸)
+- **Z**: Zetta (10²¹)
+- **Y**: Yotta (10²⁴)
+
+---
+
+Developed by [Protoqol](https://protoqol.nl/).

package/dist/index.js

@@ -0,0 +1 @@
+import{defineDisplay as e}from"@directus/extensions-sdk";import{defineComponent as i,createElementBlock as r,openBlock as t,toDisplayString as s}from"vue";var n=i({props:{value:{type:Number,default:null},rounding:{type:Number,default:2},lang:{type:String,default:"en"},prefix:{type:String,default:""},suffix:{type:String,default:""}},computed:{formattedValue(){if(null===this.value||void 0===this.value)return"–";let e="";const i=Math.abs(this.value),r=this.value<0?"-":"";let t={en:[{threshold:1e24,signifier:"Y"},{threshold:1e21,signifier:"Z"},{threshold:1e18,signifier:"E"},{threshold:1e15,signifier:"P"},{threshold:1e12,signifier:"T"},{threshold:1e9,signifier:"B"},{threshold:1e6,signifier:"M"},{threshold:1e3,signifier:"K"}],fr:[{threshold:1e24,signifier:"Y"},{threshold:1e21,signifier:"Z"},{threshold:1e18,signifier:"E"},{threshold:1e15,signifier:"P"},{threshold:1e12,signifier:"Bn"},{threshold:1e9,signifier:"Md"},{threshold:1e6,signifier:"M"},{threshold:1e3,signifier:"k"}],de:[{threshold:1e24,signifier:"Y"},{threshold:1e21,signifier:"Z"},{threshold:1e18,signifier:"E"},{threshold:1e15,signifier:"P"},{threshold:1e12,signifier:"Bio."},{threshold:1e9,signifier:"Mrd."},{threshold:1e6,signifier:"Mio."},{threshold:1e3,signifier:"Tsd."}],es:[{threshold:1e24,signifier:"Y"},{threshold:1e21,signifier:"Z"},{threshold:1e18,signifier:"E"},{threshold:1e15,signifier:"P"},{threshold:1e12,signifier:"B"},{threshold:1e9,signifier:"mil M"},{threshold:1e6,signifier:"M"},{threshold:1e3,signifier:"mil"}],ja:[{threshold:1e24,signifier:"Y"},{threshold:1e21,signifier:"Z"},{threshold:1e18,signifier:"E"},{threshold:1e15,signifier:"P"},{threshold:1e12,signifier:"兆"},{threshold:1e8,signifier:"億"},{threshold:1e4,signifier:"万"}],zh:[{threshold:1e24,signifier:"Y"},{threshold:1e21,signifier:"Z"},{threshold:1e18,signifier:"E"},{threshold:1e15,signifier:"P"},{threshold:1e12,signifier:"万亿"},{threshold:1e8,signifier:"亿"},{threshold:1e4,signifier:"万"}]}[this.lang].find(e=>i>=e.threshold);if(t){let s=i/t.threshold,n="";if(n=s.toFixed(this.rounding).replace(/\.?0+$/,""),n.length>5)for(let e=this.rounding-1;e>=0&&(n=s.toFixed(e).replace(/\.?0+$/,""),!(n.length<=5));e--);e=r+n+t.signifier}else e=new Intl.NumberFormat(void 0,{minimumFractionDigits:0,maximumFractionDigits:this.rounding}).format(this.value);return`${this.prefix||""}${e}${this.suffix||""}`},fullValue(){return null===this.value||void 0===this.value?"":(new Intl.NumberFormat).format(this.value)}}});const h=["title"];var l=e({id:"protoqol-formatted-numbers",name:"Formatted numbers",icon:"forward_media",description:"Format numbers in a (localised) readable way.",component:((e,i)=>{const r=e.__vccOpts||e;for(const[e,t]of i)r[e]=t;return r})(n,[["render",function(e,i,n,l,o,d){return t(),r("div",{title:e.fullValue},s(e.formattedValue),9,h)}]]),options:[{field:"rounding",name:"Decimals",type:"integer",meta:{width:"half",interface:"input",options:{placeholder:"2",min:0}}},{field:"lang",name:"Localisation",type:"string",meta:{width:"half",interface:"select-dropdown",options:{choices:[{text:"English",value:"en"},{text:"French",value:"fr"},{text:"German",value:"de"},{text:"Spanish",value:"es"},{text:"Japanese",value:"ja"},{text:"Chinese",value:"zh"}]}},schema:{default_value:"en"}},{field:"prefix",name:"Prefix",type:"string",meta:{width:"half",interface:"input",options:{placeholder:"€"}}},{field:"suffix",name:"Suffix",type:"string",meta:{width:"half",interface:"input",options:{placeholder:"EUR"}}}],types:["integer","bigInteger"]});export{l as default};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name"              : "@protoqol/directus-extension-formatted-numbers",
+  "license"           : "MIT",
+  "description"       : "Directus extension: Format numbers in a easily readable way. With localisation available!",
+  "icon"              : "forward_media",
+  "version"           : "1.0.0",
+  "keywords"          : [
+    "directus",
+    "directus-extension",
+    "directus-extension-display"
+  ],
+  "type"              : "module",
+  "files"             : [
+    "dist"
+  ],
+  "directus:extension": {
+    "type"  : "display",
+    "path"  : "dist/index.js",
+    "source": "src/index.ts",
+    "host"  : "^10.10.0"
+  },
+  "scripts"           : {
+    "build"   : "directus-extension build",
+    "dev"     : "directus-extension build -w --no-minify",
+    "link"    : "directus-extension link",
+    "validate": "directus-extension validate"
+  },
+  "devDependencies"   : {
+    "@directus/extensions-sdk": "17.0.5",
+    "typescript"              : "^5.9.3",
+    "vue"                     : "^3.5.27"
+  }
+}