@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
252 lines (251 loc) • 11.2 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import React from 'react';
import { v4 as uuid } from 'uuid';
import { reaction, observable, action, computed } from 'mobx';
import { observer } from 'mobx-react';
import { Spin } from 'antd';
import { debounce, get, isEqual } from 'lodash';
import { OutputMode } from '@qn-pandora/visualization-sdk';
import storeWrapper from '../components/StoreWrapper';
import errorBoundary from '../../../hocs/errorBoundary';
import CustomChartStore from './store';
import BasicComponent from '../../../components/Base/BasicComponent';
import ElementMeasure from '../../../components/Common/Measure';
import bind from '../../../utils/bind';
import * as style from './style.mless';
var CustomChart = /** @class */ (function (_super) {
__extends(CustomChart, _super);
function CustomChart() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.store = _this.props.store;
_this._first = true;
_this._element = null;
return _this;
}
Object.defineProperty(CustomChart.prototype, "data", {
get: function () {
if (this.visualizationStore) {
var params = this.visualizationStore.getInitialDataParams();
if (params) {
var outputMode = params.outputMode, count = params.count;
var _a = this.store.chartDataset, rows = _a.rows, fields = _a.fields;
var data_1 = rows.slice(0, count);
var fieldNames_1 = fields.map(function (field) { return ({
name: field.name
}); });
switch (outputMode) {
case OutputMode.JsonRows:
return {
fields: fieldNames_1,
rows: data_1.map(function (series) {
return series.map(function (sery) { return get(sery, 0); });
})
};
case OutputMode.JsonCols:
return {
fields: fieldNames_1,
rows: fieldNames_1.map(function (_, index) {
return data_1.map(function (series) { return get(series, [index, 0]); });
})
};
case OutputMode.Json:
return {
fields: fieldNames_1,
rows: data_1.map(function (series) {
var data = {};
fieldNames_1.forEach(function (field, index) {
data[field.name] = get(series, [index, 0]);
});
return data;
})
};
}
}
}
return this.store.chartDataset;
},
enumerable: false,
configurable: true
});
Object.defineProperty(CustomChart.prototype, "config", {
get: function () {
return this.store.chartStyleService.option;
},
enumerable: false,
configurable: true
});
Object.defineProperty(CustomChart.prototype, "action", {
get: function () {
var _a;
return (_a = this.store.chartActionService) === null || _a === void 0 ? void 0 : _a.commonAction;
},
enumerable: false,
configurable: true
});
CustomChart.prototype.setVisualizationStore = function (visualizationStore) {
this.visualizationStore = visualizationStore;
};
CustomChart.prototype.componentDidUpdate = function (prevProps) {
var _a, _b;
var isVisualizationStoreChange = prevProps.VisualizationStore !== this.props.VisualizationStore;
if (isVisualizationStoreChange ||
prevProps.staticPath !== this.props.staticPath) {
this.destroy();
if (this.props.VisualizationStore) {
/**
* 切换VisualizationStore时先清空当前样式，避免图表之间样式冲突导致报错
*/
if (this.VisualizationStore && isVisualizationStoreChange) {
var chartStyleService = this.store
.chartStyleService;
chartStyleService.setChartStyles({});
}
this.VisualizationStore = this.props.VisualizationStore;
this.setVisualizationStore(new this.VisualizationStore("#custom-chart-" + uuid(), this.store.chartStyleService, this.props.staticPath, this.action));
(_a = this.visualizationStore) === null || _a === void 0 ? void 0 : _a.setElement(this._element);
(_b = this.visualizationStore) === null || _b === void 0 ? void 0 : _b.initialize();
}
}
};
CustomChart.prototype.setElement = function (element) {
this._element = element;
if (element && this.visualizationStore) {
this.visualizationStore.setElement(element);
this.visualizationStore.initialize();
this.updateView();
}
};
CustomChart.prototype.updateView = function () {
var visualizationStore = this.visualizationStore;
if (visualizationStore && visualizationStore.element) {
if (this._first) {
visualizationStore.setupView();
this._first = false;
}
try {
visualizationStore.updateView(visualizationStore.formatData(this.data, this.config), this.config);
}
catch (e) {
console.error('updateView error: ', e);
}
}
};
CustomChart.prototype.handleResize = function () {
if (this.visualizationStore) {
this.visualizationStore.reflow();
this.updateView();
}
};
CustomChart.prototype.componentDidMount = function () {
var _this = this;
var VisualizationStore = this.props.VisualizationStore;
if (VisualizationStore) {
this.VisualizationStore = VisualizationStore;
this.setVisualizationStore(new VisualizationStore("#custom-chart-" + uuid(), this.store.chartStyleService, this.props.staticPath, this.action));
}
this.addDisposer(reaction(function () { return _this.store.chartDataset; }, function () {
if (_this.visualizationStore) {
_this.visualizationStore.setCurrentData(_this.store.chartDataset);
}
_this.updateView();
}, {
equals: isEqual
}), reaction(function () { return _this.config; }, debounce(function () {
if (_this.visualizationStore) {
_this.visualizationStore.setConfig(_this.config);
_this.visualizationStore.onConfigChange(_this.config);
_this.updateView();
}
}, 500), {
equals: isEqual
}));
};
CustomChart.prototype.destroy = function () {
if (this.visualizationStore) {
this.visualizationStore.remove();
this.visualizationStore.setElement(null);
this._first = true;
}
};
CustomChart.prototype.componentWillUnmount = function () {
this.destroy();
};
CustomChart.prototype.render = function () {
var _this = this;
if (!this.visualizationStore) {
return React.createElement(Spin, { className: style.spin });
}
return (React.createElement(ElementMeasure, { onClient: function () { return _this.handleResize(); }, className: style.chartElement },
React.createElement("div", { className: style.chartElement, ref: function (element) { return _this.setElement(element); }, id: this.visualizationStore.el.slice(1) })));
};
__decorate([
observable.ref,
__metadata("design:type", Object)
], CustomChart.prototype, "visualizationStore", void 0);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CustomChart.prototype, "data", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CustomChart.prototype, "config", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CustomChart.prototype, "action", null);
__decorate([
bind,
action,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], CustomChart.prototype, "setVisualizationStore", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], CustomChart.prototype, "setElement", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], CustomChart.prototype, "updateView", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], CustomChart.prototype, "handleResize", null);
CustomChart = __decorate([
observer
], CustomChart);
return CustomChart;
}(BasicComponent));
export default errorBoundary(storeWrapper(CustomChart, CustomChartStore));