DOCSP-25814 surfaced methods on sidebar TOC (#623)

* surfaced methods on sidebar TOC

Author: kyuan-mongodb

snooty.toml

@@ -18,7 +18,9 @@ toc_landing_pages = ["/installation", "/dashboards",
                      "/customize-charts/conditional-formatting",
                      "/embed-charts-and-dashboards",
                      "/embedding-charts",
+                     "/embedded-chart-options",
                      "/embedding-dashboards",
+                     "/embedded-dashboard-options",
                      "/view-export-chart-data", 
                      "/embedding-tutorials",
                      "/embedding-charts-sdk",

source/embed-charts-and-dashboards.txt

@@ -23,7 +23,7 @@ with a :ref:`charts iframe <embedding-charts-iframe>` or a
 :ref:`dashboards iframe <embedding-dashboards-iframe>`.
 
 |charts-short| offers a :guilabel:`Getting Started` UI to help you 
-learn how to embed charts and dashboards with an iFrame or Javascript 
+learn how to embed charts and dashboards with an iFrame or JavaScript 
 SDK. To learn more, see :ref:`get-started-embedding`.
 
 To learn how to embed charts and dashboards in a web application, see 

source/embedded-chart-options.txt

@@ -36,13 +36,14 @@ The following options are available for embedded charts:
      - Purpose
 
    * - :ref:`embedded-chart-sdk-options`
-     - Provides the Javascript ``createChart()`` method for rendering a
-       chart within a web page. You can control properties like the
-       height and width of the chart.
+     - Provides the JavaScript ``createChart()`` method for rendering a
+       chart within a web page. You can control properties such as the
+       height and width of the chart. To learn more, see
+       :ref:`embedded-charts-options-table`.
 
    * - :ref:`embedded-chart-iframe-options`
      - You can set chart options within an iframe by adding inline style
-       tags and by adding query parameters to the chart URL.
+       tags and query parameters to the chart URL.
 
 .. _refresh-behavior:
 

source/embedded-charts-options/embedded-sdk.txt

@@ -1,9 +1,9 @@
 .. _embedded-chart-sdk-options:
 .. _sdk-option-reference:
 
-====================
-Embedded SDK Options
-====================
+===========================
+Embedded Charts SDK Options
+===========================
 
 .. default-domain:: mongodb
 
@@ -56,12 +56,14 @@ interval and other aspects.
       });
       await chart.render(embedContainer);
 
+.. _embedded-charts-options-table:
+
 Embedded Chart Options
 ----------------------
 
 .. please keep these alphabetized
 
-You can specify the following options for an embedded chart:
+The ``createChart()`` method takes the following options:
 
 .. list-table::
    :header-rows: 1
@@ -79,7 +81,7 @@ You can specify the following options for an embedded chart:
        omitted, charts don't automatically refresh.
 
        Use this option with the ``maxDataAge`` option to
-       configure how often the chart refreshes. 
+       configure automatic dashboard refresh frequency.
      - no
 
    * - ``background``
@@ -89,10 +91,10 @@ You can specify the following options for an embedded chart:
 
        - A color hex code
        - A |css| color name
-       - ``transparent`` for a transparent background
+       - A transparent background using the value ``transparent``
 
-       If you don't provide the background the background color defaults
-       to the current ``theme``:
+       If omitted, the background color defaults to the current
+       ``theme``:
 
        - ``#FFFFFF`` for the ``light`` theme, or
        - ``#21313C`` for the ``dark`` theme.
@@ -135,7 +137,7 @@ You can specify the following options for an embedded chart:
 
    * - ``height``
      - number
-     - Height of the chart. If you don't provide the height, the chart defaults to
+     - Height of the chart. If omitted, the chart defaults to
        the height of its container. If you provide a value without units,
        the unit defaults to pixels (px).
      - no
@@ -147,6 +149,12 @@ You can specify the following options for an embedded chart:
        |charts| renders the chart with data from the cache if
        the data is less than one hour old.
 
+
+
+       If the data from the cache is more than one hour old,
+       |charts-short| queries the data source for the latest data,
+       refreshes the cache, and renders the chart using this data.
+
        To learn how |charts| loads data from the cache when
        loading or refreshing the chart based on the
        ``autoRefresh`` and ``maxDataAge`` values, see
@@ -185,9 +193,9 @@ You can specify the following options for an embedded chart:
      - number
      - Width of the chart. 
 
-       If you don't provide the width, the chart defaults to
+       If omitted, the chart defaults to
        the width of its container. If you provide a value without units,
-       the unit defaults to pixels (px).
+       it defaults to pixels (px).
      - no
 
 Chart Configuration
@@ -199,69 +207,74 @@ After you create a chart, you can control the configuration
 of the chart by calling methods on the ``Chart`` instance returned
 by ``ChartsEmbedSDK.createChart({ ... })``.
 
-.. list-table::
-   :header-rows: 1
-   :stub-columns: 1
-   :widths: 40 60
+``getCustomizableAxes()``
+~~~~~~~~~~~~~~~~~~~~~~~~~
 
-   * - Method
-     - Description
+Returns the chart axes for the embedded chart.
 
-   * - ``getCustomizableAxes()``
-     - Returns the chart axes for the embedded chart.
+``setAutoRefresh(boolean)``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-   * - ``setAutoRefresh(boolean)``
-     - Specifies whether the chart automatically refreshes. If
-       omitted, charts don't automatically refresh.
+Specifies whether the chart automatically refreshes. If
+omitted, charts don't automatically refresh.
 
-       Use this method with the ``setMaxDataAge`` method to
-       configure how often the chart refreshes.
-
-   * - ``setFilter(object)``
-     - Applies a :ref:`query filter <filter-embedded-charts>` 
-       to the embedded chart or chart within an 
-       :ref:`embedded dashboard <embedding-dashboards>`. This 
-       method expects an object that contains valid query 
-       operators. Any fields referenced in this filter must be 
-       added to the :guilabel:`Allowed filter fields` 
-       list in the ``Embed Chart`` modal window.
-       An empty document ``{}`` is equivalent to no filter.
-
-       See the :ref:`Embedding Tutorials 
-       <embedding-tutorials>` for
-       more information about enabling embedding for a chart 
-       and allowing fields for filter use.
-
-   * - ``setMaxDataAge(number)``
-     - Specifies the maximum age of data to load from the cache
-       when loading or refreshing the chart. If omitted,
-       |charts| renders the chart with data from the cache if
-       the data is less than one hour old.
+Use this method with the ``setMaxDataAge`` method to
+configure how often the chart refreshes.
 
-       To learn how |charts| loads data from the cache when
-       loading or refreshing the chart based on the
-       ``setAutoRefresh`` and ``setMaxDataAge`` values, see
-       :ref:`refresh-behavior`.
+``setFilter(object)``
+~~~~~~~~~~~~~~~~~~~~~
+
+Applies a :ref:`query filter <filter-embedded-charts>` 
+to the embedded chart or chart within an 
+:ref:`embedded dashboard <embedding-dashboards>`. This 
+method takes an object with valid query 
+operators. Any fields referenced in this filter must be
+added to the :guilabel:`Allowed filter fields` 
+list in the ``Embed Chart`` modal window.
+An empty document ``{}`` is equivalent to no filter.
+
+See the :ref:`Embedding Tutorials <embedding-tutorials>` for
+more information about enabling embedding for a chart 
+and allowing fields for filter use.
+
+``setMaxDataAge(number)``
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Specifies the maximum age of data to load from the cache
+when loading or refreshing the chart. If omitted,
+|charts| renders the chart with data from the cache if
+the data is less than one hour old.
+
+If the data from the cache is more than one hour old,
+|charts-short| queries the data source for the latest data,
+refreshes the cache, and renders the chart using this data.
+
+To learn how |charts| loads data from the cache when
+loading or refreshing the chart based on the
+``setAutoRefresh`` and ``setMaxDataAge`` values, see
+:ref:`refresh-behavior`.
+
+``setRenderingSpecOverride(object)``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Specifies how to customize a chart. 
 
-   * - ``setRenderingSpecOverride(object)``
-     - Specifies how to customize a chart. 
+For a list of available customizations, see
+:ref:`rendering-spec-options`.
 
-       For a list of available
-       customizations, see :ref:`rendering-spec-options`.
+``setTheme("dark" | "light")``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-   * - ``setTheme("dark" | "light")``
-     - Sets the current theme of the embedded chart. When setting the
-       theme to ``dark``, you need to ensure that a chart's
-       background color has appropriate contrast so that the information
-       remains visible.
+Sets the current theme of the embedded chart. When setting the
+theme to ``dark``, you need to ensure that a chart's
+background color has appropriate contrast so that the information
+remains visible.
 
-       .. seealso::
+.. seealso::
 
-         - `Charts Embedding SDK API Documentation
-           <https://www.npmjs.com/package/@mongodb-js/charts-embed-dom>`__
+   - `Charts Embedding SDK API Documentation <https://www.npmjs.com/package/@mongodb-js/charts-embed-dom>`__
 
-         - `Charts Embedding SDK examples
-           <https://github.com/mongodb-js/charts-embed-sdk/blob/master/examples>`__
+   - `Charts Embedding SDK examples <https://github.com/mongodb-js/charts-embed-sdk/blob/master/examples>`__
 
 Example
 ~~~~~~~

source/embedded-charts-options/iframe.txt

@@ -13,7 +13,7 @@ Iframe Options
    :class: singlecol
 
 You can set chart options within an iframe by adding inline style
-tags and by adding query parameters to the chart URL. Inline style
+tags and query parameters to the chart URL. Inline style
 tags allow you to specify display options such as height, width,
 background color, and border width. Query parameters allow you to
 specify a refresh interval for your chart, as well as a light or