@chartspire/chartspire-chart 10.0.0-alpha2 → 10.0.0-alpha3

package/dist/index.d.ts

@@ -201,6 +201,11 @@ export interface CandleTooltipStyle extends TooltipStyle, Offset {
 	custom: CandleTooltipCustomCallback | TooltipLegend[];
 	rect: CandleTooltipRectStyle;
 }
+export interface RenkoStyle {
+	brick: {
+		size: number;
+	};
+}
 export declare enum CandleType {
 	HeikinAshi = "heikin_ashi",
 	CandleSolid = "candle_solid",
@@ -224,6 +229,7 @@ export interface CandleStyle {
 	area: CandleAreaStyle;
 	priceMark: CandlePriceMarkStyle;
 	tooltip: CandleTooltipStyle;
+	renko?: RenkoStyle;
 }
 export type IndicatorPolygonStyle = Omit<PolygonStyle, "color" | "borderColor"> & ChangeColor;
 export interface IndicatorLastValueMarkStyle {

package/dist/index.esm.js

@@ -351,6 +351,11 @@ function getDefaultCandleStyle() {
                 marginBottom: 4
             },
             icons: []
+        },
+        renko: {
+            brick: {
+                size: 10
+            }
         }
     };
 }
@@ -7501,10 +7506,14 @@ var ChildrenView = /** @class */ (function (_super) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+// Small epsilon value to handle floating point comparison
+var EPSILON = 0.000001;
 var CandleBarView = /** @class */ (function (_super) {
     __extends(CandleBarView, _super);
     function CandleBarView() {
         var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        // Cache for Heikin-Ashi calculations
+        _this._heikinAshiCache = new Map();
         _this._boundCandleBarClickEvent = function (data) { return function () {
             _this.getWidget().getPane().getChart().getChartStore().executeAction(ActionType.OnCandleBarClick, data);
             return false;
@@ -7528,6 +7537,10 @@ var CandleBarView = /** @class */ (function (_super) {
                 }
                 halfOhlcSize_1 = Math.floor(halfOhlcSize_1 / 2);
             }
+            // Clear Heikin-Ashi cache when changing to a different chart type
+            if (candleBarOptions.type !== CandleType.HeikinAshi) {
+                this._heikinAshiCache.clear();
+            }
             var yAxis_1 = pane.getAxisComponent();
             this.eachChildren(function (data, barSpace) {
                 var kLineData = data.data, x = data.x;
@@ -7618,6 +7631,8 @@ var CandleBarView = /** @class */ (function (_super) {
                         }
                         case CandleType.HeikinAshi: {
                             var heikinAshiData = _this._calculateHeikinAshi(data);
+                            // Determine colors based on Heikin-Ashi data and original candle
+                            colors = _this._getHeikinAshiColors(heikinAshiData.haValues.open, heikinAshiData.haValues.close, open_1, close_1, styles);
                             rects = _this._createSolidBar(x, heikinAshiData.priceY, barSpace, colors, correction);
                             break;
                         }
@@ -7710,9 +7725,9 @@ var CandleBarView = /** @class */ (function (_super) {
      * Calculate Heikin Ashi candle data
      * Calculation method is based on the following formula:
      * - Close = (Open + High + Low + Close) / 4
-     * - Open = (Previous Open + Previous Close) / 2
-     * - High = Max(High, Open, Close)
-     * - Low = Min(Low, Open, Close)
+     * - Open = (Previous HA Open + Previous HA Close) / 2
+     * - High = Max(High, HA Open, HA Close)
+     * - Low = Min(Low, HA Open, HA Close)
      *
      * To read more please read - https://www.investopedia.com/trading/heikin-ashi-better-candlestick/
      *
@@ -7722,13 +7737,58 @@ var CandleBarView = /** @class */ (function (_super) {
     CandleBarView.prototype._calculateHeikinAshi = function (data) {
         var kLineData = data.data, dataIndex = data.dataIndex;
         var _a = kLineData, open = _a.open, high = _a.high, low = _a.low, close = _a.close;
-        var previousData = this.getPreviousData(dataIndex);
-        var previousClose = (previousData != null) ? previousData.close : close;
-        var previousOpen = (previousData != null) ? previousData.open : open;
+        // Check if this candle's HA values are already calculated
+        var cachedHeikinAshi = this._heikinAshiCache.get(dataIndex);
+        if (cachedHeikinAshi !== undefined) {
+            var yAxis_2 = this.getWidget().getPane().getAxisComponent();
+            var priceY_1 = [
+                yAxis_2.convertToPixel(cachedHeikinAshi.open),
+                yAxis_2.convertToPixel(cachedHeikinAshi.close),
+                yAxis_2.convertToPixel(cachedHeikinAshi.high),
+                yAxis_2.convertToPixel(cachedHeikinAshi.low)
+            ];
+            priceY_1.sort(function (a, b) { return a - b; });
+            return { priceY: priceY_1, haValues: cachedHeikinAshi };
+        }
+        // Calculate Heikin-Ashi values
+        // First, calculate the close which is always the same formula
         var haClose = (open + high + low + close) / 4;
-        var haOpen = (previousOpen + previousClose) / 2;
+        var haOpen = 0;
+        // Get the previous HA data if available, otherwise use regular OHLC
+        if (dataIndex > 0) {
+            var previousHA = this._getHeikinAshiValues(dataIndex - 1);
+            if (previousHA !== null) {
+                // Use previous HA values to calculate current HA open
+                haOpen = (previousHA.open + previousHA.close) / 2;
+            }
+            else {
+                // Fallback if previous HA values aren't available
+                var previousData = this.getPreviousData(dataIndex);
+                if (previousData !== null) {
+                    haOpen = (previousData.open + previousData.close) / 2;
+                }
+                else {
+                    haOpen = open; // First candle
+                }
+            }
+        }
+        else {
+            // First candle in the series
+            haOpen = (open + close) / 2;
+        }
+        // Calculate high and low based on HA values
         var haHigh = Math.max(high, haOpen, haClose);
         var haLow = Math.min(low, haOpen, haClose);
+        // Create HA data object
+        var haValues = {
+            open: haOpen,
+            high: haHigh,
+            low: haLow,
+            close: haClose
+        };
+        // Cache the calculated values
+        this._heikinAshiCache.set(dataIndex, haValues);
+        // Convert to pixel coordinates for display
         var yAxis = this.getWidget().getPane().getAxisComponent();
         var priceY = [
             yAxis.convertToPixel(haOpen),
@@ -7737,7 +7797,52 @@ var CandleBarView = /** @class */ (function (_super) {
             yAxis.convertToPixel(haLow)
         ];
         priceY.sort(function (a, b) { return a - b; });
-        return { priceY: priceY };
+        return { priceY: priceY, haValues: haValues };
+    };
+    /**
+     * Get Heikin-Ashi values for a specific candle, calculating them if necessary
+     * @param dataIndex - The index of the data point in the data list
+     * @private
+     */
+    CandleBarView.prototype._getHeikinAshiValues = function (dataIndex) {
+        // Check if already calculated
+        var cachedValues = this._heikinAshiCache.get(dataIndex);
+        if (cachedValues !== undefined) {
+            return cachedValues;
+        }
+        // Not calculated yet, need to calculate
+        var dataList = this.getWidget().getPane().getChart().getChartStore().getDataList();
+        if (dataIndex < 0 || dataIndex >= dataList.length) {
+            return null;
+        }
+        var kLineData = dataList[dataIndex];
+        // Get the previous candle's HA values, recursively calculate if necessary
+        var previousHA = null;
+        if (dataIndex > 0) {
+            previousHA = this._getHeikinAshiValues(dataIndex - 1);
+        }
+        var open = kLineData.open, high = kLineData.high, low = kLineData.low, close = kLineData.close;
+        // Calculate HA values
+        var haClose = (open + high + low + close) / 4;
+        var haOpen = 0;
+        if (previousHA !== null) {
+            haOpen = (previousHA.open + previousHA.close) / 2;
+        }
+        else {
+            // For the first candle
+            haOpen = (open + close) / 2;
+        }
+        var haHigh = Math.max(high, haOpen, haClose);
+        var haLow = Math.min(low, haOpen, haClose);
+        var haValues = {
+            open: haOpen,
+            high: haHigh,
+            low: haLow,
+            close: haClose
+        };
+        // Cache the values
+        this._heikinAshiCache.set(dataIndex, haValues);
+        return haValues;
     };
     /**
      * Retrieves the previous KLineData from the data list based on the given index.
@@ -7757,6 +7862,57 @@ var CandleBarView = /** @class */ (function (_super) {
         }
         return null;
     };
+    /**
+     * Determine appropriate colors for Heikin-Ashi candles based on their open and close values
+     * @param haOpen - Heikin-Ashi open price
+     * @param haClose - Heikin-Ashi close price
+     * @param originalOpen - Original candle open price
+     * @param originalClose - Original candle close price
+     * @param styles - Candle bar color styles
+     * @returns Array of colors [bodyColor, borderColor, wickColor]
+     * @private
+     */
+    CandleBarView.prototype._getHeikinAshiColors = function (haOpen, haClose, originalOpen, originalClose, styles) {
+        var colors = [];
+        // Fixed comparison logic with epsilon to avoid floating point precision issues
+        var diff = haClose - haOpen;
+        // Determine candle color based on the relationship between HA open and close
+        if (diff > EPSILON) {
+            // Clearly higher close - green candle
+            colors[0] = styles.upColor;
+            colors[1] = styles.upBorderColor;
+            colors[2] = styles.upWickColor;
+        }
+        else if (diff < -1e-6) {
+            // Clearly lower close - red candle
+            colors[0] = styles.downColor;
+            colors[1] = styles.downBorderColor;
+            colors[2] = styles.downWickColor;
+        }
+        else {
+            // Essentially equal - use neutral color
+            // But check the trend direction from original candle for tie-breaking
+            if (originalClose > originalOpen) {
+                // Rising trend in original candle, prefer showing as up
+                colors[0] = styles.upColor;
+                colors[1] = styles.upBorderColor;
+                colors[2] = styles.upWickColor;
+            }
+            else if (originalClose < originalOpen) {
+                // Falling trend in original candle, prefer showing as down
+                colors[0] = styles.downColor;
+                colors[1] = styles.downBorderColor;
+                colors[2] = styles.downWickColor;
+            }
+            else {
+                // Truly neutral
+                colors[0] = styles.noChangeColor;
+                colors[1] = styles.noChangeBorderColor;
+                colors[2] = styles.noChangeWickColor;
+            }
+        }
+        return colors;
+    };
     return CandleBarView;
 }(ChildrenView));
 
@@ -13243,7 +13399,7 @@ var ChartImp = /** @class */ (function () {
                 }
             }
         });
-        createCandlePane({ type: "candle" /* LayoutChildType.Candle */ });
+        createCandlePane({ });
         createXAxisPane({ order: Number.MAX_SAFE_INTEGER });
     };
     ChartImp.prototype._createPane = function (DrawPaneClass, id, options) {

package/dist/umd/klinecharts.js

@@ -357,6 +357,11 @@ function getDefaultCandleStyle() {
                 marginBottom: 4
             },
             icons: []
+        },
+        renko: {
+            brick: {
+                size: 10
+            }
         }
     };
 }
@@ -7506,10 +7511,14 @@ var ChildrenView = /** @class */ (function (_super) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+// Small epsilon value to handle floating point comparison
+var EPSILON = 0.000001;
 var CandleBarView = /** @class */ (function (_super) {
     __extends(CandleBarView, _super);
     function CandleBarView() {
         var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        // Cache for Heikin-Ashi calculations
+        _this._heikinAshiCache = new Map();
         _this._boundCandleBarClickEvent = function (data) { return function () {
             _this.getWidget().getPane().getChart().getChartStore().executeAction(exports.ActionType.OnCandleBarClick, data);
             return false;
@@ -7533,6 +7542,10 @@ var CandleBarView = /** @class */ (function (_super) {
                 }
                 halfOhlcSize_1 = Math.floor(halfOhlcSize_1 / 2);
             }
+            // Clear Heikin-Ashi cache when changing to a different chart type
+            if (candleBarOptions.type !== exports.CandleType.HeikinAshi) {
+                this._heikinAshiCache.clear();
+            }
             var yAxis_1 = pane.getAxisComponent();
             this.eachChildren(function (data, barSpace) {
                 var kLineData = data.data, x = data.x;
@@ -7623,6 +7636,8 @@ var CandleBarView = /** @class */ (function (_super) {
                         }
                         case exports.CandleType.HeikinAshi: {
                             var heikinAshiData = _this._calculateHeikinAshi(data);
+                            // Determine colors based on Heikin-Ashi data and original candle
+                            colors = _this._getHeikinAshiColors(heikinAshiData.haValues.open, heikinAshiData.haValues.close, open_1, close_1, styles);
                             rects = _this._createSolidBar(x, heikinAshiData.priceY, barSpace, colors, correction);
                             break;
                         }
@@ -7715,9 +7730,9 @@ var CandleBarView = /** @class */ (function (_super) {
      * Calculate Heikin Ashi candle data
      * Calculation method is based on the following formula:
      * - Close = (Open + High + Low + Close) / 4
-     * - Open = (Previous Open + Previous Close) / 2
-     * - High = Max(High, Open, Close)
-     * - Low = Min(Low, Open, Close)
+     * - Open = (Previous HA Open + Previous HA Close) / 2
+     * - High = Max(High, HA Open, HA Close)
+     * - Low = Min(Low, HA Open, HA Close)
      *
      * To read more please read - https://www.investopedia.com/trading/heikin-ashi-better-candlestick/
      *
@@ -7727,13 +7742,58 @@ var CandleBarView = /** @class */ (function (_super) {
     CandleBarView.prototype._calculateHeikinAshi = function (data) {
         var kLineData = data.data, dataIndex = data.dataIndex;
         var _a = kLineData, open = _a.open, high = _a.high, low = _a.low, close = _a.close;
-        var previousData = this.getPreviousData(dataIndex);
-        var previousClose = (previousData != null) ? previousData.close : close;
-        var previousOpen = (previousData != null) ? previousData.open : open;
+        // Check if this candle's HA values are already calculated
+        var cachedHeikinAshi = this._heikinAshiCache.get(dataIndex);
+        if (cachedHeikinAshi !== undefined) {
+            var yAxis_2 = this.getWidget().getPane().getAxisComponent();
+            var priceY_1 = [
+                yAxis_2.convertToPixel(cachedHeikinAshi.open),
+                yAxis_2.convertToPixel(cachedHeikinAshi.close),
+                yAxis_2.convertToPixel(cachedHeikinAshi.high),
+                yAxis_2.convertToPixel(cachedHeikinAshi.low)
+            ];
+            priceY_1.sort(function (a, b) { return a - b; });
+            return { priceY: priceY_1, haValues: cachedHeikinAshi };
+        }
+        // Calculate Heikin-Ashi values
+        // First, calculate the close which is always the same formula
         var haClose = (open + high + low + close) / 4;
-        var haOpen = (previousOpen + previousClose) / 2;
+        var haOpen = 0;
+        // Get the previous HA data if available, otherwise use regular OHLC
+        if (dataIndex > 0) {
+            var previousHA = this._getHeikinAshiValues(dataIndex - 1);
+            if (previousHA !== null) {
+                // Use previous HA values to calculate current HA open
+                haOpen = (previousHA.open + previousHA.close) / 2;
+            }
+            else {
+                // Fallback if previous HA values aren't available
+                var previousData = this.getPreviousData(dataIndex);
+                if (previousData !== null) {
+                    haOpen = (previousData.open + previousData.close) / 2;
+                }
+                else {
+                    haOpen = open; // First candle
+                }
+            }
+        }
+        else {
+            // First candle in the series
+            haOpen = (open + close) / 2;
+        }
+        // Calculate high and low based on HA values
         var haHigh = Math.max(high, haOpen, haClose);
         var haLow = Math.min(low, haOpen, haClose);
+        // Create HA data object
+        var haValues = {
+            open: haOpen,
+            high: haHigh,
+            low: haLow,
+            close: haClose
+        };
+        // Cache the calculated values
+        this._heikinAshiCache.set(dataIndex, haValues);
+        // Convert to pixel coordinates for display
         var yAxis = this.getWidget().getPane().getAxisComponent();
         var priceY = [
             yAxis.convertToPixel(haOpen),
@@ -7742,7 +7802,52 @@ var CandleBarView = /** @class */ (function (_super) {
             yAxis.convertToPixel(haLow)
         ];
         priceY.sort(function (a, b) { return a - b; });
-        return { priceY: priceY };
+        return { priceY: priceY, haValues: haValues };
+    };
+    /**
+     * Get Heikin-Ashi values for a specific candle, calculating them if necessary
+     * @param dataIndex - The index of the data point in the data list
+     * @private
+     */
+    CandleBarView.prototype._getHeikinAshiValues = function (dataIndex) {
+        // Check if already calculated
+        var cachedValues = this._heikinAshiCache.get(dataIndex);
+        if (cachedValues !== undefined) {
+            return cachedValues;
+        }
+        // Not calculated yet, need to calculate
+        var dataList = this.getWidget().getPane().getChart().getChartStore().getDataList();
+        if (dataIndex < 0 || dataIndex >= dataList.length) {
+            return null;
+        }
+        var kLineData = dataList[dataIndex];
+        // Get the previous candle's HA values, recursively calculate if necessary
+        var previousHA = null;
+        if (dataIndex > 0) {
+            previousHA = this._getHeikinAshiValues(dataIndex - 1);
+        }
+        var open = kLineData.open, high = kLineData.high, low = kLineData.low, close = kLineData.close;
+        // Calculate HA values
+        var haClose = (open + high + low + close) / 4;
+        var haOpen = 0;
+        if (previousHA !== null) {
+            haOpen = (previousHA.open + previousHA.close) / 2;
+        }
+        else {
+            // For the first candle
+            haOpen = (open + close) / 2;
+        }
+        var haHigh = Math.max(high, haOpen, haClose);
+        var haLow = Math.min(low, haOpen, haClose);
+        var haValues = {
+            open: haOpen,
+            high: haHigh,
+            low: haLow,
+            close: haClose
+        };
+        // Cache the values
+        this._heikinAshiCache.set(dataIndex, haValues);
+        return haValues;
     };
     /**
      * Retrieves the previous KLineData from the data list based on the given index.
@@ -7762,6 +7867,57 @@ var CandleBarView = /** @class */ (function (_super) {
         }
         return null;
     };
+    /**
+     * Determine appropriate colors for Heikin-Ashi candles based on their open and close values
+     * @param haOpen - Heikin-Ashi open price
+     * @param haClose - Heikin-Ashi close price
+     * @param originalOpen - Original candle open price
+     * @param originalClose - Original candle close price
+     * @param styles - Candle bar color styles
+     * @returns Array of colors [bodyColor, borderColor, wickColor]
+     * @private
+     */
+    CandleBarView.prototype._getHeikinAshiColors = function (haOpen, haClose, originalOpen, originalClose, styles) {
+        var colors = [];
+        // Fixed comparison logic with epsilon to avoid floating point precision issues
+        var diff = haClose - haOpen;
+        // Determine candle color based on the relationship between HA open and close
+        if (diff > EPSILON) {
+            // Clearly higher close - green candle
+            colors[0] = styles.upColor;
+            colors[1] = styles.upBorderColor;
+            colors[2] = styles.upWickColor;
+        }
+        else if (diff < -1e-6) {
+            // Clearly lower close - red candle
+            colors[0] = styles.downColor;
+            colors[1] = styles.downBorderColor;
+            colors[2] = styles.downWickColor;
+        }
+        else {
+            // Essentially equal - use neutral color
+            // But check the trend direction from original candle for tie-breaking
+            if (originalClose > originalOpen) {
+                // Rising trend in original candle, prefer showing as up
+                colors[0] = styles.upColor;
+                colors[1] = styles.upBorderColor;
+                colors[2] = styles.upWickColor;
+            }
+            else if (originalClose < originalOpen) {
+                // Falling trend in original candle, prefer showing as down
+                colors[0] = styles.downColor;
+                colors[1] = styles.downBorderColor;
+                colors[2] = styles.downWickColor;
+            }
+            else {
+                // Truly neutral
+                colors[0] = styles.noChangeColor;
+                colors[1] = styles.noChangeBorderColor;
+                colors[2] = styles.noChangeWickColor;
+            }
+        }
+        return colors;
+    };
     return CandleBarView;
 }(ChildrenView));
 
@@ -13248,7 +13404,7 @@ var ChartImp = /** @class */ (function () {
                 }
             }
         });
-        createCandlePane({ type: "candle" /* LayoutChildType.Candle */ });
+        createCandlePane({ });
         createXAxisPane({ order: Number.MAX_SAFE_INTEGER });
     };
     ChartImp.prototype._createPane = function (DrawPaneClass, id, options) {