watt42_viewlib/docs/howto_add_diagram.md

Tutorial: How to Add a Diagram to Your Viewlib App

Prerequisites

• You should be familiar with Python.
• You are able to run the sample as per the ../README.md#installation.

Introduction

Before adding a diagram, let's add something simpler: a Boolean indicator that shows whether the geyser is on or off.

Add a Boolean Indicator

--- a/sample.py
+++ b/sample.py
@@ -21,6 +21,15 @@ state_as_text = panel.bind(state_to_text, w42_state)

 state_pane = panel.pane.Markdown(state_as_text, sizing_mode='stretch_width')

+def get_geyser_state(state: dict[str, Any]) -> bool:
+    if not state:
+        return False
+    return state.get("is_geyser_on", False)
+
+geyser_state = panel.rx(get_geyser_state)(w42_state)
+
+indicator = panel.indicators.BooleanStatus(value=geyser_state, name="W42 Connected", color="success")
+
 sidebar_content = """
 This example shows how to build a front end for a Watt42 system: Watt42 API
 manages the state of the system, this app visualizes it.
@@ -34,6 +43,7 @@ _ = panel.template.FastListTemplate(
     title="Sample W42 App",
     sidebar=[panel.pane.Markdown(sidebar_content, sizing_mode='stretch_width')],
     main=[
+        indicator,
         state_pane,
         w42_state,
     ],

Add a Diagram

(TODO)