Top Ledger
WebsiteTwitter
  • 👋Welcome to Top Ledger
  • DATA TABLES
    • 📊Solana Data
      • Blocks
      • Transactions
      • Account activity
    • 📊Smart Tables
      • DEX Trades
        • 📊DEX ecosystem on Solana
      • NFT Trades
        • 📊NFT ecosystem on Solana
      • cNFT Trades
        • 📊cNFT ecosystem on Solana
      • Liquid Staking
        • 📊LST ecosystem on Solana
    • ➡️Decoded Instructions Data
      • Metaplex
        • Auction House
        • Token Metadata
        • Candy Machine
          • CM V2
          • CM V1
      • Saber
      • Mercurial Finance
      • Sol Splits
      • Stake Pool
      • Hubble
      • Robox Fi
      • Switchboard V2
      • Drift V2
      • Tulip Protocol
      • AllDomains
      • Whirlpool
      • GooseFX
      • Invariant
      • Squads Protocol
      • xNFT Backpack
      • Sharky
      • Frakt
      • Flash
      • Helium
  • USE CASES
    • 📊Sample Dashboard
  • Developer docs
    • Integrate Topledger dashboards
    • Supported DBs
Powered by GitBook
On this page
  • Introduction
  • Required Libraries
  • Using npm
  • Using yarn
  • Add a few dependencies
  • Copy required fonts to public/fonts directory
  • Usage
  • Dashboard Output
  • Important classes
  1. Developer docs

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.

PreviousSample DashboardNextSupported DBs

Last updated 1 year ago

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)

Using npm

npm install tl-dashboards

Using yarn

yarn add tl-dashboards

Add a few dependencies

yarn add @ant-design/icons
yarn add d3 d3-cloud

Copy required fonts to public/fonts directory

  1. fontawesome-webfont.woff2:

  2. Material-Design-Iconic-Font.woff2:

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. .public-dashboard-page Refers to the main component container div.

  2. .widget-visualization Refers to the widget component container div. You can add style to change the background, border, etc.

  3. .query-link > .visualization-name Refers to the name of widget in bold.

  4. .query-link > :nth-child(2) Refers to sub-text for widget name.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2
https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/fonts/Material-Design-Iconic-Font.woff2