@tetacom/svg-charts 1.2.13 → 1.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Injectable, Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Directive, HostBinding, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
2
+ import { Injectable, Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, ElementRef, ViewChild, Directive, HostBinding, EventEmitter, Output, NgModule } from '@angular/core';
3
3
  import * as i4 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import { __awaiter } from 'tslib';
@@ -9,7 +9,8 @@ import { zoomIdentity } from 'd3';
9
9
  import objectHash from 'object-hash';
10
10
  import { maxIndex } from 'd3-array';
11
11
  import { debounceTime, tap as tap$1 } from 'rxjs/operators';
12
- import { tetaZoneFull } from '@tetacom/ng-components';
12
+ import * as i5 from '@tetacom/ng-components';
13
+ import { PositionUtil, Align, VerticalAlign, tetaZoneFull, LetModule } from '@tetacom/ng-components';
13
14
  import * as i3 from '@angular/platform-browser';
14
15
 
15
16
  var ZoomType;
@@ -1406,9 +1407,8 @@ class BlockAreaSeriesComponent extends SeriesBaseComponent {
1406
1407
  this.id = (Date.now() + Math.random()).toString(36);
1407
1408
  }
1408
1409
  ngOnInit() {
1409
- const defaultVisiblePixels = 0;
1410
- this.x = this.scaleService.scales.pipe(map((_) => _.x.get(this.series.xAxisIndex).scale));
1411
- this.y = this.scaleService.scales.pipe(map((_) => _.y.get(this.series.yAxisIndex).scale));
1410
+ this.x = this.scaleService.scales.pipe(map((_) => { var _a; return (_a = _.x.get(this.series.xAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
1411
+ this.y = this.scaleService.scales.pipe(map((_) => { var _a; return (_a = _.y.get(this.series.yAxisIndex)) === null || _a === void 0 ? void 0 : _a.scale; }));
1412
1412
  this.displayPoints = this.y.pipe(map((y) => {
1413
1413
  return this.series.data.filter((point, index, arr) => {
1414
1414
  var _a, _b, _c, _d;
@@ -1554,24 +1554,26 @@ class GridlinesComponent {
1554
1554
  this.chartService = chartService;
1555
1555
  this.config = this.chartService.config;
1556
1556
  this.tickYValues = this.svc.scales.pipe(map((_) => {
1557
+ var _a;
1557
1558
  const ratio = this.size.height / 40;
1558
- return _.y.get(0).scale.ticks(ratio);
1559
+ return (_a = _.y.get(0)) === null || _a === void 0 ? void 0 : _a.scale.ticks(ratio);
1559
1560
  }));
1560
1561
  this.tickXValues = this.svc.scales.pipe(map((_) => {
1562
+ var _a;
1561
1563
  const ratio = this.size.width / 40;
1562
- return _.x.get(0).scale.ticks(ratio);
1564
+ return (_a = _.x.get(0)) === null || _a === void 0 ? void 0 : _a.scale.ticks(ratio);
1563
1565
  }));
1564
- this.y = this.svc.scales.pipe(map((_) => _.y.get(0).scale));
1565
- this.x = this.svc.scales.pipe(map((_) => _.x.get(0).scale));
1566
+ this.y = this.svc.scales.pipe(map((_) => { var _a; return (_a = _.y.get(0)) === null || _a === void 0 ? void 0 : _a.scale; }));
1567
+ this.x = this.svc.scales.pipe(map((_) => { var _a; return (_a = _.x.get(0)) === null || _a === void 0 ? void 0 : _a.scale; }));
1566
1568
  }
1567
1569
  ngAfterViewInit() {
1568
1570
  }
1569
1571
  }
1570
1572
  GridlinesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GridlinesComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
1571
- GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"{\n xValues: tickXValues | async,\n yValues: tickYValues | async,\n x: x | async,\n y: y | async,\n config: config | async\n} as data\">\n <ng-container *ngIf=\"data.config.gridLines?.showY !== false\">\n <ng-container *ngFor=\"let tick of data.yValues\">\n <svg:line [attr.x1]=\"0\"\n [attr.y1]=\"data.y(tick)\"\n [attr.x2]=\"size?.width\"\n [attr.y2]=\"data.y(tick)\"></svg:line>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"data.config.gridLines?.showX !== false\">\n <ng-container *ngFor=\"let tick of data.xValues\">\n <svg:line [attr.x1]=\"data.x(tick)\"\n [attr.y1]=\"0\"\n [attr.x2]=\"data.x(tick)\"\n [attr.y2]=\"size?.height\"></svg:line>\n </ng-container>\n </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1573
+ GridlinesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: GridlinesComponent, selector: "[teta-gridlines]", inputs: { size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"{\n xValues: tickXValues | async,\n yValues: tickYValues | async,\n x: x | async,\n y: y | async,\n config: config | async\n} as data\">\n <ng-container *ngIf=\"data.y && data.config.gridLines?.showY !== false\">\n <ng-container *ngFor=\"let tick of data.yValues\">\n <svg:line [attr.x1]=\"0\"\n [attr.y1]=\"data.y(tick)\"\n [attr.x2]=\"size?.width\"\n [attr.y2]=\"data.y(tick)\"></svg:line>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"data.x && data.config.gridLines?.showX !== false\">\n <ng-container *ngFor=\"let tick of data.xValues\">\n <svg:line [attr.x1]=\"data.x(tick)\"\n [attr.y1]=\"0\"\n [attr.x2]=\"data.x(tick)\"\n [attr.y2]=\"size?.height\"></svg:line>\n </ng-container>\n </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1572
1574
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: GridlinesComponent, decorators: [{
1573
1575
  type: Component,
1574
- args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n xValues: tickXValues | async,\n yValues: tickYValues | async,\n x: x | async,\n y: y | async,\n config: config | async\n} as data\">\n <ng-container *ngIf=\"data.config.gridLines?.showY !== false\">\n <ng-container *ngFor=\"let tick of data.yValues\">\n <svg:line [attr.x1]=\"0\"\n [attr.y1]=\"data.y(tick)\"\n [attr.x2]=\"size?.width\"\n [attr.y2]=\"data.y(tick)\"></svg:line>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"data.config.gridLines?.showX !== false\">\n <ng-container *ngFor=\"let tick of data.xValues\">\n <svg:line [attr.x1]=\"data.x(tick)\"\n [attr.y1]=\"0\"\n [attr.x2]=\"data.x(tick)\"\n [attr.y2]=\"size?.height\"></svg:line>\n </ng-container>\n </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"] }]
1576
+ args: [{ selector: '[teta-gridlines]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n xValues: tickXValues | async,\n yValues: tickYValues | async,\n x: x | async,\n y: y | async,\n config: config | async\n} as data\">\n <ng-container *ngIf=\"data.y && data.config.gridLines?.showY !== false\">\n <ng-container *ngFor=\"let tick of data.yValues\">\n <svg:line [attr.x1]=\"0\"\n [attr.y1]=\"data.y(tick)\"\n [attr.x2]=\"size?.width\"\n [attr.y2]=\"data.y(tick)\"></svg:line>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"data.x && data.config.gridLines?.showX !== false\">\n <ng-container *ngFor=\"let tick of data.xValues\">\n <svg:line [attr.x1]=\"data.x(tick)\"\n [attr.y1]=\"0\"\n [attr.x2]=\"data.x(tick)\"\n [attr.y2]=\"size?.height\"></svg:line>\n </ng-container>\n </ng-container>\n\n</ng-container>\n\n\n", styles: [":host{shape-rendering:crispEdges}:host line{stroke:var(--color-text-5)}\n"] }]
1575
1577
  }], ctorParameters: function () { return [{ type: ScaleService }, { type: ChartService }]; }, propDecorators: { size: [{
1576
1578
  type: Input
1577
1579
  }] } });
@@ -1587,14 +1589,15 @@ class XAxisComponent {
1587
1589
  }));
1588
1590
  this.ticks = this.x.pipe(withLatestFrom(this._svc.size), map((_) => {
1589
1591
  const [x, size] = _;
1590
- const maxSymbolLength = parseInt(d3.max(x.ticks().map((_) => getTextWidth(this.axis.options.tickFormat ? this.axis.options.tickFormat(_) : this.axis.defaultFormatter()(_)))), 10);
1591
- return x.ticks(size.width / (maxSymbolLength * 2.5));
1592
+ const tickSize = x.ticks().map((_) => getTextWidth(this.axis.options.tickFormat ? this.axis.options.tickFormat(_) : this.axis.defaultFormatter()(_), 0.45, 11));
1593
+ return x.ticks(size.width / parseInt(d3.max(tickSize), 10) / 2);
1592
1594
  }));
1593
1595
  }
1594
1596
  getLabelTransform() {
1595
1597
  return `translate(${this.size.width / 2}, ${this.axis.options.opposite ? -32 : 32})`;
1596
1598
  }
1597
- ngOnInit() { }
1599
+ ngOnInit() {
1600
+ }
1598
1601
  ngOnDestroy() {
1599
1602
  this._alive = false;
1600
1603
  }
@@ -1865,12 +1868,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
1865
1868
  }] } });
1866
1869
 
1867
1870
  class TooltipComponent {
1868
- constructor(svc, cdr, zoomService, sanitizer, _zone) {
1871
+ constructor(svc, cdr, zoomService, sanitizer, _zone, _elementRef) {
1869
1872
  this.svc = svc;
1870
1873
  this.cdr = cdr;
1871
1874
  this.zoomService = zoomService;
1872
1875
  this.sanitizer = sanitizer;
1873
1876
  this._zone = _zone;
1877
+ this._elementRef = _elementRef;
1874
1878
  this.tooltips = this.svc.tooltips.pipe(map((_) => [..._.values()]));
1875
1879
  }
1876
1880
  ngOnInit() {
@@ -1918,20 +1922,15 @@ class TooltipComponent {
1918
1922
  }
1919
1923
  getPosition(event) {
1920
1924
  var _a, _b;
1921
- const centerX = this.size.width / 2;
1922
- const centerY = this.size.height / 2;
1923
- const padding = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.tooltip) === null || _b === void 0 ? void 0 : _b.padding;
1924
- const scene = {
1925
- left: event.pageX > centerX ? 'initial' : `${event.pageX + padding.x}px`,
1926
- top: event.pageY > centerY ? 'initial' : `${event.pageY + padding.y}px`,
1927
- bottom: event.pageY > centerY
1928
- ? `${window.innerHeight - event.pageY + padding.y}px`
1929
- : 'initial',
1930
- right: event.pageX > centerX
1931
- ? `${window.innerWidth - event.pageX + padding.x}px`
1932
- : 'initial',
1933
- };
1934
- return scene;
1925
+ if (!this.tooltip) {
1926
+ return null;
1927
+ }
1928
+ return PositionUtil.getPosition({
1929
+ top: event.pageY,
1930
+ bottom: event.pageY,
1931
+ left: event.pageX,
1932
+ right: event.pageX,
1933
+ }, (_b = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect(), Align.auto, VerticalAlign.top, 12);
1935
1934
  }
1936
1935
  format(input) {
1937
1936
  if (input instanceof Date) {
@@ -1942,15 +1941,18 @@ class TooltipComponent {
1942
1941
  return format(input);
1943
1942
  }
1944
1943
  }
1945
- TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
1946
- TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, ngImport: i0, template: "<ng-container *ngIf=\"position | async as p\">\n <ng-container *ngIf=\"tooltips | async as t\">\n <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2\"\n [style.position]=\"'fixed'\"\n *ngIf=\"t.length > 0\"\n [style.opacity]=\"display | async\"\n style=\"pointer-events: none; min-width: 200px;\"\n [style.left]=\"p.left\"\n [style.top]=\"p.top\"\n [style.bottom]=\"p.bottom\"\n [style.right]=\"p.right\"\n >\n <ng-container *ngIf=\"config.tooltip?.template\">\n <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"config.tooltip?.format; else default\">\n <div [innerHTML]=\"displayTooltips | async\"></div>\n </ng-container>\n\n <ng-template #default>\n <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n <ng-container *ngFor=\"let tooltip of t\">\n <div class=\"display-flex align-center\">\n <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n [style.background-color]=\"tooltip.series?.color\"></span>\n <span class=\"font-title-3\">\n {{ tooltip.series?.name }}\n <span class=\"font-body-3\">\n x: {{ format(tooltip.point?.x) }}\n y: {{ format(tooltip.point?.y) }}\n </span>\n </span>\n </div>\n </ng-container>\n </div>\n </ng-template>\n </div>\n </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1944
+ TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ZoomService }, { token: i3.DomSanitizer }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
1945
+ TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TooltipComponent, selector: "teta-tooltip", inputs: { size: "size", config: "config" }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container *tetaLet=\"position | async as p\">\n <ng-container *ngIf=\"tooltips | async as t\">\n <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2\"\n #tooltip\n [style.position]=\"'fixed'\"\n *ngIf=\"t.length > 0\"\n [style.opacity]=\"display | async\"\n style=\"pointer-events: none; min-width: 200px;\"\n [style.left.px]=\"p?.left\"\n [style.top.px]=\"p?.top\"\n [style.bottom.px]=\"p?.bottom\"\n [style.right.px]=\"p?.right\"\n >\n <ng-container *ngIf=\"config.tooltip?.template\">\n <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"config.tooltip?.format; else default\">\n <div [innerHTML]=\"displayTooltips | async\"></div>\n </ng-container>\n\n <ng-template #default>\n <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n <ng-container *ngFor=\"let tooltip of t\">\n <div class=\"display-flex align-center\">\n <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n [style.background-color]=\"tooltip.series?.color\"></span>\n <span class=\"font-title-3\">\n {{ tooltip.series?.name }}\n <span class=\"font-body-3\">\n x: {{ format(tooltip.point?.x) }}\n y: {{ format(tooltip.point?.y) }}\n </span>\n </span>\n </div>\n </ng-container>\n </div>\n </ng-template>\n </div>\n </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1947
1946
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, decorators: [{
1948
1947
  type: Component,
1949
- args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"position | async as p\">\n <ng-container *ngIf=\"tooltips | async as t\">\n <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2\"\n [style.position]=\"'fixed'\"\n *ngIf=\"t.length > 0\"\n [style.opacity]=\"display | async\"\n style=\"pointer-events: none; min-width: 200px;\"\n [style.left]=\"p.left\"\n [style.top]=\"p.top\"\n [style.bottom]=\"p.bottom\"\n [style.right]=\"p.right\"\n >\n <ng-container *ngIf=\"config.tooltip?.template\">\n <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"config.tooltip?.format; else default\">\n <div [innerHTML]=\"displayTooltips | async\"></div>\n </ng-container>\n\n <ng-template #default>\n <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n <ng-container *ngFor=\"let tooltip of t\">\n <div class=\"display-flex align-center\">\n <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n [style.background-color]=\"tooltip.series?.color\"></span>\n <span class=\"font-title-3\">\n {{ tooltip.series?.name }}\n <span class=\"font-body-3\">\n x: {{ format(tooltip.point?.x) }}\n y: {{ format(tooltip.point?.y) }}\n </span>\n </span>\n </div>\n </ng-container>\n </div>\n </ng-template>\n </div>\n </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\n"] }]
1950
- }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }]; }, propDecorators: { size: [{
1948
+ args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *tetaLet=\"position | async as p\">\n <ng-container *ngIf=\"tooltips | async as t\">\n <div class=\"chart-tooltip color-text-90 bg-background-50 shadow-2\"\n #tooltip\n [style.position]=\"'fixed'\"\n *ngIf=\"t.length > 0\"\n [style.opacity]=\"display | async\"\n style=\"pointer-events: none; min-width: 200px;\"\n [style.left.px]=\"p?.left\"\n [style.top.px]=\"p?.top\"\n [style.bottom.px]=\"p?.bottom\"\n [style.right.px]=\"p?.right\"\n >\n <ng-container *ngIf=\"config.tooltip?.template\">\n <ng-container *ngTemplateOutlet=\"config.tooltip.template; context: {$implicit: t}\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"config.tooltip?.format; else default\">\n <div [innerHTML]=\"displayTooltips | async\"></div>\n </ng-container>\n\n <ng-template #default>\n <div *ngIf=\"!config.tooltip?.template\" class=\"padding-2 border-radius-1\">\n <ng-container *ngFor=\"let tooltip of t\">\n <div class=\"display-flex align-center\">\n <span class=\"display-block margin-right-1\" [style.width.px]=\"10\" [style.height.px]=\"2\"\n [style.background-color]=\"tooltip.series?.color\"></span>\n <span class=\"font-title-3\">\n {{ tooltip.series?.name }}\n <span class=\"font-body-3\">\n x: {{ format(tooltip.point?.x) }}\n y: {{ format(tooltip.point?.y) }}\n </span>\n </span>\n </div>\n </ng-container>\n </div>\n </ng-template>\n </div>\n </ng-container>\n</ng-container>\n\n\n\n", styles: [":host{position:absolute;z-index:2}\n"] }]
1949
+ }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { size: [{
1951
1950
  type: Input
1952
1951
  }], config: [{
1953
1952
  type: Input
1953
+ }], tooltip: [{
1954
+ type: ViewChild,
1955
+ args: ['tooltip', { static: false, read: ElementRef }]
1954
1956
  }] } });
1955
1957
 
1956
1958
  class ZoomableDirective {
@@ -2749,7 +2751,7 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
2749
2751
  BlockSeriesComponent,
2750
2752
  BlockAreaSeriesComponent,
2751
2753
  AnnotationComponent,
2752
- CrosshairComponent], imports: [CommonModule], exports: [ChartComponent,
2754
+ CrosshairComponent], imports: [CommonModule, LetModule], exports: [ChartComponent,
2753
2755
  LegendComponent,
2754
2756
  SeriesBaseComponent,
2755
2757
  LineSeriesComponent,
@@ -2758,7 +2760,7 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
2758
2760
  AreaSeriesComponent,
2759
2761
  BlockSeriesComponent,
2760
2762
  BlockAreaSeriesComponent] });
2761
- ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, imports: [CommonModule] });
2763
+ ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, imports: [CommonModule, LetModule] });
2762
2764
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, decorators: [{
2763
2765
  type: NgModule,
2764
2766
  args: [{
@@ -2797,7 +2799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
2797
2799
  BlockSeriesComponent,
2798
2800
  BlockAreaSeriesComponent,
2799
2801
  ],
2800
- imports: [CommonModule],
2802
+ imports: [CommonModule, LetModule],
2801
2803
  }]
2802
2804
  }] });
2803
2805