added simple graph example

Author: Mike Prosser

examples/simple_graph/README.md

@@ -0,0 +1,18 @@
+# Simple Graph Example
+
+This example demonstrates using nipanel with Streamlit to display a dynamic sine wave using the `streamlit-echarts` library.
+
+## Features
+
+- Generates sine wave data with varying frequency
+- Displays the data in an interactive chart using ECharts
+- Updates automatically every 1 second
+- Shows statistics about the displayed data
+
+### Required Software
+
+- Python 3.9 or later
+
+### Usage
+
+Run `poetry run examples/simple_graph/simple_graph.py`

examples/simple_graph/simple_graph.py

@@ -0,0 +1,38 @@
+"""Example of using nipanel to display a sine wave graph using st_echarts."""
+
+import math
+import time
+from pathlib import Path
+
+import numpy as np
+
+import nipanel
+
+
+panel_script_path = Path(__file__).with_name("simple_graph_panel.py")
+panel = nipanel.create_panel(panel_script_path)
+
+amplitude = 1.0
+frequency = 1.0
+num_points = 100
+
+try:
+    print(f"Panel URL: {panel.panel_url}")
+    print("Press Ctrl+C to exit")
+
+    # Generate and update the sine wave data periodically
+    while True:
+        time_points = np.linspace(0, num_points, num_points)
+        sine_values = amplitude * np.sin(frequency * time_points)
+
+        panel.set_value("time_points", time_points.tolist())
+        panel.set_value("sine_values", sine_values.tolist())
+        panel.set_value("amplitude", amplitude)
+        panel.set_value("frequency", frequency)
+
+        # Slowly vary the frequency for a more dynamic visualization
+        frequency = 1.0 + 0.5 * math.sin(time.time() / 5.0)
+        time.sleep(1)
+
+except KeyboardInterrupt:
+    print("Exiting...")

examples/simple_graph/simple_graph_panel.py

@@ -0,0 +1,59 @@
+"""Example of displaying a sine wave using streamlit-echarts in a nipanel."""
+
+import streamlit as st
+from streamlit_echarts import st_echarts
+
+from nipanel import initialize_panel
+
+
+st.set_page_config(page_title="Simple Graph Example", page_icon="📈", layout="wide")
+st.title("Simple Sine Wave Visualization")
+
+panel = initialize_panel()
+time_points = panel.get_value("time_points", [0.0])
+sine_values = panel.get_value("sine_values", [0.0])
+amplitude = panel.get_value("amplitude", 1.0)
+frequency = panel.get_value("frequency", 1.0)
+
+col1, col2, col3, col4, col5 = st.columns(5)
+with col1:
+    st.metric("Amplitude", f"{amplitude:.2f}")
+with col2:
+    st.metric("Frequency", f"{frequency:.2f} Hz")
+with col3:
+    st.metric("Min Value", f"{min(sine_values):.3f}")
+with col4:
+    st.metric("Max Value", f"{max(sine_values):.3f}")
+with col5:
+    st.metric("Data Points", len(sine_values))
+
+# Prepare data for echarts
+data = [{"value": [x, y]} for x, y in zip(time_points, sine_values)]
+
+# Configure the chart options
+options = {
+    "animation": False,  # Disable animation for smoother updates
+    "title": {"text": "Sine Wave"},
+    "tooltip": {"trigger": "axis"},
+    "xAxis": {"type": "value", "name": "Time (s)", "nameLocation": "middle", "nameGap": 30},
+    "yAxis": {
+        "type": "value",
+        "name": "Amplitude",
+        "nameLocation": "middle",
+        "nameGap": 30,
+    },
+    "series": [
+        {
+            "data": data,
+            "type": "line",
+            "showSymbol": True,
+            "smooth": True,
+            "lineStyle": {"width": 2, "color": "#1f77b4"},
+            "areaStyle": {"color": "#1f77b4", "opacity": 0.3},
+            "name": "Sine Wave",
+        }
+    ],
+}
+
+# Display the chart
+st_echarts(options=options, height="400px")