From e94ebfea0d11d26e5d278cf13c43544d15f7f954 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Borja=20Mu=C3=B1oz?= Date: Fri, 9 Dec 2022 19:16:49 +0100 Subject: [PATCH] Add information about the range widget --- app/content/react/guides/widgets.md | 36 ++++++++++++++++---------- app/static/img/react/range-widget.png | Bin 0 -> 7872 bytes 2 files changed, 23 insertions(+), 13 deletions(-) create mode 100644 app/static/img/react/range-widget.png diff --git a/app/content/react/guides/widgets.md b/app/content/react/guides/widgets.md index 9308121e1..a278bf816 100644 --- a/app/content/react/guides/widgets.md +++ b/app/content/react/guides/widgets.md @@ -2,17 +2,19 @@ You can use widgets in your application to provide advanced functionality for exploring and filtering the information. CARTO for React comes with several widgets out-of-the-box that you can add really easily to your spatial apps: - - [Bar](#bar-widget) - - [Category](#category-widget) - - [FeatureSelection](#feature-selection-widget) - - [Formula](#formula-widget) - - [Geocoder](#geocoder-widget) - - [Histogram](#histogram-widget) - - [Legend](#legend-widget) - - [Pie](#pie-widget) - - [ScatterPlot](#scatterplot-widget) - - [Table](#table-widget) - - [TimeSeries](#timeseries-widget) + +- [Bar](#bar-widget) +- [Category](#category-widget) +- [FeatureSelection](#feature-selection-widget) +- [Formula](#formula-widget) +- [Geocoder](#geocoder-widget) +- [Histogram](#histogram-widget) +- [Legend](#legend-widget) +- [Pie](#pie-widget) +- [Range](#range-widget) +- [ScatterPlot](#scatterplot-widget) +- [Table](#table-widget) +- [TimeSeries](#timeseries-widget) The widgets are implemented combining the functionality of three different library packages: @@ -24,7 +26,7 @@ The widgets are implemented combining the functionality of three different libra We can group the widgets in two main categories: -- Data-driven widgets. These widgets perform calculations on the data sources, including aggregations, and then show the results using different types of charts. The widgets included in this category are: Bar, Category, Formula, Histogram, Pie, Scatterplot, Table and Time-Series. +- Data-driven widgets. These widgets perform calculations on the data sources, including aggregations, and then show the results using different types of charts. The widgets included in this category are: Bar, Category, Formula, Histogram, Pie, Range, Scatterplot, Table and Time-Series. - Non data-driven widgets. These widgets provide functionality that does not perform calculations on the data sources. We have the Geocoder widget to provide geocoding functionality, the Legend widget to provide layer selection and legend functionality and the FeatureSelectionWidget to filter features drawing a shape in the map. @@ -37,7 +39,7 @@ The main difference is that widgets in global mode are static, they always show There is also a difference in how they are implemented. Widgets in viewport mode work with the data that has been downloaded for visualization so all the data needed to make the calculations is available locally in the browser. On the other hand, widgets in global mode get the data by performing a SQL query to the data warehouse. {{% bannerNote title="Warning" %}} -Global mode is not available for widgets linked to static (pre-generated) tilesets sources, only with dynamic tiling. The main reason for that is that static tilesets are usually created for extremely large datasets (i.e. billions of features) and the SQL query could have a processing time not suitable for an interactive applications. Another reason is that the source table(s) for the tileset might have been updated (or it might not be even available) so the tileset and the widget could potentially show different information. +Global mode is not available for widgets linked to static (pre-generated) tilesets sources, only with dynamic tiling and GeoJSON sources. The main reason for that is that static tilesets are usually created for extremely large datasets (i.e. billions of features) and the SQL query could have a processing time not suitable for an interactive application. Another reason is that the source table(s) for the tileset might have been updated (or it might not be even available) so the tileset and the widget could potentially show different information. {{%/ bannerNote %}} ### Data sources @@ -80,6 +82,8 @@ Every data-driven widget provides different functionality so you should consider - If you are interested in understanding the distribution of numeric column values like store revenues, you should use the `HistogramWidget`. +- If you want to filter your data source specifying an interval for values of a numeric property, you can use the `RangeWidget`. + - If you have a column with timestamp values in your dataset and you want to understand trends or evolution through time, you can use the `TimeSeriesWidget`. - If you want to understand the correlation between two numeric columns of the same dataset, you should use the `ScatterPlotWidget`. @@ -138,6 +142,12 @@ Groups features into categories (column) and executes an operation on another co ![Pie Widget](/img/react/pie-widget.png) +### Range widget + +Filters the features specifying minimum and maximum values for a numeric property. + +![Range Widget](/img/react/range-widget.png) + ### ScatterPlot widget Represents two properties/columns in a cartesian chart from a data source to help understand if there is correlation between them. diff --git a/app/static/img/react/range-widget.png b/app/static/img/react/range-widget.png new file mode 100644 index 0000000000000000000000000000000000000000..1625abf4ced39321b20c35ace4434bad64834cb7 GIT binary patch literal 7872 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 Onu>y^e6_4)`2PUsu2r!B literal 0 HcmV?d00001