changes styles

static/bb.js

@@ -29,12 +29,14 @@ function calculateFullBollingerBands(data, params) {
     const internal = BB_INDICATOR.internalParams;
 
     // First, aggregate the base data into the desired timeframe for the BB calculation.
+    // Assumes an 'aggregateCandles' function is defined elsewhere.
     const aggregatedData = aggregateCandles(data, timeframe);
     if (aggregatedData.length === 0) {
         return { bb1_upper: [], bb1_lower: [], bb2_upper: [], bb2_lower: [], bb3_upper: [], bb3_lower: [] };
     }
 
-    // Calculate each set of bands using the aggregated data
+    // Calculate each set of bands using the aggregated data.
+    // The calculateBands function now returns data in a step-line format.
     const bb1 = calculateBands(aggregatedData, internal.bb1_len_upper, internal.bb1_std_upper, internal.bb1_len_lower, internal.bb1_std_lower);
     const bb2 = calculateBands(aggregatedData, internal.bb2_len_upper, internal.bb2_std_upper, internal.bb2_len_lower, internal.bb2_std_lower);
     const bb3 = calculateBands(aggregatedData, internal.bb3_len_upper, internal.bb3_std_upper, internal.bb3_len_lower, internal.bb3_std_lower);
@@ -45,7 +47,8 @@ function calculateFullBollingerBands(data, params) {
         if (bandData.length > 0) {
             const lastPoint = bandData[bandData.length - 1];
             if (lastPoint.time < lastCandleTime) {
-                bandData.push({ ...lastPoint, time: lastCandleTime });
+                // Push a new point to extend the horizontal line to the end of the chart.
+                bandData.push({ time: lastCandleTime, value: lastPoint.value });
             }
         }
         return bandData;
@@ -60,32 +63,57 @@ function calculateFullBollingerBands(data, params) {
 
 /**
  * Helper function to calculate a single set of upper and lower Bollinger Bands.
- * @returns {{upper: Array<Object>, lower: Array<Object>}}
+ * MODIFIED: This function now generates points in a "step-line" format, where each
+ * calculated value is held constant until the next calculation time.
+ * @param {Array<Object>} data The aggregated candle data to calculate the bands from.
+ * @param {number} upperLength The lookback period for the upper band.
+ * @param {number} upperStdDev The standard deviation multiplier for the upper band.
+ * @param {number} lowerLength The lookback period for the lower band.
+ * @param {number} lowerStdDev The standard deviation multiplier for the lower band.
+ * @returns {{upper: Array<Object>, lower: Array<Object>}} An object containing the point arrays for the upper and lower bands.
  */
 function calculateBands(data, upperLength, upperStdDev, lowerLength, lowerStdDev) {
     const upperBand = [];
     const lowerBand = [];
 
-    // Calculate Upper Band
+    // --- Calculate Upper Band ---
     for (let i = upperLength - 1; i < data.length; i++) {
         const slice = data.slice(i - upperLength + 1, i + 1);
         const sma = slice.reduce((sum, candle) => sum + candle.close, 0) / upperLength;
         const stdDev = Math.sqrt(slice.reduce((sum, candle) => sum + Math.pow(candle.close - sma, 2), 0) / upperLength);
-        upperBand.push({
+        
-            time: slice[slice.length - 1].time,
+        const newTime = slice[slice.length - 1].time;
-            value: sma + (stdDev * upperStdDev)
+        const newValue = sma + (stdDev * upperStdDev);
-        });
+
+        if (upperBand.length > 0) {
+            // Get the value from the previous calculation period.
+            const lastValue = upperBand[upperBand.length - 1].value;
+            // Add a point at the new time with the *old* value. This creates the horizontal line segment.
+            upperBand.push({ time: newTime, value: lastValue });
+        }
+
+        // Add the point with the new value at the new time. This creates the vertical jump.
+        upperBand.push({ time: newTime, value: newValue });
     }
 
-    // Calculate Lower Band
+    // --- Calculate Lower Band ---
     for (let i = lowerLength - 1; i < data.length; i++) {
         const slice = data.slice(i - lowerLength + 1, i + 1);
         const sma = slice.reduce((sum, candle) => sum + candle.close, 0) / lowerLength;
         const stdDev = Math.sqrt(slice.reduce((sum, candle) => sum + Math.pow(candle.close - sma, 2), 0) / lowerLength);
-        lowerBand.push({
+
-            time: slice[slice.length - 1].time,
+        const newTime = slice[slice.length - 1].time;
-            value: sma - (stdDev * lowerStdDev)
+        const newValue = sma - (stdDev * lowerStdDev);
-        });
+
+        if (lowerBand.length > 0) {
+            // Get the value from the previous calculation period.
+            const lastValue = lowerBand[lowerBand.length - 1].value;
+            // Add a point at the new time with the *old* value. This creates the horizontal line segment.
+            lowerBand.push({ time: newTime, value: lastValue });
+        }
+        
+        // Add the point with the new value at the new time. This creates the vertical jump.
+        lowerBand.push({ time: newTime, value: newValue });
     }
 
     return { upper: upperBand, lower: lowerBand };

static/indicator-manager.js

@@ -15,7 +15,14 @@ function createIndicatorManager(chart, baseCandleDataRef, displayedCandleDataRef
 
     // **FIX**: Updated colors object to match your styling request.
     const colors = {
-        bb: { bb1_upper: '#FF9800', bb1_lower: '#FF9800', bb2_upper: '#2196F3', bb2_lower: '#2196F3', bb3_upper: '#9C27B0', bb3_lower: '#9C27B0' },
+        bb: {
+            bb1_upper: 'rgba(128, 25, 34, 0.5)',   // Highest opacity
+            bb2_upper: 'rgba(128, 25, 34, 0.75)',
+            bb3_upper: 'rgba(128, 25, 34, 1)',    // Lowest opacity
+            bb1_lower: 'rgba(6, 95, 6, 0.5)',      // Highest band, 50% opacity
+            bb2_lower: 'rgba(6, 95, 6, 0.75)',
+            bb3_lower: 'rgba(6, 95, 6, 1.0)',      // Lowest band, 100% opacity
+        },
         hurst: { topBand: '#787b86', bottomBand: '#787b86', topBand_h: '#673ab7', bottomBand_h: '#673ab7' },
         default: ['#00BCD4', '#FFEB3B', '#4CAF50', '#E91E63'] // Cyan, Yellow, Green, Pink
     };
@@ -145,14 +152,14 @@ function createIndicatorManager(chart, baseCandleDataRef, displayedCandleDataRef
 
             if (newPoint && typeof newPoint === 'object') {
                  if (slot.series.length > 1) { // Multi-line indicator
-                    Object.keys(newPoint).forEach((key, index) => {
+                     Object.keys(newPoint).forEach((key, index) => {
-                        if (slot.series[index] && newPoint[key]) {
+                         if (slot.series[index] && newPoint[key]) {
-                            slot.series[index].update(newPoint[key]);
+                             slot.series[index].update(newPoint[key]);
-                        }
+                         }
-                    });
+                     });
-                } else if (slot.series.length === 1) { // Single-line indicator
+                 } else if (slot.series.length === 1) { // Single-line indicator
-                    slot.series[0].update(newPoint);
+                     slot.series[0].update(newPoint);
-                }
+                 }
             }
         }
     }
@@ -161,7 +168,7 @@ function createIndicatorManager(chart, baseCandleDataRef, displayedCandleDataRef
          baseCandleDataRef = baseData;
          displayedCandleDataRef = displayedData;
          indicatorSlots.forEach(slot => {
-            if (slot.definition) updateIndicator(slot.id, true);
+             if (slot.definition) updateIndicator(slot.id, true);
         });
     }
 

templates/index.html

@@ -148,8 +148,9 @@
                 timeScale: { timeVisible: true, secondsVisible: true }
             });
             const candlestickSeries = chart.addCandlestickSeries({
-                upColor: '#26a69a', downColor: '#ef5350', borderDownColor: '#ef5350',
+              
-                borderUpColor: '#26a69a', wickDownColor: '#ef5350', wickUpColor: '#26a69a',
+                upColor: 'rgba(255, 152, 0, 1.0)', downColor: 'rgba(255, 152, 0, 0.66)', borderDownColor: 'rgba(255, 152, 0, 0.66)',
+                borderUpColor: 'rgba(255, 152, 0, 1.0)', wickDownColor: 'rgba(255, 152, 0, 0.66)', wickUpColor: 'rgba(255, 152, 0, 1.0)'
             });
 
             let baseCandleData1m = [];