Proposal: Enhance Pynecone Graphing Components with Powerful and Friendly libs like "echarts-for-react".

[forhonourlx]

Hi Pynecone Team,

After a few of tests, I really appreciate that Pynecone is a rising and impressive web framework which is Productive, easy to use in Python, and compatible with React. Thank you for your excellent create! With respect of "Graphing", only Plotly is somehow insufficient. A graph lib with strong extensibility, plenty of fully-controlled chart types, and in-fashion artist style is needed indeed. In my opinion, echarts(wrap: echarts-for-react) is well-suited to be a pynecone built-in graph component. https://echarts.apache.org/examples/en/index.html echarts is a Powerful and Beautiful Open Source JavaScript Visualization Library, which supports chart types including: line, bar, pie, scatter, geo, map, map-lines, candlestick, radar, boxplot, heatmap, net-graph, tree, tree-map, sunburst, parallel, sankey, funnel, gauge, pictorialBar, calendar, 3dGlobe, 3dCharts ,etc. With help of a convenient React wrap echarts-for-react https://github.com/hustcc/echarts-for-react, rendering a chart is almost equivalent to construct an echarts option(js object). Even more, js object or json is quite easy to transform into Python dict, that's also Friendly to widespread Python users and shows a bright new way of data processing and visualization, combining Python with React. See a basic example of echarts option in Python dict, quite easy and intuitive:

ec_option = {
    'xAxis': {'type': 'category', 'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],},
    'yAxis': {'type': 'value',},
    'series': [
      { 'type': 'line', 'smooth': True, 'data': [820, 932, 901, 934, 1290, 1330, 1320],},
    ],
    'tooltip': {'trigger': 'axis',},
}

I tried a walkthrough example in belows successfully, which promises a bright future. To intergrate into pynecone built-in graph libs, more steps and code should be taken. Looking forward to your opinions, I can hardly wait seeing the Python and EChartsReact intergration in Pynecone.

Thanks in advance and Happy New Year!

To Reproduce Steps to reproduce the behavior:

• Code/Link to Repo: echarts: https://echarts.apache.org/examples/en/index.html react wrap: https://github.com/hustcc/echarts-for-react

pcconfig.py:

import pynecone as pc
config = pc.Config(
    app_name="TEST_Echarts",
    db_url="sqlite:///pynecone.db",
    env=pc.Env.DEV,
    frontend_packages=["echarts","echarts-for-react"],
)

TEST_Echarts.py:

from pcconfig import config
import pynecone as pc
docs_url = "https://pynecone.io/docs/getting-started/introduction"
filename = f"{config.app_name}/{config.app_name}.py"

class ReactECharts(pc.Component):
    library = "echarts-for-react"
    tag = "ReactECharts"
    option: pc.Var[dict]

echarts_react = ReactECharts.create

class State(pc.State):
    """The app state."""
    pass

ec_option = {
    'xAxis': {
      'type': 'category',
      'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    'yAxis': {
      'type': 'value',
    },
    'series': [
      {
        'data': [820, 932, 901, 934, 1290, 1330, 1320],
        'type': 'line',
        'smooth': True,
      },
    ],
    'tooltip': {
      'trigger': 'axis',
    },
}

def index():
    return pc.center(
        pc.vstack(
            pc.heading("Welcome to Pynecone!", font_size="2em"),
            pc.container(
              pc.center(pc.text("box here"),),
              echarts_react(option=ec_option,),
              bg="deepskyblue",
              width="100%",
              padding=5,
            ),
            spacing="1.5em",
            font_size="2em",
        ),
        padding_top="10%",
    )

# Add state and page to the app.
app = pc.App(state=State)
app.add_page(index)
app.compile()

./.web/pages/index.js: Replace import {ReactECharts} from "echarts-for-react" with import ReactECharts from "echarts-for-react"

** Specifics (please complete the following information):**

• Python Version: 3.10
• Pynecone Version: 0.1.11
• OS: WSL2
• Browser (Optional): Chrome

[picklelo]

We can definitely add this since it's already a React component!

I added a comment on the other issue about how we can fix the import syntax here. The rest of your code syntax looks good, we can collaborate if you run into any more trouble here.

[Alek99]

Yes thanks for adding this!🙂 I'll take a look. We definitely agree there needs to be some improvements with graphing. These past couple weeks since our launch have been focusing on bug fixes and major performance improvements.

See https://github.com/pynecone-io/pynecone/discussions/195

We have an active discussion on potential libraries to add. I'm in the process of adding victory and nivo right now.

[forhonourlx]

#201 Hi @picklelo , @Alek99 :

As discussed in #195, nivo is new and cool! PyEcharts is NOT a good choice, for it changed echarts objects, requires much much longer strings, which is only Seemingly friendly to Python users but indeed complicated, inelegant. Better way to use echarts is to render directly from Python dict, JS object or json.

For more familiar with echarts, I just opened a pull request to implement a graphing wrapper of echarts-for-react, please review. 2 more Questions: 1.echarts is under Apache License 2.0, please help with Pynecone overall LICENSE issues. 2.This initial component is included in a pc.container(), any better ways to follow? Any further steps, please kindly instruct me.

Thank you!

[Alek99]

#201 Hi @picklelo , @Alek99 :

As discussed in #195, nivo is new and cool! PyEcharts is NOT a good choice, for it changed echarts objects, requires much much longer strings, which is only Seemingly friendly to Python users but indeed complicated, inelegant. Better way to use echarts is to render directly from Python dict, JS object or json.

For more familiar with echarts, I just opened a pull request to implement a graphing wrapper of echarts-for-react, please review. 2 more Questions: 1.echarts is under Apache License 2.0, please help with Pynecone overall LICENSE issues. 2.This initial component is included in a pc.container(), any better ways to follow? Any further steps, please kindly instruct me.

Thank you!

Ok nice I need to discuss this with @picklelo but we may want to make echarts-for-react a third party extension to pynecone not in the core. This would be a separate pip install and import but maybe be nice and reduce our library's size for people who wouldn't use this feature. Well discuss and get back to you soon.

[forhonourlx]

Regards to reduce size, pyecharts generated html files use another way: Echarts API. Global echarts object can be accessed after including echarts.js in script tag. I only find some Unofficial hosts, like: https://cdn.bootcss.com/echarts/5.4.1/echarts.min.js , https://assets.pyecharts.org/assets/echarts.min.js Could be properly intergrated into pynecone's react components?

pycharts type example:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Awesome Pyecharts</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>

<body>
    <style>
        .box {};
    </style>
    <div class="box">
        <div id="c05cace2f1e846efb15b2c651a4401af" class="chart-container" style="width:900px; height:500px;"></div>
        <script>
            var chart_c05cace2f1e846efb15b2c651a4401af = echarts.init(
                document.getElementById('c05cace2f1e846efb15b2c651a4401af'), 'white', { renderer: 'canvas' });
            var option_c05cace2f1e846efb15b2c651a4401af = {

            //......option here

            };
            chart_c05cace2f1e846efb15b2c651a4401af.setOption(option_c05cace2f1e846efb15b2c651a4401af);
        </script>
        <br />
    </div>

</body>

</html>

[Alek99]

Regards to reduce size, pyecharts generated html files use another way: Echarts API. Global echarts object can be accessed after including echarts.js in script tag. I only find some Unofficial hosts, like: https://cdn.bootcss.com/echarts/5.4.1/echarts.min.js , https://assets.pyecharts.org/assets/echarts.min.js Could be properly intergrated into pynecone's react components?

pycharts type example:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Awesome Pyecharts</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>

<body>
    <style>
        .box {};
    </style>
    <div class="box">
        <div id="c05cace2f1e846efb15b2c651a4401af" class="chart-container" style="width:900px; height:500px;"></div>
        <script>
            var chart_c05cace2f1e846efb15b2c651a4401af = echarts.init(
                document.getElementById('c05cace2f1e846efb15b2c651a4401af'), 'white', { renderer: 'canvas' });
            var option_c05cace2f1e846efb15b2c651a4401af = {

            //......option here

            };
            chart_c05cace2f1e846efb15b2c651a4401af.setOption(option_c05cace2f1e846efb15b2c651a4401af);
        </script>
        <br />
    </div>

</body>

</html>

Yes we can add a pc.script actually @kbrgl is working on html components so this may be coming soon. Ill update here when this feature is ready but it shouldn't be too long of a wait for this

[Shahin-rmz]

Is it possible to use matplotlib or pychart charts ?

[psiKb]

Hi,

is there any automatic way to replace '{}' in index.js while running reflex run

Currently: import { ReactECharts } from "echarts-for-react" desired: import ReactECharts from "echarts-for-react"

[masenf]

@psiKb pass is_default = True in the Component subclass definition

class ReactECharts(pc.Component):
    library = "echarts-for-react"
    tag = "ReactECharts"
    is_default = True
    option: pc.Var[dict]

[aryballe-copilot]

Hi,

Thank you reflex team for the awesome project. I have successfully used e-charts in reflex following this thread. Moreover, I can also update plots (as shown in reflex blog).

Now, I would like to know how I can get callbacks and event handlers from e-charts to reflex https://apache.github.io/echarts-handbook/en/concepts/event/#

Thank you,

[picklelo]

You should be able to use event_triggers such as on_click, on_mouse_enter, on_mouse_leave, etc. and attach them to your chart components, that you can then you can bind them to event handlers. Let me know if that doesn't work for you.

[rohitsathish]

You should be able to use event_triggers such as on_click, on_mouse_enter, on_mouse_leave, etc. and attach them to your chart components, that you can then you can bind them to event handlers. Let me know if that doesn't work for you.

Could you provide a minimal example for this using echarts and plotly? I don't see it in the docs. Thanks.

[ElijahAhianyo]

closing this as the reflex core graphing library is recharts

[rohitsathish]

Hi @ElijahAhianyo, While echarts has been integrated as the core graphing component, I don't believe that was the proposal made here. We still don't have a custom or native library, something like rx.echart that enables us to use the entire library of graphing components that Echarts has here - https://echarts.apache.org/examples/en/index.html. Right now, its only the limited set of graphing options that have been integrated into the core reflex component.

[picklelo]

@rohitsathish I believe this is something that would be great as a custom component. We could have a separate package called reflex-echarts which wraps this specific library.

We don't want multiple core graphing libraries, but we do want to build out the ecosystem so people can use the library they prefer.

[rohitsathish]

Thanks @picklelo, yes I do hope we have a echarts component soon as that's the only major limitation stopping me from using reflex. I would work on it myself but I have no knowledge of JS/React. Just tagging the previous echarts discussions too - https://github.com/reflex-dev/reflex/discussions/195, https://github.com/reflex-dev/reflex/discussions/2272

[masenf]

I created reflex-echarts: https://github.com/masenf/reflex-echarts

It's a thin wrapper than basically takes the option param from echarts and plumbs it through into a reflex component. So you still need to know echarts, and there are some things which you cannot do, but it does work pretty well in my testing so far.