We’re delighted to announce a preview of Propel UI Kit. Propel UI Kit is a set of customer-facing components that render data visualizations.

Why we’re launching the Propel UI Kit

Historically, it’s been difficult to take analytics visualizations generated from proprietary tools and expose them on your front end in a way that’s consistent with your app experience and configurable and extendable to exactly what you need. Many tools expose front-end experiences via embedding, which gives limited control when rendering what you need in your web and mobile experience. Being closed-source also means that you cannot have full control over what exactly is running on your front end. With UI Kit, we wanted to address those issues: 1) the components are easy to use and easy to customize to give a native look and feel to whatever your app experiences are. 2) They’re open source under the MIT license, so you can use them in whatever way you see fit, customize them, and help improve them via submitting issues and pull requests. The components are useful even if you don’t use Propel.

How the components work

The components are standard React components. Underlying the components they use chartJS to handle the actual chart rendering.

The components work in two ways:

1. Static mode: By passing your data to the components to visualize.
2. Connected mode: Automatically connect to Propel’s high-performance data fetching backend to retrieve the data required.

In the case where the components connect to Propel, each component in the Propel UI Kit is connected to one metric and can automatically fetch that metric's data, making it easy for users to create visualizations without writing custom code. Additionally, the components come with a variety of props that can be used to configure queries based on our Propel GraphQL API. This enables users to customize the components to suit their specific needs.

The Propel UI Kit allows developers to apply their styles and custom error messages, giving them complete control over the look and feel of their data visualizations

Available today are the Time Series, Counter, and Leaderboard components. You can see a preview of all three in action at propelify.propeldata.com or by visiting the React storybook with various examples.

Rendering a TimeSeries visualization and then customizing its styles

See the code working in CodeSandbox:

Above, we are rendering a static TimeSeries component, where we want to render sales by day in a line chart and we supply the data ourselves.

By customizing the styles, we can drastically alter the rendering of the component. For example, these styles will switch the above to a spark line-like style. All we need to do is define a set of custom styles:

  const styles = {
    styles: {
      line: {
        tension: 0.1,
        borderColor: '#17B897',
        borderWidth: 3
      },
      point: {
        style: false
      },
      canvas: {
        width: 100,
        height: 45,
        backgroundColor: 'transparent',
        hideGridLines: true
      }
    }

If we apply those to the component we get this:

Getting started

Check out the UI Kit GitHub readme for full details of how the components work, or go straight to the page for each component to learn more about each of them:

• Time Series
• Counter
• Leaderboard

If you’d prefer to start from a full app example, we have a sample NextJS React app available that uses the new components.

To get started with Propel, you can sign up here. If you’d like to learn more about Propel, we’d love to speak with you; click here to book a demo today!