Ticker

Overview:

A highly customizable and installable prices ticker to display real-time market prices and price changes on 3rd party websites or apps using data from TradrAPI. This ticker is designed to show information related to financial instruments, with each block of information referred to as a TickerItem.

The ticker can be configured to display trending directions, fetch data at regular intervals, and be easily integrated into any frontend project.

Table of Contents

• Features
• Installation
• Configuration Options
• Usage Examples
• Supported Securities

Features

• Real-time scrolling ticker displaying market prices and changes.
• Fetches data from TradrAPI endpoint.
• Configurable on initialization with options such as project UID, scrolling direction, included instruments, securities, data type (change, ask, bid), and sorting function.
• No dependencies on 3rd party JavaScript libraries.
• Easily installable via npm

Installation

The TradrAPI Ticker can be installed via npm. To install the package, run the following command:

npm install @tradrapi/ticker

Configuration Options

To start using the ticker in your project, you'll need to initialize it with the following options:

import  { Ticker }  from  '@tradrapi/ticker';

const ticker = new Ticker({
   projectUid: "OSP",
   securities: ["crypto"],
   type: ["Change"],
   rootElement: "ticker-root" // this should be an id of an existing html element,
});

Alternatively, an example in React:

import { useEffect } from "react";
import { TradrAPITicker } from "@tradrapi/ticker";

export default function App() {
  useEffect(() => {
    // Initialize
    const ticker = new Ticker({
      projectUid: "OSP",
      securities: "crypto",
      type: ["Change"],
      rootElement: "App" // this should be an id of an existing html element
    });
  }, []);
  
  return (
    <div className="App">
      <h1>Price indicators</h1>
    </div>
  );
}

The package supports several configuration options to customize its behavior. Here are the available options:

Initialization Options for TradrAPI Ticker

When initializing the TradrAPI Prices Ticker, you have the flexibility to configure its behavior according to your project's specific requirements. Here's a breakdown of the available initialization options:

1. projectUid (Required):

   • Type: string
   • Description: This is a unique identifier (UID) assigned to each brand. It is a required field, ensuring that the ticker fetches data from the correct brand.

2. accountId (Optional):

   • Type: number
   • Default: null
   • Description: This is a unique identifier (UID) assigned to each account. If provided, the ticker will fetch data for the specified account; otherwise, it will fetch data for the brand.

3. rtl (Optional):

   • Type: boolean
   • Default: false
   • Description: Defines the scrolling direction of the ticker. If set to true, the ticker will scroll from right to left; otherwise, it will scroll from left to right.

4. instruments (Optional):

   • Type: string[]
   • Default: All instruments
   • Description: An array defining the specific instruments to be included in the ticker. If provided, only the specified instruments will be displayed; otherwise, all instruments will be included by default.

5. securities (Optional):

   • Type: string[]
   • Default: All securities
   • Description: An array specifying the securities to be included in the ticker. If provided, only the specified securities will be displayed; otherwise, all securities will be included by default.

6. type (Optional):

   • Type: Enum<Change, Ask, Bid>[]
   • Default: ['change']
   • Description: Defines the type of data that the ticker will display for each TickerItem. Options include:
     • Change: Displays the percentage change of the instrument.
     • Ask: Displays the current ask price of the instrument.
     • Bid: Displays the current bid price of the instrument.
     • You can include multiple types in the array to display multiple data types simultaneously.

7. sort (Optional):

   • Type: (TickerItem[]) => TickerItem[]
   • Description: A custom sorting function that can be passed to the ticker on initialization. This function is applied to the list of ticker prices before rendering. Use cases may include altering the order of elements or wrapping each TickerItem in a link. The function should return the modified list of TickerItems.

Usage options

Upon initialization the ticker will start animating, to pause or resume the animation, call:

Ticker.toggleAnimation();

Supported Securities

The list of supported securities may be obtained via API using the TradrAPI SDK. Usage requires a valid API key.

Alternatively, the list of supported securities is as follows:

• Big Cryptos
• BTC
• Commodities
• Crypto
• Crypto alt
• Crypto M
• Cryptos
• Elite
• Energies
• Equities US
• EU Shares
• Exotics M
• Fixed
• Fixed Indexes
• Fixed Metals
• FMS
• Forex
• Forex Crosses
• Forex Exotics
• Forex M
• Forex Majors
• Forex Pegged
• Forex Pro Cross
• Forex Pro Major
• Forex Var Cross
• Forex Var Major
• Forex VIP Cross
• Forex VIP Major
• Forex X
• Futures
• FXS
• GOLD
• GOLD M
• GOLD X
• Indexes
• Indices
• Metals
• Mini Forex
• Mini Indexes
• Scalping
• Scalping Indexes
• Scalping Metals
• SPC Indexes
• VIP Crosses
• VIP Majors