[DOCS] Updates Canvas docs with new menus (#66061) (#68169)

* [DOCS] Updates for Canvas menus

* Image set up

* Update docs/canvas/canvas-share-workpad.asciidoc

Co-authored-by: Catherine Liu <catherineqliu@outlook.com>

* Update docs/canvas/canvas-present-workpad.asciidoc

Co-authored-by: Catherine Liu <catherineqliu@outlook.com>

* Update docs/canvas/canvas-tutorial.asciidoc

Co-authored-by: Catherine Liu <catherineqliu@outlook.com>

* [DOCS] Adds Catherine's images and minor updates to content

* Final images and clean up

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Catherine Liu <catherineqliu@outlook.com>
# Conflicts:
#	docs/images/canvas-fullscreen.png
#	docs/images/canvas-zoom-controls.png

docs/canvas/canvas-elements.asciidoc

@@ -27,36 +27,38 @@ By default, most of the elements you create use demo data until you change the d
 
 * *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. Pages and workpads often contain multiple data sources.
+
 [float]
 [[canvas-add-object]]
 ==== Add a saved object
 
-Add a <<managing-saved-objects,saved object>>, then customize it to fit your display needs.
+Add <<managing-saved-objects,saved objects>> to your workpad, such as maps and visualizations.
 
-. Click *Embed object*.
+. Click *Add element > Add from Visualize Library*.
 
-. Select the object you want to add.
+. Select the saved object you want to add.
 +
 [role="screenshot"]
 image::images/canvas-map-embed.gif[]
 
 . To use the customization options, click the panel menu, then select one of the following options:
 
-* *Edit map* &mdash; Opens <<maps,Maps>> so that you can edit the original map.
+* *Edit map* &mdash; Opens <<maps,Maps>> or <<visualize,Visualize>> so that you can edit the original saved object.
 
-* *Customize panel* &mdash; Specifies the object title options.
+* *Edit panel title* &mdash; Adds a title to the saved object.
+
+* *Customize time range* &mdash; Exposes a time filter dedicated to the saved object.
 
 * *Inspect* &mdash; Allows you to drill down into the element data.
 
-* *Customize time range* &mdash; Exposes a time filter dedicated to the map.
-
 [float]
 [[canvas-add-image]]
 ==== Add your own image
 
 To personalize your workpad, add your own logos and graphics.
 
-. Click *Manage assets*.
+. Click *Add element > Manage assets*.
 
 . On the *Manage workpad assets* window, drag and drop your images.
 
@@ -83,40 +85,25 @@ Move and resize your elements to meet your design needs.
 [[format-canvas-elements]]
 ==== Format elements
 
-Align, distribute, and reorder elements for consistency and readability across your workpad pages.
+For consistency and readability across your workpad pages, align, distribute, and reorder elements.
 
-Access the align, distribute, and reorder options by clicking the *Element options* icon.
-
-[role="screenshot"]
-image::images/canvas_element_options.png[]
-
-To align elements:
+To align two or more elements:
 
 . Press and hold Shift, then select the elements you want to align.
 
-. Click the , then select *Group*.
+. Click *Edit > Alignment*, then select the alignment option.
 
-. Click the *Element options* icon, then select *Alignment*.
-
-. Select the alignment option.
-
-To distribute elements:
+To distribute three or more elements:
 
 . Press and hold Shift, then select the elements you want to distribute.
 
-. Click the *Element options* icon, then select *Group*.
-
-. Click the *Element options* icon, then select *Distribution*.
-
-. Select the distribution option.
+. Click *Edit > Distribution*, then select the distribution option.
 
 To reorder elements:
 
 . Select the element you want to reorder.
 
-. Click the *Element options* icon, then select *Order*.
-
-. Select the order option.
+. Click *Edit > Order*, then select the order option.
 
 [float]
 [[data-display]]
@@ -157,14 +144,14 @@ text.align: center;
 
 To use the elements across all workpads, save the elements.
 
-When you're ready to save your element, select the element, then click the *Save as new element* icon.
+When you're ready to save your element, select the element, then click *Edit > Save as new element*.
 
 [role="screenshot"]
 image::images/canvas_save_element.png[]
 
-To save a group of elements, press and hold Shift, then select the elements you want to save.
+To save a group of elements, press and hold Shift, select the elements you want to save, then click *Edit > Save as new element*.
 
-To access your saved elements, click *Add element*, then select *My elements*.
+To access your saved elements, click *Add element > My elements*.
 
 [float]
 [[delete-elements]]
@@ -174,9 +161,7 @@ When you no longer need an element, delete it from your workpad.
 
 . Select the element you want to delete.
 
-. Click the *Element options* icon.
+. Click *Edit > Delete*.
 +
 [role="screenshot"]
 image::images/canvas_element_options.png[]
-
-. Select *Delete*.

docs/canvas/canvas-present-workpad.asciidoc

@@ -4,24 +4,20 @@
 
 When you are ready to present your workpad, use and enable the presentation options.
 
-[float]
-[[view-fullscreen-mode]]
-==== View your workpad in fullscreen mode
+. Configure the autoplay options.
 
-Click the *Enter fullscreen mode* icon.
+.. 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[Fullscreen mode]
 
-[float]
-[[enable-autoplay]]
-==== Enable autoplay 
-
-Automatically cycle through your workpads pages in fullscreen mode.
-
-. 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]
+. When you are ready to exit fullscreen mode, press the Esc (Escape) key.

docs/canvas/canvas-share-workpad.asciidoc

@@ -10,14 +10,12 @@ When you've finished your workpad, you can share it outside of {kib}.
 
 Create a JSON file of your workpad that you can export outside of {kib}.
 
-. From your workpad, click the *Share workpad* icon.
+Click *Share > Download as JSON*.
 
-. Select *Download as JSON*.
-+
 [role="screenshot"]
 image::images/canvas-export-workpad.png[Export single workpad]
 
-Want to export multiple workpads? Go to the *Canvas workpads* view, select the workpads you want to export, then click *Export*.
+Want to export multiple workpads? Go to the *Canvas* home page, select the workpads you want to export, then click *Export*.
 
 [float]
 [[create-workpad-pdf]]
@@ -25,69 +23,43 @@ Want to export multiple workpads? Go to the *Canvas workpads* view, select the w
 
 If you have a license that supports the {report-features}, you can create a PDF copy of your workpad that you can save and share outside {kib}.
 
-For more information, refer to <<reporting-getting-started, Reporting from Kibana>>.
+Click *Share > PDF reports > Generate PDF*.
 
-. From your workpad, click the *Share workpad* icon, then select *PDF reports*.
-
-. Click *Generate PDF*.
-+
 [role="screenshot"]
 image::images/canvas-generate-pdf.gif[Generate PDF]
 
+For more information, refer to <<reporting-getting-started, Reporting from Kibana>>.
+
 [float]
 [[create-workpad-URL]]
 ==== Create a POST URL
 
 If you have a license that supports the {report-features}, you can create a POST URL that you can use to automatically generate PDF reports using Watcher or a script.
 
-For more information, refer to <<automating-report-generation, Automating report generation>>.
+Click *Share > PDF reports > Copy POST URL*.
 
-. From your workpad, click the *Share workpad* icon, then select *PDF reports*.
-
-. Click *Copy POST URL*.
-+
 [role="screenshot"]
 image::images/canvas-create-URL.gif[Create POST URL]
 
+For more information, refer to <<automating-report-generation, Automating report generation>>.
+
 [float]
 [[add-workpad-website]]
 ==== Share the workpad on a website
 
 beta[] Canvas allows you to create _shareables_, which are workpads that you download and securely share on any website. To customize the behavior of the workpad on your website, you can choose to autoplay the pages or hide the workpad toolbar.
 
-. From your workpad, click the *Share this workpad* icon, then select *Share on a website*.
+. Click *Share > Share on a website*.
 
-. On the *Share on a website* pane, follow the instructions.
+. Follow the *Share on a website* instructions.
 
 . To customize the workpad behavior to autoplay the pages or hide the toolbar, use the inline parameters.
 +
 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[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.
 
-[float]
-[[change-the-workpad-settings]]
-==== Change the settings
-
-After you've added the workpad to your website, you can change the autoplay and toolbar settings.
-
-To change the autoplay settings:
-
-. Click the settings icon.
-
-. Click *Auto Play*, then change the settings.
-+
-[role="screenshot"]
-image::images/canvas_share_autoplay_480.gif[Autoplay settings]
-
-To change the toolbar settings:
-
-. Click the settings icon.
-
-. Click *Toolbar*, then change the settings.
-+
-[role="screenshot"]
-image::images/canvas_share_hidetoolbar_480.gif[Hide toolbar settings]
+. To change the settings, click the settings icon, then choose the settings you want to use.

docs/canvas/canvas-tutorial.asciidoc

@@ -10,76 +10,64 @@ To get up and running with Canvas, use the following tutorial where you'll creat
 For this tutorial, you'll need to add the <<add-sample-data, Sample eCommerce orders data>>.
 
 [float]
-=== Create and personalize your workpad
+=== Create your workpad
 
 Your first step to working with Canvas is to create a workpad.
 
-. Open *Canvas*.
+. Open the menu, then click *Kibana > Canvas*.
 
-. Click *Create workpad*.
-
-. To add a *Name* for your workpad, use the editor. For example, `My Canvas Workpad`.
+. On the *Canvas workpads* page, click *Create workpad*.
 
 [float]
 === Customize your workpad with images
 
 To customize your workpad to look the way you want, add your own images.
 
-. Click *Add element*, then click *Image*.
+. Click *Add element > Image > Image*.
 +
-The default Elastic logo image appears on your page.
+The default Elastic logo image appears on the page.
 
 . To replace the Elastic logo with your own image, select the image, then use the editor.
 
-. To move the image, click and drag it to your preferred location.
-
 [role="screenshot"]
 image::images/canvas-image-element.png[]
 
-You'll notice that the image is tagged as an asset, which allows you to reuse the image from *Manage assets*.
-
 [float]
 === Customize your data with metrics
 
 Customize your data by connecting it to the Sample eCommerce orders data.
 
-. Click *Add element*, then click *Metric*.
+. Click *Add element > Chart > Metric*.
 +
-By default, the *Metric* element is connected to a demo data source, which enables you to experiment with the element before you connect it to your own data source.
+By default, the element is connected to the demo data, which enables you to experiment with the element before you connect it to your own data source.
 
-. To connect the element to your own data source, make sure that the element is selected, then click *Data*.
+. To connect the element to your own data source, make sure that the element is selected, click *Data > Demo data > Elasticsearch SQL*.
 
-.. Click *Change your data source*, then click *Elasticsearch SQL*.
-
-.. In the *Elasticsearch SQL query* field, enter the following query:
+.. In the *Query* field, enter the following:
 +
 `SELECT sum(taxless_total_price) AS sum_total_price FROM "kibana_sample_data_ecommerce"`
-+
-The query selects the total price field and sets it to the sum_total_price field. These fields are pulled from the kibana_sample_data_ecommerce index that you installed.
 
-.. To verify that the data is correct, click *Preview*. If you like what you see, click *Save*.
+.. Click *Save*.
 +
-At this point, the element displays an error.
+The query selects the total price field and sets it to the sum_total_price field. All fields are pulled from the kibana_sample_data_ecommerce index.
 
-. Specify how to process and display the data.
+. At this point, the element appears as an error, so you need to change the element display options.
 
 .. Click *Display*
 
-.. Under *Number*, select *Value* from the function drop-down list, then select *sum_total_price* from the column drop-down list.
+.. From the *Value* drop-down lists, make sure that *Unique* is selected, then select *sum_total_price*.
 
 .. Change the *Label* to `Total sales`.
-+
-You'll notice that the error is gone, but the number could use some formatting.
 
-. To format the number, use the Canvas expression language.
+. The error is gone, but the element could use some formatting. To format the number, use the Canvas expression language.
 
 .. Click *Expression editor*.
 +
 You're now looking at the raw data syntax that Canvas uses to display the element.
 
-.. Look for `math "sum_total_price"`, then add `| formatNumber "$0a"`.
+.. Change `metricFormat="0,0.[000]"` to `metricFormat="$0a"`.
 
-.. To update the number, click *Run*.
+.. Click *Run*.
 
 [role="screenshot"]
 image::images/canvas-metric-element.png[]
@@ -89,21 +77,17 @@ image::images/canvas-metric-element.png[]
 
 To show what your data can do, add charts, graphs, progress monitors, and more to your workpad.
 
-. Click *Add element*, then click *Area chart*.
+. Click *Add element > Chart > Area*.
 
-. To connect the element to your own data source, make sure that the element is selected, then click *Data*.
+. Make sure that the element is selected, then click *Data > Demo data > Elasticsearch SQL*.
 
-.. Click *Change your data source*, then click *Elasticsearch SQL*.
-
-.. To obtain the taxless total price by date, enter the following into the *Elasticsearch SQL query* field:
+.. To obtain the taxless total price by date, enter the following in the *Query* field:
 +
 `SELECT order_date, taxless_total_price FROM "kibana_sample_data_ecommerce" ORDER BY order_date`
-+
-Although you used the Elasticsearch SQL data source for the metric and area chart elements, each element can display a different data source. Pages and workpads often contain multiple data sources.
 
-.. To verify that the data is correct, click *Preview*. If you like what you see, click *Save*.
+.. Click *Save*.
 
-. Specify how to display the data.
+. Change the display options.
 
 .. Click *Display*
 
@@ -117,34 +101,20 @@ image::images/canvas-chart-element.png[]
 [float]
 === Show how your data changes over time
 
-To focus your data on a specific time range, add a time filter to your workpad.
+To focus your data on a specific time range, add the time filter.
 
-. Click *Add element*, then click *Time filter*.
+. Click *Add element > Filter > Time filter*.
 
-. Specify how to display the data.
+. Click *Display*
 
-.. Click *Display*
-
-.. To use the date time field from the sample data, enter `order_date` in the *Column* field, then click *Set*.
+. 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[]
 
-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.
+To see how the data changes, set the time filter to *Last 7 days*. As you change the time filter options, the elements automatically update.
 
-Your workpad is now complete! From the workpad menu, use the icons to:
-
-* Configure the refresh rate for your data
-
-* Refresh the data that displays on your workpad
-
-* Display your workpad in fullscreen mode
-
-* Control the zoom options
-
-* Share your workpad
-
-* Hide the editing controls
+Your workpad is now complete!
 
 [float]
 === Next steps

docs/canvas/canvas-workpad.asciidoc

@@ -20,9 +20,7 @@ To create a workpad, choose one of the following options:
 
 To use the background colors, images, and data of your choice, start with a blank workpad.
 
-. Open *Canvas*.
-
-. On the *Canvas workpads* view, click *Create workpad*.
+. On the *Canvas workpads* page, click *Create workpad*.
 
 . Add a *Name* to your workpad.
 
@@ -35,7 +33,7 @@ For example, click *720p* for a traditional presentation layout.
 . Click the *Background color* picker, then select the background color for your workpad.
 +
 [role="screenshot"]
-image::images/canvas-background-color-picker.gif[Canvas color picker]
+image::images/canvas-background-color-picker.png[Canvas color picker]
 
 [float]
 [[canvas-template-workpad]]
@@ -43,9 +41,7 @@ image::images/canvas-background-color-picker.gif[Canvas color picker]
 
 If you're unsure about where to start, you can use one of the preconfigured templates that come with Canvas.
 
-. Open *Canvas*.
-
-. On the *Canvas workpads* view, select *Templates*.
+. On the *Canvas workpads* page, select *Templates*.
 
 . Click the preconfigured template that you want to use.
 
@@ -57,9 +53,7 @@ If you're unsure about where to start, you can use one of the preconfigured temp
 
 When you want to use a workpad that someone else has already started, import the JSON file into Canvas.
 
-. Open *Canvas*.
-
-. On the *Canvas workpads* view, click and drag the file to the *Import workpad JSON file* field.
+To import a workpad, go to the *Canvas workpads* page, then click and drag the file to the *Import workpad JSON file* field.
 
 [float]
 [[sample-data-workpad]]
@@ -96,23 +90,27 @@ background-color: #3990e6;
 [[configure-auto-refresh-interval]]
 === Change the auto-refresh interval
 
-Increase or decrease how often the data refreshes on your workpad.
+Change how often the data refreshes on your workpad.
 
-. In the top left corner, click the *Control settings* icon.
+. Click *View > Auto refresh settings*.
 
-. Under *Change auto-refresh interval*, select the interval you want to use.
+. Select the interval you want to use, or *Set a custom interval*.
 +
 [role="screenshot"]
 image::images/canvas-refresh-interval.png[Element data refresh interval]
-
-TIP: To manually refresh the data, click the *Refresh data* icon.
++
+To manually refresh the data, click image:canvas/images/canvas-refresh-data.png[].
 
 [float]
 [[zoom-in-out]]
 === Use the zoom options
 
-In the upper left corner, click the *Zoom controls* icon, then select one of the options.
+To get a closer look at a portion of your workpad, use the zoom options.
 
+. Click *View > Zoom*.
+
+. Select the zoom option.
++
 [role="screenshot"]
 image::images/canvas-zoom-controls.png[Zoom controls]
 

docs/user/canvas.asciidoc

@@ -5,7 +5,7 @@
 [partintro]
 --
 
-Canvas is a data visualization and presentation tool that sits within Kibana. With Canvas, you can pull live data directly from Elasticsearch, and combine the data with colors, images, text, and your imagination to create dynamic, multi-page, pixel-perfect displays. If you are a little bit creative, a little bit technical, and a whole lot curious, then Canvas is for you.
+Canvas is a data visualization and presentation tool that sits within {kib}. With Canvas, you can pull live data directly from {es}, and combine the data with colors, images, text, and your imagination to create dynamic, multi-page, pixel-perfect displays. If you are a little bit creative, a little bit technical, and a whole lot curious, then Canvas is for you.
 
 With Canvas, you can:
 
@@ -13,9 +13,7 @@ With Canvas, you can:
 
 * Customize your workpad with your own visualizations, such as images and text.
 
-* Customize your data by pulling it directly from Elasticsearch.
-
-* Show off your data with charts, graphs, progress monitors, and more.
+* Pull your data directly from Elasticsearch, then show it off with charts, graphs, progress monitors, and more.
 
 * Focus the data you want to display with filters.