From 639dac7a8d0ea136998491cd366eb598f12fca56 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 25 Jun 2024 13:06:56 +0200 Subject: [PATCH 001/109] Add compendium and rework bar chart --- vizro-core/examples/_dev/app.py | 120 +- vizro-core/examples/_dev/compendium.py | 1762 ++++++++++++++++++++++++ 2 files changed, 1822 insertions(+), 60 deletions(-) create mode 100644 vizro-core/examples/_dev/compendium.py diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index c1b5d746a..181f6011d 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,70 +1,70 @@ -"""Dev app to try things out.""" +"""Example to show dashboard configuration specified as pydantic models.""" -import pandas as pd +from typing import Literal, Optional + +import dash_mantine_components as dmc import vizro.models as vm +import vizro.plotly.express as px from vizro import Vizro -from vizro.figures import kpi_card, kpi_card_reference -df_kpi = pd.DataFrame( - {"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Reference Zero": [0, 0, 0], "Category": ["A", "B", "C"]} -) +gapminder = px.data.gapminder() + + +# class CodeHighlight(vm.VizroBaseModel): +# type: Literal["code_highlight"] = "code_highlight" +# language: Optional[str] = "python" +# code: str + +# def build(self): +# return dmc.CodeHighlight( +# language=self.language, +# code=self.code, +# ) +#vm.Page.add_type("components", CodeHighlight) + -example_cards = [ - kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"), - kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with aggregation", agg_func="median"), - kpi_card( - data_frame=df_kpi, - value_column="Actual", - title="KPI with formatting", - value_format="${value:.2f}", - ), - kpi_card( - data_frame=df_kpi, - value_column="Actual", - title="KPI with icon", - icon="shopping_cart", - ), -] - -example_reference_cards = [ - kpi_card_reference( - data_frame=df_kpi, - value_column="Actual", - reference_column="Reference", - title="Delta Positive", - ), - kpi_card_reference( - data_frame=df_kpi, - value_column="Actual", - reference_column="Reference", - agg_func="median", - title="Delta Negative", - ), - kpi_card_reference( - data_frame=df_kpi, - value_column="Actual", - reference_column="Actual", - title="Delta Zero", - value_format="{value:.2f}$", - reference_format="{delta:.2f}$ vs. last year ({reference:.2f}$)", - ), - kpi_card_reference( - data_frame=df_kpi, - value_column="Actual", - reference_column="Reference Zero", - title="Reference Zero", - icon="shopping_cart", - ), -] - -page = vm.Page( - title="KPI Indicators", - layout=vm.Layout(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]), - components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards], - controls=[vm.Filter(column="Category")], +bar = vm.Page( + title="Bar Chart", + layout=vm.Layout(grid=[[0, 1, 1]]), + components=[ + vm.Card( + text=""" + + ### What is a bar chart? + + A Bar chart displays bars in lengths proportional to the values they represent. One axis of + the chart shows the categories to compare and the other axis provides a value scale, + starting with zero. + +   + + ### When to use the bart chart? + + Select a Bar chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents `how many?` in each category. You can + arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling + clearly when you have a large number of bars. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + +   + + ### Code + ```python + + vm.Graph(figure=px.bar(data_frame=gapminder.query('country == 'Germany''), x='year', y='pop') + + ``` + """ + ), + vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'Germany'"), x="year", y="pop")), + ], ) -dashboard = vm.Dashboard(pages=[page]) + + + + +dashboard = vm.Dashboard(pages=[bar]) if __name__ == "__main__": Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_dev/compendium.py b/vizro-core/examples/_dev/compendium.py new file mode 100644 index 000000000..132fb0d3f --- /dev/null +++ b/vizro-core/examples/_dev/compendium.py @@ -0,0 +1,1762 @@ +"""Example to show dashboard configuration specified as pydantic models.""" + +from datetime import datetime +from typing import Callable, Optional + +import numpy as np +import pandas as pd +import plotly.graph_objects as go +import vizro.models as vm # This is fine because we define __all__ in hyphen.models. + +# ruff: noqa: F403, F405 +# Alternatively you could do `import hyphen.models as hm` and then use the `hm` namespace for all models +import vizro.plotly.express as px +from vizro import Vizro +from vizro.managers import data_manager +from vizro.models.types import capture + + +def retrieve_empty_dataframe(): + """This function returns an empty dataframe.""" + return pd.DataFrame() + + +def retrieve_slope_data(): + """This function returns data for slope chart.""" + data = [ + ["A", 17743, 25032], + ["B", 10216, 15672], + ["C", 3953, 4821], + ["D", 12568, 8734], + ["E", 5601, 4350], + ] + + df = pd.DataFrame(data, columns=["cats", "start", "end"]) + return df + + +@capture("graph") +def slope(data_frame): + fig = go.Figure() + + for idx, cat in enumerate(data_frame["cats"].to_list()): + fig.add_trace( + go.Scatter( + x=["Year 2022", "Year 2023"], + y=[ + int(data_frame.loc[data_frame["cats"] == cat]["start"]), + int(data_frame.loc[data_frame["cats"] == cat]["end"]), + ], + name=f"Trace {cat}", + mode="lines+markers+text", + text=[ + int(data_frame.loc[data_frame["cats"] == cat]["start"]), + int(data_frame.loc[data_frame["cats"] == cat]["end"]), + ], + textposition=["middle left", "middle right"], + line_color=px.colors.sequential.Blues[::-1][idx], + ) + ) + + return fig + + +@capture("graph") +def barcode(data_frame): + fig = go.Figure() + + for idx, species in enumerate(data_frame["species"].unique().tolist()): + fig.add_trace( + go.Scatter( + x=data_frame.loc[data_frame["species"] == species]["sepal_width"], + y=[species.capitalize()] * len(data_frame.loc[data_frame["species"] == species]["sepal_width"]), + mode="markers", + name=species.capitalize(), + legendgroup=species.capitalize(), + showlegend=True, + marker=dict(color=px.colors.sequential.Blues[::-1][idx], symbol="line-ns-open"), + ) + ) + + fig.update_layout( + xaxis_title="Sepal Width", + yaxis_title="Species", + ) + + return fig + + +def retrieve_waterfall_data(): + """This function returns data for slope chart.""" + measure = ["relative", "relative", "total", "relative", "relative", "total"] + x = ["Sales", "Consulting", "Net revenue", "Purchases", "Other expenses", "Profit before tax"] + y = [60, 80, 0, -40, -20, 0] + + df = pd.DataFrame({"measure": measure, "x": x, "y": y}) + return df + + +@capture("graph") +def waterfall(data_frame): + + text_list = [str(val) if val != 0 else "Total" for val in data_frame["y"].to_list()] + + fig = go.Figure( + go.Waterfall( + orientation="v", + measure=data_frame["measure"].to_list(), + x=data_frame["x"].to_list(), + textposition="outside", + text=text_list, + y=data_frame["y"].to_list(), + decreasing={"marker": {"color": px.colors.sequential.Blues[::-1][1]}}, + increasing={"marker": {"color": px.colors.sequential.Blues[::-1][2]}}, + totals={"marker": {"color": px.colors.sequential.Blues[::-1][0]}}, + ) + ) + + return fig + + +def retrieve_venn_data(): + """This function returns data for slope chart.""" + circle = ["1", "2", "3"] + x0 = [0, 1.5, 0.75] + y0 = [0, 0, 1.25] + x1 = [2, 3.5, 2.75] + y1 = [2, 2, 3.25] + + df = pd.DataFrame({"circle": circle, "x0": x0, "y0": y0, "x1": x1, "y1": y1}) + return df + + +@capture("graph") +def venn(data_frame): + + fig = go.Figure() + + for idx, circle in enumerate(data_frame["circle"].to_list()): + fig.add_shape( + type="circle", + line_color=px.colors.sequential.Blues[::-1][idx], + fillcolor=px.colors.sequential.Blues[::-1][idx], + x0=float(data_frame.loc[data_frame["circle"] == circle]["x0"]), + y0=float(data_frame.loc[data_frame["circle"] == circle]["y0"]), + x1=float(data_frame.loc[data_frame["circle"] == circle]["x1"]), + y1=float(data_frame.loc[data_frame["circle"] == circle]["y1"]), + ) + + fig.update_shapes(opacity=0.3, xref="x", yref="y") + + fig.update_layout( + xaxis_range=[-0.7, 4.2], + yaxis_range=[-0.2, 3.7], + xaxis_visible=False, + xaxis_showticklabels=False, + yaxis_visible=False, + yaxis_showticklabels=False, + margin=dict(l=20, r=20, b=100), + ) + + fig.update_layout( + margin=dict(l=20, r=20, b=100), + ) + + return fig + + +def retrieve_lollipop_data(): + """This function returns data for slope chart.""" + x = ["A", "B", "C", "D", "E", "F"] + y = [15, -25, -10, 30, 20, 5] + + df = pd.DataFrame({"x": x, "y": y}) + return df + + +@capture("graph") +def lollipop(data_frame): + + fig = go.Figure() + + for i in range(0, len(data_frame["x"])): + fig.add_trace( + go.Scatter( + x=[data_frame["x"].to_list()[i], data_frame["x"].to_list()[i]], + y=[0, data_frame["y"].to_list()[i]], + name=f"Customer Segment {data_frame['x'].to_list()[i]}", + mode="markers+lines", + marker=dict(size=10, color=px.colors.sequential.Blues[::-1][i], angleref="previous"), + line=dict(width=2, color=px.colors.sequential.Blues[::-1][i]), + ) + ) + + fig.update_layout( + xaxis_title="Customer Segment", + yaxis_title="Development last month", + xaxis=dict(showline=False), + ) + + return fig + + +def retrieve_dot_data(): + """This function returns data for slope chart.""" + x0 = [25000, 20000, 45000, 8000, 12000] + x1 = [46000, 30000, 57000, 60000, 29000] + y = ["Accessories", "Bookcase", "Chairs", "Copiers", "Furnishing"] + + df = pd.DataFrame({"x0": x0, "x1": x1, "y": y}) + return df + + +@capture("graph") +def dot_pot(data_frame): + + fig = go.Figure() + + for i in range(0, len(data_frame["y"])): + fig.add_trace( + go.Scatter( + x=[data_frame["x0"].to_list()[i], data_frame["x1"].to_list()[i]], + y=[data_frame["y"].to_list()[i], data_frame["y"].to_list()[i]], + name=data_frame["y"].to_list()[i], + mode="markers+lines", + marker=dict(size=10, color=px.colors.sequential.Blues[::-1][i]), + line=dict(width=2, color=px.colors.sequential.Blues[::-1][i]), + ) + ) + + fig.update_layout( + yaxis_title="Office Material", + xaxis_title="Cost range", + xaxis=dict(showline=False), + ) + + return fig + + +def retrieve_surplus_data(): + """This function returns data for surplus chart.""" + start_date = "2023-06-01" + forecasting = "2023-06-15" + df = pd.DataFrame( + { + "date": pd.date_range(start_date, forecasting, freq="D"), + "positive": [ + 0, + 0, + 162783, + 226389, + 0, + 0, + 0, + 0, + 0, + 129987, + 180954, + 246098, + 0, + 0, + 0, + ], + "negative": [ + -175287, + 0, + 0, + 0, + 0, + -173940, + -137233, + -183940, + 0, + 0, + 0, + 0, + 0, + -103940, + -137233, + ], + } + ) + + return df + + +@capture("graph") +def surplus(data_frame): + fig = go.Figure() + fig.add_trace( + go.Scatter( + x=data_frame["date"].to_list(), + y=data_frame["positive"].to_list(), + fill=None, + mode="lines", + showlegend=False, + line_color=px.colors.sequential.Blues[::-1][2], + ) + ) + + fig.add_trace( + go.Scatter( + x=data_frame["date"].to_list(), + y=[0] * len(data_frame["date"].to_list()), + fill="tonexty", + mode="lines", + name="Positive Sentiment", + line_color=px.colors.sequential.Blues[::-1][2], + ) + ) + + fig.add_trace( + go.Scatter( + x=data_frame["date"].to_list(), + y=data_frame["negative"].to_list(), + fill="tonexty", + mode="lines", + name="Negative Sentiment", + line_color=px.colors.sequential.Blues[::-1][0], + ) + ) + + return fig + + +def retrieve_butterfly_data(): + """This function returns data for gant chart.""" + cat = ["Art", "Chair", "Outdoor"] + a = [8, 6, 2] + b = [-4, -8, -1] + + df = pd.DataFrame({"Category": cat, "A": a, "B": b}) + + return df + + +@capture("graph") +def butterfly(data_frame): + fig = go.Figure() + + fig.add_trace( + go.Bar( + x=data_frame["A"].to_list(), + y=data_frame["Category"].to_list(), + orientation="h", + name="A", + marker=dict(color=px.colors.sequential.Blues[::-1][2]), + ) + ) + + fig.add_trace( + go.Bar( + x=data_frame["B"].to_list(), + y=data_frame["Category"].to_list(), + orientation="h", + name="B", + marker=dict(color=px.colors.sequential.Blues[::-1][0]), + ) + ) + + fig.update_layout( + xaxis_title="Value", + yaxis_title="Categories", + barmode="relative", + xaxis_tickvals=[-8, -6, -4, -2, 0, 2, 4, 6, 8], + xaxis_ticktext=[8, 6, 4, 2, 0, 2, 4, 6, 8], + ) + + return fig + + +def retrieve_marimekko_data(): + """This function returns data for marimekko chart.""" + cats = ["Technology", "Office Supplies", "Furniture"] + state = ["California", "Florida", "New York", "Texas"] + widths = [35, 25, 30, 10] * 3 + sales = [34.8, 52.49, 41, 38.25, 31.1, 21.81, 28.69, 26.15, 34.1, 25.7, 30.31, 35.60] + + cats, state = pd.core.reshape.util.cartesian_product([cats, state]) + df = pd.DataFrame({"state": state, "category": cats, "sales": sales, "width": widths}) + + state_total_sales = df.groupby("state")["sales"].sum().reset_index() + + df = df.merge(state_total_sales, on="state", suffixes=("", "_total")) + df["category_sales_proportion"] = df["sales"] / df["sales_total"] + df["cumulative_sales_proportion"] = df.groupby("state")["category_sales_proportion"].cumsum() + + return df + + +@capture("graph") +def marimekko(data_frame): + color_map = { + "Technology": px.colors.sequential.Blues[::-1][0], + "Office Supplies": px.colors.sequential.Blues[::-1][1], + "Furniture": px.colors.sequential.Blues[::-1][2], + } + + fig = go.Figure() + for key in data_frame["category"].unique(): + dff = data_frame.loc[data_frame["category"] == key] + fig.add_trace( + go.Bar( + name=key, + y=dff["sales"].to_list(), + x=np.cumsum(np.array(dff["width"])) - np.array(dff["width"]), + width=dff["width"].to_list(), + offset=0, + marker_color=color_map[key], + text=["{:.2f}$".format(x) for x in dff["sales"].to_list()], + ) + ) + + fig.update_xaxes(range=[0, 100]) + fig.update_yaxes(range=[0, 100]) + + fig.update_layout( + barmode="stack", + xaxis_title="State", + yaxis_title="Cumulative Sales Proportion", + showlegend=True, + legend_title="Category", + uniformtext_mode="hide", + ) + + return fig + + +def retrieve_line_col_data(): + """This function returns data for line column chart.""" + dates = ["Q3/2022", "Q4/2022", "Q1/2023", "Q2/2023", "Q3/2023"] + quantity = [1000, 1500, 2100, 2800, 1100] + quantity_last_year = [1200, 1340, 2300, 3000, 1150] + + df = pd.DataFrame({"dates": dates, "quantity": quantity, "quantity_last_year": quantity_last_year}) + + return df + + +@capture("graph") +def line_column(data_frame): + fig = go.Figure() + + fig.add_trace( + go.Scatter( + x=data_frame["dates"].tolist(), + y=data_frame["quantity_last_year"].tolist(), + mode="lines", + name="Last Year", + line=dict(color=px.colors.sequential.Blues[::-1][4]), + ) + ) + + fig.add_trace( + go.Bar( + x=data_frame["dates"].tolist(), + y=data_frame["quantity"].tolist(), + name="This Year", + marker_color=px.colors.sequential.Blues[::-1][0], + ) + ) + + fig.update_layout( + xaxis=dict(title="Quarter of Order Dates"), + yaxis=dict(title="Quantity"), + legend=dict(title="Time Period"), + ) + + return fig + + +def retrieve_stepped_line(): + """This function returns data for stepped line chart.""" + data = [ + [0, 0.5, "A"], + [1, 0.5, "A"], + [1, 1, "A"], + [2, 1, "A"], + [2, 2, "A"], + [4, 2, "A"], + [4, 2, "A"], + [4, 1.5, "A"], + [5, 1.5, "A"], + [6, 1.5, "A"], + [0, 2, "B"], + [1, 2, "B"], + [1, 1, "B"], + [2, 1, "B"], + [3, 1, "B"], + [3, 0.5, "B"], + [4, 0.5, "B"], + [5, 0.5, "B"], + [5, 1, "B"], + [6, 1, "B"], + ] + df = pd.DataFrame(data, columns=["count", "value", "cat"]) + return df + + +def retrieve_gapminder_country(country): + """This function returns gapminder data for a list of countries.""" + df = px.data.gapminder() + subset = df[(df["country"].isin(country))].copy() + return subset + + +def retrieve_gapminder_year(year): + """This is function returns gapminder data for a specific year.""" + df = px.data.gapminder() + subset = df.loc[df["year"] == year].copy() + return subset + + +def retrieve_continent_data(): + """This is function returns gapminder data grouped by continent.""" + df = px.data.gapminder() + grouped = ( + df.groupby(by=["continent", "year"]).agg({"lifeExp": "mean", "pop": "sum", "gdpPercap": "mean"}).reset_index() + ) + return grouped + + +def retrieve_order_data(): + """This function returns data for gant chart.""" + df = pd.DataFrame( + [ + {"order_id": "CA-103387", "start": "2023-06-01", "finish": "2023-06-01", "ship_mode": "Standard"}, + {"order_id": "CA-103400", "start": "2023-06-03", "finish": "2023-06-04", "ship_mode": "First Class"}, + {"order_id": "CA-103402", "start": "2023-06-03", "finish": "2023-06-05", "ship_mode": "First Class"}, + {"order_id": "CA-103435", "start": "2023-06-04", "finish": "2023-06-08", "ship_mode": "Second Class"}, + {"order_id": "CA-103466", "start": "2023-06-09", "finish": "2023-06-16", "ship_mode": "Standard"}, + {"order_id": "CA-103484", "start": "2023-06-11", "finish": "2023-06-17", "ship_mode": "Standard"}, + {"order_id": "CA-103510", "start": "2023-06-15", "finish": "2023-06-17", "ship_mode": "First Class"}, + ] + ) + return df + + +def retrieve_superstore_data(): + """This function returns superstore data.""" + cats = ["Technology", "Office Supplies", "Furniture"] + year = [2019, 2020, 2021, 2022] + sales = [175287, 162783, 226389, 271372, 151776, 137233, 183940, 246098, 157193, 170518, 198901, 215387] + + cats, year = pd.core.reshape.util.cartesian_product([cats, year]) + df = pd.DataFrame({"year": year, "category": cats, "sales": sales}) + + return df + + +def retrieve_superstore_grouped(): + """This function returns superstore data for one year.""" + cats = ["Technology", "Furniture", "Food", "Office Supplies", "Clothes"] + sales = [271372, 226389, 175287, 162783, 151776] + + df = pd.DataFrame({"category": cats, "sales": sales}) + + return df + + +def retrieve_diverging_bar(): + """This function returns superstore data for one year.""" + cats = ["Art", "Bookcases", "Chairs", "Furnishings", "Phones", "Storage", "Tables"] + profit_ratio = [0.25, 0.17, 0.23, -0.13, 0.08, 0.3, -0.09] + col = ["Positive", "Positive", "Positive", "Negative", "Positive", "Positive", "Negative"] + + df = pd.DataFrame({"category": cats, "profit_ratio": profit_ratio, "col": col}) + + return df + + +def retrieve_flow_map(): + """This function returns data for flow map chart.""" + # source: https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv + data = [ + ["Niagara Falls", "New York", 49468, 43.0962143, -79.03773879999999, "Trace 1"], + ["Rochester", "New York", 210358, 43.16103, -77.61092190000001, "Trace 1"], + ["New York", "New York", 8405837, 40.7127837, -74.00594129999999, "Trace 1"], + ["Fort Wayne", "Indiana", 256496, 41.079273, -85.13935129999999, "Trace 2"], + ["Toledo", "Ohio", 282313, 41.6639383, -83.555212, "Trace 2"], + ["Cleveland", "Ohio", 390113, 41.499320000000004, -81.6943605, "Trace 2"], + ["Erie", "Pennsylvania", 100671, 42.1292241, -80.085059, "Trace 2"], + ["Philadelphia", "Pennsylvania", 1553165, 39.9525839, -75.1652215, "Trace 2"], + ["Cincinnati", "Ohio", 297517, 39.103118200000004, -84.5120196, "Trace 3"], + ["Dayton", "Ohio", 143355, 39.758947799999994, -84.1916069, "Trace 3"], + ["Columbus", "Ohio", 822553, 39.9611755, -82.9987942, "Trace 3"], + ["Pittsburgh", "Pennsylvania", 305841, 40.440624799999995, -79.9958864, "Trace 3"], + ["Nashville", "Tennessee", 634464, 36.1626638, -86.78160159999999, "Trace 4"], + ["Raleigh", "North Carolina", 431746, 35.7795897, -78.6381787, "Trace 4"], + ["Norfolk", "Virginia", 246139, 36.8507689, -76.28587259999999, "Trace 4"], + ["Washington", "District of Columbia", 646449, 38.9071923, -77.03687070000001, "Trace 4"], + ] + df = pd.DataFrame(data, columns=["City", "State", "Population", "lat", "lon", "trace"]) + + return df + + +def retrieve_election(): + """This function returns election data.""" + return px.data.election() + + +def retrieve_carshare(): + """This function returns carshare data.""" + return px.data.carshare() + + +def retrieve_gapminder(): + """This is function returns gapminder data.""" + df = px.data.gapminder() + return df + + +def retrieve_forecasting_data(): + """This is function creates synthetic sales forecasting data.""" + # Create dataframe for date range + start_date = "2020-01-01" + forecasting = "2025-12-31" + df_dates = pd.DataFrame({"date": pd.date_range(start_date, forecasting, freq="D")}) + + # Create category country combinations + categories = ["Bakery", "Fruits", "Vegetables", "Fresh Meat", "Fresh Fish"] + countries = ["Germany", "Austria", "Spain", "Italy", "France"] + lambda_cat_country = [ + 520, + 60, + 190, + 265, + 450, + 1300, + 150, + 475, + 662, + 1125, + 780, + 90, + 285, + 397, + 675, + 1560, + 180, + 570, + 795, + 1350, + 1040, + 120, + 380, + 530, + 900, + ] + lambda_list = [lam * 1000 for lam in lambda_cat_country] + cats, country = pd.core.reshape.util.cartesian_product([categories, countries]) + df_ml = pd.DataFrame({"country": country, "category": cats, "lambda_col": lambda_list}) + + # Merge dataframes + df = pd.merge(df_dates, df_ml, how="cross") + + # create fake data using poisson distribution + for name, group in df.groupby(["country", "category"]): + lam = group["lambda_col"].unique().item() + size = len(group) + rand_list = [np.random.uniform(0.75, 1.25) for i in range(size)] + trend = np.arange(1, 11, 10 / size) + + # sales + np.random.seed(143) + sales = np.random.poisson(lam=lam, size=size) * trend * rand_list + + # forecasting + np.random.seed(105) + forecast = np.random.poisson(lam=lam, size=size) * trend * rand_list + + df.loc[group.index, "sales"] = sales + df.loc[group.index, "forecast"] = forecast + + df["year"] = df["date"].apply(lambda x: x.strftime("%Y")) + + # Set sales to 0 for future and forecasting to 0 before val period + today = datetime.now() + # val_period = datetime.now() - timedelta(days=90) + val_period = datetime.now() + df.loc[df["date"] >= today, "sales"] = None + df.loc[df["date"] < val_period, "forecast"] = None + + df.drop(columns=["lambda_col"], inplace=True) + + df["value"] = "sales" + df["value_number"] = df["sales"] + df.loc[~df["forecast"].isna(), "value"] = "forecast" + df.loc[~df["forecast"].isna(), "value_number"] = df["forecast"] + df = df[["date", "value", "value_number", "category", "country"]] + + # df = df.loc[df['country']=='Germany'] + df["year"] = df.date.dt.year + df = df.loc[df["year"] == 2023] + + return df + + +def retrieve_sparkline_data(): + """This is a function that returns forecasting data for country and category.""" + df = retrieve_forecasting_data() + subset = df.loc[ + (df["category"].isin(["Bakery"])) + & (df["country"].isin(["Spain", "Italy", "Austria", "France", "Germany"]) & (df["date"] < "2023-02-01")) + ] + return subset + + +def retrieve_iris(): + """This is a function that returns iris dataframe.""" + return px.data.iris() + + +def create_chart_page( + chart_name: str, + retrieve_data_func: Callable, + fig_type: str, + description_text: str, + usage_text: str, + note_text: Optional[str] = "", + **kwargs, +): + """This is a function that creates a chart page.""" + ref_chart_name = chart_name.lower().replace(" ", "_") + data_manager[ref_chart_name + "_data"] = retrieve_data_func + + if fig_type == "scatter": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.scatter( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + + elif fig_type == "bar": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.bar(ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1]), + ) + + elif fig_type == "timeline": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.timeline( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + + elif fig_type == "histogram": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.histogram( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + elif fig_type == "line": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.line( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + elif fig_type == "area": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.area( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + elif fig_type == "pie": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.pie(ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1]), + ) + elif fig_type == "violin": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.violin( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + elif fig_type == "treemap": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.treemap( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + elif fig_type == "ecdf": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.ecdf( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + elif fig_type == "strip": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.strip( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + elif fig_type == "box": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.box(ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1]), + ) + elif fig_type == "choropleth_mapbox": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.choropleth_mapbox( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + elif fig_type == "scatter_mapbox": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.scatter_mapbox( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + elif fig_type == "line_mapbox": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=px.line_mapbox( + ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] + ), + ) + elif fig_type == "marimekko": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=marimekko(ref_chart_name + "_data"), + ) + elif fig_type == "line_column": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=line_column(ref_chart_name + "_data"), + ) + elif fig_type == "surplus": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=surplus(ref_chart_name + "_data"), + ) + elif fig_type == "butterfly": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=butterfly(ref_chart_name + "_data"), + ) + elif fig_type == "slope": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=slope(ref_chart_name + "_data"), + ) + elif fig_type == "lollipop": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=lollipop(ref_chart_name + "_data"), + ) + elif fig_type == "waterfall": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=waterfall(ref_chart_name + "_data"), + ) + elif fig_type == "venn": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=venn(ref_chart_name + "_data"), + ) + elif fig_type == "barcode": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=barcode(ref_chart_name + "_data"), + ) + elif fig_type == "dot_pot": + graph = vm.Graph( + id=ref_chart_name + "_fig", + figure=dot_pot(ref_chart_name + "_data"), + ) + + ref_chart_name = vm.Page( + title=chart_name, + path=ref_chart_name, + layout=vm.Layout(grid=[[0, 1, 1], [0, 1, 1], [0, 1, 1]]), + components=[ + vm.Card( + text=f""" + # {chart_name} + +   + ## What is a {chart_name}? + + {description_text} + +   + ## When to use it? + + {usage_text} + +   + +   + > {note_text} + """, + ), + graph, + ], + ) + + return ref_chart_name + + +def create_first_row(): + """This function creates all pages of the first row.""" + page_column = create_chart_page( + "Column", + retrieve_superstore_grouped, + "bar", + x="category", + y="sales", + labels={"category": "Category", "sales": "Sales"}, + description_text="A Column chart is a vertical Bar chart, with column lengths varying according to the " + "categorical value they represent. The scale is presented on the y-axis, starting with zero.", + usage_text="Select a Column chart when you want to help your audience draw size comparisons and identify " + "patterns between categorical data, i.e., data that presents `how many?` in each category. You can " + "arrange your columns in any order to fit the message you wish to emphasise. Be mindful of " + "labelling clearly when you have a large number of columns. You may need to include a legend, " + "or use abbreviations in the chart with fuller descriptions below of the terms used.", + ) + + page_marimekko = create_chart_page( + "Marimekko", + retrieve_marimekko_data, + "marimekko", + x="state", + y="cumulative_sales_proportion", + color="category", + labels={"category": "Category", "sales": "Sales", "state": "State"}, + description_text="A Marimekko chart (also known as a Mekko or a Mosaic Plot) is a stacked chart with column " + "segments that vary in height, as well as the column widths varying according to a second " + "value. It becomes a 2-dimensional stacked chart.", + usage_text="A Marimekko chart is useful when you wish to visualise relationships between categories and their " + "subcategories across two variables, i.e., the two axes. Each axis is variable, with a percentage " + "scale determining both the width and the height of each segment. Be aware, though, " + "that they become hard to read when there are many segments. Also, readers may find it difficult " + "to make accurate comparisons between each segment because they are not arranged next to each " + "other along the same baseline.", + ) + + page_stacked_column = create_chart_page( + "Stacked Column", + retrieve_superstore_data, + "bar", + x="year", + y="sales", + color="category", + labels={"category": "Category", "sales": "Sales", "year": "Year"}, + description_text="A Stacked Column chart shows part-to-whole relationships of multiple totals and their " + "shares. Data series are stacked one on top of each other in vertical columns, starting from " + "the same baseline.", + usage_text="You should consider using a Stacked Column chart when you want your audience to focus on totals " + "and the parts that make them up, and when the total of the parts is crucial. It is best to " + "arrange your most important value at the bottom of the chart and to use a distinct colour to make " + "it stand out. This will make it easier for your audience to compare values. This chart works well " + "when you are displaying multiple totals; if you`re only interested in the parts of one total, " + "consider instead a Bar chart.", + ) + + page_gant = create_chart_page( + "Gant", + retrieve_order_data, + "timeline", + x_start="start", + x_end="finish", + y="order_id", + color="ship_mode", + labels={"order_id": "Order Id", "ship_mode": "Ship Mode"}, + description_text="A Gantt chart is a type of Bar chart for displaying, for example, a project schedule.", + usage_text="Select a Gantt chart when your audience needs to see how various activities/tasks/events are " + "scheduled over a period of time. List the activities or tasks along the vertical axis and the " + "time intervals along the horizontal axis. Plot horizontal bars representing the activities, " + "with their positions and lengths indicating the start time/date, duration and end time/date. You " + "might also show the dependency relationships between the activities and the current schedule " + "status.", + ) + + page_histogram = create_chart_page( + "Histogram", + retrieve_gapminder, + "histogram", + x="lifeExp", + labels={"lifeExp": "Life Expectancy", "y": "Count"}, + description_text="A Histogram groups numeric data into columns sized according to how often values fall into " + "specified ranges. It displays the data over a period of time or over a continuous interval.", + usage_text="Using a Histogram will help your audience see where particular values are concentrated, what the " + "extremes are, and whether there are any gaps or unusual values. It may also help you see a rough " + "probability distribution. You should try to keep the gaps small between your columns so that the " + "`shape` your data takes is immediately apparent.", + ) + + page_ordered_bubble = create_chart_page( + "Ordered Bubble", + lambda: retrieve_gapminder_country(["India"]), + "scatter", + x="gdpPercap", + size="pop", + labels={"gdpPercap": "GDP per Cap", "pop": "Population"}, + description_text="This chart distributes proportionately-sized circles against two variables presented on " + "each axis (like a standard Bubble chart), in order of size, e.g., smallest to largest.", + usage_text="You can select this chart when you are displaying big variations in values and/or it is not so " + "important for your audience to see minor differences between the data. By presenting your " + "`bubbles` in size order, you can show at a glance the magnitude of each compared with each other.", + ) + + return page_column, page_marimekko, page_stacked_column, page_gant, page_histogram, page_ordered_bubble + + +def create_second_row(): + """This function creates all pages of the second row.""" + page_line_column = create_chart_page( + "Line Column", + retrieve_line_col_data, + "line_column", + description_text="A combined Column and Line chart helps you demonstrate the relationship between an amount (" + "displayed in columns) and a variable over time (displayed as a line running across the " + "columns).", + usage_text="Use this type of chart when you wish to compare quantities of one item with changes in another " + "item over a period of time.", + ) + + page_surplus_chart = create_chart_page( + "Surplus Chart", + retrieve_surplus_data, + "surplus", + description_text="In a line-surplus-deficit-filled chart, shaded areas emphasise variation from a fixed " + "reference point.", + usage_text="Use this chart when you wish to draw the audience`s attention to the balance between two data " + "sets or that against a baseline. The chart will help them draw comparisons between the two sets " + "of data.", + ) + + page_butterfly_chart = create_chart_page( + "Butterfly Chart", + retrieve_butterfly_data, + "butterfly", + description_text="A Tornado chart (also called a Butterfly chart) is a bar chart for displaying two sets of " + "data series side by side.", + usage_text="Use a Tornado chart when you wish to emphasise the comparison between two data sets sharing the " + "same parameters. Sharing this chart with your audience will help them see at a glance how two " + "groups differ within the same parameters. You can also `stack` two bars on each side if you wish " + "to divide your categories, e.g., `trained staff` and `staff-in-training`.", + ) + + page_bar = create_chart_page( + "Bar", + retrieve_superstore_grouped, + "bar", + x="sales", + y="category", + orientation="h", + labels={"sales": "Sales", "category": "Category"}, + description_text="A Bar chart displays bars in lengths proportional to the values they represent. One axis of " + "the chart shows the categories to compare and the other axis provides a value scale, " + "starting with zero.", + usage_text="Select a Bar chart when you want to help your audience draw size comparisons and identify " + "patterns between categorical data, i.e., data that presents `how many?` in each category. You can " + "arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling " + "clearly when you have a large number of bars. You may need to include a legend, " + "or use abbreviations in the chart with fuller descriptions below of the terms used.", + ) + + page_line = create_chart_page( + "Line", + lambda: retrieve_gapminder_country(["India"]), + "line", + x="year", + y="pop", + labels={"pop": "Population", "year": "Year"}, + description_text="A Line chart presents a series of data points over a continuous interval or time period, " + "joined together with straight lines.", + usage_text="You should select a Line chart when you want to show trends and invite analysis of how the data " + "has changed over time. Usually, your y-axis will show a quantitative value and your x-axis will " + "be marked as a timescale or a sequence of intervals. You can also display negative values below " + "the x-axis. If you wish to group several lines (different data series) in the same chart, " + "try to limit yourself to 3-4 to avoid cluttering up your chart and making it harder for the " + "audience to read.", + ) + + return page_line_column, page_surplus_chart, page_butterfly_chart, page_bar, page_line + + +def create_third_row(): + """This function creates all pages of the third row.""" + page_scatter = create_chart_page( + "Scatter", + retrieve_iris, + "scatter", + y="sepal_length", + x="sepal_width", + # trendline="ols", + labels={"sepal_length": "Length", "sepal_width": "W" "idth"}, + description_text="A scatter plot is a two-dimensional data visualisation using dots to represent the values " + "obtained for two different variables - one plotted along the x-axis and the other plotted " + "along the y-axis.", + usage_text="Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are " + "sometimes called Correlation plots because they show how two variables are correlated. Scatter " + "plots are ideal when you have paired numerical data and you want to see if one variable impacts " + "the other. However, do remember that correlation is not causation, and another unnoticed variable " + "may be influencing results. Make sure your audience does not draw the wrong conclusions.", + ) + + page_pie = create_chart_page( + "Pie", + retrieve_superstore_grouped, + "pie", + values="sales", + names="category", + labels={"sales": "Sales", "category": "Category"}, + description_text="A Pie chart is a circular chart divided into segments to show proportions and percentages " + "between categories. The circle represents the whole.", + usage_text="Use the Pie chart when you need to show your audience a quick view of how data is distributed " + "proportionately, with percentages highlighted. The different values you present must add up to a " + "total and equal 100%. The downsides are that Pie charts tend to occupy more space than many other " + "charts, they don`t work well with more than a few values because labelling small segments is " + "challenging, and it can be difficult to accurately compare the sizes of the segments.", + note_text="Note: Limited by area chart options of plotly express.", + ) + + page_donut = create_chart_page( + "Donut", + retrieve_superstore_grouped, + "pie", + values="sales", + names="category", + hole=0.6, + labels={"sales": "Sales", "category": "Category"}, + description_text="A Donut chart looks like a Pie chart, but has a blank space in the centre which may contain " + "additional information.", + usage_text="A Donut chart can be used in place of a Pie chart, particularly when you are short of space or " + "have extra information you would like to share about the data. It may also be more effective if " + "you wish your audience to focus on the length of the arcs of the sections instead of the " + "proportions of the segment sizes.", + note_text="Note: Limited by gant chart options of plotly express.", + ) + + page_violin = create_chart_page( + "Violin", + retrieve_gapminder, + "violin", + y="lifeExp", + labels={"lifeExp": "Life Expectancy"}, + description_text="A Violin Plot is similar to a Box Plot, but works better for visualising more complex " + "distributions and their probability density at different values.", + usage_text="Use this chart to go beyond the simple Box Plot and show the distribution shape of the data, " + "the inter-quartile range, the confidence intervals and the median.", + ) + + page_slope = create_chart_page( + "Slope", + retrieve_slope_data, + "slope", + description_text="A line chart plotting values across two points in time.", + usage_text="You can use a Slope chart when you wish to invite comparison and identify trends between two " + "points in time. This chart shows your audience how ranks have changed over time or how they vary " + "between categories.", + ) + + return page_scatter, page_pie, page_donut, page_violin, page_slope + + +def create_fourth_row(): + """This function creates all pages of the fourth row.""" + page_lollipop = create_chart_page( + "Lollipop", + retrieve_lollipop_data, + "lollipop", + description_text="A Lollipop chart is similar to a standard bar chart, but you replace each the bar with a " + "line and place a dot at the end to mark the value.", + usage_text="You can use a Lollipop chart in the same situations as a Bar chart. You may find the design " + "visually more appealing than a standard Bar chart to invite comparison or demonstrate trends over " + "time. It is claimed that this chart is more effective than a Bar chart at drawing attention to " + "the data values. But you need to be aware that it may be difficult for the audience to judge the " + "precise value which lies in the centre of the dot. So make sure your labelling and/or commentary " + "is clear.", + # note_text="Note: Currently not available.", + ) + + page_cumulative_curve = create_chart_page( + "Cumulative Curve", + retrieve_iris, + "ecdf", + x="sepal_length", + color="species", + labels={"species": "Species", "sepal_length": "Sepal Length"}, + description_text="The Cumulative Curve (sometimes referred to as an Ogive) represents the cumulative " + "frequency distribution of grouped data on a graph. The frequency is the number of times an " + "event occurs within a given scenario, with cumulative frequency being the running total of " + "frequencies up to the current point.", + usage_text="The Cumulative Curve is helpful when you wish to discover the popularity of a certain type of " + "data, or how likely it is that a specified event will fall within a certain frequency " + "distribution. You can also use it to show how unequal a distribution is: the y-axis is always " + "cumulative frequency, and the x-axis is always a measure. You can construct a More Than Type or a " + "Less Than Type Cumulative Frequency Curve. If you plot both curves on the same graph, " + "the point at which they intersect (the corresponding value on the x-axis) indicates the median of " + "your data set.", + ) + + page_waterfall = create_chart_page( + "Waterfall", + retrieve_waterfall_data, + "waterfall", + description_text="A Waterfall chart shows the cumulative effect of a series of positive or negative values on " + "an initial value.", + usage_text="You will usually use a Waterfall chart to illustrate a budgetary process, or to show changes in " + "revenue or profit between two points. Your initial and final values will tend to be represented " + "by whole columns. In between these you will introduce `floating` columns, starting based on the " + "value of the previous column. You may wish to colour code the floating columns to help " + "distinguish between their positive or negative values.", + ) + + page_treemap = create_chart_page( + "Treemap", + lambda: retrieve_gapminder_year(2007), + "treemap", + values="pop", + path=[px.Constant("world"), "continent", "country"], + color="lifeExp", + width=300, + labels={"pop": "Population", "lifeExp": "Life Expectancy"}, + description_text="A Treemap shows hierarchical data arranged as a set of `nested` rectangles: rectangles " + "sized proportionately to the quantity they represent, combining together to form larger " + "`parent` category rectangles.", + usage_text="It`s helpful to use a Treemap when you wish to display hierarchical part-to-whole relationships. " + "You can compare groups and single elements nested within them. Consider using them instead of Pie " + "charts when you have a higher number of categories. Treemaps are very compact and allow audiences " + "to get a quick overview of the data.", + ) + + page_venn = create_chart_page( + "Venn", + retrieve_venn_data, + "venn", + description_text="A Venn Diagram shows all the possible logical relationships between a collection of sets. " + "These sets tend to be represented with circles.", + usage_text="Use a Venn diagram to highlight the commonalities between your chosen entities in the overlapping " + "areas of your circles: the `intersection` areas. You can also draw conclusions about the elements " + "of the entities that lie outside the overlaps.", + ) + + page_barcode = create_chart_page( + "Barcode", + retrieve_iris, + "barcode", + # x="sepal_width", + # y="species", + # labels={"species": "Species", "sepal_width": "Sepal Width"}, + description_text="A Bar Code chart is a compact means of visualising a distribution. It resembles a bar code " + "on a purchased item.", + usage_text="You should use the Bar Code chart when you wish to show audiences several distributions for " + "comparison, but you are short of space. Use each line segment to represent an individual point " + "along a single axis.", + # note_text="Note: Currently only available as strip instead of barcode chart.", + ) + + return page_lollipop, page_cumulative_curve, page_waterfall, page_treemap, page_venn, page_barcode + + +def create_fifth_row(): + """This function creates all pages of the fitfth row.""" + page_diverging_bar = create_chart_page( + "Diverging Bar", + retrieve_diverging_bar, + "bar", + x="profit_ratio", + y="category", + color="col", + orientation="h", + labels={"profit_ratio": "Profit Ratio", "category": "Category", "col": "Ratio Type"}, + description_text="A Diverging Bar is similar to a standard Bar chart, but differs by displaying both positive " + "and negative magnitude values.", + usage_text="You should use a Diverging Bar chart when you wish to emphasise patterns or comparisons in " + "relation to a fixed reference point. This reference point may or may not equal zero.", + ) + + page_boxplot = create_chart_page( + "Boxplot", + retrieve_continent_data, + "box", + y="lifeExp", + color="continent", + labels={"lifeExp": "Life Expectancy", "continent": "Continent"}, + description_text="A Box Plot (also known as a Box and Whisker Plot) provides a visual display of multiple " + "datasets, indicating the median (centre) and the range of the data for each.", + usage_text="Choose a Box Plot when you need to summarise distributions between many groups or datasets. It " + "takes up less space than many other charts. Create boxes to display the median, and the upper and " + "lower quartiles. Add `whiskers` to highlight variability outside the upper and lower quartiles. " + "You can add outliers as dots beyond, but in line with the whiskers.", + ) + + # geojson = px.data.election_geojson() + # page_choropleth = create_chart_page( + # "Choropleth", + # retrieve_election, + # "choropleth_mapbox", + # geojson=geojson, + # locations="district", + # featureidkey="properties.district", + # zoom=9, + # opacity=0.7, + # color="winner", + # center={"lat": 45.5517, "lon": -73.7073}, + # mapbox_style="carto-positron", + # description_text="A Choropleth Map is a map in which geographical areas are coloured, shaded or patterned in " + # "relation to a specific data variable.", + # usage_text="Use a Chloropleth Map when you wish to show how a measurement varies across a geographic area, " + # "or to show variability or patterns within a region. Typically, you will blend one colour into " + # "another, take a colour shade from light to dark, or introduce patterns to depict the variation in " + # "the data. Be aware that it may be difficult for your audience to accurately read or compare " + # "values on the map depicted by colour.", + # ) + # + # page_dot_density = create_chart_page( + # "Dot Density", + # retrieve_carshare, + # "scatter_mapbox", + # lat="centroid_lat", + # lon="centroid_lon", + # color="peak_hour", + # size="car_hours", + # mapbox_style="carto-positron", + # zoom=10, + # opacity=0.7, + # labels={"peak_hour": "Peak Hour"}, + # description_text="A Dot Density Map uses dots to show concentrations of an entity in a geographical region.", + # usage_text="You should use a Dot Density Map when you wish to show the location/s of a phenomenon and its " + # "concentration: many dots indicate a high concentration, whilst fewer dots represent lower " + # "concentration. Each dot may represent one single count or a given quantity.", + # ) + # + # page_flow_map = create_chart_page( + # "Flow Map", + # retrieve_flow_map, + # "line_mapbox", + # lat="lat", + # lon="lon", + # color="trace", + # zoom=4.5, + # height=300, + # mapbox_style="carto-positron", + # text="City", + # labels={"trace": "Trace"}, + # description_text="A Flow Map is a map marked with connections or arrows indicating the movement of quantities " + # "from one location to another.", + # usage_text="Use a Flow Map when you wish to depict the unambiguous movement of an entity across a " + # "geographical area, e.g., people or goods. You can adjust the width of the connections to depict " + # "the quantity of the item moving. Arrows indicate the direction of movement.", + # ) + + page_bullet = create_chart_page( + "Bullet", + retrieve_empty_dataframe, + "line", + description_text="A Bullet graph functions similarly to a Bar chart, but contains more information.", + usage_text="Use the Bullet graph as a more informative and space-efficient alternative to a dashboard gauge. " + "Often it is used to display performance data. The most important data value is represented in the " + "length of the main bar in the middle of the chart: the Feature Measure. A line marker running " + "perpendicular to the graph`s orientation is called the Comparative Measure. It serves as a target " + "marker to compare against the Feature Measure value. Once the main bar passes the position of " + "Comparative Measure, you have hit your goal. You can include colours to indicate qualitative " + "range scores, e.g., performance range ratings.", + note_text="Note: Currently not available.", + ) + + # return page_diverging_bar, page_boxplot, page_choropleth, page_dot_density, page_flow_map, page_bullet + return page_diverging_bar, page_boxplot, page_bullet + + +def create_sixth_row(): + """This function creates all pages of the fifth row.""" + page_dot_plot = create_chart_page( + "Dot Plot", + retrieve_dot_data, + "dot_pot", + description_text="The Dot Plot positions a group of data points across multiple categories against a simple " + "scale. Each `dot` (filled circle) represents a minimum and maximum value in a range.", + usage_text="You can select the Dot Plot when you wish to display the minimum and maximum values (counts) for " + "each item in a small or moderate data set. Use it to highlight clusters, gaps and outliers in " + "your data.", + ) + + page_stepped_line = create_chart_page( + "Stepped Line", + retrieve_stepped_line, + "line", + x="count", + y="value", + color="cat", + labels={"cat": "Category"}, + description_text="A Stepped Line chart is much like a standard Line chart but, instead of connecting two " + "points with the shortest line, the line forms a series of steps between data points.", + usage_text="You should use a Stepped Line chart when you wish to draw attention to changes occurring at " + "specific points. By contrast, a Line chart would suggest that changes occur gradually.", + ) + + page_sparkline = create_chart_page( + "Sparkline", + retrieve_sparkline_data, + "line", + x="date", + y="value_number", + facet_row="country", + facet_row_spacing=0.05, + color="country", + labels={"date": "", "country": "", "value_number": ""}, + description_text="A sparkline is a very small line chart, typically drawn without axes or coordinates. It " + "presents the general shape of the variation (typically over time) in some measurement, " + "such as temperature or stock market price, in a simple and highly condensed way.", + usage_text="Whereas the typical charts are designed to show as much data as possible, and is set off from the " + "flow of text, sparklines are intended to be succinct, memorable, and located where they are " + "discussed.", + ) + + return page_dot_plot, page_stepped_line, page_sparkline + + +def create_home(): + """This is a function that returns home page.""" + page_dashboard = vm.Page( + title="Chart Compendium", + path="compendium", + layout=vm.Layout( + grid=[ + [0, 1, 2, 3], + [4, 5, 6, 7], + [8, 9, 10, 11], + [12, 13, 14, 15], + [16, 17, 18, 19], + [20, 21, 22, 23], + [24, 25, 26, 27], + ], + row_min_height="230px", + col_gap="16px", + ), + components=[ + # First row + vm.Card( + text=""" + ![](assets/images/compendium/12.-Column_details.1.svg#compendium) + + ### Column + """, + href="/column", + ), + vm.Card( + text=""" + ![](assets/images/compendium/27.-Marimekko_details.1.svg#compendium) + + ### Marimekko + """, + href="/marimekko", + ), + vm.Card( + text=""" + ![](assets/images/compendium/Stacked_column.1.svg#compendium) + + ### Stacked + """, + href="/stacked_column", + ), + vm.Card( + text=""" + ![](assets/images/compendium/22.-Gantt_details.1.svg#compendium) + + ### Gant + """, + href="/gant", + ), + vm.Card( + text=""" + ![](assets/images/compendium/13.-Histogram_details.1.svg#compendium) + + ### Histogram + """, + href="/histogram", + ), + vm.Card( + text=""" + ![](assets/images/compendium/8.-Ordered-Bubble_details.1.svg#compendium) + + ### Ordered Bubble + """, + href="/ordered_bubble", + ), + # Second row + vm.Card( + text=""" + ![](assets/images/compendium/6.-Colomn-Line_details.1.svg#compendium) + + ### Line Column + """, + href="/line_column", + ), + vm.Card( + text=""" + ![](assets/images/compendium/3.-Surplus-chart_details.1.svg#compendium) + + ### Surplus Chart + """, + href="/surplus_chart", + ), + vm.Card( + text=""" + ![](assets/images/compendium/2.-Butterfly-chart_details.1.svg#compendium) + + ### Butterfly Chart + """, + href="/butterfly_chart", + ), + vm.Card( + text=""" + ![](assets/images/compendium/11.-Bar_details.1.svg#compendium) + + ### Bar + """, + href="/bar", + ), + vm.Card( + text=""" + ![](assets/images/compendium/20.-Line_details.1.svg#compendium) + + ### Line + """, + href="/line", + ), + # Third row + vm.Card( + text=""" + ![](assets/images/compendium/4.-Scatter-plot_details.1.svg#compendium) + + ### Scatter + """, + href="/scatter", + ), + vm.Card( + text=""" + ![](assets/images/compendium/24.-Pie_details1.svg#compendium) + + ### Pie + """, + href="/pie", + ), + vm.Card( + text=""" + ![](assets/images/compendium/25.-Donut_details.1.svg#compendium) + + ### Donut + """, + href="/donut", + ), + vm.Card( + text=""" + ![](assets/images/compendium/17.-Violin-plot_details.1.svg#compendium) + + ### Violin + """, + href="/violin", + ), + vm.Card( + text=""" + ![](assets/images/compendium/10.-Slope_details.1.svg#compendium) + + ### Slope + """, + href="/slope", + ), + # Fourth row + vm.Card( + text=""" + ![](assets/images/compendium/9.-Lollipop_details.1.svg#compendium) + + ### Lollipop + """, + href="/lollipop", + ), + vm.Card( + text=""" + ![](assets/images/compendium/18.-Cumulative-curve_details.1.svg#compendium) + + ### Cumulative Curve + """, + href="/cumulative_curve", + ), + vm.Card( + text=""" + ![](assets/images/compendium/32.-Waterfall_details.1.svg#compendium) + + ### Waterfall + """, + href="/waterfall", + ), + vm.Card( + text=""" + ![](assets/images/compendium/28.-Tree_details.1.svg#compendium) + + ### Treemap + """, + href="/treemap", + ), + vm.Card( + text=""" + ![](assets/images/compendium/29.-Venn_details.1.svg#compendium) + + ### Venn + """, + href="/venn", + ), + vm.Card( + text=""" + ![](assets/images/compendium/15.-Barcode_details.1.svg#compendium) + + ### Barcode + """, + href="/barcode", + ), + # Fifth row + vm.Card( + text=""" + ![](assets/images/compendium/1.Diverging-bar_details1.svg#compendium) + + ### Diverging Bar + """, + href="/diverging_bar", + ), + vm.Card( + text=""" + ![](assets/images/compendium/16.-Boxplot_details.1.svg#compendium) + + ### Boxplot + """, + href="/boxplot", + ), + # vm.Card( + # text=""" + # ![](assets/images/compendium/45.-Choropleth1.svg#compendium) + # + # ### Choropleth + # """, + # href="/choropleth", + # ), + # vm.Card( + # text=""" + # ![](assets/images/compendium/47.-Dot-density1.svg#compendium) + # + # ### Dot Density + # """, + # href="/dot_density", + # ), + # vm.Card( + # text=""" + # ![](assets/images/compendium/48.-Flow-map1.svg#compendium) + # + # ### Flow Map + # """, + # href="/flow_map", + # ), + vm.Card( + text=""" + ![](assets/images/compendium/34.-Bullet_details.1.svg#compendium) + + ### Bullet + """, + href="/bullet", + ), + # Sixth row + vm.Card( + text=""" + ![](assets/images/compendium/14.-Dot-plot_details.1.svg#compendium) + + ### Dot Plot + """, + href="/dot_plot", + ), + vm.Card( + text=""" + ![](assets/images/compendium/19.-Stepped-line_details..svg#compendium) + + ### Stepped Line + """, + href="/stepped_line", + ), + vm.Card( + text=""" + ![](assets/images/compendium/36.-Sparkline_details..svg#compendium) + + ### Sparkline + """, + href="/sparkline", + ), + ], + ) + return page_dashboard + + +def retrieve_compendium_pages(): + + page_column, page_marimekko, page_stacked_column, page_gant, page_histogram, page_ordered_bubble = ( + create_first_row() + ) + ( + page_line_column, + page_surplus_chart, + page_butterfly_chart, + page_bar, + page_line, + ) = create_second_row() + page_scatter, page_pie, page_donut, page_violin, page_slope = create_third_row() + page_lollipop, page_cumulative_curve, page_waterfall, page_treemap, page_venn, page_barcode = create_fourth_row() + page_diverging_bar, page_boxplot, page_bullet = create_fifth_row() + + page_dot_plot, page_stepped_line, page_sparkline = create_sixth_row() + page_dashboard = create_home() + + page_list = [ + page_dashboard, + page_column, + page_marimekko, + page_stacked_column, + page_gant, + page_histogram, + page_ordered_bubble, + page_line_column, + page_surplus_chart, + page_butterfly_chart, + page_bar, + page_line, + page_scatter, + page_pie, + page_donut, + page_violin, + page_slope, + page_lollipop, + page_cumulative_curve, + page_waterfall, + page_treemap, + page_venn, + page_barcode, + page_diverging_bar, + page_boxplot, + # page_choropleth, + # page_dot_density, + # page_flow_map, + page_bullet, + page_dot_plot, + page_stepped_line, + page_sparkline, + ] + + return page_list + + +if __name__ == "__main__": + dashboard = vm.Dashboard(pages=retrieve_compendium_pages()) + Vizro().build(dashboard).run() From 3f90c1dafae4419822dd45d4930b748462c8fab1 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 1 Jul 2024 16:14:40 +0200 Subject: [PATCH 002/109] Add POC --- vizro-core/examples/_dev/app.py | 85 ++++++++++++------- .../examples/_dev/assets/css/custom.css | 13 +++ .../src/vizro/static/css/scroll_bar.css | 6 +- 3 files changed, 66 insertions(+), 38 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 181f6011d..a4f2b4992 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,69 +1,88 @@ """Example to show dashboard configuration specified as pydantic models.""" -from typing import Literal, Optional - -import dash_mantine_components as dmc import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro +from vizro.models.types import capture +from dash import html, dcc +from typing import Literal, Optional +import dash_bootstrap_components as dbc -gapminder = px.data.gapminder() +class CodeClipboard(vm.VizroBaseModel): + type: Literal["code_clipboard"] = "code_clipboard" + title: str = "Code" + text: str + + def build(self): + return dbc.Card([ + html.H3(self.title), + dcc.Markdown(self.text, id=self.id, className="code-block"), + dcc.Clipboard(target_id=self.id, className="code-clipboard")]) -# class CodeHighlight(vm.VizroBaseModel): -# type: Literal["code_highlight"] = "code_highlight" -# language: Optional[str] = "python" -# code: str +gapminder = px.data.gapminder() -# def build(self): -# return dmc.CodeHighlight( -# language=self.language, -# code=self.code, -# ) -#vm.Page.add_type("components", CodeHighlight) +vm.Page.add_type("components", CodeClipboard) bar = vm.Page( title="Bar Chart", - layout=vm.Layout(grid=[[0, 1, 1]]), + layout=vm.Layout(grid=[[0, 2, 2], + [1, 2, 2], + [1, 2, 2]]), components=[ vm.Card( text=""" - + ### What is a bar chart? - - A Bar chart displays bars in lengths proportional to the values they represent. One axis of - the chart shows the categories to compare and the other axis provides a value scale, + + A Bar chart displays bars in lengths proportional to the values they represent. One axis of + the chart shows the categories to compare and the other axis provides a value scale, starting with zero. - +   - + ### When to use the bart chart? - + Select a Bar chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents `how many?` in each category. You can arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling clearly when you have a large number of bars. You may need to include a legend, or use abbreviations in the chart with fuller descriptions below of the terms used. -   - - ### Code - ```python - - vm.Graph(figure=px.bar(data_frame=gapminder.query('country == 'Germany''), x='year', y='pop') - - ``` """ ), + CodeClipboard(text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + df = px.data.iris() + + page = vm.Page( + title="My first page", + components=[ + vm.Graph( + figure=px.scatter_matrix( + df, dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"], color="species" + ), + ), + ], + controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))], + ) + + dashboard = vm.Dashboard(pages=[page]) + + Vizro().build(dashboard).run() + ``` + + """), vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'Germany'"), x="year", y="pop")), ], ) - - - dashboard = vm.Dashboard(pages=[bar]) if __name__ == "__main__": diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index f8c8df785..1bf293b99 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -1,3 +1,16 @@ #page-header { padding-left: 8px; } + +.code-clipboard { + position: absolute; + top: 12px; + right: 14px; + font-size: 20px; +} + + +.hljs { + background: unset; + color: unset; +} diff --git a/vizro-core/src/vizro/static/css/scroll_bar.css b/vizro-core/src/vizro/static/css/scroll_bar.css index 41c85f9b9..396baf8a8 100644 --- a/vizro-core/src/vizro/static/css/scroll_bar.css +++ b/vizro-core/src/vizro/static/css/scroll_bar.css @@ -16,11 +16,7 @@ border-color: var(--surfaces-bg-02); } -.card::-webkit-scrollbar-thumb { - border-color: var(--surfaces-bg-card); -} - -.card-nav::-webkit-scrollbar-thumb { +.card::-webkit-scrollbar-thumb, .card-nav::-webkit-scrollbar-thumb, .hljs::-webkit-scrollbar-thumb { border-color: var(--surfaces-bg-card); } From ae73db3cdd9ed36038b96e2bc35f1d6be7f28165 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 1 Jul 2024 16:47:53 +0200 Subject: [PATCH 003/109] Add intermediate layout --- vizro-core/examples/_dev/app.py | 21 ++++++++++++------- .../examples/_dev/assets/css/custom.css | 9 ++++++++ 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index a4f2b4992..010ad074a 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -14,10 +14,18 @@ class CodeClipboard(vm.VizroBaseModel): text: str def build(self): - return dbc.Card([ + return dbc.Accordion( + [ + dbc.AccordionItem( + dbc.Card([ html.H3(self.title), dcc.Markdown(self.text, id=self.id, className="code-block"), - dcc.Clipboard(target_id=self.id, className="code-clipboard")]) + dcc.Clipboard(target_id=self.id, className="code-clipboard")]), title="SHOW CODE" + ) + ], + start_collapsed=True, + ) + gapminder = px.data.gapminder() @@ -26,10 +34,9 @@ def build(self): bar = vm.Page( - title="Bar Chart", - layout=vm.Layout(grid=[[0, 2, 2], - [1, 2, 2], - [1, 2, 2]]), + title="Bar", + layout=vm.Layout(grid=[[0, 0, 2, 2, 2], + [1, 1,2,2, 2]], col_gap="80px"), components=[ vm.Card( text=""" @@ -45,7 +52,7 @@ def build(self): ### When to use the bart chart? Select a Bar chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents `how many?` in each category. You can + patterns between categorical data, i.e., data that presents **how many?** in each category. You can arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling clearly when you have a large number of bars. You may need to include a legend, or use abbreviations in the chart with fuller descriptions below of the terms used. diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index 1bf293b99..c0a9e1af6 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -14,3 +14,12 @@ background: unset; color: unset; } + +.hljs-string { + color: #1a85ff; +} + + +.hljs-keyword { + color: #d41159; +} From 04041dea54e2da0e2973f755f04dc2ea797c59a7 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 1 Jul 2024 17:22:31 +0200 Subject: [PATCH 004/109] Add optimised layout --- vizro-core/examples/_dev/app.py | 92 +-- .../examples/_dev/assets/css/custom.css | 14 +- vizro-core/examples/demo/app.py | 539 +----------------- .../src/vizro/static/css/scroll_bar.css | 4 +- 4 files changed, 63 insertions(+), 586 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 010ad074a..0b104de59 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,12 +1,13 @@ """Example to show dashboard configuration specified as pydantic models.""" +from typing import Literal + +import dash_bootstrap_components as dbc import vizro.models as vm import vizro.plotly.express as px +from dash import dcc, html from vizro import Vizro -from vizro.models.types import capture -from dash import html, dcc -from typing import Literal, Optional -import dash_bootstrap_components as dbc + class CodeClipboard(vm.VizroBaseModel): type: Literal["code_clipboard"] = "code_clipboard" @@ -15,17 +16,20 @@ class CodeClipboard(vm.VizroBaseModel): def build(self): return dbc.Accordion( - [ - dbc.AccordionItem( - dbc.Card([ - html.H3(self.title), - dcc.Markdown(self.text, id=self.id, className="code-block"), - dcc.Clipboard(target_id=self.id, className="code-clipboard")]), title="SHOW CODE" - ) - ], - start_collapsed=True, - ) - + [ + dbc.AccordionItem( + dbc.Card( + [ + html.H3(self.title), + dcc.Markdown(self.text, id=self.id, className="code-block"), + dcc.Clipboard(target_id=self.id, className="code-clipboard"), + ] + ), + title="SHOW CODE", + ) + ], + start_collapsed=True, + ) gapminder = px.data.gapminder() @@ -34,9 +38,11 @@ def build(self): bar = vm.Page( - title="Bar", - layout=vm.Layout(grid=[[0, 0, 2, 2, 2], - [1, 1,2,2, 2]], col_gap="80px"), + title="Bar Chart", + layout=vm.Layout( + grid=[[0, 0, 1, 1, 1]]*3 + [[2, 2, 1, 1, 1]]*4, + col_gap="80px", + ), components=[ vm.Card( text=""" @@ -56,36 +62,32 @@ def build(self): arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling clearly when you have a large number of bars. You may need to include a legend, or use abbreviations in the chart with fuller descriptions below of the terms used. - + """ ), - CodeClipboard(text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - df = px.data.iris() - - page = vm.Page( - title="My first page", - components=[ - vm.Graph( - figure=px.scatter_matrix( - df, dimensions=["sepal_length", "sepal_width", "petal_length", "petal_width"], color="species" - ), - ), - ], - controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))], - ) - - dashboard = vm.Dashboard(pages=[page]) - - Vizro().build(dashboard).run() - ``` - - """), vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'Germany'"), x="year", y="pop")), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + gapminder = px.data.gapminder() + + page = vm.Page( + title="Bar Chart", + components=[ + vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'Germany'"), x="year", y="pop")) + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), ], ) diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index c0a9e1af6..908fc1702 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -3,23 +3,25 @@ } .code-clipboard { + font-size: 20px; position: absolute; - top: 12px; right: 14px; - font-size: 20px; + top: 12px; } - .hljs { background: unset; color: unset; } -.hljs-string { - color: #1a85ff; +code.language-python.hljs { + padding: 0; } +.hljs-string { + color: #1a85ff; +} .hljs-keyword { - color: #d41159; + color: #d41159; } diff --git a/vizro-core/examples/demo/app.py b/vizro-core/examples/demo/app.py index 768f2568f..b880fe2c4 100644 --- a/vizro-core/examples/demo/app.py +++ b/vizro-core/examples/demo/app.py @@ -1,547 +1,18 @@ """Example to show dashboard configuration.""" -from typing import Optional - -import pandas as pd import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro -from vizro.actions import export_data, filter_interaction -from vizro.models.types import capture -from vizro.tables import dash_ag_grid gapminder = px.data.gapminder() -gapminder_mean = ( - gapminder.groupby(by=["continent", "year"]) - .agg({"lifeExp": "mean", "pop": "mean", "gdpPercap": "mean"}) - .reset_index() -) -gapminder_mean_2007 = gapminder_mean.query("year == 2007") -gapminder_transformed = gapminder.copy() -gapminder_transformed["lifeExp"] = gapminder.groupby(by=["continent", "year"])["lifeExp"].transform("mean") -gapminder_transformed["gdpPercap"] = gapminder.groupby(by=["continent", "year"])["gdpPercap"].transform("mean") -gapminder_transformed["pop"] = gapminder.groupby(by=["continent", "year"])["pop"].transform("sum") -gapminder_concat = pd.concat( - [gapminder_transformed.assign(color="Continent Avg."), gapminder.assign(color="Country")], ignore_index=True +page = vm.Page( + title="My first page", + components=[vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'Germany'"), x="year", y="pop"))], ) - -@capture("graph") -def variable_map(data_frame: pd.DataFrame = None, color: Optional[str] = None): - """Custom choropleth figure that needs post update calls.""" - fig = px.choropleth( - data_frame, - locations="iso_alpha", - color=color, - hover_name="country", - animation_frame="year", - labels={ - "year": "year", - "lifeExp": "Life expectancy", - "pop": "Population", - "gdpPercap": "GDP per capita", - }, - title="Global development over time", - ) - fig.update_layout(showlegend=False) - fig.update_yaxes(automargin=True) - fig.update_xaxes(automargin=True) - fig.update_coloraxes(colorbar={"thickness": 10, "title": {"side": "right"}}) - return fig - - -@capture("graph") -def variable_boxplot(y: str, data_frame: pd.DataFrame = None): - """Custom boxplot figure that needs post update calls.""" - fig = px.box( - data_frame, - x="continent", - y=y, - color="continent", - labels={ - "year": "year", - "lifeExp": "Life expectancy", - "pop": "Population", - "gdpPercap": "GDP per capita", - "continent": "Continent", - }, - title="Distribution per continent", - color_discrete_map={ - "Africa": "#00b4ff", - "Americas": "#ff9222", - "Asia": "#3949ab", - "Europe": "#ff5267", - "Oceania": "#08bdba", - }, - ) - fig.update_layout(showlegend=False) - fig.update_yaxes(automargin=True) - fig.update_xaxes(automargin=True) - return fig - - -@capture("graph") -def variable_bar(x: str, data_frame: pd.DataFrame = None): - """Custom bar figure that needs post update calls.""" - fig = px.bar( - data_frame, - x=x, - y="continent", - orientation="h", - title="Continent comparison (2007)", - labels={ - "year": "year", - "continent": "Continent", - "lifeExp": "Life expectancy", - "pop": "Population", - "gdpPercap": "GDP per capita", - }, - color="continent", - color_discrete_map={ - "Africa": "#00b4ff", - "Americas": "#ff9222", - "Asia": "#3949ab", - "Europe": "#ff5267", - "Oceania": "#08bdba", - }, - ) - - fig.update_layout(showlegend=False) - fig.update_yaxes(automargin=True) - fig.update_xaxes(automargin=True) - return fig - - -@capture("graph") -def scatter_relation(x: str, y: str, size: str, data_frame: pd.DataFrame = None): - """Custom scatter figure that needs post update calls.""" - fig = px.scatter( - data_frame, - x=x, - y=y, - animation_frame="year", - animation_group="country", - size=size, - size_max=60, - color="continent", - hover_name="country", - labels={ - "gdpPercap": "GDP per capita", - "pop": "Population", - "lifeExp": "Life expectancy", - "continent": "Continent", - }, - range_y=[25, 90], - color_discrete_map={ - "Africa": "#00b4ff", - "Americas": "#ff9222", - "Asia": "#3949ab", - "Europe": "#ff5267", - "Oceania": "#08bdba", - }, - ) - - fig.update_layout( - title="Relationship over time", - legend={"orientation": "v", "yanchor": "bottom", "y": 0, "xanchor": "right", "x": 1}, - ) - fig.update_yaxes(automargin=True) - fig.update_xaxes(automargin=True) - return fig - - -def create_variable_analysis(): - """Function returns a page with gapminder data to do variable analysis.""" - page_variable = vm.Page( - title="Variable Analysis", - description="Analyzing population, GDP per capita and life expectancy on country and continent level", - layout=vm.Layout( - grid=[ - # fmt: off - [0, 1, 1, 1], - [2, 3, 3, 3], - [4, 5, 5, 5], - [6, 7, 7, 7], - # fmt: on - ], - row_min_height="400px", - row_gap="24px", - ), - components=[ - vm.Card( - text=""" - ### Overview - The world map provides initial insights into the variations of metrics across countries and - continents. Click on Play to see the animation and explore the development over time. - - #### Observation - A global trend of increasing life expectancy emerges, with some exceptions in specific African - countries. Additionally, despite similar population growth rates across continents, the overall - global population continues to expand, with India and China leading the way. Meanwhile, GDP per - capita experiences growth in most regions. - - """ - ), - vm.Graph( - id="variable_map", - figure=variable_map(data_frame=gapminder, color="lifeExp"), - ), - vm.Card( - text=""" - ### Distribution - The boxplot illustrates the distribution of each metric across continents, facilitating comparisons - of life expectancy, GDP per capita, and population statistics. - - Observations reveal that Europe and Oceania have the highest life expectancy and GDP per capita, - likely influenced by their smaller population growth. Additionally, Asia and America exhibit - notable GDP per capita outliers, indicating variations among countries within these continents or - large growth over the observed years. - """ - ), - vm.Graph( - id="variable_boxplot", - figure=variable_boxplot(data_frame=gapminder, y="lifeExp"), - ), - vm.Card( - text=""" - ### Development - The line chart tracks the variable's progress from 1952 to 2007, facilitating a deeper comprehension - of each metric. - - #### Observation - Oceania and Europe are found to have the highest total GDP per capita and exhibit significant - growth. In contrast, Asia, Africa, and America demonstrate a more pronounced upward trend in - population increase compared to Europe and Oceania, suggesting that GDP per capita growth might be - influenced by relatively smaller population growth in the latter two continents. - - """ - ), - vm.Graph( - id="variable_line", - figure=px.line( - gapminder_mean, - y="lifeExp", - x="year", - color="continent", - title="Avg. Development (1952 - 2007)", - labels={ - "year": "Year", - "lifeExp": "Life expectancy", - "pop": "Population", - "gdpPercap": "GDP per capita", - "continent": "Continent", - }, - color_discrete_map={ - "Africa": "#00b4ff", - "Americas": "#ff9222", - "Asia": "#3949ab", - "Europe": "#ff5267", - "Oceania": "#08bdba", - }, - ), - ), - vm.Card( - text=""" - ### Recent status - Examining the data for 2007 provides insight into the current status of each continent and metrics. - - #### Observation - Asia held the largest population, followed by America, Europe, Africa, and Oceania. Life expectancy - surpassed 70 years for all continents, except Africa with 55 years. GDP per capita aligns with - earlier findings, with Oceania and Europe reporting the highest values and Africa recording the - lowest. - """ - ), - vm.Graph( - id="variable_bar", - figure=variable_bar(data_frame=gapminder_mean_2007, x="lifeExp"), - ), - ], - controls=[ - vm.Parameter( - targets=["variable_map.color", "variable_boxplot.y", "variable_line.y", "variable_bar.x"], - selector=vm.RadioItems(options=["lifeExp", "pop", "gdpPercap"], title="Select variable"), - ) - ], - ) - return page_variable - - -def create_relation_analysis(): - """Function returns a page to perform relation analysis.""" - page_relation_analysis = vm.Page( - title="Relationship Analysis", - description="Investigating the interconnection between population, GDP per capita and life expectancy", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] + [[1, 1, 1, 1, 1]] * 4, - row_min_height="100px", - row_gap="24px", - ), - components=[ - vm.Card( - text=""" - Population, GDP per capita, and life expectancy are interconnected metrics that provide insights - into the socioeconomic well-being of a country. - Rapid population growth can strain resources and infrastructure, impacting GDP per capita. Higher - GDP per capita often enables better healthcare and improved life expectancy, but other factors such - as healthcare quality and social policies also play significant roles. - """ - ), - vm.Graph( - id="scatter_relation", - figure=scatter_relation(data_frame=gapminder, x="gdpPercap", y="lifeExp", size="pop"), - ), - ], - controls=[ - vm.Parameter( - targets=["scatter_relation.x"], - selector=vm.Dropdown( - options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose x-axis" - ), - ), - vm.Parameter( - targets=["scatter_relation.size"], - selector=vm.Dropdown( - options=["lifeExp", "gdpPercap", "pop"], multi=False, value="pop", title="Choose bubble size" - ), - ), - ], - ) - return page_relation_analysis - - -def create_continent_summary(): - """Function returns a page with markdown including images.""" - page_summary = vm.Page( - title="Continent Summary", - description="Summarizing the main findings for each continent", - layout=vm.Layout(grid=[[i] for i in range(5)], row_min_height="190px", row_gap="25px"), - components=[ - vm.Card( - text=""" - ### Africa - ![](assets/images/continents/africa.svg#my-image) - - Africa, a diverse and expansive continent, faces both challenges and progress in its socioeconomic - landscape. In 2007, Africa's GDP per capita was approximately $3,000, reflecting relatively slower - growth compared to other continents like Oceania and Europe. - - However, Africa has shown notable improvements in life expectancy over time, reaching 55 years in - 2007. Despite these economic disparities, Africa's population has been steadily increasing, - reflecting its significant potential for development. - """ - ), - vm.Card( - text=""" - ### Americas - ![](assets/images/continents/america.svg#my-image) - - Comprising North and South America, Americas represents a region of vast geographical and cultural - diversity. In 2007, the continent experienced substantial population growth, with a diverse mix of - countries contributing to this expansion. - - Although its GDP per capita of $11,000 in 2007 exhibited variations across countries, America - maintained similar levels to Asia, reflecting its economic significance. With North America - generally reporting higher life expectancy compared to South America, America remains a region of - opportunities and challenges. - """ - ), - vm.Card( - text=""" - ### Asia - ![](assets/images/continents/asia.svg#my-image) - - Asia holds a central role in the global economy. It's growth in GDP per capita to $12,000 in 2007 - and population has been significant, outpacing many other continents. In 2007, it boasted the - highest population among all continents, with countries like China and India leading the way. - - Despite facing various socioeconomic challenges, Asia's increasing life expectancy from 46 years - to 70 over the years reflects advancements in healthcare and overall well-being, making it a vital - region driving global progress and development. - """ - ), - vm.Card( - text=""" - ### Europe - ![](assets/images/continents/europe.svg#my-image) - - Europe boasts a strong and thriving economy. In 2007, it exhibited the second-highest GDP per - capita of $25,000 among continents, indicating sustained economic growth and development. - - Europe's life expectancy surpassed 75 years, showcasing a high standard of living and - well-established healthcare systems. With its robust infrastructure, advanced industries, and - quality of life, Europe continues to be a leading force in the global economy. Between 1952 and - 2007, Europe's population experienced moderate growth, with a factor of approximately 1.5, - notably lower compared to other continents like Asia and America. - """ - ), - vm.Card( - text=""" - ### Oceania - ![](assets/images/continents/oceania.svg#my-image) - - Oceania, comprising countries like Australia and New Zealand, stands out with notable economic - prosperity and longer life expectancy. In 2007, it boasted the highest GDP per capita of $27,000 - among continents and exhibited one of the highest life expectancy levels, surpassing 80 years. - - Despite a relatively smaller population size, Oceania's strong economic growth has contributed - to improved living standards and overall well-being of its population. - """ - ), - ], - ) - return page_summary - - -def create_benchmark_analysis(): - """Function returns a page to perform analysis on country level.""" - # Apply formatting to grid columns - cellStyle = { - "styleConditions": [ - { - "condition": "params.value < 1045", - "style": {"backgroundColor": "#ff9222"}, - }, - { - "condition": "params.value >= 1045 && params.value <= 4095", - "style": {"backgroundColor": "#de9e75"}, - }, - { - "condition": "params.value > 4095 && params.value <= 12695", - "style": {"backgroundColor": "#aaa9ba"}, - }, - { - "condition": "params.value > 12695", - "style": {"backgroundColor": "#00b4ff"}, - }, - ] - } - columnsDefs = [ - {"field": "country", "flex": 3}, - {"field": "continent", "flex": 3}, - {"field": "year", "flex": 2}, - {"field": "lifeExp", "cellDataType": "numeric", "flex": 3}, - {"field": "gdpPercap", "cellDataType": "dollar", "cellStyle": cellStyle, "flex": 3}, - {"field": "pop", "flex": 3}, - ] - - page_country = vm.Page( - title="Benchmark Analysis", - description="Discovering how the metrics differ for each country and export data for further investigation", - layout=vm.Layout(grid=[[0, 1]] * 5 + [[2, -1]]), - components=[ - vm.AgGrid( - title="Click on a cell in country column:", - figure=dash_ag_grid(data_frame=gapminder, columnDefs=columnsDefs, dashGridOptions={"pagination": True}), - actions=[vm.Action(function=filter_interaction(targets=["line_country"]))], - ), - vm.Graph( - id="line_country", - figure=px.line( - gapminder_concat, - title="Country vs. Continent", - x="year", - y="gdpPercap", - color="color", - labels={"year": "Year", "data": "Data", "gdpPercap": "GDP per capita"}, - color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"}, - markers=True, - hover_name="country", - ), - ), - vm.Button(text="Export data", actions=[vm.Action(function=export_data(targets=["line_country"]))]), - ], - controls=[ - vm.Filter(column="continent", selector=vm.Dropdown(value="Europe", multi=False, title="Select continent")), - vm.Filter(column="year", selector=vm.RangeSlider(title="Select timeframe", step=1, marks=None)), - vm.Parameter( - targets=["line_country.y"], - selector=vm.Dropdown( - options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose y-axis" - ), - ), - ], - ) - return page_country - - -def create_home_page(): - """Function returns the homepage.""" - page_home = vm.Page( - title="Homepage", - description="Vizro demo app for studying gapminder data", - layout=vm.Layout(grid=[[0, 1], [2, 3]]), - components=[ - vm.Card( - text=""" - ![](assets/images/icons/hypotheses.svg#icon-top) - - ### Variable Analysis - - Analyzing population, GDP per capita and life expectancy on country and continent level. - """, - href="/variable-analysis", - ), - vm.Card( - text=""" - ![](assets/images/icons/hypotheses.svg#icon-top) - - ### Relationship Analysis - - Investigating the interconnection between population, GDP per capita and life expectancy. - """, - href="/relationship-analysis", - ), - vm.Card( - text=""" - ![](assets/images/icons/collections.svg#icon-top) - - ### Continent Summary - - Summarizing the main findings for each continent. - """, - href="/continent-summary", - ), - vm.Card( - text=""" - ![](assets/images/icons/features.svg#icon-top) - - ### Benchmark Analysis - - Discovering how the metrics differ for each country compared to the continent average - and export data for further investigation. - """, - href="/benchmark-analysis", - ), - ], - ) - return page_home - - -dashboard = vm.Dashboard( - title="Vizro Demo", - pages=[ - create_home_page(), - create_variable_analysis(), - create_relation_analysis(), - create_continent_summary(), - create_benchmark_analysis(), - ], - navigation=vm.Navigation( - nav_selector=vm.NavBar( - items=[ - vm.NavLink(label="Homepage", pages=["Homepage"], icon="Home"), - vm.NavLink( - label="Analysis", - pages=["Variable Analysis", "Relationship Analysis", "Benchmark Analysis"], - icon="Stacked Bar Chart", - ), - vm.NavLink(label="Summary", pages=["Continent Summary"], icon="Globe"), - ] - ) - ), -) +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() if __name__ == "__main__": Vizro().build(dashboard).run() diff --git a/vizro-core/src/vizro/static/css/scroll_bar.css b/vizro-core/src/vizro/static/css/scroll_bar.css index 396baf8a8..3c9dc34af 100644 --- a/vizro-core/src/vizro/static/css/scroll_bar.css +++ b/vizro-core/src/vizro/static/css/scroll_bar.css @@ -16,7 +16,9 @@ border-color: var(--surfaces-bg-02); } -.card::-webkit-scrollbar-thumb, .card-nav::-webkit-scrollbar-thumb, .hljs::-webkit-scrollbar-thumb { +.card::-webkit-scrollbar-thumb, +.card-nav::-webkit-scrollbar-thumb, +.hljs::-webkit-scrollbar-thumb { border-color: var(--surfaces-bg-card); } From ee1af139414378f5848dfd50da8c83c4f9765db2 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 1 Jul 2024 15:25:05 +0000 Subject: [PATCH 005/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/_dev/app.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 0b104de59..f46a5b8e3 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -40,7 +40,7 @@ def build(self): bar = vm.Page( title="Bar Chart", layout=vm.Layout( - grid=[[0, 0, 1, 1, 1]]*3 + [[2, 2, 1, 1, 1]]*4, + grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4, col_gap="80px", ), components=[ From 8e3a95ca7f525b67ac68f7b6dea4e58e00a98bf7 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 2 Jul 2024 09:59:02 +0200 Subject: [PATCH 006/109] Add homepage structure --- vizro-core/examples/_dev/app.py | 40 ++---- .../examples/_dev/assets/css/custom.css | 6 + vizro-core/examples/_dev/utils/__init__.py | 1 + vizro-core/examples/_dev/utils/_charts.py | 41 ++++++ vizro-core/examples/_dev/utils/_subpages.py | 132 ++++++++++++++++++ 5 files changed, 194 insertions(+), 26 deletions(-) create mode 100644 vizro-core/examples/_dev/utils/__init__.py create mode 100644 vizro-core/examples/_dev/utils/_charts.py create mode 100644 vizro-core/examples/_dev/utils/_subpages.py diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index f46a5b8e3..70584245d 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -7,36 +7,24 @@ import vizro.plotly.express as px from dash import dcc, html from vizro import Vizro - - -class CodeClipboard(vm.VizroBaseModel): - type: Literal["code_clipboard"] = "code_clipboard" - title: str = "Code" - text: str - - def build(self): - return dbc.Accordion( - [ - dbc.AccordionItem( - dbc.Card( - [ - html.H3(self.title), - dcc.Markdown(self.text, id=self.id, className="code-block"), - dcc.Clipboard(target_id=self.id, className="code-clipboard"), - ] - ), - title="SHOW CODE", - ) - ], - start_collapsed=True, - ) - +from utils._charts import CodeClipboard, HtmlIntro +from utils._subpages import home_all, home_flow, home_part, home_time, home_spatial, home_ranking, home_distribution, home_correlation, home_deviation, home_magnitude gapminder = px.data.gapminder() - vm.Page.add_type("components", CodeClipboard) +# HOME PAGE ----- +homepage = vm.Page( + title="Overview", + components=[ + vm.Tabs( + tabs=[home_all, home_deviation, home_correlation, home_ranking, home_distribution, home_magnitude, home_time, home_part, home_flow, home_spatial] + ), + ], +) + + bar = vm.Page( title="Bar Chart", layout=vm.Layout( @@ -92,7 +80,7 @@ def build(self): ) -dashboard = vm.Dashboard(pages=[bar]) +dashboard = vm.Dashboard(pages=[homepage, bar]) if __name__ == "__main__": Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index 908fc1702..206ba8149 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -25,3 +25,9 @@ code.language-python.hljs { .hljs-keyword { color: #d41159; } + + +.html-intro { + border-left: 4px solid var(--text-secondary); + padding: 8px; +} diff --git a/vizro-core/examples/_dev/utils/__init__.py b/vizro-core/examples/_dev/utils/__init__.py new file mode 100644 index 000000000..11387ccac --- /dev/null +++ b/vizro-core/examples/_dev/utils/__init__.py @@ -0,0 +1 @@ +"""Utils folder to contain helper functions and custom charts/components.""" diff --git a/vizro-core/examples/_dev/utils/_charts.py b/vizro-core/examples/_dev/utils/_charts.py new file mode 100644 index 000000000..dc2b609c4 --- /dev/null +++ b/vizro-core/examples/_dev/utils/_charts.py @@ -0,0 +1,41 @@ +"""Contains custom components and charts used inside the dashboard.""" + +from typing import List, Literal, Optional + +import dash_bootstrap_components as dbc +import pandas as pd +import vizro.models as vm +import vizro.plotly.express as px +from dash import html +from vizro.models.types import capture +from dash import html, dcc + +# CUSTOM COMPONENTS ------------------------------------------------------------- +class CodeClipboard(vm.VizroBaseModel): + type: Literal["code_clipboard"] = "code_clipboard" + title: str = "Code" + text: str + + def build(self): + return dbc.Accordion( + [ + dbc.AccordionItem( + dbc.Card( + [ + html.H3(self.title), + dcc.Markdown(self.text, id=self.id, className="code-block"), + dcc.Clipboard(target_id=self.id, className="code-clipboard"), + ] + ), + title="SHOW CODE", + ) + ], + start_collapsed=True, + ) + +class HtmlIntro(vm.VizroBaseModel): + type: Literal["html_intro"] = "html_intro" + text: str + + def build(self): + return html.H4(self.text, className="html-intro") diff --git a/vizro-core/examples/_dev/utils/_subpages.py b/vizro-core/examples/_dev/utils/_subpages.py new file mode 100644 index 000000000..2edb1558b --- /dev/null +++ b/vizro-core/examples/_dev/utils/_subpages.py @@ -0,0 +1,132 @@ +"""Contains custom components and charts used inside the dashboard.""" + +from typing import List, Literal, Optional + +import dash_bootstrap_components as dbc +import pandas as pd +import vizro.models as vm +import vizro.plotly.express as px +from dash import html +from vizro.models.types import capture +from ._charts import CodeClipboard, HtmlIntro + +vm.Container.add_type("components", HtmlIntro) + +# HOMEPAGE ------------------------------------------------------------- +home_all = vm.Container(title="All", components=[vm.Card(text="""Placeholder""")]) +home_deviation = vm.Container( + title="Deviation", + components=[ + HtmlIntro( + text=""" + Deviation enables you to draw attention to variations (+/-) from a fixed reference point. + Often this reference point is zero, but you might also show a target or a long-term average. + You can also use deviation to express a positive, neutral or negative sentiment. + """ + ) + ], +) + +home_correlation = vm.Container( + title="Correlation", + components=[ + HtmlIntro( + text=""" + Correlation helps you show the relationship between two or more variables. It is important that you + make it clear to your audience whether or not the relationship is causal, i.e., whether one causes the + other. + """ + ) + ], +) + +home_ranking = vm.Container( + title="Ranking", + components=[ + HtmlIntro( + text=""" + Ranking enables you to present items in an ordered list. You will use this when you want to highlight the + position of an item rather than its absolute or relative value. You might want to emphasise the most + interesting points with highlighting or labels to ensure the reader understands what matters most. + """ + ) + ], +) + +home_distribution = vm.Container( + title="Distribution", + components=[ + HtmlIntro( + text=""" + Distribution helps you to present all the possible values (or intervals) of your data and how often they + occur. You can organise the data to show the number or percentage of items in a specified group, what shape + the group takes, where the centre lies, and how much variability there is in the data. This shape + (or ‘skew’) of a distribution can be a powerful way for you to highlight either the existence or lack of + uniformity or equality in the data. + """ + ) + ], +) + +home_magnitude = vm.Container( + title="Magnitude", + components=[ + HtmlIntro( + text=""" + Magnitude allows you to emphasise size comparisons of ‘counted’ items in your data set. You can show + relative comparisons (whether something is larger or smaller) or absolute differences (where the nuances + are most interesting). Typically, you will use magnitude for actual numbers versus calculated rates or + percentages. + """ + ) + ], +) + +home_time = vm.Container( + title="Time", + components=[ + HtmlIntro( + text=""" + Time helps you draw attention to important trends emerging over a specified period. The time period you + select could be as short as seconds or as long as centuries. What matters most is selecting the correct + period of time to best show your audience the message they need to take away. + """ + ) + ], +) + +home_part = vm.Container( + title="Part-to-whole", + components=[ + HtmlIntro( + text=""" + Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the + size of the parts to be most important, a magnitude chart may be more appropriate. + """ + ) + ], +) + +home_flow = vm.Container( + title="Flow", + components=[ + HtmlIntro( + text=""" + With flow charts, you can highlight the quantity or the intensity of the movement between more than one + state or condition. The flow might be steps in a logical sequence or movement between different geographical + locations. + """ + ) + ], +) + +home_spatial = vm.Container( + title="Spatial", + components=[ + HtmlIntro( + text=""" + Spatial charts allow you to demonstrate precise locations or geographical patterns in your data. + """ + ) + ], +) From bb8481d8bd922054058090512b121f7e30d809c8 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 2 Jul 2024 10:00:17 +0200 Subject: [PATCH 007/109] Revert changes in demo app --- vizro-core/examples/demo/app.py | 539 +++++++++++++++++++++++++++++++- 1 file changed, 534 insertions(+), 5 deletions(-) diff --git a/vizro-core/examples/demo/app.py b/vizro-core/examples/demo/app.py index b880fe2c4..768f2568f 100644 --- a/vizro-core/examples/demo/app.py +++ b/vizro-core/examples/demo/app.py @@ -1,18 +1,547 @@ """Example to show dashboard configuration.""" +from typing import Optional + +import pandas as pd import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro +from vizro.actions import export_data, filter_interaction +from vizro.models.types import capture +from vizro.tables import dash_ag_grid gapminder = px.data.gapminder() +gapminder_mean = ( + gapminder.groupby(by=["continent", "year"]) + .agg({"lifeExp": "mean", "pop": "mean", "gdpPercap": "mean"}) + .reset_index() +) +gapminder_mean_2007 = gapminder_mean.query("year == 2007") -page = vm.Page( - title="My first page", - components=[vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'Germany'"), x="year", y="pop"))], +gapminder_transformed = gapminder.copy() +gapminder_transformed["lifeExp"] = gapminder.groupby(by=["continent", "year"])["lifeExp"].transform("mean") +gapminder_transformed["gdpPercap"] = gapminder.groupby(by=["continent", "year"])["gdpPercap"].transform("mean") +gapminder_transformed["pop"] = gapminder.groupby(by=["continent", "year"])["pop"].transform("sum") +gapminder_concat = pd.concat( + [gapminder_transformed.assign(color="Continent Avg."), gapminder.assign(color="Country")], ignore_index=True ) -dashboard = vm.Dashboard(pages=[page]) -Vizro().build(dashboard).run() + +@capture("graph") +def variable_map(data_frame: pd.DataFrame = None, color: Optional[str] = None): + """Custom choropleth figure that needs post update calls.""" + fig = px.choropleth( + data_frame, + locations="iso_alpha", + color=color, + hover_name="country", + animation_frame="year", + labels={ + "year": "year", + "lifeExp": "Life expectancy", + "pop": "Population", + "gdpPercap": "GDP per capita", + }, + title="Global development over time", + ) + fig.update_layout(showlegend=False) + fig.update_yaxes(automargin=True) + fig.update_xaxes(automargin=True) + fig.update_coloraxes(colorbar={"thickness": 10, "title": {"side": "right"}}) + return fig + + +@capture("graph") +def variable_boxplot(y: str, data_frame: pd.DataFrame = None): + """Custom boxplot figure that needs post update calls.""" + fig = px.box( + data_frame, + x="continent", + y=y, + color="continent", + labels={ + "year": "year", + "lifeExp": "Life expectancy", + "pop": "Population", + "gdpPercap": "GDP per capita", + "continent": "Continent", + }, + title="Distribution per continent", + color_discrete_map={ + "Africa": "#00b4ff", + "Americas": "#ff9222", + "Asia": "#3949ab", + "Europe": "#ff5267", + "Oceania": "#08bdba", + }, + ) + fig.update_layout(showlegend=False) + fig.update_yaxes(automargin=True) + fig.update_xaxes(automargin=True) + return fig + + +@capture("graph") +def variable_bar(x: str, data_frame: pd.DataFrame = None): + """Custom bar figure that needs post update calls.""" + fig = px.bar( + data_frame, + x=x, + y="continent", + orientation="h", + title="Continent comparison (2007)", + labels={ + "year": "year", + "continent": "Continent", + "lifeExp": "Life expectancy", + "pop": "Population", + "gdpPercap": "GDP per capita", + }, + color="continent", + color_discrete_map={ + "Africa": "#00b4ff", + "Americas": "#ff9222", + "Asia": "#3949ab", + "Europe": "#ff5267", + "Oceania": "#08bdba", + }, + ) + + fig.update_layout(showlegend=False) + fig.update_yaxes(automargin=True) + fig.update_xaxes(automargin=True) + return fig + + +@capture("graph") +def scatter_relation(x: str, y: str, size: str, data_frame: pd.DataFrame = None): + """Custom scatter figure that needs post update calls.""" + fig = px.scatter( + data_frame, + x=x, + y=y, + animation_frame="year", + animation_group="country", + size=size, + size_max=60, + color="continent", + hover_name="country", + labels={ + "gdpPercap": "GDP per capita", + "pop": "Population", + "lifeExp": "Life expectancy", + "continent": "Continent", + }, + range_y=[25, 90], + color_discrete_map={ + "Africa": "#00b4ff", + "Americas": "#ff9222", + "Asia": "#3949ab", + "Europe": "#ff5267", + "Oceania": "#08bdba", + }, + ) + + fig.update_layout( + title="Relationship over time", + legend={"orientation": "v", "yanchor": "bottom", "y": 0, "xanchor": "right", "x": 1}, + ) + fig.update_yaxes(automargin=True) + fig.update_xaxes(automargin=True) + return fig + + +def create_variable_analysis(): + """Function returns a page with gapminder data to do variable analysis.""" + page_variable = vm.Page( + title="Variable Analysis", + description="Analyzing population, GDP per capita and life expectancy on country and continent level", + layout=vm.Layout( + grid=[ + # fmt: off + [0, 1, 1, 1], + [2, 3, 3, 3], + [4, 5, 5, 5], + [6, 7, 7, 7], + # fmt: on + ], + row_min_height="400px", + row_gap="24px", + ), + components=[ + vm.Card( + text=""" + ### Overview + The world map provides initial insights into the variations of metrics across countries and + continents. Click on Play to see the animation and explore the development over time. + + #### Observation + A global trend of increasing life expectancy emerges, with some exceptions in specific African + countries. Additionally, despite similar population growth rates across continents, the overall + global population continues to expand, with India and China leading the way. Meanwhile, GDP per + capita experiences growth in most regions. + + """ + ), + vm.Graph( + id="variable_map", + figure=variable_map(data_frame=gapminder, color="lifeExp"), + ), + vm.Card( + text=""" + ### Distribution + The boxplot illustrates the distribution of each metric across continents, facilitating comparisons + of life expectancy, GDP per capita, and population statistics. + + Observations reveal that Europe and Oceania have the highest life expectancy and GDP per capita, + likely influenced by their smaller population growth. Additionally, Asia and America exhibit + notable GDP per capita outliers, indicating variations among countries within these continents or + large growth over the observed years. + """ + ), + vm.Graph( + id="variable_boxplot", + figure=variable_boxplot(data_frame=gapminder, y="lifeExp"), + ), + vm.Card( + text=""" + ### Development + The line chart tracks the variable's progress from 1952 to 2007, facilitating a deeper comprehension + of each metric. + + #### Observation + Oceania and Europe are found to have the highest total GDP per capita and exhibit significant + growth. In contrast, Asia, Africa, and America demonstrate a more pronounced upward trend in + population increase compared to Europe and Oceania, suggesting that GDP per capita growth might be + influenced by relatively smaller population growth in the latter two continents. + + """ + ), + vm.Graph( + id="variable_line", + figure=px.line( + gapminder_mean, + y="lifeExp", + x="year", + color="continent", + title="Avg. Development (1952 - 2007)", + labels={ + "year": "Year", + "lifeExp": "Life expectancy", + "pop": "Population", + "gdpPercap": "GDP per capita", + "continent": "Continent", + }, + color_discrete_map={ + "Africa": "#00b4ff", + "Americas": "#ff9222", + "Asia": "#3949ab", + "Europe": "#ff5267", + "Oceania": "#08bdba", + }, + ), + ), + vm.Card( + text=""" + ### Recent status + Examining the data for 2007 provides insight into the current status of each continent and metrics. + + #### Observation + Asia held the largest population, followed by America, Europe, Africa, and Oceania. Life expectancy + surpassed 70 years for all continents, except Africa with 55 years. GDP per capita aligns with + earlier findings, with Oceania and Europe reporting the highest values and Africa recording the + lowest. + """ + ), + vm.Graph( + id="variable_bar", + figure=variable_bar(data_frame=gapminder_mean_2007, x="lifeExp"), + ), + ], + controls=[ + vm.Parameter( + targets=["variable_map.color", "variable_boxplot.y", "variable_line.y", "variable_bar.x"], + selector=vm.RadioItems(options=["lifeExp", "pop", "gdpPercap"], title="Select variable"), + ) + ], + ) + return page_variable + + +def create_relation_analysis(): + """Function returns a page to perform relation analysis.""" + page_relation_analysis = vm.Page( + title="Relationship Analysis", + description="Investigating the interconnection between population, GDP per capita and life expectancy", + layout=vm.Layout( + grid=[[0, 0, 0, 0, 0]] + [[1, 1, 1, 1, 1]] * 4, + row_min_height="100px", + row_gap="24px", + ), + components=[ + vm.Card( + text=""" + Population, GDP per capita, and life expectancy are interconnected metrics that provide insights + into the socioeconomic well-being of a country. + Rapid population growth can strain resources and infrastructure, impacting GDP per capita. Higher + GDP per capita often enables better healthcare and improved life expectancy, but other factors such + as healthcare quality and social policies also play significant roles. + """ + ), + vm.Graph( + id="scatter_relation", + figure=scatter_relation(data_frame=gapminder, x="gdpPercap", y="lifeExp", size="pop"), + ), + ], + controls=[ + vm.Parameter( + targets=["scatter_relation.x"], + selector=vm.Dropdown( + options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose x-axis" + ), + ), + vm.Parameter( + targets=["scatter_relation.size"], + selector=vm.Dropdown( + options=["lifeExp", "gdpPercap", "pop"], multi=False, value="pop", title="Choose bubble size" + ), + ), + ], + ) + return page_relation_analysis + + +def create_continent_summary(): + """Function returns a page with markdown including images.""" + page_summary = vm.Page( + title="Continent Summary", + description="Summarizing the main findings for each continent", + layout=vm.Layout(grid=[[i] for i in range(5)], row_min_height="190px", row_gap="25px"), + components=[ + vm.Card( + text=""" + ### Africa + ![](assets/images/continents/africa.svg#my-image) + + Africa, a diverse and expansive continent, faces both challenges and progress in its socioeconomic + landscape. In 2007, Africa's GDP per capita was approximately $3,000, reflecting relatively slower + growth compared to other continents like Oceania and Europe. + + However, Africa has shown notable improvements in life expectancy over time, reaching 55 years in + 2007. Despite these economic disparities, Africa's population has been steadily increasing, + reflecting its significant potential for development. + """ + ), + vm.Card( + text=""" + ### Americas + ![](assets/images/continents/america.svg#my-image) + + Comprising North and South America, Americas represents a region of vast geographical and cultural + diversity. In 2007, the continent experienced substantial population growth, with a diverse mix of + countries contributing to this expansion. + + Although its GDP per capita of $11,000 in 2007 exhibited variations across countries, America + maintained similar levels to Asia, reflecting its economic significance. With North America + generally reporting higher life expectancy compared to South America, America remains a region of + opportunities and challenges. + """ + ), + vm.Card( + text=""" + ### Asia + ![](assets/images/continents/asia.svg#my-image) + + Asia holds a central role in the global economy. It's growth in GDP per capita to $12,000 in 2007 + and population has been significant, outpacing many other continents. In 2007, it boasted the + highest population among all continents, with countries like China and India leading the way. + + Despite facing various socioeconomic challenges, Asia's increasing life expectancy from 46 years + to 70 over the years reflects advancements in healthcare and overall well-being, making it a vital + region driving global progress and development. + """ + ), + vm.Card( + text=""" + ### Europe + ![](assets/images/continents/europe.svg#my-image) + + Europe boasts a strong and thriving economy. In 2007, it exhibited the second-highest GDP per + capita of $25,000 among continents, indicating sustained economic growth and development. + + Europe's life expectancy surpassed 75 years, showcasing a high standard of living and + well-established healthcare systems. With its robust infrastructure, advanced industries, and + quality of life, Europe continues to be a leading force in the global economy. Between 1952 and + 2007, Europe's population experienced moderate growth, with a factor of approximately 1.5, + notably lower compared to other continents like Asia and America. + """ + ), + vm.Card( + text=""" + ### Oceania + ![](assets/images/continents/oceania.svg#my-image) + + Oceania, comprising countries like Australia and New Zealand, stands out with notable economic + prosperity and longer life expectancy. In 2007, it boasted the highest GDP per capita of $27,000 + among continents and exhibited one of the highest life expectancy levels, surpassing 80 years. + + Despite a relatively smaller population size, Oceania's strong economic growth has contributed + to improved living standards and overall well-being of its population. + """ + ), + ], + ) + return page_summary + + +def create_benchmark_analysis(): + """Function returns a page to perform analysis on country level.""" + # Apply formatting to grid columns + cellStyle = { + "styleConditions": [ + { + "condition": "params.value < 1045", + "style": {"backgroundColor": "#ff9222"}, + }, + { + "condition": "params.value >= 1045 && params.value <= 4095", + "style": {"backgroundColor": "#de9e75"}, + }, + { + "condition": "params.value > 4095 && params.value <= 12695", + "style": {"backgroundColor": "#aaa9ba"}, + }, + { + "condition": "params.value > 12695", + "style": {"backgroundColor": "#00b4ff"}, + }, + ] + } + columnsDefs = [ + {"field": "country", "flex": 3}, + {"field": "continent", "flex": 3}, + {"field": "year", "flex": 2}, + {"field": "lifeExp", "cellDataType": "numeric", "flex": 3}, + {"field": "gdpPercap", "cellDataType": "dollar", "cellStyle": cellStyle, "flex": 3}, + {"field": "pop", "flex": 3}, + ] + + page_country = vm.Page( + title="Benchmark Analysis", + description="Discovering how the metrics differ for each country and export data for further investigation", + layout=vm.Layout(grid=[[0, 1]] * 5 + [[2, -1]]), + components=[ + vm.AgGrid( + title="Click on a cell in country column:", + figure=dash_ag_grid(data_frame=gapminder, columnDefs=columnsDefs, dashGridOptions={"pagination": True}), + actions=[vm.Action(function=filter_interaction(targets=["line_country"]))], + ), + vm.Graph( + id="line_country", + figure=px.line( + gapminder_concat, + title="Country vs. Continent", + x="year", + y="gdpPercap", + color="color", + labels={"year": "Year", "data": "Data", "gdpPercap": "GDP per capita"}, + color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"}, + markers=True, + hover_name="country", + ), + ), + vm.Button(text="Export data", actions=[vm.Action(function=export_data(targets=["line_country"]))]), + ], + controls=[ + vm.Filter(column="continent", selector=vm.Dropdown(value="Europe", multi=False, title="Select continent")), + vm.Filter(column="year", selector=vm.RangeSlider(title="Select timeframe", step=1, marks=None)), + vm.Parameter( + targets=["line_country.y"], + selector=vm.Dropdown( + options=["lifeExp", "gdpPercap", "pop"], multi=False, value="gdpPercap", title="Choose y-axis" + ), + ), + ], + ) + return page_country + + +def create_home_page(): + """Function returns the homepage.""" + page_home = vm.Page( + title="Homepage", + description="Vizro demo app for studying gapminder data", + layout=vm.Layout(grid=[[0, 1], [2, 3]]), + components=[ + vm.Card( + text=""" + ![](assets/images/icons/hypotheses.svg#icon-top) + + ### Variable Analysis + + Analyzing population, GDP per capita and life expectancy on country and continent level. + """, + href="/variable-analysis", + ), + vm.Card( + text=""" + ![](assets/images/icons/hypotheses.svg#icon-top) + + ### Relationship Analysis + + Investigating the interconnection between population, GDP per capita and life expectancy. + """, + href="/relationship-analysis", + ), + vm.Card( + text=""" + ![](assets/images/icons/collections.svg#icon-top) + + ### Continent Summary + + Summarizing the main findings for each continent. + """, + href="/continent-summary", + ), + vm.Card( + text=""" + ![](assets/images/icons/features.svg#icon-top) + + ### Benchmark Analysis + + Discovering how the metrics differ for each country compared to the continent average + and export data for further investigation. + """, + href="/benchmark-analysis", + ), + ], + ) + return page_home + + +dashboard = vm.Dashboard( + title="Vizro Demo", + pages=[ + create_home_page(), + create_variable_analysis(), + create_relation_analysis(), + create_continent_summary(), + create_benchmark_analysis(), + ], + navigation=vm.Navigation( + nav_selector=vm.NavBar( + items=[ + vm.NavLink(label="Homepage", pages=["Homepage"], icon="Home"), + vm.NavLink( + label="Analysis", + pages=["Variable Analysis", "Relationship Analysis", "Benchmark Analysis"], + icon="Stacked Bar Chart", + ), + vm.NavLink(label="Summary", pages=["Continent Summary"], icon="Globe"), + ] + ) + ), +) if __name__ == "__main__": Vizro().build(dashboard).run() From 52fb3a326a5e3b96899dce8537fe3b7c99719dd8 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 2 Jul 2024 10:05:44 +0200 Subject: [PATCH 008/109] Lint --- vizro-core/examples/_dev/app.py | 37 ++++++++++++---- .../examples/_dev/assets/css/custom.css | 1 - vizro-core/examples/_dev/utils/_charts.py | 10 ++--- vizro-core/examples/_dev/utils/_subpages.py | 44 ++++++++----------- 4 files changed, 52 insertions(+), 40 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 70584245d..18682166a 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,14 +1,10 @@ """Example to show dashboard configuration specified as pydantic models.""" -from typing import Literal - -import dash_bootstrap_components as dbc import vizro.models as vm import vizro.plotly.express as px -from dash import dcc, html +from utils._charts import CodeClipboard +from utils._subpages import * from vizro import Vizro -from utils._charts import CodeClipboard, HtmlIntro -from utils._subpages import home_all, home_flow, home_part, home_time, home_spatial, home_ranking, home_distribution, home_correlation, home_deviation, home_magnitude gapminder = px.data.gapminder() vm.Page.add_type("components", CodeClipboard) @@ -19,7 +15,18 @@ title="Overview", components=[ vm.Tabs( - tabs=[home_all, home_deviation, home_correlation, home_ranking, home_distribution, home_magnitude, home_time, home_part, home_flow, home_spatial] + tabs=[ + home_all, + home_deviation, + home_correlation, + home_ranking, + home_distribution, + home_magnitude, + home_time, + home_part, + home_flow, + home_spatial, + ] ), ], ) @@ -80,7 +87,21 @@ ) -dashboard = vm.Dashboard(pages=[homepage, bar]) +dashboard = vm.Dashboard( + pages=[homepage, bar], + navigation=vm.Navigation( + nav_selector=vm.NavBar( + items=[ + vm.NavLink(label="Overview", pages=["Overview"], icon="Home"), + vm.NavLink( + label="Magnitude", + pages=["Bar Chart"], + icon="Bar Chart", + ), + ] + ) + ), +) if __name__ == "__main__": Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index 206ba8149..af2d29f25 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -26,7 +26,6 @@ code.language-python.hljs { color: #d41159; } - .html-intro { border-left: 4px solid var(--text-secondary); padding: 8px; diff --git a/vizro-core/examples/_dev/utils/_charts.py b/vizro-core/examples/_dev/utils/_charts.py index dc2b609c4..f81cc4467 100644 --- a/vizro-core/examples/_dev/utils/_charts.py +++ b/vizro-core/examples/_dev/utils/_charts.py @@ -1,14 +1,11 @@ """Contains custom components and charts used inside the dashboard.""" -from typing import List, Literal, Optional +from typing import Literal import dash_bootstrap_components as dbc -import pandas as pd import vizro.models as vm -import vizro.plotly.express as px -from dash import html -from vizro.models.types import capture -from dash import html, dcc +from dash import dcc, html + # CUSTOM COMPONENTS ------------------------------------------------------------- class CodeClipboard(vm.VizroBaseModel): @@ -33,6 +30,7 @@ def build(self): start_collapsed=True, ) + class HtmlIntro(vm.VizroBaseModel): type: Literal["html_intro"] = "html_intro" text: str diff --git a/vizro-core/examples/_dev/utils/_subpages.py b/vizro-core/examples/_dev/utils/_subpages.py index 2edb1558b..2246649bd 100644 --- a/vizro-core/examples/_dev/utils/_subpages.py +++ b/vizro-core/examples/_dev/utils/_subpages.py @@ -1,14 +1,8 @@ """Contains custom components and charts used inside the dashboard.""" -from typing import List, Literal, Optional - -import dash_bootstrap_components as dbc -import pandas as pd import vizro.models as vm -import vizro.plotly.express as px -from dash import html -from vizro.models.types import capture -from ._charts import CodeClipboard, HtmlIntro + +from ._charts import HtmlIntro vm.Container.add_type("components", HtmlIntro) @@ -19,8 +13,8 @@ components=[ HtmlIntro( text=""" - Deviation enables you to draw attention to variations (+/-) from a fixed reference point. - Often this reference point is zero, but you might also show a target or a long-term average. + Deviation enables you to draw attention to variations (+/-) from a fixed reference point. + Often this reference point is zero, but you might also show a target or a long-term average. You can also use deviation to express a positive, neutral or negative sentiment. """ ) @@ -32,8 +26,8 @@ components=[ HtmlIntro( text=""" - Correlation helps you show the relationship between two or more variables. It is important that you - make it clear to your audience whether or not the relationship is causal, i.e., whether one causes the + Correlation helps you show the relationship between two or more variables. It is important that you + make it clear to your audience whether or not the relationship is causal, i.e., whether one causes the other. """ ) @@ -45,8 +39,8 @@ components=[ HtmlIntro( text=""" - Ranking enables you to present items in an ordered list. You will use this when you want to highlight the - position of an item rather than its absolute or relative value. You might want to emphasise the most + Ranking enables you to present items in an ordered list. You will use this when you want to highlight the + position of an item rather than its absolute or relative value. You might want to emphasise the most interesting points with highlighting or labels to ensure the reader understands what matters most. """ ) @@ -58,10 +52,10 @@ components=[ HtmlIntro( text=""" - Distribution helps you to present all the possible values (or intervals) of your data and how often they - occur. You can organise the data to show the number or percentage of items in a specified group, what shape - the group takes, where the centre lies, and how much variability there is in the data. This shape - (or ‘skew’) of a distribution can be a powerful way for you to highlight either the existence or lack of + Distribution helps you to present all the possible values (or intervals) of your data and how often they + occur. You can organise the data to show the number or percentage of items in a specified group, what shape + the group takes, where the centre lies, and how much variability there is in the data. This shape + (or ‘skew’) of a distribution can be a powerful way for you to highlight either the existence or lack of uniformity or equality in the data. """ ) @@ -73,9 +67,9 @@ components=[ HtmlIntro( text=""" - Magnitude allows you to emphasise size comparisons of ‘counted’ items in your data set. You can show - relative comparisons (whether something is larger or smaller) or absolute differences (where the nuances - are most interesting). Typically, you will use magnitude for actual numbers versus calculated rates or + Magnitude allows you to emphasise size comparisons of ‘counted’ items in your data set. You can show + relative comparisons (whether something is larger or smaller) or absolute differences (where the nuances + are most interesting). Typically, you will use magnitude for actual numbers versus calculated rates or percentages. """ ) @@ -87,8 +81,8 @@ components=[ HtmlIntro( text=""" - Time helps you draw attention to important trends emerging over a specified period. The time period you - select could be as short as seconds or as long as centuries. What matters most is selecting the correct + Time helps you draw attention to important trends emerging over a specified period. The time period you + select could be as short as seconds or as long as centuries. What matters most is selecting the correct period of time to best show your audience the message they need to take away. """ ) @@ -100,7 +94,7 @@ components=[ HtmlIntro( text=""" - Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the + Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the size of the parts to be most important, a magnitude chart may be more appropriate. """ ) @@ -112,7 +106,7 @@ components=[ HtmlIntro( text=""" - With flow charts, you can highlight the quantity or the intensity of the movement between more than one + With flow charts, you can highlight the quantity or the intensity of the movement between more than one state or condition. The flow might be steps in a logical sequence or movement between different geographical locations. """ From 42dd5bc421955872dce3d158bd3631383c1267b4 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 2 Jul 2024 12:58:39 +0200 Subject: [PATCH 009/109] Add card and flex-box --- vizro-core/examples/_dev/app.py | 64 +---------------- .../examples/_dev/assets/css/custom.css | 25 ++++++- .../_dev/assets/images/charts/bar.png | Bin 0 -> 4403 bytes vizro-core/examples/_dev/utils/_charts.py | 11 +++ .../_dev/utils/{_subpages.py => _home.py} | 65 +++++++++++++++-- vizro-core/examples/_dev/utils/_magnitude.py | 66 ++++++++++++++++++ 6 files changed, 164 insertions(+), 67 deletions(-) create mode 100644 vizro-core/examples/_dev/assets/images/charts/bar.png rename vizro-core/examples/_dev/utils/{_subpages.py => _home.py} (72%) create mode 100644 vizro-core/examples/_dev/utils/_magnitude.py diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 18682166a..ea7baba60 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,15 +1,10 @@ """Example to show dashboard configuration specified as pydantic models.""" import vizro.models as vm -import vizro.plotly.express as px -from utils._charts import CodeClipboard -from utils._subpages import * +from utils._home import * +from utils._magnitude import * from vizro import Vizro -gapminder = px.data.gapminder() -vm.Page.add_type("components", CodeClipboard) - - # HOME PAGE ----- homepage = vm.Page( title="Overview", @@ -32,61 +27,6 @@ ) -bar = vm.Page( - title="Bar Chart", - layout=vm.Layout( - grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4, - col_gap="80px", - ), - components=[ - vm.Card( - text=""" - - ### What is a bar chart? - - A Bar chart displays bars in lengths proportional to the values they represent. One axis of - the chart shows the categories to compare and the other axis provides a value scale, - starting with zero. - -   - - ### When to use the bart chart? - - Select a Bar chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling - clearly when you have a large number of bars. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. - - """ - ), - vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'Germany'"), x="year", y="pop")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - gapminder = px.data.gapminder() - - page = vm.Page( - title="Bar Chart", - components=[ - vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'Germany'"), x="year", y="pop")) - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ - ), - ], -) - - dashboard = vm.Dashboard( pages=[homepage, bar], navigation=vm.Navigation( diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index af2d29f25..5a25c9f53 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -2,6 +2,10 @@ padding-left: 8px; } +img[src*="#chart-icon"] { + width: 100%; +} + .code-clipboard { font-size: 20px; position: absolute; @@ -28,5 +32,24 @@ code.language-python.hljs { .html-intro { border-left: 4px solid var(--text-secondary); - padding: 8px; + color: var(--text-secondary); + padding: 12px; +} + +.flex-container .card { + height: 200px; + width: 176px; +} + +.flex-container { + display: flex; + flex-wrap: wrap; + gap: 16px; +} + +.flex-container h4 { + color: var(--text-secondary); + margin-bottom: 0; + margin-top: 8px; + text-align: center; } diff --git a/vizro-core/examples/_dev/assets/images/charts/bar.png b/vizro-core/examples/_dev/assets/images/charts/bar.png new file mode 100644 index 0000000000000000000000000000000000000000..36578bb894bfefcd5ce1aaf4f1661bf3d9d68423 GIT binary patch literal 4403 zcmc&$cT^Mmww@4#5LzgQA}v8U3L-(c0-*&GL_)7p6lv0g&_bkFLy=BEEEEw%KoBWP z2PpzV1Vp4uM~ZZiD&mdjoOh1vzP0XJ@2@v&?b+Y#Z-0BwZ~tay&20m{OU%%dPyhg! zahmEzR8OK>7=(^`?iy$=0|0253l?jD!(!nE-X4xFZVmvTdHc>?dV|yvu8#G+yl4{e zXy|>$S1whpMNrzci=rYR3@pMEIs^)$#VfWwO4u|q!C@B$wWMp_K4SuK5ZB$(xxJOPcX zj5Zc45};G^@-Vop-0^t(I@md&-d^_k&iaoZW~rY&D~18pX2@yJ^5G@OL(GxD75Fpblq18!&~JGfnlqhOpQ@wLD5V>T z1izHH1^KfVBy3bVjM=$kF`_$!gGRyaL7?u@52IXROTLPM=O&_i z>Mv<-9tBCv!o9OPQmV@FD(MC+ssuKmD{0<7AP|(pN%Q_=I~N1N(SC7BhzU*uO{N!D zu?r9Z-9XamvwtPb{Dhfb3vTy;oe6iI2dQDiwqHnz*C{9GgI%^7Wj0 z5i-+3)vyUBvz7}RhSdy>w3DRuX1o30l%ip9>09xrboF(f1UlWs@fFV!C}6owS)i=fC1ovECc*i&RvSyCm*g5-(R&g{+uynblItYoR4*D53$smRiQpah z4wPshc-G@gZ<>AzG6ntnq$v6sJm01WR+wC5@Z3{RtvJT$Uk2C3pNhE~Dn0VE-mD-; zv14x+y~Gu&6`HwVEObY#?iXDx{!|d8e^3F{ZM!0B>X4yT(PeD<^4aYhF<+nq4bRL> ztcyB}P(@_}u>*Pq%0|%xx*xFvX3vBS)=h-^-+$Z~fH|*xs4m{LG&bzFlDSxMb-R8( zhRc*<8kcWcLR4E8)eUdY$?Fq$S$%1UC*slgl--b3$yJ;HHVcwPlckZBU#o6a>z?ag zDlgyb5r_+jUo#R5rR| zD>ut5T>I^|2M0f_cJzFR(rUMMO9m9HS=C3wxbI=OCRss+R?z@1JB;VwJdePLq9$*e4+ zl8^GdeYK{pM6u(0@;6xPy_6RDF27mZCB#?x)$`L!b2X#ex!hfpp`zg;%9S3)mb$KQ z_mdL!$@&ew1uwGJwI<_2cwPgq@gc!F%)e(?bnx%^Zdk8Q3aUaOj0I3XL1*?eOm0@R z$Sv!a!F{Q1hj9mS8MjnnGR}eT`)yjM-c3znN)gS70R$5B9Ag%FlVsSM9xcGY$GQiZ zWIvW~IfLQsEUh>#SDlXh zj{JwyluhG}TfB-{yXlvp0|%%JFx0pY0SKn#o*Vw+27QnfF&-_Qg++ zHWM3{Zwzq^<(IrRwXra`ykU#|7&VAVXdy;|(fh{+)*@CS5?{s^>%AtE7KQxLH}T~o zFJ1eq?DRGh*eT>#GBR)F10UMryU9WS$N4wiR##T4R>ot;yCwrdGsY@MrANw-%EMRV zD&_9{RvQKE--Av>{Y@N_`A>*coMf zn1A!((`-rihzDB_G%`{%+RmLnr|fjp`|_1SRrYcBQB|wctKQ2GjpeI8D{Tf%9~3ek zaJNfBB^w*ld|Yzy{$sP0zPsy{(Jy_i7^=NjpY;w<1mY7Jhpv`nHLUr3f5&{7FrTq2 zm!Yt#pg&n&N35kZ7A;k_uBN+ptPN&IDlY_%2O!5cYY97&+iTr{aqByulB$2?AWQU* z!nSSpZAV+HlDq|VRj%#PZa>*CeAgfA^riPkh}?05p&L?VXnkPvKxyS*7PQ+`gf2hc zmp0#zILfutbS-cn4%lCb>DAn$h$88&8LsIzN*)^T_KthRPh=iazQ5?{TkLDDYN;}& zzGOx9=%eOc?3nq+aK+}=&Cc61N#a7T=sq+tDDhC~Uo|s~Yuca9W?wv?q-j*Xul4W& zdnu{-{$(IiKJy-=sjd}Bwg+-p0dkD2xI{Oj8}DeM$_(`{YZeiz_h1jBY?lyCDd#WeM##14aQ^C zG2_+?hJ{w7HkkSkd)dJp=cua-h*L2H07bh1v{VG5+DWPb0GJ#F&{I7-)zoun{$@!z z;J^j_u{a#n8{2z3IJgs>J$x2>#$HoP4Z4_^`pwb&bE|)GK9SXCEI=1tikf*H_Y4M$*IE33(ocLLsH3k8U(7!pe^HwMqLh*TRrw3^ zpGs4LgE!U#Pi^U=^3TrvCH|HCOQ?kWx$<8o@#mQTh*IaQ0#!o(y=N-WLYT1 zQ&%(b1FdE%yK}0+G&&^6Sr14;Y^rwCjOLh6VWcoHT=*>nbqh=*;;pCJgpd%i25ysJ zY$!xiGxU?D`4yve=bPUX>T18>=dwo%*8(O}9evv?6a)8!z8?gKsBCm;+j#iyl^^ik z4c(-tm4v`)Px8<}Y(1q^A^cLbu$C#CFqpgz1Wsyh1`wW2FjdH{TOiC-7$OWtM-L`7 zfv^CAiG>al4vqpaJp4>B8hR!WNlKmvPRsItEHw3$*UF*P{OV`t#PRed@0!(=fmt66 zKRxl;Qe zG*d6esO%HX!i6kVww94NyVQ3+S zBN1yd>NR8j%h}%e5LZ;aSYAXPM{e=r2;V^M(IA5aHoQly^+ka09;IS#F1nF zbq7cvZQUe}t;Iw3KZwy~*uzOVmk1n@)&~<4%B(vid`A}1BxcWH$uJQIW57&2xkwr& zU5?oMqJsUph4eXc8Y&o6K&&Zk{OE5Ny2cE~#6z3K>^b!tvmhzR?Y=}dyZ?r3mtm3P zRsBJ Date: Tue, 2 Jul 2024 13:25:16 +0200 Subject: [PATCH 010/109] Tidy --- vizro-core/examples/_dev/utils/_home.py | 236 +++++++++++++++++++++++- 1 file changed, 228 insertions(+), 8 deletions(-) diff --git a/vizro-core/examples/_dev/utils/_home.py b/vizro-core/examples/_dev/utils/_home.py index 550400a9e..14b605e49 100644 --- a/vizro-core/examples/_dev/utils/_home.py +++ b/vizro-core/examples/_dev/utils/_home.py @@ -11,9 +11,40 @@ vm.Container.add_type("components", HtmlIntro) vm.Container.add_type("components", FlexContainer) # HOMEPAGE ------------------------------------------------------------- -home_all = vm.Container(title="All", components=[vm.Card(text="""Placeholder""")]) +home_all = vm.Container( + title="All", + components=[ + FlexContainer( + title="", + components=[ + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + ], + ) + ], +) home_deviation = vm.Container( title="Deviation", + layout=vm.Layout(grid=[[0, 1, 1, 1]]), components=[ HtmlIntro( text=""" @@ -21,12 +52,39 @@ Often this reference point is zero, but you might also show a target or a long-term average. You can also use deviation to express a positive, neutral or negative sentiment. """ - ) + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + ], + ), ], ) home_correlation = vm.Container( title="Correlation", + layout=vm.Layout(grid=[[0, 1, 1, 1]]), components=[ HtmlIntro( text=""" @@ -34,12 +92,39 @@ make it clear to your audience whether or not the relationship is causal, i.e., whether one causes the other. """ - ) + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + ], + ), ], ) home_ranking = vm.Container( title="Ranking", + layout=vm.Layout(grid=[[0, 1, 1, 1]]), components=[ HtmlIntro( text=""" @@ -47,12 +132,39 @@ position of an item rather than its absolute or relative value. You might want to emphasise the most interesting points with highlighting or labels to ensure the reader understands what matters most. """ - ) + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + ], + ), ], ) home_distribution = vm.Container( title="Distribution", + layout=vm.Layout(grid=[[0, 1, 1, 1]]), components=[ HtmlIntro( text=""" @@ -135,6 +247,7 @@ home_time = vm.Container( title="Time", + layout=vm.Layout(grid=[[0, 1, 1, 1]]), components=[ HtmlIntro( text=""" @@ -142,24 +255,78 @@ select could be as short as seconds or as long as centuries. What matters most is selecting the correct period of time to best show your audience the message they need to take away. """ - ) + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + ], + ), ], ) home_part = vm.Container( title="Part-to-whole", + layout=vm.Layout(grid=[[0, 1, 1, 1]]), components=[ HtmlIntro( text=""" Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the size of the parts to be most important, a magnitude chart may be more appropriate. """ - ) + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + ], + ), ], ) home_flow = vm.Container( title="Flow", + layout=vm.Layout(grid=[[0, 1, 1, 1]]), components=[ HtmlIntro( text=""" @@ -167,17 +334,70 @@ state or condition. The flow might be steps in a logical sequence or movement between different geographical locations. """ - ) + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + ], + ), ], ) home_spatial = vm.Container( title="Spatial", + layout=vm.Layout(grid=[[0, 1, 1, 1]]), components=[ HtmlIntro( text=""" Spatial charts allow you to demonstrate precise locations or geographical patterns in your data. """ - ) + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + vm.Card( + text=""" + ![](assets/images/charts/bar.png#chart-icon) + + #### Bar + """ + ), + ], + ), ], ) From b5d73a3f50cf763b902307eab2636fed8c8c02a2 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 2 Jul 2024 15:32:00 +0200 Subject: [PATCH 011/109] Add chart images and create landing pages --- vizro-core/examples/_dev/app.py | 4 +- .../examples/_dev/assets/css/custom.css | 8 +- .../_dev/assets/images/charts/arc.svg | 25 + .../_dev/assets/images/charts/bar.png | Bin 4403 -> 0 bytes .../_dev/assets/images/charts/bar.svg | 20 + .../_dev/assets/images/charts/barcode.svg | 136 +++++ .../_dev/assets/images/charts/boxplot.svg | 78 +++ .../assets/images/charts/bubble-timeline.svg | 35 ++ .../_dev/assets/images/charts/bubble.svg | 32 ++ .../_dev/assets/images/charts/bullet.svg | 41 ++ .../_dev/assets/images/charts/butterfly.svg | 27 + .../_dev/assets/images/charts/chord.svg | 23 + .../_dev/assets/images/charts/choropleth.svg | 126 +++++ .../_dev/assets/images/charts/column-line.svg | 20 + .../_dev/assets/images/charts/column.svg | 20 + .../assets/images/charts/cumulative-curve.svg | 18 + .../assets/images/charts/diverging-bar.svg | 21 + .../_dev/assets/images/charts/donut.svg | 25 + .../_dev/assets/images/charts/dot-density.svg | 265 ++++++++++ .../_dev/assets/images/charts/dot-plot.svg | 30 ++ .../_dev/assets/images/charts/fan.svg | 21 + .../_dev/assets/images/charts/flow-map.svg | 80 +++ .../_dev/assets/images/charts/funnel.svg | 19 + .../_dev/assets/images/charts/gantt.svg | 20 + .../assets/images/charts/heatmap-matrix.svg | 179 +++++++ .../_dev/assets/images/charts/heatmap.svg | 27 + .../_dev/assets/images/charts/histogram.svg | 25 + .../_dev/assets/images/charts/line.svg | 17 + .../_dev/assets/images/charts/lollipop.svg | 26 + .../_dev/assets/images/charts/marimekko.svg | 27 + .../_dev/assets/images/charts/network.svg | 44 ++ .../assets/images/charts/ordered-bubble.svg | 20 + .../_dev/assets/images/charts/parallel.svg | 26 + .../_dev/assets/images/charts/pictogram.svg | 63 +++ .../_dev/assets/images/charts/pie.svg | 29 ++ .../images/charts/proportional-symbol.svg | 467 ++++++++++++++++++ .../_dev/assets/images/charts/radar.svg | 33 ++ .../_dev/assets/images/charts/radial.svg | 18 + .../_dev/assets/images/charts/sankey.svg | 20 + .../assets/images/charts/scatter-matrix.svg | 176 +++++++ .../_dev/assets/images/charts/scatter.svg | 56 +++ .../_dev/assets/images/charts/slope.svg | 32 ++ .../_dev/assets/images/charts/sparkline.svg | 33 ++ .../assets/images/charts/stacked-column.svg | 27 + .../assets/images/charts/stepped-line.svg | 19 + .../_dev/assets/images/charts/surplus.svg | 29 ++ .../_dev/assets/images/charts/treemap.svg | 24 + .../_dev/assets/images/charts/venn.svg | 18 + .../_dev/assets/images/charts/violin.svg | 131 +++++ .../_dev/assets/images/charts/waterfall.svg | 20 + .../_dev/assets/images/icons/hypotheses.svg | 3 - vizro-core/examples/_dev/utils/_home.py | 367 +++++++------- vizro-core/examples/_dev/utils/_magnitude.py | 64 ++- 53 files changed, 2901 insertions(+), 213 deletions(-) create mode 100644 vizro-core/examples/_dev/assets/images/charts/arc.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/bar.png create mode 100644 vizro-core/examples/_dev/assets/images/charts/bar.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/barcode.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/boxplot.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/bubble-timeline.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/bubble.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/bullet.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/butterfly.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/chord.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/choropleth.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/column-line.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/column.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/cumulative-curve.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/diverging-bar.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/donut.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/dot-density.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/dot-plot.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/fan.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/flow-map.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/funnel.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/gantt.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/heatmap-matrix.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/heatmap.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/histogram.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/line.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/lollipop.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/marimekko.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/network.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/ordered-bubble.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/parallel.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/pictogram.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/pie.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/proportional-symbol.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/radar.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/radial.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/sankey.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/scatter-matrix.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/scatter.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/slope.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/sparkline.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/stacked-column.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/stepped-line.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/surplus.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/treemap.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/venn.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/violin.svg create mode 100644 vizro-core/examples/_dev/assets/images/charts/waterfall.svg delete mode 100644 vizro-core/examples/_dev/assets/images/icons/hypotheses.svg diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index ea7baba60..305223b3a 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -28,14 +28,14 @@ dashboard = vm.Dashboard( - pages=[homepage, bar], + pages=[homepage, bar, column], navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ vm.NavLink(label="Overview", pages=["Overview"], icon="Home"), vm.NavLink( label="Magnitude", - pages=["Bar Chart"], + pages={"Magnitude": ["Bar", "Column"]}, icon="Bar Chart", ), ] diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index 5a25c9f53..de80d718d 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -37,19 +37,19 @@ code.language-python.hljs { } .flex-container .card { - height: 200px; + height: 208px; width: 176px; } .flex-container { display: flex; flex-wrap: wrap; - gap: 16px; + gap: 20px; } .flex-container h4 { color: var(--text-secondary); - margin-bottom: 0; - margin-top: 8px; + margin: 0; + padding-top: 12px; text-align: center; } diff --git a/vizro-core/examples/_dev/assets/images/charts/arc.svg b/vizro-core/examples/_dev/assets/images/charts/arc.svg new file mode 100644 index 000000000..35a5c81f8 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/arc.svg @@ -0,0 +1,25 @@ + + + + Group 6 Copy 34 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/bar.png b/vizro-core/examples/_dev/assets/images/charts/bar.png deleted file mode 100644 index 36578bb894bfefcd5ce1aaf4f1661bf3d9d68423..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4403 zcmc&$cT^Mmww@4#5LzgQA}v8U3L-(c0-*&GL_)7p6lv0g&_bkFLy=BEEEEw%KoBWP z2PpzV1Vp4uM~ZZiD&mdjoOh1vzP0XJ@2@v&?b+Y#Z-0BwZ~tay&20m{OU%%dPyhg! zahmEzR8OK>7=(^`?iy$=0|0253l?jD!(!nE-X4xFZVmvTdHc>?dV|yvu8#G+yl4{e zXy|>$S1whpMNrzci=rYR3@pMEIs^)$#VfWwO4u|q!C@B$wWMp_K4SuK5ZB$(xxJOPcX zj5Zc45};G^@-Vop-0^t(I@md&-d^_k&iaoZW~rY&D~18pX2@yJ^5G@OL(GxD75Fpblq18!&~JGfnlqhOpQ@wLD5V>T z1izHH1^KfVBy3bVjM=$kF`_$!gGRyaL7?u@52IXROTLPM=O&_i z>Mv<-9tBCv!o9OPQmV@FD(MC+ssuKmD{0<7AP|(pN%Q_=I~N1N(SC7BhzU*uO{N!D zu?r9Z-9XamvwtPb{Dhfb3vTy;oe6iI2dQDiwqHnz*C{9GgI%^7Wj0 z5i-+3)vyUBvz7}RhSdy>w3DRuX1o30l%ip9>09xrboF(f1UlWs@fFV!C}6owS)i=fC1ovECc*i&RvSyCm*g5-(R&g{+uynblItYoR4*D53$smRiQpah z4wPshc-G@gZ<>AzG6ntnq$v6sJm01WR+wC5@Z3{RtvJT$Uk2C3pNhE~Dn0VE-mD-; zv14x+y~Gu&6`HwVEObY#?iXDx{!|d8e^3F{ZM!0B>X4yT(PeD<^4aYhF<+nq4bRL> ztcyB}P(@_}u>*Pq%0|%xx*xFvX3vBS)=h-^-+$Z~fH|*xs4m{LG&bzFlDSxMb-R8( zhRc*<8kcWcLR4E8)eUdY$?Fq$S$%1UC*slgl--b3$yJ;HHVcwPlckZBU#o6a>z?ag zDlgyb5r_+jUo#R5rR| zD>ut5T>I^|2M0f_cJzFR(rUMMO9m9HS=C3wxbI=OCRss+R?z@1JB;VwJdePLq9$*e4+ zl8^GdeYK{pM6u(0@;6xPy_6RDF27mZCB#?x)$`L!b2X#ex!hfpp`zg;%9S3)mb$KQ z_mdL!$@&ew1uwGJwI<_2cwPgq@gc!F%)e(?bnx%^Zdk8Q3aUaOj0I3XL1*?eOm0@R z$Sv!a!F{Q1hj9mS8MjnnGR}eT`)yjM-c3znN)gS70R$5B9Ag%FlVsSM9xcGY$GQiZ zWIvW~IfLQsEUh>#SDlXh zj{JwyluhG}TfB-{yXlvp0|%%JFx0pY0SKn#o*Vw+27QnfF&-_Qg++ zHWM3{Zwzq^<(IrRwXra`ykU#|7&VAVXdy;|(fh{+)*@CS5?{s^>%AtE7KQxLH}T~o zFJ1eq?DRGh*eT>#GBR)F10UMryU9WS$N4wiR##T4R>ot;yCwrdGsY@MrANw-%EMRV zD&_9{RvQKE--Av>{Y@N_`A>*coMf zn1A!((`-rihzDB_G%`{%+RmLnr|fjp`|_1SRrYcBQB|wctKQ2GjpeI8D{Tf%9~3ek zaJNfBB^w*ld|Yzy{$sP0zPsy{(Jy_i7^=NjpY;w<1mY7Jhpv`nHLUr3f5&{7FrTq2 zm!Yt#pg&n&N35kZ7A;k_uBN+ptPN&IDlY_%2O!5cYY97&+iTr{aqByulB$2?AWQU* z!nSSpZAV+HlDq|VRj%#PZa>*CeAgfA^riPkh}?05p&L?VXnkPvKxyS*7PQ+`gf2hc zmp0#zILfutbS-cn4%lCb>DAn$h$88&8LsIzN*)^T_KthRPh=iazQ5?{TkLDDYN;}& zzGOx9=%eOc?3nq+aK+}=&Cc61N#a7T=sq+tDDhC~Uo|s~Yuca9W?wv?q-j*Xul4W& zdnu{-{$(IiKJy-=sjd}Bwg+-p0dkD2xI{Oj8}DeM$_(`{YZeiz_h1jBY?lyCDd#WeM##14aQ^C zG2_+?hJ{w7HkkSkd)dJp=cua-h*L2H07bh1v{VG5+DWPb0GJ#F&{I7-)zoun{$@!z z;J^j_u{a#n8{2z3IJgs>J$x2>#$HoP4Z4_^`pwb&bE|)GK9SXCEI=1tikf*H_Y4M$*IE33(ocLLsH3k8U(7!pe^HwMqLh*TRrw3^ zpGs4LgE!U#Pi^U=^3TrvCH|HCOQ?kWx$<8o@#mQTh*IaQ0#!o(y=N-WLYT1 zQ&%(b1FdE%yK}0+G&&^6Sr14;Y^rwCjOLh6VWcoHT=*>nbqh=*;;pCJgpd%i25ysJ zY$!xiGxU?D`4yve=bPUX>T18>=dwo%*8(O}9evv?6a)8!z8?gKsBCm;+j#iyl^^ik z4c(-tm4v`)Px8<}Y(1q^A^cLbu$C#CFqpgz1Wsyh1`wW2FjdH{TOiC-7$OWtM-L`7 zfv^CAiG>al4vqpaJp4>B8hR!WNlKmvPRsItEHw3$*UF*P{OV`t#PRed@0!(=fmt66 zKRxl;Qe zG*d6esO%HX!i6kVww94NyVQ3+S zBN1yd>NR8j%h}%e5LZ;aSYAXPM{e=r2;V^M(IA5aHoQly^+ka09;IS#F1nF zbq7cvZQUe}t;Iw3KZwy~*uzOVmk1n@)&~<4%B(vid`A}1BxcWH$uJQIW57&2xkwr& zU5?oMqJsUph4eXc8Y&o6K&&Zk{OE5Ny2cE~#6z3K>^b!tvmhzR?Y=}dyZ?r3mtm3P zRsBJ + + + Group 6 Copy 10 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/barcode.svg b/vizro-core/examples/_dev/assets/images/charts/barcode.svg new file mode 100644 index 000000000..cbe2ffc23 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/barcode.svg @@ -0,0 +1,136 @@ + + + + Group 6 Copy 14 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/boxplot.svg b/vizro-core/examples/_dev/assets/images/charts/boxplot.svg new file mode 100644 index 000000000..224deddd8 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/boxplot.svg @@ -0,0 +1,78 @@ + + + + Group 6 Copy 15 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/_dev/assets/images/charts/bubble-timeline.svg new file mode 100644 index 000000000..b98e5af32 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/bubble-timeline.svg @@ -0,0 +1,35 @@ + + + + Group 6 Copy 22 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/bubble.svg b/vizro-core/examples/_dev/assets/images/charts/bubble.svg new file mode 100644 index 000000000..a939659fc --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/bubble.svg @@ -0,0 +1,32 @@ + + + + Group 6 Copy 3 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/bullet.svg b/vizro-core/examples/_dev/assets/images/charts/bullet.svg new file mode 100644 index 000000000..d7f708173 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/bullet.svg @@ -0,0 +1,41 @@ + + + + Group 6 Copy 33 + Created with Sketch. + + + + + + + + + + + + + + + + + + 0 + + + 2 + + + 4 + + + 6 + + + 8 + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/butterfly.svg b/vizro-core/examples/_dev/assets/images/charts/butterfly.svg new file mode 100644 index 000000000..5f0281a60 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/butterfly.svg @@ -0,0 +1,27 @@ + + + + Group 6 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/chord.svg b/vizro-core/examples/_dev/assets/images/charts/chord.svg new file mode 100644 index 000000000..8eecba457 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/chord.svg @@ -0,0 +1,23 @@ + + + + Group 6 Copy 29 + Created with Sketch. + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/choropleth.svg b/vizro-core/examples/_dev/assets/images/charts/choropleth.svg new file mode 100644 index 000000000..6a00da7bd --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/choropleth.svg @@ -0,0 +1,126 @@ + + + + Group 6 Copy 44 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/column-line.svg b/vizro-core/examples/_dev/assets/images/charts/column-line.svg new file mode 100644 index 000000000..c4af7f626 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/column-line.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 4 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/column.svg b/vizro-core/examples/_dev/assets/images/charts/column.svg new file mode 100644 index 000000000..fca0509d6 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/column.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 11 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/_dev/assets/images/charts/cumulative-curve.svg new file mode 100644 index 000000000..93cb42b5b --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/cumulative-curve.svg @@ -0,0 +1,18 @@ + + + + Group 6 Copy 17 + Created with Sketch. + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/diverging-bar.svg b/vizro-core/examples/_dev/assets/images/charts/diverging-bar.svg new file mode 100644 index 000000000..bb0b80977 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/diverging-bar.svg @@ -0,0 +1,21 @@ + + + + Group 6 Copy + Created with Sketch. + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/donut.svg b/vizro-core/examples/_dev/assets/images/charts/donut.svg new file mode 100644 index 000000000..df72ab3ca --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/donut.svg @@ -0,0 +1,25 @@ + + + + Group 6 Copy 24 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/dot-density.svg b/vizro-core/examples/_dev/assets/images/charts/dot-density.svg new file mode 100644 index 000000000..f73372105 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/dot-density.svg @@ -0,0 +1,265 @@ + + + + Group 6 Copy 5 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/dot-plot.svg b/vizro-core/examples/_dev/assets/images/charts/dot-plot.svg new file mode 100644 index 000000000..6640e2813 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/dot-plot.svg @@ -0,0 +1,30 @@ + + + + Group 6 Copy 13 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/fan.svg b/vizro-core/examples/_dev/assets/images/charts/fan.svg new file mode 100644 index 000000000..cd0c938c3 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/fan.svg @@ -0,0 +1,21 @@ + + + + Group 6 Copy 39 + Created with Sketch. + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/flow-map.svg b/vizro-core/examples/_dev/assets/images/charts/flow-map.svg new file mode 100644 index 000000000..238505d2a --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/flow-map.svg @@ -0,0 +1,80 @@ + + + + Group 6 Copy 6 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/funnel.svg b/vizro-core/examples/_dev/assets/images/charts/funnel.svg new file mode 100644 index 000000000..4d33728ad --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/funnel.svg @@ -0,0 +1,19 @@ + + + + Group 6 Copy 36 + Created with Sketch. + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/gantt.svg b/vizro-core/examples/_dev/assets/images/charts/gantt.svg new file mode 100644 index 000000000..543e0ed85 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/gantt.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 21 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/heatmap-matrix.svg b/vizro-core/examples/_dev/assets/images/charts/heatmap-matrix.svg new file mode 100644 index 000000000..84c13f73a --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/heatmap-matrix.svg @@ -0,0 +1,179 @@ + + + + Group 6 Copy 40 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + v1 + + + 0.1 + + + 0.5 + + + v1 + + + v2 + + + v3 + + + v4 + + + v5 + + + v2 + + + v3 + + + v4 + + + v5 + + + 1.0 + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/heatmap.svg b/vizro-core/examples/_dev/assets/images/charts/heatmap.svg new file mode 100644 index 000000000..fb40db538 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/heatmap.svg @@ -0,0 +1,27 @@ + + + + Group 6 Copy 5 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/histogram.svg b/vizro-core/examples/_dev/assets/images/charts/histogram.svg new file mode 100644 index 000000000..b61f86c45 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/histogram.svg @@ -0,0 +1,25 @@ + + + + Group 6 Copy 12 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/line.svg b/vizro-core/examples/_dev/assets/images/charts/line.svg new file mode 100644 index 000000000..e6a042d24 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/line.svg @@ -0,0 +1,17 @@ + + + + Group 6 Copy 19 + Created with Sketch. + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/lollipop.svg b/vizro-core/examples/_dev/assets/images/charts/lollipop.svg new file mode 100644 index 000000000..f04bc8ed7 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/lollipop.svg @@ -0,0 +1,26 @@ + + + + Group 6 Copy 8 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/marimekko.svg b/vizro-core/examples/_dev/assets/images/charts/marimekko.svg new file mode 100644 index 000000000..38fb0de77 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/marimekko.svg @@ -0,0 +1,27 @@ + + + + Group 6 Copy 26 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/network.svg b/vizro-core/examples/_dev/assets/images/charts/network.svg new file mode 100644 index 000000000..604485ef0 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/network.svg @@ -0,0 +1,44 @@ + + + + Group 6 Copy 32 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/_dev/assets/images/charts/ordered-bubble.svg new file mode 100644 index 000000000..bef4e6929 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/ordered-bubble.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 7 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/parallel.svg b/vizro-core/examples/_dev/assets/images/charts/parallel.svg new file mode 100644 index 000000000..16c16d68c --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/parallel.svg @@ -0,0 +1,26 @@ + + + + Group 6 Copy 43 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/pictogram.svg b/vizro-core/examples/_dev/assets/images/charts/pictogram.svg new file mode 100644 index 000000000..c7a787b0a --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/pictogram.svg @@ -0,0 +1,63 @@ + + + + Group 6 Copy 42 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/pie.svg b/vizro-core/examples/_dev/assets/images/charts/pie.svg new file mode 100644 index 000000000..c32e7c8b1 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/pie.svg @@ -0,0 +1,29 @@ + + + + Group 6 Copy 23 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/proportional-symbol.svg b/vizro-core/examples/_dev/assets/images/charts/proportional-symbol.svg new file mode 100644 index 000000000..cade9887d --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/proportional-symbol.svg @@ -0,0 +1,467 @@ + + + + Group 6 Copy 4 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/radar.svg b/vizro-core/examples/_dev/assets/images/charts/radar.svg new file mode 100644 index 000000000..5906b0740 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/radar.svg @@ -0,0 +1,33 @@ + + + + Group 6 Copy 38 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/radial.svg b/vizro-core/examples/_dev/assets/images/charts/radial.svg new file mode 100644 index 000000000..0b8f96a90 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/radial.svg @@ -0,0 +1,18 @@ + + + + Group 6 Copy 37 + Created with Sketch. + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/sankey.svg b/vizro-core/examples/_dev/assets/images/charts/sankey.svg new file mode 100644 index 000000000..9e9ad9d68 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/sankey.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 30 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/_dev/assets/images/charts/scatter-matrix.svg new file mode 100644 index 000000000..add1a0995 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/scatter-matrix.svg @@ -0,0 +1,176 @@ + + + + Group 6 Copy 41 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + v1 + + + v2 + + + v3 + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/scatter.svg b/vizro-core/examples/_dev/assets/images/charts/scatter.svg new file mode 100644 index 000000000..3993f505f --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/scatter.svg @@ -0,0 +1,56 @@ + + + + Group 6 Copy 2 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/slope.svg b/vizro-core/examples/_dev/assets/images/charts/slope.svg new file mode 100644 index 000000000..01b770af5 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/slope.svg @@ -0,0 +1,32 @@ + + + + Group 6 Copy 9 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/sparkline.svg b/vizro-core/examples/_dev/assets/images/charts/sparkline.svg new file mode 100644 index 000000000..ed269cd53 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/sparkline.svg @@ -0,0 +1,33 @@ + + + + Group 6 Copy 35 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/stacked-column.svg b/vizro-core/examples/_dev/assets/images/charts/stacked-column.svg new file mode 100644 index 000000000..7afbe494c --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/stacked-column.svg @@ -0,0 +1,27 @@ + + + + Group 6 Copy 25 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/stepped-line.svg b/vizro-core/examples/_dev/assets/images/charts/stepped-line.svg new file mode 100644 index 000000000..5bb9c361e --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/stepped-line.svg @@ -0,0 +1,19 @@ + + + + Group 6 Copy 18 + Created with Sketch. + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/surplus.svg b/vizro-core/examples/_dev/assets/images/charts/surplus.svg new file mode 100644 index 000000000..5f6baaf23 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/surplus.svg @@ -0,0 +1,29 @@ + + + + Group 6 Copy 6 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/treemap.svg b/vizro-core/examples/_dev/assets/images/charts/treemap.svg new file mode 100644 index 000000000..a09929e94 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/treemap.svg @@ -0,0 +1,24 @@ + + + + Group 6 Copy 27 + Created with Sketch. + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/venn.svg b/vizro-core/examples/_dev/assets/images/charts/venn.svg new file mode 100644 index 000000000..753928cf7 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/venn.svg @@ -0,0 +1,18 @@ + + + + Group 6 Copy 28 + Created with Sketch. + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/violin.svg b/vizro-core/examples/_dev/assets/images/charts/violin.svg new file mode 100644 index 000000000..537b0ecfe --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/violin.svg @@ -0,0 +1,131 @@ + + + + Group 6 Copy 16 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/charts/waterfall.svg b/vizro-core/examples/_dev/assets/images/charts/waterfall.svg new file mode 100644 index 000000000..3b9072189 --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/charts/waterfall.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 31 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_dev/assets/images/icons/hypotheses.svg b/vizro-core/examples/_dev/assets/images/icons/hypotheses.svg deleted file mode 100644 index 505d7c7cd..000000000 --- a/vizro-core/examples/_dev/assets/images/icons/hypotheses.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/vizro-core/examples/_dev/utils/_home.py b/vizro-core/examples/_dev/utils/_home.py index 14b605e49..496d4008e 100644 --- a/vizro-core/examples/_dev/utils/_home.py +++ b/vizro-core/examples/_dev/utils/_home.py @@ -10,6 +10,101 @@ vm.Page.add_type("components", FlexContainer) vm.Container.add_type("components", HtmlIntro) vm.Container.add_type("components", FlexContainer) + + +DEVIATION_CHARTS = ["line", "scatter", "slope", "lollipop", "diverging-bar"] +CORRELATION_CHARTS = ["scatter"] +RANKING_CHARTS = [ + "column", + "stacked-column", + "ordered-bubble", + "column-line", + "bar", + "donut", + "arc", + "lollipop", + "waterfall", + "diverging-bar", + "boxplot", +] +DISTRIBUTION_CHARTS = [ + "histogram", + "butterfly", + "pie", + "donut", + "arc", + "violin", + "lollipop", + "cumulative-curve", + "waterfall", + "treemap", + "venn", + "barcode", +] +MAGNITUDE_CHARTS = [ + "column", + "marimekko", + "stacked-column", + "ordered-bubble", + "column-line", + "surplus", + "butterfly", + "bubble-timeline", + "bar", + "pie", + "donut", + "arc", + "violin", + "slope", + "lollipop", + "cumulative-curve", + "waterfall", + "treemap", + "venn", + "diverging-bar", + "bullet", + "dot-plot", +] +TIME_CHARTS = [ + "column", + "gantt", + "column-line", + "bubble-timeline", + "bar", + "line", + "scatter", + "lollipop", + "diverging-bar", + "stepped-line", + "sparkline", +] +PART_TO_WHOLE_CHARTS = [ + "marimekko", + "stacked-column", + "column-line", + "pie", + "donut", + "arc", + "waterfall", + "treemap", + "venn", +] +FLOW_CHARTS = ["gantt", "line", "slope", "stepped-line"] +SPATIAL_CHARTS = ["choropleth", "dot-density", "flow-map"] + +ALL_CHARTS = ( + DEVIATION_CHARTS + + CORRELATION_CHARTS + + RANKING_CHARTS + + DISTRIBUTION_CHARTS + + MAGNITUDE_CHARTS + + TIME_CHARTS + + PART_TO_WHOLE_CHARTS + + FLOW_CHARTS + + SPATIAL_CHARTS +) + + # HOMEPAGE ------------------------------------------------------------- home_all = vm.Container( title="All", @@ -18,33 +113,21 @@ title="", components=[ vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) - #### Bar - """ - ), + #### {chart.replace("-", " ").title()} + """ + ) + for chart in set(ALL_CHARTS) ], ) ], ) + home_deviation = vm.Container( title="Deviation", - layout=vm.Layout(grid=[[0, 1, 1, 1]]), + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ HtmlIntro( text=""" @@ -57,26 +140,13 @@ title="", components=[ vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), + #### {chart.replace("-", " ").title()} + """ + ) + for chart in DEVIATION_CHARTS ], ), ], @@ -84,7 +154,7 @@ home_correlation = vm.Container( title="Correlation", - layout=vm.Layout(grid=[[0, 1, 1, 1]]), + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ HtmlIntro( text=""" @@ -97,26 +167,13 @@ title="", components=[ vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) - #### Bar - """ - ), + #### {chart.replace("-", " ").title()} + """ + ) + for chart in CORRELATION_CHARTS ], ), ], @@ -124,7 +181,7 @@ home_ranking = vm.Container( title="Ranking", - layout=vm.Layout(grid=[[0, 1, 1, 1]]), + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ HtmlIntro( text=""" @@ -137,26 +194,13 @@ title="", components=[ vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), + #### {chart.replace("-", " ").title()} + """ + ) + for chart in RANKING_CHARTS ], ), ], @@ -164,7 +208,7 @@ home_distribution = vm.Container( title="Distribution", - layout=vm.Layout(grid=[[0, 1, 1, 1]]), + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ HtmlIntro( text=""" @@ -179,26 +223,13 @@ title="", components=[ vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), + #### {chart.replace("-", " ").title()} + """ + ) + for chart in DISTRIBUTION_CHARTS ], ), ], @@ -206,7 +237,7 @@ home_magnitude = vm.Container( title="Magnitude", - layout=vm.Layout(grid=[[0, 1, 1, 1]]), + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ HtmlIntro( text=""" @@ -220,26 +251,14 @@ title="", components=[ vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) + + #### {chart.replace("-", " ").title()} + """, + href=f"/{chart}", + ) + for chart in MAGNITUDE_CHARTS ], ), ], @@ -247,7 +266,7 @@ home_time = vm.Container( title="Time", - layout=vm.Layout(grid=[[0, 1, 1, 1]]), + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ HtmlIntro( text=""" @@ -260,26 +279,13 @@ title="", components=[ vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), + #### {chart.replace("-", " ").title()} + """ + ) + for chart in TIME_CHARTS ], ), ], @@ -287,7 +293,7 @@ home_part = vm.Container( title="Part-to-whole", - layout=vm.Layout(grid=[[0, 1, 1, 1]]), + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ HtmlIntro( text=""" @@ -299,26 +305,13 @@ title="", components=[ vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), + #### {chart.replace("-", " ").title()} + """ + ) + for chart in PART_TO_WHOLE_CHARTS ], ), ], @@ -326,7 +319,7 @@ home_flow = vm.Container( title="Flow", - layout=vm.Layout(grid=[[0, 1, 1, 1]]), + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ HtmlIntro( text=""" @@ -339,26 +332,13 @@ title="", components=[ vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), + #### {chart.replace("-", " ").title()} + """ + ) + for chart in FLOW_CHARTS ], ), ], @@ -366,7 +346,7 @@ home_spatial = vm.Container( title="Spatial", - layout=vm.Layout(grid=[[0, 1, 1, 1]]), + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ HtmlIntro( text=""" @@ -377,26 +357,13 @@ title="", components=[ vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) - - #### Bar - """ - ), - vm.Card( - text=""" - ![](assets/images/charts/bar.png#chart-icon) + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) - #### Bar - """ - ), + #### {chart.replace("-", " ").title()} + """ + ) + for chart in SPATIAL_CHARTS ], ), ], diff --git a/vizro-core/examples/_dev/utils/_magnitude.py b/vizro-core/examples/_dev/utils/_magnitude.py index 8dcf73c9c..00aa6938b 100644 --- a/vizro-core/examples/_dev/utils/_magnitude.py +++ b/vizro-core/examples/_dev/utils/_magnitude.py @@ -12,7 +12,7 @@ # CHART PAGES ------------------------------------------------------------- bar = vm.Page( - title="Bar Chart", + title="Bar", layout=vm.Layout( grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4, col_gap="80px", @@ -29,7 +29,7 @@   - ### When to use the bart chart? + ### When to use the bar chart? Select a Bar chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents **how many?** in each category. You can @@ -39,7 +39,9 @@ """ ), - vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'China'"), x="year", y="lifeExp")), + vm.Graph( + figure=px.bar(data_frame=gapminder.query("country == 'China'"), y="year", x="lifeExp", orientation="h") + ), CodeClipboard( text=""" ```python @@ -50,7 +52,7 @@ gapminder = px.data.gapminder() page = vm.Page( - title="Bar Chart", + title="Bar", components=[ vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'Germany'"), x="year", y="pop")) ] @@ -64,3 +66,57 @@ ), ], ) + + +column = vm.Page( + title="Column", + layout=vm.Layout( + grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4, + col_gap="80px", + ), + components=[ + vm.Card( + text=""" + + ### What is a column chart? + + A Column chart is a vertical Bar chart, with column lengths varying according to the + categorical value they represent. The scale is presented on the y-axis, starting with zero. + +   + + ### When to use the column chart? + + Select a Column chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents `how many?` in each category. You can + arrange your columns in any order to fit the message you wish to emphasise. Be mindful of + labelling clearly when you have a large number of columns. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + + """ + ), + vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'China'"), x="year", y="lifeExp")), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + gapminder = px.data.gapminder() + + page = vm.Page( + title="Column", + components=[ + vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'China'"), x="year", y="pop")) + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) From 781c8a13d35840cea24a94cfb6713b0a0ca31cbe Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 3 Jul 2024 14:05:18 +0200 Subject: [PATCH 012/109] Replace `HtmlIntro` with vizro-way of doing cards --- .../examples/_dev/assets/css/custom.css | 6 +++++ vizro-core/examples/_dev/utils/_charts.py | 9 ++++---- vizro-core/examples/_dev/utils/_home.py | 22 +++++++++---------- vizro-core/examples/_dev/utils/_magnitude.py | 4 ++-- vizro-core/src/vizro/static/css/variables.css | 4 ++++ 5 files changed, 28 insertions(+), 17 deletions(-) diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index de80d718d..b0837ccce 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -53,3 +53,9 @@ code.language-python.hljs { padding-top: 12px; text-align: center; } + + +.card:has(.custom-text-card) { + padding: 0; + background: none; +} diff --git a/vizro-core/examples/_dev/utils/_charts.py b/vizro-core/examples/_dev/utils/_charts.py index 72a98aef9..441b26aec 100644 --- a/vizro-core/examples/_dev/utils/_charts.py +++ b/vizro-core/examples/_dev/utils/_charts.py @@ -31,12 +31,13 @@ def build(self): ) -class HtmlIntro(vm.VizroBaseModel): - type: Literal["html_intro"] = "html_intro" - text: str +class CustomTextCard(vm.Card): + type: Literal["custom_text_card"] = "custom_text_card" def build(self): - return html.H4(self.text, className="html-intro") + text_card = super().build() + text_card[self.id].className = "custom-text-card" + return text_card class FlexContainer(vm.Container): diff --git a/vizro-core/examples/_dev/utils/_home.py b/vizro-core/examples/_dev/utils/_home.py index 496d4008e..fdd905e6e 100644 --- a/vizro-core/examples/_dev/utils/_home.py +++ b/vizro-core/examples/_dev/utils/_home.py @@ -3,12 +3,12 @@ import vizro.models as vm import vizro.plotly.express as px -from ._charts import CodeClipboard, FlexContainer, HtmlIntro +from ._charts import CodeClipboard, FlexContainer, CustomTextCard gapminder = px.data.gapminder() vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) -vm.Container.add_type("components", HtmlIntro) +vm.Container.add_type("components", CustomTextCard) vm.Container.add_type("components", FlexContainer) @@ -129,7 +129,7 @@ title="Deviation", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - HtmlIntro( + CustomTextCard( text=""" Deviation enables you to draw attention to variations (+/-) from a fixed reference point. Often this reference point is zero, but you might also show a target or a long-term average. @@ -156,7 +156,7 @@ title="Correlation", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - HtmlIntro( + CustomTextCard( text=""" Correlation helps you show the relationship between two or more variables. It is important that you make it clear to your audience whether or not the relationship is causal, i.e., whether one causes the @@ -183,7 +183,7 @@ title="Ranking", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - HtmlIntro( + CustomTextCard( text=""" Ranking enables you to present items in an ordered list. You will use this when you want to highlight the position of an item rather than its absolute or relative value. You might want to emphasise the most @@ -210,7 +210,7 @@ title="Distribution", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - HtmlIntro( + CustomTextCard( text=""" Distribution helps you to present all the possible values (or intervals) of your data and how often they occur. You can organise the data to show the number or percentage of items in a specified group, what shape @@ -239,7 +239,7 @@ title="Magnitude", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - HtmlIntro( + CustomTextCard( text=""" Magnitude allows you to emphasise size comparisons of ‘counted’ items in your data set. You can show relative comparisons (whether something is larger or smaller) or absolute differences (where the nuances @@ -268,7 +268,7 @@ title="Time", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - HtmlIntro( + CustomTextCard( text=""" Time helps you draw attention to important trends emerging over a specified period. The time period you select could be as short as seconds or as long as centuries. What matters most is selecting the correct @@ -295,7 +295,7 @@ title="Part-to-whole", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - HtmlIntro( + CustomTextCard( text=""" Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the size of the parts to be most important, a magnitude chart may be more appropriate. @@ -321,7 +321,7 @@ title="Flow", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - HtmlIntro( + CustomTextCard( text=""" With flow charts, you can highlight the quantity or the intensity of the movement between more than one state or condition. The flow might be steps in a logical sequence or movement between different geographical @@ -348,7 +348,7 @@ title="Spatial", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - HtmlIntro( + CustomTextCard( text=""" Spatial charts allow you to demonstrate precise locations or geographical patterns in your data. """ diff --git a/vizro-core/examples/_dev/utils/_magnitude.py b/vizro-core/examples/_dev/utils/_magnitude.py index 00aa6938b..01c4e8a6e 100644 --- a/vizro-core/examples/_dev/utils/_magnitude.py +++ b/vizro-core/examples/_dev/utils/_magnitude.py @@ -3,12 +3,12 @@ import vizro.models as vm import vizro.plotly.express as px -from ._charts import CodeClipboard, FlexContainer, HtmlIntro +from ._charts import CodeClipboard, FlexContainer, CustomTextCard gapminder = px.data.gapminder() vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) -vm.Container.add_type("components", HtmlIntro) +vm.Container.add_type("components", CustomTextCard) # CHART PAGES ------------------------------------------------------------- bar = vm.Page( diff --git a/vizro-core/src/vizro/static/css/variables.css b/vizro-core/src/vizro/static/css/variables.css index a447adfb4..7cca0486e 100644 --- a/vizro-core/src/vizro/static/css/variables.css +++ b/vizro-core/src/vizro/static/css/variables.css @@ -89,6 +89,8 @@ --status-success: var(--status-dark-mode-success); --tags-text-color: var(--tags-dark-mode-text-color); --status-warning: var(--status-dark-mode-warning); + --text-code-string: #95c2e7; + --text-code-keyword: #f4766e; } .vizro_light { @@ -154,4 +156,6 @@ --tags-text-color: var(--tags-light-mode-text-color); --status-warning: var(--status-light-mode-warning); --inverse-color: invert(100%); + --text-code-string: #0a3069; + --text-code-keyword: #d12d39; } From b6a8af72f2e3666f2a6bb18e3e1ce3d46895f43a Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 3 Jul 2024 14:05:44 +0200 Subject: [PATCH 013/109] Change code highlighting colors --- vizro-core/examples/_dev/assets/css/custom.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index b0837ccce..693a61782 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -13,21 +13,25 @@ img[src*="#chart-icon"] { top: 12px; } +code.language-python.hljs { + padding: 0; +} + .hljs { background: unset; color: unset; -} - -code.language-python.hljs { - padding: 0; + font-family: unset; } .hljs-string { - color: #1a85ff; + color: var(--text-code-string); + font-family: unset; + } .hljs-keyword { - color: #d41159; + color: var(--text-code-keyword); + font-family: unset; } .html-intro { From 5d322fa2b6b4584f79dd2cfd45281f4f78b9472d Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 3 Jul 2024 12:10:41 +0000 Subject: [PATCH 014/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/_dev/assets/css/custom.css | 4 +--- vizro-core/examples/_dev/utils/_home.py | 2 +- vizro-core/examples/_dev/utils/_magnitude.py | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index 693a61782..1bf027f9b 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -26,7 +26,6 @@ code.language-python.hljs { .hljs-string { color: var(--text-code-string); font-family: unset; - } .hljs-keyword { @@ -58,8 +57,7 @@ code.language-python.hljs { text-align: center; } - .card:has(.custom-text-card) { - padding: 0; background: none; + padding: 0; } diff --git a/vizro-core/examples/_dev/utils/_home.py b/vizro-core/examples/_dev/utils/_home.py index fdd905e6e..d008139e2 100644 --- a/vizro-core/examples/_dev/utils/_home.py +++ b/vizro-core/examples/_dev/utils/_home.py @@ -3,7 +3,7 @@ import vizro.models as vm import vizro.plotly.express as px -from ._charts import CodeClipboard, FlexContainer, CustomTextCard +from ._charts import CodeClipboard, CustomTextCard, FlexContainer gapminder = px.data.gapminder() vm.Page.add_type("components", CodeClipboard) diff --git a/vizro-core/examples/_dev/utils/_magnitude.py b/vizro-core/examples/_dev/utils/_magnitude.py index 01c4e8a6e..5a3385cbd 100644 --- a/vizro-core/examples/_dev/utils/_magnitude.py +++ b/vizro-core/examples/_dev/utils/_magnitude.py @@ -3,7 +3,7 @@ import vizro.models as vm import vizro.plotly.express as px -from ._charts import CodeClipboard, FlexContainer, CustomTextCard +from ._charts import CodeClipboard, CustomTextCard, FlexContainer gapminder = px.data.gapminder() vm.Page.add_type("components", CodeClipboard) From d475bb688514c00b9400755aa89b9ac1306ef040 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 3 Jul 2024 14:18:26 +0200 Subject: [PATCH 015/109] Fix styling --- vizro-core/examples/_dev/assets/css/custom.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index 693a61782..d7eb95fd0 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -58,8 +58,13 @@ code.language-python.hljs { text-align: center; } +.custom-text-card { + padding: 12px; + border-left: 4px solid var(--text-secondary); +} .card:has(.custom-text-card) { padding: 0; background: none; + box-shadow: none; } From 698f5e6536e3a80f99aa1078f88e0c277333ad4c Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 3 Jul 2024 14:29:34 +0200 Subject: [PATCH 016/109] Add line chart --- vizro-core/examples/_dev/app.py | 8 ++- vizro-core/examples/_dev/utils/_deviation.py | 65 ++++++++++++++++++++ 2 files changed, 72 insertions(+), 1 deletion(-) create mode 100644 vizro-core/examples/_dev/utils/_deviation.py diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 305223b3a..a7436f6c2 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -3,6 +3,7 @@ import vizro.models as vm from utils._home import * from utils._magnitude import * +from utils._deviation import * from vizro import Vizro # HOME PAGE ----- @@ -28,11 +29,16 @@ dashboard = vm.Dashboard( - pages=[homepage, bar, column], + pages=[homepage, bar, column, line], navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ vm.NavLink(label="Overview", pages=["Overview"], icon="Home"), + vm.NavLink( + label="Deviation", + pages={"Deviation": ["Line"]}, + icon="Stacked Line Chart", + ), vm.NavLink( label="Magnitude", pages={"Magnitude": ["Bar", "Column"]}, diff --git a/vizro-core/examples/_dev/utils/_deviation.py b/vizro-core/examples/_dev/utils/_deviation.py new file mode 100644 index 000000000..f6ae2ae56 --- /dev/null +++ b/vizro-core/examples/_dev/utils/_deviation.py @@ -0,0 +1,65 @@ +"""Contains custom components and charts used inside the dashboard.""" + +import vizro.models as vm +import vizro.plotly.express as px + +from ._charts import CodeClipboard, FlexContainer, CustomTextCard + +gapminder = px.data.gapminder() +vm.Page.add_type("components", CodeClipboard) +vm.Page.add_type("components", FlexContainer) +vm.Container.add_type("components", CustomTextCard) + +# CHART PAGES ------------------------------------------------------------- +line = vm.Page( + title="Line", + layout=vm.Layout( + grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4, + col_gap="80px", + ), + components=[ + vm.Card( + text=""" + + ### What is a Line? + + A Line chart presents a series of data points over a continuous interval or time period, joined together with straight lines. + +   + + ### When to use it? + + You should select a Line chart when you want to show trends and invite analysis of how the data has changed + over time. Usually, your y-axis will show a quantitative value and your x-axis will be marked as a timescale + or a sequence of intervals. You can also display negative values below the x-axis. If you wish to group + several lines (different data series) in the same chart, try to limit yourself to 3-4 to avoid cluttering + up your chart and making it harder for the audience to read. + """ + ), + vm.Graph( + figure=px.line(data_frame=gapminder.query("country == 'India'"), x="year", y="pop") + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + gapminder = px.data.gapminder() + + page = vm.Page( + title="Line", + components=[ + vm.Graph(figure=px.line(data_frame=gapminder.query("country == 'India'"), x="year", y="pop")) + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) From 234dc2fdc8bfc645080242374f835b4343612f6c Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 3 Jul 2024 15:58:41 +0200 Subject: [PATCH 017/109] Change to Markdown --- .../examples/_dev/assets/css/custom.css | 10 ++-- vizro-core/examples/_dev/utils/_charts.py | 17 +++++-- vizro-core/examples/_dev/utils/_deviation.py | 4 +- vizro-core/examples/_dev/utils/_home.py | 49 +++++++++++-------- vizro-core/examples/_dev/utils/_magnitude.py | 4 +- 5 files changed, 50 insertions(+), 34 deletions(-) diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index d7eb95fd0..daac3d281 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -58,13 +58,13 @@ code.language-python.hljs { text-align: center; } -.custom-text-card { +.intro-text { padding: 12px; border-left: 4px solid var(--text-secondary); + } -.card:has(.custom-text-card) { - padding: 0; - background: none; - box-shadow: none; +.intro-text p { + font-size: 16px; + line-height: 20px; } diff --git a/vizro-core/examples/_dev/utils/_charts.py b/vizro-core/examples/_dev/utils/_charts.py index 441b26aec..5661e68f6 100644 --- a/vizro-core/examples/_dev/utils/_charts.py +++ b/vizro-core/examples/_dev/utils/_charts.py @@ -6,6 +6,11 @@ import vizro.models as vm from dash import dcc, html +try: + from pydantic.v1 import Field +except ImportError: # pragma: no cov + from pydantic import Field + # CUSTOM COMPONENTS ------------------------------------------------------------- class CodeClipboard(vm.VizroBaseModel): @@ -31,13 +36,15 @@ def build(self): ) -class CustomTextCard(vm.Card): - type: Literal["custom_text_card"] = "custom_text_card" +class Markdown(vm.VizroBaseModel): + type: Literal["markdown"] = "markdown" + text: str = Field( + ..., description="Markdown string to create card title/text that should adhere to the CommonMark Spec." + ) + classname: str = "" def build(self): - text_card = super().build() - text_card[self.id].className = "custom-text-card" - return text_card + return dcc.Markdown(id=self.id, children=self.text, dangerously_allow_html=False, className=self.classname) class FlexContainer(vm.Container): diff --git a/vizro-core/examples/_dev/utils/_deviation.py b/vizro-core/examples/_dev/utils/_deviation.py index f6ae2ae56..f316d8cf0 100644 --- a/vizro-core/examples/_dev/utils/_deviation.py +++ b/vizro-core/examples/_dev/utils/_deviation.py @@ -3,12 +3,12 @@ import vizro.models as vm import vizro.plotly.express as px -from ._charts import CodeClipboard, FlexContainer, CustomTextCard +from ._charts import CodeClipboard, FlexContainer, Markdown gapminder = px.data.gapminder() vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) -vm.Container.add_type("components", CustomTextCard) +vm.Container.add_type("components", Markdown) # CHART PAGES ------------------------------------------------------------- line = vm.Page( diff --git a/vizro-core/examples/_dev/utils/_home.py b/vizro-core/examples/_dev/utils/_home.py index fdd905e6e..7b120fe86 100644 --- a/vizro-core/examples/_dev/utils/_home.py +++ b/vizro-core/examples/_dev/utils/_home.py @@ -3,12 +3,12 @@ import vizro.models as vm import vizro.plotly.express as px -from ._charts import CodeClipboard, FlexContainer, CustomTextCard +from ._charts import CodeClipboard, FlexContainer, Markdown gapminder = px.data.gapminder() vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) -vm.Container.add_type("components", CustomTextCard) +vm.Container.add_type("components", Markdown) vm.Container.add_type("components", FlexContainer) @@ -129,12 +129,13 @@ title="Deviation", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - CustomTextCard( + Markdown( text=""" Deviation enables you to draw attention to variations (+/-) from a fixed reference point. Often this reference point is zero, but you might also show a target or a long-term average. You can also use deviation to express a positive, neutral or negative sentiment. - """ + """, + classname="intro-text" ), FlexContainer( title="", @@ -156,12 +157,13 @@ title="Correlation", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - CustomTextCard( + Markdown( text=""" Correlation helps you show the relationship between two or more variables. It is important that you make it clear to your audience whether or not the relationship is causal, i.e., whether one causes the other. - """ + """, + classname="intro-text" ), FlexContainer( title="", @@ -183,12 +185,13 @@ title="Ranking", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - CustomTextCard( + Markdown( text=""" Ranking enables you to present items in an ordered list. You will use this when you want to highlight the position of an item rather than its absolute or relative value. You might want to emphasise the most interesting points with highlighting or labels to ensure the reader understands what matters most. - """ + """, + classname="intro-text" ), FlexContainer( title="", @@ -210,14 +213,15 @@ title="Distribution", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - CustomTextCard( + Markdown( text=""" Distribution helps you to present all the possible values (or intervals) of your data and how often they occur. You can organise the data to show the number or percentage of items in a specified group, what shape the group takes, where the centre lies, and how much variability there is in the data. This shape (or ‘skew’) of a distribution can be a powerful way for you to highlight either the existence or lack of uniformity or equality in the data. - """ + """, + classname="intro-text" ), FlexContainer( title="", @@ -239,13 +243,14 @@ title="Magnitude", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - CustomTextCard( + Markdown( text=""" Magnitude allows you to emphasise size comparisons of ‘counted’ items in your data set. You can show relative comparisons (whether something is larger or smaller) or absolute differences (where the nuances are most interesting). Typically, you will use magnitude for actual numbers versus calculated rates or percentages. - """ + """, + classname="intro-text" ), FlexContainer( title="", @@ -268,12 +273,13 @@ title="Time", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - CustomTextCard( + Markdown( text=""" Time helps you draw attention to important trends emerging over a specified period. The time period you select could be as short as seconds or as long as centuries. What matters most is selecting the correct period of time to best show your audience the message they need to take away. - """ + """, + classname="intro-text" ), FlexContainer( title="", @@ -295,11 +301,12 @@ title="Part-to-whole", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - CustomTextCard( + Markdown( text=""" Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the size of the parts to be most important, a magnitude chart may be more appropriate. - """ + """, + classname="intro-text" ), FlexContainer( title="", @@ -321,12 +328,13 @@ title="Flow", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - CustomTextCard( + Markdown( text=""" With flow charts, you can highlight the quantity or the intensity of the movement between more than one state or condition. The flow might be steps in a logical sequence or movement between different geographical locations. - """ + """, + classname="intro-text" ), FlexContainer( title="", @@ -348,10 +356,11 @@ title="Spatial", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ - CustomTextCard( + Markdown( text=""" Spatial charts allow you to demonstrate precise locations or geographical patterns in your data. - """ + """, + classname="intro-text" ), FlexContainer( title="", diff --git a/vizro-core/examples/_dev/utils/_magnitude.py b/vizro-core/examples/_dev/utils/_magnitude.py index 01c4e8a6e..49899861d 100644 --- a/vizro-core/examples/_dev/utils/_magnitude.py +++ b/vizro-core/examples/_dev/utils/_magnitude.py @@ -3,12 +3,12 @@ import vizro.models as vm import vizro.plotly.express as px -from ._charts import CodeClipboard, FlexContainer, CustomTextCard +from ._charts import CodeClipboard, FlexContainer, Markdown gapminder = px.data.gapminder() vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) -vm.Container.add_type("components", CustomTextCard) +vm.Container.add_type("components", Markdown) # CHART PAGES ------------------------------------------------------------- bar = vm.Page( From acabab94019c600e17b10b374cb6e215364843b7 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 3 Jul 2024 16:26:01 +0000 Subject: [PATCH 018/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/_dev/app.py | 2 +- vizro-core/examples/_dev/assets/css/custom.css | 4 +--- vizro-core/examples/_dev/utils/_deviation.py | 12 +++++------- vizro-core/examples/_dev/utils/_home.py | 18 +++++++++--------- 4 files changed, 16 insertions(+), 20 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index a7436f6c2..7f0ab9361 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,9 +1,9 @@ """Example to show dashboard configuration specified as pydantic models.""" import vizro.models as vm +from utils._deviation import * from utils._home import * from utils._magnitude import * -from utils._deviation import * from vizro import Vizro # HOME PAGE ----- diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index daac3d281..4412fa939 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -26,7 +26,6 @@ code.language-python.hljs { .hljs-string { color: var(--text-code-string); font-family: unset; - } .hljs-keyword { @@ -59,9 +58,8 @@ code.language-python.hljs { } .intro-text { - padding: 12px; border-left: 4px solid var(--text-secondary); - + padding: 12px; } .intro-text p { diff --git a/vizro-core/examples/_dev/utils/_deviation.py b/vizro-core/examples/_dev/utils/_deviation.py index f316d8cf0..9e31858f0 100644 --- a/vizro-core/examples/_dev/utils/_deviation.py +++ b/vizro-core/examples/_dev/utils/_deviation.py @@ -22,23 +22,21 @@ text=""" ### What is a Line? - + A Line chart presents a series of data points over a continuous interval or time period, joined together with straight lines.   ### When to use it? - You should select a Line chart when you want to show trends and invite analysis of how the data has changed + You should select a Line chart when you want to show trends and invite analysis of how the data has changed over time. Usually, your y-axis will show a quantitative value and your x-axis will be marked as a timescale - or a sequence of intervals. You can also display negative values below the x-axis. If you wish to group - several lines (different data series) in the same chart, try to limit yourself to 3-4 to avoid cluttering + or a sequence of intervals. You can also display negative values below the x-axis. If you wish to group + several lines (different data series) in the same chart, try to limit yourself to 3-4 to avoid cluttering up your chart and making it harder for the audience to read. """ ), - vm.Graph( - figure=px.line(data_frame=gapminder.query("country == 'India'"), x="year", y="pop") - ), + vm.Graph(figure=px.line(data_frame=gapminder.query("country == 'India'"), x="year", y="pop")), CodeClipboard( text=""" ```python diff --git a/vizro-core/examples/_dev/utils/_home.py b/vizro-core/examples/_dev/utils/_home.py index 7b120fe86..b0e7d7408 100644 --- a/vizro-core/examples/_dev/utils/_home.py +++ b/vizro-core/examples/_dev/utils/_home.py @@ -135,7 +135,7 @@ Often this reference point is zero, but you might also show a target or a long-term average. You can also use deviation to express a positive, neutral or negative sentiment. """, - classname="intro-text" + classname="intro-text", ), FlexContainer( title="", @@ -163,7 +163,7 @@ make it clear to your audience whether or not the relationship is causal, i.e., whether one causes the other. """, - classname="intro-text" + classname="intro-text", ), FlexContainer( title="", @@ -191,7 +191,7 @@ position of an item rather than its absolute or relative value. You might want to emphasise the most interesting points with highlighting or labels to ensure the reader understands what matters most. """, - classname="intro-text" + classname="intro-text", ), FlexContainer( title="", @@ -221,7 +221,7 @@ (or ‘skew’) of a distribution can be a powerful way for you to highlight either the existence or lack of uniformity or equality in the data. """, - classname="intro-text" + classname="intro-text", ), FlexContainer( title="", @@ -250,7 +250,7 @@ are most interesting). Typically, you will use magnitude for actual numbers versus calculated rates or percentages. """, - classname="intro-text" + classname="intro-text", ), FlexContainer( title="", @@ -279,7 +279,7 @@ select could be as short as seconds or as long as centuries. What matters most is selecting the correct period of time to best show your audience the message they need to take away. """, - classname="intro-text" + classname="intro-text", ), FlexContainer( title="", @@ -306,7 +306,7 @@ Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the size of the parts to be most important, a magnitude chart may be more appropriate. """, - classname="intro-text" + classname="intro-text", ), FlexContainer( title="", @@ -334,7 +334,7 @@ state or condition. The flow might be steps in a logical sequence or movement between different geographical locations. """, - classname="intro-text" + classname="intro-text", ), FlexContainer( title="", @@ -360,7 +360,7 @@ text=""" Spatial charts allow you to demonstrate precise locations or geographical patterns in your data. """, - classname="intro-text" + classname="intro-text", ), FlexContainer( title="", From 5a207a89f70f74a150b30fc03925cacddd4aa1c5 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 5 Jul 2024 15:44:52 +0200 Subject: [PATCH 019/109] Add scatter chart --- vizro-core/examples/_dev/utils/_deviation.py | 69 ++++++++++++++++++-- 1 file changed, 65 insertions(+), 4 deletions(-) diff --git a/vizro-core/examples/_dev/utils/_deviation.py b/vizro-core/examples/_dev/utils/_deviation.py index 9e31858f0..4d4345f5f 100644 --- a/vizro-core/examples/_dev/utils/_deviation.py +++ b/vizro-core/examples/_dev/utils/_deviation.py @@ -6,6 +6,7 @@ from ._charts import CodeClipboard, FlexContainer, Markdown gapminder = px.data.gapminder() +iris = px.data.iris() vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) vm.Container.add_type("components", Markdown) @@ -36,7 +37,9 @@ up your chart and making it harder for the audience to read. """ ), - vm.Graph(figure=px.line(data_frame=gapminder.query("country == 'India'"), x="year", y="pop")), + vm.Graph( + figure=px.line(gapminder, x="year", y="lifeExp", color="continent") + ), CodeClipboard( text=""" ```python @@ -47,10 +50,12 @@ gapminder = px.data.gapminder() page = vm.Page( - title="Line", + title="Scatter", components=[ - vm.Graph(figure=px.line(data_frame=gapminder.query("country == 'India'"), x="year", y="pop")) - ] + vm.Graph( + figure=px.line(gapminder, x="year", y="lifeExp", color="continent") + ) + ], ) dashboard = vm.Dashboard(pages=[page]) @@ -61,3 +66,59 @@ ), ], ) + + +scatter = vm.Page( + title="Scatter", + layout=vm.Layout( + grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4, + col_gap="80px", + ), + components=[ + vm.Card( + text=""" + + ### What is a scatter? + + + A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two different variables - one plotted along the x-axis and the other plotted along the y-axis. + +   + + ### When to use it? + + Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation, and another unnoticed variable may be influencing results. Make sure your audience does not draw the wrong conclusions. + """ + ), + vm.Graph( + figure=px.scatter( + iris, x="sepal_width", y="sepal_length", color="species" + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + iris = px.data.iris() + + page = vm.Page( + title="Scatter", + components=[ + vm.Graph( + figure=px.scatter( + iris, x="sepal_width", y="sepal_length", color="species" + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) From 6faa89e195fb1fd3683bb05f0b7438e99c133540 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 5 Jul 2024 16:30:25 +0200 Subject: [PATCH 020/109] Tidy --- vizro-core/examples/_dev/app.py | 4 +- .../examples/_dev/assets/css/custom.css | 4 ++ vizro-core/examples/_dev/utils/_deviation.py | 24 +++++----- vizro-core/examples/_dev/utils/_magnitude.py | 44 +++++++++++++------ 4 files changed, 47 insertions(+), 29 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 7f0ab9361..6187d6887 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -29,14 +29,14 @@ dashboard = vm.Dashboard( - pages=[homepage, bar, column, line], + pages=[homepage, bar, column, line, scatter], navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ vm.NavLink(label="Overview", pages=["Overview"], icon="Home"), vm.NavLink( label="Deviation", - pages={"Deviation": ["Line"]}, + pages={"Deviation": ["Line", "Scatter"]}, icon="Stacked Line Chart", ), vm.NavLink( diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index 4412fa939..755d3106c 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -66,3 +66,7 @@ code.language-python.hljs { font-size: 16px; line-height: 20px; } + +#left-main { + width: 288px; +} diff --git a/vizro-core/examples/_dev/utils/_deviation.py b/vizro-core/examples/_dev/utils/_deviation.py index 4d4345f5f..d1dd94098 100644 --- a/vizro-core/examples/_dev/utils/_deviation.py +++ b/vizro-core/examples/_dev/utils/_deviation.py @@ -7,6 +7,7 @@ gapminder = px.data.gapminder() iris = px.data.iris() +stocks = px.data.stocks() vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) vm.Container.add_type("components", Markdown) @@ -15,20 +16,19 @@ line = vm.Page( title="Line", layout=vm.Layout( - grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4, - col_gap="80px", + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, ), components=[ vm.Card( text=""" - ### What is a Line? + #### What is a Line? A Line chart presents a series of data points over a continuous interval or time period, joined together with straight lines.   - ### When to use it? + #### When to use it? You should select a Line chart when you want to show trends and invite analysis of how the data has changed over time. Usually, your y-axis will show a quantitative value and your x-axis will be marked as a timescale @@ -37,9 +37,7 @@ up your chart and making it harder for the audience to read. """ ), - vm.Graph( - figure=px.line(gapminder, x="year", y="lifeExp", color="continent") - ), + vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), CodeClipboard( text=""" ```python @@ -50,10 +48,10 @@ gapminder = px.data.gapminder() page = vm.Page( - title="Scatter", + title="Line", components=[ vm.Graph( - figure=px.line(gapminder, x="year", y="lifeExp", color="continent") + figure=px.line(stocks, x="date", y="GOOG") ) ], ) @@ -71,21 +69,19 @@ scatter = vm.Page( title="Scatter", layout=vm.Layout( - grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4, - col_gap="80px", + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, ), components=[ vm.Card( text=""" - ### What is a scatter? - + #### What is a scatter? A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two different variables - one plotted along the x-axis and the other plotted along the y-axis.   - ### When to use it? + #### When to use it? Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation, and another unnoticed variable may be influencing results. Make sure your audience does not draw the wrong conclusions. """ diff --git a/vizro-core/examples/_dev/utils/_magnitude.py b/vizro-core/examples/_dev/utils/_magnitude.py index 49899861d..a5250e921 100644 --- a/vizro-core/examples/_dev/utils/_magnitude.py +++ b/vizro-core/examples/_dev/utils/_magnitude.py @@ -6,6 +6,7 @@ from ._charts import CodeClipboard, FlexContainer, Markdown gapminder = px.data.gapminder() +tips = px.data.tips() vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) vm.Container.add_type("components", Markdown) @@ -14,14 +15,13 @@ bar = vm.Page( title="Bar", layout=vm.Layout( - grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4, - col_gap="80px", + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, ), components=[ vm.Card( text=""" - ### What is a bar chart? + #### What is a bar chart? A Bar chart displays bars in lengths proportional to the values they represent. One axis of the chart shows the categories to compare and the other axis provides a value scale, @@ -29,7 +29,7 @@   - ### When to use the bar chart? + #### When to use the bar chart? Select a Bar chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents **how many?** in each category. You can @@ -40,7 +40,14 @@ """ ), vm.Graph( - figure=px.bar(data_frame=gapminder.query("country == 'China'"), y="year", x="lifeExp", orientation="h") + figure=px.bar( + data_frame=tips.groupby("day") + .agg({"total_bill": "sum"}) + .reset_index(), + x="total_bill", + y="day", + orientation="h", + ) ), CodeClipboard( text=""" @@ -49,12 +56,14 @@ import vizro.plotly.express as px from vizro import Vizro - gapminder = px.data.gapminder() + tips = px.data.tips() page = vm.Page( title="Bar", components=[ - vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'Germany'"), x="year", y="pop")) + vm.Graph( + figure=px.bar(data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), x="total_bill", y="day",orientation="h") + ) ] ) @@ -71,21 +80,20 @@ column = vm.Page( title="Column", layout=vm.Layout( - grid=[[0, 0, 1, 1, 1]] * 3 + [[2, 2, 1, 1, 1]] * 4, - col_gap="80px", + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, ), components=[ vm.Card( text=""" - ### What is a column chart? + #### What is a column chart? A Column chart is a vertical Bar chart, with column lengths varying according to the categorical value they represent. The scale is presented on the y-axis, starting with zero.   - ### When to use the column chart? + #### When to use the column chart? Select a Column chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents `how many?` in each category. You can @@ -95,7 +103,13 @@ """ ), - vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'China'"), x="year", y="lifeExp")), + vm.Graph( + figure=px.bar( + data_frame=gapminder.query("country == 'China'"), + x="year", + y="gdpPercap", + ) + ), CodeClipboard( text=""" ```python @@ -108,7 +122,11 @@ page = vm.Page( title="Column", components=[ - vm.Graph(figure=px.bar(data_frame=gapminder.query("country == 'China'"), x="year", y="pop")) + vm.Graph( + figure=px.bar( + data_frame=gapminder.query("country == 'China'"), x="year", y="gdpPercap" + ) + ) ] ) From 23a46a2e2196d9aa26a0fd44f4066f67b6a4c4f6 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 5 Jul 2024 16:31:43 +0200 Subject: [PATCH 021/109] Lint --- vizro-core/examples/_dev/utils/_deviation.py | 6 +----- vizro-core/examples/_dev/utils/_magnitude.py | 4 +--- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/vizro-core/examples/_dev/utils/_deviation.py b/vizro-core/examples/_dev/utils/_deviation.py index d1dd94098..7e591848f 100644 --- a/vizro-core/examples/_dev/utils/_deviation.py +++ b/vizro-core/examples/_dev/utils/_deviation.py @@ -86,11 +86,7 @@ Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation, and another unnoticed variable may be influencing results. Make sure your audience does not draw the wrong conclusions. """ ), - vm.Graph( - figure=px.scatter( - iris, x="sepal_width", y="sepal_length", color="species" - ) - ), + vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), CodeClipboard( text=""" ```python diff --git a/vizro-core/examples/_dev/utils/_magnitude.py b/vizro-core/examples/_dev/utils/_magnitude.py index a5250e921..2579c3d7b 100644 --- a/vizro-core/examples/_dev/utils/_magnitude.py +++ b/vizro-core/examples/_dev/utils/_magnitude.py @@ -41,9 +41,7 @@ ), vm.Graph( figure=px.bar( - data_frame=tips.groupby("day") - .agg({"total_bill": "sum"}) - .reset_index(), + data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), x="total_bill", y="day", orientation="h", From 90e8f2f92089290a78854c9887ae91c89374b303 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 5 Jul 2024 16:35:17 +0200 Subject: [PATCH 022/109] Remove fixed card height and width --- vizro-core/examples/_dev/assets/css/custom.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index 755d3106c..fe0ad710b 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -70,3 +70,8 @@ code.language-python.hljs { #left-main { width: 288px; } + +.card { + width: unset; + height: unset; +} From d5c0574289906a83991b5b75cd0768328049e93c Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 5 Jul 2024 17:07:44 +0200 Subject: [PATCH 023/109] Add pie chart and tidy files --- vizro-core/examples/_dev/app.py | 12 +- vizro-core/examples/_dev/utils/_deviation.py | 116 ------- vizro-core/examples/_dev/utils/_magnitude.py | 138 -------- .../examples/_dev/utils/_pages_charts.py | 303 ++++++++++++++++++ .../_dev/utils/{_home.py => _tabs_home.py} | 0 5 files changed, 311 insertions(+), 258 deletions(-) delete mode 100644 vizro-core/examples/_dev/utils/_deviation.py delete mode 100644 vizro-core/examples/_dev/utils/_magnitude.py create mode 100644 vizro-core/examples/_dev/utils/_pages_charts.py rename vizro-core/examples/_dev/utils/{_home.py => _tabs_home.py} (100%) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 6187d6887..6c50cf2d7 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,9 +1,8 @@ """Example to show dashboard configuration specified as pydantic models.""" import vizro.models as vm -from utils._deviation import * -from utils._home import * -from utils._magnitude import * +from utils._tabs_home import * +from utils._pages_charts import * from vizro import Vizro # HOME PAGE ----- @@ -29,7 +28,7 @@ dashboard = vm.Dashboard( - pages=[homepage, bar, column, line, scatter], + pages=[homepage, bar, column, line, scatter, pie], navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ @@ -44,6 +43,11 @@ pages={"Magnitude": ["Bar", "Column"]}, icon="Bar Chart", ), + vm.NavLink( + label="Distribution", + pages={"Distribution": ["Pie"]}, + icon="Bar Chart", + ), ] ) ), diff --git a/vizro-core/examples/_dev/utils/_deviation.py b/vizro-core/examples/_dev/utils/_deviation.py deleted file mode 100644 index 7e591848f..000000000 --- a/vizro-core/examples/_dev/utils/_deviation.py +++ /dev/null @@ -1,116 +0,0 @@ -"""Contains custom components and charts used inside the dashboard.""" - -import vizro.models as vm -import vizro.plotly.express as px - -from ._charts import CodeClipboard, FlexContainer, Markdown - -gapminder = px.data.gapminder() -iris = px.data.iris() -stocks = px.data.stocks() -vm.Page.add_type("components", CodeClipboard) -vm.Page.add_type("components", FlexContainer) -vm.Container.add_type("components", Markdown) - -# CHART PAGES ------------------------------------------------------------- -line = vm.Page( - title="Line", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), - components=[ - vm.Card( - text=""" - - #### What is a Line? - - A Line chart presents a series of data points over a continuous interval or time period, joined together with straight lines. - -   - - #### When to use it? - - You should select a Line chart when you want to show trends and invite analysis of how the data has changed - over time. Usually, your y-axis will show a quantitative value and your x-axis will be marked as a timescale - or a sequence of intervals. You can also display negative values below the x-axis. If you wish to group - several lines (different data series) in the same chart, try to limit yourself to 3-4 to avoid cluttering - up your chart and making it harder for the audience to read. - """ - ), - vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - gapminder = px.data.gapminder() - - page = vm.Page( - title="Line", - components=[ - vm.Graph( - figure=px.line(stocks, x="date", y="GOOG") - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ - ), - ], -) - - -scatter = vm.Page( - title="Scatter", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), - components=[ - vm.Card( - text=""" - - #### What is a scatter? - - A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two different variables - one plotted along the x-axis and the other plotted along the y-axis. - -   - - #### When to use it? - - Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation, and another unnoticed variable may be influencing results. Make sure your audience does not draw the wrong conclusions. - """ - ), - vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - iris = px.data.iris() - - page = vm.Page( - title="Scatter", - components=[ - vm.Graph( - figure=px.scatter( - iris, x="sepal_width", y="sepal_length", color="species" - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) diff --git a/vizro-core/examples/_dev/utils/_magnitude.py b/vizro-core/examples/_dev/utils/_magnitude.py deleted file mode 100644 index 2579c3d7b..000000000 --- a/vizro-core/examples/_dev/utils/_magnitude.py +++ /dev/null @@ -1,138 +0,0 @@ -"""Contains custom components and charts used inside the dashboard.""" - -import vizro.models as vm -import vizro.plotly.express as px - -from ._charts import CodeClipboard, FlexContainer, Markdown - -gapminder = px.data.gapminder() -tips = px.data.tips() -vm.Page.add_type("components", CodeClipboard) -vm.Page.add_type("components", FlexContainer) -vm.Container.add_type("components", Markdown) - -# CHART PAGES ------------------------------------------------------------- -bar = vm.Page( - title="Bar", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), - components=[ - vm.Card( - text=""" - - #### What is a bar chart? - - A Bar chart displays bars in lengths proportional to the values they represent. One axis of - the chart shows the categories to compare and the other axis provides a value scale, - starting with zero. - -   - - #### When to use the bar chart? - - Select a Bar chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling - clearly when you have a large number of bars. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. - - """ - ), - vm.Graph( - figure=px.bar( - data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), - x="total_bill", - y="day", - orientation="h", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Bar", - components=[ - vm.Graph( - figure=px.bar(data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), x="total_bill", y="day",orientation="h") - ) - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ - ), - ], -) - - -column = vm.Page( - title="Column", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), - components=[ - vm.Card( - text=""" - - #### What is a column chart? - - A Column chart is a vertical Bar chart, with column lengths varying according to the - categorical value they represent. The scale is presented on the y-axis, starting with zero. - -   - - #### When to use the column chart? - - Select a Column chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents `how many?` in each category. You can - arrange your columns in any order to fit the message you wish to emphasise. Be mindful of - labelling clearly when you have a large number of columns. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. - - """ - ), - vm.Graph( - figure=px.bar( - data_frame=gapminder.query("country == 'China'"), - x="year", - y="gdpPercap", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - gapminder = px.data.gapminder() - - page = vm.Page( - title="Column", - components=[ - vm.Graph( - figure=px.bar( - data_frame=gapminder.query("country == 'China'"), x="year", y="gdpPercap" - ) - ) - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ - ), - ], -) diff --git a/vizro-core/examples/_dev/utils/_pages_charts.py b/vizro-core/examples/_dev/utils/_pages_charts.py new file mode 100644 index 000000000..3b749e53f --- /dev/null +++ b/vizro-core/examples/_dev/utils/_pages_charts.py @@ -0,0 +1,303 @@ +"""Contains custom components and charts used inside the dashboard.""" + +import vizro.models as vm +import vizro.plotly.express as px + +from ._charts import CodeClipboard, FlexContainer, Markdown + +gapminder = px.data.gapminder() +iris = px.data.iris() +stocks = px.data.stocks() +tips = px.data.tips() + +vm.Page.add_type("components", CodeClipboard) +vm.Page.add_type("components", FlexContainer) +vm.Container.add_type("components", Markdown) + +# CHART PAGES ------------------------------------------------------------- +line = vm.Page( + title="Line", + layout=vm.Layout( + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, + ), + components=[ + vm.Card( + text=""" + + #### What is a Line? + + A Line chart presents a series of data points over a continuous interval or time period, joined together with straight lines. + +   + + #### When to use it? + + You should select a Line chart when you want to show trends and invite analysis of how the data has changed + over time. Usually, your y-axis will show a quantitative value and your x-axis will be marked as a timescale + or a sequence of intervals. You can also display negative values below the x-axis. If you wish to group + several lines (different data series) in the same chart, try to limit yourself to 3-4 to avoid cluttering + up your chart and making it harder for the audience to read. + """ + ), + vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + gapminder = px.data.gapminder() + + page = vm.Page( + title="Line", + components=[ + vm.Graph( + figure=px.line(stocks, x="date", y="GOOG") + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) + + +scatter = vm.Page( + title="Scatter", + layout=vm.Layout( + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, + ), + components=[ + vm.Card( + text=""" + + #### What is a scatter? + + A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two different variables - one plotted along the x-axis and the other plotted along the y-axis. + +   + + #### When to use it? + + Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation, and another unnoticed variable may be influencing results. Make sure your audience does not draw the wrong conclusions. + """ + ), + vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + iris = px.data.iris() + + page = vm.Page( + title="Scatter", + components=[ + vm.Graph( + figure=px.scatter( + iris, x="sepal_width", y="sepal_length", color="species" + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) + +bar = vm.Page( + title="Bar", + layout=vm.Layout( + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, + ), + components=[ + vm.Card( + text=""" + + #### What is a bar chart? + + A Bar chart displays bars in lengths proportional to the values they represent. One axis of + the chart shows the categories to compare and the other axis provides a value scale, + starting with zero. + +   + + #### When to use the bar chart? + + Select a Bar chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents **how many?** in each category. You can + arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling + clearly when you have a large number of bars. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + + """ + ), + vm.Graph( + figure=px.bar( + data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), + x="total_bill", + y="day", + orientation="h", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Bar", + components=[ + vm.Graph( + figure=px.bar(data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), x="total_bill", y="day",orientation="h") + ) + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) + + +column = vm.Page( + title="Column", + layout=vm.Layout( + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, + ), + components=[ + vm.Card( + text=""" + + #### What is a column chart? + + A Column chart is a vertical Bar chart, with column lengths varying according to the + categorical value they represent. The scale is presented on the y-axis, starting with zero. + +   + + #### When to use the column chart? + + Select a Column chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents `how many?` in each category. You can + arrange your columns in any order to fit the message you wish to emphasise. Be mindful of + labelling clearly when you have a large number of columns. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + + """ + ), + vm.Graph( + figure=px.bar( + data_frame=gapminder.query("country == 'China'"), + x="year", + y="gdpPercap", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + gapminder = px.data.gapminder() + + page = vm.Page( + title="Column", + components=[ + vm.Graph( + figure=px.bar( + data_frame=gapminder.query("country == 'China'"), x="year", y="gdpPercap" + ) + ) + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) + + +pie = vm.Page( + title="Pie", + layout=vm.Layout( + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, + ), + components=[ + vm.Card( + text=""" + + #### What is a pie chart? + + A Pie chart is a circular chart divided into segments to show proportions and percentages between categories. The circle represents the whole. + +   + + #### When to use the chart? + + Use the Pie chart when you need to show your audience a quick view of how data is distributed proportionately, with percentages highlighted. The different values you present must add up to a total and equal 100%. + + The downsides are that Pie charts tend to occupy more space than many other charts, they don’t work well with more than a few values because labelling small segments is challenging, and it can be difficult to accurately compare the sizes of the segments. + + """ + ), + vm.Graph( + figure=px.pie( + data_frame=tips, + values='tip', names='day', + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Pie", + components=[ + vm.Graph( + figure=px.pie( + data_frame=tips, + values='tip', names='day', + ) + ) + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) diff --git a/vizro-core/examples/_dev/utils/_home.py b/vizro-core/examples/_dev/utils/_tabs_home.py similarity index 100% rename from vizro-core/examples/_dev/utils/_home.py rename to vizro-core/examples/_dev/utils/_tabs_home.py From 718a74843a77f317b83c6864086a244d48733eb5 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 5 Jul 2024 18:19:54 +0200 Subject: [PATCH 024/109] Add donut chart --- vizro-core/examples/_dev/app.py | 6 +- .../examples/_dev/utils/_pages_charts.py | 58 +++++++++++++++++++ 2 files changed, 61 insertions(+), 3 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 6c50cf2d7..603420c8d 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -28,7 +28,7 @@ dashboard = vm.Dashboard( - pages=[homepage, bar, column, line, scatter, pie], + pages=[homepage, bar, column, line, scatter, pie, donut], navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ @@ -45,8 +45,8 @@ ), vm.NavLink( label="Distribution", - pages={"Distribution": ["Pie"]}, - icon="Bar Chart", + pages={"Distribution": ["Pie", "Donut"]}, + icon="Pie Chart", ), ] ) diff --git a/vizro-core/examples/_dev/utils/_pages_charts.py b/vizro-core/examples/_dev/utils/_pages_charts.py index 3b749e53f..3b7b4d249 100644 --- a/vizro-core/examples/_dev/utils/_pages_charts.py +++ b/vizro-core/examples/_dev/utils/_pages_charts.py @@ -301,3 +301,61 @@ ), ], ) + + +donut = vm.Page( + title="Donut", + layout=vm.Layout( + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, + ), + components=[ + vm.Card( + text=""" + + #### What is a donut chart? + + A Donut chart looks like a Pie chart, but has a blank space in the centre which may contain additional information. + +   + + #### When to use the chart? + + A Donut chart can be used in place of a Pie chart, particularly when you are short of space or have extra information you would like to share about the data. It may also be more effective if you wish your audience to focus on the length of the arcs of the sections instead of the proportions of the segment sizes. + + """ + ), + vm.Graph( + figure=px.pie( + data_frame=tips, + values='tip', names='day', hole=0.4, + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Pie", + components=[ + vm.Graph( + figure=px.pie( + data_frame=tips, + values='tip', names='day', hole=0.4 + ) + ) + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) From cd1ff0422d14dfc90f0d6ec8ecd5165c0f68b9dc Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 5 Jul 2024 18:34:25 +0200 Subject: [PATCH 025/109] Add more charts and tidy --- vizro-core/examples/_dev/app.py | 9 +- .../examples/_dev/utils/_pages_charts.py | 126 +++++++++++++++++- 2 files changed, 129 insertions(+), 6 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 603420c8d..d0156374f 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -28,7 +28,7 @@ dashboard = vm.Dashboard( - pages=[homepage, bar, column, line, scatter, pie, donut], + pages=[homepage, bar, column, line, scatter, pie, donut,boxplot, violin], navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ @@ -45,9 +45,14 @@ ), vm.NavLink( label="Distribution", - pages={"Distribution": ["Pie", "Donut"]}, + pages={"Distribution": ["Pie", "Donut", "Violin"]}, icon="Pie Chart", ), + vm.NavLink( + label="Ranking", + pages={"Ranking": ["Boxplot"]}, + icon="Trail Length Short", + ), ] ) ), diff --git a/vizro-core/examples/_dev/utils/_pages_charts.py b/vizro-core/examples/_dev/utils/_pages_charts.py index 3b7b4d249..118d3bc23 100644 --- a/vizro-core/examples/_dev/utils/_pages_charts.py +++ b/vizro-core/examples/_dev/utils/_pages_charts.py @@ -134,7 +134,7 @@   - #### When to use the bar chart? + #### When to use it? Select a Bar chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents **how many?** in each category. You can @@ -196,7 +196,7 @@   - #### When to use the column chart? + #### When to use it? Select a Column chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents `how many?` in each category. You can @@ -258,7 +258,7 @@   - #### When to use the chart? + #### When to use it? Use the Pie chart when you need to show your audience a quick view of how data is distributed proportionately, with percentages highlighted. The different values you present must add up to a total and equal 100%. @@ -318,7 +318,7 @@   - #### When to use the chart? + #### When to use it? A Donut chart can be used in place of a Pie chart, particularly when you are short of space or have extra information you would like to share about the data. It may also be more effective if you wish your audience to focus on the length of the arcs of the sections instead of the proportions of the segment sizes. @@ -359,3 +359,121 @@ ), ], ) + + + +boxplot = vm.Page( + title="Boxplot", + layout=vm.Layout( + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, + ), + components=[ + vm.Card( + text=""" + + #### What is a boxplot? + + A Box Plot (also known as a Box and Whisker Plot) provides a visual display of multiple datasets, indicating the median (centre) and the range of the data for each. + +   + + #### When to use it? + + Choose a Box Plot when you need to summarise distributions between many groups or datasets. It takes up less space than many other charts. + + Create boxes to display the median, and the upper and lower quartiles. Add ‘whiskers’ to highlight variability outside the upper and lower quartiles. You can add outliers as dots beyond, but in line with the whiskers. + + """ + ), + vm.Graph( + figure=px.box( + data_frame=tips, + y='total_bill', x='day', color='day', + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Boxplot", + components=[ + vm.Graph( + figure=px.boxplot( + data_frame=tips, + y='total_bill', x='day', color='day', + ) + ), + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) + + +violin = vm.Page( + title="Violin", + layout=vm.Layout( + grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, + ), + components=[ + vm.Card( + text=""" + + #### What is a violin? + + A Violin Plot is similar to a Box Plot, but works better for visualising more complex distributions and their probability density at different values. + +   + + #### When to use it? + + Use this chart to go beyond the simple Box Plot and show the distribution shape of the data, the inter-quartile range, the confidence intervals and the median. + """ + ), + vm.Graph( + figure=px.violin( + data_frame=tips, + y='total_bill', x='day', color='day', + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Violin", + components=[ + vm.Graph( + figure=px.violin( + data_frame=tips, + y='total_bill', x='day', color='day', + ) + ), + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) From 639fc56e6169bd429dc2264ff2a51734ab18eeb1 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 8 Jul 2024 07:57:19 +0000 Subject: [PATCH 026/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/_dev/app.py | 4 ++-- .../examples/_dev/assets/css/custom.css | 2 +- .../examples/_dev/utils/_pages_charts.py | 20 ++++++++++++------- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index d0156374f..b4aa8b726 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,8 +1,8 @@ """Example to show dashboard configuration specified as pydantic models.""" import vizro.models as vm -from utils._tabs_home import * from utils._pages_charts import * +from utils._tabs_home import * from vizro import Vizro # HOME PAGE ----- @@ -28,7 +28,7 @@ dashboard = vm.Dashboard( - pages=[homepage, bar, column, line, scatter, pie, donut,boxplot, violin], + pages=[homepage, bar, column, line, scatter, pie, donut, boxplot, violin], navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index fe0ad710b..1768d0699 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -72,6 +72,6 @@ code.language-python.hljs { } .card { - width: unset; height: unset; + width: unset; } diff --git a/vizro-core/examples/_dev/utils/_pages_charts.py b/vizro-core/examples/_dev/utils/_pages_charts.py index 118d3bc23..b17b193dc 100644 --- a/vizro-core/examples/_dev/utils/_pages_charts.py +++ b/vizro-core/examples/_dev/utils/_pages_charts.py @@ -255,7 +255,7 @@ #### What is a pie chart? A Pie chart is a circular chart divided into segments to show proportions and percentages between categories. The circle represents the whole. - +   #### When to use it? @@ -269,7 +269,8 @@ vm.Graph( figure=px.pie( data_frame=tips, - values='tip', names='day', + values="tip", + names="day", ) ), CodeClipboard( @@ -327,7 +328,9 @@ vm.Graph( figure=px.pie( data_frame=tips, - values='tip', names='day', hole=0.4, + values="tip", + names="day", + hole=0.4, ) ), CodeClipboard( @@ -361,7 +364,6 @@ ) - boxplot = vm.Page( title="Boxplot", layout=vm.Layout( @@ -388,7 +390,9 @@ vm.Graph( figure=px.box( data_frame=tips, - y='total_bill', x='day', color='day', + y="total_bill", + x="day", + color="day", ) ), CodeClipboard( @@ -434,7 +438,7 @@ #### What is a violin? A Violin Plot is similar to a Box Plot, but works better for visualising more complex distributions and their probability density at different values. - +   #### When to use it? @@ -445,7 +449,9 @@ vm.Graph( figure=px.violin( data_frame=tips, - y='total_bill', x='day', color='day', + y="total_bill", + x="day", + color="day", ) ), CodeClipboard( From 53b81d23048db0d4bca60f8c334814212c53ac0a Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 8 Jul 2024 09:59:44 +0200 Subject: [PATCH 027/109] Lint --- vizro-core/examples/_dev/app.py | 4 ++-- .../examples/_dev/assets/css/custom.css | 2 +- .../examples/_dev/utils/_pages_charts.py | 20 ++++++++++++------- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index d0156374f..b4aa8b726 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,8 +1,8 @@ """Example to show dashboard configuration specified as pydantic models.""" import vizro.models as vm -from utils._tabs_home import * from utils._pages_charts import * +from utils._tabs_home import * from vizro import Vizro # HOME PAGE ----- @@ -28,7 +28,7 @@ dashboard = vm.Dashboard( - pages=[homepage, bar, column, line, scatter, pie, donut,boxplot, violin], + pages=[homepage, bar, column, line, scatter, pie, donut, boxplot, violin], navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index fe0ad710b..1768d0699 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -72,6 +72,6 @@ code.language-python.hljs { } .card { - width: unset; height: unset; + width: unset; } diff --git a/vizro-core/examples/_dev/utils/_pages_charts.py b/vizro-core/examples/_dev/utils/_pages_charts.py index 118d3bc23..b17b193dc 100644 --- a/vizro-core/examples/_dev/utils/_pages_charts.py +++ b/vizro-core/examples/_dev/utils/_pages_charts.py @@ -255,7 +255,7 @@ #### What is a pie chart? A Pie chart is a circular chart divided into segments to show proportions and percentages between categories. The circle represents the whole. - +   #### When to use it? @@ -269,7 +269,8 @@ vm.Graph( figure=px.pie( data_frame=tips, - values='tip', names='day', + values="tip", + names="day", ) ), CodeClipboard( @@ -327,7 +328,9 @@ vm.Graph( figure=px.pie( data_frame=tips, - values='tip', names='day', hole=0.4, + values="tip", + names="day", + hole=0.4, ) ), CodeClipboard( @@ -361,7 +364,6 @@ ) - boxplot = vm.Page( title="Boxplot", layout=vm.Layout( @@ -388,7 +390,9 @@ vm.Graph( figure=px.box( data_frame=tips, - y='total_bill', x='day', color='day', + y="total_bill", + x="day", + color="day", ) ), CodeClipboard( @@ -434,7 +438,7 @@ #### What is a violin? A Violin Plot is similar to a Box Plot, but works better for visualising more complex distributions and their probability density at different values. - +   #### When to use it? @@ -445,7 +449,9 @@ vm.Graph( figure=px.violin( data_frame=tips, - y='total_bill', x='day', color='day', + y="total_bill", + x="day", + color="day", ) ), CodeClipboard( From 77251fde99b088a3a5b844527f028da1e78636b1 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 8 Jul 2024 10:09:53 +0200 Subject: [PATCH 028/109] Sort alphabetically --- vizro-core/examples/_dev/utils/_tabs_home.py | 32 ++++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/vizro-core/examples/_dev/utils/_tabs_home.py b/vizro-core/examples/_dev/utils/_tabs_home.py index b0e7d7408..397108254 100644 --- a/vizro-core/examples/_dev/utils/_tabs_home.py +++ b/vizro-core/examples/_dev/utils/_tabs_home.py @@ -12,9 +12,9 @@ vm.Container.add_type("components", FlexContainer) -DEVIATION_CHARTS = ["line", "scatter", "slope", "lollipop", "diverging-bar"] +DEVIATION_CHARTS = sorted(["line", "scatter", "slope", "lollipop", "diverging-bar"]) CORRELATION_CHARTS = ["scatter"] -RANKING_CHARTS = [ +RANKING_CHARTS = sorted([ "column", "stacked-column", "ordered-bubble", @@ -26,8 +26,8 @@ "waterfall", "diverging-bar", "boxplot", -] -DISTRIBUTION_CHARTS = [ +]) +DISTRIBUTION_CHARTS = sorted([ "histogram", "butterfly", "pie", @@ -40,8 +40,8 @@ "treemap", "venn", "barcode", -] -MAGNITUDE_CHARTS = [ +]) +MAGNITUDE_CHARTS = sorted([ "column", "marimekko", "stacked-column", @@ -64,8 +64,8 @@ "diverging-bar", "bullet", "dot-plot", -] -TIME_CHARTS = [ +]) +TIME_CHARTS = sorted([ "column", "gantt", "column-line", @@ -77,8 +77,8 @@ "diverging-bar", "stepped-line", "sparkline", -] -PART_TO_WHOLE_CHARTS = [ +]) +PART_TO_WHOLE_CHARTS = sorted([ "marimekko", "stacked-column", "column-line", @@ -88,11 +88,11 @@ "waterfall", "treemap", "venn", -] -FLOW_CHARTS = ["gantt", "line", "slope", "stepped-line"] -SPATIAL_CHARTS = ["choropleth", "dot-density", "flow-map"] +]) +FLOW_CHARTS = sorted(["gantt", "line", "slope", "stepped-line"]) +SPATIAL_CHARTS = sorted(["choropleth", "dot-density", "flow-map"]) -ALL_CHARTS = ( +ALL_CHARTS = sorted(set( DEVIATION_CHARTS + CORRELATION_CHARTS + RANKING_CHARTS @@ -102,7 +102,7 @@ + PART_TO_WHOLE_CHARTS + FLOW_CHARTS + SPATIAL_CHARTS -) +)) # HOMEPAGE ------------------------------------------------------------- @@ -119,7 +119,7 @@ #### {chart.replace("-", " ").title()} """ ) - for chart in set(ALL_CHARTS) + for chart in ALL_CHARTS ], ) ], From 8865f5db125acd5755b6cbf66acd991437e7e650 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 8 Jul 2024 10:11:37 +0200 Subject: [PATCH 029/109] Convert to navigation cards --- vizro-core/examples/_dev/utils/_tabs_home.py | 27 +++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/vizro-core/examples/_dev/utils/_tabs_home.py b/vizro-core/examples/_dev/utils/_tabs_home.py index 397108254..7f85caadc 100644 --- a/vizro-core/examples/_dev/utils/_tabs_home.py +++ b/vizro-core/examples/_dev/utils/_tabs_home.py @@ -117,7 +117,8 @@ ![](assets/images/charts/{chart}.svg#chart-icon) #### {chart.replace("-", " ").title()} - """ + """, + href=f"/{chart}", ) for chart in ALL_CHARTS ], @@ -145,7 +146,8 @@ ![](assets/images/charts/{chart}.svg#chart-icon) #### {chart.replace("-", " ").title()} - """ + """, + href=f"/{chart}", ) for chart in DEVIATION_CHARTS ], @@ -173,7 +175,8 @@ ![](assets/images/charts/{chart}.svg#chart-icon) #### {chart.replace("-", " ").title()} - """ + """, + href=f"/{chart}", ) for chart in CORRELATION_CHARTS ], @@ -201,7 +204,8 @@ ![](assets/images/charts/{chart}.svg#chart-icon) #### {chart.replace("-", " ").title()} - """ + """, + href=f"/{chart}", ) for chart in RANKING_CHARTS ], @@ -231,7 +235,8 @@ ![](assets/images/charts/{chart}.svg#chart-icon) #### {chart.replace("-", " ").title()} - """ + """, + href=f"/{chart}", ) for chart in DISTRIBUTION_CHARTS ], @@ -289,7 +294,8 @@ ![](assets/images/charts/{chart}.svg#chart-icon) #### {chart.replace("-", " ").title()} - """ + """, + href=f"/{chart}", ) for chart in TIME_CHARTS ], @@ -316,7 +322,8 @@ ![](assets/images/charts/{chart}.svg#chart-icon) #### {chart.replace("-", " ").title()} - """ + """, + href=f"/{chart}", ) for chart in PART_TO_WHOLE_CHARTS ], @@ -344,7 +351,8 @@ ![](assets/images/charts/{chart}.svg#chart-icon) #### {chart.replace("-", " ").title()} - """ + """, + href=f"/{chart}", ) for chart in FLOW_CHARTS ], @@ -370,7 +378,8 @@ ![](assets/images/charts/{chart}.svg#chart-icon) #### {chart.replace("-", " ").title()} - """ + """, + href=f"/{chart}", ) for chart in SPATIAL_CHARTS ], From 071ee582754101e31c6d704610dd6a794756491e Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 8 Jul 2024 10:22:32 +0200 Subject: [PATCH 030/109] Replace icons and change order --- vizro-core/examples/_dev/app.py | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index b4aa8b726..5f34788de 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -36,12 +36,17 @@ vm.NavLink( label="Deviation", pages={"Deviation": ["Line", "Scatter"]}, + icon="Planner Review", + ), + vm.NavLink( + label="Correlation", + pages={"Deviation": ["Scatter"]}, icon="Stacked Line Chart", ), vm.NavLink( - label="Magnitude", - pages={"Magnitude": ["Bar", "Column"]}, - icon="Bar Chart", + label="Ranking", + pages={"Ranking": ["Boxplot"]}, + icon="Stacked Bar Chart", ), vm.NavLink( label="Distribution", @@ -49,9 +54,9 @@ icon="Pie Chart", ), vm.NavLink( - label="Ranking", - pages={"Ranking": ["Boxplot"]}, - icon="Trail Length Short", + label="Magnitude", + pages={"Magnitude": ["Bar", "Column"]}, + icon="Bar Chart", ), ] ) From f927d289236ea2856c59df8568f3ef07419d8eab Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 8 Jul 2024 10:41:06 +0200 Subject: [PATCH 031/109] Fix bug and apply new icons --- vizro-core/examples/_dev/app.py | 24 +++++++++++++++++-- .../src/vizro/models/_navigation/nav_bar.py | 8 ++++--- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 5f34788de..9d5dda5a0 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -41,7 +41,7 @@ vm.NavLink( label="Correlation", pages={"Deviation": ["Scatter"]}, - icon="Stacked Line Chart", + icon="Bubble Chart", ), vm.NavLink( label="Ranking", @@ -51,13 +51,33 @@ vm.NavLink( label="Distribution", pages={"Distribution": ["Pie", "Donut", "Violin"]}, - icon="Pie Chart", + icon="Waterfall Chart", ), vm.NavLink( label="Magnitude", pages={"Magnitude": ["Bar", "Column"]}, icon="Bar Chart", ), + vm.NavLink( + label="Time", + pages={"Time": ["Bar", "Column", "Scatter", "Line"]}, + icon="Timeline", + ), + vm.NavLink( + label="Part-to-whole", + pages={"Part-to-whole": ["Donut", "Pie"]}, + icon="Donut Small", + ), + vm.NavLink( + label="Flow", + pages={"Flow": ["Line"]}, + icon="Stacked Line Chart", + ), + vm.NavLink( + label="Spatial", + pages={"Spatial": ["Line"]}, + icon="Map", + ), ] ) ), diff --git a/vizro-core/src/vizro/models/_navigation/nav_bar.py b/vizro-core/src/vizro/models/_navigation/nav_bar.py index 0f41b94e3..21eadb1c1 100644 --- a/vizro-core/src/vizro/models/_navigation/nav_bar.py +++ b/vizro-core/src/vizro/models/_navigation/nav_bar.py @@ -48,9 +48,11 @@ def pre_build(self): ] for position, item in enumerate(self.items, 1): - # The filter icons are named filter_1, filter_2, etc. up to filter_9. If there are more than 9 items, then - # the 10th and all subsequent items are named filter_9+. - item.icon = item.icon or f"filter_{position}" if position <= 9 else "filter_9+" # noqa: PLR2004 + # The default icons (if none are specified) are named filter_1, filter_2, etc. up to filter_9. + # If there are more than 9 items, then the 10th and all subsequent items are named filter_9+. + icon_default = "filter_9+" if position > 9 else f"filter_{position}" + item.icon = item.icon or icon_default + # Since models instantiated in pre_build do not themselves have pre_build called on them, we call it manually # here. From b65b7afb939ac0cc4d6ee2d367750ccfe34f9b56 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 8 Jul 2024 08:43:52 +0000 Subject: [PATCH 032/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/_dev/utils/_tabs_home.py | 184 ++++++++++-------- .../src/vizro/models/_navigation/nav_bar.py | 1 - 2 files changed, 98 insertions(+), 87 deletions(-) diff --git a/vizro-core/examples/_dev/utils/_tabs_home.py b/vizro-core/examples/_dev/utils/_tabs_home.py index 7f85caadc..cba5bcbf8 100644 --- a/vizro-core/examples/_dev/utils/_tabs_home.py +++ b/vizro-core/examples/_dev/utils/_tabs_home.py @@ -14,95 +14,107 @@ DEVIATION_CHARTS = sorted(["line", "scatter", "slope", "lollipop", "diverging-bar"]) CORRELATION_CHARTS = ["scatter"] -RANKING_CHARTS = sorted([ - "column", - "stacked-column", - "ordered-bubble", - "column-line", - "bar", - "donut", - "arc", - "lollipop", - "waterfall", - "diverging-bar", - "boxplot", -]) -DISTRIBUTION_CHARTS = sorted([ - "histogram", - "butterfly", - "pie", - "donut", - "arc", - "violin", - "lollipop", - "cumulative-curve", - "waterfall", - "treemap", - "venn", - "barcode", -]) -MAGNITUDE_CHARTS = sorted([ - "column", - "marimekko", - "stacked-column", - "ordered-bubble", - "column-line", - "surplus", - "butterfly", - "bubble-timeline", - "bar", - "pie", - "donut", - "arc", - "violin", - "slope", - "lollipop", - "cumulative-curve", - "waterfall", - "treemap", - "venn", - "diverging-bar", - "bullet", - "dot-plot", -]) -TIME_CHARTS = sorted([ - "column", - "gantt", - "column-line", - "bubble-timeline", - "bar", - "line", - "scatter", - "lollipop", - "diverging-bar", - "stepped-line", - "sparkline", -]) -PART_TO_WHOLE_CHARTS = sorted([ - "marimekko", - "stacked-column", - "column-line", - "pie", - "donut", - "arc", - "waterfall", - "treemap", - "venn", -]) +RANKING_CHARTS = sorted( + [ + "column", + "stacked-column", + "ordered-bubble", + "column-line", + "bar", + "donut", + "arc", + "lollipop", + "waterfall", + "diverging-bar", + "boxplot", + ] +) +DISTRIBUTION_CHARTS = sorted( + [ + "histogram", + "butterfly", + "pie", + "donut", + "arc", + "violin", + "lollipop", + "cumulative-curve", + "waterfall", + "treemap", + "venn", + "barcode", + ] +) +MAGNITUDE_CHARTS = sorted( + [ + "column", + "marimekko", + "stacked-column", + "ordered-bubble", + "column-line", + "surplus", + "butterfly", + "bubble-timeline", + "bar", + "pie", + "donut", + "arc", + "violin", + "slope", + "lollipop", + "cumulative-curve", + "waterfall", + "treemap", + "venn", + "diverging-bar", + "bullet", + "dot-plot", + ] +) +TIME_CHARTS = sorted( + [ + "column", + "gantt", + "column-line", + "bubble-timeline", + "bar", + "line", + "scatter", + "lollipop", + "diverging-bar", + "stepped-line", + "sparkline", + ] +) +PART_TO_WHOLE_CHARTS = sorted( + [ + "marimekko", + "stacked-column", + "column-line", + "pie", + "donut", + "arc", + "waterfall", + "treemap", + "venn", + ] +) FLOW_CHARTS = sorted(["gantt", "line", "slope", "stepped-line"]) SPATIAL_CHARTS = sorted(["choropleth", "dot-density", "flow-map"]) -ALL_CHARTS = sorted(set( - DEVIATION_CHARTS - + CORRELATION_CHARTS - + RANKING_CHARTS - + DISTRIBUTION_CHARTS - + MAGNITUDE_CHARTS - + TIME_CHARTS - + PART_TO_WHOLE_CHARTS - + FLOW_CHARTS - + SPATIAL_CHARTS -)) +ALL_CHARTS = sorted( + set( + DEVIATION_CHARTS + + CORRELATION_CHARTS + + RANKING_CHARTS + + DISTRIBUTION_CHARTS + + MAGNITUDE_CHARTS + + TIME_CHARTS + + PART_TO_WHOLE_CHARTS + + FLOW_CHARTS + + SPATIAL_CHARTS + ) +) # HOMEPAGE ------------------------------------------------------------- diff --git a/vizro-core/src/vizro/models/_navigation/nav_bar.py b/vizro-core/src/vizro/models/_navigation/nav_bar.py index 21eadb1c1..30231411c 100644 --- a/vizro-core/src/vizro/models/_navigation/nav_bar.py +++ b/vizro-core/src/vizro/models/_navigation/nav_bar.py @@ -53,7 +53,6 @@ def pre_build(self): icon_default = "filter_9+" if position > 9 else f"filter_{position}" item.icon = item.icon or icon_default - # Since models instantiated in pre_build do not themselves have pre_build called on them, we call it manually # here. for item in self.items: From cb34493e2458454043f5f72186155f8a0ab2c7fe Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 8 Jul 2024 11:43:05 +0200 Subject: [PATCH 033/109] Tidy --- .../examples/_dev/assets/css/custom.css | 5 -- .../examples/_dev/utils/_pages_charts.py | 52 ++++++++----------- 2 files changed, 23 insertions(+), 34 deletions(-) diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index 1768d0699..755d3106c 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -70,8 +70,3 @@ code.language-python.hljs { #left-main { width: 288px; } - -.card { - height: unset; - width: unset; -} diff --git a/vizro-core/examples/_dev/utils/_pages_charts.py b/vizro-core/examples/_dev/utils/_pages_charts.py index b17b193dc..a69a86aee 100644 --- a/vizro-core/examples/_dev/utils/_pages_charts.py +++ b/vizro-core/examples/_dev/utils/_pages_charts.py @@ -5,6 +5,8 @@ from ._charts import CodeClipboard, FlexContainer, Markdown +PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 + gapminder = px.data.gapminder() iris = px.data.iris() stocks = px.data.stocks() @@ -17,9 +19,7 @@ # CHART PAGES ------------------------------------------------------------- line = vm.Page( title="Line", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), + layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( text=""" @@ -70,22 +70,24 @@ scatter = vm.Page( title="Scatter", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), + layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( text=""" #### What is a scatter? - A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two different variables - one plotted along the x-axis and the other plotted along the y-axis. + A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two + different variables - one plotted along the x-axis and the other plotted along the y-axis.   #### When to use it? - Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation, and another unnoticed variable may be influencing results. Make sure your audience does not draw the wrong conclusions. + Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes + called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when + you have paired numerical data and you want to see if one variable impacts the other. However, do remember + that correlation is not causation. Make sure your audience does not draw the wrong conclusions. """ ), vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), @@ -119,9 +121,7 @@ bar = vm.Page( title="Bar", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), + layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( text=""" @@ -182,9 +182,7 @@ column = vm.Page( title="Column", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), + layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( text=""" @@ -245,9 +243,7 @@ pie = vm.Page( title="Pie", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), + layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( text=""" @@ -260,9 +256,13 @@ #### When to use it? - Use the Pie chart when you need to show your audience a quick view of how data is distributed proportionately, with percentages highlighted. The different values you present must add up to a total and equal 100%. - - The downsides are that Pie charts tend to occupy more space than many other charts, they don’t work well with more than a few values because labelling small segments is challenging, and it can be difficult to accurately compare the sizes of the segments. + Use the Pie chart when you need to show your audience a quick view of how data is distributed + proportionately, with percentages highlighted. The different values you present must add up to a total and + equal 100%. + + The downsides are that Pie charts tend to occupy more space than other charts, they don’t + work well with more than a few values because labelling small segments is challenging, and it can be + difficult to accurately compare the sizes of the segments. """ ), @@ -306,9 +306,7 @@ donut = vm.Page( title="Donut", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), + layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( text=""" @@ -366,9 +364,7 @@ boxplot = vm.Page( title="Boxplot", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), + layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( text=""" @@ -428,9 +424,7 @@ violin = vm.Page( title="Violin", - layout=vm.Layout( - grid=[[0, 0, 0, 0, 0]] * 1 + [[1, 1, 1, 2, 2]] * 2, - ), + layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( text=""" From e139a11641041479b244391cfb12cf6b18396270 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 8 Jul 2024 11:44:22 +0200 Subject: [PATCH 034/109] Move to different folder --- vizro-core/examples/charts/README.md | 30 ++ vizro-core/examples/charts/app.py | 87 ++++ .../examples/charts/assets/css/custom.css | 72 +++ vizro-core/examples/charts/assets/favicon.ico | Bin 0 -> 1535 bytes .../examples/charts/assets/images/app.svg | 9 + .../charts/assets/images/charts/arc.svg | 25 + .../charts/assets/images/charts/bar.svg | 20 + .../charts/assets/images/charts/barcode.svg | 136 +++++ .../charts/assets/images/charts/boxplot.svg | 78 +++ .../assets/images/charts/bubble-timeline.svg | 35 ++ .../charts/assets/images/charts/bubble.svg | 32 ++ .../charts/assets/images/charts/bullet.svg | 41 ++ .../charts/assets/images/charts/butterfly.svg | 27 + .../charts/assets/images/charts/chord.svg | 23 + .../assets/images/charts/choropleth.svg | 126 +++++ .../assets/images/charts/column-line.svg | 20 + .../charts/assets/images/charts/column.svg | 20 + .../assets/images/charts/cumulative-curve.svg | 18 + .../assets/images/charts/diverging-bar.svg | 21 + .../charts/assets/images/charts/donut.svg | 25 + .../assets/images/charts/dot-density.svg | 265 ++++++++++ .../charts/assets/images/charts/dot-plot.svg | 30 ++ .../charts/assets/images/charts/fan.svg | 21 + .../charts/assets/images/charts/flow-map.svg | 80 +++ .../charts/assets/images/charts/funnel.svg | 19 + .../charts/assets/images/charts/gantt.svg | 20 + .../assets/images/charts/heatmap-matrix.svg | 179 +++++++ .../charts/assets/images/charts/heatmap.svg | 27 + .../charts/assets/images/charts/histogram.svg | 25 + .../charts/assets/images/charts/line.svg | 17 + .../charts/assets/images/charts/lollipop.svg | 26 + .../charts/assets/images/charts/marimekko.svg | 27 + .../charts/assets/images/charts/network.svg | 44 ++ .../assets/images/charts/ordered-bubble.svg | 20 + .../charts/assets/images/charts/parallel.svg | 26 + .../charts/assets/images/charts/pictogram.svg | 63 +++ .../charts/assets/images/charts/pie.svg | 29 ++ .../images/charts/proportional-symbol.svg | 467 +++++++++++++++++ .../charts/assets/images/charts/radar.svg | 33 ++ .../charts/assets/images/charts/radial.svg | 18 + .../charts/assets/images/charts/sankey.svg | 20 + .../assets/images/charts/scatter-matrix.svg | 176 +++++++ .../charts/assets/images/charts/scatter.svg | 56 ++ .../charts/assets/images/charts/slope.svg | 32 ++ .../charts/assets/images/charts/sparkline.svg | 33 ++ .../assets/images/charts/stacked-column.svg | 27 + .../assets/images/charts/stepped-line.svg | 19 + .../charts/assets/images/charts/surplus.svg | 29 ++ .../charts/assets/images/charts/treemap.svg | 24 + .../charts/assets/images/charts/venn.svg | 18 + .../charts/assets/images/charts/violin.svg | 131 +++++ .../charts/assets/images/charts/waterfall.svg | 20 + vizro-core/examples/charts/utils/__init__.py | 1 + vizro-core/examples/charts/utils/_charts.py | 58 +++ .../examples/charts/utils/_pages_charts.py | 479 ++++++++++++++++++ .../examples/charts/utils/_tabs_home.py | 400 +++++++++++++++ 56 files changed, 3804 insertions(+) create mode 100644 vizro-core/examples/charts/README.md create mode 100644 vizro-core/examples/charts/app.py create mode 100644 vizro-core/examples/charts/assets/css/custom.css create mode 100644 vizro-core/examples/charts/assets/favicon.ico create mode 100644 vizro-core/examples/charts/assets/images/app.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/arc.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/bar.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/barcode.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/boxplot.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/bubble-timeline.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/bubble.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/bullet.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/butterfly.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/chord.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/choropleth.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/column-line.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/column.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/cumulative-curve.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/diverging-bar.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/donut.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/dot-density.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/dot-plot.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/fan.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/flow-map.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/funnel.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/gantt.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/heatmap-matrix.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/heatmap.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/histogram.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/line.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/lollipop.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/marimekko.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/network.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/ordered-bubble.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/parallel.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/pictogram.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/pie.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/proportional-symbol.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/radar.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/radial.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/sankey.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/scatter-matrix.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/scatter.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/slope.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/sparkline.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/stacked-column.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/stepped-line.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/surplus.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/treemap.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/venn.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/violin.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/waterfall.svg create mode 100644 vizro-core/examples/charts/utils/__init__.py create mode 100644 vizro-core/examples/charts/utils/_charts.py create mode 100644 vizro-core/examples/charts/utils/_pages_charts.py create mode 100644 vizro-core/examples/charts/utils/_tabs_home.py diff --git a/vizro-core/examples/charts/README.md b/vizro-core/examples/charts/README.md new file mode 100644 index 000000000..7704dcb63 --- /dev/null +++ b/vizro-core/examples/charts/README.md @@ -0,0 +1,30 @@ +# KPI dashboard + +This demo dashboard provides an example of a Key Performance Indicator (KPI) dashboard, designed to help users get started and extend further. +It uses fictional budget data to demonstrate the capabilities of Vizro using real world applications. + +Special thanks to the [#RWFD Real World Fake Data initiative](https://opendatainitiative.io/), a community project that +provides high-quality fake data for creating realistic dashboard examples for real-world applications. + +Note: The data has been additionally edited for the purpose of this example. + +Gif to KPI dashboard + +## How to run the example locally + +1. If you have `hatch` set up, run the example with the command `hatch run example kpi`. Otherwise, run the `app.py` file with your environment activated where `vizro` is installed. +2. You should now be able to access the app locally via http://127.0.0.1:8050/. + +## Possible future iterations + +- Enable selection of year filter +- Enable current year vs. past year comparison +- Enable dynamic KPI Cards +- Bar - Enable drill-downs from Issue to Sub-issue and Product to Sub-product +- Bar - Reformat numbers with commas in bar chart +- Bar - Left-align y-axis labels +- Bar - Shorten labels +- Line - Customize function to always show selected year vs. past year +- Table-view - Check why date format does not work on `Date Received` +- Table-view - Add icons to `On time?` column +- Table-view - Improve speed by applying cache or overcome limitation that entire data set is loaded in diff --git a/vizro-core/examples/charts/app.py b/vizro-core/examples/charts/app.py new file mode 100644 index 000000000..9d5dda5a0 --- /dev/null +++ b/vizro-core/examples/charts/app.py @@ -0,0 +1,87 @@ +"""Example to show dashboard configuration specified as pydantic models.""" + +import vizro.models as vm +from utils._pages_charts import * +from utils._tabs_home import * +from vizro import Vizro + +# HOME PAGE ----- +homepage = vm.Page( + title="Overview", + components=[ + vm.Tabs( + tabs=[ + home_all, + home_deviation, + home_correlation, + home_ranking, + home_distribution, + home_magnitude, + home_time, + home_part, + home_flow, + home_spatial, + ] + ), + ], +) + + +dashboard = vm.Dashboard( + pages=[homepage, bar, column, line, scatter, pie, donut, boxplot, violin], + navigation=vm.Navigation( + nav_selector=vm.NavBar( + items=[ + vm.NavLink(label="Overview", pages=["Overview"], icon="Home"), + vm.NavLink( + label="Deviation", + pages={"Deviation": ["Line", "Scatter"]}, + icon="Planner Review", + ), + vm.NavLink( + label="Correlation", + pages={"Deviation": ["Scatter"]}, + icon="Bubble Chart", + ), + vm.NavLink( + label="Ranking", + pages={"Ranking": ["Boxplot"]}, + icon="Stacked Bar Chart", + ), + vm.NavLink( + label="Distribution", + pages={"Distribution": ["Pie", "Donut", "Violin"]}, + icon="Waterfall Chart", + ), + vm.NavLink( + label="Magnitude", + pages={"Magnitude": ["Bar", "Column"]}, + icon="Bar Chart", + ), + vm.NavLink( + label="Time", + pages={"Time": ["Bar", "Column", "Scatter", "Line"]}, + icon="Timeline", + ), + vm.NavLink( + label="Part-to-whole", + pages={"Part-to-whole": ["Donut", "Pie"]}, + icon="Donut Small", + ), + vm.NavLink( + label="Flow", + pages={"Flow": ["Line"]}, + icon="Stacked Line Chart", + ), + vm.NavLink( + label="Spatial", + pages={"Spatial": ["Line"]}, + icon="Map", + ), + ] + ) + ), +) + +if __name__ == "__main__": + Vizro().build(dashboard).run() diff --git a/vizro-core/examples/charts/assets/css/custom.css b/vizro-core/examples/charts/assets/css/custom.css new file mode 100644 index 000000000..755d3106c --- /dev/null +++ b/vizro-core/examples/charts/assets/css/custom.css @@ -0,0 +1,72 @@ +#page-header { + padding-left: 8px; +} + +img[src*="#chart-icon"] { + width: 100%; +} + +.code-clipboard { + font-size: 20px; + position: absolute; + right: 14px; + top: 12px; +} + +code.language-python.hljs { + padding: 0; +} + +.hljs { + background: unset; + color: unset; + font-family: unset; +} + +.hljs-string { + color: var(--text-code-string); + font-family: unset; +} + +.hljs-keyword { + color: var(--text-code-keyword); + font-family: unset; +} + +.html-intro { + border-left: 4px solid var(--text-secondary); + color: var(--text-secondary); + padding: 12px; +} + +.flex-container .card { + height: 208px; + width: 176px; +} + +.flex-container { + display: flex; + flex-wrap: wrap; + gap: 20px; +} + +.flex-container h4 { + color: var(--text-secondary); + margin: 0; + padding-top: 12px; + text-align: center; +} + +.intro-text { + border-left: 4px solid var(--text-secondary); + padding: 12px; +} + +.intro-text p { + font-size: 16px; + line-height: 20px; +} + +#left-main { + width: 288px; +} diff --git a/vizro-core/examples/charts/assets/favicon.ico b/vizro-core/examples/charts/assets/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..240c9f541de1e47599bb047e63b008ccb268a4c3 GIT binary patch literal 1535 zcmb7^|4-Cr9LJ0H*!7UCcjXESCb#1RycT7CV-hhtcH9^4043OU&ShQAA|Bbo1PvqV zpg}l#DB!-hFqGSwOmclf`fM>V%7{< zykAd$dGhpatMg}DR#-3$%MJ#-4H%Ze8q1uilMfFa+poWfmcSdW7?wpDD+3!I$DI)wVamU8PB3AY1=7qs{AzwDgzZFsi5}rRLAWYoYBcPNPDL_(I-!w0oa;?fD zp0&oowVLS>7x%Y5^-RzOde*0dYc|t=y103L>Y1P?0$_$>+q?LbgTL3!r(WXkb@C}E z-_pyc3i*2`C6mN7bQyJlwWNMf_*mj zhESQ%6UB2pd~k<#4?zy zS4%vggJiE!%2qt~vzE+7&Qdt%R|7%NVPmgZl}S9-s3pshGaFW^0T1}aO#j|ze`;l` zDCTf6-@S@E=;FIw+`($q><8!ks<|4pdsXvmpxvjMJ)r%F07v*mHxgGv@kJyqhvHf! z5-@E>Vg*c>Akhue%aFJNrdcFfVA>+3TEx^2Jocp~GX(uz)c!if_K=K^WY-jP{Z4*Y z4af_s=lc1VhlLLaC}yJc1}M@fodd-plrDqfCX^eS;T zLxLR5a+n0O`m}|_Fs$nuBd%W5%1AwF`p5&Pxw@tV%kp% zr7lh#5K5h#Ix3VpxR!pQwuoyP5o%pr%Q2zW$+eskYIUBCR)oQ9g|u;yM`!V75=!&L z3?`a(n`cs*<$Ej0>a+K+;&ZJ`UcIWH{IXu*q>C#X5Kij(gs@W2qryrDr}hX7`Y(?O z3wr)c_%;B9O4QNCdzMM}yLnH6bib4Lu+sis-m^uzZ-Ub2`212Rox|tLMH3`u>P6Ec zF;fd1u?NV;Tt2;D)hzq==Ce>bxHB^Z9A^#~SlMCVW=hA8cj6%s@A*r|W2f7699eC& zJ8JZH{HuKiRvHb=8108OM!WYP9p5Q5_U;H8?ZXX5`%IgG8DsC~y)*Ux*sZr0<2Nfm RKGGx`cCfn6J6 + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/arc.svg b/vizro-core/examples/charts/assets/images/charts/arc.svg new file mode 100644 index 000000000..35a5c81f8 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/arc.svg @@ -0,0 +1,25 @@ + + + + Group 6 Copy 34 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/bar.svg b/vizro-core/examples/charts/assets/images/charts/bar.svg new file mode 100644 index 000000000..342907fe4 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/bar.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 10 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/barcode.svg b/vizro-core/examples/charts/assets/images/charts/barcode.svg new file mode 100644 index 000000000..cbe2ffc23 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/barcode.svg @@ -0,0 +1,136 @@ + + + + Group 6 Copy 14 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/boxplot.svg b/vizro-core/examples/charts/assets/images/charts/boxplot.svg new file mode 100644 index 000000000..224deddd8 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/boxplot.svg @@ -0,0 +1,78 @@ + + + + Group 6 Copy 15 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/charts/assets/images/charts/bubble-timeline.svg new file mode 100644 index 000000000..b98e5af32 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/bubble-timeline.svg @@ -0,0 +1,35 @@ + + + + Group 6 Copy 22 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/bubble.svg b/vizro-core/examples/charts/assets/images/charts/bubble.svg new file mode 100644 index 000000000..a939659fc --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/bubble.svg @@ -0,0 +1,32 @@ + + + + Group 6 Copy 3 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/bullet.svg b/vizro-core/examples/charts/assets/images/charts/bullet.svg new file mode 100644 index 000000000..d7f708173 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/bullet.svg @@ -0,0 +1,41 @@ + + + + Group 6 Copy 33 + Created with Sketch. + + + + + + + + + + + + + + + + + + 0 + + + 2 + + + 4 + + + 6 + + + 8 + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/butterfly.svg b/vizro-core/examples/charts/assets/images/charts/butterfly.svg new file mode 100644 index 000000000..5f0281a60 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/butterfly.svg @@ -0,0 +1,27 @@ + + + + Group 6 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/chord.svg b/vizro-core/examples/charts/assets/images/charts/chord.svg new file mode 100644 index 000000000..8eecba457 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/chord.svg @@ -0,0 +1,23 @@ + + + + Group 6 Copy 29 + Created with Sketch. + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/choropleth.svg b/vizro-core/examples/charts/assets/images/charts/choropleth.svg new file mode 100644 index 000000000..6a00da7bd --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/choropleth.svg @@ -0,0 +1,126 @@ + + + + Group 6 Copy 44 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/column-line.svg b/vizro-core/examples/charts/assets/images/charts/column-line.svg new file mode 100644 index 000000000..c4af7f626 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/column-line.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 4 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/column.svg b/vizro-core/examples/charts/assets/images/charts/column.svg new file mode 100644 index 000000000..fca0509d6 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/column.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 11 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/charts/assets/images/charts/cumulative-curve.svg new file mode 100644 index 000000000..93cb42b5b --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/cumulative-curve.svg @@ -0,0 +1,18 @@ + + + + Group 6 Copy 17 + Created with Sketch. + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/diverging-bar.svg b/vizro-core/examples/charts/assets/images/charts/diverging-bar.svg new file mode 100644 index 000000000..bb0b80977 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/diverging-bar.svg @@ -0,0 +1,21 @@ + + + + Group 6 Copy + Created with Sketch. + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/donut.svg b/vizro-core/examples/charts/assets/images/charts/donut.svg new file mode 100644 index 000000000..df72ab3ca --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/donut.svg @@ -0,0 +1,25 @@ + + + + Group 6 Copy 24 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/dot-density.svg b/vizro-core/examples/charts/assets/images/charts/dot-density.svg new file mode 100644 index 000000000..f73372105 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/dot-density.svg @@ -0,0 +1,265 @@ + + + + Group 6 Copy 5 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/dot-plot.svg b/vizro-core/examples/charts/assets/images/charts/dot-plot.svg new file mode 100644 index 000000000..6640e2813 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/dot-plot.svg @@ -0,0 +1,30 @@ + + + + Group 6 Copy 13 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/fan.svg b/vizro-core/examples/charts/assets/images/charts/fan.svg new file mode 100644 index 000000000..cd0c938c3 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/fan.svg @@ -0,0 +1,21 @@ + + + + Group 6 Copy 39 + Created with Sketch. + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/flow-map.svg b/vizro-core/examples/charts/assets/images/charts/flow-map.svg new file mode 100644 index 000000000..238505d2a --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/flow-map.svg @@ -0,0 +1,80 @@ + + + + Group 6 Copy 6 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/funnel.svg b/vizro-core/examples/charts/assets/images/charts/funnel.svg new file mode 100644 index 000000000..4d33728ad --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/funnel.svg @@ -0,0 +1,19 @@ + + + + Group 6 Copy 36 + Created with Sketch. + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/gantt.svg b/vizro-core/examples/charts/assets/images/charts/gantt.svg new file mode 100644 index 000000000..543e0ed85 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/gantt.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 21 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/heatmap-matrix.svg b/vizro-core/examples/charts/assets/images/charts/heatmap-matrix.svg new file mode 100644 index 000000000..84c13f73a --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/heatmap-matrix.svg @@ -0,0 +1,179 @@ + + + + Group 6 Copy 40 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + v1 + + + 0.1 + + + 0.5 + + + v1 + + + v2 + + + v3 + + + v4 + + + v5 + + + v2 + + + v3 + + + v4 + + + v5 + + + 1.0 + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/heatmap.svg b/vizro-core/examples/charts/assets/images/charts/heatmap.svg new file mode 100644 index 000000000..fb40db538 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/heatmap.svg @@ -0,0 +1,27 @@ + + + + Group 6 Copy 5 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/histogram.svg b/vizro-core/examples/charts/assets/images/charts/histogram.svg new file mode 100644 index 000000000..b61f86c45 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/histogram.svg @@ -0,0 +1,25 @@ + + + + Group 6 Copy 12 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/line.svg b/vizro-core/examples/charts/assets/images/charts/line.svg new file mode 100644 index 000000000..e6a042d24 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/line.svg @@ -0,0 +1,17 @@ + + + + Group 6 Copy 19 + Created with Sketch. + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/lollipop.svg b/vizro-core/examples/charts/assets/images/charts/lollipop.svg new file mode 100644 index 000000000..f04bc8ed7 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/lollipop.svg @@ -0,0 +1,26 @@ + + + + Group 6 Copy 8 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/marimekko.svg b/vizro-core/examples/charts/assets/images/charts/marimekko.svg new file mode 100644 index 000000000..38fb0de77 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/marimekko.svg @@ -0,0 +1,27 @@ + + + + Group 6 Copy 26 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/network.svg b/vizro-core/examples/charts/assets/images/charts/network.svg new file mode 100644 index 000000000..604485ef0 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/network.svg @@ -0,0 +1,44 @@ + + + + Group 6 Copy 32 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/charts/assets/images/charts/ordered-bubble.svg new file mode 100644 index 000000000..bef4e6929 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/ordered-bubble.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 7 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/parallel.svg b/vizro-core/examples/charts/assets/images/charts/parallel.svg new file mode 100644 index 000000000..16c16d68c --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/parallel.svg @@ -0,0 +1,26 @@ + + + + Group 6 Copy 43 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/pictogram.svg b/vizro-core/examples/charts/assets/images/charts/pictogram.svg new file mode 100644 index 000000000..c7a787b0a --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/pictogram.svg @@ -0,0 +1,63 @@ + + + + Group 6 Copy 42 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/pie.svg b/vizro-core/examples/charts/assets/images/charts/pie.svg new file mode 100644 index 000000000..c32e7c8b1 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/pie.svg @@ -0,0 +1,29 @@ + + + + Group 6 Copy 23 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/proportional-symbol.svg b/vizro-core/examples/charts/assets/images/charts/proportional-symbol.svg new file mode 100644 index 000000000..cade9887d --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/proportional-symbol.svg @@ -0,0 +1,467 @@ + + + + Group 6 Copy 4 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/radar.svg b/vizro-core/examples/charts/assets/images/charts/radar.svg new file mode 100644 index 000000000..5906b0740 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/radar.svg @@ -0,0 +1,33 @@ + + + + Group 6 Copy 38 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/radial.svg b/vizro-core/examples/charts/assets/images/charts/radial.svg new file mode 100644 index 000000000..0b8f96a90 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/radial.svg @@ -0,0 +1,18 @@ + + + + Group 6 Copy 37 + Created with Sketch. + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/sankey.svg b/vizro-core/examples/charts/assets/images/charts/sankey.svg new file mode 100644 index 000000000..9e9ad9d68 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/sankey.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 30 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/charts/assets/images/charts/scatter-matrix.svg new file mode 100644 index 000000000..add1a0995 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/scatter-matrix.svg @@ -0,0 +1,176 @@ + + + + Group 6 Copy 41 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + v1 + + + v2 + + + v3 + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/scatter.svg b/vizro-core/examples/charts/assets/images/charts/scatter.svg new file mode 100644 index 000000000..3993f505f --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/scatter.svg @@ -0,0 +1,56 @@ + + + + Group 6 Copy 2 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/slope.svg b/vizro-core/examples/charts/assets/images/charts/slope.svg new file mode 100644 index 000000000..01b770af5 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/slope.svg @@ -0,0 +1,32 @@ + + + + Group 6 Copy 9 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/sparkline.svg b/vizro-core/examples/charts/assets/images/charts/sparkline.svg new file mode 100644 index 000000000..ed269cd53 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/sparkline.svg @@ -0,0 +1,33 @@ + + + + Group 6 Copy 35 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/stacked-column.svg b/vizro-core/examples/charts/assets/images/charts/stacked-column.svg new file mode 100644 index 000000000..7afbe494c --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/stacked-column.svg @@ -0,0 +1,27 @@ + + + + Group 6 Copy 25 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/stepped-line.svg b/vizro-core/examples/charts/assets/images/charts/stepped-line.svg new file mode 100644 index 000000000..5bb9c361e --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/stepped-line.svg @@ -0,0 +1,19 @@ + + + + Group 6 Copy 18 + Created with Sketch. + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/surplus.svg b/vizro-core/examples/charts/assets/images/charts/surplus.svg new file mode 100644 index 000000000..5f6baaf23 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/surplus.svg @@ -0,0 +1,29 @@ + + + + Group 6 Copy 6 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/treemap.svg b/vizro-core/examples/charts/assets/images/charts/treemap.svg new file mode 100644 index 000000000..a09929e94 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/treemap.svg @@ -0,0 +1,24 @@ + + + + Group 6 Copy 27 + Created with Sketch. + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/venn.svg b/vizro-core/examples/charts/assets/images/charts/venn.svg new file mode 100644 index 000000000..753928cf7 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/venn.svg @@ -0,0 +1,18 @@ + + + + Group 6 Copy 28 + Created with Sketch. + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/violin.svg b/vizro-core/examples/charts/assets/images/charts/violin.svg new file mode 100644 index 000000000..537b0ecfe --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/violin.svg @@ -0,0 +1,131 @@ + + + + Group 6 Copy 16 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/waterfall.svg b/vizro-core/examples/charts/assets/images/charts/waterfall.svg new file mode 100644 index 000000000..3b9072189 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/waterfall.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 31 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/utils/__init__.py b/vizro-core/examples/charts/utils/__init__.py new file mode 100644 index 000000000..11387ccac --- /dev/null +++ b/vizro-core/examples/charts/utils/__init__.py @@ -0,0 +1 @@ +"""Utils folder to contain helper functions and custom charts/components.""" diff --git a/vizro-core/examples/charts/utils/_charts.py b/vizro-core/examples/charts/utils/_charts.py new file mode 100644 index 000000000..5661e68f6 --- /dev/null +++ b/vizro-core/examples/charts/utils/_charts.py @@ -0,0 +1,58 @@ +"""Contains custom components and charts used inside the dashboard.""" + +from typing import Literal + +import dash_bootstrap_components as dbc +import vizro.models as vm +from dash import dcc, html + +try: + from pydantic.v1 import Field +except ImportError: # pragma: no cov + from pydantic import Field + + +# CUSTOM COMPONENTS ------------------------------------------------------------- +class CodeClipboard(vm.VizroBaseModel): + type: Literal["code_clipboard"] = "code_clipboard" + title: str = "Code" + text: str + + def build(self): + return dbc.Accordion( + [ + dbc.AccordionItem( + dbc.Card( + [ + html.H3(self.title), + dcc.Markdown(self.text, id=self.id, className="code-block"), + dcc.Clipboard(target_id=self.id, className="code-clipboard"), + ] + ), + title="SHOW CODE", + ) + ], + start_collapsed=True, + ) + + +class Markdown(vm.VizroBaseModel): + type: Literal["markdown"] = "markdown" + text: str = Field( + ..., description="Markdown string to create card title/text that should adhere to the CommonMark Spec." + ) + classname: str = "" + + def build(self): + return dcc.Markdown(id=self.id, children=self.text, dangerously_allow_html=False, className=self.classname) + + +class FlexContainer(vm.Container): + """Custom flex `Container`.""" + + type: Literal["flex_container"] = "flex_container" + + def build(self): + return html.Div( + id=self.id, children=[component.build() for component in self.components], className="flex-container" + ) diff --git a/vizro-core/examples/charts/utils/_pages_charts.py b/vizro-core/examples/charts/utils/_pages_charts.py new file mode 100644 index 000000000..a69a86aee --- /dev/null +++ b/vizro-core/examples/charts/utils/_pages_charts.py @@ -0,0 +1,479 @@ +"""Contains custom components and charts used inside the dashboard.""" + +import vizro.models as vm +import vizro.plotly.express as px + +from ._charts import CodeClipboard, FlexContainer, Markdown + +PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 + +gapminder = px.data.gapminder() +iris = px.data.iris() +stocks = px.data.stocks() +tips = px.data.tips() + +vm.Page.add_type("components", CodeClipboard) +vm.Page.add_type("components", FlexContainer) +vm.Container.add_type("components", Markdown) + +# CHART PAGES ------------------------------------------------------------- +line = vm.Page( + title="Line", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a Line? + + A Line chart presents a series of data points over a continuous interval or time period, joined together with straight lines. + +   + + #### When to use it? + + You should select a Line chart when you want to show trends and invite analysis of how the data has changed + over time. Usually, your y-axis will show a quantitative value and your x-axis will be marked as a timescale + or a sequence of intervals. You can also display negative values below the x-axis. If you wish to group + several lines (different data series) in the same chart, try to limit yourself to 3-4 to avoid cluttering + up your chart and making it harder for the audience to read. + """ + ), + vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + gapminder = px.data.gapminder() + + page = vm.Page( + title="Line", + components=[ + vm.Graph( + figure=px.line(stocks, x="date", y="GOOG") + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) + + +scatter = vm.Page( + title="Scatter", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a scatter? + + A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two + different variables - one plotted along the x-axis and the other plotted along the y-axis. + +   + + #### When to use it? + + Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes + called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when + you have paired numerical data and you want to see if one variable impacts the other. However, do remember + that correlation is not causation. Make sure your audience does not draw the wrong conclusions. + """ + ), + vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + iris = px.data.iris() + + page = vm.Page( + title="Scatter", + components=[ + vm.Graph( + figure=px.scatter( + iris, x="sepal_width", y="sepal_length", color="species" + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) + +bar = vm.Page( + title="Bar", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a bar chart? + + A Bar chart displays bars in lengths proportional to the values they represent. One axis of + the chart shows the categories to compare and the other axis provides a value scale, + starting with zero. + +   + + #### When to use it? + + Select a Bar chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents **how many?** in each category. You can + arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling + clearly when you have a large number of bars. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + + """ + ), + vm.Graph( + figure=px.bar( + data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), + x="total_bill", + y="day", + orientation="h", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Bar", + components=[ + vm.Graph( + figure=px.bar(data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), x="total_bill", y="day",orientation="h") + ) + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) + + +column = vm.Page( + title="Column", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a column chart? + + A Column chart is a vertical Bar chart, with column lengths varying according to the + categorical value they represent. The scale is presented on the y-axis, starting with zero. + +   + + #### When to use it? + + Select a Column chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents `how many?` in each category. You can + arrange your columns in any order to fit the message you wish to emphasise. Be mindful of + labelling clearly when you have a large number of columns. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + + """ + ), + vm.Graph( + figure=px.bar( + data_frame=gapminder.query("country == 'China'"), + x="year", + y="gdpPercap", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + gapminder = px.data.gapminder() + + page = vm.Page( + title="Column", + components=[ + vm.Graph( + figure=px.bar( + data_frame=gapminder.query("country == 'China'"), x="year", y="gdpPercap" + ) + ) + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) + + +pie = vm.Page( + title="Pie", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a pie chart? + + A Pie chart is a circular chart divided into segments to show proportions and percentages between categories. The circle represents the whole. + +   + + #### When to use it? + + Use the Pie chart when you need to show your audience a quick view of how data is distributed + proportionately, with percentages highlighted. The different values you present must add up to a total and + equal 100%. + + The downsides are that Pie charts tend to occupy more space than other charts, they don’t + work well with more than a few values because labelling small segments is challenging, and it can be + difficult to accurately compare the sizes of the segments. + + """ + ), + vm.Graph( + figure=px.pie( + data_frame=tips, + values="tip", + names="day", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Pie", + components=[ + vm.Graph( + figure=px.pie( + data_frame=tips, + values='tip', names='day', + ) + ) + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) + + +donut = vm.Page( + title="Donut", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a donut chart? + + A Donut chart looks like a Pie chart, but has a blank space in the centre which may contain additional information. + +   + + #### When to use it? + + A Donut chart can be used in place of a Pie chart, particularly when you are short of space or have extra information you would like to share about the data. It may also be more effective if you wish your audience to focus on the length of the arcs of the sections instead of the proportions of the segment sizes. + + """ + ), + vm.Graph( + figure=px.pie( + data_frame=tips, + values="tip", + names="day", + hole=0.4, + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Pie", + components=[ + vm.Graph( + figure=px.pie( + data_frame=tips, + values='tip', names='day', hole=0.4 + ) + ) + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) + + +boxplot = vm.Page( + title="Boxplot", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a boxplot? + + A Box Plot (also known as a Box and Whisker Plot) provides a visual display of multiple datasets, indicating the median (centre) and the range of the data for each. + +   + + #### When to use it? + + Choose a Box Plot when you need to summarise distributions between many groups or datasets. It takes up less space than many other charts. + + Create boxes to display the median, and the upper and lower quartiles. Add ‘whiskers’ to highlight variability outside the upper and lower quartiles. You can add outliers as dots beyond, but in line with the whiskers. + + """ + ), + vm.Graph( + figure=px.box( + data_frame=tips, + y="total_bill", + x="day", + color="day", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Boxplot", + components=[ + vm.Graph( + figure=px.boxplot( + data_frame=tips, + y='total_bill', x='day', color='day', + ) + ), + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) + + +violin = vm.Page( + title="Violin", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a violin? + + A Violin Plot is similar to a Box Plot, but works better for visualising more complex distributions and their probability density at different values. + +   + + #### When to use it? + + Use this chart to go beyond the simple Box Plot and show the distribution shape of the data, the inter-quartile range, the confidence intervals and the median. + """ + ), + vm.Graph( + figure=px.violin( + data_frame=tips, + y="total_bill", + x="day", + color="day", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Violin", + components=[ + vm.Graph( + figure=px.violin( + data_frame=tips, + y='total_bill', x='day', color='day', + ) + ), + ] + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + + """ + ), + ], +) diff --git a/vizro-core/examples/charts/utils/_tabs_home.py b/vizro-core/examples/charts/utils/_tabs_home.py new file mode 100644 index 000000000..cba5bcbf8 --- /dev/null +++ b/vizro-core/examples/charts/utils/_tabs_home.py @@ -0,0 +1,400 @@ +"""Contains custom components and charts used inside the dashboard.""" + +import vizro.models as vm +import vizro.plotly.express as px + +from ._charts import CodeClipboard, FlexContainer, Markdown + +gapminder = px.data.gapminder() +vm.Page.add_type("components", CodeClipboard) +vm.Page.add_type("components", FlexContainer) +vm.Container.add_type("components", Markdown) +vm.Container.add_type("components", FlexContainer) + + +DEVIATION_CHARTS = sorted(["line", "scatter", "slope", "lollipop", "diverging-bar"]) +CORRELATION_CHARTS = ["scatter"] +RANKING_CHARTS = sorted( + [ + "column", + "stacked-column", + "ordered-bubble", + "column-line", + "bar", + "donut", + "arc", + "lollipop", + "waterfall", + "diverging-bar", + "boxplot", + ] +) +DISTRIBUTION_CHARTS = sorted( + [ + "histogram", + "butterfly", + "pie", + "donut", + "arc", + "violin", + "lollipop", + "cumulative-curve", + "waterfall", + "treemap", + "venn", + "barcode", + ] +) +MAGNITUDE_CHARTS = sorted( + [ + "column", + "marimekko", + "stacked-column", + "ordered-bubble", + "column-line", + "surplus", + "butterfly", + "bubble-timeline", + "bar", + "pie", + "donut", + "arc", + "violin", + "slope", + "lollipop", + "cumulative-curve", + "waterfall", + "treemap", + "venn", + "diverging-bar", + "bullet", + "dot-plot", + ] +) +TIME_CHARTS = sorted( + [ + "column", + "gantt", + "column-line", + "bubble-timeline", + "bar", + "line", + "scatter", + "lollipop", + "diverging-bar", + "stepped-line", + "sparkline", + ] +) +PART_TO_WHOLE_CHARTS = sorted( + [ + "marimekko", + "stacked-column", + "column-line", + "pie", + "donut", + "arc", + "waterfall", + "treemap", + "venn", + ] +) +FLOW_CHARTS = sorted(["gantt", "line", "slope", "stepped-line"]) +SPATIAL_CHARTS = sorted(["choropleth", "dot-density", "flow-map"]) + +ALL_CHARTS = sorted( + set( + DEVIATION_CHARTS + + CORRELATION_CHARTS + + RANKING_CHARTS + + DISTRIBUTION_CHARTS + + MAGNITUDE_CHARTS + + TIME_CHARTS + + PART_TO_WHOLE_CHARTS + + FLOW_CHARTS + + SPATIAL_CHARTS + ) +) + + +# HOMEPAGE ------------------------------------------------------------- +home_all = vm.Container( + title="All", + components=[ + FlexContainer( + title="", + components=[ + vm.Card( + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) + + #### {chart.replace("-", " ").title()} + """, + href=f"/{chart}", + ) + for chart in ALL_CHARTS + ], + ) + ], +) + +home_deviation = vm.Container( + title="Deviation", + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), + components=[ + Markdown( + text=""" + Deviation enables you to draw attention to variations (+/-) from a fixed reference point. + Often this reference point is zero, but you might also show a target or a long-term average. + You can also use deviation to express a positive, neutral or negative sentiment. + """, + classname="intro-text", + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) + + #### {chart.replace("-", " ").title()} + """, + href=f"/{chart}", + ) + for chart in DEVIATION_CHARTS + ], + ), + ], +) + +home_correlation = vm.Container( + title="Correlation", + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), + components=[ + Markdown( + text=""" + Correlation helps you show the relationship between two or more variables. It is important that you + make it clear to your audience whether or not the relationship is causal, i.e., whether one causes the + other. + """, + classname="intro-text", + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) + + #### {chart.replace("-", " ").title()} + """, + href=f"/{chart}", + ) + for chart in CORRELATION_CHARTS + ], + ), + ], +) + +home_ranking = vm.Container( + title="Ranking", + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), + components=[ + Markdown( + text=""" + Ranking enables you to present items in an ordered list. You will use this when you want to highlight the + position of an item rather than its absolute or relative value. You might want to emphasise the most + interesting points with highlighting or labels to ensure the reader understands what matters most. + """, + classname="intro-text", + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) + + #### {chart.replace("-", " ").title()} + """, + href=f"/{chart}", + ) + for chart in RANKING_CHARTS + ], + ), + ], +) + +home_distribution = vm.Container( + title="Distribution", + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), + components=[ + Markdown( + text=""" + Distribution helps you to present all the possible values (or intervals) of your data and how often they + occur. You can organise the data to show the number or percentage of items in a specified group, what shape + the group takes, where the centre lies, and how much variability there is in the data. This shape + (or ‘skew’) of a distribution can be a powerful way for you to highlight either the existence or lack of + uniformity or equality in the data. + """, + classname="intro-text", + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) + + #### {chart.replace("-", " ").title()} + """, + href=f"/{chart}", + ) + for chart in DISTRIBUTION_CHARTS + ], + ), + ], +) + +home_magnitude = vm.Container( + title="Magnitude", + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), + components=[ + Markdown( + text=""" + Magnitude allows you to emphasise size comparisons of ‘counted’ items in your data set. You can show + relative comparisons (whether something is larger or smaller) or absolute differences (where the nuances + are most interesting). Typically, you will use magnitude for actual numbers versus calculated rates or + percentages. + """, + classname="intro-text", + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) + + #### {chart.replace("-", " ").title()} + """, + href=f"/{chart}", + ) + for chart in MAGNITUDE_CHARTS + ], + ), + ], +) + +home_time = vm.Container( + title="Time", + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), + components=[ + Markdown( + text=""" + Time helps you draw attention to important trends emerging over a specified period. The time period you + select could be as short as seconds or as long as centuries. What matters most is selecting the correct + period of time to best show your audience the message they need to take away. + """, + classname="intro-text", + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) + + #### {chart.replace("-", " ").title()} + """, + href=f"/{chart}", + ) + for chart in TIME_CHARTS + ], + ), + ], +) + +home_part = vm.Container( + title="Part-to-whole", + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), + components=[ + Markdown( + text=""" + Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the + size of the parts to be most important, a magnitude chart may be more appropriate. + """, + classname="intro-text", + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) + + #### {chart.replace("-", " ").title()} + """, + href=f"/{chart}", + ) + for chart in PART_TO_WHOLE_CHARTS + ], + ), + ], +) + +home_flow = vm.Container( + title="Flow", + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), + components=[ + Markdown( + text=""" + With flow charts, you can highlight the quantity or the intensity of the movement between more than one + state or condition. The flow might be steps in a logical sequence or movement between different geographical + locations. + """, + classname="intro-text", + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) + + #### {chart.replace("-", " ").title()} + """, + href=f"/{chart}", + ) + for chart in FLOW_CHARTS + ], + ), + ], +) + +home_spatial = vm.Container( + title="Spatial", + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), + components=[ + Markdown( + text=""" + Spatial charts allow you to demonstrate precise locations or geographical patterns in your data. + """, + classname="intro-text", + ), + FlexContainer( + title="", + components=[ + vm.Card( + text=f""" + ![](assets/images/charts/{chart}.svg#chart-icon) + + #### {chart.replace("-", " ").title()} + """, + href=f"/{chart}", + ) + for chart in SPATIAL_CHARTS + ], + ), + ], +) From 3bc5d710b705d274550d99ccbec7bd8275e99ae3 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 8 Jul 2024 11:46:27 +0200 Subject: [PATCH 035/109] Revert changes in _dev --- vizro-core/examples/_dev/app.py | 117 +- .../examples/_dev/assets/css/custom.css | 69 - .../_dev/assets/images/charts/arc.svg | 25 - .../_dev/assets/images/charts/bar.svg | 20 - .../_dev/assets/images/charts/barcode.svg | 136 -- .../_dev/assets/images/charts/boxplot.svg | 78 - .../assets/images/charts/bubble-timeline.svg | 35 - .../_dev/assets/images/charts/bubble.svg | 32 - .../_dev/assets/images/charts/bullet.svg | 41 - .../_dev/assets/images/charts/butterfly.svg | 27 - .../_dev/assets/images/charts/chord.svg | 23 - .../_dev/assets/images/charts/choropleth.svg | 126 -- .../_dev/assets/images/charts/column-line.svg | 20 - .../_dev/assets/images/charts/column.svg | 20 - .../assets/images/charts/cumulative-curve.svg | 18 - .../assets/images/charts/diverging-bar.svg | 21 - .../_dev/assets/images/charts/donut.svg | 25 - .../_dev/assets/images/charts/dot-density.svg | 265 --- .../_dev/assets/images/charts/dot-plot.svg | 30 - .../_dev/assets/images/charts/fan.svg | 21 - .../_dev/assets/images/charts/flow-map.svg | 80 - .../_dev/assets/images/charts/funnel.svg | 19 - .../_dev/assets/images/charts/gantt.svg | 20 - .../assets/images/charts/heatmap-matrix.svg | 179 -- .../_dev/assets/images/charts/heatmap.svg | 27 - .../_dev/assets/images/charts/histogram.svg | 25 - .../_dev/assets/images/charts/line.svg | 17 - .../_dev/assets/images/charts/lollipop.svg | 26 - .../_dev/assets/images/charts/marimekko.svg | 27 - .../_dev/assets/images/charts/network.svg | 44 - .../assets/images/charts/ordered-bubble.svg | 20 - .../_dev/assets/images/charts/parallel.svg | 26 - .../_dev/assets/images/charts/pictogram.svg | 63 - .../_dev/assets/images/charts/pie.svg | 29 - .../images/charts/proportional-symbol.svg | 467 ----- .../_dev/assets/images/charts/radar.svg | 33 - .../_dev/assets/images/charts/radial.svg | 18 - .../_dev/assets/images/charts/sankey.svg | 20 - .../assets/images/charts/scatter-matrix.svg | 176 -- .../_dev/assets/images/charts/scatter.svg | 56 - .../_dev/assets/images/charts/slope.svg | 32 - .../_dev/assets/images/charts/sparkline.svg | 33 - .../assets/images/charts/stacked-column.svg | 27 - .../assets/images/charts/stepped-line.svg | 19 - .../_dev/assets/images/charts/surplus.svg | 29 - .../_dev/assets/images/charts/treemap.svg | 24 - .../_dev/assets/images/charts/venn.svg | 18 - .../_dev/assets/images/charts/violin.svg | 131 -- .../_dev/assets/images/charts/waterfall.svg | 20 - .../_dev/assets/images/icons/hypotheses.svg | 3 + vizro-core/examples/_dev/compendium.py | 1762 ----------------- vizro-core/examples/_dev/utils/__init__.py | 1 - vizro-core/examples/_dev/utils/_charts.py | 58 - .../examples/_dev/utils/_pages_charts.py | 479 ----- vizro-core/examples/_dev/utils/_tabs_home.py | 400 ---- 55 files changed, 45 insertions(+), 5512 deletions(-) delete mode 100644 vizro-core/examples/_dev/assets/images/charts/arc.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/bar.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/barcode.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/boxplot.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/bubble-timeline.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/bubble.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/bullet.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/butterfly.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/chord.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/choropleth.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/column-line.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/column.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/cumulative-curve.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/diverging-bar.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/donut.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/dot-density.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/dot-plot.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/fan.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/flow-map.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/funnel.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/gantt.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/heatmap-matrix.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/heatmap.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/histogram.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/line.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/lollipop.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/marimekko.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/network.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/ordered-bubble.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/parallel.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/pictogram.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/pie.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/proportional-symbol.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/radar.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/radial.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/sankey.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/scatter-matrix.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/scatter.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/slope.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/sparkline.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/stacked-column.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/stepped-line.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/surplus.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/treemap.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/venn.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/violin.svg delete mode 100644 vizro-core/examples/_dev/assets/images/charts/waterfall.svg create mode 100644 vizro-core/examples/_dev/assets/images/icons/hypotheses.svg delete mode 100644 vizro-core/examples/_dev/compendium.py delete mode 100644 vizro-core/examples/_dev/utils/__init__.py delete mode 100644 vizro-core/examples/_dev/utils/_charts.py delete mode 100644 vizro-core/examples/_dev/utils/_pages_charts.py delete mode 100644 vizro-core/examples/_dev/utils/_tabs_home.py diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 9d5dda5a0..bb29d2a92 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,87 +1,54 @@ -"""Example to show dashboard configuration specified as pydantic models.""" +"""Dev app to try things out.""" +import pandas as pd import vizro.models as vm -from utils._pages_charts import * -from utils._tabs_home import * +import vizro.plotly.express as px from vizro import Vizro +from vizro.models.types import capture -# HOME PAGE ----- -homepage = vm.Page( - title="Overview", +df_stocks = px.data.stocks(datetimes=True) +df_stocks_long = pd.melt( + df_stocks, + id_vars="date", + value_vars=["GOOG", "AAPL", "AMZN", "FB", "NFLX", "MSFT"], + var_name="stocks", + value_name="value", +) + + +@capture("graph") +def vizro_plot(data_frame, stocks_selected, **kwargs): + """Custom chart function.""" + return px.line(data_frame[data_frame["stocks"].isin(stocks_selected)], **kwargs) + + +df_stocks_long["value"] = df_stocks_long["value"].round(3) + +page = vm.Page( + title="My first page", components=[ - vm.Tabs( - tabs=[ - home_all, - home_deviation, - home_correlation, - home_ranking, - home_distribution, - home_magnitude, - home_time, - home_part, - home_flow, - home_spatial, - ] + vm.Graph( + id="my_graph", + figure=vizro_plot( + data_frame=df_stocks_long, + stocks_selected=list(df_stocks_long["stocks"].unique()), + x="date", + y="value", + color="stocks", + ), + ), + ], + controls=[ + vm.Parameter( + targets=["my_graph.stocks_selected"], + selector=vm.Dropdown( + options=[{"label": s, "value": s} for s in df_stocks_long["stocks"].unique()], + ), ), ], ) - -dashboard = vm.Dashboard( - pages=[homepage, bar, column, line, scatter, pie, donut, boxplot, violin], - navigation=vm.Navigation( - nav_selector=vm.NavBar( - items=[ - vm.NavLink(label="Overview", pages=["Overview"], icon="Home"), - vm.NavLink( - label="Deviation", - pages={"Deviation": ["Line", "Scatter"]}, - icon="Planner Review", - ), - vm.NavLink( - label="Correlation", - pages={"Deviation": ["Scatter"]}, - icon="Bubble Chart", - ), - vm.NavLink( - label="Ranking", - pages={"Ranking": ["Boxplot"]}, - icon="Stacked Bar Chart", - ), - vm.NavLink( - label="Distribution", - pages={"Distribution": ["Pie", "Donut", "Violin"]}, - icon="Waterfall Chart", - ), - vm.NavLink( - label="Magnitude", - pages={"Magnitude": ["Bar", "Column"]}, - icon="Bar Chart", - ), - vm.NavLink( - label="Time", - pages={"Time": ["Bar", "Column", "Scatter", "Line"]}, - icon="Timeline", - ), - vm.NavLink( - label="Part-to-whole", - pages={"Part-to-whole": ["Donut", "Pie"]}, - icon="Donut Small", - ), - vm.NavLink( - label="Flow", - pages={"Flow": ["Line"]}, - icon="Stacked Line Chart", - ), - vm.NavLink( - label="Spatial", - pages={"Spatial": ["Line"]}, - icon="Map", - ), - ] - ) - ), -) +dashboard = vm.Dashboard(pages=[page]) if __name__ == "__main__": Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_dev/assets/css/custom.css b/vizro-core/examples/_dev/assets/css/custom.css index 755d3106c..f8c8df785 100644 --- a/vizro-core/examples/_dev/assets/css/custom.css +++ b/vizro-core/examples/_dev/assets/css/custom.css @@ -1,72 +1,3 @@ #page-header { padding-left: 8px; } - -img[src*="#chart-icon"] { - width: 100%; -} - -.code-clipboard { - font-size: 20px; - position: absolute; - right: 14px; - top: 12px; -} - -code.language-python.hljs { - padding: 0; -} - -.hljs { - background: unset; - color: unset; - font-family: unset; -} - -.hljs-string { - color: var(--text-code-string); - font-family: unset; -} - -.hljs-keyword { - color: var(--text-code-keyword); - font-family: unset; -} - -.html-intro { - border-left: 4px solid var(--text-secondary); - color: var(--text-secondary); - padding: 12px; -} - -.flex-container .card { - height: 208px; - width: 176px; -} - -.flex-container { - display: flex; - flex-wrap: wrap; - gap: 20px; -} - -.flex-container h4 { - color: var(--text-secondary); - margin: 0; - padding-top: 12px; - text-align: center; -} - -.intro-text { - border-left: 4px solid var(--text-secondary); - padding: 12px; -} - -.intro-text p { - font-size: 16px; - line-height: 20px; -} - -#left-main { - width: 288px; -} diff --git a/vizro-core/examples/_dev/assets/images/charts/arc.svg b/vizro-core/examples/_dev/assets/images/charts/arc.svg deleted file mode 100644 index 35a5c81f8..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/arc.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - Group 6 Copy 34 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/bar.svg b/vizro-core/examples/_dev/assets/images/charts/bar.svg deleted file mode 100644 index 342907fe4..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/bar.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Group 6 Copy 10 - Created with Sketch. - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/barcode.svg b/vizro-core/examples/_dev/assets/images/charts/barcode.svg deleted file mode 100644 index cbe2ffc23..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/barcode.svg +++ /dev/null @@ -1,136 +0,0 @@ - - - - Group 6 Copy 14 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/boxplot.svg b/vizro-core/examples/_dev/assets/images/charts/boxplot.svg deleted file mode 100644 index 224deddd8..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/boxplot.svg +++ /dev/null @@ -1,78 +0,0 @@ - - - - Group 6 Copy 15 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/_dev/assets/images/charts/bubble-timeline.svg deleted file mode 100644 index b98e5af32..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/bubble-timeline.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - Group 6 Copy 22 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/bubble.svg b/vizro-core/examples/_dev/assets/images/charts/bubble.svg deleted file mode 100644 index a939659fc..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/bubble.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - Group 6 Copy 3 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/bullet.svg b/vizro-core/examples/_dev/assets/images/charts/bullet.svg deleted file mode 100644 index d7f708173..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/bullet.svg +++ /dev/null @@ -1,41 +0,0 @@ - - - - Group 6 Copy 33 - Created with Sketch. - - - - - - - - - - - - - - - - - - 0 - - - 2 - - - 4 - - - 6 - - - 8 - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/butterfly.svg b/vizro-core/examples/_dev/assets/images/charts/butterfly.svg deleted file mode 100644 index 5f0281a60..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/butterfly.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - Group 6 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/chord.svg b/vizro-core/examples/_dev/assets/images/charts/chord.svg deleted file mode 100644 index 8eecba457..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/chord.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - Group 6 Copy 29 - Created with Sketch. - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/choropleth.svg b/vizro-core/examples/_dev/assets/images/charts/choropleth.svg deleted file mode 100644 index 6a00da7bd..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/choropleth.svg +++ /dev/null @@ -1,126 +0,0 @@ - - - - Group 6 Copy 44 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/column-line.svg b/vizro-core/examples/_dev/assets/images/charts/column-line.svg deleted file mode 100644 index c4af7f626..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/column-line.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Group 6 Copy 4 - Created with Sketch. - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/column.svg b/vizro-core/examples/_dev/assets/images/charts/column.svg deleted file mode 100644 index fca0509d6..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/column.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Group 6 Copy 11 - Created with Sketch. - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/_dev/assets/images/charts/cumulative-curve.svg deleted file mode 100644 index 93cb42b5b..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/cumulative-curve.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - Group 6 Copy 17 - Created with Sketch. - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/diverging-bar.svg b/vizro-core/examples/_dev/assets/images/charts/diverging-bar.svg deleted file mode 100644 index bb0b80977..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/diverging-bar.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Group 6 Copy - Created with Sketch. - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/donut.svg b/vizro-core/examples/_dev/assets/images/charts/donut.svg deleted file mode 100644 index df72ab3ca..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/donut.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - Group 6 Copy 24 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/dot-density.svg b/vizro-core/examples/_dev/assets/images/charts/dot-density.svg deleted file mode 100644 index f73372105..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/dot-density.svg +++ /dev/null @@ -1,265 +0,0 @@ - - - - Group 6 Copy 5 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/dot-plot.svg b/vizro-core/examples/_dev/assets/images/charts/dot-plot.svg deleted file mode 100644 index 6640e2813..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/dot-plot.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - Group 6 Copy 13 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/fan.svg b/vizro-core/examples/_dev/assets/images/charts/fan.svg deleted file mode 100644 index cd0c938c3..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/fan.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - Group 6 Copy 39 - Created with Sketch. - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/flow-map.svg b/vizro-core/examples/_dev/assets/images/charts/flow-map.svg deleted file mode 100644 index 238505d2a..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/flow-map.svg +++ /dev/null @@ -1,80 +0,0 @@ - - - - Group 6 Copy 6 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/funnel.svg b/vizro-core/examples/_dev/assets/images/charts/funnel.svg deleted file mode 100644 index 4d33728ad..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/funnel.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - Group 6 Copy 36 - Created with Sketch. - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/gantt.svg b/vizro-core/examples/_dev/assets/images/charts/gantt.svg deleted file mode 100644 index 543e0ed85..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/gantt.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Group 6 Copy 21 - Created with Sketch. - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/heatmap-matrix.svg b/vizro-core/examples/_dev/assets/images/charts/heatmap-matrix.svg deleted file mode 100644 index 84c13f73a..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/heatmap-matrix.svg +++ /dev/null @@ -1,179 +0,0 @@ - - - - Group 6 Copy 40 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - v1 - - - 0.1 - - - 0.5 - - - v1 - - - v2 - - - v3 - - - v4 - - - v5 - - - v2 - - - v3 - - - v4 - - - v5 - - - 1.0 - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/heatmap.svg b/vizro-core/examples/_dev/assets/images/charts/heatmap.svg deleted file mode 100644 index fb40db538..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/heatmap.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - Group 6 Copy 5 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/histogram.svg b/vizro-core/examples/_dev/assets/images/charts/histogram.svg deleted file mode 100644 index b61f86c45..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/histogram.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - Group 6 Copy 12 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/line.svg b/vizro-core/examples/_dev/assets/images/charts/line.svg deleted file mode 100644 index e6a042d24..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/line.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Group 6 Copy 19 - Created with Sketch. - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/lollipop.svg b/vizro-core/examples/_dev/assets/images/charts/lollipop.svg deleted file mode 100644 index f04bc8ed7..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/lollipop.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - Group 6 Copy 8 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/marimekko.svg b/vizro-core/examples/_dev/assets/images/charts/marimekko.svg deleted file mode 100644 index 38fb0de77..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/marimekko.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - Group 6 Copy 26 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/network.svg b/vizro-core/examples/_dev/assets/images/charts/network.svg deleted file mode 100644 index 604485ef0..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/network.svg +++ /dev/null @@ -1,44 +0,0 @@ - - - - Group 6 Copy 32 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/_dev/assets/images/charts/ordered-bubble.svg deleted file mode 100644 index bef4e6929..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/ordered-bubble.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Group 6 Copy 7 - Created with Sketch. - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/parallel.svg b/vizro-core/examples/_dev/assets/images/charts/parallel.svg deleted file mode 100644 index 16c16d68c..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/parallel.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - Group 6 Copy 43 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/pictogram.svg b/vizro-core/examples/_dev/assets/images/charts/pictogram.svg deleted file mode 100644 index c7a787b0a..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/pictogram.svg +++ /dev/null @@ -1,63 +0,0 @@ - - - - Group 6 Copy 42 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/pie.svg b/vizro-core/examples/_dev/assets/images/charts/pie.svg deleted file mode 100644 index c32e7c8b1..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/pie.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - Group 6 Copy 23 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/proportional-symbol.svg b/vizro-core/examples/_dev/assets/images/charts/proportional-symbol.svg deleted file mode 100644 index cade9887d..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/proportional-symbol.svg +++ /dev/null @@ -1,467 +0,0 @@ - - - - Group 6 Copy 4 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/radar.svg b/vizro-core/examples/_dev/assets/images/charts/radar.svg deleted file mode 100644 index 5906b0740..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/radar.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - Group 6 Copy 38 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/radial.svg b/vizro-core/examples/_dev/assets/images/charts/radial.svg deleted file mode 100644 index 0b8f96a90..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/radial.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - Group 6 Copy 37 - Created with Sketch. - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/sankey.svg b/vizro-core/examples/_dev/assets/images/charts/sankey.svg deleted file mode 100644 index 9e9ad9d68..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/sankey.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Group 6 Copy 30 - Created with Sketch. - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/_dev/assets/images/charts/scatter-matrix.svg deleted file mode 100644 index add1a0995..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/scatter-matrix.svg +++ /dev/null @@ -1,176 +0,0 @@ - - - - Group 6 Copy 41 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - v1 - - - v2 - - - v3 - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/scatter.svg b/vizro-core/examples/_dev/assets/images/charts/scatter.svg deleted file mode 100644 index 3993f505f..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/scatter.svg +++ /dev/null @@ -1,56 +0,0 @@ - - - - Group 6 Copy 2 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/slope.svg b/vizro-core/examples/_dev/assets/images/charts/slope.svg deleted file mode 100644 index 01b770af5..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/slope.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - Group 6 Copy 9 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/sparkline.svg b/vizro-core/examples/_dev/assets/images/charts/sparkline.svg deleted file mode 100644 index ed269cd53..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/sparkline.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - Group 6 Copy 35 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/stacked-column.svg b/vizro-core/examples/_dev/assets/images/charts/stacked-column.svg deleted file mode 100644 index 7afbe494c..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/stacked-column.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - Group 6 Copy 25 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/stepped-line.svg b/vizro-core/examples/_dev/assets/images/charts/stepped-line.svg deleted file mode 100644 index 5bb9c361e..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/stepped-line.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - Group 6 Copy 18 - Created with Sketch. - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/surplus.svg b/vizro-core/examples/_dev/assets/images/charts/surplus.svg deleted file mode 100644 index 5f6baaf23..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/surplus.svg +++ /dev/null @@ -1,29 +0,0 @@ - - - - Group 6 Copy 6 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/treemap.svg b/vizro-core/examples/_dev/assets/images/charts/treemap.svg deleted file mode 100644 index a09929e94..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/treemap.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - Group 6 Copy 27 - Created with Sketch. - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/venn.svg b/vizro-core/examples/_dev/assets/images/charts/venn.svg deleted file mode 100644 index 753928cf7..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/venn.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - Group 6 Copy 28 - Created with Sketch. - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/violin.svg b/vizro-core/examples/_dev/assets/images/charts/violin.svg deleted file mode 100644 index 537b0ecfe..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/violin.svg +++ /dev/null @@ -1,131 +0,0 @@ - - - - Group 6 Copy 16 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/charts/waterfall.svg b/vizro-core/examples/_dev/assets/images/charts/waterfall.svg deleted file mode 100644 index 3b9072189..000000000 --- a/vizro-core/examples/_dev/assets/images/charts/waterfall.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Group 6 Copy 31 - Created with Sketch. - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_dev/assets/images/icons/hypotheses.svg b/vizro-core/examples/_dev/assets/images/icons/hypotheses.svg new file mode 100644 index 000000000..505d7c7cd --- /dev/null +++ b/vizro-core/examples/_dev/assets/images/icons/hypotheses.svg @@ -0,0 +1,3 @@ + + + diff --git a/vizro-core/examples/_dev/compendium.py b/vizro-core/examples/_dev/compendium.py deleted file mode 100644 index 132fb0d3f..000000000 --- a/vizro-core/examples/_dev/compendium.py +++ /dev/null @@ -1,1762 +0,0 @@ -"""Example to show dashboard configuration specified as pydantic models.""" - -from datetime import datetime -from typing import Callable, Optional - -import numpy as np -import pandas as pd -import plotly.graph_objects as go -import vizro.models as vm # This is fine because we define __all__ in hyphen.models. - -# ruff: noqa: F403, F405 -# Alternatively you could do `import hyphen.models as hm` and then use the `hm` namespace for all models -import vizro.plotly.express as px -from vizro import Vizro -from vizro.managers import data_manager -from vizro.models.types import capture - - -def retrieve_empty_dataframe(): - """This function returns an empty dataframe.""" - return pd.DataFrame() - - -def retrieve_slope_data(): - """This function returns data for slope chart.""" - data = [ - ["A", 17743, 25032], - ["B", 10216, 15672], - ["C", 3953, 4821], - ["D", 12568, 8734], - ["E", 5601, 4350], - ] - - df = pd.DataFrame(data, columns=["cats", "start", "end"]) - return df - - -@capture("graph") -def slope(data_frame): - fig = go.Figure() - - for idx, cat in enumerate(data_frame["cats"].to_list()): - fig.add_trace( - go.Scatter( - x=["Year 2022", "Year 2023"], - y=[ - int(data_frame.loc[data_frame["cats"] == cat]["start"]), - int(data_frame.loc[data_frame["cats"] == cat]["end"]), - ], - name=f"Trace {cat}", - mode="lines+markers+text", - text=[ - int(data_frame.loc[data_frame["cats"] == cat]["start"]), - int(data_frame.loc[data_frame["cats"] == cat]["end"]), - ], - textposition=["middle left", "middle right"], - line_color=px.colors.sequential.Blues[::-1][idx], - ) - ) - - return fig - - -@capture("graph") -def barcode(data_frame): - fig = go.Figure() - - for idx, species in enumerate(data_frame["species"].unique().tolist()): - fig.add_trace( - go.Scatter( - x=data_frame.loc[data_frame["species"] == species]["sepal_width"], - y=[species.capitalize()] * len(data_frame.loc[data_frame["species"] == species]["sepal_width"]), - mode="markers", - name=species.capitalize(), - legendgroup=species.capitalize(), - showlegend=True, - marker=dict(color=px.colors.sequential.Blues[::-1][idx], symbol="line-ns-open"), - ) - ) - - fig.update_layout( - xaxis_title="Sepal Width", - yaxis_title="Species", - ) - - return fig - - -def retrieve_waterfall_data(): - """This function returns data for slope chart.""" - measure = ["relative", "relative", "total", "relative", "relative", "total"] - x = ["Sales", "Consulting", "Net revenue", "Purchases", "Other expenses", "Profit before tax"] - y = [60, 80, 0, -40, -20, 0] - - df = pd.DataFrame({"measure": measure, "x": x, "y": y}) - return df - - -@capture("graph") -def waterfall(data_frame): - - text_list = [str(val) if val != 0 else "Total" for val in data_frame["y"].to_list()] - - fig = go.Figure( - go.Waterfall( - orientation="v", - measure=data_frame["measure"].to_list(), - x=data_frame["x"].to_list(), - textposition="outside", - text=text_list, - y=data_frame["y"].to_list(), - decreasing={"marker": {"color": px.colors.sequential.Blues[::-1][1]}}, - increasing={"marker": {"color": px.colors.sequential.Blues[::-1][2]}}, - totals={"marker": {"color": px.colors.sequential.Blues[::-1][0]}}, - ) - ) - - return fig - - -def retrieve_venn_data(): - """This function returns data for slope chart.""" - circle = ["1", "2", "3"] - x0 = [0, 1.5, 0.75] - y0 = [0, 0, 1.25] - x1 = [2, 3.5, 2.75] - y1 = [2, 2, 3.25] - - df = pd.DataFrame({"circle": circle, "x0": x0, "y0": y0, "x1": x1, "y1": y1}) - return df - - -@capture("graph") -def venn(data_frame): - - fig = go.Figure() - - for idx, circle in enumerate(data_frame["circle"].to_list()): - fig.add_shape( - type="circle", - line_color=px.colors.sequential.Blues[::-1][idx], - fillcolor=px.colors.sequential.Blues[::-1][idx], - x0=float(data_frame.loc[data_frame["circle"] == circle]["x0"]), - y0=float(data_frame.loc[data_frame["circle"] == circle]["y0"]), - x1=float(data_frame.loc[data_frame["circle"] == circle]["x1"]), - y1=float(data_frame.loc[data_frame["circle"] == circle]["y1"]), - ) - - fig.update_shapes(opacity=0.3, xref="x", yref="y") - - fig.update_layout( - xaxis_range=[-0.7, 4.2], - yaxis_range=[-0.2, 3.7], - xaxis_visible=False, - xaxis_showticklabels=False, - yaxis_visible=False, - yaxis_showticklabels=False, - margin=dict(l=20, r=20, b=100), - ) - - fig.update_layout( - margin=dict(l=20, r=20, b=100), - ) - - return fig - - -def retrieve_lollipop_data(): - """This function returns data for slope chart.""" - x = ["A", "B", "C", "D", "E", "F"] - y = [15, -25, -10, 30, 20, 5] - - df = pd.DataFrame({"x": x, "y": y}) - return df - - -@capture("graph") -def lollipop(data_frame): - - fig = go.Figure() - - for i in range(0, len(data_frame["x"])): - fig.add_trace( - go.Scatter( - x=[data_frame["x"].to_list()[i], data_frame["x"].to_list()[i]], - y=[0, data_frame["y"].to_list()[i]], - name=f"Customer Segment {data_frame['x'].to_list()[i]}", - mode="markers+lines", - marker=dict(size=10, color=px.colors.sequential.Blues[::-1][i], angleref="previous"), - line=dict(width=2, color=px.colors.sequential.Blues[::-1][i]), - ) - ) - - fig.update_layout( - xaxis_title="Customer Segment", - yaxis_title="Development last month", - xaxis=dict(showline=False), - ) - - return fig - - -def retrieve_dot_data(): - """This function returns data for slope chart.""" - x0 = [25000, 20000, 45000, 8000, 12000] - x1 = [46000, 30000, 57000, 60000, 29000] - y = ["Accessories", "Bookcase", "Chairs", "Copiers", "Furnishing"] - - df = pd.DataFrame({"x0": x0, "x1": x1, "y": y}) - return df - - -@capture("graph") -def dot_pot(data_frame): - - fig = go.Figure() - - for i in range(0, len(data_frame["y"])): - fig.add_trace( - go.Scatter( - x=[data_frame["x0"].to_list()[i], data_frame["x1"].to_list()[i]], - y=[data_frame["y"].to_list()[i], data_frame["y"].to_list()[i]], - name=data_frame["y"].to_list()[i], - mode="markers+lines", - marker=dict(size=10, color=px.colors.sequential.Blues[::-1][i]), - line=dict(width=2, color=px.colors.sequential.Blues[::-1][i]), - ) - ) - - fig.update_layout( - yaxis_title="Office Material", - xaxis_title="Cost range", - xaxis=dict(showline=False), - ) - - return fig - - -def retrieve_surplus_data(): - """This function returns data for surplus chart.""" - start_date = "2023-06-01" - forecasting = "2023-06-15" - df = pd.DataFrame( - { - "date": pd.date_range(start_date, forecasting, freq="D"), - "positive": [ - 0, - 0, - 162783, - 226389, - 0, - 0, - 0, - 0, - 0, - 129987, - 180954, - 246098, - 0, - 0, - 0, - ], - "negative": [ - -175287, - 0, - 0, - 0, - 0, - -173940, - -137233, - -183940, - 0, - 0, - 0, - 0, - 0, - -103940, - -137233, - ], - } - ) - - return df - - -@capture("graph") -def surplus(data_frame): - fig = go.Figure() - fig.add_trace( - go.Scatter( - x=data_frame["date"].to_list(), - y=data_frame["positive"].to_list(), - fill=None, - mode="lines", - showlegend=False, - line_color=px.colors.sequential.Blues[::-1][2], - ) - ) - - fig.add_trace( - go.Scatter( - x=data_frame["date"].to_list(), - y=[0] * len(data_frame["date"].to_list()), - fill="tonexty", - mode="lines", - name="Positive Sentiment", - line_color=px.colors.sequential.Blues[::-1][2], - ) - ) - - fig.add_trace( - go.Scatter( - x=data_frame["date"].to_list(), - y=data_frame["negative"].to_list(), - fill="tonexty", - mode="lines", - name="Negative Sentiment", - line_color=px.colors.sequential.Blues[::-1][0], - ) - ) - - return fig - - -def retrieve_butterfly_data(): - """This function returns data for gant chart.""" - cat = ["Art", "Chair", "Outdoor"] - a = [8, 6, 2] - b = [-4, -8, -1] - - df = pd.DataFrame({"Category": cat, "A": a, "B": b}) - - return df - - -@capture("graph") -def butterfly(data_frame): - fig = go.Figure() - - fig.add_trace( - go.Bar( - x=data_frame["A"].to_list(), - y=data_frame["Category"].to_list(), - orientation="h", - name="A", - marker=dict(color=px.colors.sequential.Blues[::-1][2]), - ) - ) - - fig.add_trace( - go.Bar( - x=data_frame["B"].to_list(), - y=data_frame["Category"].to_list(), - orientation="h", - name="B", - marker=dict(color=px.colors.sequential.Blues[::-1][0]), - ) - ) - - fig.update_layout( - xaxis_title="Value", - yaxis_title="Categories", - barmode="relative", - xaxis_tickvals=[-8, -6, -4, -2, 0, 2, 4, 6, 8], - xaxis_ticktext=[8, 6, 4, 2, 0, 2, 4, 6, 8], - ) - - return fig - - -def retrieve_marimekko_data(): - """This function returns data for marimekko chart.""" - cats = ["Technology", "Office Supplies", "Furniture"] - state = ["California", "Florida", "New York", "Texas"] - widths = [35, 25, 30, 10] * 3 - sales = [34.8, 52.49, 41, 38.25, 31.1, 21.81, 28.69, 26.15, 34.1, 25.7, 30.31, 35.60] - - cats, state = pd.core.reshape.util.cartesian_product([cats, state]) - df = pd.DataFrame({"state": state, "category": cats, "sales": sales, "width": widths}) - - state_total_sales = df.groupby("state")["sales"].sum().reset_index() - - df = df.merge(state_total_sales, on="state", suffixes=("", "_total")) - df["category_sales_proportion"] = df["sales"] / df["sales_total"] - df["cumulative_sales_proportion"] = df.groupby("state")["category_sales_proportion"].cumsum() - - return df - - -@capture("graph") -def marimekko(data_frame): - color_map = { - "Technology": px.colors.sequential.Blues[::-1][0], - "Office Supplies": px.colors.sequential.Blues[::-1][1], - "Furniture": px.colors.sequential.Blues[::-1][2], - } - - fig = go.Figure() - for key in data_frame["category"].unique(): - dff = data_frame.loc[data_frame["category"] == key] - fig.add_trace( - go.Bar( - name=key, - y=dff["sales"].to_list(), - x=np.cumsum(np.array(dff["width"])) - np.array(dff["width"]), - width=dff["width"].to_list(), - offset=0, - marker_color=color_map[key], - text=["{:.2f}$".format(x) for x in dff["sales"].to_list()], - ) - ) - - fig.update_xaxes(range=[0, 100]) - fig.update_yaxes(range=[0, 100]) - - fig.update_layout( - barmode="stack", - xaxis_title="State", - yaxis_title="Cumulative Sales Proportion", - showlegend=True, - legend_title="Category", - uniformtext_mode="hide", - ) - - return fig - - -def retrieve_line_col_data(): - """This function returns data for line column chart.""" - dates = ["Q3/2022", "Q4/2022", "Q1/2023", "Q2/2023", "Q3/2023"] - quantity = [1000, 1500, 2100, 2800, 1100] - quantity_last_year = [1200, 1340, 2300, 3000, 1150] - - df = pd.DataFrame({"dates": dates, "quantity": quantity, "quantity_last_year": quantity_last_year}) - - return df - - -@capture("graph") -def line_column(data_frame): - fig = go.Figure() - - fig.add_trace( - go.Scatter( - x=data_frame["dates"].tolist(), - y=data_frame["quantity_last_year"].tolist(), - mode="lines", - name="Last Year", - line=dict(color=px.colors.sequential.Blues[::-1][4]), - ) - ) - - fig.add_trace( - go.Bar( - x=data_frame["dates"].tolist(), - y=data_frame["quantity"].tolist(), - name="This Year", - marker_color=px.colors.sequential.Blues[::-1][0], - ) - ) - - fig.update_layout( - xaxis=dict(title="Quarter of Order Dates"), - yaxis=dict(title="Quantity"), - legend=dict(title="Time Period"), - ) - - return fig - - -def retrieve_stepped_line(): - """This function returns data for stepped line chart.""" - data = [ - [0, 0.5, "A"], - [1, 0.5, "A"], - [1, 1, "A"], - [2, 1, "A"], - [2, 2, "A"], - [4, 2, "A"], - [4, 2, "A"], - [4, 1.5, "A"], - [5, 1.5, "A"], - [6, 1.5, "A"], - [0, 2, "B"], - [1, 2, "B"], - [1, 1, "B"], - [2, 1, "B"], - [3, 1, "B"], - [3, 0.5, "B"], - [4, 0.5, "B"], - [5, 0.5, "B"], - [5, 1, "B"], - [6, 1, "B"], - ] - df = pd.DataFrame(data, columns=["count", "value", "cat"]) - return df - - -def retrieve_gapminder_country(country): - """This function returns gapminder data for a list of countries.""" - df = px.data.gapminder() - subset = df[(df["country"].isin(country))].copy() - return subset - - -def retrieve_gapminder_year(year): - """This is function returns gapminder data for a specific year.""" - df = px.data.gapminder() - subset = df.loc[df["year"] == year].copy() - return subset - - -def retrieve_continent_data(): - """This is function returns gapminder data grouped by continent.""" - df = px.data.gapminder() - grouped = ( - df.groupby(by=["continent", "year"]).agg({"lifeExp": "mean", "pop": "sum", "gdpPercap": "mean"}).reset_index() - ) - return grouped - - -def retrieve_order_data(): - """This function returns data for gant chart.""" - df = pd.DataFrame( - [ - {"order_id": "CA-103387", "start": "2023-06-01", "finish": "2023-06-01", "ship_mode": "Standard"}, - {"order_id": "CA-103400", "start": "2023-06-03", "finish": "2023-06-04", "ship_mode": "First Class"}, - {"order_id": "CA-103402", "start": "2023-06-03", "finish": "2023-06-05", "ship_mode": "First Class"}, - {"order_id": "CA-103435", "start": "2023-06-04", "finish": "2023-06-08", "ship_mode": "Second Class"}, - {"order_id": "CA-103466", "start": "2023-06-09", "finish": "2023-06-16", "ship_mode": "Standard"}, - {"order_id": "CA-103484", "start": "2023-06-11", "finish": "2023-06-17", "ship_mode": "Standard"}, - {"order_id": "CA-103510", "start": "2023-06-15", "finish": "2023-06-17", "ship_mode": "First Class"}, - ] - ) - return df - - -def retrieve_superstore_data(): - """This function returns superstore data.""" - cats = ["Technology", "Office Supplies", "Furniture"] - year = [2019, 2020, 2021, 2022] - sales = [175287, 162783, 226389, 271372, 151776, 137233, 183940, 246098, 157193, 170518, 198901, 215387] - - cats, year = pd.core.reshape.util.cartesian_product([cats, year]) - df = pd.DataFrame({"year": year, "category": cats, "sales": sales}) - - return df - - -def retrieve_superstore_grouped(): - """This function returns superstore data for one year.""" - cats = ["Technology", "Furniture", "Food", "Office Supplies", "Clothes"] - sales = [271372, 226389, 175287, 162783, 151776] - - df = pd.DataFrame({"category": cats, "sales": sales}) - - return df - - -def retrieve_diverging_bar(): - """This function returns superstore data for one year.""" - cats = ["Art", "Bookcases", "Chairs", "Furnishings", "Phones", "Storage", "Tables"] - profit_ratio = [0.25, 0.17, 0.23, -0.13, 0.08, 0.3, -0.09] - col = ["Positive", "Positive", "Positive", "Negative", "Positive", "Positive", "Negative"] - - df = pd.DataFrame({"category": cats, "profit_ratio": profit_ratio, "col": col}) - - return df - - -def retrieve_flow_map(): - """This function returns data for flow map chart.""" - # source: https://raw.githubusercontent.com/plotly/datasets/master/us-cities-top-1k.csv - data = [ - ["Niagara Falls", "New York", 49468, 43.0962143, -79.03773879999999, "Trace 1"], - ["Rochester", "New York", 210358, 43.16103, -77.61092190000001, "Trace 1"], - ["New York", "New York", 8405837, 40.7127837, -74.00594129999999, "Trace 1"], - ["Fort Wayne", "Indiana", 256496, 41.079273, -85.13935129999999, "Trace 2"], - ["Toledo", "Ohio", 282313, 41.6639383, -83.555212, "Trace 2"], - ["Cleveland", "Ohio", 390113, 41.499320000000004, -81.6943605, "Trace 2"], - ["Erie", "Pennsylvania", 100671, 42.1292241, -80.085059, "Trace 2"], - ["Philadelphia", "Pennsylvania", 1553165, 39.9525839, -75.1652215, "Trace 2"], - ["Cincinnati", "Ohio", 297517, 39.103118200000004, -84.5120196, "Trace 3"], - ["Dayton", "Ohio", 143355, 39.758947799999994, -84.1916069, "Trace 3"], - ["Columbus", "Ohio", 822553, 39.9611755, -82.9987942, "Trace 3"], - ["Pittsburgh", "Pennsylvania", 305841, 40.440624799999995, -79.9958864, "Trace 3"], - ["Nashville", "Tennessee", 634464, 36.1626638, -86.78160159999999, "Trace 4"], - ["Raleigh", "North Carolina", 431746, 35.7795897, -78.6381787, "Trace 4"], - ["Norfolk", "Virginia", 246139, 36.8507689, -76.28587259999999, "Trace 4"], - ["Washington", "District of Columbia", 646449, 38.9071923, -77.03687070000001, "Trace 4"], - ] - df = pd.DataFrame(data, columns=["City", "State", "Population", "lat", "lon", "trace"]) - - return df - - -def retrieve_election(): - """This function returns election data.""" - return px.data.election() - - -def retrieve_carshare(): - """This function returns carshare data.""" - return px.data.carshare() - - -def retrieve_gapminder(): - """This is function returns gapminder data.""" - df = px.data.gapminder() - return df - - -def retrieve_forecasting_data(): - """This is function creates synthetic sales forecasting data.""" - # Create dataframe for date range - start_date = "2020-01-01" - forecasting = "2025-12-31" - df_dates = pd.DataFrame({"date": pd.date_range(start_date, forecasting, freq="D")}) - - # Create category country combinations - categories = ["Bakery", "Fruits", "Vegetables", "Fresh Meat", "Fresh Fish"] - countries = ["Germany", "Austria", "Spain", "Italy", "France"] - lambda_cat_country = [ - 520, - 60, - 190, - 265, - 450, - 1300, - 150, - 475, - 662, - 1125, - 780, - 90, - 285, - 397, - 675, - 1560, - 180, - 570, - 795, - 1350, - 1040, - 120, - 380, - 530, - 900, - ] - lambda_list = [lam * 1000 for lam in lambda_cat_country] - cats, country = pd.core.reshape.util.cartesian_product([categories, countries]) - df_ml = pd.DataFrame({"country": country, "category": cats, "lambda_col": lambda_list}) - - # Merge dataframes - df = pd.merge(df_dates, df_ml, how="cross") - - # create fake data using poisson distribution - for name, group in df.groupby(["country", "category"]): - lam = group["lambda_col"].unique().item() - size = len(group) - rand_list = [np.random.uniform(0.75, 1.25) for i in range(size)] - trend = np.arange(1, 11, 10 / size) - - # sales - np.random.seed(143) - sales = np.random.poisson(lam=lam, size=size) * trend * rand_list - - # forecasting - np.random.seed(105) - forecast = np.random.poisson(lam=lam, size=size) * trend * rand_list - - df.loc[group.index, "sales"] = sales - df.loc[group.index, "forecast"] = forecast - - df["year"] = df["date"].apply(lambda x: x.strftime("%Y")) - - # Set sales to 0 for future and forecasting to 0 before val period - today = datetime.now() - # val_period = datetime.now() - timedelta(days=90) - val_period = datetime.now() - df.loc[df["date"] >= today, "sales"] = None - df.loc[df["date"] < val_period, "forecast"] = None - - df.drop(columns=["lambda_col"], inplace=True) - - df["value"] = "sales" - df["value_number"] = df["sales"] - df.loc[~df["forecast"].isna(), "value"] = "forecast" - df.loc[~df["forecast"].isna(), "value_number"] = df["forecast"] - df = df[["date", "value", "value_number", "category", "country"]] - - # df = df.loc[df['country']=='Germany'] - df["year"] = df.date.dt.year - df = df.loc[df["year"] == 2023] - - return df - - -def retrieve_sparkline_data(): - """This is a function that returns forecasting data for country and category.""" - df = retrieve_forecasting_data() - subset = df.loc[ - (df["category"].isin(["Bakery"])) - & (df["country"].isin(["Spain", "Italy", "Austria", "France", "Germany"]) & (df["date"] < "2023-02-01")) - ] - return subset - - -def retrieve_iris(): - """This is a function that returns iris dataframe.""" - return px.data.iris() - - -def create_chart_page( - chart_name: str, - retrieve_data_func: Callable, - fig_type: str, - description_text: str, - usage_text: str, - note_text: Optional[str] = "", - **kwargs, -): - """This is a function that creates a chart page.""" - ref_chart_name = chart_name.lower().replace(" ", "_") - data_manager[ref_chart_name + "_data"] = retrieve_data_func - - if fig_type == "scatter": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.scatter( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - - elif fig_type == "bar": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.bar(ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1]), - ) - - elif fig_type == "timeline": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.timeline( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - - elif fig_type == "histogram": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.histogram( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - elif fig_type == "line": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.line( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - elif fig_type == "area": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.area( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - elif fig_type == "pie": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.pie(ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1]), - ) - elif fig_type == "violin": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.violin( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - elif fig_type == "treemap": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.treemap( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - elif fig_type == "ecdf": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.ecdf( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - elif fig_type == "strip": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.strip( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - elif fig_type == "box": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.box(ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1]), - ) - elif fig_type == "choropleth_mapbox": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.choropleth_mapbox( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - elif fig_type == "scatter_mapbox": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.scatter_mapbox( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - elif fig_type == "line_mapbox": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=px.line_mapbox( - ref_chart_name + "_data", **kwargs, color_discrete_sequence=px.colors.sequential.Blues[::-1] - ), - ) - elif fig_type == "marimekko": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=marimekko(ref_chart_name + "_data"), - ) - elif fig_type == "line_column": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=line_column(ref_chart_name + "_data"), - ) - elif fig_type == "surplus": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=surplus(ref_chart_name + "_data"), - ) - elif fig_type == "butterfly": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=butterfly(ref_chart_name + "_data"), - ) - elif fig_type == "slope": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=slope(ref_chart_name + "_data"), - ) - elif fig_type == "lollipop": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=lollipop(ref_chart_name + "_data"), - ) - elif fig_type == "waterfall": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=waterfall(ref_chart_name + "_data"), - ) - elif fig_type == "venn": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=venn(ref_chart_name + "_data"), - ) - elif fig_type == "barcode": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=barcode(ref_chart_name + "_data"), - ) - elif fig_type == "dot_pot": - graph = vm.Graph( - id=ref_chart_name + "_fig", - figure=dot_pot(ref_chart_name + "_data"), - ) - - ref_chart_name = vm.Page( - title=chart_name, - path=ref_chart_name, - layout=vm.Layout(grid=[[0, 1, 1], [0, 1, 1], [0, 1, 1]]), - components=[ - vm.Card( - text=f""" - # {chart_name} - -   - ## What is a {chart_name}? - - {description_text} - -   - ## When to use it? - - {usage_text} - -   - -   - > {note_text} - """, - ), - graph, - ], - ) - - return ref_chart_name - - -def create_first_row(): - """This function creates all pages of the first row.""" - page_column = create_chart_page( - "Column", - retrieve_superstore_grouped, - "bar", - x="category", - y="sales", - labels={"category": "Category", "sales": "Sales"}, - description_text="A Column chart is a vertical Bar chart, with column lengths varying according to the " - "categorical value they represent. The scale is presented on the y-axis, starting with zero.", - usage_text="Select a Column chart when you want to help your audience draw size comparisons and identify " - "patterns between categorical data, i.e., data that presents `how many?` in each category. You can " - "arrange your columns in any order to fit the message you wish to emphasise. Be mindful of " - "labelling clearly when you have a large number of columns. You may need to include a legend, " - "or use abbreviations in the chart with fuller descriptions below of the terms used.", - ) - - page_marimekko = create_chart_page( - "Marimekko", - retrieve_marimekko_data, - "marimekko", - x="state", - y="cumulative_sales_proportion", - color="category", - labels={"category": "Category", "sales": "Sales", "state": "State"}, - description_text="A Marimekko chart (also known as a Mekko or a Mosaic Plot) is a stacked chart with column " - "segments that vary in height, as well as the column widths varying according to a second " - "value. It becomes a 2-dimensional stacked chart.", - usage_text="A Marimekko chart is useful when you wish to visualise relationships between categories and their " - "subcategories across two variables, i.e., the two axes. Each axis is variable, with a percentage " - "scale determining both the width and the height of each segment. Be aware, though, " - "that they become hard to read when there are many segments. Also, readers may find it difficult " - "to make accurate comparisons between each segment because they are not arranged next to each " - "other along the same baseline.", - ) - - page_stacked_column = create_chart_page( - "Stacked Column", - retrieve_superstore_data, - "bar", - x="year", - y="sales", - color="category", - labels={"category": "Category", "sales": "Sales", "year": "Year"}, - description_text="A Stacked Column chart shows part-to-whole relationships of multiple totals and their " - "shares. Data series are stacked one on top of each other in vertical columns, starting from " - "the same baseline.", - usage_text="You should consider using a Stacked Column chart when you want your audience to focus on totals " - "and the parts that make them up, and when the total of the parts is crucial. It is best to " - "arrange your most important value at the bottom of the chart and to use a distinct colour to make " - "it stand out. This will make it easier for your audience to compare values. This chart works well " - "when you are displaying multiple totals; if you`re only interested in the parts of one total, " - "consider instead a Bar chart.", - ) - - page_gant = create_chart_page( - "Gant", - retrieve_order_data, - "timeline", - x_start="start", - x_end="finish", - y="order_id", - color="ship_mode", - labels={"order_id": "Order Id", "ship_mode": "Ship Mode"}, - description_text="A Gantt chart is a type of Bar chart for displaying, for example, a project schedule.", - usage_text="Select a Gantt chart when your audience needs to see how various activities/tasks/events are " - "scheduled over a period of time. List the activities or tasks along the vertical axis and the " - "time intervals along the horizontal axis. Plot horizontal bars representing the activities, " - "with their positions and lengths indicating the start time/date, duration and end time/date. You " - "might also show the dependency relationships between the activities and the current schedule " - "status.", - ) - - page_histogram = create_chart_page( - "Histogram", - retrieve_gapminder, - "histogram", - x="lifeExp", - labels={"lifeExp": "Life Expectancy", "y": "Count"}, - description_text="A Histogram groups numeric data into columns sized according to how often values fall into " - "specified ranges. It displays the data over a period of time or over a continuous interval.", - usage_text="Using a Histogram will help your audience see where particular values are concentrated, what the " - "extremes are, and whether there are any gaps or unusual values. It may also help you see a rough " - "probability distribution. You should try to keep the gaps small between your columns so that the " - "`shape` your data takes is immediately apparent.", - ) - - page_ordered_bubble = create_chart_page( - "Ordered Bubble", - lambda: retrieve_gapminder_country(["India"]), - "scatter", - x="gdpPercap", - size="pop", - labels={"gdpPercap": "GDP per Cap", "pop": "Population"}, - description_text="This chart distributes proportionately-sized circles against two variables presented on " - "each axis (like a standard Bubble chart), in order of size, e.g., smallest to largest.", - usage_text="You can select this chart when you are displaying big variations in values and/or it is not so " - "important for your audience to see minor differences between the data. By presenting your " - "`bubbles` in size order, you can show at a glance the magnitude of each compared with each other.", - ) - - return page_column, page_marimekko, page_stacked_column, page_gant, page_histogram, page_ordered_bubble - - -def create_second_row(): - """This function creates all pages of the second row.""" - page_line_column = create_chart_page( - "Line Column", - retrieve_line_col_data, - "line_column", - description_text="A combined Column and Line chart helps you demonstrate the relationship between an amount (" - "displayed in columns) and a variable over time (displayed as a line running across the " - "columns).", - usage_text="Use this type of chart when you wish to compare quantities of one item with changes in another " - "item over a period of time.", - ) - - page_surplus_chart = create_chart_page( - "Surplus Chart", - retrieve_surplus_data, - "surplus", - description_text="In a line-surplus-deficit-filled chart, shaded areas emphasise variation from a fixed " - "reference point.", - usage_text="Use this chart when you wish to draw the audience`s attention to the balance between two data " - "sets or that against a baseline. The chart will help them draw comparisons between the two sets " - "of data.", - ) - - page_butterfly_chart = create_chart_page( - "Butterfly Chart", - retrieve_butterfly_data, - "butterfly", - description_text="A Tornado chart (also called a Butterfly chart) is a bar chart for displaying two sets of " - "data series side by side.", - usage_text="Use a Tornado chart when you wish to emphasise the comparison between two data sets sharing the " - "same parameters. Sharing this chart with your audience will help them see at a glance how two " - "groups differ within the same parameters. You can also `stack` two bars on each side if you wish " - "to divide your categories, e.g., `trained staff` and `staff-in-training`.", - ) - - page_bar = create_chart_page( - "Bar", - retrieve_superstore_grouped, - "bar", - x="sales", - y="category", - orientation="h", - labels={"sales": "Sales", "category": "Category"}, - description_text="A Bar chart displays bars in lengths proportional to the values they represent. One axis of " - "the chart shows the categories to compare and the other axis provides a value scale, " - "starting with zero.", - usage_text="Select a Bar chart when you want to help your audience draw size comparisons and identify " - "patterns between categorical data, i.e., data that presents `how many?` in each category. You can " - "arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling " - "clearly when you have a large number of bars. You may need to include a legend, " - "or use abbreviations in the chart with fuller descriptions below of the terms used.", - ) - - page_line = create_chart_page( - "Line", - lambda: retrieve_gapminder_country(["India"]), - "line", - x="year", - y="pop", - labels={"pop": "Population", "year": "Year"}, - description_text="A Line chart presents a series of data points over a continuous interval or time period, " - "joined together with straight lines.", - usage_text="You should select a Line chart when you want to show trends and invite analysis of how the data " - "has changed over time. Usually, your y-axis will show a quantitative value and your x-axis will " - "be marked as a timescale or a sequence of intervals. You can also display negative values below " - "the x-axis. If you wish to group several lines (different data series) in the same chart, " - "try to limit yourself to 3-4 to avoid cluttering up your chart and making it harder for the " - "audience to read.", - ) - - return page_line_column, page_surplus_chart, page_butterfly_chart, page_bar, page_line - - -def create_third_row(): - """This function creates all pages of the third row.""" - page_scatter = create_chart_page( - "Scatter", - retrieve_iris, - "scatter", - y="sepal_length", - x="sepal_width", - # trendline="ols", - labels={"sepal_length": "Length", "sepal_width": "W" "idth"}, - description_text="A scatter plot is a two-dimensional data visualisation using dots to represent the values " - "obtained for two different variables - one plotted along the x-axis and the other plotted " - "along the y-axis.", - usage_text="Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are " - "sometimes called Correlation plots because they show how two variables are correlated. Scatter " - "plots are ideal when you have paired numerical data and you want to see if one variable impacts " - "the other. However, do remember that correlation is not causation, and another unnoticed variable " - "may be influencing results. Make sure your audience does not draw the wrong conclusions.", - ) - - page_pie = create_chart_page( - "Pie", - retrieve_superstore_grouped, - "pie", - values="sales", - names="category", - labels={"sales": "Sales", "category": "Category"}, - description_text="A Pie chart is a circular chart divided into segments to show proportions and percentages " - "between categories. The circle represents the whole.", - usage_text="Use the Pie chart when you need to show your audience a quick view of how data is distributed " - "proportionately, with percentages highlighted. The different values you present must add up to a " - "total and equal 100%. The downsides are that Pie charts tend to occupy more space than many other " - "charts, they don`t work well with more than a few values because labelling small segments is " - "challenging, and it can be difficult to accurately compare the sizes of the segments.", - note_text="Note: Limited by area chart options of plotly express.", - ) - - page_donut = create_chart_page( - "Donut", - retrieve_superstore_grouped, - "pie", - values="sales", - names="category", - hole=0.6, - labels={"sales": "Sales", "category": "Category"}, - description_text="A Donut chart looks like a Pie chart, but has a blank space in the centre which may contain " - "additional information.", - usage_text="A Donut chart can be used in place of a Pie chart, particularly when you are short of space or " - "have extra information you would like to share about the data. It may also be more effective if " - "you wish your audience to focus on the length of the arcs of the sections instead of the " - "proportions of the segment sizes.", - note_text="Note: Limited by gant chart options of plotly express.", - ) - - page_violin = create_chart_page( - "Violin", - retrieve_gapminder, - "violin", - y="lifeExp", - labels={"lifeExp": "Life Expectancy"}, - description_text="A Violin Plot is similar to a Box Plot, but works better for visualising more complex " - "distributions and their probability density at different values.", - usage_text="Use this chart to go beyond the simple Box Plot and show the distribution shape of the data, " - "the inter-quartile range, the confidence intervals and the median.", - ) - - page_slope = create_chart_page( - "Slope", - retrieve_slope_data, - "slope", - description_text="A line chart plotting values across two points in time.", - usage_text="You can use a Slope chart when you wish to invite comparison and identify trends between two " - "points in time. This chart shows your audience how ranks have changed over time or how they vary " - "between categories.", - ) - - return page_scatter, page_pie, page_donut, page_violin, page_slope - - -def create_fourth_row(): - """This function creates all pages of the fourth row.""" - page_lollipop = create_chart_page( - "Lollipop", - retrieve_lollipop_data, - "lollipop", - description_text="A Lollipop chart is similar to a standard bar chart, but you replace each the bar with a " - "line and place a dot at the end to mark the value.", - usage_text="You can use a Lollipop chart in the same situations as a Bar chart. You may find the design " - "visually more appealing than a standard Bar chart to invite comparison or demonstrate trends over " - "time. It is claimed that this chart is more effective than a Bar chart at drawing attention to " - "the data values. But you need to be aware that it may be difficult for the audience to judge the " - "precise value which lies in the centre of the dot. So make sure your labelling and/or commentary " - "is clear.", - # note_text="Note: Currently not available.", - ) - - page_cumulative_curve = create_chart_page( - "Cumulative Curve", - retrieve_iris, - "ecdf", - x="sepal_length", - color="species", - labels={"species": "Species", "sepal_length": "Sepal Length"}, - description_text="The Cumulative Curve (sometimes referred to as an Ogive) represents the cumulative " - "frequency distribution of grouped data on a graph. The frequency is the number of times an " - "event occurs within a given scenario, with cumulative frequency being the running total of " - "frequencies up to the current point.", - usage_text="The Cumulative Curve is helpful when you wish to discover the popularity of a certain type of " - "data, or how likely it is that a specified event will fall within a certain frequency " - "distribution. You can also use it to show how unequal a distribution is: the y-axis is always " - "cumulative frequency, and the x-axis is always a measure. You can construct a More Than Type or a " - "Less Than Type Cumulative Frequency Curve. If you plot both curves on the same graph, " - "the point at which they intersect (the corresponding value on the x-axis) indicates the median of " - "your data set.", - ) - - page_waterfall = create_chart_page( - "Waterfall", - retrieve_waterfall_data, - "waterfall", - description_text="A Waterfall chart shows the cumulative effect of a series of positive or negative values on " - "an initial value.", - usage_text="You will usually use a Waterfall chart to illustrate a budgetary process, or to show changes in " - "revenue or profit between two points. Your initial and final values will tend to be represented " - "by whole columns. In between these you will introduce `floating` columns, starting based on the " - "value of the previous column. You may wish to colour code the floating columns to help " - "distinguish between their positive or negative values.", - ) - - page_treemap = create_chart_page( - "Treemap", - lambda: retrieve_gapminder_year(2007), - "treemap", - values="pop", - path=[px.Constant("world"), "continent", "country"], - color="lifeExp", - width=300, - labels={"pop": "Population", "lifeExp": "Life Expectancy"}, - description_text="A Treemap shows hierarchical data arranged as a set of `nested` rectangles: rectangles " - "sized proportionately to the quantity they represent, combining together to form larger " - "`parent` category rectangles.", - usage_text="It`s helpful to use a Treemap when you wish to display hierarchical part-to-whole relationships. " - "You can compare groups and single elements nested within them. Consider using them instead of Pie " - "charts when you have a higher number of categories. Treemaps are very compact and allow audiences " - "to get a quick overview of the data.", - ) - - page_venn = create_chart_page( - "Venn", - retrieve_venn_data, - "venn", - description_text="A Venn Diagram shows all the possible logical relationships between a collection of sets. " - "These sets tend to be represented with circles.", - usage_text="Use a Venn diagram to highlight the commonalities between your chosen entities in the overlapping " - "areas of your circles: the `intersection` areas. You can also draw conclusions about the elements " - "of the entities that lie outside the overlaps.", - ) - - page_barcode = create_chart_page( - "Barcode", - retrieve_iris, - "barcode", - # x="sepal_width", - # y="species", - # labels={"species": "Species", "sepal_width": "Sepal Width"}, - description_text="A Bar Code chart is a compact means of visualising a distribution. It resembles a bar code " - "on a purchased item.", - usage_text="You should use the Bar Code chart when you wish to show audiences several distributions for " - "comparison, but you are short of space. Use each line segment to represent an individual point " - "along a single axis.", - # note_text="Note: Currently only available as strip instead of barcode chart.", - ) - - return page_lollipop, page_cumulative_curve, page_waterfall, page_treemap, page_venn, page_barcode - - -def create_fifth_row(): - """This function creates all pages of the fitfth row.""" - page_diverging_bar = create_chart_page( - "Diverging Bar", - retrieve_diverging_bar, - "bar", - x="profit_ratio", - y="category", - color="col", - orientation="h", - labels={"profit_ratio": "Profit Ratio", "category": "Category", "col": "Ratio Type"}, - description_text="A Diverging Bar is similar to a standard Bar chart, but differs by displaying both positive " - "and negative magnitude values.", - usage_text="You should use a Diverging Bar chart when you wish to emphasise patterns or comparisons in " - "relation to a fixed reference point. This reference point may or may not equal zero.", - ) - - page_boxplot = create_chart_page( - "Boxplot", - retrieve_continent_data, - "box", - y="lifeExp", - color="continent", - labels={"lifeExp": "Life Expectancy", "continent": "Continent"}, - description_text="A Box Plot (also known as a Box and Whisker Plot) provides a visual display of multiple " - "datasets, indicating the median (centre) and the range of the data for each.", - usage_text="Choose a Box Plot when you need to summarise distributions between many groups or datasets. It " - "takes up less space than many other charts. Create boxes to display the median, and the upper and " - "lower quartiles. Add `whiskers` to highlight variability outside the upper and lower quartiles. " - "You can add outliers as dots beyond, but in line with the whiskers.", - ) - - # geojson = px.data.election_geojson() - # page_choropleth = create_chart_page( - # "Choropleth", - # retrieve_election, - # "choropleth_mapbox", - # geojson=geojson, - # locations="district", - # featureidkey="properties.district", - # zoom=9, - # opacity=0.7, - # color="winner", - # center={"lat": 45.5517, "lon": -73.7073}, - # mapbox_style="carto-positron", - # description_text="A Choropleth Map is a map in which geographical areas are coloured, shaded or patterned in " - # "relation to a specific data variable.", - # usage_text="Use a Chloropleth Map when you wish to show how a measurement varies across a geographic area, " - # "or to show variability or patterns within a region. Typically, you will blend one colour into " - # "another, take a colour shade from light to dark, or introduce patterns to depict the variation in " - # "the data. Be aware that it may be difficult for your audience to accurately read or compare " - # "values on the map depicted by colour.", - # ) - # - # page_dot_density = create_chart_page( - # "Dot Density", - # retrieve_carshare, - # "scatter_mapbox", - # lat="centroid_lat", - # lon="centroid_lon", - # color="peak_hour", - # size="car_hours", - # mapbox_style="carto-positron", - # zoom=10, - # opacity=0.7, - # labels={"peak_hour": "Peak Hour"}, - # description_text="A Dot Density Map uses dots to show concentrations of an entity in a geographical region.", - # usage_text="You should use a Dot Density Map when you wish to show the location/s of a phenomenon and its " - # "concentration: many dots indicate a high concentration, whilst fewer dots represent lower " - # "concentration. Each dot may represent one single count or a given quantity.", - # ) - # - # page_flow_map = create_chart_page( - # "Flow Map", - # retrieve_flow_map, - # "line_mapbox", - # lat="lat", - # lon="lon", - # color="trace", - # zoom=4.5, - # height=300, - # mapbox_style="carto-positron", - # text="City", - # labels={"trace": "Trace"}, - # description_text="A Flow Map is a map marked with connections or arrows indicating the movement of quantities " - # "from one location to another.", - # usage_text="Use a Flow Map when you wish to depict the unambiguous movement of an entity across a " - # "geographical area, e.g., people or goods. You can adjust the width of the connections to depict " - # "the quantity of the item moving. Arrows indicate the direction of movement.", - # ) - - page_bullet = create_chart_page( - "Bullet", - retrieve_empty_dataframe, - "line", - description_text="A Bullet graph functions similarly to a Bar chart, but contains more information.", - usage_text="Use the Bullet graph as a more informative and space-efficient alternative to a dashboard gauge. " - "Often it is used to display performance data. The most important data value is represented in the " - "length of the main bar in the middle of the chart: the Feature Measure. A line marker running " - "perpendicular to the graph`s orientation is called the Comparative Measure. It serves as a target " - "marker to compare against the Feature Measure value. Once the main bar passes the position of " - "Comparative Measure, you have hit your goal. You can include colours to indicate qualitative " - "range scores, e.g., performance range ratings.", - note_text="Note: Currently not available.", - ) - - # return page_diverging_bar, page_boxplot, page_choropleth, page_dot_density, page_flow_map, page_bullet - return page_diverging_bar, page_boxplot, page_bullet - - -def create_sixth_row(): - """This function creates all pages of the fifth row.""" - page_dot_plot = create_chart_page( - "Dot Plot", - retrieve_dot_data, - "dot_pot", - description_text="The Dot Plot positions a group of data points across multiple categories against a simple " - "scale. Each `dot` (filled circle) represents a minimum and maximum value in a range.", - usage_text="You can select the Dot Plot when you wish to display the minimum and maximum values (counts) for " - "each item in a small or moderate data set. Use it to highlight clusters, gaps and outliers in " - "your data.", - ) - - page_stepped_line = create_chart_page( - "Stepped Line", - retrieve_stepped_line, - "line", - x="count", - y="value", - color="cat", - labels={"cat": "Category"}, - description_text="A Stepped Line chart is much like a standard Line chart but, instead of connecting two " - "points with the shortest line, the line forms a series of steps between data points.", - usage_text="You should use a Stepped Line chart when you wish to draw attention to changes occurring at " - "specific points. By contrast, a Line chart would suggest that changes occur gradually.", - ) - - page_sparkline = create_chart_page( - "Sparkline", - retrieve_sparkline_data, - "line", - x="date", - y="value_number", - facet_row="country", - facet_row_spacing=0.05, - color="country", - labels={"date": "", "country": "", "value_number": ""}, - description_text="A sparkline is a very small line chart, typically drawn without axes or coordinates. It " - "presents the general shape of the variation (typically over time) in some measurement, " - "such as temperature or stock market price, in a simple and highly condensed way.", - usage_text="Whereas the typical charts are designed to show as much data as possible, and is set off from the " - "flow of text, sparklines are intended to be succinct, memorable, and located where they are " - "discussed.", - ) - - return page_dot_plot, page_stepped_line, page_sparkline - - -def create_home(): - """This is a function that returns home page.""" - page_dashboard = vm.Page( - title="Chart Compendium", - path="compendium", - layout=vm.Layout( - grid=[ - [0, 1, 2, 3], - [4, 5, 6, 7], - [8, 9, 10, 11], - [12, 13, 14, 15], - [16, 17, 18, 19], - [20, 21, 22, 23], - [24, 25, 26, 27], - ], - row_min_height="230px", - col_gap="16px", - ), - components=[ - # First row - vm.Card( - text=""" - ![](assets/images/compendium/12.-Column_details.1.svg#compendium) - - ### Column - """, - href="/column", - ), - vm.Card( - text=""" - ![](assets/images/compendium/27.-Marimekko_details.1.svg#compendium) - - ### Marimekko - """, - href="/marimekko", - ), - vm.Card( - text=""" - ![](assets/images/compendium/Stacked_column.1.svg#compendium) - - ### Stacked - """, - href="/stacked_column", - ), - vm.Card( - text=""" - ![](assets/images/compendium/22.-Gantt_details.1.svg#compendium) - - ### Gant - """, - href="/gant", - ), - vm.Card( - text=""" - ![](assets/images/compendium/13.-Histogram_details.1.svg#compendium) - - ### Histogram - """, - href="/histogram", - ), - vm.Card( - text=""" - ![](assets/images/compendium/8.-Ordered-Bubble_details.1.svg#compendium) - - ### Ordered Bubble - """, - href="/ordered_bubble", - ), - # Second row - vm.Card( - text=""" - ![](assets/images/compendium/6.-Colomn-Line_details.1.svg#compendium) - - ### Line Column - """, - href="/line_column", - ), - vm.Card( - text=""" - ![](assets/images/compendium/3.-Surplus-chart_details.1.svg#compendium) - - ### Surplus Chart - """, - href="/surplus_chart", - ), - vm.Card( - text=""" - ![](assets/images/compendium/2.-Butterfly-chart_details.1.svg#compendium) - - ### Butterfly Chart - """, - href="/butterfly_chart", - ), - vm.Card( - text=""" - ![](assets/images/compendium/11.-Bar_details.1.svg#compendium) - - ### Bar - """, - href="/bar", - ), - vm.Card( - text=""" - ![](assets/images/compendium/20.-Line_details.1.svg#compendium) - - ### Line - """, - href="/line", - ), - # Third row - vm.Card( - text=""" - ![](assets/images/compendium/4.-Scatter-plot_details.1.svg#compendium) - - ### Scatter - """, - href="/scatter", - ), - vm.Card( - text=""" - ![](assets/images/compendium/24.-Pie_details1.svg#compendium) - - ### Pie - """, - href="/pie", - ), - vm.Card( - text=""" - ![](assets/images/compendium/25.-Donut_details.1.svg#compendium) - - ### Donut - """, - href="/donut", - ), - vm.Card( - text=""" - ![](assets/images/compendium/17.-Violin-plot_details.1.svg#compendium) - - ### Violin - """, - href="/violin", - ), - vm.Card( - text=""" - ![](assets/images/compendium/10.-Slope_details.1.svg#compendium) - - ### Slope - """, - href="/slope", - ), - # Fourth row - vm.Card( - text=""" - ![](assets/images/compendium/9.-Lollipop_details.1.svg#compendium) - - ### Lollipop - """, - href="/lollipop", - ), - vm.Card( - text=""" - ![](assets/images/compendium/18.-Cumulative-curve_details.1.svg#compendium) - - ### Cumulative Curve - """, - href="/cumulative_curve", - ), - vm.Card( - text=""" - ![](assets/images/compendium/32.-Waterfall_details.1.svg#compendium) - - ### Waterfall - """, - href="/waterfall", - ), - vm.Card( - text=""" - ![](assets/images/compendium/28.-Tree_details.1.svg#compendium) - - ### Treemap - """, - href="/treemap", - ), - vm.Card( - text=""" - ![](assets/images/compendium/29.-Venn_details.1.svg#compendium) - - ### Venn - """, - href="/venn", - ), - vm.Card( - text=""" - ![](assets/images/compendium/15.-Barcode_details.1.svg#compendium) - - ### Barcode - """, - href="/barcode", - ), - # Fifth row - vm.Card( - text=""" - ![](assets/images/compendium/1.Diverging-bar_details1.svg#compendium) - - ### Diverging Bar - """, - href="/diverging_bar", - ), - vm.Card( - text=""" - ![](assets/images/compendium/16.-Boxplot_details.1.svg#compendium) - - ### Boxplot - """, - href="/boxplot", - ), - # vm.Card( - # text=""" - # ![](assets/images/compendium/45.-Choropleth1.svg#compendium) - # - # ### Choropleth - # """, - # href="/choropleth", - # ), - # vm.Card( - # text=""" - # ![](assets/images/compendium/47.-Dot-density1.svg#compendium) - # - # ### Dot Density - # """, - # href="/dot_density", - # ), - # vm.Card( - # text=""" - # ![](assets/images/compendium/48.-Flow-map1.svg#compendium) - # - # ### Flow Map - # """, - # href="/flow_map", - # ), - vm.Card( - text=""" - ![](assets/images/compendium/34.-Bullet_details.1.svg#compendium) - - ### Bullet - """, - href="/bullet", - ), - # Sixth row - vm.Card( - text=""" - ![](assets/images/compendium/14.-Dot-plot_details.1.svg#compendium) - - ### Dot Plot - """, - href="/dot_plot", - ), - vm.Card( - text=""" - ![](assets/images/compendium/19.-Stepped-line_details..svg#compendium) - - ### Stepped Line - """, - href="/stepped_line", - ), - vm.Card( - text=""" - ![](assets/images/compendium/36.-Sparkline_details..svg#compendium) - - ### Sparkline - """, - href="/sparkline", - ), - ], - ) - return page_dashboard - - -def retrieve_compendium_pages(): - - page_column, page_marimekko, page_stacked_column, page_gant, page_histogram, page_ordered_bubble = ( - create_first_row() - ) - ( - page_line_column, - page_surplus_chart, - page_butterfly_chart, - page_bar, - page_line, - ) = create_second_row() - page_scatter, page_pie, page_donut, page_violin, page_slope = create_third_row() - page_lollipop, page_cumulative_curve, page_waterfall, page_treemap, page_venn, page_barcode = create_fourth_row() - page_diverging_bar, page_boxplot, page_bullet = create_fifth_row() - - page_dot_plot, page_stepped_line, page_sparkline = create_sixth_row() - page_dashboard = create_home() - - page_list = [ - page_dashboard, - page_column, - page_marimekko, - page_stacked_column, - page_gant, - page_histogram, - page_ordered_bubble, - page_line_column, - page_surplus_chart, - page_butterfly_chart, - page_bar, - page_line, - page_scatter, - page_pie, - page_donut, - page_violin, - page_slope, - page_lollipop, - page_cumulative_curve, - page_waterfall, - page_treemap, - page_venn, - page_barcode, - page_diverging_bar, - page_boxplot, - # page_choropleth, - # page_dot_density, - # page_flow_map, - page_bullet, - page_dot_plot, - page_stepped_line, - page_sparkline, - ] - - return page_list - - -if __name__ == "__main__": - dashboard = vm.Dashboard(pages=retrieve_compendium_pages()) - Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_dev/utils/__init__.py b/vizro-core/examples/_dev/utils/__init__.py deleted file mode 100644 index 11387ccac..000000000 --- a/vizro-core/examples/_dev/utils/__init__.py +++ /dev/null @@ -1 +0,0 @@ -"""Utils folder to contain helper functions and custom charts/components.""" diff --git a/vizro-core/examples/_dev/utils/_charts.py b/vizro-core/examples/_dev/utils/_charts.py deleted file mode 100644 index 5661e68f6..000000000 --- a/vizro-core/examples/_dev/utils/_charts.py +++ /dev/null @@ -1,58 +0,0 @@ -"""Contains custom components and charts used inside the dashboard.""" - -from typing import Literal - -import dash_bootstrap_components as dbc -import vizro.models as vm -from dash import dcc, html - -try: - from pydantic.v1 import Field -except ImportError: # pragma: no cov - from pydantic import Field - - -# CUSTOM COMPONENTS ------------------------------------------------------------- -class CodeClipboard(vm.VizroBaseModel): - type: Literal["code_clipboard"] = "code_clipboard" - title: str = "Code" - text: str - - def build(self): - return dbc.Accordion( - [ - dbc.AccordionItem( - dbc.Card( - [ - html.H3(self.title), - dcc.Markdown(self.text, id=self.id, className="code-block"), - dcc.Clipboard(target_id=self.id, className="code-clipboard"), - ] - ), - title="SHOW CODE", - ) - ], - start_collapsed=True, - ) - - -class Markdown(vm.VizroBaseModel): - type: Literal["markdown"] = "markdown" - text: str = Field( - ..., description="Markdown string to create card title/text that should adhere to the CommonMark Spec." - ) - classname: str = "" - - def build(self): - return dcc.Markdown(id=self.id, children=self.text, dangerously_allow_html=False, className=self.classname) - - -class FlexContainer(vm.Container): - """Custom flex `Container`.""" - - type: Literal["flex_container"] = "flex_container" - - def build(self): - return html.Div( - id=self.id, children=[component.build() for component in self.components], className="flex-container" - ) diff --git a/vizro-core/examples/_dev/utils/_pages_charts.py b/vizro-core/examples/_dev/utils/_pages_charts.py deleted file mode 100644 index a69a86aee..000000000 --- a/vizro-core/examples/_dev/utils/_pages_charts.py +++ /dev/null @@ -1,479 +0,0 @@ -"""Contains custom components and charts used inside the dashboard.""" - -import vizro.models as vm -import vizro.plotly.express as px - -from ._charts import CodeClipboard, FlexContainer, Markdown - -PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 - -gapminder = px.data.gapminder() -iris = px.data.iris() -stocks = px.data.stocks() -tips = px.data.tips() - -vm.Page.add_type("components", CodeClipboard) -vm.Page.add_type("components", FlexContainer) -vm.Container.add_type("components", Markdown) - -# CHART PAGES ------------------------------------------------------------- -line = vm.Page( - title="Line", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a Line? - - A Line chart presents a series of data points over a continuous interval or time period, joined together with straight lines. - -   - - #### When to use it? - - You should select a Line chart when you want to show trends and invite analysis of how the data has changed - over time. Usually, your y-axis will show a quantitative value and your x-axis will be marked as a timescale - or a sequence of intervals. You can also display negative values below the x-axis. If you wish to group - several lines (different data series) in the same chart, try to limit yourself to 3-4 to avoid cluttering - up your chart and making it harder for the audience to read. - """ - ), - vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - gapminder = px.data.gapminder() - - page = vm.Page( - title="Line", - components=[ - vm.Graph( - figure=px.line(stocks, x="date", y="GOOG") - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ - ), - ], -) - - -scatter = vm.Page( - title="Scatter", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a scatter? - - A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two - different variables - one plotted along the x-axis and the other plotted along the y-axis. - -   - - #### When to use it? - - Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes - called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when - you have paired numerical data and you want to see if one variable impacts the other. However, do remember - that correlation is not causation. Make sure your audience does not draw the wrong conclusions. - """ - ), - vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - iris = px.data.iris() - - page = vm.Page( - title="Scatter", - components=[ - vm.Graph( - figure=px.scatter( - iris, x="sepal_width", y="sepal_length", color="species" - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - -bar = vm.Page( - title="Bar", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a bar chart? - - A Bar chart displays bars in lengths proportional to the values they represent. One axis of - the chart shows the categories to compare and the other axis provides a value scale, - starting with zero. - -   - - #### When to use it? - - Select a Bar chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling - clearly when you have a large number of bars. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. - - """ - ), - vm.Graph( - figure=px.bar( - data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), - x="total_bill", - y="day", - orientation="h", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Bar", - components=[ - vm.Graph( - figure=px.bar(data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), x="total_bill", y="day",orientation="h") - ) - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ - ), - ], -) - - -column = vm.Page( - title="Column", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a column chart? - - A Column chart is a vertical Bar chart, with column lengths varying according to the - categorical value they represent. The scale is presented on the y-axis, starting with zero. - -   - - #### When to use it? - - Select a Column chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents `how many?` in each category. You can - arrange your columns in any order to fit the message you wish to emphasise. Be mindful of - labelling clearly when you have a large number of columns. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. - - """ - ), - vm.Graph( - figure=px.bar( - data_frame=gapminder.query("country == 'China'"), - x="year", - y="gdpPercap", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - gapminder = px.data.gapminder() - - page = vm.Page( - title="Column", - components=[ - vm.Graph( - figure=px.bar( - data_frame=gapminder.query("country == 'China'"), x="year", y="gdpPercap" - ) - ) - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ - ), - ], -) - - -pie = vm.Page( - title="Pie", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a pie chart? - - A Pie chart is a circular chart divided into segments to show proportions and percentages between categories. The circle represents the whole. - -   - - #### When to use it? - - Use the Pie chart when you need to show your audience a quick view of how data is distributed - proportionately, with percentages highlighted. The different values you present must add up to a total and - equal 100%. - - The downsides are that Pie charts tend to occupy more space than other charts, they don’t - work well with more than a few values because labelling small segments is challenging, and it can be - difficult to accurately compare the sizes of the segments. - - """ - ), - vm.Graph( - figure=px.pie( - data_frame=tips, - values="tip", - names="day", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Pie", - components=[ - vm.Graph( - figure=px.pie( - data_frame=tips, - values='tip', names='day', - ) - ) - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ - ), - ], -) - - -donut = vm.Page( - title="Donut", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a donut chart? - - A Donut chart looks like a Pie chart, but has a blank space in the centre which may contain additional information. - -   - - #### When to use it? - - A Donut chart can be used in place of a Pie chart, particularly when you are short of space or have extra information you would like to share about the data. It may also be more effective if you wish your audience to focus on the length of the arcs of the sections instead of the proportions of the segment sizes. - - """ - ), - vm.Graph( - figure=px.pie( - data_frame=tips, - values="tip", - names="day", - hole=0.4, - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Pie", - components=[ - vm.Graph( - figure=px.pie( - data_frame=tips, - values='tip', names='day', hole=0.4 - ) - ) - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ - ), - ], -) - - -boxplot = vm.Page( - title="Boxplot", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a boxplot? - - A Box Plot (also known as a Box and Whisker Plot) provides a visual display of multiple datasets, indicating the median (centre) and the range of the data for each. - -   - - #### When to use it? - - Choose a Box Plot when you need to summarise distributions between many groups or datasets. It takes up less space than many other charts. - - Create boxes to display the median, and the upper and lower quartiles. Add ‘whiskers’ to highlight variability outside the upper and lower quartiles. You can add outliers as dots beyond, but in line with the whiskers. - - """ - ), - vm.Graph( - figure=px.box( - data_frame=tips, - y="total_bill", - x="day", - color="day", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Boxplot", - components=[ - vm.Graph( - figure=px.boxplot( - data_frame=tips, - y='total_bill', x='day', color='day', - ) - ), - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ - ), - ], -) - - -violin = vm.Page( - title="Violin", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a violin? - - A Violin Plot is similar to a Box Plot, but works better for visualising more complex distributions and their probability density at different values. - -   - - #### When to use it? - - Use this chart to go beyond the simple Box Plot and show the distribution shape of the data, the inter-quartile range, the confidence intervals and the median. - """ - ), - vm.Graph( - figure=px.violin( - data_frame=tips, - y="total_bill", - x="day", - color="day", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Violin", - components=[ - vm.Graph( - figure=px.violin( - data_frame=tips, - y='total_bill', x='day', color='day', - ) - ), - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ - ), - ], -) diff --git a/vizro-core/examples/_dev/utils/_tabs_home.py b/vizro-core/examples/_dev/utils/_tabs_home.py deleted file mode 100644 index cba5bcbf8..000000000 --- a/vizro-core/examples/_dev/utils/_tabs_home.py +++ /dev/null @@ -1,400 +0,0 @@ -"""Contains custom components and charts used inside the dashboard.""" - -import vizro.models as vm -import vizro.plotly.express as px - -from ._charts import CodeClipboard, FlexContainer, Markdown - -gapminder = px.data.gapminder() -vm.Page.add_type("components", CodeClipboard) -vm.Page.add_type("components", FlexContainer) -vm.Container.add_type("components", Markdown) -vm.Container.add_type("components", FlexContainer) - - -DEVIATION_CHARTS = sorted(["line", "scatter", "slope", "lollipop", "diverging-bar"]) -CORRELATION_CHARTS = ["scatter"] -RANKING_CHARTS = sorted( - [ - "column", - "stacked-column", - "ordered-bubble", - "column-line", - "bar", - "donut", - "arc", - "lollipop", - "waterfall", - "diverging-bar", - "boxplot", - ] -) -DISTRIBUTION_CHARTS = sorted( - [ - "histogram", - "butterfly", - "pie", - "donut", - "arc", - "violin", - "lollipop", - "cumulative-curve", - "waterfall", - "treemap", - "venn", - "barcode", - ] -) -MAGNITUDE_CHARTS = sorted( - [ - "column", - "marimekko", - "stacked-column", - "ordered-bubble", - "column-line", - "surplus", - "butterfly", - "bubble-timeline", - "bar", - "pie", - "donut", - "arc", - "violin", - "slope", - "lollipop", - "cumulative-curve", - "waterfall", - "treemap", - "venn", - "diverging-bar", - "bullet", - "dot-plot", - ] -) -TIME_CHARTS = sorted( - [ - "column", - "gantt", - "column-line", - "bubble-timeline", - "bar", - "line", - "scatter", - "lollipop", - "diverging-bar", - "stepped-line", - "sparkline", - ] -) -PART_TO_WHOLE_CHARTS = sorted( - [ - "marimekko", - "stacked-column", - "column-line", - "pie", - "donut", - "arc", - "waterfall", - "treemap", - "venn", - ] -) -FLOW_CHARTS = sorted(["gantt", "line", "slope", "stepped-line"]) -SPATIAL_CHARTS = sorted(["choropleth", "dot-density", "flow-map"]) - -ALL_CHARTS = sorted( - set( - DEVIATION_CHARTS - + CORRELATION_CHARTS - + RANKING_CHARTS - + DISTRIBUTION_CHARTS - + MAGNITUDE_CHARTS - + TIME_CHARTS - + PART_TO_WHOLE_CHARTS - + FLOW_CHARTS - + SPATIAL_CHARTS - ) -) - - -# HOMEPAGE ------------------------------------------------------------- -home_all = vm.Container( - title="All", - components=[ - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {chart.replace("-", " ").title()} - """, - href=f"/{chart}", - ) - for chart in ALL_CHARTS - ], - ) - ], -) - -home_deviation = vm.Container( - title="Deviation", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Deviation enables you to draw attention to variations (+/-) from a fixed reference point. - Often this reference point is zero, but you might also show a target or a long-term average. - You can also use deviation to express a positive, neutral or negative sentiment. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {chart.replace("-", " ").title()} - """, - href=f"/{chart}", - ) - for chart in DEVIATION_CHARTS - ], - ), - ], -) - -home_correlation = vm.Container( - title="Correlation", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Correlation helps you show the relationship between two or more variables. It is important that you - make it clear to your audience whether or not the relationship is causal, i.e., whether one causes the - other. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {chart.replace("-", " ").title()} - """, - href=f"/{chart}", - ) - for chart in CORRELATION_CHARTS - ], - ), - ], -) - -home_ranking = vm.Container( - title="Ranking", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Ranking enables you to present items in an ordered list. You will use this when you want to highlight the - position of an item rather than its absolute or relative value. You might want to emphasise the most - interesting points with highlighting or labels to ensure the reader understands what matters most. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {chart.replace("-", " ").title()} - """, - href=f"/{chart}", - ) - for chart in RANKING_CHARTS - ], - ), - ], -) - -home_distribution = vm.Container( - title="Distribution", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Distribution helps you to present all the possible values (or intervals) of your data and how often they - occur. You can organise the data to show the number or percentage of items in a specified group, what shape - the group takes, where the centre lies, and how much variability there is in the data. This shape - (or ‘skew’) of a distribution can be a powerful way for you to highlight either the existence or lack of - uniformity or equality in the data. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {chart.replace("-", " ").title()} - """, - href=f"/{chart}", - ) - for chart in DISTRIBUTION_CHARTS - ], - ), - ], -) - -home_magnitude = vm.Container( - title="Magnitude", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Magnitude allows you to emphasise size comparisons of ‘counted’ items in your data set. You can show - relative comparisons (whether something is larger or smaller) or absolute differences (where the nuances - are most interesting). Typically, you will use magnitude for actual numbers versus calculated rates or - percentages. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {chart.replace("-", " ").title()} - """, - href=f"/{chart}", - ) - for chart in MAGNITUDE_CHARTS - ], - ), - ], -) - -home_time = vm.Container( - title="Time", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Time helps you draw attention to important trends emerging over a specified period. The time period you - select could be as short as seconds or as long as centuries. What matters most is selecting the correct - period of time to best show your audience the message they need to take away. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {chart.replace("-", " ").title()} - """, - href=f"/{chart}", - ) - for chart in TIME_CHARTS - ], - ), - ], -) - -home_part = vm.Container( - title="Part-to-whole", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the - size of the parts to be most important, a magnitude chart may be more appropriate. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {chart.replace("-", " ").title()} - """, - href=f"/{chart}", - ) - for chart in PART_TO_WHOLE_CHARTS - ], - ), - ], -) - -home_flow = vm.Container( - title="Flow", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - With flow charts, you can highlight the quantity or the intensity of the movement between more than one - state or condition. The flow might be steps in a logical sequence or movement between different geographical - locations. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {chart.replace("-", " ").title()} - """, - href=f"/{chart}", - ) - for chart in FLOW_CHARTS - ], - ), - ], -) - -home_spatial = vm.Container( - title="Spatial", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Spatial charts allow you to demonstrate precise locations or geographical patterns in your data. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {chart.replace("-", " ").title()} - """, - href=f"/{chart}", - ) - for chart in SPATIAL_CHARTS - ], - ), - ], -) From 48f9138a172a90b414bb0d490fc75e53f7572047 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 8 Jul 2024 09:47:00 +0000 Subject: [PATCH 036/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../examples/charts/utils/_pages_charts.py | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/vizro-core/examples/charts/utils/_pages_charts.py b/vizro-core/examples/charts/utils/_pages_charts.py index a69a86aee..2f2503f2a 100644 --- a/vizro-core/examples/charts/utils/_pages_charts.py +++ b/vizro-core/examples/charts/utils/_pages_charts.py @@ -77,16 +77,16 @@ #### What is a scatter? - A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two + A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two different variables - one plotted along the x-axis and the other plotted along the y-axis.   #### When to use it? - Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes - called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when - you have paired numerical data and you want to see if one variable impacts the other. However, do remember + Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes + called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when + you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation. Make sure your audience does not draw the wrong conclusions. """ ), @@ -257,11 +257,11 @@ #### When to use it? Use the Pie chart when you need to show your audience a quick view of how data is distributed - proportionately, with percentages highlighted. The different values you present must add up to a total and - equal 100%. - - The downsides are that Pie charts tend to occupy more space than other charts, they don’t - work well with more than a few values because labelling small segments is challenging, and it can be + proportionately, with percentages highlighted. The different values you present must add up to a total and + equal 100%. + + The downsides are that Pie charts tend to occupy more space than other charts, they don’t + work well with more than a few values because labelling small segments is challenging, and it can be difficult to accurately compare the sizes of the segments. """ From 7a51e4a74594833dff89abdb115e383dcdb1da67 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 8 Jul 2024 11:57:51 +0200 Subject: [PATCH 037/109] Move custom CSS to static where relevant --- .../examples/charts/assets/css/custom.css | 34 +++---------------- .../examples/charts/utils/_pages_charts.py | 18 +++++----- .../src/vizro/static/css/fonts/code.css | 19 +++++++++++ 3 files changed, 32 insertions(+), 39 deletions(-) create mode 100644 vizro-core/src/vizro/static/css/fonts/code.css diff --git a/vizro-core/examples/charts/assets/css/custom.css b/vizro-core/examples/charts/assets/css/custom.css index 755d3106c..29e0a9aa5 100644 --- a/vizro-core/examples/charts/assets/css/custom.css +++ b/vizro-core/examples/charts/assets/css/custom.css @@ -2,6 +2,10 @@ padding-left: 8px; } +#left-main { + width: 288px; +} + img[src*="#chart-icon"] { width: 100%; } @@ -13,32 +17,6 @@ img[src*="#chart-icon"] { top: 12px; } -code.language-python.hljs { - padding: 0; -} - -.hljs { - background: unset; - color: unset; - font-family: unset; -} - -.hljs-string { - color: var(--text-code-string); - font-family: unset; -} - -.hljs-keyword { - color: var(--text-code-keyword); - font-family: unset; -} - -.html-intro { - border-left: 4px solid var(--text-secondary); - color: var(--text-secondary); - padding: 12px; -} - .flex-container .card { height: 208px; width: 176px; @@ -66,7 +44,3 @@ code.language-python.hljs { font-size: 16px; line-height: 20px; } - -#left-main { - width: 288px; -} diff --git a/vizro-core/examples/charts/utils/_pages_charts.py b/vizro-core/examples/charts/utils/_pages_charts.py index a69a86aee..2f2503f2a 100644 --- a/vizro-core/examples/charts/utils/_pages_charts.py +++ b/vizro-core/examples/charts/utils/_pages_charts.py @@ -77,16 +77,16 @@ #### What is a scatter? - A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two + A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two different variables - one plotted along the x-axis and the other plotted along the y-axis.   #### When to use it? - Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes - called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when - you have paired numerical data and you want to see if one variable impacts the other. However, do remember + Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes + called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when + you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation. Make sure your audience does not draw the wrong conclusions. """ ), @@ -257,11 +257,11 @@ #### When to use it? Use the Pie chart when you need to show your audience a quick view of how data is distributed - proportionately, with percentages highlighted. The different values you present must add up to a total and - equal 100%. - - The downsides are that Pie charts tend to occupy more space than other charts, they don’t - work well with more than a few values because labelling small segments is challenging, and it can be + proportionately, with percentages highlighted. The different values you present must add up to a total and + equal 100%. + + The downsides are that Pie charts tend to occupy more space than other charts, they don’t + work well with more than a few values because labelling small segments is challenging, and it can be difficult to accurately compare the sizes of the segments. """ diff --git a/vizro-core/src/vizro/static/css/fonts/code.css b/vizro-core/src/vizro/static/css/fonts/code.css new file mode 100644 index 000000000..14674c7ef --- /dev/null +++ b/vizro-core/src/vizro/static/css/fonts/code.css @@ -0,0 +1,19 @@ +code.language-python.hljs { + padding: 0; +} + +.hljs { + background: unset; + color: unset; + font-family: unset; +} + +.hljs-string { + color: var(--text-code-string); + font-family: unset; +} + +.hljs-keyword { + color: var(--text-code-keyword); + font-family: unset; +} From 70aa33669230742532ba575f0438f4f1cee871ee Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 8 Jul 2024 13:31:48 +0200 Subject: [PATCH 038/109] Rename and tidy --- vizro-core/examples/charts/README.md | 29 ++----------- vizro-core/examples/charts/app.py | 4 +- .../utils/{_charts.py => _components.py} | 1 - .../utils/{_tabs_home.py => _containers.py} | 12 +++--- .../utils/{_pages_charts.py => _pages.py} | 43 ++++++++++++------- vizro-core/tests/integration/test_examples.py | 1 + 6 files changed, 40 insertions(+), 50 deletions(-) rename vizro-core/examples/charts/utils/{_charts.py => _components.py} (95%) rename vizro-core/examples/charts/utils/{_tabs_home.py => _containers.py} (95%) rename vizro-core/examples/charts/utils/{_pages_charts.py => _pages.py} (88%) diff --git a/vizro-core/examples/charts/README.md b/vizro-core/examples/charts/README.md index 7704dcb63..e8f3ff1c2 100644 --- a/vizro-core/examples/charts/README.md +++ b/vizro-core/examples/charts/README.md @@ -1,30 +1,9 @@ -# KPI dashboard +# Chart gallery dashboard -This demo dashboard provides an example of a Key Performance Indicator (KPI) dashboard, designed to help users get started and extend further. -It uses fictional budget data to demonstrate the capabilities of Vizro using real world applications. - -Special thanks to the [#RWFD Real World Fake Data initiative](https://opendatainitiative.io/), a community project that -provides high-quality fake data for creating realistic dashboard examples for real-world applications. - -Note: The data has been additionally edited for the purpose of this example. - -Gif to KPI dashboard +This demo dashboard provides a gallery of charts. It includes guidance on when to use each chart type and sample code +to create them using Plotly and Vizro. ## How to run the example locally -1. If you have `hatch` set up, run the example with the command `hatch run example kpi`. Otherwise, run the `app.py` file with your environment activated where `vizro` is installed. +1. If you have `hatch` set up, run the example with the command `hatch run example charts`. Otherwise, run the `app.py` file with your environment activated where `vizro` is installed. 2. You should now be able to access the app locally via http://127.0.0.1:8050/. - -## Possible future iterations - -- Enable selection of year filter -- Enable current year vs. past year comparison -- Enable dynamic KPI Cards -- Bar - Enable drill-downs from Issue to Sub-issue and Product to Sub-product -- Bar - Reformat numbers with commas in bar chart -- Bar - Left-align y-axis labels -- Bar - Shorten labels -- Line - Customize function to always show selected year vs. past year -- Table-view - Check why date format does not work on `Date Received` -- Table-view - Add icons to `On time?` column -- Table-view - Improve speed by applying cache or overcome limitation that entire data set is loaded in diff --git a/vizro-core/examples/charts/app.py b/vizro-core/examples/charts/app.py index 9d5dda5a0..7e01b53c2 100644 --- a/vizro-core/examples/charts/app.py +++ b/vizro-core/examples/charts/app.py @@ -1,8 +1,8 @@ """Example to show dashboard configuration specified as pydantic models.""" import vizro.models as vm -from utils._pages_charts import * -from utils._tabs_home import * +from utils._containers import * +from utils._pages import * from vizro import Vizro # HOME PAGE ----- diff --git a/vizro-core/examples/charts/utils/_charts.py b/vizro-core/examples/charts/utils/_components.py similarity index 95% rename from vizro-core/examples/charts/utils/_charts.py rename to vizro-core/examples/charts/utils/_components.py index 5661e68f6..5529e216e 100644 --- a/vizro-core/examples/charts/utils/_charts.py +++ b/vizro-core/examples/charts/utils/_components.py @@ -12,7 +12,6 @@ from pydantic import Field -# CUSTOM COMPONENTS ------------------------------------------------------------- class CodeClipboard(vm.VizroBaseModel): type: Literal["code_clipboard"] = "code_clipboard" title: str = "Code" diff --git a/vizro-core/examples/charts/utils/_tabs_home.py b/vizro-core/examples/charts/utils/_containers.py similarity index 95% rename from vizro-core/examples/charts/utils/_tabs_home.py rename to vizro-core/examples/charts/utils/_containers.py index cba5bcbf8..cb1f2d78d 100644 --- a/vizro-core/examples/charts/utils/_tabs_home.py +++ b/vizro-core/examples/charts/utils/_containers.py @@ -3,7 +3,7 @@ import vizro.models as vm import vizro.plotly.express as px -from ._charts import CodeClipboard, FlexContainer, Markdown +from ._components import CodeClipboard, FlexContainer, Markdown gapminder = px.data.gapminder() vm.Page.add_type("components", CodeClipboard) @@ -203,7 +203,7 @@ Markdown( text=""" Ranking enables you to present items in an ordered list. You will use this when you want to highlight the - position of an item rather than its absolute or relative value. You might want to emphasise the most + position of an item rather than its absolute or relative value. You might want to emphasize the most interesting points with highlighting or labels to ensure the reader understands what matters most. """, classname="intro-text", @@ -232,9 +232,9 @@ Markdown( text=""" Distribution helps you to present all the possible values (or intervals) of your data and how often they - occur. You can organise the data to show the number or percentage of items in a specified group, what shape - the group takes, where the centre lies, and how much variability there is in the data. This shape - (or ‘skew’) of a distribution can be a powerful way for you to highlight either the existence or lack of + occur. You can organize the data to show the number or percentage of items in a specified group, what shape + the group takes, where the center lies, and how much variability there is in the data. This shape + (or `skew`) of a distribution can be a powerful way for you to highlight either the existence or lack of uniformity or equality in the data. """, classname="intro-text", @@ -262,7 +262,7 @@ components=[ Markdown( text=""" - Magnitude allows you to emphasise size comparisons of ‘counted’ items in your data set. You can show + Magnitude allows you to emphasize size comparisons of `counted` items in your data set. You can show relative comparisons (whether something is larger or smaller) or absolute differences (where the nuances are most interesting). Typically, you will use magnitude for actual numbers versus calculated rates or percentages. diff --git a/vizro-core/examples/charts/utils/_pages_charts.py b/vizro-core/examples/charts/utils/_pages.py similarity index 88% rename from vizro-core/examples/charts/utils/_pages_charts.py rename to vizro-core/examples/charts/utils/_pages.py index 2f2503f2a..372323664 100644 --- a/vizro-core/examples/charts/utils/_pages_charts.py +++ b/vizro-core/examples/charts/utils/_pages.py @@ -3,7 +3,7 @@ import vizro.models as vm import vizro.plotly.express as px -from ._charts import CodeClipboard, FlexContainer, Markdown +from ._components import CodeClipboard, FlexContainer, Markdown PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 @@ -26,7 +26,8 @@ #### What is a Line? - A Line chart presents a series of data points over a continuous interval or time period, joined together with straight lines. + A Line chart presents a series of data points over a continuous interval or time period, joined together + with straight lines.   @@ -77,7 +78,7 @@ #### What is a scatter? - A scatter plot is a two-dimensional data visualisation using dots to represent the values obtained for two + A scatter plot is a two-dimensional data visualization using dots to represent the values obtained for two different variables - one plotted along the x-axis and the other plotted along the y-axis.   @@ -138,7 +139,7 @@ Select a Bar chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your bars in any order to fit the message you wish to emphasise. Be mindful of labelling + arrange your bars in any order to fit the message you wish to emphasize. Be mindful of labeling clearly when you have a large number of bars. You may need to include a legend, or use abbreviations in the chart with fuller descriptions below of the terms used. @@ -198,8 +199,8 @@ Select a Column chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents `how many?` in each category. You can - arrange your columns in any order to fit the message you wish to emphasise. Be mindful of - labelling clearly when you have a large number of columns. You may need to include a legend, + arrange your columns in any order to fit the message you wish to emphasize. Be mindful of + labeling clearly when you have a large number of columns. You may need to include a legend, or use abbreviations in the chart with fuller descriptions below of the terms used. """ @@ -250,7 +251,8 @@ #### What is a pie chart? - A Pie chart is a circular chart divided into segments to show proportions and percentages between categories. The circle represents the whole. + A Pie chart is a circular chart divided into segments to show proportions and percentages between + categories. The circle represents the whole.   @@ -260,8 +262,8 @@ proportionately, with percentages highlighted. The different values you present must add up to a total and equal 100%. - The downsides are that Pie charts tend to occupy more space than other charts, they don’t - work well with more than a few values because labelling small segments is challenging, and it can be + The downsides are that Pie charts tend to occupy more space than other charts, they don`t + work well with more than a few values because labeling small segments is challenging, and it can be difficult to accurately compare the sizes of the segments. """ @@ -313,13 +315,16 @@ #### What is a donut chart? - A Donut chart looks like a Pie chart, but has a blank space in the centre which may contain additional information. + A Donut chart looks like a Pie chart, but has a blank space in the center which may contain additional + information.   #### When to use it? - A Donut chart can be used in place of a Pie chart, particularly when you are short of space or have extra information you would like to share about the data. It may also be more effective if you wish your audience to focus on the length of the arcs of the sections instead of the proportions of the segment sizes. + A Donut chart can be used in place of a Pie chart, particularly when you are short of space or have extra + information you would like to share about the data. It may also be more effective if you wish your audience + to focus on the length of the arcs of the sections instead of the proportions of the segment sizes. """ ), @@ -371,15 +376,19 @@ #### What is a boxplot? - A Box Plot (also known as a Box and Whisker Plot) provides a visual display of multiple datasets, indicating the median (centre) and the range of the data for each. + A Box Plot (also known as a Box and Whisker Plot) provides a visual display of multiple datasets, + indicating the median (center) and the range of the data for each.   #### When to use it? - Choose a Box Plot when you need to summarise distributions between many groups or datasets. It takes up less space than many other charts. + Choose a Box Plot when you need to summarize distributions between many groups or datasets. It takes up + less space than many other charts. - Create boxes to display the median, and the upper and lower quartiles. Add ‘whiskers’ to highlight variability outside the upper and lower quartiles. You can add outliers as dots beyond, but in line with the whiskers. + Create boxes to display the median, and the upper and lower quartiles. Add `whiskers` to highlight + variability outside the upper and lower quartiles. You can add outliers as dots beyond, but in line with + the whiskers. """ ), @@ -431,13 +440,15 @@ #### What is a violin? - A Violin Plot is similar to a Box Plot, but works better for visualising more complex distributions and their probability density at different values. + A Violin Plot is similar to a Box Plot, but works better for visualising more complex distributions and + their probability density at different values.   #### When to use it? - Use this chart to go beyond the simple Box Plot and show the distribution shape of the data, the inter-quartile range, the confidence intervals and the median. + Use this chart to go beyond the simple Box Plot and show the distribution shape of the data, the + inter-quartile range, the confidence intervals and the median. """ ), vm.Graph( diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py index ab9876280..86db05afc 100644 --- a/vizro-core/tests/integration/test_examples.py +++ b/vizro-core/tests/integration/test_examples.py @@ -49,6 +49,7 @@ def dashboard(request, monkeypatch): (examples_path / "features", ""), (examples_path / "demo", ""), (examples_path / "kpi", ""), + (examples_path / "charts", ""), (examples_path / "_dev", "yaml_version"), (examples_path / "features", "yaml_version"), ], From 7d77b7640e39459e66408cf62a0c3bd255380dba Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 8 Jul 2024 13:38:18 +0200 Subject: [PATCH 039/109] Tidy and lint --- pyproject.toml | 2 +- vizro-core/examples/charts/app.py | 36 ++++++++++++------- .../examples/charts/utils/_containers.py | 21 ++++++----- vizro-core/examples/charts/utils/_pages.py | 2 +- 4 files changed, 35 insertions(+), 26 deletions(-) diff --git a/pyproject.toml b/pyproject.toml index 194714c4c..306a87cc4 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -27,7 +27,7 @@ target-version = ["py38"] [tool.codespell] builtin = "clear,rare,en-GB_to_en-US" ignore-words-list = "grey,ned,sav" -skip = "*.min.css.map,*.min.css,.vale/*" +skip = "*.min.css.map,*.min.css,.vale/*, *assets/*" [tool.mypy] # strict checks : strict = true diff --git a/vizro-core/examples/charts/app.py b/vizro-core/examples/charts/app.py index 7e01b53c2..47efbba3f 100644 --- a/vizro-core/examples/charts/app.py +++ b/vizro-core/examples/charts/app.py @@ -1,26 +1,36 @@ """Example to show dashboard configuration specified as pydantic models.""" import vizro.models as vm -from utils._containers import * -from utils._pages import * +from utils._containers import ( + container_all, + container_correlation, + container_deviation, + container_distribution, + container_flow, + container_magnitude, + container_part, + container_ranking, + container_spatial, + container_time, +) +from utils._pages import bar, boxplot, column, donut, line, pie, scatter, violin from vizro import Vizro -# HOME PAGE ----- homepage = vm.Page( title="Overview", components=[ vm.Tabs( tabs=[ - home_all, - home_deviation, - home_correlation, - home_ranking, - home_distribution, - home_magnitude, - home_time, - home_part, - home_flow, - home_spatial, + container_all, + container_deviation, + container_correlation, + container_ranking, + container_distribution, + container_magnitude, + container_time, + container_part, + container_flow, + container_spatial, ] ), ], diff --git a/vizro-core/examples/charts/utils/_containers.py b/vizro-core/examples/charts/utils/_containers.py index cb1f2d78d..d3ba65466 100644 --- a/vizro-core/examples/charts/utils/_containers.py +++ b/vizro-core/examples/charts/utils/_containers.py @@ -117,8 +117,7 @@ ) -# HOMEPAGE ------------------------------------------------------------- -home_all = vm.Container( +container_all = vm.Container( title="All", components=[ FlexContainer( @@ -138,7 +137,7 @@ ], ) -home_deviation = vm.Container( +container_deviation = vm.Container( title="Deviation", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ @@ -167,7 +166,7 @@ ], ) -home_correlation = vm.Container( +container_correlation = vm.Container( title="Correlation", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ @@ -196,7 +195,7 @@ ], ) -home_ranking = vm.Container( +container_ranking = vm.Container( title="Ranking", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ @@ -225,7 +224,7 @@ ], ) -home_distribution = vm.Container( +container_distribution = vm.Container( title="Distribution", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ @@ -256,7 +255,7 @@ ], ) -home_magnitude = vm.Container( +container_magnitude = vm.Container( title="Magnitude", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ @@ -286,7 +285,7 @@ ], ) -home_time = vm.Container( +container_time = vm.Container( title="Time", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ @@ -315,7 +314,7 @@ ], ) -home_part = vm.Container( +container_part = vm.Container( title="Part-to-whole", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ @@ -343,7 +342,7 @@ ], ) -home_flow = vm.Container( +container_flow = vm.Container( title="Flow", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ @@ -372,7 +371,7 @@ ], ) -home_spatial = vm.Container( +container_spatial = vm.Container( title="Spatial", layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), components=[ diff --git a/vizro-core/examples/charts/utils/_pages.py b/vizro-core/examples/charts/utils/_pages.py index 372323664..25894a9cb 100644 --- a/vizro-core/examples/charts/utils/_pages.py +++ b/vizro-core/examples/charts/utils/_pages.py @@ -440,7 +440,7 @@ #### What is a violin? - A Violin Plot is similar to a Box Plot, but works better for visualising more complex distributions and + A Violin Plot is similar to a Box Plot, but works better for visualizing more complex distributions and their probability density at different values.   From 60944ba94e3a40a360fdb252d2c803c91ff63c53 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 12 Jul 2024 12:21:14 +0200 Subject: [PATCH 040/109] Refactor pages --- vizro-core/examples/charts/app.py | 45 ++++- .../assets/images/charts/ordered-bar.svg | 20 +++ .../assets/images/charts/ordered-column.svg | 20 +++ .../assets/images/charts/time-column.svg | 20 +++ .../examples/charts/utils/_containers.py | 4 +- vizro-core/examples/charts/utils/_pages.py | 156 ++++++++++-------- 6 files changed, 187 insertions(+), 78 deletions(-) create mode 100644 vizro-core/examples/charts/assets/images/charts/ordered-bar.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/ordered-column.svg create mode 100644 vizro-core/examples/charts/assets/images/charts/time-column.svg diff --git a/vizro-core/examples/charts/app.py b/vizro-core/examples/charts/app.py index 47efbba3f..7a59ae8ed 100644 --- a/vizro-core/examples/charts/app.py +++ b/vizro-core/examples/charts/app.py @@ -13,7 +13,20 @@ container_spatial, container_time, ) -from utils._pages import bar, boxplot, column, donut, line, pie, scatter, violin +from utils._pages import ( + bar, + boxplot, + column, + donut, + line, + ordered_bar, + ordered_column, + pie, + scatter, + time_column, + time_line, + violin, +) from vizro import Vizro homepage = vm.Page( @@ -38,29 +51,43 @@ dashboard = vm.Dashboard( - pages=[homepage, bar, column, line, scatter, pie, donut, boxplot, violin], + pages=[ + homepage, + bar, + column, + line, + scatter, + pie, + donut, + boxplot, + violin, + ordered_bar, + ordered_column, + time_line, + time_column, + ], navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ vm.NavLink(label="Overview", pages=["Overview"], icon="Home"), vm.NavLink( label="Deviation", - pages={"Deviation": ["Line", "Scatter"]}, + pages={"Deviation": ["Line", "Scatter"]}, # Replace with diverging bar icon="Planner Review", ), vm.NavLink( label="Correlation", - pages={"Deviation": ["Scatter"]}, + pages={"Correlation": ["Scatter"]}, icon="Bubble Chart", ), vm.NavLink( label="Ranking", - pages={"Ranking": ["Boxplot"]}, + pages={"Ranking": ["Ordered Bar", "Ordered Column"]}, icon="Stacked Bar Chart", ), vm.NavLink( label="Distribution", - pages={"Distribution": ["Pie", "Donut", "Violin"]}, + pages={"Distribution": ["Boxplot", "Violin"]}, icon="Waterfall Chart", ), vm.NavLink( @@ -70,7 +97,7 @@ ), vm.NavLink( label="Time", - pages={"Time": ["Bar", "Column", "Scatter", "Line"]}, + pages={"Time": ["Time-Line", "Time-Column"]}, icon="Timeline", ), vm.NavLink( @@ -80,12 +107,12 @@ ), vm.NavLink( label="Flow", - pages={"Flow": ["Line"]}, + pages={"Flow": ["Line"]}, # TODO: Replace with Sankey icon="Stacked Line Chart", ), vm.NavLink( label="Spatial", - pages={"Spatial": ["Line"]}, + pages={"Spatial": ["Line"]}, # TODO: Replace with map icon="Map", ), ] diff --git a/vizro-core/examples/charts/assets/images/charts/ordered-bar.svg b/vizro-core/examples/charts/assets/images/charts/ordered-bar.svg new file mode 100644 index 000000000..342907fe4 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/ordered-bar.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 10 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/ordered-column.svg b/vizro-core/examples/charts/assets/images/charts/ordered-column.svg new file mode 100644 index 000000000..fca0509d6 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/ordered-column.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 11 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/assets/images/charts/time-column.svg b/vizro-core/examples/charts/assets/images/charts/time-column.svg new file mode 100644 index 000000000..fca0509d6 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/time-column.svg @@ -0,0 +1,20 @@ + + + + Group 6 Copy 11 + Created with Sketch. + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/utils/_containers.py b/vizro-core/examples/charts/utils/_containers.py index d3ba65466..319d596f7 100644 --- a/vizro-core/examples/charts/utils/_containers.py +++ b/vizro-core/examples/charts/utils/_containers.py @@ -16,11 +16,11 @@ CORRELATION_CHARTS = ["scatter"] RANKING_CHARTS = sorted( [ - "column", + "ordered-bar", + "ordered-column", "stacked-column", "ordered-bubble", "column-line", - "bar", "donut", "arc", "lollipop", diff --git a/vizro-core/examples/charts/utils/_pages.py b/vizro-core/examples/charts/utils/_pages.py index 25894a9cb..417840194 100644 --- a/vizro-core/examples/charts/utils/_pages.py +++ b/vizro-core/examples/charts/utils/_pages.py @@ -16,13 +16,16 @@ vm.Page.add_type("components", FlexContainer) vm.Container.add_type("components", Markdown) -# CHART PAGES ------------------------------------------------------------- -line = vm.Page( - title="Line", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" + +# REUSED ------------------------------------------------------------- +def line_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" #### What is a Line? @@ -39,10 +42,10 @@ several lines (different data series) in the same chart, try to limit yourself to 3-4 to avoid cluttering up your chart and making it harder for the audience to read. """ - ), - vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), - CodeClipboard( - text=""" + ), + vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), + CodeClipboard( + text=""" ```python import vizro.models as vm import vizro.plotly.express as px @@ -64,17 +67,19 @@ ``` """ - ), - ], -) + ), + ], + ) -scatter = vm.Page( - title="Scatter", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" +def scatter_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" #### What is a scatter? @@ -90,10 +95,10 @@ you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation. Make sure your audience does not draw the wrong conclusions. """ - ), - vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), - CodeClipboard( - text=""" + ), + vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), + CodeClipboard( + text=""" ```python import vizro.models as vm import vizro.plotly.express as px @@ -116,16 +121,19 @@ Vizro().build(dashboard).run() ``` """ - ), - ], -) + ), + ], + ) -bar = vm.Page( - title="Bar", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" + +def bar_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" #### What is a bar chart? @@ -144,17 +152,17 @@ or use abbreviations in the chart with fuller descriptions below of the terms used. """ - ), - vm.Graph( - figure=px.bar( - data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), - x="total_bill", - y="day", - orientation="h", - ) - ), - CodeClipboard( - text=""" + ), + vm.Graph( + figure=px.bar( + data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), + x="total_bill", + y="day", + orientation="h", + ) + ), + CodeClipboard( + text=""" ```python import vizro.models as vm import vizro.plotly.express as px @@ -166,7 +174,8 @@ title="Bar", components=[ vm.Graph( - figure=px.bar(data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), x="total_bill", y="day",orientation="h") + figure=px.bar(data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), + x="total_bill", y="day",orientation="h") ) ] ) @@ -176,17 +185,19 @@ ``` """ - ), - ], -) + ), + ], + ) -column = vm.Page( - title="Column", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" +def column_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" #### What is a column chart? @@ -204,16 +215,16 @@ or use abbreviations in the chart with fuller descriptions below of the terms used. """ - ), - vm.Graph( - figure=px.bar( - data_frame=gapminder.query("country == 'China'"), - x="year", - y="gdpPercap", - ) - ), - CodeClipboard( - text=""" + ), + vm.Graph( + figure=px.bar( + data_frame=gapminder.query("country == 'China'"), + x="year", + y="gdpPercap", + ) + ), + CodeClipboard( + text=""" ```python import vizro.models as vm import vizro.plotly.express as px @@ -237,9 +248,20 @@ ``` """ - ), - ], -) + ), + ], + ) + + +# PAGES ------------------------------------------------------------- +line = line_factory("line", "Line") +time_line = line_factory("Time-Line", "Line") +time_column = column_factory("Time-Column", "Column") +scatter = scatter_factory("scatter", "Scatter") +bar = bar_factory("bar", "Bar") +ordered_bar = bar_factory("ordered-bar", "Ordered Bar") +column = column_factory("column", "Column") +ordered_column = column_factory("ordered-column", "Ordered Column") pie = vm.Page( From e2acac148c8413f79e0a718860ec4d6f8e23d1a7 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 12 Jul 2024 12:25:01 +0200 Subject: [PATCH 041/109] Fix IDs --- vizro-core/examples/charts/utils/_pages.py | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/vizro-core/examples/charts/utils/_pages.py b/vizro-core/examples/charts/utils/_pages.py index 417840194..fcdae0745 100644 --- a/vizro-core/examples/charts/utils/_pages.py +++ b/vizro-core/examples/charts/utils/_pages.py @@ -254,14 +254,14 @@ def column_factory(id: str, title: str): # PAGES ------------------------------------------------------------- -line = line_factory("line", "Line") +line = line_factory("Line", "Line") time_line = line_factory("Time-Line", "Line") time_column = column_factory("Time-Column", "Column") -scatter = scatter_factory("scatter", "Scatter") -bar = bar_factory("bar", "Bar") -ordered_bar = bar_factory("ordered-bar", "Ordered Bar") -column = column_factory("column", "Column") -ordered_column = column_factory("ordered-column", "Ordered Column") +scatter = scatter_factory("Scatter", "Scatter") +bar = bar_factory("Bar", "Bar") +ordered_bar = bar_factory("Ordered Bar", "Ordered Bar") +column = column_factory("Column", "Column") +ordered_column = column_factory("Ordered Column", "Ordered Column") pie = vm.Page( From 4e8b237bf4d430439a9dab373ca57da2519f3379 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 12 Jul 2024 12:43:50 +0200 Subject: [PATCH 042/109] Introduce helper function to tidy chart title --- .../charts/assets/images/charts/time-line.svg | 17 ++++++++++ .../examples/charts/utils/_containers.py | 34 ++++++++++++------- 2 files changed, 38 insertions(+), 13 deletions(-) create mode 100644 vizro-core/examples/charts/assets/images/charts/time-line.svg diff --git a/vizro-core/examples/charts/assets/images/charts/time-line.svg b/vizro-core/examples/charts/assets/images/charts/time-line.svg new file mode 100644 index 000000000..e6a042d24 --- /dev/null +++ b/vizro-core/examples/charts/assets/images/charts/time-line.svg @@ -0,0 +1,17 @@ + + + + Group 6 Copy 19 + Created with Sketch. + + + + + + + + + + + + diff --git a/vizro-core/examples/charts/utils/_containers.py b/vizro-core/examples/charts/utils/_containers.py index 319d596f7..afb8ef86e 100644 --- a/vizro-core/examples/charts/utils/_containers.py +++ b/vizro-core/examples/charts/utils/_containers.py @@ -1,5 +1,7 @@ """Contains custom components and charts used inside the dashboard.""" +import re + import vizro.models as vm import vizro.plotly.express as px @@ -12,6 +14,13 @@ vm.Container.add_type("components", FlexContainer) +def tidy_chart_title(chart: str) -> str: + prefixes_to_remove = ["time-", "magnitude-", "deviation-"] + pattern = "^(" + "|".join(prefixes_to_remove) + ")" + chart_without_prefix = re.sub(pattern, "", chart) + return chart_without_prefix.replace("-", " ").title() + + DEVIATION_CHARTS = sorted(["line", "scatter", "slope", "lollipop", "diverging-bar"]) CORRELATION_CHARTS = ["scatter"] RANKING_CHARTS = sorted( @@ -73,12 +82,11 @@ ) TIME_CHARTS = sorted( [ - "column", + "time-line", + "time-column", "gantt", "column-line", "bubble-timeline", - "bar", - "line", "scatter", "lollipop", "diverging-bar", @@ -127,7 +135,7 @@ text=f""" ![](assets/images/charts/{chart}.svg#chart-icon) - #### {chart.replace("-", " ").title()} + #### {tidy_chart_title(chart)} """, href=f"/{chart}", ) @@ -156,7 +164,7 @@ text=f""" ![](assets/images/charts/{chart}.svg#chart-icon) - #### {chart.replace("-", " ").title()} + #### {tidy_chart_title(chart)} """, href=f"/{chart}", ) @@ -185,7 +193,7 @@ text=f""" ![](assets/images/charts/{chart}.svg#chart-icon) - #### {chart.replace("-", " ").title()} + #### {tidy_chart_title(chart)} """, href=f"/{chart}", ) @@ -214,7 +222,7 @@ text=f""" ![](assets/images/charts/{chart}.svg#chart-icon) - #### {chart.replace("-", " ").title()} + #### {tidy_chart_title(chart)} """, href=f"/{chart}", ) @@ -245,7 +253,7 @@ text=f""" ![](assets/images/charts/{chart}.svg#chart-icon) - #### {chart.replace("-", " ").title()} + #### {tidy_chart_title(chart)} """, href=f"/{chart}", ) @@ -275,7 +283,7 @@ text=f""" ![](assets/images/charts/{chart}.svg#chart-icon) - #### {chart.replace("-", " ").title()} + #### {tidy_chart_title(chart)} """, href=f"/{chart}", ) @@ -304,7 +312,7 @@ text=f""" ![](assets/images/charts/{chart}.svg#chart-icon) - #### {chart.replace("-", " ").title()} + #### {tidy_chart_title(chart)} """, href=f"/{chart}", ) @@ -332,7 +340,7 @@ text=f""" ![](assets/images/charts/{chart}.svg#chart-icon) - #### {chart.replace("-", " ").title()} + #### {tidy_chart_title(chart)} """, href=f"/{chart}", ) @@ -361,7 +369,7 @@ text=f""" ![](assets/images/charts/{chart}.svg#chart-icon) - #### {chart.replace("-", " ").title()} + #### {tidy_chart_title(chart)} """, href=f"/{chart}", ) @@ -388,7 +396,7 @@ text=f""" ![](assets/images/charts/{chart}.svg#chart-icon) - #### {chart.replace("-", " ").title()} + #### {tidy_chart_title(chart)} """, href=f"/{chart}", ) From 7214d1c2fafc2208f28151598ea592a92bcd8ce2 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 12 Jul 2024 13:38:08 +0200 Subject: [PATCH 043/109] Rename folder --- vizro-core/examples/{charts => _charts}/README.md | 0 vizro-core/examples/{charts => _charts}/app.py | 0 .../{charts => _charts}/assets/css/custom.css | 0 .../examples/{charts => _charts}/assets/favicon.ico | Bin .../{charts => _charts}/assets/images/app.svg | 0 .../assets/images/charts/arc.svg | 0 .../assets/images/charts/bar.svg | 0 .../assets/images/charts/barcode.svg | 0 .../assets/images/charts/boxplot.svg | 0 .../assets/images/charts/bubble-timeline.svg | 0 .../assets/images/charts/bubble.svg | 0 .../assets/images/charts/bullet.svg | 0 .../assets/images/charts/butterfly.svg | 0 .../assets/images/charts/chord.svg | 0 .../assets/images/charts/choropleth.svg | 0 .../assets/images/charts/column-line.svg | 0 .../assets/images/charts/column.svg | 0 .../assets/images/charts/cumulative-curve.svg | 0 .../assets/images/charts/diverging-bar.svg | 0 .../assets/images/charts/donut.svg | 0 .../assets/images/charts/dot-density.svg | 0 .../assets/images/charts/dot-plot.svg | 0 .../assets/images/charts/fan.svg | 0 .../assets/images/charts/flow-map.svg | 0 .../assets/images/charts/funnel.svg | 0 .../assets/images/charts/gantt.svg | 0 .../assets/images/charts/heatmap-matrix.svg | 0 .../assets/images/charts/heatmap.svg | 0 .../assets/images/charts/histogram.svg | 0 .../assets/images/charts/line.svg | 0 .../assets/images/charts/lollipop.svg | 0 .../assets/images/charts/marimekko.svg | 0 .../assets/images/charts/network.svg | 0 .../assets/images/charts/ordered-bar.svg | 0 .../assets/images/charts/ordered-bubble.svg | 0 .../assets/images/charts/ordered-column.svg | 0 .../assets/images/charts/parallel.svg | 0 .../assets/images/charts/pictogram.svg | 0 .../assets/images/charts/pie.svg | 0 .../assets/images/charts/proportional-symbol.svg | 0 .../assets/images/charts/radar.svg | 0 .../assets/images/charts/radial.svg | 0 .../assets/images/charts/sankey.svg | 0 .../assets/images/charts/scatter-matrix.svg | 0 .../assets/images/charts/scatter.svg | 0 .../assets/images/charts/slope.svg | 0 .../assets/images/charts/sparkline.svg | 0 .../assets/images/charts/stacked-column.svg | 0 .../assets/images/charts/stepped-line.svg | 0 .../assets/images/charts/surplus.svg | 0 .../assets/images/charts/time-column.svg | 0 .../assets/images/charts/time-line.svg | 0 .../assets/images/charts/treemap.svg | 0 .../assets/images/charts/venn.svg | 0 .../assets/images/charts/violin.svg | 0 .../assets/images/charts/waterfall.svg | 0 .../examples/{charts => _charts}/utils/__init__.py | 0 .../{charts => _charts}/utils/_components.py | 0 .../{charts => _charts}/utils/_containers.py | 0 .../examples/{charts => _charts}/utils/_pages.py | 0 60 files changed, 0 insertions(+), 0 deletions(-) rename vizro-core/examples/{charts => _charts}/README.md (100%) rename vizro-core/examples/{charts => _charts}/app.py (100%) rename vizro-core/examples/{charts => _charts}/assets/css/custom.css (100%) rename vizro-core/examples/{charts => _charts}/assets/favicon.ico (100%) rename vizro-core/examples/{charts => _charts}/assets/images/app.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/arc.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/bar.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/barcode.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/boxplot.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/bubble-timeline.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/bubble.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/bullet.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/butterfly.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/chord.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/choropleth.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/column-line.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/column.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/cumulative-curve.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/diverging-bar.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/donut.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/dot-density.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/dot-plot.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/fan.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/flow-map.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/funnel.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/gantt.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/heatmap-matrix.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/heatmap.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/histogram.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/line.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/lollipop.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/marimekko.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/network.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/ordered-bar.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/ordered-bubble.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/ordered-column.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/parallel.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/pictogram.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/pie.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/proportional-symbol.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/radar.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/radial.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/sankey.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/scatter-matrix.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/scatter.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/slope.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/sparkline.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/stacked-column.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/stepped-line.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/surplus.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/time-column.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/time-line.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/treemap.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/venn.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/violin.svg (100%) rename vizro-core/examples/{charts => _charts}/assets/images/charts/waterfall.svg (100%) rename vizro-core/examples/{charts => _charts}/utils/__init__.py (100%) rename vizro-core/examples/{charts => _charts}/utils/_components.py (100%) rename vizro-core/examples/{charts => _charts}/utils/_containers.py (100%) rename vizro-core/examples/{charts => _charts}/utils/_pages.py (100%) diff --git a/vizro-core/examples/charts/README.md b/vizro-core/examples/_charts/README.md similarity index 100% rename from vizro-core/examples/charts/README.md rename to vizro-core/examples/_charts/README.md diff --git a/vizro-core/examples/charts/app.py b/vizro-core/examples/_charts/app.py similarity index 100% rename from vizro-core/examples/charts/app.py rename to vizro-core/examples/_charts/app.py diff --git a/vizro-core/examples/charts/assets/css/custom.css b/vizro-core/examples/_charts/assets/css/custom.css similarity index 100% rename from vizro-core/examples/charts/assets/css/custom.css rename to vizro-core/examples/_charts/assets/css/custom.css diff --git a/vizro-core/examples/charts/assets/favicon.ico b/vizro-core/examples/_charts/assets/favicon.ico similarity index 100% rename from vizro-core/examples/charts/assets/favicon.ico rename to vizro-core/examples/_charts/assets/favicon.ico diff --git a/vizro-core/examples/charts/assets/images/app.svg b/vizro-core/examples/_charts/assets/images/app.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/app.svg rename to vizro-core/examples/_charts/assets/images/app.svg diff --git a/vizro-core/examples/charts/assets/images/charts/arc.svg b/vizro-core/examples/_charts/assets/images/charts/arc.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/arc.svg rename to vizro-core/examples/_charts/assets/images/charts/arc.svg diff --git a/vizro-core/examples/charts/assets/images/charts/bar.svg b/vizro-core/examples/_charts/assets/images/charts/bar.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/bar.svg rename to vizro-core/examples/_charts/assets/images/charts/bar.svg diff --git a/vizro-core/examples/charts/assets/images/charts/barcode.svg b/vizro-core/examples/_charts/assets/images/charts/barcode.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/barcode.svg rename to vizro-core/examples/_charts/assets/images/charts/barcode.svg diff --git a/vizro-core/examples/charts/assets/images/charts/boxplot.svg b/vizro-core/examples/_charts/assets/images/charts/boxplot.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/boxplot.svg rename to vizro-core/examples/_charts/assets/images/charts/boxplot.svg diff --git a/vizro-core/examples/charts/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/_charts/assets/images/charts/bubble-timeline.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/bubble-timeline.svg rename to vizro-core/examples/_charts/assets/images/charts/bubble-timeline.svg diff --git a/vizro-core/examples/charts/assets/images/charts/bubble.svg b/vizro-core/examples/_charts/assets/images/charts/bubble.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/bubble.svg rename to vizro-core/examples/_charts/assets/images/charts/bubble.svg diff --git a/vizro-core/examples/charts/assets/images/charts/bullet.svg b/vizro-core/examples/_charts/assets/images/charts/bullet.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/bullet.svg rename to vizro-core/examples/_charts/assets/images/charts/bullet.svg diff --git a/vizro-core/examples/charts/assets/images/charts/butterfly.svg b/vizro-core/examples/_charts/assets/images/charts/butterfly.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/butterfly.svg rename to vizro-core/examples/_charts/assets/images/charts/butterfly.svg diff --git a/vizro-core/examples/charts/assets/images/charts/chord.svg b/vizro-core/examples/_charts/assets/images/charts/chord.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/chord.svg rename to vizro-core/examples/_charts/assets/images/charts/chord.svg diff --git a/vizro-core/examples/charts/assets/images/charts/choropleth.svg b/vizro-core/examples/_charts/assets/images/charts/choropleth.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/choropleth.svg rename to vizro-core/examples/_charts/assets/images/charts/choropleth.svg diff --git a/vizro-core/examples/charts/assets/images/charts/column-line.svg b/vizro-core/examples/_charts/assets/images/charts/column-line.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/column-line.svg rename to vizro-core/examples/_charts/assets/images/charts/column-line.svg diff --git a/vizro-core/examples/charts/assets/images/charts/column.svg b/vizro-core/examples/_charts/assets/images/charts/column.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/column.svg rename to vizro-core/examples/_charts/assets/images/charts/column.svg diff --git a/vizro-core/examples/charts/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/_charts/assets/images/charts/cumulative-curve.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/cumulative-curve.svg rename to vizro-core/examples/_charts/assets/images/charts/cumulative-curve.svg diff --git a/vizro-core/examples/charts/assets/images/charts/diverging-bar.svg b/vizro-core/examples/_charts/assets/images/charts/diverging-bar.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/diverging-bar.svg rename to vizro-core/examples/_charts/assets/images/charts/diverging-bar.svg diff --git a/vizro-core/examples/charts/assets/images/charts/donut.svg b/vizro-core/examples/_charts/assets/images/charts/donut.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/donut.svg rename to vizro-core/examples/_charts/assets/images/charts/donut.svg diff --git a/vizro-core/examples/charts/assets/images/charts/dot-density.svg b/vizro-core/examples/_charts/assets/images/charts/dot-density.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/dot-density.svg rename to vizro-core/examples/_charts/assets/images/charts/dot-density.svg diff --git a/vizro-core/examples/charts/assets/images/charts/dot-plot.svg b/vizro-core/examples/_charts/assets/images/charts/dot-plot.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/dot-plot.svg rename to vizro-core/examples/_charts/assets/images/charts/dot-plot.svg diff --git a/vizro-core/examples/charts/assets/images/charts/fan.svg b/vizro-core/examples/_charts/assets/images/charts/fan.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/fan.svg rename to vizro-core/examples/_charts/assets/images/charts/fan.svg diff --git a/vizro-core/examples/charts/assets/images/charts/flow-map.svg b/vizro-core/examples/_charts/assets/images/charts/flow-map.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/flow-map.svg rename to vizro-core/examples/_charts/assets/images/charts/flow-map.svg diff --git a/vizro-core/examples/charts/assets/images/charts/funnel.svg b/vizro-core/examples/_charts/assets/images/charts/funnel.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/funnel.svg rename to vizro-core/examples/_charts/assets/images/charts/funnel.svg diff --git a/vizro-core/examples/charts/assets/images/charts/gantt.svg b/vizro-core/examples/_charts/assets/images/charts/gantt.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/gantt.svg rename to vizro-core/examples/_charts/assets/images/charts/gantt.svg diff --git a/vizro-core/examples/charts/assets/images/charts/heatmap-matrix.svg b/vizro-core/examples/_charts/assets/images/charts/heatmap-matrix.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/heatmap-matrix.svg rename to vizro-core/examples/_charts/assets/images/charts/heatmap-matrix.svg diff --git a/vizro-core/examples/charts/assets/images/charts/heatmap.svg b/vizro-core/examples/_charts/assets/images/charts/heatmap.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/heatmap.svg rename to vizro-core/examples/_charts/assets/images/charts/heatmap.svg diff --git a/vizro-core/examples/charts/assets/images/charts/histogram.svg b/vizro-core/examples/_charts/assets/images/charts/histogram.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/histogram.svg rename to vizro-core/examples/_charts/assets/images/charts/histogram.svg diff --git a/vizro-core/examples/charts/assets/images/charts/line.svg b/vizro-core/examples/_charts/assets/images/charts/line.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/line.svg rename to vizro-core/examples/_charts/assets/images/charts/line.svg diff --git a/vizro-core/examples/charts/assets/images/charts/lollipop.svg b/vizro-core/examples/_charts/assets/images/charts/lollipop.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/lollipop.svg rename to vizro-core/examples/_charts/assets/images/charts/lollipop.svg diff --git a/vizro-core/examples/charts/assets/images/charts/marimekko.svg b/vizro-core/examples/_charts/assets/images/charts/marimekko.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/marimekko.svg rename to vizro-core/examples/_charts/assets/images/charts/marimekko.svg diff --git a/vizro-core/examples/charts/assets/images/charts/network.svg b/vizro-core/examples/_charts/assets/images/charts/network.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/network.svg rename to vizro-core/examples/_charts/assets/images/charts/network.svg diff --git a/vizro-core/examples/charts/assets/images/charts/ordered-bar.svg b/vizro-core/examples/_charts/assets/images/charts/ordered-bar.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/ordered-bar.svg rename to vizro-core/examples/_charts/assets/images/charts/ordered-bar.svg diff --git a/vizro-core/examples/charts/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/_charts/assets/images/charts/ordered-bubble.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/ordered-bubble.svg rename to vizro-core/examples/_charts/assets/images/charts/ordered-bubble.svg diff --git a/vizro-core/examples/charts/assets/images/charts/ordered-column.svg b/vizro-core/examples/_charts/assets/images/charts/ordered-column.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/ordered-column.svg rename to vizro-core/examples/_charts/assets/images/charts/ordered-column.svg diff --git a/vizro-core/examples/charts/assets/images/charts/parallel.svg b/vizro-core/examples/_charts/assets/images/charts/parallel.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/parallel.svg rename to vizro-core/examples/_charts/assets/images/charts/parallel.svg diff --git a/vizro-core/examples/charts/assets/images/charts/pictogram.svg b/vizro-core/examples/_charts/assets/images/charts/pictogram.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/pictogram.svg rename to vizro-core/examples/_charts/assets/images/charts/pictogram.svg diff --git a/vizro-core/examples/charts/assets/images/charts/pie.svg b/vizro-core/examples/_charts/assets/images/charts/pie.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/pie.svg rename to vizro-core/examples/_charts/assets/images/charts/pie.svg diff --git a/vizro-core/examples/charts/assets/images/charts/proportional-symbol.svg b/vizro-core/examples/_charts/assets/images/charts/proportional-symbol.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/proportional-symbol.svg rename to vizro-core/examples/_charts/assets/images/charts/proportional-symbol.svg diff --git a/vizro-core/examples/charts/assets/images/charts/radar.svg b/vizro-core/examples/_charts/assets/images/charts/radar.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/radar.svg rename to vizro-core/examples/_charts/assets/images/charts/radar.svg diff --git a/vizro-core/examples/charts/assets/images/charts/radial.svg b/vizro-core/examples/_charts/assets/images/charts/radial.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/radial.svg rename to vizro-core/examples/_charts/assets/images/charts/radial.svg diff --git a/vizro-core/examples/charts/assets/images/charts/sankey.svg b/vizro-core/examples/_charts/assets/images/charts/sankey.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/sankey.svg rename to vizro-core/examples/_charts/assets/images/charts/sankey.svg diff --git a/vizro-core/examples/charts/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/_charts/assets/images/charts/scatter-matrix.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/scatter-matrix.svg rename to vizro-core/examples/_charts/assets/images/charts/scatter-matrix.svg diff --git a/vizro-core/examples/charts/assets/images/charts/scatter.svg b/vizro-core/examples/_charts/assets/images/charts/scatter.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/scatter.svg rename to vizro-core/examples/_charts/assets/images/charts/scatter.svg diff --git a/vizro-core/examples/charts/assets/images/charts/slope.svg b/vizro-core/examples/_charts/assets/images/charts/slope.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/slope.svg rename to vizro-core/examples/_charts/assets/images/charts/slope.svg diff --git a/vizro-core/examples/charts/assets/images/charts/sparkline.svg b/vizro-core/examples/_charts/assets/images/charts/sparkline.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/sparkline.svg rename to vizro-core/examples/_charts/assets/images/charts/sparkline.svg diff --git a/vizro-core/examples/charts/assets/images/charts/stacked-column.svg b/vizro-core/examples/_charts/assets/images/charts/stacked-column.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/stacked-column.svg rename to vizro-core/examples/_charts/assets/images/charts/stacked-column.svg diff --git a/vizro-core/examples/charts/assets/images/charts/stepped-line.svg b/vizro-core/examples/_charts/assets/images/charts/stepped-line.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/stepped-line.svg rename to vizro-core/examples/_charts/assets/images/charts/stepped-line.svg diff --git a/vizro-core/examples/charts/assets/images/charts/surplus.svg b/vizro-core/examples/_charts/assets/images/charts/surplus.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/surplus.svg rename to vizro-core/examples/_charts/assets/images/charts/surplus.svg diff --git a/vizro-core/examples/charts/assets/images/charts/time-column.svg b/vizro-core/examples/_charts/assets/images/charts/time-column.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/time-column.svg rename to vizro-core/examples/_charts/assets/images/charts/time-column.svg diff --git a/vizro-core/examples/charts/assets/images/charts/time-line.svg b/vizro-core/examples/_charts/assets/images/charts/time-line.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/time-line.svg rename to vizro-core/examples/_charts/assets/images/charts/time-line.svg diff --git a/vizro-core/examples/charts/assets/images/charts/treemap.svg b/vizro-core/examples/_charts/assets/images/charts/treemap.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/treemap.svg rename to vizro-core/examples/_charts/assets/images/charts/treemap.svg diff --git a/vizro-core/examples/charts/assets/images/charts/venn.svg b/vizro-core/examples/_charts/assets/images/charts/venn.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/venn.svg rename to vizro-core/examples/_charts/assets/images/charts/venn.svg diff --git a/vizro-core/examples/charts/assets/images/charts/violin.svg b/vizro-core/examples/_charts/assets/images/charts/violin.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/violin.svg rename to vizro-core/examples/_charts/assets/images/charts/violin.svg diff --git a/vizro-core/examples/charts/assets/images/charts/waterfall.svg b/vizro-core/examples/_charts/assets/images/charts/waterfall.svg similarity index 100% rename from vizro-core/examples/charts/assets/images/charts/waterfall.svg rename to vizro-core/examples/_charts/assets/images/charts/waterfall.svg diff --git a/vizro-core/examples/charts/utils/__init__.py b/vizro-core/examples/_charts/utils/__init__.py similarity index 100% rename from vizro-core/examples/charts/utils/__init__.py rename to vizro-core/examples/_charts/utils/__init__.py diff --git a/vizro-core/examples/charts/utils/_components.py b/vizro-core/examples/_charts/utils/_components.py similarity index 100% rename from vizro-core/examples/charts/utils/_components.py rename to vizro-core/examples/_charts/utils/_components.py diff --git a/vizro-core/examples/charts/utils/_containers.py b/vizro-core/examples/_charts/utils/_containers.py similarity index 100% rename from vizro-core/examples/charts/utils/_containers.py rename to vizro-core/examples/_charts/utils/_containers.py diff --git a/vizro-core/examples/charts/utils/_pages.py b/vizro-core/examples/_charts/utils/_pages.py similarity index 100% rename from vizro-core/examples/charts/utils/_pages.py rename to vizro-core/examples/_charts/utils/_pages.py From 6af05b8bc4ac298fc349208c05bec3d35e3e35a0 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 12 Jul 2024 13:59:08 +0200 Subject: [PATCH 044/109] Fix tests --- ...12_135610_huong_li_nguyen_chart_gallery.md | 48 +++++++++++++++++++ vizro-core/pyproject.toml | 2 +- 2 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 vizro-core/changelog.d/20240712_135610_huong_li_nguyen_chart_gallery.md diff --git a/vizro-core/changelog.d/20240712_135610_huong_li_nguyen_chart_gallery.md b/vizro-core/changelog.d/20240712_135610_huong_li_nguyen_chart_gallery.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-core/changelog.d/20240712_135610_huong_li_nguyen_chart_gallery.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/pyproject.toml b/vizro-core/pyproject.toml index 83aafac7c..f8f530887 100644 --- a/vizro-core/pyproject.toml +++ b/vizro-core/pyproject.toml @@ -83,4 +83,4 @@ filterwarnings = [ "ignore:Custom format string detected." ] norecursedirs = ["tests/tests_utils", "tests/js"] -pythonpath = ["tests/tests_utils", "examples/kpi"] +pythonpath = ["tests/tests_utils", "examples/kpi", "examples/_charts"] From a4956cd4202615984617b20ae6ec13e57c107015 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 12 Jul 2024 14:01:28 +0200 Subject: [PATCH 045/109] Update test_examples.py --- vizro-core/tests/integration/test_examples.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py index 86db05afc..247ce163e 100644 --- a/vizro-core/tests/integration/test_examples.py +++ b/vizro-core/tests/integration/test_examples.py @@ -49,7 +49,7 @@ def dashboard(request, monkeypatch): (examples_path / "features", ""), (examples_path / "demo", ""), (examples_path / "kpi", ""), - (examples_path / "charts", ""), + (examples_path / "_charts", ""), (examples_path / "_dev", "yaml_version"), (examples_path / "features", "yaml_version"), ], From 165086eabb76825b76450e5c076a4523969125e6 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 15 Jul 2024 12:01:37 +0200 Subject: [PATCH 046/109] Tidy chart code --- vizro-core/examples/_charts/utils/_pages.py | 199 +++++++++++--------- 1 file changed, 109 insertions(+), 90 deletions(-) diff --git a/vizro-core/examples/_charts/utils/_pages.py b/vizro-core/examples/_charts/utils/_pages.py index fcdae0745..9f8ea26d7 100644 --- a/vizro-core/examples/_charts/utils/_pages.py +++ b/vizro-core/examples/_charts/utils/_pages.py @@ -11,13 +11,14 @@ iris = px.data.iris() stocks = px.data.stocks() tips = px.data.tips() +tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) vm.Container.add_type("components", Markdown) - -# REUSED ------------------------------------------------------------- +# All functions ending with `_factory` are there to re-use the existing content of a page. Given the restriction that +# one page can only be mapped to one navigation group, we have to create a new page with a new ID. def line_factory(id: str, title: str): return vm.Page( id=id, @@ -27,46 +28,46 @@ def line_factory(id: str, title: str): vm.Card( text=""" - #### What is a Line? + #### What is a line chart? - A Line chart presents a series of data points over a continuous interval or time period, joined together + A line chart presents a series of data points over a continuous interval or time period, joined together with straight lines.   #### When to use it? - You should select a Line chart when you want to show trends and invite analysis of how the data has changed - over time. Usually, your y-axis will show a quantitative value and your x-axis will be marked as a timescale - or a sequence of intervals. You can also display negative values below the x-axis. If you wish to group - several lines (different data series) in the same chart, try to limit yourself to 3-4 to avoid cluttering - up your chart and making it harder for the audience to read. + You should select a line chart when you want to show trends over time. Usually, your y-axis will show a + quantitative value and your x-axis will be marked as a timescale or a sequence of intervals. You can also + display negative values below the x-axis. If you wish to group several lines (different data series) in the + same chart, try to limit yourself to 3-4 to avoid cluttering up your chart. """ ), vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), CodeClipboard( text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - gapminder = px.data.gapminder() - - page = vm.Page( - title="Line", - components=[ - vm.Graph( - figure=px.line(stocks, x="date", y="GOOG") + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + stocks = px.data.stocks() + + page = vm.Page( + title="Line", + components=[ + vm.Graph( + figure=px.line( + stocks, x="date", y="GOOG" + ) ) ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ ), ], ) @@ -81,7 +82,7 @@ def scatter_factory(id: str, title: str): vm.Card( text=""" - #### What is a scatter? + #### What is a scatter chart? A scatter plot is a two-dimensional data visualization using dots to represent the values obtained for two different variables - one plotted along the x-axis and the other plotted along the y-axis. @@ -90,7 +91,7 @@ def scatter_factory(id: str, title: str): #### When to use it? - Use Scatter Plots when you want to show the relationship between two variables. Scatter plots are sometimes + Use scatter plots when you want to show the relationship between two variables. Scatter plots are sometimes called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation. Make sure your audience does not draw the wrong conclusions. @@ -103,20 +104,23 @@ def scatter_factory(id: str, title: str): import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro - + iris = px.data.iris() - + page = vm.Page( title="Scatter", components=[ vm.Graph( figure=px.scatter( - iris, x="sepal_width", y="sepal_length", color="species" + iris, + x="sepal_width", + y="sepal_length", + color="species", ) ) ], ) - + dashboard = vm.Dashboard(pages=[page]) Vizro().build(dashboard).run() ``` @@ -137,7 +141,7 @@ def bar_factory(id: str, title: str): #### What is a bar chart? - A Bar chart displays bars in lengths proportional to the values they represent. One axis of + A bar chart displays bars in lengths proportional to the values they represent. One axis of the chart shows the categories to compare and the other axis provides a value scale, starting with zero. @@ -145,7 +149,7 @@ def bar_factory(id: str, title: str): #### When to use it? - Select a Bar chart when you want to help your audience draw size comparisons and identify + Select a bar chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents **how many?** in each category. You can arrange your bars in any order to fit the message you wish to emphasize. Be mindful of labeling clearly when you have a large number of bars. You may need to include a legend, @@ -155,7 +159,7 @@ def bar_factory(id: str, title: str): ), vm.Graph( figure=px.bar( - data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), + data_frame=tips_agg, x="total_bill", y="day", orientation="h", @@ -163,28 +167,37 @@ def bar_factory(id: str, title: str): ), CodeClipboard( text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Bar", - components=[ - vm.Graph( - figure=px.bar(data_frame=tips.groupby("day").agg({"total_bill": "sum"}).reset_index(), - x="total_bill", y="day",orientation="h") - ) - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + tips_agg = ( + tips.groupby("day") + .agg({"total_bill": "sum"}) + .sort_values("total_bill") + .reset_index() + ) + + page = vm.Page( + title="Bar", + components=[ + vm.Graph( + figure=px.bar( + data_frame=tips_agg, + x="total_bill", + y="day", + orientation="h", + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ ), ], ) @@ -201,53 +214,59 @@ def column_factory(id: str, title: str): #### What is a column chart? - A Column chart is a vertical Bar chart, with column lengths varying according to the + A column chart is a vertical bar chart, with column lengths varying according to the categorical value they represent. The scale is presented on the y-axis, starting with zero.   #### When to use it? - Select a Column chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents `how many?` in each category. You can + Select a column chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents **how many?** in each category. You can arrange your columns in any order to fit the message you wish to emphasize. Be mindful of labeling clearly when you have a large number of columns. You may need to include a legend, or use abbreviations in the chart with fuller descriptions below of the terms used. - """ ), vm.Graph( figure=px.bar( - data_frame=gapminder.query("country == 'China'"), - x="year", - y="gdpPercap", - ) + data_frame=tips_agg, + y="total_bill", + x="day", + ) ), CodeClipboard( text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - gapminder = px.data.gapminder() - - page = vm.Page( - title="Column", - components=[ - vm.Graph( - figure=px.bar( - data_frame=gapminder.query("country == 'China'"), x="year", y="gdpPercap" - ) - ) - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - - """ + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + tips_agg = ( + tips.groupby("day") + .agg({"total_bill": "sum"}) + .sort_values("total_bill") + .reset_index() + ) + + page = vm.Page( + title="Column", + components=[ + vm.Graph( + figure=px.bar( + data_frame=tips_agg, + y="total_bill", + x="day", + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ ), ], ) From 94a7479d4d8b932022abd711ca61ce358e75d89d Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 15 Jul 2024 12:13:42 +0200 Subject: [PATCH 047/109] Tidy donut and pie code example --- vizro-core/examples/_charts/utils/_pages.py | 136 ++++++++++---------- 1 file changed, 68 insertions(+), 68 deletions(-) diff --git a/vizro-core/examples/_charts/utils/_pages.py b/vizro-core/examples/_charts/utils/_pages.py index 9f8ea26d7..f12682ab3 100644 --- a/vizro-core/examples/_charts/utils/_pages.py +++ b/vizro-core/examples/_charts/utils/_pages.py @@ -17,6 +17,7 @@ vm.Page.add_type("components", FlexContainer) vm.Container.add_type("components", Markdown) + # All functions ending with `_factory` are there to re-use the existing content of a page. Given the restriction that # one page can only be mapped to one navigation group, we have to create a new page with a new ID. def line_factory(id: str, title: str): @@ -37,9 +38,9 @@ def line_factory(id: str, title: str): #### When to use it? - You should select a line chart when you want to show trends over time. Usually, your y-axis will show a - quantitative value and your x-axis will be marked as a timescale or a sequence of intervals. You can also - display negative values below the x-axis. If you wish to group several lines (different data series) in the + You should select a line chart when you want to show trends over time. Usually, your y-axis will show a + quantitative value and your x-axis will be marked as a timescale or a sequence of intervals. You can also + display negative values below the x-axis. If you wish to group several lines (different data series) in the same chart, try to limit yourself to 3-4 to avoid cluttering up your chart. """ ), @@ -50,9 +51,9 @@ def line_factory(id: str, title: str): import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro - + stocks = px.data.stocks() - + page = vm.Page( title="Line", components=[ @@ -63,7 +64,7 @@ def line_factory(id: str, title: str): ) ], ) - + dashboard = vm.Dashboard(pages=[page]) Vizro().build(dashboard).run() ``` @@ -104,9 +105,9 @@ def scatter_factory(id: str, title: str): import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro - + iris = px.data.iris() - + page = vm.Page( title="Scatter", components=[ @@ -120,7 +121,7 @@ def scatter_factory(id: str, title: str): ) ], ) - + dashboard = vm.Dashboard(pages=[page]) Vizro().build(dashboard).run() ``` @@ -171,7 +172,7 @@ def bar_factory(id: str, title: str): import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro - + tips = px.data.tips() tips_agg = ( tips.groupby("day") @@ -179,7 +180,7 @@ def bar_factory(id: str, title: str): .sort_values("total_bill") .reset_index() ) - + page = vm.Page( title="Bar", components=[ @@ -193,7 +194,7 @@ def bar_factory(id: str, title: str): ) ], ) - + dashboard = vm.Dashboard(pages=[page]) Vizro().build(dashboard).run() ``` @@ -230,10 +231,10 @@ def column_factory(id: str, title: str): ), vm.Graph( figure=px.bar( - data_frame=tips_agg, - y="total_bill", - x="day", - ) + data_frame=tips_agg, + y="total_bill", + x="day", + ) ), CodeClipboard( text=""" @@ -241,7 +242,7 @@ def column_factory(id: str, title: str): import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro - + tips = px.data.tips() tips_agg = ( tips.groupby("day") @@ -249,7 +250,7 @@ def column_factory(id: str, title: str): .sort_values("total_bill") .reset_index() ) - + page = vm.Page( title="Column", components=[ @@ -262,7 +263,7 @@ def column_factory(id: str, title: str): ) ], ) - + dashboard = vm.Dashboard(pages=[page]) Vizro().build(dashboard).run() ``` @@ -292,21 +293,20 @@ def column_factory(id: str, title: str): #### What is a pie chart? - A Pie chart is a circular chart divided into segments to show proportions and percentages between + A pie chart is a circular chart divided into segments to show proportions and percentages between categories. The circle represents the whole.   #### When to use it? - Use the Pie chart when you need to show your audience a quick view of how data is distributed + Use the pie chart when you need to show your audience a quick view of how data is distributed proportionately, with percentages highlighted. The different values you present must add up to a total and equal 100%. - The downsides are that Pie charts tend to occupy more space than other charts, they don`t + The downsides are that pie charts tend to occupy more space than other charts, they don`t work well with more than a few values because labeling small segments is challenging, and it can be difficult to accurately compare the sizes of the segments. - """ ), vm.Graph( @@ -318,30 +318,30 @@ def column_factory(id: str, title: str): ), CodeClipboard( text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro - page = vm.Page( - title="Pie", - components=[ - vm.Graph( - figure=px.pie( - data_frame=tips, - values='tip', names='day', - ) - ) - ] - ) + tips = px.data.tips() - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` + page = vm.Page( + title="Pie", + components=[ + vm.Graph( + figure=px.pie( + data_frame=tips, + values="tip", + names="day", + ) + ) + ], + ) - """ + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ ), ], ) @@ -356,17 +356,16 @@ def column_factory(id: str, title: str): #### What is a donut chart? - A Donut chart looks like a Pie chart, but has a blank space in the center which may contain additional + A donut chart looks like a pie chart, but has a blank space in the center which may contain additional information.   #### When to use it? - A Donut chart can be used in place of a Pie chart, particularly when you are short of space or have extra + A donut chart can be used in place of a pie chart, particularly when you are short of space or have extra information you would like to share about the data. It may also be more effective if you wish your audience to focus on the length of the arcs of the sections instead of the proportions of the segment sizes. - """ ), vm.Graph( @@ -379,30 +378,31 @@ def column_factory(id: str, title: str): ), CodeClipboard( text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro - page = vm.Page( - title="Pie", - components=[ - vm.Graph( - figure=px.pie( - data_frame=tips, - values='tip', names='day', hole=0.4 - ) - ) - ] - ) + tips = px.data.tips() - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` + page = vm.Page( + title="Donut", + components=[ + vm.Graph( + figure=px.pie( + data_frame=tips, + values="tip", + names="day", + hole=0.4, + ) + ) + ], + ) - """ + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ ), ], ) From 22b864287cd300c2990e0078bd5fc5e77204a2bb Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 15 Jul 2024 12:25:46 +0200 Subject: [PATCH 048/109] Tidy box and violin code --- vizro-core/examples/_charts/utils/_pages.py | 83 +++++++++++---------- 1 file changed, 42 insertions(+), 41 deletions(-) diff --git a/vizro-core/examples/_charts/utils/_pages.py b/vizro-core/examples/_charts/utils/_pages.py index f12682ab3..5db987d88 100644 --- a/vizro-core/examples/_charts/utils/_pages.py +++ b/vizro-core/examples/_charts/utils/_pages.py @@ -18,7 +18,7 @@ vm.Container.add_type("components", Markdown) -# All functions ending with `_factory` are there to re-use the existing content of a page. Given the restriction that +# All functions ending with `_factory` are there to reuse the existing content of a page. Given the restriction that # one page can only be mapped to one navigation group, we have to create a new page with a new ID. def line_factory(id: str, title: str): return vm.Page( @@ -417,20 +417,19 @@ def column_factory(id: str, title: str): #### What is a boxplot? - A Box Plot (also known as a Box and Whisker Plot) provides a visual display of multiple datasets, + A box plot (also known as whisker plot) provides a visual display of multiple datasets, indicating the median (center) and the range of the data for each.   #### When to use it? - Choose a Box Plot when you need to summarize distributions between many groups or datasets. It takes up + Choose a box plot when you need to summarize distributions between many groups or datasets. It takes up less space than many other charts. Create boxes to display the median, and the upper and lower quartiles. Add `whiskers` to highlight variability outside the upper and lower quartiles. You can add outliers as dots beyond, but in line with the whiskers. - """ ), vm.Graph( @@ -443,30 +442,31 @@ def column_factory(id: str, title: str): ), CodeClipboard( text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro - tips = px.data.tips() + tips = px.data.tips() - page = vm.Page( - title="Boxplot", - components=[ - vm.Graph( + page = vm.Page( + title="Boxplot", + components=[ + vm.Graph( figure=px.boxplot( data_frame=tips, - y='total_bill', x='day', color='day', + y="total_bill", + x="day", + color="day", ) ), - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` + ], + ) - """ + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ ), ], ) @@ -479,16 +479,16 @@ def column_factory(id: str, title: str): vm.Card( text=""" - #### What is a violin? + #### What is a violin chart? - A Violin Plot is similar to a Box Plot, but works better for visualizing more complex distributions and + A violin chart is similar to a box plot, but works better for visualizing more complex distributions and their probability density at different values.   #### When to use it? - Use this chart to go beyond the simple Box Plot and show the distribution shape of the data, the + Use this chart to go beyond the simple box plot and show the distribution shape of the data, the inter-quartile range, the confidence intervals and the median. """ ), @@ -502,30 +502,31 @@ def column_factory(id: str, title: str): ), CodeClipboard( text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro - tips = px.data.tips() + tips = px.data.tips() - page = vm.Page( - title="Violin", - components=[ - vm.Graph( + page = vm.Page( + title="Violin", + components=[ + vm.Graph( figure=px.violin( data_frame=tips, - y='total_bill', x='day', color='day', + y="total_bill", + x="day", + color="day", ) ), - ] - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` + ], + ) - """ + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ ), ], ) From 931fa5843bc174aae0e8727e66f3e9e2700a1381 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 15 Jul 2024 12:51:48 +0200 Subject: [PATCH 049/109] Add treemap --- vizro-core/examples/_charts/app.py | 8 ++- .../images/charts/magnitude-treemap.svg | 24 +++++++ .../examples/_charts/utils/_containers.py | 3 +- vizro-core/examples/_charts/utils/_pages.py | 68 +++++++++++++++++++ 4 files changed, 99 insertions(+), 4 deletions(-) create mode 100644 vizro-core/examples/_charts/assets/images/charts/magnitude-treemap.svg diff --git a/vizro-core/examples/_charts/app.py b/vizro-core/examples/_charts/app.py index 7a59ae8ed..4c8fd9682 100644 --- a/vizro-core/examples/_charts/app.py +++ b/vizro-core/examples/_charts/app.py @@ -26,6 +26,8 @@ time_column, time_line, violin, +treemap, +magnitude_treemap ) from vizro import Vizro @@ -65,6 +67,8 @@ ordered_column, time_line, time_column, + treemap, + magnitude_treemap ], navigation=vm.Navigation( nav_selector=vm.NavBar( @@ -92,7 +96,7 @@ ), vm.NavLink( label="Magnitude", - pages={"Magnitude": ["Bar", "Column"]}, + pages={"Magnitude": ["Bar", "Column", "Magnitude-Treemap"]}, icon="Bar Chart", ), vm.NavLink( @@ -102,7 +106,7 @@ ), vm.NavLink( label="Part-to-whole", - pages={"Part-to-whole": ["Donut", "Pie"]}, + pages={"Part-to-whole": ["Donut", "Pie", "Treemap"]}, icon="Donut Small", ), vm.NavLink( diff --git a/vizro-core/examples/_charts/assets/images/charts/magnitude-treemap.svg b/vizro-core/examples/_charts/assets/images/charts/magnitude-treemap.svg new file mode 100644 index 000000000..a09929e94 --- /dev/null +++ b/vizro-core/examples/_charts/assets/images/charts/magnitude-treemap.svg @@ -0,0 +1,24 @@ + + + + Group 6 Copy 27 + Created with Sketch. + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_charts/utils/_containers.py b/vizro-core/examples/_charts/utils/_containers.py index afb8ef86e..66f12a894 100644 --- a/vizro-core/examples/_charts/utils/_containers.py +++ b/vizro-core/examples/_charts/utils/_containers.py @@ -49,7 +49,6 @@ def tidy_chart_title(chart: str) -> str: "lollipop", "cumulative-curve", "waterfall", - "treemap", "venn", "barcode", ] @@ -73,11 +72,11 @@ def tidy_chart_title(chart: str) -> str: "lollipop", "cumulative-curve", "waterfall", - "treemap", "venn", "diverging-bar", "bullet", "dot-plot", + "magnitude-treemap" ] ) TIME_CHARTS = sorted( diff --git a/vizro-core/examples/_charts/utils/_pages.py b/vizro-core/examples/_charts/utils/_pages.py index 5db987d88..00db8702f 100644 --- a/vizro-core/examples/_charts/utils/_pages.py +++ b/vizro-core/examples/_charts/utils/_pages.py @@ -8,6 +8,7 @@ PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 gapminder = px.data.gapminder() +gapminder_2007 = gapminder.query("year == 2007") iris = px.data.iris() stocks = px.data.stocks() tips = px.data.tips() @@ -273,6 +274,71 @@ def column_factory(id: str, title: str): ) +def treemap_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a treemap? + + A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles sized proportionately + to the quantity they represent, combining together to form larger **parent** category rectangles. + +   + + #### When to use it? + + It’s helpful to use a treemap when you wish to display hierarchical part-to-whole relationships. You can + compare groups and single elements nested within them. Consider using them instead of Pie charts when you + have a higher number of categories. Treemaps are very compact and allow audiences to get a quick overview + of the data. + """ + ), + vm.Graph( + figure=px.treemap( + gapminder_2007, + path=[px.Constant("world"), "continent", "country"], + values="pop", + color="lifeExp", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + gapminder = px.data.gapminder() + gapminder_2007 = gapminder.query("year == 2007") + + page = vm.Page( + title="Treemap", + components=[ + vm.Graph( + figure=px.treemap( + gapminder_2007, + path=[px.Constant("world"), "continent", "country"], + values="pop", + color="lifeExp", + ) + ), + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], + ) + + # PAGES ------------------------------------------------------------- line = line_factory("Line", "Line") time_line = line_factory("Time-Line", "Line") @@ -282,6 +348,8 @@ def column_factory(id: str, title: str): ordered_bar = bar_factory("Ordered Bar", "Ordered Bar") column = column_factory("Column", "Column") ordered_column = column_factory("Ordered Column", "Ordered Column") +treemap = treemap_factory("Treemap", "Treemap") +magnitude_treemap = treemap_factory("Magnitude-Treemap", "Treemap") pie = vm.Page( From 167d3bf0d5111b429c8f0880677b2ca8abc24341 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 15 Jul 2024 12:59:22 +0200 Subject: [PATCH 050/109] Lint --- vizro-core/examples/_charts/app.py | 6 +++--- vizro-core/examples/_charts/utils/_containers.py | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/vizro-core/examples/_charts/app.py b/vizro-core/examples/_charts/app.py index 4c8fd9682..6f657e151 100644 --- a/vizro-core/examples/_charts/app.py +++ b/vizro-core/examples/_charts/app.py @@ -19,15 +19,15 @@ column, donut, line, + magnitude_treemap, ordered_bar, ordered_column, pie, scatter, time_column, time_line, + treemap, violin, -treemap, -magnitude_treemap ) from vizro import Vizro @@ -68,7 +68,7 @@ time_line, time_column, treemap, - magnitude_treemap + magnitude_treemap, ], navigation=vm.Navigation( nav_selector=vm.NavBar( diff --git a/vizro-core/examples/_charts/utils/_containers.py b/vizro-core/examples/_charts/utils/_containers.py index 66f12a894..45df15246 100644 --- a/vizro-core/examples/_charts/utils/_containers.py +++ b/vizro-core/examples/_charts/utils/_containers.py @@ -76,7 +76,7 @@ def tidy_chart_title(chart: str) -> str: "diverging-bar", "bullet", "dot-plot", - "magnitude-treemap" + "magnitude-treemap", ] ) TIME_CHARTS = sorted( @@ -240,7 +240,7 @@ def tidy_chart_title(chart: str) -> str: Distribution helps you to present all the possible values (or intervals) of your data and how often they occur. You can organize the data to show the number or percentage of items in a specified group, what shape the group takes, where the center lies, and how much variability there is in the data. This shape - (or `skew`) of a distribution can be a powerful way for you to highlight either the existence or lack of + (or **skew**) of a distribution can be a powerful way for you to highlight either the existence or lack of uniformity or equality in the data. """, classname="intro-text", @@ -268,7 +268,7 @@ def tidy_chart_title(chart: str) -> str: components=[ Markdown( text=""" - Magnitude allows you to emphasize size comparisons of `counted` items in your data set. You can show + Magnitude allows you to emphasize size comparisons of **counted** items in your data set. You can show relative comparisons (whether something is larger or smaller) or absolute differences (where the nuances are most interesting). Typically, you will use magnitude for actual numbers versus calculated rates or percentages. From ee9d999b6f56b322be13ff20e09b74b0a6708a6a Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 15 Jul 2024 13:35:26 +0200 Subject: [PATCH 051/109] Add butterfly chart --- vizro-core/examples/_charts/app.py | 8 +- .../images/charts/distribution-butterfly.svg | 27 +++++ .../examples/_charts/utils/_containers.py | 5 +- vizro-core/examples/_charts/utils/_pages.py | 113 ++++++++++++++++++ 4 files changed, 148 insertions(+), 5 deletions(-) create mode 100644 vizro-core/examples/_charts/assets/images/charts/distribution-butterfly.svg diff --git a/vizro-core/examples/_charts/app.py b/vizro-core/examples/_charts/app.py index 6f657e151..b466b166c 100644 --- a/vizro-core/examples/_charts/app.py +++ b/vizro-core/examples/_charts/app.py @@ -16,7 +16,9 @@ from utils._pages import ( bar, boxplot, + butterfly_page, column, + distribution_butterfly, donut, line, magnitude_treemap, @@ -69,6 +71,8 @@ time_column, treemap, magnitude_treemap, + butterfly_page, + distribution_butterfly, ], navigation=vm.Navigation( nav_selector=vm.NavBar( @@ -76,7 +80,7 @@ vm.NavLink(label="Overview", pages=["Overview"], icon="Home"), vm.NavLink( label="Deviation", - pages={"Deviation": ["Line", "Scatter"]}, # Replace with diverging bar + pages={"Deviation": ["Butterfly"]}, icon="Planner Review", ), vm.NavLink( @@ -91,7 +95,7 @@ ), vm.NavLink( label="Distribution", - pages={"Distribution": ["Boxplot", "Violin"]}, + pages={"Distribution": ["Boxplot", "Violin", "Distribution-Butterfly"]}, icon="Waterfall Chart", ), vm.NavLink( diff --git a/vizro-core/examples/_charts/assets/images/charts/distribution-butterfly.svg b/vizro-core/examples/_charts/assets/images/charts/distribution-butterfly.svg new file mode 100644 index 000000000..5f0281a60 --- /dev/null +++ b/vizro-core/examples/_charts/assets/images/charts/distribution-butterfly.svg @@ -0,0 +1,27 @@ + + + + Group 6 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_charts/utils/_containers.py b/vizro-core/examples/_charts/utils/_containers.py index 45df15246..2135c5a84 100644 --- a/vizro-core/examples/_charts/utils/_containers.py +++ b/vizro-core/examples/_charts/utils/_containers.py @@ -21,7 +21,7 @@ def tidy_chart_title(chart: str) -> str: return chart_without_prefix.replace("-", " ").title() -DEVIATION_CHARTS = sorted(["line", "scatter", "slope", "lollipop", "diverging-bar"]) +DEVIATION_CHARTS = sorted(["diverging-bar", "butterfly", "slope", "lollipop"]) CORRELATION_CHARTS = ["scatter"] RANKING_CHARTS = sorted( [ @@ -41,7 +41,7 @@ def tidy_chart_title(chart: str) -> str: DISTRIBUTION_CHARTS = sorted( [ "histogram", - "butterfly", + "distribution-butterfly", "pie", "donut", "arc", @@ -61,7 +61,6 @@ def tidy_chart_title(chart: str) -> str: "ordered-bubble", "column-line", "surplus", - "butterfly", "bubble-timeline", "bar", "pie", diff --git a/vizro-core/examples/_charts/utils/_pages.py b/vizro-core/examples/_charts/utils/_pages.py index 00db8702f..c8fc1d9ba 100644 --- a/vizro-core/examples/_charts/utils/_pages.py +++ b/vizro-core/examples/_charts/utils/_pages.py @@ -1,7 +1,10 @@ """Contains custom components and charts used inside the dashboard.""" +import pandas as pd +import plotly.graph_objects as go import vizro.models as vm import vizro.plotly.express as px +from vizro.models.types import capture from ._components import CodeClipboard, FlexContainer, Markdown @@ -13,12 +16,42 @@ stocks = px.data.stocks() tips = px.data.tips() tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() +ages = pd.DataFrame( + { + "Age": ["0-19", "20-29", "30-39", "40-49", "50-59", ">=60"], + "Male": [800, 2000, 4200, 5000, 2100, 800], + "Female": [1000, 3000, 3500, 3800, 3600, 700], + } +) vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) vm.Container.add_type("components", Markdown) +@capture("graph") +def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): + fig = go.Figure() + fig.add_trace( + go.Bar( + x=-data_frame[x1].values, + y=data_frame[y], + orientation="h", + name=x1, + ) + ) + fig.add_trace( + go.Bar( + x=data_frame[x2], + y=data_frame[y], + orientation="h", + name=x2, + ) + ) + fig.update_layout(barmode="relative") + return fig + + # All functions ending with `_factory` are there to reuse the existing content of a page. Given the restriction that # one page can only be mapped to one navigation group, we have to create a new page with a new ID. def line_factory(id: str, title: str): @@ -339,6 +372,84 @@ def treemap_factory(id: str, title: str): ) +def butterfly_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a butterfly chart? + + A butterfly chart (also called a tornado chart) is a bar chart for displaying two sets of data series + side by side. + +   + + #### When to use it? + + Use a butterfly chart when you wish to emphasise the comparison between two data sets sharing the same + parameters. Sharing this chart with your audience will help them see at a glance how two groups differ + within the same parameters. You can also **stack** two bars on each side if you wish to divide your + categories. + """ + ), + vm.Graph(figure=butterfly(ages, x1="Male", x2="Female", y="Age")), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + from vizro import Vizro + import pandas as pd + from vizro.models.types import capture + import plotly.graph_objects as go + + ages = pd.DataFrame( + { + "Age": ["0-19", "20-29", "30-39", "40-49", "50-59", ">=60"], + "Male": [800, 2000, 4200, 5000, 2100, 800], + "Female": [1000, 3000, 3500, 3800, 3600, 700], + } + ) + + + @capture("graph") + def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): + fig = go.Figure() + fig.add_trace( + go.Bar( + x=-data_frame[x1].values, y=data_frame[y], orientation="h", name=x1, + ) + ) + fig.add_trace( + go.Bar(x=data_frame[x2], y=data_frame[y], orientation="h", name=x2,) + ) + fig.update_layout(barmode="relative") + return fig + + + dashboard = vm.Dashboard( + pages=[ + vm.Page( + title="Butterfly", + components=[ + vm.Graph( + figure=butterfly(ages, x1="Male", x2="Female", y="Age") + ) + ], + ) + ] + ) + Vizro().build(dashboard).run() + ``` + """ + ), + ], + ) + + # PAGES ------------------------------------------------------------- line = line_factory("Line", "Line") time_line = line_factory("Time-Line", "Line") @@ -350,6 +461,8 @@ def treemap_factory(id: str, title: str): ordered_column = column_factory("Ordered Column", "Ordered Column") treemap = treemap_factory("Treemap", "Treemap") magnitude_treemap = treemap_factory("Magnitude-Treemap", "Treemap") +butterfly_page = butterfly_factory("Butterfly", "Butterfly") +distribution_butterfly = butterfly_factory("Distribution-Butterfly", "Butterfly") pie = vm.Page( From 2d262ebbef26cfa25eb7ad7108fe7a4f1c9cbd4b Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 15 Jul 2024 17:06:30 +0200 Subject: [PATCH 052/109] Rename folder --- .../examples/{_charts => chart-gallery}/README.md | 0 .../examples/{_charts => chart-gallery}/app.py | 0 .../assets/css/custom.css | 0 .../{_charts => chart-gallery}/assets/favicon.ico | Bin .../assets/images/app.svg | 0 .../assets/images/charts/arc.svg | 0 .../assets/images/charts/bar.svg | 0 .../assets/images/charts/barcode.svg | 0 .../assets/images/charts/boxplot.svg | 0 .../assets/images/charts/bubble-timeline.svg | 0 .../assets/images/charts/bubble.svg | 0 .../assets/images/charts/bullet.svg | 0 .../assets/images/charts/butterfly.svg | 0 .../assets/images/charts/chord.svg | 0 .../assets/images/charts/choropleth.svg | 0 .../assets/images/charts/column-line.svg | 0 .../assets/images/charts/column.svg | 0 .../assets/images/charts/cumulative-curve.svg | 0 .../assets/images/charts/distribution-butterfly.svg | 0 .../assets/images/charts/diverging-bar.svg | 0 .../assets/images/charts/donut.svg | 0 .../assets/images/charts/dot-density.svg | 0 .../assets/images/charts/dot-plot.svg | 0 .../assets/images/charts/fan.svg | 0 .../assets/images/charts/flow-map.svg | 0 .../assets/images/charts/funnel.svg | 0 .../assets/images/charts/gantt.svg | 0 .../assets/images/charts/heatmap-matrix.svg | 0 .../assets/images/charts/heatmap.svg | 0 .../assets/images/charts/histogram.svg | 0 .../assets/images/charts/line.svg | 0 .../assets/images/charts/lollipop.svg | 0 .../assets/images/charts/magnitude-treemap.svg | 0 .../assets/images/charts/marimekko.svg | 0 .../assets/images/charts/network.svg | 0 .../assets/images/charts/ordered-bar.svg | 0 .../assets/images/charts/ordered-bubble.svg | 0 .../assets/images/charts/ordered-column.svg | 0 .../assets/images/charts/parallel.svg | 0 .../assets/images/charts/pictogram.svg | 0 .../assets/images/charts/pie.svg | 0 .../assets/images/charts/proportional-symbol.svg | 0 .../assets/images/charts/radar.svg | 0 .../assets/images/charts/radial.svg | 0 .../assets/images/charts/sankey.svg | 0 .../assets/images/charts/scatter-matrix.svg | 0 .../assets/images/charts/scatter.svg | 0 .../assets/images/charts/slope.svg | 0 .../assets/images/charts/sparkline.svg | 0 .../assets/images/charts/stacked-column.svg | 0 .../assets/images/charts/stepped-line.svg | 0 .../assets/images/charts/surplus.svg | 0 .../assets/images/charts/time-column.svg | 0 .../assets/images/charts/time-line.svg | 0 .../assets/images/charts/treemap.svg | 0 .../assets/images/charts/venn.svg | 0 .../assets/images/charts/violin.svg | 0 .../assets/images/charts/waterfall.svg | 0 .../{_charts => chart-gallery}/utils/__init__.py | 0 .../{_charts => chart-gallery}/utils/_components.py | 0 .../{_charts => chart-gallery}/utils/_containers.py | 0 .../{_charts => chart-gallery}/utils/_pages.py | 0 vizro-core/tests/integration/test_examples.py | 2 +- 63 files changed, 1 insertion(+), 1 deletion(-) rename vizro-core/examples/{_charts => chart-gallery}/README.md (100%) rename vizro-core/examples/{_charts => chart-gallery}/app.py (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/css/custom.css (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/favicon.ico (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/app.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/arc.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/bar.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/barcode.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/boxplot.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/bubble-timeline.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/bubble.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/bullet.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/butterfly.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/chord.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/choropleth.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/column-line.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/column.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/cumulative-curve.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/distribution-butterfly.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/diverging-bar.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/donut.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/dot-density.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/dot-plot.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/fan.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/flow-map.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/funnel.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/gantt.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/heatmap-matrix.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/heatmap.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/histogram.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/line.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/lollipop.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/magnitude-treemap.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/marimekko.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/network.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/ordered-bar.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/ordered-bubble.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/ordered-column.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/parallel.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/pictogram.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/pie.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/proportional-symbol.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/radar.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/radial.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/sankey.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/scatter-matrix.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/scatter.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/slope.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/sparkline.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/stacked-column.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/stepped-line.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/surplus.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/time-column.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/time-line.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/treemap.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/venn.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/violin.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/assets/images/charts/waterfall.svg (100%) rename vizro-core/examples/{_charts => chart-gallery}/utils/__init__.py (100%) rename vizro-core/examples/{_charts => chart-gallery}/utils/_components.py (100%) rename vizro-core/examples/{_charts => chart-gallery}/utils/_containers.py (100%) rename vizro-core/examples/{_charts => chart-gallery}/utils/_pages.py (100%) diff --git a/vizro-core/examples/_charts/README.md b/vizro-core/examples/chart-gallery/README.md similarity index 100% rename from vizro-core/examples/_charts/README.md rename to vizro-core/examples/chart-gallery/README.md diff --git a/vizro-core/examples/_charts/app.py b/vizro-core/examples/chart-gallery/app.py similarity index 100% rename from vizro-core/examples/_charts/app.py rename to vizro-core/examples/chart-gallery/app.py diff --git a/vizro-core/examples/_charts/assets/css/custom.css b/vizro-core/examples/chart-gallery/assets/css/custom.css similarity index 100% rename from vizro-core/examples/_charts/assets/css/custom.css rename to vizro-core/examples/chart-gallery/assets/css/custom.css diff --git a/vizro-core/examples/_charts/assets/favicon.ico b/vizro-core/examples/chart-gallery/assets/favicon.ico similarity index 100% rename from vizro-core/examples/_charts/assets/favicon.ico rename to vizro-core/examples/chart-gallery/assets/favicon.ico diff --git a/vizro-core/examples/_charts/assets/images/app.svg b/vizro-core/examples/chart-gallery/assets/images/app.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/app.svg rename to vizro-core/examples/chart-gallery/assets/images/app.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/arc.svg b/vizro-core/examples/chart-gallery/assets/images/charts/arc.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/arc.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/arc.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/bar.svg b/vizro-core/examples/chart-gallery/assets/images/charts/bar.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/bar.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/bar.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/barcode.svg b/vizro-core/examples/chart-gallery/assets/images/charts/barcode.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/barcode.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/barcode.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/boxplot.svg b/vizro-core/examples/chart-gallery/assets/images/charts/boxplot.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/boxplot.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/boxplot.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/chart-gallery/assets/images/charts/bubble-timeline.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/bubble-timeline.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/bubble-timeline.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/bubble.svg b/vizro-core/examples/chart-gallery/assets/images/charts/bubble.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/bubble.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/bubble.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/bullet.svg b/vizro-core/examples/chart-gallery/assets/images/charts/bullet.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/bullet.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/bullet.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/butterfly.svg b/vizro-core/examples/chart-gallery/assets/images/charts/butterfly.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/butterfly.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/butterfly.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/chord.svg b/vizro-core/examples/chart-gallery/assets/images/charts/chord.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/chord.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/chord.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/choropleth.svg b/vizro-core/examples/chart-gallery/assets/images/charts/choropleth.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/choropleth.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/choropleth.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/column-line.svg b/vizro-core/examples/chart-gallery/assets/images/charts/column-line.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/column-line.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/column-line.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/column.svg b/vizro-core/examples/chart-gallery/assets/images/charts/column.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/column.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/column.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/chart-gallery/assets/images/charts/cumulative-curve.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/cumulative-curve.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/cumulative-curve.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/distribution-butterfly.svg b/vizro-core/examples/chart-gallery/assets/images/charts/distribution-butterfly.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/distribution-butterfly.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/distribution-butterfly.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/diverging-bar.svg b/vizro-core/examples/chart-gallery/assets/images/charts/diverging-bar.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/diverging-bar.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/diverging-bar.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/donut.svg b/vizro-core/examples/chart-gallery/assets/images/charts/donut.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/donut.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/donut.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/dot-density.svg b/vizro-core/examples/chart-gallery/assets/images/charts/dot-density.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/dot-density.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/dot-density.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/dot-plot.svg b/vizro-core/examples/chart-gallery/assets/images/charts/dot-plot.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/dot-plot.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/dot-plot.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/fan.svg b/vizro-core/examples/chart-gallery/assets/images/charts/fan.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/fan.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/fan.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/flow-map.svg b/vizro-core/examples/chart-gallery/assets/images/charts/flow-map.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/flow-map.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/flow-map.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/funnel.svg b/vizro-core/examples/chart-gallery/assets/images/charts/funnel.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/funnel.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/funnel.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/gantt.svg b/vizro-core/examples/chart-gallery/assets/images/charts/gantt.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/gantt.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/gantt.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/heatmap-matrix.svg b/vizro-core/examples/chart-gallery/assets/images/charts/heatmap-matrix.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/heatmap-matrix.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/heatmap-matrix.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/heatmap.svg b/vizro-core/examples/chart-gallery/assets/images/charts/heatmap.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/heatmap.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/heatmap.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/histogram.svg b/vizro-core/examples/chart-gallery/assets/images/charts/histogram.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/histogram.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/histogram.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/line.svg b/vizro-core/examples/chart-gallery/assets/images/charts/line.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/line.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/line.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/lollipop.svg b/vizro-core/examples/chart-gallery/assets/images/charts/lollipop.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/lollipop.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/lollipop.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/magnitude-treemap.svg b/vizro-core/examples/chart-gallery/assets/images/charts/magnitude-treemap.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/magnitude-treemap.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/magnitude-treemap.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/marimekko.svg b/vizro-core/examples/chart-gallery/assets/images/charts/marimekko.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/marimekko.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/marimekko.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/network.svg b/vizro-core/examples/chart-gallery/assets/images/charts/network.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/network.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/network.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/ordered-bar.svg b/vizro-core/examples/chart-gallery/assets/images/charts/ordered-bar.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/ordered-bar.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/ordered-bar.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/chart-gallery/assets/images/charts/ordered-bubble.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/ordered-bubble.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/ordered-bubble.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/ordered-column.svg b/vizro-core/examples/chart-gallery/assets/images/charts/ordered-column.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/ordered-column.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/ordered-column.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/parallel.svg b/vizro-core/examples/chart-gallery/assets/images/charts/parallel.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/parallel.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/parallel.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/pictogram.svg b/vizro-core/examples/chart-gallery/assets/images/charts/pictogram.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/pictogram.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/pictogram.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/pie.svg b/vizro-core/examples/chart-gallery/assets/images/charts/pie.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/pie.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/pie.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/proportional-symbol.svg b/vizro-core/examples/chart-gallery/assets/images/charts/proportional-symbol.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/proportional-symbol.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/proportional-symbol.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/radar.svg b/vizro-core/examples/chart-gallery/assets/images/charts/radar.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/radar.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/radar.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/radial.svg b/vizro-core/examples/chart-gallery/assets/images/charts/radial.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/radial.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/radial.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/sankey.svg b/vizro-core/examples/chart-gallery/assets/images/charts/sankey.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/sankey.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/sankey.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/chart-gallery/assets/images/charts/scatter-matrix.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/scatter-matrix.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/scatter-matrix.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/scatter.svg b/vizro-core/examples/chart-gallery/assets/images/charts/scatter.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/scatter.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/scatter.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/slope.svg b/vizro-core/examples/chart-gallery/assets/images/charts/slope.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/slope.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/slope.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/sparkline.svg b/vizro-core/examples/chart-gallery/assets/images/charts/sparkline.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/sparkline.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/sparkline.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/stacked-column.svg b/vizro-core/examples/chart-gallery/assets/images/charts/stacked-column.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/stacked-column.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/stacked-column.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/stepped-line.svg b/vizro-core/examples/chart-gallery/assets/images/charts/stepped-line.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/stepped-line.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/stepped-line.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/surplus.svg b/vizro-core/examples/chart-gallery/assets/images/charts/surplus.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/surplus.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/surplus.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/time-column.svg b/vizro-core/examples/chart-gallery/assets/images/charts/time-column.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/time-column.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/time-column.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/time-line.svg b/vizro-core/examples/chart-gallery/assets/images/charts/time-line.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/time-line.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/time-line.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/treemap.svg b/vizro-core/examples/chart-gallery/assets/images/charts/treemap.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/treemap.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/treemap.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/venn.svg b/vizro-core/examples/chart-gallery/assets/images/charts/venn.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/venn.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/venn.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/violin.svg b/vizro-core/examples/chart-gallery/assets/images/charts/violin.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/violin.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/violin.svg diff --git a/vizro-core/examples/_charts/assets/images/charts/waterfall.svg b/vizro-core/examples/chart-gallery/assets/images/charts/waterfall.svg similarity index 100% rename from vizro-core/examples/_charts/assets/images/charts/waterfall.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/waterfall.svg diff --git a/vizro-core/examples/_charts/utils/__init__.py b/vizro-core/examples/chart-gallery/utils/__init__.py similarity index 100% rename from vizro-core/examples/_charts/utils/__init__.py rename to vizro-core/examples/chart-gallery/utils/__init__.py diff --git a/vizro-core/examples/_charts/utils/_components.py b/vizro-core/examples/chart-gallery/utils/_components.py similarity index 100% rename from vizro-core/examples/_charts/utils/_components.py rename to vizro-core/examples/chart-gallery/utils/_components.py diff --git a/vizro-core/examples/_charts/utils/_containers.py b/vizro-core/examples/chart-gallery/utils/_containers.py similarity index 100% rename from vizro-core/examples/_charts/utils/_containers.py rename to vizro-core/examples/chart-gallery/utils/_containers.py diff --git a/vizro-core/examples/_charts/utils/_pages.py b/vizro-core/examples/chart-gallery/utils/_pages.py similarity index 100% rename from vizro-core/examples/_charts/utils/_pages.py rename to vizro-core/examples/chart-gallery/utils/_pages.py diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py index 247ce163e..a37082fca 100644 --- a/vizro-core/tests/integration/test_examples.py +++ b/vizro-core/tests/integration/test_examples.py @@ -49,7 +49,7 @@ def dashboard(request, monkeypatch): (examples_path / "features", ""), (examples_path / "demo", ""), (examples_path / "kpi", ""), - (examples_path / "_charts", ""), + (examples_path / "chart-gallery", ""), (examples_path / "_dev", "yaml_version"), (examples_path / "features", "yaml_version"), ], From 0a7ba67d05db168a61170164943a784722547c65 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 15 Jul 2024 17:24:23 +0200 Subject: [PATCH 053/109] Add choropleth chart --- vizro-core/examples/_dev/app.py | 41 +++---- vizro-core/examples/chart-gallery/app.py | 37 +----- .../examples/chart-gallery/utils/_pages.py | 107 ++++++++++++++++-- 3 files changed, 127 insertions(+), 58 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index 973fa7292..b0132fe61 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,37 +1,40 @@ """Dev app to try things out.""" -import numpy as np +import json +from urllib.request import urlopen + +import pandas as pd import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro -df = px.data.iris() -df["species_one_long"] = np.where( - df["species"] == "setosa", "setosa is one common species you can select in the iris dataset.", df["species"] -) -df["species_long"] = df["species"] + " is one common species you can select in the iris dataset." -df["species_very_long"] = ( - df["species"] - + " is one common species you can select in the iris dataset is one common species you can select in the iris data." +with urlopen( + "https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json" +) as response: + counties = json.load(response) + +fips_unemp = pd.read_csv( + "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", + dtype={"fips": str}, ) + page = vm.Page( - title="", + title="Choropleth", components=[ vm.Graph( - id="graph_1", - figure=px.scatter(df, title="Title", x="sepal_width", y="sepal_length", color="species"), + figure=px.choropleth( + fips_unemp, + geojson=counties, + locations="fips", + color="unemp", + range_color=(0, 12), + scope="usa", + ) ), ], - controls=[ - vm.Filter(column="species"), - vm.Filter(column="species_long"), - vm.Filter(column="species_one_long"), - vm.Filter(column="species_very_long"), - ], ) - dashboard = vm.Dashboard(pages=[page]) if __name__ == "__main__": diff --git a/vizro-core/examples/chart-gallery/app.py b/vizro-core/examples/chart-gallery/app.py index b466b166c..8f3c82a85 100644 --- a/vizro-core/examples/chart-gallery/app.py +++ b/vizro-core/examples/chart-gallery/app.py @@ -1,36 +1,8 @@ -"""Example to show dashboard configuration specified as pydantic models.""" +"""App configuration for chart gallery dashboard.""" import vizro.models as vm -from utils._containers import ( - container_all, - container_correlation, - container_deviation, - container_distribution, - container_flow, - container_magnitude, - container_part, - container_ranking, - container_spatial, - container_time, -) -from utils._pages import ( - bar, - boxplot, - butterfly_page, - column, - distribution_butterfly, - donut, - line, - magnitude_treemap, - ordered_bar, - ordered_column, - pie, - scatter, - time_column, - time_line, - treemap, - violin, -) +from utils._containers import * +from utils._pages import * from vizro import Vizro homepage = vm.Page( @@ -73,6 +45,7 @@ magnitude_treemap, butterfly_page, distribution_butterfly, + choropleth, ], navigation=vm.Navigation( nav_selector=vm.NavBar( @@ -120,7 +93,7 @@ ), vm.NavLink( label="Spatial", - pages={"Spatial": ["Line"]}, # TODO: Replace with map + pages={"Spatial": ["Choropleth"]}, icon="Map", ), ] diff --git a/vizro-core/examples/chart-gallery/utils/_pages.py b/vizro-core/examples/chart-gallery/utils/_pages.py index c8fc1d9ba..71ae7a050 100644 --- a/vizro-core/examples/chart-gallery/utils/_pages.py +++ b/vizro-core/examples/chart-gallery/utils/_pages.py @@ -1,5 +1,8 @@ """Contains custom components and charts used inside the dashboard.""" +import json +from urllib.request import urlopen + import pandas as pd import plotly.graph_objects as go import vizro.models as vm @@ -8,6 +11,10 @@ from ._components import CodeClipboard, FlexContainer, Markdown +with urlopen("https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json") as response: + counties = json.load(response) + + PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 gapminder = px.data.gapminder() @@ -23,6 +30,11 @@ "Female": [1000, 3000, 3500, 3800, 3600, 700], } ) +fips_unemp = pd.read_csv( + "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", + dtype={"fips": str}, +) + vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) @@ -318,17 +330,18 @@ def treemap_factory(id: str, title: str): #### What is a treemap? - A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles sized proportionately - to the quantity they represent, combining together to form larger **parent** category rectangles. + A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles sized + proportionately to the quantity they represent, combining together to form larger **parent** + category rectangles.   #### When to use it? - It’s helpful to use a treemap when you wish to display hierarchical part-to-whole relationships. You can - compare groups and single elements nested within them. Consider using them instead of Pie charts when you - have a higher number of categories. Treemaps are very compact and allow audiences to get a quick overview - of the data. + It's helpful to use a treemap when you wish to display hierarchical part-to-whole relationships. You can + compare groups and single elements nested within them. Consider using them instead of Pie charts when + you have a higher number of categories. Treemaps are very compact and allow audiences to get a quick + overview of the data. """ ), vm.Graph( @@ -390,7 +403,7 @@ def butterfly_factory(id: str, title: str): #### When to use it? - Use a butterfly chart when you wish to emphasise the comparison between two data sets sharing the same + Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same parameters. Sharing this chart with your audience will help them see at a glance how two groups differ within the same parameters. You can also **stack** two bars on each side if you wish to divide your categories. @@ -711,3 +724,83 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): ), ], ) + +choropleth = vm.Page( + title="Choropleth", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + #### What is a choropleth map? + + A choropleth map is a map in which geographical areas are colored, shaded or patterned in relation to a + specific data variable. + +   + + #### When to use it? + + Use a chloropleth map when you wish to show how a measurement varies across a geographic area, or to show + variability or patterns within a region. Typically, you will blend one color into another, take a color + shade from light to dark, or introduce patterns to depict the variation in the data. + + Be aware that it may be difficult for your audience to accurately read or compare values on the map + depicted by color. + + """ + ), + vm.Graph( + figure=px.choropleth( + fips_unemp, + geojson=counties, + locations="fips", + color="unemp", + range_color=(0, 12), + scope="usa", + ) + ), + CodeClipboard( + text=""" + ```python + import json + from urllib.request import urlopen + + import pandas as pd + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + with urlopen( + "https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json" + ) as response: + counties = json.load(response) + + fips_unemp = pd.read_csv( + "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", + dtype={"fips": str}, + ) + + + page = vm.Page( + title="Choropleth", + components=[ + vm.Graph( + figure=px.choropleth( + fips_unemp, + geojson=counties, + locations="fips", + color="unemp", + range_color=(0, 12), + scope="usa", + ) + ), + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) From 1da246d1d6c51dd18e9a4828c3a0b1124a0672ba Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 15 Jul 2024 18:20:01 +0200 Subject: [PATCH 054/109] Add sankey chart --- vizro-core/examples/_dev/app.py | 67 +++++--- vizro-core/examples/chart-gallery/app.py | 3 +- .../examples/chart-gallery/utils/_pages.py | 145 +++++++++++++++++- 3 files changed, 189 insertions(+), 26 deletions(-) diff --git a/vizro-core/examples/_dev/app.py b/vizro-core/examples/_dev/app.py index b0132fe61..7f5c16470 100644 --- a/vizro-core/examples/_dev/app.py +++ b/vizro-core/examples/_dev/app.py @@ -1,36 +1,63 @@ """Dev app to try things out.""" -import json -from urllib.request import urlopen +from typing import List import pandas as pd +import plotly.graph_objects as go import vizro.models as vm -import vizro.plotly.express as px from vizro import Vizro +from vizro.models.types import capture -with urlopen( - "https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json" -) as response: - counties = json.load(response) - -fips_unemp = pd.read_csv( - "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", - dtype={"fips": str}, +sankey_data = pd.DataFrame( + { + "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels + "Destination": [1, 2, 3, 4, 5, 5, 6], # indices inside labels + "Value": [10, 4, 8, 6, 4, 8, 8], + } ) +@capture("graph") +def sankey( + data_frame: pd.DataFrame, + source: str, + target: str, + value: str, + labels: List[str], +): + fig = go.Figure( + data=[ + go.Sankey( + node=dict( + pad=16, + thickness=16, + label=labels, + ), + link=dict( + source=data_frame[source], + target=data_frame[target], + value=data_frame[value], + label=labels, + color="rgba(205, 209, 228, 0.4)", + ), + ) + ] + ) + fig.update_layout(barmode="relative") + return fig + + page = vm.Page( - title="Choropleth", + title="Sankey", components=[ vm.Graph( - figure=px.choropleth( - fips_unemp, - geojson=counties, - locations="fips", - color="unemp", - range_color=(0, 12), - scope="usa", - ) + figure=sankey( + data_frame=sankey_data, + labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], + source="Origin", + target="Destination", + value="Value", + ), ), ], ) diff --git a/vizro-core/examples/chart-gallery/app.py b/vizro-core/examples/chart-gallery/app.py index 8f3c82a85..0339173d8 100644 --- a/vizro-core/examples/chart-gallery/app.py +++ b/vizro-core/examples/chart-gallery/app.py @@ -46,6 +46,7 @@ butterfly_page, distribution_butterfly, choropleth, + sankey, ], navigation=vm.Navigation( nav_selector=vm.NavBar( @@ -88,7 +89,7 @@ ), vm.NavLink( label="Flow", - pages={"Flow": ["Line"]}, # TODO: Replace with Sankey + pages={"Flow": ["Sankey"]}, icon="Stacked Line Chart", ), vm.NavLink( diff --git a/vizro-core/examples/chart-gallery/utils/_pages.py b/vizro-core/examples/chart-gallery/utils/_pages.py index 71ae7a050..fcacb07e1 100644 --- a/vizro-core/examples/chart-gallery/utils/_pages.py +++ b/vizro-core/examples/chart-gallery/utils/_pages.py @@ -35,6 +35,14 @@ dtype={"fips": str}, ) +sankey_data = pd.DataFrame( + { + "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels + "Destination": [1, 2, 3, 4, 5, 5, 6], # indices inside labels + "Value": [10, 4, 8, 6, 4, 8, 8], + } +) + vm.Page.add_type("components", CodeClipboard) vm.Page.add_type("components", FlexContainer) @@ -64,6 +72,30 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): return fig +@capture("graph") +def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str): + fig = go.Figure( + data=[ + go.Sankey( + node=dict( + pad=16, + thickness=16, + # label=labels, + ), + link=dict( + source=data_frame[source], + target=data_frame[target], + value=data_frame[value], + # label=labels, + color="rgba(205, 209, 228, 0.4)", + ), + ) + ] + ) + fig.update_layout(barmode="relative") + return fig + + # All functions ending with `_factory` are there to reuse the existing content of a page. Given the restriction that # one page can only be mapped to one navigation group, we have to create a new page with a new ID. def line_factory(id: str, title: str): @@ -764,23 +796,23 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): ```python import json from urllib.request import urlopen - + import pandas as pd import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro - + with urlopen( "https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json" ) as response: counties = json.load(response) - + fips_unemp = pd.read_csv( "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", dtype={"fips": str}, ) - - + + page = vm.Page( title="Choropleth", components=[ @@ -804,3 +836,106 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): ), ], ) + + +sankey = vm.Page( + title="Sankey", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + #### What is a sankey chart? + + A Sankey chart is a type of flow diagram that illustrates how resources or values move between different + stages or entities. The width of the arrows in the chart is proportional to the quantity of the flow, + making it easy to see where the largest movements occur. + +   + + #### When to use it? + + Use a Sankey chart when you want to visualize the flow of resources, energy, money, or other values from + one point to another. It is particularly useful for showing distributions and transfers within a system, + such as energy usage, cost breakdowns, or material flows. + + Be mindful that Sankey charts can become cluttered if there are too many nodes or flows. + To maintain clarity, focus on highlighting the most significant flows and keep the chart as simple as + possible. + """ + ), + vm.Graph( + figure=sankey( + data_frame=sankey_data, + labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], + source="Origin", + target="Destination", + value="Value", + ), + ), + CodeClipboard( + text=""" + ```python + import pandas as pd + import plotly.graph_objects as go + import vizro.models as vm + from vizro import Vizro + from vizro.models.types import capture + from typing import List + + sankey_data = pd.DataFrame( + { + "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels + "Destination": [1, 2, 3, 4, 5, 5, 6], # indices inside labels + "Value": [10, 4, 8, 6, 4, 8, 8], + } + ) + + + @capture("graph") + def sankey( + data_frame: pd.DataFrame, + source: str, + target: str, + value: str, + labels: List[str], + ): + fig = go.Figure( + data=[ + go.Sankey( + node=dict(pad=16, thickness=16, label=labels,), + link=dict( + source=data_frame[source], + target=data_frame[target], + value=data_frame[value], + label=labels, + color="rgba(205, 209, 228, 0.4)", + ), + ) + ] + ) + fig.update_layout(barmode="relative") + return fig + + + page = vm.Page( + title="Sankey", + components=[ + vm.Graph( + figure=sankey( + data_frame=sankey_data, + labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], + source="Origin", + target="Destination", + value="Value", + ), + ), + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) From 846a4fdbb3fe0e65aa68c7c5bc46f82fe220801b Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 15 Jul 2024 18:23:27 +0200 Subject: [PATCH 055/109] Lint --- vizro-core/examples/chart-gallery/app.py | 2 +- vizro-core/examples/chart-gallery/utils/_pages.py | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/vizro-core/examples/chart-gallery/app.py b/vizro-core/examples/chart-gallery/app.py index 0339173d8..114ebea5f 100644 --- a/vizro-core/examples/chart-gallery/app.py +++ b/vizro-core/examples/chart-gallery/app.py @@ -46,7 +46,7 @@ butterfly_page, distribution_butterfly, choropleth, - sankey, + sankey_page, ], navigation=vm.Navigation( nav_selector=vm.NavBar( diff --git a/vizro-core/examples/chart-gallery/utils/_pages.py b/vizro-core/examples/chart-gallery/utils/_pages.py index fcacb07e1..c4abd242d 100644 --- a/vizro-core/examples/chart-gallery/utils/_pages.py +++ b/vizro-core/examples/chart-gallery/utils/_pages.py @@ -1,6 +1,7 @@ """Contains custom components and charts used inside the dashboard.""" import json +from typing import List from urllib.request import urlopen import pandas as pd @@ -73,20 +74,20 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): @capture("graph") -def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str): +def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, labels: List[str]): fig = go.Figure( data=[ go.Sankey( node=dict( pad=16, thickness=16, - # label=labels, + label=labels, ), link=dict( source=data_frame[source], target=data_frame[target], value=data_frame[value], - # label=labels, + abel=labels, color="rgba(205, 209, 228, 0.4)", ), ) @@ -838,7 +839,7 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): ) -sankey = vm.Page( +sankey_page = vm.Page( title="Sankey", layout=vm.Layout(grid=PAGE_GRID), components=[ From ed742e639196b5356b04efe06c1ded946b22030d Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 15 Jul 2024 18:24:25 +0200 Subject: [PATCH 056/109] Fix typo --- vizro-core/examples/chart-gallery/utils/_pages.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/examples/chart-gallery/utils/_pages.py b/vizro-core/examples/chart-gallery/utils/_pages.py index c4abd242d..db0e099c5 100644 --- a/vizro-core/examples/chart-gallery/utils/_pages.py +++ b/vizro-core/examples/chart-gallery/utils/_pages.py @@ -87,7 +87,7 @@ def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, label source=data_frame[source], target=data_frame[target], value=data_frame[value], - abel=labels, + label=labels, color="rgba(205, 209, 228, 0.4)", ), ) From cbcff26454138935b2e689e3f32e59a6f47bc8b4 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 16 Jul 2024 13:59:57 +0200 Subject: [PATCH 057/109] Fix mapping of charts to categories --- .../chart-gallery/utils/_containers.py | 93 ++++++++++--------- 1 file changed, 48 insertions(+), 45 deletions(-) diff --git a/vizro-core/examples/chart-gallery/utils/_containers.py b/vizro-core/examples/chart-gallery/utils/_containers.py index 2135c5a84..9b78a15b6 100644 --- a/vizro-core/examples/chart-gallery/utils/_containers.py +++ b/vizro-core/examples/chart-gallery/utils/_containers.py @@ -15,67 +15,68 @@ def tidy_chart_title(chart: str) -> str: - prefixes_to_remove = ["time-", "magnitude-", "deviation-"] + """Tidy up the chart title by removing prefixes and unwanted characters. + The pre-fixes are previously given to uniquely create a page ID. + """ + prefixes_to_remove = ["time-", "magnitude-", "deviation-", "distribution-"] pattern = "^(" + "|".join(prefixes_to_remove) + ")" chart_without_prefix = re.sub(pattern, "", chart) return chart_without_prefix.replace("-", " ").title() -DEVIATION_CHARTS = sorted(["diverging-bar", "butterfly", "slope", "lollipop"]) -CORRELATION_CHARTS = ["scatter"] +DEVIATION_CHARTS = sorted( + [ + "diverging-bar", + # "diverging-stacked-bar", + "butterfly", + "surplus", + ] +) +CORRELATION_CHARTS = [ + "scatter", + "scatter-matrix", + "column-line", + # "connected-scatter", + "heatmap-matrix", + "bubble", +] RANKING_CHARTS = sorted( [ "ordered-bar", "ordered-column", - "stacked-column", "ordered-bubble", - "column-line", - "donut", - "arc", + "slope", "lollipop", - "waterfall", - "diverging-bar", - "boxplot", + "stepped-line", ] ) DISTRIBUTION_CHARTS = sorted( [ "histogram", - "distribution-butterfly", - "pie", - "donut", - "arc", + "dot-plot", + "barcode", + "boxplot", "violin", - "lollipop", + "distribution-butterfly", "cumulative-curve", - "waterfall", - "venn", - "barcode", + # "beeswarm", ] ) + MAGNITUDE_CHARTS = sorted( [ "column", - "marimekko", - "stacked-column", - "ordered-bubble", - "column-line", - "surplus", - "bubble-timeline", "bar", - "pie", - "donut", - "arc", - "violin", - "slope", + # "paired-column", + # "paired-bar", + "marimekko", + "bubble", "lollipop", - "cumulative-curve", - "waterfall", - "venn", - "diverging-bar", + "radar", + "parallel", + "pictogram", "bullet", - "dot-plot", - "magnitude-treemap", + "radial", ] ) TIME_CHARTS = sorted( @@ -84,29 +85,31 @@ def tidy_chart_title(chart: str) -> str: "time-column", "gantt", "column-line", + "slope", + "fan", + # "area", + # "connected-scatter", + "heatmap", "bubble-timeline", - "scatter", - "lollipop", - "diverging-bar", - "stepped-line", "sparkline", ] ) PART_TO_WHOLE_CHARTS = sorted( [ - "marimekko", + # "stacked-bar", "stacked-column", - "column-line", + "marimekko", + "funnel", "pie", "donut", - "arc", - "waterfall", "treemap", + "arc", "venn", + "waterfall", ] ) -FLOW_CHARTS = sorted(["gantt", "line", "slope", "stepped-line"]) -SPATIAL_CHARTS = sorted(["choropleth", "dot-density", "flow-map"]) +FLOW_CHARTS = sorted(["sankey", "waterfall", "chord", "network"]) +SPATIAL_CHARTS = sorted(["choropleth", "dot-density", "flow-map", "proportional-symbol"]) ALL_CHARTS = sorted( set( From 83c28b6587f9d7a136367a23e2433ccf92419829 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 16 Jul 2024 14:57:44 +0200 Subject: [PATCH 058/109] Fix CSS --- .../charts/{proportional-symbol.svg => bubble-map.svg} | 0 .../assets/images/charts/{dot-density.svg => dot-map.svg} | 0 vizro-core/examples/chart-gallery/utils/_components.py | 4 ++++ vizro-core/examples/chart-gallery/utils/_containers.py | 2 +- vizro-core/src/vizro/static/css/{fonts => }/code.css | 7 ++++++- vizro-core/src/vizro/static/css/{fonts => }/tooltip.css | 0 vizro-core/src/vizro/static/css/variables.css | 4 ++++ 7 files changed, 15 insertions(+), 2 deletions(-) rename vizro-core/examples/chart-gallery/assets/images/charts/{proportional-symbol.svg => bubble-map.svg} (100%) rename vizro-core/examples/chart-gallery/assets/images/charts/{dot-density.svg => dot-map.svg} (100%) rename vizro-core/src/vizro/static/css/{fonts => }/code.css (58%) rename vizro-core/src/vizro/static/css/{fonts => }/tooltip.css (100%) diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/proportional-symbol.svg b/vizro-core/examples/chart-gallery/assets/images/charts/bubble-map.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/proportional-symbol.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/bubble-map.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/dot-density.svg b/vizro-core/examples/chart-gallery/assets/images/charts/dot-map.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/dot-density.svg rename to vizro-core/examples/chart-gallery/assets/images/charts/dot-map.svg diff --git a/vizro-core/examples/chart-gallery/utils/_components.py b/vizro-core/examples/chart-gallery/utils/_components.py index 5529e216e..6989dcc4d 100644 --- a/vizro-core/examples/chart-gallery/utils/_components.py +++ b/vizro-core/examples/chart-gallery/utils/_components.py @@ -13,6 +13,8 @@ class CodeClipboard(vm.VizroBaseModel): + """Contains code snippet with a copy to clipboard button.""" + type: Literal["code_clipboard"] = "code_clipboard" title: str = "Code" text: str @@ -36,6 +38,8 @@ def build(self): class Markdown(vm.VizroBaseModel): + """Markdown component.""" + type: Literal["markdown"] = "markdown" text: str = Field( ..., description="Markdown string to create card title/text that should adhere to the CommonMark Spec." diff --git a/vizro-core/examples/chart-gallery/utils/_containers.py b/vizro-core/examples/chart-gallery/utils/_containers.py index 9b78a15b6..54573d65a 100644 --- a/vizro-core/examples/chart-gallery/utils/_containers.py +++ b/vizro-core/examples/chart-gallery/utils/_containers.py @@ -109,7 +109,7 @@ def tidy_chart_title(chart: str) -> str: ] ) FLOW_CHARTS = sorted(["sankey", "waterfall", "chord", "network"]) -SPATIAL_CHARTS = sorted(["choropleth", "dot-density", "flow-map", "proportional-symbol"]) +SPATIAL_CHARTS = sorted(["choropleth", "dot-map", "flow-map", "bubble-map"]) ALL_CHARTS = sorted( set( diff --git a/vizro-core/src/vizro/static/css/fonts/code.css b/vizro-core/src/vizro/static/css/code.css similarity index 58% rename from vizro-core/src/vizro/static/css/fonts/code.css rename to vizro-core/src/vizro/static/css/code.css index 14674c7ef..b81be0dd4 100644 --- a/vizro-core/src/vizro/static/css/fonts/code.css +++ b/vizro-core/src/vizro/static/css/code.css @@ -8,7 +8,7 @@ code.language-python.hljs { font-family: unset; } -.hljs-string { +.hljs-string, .hljs-params .hljs-string, .hljs-number { color: var(--text-code-string); font-family: unset; } @@ -17,3 +17,8 @@ code.language-python.hljs { color: var(--text-code-keyword); font-family: unset; } + +.hljs-title.function_, .hljs-meta, .hljs-built_in, .hljs-type { + color: var(--text-code-meta); + font-family: unset; +} diff --git a/vizro-core/src/vizro/static/css/fonts/tooltip.css b/vizro-core/src/vizro/static/css/tooltip.css similarity index 100% rename from vizro-core/src/vizro/static/css/fonts/tooltip.css rename to vizro-core/src/vizro/static/css/tooltip.css diff --git a/vizro-core/src/vizro/static/css/variables.css b/vizro-core/src/vizro/static/css/variables.css index 7cca0486e..d29ef1e9a 100644 --- a/vizro-core/src/vizro/static/css/variables.css +++ b/vizro-core/src/vizro/static/css/variables.css @@ -91,6 +91,8 @@ --status-warning: var(--status-dark-mode-warning); --text-code-string: #95c2e7; --text-code-keyword: #f4766e; + --text-code-meta: #c8ace1; + --text-code-type: #f69d50; } .vizro_light { @@ -158,4 +160,6 @@ --inverse-color: invert(100%); --text-code-string: #0a3069; --text-code-keyword: #d12d39; + --text-code-meta: #6f42c1; + --text-code-type: #f69d50; } From 13c7fcb71583879b265823414fd2c38a12d257c0 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue, 16 Jul 2024 13:07:45 +0000 Subject: [PATCH 059/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/src/vizro/static/css/code.css | 9 +++++++-- vizro-core/src/vizro/static/css/variables.css | 4 ++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/vizro-core/src/vizro/static/css/code.css b/vizro-core/src/vizro/static/css/code.css index b81be0dd4..f718b41d6 100644 --- a/vizro-core/src/vizro/static/css/code.css +++ b/vizro-core/src/vizro/static/css/code.css @@ -8,7 +8,9 @@ code.language-python.hljs { font-family: unset; } -.hljs-string, .hljs-params .hljs-string, .hljs-number { +.hljs-string, +.hljs-params .hljs-string, +.hljs-number { color: var(--text-code-string); font-family: unset; } @@ -18,7 +20,10 @@ code.language-python.hljs { font-family: unset; } -.hljs-title.function_, .hljs-meta, .hljs-built_in, .hljs-type { +.hljs-title.function_, +.hljs-meta, +.hljs-built_in, +.hljs-type { color: var(--text-code-meta); font-family: unset; } diff --git a/vizro-core/src/vizro/static/css/variables.css b/vizro-core/src/vizro/static/css/variables.css index d29ef1e9a..36f438035 100644 --- a/vizro-core/src/vizro/static/css/variables.css +++ b/vizro-core/src/vizro/static/css/variables.css @@ -160,6 +160,6 @@ --inverse-color: invert(100%); --text-code-string: #0a3069; --text-code-keyword: #d12d39; - --text-code-meta: #6f42c1; - --text-code-type: #f69d50; + --text-code-meta: #6f42c1; + --text-code-type: #f69d50; } From 3c2d263b2be24daa18c4faca8ad3506b59e5cec1 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 16 Jul 2024 15:11:26 +0200 Subject: [PATCH 060/109] Rename folder --- .../{chart-gallery => _chart-gallery}/README.md | 0 .../{chart-gallery => _chart-gallery}/app.py | 0 .../assets/css/custom.css | 0 .../assets/favicon.ico | Bin .../assets/images/app.svg | 0 .../assets/images/charts/arc.svg | 0 .../assets/images/charts/bar.svg | 0 .../assets/images/charts/barcode.svg | 0 .../assets/images/charts/boxplot.svg | 0 .../assets/images/charts/bubble-map.svg | 0 .../assets/images/charts/bubble-timeline.svg | 0 .../assets/images/charts/bubble.svg | 0 .../assets/images/charts/bullet.svg | 0 .../assets/images/charts/butterfly.svg | 0 .../assets/images/charts/chord.svg | 0 .../assets/images/charts/choropleth.svg | 0 .../assets/images/charts/column-line.svg | 0 .../assets/images/charts/column.svg | 0 .../assets/images/charts/cumulative-curve.svg | 0 .../assets/images/charts/distribution-butterfly.svg | 0 .../assets/images/charts/diverging-bar.svg | 0 .../assets/images/charts/donut.svg | 0 .../assets/images/charts/dot-map.svg | 0 .../assets/images/charts/dot-plot.svg | 0 .../assets/images/charts/fan.svg | 0 .../assets/images/charts/flow-map.svg | 0 .../assets/images/charts/funnel.svg | 0 .../assets/images/charts/gantt.svg | 0 .../assets/images/charts/heatmap-matrix.svg | 0 .../assets/images/charts/heatmap.svg | 0 .../assets/images/charts/histogram.svg | 0 .../assets/images/charts/line.svg | 0 .../assets/images/charts/lollipop.svg | 0 .../assets/images/charts/magnitude-treemap.svg | 0 .../assets/images/charts/marimekko.svg | 0 .../assets/images/charts/network.svg | 0 .../assets/images/charts/ordered-bar.svg | 0 .../assets/images/charts/ordered-bubble.svg | 0 .../assets/images/charts/ordered-column.svg | 0 .../assets/images/charts/parallel.svg | 0 .../assets/images/charts/pictogram.svg | 0 .../assets/images/charts/pie.svg | 0 .../assets/images/charts/radar.svg | 0 .../assets/images/charts/radial.svg | 0 .../assets/images/charts/sankey.svg | 0 .../assets/images/charts/scatter-matrix.svg | 0 .../assets/images/charts/scatter.svg | 0 .../assets/images/charts/slope.svg | 0 .../assets/images/charts/sparkline.svg | 0 .../assets/images/charts/stacked-column.svg | 0 .../assets/images/charts/stepped-line.svg | 0 .../assets/images/charts/surplus.svg | 0 .../assets/images/charts/time-column.svg | 0 .../assets/images/charts/time-line.svg | 0 .../assets/images/charts/treemap.svg | 0 .../assets/images/charts/venn.svg | 0 .../assets/images/charts/violin.svg | 0 .../assets/images/charts/waterfall.svg | 0 .../utils/__init__.py | 0 .../utils/_components.py | 0 .../utils/_containers.py | 0 .../utils/_pages.py | 0 vizro-core/pyproject.toml | 2 +- vizro-core/src/vizro/static/css/code.css | 9 +++++++-- vizro-core/src/vizro/static/css/variables.css | 4 ++-- vizro-core/tests/integration/test_examples.py | 2 +- 66 files changed, 11 insertions(+), 6 deletions(-) rename vizro-core/examples/{chart-gallery => _chart-gallery}/README.md (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/app.py (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/css/custom.css (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/favicon.ico (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/app.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/arc.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/bar.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/barcode.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/boxplot.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/bubble-map.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/bubble-timeline.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/bubble.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/bullet.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/butterfly.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/chord.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/choropleth.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/column-line.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/column.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/cumulative-curve.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/distribution-butterfly.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/diverging-bar.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/donut.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/dot-map.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/dot-plot.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/fan.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/flow-map.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/funnel.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/gantt.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/heatmap-matrix.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/heatmap.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/histogram.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/line.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/lollipop.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/magnitude-treemap.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/marimekko.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/network.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/ordered-bar.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/ordered-bubble.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/ordered-column.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/parallel.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/pictogram.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/pie.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/radar.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/radial.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/sankey.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/scatter-matrix.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/scatter.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/slope.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/sparkline.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/stacked-column.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/stepped-line.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/surplus.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/time-column.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/time-line.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/treemap.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/venn.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/violin.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/assets/images/charts/waterfall.svg (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/utils/__init__.py (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/utils/_components.py (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/utils/_containers.py (100%) rename vizro-core/examples/{chart-gallery => _chart-gallery}/utils/_pages.py (100%) diff --git a/vizro-core/examples/chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md similarity index 100% rename from vizro-core/examples/chart-gallery/README.md rename to vizro-core/examples/_chart-gallery/README.md diff --git a/vizro-core/examples/chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py similarity index 100% rename from vizro-core/examples/chart-gallery/app.py rename to vizro-core/examples/_chart-gallery/app.py diff --git a/vizro-core/examples/chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css similarity index 100% rename from vizro-core/examples/chart-gallery/assets/css/custom.css rename to vizro-core/examples/_chart-gallery/assets/css/custom.css diff --git a/vizro-core/examples/chart-gallery/assets/favicon.ico b/vizro-core/examples/_chart-gallery/assets/favicon.ico similarity index 100% rename from vizro-core/examples/chart-gallery/assets/favicon.ico rename to vizro-core/examples/_chart-gallery/assets/favicon.ico diff --git a/vizro-core/examples/chart-gallery/assets/images/app.svg b/vizro-core/examples/_chart-gallery/assets/images/app.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/app.svg rename to vizro-core/examples/_chart-gallery/assets/images/app.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/arc.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/arc.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/arc.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/arc.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/bar.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/bar.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/bar.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/bar.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/barcode.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/barcode.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/barcode.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/barcode.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/boxplot.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/boxplot.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/boxplot.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/boxplot.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/bubble-map.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/bubble-map.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/bubble-map.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/bubble-map.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/bubble-timeline.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/bubble-timeline.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/bubble-timeline.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/bubble-timeline.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/bubble.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/bubble.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/bubble.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/bubble.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/bullet.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/bullet.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/bullet.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/bullet.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/butterfly.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/butterfly.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/butterfly.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/butterfly.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/chord.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/chord.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/chord.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/chord.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/choropleth.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/choropleth.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/choropleth.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/choropleth.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/column-line.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/column-line.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/column-line.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/column-line.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/column.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/column.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/column.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/column.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/cumulative-curve.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/cumulative-curve.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/cumulative-curve.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/cumulative-curve.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/distribution-butterfly.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/distribution-butterfly.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/distribution-butterfly.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/distribution-butterfly.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/diverging-bar.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/diverging-bar.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/diverging-bar.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/diverging-bar.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/donut.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/donut.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/donut.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/donut.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/dot-map.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/dot-map.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/dot-map.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/dot-map.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/dot-plot.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/dot-plot.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/dot-plot.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/dot-plot.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/fan.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/fan.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/fan.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/fan.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/flow-map.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/flow-map.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/flow-map.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/flow-map.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/funnel.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/funnel.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/funnel.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/funnel.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/gantt.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/gantt.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/gantt.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/gantt.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/heatmap-matrix.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/heatmap-matrix.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/heatmap-matrix.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/heatmap-matrix.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/heatmap.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/heatmap.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/heatmap.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/heatmap.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/histogram.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/histogram.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/histogram.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/histogram.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/line.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/line.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/line.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/line.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/lollipop.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/lollipop.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/lollipop.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/lollipop.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/magnitude-treemap.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/magnitude-treemap.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/magnitude-treemap.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/magnitude-treemap.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/marimekko.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/marimekko.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/marimekko.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/marimekko.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/network.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/network.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/network.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/network.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/ordered-bar.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/ordered-bar.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/ordered-bar.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/ordered-bar.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/ordered-bubble.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/ordered-bubble.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/ordered-bubble.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/ordered-bubble.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/ordered-column.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/ordered-column.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/ordered-column.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/ordered-column.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/parallel.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/parallel.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/parallel.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/parallel.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/pictogram.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/pictogram.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/pictogram.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/pictogram.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/pie.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/pie.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/pie.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/pie.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/radar.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/radar.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/radar.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/radar.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/radial.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/radial.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/radial.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/radial.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/sankey.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/sankey.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/sankey.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/sankey.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/scatter-matrix.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/scatter-matrix.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/scatter-matrix.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/scatter-matrix.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/scatter.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/scatter.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/scatter.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/scatter.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/slope.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/slope.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/slope.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/slope.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/sparkline.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/sparkline.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/sparkline.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/sparkline.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/stacked-column.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/stacked-column.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/stacked-column.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/stacked-column.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/stepped-line.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/stepped-line.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/stepped-line.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/stepped-line.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/surplus.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/surplus.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/surplus.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/surplus.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/time-column.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/time-column.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/time-column.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/time-column.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/time-line.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/time-line.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/time-line.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/time-line.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/treemap.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/treemap.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/treemap.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/treemap.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/venn.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/venn.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/venn.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/venn.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/violin.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/violin.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/violin.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/violin.svg diff --git a/vizro-core/examples/chart-gallery/assets/images/charts/waterfall.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/waterfall.svg similarity index 100% rename from vizro-core/examples/chart-gallery/assets/images/charts/waterfall.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/waterfall.svg diff --git a/vizro-core/examples/chart-gallery/utils/__init__.py b/vizro-core/examples/_chart-gallery/utils/__init__.py similarity index 100% rename from vizro-core/examples/chart-gallery/utils/__init__.py rename to vizro-core/examples/_chart-gallery/utils/__init__.py diff --git a/vizro-core/examples/chart-gallery/utils/_components.py b/vizro-core/examples/_chart-gallery/utils/_components.py similarity index 100% rename from vizro-core/examples/chart-gallery/utils/_components.py rename to vizro-core/examples/_chart-gallery/utils/_components.py diff --git a/vizro-core/examples/chart-gallery/utils/_containers.py b/vizro-core/examples/_chart-gallery/utils/_containers.py similarity index 100% rename from vizro-core/examples/chart-gallery/utils/_containers.py rename to vizro-core/examples/_chart-gallery/utils/_containers.py diff --git a/vizro-core/examples/chart-gallery/utils/_pages.py b/vizro-core/examples/_chart-gallery/utils/_pages.py similarity index 100% rename from vizro-core/examples/chart-gallery/utils/_pages.py rename to vizro-core/examples/_chart-gallery/utils/_pages.py diff --git a/vizro-core/pyproject.toml b/vizro-core/pyproject.toml index f8f530887..295bf74bc 100644 --- a/vizro-core/pyproject.toml +++ b/vizro-core/pyproject.toml @@ -83,4 +83,4 @@ filterwarnings = [ "ignore:Custom format string detected." ] norecursedirs = ["tests/tests_utils", "tests/js"] -pythonpath = ["tests/tests_utils", "examples/kpi", "examples/_charts"] +pythonpath = ["tests/tests_utils", "examples/kpi", "examples/_chart-gallery"] diff --git a/vizro-core/src/vizro/static/css/code.css b/vizro-core/src/vizro/static/css/code.css index b81be0dd4..f718b41d6 100644 --- a/vizro-core/src/vizro/static/css/code.css +++ b/vizro-core/src/vizro/static/css/code.css @@ -8,7 +8,9 @@ code.language-python.hljs { font-family: unset; } -.hljs-string, .hljs-params .hljs-string, .hljs-number { +.hljs-string, +.hljs-params .hljs-string, +.hljs-number { color: var(--text-code-string); font-family: unset; } @@ -18,7 +20,10 @@ code.language-python.hljs { font-family: unset; } -.hljs-title.function_, .hljs-meta, .hljs-built_in, .hljs-type { +.hljs-title.function_, +.hljs-meta, +.hljs-built_in, +.hljs-type { color: var(--text-code-meta); font-family: unset; } diff --git a/vizro-core/src/vizro/static/css/variables.css b/vizro-core/src/vizro/static/css/variables.css index d29ef1e9a..36f438035 100644 --- a/vizro-core/src/vizro/static/css/variables.css +++ b/vizro-core/src/vizro/static/css/variables.css @@ -160,6 +160,6 @@ --inverse-color: invert(100%); --text-code-string: #0a3069; --text-code-keyword: #d12d39; - --text-code-meta: #6f42c1; - --text-code-type: #f69d50; + --text-code-meta: #6f42c1; + --text-code-type: #f69d50; } diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py index a89abce4a..c85da3083 100644 --- a/vizro-core/tests/integration/test_examples.py +++ b/vizro-core/tests/integration/test_examples.py @@ -50,7 +50,7 @@ def dashboard(request, monkeypatch): (examples_path / "dev", ""), (examples_path / "dev", "yaml_version"), (examples_path / "kpi", ""), - (examples_path / "chart-gallery", ""), + (examples_path / "_chart-gallery", ""), ], ) def test_dashboard(dash_duo, example_path, dashboard, version): From 1972303593bb51960a31ce9ba908bae266a436fa Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 17 Jul 2024 10:49:51 +0200 Subject: [PATCH 061/109] Reshuffle functions and helpers --- vizro-core/examples/_chart-gallery/app.py | 34 +- .../assets/images/charts/stacked-bar.svg | 27 + .../examples/_chart-gallery/utils/_pages.py | 942 ------------------ .../_chart-gallery/utils/chart_factory.py | 408 ++++++++ .../_chart-gallery/utils/chart_pages.py | 466 +++++++++ .../{_components.py => custom_charts_comp.py} | 52 +- .../examples/_chart-gallery/utils/helper.py | 40 + .../{_containers.py => tab_containers.py} | 38 +- 8 files changed, 1046 insertions(+), 961 deletions(-) create mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/stacked-bar.svg delete mode 100644 vizro-core/examples/_chart-gallery/utils/_pages.py create mode 100644 vizro-core/examples/_chart-gallery/utils/chart_factory.py create mode 100644 vizro-core/examples/_chart-gallery/utils/chart_pages.py rename vizro-core/examples/_chart-gallery/utils/{_components.py => custom_charts_comp.py} (57%) create mode 100644 vizro-core/examples/_chart-gallery/utils/helper.py rename vizro-core/examples/_chart-gallery/utils/{_containers.py => tab_containers.py} (95%) diff --git a/vizro-core/examples/_chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py index 114ebea5f..bef97f7b4 100644 --- a/vizro-core/examples/_chart-gallery/app.py +++ b/vizro-core/examples/_chart-gallery/app.py @@ -1,8 +1,38 @@ """App configuration for chart gallery dashboard.""" import vizro.models as vm -from utils._containers import * -from utils._pages import * +from utils.chart_pages import ( + bar, + boxplot, + butterfly_page, + choropleth, + column, + distribution_butterfly, + donut, + line, + magnitude_treemap, + ordered_bar, + ordered_column, + pie, + sankey_page, + scatter, + time_column, + time_line, + treemap, + violin, +) +from utils.tab_containers import ( + container_all, + container_correlation, + container_deviation, + container_distribution, + container_flow, + container_magnitude, + container_part, + container_ranking, + container_spatial, + container_time, +) from vizro import Vizro homepage = vm.Page( diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/stacked-bar.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/stacked-bar.svg new file mode 100644 index 000000000..432a2e4a6 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/stacked-bar.svg @@ -0,0 +1,27 @@ + + + + Group 6 Copy 25 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/vizro-core/examples/_chart-gallery/utils/_pages.py b/vizro-core/examples/_chart-gallery/utils/_pages.py deleted file mode 100644 index db0e099c5..000000000 --- a/vizro-core/examples/_chart-gallery/utils/_pages.py +++ /dev/null @@ -1,942 +0,0 @@ -"""Contains custom components and charts used inside the dashboard.""" - -import json -from typing import List -from urllib.request import urlopen - -import pandas as pd -import plotly.graph_objects as go -import vizro.models as vm -import vizro.plotly.express as px -from vizro.models.types import capture - -from ._components import CodeClipboard, FlexContainer, Markdown - -with urlopen("https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json") as response: - counties = json.load(response) - - -PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 - -gapminder = px.data.gapminder() -gapminder_2007 = gapminder.query("year == 2007") -iris = px.data.iris() -stocks = px.data.stocks() -tips = px.data.tips() -tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() -ages = pd.DataFrame( - { - "Age": ["0-19", "20-29", "30-39", "40-49", "50-59", ">=60"], - "Male": [800, 2000, 4200, 5000, 2100, 800], - "Female": [1000, 3000, 3500, 3800, 3600, 700], - } -) -fips_unemp = pd.read_csv( - "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", - dtype={"fips": str}, -) - -sankey_data = pd.DataFrame( - { - "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels - "Destination": [1, 2, 3, 4, 5, 5, 6], # indices inside labels - "Value": [10, 4, 8, 6, 4, 8, 8], - } -) - - -vm.Page.add_type("components", CodeClipboard) -vm.Page.add_type("components", FlexContainer) -vm.Container.add_type("components", Markdown) - - -@capture("graph") -def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): - fig = go.Figure() - fig.add_trace( - go.Bar( - x=-data_frame[x1].values, - y=data_frame[y], - orientation="h", - name=x1, - ) - ) - fig.add_trace( - go.Bar( - x=data_frame[x2], - y=data_frame[y], - orientation="h", - name=x2, - ) - ) - fig.update_layout(barmode="relative") - return fig - - -@capture("graph") -def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, labels: List[str]): - fig = go.Figure( - data=[ - go.Sankey( - node=dict( - pad=16, - thickness=16, - label=labels, - ), - link=dict( - source=data_frame[source], - target=data_frame[target], - value=data_frame[value], - label=labels, - color="rgba(205, 209, 228, 0.4)", - ), - ) - ] - ) - fig.update_layout(barmode="relative") - return fig - - -# All functions ending with `_factory` are there to reuse the existing content of a page. Given the restriction that -# one page can only be mapped to one navigation group, we have to create a new page with a new ID. -def line_factory(id: str, title: str): - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a line chart? - - A line chart presents a series of data points over a continuous interval or time period, joined together - with straight lines. - -   - - #### When to use it? - - You should select a line chart when you want to show trends over time. Usually, your y-axis will show a - quantitative value and your x-axis will be marked as a timescale or a sequence of intervals. You can also - display negative values below the x-axis. If you wish to group several lines (different data series) in the - same chart, try to limit yourself to 3-4 to avoid cluttering up your chart. - """ - ), - vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - stocks = px.data.stocks() - - page = vm.Page( - title="Line", - components=[ - vm.Graph( - figure=px.line( - stocks, x="date", y="GOOG" - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) - - -def scatter_factory(id: str, title: str): - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a scatter chart? - - A scatter plot is a two-dimensional data visualization using dots to represent the values obtained for two - different variables - one plotted along the x-axis and the other plotted along the y-axis. - -   - - #### When to use it? - - Use scatter plots when you want to show the relationship between two variables. Scatter plots are sometimes - called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when - you have paired numerical data and you want to see if one variable impacts the other. However, do remember - that correlation is not causation. Make sure your audience does not draw the wrong conclusions. - """ - ), - vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - iris = px.data.iris() - - page = vm.Page( - title="Scatter", - components=[ - vm.Graph( - figure=px.scatter( - iris, - x="sepal_width", - y="sepal_length", - color="species", - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) - - -def bar_factory(id: str, title: str): - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a bar chart? - - A bar chart displays bars in lengths proportional to the values they represent. One axis of - the chart shows the categories to compare and the other axis provides a value scale, - starting with zero. - -   - - #### When to use it? - - Select a bar chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your bars in any order to fit the message you wish to emphasize. Be mindful of labeling - clearly when you have a large number of bars. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. - - """ - ), - vm.Graph( - figure=px.bar( - data_frame=tips_agg, - x="total_bill", - y="day", - orientation="h", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - tips_agg = ( - tips.groupby("day") - .agg({"total_bill": "sum"}) - .sort_values("total_bill") - .reset_index() - ) - - page = vm.Page( - title="Bar", - components=[ - vm.Graph( - figure=px.bar( - data_frame=tips_agg, - x="total_bill", - y="day", - orientation="h", - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) - - -def column_factory(id: str, title: str): - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a column chart? - - A column chart is a vertical bar chart, with column lengths varying according to the - categorical value they represent. The scale is presented on the y-axis, starting with zero. - -   - - #### When to use it? - - Select a column chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your columns in any order to fit the message you wish to emphasize. Be mindful of - labeling clearly when you have a large number of columns. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. - """ - ), - vm.Graph( - figure=px.bar( - data_frame=tips_agg, - y="total_bill", - x="day", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - tips_agg = ( - tips.groupby("day") - .agg({"total_bill": "sum"}) - .sort_values("total_bill") - .reset_index() - ) - - page = vm.Page( - title="Column", - components=[ - vm.Graph( - figure=px.bar( - data_frame=tips_agg, - y="total_bill", - x="day", - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) - - -def treemap_factory(id: str, title: str): - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a treemap? - - A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles sized - proportionately to the quantity they represent, combining together to form larger **parent** - category rectangles. - -   - - #### When to use it? - - It's helpful to use a treemap when you wish to display hierarchical part-to-whole relationships. You can - compare groups and single elements nested within them. Consider using them instead of Pie charts when - you have a higher number of categories. Treemaps are very compact and allow audiences to get a quick - overview of the data. - """ - ), - vm.Graph( - figure=px.treemap( - gapminder_2007, - path=[px.Constant("world"), "continent", "country"], - values="pop", - color="lifeExp", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - gapminder = px.data.gapminder() - gapminder_2007 = gapminder.query("year == 2007") - - page = vm.Page( - title="Treemap", - components=[ - vm.Graph( - figure=px.treemap( - gapminder_2007, - path=[px.Constant("world"), "continent", "country"], - values="pop", - color="lifeExp", - ) - ), - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) - - -def butterfly_factory(id: str, title: str): - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a butterfly chart? - - A butterfly chart (also called a tornado chart) is a bar chart for displaying two sets of data series - side by side. - -   - - #### When to use it? - - Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same - parameters. Sharing this chart with your audience will help them see at a glance how two groups differ - within the same parameters. You can also **stack** two bars on each side if you wish to divide your - categories. - """ - ), - vm.Graph(figure=butterfly(ages, x1="Male", x2="Female", y="Age")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - from vizro import Vizro - import pandas as pd - from vizro.models.types import capture - import plotly.graph_objects as go - - ages = pd.DataFrame( - { - "Age": ["0-19", "20-29", "30-39", "40-49", "50-59", ">=60"], - "Male": [800, 2000, 4200, 5000, 2100, 800], - "Female": [1000, 3000, 3500, 3800, 3600, 700], - } - ) - - - @capture("graph") - def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): - fig = go.Figure() - fig.add_trace( - go.Bar( - x=-data_frame[x1].values, y=data_frame[y], orientation="h", name=x1, - ) - ) - fig.add_trace( - go.Bar(x=data_frame[x2], y=data_frame[y], orientation="h", name=x2,) - ) - fig.update_layout(barmode="relative") - return fig - - - dashboard = vm.Dashboard( - pages=[ - vm.Page( - title="Butterfly", - components=[ - vm.Graph( - figure=butterfly(ages, x1="Male", x2="Female", y="Age") - ) - ], - ) - ] - ) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) - - -# PAGES ------------------------------------------------------------- -line = line_factory("Line", "Line") -time_line = line_factory("Time-Line", "Line") -time_column = column_factory("Time-Column", "Column") -scatter = scatter_factory("Scatter", "Scatter") -bar = bar_factory("Bar", "Bar") -ordered_bar = bar_factory("Ordered Bar", "Ordered Bar") -column = column_factory("Column", "Column") -ordered_column = column_factory("Ordered Column", "Ordered Column") -treemap = treemap_factory("Treemap", "Treemap") -magnitude_treemap = treemap_factory("Magnitude-Treemap", "Treemap") -butterfly_page = butterfly_factory("Butterfly", "Butterfly") -distribution_butterfly = butterfly_factory("Distribution-Butterfly", "Butterfly") - - -pie = vm.Page( - title="Pie", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a pie chart? - - A pie chart is a circular chart divided into segments to show proportions and percentages between - categories. The circle represents the whole. - -   - - #### When to use it? - - Use the pie chart when you need to show your audience a quick view of how data is distributed - proportionately, with percentages highlighted. The different values you present must add up to a total and - equal 100%. - - The downsides are that pie charts tend to occupy more space than other charts, they don`t - work well with more than a few values because labeling small segments is challenging, and it can be - difficult to accurately compare the sizes of the segments. - """ - ), - vm.Graph( - figure=px.pie( - data_frame=tips, - values="tip", - names="day", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Pie", - components=[ - vm.Graph( - figure=px.pie( - data_frame=tips, - values="tip", - names="day", - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - - -donut = vm.Page( - title="Donut", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a donut chart? - - A donut chart looks like a pie chart, but has a blank space in the center which may contain additional - information. - -   - - #### When to use it? - - A donut chart can be used in place of a pie chart, particularly when you are short of space or have extra - information you would like to share about the data. It may also be more effective if you wish your audience - to focus on the length of the arcs of the sections instead of the proportions of the segment sizes. - """ - ), - vm.Graph( - figure=px.pie( - data_frame=tips, - values="tip", - names="day", - hole=0.4, - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Donut", - components=[ - vm.Graph( - figure=px.pie( - data_frame=tips, - values="tip", - names="day", - hole=0.4, - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - - -boxplot = vm.Page( - title="Boxplot", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a boxplot? - - A box plot (also known as whisker plot) provides a visual display of multiple datasets, - indicating the median (center) and the range of the data for each. - -   - - #### When to use it? - - Choose a box plot when you need to summarize distributions between many groups or datasets. It takes up - less space than many other charts. - - Create boxes to display the median, and the upper and lower quartiles. Add `whiskers` to highlight - variability outside the upper and lower quartiles. You can add outliers as dots beyond, but in line with - the whiskers. - """ - ), - vm.Graph( - figure=px.box( - data_frame=tips, - y="total_bill", - x="day", - color="day", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Boxplot", - components=[ - vm.Graph( - figure=px.boxplot( - data_frame=tips, - y="total_bill", - x="day", - color="day", - ) - ), - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - - -violin = vm.Page( - title="Violin", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a violin chart? - - A violin chart is similar to a box plot, but works better for visualizing more complex distributions and - their probability density at different values. - -   - - #### When to use it? - - Use this chart to go beyond the simple box plot and show the distribution shape of the data, the - inter-quartile range, the confidence intervals and the median. - """ - ), - vm.Graph( - figure=px.violin( - data_frame=tips, - y="total_bill", - x="day", - color="day", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Violin", - components=[ - vm.Graph( - figure=px.violin( - data_frame=tips, - y="total_bill", - x="day", - color="day", - ) - ), - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - -choropleth = vm.Page( - title="Choropleth", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - #### What is a choropleth map? - - A choropleth map is a map in which geographical areas are colored, shaded or patterned in relation to a - specific data variable. - -   - - #### When to use it? - - Use a chloropleth map when you wish to show how a measurement varies across a geographic area, or to show - variability or patterns within a region. Typically, you will blend one color into another, take a color - shade from light to dark, or introduce patterns to depict the variation in the data. - - Be aware that it may be difficult for your audience to accurately read or compare values on the map - depicted by color. - - """ - ), - vm.Graph( - figure=px.choropleth( - fips_unemp, - geojson=counties, - locations="fips", - color="unemp", - range_color=(0, 12), - scope="usa", - ) - ), - CodeClipboard( - text=""" - ```python - import json - from urllib.request import urlopen - - import pandas as pd - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - with urlopen( - "https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json" - ) as response: - counties = json.load(response) - - fips_unemp = pd.read_csv( - "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", - dtype={"fips": str}, - ) - - - page = vm.Page( - title="Choropleth", - components=[ - vm.Graph( - figure=px.choropleth( - fips_unemp, - geojson=counties, - locations="fips", - color="unemp", - range_color=(0, 12), - scope="usa", - ) - ), - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - - -sankey_page = vm.Page( - title="Sankey", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - #### What is a sankey chart? - - A Sankey chart is a type of flow diagram that illustrates how resources or values move between different - stages or entities. The width of the arrows in the chart is proportional to the quantity of the flow, - making it easy to see where the largest movements occur. - -   - - #### When to use it? - - Use a Sankey chart when you want to visualize the flow of resources, energy, money, or other values from - one point to another. It is particularly useful for showing distributions and transfers within a system, - such as energy usage, cost breakdowns, or material flows. - - Be mindful that Sankey charts can become cluttered if there are too many nodes or flows. - To maintain clarity, focus on highlighting the most significant flows and keep the chart as simple as - possible. - """ - ), - vm.Graph( - figure=sankey( - data_frame=sankey_data, - labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], - source="Origin", - target="Destination", - value="Value", - ), - ), - CodeClipboard( - text=""" - ```python - import pandas as pd - import plotly.graph_objects as go - import vizro.models as vm - from vizro import Vizro - from vizro.models.types import capture - from typing import List - - sankey_data = pd.DataFrame( - { - "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels - "Destination": [1, 2, 3, 4, 5, 5, 6], # indices inside labels - "Value": [10, 4, 8, 6, 4, 8, 8], - } - ) - - - @capture("graph") - def sankey( - data_frame: pd.DataFrame, - source: str, - target: str, - value: str, - labels: List[str], - ): - fig = go.Figure( - data=[ - go.Sankey( - node=dict(pad=16, thickness=16, label=labels,), - link=dict( - source=data_frame[source], - target=data_frame[target], - value=data_frame[value], - label=labels, - color="rgba(205, 209, 228, 0.4)", - ), - ) - ] - ) - fig.update_layout(barmode="relative") - return fig - - - page = vm.Page( - title="Sankey", - components=[ - vm.Graph( - figure=sankey( - data_frame=sankey_data, - labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], - source="Origin", - target="Destination", - value="Value", - ), - ), - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) diff --git a/vizro-core/examples/_chart-gallery/utils/chart_factory.py b/vizro-core/examples/_chart-gallery/utils/chart_factory.py new file mode 100644 index 000000000..76919b9dd --- /dev/null +++ b/vizro-core/examples/_chart-gallery/utils/chart_factory.py @@ -0,0 +1,408 @@ +"""Contains re-usable page functions. + +Note: Given the restriction that one page can only be mapped to one navigation group, +we have to create a new page with a new ID for each chart type being re-used per navigation group. +""" + +import vizro.models as vm +import vizro.plotly.express as px + +from .custom_charts_comp import CodeClipboard, butterfly +from .helper import PAGE_GRID, ages, gapminder_2007, iris, stocks, tips_agg + + +def line_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a line chart? + + A line chart presents a series of data points over a continuous interval or time period, joined together + with straight lines. + +   + + #### When to use it? + + You should select a line chart when you want to show trends over time. Usually, your y-axis will show a + quantitative value and your x-axis will be marked as a timescale or a sequence of intervals. You can also + display negative values below the x-axis. If you wish to group several lines (different data series) in the + same chart, try to limit yourself to 3-4 to avoid cluttering up your chart. + """ + ), + vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + stocks = px.data.stocks() + + page = vm.Page( + title="Line", + components=[ + vm.Graph( + figure=px.line( + stocks, x="date", y="GOOG" + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], + ) + + +def scatter_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a scatter chart? + + A scatter plot is a two-dimensional data visualization using dots to represent the values obtained for two + different variables - one plotted along the x-axis and the other plotted along the y-axis. + +   + + #### When to use it? + + Use scatter plots when you want to show the relationship between two variables. Scatter plots are sometimes + called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when + you have paired numerical data and you want to see if one variable impacts the other. However, do remember + that correlation is not causation. Make sure your audience does not draw the wrong conclusions. + """ + ), + vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + iris = px.data.iris() + + page = vm.Page( + title="Scatter", + components=[ + vm.Graph( + figure=px.scatter( + iris, + x="sepal_width", + y="sepal_length", + color="species", + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], + ) + + +def bar_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a bar chart? + + A bar chart displays bars in lengths proportional to the values they represent. One axis of + the chart shows the categories to compare and the other axis provides a value scale, + starting with zero. + +   + + #### When to use it? + + Select a bar chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents **how many?** in each category. You can + arrange your bars in any order to fit the message you wish to emphasize. Be mindful of labeling + clearly when you have a large number of bars. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + + """ + ), + vm.Graph( + figure=px.bar( + data_frame=tips_agg, + x="total_bill", + y="day", + orientation="h", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + tips_agg = ( + tips.groupby("day") + .agg({"total_bill": "sum"}) + .sort_values("total_bill") + .reset_index() + ) + + page = vm.Page( + title="Bar", + components=[ + vm.Graph( + figure=px.bar( + data_frame=tips_agg, + x="total_bill", + y="day", + orientation="h", + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], + ) + + +def column_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a column chart? + + A column chart is a vertical bar chart, with column lengths varying according to the + categorical value they represent. The scale is presented on the y-axis, starting with zero. + +   + + #### When to use it? + + Select a column chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents **how many?** in each category. You can + arrange your columns in any order to fit the message you wish to emphasize. Be mindful of + labeling clearly when you have a large number of columns. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + """ + ), + vm.Graph( + figure=px.bar( + data_frame=tips_agg, + y="total_bill", + x="day", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + tips_agg = ( + tips.groupby("day") + .agg({"total_bill": "sum"}) + .sort_values("total_bill") + .reset_index() + ) + + page = vm.Page( + title="Column", + components=[ + vm.Graph( + figure=px.bar( + data_frame=tips_agg, + y="total_bill", + x="day", + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], + ) + + +def treemap_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a treemap? + + A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles sized + proportionately to the quantity they represent, combining together to form larger **parent** + category rectangles. + +   + + #### When to use it? + + It's helpful to use a treemap when you wish to display hierarchical part-to-whole relationships. You can + compare groups and single elements nested within them. Consider using them instead of Pie charts when + you have a higher number of categories. Treemaps are very compact and allow audiences to get a quick + overview of the data. + """ + ), + vm.Graph( + figure=px.treemap( + gapminder_2007, + path=[px.Constant("world"), "continent", "country"], + values="pop", + color="lifeExp", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + gapminder = px.data.gapminder() + gapminder_2007 = gapminder.query("year == 2007") + + page = vm.Page( + title="Treemap", + components=[ + vm.Graph( + figure=px.treemap( + gapminder_2007, + path=[px.Constant("world"), "continent", "country"], + values="pop", + color="lifeExp", + ) + ), + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], + ) + + +def butterfly_factory(id: str, title: str): + return vm.Page( + id=id, + title=title, + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a butterfly chart? + + A butterfly chart (also called a tornado chart) is a bar chart for displaying two sets of data series + side by side. + +   + + #### When to use it? + + Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same + parameters. Sharing this chart with your audience will help them see at a glance how two groups differ + within the same parameters. You can also **stack** two bars on each side if you wish to divide your + categories. + """ + ), + vm.Graph(figure=butterfly(ages, x1="Male", x2="Female", y="Age")), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + from vizro import Vizro + import pandas as pd + from vizro.models.types import capture + import plotly.graph_objects as go + + ages = pd.DataFrame( + { + "Age": ["0-19", "20-29", "30-39", "40-49", "50-59", ">=60"], + "Male": [800, 2000, 4200, 5000, 2100, 800], + "Female": [1000, 3000, 3500, 3800, 3600, 700], + } + ) + + + @capture("graph") + def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): + fig = go.Figure() + fig.add_trace( + go.Bar( + x=-data_frame[x1].values, y=data_frame[y], orientation="h", name=x1, + ) + ) + fig.add_trace( + go.Bar(x=data_frame[x2], y=data_frame[y], orientation="h", name=x2,) + ) + fig.update_layout(barmode="relative") + return fig + + + dashboard = vm.Dashboard( + pages=[ + vm.Page( + title="Butterfly", + components=[ + vm.Graph( + figure=butterfly(ages, x1="Male", x2="Female", y="Age") + ) + ], + ) + ] + ) + Vizro().build(dashboard).run() + ``` + """ + ), + ], + ) diff --git a/vizro-core/examples/_chart-gallery/utils/chart_pages.py b/vizro-core/examples/_chart-gallery/utils/chart_pages.py new file mode 100644 index 000000000..fdcc2709b --- /dev/null +++ b/vizro-core/examples/_chart-gallery/utils/chart_pages.py @@ -0,0 +1,466 @@ +"""Contains custom components and charts used inside the dashboard.""" + +import vizro.models as vm +import vizro.plotly.express as px + +from .chart_factory import ( + bar_factory, + butterfly_factory, + column_factory, + line_factory, + scatter_factory, + treemap_factory, +) +from .custom_charts_comp import CodeClipboard, FlexContainer, Markdown, sankey +from .helper import PAGE_GRID, counties, fips_unemp, sankey_data, tips + +# COMPONENTS -------------------------------------------------------- +vm.Page.add_type("components", CodeClipboard) +vm.Page.add_type("components", FlexContainer) +vm.Container.add_type("components", Markdown) + + +# PAGES ------------------------------------------------------------- +line = line_factory("Line", "Line") +time_line = line_factory("Time-Line", "Line") +time_column = column_factory("Time-Column", "Column") +scatter = scatter_factory("Scatter", "Scatter") +bar = bar_factory("Bar", "Bar") +ordered_bar = bar_factory("Ordered Bar", "Ordered Bar") +column = column_factory("Column", "Column") +ordered_column = column_factory("Ordered Column", "Ordered Column") +treemap = treemap_factory("Treemap", "Treemap") +magnitude_treemap = treemap_factory("Magnitude-Treemap", "Treemap") +butterfly_page = butterfly_factory("Butterfly", "Butterfly") +distribution_butterfly = butterfly_factory("Distribution-Butterfly", "Butterfly") + + +pie = vm.Page( + title="Pie", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a pie chart? + + A pie chart is a circular chart divided into segments to show proportions and percentages between + categories. The circle represents the whole. + +   + + #### When to use it? + + Use the pie chart when you need to show your audience a quick view of how data is distributed + proportionately, with percentages highlighted. The different values you present must add up to a total and + equal 100%. + + The downsides are that pie charts tend to occupy more space than other charts, they don`t + work well with more than a few values because labeling small segments is challenging, and it can be + difficult to accurately compare the sizes of the segments. + """ + ), + vm.Graph( + figure=px.pie( + data_frame=tips, + values="tip", + names="day", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Pie", + components=[ + vm.Graph( + figure=px.pie( + data_frame=tips, + values="tip", + names="day", + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) + + +donut = vm.Page( + title="Donut", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a donut chart? + + A donut chart looks like a pie chart, but has a blank space in the center which may contain additional + information. + +   + + #### When to use it? + + A donut chart can be used in place of a pie chart, particularly when you are short of space or have extra + information you would like to share about the data. It may also be more effective if you wish your audience + to focus on the length of the arcs of the sections instead of the proportions of the segment sizes. + """ + ), + vm.Graph( + figure=px.pie( + data_frame=tips, + values="tip", + names="day", + hole=0.4, + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Donut", + components=[ + vm.Graph( + figure=px.pie( + data_frame=tips, + values="tip", + names="day", + hole=0.4, + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) + + +boxplot = vm.Page( + title="Boxplot", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a boxplot? + + A box plot (also known as whisker plot) provides a visual display of multiple datasets, + indicating the median (center) and the range of the data for each. + +   + + #### When to use it? + + Choose a box plot when you need to summarize distributions between many groups or datasets. It takes up + less space than many other charts. + + Create boxes to display the median, and the upper and lower quartiles. Add `whiskers` to highlight + variability outside the upper and lower quartiles. You can add outliers as dots beyond, but in line with + the whiskers. + """ + ), + vm.Graph( + figure=px.box( + data_frame=tips, + y="total_bill", + x="day", + color="day", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Boxplot", + components=[ + vm.Graph( + figure=px.boxplot( + data_frame=tips, + y="total_bill", + x="day", + color="day", + ) + ), + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) + + +violin = vm.Page( + title="Violin", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a violin chart? + + A violin chart is similar to a box plot, but works better for visualizing more complex distributions and + their probability density at different values. + +   + + #### When to use it? + + Use this chart to go beyond the simple box plot and show the distribution shape of the data, the + inter-quartile range, the confidence intervals and the median. + """ + ), + vm.Graph( + figure=px.violin( + data_frame=tips, + y="total_bill", + x="day", + color="day", + ) + ), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + tips = px.data.tips() + + page = vm.Page( + title="Violin", + components=[ + vm.Graph( + figure=px.violin( + data_frame=tips, + y="total_bill", + x="day", + color="day", + ) + ), + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) + +choropleth = vm.Page( + title="Choropleth", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + #### What is a choropleth map? + + A choropleth map is a map in which geographical areas are colored, shaded or patterned in relation to a + specific data variable. + +   + + #### When to use it? + + Use a chloropleth map when you wish to show how a measurement varies across a geographic area, or to show + variability or patterns within a region. Typically, you will blend one color into another, take a color + shade from light to dark, or introduce patterns to depict the variation in the data. + + Be aware that it may be difficult for your audience to accurately read or compare values on the map + depicted by color. + + """ + ), + vm.Graph( + figure=px.choropleth( + fips_unemp, + geojson=counties, + locations="fips", + color="unemp", + range_color=(0, 12), + scope="usa", + ) + ), + CodeClipboard( + text=""" + ```python + import json + from urllib.request import urlopen + + import pandas as pd + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + with urlopen( + "https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json" + ) as response: + counties = json.load(response) + + fips_unemp = pd.read_csv( + "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", + dtype={"fips": str}, + ) + + + page = vm.Page( + title="Choropleth", + components=[ + vm.Graph( + figure=px.choropleth( + fips_unemp, + geojson=counties, + locations="fips", + color="unemp", + range_color=(0, 12), + scope="usa", + ) + ), + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) + + +sankey_page = vm.Page( + title="Sankey", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + #### What is a sankey chart? + + A Sankey chart is a type of flow diagram that illustrates how resources or values move between different + stages or entities. The width of the arrows in the chart is proportional to the quantity of the flow, + making it easy to see where the largest movements occur. + +   + + #### When to use it? + + Use a Sankey chart when you want to visualize the flow of resources, energy, money, or other values from + one point to another. It is particularly useful for showing distributions and transfers within a system, + such as energy usage, cost breakdowns, or material flows. + + Be mindful that Sankey charts can become cluttered if there are too many nodes or flows. + To maintain clarity, focus on highlighting the most significant flows and keep the chart as simple as + possible. + """ + ), + vm.Graph( + figure=sankey( + data_frame=sankey_data, + labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], + source="Origin", + target="Destination", + value="Value", + ), + ), + CodeClipboard( + text=""" + ```python + import pandas as pd + import plotly.graph_objects as go + import vizro.models as vm + from vizro import Vizro + from vizro.models.types import capture + from typing import List + + sankey_data = pd.DataFrame( + { + "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels + "Destination": [1, 2, 3, 4, 5, 5, 6], # indices inside labels + "Value": [10, 4, 8, 6, 4, 8, 8], + } + ) + + + @capture("graph") + def sankey( + data_frame: pd.DataFrame, + source: str, + target: str, + value: str, + labels: List[str], + ): + fig = go.Figure( + data=[ + go.Sankey( + node=dict(pad=16, thickness=16, label=labels,), + link=dict( + source=data_frame[source], + target=data_frame[target], + value=data_frame[value], + label=labels, + color="rgba(205, 209, 228, 0.4)", + ), + ) + ] + ) + fig.update_layout(barmode="relative") + return fig + + + page = vm.Page( + title="Sankey", + components=[ + vm.Graph( + figure=sankey( + data_frame=sankey_data, + labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], + source="Origin", + target="Destination", + value="Value", + ), + ), + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) diff --git a/vizro-core/examples/_chart-gallery/utils/_components.py b/vizro-core/examples/_chart-gallery/utils/custom_charts_comp.py similarity index 57% rename from vizro-core/examples/_chart-gallery/utils/_components.py rename to vizro-core/examples/_chart-gallery/utils/custom_charts_comp.py index 6989dcc4d..0e36a2077 100644 --- a/vizro-core/examples/_chart-gallery/utils/_components.py +++ b/vizro-core/examples/_chart-gallery/utils/custom_charts_comp.py @@ -1,10 +1,13 @@ """Contains custom components and charts used inside the dashboard.""" -from typing import Literal +from typing import Literal, List import dash_bootstrap_components as dbc +import pandas as pd +import plotly.graph_objects as go import vizro.models as vm from dash import dcc, html +from vizro.models.types import capture try: from pydantic.v1 import Field @@ -59,3 +62,50 @@ def build(self): return html.Div( id=self.id, children=[component.build() for component in self.components], className="flex-container" ) + + +@capture("graph") +def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): + fig = go.Figure() + fig.add_trace( + go.Bar( + x=-data_frame[x1].values, + y=data_frame[y], + orientation="h", + name=x1, + ) + ) + fig.add_trace( + go.Bar( + x=data_frame[x2], + y=data_frame[y], + orientation="h", + name=x2, + ) + ) + fig.update_layout(barmode="relative") + return fig + + +@capture("graph") +def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, labels: List[str]): + fig = go.Figure( + data=[ + go.Sankey( + node=dict( + pad=16, + thickness=16, + label=labels, + ), + link=dict( + source=data_frame[source], + target=data_frame[target], + value=data_frame[value], + label=labels, + color="rgba(205, 209, 228, 0.4)", + ), + ) + ] + ) + fig.update_layout(barmode="relative") + return fig diff --git a/vizro-core/examples/_chart-gallery/utils/helper.py b/vizro-core/examples/_chart-gallery/utils/helper.py new file mode 100644 index 000000000..0308842bc --- /dev/null +++ b/vizro-core/examples/_chart-gallery/utils/helper.py @@ -0,0 +1,40 @@ +"""Contains re-usable constants, data sets and custom charts.""" + +import json +from urllib.request import urlopen + +import pandas as pd +import vizro.plotly.express as px + +# DATA -------------------------------------------------------------- +with urlopen("https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json") as response: + counties = json.load(response) + +gapminder = px.data.gapminder() +gapminder_2007 = gapminder.query("year == 2007") +iris = px.data.iris() +stocks = px.data.stocks() +tips = px.data.tips() +tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() +ages = pd.DataFrame( + { + "Age": ["0-19", "20-29", "30-39", "40-49", "50-59", ">=60"], + "Male": [800, 2000, 4200, 5000, 2100, 800], + "Female": [1000, 3000, 3500, 3800, 3600, 700], + } +) +fips_unemp = pd.read_csv( + "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", + dtype={"fips": str}, +) + +sankey_data = pd.DataFrame( + { + "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels + "Destination": [1, 2, 3, 4, 5, 5, 6], # indices inside labels + "Value": [10, 4, 8, 6, 4, 8, 8], + } +) + +# CONSTANTS --------------------------------------------------------- +PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 diff --git a/vizro-core/examples/_chart-gallery/utils/_containers.py b/vizro-core/examples/_chart-gallery/utils/tab_containers.py similarity index 95% rename from vizro-core/examples/_chart-gallery/utils/_containers.py rename to vizro-core/examples/_chart-gallery/utils/tab_containers.py index 54573d65a..080c86d2d 100644 --- a/vizro-core/examples/_chart-gallery/utils/_containers.py +++ b/vizro-core/examples/_chart-gallery/utils/tab_containers.py @@ -3,22 +3,29 @@ import re import vizro.models as vm -import vizro.plotly.express as px -from ._components import CodeClipboard, FlexContainer, Markdown +from .custom_charts_comp import FlexContainer, Markdown -gapminder = px.data.gapminder() -vm.Page.add_type("components", CodeClipboard) -vm.Page.add_type("components", FlexContainer) vm.Container.add_type("components", Markdown) vm.Container.add_type("components", FlexContainer) def tidy_chart_title(chart: str) -> str: """Tidy up the chart title by removing prefixes and unwanted characters. - The pre-fixes are previously given to uniquely create a page ID. + + Note: The pre-fixes are previously given to uniquely create a page ID. """ - prefixes_to_remove = ["time-", "magnitude-", "deviation-", "distribution-"] + prefixes_to_remove = [ + "time-", + "magnitude-", + "deviation-", + "distribution-", + "correlation-", + "ranking-", + "flow-", + "spatial-", + "part-", + ] pattern = "^(" + "|".join(prefixes_to_remove) + ")" chart_without_prefix = re.sub(pattern, "", chart) return chart_without_prefix.replace("-", " ").title() @@ -27,7 +34,7 @@ def tidy_chart_title(chart: str) -> str: DEVIATION_CHARTS = sorted( [ "diverging-bar", - # "diverging-stacked-bar", + # "diverging-stacked-bar", "butterfly", "surplus", ] @@ -36,7 +43,7 @@ def tidy_chart_title(chart: str) -> str: "scatter", "scatter-matrix", "column-line", - # "connected-scatter", + # "connected-scatter", "heatmap-matrix", "bubble", ] @@ -59,16 +66,15 @@ def tidy_chart_title(chart: str) -> str: "violin", "distribution-butterfly", "cumulative-curve", - # "beeswarm", + # "beeswarm", ] ) - MAGNITUDE_CHARTS = sorted( [ "column", "bar", - # "paired-column", - # "paired-bar", + # "paired-column", + # "paired-bar", "marimekko", "bubble", "lollipop", @@ -87,8 +93,8 @@ def tidy_chart_title(chart: str) -> str: "column-line", "slope", "fan", - # "area", - # "connected-scatter", + # "area", + # "connected-scatter", "heatmap", "bubble-timeline", "sparkline", @@ -96,7 +102,7 @@ def tidy_chart_title(chart: str) -> str: ) PART_TO_WHOLE_CHARTS = sorted( [ - # "stacked-bar", + "stacked-bar", "stacked-column", "marimekko", "funnel", From 9733b799206ea500c8ef41a9d7427e266227601a Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 17 Jul 2024 11:09:53 +0200 Subject: [PATCH 062/109] Lint --- .../assets/{images => }/app.svg | 0 .../utils/{helper.py => _page_utils.py} | 14 +++++++++++-- .../_chart-gallery/utils/chart_factory.py | 20 +++++++++---------- .../_chart-gallery/utils/chart_pages.py | 20 +++++++++---------- ...om_charts_comp.py => custom_extensions.py} | 2 +- .../_chart-gallery/utils/tab_containers.py | 4 ++-- 6 files changed, 35 insertions(+), 25 deletions(-) rename vizro-core/examples/_chart-gallery/assets/{images => }/app.svg (100%) rename vizro-core/examples/_chart-gallery/utils/{helper.py => _page_utils.py} (80%) rename vizro-core/examples/_chart-gallery/utils/{custom_charts_comp.py => custom_extensions.py} (98%) diff --git a/vizro-core/examples/_chart-gallery/assets/images/app.svg b/vizro-core/examples/_chart-gallery/assets/app.svg similarity index 100% rename from vizro-core/examples/_chart-gallery/assets/images/app.svg rename to vizro-core/examples/_chart-gallery/assets/app.svg diff --git a/vizro-core/examples/_chart-gallery/utils/helper.py b/vizro-core/examples/_chart-gallery/utils/_page_utils.py similarity index 80% rename from vizro-core/examples/_chart-gallery/utils/helper.py rename to vizro-core/examples/_chart-gallery/utils/_page_utils.py index 0308842bc..4adaa626d 100644 --- a/vizro-core/examples/_chart-gallery/utils/helper.py +++ b/vizro-core/examples/_chart-gallery/utils/_page_utils.py @@ -1,4 +1,4 @@ -"""Contains re-usable constants, data sets and custom charts.""" +"""Contains re-usable data sets and constants.""" import json from urllib.request import urlopen @@ -36,5 +36,15 @@ } ) -# CONSTANTS --------------------------------------------------------- +DATA_DICT = { + "gapminder": gapminder, + "gapminder_2007": gapminder_2007, + "iris": iris, + "stocks": stocks, + "tips": tips, + "tips_agg": tips_agg, + "ages": ages, + "fips_unemp": fips_unemp, + "sankey_data": sankey_data, +} PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 diff --git a/vizro-core/examples/_chart-gallery/utils/chart_factory.py b/vizro-core/examples/_chart-gallery/utils/chart_factory.py index 76919b9dd..415f08a06 100644 --- a/vizro-core/examples/_chart-gallery/utils/chart_factory.py +++ b/vizro-core/examples/_chart-gallery/utils/chart_factory.py @@ -1,14 +1,14 @@ -"""Contains re-usable page functions. +"""Contains re-usable page functions to create identical content with a different `id`. -Note: Given the restriction that one page can only be mapped to one navigation group, -we have to create a new page with a new ID for each chart type being re-used per navigation group. +Note: Since each page can only belong to one navigation group, we need a new page with a unique ID for +each chart type used in different groups. """ import vizro.models as vm import vizro.plotly.express as px -from .custom_charts_comp import CodeClipboard, butterfly -from .helper import PAGE_GRID, ages, gapminder_2007, iris, stocks, tips_agg +from ._page_utils import DATA_DICT, PAGE_GRID +from .custom_extensions import CodeClipboard, butterfly def line_factory(id: str, title: str): @@ -35,7 +35,7 @@ def line_factory(id: str, title: str): same chart, try to limit yourself to 3-4 to avoid cluttering up your chart. """ ), - vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), + vm.Graph(figure=px.line(DATA_DICT["stocks"], x="date", y="GOOG")), CodeClipboard( text=""" ```python @@ -89,7 +89,7 @@ def scatter_factory(id: str, title: str): that correlation is not causation. Make sure your audience does not draw the wrong conclusions. """ ), - vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), + vm.Graph(figure=px.scatter(DATA_DICT["iris"], x="sepal_width", y="sepal_length", color="species")), CodeClipboard( text=""" ```python @@ -151,7 +151,7 @@ def bar_factory(id: str, title: str): ), vm.Graph( figure=px.bar( - data_frame=tips_agg, + data_frame=DATA_DICT["tips_agg"], x="total_bill", y="day", orientation="h", @@ -222,7 +222,7 @@ def column_factory(id: str, title: str): ), vm.Graph( figure=px.bar( - data_frame=tips_agg, + data_frame=DATA_DICT["tips_agg"], y="total_bill", x="day", ) @@ -291,7 +291,7 @@ def treemap_factory(id: str, title: str): ), vm.Graph( figure=px.treemap( - gapminder_2007, + DATA_DICT["gapminder_2007"], path=[px.Constant("world"), "continent", "country"], values="pop", color="lifeExp", diff --git a/vizro-core/examples/_chart-gallery/utils/chart_pages.py b/vizro-core/examples/_chart-gallery/utils/chart_pages.py index fdcc2709b..d1690fbe9 100644 --- a/vizro-core/examples/_chart-gallery/utils/chart_pages.py +++ b/vizro-core/examples/_chart-gallery/utils/chart_pages.py @@ -1,8 +1,9 @@ -"""Contains custom components and charts used inside the dashboard.""" +"""Contains variables that store each chart page.""" import vizro.models as vm import vizro.plotly.express as px +from ._page_utils import DATA_DICT, PAGE_GRID from .chart_factory import ( bar_factory, butterfly_factory, @@ -11,8 +12,7 @@ scatter_factory, treemap_factory, ) -from .custom_charts_comp import CodeClipboard, FlexContainer, Markdown, sankey -from .helper import PAGE_GRID, counties, fips_unemp, sankey_data, tips +from .custom_extensions import CodeClipboard, FlexContainer, Markdown, sankey # COMPONENTS -------------------------------------------------------- vm.Page.add_type("components", CodeClipboard) @@ -62,7 +62,7 @@ ), vm.Graph( figure=px.pie( - data_frame=tips, + data_frame=DATA_DICT["tips"], values="tip", names="day", ) @@ -121,7 +121,7 @@ ), vm.Graph( figure=px.pie( - data_frame=tips, + data_frame=DATA_DICT["tips"], values="tip", names="day", hole=0.4, @@ -185,7 +185,7 @@ ), vm.Graph( figure=px.box( - data_frame=tips, + data_frame=DATA_DICT["tips"], y="total_bill", x="day", color="day", @@ -245,7 +245,7 @@ ), vm.Graph( figure=px.violin( - data_frame=tips, + data_frame=DATA_DICT["tips"], y="total_bill", x="day", color="day", @@ -308,8 +308,8 @@ ), vm.Graph( figure=px.choropleth( - fips_unemp, - geojson=counties, + DATA_DICT["fips_unemp"], + geojson=DATA_DICT["counties"], locations="fips", color="unemp", range_color=(0, 12), @@ -390,7 +390,7 @@ ), vm.Graph( figure=sankey( - data_frame=sankey_data, + data_frame=DATA_DICT["sankey_data"], labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], source="Origin", target="Destination", diff --git a/vizro-core/examples/_chart-gallery/utils/custom_charts_comp.py b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py similarity index 98% rename from vizro-core/examples/_chart-gallery/utils/custom_charts_comp.py rename to vizro-core/examples/_chart-gallery/utils/custom_extensions.py index 0e36a2077..0de0f2602 100644 --- a/vizro-core/examples/_chart-gallery/utils/custom_charts_comp.py +++ b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py @@ -1,6 +1,6 @@ """Contains custom components and charts used inside the dashboard.""" -from typing import Literal, List +from typing import List, Literal import dash_bootstrap_components as dbc import pandas as pd diff --git a/vizro-core/examples/_chart-gallery/utils/tab_containers.py b/vizro-core/examples/_chart-gallery/utils/tab_containers.py index 080c86d2d..15e7364a1 100644 --- a/vizro-core/examples/_chart-gallery/utils/tab_containers.py +++ b/vizro-core/examples/_chart-gallery/utils/tab_containers.py @@ -1,10 +1,10 @@ -"""Contains custom components and charts used inside the dashboard.""" +"""Contains code for the containers used inside the tabs (homepage).""" import re import vizro.models as vm -from .custom_charts_comp import FlexContainer, Markdown +from .custom_extensions import FlexContainer, Markdown vm.Container.add_type("components", Markdown) vm.Container.add_type("components", FlexContainer) From 2eaf143a6dd9565549da2130de58090e8876bb75 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 17 Jul 2024 11:21:30 +0200 Subject: [PATCH 063/109] Lint some moreLint --- .../examples/_chart-gallery/utils/_page_utils.py | 7 ++----- .../examples/_chart-gallery/utils/chart_factory.py | 10 ++++++++-- .../_chart-gallery/utils/custom_extensions.py | 13 +++++++++---- vizro-core/examples/scratch_dev/app.py | 7 ++++--- 4 files changed, 23 insertions(+), 14 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/utils/_page_utils.py b/vizro-core/examples/_chart-gallery/utils/_page_utils.py index 4adaa626d..3fa090806 100644 --- a/vizro-core/examples/_chart-gallery/utils/_page_utils.py +++ b/vizro-core/examples/_chart-gallery/utils/_page_utils.py @@ -1,15 +1,12 @@ -"""Contains re-usable data sets and constants.""" +"""Contains reusable data sets and constants.""" import json -from urllib.request import urlopen import pandas as pd import vizro.plotly.express as px # DATA -------------------------------------------------------------- -with urlopen("https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json") as response: - counties = json.load(response) - +counties = json.load("https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json") gapminder = px.data.gapminder() gapminder_2007 = gapminder.query("year == 2007") iris = px.data.iris() diff --git a/vizro-core/examples/_chart-gallery/utils/chart_factory.py b/vizro-core/examples/_chart-gallery/utils/chart_factory.py index 415f08a06..7565ec538 100644 --- a/vizro-core/examples/_chart-gallery/utils/chart_factory.py +++ b/vizro-core/examples/_chart-gallery/utils/chart_factory.py @@ -1,4 +1,4 @@ -"""Contains re-usable page functions to create identical content with a different `id`. +"""Contains reusable page functions to create identical content with a different `id`. Note: Since each page can only belong to one navigation group, we need a new page with a unique ID for each chart type used in different groups. @@ -12,6 +12,7 @@ def line_factory(id: str, title: str): + """Reusable function to create the page content for the line chart with a unique ID.""" return vm.Page( id=id, title=title, @@ -66,6 +67,7 @@ def line_factory(id: str, title: str): def scatter_factory(id: str, title: str): + """Reusable function to create the page content for the scatter chart with a unique ID.""" return vm.Page( id=id, title=title, @@ -123,6 +125,7 @@ def scatter_factory(id: str, title: str): def bar_factory(id: str, title: str): + """Reusable function to create the page content for the bar chart with a unique ID.""" return vm.Page( id=id, title=title, @@ -196,6 +199,7 @@ def bar_factory(id: str, title: str): def column_factory(id: str, title: str): + """Reusable function to create the page content for the column chart with a unique ID.""" return vm.Page( id=id, title=title, @@ -265,6 +269,7 @@ def column_factory(id: str, title: str): def treemap_factory(id: str, title: str): + """Reusable function to create the page content for the treemap chart with a unique ID.""" return vm.Page( id=id, title=title, @@ -331,6 +336,7 @@ def treemap_factory(id: str, title: str): def butterfly_factory(id: str, title: str): + """Reusable function to create the page content for the butterfly chart with a unique ID.""" return vm.Page( id=id, title=title, @@ -354,7 +360,7 @@ def butterfly_factory(id: str, title: str): categories. """ ), - vm.Graph(figure=butterfly(ages, x1="Male", x2="Female", y="Age")), + vm.Graph(figure=butterfly(DATA_DICT["ages"], x1="Male", x2="Female", y="Age")), CodeClipboard( text=""" ```python diff --git a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py index 0de0f2602..4f7890a74 100644 --- a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py +++ b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py @@ -23,6 +23,7 @@ class CodeClipboard(vm.VizroBaseModel): text: str def build(self): + """Returns the code clipboard component inside an accordion.""" return dbc.Accordion( [ dbc.AccordionItem( @@ -50,6 +51,7 @@ class Markdown(vm.VizroBaseModel): classname: str = "" def build(self): + """Returns a markdown component with an optional classname.""" return dcc.Markdown(id=self.id, children=self.text, dangerously_allow_html=False, className=self.classname) @@ -59,13 +61,15 @@ class FlexContainer(vm.Container): type: Literal["flex_container"] = "flex_container" def build(self): + """Returns a flex container.""" return html.Div( id=self.id, children=[component.build() for component in self.components], className="flex-container" ) @capture("graph") -def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): +def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str) -> go.Figure: + """Creates a custom butterfly chart based on a go.Figure.""" fig = go.Figure() fig.add_trace( go.Bar( @@ -88,16 +92,17 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): @capture("graph") -def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, labels: List[str]): +def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, labels: List[str]) -> go.Figure: + """Creates a custom sankey chart based on a go.Figure.""" fig = go.Figure( data=[ go.Sankey( - node=dict( + node=dict( # noqa: C408 pad=16, thickness=16, label=labels, ), - link=dict( + link=dict( # noqa: C408 source=data_frame[source], target=data_frame[target], value=data_frame[value], diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py index 7f5c16470..a2f815983 100644 --- a/vizro-core/examples/scratch_dev/app.py +++ b/vizro-core/examples/scratch_dev/app.py @@ -24,16 +24,17 @@ def sankey( target: str, value: str, labels: List[str], -): +) -> go.Figure: + """Creates a sankey diagram based on a go.Figure.""" fig = go.Figure( data=[ go.Sankey( - node=dict( + node=dict( # noqa: C408 pad=16, thickness=16, label=labels, ), - link=dict( + link=dict( # noqa: C408 source=data_frame[source], target=data_frame[target], value=data_frame[value], From 4704719b6360485c844e9009885c5ee634245511 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 17 Jul 2024 11:39:58 +0200 Subject: [PATCH 064/109] Add license and credits --- .../examples/_chart-gallery/LICENSE.txt | 21 +++++++++++++++++++ vizro-core/examples/_chart-gallery/README.md | 6 +++++- 2 files changed, 26 insertions(+), 1 deletion(-) create mode 100644 vizro-core/examples/_chart-gallery/LICENSE.txt diff --git a/vizro-core/examples/_chart-gallery/LICENSE.txt b/vizro-core/examples/_chart-gallery/LICENSE.txt new file mode 100644 index 000000000..423838800 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/LICENSE.txt @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 FT Interactive News + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index e8f3ff1c2..904114c91 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/vizro-core/examples/_chart-gallery/README.md @@ -3,7 +3,11 @@ This demo dashboard provides a gallery of charts. It includes guidance on when to use each chart type and sample code to create them using Plotly and Vizro. +Inspired by the [FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md): +FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, Martin Stabe + ## How to run the example locally -1. If you have `hatch` set up, run the example with the command `hatch run example charts`. Otherwise, run the `app.py` file with your environment activated where `vizro` is installed. +1. If you have `hatch` set up, run the example with the command `hatch run example charts`. +Otherwise, run the `app.py` file with your environment activated where `vizro` is installed. 2. You should now be able to access the app locally via http://127.0.0.1:8050/. From a72069758f99534f53881af3efac8e296c537b97 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 17 Jul 2024 11:56:21 +0200 Subject: [PATCH 065/109] Update README --- vizro-core/examples/_chart-gallery/README.md | 58 ++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index 904114c91..1f2a4ca08 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/vizro-core/examples/_chart-gallery/README.md @@ -6,6 +6,64 @@ to create them using Plotly and Vizro. Inspired by the [FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md): FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, Martin Stabe + +## Chart types +The dashboard is still in development. Below is an overview of the chart types for which a completed page is available. + +| Chart Type | Status | Category | +|----------------------|---------|---------------------------| +| Arc | ❌ | Part-to-whole | +| Barcode | ❌ | Distribution | +| Bar | ✅ | Magnitude | +| Boxplot | ✅ | Distribution | +| Bubble | ❌ | Correlation, Magnitude | +| Bubble Map | ❌ | Spatial | +| Bubble Timeline | ❌ | Time | +| Bullet | ❌ | Magnitude | +| Butterfly | ✅ | Deviation, Distribution | +| Chord | ❌ | Flow | +| Choropleth | ✅ | Spatial | +| Column | ✅ | Magnitude, Time | +| Column-Line | ❌ | Correlation, Time | +| Cumulative Curve | ❌ | Distribution | +| Diverging Bar | ❌ | Deviation | +| Dot Map | ❌ | Spatial | +| Dot Plot | ❌ | Distribution | +| Donut | ✅ | Part-to-whole | +| Fan | ❌ | Time | +| Flow Map | ❌ | Spatial | +| Funnel | ❌ | Part-to-whole | +| Gantt | ❌ | Time | +| Heatmap | ❌ | Time | +| Heatmap-Matrix | ❌ | Correlation | +| Histogram | ❌ | Distribution | +| Line | ❌ | Time | +| Lollipop | ❌ | Ranking, Magnitude | +| Marimekko | ❌ | Magnitude, Part-to-whole | +| Ordered Bar | ✅ | Ranking | +| Ordered Bubble | ❌ | Ranking | +| Ordered Column | ✅ | Ranking | +| Parallel Coordinates | ❌ | Magnitude | +| Pictogram | ❌ | Magnitude | +| Pie | ✅ | Part-to-whole | +| Radar | ❌ | Magnitude | +| Radial | ❌ | Magnitude | +| Sankey | ✅ | Flow | +| Scatter | ✅ | Correlation | +| Scatter Matrix | ❌ | Correlation | +| Slope | ❌ | Ranking, Time | +| Sparkline | ❌ | Time | +| Stacked Bar | ❌ | Part-to-whole | +| Stacked Column | ❌ | Part-to-whole | +| Stepped Line | ❌ | Ranking | +| Surplus-Deficit-Line | ❌ | Deviation | +| Treemap | ✅ | Part-to-whole | +| Venn | ❌ | Part-to-whole | +| Violin | ✅ | Distribution | +| Waterfall | ❌ | Part-to-whole, Flow | + + + ## How to run the example locally 1. If you have `hatch` set up, run the example with the command `hatch run example charts`. From 5a0e5f43436e3a3dea896742251590d9ef1e8e72 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 17 Jul 2024 11:56:33 +0200 Subject: [PATCH 066/109] Remove factory function for line --- vizro-core/examples/_chart-gallery/app.py | 4 +- .../assets/images/charts/time-line.svg | 17 ------ .../_chart-gallery/utils/chart_factory.py | 55 ------------------- .../_chart-gallery/utils/chart_pages.py | 54 +++++++++++++++++- 4 files changed, 52 insertions(+), 78 deletions(-) delete mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/time-line.svg diff --git a/vizro-core/examples/_chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py index bef97f7b4..0099de850 100644 --- a/vizro-core/examples/_chart-gallery/app.py +++ b/vizro-core/examples/_chart-gallery/app.py @@ -17,7 +17,6 @@ sankey_page, scatter, time_column, - time_line, treemap, violin, ) @@ -69,7 +68,6 @@ violin, ordered_bar, ordered_column, - time_line, time_column, treemap, magnitude_treemap, @@ -109,7 +107,7 @@ ), vm.NavLink( label="Time", - pages={"Time": ["Time-Line", "Time-Column"]}, + pages={"Time": ["Line", "Time-Column"]}, icon="Timeline", ), vm.NavLink( diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/time-line.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/time-line.svg deleted file mode 100644 index e6a042d24..000000000 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/time-line.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - Group 6 Copy 19 - Created with Sketch. - - - - - - - - - - - - diff --git a/vizro-core/examples/_chart-gallery/utils/chart_factory.py b/vizro-core/examples/_chart-gallery/utils/chart_factory.py index 7565ec538..a2e833208 100644 --- a/vizro-core/examples/_chart-gallery/utils/chart_factory.py +++ b/vizro-core/examples/_chart-gallery/utils/chart_factory.py @@ -11,61 +11,6 @@ from .custom_extensions import CodeClipboard, butterfly -def line_factory(id: str, title: str): - """Reusable function to create the page content for the line chart with a unique ID.""" - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a line chart? - - A line chart presents a series of data points over a continuous interval or time period, joined together - with straight lines. - -   - - #### When to use it? - - You should select a line chart when you want to show trends over time. Usually, your y-axis will show a - quantitative value and your x-axis will be marked as a timescale or a sequence of intervals. You can also - display negative values below the x-axis. If you wish to group several lines (different data series) in the - same chart, try to limit yourself to 3-4 to avoid cluttering up your chart. - """ - ), - vm.Graph(figure=px.line(DATA_DICT["stocks"], x="date", y="GOOG")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - stocks = px.data.stocks() - - page = vm.Page( - title="Line", - components=[ - vm.Graph( - figure=px.line( - stocks, x="date", y="GOOG" - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) - - def scatter_factory(id: str, title: str): """Reusable function to create the page content for the scatter chart with a unique ID.""" return vm.Page( diff --git a/vizro-core/examples/_chart-gallery/utils/chart_pages.py b/vizro-core/examples/_chart-gallery/utils/chart_pages.py index d1690fbe9..6981d22e0 100644 --- a/vizro-core/examples/_chart-gallery/utils/chart_pages.py +++ b/vizro-core/examples/_chart-gallery/utils/chart_pages.py @@ -8,7 +8,6 @@ bar_factory, butterfly_factory, column_factory, - line_factory, scatter_factory, treemap_factory, ) @@ -21,8 +20,6 @@ # PAGES ------------------------------------------------------------- -line = line_factory("Line", "Line") -time_line = line_factory("Time-Line", "Line") time_column = column_factory("Time-Column", "Column") scatter = scatter_factory("Scatter", "Scatter") bar = bar_factory("Bar", "Bar") @@ -35,6 +32,57 @@ distribution_butterfly = butterfly_factory("Distribution-Butterfly", "Butterfly") +line = vm.Page( + title="Line", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a line chart? + + A line chart presents a series of data points over a continuous interval or time period, joined together + with straight lines. + +   + + #### When to use it? + + You should select a line chart when you want to show trends over time. Usually, your y-axis will show a + quantitative value and your x-axis will be marked as a timescale or a sequence of intervals. You can also + display negative values below the x-axis. If you wish to group several lines (different data series) in the + same chart, try to limit yourself to 3-4 to avoid cluttering up your chart. + """ + ), + vm.Graph(figure=px.line(DATA_DICT["stocks"], x="date", y="GOOG")), + CodeClipboard( + text=""" + ```python + import vizro.models as vm + import vizro.plotly.express as px + from vizro import Vizro + + stocks = px.data.stocks() + + page = vm.Page( + title="Line", + components=[ + vm.Graph( + figure=px.line( + stocks, x="date", y="GOOG" + ) + ) + ], + ) + + dashboard = vm.Dashboard(pages=[page]) + Vizro().build(dashboard).run() + ``` + """ + ), + ], +) + pie = vm.Page( title="Pie", layout=vm.Layout(grid=PAGE_GRID), From 1d304ce544403a1ed7fcb21ec0a2cced803ac568 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 17 Jul 2024 11:57:26 +0200 Subject: [PATCH 067/109] Lint --- vizro-core/examples/_chart-gallery/README.md | 110 +++++++++---------- 1 file changed, 54 insertions(+), 56 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index 1f2a4ca08..3d45dc1ed 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/vizro-core/examples/_chart-gallery/README.md @@ -6,66 +6,64 @@ to create them using Plotly and Vizro. Inspired by the [FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md): FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, Martin Stabe - ## Chart types -The dashboard is still in development. Below is an overview of the chart types for which a completed page is available. - -| Chart Type | Status | Category | -|----------------------|---------|---------------------------| -| Arc | ❌ | Part-to-whole | -| Barcode | ❌ | Distribution | -| Bar | ✅ | Magnitude | -| Boxplot | ✅ | Distribution | -| Bubble | ❌ | Correlation, Magnitude | -| Bubble Map | ❌ | Spatial | -| Bubble Timeline | ❌ | Time | -| Bullet | ❌ | Magnitude | -| Butterfly | ✅ | Deviation, Distribution | -| Chord | ❌ | Flow | -| Choropleth | ✅ | Spatial | -| Column | ✅ | Magnitude, Time | -| Column-Line | ❌ | Correlation, Time | -| Cumulative Curve | ❌ | Distribution | -| Diverging Bar | ❌ | Deviation | -| Dot Map | ❌ | Spatial | -| Dot Plot | ❌ | Distribution | -| Donut | ✅ | Part-to-whole | -| Fan | ❌ | Time | -| Flow Map | ❌ | Spatial | -| Funnel | ❌ | Part-to-whole | -| Gantt | ❌ | Time | -| Heatmap | ❌ | Time | -| Heatmap-Matrix | ❌ | Correlation | -| Histogram | ❌ | Distribution | -| Line | ❌ | Time | -| Lollipop | ❌ | Ranking, Magnitude | -| Marimekko | ❌ | Magnitude, Part-to-whole | -| Ordered Bar | ✅ | Ranking | -| Ordered Bubble | ❌ | Ranking | -| Ordered Column | ✅ | Ranking | -| Parallel Coordinates | ❌ | Magnitude | -| Pictogram | ❌ | Magnitude | -| Pie | ✅ | Part-to-whole | -| Radar | ❌ | Magnitude | -| Radial | ❌ | Magnitude | -| Sankey | ✅ | Flow | -| Scatter | ✅ | Correlation | -| Scatter Matrix | ❌ | Correlation | -| Slope | ❌ | Ranking, Time | -| Sparkline | ❌ | Time | -| Stacked Bar | ❌ | Part-to-whole | -| Stacked Column | ❌ | Part-to-whole | -| Stepped Line | ❌ | Ranking | -| Surplus-Deficit-Line | ❌ | Deviation | -| Treemap | ✅ | Part-to-whole | -| Venn | ❌ | Part-to-whole | -| Violin | ✅ | Distribution | -| Waterfall | ❌ | Part-to-whole, Flow | +The dashboard is still in development. Below is an overview of the chart types for which a completed page is available. +| Chart Type | Status | Category | +| -------------------- | ------ | ------------------------ | +| Arc | ❌ | Part-to-whole | +| Barcode | ❌ | Distribution | +| Bar | ✅ | Magnitude | +| Boxplot | ✅ | Distribution | +| Bubble | ❌ | Correlation, Magnitude | +| Bubble Map | ❌ | Spatial | +| Bubble Timeline | ❌ | Time | +| Bullet | ❌ | Magnitude | +| Butterfly | ✅ | Deviation, Distribution | +| Chord | ❌ | Flow | +| Choropleth | ✅ | Spatial | +| Column | ✅ | Magnitude, Time | +| Column-Line | ❌ | Correlation, Time | +| Cumulative Curve | ❌ | Distribution | +| Diverging Bar | ❌ | Deviation | +| Dot Map | ❌ | Spatial | +| Dot Plot | ❌ | Distribution | +| Donut | ✅ | Part-to-whole | +| Fan | ❌ | Time | +| Flow Map | ❌ | Spatial | +| Funnel | ❌ | Part-to-whole | +| Gantt | ❌ | Time | +| Heatmap | ❌ | Time | +| Heatmap-Matrix | ❌ | Correlation | +| Histogram | ❌ | Distribution | +| Line | ❌ | Time | +| Lollipop | ❌ | Ranking, Magnitude | +| Marimekko | ❌ | Magnitude, Part-to-whole | +| Ordered Bar | ✅ | Ranking | +| Ordered Bubble | ❌ | Ranking | +| Ordered Column | ✅ | Ranking | +| Parallel Coordinates | ❌ | Magnitude | +| Pictogram | ❌ | Magnitude | +| Pie | ✅ | Part-to-whole | +| Radar | ❌ | Magnitude | +| Radial | ❌ | Magnitude | +| Sankey | ✅ | Flow | +| Scatter | ✅ | Correlation | +| Scatter Matrix | ❌ | Correlation | +| Slope | ❌ | Ranking, Time | +| Sparkline | ❌ | Time | +| Stacked Bar | ❌ | Part-to-whole | +| Stacked Column | ❌ | Part-to-whole | +| Stepped Line | ❌ | Ranking | +| Surplus-Deficit-Line | ❌ | Deviation | +| Treemap | ✅ | Part-to-whole | +| Venn | ❌ | Part-to-whole | +| Violin | ✅ | Distribution | +| Waterfall | ❌ | Part-to-whole, Flow | ## How to run the example locally -1. If you have `hatch` set up, run the example with the command `hatch run example charts`. -Otherwise, run the `app.py` file with your environment activated where `vizro` is installed. +1. If you have `hatch` set up, run the example with the command `hatch run example charts`. + Otherwise, run the `app.py` file with your environment activated where `vizro` is installed. 2. You should now be able to access the app locally via http://127.0.0.1:8050/. From 77607497bd90bd4fa50bbc9514769e73461baad8 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 17 Jul 2024 16:29:40 +0200 Subject: [PATCH 068/109] Tidy some more --- ...{parallel.svg => parallel-coordinates.svg} | 0 .../_chart-gallery/utils/_page_utils.py | 7 -- .../_chart-gallery/utils/chart_pages.py | 34 ++----- .../_chart-gallery/utils/tab_containers.py | 92 +++++++++++++------ 4 files changed, 73 insertions(+), 60 deletions(-) rename vizro-core/examples/_chart-gallery/assets/images/charts/{parallel.svg => parallel-coordinates.svg} (100%) diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/parallel.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coordinates.svg similarity index 100% rename from vizro-core/examples/_chart-gallery/assets/images/charts/parallel.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coordinates.svg diff --git a/vizro-core/examples/_chart-gallery/utils/_page_utils.py b/vizro-core/examples/_chart-gallery/utils/_page_utils.py index 3fa090806..6674be74f 100644 --- a/vizro-core/examples/_chart-gallery/utils/_page_utils.py +++ b/vizro-core/examples/_chart-gallery/utils/_page_utils.py @@ -1,12 +1,10 @@ """Contains reusable data sets and constants.""" -import json import pandas as pd import vizro.plotly.express as px # DATA -------------------------------------------------------------- -counties = json.load("https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json") gapminder = px.data.gapminder() gapminder_2007 = gapminder.query("year == 2007") iris = px.data.iris() @@ -20,10 +18,6 @@ "Female": [1000, 3000, 3500, 3800, 3600, 700], } ) -fips_unemp = pd.read_csv( - "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", - dtype={"fips": str}, -) sankey_data = pd.DataFrame( { @@ -41,7 +35,6 @@ "tips": tips, "tips_agg": tips_agg, "ages": ages, - "fips_unemp": fips_unemp, "sankey_data": sankey_data, } PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 diff --git a/vizro-core/examples/_chart-gallery/utils/chart_pages.py b/vizro-core/examples/_chart-gallery/utils/chart_pages.py index 6981d22e0..1a97ebd7a 100644 --- a/vizro-core/examples/_chart-gallery/utils/chart_pages.py +++ b/vizro-core/examples/_chart-gallery/utils/chart_pages.py @@ -356,49 +356,35 @@ ), vm.Graph( figure=px.choropleth( - DATA_DICT["fips_unemp"], - geojson=DATA_DICT["counties"], - locations="fips", - color="unemp", - range_color=(0, 12), - scope="usa", + DATA_DICT["gapminder_2007"], + locations="iso_alpha", + color="lifeExp", + hover_name="country", ) ), CodeClipboard( text=""" ```python import json - from urllib.request import urlopen import pandas as pd import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro - with urlopen( - "https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json" - ) as response: - counties = json.load(response) - - fips_unemp = pd.read_csv( - "https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", - dtype={"fips": str}, - ) - + gapminder_2007 = px.data.gapminder().query("year == 2007") page = vm.Page( title="Choropleth", components=[ vm.Graph( figure=px.choropleth( - fips_unemp, - geojson=counties, - locations="fips", - color="unemp", - range_color=(0, 12), - scope="usa", + gapminder_2007, + locations="iso_alpha", + color="lifeExp", + hover_name="country", ) - ), + ) ], ) diff --git a/vizro-core/examples/_chart-gallery/utils/tab_containers.py b/vizro-core/examples/_chart-gallery/utils/tab_containers.py index 15e7364a1..8f0eb16db 100644 --- a/vizro-core/examples/_chart-gallery/utils/tab_containers.py +++ b/vizro-core/examples/_chart-gallery/utils/tab_containers.py @@ -1,6 +1,7 @@ """Contains code for the containers used inside the tabs (homepage).""" import re +from itertools import chain import vizro.models as vm @@ -10,11 +11,12 @@ vm.Container.add_type("components", FlexContainer) -def tidy_chart_title(chart: str) -> str: - """Tidy up the chart title by removing prefixes and unwanted characters. - - Note: The pre-fixes are previously given to uniquely create a page ID. - """ +def remove_prefix(chart_title: str) -> str: + """Remove prefix from chart-title.""" + # Note: Prefixes are added to chart names that appear in multiple categories to ensure each chart has a + # unique page ID and path in the gallery. For example, the "butterfly" chart appears in both the deviation and + # distribution categories, so it is listed as "butterfly" and "distribution-butterfly". + # In this step, we remove these prefixes because we do not want them displayed in the chart titles. prefixes_to_remove = [ "time-", "magnitude-", @@ -22,15 +24,40 @@ def tidy_chart_title(chart: str) -> str: "distribution-", "correlation-", "ranking-", - "flow-", "spatial-", "part-", ] pattern = "^(" + "|".join(prefixes_to_remove) + ")" - chart_without_prefix = re.sub(pattern, "", chart) - return chart_without_prefix.replace("-", " ").title() + chart_without_prefix = re.sub(pattern, "", chart_title) + return chart_without_prefix + + +def tidy_chart_title(chart: str) -> str: + """Tidy up the chart title by removing prefixes and unwanted characters.""" + return remove_prefix(chart).replace("-", " ").title() +# TODO: Once a chart type is completed, include it here to enable navigation from the homepage to the chart. +COMPLETED_CHARTS = [ + "bar", + "ordered-bar", + "column", + "ordered-column", + "pie", + "donut", + "line", + "violin", + "scatter", + "sankey", + "butterfly", + "boxplot", + "choropleth", + "treemap", +] + + +# TODO: Charts that are commented out below do not have an svg made yet. Uncomment them once they are ready. +# The names correspond to the svg names. DEVIATION_CHARTS = sorted( [ "diverging-bar", @@ -79,7 +106,7 @@ def tidy_chart_title(chart: str) -> str: "bubble", "lollipop", "radar", - "parallel", + "parallel-coordinates", "pictogram", "bullet", "radial", @@ -87,7 +114,7 @@ def tidy_chart_title(chart: str) -> str: ) TIME_CHARTS = sorted( [ - "time-line", + "line", "time-column", "gantt", "column-line", @@ -117,17 +144,24 @@ def tidy_chart_title(chart: str) -> str: FLOW_CHARTS = sorted(["sankey", "waterfall", "chord", "network"]) SPATIAL_CHARTS = sorted(["choropleth", "dot-map", "flow-map", "bubble-map"]) + +# Create a sorted list of unique, tidied chart titles ALL_CHARTS = sorted( set( - DEVIATION_CHARTS - + CORRELATION_CHARTS - + RANKING_CHARTS - + DISTRIBUTION_CHARTS - + MAGNITUDE_CHARTS - + TIME_CHARTS - + PART_TO_WHOLE_CHARTS - + FLOW_CHARTS - + SPATIAL_CHARTS + map( + remove_prefix, + chain( + DEVIATION_CHARTS, + CORRELATION_CHARTS, + RANKING_CHARTS, + DISTRIBUTION_CHARTS, + MAGNITUDE_CHARTS, + TIME_CHARTS, + PART_TO_WHOLE_CHARTS, + FLOW_CHARTS, + SPATIAL_CHARTS, + ), + ) ) ) @@ -144,7 +178,7 @@ def tidy_chart_title(chart: str) -> str: #### {tidy_chart_title(chart)} """, - href=f"/{chart}", + href=f"/{chart}" if chart in COMPLETED_CHARTS else "", ) for chart in ALL_CHARTS ], @@ -173,7 +207,7 @@ def tidy_chart_title(chart: str) -> str: #### {tidy_chart_title(chart)} """, - href=f"/{chart}", + href=f"/{chart}" if chart in COMPLETED_CHARTS else "", ) for chart in DEVIATION_CHARTS ], @@ -202,7 +236,7 @@ def tidy_chart_title(chart: str) -> str: #### {tidy_chart_title(chart)} """, - href=f"/{chart}", + href=f"/{chart}" if chart in COMPLETED_CHARTS else "", ) for chart in CORRELATION_CHARTS ], @@ -231,7 +265,7 @@ def tidy_chart_title(chart: str) -> str: #### {tidy_chart_title(chart)} """, - href=f"/{chart}", + href=f"/{chart}" if chart in COMPLETED_CHARTS else "", ) for chart in RANKING_CHARTS ], @@ -262,7 +296,7 @@ def tidy_chart_title(chart: str) -> str: #### {tidy_chart_title(chart)} """, - href=f"/{chart}", + href=f"/{chart}" if chart in COMPLETED_CHARTS else "", ) for chart in DISTRIBUTION_CHARTS ], @@ -292,7 +326,7 @@ def tidy_chart_title(chart: str) -> str: #### {tidy_chart_title(chart)} """, - href=f"/{chart}", + href=f"/{chart}" if chart in COMPLETED_CHARTS else "", ) for chart in MAGNITUDE_CHARTS ], @@ -321,7 +355,7 @@ def tidy_chart_title(chart: str) -> str: #### {tidy_chart_title(chart)} """, - href=f"/{chart}", + href=f"/{chart}" if chart in COMPLETED_CHARTS else "", ) for chart in TIME_CHARTS ], @@ -349,7 +383,7 @@ def tidy_chart_title(chart: str) -> str: #### {tidy_chart_title(chart)} """, - href=f"/{chart}", + href=f"/{chart}" if chart in COMPLETED_CHARTS else "", ) for chart in PART_TO_WHOLE_CHARTS ], @@ -378,7 +412,7 @@ def tidy_chart_title(chart: str) -> str: #### {tidy_chart_title(chart)} """, - href=f"/{chart}", + href=f"/{chart}" if chart in COMPLETED_CHARTS else "", ) for chart in FLOW_CHARTS ], @@ -405,7 +439,7 @@ def tidy_chart_title(chart: str) -> str: #### {tidy_chart_title(chart)} """, - href=f"/{chart}", + href=f"/{chart}" if chart in COMPLETED_CHARTS else "", ) for chart in SPATIAL_CHARTS ], From adc5015e2f0030f1b8d6bea02690c2812d9e2f0c Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Wed, 17 Jul 2024 16:42:29 +0200 Subject: [PATCH 069/109] Add more information --- vizro-core/examples/_chart-gallery/README.md | 9 +++++++++ vizro-core/examples/_chart-gallery/utils/_page_utils.py | 1 - .../examples/_chart-gallery/utils/tab_containers.py | 3 --- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index 3d45dc1ed..b43cf2b71 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/vizro-core/examples/_chart-gallery/README.md @@ -62,6 +62,15 @@ The dashboard is still in development. Below is an overview of the chart types f | Violin | ✅ | Distribution | | Waterfall | ❌ | Part-to-whole, Flow | +To contribute a chart, follow the steps below: + +1. Ensure there is a `svg` in the `assets` folder with the same name as the chart type. +2. Add a new page for the chart type inside `chart_pages.py`. Take a look at the existing pages for guidance. +3. Add any new data set to the `DATA_DICT` inside `_page_utils.py`. +4. Add the new chart type to the `COMPLETED_CHARTS` list in `tab_containers.py` to enable navigation. +5. Add the new chart page to the navigation inside the `app.py` +6. Update this `README.md` with the new chart type. + ## How to run the example locally 1. If you have `hatch` set up, run the example with the command `hatch run example charts`. diff --git a/vizro-core/examples/_chart-gallery/utils/_page_utils.py b/vizro-core/examples/_chart-gallery/utils/_page_utils.py index 6674be74f..1fbb619db 100644 --- a/vizro-core/examples/_chart-gallery/utils/_page_utils.py +++ b/vizro-core/examples/_chart-gallery/utils/_page_utils.py @@ -1,6 +1,5 @@ """Contains reusable data sets and constants.""" - import pandas as pd import vizro.plotly.express as px diff --git a/vizro-core/examples/_chart-gallery/utils/tab_containers.py b/vizro-core/examples/_chart-gallery/utils/tab_containers.py index 8f0eb16db..4d1e5a640 100644 --- a/vizro-core/examples/_chart-gallery/utils/tab_containers.py +++ b/vizro-core/examples/_chart-gallery/utils/tab_containers.py @@ -143,9 +143,6 @@ def tidy_chart_title(chart: str) -> str: ) FLOW_CHARTS = sorted(["sankey", "waterfall", "chord", "network"]) SPATIAL_CHARTS = sorted(["choropleth", "dot-map", "flow-map", "bubble-map"]) - - -# Create a sorted list of unique, tidied chart titles ALL_CHARTS = sorted( set( map( From aa9931a2faa368e149cb2fee7c4d00277aea9b66 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Fri, 19 Jul 2024 11:45:15 +0100 Subject: [PATCH 070/109] Amend python path using fixture --- vizro-core/pyproject.toml | 2 +- vizro-core/tests/integration/test_examples.py | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/vizro-core/pyproject.toml b/vizro-core/pyproject.toml index 295bf74bc..0e68ef5dc 100644 --- a/vizro-core/pyproject.toml +++ b/vizro-core/pyproject.toml @@ -83,4 +83,4 @@ filterwarnings = [ "ignore:Custom format string detected." ] norecursedirs = ["tests/tests_utils", "tests/js"] -pythonpath = ["tests/tests_utils", "examples/kpi", "examples/_chart-gallery"] +pythonpath = ["tests/tests_utils"] diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py index c85da3083..5d5d5d2ae 100644 --- a/vizro-core/tests/integration/test_examples.py +++ b/vizro-core/tests/integration/test_examples.py @@ -26,7 +26,9 @@ def setup_integration_test_environment(monkeypatch_session): @pytest.fixture def dashboard(request, monkeypatch): - monkeypatch.chdir(request.getfixturevalue("example_path") / request.getfixturevalue("version")) + example_directory = request.getfixturevalue("example_path") / request.getfixturevalue("version") + monkeypatch.chdir(example_directory) + monkeypatch.syspath_prepend(example_directory) app = runpy.run_path("app.py") return app["dashboard"] @@ -52,6 +54,7 @@ def dashboard(request, monkeypatch): (examples_path / "kpi", ""), (examples_path / "_chart-gallery", ""), ], + ids=str, ) def test_dashboard(dash_duo, example_path, dashboard, version): app = Vizro(assets_folder=example_path / "assets").build(dashboard).dash From 8f5c0a339767ca350bb4c9bad55bd8d62c5e50a6 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Fri, 19 Jul 2024 17:06:08 +0100 Subject: [PATCH 071/109] Fix sys.modules --- .../examples/_chart-gallery/__init__.py | 0 vizro-core/tests/integration/test_examples.py | 22 +++++++++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) create mode 100644 vizro-core/examples/_chart-gallery/__init__.py diff --git a/vizro-core/examples/_chart-gallery/__init__.py b/vizro-core/examples/_chart-gallery/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py index 5d5d5d2ae..b7a077893 100644 --- a/vizro-core/tests/integration/test_examples.py +++ b/vizro-core/tests/integration/test_examples.py @@ -1,6 +1,10 @@ # ruff: noqa: F403, F405 +import importlib import os +import random import runpy +import sys +from copy import copy, deepcopy from pathlib import Path import chromedriver_autoinstaller @@ -29,8 +33,12 @@ def dashboard(request, monkeypatch): example_directory = request.getfixturevalue("example_path") / request.getfixturevalue("version") monkeypatch.chdir(example_directory) monkeypatch.syspath_prepend(example_directory) - app = runpy.run_path("app.py") - return app["dashboard"] + old_sys_modules = set(sys.modules) + yield runpy.run_path("app.py")["dashboard"] + # Both run_path and run_module contaminate sys.modules, so we need to undo this in order to avoid interference + # between tests. + for key in set(sys.modules) - old_sys_modules: + del sys.modules[key] examples_path = Path(__file__).parents[2] / "examples" @@ -47,12 +55,12 @@ def dashboard(request, monkeypatch): @pytest.mark.parametrize( "example_path, version", [ - (examples_path / "scratch_dev", ""), - (examples_path / "scratch_dev", "yaml_version"), - (examples_path / "dev", ""), - (examples_path / "dev", "yaml_version"), - (examples_path / "kpi", ""), + # (examples_path / "scratch_dev", ""), + # (examples_path / "scratch_dev", "yaml_version"), + # (examples_path / "dev", ""), + # (examples_path / "dev", "yaml_version"), (examples_path / "_chart-gallery", ""), + (examples_path / "kpi", ""), ], ids=str, ) From 30ddb155a3263dc6d90854ce81a8f0c00944ae99 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Fri, 19 Jul 2024 16:06:47 +0000 Subject: [PATCH 072/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/tests/integration/test_examples.py | 3 --- 1 file changed, 3 deletions(-) diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py index b7a077893..9df70a3b8 100644 --- a/vizro-core/tests/integration/test_examples.py +++ b/vizro-core/tests/integration/test_examples.py @@ -1,10 +1,7 @@ # ruff: noqa: F403, F405 -import importlib import os -import random import runpy import sys -from copy import copy, deepcopy from pathlib import Path import chromedriver_autoinstaller From 5a60dc2e75e181d2e98ac9cf3e3941a71bf46b18 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Fri, 19 Jul 2024 17:06:08 +0100 Subject: [PATCH 073/109] Fix sys.modules --- vizro-core/tests/integration/test_examples.py | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py index 9df70a3b8..18cfd76cc 100644 --- a/vizro-core/tests/integration/test_examples.py +++ b/vizro-core/tests/integration/test_examples.py @@ -52,10 +52,10 @@ def dashboard(request, monkeypatch): @pytest.mark.parametrize( "example_path, version", [ - # (examples_path / "scratch_dev", ""), - # (examples_path / "scratch_dev", "yaml_version"), - # (examples_path / "dev", ""), - # (examples_path / "dev", "yaml_version"), + (examples_path / "scratch_dev", ""), + (examples_path / "scratch_dev", "yaml_version"), + (examples_path / "dev", ""), + (examples_path / "dev", "yaml_version"), (examples_path / "_chart-gallery", ""), (examples_path / "kpi", ""), ], From 998553f5015dd98415f2e4c4fed0f7252cc9139a Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Fri, 19 Jul 2024 17:06:08 +0100 Subject: [PATCH 074/109] Fix sys.modules --- vizro-core/examples/_chart-gallery/__init__.py | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 vizro-core/examples/_chart-gallery/__init__.py diff --git a/vizro-core/examples/_chart-gallery/__init__.py b/vizro-core/examples/_chart-gallery/__init__.py deleted file mode 100644 index e69de29bb..000000000 From 0180c077ae251d81d1abbe3561d42bd63db5d8ff Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 23 Jul 2024 11:58:22 +0200 Subject: [PATCH 075/109] Quick PR comments --- vizro-core/examples/_chart-gallery/README.md | 16 ++--- .../_chart-gallery/utils/chart_factory.py | 6 +- .../_chart-gallery/utils/tab_containers.py | 63 ++++++++++++++++--- 3 files changed, 64 insertions(+), 21 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index b43cf2b71..232ff58e8 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/vizro-core/examples/_chart-gallery/README.md @@ -64,15 +64,15 @@ The dashboard is still in development. Below is an overview of the chart types f To contribute a chart, follow the steps below: -1. Ensure there is a `svg` in the `assets` folder with the same name as the chart type. -2. Add a new page for the chart type inside `chart_pages.py`. Take a look at the existing pages for guidance. -3. Add any new data set to the `DATA_DICT` inside `_page_utils.py`. -4. Add the new chart type to the `COMPLETED_CHARTS` list in `tab_containers.py` to enable navigation. -5. Add the new chart page to the navigation inside the `app.py` -6. Update this `README.md` with the new chart type. +1. Place an `svg` file named after the chart type in the `assets` folder if not already available. +2. Create a new page for the chart type in `chart_pages.py`. Refer to existing pages for guidance. +3. Add any new datasets to the `DATA_DICT` in `_page_utils.py`. +4. Uncomment the completed chart in the `COMPLETED_CHARTS` list in `tab_containers.py` to enable navigation. +5. Add the new chart page to the appropriate category in the navigation within `app.py`. +6. Update the `README.md` with the new chart type. ## How to run the example locally -1. If you have `hatch` set up, run the example with the command `hatch run example charts`. - Otherwise, run the `app.py` file with your environment activated where `vizro` is installed. +1. If you have `hatch` set up, run the example with the command `hatch run example _chart-gallery`. + Otherwise, run `python app.py` with your Python environment activated where `vizro` is installed. 2. You should now be able to access the app locally via http://127.0.0.1:8050/. diff --git a/vizro-core/examples/_chart-gallery/utils/chart_factory.py b/vizro-core/examples/_chart-gallery/utils/chart_factory.py index a2e833208..7fb0da11f 100644 --- a/vizro-core/examples/_chart-gallery/utils/chart_factory.py +++ b/vizro-core/examples/_chart-gallery/utils/chart_factory.py @@ -225,9 +225,9 @@ def treemap_factory(id: str, title: str): #### What is a treemap? - A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles sized - proportionately to the quantity they represent, combining together to form larger **parent** - category rectangles. + A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles are sized + proportionately to the quantity they represent, combined together to form larger parent category + rectangles.   diff --git a/vizro-core/examples/_chart-gallery/utils/tab_containers.py b/vizro-core/examples/_chart-gallery/utils/tab_containers.py index 4d1e5a640..1643edbca 100644 --- a/vizro-core/examples/_chart-gallery/utils/tab_containers.py +++ b/vizro-core/examples/_chart-gallery/utils/tab_containers.py @@ -37,25 +37,68 @@ def tidy_chart_title(chart: str) -> str: return remove_prefix(chart).replace("-", " ").title() -# TODO: Once a chart type is completed, include it here to enable navigation from the homepage to the chart. +# TODO: Once a chart type is completed, remove the comment. COMPLETED_CHARTS = [ + # "arc", + # "area", "bar", - "ordered-bar", + # "barcode", + # "beeswarm", + "boxplot", + # "bubble", + # "bubble-map", + # "bubble-timeline", + # "bullet", + "butterfly", + # "chord", + "choropleth", "column", - "ordered-column", - "pie", + # "column-line", + # "connected-scatter", + # "cumulative-curve", + # "distribution-butterfly", + # "diverging-bar", + # "diverging-stacked-bar", "donut", + # "dot-map", + # "dot-plot", + # "fan", + # "flow-map", + # "funnel", + # "gantt", + # "heatmap", + # "heatmap-matrix", + # "histogram", "line", - "violin", - "scatter", + # "lollipop", + # "marimekko", + # "network", + "ordered-bar", + # "ordered-bubble", + "ordered-column", + # "paired-bar", + # "paired-column", + # "parallel-coordinates", + # "pictogram", + "pie", + # "radar", + # "radial", "sankey", - "butterfly", - "boxplot", - "choropleth", + "scatter", + # "scatter-matrix", + # "slope", + # "sparkline", + # "stacked-bar", + # "stacked-column", + # "stepped-line", + # "surplus", + # "time-column", "treemap", + # "venn", + "violin", + # "waterfall", ] - # TODO: Charts that are commented out below do not have an svg made yet. Uncomment them once they are ready. # The names correspond to the svg names. DEVIATION_CHARTS = sorted( From 123dbb5cfac6eb8a04a7f36766de2b7889ca3151 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 23 Jul 2024 13:03:41 +0200 Subject: [PATCH 076/109] Implement uncollapsed codeclipboard --- .../_chart-gallery/assets/css/custom.css | 16 ++++++++++++++++ .../_chart-gallery/utils/custom_extensions.py | 9 +++++---- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index 29e0a9aa5..d4e2a0a0b 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -6,6 +6,10 @@ width: 288px; } +#page-components { + overflow: unset; +} + img[src*="#chart-icon"] { width: 100%; } @@ -17,6 +21,18 @@ img[src*="#chart-icon"] { top: 12px; } +.code-clipboard-container { + padding: 1rem; + background: var(--surfaces-bg-card); + max-height: 500px; + overflow: auto; + position: relative; +} + +.code-clipboard-container::-webkit-scrollbar-thumb { + border-color: var(--surfaces-bg-card); +} + .flex-container .card { height: 208px; width: 176px; diff --git a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py index 4f7890a74..a71d3a70d 100644 --- a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py +++ b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py @@ -27,17 +27,18 @@ def build(self): return dbc.Accordion( [ dbc.AccordionItem( - dbc.Card( + html.Div( [ html.H3(self.title), - dcc.Markdown(self.text, id=self.id, className="code-block"), + dcc.Markdown(self.text, id=self.id), dcc.Clipboard(target_id=self.id, className="code-clipboard"), - ] + ], + className="code-clipboard-container" ), title="SHOW CODE", ) ], - start_collapsed=True, + start_collapsed=False, ) From e016a042330b061e8ea0afe8252b14eb2847be26 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue, 23 Jul 2024 11:04:27 +0000 Subject: [PATCH 077/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/_chart-gallery/assets/css/custom.css | 2 +- vizro-core/examples/_chart-gallery/utils/custom_extensions.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index d4e2a0a0b..b796a7345 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -22,10 +22,10 @@ img[src*="#chart-icon"] { } .code-clipboard-container { - padding: 1rem; background: var(--surfaces-bg-card); max-height: 500px; overflow: auto; + padding: 1rem; position: relative; } diff --git a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py index a71d3a70d..1c252abc7 100644 --- a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py +++ b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py @@ -33,7 +33,7 @@ def build(self): dcc.Markdown(self.text, id=self.id), dcc.Clipboard(target_id=self.id, className="code-clipboard"), ], - className="code-clipboard-container" + className="code-clipboard-container", ), title="SHOW CODE", ) From 5d64ec608b2926a011ae38f10055be9e4d907c12 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 23 Jul 2024 13:16:52 +0200 Subject: [PATCH 078/109] Add docstrings --- .../_chart-gallery/utils/custom_extensions.py | 35 +++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py index 1c252abc7..b608799ef 100644 --- a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py +++ b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py @@ -70,7 +70,20 @@ def build(self): @capture("graph") def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str) -> go.Figure: - """Creates a custom butterfly chart based on a go.Figure.""" + """Creates a custom butterfly chart using Plotly's go.Figure. + + A butterfly chart is a type of bar chart where two sets of bars are displayed back-to-back, often used to compare + two sets of data. + + Args: + data_frame (pd.DataFrame): The data source for the chart. + x1 (str): The name of the column in the data frame for the first set of bars (negative values). + x2 (str): The name of the column in the data frame for the second set of bars (positive values). + y (str): The name of the column in the data frame for the y-axis (categories). + + Returns: + go.Figure: A Plotly Figure object representing the butterfly chart. + """ fig = go.Figure() fig.add_trace( go.Bar( @@ -94,7 +107,25 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str) -> go.Figure: @capture("graph") def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, labels: List[str]) -> go.Figure: - """Creates a custom sankey chart based on a go.Figure.""" + """Creates a custom sankey chart using Plotly's `go.Sankey`. + + A Sankey chart is a type of flow diagram where the width of the arrows is proportional to the flow rate. + It is used to visualize the flow of resources or data between different stages or categories. + + Args: + data_frame (pd.DataFrame): The data source for the chart. + source (str): The name of the column in the data frame for the source nodes. + target (str): The name of the column in the data frame for the target nodes. + value (str): The name of the column in the data frame for the values representing the flow between nodes. + labels (List[str]): A list of labels for the nodes. + + Returns: + go.Figure: A Plotly Figure object representing the Sankey chart. + + For detailed information on additional parameters and customization, refer to the Plotly documentation: + https://plotly.com/python/reference/sankey/ + + """ fig = go.Figure( data=[ go.Sankey( From 0f0df51831d58efbec4ac6d7866d629cdf98f155 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue, 23 Jul 2024 11:17:23 +0000 Subject: [PATCH 079/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/_chart-gallery/utils/custom_extensions.py | 1 + 1 file changed, 1 insertion(+) diff --git a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py index b608799ef..93265b1d4 100644 --- a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py +++ b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py @@ -83,6 +83,7 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str) -> go.Figure: Returns: go.Figure: A Plotly Figure object representing the butterfly chart. + """ fig = go.Figure() fig.add_trace( From f563b818f5f92e14478eb39faace5152b3fd4937 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 23 Jul 2024 14:46:59 +0200 Subject: [PATCH 080/109] PR comments - Add opacity for cards with non-existing charts - Add border styling for active nav-icon - Rename parallel coordinates chart - Apply sorted function to app.py as well --- vizro-core/examples/_chart-gallery/app.py | 16 ++++++++-------- .../_chart-gallery/assets/css/custom.css | 8 ++++++++ ...rallel-coordinates.svg => parallel-coord.svg} | 0 .../_chart-gallery/utils/tab_containers.py | 4 ++-- .../vizro/static/css/bootstrap_overwrites.css | 7 +++++++ 5 files changed, 25 insertions(+), 10 deletions(-) rename vizro-core/examples/_chart-gallery/assets/images/charts/{parallel-coordinates.svg => parallel-coord.svg} (100%) diff --git a/vizro-core/examples/_chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py index 0099de850..558535163 100644 --- a/vizro-core/examples/_chart-gallery/app.py +++ b/vizro-core/examples/_chart-gallery/app.py @@ -82,37 +82,37 @@ vm.NavLink(label="Overview", pages=["Overview"], icon="Home"), vm.NavLink( label="Deviation", - pages={"Deviation": ["Butterfly"]}, + pages={"Deviation": sorted(["Butterfly"])}, icon="Planner Review", ), vm.NavLink( label="Correlation", - pages={"Correlation": ["Scatter"]}, + pages={"Correlation": sorted(["Scatter"])}, icon="Bubble Chart", ), vm.NavLink( label="Ranking", - pages={"Ranking": ["Ordered Bar", "Ordered Column"]}, + pages={"Ranking": sorted(["Ordered Bar", "Ordered Column"])}, icon="Stacked Bar Chart", ), vm.NavLink( label="Distribution", - pages={"Distribution": ["Boxplot", "Violin", "Distribution-Butterfly"]}, + pages={"Distribution": sorted(["Boxplot", "Violin", "Distribution-Butterfly"])}, icon="Waterfall Chart", ), vm.NavLink( label="Magnitude", - pages={"Magnitude": ["Bar", "Column", "Magnitude-Treemap"]}, + pages={"Magnitude": sorted(["Bar", "Column", "Magnitude-Treemap"])}, icon="Bar Chart", ), vm.NavLink( label="Time", - pages={"Time": ["Line", "Time-Column"]}, + pages={"Time": sorted(["Line", "Time-Column"])}, icon="Timeline", ), vm.NavLink( label="Part-to-whole", - pages={"Part-to-whole": ["Donut", "Pie", "Treemap"]}, + pages={"Part-to-whole": sorted(["Donut", "Pie", "Treemap"])}, icon="Donut Small", ), vm.NavLink( @@ -122,7 +122,7 @@ ), vm.NavLink( label="Spatial", - pages={"Spatial": ["Choropleth"]}, + pages={"Spatial": sorted(["Choropleth"])}, icon="Map", ), ] diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index b796a7345..fd524bd2f 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -60,3 +60,11 @@ img[src*="#chart-icon"] { font-size: 16px; line-height: 20px; } + +.flex-container .card { + opacity: 0.5; +} + +.flex-container .card-nav { + opacity: 1; +} diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coordinates.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coord.svg similarity index 100% rename from vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coordinates.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coord.svg diff --git a/vizro-core/examples/_chart-gallery/utils/tab_containers.py b/vizro-core/examples/_chart-gallery/utils/tab_containers.py index 1643edbca..f5631f130 100644 --- a/vizro-core/examples/_chart-gallery/utils/tab_containers.py +++ b/vizro-core/examples/_chart-gallery/utils/tab_containers.py @@ -78,7 +78,7 @@ def tidy_chart_title(chart: str) -> str: "ordered-column", # "paired-bar", # "paired-column", - # "parallel-coordinates", + # "parallel-coord", # "pictogram", "pie", # "radar", @@ -149,7 +149,7 @@ def tidy_chart_title(chart: str) -> str: "bubble", "lollipop", "radar", - "parallel-coordinates", + "parallel-coord", "pictogram", "bullet", "radial", diff --git a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css index 483ef670e..5cda4e759 100644 --- a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css +++ b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css @@ -9,6 +9,13 @@ but do not want to take over to `vizro-bootstrap` as these settings might not be margin-bottom: 0; } +.navbar .nav-link:active, +.navbar .nav-link.active { + border-right: 1px solid var(--border-enabled); + color: var(--text-primary); + width: 64px; +} + /* TO DO: Check if this should live in vizro-bootstrap */ .card p:last-of-type { margin-bottom: 0; From 3370d478f11ad82c127844234e863c408f1faaea Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Tue, 23 Jul 2024 14:50:58 +0200 Subject: [PATCH 081/109] Lint --- .../examples/_chart-gallery/assets/css/custom.css | 5 +---- .../src/vizro/static/css/bootstrap_overwrites.css | 13 ++++++------- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index fd524bd2f..4c4ef05ac 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -35,6 +35,7 @@ img[src*="#chart-icon"] { .flex-container .card { height: 208px; + opacity: 0.5; width: 176px; } @@ -61,10 +62,6 @@ img[src*="#chart-icon"] { line-height: 20px; } -.flex-container .card { - opacity: 0.5; -} - .flex-container .card-nav { opacity: 1; } diff --git a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css index 5cda4e759..5a8cf6968 100644 --- a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css +++ b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css @@ -9,13 +9,6 @@ but do not want to take over to `vizro-bootstrap` as these settings might not be margin-bottom: 0; } -.navbar .nav-link:active, -.navbar .nav-link.active { - border-right: 1px solid var(--border-enabled); - color: var(--text-primary); - width: 64px; -} - /* TO DO: Check if this should live in vizro-bootstrap */ .card p:last-of-type { margin-bottom: 0; @@ -37,3 +30,9 @@ but do not want to take over to `vizro-bootstrap` as these settings might not be margin: 0; padding: 0; } + +.navbar .nav-link.active { + border-right: 1px solid var(--border-enabled); + color: var(--text-primary); + width: 64px; +} From 00e08cec6edee9d262330a02c64539dd567a79c7 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Tue, 23 Jul 2024 17:29:45 +0100 Subject: [PATCH 082/109] Remove tab_container in favour of chart_groups --- vizro-core/examples/_chart-gallery/app.py | 202 ++++---- .../examples/_chart-gallery/chart_groups.py | 226 ++++++++ .../_chart-gallery/utils/tab_containers.py | 488 ------------------ 3 files changed, 317 insertions(+), 599 deletions(-) create mode 100644 vizro-core/examples/_chart-gallery/chart_groups.py diff --git a/vizro-core/examples/_chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py index 558535163..8b2ec5973 100644 --- a/vizro-core/examples/_chart-gallery/app.py +++ b/vizro-core/examples/_chart-gallery/app.py @@ -1,131 +1,111 @@ """App configuration for chart gallery dashboard.""" +import itertools import vizro.models as vm -from utils.chart_pages import ( - bar, - boxplot, - butterfly_page, - choropleth, - column, - distribution_butterfly, - donut, - line, - magnitude_treemap, - ordered_bar, - ordered_column, - pie, - sankey_page, - scatter, - time_column, - treemap, - violin, -) -from utils.tab_containers import ( - container_all, - container_correlation, - container_deviation, - container_distribution, - container_flow, - container_magnitude, - container_part, - container_ranking, - container_spatial, - container_time, -) +from chart_groups import ChartGroup, CHART_GROUPS, ALL_CHART_GROUP +from utils.custom_extensions import Markdown, FlexContainer + from vizro import Vizro + +def make_chart_card(page: vm.Page, complete: bool): + svg_name = page.title.lower().replace(" ", "-") + return vm.Card( + text=f""" + ![](assets/images/pages/{svg_name}.svg#page-icon) + + #### {page.title} + """, + href=f"/{page.path}" if complete else "", + ) + + +def make_homepage_container(chart_group: ChartGroup): + return vm.Container( + title=chart_group.name, + layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), + components=[ + Markdown(text=chart_group.intro_text, classname="intro-text"), + FlexContainer( + title="", + components=[ + make_chart_card(page, page in chart_group.pages) + for page in sorted(chart_group.pages | chart_group.incomplete_pages) + ], + ), + ], + ) + + +def make_navlink(chart_group: ChartGroup): + return vm.NavLink( + label=chart_group.name, + pages={chart_group.name: sorted(page.id for page in chart_group.pages)}, + icon=chart_group.icon, + ) + + +vm.Container.add_type("components", Markdown) +vm.Container.add_type("components", FlexContainer) + + homepage = vm.Page( title="Overview", components=[ - vm.Tabs( - tabs=[ - container_all, - container_deviation, - container_correlation, - container_ranking, - container_distribution, - container_magnitude, - container_time, - container_part, - container_flow, - container_spatial, - ] - ), + vm.Tabs(tabs=[make_homepage_container(chart_group) for chart_group in [ALL_CHART_GROUP, *CHART_GROUPS]]), ], ) +# CHeck against: pages: +# homepage, +# bar, +# column, +# line, +# scatter, +# pie, +# donut, +# boxplot, +# violin, +# ordered_bar, +# ordered_column, +# time_column, +# treemap, +# magnitude_treemap, +# butterfly_page, +# distribution_butterfly, +# choropleth, +# sankey_page, +# for navigation: +# COMPLETED_CHARTS = [ +# "bar", +# "ordered-bar", +# "column", +# "ordered-column", +# "pie", +# "donut", +# "line", +# "violin", +# "scatter", +# "sankey", +# "butterfly", +# "boxplot", +# "choropleth", +# "treemap", +# ] +# +# + +# TODO: maybe nice to have an overall dashboard title? "Vizro chart gallery" or similar. dashboard = vm.Dashboard( - pages=[ - homepage, - bar, - column, - line, - scatter, - pie, - donut, - boxplot, - violin, - ordered_bar, - ordered_column, - time_column, - treemap, - magnitude_treemap, - butterfly_page, - distribution_butterfly, - choropleth, - sankey_page, - ], + # note has duplicates + pages=itertools.chain(*chart_group.pages for chart_group in CHART_GROUPS), navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ - vm.NavLink(label="Overview", pages=["Overview"], icon="Home"), - vm.NavLink( - label="Deviation", - pages={"Deviation": sorted(["Butterfly"])}, - icon="Planner Review", - ), - vm.NavLink( - label="Correlation", - pages={"Correlation": sorted(["Scatter"])}, - icon="Bubble Chart", - ), - vm.NavLink( - label="Ranking", - pages={"Ranking": sorted(["Ordered Bar", "Ordered Column"])}, - icon="Stacked Bar Chart", - ), - vm.NavLink( - label="Distribution", - pages={"Distribution": sorted(["Boxplot", "Violin", "Distribution-Butterfly"])}, - icon="Waterfall Chart", - ), - vm.NavLink( - label="Magnitude", - pages={"Magnitude": sorted(["Bar", "Column", "Magnitude-Treemap"])}, - icon="Bar Chart", - ), - vm.NavLink( - label="Time", - pages={"Time": sorted(["Line", "Time-Column"])}, - icon="Timeline", - ), - vm.NavLink( - label="Part-to-whole", - pages={"Part-to-whole": sorted(["Donut", "Pie", "Treemap"])}, - icon="Donut Small", - ), - vm.NavLink( - label="Flow", - pages={"Flow": ["Sankey"]}, - icon="Stacked Line Chart", - ), - vm.NavLink( - label="Spatial", - pages={"Spatial": sorted(["Choropleth"])}, - icon="Map", - ), + vm.NavLink(label="Overview", pages=[homepage.id], icon="Home"), ] + + [make_navlink(chart_group) for chart_group in CHART_GROUPS] ) ), ) diff --git a/vizro-core/examples/_chart-gallery/chart_groups.py b/vizro-core/examples/_chart-gallery/chart_groups.py new file mode 100644 index 000000000..4e6049092 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/chart_groups.py @@ -0,0 +1,226 @@ +# """Contains code for the containers used inside the tabs (homepage).""" +import itertools + +from typing import Set + +from dataclasses import dataclass + +import vizro.models as vm + + +@dataclass +class ChartGroup: + name: str + pages: Set[vm.Page] # Just completed, not all pages + incomplete_pages: Set[vm.Page] + icon: str + intro_text: str + + +# TODO: Charts that are commented out in incomplete_pages below do not have an svg made yet. +# Uncomment them once they are ready. + +deviation_intro_text = """ +Deviation enables you to draw attention to variations (+/-) from a fixed reference point. +Often this reference point is zero, but you might also show a target or a long-term average. +You can also use deviation to express a positive, neutral or negative sentiment. +""" +deviation_chart_group = ChartGroup( + name="Deviation", + pages={"butterfly"}, + incomplete_pages={ + "diverging-bar", + # "diverging-stacked-bar", + "surplus", + }, + icon="Planner Review", + intro_text=deviation_intro_text, +) + + +correlation_intro_text = """ +Correlation helps you show the relationship between two or more variables. It is important that you +make it clear to your audience whether or not the relationship is causal, i.e., whether one causes the +other. +""" +correlation_chart_group = ChartGroup( + name="Correlation", + pages={"Scatter"}, + incomplete_pages={ + "scatter", + "scatter-matrix", + "column-line", + # "connected-scatter", + "heatmap-matrix", + "bubble", + }, + icon="Bubble Chart", + intro_text=correlation_intro_text, +) + + +ranking_intro_text = """ +Ranking enables you to present items in an ordered list. Use this when you want to highlight the +position of an item rather than its absolute or relative value. You might want to emphasize the most +interesting points with highlighting or labels to ensure the reader understands what matters most. +""" +ranking_chart_group = ChartGroup( + name="Ranking", + pages={"Ordered Bar", "Ordered Column"}, + incomplete_pages={ + "ordered-bar", + "ordered-column", + "ordered-bubble", + "slope", + "lollipop", + "stepped-line", + }, + icon="Stacked Bar Chart", + intro_text=ranking_intro_text, +) + + +distribution_intro_text = """ +Distribution helps you to present all the possible values (or intervals) of your data and how often they +occur. You can organize the data to show the number or percentage of items in a specified group, what shape +the group takes, where the center lies, and how much variability there is in the data. This shape +(or _skew_) of a distribution can be a powerful way for you to highlight either the existence or lack of +uniformity or equality in the data. +""" +distribution_chart_group = ChartGroup( + name="Distribution", + pages={"Boxplot", "Violin", "Distribution-Butterfly"}, + incomplete_pages={ + "histogram", + "dot-plot", + "barcode", + "cumulative-curve", + # "beeswarm", + }, + icon="Waterfall Chart", + intro_text=distribution_intro_text, +) + +magnitude_intro_text = """ +Magnitude allows you to emphasize size comparisons of **counted** items in your data set. You can show +relative comparisons (whether something is larger or smaller) or absolute differences (where the nuances +are most interesting). Typically, you will use magnitude for actual numbers versus calculated rates or +percentages. +""" +magnitude_chart_group = ChartGroup( + name="Magnitude", + pages={"Bar", "Column", "Magnitude-Treemap"}, + incomplete_pages={ + # "paired-column", + # "paired-bar", + "marimekko", + "bubble", + "lollipop", + "radar", + "parallel-coordinates", + "pictogram", + "bullet", + "radial", + }, + icon="Bar Chart", + intro_text=magnitude_intro_text, +) + +time_intro_text = """ +Time helps you draw attention to important trends emerging over a specified period. The time period you +select could be as short as seconds or as long as centuries. What matters most is selecting the correct +period of time to best show your audience the message they need to take away. +""" +time_chart_group = ChartGroup( + name="Time", + pages={"Line", "Time-Column"}, + incomplete_pages={ + "gantt", + "column-line", + "slope", + "fan", + # "area", + # "connected-scatter", + "heatmap", + "bubble-timeline", + "sparkline", + }, + icon="Timeline", + intro_text=time_intro_text, +) + + +part_to_whole_intro_text = """ +Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the +size of the parts to be most important, a magnitude chart may be more appropriate. +""" +part_to_whole_chart_group = ChartGroup( + name="Part-to-whole", + pages={"Donut", "Pie", "Treemap"}, + incomplete_pages={ + "stacked-bar", + "stacked-column", + "marimekko", + "funnel", + "arc", + "venn", + "waterfall", + }, + icon="Donut Small", + intro_text=part_to_whole_intro_text, +) + +flow_intro_text = """ +With flow charts, you can highlight the quantity or the intensity of the movement between more than one +state or condition. The flow might be steps in a logical sequence or movement between different geographical +locations. +""" +flow_chart_group = ChartGroup( + name="Flow", + pages={"sankey"}, + incomplete_pages={"waterfall", "chord", "network"}, + icon="Stacked Line Chart", + intro_text=flow_intro_text, +) + +spatial_intro_text = """ +Spatial charts allow you to demonstrate precise locations or geographical patterns in your data. +""" +spatial_chart_group = ChartGroup( + name="Spatial", + pages={"Choropleth"}, + incomplete_pages={"dot-map", "flow-map", "bubble-map"}, + icon="Map", + intro_text=spatial_intro_text, +) + + +CHART_GROUPS = [ + deviation_chart_group, + correlation_chart_group, + ranking_chart_group, + distribution_chart_group, + magnitude_chart_group, + time_chart_group, + part_to_whole_chart_group, + flow_chart_group, + spatial_chart_group, +] + +all_intro_text = """ +TODO: write this. +""" + + +def remove_duplicates(pages): + return {page.title: page for page in pages}.values() + + +# TODO: COMMENT + +ALL_CHART_GROUP = ChartGroup( + name="All", + pages=remove_duplicates(itertools.chain(*chart_group.pages for chart_group in CHART_GROUPS)), + incomplete_pages=remove_duplicates(itertools.chain(chart_group.incomplete_pages for chart_group in CHART_GROUPS)), + intro_text=all_intro_text, +) diff --git a/vizro-core/examples/_chart-gallery/utils/tab_containers.py b/vizro-core/examples/_chart-gallery/utils/tab_containers.py index f5631f130..e69de29bb 100644 --- a/vizro-core/examples/_chart-gallery/utils/tab_containers.py +++ b/vizro-core/examples/_chart-gallery/utils/tab_containers.py @@ -1,488 +0,0 @@ -"""Contains code for the containers used inside the tabs (homepage).""" - -import re -from itertools import chain - -import vizro.models as vm - -from .custom_extensions import FlexContainer, Markdown - -vm.Container.add_type("components", Markdown) -vm.Container.add_type("components", FlexContainer) - - -def remove_prefix(chart_title: str) -> str: - """Remove prefix from chart-title.""" - # Note: Prefixes are added to chart names that appear in multiple categories to ensure each chart has a - # unique page ID and path in the gallery. For example, the "butterfly" chart appears in both the deviation and - # distribution categories, so it is listed as "butterfly" and "distribution-butterfly". - # In this step, we remove these prefixes because we do not want them displayed in the chart titles. - prefixes_to_remove = [ - "time-", - "magnitude-", - "deviation-", - "distribution-", - "correlation-", - "ranking-", - "spatial-", - "part-", - ] - pattern = "^(" + "|".join(prefixes_to_remove) + ")" - chart_without_prefix = re.sub(pattern, "", chart_title) - return chart_without_prefix - - -def tidy_chart_title(chart: str) -> str: - """Tidy up the chart title by removing prefixes and unwanted characters.""" - return remove_prefix(chart).replace("-", " ").title() - - -# TODO: Once a chart type is completed, remove the comment. -COMPLETED_CHARTS = [ - # "arc", - # "area", - "bar", - # "barcode", - # "beeswarm", - "boxplot", - # "bubble", - # "bubble-map", - # "bubble-timeline", - # "bullet", - "butterfly", - # "chord", - "choropleth", - "column", - # "column-line", - # "connected-scatter", - # "cumulative-curve", - # "distribution-butterfly", - # "diverging-bar", - # "diverging-stacked-bar", - "donut", - # "dot-map", - # "dot-plot", - # "fan", - # "flow-map", - # "funnel", - # "gantt", - # "heatmap", - # "heatmap-matrix", - # "histogram", - "line", - # "lollipop", - # "marimekko", - # "network", - "ordered-bar", - # "ordered-bubble", - "ordered-column", - # "paired-bar", - # "paired-column", - # "parallel-coord", - # "pictogram", - "pie", - # "radar", - # "radial", - "sankey", - "scatter", - # "scatter-matrix", - # "slope", - # "sparkline", - # "stacked-bar", - # "stacked-column", - # "stepped-line", - # "surplus", - # "time-column", - "treemap", - # "venn", - "violin", - # "waterfall", -] - -# TODO: Charts that are commented out below do not have an svg made yet. Uncomment them once they are ready. -# The names correspond to the svg names. -DEVIATION_CHARTS = sorted( - [ - "diverging-bar", - # "diverging-stacked-bar", - "butterfly", - "surplus", - ] -) -CORRELATION_CHARTS = [ - "scatter", - "scatter-matrix", - "column-line", - # "connected-scatter", - "heatmap-matrix", - "bubble", -] -RANKING_CHARTS = sorted( - [ - "ordered-bar", - "ordered-column", - "ordered-bubble", - "slope", - "lollipop", - "stepped-line", - ] -) -DISTRIBUTION_CHARTS = sorted( - [ - "histogram", - "dot-plot", - "barcode", - "boxplot", - "violin", - "distribution-butterfly", - "cumulative-curve", - # "beeswarm", - ] -) -MAGNITUDE_CHARTS = sorted( - [ - "column", - "bar", - # "paired-column", - # "paired-bar", - "marimekko", - "bubble", - "lollipop", - "radar", - "parallel-coord", - "pictogram", - "bullet", - "radial", - ] -) -TIME_CHARTS = sorted( - [ - "line", - "time-column", - "gantt", - "column-line", - "slope", - "fan", - # "area", - # "connected-scatter", - "heatmap", - "bubble-timeline", - "sparkline", - ] -) -PART_TO_WHOLE_CHARTS = sorted( - [ - "stacked-bar", - "stacked-column", - "marimekko", - "funnel", - "pie", - "donut", - "treemap", - "arc", - "venn", - "waterfall", - ] -) -FLOW_CHARTS = sorted(["sankey", "waterfall", "chord", "network"]) -SPATIAL_CHARTS = sorted(["choropleth", "dot-map", "flow-map", "bubble-map"]) -ALL_CHARTS = sorted( - set( - map( - remove_prefix, - chain( - DEVIATION_CHARTS, - CORRELATION_CHARTS, - RANKING_CHARTS, - DISTRIBUTION_CHARTS, - MAGNITUDE_CHARTS, - TIME_CHARTS, - PART_TO_WHOLE_CHARTS, - FLOW_CHARTS, - SPATIAL_CHARTS, - ), - ) - ) -) - - -container_all = vm.Container( - title="All", - components=[ - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {tidy_chart_title(chart)} - """, - href=f"/{chart}" if chart in COMPLETED_CHARTS else "", - ) - for chart in ALL_CHARTS - ], - ) - ], -) - -container_deviation = vm.Container( - title="Deviation", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Deviation enables you to draw attention to variations (+/-) from a fixed reference point. - Often this reference point is zero, but you might also show a target or a long-term average. - You can also use deviation to express a positive, neutral or negative sentiment. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {tidy_chart_title(chart)} - """, - href=f"/{chart}" if chart in COMPLETED_CHARTS else "", - ) - for chart in DEVIATION_CHARTS - ], - ), - ], -) - -container_correlation = vm.Container( - title="Correlation", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Correlation helps you show the relationship between two or more variables. It is important that you - make it clear to your audience whether or not the relationship is causal, i.e., whether one causes the - other. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {tidy_chart_title(chart)} - """, - href=f"/{chart}" if chart in COMPLETED_CHARTS else "", - ) - for chart in CORRELATION_CHARTS - ], - ), - ], -) - -container_ranking = vm.Container( - title="Ranking", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Ranking enables you to present items in an ordered list. You will use this when you want to highlight the - position of an item rather than its absolute or relative value. You might want to emphasize the most - interesting points with highlighting or labels to ensure the reader understands what matters most. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {tidy_chart_title(chart)} - """, - href=f"/{chart}" if chart in COMPLETED_CHARTS else "", - ) - for chart in RANKING_CHARTS - ], - ), - ], -) - -container_distribution = vm.Container( - title="Distribution", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Distribution helps you to present all the possible values (or intervals) of your data and how often they - occur. You can organize the data to show the number or percentage of items in a specified group, what shape - the group takes, where the center lies, and how much variability there is in the data. This shape - (or **skew**) of a distribution can be a powerful way for you to highlight either the existence or lack of - uniformity or equality in the data. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {tidy_chart_title(chart)} - """, - href=f"/{chart}" if chart in COMPLETED_CHARTS else "", - ) - for chart in DISTRIBUTION_CHARTS - ], - ), - ], -) - -container_magnitude = vm.Container( - title="Magnitude", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Magnitude allows you to emphasize size comparisons of **counted** items in your data set. You can show - relative comparisons (whether something is larger or smaller) or absolute differences (where the nuances - are most interesting). Typically, you will use magnitude for actual numbers versus calculated rates or - percentages. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {tidy_chart_title(chart)} - """, - href=f"/{chart}" if chart in COMPLETED_CHARTS else "", - ) - for chart in MAGNITUDE_CHARTS - ], - ), - ], -) - -container_time = vm.Container( - title="Time", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Time helps you draw attention to important trends emerging over a specified period. The time period you - select could be as short as seconds or as long as centuries. What matters most is selecting the correct - period of time to best show your audience the message they need to take away. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {tidy_chart_title(chart)} - """, - href=f"/{chart}" if chart in COMPLETED_CHARTS else "", - ) - for chart in TIME_CHARTS - ], - ), - ], -) - -container_part = vm.Container( - title="Part-to-whole", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the - size of the parts to be most important, a magnitude chart may be more appropriate. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {tidy_chart_title(chart)} - """, - href=f"/{chart}" if chart in COMPLETED_CHARTS else "", - ) - for chart in PART_TO_WHOLE_CHARTS - ], - ), - ], -) - -container_flow = vm.Container( - title="Flow", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - With flow charts, you can highlight the quantity or the intensity of the movement between more than one - state or condition. The flow might be steps in a logical sequence or movement between different geographical - locations. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {tidy_chart_title(chart)} - """, - href=f"/{chart}" if chart in COMPLETED_CHARTS else "", - ) - for chart in FLOW_CHARTS - ], - ), - ], -) - -container_spatial = vm.Container( - title="Spatial", - layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), - components=[ - Markdown( - text=""" - Spatial charts allow you to demonstrate precise locations or geographical patterns in your data. - """, - classname="intro-text", - ), - FlexContainer( - title="", - components=[ - vm.Card( - text=f""" - ![](assets/images/charts/{chart}.svg#chart-icon) - - #### {tidy_chart_title(chart)} - """, - href=f"/{chart}" if chart in COMPLETED_CHARTS else "", - ) - for chart in SPATIAL_CHARTS - ], - ), - ], -) From 5c7d1494fe4b187967512ab0508cd9ee6a7561c0 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Wed, 24 Jul 2024 10:06:24 +0100 Subject: [PATCH 083/109] - Move non-repeated charts from chart_pages to separate pges files - Split out examples and apply black --- vizro-core/examples/_chart-gallery/app.py | 26 +- ...parallel-coord.svg => parallel-coords.svg} | 0 .../examples/_chart-gallery/chart_groups.py | 184 +++---- .../examples/_chart-gallery/pages/__init__.py | 2 + .../_chart-gallery/pages/correlation.py | 3 + .../_chart-gallery/pages/deviation.py | 3 + .../_chart-gallery/pages/distribution.py | 75 +++ .../_chart-gallery/pages/examples/__init__.py | 0 .../_chart-gallery/pages/examples/boxplot.py | 22 + .../pages/examples/choropleth.py | 25 + .../_chart-gallery/pages/examples/donut.py | 22 + .../_chart-gallery/pages/examples/line.py | 13 + .../_chart-gallery/pages/examples/pie.py | 13 + .../_chart-gallery/pages/examples/sankey.py | 63 +++ .../_chart-gallery/pages/examples/violin.py | 22 + .../examples/_chart-gallery/pages/flow.py | 44 ++ .../_chart-gallery/pages/magnitude.py | 5 + .../_chart-gallery/pages/part_to_whole.py | 75 +++ .../examples/_chart-gallery/pages/ranking.py | 4 + .../examples/_chart-gallery/pages/spatial.py | 41 ++ .../examples/_chart-gallery/pages/time.py | 33 ++ .../_chart-gallery/utils/_page_utils.py | 12 + .../_chart-gallery/utils/chart_pages.py | 474 ------------------ .../_chart-gallery/utils/custom_extensions.py | 14 +- vizro-core/hatch.toml | 3 +- 25 files changed, 601 insertions(+), 577 deletions(-) rename vizro-core/examples/_chart-gallery/assets/images/charts/{parallel-coord.svg => parallel-coords.svg} (100%) create mode 100644 vizro-core/examples/_chart-gallery/pages/__init__.py create mode 100644 vizro-core/examples/_chart-gallery/pages/correlation.py create mode 100644 vizro-core/examples/_chart-gallery/pages/deviation.py create mode 100644 vizro-core/examples/_chart-gallery/pages/distribution.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/__init__.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/boxplot.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/choropleth.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/donut.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/line.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/pie.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/sankey.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/violin.py create mode 100644 vizro-core/examples/_chart-gallery/pages/flow.py create mode 100644 vizro-core/examples/_chart-gallery/pages/magnitude.py create mode 100644 vizro-core/examples/_chart-gallery/pages/part_to_whole.py create mode 100644 vizro-core/examples/_chart-gallery/pages/ranking.py create mode 100644 vizro-core/examples/_chart-gallery/pages/spatial.py create mode 100644 vizro-core/examples/_chart-gallery/pages/time.py diff --git a/vizro-core/examples/_chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py index 8b2ec5973..c8f0f9a2a 100644 --- a/vizro-core/examples/_chart-gallery/app.py +++ b/vizro-core/examples/_chart-gallery/app.py @@ -1,22 +1,25 @@ """App configuration for chart gallery dashboard.""" +from typing import Union + import itertools import vizro.models as vm -from chart_groups import ChartGroup, CHART_GROUPS, ALL_CHART_GROUP +from chart_groups import ChartGroup, CHART_GROUPS, ALL_CHART_GROUP, IncompletePage from utils.custom_extensions import Markdown, FlexContainer from vizro import Vizro -def make_chart_card(page: vm.Page, complete: bool): +def make_chart_card(page: Union[vm.Page, IncompletePage]): svg_name = page.title.lower().replace(" ", "-") + # asset url correctly return vm.Card( text=f""" - ![](assets/images/pages/{svg_name}.svg#page-icon) + ![](assets/images/charts/{svg_name}.svg#chart-icon) #### {page.title} """, - href=f"/{page.path}" if complete else "", + href=page.path, ) @@ -29,8 +32,11 @@ def make_homepage_container(chart_group: ChartGroup): FlexContainer( title="", components=[ - make_chart_card(page, page in chart_group.pages) - for page in sorted(chart_group.pages | chart_group.incomplete_pages) + make_chart_card(page) + for page in sorted( + chart_group.pages + chart_group.incomplete_pages, + key=lambda page: page.title, + ) ], ), ], @@ -40,15 +46,11 @@ def make_homepage_container(chart_group: ChartGroup): def make_navlink(chart_group: ChartGroup): return vm.NavLink( label=chart_group.name, - pages={chart_group.name: sorted(page.id for page in chart_group.pages)}, + pages={chart_group.name: [page.id for page in sorted(chart_group.pages, key=lambda page: page.title)]}, icon=chart_group.icon, ) -vm.Container.add_type("components", Markdown) -vm.Container.add_type("components", FlexContainer) - - homepage = vm.Page( title="Overview", components=[ @@ -99,7 +101,7 @@ def make_navlink(chart_group: ChartGroup): # TODO: maybe nice to have an overall dashboard title? "Vizro chart gallery" or similar. dashboard = vm.Dashboard( # note has duplicates - pages=itertools.chain(*chart_group.pages for chart_group in CHART_GROUPS), + pages=[homepage, *list(itertools.chain(*(chart_group.pages for chart_group in CHART_GROUPS)))], navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coord.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coords.svg similarity index 100% rename from vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coord.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coords.svg diff --git a/vizro-core/examples/_chart-gallery/chart_groups.py b/vizro-core/examples/_chart-gallery/chart_groups.py index 4e6049092..a7ec74896 100644 --- a/vizro-core/examples/_chart-gallery/chart_groups.py +++ b/vizro-core/examples/_chart-gallery/chart_groups.py @@ -1,38 +1,47 @@ # """Contains code for the containers used inside the tabs (homepage).""" import itertools -from typing import Set +from typing import Set, List from dataclasses import dataclass +import pages.deviation, pages.correlation, pages.ranking, pages.magnitude, pages.time, pages.spatial, pages.distribution, pages.flow, pages.part_to_whole import vizro.models as vm +# COMMENT + + +@dataclass +class IncompletePage: + title: str + path: str = "" + @dataclass class ChartGroup: name: str - pages: Set[vm.Page] # Just completed, not all pages - incomplete_pages: Set[vm.Page] - icon: str + pages: List[vm.Page] # Just completed, not all pages + incomplete_pages: List[IncompletePage] intro_text: str + icon: str = "" # TODO: Charts that are commented out in incomplete_pages below do not have an svg made yet. # Uncomment them once they are ready. deviation_intro_text = """ -Deviation enables you to draw attention to variations (+/-) from a fixed reference point. -Often this reference point is zero, but you might also show a target or a long-term average. +Deviation enables you to draw attention to variations (+/ ) from a fixed reference point. +Often this reference point is zero, but you might also show a target or a long term average. You can also use deviation to express a positive, neutral or negative sentiment. """ deviation_chart_group = ChartGroup( name="Deviation", - pages={"butterfly"}, - incomplete_pages={ - "diverging-bar", - # "diverging-stacked-bar", - "surplus", - }, + pages=pages.deviation.pages, + incomplete_pages=[ + IncompletePage(title="Diverging bar"), + # IncompletePage("Diverging stacked bar"), + IncompletePage(title="Surplus"), + ], icon="Planner Review", intro_text=deviation_intro_text, ) @@ -45,15 +54,14 @@ class ChartGroup: """ correlation_chart_group = ChartGroup( name="Correlation", - pages={"Scatter"}, - incomplete_pages={ - "scatter", - "scatter-matrix", - "column-line", - # "connected-scatter", - "heatmap-matrix", - "bubble", - }, + pages=pages.correlation.scatter, + incomplete_pages=[ + IncompletePage("Scatter matrix"), + IncompletePage("Column line"), + # IncompletePage("Connected scatter"), + IncompletePage("Heatmap matrix"), + IncompletePage("Bubble"), + ], icon="Bubble Chart", intro_text=correlation_intro_text, ) @@ -66,15 +74,13 @@ class ChartGroup: """ ranking_chart_group = ChartGroup( name="Ranking", - pages={"Ordered Bar", "Ordered Column"}, - incomplete_pages={ - "ordered-bar", - "ordered-column", - "ordered-bubble", - "slope", - "lollipop", - "stepped-line", - }, + pages=pages.ranking.pages, + incomplete_pages=[ + IncompletePage("Ordered bubble"), + IncompletePage("Slope"), + IncompletePage("Lollipop"), + IncompletePage("Stepped line"), + ], icon="Stacked Bar Chart", intro_text=ranking_intro_text, ) @@ -89,14 +95,14 @@ class ChartGroup: """ distribution_chart_group = ChartGroup( name="Distribution", - pages={"Boxplot", "Violin", "Distribution-Butterfly"}, - incomplete_pages={ - "histogram", - "dot-plot", - "barcode", - "cumulative-curve", - # "beeswarm", - }, + pages=pages.distribution.pages, + incomplete_pages=[ + IncompletePage("Histogram"), + IncompletePage("Dot plot"), + IncompletePage("Barcode"), + IncompletePage("Cumulative curve"), + # IncompletePage("Beeswarm"), + ], icon="Waterfall Chart", intro_text=distribution_intro_text, ) @@ -109,19 +115,19 @@ class ChartGroup: """ magnitude_chart_group = ChartGroup( name="Magnitude", - pages={"Bar", "Column", "Magnitude-Treemap"}, - incomplete_pages={ - # "paired-column", - # "paired-bar", - "marimekko", - "bubble", - "lollipop", - "radar", - "parallel-coordinates", - "pictogram", - "bullet", - "radial", - }, + pages=pages.magnitude.pages, + incomplete_pages=[ + # IncompletePage("Paired column", + # IncompletePage("Paired bar", + IncompletePage("Marimekko"), + IncompletePage("Bubble"), + IncompletePage("Lollipop"), + IncompletePage("Radar"), + IncompletePage("Parallel coords"), + IncompletePage("Pictogram"), + IncompletePage("Bullet"), + IncompletePage("Radial"), + ], icon="Bar Chart", intro_text=magnitude_intro_text, ) @@ -133,39 +139,39 @@ class ChartGroup: """ time_chart_group = ChartGroup( name="Time", - pages={"Line", "Time-Column"}, - incomplete_pages={ - "gantt", - "column-line", - "slope", - "fan", - # "area", - # "connected-scatter", - "heatmap", - "bubble-timeline", - "sparkline", - }, + pages=pages.time.pages, + incomplete_pages=[ + IncompletePage("Gantt"), + IncompletePage("Column line"), + IncompletePage("Slope"), + IncompletePage("Fan"), + # IncompletePage("Area"), + # IncompletePage("Connected scatter"), + IncompletePage("Heatmap"), + IncompletePage("Bubble timeline"), + IncompletePage("Sparkline"), + ], icon="Timeline", intro_text=time_intro_text, ) part_to_whole_intro_text = """ -Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the +Part to whole helps you show how one whole item breaks down into its component parts. If you consider the size of the parts to be most important, a magnitude chart may be more appropriate. """ part_to_whole_chart_group = ChartGroup( - name="Part-to-whole", - pages={"Donut", "Pie", "Treemap"}, - incomplete_pages={ - "stacked-bar", - "stacked-column", - "marimekko", - "funnel", - "arc", - "venn", - "waterfall", - }, + name="Part to whole", + pages=pages.part_to_whole.pages, + incomplete_pages=[ + IncompletePage("Stacked bar"), + IncompletePage("Stacked column"), + IncompletePage("Marimekko"), + IncompletePage("Funnel"), + IncompletePage("Arc"), + IncompletePage("Venn"), + IncompletePage("Waterfall"), + ], icon="Donut Small", intro_text=part_to_whole_intro_text, ) @@ -177,8 +183,8 @@ class ChartGroup: """ flow_chart_group = ChartGroup( name="Flow", - pages={"sankey"}, - incomplete_pages={"waterfall", "chord", "network"}, + pages=pages.flow.pages, + incomplete_pages=[IncompletePage("Waterfall"), IncompletePage("Chord"), IncompletePage("Network")], icon="Stacked Line Chart", intro_text=flow_intro_text, ) @@ -188,19 +194,19 @@ class ChartGroup: """ spatial_chart_group = ChartGroup( name="Spatial", - pages={"Choropleth"}, - incomplete_pages={"dot-map", "flow-map", "bubble-map"}, + pages=pages.spatial.pages, + incomplete_pages=[IncompletePage("Dot map"), IncompletePage("Flow map"), IncompletePage("Bubble map")], icon="Map", intro_text=spatial_intro_text, ) CHART_GROUPS = [ - deviation_chart_group, - correlation_chart_group, - ranking_chart_group, + # deviation_chart_group, + # correlation_chart_group, + # ranking_chart_group, distribution_chart_group, - magnitude_chart_group, + # magnitude_chart_group, time_chart_group, part_to_whole_chart_group, flow_chart_group, @@ -212,15 +218,17 @@ class ChartGroup: """ -def remove_duplicates(pages): - return {page.title: page for page in pages}.values() +def remove_duplicated_titles(pages): + return list({page.title: page for page in pages}.values()) -# TODO: COMMENT +# TODO: COMMENT, maybe refactor into remove_duplicated_titles ALL_CHART_GROUP = ChartGroup( name="All", - pages=remove_duplicates(itertools.chain(*chart_group.pages for chart_group in CHART_GROUPS)), - incomplete_pages=remove_duplicates(itertools.chain(chart_group.incomplete_pages for chart_group in CHART_GROUPS)), + pages=remove_duplicated_titles(itertools.chain(*(chart_group.pages for chart_group in CHART_GROUPS))), + incomplete_pages=remove_duplicated_titles( + itertools.chain(*(chart_group.incomplete_pages for chart_group in CHART_GROUPS)) + ), intro_text=all_intro_text, ) diff --git a/vizro-core/examples/_chart-gallery/pages/__init__.py b/vizro-core/examples/_chart-gallery/pages/__init__.py new file mode 100644 index 000000000..16ed9d148 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/__init__.py @@ -0,0 +1,2 @@ +# AM: eventually deduplicate page stuff into function - can do find and replace with a regex or similar... +# Or do it now? diff --git a/vizro-core/examples/_chart-gallery/pages/correlation.py b/vizro-core/examples/_chart-gallery/pages/correlation.py new file mode 100644 index 000000000..61322e867 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/correlation.py @@ -0,0 +1,3 @@ +scatter = "scatter" + +pages = [scatter] diff --git a/vizro-core/examples/_chart-gallery/pages/deviation.py b/vizro-core/examples/_chart-gallery/pages/deviation.py new file mode 100644 index 000000000..2a6b663a8 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/deviation.py @@ -0,0 +1,3 @@ +butterfly = "butterfly" + +pages = [butterfly] diff --git a/vizro-core/examples/_chart-gallery/pages/distribution.py b/vizro-core/examples/_chart-gallery/pages/distribution.py new file mode 100644 index 000000000..1f13f6411 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/distribution.py @@ -0,0 +1,75 @@ +import vizro.models as vm +import vizro.plotly.express as px +from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file + +violin = vm.Page( + title="Violin", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a violin chart? + + A violin chart is similar to a box plot, but works better for visualizing more complex distributions and + their probability density at different values. + +   + + #### When to use it? + + Use this chart to go beyond the simple box plot and show the distribution shape of the data, the + inter-quartile range, the confidence intervals and the median. + """ + ), + vm.Graph( + figure=px.violin( + data_frame=DATA_DICT["tips"], + y="total_bill", + x="day", + color="day", + ) + ), + make_code_clipboard_from_py_file("violin.py"), + ], +) + +boxplot = vm.Page( + title="Boxplot", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a boxplot? + + A box plot (also known as whisker plot) provides a visual display of multiple datasets, + indicating the median (center) and the range of the data for each. + +   + + #### When to use it? + + Choose a box plot when you need to summarize distributions between many groups or datasets. It takes up + less space than many other charts. + + Create boxes to display the median, and the upper and lower quartiles. Add `whiskers` to highlight + variability outside the upper and lower quartiles. You can add outliers as dots beyond, but in line with + the whiskers. + """ + ), + vm.Graph( + figure=px.box( + data_frame=DATA_DICT["tips"], + y="total_bill", + x="day", + color="day", + ) + ), + make_code_clipboard_from_py_file("boxplot.py"), + ], +) + +pages = [violin, boxplot] + +# # "Butterfly"], diff --git a/vizro-core/examples/_chart-gallery/pages/examples/__init__.py b/vizro-core/examples/_chart-gallery/pages/examples/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/vizro-core/examples/_chart-gallery/pages/examples/boxplot.py b/vizro-core/examples/_chart-gallery/pages/examples/boxplot.py new file mode 100644 index 000000000..cb0ccbf57 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/boxplot.py @@ -0,0 +1,22 @@ +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +tips = px.data.tips() + +page = vm.Page( + title="Boxplot", + components=[ + vm.Graph( + figure=px.boxplot( + data_frame=tips, + y="total_bill", + x="day", + color="day", + ) + ), + ], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/choropleth.py b/vizro-core/examples/_chart-gallery/pages/examples/choropleth.py new file mode 100644 index 000000000..6b82e83f2 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/choropleth.py @@ -0,0 +1,25 @@ +import json + +import pandas as pd +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +gapminder_2007 = px.data.gapminder().query("year == 2007") + +page = vm.Page( + title="Choropleth", + components=[ + vm.Graph( + figure=px.choropleth( + gapminder_2007, + locations="iso_alpha", + color="lifeExp", + hover_name="country", + ) + ) + ], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/donut.py b/vizro-core/examples/_chart-gallery/pages/examples/donut.py new file mode 100644 index 000000000..2faa0c814 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/donut.py @@ -0,0 +1,22 @@ +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +tips = px.data.tips() + +page = vm.Page( + title="Donut", + components=[ + vm.Graph( + figure=px.pie( + data_frame=tips, + values="tip", + names="day", + hole=0.4, + ) + ) + ], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/line.py b/vizro-core/examples/_chart-gallery/pages/examples/line.py new file mode 100644 index 000000000..c442a8994 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/line.py @@ -0,0 +1,13 @@ +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +stocks = px.data.stocks() + +page = vm.Page( + title="Line", + components=[vm.Graph(figure=px.line(stocks, x="date", y="GOOG"))], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/pie.py b/vizro-core/examples/_chart-gallery/pages/examples/pie.py new file mode 100644 index 000000000..8ab50ea0a --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/pie.py @@ -0,0 +1,13 @@ +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +tips = px.data.tips() + +page = vm.Page( + title="Pie", + components=[vm.Graph(figure=px.pie(data_frame=tips, values="tip", names="day"))], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/sankey.py b/vizro-core/examples/_chart-gallery/pages/examples/sankey.py new file mode 100644 index 000000000..20d1f3212 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/sankey.py @@ -0,0 +1,63 @@ +import pandas as pd +import plotly.graph_objects as go +import vizro.models as vm +from vizro import Vizro +from vizro.models.types import capture +from typing import List + +sankey_data = pd.DataFrame( + { + "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels + "Destination": [1, 2, 3, 4, 5, 5, 6], # indices inside labels + "Value": [10, 4, 8, 6, 4, 8, 8], + } +) + + +@capture("graph") +def sankey( + data_frame: pd.DataFrame, + source: str, + target: str, + value: str, + labels: List[str], +): + fig = go.Figure( + data=[ + go.Sankey( + node=dict( + pad=16, + thickness=16, + label=labels, + ), + link=dict( + source=data_frame[source], + target=data_frame[target], + value=data_frame[value], + label=labels, + color="rgba(205, 209, 228, 0.4)", + ), + ) + ] + ) + fig.update_layout(barmode="relative") + return fig + + +page = vm.Page( + title="Sankey", + components=[ + vm.Graph( + figure=sankey( + data_frame=sankey_data, + labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], + source="Origin", + target="Destination", + value="Value", + ), + ), + ], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/violin.py b/vizro-core/examples/_chart-gallery/pages/examples/violin.py new file mode 100644 index 000000000..4aee09dd3 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/violin.py @@ -0,0 +1,22 @@ +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +tips = px.data.tips() + +page = vm.Page( + title="Violin", + components=[ + vm.Graph( + figure=px.violin( + data_frame=tips, + y="total_bill", + x="day", + color="day", + ) + ), + ], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/flow.py b/vizro-core/examples/_chart-gallery/pages/flow.py new file mode 100644 index 000000000..699c0987e --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/flow.py @@ -0,0 +1,44 @@ +import vizro.models as vm +import vizro.plotly.express as px +from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from utils.custom_extensions import sankey + +sankey = vm.Page( + title="Sankey", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + #### What is a sankey chart? + + A Sankey chart is a type of flow diagram that illustrates how resources or values move between different + stages or entities. The width of the arrows in the chart is proportional to the quantity of the flow, + making it easy to see where the largest movements occur. + +   + + #### When to use it? + + Use a Sankey chart when you want to visualize the flow of resources, energy, money, or other values from + one point to another. It is particularly useful for showing distributions and transfers within a system, + such as energy usage, cost breakdowns, or material flows. + + Be mindful that Sankey charts can become cluttered if there are too many nodes or flows. + To maintain clarity, focus on highlighting the most significant flows and keep the chart as simple as + possible. + """ + ), + vm.Graph( + figure=sankey( + data_frame=DATA_DICT["sankey_data"], + labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], + source="Origin", + target="Destination", + value="Value", + ), + ), + make_code_clipboard_from_py_file("sankey.py"), + ], +) + +pages = [sankey] diff --git a/vizro-core/examples/_chart-gallery/pages/magnitude.py b/vizro-core/examples/_chart-gallery/pages/magnitude.py new file mode 100644 index 000000000..61562f7e9 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/magnitude.py @@ -0,0 +1,5 @@ +bar = "bar" +column = "column" +treemap = "treemap" + +pages = [bar, column, treemap] diff --git a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py new file mode 100644 index 000000000..fa3187f93 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py @@ -0,0 +1,75 @@ +import vizro.models as vm +import vizro.plotly.express as px +from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file + +pie = vm.Page( + title="Pie", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a pie chart? + + A pie chart is a circular chart divided into segments to show proportions and percentages between + categories. The circle represents the whole. + +   + + #### When to use it? + + Use the pie chart when you need to show your audience a quick view of how data is distributed + proportionately, with percentages highlighted. The different values you present must add up to a total and + equal 100%. + + The downsides are that pie charts tend to occupy more space than other charts, they don`t + work well with more than a few values because labeling small segments is challenging, and it can be + difficult to accurately compare the sizes of the segments. + """ + ), + vm.Graph( + figure=px.pie( + data_frame=DATA_DICT["tips"], + values="tip", + names="day", + ) + ), + make_code_clipboard_from_py_file("pie.py"), + ], +) + +donut = vm.Page( + title="Donut", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a donut chart? + + A donut chart looks like a pie chart, but has a blank space in the center which may contain additional + information. + +   + + #### When to use it? + + A donut chart can be used in place of a pie chart, particularly when you are short of space or have extra + information you would like to share about the data. It may also be more effective if you wish your audience + to focus on the length of the arcs of the sections instead of the proportions of the segment sizes. + """ + ), + vm.Graph( + figure=px.pie( + data_frame=DATA_DICT["tips"], + values="tip", + names="day", + hole=0.4, + ) + ), + make_code_clipboard_from_py_file("pie.py"), + ], +) + +pages = [donut, pie] +# treemap diff --git a/vizro-core/examples/_chart-gallery/pages/ranking.py b/vizro-core/examples/_chart-gallery/pages/ranking.py new file mode 100644 index 000000000..da4190f5a --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/ranking.py @@ -0,0 +1,4 @@ +ordered_bar = "ordered_bar" +ordered_column = "ordered_column" + +pages = [ordered_bar, ordered_column] diff --git a/vizro-core/examples/_chart-gallery/pages/spatial.py b/vizro-core/examples/_chart-gallery/pages/spatial.py new file mode 100644 index 000000000..63a10170b --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/spatial.py @@ -0,0 +1,41 @@ +import vizro.models as vm +import vizro.plotly.express as px +from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file + +choropleth = vm.Page( + title="Choropleth", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + #### What is a choropleth map? + + A choropleth map is a map in which geographical areas are colored, shaded or patterned in relation to a + specific data variable. + +   + + #### When to use it? + + Use a chloropleth map when you wish to show how a measurement varies across a geographic area, or to show + variability or patterns within a region. Typically, you will blend one color into another, take a color + shade from light to dark, or introduce patterns to depict the variation in the data. + + Be aware that it may be difficult for your audience to accurately read or compare values on the map + depicted by color. + + """ + ), + vm.Graph( + figure=px.choropleth( + DATA_DICT["gapminder_2007"], + locations="iso_alpha", + color="lifeExp", + hover_name="country", + ) + ), + make_code_clipboard_from_py_file("choropleth.py"), + ], +) + +pages = [choropleth] diff --git a/vizro-core/examples/_chart-gallery/pages/time.py b/vizro-core/examples/_chart-gallery/pages/time.py new file mode 100644 index 000000000..0c7d1707d --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/time.py @@ -0,0 +1,33 @@ +import vizro.models as vm +import vizro.plotly.express as px +from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file + +line = vm.Page( + title="Line", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a line chart? + + A line chart presents a series of data points over a continuous interval or time period, joined together + with straight lines. + +   + + #### When to use it? + + You should select a line chart when you want to show trends over time. Usually, your y-axis will show a + quantitative value and your x-axis will be marked as a timescale or a sequence of intervals. You can also + display negative values below the x-axis. If you wish to group several lines (different data series) in the + same chart, try to limit yourself to 3-4 to avoid cluttering up your chart. + """ + ), + vm.Graph(figure=px.line(DATA_DICT["stocks"], x="date", y="GOOG")), + make_code_clipboard_from_py_file("line.py"), + ], +) + +pages = [line] +# column diff --git a/vizro-core/examples/_chart-gallery/utils/_page_utils.py b/vizro-core/examples/_chart-gallery/utils/_page_utils.py index 1fbb619db..3ba33ffae 100644 --- a/vizro-core/examples/_chart-gallery/utils/_page_utils.py +++ b/vizro-core/examples/_chart-gallery/utils/_page_utils.py @@ -1,7 +1,19 @@ """Contains reusable data sets and constants.""" +from pathlib import Path +import black import pandas as pd import vizro.plotly.express as px +from utils.custom_extensions import CodeClipboard + + +def make_code_clipboard_from_py_file(filepath: str): + # comment on stability + filepath = Path(__file__).parents[1] / "pages/examples" / filepath + return CodeClipboard( + code=black.format_str(filepath.read_text(encoding="utf-8"), mode=black.Mode()), language="python" + ) + # DATA -------------------------------------------------------------- gapminder = px.data.gapminder() diff --git a/vizro-core/examples/_chart-gallery/utils/chart_pages.py b/vizro-core/examples/_chart-gallery/utils/chart_pages.py index 1a97ebd7a..45c76fcb9 100644 --- a/vizro-core/examples/_chart-gallery/utils/chart_pages.py +++ b/vizro-core/examples/_chart-gallery/utils/chart_pages.py @@ -13,12 +13,6 @@ ) from .custom_extensions import CodeClipboard, FlexContainer, Markdown, sankey -# COMPONENTS -------------------------------------------------------- -vm.Page.add_type("components", CodeClipboard) -vm.Page.add_type("components", FlexContainer) -vm.Container.add_type("components", Markdown) - - # PAGES ------------------------------------------------------------- time_column = column_factory("Time-Column", "Column") scatter = scatter_factory("Scatter", "Scatter") @@ -30,471 +24,3 @@ magnitude_treemap = treemap_factory("Magnitude-Treemap", "Treemap") butterfly_page = butterfly_factory("Butterfly", "Butterfly") distribution_butterfly = butterfly_factory("Distribution-Butterfly", "Butterfly") - - -line = vm.Page( - title="Line", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a line chart? - - A line chart presents a series of data points over a continuous interval or time period, joined together - with straight lines. - -   - - #### When to use it? - - You should select a line chart when you want to show trends over time. Usually, your y-axis will show a - quantitative value and your x-axis will be marked as a timescale or a sequence of intervals. You can also - display negative values below the x-axis. If you wish to group several lines (different data series) in the - same chart, try to limit yourself to 3-4 to avoid cluttering up your chart. - """ - ), - vm.Graph(figure=px.line(DATA_DICT["stocks"], x="date", y="GOOG")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - stocks = px.data.stocks() - - page = vm.Page( - title="Line", - components=[ - vm.Graph( - figure=px.line( - stocks, x="date", y="GOOG" - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - -pie = vm.Page( - title="Pie", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a pie chart? - - A pie chart is a circular chart divided into segments to show proportions and percentages between - categories. The circle represents the whole. - -   - - #### When to use it? - - Use the pie chart when you need to show your audience a quick view of how data is distributed - proportionately, with percentages highlighted. The different values you present must add up to a total and - equal 100%. - - The downsides are that pie charts tend to occupy more space than other charts, they don`t - work well with more than a few values because labeling small segments is challenging, and it can be - difficult to accurately compare the sizes of the segments. - """ - ), - vm.Graph( - figure=px.pie( - data_frame=DATA_DICT["tips"], - values="tip", - names="day", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Pie", - components=[ - vm.Graph( - figure=px.pie( - data_frame=tips, - values="tip", - names="day", - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - - -donut = vm.Page( - title="Donut", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a donut chart? - - A donut chart looks like a pie chart, but has a blank space in the center which may contain additional - information. - -   - - #### When to use it? - - A donut chart can be used in place of a pie chart, particularly when you are short of space or have extra - information you would like to share about the data. It may also be more effective if you wish your audience - to focus on the length of the arcs of the sections instead of the proportions of the segment sizes. - """ - ), - vm.Graph( - figure=px.pie( - data_frame=DATA_DICT["tips"], - values="tip", - names="day", - hole=0.4, - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Donut", - components=[ - vm.Graph( - figure=px.pie( - data_frame=tips, - values="tip", - names="day", - hole=0.4, - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - - -boxplot = vm.Page( - title="Boxplot", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a boxplot? - - A box plot (also known as whisker plot) provides a visual display of multiple datasets, - indicating the median (center) and the range of the data for each. - -   - - #### When to use it? - - Choose a box plot when you need to summarize distributions between many groups or datasets. It takes up - less space than many other charts. - - Create boxes to display the median, and the upper and lower quartiles. Add `whiskers` to highlight - variability outside the upper and lower quartiles. You can add outliers as dots beyond, but in line with - the whiskers. - """ - ), - vm.Graph( - figure=px.box( - data_frame=DATA_DICT["tips"], - y="total_bill", - x="day", - color="day", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Boxplot", - components=[ - vm.Graph( - figure=px.boxplot( - data_frame=tips, - y="total_bill", - x="day", - color="day", - ) - ), - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - - -violin = vm.Page( - title="Violin", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a violin chart? - - A violin chart is similar to a box plot, but works better for visualizing more complex distributions and - their probability density at different values. - -   - - #### When to use it? - - Use this chart to go beyond the simple box plot and show the distribution shape of the data, the - inter-quartile range, the confidence intervals and the median. - """ - ), - vm.Graph( - figure=px.violin( - data_frame=DATA_DICT["tips"], - y="total_bill", - x="day", - color="day", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - - page = vm.Page( - title="Violin", - components=[ - vm.Graph( - figure=px.violin( - data_frame=tips, - y="total_bill", - x="day", - color="day", - ) - ), - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - -choropleth = vm.Page( - title="Choropleth", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - #### What is a choropleth map? - - A choropleth map is a map in which geographical areas are colored, shaded or patterned in relation to a - specific data variable. - -   - - #### When to use it? - - Use a chloropleth map when you wish to show how a measurement varies across a geographic area, or to show - variability or patterns within a region. Typically, you will blend one color into another, take a color - shade from light to dark, or introduce patterns to depict the variation in the data. - - Be aware that it may be difficult for your audience to accurately read or compare values on the map - depicted by color. - - """ - ), - vm.Graph( - figure=px.choropleth( - DATA_DICT["gapminder_2007"], - locations="iso_alpha", - color="lifeExp", - hover_name="country", - ) - ), - CodeClipboard( - text=""" - ```python - import json - - import pandas as pd - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - gapminder_2007 = px.data.gapminder().query("year == 2007") - - page = vm.Page( - title="Choropleth", - components=[ - vm.Graph( - figure=px.choropleth( - gapminder_2007, - locations="iso_alpha", - color="lifeExp", - hover_name="country", - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) - - -sankey_page = vm.Page( - title="Sankey", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - #### What is a sankey chart? - - A Sankey chart is a type of flow diagram that illustrates how resources or values move between different - stages or entities. The width of the arrows in the chart is proportional to the quantity of the flow, - making it easy to see where the largest movements occur. - -   - - #### When to use it? - - Use a Sankey chart when you want to visualize the flow of resources, energy, money, or other values from - one point to another. It is particularly useful for showing distributions and transfers within a system, - such as energy usage, cost breakdowns, or material flows. - - Be mindful that Sankey charts can become cluttered if there are too many nodes or flows. - To maintain clarity, focus on highlighting the most significant flows and keep the chart as simple as - possible. - """ - ), - vm.Graph( - figure=sankey( - data_frame=DATA_DICT["sankey_data"], - labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], - source="Origin", - target="Destination", - value="Value", - ), - ), - CodeClipboard( - text=""" - ```python - import pandas as pd - import plotly.graph_objects as go - import vizro.models as vm - from vizro import Vizro - from vizro.models.types import capture - from typing import List - - sankey_data = pd.DataFrame( - { - "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels - "Destination": [1, 2, 3, 4, 5, 5, 6], # indices inside labels - "Value": [10, 4, 8, 6, 4, 8, 8], - } - ) - - - @capture("graph") - def sankey( - data_frame: pd.DataFrame, - source: str, - target: str, - value: str, - labels: List[str], - ): - fig = go.Figure( - data=[ - go.Sankey( - node=dict(pad=16, thickness=16, label=labels,), - link=dict( - source=data_frame[source], - target=data_frame[target], - value=data_frame[value], - label=labels, - color="rgba(205, 209, 228, 0.4)", - ), - ) - ] - ) - fig.update_layout(barmode="relative") - return fig - - - page = vm.Page( - title="Sankey", - components=[ - vm.Graph( - figure=sankey( - data_frame=sankey_data, - labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], - source="Origin", - target="Destination", - value="Value", - ), - ), - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], -) diff --git a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py index 93265b1d4..4de954a62 100644 --- a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py +++ b/vizro-core/examples/_chart-gallery/utils/custom_extensions.py @@ -20,17 +20,21 @@ class CodeClipboard(vm.VizroBaseModel): type: Literal["code_clipboard"] = "code_clipboard" title: str = "Code" - text: str + # TODO: remove text, make code non-optional + text: str = "" + code: str = "" + language: str = "" def build(self): """Returns the code clipboard component inside an accordion.""" + markdown_code = self.text or "\n".join([f"```{self.language}", self.code, "```"]) return dbc.Accordion( [ dbc.AccordionItem( html.Div( [ html.H3(self.title), - dcc.Markdown(self.text, id=self.id), + dcc.Markdown(markdown_code, id=self.id), dcc.Clipboard(target_id=self.id, className="code-clipboard"), ], className="code-clipboard-container", @@ -106,6 +110,7 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str) -> go.Figure: return fig +# TODO: think about where this goes @capture("graph") def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, labels: List[str]) -> go.Figure: """Creates a custom sankey chart using Plotly's `go.Sankey`. @@ -147,3 +152,8 @@ def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, label ) fig.update_layout(barmode="relative") return fig + + +vm.Container.add_type("components", FlexContainer) +vm.Container.add_type("components", Markdown) +vm.Page.add_type("components", CodeClipboard) diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml index 02e1cb25f..2389bb56c 100644 --- a/vizro-core/hatch.toml +++ b/vizro-core/hatch.toml @@ -26,7 +26,8 @@ dependencies = [ "chromedriver-autoinstaller>=0.6.4", "toml", "pyyaml", - "openpyxl" + "openpyxl", + "black", # TODO COMMENT: Not for linting, just for example. Should really be in different environment (on HF). Maybe make new environment for examples anyway ] [envs.default.env-vars] From 254e59715eb4d7186c401302f81bd91536c6f2fb Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Wed, 24 Jul 2024 13:10:04 +0100 Subject: [PATCH 084/109] Move repeated chart factories to pages --- vizro-core/examples/_chart-gallery/app.py | 40 -- .../examples/_chart-gallery/chart_groups.py | 17 +- .../_chart-gallery/pages/_factories.py | 123 ++++++ .../_chart-gallery/pages/correlation.py | 31 +- .../_chart-gallery/pages/deviation.py | 4 +- .../_chart-gallery/pages/distribution.py | 5 +- .../_chart-gallery/pages/examples/bar.py | 23 ++ .../pages/examples/butterfly.py | 47 +++ .../_chart-gallery/pages/examples/column.py | 22 ++ .../pages/examples/ordered_bar.py | 23 ++ .../pages/examples/ordered_column.py | 22 ++ .../_chart-gallery/pages/examples/scatter.py | 22 ++ .../_chart-gallery/pages/examples/treemap.py | 23 ++ .../_chart-gallery/pages/magnitude.py | 52 ++- .../_chart-gallery/pages/part_to_whole.py | 6 +- .../examples/_chart-gallery/pages/ranking.py | 78 +++- .../examples/_chart-gallery/pages/time.py | 6 +- .../_chart-gallery/utils/chart_factory.py | 359 ------------------ .../_chart-gallery/utils/chart_pages.py | 26 -- .../_chart-gallery/utils/tab_containers.py | 0 20 files changed, 483 insertions(+), 446 deletions(-) create mode 100644 vizro-core/examples/_chart-gallery/pages/_factories.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/bar.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/butterfly.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/column.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/scatter.py create mode 100644 vizro-core/examples/_chart-gallery/pages/examples/treemap.py delete mode 100644 vizro-core/examples/_chart-gallery/utils/chart_factory.py delete mode 100644 vizro-core/examples/_chart-gallery/utils/chart_pages.py delete mode 100644 vizro-core/examples/_chart-gallery/utils/tab_containers.py diff --git a/vizro-core/examples/_chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py index c8f0f9a2a..f6016e8aa 100644 --- a/vizro-core/examples/_chart-gallery/app.py +++ b/vizro-core/examples/_chart-gallery/app.py @@ -58,46 +58,6 @@ def make_navlink(chart_group: ChartGroup): ], ) - -# CHeck against: pages: -# homepage, -# bar, -# column, -# line, -# scatter, -# pie, -# donut, -# boxplot, -# violin, -# ordered_bar, -# ordered_column, -# time_column, -# treemap, -# magnitude_treemap, -# butterfly_page, -# distribution_butterfly, -# choropleth, -# sankey_page, -# for navigation: -# COMPLETED_CHARTS = [ -# "bar", -# "ordered-bar", -# "column", -# "ordered-column", -# "pie", -# "donut", -# "line", -# "violin", -# "scatter", -# "sankey", -# "butterfly", -# "boxplot", -# "choropleth", -# "treemap", -# ] -# -# - # TODO: maybe nice to have an overall dashboard title? "Vizro chart gallery" or similar. dashboard = vm.Dashboard( # note has duplicates diff --git a/vizro-core/examples/_chart-gallery/chart_groups.py b/vizro-core/examples/_chart-gallery/chart_groups.py index a7ec74896..8ed07ad44 100644 --- a/vizro-core/examples/_chart-gallery/chart_groups.py +++ b/vizro-core/examples/_chart-gallery/chart_groups.py @@ -54,7 +54,7 @@ class ChartGroup: """ correlation_chart_group = ChartGroup( name="Correlation", - pages=pages.correlation.scatter, + pages=pages.correlation.pages, incomplete_pages=[ IncompletePage("Scatter matrix"), IncompletePage("Column line"), @@ -157,11 +157,11 @@ class ChartGroup: part_to_whole_intro_text = """ -Part to whole helps you show how one whole item breaks down into its component parts. If you consider the +Part-to-whole helps you show how one whole item breaks down into its component parts. If you consider the size of the parts to be most important, a magnitude chart may be more appropriate. """ part_to_whole_chart_group = ChartGroup( - name="Part to whole", + name="Part-to-whole", pages=pages.part_to_whole.pages, incomplete_pages=[ IncompletePage("Stacked bar"), @@ -202,11 +202,11 @@ class ChartGroup: CHART_GROUPS = [ - # deviation_chart_group, - # correlation_chart_group, - # ranking_chart_group, + deviation_chart_group, + correlation_chart_group, + ranking_chart_group, distribution_chart_group, - # magnitude_chart_group, + magnitude_chart_group, time_chart_group, part_to_whole_chart_group, flow_chart_group, @@ -219,7 +219,8 @@ class ChartGroup: def remove_duplicated_titles(pages): - return list({page.title: page for page in pages}.values()) + # comment on reversed + return list({page.title: page for page in reversed(list(pages))}.values()) # TODO: COMMENT, maybe refactor into remove_duplicated_titles diff --git a/vizro-core/examples/_chart-gallery/pages/_factories.py b/vizro-core/examples/_chart-gallery/pages/_factories.py new file mode 100644 index 000000000..74cc6d636 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/_factories.py @@ -0,0 +1,123 @@ +"""Contains reusable page functions to create identical content with a different `id`. + +Note: Since each page can only belong to one navigation group, we need a new page with a unique ID for +each chart type used in different groups. +""" + +from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file + +import vizro.models as vm +import vizro.plotly.express as px +from utils.custom_extensions import butterfly + + +# TODO: this is currently identical to ordered column. It should be: +# - unordered +# - different svg +# - slightly different text +# - slightly different example +def column_factory(id_prefix: str): + """Reusable function to create the page content for the column chart with a unique ID.""" + return vm.Page( + id=f"{id_prefix}-column", + title="Column", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + #### What is a column chart? + + A column chart is a vertical bar chart, with column lengths varying according to the + categorical value they represent. The scale is presented on the y-axis, starting with zero. + +   + + #### When to use it? + + Select a column chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents **how many?** in each category. You can + arrange your columns in any order to fit the message you wish to emphasize. Be mindful of + labeling clearly when you have a large number of columns. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + """ + ), + vm.Graph( + figure=px.bar( + data_frame=DATA_DICT["tips_agg"], + y="total_bill", + x="day", + ) + ), + make_code_clipboard_from_py_file("column.py"), + ], + ) + + +def treemap_factory(id_prefix: str): + """Reusable function to create the page content for the treemap chart with a unique ID.""" + return vm.Page( + id=f"{id_prefix}-treemap", + title="Treemap", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a treemap? + + A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles are sized + proportionately to the quantity they represent, combined together to form larger parent category + rectangles. + +   + + #### When to use it? + + It's helpful to use a treemap when you wish to display hierarchical part-to-whole relationships. You can + compare groups and single elements nested within them. Consider using them instead of Pie charts when + you have a higher number of categories. Treemaps are very compact and allow audiences to get a quick + overview of the data. + """ + ), + vm.Graph( + figure=px.treemap( + DATA_DICT["gapminder_2007"], + path=[px.Constant("world"), "continent", "country"], + values="pop", + color="lifeExp", + ) + ), + make_code_clipboard_from_py_file("treemap.py"), + ], + ) + + +def butterfly_factory(id_prefix: str): + """Reusable function to create the page content for the butterfly chart with a unique ID.""" + return vm.Page( + id=f"{id_prefix}-butterfly", + title="Butterfly", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a butterfly chart? + + A butterfly chart (also called a tornado chart) is a bar chart for displaying two sets of data series + side by side. + +   + + #### When to use it? + + Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same + parameters. Sharing this chart with your audience will help them see at a glance how two groups differ + within the same parameters. You can also **stack** two bars on each side if you wish to divide your + categories. + """ + ), + vm.Graph(figure=butterfly(DATA_DICT["ages"], x1="Male", x2="Female", y="Age")), + make_code_clipboard_from_py_file("butterfly.py"), + ], + ) diff --git a/vizro-core/examples/_chart-gallery/pages/correlation.py b/vizro-core/examples/_chart-gallery/pages/correlation.py index 61322e867..c5bb97aa3 100644 --- a/vizro-core/examples/_chart-gallery/pages/correlation.py +++ b/vizro-core/examples/_chart-gallery/pages/correlation.py @@ -1,3 +1,32 @@ -scatter = "scatter" +import vizro.models as vm +import vizro.plotly.express as px +from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file + +scatter = vm.Page( + title="Scatter", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a scatter chart? + + A scatter plot is a two-dimensional data visualization using dots to represent the values obtained for two + different variables - one plotted along the x-axis and the other plotted along the y-axis. + +   + + #### When to use it? + + Use scatter plots when you want to show the relationship between two variables. Scatter plots are sometimes + called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when + you have paired numerical data and you want to see if one variable impacts the other. However, do remember + that correlation is not causation. Make sure your audience does not draw the wrong conclusions. + """ + ), + vm.Graph(figure=px.scatter(DATA_DICT["iris"], x="sepal_width", y="sepal_length", color="species")), + make_code_clipboard_from_py_file("scatter.py"), + ], +) pages = [scatter] diff --git a/vizro-core/examples/_chart-gallery/pages/deviation.py b/vizro-core/examples/_chart-gallery/pages/deviation.py index 2a6b663a8..c1d35e148 100644 --- a/vizro-core/examples/_chart-gallery/pages/deviation.py +++ b/vizro-core/examples/_chart-gallery/pages/deviation.py @@ -1,3 +1,5 @@ -butterfly = "butterfly" +from pages._factories import butterfly_factory + +butterfly = butterfly_factory("deviation") pages = [butterfly] diff --git a/vizro-core/examples/_chart-gallery/pages/distribution.py b/vizro-core/examples/_chart-gallery/pages/distribution.py index 1f13f6411..ffdd17b8b 100644 --- a/vizro-core/examples/_chart-gallery/pages/distribution.py +++ b/vizro-core/examples/_chart-gallery/pages/distribution.py @@ -1,5 +1,6 @@ import vizro.models as vm import vizro.plotly.express as px +from pages._factories import butterfly_factory from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file violin = vm.Page( @@ -70,6 +71,6 @@ ], ) -pages = [violin, boxplot] +butterfly = butterfly_factory("distribution") -# # "Butterfly"], +pages = [violin, boxplot, butterfly] diff --git a/vizro-core/examples/_chart-gallery/pages/examples/bar.py b/vizro-core/examples/_chart-gallery/pages/examples/bar.py new file mode 100644 index 000000000..507a79528 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/bar.py @@ -0,0 +1,23 @@ +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +tips = px.data.tips() +tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() + +page = vm.Page( + title="Bar", + components=[ + vm.Graph( + figure=px.bar( + data_frame=tips_agg, + x="total_bill", + y="day", + orientation="h", + ) + ) + ], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/butterfly.py b/vizro-core/examples/_chart-gallery/pages/examples/butterfly.py new file mode 100644 index 000000000..be7901020 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/butterfly.py @@ -0,0 +1,47 @@ +import vizro.models as vm +from vizro import Vizro +import pandas as pd +from vizro.models.types import capture +import plotly.graph_objects as go + +ages = pd.DataFrame( + { + "Age": ["0-19", "20-29", "30-39", "40-49", "50-59", ">=60"], + "Male": [800, 2000, 4200, 5000, 2100, 800], + "Female": [1000, 3000, 3500, 3800, 3600, 700], + } +) + + +@capture("graph") +def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): + fig = go.Figure() + fig.add_trace( + go.Bar( + x=-data_frame[x1].values, + y=data_frame[y], + orientation="h", + name=x1, + ) + ) + fig.add_trace( + go.Bar( + x=data_frame[x2], + y=data_frame[y], + orientation="h", + name=x2, + ) + ) + fig.update_layout(barmode="relative") + return fig + + +dashboard = vm.Dashboard( + pages=[ + vm.Page( + title="Butterfly", + components=[vm.Graph(figure=butterfly(ages, x1="Male", x2="Female", y="Age"))], + ) + ] +) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/column.py b/vizro-core/examples/_chart-gallery/pages/examples/column.py new file mode 100644 index 000000000..6886761e8 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/column.py @@ -0,0 +1,22 @@ +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +tips = px.data.tips() +tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() + +page = vm.Page( + title="Column", + components=[ + vm.Graph( + figure=px.bar( + data_frame=tips_agg, + y="total_bill", + x="day", + ) + ) + ], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py b/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py new file mode 100644 index 000000000..507a79528 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py @@ -0,0 +1,23 @@ +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +tips = px.data.tips() +tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() + +page = vm.Page( + title="Bar", + components=[ + vm.Graph( + figure=px.bar( + data_frame=tips_agg, + x="total_bill", + y="day", + orientation="h", + ) + ) + ], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py b/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py new file mode 100644 index 000000000..6886761e8 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py @@ -0,0 +1,22 @@ +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +tips = px.data.tips() +tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() + +page = vm.Page( + title="Column", + components=[ + vm.Graph( + figure=px.bar( + data_frame=tips_agg, + y="total_bill", + x="day", + ) + ) + ], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/scatter.py b/vizro-core/examples/_chart-gallery/pages/examples/scatter.py new file mode 100644 index 000000000..df1bc9446 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/scatter.py @@ -0,0 +1,22 @@ +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +iris = px.data.iris() + +page = vm.Page( + title="Scatter", + components=[ + vm.Graph( + figure=px.scatter( + iris, + x="sepal_width", + y="sepal_length", + color="species", + ) + ) + ], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/examples/treemap.py b/vizro-core/examples/_chart-gallery/pages/examples/treemap.py new file mode 100644 index 000000000..d6fd297ba --- /dev/null +++ b/vizro-core/examples/_chart-gallery/pages/examples/treemap.py @@ -0,0 +1,23 @@ +import vizro.models as vm +import vizro.plotly.express as px +from vizro import Vizro + +gapminder = px.data.gapminder() +gapminder_2007 = gapminder.query("year == 2007") + +page = vm.Page( + title="Treemap", + components=[ + vm.Graph( + figure=px.treemap( + gapminder_2007, + path=[px.Constant("world"), "continent", "country"], + values="pop", + color="lifeExp", + ) + ), + ], +) + +dashboard = vm.Dashboard(pages=[page]) +Vizro().build(dashboard).run() diff --git a/vizro-core/examples/_chart-gallery/pages/magnitude.py b/vizro-core/examples/_chart-gallery/pages/magnitude.py index 61562f7e9..68fd6e86f 100644 --- a/vizro-core/examples/_chart-gallery/pages/magnitude.py +++ b/vizro-core/examples/_chart-gallery/pages/magnitude.py @@ -1,5 +1,51 @@ -bar = "bar" -column = "column" -treemap = "treemap" +from pages._factories import column_factory, treemap_factory +import vizro.models as vm +import vizro.plotly.express as px +from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file + +# TODO: this is currently identical to ordered bar. It should be: +# - unordered +# - different svg +# - slightly different text +# - slightly different example +bar = vm.Page( + title="Bar", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a bar chart? + + A bar chart displays bars in lengths proportional to the values they represent. One axis of + the chart shows the categories to compare and the other axis provides a value scale, + starting with zero. + +   + + #### When to use it? + + Select a bar chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents **how many?** in each category. You can + arrange your bars in any order to fit the message you wish to emphasize. Be mindful of labeling + clearly when you have a large number of bars. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + """ + ), + vm.Graph( + figure=px.bar( + data_frame=DATA_DICT["tips_agg"], + x="total_bill", + y="day", + orientation="h", + ) + ), + make_code_clipboard_from_py_file("bar.py"), + ], +) + + +column = column_factory("magnitude") +treemap = treemap_factory("magnitude") pages = [bar, column, treemap] diff --git a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py index fa3187f93..68f94697d 100644 --- a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py +++ b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py @@ -1,5 +1,6 @@ import vizro.models as vm import vizro.plotly.express as px +from pages._factories import treemap_factory from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file pie = vm.Page( @@ -71,5 +72,6 @@ ], ) -pages = [donut, pie] -# treemap +treemap = treemap_factory("part-to-whole") + +pages = [donut, pie, treemap] diff --git a/vizro-core/examples/_chart-gallery/pages/ranking.py b/vizro-core/examples/_chart-gallery/pages/ranking.py index da4190f5a..29877edeb 100644 --- a/vizro-core/examples/_chart-gallery/pages/ranking.py +++ b/vizro-core/examples/_chart-gallery/pages/ranking.py @@ -1,4 +1,78 @@ -ordered_bar = "ordered_bar" -ordered_column = "ordered_column" +import vizro.models as vm +import vizro.plotly.express as px +from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file + +ordered_bar = vm.Page( + title="Ordered bar", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a bar chart? + + A bar chart displays bars in lengths proportional to the values they represent. One axis of + the chart shows the categories to compare and the other axis provides a value scale, + starting with zero. + +   + + #### When to use it? + + Select a bar chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents **how many?** in each category. You can + arrange your bars in any order to fit the message you wish to emphasize. Be mindful of labeling + clearly when you have a large number of bars. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + + """ + ), + vm.Graph( + figure=px.bar( + data_frame=DATA_DICT["tips_agg"], + x="total_bill", + y="day", + orientation="h", + ) + ), + make_code_clipboard_from_py_file("ordered_bar.py"), + ], +) + + +ordered_column = vm.Page( + title="Ordered column", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a column chart? + + A column chart is a vertical bar chart, with column lengths varying according to the + categorical value they represent. The scale is presented on the y-axis, starting with zero. + +   + + #### When to use it? + + Select a column chart when you want to help your audience draw size comparisons and identify + patterns between categorical data, i.e., data that presents **how many?** in each category. You can + arrange your columns in any order to fit the message you wish to emphasize. Be mindful of + labeling clearly when you have a large number of columns. You may need to include a legend, + or use abbreviations in the chart with fuller descriptions below of the terms used. + """ + ), + vm.Graph( + figure=px.bar( + data_frame=DATA_DICT["tips_agg"], + y="total_bill", + x="day", + ) + ), + make_code_clipboard_from_py_file("ordered_column.py"), + ], +) + pages = [ordered_bar, ordered_column] diff --git a/vizro-core/examples/_chart-gallery/pages/time.py b/vizro-core/examples/_chart-gallery/pages/time.py index 0c7d1707d..995ba02f6 100644 --- a/vizro-core/examples/_chart-gallery/pages/time.py +++ b/vizro-core/examples/_chart-gallery/pages/time.py @@ -1,5 +1,6 @@ import vizro.models as vm import vizro.plotly.express as px +from pages._factories import column_factory from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file line = vm.Page( @@ -29,5 +30,6 @@ ], ) -pages = [line] -# column +column = column_factory("time") + +pages = [line, column] diff --git a/vizro-core/examples/_chart-gallery/utils/chart_factory.py b/vizro-core/examples/_chart-gallery/utils/chart_factory.py deleted file mode 100644 index 7fb0da11f..000000000 --- a/vizro-core/examples/_chart-gallery/utils/chart_factory.py +++ /dev/null @@ -1,359 +0,0 @@ -"""Contains reusable page functions to create identical content with a different `id`. - -Note: Since each page can only belong to one navigation group, we need a new page with a unique ID for -each chart type used in different groups. -""" - -import vizro.models as vm -import vizro.plotly.express as px - -from ._page_utils import DATA_DICT, PAGE_GRID -from .custom_extensions import CodeClipboard, butterfly - - -def scatter_factory(id: str, title: str): - """Reusable function to create the page content for the scatter chart with a unique ID.""" - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a scatter chart? - - A scatter plot is a two-dimensional data visualization using dots to represent the values obtained for two - different variables - one plotted along the x-axis and the other plotted along the y-axis. - -   - - #### When to use it? - - Use scatter plots when you want to show the relationship between two variables. Scatter plots are sometimes - called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when - you have paired numerical data and you want to see if one variable impacts the other. However, do remember - that correlation is not causation. Make sure your audience does not draw the wrong conclusions. - """ - ), - vm.Graph(figure=px.scatter(DATA_DICT["iris"], x="sepal_width", y="sepal_length", color="species")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - iris = px.data.iris() - - page = vm.Page( - title="Scatter", - components=[ - vm.Graph( - figure=px.scatter( - iris, - x="sepal_width", - y="sepal_length", - color="species", - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) - - -def bar_factory(id: str, title: str): - """Reusable function to create the page content for the bar chart with a unique ID.""" - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a bar chart? - - A bar chart displays bars in lengths proportional to the values they represent. One axis of - the chart shows the categories to compare and the other axis provides a value scale, - starting with zero. - -   - - #### When to use it? - - Select a bar chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your bars in any order to fit the message you wish to emphasize. Be mindful of labeling - clearly when you have a large number of bars. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. - - """ - ), - vm.Graph( - figure=px.bar( - data_frame=DATA_DICT["tips_agg"], - x="total_bill", - y="day", - orientation="h", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - tips_agg = ( - tips.groupby("day") - .agg({"total_bill": "sum"}) - .sort_values("total_bill") - .reset_index() - ) - - page = vm.Page( - title="Bar", - components=[ - vm.Graph( - figure=px.bar( - data_frame=tips_agg, - x="total_bill", - y="day", - orientation="h", - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) - - -def column_factory(id: str, title: str): - """Reusable function to create the page content for the column chart with a unique ID.""" - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a column chart? - - A column chart is a vertical bar chart, with column lengths varying according to the - categorical value they represent. The scale is presented on the y-axis, starting with zero. - -   - - #### When to use it? - - Select a column chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your columns in any order to fit the message you wish to emphasize. Be mindful of - labeling clearly when you have a large number of columns. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. - """ - ), - vm.Graph( - figure=px.bar( - data_frame=DATA_DICT["tips_agg"], - y="total_bill", - x="day", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - tips = px.data.tips() - tips_agg = ( - tips.groupby("day") - .agg({"total_bill": "sum"}) - .sort_values("total_bill") - .reset_index() - ) - - page = vm.Page( - title="Column", - components=[ - vm.Graph( - figure=px.bar( - data_frame=tips_agg, - y="total_bill", - x="day", - ) - ) - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) - - -def treemap_factory(id: str, title: str): - """Reusable function to create the page content for the treemap chart with a unique ID.""" - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a treemap? - - A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles are sized - proportionately to the quantity they represent, combined together to form larger parent category - rectangles. - -   - - #### When to use it? - - It's helpful to use a treemap when you wish to display hierarchical part-to-whole relationships. You can - compare groups and single elements nested within them. Consider using them instead of Pie charts when - you have a higher number of categories. Treemaps are very compact and allow audiences to get a quick - overview of the data. - """ - ), - vm.Graph( - figure=px.treemap( - DATA_DICT["gapminder_2007"], - path=[px.Constant("world"), "continent", "country"], - values="pop", - color="lifeExp", - ) - ), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - import vizro.plotly.express as px - from vizro import Vizro - - gapminder = px.data.gapminder() - gapminder_2007 = gapminder.query("year == 2007") - - page = vm.Page( - title="Treemap", - components=[ - vm.Graph( - figure=px.treemap( - gapminder_2007, - path=[px.Constant("world"), "continent", "country"], - values="pop", - color="lifeExp", - ) - ), - ], - ) - - dashboard = vm.Dashboard(pages=[page]) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) - - -def butterfly_factory(id: str, title: str): - """Reusable function to create the page content for the butterfly chart with a unique ID.""" - return vm.Page( - id=id, - title=title, - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a butterfly chart? - - A butterfly chart (also called a tornado chart) is a bar chart for displaying two sets of data series - side by side. - -   - - #### When to use it? - - Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same - parameters. Sharing this chart with your audience will help them see at a glance how two groups differ - within the same parameters. You can also **stack** two bars on each side if you wish to divide your - categories. - """ - ), - vm.Graph(figure=butterfly(DATA_DICT["ages"], x1="Male", x2="Female", y="Age")), - CodeClipboard( - text=""" - ```python - import vizro.models as vm - from vizro import Vizro - import pandas as pd - from vizro.models.types import capture - import plotly.graph_objects as go - - ages = pd.DataFrame( - { - "Age": ["0-19", "20-29", "30-39", "40-49", "50-59", ">=60"], - "Male": [800, 2000, 4200, 5000, 2100, 800], - "Female": [1000, 3000, 3500, 3800, 3600, 700], - } - ) - - - @capture("graph") - def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): - fig = go.Figure() - fig.add_trace( - go.Bar( - x=-data_frame[x1].values, y=data_frame[y], orientation="h", name=x1, - ) - ) - fig.add_trace( - go.Bar(x=data_frame[x2], y=data_frame[y], orientation="h", name=x2,) - ) - fig.update_layout(barmode="relative") - return fig - - - dashboard = vm.Dashboard( - pages=[ - vm.Page( - title="Butterfly", - components=[ - vm.Graph( - figure=butterfly(ages, x1="Male", x2="Female", y="Age") - ) - ], - ) - ] - ) - Vizro().build(dashboard).run() - ``` - """ - ), - ], - ) diff --git a/vizro-core/examples/_chart-gallery/utils/chart_pages.py b/vizro-core/examples/_chart-gallery/utils/chart_pages.py deleted file mode 100644 index 45c76fcb9..000000000 --- a/vizro-core/examples/_chart-gallery/utils/chart_pages.py +++ /dev/null @@ -1,26 +0,0 @@ -"""Contains variables that store each chart page.""" - -import vizro.models as vm -import vizro.plotly.express as px - -from ._page_utils import DATA_DICT, PAGE_GRID -from .chart_factory import ( - bar_factory, - butterfly_factory, - column_factory, - scatter_factory, - treemap_factory, -) -from .custom_extensions import CodeClipboard, FlexContainer, Markdown, sankey - -# PAGES ------------------------------------------------------------- -time_column = column_factory("Time-Column", "Column") -scatter = scatter_factory("Scatter", "Scatter") -bar = bar_factory("Bar", "Bar") -ordered_bar = bar_factory("Ordered Bar", "Ordered Bar") -column = column_factory("Column", "Column") -ordered_column = column_factory("Ordered Column", "Ordered Column") -treemap = treemap_factory("Treemap", "Treemap") -magnitude_treemap = treemap_factory("Magnitude-Treemap", "Treemap") -butterfly_page = butterfly_factory("Butterfly", "Butterfly") -distribution_butterfly = butterfly_factory("Distribution-Butterfly", "Butterfly") diff --git a/vizro-core/examples/_chart-gallery/utils/tab_containers.py b/vizro-core/examples/_chart-gallery/utils/tab_containers.py deleted file mode 100644 index e69de29bb..000000000 From 5c7ad8e2f12c7765f6b784643bf2fdee0352643f Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Wed, 24 Jul 2024 13:23:57 +0100 Subject: [PATCH 085/109] Remove duplicated svgs --- .../images/charts/distribution-butterfly.svg | 27 ------------------- .../images/charts/magnitude-treemap.svg | 24 ----------------- .../assets/images/charts/time-column.svg | 20 -------------- 3 files changed, 71 deletions(-) delete mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/distribution-butterfly.svg delete mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/magnitude-treemap.svg delete mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/time-column.svg diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/distribution-butterfly.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/distribution-butterfly.svg deleted file mode 100644 index 5f0281a60..000000000 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/distribution-butterfly.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - Group 6 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/magnitude-treemap.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/magnitude-treemap.svg deleted file mode 100644 index a09929e94..000000000 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/magnitude-treemap.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - Group 6 Copy 27 - Created with Sketch. - - - - - - - - - - - - - - - - - - - diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/time-column.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/time-column.svg deleted file mode 100644 index fca0509d6..000000000 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/time-column.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Group 6 Copy 11 - Created with Sketch. - - - - - - - - - - - - - - - From 8e37dac0f902d73f4197f663ee7cb79ab789925c Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Wed, 24 Jul 2024 13:37:22 +0100 Subject: [PATCH 086/109] Make page paths hierarchical --- .../examples/_chart-gallery/pages/_factories.py | 15 +++++++++------ .../examples/_chart-gallery/pages/correlation.py | 1 + .../examples/_chart-gallery/pages/distribution.py | 2 ++ vizro-core/examples/_chart-gallery/pages/flow.py | 1 + .../examples/_chart-gallery/pages/magnitude.py | 1 + .../_chart-gallery/pages/part_to_whole.py | 2 ++ .../examples/_chart-gallery/pages/ranking.py | 2 ++ .../examples/_chart-gallery/pages/spatial.py | 1 + vizro-core/examples/_chart-gallery/pages/time.py | 1 + 9 files changed, 20 insertions(+), 6 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/pages/_factories.py b/vizro-core/examples/_chart-gallery/pages/_factories.py index 74cc6d636..a69cc6da0 100644 --- a/vizro-core/examples/_chart-gallery/pages/_factories.py +++ b/vizro-core/examples/_chart-gallery/pages/_factories.py @@ -16,10 +16,11 @@ # - different svg # - slightly different text # - slightly different example -def column_factory(id_prefix: str): +def column_factory(group: str): """Reusable function to create the page content for the column chart with a unique ID.""" return vm.Page( - id=f"{id_prefix}-column", + id=f"{group}-column", + path=f"{group}/column", title="Column", layout=vm.Layout(grid=PAGE_GRID), components=[ @@ -53,10 +54,11 @@ def column_factory(id_prefix: str): ) -def treemap_factory(id_prefix: str): +def treemap_factory(group: str): """Reusable function to create the page content for the treemap chart with a unique ID.""" return vm.Page( - id=f"{id_prefix}-treemap", + id=f"{group}-treemap", + path=f"{group}/treemap", title="Treemap", layout=vm.Layout(grid=PAGE_GRID), components=[ @@ -92,10 +94,11 @@ def treemap_factory(id_prefix: str): ) -def butterfly_factory(id_prefix: str): +def butterfly_factory(group: str): """Reusable function to create the page content for the butterfly chart with a unique ID.""" return vm.Page( - id=f"{id_prefix}-butterfly", + id=f"{group}-butterfly", + path=f"{group}/butterfly", title="Butterfly", layout=vm.Layout(grid=PAGE_GRID), components=[ diff --git a/vizro-core/examples/_chart-gallery/pages/correlation.py b/vizro-core/examples/_chart-gallery/pages/correlation.py index c5bb97aa3..18df2c022 100644 --- a/vizro-core/examples/_chart-gallery/pages/correlation.py +++ b/vizro-core/examples/_chart-gallery/pages/correlation.py @@ -4,6 +4,7 @@ scatter = vm.Page( title="Scatter", + path="correlation/scatter", layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( diff --git a/vizro-core/examples/_chart-gallery/pages/distribution.py b/vizro-core/examples/_chart-gallery/pages/distribution.py index ffdd17b8b..25049b6f8 100644 --- a/vizro-core/examples/_chart-gallery/pages/distribution.py +++ b/vizro-core/examples/_chart-gallery/pages/distribution.py @@ -5,6 +5,7 @@ violin = vm.Page( title="Violin", + path="distribution/violin", layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( @@ -37,6 +38,7 @@ boxplot = vm.Page( title="Boxplot", + path="distribution/boxplot", layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( diff --git a/vizro-core/examples/_chart-gallery/pages/flow.py b/vizro-core/examples/_chart-gallery/pages/flow.py index 699c0987e..ee2d580a2 100644 --- a/vizro-core/examples/_chart-gallery/pages/flow.py +++ b/vizro-core/examples/_chart-gallery/pages/flow.py @@ -5,6 +5,7 @@ sankey = vm.Page( title="Sankey", + path="flow/sankey", layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( diff --git a/vizro-core/examples/_chart-gallery/pages/magnitude.py b/vizro-core/examples/_chart-gallery/pages/magnitude.py index 68fd6e86f..abb727768 100644 --- a/vizro-core/examples/_chart-gallery/pages/magnitude.py +++ b/vizro-core/examples/_chart-gallery/pages/magnitude.py @@ -10,6 +10,7 @@ # - slightly different example bar = vm.Page( title="Bar", + path="magnitude/bar", layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( diff --git a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py index 68f94697d..dc0b3e263 100644 --- a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py +++ b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py @@ -5,6 +5,7 @@ pie = vm.Page( title="Pie", + path="part-to-whole/pie", layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( @@ -41,6 +42,7 @@ donut = vm.Page( title="Donut", + path="part-to-whole/donut", layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( diff --git a/vizro-core/examples/_chart-gallery/pages/ranking.py b/vizro-core/examples/_chart-gallery/pages/ranking.py index 29877edeb..b8fbaa115 100644 --- a/vizro-core/examples/_chart-gallery/pages/ranking.py +++ b/vizro-core/examples/_chart-gallery/pages/ranking.py @@ -4,6 +4,7 @@ ordered_bar = vm.Page( title="Ordered bar", + path="ranking/ordered-bar", layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( @@ -42,6 +43,7 @@ ordered_column = vm.Page( title="Ordered column", + path="ranking/ordered-column", layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( diff --git a/vizro-core/examples/_chart-gallery/pages/spatial.py b/vizro-core/examples/_chart-gallery/pages/spatial.py index 63a10170b..4d2f60fa9 100644 --- a/vizro-core/examples/_chart-gallery/pages/spatial.py +++ b/vizro-core/examples/_chart-gallery/pages/spatial.py @@ -4,6 +4,7 @@ choropleth = vm.Page( title="Choropleth", + path="spatial/choropleth", layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( diff --git a/vizro-core/examples/_chart-gallery/pages/time.py b/vizro-core/examples/_chart-gallery/pages/time.py index 995ba02f6..d5442a2f6 100644 --- a/vizro-core/examples/_chart-gallery/pages/time.py +++ b/vizro-core/examples/_chart-gallery/pages/time.py @@ -5,6 +5,7 @@ line = vm.Page( title="Line", + path="time/line", layout=vm.Layout(grid=PAGE_GRID), components=[ vm.Card( From 3e65dc27f8e1731244d77d35fa3fb8f18eab2176 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Wed, 24 Jul 2024 15:04:11 +0100 Subject: [PATCH 087/109] Move _page_utils, split out charts from components --- vizro-core/examples/_chart-gallery/app.py | 5 +- .../custom_extensions.py => custom_charts.py} | 82 ++----------------- .../_chart-gallery/custom_components.py | 73 +++++++++++++++++ .../_chart-gallery/pages/_factories.py | 4 +- .../_page_utils.py => pages/_pages_utils.py} | 2 +- .../_chart-gallery/pages/correlation.py | 2 +- .../_chart-gallery/pages/distribution.py | 2 +- .../examples/_chart-gallery/pages/flow.py | 5 +- .../_chart-gallery/pages/magnitude.py | 2 +- .../_chart-gallery/pages/part_to_whole.py | 2 +- .../examples/_chart-gallery/pages/ranking.py | 2 +- .../examples/_chart-gallery/pages/spatial.py | 2 +- .../examples/_chart-gallery/pages/time.py | 2 +- .../examples/_chart-gallery/utils/__init__.py | 1 - 14 files changed, 95 insertions(+), 91 deletions(-) rename vizro-core/examples/_chart-gallery/{utils/custom_extensions.py => custom_charts.py} (54%) create mode 100644 vizro-core/examples/_chart-gallery/custom_components.py rename vizro-core/examples/_chart-gallery/{utils/_page_utils.py => pages/_pages_utils.py} (96%) delete mode 100644 vizro-core/examples/_chart-gallery/utils/__init__.py diff --git a/vizro-core/examples/_chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py index f6016e8aa..5e98cfdee 100644 --- a/vizro-core/examples/_chart-gallery/app.py +++ b/vizro-core/examples/_chart-gallery/app.py @@ -1,18 +1,18 @@ """App configuration for chart gallery dashboard.""" +import dash from typing import Union import itertools import vizro.models as vm from chart_groups import ChartGroup, CHART_GROUPS, ALL_CHART_GROUP, IncompletePage -from utils.custom_extensions import Markdown, FlexContainer +from custom_components import Markdown, FlexContainer from vizro import Vizro def make_chart_card(page: Union[vm.Page, IncompletePage]): svg_name = page.title.lower().replace(" ", "-") - # asset url correctly return vm.Card( text=f""" ![](assets/images/charts/{svg_name}.svg#chart-icon) @@ -30,7 +30,6 @@ def make_homepage_container(chart_group: ChartGroup): components=[ Markdown(text=chart_group.intro_text, classname="intro-text"), FlexContainer( - title="", components=[ make_chart_card(page) for page in sorted( diff --git a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py b/vizro-core/examples/_chart-gallery/custom_charts.py similarity index 54% rename from vizro-core/examples/_chart-gallery/utils/custom_extensions.py rename to vizro-core/examples/_chart-gallery/custom_charts.py index 4de954a62..54245b3e3 100644 --- a/vizro-core/examples/_chart-gallery/utils/custom_extensions.py +++ b/vizro-core/examples/_chart-gallery/custom_charts.py @@ -1,77 +1,17 @@ -"""Contains custom components and charts used inside the dashboard.""" +"""Contains custom charts used inside the dashboard.""" -from typing import List, Literal -import dash_bootstrap_components as dbc -import pandas as pd -import plotly.graph_objects as go -import vizro.models as vm -from dash import dcc, html -from vizro.models.types import capture - -try: - from pydantic.v1 import Field -except ImportError: # pragma: no cov - from pydantic import Field - - -class CodeClipboard(vm.VizroBaseModel): - """Contains code snippet with a copy to clipboard button.""" - - type: Literal["code_clipboard"] = "code_clipboard" - title: str = "Code" - # TODO: remove text, make code non-optional - text: str = "" - code: str = "" - language: str = "" - - def build(self): - """Returns the code clipboard component inside an accordion.""" - markdown_code = self.text or "\n".join([f"```{self.language}", self.code, "```"]) - return dbc.Accordion( - [ - dbc.AccordionItem( - html.Div( - [ - html.H3(self.title), - dcc.Markdown(markdown_code, id=self.id), - dcc.Clipboard(target_id=self.id, className="code-clipboard"), - ], - className="code-clipboard-container", - ), - title="SHOW CODE", - ) - ], - start_collapsed=False, - ) - - -class Markdown(vm.VizroBaseModel): - """Markdown component.""" - - type: Literal["markdown"] = "markdown" - text: str = Field( - ..., description="Markdown string to create card title/text that should adhere to the CommonMark Spec." - ) - classname: str = "" +from typing import List - def build(self): - """Returns a markdown component with an optional classname.""" - return dcc.Markdown(id=self.id, children=self.text, dangerously_allow_html=False, className=self.classname) - - -class FlexContainer(vm.Container): - """Custom flex `Container`.""" - - type: Literal["flex_container"] = "flex_container" +import pandas as pd +from plotly import graph_objects as go - def build(self): - """Returns a flex container.""" - return html.Div( - id=self.id, children=[component.build() for component in self.components], className="flex-container" - ) +from vizro.models.types import capture +# TODO: consider how this should be represented in the code example files. Since the code is copy and pasted +# it can get out of sync. But probably we don't want the docstrings in the short code snippet. +# Ultimately these charts will probably move to vizro.charts anyway. @capture("graph") def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str) -> go.Figure: """Creates a custom butterfly chart using Plotly's go.Figure. @@ -110,7 +50,6 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str) -> go.Figure: return fig -# TODO: think about where this goes @capture("graph") def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, labels: List[str]) -> go.Figure: """Creates a custom sankey chart using Plotly's `go.Sankey`. @@ -152,8 +91,3 @@ def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, label ) fig.update_layout(barmode="relative") return fig - - -vm.Container.add_type("components", FlexContainer) -vm.Container.add_type("components", Markdown) -vm.Page.add_type("components", CodeClipboard) diff --git a/vizro-core/examples/_chart-gallery/custom_components.py b/vizro-core/examples/_chart-gallery/custom_components.py new file mode 100644 index 000000000..342d52bf8 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/custom_components.py @@ -0,0 +1,73 @@ +"""Contains custom components used inside the dashboard.""" + +from typing import Literal + +import dash_bootstrap_components as dbc +import vizro.models as vm +from dash import dcc, html + +try: + from pydantic.v1 import Field +except ImportError: # pragma: no cov + from pydantic import Field + + +class CodeClipboard(vm.VizroBaseModel): + """Code snippet with a copy to clipboard button.""" + + type: Literal["code_clipboard"] = "code_clipboard" + title: str = "Code" + code: str + language: str = "" + + def build(self): + """Returns the code clipboard component inside an accordion.""" + markdown_code = "\n".join([f"```{self.language}", self.code, "```"]) + return dbc.Accordion( + [ + dbc.AccordionItem( + html.Div( + [ + html.H3(self.title), + dcc.Markdown(markdown_code, id=self.id), + dcc.Clipboard(target_id=self.id, className="code-clipboard"), + ], + className="code-clipboard-container", + ), + title="SHOW CODE", + ) + ], + start_collapsed=False, + ) + + +class Markdown(vm.VizroBaseModel): + """Markdown component.""" + + type: Literal["markdown"] = "markdown" + text: str = Field( + ..., description="Markdown string to create card title/text that should adhere to the CommonMark Spec." + ) + classname: str = "" + + def build(self): + """Returns a markdown component with an optional classname.""" + return dcc.Markdown(id=self.id, children=self.text, dangerously_allow_html=False, className=self.classname) + + +class FlexContainer(vm.Container): + """Custom flex `Container`.""" + + type: Literal["flex_container"] = "flex_container" + title: str = None # Title exists in vm.Container but we don't want to use it here. + + def build(self): + """Returns a flex container.""" + return html.Div( + id=self.id, children=[component.build() for component in self.components], className="flex-container" + ) + + +vm.Container.add_type("components", FlexContainer) +vm.Container.add_type("components", Markdown) +vm.Page.add_type("components", CodeClipboard) diff --git a/vizro-core/examples/_chart-gallery/pages/_factories.py b/vizro-core/examples/_chart-gallery/pages/_factories.py index a69cc6da0..beb44be91 100644 --- a/vizro-core/examples/_chart-gallery/pages/_factories.py +++ b/vizro-core/examples/_chart-gallery/pages/_factories.py @@ -4,11 +4,11 @@ each chart type used in different groups. """ -from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file import vizro.models as vm import vizro.plotly.express as px -from utils.custom_extensions import butterfly +from custom_charts import butterfly # TODO: this is currently identical to ordered column. It should be: diff --git a/vizro-core/examples/_chart-gallery/utils/_page_utils.py b/vizro-core/examples/_chart-gallery/pages/_pages_utils.py similarity index 96% rename from vizro-core/examples/_chart-gallery/utils/_page_utils.py rename to vizro-core/examples/_chart-gallery/pages/_pages_utils.py index 3ba33ffae..85f6c6738 100644 --- a/vizro-core/examples/_chart-gallery/utils/_page_utils.py +++ b/vizro-core/examples/_chart-gallery/pages/_pages_utils.py @@ -4,7 +4,7 @@ import black import pandas as pd import vizro.plotly.express as px -from utils.custom_extensions import CodeClipboard +from custom_components import CodeClipboard def make_code_clipboard_from_py_file(filepath: str): diff --git a/vizro-core/examples/_chart-gallery/pages/correlation.py b/vizro-core/examples/_chart-gallery/pages/correlation.py index 18df2c022..613d44dc1 100644 --- a/vizro-core/examples/_chart-gallery/pages/correlation.py +++ b/vizro-core/examples/_chart-gallery/pages/correlation.py @@ -1,6 +1,6 @@ import vizro.models as vm import vizro.plotly.express as px -from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file scatter = vm.Page( title="Scatter", diff --git a/vizro-core/examples/_chart-gallery/pages/distribution.py b/vizro-core/examples/_chart-gallery/pages/distribution.py index 25049b6f8..aaa51f2c9 100644 --- a/vizro-core/examples/_chart-gallery/pages/distribution.py +++ b/vizro-core/examples/_chart-gallery/pages/distribution.py @@ -1,7 +1,7 @@ import vizro.models as vm import vizro.plotly.express as px from pages._factories import butterfly_factory -from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file violin = vm.Page( title="Violin", diff --git a/vizro-core/examples/_chart-gallery/pages/flow.py b/vizro-core/examples/_chart-gallery/pages/flow.py index ee2d580a2..bb894ec19 100644 --- a/vizro-core/examples/_chart-gallery/pages/flow.py +++ b/vizro-core/examples/_chart-gallery/pages/flow.py @@ -1,7 +1,6 @@ import vizro.models as vm -import vizro.plotly.express as px -from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file -from utils.custom_extensions import sankey +from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from custom_charts import sankey sankey = vm.Page( title="Sankey", diff --git a/vizro-core/examples/_chart-gallery/pages/magnitude.py b/vizro-core/examples/_chart-gallery/pages/magnitude.py index abb727768..0ffeb2a20 100644 --- a/vizro-core/examples/_chart-gallery/pages/magnitude.py +++ b/vizro-core/examples/_chart-gallery/pages/magnitude.py @@ -1,7 +1,7 @@ from pages._factories import column_factory, treemap_factory import vizro.models as vm import vizro.plotly.express as px -from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file # TODO: this is currently identical to ordered bar. It should be: # - unordered diff --git a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py index dc0b3e263..56665736e 100644 --- a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py +++ b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py @@ -1,7 +1,7 @@ import vizro.models as vm import vizro.plotly.express as px from pages._factories import treemap_factory -from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file pie = vm.Page( title="Pie", diff --git a/vizro-core/examples/_chart-gallery/pages/ranking.py b/vizro-core/examples/_chart-gallery/pages/ranking.py index b8fbaa115..d8eba5060 100644 --- a/vizro-core/examples/_chart-gallery/pages/ranking.py +++ b/vizro-core/examples/_chart-gallery/pages/ranking.py @@ -1,6 +1,6 @@ import vizro.models as vm import vizro.plotly.express as px -from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file ordered_bar = vm.Page( title="Ordered bar", diff --git a/vizro-core/examples/_chart-gallery/pages/spatial.py b/vizro-core/examples/_chart-gallery/pages/spatial.py index 4d2f60fa9..2dfe1762b 100644 --- a/vizro-core/examples/_chart-gallery/pages/spatial.py +++ b/vizro-core/examples/_chart-gallery/pages/spatial.py @@ -1,6 +1,6 @@ import vizro.models as vm import vizro.plotly.express as px -from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file choropleth = vm.Page( title="Choropleth", diff --git a/vizro-core/examples/_chart-gallery/pages/time.py b/vizro-core/examples/_chart-gallery/pages/time.py index d5442a2f6..368f8a82a 100644 --- a/vizro-core/examples/_chart-gallery/pages/time.py +++ b/vizro-core/examples/_chart-gallery/pages/time.py @@ -1,7 +1,7 @@ import vizro.models as vm import vizro.plotly.express as px from pages._factories import column_factory -from utils._page_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file line = vm.Page( title="Line", diff --git a/vizro-core/examples/_chart-gallery/utils/__init__.py b/vizro-core/examples/_chart-gallery/utils/__init__.py deleted file mode 100644 index 11387ccac..000000000 --- a/vizro-core/examples/_chart-gallery/utils/__init__.py +++ /dev/null @@ -1 +0,0 @@ -"""Utils folder to contain helper functions and custom charts/components.""" From da88ea582622fc3a8208c0930fddf7fc73f92f35 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Thu, 25 Jul 2024 10:14:25 +0100 Subject: [PATCH 088/109] Remove DATA_DICT lookup in favour of directly using variables --- .../examples/_chart-gallery/chart_groups.py | 8 ++++---- .../examples/_chart-gallery/pages/_factories.py | 10 +++++----- .../examples/_chart-gallery/pages/_pages_utils.py | 15 ++------------- .../examples/_chart-gallery/pages/correlation.py | 4 ++-- .../examples/_chart-gallery/pages/distribution.py | 6 +++--- .../examples/_chart-gallery/pages/examples/bar.py | 2 +- .../_chart-gallery/pages/examples/boxplot.py | 2 +- .../_chart-gallery/pages/examples/column.py | 2 +- .../_chart-gallery/pages/examples/donut.py | 2 +- .../_chart-gallery/pages/examples/ordered_bar.py | 2 +- .../pages/examples/ordered_column.py | 2 +- .../examples/_chart-gallery/pages/examples/pie.py | 2 +- .../_chart-gallery/pages/examples/sankey.py | 2 +- .../_chart-gallery/pages/examples/violin.py | 2 +- vizro-core/examples/_chart-gallery/pages/flow.py | 4 ++-- .../examples/_chart-gallery/pages/magnitude.py | 6 +++--- .../_chart-gallery/pages/part_to_whole.py | 6 +++--- .../examples/_chart-gallery/pages/ranking.py | 6 +++--- .../examples/_chart-gallery/pages/spatial.py | 4 ++-- vizro-core/examples/_chart-gallery/pages/time.py | 4 ++-- 20 files changed, 40 insertions(+), 51 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/chart_groups.py b/vizro-core/examples/_chart-gallery/chart_groups.py index 8ed07ad44..6356f453f 100644 --- a/vizro-core/examples/_chart-gallery/chart_groups.py +++ b/vizro-core/examples/_chart-gallery/chart_groups.py @@ -3,7 +3,7 @@ from typing import Set, List -from dataclasses import dataclass +from dataclasses import dataclass, field import pages.deviation, pages.correlation, pages.ranking, pages.magnitude, pages.time, pages.spatial, pages.distribution, pages.flow, pages.part_to_whole import vizro.models as vm @@ -11,10 +11,10 @@ # COMMENT -@dataclass class IncompletePage: - title: str - path: str = "" + def __init__(self, title): + self.title = title + self.path = "" @dataclass diff --git a/vizro-core/examples/_chart-gallery/pages/_factories.py b/vizro-core/examples/_chart-gallery/pages/_factories.py index beb44be91..07df4d1b9 100644 --- a/vizro-core/examples/_chart-gallery/pages/_factories.py +++ b/vizro-core/examples/_chart-gallery/pages/_factories.py @@ -4,7 +4,7 @@ each chart type used in different groups. """ -from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips_agg, gapminder_2007, ages import vizro.models as vm import vizro.plotly.express as px @@ -12,7 +12,7 @@ # TODO: this is currently identical to ordered column. It should be: -# - unordered +# - unordered (currently ordering is done in tips_agg) # - different svg # - slightly different text # - slightly different example @@ -44,7 +44,7 @@ def column_factory(group: str): ), vm.Graph( figure=px.bar( - data_frame=DATA_DICT["tips_agg"], + tips_agg, y="total_bill", x="day", ) @@ -83,7 +83,7 @@ def treemap_factory(group: str): ), vm.Graph( figure=px.treemap( - DATA_DICT["gapminder_2007"], + gapminder_2007, path=[px.Constant("world"), "continent", "country"], values="pop", color="lifeExp", @@ -120,7 +120,7 @@ def butterfly_factory(group: str): categories. """ ), - vm.Graph(figure=butterfly(DATA_DICT["ages"], x1="Male", x2="Female", y="Age")), + vm.Graph(figure=butterfly(ages, x1="Male", x2="Female", y="Age")), make_code_clipboard_from_py_file("butterfly.py"), ], ) diff --git a/vizro-core/examples/_chart-gallery/pages/_pages_utils.py b/vizro-core/examples/_chart-gallery/pages/_pages_utils.py index 85f6c6738..8fab81ca5 100644 --- a/vizro-core/examples/_chart-gallery/pages/_pages_utils.py +++ b/vizro-core/examples/_chart-gallery/pages/_pages_utils.py @@ -15,6 +15,8 @@ def make_code_clipboard_from_py_file(filepath: str): ) +PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 + # DATA -------------------------------------------------------------- gapminder = px.data.gapminder() gapminder_2007 = gapminder.query("year == 2007") @@ -29,7 +31,6 @@ def make_code_clipboard_from_py_file(filepath: str): "Female": [1000, 3000, 3500, 3800, 3600, 700], } ) - sankey_data = pd.DataFrame( { "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels @@ -37,15 +38,3 @@ def make_code_clipboard_from_py_file(filepath: str): "Value": [10, 4, 8, 6, 4, 8, 8], } ) - -DATA_DICT = { - "gapminder": gapminder, - "gapminder_2007": gapminder_2007, - "iris": iris, - "stocks": stocks, - "tips": tips, - "tips_agg": tips_agg, - "ages": ages, - "sankey_data": sankey_data, -} -PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 diff --git a/vizro-core/examples/_chart-gallery/pages/correlation.py b/vizro-core/examples/_chart-gallery/pages/correlation.py index 613d44dc1..0ba1eb792 100644 --- a/vizro-core/examples/_chart-gallery/pages/correlation.py +++ b/vizro-core/examples/_chart-gallery/pages/correlation.py @@ -1,6 +1,6 @@ import vizro.models as vm import vizro.plotly.express as px -from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import iris, PAGE_GRID, make_code_clipboard_from_py_file scatter = vm.Page( title="Scatter", @@ -25,7 +25,7 @@ that correlation is not causation. Make sure your audience does not draw the wrong conclusions. """ ), - vm.Graph(figure=px.scatter(DATA_DICT["iris"], x="sepal_width", y="sepal_length", color="species")), + vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species")), make_code_clipboard_from_py_file("scatter.py"), ], ) diff --git a/vizro-core/examples/_chart-gallery/pages/distribution.py b/vizro-core/examples/_chart-gallery/pages/distribution.py index aaa51f2c9..bf458f44d 100644 --- a/vizro-core/examples/_chart-gallery/pages/distribution.py +++ b/vizro-core/examples/_chart-gallery/pages/distribution.py @@ -1,7 +1,7 @@ import vizro.models as vm import vizro.plotly.express as px from pages._factories import butterfly_factory -from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import tips, PAGE_GRID, make_code_clipboard_from_py_file violin = vm.Page( title="Violin", @@ -26,7 +26,7 @@ ), vm.Graph( figure=px.violin( - data_frame=DATA_DICT["tips"], + tips, y="total_bill", x="day", color="day", @@ -63,7 +63,7 @@ ), vm.Graph( figure=px.box( - data_frame=DATA_DICT["tips"], + tips, y="total_bill", x="day", color="day", diff --git a/vizro-core/examples/_chart-gallery/pages/examples/bar.py b/vizro-core/examples/_chart-gallery/pages/examples/bar.py index 507a79528..551d5ce87 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/bar.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/bar.py @@ -10,7 +10,7 @@ components=[ vm.Graph( figure=px.bar( - data_frame=tips_agg, + tips_agg, x="total_bill", y="day", orientation="h", diff --git a/vizro-core/examples/_chart-gallery/pages/examples/boxplot.py b/vizro-core/examples/_chart-gallery/pages/examples/boxplot.py index cb0ccbf57..081cc79a2 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/boxplot.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/boxplot.py @@ -9,7 +9,7 @@ components=[ vm.Graph( figure=px.boxplot( - data_frame=tips, + tips, y="total_bill", x="day", color="day", diff --git a/vizro-core/examples/_chart-gallery/pages/examples/column.py b/vizro-core/examples/_chart-gallery/pages/examples/column.py index 6886761e8..fb1e69e49 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/column.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/column.py @@ -10,7 +10,7 @@ components=[ vm.Graph( figure=px.bar( - data_frame=tips_agg, + tips_agg, y="total_bill", x="day", ) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/donut.py b/vizro-core/examples/_chart-gallery/pages/examples/donut.py index 2faa0c814..87d955713 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/donut.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/donut.py @@ -9,7 +9,7 @@ components=[ vm.Graph( figure=px.pie( - data_frame=tips, + tips, values="tip", names="day", hole=0.4, diff --git a/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py b/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py index 507a79528..551d5ce87 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py @@ -10,7 +10,7 @@ components=[ vm.Graph( figure=px.bar( - data_frame=tips_agg, + tips_agg, x="total_bill", y="day", orientation="h", diff --git a/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py b/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py index 6886761e8..fb1e69e49 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py @@ -10,7 +10,7 @@ components=[ vm.Graph( figure=px.bar( - data_frame=tips_agg, + tips_agg, y="total_bill", x="day", ) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/pie.py b/vizro-core/examples/_chart-gallery/pages/examples/pie.py index 8ab50ea0a..596abb2ff 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/pie.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/pie.py @@ -6,7 +6,7 @@ page = vm.Page( title="Pie", - components=[vm.Graph(figure=px.pie(data_frame=tips, values="tip", names="day"))], + components=[vm.Graph(figure=px.pie(tips, values="tip", names="day"))], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/sankey.py b/vizro-core/examples/_chart-gallery/pages/examples/sankey.py index 20d1f3212..62a46b140 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/sankey.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/sankey.py @@ -49,7 +49,7 @@ def sankey( components=[ vm.Graph( figure=sankey( - data_frame=sankey_data, + sankey_data, labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], source="Origin", target="Destination", diff --git a/vizro-core/examples/_chart-gallery/pages/examples/violin.py b/vizro-core/examples/_chart-gallery/pages/examples/violin.py index 4aee09dd3..567e7ba41 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/violin.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/violin.py @@ -9,7 +9,7 @@ components=[ vm.Graph( figure=px.violin( - data_frame=tips, + tips, y="total_bill", x="day", color="day", diff --git a/vizro-core/examples/_chart-gallery/pages/flow.py b/vizro-core/examples/_chart-gallery/pages/flow.py index bb894ec19..4668c8fbe 100644 --- a/vizro-core/examples/_chart-gallery/pages/flow.py +++ b/vizro-core/examples/_chart-gallery/pages/flow.py @@ -1,5 +1,5 @@ import vizro.models as vm -from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import sankey_data, PAGE_GRID, make_code_clipboard_from_py_file from custom_charts import sankey sankey = vm.Page( @@ -30,7 +30,7 @@ ), vm.Graph( figure=sankey( - data_frame=DATA_DICT["sankey_data"], + sankey_data, labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], source="Origin", target="Destination", diff --git a/vizro-core/examples/_chart-gallery/pages/magnitude.py b/vizro-core/examples/_chart-gallery/pages/magnitude.py index 0ffeb2a20..fdf3d4b2b 100644 --- a/vizro-core/examples/_chart-gallery/pages/magnitude.py +++ b/vizro-core/examples/_chart-gallery/pages/magnitude.py @@ -1,10 +1,10 @@ from pages._factories import column_factory, treemap_factory import vizro.models as vm import vizro.plotly.express as px -from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import tips_agg, PAGE_GRID, make_code_clipboard_from_py_file # TODO: this is currently identical to ordered bar. It should be: -# - unordered +# - unordered (currently ordering is done in tips_agg) # - different svg # - slightly different text # - slightly different example @@ -35,7 +35,7 @@ ), vm.Graph( figure=px.bar( - data_frame=DATA_DICT["tips_agg"], + tips_agg, x="total_bill", y="day", orientation="h", diff --git a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py index 56665736e..2d0013ac0 100644 --- a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py +++ b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py @@ -1,7 +1,7 @@ import vizro.models as vm import vizro.plotly.express as px from pages._factories import treemap_factory -from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import tips, PAGE_GRID, make_code_clipboard_from_py_file pie = vm.Page( title="Pie", @@ -31,7 +31,7 @@ ), vm.Graph( figure=px.pie( - data_frame=DATA_DICT["tips"], + tips, values="tip", names="day", ) @@ -64,7 +64,7 @@ ), vm.Graph( figure=px.pie( - data_frame=DATA_DICT["tips"], + tips, values="tip", names="day", hole=0.4, diff --git a/vizro-core/examples/_chart-gallery/pages/ranking.py b/vizro-core/examples/_chart-gallery/pages/ranking.py index d8eba5060..d14faf10a 100644 --- a/vizro-core/examples/_chart-gallery/pages/ranking.py +++ b/vizro-core/examples/_chart-gallery/pages/ranking.py @@ -1,6 +1,6 @@ import vizro.models as vm import vizro.plotly.express as px -from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import tips_agg, PAGE_GRID, make_code_clipboard_from_py_file ordered_bar = vm.Page( title="Ordered bar", @@ -30,7 +30,7 @@ ), vm.Graph( figure=px.bar( - data_frame=DATA_DICT["tips_agg"], + tips_agg, x="total_bill", y="day", orientation="h", @@ -67,7 +67,7 @@ ), vm.Graph( figure=px.bar( - data_frame=DATA_DICT["tips_agg"], + tips_agg, y="total_bill", x="day", ) diff --git a/vizro-core/examples/_chart-gallery/pages/spatial.py b/vizro-core/examples/_chart-gallery/pages/spatial.py index 2dfe1762b..16a0f791a 100644 --- a/vizro-core/examples/_chart-gallery/pages/spatial.py +++ b/vizro-core/examples/_chart-gallery/pages/spatial.py @@ -1,6 +1,6 @@ import vizro.models as vm import vizro.plotly.express as px -from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import gapminder_2007, PAGE_GRID, make_code_clipboard_from_py_file choropleth = vm.Page( title="Choropleth", @@ -29,7 +29,7 @@ ), vm.Graph( figure=px.choropleth( - DATA_DICT["gapminder_2007"], + gapminder_2007, locations="iso_alpha", color="lifeExp", hover_name="country", diff --git a/vizro-core/examples/_chart-gallery/pages/time.py b/vizro-core/examples/_chart-gallery/pages/time.py index 368f8a82a..fd6125326 100644 --- a/vizro-core/examples/_chart-gallery/pages/time.py +++ b/vizro-core/examples/_chart-gallery/pages/time.py @@ -1,7 +1,7 @@ import vizro.models as vm import vizro.plotly.express as px from pages._factories import column_factory -from pages._pages_utils import DATA_DICT, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import stocks, PAGE_GRID, make_code_clipboard_from_py_file line = vm.Page( title="Line", @@ -26,7 +26,7 @@ same chart, try to limit yourself to 3-4 to avoid cluttering up your chart. """ ), - vm.Graph(figure=px.line(DATA_DICT["stocks"], x="date", y="GOOG")), + vm.Graph(figure=px.line(stocks, x="date", y="GOOG")), make_code_clipboard_from_py_file("line.py"), ], ) From 63da5d96eef121b1a01a0475a592f6d681b58b4d Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Thu, 25 Jul 2024 11:52:10 +0100 Subject: [PATCH 089/109] Tidy and lint --- pyproject.toml | 2 + vizro-core/examples/_chart-gallery/app.py | 59 ++++++++++---- .../examples/_chart-gallery/chart_groups.py | 77 ++++++++++++------- .../examples/_chart-gallery/custom_charts.py | 26 +++---- .../examples/_chart-gallery/pages/__init__.py | 7 +- .../_chart-gallery/pages/_factories.py | 12 +-- .../_chart-gallery/pages/_pages_utils.py | 4 +- .../_chart-gallery/pages/correlation.py | 5 +- .../_chart-gallery/pages/deviation.py | 2 + .../_chart-gallery/pages/distribution.py | 5 +- .../pages/examples/butterfly.py | 4 +- .../pages/examples/choropleth.py | 3 - .../_chart-gallery/pages/examples/sankey.py | 27 +++---- .../examples/_chart-gallery/pages/flow.py | 5 +- .../_chart-gallery/pages/magnitude.py | 7 +- .../_chart-gallery/pages/part_to_whole.py | 5 +- .../examples/_chart-gallery/pages/ranking.py | 5 +- .../examples/_chart-gallery/pages/spatial.py | 5 +- .../examples/_chart-gallery/pages/time.py | 5 +- vizro-core/examples/scratch_dev/app.py | 24 +++--- 20 files changed, 187 insertions(+), 102 deletions(-) diff --git a/pyproject.toml b/pyproject.toml index 306a87cc4..1109c5482 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -91,3 +91,5 @@ select = [ "**/tests/**" = ["PLR2004", "S101", "TID252", "D100", "D101", "D102", "D103", "PLC1901", "RUF012"] # Ignore import violations in all __init__.py files "__init__.py" = ["E402", "F401"] +# Ignore missing docstrings in chart gallery examples to keep them succinct. +"vizro-core/examples/_chart-gallery/pages/examples/**" = ["D100", "D103"] diff --git a/vizro-core/examples/_chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py index 5e98cfdee..956ce935f 100644 --- a/vizro-core/examples/_chart-gallery/app.py +++ b/vizro-core/examples/_chart-gallery/app.py @@ -1,17 +1,25 @@ """App configuration for chart gallery dashboard.""" -import dash -from typing import Union -import itertools +from typing import List, Union import vizro.models as vm -from chart_groups import ChartGroup, CHART_GROUPS, ALL_CHART_GROUP, IncompletePage -from custom_components import Markdown, FlexContainer - +from chart_groups import ALL_CHART_GROUP, CHART_GROUPS, ChartGroup, IncompletePage +from custom_components import FlexContainer, Markdown from vizro import Vizro -def make_chart_card(page: Union[vm.Page, IncompletePage]): +def make_chart_card(page: Union[vm.Page, IncompletePage]) -> vm.Card: + """Makes a card with svg icon, linked to the right page if page is complete. + + Args: + page: page to make card for + + Returns: card with svg icon, linked to the right page if page is complete. + + """ + # There's one SVG per chart title, so that e.g. pages distribution-butterfly and deviation-butterfly, which both + # have title "Butterfly", correspond to butterfly.svg. + # Incomplete pages have page.path = "" so won't be linked to here. svg_name = page.title.lower().replace(" ", "-") return vm.Card( text=f""" @@ -23,7 +31,17 @@ def make_chart_card(page: Union[vm.Page, IncompletePage]): ) -def make_homepage_container(chart_group: ChartGroup): +def make_homepage_container(chart_group: ChartGroup) -> vm.Container: + """Makes a container with cards for each completed and incomplete chart in chart_group. + + Args: + chart_group: group of charts to make container for. + + Returns: container with cards for each chart in chart_group. + + """ + # Pages are sorted in title's alphabetical order and deduplicated so that e.g. pages distribution-butterfly and + # deviation-butterfly, which both have title "Butterfly", correspond to a single card. return vm.Container( title=chart_group.name, layout=vm.Layout(grid=[[0, 1, 1, 1]], col_gap="40px"), @@ -33,7 +51,7 @@ def make_homepage_container(chart_group: ChartGroup): components=[ make_chart_card(page) for page in sorted( - chart_group.pages + chart_group.incomplete_pages, + _remove_duplicates(chart_group.pages + chart_group.incomplete_pages), key=lambda page: page.title, ) ], @@ -42,7 +60,22 @@ def make_homepage_container(chart_group: ChartGroup): ) -def make_navlink(chart_group: ChartGroup): +def _remove_duplicates(pages: List[Union[vm.Page, IncompletePage]]) -> List[Union[vm.Page, IncompletePage]]: + # Deduplicate pages that have the same title. Using reversed means that the page that is kept is the first one + # in the dashboard. This will be the one that the card on the homepage links to. + return list({page.title: page for page in reversed(pages)}.values()) + + +def make_navlink(chart_group: ChartGroup) -> vm.NavLink: + """Makes a navlink with icon and links to every complete page within chart_group. + + Args: + chart_group: chart_group to make a navlink for. + + Returns: navlink for chart_group. + + """ + # Pages are sorted in alphabetical order within each chart group. return vm.NavLink( label=chart_group.name, pages={chart_group.name: [page.id for page in sorted(chart_group.pages, key=lambda page: page.title)]}, @@ -57,10 +90,10 @@ def make_navlink(chart_group: ChartGroup): ], ) -# TODO: maybe nice to have an overall dashboard title? "Vizro chart gallery" or similar. + dashboard = vm.Dashboard( - # note has duplicates - pages=[homepage, *list(itertools.chain(*(chart_group.pages for chart_group in CHART_GROUPS)))], + # ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly. + pages=[homepage, *ALL_CHART_GROUP.pages], navigation=vm.Navigation( nav_selector=vm.NavBar( items=[ diff --git a/vizro-core/examples/_chart-gallery/chart_groups.py b/vizro-core/examples/_chart-gallery/chart_groups.py index 6356f453f..8d765ce6a 100644 --- a/vizro-core/examples/_chart-gallery/chart_groups.py +++ b/vizro-core/examples/_chart-gallery/chart_groups.py @@ -1,36 +1,52 @@ -# """Contains code for the containers used inside the tabs (homepage).""" -import itertools - -from typing import Set, List +"""Defines chart groups.""" -from dataclasses import dataclass, field +import itertools +from dataclasses import dataclass +from typing import List -import pages.deviation, pages.correlation, pages.ranking, pages.magnitude, pages.time, pages.spatial, pages.distribution, pages.flow, pages.part_to_whole +import pages.correlation +import pages.deviation +import pages.distribution +import pages.flow +import pages.magnitude +import pages.part_to_whole +import pages.ranking +import pages.spatial +import pages.time import vizro.models as vm -# COMMENT - class IncompletePage: - def __init__(self, title): + """Fake vm.Page-like class. + + This has the properties required to make it function sufficiently like a page when generating the navigation cards. + Only the title is configurable; path is fixed to "". + """ + + def __init__(self, title): # noqa: D107 self.title = title - self.path = "" + + @property + def path(self): # noqa: D102 + return "" @dataclass class ChartGroup: + """Represents a group of charts like "Deviation".""" + name: str - pages: List[vm.Page] # Just completed, not all pages + pages: List[vm.Page] # This is just the completed pages. incomplete_pages: List[IncompletePage] intro_text: str - icon: str = "" + icon: str = "" # ALL_CHART_GROUP is the only one that doesn't require an icon. # TODO: Charts that are commented out in incomplete_pages below do not have an svg made yet. # Uncomment them once they are ready. deviation_intro_text = """ -Deviation enables you to draw attention to variations (+/ ) from a fixed reference point. +Deviation enables you to draw attention to variations (+/-) from a fixed reference point. Often this reference point is zero, but you might also show a target or a long term average. You can also use deviation to express a positive, neutral or negative sentiment. """ @@ -184,7 +200,11 @@ class ChartGroup: flow_chart_group = ChartGroup( name="Flow", pages=pages.flow.pages, - incomplete_pages=[IncompletePage("Waterfall"), IncompletePage("Chord"), IncompletePage("Network")], + incomplete_pages=[ + IncompletePage("Waterfall"), + IncompletePage("Chord"), + IncompletePage("Network"), + ], icon="Stacked Line Chart", intro_text=flow_intro_text, ) @@ -195,7 +215,11 @@ class ChartGroup: spatial_chart_group = ChartGroup( name="Spatial", pages=pages.spatial.pages, - incomplete_pages=[IncompletePage("Dot map"), IncompletePage("Flow map"), IncompletePage("Bubble map")], + incomplete_pages=[ + IncompletePage("Dot map"), + IncompletePage("Flow map"), + IncompletePage("Bubble map"), + ], icon="Map", intro_text=spatial_intro_text, ) @@ -214,22 +238,21 @@ class ChartGroup: ] all_intro_text = """ -TODO: write this. -""" - - -def remove_duplicated_titles(pages): - # comment on reversed - return list({page.title: page for page in reversed(list(pages))}.values()) +This dashboard shows a gallery of charts. It includes guidance on when to use each chart type and sample Python code +to create them using [Plotly](https://plotly.com/python/) and [Vizro](https://vizro.mckinsey.com/). +Inspired by the +[FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md): +FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, +Martin Stabe. +""" -# TODO: COMMENT, maybe refactor into remove_duplicated_titles +# This contains all pages used across all chart groups, without de-duplicating. De-duplication is done where required +# by remove_duplicates. ALL_CHART_GROUP = ChartGroup( name="All", - pages=remove_duplicated_titles(itertools.chain(*(chart_group.pages for chart_group in CHART_GROUPS))), - incomplete_pages=remove_duplicated_titles( - itertools.chain(*(chart_group.incomplete_pages for chart_group in CHART_GROUPS)) - ), + pages=list(itertools.chain(*(chart_group.pages for chart_group in CHART_GROUPS))), + incomplete_pages=list(itertools.chain(*(chart_group.incomplete_pages for chart_group in CHART_GROUPS))), intro_text=all_intro_text, ) diff --git a/vizro-core/examples/_chart-gallery/custom_charts.py b/vizro-core/examples/_chart-gallery/custom_charts.py index 54245b3e3..84955cc90 100644 --- a/vizro-core/examples/_chart-gallery/custom_charts.py +++ b/vizro-core/examples/_chart-gallery/custom_charts.py @@ -1,11 +1,9 @@ """Contains custom charts used inside the dashboard.""" - from typing import List import pandas as pd from plotly import graph_objects as go - from vizro.models.types import capture @@ -74,18 +72,18 @@ def sankey(data_frame: pd.DataFrame, source: str, target: str, value: str, label fig = go.Figure( data=[ go.Sankey( - node=dict( # noqa: C408 - pad=16, - thickness=16, - label=labels, - ), - link=dict( # noqa: C408 - source=data_frame[source], - target=data_frame[target], - value=data_frame[value], - label=labels, - color="rgba(205, 209, 228, 0.4)", - ), + node={ + "pad": 16, + "thickness": 16, + "label": labels, + }, + link={ + "source": data_frame[source], + "target": data_frame[target], + "value": data_frame[value], + "label": labels, + "color": "rgba(205, 209, 228, 0.4)", + }, ) ] ) diff --git a/vizro-core/examples/_chart-gallery/pages/__init__.py b/vizro-core/examples/_chart-gallery/pages/__init__.py index 16ed9d148..cc121d915 100644 --- a/vizro-core/examples/_chart-gallery/pages/__init__.py +++ b/vizro-core/examples/_chart-gallery/pages/__init__.py @@ -1,2 +1,5 @@ -# AM: eventually deduplicate page stuff into function - can do find and replace with a regex or similar... -# Or do it now? +# TODO: eventually deduplicate page generation into a function rather than copying and pasting across files? +# TODO: think about the best way to do code examples, e.g. +# - do we want full dashboard example or plot-only example? +# - or both? Could be done using a toggle switch or multiple tabs. +# - a link to py.cafe showing the dashboard code? diff --git a/vizro-core/examples/_chart-gallery/pages/_factories.py b/vizro-core/examples/_chart-gallery/pages/_factories.py index 07df4d1b9..508ac49c7 100644 --- a/vizro-core/examples/_chart-gallery/pages/_factories.py +++ b/vizro-core/examples/_chart-gallery/pages/_factories.py @@ -4,12 +4,12 @@ each chart type used in different groups. """ -from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips_agg, gapminder_2007, ages - import vizro.models as vm import vizro.plotly.express as px from custom_charts import butterfly +from pages._pages_utils import PAGE_GRID, ages, gapminder_2007, make_code_clipboard_from_py_file, tips_agg + # TODO: this is currently identical to ordered column. It should be: # - unordered (currently ordering is done in tips_agg) @@ -27,14 +27,14 @@ def column_factory(group: str): vm.Card( text=""" #### What is a column chart? - + A column chart is a vertical bar chart, with column lengths varying according to the categorical value they represent. The scale is presented on the y-axis, starting with zero. - +   - + #### When to use it? - + Select a column chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents **how many?** in each category. You can arrange your columns in any order to fit the message you wish to emphasize. Be mindful of diff --git a/vizro-core/examples/_chart-gallery/pages/_pages_utils.py b/vizro-core/examples/_chart-gallery/pages/_pages_utils.py index 8fab81ca5..507648d81 100644 --- a/vizro-core/examples/_chart-gallery/pages/_pages_utils.py +++ b/vizro-core/examples/_chart-gallery/pages/_pages_utils.py @@ -1,4 +1,5 @@ """Contains reusable data sets and constants.""" + from pathlib import Path import black @@ -8,7 +9,8 @@ def make_code_clipboard_from_py_file(filepath: str): - # comment on stability + # Black doesn't yet have a Python API, so format_str might not work at some point in the future. + # https://black.readthedocs.io/en/stable/faq.html#does-black-have-an-api filepath = Path(__file__).parents[1] / "pages/examples" / filepath return CodeClipboard( code=black.format_str(filepath.read_text(encoding="utf-8"), mode=black.Mode()), language="python" diff --git a/vizro-core/examples/_chart-gallery/pages/correlation.py b/vizro-core/examples/_chart-gallery/pages/correlation.py index 0ba1eb792..9abf8d155 100644 --- a/vizro-core/examples/_chart-gallery/pages/correlation.py +++ b/vizro-core/examples/_chart-gallery/pages/correlation.py @@ -1,6 +1,9 @@ +"""Correlation charts.""" + import vizro.models as vm import vizro.plotly.express as px -from pages._pages_utils import iris, PAGE_GRID, make_code_clipboard_from_py_file + +from pages._pages_utils import PAGE_GRID, iris, make_code_clipboard_from_py_file scatter = vm.Page( title="Scatter", diff --git a/vizro-core/examples/_chart-gallery/pages/deviation.py b/vizro-core/examples/_chart-gallery/pages/deviation.py index c1d35e148..93b4f731f 100644 --- a/vizro-core/examples/_chart-gallery/pages/deviation.py +++ b/vizro-core/examples/_chart-gallery/pages/deviation.py @@ -1,3 +1,5 @@ +"""Deviation charts.""" + from pages._factories import butterfly_factory butterfly = butterfly_factory("deviation") diff --git a/vizro-core/examples/_chart-gallery/pages/distribution.py b/vizro-core/examples/_chart-gallery/pages/distribution.py index bf458f44d..2379ede9a 100644 --- a/vizro-core/examples/_chart-gallery/pages/distribution.py +++ b/vizro-core/examples/_chart-gallery/pages/distribution.py @@ -1,7 +1,10 @@ +"""Distribution charts.""" + import vizro.models as vm import vizro.plotly.express as px + from pages._factories import butterfly_factory -from pages._pages_utils import tips, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips violin = vm.Page( title="Violin", diff --git a/vizro-core/examples/_chart-gallery/pages/examples/butterfly.py b/vizro-core/examples/_chart-gallery/pages/examples/butterfly.py index be7901020..0536020a5 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/butterfly.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/butterfly.py @@ -1,8 +1,8 @@ +import pandas as pd +import plotly.graph_objects as go import vizro.models as vm from vizro import Vizro -import pandas as pd from vizro.models.types import capture -import plotly.graph_objects as go ages = pd.DataFrame( { diff --git a/vizro-core/examples/_chart-gallery/pages/examples/choropleth.py b/vizro-core/examples/_chart-gallery/pages/examples/choropleth.py index 6b82e83f2..1ca850af5 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/choropleth.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/choropleth.py @@ -1,6 +1,3 @@ -import json - -import pandas as pd import vizro.models as vm import vizro.plotly.express as px from vizro import Vizro diff --git a/vizro-core/examples/_chart-gallery/pages/examples/sankey.py b/vizro-core/examples/_chart-gallery/pages/examples/sankey.py index 62a46b140..eff1bde05 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/sankey.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/sankey.py @@ -1,9 +1,10 @@ +from typing import List + import pandas as pd import plotly.graph_objects as go import vizro.models as vm from vizro import Vizro from vizro.models.types import capture -from typing import List sankey_data = pd.DataFrame( { @@ -25,18 +26,18 @@ def sankey( fig = go.Figure( data=[ go.Sankey( - node=dict( - pad=16, - thickness=16, - label=labels, - ), - link=dict( - source=data_frame[source], - target=data_frame[target], - value=data_frame[value], - label=labels, - color="rgba(205, 209, 228, 0.4)", - ), + node={ + "pad": 16, + "thickness": 16, + "label": labels, + }, + link={ + "source": data_frame[source], + "target": data_frame[target], + "value": data_frame[value], + "label": labels, + "color": "rgba(205, 209, 228, 0.4)", + }, ) ] ) diff --git a/vizro-core/examples/_chart-gallery/pages/flow.py b/vizro-core/examples/_chart-gallery/pages/flow.py index 4668c8fbe..8386ad457 100644 --- a/vizro-core/examples/_chart-gallery/pages/flow.py +++ b/vizro-core/examples/_chart-gallery/pages/flow.py @@ -1,7 +1,10 @@ +"""Flow charts.""" + import vizro.models as vm -from pages._pages_utils import sankey_data, PAGE_GRID, make_code_clipboard_from_py_file from custom_charts import sankey +from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, sankey_data + sankey = vm.Page( title="Sankey", path="flow/sankey", diff --git a/vizro-core/examples/_chart-gallery/pages/magnitude.py b/vizro-core/examples/_chart-gallery/pages/magnitude.py index fdf3d4b2b..f8f7ff951 100644 --- a/vizro-core/examples/_chart-gallery/pages/magnitude.py +++ b/vizro-core/examples/_chart-gallery/pages/magnitude.py @@ -1,7 +1,10 @@ -from pages._factories import column_factory, treemap_factory +"""Magnitude charts.""" + import vizro.models as vm import vizro.plotly.express as px -from pages._pages_utils import tips_agg, PAGE_GRID, make_code_clipboard_from_py_file + +from pages._factories import column_factory, treemap_factory +from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips_agg # TODO: this is currently identical to ordered bar. It should be: # - unordered (currently ordering is done in tips_agg) diff --git a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py index 2d0013ac0..43b9548ae 100644 --- a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py +++ b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py @@ -1,7 +1,10 @@ +"""Part-to-whole charts.""" + import vizro.models as vm import vizro.plotly.express as px + from pages._factories import treemap_factory -from pages._pages_utils import tips, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips pie = vm.Page( title="Pie", diff --git a/vizro-core/examples/_chart-gallery/pages/ranking.py b/vizro-core/examples/_chart-gallery/pages/ranking.py index d14faf10a..7ae023c6b 100644 --- a/vizro-core/examples/_chart-gallery/pages/ranking.py +++ b/vizro-core/examples/_chart-gallery/pages/ranking.py @@ -1,6 +1,9 @@ +"""Ranking charts.""" + import vizro.models as vm import vizro.plotly.express as px -from pages._pages_utils import tips_agg, PAGE_GRID, make_code_clipboard_from_py_file + +from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips_agg ordered_bar = vm.Page( title="Ordered bar", diff --git a/vizro-core/examples/_chart-gallery/pages/spatial.py b/vizro-core/examples/_chart-gallery/pages/spatial.py index 16a0f791a..e6c2e1b7c 100644 --- a/vizro-core/examples/_chart-gallery/pages/spatial.py +++ b/vizro-core/examples/_chart-gallery/pages/spatial.py @@ -1,6 +1,9 @@ +"""Spatial charts.""" + import vizro.models as vm import vizro.plotly.express as px -from pages._pages_utils import gapminder_2007, PAGE_GRID, make_code_clipboard_from_py_file + +from pages._pages_utils import PAGE_GRID, gapminder_2007, make_code_clipboard_from_py_file choropleth = vm.Page( title="Choropleth", diff --git a/vizro-core/examples/_chart-gallery/pages/time.py b/vizro-core/examples/_chart-gallery/pages/time.py index fd6125326..62fc2218e 100644 --- a/vizro-core/examples/_chart-gallery/pages/time.py +++ b/vizro-core/examples/_chart-gallery/pages/time.py @@ -1,7 +1,10 @@ +"""Time charts.""" + import vizro.models as vm import vizro.plotly.express as px + from pages._factories import column_factory -from pages._pages_utils import stocks, PAGE_GRID, make_code_clipboard_from_py_file +from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, stocks line = vm.Page( title="Line", diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py index a2f815983..b4bb910c1 100644 --- a/vizro-core/examples/scratch_dev/app.py +++ b/vizro-core/examples/scratch_dev/app.py @@ -29,18 +29,18 @@ def sankey( fig = go.Figure( data=[ go.Sankey( - node=dict( # noqa: C408 - pad=16, - thickness=16, - label=labels, - ), - link=dict( # noqa: C408 - source=data_frame[source], - target=data_frame[target], - value=data_frame[value], - label=labels, - color="rgba(205, 209, 228, 0.4)", - ), + node={ + "pad": 16, + "thickness": 16, + "label": labels, + }, + link={ + "source": data_frame[source], + "target": data_frame[target], + "value": data_frame[value], + "label": labels, + "color": "rgba(205, 209, 228, 0.4)", + }, ) ] ) From 0a4e243ee555961b63671304a6d4a4f17d15a952 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Thu, 25 Jul 2024 11:52:50 +0100 Subject: [PATCH 090/109] - Make separate environment for examples with black as requirement - Update README --- vizro-core/examples/_chart-gallery/README.md | 19 +++++++------- .../examples/_chart-gallery/requirements.txt | 4 +++ vizro-core/examples/kpi/utils/_charts.py | 4 +-- vizro-core/hatch.toml | 26 +++++++++++++------ 4 files changed, 33 insertions(+), 20 deletions(-) create mode 100644 vizro-core/examples/_chart-gallery/requirements.txt diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index 232ff58e8..f2f92920c 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/vizro-core/examples/_chart-gallery/README.md @@ -1,10 +1,10 @@ # Chart gallery dashboard -This demo dashboard provides a gallery of charts. It includes guidance on when to use each chart type and sample code -to create them using Plotly and Vizro. +This dashboard shows a gallery of charts. It includes guidance on when to use each chart type and sample Python code +to create them using [Plotly](https://plotly.com/python/) and [Vizro](https://vizro.mckinsey.com/). Inspired by the [FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md): -FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, Martin Stabe +FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, Martin Stabe. ## Chart types @@ -57,7 +57,7 @@ The dashboard is still in development. Below is an overview of the chart types f | Stacked Column | ❌ | Part-to-whole | | Stepped Line | ❌ | Ranking | | Surplus-Deficit-Line | ❌ | Deviation | -| Treemap | ✅ | Part-to-whole | +| Treemap | ✅ | Magnitude, Part-to-whole | | Venn | ❌ | Part-to-whole | | Violin | ✅ | Distribution | | Waterfall | ❌ | Part-to-whole, Flow | @@ -65,14 +65,13 @@ The dashboard is still in development. Below is an overview of the chart types f To contribute a chart, follow the steps below: 1. Place an `svg` file named after the chart type in the `assets` folder if not already available. -2. Create a new page for the chart type in `chart_pages.py`. Refer to existing pages for guidance. -3. Add any new datasets to the `DATA_DICT` in `_page_utils.py`. -4. Uncomment the completed chart in the `COMPLETED_CHARTS` list in `tab_containers.py` to enable navigation. -5. Add the new chart page to the appropriate category in the navigation within `app.py`. -6. Update the `README.md` with the new chart type. +2. Create a new page for the chart type in `pages.py` and a code sample in `pages/examples`. Refer to existing pages for guidance. +3. Add any new datasets to `pages/_page_utils.py`. +4. Remove the page from `incomplete_pages` in the relevant `ChartGroup`(s) in `chart_groups.py`. +5. Update this `README.md` with the new chart type. ## How to run the example locally 1. If you have `hatch` set up, run the example with the command `hatch run example _chart-gallery`. - Otherwise, run `python app.py` with your Python environment activated where `vizro` is installed. + Otherwise, with a virtual Python environment activated, run `pip install -r requirements.txt` and then `python app.py`. 2. You should now be able to access the app locally via http://127.0.0.1:8050/. diff --git a/vizro-core/examples/_chart-gallery/requirements.txt b/vizro-core/examples/_chart-gallery/requirements.txt new file mode 100644 index 000000000..f8c2b9078 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/requirements.txt @@ -0,0 +1,4 @@ +# This file is only used if you don't have hatch installed. +# It should be fully generated and used when the demo moves to huggingface. +black==24.4.2 +vizro diff --git a/vizro-core/examples/kpi/utils/_charts.py b/vizro-core/examples/kpi/utils/_charts.py index d6ffd5147..f084f4cee 100644 --- a/vizro-core/examples/kpi/utils/_charts.py +++ b/vizro-core/examples/kpi/utils/_charts.py @@ -60,7 +60,7 @@ def bar( color_discrete_sequence=["#1A85FF"], custom_data=custom_data, ) - fig.update_layout(xaxis_title="# of Complaints", yaxis=dict(title="", autorange="reversed")) # noqa: C408 + fig.update_layout(xaxis_title="# of Complaints", yaxis={"title": "", "autorange": "reversed"}) return fig @@ -101,7 +101,7 @@ def pie( hole=0.4, ) - fig.update_layout(legend_x=1, legend_y=1, title_pad_t=2, margin=dict(l=0, r=0, t=60, b=0)) # noqa: C408 + fig.update_layout(legend_x=1, legend_y=1, title_pad_t=2, margin={"l": 0, "r": 0, "t": 60, "b": 0}) fig.update_traces(sort=False) return fig diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml index 2389bb56c..ced279b35 100644 --- a/vizro-core/hatch.toml +++ b/vizro-core/hatch.toml @@ -26,17 +26,12 @@ dependencies = [ "chromedriver-autoinstaller>=0.6.4", "toml", "pyyaml", - "openpyxl", - "black", # TODO COMMENT: Not for linting, just for example. Should really be in different environment (on HF). Maybe make new environment for examples anyway + "openpyxl" ] -[envs.default.env-vars] -DASH_DEBUG = "true" -VIZRO_LOG_LEVEL = "DEBUG" - [envs.default.scripts] -example = "cd examples/{args:scratch_dev}; python app.py" -lint = "hatch run lint:lint {args:--all-files}" +example = "hatch run examples:example {args:scratch_dev}" # shortcut script to underlying example environment script. +lint = "hatch run lint:lint {args:--all-files}" # shortcut script to underlying lint environment script. prep-release = [ "hatch version release", "hatch run changelog:collect", @@ -80,6 +75,21 @@ build = "mkdocs build --strict" link-check = "linkchecker site --check-extern --no-warnings --ignore=404.html --ignore-url=127.0.0.1 --ignore-url=https://vizro.readthedocs.io/" serve = "mkdocs serve --open" +[envs.examples] +dependencies = [ + "pyyaml", + # black is required to run the example _chart-gallery. This is completely independent of the black used in linting + # our code. When this moves to HuggingFace we can remove the requirement from here. + "black==24.4.2" +] +scripts = {example = "cd examples/{args:scratch_dev}; python app.py"} +# This environment doesn't inherit from default but does install Vizro. +template = "examples" + +[envs.examples.env-vars] +DASH_DEBUG = "true" +VIZRO_LOG_LEVEL = "DEBUG" + [envs.lint] dependencies = [ "pre-commit" From d0c6b395f6933c70177a5764952f9592c1d16a42 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 25 Jul 2024 13:24:49 +0200 Subject: [PATCH 091/109] Fix scroll conflicts --- vizro-core/examples/_chart-gallery/assets/css/custom.css | 3 --- 1 file changed, 3 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index 4c4ef05ac..573506282 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -6,9 +6,6 @@ width: 288px; } -#page-components { - overflow: unset; -} img[src*="#chart-icon"] { width: 100%; From 4df4e35cf5b3023343998b83f67003f34a2c188e Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu, 25 Jul 2024 11:25:16 +0000 Subject: [PATCH 092/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/_chart-gallery/assets/css/custom.css | 1 - 1 file changed, 1 deletion(-) diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index 573506282..bc3d0d3d1 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -6,7 +6,6 @@ width: 288px; } - img[src*="#chart-icon"] { width: 100%; } From 2036943b4cc56c76ab23af72f8ae3c1caae252d9 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Thu, 25 Jul 2024 14:35:44 +0200 Subject: [PATCH 093/109] Fix README --- vizro-core/examples/_chart-gallery/README.md | 101 ++++++++++--------- 1 file changed, 51 insertions(+), 50 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index f2f92920c..074425878 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/vizro-core/examples/_chart-gallery/README.md @@ -11,56 +11,57 @@ FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, B The dashboard is still in development. Below is an overview of the chart types for which a completed page is available. | Chart Type | Status | Category | -| -------------------- | ------ | ------------------------ | -| Arc | ❌ | Part-to-whole | -| Barcode | ❌ | Distribution | -| Bar | ✅ | Magnitude | -| Boxplot | ✅ | Distribution | -| Bubble | ❌ | Correlation, Magnitude | -| Bubble Map | ❌ | Spatial | -| Bubble Timeline | ❌ | Time | -| Bullet | ❌ | Magnitude | -| Butterfly | ✅ | Deviation, Distribution | -| Chord | ❌ | Flow | -| Choropleth | ✅ | Spatial | -| Column | ✅ | Magnitude, Time | -| Column-Line | ❌ | Correlation, Time | -| Cumulative Curve | ❌ | Distribution | -| Diverging Bar | ❌ | Deviation | -| Dot Map | ❌ | Spatial | -| Dot Plot | ❌ | Distribution | -| Donut | ✅ | Part-to-whole | -| Fan | ❌ | Time | -| Flow Map | ❌ | Spatial | -| Funnel | ❌ | Part-to-whole | -| Gantt | ❌ | Time | -| Heatmap | ❌ | Time | -| Heatmap-Matrix | ❌ | Correlation | -| Histogram | ❌ | Distribution | -| Line | ❌ | Time | -| Lollipop | ❌ | Ranking, Magnitude | -| Marimekko | ❌ | Magnitude, Part-to-whole | -| Ordered Bar | ✅ | Ranking | -| Ordered Bubble | ❌ | Ranking | -| Ordered Column | ✅ | Ranking | -| Parallel Coordinates | ❌ | Magnitude | -| Pictogram | ❌ | Magnitude | -| Pie | ✅ | Part-to-whole | -| Radar | ❌ | Magnitude | -| Radial | ❌ | Magnitude | -| Sankey | ✅ | Flow | -| Scatter | ✅ | Correlation | -| Scatter Matrix | ❌ | Correlation | -| Slope | ❌ | Ranking, Time | -| Sparkline | ❌ | Time | -| Stacked Bar | ❌ | Part-to-whole | -| Stacked Column | ❌ | Part-to-whole | -| Stepped Line | ❌ | Ranking | -| Surplus-Deficit-Line | ❌ | Deviation | -| Treemap | ✅ | Magnitude, Part-to-whole | -| Venn | ❌ | Part-to-whole | -| Violin | ✅ | Distribution | -| Waterfall | ❌ | Part-to-whole, Flow | +|----------------------|--------|--------------------------| +| Arc | ❌ | Part-to-whole | +| Area | ❌ | Time | +| Barcode | ❌ | Distribution | +| Bar | ✅ | Magnitude | +| Boxplot | ✅ | Distribution | +| Bubble | ❌ | Correlation, Magnitude | +| Bubble Map | ❌ | Spatial | +| Bubble Timeline | ❌ | Time | +| Bullet | ❌ | Magnitude | +| Butterfly | ✅ | Deviation, Distribution | +| Chord | ❌ | Flow | +| Choropleth | ✅ | Spatial | +| Column | ✅ | Magnitude, Time | +| Column-Line | ❌ | Correlation, Time | +| Cumulative Curve | ❌ | Distribution | +| Diverging Bar | ❌ | Deviation | +| Dot Map | ❌ | Spatial | +| Dot Plot | ❌ | Distribution | +| Donut | ✅ | Part-to-whole | +| Fan | ❌ | Time | +| Flow Map | ❌ | Spatial | +| Funnel | ❌ | Part-to-whole | +| Gantt | ❌ | Time | +| Heatmap | ❌ | Time | +| Heatmap-Matrix | ❌ | Correlation | +| Histogram | ❌ | Distribution | +| Line | ✅ | Time | +| Lollipop | ❌ | Ranking, Magnitude | +| Marimekko | ❌ | Magnitude, Part-to-whole | +| Ordered Bar | ✅ | Ranking | +| Ordered Bubble | ❌ | Ranking | +| Ordered Column | ✅ | Ranking | +| Parallel Coordinates | ❌ | Magnitude | +| Pictogram | ❌ | Magnitude | +| Pie | ✅ | Part-to-whole | +| Radar | ❌ | Magnitude | +| Radial | ❌ | Magnitude | +| Sankey | ✅ | Flow | +| Scatter | ✅ | Correlation | +| Scatter Matrix | ❌ | Correlation | +| Slope | ❌ | Ranking, Time | +| Sparkline | ❌ | Time | +| Stacked Bar | ❌ | Part-to-whole | +| Stacked Column | ❌ | Part-to-whole | +| Stepped Line | ❌ | Ranking | +| Surplus-Deficit-Line | ❌ | Deviation | +| Treemap | ✅ | Magnitude, Part-to-whole | +| Venn | ❌ | Part-to-whole | +| Violin | ✅ | Distribution | +| Waterfall | ❌ | Part-to-whole, Flow | To contribute a chart, follow the steps below: From 6116092770fed30d663444788a59bcd24524747e Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu, 25 Jul 2024 12:36:12 +0000 Subject: [PATCH 094/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/_chart-gallery/README.md | 102 +++++++++---------- 1 file changed, 51 insertions(+), 51 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index 074425878..5f7a0d6ff 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/vizro-core/examples/_chart-gallery/README.md @@ -11,57 +11,57 @@ FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, B The dashboard is still in development. Below is an overview of the chart types for which a completed page is available. | Chart Type | Status | Category | -|----------------------|--------|--------------------------| -| Arc | ❌ | Part-to-whole | -| Area | ❌ | Time | -| Barcode | ❌ | Distribution | -| Bar | ✅ | Magnitude | -| Boxplot | ✅ | Distribution | -| Bubble | ❌ | Correlation, Magnitude | -| Bubble Map | ❌ | Spatial | -| Bubble Timeline | ❌ | Time | -| Bullet | ❌ | Magnitude | -| Butterfly | ✅ | Deviation, Distribution | -| Chord | ❌ | Flow | -| Choropleth | ✅ | Spatial | -| Column | ✅ | Magnitude, Time | -| Column-Line | ❌ | Correlation, Time | -| Cumulative Curve | ❌ | Distribution | -| Diverging Bar | ❌ | Deviation | -| Dot Map | ❌ | Spatial | -| Dot Plot | ❌ | Distribution | -| Donut | ✅ | Part-to-whole | -| Fan | ❌ | Time | -| Flow Map | ❌ | Spatial | -| Funnel | ❌ | Part-to-whole | -| Gantt | ❌ | Time | -| Heatmap | ❌ | Time | -| Heatmap-Matrix | ❌ | Correlation | -| Histogram | ❌ | Distribution | -| Line | ✅ | Time | -| Lollipop | ❌ | Ranking, Magnitude | -| Marimekko | ❌ | Magnitude, Part-to-whole | -| Ordered Bar | ✅ | Ranking | -| Ordered Bubble | ❌ | Ranking | -| Ordered Column | ✅ | Ranking | -| Parallel Coordinates | ❌ | Magnitude | -| Pictogram | ❌ | Magnitude | -| Pie | ✅ | Part-to-whole | -| Radar | ❌ | Magnitude | -| Radial | ❌ | Magnitude | -| Sankey | ✅ | Flow | -| Scatter | ✅ | Correlation | -| Scatter Matrix | ❌ | Correlation | -| Slope | ❌ | Ranking, Time | -| Sparkline | ❌ | Time | -| Stacked Bar | ❌ | Part-to-whole | -| Stacked Column | ❌ | Part-to-whole | -| Stepped Line | ❌ | Ranking | -| Surplus-Deficit-Line | ❌ | Deviation | -| Treemap | ✅ | Magnitude, Part-to-whole | -| Venn | ❌ | Part-to-whole | -| Violin | ✅ | Distribution | -| Waterfall | ❌ | Part-to-whole, Flow | +| -------------------- | ------ | ------------------------ | +| Arc | ❌ | Part-to-whole | +| Area | ❌ | Time | +| Barcode | ❌ | Distribution | +| Bar | ✅ | Magnitude | +| Boxplot | ✅ | Distribution | +| Bubble | ❌ | Correlation, Magnitude | +| Bubble Map | ❌ | Spatial | +| Bubble Timeline | ❌ | Time | +| Bullet | ❌ | Magnitude | +| Butterfly | ✅ | Deviation, Distribution | +| Chord | ❌ | Flow | +| Choropleth | ✅ | Spatial | +| Column | ✅ | Magnitude, Time | +| Column-Line | ❌ | Correlation, Time | +| Cumulative Curve | ❌ | Distribution | +| Diverging Bar | ❌ | Deviation | +| Dot Map | ❌ | Spatial | +| Dot Plot | ❌ | Distribution | +| Donut | ✅ | Part-to-whole | +| Fan | ❌ | Time | +| Flow Map | ❌ | Spatial | +| Funnel | ❌ | Part-to-whole | +| Gantt | ❌ | Time | +| Heatmap | ❌ | Time | +| Heatmap-Matrix | ❌ | Correlation | +| Histogram | ❌ | Distribution | +| Line | ✅ | Time | +| Lollipop | ❌ | Ranking, Magnitude | +| Marimekko | ❌ | Magnitude, Part-to-whole | +| Ordered Bar | ✅ | Ranking | +| Ordered Bubble | ❌ | Ranking | +| Ordered Column | ✅ | Ranking | +| Parallel Coordinates | ❌ | Magnitude | +| Pictogram | ❌ | Magnitude | +| Pie | ✅ | Part-to-whole | +| Radar | ❌ | Magnitude | +| Radial | ❌ | Magnitude | +| Sankey | ✅ | Flow | +| Scatter | ✅ | Correlation | +| Scatter Matrix | ❌ | Correlation | +| Slope | ❌ | Ranking, Time | +| Sparkline | ❌ | Time | +| Stacked Bar | ❌ | Part-to-whole | +| Stacked Column | ❌ | Part-to-whole | +| Stepped Line | ❌ | Ranking | +| Surplus-Deficit-Line | ❌ | Deviation | +| Treemap | ✅ | Magnitude, Part-to-whole | +| Venn | ❌ | Part-to-whole | +| Violin | ✅ | Distribution | +| Waterfall | ❌ | Part-to-whole, Flow | To contribute a chart, follow the steps below: From 75e8def8ab43e9514324148598c9ccee258f4698 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Thu, 25 Jul 2024 12:29:21 +0100 Subject: [PATCH 095/109] Remove chart gallery from integration tests --- vizro-core/tests/integration/test_examples.py | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py index 18cfd76cc..fe39c5a8b 100644 --- a/vizro-core/tests/integration/test_examples.py +++ b/vizro-core/tests/integration/test_examples.py @@ -52,11 +52,12 @@ def dashboard(request, monkeypatch): @pytest.mark.parametrize( "example_path, version", [ + # Chart gallery is not included since it means installing black in the testing environment. + # It will move to HuggingFace in due course anyway. (examples_path / "scratch_dev", ""), (examples_path / "scratch_dev", "yaml_version"), (examples_path / "dev", ""), (examples_path / "dev", "yaml_version"), - (examples_path / "_chart-gallery", ""), (examples_path / "kpi", ""), ], ids=str, From 77f7ea799d4caf331880ef85f406e266695a4779 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Thu, 25 Jul 2024 21:46:47 +0100 Subject: [PATCH 096/109] Minor corrections --- vizro-core/examples/_chart-gallery/custom_charts.py | 2 +- .../examples/_chart-gallery/pages/_factories.py | 6 +++--- .../examples/_chart-gallery/pages/correlation.py | 4 ++-- .../examples/_chart-gallery/pages/distribution.py | 6 +++--- .../examples/_chart-gallery/pages/examples/bar.py | 11 +---------- .../examples/_chart-gallery/pages/examples/boxplot.py | 9 +-------- .../_chart-gallery/pages/examples/butterfly.py | 2 +- .../_chart-gallery/pages/examples/choropleth.py | 9 +-------- .../examples/_chart-gallery/pages/examples/column.py | 10 +--------- .../examples/_chart-gallery/pages/examples/donut.py | 11 +---------- .../_chart-gallery/pages/examples/ordered_bar.py | 11 +---------- .../_chart-gallery/pages/examples/ordered_column.py | 10 +--------- .../examples/_chart-gallery/pages/examples/scatter.py | 11 +---------- .../examples/_chart-gallery/pages/examples/treemap.py | 5 +---- .../examples/_chart-gallery/pages/examples/violin.py | 9 +-------- vizro-core/examples/_chart-gallery/pages/flow.py | 2 +- vizro-core/examples/_chart-gallery/pages/magnitude.py | 2 +- .../examples/_chart-gallery/pages/part_to_whole.py | 6 +++--- vizro-core/examples/_chart-gallery/pages/ranking.py | 4 ++-- vizro-core/examples/_chart-gallery/pages/spatial.py | 2 +- vizro-core/examples/_chart-gallery/pages/time.py | 2 +- 21 files changed, 29 insertions(+), 105 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/custom_charts.py b/vizro-core/examples/_chart-gallery/custom_charts.py index 84955cc90..7a971d7a5 100644 --- a/vizro-core/examples/_chart-gallery/custom_charts.py +++ b/vizro-core/examples/_chart-gallery/custom_charts.py @@ -30,7 +30,7 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str) -> go.Figure: fig = go.Figure() fig.add_trace( go.Bar( - x=-data_frame[x1].values, + x=-data_frame[x1], y=data_frame[y], orientation="h", name=x1, diff --git a/vizro-core/examples/_chart-gallery/pages/_factories.py b/vizro-core/examples/_chart-gallery/pages/_factories.py index 508ac49c7..5a4bffdd8 100644 --- a/vizro-core/examples/_chart-gallery/pages/_factories.py +++ b/vizro-core/examples/_chart-gallery/pages/_factories.py @@ -33,7 +33,7 @@ def column_factory(group: str):   - #### When to use it? + #### When should I use it? Select a column chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents **how many?** in each category. You can @@ -73,7 +73,7 @@ def treemap_factory(group: str):   - #### When to use it? + #### When should I use it? It's helpful to use a treemap when you wish to display hierarchical part-to-whole relationships. You can compare groups and single elements nested within them. Consider using them instead of Pie charts when @@ -112,7 +112,7 @@ def butterfly_factory(group: str):   - #### When to use it? + #### When should I use it? Use a butterfly chart when you wish to emphasize the comparison between two data sets sharing the same parameters. Sharing this chart with your audience will help them see at a glance how two groups differ diff --git a/vizro-core/examples/_chart-gallery/pages/correlation.py b/vizro-core/examples/_chart-gallery/pages/correlation.py index 9abf8d155..6a2b96c38 100644 --- a/vizro-core/examples/_chart-gallery/pages/correlation.py +++ b/vizro-core/examples/_chart-gallery/pages/correlation.py @@ -20,10 +20,10 @@   - #### When to use it? + #### When should I use it? Use scatter plots when you want to show the relationship between two variables. Scatter plots are sometimes - called Correlation plots because they show how two variables are correlated. Scatter plots are ideal when + called _Correlation plots_ because they show how two variables are correlated. Scatter plots are ideal when you have paired numerical data and you want to see if one variable impacts the other. However, do remember that correlation is not causation. Make sure your audience does not draw the wrong conclusions. """ diff --git a/vizro-core/examples/_chart-gallery/pages/distribution.py b/vizro-core/examples/_chart-gallery/pages/distribution.py index 2379ede9a..28ee1e34c 100644 --- a/vizro-core/examples/_chart-gallery/pages/distribution.py +++ b/vizro-core/examples/_chart-gallery/pages/distribution.py @@ -21,7 +21,7 @@   - #### When to use it? + #### When should I use it? Use this chart to go beyond the simple box plot and show the distribution shape of the data, the inter-quartile range, the confidence intervals and the median. @@ -54,12 +54,12 @@   - #### When to use it? + #### When should I use it? Choose a box plot when you need to summarize distributions between many groups or datasets. It takes up less space than many other charts. - Create boxes to display the median, and the upper and lower quartiles. Add `whiskers` to highlight + Create boxes to display the median, and the upper and lower quartiles. Add whiskers to highlight variability outside the upper and lower quartiles. You can add outliers as dots beyond, but in line with the whiskers. """ diff --git a/vizro-core/examples/_chart-gallery/pages/examples/bar.py b/vizro-core/examples/_chart-gallery/pages/examples/bar.py index 551d5ce87..f0557ce6b 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/bar.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/bar.py @@ -7,16 +7,7 @@ page = vm.Page( title="Bar", - components=[ - vm.Graph( - figure=px.bar( - tips_agg, - x="total_bill", - y="day", - orientation="h", - ) - ) - ], + components=[vm.Graph(figure=px.bar(tips_agg, x="total_bill", y="day", orientation="h"))], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/boxplot.py b/vizro-core/examples/_chart-gallery/pages/examples/boxplot.py index 081cc79a2..ce9c79e83 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/boxplot.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/boxplot.py @@ -7,14 +7,7 @@ page = vm.Page( title="Boxplot", components=[ - vm.Graph( - figure=px.boxplot( - tips, - y="total_bill", - x="day", - color="day", - ) - ), + vm.Graph(figure=px.boxplot(tips, y="total_bill", x="day", color="day")), ], ) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/butterfly.py b/vizro-core/examples/_chart-gallery/pages/examples/butterfly.py index 0536020a5..69c66ed8d 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/butterfly.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/butterfly.py @@ -18,7 +18,7 @@ def butterfly(data_frame: pd.DataFrame, x1: str, x2: str, y: str): fig = go.Figure() fig.add_trace( go.Bar( - x=-data_frame[x1].values, + x=-data_frame[x1], y=data_frame[y], orientation="h", name=x1, diff --git a/vizro-core/examples/_chart-gallery/pages/examples/choropleth.py b/vizro-core/examples/_chart-gallery/pages/examples/choropleth.py index 1ca850af5..fff634bc5 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/choropleth.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/choropleth.py @@ -7,14 +7,7 @@ page = vm.Page( title="Choropleth", components=[ - vm.Graph( - figure=px.choropleth( - gapminder_2007, - locations="iso_alpha", - color="lifeExp", - hover_name="country", - ) - ) + vm.Graph(figure=px.choropleth(gapminder_2007, locations="iso_alpha", color="lifeExp", hover_name="country")) ], ) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/column.py b/vizro-core/examples/_chart-gallery/pages/examples/column.py index fb1e69e49..0096f36bd 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/column.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/column.py @@ -7,15 +7,7 @@ page = vm.Page( title="Column", - components=[ - vm.Graph( - figure=px.bar( - tips_agg, - y="total_bill", - x="day", - ) - ) - ], + components=[vm.Graph(figure=px.bar(tips_agg, y="total_bill", x="day"))], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/donut.py b/vizro-core/examples/_chart-gallery/pages/examples/donut.py index 87d955713..3005c2fdc 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/donut.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/donut.py @@ -6,16 +6,7 @@ page = vm.Page( title="Donut", - components=[ - vm.Graph( - figure=px.pie( - tips, - values="tip", - names="day", - hole=0.4, - ) - ) - ], + components=[vm.Graph(figure=px.pie(tips, values="tip", names="day", hole=0.4))], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py b/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py index 551d5ce87..f0557ce6b 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py @@ -7,16 +7,7 @@ page = vm.Page( title="Bar", - components=[ - vm.Graph( - figure=px.bar( - tips_agg, - x="total_bill", - y="day", - orientation="h", - ) - ) - ], + components=[vm.Graph(figure=px.bar(tips_agg, x="total_bill", y="day", orientation="h"))], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py b/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py index fb1e69e49..0096f36bd 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py @@ -7,15 +7,7 @@ page = vm.Page( title="Column", - components=[ - vm.Graph( - figure=px.bar( - tips_agg, - y="total_bill", - x="day", - ) - ) - ], + components=[vm.Graph(figure=px.bar(tips_agg, y="total_bill", x="day"))], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/scatter.py b/vizro-core/examples/_chart-gallery/pages/examples/scatter.py index df1bc9446..c82c95cc6 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/scatter.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/scatter.py @@ -6,16 +6,7 @@ page = vm.Page( title="Scatter", - components=[ - vm.Graph( - figure=px.scatter( - iris, - x="sepal_width", - y="sepal_length", - color="species", - ) - ) - ], + components=[vm.Graph(figure=px.scatter(iris, x="sepal_width", y="sepal_length", color="species"))], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/treemap.py b/vizro-core/examples/_chart-gallery/pages/examples/treemap.py index d6fd297ba..db1a36ece 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/treemap.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/treemap.py @@ -10,10 +10,7 @@ components=[ vm.Graph( figure=px.treemap( - gapminder_2007, - path=[px.Constant("world"), "continent", "country"], - values="pop", - color="lifeExp", + gapminder_2007, path=[px.Constant("world"), "continent", "country"], values="pop", color="lifeExp" ) ), ], diff --git a/vizro-core/examples/_chart-gallery/pages/examples/violin.py b/vizro-core/examples/_chart-gallery/pages/examples/violin.py index 567e7ba41..0d7e349c7 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/violin.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/violin.py @@ -7,14 +7,7 @@ page = vm.Page( title="Violin", components=[ - vm.Graph( - figure=px.violin( - tips, - y="total_bill", - x="day", - color="day", - ) - ), + vm.Graph(figure=px.violin(tips, y="total_bill", x="day", color="day")), ], ) diff --git a/vizro-core/examples/_chart-gallery/pages/flow.py b/vizro-core/examples/_chart-gallery/pages/flow.py index 8386ad457..70e205b96 100644 --- a/vizro-core/examples/_chart-gallery/pages/flow.py +++ b/vizro-core/examples/_chart-gallery/pages/flow.py @@ -20,7 +20,7 @@   - #### When to use it? + #### When should I use it? Use a Sankey chart when you want to visualize the flow of resources, energy, money, or other values from one point to another. It is particularly useful for showing distributions and transfers within a system, diff --git a/vizro-core/examples/_chart-gallery/pages/magnitude.py b/vizro-core/examples/_chart-gallery/pages/magnitude.py index f8f7ff951..c7d18e829 100644 --- a/vizro-core/examples/_chart-gallery/pages/magnitude.py +++ b/vizro-core/examples/_chart-gallery/pages/magnitude.py @@ -27,7 +27,7 @@   - #### When to use it? + #### When should I use it? Select a bar chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents **how many?** in each category. You can diff --git a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py index 43b9548ae..72ccd1a6b 100644 --- a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py +++ b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py @@ -21,13 +21,13 @@   - #### When to use it? + #### When should I use it? Use the pie chart when you need to show your audience a quick view of how data is distributed proportionately, with percentages highlighted. The different values you present must add up to a total and equal 100%. - The downsides are that pie charts tend to occupy more space than other charts, they don`t + The downsides are that pie charts tend to occupy more space than other charts, they don't work well with more than a few values because labeling small segments is challenging, and it can be difficult to accurately compare the sizes of the segments. """ @@ -58,7 +58,7 @@   - #### When to use it? + #### When should I use it? A donut chart can be used in place of a pie chart, particularly when you are short of space or have extra information you would like to share about the data. It may also be more effective if you wish your audience diff --git a/vizro-core/examples/_chart-gallery/pages/ranking.py b/vizro-core/examples/_chart-gallery/pages/ranking.py index 7ae023c6b..b421c6df1 100644 --- a/vizro-core/examples/_chart-gallery/pages/ranking.py +++ b/vizro-core/examples/_chart-gallery/pages/ranking.py @@ -21,7 +21,7 @@   - #### When to use it? + #### When should I use it? Select a bar chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents **how many?** in each category. You can @@ -59,7 +59,7 @@   - #### When to use it? + #### When should I use it? Select a column chart when you want to help your audience draw size comparisons and identify patterns between categorical data, i.e., data that presents **how many?** in each category. You can diff --git a/vizro-core/examples/_chart-gallery/pages/spatial.py b/vizro-core/examples/_chart-gallery/pages/spatial.py index e6c2e1b7c..a61933f88 100644 --- a/vizro-core/examples/_chart-gallery/pages/spatial.py +++ b/vizro-core/examples/_chart-gallery/pages/spatial.py @@ -19,7 +19,7 @@   - #### When to use it? + #### When should I use it? Use a chloropleth map when you wish to show how a measurement varies across a geographic area, or to show variability or patterns within a region. Typically, you will blend one color into another, take a color diff --git a/vizro-core/examples/_chart-gallery/pages/time.py b/vizro-core/examples/_chart-gallery/pages/time.py index 62fc2218e..526610c62 100644 --- a/vizro-core/examples/_chart-gallery/pages/time.py +++ b/vizro-core/examples/_chart-gallery/pages/time.py @@ -21,7 +21,7 @@   - #### When to use it? + #### When should I use it? You should select a line chart when you want to show trends over time. Usually, your y-axis will show a quantitative value and your x-axis will be marked as a timescale or a sequence of intervals. You can also From b28deae0fd7099335b051922d4987ff2c1c675d8 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Thu, 25 Jul 2024 21:46:56 +0100 Subject: [PATCH 097/109] Change opacity of incomplete pages to 0.3 --- vizro-core/examples/_chart-gallery/assets/css/custom.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index bc3d0d3d1..3aaaf183e 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -31,7 +31,7 @@ img[src*="#chart-icon"] { .flex-container .card { height: 208px; - opacity: 0.5; + opacity: 0.3; width: 176px; } From 7987dad903050feb7afbc9a42f54b875ebaa9552 Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Thu, 25 Jul 2024 21:59:28 +0100 Subject: [PATCH 098/109] Final TODOs --- vizro-core/examples/_chart-gallery/pages/ranking.py | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/vizro-core/examples/_chart-gallery/pages/ranking.py b/vizro-core/examples/_chart-gallery/pages/ranking.py index b421c6df1..8cc72e3fe 100644 --- a/vizro-core/examples/_chart-gallery/pages/ranking.py +++ b/vizro-core/examples/_chart-gallery/pages/ranking.py @@ -5,6 +5,8 @@ from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips_agg +# TODO: this is currently identical to bar. It should be: +# - slightly different text since it says "you can arrange your bars in any order" ordered_bar = vm.Page( title="Ordered bar", path="ranking/ordered-bar", @@ -43,7 +45,8 @@ ], ) - +# TODO: this is currently identical to column. It should be: +# - slightly different text since it says "you can arrange your bars in any order" ordered_column = vm.Page( title="Ordered column", path="ranking/ordered-column", From b8c676aebfcfcea5201481042e27e77badafdbac Mon Sep 17 00:00:00 2001 From: Antony Milne Date: Thu, 25 Jul 2024 23:04:53 +0100 Subject: [PATCH 099/109] Final final TODOs --- vizro-core/examples/_chart-gallery/app.py | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/vizro-core/examples/_chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py index 956ce935f..2b0c9ef74 100644 --- a/vizro-core/examples/_chart-gallery/app.py +++ b/vizro-core/examples/_chart-gallery/app.py @@ -90,7 +90,8 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink: ], ) - +# TODO: consider whether each chart group should have its own individual homepage, e.g. at http://localhost:8050/deviation/. +# This could just repeat the content of the tab from the homepage and would work nicely with the hierarchical navigation. dashboard = vm.Dashboard( # ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly. pages=[homepage, *ALL_CHART_GROUP.pages], From 592f09d9682667d0d44028bfab5f723a392c9ca7 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 29 Jul 2024 12:35:40 +0200 Subject: [PATCH 100/109] PR comments Part 1 - Add dashboard title - Add reference to original data viz book - Remove header from CodeClipboard - Improve navigation icons - Move navigation coloring to custom CSS --- vizro-core/examples/_chart-gallery/app.py | 1 + .../_chart-gallery/assets/css/custom.css | 6 ++++++ .../examples/_chart-gallery/assets/logo.svg | 3 +++ .../examples/_chart-gallery/chart_groups.py | 16 +++++++++++----- .../examples/_chart-gallery/custom_components.py | 2 -- .../_chart-gallery/pages/examples/__init__.py | 1 + .../vizro/static/css/bootstrap_overwrites.css | 6 ------ 7 files changed, 22 insertions(+), 13 deletions(-) create mode 100644 vizro-core/examples/_chart-gallery/assets/logo.svg diff --git a/vizro-core/examples/_chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py index 2b0c9ef74..109f4bd55 100644 --- a/vizro-core/examples/_chart-gallery/app.py +++ b/vizro-core/examples/_chart-gallery/app.py @@ -94,6 +94,7 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink: # This could just repeat the content of the tab from the homepage and would work nicely with the hierarchical navigation. dashboard = vm.Dashboard( # ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly. + title="Vizro - Chart Gallery", pages=[homepage, *ALL_CHART_GROUP.pages], navigation=vm.Navigation( nav_selector=vm.NavBar( diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index 3aaaf183e..80f5d0e26 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -61,3 +61,9 @@ img[src*="#chart-icon"] { .flex-container .card-nav { opacity: 1; } + +.navbar .nav-link.active { + border-right: 1px solid var(--border-enabled); + color: var(--text-primary); + width: 64px; +} diff --git a/vizro-core/examples/_chart-gallery/assets/logo.svg b/vizro-core/examples/_chart-gallery/assets/logo.svg new file mode 100644 index 000000000..0904b87de --- /dev/null +++ b/vizro-core/examples/_chart-gallery/assets/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/vizro-core/examples/_chart-gallery/chart_groups.py b/vizro-core/examples/_chart-gallery/chart_groups.py index 8d765ce6a..ee88ebde4 100644 --- a/vizro-core/examples/_chart-gallery/chart_groups.py +++ b/vizro-core/examples/_chart-gallery/chart_groups.py @@ -58,7 +58,7 @@ class ChartGroup: # IncompletePage("Diverging stacked bar"), IncompletePage(title="Surplus"), ], - icon="Planner Review", + icon="Contrast Square", intro_text=deviation_intro_text, ) @@ -205,7 +205,7 @@ class ChartGroup: IncompletePage("Chord"), IncompletePage("Network"), ], - icon="Stacked Line Chart", + icon="Air", intro_text=flow_intro_text, ) @@ -239,12 +239,18 @@ class ChartGroup: all_intro_text = """ This dashboard shows a gallery of charts. It includes guidance on when to use each chart type and sample Python code -to create them using [Plotly](https://plotly.com/python/) and [Vizro](https://vizro.mckinsey.com/). +to create them using [Plotly](https://plotly.com/python/) and [Vizro](https://github.com/mckinsey/vizro). Inspired by the -[FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md): -FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, +[FT Visual Vocabulary](https://github.com/Financial-Times/chart-doctor/blob/main/visual-vocabulary/README.md) +and [the Graphic Continuum](https://www.informationisbeautifulawards.com/showcase/611-the-graphic-continuum): + +- FT Graphic: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, Billy Ehrenberg, Paul McCallum, Martin Stabe. + +- The Graphic Continuum: Jon Swabish and Severino Ribecca + + """ diff --git a/vizro-core/examples/_chart-gallery/custom_components.py b/vizro-core/examples/_chart-gallery/custom_components.py index 342d52bf8..26ec8e0e4 100644 --- a/vizro-core/examples/_chart-gallery/custom_components.py +++ b/vizro-core/examples/_chart-gallery/custom_components.py @@ -16,7 +16,6 @@ class CodeClipboard(vm.VizroBaseModel): """Code snippet with a copy to clipboard button.""" type: Literal["code_clipboard"] = "code_clipboard" - title: str = "Code" code: str language: str = "" @@ -28,7 +27,6 @@ def build(self): dbc.AccordionItem( html.Div( [ - html.H3(self.title), dcc.Markdown(markdown_code, id=self.id), dcc.Clipboard(target_id=self.id, className="code-clipboard"), ], diff --git a/vizro-core/examples/_chart-gallery/pages/examples/__init__.py b/vizro-core/examples/_chart-gallery/pages/examples/__init__.py index e69de29bb..b1cac5fb9 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/__init__.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/__init__.py @@ -0,0 +1 @@ +"""Contains code examples inserted into `CodeClipboard`.""" diff --git a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css index 5a8cf6968..483ef670e 100644 --- a/vizro-core/src/vizro/static/css/bootstrap_overwrites.css +++ b/vizro-core/src/vizro/static/css/bootstrap_overwrites.css @@ -30,9 +30,3 @@ but do not want to take over to `vizro-bootstrap` as these settings might not be margin: 0; padding: 0; } - -.navbar .nav-link.active { - border-right: 1px solid var(--border-enabled); - color: var(--text-primary); - width: 64px; -} From 3831e03113c5f5c2f9de7294e12b1e659aae4514 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 29 Jul 2024 13:32:11 +0200 Subject: [PATCH 101/109] PR comments 2 - Remove treemap from magnitude category - Simplify sankey data - Optimise black formatting - Optimise layout - Comment out navigation icon highlighting - Add box to violing chart --- vizro-core/examples/_chart-gallery/README.md | 2 +- .../_chart-gallery/assets/css/custom.css | 2 + .../_chart-gallery/pages/_factories.py | 42 +------------------ .../_chart-gallery/pages/_pages_utils.py | 11 ++--- .../_chart-gallery/pages/distribution.py | 1 + .../_chart-gallery/pages/examples/sankey.py | 8 ++-- .../_chart-gallery/pages/examples/violin.py | 2 +- .../examples/_chart-gallery/pages/flow.py | 2 +- .../_chart-gallery/pages/magnitude.py | 5 +-- .../_chart-gallery/pages/part_to_whole.py | 39 +++++++++++++++-- 10 files changed, 55 insertions(+), 59 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index 5f7a0d6ff..cd15c279e 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/vizro-core/examples/_chart-gallery/README.md @@ -58,7 +58,7 @@ The dashboard is still in development. Below is an overview of the chart types f | Stacked Column | ❌ | Part-to-whole | | Stepped Line | ❌ | Ranking | | Surplus-Deficit-Line | ❌ | Deviation | -| Treemap | ✅ | Magnitude, Part-to-whole | +| Treemap | ✅ | Part-to-whole | | Venn | ❌ | Part-to-whole | | Violin | ✅ | Distribution | | Waterfall | ❌ | Part-to-whole, Flow | diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index 80f5d0e26..f14c1a4be 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -62,8 +62,10 @@ img[src*="#chart-icon"] { opacity: 1; } +/* .navbar .nav-link.active { border-right: 1px solid var(--border-enabled); color: var(--text-primary); width: 64px; } +*/ diff --git a/vizro-core/examples/_chart-gallery/pages/_factories.py b/vizro-core/examples/_chart-gallery/pages/_factories.py index 5a4bffdd8..a2d288c2d 100644 --- a/vizro-core/examples/_chart-gallery/pages/_factories.py +++ b/vizro-core/examples/_chart-gallery/pages/_factories.py @@ -8,7 +8,7 @@ import vizro.plotly.express as px from custom_charts import butterfly -from pages._pages_utils import PAGE_GRID, ages, gapminder_2007, make_code_clipboard_from_py_file, tips_agg +from pages._pages_utils import PAGE_GRID, ages, make_code_clipboard_from_py_file, tips_agg # TODO: this is currently identical to ordered column. It should be: @@ -54,46 +54,6 @@ def column_factory(group: str): ) -def treemap_factory(group: str): - """Reusable function to create the page content for the treemap chart with a unique ID.""" - return vm.Page( - id=f"{group}-treemap", - path=f"{group}/treemap", - title="Treemap", - layout=vm.Layout(grid=PAGE_GRID), - components=[ - vm.Card( - text=""" - - #### What is a treemap? - - A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles are sized - proportionately to the quantity they represent, combined together to form larger parent category - rectangles. - -   - - #### When should I use it? - - It's helpful to use a treemap when you wish to display hierarchical part-to-whole relationships. You can - compare groups and single elements nested within them. Consider using them instead of Pie charts when - you have a higher number of categories. Treemaps are very compact and allow audiences to get a quick - overview of the data. - """ - ), - vm.Graph( - figure=px.treemap( - gapminder_2007, - path=[px.Constant("world"), "continent", "country"], - values="pop", - color="lifeExp", - ) - ), - make_code_clipboard_from_py_file("treemap.py"), - ], - ) - - def butterfly_factory(group: str): """Reusable function to create the page content for the butterfly chart with a unique ID.""" return vm.Page( diff --git a/vizro-core/examples/_chart-gallery/pages/_pages_utils.py b/vizro-core/examples/_chart-gallery/pages/_pages_utils.py index 507648d81..c8f1257b1 100644 --- a/vizro-core/examples/_chart-gallery/pages/_pages_utils.py +++ b/vizro-core/examples/_chart-gallery/pages/_pages_utils.py @@ -13,11 +13,12 @@ def make_code_clipboard_from_py_file(filepath: str): # https://black.readthedocs.io/en/stable/faq.html#does-black-have-an-api filepath = Path(__file__).parents[1] / "pages/examples" / filepath return CodeClipboard( - code=black.format_str(filepath.read_text(encoding="utf-8"), mode=black.Mode()), language="python" + code=black.format_str(filepath.read_text(encoding="utf-8"), mode=black.Mode(line_length=80)), + language="python", ) -PAGE_GRID = [[0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 2, 2]] * 5 +PAGE_GRID = [[0, 0, 0, 0, 0, 0, 0]] * 2 + [[1, 1, 1, 1, 2, 2, 2]] * 5 # DATA -------------------------------------------------------------- gapminder = px.data.gapminder() @@ -35,8 +36,8 @@ def make_code_clipboard_from_py_file(filepath: str): ) sankey_data = pd.DataFrame( { - "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels - "Destination": [1, 2, 3, 4, 5, 5, 6], # indices inside labels - "Value": [10, 4, 8, 6, 4, 8, 8], + "Origin": [0, 1, 0, 2, 3, 3], + "Destination": [2, 3, 3, 4, 4, 5], + "Value": [8, 4, 2, 8, 4, 2], } ) diff --git a/vizro-core/examples/_chart-gallery/pages/distribution.py b/vizro-core/examples/_chart-gallery/pages/distribution.py index 28ee1e34c..df57c2502 100644 --- a/vizro-core/examples/_chart-gallery/pages/distribution.py +++ b/vizro-core/examples/_chart-gallery/pages/distribution.py @@ -33,6 +33,7 @@ y="total_bill", x="day", color="day", + box=True, ) ), make_code_clipboard_from_py_file("violin.py"), diff --git a/vizro-core/examples/_chart-gallery/pages/examples/sankey.py b/vizro-core/examples/_chart-gallery/pages/examples/sankey.py index eff1bde05..21789018a 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/sankey.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/sankey.py @@ -8,9 +8,9 @@ sankey_data = pd.DataFrame( { - "Origin": [0, 1, 2, 1, 2, 4, 0], # indices inside labels - "Destination": [1, 2, 3, 4, 5, 5, 6], # indices inside labels - "Value": [10, 4, 8, 6, 4, 8, 8], + "Origin": [0, 1, 0, 2, 3, 3], # indices inside labels + "Destination": [2, 3, 3, 4, 4, 5], # indices inside labels + "Value": [8, 4, 2, 8, 4, 2], } ) @@ -51,7 +51,7 @@ def sankey( vm.Graph( figure=sankey( sankey_data, - labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], + labels=["A1", "A2", "B1", "B2", "C1", "C2"], source="Origin", target="Destination", value="Value", diff --git a/vizro-core/examples/_chart-gallery/pages/examples/violin.py b/vizro-core/examples/_chart-gallery/pages/examples/violin.py index 0d7e349c7..f3edcffe5 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/violin.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/violin.py @@ -7,7 +7,7 @@ page = vm.Page( title="Violin", components=[ - vm.Graph(figure=px.violin(tips, y="total_bill", x="day", color="day")), + vm.Graph(figure=px.violin(tips, y="total_bill", x="day", color="day", box=True)), ], ) diff --git a/vizro-core/examples/_chart-gallery/pages/flow.py b/vizro-core/examples/_chart-gallery/pages/flow.py index 70e205b96..4ceaed6e1 100644 --- a/vizro-core/examples/_chart-gallery/pages/flow.py +++ b/vizro-core/examples/_chart-gallery/pages/flow.py @@ -34,7 +34,7 @@ vm.Graph( figure=sankey( sankey_data, - labels=["A1", "A2", "B1", "B2", "C1", "C2", "D1"], + labels=["A1", "A2", "B1", "B2", "C1", "C2"], source="Origin", target="Destination", value="Value", diff --git a/vizro-core/examples/_chart-gallery/pages/magnitude.py b/vizro-core/examples/_chart-gallery/pages/magnitude.py index c7d18e829..4f982b449 100644 --- a/vizro-core/examples/_chart-gallery/pages/magnitude.py +++ b/vizro-core/examples/_chart-gallery/pages/magnitude.py @@ -3,7 +3,7 @@ import vizro.models as vm import vizro.plotly.express as px -from pages._factories import column_factory, treemap_factory +from pages._factories import column_factory from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips_agg # TODO: this is currently identical to ordered bar. It should be: @@ -50,6 +50,5 @@ column = column_factory("magnitude") -treemap = treemap_factory("magnitude") -pages = [bar, column, treemap] +pages = [bar, column] diff --git a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py index 72ccd1a6b..7b341828e 100644 --- a/vizro-core/examples/_chart-gallery/pages/part_to_whole.py +++ b/vizro-core/examples/_chart-gallery/pages/part_to_whole.py @@ -3,8 +3,7 @@ import vizro.models as vm import vizro.plotly.express as px -from pages._factories import treemap_factory -from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips +from pages._pages_utils import PAGE_GRID, gapminder_2007, make_code_clipboard_from_py_file, tips pie = vm.Page( title="Pie", @@ -77,6 +76,40 @@ ], ) -treemap = treemap_factory("part-to-whole") +treemap = vm.Page( + title="Treemap", + path="part-to-whole/treemap", + layout=vm.Layout(grid=PAGE_GRID), + components=[ + vm.Card( + text=""" + + #### What is a treemap? + + A treemap shows hierarchical data arranged as a set of nested rectangles: rectangles are sized + proportionately to the quantity they represent, combined together to form larger parent category + rectangles. + +   + + #### When should I use it? + + It's helpful to use a treemap when you wish to display hierarchical part-to-whole relationships. You can + compare groups and single elements nested within them. Consider using them instead of Pie charts when + you have a higher number of categories. Treemaps are very compact and allow audiences to get a quick + overview of the data. + """ + ), + vm.Graph( + figure=px.treemap( + gapminder_2007, + path=[px.Constant("world"), "continent", "country"], + values="pop", + color="lifeExp", + ) + ), + make_code_clipboard_from_py_file("treemap.py"), + ], +) pages = [donut, pie, treemap] From 301c4966eaf49e522bb8e988c437e507be212169 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 29 Jul 2024 14:04:34 +0200 Subject: [PATCH 102/109] Add missing svgs --- .../_chart-gallery/assets/css/custom.css | 24 ++++++++++++------- .../assets/images/charts/area.svg | 1 + .../assets/images/charts/bar.svg | 21 +--------------- .../assets/images/charts/beeswarm.svg | 1 + .../assets/images/charts/bump.svg | 1 + .../assets/images/charts/column.svg | 21 +--------------- .../images/charts/connected-scatter.svg | 1 + .../images/charts/diverging-stacked-bar.svg | 1 + .../assets/images/charts/gridplot.svg | 1 + .../assets/images/charts/paired-bar.svg | 1 + .../assets/images/charts/paired-column.svg | 1 + ...el-coords.svg => parallel-coordinates.svg} | 0 .../examples/_chart-gallery/chart_groups.py | 23 +++++++++--------- 13 files changed, 36 insertions(+), 61 deletions(-) create mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/area.svg create mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/beeswarm.svg create mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/bump.svg create mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/connected-scatter.svg create mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/diverging-stacked-bar.svg create mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/gridplot.svg create mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/paired-bar.svg create mode 100644 vizro-core/examples/_chart-gallery/assets/images/charts/paired-column.svg rename vizro-core/examples/_chart-gallery/assets/images/charts/{parallel-coords.svg => parallel-coordinates.svg} (100%) diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index f14c1a4be..aef71de5e 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -29,18 +29,13 @@ img[src*="#chart-icon"] { border-color: var(--surfaces-bg-card); } -.flex-container .card { - height: 208px; - opacity: 0.3; - width: 176px; -} - .flex-container { display: flex; flex-wrap: wrap; gap: 20px; } + .flex-container h4 { color: var(--text-secondary); margin: 0; @@ -48,6 +43,20 @@ img[src*="#chart-icon"] { text-align: center; } +.flex-container .card { + height: 228px; + opacity: 0.3; + width: 176px; +} + +.flex-container .card-nav { + opacity: 1; +} + +.flex-container .card img { + width: 100%; +} + .intro-text { border-left: 4px solid var(--text-secondary); padding: 12px; @@ -58,9 +67,6 @@ img[src*="#chart-icon"] { line-height: 20px; } -.flex-container .card-nav { - opacity: 1; -} /* .navbar .nav-link.active { diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/area.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/area.svg new file mode 100644 index 000000000..f51c7d036 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/area.svg @@ -0,0 +1 @@ + diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/bar.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/bar.svg index 342907fe4..b2491fb52 100644 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/bar.svg +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/bar.svg @@ -1,20 +1 @@ - - - - Group 6 Copy 10 - Created with Sketch. - - - - - - - - - - - - - - - + diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/beeswarm.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/beeswarm.svg new file mode 100644 index 000000000..e7e8c7d45 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/beeswarm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/bump.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/bump.svg new file mode 100644 index 000000000..37f3df985 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/bump.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/column.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/column.svg index fca0509d6..ae4a75e22 100644 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/column.svg +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/column.svg @@ -1,20 +1 @@ - - - - Group 6 Copy 11 - Created with Sketch. - - - - - - - - - - - - - - - + diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/connected-scatter.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/connected-scatter.svg new file mode 100644 index 000000000..b3e46261a --- /dev/null +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/connected-scatter.svg @@ -0,0 +1 @@ + diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/diverging-stacked-bar.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/diverging-stacked-bar.svg new file mode 100644 index 000000000..c0e8fcda1 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/diverging-stacked-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/gridplot.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/gridplot.svg new file mode 100644 index 000000000..0859d1b81 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/gridplot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/paired-bar.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/paired-bar.svg new file mode 100644 index 000000000..4ec80dde6 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/paired-bar.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/paired-column.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/paired-column.svg new file mode 100644 index 000000000..3c40c7324 --- /dev/null +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/paired-column.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coords.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coordinates.svg similarity index 100% rename from vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coords.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/parallel-coordinates.svg diff --git a/vizro-core/examples/_chart-gallery/chart_groups.py b/vizro-core/examples/_chart-gallery/chart_groups.py index ee88ebde4..ec9dee72c 100644 --- a/vizro-core/examples/_chart-gallery/chart_groups.py +++ b/vizro-core/examples/_chart-gallery/chart_groups.py @@ -36,15 +36,12 @@ class ChartGroup: """Represents a group of charts like "Deviation".""" name: str - pages: List[vm.Page] # This is just the completed pages. + pages: List[vm.Page] incomplete_pages: List[IncompletePage] intro_text: str icon: str = "" # ALL_CHART_GROUP is the only one that doesn't require an icon. -# TODO: Charts that are commented out in incomplete_pages below do not have an svg made yet. -# Uncomment them once they are ready. - deviation_intro_text = """ Deviation enables you to draw attention to variations (+/-) from a fixed reference point. Often this reference point is zero, but you might also show a target or a long term average. @@ -55,7 +52,7 @@ class ChartGroup: pages=pages.deviation.pages, incomplete_pages=[ IncompletePage(title="Diverging bar"), - # IncompletePage("Diverging stacked bar"), + IncompletePage("Diverging stacked bar"), IncompletePage(title="Surplus"), ], icon="Contrast Square", @@ -74,7 +71,7 @@ class ChartGroup: incomplete_pages=[ IncompletePage("Scatter matrix"), IncompletePage("Column line"), - # IncompletePage("Connected scatter"), + IncompletePage("Connected scatter"), IncompletePage("Heatmap matrix"), IncompletePage("Bubble"), ], @@ -96,6 +93,7 @@ class ChartGroup: IncompletePage("Slope"), IncompletePage("Lollipop"), IncompletePage("Stepped line"), + IncompletePage("Bump"), ], icon="Stacked Bar Chart", intro_text=ranking_intro_text, @@ -117,7 +115,7 @@ class ChartGroup: IncompletePage("Dot plot"), IncompletePage("Barcode"), IncompletePage("Cumulative curve"), - # IncompletePage("Beeswarm"), + IncompletePage("Beeswarm"), ], icon="Waterfall Chart", intro_text=distribution_intro_text, @@ -133,13 +131,13 @@ class ChartGroup: name="Magnitude", pages=pages.magnitude.pages, incomplete_pages=[ - # IncompletePage("Paired column", - # IncompletePage("Paired bar", + IncompletePage("Paired column"), + IncompletePage("Paired bar"), IncompletePage("Marimekko"), IncompletePage("Bubble"), IncompletePage("Lollipop"), IncompletePage("Radar"), - IncompletePage("Parallel coords"), + IncompletePage("Parallel coordinates"), IncompletePage("Pictogram"), IncompletePage("Bullet"), IncompletePage("Radial"), @@ -161,8 +159,8 @@ class ChartGroup: IncompletePage("Column line"), IncompletePage("Slope"), IncompletePage("Fan"), - # IncompletePage("Area"), - # IncompletePage("Connected scatter"), + IncompletePage("Area"), + IncompletePage("Connected scatter"), IncompletePage("Heatmap"), IncompletePage("Bubble timeline"), IncompletePage("Sparkline"), @@ -185,6 +183,7 @@ class ChartGroup: IncompletePage("Marimekko"), IncompletePage("Funnel"), IncompletePage("Arc"), + IncompletePage("Gridplot"), IncompletePage("Venn"), IncompletePage("Waterfall"), ], From d26681bd0e4dffecbdbe1cb5a90357435aab4c28 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 29 Jul 2024 14:13:45 +0200 Subject: [PATCH 103/109] Fix svgs and table --- vizro-core/examples/_chart-gallery/README.md | 112 ++++++++++-------- ...us.svg => surplus-deficit-filled-line.svg} | 0 .../examples/_chart-gallery/chart_groups.py | 2 +- 3 files changed, 61 insertions(+), 53 deletions(-) rename vizro-core/examples/_chart-gallery/assets/images/charts/{surplus.svg => surplus-deficit-filled-line.svg} (100%) diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index cd15c279e..7138a19be 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/vizro-core/examples/_chart-gallery/README.md @@ -10,58 +10,66 @@ FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, B The dashboard is still in development. Below is an overview of the chart types for which a completed page is available. -| Chart Type | Status | Category | -| -------------------- | ------ | ------------------------ | -| Arc | ❌ | Part-to-whole | -| Area | ❌ | Time | -| Barcode | ❌ | Distribution | -| Bar | ✅ | Magnitude | -| Boxplot | ✅ | Distribution | -| Bubble | ❌ | Correlation, Magnitude | -| Bubble Map | ❌ | Spatial | -| Bubble Timeline | ❌ | Time | -| Bullet | ❌ | Magnitude | -| Butterfly | ✅ | Deviation, Distribution | -| Chord | ❌ | Flow | -| Choropleth | ✅ | Spatial | -| Column | ✅ | Magnitude, Time | -| Column-Line | ❌ | Correlation, Time | -| Cumulative Curve | ❌ | Distribution | -| Diverging Bar | ❌ | Deviation | -| Dot Map | ❌ | Spatial | -| Dot Plot | ❌ | Distribution | -| Donut | ✅ | Part-to-whole | -| Fan | ❌ | Time | -| Flow Map | ❌ | Spatial | -| Funnel | ❌ | Part-to-whole | -| Gantt | ❌ | Time | -| Heatmap | ❌ | Time | -| Heatmap-Matrix | ❌ | Correlation | -| Histogram | ❌ | Distribution | -| Line | ✅ | Time | -| Lollipop | ❌ | Ranking, Magnitude | -| Marimekko | ❌ | Magnitude, Part-to-whole | -| Ordered Bar | ✅ | Ranking | -| Ordered Bubble | ❌ | Ranking | -| Ordered Column | ✅ | Ranking | -| Parallel Coordinates | ❌ | Magnitude | -| Pictogram | ❌ | Magnitude | -| Pie | ✅ | Part-to-whole | -| Radar | ❌ | Magnitude | -| Radial | ❌ | Magnitude | -| Sankey | ✅ | Flow | -| Scatter | ✅ | Correlation | -| Scatter Matrix | ❌ | Correlation | -| Slope | ❌ | Ranking, Time | -| Sparkline | ❌ | Time | -| Stacked Bar | ❌ | Part-to-whole | -| Stacked Column | ❌ | Part-to-whole | -| Stepped Line | ❌ | Ranking | -| Surplus-Deficit-Line | ❌ | Deviation | -| Treemap | ✅ | Part-to-whole | -| Venn | ❌ | Part-to-whole | -| Violin | ✅ | Distribution | -| Waterfall | ❌ | Part-to-whole, Flow | +| Chart Type | Status | Category | +|-----------------------| ------ |--------------------------| +| Arc | ❌ | Part-to-whole | +| Area | ❌ | Time | +| Bar | ✅ | Magnitude | +| Barcode | ❌ | Distribution | +| Beeswarm | ❌ | Distribution | +| Boxplot | ✅ | Distribution | +| Bubble | ❌ | Correlation, Magnitude | +| Bubble Map | ❌ | Spatial | +| Bubble Timeline | ❌ | Time | +| Bullet | ❌ | Magnitude | +| Bump | ❌ | Ranking | +| Butterfly | ✅ | Deviation, Distribution | +| Chord | ❌ | Flow | +| Choropleth | ✅ | Spatial | +| Column | ✅ | Magnitude, Time | +| Column-Line | ❌ | Correlation, Time | +| Connected Scatter | ❌ | Correlation, Time | +| Cumulative Curve | ❌ | Distribution | +| Diverging Bar | ❌ | Deviation | +| Diverging Stacked Bar | ❌ | Deviation | +| Donut | ✅ | Part-to-whole | +| Dot Map | ❌ | Spatial | +| Dot Plot | ❌ | Distribution | +| Fan | ❌ | Time | +| Flow Map | ❌ | Spatial | +| Funnel | ❌ | Part-to-whole | +| Gantt | ❌ | Time | +| Gridplot | ❌ | Part-to-whole | +| Heatmap | ❌ | Time | +| Heatmap-Matrix | ❌ | Correlation | +| Histogram | ❌ | Distribution | +| Line | ✅ | Time | +| Lollipop | ❌ | Ranking, Magnitude | +| Marimekko | ❌ | Magnitude, Part-to-whole | +| Network | ❌ | Flow | +| Ordered Bar | ✅ | Ranking | +| Ordered Bubble | ❌ | Ranking | +| Ordered Column | ✅ | Ranking | +| Paired Bar | ❌ | Magnitude | +| Paired Column | ❌ | Magnitude | +| Parallel Coordinates | ❌ | Magnitude | +| Pictogram | ❌ | Magnitude | +| Pie | ✅ | Part-to-whole | +| Radar | ❌ | Magnitude | +| Radial | ❌ | Magnitude | +| Sankey | ✅ | Flow | +| Scatter | ✅ | Correlation | +| Scatter Matrix | ❌ | Correlation | +| Slope | ❌ | Ranking, Time | +| Sparkline | ❌ | Time | +| Stacked Bar | ❌ | Part-to-whole | +| Stacked Column | ❌ | Part-to-whole | +| Stepped Line | ❌ | Ranking | +| Surplus-Deficit-Line | ❌ | Deviation | +| Treemap | ✅ | Part-to-whole | +| Venn | ❌ | Part-to-whole | +| Violin | ✅ | Distribution | +| Waterfall | ❌ | Part-to-whole, Flow | To contribute a chart, follow the steps below: diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/surplus.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/surplus-deficit-filled-line.svg similarity index 100% rename from vizro-core/examples/_chart-gallery/assets/images/charts/surplus.svg rename to vizro-core/examples/_chart-gallery/assets/images/charts/surplus-deficit-filled-line.svg diff --git a/vizro-core/examples/_chart-gallery/chart_groups.py b/vizro-core/examples/_chart-gallery/chart_groups.py index ec9dee72c..972aaf5d1 100644 --- a/vizro-core/examples/_chart-gallery/chart_groups.py +++ b/vizro-core/examples/_chart-gallery/chart_groups.py @@ -53,7 +53,7 @@ class ChartGroup: incomplete_pages=[ IncompletePage(title="Diverging bar"), IncompletePage("Diverging stacked bar"), - IncompletePage(title="Surplus"), + IncompletePage(title="Surplus deficit filled line"), ], icon="Contrast Square", intro_text=deviation_intro_text, From 8fb4bfd7314363ee2182d68048d67f0e758c277a Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 29 Jul 2024 14:47:24 +0200 Subject: [PATCH 104/109] Create different examples for bar / column --- vizro-core/examples/_chart-gallery/README.md | 2 +- vizro-core/examples/_chart-gallery/app.py | 5 ++- .../_chart-gallery/assets/css/custom.css | 2 - .../assets/images/charts/beeswarm.svg | 2 +- .../assets/images/charts/bump.svg | 2 +- .../images/charts/diverging-stacked-bar.svg | 2 +- .../assets/images/charts/gridplot.svg | 2 +- .../assets/images/charts/paired-bar.svg | 2 +- .../assets/images/charts/paired-column.svg | 2 +- .../_chart-gallery/pages/_factories.py | 18 +++----- .../_chart-gallery/pages/_pages_utils.py | 3 +- .../_chart-gallery/pages/examples/bar.py | 2 +- .../_chart-gallery/pages/examples/column.py | 2 +- .../pages/examples/ordered_bar.py | 4 +- .../pages/examples/ordered_column.py | 4 +- .../_chart-gallery/pages/magnitude.py | 19 +++----- .../examples/_chart-gallery/pages/ranking.py | 43 ++++++++----------- 17 files changed, 48 insertions(+), 68 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/README.md b/vizro-core/examples/_chart-gallery/README.md index 7138a19be..74443d69a 100644 --- a/vizro-core/examples/_chart-gallery/README.md +++ b/vizro-core/examples/_chart-gallery/README.md @@ -11,7 +11,7 @@ FT Graphics: Alan Smith, Chris Campbell, Ian Bott, Liz Faunce, Graham Parrish, B The dashboard is still in development. Below is an overview of the chart types for which a completed page is available. | Chart Type | Status | Category | -|-----------------------| ------ |--------------------------| +| --------------------- | ------ | ------------------------ | | Arc | ❌ | Part-to-whole | | Area | ❌ | Time | | Bar | ✅ | Magnitude | diff --git a/vizro-core/examples/_chart-gallery/app.py b/vizro-core/examples/_chart-gallery/app.py index 109f4bd55..fcbd48ac8 100644 --- a/vizro-core/examples/_chart-gallery/app.py +++ b/vizro-core/examples/_chart-gallery/app.py @@ -90,8 +90,9 @@ def make_navlink(chart_group: ChartGroup) -> vm.NavLink: ], ) -# TODO: consider whether each chart group should have its own individual homepage, e.g. at http://localhost:8050/deviation/. -# This could just repeat the content of the tab from the homepage and would work nicely with the hierarchical navigation. +# TODO: consider whether each chart group should have its own individual homepage, +# e.g. at http://localhost:8050/deviation/. This could just repeat the content of the tab from the homepage and would +# work nicely with the hierarchical navigation. dashboard = vm.Dashboard( # ALL_CHART_GROUP.pages has duplicated pages, e.g. both distribution-butterfly and deviation-butterfly. title="Vizro - Chart Gallery", diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index aef71de5e..425128f37 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -35,7 +35,6 @@ img[src*="#chart-icon"] { gap: 20px; } - .flex-container h4 { color: var(--text-secondary); margin: 0; @@ -67,7 +66,6 @@ img[src*="#chart-icon"] { line-height: 20px; } - /* .navbar .nav-link.active { border-right: 1px solid var(--border-enabled); diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/beeswarm.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/beeswarm.svg index e7e8c7d45..7d29af852 100644 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/beeswarm.svg +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/beeswarm.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/bump.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/bump.svg index 37f3df985..509f6cb0a 100644 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/bump.svg +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/bump.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/diverging-stacked-bar.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/diverging-stacked-bar.svg index c0e8fcda1..42cbdadc7 100644 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/diverging-stacked-bar.svg +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/diverging-stacked-bar.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/gridplot.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/gridplot.svg index 0859d1b81..276deb3a1 100644 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/gridplot.svg +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/gridplot.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/paired-bar.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/paired-bar.svg index 4ec80dde6..2f75406e7 100644 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/paired-bar.svg +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/paired-bar.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/vizro-core/examples/_chart-gallery/assets/images/charts/paired-column.svg b/vizro-core/examples/_chart-gallery/assets/images/charts/paired-column.svg index 3c40c7324..925d74f7e 100644 --- a/vizro-core/examples/_chart-gallery/assets/images/charts/paired-column.svg +++ b/vizro-core/examples/_chart-gallery/assets/images/charts/paired-column.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/vizro-core/examples/_chart-gallery/pages/_factories.py b/vizro-core/examples/_chart-gallery/pages/_factories.py index a2d288c2d..592d20f1c 100644 --- a/vizro-core/examples/_chart-gallery/pages/_factories.py +++ b/vizro-core/examples/_chart-gallery/pages/_factories.py @@ -11,11 +11,6 @@ from pages._pages_utils import PAGE_GRID, ages, make_code_clipboard_from_py_file, tips_agg -# TODO: this is currently identical to ordered column. It should be: -# - unordered (currently ordering is done in tips_agg) -# - different svg -# - slightly different text -# - slightly different example def column_factory(group: str): """Reusable function to create the page content for the column chart with a unique ID.""" return vm.Page( @@ -28,18 +23,17 @@ def column_factory(group: str): text=""" #### What is a column chart? - A column chart is a vertical bar chart, with column lengths varying according to the - categorical value they represent. The scale is presented on the y-axis, starting with zero. + A column chart is a vertical bar chart with column lengths varying by the categorical value they + represent, using a y-axis scale starting from zero.   #### When should I use it? - Select a column chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your columns in any order to fit the message you wish to emphasize. Be mindful of - labeling clearly when you have a large number of columns. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. + Use a column chart to help your audience compare sizes and identify patterns in categorical data, + such as **how many?** in each category. Arrange the columns in any order to fit the message you want + to emphasize. Ensure clear labeling, especially with many columns, and consider using a legend or + abbreviations with fuller descriptions below. """ ), vm.Graph( diff --git a/vizro-core/examples/_chart-gallery/pages/_pages_utils.py b/vizro-core/examples/_chart-gallery/pages/_pages_utils.py index c8f1257b1..f3b776c73 100644 --- a/vizro-core/examples/_chart-gallery/pages/_pages_utils.py +++ b/vizro-core/examples/_chart-gallery/pages/_pages_utils.py @@ -26,7 +26,8 @@ def make_code_clipboard_from_py_file(filepath: str): iris = px.data.iris() stocks = px.data.stocks() tips = px.data.tips() -tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() +tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).reset_index() +tips_sorted = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() ages = pd.DataFrame( { "Age": ["0-19", "20-29", "30-39", "40-49", "50-59", ">=60"], diff --git a/vizro-core/examples/_chart-gallery/pages/examples/bar.py b/vizro-core/examples/_chart-gallery/pages/examples/bar.py index f0557ce6b..21f0ad9d9 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/bar.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/bar.py @@ -3,7 +3,7 @@ from vizro import Vizro tips = px.data.tips() -tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() +tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).reset_index() page = vm.Page( title="Bar", diff --git a/vizro-core/examples/_chart-gallery/pages/examples/column.py b/vizro-core/examples/_chart-gallery/pages/examples/column.py index 0096f36bd..f2634c822 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/column.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/column.py @@ -3,7 +3,7 @@ from vizro import Vizro tips = px.data.tips() -tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() +tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).reset_index() page = vm.Page( title="Column", diff --git a/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py b/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py index f0557ce6b..04596d4a5 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/ordered_bar.py @@ -3,11 +3,11 @@ from vizro import Vizro tips = px.data.tips() -tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() +tips_sorted = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() page = vm.Page( title="Bar", - components=[vm.Graph(figure=px.bar(tips_agg, x="total_bill", y="day", orientation="h"))], + components=[vm.Graph(figure=px.bar(tips_sorted, x="total_bill", y="day", orientation="h"))], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py b/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py index 0096f36bd..435776bfa 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/ordered_column.py @@ -3,11 +3,11 @@ from vizro import Vizro tips = px.data.tips() -tips_agg = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() +tips_sorted = tips.groupby("day").agg({"total_bill": "sum"}).sort_values("total_bill").reset_index() page = vm.Page( title="Column", - components=[vm.Graph(figure=px.bar(tips_agg, y="total_bill", x="day"))], + components=[vm.Graph(figure=px.bar(tips_sorted, y="total_bill", x="day"))], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/examples/_chart-gallery/pages/magnitude.py b/vizro-core/examples/_chart-gallery/pages/magnitude.py index 4f982b449..e3d28e16b 100644 --- a/vizro-core/examples/_chart-gallery/pages/magnitude.py +++ b/vizro-core/examples/_chart-gallery/pages/magnitude.py @@ -6,11 +6,6 @@ from pages._factories import column_factory from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips_agg -# TODO: this is currently identical to ordered bar. It should be: -# - unordered (currently ordering is done in tips_agg) -# - different svg -# - slightly different text -# - slightly different example bar = vm.Page( title="Bar", path="magnitude/bar", @@ -21,19 +16,17 @@ #### What is a bar chart? - A bar chart displays bars in lengths proportional to the values they represent. One axis of - the chart shows the categories to compare and the other axis provides a value scale, - starting with zero. + A bar chart displays bars with lengths proportional to the values they represent. One axis shows the + categories to compare, and the other provides a value scale starting from zero.   #### When should I use it? - Select a bar chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your bars in any order to fit the message you wish to emphasize. Be mindful of labeling - clearly when you have a large number of bars. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. + Use a bar chart to help your audience compare sizes and identify patterns in categorical data, such as + **how many?** in each category. Arrange the bars in any order to fit the message you want to emphasize. + Ensure clear labeling, especially with many bars, and consider using a legend or abbreviations with fuller + descriptions below. """ ), vm.Graph( diff --git a/vizro-core/examples/_chart-gallery/pages/ranking.py b/vizro-core/examples/_chart-gallery/pages/ranking.py index 8cc72e3fe..f57242b0a 100644 --- a/vizro-core/examples/_chart-gallery/pages/ranking.py +++ b/vizro-core/examples/_chart-gallery/pages/ranking.py @@ -3,10 +3,8 @@ import vizro.models as vm import vizro.plotly.express as px -from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips_agg +from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file, tips_sorted -# TODO: this is currently identical to bar. It should be: -# - slightly different text since it says "you can arrange your bars in any order" ordered_bar = vm.Page( title="Ordered bar", path="ranking/ordered-bar", @@ -15,27 +13,24 @@ vm.Card( text=""" - #### What is a bar chart? + #### What is an ordered bar chart? - A bar chart displays bars in lengths proportional to the values they represent. One axis of - the chart shows the categories to compare and the other axis provides a value scale, - starting with zero. + An ordered bar chart displays bars with lengths proportional to their values, arranged in descending or + ascending order. One axis shows the categories, and the other provides a value scale starting from zero.   #### When should I use it? - Select a bar chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your bars in any order to fit the message you wish to emphasize. Be mindful of labeling - clearly when you have a large number of bars. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. - + Use an ordered bar chart to help your audience compare sizes and identify patterns in categorical data, + emphasizing the order of categories. This is ideal for showing rankings or priorities. + Ensure clear labeling, especially with many bars, and consider using a legend or abbreviations with fuller + descriptions below. """ ), vm.Graph( figure=px.bar( - tips_agg, + tips_sorted, x="total_bill", y="day", orientation="h", @@ -45,8 +40,6 @@ ], ) -# TODO: this is currently identical to column. It should be: -# - slightly different text since it says "you can arrange your bars in any order" ordered_column = vm.Page( title="Ordered column", path="ranking/ordered-column", @@ -55,25 +48,25 @@ vm.Card( text=""" - #### What is a column chart? + #### What is an ordered column chart? - A column chart is a vertical bar chart, with column lengths varying according to the - categorical value they represent. The scale is presented on the y-axis, starting with zero. + An ordered column chart is a vertical bar chart where columns are arranged in descending or ascending order + based on their values. The column lengths vary according to the categorical value they represent, with the + scale on the y-axis starting from zero.   #### When should I use it? - Select a column chart when you want to help your audience draw size comparisons and identify - patterns between categorical data, i.e., data that presents **how many?** in each category. You can - arrange your columns in any order to fit the message you wish to emphasize. Be mindful of - labeling clearly when you have a large number of columns. You may need to include a legend, - or use abbreviations in the chart with fuller descriptions below of the terms used. + Use an ordered column chart to help your audience compare sizes and identify patterns in categorical data, + emphasizing the order of categories. This is ideal for showing rankings or progressions. Ensure clear + labeling, especially with many columns, and consider using a legend or abbreviations with fuller + descriptions below. """ ), vm.Graph( figure=px.bar( - tips_agg, + tips_sorted, y="total_bill", x="day", ) From de19cfcdac0361d3df30c01f8c4e11aefaf96f45 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 29 Jul 2024 13:04:25 +0000 Subject: [PATCH 105/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/_chart-gallery/pages/magnitude.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/pages/magnitude.py b/vizro-core/examples/_chart-gallery/pages/magnitude.py index e3d28e16b..cbeb09837 100644 --- a/vizro-core/examples/_chart-gallery/pages/magnitude.py +++ b/vizro-core/examples/_chart-gallery/pages/magnitude.py @@ -23,8 +23,8 @@ #### When should I use it? - Use a bar chart to help your audience compare sizes and identify patterns in categorical data, such as - **how many?** in each category. Arrange the bars in any order to fit the message you want to emphasize. + Use a bar chart to help your audience compare sizes and identify patterns in categorical data, such as + **how many?** in each category. Arrange the bars in any order to fit the message you want to emphasize. Ensure clear labeling, especially with many bars, and consider using a legend or abbreviations with fuller descriptions below. """ From 075c52e48e2ad79522e7e60cee2b4142c2d56109 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 29 Jul 2024 17:49:16 +0200 Subject: [PATCH 106/109] Update code example and add TODO --- .../examples/_chart-gallery/custom_components.py | 1 + .../examples/_chart-gallery/pages/_factories.py | 6 +----- .../examples/_chart-gallery/pages/examples/bar.py | 12 +++++++++++- .../examples/_chart-gallery/pages/examples/column.py | 6 +++++- .../examples/_chart-gallery/pages/magnitude.py | 1 + 5 files changed, 19 insertions(+), 7 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/custom_components.py b/vizro-core/examples/_chart-gallery/custom_components.py index 26ec8e0e4..b4843184c 100644 --- a/vizro-core/examples/_chart-gallery/custom_components.py +++ b/vizro-core/examples/_chart-gallery/custom_components.py @@ -12,6 +12,7 @@ from pydantic import Field +# TODO: Fix font and color in code clipboard class CodeClipboard(vm.VizroBaseModel): """Code snippet with a copy to clipboard button.""" diff --git a/vizro-core/examples/_chart-gallery/pages/_factories.py b/vizro-core/examples/_chart-gallery/pages/_factories.py index 592d20f1c..57baba868 100644 --- a/vizro-core/examples/_chart-gallery/pages/_factories.py +++ b/vizro-core/examples/_chart-gallery/pages/_factories.py @@ -37,11 +37,7 @@ def column_factory(group: str): """ ), vm.Graph( - figure=px.bar( - tips_agg, - y="total_bill", - x="day", - ) + figure=px.bar(tips_agg, y="total_bill", x="day", category_orders={"day": ["Thur", "Fri", "Sat", "Sun"]}) ), make_code_clipboard_from_py_file("column.py"), ], diff --git a/vizro-core/examples/_chart-gallery/pages/examples/bar.py b/vizro-core/examples/_chart-gallery/pages/examples/bar.py index 21f0ad9d9..98416a157 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/bar.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/bar.py @@ -7,7 +7,17 @@ page = vm.Page( title="Bar", - components=[vm.Graph(figure=px.bar(tips_agg, x="total_bill", y="day", orientation="h"))], + components=[ + vm.Graph( + figure=px.bar( + tips_agg, + x="total_bill", + y="day", + orientation="h", + category_orders={"day": ["Thur", "Fri", "Sat", "Sun"]}, + ) + ) + ], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/examples/_chart-gallery/pages/examples/column.py b/vizro-core/examples/_chart-gallery/pages/examples/column.py index f2634c822..14f170018 100644 --- a/vizro-core/examples/_chart-gallery/pages/examples/column.py +++ b/vizro-core/examples/_chart-gallery/pages/examples/column.py @@ -7,7 +7,11 @@ page = vm.Page( title="Column", - components=[vm.Graph(figure=px.bar(tips_agg, y="total_bill", x="day"))], + components=[ + vm.Graph( + figure=px.bar(tips_agg, y="total_bill", x="day", category_orders={"day": ["Thur", "Fri", "Sat", "Sun"]}) + ) + ], ) dashboard = vm.Dashboard(pages=[page]) diff --git a/vizro-core/examples/_chart-gallery/pages/magnitude.py b/vizro-core/examples/_chart-gallery/pages/magnitude.py index cbeb09837..e66c818f1 100644 --- a/vizro-core/examples/_chart-gallery/pages/magnitude.py +++ b/vizro-core/examples/_chart-gallery/pages/magnitude.py @@ -35,6 +35,7 @@ x="total_bill", y="day", orientation="h", + category_orders={"day": ["Thur", "Fri", "Sat", "Sun"]}, ) ), make_code_clipboard_from_py_file("bar.py"), From c8619dbc98838da953e4c87cdb8607a0f03c8603 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 29 Jul 2024 18:00:03 +0200 Subject: [PATCH 107/109] Fix CSS in code --- .../examples/_chart-gallery/assets/css/custom.css | 1 + vizro-core/src/vizro/static/css/code.css | 10 ++++++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index 425128f37..6f223d9b6 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -23,6 +23,7 @@ img[src*="#chart-icon"] { overflow: auto; padding: 1rem; position: relative; + font-family: monospace; } .code-clipboard-container::-webkit-scrollbar-thumb { diff --git a/vizro-core/src/vizro/static/css/code.css b/vizro-core/src/vizro/static/css/code.css index f718b41d6..823a9a287 100644 --- a/vizro-core/src/vizro/static/css/code.css +++ b/vizro-core/src/vizro/static/css/code.css @@ -1,23 +1,25 @@ code.language-python.hljs { padding: 0; + font-family: monospace; } .hljs { background: unset; color: unset; - font-family: unset; + font-family: monospace; } .hljs-string, +.hljs-params, .hljs-params .hljs-string, .hljs-number { color: var(--text-code-string); - font-family: unset; + font-family: monospace; } .hljs-keyword { color: var(--text-code-keyword); - font-family: unset; + font-family: monospace; } .hljs-title.function_, @@ -25,5 +27,5 @@ code.language-python.hljs { .hljs-built_in, .hljs-type { color: var(--text-code-meta); - font-family: unset; + font-family: monospace; } From bffb4e8db32537614b2266b02a7072ea197a2a53 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 29 Jul 2024 16:02:09 +0000 Subject: [PATCH 108/109] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/examples/_chart-gallery/assets/css/custom.css | 2 +- vizro-core/src/vizro/static/css/code.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index 6f223d9b6..fa65d5e0b 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -19,11 +19,11 @@ img[src*="#chart-icon"] { .code-clipboard-container { background: var(--surfaces-bg-card); + font-family: monospace; max-height: 500px; overflow: auto; padding: 1rem; position: relative; - font-family: monospace; } .code-clipboard-container::-webkit-scrollbar-thumb { diff --git a/vizro-core/src/vizro/static/css/code.css b/vizro-core/src/vizro/static/css/code.css index 823a9a287..b961acfdb 100644 --- a/vizro-core/src/vizro/static/css/code.css +++ b/vizro-core/src/vizro/static/css/code.css @@ -1,6 +1,6 @@ code.language-python.hljs { - padding: 0; font-family: monospace; + padding: 0; } .hljs { From f02ce50cc600679cc9ab6d303cdeb32c08fa4826 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Mon, 29 Jul 2024 18:09:10 +0200 Subject: [PATCH 109/109] Lint --- pyproject.toml | 2 +- vizro-core/examples/_chart-gallery/assets/css/custom.css | 2 +- vizro-core/src/vizro/static/css/code.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/pyproject.toml b/pyproject.toml index 1109c5482..ab4666b58 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -26,7 +26,7 @@ target-version = ["py38"] [tool.codespell] builtin = "clear,rare,en-GB_to_en-US" -ignore-words-list = "grey,ned,sav" +ignore-words-list = "grey,ned,sav,Thur" skip = "*.min.css.map,*.min.css,.vale/*, *assets/*" [tool.mypy] diff --git a/vizro-core/examples/_chart-gallery/assets/css/custom.css b/vizro-core/examples/_chart-gallery/assets/css/custom.css index 6f223d9b6..fa65d5e0b 100644 --- a/vizro-core/examples/_chart-gallery/assets/css/custom.css +++ b/vizro-core/examples/_chart-gallery/assets/css/custom.css @@ -19,11 +19,11 @@ img[src*="#chart-icon"] { .code-clipboard-container { background: var(--surfaces-bg-card); + font-family: monospace; max-height: 500px; overflow: auto; padding: 1rem; position: relative; - font-family: monospace; } .code-clipboard-container::-webkit-scrollbar-thumb { diff --git a/vizro-core/src/vizro/static/css/code.css b/vizro-core/src/vizro/static/css/code.css index 823a9a287..b961acfdb 100644 --- a/vizro-core/src/vizro/static/css/code.css +++ b/vizro-core/src/vizro/static/css/code.css @@ -1,6 +1,6 @@ code.language-python.hljs { - padding: 0; font-family: monospace; + padding: 0; } .hljs {