Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] adding docs about keyboard navigation drag and drop and advanced tutorial #4

Merged
merged 18 commits into from
Mar 17, 2021
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified docs/user/dashboard/images/lens_advanced_1_2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user/dashboard/images/lens_advanced_2_1_1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user/dashboard/images/lens_advanced_2_2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/user/dashboard/images/lens_advanced_result.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed docs/user/dashboard/images/lens_drag_drop.gif
Binary file not shown.
Binary file removed docs/user/dashboard/images/lens_drag_drop_2.gif
Binary file not shown.
Binary file added docs/user/dashboard/images/lens_drag_drop_2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions docs/user/dashboard/lens-advanced.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ The list of fields that appear depend on the <<index-patterns,index pattern>>, <

[discrete]
[[view-the-number-of-transactions-per-day]]
=== View the number of transactions per day
=== View the number of transactions per hour
mbondyra marked this conversation as resolved.
Show resolved Hide resolved

To determine the number of orders made each day, create a bar chart, then add it to the dashboard.
To determine the number of orders made per hour, create a bar chart, then add it to the dashboard.
mbondyra marked this conversation as resolved.
Show resolved Hide resolved

. Set the <<set-time-filter,time filter>> to *Last 30 days*.

Expand All @@ -69,7 +69,7 @@ image::images/lens_advanced_1_1.png[Added records to the workspace]
[role="screenshot"]
image::images/lens_advanced_1_1_2.png[Bottom axis menu]
+
You have a bar chart that shows you how many orders were made at your store each day.
You have a bar chart that shows you how many orders were made at your store per hour.
+
[role="screenshot"]
image::images/lens_advanced_1_2.png[Orders per day]
Expand All @@ -80,14 +80,14 @@ image::images/lens_advanced_1_2.png[Orders per day]
[[view-the-cumulative-number-of-products-sold-over-time]]
=== View the cumulative number of products sold on weekends
mbondyra marked this conversation as resolved.
Show resolved Hide resolved

To determine the number of orders made only on Saturday and Sunday, create a line chart, then add it to the dashboard.
To determine the number of orders made only on Saturday and Sunday, create an area chart, then add it to the dashboard.

. Open *Lens*.

. From the *Chart Type* dropdown, select *Line*.
. From the *Chart Type* dropdown, select *Area*.
+
[role="screenshot"]
image::images/lens_advanced_2_1_1.png[Chart type menu with Line selected]
image::images/lens_advanced_2_1_1.png[Chart type menu with Area selected]

. Configure the cumulative sum of the store orders.

Expand Down Expand Up @@ -117,7 +117,7 @@ image::images/lens_advanced_2_1.png[Filter aggregation to filter weekend days]
[role="screenshot"]
image::images/lens_advanced_2_2_1.png[Legend menu]
+
You have a line chart that shows you how many orders your store received during the weekend.
You have an area chart that shows you how many orders your store received during the weekend.
+
[role="screenshot"]
image::images/lens_advanced_2_2.png[Line chart with cumulative sum of orders made on the weekend]
Expand Down
42 changes: 11 additions & 31 deletions docs/user/dashboard/lens.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -31,42 +31,23 @@ Lens has a fully accessible, continuously improved drag and drop system. By usin
[role="screenshot"]
image::images/lens_drag_drop_1.png[Presented Lens drag and drop]
mbondyra marked this conversation as resolved.
Show resolved Hide resolved

[float]
[[drag-and-drop-keyboard-navigation-drop-a-field]]
==== Drop a field to the workspace or configuration panel

. Set a focus on the chosen field.
. Press space to start a drag.
. Using left and right arrows, select a drop target.
. Press space to confirm.

[float]
[[drag-and-drop-keyboard-navigation-duplicate-an-operation]]
==== Duplicate an existing operation

Creating a few similar operations can be repetetive and time-consuming. A good usecase would be a need for creating multiple percentiles. Instead of configuring each metric from scratch, you can duplicate it – just drag a metric to duplicate and drop it into an empty dimension. For keyboard navigation:

. Set focus on an item you want to duplicate.
. Press space to start a drag.
. Using left and right arrow keys, choose as a target a button `Drop a field or click to add` in the same group.
. Confirm with space.
Follow the instructions below to take advantage of drag and drop keyboard navigation:

. Set a focus on the chosen item. Most of draggable elements have two focus states. One serves to open a panel with more detailed information or options and another one to drag an element. To drag an element, tab through the page until the focus state looks like on the picture:
mbondyra marked this conversation as resolved.
Show resolved Hide resolved
+
[role="screenshot"]
image::images/lens_drag_drop_2.gif[Using drag and drop to duplicate an item]

[float]
[[drag-and-drop-keyboard-navigation-reorder-elements]]
==== Reorder elements in the group
To reorder the element in the group, simply pick up the item and move it into desired place.

. Set focus on the item.
. Press space to start a drag.
. Use up and down arrow keys to reorder.
. Press space to confirm.
image::images/lens_drag_drop_2.png[Lens drag and drop focus state]

. Press space or enter to start dragging an item.
. Use left and right arrows to select a drop target outside of the group.
. Use up and down arrows to reorder item's position in the group if the item is reorderable.
+
[role="screenshot"]
image::images/lens_drag_drop_3.gif[Using drag and drop to reorder]

. Press space or enter to confirm.
. Press escape to cancel dragging.

[float]
[[lens-faq]]
==== Frequently asked questions
Expand Down Expand Up @@ -157,4 +138,3 @@ At the moment it is not possible to inspect the Elasticsearch query for a *Lens*
// ===== What {es} aggregations are renamed as Lens functions?

// Show a table here like the aggregation-reference in Kibana guide