[DOCS] Improved dashboard tools content (#57032) (#57456)

* [DOCS] Improved dashboard tools content * Examples and images * Fixed broken links * Removed rogue bullet * Fixed index issue * Added metric.asciidoc * Rendered Dashboard toolss in bold * Fixed example * Link testing * Added new markdown examplples * Added controls definition content
elastic · Feb 12, 2020 · 80c58df · 80c58df
1 parent bcabf9c
commit 80c58df
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 93 deletions.
diff --git a/docs/images/controls/controls_in_dashboard.png b/docs/images/controls/controls_in_dashboard.png
diff --git a/docs/images/dashboard-controls.png b/docs/images/dashboard-controls.png
diff --git a/docs/images/markdown-example.png b/docs/images/markdown-example.png
diff --git a/docs/images/markdown_example_1.png b/docs/images/markdown_example_1.png
diff --git a/docs/images/markdown_example_2.png b/docs/images/markdown_example_2.png
diff --git a/docs/images/markdown_example_3.png b/docs/images/markdown_example_3.png
diff --git a/docs/images/markdown_example_4.png b/docs/images/markdown_example_4.png
diff --git a/docs/user/visualize.asciidoc b/docs/user/visualize.asciidoc
@@ -53,9 +53,9 @@ data sets.
 
 * *<<for-dashboard,Dashboard tools>>*
 [horizontal]
-<<for-dashboard,Controls>>:: Provides the ability to add interactive inputs to a Dashboard.
+Controls:: Adds interactive inputs to a Dashboard.
 
-<<for-dashboard,Markdown widget>>:: Display free-form information or instructions.
+Markdown widget:: Display free-form information or instructions.
 
 * *For developers*
 [horizontal]

diff --git a/docs/visualize/for-dashboard.asciidoc b/docs/visualize/for-dashboard.asciidoc
@@ -1,117 +1,51 @@
 [[for-dashboard]]
-== Markdown and controls
-
-[float]
-[[markdown-widget]]
-=== Markdown widget
-
-The Markdown widget is a text entry field that accepts GitHub-flavored Markdown text. Kibana renders the text you enter
-in this field and displays the results on the dashboard. You can click the *Help* link to go to the
-https://help.github.com/articles/github-flavored-markdown/[help page] for GitHub flavored Markdown. From the widget
-you can:
-
-* Click *Apply* to display the rendered text in the Preview panel
-* Click *Discard* to revert to a previously saved version
+== Dashboard tools
 
+Visualize comes with controls and Markdown tools that you can add to dashboards for an interactive experience.
 
 [float]
 [[controls]]
-=== Controls widget
+=== Controls
 experimental[]
 
-The Controls widget enables you to add interactive inputs
-to a dashboard.  You can create two types of inputs:
+The controls tool enables you to add interactive inputs
+on a dashboard.
 
-* Dropdown menu
-* Radio slider
+You can add two types of interactive inputs:
 
-[role="screenshot"]
-image::images/controls/controls_in_dashboard.png[]
+* *Options list* - Filters content based on one or more specified options. The dropdown menu is dynamically populated with the results of a terms aggregation. For example, use the options list on the sample flight dashboard when you want to filter the data by origin city and destination city.
 
-[float]
-[[add-input-controls]]
-=== Add input controls
-
-To start a *Controls* visualization, open the Visualization application
-and click the *+* button. Scroll to the *Others* section and
-select *Controls*.
-
-In the visualization builder, choose the type of control to add to
-your visualization.
-
-[float]
-==== Dropdown menu
-
-A dropdown menu allows users to filter content by selecting
-one or more options from a list. The dropdown menu is dynamically populated
-with the results of a terms aggregation.
+* *Range slider* - Filters data within a specified range of numbers. The minimum and maximum values are dynamically populated with the results of a min and max aggregation. For example, use the range slider when you want to filter the sample flight dashboard by a specific average ticket price.
 
 [role="screenshot"]
-image::images/controls/dropdown_control_editor.png[]
-
-*Control Label*:: The label for the dropdown menu. By default, the
-label is the field name.
-
-*Index Pattern*:: The <<index-patterns,index pattern>> that contains
-the data set to visualize.
-
-*Field*:: The field used to populate the list of options
-and filter on when users interact with the input.
-The list of available fields is derived from the specified
-index pattern.
-
-*Parent control*:: The control for chaining dropdown menus so that the
-selection in the first menu
-filters the terms in the second menu. Only available when
-creating multiple dropdown menus.
-
-*Multiselect*:: When enabled, the dropdown menu allows users to select multiple options.
-
-*Size*:: The number of options to include in the list.
+image::images/dashboard-controls.png[]
 
 [float]
-==== Range slider
+[[markdown-widget]]
+=== Markdown
 
-A range sliders allow users to filter content within a range of numbers.
-The range slider minimum and maximum values are dynamically populated with
-the results of a min and max aggregation.
+The Markdown tool is a text entry field that accepts GitHub-flavored Markdown text. When you enter the text, the tool populates the results on the dashboard.
 
-[role="screenshot"]
-image::images/controls/range_slider_editor.png[]
+Markdown is helpful when you want to include important information, instructions, and images on your dashboard.
 
-*Control Label*:: The label for the range slider. By default, the
-label is the field name.
+For information about GitHub-flavored Markdown text, click *Help*.
 
-*Index Pattern*:: The <<index-patterns,index pattern>> that contains
-the data set to visualize.
+For example, when you enter:
 
-*Field*:: The field used to populate the range slider
-and filter on when users interact with the input.
-The list of available fields is derived from the
-specified index pattern.
-
-*Step Size*:: The increment/decrement size of the slider.
+[role="screenshot"]
+image::images/markdown_example_1.png[]
 
-*Decimal Places*:: The number of decimal places.
+The following instructions are displayed:
 
-[float]
-[[global-options]]
-=== Global options
+[role="screenshot"]
+image::images/markdown_example_2.png[]
 
-Open the *Options* tab to configure settings that apply to all input
-controls in a Controls visualization.
+Or when you enter:
 
 [role="screenshot"]
-image::images/controls/controls_options.png[]
-
-*Update Kibana filters on each change*:: When enabled, all input interactions
-immediately create filters that cause the dashboard to refresh. When disabled,
-Kibana filters are only created
-when the user clicks *Apply changes* image:images/apply-changes-button.png[].
+image::images/markdown_example_3.png[]
 
-*Use time filter*:: When enabled, the aggregations used to generate
-the dropdown options list and range minimum and maximum are bound
-to <<set-time-filter,Kibana's global time range>>.
+The following image is displayed:
 
-*Pin filters to global state*:: When enabled, all filters created by
-interacting with the inputs are automatically pinned.
+[role="screenshot"]
+image::images/markdown_example_4.png[]
diff --git a/docs/visualize/most-frequent.asciidoc b/docs/visualize/most-frequent.asciidoc
@@ -11,6 +11,8 @@ The most frequently used visualizations include:
 * Metric, goal, and gauge
 * Tag cloud
 
+[[metric-chart]]
+
 [float]
 [[frequently-used-viz-aggregation]]
 === Supported aggregations