updated discover with alt text (elastic#77660)

* Update context.asciidoc * Update document-data.asciidoc * Update field-filter.asciidoc * Update search.asciidoc * Update set-time-filter.asciidoc * Update viewing-field-stats.asciidoc * Update canvas-edit-workpads.asciidoc * Update canvas-expression-lifecycle.asciidoc * Update canvas-present-workpad.asciidoc * Update canvas-share-workpad.asciidoc * Update canvas-tutorial.asciidoc * Update docs/canvas/canvas-share-workpad.asciidoc * Update docs/canvas/canvas-share-workpad.asciidoc * Update docs/canvas/canvas-tutorial.asciidoc * Update docs/canvas/canvas-tutorial.asciidoc * Update docs/canvas/canvas-tutorial.asciidoc * Update docs/canvas/canvas-tutorial.asciidoc * Update docs/discover/search.asciidoc * Update docs/discover/set-time-filter.asciidoc * Update docs/discover/viewing-field-stats.asciidoc * Update docs/discover/field-filter.asciidoc * Update docs/discover/document-data.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> # Conflicts: # docs/canvas/canvas-edit-workpads.asciidoc # docs/canvas/canvas-present-workpad.asciidoc # docs/canvas/canvas-share-workpad.asciidoc
KOTungseth · Sep 28, 2020 · 7532cda · 7532cda
1 parent dea5a36
commit 7532cda
Show file tree

Hide file tree

Showing 11 changed files with 174 additions and 20 deletions.
diff --git a/docs/canvas/canvas-edit-workpads.asciidoc b/docs/canvas/canvas-edit-workpads.asciidoc
@@ -0,0 +1,136 @@
+[role="xpack"]
+[[edit-workpads]]
+== Edit workpads
+
+To create the look and feel that you want, apply format settings to the entire workpad, or individual elements.
+
+[float]
+[[create-variables]]
+=== Create variables
+
+When you frequently use copy and paste, create variables to easily reuse strings and patterns. For example, when you clone a large workpad and need to connect your elements to a new index, use variables to update 
+each element instead of updating them manually.
+
+. Create the variables.
+.. Click *Add a variable*. 
+.. Specify the variable options, then click *Save changes*.
+
+. Apply the variable.
+.. Copy the variable.
+.. Select the element you want to change, then open the expression editor. 
+.. Paste the variable.
+
+For example, to change the index pattern for a set of charts:
+
+Specify the variable options.
+
+[role="screenshot"]
+image::images/specify_variable_syntax.png[Image describing how to specify the variable syntax]
+
+Copy the variable, then apply it to each element you want to update in the *Expression editor*.
+
+[role="screenshot"]
+image::images/copy_variable_syntax.png[Image demonstrating expression editor]
+
+[float]
+[[apply-changes-to-the-entire-workpad]]
+=== Apply changes to the entire workpad
+
+With stylesheets, you can change the look of the entire workpad, including fonts, colors, layout, and more.
+
+To get started, enter the changes you want to make in the *Global CSS overrides* text editor, then click *Apply stylesheet*.
+
+For example, to change the background for the entire workpad, enter:
+
+[source,text]
+--------------------------------------------------
+.canvasPage {
+background-color: #3990e6;
+}
+--------------------------------------------------
+
+[float]
+[[change-the-element-settings]]
+=== Change the element settings
+
+Element settings enable you to change the display options at the element level. For example, use the element settings to change the dimensions, style, or location of an element.
+
+[float]
+[[change-the-display-options]]
+==== Change the display options
+
+Choose the display options for your elements. The options available depend on the element you select. 
+
+To change the element display options, click *Display*, then make your changes in the editor.
+
+To use CSS overrides:
+
+. Click *+* next to *Element style*, then select *CSS*. 
+. In the *CSS* text editor, enter the changes you want to make, then click *Apply stylesheet*.
+
+For example, to center an element, enter:
+
+[source,text]
+--------------------------------------------------
+.canvasRenderEl h1 {
+text.align: center;
+}
+--------------------------------------------------
+
+[float]
+[[clone-elements]]
+==== Clone elements
+To use an element with the same functionality and appearance in multiple places, clone the element.
+
+Select the element, then click *Edit > Clone*. 
+
+[role="screenshot"]
+image::images/clone_element.gif[Image showing how to clone elements]
+
+[float]
+[[move-and-resize-elements]]
+==== Move and resize elements
+
+Canvas provides you with many options to move and resize the elements on your workpad.
+
+* To move elements, click and hold the element, then drag to the new location.
+
+* To move elements by 1 pixel, select the element, press and hold Shift, then use your arrow keys.
+
+* To move elements by 10 pixels, select the element, then use your arrow keys.
+
+* To resize elements, click and drag the resize handles to the new dimensions.
+
+[float]
+[[edit-elements]]
+==== Edit elements
+
+The element editing options allow you to arrange and organize the elements on your workpad page.
+
+To align two or more elements:
+
+. Press and hold Shift, then select the elements you want to align.
+
+. Click *Edit > Alignment*, then select the alignment option.
+
+To distribute three or more elements:
+
+. Press and hold Shift, then select the elements you want to distribute.
+
+. Click *Edit > Distribution*, then select the distribution option.
+
+To reorder elements:
+
+. Select the element you want to reorder.
+
+. Click *Edit > Order*, then select the order option.
+
+[float]
+[[delete-elements]]
+==== Delete elements
+
+When you no longer need an element, delete it from your workpad.
+
+. Select the element you want to delete.
+
+. Click *Edit > Delete*.
diff --git a/docs/canvas/canvas-expression-lifecycle.asciidoc b/docs/canvas/canvas-expression-lifecycle.asciidoc
@@ -30,7 +30,7 @@ The filtered <<demodata_fn, demo data>> becomes the _context_ of the next functi
 
 Let’s look at another expression, which uses the same <<demodata_fn, demodata>> function, but instead produces a pie chart.
 
-image::images/canvas-functions-can-take-arguments-pie-chart.png[Pie Chart, height=400]
+image::images/canvas-functions-can-take-arguments-pie-chart.png[Pie chart showing output of demodata function]
 [source,text]
 ----
 filters
@@ -47,7 +47,7 @@ If the expression stopped there, it would produce a `pointseries` data type as t
 The end result is a simple pie chart that uses the default color palette, but the <<pie_fn, pie>> function can take additional arguments that control how it gets rendered. For example, you can provide a `hole` argument to turn your pie chart into a donut chart by changing the expression to:
 
 
-image::images/canvas-functions-can-take-arguments-donut-chart.png[Donut Chart, height=400]
+image::images/canvas-functions-can-take-arguments-donut-chart.png[Alternative output as donut chart]
 [source,text]
 ----
 filters
@@ -83,7 +83,7 @@ You can substitute one function for another to change the output. For example, y
 
 Let’s change that last pie chart into a bubble chart by replacing the <<pie_fn, pie>> function with the <<plot_fn, plot>> function. This is possible because both functions can accept a `pointseries` data type as their _context_. Switching the functions will work, but it won’t produce a useful visualization on its own since you don’t have the x-axis and y-axis defined. You will also need to modify the <<pointseries_fn, pointseries>> function to change its output. In this case, you can change the `size` argument to `y`, so the maximum price values are plotted on the y-axis, and add an `x` argument using the `@timestamp` field in the data to plot those values over time. This leaves you with the following expression and produces a bubble chart showing the max price of each state over time:
 
-image::images/canvas-change-your-expression-chart.png[Bubble Chart, height=400]
+image::images/canvas-change-your-expression-chart.png[Bubble Chart, with price along x axis, and time along y axis]
 [source,text]
 ----
 filters
@@ -95,7 +95,7 @@ filters
 
 Similar to the <<pie_fn, pie>> function, the <<plot_fn, plot>> function takes arguments that control the design elements of the visualization. As one example, passing a `legend` argument with a value of `false` to the function will hide the legend on the chart.
 
-image::images/canvas-change-your-expression-chart-no-legend.png[Bubble Chart Without Legend, height=400]
+image::images/canvas-change-your-expression-chart-no-legend.png[Bubble Chart Without Legend]
 [source,text,subs=+quotes]
 ----
 filters

diff --git a/docs/canvas/canvas-present-workpad.asciidoc b/docs/canvas/canvas-present-workpad.asciidoc
@@ -4,14 +4,32 @@
 
 When you are ready to present your workpad, use and enable the presentation options.
 
+. Configure the autoplay options.
+
+.. From the workpad menu, click *View > Autoplay settings*.
+
+.. Under *Change cycling interval*, select the interval you want to use, or *Set a custom interval*.
++
+[role="screenshot"]
+image::images/canvas-autoplay-interval.png[Element autoplay interval]
+
+. To enable autoplay, click *View > Turn autoplay on*.
+
+. To start your presentation, click *View > Enter fullscreen mode*.
++
+[role="screenshot"]
+image::images/canvas-fullscreen.png[Image showing how to enter fullscreen mode from view dropdown]
+
+. When you are ready to exit fullscreen mode, press the Esc (Escape) key.
+
 [float]
 [[view-fullscreen-mode]]
 ==== View your workpad in fullscreen mode
 
 Click the *Enter fullscreen mode* icon.
 
 [role="screenshot"]
-image::images/canvas-fullscreen.png[Fullscreen mode]
+image::images/canvas-zoom-controls.png[Zoom controls, also in view dropdown]
 
 [float]
 [[enable-autoplay]]

diff --git a/docs/canvas/canvas-share-workpad.asciidoc b/docs/canvas/canvas-share-workpad.asciidoc
@@ -15,7 +15,7 @@ Create a JSON file of your workpad that you can export outside of {kib}.
 . Select *Download as JSON*.
 +
 [role="screenshot"]
-image::images/canvas-export-workpad.png[Export single workpad]
+image::images/canvas-export-workpad.png[Export single workpad through JSON, from Share dropdown]
 
 Want to export multiple workpads? Go to the *Canvas workpads* view, select the workpads you want to export, then click *Export*.
 
@@ -32,7 +32,7 @@ For more information, refer to <<reporting-getting-started, Reporting from Kiban
 . Click *Generate PDF*.
 +
 [role="screenshot"]
-image::images/canvas-generate-pdf.gif[Generate PDF]
+image::images/canvas-generate-pdf.gif[Image showing how to generate a PDF]
 
 [float]
 [[create-workpad-URL]]
@@ -47,7 +47,7 @@ For more information, refer to <<automating-report-generation, Automating report
 . Click *Copy POST URL*.
 +
 [role="screenshot"]
-image::images/canvas-create-URL.gif[Create POST URL]
+image::images/canvas-create-URL.gif[Image showing how to create POST URL]
 
 [float]
 [[add-workpad-website]]
@@ -64,7 +64,7 @@ beta[] Canvas allows you to create _shareables_, which are workpads that you dow
 To make sure that your data remains secure, the data in the JSON file is not connected to {kib}. Canvas does not display elements that manipulate the data on the workpad.
 +
 [role="screenshot"]
-image::images/canvas-embed_workpad.gif[Share the workpad on a website]
+image::canvas/images/canvas-embed_workpad.gif[Image showing how to share the workpad on a website]
 +
 NOTE: Shareable workpads encode the current state of the workpad in a JSON file. When you make changes to the workpad, the changes do not appear in the shareable workpad on your website.
 

diff --git a/docs/canvas/canvas-tutorial.asciidoc b/docs/canvas/canvas-tutorial.asciidoc
@@ -34,7 +34,7 @@ The default Elastic logo image appears on your page.
 . To move the image, click and drag it to your preferred location.
 
 [role="screenshot"]
-image::images/canvas-image-element.png[]
+image::images/canvas-image-element.png[Image showing how to add the image element]
 
 You'll notice that the image is tagged as an asset, which allows you to reuse the image from *Manage assets*.
 
@@ -82,7 +82,7 @@ You're now looking at the raw data syntax that Canvas uses to display the elemen
 .. To update the number, click *Run*.
 
 [role="screenshot"]
-image::images/canvas-metric-element.png[]
+image::images/canvas-metric-element.png[Image showing changes to the Canvas workpad]
 
 [float]
 === Show off your data with charts
@@ -112,7 +112,7 @@ Although you used the Elasticsearch SQL data source for the metric and area char
 .. From the *Y-axis* drop-down lists, select *Value*, then select *taxless_total_price*.
 
 [role="screenshot"]
-image::images/canvas-chart-element.png[]
+image::images/canvas-chart-element.png[Image showing Canvas workpad with sample data graph]
 
 [float]
 === Show how your data changes over time
@@ -128,7 +128,7 @@ To focus your data on a specific time range, add a time filter to your workpad.
 .. To use the date time field from the sample data, enter `order_date` in the *Column* field, then click *Set*.
 
 [role="screenshot"]
-image::images/canvas-timefilter-element.png[]
+image::images/canvas-timefilter-element.png[Image showing Canvas workpad with filtered sample data graph]
 
 To see how the data changes, set the time filter to *Last 7 days*. As you change the time filter options, the metrics dynamically update.
 

diff --git a/docs/discover/context.asciidoc b/docs/discover/context.asciidoc
@@ -16,7 +16,7 @@ The anchor document is highlighted in blue.
 
 
 [role="screenshot"]
-image::images/Discover-ContextView.png[Context View]
+image::images/Discover-ContextView.png[Image showing context view feature, with anchor documents highlighted in blue]
 
 [float]
 [[filter-context]]

diff --git a/docs/discover/document-data.asciidoc b/docs/discover/document-data.asciidoc
@@ -44,7 +44,7 @@ immediately before and after your event.
 share the link for direct access to a particular document.
 
 [role="screenshot"]
-image::images/Expanded-Document.png[]
+image::images/Expanded-Document.png[Image showing expanded view, with JSON and table viewing options]
 
 
 [float]

diff --git a/docs/discover/field-filter.asciidoc b/docs/discover/field-filter.asciidoc
@@ -19,7 +19,7 @@ the field, the top 5 values for the field, and the percentage of documents
 that contain each value.
 +
 [role="screenshot"]
-image::images/filter-field.png[height=317]
+image::images/filter-field.png[Picture showing top 5 values for each field, and correspnding percentage of documents that contain each value]
 
 . Use the image:images/PositiveFilter.jpg[Positive Filter] icon to
 show only documents that contain that value,

diff --git a/docs/discover/search.asciidoc b/docs/discover/search.asciidoc
@@ -28,7 +28,7 @@ configure a refresh interval to periodically resubmit your searches to
 retrieve the latest results.
 
 [role="screenshot"]
-image::images/autorefresh-interval.png[]
+image::images/autorefresh-interval.png[Image showing what refresh interval option looks like. The configurable time interval is located in the dropdown]
 
 You can also manually refresh the search results by
 clicking the *Refresh* button.

diff --git a/docs/discover/set-time-filter.asciidoc b/docs/discover/set-time-filter.asciidoc
@@ -14,7 +14,7 @@ range in the histogram.
 Use the time filter to change the time range. By default, the time filter is set
 to the last 15 minutes.
 
-. Click image:images/time-filter-calendar.png[].
+. Click image:images/time-filter-calendar.png[Calendar icon].
 
 . Choose one of the following:
 
@@ -53,4 +53,4 @@ when you hover over a valid start point.
 * Click the dropdown, then select an interval.
 
 [role="screenshot"]
-image::images/Histogram-Time.png[Time range selector in Histogram]
+image::images/Histogram-Time.png[Time range selector in Histogram dropdown]
diff --git a/docs/discover/viewing-field-stats.asciidoc b/docs/discover/viewing-field-stats.asciidoc
@@ -11,4 +11,4 @@ they are available in the side bar if you uncheck "Hide missing fields".
 
 To view field data statistics, click the name of a field in the fields list.
 
-image:images/filter-field.png[Field Statistics,height=317]
+image:images/filter-field.png[Fields list that displays the top five search results]
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,4 +11,4 @@ they are available in the side bar if you uncheck "Hide missing fields".

		To view field data statistics, click the name of a field in the fields list.

		image:images/filter-field.png[Field Statistics,height=317]
		image:images/filter-field.png[Fields list that displays the top five search results]