GitHub - C451/trading-vue-js: ? Hackable charting lib for traders. You can draw...
source link: https://github.com/C451/trading-vue-js
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
TradingVue.js
TradingVue.js is a hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.
Why?
I've been using TradingView.com for several years and oh boy, I like this service. But when it came to writing custom trading software there was no charting library with the same level of usability, not even near. There WAS no lib.
Features
- Scrolling & zoomming as we all like
- Simple API for making new overlays
- No need for fancy math!
- One overlay === one .vue file (or .js)
- Fully reactive
- Fully responsive
- Customizable colors and fonts
Demo & Docs
Demo | click your ?
Install
NPM
npm i trading-vue-js -S
In browser
<script src="trading-vue.min.js"></script>
How to use
Minimal working example:
<template> <trading-vue :data="this.$data"></trading-vue> </template> <script> import TradingVue from 'trading-vue-js' export default { name: 'app', components: { TradingVue }, data() { return { ohlcv: [ [ 1551128400000, 33, 37.1, 14, 14, 196 ], [ 1551132000000, 13.7, 30, 6.6, 30, 206 ], [ 1551135600000, 29.9, 33, 21.3, 21.8, 74 ], [ 1551139200000, 21.7, 25.9, 18, 24, 140 ], [ 1551142800000, 24.1, 24.1, 24, 24.1, 29 ], ] } } } </script>
Core philosophy
The core philosophy is Data -> Screen mapping. Thus, the lib provides you with functions that map your data (whatever) to screen coordinates. The lib does all the dirty work behined the scenes: scrolling, scaling, reactivity, etc.
layout.t2screen(t) // time -> x
layout.$2screen($) // price -> y
layout.t_magnet(t) // time -> neareset candle x
layout.screen2$(y) // y -> price
layout.screen2t(x) // x -> time
Using these functions and the standard js canvas API, you can do the magic.
Data structure
PRO TIP: ohlcv is mandatory if you want to see something other than a white screen
{ "ohlcv": [ [timestamp, open, high, low, close, volume], ... ], "onchart": [ // Displayed ON the chart { "name": "<Indicator name>", "type": "<e.g. EMA, SMA>", "data": [ [timestamp, ... ], // Arbitrary length ... ], "settings": { } // Arbitrary settings format }, ... ], "offchart": [ // Displayed BELOW the chart { "name": "<Indicator name>", "type": "<e.g. RSI, Stoch>", "data": [ [timestamp, ... ], // Arbitrary length ... ], "settings": { } // Arbitrary settings format }, ... ] }
The process of adding a new indicator is simple. First you define your own data format (should be timestamped though) and display settings. For example, EMA data might look like this:
{ "name": "EMA, 25", "type": "EMA", "data": [ [ 1551128400000, 3091 ], [ 1551132000000, 3112 ], [ 1551135600000, 3105 ] ], "settings": { "color": "#42b28a" } },
Example of a simple overlay class
And then you make a new overlay class to display that data on the grid:
import Overlay from '../../mixins/overlay.js' export default { name: 'EMA', mixins: [Overlay], methods: { draw(ctx) { const layout = this.$props.layout ctx.strokeStyle = this.color ctx.beginPath() for (var p of this.$props.data) { // t2screen & $2screen - special functions that // map your data coordinates to grid coordinates let x = layout.t2screen(p[0]) let y = layout.$2screen(p[1]) ctx.lineTo(x, y) } ctx.stroke() }, use_for() { return ['EMA'] }, data_colors() { return [this.color] } }, computed: { color() { return this.$props.settings.color } } }
That's why I said you can draw ANYTHING. Stay with me, I will prove this bold statement to you:
Grin
Code | click your ?
Roadmap
- Docs
- Solve known issues (search for "TODO: IMPORTANT")
- Performance improvements
- Add more built-in overlays
- Add toolbar (drawing tools)
- Custom loayout / layout persistence
- Fix and improve mobile version
- Version 1.0.0 here
Development & Building
Run development enviroment (hot)
npm run dev
Build the bundle
npm run build
Contribution
In progress
Donations
ɃTC 19vDB2pyn2ndJBH4p6We2SJNe8VZggyxfG
ETH 0xFD3e4be6d3dAfCba7aFC7BE8b3D00847682158e8
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK