Update visuals on Manage & Share Dashboards and Tutorials + consisten…

…cy edits (#195152) ## Summary Updated visuals on the [Manage and Share Dashboards](https://www.elastic.co/guide/en/kibana/master/_manage_dashboards.html) pages and [Tutorials](https://www.elastic.co/guide/en/kibana/master/_tutorials.html) + made some consistency edits to the text. Rel:[#457](elastic/platform-docs-team#457) and [#466](elastic/platform-docs-team#466) --------- Co-authored-by: florent-leborgne <[email protected]>
elastic · Oct 7, 2024 · 296a49c · 296a49c
1 parent ae36dd5
commit 296a49c
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 42 deletions.
diff --git a/docs/user/dashboard/images/lens_layerVisualizationTypeMenu_7.16.png b/docs/user/dashboard/images/lens_layerVisualizationTypeMenu_7.16.png
diff --git a/docs/user/dashboard/images/tutorial-top-values-of-field-8.16.0.png b/docs/user/dashboard/images/tutorial-top-values-of-field-8.16.0.png
diff --git a/docs/user/dashboard/images/view-details-dashboards-8.16.0.png b/docs/user/dashboard/images/view-details-dashboards-8.16.0.png
diff --git a/docs/user/dashboard/lens-advanced.asciidoc b/docs/user/dashboard/lens-advanced.asciidoc
@@ -6,25 +6,25 @@ In this tutorial, you'll use the ecommerce sample data to analyze sales trends,
 When you're done, you'll have a complete overview of the sample web logs data. 
 
 [role="screenshot"]
-image::images/lens_timeSeriesDataTutorialDashboard_8.3.png[Final dashboard with ecommerce sample data]
+image::images/lens_timeSeriesDataTutorialDashboard_8.3.png[Final dashboard with eCommerce sample data]
 
 Before you begin, you should be familiar with the <<kibana-concepts-analysts>>.
 
 [discrete]
 [[add-the-data-and-create-the-dashboard-advanced]]
 === Add the data and create the dashboard
 
-Add the sample ecommerce data, and create and set up the dashboard.
+Add the sample eCommerce data, and create and set up the dashboard.
 
 . On the home page, click *Try sample data*.
 
-. Click *Other sample data sets*. 
+. Expand *Other sample data sets*. 
 
 . On the *Sample eCommerce orders* card, click *Add data*.
 
 Create the dashboard where you'll display the visualization panels.
 
-. Open the main menu, then click *Dashboard*.
+. Open the main menu, then click *Dashboards*.
 
 . On the *Dashboards* page, click *Create dashboard*.
 
@@ -42,7 +42,7 @@ Open the visualization editor, then make sure the correct fields appear.
 [[custom-time-interval]]
 === Create visualizations with custom time intervals
 
-When you create visualizations with time series data, you can use the default time interval, or increase and decrease the interval. For performance reasons, the visualization editor allows you to choose the minimum time interval, but not the exact time interval. The interval limit is controlled by the <<histogram-maxbars, `histogram:maxBars`>> setting and <<set-time-filter,time range>>. 
+When you create visualizations with time series data, you can use the default time interval or increase and decrease the interval. For performance reasons, the visualization editor allows you to choose the minimum time interval, but not the exact time interval. The interval limit is controlled by the <<histogram-maxbars, `histogram:maxBars`>> setting and <<set-time-filter,time range>>. 
 
 To analyze the data with a custom time interval, create a bar chart that shows you how many orders were made at your store every hour:
 
@@ -55,13 +55,13 @@ The visualization editor creates a bar chart.
 [role="screenshot"]
 image::images/lens_clickAndDragZoom_7.16.gif[Cursor clicking and dragging across the bars to zoom in on the data]
 
-. In the layer pane, click *Count of Records*.
+. In the layer pane, click *Count of records*.
 
 .. Click *Advanced*. 
 
 .. From the *Normalize by unit* dropdown, select *per hour*, then click *Close*.
 +
-*Normalize by unit* converts `Count of Records` into `Count of records per hour` by dividing by 24.
+*Normalize by unit* converts `Count of records` into `Count of records per hour` by dividing by 24.
 
 .. In the *Name* field, enter `Number of orders`.
 
@@ -87,7 +87,7 @@ To identify the 75th percentile of orders, add a reference line:
 
 .. To display the name, select *Name* from *Text decoration*.
 
-.. From the *Icon* dropdown, select *Tag*.
+.. From the *Icon decoration* dropdown, select *Tag*.
 
 .. In the *Color* field, enter `#E7664C`.
 
@@ -120,12 +120,12 @@ Create the 95th price distribution percentile:
 
 . In the *Name* field, enter `95th`, then click *Close*.
 
-To copy a function, you drag it to the *Drop a field or click to add* field within the same group. To create the 90th percentile, duplicate the `95th` percentile:
+To copy a function, you drag it to the *Add or drag-and-drop a field* area within the same group. To create the 90th percentile, duplicate the `95th` percentile:
 
 . Drag the *95th* field to *Add or drag-and-drop a field* for *Vertical axis*.
 +
 [role="screenshot"]
-image::images/lens_advanced_2_2.gif[Easily duplicate the items with drag and drop]
+image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt8fb6969daa820faf/6700642c363a96bb08f48bee/drag-and-drop-a-field-8.16.0.gif[Easily duplicate the items with drag and drop]
 
 . Click *95th [1]*, then enter `90` in the *Percentile* field.
 
@@ -162,7 +162,7 @@ To analyze multiple visualization types, create an area chart that displays the
 
 Add a layer to display the customer traffic:
 
-. In the layer pane, click *Add layer > Visualization*.
+. In the layer pane, click *Add layer > Visualization > Line*.
 
 . From the *Available fields* list, drag *customer_id* to the *Vertical Axis* field in the second layer.
 
@@ -178,11 +178,6 @@ image::images/lens_advancedTutorial_numberOfCustomers_8.5.0.png[Number of custom
 
 . From the *Available fields* list, drag *order_date* to the *Horizontal Axis* field in the second layer.
 
-. In the second layer, open the *Layer visualization type* menu, then click *Line*.
-+
-[role="screenshot"]
-image::images/lens_layerVisualizationTypeMenu_7.16.png[Layer visualization type menu]
-
 . To change the position of the legend, open the *Legend* menu, then select the *Alignment* arrow that points up.
 +
 [role="screenshot"]
@@ -251,7 +246,7 @@ Configure the cumulative sum of store orders:
 
 . From the *Available fields* list, drag *Records* to the workspace.
 
-. In the layer pane, click *Count of Records*.
+. In the layer pane, click *Count of records*.
 
 . Click the *Cumulative sum* function.
 
@@ -271,6 +266,8 @@ Filter the results to display the data for only Saturday and Sunday:
 +
 The <<kuery-query,KQL filter>> displays all documents where `day_of_week` matches `Saturday` or `Sunday`.
 
+. Click *Close*.
+
 . Open the *Legend* menu, then click *Hide* next to *Display*.
 +
 [role="screenshot"]
@@ -282,7 +279,7 @@ image::images/lens_areaChartCumulativeNumberOfSalesOnWeekend_7.16.png[Area chart
 [[compare-time-ranges]]
 === Compare time ranges
 
-With *Time shift*, you can compare the data from different time ranges. To make sure the data correctly displays, choose a multiple of the date histogram interval when you use multiple time shifts. For example, you are unable to use a *36h* time shift for one series, and a *1d* time shift for the second series if the interval is *days*. 
+With *Time shift*, you can compare the data from different time ranges. To make sure the data displays correctly, choose a multiple of the date histogram interval when you use multiple time shifts. For example, you are unable to use a *36h* time shift for one series, and a *1d* time shift for the second series if the interval is *days*. 
 
 To compare two time ranges, create a line chart that compares the sales in the current week with sales from the previous week: 
 
@@ -292,11 +289,11 @@ To compare two time ranges, create a line chart that compares the sales in the c
 
 . From the *Available fields* list, drag *Records* to the workspace.
 
-. To duplicate *Count of Records*, drag *Count of Records* to *Add or drag-and-drop a field* for *Vertical axis* in the layer pane.
+. To duplicate *Count of records*, drag *Count of records* to *Add or drag-and-drop a field* for *Vertical axis* in the layer pane.
 
-To create a week-over-week comparison, shift *Count of Records [1]* by one week:
+To create a week-over-week comparison, shift *Count of records [1]* by one week:
 
-. In the layer pane, click *Count of Records [1]*.
+. In the layer pane, click *Count of records [1]*.
 
 . Click *Advanced*, select *1 week ago* from the *Time shift* dropdown, then click *Close*.
 +
@@ -322,9 +319,9 @@ To compare time range changes as a percent, create a bar chart that compares the
 
 . From the *Available fields* list, drag *Records* to the workspace.
 
-. In the layer pane, click *Count of Records*.
+. In the layer pane, click *Count of records*.
 
-. Click *Formula*, then enter `count() / count(shift='1w') - 1`.
+. Click *Formula*, then enter `count() / count(shift='1w') - 1` in the *Formula* field.
 
 . In the *Name* field, enter `Percent of change`.
 
@@ -375,15 +372,15 @@ image::images/lens_table_over_time.png[Date histogram table with groups for the
 [discrete]
 === Save the dashboard
 
-Now that you have a complete overview of your ecommerce sales data, save the dashboard.
+Now that you have a complete overview of your eCommerce sales data, save the dashboard.
 
 . In the toolbar, click *Save*.
 
-. On the *Save dashboard* window, enter `Ecommerce sales`, then click *Save*.
+. On the *Save dashboard* window, enter `eCommerce sales`.
 
 . Select *Store time with dashboard*.
 
 . Click *Save*.
 
 [role="screenshot"]
-image::images/lens_timeSeriesDataTutorialDashboard_8.3.png[Final dashboard with ecommerce sample data]
+image::images/lens_timeSeriesDataTutorialDashboard_8.3.png[Final dashboard with eCommerce sample data]
diff --git a/docs/user/dashboard/share-dashboards.asciidoc b/docs/user/dashboard/share-dashboards.asciidoc
@@ -4,7 +4,9 @@
 [[share-the-dashboard]]
 == Share dashboards
 
-To share the dashboard with a larger audience, click *Share* in the toolbar. For detailed information about the sharing options, refer to <<reporting-getting-started,Reporting>>.
+To share a dashboard with a larger audience, click *Share* in the toolbar. For detailed information about the sharing options, refer to <<reporting-getting-started,Reporting>>.
+
+image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt49f2b5a80ec89a34/66b9e919af508f4ac182c194/share-dashboard.gif[getting a shareable link for a dashboard]
 
 TIP: When sharing a dashboard with a link while a panel is in maximized view, the generated link will also open the dashboard on the same maximized panel view.
 

diff --git a/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc b/docs/user/dashboard/tutorial-create-a-dashboard-of-lens-panels.asciidoc
@@ -20,13 +20,13 @@ Add the sample web logs data, and create and set up the dashboard.
 
 . On the home page, click *Try sample data*.
 
-. Click *Other sample data sets*. 
+. Expand *Other sample data sets*. 
 
 . On the *Sample web logs* card, click *Add data*.
 
 Create the dashboard where you'll display the visualization panels.
 
-. Open the main menu, then click *Dashboard*.
+. Open the main menu, then click *Dashboards*.
 
 . Click *Create dashboard*.
 
@@ -57,7 +57,10 @@ To create the visualizations in this tutorial, you'll use the following fields:
 
 * *referer.keyword*
 
-To see the most frequent values in a field, hover over the field name, then click *i*.
+Click a field name to view more details, such as its top values and distribution.
+
+[role="screenshot"]
+image::https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltff29bc11413cc5d8/66fdc386762d3a15135abec4/tutorial-field-top-values-distribution.gif[Clicking a field name to view more details]
 
 [discrete]
 [[view-the-number-of-website-visitors]]
@@ -141,9 +144,9 @@ image::images/lens_lineChartMetricOverTimeBottomAxis_8.7.png[Bottom axis menu]
 
 Since you removed the axis labels, add a panel title:
 
-. Open the panel menu, then select *Panel settings*.
+. Open the panel menu, then select *Settings*.
 
-. In the *Title* field, enter `Median of bytes`, then click *Save*.
+. In the *Title* field, enter `Median of bytes`, then click *Apply*.
 +
 [role="screenshot"]
 image::images/lens_lineChartMetricOverTime_8.4.0.png[Line chart that displays metric data over time]
@@ -167,7 +170,7 @@ The visualization editor automatically applies the *Unique count* function. If y
 . Drag *request.keyword* to the workspace.
 +
 [role="screenshot"]
-image::images/lens_end_to_end_2_1_1.png[Vertical bar chart with top values of request.keyword by most unique visitors]
+image::images/tutorial-top-values-of-field-8.16.0.png[Vertical bar chart with top values of request.keyword by most unique visitors]
 +
 When you drag a text or IP address field to the workspace,
 the editor adds the *Top values* function ranked by *Count of records* to show the most frequent values.
@@ -208,7 +211,7 @@ Create a proportional visualization that helps you determine if your users trans
 
 . Click the *Sum* quick function, then click *Close*.
 
-. From the *Available fields* list, drag *bytes* to the *Break down by* field in the layer pane.
+. From the *Available fields* list, drag *bytes* to the *Breakdown* field in the layer pane.
 
 To select documents based on the number range of a field, use the *Intervals* function.
 When the ranges are non numeric, or the query requires multiple clauses, you could use the *Filters* function.
@@ -245,9 +248,9 @@ image::images/lens_pieChartCompareSubsetOfDocs_7.16.png[Pie chart that compares
 
 Add a panel title:
 
-. Open the panel menu, then select *Panel settings*.
+. Open the panel menu, then select *Settings*.
 
-. In the *Title* field, enter `Sum of bytes from large requests`, then click *Save*.
+. In the *Title* field, enter `Sum of bytes from large requests`, then click *Apply*.
 
 [discrete]
 [[histogram]]
@@ -278,9 +281,9 @@ image::images/lens_barChartDistributionOfNumberField_7.16.png[Bar chart that dis
 
 Add a panel title:
 
-. Open the panel menu, then select *Panel settings*.
+. Open the panel menu, then select *Settings*.
 
-. In the *Title* field, enter `Website traffic`, then click *Save*.
+. In the *Title* field, enter `Website traffic`, then click *Apply*.
 
 [discrete]
 [[treemap]]
@@ -342,9 +345,9 @@ image::images/lens_treemapMultiLevelChart_7.16.png[Treemap visualization]
 
 Add a panel title:
 
-. Open the panel menu, then select *Panel settings*.
+. Open the panel menu, then select *Settings*.
 
-. In the *Title* field, enter `Page views by location and referrer`, then click *Save*.
+. In the *Title* field, enter `Page views by location and referrer`, then click *Apply*.
 
 [float]
 [[arrange-the-lens-panels]]

diff --git a/docs/user/dashboard/view-dashboard-usage.asciidoc b/docs/user/dashboard/view-dashboard-usage.asciidoc
@@ -1,7 +1,9 @@
 = View dashboard usage
 
-You can check how much a dashboard is being used from its details, with a graph showing the total number of views during the last 90 days.
+You can check how much a dashboard is being used by clicking its *View details* icon in your list of dashboards. 
 
-You can access a dashboard details by clicking its associated information icon from your list of dashboards.
+image:images/view-details-dashboards-8.16.0.png[View details icon in the list of dashboards, width=105%]
+
+These details include a graph showing the total number of views during the last 90 days.
 
 image:images/dashboard-usage-count.png[Graph showing the number of views during the last 90 days]