FastHTML for Real-Time Dashboards: A Six-Step Guide
0:00 Introduction: Explores the feasibility of creating dynamic, real-time dashboards using FastHTML, Python, and a six-step method (RISPEG).
0:48 Dashboard Server Setup: Demonstrates how to set up a FastHTML-based dashboard server in six steps.
0:55 The Clock Example: A basic example of streaming a live digital clock to a webpage to illustrate the core concepts.
1:16 Server Code Breakdown: The server code is explained, highlighting the page, get function, and generator (PEG pattern).
1:28 Page: Sets up the dashboard's HTML structure, including a paragraph for the streaming time and necessary HX attributes for server-side events (SSE).
2:35 Get Function: Defines the route for SSE connection and returns a StreamingResponse with the time generator.
3:16 Time Generator: A generator function that continuously yields the current time formatted as HH:MM:SS within an HTML paragraph, labeled with the timeUpdateEvent event.
4:59 Streaming Options: Discusses various streaming technologies, including WebSockets, client pull/polling, and server-side events (SSE).
6:16 SSE Choice: Opts for SSE due to its suitability for dashboards and seamless integration with FastHTML via Starlette-sse.
6:50 Live Chart Example: Introduces a more complex example of streaming live CPU load data into an Altair line chart.
7:13 Imports: Adds imports for fh_altair, pandas, and altair to handle charting.
7:46 HTML Header: Includes script tags for SSE handling (sse-links) and Altair charts (altair-links) in the HTML header.
8:17 PEG for Charts: Applies the PEG pattern to the chart example, with a new card containing a DIV for the chart and SSE attributes.
9:10 Get Function (Chart): Similar to the clock example but uses a graph_generator for messages.
9:19 Graph Generator: Reads CPU load using the top command, appends it to a list (plot_data), and creates an Altair line chart from a Pandas DataFrame.
11:04 Chart Properties: Sets the chart size to 400x200 pixels.
11:16 SSE Message (Chart): Packages the chart within a DIV using altair2fastHTML and labels it with graphUpdateEvent.
13:30 The Pie Chart Example: Demonstrates creating a pie chart to visualize disk usage, applying the PEG pattern again with minor adjustments.
13:40 Page (Pie Chart): Similar to the line chart example, with unique labels and routes for disk updates.
14:05 Get Function (Pie Chart): Uses a disk_generator.
14:16 Disk Generator: Uses the df -h --total command to get disk usage data, creates a pie chart using mark_arc, and sends it as an SSE message.
16:10 Styling Charts: Shows how to customize chart appearance by adding a configure option to set background colors.
18:05 The Six-Step Method (RISPEG): Introduces the six-step method for creating FastHTML dashboards: Requirements, Includes, Scripts, Page, Get, and Generator.
18:15 Requirements: Lists necessary Python packages in requirements.txt and installs them using pip install -r requirements.txt.
19:05 Includes: Defines the required Python imports based on the packages used.
19:37 Scripts: Includes necessary JavaScript libraries in the HTML header for features like charts and SSE.
20:06 Page: Structures the dashboard layout, allocates space for content, and sets up SSE references.
20:37 Get: Defines the route and sender function for the client to connect to.
20:59 Generator: Creates a generator that continuously provides new values packaged as HTML content for client-side replacement using HTMX and SSE.
21:40 Altair Charts Gallery: Recommends exploring the Altair charts gallery for various chart types and customization options.
22:28 Alternative Chart Libraries: Mentions ten other chart libraries that can be used with FastHTML.
22:55 Future Plans: Discusses future plans to build real-world applications using FastHTML.