TradingVue.js was a hackable charting lib for traders.

Related tags

Charts toptrader-vue
Overview
trading-vue logo

TradingVue.js npm license build size Gitter DONATE

TradingVue.js was a hackable charting lib for traders. You could draw literally ANYTHING on top of candlestick charts. [Not Maintained]

Why

If you create trading software - this lib is probably for you. If you like to make custom indicators and think out of the box - this lib is most likely for you. And if you miss usability of TradingView.com in other open-source libraries and can't stand it - you are definetly in the right place!


White preview

Features

  • Scrolling & zooming as we all like
  • Simple API for making new overlays
  • Custom drawing tools
  • Non-time based charts (e.g. Renko)
  • One overlay === one .vue component
  • Fully reactive
  • Fully responsive
  • Customizable colors and fonts
  • Quite fast (works even with 3 mil candles)
  • Scripts (make your own indicators)

Demo & Docs

Demo | Getting Started | API Book | Built-in Overlays | Examples | 101 Project | llll Gitter | FAQ | FREE Overlay Pack | Free XP Pack | Playground

To run the examples, download the repo & npm run test

Install

NPM

npm i trading-vue-js

In browser

">

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 (DSM). The library provides you with functions that map your data (it could be anything) to screen coordinates. The lib does all the dirty work behind the scenes: scrolling, scaling, reactivity, etc.

layout.t2screen(t) // time -> x
layout.$2screen($) // price -> y
layout.t_magnet(t) // time -> nearest candle x
layout.screen2$(y) // y -> price
layout.screen2t(x) // x -> time

Using these functions and the standard js canvas API, you can do magic.

Data structure

PRO TIP: chart is mandatory if you want to see something other than a white screen

IMPORTANT: All data must be sorted by time (in ascending order). The main OHLCV must not contain duplicate timestamps.

Full version of DataStructure

", "data": [ [timestamp, open, high, low, close, volume], ... ], "settings": { } // Settings (depending on Chart Type) }, "onchart": [ // Displayed ON the chart { "name": " ", "type": " ", "data": [ [timestamp, ... ], // Arbitrary length ... ], "settings": { } // Arbitrary settings format }, ... ], "offchart": [ // Displayed BELOW the chart { "name": " ", "type": " ", "data": [ [timestamp, ... ], // Arbitrary length ... ], "settings": { } // Arbitrary settings format }, ... ] }">
{
    "chart": {   // Mandatory
        "type": "
       
        "
       ,
        "data": [
            [timestamp, open, high, low, close, volume],
            ...
        ],
        "settings": { } // Settings (depending on Chart Type)
    },
    "onchart": [ // Displayed ON the chart
        {
            "name": "
       
        "
       ,
            "type": "
       
        "
       ,
            "data": [
                [timestamp, ... ], // Arbitrary length
                ...
            ],
            "settings": { } // Arbitrary settings format
        },
        ...
    ],
    "offchart": [ // Displayed BELOW the chart
        {
            "name": "
       
        "
       ,
            "type": "
       
        "
       ,
            "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 'trading-vue-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 the title doesn't lie: you can draw ANYTHING.

Grin

trading-vue logo

Code | click your 🐁

Roadmap

  • Docs
  • Tests
  • Solve known issues (marked as 'TODO: IMPORTANT') [PARTIALLY]
  • Performance improvements
  • Data-manipulation helpers
  • Add more built-in overlays
  • Add toolbar (drawing tools)
  • Custom loayout / layout persistence[POST-RELEASE]
  • Fix and improve mobile version
  • Version 1.0.0 here

Progress in details: https://github.com/tvjsx/trading-vue-js/projects/1

Changelog

See CHANGELOG.md

Development & Building

Install devDependencies

npm install

Run development enviroment (hot)

npm run dev

Server is running on http://localhost:8080

Run in a CDN-like mode

npm run cdn

Server is running on http://localhost:8080

Build the bundle

npm run build

Visual testing

npm run test

Server is running on http://localhost:8080

Automatic testing

npm run auto-test

Contributing

  1. Fork ( https://github.com/tvjsx/trading-vue-js/fork )
  2. Create your feature branch (git checkout -b cool-new-feature)
  3. Commit your changes (git commit -am 'Let's rock smth')
  4. Push to the branch (git push origin cool-new-feature)
  5. Create a new Pull Request

Please read the guidelines in CONTRIBUTING.md

Vue3-Charts is a SVG-based charting library that is very easy to use and highly customizable.

Vue3-Charts is an SVG-based charting library that is very easy to use and highly customizable

Alexandru Ghiura 60 Jan 15, 2022
Vue Component for FusionCharts JavaScript Charting Library

vue-fusioncharts A simple and lightweight VueJS component for FusionCharts JavaScript Charting Library.

FusionCharts 78 Jan 15, 2022
Reactive Vue.js wrapper for Google Charts lib

vue-google-charts Reactive Vue.js wrapper for Google Charts lib Table of contents Installation Usage Example Installation npm i vue-google-charts Def

Devstark 383 Jan 10, 2022
💹 HTradingVue.js was a hackable charting lib for traders.

TradingVue.js was a hackable charting lib for traders. You could draw literally ANYTHING on top of candlestick charts

TVJS 1.5k Jan 22, 2022
Deliverance is a Web UI for the Space Traders API.

Deliverance Deliverance is a Web UI for the Space Traders API. You can access it at deliverance.forcookies.dev, or get it running yourself locally fol

Stumblinbear 14 Nov 30, 2021
🍪 👮 Hackable EU Cookie Law Plugin for Vue.js

?? ?? Vue Cookie Law EU Cookie Law Plugin for Vue.js ?? Demo ?? Install yarn add vue-cookie-law ?? Usage <template> <footer> <cookie-law theme="

Jakub 361 Jan 17, 2022
Simple and hackable file uploader for VueJs. Supports Vue = 2.1

Introduction Vue clip is a minimalistic and hackable file uploader for VueJs. I wrote this plugin due to the absence of well written file uploaders wi

Harminder Virk 222 Nov 18, 2021
A hackable slideshow framework built with Vue.js

Eagle.js - A slideshow framework for hackers Slideshow system built on top of the Vue.js Supports animations, themes, interactive widgets (for web dem

null 4k Jan 12, 2022
Vue3-Charts is a SVG-based charting library that is very easy to use and highly customizable.

Vue3-Charts is an SVG-based charting library that is very easy to use and highly customizable

Alexandru Ghiura 60 Jan 15, 2022
A hackable slideshow framework built with Vue.js

Eagle.js - A slideshow framework for hackers Slideshow system built on top of the Vue.js Supports animations, themes, interactive widgets (for web dem

null 4k Jan 12, 2022
Vue Component for FusionCharts JavaScript Charting Library

vue-fusioncharts A simple and lightweight VueJS component for FusionCharts JavaScript Charting Library.

FusionCharts 78 Jan 15, 2022
Reactive Vue.js wrapper for Google Charts lib

vue-google-charts Reactive Vue.js wrapper for Google Charts lib Table of contents Installation Usage Example Installation npm i vue-google-charts Def

Devstark 383 Jan 10, 2022
A fantastic mobile ui lib implement by Vue.

A fantastic mobile ui lib implement by Vue.

DiDi 8.9k Jan 14, 2022
simple calculation lib with lazy feature 🎲➕➖➗✖️

vue-lazy-calc this is a simple calculation plugin in lazy way. (inspired by lodash) features vue friendly strong typed lazy evaluation chaining method

Vincent Guo 8 Jul 30, 2020
The vue lib for markdown-it.

markdown-it-vue The vue lib for markdown-it. Demo online http://www.aqcoder.com/markdown Install npm install markdown-it-vue Running Demo yarn install

fanliwen 259 Jan 14, 2022
this is a test project for test vbaobab vue3.0 ui lib

test-vbaobab Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints a

Rentoo 0 Dec 26, 2021
sample for calling wasm-packed lib

Vue 3 + Typescript + Vite This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setu

RolloTomasi 0 Dec 26, 2021