supervons / react-native-echarts-pro

A React-Native charts based on Apache ECharts, support various charts and map.
https://supervons.github.io/react-native-echarts-pro-docs/
MIT License
216 stars 32 forks source link

[feature] add new props "enableParseStringFunction" #91

Closed congshengwu closed 1 year ago

congshengwu commented 1 year ago

Summary

This PR allows the developers to resolve the Hermes bytecode conversion issue for the Echarts option's function. Related issue

The default value of "enableParseStringFunction" is "false". It will not affect any original code logic whether the value is "true" or "false". And if the prop is set to "true", any Echarts option's function in string format and starting with the string "function" will be converted to a normal function in the WebView environment dynamically.

Because the function is in string format, the Hermes bytecode conversion will not work. This solution will work as expected in both debug and release modes.

There is also a 'show source' solution from the Hermes official, but from my side, it only works on my Android release environment for now.

Test Plan

Code:

// Echarts option
const option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLabel: {
      formatter: `function (val) {
        return val + '\\n' + '(week)';
      }`,
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: `function (val) {
        return formatterVariable.currency + val;
      }`,
      textStyle: {
        color: `function (value, index) {
          return value >= 200 ? 'green' : 'red';
        }`,
      },
    },
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
    },
  ],
};

// Echarts view
<RNEChartsPro
  style={{width: Dimensions.get('window').width}}
  option={option}
  formatterVariable={{currency: '$'}}
  enableParseStringFunction
/>

Running result:

demo

Other notes:

The normal function using 'show source' will also work like before, there is no effect on the origin code logic(even if not using the Hermes engine).

supervons commented 1 year ago

Great feature, before, the hermes mode is a sore poin to us, but now it past.

The next version will be released.