Canvas-trading NPM

Interactive trading canvas

React Typescript open source module

Initially was made for an existing trading bot that provides an analyzed array of candles.

Candle type

interface CandleToDraw {
  open: number;
  openTime: string | Date;
  closeTime: string | Date;
  high: number;
  low: number;
  close: number;
  indicators: Indicators; //bellow
  trades?: AssignedTrade[];
  asset?: string;
}

Trade in the candle.trades[]

interface AssignedTrade {
  tradeID: number;
  tradeType: 'long' | 'short';
  buyPrice: number;
  sellPrice: number;
  profit: number;
  isThisCandleStart: boolean;
  isThisCandleEnd: boolean;
}

Indicators in candle.indicators

interface Indicators {
  revBar: 'buy' | 'sell';
  fractal: 'up' | 'down';
  alligator: {
    jaw: number;
    teeth: number;
    lips: number;
  };
  ao: {
    value: number;
    // Custom value used by bot
    vertexValue: number;
    // Starts with 0, goes through array;
    // +1 if green AO bar, -1 if red;
    // Displays the strength of AO trend
  };
}

The logic of assigning the trade

Each trade has an entry time and an exit one. We search for two candles (enter & exit) for each trade and add AssignedTrade to the trades array.

Simple Usage

import Canvas, { CandleToDraw } from 'canvas-trading';

function App() {
  return (
    <Canvas
      // Mandatory
        width={800}
        height={400}
        candleArray={candleArray} // CandleToDraw[]
        lastCandle={lastCandle} // CandleToDraw

        // Optional
        candlesShown={160}
        shift={0}
        shownTrade={undefined}
        otherSettings={{
          // all optional
          allTradesShown: false, // display all trades
          alligator: true;
          ao: true;
          mountedIndicators: true; // revbar & fractal
          shift: true;
          scroll: true;
          showAsset: false; // shows big asset label
          showLastCandlePrice: false,
          cursor: true,
          resizable: false, // beta version to resize the canvas
        }}
        styles={
          // any styles are applied to the Main wrap of the canvas and fonts are used through the hole canvas
        }
      ></Canvas>
   );
}
export default App;

How to develop local packages with Hot Reload

Reference: https://pnpm.io/cli/link

In a terminal, execute the following commands (assuming canvas-trading is the package we want to develop):

pnpm link ./packages/canvas-trading # `./` in the start is important — this is how `pnpm link` knows that it is a relative path.

cd packages/canvas-trading

pnpm i

pnpm tsc --watch

# Leave this terminal running for Hot Reload.

In another terminal, just execute pnpm start, or restart if it's already running. Good to go!

Update anything in canvas-trading for a test.