[DOCS] Canvas elements (#42473)

* [DOCS] Canvas elements content

* Data source build out

* Display options and actions

* Reorganization, cycle interval, and organization actions

* Reorganized content

* Reorganization and clean up

* Added images

* Review comments pt 1

* Review comments pt 2

* Review comments pt 2

* Review comments pt 3

* Change on to in

* xpack

* Comments from Catherine

* Export image

* Final clean up

docs/canvas.asciidoc

@@ -1,4 +1,3 @@
-
 [role="xpack"]
 [[canvas]]
 = Canvas
@@ -28,10 +27,18 @@ For a quick overview of Canvas, watch link:https://www.youtube.com/watch?v=ZqvF_
 
 --
 
-include::canvas/canvas-getting-started.asciidoc[]
+include::canvas/canvas-tutorial.asciidoc[]
 
 include::canvas/canvas-workpad.asciidoc[]
 
+include::canvas/canvas-elements.asciidoc[]
+
+include::canvas/canvas-present-workpad.asciidoc[]
+
+include::canvas/canvas-share-workpad.asciidoc[]
+
+//include::canvas/canvas-expressions.asciidoc[]
+
 include::canvas/canvas-function-reference.asciidoc[]
 
 include::canvas/canvas-tinymath-functions.asciidoc[]

docs/canvas/canvas-elements.asciidoc

@@ -0,0 +1,268 @@
+[role="xpack"]
+[[element-intro]]
+== Showcase your data with elements
+
+Canvas _elements_ are the building blocks of your workpad. With elements, you can combine images, text, and visualizations to tell a story about your data.
+
+When you add elements to your workpad, you can:
+
+* <<connect-element-data,Connect the elements to your live data>>
+
+* <<configure-display-options,Choose how you want the element to appear on your workpad>>
+
+* <<configure-auto-refresh-interval,Change the data refresh interval>>
+
+* <<organize-element,Move and arrange elements on your workpad>>
+
+* <<element-save,Save your elements>>
+
+[float]
+[[add-canvas-element]]
+=== Add elements to your workpad
+
+Choose the elements to display on your workpad, then familiarize yourself with the element using the preconfigured demo data.
+
+. Click *Add element*.
+
+. In the *Elements* window, select the element you want to use. 
++
+[role="screenshot"]
+image::images/canvas-element-select.gif[Canvas elements]
+
+. Play around with the default settings and see what the element can do. 
+
+TIP: Want to use a different element? You can delete the element by selecting it, clicking the *Element options* icon in the top right corner, then selecting *Delete*.
+
+[float]
+[[connect-element-data]]
+=== Connect the element to your data
+
+When you are ready to move on from the demo data, connect the element to your own data.
+
+. Make sure that the element is selected, then select *Data*.
+
+. Click *Change your data source*.
+
+[float]
+[[elasticsearch-sql-data-source]]
+==== Connect to Elasticsearch SQL
+
+Access your data in Elasticsearch using the Elasticsearch SQL syntax.
+
+Unfamiliar with writing Elasticsearch SQL queries? For more information, refer to {ref}/sql-spec.html[SQL language].
+
+. Click *Elasticsearch SQL*.
+
+. In the *Elasticearch SQL query* box, enter your query, then *Preview* it.
+
+. If everything looks correct, *Save* it. 
+
+[float]
+[[elasticsearch-raw-doc-data-source]]
+==== Connect to Elasticsearch raw data
+
+Use the Lucene query syntax to use your raw data in Elasticsearch.
+
+For for more information about the Lucene query string sytax, refer to <<lucene-query,Lucene Query Syntax>>.
+
+. Click *Elasticsearch raw documents*.
+
+. In the *Index* field, enter the index pattern that you want to display. 
+
+. From the *Fields* dropdown, select the associated fields you want to display.
+
+. To sort the data, select an option from the *Sort Field* and *Sort Order* dropdowns.
+
+. For more targeted queries, enter a *Query* using the Lucene query string syntax. 
+
+. *Preview* the query. 
+
+. If your query looks correct, *Save* it. 
+
+[float]
+[[timelion-data-source]]
+==== Connect to Timelion
+
+Use <<timelion,Timelion>> queries to use your time series data. 
+
+. Click *Timelion*.
+
+. Enter a *Query* using the Lucene query string syntax. 
++
+For for more information about the Lucene query string syntax, refer to <<lucene-query,Lucene Query Syntax>>.
+
+. Enter the *Interval*, then *Preview* the query.
+
+. If your query looks correct, *Save* it. 
+
+[float]
+[[configure-display-options]]
+=== Choose the display options
+
+Choose how you want the elements to appear on your workpad.
+
+[float]
+[[data-display]]
+==== Specify how to display the data
+
+When you connect your element to a data source, the element often appears as a warning. To remove the error, specify the display options.
+
+. Click *Display*
+
+. Change the display options for the element. 
+
+[float]
+[[element-display-container]]
+==== Change the appearance of the element container
+
+Further define the appearance of the element container and border.
+
+. Next to *Element style*, click *+*, then select *Container style*.
+
+. Expand *Container style*.
+
+. Change the *Appearance* and *Border* options.
+
+[float]
+[[apply-element-styles]]
+==== Apply a set of styles
+
+To make your element look exactly the way you want, apply CSS overrides.
+
+. Next to *Element style*, click *+*, then select *CSS*.
+
+. Enter the *CSS*. For example, to center the Markdown element, enter:
++
+[source,js]
+--------------------------------------------------
+.canvasRenderEl h1 {
+text.align: center;
+}
+--------------------------------------------------
+
+. Click *Apply stylesheet*.
+
+[float]
+[[configure-auto-refresh-interval]]
+==== Change the data auto-refresh interval
+
+Increase or decrease how often your data refreshes on your workpad.
+
+. In the top left corner, click the *Control settings* icon.
+
+. Under *Change auto-refresh interval*, select the interval you want to use.
++
+[role="screenshot"]
+image::images/canvas-refresh-interval.png[Element data refresh interval]
+
+TIP: To manually refresh the data, click the *Refresh data* icon. 
+
+[float]
+[[organize-element]]
+=== Organize the elements on your workpad
+
+Choose where you want the elements to appear on your workpad.
+
+[float]
+[[move-canvas-elements]]
+==== Move elements
+
+Move the element to a preferred location on your workpad. As you move the element, notice the alignment lines that appear to help you place the element exactly where you want it.
+
+* Click and drag the element to your preferred location.
+
+* To move the element by 1 pixel, select the element, press and hold Shift, then use your arrow keys.
+
+* To move the element by 10 pixels, select the element, then use your arrow keys.
+
+[float]
+[[resize-canvas-elements]]
+==== Resize elements
+
+Make your elements bigger or smaller than the default size.
+
+. Select the element.
+
+. Click and drag the resize handles to the size you want.
+
+[float]
+[[align-canvas-elements]]
+==== Align elements
+
+Align two or more elements on your workpad.
+
+. Press and hold Shift, then select the elements you want to align.
+
+. Click the *Element options* icon in the top right corner, then select *Align elements*.
+
+. From the *Alignment* menu, select how you want to align the elements on the workpad.
++
+[role="screenshot"]
+image::images/canvas-align-elements.gif[Align elements]
+
+[float]
+[[distribute-canvas-elements]]
+==== Distribute elements
+
+Distribute three or more elements on your workpad.
+
+. Press and hold Shift, then select the elements you want to distribute.
+
+. Click the *Element options* icon in the top right corner, then select *Distribute elements*.
+
+. From the *Distribution* menu, select how you want to distribute the elements on the workpad.
++
+[role="screenshot"]
+image::images/canvas-distribute-elements.gif[Distribute elements]
+
+[float]
+[[change-element-order]]
+==== Change the element order
+
+Change the order of how the elements are displayed on your workpad.
+
+. Select an element.
+
+. In the top right corder, click the *Element options* icon. 
+
+. Select *Order*, then select the order that you want the element to appear.
+
+[float]
+[[zoom-in-out]]
+=== Use the zoom options
+
+In the upper left corner, click the *Zoom controls* icon, then select one of the options.
+
+[role="screenshot"]
+image::images/canvas-zoom-controls.png[Zoom controls]
+
+[float]
+[[element-save]]
+=== Save elements
+
+After you have made changes to elements, save them so that you can reuse them across all of your workpads.
+
+. Select the element that you want to save.
++
+To save a group of elements, press and hold Shift, then select the elements you want to save.
+
+. Click the *Save as new element* icon.
+
+. In the *Create new element* window, enter a *Name*.
+
+. Enter an optional *Description*, then click *Save*.
+
+. To access the element, click *Add element*, then select *My elements*.
+
+[float]
+[[add-more-pages]]
+=== Add pages
+
+When you have run out of room on your workpad page, add more pages.
+
+. Click *Page 1*, then click *+*.
+
+. On the *Page* editor panel on the right, select the page transition from the *Transition* dropdown. 
++
+[role="screenshot"]
+image::images/canvas-add-pages.gif[Add pages]

docs/canvas/canvas-expressions.asciidoc

@@ -0,0 +1,39 @@
+[[canvas-expression-editor]]
+=== Customize your element with the expression editor
+
+Each element is backed by an expression that represents the element style and data. To further define the appearance and behavior of the element, use the expression editor.
+
+. In the lower right corner, click *Expression editor*.
+
+. Edit the style and data parts of the expression that you want to change. 
+
+. Click *Run*.
+
+. If you like what you see, click *Close*.
+
+For information about the Canvas expression language, see <<canvas-function-reference,Canvas function reference>>.
+
+//Insert expression video.
+
+[float]
+[[canvas-expression-editor-example]]
+=== Example: Using the expression editor
+
+Build a complex element using expressions. 
+
+```
+image mode="contain" dataurl={
+asset {
+filters | essql
+query="SELECT host,response
+FROM kibana_sample_data_logs
+WHERE host='artifacts.elastic.co'
+ORDER BY timestamp DESC
+LIMIT 1"|
+alterColumn "response" type="number" |
+getCell "response" |
+if {compare lt to=400} then="asset-0a807073-d056-4c7b-9bf4-225b71e47243" else="asset-1343672d-7c02-4402-929e-0f8fef69cddd"
+}
+} | render
+
+```

docs/canvas/canvas-present-workpad.asciidoc

@@ -0,0 +1,27 @@
+[role="xpack"]
+[[canvas-present-workpad]]
+== Present your workpad
+
+When you are ready to present your workpad, use and enable the presentation options.
+
+[float]
+[[view-fullscreen-mode]]
+=== View your workpad in fullscreen mode
+
+In the upper left corner, click the *Enter fullscreen mode* icon.
+
+[role="screenshot"]
+image::images/canvas-fullscreen.png[Fullscreen mode]
+
+[float]
+[[enable-autoplay]]
+=== Enable autoplay 
+
+Automatically cycle through your workpads pages in fullscreen mode.
+
+. In the upper left corner, click the *Control settings* icon.
+
+. Under *Change cycling interval*, select the interval you want to use.
++
+[role="screenshot"]
+image::images/canvas-refresh-interval.png[Element data refresh interval]