Skip to content

feat(echarts): update to echarts@5

Lukas Eipert requested to merge leipert-echarts-major into main

What does this MR do?

Updates echarts to a new major version. This version enables to use treeshaking down the road in order to save on import size. We have not enabled tree-shaking in this MR, in order to focus on the update.

[Break] Breaking changes against v4.9:

  • The default theme colors has been changed. If intending to use the theme of v4.9-, please set option.color = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];.
  • Remove built-in map geoJSON. https://github.com/apache/echarts/pull/13565.
  • Drop the support of the legacy IE8. The previous VML renderer (necessary in IE8) will not be updated to work in v5.0.
  • The exported modules from 'echarts/lib/export.js' is not mounted to 'echarts/lib/echarts.js' by default. If the upper application previously used import * as echarts from 'echarts/lib/echarts' and used any of the exported modules in 'echarts/lib/export.js', please change the import code to import echarts from 'echarts/index.blank', where the modules from 'echarts/lib/export.js' are mounted by default.
  • If the upper application previously imported src/echarts.js, src/chart/*.js and src/component/*.js, it can not work any more because all of the files in /src folder are migrated to *.ts.
  • The priority of the visuals between visualMap and itemStyle|lineStyle|areaStyle are reversed. That is, previously, the visuals (i.e., color, symbol, symbolSize, ...) that generated by the component visualMap has highest priority, which will overwrite the same visuals specified in itemStyle|lineStyle|areaStyle. That brought trouble to specify specific style to some certain data items. Since v5.0, the visuals specified in itemStyle|lineStyle|areaStyle has highest priority.
  • The behavior of rich.?.padding are changed. Previously rich.?.padding: [11, 22, 33, 44] indicates that padding-top is 33 and padding-bottom is 11, which is a buggy implementation because it is different from what CSS did. Since v5.0, we fix it: rich.?.padding: [11, 22, 33, 44] indicates padding-top is 11 and padding-bottom is 33. aria is not included in dist/echarts.simple(.min).js since v5.0. But it is still included in dist/echarts.common(.min).js and dist/echarts(.min).js. NB: Couldn't find any implementation of this across gitlab-ui and gitlab projects.

Source: https://echarts.apache.org/en/changelog.html

Does this MR meet the acceptance criteria?

Conformity

  • Code review guidelines.
  • GitLab UI's contributing guidlines.
  • If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer.
  • If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer.
  • If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui package can be upgraded quickly after the changes are released:
  • Added the ~"component:*" label(s) if applicable.

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • Security reports checked/validated by a reviewer from the AppSec team

Accessibility

If this MR adds or modifies a component, take a few moments to review the following:

  • All actions and functionality can be done with a keyboard.
  • Links, buttons, and controls have a visible focus state.
  • All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
  • Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
  • Color combinations have sufficient contrast.
Edited by Savas Vedova

Merge request reports