diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py index 443448490..84e70e6aa 100644 --- a/vizro-core/examples/scratch_dev/app.py +++ b/vizro-core/examples/scratch_dev/app.py @@ -1,14 +1,12 @@ """Dev app to try things out.""" -from typing import Optional - 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 +from vizro._themes._color_values import COLORS -pastries = pd.DataFrame( +pastry = pd.DataFrame( { "pastry": [ "Scones", @@ -25,99 +23,21 @@ "Pies", ], "Profit Ratio": [-0.10, -0.15, -0.05, 0.10, 0.05, 0.20, 0.15, -0.08, 0.08, -0.12, 0.02, -0.07], - "Strongly Disagree": [20, 30, 10, 5, 15, 5, 10, 25, 8, 20, 5, 10], - "Disagree": [30, 25, 20, 10, 20, 10, 15, 30, 12, 30, 10, 15], - "Agree": [30, 25, 40, 40, 45, 40, 40, 25, 40, 30, 45, 35], - "Strongly Agree": [20, 20, 30, 45, 20, 45, 35, 20, 40, 20, 40, 40], } ) -@capture("graph") -def diverging_stacked_bar( - data_frame, - y: str, - category_pos: list[str], - category_neg: list[str], - color_discrete_map: Optional[dict[str, str]] = None, -) -> go.Figure: - """Creates a horizontal diverging stacked bar chart (with positive and negative values only) using Plotly's go.Bar. - - This type of chart is a variant of the standard stacked bar chart, with bars aligned on a central baseline to - show both positive and negative values. Each bar is segmented to represent different categories. - - This function is not suitable for diverging stacked bar charts that include a neutral category. - - Inspired by: https://community.plotly.com/t/need-help-in-making-diverging-stacked-bar-charts/34023 - - Args: - data_frame (pd.DataFrame): The data frame for the chart. - y (str): The name of the categorical column in the data frame to be used for the y-axis (categories) - category_pos (list[str]): List of column names in the data frame representing positive values. Columns should be - ordered from least to most positive. - category_neg (list[str]): List of column names in the DataFrame representing negative values. Columns should be - ordered from least to most negative. - color_discrete_map: Optional[dict[str, str]]: A dictionary mapping category names to color strings. - - Returns: - go.Figure: A Plotly Figure object representing the horizontal diverging stacked bar chart. - """ - fig = go.Figure() - - # Add traces for negative categories - for column in category_neg: - fig.add_trace( - go.Bar( - x=-data_frame[column].to_numpy(), - y=data_frame[y], - orientation="h", - name=column, - marker_color=color_discrete_map.get(column, None) if color_discrete_map else None, - ) - ) - - # Add traces for positive categories - for column in category_pos: - fig.add_trace( - go.Bar( - x=data_frame[column], - y=data_frame[y], - orientation="h", - name=column, - marker_color=color_discrete_map.get(column, None) if color_discrete_map else None, - ) - ) - - # Update layout and add central baseline - fig.update_layout(barmode="relative") - fig.add_vline(x=0, line_width=2, line_color="grey") - - # Update legend order to go from most negative to most positive - category_order = category_neg[::-1] + category_pos - for i, category in enumerate(category_order): - fig.update_traces(legendrank=i, selector=({"name": category})) - - fig.update_xaxes(ticksuffix="%", range=[-80, 80]) - - return fig - - page = vm.Page( - title="Diverging stacked bar", + title="Charts UI", components=[ vm.Graph( - title="Would you recommend the pastry to your friends?", - figure=diverging_stacked_bar( - data_frame=pastries, + figure=px.bar( + pastry.sort_values("Profit Ratio"), + orientation="h", + x="Profit Ratio", y="pastry", - category_pos=["Agree", "Strongly Agree"], - category_neg=["Disagree", "Strongly Disagree"], - color_discrete_map={ - "Strongly Agree": "#1a85ff", - "Agree": "#70a1ff", - "Disagree": "#ff5584", - "Strongly Disagree": "#d41159", - }, + color="Profit Ratio", + color_continuous_scale=COLORS["DIVERGING_RED_CYAN"], ), ), ],