ze-react-component-library
Version:
ZeroETP React Component Library
413 lines (342 loc) • 13.8 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); }
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 __spreadArray = this && this.__spreadArray || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
to[j] = from[i];
}
return to;
};
import { getNameProperty, isSimpleQuery } from "zeroetp-api-sdk";
import { formatWithProperty } from "../../util";
import pivotResult from "../../util/pivotResult"; // 给竖着的axis的label配置一个比较好的formatter
var yAxisLabelFormatter = function yAxisLabelFormatter(value) {
// 每隔n个字符换行
var chars = String(value).split("");
var newValue = "";
for (var i = 0; i < chars.length; i++) {
var char = chars[i];
if (i > 0 && i % 8 === 0) {
newValue += "\n";
}
newValue += char; // 最多11个字符
if (newValue.length >= 15) {
newValue += "...";
return newValue;
}
}
return newValue;
};
var axisLabelOptionForImage = function axisLabelOptionForImage(property, result, isY, chartHeight) {
var axisOption = {};
if (result && property.schema && _typeof(property.schema) === "object" && // 老的SDB里面，custom func的property会返回那个func的schema，string格式，其实是错的。
property.schema.properties) {
var imgProp_1 = property.schema.properties.find(function (d) {
return d.type === "image";
});
if (imgProp_1 && result.result.length > 0) {
var imgMap_1 = {};
var nameProp_1 = getNameProperty(property.schema); // （图表高度 - legend高度 - 横坐标高度）/个数
var yLabelMaxHeight_1 = chartHeight ? (chartHeight - 102) / result.result.length : 0;
var showImage_1 = true;
result.result.map(function (item, index) {
var formattedV = "";
if (nameProp_1 && _typeof(result.result[index][property.name]) === "object") {
formattedV = result.result[index][property.name][nameProp_1.name]; // 给个回车。如果字太多的话
formattedV = yAxisLabelFormatter(formattedV);
}
if (isY) {
// 图片高度+文字高度
var labelHeight = 38 + 14 * formattedV.split("\n").length;
showImage_1 = showImage_1 && labelHeight < yLabelMaxHeight_1;
}
imgMap_1[index] = {
height: 30,
align: isY ? "right" : "center",
lineHeight: 38,
labelTitle: formattedV,
backgroundColor: {
image: item[property.name][imgProp_1.name] || "/images/placeholder.jpeg"
}
};
}); // RULE: 只有图片数量不超过10个的时候才显示，不然太多了
if (showImage_1 && result.result.length <= 10) {
axisOption = {
rich: imgMap_1,
rotate: 0,
interval: 0,
hideOverlap: false,
formatter: function formatter(v, index) {
var _a; // show name insteadof id
var formattedV;
if (nameProp_1) {
formattedV = (_a = imgMap_1[index]) === null || _a === void 0 ? void 0 : _a.labelTitle;
} else {
formattedV = formatWithProperty(property, v);
}
return "{" + index + "| }\n{value|" + formattedV + "}";
},
padding: isY ? 0 : [-4, 0, 12, 0],
align: isY ? "right" : "center"
};
}
}
}
return axisOption;
};
var getAxisNameOption = function getAxisNameOption(property, isCategory) {
var _a;
var nameOption = isCategory ? {
name: ((_a = property === null || property === void 0 ? void 0 : property.name) === null || _a === void 0 ? void 0 : _a.startsWith("@@")) ? "" : property === null || property === void 0 ? void 0 : property.name,
nameGap: 0,
z: 1,
nameTextStyle: {
padding: [0, 0, 0, 60]
}
} : {
name: property.unit
};
return nameOption;
};
export var xAxisOptionForProperty = function xAxisOptionForProperty(property, result, isCategory, chartHeight) {
if (!property) return {};
var axisOption = __assign({
axisLabel: {
formatter: function formatter(v) {
return formatWithProperty(property, v);
}
}
}, getAxisNameOption(property, isCategory));
if (property.primal_type === "string" || property.primal_type === "object") {
axisOption.axisLabel.rotate = 45;
} // show name insteadof id
if (property.primal_type === "object") {
axisOption.axisLabel.formatter = function (v, index) {
if (property.schema && _typeof(property.schema) === "object") {
var nameProp = getNameProperty(property.schema);
if (nameProp) {
return result.result[index][property.name][nameProp.name];
}
}
return v;
};
} // feat: show image for entity
axisOption.axisLabel = __assign(__assign(__assign({}, axisOption.axisLabel), axisLabelOptionForImage(property, result, false, chartHeight)), {
width: 80,
overflow: "truncate",
interval: 0,
hideOverlap: true
});
return axisOption;
};
export var yAxisOptionForProperty = function yAxisOptionForProperty(property, result, isCategory, chartHeight) {
if (!property) return {};
var axisOption = __assign(__assign({
// min: 'dataMin',
// max: 'dataMax',
axisLabel: {
formatter: function formatter(v, index) {
if (property.primal_type === "string" || property.primal_type === "object") {
var realV = v; // show name insteadof id
if (property.primal_type === "object") {
if (property.schema && _typeof(property.schema) === "object") {
var nameProp = getNameProperty(property.schema);
if (nameProp && _typeof(result.result[index][property.name]) === "object") {
realV = result.result[index][property.name][nameProp.name];
}
}
}
return yAxisLabelFormatter(realV); // y轴的文字，会有一个换行逻辑，用以压缩空间
} else {
return formatWithProperty(property, v);
}
}
}
}, getAxisNameOption(property, isCategory)), {
nameLocation: isCategory ? "start" : "end"
}); // feat: show image for entity
axisOption.axisLabel = __assign(__assign(__assign({}, axisOption.axisLabel), axisLabelOptionForImage(property, result, true, chartHeight)), {
width: 100,
overflow: "truncate",
hideOverlap: true
});
return axisOption;
};
export var getMarkLineOptions = function getMarkLineOptions(property) {
if (property.target) {
return {
markLine: {
silent: true,
lineStyle: {
color: "red"
},
label: {
formatter: function formatter() {
return formatWithProperty(property, property.target);
},
position: "middle"
},
data: [{
yAxis: property.target
}]
}
};
}
return {};
};
export var getChartProperties = function getChartProperties(result) {
var _a;
var dimensionProps = [];
var measurementProps = [];
if (result) {
if (((_a = result.logicform.groupby) === null || _a === void 0 ? void 0 : _a.length) > 0) {
dimensionProps = result.columnProperties.slice(0, result.logicform.groupby.length);
measurementProps = result.columnProperties.slice(result.logicform.groupby.length);
} else {
result.columnProperties.forEach(function (d) {
if (d.primal_type === "number") {
measurementProps.push(d);
} else if (d.primal_type === "date") {
dimensionProps = __spreadArray([d], dimensionProps);
} else {
dimensionProps.push(d);
}
});
}
}
var measurementTypes = [];
var hasPercentage = false;
measurementProps.forEach(function (p) {
if (p.type === "percentage") {
hasPercentage = true;
} else if (p.type && !measurementTypes.includes(p.type)) {
measurementTypes.push(p.type);
}
}); // 确保多坐标轴时，百分比坐标轴为第二坐标轴
if (hasPercentage) {
measurementTypes.push("percentage");
}
return {
dimensionProps: dimensionProps,
measurementProps: measurementProps,
measurementTypes: measurementTypes
};
};
export var setYAxisForValue = function setYAxisForValue(result, chartOption, userOption) {
var _a;
if (result) {
var _b = getChartProperties(result),
measurementProps = _b.measurementProps,
measurementTypes = _b.measurementTypes;
var firstMeasurementProp_1 = (_a = measurementProps.find(function (f) {
return f.type !== "percentage";
})) !== null && _a !== void 0 ? _a : measurementProps[0];
var restMeasurementProps = measurementProps.filter(function (f) {
return f.name !== (firstMeasurementProp_1 === null || firstMeasurementProp_1 === void 0 ? void 0 : firstMeasurementProp_1.name);
});
var restMeasurementTypes_1 = measurementTypes.filter(function (f) {
return f !== (firstMeasurementProp_1 === null || firstMeasurementProp_1 === void 0 ? void 0 : firstMeasurementProp_1.type);
});
var secondMeasurementProp = void 0;
if (restMeasurementTypes_1.length > 0) {
secondMeasurementProp = restMeasurementProps.find(function (p) {
return p.type === "percentage";
});
if (!secondMeasurementProp) {
secondMeasurementProp = restMeasurementProps.find(function (p) {
return p.type === restMeasurementTypes_1[0];
});
}
} // axis
chartOption.yAxis = [];
chartOption.yAxis.push(__assign({
type: "value"
}, yAxisOptionForProperty(firstMeasurementProp_1, result)));
if (measurementTypes.length > 1) {
// 这里看看是不是用户只需要一个legend（就是以前的isOtherPredsSupplementary配置）
var isLegendSelectionModeSingle = false;
if ((userOption === null || userOption === void 0 ? void 0 : userOption.legend) && !Array.isArray(userOption.legend)) {
isLegendSelectionModeSingle = userOption.legend.selectedMode === "single";
}
if (secondMeasurementProp) {
chartOption.yAxis.push(__assign(__assign({
type: "value"
}, yAxisOptionForProperty(secondMeasurementProp, result)), {
position: "right",
splitLine: {
show: isLegendSelectionModeSingle
}
}));
}
}
}
};
export var isChartDataValid = function isChartDataValid(result, dimensionPropsMin) {
if (dimensionPropsMin === void 0) {
dimensionPropsMin = 0;
} // event的可以支持chart。但entity的不行
if (result && result.schema.type === "entity" && isSimpleQuery(result.logicform)) {
return false;
}
var _a = getChartProperties(result),
dimensionProps = _a.dimensionProps,
measurementProps = _a.measurementProps;
return dimensionProps.length > dimensionPropsMin && measurementProps.length > 0;
};
export var canUseDualAxis = function canUseDualAxis(result) {
var measurementTypes = getChartProperties(result).measurementTypes;
return measurementTypes.length > 1;
};
export var pivotResultForChart = function pivotResultForChart(result) {
var _a, _b;
var data = result; // feat: 二维分组，pivotData
if (((_b = (_a = data === null || data === void 0 ? void 0 : data.logicform) === null || _a === void 0 ? void 0 : _a.groupby) === null || _b === void 0 ? void 0 : _b.length) === 2) {
// 要决定哪个在row，哪个在col。时间的那个一定在row
var rows = [data.logicform.groupby[0].name];
var cols = [data.logicform.groupby[1].name]; // switch两个groupby
if (data.columnProperties[0].primal_type !== "date" && data.columnProperties[1].primal_type === "date") {
// 对应groupby[0]和groupby[1]
rows = [data.logicform.groupby[1].name];
cols = [data.logicform.groupby[0].name];
}
var pivoted = pivotResult(data, {
rows: rows,
cols: cols,
values: [data.logicform.preds[0].name]
});
data = pivoted;
}
return data;
};
export var multiValueToChartData = function multiValueToChartData(result) {
var _a, _b, _c, _d;
if (!((_a = result === null || result === void 0 ? void 0 : result.logicform) === null || _a === void 0 ? void 0 : _a.groupby) && ((_b = result === null || result === void 0 ? void 0 : result.columnProperties) === null || _b === void 0 ? void 0 : _b.every(function (f) {
return f.primal_type === "number";
})) && ((_c = result === null || result === void 0 ? void 0 : result.result) === null || _c === void 0 ? void 0 : _c.length) === 1) {
var data_1 = (_d = result === null || result === void 0 ? void 0 : result.result) === null || _d === void 0 ? void 0 : _d[0];
return __assign(__assign({}, result), {
columnProperties: [{
type: "string",
primal_type: "string",
name: "@@key"
}, __assign(__assign({}, result.columnProperties[0]), {
name: "@@value"
})],
result: result.columnProperties.map(function (m) {
var _a;
return _a = {}, _a["@@key"] = m.name, _a["@@value"] = data_1[m.name], _a;
})
});
}
return result;
};