Code Monkey home page Code Monkey logo

tradex-app / tradex-chart Goto Github PK

View Code? Open in Web Editor NEW
77.0 77.0 13.0 19.8 MB

TradeX Chart is a trade / stock chart written in plain (vanilla) JavaScript with mobile support

Home Page: https://tradex-app.github.io/TradeX-chart/

License: GNU General Public License v3.0

HTML 10.66% JavaScript 87.75% CSS 0.17% Shell 0.01% TypeScript 1.37% MDX 0.04% Handlebars 0.01% Astro 0.01%
canvas chart crypto cryptocurrency javascript mobile mobile-web nextjs react stock-chart talib technical-analysis technical-indicators trading

tradex-chart's People

Contributors

leoplaw avatar maryiazhynko avatar thebadking avatar tradex-app avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

tradex-chart's Issues

Chart Config

Add API and GUI option to modify chart config.

API will include an options to

  • override the default GUI config.
  • submit callback

Allowed Config will be a list of config options that the end user will be allowed to modify. Each list entry will have the following:

  • config option pointer
  • label
  • form input element type
  • description
  • single line or block
  • form element onChange event subscription

Start TradeX Element with Default Config

When a TradeX element is added to the DOM, automatically start() it with the default config.
When the user / dev executes start(config), execute a config merge instead.

Define Overlay / Indicator Parameters User can Modify

Every Overlay and Indicator has a set of parameters for it's instantiation.
An optional additional parameter publicParams will be added to define which instance parameters should / could be exposed to the end user via the configuration (cog) icon, or other defined by the developer, exposing the config API.

The inbuilt / default configuration invocation will open a dialogue in the chart GUI, which will expose only the parameters defined by publicParams.

Similarly, custom defined configuration invocation will also only expose those defined by publicParams

Using the following feature:
Modify Overlay / Indicator Parameters
#48
would allow for the dynamic modification of what parameters are exposed to the end user.

Data State Hot Swapping

Enable hot swapping of chart data states, which would be useful for changing time frames
Flag to copy drawing tools between state changes
Ensure that chart refreshes / redraws / updates after state change

Chart to Display Data Other Than Stocks / Assets History (eg. Equity)

Currently the chart is only a stock / crypto asset chart. However, the existing functionality used to draw this, could, with also be repurposed so that the same chart library could also display simpler charts / graphs such as equity, thereby reducing the need to use other chart / graph libraries in the Dash2Trade application and the need to build templates specific to them.

Volume as Indicator API

Refactor Volume as an indicator
with option to display on Primary Pane or as a Secondary Pane

Chart jitters when attempting to scroll past the last (recent) candle

When attempting to scroll to the right (future) and the last candle/s are on the left edge of the chart, the chart jitters or shudders.

Chart should not scroll at all, seamlessly allow the chart to scroll into blank future history.

Needs to work with future history boundary.

Y Axis Dynamic Sizing and Dynamic Number Formatting

Currently the Price Scale / Y Axis is of fixed width. Although this is a fixed width, it is configurable in the chart. This should however automatically resize to size / length of the numbers displayed on this axis.
Further, this axis should optionally provide abbreviations for longer numbers if a flag is set.
100,000.00 => 100K

Pixel Perfect Accuracy

The accuracy of clicking on (trade) icons or regions of the chart can be improved. Currently hit detection and positioning is calculated, and owing to rounding errors, the positioning of the hit region in some instances is off to the side of the marker. However there is a pixel perfect hit detection that I have researched which can be implemented which would improve the user experience. It relies upon pixel detection rather than calculations and thus, not prone to the aforementioned errors. The method is efficient, and so does not impact upon the chart / browser performance (speed). Here are some examples.

https://codesandbox.io/s/canvas-hit-detection-l77nlq
https://codesandbox.io/s/canvas-extension-layers-hm8hlv

Implementing this would also allow for more advanced features to be built into the chart if and when required, for instance (PnL) measuring or drawing tools.

Themes - Hot Swapping

Hot swapping of themes - multi-theme support
Swap out entire chart theme after instantiation
Enable the chart to hold multiple themes in memory

Chart Redraw / Update After Indicator Removal Via API

Chart does not automatically redraw (remove from / clean up the display) indicators when removing them using the chart API. The chart however does redraw / update correctly upon any mouse / pointer interaction over the chart. It appears a call to the clean up method is missing.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.