Skip to main content

React UI Kit

Propel's React UI Kit is an open-source toolkit for building frontend data applications such as dashboards, reports, and data visualizations using the Propel Data-Serving APIs.

Propel React UI Kit

Installation

To install the Propel UI Kit 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