@tetacom/svg-charts 1.3.1 → 1.3.2

package/fesm2020/tetacom-svg-charts.mjs

@@ -424,7 +424,7 @@ class ZoomService {
         }
     }
     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) {
@@ -861,7 +861,7 @@ class LinearSeriesBase extends SeriesBaseComponent {
     }
     set series(series) {
         this.__series = series;
-        this.markers = this.__series.data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined);
+        this.markers = this.__series.data?.filter((_) => _?.marker && _?.x !== undefined && _?.y !== undefined && _?.x !== null && _?.y !== null);
     }
     get series() {
         return this.__series;
@@ -1588,12 +1588,13 @@ 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((_) => {
             return _.x.get(this.axis.index)?.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);
         }));
@@ -1606,9 +1607,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"] }]
@@ -2061,10 +2067,22 @@ class ZoomableDirective {
             [0, 0],
             [this.size.width, this.size.height],
         ]);
-        if (this.config.zoom?.limitTranslateByData) {
+        const min = this.config?.zoom?.minTranslate
+            ? this.axis.scale(this.config?.zoom?.minTranslate)
+            : -Infinity;
+        const max = (this.config?.zoom?.maxTranslate
+            ? this.axis.scale(this.config?.zoom?.maxTranslate) - (this.axis.orientation === AxisOrientation.x ? this.size.width : this.size.height)
+            : Infinity);
+        if (this.axis.orientation === AxisOrientation.x && this.config.zoom.type === ZoomType.x) {
+            this.zoom.translateExtent([
+                [min, -Infinity],
+                [max, Infinity],
+            ]);
+        }
+        if (this.axis.orientation === AxisOrientation.y && this.config.zoom.type === ZoomType.y) {
             this.zoom.translateExtent([
-                [0, 0],
-                [this.size.width, this.size.height],
+                [-Infinity, min],
+                [Infinity, max],
             ]);
         }
         if (this.config.zoom?.wheelDelta) {
@@ -2082,7 +2100,7 @@ class ZoomableDirective {
             : 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
+        this._element.call(this.zoom).on('dblclick.zoom', null);
         if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
             this.runWheelTranslate();
         }
@@ -2388,8 +2406,6 @@ class CrosshairComponent {
     }
     ngOnInit() {
         this.transform = this.chartService.pointerMove.pipe(map((event) => {
-            const composedPath = event.composedPath();
-            const classes = composedPath.map((_) => _.classList?.contains('crosshair')).filter((_) => _);
             return {
                 x: event.type === 'mouseleave' ? -9999 : event.offsetX,
                 y: event.type === 'mouseleave' ? -9999 : event.offsetY