devexperts / dxcharts-lite Goto Github PK
View Code? Open in Web Editor NEWFlexible financial charts based on HTML5 canvas
Home Page: https://devexperts.com/dxcharts/
License: Mozilla Public License 2.0
Flexible financial charts based on HTML5 canvas
Home Page: https://devexperts.com/dxcharts/
License: Mozilla Public License 2.0
Docs examples don't work at next folders:
docs/how-to/y-scale-labels
docs/how-to/set-and-update-candles
docs/how-to/crosstool
Pls, fix them and regenerate codesandboxes after it using yarn generate:codesandbox
Your release process is not bumping the package.json before tar'ing up the source code put with each release on github. This means pulling 2.4.6 pulls 2.4.5 technically if you pull the github tgz.
Download the tar for the latest release
Download the tar and untar it, Validate the package.json version in the resulting folder
package.json version should match the version on github
Applies across the board
No response
By default, a dark theme is used. However, it would be nice to have a standard light theme available as well. This would provide users with the option to choose the theme that best suits their preferences. Additionally, a light theme can improve readability for some users and ensure consistency with other applications that predominantly use light interfaces. Offering both themes would enhance the overall user experience and cater to a wider range of preferences
No response
No response
We need to add dblTouchSubject
in canvasInputListener
to support double tap ections from mobile
No response
No response
For some chart types we need previouly calculated candle data to calculate current candle
No response
No response
Y axis labels are not updated after last candle change
https://jumpshare.com/s/eeAlUixInaK8hhns7FvU
Observe price label and volume labels color
Labels should be updated when last candle changes its value
No response
RxJS bundle is quite big, moreover, some projects might not use it, however, they'll have to include this dependency in their bundle anyway.
I suggest writing a lightweight implementation which will follow this proposal.
Also, we need to make sure that it's compatible with rxjs, since there are existing projects which uses our current implementaion with rxjs
Make dxcharts-lite really lite
Create several drawings and try to move them using the dynamic object model. Sometimes it takes a few seconds for a drawing to assume a new position.
Drawings have to take new position almost immediately
No response
Chart is open
Select 'show crosshair' checkbox
'Volume' in separate mode
Actual result
Sometimes incorrectly displayed 'Volume' label
https://devexperts.com/dxcharts/
Steps to reproduce
Add all labels
Observe 'Volume' label
Label should have the same width as YAxis or smaller
No response
Doji candles are shown as dots
Please see steps below
config.components.chart.showCandlesBorder = false
Doji candles are shown as candles (or dashes)
No response
Dynamic object component has a linked list with all of current objects on the chart and it always contains volumes component, no matter if they are turned off or on.
Volumes are in dynamic object only if they are enabled
No response
I implement Blazor c # based on this Demo code. Can you teach me how to implement this function for a fee? I will open source these codes
I want to understand https://devexperts.com/dxcharts-demo/ Suggested implementation
I want to know https://devexperts.com/dxcharts-demo/ Those APIs were called
We need to improve X-labels generation time
Performance
No response
We should add possibility to disable animations via config.
Sometimes animations can affect performance
config.scale.disableAnimations
= true/false
Prohibit dragging YAxis if config.visible is false
No response
No response
The goal is to allow changing labels type to plain
from badge
for studies
No response
No response
When the data is initially provided into the chart, I assume that the hover subject should emit the last candle in this dataset.
However, it actually emits the second to last one, or even the 4th-5th one. I guess the Y axis is somehow accounted for incorrectly in the X coordinate calculation.
In other words, the chart reports the initial hover as if the mouse pointer was at X = (xCenter of the last candle) - (Y axis width)
https://codepen.io/dmkokovtsev/pen/rNoZJwG
#hover_info
divThe timestamp of the last candle
Windows, Chrome
No response
Exporting types allows them to be imported and used in other files, facilitating type checking, code organization, and reusability.
https://github.com/devexperts/dxcharts-lite/blob/master/src/index.ts
FullChartConfig
or FullChartColors
export type { SomeType, ... } from './...'
ALL
No response
Looks like for histogram chart type lastPriceColor = histogram.up/downCap, which leads to some unexpected results
Histogram label uses histogram.${trend}Bright color from config
No response
Can you share the source code of the demo so that I can learn from it?
No response
No response
Crosstool doesn't appear until some movement happens after long touch
https://jumpshare.com/s/h94gBAwhdPuMRhkuv5LI
Crosstool should appear after longtouch (if visible in settings)
No response
Low label has a different behaviour for displaying near the border than high label
Add a low label on the chart and try to scroll y scale down so it would dissapear. Observe that label hides to early while there is still a space to display it.
Low label won't dissapear unless it's tottaly off the viewport
No response
Precondition:
Colors for chart type = line
are different from standard ones, e.g. like this
DXChart.createChart(container, {
colors: {
lineTheme: {
upColor: '#ccc',
downColor: '#ccc',
noneColor: '#ccc'
}
}
});
When the chart.setChartType
method is called, the last price indicator color does not change until some event triggers repaint (e.g. user interacts with the chart, or new data arrives)
https://codepen.io/dmkokovtsev/pen/qBvMzXM
In the codepen attached, press the "Toggle" button to see the issue
The "last price" indicator should change its color immediately
Chrome/Win10
No response
In our codesandboxes examples we're using our custom CDN to attach dxcharts-lite package to an example.
Since our dxcharts-lite has been published to npm registry, we can use a better CDN like unpkg.com to fetch our chart.
Review and update the documentation to include clear real-world steps on how to update candles in the chart.
Provide comprehensive code samples showing how to update candles in various scenarios, ensuring that users can easily implement the changes in their own projects.
You can use the dxFeed demo endpoint for those purposes: https://demo.dxfeed.com/dxlink-ws/debug/
Clear, concise documentation reduces the time and effort users spend trying to understand how to perform tasks, minimizing frustration and streamlining their workflow.
Clarity in documentation enhances the overall user experience, making it easier for both new and experienced users to navigate the software and achieve their goals effectively.
No response
In right click menu there are options to reorder chart objects. To support it we need to perform a refactoring.
Most likely, we need to draw data series and drawings on the same canvas - DynamicObjectsCanvas.
Moreover, we need to create a new model for dynamic objects.
// looks like discreminated union is a great fit for this interface
interface DynamicObject {
drawer: Drawer; // DrawingsDrawer or DataSeriesDrawer
model: unkown; // DrawingModel or DataSeriesModel
}
DynamicObjectsModel {
// Or linked list? We will have often reordering operations
// and no index access operations.
// Also, delete operations in the middle of the list are quite often (delete drawing, remove studies)
// ListNode<T>{ val: T, prev?: T, next?: T }
// LinkedList<T> { head?: T, tail?: T }
objects: LinkedList<DynamicObject>;
// in our domain models we will have only DrawingModel and DataSeriesModel without ListNode
// so create a hashMap for fast access to ListNode
objectsMap: Map<DrawingModel | DataSeriesModel, ListNode<T>>;
moveForward(listNode)
sendBackward(listNode)
bringToFront(listNode)
bringToBack(listNode)
}
DynamicObjectsDrawer {
draw(objects) {
for (const obj of objects)
{
const { model, drawer } = obj;
drawer.draw(model);
}
}
}
Would be useful to add and setup size-limit package to control package output size.
Package/bundle size is one of the main preference when choosing dependencies in software project and could be additional advantage, because it not only about application size, but also about application performance. Automated controlling of the package size can be helpful in development of this package.
No response
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.