[DOCS] Canvas refresh for 7.10 (#80017) (#80076)

# Conflicts:
#	docs/canvas/images/canvas-zoom-controls.png
This commit is contained in:
Kaarina Tungseth 2020-10-12 10:52:51 -05:00 committed by GitHub
parent 52ebad4bdb
commit 8f1459d243
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}.
Click *Share > Download as JSON*.
To begin, click *Share > Download as JSON*.
[role="screenshot"]
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}.
Click *Share > PDF reports > Generate PDF*.
To begin, click *Share > PDF reports > Generate PDF*.
[role="screenshot"]
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.
Click *Share > PDF reports > Copy POST URL*.
To begin, click *Share > PDF reports > Copy POST URL*.
[role="screenshot"]
image::images/canvas-create-URL.gif[Image showing how to create POST URL]

View file

@ -2,7 +2,7 @@
[[canvas-tutorial]]
== 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]
=== 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.
Your workpad is now complete!
Your workpad is complete!
[float]
=== Next steps
=== What's next?
Now that you know the Canvas basics, you're ready to explore on your own.
Here are some things to try:
* Play with the {kibana-ref}/add-sample-data.html[sample Canvas workpads].
* Build presentations of your own live data with <<create-workpads,workpads>>.
* Learn more about <<add-canvas-elements,elements>> &mdash; the building blocks of your workpad.
* Build presentations of your own data with <<create-workpads,workpads>>.
* Deep dive into the {kibana-ref}/canvas-function-reference.html[expression language and functions] that drive Canvas.

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 192 KiB

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 217 KiB

After

Width:  |  Height:  |  Size: 98 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 228 KiB

After

Width:  |  Height:  |  Size: 120 KiB

View file

@ -17,6 +17,8 @@ With Canvas, you can:
* Focus the data you want to display with filters.
To begin, open the menu, then go to *Canvas*.
[role="screenshot"]
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
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]
[[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.
. 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.
+
For example, click *720p* for a traditional presentation layout.
. Click the *Background color* picker, then select the background color for your workpad.
.. Click the *Background* color picker, then select the color for your workpad.
+
[role="screenshot"]
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.
. Open the menu, then go to *Canvas*.
. On the *Canvas workpads* view, select *Templates*.
. On the *Canvas workpads* page, select *Templates*.
. 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
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*.
. On the *Canvas workpads* view, click and drag the file to the *Import workpad JSON file* field.
To begin, drag the file to the *Import workpad JSON file* field on the *Canvas workpads* page.
[float]
[[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].
@ -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*.
[float]
[[add-existing-visuualizations]]
=== Add existing visualizations
[[add-saved-objects]]
=== Add saved objects
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.
+

View file

@ -64,16 +64,17 @@ Override it by providing a different `stroke`, `fill`, or `color` (Vega-Lite) va
[[vega-queries]]
==== Writing {es} queries in Vega
experimental[] {kib} extends the Vega https://vega.github.io/vega/docs/data/[data] elements
with support for direct {es} queries specified as a `url`.
{kib} extends the Vega https://vega.github.io/vega/docs/data/[data] elements
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
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}.
These tokens are:
Tokens include the following:
* `%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
@ -87,8 +88,7 @@ These tokens are:
* `"%dashboard_context-filter_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
a specific index:
For example, the following query counts the number of documents in a specific index:
[source,yaml]
----