Price-indicator NPM

Price Indicator

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.

Features
Configuration Options
Installation
Supported Securities
Usage Examples
Contributing
License

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

Configuration Options

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

Initialization Options for TradrAPI Prices 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:

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.
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.
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.
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.
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.
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.

Example Configuration:

const ticker = new TradrAPIPricesTicker({
  projectUid: 'your_project_uid',
  rtl: false,
  instruments: ['ETHUSD', 'TSLA'],
  securities: ['crypto'],
  type: ['change'],
  sort: (tickerItems) => {
    // Your custom sorting logic here
    return tickerItems;
  },
});

Initially, the animation is set to play. To pause the animation, call

TradrAPIPricesTicker.pauseAnimation()

Call the same method again to resume the animation

This will pause the animation.

By utilizing these initialization options, you can tailor the TradrAPI Prices Ticker to suit the specific needs and preferences of your project, providing a seamless and customizable user experience for displaying market prices and changes.

Installation

To install and use your package in a website or app, follow these steps:

Install the package via npm:
```
npm install @tradrapi/price-indicator
```

Import the package in your code:

// Example usage in code
const { TradrAPITicker } = require('price-indicator');

Start using the features and functionalities provided by your package.

Supported Securities

Your npm package supports the following securities:

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
...

Usage Examples

Provide code snippets or examples demonstrating how to use your npm package in different scenarios. Showcasing real-world use cases can help users understand how to integrate and leverage your package effectively.

import { useEffect } from "react";
import { TradrAPITicker } from "price-indicator";
export default function App() {
  useEffect(() => {
    console.log("Tracking times");
    // Initialize and use your library
    const ticker = new TradrAPITicker({
      projectUid: "OSP",
      accountId: 100040665,
      rtl: false,
      securities: "crypto",
      instruments: [],
      type: ["Change"],
      rootElement: "App" // this should be an id of an existing html element,
      apiUrl: "" // this allows for one to specify where the market prices data should be fetched from
    });

    // Cleanup logic if necessary
    return () => {
      // Perform cleanup, e.g., clear intervals or event listeners
    };
  }, []);
  return (
    <div className="App">
      <h1>Price indicators</h1>
    </div>
  );
}