@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
276 lines (275 loc) • 12.7 kB
JavaScript
"use strict";
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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
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 __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var uuid_1 = require("uuid");
var mobx_1 = require("mobx");
var mobx_react_1 = require("mobx-react");
var antd_1 = require("antd");
var lodash_1 = require("lodash");
var visualization_sdk_1 = require("@qn-pandora/visualization-sdk");
var StoreWrapper_1 = __importDefault(require("../components/StoreWrapper"));
var errorBoundary_1 = __importDefault(require("../../../hocs/errorBoundary"));
var store_1 = __importDefault(require("./store"));
var BasicComponent_1 = __importDefault(require("../../../components/Base/BasicComponent"));
var Measure_1 = __importDefault(require("../../../components/Common/Measure"));
var bind_1 = __importDefault(require("../../../utils/bind"));
var style = __importStar(require("./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 visualization_sdk_1.OutputMode.JsonRows:
return {
fields: fieldNames_1,
rows: data_1.map(function (series) {
return series.map(function (sery) { return lodash_1.get(sery, 0); });
})
};
case visualization_sdk_1.OutputMode.JsonCols:
return {
fields: fieldNames_1,
rows: fieldNames_1.map(function (_, index) {
return data_1.map(function (series) { return lodash_1.get(series, [index, 0]); });
})
};
case visualization_sdk_1.OutputMode.Json:
return {
fields: fieldNames_1,
rows: data_1.map(function (series) {
var data = {};
fieldNames_1.forEach(function (field, index) {
data[field.name] = lodash_1.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_1.v4(), 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_1.v4(), this.store.chartStyleService, this.props.staticPath, this.action));
}
this.addDisposer(mobx_1.reaction(function () { return _this.store.chartDataset; }, function () {
if (_this.visualizationStore) {
_this.visualizationStore.setCurrentData(_this.store.chartDataset);
}
_this.updateView();
}, {
equals: lodash_1.isEqual
}), mobx_1.reaction(function () { return _this.config; }, lodash_1.debounce(function () {
if (_this.visualizationStore) {
_this.visualizationStore.setConfig(_this.config);
_this.visualizationStore.onConfigChange(_this.config);
_this.updateView();
}
}, 500), {
equals: lodash_1.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_1.default.createElement(antd_1.Spin, { className: style.spin });
}
return (react_1.default.createElement(Measure_1.default, { onClient: function () { return _this.handleResize(); }, className: style.chartElement },
react_1.default.createElement("div", { className: style.chartElement, ref: function (element) { return _this.setElement(element); }, id: this.visualizationStore.el.slice(1) })));
};
__decorate([
mobx_1.observable.ref,
__metadata("design:type", Object)
], CustomChart.prototype, "visualizationStore", void 0);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CustomChart.prototype, "data", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CustomChart.prototype, "config", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CustomChart.prototype, "action", null);
__decorate([
bind_1.default,
mobx_1.action,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], CustomChart.prototype, "setVisualizationStore", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], CustomChart.prototype, "setElement", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], CustomChart.prototype, "updateView", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], CustomChart.prototype, "handleResize", null);
CustomChart = __decorate([
mobx_react_1.observer
], CustomChart);
return CustomChart;
}(BasicComponent_1.default));
exports.default = errorBoundary_1.default(StoreWrapper_1.default(CustomChart, store_1.default));