Opportunity Watchlist Component

Installation

npm i --save @quantgate-systems/oppwatchlist or if you are using yarn, yarn add @quantgate-systems/oppwatchlist

Note About Updates

Our NPM packages are frequently updated. It is advised to update the NPM component that you are using regularly (ideally with some kind of a background job). To update the NPM package that you are using, please run the following commands:

npm uninstall @quantgate-systems/oppwatchlist followed by npm install @quantgate-systems/oppwatchlist

This will remove and re-add the latest version of the opportunity watchlist. Generally, parameters for the component are not changing frequently, and how the component is used is the same.

Rendered similar to the following:

Usage

create-react-app

import {OppWatchlistApp} from '@quantgate-systems/oppwatchlist';

const queryParameters = new URLSearchParams(window.location.search);
const bg = queryParameters.get('bg');
const styleObj = {
  //layoutType: "layout1"
  //textColor: '#e76184',
  //isButtonSquared: false,
  //dividerColor: "#808000"
  //watchlistbg: "black"
};

/** @description Your unique identifier*/
const userId = queryParameters.get('userid');
/** @description Your key from QuantGate Systems Inc.*/
const key = '';

const [symbols, setSymbols] = useState([]); //changed symbols sent as prop
const [symbolsToRemove, setRemoveSymbols] = useState([]);

const onItemClick = instrument => {
  console.log(instrument);
  SendMessageToWebview(instrument.symbol);
};

const onToplistItemClicked = symbol => {
  console.log(symbol);
};

function SendMessageToWebview(symbol) {
  if (window.chrome.webview) {
    // if contained in a webview
    window.chrome.webview.postMessage(symbol);
  }
}

//your app's symbol handler (OPTIONAL)
/* const handler = () => {
    setSymbols(prev => {
      return [...prev, newSymbolToAdd];
    });
  }; */

/*  useEffect(() => {
    setTimeout(() => {
      //setSymbols(["IBM", "AAPL"]);
      addSymbolsHandler("GOOGL");
    }, 10000);

    setTimeout(() => {
      removeSymbolsHandler("MSFT");
    }, 12000);

  },[]); */

/**@description Event handler to add new symbols */
const addSymbolsHandler = newSymbolsToAdd => {
  setSymbols(prev => {
    return [...prev, newSymbolsToAdd];
  });
};

/**@description Event handler to remove symbols */
const removeSymbolsHandler = symbolsToRemove => {
  setRemoveSymbols(prev => {
    return [...prev, symbolsToRemove];
  });
};

return (
  <OppWatchlistApp
    symbols={symbols}
    symbolsToRemove={symbolsToRemove}
    onSymbolsAdded={symbol => console.log(symbol)}
    credentials={{UserId: userId?.trim(), Key: key?.trim()}}
    onItemClick={onItemClick}
    onToplistItemClicked={onToplistItemClicked}
    isStocksOnly={true} //if true, then Watchlist/Toplist will only show stocks. Else shows All type of securities
    //isSignalsOnly={false} //if true, then price labels will not be shown for Watchlist.
    assetFilters={['CS', 'FX']} //if isStocksOnly is true, it overrides this assetFilters array. Asset types are given below
    miniFilter
    customCardBg={bg ? bg : 'black'}
    styleObj={styleObj}
    showTriggerPills={false} //if true shows Trigger Pills
  />
);
/*
  CS - stocks
  FX - Forex
  FUT - Futures
*/

next.js

import dynamic from 'next/dynamic';

const OppWatchlistApp = dynamic(() => import('@quantgate-systems/oppwatchlist'));

const queryParameters = new URLSearchParams(window.location.search);
const bg = queryParameters.get('bg');

const styleObj = {
  //layoutType: "layout1"
  //textColor: '#e76184',
  //isButtonSquared: false,
  //dividerColor: "#808000"
  //watchlistbg: "black"
};

/** @description Your unique identifier*/
const userId = queryParameters.get('userid');
/** @description Your key from QuantGate Systems Inc.*/
const key = '';

const [symbols, setSymbols] = useState([]); //changed symbols sent as prop
const [symbolsToRemove, setRemoveSymbols] = useState([]);

const onItemClick = instrument => {
  console.log(instrument);
  SendMessageToWebview(instrument.symbol);
};

const onToplistItemClicked = symbol => {
  console.log(symbol);
};

function SendMessageToWebview(symbol) {
  if (window.chrome.webview) {
    // if contained in a webview
    window.chrome.webview.postMessage(symbol);
  }
}

//your app's symbol handler (OPTIONAL)
/* const handler = () => {
    setSymbols(prev => {
      return [...prev, newSymbolToAdd];
    });
  }; */

/*  useEffect(() => {
    setTimeout(() => {
      //setSymbols(["IBM", "AAPL"]);
      addSymbolsHandler("GOOGL");
    }, 10000);

    setTimeout(() => {
      removeSymbolsHandler("MSFT");
    }, 12000);

  },[]); */

/**@description Event handler to add new symbols */
const addSymbolsHandler = newSymbolsToAdd => {
  setSymbols(prev => {
    return [...prev, newSymbolsToAdd];
  });
};

/**@description Event handler to remove symbols */
const removeSymbolsHandler = symbolsToRemove => {
  setRemoveSymbols(prev => {
    return [...prev, symbolsToRemove];
  });
};

return (
  <BrowserOnly>
    <OppWatchlistApp
      symbols={symbols}
      symbolsToRemove={symbolsToRemove}
      onSymbolsAdded={symbol => console.log(symbol)}
      credentials={{UserId: userId?.trim(), Key: key?.trim()}}
      onItemClick={onItemClick}
      onToplistItemClicked={onToplistItemClicked}
      isStocksOnly={true} //if true, then Watchlist/Toplist will only show stocks.
      //isSignalsOnly={false} //if true, then price labels will not be shown for Watchlist.
      assetFilters={['CS', 'FX']} //if isStocksOnly is true, it overrides this assetFilters array. Asset types are given below
      miniFilter
      styleObj={styleObj}
      showTriggerPills={false} //if true shows Trigger Pills
    />
  </BrowserOnly>
);
/*
  CS - stocks
  FX - Forex
  FUT - Futures
*/