From 4c6167c99c2db01f7ceff975076a64e2307b8fb7 Mon Sep 17 00:00:00 2001 From: petar-qb Date: Thu, 2 Nov 2023 15:26:37 +0100 Subject: [PATCH] Added dict, json and yaml examples --- vizro-core/examples/from_dict/app.py | 30 +++++------ vizro-core/examples/from_json/dashboard.json | 54 ++++++++------------ vizro-core/examples/from_yaml/dashboard.yaml | 47 ++++++----------- 3 files changed, 52 insertions(+), 79 deletions(-) diff --git a/vizro-core/examples/from_dict/app.py b/vizro-core/examples/from_dict/app.py index f21e91fa9..794e53cc6 100644 --- a/vizro-core/examples/from_dict/app.py +++ b/vizro-core/examples/from_dict/app.py @@ -8,6 +8,7 @@ from vizro.actions import export_data, filter_interaction from vizro.managers import data_manager from vizro.models import Dashboard +from vizro.tables import dash_data_table def retrieve_gapminder(): @@ -254,7 +255,7 @@ def retrieve_avg_gapminder_year(year: int): "type": "card", "text": """ #### Last updated - July, 2023 + November, 2023 """, }, { @@ -464,26 +465,25 @@ def retrieve_avg_gapminder_year(year: int): page_country = { "title": "Country Analysis", - "layout": {"grid": [[0, 0, 0, 1, 1, 1]] * 7 + [[2, 2, 2, 2, 2, 2]]}, "components": [ { - "type": "graph", - "id": "bar_country", - "figure": px.bar( - "gapminder_country_analysis", - x="year", - y="pop", - color="data", - barmode="group", - labels={"year": "Year", "data": "Data", "pop": "Population"}, - color_discrete_map={"Country": "#afe7f9", "Continent": "#003875"}, + "type": "table", + "id": "table_country", + "title": "Table Country", + "figure": dash_data_table( + id="dash_data_table_country", + data_frame="gapminder", ), + "actions": [ + {"function": filter_interaction(targets=["line_country"])}, + ], }, { "type": "graph", "id": "line_country", "figure": px.line( "gapminder_country_analysis", + title="Line Country", x="year", y="gdpPercap", color="data", @@ -497,15 +497,15 @@ def retrieve_avg_gapminder_year(year: int): "id": "export_data_button", "text": "Export data", "actions": [ - {"function": export_data(targets=["scatter_relation_2007"])}, + {"function": export_data(targets=["line_country"])}, ], }, ], "controls": [ { "type": "filter", - "column": "country", - "selector": {"type": "dropdown", "title": "Select country", "multi": False, "value": "India"}, + "column": "continent", + "selector": {"type": "dropdown", "title": "Select continent", "multi": False, "value": "Europe"}, }, { "type": "filter", diff --git a/vizro-core/examples/from_json/dashboard.json b/vizro-core/examples/from_json/dashboard.json index 13a7c714b..0278141a0 100644 --- a/vizro-core/examples/from_json/dashboard.json +++ b/vizro-core/examples/from_json/dashboard.json @@ -185,7 +185,7 @@ "type": "card" }, { - "text": "#### Last updated\nJuly, 2023\n", + "text": "#### Last updated\nNovember, 2023\n", "type": "card" }, { @@ -374,30 +374,28 @@ "components": [ { "figure": { - "_target_": "bar", - "color": "data", - "data_frame": "gapminder_country_analysis", - "x": "year", - "y": "pop", - "barmode": "group", - "labels": { - "year": "Year", - "data": "Data", - "pop": "Population" - }, - "color_discrete_map": { - "Country": "#afe7f9", - "Continent": "#003875" - } + "_target_": "dash_data_table", + "data_frame": "gapminder", + "id": "dash_data_table_country" }, - "id": "bar_country", - "type": "graph" + "id": "table_country", + "title": "Table Country", + "type": "table", + "actions": [ + { + "function": { + "_target_": "filter_interaction", + "targets": ["line_country"] + } + } + ] }, { "figure": { "_target_": "line", "color": "data", "data_frame": "gapminder_country_analysis", + "title": "Line Country", "x": "year", "y": "gdpPercap", "labels": { @@ -422,7 +420,7 @@ { "function": { "_target_": "export_data", - "targets": ["bar_country"] + "targets": ["line_country"] } } ] @@ -430,12 +428,12 @@ ], "controls": [ { - "column": "country", + "column": "continent", "selector": { "type": "dropdown", - "value": "India", + "value": "Europe", "multi": false, - "title": "Select country" + "title": "Select continent" }, "type": "filter" }, @@ -448,18 +446,6 @@ "type": "filter" } ], - "layout": { - "grid": [ - [0, 0, 0, 1, 1, 1], - [0, 0, 0, 1, 1, 1], - [0, 0, 0, 1, 1, 1], - [0, 0, 0, 1, 1, 1], - [0, 0, 0, 1, 1, 1], - [0, 0, 0, 1, 1, 1], - [0, 0, 0, 1, 1, 1], - [2, 2, 2, 2, 2, 2] - ] - }, "title": "Country Analysis" } ], diff --git a/vizro-core/examples/from_yaml/dashboard.yaml b/vizro-core/examples/from_yaml/dashboard.yaml index 3a9cea5e7..021c8d280 100644 --- a/vizro-core/examples/from_yaml/dashboard.yaml +++ b/vizro-core/examples/from_yaml/dashboard.yaml @@ -183,7 +183,7 @@ pages: type: card - text: | #### Last updated - July, 2023 + November, 2023 type: card - figure: _target_: box @@ -387,25 +387,22 @@ pages: title: Continent Summary - components: - figure: - _target_: bar - color: data - data_frame: gapminder_country_analysis - x: year - y: pop - barmode: group - labels: - year: Year - data: Data - pop: Population - color_discrete_map: - Country: "#afe7f9" - Continent: "#003875" - id: bar_country - type: graph + _target_: dash_data_table + data_frame: gapminder + id: dash_data_table_country + id: table_country + title: Table Country + type: table + actions: + - function: + _target_: filter_interaction + targets: + - line_country - figure: _target_: line color: data data_frame: gapminder_country_analysis + title: Line Country x: year y: gdpPercap labels: @@ -425,30 +422,20 @@ pages: - function: _target_: export_data targets: - - bar_country + - line_country controls: - - column: country + - column: continent selector: type: dropdown - value: India + value: Europe multi: False - title: Select country + title: Select continent type: filter - column: year selector: type: range_slider title: Select timeframe type: filter - layout: - grid: - - [0, 0, 0, 1, 1, 1] - - [0, 0, 0, 1, 1, 1] - - [0, 0, 0, 1, 1, 1] - - [0, 0, 0, 1, 1, 1] - - [0, 0, 0, 1, 1, 1] - - [0, 0, 0, 1, 1, 1] - - [0, 0, 0, 1, 1, 1] - - [2, 2, 2, 2, 2, 2] title: Country Analysis navigation: pages: