chart customisations - Allow user to change the header and footer
This is to implement the new design of the Chart Customisation panel in the Data Explorer, and at the same time include all additional ChartGenerator customisation features for authenticated users.
-
As an unauthenticated DE user,
When I open the Chart Customisation panel,
Then all currently available customisation options are displayed at once in an always expanded panel using the new design (more details below).
The screen below is an example of options of an unauthenticated user for a bar chart: -
As an authenticated DE user,
When I open the Chart Customisation panel,
Then I see all customisation options as mentioned under 1., and in addition the panel includes the additional customisation features today possible in the ChartGenerator: Title, Subtitle, Source label, Remove logo, Remove Copyright.
The screen below is an example of options of an authenticated user for a bar chart:
By default, the text boxes of the Title, Subtitle and Source contain the corresponding auto-generated values.
The user has the possibility to reset the Title, Subtitle or Source texts to their defaults with reset buttons (material UI icon: @material-ui/icons/Replay') included in the fields.
After editing a title, a footnote associated to the dataflow will be kept:
After editing a subtitle, footnotes associated to the dimension items will be merged into one single footnote at the end of subtitle:(*) with its tooltip containing the merged information:
-
Dimension: Dimension Item
Associated footnote text
Associated footnote text -
Dimension: Dimension Item
Associated footnote text
Associated footnote text
-
Dimension: Dimension Item
-
The ChartGenerator should also be updated with the new design of the chart customisation features (permitted technical feasibility).
Notes:
-
In the current UI mockups, there are 2 buttons to Cancel or Apply the changes, which are not to be implemented. Instead textual input is applied to the chart when the user presses the "Enter" key or when the text fields loose the focus.
-
Text fields will thus also not have individual apply buttons.
-
Changing the "Labels" setting will always regenerate the automated texts for title and subtitle according to the new "Label" setting, even if the user previously has changed the title or subtitle.
-
For each type of chart, except for maps, the "Customise" parameters are available in the UI documentation, which also gives more information about the display mode:
- the General Action box page for the general design of the Chart Customisation panel.
- the Chart view Action box page with the design and layout details for each type of chart, and the grid associated to the Chart Customisation panel. Note that the layout of the features within the panel depends on the chart type.
- The generic UI documentation pages (buttons,colors,fonts) describe the general styles to apply.
-
The "" link in the UI mockups is only a mockup navigation feature and not to be implemented. This mockup feature allows toggling between the diverging designs for authenticated and unauthenticated users.
Click to expand and see the description part for the designer (design done)
The customise action box can integrate the different options (information, size, x-axis, y-axis, base line, highlights, logo, copyright, series dimensions) of a chart (see the different chart-generator options http://vs-dotstattest.main.oecd.org/FrontEndDemo/sandbox/chart-generator/ ; to have a timeline, change the startTime to 2010). Some of them are visible according to the type of charts.
Some options will be available in the intranet version, but not for the public version of the application.
For the public version, the user will not be able to:
- Change the title, subtitle and source label of the Information part (which can be hidden);
- Remove or add the logo or copyright.
Here below is the list of options for Public or Intranet (Private) websites with a preference order to display them in the Customize feature box with 1 on the top, 1b on the top on the right of 1, 2 below the 1 etc...
Order | Details | Public | Private |
---|---|---|---|
1 | Series Dim | X | X |
1b | Highlights | X | X |
1c | Size | X | X |
2 | Axis | X | X |
3 | Information | X | |
3c | Logo | X | |
3c | Copyright | X |
The Highlights option is a multi-selection feature.
Here below is a list of the type of charts:
Details | Highlights | Size | Dim for symbol* | Dim X&Y* | Dim X* | Dim Y* | Obs displayed | X-Axis | Y-Axis |
---|---|---|---|---|---|---|---|---|---|
V-BAR | X | X | X | ||||||
H-BAR | X | X | X | ||||||
SCATTER | X | X | X | X | X | X | X | ||
TIMELINE | X | X | X | X | |||||
H-SYMBOL | X | X | X | X | |||||
V-SYMBOL | X | X | X | X | |||||
STACKED BAR | X | X | X | X | X |
CHOROPLETH MAP can be added to the drop-down list of the chart types. The related options for the customize features will be described later on.
- COMMON CHART FEATURES
- V-BAR
- H-BAR
- SCATTER
- TIMELINE
Remark: For the Axis(x), only the "Step" field is available for the Timeline chart. The other fields are unavailable (hidden or grayed).
- H-SYMBOL
- V-SYMBOL
- STACKED BAR