[E&A] Refine dashboards & viz sections

explore-analyze/dashboards.md

@@ -7,7 +7,7 @@ mapped_pages:
 
 Dashboards are the best way to visualize and share insights from your {{es}} data.
 
-A **dashboard** is made of one or more **panels** that you can organize as you like. Each panel can display various types of content: *visualizations* such as charts, tables, metrics, and maps, *static annotations* like text or images, or even *specialized views* for Machine Learning or Observability data.
+A **dashboard** is made of one or more **panels** that you can organize as you like. Each panel can display various types of content: **visualizations** such as charts, tables, metrics, and maps, **static annotations** like text or images, or even **specialized views** for Machine Learning or Observability data.
 
 ![Example dashboard](../images/kibana-dashboard-overview.png "")
 

explore-analyze/dashboards/add-controls.md

@@ -10,31 +10,16 @@ mapped_pages:
 There are three types of controls:
 
 * [**Options list**](#create-and-add-options-list-and-range-slider-controls) — Adds a dropdown that allows to filter data by selecting one or more values.
-
-    For example, if you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, you can add an options list for the `machine.os.keyword` field that allows you to display only the logs generated from `osx` and `ios` operating systems.
-
-    :::{image} ../../images/kibana-dashboard_controlsOptionsList_8.7.0.png
-    :alt: Options list control for the `machine.os.keyword` field with the `osx` and `ios` options selected
-    :class: screenshot
-    :::
+  For example, if you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, you can add an options list for the `machine.os.keyword` field that allows you to display only the logs generated from `osx` and `ios` operating systems.
+  ![Options list control for the `machine.os.keyword` field with the `osx` and `ios` options selected](../../images/kibana-dashboard_controlsOptionsList_8.7.0.png "title =50%")
 
 * [**Range slider**](#create-and-add-options-list-and-range-slider-controls) — Adds a slider that allows to filter the data within a specified range of values. This type of control only works with numeric fields.
-
-    For example, if you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, you can add a range slider for the `hour_of_day` field that allows you to display only the log data from 9:00AM to 5:00PM.
-
-    :::{image} ../../images/kibana-dashboard_controlsRangeSlider_8.3.0.png
-    :alt: Range slider control for the `hour_of_day` field with a range of `9` to `17` selected
-    :class: screenshot
-    :::
+  For example, if you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, you can add a range slider for the `hour_of_day` field that allows you to display only the log data from 9:00AM to 5:00PM.
+  ![Range slider control for the `hour_of_day` field with a range of `9` to `17` selected](../../images/kibana-dashboard_controlsRangeSlider_8.3.0.png "title =50%")
 
 * [**Time slider**](#add-time-slider-controls) — Adds a time range slider that allows to filter the data within a specified range of time, advance the time range backward and forward by a unit that you can define, and animate your change in data over the specified time range.
-
-    For example, you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, and the global time filter is **Last 7 days**. When you add the time slider, you can click the previous and next buttons to advance the time range backward or forward, and click the play button to watch how the data changes over the last 7 days.
-
-    :::{image} https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt672f3aaadf9ea5a6/6750dd6c2452f972af0a88b4/dashboard_timeslidercontrol_8.17.0.gif
-    :alt: Time slider control for the the Last 7 days
-    :class: screenshot
-    :::
+  For example, you are using the **[Logs] Web Traffic** dashboard from the sample web logs data, and the global time filter is **Last 7 days**. When you add the time slider, you can click the previous and next buttons to advance the time range backward or forward, and click the play button to watch how the data changes over the last 7 days.
+  ![Time slider control for the the Last 7 days](https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt672f3aaadf9ea5a6/6750dd6c2452f972af0a88b4/dashboard_timeslidercontrol_8.17.0.gif)
 
 
 
@@ -44,19 +29,14 @@ To add interactive Options list and Range slider controls, create the controls,
 
 1. Open or create a new dashboard.
 2. In **Edit** mode, select **Controls** > **Add control** in the dashboard toolbar.
-
-    :::{image} ../../images/kibana-dashboard-add-control-8.15.0.png
-    :alt: Controls button in the toolbar with the Add Control option selected
-    :class: screenshot
-    :::
+   ![Controls button in the toolbar with the Add Control option selected](../../images/kibana-dashboard-add-control-8.15.0.png "title =60%")
 
 3. On the **Create control** flyout, from the **Data view** dropdown, select the data view that contains the field you want to use for the **Control**.
 4. In the **Field** list, select the field you want to filter on.
 5. Under **Control type**, select whether the control should be an **Options list** or a **Range slider**.
-
-    ::::{tip}
-    Range sliders are for Number type fields only.
-    ::::
+   ::::{tip}
+   Range sliders are for Number type fields only.
+   ::::
 
 6. Define how you want the control to appear:
 
@@ -75,9 +55,9 @@ To add interactive Options list and Range slider controls, create the controls,
             * **Contains**: Show options that *contain* the entered value. This setting option is only available for *string* type fields. Results can take longer to show with this option.
             * **Exact**: Show options that are a 100% match with the entered value.
 
-                ::::{tip}
-                The search is not case sensitive. For example, searching for `ios` would still retrieve `iOS` if that value exists.
-                ::::
+              ::::{tip}
+              The search is not case sensitive. For example, searching for `ios` would still retrieve `iOS` if that value exists.
+              ::::
 
         * **Ignore timeout for results** delays the display of the list of values to when it is fully loaded. This option is useful for large data sets, to avoid missing some available options in case they take longer to load and appear when using the control.
 
@@ -94,11 +74,7 @@ You can add one interactive time slider control to a dashboard.
 
 1. Open or create a new dashboard.
 2. In **Edit** mode, select **Controls** > **Add time slider control**.
-
-    :::{image} ../../images/kibana-dashboard-add-time-slider-control-8.15.0.png
-    :alt: Controls button in the toolbar with the Add a time slider option selected
-    :class: screenshot
-    :::
+   ![Controls button in the toolbar with the Add a time slider option selected](../../images/kibana-dashboard-add-time-slider-control-8.15.0.png "title =50%")
 
 3. The time slider control uses the time range from the global time filter. To change the time range in the time slider control, [change the global time filter](../query-filter/filtering.md).
 4. Save the dashboard. The control can now be used.
@@ -109,11 +85,7 @@ You can add one interactive time slider control to a dashboard.
 Several settings that apply to all controls of the same dashboard are available.
 
 1. In **Edit** mode, select **Controls** > **Settings**.
-
-    :::{image} ../../images/kibana-dashboard-controls-settings-8.15.0.png
-    :alt: Controls button in the toolbar with the Settings option selected
-    :class: screenshot
-    :::
+   ![Controls button in the toolbar with the Settings option selected](../../images/kibana-dashboard-controls-settings-8.15.0.png "title =60%")
 
 2. On the **Control settings** flyout, configure the following settings:
 

explore-analyze/dashboards/arrange-panels.md

@@ -15,9 +15,9 @@ In the toolbar, click **Edit**, then use the following options:
 * To resize, click the resize control, then drag to the new dimensions.
 * To maximize to full screen, open the panel menu and click **Maximize**.
 
-    ::::{tip}
-    If you [share](sharing.md) a dashboard while viewing a full screen panel, the generated link will directly open the same panel in full screen mode.
-    ::::
+  ::::{tip}
+  If you [share](sharing.md) a dashboard while viewing a full screen panel, the generated link will directly open the same panel in full screen mode.
+  ::::
 
 
 

explore-analyze/dashboards/building.md

@@ -3,7 +3,7 @@ mapped_pages:
   - https://www.elastic.co/guide/en/kibana/current/create-dashboards.html
 ---
 
-# Building [create-dashboards]
+# Building dashboards [create-dashboards]
 
 {{kib}} offers many ways to build powerful dashboards that will help you visualize and keep track of the most important information contained in your {{es}} data.
 
@@ -16,9 +16,9 @@ $$$dashboard-minimum-requirements$$$
 To create or edit dashboards, you first need to:
 
 * have [data indexed into {{es}}](https://www.elastic.co/guide/en/elasticsearch/reference/current/getting-started-index.html) and a [data view](../find-and-organize/data-views.md). A data view is a subset of your {{es}} data, and allows you to load just the right data when building a visualization or exploring it.
-
-    ::::{tip}
-    If you don’t have data at hand and still want to explore dashboards, you can import one of the [sample data sets](../../manage-data/ingest/sample-data.md) available.
-    ::::
+    
+  ::::{tip}
+  If you don’t have data at hand and still want to explore dashboards, you can import one of the [sample data sets](../../manage-data/ingest/sample-data.md) available.
+  ::::
 
 * have sufficient permissions on the **Dashboard** feature. If that’s not the case, you might get a read-only indicator. A {{kib}} administrator can [grant you the required privileges](../../deploy-manage/users-roles/cluster-or-deployment-auth/kibana-privileges.md).

explore-analyze/dashboards/create-dashboard-of-panels-with-ecommerce-data.md

@@ -46,10 +46,10 @@ To analyze the data with a custom time interval, create a bar chart that shows y
 
 2. To zoom in on the data, click and drag your cursor across the bars.
 
-    :::{image} ../../images/kibana-lens_clickAndDragZoom_7.16.gif
-    :alt: Cursor clicking and dragging across the bars to zoom in on the data
-    :class: screenshot
-    :::
+   :::{image} ../../images/kibana-lens_clickAndDragZoom_7.16.gif
+   :alt: Cursor clicking and dragging across the bars to zoom in on the data
+   :class: screenshot
+   :::
 
 3. In the layer pane, click **Count of records**.
 
@@ -81,10 +81,10 @@ To identify the 75th percentile of orders, add a reference line:
 
 4. Click **Close**.
 
-    :::{image} ../../images/kibana-lens_barChartCustomTimeInterval_8.3.png
-    :alt: Orders per day
-    :class: screenshot
-    :::
+   :::{image} ../../images/kibana-lens_barChartCustomTimeInterval_8.3.png
+   :alt: Orders per day
+   :class: screenshot
+   :::
 
 5. Click **Save and return**.
 
@@ -109,20 +109,20 @@ To copy a function, you drag it to the **Add or drag-and-drop a field** area wit
 
 1. Drag the **95th** field to **Add or drag-and-drop a field** for **Vertical axis**.
 
-    :::{image} https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt8fb6969daa820faf/6700642c363a96bb08f48bee/drag-and-drop-a-field-8.16.0.gif
-    :alt: Easily duplicate the items with drag and drop
-    :class: screenshot
-    :::
+   :::{image} https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt8fb6969daa820faf/6700642c363a96bb08f48bee/drag-and-drop-a-field-8.16.0.gif
+   :alt: Easily duplicate the items with drag and drop
+   :class: screenshot
+   :::
 
 2. Click **95th [1]**, then enter `90` in the **Percentile** field.
 3. In the **Name** field enter `90th`, then click **Close**.
 4. To create the `50th` and `10th` percentiles, repeat the duplication steps.
 5. Open the **Left Axis** menu, select **Custom** from the **Axis title** dropdown, then enter `Percentiles for product prices` in the **Axis title** field.
 
-    :::{image} ../../images/kibana-lens_lineChartMultipleDataSeries_7.16.png
-    :alt: Percentiles for product prices chart
-    :class: screenshot
-    :::
+   :::{image} ../../images/kibana-lens_lineChartMultipleDataSeries_7.16.png
+   :alt: Percentiles for product prices chart
+   :class: screenshot
+   :::
 
 6. Click **Save and return**.
 
@@ -152,17 +152,17 @@ Add a layer to display the customer traffic:
     2. In the **Series color** field, enter `#D36086`.
     3. Click **Right** for the **Axis side**, then click **Close**.
 
-        :::{image} ../../images/kibana-lens_advancedTutorial_numberOfCustomers_8.5.0.png
-        :alt: Number of customers area chart in Lens
-        :::
+       :::{image} ../../images/kibana-lens_advancedTutorial_numberOfCustomers_8.5.0.png
+       :alt: Number of customers area chart in Lens
+       :::
 
 4. From the **Available fields** list, drag **order_date** to the **Horizontal Axis** field in the second layer.
 5. To change the position of the legend, open the **Legend** menu, then select the **Alignment** arrow that points up.
 
-    :::{image} ../../images/kibana-lens_mixedXYChart_7.16.png
-    :alt: Layer visualization type menu
-    :class: screenshot
-    :::
+   :::{image} ../../images/kibana-lens_mixedXYChart_7.16.png
+   :alt: Layer visualization type menu
+   :class: screenshot
+   :::
 
 6. Click **Save and return**.
 
@@ -199,10 +199,10 @@ For each order category, create a filter:
 6. Click **Close**.
 7. Open the **Legend** menu, then select the **Alignment** arrow that points up.
 
-    :::{image} ../../images/kibana-lens_areaPercentageNumberOfOrdersByCategory_8.3.png
-    :alt: Prices share by category
-    :class: screenshot
-    :::
+   :::{image} ../../images/kibana-lens_areaPercentageNumberOfOrdersByCategory_8.3.png
+   :alt: Prices share by category
+   :class: screenshot
+   :::
 
 8. Click **Save and return**.
 
@@ -235,10 +235,11 @@ Filter the results to display the data for only Saturday and Sunday:
 4. Click **Close**.
 5. Open the **Legend** menu, then click **Hide** next to **Display**.
 
-    :::{image} ../../images/kibana-lens_areaChartCumulativeNumberOfSalesOnWeekend_7.16.png
-    :alt: Area chart with cumulative sum of orders made on the weekend
-    :class: screenshot
-    :::
+   :::{image} ../../images/kibana-lens_areaChartCumulativeNumberOfSalesOnWeekend_7.16.png
+   :alt: Area chart with cumulative sum of orders made on the weekend
+   :class: screenshot
+   :width: 50%
+   :::
 
 6. Click **Save and return**.
 
@@ -259,12 +260,13 @@ To create a week-over-week comparison, shift **Count of records [1]** by one wee
 1. In the layer pane, click **Count of records [1]**.
 2. Click **Advanced**, select **1 week ago** from the **Time shift** dropdown, then click **Close**.
 
-    To use custom time shifts, enter the time value and increment, then press Enter. For example, enter **1w** to use the **1 week ago** time shift.
+   To use custom time shifts, enter the time value and increment, then press Enter. For example, enter **1w** to use the **1 week ago** time shift.
 
-    :::{image} ../../images/kibana-lens_time_shift.png
-    :alt: Line chart with week-over-week sales comparison
-    :class: screenshot
-    :::
+   :::{image} ../../images/kibana-lens_time_shift.png
+   :alt: Line chart with week-over-week sales comparison
+   :class: screenshot
+   :width: 50%
+   :::
 
 3. Click **Save and return**.
 
@@ -285,10 +287,11 @@ To compare time range changes as a percent, create a bar chart that compares the
 6. From the **Value format** dropdown, select **Percent**, then enter `0` in the **Decimals** field.
 7. Click **Close**.
 
-    :::{image} ../../images/kibana-lens_percent_chage.png
-    :alt: Bar chart with percent change in sales between the current time and the previous week
-    :class: screenshot
-    :::
+   :::{image} ../../images/kibana-lens_percent_chage.png
+   :alt: Bar chart with percent change in sales between the current time and the previous week
+   :class: screenshot
+   :width: 50%
+   :::
 
 8. Click **Save and return**.
 
@@ -317,10 +320,11 @@ To split the metric, add columns for each continent using the **Columns** field:
 
 1. From the **Available fields** list, drag **geoip.continent_name** to the **Split metrics by** field in the layer pane.
 
-    :::{image} ../../images/kibana-lens_table_over_time.png
-    :alt: Date histogram table with groups for the customer count metric
-    :class: screenshot
-    :::
+   :::{image} ../../images/kibana-lens_table_over_time.png
+   :alt: Date histogram table with groups for the customer count metric
+   :class: screenshot
+   :width: 50%
+   :::
 
 2. Click **Save and return**.