qognica / qognicafinance-react-lightweight-charts Goto Github PK

I dont know how to add priceFormat in wrappet, in js library is ->

const candleSeries = chart.addCandlestickSeries({
  priceFormat: {
    type: "price",
    minMove: Math.pow(10, -precision),
    precision: precision,
  },
});

• Figure out how to publish to NPM
• Add install instructions to readme
• Add embeded images from NPM

NOTE:

2.0.0 will be rewritten from the ground up and thus this will no longer be a fork of Kaktana. You can follow the work on the new version at https://github.com/Qognica/react-lightweight-charts, which will be replacing this repository when it is finished

How do i update the chart with new data from API?

Describe the bug
I have problem when I want to change background layout color. Exist only white color and the code doesn't change with another color.

To Reproduce
Try change background layout color and you will see

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
Add any other context about the problem here.

Needs to be investigated

Describe the bug
There's a peerDependency on react ^17

To Reproduce
Install on a react 18 project

Expected behavior
Ideally we can use this library with React 18

You want all the cans to be visible on one screen based on the x-axis.
I used fitContent() as follows, but it doesn't work.
What should I do?

<Chart
        options={options}
        candlestickSeries={[{ data: candleSeries }]}
        autoWidth
        height={380}
        onCrosshairMove={handleCrosshairMoved}
        chartRef={(chart) => {
	        chart.timeScale().fitContent();
        }}
/>

and more There is Korean on the marker, can I change it to English?

Type everything correctly

We should fix this

Describe the bug

React code that distributes data for multiple coins to the chart.
With the AxisPressedMouseMove option enabled, if you change the status and insert new data into the chart, the y-axis remains the same as the y-axis value of the previous data.

To Reproduce

https://github.com/perifinance/peri.dex/blob/main/src/screens/Chart/LWchart.tsx

This is the code that contains the entire contents.
The content was too large to be included in codepen.

Expected behavior

As new data enters the chart during status update, the y-axis also changes to suit its status volume

Screenshots

1. Pre-Update Chart
   

2. Chart after update
   

If you zoom in or out on the y-axis, you can see that the data is in.

Additional context

If only AxisPressedMouseMove is false in the code, the issue will occur

Describe the bug

The decimal fraction of the values in the chart corresponding to the y-axis is not regular.
ex) 1.4200, 1.32, 1.2200 ...

This is a formatter that applies logic that cuts the decimal point. We checked that the input and output values are output normally.

However, the priceFormat function within the addCandlestickSeries indicates an irregular decimal length.

To Reproduce

// LWchart.tsx

<Chart
  options={options}
  candlestickSeries={[{ data: chart }]}
  autoWidth
  height={380}
  onCrosshairMove={(param) => handleCrosshairMoved(param, chart[chart.length - 1])}
  chartRef={(chart) => {
  chart.timeScale().fitContent();
  // chart.timeScale().scrollToPosition(2, true);
  chart.addCandlestickSeries({
	  priceFormat: {
		  type: "custom",
		  formatter: (priceValue) => {
			  return decimalSplit(priceValue);
		  },
		  minMove: 0.0000000001,
	  },
  });
  }}
/>

// decimalSplit.ts
export const decimalSplit = (value: string | number) => {
	// return value;

	if (!value) return "0";
	const splitStr = String(value).split(".");
	if (!splitStr[1]) return splitStr[0];

	if (Number(splitStr[0]) > 10) {
		return `${splitStr[0]}.${splitStr[1].slice(0, 2)}`;
	} else if (Number(splitStr[0]) > 0) {
		return `${splitStr[0]}.${splitStr[1].slice(0, 4)}`;
	} else {
		return `${splitStr[0]}.${splitStr[1].slice(0, 8)}`;
	}
};

Github code => https://github.com/perifinance/peri.dex/blob/main/src/screens/Chart/LWchart.tsx

Expected behavior

The values on the y-axis must be numbers of regular length

Screenshots

Additional context

There was no problem with the input output value through the logic I made myself.
An issue occurs in the view group only through priceFormat.