tslab-widgets 0.1.0

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

@@ -0,0 +1,84 @@
+import type { IChartApi, ISeriesPrimitive, ISeriesPrimitivePaneRenderer, ISeriesPrimitivePaneView, SeriesAttachedParameter, SeriesPrimitivePaneViewZOrder } from 'lightweight-charts';
+export type ITooltipCrosshairLineData = {
+    color: string;
+    topMargin: number;
+    visible: boolean;
+    x: number;
+};
+export type ITooltipOptions = {
+    followMode: 'top' | 'tracking';
+    /** fallback horizontal deadzone width */
+    horizontalDeadzoneWidth: number;
+    title: string;
+    /** topOffset is the vertical spacing when followMode is 'top' */
+    topOffset: number;
+    verticalDeadzoneHeight: number;
+    verticalSpacing: number;
+};
+export type ITooltipContentData = {
+    content: string;
+    title?: string;
+};
+export type ITooltipPosition = {
+    paneX: number;
+    paneY: number;
+    visible: boolean;
+};
+export type ITooltipPrimitiveOptions = {
+    lineColor: string;
+    timeToTooltipContentMap: Record<number, ITooltipContentData>;
+    tooltip?: Partial<ITooltipOptions>;
+};
+export declare class TooltipCrosshairLinePaneRenderer implements ISeriesPrimitivePaneRenderer {
+    private _data;
+    constructor(_data: ITooltipCrosshairLineData);
+    private positionsLine;
+    draw(target: Parameters<ISeriesPrimitivePaneRenderer['draw']>[0]): void;
+}
+export declare class TooltipElement {
+    private _chart;
+    private _contentElement;
+    private _element;
+    private _lastTooltipWidth;
+    private _options;
+    private _titleElement;
+    constructor(chart: IChartApi, options: Partial<ITooltipOptions>);
+    private _calculateXPosition;
+    private _calculateYPosition;
+    private applyStyle;
+    private setElementContent;
+    applyOptions(options: Partial<ITooltipOptions>): void;
+    destroy(): void;
+    options(): ITooltipOptions;
+    updatePosition(positionData: ITooltipPosition): void;
+    updateTooltipContent(tooltipContentData: ITooltipContentData): void;
+}
+export declare class MultiTouchCrosshairPaneView implements ISeriesPrimitivePaneView {
+    private _data;
+    constructor(_data: ITooltipCrosshairLineData);
+    renderer(): ISeriesPrimitivePaneRenderer | null;
+    update(data: ITooltipCrosshairLineData): void;
+    zOrder(): SeriesPrimitivePaneViewZOrder;
+}
+export declare class TooltipPrimitive implements ISeriesPrimitive {
+    _attachedParams: SeriesAttachedParameter | undefined;
+    _data: ITooltipCrosshairLineData;
+    private _moveHandler;
+    private _options;
+    _paneViews: MultiTouchCrosshairPaneView[];
+    private _tooltip;
+    constructor(options: Partial<ITooltipPrimitiveOptions> & Required<Pick<ITooltipPrimitiveOptions, 'timeToTooltipContentMap'>>);
+    private _createTooltipElement;
+    private _hide;
+    private _hideTooltip;
+    private _onMouseMove;
+    applyOptions(options: Partial<ITooltipPrimitiveOptions>): void;
+    attached(param: SeriesAttachedParameter): void;
+    chart(): import("lightweight-charts").IChartApiBase<import("lightweight-charts").Time> | undefined;
+    currentColor(): string;
+    detached(): void;
+    paneViews(): MultiTouchCrosshairPaneView[];
+    series(): import("lightweight-charts").ISeriesApi<keyof import("lightweight-charts").SeriesOptionsMap, import("lightweight-charts").Time, import("lightweight-charts").BarData<import("lightweight-charts").Time> | import("lightweight-charts").WhitespaceData<import("lightweight-charts").Time> | import("lightweight-charts").CandlestickData<import("lightweight-charts").Time> | import("lightweight-charts").AreaData<import("lightweight-charts").Time> | import("lightweight-charts").BaselineData<import("lightweight-charts").Time> | import("lightweight-charts").LineData<import("lightweight-charts").Time> | import("lightweight-charts").HistogramData<import("lightweight-charts").Time> | import("lightweight-charts").CustomData<import("lightweight-charts").Time> | import("lightweight-charts").CustomSeriesWhitespaceData<import("lightweight-charts").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>> | undefined;
+    setData(data: ITooltipCrosshairLineData): void;
+    updateAllViews(): void;
+}

package/dist/chart/plugins/tooltip.js

@@ -0,0 +1,240 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipPrimitive = exports.MultiTouchCrosshairPaneView = exports.TooltipElement = exports.TooltipCrosshairLinePaneRenderer = void 0;
+class TooltipCrosshairLinePaneRenderer {
+    constructor(_data) {
+        this._data = _data;
+    }
+    positionsLine(positionMedia, pixelRatio, desiredWidthMedia = 1, widthIsBitmap) {
+        const scaledPosition = Math.round(pixelRatio * positionMedia);
+        const lineBitmapWidth = widthIsBitmap ? desiredWidthMedia : Math.round(desiredWidthMedia * pixelRatio);
+        const offset = Math.floor(lineBitmapWidth * 0.5);
+        const position = scaledPosition - offset;
+        return { length: lineBitmapWidth, position };
+    }
+    draw(target) {
+        if (!this._data.visible)
+            return;
+        target.useBitmapCoordinateSpace(scope => {
+            const ctx = scope.context;
+            const crosshairPos = this.positionsLine(this._data.x, scope.horizontalPixelRatio, 1);
+            ctx.fillStyle = this._data.color;
+            ctx.fillRect(crosshairPos.position, this._data.topMargin * scope.verticalPixelRatio, crosshairPos.length, scope.bitmapSize.height);
+        });
+    }
+}
+exports.TooltipCrosshairLinePaneRenderer = TooltipCrosshairLinePaneRenderer;
+class TooltipElement {
+    constructor(chart, options) {
+        this._lastTooltipWidth = null;
+        this._options = Object.assign({ followMode: 'tracking', horizontalDeadzoneWidth: 0, title: '', topOffset: 20, verticalDeadzoneHeight: 100, verticalSpacing: 20 }, options);
+        this._chart = chart;
+        const element = document.createElement('div');
+        this.applyStyle(element, {
+            'align-items': 'center',
+            'background-color': 'rgba(80, 80, 80, 0.2)',
+            'border-radius': '4px',
+            'box-shadow': '0px 2px 4px rgba(0, 0, 0, 0.2)',
+            color: '#DDD',
+            display: 'flex',
+            'flex-direction': 'column',
+            'font-size': '11px',
+            'font-weight': '400',
+            left: '0%',
+            'line-height': '13px',
+            opacity: '0',
+            padding: '5px 10px',
+            'pointer-events': 'none',
+            position: 'absolute',
+            top: '0',
+            transform: 'translate(calc(0px - 50%), 0px)',
+            'z-index': '100',
+        });
+        const titleElement = document.createElement('div');
+        this.applyStyle(titleElement, {
+            'font-size': '12px',
+            'font-weight': '590',
+            'line-height': '16px',
+        });
+        this.setElementContent(titleElement, this._options.title);
+        element.appendChild(titleElement);
+        const contentElement = document.createElement('div');
+        this.setElementContent(contentElement, '');
+        element.appendChild(contentElement);
+        this._element = element;
+        this._titleElement = titleElement;
+        this._contentElement = contentElement;
+        const chartElement = this._chart.chartElement();
+        chartElement.appendChild(this._element);
+        const chartElementParent = chartElement.parentElement;
+        if (!chartElementParent) {
+            console.error('Chart Element is not attached to the page.');
+            return;
+        }
+        const position = getComputedStyle(chartElementParent).position;
+        if (position !== 'relative' && position !== 'absolute') {
+            console.error('Chart Element position is expected be `relative` or `absolute`.');
+        }
+    }
+    _calculateXPosition(positionData, chart) {
+        const x = positionData.paneX + chart.priceScale('left').width();
+        const deadzoneWidth = this._lastTooltipWidth
+            ? Math.ceil(this._lastTooltipWidth / 2)
+            : this._options.horizontalDeadzoneWidth;
+        const w = chart.timeScale().width();
+        const xAdjusted = w ? Math.min(Math.max(deadzoneWidth, x), w - deadzoneWidth) : Math.max(deadzoneWidth, x);
+        return `calc(${xAdjusted}px - 50%)`;
+    }
+    _calculateYPosition(positionData) {
+        if (this._options.followMode === 'top') {
+            return `${this._options.topOffset}px`;
+        }
+        const y = positionData.paneY;
+        const flip = y <= this._options.verticalSpacing + this._options.verticalDeadzoneHeight;
+        const yPx = y + (flip ? 1 : -1) * this._options.verticalSpacing;
+        const yPct = flip ? '' : ' - 100%';
+        return `calc(${yPx}px${yPct})`;
+    }
+    applyStyle(element, styles) {
+        for (const [key, value] of Object.entries(styles)) {
+            element.style.setProperty(key, value);
+        }
+    }
+    setElementContent(element, text) {
+        if (!element || text === element.innerHTML) {
+            return;
+        }
+        element.innerHTML = text;
+        element.style.display = text ? 'block' : 'none';
+    }
+    applyOptions(options) {
+        this._options = Object.assign(Object.assign({}, this._options), options);
+    }
+    destroy() {
+        if (this._chart && this._element) {
+            this._chart.chartElement().removeChild(this._element);
+        }
+    }
+    options() { return this._options; }
+    updatePosition(positionData) {
+        if (!this._chart || !this._element) {
+            return;
+        }
+        this._element.style.opacity = positionData.visible ? '1' : '0';
+        if (!positionData.visible) {
+            return;
+        }
+        const x = this._calculateXPosition(positionData, this._chart);
+        const y = this._calculateYPosition(positionData);
+        this._element.style.transform = `translate(${x}, ${y})`;
+    }
+    updateTooltipContent(tooltipContentData) {
+        if (!this._element) {
+            return;
+        }
+        const tooltipMeasurement = this._element.getBoundingClientRect();
+        this._lastTooltipWidth = tooltipMeasurement.width;
+        if (tooltipContentData.title !== undefined && this._titleElement) {
+            this.setElementContent(this._titleElement, tooltipContentData.title);
+        }
+        this.setElementContent(this._contentElement, tooltipContentData.content);
+    }
+}
+exports.TooltipElement = TooltipElement;
+class MultiTouchCrosshairPaneView {
+    constructor(_data) {
+        this._data = _data;
+    }
+    renderer() { return new TooltipCrosshairLinePaneRenderer(this._data); }
+    update(data) { this._data = data; }
+    zOrder() { return 'bottom'; }
+}
+exports.MultiTouchCrosshairPaneView = MultiTouchCrosshairPaneView;
+class TooltipPrimitive {
+    constructor(options) {
+        this._data = { color: 'rgba(0, 0, 0, 0.2)', topMargin: 0, visible: false, x: 0 };
+        this._moveHandler = (param) => this._onMouseMove(param);
+        this._tooltip = undefined;
+        this._options = Object.assign({
+            lineColor: 'rgba(0, 2550, 250, 0.5)',
+        }, options);
+        this._paneViews = [new MultiTouchCrosshairPaneView(this._data)];
+    }
+    _createTooltipElement() {
+        const chart = this.chart();
+        if (!chart) {
+            throw new Error('Unable to create Tooltip element. Chart not attached');
+        }
+        this._tooltip = new TooltipElement(chart, Object.assign({}, this._options.tooltip));
+    }
+    _hide() {
+        this._hideTooltip();
+        this.setData({ color: this.currentColor(), topMargin: 0, visible: false, x: 0 });
+    }
+    _hideTooltip() {
+        if (!this._tooltip) {
+            return;
+        }
+        this._tooltip.updateTooltipContent({ content: '', title: '' });
+        this._tooltip.updatePosition({ paneX: 0, paneY: 0, visible: false });
+    }
+    _onMouseMove(param) {
+        var _a, _b, _c, _d;
+        const chart = this.chart();
+        const series = this.series();
+        const logical = param.logical;
+        if (logical === undefined || logical === null || !chart || !series) {
+            this._hide();
+            return;
+        }
+        const data = param.seriesData.get(series);
+        if (!data) {
+            this._hide();
+            return;
+        }
+        const content = this._options.timeToTooltipContentMap[Number(data.time)];
+        const coordinate = chart.timeScale().logicalToCoordinate(logical);
+        if (this._tooltip) {
+            const tooltipOptions = this._tooltip.options();
+            const topMargin = tooltipOptions.followMode === 'top' ? tooltipOptions.topOffset + 10 : 0;
+            this.setData({ color: this.currentColor(), topMargin, visible: coordinate !== null, x: coordinate !== null && coordinate !== void 0 ? coordinate : 0 });
+            this._tooltip.updateTooltipContent(content);
+            this._tooltip.updatePosition({
+                paneX: (_b = (_a = param.point) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0,
+                paneY: (_d = (_c = param.point) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0,
+                visible: true,
+            });
+        }
+    }
+    applyOptions(options) {
+        this._options = Object.assign(Object.assign({}, this._options), options);
+        if (this._tooltip) {
+            this._tooltip.applyOptions(Object.assign({}, this._options.tooltip));
+        }
+    }
+    attached(param) {
+        this._attachedParams = param;
+        param.chart.subscribeCrosshairMove(this._moveHandler);
+        this._createTooltipElement();
+    }
+    chart() { var _a; return (_a = this._attachedParams) === null || _a === void 0 ? void 0 : _a.chart; }
+    currentColor() { return this._options.lineColor; }
+    detached() {
+        const chart = this.chart();
+        if (chart) {
+            chart.unsubscribeCrosshairMove(this._moveHandler);
+        }
+    }
+    paneViews() { return this._paneViews; }
+    series() { var _a; return (_a = this._attachedParams) === null || _a === void 0 ? void 0 : _a.series; }
+    setData(data) {
+        var _a;
+        this._data = data;
+        this.updateAllViews();
+        (_a = this._attachedParams) === null || _a === void 0 ? void 0 : _a.requestUpdate();
+    }
+    updateAllViews() {
+        this._paneViews.forEach(pw => { pw.update(this._data); });
+    }
+}
+exports.TooltipPrimitive = TooltipPrimitive;

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

@@ -0,0 +1,43 @@
+import { AutoscaleInfo, Coordinate, IChartApi, ISeriesApi, ISeriesPrimitive, ISeriesPrimitivePaneRenderer, ISeriesPrimitivePaneView, Logical, SeriesType, Time } from 'lightweight-charts';
+export type IPoint = {
+    price: number;
+    time: Time;
+};
+export type IViewPoint = {
+    x: Coordinate | null;
+    y: Coordinate | null;
+};
+export type ITrendLineOptions = {
+    lineColor: string;
+    width: number;
+};
+export declare class TrendLinePaneRenderer implements ISeriesPrimitivePaneRenderer {
+    private p1;
+    private p2;
+    private options;
+    constructor(p1: IViewPoint, p2: IViewPoint, options: ITrendLineOptions);
+    draw(target: Parameters<ISeriesPrimitivePaneRenderer['draw']>[0]): void;
+}
+export declare class TrendLinePaneView implements ISeriesPrimitivePaneView {
+    private source;
+    private p1;
+    private p2;
+    constructor(source: TrendLine);
+    renderer(): TrendLinePaneRenderer;
+    update(): void;
+}
+export declare class TrendLine implements ISeriesPrimitive {
+    chart: IChartApi;
+    series: ISeriesApi<SeriesType>;
+    p1: IPoint;
+    p2: IPoint;
+    private _paneViews;
+    maxPrice: number;
+    minPrice: number;
+    options: ITrendLineOptions;
+    constructor(chart: IChartApi, series: ISeriesApi<SeriesType>, p1: IPoint, p2: IPoint, options?: Partial<ITrendLineOptions>);
+    private pointIndex;
+    autoscaleInfo(startTimePoint: Logical, endTimePoint: Logical): AutoscaleInfo | null;
+    paneViews(): TrendLinePaneView[];
+    updateAllViews(): void;
+}

package/dist/chart/plugins/trendLine.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TrendLine = exports.TrendLinePaneView = exports.TrendLinePaneRenderer = void 0;
+class TrendLinePaneRenderer {
+    constructor(p1, p2, options) {
+        this.p1 = p1;
+        this.p2 = p2;
+        this.options = options;
+    }
+    draw(target) {
+        target.useBitmapCoordinateSpace(scope => {
+            if (this.p1.x === null || this.p1.y === null || this.p2.x === null || this.p2.y === null) {
+                return;
+            }
+            const ctx = scope.context;
+            const x1Scaled = Math.round(this.p1.x * scope.horizontalPixelRatio);
+            const y1Scaled = Math.round(this.p1.y * scope.verticalPixelRatio);
+            const x2Scaled = Math.round(this.p2.x * scope.horizontalPixelRatio);
+            const y2Scaled = Math.round(this.p2.y * scope.verticalPixelRatio);
+            ctx.lineWidth = this.options.width;
+            ctx.strokeStyle = this.options.lineColor;
+            ctx.beginPath();
+            ctx.moveTo(x1Scaled, y1Scaled);
+            ctx.lineTo(x2Scaled, y2Scaled);
+            ctx.stroke();
+        });
+    }
+}
+exports.TrendLinePaneRenderer = TrendLinePaneRenderer;
+class TrendLinePaneView {
+    constructor(source) {
+        this.source = source;
+        this.p1 = { x: null, y: null };
+        this.p2 = { x: null, y: null };
+    }
+    renderer() {
+        return new TrendLinePaneRenderer(this.p1, this.p2, this.source.options);
+    }
+    update() {
+        const series = this.source.series;
+        const y1 = series.priceToCoordinate(this.source.p1.price);
+        const y2 = series.priceToCoordinate(this.source.p2.price);
+        const timeScale = this.source.chart.timeScale();
+        const x1 = timeScale.timeToCoordinate(this.source.p1.time);
+        const x2 = timeScale.timeToCoordinate(this.source.p2.time);
+        this.p1 = { x: x1, y: y1 };
+        this.p2 = { x: x2, y: y2 };
+    }
+}
+exports.TrendLinePaneView = TrendLinePaneView;
+class TrendLine {
+    constructor(chart, series, p1, p2, options) {
+        this.chart = chart;
+        this.series = series;
+        this.p1 = p1;
+        this.p2 = p2;
+        this.minPrice = Math.min(this.p1.price, this.p2.price);
+        this.maxPrice = Math.max(this.p1.price, this.p2.price);
+        this.options = Object.assign({ lineColor: '#ff5aff', width: 3 }, options);
+        this._paneViews = [new TrendLinePaneView(this)];
+    }
+    pointIndex(p) {
+        const coordinate = this.chart.timeScale().timeToCoordinate(p.time);
+        if (coordinate === null) {
+            return null;
+        }
+        return this.chart.timeScale().coordinateToLogical(coordinate);
+    }
+    autoscaleInfo(startTimePoint, endTimePoint) {
+        const p1Index = this.pointIndex(this.p1);
+        const p2Index = this.pointIndex(this.p2);
+        if (p1Index === null || p2Index === null) {
+            return null;
+        }
+        if (endTimePoint < p1Index || startTimePoint > p2Index) {
+            return null;
+        }
+        return { priceRange: { maxValue: this.maxPrice, minValue: this.minPrice } };
+    }
+    paneViews() {
+        return this._paneViews;
+    }
+    updateAllViews() {
+        this._paneViews.forEach(pw => { pw.update(); });
+    }
+}
+exports.TrendLine = TrendLine;

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

@@ -0,0 +1,47 @@
+import type { Coordinate, IChartApi, ISeriesApi, ISeriesPrimitive, ISeriesPrimitiveAxisView, ISeriesPrimitivePaneRenderer, ISeriesPrimitivePaneView, SeriesOptionsMap, SeriesType, Time } from 'lightweight-charts';
+export type IVertLineOptions = {
+    color: string;
+    labelBackgroundColor: string;
+    labelText: string;
+    labelTextColor: string;
+    showLabel: boolean;
+    width: number;
+};
+export declare class VertLinePaneRenderer implements ISeriesPrimitivePaneRenderer {
+    private _x;
+    private _options;
+    constructor(_x: Coordinate | null, _options: IVertLineOptions);
+    draw(target: Parameters<ISeriesPrimitivePaneRenderer['draw']>[0]): void;
+}
+export declare class VertLinePaneView implements ISeriesPrimitivePaneView {
+    private _source;
+    private _options;
+    private _x;
+    constructor(_source: VertLine, _options: IVertLineOptions);
+    renderer(): VertLinePaneRenderer;
+    update(): void;
+}
+export declare class VertLineTimeAxisView implements ISeriesPrimitiveAxisView {
+    private _source;
+    private _options;
+    private _x;
+    constructor(_source: VertLine, _options: IVertLineOptions);
+    backColor(): string;
+    coordinate(): 0 | Coordinate;
+    text(): string;
+    textColor(): string;
+    tickVisible(): boolean;
+    update(): void;
+    visible(): boolean;
+}
+export declare class VertLine implements ISeriesPrimitive {
+    _chart: IChartApi;
+    _paneViews: VertLinePaneView[];
+    _series: ISeriesApi<keyof SeriesOptionsMap>;
+    _time: Time;
+    _timeAxisViews: VertLineTimeAxisView[];
+    constructor(chart: IChartApi, series: ISeriesApi<SeriesType>, time: Time, options?: Partial<IVertLineOptions>);
+    paneViews(): VertLinePaneView[];
+    timeAxisViews(): VertLineTimeAxisView[];
+    updateAllViews(): void;
+}

package/dist/chart/plugins/verticalLine.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VertLine = exports.VertLineTimeAxisView = exports.VertLinePaneView = exports.VertLinePaneRenderer = void 0;
+class VertLinePaneRenderer {
+    constructor(_x, _options) {
+        this._x = _x;
+        this._options = _options;
+    }
+    draw(target) {
+        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 };
+            ctx.fillStyle = this._options.color;
+            ctx.fillRect(position.position, 0, position.length, scope.bitmapSize.height);
+        });
+    }
+}
+exports.VertLinePaneRenderer = VertLinePaneRenderer;
+class VertLinePaneView {
+    constructor(_source, _options) {
+        this._source = _source;
+        this._options = _options;
+        this._x = null;
+    }
+    renderer() {
+        return new VertLinePaneRenderer(this._x, this._options);
+    }
+    update() {
+        const timeScale = this._source._chart.timeScale();
+        this._x = timeScale.timeToCoordinate(this._source._time);
+    }
+}
+exports.VertLinePaneView = VertLinePaneView;
+class VertLineTimeAxisView {
+    constructor(_source, _options) {
+        this._source = _source;
+        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; }
+    update() {
+        const timeScale = this._source._chart.timeScale();
+        this._x = timeScale.timeToCoordinate(this._source._time);
+    }
+    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,
+        };
+        const vertLineOptions = Object.assign(Object.assign({}, defaultOptions), options);
+        this._chart = chart;
+        this._series = series;
+        this._time = time;
+        this._paneViews = [new VertLinePaneView(this, vertLineOptions)];
+        this._timeAxisViews = [new VertLineTimeAxisView(this, vertLineOptions)];
+    }
+    paneViews() { return this._paneViews; }
+    timeAxisViews() { return this._timeAxisViews; }
+    updateAllViews() {
+        this._paneViews.forEach(pw => { pw.update(); });
+        this._timeAxisViews.forEach(tw => { tw.update(); });
+    }
+}
+exports.VertLine = VertLine;

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

@@ -0,0 +1,60 @@
+import type { Coordinate, IChartApi, ISeriesApi, ISeriesPrimitive, ISeriesPrimitivePaneRenderer, ISeriesPrimitivePaneView, SeriesType, Time } from 'lightweight-charts';
+type IVolumeProfileDataPoint = {
+    negativeVolume: number;
+    positiveVolume: number;
+    price: number;
+};
+export type IVolumeProfileData = {
+    fromTime: Time;
+    position: 'left' | 'right';
+    profile: IVolumeProfileDataPoint[];
+};
+type IVolumeProfileItem = {
+    widthNegative: number;
+    widthPositive: number;
+    y: Coordinate | null;
+};
+type IVolumeProfileRendererData = {
+    columnHeight: number;
+    items: IVolumeProfileItem[];
+    position: 'left' | 'right';
+    top: Coordinate | null;
+    widthNegative: number;
+    widthPositive: number;
+};
+export declare class VolumeProfileRenderer implements ISeriesPrimitivePaneRenderer {
+    private _data;
+    constructor(_data: IVolumeProfileRendererData);
+    private positionsBox;
+    draw(target: Parameters<ISeriesPrimitivePaneRenderer['draw']>[0]): void;
+}
+export declare class VolumeProfilePaneView implements ISeriesPrimitivePaneView {
+    private _source;
+    private _columnHeight;
+    private _items;
+    private _top;
+    private _widthNegative;
+    private _widthPositive;
+    constructor(_source: VolumeProfileSeries);
+    renderer(): VolumeProfileRenderer;
+    update(): {
+        widthNegative: number;
+        widthPositive: number;
+    } | undefined;
+}
+export declare class VolumeProfileSeries implements ISeriesPrimitive {
+    private _chart;
+    private _series;
+    private _vpData;
+    private _paneViews;
+    _vpIndex: null | number;
+    constructor(_chart: IChartApi, _series: ISeriesApi<SeriesType>, _vpData: IVolumeProfileData);
+    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>>;
+        vpData: IVolumeProfileData;
+    };
+    paneViews(): VolumeProfilePaneView[];
+    updateAllViews(): void;
+}
+export {};