tslab-widgets 0.1.0 → 1.0.0

package/dist/chart/plugins/verticalLine.js

@@ -7,14 +7,17 @@ class VertLinePaneRenderer {
         this._options = _options;
     }
     draw(target) {
-        target.useBitmapCoordinateSpace(scope => {
+        target.useBitmapCoordinateSpace((scope) => {
             if (this._x === null)
                 return;
             const ctx = scope.context;
             const scaledPosition = Math.round(scope.horizontalPixelRatio * this._x);
             const lineBitmapWidth = Math.round(this._options.width * scope.horizontalPixelRatio);
             const offset = Math.floor(lineBitmapWidth * 0.5);
-            const position = { length: lineBitmapWidth, position: scaledPosition - offset };
+            const position = {
+                length: lineBitmapWidth,
+                position: scaledPosition - offset,
+            };
             ctx.fillStyle = this._options.color;
             ctx.fillRect(position.position, 0, position.length, scope.bitmapSize.height);
         });
@@ -42,22 +45,40 @@ class VertLineTimeAxisView {
         this._options = _options;
         this._x = null;
     }
-    backColor() { return this._options.labelBackgroundColor; }
-    coordinate() { var _a; return (_a = this._x) !== null && _a !== void 0 ? _a : 0; }
-    text() { return this._options.labelText; }
-    textColor() { return this._options.labelTextColor; }
-    tickVisible() { return this._options.showLabel; }
+    backColor() {
+        return this._options.labelBackgroundColor;
+    }
+    coordinate() {
+        var _a;
+        return (_a = this._x) !== null && _a !== void 0 ? _a : 0;
+    }
+    text() {
+        return this._options.labelText;
+    }
+    textColor() {
+        return this._options.labelTextColor;
+    }
+    tickVisible() {
+        return this._options.showLabel;
+    }
     update() {
         const timeScale = this._source._chart.timeScale();
         this._x = timeScale.timeToCoordinate(this._source._time);
     }
-    visible() { return this._options.showLabel; }
+    visible() {
+        return this._options.showLabel;
+    }
 }
 exports.VertLineTimeAxisView = VertLineTimeAxisView;
 class VertLine {
     constructor(chart, series, time, options) {
         const defaultOptions = {
-            color: 'green', labelBackgroundColor: 'green', labelText: '', labelTextColor: 'white', showLabel: false, width: 2,
+            color: "green",
+            labelBackgroundColor: "green",
+            labelText: "",
+            labelTextColor: "white",
+            showLabel: false,
+            width: 2,
         };
         const vertLineOptions = Object.assign(Object.assign({}, defaultOptions), options);
         this._chart = chart;
@@ -66,11 +87,20 @@ class VertLine {
         this._paneViews = [new VertLinePaneView(this, vertLineOptions)];
         this._timeAxisViews = [new VertLineTimeAxisView(this, vertLineOptions)];
     }
-    paneViews() { return this._paneViews; }
-    timeAxisViews() { return this._timeAxisViews; }
+    paneViews() {
+        return this._paneViews;
+    }
+    timeAxisViews() {
+        return this._timeAxisViews;
+    }
     updateAllViews() {
-        this._paneViews.forEach(pw => { pw.update(); });
-        this._timeAxisViews.forEach(tw => { tw.update(); });
+        this._paneViews.forEach((pw) => {
+            pw.update();
+        });
+        this._timeAxisViews.forEach((tw) => {
+            tw.update();
+        });
     }
 }
 exports.VertLine = VertLine;
+//# sourceMappingURL=verticalLine.js.map

package/dist/chart/plugins/verticalLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verticalLine.js","sourceRoot":"","sources":["../../../src/chart/plugins/verticalLine.ts"],"names":[],"mappings":"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"}

package/dist/chart/plugins/volumeProfile.d.ts

@@ -1,4 +1,4 @@
-import type { Coordinate, IChartApi, ISeriesApi, ISeriesPrimitive, ISeriesPrimitivePaneRenderer, ISeriesPrimitivePaneView, SeriesType, Time } from 'lightweight-charts';
+import type { CandlestickData, Coordinate, IChartApi, IPrimitivePaneRenderer, IPrimitivePaneView, ISeriesApi, ISeriesPrimitive, SeriesType, Time } from "lightweight-charts";
 type IVolumeProfileDataPoint = {
     negativeVolume: number;
     positiveVolume: number;
@@ -6,31 +6,31 @@ type IVolumeProfileDataPoint = {
 };
 export type IVolumeProfileData = {
     fromTime: Time;
-    position: 'left' | 'right';
+    toTime?: Time;
+    position: "left" | "right";
     profile: IVolumeProfileDataPoint[];
 };
 type IVolumeProfileItem = {
     widthNegative: number;
     widthPositive: number;
     y: Coordinate | null;
+    height: number;
 };
 type IVolumeProfileRendererData = {
-    columnHeight: number;
     items: IVolumeProfileItem[];
-    position: 'left' | 'right';
+    position: "left" | "right";
     top: Coordinate | null;
     widthNegative: number;
     widthPositive: number;
 };
-export declare class VolumeProfileRenderer implements ISeriesPrimitivePaneRenderer {
+export declare class VolumeProfileRenderer implements IPrimitivePaneRenderer {
     private _data;
     constructor(_data: IVolumeProfileRendererData);
     private positionsBox;
-    draw(target: Parameters<ISeriesPrimitivePaneRenderer['draw']>[0]): void;
+    draw(target: Parameters<IPrimitivePaneRenderer["draw"]>[0]): void;
 }
-export declare class VolumeProfilePaneView implements ISeriesPrimitivePaneView {
+export declare class VolumeProfilePaneView implements IPrimitivePaneView {
     private _source;
-    private _columnHeight;
     private _items;
     private _top;
     private _widthNegative;
@@ -45,16 +45,36 @@ export declare class VolumeProfilePaneView implements ISeriesPrimitivePaneView {
 export declare class VolumeProfileSeries implements ISeriesPrimitive {
     private _chart;
     private _series;
-    private _vpData;
     private _paneViews;
+    private _vpData;
     _vpIndex: null | number;
-    constructor(_chart: IChartApi, _series: ISeriesApi<SeriesType>, _vpData: IVolumeProfileData);
+    constructor(_chart: IChartApi, _series: ISeriesApi<SeriesType>, _vpSettings: VolumeProfileConfig, ohlcv: (CandlestickData & {
+        volume: number;
+    })[]);
     getContext(): {
         chart: IChartApi;
-        series: ISeriesApi<keyof import("lightweight-charts").SeriesOptionsMap, Time, import("lightweight-charts").BarData<Time> | import("lightweight-charts").WhitespaceData<Time> | import("lightweight-charts").CandlestickData<Time> | import("lightweight-charts").AreaData<Time> | import("lightweight-charts").BaselineData<Time> | import("lightweight-charts").LineData<Time> | import("lightweight-charts").HistogramData<Time> | import("lightweight-charts").CustomData<Time> | import("lightweight-charts").CustomSeriesWhitespaceData<Time>, import("lightweight-charts").BarSeriesOptions | import("lightweight-charts").CandlestickSeriesOptions | import("lightweight-charts").AreaSeriesOptions | import("lightweight-charts").BaselineSeriesOptions | import("lightweight-charts").LineSeriesOptions | import("lightweight-charts").HistogramSeriesOptions | import("lightweight-charts").CustomSeriesOptions, import("lightweight-charts").DeepPartial<import("lightweight-charts").AreaStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").BaselineStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").BarStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").CandlestickStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").HistogramStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").LineStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").CustomStyleOptions & import("lightweight-charts").SeriesOptionsCommon>>;
+        series: ISeriesApi<keyof import("lightweight-charts").SeriesOptionsMap, Time, import("lightweight-charts").WhitespaceData<Time> | import("lightweight-charts").LineData<Time> | CandlestickData<Time> | import("lightweight-charts").BarData<Time> | import("lightweight-charts").AreaData<Time> | import("lightweight-charts").BaselineData<Time> | import("lightweight-charts").HistogramData<Time> | import("lightweight-charts").CustomData<Time> | import("lightweight-charts").CustomSeriesWhitespaceData<Time>, import("lightweight-charts").BarSeriesOptions | import("lightweight-charts").CandlestickSeriesOptions | import("lightweight-charts").AreaSeriesOptions | import("lightweight-charts").BaselineSeriesOptions | import("lightweight-charts").LineSeriesOptions | import("lightweight-charts").HistogramSeriesOptions | import("lightweight-charts").CustomSeriesOptions, import("lightweight-charts").DeepPartial<import("lightweight-charts").BarStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").CandlestickStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").AreaStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").BaselineStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").LineStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").HistogramStyleOptions & import("lightweight-charts").SeriesOptionsCommon> | import("lightweight-charts").DeepPartial<import("lightweight-charts").CustomStyleOptions & import("lightweight-charts").SeriesOptionsCommon>>;
         vpData: IVolumeProfileData;
     };
     paneViews(): VolumeProfilePaneView[];
     updateAllViews(): void;
+    createVolumeProfileFromOHLCV(ohlcvData: OHLCVDataPoint[], config?: VolumeProfileConfig): IVolumeProfileData;
 }
+type OHLCVDataPoint = {
+    time: Time;
+    open: number;
+    high: number;
+    low: number;
+    close: number;
+    volume: number;
+};
+export type VolumeProfileConfig = {
+    priceBins?: number;
+    usePercentageBins?: boolean;
+    priceStep?: number;
+    fromTime?: Time;
+    toTime?: Time;
+    position?: "left" | "right";
+};
 export {};
+//# sourceMappingURL=volumeProfile.d.ts.map

package/dist/chart/plugins/volumeProfile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volumeProfile.d.ts","sourceRoot":"","sources":["../../../src/chart/plugins/volumeProfile.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,eAAe,EACf,UAAU,EACV,SAAS,EACT,sBAAsB,EACtB,kBAAkB,EAClB,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,IAAI,EACJ,MAAM,oBAAoB,CAAC;AAE5B,KAAK,uBAAuB,GAAG;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACd,CAAC;AACF,MAAM,MAAM,kBAAkB,GAAG;IAChC,QAAQ,EAAE,IAAI,CAAC;IACf,MAAM,CAAC,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,OAAO,EAAE,uBAAuB,EAAE,CAAC;CACnC,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AACF,KAAK,0BAA0B,GAAG;IACjC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,GAAG,EAAE,UAAU,GAAG,IAAI,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,qBAAa,qBAAsB,YAAW,sBAAsB;IACvD,OAAO,CAAC,KAAK;gBAAL,KAAK,EAAE,0BAA0B;IAErD,OAAO,CAAC,YAAY;IAapB,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;CA2C1D;AAED,qBAAa,qBAAsB,YAAW,kBAAkB;IAKnD,OAAO,CAAC,OAAO;IAJ3B,OAAO,CAAC,MAAM,CAA4B;IAC1C,OAAO,CAAC,IAAI,CAA2B;IACvC,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,cAAc,CAAK;gBACP,OAAO,EAAE,mBAAmB;IAChD,QAAQ;IAUR,MAAM;;;;CAkEN;AAED,qBAAa,mBAAoB,YAAW,gBAAgB;IAK1D,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,OAAO;IALhB,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,OAAO,CAAqB;IACpC,QAAQ,EAAE,IAAI,GAAG,MAAM,CAAQ;gBAEtB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,EACvC,WAAW,EAAE,mBAAmB,EAChC,KAAK,EAAE,CAAC,eAAe,GAAG;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE;IAOhD,UAAU;;;;;IAIV,SAAS;IAGT,cAAc;IAMd,4BAA4B,CAC3B,SAAS,EAAE,cAAc,EAAE,EAC3B,MAAM,GAAE,mBAAwB,GAC9B,kBAAkB;CAmHrB;AAKD,KAAK,cAAc,GAAG;IACrB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB,MAAM,CAAC,EAAE,IAAI,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B,CAAC"}

package/dist/chart/plugins/volumeProfile.js

@@ -14,19 +14,26 @@ class VolumeProfileRenderer {
         };
     }
     draw(target) {
-        target.useBitmapCoordinateSpace(scope => {
+        target.useBitmapCoordinateSpace((scope) => {
             if (this._data.top === null)
                 return;
-            this._data.items.forEach(row => {
+            this._data.items.forEach((row) => {
                 if (row.y === null)
                     return;
-                const itemVerticalPos = this.positionsBox(row.y, row.y - this._data.columnHeight, scope.verticalPixelRatio);
-                scope.context.fillStyle = 'rgba(40, 98, 255, 0.55)';
-                const itemHorizontalPosP = this.positionsBox(this._data.position === 'left' ? 0 : scope.mediaSize.width, this._data.position === 'left' ? row.widthPositive : (scope.mediaSize.width - row.widthPositive), scope.horizontalPixelRatio);
-                scope.context.fillRect(itemHorizontalPosP.position, itemVerticalPos.position, itemHorizontalPosP.length, itemVerticalPos.length - 2);
-                scope.context.fillStyle = 'rgba(251, 191, 44, 0.55)';
-                const itemHorizontalPosN = this.positionsBox(this._data.position === 'left' ? row.widthPositive : (scope.mediaSize.width - row.widthPositive), this._data.position === 'left' ? (row.widthNegative + row.widthPositive) : (scope.mediaSize.width - (row.widthNegative + row.widthPositive)), scope.horizontalPixelRatio);
-                scope.context.fillRect(itemHorizontalPosN.position, itemVerticalPos.position, itemHorizontalPosN.length, itemVerticalPos.length - 2);
+                const itemVerticalPos = this.positionsBox(row.y, row.y - row.height, // Use individual bar height
+                scope.verticalPixelRatio);
+                scope.context.fillStyle = "rgba(40, 98, 255, 0.55)";
+                const itemHorizontalPosP = this.positionsBox(this._data.position === "left" ? 0 : scope.mediaSize.width, this._data.position === "left"
+                    ? row.widthPositive
+                    : scope.mediaSize.width - row.widthPositive, scope.horizontalPixelRatio);
+                scope.context.fillRect(itemHorizontalPosP.position, itemVerticalPos.position, itemHorizontalPosP.length, itemVerticalPos.length);
+                scope.context.fillStyle = "rgba(251, 191, 44, 0.55)";
+                const itemHorizontalPosN = this.positionsBox(this._data.position === "left"
+                    ? row.widthPositive
+                    : scope.mediaSize.width - row.widthPositive, this._data.position === "left"
+                    ? row.widthNegative + row.widthPositive
+                    : scope.mediaSize.width - (row.widthNegative + row.widthPositive), scope.horizontalPixelRatio);
+                scope.context.fillRect(itemHorizontalPosN.position, itemVerticalPos.position, itemHorizontalPosN.length, itemVerticalPos.length);
             });
         });
     }
@@ -35,7 +42,6 @@ exports.VolumeProfileRenderer = VolumeProfileRenderer;
 class VolumeProfilePaneView {
     constructor(_source) {
         this._source = _source;
-        this._columnHeight = 0;
         this._items = [];
         this._top = null;
         this._widthNegative = 0;
@@ -43,7 +49,6 @@ class VolumeProfilePaneView {
     }
     renderer() {
         return new VolumeProfileRenderer({
-            columnHeight: this._columnHeight,
             items: this._items,
             position: this._source.getContext().vpData.position,
             top: this._top,
@@ -52,42 +57,175 @@ class VolumeProfilePaneView {
         });
     }
     update() {
-        var _a, _b;
         const ctx = this._source.getContext();
         const data = ctx.vpData;
         const series = ctx.series;
         const timeScale = ctx.chart.timeScale();
         const vr = timeScale.getVisibleRange();
-        if (!vr || data.fromTime > vr.to) { // hide visible range when context initial time is after chart visible time
+        if (!vr || data.fromTime > vr.to) {
+            // hide visible range when context initial time is after chart visible time
             this._items = [];
             return { widthNegative: 0, widthPositive: 0 };
         }
         const _width = timeScale.width() * 0.33;
-        const y1 = (_a = series.priceToCoordinate(data.profile[0].price)) !== null && _a !== void 0 ? _a : 0;
-        const y2 = (_b = series.priceToCoordinate(data.profile[1].price)) !== null && _b !== void 0 ? _b : timeScale.height();
-        this._columnHeight = Math.max(1, y1 - y2);
+        // Get all y-coordinates for the price levels
+        const yCoordinates = data.profile.map((row) => series.priceToCoordinate(row.price));
+        // Calculate the maximum volume for scaling
         const maxVolume = data.profile.reduce((acc, item) => Math.max(acc, item.positiveVolume + item.negativeVolume), 0);
-        this._top = y1;
-        this._items = data.profile.map(row => {
+        // Set the top coordinate (highest price)
+        this._top = yCoordinates[0];
+        // Create items with proper height calculation
+        this._items = data.profile.map((row, index) => {
+            let height = 1; // Minimum height
+            // Calculate height based on the distance to the next price level
+            if (index < data.profile.length - 1) {
+                const currentY = yCoordinates[index];
+                const nextY = yCoordinates[index + 1];
+                if (currentY !== null && nextY !== null) {
+                    // Calculate the gap to the next bar
+                    height = Math.abs(currentY - nextY);
+                    // Adjust for the last bar - make it a bit shorter
+                    if (index === data.profile.length - 2) {
+                        height = Math.max(1, height * 0.8);
+                    }
+                }
+            }
+            else {
+                // For the last bar, use the same height as the previous bar
+                const prevY = yCoordinates[index - 1];
+                const currentY = yCoordinates[index];
+                if (prevY !== null && currentY !== null) {
+                    height = Math.max(1, Math.abs(prevY - currentY) * 0.8);
+                }
+            }
+            // Ensure minimum height
+            height = Math.max(1, height);
             return {
                 widthNegative: (_width * row.positiveVolume) / maxVolume,
                 widthPositive: (_width * row.negativeVolume) / maxVolume,
-                y: series.priceToCoordinate(row.price),
+                y: yCoordinates[index],
+                height: height, // Add calculated height to each item
             };
         });
     }
 }
 exports.VolumeProfilePaneView = VolumeProfilePaneView;
 class VolumeProfileSeries {
-    constructor(_chart, _series, _vpData) {
+    constructor(_chart, _series, _vpSettings, ohlcv) {
         this._chart = _chart;
         this._series = _series;
-        this._vpData = _vpData;
         this._vpIndex = null;
+        this._vpData = this.createVolumeProfileFromOHLCV(ohlcv, _vpSettings);
+        // window.alert(JSON.stringify(this._vpData));
         this._paneViews = [new VolumeProfilePaneView(this)];
     }
-    getContext() { return { chart: this._chart, series: this._series, vpData: this._vpData }; }
-    paneViews() { return this._paneViews; }
-    updateAllViews() { this._paneViews.forEach(pw => { pw.update(); }); }
+    getContext() {
+        // window.alert(JSON.stringify(this._vpData));
+        return { chart: this._chart, series: this._series, vpData: this._vpData };
+    }
+    paneViews() {
+        return this._paneViews;
+    }
+    updateAllViews() {
+        this._paneViews.forEach((pw) => {
+            pw.update();
+        });
+    }
+    createVolumeProfileFromOHLCV(ohlcvData, config = {}) {
+        var _a, _b;
+        const { priceBins = 20, usePercentageBins = true, priceStep, fromTime = (_a = ohlcvData[0]) === null || _a === void 0 ? void 0 : _a.time, toTime = (_b = ohlcvData[ohlcvData.length - 1]) === null || _b === void 0 ? void 0 : _b.time, position = "right", } = config;
+        // Filter data within the time range
+        const filteredData = ohlcvData.filter((point) => {
+            const isAfterFrom = !fromTime || point.time >= fromTime;
+            const isBeforeTo = !toTime || point.time <= toTime;
+            return isAfterFrom && isBeforeTo;
+        });
+        if (filteredData.length === 0) {
+            throw new Error("No data in the specified time range");
+        }
+        // Find min and max prices in the filtered data
+        const minPrice = Math.min(...filteredData.map((d) => d.low));
+        const maxPrice = Math.max(...filteredData.map((d) => d.high));
+        // Calculate price bins
+        let priceLevels;
+        if (usePercentageBins) {
+            // Create price levels based on percentage distribution
+            const priceRange = maxPrice - minPrice;
+            priceLevels = Array.from({ length: priceBins + 1 }, (_, i) => {
+                return minPrice + (priceRange * i) / priceBins;
+            });
+        }
+        else if (priceStep) {
+            // Create price levels with fixed step
+            const numBins = Math.ceil((maxPrice - minPrice) / priceStep);
+            priceLevels = Array.from({ length: numBins + 1 }, (_, i) => {
+                return minPrice + priceStep * i;
+            });
+        }
+        else {
+            // Default to percentage bins if no step specified
+            const priceRange = maxPrice - minPrice;
+            priceLevels = Array.from({ length: priceBins + 1 }, (_, i) => {
+                return minPrice + (priceRange * i) / priceBins;
+            });
+        }
+        // Initialize volume profile with zero volumes
+        const profile = priceLevels.map((price) => ({
+            price,
+            positiveVolume: 0,
+            negativeVolume: 0,
+        }));
+        // Distribute volume to price bins
+        filteredData.forEach((dataPoint) => {
+            const { open, close, volume } = dataPoint;
+            const isUpBar = close >= open;
+            // Find the appropriate price bin for this data point
+            // For simplicity, we can distribute volume to the price level closest to the VWAP
+            // or you can distribute based on the high-low range
+            // Method 1: Simple - distribute to price levels within high-low range
+            const relevantLevels = priceLevels.filter((price) => price >= dataPoint.low && price <= dataPoint.high);
+            if (relevantLevels.length > 0) {
+                const volumePerLevel = volume / relevantLevels.length;
+                relevantLevels.forEach((price) => {
+                    const index = profile.findIndex((p) => p.price === price);
+                    if (index !== -1) {
+                        if (isUpBar) {
+                            profile[index].positiveVolume += volumePerLevel;
+                        }
+                        else {
+                            profile[index].negativeVolume += volumePerLevel;
+                        }
+                    }
+                });
+            }
+            else {
+                // Fallback: find the closest price level
+                const closestPrice = priceLevels.reduce((prev, curr) => {
+                    const prevDiff = Math.abs(prev - dataPoint.close);
+                    const currDiff = Math.abs(curr - dataPoint.close);
+                    return currDiff < prevDiff ? curr : prev;
+                });
+                const index = profile.findIndex((p) => p.price === closestPrice);
+                if (index !== -1) {
+                    if (isUpBar) {
+                        profile[index].positiveVolume += volume;
+                    }
+                    else {
+                        profile[index].negativeVolume += volume;
+                    }
+                }
+            }
+        });
+        // Filter out bins with zero volume (optional)
+        const filteredProfile = profile.filter((item) => item.positiveVolume > 0 || item.negativeVolume > 0);
+        // Sort by price descending (highest price first)
+        filteredProfile.sort((a, b) => b.price - a.price);
+        return {
+            fromTime: fromTime || filteredData[0].time,
+            position,
+            profile: filteredProfile,
+        };
+    }
 }
 exports.VolumeProfileSeries = VolumeProfileSeries;
+//# sourceMappingURL=volumeProfile.js.map

package/dist/chart/plugins/volumeProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volumeProfile.js","sourceRoot":"","sources":["../../../src/chart/plugins/volumeProfile.ts"],"names":[],"mappings":"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"}

package/dist/config/versions.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Centralized CDN version management for tslab-widgets
+ *
+ * All CDN dependency versions are managed here to ensure consistency
+ * between package.json devDependencies and runtime CDN imports.
+ *
+ * When updating versions:
+ * 1. Update the version in CDN_VERSIONS
+ * 2. Update corresponding package.json devDependencies
+ * 3. Run `npm run validate` to verify consistency
+ */
+export declare const CDN_VERSIONS: {
+    readonly react: "18.3.1";
+    readonly reactDom: "18.3.1";
+    readonly lightweightCharts: "5.1.0";
+    readonly reactCsvToTable: "0.0.4";
+    readonly reactJsonTree: "0.15.0";
+    readonly reactGaugeChart: "0.5.1";
+};
+export declare const CDN_PROVIDER = "https://esm.sh";
+/**
+ * Constructs a CDN URL for a given package and version
+ */
+export declare function getCdnUrl(pkg: string, version: string): string;
+/**
+ * Pre-built CDN URLs for all dependencies
+ * Use these constants in widget HTML generation
+ */
+export declare const CDN_URLS: {
+    readonly react: string;
+    readonly reactDom: string;
+    readonly lightweightCharts: string;
+    readonly reactCsvToTable: string;
+    readonly reactJsonTree: string;
+    readonly reactGaugeChart: string;
+};
+//# sourceMappingURL=versions.d.ts.map

package/dist/config/versions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"versions.d.ts","sourceRoot":"","sources":["../../src/config/versions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,eAAO,MAAM,YAAY,mBAAmB,CAAC;AAE7C;;GAEG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;CAaX,CAAC"}

package/dist/config/versions.js

@@ -0,0 +1,43 @@
+"use strict";
+/**
+ * Centralized CDN version management for tslab-widgets
+ *
+ * All CDN dependency versions are managed here to ensure consistency
+ * between package.json devDependencies and runtime CDN imports.
+ *
+ * When updating versions:
+ * 1. Update the version in CDN_VERSIONS
+ * 2. Update corresponding package.json devDependencies
+ * 3. Run `npm run validate` to verify consistency
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CDN_URLS = exports.getCdnUrl = exports.CDN_PROVIDER = exports.CDN_VERSIONS = void 0;
+exports.CDN_VERSIONS = {
+    react: "18.3.1",
+    reactDom: "18.3.1",
+    lightweightCharts: "5.1.0",
+    reactCsvToTable: "0.0.4",
+    reactJsonTree: "0.15.0",
+    reactGaugeChart: "0.5.1",
+};
+exports.CDN_PROVIDER = "https://esm.sh";
+/**
+ * Constructs a CDN URL for a given package and version
+ */
+function getCdnUrl(pkg, version) {
+    return `${exports.CDN_PROVIDER}/${pkg}@${version}`;
+}
+exports.getCdnUrl = getCdnUrl;
+/**
+ * Pre-built CDN URLs for all dependencies
+ * Use these constants in widget HTML generation
+ */
+exports.CDN_URLS = {
+    react: getCdnUrl("react", exports.CDN_VERSIONS.react),
+    reactDom: getCdnUrl("react-dom", exports.CDN_VERSIONS.reactDom),
+    lightweightCharts: getCdnUrl("lightweight-charts", exports.CDN_VERSIONS.lightweightCharts),
+    reactCsvToTable: getCdnUrl("react-csv-to-table", exports.CDN_VERSIONS.reactCsvToTable),
+    reactJsonTree: getCdnUrl("react-json-tree", exports.CDN_VERSIONS.reactJsonTree),
+    reactGaugeChart: getCdnUrl("react-gauge-chart", exports.CDN_VERSIONS.reactGaugeChart),
+};
+//# sourceMappingURL=versions.js.map

package/dist/config/versions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"versions.js","sourceRoot":"","sources":["../../src/config/versions.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;GAUG;;;AAEU,QAAA,YAAY,GAAG;IAC3B,KAAK,EAAE,QAAQ;IACf,QAAQ,EAAE,QAAQ;IAClB,iBAAiB,EAAE,OAAO;IAC1B,eAAe,EAAE,OAAO;IACxB,aAAa,EAAE,QAAQ;IACvB,eAAe,EAAE,OAAO;CACf,CAAC;AAEE,QAAA,YAAY,GAAG,gBAAgB,CAAC;AAE7C;;GAEG;AACH,SAAgB,SAAS,CAAC,GAAW,EAAE,OAAe;IACrD,OAAO,GAAG,oBAAY,IAAI,GAAG,IAAI,OAAO,EAAE,CAAC;AAC5C,CAAC;AAFD,8BAEC;AAED;;;GAGG;AACU,QAAA,QAAQ,GAAG;IACvB,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,oBAAY,CAAC,KAAK,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,WAAW,EAAE,oBAAY,CAAC,QAAQ,CAAC;IACvD,iBAAiB,EAAE,SAAS,CAC3B,oBAAoB,EACpB,oBAAY,CAAC,iBAAiB,CAC9B;IACD,eAAe,EAAE,SAAS,CACzB,oBAAoB,EACpB,oBAAY,CAAC,eAAe,CAC5B;IACD,aAAa,EAAE,SAAS,CAAC,iBAAiB,EAAE,oBAAY,CAAC,aAAa,CAAC;IACvE,eAAe,EAAE,SAAS,CAAC,mBAAmB,EAAE,oBAAY,CAAC,eAAe,CAAC;CACpE,CAAC"}

package/dist/csv/csv.d.ts

@@ -3,3 +3,4 @@ declare function csv(data: string[], options?: {
     maxHeight?: number;
 }): void;
 export { csv };
+//# sourceMappingURL=csv.d.ts.map

package/dist/csv/csv.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"csv.d.ts","sourceRoot":"","sources":["../../src/csv/csv.ts"],"names":[],"mappings":"AAKA,iBAAS,GAAG,CACX,IAAI,EAAE,MAAM,EAAE,EACd,OAAO,CAAC,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,QA4EpD;AAED,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/csv/csv.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.csv = void 0;
 const tslib_1 = require("tslib");
 const tslab = tslib_1.__importStar(require("tslab"));
+const versions_1 = require("../config/versions");
 // https://github.com/marudhupandiyang/react-csv-to-table
 function csv(data, options) {
     const reactComponentId = `_csv_widget${Math.random().toString(36).substring(2, 9)}`;
@@ -23,19 +24,19 @@ function csv(data, options) {
           }
         }
       }
-      ${(options === null || options === void 0 ? void 0 : options.customCss) || ''}
+      ${(options === null || options === void 0 ? void 0 : options.customCss) || ""}
     </style>
     <div id="${reactComponentId}" style="margin:auto;" />
     <script type="module">
-      import React from "https://esm.sh/react@18.3.1";
-      import ReactDOM from "https://esm.sh/react-dom@18.3.1";
-      import { CsvToHtmlTable } from "https://esm.sh/react-csv-to-table@0.0.4";
+      import React from "${versions_1.CDN_URLS.react}";
+      import ReactDOM from "${versions_1.CDN_URLS.reactDom}";
+      import { CsvToHtmlTable } from "${versions_1.CDN_URLS.reactCsvToTable}";
       const h = React.createElement;
 
       const reactJupyterLabComponentId = "${reactComponentId}";
       const jupyterLabReactComponentContainer = document.getElementById("${reactComponentId}");
 
-      const data = [${data.map((d) => JSON.stringify(d)).join(',')}];
+      const data = [${data.map((d) => JSON.stringify(d)).join(",")}];
       const csvWidgets = groupArrayIntoPairs(data);
       const rows = csvWidgets.map((rowDataPair, idx) => {
         const cid1 = reactJupyterLabComponentId + '-0';
@@ -44,7 +45,7 @@ function csv(data, options) {
           display: 'flex',
           flexDirection: 'column',
           alignSelf: 'baseline',
-          ${(options === null || options === void 0 ? void 0 : options.maxHeight) ? `maxHeight:${options.maxHeight},overflowY: "scroll"` : ''}
+          ${(options === null || options === void 0 ? void 0 : options.maxHeight) ? `maxHeight:${options.maxHeight},overflowY: "scroll"` : ""}
         };
         const key = 'row-' + idx;
         return (
@@ -81,3 +82,4 @@ function csv(data, options) {
     tslab.display.html(html);
 }
 exports.csv = csv;
+//# sourceMappingURL=csv.js.map

package/dist/csv/csv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"csv.js","sourceRoot":"","sources":["../../src/csv/csv.ts"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,iDAA8C;AAE9C,yDAAyD;AACzD,SAAS,GAAG,CACX,IAAc,EACd,OAAoD;IAEpD,MAAM,gBAAgB,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IACpF,MAAM,IAAI,GAAG;;;;;;;;;;;;;;;;;QAiBN,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,KAAI,EAAE;;eAEjB,gBAAgB;;2BAEJ,mBAAQ,CAAC,KAAK;8BACX,mBAAQ,CAAC,QAAQ;wCACP,mBAAQ,CAAC,eAAe;;;4CAGpB,gBAAgB;2EACe,gBAAgB;;sBAErE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;;;;;;;;YAStD,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAC,CAAC,CAAC,aAAa,OAAO,CAAC,SAAS,sBAAsB,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCvF,CAAC;IACH,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAEQ,kBAAG"}

package/dist/gauge/gauge.d.ts

@@ -7,3 +7,4 @@ declare function gauge(width: number | undefined, props: {
     title?: string;
 }): void;
 export { gauge };
+//# sourceMappingURL=gauge.d.ts.map

package/dist/gauge/gauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.d.ts","sourceRoot":"","sources":["../../src/gauge/gauge.ts"],"names":[],"mappings":"AAKA,iBAAS,KAAK,CACb,KAAK,oBAAM,EACX,KAAK,EAAE;IACN,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CACf,QAmDD;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}