april 07, 2023
Formatting using CSS Template.
As a continuation of the previous article «Modifying the Dashboard UI Template in Apache Superset» I would like to talk about other features available when editing the CSS template. Thus visualisation in analytics is not limited to the colour scheme of the dashboard and can be used to highlight features in the data as well as to design individual charts. We’ll tell you about the templates we use most often.
1. Changing table formats
Let’s take an example of an ordinary flat table constructed using the «TABLE» chart in Apache Superset.
On one hand the information displayed is sufficient, but on the other hand it would be desirable to have more editing possibilities. This can be achieved by modifying the CSS template.
1.1 For the changes to be applied in the right place, you need to find out the number of the chart, this can be done by examining the code of the browser page or by going to the edit area and finding slice_id=<number> in the link. In this case the number is 20.
1.2 Switch back to the dashboard view. Click «EDIT DASHBORD» in the top right corner and select the «Edit CSS» option from the edit menu.
1.3 To set a 1px thick outer grey border for a table within a particular chart, use the code:
#chart-id-20 table {border-collapse: collapse; border: 1px solid grey;}
We get a table:
1.4 In this way, all the necessary settings are made. Example of our implementation:
Set the font size:
#chart-id-20 table {font-size: 11px}
Set the text and background colour of the header cells
#chart-id-20 th {color: #FFF; background-color: #505054;}
Set the background colour for the table body cells from the first column
#chart-id-20 td:first-child {background-color: #dcdcdc;}
Set the text and background colour for the header cells from the last column
#chart-id-20 th:last-child {color: #FFF; background-color: #e96c12;}
Set the text and background colour for the table body cells from the last column
#chart-id-20 td:last-child {color: #2d90c9; background-color: #f8ceb5;}
After applying the template, the following table is obtained:
2. Changing the colour scheme of the histogram negative bars
The colour scheme, for the BAR CHART, is limited to a set of specific shades applied to the grouped values. Example for constructing a bar chart comparing groups 1 (blue) and 2 (purple):
Here we see negative values. It is important for analysts to spot these anomalies immediately on real data. We would like to see them highlighted in a separate colour, but this is not possible in the default settings.
If you examine the «BAR CHART» code, you will notice that the elements in the chart are divided into two series nv-series-0 and nv-series-1, corresponding to our groups 1 and 2.
There are four nv-bars in each series: two negative and two positive.
Let’s refer to the described classes for the negative bars by writing the following code for the chart in the CSS templates:
#chart-id-41 .nv-group.nv-series-0 > .nv-bar.negative
{ fill: rgb(250,128,114) !important;
stroke: rgb(250,128,114) !important;}
#chart-id-41 .nv-group.nv-series-1 > .nv-bar.negative
{ fill: rgb(178,34,34) !important;
stroke: rgb(178,34,34) !important; }
You will get a graph of the form:
3. Limit the length of the output values in the filter.
In its usual form, the «filter box» chart has the following options for interacting with the selected values: delete the selected item, delete all selected items, drop-down list.
However, if the name of the filter item is too long and the space on the dashboard to place the chart is limited, then we run into the following problem: the option name extends beyond the selected values window, and with it the item removal and the drop-down list. You could use the scroll bar, but it would look very ugly.
This can be corrected by adding a text transfer option to the CSS template and limiting the width for the selected value area:
#chart-id-51 .Select__multi-value__label
{ word-break:break-all;
max-width: 150px;}
The filter will look as follows:
Note: This editing method is not suitable for canvas elements.
