ze-react-component-library
Version:
ZeroETP React Component Library
209 lines (183 loc) • 7.08 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
});
exports.default = void 0;
require("antd/lib/tooltip/style");
var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
var _react = _interopRequireWildcard(require("react"));
var _reactSizeme = require("react-sizeme");
var _icons = require("@ant-design/icons");
var _guage = _interopRequireDefault(require("./guage.svg"));
var _Chart = _interopRequireDefault(require("../../../components/Chart"));
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 __rest = void 0 && (void 0).__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;
};
var GuageChart = /*#__PURE__*/(0, _react.memo)(function (props) {
var data = props.result,
userOption = props.option,
eventsDict = props.eventsDict,
style = props.style,
isMobile = props.isMobile,
restProps = __rest(props, ["result", "option", "eventsDict", "style", "isMobile"]);
var columnProperties = ((data === null || data === void 0 ? void 0 : data.columnProperties) || []).filter(function (p) {
return p.type === "percentage";
});
var getChartOption = function getChartOption(d) {
return {
legend: {
show: false
},
tooltip: {
show: false
},
series: {
color: "#1890ff",
name: d.name,
min: -2,
max: 2,
type: "gauge",
radius: "80%",
progress: {
show: true,
width: 18
},
axisLine: {
lineStyle: {
width: 18
}
},
axisTick: {
show: false
},
splitLine: {
length: 10,
lineStyle: {
width: 2,
color: "#999"
}
},
axisLabel: {
formatter: function formatter(v) {
return "" + v * 100;
},
distance: 25,
color: "#999"
},
anchor: {
show: true,
showAbove: true,
size: 25,
itemStyle: {
borderColor: "#1890ff",
borderWidth: 10
}
},
title: {
show: false
},
detail: {
show: false
}
}
};
};
return /*#__PURE__*/_react.default.createElement("div", {
style: {
display: "flex",
height: "100%"
}
}, columnProperties.map(function (d) {
return /*#__PURE__*/_react.default.createElement(_reactSizeme.SizeMe, {
monitorHeight: true,
key: d.name
}, function (_a) {
var _b, _c;
var _d = _a.size,
width = _d.width,
height = _d.height;
return /*#__PURE__*/_react.default.createElement("div", {
style: {
width: 1 / columnProperties.length * 100 + "%",
position: "relative"
}
}, /*#__PURE__*/_react.default.createElement(_Chart.default, __assign({}, restProps, {
result: data,
chartOption: getChartOption(d),
userOption: userOption,
eventsDict: eventsDict,
style: style,
isMobile: isMobile
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
position: "absolute",
left: "50%",
top: height && width ? height > width ? height * 0.5 + width * 0.3 : height * 0.5 + height * 0.3 : "80%",
transform: "translateX(-50%)",
textAlign: "center"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
fontSize: 24,
fontWeight: "bolder",
whiteSpace: "nowrap"
}
}, (((_c = (_b = data.result) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c[d.name]) * 100).toFixed(2), " %"), /*#__PURE__*/_react.default.createElement("div", {
style: {
fontSize: 16
}
}, d.name, d.description && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
title: d.description
}, /*#__PURE__*/_react.default.createElement(_icons.QuestionCircleOutlined, {
style: {
marginLeft: 4
}
})))));
});
}));
});
var Guage = {
key: "guage",
title: "仪表盘",
icon: _guage.default,
tip: "搜索结果需为数值列且展示类型为百分比",
type: "basic",
component: function component(props) {
return /*#__PURE__*/_react.default.createElement(GuageChart, __assign({}, props));
},
valid: function valid(result) {
if (!result) return false;
var columnProperties = result.columnProperties;
if ((columnProperties || []).every(function (p) {
return p.type === "percentage";
})) {
return true;
}
return false;
}
};
var _default = Guage;
exports.default = _default;