@tetacom/svg-charts 1.4.1 → 1.4.3

package/fesm2020/tetacom-svg-charts.mjs

@@ -84,7 +84,7 @@ var ScaleType;
     ScaleType[ScaleType["pow"] = 3] = "pow";
     ScaleType[ScaleType["sqrt"] = 4] = "sqrt";
     ScaleType[ScaleType["time"] = 5] = "time";
-    ScaleType[ScaleType["category"] = 6] = "category";
+    ScaleType[ScaleType["band"] = 6] = "band";
 })(ScaleType || (ScaleType = {}));
 
 const defaultAxisConfig = {
@@ -137,8 +137,6 @@ const defaultSeriesConfig = () => ({
 
 class ChartService {
     constructor() {
-        // public zoomInstance: Observable<ZoomService>;
-        // public brushInstance: Observable<BrushService>;
         this.config$ = new BehaviorSubject(defaultChartConfig());
         this.size$ = new BehaviorSubject(null);
         this.pointerMove$ = new Subject();
@@ -349,8 +347,6 @@ class ChartService {
         return config;
     }
 }
-// private zoomInstance$ = new Subject<ZoomService>();
-// private brushInstance$ = new Subject<BrushService>();
 ChartService._hiddenSeriesPostfix = 'hidden_series';
 ChartService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 ChartService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartService, providedIn: 'root' });
@@ -484,8 +480,14 @@ class AxisSizeBuilder {
         if (settings.orientation === AxisOrientation.y) {
             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);
+            const scale = settings.defaultScale()();
+            scale.domain(settings.extremes);
+            if (settings.options.scaleType.type === ScaleType.band) {
+                scale.ticks = (ticks) => {
+                    return scale.domain();
+                };
+            }
+            const ticks = scale.ticks(20);
             const maxElementLengthIndex = maxIndex(ticks, (_) => formatter(_).length);
             finalPadding += getTextWidth(formatter(ticks[maxElementLengthIndex]), this.backupRatio);
         }
@@ -514,6 +516,9 @@ class ExtremesBuilder {
             }, []);
             const accessor = this.extentAccessorMap.get(settings.orientation);
             this.extremes = data.length > 1 ? d3.extent(data, accessor) : [0, 0];
+            if (settings.options.scaleType.type === ScaleType.band) {
+                this.extremes = data.map(accessor);
+            }
         }
         if (hasMin) {
             this.extremes[0] = options?.min;
@@ -535,14 +540,16 @@ class Axis {
             .set(ScaleType.log, d3.format('~s'))
             .set(ScaleType.symlog, d3.format('~s'))
             .set(ScaleType.pow, d3.format('~s'))
-            .set(ScaleType.sqrt, d3.format('~s'));
+            .set(ScaleType.sqrt, d3.format('~s'))
+            .set(ScaleType.band, (_) => { return _; });
         this.defaultScales = new Map()
             .set(ScaleType.linear, d3.scaleLinear)
             .set(ScaleType.log, d3.scaleLog)
             .set(ScaleType.symlog, d3.scaleSymlog)
             .set(ScaleType.pow, d3.scalePow)
             .set(ScaleType.sqrt, d3.scaleSqrt)
-            .set(ScaleType.time, d3.scaleTime);
+            .set(ScaleType.time, d3.scaleTime)
+            .set(ScaleType.band, d3.scaleBand);
         this.chartConfig = config;
     }
     /**
@@ -597,12 +604,17 @@ class Axis {
     }
     setScale(scale) {
         this._scale = scale;
+        if (this.options.scaleType.type === ScaleType.band) {
+            this._scale.ticks = () => {
+                return this._scale.domain();
+            };
+        }
     }
     setSelfSize() {
         this._selfSize = new AxisSizeBuilder().build(this);
     }
     setTicksValues() {
-        this._ticksValues = generateTicks(this._extremes);
+        //this._ticksValues = generateTicks(this._extremes);
     }
     setOptions() {
         const options = this.orientation === AxisOrientation.x
@@ -651,11 +663,11 @@ class ScaleService {
         this.scaleMapping = new Map()
             .set(ScaleType.linear, d3.scaleLinear)
             .set(ScaleType.time, d3.scaleTime)
-            .set(ScaleType.category, d3.scaleOrdinal)
             .set(ScaleType.log, d3.scaleLog)
             .set(ScaleType.symlog, d3.scaleSymlog)
             .set(ScaleType.pow, d3.scalePow)
-            .set(ScaleType.sqrt, d3.scaleSqrt);
+            .set(ScaleType.sqrt, d3.scaleSqrt)
+            .set(ScaleType.band, d3.scaleBand);
         this.scales = combineLatest([
             this.chartService.size,
             this.chartService.config,
@@ -693,6 +705,11 @@ class ScaleService {
                 if (axis.options.scaleType.type === ScaleType.log) {
                     scale.base(axis.options.scaleType.base);
                 }
+                if (axis.options.scaleType.type === ScaleType.band) {
+                    scale.paddingInner(0.1);
+                    scale.paddingOuter(0.1);
+                    scale.align(0.1);
+                }
                 axis.setScale(scale);
                 axis.setOriginDomain(scale.domain());
                 const hasCache = this.transformCacheX.has(axis.index);
@@ -744,6 +761,11 @@ class ScaleService {
                 if (axis.options.scaleType.type === ScaleType.log) {
                     scale.base(axis.options.scaleType.base);
                 }
+                if (axis.options.scaleType.type === ScaleType.band) {
+                    scale.paddingInner(0.1);
+                    scale.paddingOuter(0.1);
+                    scale.align(0.1);
+                }
                 axis.setScale(scale);
                 axis.setOriginDomain(scale.domain());
                 const hasCache = this.transformCacheY.has(axis.index);
@@ -1980,6 +2002,7 @@ class BrushMessage {
     constructor(options) {
         this.chartId = options?.chartId;
         this.selection = options?.selection;
+        this.mode = options?.mode;
     }
 }
 
@@ -2083,17 +2106,20 @@ class ZoomableDirective {
         if (this.config.zoom?.wheelDelta) {
             this.zoom.wheelDelta(this.config.zoom?.wheelDelta);
         }
-        const maxZoom = this.config.zoom?.max
-            ? (this.axis.extremes[1] - this.axis.extremes[0]) /
-                this.config.zoom?.max
-            : this.config.zoom?.limitZoomByData
-                ? 1
-                : 0;
-        const minZoom = this.config.zoom?.min
-            ? (this.axis.extremes[1] - this.axis.extremes[0]) /
-                this.config.zoom?.min
-            : Infinity;
-        this.zoom.scaleExtent([maxZoom, minZoom]);
+        if (this.axis.options.scaleType.type === ScaleType.band) {
+            const extremes = this.axis.extremes;
+            const maxZoom = this.config.zoom?.max
+                ? (extremes[1] - extremes[0]) /
+                    this.config.zoom?.max
+                : this.config.zoom?.limitZoomByData
+                    ? 1
+                    : 0;
+            const minZoom = this.config.zoom?.min
+                ? (extremes[1] - extremes[0]) /
+                    this.config.zoom?.min
+                : Infinity;
+            this.zoom.scaleExtent([maxZoom, minZoom]);
+        }
         this.zoom.on('zoom end', this.zoomed);
         this._element.call(this.zoom).on('dblclick.zoom', null);
         if (this.config?.zoom?.zoomBehavior === ZoomBehaviorType.wheel) {
@@ -2213,6 +2239,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);
         }
@@ -2290,6 +2317,7 @@ class BrushableDirective {
                     const brushMessage = new BrushMessage({
                         chartId: this.config.id,
                         selection: [brushScale.invert(from), brushScale.invert(to)],
+                        mode: _.mode
                     });
                     this.brushService.setBrush(brushMessage);
                 }
@@ -2306,7 +2334,7 @@ class BrushableDirective {
                     }
                     this._container.call(this.brush.move, this.selection
                         ? this.selection.map(brushScale)
-                        : domain.map(brushScale));
+                        : domain.map(brushScale), {});
                 }, 0);
             });
         }
@@ -2658,6 +2686,9 @@ class ChartComponent {
             if (tooltipTracking === TooltipTracking.y) {
                 const result = new Map();
                 y.forEach((value, key) => {
+                    if (value.options.scaleType.type === ScaleType.band) {
+                        return;
+                    }
                     result.set(key, value.scale.invert(event.offsetY));
                 });
                 this.pointerMove.emit({
@@ -2668,6 +2699,9 @@ class ChartComponent {
             else {
                 const result = new Map();
                 x.forEach((value, key) => {
+                    if (value.options.scaleType.type === ScaleType.band) {
+                        return;
+                    }
                     result.set(key, value.scale.invert(event.offsetX));
                 });
                 this.pointerMove.emit({
@@ -2762,6 +2796,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }] } });
 
+class BandseriesComponent extends SeriesBaseComponent {
+    constructor(svc, cdr, scaleService, zoomService, element) {
+        super(svc, cdr, scaleService, zoomService, element);
+        this.svc = svc;
+        this.cdr = cdr;
+        this.scaleService = scaleService;
+        this.zoomService = zoomService;
+        this.element = element;
+    }
+    ngOnInit() {
+        this.x = this.scaleService.scales.pipe(map(_ => _.x.get(this.series.xAxisIndex)?.scale));
+        this.y = this.scaleService.scales.pipe(map(_ => _.y.get(this.series.yAxisIndex)?.scale));
+    }
+}
+BandseriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BandseriesComponent, deps: [{ token: ChartService }, { token: i0.ChangeDetectorRef }, { token: ScaleService }, { token: ZoomService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+BandseriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: BandseriesComponent, selector: "svg:svg[teta-bandseries]", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"{x: x | async, y: y | async} as scales\">\n  <ng-container *ngFor=\"let band of _series.data\">\n    <svg:rect [attr.x]=\"scales.x(band.x)\"\n              [attr.y]=\"scales.y(band.y) - scales.y.bandwidth() / 2\"\n              [attr.width]=\"scales.x(band.x1) - scales.x(band.x)\"\n              fill=\"red\"\n              [attr.height]=\"scales.y.bandwidth()\">\n    </svg:rect>\n    <svg:text\n      text-anchor=\"middle\"\n      dominant-baseline=\"middle\"\n      class=\"label font-caption fill-text-90\"\n      [attr.x]=\"scales.x(band.x) + (scales.x(band.x1) - scales.x(band.x)) / 2\"\n      [attr.y]=\"scales.y(band.y)\">{{band.y}}\n    </svg:text>\n  </ng-container>\n\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: BandseriesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'svg:svg[teta-bandseries]', template: "<ng-container *ngIf=\"{x: x | async, y: y | async} as scales\">\n  <ng-container *ngFor=\"let band of _series.data\">\n    <svg:rect [attr.x]=\"scales.x(band.x)\"\n              [attr.y]=\"scales.y(band.y) - scales.y.bandwidth() / 2\"\n              [attr.width]=\"scales.x(band.x1) - scales.x(band.x)\"\n              fill=\"red\"\n              [attr.height]=\"scales.y.bandwidth()\">\n    </svg:rect>\n    <svg:text\n      text-anchor=\"middle\"\n      dominant-baseline=\"middle\"\n      class=\"label font-caption fill-text-90\"\n      [attr.x]=\"scales.x(band.x) + (scales.x(band.x1) - scales.x(band.x)) / 2\"\n      [attr.y]=\"scales.y(band.y)\">{{band.y}}\n    </svg:text>\n  </ng-container>\n\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: ChartService }, { type: i0.ChangeDetectorRef }, { type: ScaleService }, { type: ZoomService }, { type: i0.ElementRef }]; } });
+
 class ChartModule {
 }
 ChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -2787,7 +2842,8 @@ ChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         BlockAreaSeriesComponent,
         AnnotationComponent,
         CrosshairComponent,
-        DraggablePointDirective], imports: [CommonModule, LetModule], exports: [ChartComponent,
+        DraggablePointDirective,
+        BandseriesComponent], imports: [CommonModule, LetModule], exports: [ChartComponent,
         LegendComponent,
         SeriesBaseComponent,
         LineSeriesComponent,
@@ -2824,6 +2880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                         AnnotationComponent,
                         CrosshairComponent,
                         DraggablePointDirective,
+                        BandseriesComponent,
                     ],
                     exports: [
                         ChartComponent,