From 1e30a66fe7a994d9320498742b425cf83f2b8c00 Mon Sep 17 00:00:00 2001
From: KOTungseth <kaarina.tungseth@elastic.co>
Date: Thu, 8 Aug 2019 11:19:05 -0500
Subject: [PATCH] [DOCS] TSVB and Timelion clean up

---
 docs/visualize/timelion.asciidoc | 54 +++++++++++++++++++++-----------
 docs/visualize/tsvb.asciidoc     | 14 ++++++---
 2 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/docs/visualize/timelion.asciidoc b/docs/visualize/timelion.asciidoc
index d65ac3f6a2ce..891219a55e5d 100644
--- a/docs/visualize/timelion.asciidoc
+++ b/docs/visualize/timelion.asciidoc
@@ -1,5 +1,5 @@
 [[timelion]]
-== Visualizing your data with Timelion
+== Timelion
 
 Timelion is a time series data visualizer that enables you to combine totally
 independent data sources within a single visualization. It's driven by a simple
@@ -20,13 +20,13 @@ In this tutorial, you'll use the time series data from https://www.elastic.co/gu
 
 [float]
 [[time-series-intro]]
-== Create time series visualizations
+=== Create time series visualizations
 
 To compare the real-time percentage of CPU time spent in user space to the results offset by one hour, create a time series visualization.
 
 [float]
 [[time-series-define-functions]]
-=== Define the functions
+==== Define the functions
 
 To start tracking the real-time percentage of CPU, enter the following in the *Timelion Expression* field:
 
@@ -35,12 +35,13 @@ To start tracking the real-time percentage of CPU, enter the following in the *T
 .es(index=metricbeat-*, timefield='@timestamp', metric='avg:system.cpu.user.pct')
 ----------------------------------
 
+[role="screenshot"]
 image::images/timelion-create01.png[]
 {nbsp}
 
 [float]
 [[time-series-compare-data]]
-=== Compare the data
+==== Compare the data
 
 To compare the two data sets, add another series with data from the previous hour, separated by a comma:  
 
@@ -51,12 +52,13 @@ To compare the two data sets, add another series with data from the previous hou
 
 <1> `offset` offsets the data retrieval by a date expression. In this example, `-1h` offsets the data back by one hour.
 
+[role="screenshot"]
 image::images/timelion-create02.png[]
 {nbsp}
 
 [float]
 [[time-series-add-labels]]
-=== Add label names
+==== Add label names
 
 To easily distinguish between the two data sets, add the label names:
 
@@ -67,12 +69,13 @@ To easily distinguish between the two data sets, add the label names:
 
 <1> `.label()` adds custom labels to the visualization.
 
+[role="screenshot"]
 image::images/timelion-create03.png[]
 {nbsp}
 
 [float]
 [[time-series-title]]
-=== Add a title 
+==== Add a title 
 
 Add a meaningful title:
 
@@ -83,12 +86,13 @@ Add a meaningful title:
 
 <1> `.title()` adds a title with a meaningful name. Titles make is easier for unfamiliar users to understand the purpose of the visualization.
 
+[role="screenshot"]
 image::images/timelion-customize01.png[]
 {nbsp}
 
 [float]
 [[time-series-change-chart-type]]
-=== Change the chart type
+==== Change the chart type
 
 To differentiate between the current hour data and the last hour data, change the chart type:
 
@@ -99,12 +103,13 @@ To differentiate between the current hour data and the last hour data, change th
 
 <1> `.lines()` changes the appearance of the chart lines. In this example, `.lines(fill=1,width=0.5)` sets the fill level to `1`, and the border width to `0.5`.
 
+[role="screenshot"]
 image::images/timelion-customize02.png[]
 {nbsp}
 
 [float]
 [[time-series-change-color]]
-=== Change the line colors
+==== Change the line colors
 
 To make the current hour data stand out, change the line colors:
 
@@ -115,12 +120,13 @@ To make the current hour data stand out, change the line colors:
 
 <1> `.color()` changes the color of the data. Supported color types include standard color names, hexadecimal values, or a color schema for grouped data. In this example, `.color(gray)` represents the last hour, and `.color(#1E90FF)` represents the current hour.
 
+[role="screenshot"]
 image::images/timelion-customize03.png[]
 {nbsp}
 
 [float]
 [[time-series-adjust-legend]]
-=== Make adjustments to the legend
+==== Make adjustments to the legend
 
 Change the position and style of the legend:
 
@@ -131,18 +137,19 @@ Change the position and style of the legend:
 
 <1> `.legend()` sets the position and style of the legend. In this example, `.legend(columns=2, position=nw)` places the legend in the north west position of the visualization with two columns.
 
+[role="screenshot"]
 image::images/timelion-customize04.png[]
 {nbsp}
 
 [float]
 [[mathematical-functions-intro]]
-== Create visualizations with mathematical functions
+=== Create visualizations with mathematical functions
 
 To create a visualization for inbound and outbound network traffic, use mathematical functions.
 
 [float]
 [[mathematical-functions-define-functions]]
-=== Define the functions
+==== Define the functions
 
 To start tracking the inbound and outbound network traffic, enter the following in the *Timelion Expression* field:
 
@@ -151,12 +158,13 @@ To start tracking the inbound and outbound network traffic, enter the following
 .es(index=metricbeat*, timefield=@timestamp, metric=max:system.network.in.bytes)
 ----------------------------------
 
+[role="screenshot"]
 image::images/timelion-math01.png[]
 {nbsp}
 
 [float]
 [[mathematical-functions-plot-change]]
-=== Plot the rate of change
+==== Plot the rate of change
 
 Change how the data is displayed so that you can easily monitor the inbound traffic:
 
@@ -167,6 +175,7 @@ Change how the data is displayed so that you can easily monitor the inbound traf
 
 <1> `.derivative` plots the change in values over time. 
 
+[role="screenshot"]
 image::images/timelion-math02.png[]
 {nbsp}
 
@@ -179,12 +188,13 @@ Add a similar calculation for outbound traffic:
 
 <1> `.multiply()` multiplies the data series by a number, the result of a data series, or a list of data series. For this example, `.multiply(-1)` converts the outbound network traffic to a negative value since the outbound network traffic is leaving your machine.
 
+[role="screenshot"]
 image::images/timelion-math03.png[]
 {nbsp}
 
 [float]
 [[mathematical-functions-convert-data]]
-=== Change the data metric
+==== Change the data metric
 
 To make the visualization easier to analyze, change the data metric from bytes to megabytes:
 
@@ -195,12 +205,13 @@ To make the visualization easier to analyze, change the data metric from bytes t
 
 <1> `.divide()` accepts the same input as `.multiply()`, then divides the data series by the defined divisor. 
 
+[role="screenshot"]
 image::images/timelion-math04.png[]
 {nbsp}
 
 [float]
 [[mathematical-functions-add-labels]]
-=== Customize and format the visualization
+==== Customize and format the visualization
 
 Customize and format the visualization using functions:
 
@@ -215,12 +226,13 @@ Customize and format the visualization using functions:
 <4> `.color()` changes the color of the data. Supported color types include standard color names, hexadecimal values, or a color schema for grouped data. In this example, `.color(green)` represents the inbound network traffic, and `.color(blue)` represents the outbound network traffic.
 <5> `.legend()` sets the position and style of the legend. For this example, `legend(columns=2, position=nw)` places the legend in the north west position of the visualization with two columns.
 
+[role="screenshot"]
 image::images/timelion-math05.png[]
 {nbsp}
 
 [float]
 [[timelion-conditional-intro]]
-== Create visualizations with conditional logic and tracking trends
+=== Create visualizations with conditional logic and tracking trends
 
 To easily detect outliers and discover patterns over time, modify time series data with conditional logic and create a trend with a moving average.
 
@@ -236,7 +248,7 @@ With Timelion conditional logic, you can use the following operator values to co
 
 [float]
 [[conditional-define-functions]]
-=== Define the functions
+==== Define the functions
 
 To chart the maximum value of `system.memory.actual.used.bytes`, enter the following in the *Timelion Expression* field:
 
@@ -245,12 +257,13 @@ To chart the maximum value of `system.memory.actual.used.bytes`, enter the follo
 .es(index=metricbeat-*, timefield='@timestamp', metric='max:system.memory.actual.used.bytes')
 ----------------------------------
 
+[role="screenshot"]
 image::images/timelion-conditional01.png[]
 {nbsp}
 
 [float]
 [[conditional-track-memory]]
-=== Track used memory
+==== Track used memory
 
 To track the amount of memory used, create two thresholds:
 
@@ -262,12 +275,13 @@ To track the amount of memory used, create two thresholds:
 <1> Timelion conditional logic for the _greater than_ operator. In this example, the warning threshold is 11.3GB (`11300000000`), and the severe threshold is 11.375GB (`11375000000`). If the threshold values are too high or low for your machine, adjust the values accordingly.
 <2> `if()` compares each point to a number. If the condition evaluates to `true`, adjust the styling. If the condition evaluates to `false`, use the default styling.
 
+[role="screenshot"]
 image::images/timelion-conditional02.png[]
 {nbsp}
 
 [float]
 [[conditional-determine-trend]]
-=== Determine the trend
+==== Determine the trend
 
 To determine the trend, create a new data series:
 
@@ -278,12 +292,13 @@ To determine the trend, create a new data series:
 
 <1> `mvavg()` calculates the moving average over a specified period of time. In this example, `.mvavg(10)` creates a moving average with a window of 10 data points.
 
+[role="screenshot"]
 image::images/timelion-conditional03.png[]
 {nbsp}
 
 [float]
 [[conditional-format-visualization]]
-=== Customize and format the visualization
+==== Customize and format the visualization
 
 Customize and format the visualization using functions:
 
@@ -298,6 +313,7 @@ Customize and format the visualization using functions:
 <4> `.lines()` changes the appearance of the chart lines. In this example, .lines(width=5) sets border width to `5`.
 <5> `.legend()` sets the position and style of the legend. For this example, `(columns=4, position=nw)` places the legend in the north west position of the visualization with four columns.
 
+[role="screenshot"]
 image::images/timelion-conditional04.png[]
 {nbsp}
 
diff --git a/docs/visualize/tsvb.asciidoc b/docs/visualize/tsvb.asciidoc
index b52066a71837..ff4160d1ac9d 100644
--- a/docs/visualize/tsvb.asciidoc
+++ b/docs/visualize/tsvb.asciidoc
@@ -1,5 +1,5 @@
 [[TSVB]]
-== Visualizing your data with TSVB
+== TSVB
 
 TSVB is a time series data visualizer that allows you to use the full power of the 
 Elasticsearch aggregation framework. With TSVB, you can combine an infinite 
@@ -7,6 +7,10 @@ number of aggregations to display complex data.
 
 NOTE: In Elasticsearch version 7.3.0 and later, the time series data visualizer is now referred to as TSVB instead of Time Series Visual Builder.
 
+[float]
+[[tsvb-visualization-types]]
+=== Types of TSVB visualizations
+
 TSVB comes with these types of visualizations:
 
 Time Series:: A histogram visualization that supports area, line, bar, and steps along with multiple y-axis.
@@ -47,7 +51,7 @@ To create a TSVB visualization, choose the data series you want to display, then
 
 [float]
 [[tsvb-data-series-options]]
-=== Configure the data series
+==== Configure the data series
 
 To create a single metric, add multiple data series with multiple aggregations.
 
@@ -85,7 +89,7 @@ By default, the data series are grouped by everything.
 
 [float]
 [[tsvb-panel-options]]
-=== Configure the panel
+==== Configure the panel
 
 Change the data that you want to display and choose the style options for the panel.
 
@@ -97,7 +101,7 @@ Change the data that you want to display and choose the style options for the pa
 
 [float]
 [[tsvb-add-annotations]]
-=== Add annotations
+==== Add annotations
 
 If you are using the Time Series visualization, add annotation data sources.
 
@@ -107,7 +111,7 @@ If you are using the Time Series visualization, add annotation data sources.
 
 [float]
 [[tsvb-enter-markdown]]
-=== Enter Markdown text
+==== Enter Markdown text
 
 Edit the source for the Markdown visualization.