@cainiaofe/cn-ui-charts
Version:
324 lines (323 loc) • 10.8 kB
JavaScript
var _getLowCodeCoreUtil, _getLowCodeCoreUtil2;
import { Bundle } from '@ali/visualengine';
import Icon from "./logo";
import { createFeatureSetters, createFilterConfigSetter, getArraySetterSnippet, getCnSelectSetterSnippet, getComponentTitle, getDataOriginSetterSnippet, getJSXTemplate, getNodeIdSetterSnippet, getObjectSetterSnippet } from "../../common/manager/setter-snippet";
import ChartServiceSelectSetter from "../../common/setter/chart-service-select-setter";
import { getMixedSetterSnippet, StatisticSetter } from "../../common/setter/statistic-setter";
import { __dataSource__, __featureConfig__, dataOriginRequest, statisticCardDs } from "../../common/util/const";
import { DisplayPosition } from "../../types/display-position";
import { createDataSourceSetters, getJSExpressionPrototype, getLowCodeCoreUtil, handleI18nLabel, isArrayNotEmpty, uuid } from "../../common/util/util";
import { FeaturePosition } from "../../types/feature-position";
import TipSetter from "../../common/setter/tip-setter";
// 原型配置请参考：https://lark.alipay.com/vision/docs/prototype
export default Bundle.createPrototype({
title: '指标卡',
componentName: 'CnStatisticCard',
category: '图表',
icon: Icon,
enableCopy: true,
docUrl: '',
snippets: [{
screenshot: 'https://img.alicdn.com/imgextra/i1/O1CN01mYDpXB1cQ6JjQ57Y6_!!6000000003594-0-tps-830-354.jpg',
label: 'CnStatisticCard',
schema: {
componentName: 'CnStatisticCard',
props: {}
}
}],
configure: [{
name: 'isCnStatisticCard',
title: 'CnStatisticCard',
initialValue: true,
display: 'none'
}, {
name: 'isCnFilter',
title: 'isCnFilter',
initialValue: true,
display: 'none'
}, {
name: '_context',
title: '上下文',
initialValue: {
type: 'JSExpression',
value: 'this'
},
display: 'none'
}, getComponentTitle({
initialValue: '指标卡1'
}), getDataOriginSetterSnippet({
defaultValue: dataOriginRequest,
initialValue: dataOriginRequest
}), {
name: 'dataFrom',
title: '数据来源',
display: 'inline',
setter: /*#__PURE__*/React.createElement(ChartServiceSelectSetter, {
leftDom: StatisticSetter
}),
disabled: function disabled() {
return this.getProps().getPropValue('dataOrigin') === 'static';
}
}, {
name: 'dataSource',
title: '静态数据',
display: 'plain',
className: 'cn-datasource-relative-setter cn-datasource-relative-setter2',
setter: getMixedSetterSnippet({
setters: [getArraySetterSnippet({
initialValue: {
title: '示例数据',
value: '999',
key: uuid(6)
},
configure: [{
isRequired: true,
name: 'title',
title: '标题',
setter: 'StringSetter'
}, {
name: 'key',
title: '编码（唯一标识）',
setter: 'StringSetter'
}, {
name: 'tip',
title: '标题提示',
setter: 'StringSetter'
}, {
name: 'value',
isRequired: true,
title: '主数据',
setter: 'StringSetter'
}, {
name: 'suffix',
title: '主数据前缀',
setter: 'StringSetter'
}, {
name: 'prefix',
title: '主数据后缀',
setter: 'StringSetter'
}, {
name: 'bgColor',
title: '背景色',
setter: getCnSelectSetterSnippet({
options: statisticCardDs
})
}]
}), getJSExpressionPrototype({
type: 'base'
})]
}),
disabled: function disabled() {
return this.getProps().getPropValue('dataOrigin') === 'request';
}
}, {
name: 'activeKey',
title: '默认激活的卡片',
display: 'inline',
setter: {
componentName: 'MixedSetter',
props: {
setters: [{
componentName: 'CnSelectSetter',
title: '选择tab项',
props: function props(prop) {
var _prop$getNode, _prop$getNode$call;
var list = [];
var temp = prop === null || prop === void 0 ? void 0 : (_prop$getNode = prop.getNode) === null || _prop$getNode === void 0 ? void 0 : (_prop$getNode$call = _prop$getNode.call(prop)) === null || _prop$getNode$call === void 0 ? void 0 : _prop$getNode$call.getPropValue('dataSource');
if (isArrayNotEmpty(temp)) {
temp.forEach(function (item) {
var _ref = item || {},
key = _ref.key,
title = _ref.title;
if (key) {
var realTitle = handleI18nLabel(title);
list.push({
label: realTitle + "\uFF08" + key + "\uFF09",
value: key
});
}
});
}
return {
mode: 'multiple',
options: list
};
}
}, {
componentName: 'ParamSelectSetter',
props: {
configList: [{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true
}]
},
title: '从数据源选择'
}, getJSExpressionPrototype({
type: 'base'
})]
}
},
hidden: function hidden(value) {
var _this$parent, _this$parent$parent, _this$parent$parent$g;
return (this === null || this === void 0 ? void 0 : (_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : (_this$parent$parent = _this$parent.parent) === null || _this$parent$parent === void 0 ? void 0 : (_this$parent$parent$g = _this$parent$parent.getPropValue) === null || _this$parent$parent$g === void 0 ? void 0 : _this$parent$parent$g.call(_this$parent$parent, 'dataOrigin')) === 'request';
}
}, createFilterConfigSetter(), {
name: 'normalStyle',
title: '样式',
setter: getObjectSetterSnippet({
items: [{
name: 'customTooltip',
display: 'inline',
title: '自定义标题提示',
setter: getMixedSetterSnippet({
setters: [/*#__PURE__*/React.createElement(TipSetter, {
tip: '请点击右侧切换按钮写JS表达式'
}), getJSXTemplate({
position: DisplayPosition.statisticCard_titleTip
})]
})
}, {
name: 'cardType',
title: '指标卡样式',
defaultValue: 'normal',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [{
label: '无边框',
value: 'noBorder'
}, {
label: '普通',
value: 'normal'
}]
}
}
}, {
name: 'layout',
title: '布局',
defaultValue: 'grid',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [{
label: '响应式布局',
value: 'grid'
}, {
label: '流式布局',
value: 'flex'
}]
}
}
}, {
name: 'size',
title: '紧凑模式',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [{
title: '极紧凑',
value: 'xs'
}, {
title: '紧凑',
value: 'small'
}, {
title: '正常',
value: 'medium'
}, {
title: '宽松',
value: 'large'
}]
}
},
condition: function condition(prop) {
var _prop$parent, _prop$parent$getValue;
return (prop === null || prop === void 0 ? void 0 : (_prop$parent = prop.parent) === null || _prop$parent === void 0 ? void 0 : (_prop$parent$getValue = _prop$parent.getValue) === null || _prop$parent$getValue === void 0 ? void 0 : _prop$parent$getValue.call(_prop$parent).layout) === 'grid';
}
}, {
name: 'col',
title: '一行几列',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [{
label: '全部展示在一行',
value: 'one'
}, {
label: '1',
value: 1
}, {
label: '2',
value: 2
}, {
label: '3',
value: 3
}, {
label: '4',
value: 4
}, {
label: '6',
value: 6
}, {
label: '8',
value: 8
}]
}
},
condition: function condition(prop) {
var _prop$parent2, _prop$parent2$getValu;
return (prop === null || prop === void 0 ? void 0 : (_prop$parent2 = prop.parent) === null || _prop$parent2 === void 0 ? void 0 : (_prop$parent2$getValu = _prop$parent2.getValue) === null || _prop$parent2$getValu === void 0 ? void 0 : _prop$parent2$getValu.call(_prop$parent2).layout) === 'flex';
}
}, {
name: 'bgColor',
title: '背景色',
setter: getCnSelectSetterSnippet({
options: statisticCardDs
})
}, {
name: 'mode',
title: '是否可选中',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [{
label: '不支持选中',
value: 'none'
}, {
label: '单选',
value: 'single'
}, {
label: '多选',
value: 'multiple'
}]
}
}
}]
})
}].concat(((_getLowCodeCoreUtil = getLowCodeCoreUtil('event.createEventSetters')) === null || _getLowCodeCoreUtil === void 0 ? void 0 : _getLowCodeCoreUtil({
position: getLowCodeCoreUtil('enumMap.ButtonPosition.statisticCardEvent'),
initialValue: {
optType: 'flowAction'
},
title: '配置指标卡的回调'
})) || [], [{
name: 'extra',
title: '右侧按钮栏',
display: 'accordion',
setter: (_getLowCodeCoreUtil2 = getLowCodeCoreUtil('button.createButtonListSetters')) === null || _getLowCodeCoreUtil2 === void 0 ? void 0 : _getLowCodeCoreUtil2({
position: getLowCodeCoreUtil('enumMap.ButtonPosition.statisticCardRightButton')
})
}, {
name: __featureConfig__,
title: '增强功能',
setter: createFeatureSetters({
position: FeaturePosition.statisticCard
})
}, {
title: '高级配置',
type: 'group',
collapsed: true,
display: 'accordion',
items: [].concat(createDataSourceSetters(), [getNodeIdSetterSnippet()])
}])
});