@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
200 lines (199 loc) • 10.7 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 __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import * as React from 'react';
import { observer } from 'mobx-react';
import { computed } from 'mobx';
import { isNil, isNumber, get, toNumber } from 'lodash';
import { EChartFieldType, EChartConditionType } from '@qn-pandora/app-sdk';
import AntdTable from '../../../../components/Base/AntdTable';
import storeWrapper from '../../components/StoreWrapper';
import ChartContainer from '../../components/ChartContainer';
import BasicComponent from '../../../../components/Base/BasicComponent';
import { EProcessType } from '../../../../constants/table-style';
import { Align } from '../../../../components/Base/AntdTable/constant';
import { normalizeTimeFormat } from '../../../../utils/normalizeTimeFormat';
import ValueCell from '../components/ValueCell';
import TextCell from '../components/TextCell';
import errorBoundary from '../../../../hocs/errorBoundary';
import { isMobileDevice } from '../../../../utils/env';
import SparklineCell from '../components/SparklineCell';
import GridTableStore from './store';
import * as styles from '../style.mless';
var GridTableChart = /** @class */ (function (_super) {
__extends(GridTableChart, _super);
function GridTableChart() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.store = _this.props.store;
_this.sortNumFunc = function (a, b) {
var aNum = toNumber(a.current);
var bNum = toNumber(b.current);
if (isNaN(aNum) && isNaN(bNum)) {
return 0;
}
if (isNaN(aNum)) {
return -1;
}
if (isNaN(bNum)) {
return -1;
}
return aNum - bNum;
};
_this.sortStringFunc = function (a, b) {
return a.current - b.current;
};
return _this;
}
GridTableChart.prototype.componentWillUnmount = function () {
this.store.dispose();
};
Object.defineProperty(GridTableChart.prototype, "columns", {
get: function () {
var _this = this;
var baseDataSource = this.store.baseDataSource;
return this.store.renderColumns.map(function (column) {
var _a = _this.store.chartStyleService, textDisplayMode = _a.textDisplayMode, sparkline = _a.sparkline;
var _b = column.filters, filteredValue = _b === void 0 ? [] : _b, showFilter = column.showFilter, rest = __rest(column, ["filters", "showFilter"]);
var filtersSet = new Set();
var filters = undefined;
if (showFilter) {
baseDataSource.forEach(function (item) {
filtersSet.add(get(item, [column.dataIndex, 'current']));
});
if (filtersSet.size > 0) {
filters = Array.from(filtersSet).map(function (item) { return ({
text: item,
value: item
}); });
}
}
var base = __assign(__assign({}, rest), { width: column.width || undefined, align: Align.Left, resizable: !isMobileDevice() || _this.props.isEditing, sorter: function (a, b) {
var aCurrent = get(a, [column.dataIndex, 'current']);
var bCurrent = get(b, [column.dataIndex, 'current']);
if (column.isNumeric) {
var aNum = toNumber(aCurrent);
var bNum = toNumber(bCurrent);
if (isNaN(aNum) && isNaN(bNum)) {
return 0;
}
if (isNaN(aNum)) {
return -1;
}
if (isNaN(bNum)) {
return -1;
}
return aNum - bNum;
}
if (aCurrent < bCurrent) {
return -1;
}
if (aCurrent > bCurrent) {
return 1;
}
return 0;
}, title: (React.createElement(TextCell, { title: column.title, getPopupContainer: _this.getRootDOM, textBreakMode: textDisplayMode, isHeader: true }, column.title)), render: function (value, record) {
if (value === void 0) { value = { current: 0 }; }
if (column.type === EChartConditionType.SparkLine) {
return (React.createElement(SparklineCell, { data: (value.current || []), sparkline: sparkline }));
}
var eventHandler = {
onClick: !_this.store.chartCanClick
? undefined
: function (e) {
return _this.store.handleTableCellClick(record, {
key: column.key,
name: column.dataIndex,
type: column.type,
fieldType: column.fieldType
}, current, e);
}
};
// render时可能无法获取到当前列的value，故添加默认为空Object
var current = value.current;
if (isNil(current)) {
return React.createElement(TextCell, null);
}
// 时间类型的数据转换显示
if (column.fieldType === EChartFieldType.Time) {
return (React.createElement(TextCell, __assign({ textBreakMode: textDisplayMode }, eventHandler, { style: { padding: '12px' } }), isNumber(current)
? normalizeTimeFormat(current)
: current));
}
var processType = column.processType, _a = column.processValue, processValue = _a === void 0 ? 1 : _a;
var curProgress = 0;
if (processType === EProcessType.Max) {
curProgress = value.curMaxProcess;
}
else if (processType === EProcessType.Sum) {
curProgress = value.curSumProcess;
}
else {
curProgress = current / (processValue || 1);
}
return (React.createElement(ValueCell, __assign({ filterColumn: __assign({}, column), value: current, textBreakMode: textDisplayMode, progress: column.showProgress ? curProgress : 0 }, eventHandler)));
} });
if (showFilter) {
return __assign(__assign({}, base), { filterSearch: true, filterMultiple: true, filtered: showFilter && filteredValue.length > 0, filteredValue: filteredValue, filters: filters });
}
return base;
});
},
enumerable: false,
configurable: true
});
GridTableChart.prototype.render = function () {
return (React.createElement(ChartContainer, { onClient: this.props.store.debounceHandleClient },
React.createElement(AntdTable, { className: styles.tableChart, columns: this.columns, dataSource: this.store.tableData, bordered: this.store.bordered, onColumnsFiltersChange: this.store.onColumnsFiltersChange, tableOption: get(this.store.themeOption, 'table'), theme: this.store.theme, tableTitleFont: this.store.tableTitleFont, tableTitleBgColor: this.store.tableTitleBgColor, pagination: this.store.showPagination === false ? false : this.store.pagination, onSettingChange: this.store.onSettingChange, resizable: true })));
};
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], GridTableChart.prototype, "columns", null);
GridTableChart = __decorate([
observer
], GridTableChart);
return GridTableChart;
}(BasicComponent));
export default errorBoundary(storeWrapper(GridTableChart, GridTableStore));