@tetacom/svg-charts 1.4.13 → 1.4.15

package/fesm2020/tetacom-svg-charts.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Injectable, Component, Input, EventEmitter, Directive, Output, HostListener, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, ViewChild, HostBinding, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, lastValueFrom, take, ReplaySubject, combineLatest, tap, takeWhile } from 'rxjs';
+import { BehaviorSubject, Subject, of, withLatestFrom, map, shareReplay, filter, lastValueFrom, take, ReplaySubject, combineLatest, tap, takeWhile, observeOn, animationFrameScheduler } from 'rxjs';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
 import { maxIndex } from 'd3-array';
@@ -2043,10 +2043,10 @@ class TooltipComponent {
     }
 }
 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 });
-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 });
+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         [hidden]=\"!p\"\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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            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"] }]
+            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         [hidden]=\"!p\"\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"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ZoomService }, { type: i3.DomSanitizer }, { type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { size: [{
                 type: Input
             }], config: [{
@@ -2067,7 +2067,7 @@ class ZoomableDirective {
         this.alive = true;
         this.currentTransform = zoomIdentity;
         this.zoomed = (event) => {
-            if (event.sourceEvent) {
+            if (event.sourceEvent && (this.elementRef.nativeElement === event.sourceEvent.target || this.elementRef.nativeElement.contains(event.sourceEvent.target))) {
                 if (Object.keys(event.sourceEvent).length !== 0) {
                     const origin = this.axis.scale.copy().domain(this.axis.originDomain);
                     if (this.axis.options.scaleType.type === ScaleType.band) {
@@ -2098,6 +2098,15 @@ class ZoomableDirective {
             }
         };
     }
+    mouseenter() {
+        // this.initZoomListeners();
+        this.zoom?.on('start zoom end', this.zoomed);
+        this._element?.call(this.zoom).on('dblclick.zoom', null);
+    }
+    mouseleave() {
+        this.zoom?.on('start zoom end', null);
+        this._element?.on('wheel', null);
+    }
     ngOnInit() {
         if (this.axis?.options?.zoom || this.config?.zoom?.enable) {
             this.zoomable = this.config?.zoom?.zoomBehavior === ZoomBehaviorType.move && !this.config?.tooltip?.showCrosshair;
@@ -2109,7 +2118,7 @@ class ZoomableDirective {
         this.initZoomSync();
     }
     ngOnDestroy() {
-        this.zoom?.on('zoom end', null);
+        this.zoom?.on('start zoom end', null);
         this._element?.on('wheel', null);
         this.alive = false;
     }
@@ -2181,8 +2190,8 @@ class ZoomableDirective {
                 : Infinity;
             this.zoom.scaleExtent([maxZoom, minZoom]);
         }
-        this.zoom.on('start zoom end', this.zoomed);
-        this._element.call(this.zoom).on('dblclick.zoom', null);
+        // this.zoom.on('start zoom end', this.zoomed);
+        // this._element.call(this.zoom).on('dblclick.zoom', null);
         if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
             this.runWheelTranslate();
         }
@@ -2259,7 +2268,7 @@ class ZoomableDirective {
     }
 }
 ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ChartService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size" }, host: { properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, ngImport: i0 });
+ZoomableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: ZoomableDirective, selector: "[tetaZoomable]", inputs: { config: "config", axis: "axis", size: "size" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, properties: { "class.zoomable": "this.zoomable", "class.crosshair": "this.crosshair" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, decorators: [{
             type: Directive,
             args: [{
@@ -2277,6 +2286,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }], crosshair: [{
                 type: HostBinding,
                 args: ['class.crosshair']
+            }], mouseenter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], mouseleave: [{
+                type: HostListener,
+                args: ['mouseleave']
             }] } });
 
 class BrushableDirective {
@@ -2541,9 +2556,7 @@ class ChartContainerComponent {
         this.sumSize = (acc, curr) => acc + curr.selfSize;
         this.config = this._svc.config;
         this.size = this._svc.size;
-        this.scales = this._scaleService.scales.pipe(
-        // observeOn(animationFrameScheduler),
-        tetaZoneFull(this._zone), shareReplay({
+        this.scales = this._scaleService.scales.pipe(observeOn(animationFrameScheduler), tetaZoneFull(this._zone), shareReplay({
             bufferSize: 1,
             refCount: true,
         }));