@svgrid/enterprise 3.1.8 → 3.1.9

package/dist/fields/view-model.js

@@ -0,0 +1,492 @@
+import { compileFieldFilter } from './filter-model.js';
+import { fieldColumns, primaryIdOf, writeCell } from './grid-access.js';
+import { fieldPropsOf, originalColumn } from './registry.svelte.js';
+import { getFieldUsers, getLinkedTable } from './sources.svelte.js';
+import { chooseRowColor, chosenRowColor, clearRowColorChoice } from './row-color-choice.svelte.js';
+import { newRowValues, recordCopyValues } from './field-ops.js';
+import { openRecord } from './editor-request.svelte.js';
+import { rowColorOf, rowMarkColor } from './row-colors.js';
+import { recordHeightOf } from './row-height.js';
+import { askDeleteRecord } from './record-delete.svelte.js';
+import { commentsOf } from './activity.svelte.js';
+export const VIEW_TYPES = [
+    { type: 'grid', label: 'Grid', icon: 'M3 5h18v14H3zM3 10h18M3 15h18M9 5v14' },
+    { type: 'kanban', label: 'Kanban', icon: 'M4 4h4v16H4zM10 4h4v10h-4zM16 4h4v13h-4z' },
+    { type: 'calendar', label: 'Calendar', icon: 'M4 6h16v14H4zM4 10h16M8 3v4M16 3v4' },
+    { type: 'gantt', label: 'Gantt', icon: 'M4 5h9M7 10h11M10 15h8M4 20h16' },
+    { type: 'gallery', label: 'Gallery', icon: 'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z' },
+    { type: 'chart', label: 'Chart', icon: 'M4 20h16M6 20V11M11 20V5M16 20v-7' },
+    { type: 'form', label: 'Form', icon: 'M6 3h12v18H6zM9 8h6M9 12h6M9 16h3' },
+];
+export const viewTypeInfo = (t) => VIEW_TYPES.find((v) => v.type === t) ?? VIEW_TYPES[0];
+let seq = 0;
+export const newViewId = () => `view-${Date.now().toString(36)}-${(seq += 1)}`;
+/** Sort direction labels that fit the field ("1 → 9" for a number, "A → Z" for text). */
+export function sortLabels(def) {
+    const t = def?.fieldType;
+    const dt = def?.cellDataType;
+    if (t === 'checkbox' || dt === 'boolean')
+        return ['☐ → ☑', '☑ → ☐'];
+    // A select sorts in its options' order.
+    if (t === 'singleSelect')
+        return ['first → last', 'last → first'];
+    if (dt === 'number' ||
+        dt === 'date' ||
+        dt === 'dateString' ||
+        ['number', 'currency', 'percent', 'rating', 'duration', 'autoNumber', 'count', 'date', 'createdTime', 'lastModifiedTime'].includes(t ?? ''))
+        return ['1 → 9', '9 → 1'];
+    return ['A → Z', 'Z → A'];
+}
+// ---- Row colors ------------------------------------------------------------
+/** The rows-colored setting as the grid now has it. */
+export function colorSettingOf(ctrl, saved) {
+    const cfg = rowColorOf(ctrl);
+    // Conditions still being written color nothing yet, and are still the setting.
+    if (!cfg)
+        return saved?.mode === 'conditions' ? saved : { mode: 'none' };
+    if ('field' in cfg)
+        return { mode: 'field', field: cfg.field };
+    return saved?.mode === 'conditions' ? saved : { mode: 'none' };
+}
+/**
+ * The grid's `rowColor` for a setting, painted where the `rowColor` prop says
+ * (`target`). Conditions are tested as the filter tests them: on the value the
+ * cell shows (computed for a formula, lookup, rollup or count), and one still
+ * missing its value is left out.
+ */
+export function rowColorFor(ctrl, setting, linkNames) {
+    if (setting.mode === 'none')
+        return null;
+    const target = ctrl?.props?.rowColor?.target;
+    const where = target ? { target } : {};
+    if (setting.mode === 'field')
+        return { field: setting.field, ...where };
+    const cols = new Map(fieldColumns(ctrl).map((c) => [c.id, c]));
+    const valueOf = (row, id) => {
+        const col = cols.get(id);
+        const fn = col.def.fieldFn;
+        return fn ? fn(row) : row?.[col.field];
+    };
+    const rules = setting.rules
+        .map((r) => {
+        if (!cols.has(r.condition.column))
+            return null;
+        const test = compileFieldFilter({ kind: 'fieldFilter', conjunction: 'and', conditions: [r.condition] }, valueOf, linkNames);
+        return test ? { color: r.color, when: (row) => test(row) } : null;
+    })
+        .filter((r) => !!r);
+    return rules.length ? { rules, ...where } : null;
+}
+export function applyColor(ctrl, setting, linkNames) {
+    chooseRowColor(ctrl, rowColorFor(ctrl, setting, linkNames));
+}
+// ---- Kanban, calendar, Gantt -----------------------------------------------
+/**
+ * A row's record id. A view may hand back a copy of the row (a Gantt merges
+ * its pending edits into one), which the api cannot find by identity: the
+ * grid's own getRowId reads the id from the row's values.
+ */
+function recordId(ctrl, api, row) {
+    const own = ctrl?.props?.getRowId;
+    if (own)
+        return String(own(row, -1));
+    const id = api.getRowId(row);
+    return id == null ? String(row?.id ?? '') : String(id);
+}
+/** Lanes for a Kanban stacked by a field: an "Uncategorized" lane, then one per option or person. */
+export function lanesFor(column) {
+    const lanes = [{ id: '', title: 'Uncategorized', hideWhenEmpty: true }];
+    if (column.fieldType === 'user') {
+        for (const u of getFieldUsers())
+            lanes.push({ id: u.id, title: u.name });
+        return lanes;
+    }
+    const p = fieldPropsOf(originalColumn(column.def));
+    for (const o of p.options ?? [])
+        lanes.push({ id: o.value, title: o.value, ...(o.color ? { color: o.color } : {}) });
+    return lanes;
+}
+/** Fields a Kanban can stack by. */
+export const stackableColumns = (ctrl) => fieldColumns(ctrl).filter((c) => c.fieldType === 'singleSelect' || (c.fieldType === 'user' && !c.def.fieldProps?.multiple));
+/** Fields a calendar or Gantt can place records by. */
+export const dateColumns = (ctrl) => fieldColumns(ctrl).filter((c) => c.fieldType === 'date' || c.def.cellDataType === 'date' || c.def.cellDataType === 'dateString');
+/** Fields a Gantt can draw as progress: a number shown as a percent. */
+export const progressColumns = (ctrl) => fieldColumns(ctrl).filter((c) => c.fieldType === 'percent' || (c.fieldType === 'number' && fieldPropsOf(originalColumn(c.def)).format === 'percent'));
+/** Link fields to the same table: what a record depends on, for a Gantt's arrows. */
+export const dependencyColumns = (ctrl) => fieldColumns(ctrl).filter((c) => {
+    if (c.fieldType !== 'link')
+        return false;
+    const t = getLinkedTable(fieldPropsOf(originalColumn(c.def)).table);
+    if (!t)
+        return false;
+    const rows = typeof t.rows === 'function' ? t.rows() : t.rows;
+    return rows === ctrl.internalData || (rows.length > 0 && rows[0] === ctrl.internalData?.[0]);
+});
+/**
+ * Re-apply a calendar or Gantt view after its settings changed (its fields,
+ * progress, links or colors), keeping the grid's state.
+ */
+export function applyGanttSettings(ctrl, api, view, primaryField) {
+    const id = primaryIdOf(ctrl);
+    const primary = primaryField ?? fieldColumns(ctrl).find((c) => c.id === id)?.field;
+    if (view.type === 'gantt')
+        api.setOption('gantt', ganttConfig(ctrl, api, view, primary));
+    else if (view.type === 'calendar')
+        api.setOption('scheduler', dateConfig(ctrl, api, view, primary));
+}
+/** Fields a gallery can take a cover from. */
+export const coverColumns = (ctrl) => fieldColumns(ctrl).filter((c) => c.fieldType === 'attachment');
+export function boardConfig(ctrl, api, view) {
+    const cols = fieldColumns(ctrl);
+    const col = cols.find((c) => c.id === view.stackBy);
+    if (!col)
+        return undefined;
+    const primary = cols.find((c) => c.id === primaryIdOf(ctrl));
+    return {
+        groupBy: col.field,
+        lanes: lanesFor(col),
+        // The card: the primary field as its title, then the next three fields
+        // the view shows (Hide fields takes one off the cards too).
+        ...(primary ? { titleField: primary.field } : {}),
+        cardFields: cols.filter((c) => c.visible && c !== primary && c !== col).slice(0, 3).map((c) => c.field),
+        // The view bar has the search.
+        searchable: false,
+        // A card dropped in another lane changes the field, through the grid's
+        // edit path (undo, validation, onCellValueChange).
+        onCardMove: (e) => {
+            if (e.toLane === e.fromLane)
+                return;
+            writeCell(ctrl, recordId(ctrl, api, e.row), col.id, e.toLane === '' ? null : e.toLane);
+        },
+        // "+ Add a card" in a lane: a record already in that lane, named by the
+        // primary field, made the way "+ Add row" makes one.
+        // Double-click or F2 on a card opens the record, as a row's expand button does.
+        onCardEdit: (row) => openRecord({ ctrl, rowId: recordId(ctrl, api, row) }),
+        // The record's discussion: its comment count on the card, the badge opens it.
+        commentCount: (row) => commentsOf(ctrl, recordId(ctrl, api, row)).length,
+        onCommentsOpen: (row) => openRecord({ ctrl, rowId: recordId(ctrl, api, row), focus: 'comment' }),
+        cellGrid: cardGrid(ctrl),
+        // Right-click on a card: the record's menu, as in the grid.
+        cardMenu: (row, menu) => {
+            const editable = !!ctrl.editingEnabled;
+            return [
+                { label: 'Expand record', onSelect: () => openRecord({ ctrl, rowId: recordId(ctrl, api, row) }) },
+                { label: 'Comment', onSelect: () => openRecord({ ctrl, rowId: recordId(ctrl, api, row), focus: 'comment' }) },
+                ...(editable
+                    ? [
+                        { label: 'Move to', children: menu.lanes.map((l) => ({ label: l.title ?? (l.id || 'Empty'), onSelect: () => menu.moveTo(l.id) })) },
+                        { label: 'Duplicate record', onSelect: () => duplicateRecord(ctrl, api, row) },
+                        { separator: true },
+                        { label: 'Delete record', onSelect: () => askDeleteRecord({ ctrl, api, row }) },
+                    ]
+                    : []),
+            ];
+        },
+        composer: true,
+        onCardAdd: (laneId, title) => {
+            const primary = fieldColumns(ctrl).find((c) => c.id === primaryIdOf(ctrl));
+            const cfg = ctrl.props.rowAdder;
+            const defaults = cfg && typeof cfg === 'object' && typeof cfg.defaults === 'function' ? cfg.defaults() : {};
+            const row = newRowValues(ctrl, {
+                ...defaults,
+                [col.field]: laneId === '' ? null : laneId,
+                ...(primary && title ? { [primary.field]: title } : {}),
+            });
+            api.addRow(row, 'bottom');
+            ctrl.props.onRowAdd?.({ row });
+        },
+    };
+}
+/**
+ * The grid's `gallery` for a gallery view: the cover field, the primary field
+ * as the title, then the fields the grid shows, in its order. A card opens
+ * its record. Built again when fields are hidden or moved.
+ */
+export function galleryConfig(ctrl, api, view) {
+    const cols = fieldColumns(ctrl);
+    const primary = cols.find((c) => c.id === primaryIdOf(ctrl)) ?? cols.find((c) => c.visible);
+    const cover = cols.find((c) => c.id === view.coverField);
+    return {
+        ...(cover ? { coverField: cover.field } : {}),
+        ...(primary ? { titleField: primary.field } : {}),
+        cardFields: cols.filter((c) => c.visible && c !== primary && c !== cover).map((c) => c.field),
+        // The bar has its own search; the grid's would be a second box.
+        searchable: false,
+        onCardClick: (row) => openRecord({ ctrl, rowId: recordId(ctrl, api, row) }),
+        cellGrid: cardGrid(ctrl),
+    };
+}
+/**
+ * The grid as a field cell on a card sees it: every method and prop of the
+ * grid, with the card's width as the column's. A custom field type's cell
+ * can open its record or read the grid's props from a card as from a row,
+ * and a button runs its automation. A card is read, not edited (the record
+ * it opens is), so the grid says editing is off: no stars to click, no drop.
+ */
+export function cardGrid(ctrl) {
+    return (width) => new Proxy(ctrl, {
+        get: (t, key) => {
+            if (key === 'getColumnWidth')
+                return () => width;
+            if (key === 'editingEnabled')
+                return false;
+            // Read with the grid itself as `this`: its state lives in private fields.
+            const v = Reflect.get(t, key, t);
+            return typeof v === 'function' ? v.bind(t) : v;
+        },
+    });
+}
+/** A date field without a time holds days. */
+const holdsDays = (c) => (c.fieldType === 'date' && !c.def.fieldProps?.time) || c.def.cellDataType === 'dateString';
+/** A moved date, written the way the field keeps it: 'YYYY-MM-DD' for days, else an ISO time. */
+function dateValue(c, d) {
+    if (!holdsDays(c))
+        return d.toISOString();
+    const p = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
+}
+/**
+ * A view colored by a select field colors its events the same way: the options
+ * become the calendar's color legend, which also hides and shows them.
+ */
+function eventColors(cols, color) {
+    if (color?.mode !== 'field')
+        return {};
+    const col = cols.find((c) => c.field === color.field);
+    if (!col || col.fieldType !== 'singleSelect')
+        return {};
+    const calendars = lanesFor(col).filter((l) => l.id !== '' && l.color).map(({ id, title, color }) => ({ id, title, color }));
+    return calendars.length ? { calendars, calendarField: col.field } : {};
+}
+function dateConfig(ctrl, api, view, primaryField) {
+    const cols = fieldColumns(ctrl);
+    const start = cols.find((c) => c.id === view.dateField);
+    if (!start)
+        return undefined;
+    const end = cols.find((c) => c.id === view.endField);
+    // A record dragged to another day changes its dates, through the grid's edit
+    // path. The calendar's ends are exclusive; a date-only field keeps the last day.
+    const move = (e) => {
+        const id = recordId(ctrl, api, e.row);
+        writeCell(ctrl, id, start.id, dateValue(start, e.start));
+        if (end)
+            writeCell(ctrl, id, end.id, e.end.getTime() > e.start.getTime() ? lastDayValue(end, e.end) : dateValue(end, e.start));
+    };
+    const editable = gridEditable(ctrl);
+    return {
+        searchable: false,
+        editable,
+        history: editable,
+        tooltip: true,
+        // An event opens its record, as a card or a bar does.
+        onEventOpen: (row) => openRecord({ ctrl, rowId: recordId(ctrl, api, row) }),
+        onEventDelete: (row) => deleteRecord(ctrl, api, row),
+        startField: start.field,
+        ...(end ? { endField: end.field } : {}),
+        ...(primaryField ? { titleField: primaryField } : {}),
+        ...(holdsDays(start) ? { allDay: true } : {}),
+        ...eventColors(cols, view.color),
+        onEventMove: move,
+        // One date field: a record has no end to change, so its events only move.
+        ...(end ? { onEventResize: move } : { resizable: false }),
+        // A day (or range) picked on the calendar: a record on it, opened to fill in.
+        onEventAdd: (from, to) => {
+            const cfg = ctrl.props.rowAdder;
+            const defaults = cfg && typeof cfg === 'object' && typeof cfg.defaults === 'function' ? cfg.defaults() : {};
+            const row = newRowValues(ctrl, {
+                ...defaults,
+                [start.field]: dateValue(start, from),
+                ...(end ? { [end.field]: to.getTime() > from.getTime() ? lastDayValue(end, to) : dateValue(end, from) } : {}),
+            });
+            api.addRow(row, 'bottom');
+            ctrl.props.onRowAdd?.({ row });
+            queueMicrotask(() => openRecord({ ctrl, rowId: recordId(ctrl, api, row), editPrimary: true }));
+        },
+    };
+}
+/** Whether the grid lets people edit (the base's `editable`). */
+const gridEditable = (ctrl) => ctrl.props.editable !== false && !!(ctrl.props.editable ?? ctrl.props.enableInlineEditing);
+/** An exclusive end written back: a date-only field keeps the last day (the day before). */
+function lastDayValue(c, d) {
+    return holdsDays(c) ? dateValue(c, new Date(d.getFullYear(), d.getMonth(), d.getDate() - 1)) : dateValue(c, d);
+}
+/** A copy of a record a view handed over, right after it, made as "+ Add row" makes one. */
+function duplicateRecord(ctrl, api, row) {
+    const id = recordId(ctrl, api, row);
+    const data = ctrl.internalData;
+    const at = data.findIndex((r) => recordId(ctrl, api, r) === id);
+    if (at < 0)
+        return;
+    const next = newRowValues(ctrl, recordCopyValues(ctrl, data[at]));
+    api.addRow(next, at + 1);
+    ctrl.props.onRowAdd?.({ row: next });
+}
+/** Remove a record a view handed over (a copy, perhaps), and report it as the grid's delete does. */
+export function deleteRecord(ctrl, api, row) {
+    const id = recordId(ctrl, api, row);
+    const data = ctrl.internalData;
+    const at = data.findIndex((r) => recordId(ctrl, api, r) === id);
+    if (at < 0)
+        return;
+    const gone = data[at];
+    api.removeRows([at]);
+    ctrl.props.onRowsDelete?.({ rows: [gone], ids: [id], data: ctrl.internalData });
+}
+/**
+ * A Gantt: the calendar's dates and moves, and a task table beside the bars
+ * that holds the record's name, its dates and its length in working days.
+ * Every field would fill the table and push the chart out of view.
+ */
+// The zoom a grid's Gantt was last set to, per grid.
+const ganttZoom = new WeakMap();
+function ganttConfig(ctrl, api, view, primaryField) {
+    ganttZoom.delete(ctrl);
+    const cols = fieldColumns(ctrl);
+    const start = cols.find((c) => c.id === view.dateField);
+    if (!start)
+        return undefined;
+    const end = cols.find((c) => c.id === view.endField);
+    const progress = cols.find((c) => c.id === view.progressField);
+    const deps = cols.find((c) => c.id === view.dependencyField && c.fieldType === 'link');
+    const idOfField = (field) => cols.find((c) => c.field === field)?.id;
+    const table = [idOfField(primaryField), start.id, end?.id].filter((id) => !!id);
+    const idOf = (row) => recordId(ctrl, api, row);
+    // Bars take the view's row colors, by a field or by conditions, as the rows
+    // do: the color the grid gives a row is its bar's.
+    const colorOf = view.color && view.color.mode !== 'none' ? (row) => rowMarkColor(ctrl, row) ?? undefined : undefined;
+    // The Gantt's ends are exclusive; a date-only field keeps the last day.
+    const endValue = (d) => lastDayValue(end, d);
+    const writeDates = (id, from, to) => {
+        writeCell(ctrl, id, start.id, dateValue(start, from));
+        if (end)
+            writeCell(ctrl, id, end.id, to.getTime() > from.getTime() ? endValue(to) : dateValue(end, from));
+    };
+    // A percent field holds 0 to 1 unless it says 0 to 100; the Gantt draws 0 to 100.
+    const points = !!(progress && fieldPropsOf(originalColumn(progress.def)).points);
+    const depsOf = (id) => {
+        const row = ctrl.internalData.find((r) => idOf(r) === id);
+        const v = row?.[deps.field];
+        return Array.isArray(v) ? v.map(String) : v == null || v === '' ? [] : [String(v)];
+    };
+    const editable = gridEditable(ctrl);
+    return {
+        searchable: false,
+        startField: start.field,
+        ...(end ? { endField: end.field } : {}),
+        ...(primaryField ? { titleField: primaryField } : {}),
+        tableColumns: [...new Set(table), '__duration'],
+        // The dates sit compact beside the bars; the record's name takes the rest.
+        tableColumnWidths: Object.fromEntries([start, end].filter((c) => !!c).map((c) => [c.id, holdsDays(c) ? 144 : 176])),
+        ...(colorOf ? { colorOf } : {}),
+        ...(view.zoom ? { zoom: view.zoom } : {}),
+        tooltip: true,
+        editable,
+        history: editable,
+        // A bar opens its record, as a card or a calendar event does.
+        onTaskOpen: (row) => openRecord({ ctrl, rowId: idOf(row) }),
+        onTaskMove: (e) => {
+            writeDates(idOf(e.row), e.start, e.end);
+            for (const s of e.subtree ?? [])
+                writeDates(idOf(s.row), s.start, s.end);
+        },
+        onTaskResize: (e) => writeDates(idOf(e.row), e.start, e.end),
+        // Records a moved task pushed later to keep its links legal.
+        onDependenciesChange: (moves) => {
+            for (const m of moves)
+                writeDates(m.id, m.start, m.end);
+        },
+        ...(progress
+            ? {
+                progressField: progress.field,
+                // The Gantt reads 0 to 100: a fraction field is scaled on the way in.
+                ...(points ? {} : { progressValue: (row) => Number(row?.[progress.field] ?? 0) * 100 }),
+                onProgressChange: (e) => writeCell(ctrl, idOf(e.row), progress.id, points ? e.progress : e.progress / 100),
+            }
+            : {}),
+        ...(deps
+            ? {
+                predecessorField: deps.field,
+                onDependencyAdd: (d) => {
+                    const now = depsOf(d.to);
+                    if (!now.includes(d.from))
+                        writeCell(ctrl, d.to, deps.id, [...now, d.from]);
+                },
+                onDependencyRemove: (depId) => {
+                    const [from, to] = depId.split('->');
+                    if (from && to)
+                        writeCell(ctrl, to, deps.id, depsOf(to).filter((x) => x !== from));
+                },
+            }
+            : {}),
+        // Kept with the view when it is left (captureView).
+        onZoomChange: (zoom) => {
+            ganttZoom.set(ctrl, zoom);
+        },
+        // A day picked on the chart: a record on it, opened to fill in.
+        onTaskAdd: (from, to) => {
+            const cfg = ctrl.props.rowAdder;
+            const defaults = cfg && typeof cfg === 'object' && typeof cfg.defaults === 'function' ? cfg.defaults() : {};
+            const row = newRowValues(ctrl, {
+                ...defaults,
+                [start.field]: dateValue(start, from),
+                ...(end ? { [end.field]: to.getTime() > from.getTime() ? endValue(to) : dateValue(end, from) } : {}),
+            });
+            api.addRow(row, 'bottom');
+            ctrl.props.onRowAdd?.({ row });
+            queueMicrotask(() => openRecord({ ctrl, rowId: idOf(row), editPrimary: true }));
+        },
+        // By id: the Gantt hands over a copy of the row.
+        onTaskDelete: (row) => deleteRecord(ctrl, api, row),
+    };
+}
+// ---- Capture and apply ------------------------------------------------------
+/** A new view: no filter, sorts, groups or hidden fields. */
+export const PLAIN_STATE = { sorting: [], grouping: [], hiddenColumns: [], advancedFilter: null };
+/** The view as the grid now shows it, to keep when the view is left. */
+export function captureView(ctrl, api, view) {
+    const state = { ...api.getState() };
+    // Paging, charts and the search box's text are not part of a view.
+    delete state.pagination;
+    delete state.chart;
+    delete state.charts;
+    delete state.chartActive;
+    delete state.globalFilter;
+    const rowHeight = recordHeightOf(api.getOption('rowHeight'));
+    const zoom = view.type === 'gantt' ? ganttZoom.get(ctrl) : undefined;
+    // No colors chosen (by a view or the column menu): the `rowColor` prop is in
+    // force, and the view keeps no color setting of its own.
+    const { color: _color, ...rest } = view;
+    const color = chosenRowColor(ctrl) === undefined ? undefined : colorSettingOf(ctrl, view.color);
+    return {
+        ...rest,
+        state,
+        ...(typeof rowHeight === 'number' ? { rowHeight } : {}),
+        ...(zoom ? { zoom } : {}),
+        ...(color ? { color } : {}),
+    };
+}
+/** Show a view: its grid state, row height, colors, and the grid's mode for its type. */
+export function applyView(ctrl, api, view, opts = {}) {
+    // A view not shown before starts plain; one saved before a filter existed
+    // clears the filter now on. The search box starts empty in every view.
+    api.setState({ advancedFilter: null, ...(view.state ?? PLAIN_STATE), globalFilter: '' });
+    // A grouped view opens with its groups open, unless it kept which were.
+    const grouping = view.state;
+    // The grouped rows exist once the grid has taken the new state: open them then.
+    if (grouping?.grouping?.length && grouping.expanded === undefined)
+        setTimeout(() => api.expandAllGroups?.(), 0);
+    if (view.rowHeight != null)
+        api.setOption('rowHeight', view.rowHeight);
+    // A view with no color setting shows the `rowColor` prop's colors.
+    if (view.color)
+        applyColor(ctrl, view.color, opts.linkNames);
+    else
+        clearRowColorChoice(ctrl);
+    api.setOption('board', view.type === 'kanban' ? boardConfig(ctrl, api, view) : undefined);
+    api.setOption('gallery', view.type === 'gallery' ? galleryConfig(ctrl, api, view) : undefined);
+    // A record's title on a calendar or Gantt: the primary field.
+    const id = primaryIdOf(ctrl);
+    const primary = opts.primaryField ?? fieldColumns(ctrl).find((c) => c.id === id)?.field;
+    api.setOption('scheduler', view.type === 'calendar' ? dateConfig(ctrl, api, view, primary) : undefined);
+    api.setOption('gantt', view.type === 'gantt' ? ganttConfig(ctrl, api, view, primary) : undefined);
+}

package/dist/fields/viewbar/ChartPanel.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  /**
+   * "Customize chart": the chart's kind, the field the records are grouped
+   * by, and the value - the number of records, or a number field's sum or
+   * average. Each change shows at once and is kept in the view.
+   */
+  import { panelFocus } from './panel-focus'
+  import { CHART_KINDS, chartXColumns, chartYColumns, type ChartKind, type ChartSetting } from '../chart-view'
+
+  let { ctrl, setting, onChange }: { ctrl: any; setting: ChartSetting; onChange: (next: ChartSetting) => void } = $props()
+
+  const xs = $derived(chartXColumns(ctrl))
+  const ys = $derived(chartYColumns(ctrl))
+  const hasX = $derived(xs.some((c) => c.id === setting.x))
+  const valueOf = (e: Event) => (e.currentTarget as HTMLSelectElement).value
+
+  function setY(v: string) {
+    const { y: _old, aggregation: _agg, ...rest } = setting
+    onChange(v ? { ...rest, y: v, aggregation: setting.aggregation ?? 'sum' } : rest)
+  }
+</script>
+
+<div class="sv-fvb-panel sv-fchart-panel" use:panelFocus>
+  <p class="sv-fvb-title">Chart</p>
+  <label class="sv-fchart-field">
+    <span>Type</span>
+    <select class="sv-fvb-select" value={setting.kind} onchange={(e) => onChange({ ...setting, kind: valueOf(e) as ChartKind })}>
+      {#each CHART_KINDS as k (k.kind)}<option value={k.kind}>{k.label}</option>{/each}
+    </select>
+  </label>
+  <label class="sv-fchart-field">
+    <span>Group by</span>
+    <select class="sv-fvb-select" value={setting.x} onchange={(e) => onChange({ ...setting, x: valueOf(e) })}>
+      <!-- No field yet (or the one picked was deleted): a prompt, so any pick is a change. -->
+      {#if !hasX}<option value={setting.x} disabled>Choose a field</option>{/if}
+      {#each xs as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+    </select>
+  </label>
+  <label class="sv-fchart-field">
+    <span>Value</span>
+    <select class="sv-fvb-select" value={setting.y ?? ''} onchange={(e) => setY(valueOf(e))}>
+      <option value="">Number of records</option>
+      {#each ys as c (c.id)}<option value={c.id}>{c.header}</option>{/each}
+    </select>
+  </label>
+  {#if setting.y}
+    <label class="sv-fchart-field">
+      <span>Combine</span>
+      <select class="sv-fvb-select" value={setting.aggregation ?? 'sum'} onchange={(e) => onChange({ ...setting, aggregation: valueOf(e) as 'sum' | 'avg' })}>
+        <option value="sum">Sum</option>
+        <option value="avg">Average</option>
+      </select>
+    </label>
+  {/if}
+</div>
+
+<style>
+  .sv-fchart-panel { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
+  .sv-fchart-field { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; font-size: 13px; }
+  .sv-fchart-field > span { color: var(--sg-muted, #64748b); }
+</style>

package/dist/fields/viewbar/ChartPanel.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type ChartSetting } from '../chart-view.js';
+type $$ComponentProps = {
+    ctrl: any;
+    setting: ChartSetting;
+    onChange: (next: ChartSetting) => void;
+};
+declare const ChartPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChartPanel = ReturnType<typeof ChartPanel>;
+export default ChartPanel;