Show Cell Bars does not work on the Percentage Metrics in Table Chart

[yousoph]

The Cell Bars option was not shown correctly in the Percentage Metrics column.

How to reproduce the bug

1. Create a Table chart.
2. Add a column into the Dimensions, Metrics, and Percentage Metrics fields.
3. Go to the Customize tab and enable the CELL BARS option.
   Alternatively, on the CUSTOMIZE COLUMNS field, ensure that the SHOW CELL BARS option is enabled for the column.

Expected results

The Cell Bars visual cue will be shown in the Percentage Metrics column.

Actual results

No Cell Bars visual cue is shown on the Percentage Metrics column.

Screenshots

Environment

(please complete the following information):

• browser type and version: Chrome
• superset version: master
• python version: python --version
• node.js version: node -v
• any feature flags active:

Checklist

Make sure to follow these steps before submitting your issue - thank you!

• I have checked the superset logs for python stacktraces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• I have checked the issue tracker for the same issue and I haven't found one similar.

[SA-Ark]

The issue here is that the “isMetric” key for percentage metric is coming up as False from the columns when it is being imported from props.

As we follow the data into the line where we are creating “const valueRange”, we can see that we are calling the getValueRange function only when either “isMetric” is True or “isRawRecords” is true. “isRawRecords” is false for both, and “isMetric” is only true for regular metrics and not percentage metrics. So the "getValueRange" function is not even being called for percentage metrics which is why it is not calculated for these metrics.

When we follow the data further, we can see in the “” component where we are returning the Cell Bars we have a condition of “valueRange” to not be null in order to display the cell bars. We can verify with console.logs that the valueRange is never calculated in the case of percentage metrics and it is null. This is why the cell bars are not showing up for only the percentage metrics because the css class for it is not being added since “valueRange” is null.

Proposed solution:

A solution that fixed the cell bars for me is adding a separate key[0] == “%” in the conditional where we are checking (isMetric || isRawRecords) while creating the const “valueRange” variable. This ensures none of the other code is messed with and the cell bars still show up.

Alternatively, we can also make the isMetric variable true from the file where the percentage metric props are being created, but I am not sure if that might break other parts of the code, so this seemed to be the least intrusive way to fix it.

End result: