Skip to content

Commit 06a5e72

Browse files
zach-carrkanchana-mongodbdavidhou17
authored
1.25 release (#482)
* DOCSP-16282 updates for exporting and importing dashboard (#478) * DOCSP-16282 updates for exporting and importing dashboard * DOCSP-16282 updates for copy review feedback * DOCSP-16282 updates for review feedback * Apply suggestions from code review Co-authored-by: zach-carr <[email protected]> Co-authored-by: zach-carr <[email protected]> * DOCSP-16117 fixing build error for incorrect reference (#480) * (DOCSP-16107) Updated Charts docs to reflect new color customization UI (#479) * (DOCSP-16107) Updated Charts docs to reflect new color customization UI * Added copy suggestions * Added tech review suggestions * (DOCSP-17148) 1.25 release notes (#481) * (DOCSP-17148) 1.25 release notes Co-authored-by: kanchana-mongodb <[email protected]> Co-authored-by: davidhou17 <[email protected]>
1 parent 9b30091 commit 06a5e72

File tree

5 files changed

+229
-60
lines changed

5 files changed

+229
-60
lines changed

‎source/customize-charts/general-customization.txt

Lines changed: 64 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,70 @@ section of the :guilabel:`Customize` tab.
3030
:figwidth: 251px
3131
:alt: Field level customizations
3232

33+
.. _color-palette-customization:
34+
35+
Color Palette Customization
36+
---------------------------
37+
38+
Palette customization allows you to select custom colors for your
39+
chart. To enable color customization, select the
40+
:guilabel:`Customize` tab of the :guilabel:`Chart Type` column.
41+
A toggle switch labeled :guilabel:`Custom Color Palette` appears in
42+
the :guilabel:`General` section.
43+
44+
You can also customize individual colors in your palette. Most chart types
45+
use a custom color picker with color swatches that correspond to your data
46+
series.
47+
48+
.. figure:: /images/charts/custom-color-palette.png
49+
:figwidth: 251px
50+
:alt: Custom color palette selection
51+
52+
Depending on the chart type, each color swatch has a corresponding
53+
number or a corresponding name:
54+
55+
- Single-series charts or multi-series charts created
56+
:ref:`using the Series method<charts-series-encoding>`
57+
have numbered color swatches.
58+
- Multi-series charts created by
59+
:ref:`mapping multiple fields<multiple-field-mappings>`
60+
have color swatches with the names of your selected fields.
61+
62+
To change the color of the corresponding data series, click the color swatch.
63+
You can select a new color with a color slider, by
64+
entering a hex value, by entering RGB values, or by choosing a
65+
predefined color. You can also drag and drop numbered color swatches to
66+
rearrange the colors in your palette.
67+
68+
.. note::
69+
70+
By default, the custom color picker shows color swatches for 10
71+
data series, but you can only modify as many of the swatches as
72+
you have data series. The palette can expand to show 20 data series.
73+
Charts will use as many colors as needed to show your chart,
74+
starting from the first color. For example, if you have only two
75+
data series in your chart, only the colors numbered ``1`` and
76+
``2`` have any effect on your chart.
77+
78+
Other chart types use a gradient color scale with a
79+
set of pre-defined gradients. The
80+
:ref:`heatmap <heatmap-chart-ref>` and :ref:`colored bar
81+
and column <column-bar-chart-ref>` types use this method.
82+
83+
.. figure:: /images/charts/custom-gradient.png
84+
:figwidth: 251px
85+
:alt: Custom color palette selection
86+
87+
To close the color customization tool, click somewhere outside it.
88+
To revert the entire chart to its default colors, set the
89+
:guilabel:`Custom Color Palette` toggle switch back to :guilabel:`Off`.
90+
91+
Applicable Chart Types
92+
~~~~~~~~~~~~~~~~~~~~~~
93+
94+
This customization option is available for all chart types except
95+
:ref:`Text <chart-type-text-charts>`.
96+
3397
Resize Labels
3498
-------------
3599

@@ -90,60 +154,3 @@ Applicable Chart Types
90154
This customization option is available for all charts which may display
91155
a legend. This includes any multi-series chart, as well as charts that
92156
have a field mapped to a Color, Intensity, Shape or Size channel.
93-
94-
.. _color-palette-customization:
95-
96-
Color Palette Customization
97-
---------------------------
98-
99-
Palette customization allows you to select custom colors for your
100-
chart. To enable color customization, select the
101-
:guilabel:`Customize` tab of the :guilabel:`Chart Type` column.
102-
A toggle switch labeled :guilabel:`Custom Color Palette` appears in
103-
the :guilabel:`General` section.
104-
105-
Most chart types allow you to customize individual colors in their
106-
palette. The :ref:`heatmap <heatmap-chart-ref>` and :ref:`colored bar
107-
and column <column-bar-chart-ref>` types use a gradient color scale,
108-
while other types use a custom color picker. The gradient color
109-
scale allows you to choose from a set of pre-defined gradients.
110-
111-
.. figure:: /images/charts/custom-gradient.png
112-
:figwidth: 251px
113-
:alt: Custom color palette selection
114-
115-
Other chart types use a color picker for selecting a customized
116-
set of colors.
117-
118-
.. figure:: /images/charts/custom-color-palette.png
119-
:figwidth: 251px
120-
:alt: Custom color palette selection
121-
122-
For chart types which use a color picker for customization,
123-
each numbered color swatch corresponds to a data series on the chart.
124-
Select a color swatch to modify the color of its corresponding
125-
data series. You can select a new color with a color slider, by
126-
entering a hex value, by entering RGB values, or by choosing a
127-
predefined color. You can also drag and drop the existing color
128-
selections if you want to use the current color choices but change
129-
which color goes with which data series.
130-
131-
.. note::
132-
133-
By default, the custom color picker shows color swatches for 10
134-
data series, but you can only modify as many of the swatches as
135-
you have data series. The palette can expand to show 20 data series.
136-
Charts will use as many colors as needed to show your chart,
137-
starting from the first color. For example, if you have only two
138-
data series in your chart, only the colors numbered ``1`` and
139-
``2`` have any effect on your chart.
140-
141-
To close the color customization tool, click somewhere outside it.
142-
To revert the entire chart to its default colors, set the
143-
:guilabel:`Custom Color Palette` toggle switch back to :guilabel:`Off`.
144-
145-
Applicable Chart Types
146-
~~~~~~~~~~~~~~~~~~~~~~
147-
148-
This customization option is available for all chart types except
149-
:ref:`Text <chart-type-text-charts>`.

‎source/dashboards.txt

Lines changed: 127 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@ Create a New Dashboard
5555
To create a new dashboard:
5656

5757
1. From the :guilabel:`Dashboards` page, click the
58-
:guilabel:`New Dashboard` button.
58+
:guilabel:`Add Dashboard` button.
5959

60-
#. In the :guilabel:`New Dashboard` dialog, enter a title for your
60+
#. In the :guilabel:`Add Dashboard` dialog, enter a title for your
6161
dashboard.
6262

6363
#. (Optional) Enter a :guilabel:`description` for your dashboard.
@@ -124,6 +124,131 @@ row in the table represents a data point.
124124

125125
.. include:: /includes/get-chart-data-details.rst
126126

127+
.. _import-export-dashboard:
128+
129+
Export and Import a Dashboard
130+
-----------------------------
131+
132+
You can export a dashboard to a file, which you can then import. Use
133+
this feature to:
134+
135+
- Store your dashboard outside of |charts|
136+
- Import exported charts into the same or a different project
137+
138+
.. _export-dashboard:
139+
140+
Export a Dashboard to a File
141+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
142+
143+
You can export a dashboard to a single file named
144+
``<Dashboard-Title>.charts`` on the :ref:`Dashboards page
145+
<dashboards-tab>`. The file contains the metadata for the dashboard,
146+
including:
147+
148+
- Dashboard name and description
149+
- Dashboard layout including location of the charts in the dashboard
150+
- Chart definitions
151+
- Dashboard filter definitions
152+
- Details of the data sources used on the charts including:
153+
154+
- Cluster name
155+
- Database name
156+
- Collection name
157+
158+
- Embedding settings for each chart including:
159+
160+
- Whether each embedding type is enabled or disabled
161+
- Filter allow list
162+
- Injected filter code
163+
164+
The file **doesn't** include:
165+
166+
- Dashboard :ref:`permissions <dashboard-permissions>`
167+
- External sharing settings for the data sources used
168+
- Data source pipelines
169+
- Chart embedding IDs
170+
171+
You must have ``Viewer`` or higher :ref:`permissions
172+
<dashboard-permissions>` to export a dashboard.
173+
174+
From the :guilabel:`Dashboards` page:
175+
176+
1. Click the ellipsis (``...``) for the dashboard you want to export
177+
and select :guilabel:`Export Dashboard` from the dropdown.
178+
179+
#. Follow the browser prompts to download the file.
180+
181+
.. _import-dashboard:
182+
183+
Import a Dashboard From a File
184+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
185+
186+
You can import a dashboard from a file on the :ref:`Dashboards page
187+
<dashboards-tab>`. The file to import:
188+
189+
- Can't be larger than 16 MBs
190+
- Must be a valid ``.charts`` file that you downloaded from a
191+
dashboard
192+
193+
From the :guilabel:`Dashboards` page:
194+
195+
1. Click the :guilabel:`Add Dashboard` dropdown and select
196+
:guilabel:`Import Dashboard` to display the :guilabel:`Import
197+
Dashboard` modal.
198+
199+
#. Drag and drop the file to import or click :guilabel:`Choose File`
200+
and select the file to import.
201+
202+
#. Click :guilabel:`Next`.
203+
204+
#. Select the data source for the dashboard from the :guilabel:`Data
205+
source at destination` dropdown.
206+
207+
The :guilabel:`Import Dashboard` modal displays a list of all the
208+
data sources used by the file being imported under :guilabel:`Data
209+
source in file` column. For each data source in the file, select a
210+
:guilabel:`Data source at destination`:
211+
212+
.. list-table::
213+
:header-rows: 1
214+
:widths: 20 40
215+
216+
* - Option
217+
- Description
218+
219+
* - <Mapped Data Source>
220+
- Option to select any data source in your project. The data
221+
source you select is used instead of the :guilabel:`Data
222+
source in file` for charts imported in to the dashboard.
223+
224+
* - :guilabel:`Connect later`
225+
- Option to choose the data source to use later. |charts|
226+
imports all charts using the :guilabel:`Data source in file`,
227+
but no data source is selected. The charts don't render until
228+
you edit each chart and choose a new data source.
229+
230+
* - :guilabel:`Exclude charts using this data source`
231+
- Option to exclude charts that use the :guilabel:`Data source
232+
in file`. Charts that use the :guilabel:`Data source in
233+
file` won't be imported.
234+
235+
If |charts| detects that a data source in your project is the same
236+
as the data source in the file, that data source is selected by
237+
default. Otherwise, :guilabel:`Connect later` is selected by default.
238+
239+
.. important::
240+
241+
Imported charts may not render properly if mapped to a data
242+
source that the chart wasn't built to use.
243+
244+
#. Click one of these buttons:
245+
246+
- :guilabel:`Save` to import the dashboard.
247+
- :guilabel:`Save and Import Another` to import this dashboard and
248+
import another dashboard from a file.
249+
- :guilabel:`Cancel` to exit the modal without importing the
250+
dashboard.
251+
127252
.. _fullscreen-view:
128253

129254
Fullscreen View

‎source/images/charts/custom-color-palette.png

10.7 KB
Loading

‎source/images/charts/general-custom.png

-24.9 KB
Loading

‎source/release-notes.txt

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

13+
|charts| v1.25.0
14+
----------------
15+
16+
*Released June 23, 2021*
17+
18+
Improvements in this release:
19+
20+
- Dashboards can now be :ref:`exported <export-dashboard>` to a file.
21+
22+
- Dashboards can be :ref:`imported <import-dashboard>` from a
23+
previously exported file.
24+
25+
- Single-series charts now only show a single color in the palette
26+
customization setting.
27+
28+
- Adds a new series-based color palette editing experience for
29+
multi-series charts built from multiple fields.
30+
31+
- Number formatting can now be applied for every field used on a
32+
chart’s axis.
33+
34+
- Adds a new tour showing how to customize field settings.
35+
36+
Bug fixes in this release:
37+
38+
- Embedded charts now automatically repaint if their size or visibility
39+
changes.
40+
41+
- Fixes an issue where the magnifier icon in search boxes was very
42+
small.
43+
44+
- Improves the behaviour of ``selectionFilter`` in click event payloads
45+
for binned date values, making them time-zone aware.
46+
47+
- Fixes an issue where charts did not render when series' names
48+
contained single quotes.
49+
1350
|charts| v1.24.2
1451
----------------
1552

@@ -81,7 +118,7 @@ Bug fixes in this release:
81118
axis minimum or maximum is set.
82119

83120
- Fixes an issue where dashboards did not load if a user with
84-
:ref:`dashboard permissions <dashboard-permission>` was deleted from
121+
:ref:`dashboard permissions <dashboard-permissions>` was deleted from
85122
MongoDB Cloud.
86123

87124

0 commit comments

Comments
 (0)