Giter Club home page Giter Club logo

Comments (2)

tjm165 avatar tjm165 commented on May 17, 2024 2

Hi @huong-li-nguyen that did the trick for me. I really appreciate your help and explanation!

Just as a side note for anyone who comes across this- the @capture("graph") decorator comes from import from vizro.models.types import capture

from vizro.

huong-li-nguyen avatar huong-li-nguyen commented on May 17, 2024 1

Hello @tjm165,

Thanks for raising the issue!

What you describe above is already possible by leveraging our custom charts; see our user guide here. Given that you want to use a post figure update call, the only step you are missing in the example above is to wrap your chart with our @capture("graph") decorator.

By using the @capture("graph") decorator you can create any custom Plotly chart that returns a go.Figure inside the Vizro dashboards. :)

Example

import pandas as pd

import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro
from vizro.models.types import capture


def aggregate_data():
    df_gapminder = px.data.gapminder()
    df_gapminder_agg = px.data.gapminder()
    df_gapminder_agg["lifeExp"] = df_gapminder_agg.groupby(by=["continent", "year"])["lifeExp"].transform("mean")
    df_gapminder_agg["gdpPercap"] = df_gapminder_agg.groupby(by=["continent", "year"])["gdpPercap"].transform("mean")
    df_gapminder_agg["pop"] = df_gapminder_agg.groupby(by=["continent", "year"])["pop"].transform("sum")
    df_gapminder["data"] = "Country"
    df_gapminder_agg["data"] = "Continent"
    df_gapminder = pd.concat([df_gapminder_agg, df_gapminder], ignore_index=True)
    return df_gapminder

df_gapminder = aggregate_data()


@capture("graph")  # Note change here
def my_figure(data_frame):
    fig = px.line(
        data_frame=data_frame,
        x="year",
        y="gdpPercap",
        color="data",
        labels={"year": "Year", "data": "Data", "gdpPercap": "GDP per capita"},
        color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"},
        markers=True,
    )
    fig.add_vline(x=1970, line_color="green", line_dash="dash")
    return fig


page = vm.Page(
    title="Country Analysis",
    layout=vm.Layout(grid=[[0, 1]]),
    components=[
        vm.Graph(
            id="bar_country",
            figure=px.bar(
                df_gapminder,
                x="year",
                y="pop",
                color="data",
                barmode="group",
                labels={"year": "Year", "data": "Data", "pop": "Population"},
                color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"},
            ),
        ),
        vm.Graph(id="line_country", 
                         figure=my_figure(data_frame=df_gapminder)   # Add your custom chart as usually
                         ),
    ],
    controls=[
        vm.Filter(column="country", selector=vm.Dropdown(value="India", multi=False, title="Select country")),
        vm.Filter(column="year", selector=vm.RangeSlider(title="Select timeframe")),
    ],
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()

This should then give you this:
Screenshot 2023-10-07 at 10 37 00

I hope that helps! The above example works on my machine, so if it does not work on yours, it might be a local issue, as you suggested. But I hope it does 🤞

Feel free to let me know if you have any other questions.

from vizro.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.