[DOCS] Canvas embeddable workpads (#45027) (#49882)

* [DOCS] New Canvas snapshots documentation

* Changes from 1-Oct meeting

* Some tweaks

* Added beta tag

* Fixes to images

* Comments from Gail and Tim

* New images

* Final changes
This commit is contained in:
Kaarina Tungseth 2019-10-31 10:58:16 -05:00 committed by GitHub
parent c88cad27ca
commit 824707eb2a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 92 additions and 80 deletions

View file

@ -1,39 +0,0 @@
[[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
```

View file

@ -2,32 +2,13 @@
[[workpad-share-options]]
== Share your workpad
When you are ready to share your workpad, create a PDF, or export your workpad.
[float]
[[create-workpad-pdf]]
=== Create a PDF
To view your workpad outside of Kibana, generate a PDF.
. If you are using a Gold or Platinum license, enable reporting in your `config/kibana.yml` file.
. From your workpad, click the *Share workpad* icon in the upper left corner, then select *PDF reports*.
. Click *Generate PDF*.
+
[role="screenshot"]
image::images/canvas-generate-pdf.gif[Generate PDF]
[float]
[[export-workpad]]
=== Export your workpad
To share your workpad with another author, export it as a JSON file.
When you've finished your workpad, you can share it outside of {kib}.
[float]
[[export-single-workpad]]
==== Export a single workpad
=== Export workpads
Create a JSON file of your workpad that you can export outside of {kib}.
. From your workpad, click the *Share workpad* icon in the upper left corner.
@ -36,13 +17,85 @@ To share your workpad with another author, export it as a JSON file.
[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*.
[float]
[[export-multiple-workpads]]
==== Export multiple workpads
[[create-workpad-pdf]]
=== Create a PDF
. Go to the *Canvas workpads* page.
Create a PDF copy of your workpad that you can save and share outside of {kib}.
. Select the workpads you want to export
. If you are using a Gold or Platinum license, enable reporting in your `config/kibana.yml` file.
. Click *Export*.
. From your workpad, click the *Share workpad* icon in the upper left corner, then select *PDF reports*.
. Click *Generate PDF*.
+
[role="screenshot"]
image::images/canvas-generate-pdf.gif[Generate PDF]
[float]
[[create-workpad-URL]]
=== Create a POST URL
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>>.
. If you are using a Gold or Platinum license, enable reporting in your `config/kibana.yml` file.
. From your workpad, click the *Share workpad* icon in the upper left corner, then select *PDF reports*.
. Click *Copy POST URL*.
+
[role="screenshot"]
image::images/canvas-create-URL.gif[Create POST URL]
[float]
[[add-workpad-website]]
=== Share the workpad on a website
beta[] Download the workpad and share it on any website, then customize the workpad behavior to autoplay the pages or hide the toolbar.
. If you are using a Gold or Platinum license, enable reporting in your `config/kibana.yml` file.
. From your workpad, click the *Share this workpad* icon in the upper left corner, then select *Share on a website*.
. On the *Share on a website* pane, follow the 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]
+
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 shareable workpad settings
After you've added the workpad to your website, you can change the autoplay and toolbar settings.
[float]
[[shareable-workpad-enable-autoplay]]
==== Change the autoplay settings
. In the lower right corner of the shareable workpad, click the settings icon.
. Click *Auto Play*, then change the settings.
+
[role="screenshot"]
image::images/canvas_share_autoplay_480.gif[Autoplay settings]
[float]
[[hide-workpad-toolbar]]
==== Change the toolbar settings
. In the lower right corner, click the settings icon.
. Click *Toolbar*, then change the settings.
+
[role="screenshot"]
image::images/canvas_share_hidetoolbar_480.gif[Hide toolbar settings]

View file

@ -18,17 +18,17 @@ To create a workpad, you can:
[[blank-canvas-workpad]]
=== Start with a blank page
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 *Canvas*.
. On the *Canvas workpads* page, click *Create workpad*.
. On the *Canvas workpads* view, click *Create 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.
. Select the layout.
. Select the layout.
+
For example, click *720p* for a traditional presentation layout.
@ -45,7 +45,7 @@ If you're unsure about where to start, you can use one of the preconfigured temp
. Open *Canvas*.
. On the *Canvas workpads* page, select *Templates*.
. On the *Canvas workpads* view, select *Templates*.
. Click the preconfigured template that you want to use.
@ -59,7 +59,7 @@ When you want to use a workpad that someone else has already started, import the
. Open *Canvas*.
. On the *Canvas workpads* page, click and drag the file to the *Import workpad JSON file* field.
. On the *Canvas workpads* view, click and drag the file to the *Import workpad JSON file* field.
[float]
[[sample-data-workpad]]
@ -67,11 +67,11 @@ When you want to use a workpad that someone else has already started, import the
Each of the sample data sets comes with a Canvas 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].
. On the *Add Data to Kibana* page, click the *View data* dropdown list, then select *Canvas*.
+
Need some more workpad inspiration? Check out the link:https://www.elastic.co/blog/[Elastic Blog].
Need some more workpad inspiration? Check out the link:https://www.elastic.co/blog/[Elastic Blog].
[float]
[[apply-workpad-styles]]

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 MiB

View file

@ -5,15 +5,15 @@
[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 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.
With Canvas, you can:
* Create and personalize your work space with backgrounds, borders, colors, fonts, and more.
* Create and personalize your work space with backgrounds, borders, colors, fonts, and more.
* Customize your workpad with your own visualizations, such as images and text.
* Customize your data by pulling it directly from Elasticsearch.
* Customize your data by pulling it directly from Elasticsearch.
* Show off your data with charts, graphs, progress monitors, and more.
@ -37,8 +37,6 @@ include::{kib-repo-dir}/canvas/canvas-present-workpad.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-share-workpad.asciidoc[]
//include::{kib-repo-dir}/canvas/canvas-expressions.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-function-reference.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-tinymath-functions.asciidoc[]