ze-react-component-library
Version:
ZeroETP React Component Library
196 lines (160 loc) • 6.94 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _pie = _interopRequireDefault(require("./pie.svg"));
var _Chart = _interopRequireDefault(require("../../../components/Chart"));
var _util = require("../../../components/Chart/util");
var _zeroetpApiSdk = require("zeroetp-api-sdk");
var _util2 = require("../../../util");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 _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); }
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 PieChart = /*#__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 result = (0, _util.multiValueToChartData)(data);
var _a = (0, _util.getChartProperties)(result),
measurementProps = _a.measurementProps,
dimensionProps = _a.dimensionProps; // 拿第一个measurementProp
var firstMeasurementProp = measurementProps[0];
var firstDimensionProp = dimensionProps[0];
var chartOption = {
tooltip: {
trigger: "item"
},
legend: {
type: "scroll",
orient: "vertical",
right: 10,
top: 20,
bottom: 20,
padding: [0, 50]
},
series: [{
type: "pie",
label: {
position: "inside",
show: true,
formatter: function formatter(p) {
var name = p.name; // feat: show name in steadof id
if (_typeof(p.data) === "object" && p.seriesName + ".name" in p.data) {
name = p.data[p.seriesName + ".name"];
} // feat: 显示绝对值，但是如果绝对值本身是百分比，那么显示
var formattedValue = (0, _util2.formatWithProperty)(firstMeasurementProp, p.data[firstMeasurementProp.name]);
if (firstMeasurementProp.type === "percentage") {
return name + "\n" + p.percent + "%";
} else {
return name + "\n" + formattedValue + "\n" + p.percent + "%";
}
}
},
radius: ["50%", "95%"],
bottom: isMobile ? 24 : 0,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2
},
emphasis: {
label: {
show: true,
fontWeight: "bold"
}
},
labelLine: {
show: false
}
}]
};
if (isMobile) {
chartOption.legend = {
bottom: 0,
type: "scroll"
};
} // legend formatter for show entity name instead of id
if (!Array.isArray(chartOption.legend)) {
chartOption.legend.formatter = function (value) {
if (result === null || result === void 0 ? void 0 : result.columnProperties) {
var groupbyProp = firstDimensionProp;
if (groupbyProp.primal_type === "object" && groupbyProp.schema) {
var item = result.result.find(function (r) {
return r._id === value;
});
var nameProp = (0, _zeroetpApiSdk.getNameProperty)(groupbyProp.schema);
if (nameProp && item && _typeof(item[groupbyProp.name]) === "object") {
// 有可能因为entity id不存在，item[groupbyProp.name]返回了一个string
return item[groupbyProp.name][nameProp.name];
}
}
}
return value;
};
}
return /*#__PURE__*/_react.default.createElement(_Chart.default, __assign({}, restProps, {
result: __assign(__assign({}, result), {
result: result === null || result === void 0 ? void 0 : result.result.map(function (d) {
var dd = {}; // boolean类型的值需要处理下，否则不能正常显示
Object.entries(d).forEach(function (_a) {
var k = _a[0],
v = _a[1];
if (typeof v === "boolean") {
dd[k] = String(v);
} else {
dd[k] = v;
}
});
return dd;
})
}),
chartOption: chartOption,
userOption: userOption,
eventsDict: eventsDict,
style: style,
isMobile: isMobile
}));
});
var pie = {
key: "pie",
title: "饼图",
icon: _pie.default,
tip: "搜索结果中至少一个属性列和一个数值列",
type: "basic",
component: function component(props) {
return /*#__PURE__*/_react.default.createElement(PieChart, __assign({}, props));
},
valid: function valid(res) {
return (0, _util.isChartDataValid)(res, -1);
}
};
var _default = pie;
exports.default = _default;