Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Percentage area charts can have gaps #1053

Closed
2 tasks done
dej611 opened this issue Mar 4, 2021 · 9 comments · Fixed by #1067
Closed
2 tasks done

Percentage area charts can have gaps #1053

dej611 opened this issue Mar 4, 2021 · 9 comments · Fixed by #1067
Assignees
@nickofthyme
Labels
bug Something isn't working kibana cross issue Has a Kibana issue counterpart :Lens Kibana Lens related issue released Issue released publicly :xy Bar/Line/Area chart related

Comments

@dej611
Copy link
Contributor

dej611 commented Mar 4, 2021 •
edited by nickofthyme
Loading

Describe the bug

Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1163912

When series have null or missing values for a date histogram with area percentage, a gap is rendered within the chart:

Screenshot 2021-03-04 at 18 34 41

Screenshot 2021-03-04 at 18 45 37

To Reproduce

CSV data dump: 
"Top values of FlightDelayType","timestamp per 30 minutes","Count of records"
"No Delay","08:30",1
"No Delay","09:00",2
"No Delay","09:30",6
"No Delay","10:00",6
"No Delay","10:30",5
"No Delay","11:00",3
"No Delay","11:30",6
"No Delay","12:00",11
"No Delay","12:30",8
"No Delay","13:00",3
"No Delay","13:30",8
"No Delay","14:00",9
"No Delay","14:30",4
"No Delay","15:00",4
"No Delay","15:30",8
"No Delay","16:00",5
"No Delay","16:30",4
"No Delay","17:00",6
"No Delay","17:30",2
"No Delay","18:00",6
"No Delay","18:30",4
"No Delay","19:00",3
"No Delay","19:30",3
"No Delay","20:00",5
"No Delay","20:30",1
"No Delay","21:00",1
"No Delay","21:30",7
"No Delay","22:00",6
"No Delay","22:30",9
"No Delay","23:00",3
"No Delay","23:30",9
"No Delay","00:00",3
"No Delay","00:30",6
"No Delay","01:00",4
"No Delay","01:30",5
"No Delay","02:00",2
"No Delay","02:30",4
"No Delay","03:00",4
"No Delay","03:30",7
"No Delay","04:00",4
"No Delay","04:30",6
"No Delay","05:00",7
"No Delay","05:30",4
"No Delay","06:00",5
"No Delay","06:30",4
"No Delay","07:00",9
"No Delay","07:30",3
"No Delay","08:00",6
"No Delay","08:30",5
"No Delay","09:00",10
"No Delay","09:30",6
"No Delay","10:00",4
"No Delay","10:30",4
"No Delay","11:00",8
"No Delay","11:30",2
"No Delay","12:00",3
"No Delay","12:30",3
"No Delay","13:00",6
"No Delay","13:30",2
"No Delay","14:00",1
"No Delay","14:30",10
"No Delay","15:00",8
"No Delay","15:30",10
"No Delay","16:00",5
"No Delay","16:30",2
"No Delay","17:00",5
"No Delay","17:30",2
"No Delay","18:00",0
"No Delay","18:30",1
"Late Aircraft Delay","10:30",2
"Late Aircraft Delay","11:00",0
"Late Aircraft Delay","11:30",0
"Late Aircraft Delay","12:00",0
"Late Aircraft Delay","12:30",0
"Late Aircraft Delay","13:00",0
"Late Aircraft Delay","13:30",1
"Late Aircraft Delay","14:00",1
"Late Aircraft Delay","14:30",3
"Late Aircraft Delay","15:00",0
"Late Aircraft Delay","15:30",0
"Late Aircraft Delay","16:00",0
"Late Aircraft Delay","16:30",3
"Late Aircraft Delay","17:00",0
"Late Aircraft Delay","17:30",1
"Late Aircraft Delay","18:00",0
"Late Aircraft Delay","18:30",1
"Late Aircraft Delay","19:00",0
"Late Aircraft Delay","19:30",1
"Late Aircraft Delay","20:00",0
"Late Aircraft Delay","20:30",0
"Late Aircraft Delay","21:00",0
"Late Aircraft Delay","21:30",1
"Late Aircraft Delay","22:00",1
"Late Aircraft Delay","22:30",1
"Late Aircraft Delay","23:00",1
"Late Aircraft Delay","23:30",0
"Late Aircraft Delay","00:00",0
"Late Aircraft Delay","00:30",0
"Late Aircraft Delay","01:00",0
"Late Aircraft Delay","01:30",0
"Late Aircraft Delay","02:00",0
"Late Aircraft Delay","02:30",0
"Late Aircraft Delay","03:00",2
"Late Aircraft Delay","03:30",2
"Late Aircraft Delay","04:00",1
"Late Aircraft Delay","04:30",0
"Late Aircraft Delay","05:00",1
"Late Aircraft Delay","05:30",1
"Late Aircraft Delay","06:00",2
"Late Aircraft Delay","06:30",0
"Late Aircraft Delay","07:00",0
"Late Aircraft Delay","07:30",0
"Late Aircraft Delay","08:00",0
"Late Aircraft Delay","08:30",0
"Late Aircraft Delay","09:00",1
"Late Aircraft Delay","09:30",1
"Late Aircraft Delay","10:00",0
"Late Aircraft Delay","10:30",0
"Late Aircraft Delay","11:00",0
"Late Aircraft Delay","11:30",0
"Late Aircraft Delay","12:00",1
"Late Aircraft Delay","12:30",0
"Late Aircraft Delay","13:00",2
"Late Aircraft Delay","13:30",1
"Late Aircraft Delay","14:00",0
"Late Aircraft Delay","14:30",1
"Late Aircraft Delay","15:00",0
"Late Aircraft Delay","15:30",0
"Late Aircraft Delay","16:00",0
"Late Aircraft Delay","16:30",0
"Late Aircraft Delay","17:00",1
"Late Aircraft Delay","17:30",1
"Late Aircraft Delay","18:00",1
"NAS Delay","12:00",1
"NAS Delay","12:30",0
"NAS Delay","13:00",0
"NAS Delay","13:30",0
"NAS Delay","14:00",0
"NAS Delay","14:30",1
"NAS Delay","15:00",0
"NAS Delay","15:30",1
"NAS Delay","16:00",0
"NAS Delay","16:30",1
"NAS Delay","17:00",0
"NAS Delay","17:30",0
"NAS Delay","18:00",1
"NAS Delay","18:30",0
"NAS Delay","19:00",1
"NAS Delay","19:30",0
"NAS Delay","20:00",0
"NAS Delay","20:30",0
"NAS Delay","21:00",0
"NAS Delay","21:30",0
"NAS Delay","22:00",1
"NAS Delay","22:30",0
"NAS Delay","23:00",1
"NAS Delay","23:30",1
"NAS Delay","00:00",1
"NAS Delay","00:30",0
"NAS Delay","01:00",1
"NAS Delay","01:30",0
"NAS Delay","02:00",1
"NAS Delay","02:30",0
"NAS Delay","03:00",1
"NAS Delay","03:30",0
"NAS Delay","04:00",0
"NAS Delay","04:30",0
"NAS Delay","05:00",0
"NAS Delay","05:30",0
"NAS Delay","06:00",1
"NAS Delay","06:30",2
"NAS Delay","07:00",0
"NAS Delay","07:30",0
"NAS Delay","08:00",0
"NAS Delay","08:30",0
"NAS Delay","09:00",0
"NAS Delay","09:30",0
"NAS Delay","10:00",1
"NAS Delay","10:30",0
"NAS Delay","11:00",0
"NAS Delay","11:30",1
"NAS Delay","12:00",0
"NAS Delay","12:30",0
"NAS Delay","13:00",0
"NAS Delay","13:30",0
"NAS Delay","14:00",1
"NAS Delay","14:30",0
"NAS Delay","15:00",0
"NAS Delay","15:30",0
"NAS Delay","16:00",0
"NAS Delay","16:30",1
"NAS Delay","17:00",2
"NAS Delay","17:30",1
"Carrier Delay","10:30",1
"Carrier Delay","11:00",0
"Carrier Delay","11:30",0
"Carrier Delay","12:00",0
"Carrier Delay","12:30",0
"Carrier Delay","13:00",0
"Carrier Delay","13:30",0
"Carrier Delay","14:00",0
"Carrier Delay","14:30",0
"Carrier Delay","15:00",1
"Carrier Delay","15:30",0
"Carrier Delay","16:00",0
"Carrier Delay","16:30",0
"Carrier Delay","17:00",0
"Carrier Delay","17:30",1
"Carrier Delay","18:00",1
"Carrier Delay","18:30",1
"Carrier Delay","19:00",0
"Carrier Delay","19:30",0
"Carrier Delay","20:00",1
"Carrier Delay","20:30",1
"Carrier Delay","21:00",1
"Carrier Delay","21:30",0
"Carrier Delay","22:00",1
"Carrier Delay","22:30",1
"Carrier Delay","23:00",0
"Carrier Delay","23:30",0
"Carrier Delay","00:00",1
"Carrier Delay","00:30",0
"Carrier Delay","01:00",0
"Carrier Delay","01:30",1
"Carrier Delay","02:00",0
"Carrier Delay","02:30",0
"Carrier Delay","03:00",0
"Carrier Delay","03:30",0
"Carrier Delay","04:00",0
"Carrier Delay","04:30",0
"Carrier Delay","05:00",1
"Carrier Delay","05:30",0
"Carrier Delay","06:00",1
"Carrier Delay","06:30",0
"Carrier Delay","07:00",0
"Carrier Delay","07:30",1
"Carrier Delay","08:00",0
"Carrier Delay","08:30",0
"Carrier Delay","09:00",0
"Carrier Delay","09:30",0
"Carrier Delay","10:00",0
"Carrier Delay","10:30",1
"Carrier Delay","11:00",1
"Carrier Delay","11:30",0
"Carrier Delay","12:00",1
"Carrier Delay","12:30",1
"Carrier Delay","13:00",0
"Carrier Delay","13:30",0
"Carrier Delay","14:00",0
"Carrier Delay","14:30",0
"Carrier Delay","15:00",0
"Carrier Delay","15:30",0
"Carrier Delay","16:00",2
"Carrier Delay","16:30",1
"Security Delay","09:30",2
"Security Delay","10:00",0
"Security Delay","10:30",0
"Security Delay","11:00",0
"Security Delay","11:30",0
"Security Delay","12:00",0
"Security Delay","12:30",0
"Security Delay","13:00",0
"Security Delay","13:30",0
"Security Delay","14:00",0
"Security Delay","14:30",0
"Security Delay","15:00",0
"Security Delay","15:30",0
"Security Delay","16:00",0
"Security Delay","16:30",0
"Security Delay","17:00",0
"Security Delay","17:30",0
"Security Delay","18:00",0
"Security Delay","18:30",0
"Security Delay","19:00",0
"Security Delay","19:30",0
"Security Delay","20:00",0
"Security Delay","20:30",0
"Security Delay","21:00",1
"Security Delay","21:30",0
"Security Delay","22:00",0
"Security Delay","22:30",0
"Security Delay","23:00",0
"Security Delay","23:30",0
"Security Delay","00:00",1
"Security Delay","00:30",2
"Security Delay","01:00",0
"Security Delay","01:30",1
"Security Delay","02:00",0
"Security Delay","02:30",0
"Security Delay","03:00",0
"Security Delay","03:30",1
"Security Delay","04:00",0
"Security Delay","04:30",1
"Security Delay","05:00",0
"Security Delay","05:30",0
"Security Delay","06:00",1
"Security Delay","06:30",0
"Security Delay","07:00",0
"Security Delay","07:30",0
"Security Delay","08:00",0
"Security Delay","08:30",0
"Security Delay","09:00",0
"Security Delay","09:30",0
"Security Delay","10:00",1
"Security Delay","10:30",0
"Security Delay","11:00",0
"Security Delay","11:30",0
"Security Delay","12:00",0
"Security Delay","12:30",0
"Security Delay","13:00",0
"Security Delay","13:30",1
"Weather Delay","13:30",1
"Weather Delay","14:00",1
"Weather Delay","14:30",1
"Weather Delay","15:00",0
"Weather Delay","15:30",0
"Weather Delay","16:00",0
"Weather Delay","16:30",0
"Weather Delay","17:00",0
"Weather Delay","17:30",0
"Weather Delay","18:00",0
"Weather Delay","18:30",0
"Weather Delay","19:00",0
"Weather Delay","19:30",0
"Weather Delay","20:00",0
"Weather Delay","20:30",0
"Weather Delay","21:00",0
"Weather Delay","21:30",0
"Weather Delay","22:00",1
"Weather Delay","22:30",0
"Weather Delay","23:00",0
"Weather Delay","23:30",0
"Weather Delay","00:00",0
"Weather Delay","00:30",0
"Weather Delay","01:00",0
"Weather Delay","01:30",0
"Weather Delay","02:00",0
"Weather Delay","02:30",0
"Weather Delay","03:00",1
"Weather Delay","03:30",0
"Weather Delay","04:00",0
"Weather Delay","04:30",0
"Weather Delay","05:00",0
"Weather Delay","05:30",1
"Weather Delay","06:00",0
"Weather Delay","06:30",0
"Weather Delay","07:00",0
"Weather Delay","07:30",0
"Weather Delay","08:00",1
"Weather Delay","08:30",0
"Weather Delay","09:00",1
"Weather Delay","09:30",0
"Weather Delay","10:00",1
"Weather Delay","10:30",0
"Weather Delay","11:00",0
"Weather Delay","11:30",0
"Weather Delay","12:00",0
"Weather Delay","12:30",1
"Weather Delay","13:00",0
"Weather Delay","13:30",0
"Weather Delay","14:00",0
"Weather Delay","14:30",0
"Weather Delay","15:00",0
"Weather Delay","15:30",0
"Weather Delay","16:00",0
"Weather Delay","16:30",0
"Weather Delay","17:00",0
"Weather Delay","17:30",0
"Weather Delay","18:00",2

Kibana Cross Issues
Lens Cross Issue => elastic/kibana#93648

Checklist

Delete any items that are not applicable to this issue.

  • every related Kibana issue is listed under Kibana Cross Issues list
  • kibana cross issue tag is associated to the issue if any kibana cross issue is present
@dej611 dej611 added bug Something isn't working kibana cross issue Has a Kibana issue counterpart :xy Bar/Line/Area chart related :Lens Kibana Lens related issue labels Mar 4, 2021
@nickofthyme
Copy link
Collaborator

Thanks for opening this. I can't seem to repro this in our codesandbox with the information you provided. Could you take a look and see if you can repro it here https://codesandbox.io/s/eager-sid-y48o8?file=/src/App.tsx?

image

Also could be related to #618

@dej611
Copy link
Contributor Author

dej611 commented Mar 5, 2021

Your codesandbox made me found another bug. :D
Anyway, the problem was the missing date on the x dimension, as the data spans to multiple days, hence all gaps were covered between them.

Adding a date to the timestamps makes the bug appear: https://codesandbox.io/s/blue-microservice-b3mf9?file=/src/App.tsx

Screenshot 2021-03-05 at 10 36 11

@nickofthyme
Copy link
Collaborator

nickofthyme commented Mar 5, 2021 •
edited
Loading

Your codesandbox made me found another bug. :D

😭

To me, this functionality is expected in the way we are handling fitting missing and nil data. Although not visually appealing. This only happens when using <AreaSeries fit="none" /> (the default). Using fit such as zero gives you the filled areas with a subdued/dashed style as shown below. This fitting option is available in lens today.

Image 2021-03-05 at 3 13 36 PM

An edge case here is when all the y values are zero at a given x value on a stacked Percentage mode area chart. In this case 0% of 1 is 0 and there will always be a gap. See #618 and this story for more info. This would look something like this...

image

@markov00 do you agree?

@dej611
Copy link
Contributor Author

dej611 commented Mar 8, 2021 •
edited
Loading

But if the chart is set to percentage, it should not require to have any fitting function: the total of each bucket is either 100% or 0%.
Also, because of the same bug, tooltips shows only partial informations in those areas.

Area with gaps, 5 entries in the tooltip:

Screenshot 2021-03-08 at 09 52 59

Few buckets later, 6 entries in the tooltip:

Screenshot 2021-03-08 at 09 51 39

And the problem is not entries omitted because of zero values, but actual null missing entries.

@nickofthyme
Copy link
Collaborator

Oh I see what you mean now. I'll take a look.

@nickofthyme nickofthyme self-assigned this Mar 8, 2021
@flash1293 flash1293 mentioned this issue Mar 8, 2021
Closed
@nickofthyme
Copy link
Collaborator

Ok @dej611 found a bug in this example data set that incorrectly creates gaps on stacked percentage area charts.

https://codesandbox.io/s/bad-gaps-data-ie93p?file=/src/App.tsx

image

The gap goes away when we remove the last bucket from the data.

@nickofthyme
Copy link
Collaborator

nickofthyme commented Mar 9, 2021 •
edited
Loading

We found the cause of this gap to be a bug in Chromium. For some cases when y0 and y1 points at the same x are equal, the area will be pinched such that there is a discontinuity in the area fill.

Chrome

Screen.Recording.2021-03-09.at.12.08.53.PM.mp4

Safari

Screen.Recording.2021-03-09.at.12.10.47.PM.mp4

We will file an issue with chromium but in the meantime, I will put up a hack PR to fix this visually until it is fixed on Chrome.

@nickofthyme nickofthyme mentioned this issue Mar 9, 2021
Merged
3 tasks
@nickofthyme
Copy link
Collaborator

Due to https://bugs.chromium.org/p/chromium/issues/detail?id=1163912

@nickofthyme
Copy link
Collaborator

🎉 This issue has been resolved in version 25.4.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme nickofthyme added the released Issue released publicly label Mar 23, 2021
nickofthyme added a commit to nickofthyme/elastic-charts that referenced this issue Apr 26, 2024
@nickofthyme
fix: minBarHeight issue
d51ac12 
- This comes from the change to use the shared `getY1ScaledValueFn` that adds a little extra for elastic#1053.
- The chrome bug causing elastic#1053 has now been fixed, so removing this code.
This was referenced Apr 26, 2024
Merged
Merged
nickofthyme added a commit that referenced this issue May 7, 2024
@nickofthyme
fix(barSeries): error rendering bars with negative log scale (#2407)
4ab6d8f 
This PR mainly fixes the rendering of bars on a negative log scale. Also fixes the tooltip for banded bar charts.

In addition this PR fixes some other issues including
- Banded bar charts missing lower bound series in tooltip and legend
- Wrong highlighting of tooltips value and highlighted bar geometries, particularly for banded bar charts.
- Banded series items in tooltip were being shuffled according to the distance to the cursor position. Now I pre-sort them to not abruptly switch.
- The Chrome bug from #1053 associated with filling areas containing sharp corners, is now fixed and since using the shared `getY1ScaledValueFn` and `getY0ScaledValueFn` functions I just removed this logic to avoid checking.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nickofthyme nickofthyme

Labels
bug Something isn't working kibana cross issue Has a Kibana issue counterpart :Lens Kibana Lens related issue released Issue released publicly :xy Bar/Line/Area chart related
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: chromium area path render bug nickofthyme/elastic-charts
2 participants
@dej611 @nickofthyme