@tetacom/svg-charts 1.3.1 → 1.3.3

package/fesm2015/tetacom-svg-charts.mjs

@@ -404,24 +404,10 @@ class ZoomService {
         }
     }
     setBroadcastChannel(channel) {
-        var _a, _b;
-        if (this.broadcastSub) {
-            (_a = this.broadcastSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        }
         this.broadcastChannel = channel;
-        if ((_b = this.broadcastChannel) === null || _b === void 0 ? void 0 : _b.length) {
-            this.broadcastSub = combineLatest([this._broadcast.subscribeToZoom(this.broadcastChannel), this._chart.config])
-                .pipe(filter(([zoom, config]) => {
-                var _a;
-                return ((_a = zoom.message) === null || _a === void 0 ? void 0 : _a.chartId) !== config.id;
-            }))
-                .subscribe(([zoom, config]) => {
-                this.fireZoom(zoom.message);
-            });
-        }
     }
     getD3Transform(targetDomain, originalDomain, scale, orientation, inverted) {
-        const zoomScale = Math.abs(originalDomain[1] - originalDomain[0]) / Math.abs(targetDomain[1] - targetDomain[0]);
+        const zoomScale = Math.abs(scale(originalDomain[1]) - scale(originalDomain[0])) / Math.abs(scale(targetDomain[1]) - scale(targetDomain[0]));
         let transform = zoomIdentity.scale(zoomScale);
         if (orientation === AxisOrientation.x) {
             if (!!inverted) {
@@ -441,10 +427,6 @@ class ZoomService {
         }
         return transform;
     }
-    ngOnDestroy() {
-        var _a;
-        (_a = this.broadcastSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-    }
 }
 ZoomService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, deps: [{ token: BroadcastService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Injectable });
 ZoomService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomService, providedIn: 'root' });
@@ -864,7 +846,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
     set series(series) {
         var _a;
         this.__series = series;
-        this.markers = (_a = this.__series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => (_ === null || _ === void 0 ? void 0 : _.marker) && (_ === null || _ === void 0 ? void 0 : _.x) !== undefined && (_ === null || _ === void 0 ? void 0 : _.y) !== undefined);
+        this.markers = (_a = this.__series.data) === null || _a === void 0 ? void 0 : _a.filter((_) => (_ === null || _ === void 0 ? void 0 : _.marker) && (_ === null || _ === void 0 ? void 0 : _.x) !== undefined && (_ === null || _ === void 0 ? void 0 : _.y) !== undefined && (_ === null || _ === void 0 ? void 0 : _.x) !== null && (_ === null || _ === void 0 ? void 0 : _.y) !== null);
     }
     get series() {
         return this.__series;
@@ -1599,13 +1581,14 @@ class XAxisComponent {
     constructor(scaleService, _svc) {
         this.scaleService = scaleService;
         this._svc = _svc;
+        this.update$ = new BehaviorSubject(null);
         this._alive = true;
         this.x = this.scaleService.scales.pipe(map((_) => {
             var _a;
             return (_a = _.x.get(this.axis.index)) === null || _a === void 0 ? void 0 : _a.scale;
         }));
-        this.ticks = this.x.pipe(withLatestFrom(this._svc.size), map((_) => {
-            const [x, size] = _;
+        this.ticks = combineLatest([this.x, this.update$]).pipe(withLatestFrom(this._svc.size), map((_) => {
+            const [[x], size] = _;
             const tickSize = x.ticks().map((_) => getTextWidth(this.axis.options.tickFormat ? this.axis.options.tickFormat(_) : this.axis.defaultFormatter()(_), 0.45, 11));
             return x.ticks(size.width / parseInt(d3.max(tickSize), 10) / 10);
         }));
@@ -1618,9 +1601,14 @@ class XAxisComponent {
     ngOnDestroy() {
         this._alive = false;
     }
+    ngOnChanges(changes) {
+        if (changes.hasOwnProperty('axis')) {
+            this.update$.next();
+        }
+    }
 }
 XAxisComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XAxisComponent, deps: [{ token: ScaleService }, { token: ChartService }], target: i0.ɵɵFactoryTarget.Component });
-XAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XAxisComponent, selector: "[teta-x-axis]", inputs: { axis: "axis", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"{x: x | async, ticks: ticks | async} as data\">\n  <svg:g text-anchor=\"middle\" *ngFor=\"let tick of data.ticks\" [attr.transform]=\"'translate('+ data.x(tick) +', 0)'\">\n    <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\" [attr.y]=\"axis.options.opposite ? 0 : 9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\"  text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host .tick{stroke:var(--color-text-20)}\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 });
+XAxisComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: XAxisComponent, selector: "[teta-x-axis]", inputs: { axis: "axis", size: "size" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{x: x | async, ticks: ticks | async} as data\">\n  <svg:g text-anchor=\"middle\" *ngFor=\"let tick of data.ticks\" [attr.transform]=\"'translate('+ data.x(tick) +', 0)'\">\n    <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\" [attr.y]=\"axis.options.opposite ? 0 : 9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\"  text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host .tick{stroke:var(--color-text-20)}\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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: XAxisComponent, decorators: [{
             type: Component,
             args: [{ selector: '[teta-x-axis]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{x: x | async, ticks: ticks | async} as data\">\n  <svg:g text-anchor=\"middle\" *ngFor=\"let tick of data.ticks\" [attr.transform]=\"'translate('+ data.x(tick) +', 0)'\">\n    <text fill=\"var(--color-text-70)\" [attr.dy]=\"axis.options.opposite ? '-0.71em' : '0.71em'\" [attr.y]=\"axis.options.opposite ? 0 : 9\">{{ this.axis.options.tickFormat ? this.axis.options.tickFormat(tick) : this.axis.defaultFormatter()(tick) }}</text>\n    <line stroke=\"var(--color-text-30)\" [attr.y2]=\"axis.options.opposite ? -6 : 6\"></line>\n  </svg:g>\n\n  <svg:g class=\"label-axis font-caption\" [attr.transform]=\"getLabelTransform()\">\n    <text fill=\"var(--color-text-70)\"  text-anchor=\"middle\" dominant-baseline=\"middle\">{{ axis.options.title }}</text>\n  </svg:g>\n</ng-container>\n\n", styles: [":host .tick{stroke:var(--color-text-20)}\n"] }]
@@ -1996,37 +1984,41 @@ class BrushMessage {
 }
 
 class ZoomableDirective {
-    constructor(elementRef, zoomService, chartService, zone) {
+    constructor(elementRef, zoomService, chartService, broadcast, zone) {
         this.elementRef = elementRef;
         this.zoomService = zoomService;
         this.chartService = chartService;
+        this.broadcast = broadcast;
         this.zone = zone;
         this.zoomable = false;
         this.crosshair = false;
         this.alive = true;
         this.currentTransform = zoomIdentity;
         this.zoomed = (event) => {
-            if (event.sourceEvent) {
-                if (Object.keys(event.sourceEvent).length !== 0) {
-                    const origin = this.axis.scale.copy().domain(this.axis.originDomain);
-                    let domain = this.axis.orientation === AxisOrientation.y
-                        ? event.transform.rescaleY(origin).domain()
-                        : event.transform.rescaleX(origin).domain();
-                    const message = new ZoomMessage({
-                        eventType: event.type,
-                        axis: {
-                            index: this.axis.index,
-                            orientation: this.axis.orientation,
-                        },
-                        element: this.elementRef,
-                        domain: domain,
-                        chartId: this.config.id
-                    });
-                    this.zoomService.fireZoom(message);
-                    this.zoomService.broadcastZoom(message);
-                }
-                this.currentTransform = event.transform;
+            if (!event.sourceEvent)
+                return;
+            const origin = this.axis.scale.copy().domain(this.axis.originDomain);
+            let domain = this.axis.orientation === AxisOrientation.y
+                ? event.transform.rescaleY(origin).domain()
+                : event.transform.rescaleX(origin).domain();
+            const message = new ZoomMessage({
+                eventType: event.type,
+                axis: {
+                    index: this.axis.index,
+                    orientation: this.axis.orientation,
+                },
+                element: this.elementRef,
+                domain: domain,
+                chartId: this.config.id
+            });
+            if (event.sourceEvent.type === 'broadcast') {
+                this.zoomService.fireZoom(message);
             }
+            if (event.sourceEvent.type === 'wheeling' || event.sourceEvent instanceof MouseEvent || (window.TouchEvent && event.sourceEvent instanceof TouchEvent)) {
+                this.zoomService.fireZoom(message);
+                this.zoomService.broadcastZoom(message);
+            }
+            this.currentTransform = event.transform;
         };
     }
     ngOnInit() {
@@ -2051,7 +2043,7 @@ class ZoomableDirective {
             var _a, _b, _c;
             if (this._element && this.elementRef !== (zoomed === null || zoomed === void 0 ? void 0 : zoomed.element)
                 && ((_a = zoomed === null || zoomed === void 0 ? void 0 : zoomed.axis) === null || _a === void 0 ? void 0 : _a.index) === this.axis.index
-                && ((_b = zoomed === null || zoomed === void 0 ? void 0 : zoomed.axis) === null || _b === void 0 ? void 0 : _b.orientation) === this.axis.orientation) {
+                && ((_b = zoomed === null || zoomed === void 0 ? void 0 : zoomed.axis) === null || _b === void 0 ? void 0 : _b.orientation) === this.axis.orientation && zoomed.eventType === 'end') {
                 const scale = this.axis.scale.copy().domain(this.axis.originDomain);
                 let transform;
                 if (zoomed.domain === null) {
@@ -2072,7 +2064,7 @@ class ZoomableDirective {
         });
     }
     initZoomListeners() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const enable = (((_b = (_a = this.axis) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.zoom) && ((_c = this.axis) === null || _c === void 0 ? void 0 : _c.options.visible) !== false) ||
             ((_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.zoom) === null || _e === void 0 ? void 0 : _e.enable);
         if (!enable) {
@@ -2083,31 +2075,55 @@ class ZoomableDirective {
             [0, 0],
             [this.size.width, this.size.height],
         ]);
-        if ((_f = this.config.zoom) === null || _f === void 0 ? void 0 : _f.limitTranslateByData) {
+        const min = ((_g = (_f = this.config) === null || _f === void 0 ? void 0 : _f.zoom) === null || _g === void 0 ? void 0 : _g.minTranslate)
+            ? this.axis.scale((_j = (_h = this.config) === null || _h === void 0 ? void 0 : _h.zoom) === null || _j === void 0 ? void 0 : _j.minTranslate)
+            : 0;
+        const max = ((_l = (_k = this.config) === null || _k === void 0 ? void 0 : _k.zoom) === null || _l === void 0 ? void 0 : _l.maxTranslate)
+            ? this.axis.scale((_o = (_m = this.config) === null || _m === void 0 ? void 0 : _m.zoom) === null || _o === void 0 ? void 0 : _o.maxTranslate)
+            : this.axis.orientation === AxisOrientation.x ? this.size.width : this.size.height;
+        if (this.axis.orientation === AxisOrientation.x && ((_p = this.config.zoom) === null || _p === void 0 ? void 0 : _p.type) === ZoomType.x) {
             this.zoom.translateExtent([
-                [0, 0],
-                [this.size.width, this.size.height],
+                [min, 0],
+                [max, this.size.height],
             ]);
         }
-        if ((_g = this.config.zoom) === null || _g === void 0 ? void 0 : _g.wheelDelta) {
-            this.zoom.wheelDelta((_h = this.config.zoom) === null || _h === void 0 ? void 0 : _h.wheelDelta);
+        if (this.axis.orientation === AxisOrientation.y && ((_q = this.config.zoom) === null || _q === void 0 ? void 0 : _q.type) === ZoomType.y) {
+            this.zoom.translateExtent([
+                [0, min],
+                [this.size.width, max],
+            ]);
         }
-        const maxZoom = ((_j = this.config.zoom) === null || _j === void 0 ? void 0 : _j.max)
-            ? (this.axis.extremes[1] - this.axis.extremes[0]) /
-                ((_k = this.config.zoom) === null || _k === void 0 ? void 0 : _k.max)
-            : ((_l = this.config.zoom) === null || _l === void 0 ? void 0 : _l.limitZoomByData)
-                ? 1
-                : 0;
-        const minZoom = ((_m = this.config.zoom) === null || _m === void 0 ? void 0 : _m.min)
+        if ((_r = this.config.zoom) === null || _r === void 0 ? void 0 : _r.wheelDelta) {
+            this.zoom.wheelDelta((_s = this.config.zoom) === null || _s === void 0 ? void 0 : _s.wheelDelta);
+        }
+        const maxZoom = ((_t = this.config.zoom) === null || _t === void 0 ? void 0 : _t.max)
+            ? (this.axis.extremes[1] - this.axis.extremes[0]) / ((_u = this.config.zoom) === null || _u === void 0 ? void 0 : _u.max) : ((_v = this.config.zoom) === null || _v === void 0 ? void 0 : _v.limitZoomByData) ? 1 : 0;
+        if ((_w = this.config.zoom) === null || _w === void 0 ? void 0 : _w.wheelDelta) {
+            this.zoom.wheelDelta((_x = this.config.zoom) === null || _x === void 0 ? void 0 : _x.wheelDelta);
+        }
+        const minZoom = ((_y = this.config.zoom) === null || _y === void 0 ? void 0 : _y.min)
             ? (this.axis.extremes[1] - this.axis.extremes[0]) /
-                ((_o = this.config.zoom) === null || _o === void 0 ? void 0 : _o.min)
+                ((_z = this.config.zoom) === null || _z === void 0 ? void 0 : _z.min)
             : Infinity;
         this.zoom.scaleExtent([maxZoom, minZoom]);
         this.zoom.on('zoom end', this.zoomed);
-        this._element.call(this.zoom).on('dblclick.zoom', null); // Disable dbclick zoom
-        if (((_q = (_p = this.config) === null || _p === void 0 ? void 0 : _p.zoom) === null || _q === void 0 ? void 0 : _q.zoomBehavior) === ZoomBehaviorType.wheel) {
+        this._element.call(this.zoom).on('dblclick.zoom', null);
+        if (((_1 = (_0 = this.config) === null || _0 === void 0 ? void 0 : _0.zoom) === null || _1 === void 0 ? void 0 : _1.zoomBehavior) === ZoomBehaviorType.wheel) {
             this.runWheelTranslate();
         }
+        this.broadcast.subscribeToZoom((_2 = this.config) === null || _2 === void 0 ? void 0 : _2.zoom.syncChannel).subscribe((zoom) => {
+            var _a, _b;
+            if (zoom.message.chartId !== ((_a = this.config) === null || _a === void 0 ? void 0 : _a.id) && zoom.message.axis.orientation === this.axis.orientation && zoom.message.axis.index === this.axis.index) {
+                const scale = this.axis.scale.copy().domain(this.axis.originDomain);
+                const transform = this.zoomService.getD3Transform(zoom.message.domain, this.axis.originDomain, scale, this.axis.orientation, this.axis.options.inverted);
+                if ((_b = zoom.message.style) === null || _b === void 0 ? void 0 : _b.transition) {
+                    this._element.transition().duration(300).call(this.zoom.transform, transform, null, { type: 'broadcast' });
+                }
+                else {
+                    this._element.call(this.zoom.transform, transform, null, { type: 'broadcast' });
+                }
+            }
+        });
     }
     runWheelTranslate() {
         let type = 'start';
@@ -2126,7 +2142,6 @@ class ZoomableDirective {
         });
         const emit = (type, event) => {
             var _a;
-            const origin = this.axis.scale.copy().domain(this.axis.originDomain);
             let transform = zoomIdentity;
             const delta = type === 'end'
                 ? 0
@@ -2140,22 +2155,7 @@ class ZoomableDirective {
                 transform = transform.translate(this.currentTransform.x - delta / 2, 0);
             }
             transform = transform.scale(this.currentTransform.k);
-            let domain = this.axis.orientation === AxisOrientation.y
-                ? transform.rescaleY(origin).domain()
-                : transform.rescaleX(origin).domain();
-            const message = new ZoomMessage({
-                eventType: type,
-                element: this.elementRef,
-                axis: {
-                    index: this.axis.index,
-                    orientation: this.axis.orientation
-                },
-                domain,
-                chartId: this.config.id,
-            });
-            (_a = this._element) === null || _a === void 0 ? void 0 : _a.call(this.zoom.transform, transform);
-            this.zoomService.fireZoom(message);
-            this.zoomService.broadcastZoom(message);
+            (_a = this._element) === null || _a === void 0 ? void 0 : _a.call(this.zoom.transform, transform, null, { type: 'wheeling' });
             this.currentTransform = transform;
         };
         this._element.on('wheel', (event) => {
@@ -2175,14 +2175,14 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: ChartService }, { token: BroadcastService }, { 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ZoomableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaZoomable]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: ChartService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ZoomService }, { type: ChartService }, { type: BroadcastService }, { type: i0.NgZone }]; }, propDecorators: { config: [{
                 type: Input
             }], axis: [{
                 type: Input
@@ -2220,6 +2220,14 @@ class BrushableDirective {
         this._alive = false;
     }
     ngAfterViewInit() {
+        var _a, _b, _c, _d;
+        if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.brush) === null || _b === void 0 ? void 0 : _b.enable) {
+            const brushMessage = new BrushMessage({
+                chartId: this.config.id,
+                selection: [(_c = this.config.brush) === null || _c === void 0 ? void 0 : _c.from, (_d = this.config.brush) === null || _d === void 0 ? void 0 : _d.to],
+            });
+            this.brushService.setBrush(brushMessage);
+        }
     }
     ngOnChanges(changes) {
         var _a, _b;
@@ -2313,7 +2321,7 @@ class BrushableDirective {
                     }
                     this._container.call(this.brush.move, this.selection
                         ? this.selection.map(brushScale)
-                        : domain.map(brushScale), {});
+                        : domain.map(brushScale));
                 }, 0);
             });
         }
@@ -2415,8 +2423,6 @@ class CrosshairComponent {
     }
     ngOnInit() {
         this.transform = this.chartService.pointerMove.pipe(map((event) => {
-            const composedPath = event.composedPath();
-            const classes = composedPath.map((_) => { var _a; return (_a = _.classList) === null || _a === void 0 ? void 0 : _a.contains('crosshair'); }).filter((_) => _);
             return {
                 x: event.type === 'mouseleave' ? -9999 : event.offsetX,
                 y: event.type === 'mouseleave' ? -9999 : event.offsetY