Added dict, json and yaml examples

mckinsey · Nov 2, 2023 · 4c6167c · 4c6167c
1 parent 557e674
commit 4c6167c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 79 deletions.
diff --git 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
@@ -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,20 +420,20 @@
             {
               "function": {
                 "_target_": "export_data",
-                "targets": ["bar_country"]
+                "targets": ["line_country"]
               }
             }
           ]
         }
       ],
       "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
@@ -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: