@tetacom/svg-charts 1.4.3 → 1.4.6

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));
@@ -1705,6 +1706,12 @@ class PlotlineComponent {
         const drag = this.dragElements
             .on('start drag end', (event, d) => {
             d.value = this.scale.invert(event[AxisOrientation[this.axis.orientation]]);
+            if (d.max !== null && d.max !== undefined && d.value >= d.max) {
+                d.value = d.max;
+            }
+            if (d.min !== null && d.min !== undefined && d.value <= d.min) {
+                d.value = d.min;
+            }
             this.emit({
                 event,
                 target: d,
@@ -2020,7 +2027,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({
@@ -2030,7 +2040,7 @@ class ZoomableDirective {
                             orientation: this.axis.orientation,
                         },
                         element: this.elementRef,
-                        domain: domain,
+                        domain,
                         chartId: this.config.id
                     });
                     this.zoomService.fireZoom(message);
@@ -2051,7 +2061,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;
     }
@@ -2085,28 +2095,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]) /
@@ -2120,7 +2130,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();
@@ -2158,6 +2168,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,