@tetacom/svg-charts 1.2.13 → 1.2.14
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.
- package/chart/chart-container/tooltip/tooltip.component.d.ts +8 -6
- package/chart/chart.module.d.ts +2 -1
- package/esm2020/chart/chart-container/tooltip/tooltip.component.mjs +22 -21
- package/esm2020/chart/chart.module.mjs +5 -4
- package/fesm2015/tetacom-svg-charts.mjs +24 -24
- package/fesm2015/tetacom-svg-charts.mjs.map +1 -1
- package/fesm2020/tetacom-svg-charts.mjs +24 -24
- package/fesm2020/tetacom-svg-charts.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, Directive, HostBinding,
|
|
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 { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, lastValueFrom, take, combineLatest, ReplaySubject, tap, takeWhile, combineLatestWith, observeOn, animationFrameScheduler } from 'rxjs';
|
|
@@ -8,7 +8,8 @@ import { zoomIdentity } from 'd3';
|
|
|
8
8
|
import objectHash from 'object-hash';
|
|
9
9
|
import { maxIndex } from 'd3-array';
|
|
10
10
|
import { debounceTime, tap as tap$1 } from 'rxjs/operators';
|
|
11
|
-
import
|
|
11
|
+
import * as i5 from '@tetacom/ng-components';
|
|
12
|
+
import { PositionUtil, Align, VerticalAlign, tetaZoneFull, LetModule } from '@tetacom/ng-components';
|
|
12
13
|
import * as i3 from '@angular/platform-browser';
|
|
13
14
|
|
|
14
15
|
var ZoomType;
|
|
@@ -1852,12 +1853,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
1852
1853
|
}] } });
|
|
1853
1854
|
|
|
1854
1855
|
class TooltipComponent {
|
|
1855
|
-
constructor(svc, cdr, zoomService, sanitizer, _zone) {
|
|
1856
|
+
constructor(svc, cdr, zoomService, sanitizer, _zone, _elementRef) {
|
|
1856
1857
|
this.svc = svc;
|
|
1857
1858
|
this.cdr = cdr;
|
|
1858
1859
|
this.zoomService = zoomService;
|
|
1859
1860
|
this.sanitizer = sanitizer;
|
|
1860
1861
|
this._zone = _zone;
|
|
1862
|
+
this._elementRef = _elementRef;
|
|
1861
1863
|
this.tooltips = this.svc.tooltips.pipe(map((_) => [..._.values()]));
|
|
1862
1864
|
}
|
|
1863
1865
|
ngOnInit() {
|
|
@@ -1902,20 +1904,15 @@ class TooltipComponent {
|
|
|
1902
1904
|
}));
|
|
1903
1905
|
}
|
|
1904
1906
|
getPosition(event) {
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
right: event.pageX > centerX
|
|
1915
|
-
? `${window.innerWidth - event.pageX + padding.x}px`
|
|
1916
|
-
: 'initial',
|
|
1917
|
-
};
|
|
1918
|
-
return scene;
|
|
1907
|
+
if (!this.tooltip) {
|
|
1908
|
+
return null;
|
|
1909
|
+
}
|
|
1910
|
+
return PositionUtil.getPosition({
|
|
1911
|
+
top: event.pageY,
|
|
1912
|
+
bottom: event.pageY,
|
|
1913
|
+
left: event.pageX,
|
|
1914
|
+
right: event.pageX,
|
|
1915
|
+
}, this.tooltip?.nativeElement?.getBoundingClientRect(), Align.auto, VerticalAlign.top, 12);
|
|
1919
1916
|
}
|
|
1920
1917
|
format(input) {
|
|
1921
1918
|
if (input instanceof Date) {
|
|
@@ -1926,15 +1923,18 @@ class TooltipComponent {
|
|
|
1926
1923
|
return format(input);
|
|
1927
1924
|
}
|
|
1928
1925
|
}
|
|
1929
|
-
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 });
|
|
1930
|
-
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 *
|
|
1926
|
+
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 });
|
|
1927
|
+
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 });
|
|
1931
1928
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
1932
1929
|
type: Component,
|
|
1933
|
-
args: [{ selector: 'teta-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *
|
|
1934
|
-
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }]; }, propDecorators: { size: [{
|
|
1930
|
+
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"] }]
|
|
1931
|
+
}], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { size: [{
|
|
1935
1932
|
type: Input
|
|
1936
1933
|
}], config: [{
|
|
1937
1934
|
type: Input
|
|
1935
|
+
}], tooltip: [{
|
|
1936
|
+
type: ViewChild,
|
|
1937
|
+
args: ['tooltip', { static: false, read: ElementRef }]
|
|
1938
1938
|
}] } });
|
|
1939
1939
|
|
|
1940
1940
|
class ZoomableDirective {
|
|
@@ -2716,7 +2716,7 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
|
|
|
2716
2716
|
BlockSeriesComponent,
|
|
2717
2717
|
BlockAreaSeriesComponent,
|
|
2718
2718
|
AnnotationComponent,
|
|
2719
|
-
CrosshairComponent], imports: [CommonModule], exports: [ChartComponent,
|
|
2719
|
+
CrosshairComponent], imports: [CommonModule, LetModule], exports: [ChartComponent,
|
|
2720
2720
|
LegendComponent,
|
|
2721
2721
|
SeriesBaseComponent,
|
|
2722
2722
|
LineSeriesComponent,
|
|
@@ -2725,7 +2725,7 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
|
|
|
2725
2725
|
AreaSeriesComponent,
|
|
2726
2726
|
BlockSeriesComponent,
|
|
2727
2727
|
BlockAreaSeriesComponent] });
|
|
2728
|
-
ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, imports: [CommonModule] });
|
|
2728
|
+
ChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, imports: [CommonModule, LetModule] });
|
|
2729
2729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, decorators: [{
|
|
2730
2730
|
type: NgModule,
|
|
2731
2731
|
args: [{
|
|
@@ -2764,7 +2764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
|
|
|
2764
2764
|
BlockSeriesComponent,
|
|
2765
2765
|
BlockAreaSeriesComponent,
|
|
2766
2766
|
],
|
|
2767
|
-
imports: [CommonModule],
|
|
2767
|
+
imports: [CommonModule, LetModule],
|
|
2768
2768
|
}]
|
|
2769
2769
|
}] });
|
|
2770
2770
|
|