@tetacom/svg-charts 1.4.2 → 1.4.5

package/fesm2020/tetacom-svg-charts.mjs

@@ -459,10 +459,9 @@ const getTextWidth = (inputText, backupRatio = 0.5, fontSize = 10) => {
     return fontSize * backupRatio * text.length;
 };
 
-function generateTicks(extremes) {
+function generateTicks(extremes, count = 10) {
     const [min, max] = extremes;
-    const tickCount = 10;
-    const tickStep = (max - min) / tickCount;
+    const tickStep = (max - min) / count;
     const ticks = d3
         .range(min, max + tickStep, tickStep)
         .filter((step) => step <= max);
@@ -1581,13 +1580,15 @@ class GridlinesComponent {
         this.svc = svc;
         this.chartService = chartService;
         this.config = this.chartService.config;
-        this.tickYValues = this.svc.scales.pipe(map((_) => {
+        this.tickYValues = this.svc.scales.pipe(withLatestFrom(this.config), map((_) => {
+            const [scales, config] = _;
             const ratio = this.size.height / 40;
-            return _.y.get(0)?.scale.ticks(ratio);
+            return config.gridLines?.y?.ticksCount != null ? generateTicks(scales.y.get(0).scale.domain(), config.gridLines?.y?.ticksCount) : scales.y.get(0)?.scale.ticks(ratio);
         }));
-        this.tickXValues = this.svc.scales.pipe(map((_) => {
+        this.tickXValues = this.svc.scales.pipe(withLatestFrom(this.config), map((_) => {
+            const [scales, config] = _;
             const ratio = this.size.width / 40;
-            return _.x.get(0)?.scale.ticks(ratio);
+            return config.gridLines?.x?.ticksCount != null ? generateTicks(scales.x.get(0).originDomain, config.gridLines?.x?.ticksCount) : scales.x.get(0)?.scale.ticks(ratio);
         }));
         this.y = this.svc.scales.pipe(map((_) => _.y.get(0)?.scale));
         this.x = this.svc.scales.pipe(map((_) => _.x.get(0)?.scale));
@@ -2002,6 +2003,7 @@ class BrushMessage {
     constructor(options) {
         this.chartId = options?.chartId;
         this.selection = options?.selection;
+        this.mode = options?.mode;
     }
 }
 
@@ -2019,7 +2021,10 @@ class ZoomableDirective {
             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
+                    if (this.axis.options.scaleType.type === ScaleType.band) {
+                        return;
+                    }
+                    const domain = this.axis.orientation === AxisOrientation.y
                         ? event.transform.rescaleY(origin).domain()
                         : event.transform.rescaleX(origin).domain();
                     const message = new ZoomMessage({
@@ -2029,7 +2034,7 @@ class ZoomableDirective {
                             orientation: this.axis.orientation,
                         },
                         element: this.elementRef,
-                        domain: domain,
+                        domain,
                         chartId: this.config.id
                     });
                     this.zoomService.fireZoom(message);
@@ -2050,7 +2055,7 @@ class ZoomableDirective {
         this.initZoomSync();
     }
     ngOnDestroy() {
-        this.zoom?.on('start zoom end', null);
+        this.zoom?.on('zoom end', null);
         this._element?.on('wheel', null);
         this.alive = false;
     }
@@ -2084,28 +2089,28 @@ class ZoomableDirective {
             [0, 0],
             [this.size.width, this.size.height],
         ]);
-        const min = this.config?.zoom?.minTranslate
+        const min = this.config?.zoom?.minTranslate != null
             ? 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)
+        const max = (this.config?.zoom?.maxTranslate != null
+            ? this.axis.scale(this.config?.zoom?.maxTranslate)
             : Infinity);
         if (this.axis.orientation === AxisOrientation.x && this.config.zoom.type === ZoomType.x) {
             this.zoom.translateExtent([
-                [min, -Infinity],
-                [max, Infinity],
+                [Math.min(min, max), -Infinity],
+                [Math.max(min, max), Infinity],
             ]);
         }
         if (this.axis.orientation === AxisOrientation.y && this.config.zoom.type === ZoomType.y) {
             this.zoom.translateExtent([
-                [-Infinity, min],
-                [Infinity, max],
+                [-Infinity, Math.min(min, max)],
+                [Infinity, Math.max(min, max)],
             ]);
         }
         if (this.config.zoom?.wheelDelta) {
             this.zoom.wheelDelta(this.config.zoom?.wheelDelta);
         }
-        if (this.axis.options.scaleType.type === ScaleType.band) {
+        if (this.axis.options.scaleType.type !== ScaleType.band) {
             const extremes = this.axis.extremes;
             const maxZoom = this.config.zoom?.max
                 ? (extremes[1] - extremes[0]) /
@@ -2119,7 +2124,7 @@ class ZoomableDirective {
                 : Infinity;
             this.zoom.scaleExtent([maxZoom, minZoom]);
         }
-        this.zoom.on('zoom end', this.zoomed);
+        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();
@@ -2157,6 +2162,13 @@ class ZoomableDirective {
             let domain = this.axis.orientation === AxisOrientation.y
                 ? transform.rescaleY(origin).domain()
                 : transform.rescaleX(origin).domain();
+            const extent = this.axis.options?.inverted ? domain : [...domain].reverse();
+            if (extent[0] <= this.config.zoom?.minTranslate) {
+                return;
+            }
+            if (extent[1] >= this.config.zoom?.maxTranslate) {
+                return;
+            }
             const message = new ZoomMessage({
                 eventType: type,
                 element: this.elementRef,
@@ -2238,6 +2250,7 @@ class BrushableDirective {
             const brushMessage = new BrushMessage({
                 chartId: this.config.id,
                 selection: [this.config?.brush?.from, this.config?.brush?.to],
+                mode: 'init'
             });
             this.brushService.setBrush(brushMessage);
         }
@@ -2315,6 +2328,7 @@ class BrushableDirective {
                     const brushMessage = new BrushMessage({
                         chartId: this.config.id,
                         selection: [brushScale.invert(from), brushScale.invert(to)],
+                        mode: _.mode
                     });
                     this.brushService.setBrush(brushMessage);
                 }
@@ -2331,7 +2345,7 @@ class BrushableDirective {
                     }
                     this._container.call(this.brush.move, this.selection
                         ? this.selection.map(brushScale)
-                        : domain.map(brushScale));
+                        : domain.map(brushScale), {});
                 }, 0);
             });
         }