use setState(prevState => {...}) to update indicator labels.

Author: dcaoyuan

src/lib/charting/view/ChartView.tsx

@@ -62,7 +62,7 @@ export interface ViewProps {
     // for indicator chart view's main indicator outputs
     mainIndicatorOutputs?: Output[]
 
-    indexOfStackedIndicators?: number
+    indexOfStackedIndicator?: number
     overlayIndicators?: Indicator[];
 
     callbacksToContainer?: CallbacksToContainer;
@@ -342,7 +342,7 @@ export abstract class ChartView<P extends ViewProps, S extends ViewState> extend
         }
 
         // stacked indicators
-        if (this.props.indexOfStackedIndicators !== undefined) {
+        if (this.props.indexOfStackedIndicator !== undefined) {
             const tvar = this.props.tvar as TVar<PineData[]>;
             let mvs: string[]
             if (mouseTime !== undefined && mouseTime > 0 && this.props.xc.baseSer.occurred(mouseTime)) {
@@ -367,7 +367,7 @@ export abstract class ChartView<P extends ViewProps, S extends ViewState> extend
                 });
             }
 
-            this.props.callbacksToContainer.updateStackedIndicatorLabels(this.props.indexOfStackedIndicators, mvs, rvs);
+            this.props.callbacksToContainer.updateStackedIndicatorLabels(this.props.indexOfStackedIndicator, mvs, rvs);
         }
     }
 

src/lib/charting/view/KlineViewContainer.tsx

@@ -17,6 +17,7 @@ import { TFrame } from "../../timeseris/TFrame";
 import type { KlineKind } from "../plot/PlotKline";
 import type { Plot } from "../plot/Plot";
 import { fetchData, Source } from "../../domain/DataFecther";
+import type { PineData } from "../../domain/PineData";
 
 import {
     ActionButton,
@@ -72,7 +73,6 @@ import { style } from '@react-spectrum/s2/style' with {type: 'macro'};
 import { Screenshot } from "../pane/Screenshot";
 
 import { Context, PineTS } from "pinets";
-import type { PineData } from "../../domain/PineData";
 //import { PineTS, } from '../../../../../PineTS/src/PineTS.class'
 //import { Context } from '../../../../../PineTS/src/Context.class'
 
@@ -117,11 +117,10 @@ type State = {
     screenshot: HTMLCanvasElement
 }
 
-
 const source: Source = dev ? Source.yfinance : Source.binance
 
 const allIndTags = dev
-    ? ['test', 'bb', 'rsi', 'sma', 'ema', 'macd']
+    ? ['test', 'bb']
     : ['sma', 'ema', 'bb', 'rsi', 'macd']
 
 const TOOLTIP_DELAY = 500; // ms
@@ -732,49 +731,43 @@ class KlineViewContainer extends Component<Props, State> {
     }
 
     setOverlayIndicatorLabels(vs: string[][], refVs?: string[][]) {
-        let overlayIndicatorLabels = this.state.overlayIndicatorLabels
-        let referOverlayIndicatorLabels = this.state.referOverlayIndicatorLabels
-
-        const nOverlayInds = this.state.overlayIndicators.length
-
-        overlayIndicatorLabels = overlayIndicatorLabels || new Array(nOverlayInds)
-        referOverlayIndicatorLabels = referOverlayIndicatorLabels || new Array(nOverlayInds)
-
-        for (let n = 0; n < nOverlayInds; n++) {
-            overlayIndicatorLabels[n] = vs[n];
-            referOverlayIndicatorLabels[n] = refVs[n];
-        }
-
-        this.setState({ overlayIndicatorLabels, referOverlayIndicatorLabels })
-    }
+        this.setState(prevState => {
+            const nOverlayInds = prevState.overlayIndicators.length
 
+            const overlayIndicatorLabels = prevState.overlayIndicatorLabels || new Array(nOverlayInds)
+            const referOverlayIndicatorLabels = prevState.referOverlayIndicatorLabels || new Array(nOverlayInds)
 
-    setStackedIndicatorLabels_old(n: number) {
-        return (vs: string[], refVs?: string[]) => {
-            let stackedIndicatorLabels = this.state.stackedIndicatorLabels
-            let referStackedIndicatorLabels = this.state.referStackedIndicatorLabels
-
-            stackedIndicatorLabels = stackedIndicatorLabels || new Array(this.state.stackedIndicators.length)
-            referStackedIndicatorLabels = referStackedIndicatorLabels || new Array(this.state.stackedIndicators.length)
-
-            stackedIndicatorLabels[n] = vs;
-            referStackedIndicatorLabels[n] = refVs;
+            for (let n = 0; n < nOverlayInds; n++) {
+                overlayIndicatorLabels[n] = vs[n];
+                referOverlayIndicatorLabels[n] = refVs[n];
+            }
 
-            this.setState({ stackedIndicatorLabels, referStackedIndicatorLabels })
-        }
+            return { overlayIndicatorLabels, referOverlayIndicatorLabels }
+        })
     }
 
     setStackedIndicatorLabels(n: number, vs: string[], refVs?: string[]) {
-        let stackedIndicatorLabels = this.state.stackedIndicatorLabels
-        let referStackedIndicatorLabels = this.state.referStackedIndicatorLabels
-
-        stackedIndicatorLabels = stackedIndicatorLabels || new Array(this.state.stackedIndicators.length)
-        referStackedIndicatorLabels = referStackedIndicatorLabels || new Array(this.state.stackedIndicators.length)
-
-        stackedIndicatorLabels[n] = vs;
-        referStackedIndicatorLabels[n] = refVs;
-
-        this.setState({ stackedIndicatorLabels, referStackedIndicatorLabels })
+        this.setState(prevState => {
+
+            let stackedIndicatorLabels = prevState.stackedIndicatorLabels || new Array(this.state.stackedIndicators.length)
+            let referStackedIndicatorLabels = prevState.referStackedIndicatorLabels || new Array(this.state.stackedIndicators.length)
+
+            //stackedIndicatorLabels[n] = vs;
+            stackedIndicatorLabels = [
+                ...stackedIndicatorLabels.slice(0, n),        // elements before the index
+                vs,                                           // the new value
+                ...stackedIndicatorLabels.slice(n + 1)        // elements after the index
+            ];
+
+            //referStackedIndicatorLabels[n] = refVs;
+            referStackedIndicatorLabels = [
+                ...referStackedIndicatorLabels.slice(0, n),   // elements before the index
+                refVs,                                        // the new value
+                ...referStackedIndicatorLabels.slice(n + 1)   // elements after the index
+            ];
+
+            return { stackedIndicatorLabels, referStackedIndicatorLabels }
+        })
     }
 
     setSelectedIndicatorTags(selectedIndicatorTags: Selection) {
@@ -1281,7 +1274,7 @@ class KlineViewContainer extends Component<Props, State> {
                                             tvar={tvar}
                                             mainIndicatorOutputs={outputs}
                                             updateEvent={this.state.updateEvent}
-                                            indexOfStackedIndicators={n}
+                                            indexOfStackedIndicator={n}
                                             callbacksToContainer={this.callbacks}
                                         />
                                     )