🎉 Adds a Realtime Pollution Dashboard Demo

docs/knowledge_base/demos/index.md

@@ -214,4 +214,18 @@ Let's explore demos of applications made with Taipy.
       </div> 
     </a>
   </li>
+  <li class="tp-col-12 tp-col-md-6 d-flex" data-keywords="gui dashboard vizelement layout chart">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="pollution_sensors">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-image" src="images/pollution_dashboard.png">
+      </header>
+      <div class="tp-content-card-body">
+        <h4>Realtime Pollution Dashboard</h4>
+        <span class="tp-tag">Front-end | Back-end</span>
+        <p> Displays real-time pollution data from sensors around a factory. The data is streamed
+            from another server and displayed in a dashboard.
+        </p>
+      </div> 
+    </a>
+  </li>
 </ul>

docs/knowledge_base/demos/pollution_sensors.md

@@ -0,0 +1,13 @@
+A use-case of measuring air quality with sensors around a factory to showcase the ability of Taipy to dashboard streaming data.
+
+[Try it live](https://realtime-pollution.taipy.cloud/){: .tp-btn target='blank' }
+[Get it on GitHub](https://github.com/Avaiga/demo-realtime-pollution){: .tp-btn .tp-btn--accent target='blank' }
+
+# Understanding the Application
+This application shows pollution levels around a factory in real-time. The data is generated on 
+another server and sent to this Taipy app via a WebSocket. Taipy then processes the data and 
+displays it on a dashboard. The dashboard is updated in real-time as new data is received.
+
+![Pollution Dashboard](images/pollution_dashboard.png){width=100%}
+
+A tutorial on how to visualize data streamed from another thread is available [here](../tips/multithreading/index.md).

docs/knowledge_base/index.md

@@ -452,6 +452,19 @@ hide:
       </div> 
     </a>
   </li>
+  <li data-keywords="gui dashboard vizelement layout chart">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="demos/pollution_sensors/">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-icon" src="demos/images/icon-code.svg">
+      </header>
+      <div class="tp-content-card-body">
+        <h4> Realtime Pollution Dashboard </h4>
+        <p> Displays real-time pollution data from sensors around a factory. The data is streamed
+            from another server and displayed in a dashboard.
+        </p>
+      </div> 
+    </a>
+  </li>
 </ul>
 
 # Tips & Tricks

docs/knowledge_base/tips/multithreading/index.md

@@ -7,6 +7,8 @@ a server.
   <img src="realtime_dashboard.png" alt="Dashboard Example" width="80%"/>
 </p>
 
+The dashboard displayed in this image is available [here](../../demos/pollution_sensors.md)
+
 In this article, we will code a simple example where:
 - A `sender.py` script will generate a random number and send it through a socket.
 - A `receiver.py` script will receive and display the number in a Taipy application.

mkdocs.yml_template

@@ -54,6 +54,7 @@ nav:
         - "Stock Visualization": knowledge_base/demos/stock_visualization.md
         - "COVID Dashboard": knowledge_base/demos/covid_dashboard.md
         - "Movie Genre Selector": knowledge_base/demos/movie_genre_selector.md
+        - "Realtime Pollution Dashboard" : knowledge_base/demos/pollution_sensors.md
     - "Tips and tricks":
         - "Tips and tricks": knowledge_base/tips/index.md
         - "Scenarios": knowledge_base/tips/scenarios/index.md