ngx-lightweight-charts
Version:
Angular wrapper for Trading View lightweight-charts
1,102 lines • 66.9 kB
JavaScript
import { createChart, createChartEx, LineStyle, ColorType } from 'lightweight-charts';
import { BehaviorSubject, Subject, switchMap, fromEventPattern, map, takeUntil, share, merge, filter, tap, mergeMap, EMPTY, from, bufferCount } from 'rxjs';
import { __esDecorate, __runInitializers } from 'tslib';
import * as i0 from '@angular/core';
import { makeEnvironmentProviders, inject, input, contentChildren, computed, Directive, effect, ElementRef, ChangeDetectionStrategy, Component, viewChild } from '@angular/core';
import { toSignal, toObservable, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
import deepmerge from 'deepmerge';
class SubscriptionStreamHandler {
#subject = new BehaviorSubject(undefined);
#destroy = new Subject();
#destroy$ = this.#destroy.asObservable();
constructor(subscribeFn, unsubscribeFn) {
this.stream$ = this.#subject.asObservable().pipe(switchMap(() => fromEventPattern(subscribeFn, unsubscribeFn)), map((args) => args[0]), takeUntil(this.#destroy$), share());
}
destroy() {
this.#destroy.next(true);
this.#destroy.complete();
this.#subject.complete();
}
}
class ChartStreams {
#crossHairMove;
#click;
#dblClick;
constructor(chart) {
this.#crossHairMove = new SubscriptionStreamHandler(chart.subscribeCrosshairMove.bind(chart), chart.unsubscribeCrosshairMove.bind(chart));
this.#click = new SubscriptionStreamHandler(chart.subscribeClick.bind(chart), chart.unsubscribeClick.bind(chart));
this.#dblClick = new SubscriptionStreamHandler(chart.subscribeDblClick.bind(chart), chart.unsubscribeClick.bind(chart));
this.crossHairMove$ = this.#crossHairMove.stream$;
this.click$ = this.#click.stream$;
this.dblClick$ = this.#dblClick.stream$;
}
destroy() {
this.#crossHairMove.destroy();
this.#click.destroy();
this.#dblClick.destroy();
}
}
class TimescaleStreams {
#visibleTimeRangeChange;
#visibleLogicalRangeChange;
#sizeChange;
constructor(timescale) {
this.#visibleTimeRangeChange = new SubscriptionStreamHandler(timescale.subscribeVisibleTimeRangeChange.bind(timescale), timescale.unsubscribeVisibleTimeRangeChange.bind(timescale));
this.#visibleLogicalRangeChange = new SubscriptionStreamHandler(timescale.subscribeVisibleLogicalRangeChange.bind(timescale), timescale.unsubscribeVisibleLogicalRangeChange.bind(timescale));
this.#sizeChange = new SubscriptionStreamHandler(timescale.subscribeSizeChange.bind(timescale), timescale.unsubscribeSizeChange.bind(timescale));
this.visibleTimeRangeChange$ = this.#visibleTimeRangeChange.stream$;
this.visibleLogicalRangeChange$ = this.#visibleLogicalRangeChange.stream$;
this.sizeChange$ = this.#sizeChange.stream$;
}
destroy() {
this.#visibleTimeRangeChange.destroy();
this.#visibleLogicalRangeChange.destroy();
this.#sizeChange.destroy();
}
}
class ChartFactory {
create(container, options, horzScaleBehavior) {
let chart;
if (!horzScaleBehavior) {
chart = createChart(container, options);
}
else {
chart = createChartEx(container, horzScaleBehavior, options);
}
const chartSubscriptions = new ChartStreams(chart), timescaleSubscriptions = new TimescaleStreams(chart.timeScale());
return {
chart,
chartSubscriptions,
timescaleSubscriptions
};
}
}
class MultiStream {
constructor() {
this.#subject = new BehaviorSubject(undefined);
this.stream$ = this.#subject.asObservable();
}
#subject;
#subscription;
get currentValue() {
return this.#subject.value?.data;
}
updateObservables(streams) {
this.#cleanUp();
if (!streams.length) {
return;
}
this.#subscription = merge(...streams.map(arg => arg.pipe(map(data => ({ source: arg, data }))))).subscribe(this.#subject);
}
destroy() {
this.#cleanUp();
}
#cleanUp() {
this.#subscription?.unsubscribe();
this.#subscription = undefined;
}
}
function isMultiStreamOutput(arg) {
return !!arg && !!arg.data;
}
function isOutputWithData(update) {
return !!update && !!update.data;
}
class CrosshairService {
#charts;
#destroy;
#destroyed$;
#crosshairPosition;
constructor() {
this.#destroy = new Subject();
this.#destroyed$ = this.#destroy.asObservable();
this.#crosshairPosition = new MultiStream();
this.crosshairPosition$ = this.#crosshairPosition.stream$.pipe(filter(isMultiStreamOutput), map(arg => {
const data = arg.data, result = {};
if (!data.time || !data.logical) {
return null;
}
this.#charts?.forEach((chart, index) => {
result[chart.id || index] = chart.series?.dataByIndex(data.logical);
});
return result;
}), share());
this.crosshairPosition$.pipe(takeUntil(this.#destroyed$)).subscribe();
}
register(charts, clearExisting = true) {
if (clearExisting || !this.#charts) {
this.#charts = [];
}
charts = charts.filter(arg => !this.#charts.includes(arg));
this.#charts = this.#charts.concat(charts);
this.#updateStream();
}
deregister(chart) {
if (!this.#charts) {
return;
}
const index = this.#charts.indexOf(chart);
if (index === -1) {
return;
}
this.#charts.splice(index, 1);
this.#updateStream();
}
destroy() {
this.#crosshairPosition.destroy();
this.#destroy.next();
this.#destroy.complete();
}
#updateStream() {
if (!this.#charts) {
return;
}
this.#crosshairPosition.updateObservables(this.#charts.map(chart => chart.crossHairMove$));
}
}
class SeriesStreams {
#dataChange;
constructor(series) {
this.#dataChange = new SubscriptionStreamHandler(series.subscribeDataChanged.bind(series), series.unsubscribeDataChanged.bind(series));
this.dataChange$ = this.#dataChange.stream$;
}
destroy() {
this.#dataChange.destroy();
}
}
function isCustomSeriesOptions(type, options) {
return type === 'Custom';
}
function isCustomSeriesView(view) {
return view.length > 0;
}
class SeriesFactory {
create(type, chart, seriesOptions, ...customSeriesView) {
const series = this.#createSeries(type, chart, seriesOptions, ...customSeriesView), seriesSubscriptions = series ? new SeriesStreams(series) : undefined;
if (!series) {
console.log(`Series of type ${type} could not be created`);
}
return {
series,
seriesSubscriptions
};
}
#createSeries(type, chart, seriesOptions, ...customSeriesView) {
if (isCustomSeriesOptions(type, seriesOptions)) {
if (!isCustomSeriesView(customSeriesView)) {
throw new Error('Custom series requires a custom view');
}
// TODO - fix narrowing issue to remove as
return chart.addCustomSeries(customSeriesView[0], seriesOptions);
}
else {
const fn = this.#getSeriesCreationFn(type, chart);
if (!fn) {
return;
}
return fn.call(chart, seriesOptions);
}
}
#getSeriesCreationFn(type, chart) {
let fn;
switch (type) {
case 'Candlestick':
fn = chart.addCandlestickSeries;
break;
case 'Histogram':
fn = chart.addHistogramSeries;
break;
case 'Line':
fn = chart.addLineSeries;
break;
case 'Area':
fn = chart.addAreaSeries;
break;
case 'Bar':
fn = chart.addBarSeries;
break;
case 'Baseline':
fn = chart.addBaselineSeries;
break;
}
return fn;
}
}
function isSyncableWithCrosshair(arg) {
return 'setCrosshairPosition' in arg &&
'clearCrosshairPosition' in arg &&
'crossHairMove$' in arg;
}
class SyncService {
#syncables;
#destroy;
#destroyed$;
#visibleLogicalRange;
#crosshairPosition;
constructor() {
this.#destroy = new Subject();
this.#destroyed$ = this.#destroy.asObservable();
this.#visibleLogicalRange = new MultiStream();
this.visibleLogicalRange$ = this.#visibleLogicalRange.stream$.pipe(filter((isOutputWithData)), tap(arg => {
this.#syncables
?.filter(syncable => syncable.visibleLogicalRangeChange$ !== arg?.source)
.forEach(syncable => {
syncable.setVisibleLogicalRange(arg.data);
});
}), map(arg => arg.data), share());
this.#crosshairPosition = new MultiStream();
this.crosshairPosition$ = this.#crosshairPosition.stream$.pipe(filter(isMultiStreamOutput), tap(arg => {
this.#syncables
?.filter((isSyncableWithCrosshair))
.filter(syncable => syncable.crossHairMove$ !== arg?.source)
.forEach(syncable => {
const data = arg.data;
if (!data.point || !data.time) {
syncable.clearCrosshairPosition();
return;
}
if (!data.sourceEvent) {
return;
}
syncable.setCrossHairPositionByPoint(data.point, data.time);
});
}), map(arg => arg?.data), share());
this.visibleLogicalRange$.pipe(takeUntil(this.#destroyed$)).subscribe();
this.crosshairPosition$.pipe(takeUntil(this.#destroyed$)).subscribe();
}
register(arg, clearExisting = true) {
if (clearExisting || !this.#syncables) {
this.#syncables = [];
}
arg = arg.filter(arg => !this.#syncables.includes(arg));
this.#syncables = this.#syncables.concat(arg);
this.#updateStreams();
}
deregister(arg) {
if (!this.#syncables) {
return;
}
const index = this.#syncables.indexOf(arg);
if (index === -1) {
return;
}
this.#syncables.splice(index, 1);
this.#updateStreams();
}
#updateStreams() {
if (!this.#syncables) {
return;
}
this.#visibleLogicalRange.updateObservables(this.#syncables.map(syncable => syncable.visibleLogicalRangeChange$));
const currentLogicalRange = this.#getCurrentVisibleLogicalRange();
if (currentLogicalRange) {
this.#syncables.forEach(syncable => {
syncable.setVisibleLogicalRange(currentLogicalRange);
});
}
this.#crosshairPosition.updateObservables(this.#syncables.filter((isSyncableWithCrosshair))
.map(syncable => syncable.crossHairMove$));
}
destroy() {
this.#visibleLogicalRange.destroy();
this.#crosshairPosition.destroy();
this.#destroy.next();
this.#destroy.complete();
}
#getCurrentVisibleLogicalRange() {
let value = this.#visibleLogicalRange.currentValue;
if (value) {
return value;
}
return this.#syncables?.[0]?.getVisibleLogicalRange();
}
}
function unInitialisedWarning(originalMethod, context) {
if (context.kind === "method") {
return function (...args) {
if (!this.isInitialised) {
console.group('Chart not initialised');
console.warn(`Call to ${String(context.name)} ignored`);
console.warn('Arguments', args);
console.warn('Chart', this);
console.groupEnd();
return;
}
return originalMethod.apply(this, args);
};
}
return originalMethod;
}
let TVChart = (() => {
let _instanceExtraInitializers = [];
let _applyOptions_decorators;
let _applySeriesOptions_decorators;
let _setData_decorators;
let _setMarkers_decorators;
let _setVisibleLogicalRange_decorators;
let _getVisibleLogicalRange_decorators;
let _setVisibleRange_decorators;
let _setCrosshairPosition_decorators;
let _setCrossHairPositionByPoint_decorators;
let _clearCrosshairPosition_decorators;
let _addAdditionalSeries_decorators;
let _removeSeries_decorators;
let _resize_decorators;
let _remove_decorators;
return class TVChart {
static {
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
_applyOptions_decorators = [unInitialisedWarning];
_applySeriesOptions_decorators = [unInitialisedWarning];
_setData_decorators = [unInitialisedWarning];
_setMarkers_decorators = [unInitialisedWarning];
_setVisibleLogicalRange_decorators = [unInitialisedWarning];
_getVisibleLogicalRange_decorators = [unInitialisedWarning];
_setVisibleRange_decorators = [unInitialisedWarning];
_setCrosshairPosition_decorators = [unInitialisedWarning];
_setCrossHairPositionByPoint_decorators = [unInitialisedWarning];
_clearCrosshairPosition_decorators = [unInitialisedWarning];
_addAdditionalSeries_decorators = [unInitialisedWarning];
_removeSeries_decorators = [unInitialisedWarning];
_resize_decorators = [unInitialisedWarning];
_remove_decorators = [unInitialisedWarning];
__esDecorate(this, null, _applyOptions_decorators, { kind: "method", name: "applyOptions", static: false, private: false, access: { has: obj => "applyOptions" in obj, get: obj => obj.applyOptions }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _applySeriesOptions_decorators, { kind: "method", name: "applySeriesOptions", static: false, private: false, access: { has: obj => "applySeriesOptions" in obj, get: obj => obj.applySeriesOptions }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _setData_decorators, { kind: "method", name: "setData", static: false, private: false, access: { has: obj => "setData" in obj, get: obj => obj.setData }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _setMarkers_decorators, { kind: "method", name: "setMarkers", static: false, private: false, access: { has: obj => "setMarkers" in obj, get: obj => obj.setMarkers }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _setVisibleLogicalRange_decorators, { kind: "method", name: "setVisibleLogicalRange", static: false, private: false, access: { has: obj => "setVisibleLogicalRange" in obj, get: obj => obj.setVisibleLogicalRange }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _getVisibleLogicalRange_decorators, { kind: "method", name: "getVisibleLogicalRange", static: false, private: false, access: { has: obj => "getVisibleLogicalRange" in obj, get: obj => obj.getVisibleLogicalRange }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _setVisibleRange_decorators, { kind: "method", name: "setVisibleRange", static: false, private: false, access: { has: obj => "setVisibleRange" in obj, get: obj => obj.setVisibleRange }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _setCrosshairPosition_decorators, { kind: "method", name: "setCrosshairPosition", static: false, private: false, access: { has: obj => "setCrosshairPosition" in obj, get: obj => obj.setCrosshairPosition }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _setCrossHairPositionByPoint_decorators, { kind: "method", name: "setCrossHairPositionByPoint", static: false, private: false, access: { has: obj => "setCrossHairPositionByPoint" in obj, get: obj => obj.setCrossHairPositionByPoint }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _clearCrosshairPosition_decorators, { kind: "method", name: "clearCrosshairPosition", static: false, private: false, access: { has: obj => "clearCrosshairPosition" in obj, get: obj => obj.clearCrosshairPosition }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _addAdditionalSeries_decorators, { kind: "method", name: "addAdditionalSeries", static: false, private: false, access: { has: obj => "addAdditionalSeries" in obj, get: obj => obj.addAdditionalSeries }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _removeSeries_decorators, { kind: "method", name: "removeSeries", static: false, private: false, access: { has: obj => "removeSeries" in obj, get: obj => obj.removeSeries }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _resize_decorators, { kind: "method", name: "resize", static: false, private: false, access: { has: obj => "resize" in obj, get: obj => obj.resize }, metadata: _metadata }, null, _instanceExtraInitializers);
__esDecorate(this, null, _remove_decorators, { kind: "method", name: "remove", static: false, private: false, access: { has: obj => "remove" in obj, get: obj => obj.remove }, metadata: _metadata }, null, _instanceExtraInitializers);
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
}
#chartFactory;
#seriesFactory;
#id;
#type;
#chart;
#series;
#chartSubscriptions;
#timescaleSubscriptions;
#seriesSubscriptions;
#initialised;
get id() {
return this.#id;
}
get type() {
return this.#type;
}
get chart() {
return this.#chart;
}
get series() {
return this.#series;
}
get options() {
return this.#chart?.options();
}
get timeScale() {
return this.#chart?.timeScale();
}
get leftPriceScale() {
return this.#chart?.priceScale('left');
}
get rightPriceScale() {
return this.#chart?.priceScale('right');
}
getPriceScale(priceScaleId) {
return this.#chart?.priceScale(priceScaleId);
}
get isInitialised() {
return !!this.#initialised.value;
}
constructor(chartFactory, seriesFactory) {
this.#chartFactory = __runInitializers(this, _instanceExtraInitializers);
this.#initialised = new BehaviorSubject(undefined);
this.initialised$ = this.#initialised.asObservable().pipe(filter(initialised => !!initialised));
this.click$ = this.initialised$.pipe(mergeMap(() => this.#chartSubscriptions?.click$ || EMPTY));
this.dblClick$ = this.initialised$.pipe(mergeMap(() => this.#chartSubscriptions?.dblClick$ || EMPTY));
this.crossHairMove$ = this.initialised$.pipe(mergeMap(() => this.#chartSubscriptions?.crossHairMove$ || EMPTY));
this.visibleTimeRangeChange$ = this.initialised$.pipe(mergeMap(() => this.#timescaleSubscriptions?.visibleTimeRangeChange$ || EMPTY));
this.visibleLogicalRangeChange$ = this.initialised$.pipe(mergeMap(() => this.#timescaleSubscriptions?.visibleLogicalRangeChange$ || EMPTY));
this.sizeChange$ = this.initialised$.pipe(mergeMap(() => this.#timescaleSubscriptions?.sizeChange$ || EMPTY));
this.dataChange$ = this.initialised$.pipe(mergeMap(() => this.#seriesSubscriptions?.dataChange$ || EMPTY));
this.#chartFactory = chartFactory;
this.#seriesFactory = seriesFactory;
}
initialise(element, type, id, options = {}, seriesOptions = {}, ...customSeriesView) {
if (this.isInitialised) {
return;
}
this.#id = id;
this.#type = type;
this.#init(element, type, options, seriesOptions, ...customSeriesView);
if (!this.#chart) {
return;
}
this.#initialised.next(this);
}
applyOptions(options) {
this.#chart?.applyOptions(options || {});
}
applySeriesOptions(seriesOptions) {
this.#series?.applyOptions(seriesOptions || {});
}
setData(data) {
this.#series?.setData(data);
}
setMarkers(markers) {
this.#series?.setMarkers(markers);
}
setVisibleLogicalRange(range) {
this.#chart?.timeScale().setVisibleLogicalRange(range);
}
getVisibleLogicalRange() {
return this.#chart?.timeScale().getVisibleLogicalRange();
}
setVisibleRange(range) {
this.#chart?.timeScale().setVisibleRange(range);
}
setCrosshairPosition(price, horizontalPosition, seriesApi) {
this.#chart?.setCrosshairPosition(price, horizontalPosition, seriesApi);
}
setCrossHairPositionByPoint(point, time) {
const xValue = time || this.timeScale?.coordinateToTime(point.x), yValue = this.#series?.coordinateToPrice(point.y);
if (!xValue || !yValue) {
return;
}
this.setCrosshairPosition(yValue, xValue, this.#series);
}
clearCrosshairPosition() {
this.#chart?.clearCrosshairPosition();
}
addAdditionalSeries(type, seriesOptions, ...customSeriesView) {
if (!this.#chart) {
return {
series: undefined,
seriesSubscriptions: undefined
};
}
return this.#seriesFactory.create(type, this.#chart, seriesOptions, ...(customSeriesView || []));
}
removeSeries(series) {
if (!series) {
series = this.#series;
}
if (!series) {
return;
}
this.#chart?.removeSeries(series);
}
resize(width, height, forceRepaint) {
this.#chart?.resize(width, height, forceRepaint);
}
remove() {
this.#chart?.remove();
this.#chartSubscriptions?.destroy();
this.#timescaleSubscriptions?.destroy();
this.#seriesSubscriptions?.destroy();
this.#initialised.complete();
}
#init(element, type, options, seriesOptions, ...customSeriesView) {
({
chart: this.#chart,
chartSubscriptions: this.#chartSubscriptions,
timescaleSubscriptions: this.#timescaleSubscriptions
} = this.#chartFactory.create(element, options));
({
series: this.#series,
seriesSubscriptions: this.#seriesSubscriptions
} = this.#seriesFactory.create(type, this.#chart, seriesOptions, ...customSeriesView));
}
};
})();
function tvChartFactory(chartFactory, seriesFactory) {
return new TVChart(chartFactory, seriesFactory);
}
function filterChartsByIds(ids) {
const values = Array.isArray(ids) ? ids : !ids ? [] : [ids];
return (chart) => {
return !values.length || !!(chart.id && values.includes(chart.id));
};
}
function getTVChartDefaultProviders() {
return makeEnvironmentProviders([{
provide: ChartFactory,
useFactory: () => new ChartFactory()
}, {
provide: SeriesFactory,
useFactory: () => new SeriesFactory()
}]);
}
class TVChartCollectorDirective {
constructor() {
this.#chart = inject((TVChart), { optional: true });
this.ids = input('', { alias: 'tvChartCollector' });
this.childCharts = contentChildren(TVChart, { descendants: true });
this.#charts = toSignal(toObservable(this.childCharts).pipe(takeUntilDestroyed(), map(charts => [...(this.#chart ? [this.#chart] : []), ...charts]), switchMap(charts => from(charts).pipe(mergeMap(chart => chart.initialised$), bufferCount(charts.length), map(() => charts))), share()));
this.charts = computed(() => {
return this.#charts()?.filter(filterChartsByIds(this.ids()));
});
}
#chart;
#charts;
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartCollectorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.6", type: TVChartCollectorDirective, isStandalone: true, selector: "[tvChartCollector]", inputs: { ids: { classPropertyName: "ids", publicName: "tvChartCollector", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "childCharts", predicate: TVChart, descendants: true, isSignal: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartCollectorDirective, decorators: [{
type: Directive,
args: [{
selector: '[tvChartCollector]',
standalone: true
}]
}] });
class TVChartCrosshairDataDirective {
#collector;
#crosshairService;
constructor() {
this.#collector = inject(TVChartCollectorDirective);
this.#crosshairService = inject(CrosshairService);
this.ids = input('', { alias: 'tvChartCrosshairDataIds' });
this.data = outputFromObservable(this.#crosshairService.crosshairPosition$, { alias: 'tvChartCrosshairData' });
effect(() => {
this.#crosshairService.register((this.#collector.charts() || []).filter(filterChartsByIds(this.ids())));
});
}
ngOnDestroy() {
this.#crosshairService.destroy();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartCrosshairDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: TVChartCrosshairDataDirective, isStandalone: true, selector: "[tvChartCrosshairData]", inputs: { ids: { classPropertyName: "ids", publicName: "tvChartCrosshairDataIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "tvChartCrosshairData" }, providers: [{
provide: CrosshairService,
useFactory: () => {
return new CrosshairService();
}
}], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartCrosshairDataDirective, decorators: [{
type: Directive,
args: [{
selector: '[tvChartCrosshairData]',
standalone: true,
providers: [{
provide: CrosshairService,
useFactory: () => {
return new CrosshairService();
}
}]
}]
}], ctorParameters: () => [] });
class TVChartSyncDirective {
#collector;
#syncService;
constructor() {
this.#collector = inject(TVChartCollectorDirective);
this.#syncService = inject(SyncService);
this.ids = input('', { alias: 'tvChartSync' });
this.visibleLogicalRange = outputFromObservable(this.#syncService.visibleLogicalRange$);
this.crosshairPosition = outputFromObservable(this.#syncService.crosshairPosition$);
effect(() => {
this.#syncService.register((this.#collector.charts() || []).filter(filterChartsByIds(this.ids())));
});
}
ngOnDestroy() {
this.#syncService.destroy();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartSyncDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: TVChartSyncDirective, isStandalone: true, selector: "[tvChartSync]", inputs: { ids: { classPropertyName: "ids", publicName: "tvChartSync", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleLogicalRange: "visibleLogicalRange", crosshairPosition: "crosshairPosition" }, providers: [{
provide: SyncService,
useFactory: () => {
return new SyncService();
}
}], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartSyncDirective, decorators: [{
type: Directive,
args: [{
selector: '[tvChartSync]',
standalone: true,
providers: [{
provide: SyncService,
useFactory: () => {
return new SyncService();
}
}]
}]
}], ctorParameters: () => [] });
class TVChartGroupDirective {
#collector;
constructor() {
this.ids = input('', { alias: 'tvChartGroup' });
this.groupOptions = input();
this.showAllTimeScales = input(false);
this.minimumWidth = input(80);
this.#collector = inject((TVChartCollectorDirective));
effect(() => {
this.#collector.charts()
?.filter(filterChartsByIds(this.ids()))
.forEach((chart, index, charts) => {
chart.applyOptions(this.#getStyles(index === charts.length - 1));
});
});
}
#getStyles(isBottomTimeScale) {
const options = this.groupOptions() || {}, group = {
timeScale: {
visible: isBottomTimeScale || this.showAllTimeScales(),
},
rightPriceScale: {
minimumWidth: this.minimumWidth(),
}
};
return deepmerge(group, options);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: TVChartGroupDirective, isStandalone: true, selector: "[tvChartGroup]", inputs: { ids: { classPropertyName: "ids", publicName: "tvChartGroup", isSignal: true, isRequired: false, transformFunction: null }, groupOptions: { classPropertyName: "groupOptions", publicName: "groupOptions", isSignal: true, isRequired: false, transformFunction: null }, showAllTimeScales: { classPropertyName: "showAllTimeScales", publicName: "showAllTimeScales", isSignal: true, isRequired: false, transformFunction: null }, minimumWidth: { classPropertyName: "minimumWidth", publicName: "minimumWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartGroupDirective, decorators: [{
type: Directive,
args: [{
selector: '[tvChartGroup]',
standalone: true
}]
}], ctorParameters: () => [] });
const tvChartProvider = {
provide: TVChart,
useFactory: tvChartProviderFactory
};
const tvChartProviderWithExistenceCheck = {
provide: TVChart,
useFactory: () => {
const parentChart = inject(TVChart, { optional: true, skipSelf: true });
return parentChart || tvChartProviderFactory();
}
};
function tvChartProviderFactory() {
const chartFactory = inject(ChartFactory), seriesFactory = inject(SeriesFactory);
return tvChartFactory(chartFactory, seriesFactory);
}
class TVChartInputsDirective {
constructor() {
this.id = input();
this.options = input();
this.markers = input();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartInputsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: TVChartInputsDirective, isStandalone: true, selector: "[tvChartInputs]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, markers: { classPropertyName: "markers", publicName: "markers", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartInputsDirective, decorators: [{
type: Directive,
args: [{
selector: '[tvChartInputs]',
standalone: true,
}]
}] });
const tvChartInputsDirectiveHostDef = {
directive: TVChartInputsDirective,
inputs: ['id', 'options', 'markers']
};
class TVChartOutputsDirective {
constructor() {
this.#chart = inject((TVChart));
this.initialised = outputFromObservable(this.#chart.initialised$);
this.chartClick = outputFromObservable(this.#chart.click$);
this.chartDBLClick = outputFromObservable(this.#chart.dblClick$);
this.crosshairMoved = outputFromObservable(this.#chart.crossHairMove$);
this.visibleTimeRangeChanged = outputFromObservable(this.#chart.visibleTimeRangeChange$);
this.visibleLogicalRangeChanged = outputFromObservable(this.#chart.visibleLogicalRangeChange$);
this.sizeChanged = outputFromObservable(this.#chart.sizeChange$);
this.dataChanged = outputFromObservable(this.#chart.dataChange$);
}
#chart;
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartOutputsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.6", type: TVChartOutputsDirective, isStandalone: true, selector: "[tvChartOutputs]", outputs: { initialised: "initialised", chartClick: "chartClick", chartDBLClick: "chartDBLClick", crosshairMoved: "crosshairMoved", visibleTimeRangeChanged: "visibleTimeRangeChanged", visibleLogicalRangeChanged: "visibleLogicalRangeChanged", sizeChanged: "sizeChanged", dataChanged: "dataChanged" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartOutputsDirective, decorators: [{
type: Directive,
args: [{
selector: '[tvChartOutputs]',
standalone: true,
}]
}] });
const tvChartOutputsDirectiveHostDef = {
directive: TVChartOutputsDirective,
outputs: [
'initialised',
'chartClick',
'chartDBLClick',
'crosshairMoved',
'visibleLogicalRangeChanged',
'visibleTimeRangeChanged',
'sizeChanged',
'dataChanged'
]
};
const DEFAULT_CHART_OPTIONS = {
height: 300,
autoSize: true,
timeScale: {
fixRightEdge: true,
lockVisibleTimeRangeOnResize: true,
timeVisible: true,
secondsVisible: false,
},
crosshair: {
vertLine: {
style: LineStyle.LargeDashed
},
horzLine: {
style: LineStyle.LargeDashed
},
}
};
const DEFAULT_DARK_CHART_OPTIONS = deepmerge(DEFAULT_CHART_OPTIONS, {
layout: {
background: { type: ColorType.Solid, color: '#222' },
textColor: '#DDD',
},
grid: {
vertLines: { color: '#444' },
horzLines: { color: '#444' },
},
timeScale: {
borderColor: '#555',
},
leftPriceScale: {
borderColor: '#555'
},
rightPriceScale: {
borderColor: '#555'
},
crosshair: {
vertLine: {
color: '#fff',
labelBackgroundColor: '#aaa',
style: LineStyle.SparseDotted
},
horzLine: {
color: '#fff',
labelBackgroundColor: '#aaa',
style: LineStyle.SparseDotted
},
}
});
class TVChartDirective {
#inputs;
#element;
#chart;
constructor() {
this.type = input.required({ alias: 'tvChart' });
this.seriesOptions = input();
this.data = input();
this.customSeriesView = input();
this.#inputs = inject(TVChartInputsDirective);
this.#element = inject((ElementRef)).nativeElement;
this.#chart = inject((TVChart));
effect(() => {
const options = this.#inputs.options();
if (!options) {
return;
}
this.#chart.applyOptions(options);
});
effect(() => {
const seriesOptions = this.seriesOptions();
if (!seriesOptions) {
return;
}
this.#chart.applySeriesOptions(seriesOptions);
});
effect(() => {
const data = this.data();
if (!data) {
return;
}
this.#chart.setData(data);
});
effect(() => {
const markers = this.#inputs.markers();
if (!markers) {
return;
}
this.#chart.setMarkers(markers);
});
}
ngOnInit() {
const options = deepmerge(DEFAULT_CHART_OPTIONS, this.#inputs.options() || {});
this.#chart.initialise(this.#element, this.type(), this.#inputs.id(), options, this.seriesOptions() || {}, ...(this.customSeriesView() ? [this.customSeriesView()] : []));
}
ngOnDestroy() {
this.#chart.remove();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: TVChartDirective, isStandalone: true, selector: "[tvChart]", inputs: { type: { classPropertyName: "type", publicName: "tvChart", isSignal: true, isRequired: true, transformFunction: null }, seriesOptions: { classPropertyName: "seriesOptions", publicName: "seriesOptions", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, customSeriesView: { classPropertyName: "customSeriesView", publicName: "customSeriesView", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tvChartProviderWithExistenceCheck], hostDirectives: [{ directive: TVChartInputsDirective, inputs: ["id", "id", "options", "options", "markers", "markers"] }, { directive: TVChartOutputsDirective, outputs: ["initialised", "initialised", "chartClick", "chartClick", "chartDBLClick", "chartDBLClick", "crosshairMoved", "crosshairMoved", "visibleLogicalRangeChanged", "visibleLogicalRangeChanged", "visibleTimeRangeChanged", "visibleTimeRangeChanged", "sizeChanged", "sizeChanged", "dataChanged", "dataChanged"] }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartDirective, decorators: [{
type: Directive,
args: [{
selector: '[tvChart]',
standalone: true,
providers: [tvChartProviderWithExistenceCheck],
hostDirectives: [
tvChartInputsDirectiveHostDef,
tvChartOutputsDirectiveHostDef
]
}]
}], ctorParameters: () => [] });
class TVChartCustomSeriesComponent {
constructor() {
this.seriesOptions = input({});
this.data = input();
this.customSeriesView = input();
this.inputs = inject(TVChartInputsDirective);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartCustomSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TVChartCustomSeriesComponent, isStandalone: true, selector: "tv-custom-series-chart", inputs: { seriesOptions: { classPropertyName: "seriesOptions", publicName: "seriesOptions", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, customSeriesView: { classPropertyName: "customSeriesView", publicName: "customSeriesView", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tvChartProvider], hostDirectives: [{ directive: TVChartInputsDirective, inputs: ["id", "id", "options", "options", "markers", "markers"] }, { directive: TVChartOutputsDirective, outputs: ["initialised", "initialised", "chartClick", "chartClick", "chartDBLClick", "chartDBLClick", "crosshairMoved", "crosshairMoved", "visibleLogicalRangeChanged", "visibleLogicalRangeChanged", "visibleTimeRangeChanged", "visibleTimeRangeChanged", "sizeChanged", "sizeChanged", "dataChanged", "dataChanged"] }], ngImport: i0, template: "\n<div tvChart=\"Custom\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [customSeriesView]=\"customSeriesView()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"], dependencies: [{ kind: "directive", type: TVChartDirective, selector: "[tvChart]", inputs: ["tvChart", "seriesOptions", "data", "customSeriesView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartCustomSeriesComponent, decorators: [{
type: Component,
args: [{ selector: 'tv-custom-series-chart', imports: [TVChartDirective], providers: [tvChartProvider], hostDirectives: [
tvChartInputsDirectiveHostDef,
tvChartOutputsDirectiveHostDef
], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div tvChart=\"Custom\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [customSeriesView]=\"customSeriesView()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"] }]
}] });
const DEFAULT_DARK_SERIES_OPTIONS = {
wickUpColor: 'rgb(54, 116, 217)',
upColor: 'rgb(54, 116, 217)',
wickDownColor: 'rgb(225, 50, 85)',
downColor: 'rgb(225, 50, 85)',
borderVisible: false,
};
const DEFAULT_HISTOGRAM_SERIES_OPTIONS$1 = {
color: '#26a69a',
priceFormat: {
type: 'volume',
},
priceScaleId: ''
};
class TVCandleStickChartComponent {
#histogramSeries;
constructor() {
this.seriesOptions = input({});
this.volumeOptions = input(DEFAULT_HISTOGRAM_SERIES_OPTIONS$1);
this.data = input();
this.volume = input();
this.chart = viewChild((TVChartDirective), { read: TVChart });
this.inputs = inject((TVChartInputsDirective));
effect(() => {
const data = this.volume(), chart = this.chart()?.chart;
if (!data || !chart) {
return;
}
this.#setVolume(data);
});
}
#setVolume(data) {
if (!this.#histogramSeries) {
this.#initialiseHistogram();
}
this.#histogramSeries.setData(data);
}
#initialiseHistogram() {
const chart = this.chart();
if (!chart) {
console.warn('TVCandleStickChartComponent::initialiseHistogram - Chart not initialised');
return;
}
({ series: this.#histogramSeries } = chart.addAdditionalSeries('Histogram', this.volumeOptions()));
if (!this.#histogramSeries) {
return;
}
this.#histogramSeries.priceScale().applyOptions({
scaleMargins: {
top: 0.7,
bottom: 0,
},
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVCandleStickChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.6", type: TVCandleStickChartComponent, isStandalone: true, selector: "tv-candlestick-chart", inputs: { seriesOptions: { classPropertyName: "seriesOptions", publicName: "seriesOptions", isSignal: true, isRequired: false, transformFunction: null }, volumeOptions: { classPropertyName: "volumeOptions", publicName: "volumeOptions", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, volume: { classPropertyName: "volume", publicName: "volume", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tvChartProvider], viewQueries: [{ propertyName: "chart", first: true, predicate: (TVChartDirective), descendants: true, read: TVChart, isSignal: true }], hostDirectives: [{ directive: TVChartInputsDirective, inputs: ["id", "id", "options", "options", "markers", "markers"] }, { directive: TVChartOutputsDirective, outputs: ["initialised", "initialised", "chartClick", "chartClick", "chartDBLClick", "chartDBLClick", "crosshairMoved", "crosshairMoved", "visibleLogicalRangeChanged", "visibleLogicalRangeChanged", "visibleTimeRangeChanged", "visibleTimeRangeChanged", "sizeChanged", "sizeChanged", "dataChanged", "dataChanged"] }], ngImport: i0, template: "\n<div tvChart=\"Candlestick\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"], dependencies: [{ kind: "directive", type: TVChartDirective, selector: "[tvChart]", inputs: ["tvChart", "seriesOptions", "data", "customSeriesView"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVCandleStickChartComponent, decorators: [{
type: Component,
args: [{ selector: 'tv-candlestick-chart', imports: [TVChartDirective], providers: [tvChartProvider], hostDirectives: [
tvChartInputsDirectiveHostDef,
tvChartOutputsDirectiveHostDef
], template: "\n<div tvChart=\"Candlestick\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"] }]
}], ctorParameters: () => [] });
const DEFAULT_HISTOGRAM_SERIES_OPTIONS = {
color: '#26a69a',
priceFormat: {
type: 'volume',
}
};
class TVHistogramChartComponent {
constructor() {
this.seriesOptions = input(DEFAULT_HISTOGRAM_SERIES_OPTIONS);
this.data = input();
this.inputs = inject(TVChartInputsDirective);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVHistogramChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TVHistogramChartComponent, isStandalone: true, selector: "tv-histogram-chart", inputs: { seriesOptions: { classPropertyName: "seriesOptions", publicName: "seriesOptions", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tvChartProvider], hostDirectives: [{ directive: TVChartInputsDirective, inputs: ["id", "id", "options", "options", "markers", "markers"] }, { directive: TVChartOutputsDirective, outputs: ["initialised", "initialised", "chartClick", "chartClick", "chartDBLClick", "chartDBLClick", "crosshairMoved", "crosshairMoved", "visibleLogicalRangeChanged", "visibleLogicalRangeChanged", "visibleTimeRangeChanged", "visibleTimeRangeChanged", "sizeChanged", "sizeChanged", "dataChanged", "dataChanged"] }], ngImport: i0, template: "\n<div tvChart=\"Histogram\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"], dependencies: [{ kind: "directive", type: TVChartDirective, selector: "[tvChart]", inputs: ["tvChart", "seriesOptions", "data", "customSeriesView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVHistogramChartComponent, decorators: [{
type: Component,
args: [{ selector: 'tv-histogram-chart', imports: [TVChartDirective], providers: [tvChartProvider], hostDirectives: [
tvChartInputsDirectiveHostDef,
tvChartOutputsDirectiveHostDef
], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div tvChart=\"Histogram\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"] }]
}] });
class TVLineChartDirective {
constructor() {
this.seriesOptions = input({});
this.data = input();
this.inputs = inject(TVChartInputsDirective);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVLineChartDirective, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TVLineChartDirective, isStandalone: true, selector: "tv-line-chart", inputs: { seriesOptions: { classPropertyName: "seriesOptions", publicName: "seriesOptions", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tvChartProvider], hostDirectives: [{ directive: TVChartInputsDirective, inputs: ["id", "id", "options", "options", "markers", "markers"] }, { directive: TVChartOutputsDirective, outputs: ["initialised", "initialised", "chartClick", "chartClick", "chartDBLClick", "chartDBLClick", "crosshairMoved", "crosshairMoved", "visibleLogicalRangeChanged", "visibleLogicalRangeChanged", "visibleTimeRangeChanged", "visibleTimeRangeChanged", "sizeChanged", "sizeChanged", "dataChanged", "dataChanged"] }], ngImport: i0, template: "\n<div tvChart=\"Line\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"], dependencies: [{ kind: "directive", type: TVChartDirective, selector: "[tvChart]", inputs: ["tvChart", "seriesOptions", "data", "customSeriesView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVLineChartDirective, decorators: [{
type: Component,
args: [{ selector: 'tv-line-chart', imports: [TVChartDirective], providers: [tvChartProvider], hostDirectives: [
tvChartInputsDirectiveHostDef,
tvChartOutputsDirectiveHostDef
], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div tvChart=\"Line\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"] }]
}] });
const DEFAULT_BAR_SERIES_OPTIONS = {
priceFormat: {
type: 'volume',
}
};
class TVBarChartDirective {
constructor() {
this.seriesOptions = input(DEFAULT_BAR_SERIES_OPTIONS);
this.data = input();
this.inputs = inject(TVChartInputsDirective);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVBarChartDirective, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TVBarChartDirective, isStandalone: true, selector: "tv-bar-chart", inputs: { seriesOptions: { classPropertyName: "seriesOptions", publicName: "seriesOptions", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tvChartProvider], hostDirectives: [{ directive: TVChartInputsDirective, inputs: ["id", "id", "options", "options", "markers", "markers"] }, { directive: TVChartOutputsDirective, outputs: ["initialised", "initialised", "chartClick", "chartClick", "chartDBLClick", "chartDBLClick", "crosshairMoved", "crosshairMoved", "visibleLogicalRangeChanged", "visibleLogicalRangeChanged", "visibleTimeRangeChanged", "visibleTimeRangeChanged", "sizeChanged", "sizeChanged", "dataChanged", "dataChanged"] }], ngImport: i0, template: "\n<div tvChart=\"Bar\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"], dependencies: [{ kind: "directive", type: TVChartDirective, selector: "[tvChart]", inputs: ["tvChart", "seriesOptions", "data", "customSeriesView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVBarChartDirective, decorators: [{
type: Component,
args: [{ selector: 'tv-bar-chart', imports: [TVChartDirective], providers: [tvChartProvider], hostDirectives: [
tvChartInputsDirectiveHostDef,
tvChartOutputsDirectiveHostDef
], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div tvChart=\"Bar\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"] }]
}] });
class TVBaselineChartComponent {
constructor() {
this.seriesOptions = input({});
this.data = input();
this.inputs = inject(TVChartInputsDirective);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVBaselineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TVBaselineChartComponent, isStandalone: true, selector: "tv-baseline-chart", inputs: { seriesOptions: { classPropertyName: "seriesOptions", publicName: "seriesOptions", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tvChartProvider], hostDirectives: [{ directive: TVChartInputsDirective, inputs: ["id", "id", "options", "options", "markers", "markers"] }, { directive: TVChartOutputsDirective, outputs: ["initialised", "initialised", "chartClick", "chartClick", "chartDBLClick", "chartDBLClick", "crosshairMoved", "crosshairMoved", "visibleLogicalRangeChanged", "visibleLogicalRangeChanged", "visibleTimeRangeChanged", "visibleTimeRangeChanged", "sizeChanged", "sizeChanged", "dataChanged", "dataChanged"] }], ngImport: i0, template: "\n<div tvChart=\"Baseline\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"], dependencies: [{ kind: "directive", type: TVChartDirective, selector: "[tvChart]", inputs: ["tvChart", "seriesOptions", "data", "customSeriesView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVBaselineChartComponent, decorators: [{
type: Component,
args: [{ selector: 'tv-baseline-chart', imports: [TVChartDirective], providers: [tvChartProvider], hostDirectives: [
tvChartInputsDirectiveHostDef,
tvChartOutputsDirectiveHostDef
], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div tvChart=\"Baseline\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"] }]
}] });
class TVAreaChartComponent {
constructor() {
this.seriesOptions = input({});
this.data = input();
this.inputs = inject(TVChartInputsDirective);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVAreaChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.6", type: TVAreaChartComponent, isStandalone: true, selector: "tv-area-chart", inputs: { seriesOptions: { classPropertyName: "seriesOptions", publicName: "seriesOptions", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [tvChartProvider], hostDirectives: [{ directive: TVChartInputsDirective, inputs: ["id", "id", "options", "options", "markers", "markers"] }, { directive: TVChartOutputsDirective, outputs: ["initialised", "initialised", "chartClick", "chartClick", "chartDBLClick", "chartDBLClick", "crosshairMoved", "crosshairMoved", "visibleLogicalRangeChanged", "visibleLogicalRangeChanged", "visibleTimeRangeChanged", "visibleTimeRangeChanged", "sizeChanged", "sizeChanged", "dataChanged", "dataChanged"] }], ngImport: i0, template: "\n<div tvChart=\"Area\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"], dependencies: [{ kind: "directive", type: TVChartDirective, selector: "[tvChart]", inputs: ["tvChart", "seriesOptions", "data", "customSeriesView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVAreaChartComponent, decorators: [{
type: Component,
args: [{ selector: 'tv-area-chart', imports: [TVChartDirective], providers: [tvChartProvider], hostDirectives: [
tvChartInputsDirectiveHostDef,
tvChartOutputsDirectiveHostDef
], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<div tvChart=\"Area\"\n class=\"chart\"\n [id]=\"inputs.id()\"\n [options]=\"inputs.options()\"\n [markers]=\"inputs.markers()\"\n [seriesOptions]=\"seriesOptions()\"\n [data]=\"data()\">\n</div>\n", styles: [":host{display:block;--chart-width: var(--ngx-lightweight-chart-width, 100%);--chart-height: var(--ngx-lightweight-chart-height, 100%)}:host .chart{display:block;width:var(--chart-width);height:var(--chart-height)}\n"] }]
}] });
class TVChartBorderDirective {
#collector;
constructor() {
this.borderStyles = input.required({ alias: 'tvChartBorder' });
this.#collector = inject((TVChartCollectorDirective));
effect(() => {
this.#collector.charts()?.forEach(chart => {
chart.applyOptions(this.#getStyles(chart) || {});
});
});
}
#getStyles(chart) {
const borderStyles = this.borderStyles(), current = chart.options;
if (!current) {
return;
}
return {
timeScale: {
borderColor: borderStyles.borderColor || current.timeScale?.borderColor,
borderVisible: borderStyles.borderVisible || current.timeScale?.borderVisible
},
leftPriceScale: {
borderColor: borderStyles.borderColor || current.leftPriceScale?.borderColor,
borderVisible: borderStyles.borderVisible || current.leftPriceScale?.borderVisible
},
rightPriceScale: {
borderColor: borderStyles.borderColor || current.rightPriceScale?.borderColor,
borderVisible: borderStyles.borderVisible || current.rightPriceScale?.borderVisible
}
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartBorderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.6", type: TVChartBorderDirective, isStandalone: true, selector: "[tvChartBorder]", inputs: { borderStyles: { classPropertyName: "borderStyles", publicName: "tvChartBorder", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: TVChartBorderDirective, decorators: [{
type: Directive,
args: [{
selector: '[tvChartBorder]',
standalone: true
}]
}], ctorParameters: () => [] });
/**
* Generated bundle index. Do not edit.
*/
export { ChartFactory, CrosshairService, DEFAULT_CHART_OPTIONS, DEFAULT_DARK_CHART_OPTIONS, SeriesFactory, SeriesStreams, SyncService, TVAreaChartComponent, TVBarChartDirective, TVBaselineChartComponent, TVCandleStickChartComponent, TVChart, TVChartBorderDirective, TVChartCollectorDirective, TVChartCrosshairDataDirective, TVChartCustomSeriesComponent, TVChartDirective, TVChartGroupDirective, TVChartInputsDirective, TVChartOutputsDirective, TVChartSyncDirective, TVHistogramChartComponent, TVLineChartDirective, TimescaleStreams, filterChartsByIds, getTVChartDefaultProviders, tvChartFactory, tvChartInputsDirectiveHostDef, tvChartOutputsDirectiveHostDef };
//# sourceMappingURL=ngx-lightweight-charts.mjs.map