DOCSP-2657 - Minor tutorial adjustments for consistency.

Author: jdestefano-mongo

Makefile

@@ -45,4 +45,5 @@ screenshots:
 	mkdir -p screenshots-temp/charts/
 	cd build/docs-tools/tools/screenshot-tool && npm install
 	#node build/docs-tools/tools/screenshot-tool/screenshots.js `pwd`/screenshot-scripts/order-tutorial-dashboard-final.js
-	node build/docs-tools/tools/screenshot-tool/screenshots.js `pwd`/screenshot-scripts/user-management.js
+	#node build/docs-tools/tools/screenshot-tool/screenshots.js `pwd`/screenshot-scripts/user-management.js
+	node build/docs-tools/tools/screenshot-tool/screenshots.js `pwd`/screenshot-scripts/movie-tutorial.js

config/sphinx_local.yaml

@@ -16,6 +16,7 @@ theme:
      - /dashboards
      - /administration
      - /build-charts
+     - /tutorials
      - /tutorial/order-data/order-data-tutorial-overview
      - /tutorial/movie-details/movie-details-tutorial-overview
      - /chart-types

screenshot-scripts/movie-tutorial.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const screenshotNames = ['movie-tutorial-dashboard-final.png'];
+const screenshotDir = './screenshots-temp';
+const origImageDir = './source/images/charts';
+
+exports.run = async function (options) {
+  const nightmare = options.nightmare;
+  const originalPath = `${origImageDir}/${screenshotNames[0]}`;
+  const screenshotPath = `${screenshotDir}/${screenshotNames[0]}`;
+
+  await nightmare.goto('http://charts.mongodb.parts')
+  await nightmare.wait('input#email')
+  await nightmare.type('input#email', '<USERNAME>')
+  await nightmare.type('input#password', '<PASSWORD>')
+  await nightmare.click('[data-test-id="login-form-submit-button"]')
+  await nightmare.wait('a[href="/dashboards"]')
+  await nightmare.click('a[href="/dashboards"]')
+  // await nightmare.wait('[class^="Charts_dashboard-overview_list"]')
+  await nightmare.wait('a[href="/dashboards/983843bf-2aee-4ac1-bf39-37e4814e2fd9"]')
+  await nightmare.click('a[href="/dashboards/983843bf-2aee-4ac1-bf39-37e4814e2fd9"]')
+  await nightmare.wait(5000)
+  await nightmare.screenshot(screenshotPath)
+  await nightmare.wait(500)
+  await nightmare.end();
+
+  return [[originalPath, screenshotPath]];
+}
+
+exports.nightmare_props = {
+    show: true,
+    typeInterval: 20,
+    height: 2000,
+    width: 1500,
+    webPreferences: {
+      zoomFactor: 1.2
+    }
+}

source/images/charts/movie-tutorial-dashboard-final.png

@@ -1,6 +1,3 @@
-Add the Data Collection as a Data Source
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
 Now that the data is in the desired collection, add the collection as a
 :doc:`data source </data-sources>` in |charts|. Adding a
 collection as a data source links the collection to |charts-short| and

source/includes/add-data-source-steps.rst

@@ -50,22 +50,29 @@ content: |
      operation to return the total number of award wins for each
      director.
 ---
-title: Add a query filter.
-ref: add-query-filter
+title: Apply a limit to the X axis.
+ref: add-limit
 level: 4
 content: |
 
-  a. At this point there are too many columns in our X axis to show
-     any meaningful results. To bring the number down to a manageable
-     level, add a filter. In the :guilabel:`Filters` box, add the
-     following query filter and click the :guilabel:`Apply` button:
+  At this point there are too many columns in our X axis to show any
+  meaningful results. To bring the number down to a manageable level,
+  we'll sort the directors by their total number of awards won in
+  descending order, then apply a :ref:`limit <charts-limit-data>` to get
+  the top ten:
 
-     .. code-block:: javascript
+  1. In the :guilabel:`X Axis` channel, expand the
+     :guilabel:`Sort By` dropdown and select
+     :guilabel:`Aggregated Value`.
 
-        { 'awards.wins': { $gte: 50 } }
+  #. To order the results in descending order, click the
+     :guilabel:`AZ` order button located to the right of the
+     :guilabel:`Sort By` dropdown.
+
+  #. Apply a limit to the number of columns in the :guilabel:`X Axis` by
+     toggling :guilabel:`Limit Results`, then setting :guilabel:`Show`
+     to ``10``.
 
-     This query includes only directors with at least 50 awards. The
-     chart is now much more legible.
 ---
 title: Group awards by genre.
 ref: add-genres
@@ -82,18 +89,6 @@ content: |
         shown in the columns may not be the exact number of awards
         for each director.
 ---
-title: Sort the data by award wins.
-ref: sort-data
-level: 4
-content: |
-  a. In the X axis encoding channel, click on the :guilabel:`Sort By`
-     dropdown menu and select :guilabel:`Aggregated Value` to sort
-     the columns by the total number of award wins.
-
-  #. Switch the sorting order to highest to lowest by clicking the
-     sort icon in the lower right corner of the X axis encoding
-     channel panel.
----
 title: Title your chart.
 ref: bar-chart-add-title
 level: 4

source/includes/steps-column-chart-award-wins.yaml

@@ -12,4 +12,4 @@ description: |
 file: /administration/start-stop-charts
 description: |
   Instructions for starting and stopping the |charts| application.
-...
+...

source/includes/toc-administration.yaml

@@ -0,0 +1,13 @@
+file: /tutorial/order-data/order-data-tutorial-overview
+description: |
+  Create a dashboard to visualize order data from a mock office supply
+  company. Build charts to gain insight on sales by location, the types
+  of items sold, and customer demographics.
+---
+file: /tutorial/movie-details/movie-details-tutorial-overview
+description: |
+  Follow this tutorial to create a dashboard to visualize movie metadata
+  and viewer rating data. Build charts to gain insight on which
+  directors won the most awards and how award-nominated movies
+  correspond to their viewer rating.
+...