@ohayojp/chart
Version:
Cache the dictionary, city data etc.
382 lines (376 loc) • 11.2 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Platform } from '@angular/cdk/platform';
import { EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, NgZone, Input, Output, NgModule } from '@angular/core';
import DataSet from '@antv/data-set';
import { registerShape, Util, Chart } from '@antv/g2';
import { OhayoConfigService, InputNumber, OhayoUtilModule } from '@ohayojp/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,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function G2TagCloudData() { }
if (false) {
/** @type {?|undefined} */
G2TagCloudData.prototype.value;
/** @type {?|undefined} */
G2TagCloudData.prototype.name;
/* Skipping unhandled member: [key: string]: any;*/
}
/**
* @record
*/
function G2TagCloudClickItem() { }
if (false) {
/** @type {?} */
G2TagCloudClickItem.prototype.item;
/** @type {?} */
G2TagCloudClickItem.prototype.ev;
}
class G2TagCloudComponent {
// #endregion
/**
* @param {?} el
* @param {?} ngZone
* @param {?} configSrv
* @param {?} platform
*/
constructor(el, ngZone, configSrv, platform) {
this.el = el;
this.ngZone = ngZone;
this.platform = platform;
// #region fields
this.delay = 100;
this.width = 0;
this.height = 200;
this.padding = 0;
this.data = [];
this.clickItem = new EventEmitter();
configSrv.attachKey(this, 'chart', 'theme');
}
/**
* @return {?}
*/
get chart() {
return this._chart;
}
/**
* @private
* @return {?}
*/
initTagCloud() {
registerShape('point', 'cloud', {
// tslint:disable-next-line: typedef
/**
* @param {?} cfg
* @param {?} container
* @return {?}
*/
draw(cfg, container) {
/** @type {?} */
const data = (/** @type {?} */ (cfg.data));
/** @type {?} */
const textShape = container.addShape({
type: 'text',
name: 'tag-cloud-text',
attrs: (/** @type {?} */ (Object.assign(Object.assign({}, 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, theme } = this;
if (this.height === 0) {
this.height = this.el.nativeElement.clientHeight;
}
if (this.width === 0) {
this.width = this.el.nativeElement.clientWidth;
}
/** @type {?} */
const chart = (this._chart = new Chart({
container: el.nativeElement,
autoFit: false,
padding,
height: this.height,
width: this.width,
theme,
}));
chart.scale({
x: { nice: false },
y: { nice: false },
});
chart.legend(false);
chart.axis(false);
chart.tooltip({
showTitle: false,
showMarkers: false,
});
((/** @type {?} */ (chart.coordinate()))).reflect();
chart
.point()
.position('x*y')
.color('text')
.shape('cloud')
.state({
active: {
style: {
fillOpacity: 0.4,
},
},
});
chart.interaction('element-active');
chart.on('tag-cloud-text:click', (/**
* @param {?} ev
* @return {?}
*/
(ev) => {
this.ngZone.run((/**
* @return {?}
*/
() => { var _a; return this.clickItem.emit({ item: (_a = ev.data) === null || _a === void 0 ? void 0 : _a.data, ev }); }));
}));
this.attachChart();
}
/**
* @private
* @return {?}
*/
attachChart() {
const { _chart, padding, data } = this;
if (!_chart || !data || data.length <= 0)
return;
_chart.height = this.height;
_chart.width = this.width;
_chart.padding = padding;
/** @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: ['name', 'value'],
// imageMask,
font: 'Verdana',
size: [this.width, this.height],
// 宽高设置最好根据 imageMask 做调整
padding: 0,
timeInterval: 5000,
// max execute time
// tslint:disable-next-line: typedef
/**
* @return {?}
*/
rotate() {
/** @type {?} */
let random = ~~(Math.random() * 4) % 4;
if (random === 2) {
random = 0;
}
return random * 90; // 0, 90, 270
},
// tslint:disable-next-line: typedef
/**
* @param {?} d
* @return {?}
*/
fontSize(d) {
return ((d.value - min) / (max - min)) * (32 - 8) + 8;
},
})));
_chart.data(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() {
if (!this.platform.isBrowser) {
return;
}
this.initTagCloud();
this.installResizeEvent();
this.ngZone.runOutsideAngular((/**
* @return {?}
*/
() => setTimeout((/**
* @return {?}
*/
() => this.install()), this.delay)));
}
/**
* @return {?}
*/
ngOnChanges() {
this._attachChart();
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.resize$) {
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: ``,
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}] }
];
/** @nocollapse */
G2TagCloudComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone },
{ type: OhayoConfigService },
{ type: Platform }
];
G2TagCloudComponent.propDecorators = {
delay: [{ type: Input }],
width: [{ type: Input }],
height: [{ type: Input }],
padding: [{ type: Input }],
data: [{ type: Input }],
theme: [{ type: Input }],
clickItem: [{ type: Output }]
};
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2TagCloudComponent.prototype, "delay", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2TagCloudComponent.prototype, "width", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Object)
], G2TagCloudComponent.prototype, "height", void 0);
if (false) {
/** @type {?} */
G2TagCloudComponent.ngAcceptInputType_delay;
/** @type {?} */
G2TagCloudComponent.ngAcceptInputType_height;
/** @type {?} */
G2TagCloudComponent.ngAcceptInputType_width;
/**
* @type {?}
* @private
*/
G2TagCloudComponent.prototype.resize$;
/**
* @type {?}
* @private
*/
G2TagCloudComponent.prototype._chart;
/** @type {?} */
G2TagCloudComponent.prototype.delay;
/** @type {?} */
G2TagCloudComponent.prototype.width;
/** @type {?} */
G2TagCloudComponent.prototype.height;
/** @type {?} */
G2TagCloudComponent.prototype.padding;
/** @type {?} */
G2TagCloudComponent.prototype.data;
/** @type {?} */
G2TagCloudComponent.prototype.theme;
/** @type {?} */
G2TagCloudComponent.prototype.clickItem;
/**
* @type {?}
* @private
*/
G2TagCloudComponent.prototype.el;
/**
* @type {?}
* @private
*/
G2TagCloudComponent.prototype.ngZone;
/**
* @type {?}
* @private
*/
G2TagCloudComponent.prototype.platform;
}
/**
* @fileoverview added by tsickle
* Generated from: tag-cloud.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [G2TagCloudComponent];
class G2TagCloudModule {
}
G2TagCloudModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, OhayoUtilModule],
declarations: [...COMPONENTS],
exports: [...COMPONENTS],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: tag-cloud.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { G2TagCloudComponent, G2TagCloudModule };
//# sourceMappingURL=tag-cloud.js.map