Merge pull request #21 from trash-and-fire/20_fix_right_offset

20: apply right offset only if changed
trash-and-fire · May 11, 2024 · 7f1d72a · 7f1d72a
2 parents 910ef6a + 2abb918
commit 7f1d72a
Show file tree

Hide file tree

Showing 11 changed files with 248 additions and 10 deletions.
diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/lightweight-charts-react-wrapper/static/css/main.0b2241f9.css",
-    "main.js": "/lightweight-charts-react-wrapper/static/js/main.06ba6dac.js",
+    "main.js": "/lightweight-charts-react-wrapper/static/js/main.316c794b.js",
     "static/js/626.d7e9fbd1.chunk.js": "/lightweight-charts-react-wrapper/static/js/626.d7e9fbd1.chunk.js",
     "index.html": "/lightweight-charts-react-wrapper/index.html",
     "main.0b2241f9.css.map": "/lightweight-charts-react-wrapper/static/css/main.0b2241f9.css.map",
-    "main.06ba6dac.js.map": "/lightweight-charts-react-wrapper/static/js/main.06ba6dac.js.map",
+    "main.316c794b.js.map": "/lightweight-charts-react-wrapper/static/js/main.316c794b.js.map",
     "626.d7e9fbd1.chunk.js.map": "/lightweight-charts-react-wrapper/static/js/626.d7e9fbd1.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.0b2241f9.css",
-    "static/js/main.06ba6dac.js"
+    "static/js/main.316c794b.js"
   ]
 }
diff --git a/docs/index.html b/docs/index.html
@@ -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>
+<!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>
diff --git a/docs/static/js/main.06ba6dac.js b/docs/static/js/main.06ba6dac.js
diff --git a/docs/static/js/main.06ba6dac.js.map b/docs/static/js/main.06ba6dac.js.map
diff --git a/docs/static/js/main.316c794b.js b/docs/static/js/main.316c794b.js
diff --git a/docs/static/js/main.06ba6dac.js.LICENSE.txt → docs/static/js/main.316c794b.js.LICENSE.txt b/docs/static/js/main.06ba6dac.js.LICENSE.txt → docs/static/js/main.316c794b.js.LICENSE.txt
diff --git a/docs/static/js/main.316c794b.js.map b/docs/static/js/main.316c794b.js.map
diff --git a/packages/demo/src/samples/right-offset.tsx b/packages/demo/src/samples/right-offset.tsx
@@ -0,0 +1,223 @@
+import React, {useState, useRef, useEffect} from 'react';
+import {CandlestickData, ISeriesApi, Time, WhitespaceData} from 'lightweight-charts';
+import {Chart, CandlestickSeries, TimeScale} from 'lightweight-charts-react-wrapper';
+import {Switcher} from './components/switcher';
+
+export default function RightOffset() {
+    const [stateData, setStateData] = useState(data);
+    const [offset, setOffset] = useState(10);
+    const series = useRef<ISeriesApi<'Candlestick'>>(null);
+    const timeScaleRef = useRef(null);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (!series.current) return;
+            const chartData = series.current.data();
+
+            const lastEntryTime = chartData[chartData.length - 1].time;
+            const values = chartData[chartData.length - data.length];
+            const newEntry = {
+                ...values,
+                time: addOneDayToDate(lastEntryTime as string),
+            };
+            setStateData((prev) => [...prev, newEntry]);
+        }, 250);
+
+        return () => clearInterval(interval);
+    }, [setStateData]);
+
+    return (
+        <>
+            <h1>Right Offset</h1>
+            <Chart {...options}>
+                <CandlestickSeries
+                    ref={series}
+                    reactive
+                    data={stateData}
+                />
+                <TimeScale
+                    ref={timeScaleRef}
+                    rightOffset={offset}
+                    secondsVisible={true}
+                    timeVisible={true}
+                />
+            </Chart>
+            <Switcher list={['10', '20', '30']} onChange={(e) => setOffset(Number(e.target.value))} value={String(offset)}/>
+        </>
+    );
+}
+
+const options = {
+    width: 600,
+    height: 300,
+};
+
+const data: (WhitespaceData<Time> | CandlestickData<Time>)[] = [
+    {time: '2018-10-19', open: 180.34, high: 180.99, low: 178.57, close: 179.85},
+    {time: '2018-10-22', open: 180.82, high: 181.40, low: 177.56, close: 178.75},
+    {time: '2018-10-23', open: 175.77, high: 179.49, low: 175.44, close: 178.53},
+    {time: '2018-10-24', open: 178.58, high: 182.37, low: 176.31, close: 176.97},
+    {time: '2018-10-25', open: 177.52, high: 180.50, low: 176.83, close: 179.07},
+    {time: '2018-10-26', open: 176.88, high: 177.34, low: 170.91, close: 172.23},
+    {time: '2018-10-29', open: 173.74, high: 175.99, low: 170.95, close: 173.20},
+    {time: '2018-10-30', open: 173.16, high: 176.43, low: 172.64, close: 176.24},
+    {time: '2018-10-31', open: 177.98, high: 178.85, low: 175.59, close: 175.88},
+    {time: '2018-11-01', open: 176.84, high: 180.86, low: 175.90, close: 180.46},
+    {time: '2018-11-02', open: 182.47, high: 183.01, low: 177.39, close: 179.93},
+    {time: '2018-11-05', open: 181.02, high: 182.41, low: 179.30, close: 182.19},
+    {time: '2018-11-06', open: 181.93, high: 182.65, low: 180.05, close: 182.01},
+    {time: '2018-11-07', open: 183.79, high: 187.68, low: 182.06, close: 187.23},
+    {time: '2018-11-08', open: 187.13, high: 188.69, low: 185.72, close: 188.00},
+    {time: '2018-11-09', open: 188.32, high: 188.48, low: 184.96, close: 185.99},
+    {time: '2018-11-12', open: 185.23, high: 186.95, low: 179.02, close: 179.43},
+    {time: '2018-11-13', open: 177.30, high: 181.62, low: 172.85, close: 179.00},
+    {time: '2018-11-14', open: 182.61, high: 182.90, low: 179.15, close: 179.90},
+    {time: '2018-11-15', open: 179.01, high: 179.67, low: 173.61, close: 177.36},
+    {time: '2018-11-16', open: 173.99, high: 177.60, low: 173.51, close: 177.02},
+    {time: '2018-11-19', open: 176.71, high: 178.88, low: 172.30, close: 173.59},
+    {time: '2018-11-20', open: 169.25, high: 172.00, low: 167.00, close: 169.05},
+    {time: '2018-11-21', open: 170.00, high: 170.93, low: 169.15, close: 169.30},
+    {time: '2018-11-23', open: 169.39, high: 170.33, low: 168.47, close: 168.85},
+    {time: '2018-11-26', open: 170.20, high: 172.39, low: 168.87, close: 169.82},
+    {time: '2018-11-27', open: 169.11, high: 173.38, low: 168.82, close: 173.22},
+    {time: '2018-11-28', open: 172.91, high: 177.65, low: 170.62, close: 177.43},
+    {time: '2018-11-29', open: 176.80, high: 177.27, low: 174.92, close: 175.66},
+    {time: '2018-11-30', open: 175.75, high: 180.37, low: 175.11, close: 180.32},
+    {time: '2018-12-03', open: 183.29, high: 183.50, low: 179.35, close: 181.74},
+    {time: '2018-12-04', open: 181.06, high: 182.23, low: 174.55, close: 175.30},
+    {time: '2018-12-06', open: 173.50, high: 176.04, low: 170.46, close: 175.96},
+    {time: '2018-12-07', open: 175.35, high: 178.36, low: 172.24, close: 172.79},
+    {time: '2018-12-10', open: 173.39, high: 173.99, low: 167.73, close: 171.69},
+    {time: '2018-12-11', open: 174.30, high: 175.60, low: 171.24, close: 172.21},
+    {time: '2018-12-12', open: 173.75, high: 176.87, low: 172.81, close: 174.21},
+    {time: '2018-12-13', open: 174.31, high: 174.91, low: 172.07, close: 173.87},
+    {time: '2018-12-14', open: 172.98, high: 175.14, low: 171.95, close: 172.29},
+    {time: '2018-12-17', open: 171.51, high: 171.99, low: 166.93, close: 167.97},
+    {time: '2018-12-18', open: 168.90, high: 171.95, low: 168.50, close: 170.04},
+    {time: '2018-12-19', open: 170.92, high: 174.95, low: 166.77, close: 167.56},
+    {time: '2018-12-20', open: 166.28, high: 167.31, low: 162.23, close: 164.16},
+    {time: '2018-12-21', open: 162.81, high: 167.96, low: 160.17, close: 160.48},
+    {time: '2018-12-24', open: 160.16, high: 161.40, low: 158.09, close: 158.14},
+    {time: '2018-12-26', open: 159.46, high: 168.28, low: 159.44, close: 168.28},
+    {time: '2018-12-27', open: 166.44, high: 170.46, low: 163.36, close: 170.32},
+    {time: '2018-12-28', open: 171.22, high: 173.12, low: 168.60, close: 170.22},
+    {time: '2018-12-31', open: 171.47, high: 173.24, low: 170.65, close: 171.82},
+    {time: '2019-01-02', open: 169.71, high: 173.18, low: 169.05, close: 172.41},
+    {time: '2019-01-03', open: 171.84, high: 171.84, low: 168.21, close: 168.61},
+    {time: '2019-01-04', open: 170.18, high: 174.74, low: 169.52, close: 173.62},
+    {time: '2019-01-07', open: 173.83, high: 178.18, low: 173.83, close: 177.04},
+    {time: '2019-01-08', open: 178.57, high: 179.59, low: 175.61, close: 177.89},
+    {time: '2019-01-09', open: 177.87, high: 181.27, low: 177.10, close: 179.73},
+    {time: '2019-01-10', open: 178.03, high: 179.24, low: 176.34, close: 179.06},
+    {time: '2019-01-11', open: 177.93, high: 180.26, low: 177.12, close: 179.41},
+    {time: '2019-01-14', open: 177.59, high: 179.23, low: 176.90, close: 178.81},
+    {time: '2019-01-15', open: 176.08, high: 177.82, low: 175.20, close: 176.47},
+    {time: '2019-01-16', open: 177.09, high: 177.93, low: 175.86, close: 177.04},
+    {time: '2019-01-17', open: 174.01, high: 175.46, low: 172.00, close: 174.87},
+    {time: '2019-01-18', open: 176.98, high: 180.04, low: 176.18, close: 179.58},
+    {time: '2019-01-22', open: 177.49, high: 178.60, low: 175.36, close: 177.11},
+    {time: '2019-01-23', open: 176.59, high: 178.06, low: 174.53, close: 176.89},
+    {time: '2019-01-24', open: 177.00, high: 177.53, low: 175.30, close: 177.29},
+    {time: '2019-01-25', open: 179.78, high: 180.87, low: 178.61, close: 180.40},
+    {time: '2019-01-28', open: 178.97, high: 179.99, low: 177.41, close: 179.83},
+    {time: '2019-01-29', open: 178.96, high: 180.15, low: 178.09, close: 179.69},
+    {time: '2019-01-30', open: 180.47, high: 184.20, low: 179.78, close: 182.18},
+    {time: '2019-01-31', open: 181.50, high: 184.67, low: 181.06, close: 183.53},
+    {time: '2019-02-01', open: 184.03, high: 185.15, low: 182.83, close: 184.37},
+    {time: '2019-02-04', open: 184.30, high: 186.43, low: 183.84, close: 186.43},
+    {time: '2019-02-05', open: 186.89, high: 186.99, low: 184.69, close: 186.39},
+    {time: '2019-02-06', open: 186.69, high: 186.69, low: 184.06, close: 184.72},
+    {time: '2019-02-07', open: 183.74, high: 184.92, low: 182.45, close: 184.07},
+    {time: '2019-02-08', open: 183.05, high: 184.58, low: 182.72, close: 184.54},
+    {time: '2019-02-11', open: 185.00, high: 185.42, low: 182.75, close: 182.92},
+    {time: '2019-02-12', open: 183.84, high: 186.40, low: 183.52, close: 185.52},
+    {time: '2019-02-13', open: 186.30, high: 188.68, low: 185.92, close: 188.41},
+    {time: '2019-02-14', open: 187.50, high: 188.93, low: 186.00, close: 187.71},
+    {time: '2019-02-15', open: 189.87, high: 192.62, low: 189.05, close: 192.39},
+    {time: '2019-02-19', open: 191.71, high: 193.19, low: 191.28, close: 192.33},
+    {time: '2019-02-20', open: 192.39, high: 192.40, low: 191.11, close: 191.85},
+    {time: '2019-02-21', open: 191.85, high: 192.37, low: 190.61, close: 191.82},
+    {time: '2019-02-22', open: 191.69, high: 192.54, low: 191.62, close: 192.39},
+    {time: '2019-02-25', open: 192.75, high: 193.42, low: 189.96, close: 189.98},
+    {time: '2019-02-26', open: 185.59, high: 188.47, low: 182.80, close: 188.30},
+    {time: '2019-02-27', open: 187.90, high: 188.50, low: 183.21, close: 183.67},
+    {time: '2019-02-28', open: 183.60, high: 185.19, low: 183.11, close: 185.14},
+    {time: '2019-03-01', open: 185.82, high: 186.56, low: 182.86, close: 185.17},
+    {time: '2019-03-04', open: 186.20, high: 186.24, low: 182.10, close: 183.81},
+    {time: '2019-03-05', open: 184.24, high: 185.12, low: 183.25, close: 184.00},
+    {time: '2019-03-06', open: 184.53, high: 184.97, low: 183.84, close: 184.45},
+    {time: '2019-03-07', open: 184.39, high: 184.62, low: 181.58, close: 182.51},
+    {time: '2019-03-08', open: 181.49, high: 181.91, low: 179.52, close: 181.23},
+    {time: '2019-03-11', open: 182.00, high: 183.20, low: 181.20, close: 182.44},
+    {time: '2019-03-12', open: 183.43, high: 184.27, low: 182.33, close: 184.00},
+    {time: '2019-03-13', open: 183.24, high: 183.78, low: 181.08, close: 181.14},
+    {time: '2019-03-14', open: 181.28, high: 181.74, low: 180.50, close: 181.61},
+    {time: '2019-03-15', open: 182.30, high: 182.49, low: 179.57, close: 182.23},
+    {time: '2019-03-18', open: 182.53, high: 183.48, low: 182.33, close: 183.42},
+    {time: '2019-03-19', open: 184.19, high: 185.82, low: 183.48, close: 184.13},
+    {time: '2019-03-20', open: 184.30, high: 187.12, low: 183.43, close: 186.10},
+    {time: '2019-03-21', open: 185.50, high: 190.00, low: 185.50, close: 189.97},
+    {time: '2019-03-22', open: 189.31, high: 192.05, low: 188.67, close: 188.75},
+    {time: '2019-03-25', open: 188.75, high: 191.71, low: 188.51, close: 189.68},
+    {time: '2019-03-26', open: 190.69, high: 192.19, low: 188.74, close: 189.34},
+    {time: '2019-03-27', open: 189.65, high: 191.61, low: 188.39, close: 189.25},
+    {time: '2019-03-28', open: 189.91, high: 191.40, low: 189.16, close: 190.06},
+    {time: '2019-03-29', open: 190.85, high: 192.04, low: 190.14, close: 191.89},
+    {time: '2019-04-01', open: 192.99, high: 195.90, low: 192.85, close: 195.64},
+    {time: '2019-04-02', open: 195.50, high: 195.50, low: 194.01, close: 194.31},
+    {time: '2019-04-03', open: 194.98, high: 198.78, low: 194.11, close: 198.61},
+    {time: '2019-04-04', open: 199.00, high: 200.49, low: 198.02, close: 200.45},
+    {time: '2019-04-05', open: 200.86, high: 203.13, low: 200.61, close: 202.06},
+    {time: '2019-04-08', open: 201.37, high: 203.79, low: 201.24, close: 203.55},
+    {time: '2019-04-09', open: 202.26, high: 202.71, low: 200.46, close: 200.90},
+    {time: '2019-04-10', open: 201.26, high: 201.60, low: 198.02, close: 199.43},
+    {time: '2019-04-11', open: 199.90, high: 201.50, low: 199.03, close: 201.48},
+    {time: '2019-04-12', open: 202.13, high: 204.26, low: 202.13, close: 203.85},
+    {time: '2019-04-15', open: 204.16, high: 205.14, low: 203.40, close: 204.86},
+    {time: '2019-04-16', open: 205.25, high: 205.99, low: 204.29, close: 204.47},
+    {time: '2019-04-17', open: 205.34, high: 206.84, low: 205.32, close: 206.55},
+    {time: '2019-04-18', open: 206.02, high: 207.78, low: 205.10, close: 205.66},
+    {time: '2019-04-22', open: 204.11, high: 206.25, low: 204.00, close: 204.78},
+    {time: '2019-04-23', open: 205.14, high: 207.33, low: 203.43, close: 206.05},
+    {time: '2019-04-24', open: 206.16, high: 208.29, low: 205.54, close: 206.72},
+    {time: '2019-04-25', open: 206.01, high: 207.72, low: 205.06, close: 206.50},
+    {time: '2019-04-26', open: 205.88, high: 206.14, low: 203.34, close: 203.61},
+    {time: '2019-04-29', open: 203.31, high: 203.80, low: 200.34, close: 202.16},
+    {time: '2019-04-30', open: 201.55, high: 203.75, low: 200.79, close: 203.70},
+    {time: '2019-05-01', open: 203.20, high: 203.52, low: 198.66, close: 198.80},
+    {time: '2019-05-02', open: 199.30, high: 201.06, low: 198.80, close: 201.01},
+    {time: '2019-05-03', open: 202.00, high: 202.31, low: 200.32, close: 200.56},
+    {time: '2019-05-06', open: 198.74, high: 199.93, low: 198.31, close: 199.63},
+    {time: '2019-05-07', open: 196.75, high: 197.65, low: 192.96, close: 194.77},
+    {time: '2019-05-08', open: 194.49, high: 196.61, low: 193.68, close: 195.17},
+    {time: '2019-05-09', open: 193.31, high: 195.08, low: 191.59, close: 194.58},
+    {time: '2019-05-10', open: 193.21, high: 195.49, low: 190.01, close: 194.58},
+    {time: '2019-05-13', open: 191.00, high: 191.66, low: 189.14, close: 190.34},
+    {time: '2019-05-14', open: 190.50, high: 192.76, low: 190.01, close: 191.62},
+    {time: '2019-05-15', open: 190.81, high: 192.81, low: 190.27, close: 191.76},
+    {time: '2019-05-16', open: 192.47, high: 194.96, low: 192.20, close: 192.38},
+    {time: '2019-05-17', open: 190.86, high: 194.50, low: 190.75, close: 192.58},
+    {time: '2019-05-20', open: 191.13, high: 192.86, low: 190.61, close: 190.95},
+    {time: '2019-05-21', open: 187.13, high: 192.52, low: 186.34, close: 191.45},
+    {time: '2019-05-22', open: 190.49, high: 192.22, low: 188.05, close: 188.91},
+    {time: '2019-05-23', open: 188.45, high: 192.54, low: 186.27, close: 192.00},
+    {time: '2019-05-24', open: 192.54, high: 193.86, low: 190.41, close: 193.59},
+];
+
+function addOneDayToDate(dateString: string): string {
+    // Convert the date string to a Date object
+    const date = new Date(dateString);
+
+    // Add one day to the date
+    date.setDate(date.getDate() + 1);
+
+    // Format the date to yyyy-mm-dd format
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+
+    // Construct the new date string
+    const newDateString = `${year}-${month}-${day}`;
+
+    return newDateString;
+}
diff --git a/packages/lib/CHANGELOG.md b/packages/lib/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Lightweight Charts React Wrapper changelog
 
+## 2.1.1
+
+- `rightOffset` is only applied to TimeScale if it has changed.
+- 
 ## 2.1.0
 
 Added support for some new `lightweight-charts@4.1.0` features:

diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lightweight-charts-react-wrapper",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "",
   "type": "module",
   "exports": "./dist/index.js",

diff --git a/packages/lib/src/internal/time-scale.ts b/packages/lib/src/internal/time-scale.ts
@@ -24,6 +24,7 @@ export function timeScale(target: ChartActionResult, params: TimeScaleParams): T
         onVisibleTimeRangeChange,
         onVisibleLogicalRangeChange,
         onSizeChange,
+
         ...options
     } = params;
 
@@ -51,13 +52,23 @@ export function timeScale(target: ChartActionResult, params: TimeScaleParams): T
                 onVisibleTimeRangeChange: nextOnVisibleTimeRangeChange,
                 onVisibleLogicalRangeChange: nextOnVisibleLogicalRangeChange,
                 onSizeChange: nextOnSizeChange,
+
                 ...nextOptions
             } = nextParams;
 
             if (nextOptions !== options) {
+                /*
+                  The rightOffset behaves like a command not an option.
+                  It should be omitted to prevent scroll to the right edge on every render.
+                 */
+                const omitRightOffset = nextOptions.rightOffset === options.rightOffset;
                 options = nextOptions;
                 if (options) {
-                    subject.applyOptions(merge(clone(defaults), options));
+                    const optionsToApply = merge(clone(defaults), options);
+                    if (omitRightOffset) {
+                        delete optionsToApply.rightOffset;
+                    }
+                    subject.applyOptions(optionsToApply);
                 }
             }