Skip to content

Commit dc6da77

Browse files
authored
1.29 release (#516)
* (DOCSP-18613) (DOCSP-18614) (DOCSP-18615) (DOCSP-18616) (DOCSP-19011) (DOCSP-19074) Interactive filtering (#510) * (DOCSP-18613-fix) Fix a typo (#512) * (DOCSP-19586) Improve Handle Click Events page (#514) * (DOCSP-19871) New interactive filtering options (#515) * (DOCSP-19625) 1.29 release notes (#513)
1 parent fc7a9ad commit dc6da77

File tree

5 files changed

+219
-35
lines changed

5 files changed

+219
-35
lines changed

source/dashboard-filtering.txt

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@ default filter values.
4040
:alt: An image of a dashboard. The :guilabel:`Dashboard Filters`
4141
pane is highlighted.
4242

43-
If one or more dashboard filters are applied to a chart, a
43+
If one or more dashboard filters affect the data a chart displays, an
4444
:icon-fa5:`filter` icon displays in the bottom left corner of that
4545
chart. Hover over the :icon-fa5:`filter` icon for a list of the
46-
filtered fields on that chart.
46+
filtered fields impacting that chart.
4747

4848
.. note::
4949

@@ -85,15 +85,15 @@ unless you :ref:`reset a filter <revert-dashboard-filters>`.
8585

8686
|charts-short| doesn't persist filter states or values for users who
8787
open a dashboard using a public link. |charts-short| reverts to the
88-
initial default filter values after refreshing the page or starting a
89-
new session.
88+
initial default filter values after refreshing the page or starting
89+
a new session.
9090

9191
The :guilabel:`Dashboard Filters` Pane
9292
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
9393

9494
The :guilabel:`Dashboard Filters` icon indicates the number of active
9595
filters. Click the icon to expand the :guilabel:`Dashboard Filters`
96-
pane.
96+
pane.
9797

9898
.. figure:: /images/charts/expand-filter-pane.png
9999
:figwidth: 720px
@@ -267,34 +267,34 @@ Disable Dashboard Filters for a Chart
267267
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
268268

269269
You can disable filtering for a specific chart if you create at least
270-
one dashboard filter on the chart's data source. If you disable
271-
filtering, the chart is exempted from all dashboard filters. The
272-
default selection for all charts is
273-
:guilabel:`Respond to dashboard filters`.
270+
one dashboard filter on the chart's data source. If you disable
271+
filtering, the chart is exempted from all dashboard filters and
272+
highlighting. The default selection for all charts is
273+
:guilabel:`Filter or highlight`.
274274

275275
To disable dashboard filtering for a chart:
276276

277277
1. Hover over the chart on the dashboard to reveal four buttons in the
278278
upper right corner of the chart.
279279
#. Click the second button (for :guilabel:`Interactive Filters`) and
280-
select :guilabel:`Ignore dashboard filters` from the dropdown.
280+
select :guilabel:`Ignore` from the dropdown.
281281

282282
.. note::
283283

284284
You can't change this setting until you've created at least one
285285
dashboard filter on the chart's data source.
286286

287-
Once you disable filtering, the :guilabel:`Interactive Filters`
287+
Once you ignore filtering, the :guilabel:`Interactive Filters`
288288
button icon on the chart changes for all users. Users with the
289289
``Viewer`` role can also see a tooltip if they click the
290-
:guilabel:`Interactive Filters` button, which says
291-
":guilabel:`The dashboard owner has not enabled filtering for
290+
:guilabel:`Interactive Filters` button,
291+
which says ":guilabel:`The dashboard owner has not enabled filtering for
292292
this chart`."
293293

294294
To reenable dashboard filtering for a chart:
295295

296296
1. Click the :guilabel:`Interactive Filters` button.
297-
2. Select :guilabel:`Respond to dashboard filters` from the dropdown.
297+
2. Select :guilabel:`Filter` from the dropdown.
298298

299299
Use Dashboard Filters
300300
----------------------

source/handle-click-events.txt

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@ Handle Click Events
1515
.. note::
1616

1717
Click Events in the `Charts Embedding SDK
18-
<https://github.com/mongodb-js/charts-embed-sdk>`__ is available as
19-
a beta feature. It is only available with Charts Embedding
20-
JavaScript SDK v2.1.0-beta.1.
18+
<https://github.com/mongodb-js/charts-embed-sdk>`__
19+
is available in version 2.1.0 and later.
2120

2221
The Charts Embedding JavaScript SDK includes a click event handler that
2322
allows you to subscribe to click events. When you click on a particular
@@ -34,8 +33,8 @@ experiences similar to the following in your application:
3433
Prerequisites
3534
-------------
3635

37-
Before you begin, :ref:`install <embedding-charts-sdk>` the Charts
38-
Embedding JavaScript SDK.
36+
Before you begin, :ref:`install <embedding-charts-sdk>` version 2.1.0
37+
or later of the Charts Embedding JavaScript SDK.
3938

4039
.. _click-event-syntax:
4140

@@ -209,16 +208,34 @@ contains:
209208
- The lower bound for numeric or date binning only
210209

211210
For :ref:`data tables <data-table-ref>`, the Charts Embedding
211+
JavaScript SDK click event handler captures click events for fields
212+
that represent the channel data for the clicked element:
213+
214+
- ``groups`` field, which contains all Groups channels including
215+
label and value
216+
- ``cell`` field, which contains the column header label and value of
217+
the clicked cell
218+
219+
For :ref:`geospatial charts <geo-spatial>`, the Charts Embedding
212220
JavaScript SDK click event handler captures click events for the
213-
following elements:
221+
following elements:
214222

215-
- Chart title
216-
- Fields that represent the channel data for the clicked element:
217-
218-
- ``groups`` field, which contains all Groups channels including
219-
label and value
220-
- ``cell`` field, which contains the column header label and value of
221-
the clicked cell
223+
- For :ref:`choropleth charts <choropleth-ref>`, the click event
224+
handler captures the fields that represent the channel data for the
225+
clicked element:
226+
227+
- ``lat`` field, which contains latitude
228+
- ``lng`` field, which contains longitude
229+
- ``location`` field, which contains the field label and value of the
230+
clicked geospatial area
231+
232+
- For :ref:`geospatial scatter charts <scatter-ref>`, the click event
233+
handler captures the fields that represent the channel data for the
234+
clicked element:
235+
236+
- ``geopoint`` field, which contains the field
237+
name, value in GeoJSON format, and the coordinates of the clicked
238+
point
222239

223240
.. _click-event-payload-selection-filter:
224241

@@ -298,8 +315,10 @@ The ``target`` element of the :ref:`payload <click-event-payload>`
298315
contains information about the clicked target including:
299316

300317
- The type of mark, such as ``rect``, ``line``, ``arc``, ``symbol``,
301-
etc.
302-
- The role of mark, such as ``mark``, ``legend``, ``axis-label``, etc.
318+
``group``, or ``area``
319+
- The role of mark, such as ``mark``, ``legend``, ``axis-label``,
320+
``axis-title``, ``tick-label``, ``legend-entry``, ``legend-title``,
321+
or ``frame``
303322
- The fill color of the mark
304323

305324
For :ref:`data tables <data-table-ref>`, the Charts Embedding
@@ -311,6 +330,13 @@ JavaScript SDK click event handler payload captures the following:
311330
``column-total-cell``, ``header-column-total-cell``, and
312331
``grand-total-cell``
313332

333+
For :ref:`geospatial charts <geo-spatial>`, the Charts Embedding
334+
JavaScript SDK click event handler payload captures the following:
335+
336+
- The type of mark, such as ``polygon``, ``map``, or ``symbol``
337+
- The role of mark, such as ``mark`` or ``map``
338+
- The fill color of the mark
339+
314340
The Charts Embedding JavaScript SDK click event handler does not
315341
capture click events on column headers.
316342

source/highlight-chart-elements.txt

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ highlight specific elements and :ref:`clicked events
2121
Prerequisites
2222
-------------
2323

24-
Before you begin, :ref:`install <embedding-charts-sdk>` the Charts
25-
Embedding JavaScript SDK.
24+
Before you begin, :ref:`install <embedding-charts-sdk>` version 2.1.0
25+
or later of the Charts Embedding JavaScript SDK.
2626

2727
.. _highlight-chart-syntax:
2828

@@ -93,8 +93,9 @@ Chart Types
9393

9494
The following chart types support programmatic highlighting:
9595

96-
- :ref:`line-area-chart-ref`
96+
- :ref:`choropleth-ref`
9797
- :ref:`column-bar-chart-ref`
98-
- Non-geo :ref:`heatmap-chart-ref`
98+
- :ref:`data-table-ref`
9999
- :ref:`donut-chart-ref`
100-
- :ref:`choropleth-ref`
100+
- :ref:`line-area-chart-ref`
101+
- Non-geo :ref:`heatmap-chart-ref`

source/interact-with-charts.txt

Lines changed: 123 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,128 @@ Interact with Charts on a Dashboard
1212
:depth: 2
1313
:class: singlecol
1414

15+
.. _interactive-filtering:
16+
17+
Interactive Filtering
18+
---------------------
19+
20+
On a dashboard, you can interact with a chart that has
21+
:guilabel:`Filter or highlight` enabled to filter data
22+
in other charts.
23+
24+
With :guilabel:`Filter or highlight` enabled, clicking a chart element
25+
with an associated :ref:`dashboard filter <dashboard-filtering>`
26+
temporarily reconfigures the scope of that dashboard filter to a single
27+
chart series, category or field value.
28+
29+
Interactive filtering is useful for getting quick insights into
30+
subcategories of your data on dashboards with multiple charts.
31+
Interactive filtering is temporary; you can revert to your original
32+
dashboard filter at any time.
33+
34+
To enable :guilabel:`Filter or highlight`:
35+
36+
1. Hover over the chart on the dashboard to reveal four buttons in the
37+
upper right corner of the chart.
38+
#. Click the second button for :guilabel:`Interactive Filters`.
39+
#. Select :guilabel:`Filter or highlight` from the dropdown.
40+
41+
.. note::
42+
43+
By default, charts set :guilabel:`Interactive Filters` to
44+
:guilabel:`Filter or highlight`.
45+
46+
Setting a chart's :guilabel:`Interactive Filters` to
47+
:guilabel:`Filter` reflects dashboard filters
48+
and temporary interactive filters. That chart cannot be highlighted
49+
to set interactive filters on other charts.
50+
51+
Setting a chart's :guilabel:`Interactive Filters` to
52+
:guilabel:`Ignore` ignores any dashboard or interactive filters.
53+
54+
.. example::
55+
56+
On the |charts| :ref:`Sample Dashboard <sample-dashboard>`, movie
57+
statistics are displayed across a range of chart types.
58+
59+
If you create a dashboard filter for ``rated``, the content rating
60+
of a movie (e.g. G, PG-13, R), you can click a specific movie rating
61+
on any one of your charts to temporarily reconfigure the scope of
62+
your dashboard filter to that specific movie rating.
63+
64+
If you click on the PG-13 rating section of the
65+
:guilabel:`Movie Ratings` donut chart, the rest of the charts on
66+
your dashboard update to display only data for PG-13 movies. When
67+
you :ref:`clear the selection <remove-interactive-filter>` of the
68+
PG-13 rating, your dashboard reverts to displaying charts according
69+
to the ``rated`` dashboard filter.
70+
71+
The chart upon which you set an interactive filter is highlighted,
72+
*not* filtered. It :ref:`emphasizes <emphasize-series>` the element for
73+
which your other charts are filtered. You can
74+
:ref:`clear the selection <remove-interactive-filter>` from that
75+
highlighted chart.
76+
77+
A highlighted chart displays a status icon in the bottom left corner.
78+
79+
Filtered charts display the :icon-fa5:`filter` icon.
80+
81+
You can apply an interactive filter to all chart types *except*:
82+
83+
- :ref:`Number Charts <number-chart-ref>`
84+
- :ref:`Gauge Charts <gauge-chart-ref>`
85+
- :ref:`Top Item Charts <top-item-ref>`
86+
- :ref:`Geospatial Scatter Charts <geospatial-scatter-type>`
87+
- :ref:`Geospatial Heatmaps <geospatial-heatmap-type>`
88+
89+
Filter a Dashboard by a Chart Element
90+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
91+
92+
To interactively filter a dashboard based on a chart element, you must
93+
first create a dashboard filter for the field that you want to filter
94+
by.
95+
96+
.. example::
97+
98+
To filter the :ref:`Sample Dashboard <sample-dashboard>` to only
99+
English movies, you must have a dashboard filter on the ``language``
100+
field.
101+
102+
To filter a dashboard by a chart element, you can click on:
103+
104+
- a legend entry
105+
- a chart category, such as an X or Y series label
106+
- a chart mark, such as a bar segment or line chart node
107+
108+
When you hover over a chart element with an associated dashboard
109+
filter, your cursor displays the :icon-fa4:`hand-pointer-o` icon.
110+
111+
If a chart element isn't filterable, your cursor displays the
112+
:icon-fa4:`mouse-pointer` icon. You might be able to add a dashboard
113+
filter for that value's field to make that element filterable.
114+
115+
.. note::
116+
117+
If the dashboard filter card associated with a clicked element is
118+
disabled, |charts-short| enables it temporarily until you
119+
:ref:`clear the selection <remove-interactive-filter>` of that
120+
element.
121+
122+
When you filter a dashboard by a chart element, |charts-short| disables
123+
all other dashboard filters until you clear the selection.
124+
125+
.. _remove-interactive-filter:
126+
127+
Remove an Interactive Filter
128+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
129+
130+
You can remove an interactive dashboard filter by:
131+
132+
- Clicking the whitespace on the highlighted chart upon which you set
133+
the interactive filter, or
134+
135+
- Changing the associated dashboard filter.
136+
15137
.. _emphasize-series:
16138

17139
Click to Emphasize Series
@@ -51,7 +173,7 @@ the selected data series from de-emphasized to emphasized.
51173
:alt: Emphasize multiple data series
52174

53175

54-
Emphasize all Data Series
176+
Emphasize All Data Series
55177
~~~~~~~~~~~~~~~~~~~~~~~~~
56178

57179
To restore the opacity of all data series to the default emphasized

source/release-notes.txt

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,41 @@ MongoDB Charts Cloud Release Notes
1010
:depth: 1
1111
:class: twocols
1212

13+
|charts| v1.29
14+
--------------
15+
16+
*Released December 6, 2021*
17+
18+
Improvements in this release:
19+
20+
- :ref:`Interactive Filtering <interactive-filtering>` is now
21+
available.
22+
23+
- Improves the query editor, including a new button to collapse
24+
the editor.
25+
26+
Bug fixes in this release:
27+
28+
- Fixes an issue where :ref:`importing a dashboard <import-dashboard>`
29+
did not work for some users.
30+
31+
- Fixes an issue where sharing a dashboard with
32+
:ref:`Everyone <dashboard-access-everyone>` allowed them to make
33+
changes to existing roles.
34+
35+
- Fixes an issue where negative numbers were incorrectly binned.
36+
37+
- The :guilabel:`Edit Chart` button is now disabled for viewers.
38+
39+
- :guilabel:`Show Data` now correctly displays in table and JSON format.
40+
41+
- Data source names can now be 64 characters long.
42+
43+
- Fixes an issue with donut charts having boolean values.
44+
45+
- Click events now correctly pass event data when clicked in embedded
46+
charts.
47+
1348
|charts| v1.27.0
1449
----------------
1550

0 commit comments

Comments
 (0)