maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[DOCS] Canvas assets (#57494) (#61484)

Browse source 
* [DOCS] Canvas assets

* Structure reorganization

* Separated out workpad content

* Images, content reorg

* Review comments

* Review comments

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Kaarina Tungseth 2020-03-26 10:51:54 -05:00 committed by GitHub
parent 8f714aef7c
commit 22fa5cc92f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 172 additions and 245 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

288
docs/canvas/canvas-elements.asciidoc
View file

@ -1,132 +1,132 @@
[role="xpack"]
[[element-intro]]
== Showcase your data with elements
[[add-canvas-elements]]
=== Add 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>>
Create a story about your data by adding elements to your workpad that include images, text, charts, and more. You can create your own elements and connect them to your data sources, add saved objects, and add your own images.
[float]
[[add-canvas-element]]
=== Add elements to your workpad
[[create-canvas-element]]
==== Create an element
Choose the elements to display on your workpad, then familiarize yourself with the element using the preconfigured demo data. By default, most elements use demo data until you change the data source. The demo data includes a small sample data set that you can use to experiment with your element.
Choose the type of element you want to use, then connect it to your own data.
To add a Canvas element:
. Click *Add element*.
. In the *Elements* window, select the element you want to use.
. Click *Add element*, then 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.
. To familiarize yourself with the element, use the preconfigured data demo data.
+
By default, most of the elements you create use demo data until you change the data source. The demo data includes a small data set that you can use to experiment with your element.
To add a map:
. To connect the element to your data, select *Data*, then select one of the following data sources:
* *{es} SQL* &mdash; Access your data in {es} using SQL syntax. For information about SQL syntax, refer to {ref}/sql-spec.html[SQL language].
* *{es} raw data* &mdash; Access your raw data in {es} without the use of aggregations. Use {es} raw data when you have low volume datasets, or to plot exact, non-aggregated values.
* *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>>.
[float]
[[canvas-add-object]]
==== Add a saved object
Add a <<managing-saved-objects,saved object>>, such as a map or Lens visualization, then customize it to fit your display needs.
. Click *Embed object*.
. Select the map you want to add to the workpad.
. Select the object you want to add.
+
[role="screenshot"]
image::images/canvas-map-embed.gif[]
NOTE: Demo data is only supported on Canvas elements. Maps do not support demo data.
. To use the customization options, click the panel menu, then select one of the following options:
Want to use a different element? You can delete the element by selecting it, clicking the *Element options* icon in the top right, then selecting *Delete*.
* *Edit map* &mdash; Opens <<maps,Maps>> so that you can edit the original map.
* *Customize panel* &mdash; Specifies the object title options.
* *Inspect* &mdash; Allows you to drill down into the element data.
* *Customize time range* &mdash; Exposes a time filter dedicated to the map.
[float]
[[connect-element-data]]
=== Connect the Canvas element to your data
[[canvas-add-image]]
==== Add your own image
When you have finished using the demo data, connect the Canvas element to a data source.
To personalize your workpad, add your own logos and graphics.
NOTE: Maps do not support data sources. To change the map data, refer to <<maps, Elastic Maps>>.
. Click *Manage assets*.
. Make sure that the element is selected, then select *Data*.
. On the *Manage workpad assets* window, drag and drop your images.
. Click *Change your data source*.
. To add the image to the workpad, click the *Create image element* icon.
+
[role="screenshot"]
image::images/canvas-add-image.gif[]
[float]
[[elasticsearch-sql-data-source]]
==== Connect to {es} SQL
[[move-canvas-elements]]
==== Organize elements
Access your data in {es} using SQL syntax. For information about SQL syntax, refer to {ref}/sql-spec.html[SQL language].
Move and resize your elements to meet your design needs.
. Click *{es} SQL*.
* To move, click and hold the element, then drag to the new location.
. In the *{es} SQL query* box, enter your query, then *Preview* it.
* To move by 1 pixel, select the element, press and hold Shift, then use your arrow keys.
. If everything looks correct, *Save* it.
* To move by 10 pixels, select the element, then use your arrow keys.
* To resize, click and drag the resize handles to the new dimensions.
[float]
[[elasticsearch-raw-doc-data-source]]
==== Connect to {es} raw data
[[format-canvas-elements]]
==== Format elements
Access your raw data in {es} without the use of aggregations. Use {es} raw data when you have low volume datasets, or to plot exact, non-aggregated values.
Align, distribute, and reorder elements for consistency and readability across your workpad pages.
To use targeted queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
Access the align, distribute, and reorder options by clicking the *Element options* icon.
. Click *{es} raw documents*.
[role="screenshot"]
image::images/canvas_element_options.png[]
. In the *Index* field, enter the index pattern that you want to display.
To align elements:
. From the *Fields* dropdown, select the associated fields you want to display.
. Press and hold Shift, then select the elements you want to align.
. To sort the data, select an option from the *Sort Field* and *Sort Order* dropdowns.
. Click the , then select *Group*.
. For more targeted queries, enter a *Query* using the Lucene query string syntax.
. Click the *Element options* icon, then select *Alignment*.
. *Preview* the query.
. Select the alignment option.
. If your query looks correct, *Save* it.
To distribute elements:
[float]
[[timelion-data-source]]
==== Connect to Timelion
. Press and hold Shift, then select the elements you want to distribute.
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>>.
. Click the *Element options* icon, then select *Group*.
. Click *Timelion*.
. Click the *Element options* icon, then select *Distribution*.
. Enter a *Query* using the Lucene query string syntax.
. Select the distribution option.
. Enter the *Interval*, then *Preview* the query.
To reorder elements:
. If your query looks correct, *Save* it.
. Select the element you want to reorder.
[float]
[[configure-display-options]]
=== Choose the display options
. Click the *Element options* icon, then select *Order*.
Choose how you want the elements to appear on your workpad.
. Select the order option.
[float]
[[data-display]]
==== Specify how to display the data
==== Change the element display options
When you connect your element to a data source, the element often appears as a warning. To remove the error, specify the display options.
Each element has its own display options to fit your design needs.
. Click *Display*
To choose the display options, click *Display*, then make your changes.
. 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.
To define the appearance of the container and border:
. Next to *Element style*, click *+*, then select *Container style*.
@ -134,17 +134,13 @@ Further define the appearance of the element container and border.
. 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.
To apply CSS overrides:
. Next to *Element style*, click *+*, then select *CSS*.
. Enter the *CSS*. For example, to center the Markdown element, enter:
+
[source,js]
[source,text]
--------------------------------------------------
.canvasRenderEl h1 {
text.align: center;
@ -154,137 +150,31 @@ text.align: center;
. Click *Apply stylesheet*.
[float]
[[configure-auto-refresh-interval]]
==== Change the data auto-refresh interval
[[save-elements]]
==== Save elements
Increase or decrease how often your Canvas element data refreshes on your workpad.
To use the elements across all workpads, save the elements.
. 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]
[[canvas-time-range]]
==== Customize map time ranges
Configure the maps on your workpad for a specific time range.
From the panel menu, select *Customize time range* to expose a time filter dedicated to the map.
When you're ready to save your element, select the element, then click the *Save as new element* icon.
[role="screenshot"]
image::images/canvas_map-time-filter.gif[]
image::images/canvas_save_element.png[]
[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*.
To access your saved elements, click *Add element*, then select *My elements*.
[float]
[[add-more-pages]]
=== Add pages
[[delete-elements]]
==== Delete elements
When you have run out of room on your workpad page, add more pages.
When you no longer need an element, delete it from your workpad.
. Click *Page 1*, then click *+*.
. Select the element you want to delete.
. On the *Page* editor panel on the right, select the page transition from the *Transition* dropdown.
. Click the *Element options* icon.
+
[role="screenshot"]
image::images/canvas-add-pages.gif[Add pages]
image::images/canvas_element_options.png[]
. Select *Delete*.

6
docs/canvas/canvas-present-workpad.asciidoc
View file

@ -1,12 +1,12 @@
[role="xpack"]
[[canvas-present-workpad]]
== Present your 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
==== View your workpad in fullscreen mode
In the upper left corner, click the *Enter fullscreen mode* icon.
@ -15,7 +15,7 @@ image::images/canvas-fullscreen.png[Fullscreen mode]
[float]
[[enable-autoplay]]
=== Enable autoplay
==== Enable autoplay
Automatically cycle through your workpads pages in fullscreen mode.

20
docs/canvas/canvas-share-workpad.asciidoc
View file

@ -1,12 +1,12 @@
[role="xpack"]
[[workpad-share-options]]
== Share your workpad
=== Share your workpad
When you've finished your workpad, you can share it outside of {kib}.
[float]
[[export-single-workpad]]
=== Export workpads
==== Export workpads
Create a JSON file of your workpad that you can export outside of {kib}.
@ -21,7 +21,7 @@ Want to export multiple workpads? Go to the *Canvas workpads* view, select the w
[float]
[[create-workpad-pdf]]
=== Create a PDF
==== Create a PDF
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}.
@ -36,7 +36,7 @@ image::images/canvas-generate-pdf.gif[Generate PDF]
[float]
[[create-workpad-URL]]
=== Create a POST 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.
@ -51,7 +51,7 @@ image::images/canvas-create-URL.gif[Create POST URL]
[float]
[[add-workpad-website]]
=== Share the workpad on a 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.
@ -70,13 +70,11 @@ NOTE: Shareable workpads encode the current state of the workpad in a JSON file.
[float]
[[change-the-workpad-settings]]
=== Change the settings
==== Change the 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
To change the autoplay settings:
. In the lower right corner of the shareable workpad, click the settings icon.
@ -85,9 +83,7 @@ After you've added the workpad to your website, you can change the autoplay and
[role="screenshot"]
image::images/canvas_share_autoplay_480.gif[Autoplay settings]
[float]
[[hide-workpad-toolbar]]
==== Change the toolbar settings
To change the toolbar settings:
. In the lower right corner, click the settings icon.

30
docs/canvas/canvas-tutorial.asciidoc
View file

@ -12,7 +12,7 @@ For this tutorial, you'll need to add the <<add-sample-data, Sample eCommerce or
[float]
=== Create and personalize your workpad
Your first step to working with Canvas is to create a workpad.
Your first step to working with Canvas is to create a workpad.
. Open *Canvas*.
@ -43,7 +43,7 @@ You'll notice that the image is tagged as an asset, which allows you to reuse th
Customize your data by connecting it to the Sample eCommerce orders data.
. Click *Add element*, then click *Metric*.
. Click *Add element*, then click *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.
@ -89,7 +89,7 @@ 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*, then click *Area chart*.
. To connect the element to your own data source, make sure that the element is selected, then click *Data*.
@ -117,7 +117,7 @@ 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 a time filter to your workpad.
. Click *Add element*, then click *Time filter*.
@ -132,26 +132,30 @@ 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.
Your workpad is now complete! Use the icons in the upper left corner to:
* Display your workpad in fullscreen mode
* Download your workpad as a PDF report or JSON object
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
[float]
=== Next steps
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:
* Play with the {kibana-ref}/add-sample-data.html[sample Canvas workpads].
* Play with the {kibana-ref}/add-sample-data.html[sample Canvas workpads].
* Learn more about <<create-canvas-workpad,Workpads>>.
* Build presentations of your own live data with <<create-canvas-workpad,workpads>>.
* Learn more about <<element-intro,Elements>>.
* 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.

65
docs/canvas/canvas-workpad.asciidoc
View file

@ -4,19 +4,19 @@
A Canvas _workpad_ provides you with a workspace where you can build presentations of your live data.
To create a workpad, you can:
To create a workpad, choose one of the following options:
* <<blank-canvas-workpad,Build fully customizable presentations of your own data>>
* <<canvas-template-workpad,Choose from a set of preconfigured workpad templates>>
* <<import-canvas-workpad,Import a workpad that someone else has already started>>
* <<sample-data-workpad,Gather inspiration from the {kib} sample data workpads>>
* <<import-canvas-workpad,Import a workpad that someone else has already started>>
[float]
[[blank-canvas-workpad]]
=== Start with a blank page
=== Start with a blank workpad
To use the background colors, images, and data of your choice, start with a blank workpad.
@ -69,21 +69,21 @@ Each of the sample data sets comes with a Canvas workpad that you can use for yo
. 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].
. On the *Add Data* page, click *View data*, then select *Canvas*.
[float]
[[apply-workpad-styles]]
== Apply a set of styles to the entire workpad
=== Apply a set of styles to the entire workpad
To make your workpad look exactly the way you want, use the editor on the right to apply CSS overrides.
To make your workpad look exactly the way you want, use the editor to apply CSS overrides.
. Expand *Global CSS overrides*.
. Enter the CSS. For example, to change the background on every page, enter:
. Enter the CSS.
+
[source,js]
For example, to change the background on every page, enter:
+
[source,text]
--------------------------------------------------
.canvasPage {
background-color: #3990e6;
@ -91,3 +91,46 @@ background-color: #3990e6;
--------------------------------------------------
. Click *Apply stylesheet*.
[float]
[[configure-auto-refresh-interval]]
=== Change the auto-refresh interval
Increase or decrease how often the 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]
[[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]
[[add-more-pages]]
=== Add pages
Organize your ideas onto separate pages by adding 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]
include::{kib-repo-dir}/canvas/canvas-elements.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-present-workpad.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-share-workpad.asciidoc[]

BIN
docs/images/canvas-add-image.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
docs/images/canvas-map-embed.gif
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 894 KiB

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
docs/images/canvas-refresh-interval.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 757 KiB

After

Width:  |  Height:  |  Size: 570 KiB

BIN
docs/images/canvas_create_image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
docs/images/canvas_element_options.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
docs/images/canvas_save_element.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.6 KiB

8
docs/user/canvas.asciidoc
View file

@ -31,14 +31,8 @@ include::{kib-repo-dir}/canvas/canvas-tutorial.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-workpad.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-elements.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-present-workpad.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-share-workpad.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-expression-lifecycle.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-function-reference.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-tinymath-functions.asciidoc[]
include::{kib-repo-dir}/canvas/canvas-tinymath-functions.asciidoc[]