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

How to best represent clipped y domains in line and area charts #1129

Closed
nickofthyme opened this issue Apr 21, 2021 · 7 comments · Fixed by #1181
Closed

How to best represent clipped y domains in line and area charts #1129

nickofthyme opened this issue Apr 21, 2021 · 7 comments · Fixed by #1181
Assignees
@markov00
Labels
:data Data/series/scales related issue discuss To be discussed enhancement New feature or request released Issue released publicly

Comments

@nickofthyme
Copy link
Collaborator

nickofthyme commented Apr 21, 2021 •
edited
Loading

When a dataset domain is between 0 and 180 but the max domain is explicitly limited to 150 we treat the isolated points as if there is a discontinuity in the dataset by removing the points from being rendered like shown in the upper left corner below.

mockup

Previously kibana (i.e. vislib) rendered these points as connected thus clamping the points that go beyond the max within the set domain.

mockup

This issue is to discuss the best way to represent this scenario, as well as what options might be exposed to render one way or another.

See slack discussion here and discuss post here.

Related issue #1044
@nickofthyme nickofthyme added enhancement New feature or request discuss To be discussed labels Apr 21, 2021
@nickofthyme
Copy link
Collaborator Author

One option: ☝️

Render connecting lines to points outside of the domain and simply clip the lines. Could format lines differently to show discontinuity.

image

@markov00
Copy link
Member

markov00 commented Apr 21, 2021 •
edited
Loading

Option ✌️

Render normally the lines (without using a different style), adds a small padding after the current max value and render a small annotation along the axis, like the one in this example (just think about it vertically at the end of the Y axis), to describe that there is 'more' and something is clipped

@waverly360
Copy link

When I'm creating these visualizations, I interpret "axis extents" as a representation of the visible area of that chart, not an implicit filter that hides data. I've used it when creating CPU/Memory/IO utilization charts that I want to max out at 100%. A system that ends up going well over 100% scales the rest of the chart (other systems or metrics) which makes that particular chart misleading.

With the second example/option above, it's not intuitive to me what's happening with the data. I would prefer the visual representation to be at the top of the chart, somehow connecting those lines to make it obvious that the values exceeded the extents of the graph.

If someone wants to filter out data that exceeds 80%, wouldn't it make more sense for them to add a filter specifically into their query for that?

@markov00
Copy link
Member

markov00 commented May 28, 2021 •
edited
Loading

Thanks @waverly360 for your opinion, it definitely makes much more sense the way you described the extents than the way it works today.
The axis extends is basically the representation of a zoom action, where you just want to reduce and zoom in or out the current dataset.
@jgowdyelastic I've replicated your example here: https://codesandbox.io/s/sparkling-wildflower-10lxd if you switch between @elastic/charts version 24.0.0 and 24.1.0 you will notice that in one the area is clipped (24.0) and in the other case the area is rendered as a set of orphan data points (24.1)
I will investigate further to understand exactly if that was a really wanted behaviour or not

@nickofthyme
Copy link
Collaborator Author

If someone wants to filter out data that exceeds 80%, wouldn't it make more sense for them to add a filter specifically into their query for that?

@waverly360 This is true but you can only filter on documents, not on the aggregations.

@markov00
Copy link
Member

This is true but you can only filter on documents, not on the aggregations.

it's anyway not clear what happens and I'm pretty sure is not our task right now to filter on aggregation (at least not in that hidden way, but through a clear filter API)

@markov00 markov00 added the :data Data/series/scales related issue label May 31, 2021
@markov00 markov00 self-assigned this May 31, 2021
@markov00 markov00 mentioned this issue May 31, 2021
Merged
2 tasks
markov00 added a commit that referenced this issue Jun 3, 2021
@markov00
fix(domain): custom domain should not filter data (#1181)
76e8dca 
Domain bounds should be used in the sense of zooming in/out with a viewport on the chart. A regression of this behavior slipped through due to a [PR](#896) causing data to be filtered out when applying a custom domain, removing data points from areas and lines. The right behavior is now restored.

fix #1129
nickofthyme pushed a commit that referenced this issue Jun 4, 2021
@semantic-release-bot
chore(release): 30.0.0 [skip ci]
7b80f7e 
# [30.0.0](v29.2.0...v30.0.0) (2021-06-04)

### Bug Fixes

* **domain:** custom domain should not filter data ([#1181](#1181)) ([76e8dca](76e8dca)), closes [#1129](#1129)
* **value_labels:** zero as a valid value for textBorder and borderWidth ([#1182](#1182)) ([a64f333](a64f333))
* annotation tooltip display when remounting specs ([#1167](#1167)) ([8408600](8408600))
* render nodeLabel formatted text into the nodes ([#1173](#1173)) ([b44bdff](b44bdff))

### Features

* **axis:** allow pixel domain padding for y axes  ([#1145](#1145)) ([7c1fa8e](7c1fa8e))
* apply value formatter to the default legend item label ([#1190](#1190)) ([71474a5](71474a5))
* **tooltip:** stickTo vertical middle of the cursor ([#1163](#1163)) ([380363b](380363b)), closes [#1108](#1108)
* **wordcloud:** click and over events on text ([#1180](#1180)) ([196fb6a](196fb6a)), closes [#1156](#1156)

### BREAKING CHANGES

* **value_labels:** the `textBorder` of `ValueFillDefinition` is now optional or a number only
@nickofthyme
Copy link
Collaborator Author

🎉 This issue has been resolved in version 30.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@nickofthyme nickofthyme added the released Issue released publicly label Jun 4, 2021
@nickofthyme nickofthyme mentioned this issue Jul 14, 2021
Closed
1 task
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this issue Feb 10, 2022
@semantic-release-bot
chore(release): 30.0.0 [skip ci]
6f3b392 
# [30.0.0](elastic/elastic-charts@v29.2.0...v30.0.0) (2021-06-04)

### Bug Fixes

* **domain:** custom domain should not filter data ([opensearch-project#1181](elastic/elastic-charts#1181)) ([92ba84c](elastic/elastic-charts@92ba84c)), closes [opensearch-project#1129](elastic/elastic-charts#1129)
* **value_labels:** zero as a valid value for textBorder and borderWidth ([#1182](elastic/elastic-charts#1182)) ([880fbf1](elastic/elastic-charts@880fbf1))
* annotation tooltip display when remounting specs ([opensearch-project#1167](elastic/elastic-charts#1167)) ([7163951](elastic/elastic-charts@7163951))
* render nodeLabel formatted text into the nodes ([opensearch-project#1173](elastic/elastic-charts#1173)) ([0de9688](elastic/elastic-charts@0de9688))

### Features

* **axis:** allow pixel domain padding for y axes  ([#1145](elastic/elastic-charts#1145)) ([6787728](elastic/elastic-charts@6787728))
* apply value formatter to the default legend item label ([opensearch-project#1190](elastic/elastic-charts#1190)) ([20108bb](elastic/elastic-charts@20108bb))
* **tooltip:** stickTo vertical middle of the cursor ([#1163](elastic/elastic-charts#1163)) ([b858fb3](elastic/elastic-charts@b858fb3)), closes [opensearch-project#1108](elastic/elastic-charts#1108)
* **wordcloud:** click and over events on text ([opensearch-project#1180](elastic/elastic-charts#1180)) ([adbf341](elastic/elastic-charts@adbf341)), closes [opensearch-project#1156](elastic/elastic-charts#1156)

### BREAKING CHANGES

* **value_labels:** the `textBorder` of `ValueFillDefinition` is now optional or a number only
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@markov00 markov00

Labels
:data Data/series/scales related issue discuss To be discussed enhancement New feature or request released Issue released publicly
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(domain): custom domain should not filter data markov00/elastic-charts
3 participants
@markov00 @nickofthyme @waverly360