Skip to content

Commit 7f1d72a

Browse files
trash-and-firetrash-and-fire
authored
Merge pull request #21 from trash-and-fire/20_fix_right_offset
20: apply right offset only if changed
2 parents 910ef6a + 2abb918 commit 7f1d72a

File tree

11 files changed

+248
-10
lines changed

11 files changed

+248
-10
lines changed

‎docs/asset-manifest.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
{
22
"files": {
33
"main.css": "/lightweight-charts-react-wrapper/static/css/main.0b2241f9.css",
4-
"main.js": "/lightweight-charts-react-wrapper/static/js/main.06ba6dac.js",
4+
"main.js": "/lightweight-charts-react-wrapper/static/js/main.316c794b.js",
55
"static/js/626.d7e9fbd1.chunk.js": "/lightweight-charts-react-wrapper/static/js/626.d7e9fbd1.chunk.js",
66
"index.html": "/lightweight-charts-react-wrapper/index.html",
77
"main.0b2241f9.css.map": "/lightweight-charts-react-wrapper/static/css/main.0b2241f9.css.map",
8-
"main.06ba6dac.js.map": "/lightweight-charts-react-wrapper/static/js/main.06ba6dac.js.map",
8+
"main.316c794b.js.map": "/lightweight-charts-react-wrapper/static/js/main.316c794b.js.map",
99
"626.d7e9fbd1.chunk.js.map": "/lightweight-charts-react-wrapper/static/js/626.d7e9fbd1.chunk.js.map"
1010
},
1111
"entrypoints": [
1212
"static/css/main.0b2241f9.css",
13-
"static/js/main.06ba6dac.js"
13+
"static/js/main.316c794b.js"
1414
]
1515
}

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/lightweight-charts-react-wrapper/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/lightweight-charts-react-wrapper/logo192.png"/><link rel="manifest" href="/lightweight-charts-react-wrapper/manifest.json"/><title>React App</title><script defer="defer" src="/lightweight-charts-react-wrapper/static/js/main.06ba6dac.js"></script><link href="/lightweight-charts-react-wrapper/static/css/main.0b2241f9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/lightweight-charts-react-wrapper/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/lightweight-charts-react-wrapper/logo192.png"/><link rel="manifest" href="/lightweight-charts-react-wrapper/manifest.json"/><title>React App</title><script defer="defer" src="/lightweight-charts-react-wrapper/static/js/main.316c794b.js"></script><link href="/lightweight-charts-react-wrapper/static/css/main.0b2241f9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

‎docs/static/js/main.06ba6dac.js

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎docs/static/js/main.06ba6dac.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/static/js/main.316c794b.js

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/main.06ba6dac.js.LICENSE.txt renamed to ‎docs/static/js/main.316c794b.js.LICENSE.txt

File renamed without changes.

‎docs/static/js/main.316c794b.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/demo/src/samples/right-offset.tsx

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
import React, {useState, useRef, useEffect} from 'react';
2+
import {CandlestickData, ISeriesApi, Time, WhitespaceData} from 'lightweight-charts';
3+
import {Chart, CandlestickSeries, TimeScale} from 'lightweight-charts-react-wrapper';
4+
import {Switcher} from './components/switcher';
5+
6+
export default function RightOffset() {
7+
const [stateData, setStateData] = useState(data);
8+
const [offset, setOffset] = useState(10);
9+
const series = useRef<ISeriesApi<'Candlestick'>>(null);
10+
const timeScaleRef = useRef(null);
11+
12+
useEffect(() => {
13+
const interval = setInterval(() => {
14+
if (!series.current) return;
15+
const chartData = series.current.data();
16+
17+
const lastEntryTime = chartData[chartData.length - 1].time;
18+
const values = chartData[chartData.length - data.length];
19+
const newEntry = {
20+
...values,
21+
time: addOneDayToDate(lastEntryTime as string),
22+
};
23+
setStateData((prev) => [...prev, newEntry]);
24+
}, 250);
25+
26+
return () => clearInterval(interval);
27+
}, [setStateData]);
28+
29+
return (
30+
<>
31+
<h1>Right Offset</h1>
32+
<Chart {...options}>
33+
<CandlestickSeries
34+
ref={series}
35+
reactive
36+
data={stateData}
37+
/>
38+
<TimeScale
39+
ref={timeScaleRef}
40+
rightOffset={offset}
41+
secondsVisible={true}
42+
timeVisible={true}
43+
/>
44+
</Chart>
45+
<Switcher list={['10', '20', '30']} onChange={(e) => setOffset(Number(e.target.value))} value={String(offset)}/>
46+
</>
47+
);
48+
}
49+
50+
const options = {
51+
width: 600,
52+
height: 300,
53+
};
54+
55+
const data: (WhitespaceData<Time> | CandlestickData<Time>)[] = [
56+
{time: '2018-10-19', open: 180.34, high: 180.99, low: 178.57, close: 179.85},
57+
{time: '2018-10-22', open: 180.82, high: 181.40, low: 177.56, close: 178.75},
58+
{time: '2018-10-23', open: 175.77, high: 179.49, low: 175.44, close: 178.53},
59+
{time: '2018-10-24', open: 178.58, high: 182.37, low: 176.31, close: 176.97},
60+
{time: '2018-10-25', open: 177.52, high: 180.50, low: 176.83, close: 179.07},
61+
{time: '2018-10-26', open: 176.88, high: 177.34, low: 170.91, close: 172.23},
62+
{time: '2018-10-29', open: 173.74, high: 175.99, low: 170.95, close: 173.20},
63+
{time: '2018-10-30', open: 173.16, high: 176.43, low: 172.64, close: 176.24},
64+
{time: '2018-10-31', open: 177.98, high: 178.85, low: 175.59, close: 175.88},
65+
{time: '2018-11-01', open: 176.84, high: 180.86, low: 175.90, close: 180.46},
66+
{time: '2018-11-02', open: 182.47, high: 183.01, low: 177.39, close: 179.93},
67+
{time: '2018-11-05', open: 181.02, high: 182.41, low: 179.30, close: 182.19},
68+
{time: '2018-11-06', open: 181.93, high: 182.65, low: 180.05, close: 182.01},
69+
{time: '2018-11-07', open: 183.79, high: 187.68, low: 182.06, close: 187.23},
70+
{time: '2018-11-08', open: 187.13, high: 188.69, low: 185.72, close: 188.00},
71+
{time: '2018-11-09', open: 188.32, high: 188.48, low: 184.96, close: 185.99},
72+
{time: '2018-11-12', open: 185.23, high: 186.95, low: 179.02, close: 179.43},
73+
{time: '2018-11-13', open: 177.30, high: 181.62, low: 172.85, close: 179.00},
74+
{time: '2018-11-14', open: 182.61, high: 182.90, low: 179.15, close: 179.90},
75+
{time: '2018-11-15', open: 179.01, high: 179.67, low: 173.61, close: 177.36},
76+
{time: '2018-11-16', open: 173.99, high: 177.60, low: 173.51, close: 177.02},
77+
{time: '2018-11-19', open: 176.71, high: 178.88, low: 172.30, close: 173.59},
78+
{time: '2018-11-20', open: 169.25, high: 172.00, low: 167.00, close: 169.05},
79+
{time: '2018-11-21', open: 170.00, high: 170.93, low: 169.15, close: 169.30},
80+
{time: '2018-11-23', open: 169.39, high: 170.33, low: 168.47, close: 168.85},
81+
{time: '2018-11-26', open: 170.20, high: 172.39, low: 168.87, close: 169.82},
82+
{time: '2018-11-27', open: 169.11, high: 173.38, low: 168.82, close: 173.22},
83+
{time: '2018-11-28', open: 172.91, high: 177.65, low: 170.62, close: 177.43},
84+
{time: '2018-11-29', open: 176.80, high: 177.27, low: 174.92, close: 175.66},
85+
{time: '2018-11-30', open: 175.75, high: 180.37, low: 175.11, close: 180.32},
86+
{time: '2018-12-03', open: 183.29, high: 183.50, low: 179.35, close: 181.74},
87+
{time: '2018-12-04', open: 181.06, high: 182.23, low: 174.55, close: 175.30},
88+
{time: '2018-12-06', open: 173.50, high: 176.04, low: 170.46, close: 175.96},
89+
{time: '2018-12-07', open: 175.35, high: 178.36, low: 172.24, close: 172.79},
90+
{time: '2018-12-10', open: 173.39, high: 173.99, low: 167.73, close: 171.69},
91+
{time: '2018-12-11', open: 174.30, high: 175.60, low: 171.24, close: 172.21},
92+
{time: '2018-12-12', open: 173.75, high: 176.87, low: 172.81, close: 174.21},
93+
{time: '2018-12-13', open: 174.31, high: 174.91, low: 172.07, close: 173.87},
94+
{time: '2018-12-14', open: 172.98, high: 175.14, low: 171.95, close: 172.29},
95+
{time: '2018-12-17', open: 171.51, high: 171.99, low: 166.93, close: 167.97},
96+
{time: '2018-12-18', open: 168.90, high: 171.95, low: 168.50, close: 170.04},
97+
{time: '2018-12-19', open: 170.92, high: 174.95, low: 166.77, close: 167.56},
98+
{time: '2018-12-20', open: 166.28, high: 167.31, low: 162.23, close: 164.16},
99+
{time: '2018-12-21', open: 162.81, high: 167.96, low: 160.17, close: 160.48},
100+
{time: '2018-12-24', open: 160.16, high: 161.40, low: 158.09, close: 158.14},
101+
{time: '2018-12-26', open: 159.46, high: 168.28, low: 159.44, close: 168.28},
102+
{time: '2018-12-27', open: 166.44, high: 170.46, low: 163.36, close: 170.32},
103+
{time: '2018-12-28', open: 171.22, high: 173.12, low: 168.60, close: 170.22},
104+
{time: '2018-12-31', open: 171.47, high: 173.24, low: 170.65, close: 171.82},
105+
{time: '2019-01-02', open: 169.71, high: 173.18, low: 169.05, close: 172.41},
106+
{time: '2019-01-03', open: 171.84, high: 171.84, low: 168.21, close: 168.61},
107+
{time: '2019-01-04', open: 170.18, high: 174.74, low: 169.52, close: 173.62},
108+
{time: '2019-01-07', open: 173.83, high: 178.18, low: 173.83, close: 177.04},
109+
{time: '2019-01-08', open: 178.57, high: 179.59, low: 175.61, close: 177.89},
110+
{time: '2019-01-09', open: 177.87, high: 181.27, low: 177.10, close: 179.73},
111+
{time: '2019-01-10', open: 178.03, high: 179.24, low: 176.34, close: 179.06},
112+
{time: '2019-01-11', open: 177.93, high: 180.26, low: 177.12, close: 179.41},
113+
{time: '2019-01-14', open: 177.59, high: 179.23, low: 176.90, close: 178.81},
114+
{time: '2019-01-15', open: 176.08, high: 177.82, low: 175.20, close: 176.47},
115+
{time: '2019-01-16', open: 177.09, high: 177.93, low: 175.86, close: 177.04},
116+
{time: '2019-01-17', open: 174.01, high: 175.46, low: 172.00, close: 174.87},
117+
{time: '2019-01-18', open: 176.98, high: 180.04, low: 176.18, close: 179.58},
118+
{time: '2019-01-22', open: 177.49, high: 178.60, low: 175.36, close: 177.11},
119+
{time: '2019-01-23', open: 176.59, high: 178.06, low: 174.53, close: 176.89},
120+
{time: '2019-01-24', open: 177.00, high: 177.53, low: 175.30, close: 177.29},
121+
{time: '2019-01-25', open: 179.78, high: 180.87, low: 178.61, close: 180.40},
122+
{time: '2019-01-28', open: 178.97, high: 179.99, low: 177.41, close: 179.83},
123+
{time: '2019-01-29', open: 178.96, high: 180.15, low: 178.09, close: 179.69},
124+
{time: '2019-01-30', open: 180.47, high: 184.20, low: 179.78, close: 182.18},
125+
{time: '2019-01-31', open: 181.50, high: 184.67, low: 181.06, close: 183.53},
126+
{time: '2019-02-01', open: 184.03, high: 185.15, low: 182.83, close: 184.37},
127+
{time: '2019-02-04', open: 184.30, high: 186.43, low: 183.84, close: 186.43},
128+
{time: '2019-02-05', open: 186.89, high: 186.99, low: 184.69, close: 186.39},
129+
{time: '2019-02-06', open: 186.69, high: 186.69, low: 184.06, close: 184.72},
130+
{time: '2019-02-07', open: 183.74, high: 184.92, low: 182.45, close: 184.07},
131+
{time: '2019-02-08', open: 183.05, high: 184.58, low: 182.72, close: 184.54},
132+
{time: '2019-02-11', open: 185.00, high: 185.42, low: 182.75, close: 182.92},
133+
{time: '2019-02-12', open: 183.84, high: 186.40, low: 183.52, close: 185.52},
134+
{time: '2019-02-13', open: 186.30, high: 188.68, low: 185.92, close: 188.41},
135+
{time: '2019-02-14', open: 187.50, high: 188.93, low: 186.00, close: 187.71},
136+
{time: '2019-02-15', open: 189.87, high: 192.62, low: 189.05, close: 192.39},
137+
{time: '2019-02-19', open: 191.71, high: 193.19, low: 191.28, close: 192.33},
138+
{time: '2019-02-20', open: 192.39, high: 192.40, low: 191.11, close: 191.85},
139+
{time: '2019-02-21', open: 191.85, high: 192.37, low: 190.61, close: 191.82},
140+
{time: '2019-02-22', open: 191.69, high: 192.54, low: 191.62, close: 192.39},
141+
{time: '2019-02-25', open: 192.75, high: 193.42, low: 189.96, close: 189.98},
142+
{time: '2019-02-26', open: 185.59, high: 188.47, low: 182.80, close: 188.30},
143+
{time: '2019-02-27', open: 187.90, high: 188.50, low: 183.21, close: 183.67},
144+
{time: '2019-02-28', open: 183.60, high: 185.19, low: 183.11, close: 185.14},
145+
{time: '2019-03-01', open: 185.82, high: 186.56, low: 182.86, close: 185.17},
146+
{time: '2019-03-04', open: 186.20, high: 186.24, low: 182.10, close: 183.81},
147+
{time: '2019-03-05', open: 184.24, high: 185.12, low: 183.25, close: 184.00},
148+
{time: '2019-03-06', open: 184.53, high: 184.97, low: 183.84, close: 184.45},
149+
{time: '2019-03-07', open: 184.39, high: 184.62, low: 181.58, close: 182.51},
150+
{time: '2019-03-08', open: 181.49, high: 181.91, low: 179.52, close: 181.23},
151+
{time: '2019-03-11', open: 182.00, high: 183.20, low: 181.20, close: 182.44},
152+
{time: '2019-03-12', open: 183.43, high: 184.27, low: 182.33, close: 184.00},
153+
{time: '2019-03-13', open: 183.24, high: 183.78, low: 181.08, close: 181.14},
154+
{time: '2019-03-14', open: 181.28, high: 181.74, low: 180.50, close: 181.61},
155+
{time: '2019-03-15', open: 182.30, high: 182.49, low: 179.57, close: 182.23},
156+
{time: '2019-03-18', open: 182.53, high: 183.48, low: 182.33, close: 183.42},
157+
{time: '2019-03-19', open: 184.19, high: 185.82, low: 183.48, close: 184.13},
158+
{time: '2019-03-20', open: 184.30, high: 187.12, low: 183.43, close: 186.10},
159+
{time: '2019-03-21', open: 185.50, high: 190.00, low: 185.50, close: 189.97},
160+
{time: '2019-03-22', open: 189.31, high: 192.05, low: 188.67, close: 188.75},
161+
{time: '2019-03-25', open: 188.75, high: 191.71, low: 188.51, close: 189.68},
162+
{time: '2019-03-26', open: 190.69, high: 192.19, low: 188.74, close: 189.34},
163+
{time: '2019-03-27', open: 189.65, high: 191.61, low: 188.39, close: 189.25},
164+
{time: '2019-03-28', open: 189.91, high: 191.40, low: 189.16, close: 190.06},
165+
{time: '2019-03-29', open: 190.85, high: 192.04, low: 190.14, close: 191.89},
166+
{time: '2019-04-01', open: 192.99, high: 195.90, low: 192.85, close: 195.64},
167+
{time: '2019-04-02', open: 195.50, high: 195.50, low: 194.01, close: 194.31},
168+
{time: '2019-04-03', open: 194.98, high: 198.78, low: 194.11, close: 198.61},
169+
{time: '2019-04-04', open: 199.00, high: 200.49, low: 198.02, close: 200.45},
170+
{time: '2019-04-05', open: 200.86, high: 203.13, low: 200.61, close: 202.06},
171+
{time: '2019-04-08', open: 201.37, high: 203.79, low: 201.24, close: 203.55},
172+
{time: '2019-04-09', open: 202.26, high: 202.71, low: 200.46, close: 200.90},
173+
{time: '2019-04-10', open: 201.26, high: 201.60, low: 198.02, close: 199.43},
174+
{time: '2019-04-11', open: 199.90, high: 201.50, low: 199.03, close: 201.48},
175+
{time: '2019-04-12', open: 202.13, high: 204.26, low: 202.13, close: 203.85},
176+
{time: '2019-04-15', open: 204.16, high: 205.14, low: 203.40, close: 204.86},
177+
{time: '2019-04-16', open: 205.25, high: 205.99, low: 204.29, close: 204.47},
178+
{time: '2019-04-17', open: 205.34, high: 206.84, low: 205.32, close: 206.55},
179+
{time: '2019-04-18', open: 206.02, high: 207.78, low: 205.10, close: 205.66},
180+
{time: '2019-04-22', open: 204.11, high: 206.25, low: 204.00, close: 204.78},
181+
{time: '2019-04-23', open: 205.14, high: 207.33, low: 203.43, close: 206.05},
182+
{time: '2019-04-24', open: 206.16, high: 208.29, low: 205.54, close: 206.72},
183+
{time: '2019-04-25', open: 206.01, high: 207.72, low: 205.06, close: 206.50},
184+
{time: '2019-04-26', open: 205.88, high: 206.14, low: 203.34, close: 203.61},
185+
{time: '2019-04-29', open: 203.31, high: 203.80, low: 200.34, close: 202.16},
186+
{time: '2019-04-30', open: 201.55, high: 203.75, low: 200.79, close: 203.70},
187+
{time: '2019-05-01', open: 203.20, high: 203.52, low: 198.66, close: 198.80},
188+
{time: '2019-05-02', open: 199.30, high: 201.06, low: 198.80, close: 201.01},
189+
{time: '2019-05-03', open: 202.00, high: 202.31, low: 200.32, close: 200.56},
190+
{time: '2019-05-06', open: 198.74, high: 199.93, low: 198.31, close: 199.63},
191+
{time: '2019-05-07', open: 196.75, high: 197.65, low: 192.96, close: 194.77},
192+
{time: '2019-05-08', open: 194.49, high: 196.61, low: 193.68, close: 195.17},
193+
{time: '2019-05-09', open: 193.31, high: 195.08, low: 191.59, close: 194.58},
194+
{time: '2019-05-10', open: 193.21, high: 195.49, low: 190.01, close: 194.58},
195+
{time: '2019-05-13', open: 191.00, high: 191.66, low: 189.14, close: 190.34},
196+
{time: '2019-05-14', open: 190.50, high: 192.76, low: 190.01, close: 191.62},
197+
{time: '2019-05-15', open: 190.81, high: 192.81, low: 190.27, close: 191.76},
198+
{time: '2019-05-16', open: 192.47, high: 194.96, low: 192.20, close: 192.38},
199+
{time: '2019-05-17', open: 190.86, high: 194.50, low: 190.75, close: 192.58},
200+
{time: '2019-05-20', open: 191.13, high: 192.86, low: 190.61, close: 190.95},
201+
{time: '2019-05-21', open: 187.13, high: 192.52, low: 186.34, close: 191.45},
202+
{time: '2019-05-22', open: 190.49, high: 192.22, low: 188.05, close: 188.91},
203+
{time: '2019-05-23', open: 188.45, high: 192.54, low: 186.27, close: 192.00},
204+
{time: '2019-05-24', open: 192.54, high: 193.86, low: 190.41, close: 193.59},
205+
];
206+
207+
function addOneDayToDate(dateString: string): string {
208+
// Convert the date string to a Date object
209+
const date = new Date(dateString);
210+
211+
// Add one day to the date
212+
date.setDate(date.getDate() + 1);
213+
214+
// Format the date to yyyy-mm-dd format
215+
const year = date.getFullYear();
216+
const month = String(date.getMonth() + 1).padStart(2, '0');
217+
const day = String(date.getDate()).padStart(2, '0');
218+
219+
// Construct the new date string
220+
const newDateString = `${year}-${month}-${day}`;
221+
222+
return newDateString;
223+
}

‎packages/lib/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Lightweight Charts React Wrapper changelog
22

3+
## 2.1.1
4+
5+
- `rightOffset` is only applied to TimeScale if it has changed.
6+
-
37
## 2.1.0
48

59
Added support for some new `lightweight-charts@4.1.0` features:

‎packages/lib/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "lightweight-charts-react-wrapper",
3-
"version": "2.1.0",
3+
"version": "2.1.1",
44
"description": "",
55
"type": "module",
66
"exports": "./dist/index.js",

‎packages/lib/src/internal/time-scale.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export function timeScale(target: ChartActionResult, params: TimeScaleParams): T
2424
onVisibleTimeRangeChange,
2525
onVisibleLogicalRangeChange,
2626
onSizeChange,
27+
2728
...options
2829
} = params;
2930

@@ -51,13 +52,23 @@ export function timeScale(target: ChartActionResult, params: TimeScaleParams): T
5152
onVisibleTimeRangeChange: nextOnVisibleTimeRangeChange,
5253
onVisibleLogicalRangeChange: nextOnVisibleLogicalRangeChange,
5354
onSizeChange: nextOnSizeChange,
55+
5456
...nextOptions
5557
} = nextParams;
5658

5759
if (nextOptions !== options) {
60+
/*
61+
The rightOffset behaves like a command not an option.
62+
It should be omitted to prevent scroll to the right edge on every render.
63+
*/
64+
const omitRightOffset = nextOptions.rightOffset === options.rightOffset;
5865
options = nextOptions;
5966
if (options) {
60-
subject.applyOptions(merge(clone(defaults), options));
67+
const optionsToApply = merge(clone(defaults), options);
68+
if (omitRightOffset) {
69+
delete optionsToApply.rightOffset;
70+
}
71+
subject.applyOptions(optionsToApply);
6172
}
6273
}
6374

0 commit comments

Comments
 (0)