fix: upgrade to analytics with highcharts major version bump and address regressions

[HendrikThePendric]

ISSUE WAS PUT ON HOLD DUE TO KFMT FINDINGS

No issue nr available

Requires: dhis2/analytics#1728

This PR is blocked

See KFMT Finding for more details, but the following points are blocking this PR:

• yAxis max value is calculated incorrectly for scatterplot with multiple series when using boost module highcharts/highcharts#22183 the scatterplot bug needs to be solved before we can upgrade
• feat: use highchart offline export for downloads #3135 we can avoid implementing a workaround for the Batik incompatibility by switching to offline exporting

At the time of writing we are using a GitHub commit URL for @dhis2/analytics, once the above PR is merged we can switch to a regular NPM version number.

---

Key features

1. We are now using Highcharts v11

---

Description

After the upgrade, we found an issue with the height of the chart: it would not fill the container but set the default 400px height. After discussing the problem with @edoardo we found that removing some code that we used to scale the chart fixed the issue. Quite likely, there was some interference between Highchart's auto-scaling and ours.

KFMT findings

During KFMT two critical issues emerged. Although a workaround exists for both of these bugs, we decided it would be better to put this PR on hold.

Highcharts v11 is incompatible with Batik

Highcharts uses feDropShadow, which is a valid SVG element but is not supported by Batik. This problem was also reported in [a Highcharts issue] (highcharts/highcharts#21557) by someone else, and a workaround solution was suggested. However, for us to implement this workaround would be quite messy since the CSS part would be in DV and the rest of the workaround in @dhis2/analytics. Besides this, there ongoing work in dhis2/analytics#1731 and #3135 to switch to Highcharts offline-export module for exports and once this is completed we do not need to rely on Batik anymore, making this problem irrelevant.

There is a bug in highcharts related to scatterplots with the boost module

We've reported the bug highcharts/highcharts#22183 and decided we would wait for it to be resolved before proceeding. We did come up with a workaround though: we could merge all data-points to a single series and style each point individually, as in this example.

---

TODO

• Wait for fix: handle single value vis-type as highcharts chart instance #3289 to be released
• Cypress tests
• Decide wether or not we want the new v11 color scheme/ theme
• Wait for Highcharts bug yAxis max value is calculated incorrectly for scatterplot with multiple series when using boost module highcharts/highcharts#22183 to be solved
• Get feat: use highchart offline export for downloads #3135 merged
• Manual testing (check all chart types, check chart dimensions in normal view + modal + dashboard)
• Switch to released version of analytics

---

Known issues

• Highcharts 11 uses a new color scheme. It is not wildly different from the old one and looks quite nice. During KFMT we decided we would keep it. If we were to change out minds, here are some instructions on how to revert to the old theme.

[dhis2-bot]

🚀 Deployed on https://pr-3288.data-visualizer.netlify.dhis2.org