From 6faa89e195fb1fd3683bb05f0b7438e99c133540 Mon Sep 17 00:00:00 2001 From: huong-li-nguyen Date: Fri, 5 Jul 2024 16:30:25 +0200 Subject: [PATCH] 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" + ) + ) ] )