[Demo] Add gantt chart to visual-vocabulary (#785)

mckinsey · Oct 14, 2024 · ce64658 · ce64658
1 parent 3ca9193
commit ce64658
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 4 deletions.
diff --git a/vizro-core/changelog.d/20241004_205954_113967503+jazwu_gantt.md b/vizro-core/changelog.d/20241004_205954_113967503+jazwu_gantt.md
@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/examples/visual-vocabulary/README.md b/vizro-core/examples/visual-vocabulary/README.md
@@ -64,7 +64,7 @@ The dashboard is still in development. Below is an overview of the chart types f
 | Fan                   | ❌     | Time                     |                                                                                            |                                                                                                                                                                                                 |
 | Flow map              | ❌     | Spatial                  |                                                                                            |                                                                                                                                                                                                 |
 | Funnel                | ✅     | Part-to-whole            | [Funnel plot with px](https://plotly.com/python/funnel-charts/)                            | [px.funnel](https://plotly.com/python/funnel-charts/)                                                                                                                                           |
-| Gantt                 | ❌     | Time                     |                                                                                            |                                                                                                                                                                                                 |
+| Gantt                 | ✅     | Time                     | [Gantt chart with px](https://plotly.com/python/gantt/)                                    | [px.timeline](https://plotly.com/python-api-reference/generated/plotly.express.timeline.html)                                                                                                   |
 | Gridplot              | ❌     | Part-to-whole            |                                                                                            |                                                                                                                                                                                                 |
 | Heatmap               | ✅     | Time                     | [Heatmaps with px](https://plotly.com/python/heatmaps/)                                    | [px.density_heatmap](https://plotly.com/python-api-reference/generated/plotly.express.density_heatmap.html)                                                                                     |
 | Correlation matrix    | ❌     | Correlation              |                                                                                            |                                                                                                                                                                                                 |

diff --git a/vizro-core/examples/visual-vocabulary/chart_groups.py b/vizro-core/examples/visual-vocabulary/chart_groups.py
@@ -138,7 +138,6 @@ class ChartGroup:
     name="Time",
     pages=pages.time.pages,
     incomplete_pages=[
-        IncompletePage("Gantt"),
         IncompletePage("Slope"),
         IncompletePage("Fan"),
         IncompletePage("Bubble timeline"),

diff --git a/vizro-core/examples/visual-vocabulary/pages/_pages_utils.py b/vizro-core/examples/visual-vocabulary/pages/_pages_utils.py
@@ -60,6 +60,14 @@ def make_code_clipboard_from_py_file(filepath: str):
 
 carshare = px.data.carshare()
 
+tasks = pd.DataFrame(
+    [
+        {"Task": "Job A", "Start": "2009-01-01", "Finish": "2009-02-28"},
+        {"Task": "Job B", "Start": "2009-03-05", "Finish": "2009-04-15"},
+        {"Task": "Job C", "Start": "2009-02-20", "Finish": "2009-05-30"},
+    ]
+)
+
 waterfall_data = pd.DataFrame(
     {
         "x": ["Sales", "Consulting", "Net revenue", "Purchases", "Other expenses", "Profit before tax"],

diff --git a/vizro-core/examples/visual-vocabulary/pages/examples/gantt.py b/vizro-core/examples/visual-vocabulary/pages/examples/gantt.py
@@ -0,0 +1,23 @@
+import pandas as pd
+import vizro.models as vm
+import vizro.plotly.express as px
+from vizro import Vizro
+
+tasks = pd.DataFrame(
+    [
+        {"Task": "Job A", "Start": "2009-01-01", "Finish": "2009-02-28"},
+        {"Task": "Job B", "Start": "2009-03-05", "Finish": "2009-04-15"},
+        {"Task": "Job C", "Start": "2009-02-20", "Finish": "2009-05-30"},
+    ]
+)
+
+
+page = vm.Page(
+    title="Gantt",
+    components=[
+        vm.Graph(px.timeline(tasks.sort_values("Start", ascending=False), x_start="Start", x_end="Finish", y="Task"))
+    ],
+)
+
+dashboard = vm.Dashboard(pages=[page])
+Vizro().build(dashboard).run()
diff --git a/vizro-core/examples/visual-vocabulary/pages/time.py b/vizro-core/examples/visual-vocabulary/pages/time.py
@@ -5,7 +5,15 @@
 from custom_charts import categorical_column
 
 from pages._factories import column_and_line_factory, connected_scatter_factory
-from pages._pages_utils import PAGE_GRID, gapminder, make_code_clipboard_from_py_file, stepped_line_data, stocks, tips
+from pages._pages_utils import (
+    PAGE_GRID,
+    gapminder,
+    make_code_clipboard_from_py_file,
+    stepped_line_data,
+    stocks,
+    tasks,
+    tips,
+)
 
 line = vm.Page(
     title="Line",
@@ -160,4 +168,35 @@
         make_code_clipboard_from_py_file("heatmap.py"),
     ],
 )
-pages = [line, column, area, connected_scatter, column_and_line, stepped_line, heatmap]
+
+gantt = vm.Page(
+    title="Gantt",
+    path="time/gantt",
+    layout=vm.Layout(grid=PAGE_GRID),
+    components=[
+        vm.Card(
+            text="""
+                #### What is a gantt chart?
+
+                A gantt chart is a type of bar chart that visualizes a project schedule.
+It shows the start and end dates of a project element, such as tasks, activities, or
+events, in a timeline format. Each element is represented by a bar whose length indicates
+its duration.
+
+                &nbsp;
+
+                #### When should I use it?
+
+                Gantt charts are ideal for visualizing project timelines, tracking
+progress, and managing dependencies. They clearly display task start and end dates, making
+it easy to monitor project status and manage interdependencies. However, they can become
+complex if not regularly updated, especially for large projects.
+        """
+        ),
+        vm.Graph(
+            figure=px.timeline(tasks.sort_values("Start", ascending=False), x_start="Start", x_end="Finish", y="Task")
+        ),
+        make_code_clipboard_from_py_file("gantt.py"),
+    ],
+)
+pages = [line, column, area, connected_scatter, column_and_line, stepped_line, heatmap, gantt]