Rendering bug with stacked data

[wylieconlon]

I am testing out data formats that are used in Kibana, and found this example. For this sample SQL query there is incorrect rendering.

Sample query: SELECT geo.src, geo.dest, COUNT(*) as C GROUP BY geo.src, geo.dest ORDER BY COUNT(*) DESC LIMIT 50

This rendering shows all the data on the legend, but does not draw any bars.

I've created a minimal test case here for you to see the data used: https://codesandbox.io/s/async-meadow-divin

See the full data set

const rows = [['IN', 'IN', '142'],
['IN', 'CN', '50'],
['CN', 'CN', '49'],
['CN', 'IN', '41'],
['CN', 'US', '24'],
['US', 'IN', '24'],
['IN', 'US', '22'],
['US', 'CN', '18'],
['CN', 'ID', '13'],
['ID', 'CN', '13'],
['US', 'US', '13'],
['CN', 'BR', '11'],
['JP', 'IN', '10'],
['BR', 'CN', '9'],
['BR', 'IN', '8'],
['IN', 'BD', '8'],
['IN', 'BR', '8'],
['IN', 'IR', '8'],
['IN', 'PK', '8'],
['IT', 'CN', '8'],
['CN', 'DE', '7'],
['KR', 'CN', '7'],
['MX', 'IN', '7'],
['NG', 'CN', '7'],
['US', 'ID', '7'],
['CN', 'BD', '6'],
['CN', 'MM', '6'],
['CN', 'MX', '6'],
['CN', 'NG', '6'],
['CN', 'RU', '6'],
['ES', 'IN', '6'],
['ID', 'IN', '6'],
['IN', 'ID', '6'],
['US', 'BR', '6'],
['US', 'TR', '6'],
['BD', 'CN', '5'],
['BD', 'IN', '5'],
['BR', 'US', '5'],
['CN', 'ES', '5'],
['CN', 'JP', '5'],
['EG', 'IN', '5'],
['ES', 'CN', '5'],
['ID', 'US', '5'],
['IN', 'EG', '5'],
['IN', 'JP', '5'],
['IN', 'MX', '5'],
['IN', 'NG', '5'],
['IN', 'PH', '5'],
['PK', 'CN', '5'],
['PK', 'IN', '5']];

There is also some connection to this Canvas issue: elastic/kibana#52419

[wylieconlon]

I've compared our rendering to how Vega deals with the same dataset, for reference:

Try it in the vega editor

[markov00]

@wylieconlon the y axis is a linear scale but in the data table the y values are strings.
We don't automatically convert them to numbers because we assume a valid dataset configured by the user. If you remap the dataset converting the y value to a number it will correctly show the stacked bar chart:

[wylieconlon]

Okay yes, I see that now if I convert the values to numbers they are rendered correctly. What I don't understand is- if the linear scale can't handle strings, why does render at all?

[markov00]

It's a d3 scale magic :D

[markov00]

Or there is something else going on in our chart that wrongly interpret the numbers here. Let me check and I will be back

[markov00]

Ok, so this has something to deal with the way we compute the stacked values.
Since we expect the y to be a number, to compute the y position of a stacked bar we sum the current value with the previous value. You can easily imagine what can happen if you "sum" two strings...

[markov00]

🎉 This issue has been resolved in version 15.0.5 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀