@lxlib/chart
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1.
299 lines (293 loc) • 8.43 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, NgZone, Input, NgModule } from '@angular/core';
import DataSet from '@antv/data-set';
import { registerShape, Util, Chart } from '@antv/g2';
import { InputNumber, LxlibUtilModule } from '@lxlib/util';
import { fromEvent } from 'rxjs';
import { filter, debounceTime } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: tag-cloud.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function G2TagCloudData() { }
if (false) {
/** @type {?|undefined} */
G2TagCloudData.prototype.x;
/** @type {?|undefined} */
G2TagCloudData.prototype.value;
/** @type {?|undefined} */
G2TagCloudData.prototype.category;
/* Skipping unhandled member: [key: string]: any;*/
}
class G2TagCloudComponent {
// #endregion
/**
* @param {?} el
* @param {?} ngZone
*/
constructor(el, ngZone) {
this.el = el;
this.ngZone = ngZone;
// #region fields
this.delay = 0;
this.height = 100;
this.padding = 0;
this.data = [];
}
/**
* @private
* @return {?}
*/
initTagCloud() {
// 给point注册一个词云的shape
registerShape('point', 'cloud', {
/**
* @param {?} cfg
* @param {?} container
* @return {?}
*/
draw(cfg, container) {
/** @type {?} */
const data = (/** @type {?} */ (cfg.data));
/** @type {?} */
const textShape = container.addShape('text', {
attrs: Object.assign(Object.assign(Object.assign({}, cfg.defaultStyle), cfg.style), { fontSize: data.size, text: data.text, textAlign: 'center', fontFamily: data.font, fill: cfg.color, textBaseline: 'Alphabetic', x: cfg.x, y: cfg.y }),
});
if (data.rotate) {
Util.rotate(textShape, (data.rotate * Math.PI) / 180);
}
return textShape;
},
});
}
/**
* @private
* @return {?}
*/
install() {
const { el, padding, height } = this;
/** @type {?} */
const chart = (this.chart = new Chart({
container: el.nativeElement,
padding,
height,
}));
chart.legend(false);
chart.axis(false);
chart.tooltip({
showTitle: false,
showMarkers: false,
});
chart.coordinate().reflect('x');
chart.point().position('x*y').color('category').shape('cloud').tooltip('value*category');
chart.interaction('element-active');
this.attachChart();
}
/**
* @private
* @return {?}
*/
attachChart() {
const { chart, height, padding, data } = this;
if (!chart || !data || data.length <= 0)
return;
chart.height = height;
chart.padding = padding;
chart.forceFit();
/** @type {?} */
const dv = new DataSet.View().source(data);
/** @type {?} */
const range = dv.range('value');
/** @type {?} */
const min = range[0];
/** @type {?} */
const max = range[1];
dv.transform((/** @type {?} */ ({
type: 'tag-cloud',
fields: ['x', 'value'],
size: [chart.width, chart.height],
padding: typeof padding === 'number' ? padding : undefined,
timeInterval: 5000,
// max execute time
rotate: (/**
* @return {?}
*/
() => {
/** @type {?} */
let random = ~~(Math.random() * 4) % 4;
if (random === 2) {
random = 0;
}
return random * 90; // 0, 90, 270
}),
/**
* @param {?} d
* @return {?}
*/
fontSize(d) {
if (d.value) {
return ((d.value - min) / (max - min)) * (80 - 24) + 24;
}
return 0;
},
})));
chart.scale({
x: { nice: false },
y: { nice: false },
});
chart.changeData(dv.rows);
chart.render();
}
/**
* @private
* @return {?}
*/
_attachChart() {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => this.attachChart()));
}
/**
* @private
* @return {?}
*/
installResizeEvent() {
this.resize$ = fromEvent(window, 'resize')
.pipe(filter((/**
* @return {?}
*/
() => !!this.chart)), debounceTime(200))
.subscribe((/**
* @return {?}
*/
() => this._attachChart()));
}
/**
* @return {?}
*/
ngOnInit() {
this.initTagCloud();
this.installResizeEvent();
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => setTimeout((/**
* @return {?}
*/
() => this.install()), this.delay)));
}
/**
* @return {?}
*/
ngOnChanges() {
this._attachChart();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.resize$.unsubscribe();
if (this.chart) {
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => this.chart.destroy()));
}
}
}
G2TagCloudComponent.decorators = [
{ type: Component, args: [{
selector: 'g2-tag-cloud',
exportAs: 'g2TagCloud',
template: ``,
host: {
'[style.height.px]': 'height',
},
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
G2TagCloudComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone }
];
G2TagCloudComponent.propDecorators = {
delay: [{ type: Input }],
height: [{ type: Input }],
padding: [{ type: Input }],
data: [{ type: Input }]
};
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2TagCloudComponent.prototype, "delay", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2TagCloudComponent.prototype, "height", void 0);
if (false) {
/**
* @type {?}
* @private
*/
G2TagCloudComponent.prototype.resize$;
/**
* @type {?}
* @private
*/
G2TagCloudComponent.prototype.chart;
/** @type {?} */
G2TagCloudComponent.prototype.delay;
/** @type {?} */
G2TagCloudComponent.prototype.height;
/** @type {?} */
G2TagCloudComponent.prototype.padding;
/** @type {?} */
G2TagCloudComponent.prototype.data;
/**
* @type {?}
* @private
*/
G2TagCloudComponent.prototype.el;
/**
* @type {?}
* @private
*/
G2TagCloudComponent.prototype.ngZone;
}
/**
* @fileoverview added by tsickle
* Generated from: tag-cloud.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [G2TagCloudComponent];
class G2TagCloudModule {
}
G2TagCloudModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, LxlibUtilModule],
declarations: [...COMPONENTS],
exports: [...COMPONENTS],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: tag-cloud.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { G2TagCloudComponent, G2TagCloudModule };
//# sourceMappingURL=tag-cloud.js.map