@columenlabs/lumen-ui 0.0.0-stage → 0.2.0

package/dist/widget-settings.d.ts

@@ -0,0 +1,436 @@
+import { type ViewWidget } from '@columenlabs/lumen-ui-types/views';
+import { type ReactNode } from 'react';
+import type { FilterField } from './lumen-filter.js';
+import type { ViewDomain, ViewField } from './view-model.js';
+/** A widget the editor draws its own parts for: anything but a table of the rows. */
+export type WidgetDraft = Exclude<ViewWidget, {
+    kind: 'table';
+    style: 'table';
+}>;
+/** A label beside its control, the same in every section of Edit widget. */
+export declare function EditorRow({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const isTextField: <T>(f: ViewField<T>) => boolean;
+export declare const isNumberField: <T>(f: ViewField<T>) => boolean;
+/** A trend's date candidates: text fields, the date-like ones first. */
+export declare const dateFields: <T>(domain: ViewDomain<T>) => ViewField<T>[];
+/**
+ * One place a widget takes fields: what it takes (`accepts`, `why` when a field does not fit),
+ * how many (`max`), the keys in it now and the widget with other keys. A table's one slot is its
+ * columns, kept in the view editor itself.
+ */
+export interface WidgetSlot<T> {
+    id: string;
+    label: string;
+    max: number;
+    accepts: (f: ViewField<T>) => boolean;
+    why: string;
+    keys: string[];
+    set: (keys: string[]) => WidgetDraft;
+}
+/** A widget's slots, in the order the editor lists them; none for a chart of symbols. */
+export declare function widgetSlots<T>(card: WidgetDraft, domain: ViewDomain<T>): WidgetSlot<T>[];
+/** A slot's keys after the tree ticks or unticks `key`: one replaces, a list adds up to its max. */
+export declare function slotKeys<T>(slot: WidgetSlot<T>, key: string, on: boolean): string[];
+/**
+ * Fields: each slot as a picker (the tree beside fills the same ones), a number card's or a
+ * Summary's cards, or a chart's symbols.
+ */
+export declare function WidgetFields<T>({ card, set, domain, rows, fields, }: {
+    card: WidgetDraft;
+    set: (c: WidgetDraft) => void;
+    domain: ViewDomain<T>;
+    /** The widget's rows (after its own filter), for the card previews. */
+    rows: T[];
+    fields: FilterField<T>[];
+}): import("react").JSX.Element;
+/** Whether a widget has Settings of its own. */
+export declare const hasWidgetSettings: (card: WidgetDraft) => boolean;
+/** Settings: the picked style's own options. */
+export declare function WidgetSettings<T>({ card, set, domain, }: {
+    card: WidgetDraft;
+    set: (c: WidgetDraft) => void;
+    domain: ViewDomain<T>;
+}): import("react").JSX.Element;
+/** Whether a widget reads the view's rows (a chart of symbols reads its own data). */
+export declare const readsRows: (card: ViewWidget) => card is {
+    id: string;
+    title: string | null;
+    w: number;
+    h?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+    phone?: {
+        x: number;
+        y: number;
+        w: number;
+        h?: number | undefined;
+    } | undefined;
+    filter: {
+        key: string;
+        value: string;
+        not?: boolean | undefined;
+        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    }[];
+    link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
+    kind: "table";
+    style: "table";
+    table?: {
+        shape: "group" | "pivot" | "table";
+        columns: string[];
+        hidden?: string[] | undefined;
+        chips: {
+            key: string;
+            placement: "column" | "inline";
+        }[];
+        formats?: Record<string, "compact" | "integer" | "number" | "percent" | "price" | "price_rounded" | "price_signed" | "rounded" | "signed" | "weight"> | undefined;
+        aggs?: Record<string, "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "none" | "sum"> | undefined;
+        group: {
+            fields: string[];
+            default: string | null;
+        };
+        subgroup?: string | null | undefined;
+        pivot: {
+            rows: string;
+            columns: string;
+            value: string;
+            agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "sum";
+        } | null;
+        sort: {
+            key: string;
+            desc: boolean;
+        } | null;
+        pagination: {
+            on: boolean;
+            size: 25 | 50 | 100 | 250;
+        };
+        width?: "fit" | "scroll" | undefined;
+    } | undefined;
+} | {
+    id: string;
+    title: string | null;
+    w: number;
+    h?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+    phone?: {
+        x: number;
+        y: number;
+        w: number;
+        h?: number | undefined;
+    } | undefined;
+    filter: {
+        key: string;
+        value: string;
+        not?: boolean | undefined;
+        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    }[];
+    link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
+    kind: "table";
+    style: "top_n";
+    sort: string;
+    desc: boolean;
+    n: number;
+    columns: string[];
+} | {
+    id: string;
+    title: string | null;
+    h?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+    phone?: {
+        x: number;
+        y: number;
+        w: number;
+        h?: number | undefined;
+    } | undefined;
+    filter: {
+        key: string;
+        value: string;
+        not?: boolean | undefined;
+        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    }[];
+    link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
+    kind: "metric";
+    style: "number" | "progress_bar" | "progress_circle";
+    w: number;
+    tile: {
+        key: string;
+        label: string;
+        field: string;
+        agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "sum";
+        filter: {
+            key: string;
+            value: string;
+            not?: boolean | undefined;
+            op?: "between" | "eq" | "gt" | "lt" | undefined;
+            link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+        }[];
+        sign: boolean;
+        suffix: string;
+        lines: ({
+            kind: "value";
+            field: string;
+            agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "sum";
+            filter: {
+                key: string;
+                value: string;
+                not?: boolean | undefined;
+                op?: "between" | "eq" | "gt" | "lt" | undefined;
+                link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+            }[];
+            suffix: string;
+        } | {
+            kind: "pct";
+            field: string;
+            agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "sum";
+        } | {
+            kind: "text";
+            text: string;
+        })[];
+    } | {
+        key: string;
+    };
+    target?: number | undefined;
+    meter?: "health" | "usage" | undefined;
+    bands?: {
+        warn: number;
+        bad: number;
+    } | undefined;
+} | {
+    id: string;
+    title: string | null;
+    w: number;
+    h?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+    phone?: {
+        x: number;
+        y: number;
+        w: number;
+        h?: number | undefined;
+    } | undefined;
+    filter: {
+        key: string;
+        value: string;
+        not?: boolean | undefined;
+        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    }[];
+    link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
+    kind: "metric";
+    style: "row";
+    tiles?: ({
+        key: string;
+        label: string;
+        field: string;
+        agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "sum";
+        filter: {
+            key: string;
+            value: string;
+            not?: boolean | undefined;
+            op?: "between" | "eq" | "gt" | "lt" | undefined;
+            link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+        }[];
+        sign: boolean;
+        suffix: string;
+        lines: ({
+            kind: "value";
+            field: string;
+            agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "sum";
+            filter: {
+                key: string;
+                value: string;
+                not?: boolean | undefined;
+                op?: "between" | "eq" | "gt" | "lt" | undefined;
+                link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+            }[];
+            suffix: string;
+        } | {
+            kind: "pct";
+            field: string;
+            agg: "count" | "distinct" | "first" | "last" | "max" | "mean" | "min" | "sum";
+        } | {
+            kind: "text";
+            text: string;
+        })[];
+    } | {
+        key: string;
+    })[] | undefined;
+    rank?: string | undefined;
+    cash?: boolean | undefined;
+} | {
+    id: string;
+    title: string | null;
+    h?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+    phone?: {
+        x: number;
+        y: number;
+        w: number;
+        h?: number | undefined;
+    } | undefined;
+    filter: {
+        key: string;
+        value: string;
+        not?: boolean | undefined;
+        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    }[];
+    link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
+    w: number;
+    date: string;
+    values: string[];
+    bucket: "day" | "month" | "week" | "year";
+    agg: "count" | "last" | "mean" | "sum";
+    kind: "metric";
+    style: "spark" | "tracker";
+} | {
+    id: string;
+    title: string | null;
+    w: number;
+    h?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+    phone?: {
+        x: number;
+        y: number;
+        w: number;
+        h?: number | undefined;
+    } | undefined;
+    filter: {
+        key: string;
+        value: string;
+        not?: boolean | undefined;
+        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    }[];
+    link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
+    kind: "allocation";
+    style: "bar";
+    by: string;
+    value: string;
+    max: number;
+} | {
+    id: string;
+    title: string | null;
+    w: number;
+    h?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+    phone?: {
+        x: number;
+        y: number;
+        w: number;
+        h?: number | undefined;
+    } | undefined;
+    filter: {
+        key: string;
+        value: string;
+        not?: boolean | undefined;
+        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    }[];
+    link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
+    kind: "allocation";
+    style: "donut";
+    by: string;
+    value: string;
+    max: number;
+} | {
+    id: string;
+    title: string | null;
+    w: number;
+    h?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+    phone?: {
+        x: number;
+        y: number;
+        w: number;
+        h?: number | undefined;
+    } | undefined;
+    filter: {
+        key: string;
+        value: string;
+        not?: boolean | undefined;
+        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    }[];
+    link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
+    kind: "allocation";
+    style: "bar_list";
+    by: string;
+    value: string;
+    signed: boolean;
+    stack?: string | undefined;
+    desc: boolean;
+    n: number;
+} | {
+    id: string;
+    title: string | null;
+    w: number;
+    h?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+    phone?: {
+        x: number;
+        y: number;
+        w: number;
+        h?: number | undefined;
+    } | undefined;
+    filter: {
+        key: string;
+        value: string;
+        not?: boolean | undefined;
+        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    }[];
+    link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
+    kind: "chart";
+    style: "growth";
+    scale: "linear" | "log";
+} | {
+    id: string;
+    title: string | null;
+    h?: number | undefined;
+    x?: number | undefined;
+    y?: number | undefined;
+    phone?: {
+        x: number;
+        y: number;
+        w: number;
+        h?: number | undefined;
+    } | undefined;
+    filter: {
+        key: string;
+        value: string;
+        not?: boolean | undefined;
+        op?: "between" | "eq" | "gt" | "lt" | undefined;
+        link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    }[];
+    link?: "amber" | "blue" | "lime" | "pink" | "teal" | undefined;
+    controls?: Partial<Record<"ask" | "columns" | "download" | "filter" | "footer" | "group" | "header" | "legend" | "pager" | "refresh" | "window", boolean>> | undefined;
+    w: number;
+    date: string;
+    values: string[];
+    bucket: "day" | "month" | "week" | "year";
+    agg: "count" | "last" | "mean" | "sum";
+    kind: "chart";
+    style: "area" | "bars" | "combo" | "line" | "stacked";
+};