@reeflow/core

Enumerations

QueryType

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

Query types for JSONQL queries

Enumeration Members

Enumeration Member	Value	Defined in
`AGGREGATE`	`"aggregate"`	packages/types/dist/index.d.mts:20055
`SQL`	`"sql"`	packages/types/dist/index.d.mts:20053
`TABLE`	`"table"`	packages/types/dist/index.d.mts:20054

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:47

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:117

Inherited from

ReeflowChart.errorCode

errorMessage

errorMessage: string | null = null;

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

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:67

Optional label displayed above the component

Inherited from

ReeflowChart.label

query

query:
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean>;
  sql: string;
  type: SQL;
}
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: TABLE;
}
  | null = null;

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

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

Inherited from

ReeflowChart.query

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:82

Returns

QueryResult | null

Set Signature

set data(value): void;

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

Parameters

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

Returns

void

Inherited from

ReeflowChart.data

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:178

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:238

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:246

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

static styles: CSSResult = defaultStyles;

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

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

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.

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.

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

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:47

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:117

Inherited from

ReeflowElement.errorCode

errorMessage

errorMessage: string | null = null;

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

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:67

Optional label displayed above the component

Inherited from

ReeflowElement.label

query

query:
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean>;
  sql: string;
  type: SQL;
}
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: TABLE;
}
  | null = null;

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

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

Inherited from

ReeflowElement.query

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:82

Returns

QueryResult | null

Set Signature

set data(value): void;

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

Parameters

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

Returns

void

Inherited from

ReeflowElement.data

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:178

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:238

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:246

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.

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.

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

An element may be re-connected after being disconnected.

Returns

void

Overrides

ReeflowElement.disconnectedCallback

styles

static styles: CSSResult = defaultStyles;

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

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:

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.

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.

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

An element may be re-connected after being disconnected.

Returns

void

Inherited from

ReeflowBaseComponent.disconnectedCallback

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:

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

`abstract` ReeflowElement

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

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 }

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

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:47

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:117

errorMessage

errorMessage: string | null = null;

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

label

label: string;

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

Optional label displayed above the component

query

query:
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean>;
  sql: string;
  type: SQL;
}
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: TABLE;
}
  | null = null;

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

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

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:82

Returns

QueryResult | null

Set Signature

set data(value): void;

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

Parameters

Parameter	Type
`value`	\| `QueryResult` \| { `columns`: `unknown`[]; `rows`: `unknown`[][]; } \| `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

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

executeQuery()

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

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

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:238

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:246

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:122

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

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:143

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

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

An element may be re-connected after being disconnected.

Returns

void

Overrides

ReeflowBaseComponent.disconnectedCallback

styles

static styles: CSSResult = defaultStyles;

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

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:

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:167

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

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

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:47

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:117

Inherited from

ReeflowChart.errorCode

errorMessage

errorMessage: string | null = null;

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

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:67

Optional label displayed above the component

Inherited from

ReeflowChart.label

query

query:
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean>;
  sql: string;
  type: SQL;
}
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: TABLE;
}
  | null = null;

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

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

Inherited from

ReeflowChart.query

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:82

Returns

QueryResult | null

Set Signature

set data(value): void;

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

Parameters

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

Returns

void

Inherited from

ReeflowChart.data

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:178

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:238

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:246

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.

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.

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

An element may be re-connected after being disconnected.

Returns

void

Inherited from

ReeflowChart.disconnectedCallback

styles

static styles: CSSResult = defaultStyles;

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

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:

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:47

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:117

Inherited from

ReeflowChart.errorCode

errorMessage

errorMessage: string | null = null;

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

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:67

Optional label displayed above the component

Inherited from

ReeflowChart.label

query

query:
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean>;
  sql: string;
  type: SQL;
}
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: TABLE;
}
  | null = null;

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

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

Inherited from

ReeflowChart.query

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:82

Returns

QueryResult | null

Set Signature

set data(value): void;

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

Parameters

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

Returns

void

Inherited from

ReeflowChart.data

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:178

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:238

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:246

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.

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.

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

An element may be re-connected after being disconnected.

Returns

void

Inherited from

ReeflowChart.disconnectedCallback

styles

static styles: CSSResult = defaultStyles;

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

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:

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:22

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' }

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:66

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:58

baseUrl

baseUrl: any = DEFAULT_API_BASE_URL;

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

debug

debug: boolean = false;

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

mock

mock: boolean = false;

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

theme

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

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

themeMode

themeMode: ThemeMode = DEFAULT_THEME_MODE;

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

themeStyle?

optional themeStyle: string;

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

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:39

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:

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.
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”.
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:48

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:201

Get the ApiClient instance for this provider

Returns

ApiClient

getAuthContext()

getAuthContext(): {
  authToken: string;
};

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

Get authentication context

Returns

{
  authToken: string;
}

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

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

updateAuth()

updateAuth(authToken, authHeader?): void;

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

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:178

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

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:253

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

static styles: CSSResult;

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

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:

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:103

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:108

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

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:47

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:117

Inherited from

ReeflowElement.errorCode

errorMessage

errorMessage: string | null = null;

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

Inherited from

ReeflowElement.errorMessage

label

label: string;

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

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

pagination

pagination: boolean = false;

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

Enable pagination

Default

false

query

query:
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  connection_id?: string;
  parameters?: Record<string, string | number | boolean>;
  sql: string;
  type: SQL;
}
  | {
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: AGGREGATE;
}
  | {
  columns?: (
     | {
     label?: string;
     name: string;
   }
     | {
     label?: string;
     raw: string;
  })[];
  connection?: {
     config:   | {
        database: string;
        host: string;
        password: string;
        port: number;
        ssl: boolean;
        user: string;
      }
        | {
        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: "pg" | "tb";
  };
  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>;
  type: TABLE;
}
  | null = null;

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

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

Inherited from

ReeflowElement.query

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:82

Returns

QueryResult | null

Set Signature

set data(value): void;

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

Parameters

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

Returns

void

Inherited from

ReeflowElement.data

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:178

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:238

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:246

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:122

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

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:143

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

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

An element may be re-connected after being disconnected.

Returns

void

Inherited from

ReeflowElement.disconnectedCallback

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:

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:167

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:35

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:45

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:156

Refresh workbook data

Returns

Promise<void>

lifecycle

connectedCallback()

connectedCallback(): void;

Defined in: apps/sdks/core/src/components/workbook/ReeflowWorkbook.ts:72

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

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:87

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

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:389

Returns

TemplateResult<1>

Overrides

ReeflowBaseComponent.render

styles

static styles: CSSResult;

Defined in: apps/sdks/core/src/components/workbook/ReeflowWorkbook.ts:36

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:

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:95

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:20663

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:20673
`label?`	`string`	Optional label associated with the column	packages/types/dist/index.d.mts:20671
`name`	`string`	Column name	packages/types/dist/index.d.mts:20665
`role?`	`ColumnRole`	Optional role hint for chart visualization	packages/types/dist/index.d.mts:20669
`type`	`string`	Column data type	packages/types/dist/index.d.mts:20667

QueryResult

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

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:20643
`compile_time_ms`	`number`	Compilation time in milliseconds (parsing + analysis + validation + transformation)	packages/types/dist/index.d.mts:20649
`compiled_sql`	`string`	Compiled SQL query after placeholder replacement and validation	packages/types/dist/index.d.mts:20653
`execution_time_ms`	`number`	Execution time in milliseconds	packages/types/dist/index.d.mts:20647
`row_count`	`number`	Number of rows returned	packages/types/dist/index.d.mts:20645
`rows`	`unknown`[][]	Array of rows, where each row is an array of column values	packages/types/dist/index.d.mts:20641
`sql`	`string`	Original SQL query before compilation	packages/types/dist/index.d.mts:20651

ReeflowEvent

Defined in: apps/sdks/core/src/types.ts:204

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:206
`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:205

ReeflowEventDetail

Defined in: apps/sdks/core/src/types.ts:172

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:174
`auth-change.authToken`	`string`	-	apps/sdks/core/src/types.ts:174
`chart-click`	`ChartClickDetail`	User clicked on a chart data point	apps/sdks/core/src/types.ts:192
`chart-hover`	`ChartHoverDetail`	User hovered over a chart data point	apps/sdks/core/src/types.ts:194
`chart-legend-toggle`	`ChartLegendToggleDetail`	User toggled a chart legend item visibility	apps/sdks/core/src/types.ts:196
`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`[]; }; `id`: `string`; `label?`: `string`; `layout`: { `height`: `number`; `width`: `number`; `x`: `number`; `y`: `number`; }; `query?`: \| { `connection?`: { `config`: …; `type`: …; }; `connection_id?`: `string`; `parameters?`: `Record`<…, …>; `sql`: `string`; `type`: `SQL`; } \| { `connection?`: { `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`: …; }; `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"`; }; `measures?`: { `color?`: …; `column?`: …; `label?`: …; `type`: …; }[]; }; `id`: `string`; `label?`: `string`; `layout`: { `height`: `number`; `width`: `number`; `x`: `number`; `y`: `number`; }; `query?`: \| { `connection?`: { `config`: …; `type`: …; }; `connection_id?`: `string`; `parameters?`: `Record`<…, …>; `sql`: `string`; `type`: `SQL`; } \| { `connection?`: { `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`: …; }; `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"`; }; `measures?`: { `color?`: …; `column?`: …; `label?`: …; `type`: …; }[]; }; `id`: `string`; `label?`: `string`; `layout`: { `height`: `number`; `width`: `number`; `x`: `number`; `y`: `number`; }; `query?`: \| { `connection?`: { `config`: …; `type`: …; }; `connection_id?`: `string`; `parameters?`: `Record`<…, …>; `sql`: `string`; `type`: `SQL`; } \| { `connection?`: { `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`: …; }; `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`; `label_field?`: `string`; `value_field?`: `string`; }; `id`: `string`; `label?`: `string`; `layout`: { `height`: `number`; `width`: `number`; `x`: `number`; `y`: `number`; }; `query?`: \| { `connection?`: { `config`: …; `type`: …; }; `connection_id?`: `string`; `parameters?`: `Record`<…, …>; `sql`: `string`; `type`: `SQL`; } \| { `connection?`: { `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`: …; }; `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"`; })[]; `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:182
`error`	`ApiError`	An error occurred during component operation	apps/sdks/core/src/types.ts:180
`state-change`	{ `oldState`: `ReeflowComponentState`; `state`: `ReeflowComponentState`; }	Component state changed (loading, ready, error, etc.)	apps/sdks/core/src/types.ts:178
`state-change.oldState`	`ReeflowComponentState`	-	apps/sdks/core/src/types.ts:178
`state-change.state`	`ReeflowComponentState`	-	apps/sdks/core/src/types.ts:178
`table-page-change`	{ `page`: `number`; }	Table page changed (pagination)	apps/sdks/core/src/types.ts:188
`table-page-change.page`	`number`	-	apps/sdks/core/src/types.ts:188
`table-row-click`	{ `row`: `Record`<`string`, `unknown`> \| `unknown`[]; }	User clicked on a table row	apps/sdks/core/src/types.ts:184
`table-row-click.row`	`Record`<`string`, `unknown`> \| `unknown`[]	-	apps/sdks/core/src/types.ts:184
`table-search-change`	{ `searchTerm`: `string`; }	Table search term changed	apps/sdks/core/src/types.ts:190
`table-search-change.searchTerm`	`string`	-	apps/sdks/core/src/types.ts:190
`table-sort-change`	{ `column`: `string`; `direction`: `"asc"` \| `"desc"`; }	Table sorting changed	apps/sdks/core/src/types.ts:186
`table-sort-change.column`	`string`	-	apps/sdks/core/src/types.ts:186
`table-sort-change.direction`	`"asc"` \| `"desc"`	-	apps/sdks/core/src/types.ts:186
`theme-change`	`ThemeChanged`	Theme or theme mode changed	apps/sdks/core/src/types.ts:176
`workbook-page-change`	{ `page`: `number`; `previousPage`: `number`; }	Workbook page/tab changed	apps/sdks/core/src/types.ts:198
`workbook-page-change.page`	`number`	-	apps/sdks/core/src/types.ts:198
`workbook-page-change.previousPage`	`number`	-	apps/sdks/core/src/types.ts:198

Type Aliases

ConnectionConfig

type ConnectionConfig = z.infer<typeof ConnectionConfigSchema>;

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

DataSourceType

type DataSourceType = typeof DataSourceTypes[number];

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

EmbeddedWorkbook

type EmbeddedWorkbook = z.infer<typeof EmbeddedWorkbookSchema>;

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

JSONQLQuery

type JSONQLQuery = z.infer<typeof JSONQLSchema>;

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

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"
  | "table-row-click"
  | "table-sort-change"
  | "table-page-change"
  | "table-search-change"
  | "chart-click"
  | "chart-hover"
  | "chart-legend-toggle"
  | "workbook-page-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

DEFAULT_TEST_AUTH_TOKEN

const DEFAULT_TEST_AUTH_TOKEN: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0ZXN0IiwiaXNzIjoicmVlZmxvdyIsImF1ZCI6ImRhdGEtYXBpIiwiZXhwIjoxNzg5ODQ4MDIzLCJpYXQiOjE3NTgzMzA3NjksImp0aSI6InNlc3NfNmt0QWVnQ0ZTMUc3NjByZUx5WHJOZzVMZmdqIiwib3JnYW5pemF0aW9uX2lkIjoib3JnXzMyTmM1czh4OHBmcnJaWkl2VUtOR2xacFdBZSJ9.ydGlYK7qa0-gMkPGXI5tDwygMeMRmYkQWIDeXONQOFo" = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0ZXN0IiwiaXNzIjoicmVlZmxvdyIsImF1ZCI6ImRhdGEtYXBpIiwiZXhwIjoxNzg5ODQ4MDIzLCJpYXQiOjE3NTgzMzA3NjksImp0aSI6InNlc3NfNmt0QWVnQ0ZTMUc3NjByZUx5WHJOZzVMZmdqIiwib3JnYW5pemF0aW9uX2lkIjoib3JnXzMyTmM1czh4OHBmcnJaWkl2VUtOR2xacFdBZSJ9.ydGlYK7qa0-gMkPGXI5tDwygMeMRmYkQWIDeXONQOFo';

Defined in: apps/sdks/core/src/config.ts:19

Default test auth token for development and testing This is a valid JWT token for testing with the Reeflow API Uses organization_id ‘demo-org’ matching the SPA demo environment

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:27

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