Widgets

/** Where a widget panel sits on the script's pane. */
export type WidgetPlacement =
  | { readonly type: "Corner"; readonly corner: Corner }
  /** Follows a chart point as the chart pans. Chart surfaces only. */
  | { readonly type: "Anchor"; readonly time: number; readonly price: number }
  /** A rect in pane px, e.g. a layout inside a `Canvas`. */
  | { readonly type: "Rect"; readonly rect: PaneRect };

/**
 * A DOM element rendered with our React components. Callbacks run like
 * handlers: they may change state, and the chart redraws after them.
 */
export type Widget =
  | { readonly type: "Button"; readonly label: string; onClick(): void }
  | {
      readonly type: "Toggle";
      readonly label: string;
      readonly value: boolean;
      onChange(value: boolean): void;
    }
  | {
      readonly type: "Select";
      readonly label: string;
      readonly value: string;
      readonly options: readonly SelectOption[];
      onChange(value: string): void;
    }
  | {
      readonly type: "NumberInput";
      readonly label: string;
      readonly value: number;
      readonly min?: number;
      readonly max?: number;
      readonly step?: number;
      onChange(value: number): void;
    }
  | {
      readonly type: "TextInput";
      readonly label: string;
      readonly value: string;
      onChange(value: string): void;
    }
  | { readonly type: "Text"; readonly text: string; readonly tone?: Tone }
  | {
      readonly type: "StatCard";
      readonly label: string;
      readonly value: string;
      /** Small line below the value, e.g. a change. */
      readonly detail?: string;
      readonly tone?: Tone;
    }
  /** Virtualized, so thousands of rows are fine. */
  | {
      readonly type: "Table";
      readonly columns: readonly TableColumn[];
      readonly rows: readonly Readonly<Record<string, TableCell>>[];
      onRowClick?(index: number): void;
    }
  | { readonly type: "List"; readonly items: readonly string[] }
  | { readonly type: "Badge"; readonly text: string; readonly tone?: Tone }
  /** `value` from 0 to 1. */
  | { readonly type: "Progress"; readonly value: number; readonly label?: string };

/** Color intent of a text, badge or stat. */
export type Tone = "Neutral" | "Positive" | "Negative" | "Warning";