Add echarts-for-react Graphing Component

[forhonourlx]

#200

• Add Echarts Component to ./components/graphing/echarts.py
• Add import to ./components/graphing/__init__.py
• Add dependencies "echarts": "^5.4.1", "echarts-for-react": "^3.0.2", "fast-deep-equal": "^3.1.3", to ./.templates/web/package.json

Notice:

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?
3. Any further steps, please help me improve the code. Thank you.

Usage Example:

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
from pcconfig import config
import pynecone as pc
from pynecone.components.graphing.echarts import Echarts
# from pynecone import echarts

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


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': [
      { 'type': 'line', 'smooth': True, 'data': [820, 932, 901, 934, 1290, 1330, 1320],},
    ],
    'tooltip': {'trigger': 'axis',},
}

def index():
    return pc.center(
        pc.vstack(
            pc.heading("Welcome to Pynecone Echarts Graphing!", font_size="2em"),
            pc.container(
              pc.center(pc.text("box here"),),
              Echarts(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()

[Alek99]

Hi, I just finished up some other stuff I was working on for pynecone! Do you want to to look at this pr or are you still working on it?

[forhonourlx]

@Alek99 This PR contains component which has only option props, other props could be updated sooner.

[Alek99]

Hi sorry for the delayed response, lets chat on discord but I think this would be a very valuable 3rd party install if you are still interested in building it, something like pip install pynecone-echarts. We can collaborate on this lib and make another repo dedicated to it.

[forhonourlx]

Sure, still waiting for you. Do you mean the package installation would be pip install pynecone-io[echarts]? And I am not so familiar with extension, would you please kindly instuct me? Thanks inadvance.

[Alek99]

Yeah this will be the first extension of Pynecone so we'll have to figure out how it to do it. Ill brain storm with Nikhil tomorrow on how we can set this up and we can all work together on this. Thanks for you help we really appreciate it!!

[forhonourlx]

Coming again. How's the extension frame we can follow?

Yeah this will be the first extension of Pynecone so we'll have to figure out how it to do it. Ill brain storm with Nikhil tomorrow on how we can set this up and we can all work together on this. Thanks for you help we really appreciate it!!

[Alek99]

Hello sorry for the delay on this pr, we are still working on fixing all the bugs in the core of the library so this has been delayed a bit. Hoping to get to this soon.