Skip to content

Commit 7997b6c

Browse files
rxaviersrxaviers
committed
Examples: Include compact number formatting
Ref #759
1 parent eb3e28c commit 7997b6c

File tree

17 files changed

+82
-3
lines changed

17 files changed

+82
-3
lines changed

‎examples/amd-bower/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ <h2>Demo output</h2>
2323
<p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
2424
<p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
2525
<p>A number: <span id="number"></span></p>
26+
<p>A number (compact form): <span id="number-compact"></span></p>
2627
<p>A currency: <span id="currency"></span></p>
2728
<p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
2829
<p>Messages:</p>

‎examples/amd-bower/main.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,11 @@ require([
107107
// Use Globalize to format numbers.
108108
number = en.numberFormatter();
109109
document.getElementById( "number" ).textContent = number( 12345.6789 );
110+
document.getElementById( "number-compact" ).textContent = en.formatNumber( 12345.6789, {
111+
compact: "short",
112+
minimumSignificantDigits: 1,
113+
maximumSignificantDigits: 3
114+
});
110115

111116
// Use Globalize to format currencies.
112117
document.getElementById( "currency" ).textContent = en.formatCurrency( 69900, "USD" );

‎examples/amd-bower/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,8 @@
77
"installed on Globalize's root.",
88
"",
99
"It's analogous to `chroot .` for npm. [:P]"
10-
]
10+
],
11+
"dependencies": {
12+
"cldr-data-downloader": "^0.3.4"
13+
}
1114
}

‎examples/app-npm-webpack/app/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ var startTime = new Date();
55
var numberFormatter = Globalize.numberFormatter({ maximumFractionDigits: 2 });
66
document.getElementById( "number" ).textContent = numberFormatter( 12345.6789 );
77

8+
var numberCompactFormatter = Globalize.numberFormatter({
9+
compact: "short",
10+
minimumSignificantDigits: 1,
11+
maximumSignificantDigits: 3
12+
});
13+
document.getElementById( "number-compact" ).textContent = numberCompactFormatter( 12345.6789 );
14+
815
var currencyFormatter = Globalize.currencyFormatter( "USD" );
916
document.getElementById( "currency" ).textContent = currencyFormatter( 69900 );
1017

@@ -41,6 +48,7 @@ document.getElementById( "unit" ).textContent = unitFormatter( 60 );
4148
// Messages.
4249
document.getElementById( "intro-1" ).textContent = Globalize.formatMessage( "intro-1" );
4350
document.getElementById( "number-label" ).textContent = Globalize.formatMessage( "number-label" );
51+
document.getElementById( "number-compact-label" ).textContent = Globalize.formatMessage( "number-compact-label" );
4452
document.getElementById( "currency-label" ).textContent = Globalize.formatMessage( "currency-label" );
4553
document.getElementById( "date-label" ).textContent = Globalize.formatMessage( "date-label" );
4654
document.getElementById( "date-time-zone-label" ).textContent = Globalize.formatMessage( "date-time-zone-label" );

‎examples/app-npm-webpack/index-template.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ <h2>Requirements</h2>
2525
<td><span id="number-label">Standalone Number</span></td>
2626
<td>"<span id="number"></span>"</td>
2727
</tr>
28+
<tr>
29+
<td><span id="number-compact-label">Standalone Number (compact form)</span></td>
30+
<td>"<span id="number-compact"></span>"</td>
31+
</tr>
2832
<tr>
2933
<td><span id="currency-label">Standalone Currency</span></td>
3034
<td>"<span id="currency"></span>"</td>

‎examples/app-npm-webpack/messages/ar.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"ar": {
33
"intro-1": "‫استخدم Globalize لتدويل تطبيقك.‬",
44
"number-label": "رقم",
5+
"number-compact-label": "الرقم (شكل مدمج)",
56
"currency-label": "عملة",
67
"date-label": "تاريخ",
78
"date-time-zone-label": "التاريخ (في منطقة زمنية محددة ل إيانا، على سبيل المثال، America/Sao_Paulo)",

‎examples/app-npm-webpack/messages/de.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"de": {
33
"intro-1": "Verwenden Sie Globalize um Ihre Anwendung zu internationalisieren.",
44
"number-label": "Zahl",
5+
"number-compact-label": "Zahl (kompakte Form)",
56
"currency-label": "Währung",
67
"date-label": "Datum",
78
"date-time-zone-label": "Datum (in einer bestimmten IANA-Zeitzone, z. B. America/Sao_Paulo)",

‎examples/app-npm-webpack/messages/en.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"en": {
33
"intro-1": "Use Globalize to internationalize your application.",
44
"number-label": "Number",
5+
"number-compact-label": "Number (compact form)",
56
"currency-label": "Currency",
67
"date-label": "Date",
78
"date-time-zone-label": "Date (in a specific IANA time zone, e.g., America/Sao_Paulo)",

‎examples/app-npm-webpack/messages/es.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"es": {
33
"intro-1": "Usa Globalize para internacionalizar tu aplicación.",
44
"number-label": "Número",
5+
"number-compact-label": "Número (forma compacta)",
56
"currency-label": "Moneda",
67
"date-label": "Fecha",
78
"date-time-zone-label": "Fecha (en una zona horaria IANA específica, por ejemplo, America/Sao_Paulo)",

‎examples/app-npm-webpack/messages/pt.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"pt": {
33
"intro-1": "Use o Globalize para internacionalizar sua aplicação.",
44
"number-label": "Número",
5+
"number-compact-label": "Número (forma compacta)",
56
"currency-label": "Moeda",
67
"date-label": "Data",
78
"date-time-zone-label": "Data (em um fuso horário IANA específico, por exemplo, America/Sao_Paulo)",

‎examples/app-npm-webpack/messages/ru.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"ru": {
33
"intro-1": "Используйте Globalize для интернационализиции вашего приложения.",
44
"number-label": "Число",
5+
"number-compact-label": "Число (компактная форма)",
56
"currency-label": "Валюта",
67
"date-label": "Дата",
78
"date-time-zone-label": "Дата (в определенном часовом поясе IANA, например, America/Sao_Paulo)",

‎examples/app-npm-webpack/messages/zh.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"zh": {
33
"intro-1": "使用Globalize的国际化应用程序",
44
"number-label": "号码",
5+
"number-compact-label": "编号（紧凑形式）",
56
"currency-label": "币",
67
"date-label": "迄今",
78
"date-time-zone-label": "日期（在特定的IANA时区，例如America / Sao_Paulo）",

‎examples/globalize-compiler/app.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@ document.getElementById( "dateToParts" ).innerHTML = Globalize.formatDateToParts
2626
// Use Globalize to format numbers.
2727
number = Globalize.numberFormatter();
2828
document.getElementById( "number" ).textContent = number( 12345.6789 );
29+
document.getElementById( "number-compact" ).textContent = Globalize.formatNumber( 12345.6789, {
30+
compact: "short",
31+
minimumSignificantDigits: 1,
32+
maximumSignificantDigits: 3
33+
});
2934

3035
// Use Globalize to format currencies.
3136
document.getElementById( "currency" ).textContent = Globalize.formatCurrency( 69900, "USD" );

‎examples/globalize-compiler/development.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ <h2>Demo output</h2>
2020
<p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
2121
<p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
2222
<p>A number: <span id="number"></span></p>
23+
<p>A number (compact form): <span id="number-compact"></span></p>
2324
<p>A currency: <span id="currency"></span></p>
2425
<p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
2526
<p>Messages:</p>

‎examples/globalize-compiler/production.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ <h2>Demo output</h2>
2121
<p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
2222
<p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
2323
<p>A number: <span id="number"></span></p>
24+
<p>A number (compact form): <span id="number-compact"></span></p>
2425
<p>A currency: <span id="currency"></span></p>
2526
<p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
2627
<p>Messages:</p>
@@ -65,6 +66,9 @@ <h2>Demo output</h2>
6566
<script src="compiled-formatters.js"></script>
6667

6768
<!-- Our App -->
69+
<script>
70+
Globalize.locale("en");
71+
</script>
6872
<script src="app.js"></script>
6973

7074
</body>

‎examples/node-npm/main.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,13 @@ console.log( Globalize.formatDateToParts( new Date(), { datetime: "medium" } ) )
3838
// Use Globalize to format numbers.
3939
console.log( Globalize.formatNumber( 12345.6789 ) );
4040

41+
// Use Globalize to format numbers (compact form).
42+
console.log( Globalize.formatNumber( 12345.6789, {
43+
compact: "short",
44+
minimumSignificantDigits: 1,
45+
maximumSignificantDigits: 3
46+
}));
47+
4148
// Use Globalize to format currencies.
4249
console.log( Globalize.formatCurrency( 69900, "USD" ) );
4350

‎examples/plain-javascript/index.html

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h1>Globalize Hello World (plain javascript)</h1>
1010
<div id="requirements">
1111
<h2>Requirements</h2>
1212
<ul>
13-
<li>You need to download the `cldrjs` dependency yourself. Read README.md for instructions.
13+
<li>You need to download `cldrjs` and `globalize` dependencies yourself. Read README.md for instructions.
1414
</li>
1515
</ul>
1616
</div>
@@ -21,6 +21,7 @@ <h2>Demo output</h2>
2121
<p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
2222
<p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
2323
<p>A number: <span id="number"></span></p>
24+
<p>A number (compact form): <span id="number-compact"></span></p>
2425
<p>A currency: <span id="currency"></span></p>
2526
<p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
2627
<p>Messages:</p>
@@ -199,7 +200,35 @@ <h2>Demo output</h2>
199200
"timeSeparator": ":"
200201
},
201202
"decimalFormats-numberSystem-latn": {
202-
"standard": "#,##0.###"
203+
"standard": "#,##0.###",
204+
"short": {
205+
"decimalFormat": {
206+
"1000-count-one": "0K",
207+
"1000-count-other": "0K",
208+
"10000-count-one": "00K",
209+
"10000-count-other": "00K",
210+
"100000-count-one": "000K",
211+
"100000-count-other": "000K",
212+
"1000000-count-one": "0M",
213+
"1000000-count-other": "0M",
214+
"10000000-count-one": "00M",
215+
"10000000-count-other": "00M",
216+
"100000000-count-one": "000M",
217+
"100000000-count-other": "000M",
218+
"1000000000-count-one": "0B",
219+
"1000000000-count-other": "0B",
220+
"10000000000-count-one": "00B",
221+
"10000000000-count-other": "00B",
222+
"100000000000-count-one": "000B",
223+
"100000000000-count-other": "000B",
224+
"1000000000000-count-one": "0T",
225+
"1000000000000-count-other": "0T",
226+
"10000000000000-count-one": "00T",
227+
"10000000000000-count-other": "00T",
228+
"100000000000000-count-one": "000T",
229+
"100000000000000-count-other": "000T"
230+
}
231+
}
203232
},
204233
"currencyFormats-numberSystem-latn": {
205234
"currencySpacing": {
@@ -379,6 +408,11 @@ <h2>Demo output</h2>
379408
// Use Globalize to format numbers.
380409
number = en.numberFormatter();
381410
document.getElementById( "number" ).textContent = number( 12345.6789 );
411+
document.getElementById( "number-compact" ).textContent = en.formatNumber( 12345.6789, {
412+
compact: "short",
413+
minimumSignificantDigits: 1,
414+
maximumSignificantDigits: 3
415+
});
382416

383417
// Use Globalize to format currencies.
384418
document.getElementById( "currency" ).textContent = en.formatCurrency( 69900, "USD" );

0 commit comments

Comments
 (0)