# trading-vue-js

**Repository Path**: jjhoc/trading-vue-js

## Basic Information

- **Project Name**: trading-vue-js
- **Description**: 💹 Hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


<div align="center">
  <img width="318" heigth="256" src="https://raw.githubusercontent.com/C451/trading-vue-js/master/assets/README-c8a97eb7.png?raw=true" alt="trading-vue logo">
</div>

# TradingVue.js ![npm](https://img.shields.io/npm/v/trading-vue-js.svg?color=brightgreen&label=version) ![license](https://img.shields.io/badge/license-MIT-blue.svg) ![GRUGLIKE](https://img.shields.io/badge/GRUG-LIKE-yellow.svg) ![build](https://img.shields.io/badge/build-passing-brightgreen.svg) ![size](https://img.shields.io/github/size/C451/trading-vue-js/dist/trading-vue.min.js.svg) [![Gitter](https://badges.gitter.im/Trading-Vue-js/community.svg)](https://gitter.im/Trading-Vue-js/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

**TradingVue.js** is a hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts.

## 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](https://www.tradingview.com) in other open-source libraries and can't stand it - you are definetly in the right place!

<br>

<div align="center">
    <img width="780" heigth="446" src="https://github.com/C451/trading-vue-js/blob/master/assets/README-new-preview.gif?raw=true" alt="White preview">
</div>

<br>

## Features

* Scrolling & zooming as we all like
* Simple API for making new overlays
* No need for fancy math
* One overlay === one .vue component
* Fully reactive
* Fully responsive
* Customizable colors and fonts

## Demo & Docs

### [Demo](https://c451.github.io/trading-vue-demo/) | [Getting Started](https://github.com/C451/trading-vue-js/tree/master/docs/guide#getting-started) | [API Book](https://github.com/C451/trading-vue-js/tree/master/docs/api#api-book) | [Built-in Overlays](https://github.com/C451/trading-vue-js/tree/master/docs/overlays#built-in-overlays) | [Examples](https://github.com/C451/trading-vue-js/tree/master/test/tests) | [101 Project](https://github.com/C451/trading-vue-101) | [llll Gitter](https://gitter.im/Trading-Vue-js)

## Install

**NPM**
```
npm i trading-vue-js
```
**In browser**

```
<script src="trading-vue.min.js"></script>
```

## How to use

Minimal working example:

```html
<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

```js
{
    "chart": [   // Mandatory
        "type": "<Chart Type, e.g. Candles>",
        "data": [
            [timestamp, open, high, low, close, volume],
            ...
        ],
        "settings": { } // Settings (depending on Chart Type)
    ],
    "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:

 ```json
 {
     "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:

```js
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

<div align="center">
  <img src="https://github.com/C451/trading-vue-js/blob/master/assets/README-0027a833.png?raw=true" alt="trading-vue logo">
</div>

#### [ Code | click your 🐁 ](https://gist.github.com/C451/6d8ea8d603e3faadd801b4b3f2e7a57d)


## Roadmap

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

Progress in details: https://github.com/C451/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*

**Build the bundle**

```
npm run build
```

**Visual testing**

```
npm run test
```

*Server is running on http://localhost:8080*


## Contributing

1. Fork ( https://github.com/C451/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

## Donation

ɃTC 19vDB2pyn2ndJBH4p6We2SJNe8VZggyxfG

ETH 0xFD3e4be6d3dAfCba7aFC7BE8b3D00847682158e8