Data Components

1
import { BarComponent } from "@openledger/accounting-react";
2
3
function Toolbar() {
4
  return (
5
    <BarComponent
6
      values={[
7
        { value: "daily", label: "Daily" },
8
        { value: "monthly", label: "Monthly" },
9
      ]}
10
      showToggleGroup={true}
11
      showButtons={true}
12
      showSearchBar={true}
13
      showDatePicker={true}
14
      onSearch={(term) => console.log(term)}
15
    />
16
  );
17
}

1
import { DashboardBox } from "@openledger/accounting-react";
2
3
function MetricDisplay() {
4
  return (
5
    <DashboardBox
6
      title="Revenue"
7
      amount={50000}
8
      change={12.5}
9
      changeDirection="up"
10
      comparedTo="Last Month"
11
    />
12
  );
13
}

1
import { LineChart } from "@openledger/accounting-react";
2
3
function RevenueChart() {
4
  return (
5
    <LineChart
6
      data={revenueData}
7
      index="date"
8
      categories={["revenue", "expenses"]}
9
      showXAxis={true}
10
      showYAxis={true}
11
      showGridLines={true}
12
      valueFormatter={(value) => `$${value}`}
13
    />
14
  );
15
}

1
import { DataTable } from "@openledger/accounting-react";
2
3
function TransactionsTable() {
4
  return (
5
    <DataTable
6
      title="Recent Transactions"
7
      data={transactions}
8
      columns={["date", "description", "amount"]}
9
    />
10
  );
11
}