Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/makskornakov/canvas-trading-demo
Demo project for canvas-trading drawing module
https://github.com/makskornakov/canvas-trading-demo
Last synced: about 2 months ago
JSON representation
Demo project for canvas-trading drawing module
- Host: GitHub
- URL: https://github.com/makskornakov/canvas-trading-demo
- Owner: makskornakov
- Created: 2022-11-25T21:37:09.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-03T09:22:48.000Z (over 1 year ago)
- Last Synced: 2024-07-29T09:31:00.068Z (about 2 months ago)
- Language: TypeScript
- Homepage: https://makskornakov.github.io/canvas-trading-demo/
- Size: 52.2 MB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Interactive trading canvas
### React Typescript open source module
Initially was made for an existing trading bot that provides an analyzed array of candles.
[GitHub repository](https://github.com/makskornakov/canvas-trading-demo)\
[Demo application](https://makskornakov.github.io/canvas-trading-demo/)
## Candle type
```typescript
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[]
```typescript
interface AssignedTrade {
tradeID: number;
tradeType: 'long' | 'short';
buyPrice: number;
sellPrice: number;
profit: number;
isThisCandleStart: boolean;
isThisCandleEnd: boolean;
}
```
### Indicators in candle.indicators
```typescript
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
```typescript
import Canvas, { CandleToDraw } from 'canvas-trading';
function App() {
return (
);
}
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`][canvas-trading] is the package we want to develop):
```ps1
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`][canvas-trading] for a test.
#### When you're done
In project root execute:
```ps1
pnpm unlink canvas-trading
```
You may also want to stop the terminal running `pnpm tsc --watch`.
No need to stop the `pnpm start` terminal (if you have it running).
[canvas-trading]: ./packages/canvas-trading/