Skip to content

Commit 6ee2b03

Browse files
tbshag2tbshag2
committed
[update] localization updated with date formatting info
1 parent 721dd25 commit 6ee2b03

File tree

2 files changed

+136
-77
lines changed

2 files changed

+136
-77
lines changed

‎docs/guides/loading-exporting-data.md‎

Lines changed: 3 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ You can load JSON data into Pivot from an external file or the server-side scrip
8080

8181
To load local data from a separate file, first prepare the source file with data.
8282

83-
### Example
83+
Example:
8484

8585
~~~jsx
8686
function getData() {
@@ -303,82 +303,6 @@ exportButton.textContent = "Export";
303303
document.body.appendChild(exportButton);
304304
~~~
305305

306-
## Setting date format
307-
308-
The Pivot accepts a date that is parsed into the Date object. By default, the `dateFormat` of the current locale is applied. To redefine the format, change the value of the `dateFormat` parameter in the `formats` object of the [`locale`](/api/config/locale-property). The default format is "%d.%m.%Y".
309-
310-
### Example
311-
312-
~~~jsx {17}
313-
function setFormat(value) {
314-
table.setConfig({ locale: { formats: { dateFormat: value } } });
315-
}
316-
317-
// date string to Date
318-
const dateFields = fields.filter((f) => f.type == "date");
319-
if (dateFields.length) {
320-
dataset.forEach((item) => {
321-
dateFields.forEach((f) => {
322-
const v = item[f.id];
323-
if (typeof v == "string") item[f.id] = new Date(v);
324-
});
325-
});
326-
}
327-
328-
const table = new pivot.Pivot("#root", {
329-
locale: { formats: { dateFormat: "%d %M %Y %H:%i" } },
330-
fields,
331-
data: dataset,
332-
config: {
333-
rows: ["state"],
334-
columns: ["product_line", "product_type"],
335-
values: [
336-
{
337-
field: "date",
338-
method: "min"
339-
},
340-
{
341-
field: "profit",
342-
method: "sum"
343-
},
344-
{
345-
field: "sales",
346-
method: "sum"
347-
}
348-
]
349-
}
350-
});
351-
~~~
352-
353-
Pivot uses the following characters for setting the date format:
354-
355-
| Character | Definition |Example |
356-
| :-------- | :------------------------------------------------ |:------------------------|
357-
| %d | day as a number with leading zero | from 01 to 31 |
358-
| %j | day as a number | from 1 to 31 |
359-
| %D | short name of the day (abbreviation) | Su Mo Tu Sat |
360-
| %l | full name of the day | Sunday Monday Tuesday |
361-
| %W | week as a number with leading zero (with Monday as the first day of the week) | from 01 to 52/53 |
362-
| %m | month as a number with leading zero | from 01 to 12 |
363-
| %n | month as a number | from 1 to 12 |
364-
| %M | short name of the month | Jan Feb Mar |
365-
| %F | full name of the month | January February March |
366-
| %y | year as a number, 2 digits | 24 |
367-
| %Y | year as a number, 4 digits | 2024 |
368-
| %h | hours 12-format with leading zero | from 01 to 12 |
369-
| %g | hours 12-format | from 1 to 12 |
370-
| %H | hours 24-format with leading zero | from 00 to 23 |
371-
| %G | hours 24-format | from 0 to 23 |
372-
| %i | minutes with leading zero | from 01 to 59 |
373-
| %s | seconds with leading zero | from 01 to 59 |
374-
| %S | milliseconds | 128 |
375-
| %a | am or pm | am (for time from midnight until noon) and pm (for time from noon until midnight)|
376-
| %A | AM or PM | AM (for time from midnight until noon) and PM (for time from noon until midnight)|
377-
| %c | displays date and time in the ISO 8601 date format| 2024-10-04T05:04:09 |
378-
379-
380-
To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.128*, specify "%Y-%m-%d-%H:%i:%s.%u".
381-
382306
## Example
383307

384308
In this snippet you can see how to load JSON and CSV data:
@@ -390,3 +314,5 @@ In this snippet you can see how to load JSON and CSV data:
390314
- [Pivot 2.0: Date format](https://snippet.dhtmlx.com/shn1l794)
391315
- [Pivot 2.0: Different datasets](https://snippet.dhtmlx.com/6xtqge4i)
392316
- [Pivot 2.0. Large dataset](https://snippet.dhtmlx.com/e6qwqrys)
317+
318+
**Related articles**: [Date formatting](/guides/localization#date-formatting)

‎docs/guides/localization.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,139 @@ const ko = {...} //object with locale
185185
widget.setLocale(ko);
186186
~~~
187187

188+
## Date formatting
189+
190+
Pivot accepts a date that is parsed into the Date object. By default, the `dateFormat` of the current locale is applied. To redefine the format for all date fields in Pivot, change the value of the `dateFormat` parameter in the `formats` object of the [`locale`](/api/config/locale-property). The default format is "%d.%m.%Y".
191+
192+
Example:
193+
194+
~~~jsx {17}
195+
function setFormat(value) {
196+
table.setConfig({ locale: { formats: { dateFormat: value } } });
197+
}
198+
199+
// date string to Date
200+
const dateFields = fields.filter((f) => f.type == "date");
201+
if (dateFields.length) {
202+
dataset.forEach((item) => {
203+
dateFields.forEach((f) => {
204+
const v = item[f.id];
205+
if (typeof v == "string") item[f.id] = new Date(v);
206+
});
207+
});
208+
}
209+
210+
const table = new pivot.Pivot("#root", {
211+
locale: { formats: { dateFormat: "%d %M %Y %H:%i" } },
212+
fields,
213+
data: dataset,
214+
config: {
215+
rows: ["state"],
216+
columns: ["product_line", "product_type"],
217+
values: [
218+
{
219+
field: "date",
220+
method: "min"
221+
},
222+
{
223+
field: "profit",
224+
method: "sum"
225+
},
226+
{
227+
field: "sales",
228+
method: "sum"
229+
}
230+
]
231+
}
232+
});
233+
~~~
234+
235+
:::info
236+
In case you need to set format to a specific field, use the template parameter of the [`tableShape`](/api/config/tableshape-property) or [`headerShape`](/api/config/headershape-property)
237+
:::
238+
239+
## Date and time format specification
240+
241+
Pivot uses the following characters for setting the date format:
242+
243+
| Character | Definition |Example |
244+
| :-------- | :------------------------------------------------ |:------------------------|
245+
| %d | day as a number with leading zero | from 01 to 31 |
246+
| %j | day as a number | from 1 to 31 |
247+
| %D | short name of the day (abbreviation) | Su Mo Tu Sat |
248+
| %l | full name of the day | Sunday Monday Tuesday |
249+
| %W | week as a number with leading zero (with Monday as the first day of the week) | from 01 to 52/53 |
250+
| %m | month as a number with leading zero | from 01 to 12 |
251+
| %n | month as a number | from 1 to 12 |
252+
| %M | short name of the month | Jan Feb Mar |
253+
| %F | full name of the month | January February March |
254+
| %y | year as a number, 2 digits | 24 |
255+
| %Y | year as a number, 4 digits | 2024 |
256+
| %h | hours 12-format with leading zero | from 01 to 12 |
257+
| %g | hours 12-format | from 1 to 12 |
258+
| %H | hours 24-format with leading zero | from 00 to 23 |
259+
| %G | hours 24-format | from 0 to 23 |
260+
| %i | minutes with leading zero | from 01 to 59 |
261+
| %s | seconds with leading zero | from 01 to 59 |
262+
| %S | milliseconds | 128 |
263+
| %a | am or pm | am (for time from midnight until noon) and pm (for time from noon until midnight)|
264+
| %A | AM or PM | AM (for time from midnight until noon) and PM (for time from noon until midnight)|
265+
| %c | displays date and time in the ISO 8601 date format| 2024-10-04T05:04:09 |
266+
267+
268+
To present the 20th of June, 2024 with the exact time as *2024-09-20 16:47:08.128*, specify "%Y-%m-%d-%H:%i:%s.%u".
269+
270+
## Number formatting
271+
272+
By default, all fields with the *number** type are localized according to the locale (the value in the `lang` field of the locale). The `Intl.NumberFormat` object enables language-sensitive number formatting. In case you need to disable number formatting of some fields, add the template via the [`tableShape`](/api/config/tableshape-property) property or set the *text* type for this field instead of the *number* type.
273+
274+
Example:
275+
276+
~~~jsx
277+
// Define number formatting options
278+
const numOptions = { maximumFractionDigits: 2, minimumFractionDigits: 2 };
279+
280+
// Create number formatters
281+
const num = new Intl.NumberFormat("en-US", numOptions);
282+
const eurNum = new Intl.NumberFormat("en-US", {
283+
style: "currency",
284+
currency: "EUR",
285+
...numOptions,
286+
});
287+
288+
// Templates for specific fields
289+
const templates = {
290+
continent: v => (v === "North America" ? "NA" : v),
291+
oil: (v, op) => (v && op != "count" ? num.format(v) : v),
292+
gdp: (v, op) => (v && op != "count" ? eurNum.format(v) : v),
293+
year: v => v,
294+
};
295+
296+
// Function to style cells based on field, value, area, and method
297+
function cellStyle(field, value, area, method) {
298+
if (method?.indexOf("count") > -1) return "count";
299+
}
300+
301+
const table = new pivot.Pivot("#root", {
302+
data,
303+
fields,
304+
config,
305+
tableShape: {
306+
templates,
307+
cellStyle,
308+
},
309+
});
310+
311+
// Apply styles for count class
312+
const style = document.createElement('style');
313+
style.innerHTML = `
314+
.count {
315+
font-weight: 600;
316+
}
317+
`;
318+
document.head.appendChild(style);
319+
~~~
320+
188321
## Example
189322

190323
In this snippet you can see how to switch between several locales:

0 commit comments

Comments
 (0)