yoyo-ng-modulewindy/src/abc/charts/bar/bar.component.js

服务于52ABP模板的前端开源的相关组件内容。整合了ng-alain和你NG ZORRO的内容

import { Component, Input, HostBinding, ViewChild, ElementRef, NgZone, TemplateRef, ChangeDetectionStrategy, ChangeDetectorRef, } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { toBoolean, toNumber } from 'yoyo-ng-module/util';
var G2BarComponent = /** @class */ (function () {
    function G2BarComponent(el, cd, zone) {
        this.el = el;
        this.cd = cd;
        this.zone = zone;
        // region: fields
        this._title = '';
        this.color = 'rgba(24, 144, 255, 0.85)';
        this._height = 0;
        this._autoLabel = true;
        // region: resize
        this.autoHideXLabels = false;
        this.scroll$ = null;
    }
    Object.defineProperty(G2BarComponent.prototype, "title", {
        set: function (value) {
            if (value instanceof TemplateRef) {
                this._title = null;
                this._titleTpl = value;
            }
            else
                this._title = value;
            this.cd.detectChanges();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(G2BarComponent.prototype, "height", {
        get: function () {
            return this._height;
        },
        set: function (value) {
            this._height = toNumber(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(G2BarComponent.prototype, "autoLabel", {
        get: function () {
            return this._autoLabel;
        },
        set: function (value) {
            this._autoLabel = toBoolean(value);
        },
        enumerable: true,
        configurable: true
    });
    G2BarComponent.prototype.runInstall = function () {
        var _this = this;
        this.zone.runOutsideAngular(function () { return setTimeout(function () { return _this.install(); }, 100); });
    };
    G2BarComponent.prototype.install = function () {
        if (!this.data || (this.data && this.data.length < 1))
            return;
        // this.uninstall();
        this.node.nativeElement.innerHTML = '';
        var padding = Object.assign([], this.padding);
        if (padding.length <= 0)
            padding = [32, 0, this.autoHideXLabels ? 8 : 32, 40];
        var chart = new G2.Chart({
            container: this.node.nativeElement,
            forceFit: true,
            height: +this.height - 22,
            legend: null,
            padding: padding,
        });
        chart.axis('x', !this.autoHideXLabels);
        chart.axis('y', {
            title: false,
            line: false,
            tickLine: false,
        });
        chart.source(this.data, {
            x: {
                type: 'cat',
            },
            y: {
                min: 0,
            },
        });
        chart.tooltip({
            showTitle: false,
        });
        chart
            .interval()
            .position('x*y')
            .color(this.color)
            .tooltip('x*y', function (x, y) {
            return {
                name: x,
                value: y,
            };
        });
        chart.render();
        this.chart = chart;
    };
    G2BarComponent.prototype.uninstall = function () {
        if (this.chart) {
            this.chart.destroy();
            this.chart = null;
        }
    };
    G2BarComponent.prototype.ngOnInit = function () {
        this.installResizeEvent();
    };
    G2BarComponent.prototype.ngOnChanges = function () {
        this.resize();
    };
    G2BarComponent.prototype.ngOnDestroy = function () {
        this.uninstallResizeEvent();
        this.uninstall();
    };
    G2BarComponent.prototype.installResizeEvent = function () {
        var _this = this;
        if (!this.autoLabel || this.scroll$)
            return;
        this.scroll$ = fromEvent(window, 'resize')
            .pipe(debounceTime(200))
            .subscribe(function () { return _this.resize(); });
    };
    G2BarComponent.prototype.uninstallResizeEvent = function () {
        if (this.scroll$)
            this.scroll$.unsubscribe();
    };
    G2BarComponent.prototype.resize = function () {
        var canvasWidth = this.el.nativeElement.clientWidth;
        var minWidth = this.data.length * 30;
        if (canvasWidth <= minWidth) {
            if (!this.autoHideXLabels) {
                this.autoHideXLabels = true;
                this.runInstall();
                return;
            }
        }
        else if (this.autoHideXLabels) {
            this.autoHideXLabels = false;
            this.runInstall();
            return;
        }
        if (!this.chart)
            this.runInstall();
    };
    G2BarComponent.decorators = [
        { type: Component, args: [{
                    selector: 'g2-bar',
                    template: "\n  <ng-container *ngIf=\"_title; else _titleTpl\"><h4>{{_title}}</h4></ng-container>\n  <div #container></div>",
                    host: { '[class.g2-chart]': 'true' },
                    changeDetection: ChangeDetectionStrategy.OnPush,
                    preserveWhitespaces: false,
                },] },
    ];
    /** @nocollapse */
    G2BarComponent.ctorParameters = function () { return [
        { type: ElementRef },
        { type: ChangeDetectorRef },
        { type: NgZone }
    ]; };
    G2BarComponent.propDecorators = {
        title: [{ type: Input }],
        color: [{ type: Input }],
        height: [{ type: HostBinding, args: ['style.height.px',] }, { type: Input }],
        padding: [{ type: Input }],
        data: [{ type: Input }],
        autoLabel: [{ type: Input }],
        node: [{ type: ViewChild, args: ['container',] }]
    };
    return G2BarComponent;
}());
export { G2BarComponent };
//# sourceMappingURL=bar.component.js.map