ze-react-component-library
Version:
ZeroETP React Component Library
219 lines (174 loc) • 9.36 kB
JavaScript
;
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getChartDataset", {
enumerable: true,
get: function get() {
return _commonOption.getChartDataset;
}
});
Object.defineProperty(exports, "tooltipFormatter", {
enumerable: true,
get: function get() {
return _commonOption.tooltipFormatter;
}
});
exports.default = void 0;
require("antd/lib/result/style");
var _result = _interopRequireDefault(require("antd/lib/result"));
var _react = _interopRequireWildcard(require("react"));
var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
var _deepmerge = _interopRequireDefault(require("deepmerge"));
var _commonOption = _interopRequireWildcard(require("./common-option"));
var _reactErrorBoundary = require("react-error-boundary");
var _useTheme = require("../../hooks/useTheme");
var _useFrontConfig = require("../../hooks/useFrontConfig");
var _util = require("../../util");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__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 Chart = /*#__PURE__*/(0, _react.memo)(function (_a) {
var result = _a.result,
_b = _a.chartOption,
chartOption = _b === void 0 ? {} : _b,
_c = _a.userOption,
userOption = _c === void 0 ? {} : _c,
_d = _a.style,
style = _d === void 0 ? {} : _d,
_e = _a.eventsDict,
eventsDict = _e === void 0 ? {} : _e,
isMobile = _a.isMobile,
useNameAsDimension = _a.useNameAsDimension,
height = _a.height,
title = _a.title;
var theme = (0, _useTheme.useTheme)().theme;
var echartsSetting = (0, _useFrontConfig.useEChartsSetting)(); // console.log("commonOption", commonOption);
// console.log("chartOption", chartOption);
// console.log("userOption", userOption);
// console.log("finalOption", finalOption);
var content = (0, _react.useMemo)(function () {
var commonOption = (0, _commonOption.default)(result, isMobile, useNameAsDimension, theme, title);
var finalOption = _deepmerge.default.all([commonOption, chartOption, userOption]); // 统一根据用户的图表设置来展示label、平均线
if (finalOption.series instanceof Array && result) {
finalOption.series = finalOption.series.map(function (d, i) {
var _a;
var _b, _c, _d, _e, _f, _g, _h, _j;
var name = // @ts-ignore
(_b = d.name) !== null && _b !== void 0 ? _b : (_d = (_c = finalOption.dataset) === null || _c === void 0 ? void 0 : _c.dimensions) === null || _d === void 0 ? void 0 : _d[i + 1];
var property = (_e = result === null || result === void 0 ? void 0 : result.columnProperties) === null || _e === void 0 ? void 0 : _e.find(function (f) {
return f.name === name;
});
var s = __assign(__assign({}, d), {
label: __assign(__assign({
formatter: function formatter(v) {
var _a;
return (0, _util.formatWithProperty)(property, (_a = v === null || v === void 0 ? void 0 : v.value) === null || _a === void 0 ? void 0 : _a[name]);
}
}, d.label), echartsSetting === null || echartsSetting === void 0 ? void 0 : echartsSetting.seriesLabel),
labelLayout: {
hideOverlap: true
}
}); // 是否展示平均线
if (!["pie", "map", "treemap", "funnel", "guage"].includes(s.type) && ((_f = echartsSetting === null || echartsSetting === void 0 ? void 0 : echartsSetting.averageLine) === null || _f === void 0 ? void 0 : _f.show) && !(finalOption.dataset instanceof Array) && ((_g = finalOption.dataset) === null || _g === void 0 ? void 0 : _g.source) instanceof Array) {
var sum_1 = 0;
(_h = finalOption.dataset) === null || _h === void 0 ? void 0 : _h.source.forEach(function (m) {
var _a;
sum_1 = sum_1 + ((_a = m[name]) !== null && _a !== void 0 ? _a : 0);
});
var average_1 = Number((sum_1 / finalOption.dataset.source.length).toFixed(2));
var key = "yAxis";
if (finalOption.xAxis instanceof Array) {
if (finalOption.xAxis.some(function (d) {
return d.type === "value";
})) {
key = "xAxis";
}
} else if (((_j = finalOption.xAxis) === null || _j === void 0 ? void 0 : _j.type) === "value") {
key = "xAxis";
}
s.markLine = {
data: [(_a = {}, _a[key] = average_1, _a.label = {
position: "middle",
color: "red",
formatter: function formatter(v) {
return (0, _util.formatWithProperty)(property, average_1);
}
}, _a.lineStyle = {
color: "red"
}, _a)],
symbol: "none",
silent: true
};
}
return s;
});
} // fix: echarts的dblclick同时会触发click，而且移动端dblclick不起作用，这里自己模拟一个
var clickTimer;
var echartEventDict = __assign(__assign({}, eventsDict), {
dblclick: undefined,
click: function click(params) {
var _a, _b, _c, _d, _e; // 找到未格式化的原始数据
var originData = ((_b = (_a = params === null || params === void 0 ? void 0 : params.data) === null || _a === void 0 ? void 0 : _a["@rawData"]) === null || _b === void 0 ? void 0 : _b.origin) || [];
var seriesIndex = params.seriesIndex;
var seriesName = ((_c = result.columnProperties[seriesIndex]) === null || _c === void 0 ? void 0 : _c.name) || '';
var item = originData.find(function (f) {
return seriesName.includes(f === null || f === void 0 ? void 0 : f.key);
});
if (item) {
item.groupby = (_d = result.logicform) === null || _d === void 0 ? void 0 : _d.groupby;
}
if (clickTimer) {
// console.log("dbl click");
clearTimeout(clickTimer);
clickTimer = undefined;
(_e = eventsDict.dblclick) === null || _e === void 0 ? void 0 : _e.call(eventsDict, params, item);
} else {
clickTimer = setTimeout(function () {
var _a; // console.log("click");
clickTimer = undefined;
(_a = eventsDict.click) === null || _a === void 0 ? void 0 : _a.call(eventsDict, params, item);
}, 200);
}
}
});
return /*#__PURE__*/_react.default.createElement(_echartsForReact.default, {
style: __assign({
height: height !== null && height !== void 0 ? height : "100%",
minHeight: 100
}, style),
option: finalOption,
notMerge: true,
lazyUpdate: true,
onEvents: echartEventDict,
theme: "my_theme"
});
}, [theme, echartsSetting, result, JSON.stringify(chartOption), JSON.stringify(userOption), JSON.stringify(style), eventsDict, isMobile, height, useNameAsDimension, title]);
return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
fallbackRender: function fallbackRender(errorProps) {
return /*#__PURE__*/_react.default.createElement(_result.default, {
status: "error",
title: "\u56FE\u8868\u914D\u7F6E\u6709\u8BEF\uFF0C\u8BF7\u8054\u7CFB\u6280\u672F\u652F\u6301\u68C0\u67E5\u4EE3\u7801",
subTitle: errorProps.error
});
}
}, content);
});
var _default = Chart;
exports.default = _default;