fix(plugin-chart-echarts): support truncated numeric x-axis

[villebro]

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

• Has associated issue: closes Bar chart with numeric x-axis always starts x-axis at zero regardless of data #26139
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[villebro]

/testenv up

[github-actions]

@villebro Ephemeral environment spinning up at http://35.93.27.117:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[villebro]

@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.

[villebro]

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).

[sfirke]

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].

[villebro]

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..

[michael-s-molina]

No objection. We can cherry-pick the change for the next patch.

[michael-s-molina]

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]

Codecov Report

Attention: 9 lines in your changes are missing coverage. Please review.

Comparison is base (d2adc85) 69.19% compared to head (cc82fcf) 69.19%.
Report is 1 commits behind head on master.

Files	Patch %	Lines
...gin-chart-echarts/src/Timeseries/transformProps.ts	14.28%	3 Missing and 3 partials ⚠️
.../plugin-chart-echarts/src/Bubble/transformProps.ts	66.66%	0 Missing and 1 partial ⚠️
...hart-echarts/src/MixedTimeseries/transformProps.ts	0.00%	1 Missing ⚠️
...tend/plugins/plugin-chart-echarts/src/controls.tsx	66.66%	1 Missing ⚠️

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     

Flag	Coverage Δ
javascript	56.51% <47.05%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[michael-s-molina]

LGTM. Thanks for the fix @villebro.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[sfirke]

This is a nice enhancement, thank you @villebro 🙌 !

[john-bodley]

Out of interest @villebro where was the original [1900, 2017) range defined?

[villebro]

@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).

[john-bodley]

@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.

[villebro]

@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 dataMin and dataMax.

[sadpandajoe]

@villebro I think this pr might have a weird affect on current echart bubble charts. I've documented the issue here: #26242.