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

* [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 <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Marta Bondyra <[email protected]> Co-authored-by: Marta Bondyra <[email protected]> Co-authored-by: dej611 <[email protected]> Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Marta Bondyra <[email protected]> Co-authored-by: Marta Bondyra <[email protected]>
elastic · Mar 18, 2021 · 129bc68 · 129bc68
1 parent 37dfe5f
commit 129bc68
Show file tree

Hide file tree

Showing 42 changed files with 654 additions and 600 deletions.
diff --git a/docs/management/numeral.asciidoc b/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:

diff --git a/docs/redirects.asciidoc b/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]]

diff --git a/docs/user/canvas.asciidoc b/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.
 

diff --git a/docs/user/dashboard/advanced-editors.asciidoc b/docs/user/dashboard/advanced-editors.asciidoc
diff --git a/docs/user/dashboard/aggregation-based.asciidoc b/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.
 

diff --git a/docs/user/dashboard/create-panels-with-editors.asciidoc b/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[]