Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chart rendering is inconsistent after RN update #107

Open
ivantrejo41 opened this issue Jun 15, 2023 · 4 comments
Open

Chart rendering is inconsistent after RN update #107

ivantrejo41 opened this issue Jun 15, 2023 · 4 comments

Comments

@ivantrejo41
Copy link
Contributor

After using this library without any issues for several months, we recently upgraded react-native to a newer version due to an incompatibility with another dependency. However, we encountered an issue with the representation of the charts after the upgrade.

Issue Details:

The unusual behavior we are experiencing is that when we request and update the data of the object to be represented, the chart rendering is inconsistent. Depending on the case and the timing, the chart may or may not be rendered. Interestingly, if the series has no data, or the react-native debugger is enabled, it always gets rendered.

Additionally, we noticed that enabling the react-native debugger results in the chart being rendered in every case. Furthermore, we have a component that includes two instances of RNEP (react-native-echarts-pro). One instance works all the time, but the other instance's rendering behavior is dependent on the occasion. While trying to debug it always works, so we can't really debug. This issue might be related to #106

Chart Rendering Examples:

Here's a representation of how the chart appears when it doesn't render (blank):
MicrosoftTeams-image (8)

And here's a representation of the chart when it renders correctly:
MicrosoftTeams-image (9)

[Insert screenshot or code snippet representing the expected rendering]

Versions:

react-native-echarts-pro version: 1.9.1
react-native version: 0.71.6
react-native-webview version: 11.2.3
Platforms: Android and iOS

Code Snippet:

data = {"grid":{"bottom":16,"top":8,"left":8,"right":8,"containLabel":true},"legend":{"show":false,"top":"bottom"},"tooltip":{"trigger":"axis","fontSize":3},"xAxis":{"type":"time","axisLabel":{"formatter":"{d}"}},"yAxis":{"type":"value"},"series":[{"name":"Autoconsumo","data":[{"name":"2023-06-01T00:00:00+02:00","value":["2023-06-01T00:00:00+02:00",0]},{"name":"2023-06-02T00:00:00+02:00","value":["2023-06-02T00:00:00+02:00",0]},{"name":"2023-06-03T00:00:00+02:00","value":["2023-06-03T00:00:00+02:00",0]},{"name":"2023-06-04T00:00:00+02:00","value":["2023-06-04T00:00:00+02:00",0]},{"name":"2023-06-05T00:00:00+02:00","value":["2023-06-05T00:00:00+02:00",0]},{"name":"2023-06-06T00:00:00+02:00","value":["2023-06-06T00:00:00+02:00",0]},{"name":"2023-06-07T00:00:00+02:00","value":["2023-06-07T00:00:00+02:00",0]},{"name":"2023-06-08T00:00:00+02:00","value":["2023-06-08T00:00:00+02:00",0]},{"name":"2023-06-09T00:00:00+02:00","value":["2023-06-09T00:00:00+02:00",0]},{"name":"2023-06-10T00:00:00+02:00","value":["2023-06-10T00:00:00+02:00",0]},{"name":"2023-06-11T00:00:00+02:00","value":["2023-06-11T00:00:00+02:00",0]},{"name":"2023-06-12T00:00:00+02:00","value":["2023-06-12T00:00:00+02:00",0]},{"name":"2023-06-13T00:00:00+02:00","value":["2023-06-13T00:00:00+02:00",1.9131999999999607]},{"name":"2023-06-14T00:00:00+02:00","value":["2023-06-14T00:00:00+02:00",40.122900000000016]},{"name":"2023-06-15T00:00:00+02:00","value":["2023-06-15T00:00:00+02:00",7.064700000000016]},{"name":"2023-06-16T00:00:00+02:00","value":["2023-06-16T00:00:00+02:00",0]},{"name":"2023-06-17T00:00:00+02:00","value":["2023-06-17T00:00:00+02:00",0]},{"name":"2023-06-18T00:00:00+02:00","value":["2023-06-18T00:00:00+02:00",0]},{"name":"2023-06-19T00:00:00+02:00","value":["2023-06-19T00:00:00+02:00",0]},{"name":"2023-06-20T00:00:00+02:00","value":["2023-06-20T00:00:00+02:00",0]},{"name":"2023-06-21T00:00:00+02:00","value":["2023-06-21T00:00:00+02:00",0]},{"name":"2023-06-22T00:00:00+02:00","value":["2023-06-22T00:00:00+02:00",0]},{"name":"2023-06-23T00:00:00+02:00","value":["2023-06-23T00:00:00+02:00",0]},{"name":"2023-06-24T00:00:00+02:00","value":["2023-06-24T00:00:00+02:00",0]},{"name":"2023-06-25T00:00:00+02:00","value":["2023-06-25T00:00:00+02:00",0]},{"name":"2023-06-26T00:00:00+02:00","value":["2023-06-26T00:00:00+02:00",0]},{"name":"2023-06-27T00:00:00+02:00","value":["2023-06-27T00:00:00+02:00",0]},{"name":"2023-06-28T00:00:00+02:00","value":["2023-06-28T00:00:00+02:00",0]},{"name":"2023-06-29T00:00:00+02:00","value":["2023-06-29T00:00:00+02:00",0]},{"name":"2023-06-30T00:00:00+02:00","value":["2023-06-30T00:00:00+02:00",0]}],"type":"bar","stack":"x","color":"#199479"},{"name":"Energía importada de la red","data":[{"name":"2023-06-01T00:00:00+02:00","value":["2023-06-01T00:00:00+02:00",0]},{"name":"2023-06-02T00:00:00+02:00","value":["2023-06-02T00:00:00+02:00",0]},{"name":"2023-06-03T00:00:00+02:00","value":["2023-06-03T00:00:00+02:00",0]},{"name":"2023-06-04T00:00:00+02:00","value":["2023-06-04T00:00:00+02:00",0]},{"name":"2023-06-05T00:00:00+02:00","value":["2023-06-05T00:00:00+02:00",0]},{"name":"2023-06-06T00:00:00+02:00","value":["2023-06-06T00:00:00+02:00",0]},{"name":"2023-06-07T00:00:00+02:00","value":["2023-06-07T00:00:00+02:00",0]},{"name":"2023-06-08T00:00:00+02:00","value":["2023-06-08T00:00:00+02:00",0]},{"name":"2023-06-09T00:00:00+02:00","value":["2023-06-09T00:00:00+02:00",0]},{"name":"2023-06-10T00:00:00+02:00","value":["2023-06-10T00:00:00+02:00",0]},{"name":"2023-06-11T00:00:00+02:00","value":["2023-06-11T00:00:00+02:00",0]},{"name":"2023-06-12T00:00:00+02:00","value":["2023-06-12T00:00:00+02:00",0]},{"name":"2023-06-13T00:00:00+02:00","value":["2023-06-13T00:00:00+02:00",0]},{"name":"2023-06-14T00:00:00+02:00","value":["2023-06-14T00:00:00+02:00",0]},{"name":"2023-06-15T00:00:00+02:00","value":["2023-06-15T00:00:00+02:00",0]},{"name":"2023-06-16T00:00:00+02:00","value":["2023-06-16T00:00:00+02:00",0]},{"name":"2023-06-17T00:00:00+02:00","value":["2023-06-17T00:00:00+02:00",0]},{"name":"2023-06-18T00:00:00+02:00","value":["2023-06-18T00:00:00+02:00",0]},{"name":"2023-06-19T00:00:00+02:00","value":["2023-06-19T00:00:00+02:00",0]},{"name":"2023-06-20T00:00:00+02:00","value":["2023-06-20T00:00:00+02:00",0]},{"name":"2023-06-21T00:00:00+02:00","value":["2023-06-21T00:00:00+02:00",0]},{"name":"2023-06-22T00:00:00+02:00","value":["2023-06-22T00:00:00+02:00",0]},{"name":"2023-06-23T00:00:00+02:00","value":["2023-06-23T00:00:00+02:00",0]},{"name":"2023-06-24T00:00:00+02:00","value":["2023-06-24T00:00:00+02:00",0]},{"name":"2023-06-25T00:00:00+02:00","value":["2023-06-25T00:00:00+02:00",0]},{"name":"2023-06-26T00:00:00+02:00","value":["2023-06-26T00:00:00+02:00",0]},{"name":"2023-06-27T00:00:00+02:00","value":["2023-06-27T00:00:00+02:00",0]},{"name":"2023-06-28T00:00:00+02:00","value":["2023-06-28T00:00:00+02:00",0]},{"name":"2023-06-29T00:00:00+02:00","value":["2023-06-29T00:00:00+02:00",0]},{"name":"2023-06-30T00:00:00+02:00","value":["2023-06-30T00:00:00+02:00",0]}],"type":"bar","stack":"x","color":"#F0A752"}]}
;

<RNEChartsPro
    ref={ref}
    width={widthPercentageToDP(85)}
    keyboardShouldPersistTaps="always"
    option={data}
    style={{ height: 200 }}
    eventActions={{
        highlight: (item) => {
            dataClicked(item);
            setOndata(item);
        },
    }}
/>
@supervons
Copy link
Owner

Thanks for feedback, I will test it on [email protected].

And can you show me this real device system version.

@ivantrejo41
Copy link
Contributor Author

Both android 10 (MIUI 12.0.3) and iOS 16.5

@BigFaceMaster
Copy link

Do you resolved this problem?

@ivantrejo41
Copy link
Contributor Author

Still having the same issue, a Hermes update provided a workaround but had to refactor some of the code using the library in order to make it work, still getting the same behavior while using the debugger.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants