Data App Build Flow

Step 1

Connect from the previous chapter

The architecture is the same as “Backend and frontend communication”: Page handles first render, Action handles user input, and only the needed region is rerendered. The only difference is that now the target UI is table/chart data instead of a message list.

Step 2

Goal for this chapter

Implement one full path: CSV load → preprocessing → synchronized table/chart → Action rerender.

To track the same code in Japanese and English, both pages use the same sample path: docs/site-astro/public/examples/go/tutorial/data-app/main.go.

Step 3

Minimal implementation

Start with this compact sample. The numbered comments (1-4) match the execution flow.

// 1) Load CSV
file, _ := os.Open("./data/sales.csv")
ui, _ := mf.DataFrameFromCSV(file, mf.TableProps{Columns: []mf.TableColumn{{Label: "Region"}, {Label: "Sales"}}})

// 2) Preprocess and build a view
view := mf.DataFrameViewProps{
    Filters: []mf.DataFrameFilter{{Column: "Sales", Op: mf.DataFrameFilterGTE, Value: 1000.0}},
    Sort:    []mf.DataFrameSort{{Column: "Sales", Desc: true}},
}

// 3) Keep table/chart in sync with same view
mf.DataFrame(df, mf.TableProps{View: view})
mf.DataFrameChart(df, mf.DataFrameChartProps{View: view, LabelColumn: "Region", Series: []mf.DataFrameChartSeries{{Column: "Sales"}}})

// 4) Apply actions and rerender
app.Action("filters/apply", func(ctx *mb.Context) mf.Node {
    // recalculate view from query/form values
    return renderDashboard(ctx)
})

Step 4

Read the flow in order

1. 1) Load CSV and build the DataFrame source
2. 2) Build filters/sort as DataFrameViewProps
3. 3) Apply the same view to both table and chart for sync
4. 4) Recalculate view in Action and rerender the dashboard region

This sequence keeps responsibilities clear as requirements grow: input → state → rerender.

Step 5

Next step

Continue with Build an Admin App with DashWind to extend the data-display flow into an admin layout. You will combine KPIs, a resource table, and row actions.