1.26 release (#493)

* (DOCSP-10895): Add new dashboard screenshot

* (DOCSP-17407): Update docs to reflect new color customization UI (#485)

* (DOCSP-17407): Update docs to reflect new color customization UI

* Tech review feedback

* (DOCSP-17715): Update customization page with latest UI screenshots (#490)

* (DOCSP-17655): highlight elements on an embedded chart (#488)

* DOCSP-17655 highlight elements on an embedded chart

* DOCSP-17655 updates for review feedback

* DOCSP-17655 updates to example per feedback

* DOCSP-17655 updates for copy review feedback

* (DOCSP-17338) Adds new options to period filter (#486)

* (DOCSP-17338) Adds new options to period filter

* Includes copy review changes

* (DOCSP-17330) Adds button to opt a chart into/out of dashboard filtering (#487)

* (DOCSP-17330) Adds button to opt a chart into/out of dashboard filtering

* Includes changes from copy review

* Includes tech review changes

* (DOCSP-17562), (DOCSP-17563), (DOCSP-17564): Added details for the fullscreen charts view. (#491)

* (DOCSP-17562), (DOCSP-17563), (DOCSP-17564): Added details for the fullscreen charts view.

* (DOCSP-17562), (DOCSP-17563), (DOCSP-17564): Incorporated Kanchana's feedback.

* (DOCSP-17926): Charts 1.26 Release notes (#492)

* (DOCSP-17926): Charts 1.26 Release notes

* Copy/tech review

Co-authored-by: kanchana-mongodb <[email protected]>
Co-authored-by: sarahsimpers <[email protected]>
Co-authored-by: corryroot <[email protected]>

Author: 4 people

source/customize-charts/general-customization.txt

@@ -52,28 +52,35 @@ series.
 Depending on the chart type, each color swatch has a corresponding 
 number or a corresponding name:
 
-- Single-series charts or multi-series charts created
-  :ref:`using the Series method<charts-series-encoding>`
-  have numbered color swatches.
-- Multi-series charts created by
-  :ref:`mapping multiple fields<multiple-field-mappings>` 
+- Single-series charts have a single numbered swatch.
+- Multi-series charts built by
+  :ref:`mapping multiple fields <multiple-field-mappings>` 
   have color swatches with the names of your selected fields.
+- Multi-series charts built with a numeric or date field in the 
+  :ref:`Series channel <charts-series-encoding>` have numbered color 
+  swatches.
+- Multi-series charts built with a string field in the
+  :ref:`Series channel <charts-series-encoding>` allow you to
+  choose how you want to assign color. For numbered color swatches, select 
+  the :guilabel:`By Order` option. For swatches with
+  field names, select the :guilabel:`By Series` option.
 
 To change the color of the corresponding data series, click the color swatch. 
 You can select a new color with a color slider, by
 entering a hex value, by entering RGB values, or by choosing a
-predefined color. You can also drag and drop numbered color swatches to
+predefined color. You can also drag and drop color swatches to
 rearrange the colors in your palette.
 
 .. note::
 
-   By default, the custom color picker shows color swatches for 10
-   data series, but you can only modify as many of the swatches as
-   you have data series. The palette can expand to show 20 data series. 
-   Charts will use as many colors as needed to show your chart,
-   starting from the first color. For example, if you have only two
-   data series in your chart, only the colors numbered ``1`` and
-   ``2`` have any effect on your chart.
+   For multi-series charts with numbered color swatches, 
+   the custom color palette shows swatches for 10
+   data series by default, and it can expand 
+   to show up to 20 data series. However, you can only modify as many 
+   swatches as you have data series. For example, if you have two
+   data series in your chart, only the swatches numbered ``1`` and
+   ``2`` have an effect on your chart. If additional series appear 
+   while the chart is rendering, Charts assigns them a new color. 
 
 Other chart types use a gradient color scale with a 
 set of pre-defined gradients. The 

source/dashboard-filtering.txt

@@ -15,14 +15,19 @@ Filter Dashboards by Field Values
 Dashboard Filters
 -----------------
 
-Dashboard filters refine data across all charts in a dashboard, 
-allowing you to view a common subset of data in all of a dashboard's 
+Dashboard filters refine data across some or all of the charts in a dashboard.
+They allow you to view a common subset of data across the dashboard's 
 charts.
 
-Dashboard ``Authors`` or ``Owners`` set the fields that any dashboard
-users can filter data with. ``Authors`` or ``Owners`` can also set
-initial default values for each filter. All dashboard users can filter
-based on values they specify and save their own default filter values.
+Dashboard ``Authors`` or ``Owners`` can:
+
+- Select the fields that all dashboard users can use to filter data.
+- Set initial default values for each filter. 
+- Disable filtering for a specific chart. Disabling filtering
+  exempts the chart from dashboard filters.
+
+All dashboard users can filter based on values they specify and save their own
+default filter values.
 
 .. note::
 
@@ -39,9 +44,14 @@ based on values they specify and save their own default filter values.
 .. note::
 
    Dashboard ``Authors`` or ``Owners`` define filters using specific 
-   data sources. A single filter might not refine all charts if the 
-   dashboard contains charts mapped to data sources that the filter 
-   doesn't use.
+   data sources and can :ref:`disable filtering on specific charts
+   <disable-filtering-on-chart>`. A single filter might not refine all charts
+   if: 
+   
+   - The dashboard contains charts mapped to data sources that the filter 
+     doesn't use.
+   - A dashboard ``Author`` or ``Owner`` :ref:`disables filtering
+     <disable-filtering-on-chart>` on some charts.
 
 Example Scenario
 ~~~~~~~~~~~~~~~~
@@ -123,8 +133,10 @@ Enabled, collapsed filters are still applied to your charts.
 Manage Dashboard Filters
 ------------------------
 
-Dashboard ``Authors`` and ``Owners`` can add, edit, and delete dashboard 
-filters.
+Dashboard ``Authors`` and ``Owners`` can: 
+
+- Add, edit, and delete dashboard filters.
+- Disable dashboard filters on specific charts.
 
 .. _add-dashboard-filters:
 
@@ -245,6 +257,39 @@ Delete Dashboard Filters
    :icon-fa4:`trash-o`.
 #. Click :guilabel:`Apply Filters`.
 
+.. _disable-filtering-on-chart:
+
+Disable Dashboard Filters for a Chart
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+You can disable filtering for a specific chart if you create at least one
+dashboard filter on the chart's data source. If you disable filtering, the
+chartis exempted from all dashboard filters. The default selection for all
+charts is :guilabel:`Respond to dashboard filters`.
+
+To disable dashboard filtering for a chart:
+
+1. Hover over the chart on the dashboard to reveal four buttons in the upper right
+   corner of the chart.
+#. Click the second button (for :guilabel:`Interactive Filters`) and
+   select :guilabel:`Disable Filtering` from the dropdown. 
+
+.. note::
+   
+   You can't change this setting until you've created at least one dashboard
+   filter on the chart's data source.
+
+Once you disable filtering, the :guilabel:`Interactive Filters`
+button icon on the chart changes for all users. Users with the ``Viewer`` role
+can also see a tooltip if they click the :guilabel:`Interactive Filters` button,
+which says ":guilabel:`The dashboard owner has not enabled filtering for
+this chart`."
+
+To reenable dashboard filtering for a chart:
+
+1. Click the :guilabel:`Interactive Filters` button.
+2. Select :guilabel:`Respond to dashboard filters` from the dropdown. 
+
 Use Dashboard Filters
 ----------------------
 

source/dashboards.txt

@@ -251,35 +251,43 @@ From the :guilabel:`Dashboards` page:
 
 .. _fullscreen-view:
 
-Fullscreen View
----------------
+Fullscreen Dashboard View
+-------------------------
 
 |charts| provides a fullscreen view for dashboards. In this view,
 |charts| hides the main navigation bar and expands the dashboard to
 show the title, description, time of last modification, and charts in
 the entire space of the screen.
 
-To open a dashboard in fullscreen view, first select a dashboard from
-the :guilabel:`Dashboards` page, then click the expanding arrows at the
-top-right of the dashboard:
+To enter the fullscreen view for dashboards: 
+
+1. Select a dashboard from the :guilabel:`Dashboards` page.
+
+#. Click the expanding arrows at the top-right of the dashboard.
 
 .. figure:: /images/charts/full-screen-view.png
    :figwidth: 750px
    :alt: Fullscreen Arrows
 
 .. note::
 
-   You can still :ref:`remove <dashboard-remove-chart>`, :ref:`resize
-   <dashboard-resize-chart>`, :ref:`rearrange
-   <dashboard-rearrange-chart>`, and :ref:`access editing
-   <dashboard-edit-chart>` for charts in fullscreen view by hovering
-   over the desired chart.
+   In the fullscreen view for dashboards, you can still:
+   
+   - :ref:`Remove <dashboard-remove-chart>`, :ref:`resize
+     <dashboard-resize-chart>`, :ref:`rearrange
+     <dashboard-rearrange-chart>`, and :ref:`edit
+     <dashboard-edit-chart>` charts by hovering over the desired chart.
+
+   - Configure auto-refresh settings and manually refresh chart data.
+   
+   - Enter the :ref:`fullscreen charts view <fullscreen-charts-view>`.
+
+To exit the fullscreen view for dashboards, do one of the following 
+tasks:
 
-   Additionally, in fullscreen view you can still configure
-   auto-refresh settings and manually refresh chart data.
+- Click the contracting arrows at the top-right of the dashboard.
 
-To exit fullscreen view, either click the contracting arrows at the
-top-right of the dashboard or press the escape key.
+- Press the escape key.
 
 .. toctree::
    :titlesonly:

source/embedding-charts-sdk.txt

@@ -108,5 +108,6 @@ Other examples are available in the :github:`MongoDB Embedding SDK Examples
 
    /configure-auth-providers
    /handle-click-events
+   /highlight-chart-elements
    /embedding-tutorials
    Embedding SDK Reference <https://www.npmjs.com/package/@mongodb-js/charts-embed-dom>

source/filter-chart-results.txt

@@ -13,14 +13,17 @@ Filter Chart Results
    :class: singlecol
 
 Filters display a subset of results that match a given criteria.
-|charts| provides two ways to filter your data. You can either use:
+|charts| provides two ways to filter the data for a single chart. You can either use:
 
 - The :ref:`Filter Tab's <filter-tab>` numeric, string, date, or boolean fields to handle most of your data 
   filtering needs.
 
 - The :ref:`Query Bar <query-bar>` to filter your data using more complex queries, such as logical operator 
   queries, or process raw data by using the aggregation pipeline. 
 
+To learn how to filter results across multiple charts on your dashboard, see
+:ref:`<dashboard-filtering>`.
+
 .. _filter-tab:
 
 Create Filters for Your Data
@@ -188,64 +191,77 @@ options. You can filter fields with the following data types:
             :tabid: period-date
 
             Period date filters specify a range relative to the current
-            time when the chart is rendered. To define an period date range,
+            time when the chart renders. To define a period date range,
             select :guilabel:`Period` at the top of your date filter card.
 
             Period options include:
 
-            - Hour (from the top of the hour)
-            - Day (from midnight)
-            - Week (from midnight Sunday)
-            - Month (from midnight on the 1st of the month)
-            - Year (from midnight on the 1st of January)
-    
-            The Period date filter has two usage options:
-    
-            - **Current**. The start date is the beginning of the selected
-              period before the current time, and the end date is the
-              end of the selected period. For example, the :guilabel:`Month`
-              option includes only data from the current month, starting at
-              midnight on the first day of the month and extending until
-              the last day of the month.
+            - :guilabel:`Hour` from the top of the hour
+            - :guilabel:`Day` from midnight
+            - :guilabel:`Week` from midnight Sunday
+            - :guilabel:`Month` from midnight on the 1st of the month
+            - :guilabel:`Year` from midnight on the 1st of January
 
-            - **Previous**. The start date is the beginning of the previous
-              period, and the end date is the start of the most recent
-              period before the current time. For example, the :guilabel:`Day`
-              option includes only data from the day before the current day
-              up until midnight of the current day.
-
-            .. list-table::
-               :header-rows: 1
-
-               * - To use the **Current** option:
-                 - To use the **Previous** option:
-
-               * - 1. Select :guilabel:`Current` from the left dropdown
-                      menu.
-
-                   #. Choose a time period from the right dropdown menu.
-                      Chart data is restricted to the time period from
-                      the beginning of the selected period to the end of
-                      the selected period.
+            The Period date filter also has usage options. Together with the
+            period, the usage options let you define an exact window of time in
+            the past, present, or future.
 
-                 - 1. Select :guilabel:`Previous` from the left dropdown
-                      menu.
+            Period usage options include:
+    
+            - **Direction**. You can select :guilabel:`Previous` to show past
+              periods or :guilabel:`Next` to show future periods.
+            - **Count**. You can set the number of periods to display. 
+            - **Include Current Period**. You can include the current period in
+              the specified time window.
+
+            Period usage options work together. The data that |charts| displays
+            for the :guilabel:`Month` period depends on the direction, count,
+            and :guilabel:`Include current period` selection.
+            
+            |charts| counts the number of periods you specify backwards (for :guilabel:`Previous`) or
+            forwards (for :guilabel:`Next`). Counting starts at the beginning of
+            the current period (with :guilabel:`Include current period` selected),
+            or the beginning of the last completed period (without
+            :guilabel:`Include current period` selected). |charts| displays the
+            data from the beginning of the selected period(s) through the end of
+            the selected period(s).
+   
+            .. example::
 
-                   #. Choose a time period from the right dropdown menu.
-                      Chart data is restricted to the time period from
-                      the beginning of the selected period to the beginning
-                      of the next period after the selected one.
+               If today is December 8 and you set a period date filter on
+               ``released`` with the following selections:
 
-            .. example::
+               - :guilabel:`Previous`
+               - ``3``
+               - :guilabel:`Months`, and
+               - :guilabel:`Include current period` selected
 
-               The following period date filter only shows documents
-               with a ``released`` field that is in the current week,
-               starting from midnight of the most recent Sunday.
+               |charts| would show documents with a released date from
+               October  1 of this year to December 31 of this year, including
+               the start and end dates.
 
                .. figure:: /images/charts/period-date.png
-                  :scale: 70%
+                  :figwidth: 300px
                   :alt: Image showing period date filter
 
+               However, if you set the same filter without selecting
+               :guilabel:`Include current period`, |charts| would show documents
+               with a released date from
+               September 1 of this year to November 30 of this year, including
+               the start and end dates.
+
+            
+            To set a Period date filter:
+
+            1. Select a period direction from the first dropdown
+               menu.
+            #. Enter a numeric value for the period count in the text entry field. You
+               can enter whole numbers or decimal values.
+            #. Choose a period the next dropdown menu.
+            #. (Optional) Deselect :guilabel:`Include current period` to exclude the current
+               period. :guilabel:`Include current period` is the default selection.
+      
+
          .. tab:: Absolute
             :tabid: absolute-date
 

source/handle-click-events.txt

@@ -258,6 +258,25 @@ filter document contains both the category and series filter pairs.
 Each filter must reference the actual data source fields used and not 
 their labels.
 
+You can enable highlighting for clicked events using the 
+``setHighlight`` method. 
+
+.. example:: 
+
+   .. code-block:: sh 
+      :copyable: false 
+      :emphasize-lines: 2
+
+      const eventHandler = (payload) => {
+        chart.setHighlight(payload.selectionFilter);
+      };
+
+      chart.render(container).then(() => {
+        chart.addEventListener('click', eventHandler);
+      });
+
+To learn more, see :ref:`highlight-chart-elements`.
+
 On an embedded chart that includes event handlers with a filter for 
 element roles, the chart shows: