Top Ledger
Search…
⌃K
Links

Integrate Topledger dashboards

Our new React dashboard, With a simple and easy-to-customize user interface to seamlessly blend into your existing layout, can be integrated easily on any platform.

Introduction

tl-dashboards is a npm package for integrating customized dashboards on front-end.

Required Libraries

  • react (>=16.8.0)
  • react-dom (>=16.8.0)
  • antd (>=4.0.0)
  • markdown (^0.5.0)
  • @redash/viz (^0.1.1)

Using npm

npm install tl-dashboards antd markdown @redash/viz

Using yarn

yarn add tl-dashboards

Copy required fonts to public/fonts directory

The public font directory should look like this:
public
└── fonts
├── fontawesome-webfont.woff2
└── Material-Design-Iconic-Font.woff2

Usage

You can use render the dashboard component anywhere inside react dom.
You can follow the basic example given below:
import TLDashboards from "tl-dashboards";
​
function App() {
return (
<div className="App">
<TLDashboards
client="switchboard"
token="puWU5mljkjOTxHLoaaVM7rFpxhrm7lQw3SkphtLV"
/>
</div>
);
}
​
export default App;

Dashboard Output

Important classes

Below classes refer to different elements in dashboard component. You can add style to change the background, border, etc.
  1. 1.
    .public-dashboard-page Refers to the main component container div.
  2. 2.
    .widget-visualization Refers to the widget component container div. You can add style to change the background, border, etc.
  3. 3.
    .query-link > .visualization-name Refers to the name of widget in bold.
  4. 4.
    .query-link > :nth-child(2) Refers to sub-text for widget name.