@reeflow/core

@reeflow/core

Enumerations

QueryType

Defined in: packages/types/dist/index.d.mts:46079

Query types for JSONQL queries

Enumeration Members

Enumeration Member	Value	Defined in
AGGREGATE	"aggregate"	packages/types/dist/index.d.mts:46082
SQL	"sql"	packages/types/dist/index.d.mts:46080
TABLE	"table"	packages/types/dist/index.d.mts:46081

Classes

ReeflowBarChart

Defined in: apps/sdks/core/src/components/charts/bar/ReeflowBarChart.ts:21

Bar chart component for visualizing data as vertical bars

Automatically determines dimension (x-axis) and measure (y-axis) columns from query results. Supports multiple measures displayed as grouped bars.

Example

<reeflow-bar-chart
  connection-id="my-connection"
  query='{"select": [{"dimension": "category"}, {"measure": "sales"}], "from": "revenue"}'>
</reeflow-bar-chart>

Extends

• ReeflowChart

Constructors

Constructor

new ReeflowBarChart(): ReeflowBarChart;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowBarChart

Inherited from

ReeflowChart.constructor

Other

chartInstance

protected chartInstance: EChartsType | null = null;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:54

Inherited from

ReeflowChart.chartInstance

chartOptions

protected chartOptions: EChartsOption = {};

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:57

Inherited from

ReeflowChart.chartOptions

chartType

protected chartType: "bar";

Defined in: apps/sdks/core/src/components/charts/bar/ReeflowBarChart.ts:22

Chart type identifier for template rendering (icons, labels) Override in subclasses to specify the chart type

Overrides

ReeflowChart.chartType

componentId?

optional componentId: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:48

Component ID from the workbook configuration Used to uniquely identify this component instance

Inherited from

ReeflowChart.componentId

errorCode

protected errorCode: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:131

Inherited from

ReeflowChart.errorCode

errorMessage

errorMessage: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:134

Inherited from

ReeflowChart.errorMessage

height?

optional height: number;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:51

Chart height in pixels (optional, defaults to container height)

Inherited from

ReeflowChart.height

label

label: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:81

Optional label displayed above the component

Inherited from

ReeflowChart.label

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowChart.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowChart.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowChart.themeStyle

width?

optional width: number;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:45

Chart width in pixels (optional, defaults to container width)

Inherited from

ReeflowChart.width

data

Get Signature

get data(): QueryResult | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:96

Returns

QueryResult | null

Set Signature

set data(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:100

Parameters

Parameter	Type
value	| QueryResult | { columns: unknown[]; rows: unknown[][]; } | null

Returns

void

Inherited from

ReeflowChart.data

query

Get Signature

get query():
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean | string[]>;
  sql: string;
  type: SQL;
}
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  dimensions?: (
     | {
     column: string;
     label?: string;
     type: "categorical";
   }
     | {
     column: string;
     date_range?: [string, string];
     granularity: "day" | "week" | "month" | "quarter" | "year";
     label?: string;
     type: "time";
  })[];
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  measures: {
     color?: string;
     column?: string;
     label?: string;
     type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum";
  }[];
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  distinct?: boolean;
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: TABLE;
}
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:68

JSONQL query to execute Can be set via attribute or inline script tag with slot=“query”

Returns

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Set Signature

set query(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:72

Parameters

Parameter

Type

value

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Returns

void

Inherited from

ReeflowChart.query

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowChart.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowChart.emitEvent

executeQuery()

protected executeQuery(): Promise<QueryResult | null>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:197

Execute the current query and update component state

Returns

Promise<QueryResult | null>

Inherited from

ReeflowChart.executeQuery

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowChart.findProvider

generateChartOptions()

protected generateChartOptions(): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/bar/ReeflowBarChart.ts:28

Generate ECharts configuration for bar chart

Returns

EChartsOption

ECharts option object with bar chart configuration

Overrides

ReeflowChart.generateChartOptions

getChartAxisThemeOptions()

protected getChartAxisThemeOptions(options?): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:344

Get axis theme options for charts with axes (bar, line)

Parameters

Parameter	Type	Description
options?	Partial<AxisThemeOptions>	Optional axis theme options to override defaults

Returns

EChartsOption

ECharts options with axis theme applied

Inherited from

ReeflowChart.getChartAxisThemeOptions

getChartInstance()

getChartInstance(): EChartsType | null;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:311

Get the underlying ECharts instance for advanced customization

Returns

EChartsType | null

ECharts instance or null if not yet initialized

Inherited from

ReeflowChart.getChartInstance

getChartThemeOptions()

protected getChartThemeOptions(options?): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:331

Get base theme options for charts

Parameters

Parameter	Type	Description
options?	Partial<BaseThemeOptions>	Optional theme options to override defaults

Returns

EChartsOption

Base ECharts options with theme applied

Inherited from

ReeflowChart.getChartThemeOptions

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowChart.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowChart.log

refresh()

refresh(): Promise<void>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:234

Refresh data by re-executing the current query

Returns

Promise<void>

Promise that resolves when refresh is complete

Inherited from

ReeflowChart.refresh

render()

render(): TemplateResult;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:121

Render the chart component with state-based content

Returns

TemplateResult

Template result with chart canvas or state indicators

Inherited from

ReeflowChart.render

reset()

reset(includeQuery): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:242

Reset to initial state

Parameters

Parameter	Type	Default value	Description
includeQuery	boolean	false	Whether to also reset the query to null (default: false)

Returns

void

Inherited from

ReeflowChart.reset

updateChartOptions()

updateChartOptions(options, notMerge): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:320

Update chart options programmatically after initial render

Parameters

Parameter	Type	Default value	Description
options	EChartsOption	undefined	ECharts options to apply
notMerge	boolean	false	If true, replaces existing options instead of merging

Returns

void

Inherited from

ReeflowChart.updateChartOptions

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:61

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Inherited from

ReeflowChart.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:66

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Inherited from

ReeflowChart.disconnectedCallback

styles

styles

static styles: CSSResult = defaultStyles;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:41

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Inherited from

ReeflowChart.styles

updates

firstUpdated()

firstUpdated(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:73

Invoked when the element is first updated. Implement to perform one time work on the element after update.

firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Returns

void

Inherited from

ReeflowChart.firstUpdated

updated()

updated(changedProperties): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:77

Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Parameters

Parameter	Type
changedProperties	Map<string, unknown>

Returns

void

Inherited from

ReeflowChart.updated

---

abstract ReeflowBaseComponent

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:18

Abstract foundation class for all Reeflow components Provides shared functionality: provider communication, base events

Fires

reeflow-state-change - Fired when component state changes. Detail: { state: ReeflowComponentState, oldState: ReeflowComponentState }

Extends

• ReeflowEventEmitter

Extended by

• ReeflowControl
• ReeflowElement
• ReeflowContainer
• ReeflowWorkbook

Constructors

Constructor

new ReeflowBaseComponent(): ReeflowBaseComponent;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowBaseComponent

Inherited from

ReeflowEventEmitter.constructor

Other

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowEventEmitter.emitEvent

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowEventEmitter.log

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:59

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Overrides

ReeflowEventEmitter.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:87

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Overrides

ReeflowEventEmitter.disconnectedCallback

---

abstract ReeflowChart

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:34

Abstract base chart component using ECharts

Provides shared functionality for all chart types including:

• Chart lifecycle management (initialization, updates, destruction)
• Theme support with automatic updates
• Responsive resizing
• State management (loading, error, ready, empty)

Remarks

This is an abstract class. Use concrete implementations like ReeflowBarChart, ReeflowLineChart, or ReeflowPieChart.

Fires

reeflow-chart-click - Fired when a chart element (bar, line point, pie slice, etc.) is clicked

Fires

reeflow-chart-hover - Fired when the mouse hovers over a chart element

Fires

reeflow-chart-legend-toggle - Fired when a legend item is clicked to toggle series visibility

Extends

• ReeflowElement

Extended by

• ReeflowBarChart
• ReeflowLineChart
• ReeflowPieChart

Constructors

Constructor

new ReeflowChart(): ReeflowChart;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowChart

Inherited from

ReeflowElement.constructor

Other

chartInstance

protected chartInstance: EChartsType | null = null;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:54

chartOptions

protected chartOptions: EChartsOption = {};

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:57

chartType

protected chartType: TemplateComponentType = 'chart';

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:39

Chart type identifier for template rendering (icons, labels) Override in subclasses to specify the chart type

componentId?

optional componentId: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:48

Component ID from the workbook configuration Used to uniquely identify this component instance

Inherited from

ReeflowElement.componentId

errorCode

protected errorCode: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:131

Inherited from

ReeflowElement.errorCode

errorMessage

errorMessage: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:134

Inherited from

ReeflowElement.errorMessage

height?

optional height: number;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:51

Chart height in pixels (optional, defaults to container height)

label

label: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:81

Optional label displayed above the component

Inherited from

ReeflowElement.label

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowElement.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowElement.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowElement.themeStyle

width?

optional width: number;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:45

Chart width in pixels (optional, defaults to container width)

data

Get Signature

get data(): QueryResult | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:96

Returns

QueryResult | null

Set Signature

set data(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:100

Parameters

Parameter	Type
value	| QueryResult | { columns: unknown[]; rows: unknown[][]; } | null

Returns

void

Inherited from

ReeflowElement.data

query

Get Signature

get query():
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean | string[]>;
  sql: string;
  type: SQL;
}
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  dimensions?: (
     | {
     column: string;
     label?: string;
     type: "categorical";
   }
     | {
     column: string;
     date_range?: [string, string];
     granularity: "day" | "week" | "month" | "quarter" | "year";
     label?: string;
     type: "time";
  })[];
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  measures: {
     color?: string;
     column?: string;
     label?: string;
     type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum";
  }[];
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  distinct?: boolean;
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: TABLE;
}
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:68

JSONQL query to execute Can be set via attribute or inline script tag with slot=“query”

Returns

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Set Signature

set query(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:72

Parameters

Parameter

Type

value

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Returns

void

Inherited from

ReeflowElement.query

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowElement.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowElement.emitEvent

executeQuery()

protected executeQuery(): Promise<QueryResult | null>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:197

Execute the current query and update component state

Returns

Promise<QueryResult | null>

Inherited from

ReeflowElement.executeQuery

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowElement.findProvider

generateChartOptions()

abstract protected generateChartOptions(): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:305

Abstract method to generate chart-specific configuration

Must be implemented by concrete chart components to define chart type and data mapping.

Returns

EChartsOption

ECharts option object for the specific chart type

getChartAxisThemeOptions()

protected getChartAxisThemeOptions(options?): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:344

Get axis theme options for charts with axes (bar, line)

Parameters

Parameter	Type	Description
options?	Partial<AxisThemeOptions>	Optional axis theme options to override defaults

Returns

EChartsOption

ECharts options with axis theme applied

getChartInstance()

getChartInstance(): EChartsType | null;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:311

Get the underlying ECharts instance for advanced customization

Returns

EChartsType | null

ECharts instance or null if not yet initialized

getChartThemeOptions()

protected getChartThemeOptions(options?): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:331

Get base theme options for charts

Parameters

Parameter	Type	Description
options?	Partial<BaseThemeOptions>	Optional theme options to override defaults

Returns

EChartsOption

Base ECharts options with theme applied

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowElement.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowElement.log

refresh()

refresh(): Promise<void>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:234

Refresh data by re-executing the current query

Returns

Promise<void>

Promise that resolves when refresh is complete

Inherited from

ReeflowElement.refresh

render()

render(): TemplateResult;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:121

Render the chart component with state-based content

Returns

TemplateResult

Template result with chart canvas or state indicators

Overrides

ReeflowElement.render

reset()

reset(includeQuery): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:242

Reset to initial state

Parameters

Parameter	Type	Default value	Description
includeQuery	boolean	false	Whether to also reset the query to null (default: false)

Returns

void

Inherited from

ReeflowElement.reset

updateChartOptions()

updateChartOptions(options, notMerge): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:320

Update chart options programmatically after initial render

Parameters

Parameter	Type	Default value	Description
options	EChartsOption	undefined	ECharts options to apply
notMerge	boolean	false	If true, replaces existing options instead of merging

Returns

void

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:61

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Overrides

ReeflowElement.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:66

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Overrides

ReeflowElement.disconnectedCallback

styles

styles

static styles: CSSResult = defaultStyles;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:41

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Inherited from

ReeflowElement.styles

updates

firstUpdated()

firstUpdated(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:73

Invoked when the element is first updated. Implement to perform one time work on the element after update.

firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Returns

void

Overrides

ReeflowElement.firstUpdated

updated()

updated(changedProperties): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:77

Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Parameters

Parameter	Type
changedProperties	Map<string, unknown>

Returns

void

Overrides

ReeflowElement.updated

---

ReeflowContainer

Defined in: apps/sdks/core/src/components/container/ReeflowContainer.ts:27

Generic container component that renders custom content within the standard Reeflow frame structure

This component provides the standard two-layer padding structure (frame + container) with optional title, border, margin, and padding. It’s a generic container that renders any children you provide, making it useful for custom content, empty states, placeholders, or any other UI that needs the standard Reeflow styling and theme support.

The component accepts slotted content via children.

Example

<reeflow-container label="Custom Content">
  <div style="text-align: center; padding: 40px;">
    <p>Your custom content goes here</p>
  </div>
</reeflow-container>

Extends

• ReeflowBaseComponent

Constructors

Constructor

new ReeflowContainer(): ReeflowContainer;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowContainer

Inherited from

ReeflowBaseComponent.constructor

Other

label

label: string;

Defined in: apps/sdks/core/src/components/container/ReeflowContainer.ts:34

Optional label displayed at the top of the component

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowBaseComponent.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowBaseComponent.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowBaseComponent.themeStyle

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowBaseComponent.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowBaseComponent.emitEvent

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowBaseComponent.findProvider

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowBaseComponent.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowBaseComponent.log

render()

render(): TemplateResult;

Defined in: apps/sdks/core/src/components/container/ReeflowContainer.ts:40

Render the container structure with frame, optional label, and slotted content

Returns

TemplateResult

Template result with container structure

Overrides

ReeflowBaseComponent.render

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:59

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Inherited from

ReeflowBaseComponent.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:87

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Inherited from

ReeflowBaseComponent.disconnectedCallback

styles

styles

static styles: CSSResult = defaultStyles;

Defined in: apps/sdks/core/src/components/container/ReeflowContainer.ts:28

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Overrides

ReeflowBaseComponent.styles

---

ReeflowControl

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:17

Base class for all Reeflow control components

Controls are interactive UI components that capture user input and dynamically filter visualization components via JSONQL’s RF_PARAM() system.

Remarks

This class can be extended directly or via the WithQuery mixin for controls that need data loading.

Fires

reeflow-{control-type}-value-change - Fired when control value changes (e.g., reeflow-select-value-change)

Fires

reeflow-state-change - Inherited from ReeflowBaseComponent

Fires

reeflow-error - Inherited from ReeflowBaseComponent

Extends

• ReeflowBaseComponent

Extended by

• ReeflowQueryControl
• ReeflowInput

Constructors

Constructor

new ReeflowControl(): ReeflowControl;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowControl

Inherited from

ReeflowBaseComponent.constructor

Other

controlId

controlId: string;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:23

Unique identifier for this control Used in RF_PARAM() references and for registering with the provider

disabled

disabled: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:41

Whether the control is disabled

label?

optional label: string;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:29

Optional label displayed above the control

readonly

readonly: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:47

Whether the control is read-only

required

required: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:53

Whether the control is required

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowBaseComponent.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowBaseComponent.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowBaseComponent.themeStyle

value?

optional value: unknown;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:35

Current/initial value of the control

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowWorkbook.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowBaseComponent.emitEvent

emitValueChange()

protected emitValueChange(_newValue, _oldValue): void;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:80

Emit control-specific value change event Should be overridden by concrete control types to emit their specific events

Parameters

Parameter	Type	Description
_newValue	unknown	The new value of the control
_oldValue	unknown	The previous value of the control

Returns

void

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowBaseComponent.findProvider

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowBaseComponent.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowBaseComponent.log

updateValue()

protected updateValue(newValue): void;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:91

Update the control value and notify the provider Should be called by concrete implementations when the value changes

Parameters

Parameter	Type	Description
newValue	unknown	The new value to set

Returns

void

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:55

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Overrides

ReeflowBaseComponent.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:63

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Overrides

ReeflowBaseComponent.disconnectedCallback

---

abstract ReeflowElement

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:40

Abstract data-driven component class

Extends ReeflowBaseComponent with:

• JSONQL query execution
• Data fetching and caching
• Loading, error, and empty states
• Support for inline query definitions via script tags

Remarks

This is an abstract class. Use concrete implementations like ReeflowTable or chart components.

Fires

reeflow-data-loaded - Fired when data is successfully loaded. Detail: QueryResult

Fires

reeflow-error - Fired when an error occurs. Detail: { code: string, message: string }

Fires

reeflow-query-executing - Fired before query execution with original and resolved queries. Detail: { componentId: string, originalQuery: JSONQLQuery, queryWithParams: JSONQLQuery, parameterReferences: string[] }

Example

<!-- Using inline query -->
<reeflow-table label="Sales Data">
  <script type="application/json" slot="query">
    {"select": [...], "from": "sales"}
  </script>
</reeflow-table>

<!-- Using query attribute -->
<reeflow-table
  label="Sales Data"
  query='{"select": [...], "from": "sales"}'>
</reeflow-table>

Extends

• ReeflowBaseComponent

Extended by

• ReeflowChart
• ReeflowTable

Constructors

Constructor

new ReeflowElement(): ReeflowElement;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowElement

Inherited from

ReeflowBaseComponent.constructor

Other

componentId?

optional componentId: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:48

Component ID from the workbook configuration Used to uniquely identify this component instance

errorCode

protected errorCode: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:131

errorMessage

errorMessage: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:134

label

label: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:81

Optional label displayed above the component

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowBaseComponent.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowBaseComponent.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowBaseComponent.themeStyle

data

Get Signature

get data(): QueryResult | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:96

Returns

QueryResult | null

Set Signature

set data(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:100

Parameters

Parameter	Type
value	| QueryResult | { columns: unknown[]; rows: unknown[][]; } | null

Returns

void

query

Get Signature

get query():
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean | string[]>;
  sql: string;
  type: SQL;
}
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  dimensions?: (
     | {
     column: string;
     label?: string;
     type: "categorical";
   }
     | {
     column: string;
     date_range?: [string, string];
     granularity: "day" | "week" | "month" | "quarter" | "year";
     label?: string;
     type: "time";
  })[];
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  measures: {
     color?: string;
     column?: string;
     label?: string;
     type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum";
  }[];
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  distinct?: boolean;
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: TABLE;
}
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:68

JSONQL query to execute Can be set via attribute or inline script tag with slot=“query”

Returns

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Set Signature

set query(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:72

Parameters

Parameter

Type

value

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Returns

void

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowBaseComponent.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowBaseComponent.emitEvent

executeQuery()

protected executeQuery(): Promise<QueryResult | null>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:197

Execute the current query and update component state

Returns

Promise<QueryResult | null>

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowBaseComponent.findProvider

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowBaseComponent.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowBaseComponent.log

refresh()

refresh(): Promise<void>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:234

Refresh data by re-executing the current query

Returns

Promise<void>

Promise that resolves when refresh is complete

reset()

reset(includeQuery): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:242

Reset to initial state

Parameters

Parameter	Type	Default value	Description
includeQuery	boolean	false	Whether to also reset the query to null (default: false)

Returns

void

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:136

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Overrides

ReeflowBaseComponent.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:158

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Overrides

ReeflowBaseComponent.disconnectedCallback

styles

styles

static styles: CSSResult = defaultStyles;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:41

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Overrides

ReeflowBaseComponent.styles

updates

updated()

updated(changedProperties): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:186

Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Parameters

Parameter	Type
changedProperties	Map<string, unknown>

Returns

void

Overrides

ReeflowBaseComponent.updated

---

abstract ReeflowEventEmitter

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:17

Base class for all Reeflow components with event emission capabilities

Provides:

• Standardized event emission with consistent naming (reeflow-* prefix)
• Centralized logging utility
• Type-safe event handling

Remarks

All Reeflow components extend this class transitively through ReeflowBaseComponent. Events are bubbled and composed to work across shadow DOM boundaries.

Extends

• LitElement

Extended by

• ReeflowBaseComponent
• ReeflowProvider

Constructors

Constructor

new ReeflowEventEmitter(): ReeflowEventEmitter;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowEventEmitter

Inherited from

LitElement.constructor

Methods

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

---

ReeflowInput

Defined in: apps/sdks/core/src/components/controls/ReeflowInput.ts:31

Input control component for free-form text/number/date entry

Fires

reeflow-input-value-change - Fired when input value changes

Fires

reeflow-input-validation-change - Fired when validation state changes

Example

<reeflow-input
  control-id="search"
  type="text"
  label="Search"
  placeholder="Enter search term..."
  value="laptop">
</reeflow-input>

Extends

• ReeflowControl

Constructors

Constructor

new ReeflowInput(): ReeflowInput;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowInput

Inherited from

ReeflowControl.constructor

Other

controlId

controlId: string;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:23

Unique identifier for this control Used in RF_PARAM() references and for registering with the provider

Inherited from

ReeflowControl.controlId

debounce?

optional debounce: number;

Defined in: apps/sdks/core/src/components/controls/ReeflowInput.ts:71

Debounce delay in milliseconds for text inputs

disabled

disabled: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:41

Whether the control is disabled

Inherited from

ReeflowControl.disabled

label?

optional label: string;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:29

Optional label displayed above the control

Inherited from

ReeflowControl.label

max?

optional max: string;

Defined in: apps/sdks/core/src/components/controls/ReeflowInput.ts:59

Maximum value (for number/date types)

min?

optional min: string;

Defined in: apps/sdks/core/src/components/controls/ReeflowInput.ts:53

Minimum value (for number/date types)

pattern?

optional pattern: string;

Defined in: apps/sdks/core/src/components/controls/ReeflowInput.ts:65

Pattern for validation (regex string)

placeholder?

optional placeholder: string;

Defined in: apps/sdks/core/src/components/controls/ReeflowInput.ts:47

Placeholder text

readonly

readonly: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:47

Whether the control is read-only

Inherited from

ReeflowControl.readonly

required

required: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:53

Whether the control is required

Inherited from

ReeflowControl.required

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowControl.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowControl.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowControl.themeStyle

type

type: InputType = 'text';

Defined in: apps/sdks/core/src/components/controls/ReeflowInput.ts:41

Input type

value?

optional value: unknown;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:35

Current/initial value of the control

Inherited from

ReeflowControl.value

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowControl.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowControl.emitEvent

emitValueChange()

protected emitValueChange(newValue, oldValue): void;

Defined in: apps/sdks/core/src/components/controls/ReeflowInput.ts:78

Emit input-specific value change event

Parameters

Parameter	Type
newValue	unknown
oldValue	unknown

Returns

void

Overrides

ReeflowControl.emitValueChange

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowControl.findProvider

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowControl.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowControl.log

updateValue()

protected updateValue(newValue): void;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:91

Update the control value and notify the provider Should be called by concrete implementations when the value changes

Parameters

Parameter	Type	Description
newValue	unknown	The new value to set

Returns

void

Inherited from

ReeflowControl.updateValue

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:55

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Inherited from

ReeflowControl.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:63

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Inherited from

ReeflowControl.disconnectedCallback

rendering

render()

render(): TemplateResult<1>;

Defined in: apps/sdks/core/src/components/controls/ReeflowInput.ts:172

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html’s ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns

TemplateResult<1>

Overrides

ReeflowControl.render

styles

styles

static styles: CSSResult;

Defined in: apps/sdks/core/src/components/controls/ReeflowInput.ts:32

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Overrides

ReeflowControl.styles

---

ReeflowLineChart

Defined in: apps/sdks/core/src/components/charts/line/ReeflowLineChart.ts:21

Line chart component for visualizing data trends over time or categories

Automatically determines dimension (x-axis) and measure (y-axis) columns from query results. Supports multiple measures displayed as separate lines with smooth curves.

Example

<reeflow-line-chart
  connection-id="my-connection"
  query='{"select": [{"dimension": "date"}, {"measure": "revenue"}], "from": "sales"}'>
</reeflow-line-chart>

Extends

• ReeflowChart

Constructors

Constructor

new ReeflowLineChart(): ReeflowLineChart;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowLineChart

Inherited from

ReeflowChart.constructor

Other

chartInstance

protected chartInstance: EChartsType | null = null;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:54

Inherited from

ReeflowChart.chartInstance

chartOptions

protected chartOptions: EChartsOption = {};

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:57

Inherited from

ReeflowChart.chartOptions

chartType

protected chartType: "line";

Defined in: apps/sdks/core/src/components/charts/line/ReeflowLineChart.ts:22

Chart type identifier for template rendering (icons, labels) Override in subclasses to specify the chart type

Overrides

ReeflowChart.chartType

componentId?

optional componentId: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:48

Component ID from the workbook configuration Used to uniquely identify this component instance

Inherited from

ReeflowChart.componentId

errorCode

protected errorCode: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:131

Inherited from

ReeflowChart.errorCode

errorMessage

errorMessage: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:134

Inherited from

ReeflowChart.errorMessage

height?

optional height: number;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:51

Chart height in pixels (optional, defaults to container height)

Inherited from

ReeflowChart.height

label

label: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:81

Optional label displayed above the component

Inherited from

ReeflowChart.label

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowChart.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowChart.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowChart.themeStyle

width?

optional width: number;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:45

Chart width in pixels (optional, defaults to container width)

Inherited from

ReeflowChart.width

data

Get Signature

get data(): QueryResult | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:96

Returns

QueryResult | null

Set Signature

set data(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:100

Parameters

Parameter	Type
value	| QueryResult | { columns: unknown[]; rows: unknown[][]; } | null

Returns

void

Inherited from

ReeflowChart.data

query

Get Signature

get query():
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean | string[]>;
  sql: string;
  type: SQL;
}
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  dimensions?: (
     | {
     column: string;
     label?: string;
     type: "categorical";
   }
     | {
     column: string;
     date_range?: [string, string];
     granularity: "day" | "week" | "month" | "quarter" | "year";
     label?: string;
     type: "time";
  })[];
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  measures: {
     color?: string;
     column?: string;
     label?: string;
     type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum";
  }[];
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  distinct?: boolean;
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: TABLE;
}
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:68

JSONQL query to execute Can be set via attribute or inline script tag with slot=“query”

Returns

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Set Signature

set query(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:72

Parameters

Parameter

Type

value

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Returns

void

Inherited from

ReeflowChart.query

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowChart.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowChart.emitEvent

executeQuery()

protected executeQuery(): Promise<QueryResult | null>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:197

Execute the current query and update component state

Returns

Promise<QueryResult | null>

Inherited from

ReeflowChart.executeQuery

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowChart.findProvider

generateChartOptions()

protected generateChartOptions(): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/line/ReeflowLineChart.ts:28

Generate ECharts configuration for line chart

Returns

EChartsOption

ECharts option object with line chart configuration

Overrides

ReeflowChart.generateChartOptions

getChartAxisThemeOptions()

protected getChartAxisThemeOptions(options?): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:344

Get axis theme options for charts with axes (bar, line)

Parameters

Parameter	Type	Description
options?	Partial<AxisThemeOptions>	Optional axis theme options to override defaults

Returns

EChartsOption

ECharts options with axis theme applied

Inherited from

ReeflowChart.getChartAxisThemeOptions

getChartInstance()

getChartInstance(): EChartsType | null;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:311

Get the underlying ECharts instance for advanced customization

Returns

EChartsType | null

ECharts instance or null if not yet initialized

Inherited from

ReeflowChart.getChartInstance

getChartThemeOptions()

protected getChartThemeOptions(options?): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:331

Get base theme options for charts

Parameters

Parameter	Type	Description
options?	Partial<BaseThemeOptions>	Optional theme options to override defaults

Returns

EChartsOption

Base ECharts options with theme applied

Inherited from

ReeflowChart.getChartThemeOptions

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowChart.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowChart.log

refresh()

refresh(): Promise<void>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:234

Refresh data by re-executing the current query

Returns

Promise<void>

Promise that resolves when refresh is complete

Inherited from

ReeflowChart.refresh

render()

render(): TemplateResult;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:121

Render the chart component with state-based content

Returns

TemplateResult

Template result with chart canvas or state indicators

Inherited from

ReeflowChart.render

reset()

reset(includeQuery): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:242

Reset to initial state

Parameters

Parameter	Type	Default value	Description
includeQuery	boolean	false	Whether to also reset the query to null (default: false)

Returns

void

Inherited from

ReeflowChart.reset

updateChartOptions()

updateChartOptions(options, notMerge): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:320

Update chart options programmatically after initial render

Parameters

Parameter	Type	Default value	Description
options	EChartsOption	undefined	ECharts options to apply
notMerge	boolean	false	If true, replaces existing options instead of merging

Returns

void

Inherited from

ReeflowChart.updateChartOptions

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:61

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Inherited from

ReeflowChart.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:66

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Inherited from

ReeflowChart.disconnectedCallback

styles

styles

static styles: CSSResult = defaultStyles;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:41

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Inherited from

ReeflowChart.styles

updates

firstUpdated()

firstUpdated(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:73

Invoked when the element is first updated. Implement to perform one time work on the element after update.

firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Returns

void

Inherited from

ReeflowChart.firstUpdated

updated()

updated(changedProperties): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:77

Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Parameters

Parameter	Type
changedProperties	Map<string, unknown>

Returns

void

Inherited from

ReeflowChart.updated

---

ReeflowPieChart

Defined in: apps/sdks/core/src/components/charts/pie/ReeflowPieChart.ts:25

Pie chart component for visualizing proportional data as circular segments

Requires at least two columns: a label column (for segment names) and a measure column (for values). Automatically detects column roles or uses the first two columns as label and value.

Example

<reeflow-pie-chart
  connection-id="my-connection"
  query='{"select": [{"label": "product"}, {"measure": "market_share"}], "from": "products"}'>
</reeflow-pie-chart>

Extends

• ReeflowChart

Constructors

Constructor

new ReeflowPieChart(): ReeflowPieChart;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowPieChart

Inherited from

ReeflowChart.constructor

Other

chartInstance

protected chartInstance: EChartsType | null = null;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:54

Inherited from

ReeflowChart.chartInstance

chartOptions

protected chartOptions: EChartsOption = {};

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:57

Inherited from

ReeflowChart.chartOptions

chartType

protected chartType: "pie";

Defined in: apps/sdks/core/src/components/charts/pie/ReeflowPieChart.ts:26

Chart type identifier for template rendering (icons, labels) Override in subclasses to specify the chart type

Overrides

ReeflowChart.chartType

componentId?

optional componentId: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:48

Component ID from the workbook configuration Used to uniquely identify this component instance

Inherited from

ReeflowChart.componentId

errorCode

protected errorCode: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:131

Inherited from

ReeflowChart.errorCode

errorMessage

errorMessage: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:134

Inherited from

ReeflowChart.errorMessage

height?

optional height: number;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:51

Chart height in pixels (optional, defaults to container height)

Inherited from

ReeflowChart.height

label

label: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:81

Optional label displayed above the component

Inherited from

ReeflowChart.label

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowChart.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowChart.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowChart.themeStyle

width?

optional width: number;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:45

Chart width in pixels (optional, defaults to container width)

Inherited from

ReeflowChart.width

data

Get Signature

get data(): QueryResult | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:96

Returns

QueryResult | null

Set Signature

set data(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:100

Parameters

Parameter	Type
value	| QueryResult | { columns: unknown[]; rows: unknown[][]; } | null

Returns

void

Inherited from

ReeflowChart.data

query

Get Signature

get query():
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean | string[]>;
  sql: string;
  type: SQL;
}
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  dimensions?: (
     | {
     column: string;
     label?: string;
     type: "categorical";
   }
     | {
     column: string;
     date_range?: [string, string];
     granularity: "day" | "week" | "month" | "quarter" | "year";
     label?: string;
     type: "time";
  })[];
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  measures: {
     color?: string;
     column?: string;
     label?: string;
     type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum";
  }[];
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  distinct?: boolean;
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: TABLE;
}
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:68

JSONQL query to execute Can be set via attribute or inline script tag with slot=“query”

Returns

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Set Signature

set query(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:72

Parameters

Parameter

Type

value

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Returns

void

Inherited from

ReeflowChart.query

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowChart.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowChart.emitEvent

executeQuery()

protected executeQuery(): Promise<QueryResult | null>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:197

Execute the current query and update component state

Returns

Promise<QueryResult | null>

Inherited from

ReeflowChart.executeQuery

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowChart.findProvider

generateChartOptions()

protected generateChartOptions(): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/pie/ReeflowPieChart.ts:32

Generate ECharts configuration for pie chart

Returns

EChartsOption

ECharts option object with pie chart configuration

Overrides

ReeflowChart.generateChartOptions

getChartAxisThemeOptions()

protected getChartAxisThemeOptions(options?): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:344

Get axis theme options for charts with axes (bar, line)

Parameters

Parameter	Type	Description
options?	Partial<AxisThemeOptions>	Optional axis theme options to override defaults

Returns

EChartsOption

ECharts options with axis theme applied

Inherited from

ReeflowChart.getChartAxisThemeOptions

getChartInstance()

getChartInstance(): EChartsType | null;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:311

Get the underlying ECharts instance for advanced customization

Returns

EChartsType | null

ECharts instance or null if not yet initialized

Inherited from

ReeflowChart.getChartInstance

getChartThemeOptions()

protected getChartThemeOptions(options?): EChartsOption;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:331

Get base theme options for charts

Parameters

Parameter	Type	Description
options?	Partial<BaseThemeOptions>	Optional theme options to override defaults

Returns

EChartsOption

Base ECharts options with theme applied

Inherited from

ReeflowChart.getChartThemeOptions

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowChart.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowChart.log

refresh()

refresh(): Promise<void>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:234

Refresh data by re-executing the current query

Returns

Promise<void>

Promise that resolves when refresh is complete

Inherited from

ReeflowChart.refresh

render()

render(): TemplateResult;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:121

Render the chart component with state-based content

Returns

TemplateResult

Template result with chart canvas or state indicators

Inherited from

ReeflowChart.render

reset()

reset(includeQuery): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:242

Reset to initial state

Parameters

Parameter	Type	Default value	Description
includeQuery	boolean	false	Whether to also reset the query to null (default: false)

Returns

void

Inherited from

ReeflowChart.reset

updateChartOptions()

updateChartOptions(options, notMerge): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:320

Update chart options programmatically after initial render

Parameters

Parameter	Type	Default value	Description
options	EChartsOption	undefined	ECharts options to apply
notMerge	boolean	false	If true, replaces existing options instead of merging

Returns

void

Inherited from

ReeflowChart.updateChartOptions

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:61

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Inherited from

ReeflowChart.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:66

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Inherited from

ReeflowChart.disconnectedCallback

styles

styles

static styles: CSSResult = defaultStyles;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:41

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Inherited from

ReeflowChart.styles

updates

firstUpdated()

firstUpdated(): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:73

Invoked when the element is first updated. Implement to perform one time work on the element after update.

firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Returns

void

Inherited from

ReeflowChart.firstUpdated

updated()

updated(changedProperties): void;

Defined in: apps/sdks/core/src/components/charts/ReeflowChart.ts:77

Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Parameters

Parameter	Type
changedProperties	Map<string, unknown>

Returns

void

Inherited from

ReeflowChart.updated

---

ReeflowProvider

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:24

Provider component that manages authentication context for child Reeflow components Acts as a context provider in the component tree

Fires

reeflow-auth-change - Fired when authentication context changes. Detail: { authToken: string }

Fires

reeflow-theme-change - Fired when theme or theme mode changes. Detail: { theme: string, themeMode: 'light' | 'dark' }

Fires

reeflow-control-value-change - Fired when any control value changes. Detail: { controlId: string, value: unknown, previousValue: unknown }

Extends

• ReeflowEventEmitter

Constructors

Constructor

new ReeflowProvider(): ReeflowProvider;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowProvider

Inherited from

ReeflowEventEmitter.constructor

Other

authHeader

authHeader: string = 'X-Embed-Authorization';

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:68

The HTTP header name to use for authentication. Defaults to ‘X-Embed-Authorization’ for embedded user tokens. Use ‘Authorization’ for standard Bearer tokens (e.g., Clerk JWT).

authToken

authToken: string;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:60

baseUrl

baseUrl: any = DEFAULT_API_BASE_URL;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:71

debug

debug: boolean = false;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:74

mock

mock: boolean = false;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:77

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:80

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:83

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:101

CSS variables for theme customization (passed as inline style string)

Note: This property is named themeStyle instead of style because React has special handling for the style prop (it expects an object and calls .setProperty() on it). Using style directly would conflict with React’s built-in style handling and cause errors.

When this property changes, we sync it to the actual HTML style attribute in the updated() lifecycle method so CSS variables are applied to the element.

Example

<ReeflowProvider themeStyle="--color-primary: #ff0000; --color-secondary: #00ff00" />

sdkId

Get Signature

get protected sdkId(): string | undefined;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:41

SDK identifier for API tracking (e.g., “core”, “react”).

This is intentionally accessed via data attributes (data-sdk-id) rather than Lit properties for the following reasons:

1. Internal use only: SDK info is not meant to be set by end users. Data attributes don’t appear in component API documentation or IDE autocomplete.

2. Per-provider isolation: When a page uses both React and Core SDKs simultaneously, each provider instance can have its own SDK identity. The React SDK wrapper sets data-sdk-id="react" on its provider, while direct Core usage defaults to “core”.

3. Build-time injection: SDK wrappers (like React) can inject these values at build time without exposing them as configurable props to consumers.

Returns

string | undefined

sdkVersion

Get Signature

get protected sdkVersion(): string | undefined;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:50

SDK version for API tracking (semver format: x.y.z).

See sdkId getter for documentation on why this uses data attributes.

Returns

string | undefined

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowEventEmitter.emitEvent

getApiClient()

getApiClient(): ApiClient;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:210

Get the ApiClient instance for this provider

Returns

ApiClient

getAuthContext()

getAuthContext(): {
  authToken: string;
};

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:235

Get authentication context

Returns

{
  authToken: string;
}

Name	Type	Defined in
authToken	string	apps/sdks/core/src/components/provider/ReeflowProvider.ts:235

getControlValue()

getControlValue(controlId): unknown;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:307

Get a control’s current value

Parameters

Parameter	Type	Description
controlId	string	Unique identifier for the control

Returns

unknown

The current value or undefined if not found

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowEventEmitter.log

registerControl()

registerControl(controlId, control): void;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:267

Register a control with this provider

Parameters

Parameter	Type	Description
controlId	string	Unique identifier for the control
control	ReeflowControl	The control instance

Returns

void

resolveParameters()

resolveParameters(controlIds): Record<string, string | number | boolean | string[]>;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:317

Resolve multiple control values by their IDs Used for RF_PARAM() resolution in queries

Parameters

Parameter	Type	Description
controlIds	string[]	Array of control IDs to resolve

Returns

Record<string, string | number | boolean | string[]>

Record of control ID to value mappings (arrays preserved for multi-select)

setControlValue()

setControlValue(controlId, value): void;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:290

Set a control’s value and emit generic control-value-change event

Parameters

Parameter	Type	Description
controlId	string	Unique identifier for the control
value	unknown	The new value

Returns

void

unregisterControl()

unregisterControl(controlId): void;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:280

Unregister a control from this provider

Parameters

Parameter	Type	Description
controlId	string	Unique identifier for the control

Returns

void

updateAuth()

updateAuth(authToken, authHeader?): void;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:244

Update authentication context

Parameters

Parameter	Type
authToken	string
authHeader?	string

Returns

void

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:187

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Overrides

ReeflowEventEmitter.connectedCallback

rendering

render()

render(): TemplateResult<1>;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:350

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html’s ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns

TemplateResult<1>

Overrides

ReeflowEventEmitter.render

styles

styles

static styles: CSSResult;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:53

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Overrides

ReeflowEventEmitter.styles

updates

firstUpdated()

firstUpdated(): void;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:112

Invoked when the element is first updated. Implement to perform one time work on the element after update.

firstUpdated() {
  this.renderRoot.getElementById('my-text-area').focus();
}

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Returns

void

Overrides

ReeflowEventEmitter.firstUpdated

updated()

updated(changedProperties): void;

Defined in: apps/sdks/core/src/components/provider/ReeflowProvider.ts:117

Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Parameters

Parameter	Type
changedProperties	Map<string, unknown>

Returns

void

Overrides

ReeflowEventEmitter.updated

---

ReeflowQueryControl

Defined in: apps/sdks/core/src/components/base/ReeflowQueryControl.ts:28

Base class for control components that need to load data from the server

Extends ReeflowControl with:

• JSONQL query execution
• Data fetching and caching
• Support for inline query definitions via script tags
• RF_PARAM() parameter resolution for cascading controls

Remarks

Use this class for controls that need to load options or data from the server, such as select dropdowns with dynamic options.

Fires

reeflow-query-executing - Fired before query execution with original and resolved queries

Example

class ReeflowSelect extends ReeflowQueryControl {
  // Has access to query, queryData, and executeQuery()
}

Extends

• ReeflowControl

Extended by

• ReeflowSelect

Constructors

Constructor

new ReeflowQueryControl(): ReeflowQueryControl;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowQueryControl

Inherited from

ReeflowControl.constructor

Other

controlId

controlId: string;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:23

Unique identifier for this control Used in RF_PARAM() references and for registering with the provider

Inherited from

ReeflowControl.controlId

disabled

disabled: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:41

Whether the control is disabled

Inherited from

ReeflowControl.disabled

label?

optional label: string;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:29

Optional label displayed above the control

Inherited from

ReeflowControl.label

readonly

readonly: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:47

Whether the control is read-only

Inherited from

ReeflowControl.readonly

required

required: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:53

Whether the control is required

Inherited from

ReeflowControl.required

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowControl.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowControl.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowControl.themeStyle

value?

optional value: unknown;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:35

Current/initial value of the control

Inherited from

ReeflowControl.value

query

Get Signature

get query():
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean | string[]>;
  sql: string;
  type: SQL;
}
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  dimensions?: (
     | {
     column: string;
     label?: string;
     type: "categorical";
   }
     | {
     column: string;
     date_range?: [string, string];
     granularity: "day" | "week" | "month" | "quarter" | "year";
     label?: string;
     type: "time";
  })[];
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  measures: {
     color?: string;
     column?: string;
     label?: string;
     type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum";
  }[];
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  distinct?: boolean;
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: TABLE;
}
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowQueryControl.ts:40

JSONQL query to execute for loading data Can be set via attribute or inline script tag with slot=“query”

Returns

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Set Signature

set query(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowQueryControl.ts:44

Parameters

Parameter

Type

value

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Returns

void

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowControl.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowControl.emitEvent

emitValueChange()

protected emitValueChange(_newValue, _oldValue): void;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:80

Emit control-specific value change event Should be overridden by concrete control types to emit their specific events

Parameters

Parameter	Type	Description
_newValue	unknown	The new value of the control
_oldValue	unknown	The previous value of the control

Returns

void

Inherited from

ReeflowControl.emitValueChange

executeQuery()

protected executeQuery(): Promise<QueryResult | null>;

Defined in: apps/sdks/core/src/components/base/ReeflowQueryControl.ts:91

Execute the current query and update component state Resolves RF_PARAM() references using control values from the provider

Returns

Promise<QueryResult | null>

Promise that resolves with the query result or null on error

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowControl.findProvider

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowControl.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowControl.log

updateValue()

protected updateValue(newValue): void;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:91

Update the control value and notify the provider Should be called by concrete implementations when the value changes

Parameters

Parameter	Type	Description
newValue	unknown	The new value to set

Returns

void

Inherited from

ReeflowControl.updateValue

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowQueryControl.ts:62

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Overrides

ReeflowControl.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowQueryControl.ts:80

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Overrides

ReeflowControl.disconnectedCallback

---

ReeflowSelect

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:48

Select control component for single or multi-selection from predefined options

Supports both static options (via children) and server-loaded options (via JSONQL query).

Fires

reeflow-select-value-change - Fired when selected value changes

Fires

reeflow-select-options-loaded - Fired when options are loaded from server

Example

<!-- Static options -->
<reeflow-select control-id="status" label="Status">
  <option value="active" selected>Active</option>
  <option value="inactive">Inactive</option>
</reeflow-select>

<!-- Server-loaded options -->
<reeflow-select control-id="region" label="Region" value="north-america">
  <script type="application/json" slot="query">
    {
      "type": "table",
      "columns": [
        { "column": "regions.id" },
        { "column": "regions.name" }
      ]
    }
  </script>
</reeflow-select>

Extends

• ReeflowQueryControl

Constructors

Constructor

new ReeflowSelect(): ReeflowSelect;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowSelect

Inherited from

ReeflowQueryControl.constructor

Other

controlId

controlId: string;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:23

Unique identifier for this control Used in RF_PARAM() references and for registering with the provider

Inherited from

ReeflowQueryControl.controlId

disabled

disabled: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:41

Whether the control is disabled

Inherited from

ReeflowQueryControl.disabled

distinct

distinct: boolean = false;

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:80

Remove duplicate options based on value When true, only unique values will be shown in the select

label?

optional label: string;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:29

Optional label displayed above the control

Inherited from

ReeflowQueryControl.label

labelColumn?

optional labelColumn: string;

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:73

Column name to use as option label When specified, overrides default behavior (second column = label)

multiple

multiple: boolean = false;

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:59

Enable multi-select mode When true, value becomes an array

options

options: SelectOption[] = [];

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:87

Available options for the select Can be set externally to update options without re-mounting the component.

readonly

readonly: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:47

Whether the control is read-only

Inherited from

ReeflowQueryControl.readonly

required

required: boolean = false;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:53

Whether the control is required

Inherited from

ReeflowQueryControl.required

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowQueryControl.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowQueryControl.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowQueryControl.themeStyle

value?

optional value: unknown;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:35

Current/initial value of the control

Inherited from

ReeflowQueryControl.value

valueColumn?

optional valueColumn: string;

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:66

Column name to use as option value When specified, overrides default behavior (first column = value)

query

Get Signature

get query():
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean | string[]>;
  sql: string;
  type: SQL;
}
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  dimensions?: (
     | {
     column: string;
     label?: string;
     type: "categorical";
   }
     | {
     column: string;
     date_range?: [string, string];
     granularity: "day" | "week" | "month" | "quarter" | "year";
     label?: string;
     type: "time";
  })[];
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  measures: {
     color?: string;
     column?: string;
     label?: string;
     type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum";
  }[];
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  distinct?: boolean;
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: TABLE;
}
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowQueryControl.ts:40

JSONQL query to execute for loading data Can be set via attribute or inline script tag with slot=“query”

Returns

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Set Signature

set query(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowQueryControl.ts:44

Parameters

Parameter

Type

value

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Returns

void

Inherited from

ReeflowQueryControl.query

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowQueryControl.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowQueryControl.emitEvent

emitValueChange()

protected emitValueChange(newValue, oldValue): void;

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:278

Emit select-specific value change event

Parameters

Parameter	Type
newValue	unknown
oldValue	unknown

Returns

void

Overrides

ReeflowQueryControl.emitValueChange

executeQuery()

protected executeQuery(): Promise<QueryResult | null>;

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:164

Override executeQuery to map results to options

Returns

Promise<QueryResult | null>

Overrides

ReeflowQueryControl.executeQuery

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowQueryControl.findProvider

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowQueryControl.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowQueryControl.log

updateValue()

protected updateValue(newValue): void;

Defined in: apps/sdks/core/src/components/base/ReeflowControl.ts:91

Update the control value and notify the provider Should be called by concrete implementations when the value changes

Parameters

Parameter	Type	Description
newValue	unknown	The new value to set

Returns

void

Inherited from

ReeflowQueryControl.updateValue

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:92

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Overrides

ReeflowQueryControl.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:124

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Overrides

ReeflowQueryControl.disconnectedCallback

rendering

render()

render(): TemplateResult<1>;

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:303

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html’s ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns

TemplateResult<1>

Overrides

ReeflowQueryControl.render

styles

styles

static styles: CSSResult;

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:49

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Overrides

ReeflowQueryControl.styles

---

ReeflowTable

Defined in: apps/sdks/core/src/components/table/ReeflowTable.ts:60

Table component for displaying tabular data from Reeflow queries

Native implementation with the following features:

• Sorting: Click column headers to sort data (ascending/descending)
• Pagination: Navigate through large datasets with page controls
• Search: Filter rows across all columns with live search
• Responsive: Adapts to different screen sizes
• Themeable: Supports multiple color themes

Examples

<reeflow-table
  connection-id="my-connection"
  query='{"select": ["id", "name", "email"], "from": "users"}'>
</reeflow-table>

<reeflow-table
  label="User Directory"
  connection-id="my-connection"
  query='{"select": ["id", "name", "email"], "from": "users"}'
  page-size="50"
  search
  search-placeholder="Search users..."
  sort>
</reeflow-table>

<reeflow-table
  connection-id="my-connection"
  query='{"select": [...], "from": "table"}'
  .pagination=${false}>
</reeflow-table>

Fires

reeflow-table-row-click - Fired when a table row is clicked. Detail: { row: unknown[] }

Fires

reeflow-table-sort-change - Fired when a column is sorted. Detail: { column: string, direction: 'asc' | 'desc' }

Fires

reeflow-table-page-change - Fired when the page changes. Detail: { page: number }

Fires

reeflow-table-search-change - Fired when search term changes. Detail: { searchTerm: string }

Extends

• ReeflowElement

Constructors

Constructor

new ReeflowTable(): ReeflowTable;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowTable

Inherited from

ReeflowElement.constructor

Other

componentId?

optional componentId: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:48

Component ID from the workbook configuration Used to uniquely identify this component instance

Inherited from

ReeflowElement.componentId

errorCode

protected errorCode: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:131

Inherited from

ReeflowElement.errorCode

errorMessage

errorMessage: string | null = null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:134

Inherited from

ReeflowElement.errorMessage

label

label: string;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:81

Optional label displayed above the component

Inherited from

ReeflowElement.label

pageSize

pageSize: number = 20;

Defined in: apps/sdks/core/src/components/table/ReeflowTable.ts:71

Number of rows to display per page

Default

20

pagination

pagination: boolean = false;

Defined in: apps/sdks/core/src/components/table/ReeflowTable.ts:92

Enable pagination

Default

false

search

search: boolean = false;

Defined in: apps/sdks/core/src/components/table/ReeflowTable.ts:85

Enable search functionality

Default

false

searchPlaceholder

searchPlaceholder: string = 'Search...';

Defined in: apps/sdks/core/src/components/table/ReeflowTable.ts:99

Placeholder text for search input

Default

"Search..."

sort

sort: boolean = false;

Defined in: apps/sdks/core/src/components/table/ReeflowTable.ts:78

Enable sorting on columns

Default

false

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowElement.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowElement.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowElement.themeStyle

data

Get Signature

get data(): QueryResult | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:96

Returns

QueryResult | null

Set Signature

set data(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:100

Parameters

Parameter	Type
value	| QueryResult | { columns: unknown[]; rows: unknown[][]; } | null

Returns

void

Inherited from

ReeflowElement.data

query

Get Signature

get query():
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean | string[]>;
  sql: string;
  type: SQL;
}
  | {
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  dimensions?: (
     | {
     column: string;
     label?: string;
     type: "categorical";
   }
     | {
     column: string;
     date_range?: [string, string];
     granularity: "day" | "week" | "month" | "quarter" | "year";
     label?: string;
     type: "time";
  })[];
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  measures: {
     color?: string;
     column?: string;
     label?: string;
     type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum";
  }[];
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?:   | {
     config: {
        access_key_id: string;
        catalog: string;
        database?: string;
        output_location?: string;
        region: string;
        secret_access_key: string;
        session_token?: string;
        workgroup: string;
     };
     type: "athena";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "postgresql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
     };
     type: "mysql";
   }
     | {
     config: {
        database: string;
        host: string;
        password: string;
        port: number;
        schema?: string;
        ssl: boolean;
        user: string;
     };
     type: "redshift";
   }
     | {
     config: {
        dataset?: string;
        location: string;
        project_id: string;
        service_account_key: string;
     };
     type: "bigquery";
   }
     | {
     config: {
        account: string;
        database: string;
        role?: string;
        schema?: string;
        token: string;
        user: string;
        warehouse: string;
     };
     type: "snowflake";
   }
     | {
     config: {
        database: string;
        password: string;
        url: string;
        user: string;
     };
     type: "clickhouse";
   }
     | {
     config: {
        base_url:   | "https://api.tinybird.co"
           | "https://api.europe-west2.gcp.tinybird.co"
           | "https://api.us-east.tinybird.co"
           | "https://api.northamerica-northeast2.gcp.tinybird.co"
           | "https://api.eu-central-1.aws.tinybird.co"
           | "https://api.eu-west-1.aws.tinybird.co"
           | "https://api.us-east.aws.tinybird.co"
           | "https://api.us-west-2.aws.tinybird.co";
        token: string;
     };
     type: "tinybird";
   }
     | {
     config: {
        catalog: string;
        client_id: string;
        client_secret: string;
        host: string;
        schema?: string;
        warehouse_id: string;
     };
     type: "databricks";
   };
  connection_id?: string;
  distinct?: boolean;
  filters?: (
     | {
     column: string;
     operator: "gt" | "gte" | "lt" | "lte";
     values: string[];
   }
     | {
     column: string;
     operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters";
     values: string[];
   }
     | {
     column: string;
     operator: "in" | "equals";
     values: string[];
   }
     | {
     column: string;
     operator: "starts_with" | "contains" | "ends_with";
     values: string[];
   }
     | {
     column: string;
     operator: "between";
     values: string[];
   }
     | {
     column: string;
     operator: "is_null";
     values: string[];
   }
     | {
     column: string;
     operator: "today" | "this_month" | "this_year" | "this_quarter";
     values: string[];
  })[];
  joins?: {
     from: string;
     from_column: string;
     to: string;
     to_column: string;
     type: "inner" | "left" | "right" | "full";
  }[];
  limit?: string | number;
  offset?: string | number;
  order_by?: {
     column: string;
     direction: "asc" | "desc";
  }[];
  parameters?: Record<string, string | number | boolean | string[]>;
  type: TABLE;
}
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:68

JSONQL query to execute Can be set via attribute or inline script tag with slot=“query”

Returns

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Set Signature

set query(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:72

Parameters

Parameter

Type

value

| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; } | null

Returns

void

Inherited from

ReeflowElement.query

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowElement.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowElement.emitEvent

executeQuery()

protected executeQuery(): Promise<QueryResult | null>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:197

Execute the current query and update component state

Returns

Promise<QueryResult | null>

Inherited from

ReeflowElement.executeQuery

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowElement.findProvider

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowElement.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowElement.log

refresh()

refresh(): Promise<void>;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:234

Refresh data by re-executing the current query

Returns

Promise<void>

Promise that resolves when refresh is complete

Inherited from

ReeflowElement.refresh

render()

render(): TemplateResult;

Defined in: apps/sdks/core/src/components/table/ReeflowTable.ts:242

Render the table component

Returns

TemplateResult

Template result with table structure

Overrides

ReeflowElement.render

reset()

reset(includeQuery): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:242

Reset to initial state

Parameters

Parameter	Type	Default value	Description
includeQuery	boolean	false	Whether to also reset the query to null (default: false)

Returns

void

Inherited from

ReeflowElement.reset

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:136

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Inherited from

ReeflowElement.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:158

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Inherited from

ReeflowElement.disconnectedCallback

styles

styles

static styles: CSSResult;

Defined in: apps/sdks/core/src/components/table/ReeflowTable.ts:61

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Overrides

ReeflowElement.styles

updates

updated()

updated(changedProperties): void;

Defined in: apps/sdks/core/src/components/base/ReeflowElement.ts:186

Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Parameters

Parameter	Type
changedProperties	Map<string, unknown>

Returns

void

Inherited from

ReeflowElement.updated

---

ReeflowWorkbook

Defined in: apps/sdks/core/src/components/workbook/ReeflowWorkbook.ts:36

Workbook component for displaying complete embedded workbooks

Loads a workbook by ID and displays all its pages with their components. Supports theming, multiple pages, and various component types.

Examples

<reeflow-workbook workbook-id="workbook_abc123"></reeflow-workbook>

<reeflow-workbook
  workbook-id="workbook_abc123"
  theme="ocean"
  theme-mode="dark">
</reeflow-workbook>

Fires

reeflow-data-loaded - Fired when workbook data is successfully loaded. Detail: EmbeddedWorkbook

Fires

reeflow-workbook-page-change - Fired when the user switches to a different page. Detail: { page: number, previousPage: number }

Fires

reeflow-error - Fired when an error occurs. Detail: { code: string, message: string }

Extends

• ReeflowBaseComponent

Constructors

Constructor

new ReeflowWorkbook(): ReeflowWorkbook;

Defined in: node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/development/reactive-element.d.ts:527

Returns

ReeflowWorkbook

Inherited from

ReeflowBaseComponent.constructor

Other

theme

theme: "default" | "ocean" = DEFAULT_THEME;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:39

Inherited from

ReeflowBaseComponent.theme

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:42

Inherited from

ReeflowBaseComponent.themeMode

themeStyle?

optional themeStyle: string;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:45

Inherited from

ReeflowBaseComponent.themeStyle

workbookId

workbookId: string;

Defined in: apps/sdks/core/src/components/workbook/ReeflowWorkbook.ts:46

ID of the workbook to load

state

Get Signature

get state(): ReeflowComponentState;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:22

Returns

ReeflowComponentState

Set Signature

set state(value): void;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:26

Parameters

Parameter	Type
value	ReeflowComponentState

Returns

void

Inherited from

ReeflowBaseComponent.state

emitEvent()

protected emitEvent<T>(type, data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:42

Emit a standardized Reeflow custom event

Events are prefixed with reeflow- and configured to bubble through shadow DOM.

Type Parameters

Type Parameter
T extends ReeflowEventType

Parameters

Parameter	Type	Description
type	T	Event type (becomes reeflow-${type})
data?	unknown	Event detail payload

Returns

void

Example

this.emitEvent('data-loaded', { rows: 100 });
// Dispatches event: 'reeflow-data-loaded' with detail: { rows: 100 }

Inherited from

ReeflowBaseComponent.emitEvent

findProvider()

protected findProvider():
  | ReeflowProvider
  | null;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:140

Find ReeflowProvider in the component tree with caching

Returns

| ReeflowProvider | null

Inherited from

ReeflowBaseComponent.findProvider

getProviderOrThrow()

protected getProviderOrThrow(): ReeflowProvider;

Defined in: apps/sdks/core/src/components/base/ReeflowBaseComponent.ts:174

Get ReeflowProvider or throw an error if not found

Returns

ReeflowProvider

Throws

Error if ReeflowProvider is not found in the component tree

Inherited from

ReeflowBaseComponent.getProviderOrThrow

log()

protected log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/components/base/ReeflowEventEmitter.ts:24

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	Log level (log, error, warn, info, debug)
message	string	Message to log
data?	unknown	Optional additional data to include in log

Returns

void

Inherited from

ReeflowBaseComponent.log

refresh()

refresh(): Promise<void>;

Defined in: apps/sdks/core/src/components/workbook/ReeflowWorkbook.ts:157

Refresh workbook data

Returns

Promise<void>

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/workbook/ReeflowWorkbook.ts:73

Invoked when the component is added to the document’s DOM.

In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

connectedCallback() {
  super.connectedCallback();
  addEventListener('keydown', this._handleKeydown);
}

Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

Returns

void

Overrides

ReeflowBaseComponent.connectedCallback

disconnectedCallback()

disconnectedCallback(): void;

Defined in: apps/sdks/core/src/components/workbook/ReeflowWorkbook.ts:88

Invoked when the component is removed from the document’s DOM.

This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('keydown', this._handleKeydown);
}

An element may be re-connected after being disconnected.

Returns

void

Overrides

ReeflowBaseComponent.disconnectedCallback

rendering

render()

render(): TemplateResult<1>;

Defined in: apps/sdks/core/src/components/workbook/ReeflowWorkbook.ts:488

Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html’s ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

Returns

TemplateResult<1>

Overrides

ReeflowBaseComponent.render

styles

styles

static styles: CSSResult;

Defined in: apps/sdks/core/src/components/workbook/ReeflowWorkbook.ts:37

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn’t support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include ‘unsafe-inline’ or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page’s HTML, before loading application code:

<script>
  // Generated and unique per request:
  window.litNonce = 'a1b2c3d4';
</script>

Nocollapse

Overrides

ReeflowBaseComponent.styles

updates

updated()

updated(changedProperties): void;

Defined in: apps/sdks/core/src/components/workbook/ReeflowWorkbook.ts:96

Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

Setting properties inside this method will trigger the element to update again after this update cycle completes.

Parameters

Parameter	Type
changedProperties	Map<string, unknown>

Returns

void

Overrides

ReeflowBaseComponent.updated

Interfaces

ApiError

Defined in: apps/sdks/core/src/types.ts:84

API error structure Matches the standard NestJS error response format

Properties

Property	Type	Description	Defined in
code?	string	Optional application-specific error code (e.g., ‘VALIDATION_ERROR’)	apps/sdks/core/src/types.ts:92
error?	string	Error type (e.g., ‘Bad Request’, ‘Unauthorized’, ‘Not Found’)	apps/sdks/core/src/types.ts:90
message	string	Human-readable error message	apps/sdks/core/src/types.ts:88
statusCode	number	HTTP status code (e.g., 400, 401, 404, 500)	apps/sdks/core/src/types.ts:86

---

ColumnInfo

Defined in: packages/types/dist/index.d.mts:47116

Column information Metadata about query result columns

Properties

Property	Type	Description	Defined in
color?	string	Optional color metadata associated with the column	packages/types/dist/index.d.mts:47126
label?	string	Optional label associated with the column	packages/types/dist/index.d.mts:47124
name	string	Column name	packages/types/dist/index.d.mts:47118
role?	ColumnRole	Optional role hint for chart visualization	packages/types/dist/index.d.mts:47122
type	string	Column data type	packages/types/dist/index.d.mts:47120

---

QueryResult

Defined in: packages/types/dist/index.d.mts:47092

Query execution result Shared type for all query results across the Reeflow ecosystem

Properties

Property	Type	Description	Defined in
columns	ColumnInfo[]	Column metadata	packages/types/dist/index.d.mts:47096
compile_time_ms	number	Compilation time in milliseconds (parsing + analysis + validation + transformation)	packages/types/dist/index.d.mts:47102
compiled_sql	string	Compiled SQL query after placeholder replacement and validation	packages/types/dist/index.d.mts:47106
execution_time_ms	number	Execution time in milliseconds	packages/types/dist/index.d.mts:47100
row_count	number	Number of rows returned	packages/types/dist/index.d.mts:47098
rows	unknown[][]	Array of rows, where each row is an array of column values	packages/types/dist/index.d.mts:47094
sql	string	Original SQL query before compilation	packages/types/dist/index.d.mts:47104

---

ReeflowEvent

Defined in: apps/sdks/core/src/types.ts:227

Typed Reeflow event

Extends

• CustomEvent

Type Parameters

Type Parameter
T extends ReeflowEventType

Properties

Property	Modifier	Type	Description	Overrides	Defined in
detail	readonly	ReeflowEventDetail[T]	Returns any custom data event was created with. Typically used for synthetic events. MDN Reference	CustomEvent.detail	apps/sdks/core/src/types.ts:229
type	readonly	`reeflow-${T}`	Returns the type of event, e.g. “click”, “hashchange”, or “submit”. MDN Reference	CustomEvent.type	apps/sdks/core/src/types.ts:228

---

ReeflowEventDetail

Defined in: apps/sdks/core/src/types.ts:178

Event detail mapping for type safety

This interface maps each Reeflow event type to its corresponding payload type. All events are prefixed with reeflow- when dispatched (e.g., reeflow-data-loaded).

Example

// Listen to a typed event
element.addEventListener('reeflow-data-loaded', (e: ReeflowEvent<'data-loaded'>) => {
  console.log(e.detail); // Type: QueryResult | EmbeddedWorkbook
});

Properties

Property	Type	Description	Defined in
auth-change	{ authToken: string; }	Provider authentication token changed	apps/sdks/core/src/types.ts:180
auth-change.authToken	string	-	apps/sdks/core/src/types.ts:180
chart-click	ChartClickDetail	User clicked on a chart data point	apps/sdks/core/src/types.ts:205
chart-hover	ChartHoverDetail	User hovered over a chart data point	apps/sdks/core/src/types.ts:207
chart-legend-toggle	ChartLegendToggleDetail	User toggled a chart legend item visibility	apps/sdks/core/src/types.ts:209
control-value-change	{ controlId: string; previousValue: unknown; value: unknown; }	Control value changed (generic event from provider)	apps/sdks/core/src/types.ts:213
control-value-change.controlId	string	-	apps/sdks/core/src/types.ts:213
control-value-change.previousValue	unknown	-	apps/sdks/core/src/types.ts:213
control-value-change.value	unknown	-	apps/sdks/core/src/types.ts:213
data-loaded	| QueryResult | { description?: Record<string, string> | null; name: z.ZodRecord<z.ZodString, z.ZodString>; pages: { columns: number; content: ( | { config: { [key: string]: unknown; columns?: string[]; filters?: (… | … | … | … | … | … | …)[]; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "table"; } | { config: { [key: string]: unknown; dimension?: | { column: string; label?: … | …; type: "categorical"; } | { column: string; date_range?: … | …; granularity: … | … | … | … | …; label?: … | …; type: "time"; }; filters?: (… | … | … | … | … | … | …)[]; measures?: { color?: …; column?: …; label?: …; type: …; }[]; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "bar"; } | { config: { [key: string]: unknown; dimension?: | { column: string; label?: … | …; type: "categorical"; } | { column: string; date_range?: … | …; granularity: … | … | … | … | …; label?: … | …; type: "time"; }; filters?: (… | … | … | … | … | … | …)[]; measures?: { color?: …; column?: …; label?: …; type: …; }[]; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "line"; } | { config: { [key: string]: unknown; filters?: (… | … | … | … | … | … | …)[]; label_field?: string; value_field?: string; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "pie"; } | { config: { [key: string]: unknown; controlId: string; defaultValue?: string; disabled: boolean; max?: number; maxLength?: number; min?: number; minLength?: number; pattern?: string; placeholder?: string; required: boolean; type: "number" | "date" | "text" | "url" | "email"; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "input"; } | { config: { [key: string]: unknown; controlId: string; defaultValue?: string; disabled: boolean; distinct: boolean; filters?: (… | … | … | … | … | … | …)[]; labelColumn?: string; multiple: boolean; options: { label: string; value: string; }[]; required: boolean; valueColumn?: string; }; id: string; label?: string; layout: { height: number; width: number; x: number; y: number; }; query?: | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; parameters?: Record<…, …>; sql: string; type: SQL; } | { connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; dimensions?: …[]; filters?: …[]; joins?: …[]; limit?: string | number; measures: { color?: …; column?: …; label?: …; type: …; }[]; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: AGGREGATE; } | { columns?: …[]; connection?: | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; } | { config: …; type: …; }; connection_id?: string; distinct?: boolean; filters?: …[]; joins?: …[]; limit?: string | number; offset?: string | number; order_by?: …[]; parameters?: Record<…, …>; type: TABLE; }; source?: { connection_id: string; database?: string; schema?: string; table: string; }; type: "select"; })[]; description?: Record<string, string> | null; max_rows: number; name: z.ZodRecord<z.ZodString, z.ZodString>; order: number; row_height: number; }[]; theme_css?: string; }	Data was successfully loaded (QueryResult for tables/charts, EmbeddedWorkbook for workbooks)	apps/sdks/core/src/types.ts:188
error	ApiError	An error occurred during component operation	apps/sdks/core/src/types.ts:186
input-validation-change	{ controlId: string; errors: string[]; isValid: boolean; }	Input control validation state changed	apps/sdks/core/src/types.ts:221
input-validation-change.controlId	string	-	apps/sdks/core/src/types.ts:221
input-validation-change.errors	string[]	-	apps/sdks/core/src/types.ts:221
input-validation-change.isValid	boolean	-	apps/sdks/core/src/types.ts:221
input-value-change	{ controlId: string; previousValue: unknown; value: unknown; }	Input control value changed	apps/sdks/core/src/types.ts:219
input-value-change.controlId	string	-	apps/sdks/core/src/types.ts:219
input-value-change.previousValue	unknown	-	apps/sdks/core/src/types.ts:219
input-value-change.value	unknown	-	apps/sdks/core/src/types.ts:219
query-executing	{ componentId: string; originalQuery: | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; }; parameterReferences: string[]; queryWithParams: | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; }; }	Query is about to be executed with resolved parameters (for debugging/visualization)	apps/sdks/core/src/types.ts:190
query-executing.componentId	string	-	apps/sdks/core/src/types.ts:191
query-executing.originalQuery	| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; }	-	apps/sdks/core/src/types.ts:192
query-executing.parameterReferences	string[]	-	apps/sdks/core/src/types.ts:194
query-executing.queryWithParams	| { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; parameters?: Record<string, string | number | boolean | string[]>; sql: string; type: SQL; } | { connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; dimensions?: ( | { column: string; label?: string; type: "categorical"; } | { column: string; date_range?: [string, string]; granularity: "day" | "week" | "month" | "quarter" | "year"; label?: string; type: "time"; })[]; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; measures: { color?: string; column?: string; label?: string; type: "avg" | "count" | "count_distinct" | "max" | "min" | "sum"; }[]; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: AGGREGATE; } | { columns?: ( | { label?: string; name: string; } | { label?: string; raw: string; })[]; connection?: | { config: { access_key_id: string; catalog: string; database?: string; output_location?: string; region: string; secret_access_key: string; session_token?: string; workgroup: string; }; type: "athena"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "postgresql"; } | { config: { database: string; host: string; password: string; port: number; ssl: boolean; user: string; }; type: "mysql"; } | { config: { database: string; host: string; password: string; port: number; schema?: string; ssl: boolean; user: string; }; type: "redshift"; } | { config: { dataset?: string; location: string; project_id: string; service_account_key: string; }; type: "bigquery"; } | { config: { account: string; database: string; role?: string; schema?: string; token: string; user: string; warehouse: string; }; type: "snowflake"; } | { config: { database: string; password: string; url: string; user: string; }; type: "clickhouse"; } | { config: { base_url: | "https://api.tinybird.co" | "https://api.europe-west2.gcp.tinybird.co" | "https://api.us-east.tinybird.co" | "https://api.northamerica-northeast2.gcp.tinybird.co" | "https://api.eu-central-1.aws.tinybird.co" | "https://api.eu-west-1.aws.tinybird.co" | "https://api.us-east.aws.tinybird.co" | "https://api.us-west-2.aws.tinybird.co"; token: string; }; type: "tinybird"; } | { config: { catalog: string; client_id: string; client_secret: string; host: string; schema?: string; warehouse_id: string; }; type: "databricks"; }; connection_id?: string; distinct?: boolean; filters?: ( | { column: string; operator: "gt" | "gte" | "lt" | "lte"; values: string[]; } | { column: string; operator: "last_n_days" | "last_n_months" | "last_n_years" | "last_n_quarters"; values: string[]; } | { column: string; operator: "in" | "equals"; values: string[]; } | { column: string; operator: "starts_with" | "contains" | "ends_with"; values: string[]; } | { column: string; operator: "between"; values: string[]; } | { column: string; operator: "is_null"; values: string[]; } | { column: string; operator: "today" | "this_month" | "this_year" | "this_quarter"; values: string[]; })[]; joins?: { from: string; from_column: string; to: string; to_column: string; type: "inner" | "left" | "right" | "full"; }[]; limit?: string | number; offset?: string | number; order_by?: { column: string; direction: "asc" | "desc"; }[]; parameters?: Record<string, string | number | boolean | string[]>; type: TABLE; }	-	apps/sdks/core/src/types.ts:193
select-options-loaded	{ controlId: string; options: { label: string; value: unknown; }[]; }	Select control options loaded from server	apps/sdks/core/src/types.ts:217
select-options-loaded.controlId	string	-	apps/sdks/core/src/types.ts:217
select-options-loaded.options	{ label: string; value: unknown; }[]	-	apps/sdks/core/src/types.ts:217
select-value-change	{ controlId: string; previousValue: unknown; value: unknown; }	Select control value changed	apps/sdks/core/src/types.ts:215
select-value-change.controlId	string	-	apps/sdks/core/src/types.ts:215
select-value-change.previousValue	unknown	-	apps/sdks/core/src/types.ts:215
select-value-change.value	unknown	-	apps/sdks/core/src/types.ts:215
state-change	{ oldState: ReeflowComponentState; state: ReeflowComponentState; }	Component state changed (loading, ready, error, etc.)	apps/sdks/core/src/types.ts:184
state-change.oldState	ReeflowComponentState	-	apps/sdks/core/src/types.ts:184
state-change.state	ReeflowComponentState	-	apps/sdks/core/src/types.ts:184
table-page-change	{ page: number; }	Table page changed (pagination)	apps/sdks/core/src/types.ts:201
table-page-change.page	number	-	apps/sdks/core/src/types.ts:201
table-row-click	{ row: Record<string, unknown> | unknown[]; }	User clicked on a table row	apps/sdks/core/src/types.ts:197
table-row-click.row	Record<string, unknown> | unknown[]	-	apps/sdks/core/src/types.ts:197
table-search-change	{ searchTerm: string; }	Table search term changed	apps/sdks/core/src/types.ts:203
table-search-change.searchTerm	string	-	apps/sdks/core/src/types.ts:203
table-sort-change	{ column: string; direction: "asc" | "desc"; }	Table sorting changed	apps/sdks/core/src/types.ts:199
table-sort-change.column	string	-	apps/sdks/core/src/types.ts:199
table-sort-change.direction	"asc" | "desc"	-	apps/sdks/core/src/types.ts:199
theme-change	ThemeChanged	Theme or theme mode changed	apps/sdks/core/src/types.ts:182
workbook-page-change	{ page: number; previousPage: number; }	Workbook page/tab changed	apps/sdks/core/src/types.ts:211
workbook-page-change.page	number	-	apps/sdks/core/src/types.ts:211
workbook-page-change.previousPage	number	-	apps/sdks/core/src/types.ts:211

---

SelectOption

Defined in: apps/sdks/core/src/components/controls/ReeflowSelect.ts:11

Option item for ReeflowSelect

Properties

Property	Type	Defined in
label	string	apps/sdks/core/src/components/controls/ReeflowSelect.ts:13
selected?	boolean	apps/sdks/core/src/components/controls/ReeflowSelect.ts:14
value	unknown	apps/sdks/core/src/components/controls/ReeflowSelect.ts:12

Type Aliases

ConnectionConfig

type ConnectionConfig = z.infer<typeof ConnectionConfigSchema>;

Defined in: packages/types/dist/index.d.mts:1465

---

DataSourceType

type DataSourceType = typeof DataSourceTypes[number];

Defined in: packages/types/dist/index.d.mts:1253

---

EmbeddedWorkbook

type EmbeddedWorkbook = z.infer<typeof EmbeddedWorkbookSchema>;

Defined in: packages/types/dist/index.d.mts:16568

---

InputType

type InputType = "text" | "number" | "date" | "daterange" | "email" | "url";

Defined in: apps/sdks/core/src/components/controls/ReeflowInput.ts:11

Input type for ReeflowInput

---

JSONQLQuery

type JSONQLQuery = z.infer<typeof JSONQLSchema>;

Defined in: packages/types/dist/index.d.mts:47064

---

ReeflowComponentState

type ReeflowComponentState = "initializing" | "loading" | "error" | "ready" | "empty";

Defined in: apps/sdks/core/src/types.ts:36

State type for Reeflow components

---

ReeflowEventType

type ReeflowEventType =
  | "auth-change"
  | "theme-change"
  | "state-change"
  | "error"
  | "data-loaded"
  | "query-executing"
  | "table-row-click"
  | "table-sort-change"
  | "table-page-change"
  | "table-search-change"
  | "chart-click"
  | "chart-hover"
  | "chart-legend-toggle"
  | "workbook-page-change"
  | "control-value-change"
  | "select-value-change"
  | "select-options-loaded"
  | "input-value-change"
  | "input-validation-change";

Defined in: apps/sdks/core/src/types.ts:98

Reeflow event types

---

ThemeMode

type ThemeMode = "light" | "dark" | "auto";

Defined in: apps/sdks/core/src/styles/themes/index.ts:28

---

ThemeName

type ThemeName = keyof typeof themes;

Defined in: apps/sdks/core/src/styles/themes/index.ts:25

---

ThemeTokens

type ThemeTokens = z.infer<typeof themeTokensSchema>;

Defined in: packages/themes/dist/index.d.mts:246

TypeScript type inferred from Zod schema

Variables

availableThemeModes

const availableThemeModes: ThemeMode[];

Defined in: apps/sdks/core/src/styles/themes/index.ts:34

---

availableThemes

const availableThemes: ThemeName[];

Defined in: apps/sdks/core/src/styles/themes/index.ts:31

---

ThemesCSS

const ThemesCSS: {
  default: string;
  ocean: string;
};

Defined in: apps/sdks/core/src/styles/themes/index.ts:19

Type Declaration

Name	Type	Default value	Defined in
default	string	defaultTheme	apps/sdks/core/src/styles/themes/index.ts:20
ocean	string	oceanTheme	apps/sdks/core/src/styles/themes/index.ts:21

---

version

const version: "0.0.1" = '0.0.1';

Defined in: apps/sdks/core/src/index.ts:25

Functions

log()

function log(
   level,
   message,
   data?): void;

Defined in: apps/sdks/core/src/utils/logger.ts:14

Log a message with Reeflow prefix

Parameters

Parameter	Type	Description
level	LogLevel	The log level (log, error, warn, info, debug)
message	string	The message to log
data?	unknown	Optional additional data to log

Returns

void