Add missing renderIndicatorOnPane function and fix index undefined error

- Added complete renderIndicatorOnPane function from indicators-panel.js
- Fixed window.updateIndicatorSetting function that referenced undefined 'index' variable
- This fixes 'renderIndicatorOnPane is not defined' error when adding indicators

src/api/dashboard/static/js/ui/indicators-panel-new.js

@@ -521,12 +521,6 @@ window.updateIndicatorSetting = function(id, key, value) {
     if (!indicator) return;
     
     indicator.params[key] = value;
-    
-    const valueSpan = document.querySelector(`#color_${id}_${index} + .color-preview`);
-    if (valueSpan) {
-        valueSpan.textContent = value;
-    }
-    
     drawIndicatorsOnChart();
 };
 
@@ -671,6 +665,86 @@ function saveUserPresets() {
     localStorage.setItem('indicator_presets', JSON.stringify(userPresets));
 }
 
+function renderIndicatorOnPane(indicator, meta, instance, candles, paneIndex, lineStyleMap) {
+    const results = instance.calculate(candles);
+    indicator.series = [];
+    
+    const lineStyle = lineStyleMap[indicator.params._lineType] || LightweightCharts.LineStyle.Solid;
+    const lineWidth = indicator.params._lineWidth || 2;
+    
+    const firstNonNull = results?.find(r => r !== null && r !== undefined);
+    const isObjectResult = firstNonNull && typeof firstNonNull === 'object';
+    
+    meta.plots.forEach((plot, plotIdx) => {
+        if (isObjectResult) {
+            const hasData = results.some(r => r && r[plot.id] !== undefined && r[plot.id] !== null);
+            if (!hasData) return;
+        }
+        
+        const plotColor = indicator.params[`_color_${plotIdx}`] || plot.color || '#2962ff';
+        
+        const data = [];
+        for (let i = 0; i < candles.length; i++) {
+            let value;
+            if (isObjectResult) {
+                value = results[i]?.[plot.id];
+            } else {
+                value = results[i];
+            }
+            
+            if (value !== null && value !== undefined) {
+                data.push({
+                    time: candles[i].time,
+                    value: value
+                });
+            }
+        }
+        
+        if (data.length === 0) return;
+        
+        let series;
+        let plotLineStyle = lineStyle;
+        if (plot.style === 'dashed') plotLineStyle = LightweightCharts.LineStyle.Dashed;
+        else if (plot.style === 'dotted') plotLineStyle = LightweightCharts.LineStyle.Dotted;
+        else if (plot.style === 'solid') plotLineStyle = LightweightCharts.LineStyle.Solid;
+        
+        if (plot.type === 'histogram') {
+            series = window.dashboard.chart.addSeries(LightweightCharts.HistogramSeries, {
+                color: plotColor,
+                priceFormat: { type: 'price', precision: 4, minMove: 0.0001 },
+                priceLineVisible: false,
+                lastValueVisible: false
+            }, paneIndex);
+        } else if (plot.type === 'baseline') {
+            series = window.dashboard.chart.addSeries(LightweightCharts.BaselineSeries, {
+                baseValue: { type: 'price', price: plot.baseValue || 0 },
+                topLineColor: plot.topLineColor || plotColor,
+                topFillColor1: plot.topFillColor1 || plotColor,
+                topFillColor2: '#00000000',
+                bottomFillColor1: '#00000000',
+                bottomColor: plot.bottomColor || '#00000000',
+                lineWidth: plot.width !== undefined ? plot.width : lineWidth,
+                lineStyle: plotLineStyle,
+                title: plot.title || '',
+                priceLineVisible: false,
+                lastValueVisible: plot.lastValueVisible !== false
+            }, paneIndex);
+        } else {
+            series = window.dashboard.chart.addSeries(LightweightCharts.LineSeries, {
+                color: plotColor,
+                lineWidth: plot.width !== undefined ? plot.width : lineWidth,
+                lineStyle: plotLineStyle,
+                title: plot.title || '',
+                priceLineVisible: false,
+                lastValueVisible: plot.lastValueVisible !== false
+            }, paneIndex);
+        }
+        
+        series.setData(data);
+        indicator.series.push(series);
+    });
+}
+
 // Chart drawing
 export function drawIndicatorsOnChart() {
     if (!window.dashboard || !window.dashboard.chart) return;