yoyo-ng-modulewindy/src/abc/charts/mini-area/mini-area.component.js

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

import { Component, Input, HostBinding, ViewChild, ElementRef, ChangeDetectionStrategy, NgZone, } from '@angular/core';
import { toNumber, toBoolean } from 'yoyo-ng-module/util';
var G2MiniAreaComponent = /** @class */ (function () {
    function G2MiniAreaComponent(zone) {
        this.zone = zone;
        // region: fields
        this.color = 'rgba(24, 144, 255, 0.2)';
        this.borderColor = '#1890FF';
        this._borderWidth = 2;
        this._fit = true;
        this._line = false;
        this._animate = true;
        this.padding = [8, 8, 8, 8];
    }
    Object.defineProperty(G2MiniAreaComponent.prototype, "borderWidth", {
        get: function () {
            return this._borderWidth;
        },
        set: function (value) {
            this._borderWidth = toNumber(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(G2MiniAreaComponent.prototype, "height", {
        get: function () {
            return this._height;
        },
        set: function (value) {
            this._height = toNumber(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(G2MiniAreaComponent.prototype, "fit", {
        get: function () {
            return this._fit;
        },
        set: function (value) {
            this._fit = toBoolean(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(G2MiniAreaComponent.prototype, "line", {
        get: function () {
            return this._line;
        },
        set: function (value) {
            this._line = toBoolean(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(G2MiniAreaComponent.prototype, "animate", {
        get: function () {
            return this._animate;
        },
        set: function (value) {
            this._animate = toBoolean(value);
        },
        enumerable: true,
        configurable: true
    });
    G2MiniAreaComponent.prototype.install = function () {
        if (!this.data || (this.data && this.data.length < 1))
            return;
        this.node.nativeElement.innerHTML = '';
        var chart = new G2.Chart({
            container: this.node.nativeElement,
            forceFit: this.fit,
            height: +this.height,
            animate: this.animate,
            padding: this.padding,
            legend: null,
        });
        if (!this.xAxis && !this.yAxis) {
            chart.axis(false);
        }
        if (this.xAxis) {
            chart.axis('x', this.xAxis);
        }
        else {
            chart.axis('x', false);
        }
        if (this.yAxis) {
            chart.axis('y', this.yAxis);
        }
        else {
            chart.axis('y', false);
        }
        var dataConfig = {
            x: {
                type: 'cat',
                range: [0, 1],
                xAxis: this.xAxis,
            },
            y: {
                min: 0,
                yAxis: this.yAxis,
            },
        };
        chart.tooltip({
            showTitle: false,
            hideMarkders: false,
            'g2-tooltip': { padding: 4 },
            'g2-tooltip-list-item': { margin: "0px 4px" },
        });
        var view = chart.view();
        view.source(this.data, dataConfig);
        view
            .area()
            .position('x*y')
            .color(this.color)
            .tooltip('x*y', function (x, y) {
            return {
                name: x,
                value: y,
            };
        })
            .shape('smooth')
            .style({ fillOpacity: 1 });
        if (this.line) {
            var view2 = chart.view();
            view2.source(this.data, dataConfig);
            view2
                .line()
                .position('x*y')
                .color(this.borderColor)
                .size(this.borderWidth)
                .shape('smooth');
            view2.tooltip(false);
        }
        chart.render();
        this.chart = chart;
    };
    G2MiniAreaComponent.prototype.uninstall = function () {
        if (this.chart) {
            this.chart.destroy();
            this.chart = null;
        }
    };
    G2MiniAreaComponent.prototype.ngOnChanges = function (changes) {
        var _this = this;
        this.zone.runOutsideAngular(function () { return setTimeout(function () { return _this.install(); }, 100); });
    };
    G2MiniAreaComponent.prototype.ngOnDestroy = function () {
        this.uninstall();
    };
    G2MiniAreaComponent.decorators = [
        { type: Component, args: [{
                    selector: 'g2-mini-area',
                    template: "<div #container></div>",
                    changeDetection: ChangeDetectionStrategy.OnPush,
                },] },
    ];
    /** @nocollapse */
    G2MiniAreaComponent.ctorParameters = function () { return [
        { type: NgZone }
    ]; };
    G2MiniAreaComponent.propDecorators = {
        color: [{ type: Input }],
        borderColor: [{ type: Input }],
        borderWidth: [{ type: Input }],
        height: [{ type: HostBinding, args: ['style.height.px',] }, { type: Input }],
        fit: [{ type: Input }],
        line: [{ type: Input }],
        animate: [{ type: Input }],
        xAxis: [{ type: Input }],
        yAxis: [{ type: Input }],
        padding: [{ type: Input }],
        data: [{ type: Input }],
        node: [{ type: ViewChild, args: ['container',] }]
    };
    return G2MiniAreaComponent;
}());
export { G2MiniAreaComponent };
//# sourceMappingURL=mini-area.component.js.map