Improve pivot table UI to emphasize data

[Kiarii]

Context

The idea is to improve the look and feel of pivot tables, based on pivot tables showcased in these dashboards: Tableau de bord de suivi de la collecte and Tableau de bord des indicateurs du PARIIS

Notable improvements to consider:

1. Append aggregation method to end of aggregated indicator to prevent a twin-col-header. This is what we do with other visualizations but we break the pattern with pivot tables.

   

2. De-emphasizing borders and adding some spacing between data and borders to enhance data legibility..

3. Title case values, when source content is all caps, the table content is harder to read when it is all-capped as is evident in the snippet below

   

4. Wrap long col header and values - i.e. define a column width so that the resulting table is visually balanced; in the attached example, we have a couple of long values the accommodation of which makes the second column squeezed up

   

• when wrapping text in a row, align the values for adjoining rows to the middle (atm it is done to the bottom) this will add to the perceived visual balance;

5. Stop truncating table content - even though we support mouseover as a way of revealing truncated text, this is not optimal; a dashboard is meant to be read or reveal patterns quickly, forcing the user to use mouseover to reveal values goes against the intention

   

6. Add spaces between cascade item separators to make the resulting text more readable. This should also make it easier to wrap the text - This tweak might be more applicable at data importing level but the refinement will carry over to the grid and resuting visualizations

   

7. Align the pivot table (in contrast to other types it is unique) to the left of the visualization container so that it takes use of full-container-width; centre-align also breaks the scannability (from the title to table content)

   

8. It is not clear what a pivot table counts by default 🤔 this should be made explicit, otherwise result to a meaningful default/empty state

   

[Kiarii]

On points 1 and 2: Appending aggregation method to indicator name

[janagombitova]

@Kiarii the twin column header is not because of the aggregation method but the first header holds the column title and the 2nd the text values of the selected column and total count if enabled:

Plus I removed the URLs from your description as I do not know if we have permissions from the partner to share the data in those dashboards

[Kiarii]

@janagombitova now I see your screenshot :) agree on the links posting matter, thanks for noting that. About your description of the pivot;

..the first header holds the column title and the 2nd the text values of the selected column..

It sounds more or less like a presentation of a MOQ data, in which case, even on the grid breaking the question and the responses i.e. creating a twin col header makes the resulting table/grid 'unbalanced'.. Looking into this..

[Kiarii]

on the data grid, as screenshoted below, we do not separate MOQ question from the response; in keeping the pattern (which I think is a low hanging fruit in contrast to inventing a new wheel) the challenge for pivot tables as for the grid is two fold:

• How to accommodate long text values (mostly col headers) and
• How to support the use of shorter versions of these either via using variable names or custom-user defined names (at least on visualizations)

[Kiarii]

at the least, (without supporting variable names or user defined col names) based on the example shared by @janagombitova above, we are looking at sth of this sort

Back tracking on my previous comment, I note that we actually do have a way to rename the used col-header - which we can use as a prefix for the col-header which for the above example might be "'User defined prefix:' + 'value'" e.g. "'Main crop: Maize" e.g.

Other minor notes:

• left align col titles; this makes them easier to read/scan along their row values. Notice for instance in this snippet how reading the col and row requires a shifting of focus since they are not aligned (for num data types we maintain a right alignment of values)
• define a min col width; this might depend on the number of cols to show; but as the snippet above indicates, there is no need to squeeze one col at the expense of readability and even visual balance.. since we can wrap text, the resulting table should ideally be comfortable for the eye and data consumption

[Kiarii]

• the Total Count issue that creates a twin col header also creates a twin row;

This also breaks the tabular layout - application of total on the col or row shd conform to the table structure and not create floating or table cells. From the snippet above, this means that the "age of respondent" should be a "row-'header'" for the first row, with "total" being the row-header for the second i.e.

[janagombitova]

I have summarised the visual improvements into the following list. I suggest we start here. Then the remaining issue is how to handle the double-header (column title and column values) that currently breaks the table layout. I suggest we discuss this one before making a decision on how to address it. Same goes for the twin-row due to total.

Pivot table initial improvements:

• [x] De-emphasizing borders and adding some spacing between data and borders to enhance data legibility
• [ ] Define a column width so that the resulting table is visually balanced (currently the 1st column holding the row values is longer to accommodate the values, but results in the second column looking all squeezed up)
• [ ] Wrap long col header values and row values, so stop truncating table content
• [ ] Align data to the middle - When wrapping text in a row, align the values for adjoining rows to the middle (atm it is done to the bottom)
• [ ] Left align col titles (for num data types we maintain a right alignment of values)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.