Permalink
Browse files

Examples: Include compact number formatting

Ref #759
  • Loading branch information...
rxaviers committed Jul 10, 2018
1 parent eb3e28c commit 7997b6c0cc845a1da2025a2f362236ed1103009a
@@ -23,6 +23,7 @@ <h2>Demo output</h2>
<p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
<p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
<p>A number: <span id="number"></span></p>
<p>A number (compact form): <span id="number-compact"></span></p>
<p>A currency: <span id="currency"></span></p>
<p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
<p>Messages:</p>
@@ -107,6 +107,11 @@ require([
// Use Globalize to format numbers.
number = en.numberFormatter();
document.getElementById( "number" ).textContent = number( 12345.6789 );
document.getElementById( "number-compact" ).textContent = en.formatNumber( 12345.6789, {
compact: "short",
minimumSignificantDigits: 1,
maximumSignificantDigits: 3
});
// Use Globalize to format currencies.
document.getElementById( "currency" ).textContent = en.formatCurrency( 69900, "USD" );
@@ -7,5 +7,8 @@
"installed on Globalize's root.",
"",
"It's analogous to `chroot .` for npm. [:P]"
]
],
"dependencies": {
"cldr-data-downloader": "^0.3.4"
}
}
@@ -5,6 +5,13 @@ var startTime = new Date();
var numberFormatter = Globalize.numberFormatter({ maximumFractionDigits: 2 });
document.getElementById( "number" ).textContent = numberFormatter( 12345.6789 );
var numberCompactFormatter = Globalize.numberFormatter({
compact: "short",
minimumSignificantDigits: 1,
maximumSignificantDigits: 3
});
document.getElementById( "number-compact" ).textContent = numberCompactFormatter( 12345.6789 );
var currencyFormatter = Globalize.currencyFormatter( "USD" );
document.getElementById( "currency" ).textContent = currencyFormatter( 69900 );
@@ -41,6 +48,7 @@ document.getElementById( "unit" ).textContent = unitFormatter( 60 );
// Messages.
document.getElementById( "intro-1" ).textContent = Globalize.formatMessage( "intro-1" );
document.getElementById( "number-label" ).textContent = Globalize.formatMessage( "number-label" );
document.getElementById( "number-compact-label" ).textContent = Globalize.formatMessage( "number-compact-label" );
document.getElementById( "currency-label" ).textContent = Globalize.formatMessage( "currency-label" );
document.getElementById( "date-label" ).textContent = Globalize.formatMessage( "date-label" );
document.getElementById( "date-time-zone-label" ).textContent = Globalize.formatMessage( "date-time-zone-label" );
@@ -25,6 +25,10 @@ <h2>Requirements</h2>
<td><span id="number-label">Standalone Number</span></td>
<td>"<span id="number"></span>"</td>
</tr>
<tr>
<td><span id="number-compact-label">Standalone Number (compact form)</span></td>
<td>"<span id="number-compact"></span>"</td>
</tr>
<tr>
<td><span id="currency-label">Standalone Currency</span></td>
<td>"<span id="currency"></span>"</td>
@@ -2,6 +2,7 @@
"ar": {
"intro-1": "‫استخدم Globalize لتدويل تطبيقك.‬",
"number-label": "رقم",
"number-compact-label": "الرقم (شكل مدمج)",
"currency-label": "عملة",
"date-label": "تاريخ",
"date-time-zone-label": "التاريخ (في منطقة زمنية محددة ل إيانا، على سبيل المثال، America/Sao_Paulo)",
@@ -2,6 +2,7 @@
"de": {
"intro-1": "Verwenden Sie Globalize um Ihre Anwendung zu internationalisieren.",
"number-label": "Zahl",
"number-compact-label": "Zahl (kompakte Form)",
"currency-label": "Währung",
"date-label": "Datum",
"date-time-zone-label": "Datum (in einer bestimmten IANA-Zeitzone, z. B. America/Sao_Paulo)",
@@ -2,6 +2,7 @@
"en": {
"intro-1": "Use Globalize to internationalize your application.",
"number-label": "Number",
"number-compact-label": "Number (compact form)",
"currency-label": "Currency",
"date-label": "Date",
"date-time-zone-label": "Date (in a specific IANA time zone, e.g., America/Sao_Paulo)",
@@ -2,6 +2,7 @@
"es": {
"intro-1": "Usa Globalize para internacionalizar tu aplicación.",
"number-label": "Número",
"number-compact-label": "Número (forma compacta)",
"currency-label": "Moneda",
"date-label": "Fecha",
"date-time-zone-label": "Fecha (en una zona horaria IANA específica, por ejemplo, America/Sao_Paulo)",
@@ -2,6 +2,7 @@
"pt": {
"intro-1": "Use o Globalize para internacionalizar sua aplicação.",
"number-label": "Número",
"number-compact-label": "Número (forma compacta)",
"currency-label": "Moeda",
"date-label": "Data",
"date-time-zone-label": "Data (em um fuso horário IANA específico, por exemplo, America/Sao_Paulo)",
@@ -2,6 +2,7 @@
"ru": {
"intro-1": "Используйте Globalize для интернационализиции вашего приложения.",
"number-label": "Число",
"number-compact-label": "Число (компактная форма)",
"currency-label": "Валюта",
"date-label": "Дата",
"date-time-zone-label": "Дата (в определенном часовом поясе IANA, например, America/Sao_Paulo)",
@@ -2,6 +2,7 @@
"zh": {
"intro-1": "使用Globalize的国际化应用程序",
"number-label": "号码",
"number-compact-label": "编号(紧凑形式)",
"currency-label": "",
"date-label": "迄今",
"date-time-zone-label": "日期(在特定的IANA时区,例如America / Sao_Paulo)",
@@ -26,6 +26,11 @@ document.getElementById( "dateToParts" ).innerHTML = Globalize.formatDateToParts
// Use Globalize to format numbers.
number = Globalize.numberFormatter();
document.getElementById( "number" ).textContent = number( 12345.6789 );
document.getElementById( "number-compact" ).textContent = Globalize.formatNumber( 12345.6789, {
compact: "short",
minimumSignificantDigits: 1,
maximumSignificantDigits: 3
});
// Use Globalize to format currencies.
document.getElementById( "currency" ).textContent = Globalize.formatCurrency( 69900, "USD" );
@@ -20,6 +20,7 @@ <h2>Demo output</h2>
<p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
<p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
<p>A number: <span id="number"></span></p>
<p>A number (compact form): <span id="number-compact"></span></p>
<p>A currency: <span id="currency"></span></p>
<p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
<p>Messages:</p>
@@ -21,6 +21,7 @@ <h2>Demo output</h2>
<p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
<p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
<p>A number: <span id="number"></span></p>
<p>A number (compact form): <span id="number-compact"></span></p>
<p>A currency: <span id="currency"></span></p>
<p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
<p>Messages:</p>
@@ -65,6 +66,9 @@ <h2>Demo output</h2>
<script src="compiled-formatters.js"></script>
<!-- Our App -->
<script>
Globalize.locale("en");
</script>
<script src="app.js"></script>
</body>
@@ -38,6 +38,13 @@ console.log( Globalize.formatDateToParts( new Date(), { datetime: "medium" } ) )
// Use Globalize to format numbers.
console.log( Globalize.formatNumber( 12345.6789 ) );
// Use Globalize to format numbers (compact form).
console.log( Globalize.formatNumber( 12345.6789, {
compact: "short",
minimumSignificantDigits: 1,
maximumSignificantDigits: 3
}));
// Use Globalize to format currencies.
console.log( Globalize.formatCurrency( 69900, "USD" ) );
@@ -10,7 +10,7 @@ <h1>Globalize Hello World (plain javascript)</h1>
<div id="requirements">
<h2>Requirements</h2>
<ul>
<li>You need to download the `cldrjs` dependency yourself. Read README.md for instructions.
<li>You need to download `cldrjs` and `globalize` dependencies yourself. Read README.md for instructions.
</li>
</ul>
</div>
@@ -21,6 +21,7 @@ <h2>Demo output</h2>
<p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
<p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
<p>A number: <span id="number"></span></p>
<p>A number (compact form): <span id="number-compact"></span></p>
<p>A currency: <span id="currency"></span></p>
<p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
<p>Messages:</p>
@@ -199,7 +200,35 @@ <h2>Demo output</h2>
"timeSeparator": ":"
},
"decimalFormats-numberSystem-latn": {
"standard": "#,##0.###"
"standard": "#,##0.###",
"short": {
"decimalFormat": {
"1000-count-one": "0K",
"1000-count-other": "0K",
"10000-count-one": "00K",
"10000-count-other": "00K",
"100000-count-one": "000K",
"100000-count-other": "000K",
"1000000-count-one": "0M",
"1000000-count-other": "0M",
"10000000-count-one": "00M",
"10000000-count-other": "00M",
"100000000-count-one": "000M",
"100000000-count-other": "000M",
"1000000000-count-one": "0B",
"1000000000-count-other": "0B",
"10000000000-count-one": "00B",
"10000000000-count-other": "00B",
"100000000000-count-one": "000B",
"100000000000-count-other": "000B",
"1000000000000-count-one": "0T",
"1000000000000-count-other": "0T",
"10000000000000-count-one": "00T",
"10000000000000-count-other": "00T",
"100000000000000-count-one": "000T",
"100000000000000-count-other": "000T"
}
}
},
"currencyFormats-numberSystem-latn": {
"currencySpacing": {
@@ -379,6 +408,11 @@ <h2>Demo output</h2>
// Use Globalize to format numbers.
number = en.numberFormatter();
document.getElementById( "number" ).textContent = number( 12345.6789 );
document.getElementById( "number-compact" ).textContent = en.formatNumber( 12345.6789, {
compact: "short",
minimumSignificantDigits: 1,
maximumSignificantDigits: 3
});
// Use Globalize to format currencies.
document.getElementById( "currency" ).textContent = en.formatCurrency( 69900, "USD" );

0 comments on commit 7997b6c

Please sign in to comment.