Exploring the Tremor dashboard UI library

Source code can be found here.

Getting started

We will create a new React.js project to get up and running quickly. We will also install the Tremor library.

$ yarn create react-app demo-tremor-ui-components --template typescript
$ cd demo-tremor-ui-components/
$ yarn add @tremor/react
copy

At this stage, the React.js app and Tremor package are installed and ready to run.

We can start up the project by running yarn start and head to http://localhost:3000.

Our first component

To check things are working, we will edit src/App.tsx and add the basic card.

import React from "react";
import { Card, Text, Metric, Flex, ProgressBar } from "@tremor/react";
import "@tremor/react/dist/esm/tremor.css";

const IntroCard = () => (
  <Card maxWidth="max-w-sm">
    <Text>Sales</Text>
    <Metric>$ 71,465</Metric>
    <Flex marginTop="mt-4">
      <Text>32% of annual target</Text>
      <Text>$ 225,000</Text>
    </Flex>
    <ProgressBar percentageValue={32} marginTop="mt-2" />
  </Card>
);

function App() {
  return <IntroCard />;
}

export default App;
copy

At this point, you should see the UI working as expected.

Card on the UI

Exploring some chart components

The cool thing about Tremor is how quickly you can get great looking data visualization up and running.

Let's look at this with the AreaChart, BarChart and LineChart components.

The first thing we need to do for this is create some data.

In src/data.ts, add the following:

export const chartData = [
  {
    date: "Jan 22",
    SemiAnalysis: 2890,
    "The Pragmatic Engineer": 2338,
  },
  {
    date: "Feb 22",
    SemiAnalysis: 2756,
    "The Pragmatic Engineer": 2103,
  },
  {
    date: "Mar 22",
    SemiAnalysis: 3322,
    "The Pragmatic Engineer": 2194,
  },
  {
    date: "Apr 22",
    SemiAnalysis: 3470,
    "The Pragmatic Engineer": 2108,
  },
  {
    date: "May 22",
    SemiAnalysis: 3475,
    "The Pragmatic Engineer": 1812,
  },
  {
    date: "Jun 22",
    SemiAnalysis: 3129,
    "The Pragmatic Engineer": 1726,
  },
];

export const dataFormatter = (number: number) => {
  return "$ " + Intl.NumberFormat("us").format(number).toString();
};
copy

Back in src/App.tsx, let's see it in action with the AreaChart:

import React from "react";
import {
  Card,
  Text,
  Metric,
  Flex,
  ProgressBar,
  AreaChart,
} from "@tremor/react";
import { chartData, dataFormatter } from "./data";
import "@tremor/react/dist/esm/tremor.css";

const IntroCard = () => (
  <Card maxWidth="max-w-sm">
    <Text>Sales</Text>
    <Metric>$ 71,465</Metric>
    <Flex marginTop="mt-4">
      <Text>32% of annual target</Text>
      <Text>$ 225,000</Text>
    </Flex>
    <ProgressBar percentageValue={32} marginTop="mt-2" />
  </Card>
);

const DemoAreaChart = () => (
  <AreaChart
    data={chartData}
    categories={["SemiAnalysis", "The Pragmatic Engineer"]}
    dataKey="date"
    height="h-72"
    colors={["indigo", "cyan"]}
    valueFormatter={dataFormatter}
    marginTop="mt-4"
  />
);

function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
      }}
    >
      <div
        style={{
          display: "flex",
          width: 600,
          justifyContent: "center",
          flexDirection: "column",
        }}
      >
        <IntroCard />
        <DemoAreaChart />
      </div>
    </div>
  );
}

export default App;
copy

We've added some contrived flex styles to get the elements centered, and taken the basic demo code from the AreaChart, but in mere minutes we have a beautiful chart based off some basic data arrays.

AreaChart in action

The beauty with Tremor, is that the API is aligned to effectively drop in the same props for different charts. Edit src/App.tsx to the following:

import React from "react";
import { AreaChart, BarChart, LineChart } from "@tremor/react";
import { chartData, dataFormatter } from "./data";
import "@tremor/react/dist/esm/tremor.css";

const DemoAreaChart = () => (
  <AreaChart
    data={chartData}
    categories={["SemiAnalysis", "The Pragmatic Engineer"]}
    dataKey="date"
    height="h-72"
    colors={["indigo", "cyan"]}
    valueFormatter={dataFormatter}
    marginTop="mt-4"
  />
);
const DemoBarChart = () => (
  <BarChart
    data={chartData}
    categories={["SemiAnalysis", "The Pragmatic Engineer"]}
    dataKey="date"
    height="h-72"
    colors={["indigo", "cyan"]}
    valueFormatter={dataFormatter}
    marginTop="mt-4"
  />
);
const DemoLineChart = () => (
  <LineChart
    data={chartData}
    categories={["SemiAnalysis", "The Pragmatic Engineer"]}
    dataKey="date"
    height="h-72"
    colors={["indigo", "cyan"]}
    valueFormatter={dataFormatter}
    marginTop="mt-4"
  />
);

function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
      }}
    >
      <div
        style={{
          display: "flex",
          width: "100vw",
          justifyContent: "center",
          flexDirection: "column",
        }}
      >
        <DemoAreaChart />
        <DemoBarChart />
      </div>
      <div
        style={{
          display: "flex",
          width: "100vw",
          justifyContent: "center",
        }}
      >
        <DemoLineChart />
      </div>
    </div>
  );
}

export default App;
copy

Now after the live reload fires, you can go back to localhost and see this:

More charts from the same props and chart data

This makes it easier to change settings so that users could be empowered to quickly change between views without much overhead involved.

Wrap up

Today's short post was about exploring Tremor and seeing how easy it is to build out data visualization with it.

The library is still in beta, so be aware that things could change from the API displayed in the blog post.

Resources and further reading

Photo credit: fierysnake