@tetacom/svg-charts 1.1.18 → 1.1.21

package/fesm2020/tetacom-svg-charts.mjs

@@ -20,14 +20,14 @@ var ZoomType;
 
 class ChartBounds {
     constructor(options) {
-        this.top = 30;
-        this.right = 30;
+        this.top = 0;
+        this.right = 0;
         this.bottom = 0;
         this.left = 0;
-        this.top = options?.top || this.top;
-        this.right = options?.right || this.right;
-        this.bottom = options?.bottom || this.bottom;
-        this.left = options?.left || this.left;
+        this.top = options?.top || 0;
+        this.right = options?.right || 0;
+        this.bottom = options?.bottom || 0;
+        this.left = options?.left || 0;
     }
 }
 
@@ -133,11 +133,9 @@ class ChartService {
         this.annotationEvent$ = new Subject();
         this.annotationMove$ = new Subject();
         this.id = of((Date.now() + Math.random()).toString(36));
-        this.config = this.config$
-            .asObservable()
-            .pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), shareReplay({
+        this.config = this.config$.asObservable().pipe(withLatestFrom(this.id), map(this.setDefaults), map(this.setPreparationData), shareReplay({
             bufferSize: 1,
-            refCount: true
+            refCount: true,
         }));
         this.size = this.size$.asObservable();
         this.pointerMove = this.pointerMove$.asObservable();
@@ -147,8 +145,12 @@ class ChartService {
         this.pointMove = this.pointMove$.asObservable();
         this.chartClick = this.chartClick$.asObservable();
         this.chartContextMenu = this.chartContextMenu$.asObservable();
-        this.annotationClick = this.annotationEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'click'));
-        this.annotationContextMenu = this.annotationEvent$.asObservable().pipe(filter((_) => _?.event?.type === 'contextmenu'));
+        this.annotationClick = this.annotationEvent$
+            .asObservable()
+            .pipe(filter((_) => _?.event?.type === 'click'));
+        this.annotationContextMenu = this.annotationEvent$
+            .asObservable()
+            .pipe(filter((_) => _?.event?.type === 'contextmenu'));
         this.annotationMove = this.annotationMove$.asObservable();
         this.plotBandClick = this.plotBandEvent$
             .asObservable()
@@ -219,6 +221,22 @@ class ChartService {
                 id: _.id ?? index,
             };
         });
+        const oppositeYCount = config.yAxis?.filter((_) => _.opposite);
+        const oppositeXCount = config.xAxis?.filter((_) => _.opposite);
+        const nonOppositeYCount = config.yAxis?.filter((_) => !_.opposite);
+        const nonOppositeXCount = config.xAxis?.filter((_) => !_.opposite);
+        if (nonOppositeXCount?.length > 1) {
+            config.bounds.bottom = 0;
+        }
+        if (oppositeXCount?.length > 1) {
+            config.bounds.top = 0;
+        }
+        if (nonOppositeYCount?.length > 1) {
+            config.bounds.left = 0;
+        }
+        if (oppositeYCount?.length > 1) {
+            config.bounds.right = 0;
+        }
         config.tooltip = Object.assign({}, defaultChartConfig().tooltip, config.tooltip);
         config.zoom.syncChannel = config.zoom?.syncChannel ?? id;
         return config;
@@ -483,7 +501,7 @@ class ScaleService {
             return map;
         }), shareReplay({
             bufferSize: 1,
-            refCount: true
+            refCount: true,
         }));
         this.yAxisMap = combineLatest([
             this.chartService.size,
@@ -497,7 +515,7 @@ class ScaleService {
             return map;
         }), shareReplay({
             bufferSize: 1,
-            refCount: true
+            refCount: true,
         }));
         this.xScaleMap = combineLatest([
             this.chartService.size,
@@ -521,7 +539,7 @@ class ScaleService {
                 let scale = this.scaleMapping
                     .get(axis.options.scaleType.type)()
                     .domain(domain)
-                    .range([0, finalWidth]);
+                    .range([0, finalWidth - config.bounds.right]);
                 if (axis.options.niceTicks) {
                     scale.nice();
                 }
@@ -550,7 +568,7 @@ class ScaleService {
             return map;
         }), shareReplay({
             bufferSize: 1,
-            refCount: true
+            refCount: true,
         }));
         this.yScaleMap = combineLatest([
             this.chartService.size,
@@ -565,7 +583,11 @@ class ScaleService {
             const bottom = [...xAxes.values()]
                 .filter((_) => _.options?.visible && _.options?.opposite !== true)
                 .reduce((acc, cur) => acc + cur.selfSize, 0);
-            const finalHeight = (size.height || 0) - top - bottom;
+            const finalHeight = (size.height || 0) -
+                top -
+                bottom -
+                config?.bounds?.top -
+                config.bounds?.bottom;
             yAxes.forEach((axis) => {
                 let domain = axis.extremes;
                 if (axis.orientation === AxisOrientation.y) {
@@ -577,7 +599,7 @@ class ScaleService {
                 const scale = this.scaleMapping
                     .get(axis.options.scaleType.type)()
                     .domain(domain)
-                    .range([0, finalHeight]);
+                    .range([config.bounds.top, finalHeight]);
                 if (axis.options.niceTicks) {
                     scale.nice();
                 }
@@ -606,7 +628,7 @@ class ScaleService {
             return map;
         }), shareReplay({
             bufferSize: 1,
-            refCount: true
+            refCount: true,
         }));
     }
 }
@@ -1846,7 +1868,7 @@ class ZoomableDirective {
     }
     ngOnInit() {
         if (this.axis?.options?.zoom || this.config?.zoom?.enable) {
-            this.zoomable = true;
+            this.zoomable = this.config?.zoom?.zoomBehavior === ZoomBehaviorType.move;
         }
     }
     ngAfterViewInit() {
@@ -1871,14 +1893,13 @@ class ZoomableDirective {
             const minZoom = this.config.zoom?.min ? (this.zoomAxis.extremes[1] - this.zoomAxis.extremes[0]) / this.config.zoom?.min : Infinity;
             this.zoom.scaleExtent([maxZoom, minZoom]);
             this.zoom.on('start zoom end', this.zoomed);
-            this._element.call(this.zoom)
-                .on('dblclick.zoom', null);
+            this._element.call(this.zoom).on('dblclick.zoom', null);
             if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
                 let wheeling;
                 let type = 'start';
                 const origin = this.brushScale.copy().domain(this.zoomAxis.extremes);
                 this.zoom
-                    .filter((event) => event.ctrlKey)
+                    .filter((event) => event.ctrlKey && event.type === 'wheel')
                     .wheelDelta((event) => {
                     const delta = this.config?.zoom.type === ZoomType.x ? -event.deltaX : -event.deltaY;
                     return delta * 0.002;
@@ -1892,10 +1913,10 @@ class ZoomableDirective {
                         let transform = zoomIdentity;
                         const delta = type === 'end' ? 0 : this.config.zoom?.type === ZoomType.y ? event.deltaY : event.deltaX;
                         if (this.config.zoom?.type === ZoomType.y) {
-                            transform = transform.translate(0, this.currentTransform.y - delta);
+                            transform = transform.translate(0, this.currentTransform.y - delta / 2);
                         }
                         if (this.config.zoom?.type === ZoomType.x) {
-                            transform = transform.translate(this.currentTransform.x - delta, 0);
+                            transform = transform.translate(this.currentTransform.x - delta / 2, 0);
                         }
                         transform = transform.scale(this.currentTransform.k);
                         let domain = this.config.zoom?.type === ZoomType.y ?
@@ -1934,7 +1955,7 @@ class ZoomableDirective {
                             type = 'end';
                             emit(type);
                             type = 'start';
-                        }, 400);
+                        }, 300);
                     });
                 });
             }
@@ -1983,7 +2004,7 @@ class ZoomableDirective {
         if (m.message?.brushType === BrushType.y) {
             transform = transform.translate(0, -this.brushScale(s[0]));
         }
-        this._element.transition().duration(150).call(this.zoom.transform, transform, null, {});
+        this._element.call(this.zoom.transform, transform, null, {});
     }
 }
 ZoomableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ZoomableDirective, deps: [{ token: i0.ElementRef }, { token: ZoomService }, { token: BroadcastService }, { token: ChartService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
@@ -2054,30 +2075,28 @@ class ChartContainerComponent {
         this.xAxisMap = this._scaleService.xAxisMap;
         this.yScaleMap = this._scaleService.yScaleMap.pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), tap(() => this._cdr.detectChanges()), shareReplay({
             bufferSize: 1,
-            refCount: true
+            refCount: true,
         }));
         this.xScaleMap = this._scaleService.xScaleMap.pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), tap(() => this._cdr.detectChanges()), shareReplay({
             bufferSize: 1,
-            refCount: true
+            refCount: true,
         }));
         this.brushScale = combineLatest([
             this._scaleService.xScaleMap,
             this._scaleService.yScaleMap,
         ]).pipe(withLatestFrom(this.config), map((data) => {
             const [[x, y], config] = data;
-            return config.brush?.type === BrushType.x
-                ? x.get(0)
-                : y.get(0);
+            return config.brush?.type === BrushType.x ? x.get(0) : y.get(0);
         }), shareReplay({
             bufferSize: 1,
-            refCount: true
+            refCount: true,
         }));
         this.visibleRect = combineLatest([
             this.size,
             this.xAxisMap,
-            this.yAxisMap
-        ]).pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), map((data) => {
-            const [size, x, y] = data;
+            this.yAxisMap,
+        ]).pipe(throttleTime(0, animationFrameScheduler, { trailing: true }), withLatestFrom(this.config), map((data) => {
+            const [[size, x, y], config] = data;
             const yAxesArray = [...y.values()];
             const xAxesArray = [...x.values()];
             const left = yAxesArray
@@ -2093,10 +2112,18 @@ class ChartContainerComponent {
                 .filter((_) => _.options.opposite && _.options.visible)
                 .reduce(this.sumSize, 0);
             return {
-                x: left,
-                y: top,
-                width: size.width - left - right,
-                height: size.height - top - bottom,
+                x: left + config.bounds?.left,
+                y: top + config.bounds?.top,
+                width: size.width -
+                    left -
+                    right -
+                    config.bounds?.left -
+                    config.bounds?.right,
+                height: size.height -
+                    top -
+                    bottom -
+                    config.bounds?.top -
+                    config.bounds?.bottom,
             };
         }), tap(() => setTimeout(() => this._cdr.detectChanges())));
     }
@@ -2118,8 +2145,8 @@ class ChartContainerComponent {
         this._observer.disconnect();
     }
     getTranslate(axis, size) {
-        return combineLatest([this.xAxisMap, this.yAxisMap]).pipe(map((data) => {
-            const [x, y] = data;
+        return combineLatest([this.xAxisMap, this.yAxisMap]).pipe(withLatestFrom(this.config), map((data) => {
+            const [[x, y], config] = data;
             const xAxesArray = [...x.values()];
             const yAxesArray = [...y.values()];
             const oppositeFilter = this.filterPositionMap.get(true);
@@ -2134,10 +2161,10 @@ class ChartContainerComponent {
             const nonOppisteTranslateX = nonOppositeOffsetX.reduce((acc, curr) => acc + curr.selfSize, 0);
             const left = yAxesArray
                 .filter((_) => _.options.visible && _.options.opposite !== true)
-                .reduce((acc, curr) => acc + curr.selfSize, 0);
+                .reduce((acc, curr) => acc + curr.selfSize, config.bounds?.left);
             const top = xAxesArray
                 .filter((_) => _.options.visible && _.options.opposite === true)
-                .reduce((acc, curr) => acc + curr.selfSize, 0);
+                .reduce((acc, curr) => acc + curr.selfSize, config.bounds?.top);
             if (axis.orientation === AxisOrientation.x) {
                 return `translate(${left}, ${axis.options.opposite
                     ? oppositeTranslateX
@@ -2161,8 +2188,8 @@ class ChartContainerComponent {
             event: event,
             target: {
                 x: x.invert(event.offsetX),
-                y: y.invert(event.offsetY)
-            }
+                y: y.invert(event.offsetY),
+            },
         });
     }
     contextMenu(event, xScales, yScales) {
@@ -2172,8 +2199,8 @@ class ChartContainerComponent {
             event: event,
             target: {
                 x: x.invert(event.offsetX),
-                y: y.invert(event.offsetY)
-            }
+                y: y.invert(event.offsetY),
+            },
         });
     }
     mouseMove(event) {