diff --git a/.markdownlint.json b/.markdownlint.json index e03b861142..da14d0b4c4 100644 --- a/.markdownlint.json +++ b/.markdownlint.json @@ -3,6 +3,7 @@ "code-block-style": false, "line-length": false, "no-inline-html": false, + "no-alt-text": false, "no-duplicate-heading": { "siblings_only": true } diff --git a/docs/user-guide/filtering-layers.md b/docs/user-guide/filtering-layers.md index cc10c68a12..f303fe44d4 100644 --- a/docs/user-guide/filtering-layers.md +++ b/docs/user-guide/filtering-layers.md @@ -133,7 +133,7 @@ This tool is used to define advanced filters in [MapStore](https://mapstore.geos * **Attribute Filter** -* **Region of Interest** +* **Area of Interest** * **Layer Filter** @@ -166,7 +166,7 @@ A simple *Attribute Filter* applied for a numerical field can be, for example: -### Region of interest +### Area of interest In order to set this filter the user can: @@ -174,7 +174,7 @@ In order to set this filter the user can: * Select the *Geometric operation* by choosing between **Intersects**, **Is contained**, **Contains** -Applying a *Circle* filter with *Intersect* operation, for example, the process could be similar to the following: +Applying a *Rectangle* filter with *Intersect* operation, for example, the process could be similar to the following: @@ -182,6 +182,10 @@ Once this filter is set, it is always possible to edit the coordinates and the d +!!! note + Also for [Dashboard](exploring-dashboards.md) [widgets](widgets.md) (charts, table and counter) it is possible to define a spatial filter without necessarily connect the widget to the map widget by using the usual **Area of interest** filtering section. The example below sows how: + + ### Layer filter This tool allows to set [cross-layer filters](https://docs.geoserver.org/stable/en/user/extensions/querylayer/index.html) for a layer by using another layer or even the same one. @@ -204,3 +208,6 @@ In order to better understand this type of filter, let's make an example. We sup In particular, if our goal is to take a look at the Italian Regions that contain the Unesco sites with *serial code=1*, the operations to perform can be the following: + +!!! note + The **Layer Filter** option is only available for [widgets](widgets.md) defined in [Map viewer](exploring-maps.md) and not for [Dashboards](exploring-dashboards.md) widgets. diff --git a/docs/user-guide/img/filtering-layers/area-filter-dash.mp4 b/docs/user-guide/img/filtering-layers/area-filter-dash.mp4 new file mode 100644 index 0000000000..420b5ff7ca Binary files /dev/null and b/docs/user-guide/img/filtering-layers/area-filter-dash.mp4 differ diff --git a/docs/user-guide/img/filtering-layers/edit_geom.jpg b/docs/user-guide/img/filtering-layers/edit_geom.jpg index 116e6ae20b..597d77488f 100644 Binary files a/docs/user-guide/img/filtering-layers/edit_geom.jpg and b/docs/user-guide/img/filtering-layers/edit_geom.jpg differ diff --git a/docs/user-guide/img/filtering-layers/geom_filter.mp4 b/docs/user-guide/img/filtering-layers/geom_filter.mp4 index 6ca1e288d0..dcb3a8b6c6 100644 Binary files a/docs/user-guide/img/filtering-layers/geom_filter.mp4 and b/docs/user-guide/img/filtering-layers/geom_filter.mp4 differ diff --git a/docs/user-guide/img/filtering-layers/query-panel.jpg b/docs/user-guide/img/filtering-layers/query-panel.jpg index 6b36b96592..2094f153a8 100644 Binary files a/docs/user-guide/img/filtering-layers/query-panel.jpg and b/docs/user-guide/img/filtering-layers/query-panel.jpg differ diff --git a/docs/user-guide/img/widgets/alphanumeric.jpg b/docs/user-guide/img/widgets/alphanumeric.jpg index b17b473ccb..1754b4cd4c 100644 Binary files a/docs/user-guide/img/widgets/alphanumeric.jpg and b/docs/user-guide/img/widgets/alphanumeric.jpg differ diff --git a/docs/user-guide/img/widgets/axes_tab.jpg b/docs/user-guide/img/widgets/axes_tab.jpg new file mode 100644 index 0000000000..5798d5f700 Binary files /dev/null and b/docs/user-guide/img/widgets/axes_tab.jpg differ diff --git a/docs/user-guide/img/widgets/bar_charts.jpg b/docs/user-guide/img/widgets/bar_charts.jpg index d8ae5d7db3..820f80f648 100644 Binary files a/docs/user-guide/img/widgets/bar_charts.jpg and b/docs/user-guide/img/widgets/bar_charts.jpg differ diff --git a/docs/user-guide/img/widgets/bar_type.jpg b/docs/user-guide/img/widgets/bar_type.jpg index 35c7acf928..7ba1cd291a 100644 Binary files a/docs/user-guide/img/widgets/bar_type.jpg and b/docs/user-guide/img/widgets/bar_type.jpg differ diff --git a/docs/user-guide/img/widgets/chart-ex.jpg b/docs/user-guide/img/widgets/chart-ex.jpg index 814f673163..a9e820bd25 100644 Binary files a/docs/user-guide/img/widgets/chart-ex.jpg and b/docs/user-guide/img/widgets/chart-ex.jpg differ diff --git a/docs/user-guide/img/widgets/chart-layer-selection.jpg b/docs/user-guide/img/widgets/chart-layer-selection.jpg index 4f87fed153..ed019ed92c 100644 Binary files a/docs/user-guide/img/widgets/chart-layer-selection.jpg and b/docs/user-guide/img/widgets/chart-layer-selection.jpg differ diff --git a/docs/user-guide/img/widgets/chart-options.jpg b/docs/user-guide/img/widgets/chart-options.jpg index efa66d9bb6..612225f53a 100644 Binary files a/docs/user-guide/img/widgets/chart-options.jpg and b/docs/user-guide/img/widgets/chart-options.jpg differ diff --git a/docs/user-guide/img/widgets/counter-panel.jpg b/docs/user-guide/img/widgets/counter-panel.jpg index 9631cc98e6..8fb42211fd 100644 Binary files a/docs/user-guide/img/widgets/counter-panel.jpg and b/docs/user-guide/img/widgets/counter-panel.jpg differ diff --git a/docs/user-guide/img/widgets/custom_colors.mp4 b/docs/user-guide/img/widgets/custom_colors.mp4 index 7ff483817e..f998b64218 100644 Binary files a/docs/user-guide/img/widgets/custom_colors.mp4 and b/docs/user-guide/img/widgets/custom_colors.mp4 differ diff --git a/docs/user-guide/img/widgets/custom_trace_value_tooltip.jpg b/docs/user-guide/img/widgets/custom_trace_value_tooltip.jpg new file mode 100644 index 0000000000..5375f612bd Binary files /dev/null and b/docs/user-guide/img/widgets/custom_trace_value_tooltip.jpg differ diff --git a/docs/user-guide/img/widgets/default_class_label.jpg b/docs/user-guide/img/widgets/default_class_label.jpg index 182619f22a..5a1e01fc60 100644 Binary files a/docs/user-guide/img/widgets/default_class_label.jpg and b/docs/user-guide/img/widgets/default_class_label.jpg differ diff --git a/docs/user-guide/img/widgets/layout.jpg b/docs/user-guide/img/widgets/layout.jpg new file mode 100644 index 0000000000..b9e7e3b16f Binary files /dev/null and b/docs/user-guide/img/widgets/layout.jpg differ diff --git a/docs/user-guide/img/widgets/numeric.jpg b/docs/user-guide/img/widgets/numeric.jpg index 7d3bb2dc6d..980ae4740d 100644 Binary files a/docs/user-guide/img/widgets/numeric.jpg and b/docs/user-guide/img/widgets/numeric.jpg differ diff --git a/docs/user-guide/img/widgets/percentages_in_legend.jpg b/docs/user-guide/img/widgets/percentages_in_legend.jpg new file mode 100644 index 0000000000..cb2e404a61 Binary files /dev/null and b/docs/user-guide/img/widgets/percentages_in_legend.jpg differ diff --git a/docs/user-guide/img/widgets/trace_axes.jpg b/docs/user-guide/img/widgets/trace_axes.jpg new file mode 100644 index 0000000000..d71ae16e95 Binary files /dev/null and b/docs/user-guide/img/widgets/trace_axes.jpg differ diff --git a/docs/user-guide/img/widgets/trace_classification_style.jpg b/docs/user-guide/img/widgets/trace_classification_style.jpg new file mode 100644 index 0000000000..24627db09d Binary files /dev/null and b/docs/user-guide/img/widgets/trace_classification_style.jpg differ diff --git a/docs/user-guide/img/widgets/trace_data.jpg b/docs/user-guide/img/widgets/trace_data.jpg new file mode 100644 index 0000000000..2fefb084d9 Binary files /dev/null and b/docs/user-guide/img/widgets/trace_data.jpg differ diff --git a/docs/user-guide/img/widgets/trace_legend_options.jpg b/docs/user-guide/img/widgets/trace_legend_options.jpg new file mode 100644 index 0000000000..6ca42bd14e Binary files /dev/null and b/docs/user-guide/img/widgets/trace_legend_options.jpg differ diff --git a/docs/user-guide/img/widgets/trace_simple_style.jpg b/docs/user-guide/img/widgets/trace_simple_style.jpg new file mode 100644 index 0000000000..452413d2d1 Binary files /dev/null and b/docs/user-guide/img/widgets/trace_simple_style.jpg differ diff --git a/docs/user-guide/img/widgets/trace_style.jpg b/docs/user-guide/img/widgets/trace_style.jpg new file mode 100644 index 0000000000..caf897580f Binary files /dev/null and b/docs/user-guide/img/widgets/trace_style.jpg differ diff --git a/docs/user-guide/img/widgets/trace_value_formatting.jpg b/docs/user-guide/img/widgets/trace_value_formatting.jpg new file mode 100644 index 0000000000..d97cb30e14 Binary files /dev/null and b/docs/user-guide/img/widgets/trace_value_formatting.jpg differ diff --git a/docs/user-guide/img/widgets/traces_tab.jpg b/docs/user-guide/img/widgets/traces_tab.jpg new file mode 100644 index 0000000000..0a1639bfc9 Binary files /dev/null and b/docs/user-guide/img/widgets/traces_tab.jpg differ diff --git a/docs/user-guide/img/widgets/widget-info.jpg b/docs/user-guide/img/widgets/widget-info.jpg index bf35154f72..6ee021bb81 100644 Binary files a/docs/user-guide/img/widgets/widget-info.jpg and b/docs/user-guide/img/widgets/widget-info.jpg differ diff --git a/docs/user-guide/img/widgets/widget-options.jpg b/docs/user-guide/img/widgets/widget-options.jpg index 8342ce060c..645994f4ad 100644 Binary files a/docs/user-guide/img/widgets/widget-options.jpg and b/docs/user-guide/img/widgets/widget-options.jpg differ diff --git a/docs/user-guide/widgets.md b/docs/user-guide/widgets.md index 357c3d5f4d..3bbec0780f 100644 --- a/docs/user-guide/widgets.md +++ b/docs/user-guide/widgets.md @@ -37,26 +37,54 @@ Selecting a *Layer* or *Layers*, the following *Chart* options is presented to u -From the chart configuration page, the user can perform the following operation +From the top toolbar of this panel the user is allowed to: -* Edit chart name -* Choose between *Bar Chart*, *Pie Chart* or *Line Chart*. By default, the bar chart is selected. +* Going back to the widget type section. -From the toolbar of this panel the user is allowed to: +* Connect or disconnect the widget to the map. When a widget is connected to the map, the widget is automatically spatially filtered with the map viewport. When a widget is not linked, it displays the entire dataset of that layer regardless of the map viewport. -* Go back to the chart type selection with the button +* Move forward to the next step when the settings are complete. The button prevents the user from proceeding to the next step of the wizard if the setting of some fields in the chart form is invalid -* Connect or disconnect the widget to the map. When a widget is connected to the map, the information displayed in the widget are automatically filtered with the map viewport. When a widget is not linked, it otherwise shows all the elements of that level regardless of the map viewport +From the chart configuration page, the user can first perform the following operation: -* Configure a filter for the widget data (more information on how to configure a filter can be found in [Filtering Layers](filtering-layers.md#filtering-layers) section). +* *Edit* the *Chart Title* through the button -* Add new layers to existing chart configuration +* *Add new chart* to the current widget through the button -* Delete the current layer and it's related chart configuration from the wizard +* *Delete* the selected chart and its configuration from the widget through the button -* Move forward to the next step when the settings are completed. The button prohibits the user from proceeding further when some chart is invalid +#### Traces -Just below the chart's preview, the following configurations are available: +For each chart [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) allows to define multiple Traces. With a Trace it is possible to define an additional chart representation (for the same layer by default) to be displayed in the same chart view: all traces are displayed together in the same chart. Just below the chart's preview, there is the *Traces* tab, where the user can: + + + +* Choose between **Bar Chart**, **Pie Chart** or **Line Chart**. By default, the *Bar Chart* is selected. + +* *Edit* the current *Trace Title* through the button + +* *Add new trace* through the button + +* *Delete* the current trace through the button + +Once the chart type is chosen, it is possible to set up the trace with the following options: + +* **Trace data** +* **Trace style** +* **Trace axes** +* **Trace value formatting** + +##### Trace Data + +The *Trace data* is displayed as follows: + + + +In this section the user can: + +* Change the trace layer through the button (by default the layer is automatically the same of the first trace defined) + +* Open the [*Query Panel*](filtering-layers.md#query-panel) to configure a **Layer Filter** for the selected layer through the button. * Define the **X Attribute** of the chart (or **Group by** for *Pie Charts*) choosing between layer fields @@ -67,27 +95,30 @@ Just below the chart's preview, the following configurations are available: !!! Note The *No operation* option is used when the aggregation method is not needed for the chart. If *No Operation* is selected, no aggregation will be carried out for the chart and the WFS service will be used to generate the chart without using the WPS process `gs:Aggregate` in GeoServer. -* Enable the chart's legend by activating **Display Legend** +##### Trace Style -* Choose the **Color** (`Blue`, `Red`, `Green`, `Brown` or `Purple`) of the chart (or the **Color Ramp** for *Pie Charts*) or choose to **Customize the color**. +The *Trace style* is displayed as follows: -#### Color customization + -For *Bar Charts* and *Pie Charts*, [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) provides the possibility to customize the colors of the charts bars and slices. From the **Color** option dropdown menu, the user can select the *Custom* option and open the **Custom Colors Settings** modal through the button. +The user can customize the style with the following options choosing between `Simple style` or `Classification style` - +With the **Simple style**, the editor is allowed to customize the `Fill color`, the `Outline color` and the `Outline width` -Inside this modal, the user is allowed to: + -* Change the default **Color** of bars or slices (depending on the chart type) through the *Color Picker*. This color will be applied for all values for which a *Class Color* has not been configured. +###### Classification style - +For *Bar Charts* and *Pie Charts*, [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) provides the possibility to customize the colors of the charts bars and slices. It is possible to classify the style based on the attributes of the layer. In this case it is possible to select the `Attribute` to use for the classification along with the classification `Method` (*Quantile*, *Equal interval*, *Natural breaks* and *Unique interval*) and select whether to `Sort` the classification by *Attribute X* or *Attribute Y*. Choose a `Color ramp`, the number of classification `Intervals` and the order (with `Reverse order`) of the classification intervals colors. Finally customize the `Outline color` and the `Outline width`. -* Select an *Attribute* in the dropdown list as a **Classification attribute**. + - +From the **Color Ramp** option, the user can select the *Custom colors* option and open the **Custom Colors Settings** modal through the button. +Inside this modal, the user is allowed to: -Once the attribute is chosen, new options appear in the *Custom Color Settings* panel that allow the user to: +* Change the default **Color** of bars or slices (depending on the chart type) through the *Color Picker*. This color will be applied for all values for which a *Class Color* has not been configured. + + * Enter a **Default Class Label** to be used in the legend for all values that will not be specifically classified in the following list. @@ -98,101 +129,147 @@ Once the attribute is chosen, new options appear in the *Custom Color Settings* * Classify *Classification Attribute* values to assign a specific color in the chart along with its *Class Label* to use for the chart legend. Only values of type **String** or **Number** are currently supported. -#### Classification Attribute of type String +###### Classification Attribute of type String When the values of a classification attribute are of type String, the user can: -* Choose the **Class Color** through the *Color Picker*. +* Change the **Class Color** through the *Color Picker*. -* Choose the value of the *Classification attribute* through the dropdown menu **Class Value** +* Change the value of the *Classification attribute* through the dropdown menu **Class Value** * Enter a **Class Label** to be used in the legend for the value entered in the *Class Value* !!! Note For *Class Label*, '${legendValue}' can be used as a placeholder for the Y Attribute (that can be further customized through the usual *Advanced Option*). -An example of *Bar charts* corresponding to this type of classification can be the following: - - - Through the button the user can add new values before through the button or after through button. -#### Classification Attribute of type Number +###### Classification Attribute of type Number When the values of a classification attribute are numbers, the user can configure a color ramp and so: - + -* Choose the **Class Color** through the *Color Picker* +* Change the **Class Color** through the *Color Picker* -* Choose the **Min value** of the *Classification attribute* +* Change the **Min value** of the *Classification attribute* -* Choose the **Max value** of the *Classification attribute* +* Change the **Max value** of the *Classification attribute* * Enter a **Class Label** to be used in the legend for the value entered in the *Class Value* !!! Note For *Class Label* two placeholders can be used in this case: ${minValue}, can be used as a placeholder for **Min Value** and ${maxValue}, can be used as a placeholder for Max Value; the ${legendValue} can be used in the same way as specified above. -An example of Bar chart corresponding to this type of classification can be the following: +##### Trace axes - +If *Axes* have been customized in the [Axes](#axes) tab, the user can choose which custom axes to use for the current trace. -#### Bar Chart Type + -If the *Classification attribute* is added to the *Bar Chart*, in the [Advanced Options](#advanced-options), the **Bar Chart Type** option is displayed. +##### Trace Value Formatting - +The user can customize trace value tooltips by adding a *Prefix* (e.g. `~`), a custom *Format* (e.g. `0%: rounded percentage, '12%'` or more) or a *Suffix* (e.g. `Km`). It is also possible to configure a *Formula* to transform tick values as needed (e.g. `value + 2` or `value / 100` or more) -The user can customize the bars by choosing between: + -* **Grouped**. An example can be the following: +!!! Note + More information about the syntax options allowed for **Format** are available [here](https://d3-wiki.readthedocs.io/zh_CN/master/Formatting/) and the allowed expression to be used as **Formula** are available [here](https://github.com/m93a/filtrex#expressions) in the online documentation. - +An example of a custom trace value tooltip can be the following: -* **Stacked**. An example can be the following: + - +##### Trace legend options -!!! Note - By default, the bar chart type is **Stacked** +For the *Pie Charts*, the *Trace legend options* is available and it is displayed as follows: + + + +The user can: + +* Show/Hide the percentages in legend with the **Include percentages in legend** control. An example with the percentages in legend can be the following: + + + +#### Axes + +[MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) allows to customize the **Y axis** and the **X axis** for the *Bar Charts* and the *Line Charts* through the *Axes* tab. + + -#### Advanced Options +Through this section, for each axis, the user is allowed to: -In addition, only for *Bar Charts* and *Line Charts*, [MapStore](https://mapstore.geosolutionsgroup.com/mapstore/#/) provides advanced setting capabilities through the *Advanced Options* section. +* *Edit* the current **Axis Title** through the button - +* If there is more than one [Trace](#traces), *Add new axis* through the button -Through this section, the user is allowed to: +* If there is more than one [Trace](#traces), *Delete* the current axis through the button -* Show/Hide the chart's grid in backgroung with the **Hide Grid** control +* Choose the **Type** (between `Auto`, `Linear`, `Category`, `Log` or `Date`): the axis type is auto-detected by looking at the data (*Auto* option is automatically managed and selected by the tool and it is usually good as default setting). -* Customize **Y axis** tick values by choosing the *Type* (between `Auto`, `Linear`, `Category`, `Log` or `Date`): the axis type is auto-detected by looking at data (*Auto* option is automatically managed and selected by the tool and it is usually good as default setting). The user can also choose to completely hide labels through the *Hide labels* control or customize them by adding a *Prefix* (e.g. `~`), a custom *Format* (e.g. `0%: rounded percentage, '12%'` or more) or a *Suffix* (e.g. `Km`). It is also possible to configure a *Formula* to transform tick values as needed (e.g. `value + 2` or `value / 100` or more) +* Change the **Color** through the color picker - +* Change the **Font size** + +* Select the **Font family** (`Inherit`, `Arial`, `Georgia`, `Impact`, `Tahoma`, `Times New Roman` or `Verdana`) + +* Customize *Y axis* label by adding a **Prefix** (e.g. `~`), a custom **Format** (e.g. `0%: rounded percentage, '12%'` or more) or a **Suffix** (e.g. `Km`). !!! Note - More information about the syntax options allowed for **Format** are available [here](https://d3-wiki.readthedocs.io/zh_CN/master/Formatting/) and the allowed expression to be used as **Formula** are available [here](https://github.com/m93a/filtrex#expressions) in the online documentation. + More information about the syntax options allowed for **Format** are available [here](https://d3-wiki.readthedocs.io/zh_CN/master/Formatting/) in the online documentation. -* Customize **X axis** tick values by choosing the *Type* (between `Auto`, `Linear`, `Category`, `Log` or `Date`): the axis type is auto-detected by looking at data (*Auto* option is automatically managed and selected by the tool and it is usually good as default setting). As per **Y axis**, the user can completely hide labels through the *Hide labels* control or tune the rendering of tick labels with options like *Never skip labels* (it forces all ticks available in the chart to be rendered instead of simplifying the provided set based on chart size) and *Label rotation* to better adapt X axis tick labels on the charts depending on the needs. +* Choose the **Side** of the chart on which to display the axis labels (between `Left` or `Right`) - +* Choose how to **Anchor** the axis labels (between `Axis` or `Free`) + +* Tune the rendering of tick labels by enabling the **Never skip labels** (it forces all ticks available in the chart to be rendered instead of simplifying the provided set based on chart size) !!! Warning - The tick labels available for the X axis by enabling the option **Never skip label** cannot be more than 200 in order to provide a clear chart and for performance reasons. + The *Never skip label* option is available only for the *X axis* and the tick labels available by enabling the option cannot be more than 200 in order to provide a clear chart and for performance reasons. + +* Enable **Label rotation** to better adapt axis tick labels on the charts depending on the needs. + +* Choose to completely hide labels through the **Hide labels** control. -* Set the **Legend Label** name +#### Layout - +Through the *Layout* tab, the user can also customize the **Layout** of the chart and the default **Font** for all the labels present in the chart. + + + +Here the user can: + +* Show/Hide the chart's grid in background with the **Hide Grid** control (only for the *Bar Charts* and the *Line Charts*) + +* Enable the chart's legend by activating **Display Legend** + +* Choose the **Color** for all chart texts through the color picker (only for the *Bar Charts* and the *Line Charts*) + +* Change the **Font size** for all chart texts + +* Select the **Font family** (`Inherit`, `Arial`, `Georgia`, `Impact`, `Tahoma`, `Times New Roman` or `Verdana`) for all chart texts + +If the *Classification attribute* is added to the *Bar Chart*, in the [Trace Style](#trace-style), the **Bar Chart Type** option is displayed. + + + +The user can customize the bars by choosing between: + +* **Grouped**. An example can be the following: + + + +* **Stacked**. An example can be the following: + + !!! Note - The tooltips of the X and Y axis labels are available by hovering the mouse over the charts. This way the labels are available even if the **Hide labels** option for the X and Y axis is enabled. - + By default, the bar chart type is **Stacked** -!!! Warning - In order to move forward to the next step, only **X Attribute**, **Y Attribute** and **Operation** are considered as mandatory fields. +#### Configure Chart Info Once the settings are done, the next step of the chart widget creation/configuration is displayed as follows: @@ -202,8 +279,6 @@ The user can: * Go back to the chart option with the button -* Configure a filter for the widget data (more information on how to configure a filter can be found in [Filtering Layers](filtering-layers.md#filtering-layers) section) - * Add the widget to the map with the button Just below the chart's preview, the user is allowed to set: @@ -272,7 +347,17 @@ Adding a table widget to the map, a panel like the following opens: -The toolbar on the top of this panel is similar to the one present in [Chart section](#chart). Here the user is allowed to: +From the top toolbar of this panel the user is allowed to: + +* Going back to the widget type section. + +* Connect or disconnect the widget to the map. When a widget is connected to the map, the widget is automatically spatially filtered with the map viewport. When a widget is not linked, it displays the entire dataset of that layer regardless of the map viewport. + +* Open the [*Query Panel*](filtering-layers.md#query-panel) to configure a **Layer Filter** for the selected layer through the button. + +* Move forward to the next step when the settings are complete. The button prevents the user from proceeding to the next step of the wizard if the setting of some fields in the chart form is invalid + +In the *Table Widget* the user can: * **Enable/Disable** the layer fields that will be displayed in the widget as columns. @@ -304,16 +389,24 @@ Selecting the counter option, the following window opens: -Also in this case the toolbar is similar to the one present in [Chart section](#chart). The user is allowed to: +The top toolbar of this panel is similar to the one present in [Table section](#table).
+Here the user is allowed to: * Select the attribute to **Use** * Select the **Operation** to perform -* Set the **Unit of measure** that will be displayed +From the **Trace value formatting** section, the user is allowed to: + +* Customize the labels by adding a *Prefix* (e.g. `~`), a custom *Format* (e.g. `0%: rounded percentage, '12%'` or more) or a *Suffix* (e.g. `Km`). + +* Configure a *Formula* to transform tick values as needed (e.g. `value + 2` or `value / 100` or more). + +!!! Note + More information about the syntax options allowed for **Format** are available [here](https://d3-wiki.readthedocs.io/zh_CN/master/Formatting/) and the allowed expression to be used as **Formula** are available [here](https://github.com/m93a/filtrex#expressions) in the online documentation. !!! warning - In order to move forward to the next step, only the **Use** and the **Count** are considered as mandatory fields. + In order to move forward to the next step, only the **Use** and the **Operation** are considered as mandatory fields. Once the button is clicked, the panel of the last step appears: