[DOCS] Reformats Dashboard and adds Lens reference (#89615) (#94986)

* [DOCS] Reformats Dashboard and adds Lens reference

* ⚗️ First trial of Lens FAQ

* Fixes broken title levels

* Link fix

* Fixes tsvb link

* Fixes tsvb link

* [DOCS] Reformats Dashboard and adds Lens reference

* ⚗️ First trial of Lens FAQ

* Fixes broken title levels

* Link fix

* Fixes tsvb link

* Fixes tsvb link

* [Lens] Add drag and drop keyboard navigation docs

* remove unlinked files

* [Lens] tutorial advanced first version

* corrections

* Kaarinas changes

* corrections after CR

* Update docs/user/dashboard/lens-advanced.asciidoc

* 📝 Add more Lens related FAQ

* Updates Lens page

* Update docs/user/dashboard/lens.asciidoc

* drag and drop copy and gif

* some corrections after Wylie's second review

* Review comments

* Final changes

* Update lens-advanced.asciidoc

ordering fixed

* Comment organization

* Final clean up

Co-authored-by: dej611 <dej611@gmail.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Marta Bondyra <marta.bondyra@elastic.co>
Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>

Co-authored-by: dej611 <dej611@gmail.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Marta Bondyra <marta.bondyra@elastic.co>
Co-authored-by: Marta Bondyra <marta.bondyra@gmail.com>

docs/management/numeral.asciidoc

@@ -10,8 +10,8 @@ Numeral formatting patterns are used in multiple places in {kib}, including:
 
 * <<advanced-options, Advanced settings>>
 * <<field-formatters-numeric, Index pattern formatters>>
-* <<tsvb-advanced-editor, TSVB>>
-* <<canvas, Canvas>>
+* <<tsvb, *TSVB*>>
+* <<canvas, *Canvas*>>
 
 The simplest pattern format is `0`, and the default {kib} pattern is `0,0.[000]`.
 The numeral pattern syntax expresses:

docs/redirects.asciidoc

@@ -179,11 +179,6 @@ This content has moved. See <<discover, **Discover**>>.
 
 This content has moved. See <<discover, **Discover**>>.
 
-[role="exclude",id="lens"]
-== Lens
-
-This content has moved. See <<create-panels-with-lens>>.
-
 [role="exclude",id="known-plugins"]
 == Known plugins
 
@@ -257,7 +252,7 @@ This page has been moved. Refer to <<vega-tutorial-create-a-stacked-area-chart>>
 [[heatmap-chart]]
 === Heatmap Chart
 
-This page has been moved. Refer to <<types-of-visualization-panels>>.
+This page has been moved. Refer to <<types-of-visualizations>>.
 
 [float]
 [[interface-overview]]

docs/user/canvas.asciidoc

@@ -126,7 +126,7 @@ image::images/canvas-element-select.gif[Canvas elements]
 * *{es} documents* &mdash; Access your data in {es} without using aggregations. To use, select an index and fields, and optionally enter a query using the <<lucene-query,Lucene Query Syntax>>. 
 Use the *{es} documents* data source when you have low volume datasets, to view raw documents, or to plot exact, non-aggregated values on a chart.
 
-* *Timelion* &mdash; Access your time series data using <<create-panels-with-timelion,*Timelion*>> queries. To use *Timelion* queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
+* *Timelion* &mdash; Access your time series data using <<timelion,*Timelion*>> queries. To use *Timelion* queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
 +
 Each element can display a different data source, and pages and workpads often contain multiple data sources.
 

docs/user/dashboard/advanced-editors.asciidoc

@@ -1,65 +0,0 @@
-[[add-panels-with-advanced-editors]]
-== Create panels with the advanced editors
-
-{kib} provides you with three advanced editors that you can use to manually create dashboard panels.
-
-[float]
-[[tsvb-advanced-editor]]
-=== TSVB
-
-*TSVB* is a time series data visualization editor that allows you to use the full power of the {es} aggregation framework. 
-
-With *TSVB*, you can:
-
-* Combine an infinite number of <<aggregation-reference,aggregations>> to display your data.
-* Annotate time series data with timestamped events from an {es} index.
-* View the data in several types of visualizations, including charts, data tables, and markdown panels.
-* Display multiple <<index-patterns, index patterns>> in each visualization.
-* Customize the data with labels and colors.
-
-image::images/tsvb.png[TSVB UI]
-
-[float]
-[[vega-advanced-editor]]
-=== Custom visualizations
-
-*Vega* and *Vega-Lite* are visualization grammars that are integrated into {kib} for custom visualizations.
-
-* *Vega-Lite* &mdash; A high-level grammar for rapid analysis
-
-* *Vega* &mdash; A declarative language with support for interactivity
-
-*Vega* and *Vega-Lite* panels can display one or more data sources, including {es}, Elastic Map Service,
-URL, or static data, and support <<reference-for-kibana-extensions,{kib} extensions>> that allow you to embed the panels on your dashboard and add interactive tools.
-
-Use *Vega* or *Vega-Lite* when you want to create visualizations with:
-
-* Aggregations that use `nested` or `parent/child` mapping
-* Aggregations without an index pattern
-* Queries that use custom time filters
-* Complex calculations
-* Extracted data from _source instead of aggregations
-* Scatter charts, sankey charts, and custom maps
-* An unsupported visual theme
-
-These grammars have some limitations: they do not support tables, and can't run queries conditionally.
-
-image::images/vega.png[Vega UI]
-
-For detailed *Vega* and *Vega-Lite* information and examples, refer to <<resources-and-examples,Resources and examples>>. 
-
-[float]
-[[timelion-advanced-editor]]
-=== Timelion
-
-*Timelion* is driven by a simple expression language that you use to:
-
-* Retrieve time series data from one or more indices
-* Perform math across two or more time series
-* Visualize the results
-
-image:dashboard/images/timelion.png[Timelion]
-
-include::tsvb.asciidoc[]
-include::vega.asciidoc[]
-include::timelion.asciidoc[]

docs/user/dashboard/aggregation-based.asciidoc

@@ -1,32 +1,14 @@
 [[add-aggregation-based-visualization-panels]]
-== Create aggregation-based visualization panels
+=== Aggregation-based
 
 Aggregation-based visualizations are the core {kib} panels, and are not optimized
-for a specific use case. If you are new to {kib}, <<create-panels-with-lens,Lens>> is recommended as a
-simpler way to get started.
-
-The main features that these panel types have compared to other {kib} panel types are:
-
-* Support for heat map, tag cloud, gauge, and goal chart types
-* Support for split charts at up to 3 levels of aggregation, more than *Lens* and *TSVB*
-* Time series data is not required
-* Ability to use a <<save-open-search,saved search>> as an input
-* Data table can be sorted, also supports summary row and percentage column features
-* Can assign specific colors to series
-* Ability for plugin authors to extend the features
-
-These panel types also have some limitations:
-
-* Not as simple as *Lens*
-* Limited styling options
-* No support for math
-* No support for multiple indices
+for a specific use case.
 
 [float]
-[[types-of-visualization-panels]]
-=== Types of aggregation-based panels
+[[types-of-visualizations]]
+==== Types of aggregation-based visualizations
 
-{kib} supports the following types of aggregation-based panels.
+{kib} supports the following types of aggregation-based visualizations.
 
 [cols="50, 50"]
 |===
@@ -106,13 +88,13 @@ create visual art for a specific topic.
 
 [float]
 [[create-aggregation-based-panel]]
-=== Create an aggregation-based panel
+==== Create an aggregation-based visualization panel
 
-Choose the type of panel you want to create, then use the editor to configure the options. Each panel type supports different options. 
+Choose the type of visualization you want to create, then use the editor to configure the options.
 
 . From the dashboard, click *Create panel*, then click *Aggregation based* on the *New visualization* window.
 
-.. Click the type of panel you want to create.
+.. Click the type of visualization you want to create.
 
 .. Click the data source you want to visualize.
 
@@ -132,13 +114,13 @@ image:images/aggregation-based-color-picker.png[Color picker]
 
 [float]
 [[try-it-aggregation-based-panel]]
-=== Try it: Create an aggregation-based bar chart
+==== Try it: Create an aggregation-based bar chart
 
 You collected data from your web server, and you want to visualize and analyze the data on a dashboard. To create a dashboard panel of the data, create
 a bar chart that displays the top five log traffic sources for every three hours.
 
 [float]
-==== Add the data and create the dashboard
+===== Add the data and create the dashboard
 
 Add the sample web logs data that you'll use to create the bar chart, then create the dashboard.
 
@@ -151,7 +133,7 @@ Add the sample web logs data that you'll use to create the bar chart, then creat
 . On the *Dashboards* page, click *Create dashboard*.
 
 [float]
-==== Open and set up the aggregation-based bar chart
+===== Open and set up the aggregation-based bar chart
 
 Open the bar chart visualization builder and change the time range. 
 
@@ -165,7 +147,7 @@ Open the bar chart visualization builder and change the time range.
 
 [float]
 [[tutorial-configure-the-bar-chart]]
-==== Create the bar chart
+===== Create the bar chart
 
 To create the bar chart, add a <<bucket-aggregations,bucket aggregation>>, then add the terms sub-aggregation to display the top values.
 
@@ -196,7 +178,7 @@ TIP: Aggregation-based panels support a maximum of three *Split series*.
 image:images/bar-chart-tutorial-2.png[Bar chart with sample logs data]
 
 [float]
-==== Save the panel
+===== Save the panel
 
 Save and add the visualization panel to the dashboard.
 

docs/user/dashboard/create-panels-with-editors.asciidoc

@@ -0,0 +1,131 @@
+[[create-panels-with-editors]]
+== Create panels with editors
+
+{kib} provides several editors that you can use to create dashboard panels.
+
+[cols="2"]
+|===
+
+| <<lens,*Lens*>>
+| Create visualizations with the drag and drop editor. *Lens* is recommended for most users.
+
+| <<maps,*Maps*>>
+| Create visualizations with your geographical data.
+
+| <<tsvb,*TSVB*>>
+| Create visualizations with your time series data.
+
+| <<vega,*Vega*>>
+| Create custom visualizations with the *Vega* and *Vega-Lite* grammars.
+
+| <<add-aggregation-based-visualization-panels,*Aggregation based*>>
+| Build most visualization types using {es} <<aggregation-reference,aggregations>>. 
+
+| <<timelion,*Timelion*>>
+| Create visualizations with your time series data using a simple expression language.
+
+|===
+
+[float]
+[[lens-editor]]
+=== Lens
+
+*Lens* is the drag and drop editor that creates visualizations of your data.
+
+With *Lens*, you can:
+
+* Use the automatically generated suggestions to change the visualization type.
+* Create visualizations with multiple layers and indices.
+* Change the aggregation and labels to customize the data.
+
+[role="screenshot"]
+image:dashboard/images/lens_advanced_1_1.png[Lens]
+
+[float]
+[[tsvb-editor]]
+=== TSVB
+
+*TSVB* is a time series data visualization editor that allows you to use the full power of the {es} aggregation framework. 
+
+With *TSVB*, you can:
+
+* Combine an infinite number of <<aggregation-reference,aggregations>> to display your data.
+* Annotate time series data with timestamped events from an {es} index.
+* View the data in several types of visualizations, including charts, data tables, and markdown panels.
+* Display multiple <<index-patterns, index patterns>> in each visualization.
+* Customize the data with labels and colors.
+
+[role="screenshot"]
+image::images/tsvb.png[TSVB UI]
+
+[float]
+[[custom-visualizations]]
+=== Custom visualizations
+
+*Vega* and *Vega-Lite* are visualization grammars that are integrated into {kib} for custom visualizations.
+
+* *Vega-Lite* &mdash; A high-level grammar for rapid analysis.
+
+* *Vega* &mdash; A declarative language with support for interactivity.
+
+*Vega* and *Vega-Lite* panels can display one or more data sources, including {es}, Elastic Map Service,
+URL, or static data, and support <<reference-for-kibana-extensions,{kib} extensions>> that allow you to embed the panels on your dashboard and add interactive tools.
+
+Use *Vega* or *Vega-Lite* when you want to create visualizations with:
+
+* Aggregations that use `nested` or `parent/child` mapping
+* Aggregations without an index pattern
+* Queries that use custom time filters
+* Complex calculations
+* Extracted data from _source instead of aggregations
+* Scatter charts, sankey charts, and custom maps
+* An unsupported visual theme
+
+These grammars have some limitations: they do not support tables, and can't run queries conditionally.
+
+[role="screenshot"]
+image::images/vega.png[Vega UI]
+
+For detailed *Vega* and *Vega-Lite* information and examples, refer to <<resources-and-examples,Resources and examples>>. 
+
+[float]
+[[aggregation-based]]
+=== Aggregation-based
+
+With aggregation-based visualizations, you can:
+
+* Create heat map, tag cloud, gauge, and goal visualizations
+* Split charts up to three aggregation levels, which is more than *Lens* and *TSVB*
+* Time series data is not required
+* Use a <<save-open-search,saved search>> as an input
+* Sort data tables and use the summary row and percentage column features
+* Assign colors to series
+* Extend features with plugins
+
+[role="screenshot"]
+image:dashboard/images/aggregation_based.png[Aggregation-based editor]
+
+Aggregation-based visualizations include the following limitations:
+
+* Limited styling options
+* Math is unsupported
+* Multiple indices is unsupported
+
+[float]
+[[timelion-editor]]
+=== Timelion
+
+*Timelion* is driven by a simple expression language that you use to:
+
+* Retrieve time series data from one or more indices
+* Perform math across two or more time series
+* Visualize the results
+
+[role="screenshot"]
+image:dashboard/images/timelion.png[Timelion]
+
+include::lens.asciidoc[]
+include::tsvb.asciidoc[]
+include::vega.asciidoc[]
+include::aggregation-based.asciidoc[]
+include::timelion.asciidoc[]

docs/user/dashboard/dashboard.asciidoc

@@ -12,25 +12,18 @@ then compare the panels side-by-side to identify the patterns and connections in
 [role="screenshot"]
 image:images/Dashboard_example.png[Example dashboard]
 
-[[tsvb]]
-
 Dashboards support many types of panels, and provide several editors that you can use to create panels.
 
 [cols="2"]
 |===
 
-| <<create-panels-with-lens,Lens>>
-| The drag and drop editor that creates visualizations of your data. *Lens* is recommended for most users.
+| <<create-panels-with-editors,Visualization editors>>
+| Use the *Lens*, *TSVB*, *Vega*, and *Timelion* editors to help you create visualizations of your data, or create aggregation-based visualizations using {es} <<aggregation-reference,aggregations>>. 
+*Lens* is recommended for most users.
 
 | <<maps,Maps>>
 | Create beautiful displays of your geographical data.
 
-| <<add-panels-with-advanced-editors,Advanced editors>>
-| Visualize time series data with *TSVB* or *Timelion*, or create a custom visualization using *Vega* or *Vega-Lite*.
-
-| <<add-aggregation-based-visualization-panels,Aggregation-based visualization panels>>
-| Build most visualization types using {es} <<aggregation-reference,aggregations>>. 
-
 | <<enhance-dashboards,Tools>>
 | Add context to your panels with <<add-text,text>>, or add dynamic filters with <<add-controls,*Controls*>>.
 
@@ -152,6 +145,8 @@ Add a panel that displays the results from machine learning anomaly detection jo
 
 . On the *Add from library* flyout, click *Create new*, then select *ML Anomaly Swim Lane*.
 
+[[tsvb]]
+
 [float]
 [[arrange-panels]]
 [[moving-containers]]
@@ -332,11 +327,16 @@ for *Lens* panels.
 [role="xpack"]
 To download *Lens* panel data in a CSV file:
 
-Open the *Lens* panel menu, then select *More > Download as CSV*.
+. Open the *Lens* panel menu.
 
+. Select *More > Download as CSV*.
++
 [role="screenshot"]
 image::images/download_csv_context_menu.png[Download as CSV from panel context menu]
 
+Each layer produces a single CSV file with columns.
+When you download multiple layers, the file names combine the visualization and layer index names.
+
 To download all other panel data in a CSV file:
 
 . Open the panel menu, then select *Inspect*.
@@ -385,11 +385,11 @@ log in using their {kib} credentials, via reverse proxy, or enable <<anonymous-a
 To automate {kib}, you can export dashboards as JSON using the <<dashboard-api,import and export dashboard APIs>>. It is important to export dashboards with all references needed.
 
 --
-include::lens.asciidoc[]
+include::tutorial-create-a-dashboard-of-lens-panels.asciidoc[]
 
-include::advanced-editors.asciidoc[]
+include::lens-advanced.asciidoc[]
 
-include::aggregation-based.asciidoc[]
+include::create-panels-with-editors.asciidoc[]
 
 include::enhance-dashboards.asciidoc[]
 

docs/user/dashboard/lens-advanced.asciidoc

@@ -0,0 +1,259 @@
+[[create-a-dashboard-of-panels-with-ecommerce-data]]
+== Tutorial: Create a dashboard of panels with ecommerce sales data
+
+You collected sales data from your store, and you want to visualize and analyze the data on a dashboard. 
+To create dashboard panels of the data, open the *Lens* visualization builder, then  
+create the visualization panels that best display the data.
+
+When you've completed the tutorial, you'll have a dashboard that provides you with a complete overview of your ecommerce sales data.
+
+[role="screenshot"]
+image::images/lens_advanced_result.png[Dashboard view]
+
+[discrete]
+[[add-the-data-and-create-the-dashboard-advanced]]
+=== Add the data and create the dashboard
+
+To create visualizations of the data from your store, add the data set, then create the dashboard.
+
+. From the {kib} *Home* page, click *Try our sample data*.
+
+. From *Sample eCommerce orders*, click *Add data*.
+
+. Open the main menu, then click *Dashboard*.
+
+. On the *Dashboards* page, click *Create dashboard*.
+
+[float]
+[[open-and-set-up-lens-advanced]]
+=== Open and set up Lens
+
+Open the *Lens* editor, then make sure the correct fields appear.
+
+. From the dashboard, click *Create panel*.
+
+. On the *New visualization* window, click *Lens*.
++
+[role="screenshot"]
+image::images/lens_end_to_end_1_1.png[New visualization popover]
+
+. Make sure the *kibana_sample_data_ecommerce_* index appears.
+
+[discrete]
+[[view-the-number-of-transactions-per-day]]
+=== View the number of transactions per hour
+
+To determine the number of orders made every hour, create a bar chart, then add the chart to the dashboard.
+
+. Set the <<set-time-filter,time filter>> to *Last 30 days*.
+
+. From the *Available fields* list, drag and drop *Records* to the visualization builder.
++
+[role="screenshot"]
+image::images/lens_advanced_1_1.png[Added records to the workspace]
+
+. Change the *Vertical axis* title and display the number of orders per day. 
+
+.. In the editor, click *Count of Records*.
+
+.. In the *Display name* field, enter `Number of orders`.
+
+.. Click *Add advanced options > Normalize by unit*. 
+
+.. From the *Normalize by unit* dropdown, select *per hour*, then click *Close*.
+
+. To hide the *Horizontal axis* label, open the *Bottom Axis* menu, then deselect *Show*.
++
+[role="screenshot"]
+image::images/lens_advanced_1_1_2.png[Bottom axis menu]
++
+You have a bar chart that shows you how many orders were made at your store every hour.
++
+[role="screenshot"]
+image::images/lens_advanced_1_2.png[Orders per day]
+
+. Click *Save and return*.
+
+[discrete]
+[[view-the-cumulative-number-of-products-sold-over-time]]
+=== View the cumulative number of products sold on weekends
+
+To determine the number of orders made only on Saturday and Sunday, create an area chart, then add it to the dashboard.
+
+. Open *Lens*.
+
+. From the *Chart Type* dropdown, select *Area*.
++
+[role="screenshot"]
+image::images/lens_advanced_2_1_1.png[Chart type menu with Area selected]
+
+. Configure the cumulative sum of the store orders.
+
+.. From the *Available fields* list, drag and drop *Records* to the visualization builder.
+
+.. From the editor, click *Count of Records*.
+
+.. From *Select a function*, click *Cumulative sum*.
+
+.. In the *Display name* field, enter `Cumulative orders during weekend days`, then click *Close*.
+
+. Filter the results to display the data for only Saturday and Sunday.
+
+.. From the editor, click the *Drop a field or click to add* field for *Break down by*. 
+
+.. From *Select a function*, click *Filters*.
+
+.. Click *All records*.
+
+.. In the *KQL* field, enter `day_of_week : "Saturday" or day_of_week : "Sunday"`, then press Return.
++
+The <<kuery-query,KQL filter>> displays all documents where `day_of_week` matches `Saturday` or `Sunday`.
++
+[role="screenshot"]
+image::images/lens_advanced_2_1.png[Filter aggregation to filter weekend days]
+
+. To hide the legend, open the *Legend* menu, then click *Hide*.
++
+[role="screenshot"]
+image::images/lens_advanced_2_2_1.png[Legend menu]
++
+You have an area chart that shows you how many orders your store received during the weekend.
++
+[role="screenshot"]
+image::images/lens_advanced_2_2.png[Line chart with cumulative sum of orders made on the weekend]
+
+. Click *Save and return*.
+
+[discrete]
+[[add-a-data-layer-advanced]]
+=== Create multiple key percentiles of product prices 
+
+To view the price distribution of products sold over time, create a percentile chart, then add it to the dashboard.
+
+. Open *Lens*.
+
+. From the *Chart Type* dropdown, select *Line*.
+
+. From the *Available fields* list, drag and drop the data fields to the *Drop a field or click to add* fields in the editor.
+
+* Drag and drop *products.price* to the *Vertical axis* field.
+
+* Drag and drop *order_date* to the *Horizontal axis* field.
+
+. Create the 95th percentile.
+
+.. In the editor, click *Median of products.price*.
+
+.. From *Select a function*, click *Percentile*.
+
+.. In the *Display name* field, enter `95th`, then click *Close*.
+
+. To create the 90th percentile, duplicate the `95th` percentile.
+
+.. Drag and drop *95th* to *Drop a field or click to add*.
+
+.. Click *95th [1]*, then enter `90` in the *Percentile* field.
+
+.. In the *Display name* field enter `90th`, then click *Close*.
++
+[role="screenshot"]
+image::images/lens_advanced_3_1.gif[Easily duplicate the items with drag and drop]
+
+. Create the 50th percentile. 
+
+.. Drag and drop *90th* to *Drop a field or click to add*.
+
+.. Click *90th [1]*, then enter `50` in the *Percentile* field.
+
+.. In the *Display name* field enter `50th`, then click *Close*.
+
+. Create the 10th percentile. 
+
+.. Drag and drop *50th* to *Drop a field or click to add*.
+
+.. Click *50th [1]*, then enter `10` in the *Percentile* field.
+
+.. In the *Display name* field enter `10th`, then click *Close*.
+
+. To change the left axis label, open the *Left Axis* menu, then enter `Percentiles for product prices` in the *Axis name* field.
++
+[role="screenshot"]
+image::images/lens_advanced_3_1_1.png[Left Axis menu]
++
+You have a line chart that shows you the price distribution of products sold over time.
++
+[role="screenshot"]
+image::images/lens_advanced_3_3.png[Percentiles for product prices chart]
+
+. Click *Save and return*.
+
+[discrete]
+[[add-the-response-code-filters-advanced]]
+=== View the moving average of inventory prices
+
+To view and analyze the prices of shoes, accessories, and clothing in the store inventory, create a line chart.
+
+. Open *Lens*.
+
+. From the *Chart Type* dropdown, select *Line*.
+
+. From the *Available fields* list, drag and drop *products.price* to the visualization builder.
+
+. In the editor, click the *Drop a field or click to add* field for *Break down by*. 
+
+. From *Select a function*, click *Filters*.
+
+. Add a filter for shoes.
+
+.. Click *All records*.
+
+.. In the *KQL* field, enter `category.keyword : *Shoes*`. 
+
+.. In the *Label* field, enter `Shoes`, then press Return.
+
+. Add a filter for accessories.
+
+.. Click *Add a filter*.
+
+.. In the *KQL* field, enter `category.keyword : *Accessories*`. 
+
+.. In the *Label* field, enter `Accessories`, then press Return.
+
+. Add a filter for clothing.
+
+.. Click *Add a filter*.
+
+.. In the *KQL* field, enter `category.keyword : *Clothing*`. 
+
+.. In the *Label* field, enter `Clothing`, then press Return.
+
+. Click *Close*
++
+[role="screenshot"]
+image::images/lens_advanced_4_1.png[Median prices chart for different categories]
+
+[discrete]
+[[add-the-moving-average]]
+==== Add the moving average
+
+To focus on the general trends rather than on the peaks in the data, add the moving average, then add the visualization to the dashboard.
+
+. In the editor, click the *Median of products.price*.
+
+. From *Select a function*, click *Moving average*.
+
+. In the *Window size* field, enter `7`, then click *Close*.
++
+[role="screenshot"]
+image::images/lens_advanced_4_2.png[Moving average prices chart for different categories]
+
+. Click *Save and return*.
+
+[discrete]
+=== Save the dashboard
+
+Now that you have a complete overview of your ecommerce sales data, save the dashboard.
+
+. In the toolbar, click *Save*.
+
+. On the *Save dashboard* window, enter `Ecommerce sales data`, then click *Save*.

docs/user/dashboard/lens.asciidoc

@@ -1,436 +1,222 @@
-[[create-a-dashboard-of-panels-with-web-server-data]]
-== Tutorial: Create a dashboard of panels with web server data
+[[lens]]
+=== Lens
 
-You collected data from your web server, and you want to visualize and analyze the data on a dashboard. To create dashboard panels of the data, open the *Lens* visualization builder, then  
-create the visualization panels that best display the data.
+To create visualizations with *Lens*, you drag and drop data fields onto the visualization builder, 
+then *Lens* uses heuristics to apply each field. 
 
-[discrete]
-[[add-the-data-and-create-the-dashboard]]
-=== Add the data and create the dashboard
-
-To create visualizations of the data from the web server, add the data set, then create the dashboard.
-
-. From the {kib} *Home* page, click *Try our sample data*.
-
-. From *Sample web logs*, click *Add data*.
-
-. Open the main menu, click *Dashboard*.
-
-. Click *Create dashboard*.
+[role="screenshot"]
+image:dashboard/images/lens.png[Lens]
 
 [float]
-[[open-and-set-up-lens]]
-=== Open and set up Lens
+[[lens-required-choices]]
+==== Open and set up Lens
 
-With *Lens*, you identify the data fields you want to visualize, drag and drop the fields, then watch as
-*Lens* uses heuristics to apply the fields and create a visualization for you.
+Open *Lens*, then explore the fields in your data. The list of fields are determined by the index pattern and time filter.
 
-. From the dashboard, click *Create panel*.
+. On the dashboard, click *Create panel*.
 
 . On the *New visualization* window, click *Lens*.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_1_1.png[New visualization popover]
 
-. Make sure the *kibana_sample_data_logs* index appears.
+. <<set-time-filter,Set the time filter>>. 
+
+. To view the fields in the a different index pattern, click the index pattern, then select a different index pattern from the dropdown.
+
+. Scan through the list of fields to see what’s in your data.
 +
-The list of fields are dependent on the <<index-patterns,index pattern>>, <<set-time-filter,time filter>>, and field filters. 
+TIP: For sparse datasets, *Empty fields* can contain data, which you can use to create visualizations.
+
+. To filter the data fields, use the following options:
+
+* Enter the field name in the *Search field names* field. 
+
+* Click *Field by type*, then select the filter. To show all fields in the index pattern, deselect *Only show fields with data*.
 
 [float]
 [[view-the-data-summaries]]
-=== View the data summaries
+===== View the data summaries
 
-For each field, *Lens* shows a summary depending on the type of data. Date fields show the time distribution, string fields show the top 10 values, 
-and numeric fields show a detailed summary with the top 10 values and a value distribution.
+For each field, *Lens* displays a summary depending on the type of data. To analyze the fields, *Lens* uses a sample of 5,000 documents. 
+Each summary displays the percentage of sampled documents over all available documents.
 
-To view the data summary for a field, click *i* next to the field.
+To view a data summary, click *i* next to the field.
 
 [role="screenshot"]
 image::images/lens_data_info_documents.png[Data summary analyzed documents]
 
-*Lens* uses a sample of 5,000 documents to perform the field analysis. The bottom line of the summary shows the percentage of sampled documents over all available documents.
+Each data type display the following summaries:
 
-When *Lens* presents the top 10 values distribution, it also shows the percentage of *Other* values. For array value fields, the percentage distribution considers each value in the array as separate.
+* *Date* &mdash; Displays the time distribution.
 
-[role="screenshot"]
-image::images/lens_data_info.png[Data summary window with Other]
+* *String* &mdash; Displays the top 10 values.
 
-NOTE: The sum of all the *Other* fields can equal more than 100% by a small amount.
+* *Numeric* &mdash; Displays the top 10 values and a value distribution. When *Lens* displays the top 10 values distribution, the percentage of *Other* values is also displayed. 
+For array value fields, the percentage distribution considers each value in the array as separate.
 
-[discrete]
-[[view-the-number-of-website-visitors]]
-=== View the number of website visitors
-
-To determine how many users have visited your website within the last 90 days, create a metric visualization, then add it to the dashboard.
-
-. Set the <<set-time-filter,time filter>> to *Last 90 days*.
-
-. From the *Chart Type* dropdown, select *Metric*.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_1_2_1.png[Chart Type dropdown with Metric selected]
-
-. From the *Available fields* list, drag and drop *clientip* to the visualization builder.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_1_3.png[Changed type and dropped clientip field]
-
-. From the editor, click *Unique count of clientip*.
-
-.. In the *Display name* field, enter `Unique visitors`.
-
-.. Click *Close*.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_1_4.png[Flyout config open]
-
-. *Save* the panel, enter `Unique visitors` in the *Title* field, then add the panel to the dashboard.
-
-[discrete]
-[[view-the-distribution-of-visitors-by-operating-system]]
-=== View the distribution of visitors by operating system
-
-To determine the operating systems you should continue to support, and the importance of mobile traffic from iOS devices, 
-create a donut chart that displays the top operating systems that your visitors used to access your website within the last 90 days.
-
-. Open *Lens*, then set the <<set-time-filter,time filter>> to *Last 90 days*.
-
-. From the *Chart Type* dropdown, select *Donut*.
-
-. From the *Available fields* list, drag and drop the data fields to the *Drop a field or click to add* fields in the editor.
-
-.. Drag and drop *clientip* to the *Size by* field.
-
-.. Drag and drop *machine.os.keyword* to the *Slice by* field.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_2_1_1.png[Donut chart with clientip and machine.os.keyword fields]
-
-. Change the color palette. 
-
-.. From the editor, click *Top values of machine.os.keyword*. 
-
-.. From the *Color palette* dropdown, select *Compatibility*.
-
-.. Click *Close*.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_2_1.png[Donut chart with open config panel]
-
-. *Save* the panel, enter `Visitors by OS` in the *Title* field, then add the panel to the dashboard.
-
-[discrete]
-[[mixed-multiaxis]]
-=== View the average of bytes transfer per day
-
-To prevent potential server failures, and optimize the cost of website maintenance, create an area chart that displays the average of bytes transfer. To compare 
-the data to the number of visitors to your website, add a line chart layer.  
-
-. Open *Lens*.
-
-. From the *Available fields* list, drag and drop *bytes* to the visualization builder.
-
-. To zoom in on the data you want to view, click and drag your cursor across the bars. 
-+
-[role="screenshot"]
-image::images/lens_end_to_end_3_1_1.gif[Zoom in on the data]
-
-. Change the *timestamp* interval.
-
-.. From the editor, click *timestamp*.
-
-.. Select *Customize time interval*.
-
-.. Change the *Minimum interval* to `1 days`, then click *Close*.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_3_1.png[Customize time interval]
-
-. From the *Chart Type* dropdown, select *Area*.
-
-[discrete]
-[[add-a-data-layer]]
-==== Add the line chart layer
-
-To compare the average of bytes transfer to the number of users that visit your website, add a line chart layer.
-
-. From the editor, click *+*.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_3_2.png[Add new layer button]
-
-. From the new layer editor, click the *Chart type* dropdown, then click the line chart.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_3_3.png[Change layer type]
-+
-The chart type for the visualization changes to *Mixed XY*.
-
-. From the *Available fields* list, drag and drop the data fields to the *Drop a field or click to add* fields in the editor.
-
-.. Drag and drop *timestamp* to the *Horizontal axis* field.
-
-.. Drag and drop *clientip* to the *Vertical axis* field.
-
-. Change the *timestamp* interval.
-
-.. From the editor, click *timestamp* in the line chart layer.
-
-.. Select *Customize time interval*.
-
-.. Change the *Minimum interval* to `1 days`, then click *Close*.
-
-. Change the *Unique count of clientip* label and color.
-
-.. From the editor, click *Unique count of clientip*.
-
-.. In the *Display name* field, enter `Unique visitors` in the line chart layer.
-
-.. In the *Series color* field, enter *#CA8EAE*, then click *Close*.
-
-[discrete]
-[[configure-the-multiaxis-chart]]
-==== Configure the y-axes
-
-There is a significant difference between the *timestamp per day* and *Unique visitors* data, which makes the *Unique visitors* data difficult to read. To improve the readability, 
-display the *Unique visitors* data along a second y-axis, then change the formatting. When functions contain multiple formats, separate axes are created by default. 
-
-. From the editor, click *Unique visitors* in the line chart layer.
-
-. For *Axis side*, click *Right*, then click *Close*.
+TIP: *Other* can equal more than 100% by a small amount.
 
 [float]
-[[change-the-visualization-type]]
-==== Change the visualization type
+[[create-the-visualization-panel]]
+==== Create the visualization panel
 
-. From the editor, click *Average of bytes* in the area chart layer. 
+Drag and drop the fields on to the visualization builder, then 
 
-. From the *Value format* dropdown, select *Bytes (1024)*, then click *Close*.
+. Drag and drop the fields to the visualization builder.
+
+. To change the visualization type, use the following options:
+
+* Click the *Suggestions*.
+
+* From the *Chart Type* dropdown, click the visualization.
+
+. To configure the data, use the editor, then click *Close*.
+
+. To configure the visualization, use the dropdown menus.
 +
 [role="screenshot"]
-image::images/lens_end_to_end_3_4.png[Multiaxis chart]
-
-[discrete]
-[[lens-legend-position]]
-==== Change the legend position
-
-The visualization is done, but the legend uses a lot of space. Change the legend position to the top of the chart.
-
-. From the *Legend* dropdown, select the top position.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_3_5.png[legend position]
-
-. *Save* the panel, enter `Average Bytes vs. Unique Visitors` in the *Title* field, then add the panel to the dashboard.
-
-[discrete]
-[[percentage-stacked-area]]
-=== View the health of your website 
-
-To detect unusual traffic, bad website links, and server errors, create a percentage stacked area chart that displays the associated response codes.
-
-. Open *Lens*.
-
-. From the *Available fields* list, drag and drop the data fields to the *Drop a field or click to add* fields in the editor.
-
-.. Drag and drop *Records* to the *Vertical axis* field.
-
-.. Drag and drop *@timestamp* to the *Horizontal axis* field.
-
-. From the *Chart Type* dropdown, select *Percentage bar*.
-
-. To remove the vertical axis label, click *Left axis*, then deselect *Show*.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_4_3.png[Turn off axis name]
-
-[discrete]
-[[add-the-response-code-filters]]
-==== Add the response code filters
-
-For each response code that you want to display, create a filter. 
-
-. From the editor, click the *Drop a field or click to add* field for *Break down by*. 
-
-. From *Select a function*, click *Filters*.
-
-. Add the filter for the successful response codes. 
-
-.. Click *All records*.
-
-.. In the *KQL* field, enter `response.keyword>=200 AND response.keyword<300`. 
-
-.. In the *Label* field, enter `2XX`, then press Return.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_4_1.png[First filter in filters aggregation]
-
-. Add the filter for the redirect codes. 
-
-.. Click *Add a filter*.
-
-.. In the *KQL* field, enter `response.keyword>=300 AND response.keyword<400`. 
-
-.. In the *Label* field, enter `3XX`, then press Return.
-
-. Add the filter for the client error codes. 
-
-.. Click *Add a filter*.
-
-.. In the *KQL* field, enter `response.keyword>=400 AND response.keyword<500`. 
-
-.. In the *Label* field, enter `4XX`, then press Return.
-
-. Add the filter for the server error codes. 
-
-.. Click *Add a filter*.
-
-.. In the *KQL* field, enter `response.keyword>=500 AND response.keyword<600`. 
-
-.. In the *Label* field, enter `5XX`, then press Return.
-
-. To change the color palette, select *Status* from the *Color palette* dropdown, then click *Close*.
-
-. *Save* the panel, enter `Response Codes Over Time` in the *Title* field, then add the panel to the dashboard.
-
-[discrete]
-[[histogram]]
-=== View the traffic for your website by the hour 
-
-To find the best time to shut down your website for maintenance, create a histogram that displays the traffic for your website by the hour.
-
-. Open *Lens*.
-
-. From the *Available fields* list, drag and drop *bytes* to *Vertical axis* in the editor, then configure the options.
-
-.. Click *Average of bytes*.
-
-.. From *Select a function*, click *Sum*.
-
-.. In the *Display name* field, enter `Transferred bytes`.
-
-.. From the *Value format* dropdown, select `Bytes (1024)`, then click *Close*.
-
-. From the *Available fields* list, drag and drop *hour_of_day* to *Horizontal axis* in the editor, then configure the options.
-
-.. Click *hour_of_day*.
-
-.. Click and slide the *Intervals granularity* slider until the horizontal axis displays hourly intervals.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_5_2.png[Create custom ranges]
-
-. *Save* the panel, enter `Hourly Traffic Distribution` in the *Title* field, then add the panel to the dashboard.
-
-[discrete]
-[[custom-ranges]]
-=== View the percent of small versus large transferred files 
- 
-To determine if your users transfer more small files versus large files, create a pie chart that displays the percentage of each size. 
-
-. Open *Lens*.
-
-. From the *Available fields* list, drag and drop *bytes* to *Vertical axis* in the editor, then configure the options.
-
-.. Click *Average of bytes*.
-
-.. From *Select a function*, click *Sum*, then click *Close*.
-
-. From the *Available fields* list, drag and drop *bytes* to *Break down by* in the editor, then specify the file size ranges.
-
-.. Click *bytes*.
-
-.. Click *Create custom ranges*, enter the following, then press Return:
-
-* *Ranges* &mdash; `0` -> `10240`
-
-* *Label* &mdash; `Below 10KB`
-
-.. Click *Add range*, enter the following, then press Return:
-
-* *Ranges* &mdash; `10240` -> `+∞`
-
-* *Label* &mdash; `Above 10KB`
-+
-[role="screenshot"]
-image::images/lens_end_to_end_6_1.png[Custom ranges configuration]
-
-.. From the *Value format* dropdown, select *Bytes (1024)*, then click *Close*.
-
-. From the *Chart Type* dropdown, select *Pie*.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_6_2.png[Files size distribution]
-
-. *Save* the panel, enter `File size distribution` in the *Title* field, then add the panel to the dashboard.
-
-[discrete]
-[[treemap]]
-=== View the top sources of website traffic
-
-To determine how users find out about your website and where your users are located, create a treemap that displays the percentage of users that 
-enter your website from specific social media websites, and the top countries where users are located.  
-
-. Open *Lens*.
-
-. From the *Chart Type* dropdown, select *Treemap*.
-
-. From the *Available fields* list, drag and drop *Records* to the *Size by* field in the editor. 
-
-. From the editor, click the *Drop a field or click to add* field for *Group by*, then create a filter for each website traffic source.
-
-.. From *Select a function*, click *Filters*.
-
-.. Click *All records*, enter the following, then press Return:
-
-* *KQL* &mdash; `referer : *facebook.com*`
-
-* *Label* &mdash; `Facebook`
-
-.. Click *Add a filter*, enter the following, then press Return:
-
-* *KQL* &mdash; `referer : *twitter.com*`
-
-* *Label* &mdash; `Twitter`
-
-.. Click *Add a filter*, enter the following, then press Return:
-
-* *KQL* &mdash; `NOT referer : *twitter* OR NOT referer: *facebook.com*`
-
-* *Label* &mdash; `Other`
-
-.. Click *Close*.
-
-[discrete]
-[[add-the-countries]]
-==== Add the geographic data
-
-To determine the top countries where users are located, add the geographic data.
-
-Compare the top sources of website traffic data to the top three countries. 
-
-. From the *Available fields* list, drag and drop *geo.src* to the visualization builder. 
-
-. To change the *Group by* order, click and drag *Top values of geo.src* so that it appears first in the editor.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_7_2.png[Treemap vis]
-
-. To view only the Facebook and Twitter data, remove the *Other* category. 
-
-.. From the editor, click *Top values of geo.src*.
-
-.. From the *Advanced* dropdown, deselect *Group other values as "Other"*, then click *Close*.
-+
-[role="screenshot"]
-image::images/lens_end_to_end_7_3.png[Group other values as Other]
-
-. *Save* the panel, enter `Traffic Source For Top 3 Countries` in the *Title* field, then add the panel to the dashboard.
+image::images/lens_value_labels_xychart_toggle.png[Lens Bar chart value labels menu]
 
 [float]
-== What's next?
+[[drag-and-drop-keyboard-navigation]]
+===== Create visualization panels with keyboard navigation
 
-Your dashboard is complete and provides you with an overall picture of the data from your web server.
+*Lens* has a fully accessible, continuously improved drag and drop system, which allows you to use a keyboard instead of a mouse.
 
 [role="screenshot"]
-image::images/lens_end_to_end_dashboard.png[Final dashboard vis]
+image::images/lens_drag_drop_1.gif[Presented Lens drag and drop]
+
+. Set a focus on the chosen item. Most of the draggable elements have two focus states. The inner focus state opens a panel with detailed information or options. 
+The outer focus state allows you to drag an item. Tab through the page until you get the outer focus state on the chosen item:
++
+[role="screenshot"]
+image::images/lens_drag_drop_2.png[Lens drag and drop focus state]
+
+. Complete the following actions:
+
+* To start dragging an item, press Space bar.
+
+* To select where you want to drop the item, use the Left and Right arrows.
+
+* To reorder the fields in the group, use Up and Down arrows.
+
+* To duplicate an operation, use the Left and Right arrows to select the `Drop a field or click to add` in the same group.
++
+[role="screenshot"]
+image::images/lens_drag_drop_3.gif[Using drag and drop to reorder]
+
+. Press Space bar to confirm, or to cancel, press Esc.
+
+[float]
+[[lens-faq]]
+==== Frequently asked questions
+
+For the answers to common *Lens* questions, review the following. 
+
+[float]
+[[kql-]]
+===== When should I use the Filter function instead of KQL filters?
+
+The easiest way to apply KQL filters is to use <<semi-structured-search>>, but you can also use the *Filters* function in the following scenarios:
+
+* When you want to apply more than one KQL filter to the visualization.
+
+* When you want to apply the KQL filter to a single layer, which allows you to visualize filtered and unfiltered data.
+
+[float]
+[[when-should-i-normalize-the-data-by-unit-or-use-a-custom-interval]]
+===== When should I normalize the data by unit or use a custom interval?
+
+* *Normalize by unit* &mdash; Calculates the average for the specified interval. When you normalize the data by unit, the data appears less granular, but *Lens* is able to calculate the data faster. 
+
+* *Customize time interval* &mdash; Creates a bucket for each specified interval. When you customize the time interval, you can use a large time range, but *Lens* calculates the data slower.
+
+To normalize the interval: 
+
+. In the editor, click a field.
+
+. Click *Add advanced options > Normalize by unit*. 
+
+. From the *Normalize by unit* dropdown, select an option, then click *Close*.
+
+To create a custom interval:
+
+. In the editor, click a field.
+
+. Select *Customize time interval*.
+
+. Change the *Minimum interval*, then click *Close*.
+
+[float]
+[[can-i-show-value-labels-for-my-chart]]
+===== How do I display value labels?
+
+A subset of *Lens* visualizations support value labels.
+
+* *Bar* and *Horizontal Bar*
++
+[role="screenshot"]
+image::images/lens_value_labels_xychart_toggle.png[Lens Bar chart value labels menu]
+
+* *Pie*, *Donut*, and *Treemap*
++
+[role="screenshot"]
+image::images/lens_value_labels_partition_toggle.png[Lens Pie chart value labels menu]
+
+[float]
+[[what-is-the-other-category]]
+===== What data is categorized as Other?
+
+The *Other* category contains all of the documents that do not match the specified criteria or filters. 
+Use *Other* when you want to compare a value, or multiple values, to a whole.
+By default, *Group other values as "Other"* is enabled when you select the *Top values* function. 
+
+To disable *Group other values as "Other"*:
+
+. In the editor, click *Advanced*. 
+
+. Deselect *Group other values as "Other"*.
+
+[float]
+[[how-can-i-include-documents-without-the-field-in-the-operation]]
+===== How can I include documents without the field?
+
+By default, *Lens* retrieves only the documents from the specified field. 
+For bucket aggregations, such as *Top values*, you can choose to include documents that do not contain the specified field, 
+which is helpful when you want to compare to the whole documentation set.
+
+. In the editor, click *Advanced*.
+
+. Select *Include documents without this field*.
++
+[role="screenshot"]
+image::images/lens_bucketed_aggregation_advanced_dropdown.png[Lens Advanced options for bucketed aggregations]
+
+[float]
+[[is-it-possible-to-select-color-for-specific-bar-or-point]]
+===== How do I change the color for a single data point?
+
+*Lens* provides you with color pallettes that you can apply to the entire visualization, but you are unable to change the color for a single data point, such as a bar or line.
+
+[float]
+[[can-i-sort-by-multiple-columns]]
+===== How do I sort by multiple columns?
+
+Multiple column sorting is unsupported in *Lens*, but is supported in *Discover*. For information on how to sort multiple columns in *Discover*, 
+refer to <<explore-fields-in-your-data,Explore the fields in your data>>.
+
+[float]
+[[is-it-possible-to-sort-dimensions-in-a-chart]]
+===== How do I sort the dimensions in a chart?
+
+Sorting dimensions in visualizations is unsupported in *Lens*.
+
+[float]
+[[is-it-possible-to-use-saved-serches-in-lens]]
+===== How do I visualize saved searches?
+
+Visualizing saved searches in unsupported in *Lens*.
+
+[float]
+[[is-it-possible-to-decrease-or-increase-the-number-of-suggestions]]
+===== How do I change the number of suggestions?
+
+Configuring the *Suggestions* that *Lens* automatically populates is unsupported.

docs/user/dashboard/timelion.asciidoc

@@ -1,4 +1,4 @@
-[[create-panels-with-timelion]]
+[[timelion]]
 === Timelion
 
 Instead of using a visual editor to create charts, you define a graph by chaining functions together, using the *Timelion*-specific syntax. 

docs/user/dashboard/tsvb.asciidoc

@@ -1,4 +1,4 @@
-[[TSVB]]
+[[tsvb]]
 === TSVB
 
 *TSVB* enables you to visualize the data from multiple data series, supports <<aggregation-reference, 
@@ -132,7 +132,7 @@ current time is 9:41, *TSVB* displays only the last 10 minutes &mdash; from 9:30
 [float]
 ===== How do I calculate the difference between two data series?
 
-Performing math across data series is unsupported in *TSVB*. To calculate the difference between two data series, use <<create-panels-with-timelion, Timelion>> or <<vega, Vega>>.
+Performing math across data series is unsupported in *TSVB*. To calculate the difference between two data series, use <<timelion, *Timelion*>> or <<vega, *Vega*>>.
 
 [float]
 ===== How do I compare the current versus previous month?
@@ -153,7 +153,7 @@ The ability to calculate a month over month change is not fully supported in *TS
 time filter is set to 3 months or more _and_ the *Interval* is `1m`. Use the *Derivative* to get the absolute monthly change. To convert to a percent, 
 add the *Math* function with the `params.current / (params.current - params.derivative)` formula, then select *Percent* from the *Data Formatter* dropdown.
 
-For other types of month over month calculations, use <<create-panels-with-timelion, Timelion>> or <<vega, Vega>>.
+For other types of month over month calculations, use <<timelion, *Timelion*>> or <<vega, *Vega*>>.
 
 [float]
 ===== How do I calculate the duration between the start and end of an event?

docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc

@@ -1,43 +1,81 @@
-[float]
-[[lens-end-to-end]]
-== Tutorial: Analyze website data on a dashboard
+[[create-a-dashboard-of-panels-with-web-server-data]]
+== Tutorial: Create a dashboard of panels with web server data
 
-Most dashboards use similar types of analysis to answer key questions. In this tutorial you will base your analysis off of {kib} sample data which resembles logs from the Apache web server.
+You collected data from your web server, and you want to visualize and analyze the data on a dashboard. To create dashboard panels of the data, open the *Lens* visualization builder, then  
+create the visualization panels that best display the data.
 
-When you're finished creating the dashboard, you'll be able to answer the following questions:
+When you've completed the tutorial, you'll have a dashboard that provides you with a complete overview of your web server data.
 
-* How many users have visited your website?
-* What is the distribution of visitors by operating system? 
-* What is the average of bytes transfer per day?
-* What is the health of your website?
-* What is the traffic for your website by the hour?
-* What is the percentage of small compared to large transferred files?
-* What are the top social media sources of website traffic, and from what countries?
+[role="screenshot"]
+image::images/lens_end_to_end_dashboard.png[Final dashboard vis]
 
 [discrete]
-[[add-the-sample-web-logs-data]]
+[[add-the-data-and-create-the-dashboard]]
 === Add the data and create the dashboard
 
-To create visualizations of the website traffic data, add the data set, then create the dashboard.
+To create visualizations of the data from the web server, add the data set, then create the dashboard.
 
-. From the *Home* page, click *Try our sample data*.
+. From the {kib} *Home* page, click *Try our sample data*.
 
 . From *Sample web logs*, click *Add data*.
 
 . Open the main menu, click *Dashboard*.
 
-. On the *Dashboards* page, click *Create dashboard*.
+. Click *Create dashboard*.
+
+[float]
+[[open-and-set-up-lens]]
+=== Open and set up Lens
+
+With *Lens*, you identify the data fields you want to visualize, drag and drop the fields, then watch as
+*Lens* uses heuristics to apply the fields and create a visualization for you.
+
+. From the dashboard, click *Create panel*.
+
+. On the *New visualization* window, click *Lens*.
++
+[role="screenshot"]
+image::images/lens_end_to_end_1_1.png[New visualization popover]
+
+. Make sure the *kibana_sample_data_logs* index appears.
 
 [discrete]
-[[donut-vis]]
+[[view-the-number-of-website-visitors]]
+=== View the number of website visitors
+
+To determine how many users have visited your website within the last 90 days, create a metric visualization, then add it to the dashboard.
+
+. Set the <<set-time-filter,time filter>> to *Last 90 days*.
+
+. From the *Chart Type* dropdown, select *Metric*.
++
+[role="screenshot"]
+image::images/lens_end_to_end_1_2_1.png[Chart Type dropdown with Metric selected]
+
+. From the *Available fields* list, drag and drop *clientip* to the visualization builder.
++
+[role="screenshot"]
+image::images/lens_end_to_end_1_3.png[Changed type and dropped clientip field]
+
+. In the editor, click *Unique count of clientip*.
+
+.. In the *Display name* field, enter `Unique visitors`.
+
+.. Click *Close*.
++
+[role="screenshot"]
+image::images/lens_end_to_end_1_4.png[Flyout config open]
+
+. Click *Save and return*.
+
+[discrete]
+[[view-the-distribution-of-visitors-by-operating-system]]
 === View the distribution of visitors by operating system
 
 To determine the operating systems you should continue to support, and the importance of mobile traffic from iOS devices, 
-create a donut chart that displays the top operating systems that your visitors use to access your webiste.
+create a donut chart that displays the top operating systems that your visitors used to access your website within the last 90 days.
 
-. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window.
-
-. Make sure the *kibana_sample_data_logs* index appears, and the <<set-time-filter,time filter>> is set to *Last 90 days*.
+. Open *Lens*, then set the <<set-time-filter,time filter>> to *Last 90 days*.
 
 . From the *Chart Type* dropdown, select *Donut*.
 
@@ -52,35 +90,25 @@ image::images/lens_end_to_end_2_1_1.png[Donut chart with clientip and machine.os
 
 . Change the color palette. 
 
-.. From the editor, click *Top values of machine.os.keyword*. 
+.. In the editor, click *Top values of machine.os.keyword*. 
 
-.. From the *Color palette* dropdown, select *Compability*.
+.. From the *Color palette* dropdown, select *Compatibility*.
 
 .. Click *Close*.
 +
 [role="screenshot"]
 image::images/lens_end_to_end_2_1.png[Donut chart with open config panel]
 
-. Save the visualization, then add it to the dashboard.
-
-.. From the toolbar, click *Save*.
-
-..  In the *Title* field, enter `Visitors by OS`. 
-
-.. Select *Add to dashboard after saving*.
-
-.. Click *Save and return*.
+. Click *Save and return*.
 
 [discrete]
 [[mixed-multiaxis]]
 === View the average of bytes transfer per day
 
-To prevent potential server failures and optimize the cost of website maintenance, create an area chart that displays the average of bytes transfer, 
-then add a line chart layer to compare the data to the number of visitors to your website.  
+To prevent potential server failures, and optimize the cost of website maintenance, create an area chart that displays the average of bytes transfer. To compare 
+the data to the number of visitors to your website, add a line chart layer.  
 
-. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window.
-
-. Make sure the *kibana_sample_data_logs* index appears.
+. Open *Lens*.
 
 . From the *Available fields* list, drag and drop *bytes* to the visualization builder.
 
@@ -91,17 +119,15 @@ image::images/lens_end_to_end_3_1_1.gif[Zoom in on the data]
 
 . Change the *timestamp* interval.
 
-.. From the editor, click *timestamp*.
+.. In the editor, click *timestamp*.
 
 .. Select *Customize time interval*.
 
-.. Change the *Minimum interval* to `1 days`.
+.. Change the *Minimum interval* to `1 days`, then click *Close*.
 +
 [role="screenshot"]
 image::images/lens_end_to_end_3_1.png[Customize time interval]
 
-.. Click *Close*.
-
 . From the *Chart Type* dropdown, select *Area*.
 
 [discrete]
@@ -110,7 +136,7 @@ image::images/lens_end_to_end_3_1.png[Customize time interval]
 
 To compare the average of bytes transfer to the number of users that visit your website, add a line chart layer.
 
-. From the editor, click *+*.
+. In the editor, click *+*.
 +
 [role="screenshot"]
 image::images/lens_end_to_end_3_2.png[Add new layer button]
@@ -130,23 +156,19 @@ The chart type for the visualization changes to *Mixed XY*.
 
 . Change the *timestamp* interval.
 
-.. From the editor, click *timestamp* in the line chart layer.
+.. In the editor, click *timestamp* in the line chart layer.
 
 .. Select *Customize time interval*.
 
-.. Change the *Minimum interval* to `1 days`.
-
-.. Click *Close*.
+.. Change the *Minimum interval* to `1 days`, then click *Close*.
 
 . Change the *Unique count of clientip* label and color.
 
-.. From the editor, click *Unique count of clientip*.
+.. In the editor, click *Unique count of clientip*.
 
 .. In the *Display name* field, enter `Unique visitors` in the line chart layer.
 
-.. In the *Series color* field, enter *#CA8EAE*.
-
-.. Click *Close*.
+.. In the *Series color* field, enter *#CA8EAE*, then click *Close*.
 
 [discrete]
 [[configure-the-multiaxis-chart]]
@@ -155,41 +177,33 @@ The chart type for the visualization changes to *Mixed XY*.
 There is a significant difference between the *timestamp per day* and *Unique visitors* data, which makes the *Unique visitors* data difficult to read. To improve the readability, 
 display the *Unique visitors* data along a second y-axis, then change the formatting. When functions contain multiple formats, separate axes are created by default. 
 
-. From the editor, click *Unique visitors* in the line chart layer.
+. In the editor, click *Unique visitors* in the line chart layer.
 
-.. For *Axis side*, click *Right*.
+. For *Axis side*, click *Right*, then click *Close*.
 
-.. Click *Close*.
+[float]
+[[change-the-visualization-type]]
+==== Change the visualization type
 
-. From the editor, click *Average of bytes* in the area chart layer. 
+. In the editor, click *Average of bytes* in the area chart layer. 
 
-.. From the *Value format* dropdown, select *Bytes (1024)*. 
+. From the *Value format* dropdown, select *Bytes (1024)*, then click *Close*.
 +
 [role="screenshot"]
 image::images/lens_end_to_end_3_4.png[Multiaxis chart]
 
-.. Click *Close*.
-
 [discrete]
 [[lens-legend-position]]
-==== Change the legend position and save the visualization
+==== Change the legend position
 
-The visualization is done, but the legend uses a lot of space. Change the legend position to the top of the chart, then save the visualization and add it to the dashboard.
+The visualization is done, but the legend uses a lot of space. Change the legend position to the top of the chart.
 
 . From the *Legend* dropdown, select the top position.
 +
 [role="screenshot"]
 image::images/lens_end_to_end_3_5.png[legend position]
 
-. Save the visualization, then add it to the dashboard.
-
-.. From the toolbar, click *Save*.
-
-..  In the *Title* field, enter `Average Bytes vs. Unique Visitors`. 
-
-.. Select *Add to dashboard after saving*.
-
-.. Click *Save and return*.
+. Click *Save and return*.
 
 [discrete]
 [[percentage-stacked-area]]
@@ -197,9 +211,7 @@ image::images/lens_end_to_end_3_5.png[legend position]
 
 To detect unusual traffic, bad website links, and server errors, create a percentage stacked area chart that displays the associated response codes.
 
-. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window.
-
-. Make sure the *kibana_sample_data_logs* index appears.
+. Open *Lens*.
 
 . From the *Available fields* list, drag and drop the data fields to the *Drop a field or click to add* fields in the editor.
 
@@ -220,7 +232,7 @@ image::images/lens_end_to_end_4_3.png[Turn off axis name]
 
 For each response code that you want to display, create a filter. 
 
-. From the editor, click the *Drop a field or click to add* field for *Break down by*. 
+. In the editor, click the *Drop a field or click to add* field for *Break down by*.
 
 . From *Select a function*, click *Filters*.
 
@@ -230,13 +242,11 @@ For each response code that you want to display, create a filter.
 
 .. In the *KQL* field, enter `response.keyword>=200 AND response.keyword<300`. 
 
-.. In the *Label* field, enter `2XX`.
+.. In the *Label* field, enter `2XX`, then press Return.
 +
 [role="screenshot"]
 image::images/lens_end_to_end_4_1.png[First filter in filters aggregation]
 
-.. Press Return.
-
 . Add the filter for the redirect codes. 
 
 .. Click *Add a filter*.
@@ -261,19 +271,9 @@ image::images/lens_end_to_end_4_1.png[First filter in filters aggregation]
 
 .. In the *Label* field, enter `5XX`, then press Return.
 
-. To change the color pallette, select *Status* from the *Color palette* dropdown.
+. To change the color palette, select *Status* from the *Color palette* dropdown, then click *Close*.
 
-.. Click *Close*.
-
-. Save the visualization, then add it to the dashboard.
-
-.. From the toolbar, click *Save*.
-
-..  In the *Title* field, enter `Response Codes Over Time`. 
-
-.. Select *Add to dashboard after saving*.
-
-.. Click *Save and return*.
+. Click *Save and return*.
 
 [discrete]
 [[histogram]]
@@ -281,9 +281,7 @@ image::images/lens_end_to_end_4_1.png[First filter in filters aggregation]
 
 To find the best time to shut down your website for maintenance, create a histogram that displays the traffic for your website by the hour.
 
-. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window.
-
-. Make sure the *kibana_sample_data_logs* index appears.
+. Open *Lens*.
 
 . From the *Available fields* list, drag and drop *bytes* to *Vertical axis* in the editor, then configure the options.
 
@@ -293,9 +291,7 @@ To find the best time to shut down your website for maintenance, create a histog
 
 .. In the *Display name* field, enter `Transferred bytes`.
 
-.. From the *Value format* dropdown, select `Bytes (1024)`.
-
-.. Click *Close*.
+.. From the *Value format* dropdown, select `Bytes (1024)`, then click *Close*.
 
 . From the *Available fields* list, drag and drop *hour_of_day* to *Horizontal axis* in the editor, then configure the options.
 
@@ -306,15 +302,7 @@ To find the best time to shut down your website for maintenance, create a histog
 [role="screenshot"]
 image::images/lens_end_to_end_5_2.png[Create custom ranges]
 
-. Save the visualization, then add it to the dashboard.
-
-.. From the toolbar, click *Save*.
-
-..  In the *Title* field, enter `Hourly Traffic Distribution`. 
-
-.. Select *Add to dashboard after saving*.
-
-.. Click *Save and return*.
+. Click *Save and return*.
 
 [discrete]
 [[custom-ranges]]
@@ -322,17 +310,13 @@ image::images/lens_end_to_end_5_2.png[Create custom ranges]
  
 To determine if your users transfer more small files versus large files, create a pie chart that displays the percentage of each size. 
 
-. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window.
-
-. Make sure the *kibana_sample_data_logs* index appears.
+. Open *Lens*.
 
 . From the *Available fields* list, drag and drop *bytes* to *Vertical axis* in the editor, then configure the options.
 
 .. Click *Average of bytes*.
 
-.. From *Select a function*, click *Sum*.
-
-.. Click *Close*.
+.. From *Select a function*, click *Sum*, then click *Close*.
 
 . From the *Available fields* list, drag and drop *bytes* to *Break down by* in the editor, then specify the file size ranges.
 
@@ -353,24 +337,14 @@ To determine if your users transfer more small files versus large files, create
 [role="screenshot"]
 image::images/lens_end_to_end_6_1.png[Custom ranges configuration]
 
-.. From the *Value format* dropdown, select *Bytes (1024)*.
-
-.. Click *Close*.
+.. From the *Value format* dropdown, select *Bytes (1024)*, then click *Close*.
 
 . From the *Chart Type* dropdown, select *Pie*.
 +
 [role="screenshot"]
 image::images/lens_end_to_end_6_2.png[Files size distribution]
 
-. Save the visualization, then add it to the dashboard.
-
-.. From the toolbar, click *Save*.
-
-..  In the *Title* field, enter `File size distribution`. 
-
-.. Select *Add to dashboard after saving*.
-
-.. Click *Save and return*.
+. Click *Save and return*.
 
 [discrete]
 [[treemap]]
@@ -379,15 +353,13 @@ image::images/lens_end_to_end_6_2.png[Files size distribution]
 To determine how users find out about your website and where your users are located, create a treemap that displays the percentage of users that 
 enter your website from specific social media websites, and the top countries where users are located.  
 
-. From the dashboard, click *Create panel*, then click *Lens* on the *New visualization* window.
-
-. Make sure the *kibana_sample_data_logs* index appears.
+. Open *Lens*.
 
 . From the *Chart Type* dropdown, select *Treemap*.
 
 . From the *Available fields* list, drag and drop *Records* to the *Size by* field in the editor. 
 
-. From the editor, click the *Drop a field or click to add* field for *Group by*, then create a filter for each website traffic source.
+. In the editor, click the *Drop a field or click to add* field for *Group by*, then create a filter for each website traffic source.
 
 .. From *Select a function*, click *Filters*.
 
@@ -415,7 +387,7 @@ enter your website from specific social media websites, and the top countries wh
 [[add-the-countries]]
 ==== Add the geographic data
 
-To determine the top countries where users are located, add the geographic data, then save and add the visualization to the dashboard.
+To determine the top countries where users are located, add the geographic data.
 
 Compare the top sources of website traffic data to the top three countries. 
 
@@ -428,26 +400,20 @@ image::images/lens_end_to_end_7_2.png[Treemap vis]
 
 . To view only the Facebook and Twitter data, remove the *Other* category. 
 
-.. From the editor, click *Top values of geo.src*.
+.. In the editor, click *Top values of geo.src*.
 
-.. From the *Advanced* dropdown, deselect *Group other values as "Other"*.
+.. From the *Advanced* dropdown, deselect *Group other values as "Other"*, then click *Close*.
 +
 [role="screenshot"]
 image::images/lens_end_to_end_7_3.png[Group other values as Other]
 
-.. Click *Close*.
+. Click *Save and return*.
 
-. Save the visualization, then add it to the dashboard.
+[discrete]
+=== Save the dashboard
 
-.. From the toolbar, click *Save*.
+Now that you have a complete overview of your web server data, save the dashboard.
 
-..  In the *Title* field, enter `Traffic Source For Top 3 Countries`. 
+. In the toolbar, click *Save*.
 
-.. Select *Add to dashboard after saving*.
-
-.. Click *Save and return*.
-
-That's it! You've created a dashboard that provides you with a complete picture of your website data.
-
-[role="screenshot"]
-image::images/lens_end_to_end_dashboard.png[Final dashboard vis]
+. On the *Save dashboard* window, enter `Web server data`, then click *Save*.