github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Element page fixes

Browse source
This commit is contained in:
KOTungseth 2019-08-22 11:08:53 -05:00
parent 4e548d3009
commit 8b8301921e
1 changed files with 170 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,36 +1,43 @@
[role="xpack"]
[[canvas-elements]]
=== Customize your workpad with elements
[[element-intro]]
== Showcase your data with elements
Elements are the building blocks of your workpad. Add and combine elements to create presentations of your data.
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>>
[float]
[[add-canvas-element]]
=== Add elements to your workpad
To customize your workpad to look the way you want, add elements to your workpad.
Choose the elements to display on your workpad, then familiarize yourself with the element using the preconfigured demo data.
. Click *Add Element*, then select the best element to show off your data.
+
//TODO add image
+
Elements come preconfigured with demo data so that you can familiarize yourself with the element. Play around with the default settings and see what the element can do.
. Click *Add element*.
. To move the element, click and drag it to your preferred location.
. In the *Elements* window, select the element you want to use.
+
You can also select the element, then use your arrow keys to move the element by 1 pixel.
+
As you move the element, notice the alignment lines that appear to help you place the element exactly where you want it.
[role="screenshot"]
image::images/canvas-element-select.gif[Canvas elements]
. To resize the element, click a corner, then drag to the size you want.
. Play around with the default settings and see what the element can do.
. Want to delete the element? Select the element, click the *Element options* icon in the top right corner, then select *Delete*.
TIP: Want to use a different element? You can delete the element by selecting it, clicking the *Element options* icon in the top right corner, then selecting *Delete*.
[float]
[[connect-element-data]]
=== Connect the element to your data
To connect the element to your own data, use the panel on the right.
When you are ready to move on from the demo data, connect the element to your own data.
. Make sure that the element is selected, then select *Data*.
@ -38,69 +45,45 @@ To connect the element to your own data, use the panel on the right.
[float]
[[elasticsearch-sql-data-source]]
==== Connect the element to Elasticsearch SQL
==== Connect to Elasticsearch SQL
Use Elasticsearch SQL to generate a data table.
Access your data in Elasticsearch using the Elasticsearch SQL syntax.
Unfamiliar with writing Elasticsearch SQL queries? For more information, refer to {ref}/sql-spec.html[SQL language].
. Click *Elasticsearch SQL*.
. In the *Elasticearch SQL query* box, enter your query, then click *Preview*.
. In the *Elasticearch SQL query* box, enter your query, then *Preview* it.
. If your query looks correct, click *Save*.
+
The element appears as a warning.
. Click *Display*
. Change the data points to display in your element.
. In the *Label* field, enter a name for the data.
. To specify the auto-refresh interval for the element, click the *Control settings* icon in the top left corner, then click the interval you want to use.
+
To manually refresh the data, click the *Refresh data* icon.
Unfamiliar with writing Elasticsearch SQL queries? Go to {ref}/sql-spec.html[SQL language] for more information.
. If everything looks correct, *Save* it.
[float]
[[elasticsearch-raw-doc-data-source]]
==== Connect the element to Elasticsearch raw documents
==== Connect to Elasticsearch raw data
Use the Lucene query syntax to pull back raw documentation from Elasticsearch.
Use the Lucene query syntax to use your raw data in Elasticsearch.
For for more information about the Lucene query string sytax, refer to <<lucene-query,Lucene Query Syntax>>.
. Click *Elasticsearch raw documents*.
.. From the *Index* dropdown, select the index data that you want to display.
. In the *Index* field, enter the index pattern that you want to display.
.. From the *Fields* dropdown, select the associated fields you want to display.
. From the *Fields* dropdown, select the associated fields you want to display.
.. To sort the data, select an option from the *Sort Field* and *Sort Order* dropdowns.
. To sort the data, select an option from the *Sort Field* and *Sort Order* dropdowns.
.. For more targeted queries, enter a *Query* using the Lucene query string syntax.
+
For for more information about the Lucene query string sytax, refer to <<lucene-query,Lucene Query Syntax>>.
. For more targeted queries, enter a *Query* using the Lucene query string syntax.
. Click *Preview*.
. *Preview* the query.
. If your query looks correct, click *Save*.
+
The element appears as a warning.
. Click *Display*
.. Change the data points to display in your element.
.. In the *Label* field, enter a name for the data.
. To specify the auto-refresh interval for the element, click the *Control settings* icon in the top left corner, then click the interval you want to use.
+
To manually refresh the data, click the *Refresh data* icon.
. If your query looks correct, *Save* it.
[float]
[[timelion-data-source]]
==== Connect the element to Timelion
==== Connect to Timelion
Use Timelion queries to pull back time series data in a tabular format.
Use <<timelion,Timelion>> queries to use your time series data.
. Click *Timelion*.
@ -108,116 +91,178 @@ Use Timelion queries to pull back time series data in a tabular format.
+
For for more information about the Lucene query string syntax, refer to <<lucene-query,Lucene Query Syntax>>.
. Enter the *Interval*, then click *Preview*.
. Enter the *Interval*, then *Preview* the query.
. If your query looks correct, click *Save*.
+
The element appears as a warning.
. If your query looks correct, *Save* it.
[float]
[[configure-display-options]]
=== Choose the display options
Choose how you want the elements to appear on your workpad.
[float]
[[data-display]]
==== Specify how to display the data
When you connect your element to a data source, the element often appears as a warning. To remove the error, specify the display options.
. Click *Display*
. Change the data points to display in your element.
. In the *Label* field, enter a name for the data.
. To specify the auto-refresh interval for the element, click the *Control settings* icon in the top left corner, then click the interval you want to use.
+
To manually refresh the data, click the *Refresh data* icon.
For more information about Timelion, refer to <<timelion,Timelion>>.
. Change the display options for the element.
[float]
[[element-display-options]]
=== Choose the display options
[[element-display-container]]
==== Change the appearance of the element container
Choose how you want the element to appear on your workpad. For each element type, the display options are different.
Further define the appearance of the element container and border.
. Make sure that the element is selected, then select *Display*.
. Next to *Element style*, click *+*, then select *Container style*.
. Specify the display options you want to use.
. Expand *Container style*.
. To use the advanced display options, click *+* next to *Element style*, then choose one of these options:
. Change the *Appearance* and *Border* options.
* To make small changes to the appearance of the element, click *Container style*.
[float]
[[apply-element-styles]]
==== Apply a set of styles
* To apply a CSS stylesheet to the element, click *CSS*.
To make your element look exactly the way you want, apply CSS overrides.
//For more advanced customization options, create Canvas plugins.
. Next to *Element style*, click *+*, then select *CSS*.
//To further define the appearance and behavior of the element, use the <<canvas-expression-editor,expression editor>>.
. Enter the *CSS*. For example, to center the Markdown element, enter:
+
[source,js]
--------------------------------------------------
.canvasRenderEl h1 {
text.align: center;
}
--------------------------------------------------
. Click *Apply stylesheet*.
[float]
[[configure-auto-refresh-interval]]
==== Change the data auto-refresh interval
Increase or decrease how often your 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]
[[organize-element]]
=== Organize the elements on your workpad
. Align the elements.
Choose where you want the elements to appear on your workpad.
.. Press Shift, then select the elements you want to align.
[float]
[[move-canvas-elements]]
==== Move elements
.. Click the *Element options* icon in the top right corner, then select *Align 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.
.. From the *Alignment* menu, select the type of alignment.
* Click and drag the element to your preferred location.
. Distribute the elements.
* To move the element by 1 pixel, select the element, press and hold Shift, then use your arrow keys.
.. Press Shift, then select the elements you want to distribute.
* To move the element by 10 pixels, select the element, then use your arrow keys.
.. Click the *Element options* icon in the top right corner, then select *Distribute elements*.
[float]
[[resize-canvas-elements]]
==== Resize elements
.. From the *Distribution* menu, select the type of distribution.
Make your elements bigger or smaller than the default size.
. Change the order of the elements.
. Select the element.
.. Click an element, then click the *Element options* icon in the top right corner.
. Click and drag the resize handles to the size you want.
.. Select *Order*, then select the action.
[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 your workpads.
After you have made changes to elements, save them so that you can reuse them across all of your workpads.
. Make sure that the element is selected.
. Select the element that you want to save.
+
To save a group of elements, press Shift, then select the elements you want to save.
To save a group of elements, press and hold Shift, then select the elements you want to save.
. Next to *Selected element*, click the *Save as new element* icon.
. Click the *Save as new element* icon.
. In the *Create new element* window, enter a *Name* for the element.
. 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 the element, click *Add element*, then select *My elements*.
[float]
[[add-more-pages]]
=== Add more pages to the workpad
=== Add pages
When you have run out of room on your workpad, you can add more pages.
When you have run out of room on your workpad page, add more pages.
. Click *Page 1*, then click the *+* icon.
. Click *Page 1*, then click *+*.
. On the *Page* editor, select the page transition from the *Transition* dropdown.
//TODO insert image
[float]
[[workpad-display-options]]
=== Change the workpad display options
For a better view of the elements on your workpad, change the display options.
* To view your workpad in fullscreen mode, click the *Enter fullscreen mode* icon in the upper left corner.
* To zoom in or out on the workpad, click the *Zoom controls* icon in the upper left corder, then select one of the options.
[float]
[[enable-autoplay]]
=== Enable autoplay
Automatically cycle through your workpads pages in fullscreen mode.
. In the upper left corner, click the *Control settings* icon.
. Under *Change cycling interval*, select the cycle interval you want to use.
. 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]