(DOCSP-5013): Refactoring create a chart steps to step file

Author: jeff-allen-mongo

source/build-charts.txt

@@ -19,54 +19,7 @@ Create a Chart
 
 To build a new chart:
 
-1. From the :guilabel:`Dashboards` tab, select the dashboard where you
-   wish to add a new chart. For instructions on setting up a dashboard,
-   see :doc:`Dashboards </dashboards>`.
-
-#. Click the :guilabel:`Add Chart` button at the top-right corner of
-   the dashboard view.
-
-#. In the :guilabel:`Data Source` dropdown, select the data source to
-   be used for this chart. For information on adding data sources in
-   MongoDB Charts, see
-   :doc:`Data Sources <data-sources>`.
-
-#. In the :guilabel:`Chart Type` dropdown, select the type for this
-   chart.
-
-   .. note::
-
-      Each chart type provides different visualization options
-      for the fields in your data, reflected by various
-      *encoding channels*. These channels dictate how your data is
-      visualized and enable powerful
-      :manual:`aggregations </reference/operator/aggregation/>` for
-      your data. For details on the different encoding channel types,
-      refer to the :ref:`Encoding Channels <encoding-channels>`
-      page.
-
-#. Drag fields from the :guilabel:`Fields` section to the desired
-   :ref:`encoding channels <encoding-channels>` below the
-   :guilabel:`Chart Type` dropdown. The fields listed correspond to the
-   fields in your data source. You can search for a specific field in
-   your data source by using the :guilabel:`Filter` search bar at the
-   top of the :guilabel:`Fields` section.
-
-   .. note::
-
-      For details on how MongoDB Charts handles embedded objects and
-      embedded arrays in fields, see the
-      :ref:`Embedded Objects and Arrays <embedded-objects-arrays>`
-      page.
-
-#. Give your chart a title by hovering over the
-   :guilabel:`Enter a title for your chart` text clicking the
-   :guilabel:`Pencil Icon`. Click the :guilabel:`Green Check Mark` to
-   save your title.
-
-#. Once you are satisfied with your chart, click
-   :guilabel:`Save Changes`. This saves your chart to your dashboard
-   and redirects you to the dashboard view.
+.. include:: /includes/steps/build-new-chart.rst
 
 .. class:: hidden
 

source/includes/steps-build-new-chart.yaml

@@ -0,0 +1,75 @@
+title: Select a dashboard for your chart.
+ref: new-chart-dashboard
+level: 4
+content: |
+  From the :guilabel:`Dashboards` tab, select the dashboard where you
+  wish to add a new chart. For instructions on setting up a dashboard,
+  see :doc:`Dashboards </dashboards>`.
+---
+title: Click the :guilabel:`Add Chart` button at the top-right corner of
+       the dashboard view.
+ref: new-chart-click-add
+level: 4
+---
+title: Choose your chart's data source.
+ref: new-chart-data-source
+level: 4
+content: |
+  In the :guilabel:`Data Source` dropdown, select the data source to
+  be used for this chart. For information on adding data sources in
+  MongoDB Charts, see :doc:`Data Sources <data-sources>`.
+---
+title: Choose your chart type.
+ref: new-chart-type
+level: 4
+content: |
+  In the :guilabel:`Chart Type` dropdown, select the type for this
+  chart.
+
+  .. admonition:: Info
+    :class: note
+
+    Each chart type provides different visualization options
+    for the fields in your data, reflected by various
+    *encoding channels*. These channels dictate how your data is
+    visualized and enable powerful
+    :manual:`aggregations </reference/operator/aggregation/>` for
+    your data. For details on the different encoding channel types,
+    refer to the :ref:`Encoding Channels <encoding-channels>`
+    page.
+---
+title: Add fields to your chart.
+ref: new-chart-fields
+level: 4
+content: |
+  Drag fields from the :guilabel:`Fields` section to the desired
+  :ref:`encoding channels <encoding-channels>` below the
+  :guilabel:`Chart Type` dropdown. The fields listed correspond to the
+  fields in your data source. You can search for a specific field in
+  your data source by using the :guilabel:`Filter` search bar at the
+  top of the :guilabel:`Fields` section.
+
+  .. seealso::
+
+     For details on how MongoDB Charts handles embedded objects and
+     embedded arrays in fields, see the
+     :ref:`Embedded Objects and Arrays <embedded-objects-arrays>`
+     page.
+
+---
+title: Title your chart.
+ref: new-chart-title
+level: 4
+content: |
+  Give your chart a title by hovering over the
+  :guilabel:`Enter a title for your chart` text clicking the
+  :guilabel:`Pencil Icon`. Click the :guilabel:`Green Check Mark` to
+  save your title.
+---
+title: Save your chart.
+ref: new-chart-save
+level: 4
+content: |
+  Once you are satisfied with your chart, click
+  :guilabel:`Save Changes`. This saves your chart to your dashboard
+  and redirects you to the dashboard view.