fix(plugin-chart-echarts): support truncated numeric x-axis #26215
Conversation
|
/testenv up |
|
@villebro Ephemeral environment spinning up at http://35.93.27.117:8080. Credentials are |
|
@michael-s-molina @sfirke I've created a chart that demonstrates how this feature works: Truncated numerical x-axis I may add a new integration test to ensure the e2e flow works, but in the meantime I think the PR should be ready for review. |
| @@ -26,6 +26,7 @@ export const DEFAULT_FORM_DATA: Partial<EchartsBubbleFormData> = { | |||
| logYAxis: false, | |||
| xAxisTitleMargin: 30, | |||
| yAxisTitleMargin: 30, | |||
| truncateXAxis: false, | |||
There was a problem hiding this comment.
Note that for bubble chart, I'm assuming truncation is disabled by default, as it's more likely people want to see it starting from origo in this case (having a truncated x axis but a non-truncated y axis doesn't make sense for a scatter plot IMO).
There was a problem hiding this comment.
I don't necessarily agree, I think it's lower-risk to have truncation as the default here too. If the user's data is suited for showing the origin, then I think it will look okay with the default truncation, but the converse is not true.
The x-axis in a scatterplot could be temperature, sales $, counts, or anything else where the difference between zero and the min value is greater than the range between min and max [which is the condition where truncation is most important].
There was a problem hiding this comment.
I'm fine with using truncateXAxis: true as the global default. Any objections @michael-s-molina ? I assume we can do this later without blocking the release, as it's a pretty minor change IMO..
There was a problem hiding this comment.
No objection. We can cherry-pick the change for the next patch.
|
Thanks for the PR @villebro. While testing, I found a weird behavior when applying the bounds to temporal and categorial axes. I pushed a change to ignore the bounds for non-numerical axis and also improved the tooltip description to make it more clear that this control is only for numerical types. |
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## master #26215 +/- ##
=======================================
Coverage 69.19% 69.19%
=======================================
Files 1945 1945
Lines 75928 75937 +9
Branches 8453 8458 +5
=======================================
+ Hits 52537 52544 +7
- Misses 21207 21208 +1
- Partials 2184 2185 +1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
|
Ephemeral environment shutdown and build artifacts deleted. |
Co-authored-by: Michael S. Molina <michael.s.molina@gmail.com>
Co-authored-by: Michael S. Molina <michael.s.molina@gmail.com> (cherry picked from commit 07e5fe8)
|
This is a nice enhancement, thank you @villebro 🙌 ! |
|
Out of interest @villebro where was the original [1900, 2017) range defined? |
|
@john-bodley in the screenshot you should be able to see that the lower bound has been set manually to 1900, with the upper bound being left undefined (=autodetect).
|
|
@villebro sorry by bad I was looking at the wrong screenshot. I meant the [0, 2,500) interval which resulted in the original "dirac delta"-like behavior. |
@john-bodley oh, that range wasn't explicitly defined anywhere, that's just what ECharts defaults to unless the bounds are either overridden or set to |
…6215) Co-authored-by: Michael S. Molina <michael.s.molina@gmail.com>
…6215) Co-authored-by: Michael S. Molina <michael.s.molina@gmail.com>
SUMMARY
A recent PR that added support for numerical x-axes caused unintuitive results when the x-axis contained a highly constrained interval, e.g. the years 1980-2017. In this case, the x-axis was bounded between [0, 7000], causing a highly spiked appearance. This is in contrast with other visualization tools, that default automatically truncating the x-axis.
This PR adds two new x-axis truncation controls, similar to the existing ones for the y-axis. With this change, the x-axis will be truncated by default. If the lower and/or upper bounds are left undefined, they will default to the min and max values from the dataset (calculated automatically by ECharts). This ensures that the data is bounded correctly.
AFTER
Now the x-axis is automatically truncated (see the new "TRUNCATE X AXIS" control, which defaults to being checked):
By defining the lower and/or upper bound, the x-axis is updated accordingly:
BEFORE
When disabling x-axis truncation, the current "dirac delta"-like behavior is reproduced on the Video Game example chart:
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION