Skip to main content
A full analytics dashboard built entirely client-side. Four KPI metrics across the top, a revenue trend chart alongside a category breakdown donut, and a searchable orders table at the bottom — all composed in a single Python script using the Dashboard grid.

​
How It Works

The entire layout is a 12-column Dashboard grid with row_height="auto" so each row sizes to its content. The top row splits evenly into four Metric cards, each spanning 3 columns. The trend and trend_sentiment props add colored arrows and delta badges — green for positive metrics, red for the declining average order value. The middle row pairs an AreaChart (8 columns) with a PieChart donut (4 columns). The area chart uses curve="smooth" for a polished look and overlays revenue against costs with two series. The donut chart uses inner_radius=60 to create the hole and show_legend=True so categories are labeled. The bottom row is a full-width DataTable with sortable columns, a search bar, and pagination at 5 rows per page. Click any sortable column header to reorder, or type in the search box to filter across all fields. Every piece of data here is embedded directly in the Python script — no server, no API calls. The renderer handles all interactivity (sorting, searching, pagination, tooltips) client-side.