Skip to content

Instantly share code, notes, and snippets.

@TrystonPerry
Last active May 25, 2022 01:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TrystonPerry/a0706043e0d1f4846be72378bf7e8546 to your computer and use it in GitHub Desktop.
Save TrystonPerry/a0706043e0d1f4846be72378bf7e8546 to your computer and use it in GitHub Desktop.

ViperCharts 🐍

Viper Charts is an entirely new open source charting platform & framework built from scratch. The aim is to replicate TradingView's powerful UI & UX while focusing on cross market and exchange data comparison.

Currently Viper is still in the early stages, but we are transitioning between closed alpha to a private paid beta.

[https://staging.vipercharts.com] Access The Demo

Explore 35 Minute Demo Video on YouTube

Table of Contents

Our Mission

Our mission, is to create an open ecosystem of standardized APIs, so that traders and data enthusiasts have a single platform for visualizing and comparing data across exchanges, markets, and ecosystems.

TradingView, being a centralized company, will never be able to offer all the data its customers could want. If you wanted to compare Bitcoins intraday price action against an order-book heatmap from a small DEX, you'd either have to switch between multiple tabs or build your own front-end to load data from two separate sources. With so much data out there, there must be a better way.

On our own, we can't offer or track all the data out there, but that's where the beauty of open source and the free market come in. In Viper, the community will be able to collect and sell access to their datasets via The Provider API. Viper will truly live up to the phrase, "built by traders, for traders".

Intro

Upon first loading Viper, you will be greeted by a blank chart. This is your canvas in which you can plot any data.

Unlike traditional charting platforms, a chart in Viper does not have a single market in view. Instead, you have datasets which contain their own data models. (eg: dataset: FTX:BTC-PERP, dataModels: price,oi,funding,volume).

To get started with plotting data, we recommend exploring the preconfigured templates. This way you can get used to the utility the platform provides quicker.

Templates

In Viper, templates are pre-configured layouts of datasets for quick-switching between indicator combinations faster. You can explore available templates by clicking the Templates button on the top left of the app bar.

Once open, you will be presented with a modal listing all available templates. Included, are charts like Bitcoin High Timeframe Overview for assessing an individual market. Others, however, like Relative Open Interest Percentage Chart are built dynamically on our servers. This one in particular, plots the Open Interest of all FTX perpetual markets we support.

When you select one, the modal will close and the chart template will be loaded. From here, you can begin to interact with the chart by resizing the range, dragging the viewport, changing the timeframe, or adding / removing indicators.

Supported Datasets

Currently, we are only tracking a handful of FTX perpetual markets. We plan to support many more exchanges and spot / perp pairs in the future.

Within these few markets that we support however, you'll find plenty of room for play and custom layouts.

If you look to the top bar, and click the Plot Data button, you'll see the Plot Data modal. Here you will be able to see all existing Dataset Groups, or create a new group. Click Create New Group.

From here, you can see all Datasets and their corresponding models currently implemented in Viper. For now, this list is only of officially supported datasets. In the future, this is where you could search for data provided by external Providers as well.

Each dataset has 3 distinct properties. Source, name, and supported models. In this example, a few datasets are listed. Let's take BTC-PERP for example. The source is "FTX", the name is "BTC-PERP", and the supported models include Price, Open Interest, Funding Rate, Predicted Funding Rate, Volume By Side, and Footprint (volume by price).

Not only is this useful for seeing what data you can plot from each dataset, but as you will learn, indicators use these data model definitions to detect what would be the proper indicator to fit a specified model. (ie: Price fits Candlestick & SMA).

Click on a Dataset to add that as a new Dataset Group.

Now with our first Dataset Group added, we can begin plotting data and indicators. Here, in the Indicators modal, we see a horizontal list of all the supported data models. The first one, Price, being auto-selected.

Below, is a list of all supported Bases and Indicators. Bases refers to basic plot types like Line, Candlestick and Footprint. Essentially, bases are base plot types. Indicators on the other hand, are your more complicated and non-standard plot types, usually manipulating the data (ie: SMA, Bollinger Bands). This isn't terribly important, but as a new user it may initially be confusing.

Now that we understand this modal, let's plot Predicted Funding Rate as Candlesticks.

First, we click the data model we want to load data from. In this case, it's Predicted Funding Rate. So we select that, and below we see all the indicators that can be used with this data model. So we click, Candlestick.

You can now see the Predicted Funding Rate candlestick chart. Now, let's plot the actual Funding Rate.

Instead of clicking Plot Data again, we can instead right click the Dataset Group in the top left of the chart, and click Add Indicator. This presents us with the same modal as before, but with the Dataset already selected.

From there, you can plot Funding Rate. But not as a Candlestick. This is because in our API specification, Predicted Funding Rate is marked to match the OHLC native Viper model. Meaning that any indicator that can consume OHLC data, can be rendered with this data model. Funding Rate however, is marked as "value". This means that each time period only returns one value instead of (open, high, low and close). Therefore, Candlesticks are not able to be rendered.

This is very important for the future of Viper, because it means that as more users build out custom indicators and custom datasets, we may run into issues where certain combinations should be possible, but are not. Or we would not be able to tell the difference between OHLC and orderbook data.

This implementation means that as the ecosystem grows, builders who don't even know each other can have their tools used in tandem by their customers. Thus, making the ecosystem's utility grow exponentially.

To plot data below the chart, click the Off Chart button next to the indicator name. Unlike in TradingView, indicators do not specify whether they should overlay the main chart or not. We decided with this approach because we think it makes the codebase more unopinionated.

To remove a layer, either click the x next to the indicator name, or right click in the layer and click Delete Layer.

Indicators

Controls

A-Z

Like on TradingView, typing on your keyboard will bring up the Change Dataset modal. The dataset group to be changed is based on the one currently selected. You can see which dataset group is selected, by the green line to the left of it. Quick switch between selected dataset groups by pressing Shift + (1-9).

If you have no dataset groups available, typing will open the create new dataset group modal.

Shift + (1 - 9)

This changes which dataset group you have selected. Shift + 1 selects the first group listed. Shift + 3, the third. All the way up to 9. If you only have 2 groups plotted and press Shift + (3 - 9), a modal will be opened to create a new dataset group.

/

Opens the add indicator modal to quickly add an indicator to the selected dataset group.

Middle Mouse Zoom

Zoom in and out on crosshair selected time. Similar to TradingLite's zoom feature.

Ctrl + Middle Mouse Zoom

Unlocks Y scale and zooms in and out on both time and y scale. Great for zooming into details on charts.

Shift + Middle Mouse Zoom

Zooms in out on crosshair selected price. (experimental)

Right Mouse Button

Over Main Viewport

Quick options for managing the chart.

  • Reset Scale
  • Reset Chart View
  • Full Screen
  • Delete Layer
  • Delete Chart

Over Y Scale

Switch between scale types for selected layer.

  • Default Scale Type
  • Percent Scale Type
  • Normalized Scale Type

Over Time Scale

Double Click Mouse Down

Over Main Viewport

Toggle layer fullscreen

Over Y Scale

Reset Scale

Over Time Scale

Reset Scale

Delete

Deletes the selected chart. If only one chart is present, nothing happens.

Scripting

Bug Reports

Viper has not been tested in all major browsers. It is primarily used in Google Chrome and Brave on Windows 10. If you happen to be using a different browser or operating system, please be aware of this. Our final product will be thoroughly tested.

If you would like to report bugs, please do so in the #dev channel on our discord.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment