tremor • blocks

Charts

Set of basic charts ready to be fed by data without needing to take care of the grunt work.

Card + Pie Chart + List + Data Bars

Asset Performance

Asset

+/-% since transaction

Off Running Inc.
+61.3%
Black Swan Holding
+32.8%
Blingtech Inc.
-18.3%
Cortina Steal AG
+19.4%
Rain Drop Holding
-19.4%
Pas Crazy Inc.
-32.8%
Hype Room Inc.
-40.1%

Off Running Inc.
61.3%
Black Swan Holding
32.8%
Blingtech Inc.
-18.3%
Cortina Steal AG
19.4%
Rain Drop Holding
-19.4%
Pas Crazy Inc.
-32.8%
Hype Room Inc.
-40.1%

import {
  Card,
  Col,
  DeltaType,
  DeltaBar,
  DonutChart,
  Dropdown,
  DropdownItem,
  Flex,
  List,
  ListItem,
  Text,
  Title,
  Bold,
  Grid,
  Color,
} from "@tremor/react";
import { useEffect, useState } from "react";

const industrys = [
  { key: "all", name: "All industries" },
  { key: "tech", name: "Tech" },
  { key: "health", name: "Health" },
  { key: "manufacturing", name: "Manufacturing" },
];

interface AssetData {
  name: string;
  industry: string;
  sales: number;
  delta: number;
  deltaType: DeltaType;
  status: Color;
}

const cities: AssetData[] = [
  {
    name: "Off Running Inc.",
    industry: "tech",
    sales: 984888,
    delta: 61.3,
    deltaType: "increase",
    status: "emerald",
  },
  {
    name: "Black Swan Holding",
    industry: "health",
    sales: 456700,
    delta: 32.8,
    deltaType: "moderateDecrease",
    status: "emerald",
  },
  {
    name: "Blingtech Inc.",
    industry: "Tech",
    sales: 390800,
    delta: -18.3,
    deltaType: "moderateDecrease",
    status: "rose",
  },
  {
    name: "Cortina Steal AG",
    industry: "manufacturing",
    sales: 240000,
    delta: 19.4,
    deltaType: "moderateIncrease",
    status: "emerald",
  },
  {
    name: "Rain Drop Holding",
    industry: "health",
    sales: 190800,
    delta: -19.4,
    deltaType: "moderateIncrease",
    status: "rose",
  },
  {
    name: "Pas Crazy Inc.",
    industry: "tech",
    sales: 164400,
    delta: -32.8,
    deltaType: "decrease",
    status: "rose",
  },
  {
    name: "Hype Room Inc.",
    industry: "manufacturing",
    sales: 139800,
    delta: -40.1,
    deltaType: "moderateIncrease",
    status: "rose",
  },
];

const valueFormatter = (number: number) =>
  `${Intl.NumberFormat("us").format(number).toString()} $`;

const filterByindustry = (industry: string, data: AssetData[]) =>
  industry === "all" ? data : data.filter((city) => city.industry === industry);

export default function Example() {
  const [selectedindustry, setSelectedindustry] = useState("all");
  const [filteredData, setFilteredData] = useState(cities);

  useEffect(() => {
    const data = cities;
    setFilteredData(filterByindustry(selectedindustry, data));
  }, [selectedindustry]);

  return (
    <Card className="max-w-4xl mx-auto">
      <div className="hidden sm:block">
        <Flex className="space-x-4" justifyContent="start" alignItems="center">
          <Title className="truncate">Asset Performance</Title>
          <Dropdown
            onValueChange={(value) => setSelectedindustry(value)}
            placeholder="Industry Selection"
            className="max-w-xs"
          >
            {industrys.map((industry) => (
              <DropdownItem
                key={industry.key}
                value={industry.key}
                text={industry.name}
              />
            ))}
          </Dropdown>
        </Flex>
      </div>
      {/* --- Same code snippet as above but with no flex to optmize mobile view --- */}
      <div className="sm:hidden">
        <Title className="truncate">Asset Performance</Title>
        <Dropdown
          onValueChange={(value) => setSelectedindustry(value)}
          placeholder="Industry Selection"
          className="max-w-full mt-2"
        >
          {industrys.map((industry) => (
            <DropdownItem
              key={industry.key}
              value={industry.key}
              text={industry.name}
            />
          ))}
        </Dropdown>
      </div>
      <Grid numColsLg={3} className="mt-8 gap-y-10 gap-x-14">
        <Flex>
          <DonutChart
            data={filteredData}
            category="sales"
            index="name"
            variant="donut"
            valueFormatter={valueFormatter}
            className="h-52"
          />
        </Flex>
        <Col numColSpan={1} numColSpanLg={2}>
          <Flex>
            <Text className="truncate">
              <Bold>Asset</Bold>
            </Text>
            <Text>
              <Bold>+/-% since transaction </Bold>
            </Text>
          </Flex>
          <div className="hidden sm:block">
            <List className="mt-2">
              {filteredData.map((city) => (
                <ListItem key={city.name}>
                  <Text className="truncate">{city.name}</Text>
                  <div>
                    <Flex justifyContent="end" className="space-x-4">
                      <Text color={city.status} className="truncate">
                        {Intl.NumberFormat("us", {
                          signDisplay: "exceptZero",
                        })
                          .format(city.delta)
                          .toString()}
                        &#37;
                      </Text>
                      <div className="w-44">
                        <DeltaBar
                          percentageValue={city.delta}
                          isIncreasePositive={true}
                          tooltip=""
                          showAnimation={true}
                        />
                      </div>
                    </Flex>
                  </div>
                </ListItem>
              ))}
            </List>
          </div>

          <div className="sm:hidden">
            <List className="mt-2">
              {filteredData.map((city) => (
                <ListItem key={city.name}>
                  <Text className="truncate">{city.name}</Text>
                  <div>
                    <Flex justifyContent="end" className="space-x-4">
                      <Text color={city.status} className="truncate">
                        {city.delta}%{" "}
                      </Text>
                      <div className="w-20">
                        <DeltaBar
                          percentageValue={city.delta}
                          isIncreasePositive={true}
                          tooltip=""
                          showAnimation={true}
                        />
                      </div>
                    </Flex>
                  </div>
                </ListItem>
              ))}
            </List>
          </div>
        </Col>
      </Grid>
    </Card>
  );
}

Found a bug? let us know

Card + Area Charts

Gross Volume

$ 12,699

Successful Payments

$ 10,300

Customers

645

import { Card, Metric, Text, Divider, AreaChart } from "@tremor/react";

const data = [
  {
    Month: "Jan 21",
    "Gross Volume": 2890,
    "Successful Payments": 2400,
    Customers: 4938,
  },
  {
    Month: "Feb 21",
    "Gross Volume": 1890,
    "Successful Payments": 1398,
    Customers: 2938,
  },
  {
    Month: "Mar 21",
    "Gross Volume": 2190,
    "Successful Payments": 1900,
    Customers: 1638,
  },
  {
    Month: "Apr 21",
    "Gross Volume": 3470,
    "Successful Payments": 3908,
    Customers: 2138,
  },
  {
    Month: "May 21",
    "Gross Volume": 2170,
    "Successful Payments": 4800,
    Customers: 2142,
  },
  {
    Month: "Jun 21",
    "Gross Volume": 3170,
    "Successful Payments": 3800,
    Customers: 5120,
  },
  {
    Month: "Jul 21",
    "Gross Volume": 3490,
    "Successful Payments": 4300,
    Customers: 3890,
  },
  {
    Month: "Aug 21",
    "Gross Volume": 2190,
    "Successful Payments": 4100,
    Customers: 3165,
  },
  {
    Month: "Sep 21",
    "Gross Volume": 3344,
    "Successful Payments": 4934,
    Customers: 1945,
  },
  {
    Month: "Oct 21",
    "Gross Volume": 1564,
    "Successful Payments": 1245,
    Customers: 2345,
  },
  {
    Month: "Nov 21",
    "Gross Volume": 3345,
    "Successful Payments": 2654,
    Customers: 4845,
  },
  {
    Month: "Dec 21",
    "Gross Volume": 2740,
    "Successful Payments": 3421,
    Customers: 2945,
  },
  {
    Month: "Jan 22",
    "Gross Volume": 3890,
    "Successful Payments": 2980,
    Customers: 2645,
  },
];

const valueFormatter = (number: number) =>
  `$ ${Intl.NumberFormat("us").format(number).toString()}`;

export default function Example() {
  return (
    <Card className="mx-auto">
      <Text>Gross Volume</Text>
      <Metric>$ 12,699</Metric>
      <AreaChart
        className="mt-8 h-44"
        data={data}
        categories={["Gross Volume"]}
        index="Month"
        colors={["indigo"]}
        valueFormatter={valueFormatter}
        showYAxis={false}
        showLegend={false}
      />

      <Divider />

      <Text>Successful Payments</Text>
      <Metric>$ 10,300</Metric>
      <AreaChart
        className="mt-8 h-44"
        data={data}
        categories={["Successful Payments"]}
        index="Month"
        colors={["indigo"]}
        valueFormatter={valueFormatter}
        showYAxis={false}
        showLegend={false}
      />

      <Divider />

      <Text>Customers</Text>
      <Metric>645</Metric>
      <AreaChart
        className="mt-8 h-44"
        data={data}
        categories={["Customers"]}
        index="Month"
        colors={["indigo"]}
        valueFormatter={valueFormatter}
        showYAxis={false}
        showLegend={false}
      />
    </Card>
  );
}

Found a bug? let us know

Card + Multiple Area Chart

Performance

Comparison between Sales and Profit

import { Card, AreaChart, Title, Text } from "@tremor/react";

const data = [
  {
    Month: "Jan 21",
    Sales: 2890,
    Profit: 2400,
  },
  {
    Month: "Feb 21",
    Sales: 1890,
    Profit: 1398,
  },
  {
    Month: "Mar 21",
    Sales: 2190,
    Profit: 1900,
  },
  {
    Month: "Apr 21",
    Sales: 3470,
    Profit: 3100,
  },
  {
    Month: "May 21",
    Sales: 2170,
    Profit: 1650,
  },
  {
    Month: "Jun 21",
    Sales: 3170,
    Profit: 2450,
  },
  {
    Month: "Jul 21",
    Sales: 3490,
    Profit: 2910,
  },
  {
    Month: "Aug 21",
    Sales: 2190,
    Profit: 1600,
  },
  // ...
  {
    Month: "Jan 22",
    Sales: 3890,
    Profit: 2980,
  },
];

const valueFormatter = (number: number) =>
  `$ ${Intl.NumberFormat("us").format(number).toString()}`;

export default function Example() {
  return (
    <Card>
      <Title>Performance</Title>
      <Text>Comparison between Sales and Profit</Text>
      <AreaChart
        className="mt-4 h-80"
        data={data}
        categories={["Sales", "Profit"]}
        index="Month"
        colors={["indigo", "fuchsia"]}
        valueFormatter={valueFormatter}
      />
    </Card>
  );
}

Found a bug? let us know

Card + Multiple Bar Chart Grouped

Performance

Comparison between Sales and Profit

import { Card, BarChart, Title, Text } from "@tremor/react";

const data = [
  {
    Month: "Jan 21",
    Sales: 2890,
    Profit: 2400,
  },
  {
    Month: "Feb 21",
    Sales: 1890,
    Profit: 1398,
  },
  // ...
  {
    Month: "Jan 22",
    Sales: 3890,
    Profit: 2980,
  },
];

const valueFormatter = (number: number) =>
  `$ ${Intl.NumberFormat("us").format(number).toString()}`;

export default function Example() {
  return (
    <Card>
      <Title>Performance</Title>
      <Text>Comparison between Sales and Profit</Text>
      <BarChart
        className="mt-4 h-80"
        data={data}
        index="Month"
        categories={["Sales", "Profit"]}
        colors={["indigo", "fuchsia"]}
        stack={false}
        valueFormatter={valueFormatter}
      />
    </Card>
  );
}

Found a bug? let us know

Card + Bar Chart Stacked (Relative)

Ticket Monitoring

Tickets by Status

import { Card, Title, BarChart, Text } from "@tremor/react";

const data = [
  {
    Month: "Jan 21",
    Failed: 2890,
    Completed: 1400,
    "In Progress": 4938,
  },
  {
    Month: "Feb 21",
    Failed: 1890,
    Completed: 998,
    "In Progress": 2938,
  },
  {
    Month: "Mar 21",
    Failed: 2190,
    Completed: 1400,
    "In Progress": 1638,
  },
  {
    Month: "Apr 21",
    Failed: 3470,
    Completed: 2108,
    "In Progress": 2138,
  },
  {
    Month: "May 21",
    Failed: 2170,
    Completed: 1800,
    "In Progress": 2142,
  },
  {
    Month: "Jun 21",
    Failed: 3170,
    Completed: 1800,
    "In Progress": 5120,
  },
  {
    Month: "Jul 21",
    Failed: 3490,
    Completed: 2300,
    "In Progress": 3890,
  },
  {
    Month: "Aug 21",
    Failed: 2190,
    Completed: 1100,
    "In Progress": 3165,
  },
  {
    Month: "Sep 21",
    Failed: 3344,
    Completed: 1934,
    "In Progress": 1945,
  },
  {
    Month: "Oct 21",
    Failed: 1564,
    Completed: 1245,
    "In Progress": 2345,
  },
  {
    Month: "Nov 21",
    Failed: 3345,
    Completed: 2654,
    "In Progress": 4845,
  },
  {
    Month: "Dec 21",
    Failed: 2740,
    Completed: 2421,
    "In Progress": 2945,
  },
  {
    Month: "Jan 22",
    Failed: 3890,
    Completed: 2980,
    "In Progress": 2645,
  },
];

const valueFormatter = (number: number) =>
  Intl.NumberFormat("us").format(number).toString();

export default function Example() {
  return (
    <Card>
      <Title>Ticket Monitoring</Title>
      <Text>Tickets by Status</Text>
      <BarChart
        className="mt-4 h-80"
        data={data}
        index="Month"
        categories={["Completed", "In Progress", "Failed"]}
        colors={["sky", "violet", "fuchsia"]}
        valueFormatter={valueFormatter}
        stack={true}
        relative={true}
      />
    </Card>
  );
}

Found a bug? let us know

Card + Tracker + Line Chart

All services are online

As of September 7th, 1:46 PM

API

99.87% uptime

Avg. response time per day

import { CheckCircleIcon } from "@heroicons/react/solid";

import {
  Card,
  Text,
  Divider,
  LineChart,
  Icon,
  Title,
  Tracker,
  Flex,
  Bold,
  Color,
} from "@tremor/react";

export interface Latency {
  Date: string;
  "Avg. Response Time": number;
}

const latency: Latency[] = [
  {
    Date: "01.01.2022",
    "Avg. Response Time": 0.95,
  },
  {
    Date: "02.01.2022",
    "Avg. Response Time": 0.01,
  },
  {
    Date: "03.01.2022",
    "Avg. Response Time": 0.93,
  },
  {
    Date: "04.01.2022",
    "Avg. Response Time": 0.56,
  },
  {
    Date: "05.01.2022",
    "Avg. Response Time": 0.02,
  },
  {
    Date: "06.01.2022",
    "Avg. Response Time": 0.89,
  },
  {
    Date: "07.01.2022",
    "Avg. Response Time": 0.22,
  },
  {
    Date: "08.01.2022",
    "Avg. Response Time": 0.49,
  },
  {
    Date: "09.01.2022",
    "Avg. Response Time": 0.9,
  },
  {
    Date: "10.01.2022",
    "Avg. Response Time": 0.08,
  },
  {
    Date: "11.01.2022",
    "Avg. Response Time": 0.05,
  },
  {
    Date: "12.01.2022",
    "Avg. Response Time": 0.07,
  },
  {
    Date: "13.01.2022",
    "Avg. Response Time": 0.4,
  },
  {
    Date: "14.01.2022",
    "Avg. Response Time": 0.64,
  },
  {
    Date: "15.01.2022",
    "Avg. Response Time": 0.46,
  },
  {
    Date: "16.01.2022",
    "Avg. Response Time": 0.38,
  },
  {
    Date: "17.01.2022",
    "Avg. Response Time": 1.99,
  },
  {
    Date: "18.01.2022",
    "Avg. Response Time": 0.6,
  },
  {
    Date: "19.01.2022",
    "Avg. Response Time": 0.51,
  },
  {
    Date: "20.01.2022",
    "Avg. Response Time": 0.86,
  },
  {
    Date: "21.01.2022",
    "Avg. Response Time": 0.6,
  },
  {
    Date: "22.01.2022",
    "Avg. Response Time": 0.68,
  },
  {
    Date: "23.01.2022",
    "Avg. Response Time": 0.97,
  },
  {
    Date: "24.01.2022",
    "Avg. Response Time": 0.85,
  },
  {
    Date: "25.01.2022",
    "Avg. Response Time": 0.24,
  },
  {
    Date: "26.01.2022",
    "Avg. Response Time": 0.41,
  },
  {
    Date: "27.01.2022",
    "Avg. Response Time": 0.42,
  },
  {
    Date: "28.01.2022",
    "Avg. Response Time": 0.89,
  },
  {
    Date: "29.01.2022",
    "Avg. Response Time": 0.99,
  },
  {
    Date: "30.01.2022",
    "Avg. Response Time": 0.13,
  },
  {
    Date: "31.01.2022",
    "Avg. Response Time": 0.39,
  },
  {
    Date: "01.02.2022",
    "Avg. Response Time": 0.22,
  },
  {
    Date: "02.02.2022",
    "Avg. Response Time": 1.45,
  },
  {
    Date: "03.02.2022",
    "Avg. Response Time": 0.03,
  },
  {
    Date: "04.02.2022",
    "Avg. Response Time": 0.6,
  },
  {
    Date: "05.02.2022",
    "Avg. Response Time": 0.77,
  },
  {
    Date: "06.02.2022",
    "Avg. Response Time": 0.31,
  },
  {
    Date: "07.02.2022",
    "Avg. Response Time": 0.95,
  },
  {
    Date: "08.02.2022",
    "Avg. Response Time": 0.15,
  },
  {
    Date: "09.02.2022",
    "Avg. Response Time": 0.1,
  },
  {
    Date: "10.02.2022",
    "Avg. Response Time": 0.81,
  },
  {
    Date: "11.02.2022",
    "Avg. Response Time": 0.3,
  },
  {
    Date: "12.02.2022",
    "Avg. Response Time": 0.83,
  },
  {
    Date: "13.02.2022",
    "Avg. Response Time": 0.48,
  },
  {
    Date: "14.02.2022",
    "Avg. Response Time": 0.55,
  },
  {
    Date: "15.02.2022",
    "Avg. Response Time": 0.02,
  },
  {
    Date: "16.02.2022",
    "Avg. Response Time": 0.43,
  },
  {
    Date: "17.02.2022",
    "Avg. Response Time": 0.21,
  },
  {
    Date: "18.02.2022",
    "Avg. Response Time": 0.5,
  },
  {
    Date: "19.02.2022",
    "Avg. Response Time": 0.85,
  },
  {
    Date: "20.02.2022",
    "Avg. Response Time": 0.24,
  },
  {
    Date: "21.02.2022",
    "Avg. Response Time": 0.01,
  },
  {
    Date: "22.02.2022",
    "Avg. Response Time": 0.63,
  },
  {
    Date: "23.02.2022",
    "Avg. Response Time": 0.43,
  },
  {
    Date: "24.02.2022",
    "Avg. Response Time": 0.37,
  },
  {
    Date: "25.02.2022",
    "Avg. Response Time": 0.88,
  },
  {
    Date: "26.02.2022",
    "Avg. Response Time": 0.62,
  },
  {
    Date: "27.02.2022",
    "Avg. Response Time": 0.14,
  },
  {
    Date: "28.02.2022",
    "Avg. Response Time": 0.62,
  },
  {
    Date: "01.03.2022",
    "Avg. Response Time": 0.55,
  },
  {
    Date: "02.03.2022",
    "Avg. Response Time": 0.72,
  },
  {
    Date: "03.03.2022",
    "Avg. Response Time": 0.37,
  },
  {
    Date: "04.03.2022",
    "Avg. Response Time": 0.94,
  },
  {
    Date: "05.03.2022",
    "Avg. Response Time": 0.88,
  },
  {
    Date: "06.03.2022",
    "Avg. Response Time": 0.64,
  },
  {
    Date: "07.03.2022",
    "Avg. Response Time": 2.33,
  },
  {
    Date: "08.03.2022",
    "Avg. Response Time": 0.22,
  },
  {
    Date: "09.03.2022",
    "Avg. Response Time": 0.14,
  },
  {
    Date: "10.03.2022",
    "Avg. Response Time": 0.31,
  },
  {
    Date: "11.03.2022",
    "Avg. Response Time": 0.78,
  },
  {
    Date: "12.03.2022",
    "Avg. Response Time": 0.97,
  },
  {
    Date: "13.03.2022",
    "Avg. Response Time": 0.59,
  },
  {
    Date: "14.03.2022",
    "Avg. Response Time": 1.0,
  },
  {
    Date: "15.03.2022",
    "Avg. Response Time": 0.99,
  },
  {
    Date: "16.03.2022",
    "Avg. Response Time": 0.54,
  },
  {
    Date: "17.03.2022",
    "Avg. Response Time": 0.84,
  },
  {
    Date: "18.03.2022",
    "Avg. Response Time": 0.36,
  },
  {
    Date: "19.03.2022",
    "Avg. Response Time": 0.87,
  },
  {
    Date: "20.03.2022",
    "Avg. Response Time": 0.56,
  },
  {
    Date: "21.03.2022",
    "Avg. Response Time": 0.62,
  },
  {
    Date: "22.03.2022",
    "Avg. Response Time": 0.63,
  },
  {
    Date: "23.03.2022",
    "Avg. Response Time": 0.8,
  },
  {
    Date: "24.03.2022",
    "Avg. Response Time": 0.61,
  },
  {
    Date: "25.03.2022",
    "Avg. Response Time": 0.31,
  },
  {
    Date: "26.03.2022",
    "Avg. Response Time": 0.46,
  },
  {
    Date: "27.03.2022",
    "Avg. Response Time": 0.63,
  },
  {
    Date: "28.03.2022",
    "Avg. Response Time": 0.74,
  },
  {
    Date: "29.03.2022",
    "Avg. Response Time": 0.95,
  },
  {
    Date: "30.03.2022",
    "Avg. Response Time": 0.32,
  },
  {
    Date: "31.03.2022",
    "Avg. Response Time": 0.3,
  },
  {
    Date: "01.04.2022",
    "Avg. Response Time": 0.1,
  },
  {
    Date: "02.04.2022",
    "Avg. Response Time": 0.44,
  },
  {
    Date: "03.04.2022",
    "Avg. Response Time": 0.45,
  },
  {
    Date: "04.04.2022",
    "Avg. Response Time": 0.18,
  },
  {
    Date: "05.04.2022",
    "Avg. Response Time": 0.27,
  },
  {
    Date: "06.04.2022",
    "Avg. Response Time": 0.16,
  },
  {
    Date: "07.04.2022",
    "Avg. Response Time": 0.72,
  },
  {
    Date: "08.04.2022",
    "Avg. Response Time": 0.34,
  },
  {
    Date: "09.04.2022",
    "Avg. Response Time": 0.15,
  },
  {
    Date: "10.04.2022",
    "Avg. Response Time": 0.81,
  },
  {
    Date: "11.04.2022",
    "Avg. Response Time": 0.85,
  },
  {
    Date: "12.04.2022",
    "Avg. Response Time": 0.61,
  },
  {
    Date: "13.04.2022",
    "Avg. Response Time": 0.47,
  },
  {
    Date: "14.04.2022",
    "Avg. Response Time": 0.78,
  },
  {
    Date: "15.04.2022",
    "Avg. Response Time": 0.11,
  },
  {
    Date: "16.04.2022",
    "Avg. Response Time": 0.04,
  },
  {
    Date: "17.04.2022",
    "Avg. Response Time": 0.34,
  },
  {
    Date: "18.04.2022",
    "Avg. Response Time": 0.15,
  },
  {
    Date: "19.04.2022",
    "Avg. Response Time": 0.55,
  },
  {
    Date: "20.04.2022",
    "Avg. Response Time": 0.47,
  },
  {
    Date: "21.04.2022",
    "Avg. Response Time": 0.4,
  },
  {
    Date: "22.04.2022",
    "Avg. Response Time": 0.55,
  },
  {
    Date: "23.04.2022",
    "Avg. Response Time": 0.89,
  },
  {
    Date: "24.04.2022",
    "Avg. Response Time": 0.4,
  },
  {
    Date: "25.04.2022",
    "Avg. Response Time": 0.0,
  },
  {
    Date: "26.04.2022",
    "Avg. Response Time": 0.6,
  },
  {
    Date: "27.04.2022",
    "Avg. Response Time": 0.25,
  },
  {
    Date: "28.04.2022",
    "Avg. Response Time": 0.89,
  },
  {
    Date: "29.04.2022",
    "Avg. Response Time": 0.94,
  },
  {
    Date: "30.04.2022",
    "Avg. Response Time": 0.44,
  },
  {
    Date: "01.05.2022",
    "Avg. Response Time": 0.66,
  },
  {
    Date: "02.05.2022",
    "Avg. Response Time": 0.06,
  },
  {
    Date: "03.05.2022",
    "Avg. Response Time": 0.68,
  },
  {
    Date: "04.05.2022",
    "Avg. Response Time": 0.49,
  },
  {
    Date: "05.05.2022",
    "Avg. Response Time": 0.66,
  },
  {
    Date: "06.05.2022",
    "Avg. Response Time": 0.37,
  },
  {
    Date: "07.05.2022",
    "Avg. Response Time": 0.52,
  },
  {
    Date: "08.05.2022",
    "Avg. Response Time": 0.07,
  },
  {
    Date: "09.05.2022",
    "Avg. Response Time": 0.03,
  },
  {
    Date: "10.05.2022",
    "Avg. Response Time": 0.76,
  },
  {
    Date: "11.05.2022",
    "Avg. Response Time": 0.5,
  },
  {
    Date: "12.05.2022",
    "Avg. Response Time": 0.06,
  },
  {
    Date: "13.05.2022",
    "Avg. Response Time": 0.04,
  },
  {
    Date: "14.05.2022",
    "Avg. Response Time": 0.42,
  },
  {
    Date: "15.05.2022",
    "Avg. Response Time": 0.3,
  },
  {
    Date: "16.05.2022",
    "Avg. Response Time": 0.58,
  },
  {
    Date: "17.05.2022",
    "Avg. Response Time": 0.98,
  },
  {
    Date: "18.05.2022",
    "Avg. Response Time": 0.59,
  },
  {
    Date: "19.05.2022",
    "Avg. Response Time": 0.17,
  },
  {
    Date: "20.05.2022",
    "Avg. Response Time": 0.92,
  },
  {
    Date: "21.05.2022",
    "Avg. Response Time": 0.68,
  },
  {
    Date: "22.05.2022",
    "Avg. Response Time": 0.71,
  },
  {
    Date: "23.05.2022",
    "Avg. Response Time": 0.89,
  },
  {
    Date: "24.05.2022",
    "Avg. Response Time": 0.18,
  },
  {
    Date: "25.05.2022",
    "Avg. Response Time": 0.81,
  },
  {
    Date: "26.05.2022",
    "Avg. Response Time": 0.08,
  },
  {
    Date: "27.05.2022",
    "Avg. Response Time": 0.75,
  },
  {
    Date: "28.05.2022",
    "Avg. Response Time": 0.75,
  },
  {
    Date: "29.05.2022",
    "Avg. Response Time": 0.23,
  },
  {
    Date: "30.05.2022",
    "Avg. Response Time": 0.66,
  },
  {
    Date: "31.05.2022",
    "Avg. Response Time": 0.33,
  },
  {
    Date: "01.06.2022",
    "Avg. Response Time": 0.75,
  },
  {
    Date: "02.06.2022",
    "Avg. Response Time": 0.17,
  },
  {
    Date: "03.06.2022",
    "Avg. Response Time": 0.01,
  },
  {
    Date: "04.06.2022",
    "Avg. Response Time": 0.44,
  },
  {
    Date: "05.06.2022",
    "Avg. Response Time": 0.71,
  },
  {
    Date: "06.06.2022",
    "Avg. Response Time": 0.24,
  },
  {
    Date: "07.06.2022",
    "Avg. Response Time": 0.81,
  },
  {
    Date: "08.06.2022",
    "Avg. Response Time": 0.78,
  },
  {
    Date: "09.06.2022",
    "Avg. Response Time": 0.27,
  },
  {
    Date: "10.06.2022",
    "Avg. Response Time": 0.63,
  },
  {
    Date: "11.06.2022",
    "Avg. Response Time": 0.86,
  },
  {
    Date: "12.06.2022",
    "Avg. Response Time": 0.87,
  },
  {
    Date: "13.06.2022",
    "Avg. Response Time": 0.01,
  },
  {
    Date: "14.06.2022",
    "Avg. Response Time": 0.15,
  },
  {
    Date: "15.06.2022",
    "Avg. Response Time": 0.14,
  },
  {
    Date: "16.06.2022",
    "Avg. Response Time": 0.17,
  },
  {
    Date: "17.06.2022",
    "Avg. Response Time": 0.43,
  },
  {
    Date: "18.06.2022",
    "Avg. Response Time": 0.71,
  },
  {
    Date: "19.06.2022",
    "Avg. Response Time": 0.07,
  },
  {
    Date: "20.06.2022",
    "Avg. Response Time": 0.81,
  },
  {
    Date: "21.06.2022",
    "Avg. Response Time": 0.52,
  },
  {
    Date: "22.06.2022",
    "Avg. Response Time": 0.19,
  },
  {
    Date: "23.06.2022",
    "Avg. Response Time": 0.61,
  },
  {
    Date: "24.06.2022",
    "Avg. Response Time": 0.95,
  },
  {
    Date: "25.06.2022",
    "Avg. Response Time": 0.64,
  },
  {
    Date: "26.06.2022",
    "Avg. Response Time": 0.98,
  },
  {
    Date: "27.06.2022",
    "Avg. Response Time": 0.1,
  },
  {
    Date: "28.06.2022",
    "Avg. Response Time": 0.9,
  },
  {
    Date: "29.06.2022",
    "Avg. Response Time": 0.51,
  },
  {
    Date: "30.06.2022",
    "Avg. Response Time": 0.01,
  },
  {
    Date: "01.07.2022",
    "Avg. Response Time": 0.99,
  },
  {
    Date: "02.07.2022",
    "Avg. Response Time": 0.26,
  },
  {
    Date: "03.07.2022",
    "Avg. Response Time": 0.94,
  },
  {
    Date: "04.07.2022",
    "Avg. Response Time": 0.54,
  },
  {
    Date: "05.07.2022",
    "Avg. Response Time": 0.76,
  },
  {
    Date: "06.07.2022",
    "Avg. Response Time": 0.23,
  },
  {
    Date: "07.07.2022",
    "Avg. Response Time": 0.15,
  },
  {
    Date: "08.07.2022",
    "Avg. Response Time": 0.2,
  },
  {
    Date: "09.07.2022",
    "Avg. Response Time": 0.83,
  },
  {
    Date: "10.07.2022",
    "Avg. Response Time": 0.78,
  },
  {
    Date: "11.07.2022",
    "Avg. Response Time": 0.9,
  },
  {
    Date: "12.07.2022",
    "Avg. Response Time": 0.92,
  },
  {
    Date: "13.07.2022",
    "Avg. Response Time": 0.69,
  },
  {
    Date: "14.07.2022",
    "Avg. Response Time": 0.34,
  },
  {
    Date: "15.07.2022",
    "Avg. Response Time": 0.93,
  },
  {
    Date: "16.07.2022",
    "Avg. Response Time": 0.24,
  },
  {
    Date: "17.07.2022",
    "Avg. Response Time": 0.37,
  },
  {
    Date: "18.07.2022",
    "Avg. Response Time": 0.98,
  },
  {
    Date: "19.07.2022",
    "Avg. Response Time": 0.19,
  },
  {
    Date: "20.07.2022",
    "Avg. Response Time": 0.51,
  },
  {
    Date: "21.07.2022",
    "Avg. Response Time": 0.07,
  },
  {
    Date: "22.07.2022",
    "Avg. Response Time": 0.23,
  },
  {
    Date: "23.07.2022",
    "Avg. Response Time": 0.67,
  },
  {
    Date: "24.07.2022",
    "Avg. Response Time": 0.76,
  },
  {
    Date: "25.07.2022",
    "Avg. Response Time": 0.23,
  },
  {
    Date: "26.07.2022",
    "Avg. Response Time": 2.47,
  },
  {
    Date: "27.07.2022",
    "Avg. Response Time": 0.02,
  },
  {
    Date: "28.07.2022",
    "Avg. Response Time": 0.2,
  },
  {
    Date: "29.07.2022",
    "Avg. Response Time": 0.14,
  },
  {
    Date: "30.07.2022",
    "Avg. Response Time": 0.98,
  },
  {
    Date: "31.07.2022",
    "Avg. Response Time": 0.76,
  },
  {
    Date: "01.08.2022",
    "Avg. Response Time": 0.06,
  },
  {
    Date: "02.08.2022",
    "Avg. Response Time": 0.75,
  },
  {
    Date: "03.08.2022",
    "Avg. Response Time": 0.7,
  },
  {
    Date: "04.08.2022",
    "Avg. Response Time": 0.53,
  },
  {
    Date: "05.08.2022",
    "Avg. Response Time": 0.91,
  },
  {
    Date: "06.08.2022",
    "Avg. Response Time": 0.47,
  },
  {
    Date: "07.08.2022",
    "Avg. Response Time": 0.19,
  },
  {
    Date: "08.08.2022",
    "Avg. Response Time": 0.05,
  },
  {
    Date: "09.08.2022",
    "Avg. Response Time": 0.91,
  },
  {
    Date: "10.08.2022",
    "Avg. Response Time": 0.43,
  },
  {
    Date: "11.08.2022",
    "Avg. Response Time": 0.06,
  },
  {
    Date: "12.08.2022",
    "Avg. Response Time": 0.58,
  },
  {
    Date: "13.08.2022",
    "Avg. Response Time": 0.07,
  },
  {
    Date: "14.08.2022",
    "Avg. Response Time": 0.09,
  },
  {
    Date: "15.08.2022",
    "Avg. Response Time": 0.19,
  },
  {
    Date: "16.08.2022",
    "Avg. Response Time": 0.03,
  },
  {
    Date: "17.08.2022",
    "Avg. Response Time": 0.59,
  },
  {
    Date: "18.08.2022",
    "Avg. Response Time": 0.86,
  },
  {
    Date: "19.08.2022",
    "Avg. Response Time": 0.25,
  },
  {
    Date: "20.08.2022",
    "Avg. Response Time": 0.85,
  },
  {
    Date: "21.08.2022",
    "Avg. Response Time": 0.19,
  },
  {
    Date: "22.08.2022",
    "Avg. Response Time": 0.91,
  },
  {
    Date: "23.08.2022",
    "Avg. Response Time": 0.05,
  },
  {
    Date: "24.08.2022",
    "Avg. Response Time": 0.36,
  },
  {
    Date: "25.08.2022",
    "Avg. Response Time": 0.16,
  },
  {
    Date: "26.08.2022",
    "Avg. Response Time": 0.66,
  },
  {
    Date: "27.08.2022",
    "Avg. Response Time": 0.44,
  },
  {
    Date: "28.08.2022",
    "Avg. Response Time": 0.03,
  },
  {
    Date: "29.08.2022",
    "Avg. Response Time": 0.4,
  },
  {
    Date: "30.08.2022",
    "Avg. Response Time": 0.01,
  },
  {
    Date: "31.08.2022",
    "Avg. Response Time": 0.8,
  },
  {
    Date: "01.09.2022",
    "Avg. Response Time": 0.2,
  },
  {
    Date: "02.09.2022",
    "Avg. Response Time": 0.46,
  },
  {
    Date: "03.09.2022",
    "Avg. Response Time": 0.38,
  },
  {
    Date: "04.09.2022",
    "Avg. Response Time": 0.97,
  },
  {
    Date: "05.09.2022",
    "Avg. Response Time": 0.94,
  },
  {
    Date: "06.09.2022",
    "Avg. Response Time": 0.38,
  },
  {
    Date: "07.09.2022",
    "Avg. Response Time": 0.08,
  },
];

export interface Availablility {
  color: Color;
  tooltip: string;
}

const availability: Availablility[] = [
  { color: "emerald", tooltip: "Operational" },
  { color: "rose", tooltip: "Downtime" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Maintenance" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "yellow", tooltip: "Degraded" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "yellow", tooltip: "Degraded" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "yellow", tooltip: "Degraded" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
  { color: "emerald", tooltip: "Operational" },
];

const valueFormatter = (number: number) =>
  `${Intl.NumberFormat("us").format(number).toString()}s`;

export default function Example() {
  return (
    <Card>
      <div className="text-center">
        <Icon
          icon={CheckCircleIcon}
          variant="light"
          size="xl"
          color="emerald"
        />
        <Title className="mt-2">All services are online</Title>
        <Text className="text-center">As of September 7th, 1:46 PM</Text>
      </div>

      <Divider />

      <Flex className="mt-4 whitespace-nowrap">
        <Flex justifyContent="start" className="space-x-2">
          <Icon icon={CheckCircleIcon} color="emerald" />
          <Text>
            <Bold>API</Bold>
          </Text>
        </Flex>
        <Text>99.87% uptime</Text>
      </Flex>
      <Tracker data={availability} className="mt-2" />
      <Title className="mt-6">Avg. response time per day</Title>
      <LineChart
        className="mt-4 h-80"
        data={latency}
        index="Date"
        categories={["Avg. Response Time"]}
        colors={["gray"]}
        valueFormatter={valueFormatter}
        showLegend={false}
        yAxisWidth={48}
      />
    </Card>
  );
}

Found a bug? let us know

Card + Line Chart + Tabs

Share Price

Daily share price of a fictive company

import { Card, Title, Text, LineChart, TabList, Tab } from "@tremor/react";

import { useState } from "react";
import { startOfYear, subDays } from "date-fns";

const data = [
  {
    Date: "04.05.2021",
    Price: 113.05,
    Volume: 21400410,
  },
  {
    Date: "05.05.2021",
    Price: 113,
    Volume: 29707270,
  },
  // ...
  {
    Date: "17.11.2022",
    Price: 95.32,
    Volume: 45187420,
  },
];

const dataFormatter = (number: number) =>
  `$ ${Intl.NumberFormat("us").format(number).toString()}`;

export default function LineChartTabs() {
  const [selectedPeriod, setSelectedPeriod] = useState("Max");

  const getDate = (dateString: string) => {
    const [day, month, year] = dateString.split(".").map(Number);
    return new Date(year, month - 1, day);
  };

  const filterData = (startDate: Date, endDate: Date) =>
    data.filter((item) => {
      const currentDate = getDate(item.Date);
      return currentDate >= startDate && currentDate <= endDate;
    });

  const getFilteredData = (period: string) => {
    const lastAvailableDate = getDate(data[data.length - 1].Date);
    switch (period) {
      case "1M": {
        const periodStartDate = subDays(lastAvailableDate, 30);
        return filterData(periodStartDate, lastAvailableDate);
      }
      case "2M": {
        const periodStartDate = subDays(lastAvailableDate, 60);
        return filterData(periodStartDate, lastAvailableDate);
      }
      case "6M": {
        const periodStartDate = subDays(lastAvailableDate, 180);
        return filterData(periodStartDate, lastAvailableDate);
      }
      case "YTD": {
        const periodStartDate = startOfYear(lastAvailableDate);
        return filterData(periodStartDate, lastAvailableDate);
      }
      default:
        return data;
    }
  };

  return (
    <Card>
      <Title>Share Price</Title>
      <Text>Daily share price of a fictive company</Text>
      <TabList
        defaultValue={selectedPeriod}
        onValueChange={(value) => setSelectedPeriod(value)}
        className="mt-10"
      >
        <Tab value="1M" text="1M" />
        <Tab value="2M" text="2M" />
        <Tab value="6M" text="6M" />
        <Tab value="YTD" text="YTD" />
        <Tab value="Max" text="Max" />
      </TabList>
      <LineChart
        className="h-80 mt-8"
        data={getFilteredData(selectedPeriod)}
        index="Date"
        categories={["Price"]}
        colors={["blue"]}
        valueFormatter={dataFormatter}
        showLegend={false}
        yAxisWidth={48}
      />
    </Card>
  );
}

Found a bug? let us know

Card + Line Chart + Toggle

Churn Rate

Lost customers per day

import { Card, Title, Text, LineChart, Toggle, ToggleItem } from "@tremor/react";

import { useState } from "react";

const data = {
  relative: [
    {
      Date: "01.01.2021",
      "Customer Churn": 9.73,
    },
    {
      Date: "02.01.2021",
      "Customer Churn": 10.74,
    },
    {
      Date: "03.01.2021",
      "Customer Churn": 11.93,
    },
    // ...
    {
      Date: "13.03.2021",
      "Customer Churn": 8.82,
    },
  ],
  absolute: [
    {
      Date: "01.01.2021",
      "Customer Churn": 90,
    },
    {
      Date: "02.01.2021",
      "Customer Churn": 101,
    },
    {
      Date: "03.01.2021",
      "Customer Churn": 110,
    },
    // ...
    {
      Date: "13.03.2021",
      "Customer Churn": 88,
    },
  ],
};

const valueFormatterRelative = (number: number) =>
  `${Intl.NumberFormat("us").format(number).toString()}%`;

const valueFormatterAbsolute = (number: number) =>
  Intl.NumberFormat("us").format(number).toString();

export default function Example() {
  const [setlectedValue, setSelectedValue] = useState("relative");
  return (
    <Card>
      <div className="block sm:flex sm:justify-between">
        <div>
          <Title>Churn Rate</Title>
          <Text>Lost customers per day</Text>
        </div>
        <div className="mt-4 sm:mt-0">
          <Toggle
            color="zinc"
            defaultValue="relative"
            onValueChange={(value) => setSelectedValue(value)}
          >
            <ToggleItem value="relative" text="Relative" />
            <ToggleItem value="absolute" text="Absolute" />
          </Toggle>
        </div>
      </div>
      <LineChart
        className="mt-8 h-80"
        data={setlectedValue === "absolute" ? data.absolute : data.relative}
        index="Date"
        categories={["Customer Churn"]}
        colors={["blue"]}
        showLegend={false}
        valueFormatter={
          setlectedValue === "absolute"
            ? valueFormatterAbsolute
            : valueFormatterRelative
        }
        yAxisWidth={40}
      />
    </Card>
  );
}

Found a bug? let us know