dashboard: move charts to top of main content on workstreams and progress pages
workstreams: decouple filter form from display (Generators.input pattern); Status Distribution chart now renders before the filter bar and table. Dependencies section follows after. progress: Event Volume chart moved above the filter controls and table; no reactive changes needed (chart uses raw data, not filtered). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -67,7 +67,8 @@ import {MultiSelect} from "./components/multiselect.js";
|
||||
const DOMAINS = ["custodian", "railiance", "markitect", "coulomb_social", "personhood", "foerster_capabilities"];
|
||||
const STATUSES = ["active", "blocked", "completed", "archived"];
|
||||
|
||||
const filters = view(Inputs.form(
|
||||
// Create filter form without displaying — shown below the chart
|
||||
const _filtersForm = Inputs.form(
|
||||
{
|
||||
domain: MultiSelect(DOMAINS, {label: "Domain", placeholder: "All domains"}),
|
||||
status: MultiSelect(STATUSES, {label: "Status", placeholder: "All statuses"}),
|
||||
@@ -79,7 +80,11 @@ const filters = view(Inputs.form(
|
||||
<div class="filter-owner">${owner}</div>
|
||||
</div>`,
|
||||
}
|
||||
));
|
||||
);
|
||||
```
|
||||
|
||||
```js
|
||||
const filters = Generators.input(_filtersForm);
|
||||
```
|
||||
|
||||
```js
|
||||
@@ -89,15 +94,6 @@ const filtered = data.filter(w =>
|
||||
(filters.status.length === 0 || filters.status.includes(w.status)) &&
|
||||
(!filters.owner || (w.owner ?? "").toLowerCase().includes(filters.owner.toLowerCase()))
|
||||
);
|
||||
|
||||
display(Inputs.table(filtered.map(w => ({
|
||||
Title: w.title,
|
||||
Domain: w.domain,
|
||||
Status: w.status,
|
||||
Owner: w.owner ?? "—",
|
||||
Due: w.due_date ?? "—",
|
||||
Updated: new Date(w.updated_at).toLocaleDateString(),
|
||||
})), {rows: 20}));
|
||||
```
|
||||
|
||||
## Status Distribution
|
||||
@@ -119,6 +115,19 @@ display(Plot.plot({
|
||||
}));
|
||||
```
|
||||
|
||||
```js
|
||||
display(_filtersForm);
|
||||
|
||||
display(Inputs.table(filtered.map(w => ({
|
||||
Title: w.title,
|
||||
Domain: w.domain,
|
||||
Status: w.status,
|
||||
Owner: w.owner ?? "—",
|
||||
Due: w.due_date ?? "—",
|
||||
Updated: new Date(w.updated_at).toLocaleDateString(),
|
||||
})), {rows: 20}));
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
|
||||
```js
|
||||
|
||||
Reference in New Issue
Block a user