How to use property of a based var on State

[ArnauldFilee]

``Hello everyone !
I'm trying to make a dashboard with pynecone. This dashboard will have two parts :

• A part header with some filter than the user can select
• A part with the project he has, every project is in an accordion and some plotly graph will be show to have a global vue on this project.
  I actually have two big problems than i can not resolve by my self :

1. I can't create a plotly graph by a state function with the dictionary stored in my Custom Var.
   I have have an error : AttributeError: 'dict' object has no attribute 'datas' but this dict is actually a custom var that has a property datas.
2. The layout of the fig is not take by pynecone or it could be interesting for me to had some filters on the top of my page witch could change the layout of the graph.

If someone has an answer or some advice to help me with my problems, It could be very nice !
Thank you

"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
import plotly.graph_objects as go
import pynecone as pc

from pcconfig import config


class Data(pc.Base):
    name : str
    value : list[int]

DATA1 ={
        "Revenue Service": [0,100],
        "Revenue License": [100,120],
        "Costs Azure": [70, 120],
        "Costs human": [30, 70],
        "Current Margin": [0, 30],
    }

DATA2 ={
        "Revenue Service": [0,100],
        "Revenue License": [100,120],
    }
DATA_CORR = {
    "Solution definition": [0, 3],
    "Market maturity": [2, 3],
    "Outside in view": [1, 3],
}

_ACCORDION_PARAMS_ORIGIN = [
    {"title": "Project 1", "step": "1", "country": "Belgium", "owner": "John Doe", "created": "2021-01-01", "datas": DATA1},
    {"title": "Project 2", "step": "3", "country": "France", "owner": "Delaware", "created": "2022-01-01", "datas": DATA2},
    {"title": "Project 3", "step": "2", "country": "Germany", "owner": "BNP", "created": "2023-01-01", "datas": DATA1},
    {"title": "Project 4", "step": "2", "country": "Belgium", "owner": "John Doe", "created": "2021-01-01", "datas": DATA2},
    {"title": "Project 5", "step": "1", "country": "France", "owner": "Delaware", "created": "2022-01-01", "datas": DATA1},
    {"title": "Project 6", "step": "3", "country": "Germany", "owner": "BNP", "created": "2023-01-01", "datas": DATA2},
]


OPTIONS_PHASES = list(set(["Phase "+invest["step"] for invest in _ACCORDION_PARAMS_ORIGIN]))
OPTIONS_PHASES.sort()
OPTIONS_COUNTRIES = list(set([invest["country"] for invest in _ACCORDION_PARAMS_ORIGIN]))
OPTIONS_COUNTRIES.sort()


class Item(pc.Base):
    title : str
    step : str
    country : str
    owner : str
    created : str
    datas : dict[str, list[int]]



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

class FilterState(State):
    option_phase : str = "all"
    option_country : str = "all"
    value_mrl : list = [0, 5]
    value_trl : list = [0, 5]
    item : Item = Item(**_ACCORDION_PARAMS_ORIGIN[0])
    @pc.var
    def get_items(self) -> list[Item]:
        if self.option_phase in OPTIONS_PHASES:
            items = [Item(**invest) for invest in _ACCORDION_PARAMS_ORIGIN if invest["step"] == self.option_phase.split(" ")[-1]]
        else:
            items = [Item(**invest) for invest in _ACCORDION_PARAMS_ORIGIN]
        
        if self.option_country in OPTIONS_COUNTRIES:
            items = [item for item in items if item.country == self.option_country]
        
        return items
    
    @pc.var
    def get_bar_fig(self)-> go.Figure:
        fig = go.Figure()
        if self.item :
            datas = self.item.datas
            for key in datas:
                    fig.add_trace(go.Bar(x=[key], y=[datas[key][1]-datas[key][0]],base=datas[key][0]))
        return fig
    
    def setter_item(self, item : Item): 
        self.item = item
        



        
    
def header() -> pc.Component:
    return pc.box(
        pc.hstack(
            pc.hstack(
                pc.image(src="/bulb.png", height="50px"),
                pc.flex(
                    pc.heading("ip hub", size="md"),
                    pc.heading("By Delaware", size="sm"),
                    direction="column"
                ),
                align_items="center",
            ),
            pc.heading("ip investment dashboard", size="lg"),
            pc.heading(""),
            justify="space-between",
            padding = "10px",
        ),
        pc.hstack(
            pc.hstack(
                pc.image(src="/filter.png", width="auto", height="30px"),
                pc.select(OPTIONS_PHASES, placeholder="Phases (all)", on_change= FilterState.set_option_phase),
            ),
            pc.hstack(
                pc.text("MRL"),
                pc.vstack(
                    pc.text(FilterState.value_mrl[0] + " - " + FilterState.value_mrl[1]),
                    pc.range_slider(on_change=FilterState.set_value_mrl, width="500px", min_=0, max_=5, step=1, value=FilterState.value_mrl),
                ), 
            ),
            pc.hstack(
                pc.text("TRL"),
                pc.vstack(
                    pc.text(FilterState.value_trl[0] + " - " + FilterState.value_trl[1]),
                    pc.range_slider(on_change=FilterState.set_value_trl, width="500px", min_=0, max_=5, step=1, value=FilterState.value_trl),
                ),
            ),
            pc.hstack(
                pc.select(OPTIONS_COUNTRIES, placeholder="Countries (all)", on_change= FilterState.set_option_country),
            ),
            justify="space-between",
            padding = "10px",
        ),
        width="100%",
        bg = "WhiteSmoke"
    )
    

def accordion_item(item : Item) -> pc.Component:
    return pc.accordion_item(
        pc.accordion_button(
            pc.center(
                pc.image(src="/icon_box.png", width="auto", height="40px"), 
                pc.heading(item.title, padding="0 0 0 20px"),
            ),
            pc.spacer(),
            pc.image(src='/steps/step_' + item.step + '.png', width="auto", height="40px", padding_right="20px"),
            pc.image(src = "countries/"+item.country+".svg", height="40px"),
            pc.accordion_icon(),
        ),
        pc.accordion_panel(
            pc.flex(
                pc.center(pc.text("Owner: ", as_="strong"), pc.text(item.owner, padding="0 10px 0 10px"), pc.icon(tag="email")),
                pc.spacer(),
                pc.center(pc.text("Created: " + item.created)),
            ),
            pc.vstack(
                pc.plotly(data = FilterState.get_bar_fig),
            ),
        ),
        on_focus = FilterState.setter_item(item),
    )

def accordion() -> pc.Component:
    return pc.accordion(
        pc.foreach(FilterState.get_items, accordion_item),
        width="100%",
    )

def index() -> pc.Component:
    return pc.vstack(
        header(),
        accordion(),
        pc.text(FilterState.item.title),
    )


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