diff --git a/docs/api/config/config-property.md b/docs/api/config/config-property.md index 262e643..c5a5e91 100644 --- a/docs/api/config/config-property.md +++ b/docs/api/config/config-property.md @@ -34,15 +34,7 @@ The `config` parameters are used to define which fields will be applied as rows By default, methods are available for the time-based fields (the **when** field) with the next values: year, month, day, hour, minute. Here you can also add the name of a custom method ([see `predicates`](/api/config/predicates-property)) for the field of any data type - `values` - (optional) defines the data aggregation for the cells of the Pivot table. It's an empty array by default. Each element can be a string representing a data field ID and aggregation method or an object containing the field ID and the method for data aggregation. The object parameters are the following: - `field` - (required) the ID of a field - - `method` - (required) defines a method for data extraction; possible types: - - for numeric values: min, max, sum, count - - for text values: count - - for date value: min, max, count - Sum - sums all the values of the selected data property and displays the sum - Min - finds and displays the minimum value of the selected data property - Max - finds and displays the maximum value of the selected data property - Count - looks for all occurrences of the selected data property and displays their number; set by default for each newly added field - Average - calculates the average value of an array + - `method` - (required) defines a method for data extraction; for methods types and their description refer to [Applying methods](/guides/working-with-data#default-methods)
@@ -85,7 +77,7 @@ values: [ - `notEndsWith` - accepts string values and numbers - `includes` - (optional) an array of values to be displayed from those that are already filtered; available for text and dates values -:::note +:::info When config is processed by Pivot, its properties receive extra data and if you try to return the config state via the [`api.getState()`](/api/internal/getstate-method) method, the full object will look like this: ~~~jsx diff --git a/docs/api/events/open-filter-event.md b/docs/api/events/open-filter-event.md index 8abb36b..c9d1257 100644 --- a/docs/api/events/open-filter-event.md +++ b/docs/api/events/open-filter-event.md @@ -32,7 +32,7 @@ The function may return either a boolean value or void. When it returns **false* ### Example -The example below shows how to make the Configuration panel close upon closing the filter box: +The example below shows how to make the Configuration panel hide upon closing the filter box: ~~~jsx {20-27} const widget = new pivot.Pivot("#pivot", { diff --git a/docs/api/events/render-table-event.md b/docs/api/events/render-table-event.md index 4fa20b1..f51e717 100644 --- a/docs/api/events/render-table-event.md +++ b/docs/api/events/render-table-event.md @@ -57,7 +57,7 @@ If the event handler returns **false**, it will block the operation in question. ### Example -The next example shows how to output the `config` object to console and add a footer. +The next example shows how to output the [`config`](/api/config/config-property) object to console and add a footer. ~~~jsx {20-28} const widget = new pivot.Pivot("#pivot", { diff --git a/docs/api/events/show-config-panel-event.md b/docs/api/events/show-config-panel-event.md index c18cb58..9d2c10e 100644 --- a/docs/api/events/show-config-panel-event.md +++ b/docs/api/events/show-config-panel-event.md @@ -22,7 +22,7 @@ description: You can learn about the show-config-panel event in the documentatio The callback of the action takes an object with the following parameter: -- `mode` - (required) if the value is set to **true** (default), the Configuration panel is shown, and set to **false** when the configuration panel is hidden +- `mode` - (required) if the value is set to **true** (default), the Configuration panel is shown, and it's set to **false** when the Configuration panel is hidden ### Example diff --git a/docs/api/events/update-config-event.md b/docs/api/events/update-config-event.md index 457529d..f0718a2 100644 --- a/docs/api/events/update-config-event.md +++ b/docs/api/events/update-config-event.md @@ -25,26 +25,18 @@ The action is useful for saving a user's aggregation configuration so that it ca ### Parameters -The callback of the action takes an object with the processed [`config`](/api/properties/config) parameters: +The callback of the action takes an object with the processed [`config`](/api/config/config-property) parameters: - `rows` - rows of the Pivot table. An object with the field ID and a method for data extraction; the object parameters are the following: - `field` - the ID of a field - `method` - a method for data extraction (for time-based data fields) - `columns` - defines columns for the Pivot table. It's an object with the field ID and a method for data extraction; the object parameters are the following: - `field` - the ID of a field - - `method` - defines a method for data extraction (for time-based data fields) + - `method` - defines a method for data extraction (for time-based data fields). By default, methods are available for the time-based fields (the **when** field) with the next values: year, month, day, hour, minute. - `values` - defines the data aggregation for the cells of the Pivot table. It's an object containing the field ID and the method for data aggregation. The object parameters are the following: - `field` - the ID of a field - - `method` - defines a method for data extraction; possible types: - - for numeric values: min, max, sum, count, avg - - for text values: count - - for date value: min, max, count - Sum - sums all the values of the selected data property and displays the sum - Min - finds and displays the minimum value of the selected data property - Max - finds and displays the maximum value of the selected data property - Count - looks for all occurrences of the selected data property and displays their number; set by default for each newly added field - Avg - calculates the average value + - `method` - defines a method for data extraction; about methods and possible options refer to [Applying methods](/guides/working-with-data#default-methods) - `filters` - (optional) defines how data is filtered in the table; it's an object with field IDs and data aggregation method. The description of the `filter` object you can see here: [`config`](/api/config/config-property) ### Returns diff --git a/docs/api/events/update-value-event.md b/docs/api/events/update-value-event.md index 5310e8a..bd15499 100644 --- a/docs/api/events/update-value-event.md +++ b/docs/api/events/update-value-event.md @@ -26,10 +26,7 @@ The callback of the action takes an object with the following parameters: - `id` - (required) the id of a field that is updated - `method` - (required) the method can be one of the following: - - for the **values** area, it's one of the data operation types: - - for numbers: min, max, sum, count - - for text values: count - - for date value: min, max, count + - for the **values** area, it's one of the data operation types: [Default methods](/guides/working-with-data#default-methods) - for the **rows** and **columns** areas and the **when** field, it's a default data predicate with one of the next values: year, month, day, hour, minute. If it's a custom predicate, the id is specified for the **predicate** property. - `area` - (required) the name of the area where a field is updated, which can be "rows", "columns" or "values" area @@ -60,4 +57,6 @@ widget.api.on("update-field", (ev) => { }); ~~~ -**Related articles**: [api.on()](/api/internal/on-method) +**Related articles**: +- [api.on()](/api/internal/on-method) +- [methods](/api/config/method-property) diff --git a/docs/api/internal/exec-method.md b/docs/api/internal/exec-method.md index 1e8f0f3..d977216 100644 --- a/docs/api/internal/exec-method.md +++ b/docs/api/internal/exec-method.md @@ -27,14 +27,12 @@ api.exec( ## Actions :::info -The full list of Pivot actions can be found [**here**](/api/overview/events_overview) +The full list of Pivot actions can be found [**here**](/api/overview/events-overview) ::: ## Example -In the example below, the [`delete-field`](/api/events/delete-field-event) event is triggered via the [`api.exec()`](/api/methods/exec) method. The last field is removed from the **values** area. The [`api.getState()`](/api/internal/getstate-method) method here is used to get the current state of the Pivot [`config`](/api/config/config-property). The event will be triggered with the button click. - -TBD!!! +In the example below, the [`delete-field`](/api/events/delete-field-event) event is triggered via the `api.exec()`method. The last field is removed from the **values** area. The [`api.getState()`](/api/internal/getstate-method) method here is used to get the current state of the Pivot [`config`](/api/config/config-property). The event will be triggered with the button click. ~~~jsx {} // create Pivot diff --git a/docs/api/internal/on-method.md b/docs/api/internal/on-method.md index a20c559..9703894 100644 --- a/docs/api/internal/on-method.md +++ b/docs/api/internal/on-method.md @@ -28,7 +28,7 @@ api.on( :::info The full list of the Pivot internal events can be found [**here**](api/overview/main_overview.md/#pivot-events). -Use the `api.on()` method if you want to listen to the actions without modifying them. To make changes to the actions, apply the [`api.intercept()`](/api/internal/on-method) method. +Use the `api.on()` method if you want to listen to the actions without modifying them. To make changes to the actions, apply the [`api.intercept()`](/api/internal/intercept-method) method. ::: ### Example diff --git a/docs/api/internal/setnext-method.md b/docs/api/internal/setnext-method.md index eb39f4e..3fb19d9 100644 --- a/docs/api/internal/setnext-method.md +++ b/docs/api/internal/setnext-method.md @@ -22,8 +22,24 @@ api.setNext(next: any): void; ### Example -~~~jsx {} -// TODO!!! +The example below shows how to use the `api.setNext()` method to integrate some custom class into the Event Bus order: + +~~~jsx +const widget = new pivot.Pivot("#pivot", { fields: [], data: [] }); +const server = "https://some-backend-url"; + +// Assume you have a custom server service class named someServerService +const someServerService = new ServerDataService(server); + +Promise.all([ + fetch(server + "/data").then((res) => res.json()), + fetch(server + "/fields").then((res) => res.json()) +]).then(([data, fields]) => { + widget.setConfig({ data, fields }); + + // Integrate the serverDataService into the Event Bus order of widget + widget.api.setNext(someServerService); +}); ~~~ - +**Related articles**: [`setConfig`](/api/methods/setconfig-method) diff --git a/docs/api/methods/showconfigpanel-method.md b/docs/api/methods/showconfigpanel-method.md index f609ea2..21879f6 100644 --- a/docs/api/methods/showconfigpanel-method.md +++ b/docs/api/methods/showconfigpanel-method.md @@ -21,7 +21,7 @@ showConfigPanel({mode: boolean}): void; ### Parameters -- `mode` (boolean) - (required) if the value is set to **true** (default), the Configuration panel is shown, and set to **false** when the Configuration panel is hidden +- `mode` (boolean) - (required) if the value is set to **true** (default), the Configuration panel is shown, and it's set to **false** when the Configuration panel is hidden ### Example diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 3b36b8b..ef37a3e 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -14,7 +14,7 @@ You can configure the *Pivot* appearance and functionality via the corresponding - configure the look and behavior of the Pivot columns via the [`columnShape`](/api/config/columnshape-property) property - configure the look and behavior of headers in the Pivot table via the [`headerShape`](/api/config/headershape-property) property - control the visibility of the configuration panel via the [`show-config-panel`](/api/methods/showconfigpanel-method) method -- apply the desired locale via the [setLocale()](/api/methods/setlocale-method) method (see the [Localization](/guides/localization) section) +- apply the desired locale via the [`setLocale()`](/api/methods/setlocale-method) method (see the [Localization](/guides/localization) section) - load data and fields via the corresponding [`data`](/api/config/data-property) and [`fields`](/api/config/fields-property) properties - define how data should be modified before it's applied via the [`predicates`](/api/config/predicates-property) property - define custom mathematical methods for data aggregation via the [`methods`](/api/config/methods-property) property @@ -231,7 +231,7 @@ const widget = new pivot.Pivot("#pivot", { The widget allows freezing columns on the left side, which makes the left-most columns static and visible while scrolling. To freeze columns, apply the **split** parameter of the [`tableShape`](/api/config/tableshape-property) property by setting the value of the `left` property to **true**. -:::note +:::info The number of columns that are split is equal to the number of the rows fields that are defined in the [`config`](/api/config/config-property) property. 2 columns are fixed by default. In the **tree** mode only one columns gets frozen regardless of the number of the rows fields that are defined. ::: @@ -262,7 +262,7 @@ const pivotWidget = new pivot.Pivot("#pivot", { You can also apply a custom split using the [`render-table`](/api/events/render-table-event) event. -:::note +:::info For the custom split, the number of columns that are split depends on the number of the rows and values fields that are defined in the [`config`](/api/config/config-property) property. It's not recommended to split columns with colspans. ::: @@ -369,7 +369,7 @@ const widget = new pivot.Pivot("#pivot", { ## Expanding/collapsing all rows -To expand/collapse all rows, the **tree** mode should be enabled via the [`tableShape`](/api/config/tableshape-property) property and you should use the [`render-table`](/api/events/render-table-event) event that allows changing configuration settings, namely, making data rows expanded or collapsed (via the `row.open` parameter of the `config` object). +To expand/collapse all rows, the **tree** mode should be enabled via the [`tableShape`](/api/config/tableshape-property) property and you should use the [`render-table`](/api/events/render-table-event) event that allows changing configuration settings, namely, making data rows expanded or collapsed (via the `row.open` parameter of the [`config`](/api/config/config-property) object). The example below shows how to expand/collapse all data rows with the button click in the table tree mode. diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index 2102dd6..bf62102 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -41,7 +41,7 @@ Add a container for Pivot and give it an ID, for example *"root"*: Initialize Pivot with the **pivot.Pivot** constructor. It takes two parameters: - an HTML container (the ID of the HTML container) -- an object with configuration properties. [See the full list here](#configuration-properties) +- an object with configuration properties ~~~jsx title="index.html" // create Pivot @@ -64,7 +64,7 @@ config: { ## Configuration properties -:::note +:::info The full list of properties to configure **Pivot** can be found [**here**](api/overview/properties_overview.md). ::: diff --git a/docs/guides/loading-exporting-data.md b/docs/guides/loading-exporting-data.md index 6701305..e473c62 100644 --- a/docs/guides/loading-exporting-data.md +++ b/docs/guides/loading-exporting-data.md @@ -68,7 +68,7 @@ const data = [ ]; ~~~ -:::note +:::info See also how to define fields and Pivot structure: [Working with data](guides/working-with-data) ::: diff --git a/docs/guides/working-with-data.md b/docs/guides/working-with-data.md index f369bdc..7561efb 100644 --- a/docs/guides/working-with-data.md +++ b/docs/guides/working-with-data.md @@ -84,7 +84,6 @@ function setFields(){ bar.innerHTML = html; } - function switchSort(id){ fields.forEach(f => { if(f.id == id){