Spaces:
Running
Running
File size: 7,219 Bytes
42ee455 b699ae9 42ee455 22b0b94 42ee455 b699ae9 42ee455 b699ae9 42ee455 b699ae9 42ee455 2465927 b699ae9 2465927 |
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 |
"""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
from pages._pages_utils import PAGE_GRID, make_code_clipboard_from_py_file
from pages.examples import butterfly, column_and_line, connected_scatter, waterfall
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"{group}-butterfly",
path=f"{group}/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 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
within the same parameters. You can also **stack** two bars on each side to divide your
categories.
"""
),
vm.Graph(figure=butterfly.fig),
vm.Tabs(
tabs=[
vm.Container(
title="Vizro dashboard",
components=[make_code_clipboard_from_py_file("butterfly.py", mode="vizro")],
),
vm.Container(
title="Plotly figure",
components=[make_code_clipboard_from_py_file("butterfly.py", mode="plotly")],
),
]
),
],
)
def connected_scatter_factory(group: str):
"""Reusable function to create the page content for the column chart with a unique ID."""
return vm.Page(
id=f"{group}-connected-scatter",
path=f"{group}/connected-scatter",
title="Connected scatter",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a connected scatter chart?
A connected scatter chart visualizes two variables (x and y) using dots, with lines connecting the dots
in the order of the data points. One variable is plotted along the x-axis and the other along the
y-axis, showing both the relationship and a sequence of the data.
#### When should I use it?
Use connected scatter charts to show the relationship between two variables and the sequence of data
points. They are ideal for paired numerical data, helping to reveal trends and patterns over time or in
a specific order. Remember, correlation is not causation, so ensure your audience understands this to
avoid misinterpretation.
"""
),
vm.Graph(figure=connected_scatter.fig),
vm.Tabs(
tabs=[
vm.Container(
title="Vizro dashboard",
components=[make_code_clipboard_from_py_file("connected_scatter.py", mode="vizro")],
),
vm.Container(
title="Plotly figure",
components=[make_code_clipboard_from_py_file("connected_scatter.py", mode="plotly")],
),
]
),
],
)
def column_and_line_factory(group: str):
"""Reusable function to create the page content for the column+line chart with a unique ID."""
return vm.Page(
id=f"{group}-column-and-line",
path=f"{group}/column-and-line",
title="Column and line",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a column and line chart?
A combined column and line chart helps you demonstrate the relationship between an amount
(displayed in columns) and a trend or rate (displayed as a line running across the columns).
#### When should I use it?
Use this type of chart when you wish to compare quantities of one item with changes in another item.
It's ideal for showing patterns over time (e.g., monthly sales and growth rates) but can also be used
for other types of data comparisons.
"""
),
vm.Graph(figure=column_and_line.fig),
vm.Tabs(
tabs=[
vm.Container(
title="Vizro dashboard",
components=[make_code_clipboard_from_py_file("column_and_line.py", mode="vizro")],
),
vm.Container(
title="Plotly figure",
components=[make_code_clipboard_from_py_file("column_and_line.py", mode="plotly")],
),
]
),
],
)
def waterfall_factory(group: str):
"""Reusable function to create the page content for the column chart with a unique ID."""
return vm.Page(
id=f"{group}-waterfall",
path=f"{group}/waterfall",
title="Waterfall",
layout=vm.Layout(grid=PAGE_GRID),
components=[
vm.Card(
text="""
#### What is a waterfall chart?
A waterfall chart is a bar chart that shows the cumulative effect of sequential positive or negative
values. It starts with an initial value, displays individual changes as steps, and ends with the
final total.
#### When should I use it?
Use a waterfall chart to visualize how individual factors contribute to a total, such as changes in
revenue or costs by category. It helps you understand the incremental impact of each factor, making
data analysis and interpretation easier. Ensure all bars and changes are clearly labeled, use consistent
colors for positive and negative values, and arrange categories logically to tell a coherent story.
"""
),
vm.Graph(figure=waterfall.fig),
vm.Tabs(
tabs=[
vm.Container(
title="Vizro dashboard",
components=[make_code_clipboard_from_py_file("waterfall.py", mode="vizro")],
),
vm.Container(
title="Plotly figure",
components=[make_code_clipboard_from_py_file("waterfall.py", mode="plotly")],
),
]
),
],
)
|