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

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

import { Component, Input, HostBinding, ViewChild, ElementRef, ChangeDetectionStrategy, NgZone, } from '@angular/core';
import { toNumber } from 'yoyo-ng-module/util';
var G2MiniBarComponent = /** @class */ (function () {
    function G2MiniBarComponent(zone) {
        this.zone = zone;
        // region: fields
        this.color = '#1890FF';
        this._height = 0;
        this._borderWidth = 5;
        this.padding = [8, 8, 8, 8];
    }
    Object.defineProperty(G2MiniBarComponent.prototype, "height", {
        get: function () {
            return this._height;
        },
        set: function (value) {
            this._height = toNumber(value);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(G2MiniBarComponent.prototype, "borderWidth", {
        get: function () {
            return this._borderWidth;
        },
        set: function (value) {
            this._borderWidth = toNumber(value);
        },
        enumerable: true,
        configurable: true
    });
    G2MiniBarComponent.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: true,
            height: +this.height,
            padding: this.padding,
            legend: null,
        });
        chart.axis(false);
        chart.source(this.data, {
            x: {
                type: 'cat',
            },
            y: {
                min: 0,
            },
        });
        chart.tooltip({
            showTitle: false,
            hideMarkders: false,
            crosshairs: false,
            'g2-tooltip': { padding: 4 },
            'g2-tooltip-list-item': { margin: "0px 4px" },
        });
        chart
            .interval()
            .position('x*y')
            .size(this.borderWidth)
            .color(this.color)
            .tooltip('x*y', function (x, y) {
            return {
                name: x,
                value: y,
            };
        });
        chart.render();
        this.chart = chart;
    };
    G2MiniBarComponent.prototype.uninstall = function () {
        if (this.chart) {
            this.chart.destroy();
            this.chart = null;
        }
    };
    G2MiniBarComponent.prototype.ngOnChanges = function (changes) {
        var _this = this;
        this.zone.runOutsideAngular(function () { return setTimeout(function () { return _this.install(); }, 100); });
    };
    G2MiniBarComponent.prototype.ngOnDestroy = function () {
        this.uninstall();
    };
    G2MiniBarComponent.decorators = [
        { type: Component, args: [{
                    selector: 'g2-mini-bar',
                    template: "<div #container></div>",
                    changeDetection: ChangeDetectionStrategy.OnPush,
                },] },
    ];
    /** @nocollapse */
    G2MiniBarComponent.ctorParameters = function () { return [
        { type: NgZone }
    ]; };
    G2MiniBarComponent.propDecorators = {
        color: [{ type: Input }],
        height: [{ type: HostBinding, args: ['style.height.px',] }, { type: Input }],
        borderWidth: [{ type: Input }],
        padding: [{ type: Input }],
        data: [{ type: Input }],
        node: [{ type: ViewChild, args: ['container',] }]
    };
    return G2MiniBarComponent;
}());
export { G2MiniBarComponent };
//# sourceMappingURL=mini-bar.component.js.map