yoyo-ng-modulewindy/src/abc/charts/tag-cloud/tag-cloud.component.js

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

import { Component, Input, ViewChild, ElementRef, NgZone, ChangeDetectionStrategy, ChangeDetectorRef, } from '@angular/core';
import { toNumber, toBoolean } from 'yoyo-ng-module/util';
var G2TagCloudComponent = /** @class */ (function () {
    function G2TagCloudComponent(el, cd, zone) {
        this.el = el;
        this.cd = cd;
        this.zone = zone;
        // region: fields
        this.color = 'rgba(24, 144, 255, 0.85)';
        this._height = 0;
        this.padding = 0;
        this._autoLabel = true;
        this.initFlag = false;
    }
    Object.defineProperty(G2TagCloudComponent.prototype, "height", {
        get: function () {
            return this._height;
        },
        set: function (value) {
            this._height = toNumber(value);
            this.cd.detectChanges();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(G2TagCloudComponent.prototype, "autoLabel", {
        get: function () {
            return this._autoLabel;
        },
        set: function (value) {
            this._autoLabel = toBoolean(value);
        },
        enumerable: true,
        configurable: true
    });
    G2TagCloudComponent.prototype.initTagCloud = function () {
        // 给point注册一个词云的shape
        G2.Shape.registerShape('point', 'cloud', {
            drawShape: function (cfg, container) {
                var attrs = Object.assign({}, {
                    fillOpacity: cfg.opacity,
                    fontSize: cfg.origin._origin.size,
                    rotate: cfg.origin._origin.rotate,
                    text: cfg.origin._origin.text,
                    textAlign: 'center',
                    fontFamily: cfg.origin._origin.font,
                    fill: cfg.color,
                    textBaseline: 'Alphabetic',
                }, cfg.style);
                return container.addShape('text', {
                    attrs: Object.assign(attrs, {
                        x: cfg.x,
                        y: cfg.y,
                    }),
                });
            },
        });
    };
    G2TagCloudComponent.prototype.renderChart = function () {
        if (!this.data || (this.data && this.data.length < 1))
            return;
        this.node.nativeElement.innerHTML = '';
        var dv = new DataSet.View().source(this.data);
        var range = dv.range('value');
        var min = range[0];
        var max = range[1];
        var height = +this.height;
        var width = +this.el.nativeElement.offsetWidth;
        dv.transform({
            type: 'tag-cloud',
            fields: ['name', 'value'],
            size: [width, height],
            padding: this.padding,
            timeInterval: 5000,
            rotate: function () {
                var random = ~~(Math.random() * 4) % 4;
                if (random === 2) {
                    random = 0;
                }
                return random * 90; // 0, 90, 270
            },
            fontSize: function (d) {
                if (d.value) {
                    return (d.value - min) / (max - min) * (80 - 24) + 24;
                }
                return 0;
            },
        });
        var chart = new G2.Chart({
            container: this.node.nativeElement,
            width: width,
            height: height,
            padding: this.padding,
            forceFit: true,
        });
        chart.source(dv, {
            x: { nice: false },
            y: { nice: false },
        });
        chart.legend(false);
        chart.axis(false);
        chart.tooltip({
            showTitle: false,
        });
        chart.coord().reflect();
        chart
            .point()
            .position('x*y')
            .color('text')
            .shape('cloud')
            .tooltip('value*category');
        chart.render();
        this.chart = chart;
    };
    G2TagCloudComponent.prototype.uninstall = function () {
        if (this.chart) {
            this.chart.destroy();
            this.chart = null;
        }
    };
    G2TagCloudComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.initFlag = true;
        this.zone.runOutsideAngular(function () {
            return setTimeout(function () {
                _this.initTagCloud();
                _this.renderChart();
            }, 100);
        });
    };
    G2TagCloudComponent.prototype.ngOnChanges = function () {
        var _this = this;
        if (this.initFlag) {
            this.zone.runOutsideAngular(function () {
                return setTimeout(function () { return _this.renderChart(); }, 100);
            });
        }
    };
    G2TagCloudComponent.prototype.ngOnDestroy = function () {
        this.uninstall();
    };
    G2TagCloudComponent.decorators = [
        { type: Component, args: [{
                    selector: 'g2-tag-cloud',
                    template: "<div #container [ngStyle]=\"{'height.px': height}\"></div>",
                    changeDetection: ChangeDetectionStrategy.OnPush,
                },] },
    ];
    /** @nocollapse */
    G2TagCloudComponent.ctorParameters = function () { return [
        { type: ElementRef },
        { type: ChangeDetectorRef },
        { type: NgZone }
    ]; };
    G2TagCloudComponent.propDecorators = {
        color: [{ type: Input }],
        height: [{ type: Input }],
        padding: [{ type: Input }],
        data: [{ type: Input }],
        autoLabel: [{ type: Input }],
        node: [{ type: ViewChild, args: ['container',] }]
    };
    return G2TagCloudComponent;
}());
export { G2TagCloudComponent };
//# sourceMappingURL=tag-cloud.component.js.map