@tetacom/svg-charts 1.2.2 → 1.2.3

package/fesm2020/tetacom-svg-charts.mjs

@@ -791,7 +791,7 @@ class ZoomMessage {
     constructor(options) {
         this.event = options?.event;
         this.axis = options?.axis;
-        this.brushDomain = options.brushDomain;
+        this.domain = options.domain;
         this.chartId = options?.chartId;
         this.style = options?.style;
     }
@@ -946,20 +946,20 @@ class BrushService {
                     (window.TouchEvent &&
                         m.message.event.sourceEvent instanceof TouchEvent));
             }), tap((m) => {
-                const { message: { brushDomain }, } = m;
+                const { message: { domain }, } = m;
                 if ((m.message?.axis.index === 0 &&
                     m.message?.axis.orientation === AxisOrientation.y &&
                     config.brush?.type === BrushType.y) ||
                     (m.message?.axis.orientation === AxisOrientation.x &&
                         config.brush?.type === BrushType.x)) {
                     container.call(this.brush.move, [
-                        brushScale(brushDomain[0]),
-                        brushScale(brushDomain[1]),
+                        brushScale(domain[0]),
+                        brushScale(domain[1]),
                     ]);
                     if (m.message.event.type === 'end') {
                         const brushMessage = new BrushMessage({
                             event: null,
-                            selection: brushDomain,
+                            selection: domain,
                             brushType: config?.brush?.type ?? BrushType.x,
                             brushScale,
                         });
@@ -968,7 +968,7 @@ class BrushService {
                             message: brushMessage,
                         });
                     }
-                    this.selection = brushDomain;
+                    this.selection = domain;
                 }
             }))
                 .subscribe();
@@ -1567,8 +1567,14 @@ class GridlinesComponent {
         this.svc = svc;
         this.chartService = chartService;
         this.config = this.chartService.config;
-        this.tickYValues = this.svc.yScaleMap.pipe(map((_) => _.get(0).ticks()));
-        this.tickXValues = this.svc.xScaleMap.pipe(map((_) => _.get(0).ticks()));
+        this.tickYValues = this.svc.yScaleMap.pipe(map((_) => {
+            const ratio = this.size.height / 40;
+            return _.get(0).ticks(ratio);
+        }));
+        this.tickXValues = this.svc.xScaleMap.pipe(map((_) => {
+            const ratio = this.size.width / 40;
+            return _.get(0).ticks(ratio);
+        }));
         this.y = this.svc.yScaleMap.pipe(map((_) => _.get(0)));
         this.x = this.svc.xScaleMap.pipe(map((_) => _.get(0)));
     }
@@ -1996,7 +2002,7 @@ class ZoomableDirective {
                     const message = new ZoomMessage({
                         event,
                         axis: this.axis,
-                        brushDomain: domain,
+                        domain,
                         chartId: this.config.id,
                     });
                     this.broadcastService.broadcastZoom({
@@ -2083,7 +2089,26 @@ class ZoomableDirective {
                 this.axis.orientation === m.message?.axis?.orientation);
         }), tap$1((m) => {
             if (this.config.id !== m.message?.chartId) {
-                this._element.call(this.zoom.transform, m.message.event.transform, null, {});
+                this.brushScale.domain(this.axis.originDomain);
+                const scale = Math.abs(this.axis.originDomain[1] - this.axis.originDomain[0]) / Math.abs(m.message.domain[1] - m.message.domain[0]);
+                let transform = zoomIdentity.scale(scale);
+                if (this.config?.zoom?.type === ZoomType.x) {
+                    if (this.config.xAxis[0]?.inverted) {
+                        transform = transform.translate(-this.brushScale(m.message.domain[0]), 0);
+                    }
+                    else {
+                        transform = transform.translate(this.brushScale(-m.message.domain[1]), 0);
+                    }
+                }
+                if (this.config?.zoom?.type === ZoomType.y) {
+                    if (this.config.yAxis[0]?.inverted) {
+                        transform = transform.translate(0, -this.brushScale(m.message.domain[0]));
+                    }
+                    else {
+                        transform = transform.translate(0, -this.brushScale(m.message.domain[1]));
+                    }
+                }
+                this._element.call(this.zoom.transform, transform, null, {});
             }
         }))
             .subscribe();
@@ -2180,7 +2205,7 @@ class ZoomableDirective {
                     type,
                 },
                 axis: this.axis,
-                brushDomain: domain,
+                domain,
                 chartId: this.config.id,
             });
             this.zoomService.fireZoom({