Comments (14)
Yes. TradingView is the market leader. A cold start might be hard. Let’s hop on a 30 - 45 minuters call with @tsorro and go through it. Let’s also make a short recording of it, so we might publish a bits of it later as a tutorial. We’ll give you a crash course.
from frontend.
Meanwhile please peak on uPlot code and website for examples. It is not the easiest library, but it’s still much better than starting building something like this from the scratch.
from frontend.
@miohtama are you aware of specific sites that provide a high quality zooming / panning experience for trading charts (or similar time-series data)?
from frontend.
Let’s hop on a 30 - 45 minute call with @tsorro and go through it.… We’ll give you a crash course.
Sounds good. I'm assuming next week, given how busy you guys are at Avalanche?
from frontend.
Meanwhile please peak on uPlot code and website for examples. It is not the easiest library, but it’s still much better than starting building something like this from the scratch.
👍 makes sense. I started reviewing the uPlot code yesterday, as well as their docs / examples – will continue exploring today. I also started some high-level research into other open-source alternatives (Chart.js, Carbon Charts, other D3-based solutions).
If I reach a point where I'm blocked, I'll move on to the next issue.
Thanks… enjoy the rest of the summit!
from frontend.
Yes. TradingView is the market leader. A cold start might be hard. Let’s hop on a 30 - 45 minuters call with @tsorro and go through it. Let’s also make a short recording of it, so we might publish a bits of it later as a tutorial. We’ll give you a crash course.
@kenkunz I’d be happy to hop on a brief video call to show you a standard functionality that charting tools typically provide. I believe I would find a slot tomorrow afternoon my time or Friday afternoon if that would help you progress.
from frontend.
@tsorro thanks – that would be helpful.
My schedule is flexible, so you name the time that's best for you:
- Thursday – anytime after 8am Chicago / 2pm CET
- Friday – anytime after 9am Chicago / 3pm CET
I've done some initial exploration of TradingView chart and ChartIQ – they seem to follow pretty consistent UI conventions.
FYI, I'm not blocked at the moment – I am experimenting with uPlot and some other JS charting options – so if it's easier to wait until next week, that's fine for me as well.
Thanks!
Ken
from frontend.
Per Discord discussion with @miohtama:
Current features
- OHCL + V = 2 baselines
- Double axes
- Time bucket selector
Near term enhancements
- Pan backwards
- Adjust scales by dragging
- Real-time data updates
Long term enhancements
- Technical drawing tools
from frontend.
Trading View
Pros
- traders and strategy developers are very familiar with TradingView UI
- free as-in beer (as long as your use case is public-facing and you display their watermark)
- API is easy for the "happy path" OHLCV chart
- zooming and scrolling animations are pretty smooth (but see data-feed issue below)
- supports basic customizations (colors, show/hide various features)
Cons
- proprietary
- branding – must display TV watermark
- poor documentation / limited support
- convoluted installation (manual copy files to two locations
src/lib/tradingview
andstatic/tradingview
) - data feed limitations – only supports fixed
OHLCV
data points - data feed fetch approach lacks sophistication (requests exactly the data points required to display chart / no look-ahead)
- limitations of UI customizability
from frontend.
ChartIQ
Pros
- branding – fully white-labeled / no third-party watermark required
- more straightforward installation (
npm install
from a downloaded tarball) - documentation and support are much better than Trading View
- flexibility – much easier to customize layout, colors, currency formats, etc. (almost everything can be customized)
- composition-based API (vs. TV "kitchen sink / subtraction" approach)
- data feed format supports arbitrary properties (not tied to OHLCV)
- data feed fetch approach is better than TV (always requests next 300 candles – fewer requests / less visual latency)
- possible to create a UI experience that closely mirrors TradingView / feels familiar to traders and strategy developers
Cons
- proprietary
- license fees (not free but not exorbitant)
- some code overhead required to import and register required modules in Svelte component
- requires more boilerplate code to display a standard OHLCV chart
- zooming and scrolling animations are somewhat jerky compared to TV
from frontend.
D3 + Svelte SVG Components
In addition to the above proprietary solutions, I also did a PoC using D3 for all of the math and Svelte SVG components for all of the rendering.
Pros
- open-source all the way down
- consistent with Svelte's declarative paradigm
- no new library to learn / maintain
- 100% control over styling, and all visual elements are markup / styled with CSS
- opportunity to extract and publish an open-source Financial Chart component library
- potential for SSR – page could load with chart fully rendered (based on default interval / date range) and then hydrate to become dynamic
- fun!
Cons
- lack of off-the-shelf functionality that comes with TradingView or ChartIQ
- beyond the core charting functionality, we would eventually need to implement technical analysis drawing tools as well; the scope of this could be significant
- higher risk – we don't know what we don't know until we get into the weeds
- may run into some performance issues with SVG when a large number of candles are displayed (though initial testing seems promising)
from frontend.
Additional JS Charting Libraries
The following other JS charting solutions were also considered:
- uPlot – current solution used in our code for basic (static) charts; limited features, not well maintained
- Charts.js – mature, well-maintained JS charting solution; canvas-based; no off-the-shelf support for financial charts, panning, zooming (some support via plugins); no trading-specific indicators / studies or technical analysis tools
- Carbon Charts – part of IBM Carbon design system; no off-the-shelf support for financial charts, panning, zooming; no trading-specific indicators / studies or technical analysis tools
- Other D3-based options – Cubism, Plotly, Observable Plot, NVD3, Rickshaw – no significant advantage over using D3 with Svelte SVG components
from frontend.
Decision – ChartIQ
Based on review of PoCs on 19.4.2022 and discussion – team is aligned to go with ChartIQ.
Next steps:
- follow up with ChartIQ folks about payment options (preference for crypto stable coin; fall-back to Euro or Pound sterling)
- create an Epic for implementing ChartIQ in frontend app, along with initial set of issues for v1 / MVP (goal is good enough to replace current uPlot charts; iteratively improve from there)
from frontend.
This spike / investigation issue is complete. See:
from frontend.
Related Issues (20)
- Equity change % not accurate
- Strategy parse error
- Include expected minSharesQuantity in payment transaction
- Add decision cycle to strategy overview metrics
- Aave v2 support
- SvelteKit 2.x upgrade
- Ability to click from a live strategy's main page to the next strategy's main page
- Wrong hostname in backtesting download links
- Update sitemap.xml to include live strategies HOT 3
- Add ETH breakout to strategies and address parse errors
- Body scrolling disabled after navigating from simple -> advanced search
- Update position/trade UIs to support credit positions
- Update strategy tile chart data source
- filter by multiple blockchains in advanced search mode
- pagination missing on dex page
- Add live strategy TVL to strategies index
- Add strategy investment differentiators to open strategies section
- Update profitability colour indicator on strategy tile chart
- Display interest rate for credit positions
- Use tables for metrics on position details
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from frontend.