Curiosity - Dashboards

Dashboards recipe

Source: 07_Dashboard/ · a small dashboard that composes the three pieces every real Curiosity dashboard uses.

How it looks

Stat cards across the top, a chart in the middle, and a leaderboard on the side. The recipe draws its charts with Plotly; the runnable Tesserae preview below uses Tesserae's built-in LineChart for the same layout.

dashboard-preview.cs

using System;
using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var stats = HStack().WS().Children(
                Card(Metric("Documents", "12.4k")).Grow().MR(8),
                Card(Metric("Searches",  "3.1k")).Grow().MR(8),
                Card(Metric("Users",     "142")).Grow());

            var line = Card(LineChart()
                .Series("This week", new double[] { 12, 18, 15, 22, 30, 28, 35 })
                .Series("Last week", new double[] { 15, 15, 20, 20, 25, 25, 30 })
                .XAxis("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")
                .Legend().WS().H(200.px())).Grow().MR(8);

            var top = Card(VStack().Children(
                TextBlock("Top categories").SemiBold().PB(8),
                TextBlock("Reports — 42"),
                TextBlock("Articles — 31").PT(2),
                TextBlock("Notes — 18").PT(2),
                TextBlock("Emails — 9").PT(2))).W(200.px());

            var page = VStack().WS().Children(
                SectionTitle(UIcons.Dashboard, "Dashboards", "Stat cards, charts, and a leaderboard"),
                stats.PT(12),
                HStack().WS().PT(12).Children(line, top)
            ).P(16);

            document.body.style.overflow = "hidden";
            MountToBody(page);
        }
    }
}

The three pieces

Stat cards — one number per important KPI, across the top.
Charts — time-series, bars, sparklines. New work should use Tesserae's built-in charting components (LineChart(), AreaChart(), BarChart(), Sparkline(...)), which is what the workspace's own dashboards use.
A leaderboard — top categories / users / facet values, on the side.

How the data flows

The view calls RecipeEndpoints.GetDashboardSeriesAsync() and RecipeEndpoints.GetTopCategoriesAsync() from inside a Defer(async () => ...) block, so the network calls only run when the tab is mounted.

Both methods currently return hard-coded values from src/API/Endpoints.cs. Each one has the production-style call commented out — uncomment it (and delete the canned return) once the matching workspace endpoint exists:

return await Mosaik.API.Endpoints.CallAsync<DashboardSeriesResponse>("recipes/dashboard-series");

The DTOs live next door in src/Schema/DTOs.cs. They are [ObjectLiteral] so they round-trip cleanly through the JSON layer.

Chart tips

Always wrap charts in Defer(...) so they only build when visible.
.WS() on the wrapping component is the standard recipe for a chart that needs to fill its container.

The recipe predates the move off Plotly

The workspace front-end no longer references the external charting library or its Plotly wrapper package — every chart in the interface renders through Tesserae's built-in components. The recipe source linked above still draws with Plotly, so treat that part of it as historical: build a new dashboard on the built-in charts, and a custom front-end that charted through the old wrapper has to move to them. The PlotlyConfig.Background() / Font() / PaperBackground() theme helpers only apply to a front-end that still pins the package itself.