diff --git a/docs/api/config/fields-property.md b/docs/api/config/fields-property.md index ed1bac3..3ab4589 100644 --- a/docs/api/config/fields-property.md +++ b/docs/api/config/fields-property.md @@ -18,7 +18,7 @@ The `fields` property in the configuration object controls how the widget interp fields?: [{ id: string, label?: string, - type: string, + type: "number" | "date" | "text", sort?: "asc" | "desc" | ((a: any, b: any) => number), }]; ~~~ diff --git a/docs/api/config/headershape-property.md b/docs/api/config/headershape-property.md index bc159fb..d0406d0 100644 --- a/docs/api/config/headershape-property.md +++ b/docs/api/config/headershape-property.md @@ -16,7 +16,7 @@ description: You can learn about the headerShape config in the documentation of headerShape?: { collapsible?: boolean, vertical?: boolean, - template?: (label: string, fieldId: string, subLabel?: string) => string + template?: (label: string, field: string, subLabel?: string) => string }; ~~~ @@ -54,7 +54,7 @@ const pivotWidget = new pivot.Pivot("#pivot", { headerShape: { vertical: true, - template: (label, fieldId, subLabel) => fieldId + (subLabel ? ` (${subLabel})` : ""), + template: (label, field, subLabel) => field + (subLabel ? ` (${subLabel})` : ""), }, }); ~~~ diff --git a/docs/api/config/methods-property.md b/docs/api/config/methods-property.md index 58eb976..989f7c8 100644 --- a/docs/api/config/methods-property.md +++ b/docs/api/config/methods-property.md @@ -17,8 +17,8 @@ description: You can learn about the methods config in the documentation of the [method: string]: { type?: 'number' | 'date' | 'text' | [], - label?:string, - handler?: (values: number[]|string[]|Date[]) => any, + label?: string, + handler?: (values: number[]) => number, branchMode?: "raw"|"result", branchMath?: string }, diff --git a/docs/api/config/tableshape-property.md b/docs/api/config/tableshape-property.md index b67e20f..2408228 100644 --- a/docs/api/config/tableshape-property.md +++ b/docs/api/config/tableshape-property.md @@ -15,7 +15,7 @@ description: You can learn about the tableShape config in the documentation of t ~~~jsx tableShape?: { templates?: { - [fieldName: string]: ( + [field: string]: ( value: any, operation: string ) => any; diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 98b4d1b..9cfbbec 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -22,7 +22,7 @@ You can configure the *Pivot* appearance and functionality via the corresponding All instructions about working with data see here: [Working with data](guides/working-with-data) -## Table +## Datatable You can configure and/or customize the following elements of the Pivot table: @@ -31,7 +31,7 @@ You can configure and/or customize the following elements of the Pivot table: - cells - the table sizes -### Resizing the Pivot table +### Resizing the table You can change the size of the table rows and columns, header and footer using the [`tableShape`](/api/config/tableshape-property) property. @@ -212,7 +212,37 @@ pivotWidget.api.on("render-table", (tableConfig) => { }); ~~~ -### Switching to the tree mode +### Sorting in columns + +The sorting functionality is enabled by default. A user can click the column's header to sort data. To disable/enable sorting, apply the `sort` parameter of the [`columnShape`](/api/config/columnshape-property) property. In the example below we disable sorting. + +~~~jsx {19} +const pivotWidget = new pivot.Pivot("#pivot", { + fields, + data, + config: { + rows: ["studio", "genre"], + columns: [], + values: [ + { + field: "title", + method: "count", + }, + { + field: "score", + method: "max", + }, + ], + }, + columnShape: { + sort: false, + }, +}); +~~~ + +For more information about sorting data, refer to [Sorting data](/guides/working-with-data#sorting-data). + +### Enabling the tree mode The widget allows presenting data in a hierarchical format with expandable rows. To switch to the tree mode, apply the `tree` parameter of the [`tableShape`](/api/config/tableshape-property) property by setting its value to **true** (default is **false**). To specify the parent row, put its name first in the `rows` array of the [`config`](/api/config/config-property) property. @@ -357,36 +387,7 @@ const widget = new pivot.Pivot("#pivot", { }); ~~~ -### Setting date format - -tbd! -Pivot uses the following characters for setting the date format: - -| Character | Definition |Example | -| :-------- | :------------------------------------------------ |:------------------------| -| %d | day as a number with leading zero | from 01 to 31 | -| %j | day as a number | from 1 to 31 | -| %D | short name of the day (abbreviation) | Su Mo Tu Sat | -| %l | full name of the day | Sunday Monday Tuesday | -| %m | month as a number with leading zero | from 01 to 12 | -| %n | month as a number | from 1 to 12 | -| %M | short name of the month | Jan Feb Mar | -| %F | full name of the month | January February March | -| %y | year as a number, 2 digits | 24 | -| %Y | year as a number, 4 digits | 2024 | -| %h | hours 12-format with leading zero | from 01 to 12 | -| %g | hours 12-format | from 1 to 12 | -| %H | hours 24-format with leading zero | from 00 to 23 | -| %G | hours 24-format | from 0 to 23 | -| %i | minutes with leading zero | from 01 to 59 | -| %s | seconds with leading zero | from 01 to 59 | -| %a | am or pm | am (for time from midnight until noon) and pm (for time from noon until midnight)| -| %A | AM or PM | AM (for time from midnight until noon) and PM (for time from noon until midnight)| -| %u | milliseconds | 128 | - -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". - -You can set the date format using the Pivot locale. + ## Configuration panel diff --git a/docs/guides/loading-exporting-data.md b/docs/guides/loading-exporting-data.md index eb294b3..3159a35 100644 --- a/docs/guides/loading-exporting-data.md +++ b/docs/guides/loading-exporting-data.md @@ -306,6 +306,10 @@ document.body.appendChild(exportButton); 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` property in the **Locale** tag. +Example: + +to be added + Pivot uses the following characters for setting the date format: | Character | Definition |Example | @@ -332,6 +336,4 @@ Pivot uses the following characters for setting the date format: 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". -Example: -to be added diff --git a/docs/guides/working-with-data.md b/docs/guides/working-with-data.md index 3e984f4..bccbf80 100644 --- a/docs/guides/working-with-data.md +++ b/docs/guides/working-with-data.md @@ -58,7 +58,7 @@ const widget = new pivot.Pivot("#pivot", { ## Sorting data -The widget API allows configuring sorting settings and the sorting is applied to all areas (values, columns and rows) during aggregation. The sorting in UI is enabled by clicking the column header. +The widget API allows configuring the sorting settings that are applied applied to all areas (values, columns and rows) during aggregation. The sorting in UI is enabled by clicking the column header. To set default sorting values, apply the **sort** parameter of the [`fields`](/api/properties/fields-property) property. It accepts either the "asc" or "desc" value, or a custom sorting function. @@ -120,7 +120,7 @@ const widget = new pivot.Pivot("#pivot", { }); ~~~ -To make the sorting possible in UI by clicking the column header, apply the `sort` parameter of the [`columnShape`](/api/config/columnshape-property) property. In the example below we disable sorting. +The sorting functionality is enabled by default. A user can click the column's header to sort data. To disable/enable sorting, apply the `sort` parameter of the [`columnShape`](/api/config/columnshape-property) property. In the example below we disable sorting. ~~~jsx {19} const pivotWidget = new pivot.Pivot("#pivot", {