[DOCS] Canvas refresh for 7.10 (#80017)

This commit is contained in:
Kaarina Tungseth 2020-10-08 12:04:59 -05:00 committed by GitHub
parent 79a2b6463a
commit 8bea1727e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 30 additions and 37 deletions

View file

@ -10,7 +10,7 @@ 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}. Create a JSON file of your workpad that you can export outside of {kib}.
Click *Share > Download as JSON*. To begin, click *Share > Download as JSON*.
[role="screenshot"] [role="screenshot"]
image::images/canvas-export-workpad.png[Export single workpad through JSON, from Share dropdown] image::images/canvas-export-workpad.png[Export single workpad through JSON, from Share dropdown]
@ -23,7 +23,7 @@ Want to export multiple workpads? Go to the *Canvas* home page, select the workp
If you have a subscription that supports the {report-features}, you can create a PDF copy of your workpad that you can save and share outside {kib}. If you have a subscription that supports the {report-features}, you can create a PDF copy of your workpad that you can save and share outside {kib}.
Click *Share > PDF reports > Generate PDF*. To begin, click *Share > PDF reports > Generate PDF*.
[role="screenshot"] [role="screenshot"]
image::images/canvas-generate-pdf.gif[Image showing how to generate a PDF] image::images/canvas-generate-pdf.gif[Image showing how to generate a PDF]
@ -36,7 +36,7 @@ For more information, refer to <<reporting-getting-started, Reporting from Kiban
If you have a subscription that supports the {report-features}, you can create a POST URL that you can use to automatically generate PDF reports using <<watcher-ui,Watcher>> or a script. If you have a subscription that supports the {report-features}, you can create a POST URL that you can use to automatically generate PDF reports using <<watcher-ui,Watcher>> or a script.
Click *Share > PDF reports > Copy POST URL*. To begin, click *Share > PDF reports > Copy POST URL*.
[role="screenshot"] [role="screenshot"]
image::images/canvas-create-URL.gif[Image showing how to create POST URL] image::images/canvas-create-URL.gif[Image showing how to create POST URL]

View file

@ -2,7 +2,7 @@
[[canvas-tutorial]] [[canvas-tutorial]]
== Tutorial: Create a workpad for monitoring sales == Tutorial: Create a workpad for monitoring sales
To get up and running with Canvas, use the following tutorial where you'll create a workpad for monitoring sales at an eCommerce store. To get up and running with Canvas, add the Sample eCommerce orders data, then use the data to create a workpad for monitoring sales at an eCommerce store.
[float] [float]
=== Before you begin === Before you begin
@ -114,18 +114,16 @@ image::images/canvas-timefilter-element.png[Image showing Canvas workpad with fi
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. 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! Your workpad is complete!
[float] [float]
=== Next steps === What's next?
Now that you know the Canvas basics, you're ready to explore on your own. Now that you know the Canvas basics, you're ready to explore on your own.
Here are some things to try: Here are some things to try:
* Play with the {kibana-ref}/add-sample-data.html[sample Canvas workpads]. * Play with the {kibana-ref}/add-sample-data.html[sample Canvas workpads].
* Build presentations of your own live data with <<create-workpads,workpads>>. * Build presentations of your own data with <<create-workpads,workpads>>.
* Learn more about <<add-canvas-elements,elements>> &mdash; the building blocks of your workpad.
* Deep dive into the {kibana-ref}/canvas-function-reference.html[expression language and functions] that drive Canvas. * Deep dive into the {kibana-ref}/canvas-function-reference.html[expression language and functions] that drive Canvas.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 192 KiB

After

Width:  |  Height:  |  Size: 119 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 217 KiB

After

Width:  |  Height:  |  Size: 98 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 120 KiB

Before After
Before After

Binary file not shown.

Before

Width:  |  Height:  |  Size: 159 KiB

After

Width:  |  Height:  |  Size: 78 KiB

Before After
Before After

View file

@ -17,6 +17,8 @@ With Canvas, you can:
* Focus the data you want to display with filters. * Focus the data you want to display with filters.
To begin, open the menu, then go to *Canvas*.
[role="screenshot"] [role="screenshot"]
image::images/canvas-gs-example.png[Getting started example] image::images/canvas-gs-example.png[Getting started example]
@ -26,7 +28,8 @@ For a quick overview of Canvas, watch link:https://www.youtube.com/watch?v=ZqvF_
[[create-workpads]] [[create-workpads]]
== Create workpads == Create workpads
A _workpad_ provides you with a space where you can build presentations of your live data. A _workpad_ provides you with a space where you can build presentations of your live data. With Canvas,
you can create a workpad from scratch, start with a preconfigured workpad, import an existing workpad, or use a sample data workpad.
[float] [float]
[[start-with-a-blank-workpad]] [[start-with-a-blank-workpad]]
@ -34,19 +37,15 @@ A _workpad_ provides you with a space where you can build presentations of your
To use the background colors, images, and data of your choice, start with a blank workpad. To use the background colors, images, and data of your choice, start with a blank workpad.
. Open the menu, then go to *Canvas*. . On the *Canvas workpads* page, click *Create workpad*.
. On the *Canvas workpads* view, click *Create workpad*. . Specify the *Workpad settings*.
. Add a *Name* to your workpad. .. Add a *Name* to your workpad.
. In the *Width* and *Height* fields, specify the size. .. In the *Width* and *Height* fields, specify the size, or select one of default layouts.
. Select the layout. .. Click the *Background* color picker, then select the color for your workpad.
+
For example, click *720p* for a traditional presentation layout.
. Click the *Background color* picker, then select the background color for your workpad.
+ +
[role="screenshot"] [role="screenshot"]
image::images/canvas-background-color-picker.png[Canvas color picker] image::images/canvas-background-color-picker.png[Canvas color picker]
@ -57,9 +56,7 @@ image::images/canvas-background-color-picker.png[Canvas color picker]
If you're unsure about where to start, you can use one of the preconfigured templates that come with Canvas. If you're unsure about where to start, you can use one of the preconfigured templates that come with Canvas.
. Open the menu, then go to *Canvas*. . On the *Canvas workpads* page, select *Templates*.
. On the *Canvas workpads* view, select *Templates*.
. Click the preconfigured template that you want to use. . Click the preconfigured template that you want to use.
@ -69,17 +66,15 @@ If you're unsure about where to start, you can use one of the preconfigured temp
[[import-existing-workpads]] [[import-existing-workpads]]
=== Import existing workpads === Import existing workpads
When you want to use a workpad that someone else has already started, import the JSON file into Canvas. When you want to use a workpad that someone else has already started, import the JSON file.
. Open the menu, then go to *Canvas*. To begin, drag the file to the *Import workpad JSON file* field on the *Canvas workpads* page.
. On the *Canvas workpads* view, click and drag the file to the *Import workpad JSON file* field.
[float] [float]
[[use-sample-data-workpads]] [[use-sample-data-workpads]]
=== Use sample data workpads === Use sample data workpads
Each of the sample data sets comes with a Canvas workpad that you can use for your own workpad inspiration. Each of the {kib} sample data sets comes with a workpad that you can use for your own workpad inspiration.
. Add a {kibana-ref}/add-sample-data.html[sample data set]. . Add a {kibana-ref}/add-sample-data.html[sample data set].
@ -123,12 +118,12 @@ To save a group of elements, press and hold Shift, select the elements you want
Elements are saved in *Add element > My elements*. Elements are saved in *Add element > My elements*.
[float] [float]
[[add-existing-visuualizations]] [[add-saved-objects]]
=== Add existing visualizations === Add saved objects
Add <<managing-saved-objects,saved objects>> to your workpad, such as maps and visualizations. Add <<managing-saved-objects,saved objects>> to your workpad, such as maps and visualizations.
. Click *Add element > Add from Visualize Library*. . Click *Add element > Add from {kib}*.
. Select the saved object you want to add. . Select the saved object you want to add.
+ +

View file

@ -64,16 +64,17 @@ Override it by providing a different `stroke`, `fill`, or `color` (Vega-Lite) va
[[vega-queries]] [[vega-queries]]
==== Writing {es} queries in Vega ==== Writing {es} queries in Vega
experimental[] {kib} extends the Vega https://vega.github.io/vega/docs/data/[data] elements {kib} extends the Vega https://vega.github.io/vega/docs/data/[data] elements
with support for direct {es} queries specified as a `url`. with support for direct {es} queries specified as `url`.
Because of this, {kib} is **unable to support dynamically loaded data**, {kib} is **unable to support dynamically loaded data**,
which would otherwise work in Vega. All data is fetched before it's passed to which would otherwise work in Vega. All data is fetched before it's passed to
the Vega renderer. the Vega renderer.
To define an {es} query in Vega, set the `url` to an object. {kib} will parse To define an {es} query in Vega, set the `url` to an object. {kib} parses
the object looking for special tokens that allow your query to integrate with {kib}. the object looking for special tokens that allow your query to integrate with {kib}.
These tokens are:
Tokens include the following:
* `%context%: true`: Set at the top level, and replaces the `query` section with filters from dashboard * `%context%: true`: Set at the top level, and replaces the `query` section with filters from dashboard
* `%timefield%: <name>`: Set at the top level, integrates the query with the dashboard time filter * `%timefield%: <name>`: Set at the top level, integrates the query with the dashboard time filter
@ -87,8 +88,7 @@ These tokens are:
* `"%dashboard_context-filter_clause%"`: String replaced by an object containing filters * `"%dashboard_context-filter_clause%"`: String replaced by an object containing filters
* `"%dashboard_context-must_not_clause%"`: String replaced by an object containing filters * `"%dashboard_context-must_not_clause%"`: String replaced by an object containing filters
Putting this together, an example query that counts the number of documents in For example, the following query counts the number of documents in a specific index:
a specific index:
[source,yaml] [source,yaml]
---- ----