diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js index 6c08f6d3c..0ffff7fc3 100644 --- a/docs/gatsby-node.js +++ b/docs/gatsby-node.js @@ -314,6 +314,11 @@ exports.createPages = ({ actions }) => { toPath: '/docs/creating-charts-dashboards/exploring-data', isPermanent: true, }); + createRedirect({ + fromPath: '/usertutorial.html#native-filters', + toPath: '/docs/creating-charts-dashboards/exploring-data', + isPermanent: true, + }); createRedirect({ fromPath: '/usertutorial.html#publishing-your-dashboard', toPath: '/docs/creating-charts-dashboards/exploring-data', diff --git a/docs/src/pages/docs/Creating Charts and Dashboards/exploring-data.mdx b/docs/src/pages/docs/Creating Charts and Dashboards/exploring-data.mdx index 0857f3605..dd125da7f 100644 --- a/docs/src/pages/docs/Creating Charts and Dashboards/exploring-data.mdx +++ b/docs/src/pages/docs/Creating Charts and Dashboards/exploring-data.mdx @@ -223,6 +223,51 @@ Dashboard and then Save & go to dashboard. Once on the Dashboard, try using the those flights that departed from the United Kingdom – you will see the filter is applied to all of the other visualizations on the dashboard. +### Native Filters + +As Filter Box is set to be deprecated, this section will instruct you on how to use its replacement, +**Native Filters**. These are built into the dashboard view itself. Go to the Tutorial Dashboard and +select the filter icon in the top left corner: + + + +This will open the Native Filters panel, which is currently empty: + + + +Click on the pencil icon to open up the **Filters Configuration** modal. From here, you can create new filters or +manage existing ones. + + + +We're going to create a numerical range for ticket cost: + +- Select Numerical Range from the Filter Type dropdown +- Give the filter a name +- Select tutorial_flights from the Dataset dropdown if it's not been selected yet +- Select Cost from the Column dropdown + +Click the **Save** button. Your filter will load in the panel. + + + +You can adjust the slider to only include datapoints that fall within the selected range for Ticket +Cost! Set your range and click **Apply** to see how it affects your charts. + +We can also recreate the Origin Country filter from the Filter Box section. In the **Filters +Configuration** modal, click the Add button in the bottom left and select Filter. Set your filter up as +follows: + +- Select Value from Filter Type dropdown +- Select tutorial_flights from Dataset dropdown +- Select Origin Country from Column dropdown +- In Advanced, you can tick the Sort filter values checkbox to list country names alphabetically + +**Save** your filters! You can now select origin countries to include from the resulting dropdown. + + + + ### Publishing Your Dashboard If you have followed all of the steps outlined in the previous section, you should have a dashboard diff --git a/docs/static/images/native_filters_empty_panel.png b/docs/static/images/native_filters_empty_panel.png new file mode 100644 index 000000000..999cc7038 Binary files /dev/null and b/docs/static/images/native_filters_empty_panel.png differ diff --git a/docs/static/images/native_filters_menu_open.png b/docs/static/images/native_filters_menu_open.png new file mode 100644 index 000000000..82b539ed7 Binary files /dev/null and b/docs/static/images/native_filters_menu_open.png differ diff --git a/docs/static/images/native_filters_modal.png b/docs/static/images/native_filters_modal.png new file mode 100644 index 000000000..c27e7c591 Binary files /dev/null and b/docs/static/images/native_filters_modal.png differ diff --git a/docs/static/images/native_filters_num_range.png b/docs/static/images/native_filters_num_range.png new file mode 100644 index 000000000..17d2534e9 Binary files /dev/null and b/docs/static/images/native_filters_num_range.png differ diff --git a/docs/static/images/native_filters_origin_country.png b/docs/static/images/native_filters_origin_country.png new file mode 100644 index 000000000..06096e909 Binary files /dev/null and b/docs/static/images/native_filters_origin_country.png differ diff --git a/docs/static/images/native_filters_origin_country_dropdown.png b/docs/static/images/native_filters_origin_country_dropdown.png new file mode 100644 index 000000000..296d4130b Binary files /dev/null and b/docs/static/images/native_filters_origin_country_dropdown.png differ