Skip to main content

Embeddable UI

Propel's embeddable UI is an open-source toolkit for building frontend data applications on ClickHouse such as dashboards, reports, and data visualizations.

Propel React UI Kit

Storybook |  GitHub

Installation​

To install the Propel Embeddable UI components, run the following command:

yarn add @propeldata/ui-kit

Utility components​

The utility components are a set of React hooks and components that take care of common frontend boilerplate code for common tasks such as authentication and data fetching.

Access Token Provider​

The AccessTokenProvider allows you to provide a function that fetches an access token from your backend. By using this function, the provider will serve the fetched access token to all of its child components and will automatically refresh the token when it expires.

Access Token Provider
Propel UI Kit Access Token ProviderAuthentication | GitHub

Query Hooks for 3rd-party charting libraries​

Query hooks fetch data from the Propel Data-Serving APIs from your frontend application. They are designed to work with any 3rd-party charting library such as Echarts, Chart.js, or D3.js.

SQL Query HookCounter Query HookDataGrid Query Hook
SQL Query HookStorybook | GitHubCounter Query HookStorybook | GitHubData Grid Query HookStorybook | GitHub
Leaderboard Query HookTime Series Query HookTop Values Query Hook
Leaderboard Query HookStorybook | GitHubTime Series Query HookStorybook | GitHubTop Values Query HookStorybook | GitHub

Data visualization components​

The data visualization components are designed to work with the Propel Data-Serving APIs and provide a simple way to visualize your data.

Counter​

The Counter React component provides a visualization for the Counter API that returns a single value summarizing a metric over a period of time.

Single value
Data table example
Storybook | GitHub

Data Grid​

The Data Grid React component provides a visualization for the Data Grid API that returns individual records from a Data Pool with the convenience of built-in pagination, filtering, and sorting.

Data Grid
Coming soonRead the RFC

Leaderboard​

The Leaderboard React component provides visualizations for the Leaderboard API that returns rankings or 'top N' lists in different categories.

Single dimension barSingle dimension table
Data table exampleStorybook | GitHubData table exampleStorybook | GitHub
Single dimension table with value barMultidimensional bar
Data table exampleStorybook | GitHubData table exampleStorybook | GitHub
Multidimensional tableMultidimensional table with value bar
Data table exampleStorybook | GitHubData table exampleStorybook | GitHub

Time Series​

The Time Series React component provides visualizations for the Time Series API that returns a time series of a metric over a period of time.

LineLine area
Time Series Line ComponentStorybook | GitHubTime Series Line Area ComponentStorybook | GitHub
Bar
Time Series Bar ComponentStorybook | GitHub

Pie Charts​

The Pie Chart React component provides Pie Chart type visualizations for the Leaderboard API that returns rankings or 'top N' lists in different categories.

PieDoughnut
Pie Chart ComponentStorybook | GitHubDoughnut Chart ComponentStorybook | GitHub

UI control components​

The UI control components make it easy to add interactivity to your data applications.

Filters​

The Filter React component provides an easy way to add filters to your dashboards and reports using the Top Values API.

Filter
Filter ComponentStorybook | GitHub