@tetacom/svg-charts 1.1.20 → 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,
         }));
     }
 }
@@ -2053,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
@@ -2092,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())));
     }
@@ -2117,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);
@@ -2133,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
@@ -2160,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) {
@@ -2171,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) {