src/static/charts.js

@@ -13,8 +13,6 @@ class Charts {
         /* A list of bound charts this is necessary for maintaining a dynamic
            number of charts with their position and zoom factors bound.*/
         this.bound_charts=[];
-        // Debounce timestamp to prevent infinite loop in chart synchronization
-        this._lastSyncTime = 0;
         // Only the main chart is created by default.
         this.create_main_chart();
     }
@@ -28,8 +26,8 @@ class Charts {
         // Display the trading pair as a watermark overlaying the chart.
         this.addWatermark(this.chart_1, this.trading_pair);
 
-        // - Create the candle stick series for our chart (v5 API)
+        // - Create the candle stick series for our chart
-        this.candleSeries = this.chart_1.addSeries(LightweightCharts.CandlestickSeries);
+        this.candleSeries = this.chart_1.addCandlestickSeries();
 
         // Initialize the candlestick series if price_history is available
         if (this.price_history && this.price_history.length > 0) {
@@ -80,9 +78,9 @@ class Charts {
         this.addWatermark(this.chart5, 'Patterns');
         this.bind_charts(this.chart5);
 
-        // Sync time scale with main chart so timestamps align (v5 API)
+        // Sync time scale with main chart so timestamps align
         if (this.chart_1) {
-            let barSpacing = this.chart_1.timeScale().options().barSpacing;
+            let barSpacing = this.chart_1.timeScale().getBarSpacing();
             let scrollPosition = this.chart_1.timeScale().scrollPosition();
             this.chart5.timeScale().applyOptions({ rightOffset: scrollPosition, barSpacing: barSpacing });
         }
@@ -139,20 +137,16 @@ class Charts {
     }
 
 
-    addWatermark(chart, text){
+    addWatermark(chart,text){
-        // v5 API: watermarks are now created via createTextWatermark plugin
+        chart.applyOptions({
-        LightweightCharts.createTextWatermark(chart.panes()[0], {
+            watermark: {visible: true,
-            horzAlign: 'center',
-            vertAlign: 'center',
-            lines: [
-                {
-                    text: text,
                 color: '#DBC29E',
+                text: text,
 			    fontSize: 30,
 			    fontFamily: 'Roboto',
 			    fontStyle: 'bold',
+			    vertAlign: 'center'
             }
-            ]
         });
     }
 
@@ -187,11 +181,8 @@ class Charts {
     bind2charts(){
         //On change in chart 1 change chart 2
         let syncHandler1 = (e) => {
-            const now = Date.now();
+            // Get the barSpacing(zoom) and position of 1st chart.
-            if (now - this._lastSyncTime < 50) return;
+            let barSpacing1 = this.bound_charts[0].timeScale().getBarSpacing();
-            this._lastSyncTime = now;
-            // Get the barSpacing(zoom) and position of 1st chart (v5 API: options().barSpacing)
-            let barSpacing1 = this.bound_charts[0].timeScale().options().barSpacing;
             let scrollPosition1 = this.bound_charts[0].timeScale().scrollPosition();
             // Apply barSpacing(zoom) and position to 2nd chart.
             this.bound_charts[1].timeScale().applyOptions({ rightOffset: scrollPosition1, barSpacing: barSpacing1 });
@@ -200,11 +191,8 @@ class Charts {
 
         //On change in chart 2 change chart 1
         let syncHandler2 = (e) => {
-            const now = Date.now();
+            // Get the barSpacing(zoom) and position of chart 2
-            if (now - this._lastSyncTime < 50) return;
+            let barSpacing2 = this.bound_charts[1].timeScale().getBarSpacing();
-            this._lastSyncTime = now;
-            // Get the barSpacing(zoom) and position of chart 2 (v5 API: options().barSpacing)
-            let barSpacing2 = this.bound_charts[1].timeScale().options().barSpacing;
             let scrollPosition2 = this.bound_charts[1].timeScale().scrollPosition();
             // Apply barSpacing(zoom) and position to chart 1
             this.bound_charts[0].timeScale().applyOptions({ rightOffset: scrollPosition2, barSpacing: barSpacing2 });
@@ -215,11 +203,8 @@ class Charts {
 
         //On change to chart 1 change chart 2 and 3
         let syncHandler = (e) => {
-            const now = Date.now();
+            // Get the barSpacing(zoom) and position of chart 1
-            if (now - this._lastSyncTime < 50) return;
+            let barSpacing1 = this.bound_charts[0].timeScale().getBarSpacing();
-            this._lastSyncTime = now;
-            // Get the barSpacing(zoom) and position of chart 1 (v5 API)
-            let barSpacing1 = this.bound_charts[0].timeScale().options().barSpacing;
             let scrollPosition1 = this.bound_charts[0].timeScale().scrollPosition();
             // Apply barSpacing(zoom) and position to new chart
             this.bound_charts[1].timeScale().applyOptions({ rightOffset: scrollPosition1, barSpacing: barSpacing1 });
@@ -229,11 +214,8 @@ class Charts {
 
         //On change to chart 2 change chart 1 and 3
         let syncHandler2 = (e) => {
-            const now = Date.now();
+            // Get the barSpacing(zoom) and position of chart 2
-            if (now - this._lastSyncTime < 50) return;
+            let barSpacing2 = this.bound_charts[1].timeScale().getBarSpacing();
-            this._lastSyncTime = now;
-            // Get the barSpacing(zoom) and position of chart 2 (v5 API)
-            let barSpacing2 = this.bound_charts[1].timeScale().options().barSpacing;
             let scrollPosition2 = this.bound_charts[1].timeScale().scrollPosition();
             // Apply barSpacing(zoom) and position to chart 1 and 3
             this.bound_charts[0].timeScale().applyOptions({ rightOffset: scrollPosition2, barSpacing: barSpacing2 });
@@ -243,11 +225,8 @@ class Charts {
 
         //On change to chart 3 change chart 1 and 2
         let syncHandler3 = (e) => {
-            const now = Date.now();
+            // Get the barSpacing(zoom) and position of new chart
-            if (now - this._lastSyncTime < 50) return;
+            let barSpacing2 = this.bound_charts[2].timeScale().getBarSpacing();
-            this._lastSyncTime = now;
-            // Get the barSpacing(zoom) and position of new chart (v5 API)
-            let barSpacing2 = this.bound_charts[2].timeScale().options().barSpacing;
             let scrollPosition2 = this.bound_charts[2].timeScale().scrollPosition();
             // Apply barSpacing(zoom) and position to parent chart
             this.bound_charts[0].timeScale().applyOptions({ rightOffset: scrollPosition2, barSpacing: barSpacing2 });
@@ -257,13 +236,10 @@ class Charts {
     }
 
     bind4charts(){
-        // Sync all 4 charts together (v5 API: options().barSpacing)
+        // Sync all 4 charts together
         let syncFromChart = (sourceIndex) => {
             return (e) => {
-                const now = Date.now();
+                let barSpacing = this.bound_charts[sourceIndex].timeScale().getBarSpacing();
-                if (now - this._lastSyncTime < 50) return;
-                this._lastSyncTime = now;
-                let barSpacing = this.bound_charts[sourceIndex].timeScale().options().barSpacing;
                 let scrollPosition = this.bound_charts[sourceIndex].timeScale().scrollPosition();
                 for (let i = 0; i < 4; i++) {
                     if (i !== sourceIndex) {
@@ -279,13 +255,10 @@ class Charts {
     }
 
     bind5charts(){
-        // Sync all 5 charts together (main + RSI + MACD + %B + Patterns) (v5 API)
+        // Sync all 5 charts together (main + RSI + MACD + %B + Patterns)
         let syncFromChart = (sourceIndex) => {
             return (e) => {
-                const now = Date.now();
+                let barSpacing = this.bound_charts[sourceIndex].timeScale().getBarSpacing();
-                if (now - this._lastSyncTime < 50) return;
-                this._lastSyncTime = now;
-                let barSpacing = this.bound_charts[sourceIndex].timeScale().options().barSpacing;
                 let scrollPosition = this.bound_charts[sourceIndex].timeScale().scrollPosition();
                 for (let i = 0; i < 5; i++) {
                     if (i !== sourceIndex) {
@@ -366,20 +339,14 @@ class Charts {
 
         console.log(`Setting ${markers.length} trade markers on chart`);
 
-        // v5 API: use createSeriesMarkers instead of series.setMarkers
+        // Set markers on the candlestick series
-        // Clear existing markers primitive if it exists
+        this.candleSeries.setMarkers(markers);
-        if (this.markersPrimitive) {
-            this.markersPrimitive.setMarkers([]);
-        }
-        // Create new markers primitive
-        this.markersPrimitive = LightweightCharts.createSeriesMarkers(this.candleSeries, markers);
     }
 
     // Clear all trade markers from chart
     clearTradeMarkers() {
-        // v5 API: clear markers via the markers primitive
+        if (this.candleSeries) {
-        if (this.markersPrimitive) {
+            this.candleSeries.setMarkers([]);
-            this.markersPrimitive.setMarkers([]);
             console.log('Trade markers cleared');
         }
     }

src/static/general.js

@@ -15,7 +15,7 @@ class User_Interface {
         this.account = new Account();
 
         // Register a callback function for when indicator updates are received from the data object
-        this.data.registerCallback_i_updates(this.indicators.update.bind(this.indicators));
+        this.data.registerCallback_i_updates(this.indicators.update);
 
         // Initialize all components after the page has loaded and Blockly is ready
         this.initializeAll();

src/static/indicators.js

@@ -14,12 +14,8 @@ class Indicator_Output {
         this.legend[name].style.left = 3 + 'px';
         this.legend[name].style.top = 3 + 'px';
         // subscribe set legend text to crosshair moves
-        // v5 API: seriesPrices renamed to seriesData, returns full data item
         chart.subscribeCrosshairMove((param) => {
-            const data = param.seriesData.get(lineSeries);
+            this.set_legend_text(param.seriesPrices.get(lineSeries), name);
-            // Extract value from data item (could be {value} or {close} etc)
-            const priceValue = data ? (data.value !== undefined ? data.value : data.close) : undefined;
-            this.set_legend_text(priceValue, name);
         });
     }
 
@@ -92,27 +88,21 @@ class Indicator {
     }
 
     addHist(name, chart, color = '#26a69a') {
-        // v5 API: use addSeries with HistogramSeries
+        this.hist[name] = chart.addHistogramSeries({
-        this.hist[name] = chart.addSeries(LightweightCharts.HistogramSeries, {
             color: color,
             priceFormat: {
                 type: 'price',
             },
             priceScaleId: 'volume_ps',
-        });
-        // v5: scaleMargins must be set on the price scale, not series options
-        // Volume should only take up bottom 30% of the chart
-        chart.priceScale('volume_ps').applyOptions({
             scaleMargins: {
-                top: 0.7,
+                top: 0,
                 bottom: 0,
             },
         });
     }
 
     addLine(name, chart, color, lineWidth) {
-        // v5 API: use addSeries with LineSeries
+        this.lines[name] = chart.addLineSeries({
-        this.lines[name] = chart.addSeries(LightweightCharts.LineSeries, {
             color: color,
             lineWidth: lineWidth
         });
@@ -121,6 +111,8 @@ class Indicator {
     }
 
     setLine(lineName, data, value_name) {
+        console.log('indicators[68]: setLine takes:(lineName, data, value_name)');
+        console.log(lineName, data, value_name);
 
         let priceValue;
 
@@ -151,7 +143,6 @@ class Indicator {
     }
 
     updateDisplay(name, priceValue, value_name) {
-        // Try the old element format first (legacy chart-based display)
         let element = document.getElementById(this.name + '_' + value_name);
         if (element) {
             if (typeof priceValue === 'object' && priceValue !== null) {
@@ -181,36 +172,7 @@ class Indicator {
             element.style.height = 'auto';  // Reset height
             element.style.height = (element.scrollHeight) + 'px';  // Adjust height based on content
         } else {
-            // Try the new card-based display element
+            console.warn(`Element with ID ${this.name}_${value_name} not found.`);
-            const cardElement = document.getElementById(`indicator_card_value_${this.name}`);
-            if (cardElement) {
-                let displayValue = '--';
-                if (typeof priceValue === 'object' && priceValue !== null) {
-                    // For object values, get the first numeric value
-                    const values = Object.values(priceValue).filter(v => typeof v === 'number' && !isNaN(v));
-                    if (values.length > 0) {
-                        displayValue = this._formatDisplayValue(values[0]);
-                    }
-                } else if (typeof priceValue === 'number' && !isNaN(priceValue)) {
-                    displayValue = this._formatDisplayValue(priceValue);
-                }
-                cardElement.textContent = displayValue;
-            }
-            // Silently ignore if neither element exists (may be during initialization)
-        }
-    }
-
-    /**
-     * Formats a numeric value for display in cards
-     */
-    _formatDisplayValue(value) {
-        if (value === null || value === undefined || isNaN(value)) return '--';
-        if (Math.abs(value) >= 1000) {
-            return value.toFixed(0);
-        } else if (Math.abs(value) >= 100) {
-            return value.toFixed(1);
-        } else {
-            return value.toFixed(2);
         }
     }
 
@@ -219,6 +181,8 @@ class Indicator {
     }
 
     updateLine(name, data, value_name) {
+        console.log('indicators[68]: updateLine takes:(name, data, value_name)');
+        console.log(name, data, value_name);
 
         // Check if the data is a multi-value object
         if (typeof data === 'object' && data !== null && value_name in data) {
@@ -299,6 +263,7 @@ class SMA extends Indicator {
 
     init(data) {
         this.setLine('line', data, 'value');
+        console.log('line data', data);
     }
 
     update(data) {
@@ -609,8 +574,8 @@ class CandlestickPattern extends Indicator {
     }
 
     addPatternHist(name, chart) {
-        // v5 API: use addSeries with HistogramSeries
+        // Create histogram series for pattern signals
-        this.hist[name] = chart.addSeries(LightweightCharts.HistogramSeries, {
+        this.hist[name] = chart.addHistogramSeries({
             priceFormat: {
                 type: 'price',
             },