@tetacom/svg-charts 1.2.9 → 1.2.12

package/fesm2015/tetacom-svg-charts.mjs

@@ -453,7 +453,7 @@ class AxisSizeBuilder {
     build(settings) {
         let finalPadding = this.basePadding;
         if (settings.orientation === AxisOrientation.y) {
-            const formatter = settings.defaultFormatter();
+            const formatter = settings.options.tickFormat || settings.defaultFormatter();
             finalPadding += settings.options.title ? this.titlePadding : 0;
             const scale = settings.defaultScale();
             const ticks = scale().domain(settings.extremes).ticks(20);
@@ -2004,7 +2004,7 @@ class ZoomableDirective {
         }
     }
     ngAfterViewInit() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         const enable = (((_b = (_a = this.axis) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.zoom) && ((_c = this.axis) === null || _c === void 0 ? void 0 : _c.options.visible) !== false) ||
             ((_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.zoom) === null || _e === void 0 ? void 0 : _e.enable);
         if (!enable) {
@@ -2023,31 +2023,34 @@ class ZoomableDirective {
                     [this.size.width, this.size.height],
                 ]);
             }
+            if ((_g = this.config.zoom) === null || _g === void 0 ? void 0 : _g.wheelDelta) {
+                this.zoom.wheelDelta((_h = this.config.zoom) === null || _h === void 0 ? void 0 : _h.wheelDelta);
+            }
             this.zoomService.axisHashMap.set(this.hash, this.axis);
             this.zoomService.elementHashMap.set(this.hash, this._element);
             this.zoomService.scaleHashMap.set(this.hash, this.scale);
             this.zoomService.zoomHashMap.set(this.hash, this.zoom);
-            this.zoomService.setBroadcastChannel((_g = this.config) === null || _g === void 0 ? void 0 : _g.zoom.syncChannel);
-            const maxZoom = ((_h = this.config.zoom) === null || _h === void 0 ? void 0 : _h.max)
+            this.zoomService.setBroadcastChannel((_j = this.config) === null || _j === void 0 ? void 0 : _j.zoom.syncChannel);
+            const maxZoom = ((_k = this.config.zoom) === null || _k === void 0 ? void 0 : _k.max)
                 ? (this.axis.extremes[1] - this.axis.extremes[0]) /
-                    ((_j = this.config.zoom) === null || _j === void 0 ? void 0 : _j.max)
-                : ((_k = this.config.zoom) === null || _k === void 0 ? void 0 : _k.limitZoomByData)
+                    ((_l = this.config.zoom) === null || _l === void 0 ? void 0 : _l.max)
+                : ((_m = this.config.zoom) === null || _m === void 0 ? void 0 : _m.limitZoomByData)
                     ? 1
                     : 0;
-            const minZoom = ((_l = this.config.zoom) === null || _l === void 0 ? void 0 : _l.min)
+            const minZoom = ((_o = this.config.zoom) === null || _o === void 0 ? void 0 : _o.min)
                 ? (this.axis.extremes[1] - this.axis.extremes[0]) /
-                    ((_m = this.config.zoom) === null || _m === void 0 ? void 0 : _m.min)
+                    ((_p = this.config.zoom) === null || _p === void 0 ? void 0 : _p.min)
                 : Infinity;
             this.zoom.scaleExtent([maxZoom, minZoom]);
             this.zoom.on('zoom end', this.zoomed);
             this._element.call(this.zoom).on('dblclick.zoom', null); // Disable dbclick zoom
             this.chartService.emitZoomInstance(this.zoomService);
-            if (((_p = (_o = this.config) === null || _o === void 0 ? void 0 : _o.zoom) === null || _p === void 0 ? void 0 : _p.zoomBehavior) === ZoomBehaviorType.wheel) {
+            if (((_r = (_q = this.config) === null || _q === void 0 ? void 0 : _q.zoom) === null || _r === void 0 ? void 0 : _r.zoomBehavior) === ZoomBehaviorType.wheel) {
                 this.runWheelZoom();
             }
         }
         // Subscribe to zoom events
-        this.broadcastService.subscribeToZoom((_q = this.config) === null || _q === void 0 ? void 0 : _q.zoom.syncChannel).pipe(takeWhile((_) => this.alive), tap$1((m) => {
+        this.broadcastService.subscribeToZoom((_s = this.config) === null || _s === void 0 ? void 0 : _s.zoom.syncChannel).pipe(takeWhile((_) => this.alive), tap$1((m) => {
             var _a, _b, _c, _d, _e;
             if (this.axis.index === ((_b = (_a = m.message) === null || _a === void 0 ? void 0 : _a.axis) === null || _b === void 0 ? void 0 : _b.index) && this.axis.orientation === ((_d = (_c = m.message) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.orientation)) {
                 const currentZoom = d3.zoomTransform(this._element.node());
@@ -2089,11 +2092,11 @@ class ZoomableDirective {
         }))
             .subscribe();
         // Subscribe to brush events x or y
-        if ((((_r = this.config.brush) === null || _r === void 0 ? void 0 : _r.type) === BrushType.x &&
+        if ((((_t = this.config.brush) === null || _t === void 0 ? void 0 : _t.type) === BrushType.x &&
             this.axis.orientation === AxisOrientation.x) ||
-            (((_s = this.config.brush) === null || _s === void 0 ? void 0 : _s.type) === BrushType.y &&
+            (((_u = this.config.brush) === null || _u === void 0 ? void 0 : _u.type) === BrushType.y &&
                 this.axis.orientation === AxisOrientation.y)) {
-            this.broadcastService.subscribeToBrush((_t = this.config) === null || _t === void 0 ? void 0 : _t.zoom.syncChannel)
+            this.broadcastService.subscribeToBrush((_v = this.config) === null || _v === void 0 ? void 0 : _v.zoom.syncChannel)
                 .pipe(combineLatestWith(this.chartService.size), takeWhile((_) => this.alive), filter((data) => {
                 const [m] = data;
                 return Boolean(m.message.selection);
@@ -2475,9 +2478,9 @@ class ChartContainerComponent {
             const nonOppositeOffsetY = yAxesArray.filter(nonOppositeFilter(axis));
             const oppositeOffsetX = xAxesArray.filter(oppositeFilter(axis));
             const nonOppositeOffsetX = xAxesArray.filter(nonOppositeFilter(axis));
-            const oppositeTranslateY = oppositeOffsetY.reduce((acc, curr) => acc + curr.selfSize, (_a = config.bounds) === null || _a === void 0 ? void 0 : _a.top);
+            const oppositeTranslateY = oppositeOffsetY.reduce((acc, curr) => acc + curr.selfSize, (_a = config.bounds) === null || _a === void 0 ? void 0 : _a.right);
             const nonOppisteTranslateY = nonOppositeOffsetY.reduce((acc, curr) => acc + curr.selfSize, (_b = config.bounds) === null || _b === void 0 ? void 0 : _b.left);
-            const oppositeTranslateX = oppositeOffsetX.reduce((acc, curr) => acc + curr.selfSize, (_c = config.bounds) === null || _c === void 0 ? void 0 : _c.right);
+            const oppositeTranslateX = oppositeOffsetX.reduce((acc, curr) => acc + curr.selfSize, (_c = config.bounds) === null || _c === void 0 ? void 0 : _c.top);
             const nonOppisteTranslateX = nonOppositeOffsetX.reduce((acc, curr) => acc + curr.selfSize, (_d = config.bounds) === null || _d === void 0 ? void 0 : _d.bottom);
             const left = yAxesArray
                 .filter((_) => _.options.visible && _.options.opposite !== true)
@@ -2684,10 +2687,10 @@ class ChartComponent {
     }
 }
 ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartComponent, deps: [{ token: ChartService }, { token: ZoomService }, { token: ScaleService }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove", zoomServiceInstance: "zoomServiceInstance" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ChartComponent, selector: "teta-svg-chart", inputs: { config: "config" }, outputs: { pointerMove: "pointerMove", plotBandsMove: "plotBandsMove", plotBandClick: "plotBandClick", plotBandContextMenu: "plotBandContextMenu", plotLinesMove: "plotLinesMove", pointMove: "pointMove", chartClick: "chartClick", chartContextMenu: "chartContextMenu", annotationContextMenu: "annotationContextMenu", annotationClick: "annotationClick", annotationMove: "annotationMove", zoomServiceInstance: "zoomServiceInstance" }, providers: [ChartService, ZoomService, ScaleService, BrushService], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto justify-content-center\">\n    <span class=\"font-body-3 color-text-40\" style=\"overflow: hidden; text-overflow: ellipsis; text-align: center; white-space: nowrap\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartContainerComponent, selector: "teta-chart-container" }, { kind: "component", type: LegendComponent, selector: "teta-legend", inputs: ["series"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-svg-chart', providers: [ChartService, ZoomService, ScaleService, BrushService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto align-center justify-content-center\">\n    <span class=\"font-body-3 color-text-40\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
+            args: [{ selector: 'teta-svg-chart', providers: [ChartService, ZoomService, ScaleService, BrushService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{\n  hasSeriesData: hasSeriesData | async,\n  svcConfig: svcConfig | async\n} as data\">\n  <ng-container *ngIf=\"data.hasSeriesData === true else noData\">\n    <div class=\"column column_auto\">\n      <teta-chart-container class=\"chart-container position-relative\"></teta-chart-container>\n    </div>\n    <teta-legend *ngIf=\"data.svcConfig.legend?.enable === true\" [series]=\"data.svcConfig.series\"></teta-legend>\n  </ng-container>\n</ng-container>\n<ng-template #noData>\n  <div class=\"column column_auto justify-content-center\">\n    <span class=\"font-body-3 color-text-40\" style=\"overflow: hidden; text-overflow: ellipsis; text-align: center; white-space: nowrap\">\u0414\u0430\u043D\u043D\u044B\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044E\u0442</span>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:flex;flex-direction:column;height:100%;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: ChartService }, { type: ZoomService }, { type: ScaleService }]; }, propDecorators: { pointerMove: [{
                 type: Output
             }], plotBandsMove: [{