From 6e526dd7694bae22d924956f7857526c78a77ea7 Mon Sep 17 00:00:00 2001 From: tbshag2 Date: Mon, 29 Apr 2024 17:49:58 +0300 Subject: [PATCH] [update] events updated updated, close-filter removed --- docs/api/config/headershape-property.md | 2 +- docs/api/events/add-field-event.md | 34 +++++++++++++++++++-- docs/api/events/apply-filter-event.md | 31 +++++++++++++++++-- docs/api/events/close-filter-event.md | 33 -------------------- docs/api/events/delete-field-event.md | 35 ++++++++++++++++++++-- docs/api/events/open-filter-event.md | 25 +++++++++++++++- docs/api/events/render-table-event.md | 33 ++++++++++++++++++-- docs/api/events/reorder-fields-event.md | 27 +++++++++++++++-- docs/api/events/show-config-panel-event.md | 27 +++++++++++++++-- docs/api/events/update-config-event.md | 27 +++++++++++++++-- docs/api/events/update-value-event.md | 27 +++++++++++++++-- docs/api/internal/exec-method.md | 2 +- sidebars.js | 2 +- 13 files changed, 252 insertions(+), 53 deletions(-) delete mode 100644 docs/api/events/close-filter-event.md diff --git a/docs/api/config/headershape-property.md b/docs/api/config/headershape-property.md index b4a34ed..d7e8fe0 100644 --- a/docs/api/config/headershape-property.md +++ b/docs/api/config/headershape-property.md @@ -24,7 +24,7 @@ headerShape?: { - `columnCollapsing` - (optional) if set to **true**, enables columns collapsing in all headers; it's set to **false** by default - `verticalText` - (optional) if set to **true**, changes the text orientation in all headers from horizontal to vertical; the default value is **false** -- `template` - (optional) defines the format of text in headers; by default, for the fields applied as rows the value of the `label` parameter is displayed (see the [config](/api/config/config-property) property) and for the fields applied as values the label and method are shown (e.g., *Oil(count)*); the function takes the field id, label and the method or predicate id (if any) and returns the processed value (default template is *template: (label, id, subLabel) => label + (id ? ` (${subLabel})` : ""),*). +- `template` - (optional) defines the format of text in headers; by default, for the fields applied as rows the value of the `label` parameter is displayed (see the [config](/api/config/config-property) property) and for the fields applied as values the label and method are shown (e.g., *Oil(count)*); the function takes the field id, label and the method or predicate id (if any) and returns the processed value (the default template is as follows: *template: (label, id, subLabel) => label + (id ? ` (${subLabel})` : ""),*). ## Example diff --git a/docs/api/events/add-field-event.md b/docs/api/events/add-field-event.md index aa357c8..a078b65 100644 --- a/docs/api/events/add-field-event.md +++ b/docs/api/events/add-field-event.md @@ -8,7 +8,7 @@ description: You can learn about the add-field event in the documentation of the ### Description -@short: TODO!!! +@short: Fires when a new field is added ### Usage @@ -37,4 +37,34 @@ The callback of the action takes an object with the following parameters: ### Example -TODO!!! +In the example below we use the [`api.intercept()`](/api/internal/intercept-method) method to add a new method to the value field with the **number** data type: + +~~~jsx {20-27} +const widget = new pivot.Pivot("#pivot", { + fields, + data: dataset, + config: { + rows: ["studio", "genre"], + columns: [], + values: [ + { + id: "title", + method: "count", + }, + { + id: "score", + method: "max", + }, + ], + }, +}); +//adding values with a predefined method +widget.api.intercept("add-field", (ev) => { + const { fields } = widget.api.getState(); + const type = fields.find((f) => f.id == ev.field).type; + + if (ev.area == "values" && type == "number") { + ev.method = "min"; + } +}); +~~~ diff --git a/docs/api/events/apply-filter-event.md b/docs/api/events/apply-filter-event.md index e870f44..dd60927 100644 --- a/docs/api/events/apply-filter-event.md +++ b/docs/api/events/apply-filter-event.md @@ -8,7 +8,7 @@ description: You can learn about the apply-filter event in the documentation of ### Description -@short: TODO!!! +@short: Fires when a filter is applied ### Usage @@ -34,4 +34,31 @@ The callback of the action takes an object with the following parameters: ### Example -TODO!!! \ No newline at end of file +~~~jsx {20-23} +const widget = new pivot.Pivot("#pivot", { + fields, + data: dataset, + config: { + rows: ["studio", "genre"], + columns: [], + values: [ + { + id: "title", + method: "count", + }, + { + id: "score", + method: "max", + }, + ], + }, +}); +//output to console the label of the field to which filter was applied +widget.api.on("apply-filter", (ev) => { + console.log("The field to which filter was applied:", ev.rule.field); +}); +~~~ + +--- + +**Related articles**: [api.on()](/api/internal/on-method) \ No newline at end of file diff --git a/docs/api/events/close-filter-event.md b/docs/api/events/close-filter-event.md deleted file mode 100644 index ad3e99e..0000000 --- a/docs/api/events/close-filter-event.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -sidebar_label: close-filter -title: close-filter Event -description: You can learn about the close-filter event in the documentation of the DHTMLX JavaScript Pivot library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Pivot. ---- - -# close-filter - -### Description - -@short: TODO!!! - -It's intended to be mainly used for performing operations or validations that should occur right after closing the filter box. - -### Usage - -~~~jsx {} -"close-filter": { - handler: any -} => boolean | void; -~~~ - -### Parameters - -The callback of the action takes an object with the following parameters: - -- `handler` - (required) any filtering function that takes an object with data and returns **true**, **false** or void. - -Returning **false** will block the closure of the filter box. - -### Example - -TODO!!! diff --git a/docs/api/events/delete-field-event.md b/docs/api/events/delete-field-event.md index ad105a1..c35ea83 100644 --- a/docs/api/events/delete-field-event.md +++ b/docs/api/events/delete-field-event.md @@ -8,7 +8,7 @@ description: You can learn about the delete-field event in the documentation of ### Description -@short: TODO!!! +@short: Fires when removing a field ### Usage @@ -28,5 +28,36 @@ The callback of the action takes an object with the following parameters: ### Example -TODO!!! +TODO!!!In the example below, the `delete-field` action is triggered via the [`api.exec()`](/api/methods/exec) method. The last field is removed from the **values** area. The [`api.getState()`](/api/methods/getState) method here is used to get the current state of the Pivot [`config`](/api/properties/config). The action will be triggered with the button click. +TBD!!! + +~~~jsx {} +// create Pivot +const table = new pivot.Pivot("#root", { + ... +}); +//calling methods of API: remove a specific value from values in config +function removeLastField() { + if (api) { + const state = table.api.getState(); + const config = state.config; + + const x = config.values.length; + + if (x) { + const lastValue = config.values[x - 1]; + + table.api.exec("delete-field", { + area: "values", + id: lastValue.id, // auto-generated ID of an item added to config.values + }); + } + } +} +const button = document.createElement("button"); +button.addEventListener("click", removeLastField); +button.textContent = "Remove"; + +document.body.appendChild(button); +~~~ diff --git a/docs/api/events/open-filter-event.md b/docs/api/events/open-filter-event.md index 2fc2ead..a671351 100644 --- a/docs/api/events/open-filter-event.md +++ b/docs/api/events/open-filter-event.md @@ -35,4 +35,27 @@ The function may return either a boolean value or void. When it returns **false* ### Example -TODO!!! +~~~jsx {20-22} +const widget = new pivot.Pivot("#pivot", { + fields, + data: dataset, + config: { + rows: ["studio", "genre"], + columns: [], + values: [ + { + id: "title", + method: "count", + }, + { + id: "score", + method: "max", + }, + ], + }, +}); + +widget.api.on("open-filter", (ev) => { + console.log("The field id for which filter is activated:", ev.field.field); +}); +~~~ diff --git a/docs/api/events/render-table-event.md b/docs/api/events/render-table-event.md index 3dff5b1..8a12905 100644 --- a/docs/api/events/render-table-event.md +++ b/docs/api/events/render-table-event.md @@ -8,7 +8,7 @@ description: You can learn about the render-table event in the documentation of ### Description -@short: TODO!!! +@short: Fires after the widget configuration has been processed and just before the table is rendered It allows you to alter the final table configuration on the fly or prevent the rendering of the table altogether. @@ -49,4 +49,33 @@ If the event handler returns **false**, it will block the operation in question. ### Example -TODO!!! +~~~jsx {20-28} +const widget = new pivot.Pivot("#pivot", { + fields, + data: dataset, + config: { + rows: ["studio", "genre"], + columns: [], + values: [ + { + id: "title", + method: "count", + }, + { + id: "score", + method: "max", + }, + ], + }, +}); + +widget.api.intercept("render-table", (ev) => { + console.log(ev.config); //output the config object + console.log(ev.config.columns); //output the columns array + + ev.config.footer = true; + ev.config.columns[0].footer = ["Custom footer"]; + + // returning "false" here will prevent the table from rendering +}); +~~~ diff --git a/docs/api/events/reorder-fields-event.md b/docs/api/events/reorder-fields-event.md index 5099390..cccb6b3 100644 --- a/docs/api/events/reorder-fields-event.md +++ b/docs/api/events/reorder-fields-event.md @@ -8,7 +8,7 @@ description: You can learn about the move-field event in the documentation of th ### Description -@short: TODO!!! +@short: Fires when reordering fields ### Usage @@ -32,4 +32,27 @@ The callback of the action takes an object with the following parameters: ### Example -TODO!!! +~~~jsx {} +const widget = new pivot.Pivot("#pivot", { + fields, + data: dataset, + config: { + rows: ["studio", "genre"], + columns: [], + values: [ + { + id: "title", + method: "count", + }, + { + id: "score", + method: "max", + }, + ], + }, +}); +//output the id of the reordered field to console +widget.api.on("move-field", (ev) => { + console.log("The id of the reordered field:", ev.id); +}); +~~~ diff --git a/docs/api/events/show-config-panel-event.md b/docs/api/events/show-config-panel-event.md index 3c1fe57..89b485e 100644 --- a/docs/api/events/show-config-panel-event.md +++ b/docs/api/events/show-config-panel-event.md @@ -8,7 +8,7 @@ description: You can learn about the show-config-panel event in the documentatio ### Description -@short: TODO!!! +@short: Fires when the visibility of the configuration panel changes ### Usage @@ -26,4 +26,27 @@ The callback of the action takes an object with the following parameter: ### Example -TODO!!! +~~~jsx {19-22} +const widget = new pivot.Pivot("#pivot", { + fields, + data: dataset, + config: { + rows: ["studio", "genre"], + columns: [], + values: [ + { + id: "title", + method: "count", + }, + { + id: "score", + method: "max", + }, + ], + }, +}); +//hide the configuration panel +widget.api.exec("show-config-panel", { + mode: false, +}); +~~~ diff --git a/docs/api/events/update-config-event.md b/docs/api/events/update-config-event.md index a570584..489ccf5 100644 --- a/docs/api/events/update-config-event.md +++ b/docs/api/events/update-config-event.md @@ -8,7 +8,7 @@ description: You can learn about the update-config event in the documentation of ### Description -@short: TODO!!! +@short: Fires when modifying rows, columns, or aggregation functions via the Pivot UI The action is useful for saving a user's aggregation configuration so that it can be applied the next time the widget is used allowing a user to continue where they left off. @@ -65,4 +65,27 @@ If the event handler function returns *false*, the operation that triggered the ### Example -TODO!!! +~~~jsx {19-22} +const widget = new pivot.Pivot("#pivot", { + fields, + data: dataset, + config: { + rows: ["studio", "genre"], + columns: [], + values: [ + { + id: "title", + method: "count", + }, + { + id: "score", + method: "max", + }, + ], + }, +}); +//output the config object to console +widget.api.intercept("update-config", (config) => { + console.log("Config was changed", config); +}); +~~~ diff --git a/docs/api/events/update-value-event.md b/docs/api/events/update-value-event.md index 30ffdf9..36f0fcb 100644 --- a/docs/api/events/update-value-event.md +++ b/docs/api/events/update-value-event.md @@ -8,7 +8,7 @@ description: You can learn about the update-field event in the documentation of ### Description -@short: TODO!!! +@short: Fires when updating a field ### Usage @@ -35,4 +35,27 @@ The callback of the action takes an object with the following parameters: ### Example -TODO!!! +~~~jsx {19-22} +const widget = new pivot.Pivot("#pivot", { + fields, + data: dataset, + config: { + rows: ["studio", "genre"], + columns: [], + values: [ + { + id: "title", + method: "count", + }, + { + id: "score", + method: "max", + }, + ], + }, +}); +//output the id of a field that is updated to console +widget.api.on("update-field", (ev) => { + console.log("The id of the field that is updated:", ev.id); +}); +~~~ diff --git a/docs/api/internal/exec-method.md b/docs/api/internal/exec-method.md index 88dc901..e60ca3c 100644 --- a/docs/api/internal/exec-method.md +++ b/docs/api/internal/exec-method.md @@ -41,7 +41,7 @@ TBD!!! const table = new pivot.Pivot("#root", { ... }); - +//calling methods of API: remove a specific value from values in config function removeLastField() { if (api) { const state = table.api.getState(); diff --git a/sidebars.js b/sidebars.js index 5ce3eec..bc9d072 100644 --- a/sidebars.js +++ b/sidebars.js @@ -114,7 +114,7 @@ module.exports = { items: [ "api/events/add-field-event", "api/events/apply-filter-event", - "api/events/close-filter-event", + "api/events/delete-field-event", "api/events/open-filter-event", "api/events/render-table-event",