@castianta/chart-lc
Version:
1,233 lines (1,171 loc) • 77 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _drawer = _interopRequireDefault(require("antd/lib/drawer"));
var _space = _interopRequireDefault(require("antd/lib/space"));
var _switch = _interopRequireDefault(require("antd/lib/switch"));
var _divider = _interopRequireDefault(require("antd/lib/divider"));
var _form = _interopRequireDefault(require("antd/lib/form"));
var _extends19 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _input = _interopRequireDefault(require("antd/lib/input"));
var _select = _interopRequireDefault(require("antd/lib/select"));
var _radio = _interopRequireDefault(require("antd/lib/radio"));
var _popover = _interopRequireDefault(require("antd/lib/popover"));
var _button = _interopRequireDefault(require("antd/lib/button"));
var _row = _interopRequireDefault(require("antd/lib/row"));
var _slider = _interopRequireDefault(require("antd/lib/slider"));
var _col = _interopRequireDefault(require("antd/lib/col"));
var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
var _inputNumber = _interopRequireDefault(require("antd/lib/input-number"));
var _react = _interopRequireWildcard(require("react"));
var _proCard = _interopRequireDefault(require("@ant-design/pro-card"));
var _reactColor = require("react-color");
var _lcjs = require("@arction/lcjs");
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; }
var family = ['initial', 'Arial', 'Helvetica', 'serif', 'sans-serif', 'cursive', 'fantasy', 'Microsoft YaHei'];
var weight = ['normal', 'bold', 'bolder', 'lighter', 'initial', 'inherit'];
var style = ['normal', 'italic', 'oblique', 'inherit'];
var variant = ['normal', 'small-caps', 'inherit'];
var SliderNumber = function SliderNumber(_ref) {
var value = _ref.value,
onChange = _ref.onChange;
var _useState = (0, _react.useState)(0),
min = _useState[0],
setMin = _useState[1];
var _useState2 = (0, _react.useState)(100),
max = _useState2[0],
setMax = _useState2[1];
return /*#__PURE__*/_react["default"].createElement(_row["default"], {
style: {
padding: 0
}
}, /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 6,
style: {
paddingRight: 5
}
}, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
trigger: ['focus'],
title: "\u6700\u5C0F\u503C",
placement: "topLeft",
overlayClassName: "numeric-input"
}, /*#__PURE__*/_react["default"].createElement(_inputNumber["default"], {
min: 0,
value: min,
onChange: function onChange(value) {
return setMin(value);
},
placeholder: "\u6700\u5C0F\u503C",
style: {
width: '100%'
}
}))), /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 12
}, /*#__PURE__*/_react["default"].createElement(_slider["default"], {
range: true,
min: min,
max: max,
onChange: onChange,
value: value,
style: {
padding: 0
}
})), /*#__PURE__*/_react["default"].createElement(_col["default"], {
span: 6,
style: {
paddingLeft: 5
}
}, /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
trigger: ['focus'],
title: "\u6700\u5927\u503C",
placement: "topLeft",
overlayClassName: "numeric-input"
}, /*#__PURE__*/_react["default"].createElement(_inputNumber["default"], {
min: 0,
value: max,
placeholder: "\u6700\u5927\u503C",
onChange: function onChange(value) {
return setMax(value);
},
style: {
width: '100%'
}
}))));
};
var itemRender = function itemRender(_ref2, type) {
var value = _ref2.value,
_onChange = _ref2.onChange,
_ref2$options = _ref2.options,
options = _ref2$options === void 0 ? [] : _ref2$options,
_ref2$chart3D = _ref2.chart3D,
chart3D = _ref2$chart3D === void 0 ? false : _ref2$chart3D,
defaultValue = _ref2.defaultValue;
switch (type) {
case 'inputNumber':
return /*#__PURE__*/_react["default"].createElement(_inputNumber["default"], {
style: {
width: 100,
"float": 'right'
},
min: 0,
value: value,
onChange: function onChange(value) {
return _onChange(value);
}
});
case 'color':
return /*#__PURE__*/_react["default"].createElement(_popover["default"], {
placement: "bottomRight",
content: /*#__PURE__*/_react["default"].createElement(_reactColor.SketchPicker, {
color: value !== null && value !== void 0 ? value : '#000',
onChange: function onChange(_ref3) {
var rgb = _ref3.rgb;
return _onChange("rgba(" + Object.values(rgb).toString() + ")");
}
})
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
style: {
width: 40,
"float": 'right',
paddingTop: 5,
paddingBottom: 5
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
background: value !== null && value !== void 0 ? value : '#000',
width: '100%',
height: '100%'
}
})));
case 'radio':
return /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
style: {
"float": 'right'
},
options: options,
onChange: function onChange(_ref4) {
var value = _ref4.target.value;
return _onChange(value);
},
value: value,
optionType: "button",
buttonStyle: "solid",
disabled: chart3D,
defaultValue: defaultValue
});
case 'select':
return /*#__PURE__*/_react["default"].createElement(_select["default"], {
style: {
width: 100,
"float": 'right'
},
options: options,
value: value,
onChange: _onChange,
disabled: chart3D,
defaultValue: defaultValue
});
default:
return /*#__PURE__*/_react["default"].createElement(_input["default"], {
style: {
width: 100,
"float": 'right'
},
value: value,
onChange: function onChange(_ref5) {
var value = _ref5.target.value;
return _onChange(value);
}
});
}
};
var configForm = {
name: {
label: '名称',
Item: itemRender
},
color: {
label: '线条颜色',
Item: function Item(props) {
return itemRender(props, 'color');
}
},
thickness: {
label: '粗细',
Item: function Item(props) {
return itemRender(props, 'inputNumber');
}
},
cursorEnabled: {
label: '光标',
Item: function Item(props) {
return itemRender((0, _extends19["default"])({}, props, {
defaultValue: false,
options: [{
label: '启用',
value: true
}, {
label: '禁用',
value: false
}]
}), 'radio');
}
},
pointShape: {
label: '2D点形状',
Item: function Item(props) {
return itemRender((0, _extends19["default"])({}, props, {
defaultValue: 'Circle',
options: [{
label: '正方形',
value: 'Square'
}, {
label: '圆形',
value: 'Circle'
}, {
label: '三角形',
value: 'Triangle'
}]
}), 'select');
}
},
pointSize: {
label: '点大小',
Item: function Item(props) {
return itemRender(props, 'inputNumber');
}
},
pointColor: {
label: '点颜色',
Item: function Item(props) {
return itemRender(props, 'color');
}
},
point3DStyle: {
label: '3D点样式',
Item: function Item(props) {
return itemRender((0, _extends19["default"])({}, props, {
chart3D: !props.chart3D,
defaultValue: 'Triangulated',
options: [{
label: '三角',
value: 'Triangulated'
}, {
label: '像素',
value: 'Pixelated'
}]
}), 'radio');
}
},
point3DShape: {
label: '3D点形状',
Item: function Item(props) {
var _props$itemData$point;
return itemRender((0, _extends19["default"])({}, props, {
chart3D: !props.chart3D || ((_props$itemData$point = props.itemData['point3DStyle']) !== null && _props$itemData$point !== void 0 ? _props$itemData$point : 'Triangulated') != 'Triangulated',
defaultValue: 'sphere',
options: [{
label: '球体',
value: 'sphere'
}, {
label: '立方体',
value: 'cube'
}]
}), 'radio');
}
}
};
var FormList = function FormList(_ref6) {
var lists = _ref6.lists,
index = _ref6.index,
dataSource = _ref6.dataSource,
setDataSource = _ref6.setDataSource,
chart3D = _ref6.chart3D;
var itemData = dataSource[index];
return lists === null || lists === void 0 ? void 0 : lists.map(function (key, i) {
var _configForm$key = configForm[key],
label = _configForm$key.label,
Item = _configForm$key.Item;
return /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: label,
key: i
}, /*#__PURE__*/_react["default"].createElement(Item, {
value: itemData[key],
chart3D: chart3D,
itemData: itemData,
onChange: function onChange(value) {
setDataSource(dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (list, i) {
if (i === index) {
var _extends2;
return (0, _extends19["default"])({}, list, (_extends2 = {}, _extends2[key] = value, _extends2));
} else {
return list;
}
}));
}
}));
});
};
var BaseDrawer = function BaseDrawer(_ref7, ref) {
var _config$chartConfig, _config$chartConfig$b, _config$chartConfig3, _config$chartConfig3$, _config$chartConfig5, _config$chartConfig5$, _config$chartConfig6, _config$chartConfig6$, _config$chartConfig8, _config$chartConfig8$, _config$chartConfig10, _config$chartConfig11, _config$chartConfig12, _config$chartConfig13, _config$chartConfig14, _config$chartConfig15, _config$chartConfig16, _config$chartConfig17, _config$chartConfig18, _config$chartConfig19, _config$chartConfig20, _config$chartConfig21, _config$chartConfig22, _config$chartConfig$c, _config$chartConfig$c2, _config$chartConfig27, _config$chartConfig28, _config$chartConfig29, _config$chartConfig33, _config$chartConfig34, _config$chartConfig35, _config$chartConfig$c3, _config$chartConfig$c4, _config$chartConfig$c5, _config$chartConfig$c6, _config$chartConfig$c7, _config$chartConfig$c11, _config$chartConfig$c12, _config$chartConfig$c13, _config$chartConfig$c14, _config$chartConfig$c15, _config$chartConfig$c16, _config$chartConfig$c17, _config$chartConfig$c18, _config$chartConfig$c19, _config$chartConfig$c23, _config$chartConfig$c24, _config$chartConfig$c25, _config$chartConfig$c29, _config$chartConfig$c30, _config$chartConfig$c31, _config$chartConfig$c35, _config$chartConfig$c36, _config$chartConfig$c37, _config$chartConfig$c41, _config$chartConfig$c42, _config$chartConfig$c43, _config$chartConfig$c44, _config$chartConfig$c45, _config$chartConfig$c46, _config$chartConfig$c50, _config$chartConfig$c51, _config$chartConfig$c52, _config$chartConfig$c53, _config$chartConfig$c54, _config$chartConfig$c55, _config$chartConfig$c56, _config$chartConfig$c57, _config$axis, _config$axis2, _config$axis3, _config$axis4, _config$axis5;
var dataSource = _ref7.dataSource,
setDataSource = _ref7.setDataSource,
useConfig = _ref7.useConfig,
tab = _ref7.tab;
var _useState3 = (0, _react.useState)('1'),
tabActive = _useState3[0],
setTabActive = _useState3[1];
var _useState4 = (0, _react.useState)(false),
visible = _useState4[0],
setVisible = _useState4[1];
var _useState5 = (0, _react.useState)(0),
index = _useState5[0],
setIndex = _useState5[1];
var _useState6 = (0, _react.useState)('xAxis'),
axis = _useState6[0],
setAxis = _useState6[1];
var _useState7 = (0, _react.useState)('x'),
cursor = _useState7[0],
setCursor = _useState7[1];
var _useState8 = (0, _react.useState)({
chart3D: false,
chartConfig: {
title: '',
titleColor: '',
emptyFill: false,
boundingBox: {
x: 1,
y: 1,
z: 1
},
boundingBoxStroke: {
thickness: 1,
color: ''
},
backgroundColor: '',
seriesBackgroundColor: '',
seriesBorder: {
width: 1,
color: ''
},
border: {
width: 1,
color: ''
},
mouseInteractionPan: true,
mouseInteractionRectangleFit: true,
mouseInteractionRectangleZoom: true,
mouseInteractionWheelZoom: true,
cursor: {
mode: 'snapToClosest',
pointMarker: true,
x: {
thickness: 1,
color: '',
gridEmpty: false,
tickMarker: {
size: 12,
// family: ['initial'],
variant: 'inherit',
fontColor: '',
backgroundColor: '',
autoText: false,
disabled: true
}
},
y: {
thickness: 1,
color: '',
gridEmpty: false,
tickMarker: {
size: 12,
// family: ['initial'],
variant: 'inherit',
fontColor: '',
backgroundColor: '',
autoText: false,
disabled: false
}
},
resultTable: {
align: 'Center',
backgroundColor: '',
fontColor: '',
size: 12,
family: '',
autoText: false
}
}
},
init: {
width: undefined,
height: 400,
theme: 'light'
},
legend: {
show: true,
direction: 'vertical',
title: 'title',
emptyFill: false,
titleColor: '',
position: {
disabled: false,
point: {
x: 0,
y: 0
}
},
titleFont: {
size: 12,
family: ['initial'],
weight: 'inherit',
style: 'inherit',
variant: 'inherit'
}
},
xAxis: {
title: '',
scrollStrategy: '',
tickStrategy: '',
animationScroll: undefined,
interval: []
},
yAxis: {
title: '',
scrollStrategy: '',
tickStrategy: '',
animationScroll: undefined,
interval: []
}
}),
config = _useState8[0],
setConfig = _useState8[1];
(0, _react.useImperativeHandle)(ref, function () {
return {
onVisible: function onVisible(value) {
return setVisible(value);
}
};
}, []);
(0, _react.useEffect)(function () {
useConfig(config);
}, [config]);
return /*#__PURE__*/_react["default"].createElement(_drawer["default"], {
title: "\u8BBE\u7F6E",
placement: "right",
width: 360,
bodyStyle: {
padding: 0
},
onClose: function onClose() {
return setVisible(false);
},
visible: visible
}, /*#__PURE__*/_react["default"].createElement(_proCard["default"], {
ghost: true,
tabs: {
tabPosition: 'top',
activeKey: tabActive,
onChange: function onChange(key) {
return setTabActive(key);
}
}
}, /*#__PURE__*/_react["default"].createElement(_proCard["default"].TabPane, {
key: "1",
tab: "\u57FA\u7840\u914D\u7F6E"
}, /*#__PURE__*/_react["default"].createElement(_form["default"], {
size: "small",
colon: false,
className: "form-config"
}, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u6574\u4F53\u98CE\u683C"
}, /*#__PURE__*/_react["default"].createElement(_select["default"], {
style: {
width: 100,
"float": 'right'
},
value: config.init.theme,
options: Object.keys(_lcjs.Themes).map(function (key) {
return {
label: key,
value: key
};
}),
onChange: function onChange(value) {
return setConfig((0, _extends19["default"])({}, config, {
init: (0, _extends19["default"])({}, config.init, {
theme: value
})
}));
}
})), /*#__PURE__*/_react["default"].createElement(_divider["default"], {
plain: true
}, "\u56FE\u8868"), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u7C7B\u578B"
}, /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
style: {
"float": 'right'
},
options: [{
label: '2D',
value: false
}, {
label: '3D',
value: true
}],
onChange: function onChange(_ref8) {
var value = _ref8.target.value;
return setConfig((0, _extends19["default"])({}, config, {
chart3D: value
}));
},
value: config.chart3D,
optionType: "button",
buttonStyle: "solid"
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u5BBD(px)"
}, /*#__PURE__*/_react["default"].createElement(_inputNumber["default"], {
style: {
width: 100,
"float": 'right'
},
min: 0,
value: config.init.width,
onChange: function onChange(value) {
return setConfig((0, _extends19["default"])({}, config, {
init: (0, _extends19["default"])({}, config.init, {
width: value
})
}));
}
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u9AD8(px)"
}, /*#__PURE__*/_react["default"].createElement(_inputNumber["default"], {
style: {
width: 100,
"float": 'right'
},
min: 0,
value: config.init.height,
onChange: function onChange(value) {
return setConfig((0, _extends19["default"])({}, config, {
init: (0, _extends19["default"])({}, config.init, {
height: value
})
}));
}
})), /*#__PURE__*/_react["default"].createElement(_proCard["default"], {
title: "\u6807\u9898",
collapsible: true,
size: "small",
ghost: true,
collapsed: config.chartConfig.emptyFill,
extra: /*#__PURE__*/_react["default"].createElement(_switch["default"], {
defaultChecked: !config.chartConfig.emptyFill,
onChange: function onChange(value) {
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
emptyFill: !value
})
}));
}
})
}, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u540D\u79F0"
}, /*#__PURE__*/_react["default"].createElement(_input["default"], {
style: {
width: 100,
"float": 'right'
},
value: config.chartConfig.title,
onChange: function onChange(_ref9) {
var value = _ref9.target.value;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
title: value
})
}));
}
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u586B\u5145"
}, /*#__PURE__*/_react["default"].createElement(_popover["default"], {
placement: "bottomRight",
content: /*#__PURE__*/_react["default"].createElement(_reactColor.SketchPicker, {
color: config.chartConfig.titleColor,
onChange: function onChange(_ref10) {
var rgb = _ref10.rgb;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
titleColor: "rgba(" + Object.values(rgb).toString() + ")"
})
}));
}
})
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
style: {
width: 40,
"float": 'right',
paddingTop: 5,
paddingBottom: 5
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
background: config.chartConfig.titleColor,
width: '100%',
height: '100%'
}
}))))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u5916\u80CC\u666F\u8272"
}, /*#__PURE__*/_react["default"].createElement(_popover["default"], {
placement: "bottomRight",
content: /*#__PURE__*/_react["default"].createElement(_reactColor.SketchPicker, {
color: config.chartConfig.backgroundColor,
onChange: function onChange(_ref11) {
var rgb = _ref11.rgb;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
backgroundColor: "rgba(" + Object.values(rgb).toString() + ")"
})
}));
}
})
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
style: {
width: 40,
"float": 'right',
paddingTop: 5,
paddingBottom: 5
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
background: config.chartConfig.backgroundColor,
width: '100%',
height: '100%'
}
})))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u5916\u6846\u5BBD\u5EA6"
}, /*#__PURE__*/_react["default"].createElement(_inputNumber["default"], {
style: {
width: 100,
"float": 'right'
},
min: 0,
value: (_config$chartConfig = config.chartConfig) === null || _config$chartConfig === void 0 ? void 0 : (_config$chartConfig$b = _config$chartConfig.border) === null || _config$chartConfig$b === void 0 ? void 0 : _config$chartConfig$b.width,
onChange: function onChange(value) {
var _config$chartConfig2;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
border: (0, _extends19["default"])({}, (_config$chartConfig2 = config.chartConfig) === null || _config$chartConfig2 === void 0 ? void 0 : _config$chartConfig2.border, {
width: value
})
})
}));
}
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u5916\u6846\u989C\u8272"
}, /*#__PURE__*/_react["default"].createElement(_popover["default"], {
placement: "bottomRight",
content: /*#__PURE__*/_react["default"].createElement(_reactColor.SketchPicker, {
color: (_config$chartConfig3 = config.chartConfig) === null || _config$chartConfig3 === void 0 ? void 0 : (_config$chartConfig3$ = _config$chartConfig3.border) === null || _config$chartConfig3$ === void 0 ? void 0 : _config$chartConfig3$.color,
onChange: function onChange(_ref12) {
var _config$chartConfig4;
var rgb = _ref12.rgb;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
border: (0, _extends19["default"])({}, (_config$chartConfig4 = config.chartConfig) === null || _config$chartConfig4 === void 0 ? void 0 : _config$chartConfig4.border, {
color: "rgba(" + Object.values(rgb).toString() + ")"
})
})
}));
}
})
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
style: {
width: 40,
"float": 'right',
paddingTop: 5,
paddingBottom: 5
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
background: (_config$chartConfig5 = config.chartConfig) === null || _config$chartConfig5 === void 0 ? void 0 : (_config$chartConfig5$ = _config$chartConfig5.border) === null || _config$chartConfig5$ === void 0 ? void 0 : _config$chartConfig5$.color,
width: '100%',
height: '100%'
}
})))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u5185\u80CC\u666F\u8272"
}, /*#__PURE__*/_react["default"].createElement(_popover["default"], {
placement: "bottomRight",
content: /*#__PURE__*/_react["default"].createElement(_reactColor.SketchPicker, {
color: config.chartConfig.seriesBackgroundColor,
onChange: function onChange(_ref13) {
var rgb = _ref13.rgb;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
seriesBackgroundColor: "rgba(" + Object.values(rgb).toString() + ")"
})
}));
}
})
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
style: {
width: 40,
"float": 'right',
paddingTop: 5,
paddingBottom: 5
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
background: config.chartConfig.seriesBackgroundColor,
width: '100%',
height: '100%'
}
})))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u5185\u6846\u5BBD\u5EA6"
}, /*#__PURE__*/_react["default"].createElement(_inputNumber["default"], {
style: {
width: 100,
"float": 'right'
},
min: 0,
value: (_config$chartConfig6 = config.chartConfig) === null || _config$chartConfig6 === void 0 ? void 0 : (_config$chartConfig6$ = _config$chartConfig6.seriesBorder) === null || _config$chartConfig6$ === void 0 ? void 0 : _config$chartConfig6$.width,
onChange: function onChange(value) {
var _config$chartConfig7;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
seriesBorder: (0, _extends19["default"])({}, (_config$chartConfig7 = config.chartConfig) === null || _config$chartConfig7 === void 0 ? void 0 : _config$chartConfig7.seriesBorder, {
width: value
})
})
}));
}
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u5185\u6846\u989C\u8272"
}, /*#__PURE__*/_react["default"].createElement(_popover["default"], {
placement: "bottomRight",
content: /*#__PURE__*/_react["default"].createElement(_reactColor.SketchPicker, {
color: (_config$chartConfig8 = config.chartConfig) === null || _config$chartConfig8 === void 0 ? void 0 : (_config$chartConfig8$ = _config$chartConfig8.seriesBorder) === null || _config$chartConfig8$ === void 0 ? void 0 : _config$chartConfig8$.color,
onChange: function onChange(_ref14) {
var _config$chartConfig9;
var rgb = _ref14.rgb;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
seriesBorder: (0, _extends19["default"])({}, (_config$chartConfig9 = config.chartConfig) === null || _config$chartConfig9 === void 0 ? void 0 : _config$chartConfig9.seriesBorder, {
color: "rgba(" + Object.values(rgb).toString() + ")"
})
})
}));
}
})
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
style: {
width: 40,
"float": 'right',
paddingTop: 5,
paddingBottom: 5
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
background: (_config$chartConfig10 = config.chartConfig) === null || _config$chartConfig10 === void 0 ? void 0 : (_config$chartConfig11 = _config$chartConfig10.seriesBorder) === null || _config$chartConfig11 === void 0 ? void 0 : _config$chartConfig11.color,
width: '100%',
height: '100%'
}
})))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u8FB9\u754C\u6846"
}, /*#__PURE__*/_react["default"].createElement(_space["default"], {
align: "end",
style: {
display: 'flex',
justifyContent: 'flex-end'
}
}, Object.entries((_config$chartConfig12 = config.chartConfig) === null || _config$chartConfig12 === void 0 ? void 0 : _config$chartConfig12.boundingBox).map(function (_ref15) {
var key = _ref15[0],
value = _ref15[1];
return /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: key,
key: key
}, /*#__PURE__*/_react["default"].createElement(_inputNumber["default"], {
disabled: !config.chart3D,
min: 0,
value: value,
style: {
width: 50
},
onChange: function onChange(value) {
var _extends3;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
boundingBox: (0, _extends19["default"])({}, config.chartConfig.boundingBox, (_extends3 = {}, _extends3[key] = value, _extends3))
})
}));
}
}));
}))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u9F20\u6807\u5E73\u79FB"
}, /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
disabled: config.chart3D,
style: {
"float": 'right'
},
options: [{
label: '启用',
value: true
}, {
label: '禁用',
value: false
}],
onChange: function onChange(_ref16) {
var value = _ref16.target.value;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
mouseInteractionPan: value
})
}));
},
value: (_config$chartConfig13 = config.chartConfig) === null || _config$chartConfig13 === void 0 ? void 0 : _config$chartConfig13.mouseInteractionPan,
optionType: "button",
buttonStyle: "solid"
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u9F20\u6807\u77E9\u5F62\u9002\u5408"
}, /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
disabled: config.chart3D,
style: {
"float": 'right'
},
options: [{
label: '启用',
value: true
}, {
label: '禁用',
value: false
}],
onChange: function onChange(_ref17) {
var value = _ref17.target.value;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
mouseInteractionRectangleFit: value
})
}));
},
value: (_config$chartConfig14 = config.chartConfig) === null || _config$chartConfig14 === void 0 ? void 0 : _config$chartConfig14.mouseInteractionRectangleFit,
optionType: "button",
buttonStyle: "solid"
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u9F20\u6807\u77E9\u5F62\u7F29\u653E"
}, /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
disabled: config.chart3D,
style: {
"float": 'right'
},
options: [{
label: '启用',
value: true
}, {
label: '禁用',
value: false
}],
onChange: function onChange(_ref18) {
var value = _ref18.target.value;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
mouseInteractionRectangleZoom: value
})
}));
},
value: (_config$chartConfig15 = config.chartConfig) === null || _config$chartConfig15 === void 0 ? void 0 : _config$chartConfig15.mouseInteractionRectangleZoom,
optionType: "button",
buttonStyle: "solid"
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u9F20\u6807\u6EDA\u8F6E\u7F29\u653E"
}, /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
disabled: config.chart3D,
style: {
"float": 'right'
},
options: [{
label: '启用',
value: true
}, {
label: '禁用',
value: false
}],
onChange: function onChange(_ref19) {
var value = _ref19.target.value;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
mouseInteractionWheelZoom: value
})
}));
},
value: (_config$chartConfig16 = config.chartConfig) === null || _config$chartConfig16 === void 0 ? void 0 : _config$chartConfig16.mouseInteractionWheelZoom,
optionType: "button",
buttonStyle: "solid"
})), /*#__PURE__*/_react["default"].createElement(_divider["default"], null))), /*#__PURE__*/_react["default"].createElement(_proCard["default"].TabPane, {
key: "2",
tab: "\u5149\u6807\u914D\u7F6E"
}, /*#__PURE__*/_react["default"].createElement(_form["default"], {
size: "small",
colon: false,
className: "form-config"
}, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u70B9\u6807\u8BB0"
}, /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
style: {
"float": 'right'
},
options: [{
label: '启用',
value: false
}, {
label: '禁用',
value: true
}],
onChange: function onChange(_ref20) {
var value = _ref20.target.value;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
cursor: (0, _extends19["default"])({}, config.chartConfig.cursor, {
pointMarker: value
})
})
}));
},
value: (_config$chartConfig17 = config.chartConfig) === null || _config$chartConfig17 === void 0 ? void 0 : (_config$chartConfig18 = _config$chartConfig17.cursor) === null || _config$chartConfig18 === void 0 ? void 0 : _config$chartConfig18.pointMarker,
optionType: "button",
buttonStyle: "solid"
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u8F74"
}, /*#__PURE__*/_react["default"].createElement(_select["default"], {
value: cursor,
style: {
width: 100,
"float": 'right'
},
onChange: function onChange(value) {
return setCursor(value);
},
options: [{
label: 'x轴',
value: 'x'
}, {
label: 'y轴',
value: 'y'
}]
})), /*#__PURE__*/_react["default"].createElement(_divider["default"], {
plain: true
}, "\u7F51\u683C\u63CF\u8FB9"), /*#__PURE__*/_react["default"].createElement(_proCard["default"], {
title: "\u6A21\u5F0F",
collapsible: true,
size: "small",
ghost: true,
collapsed: ((_config$chartConfig19 = config.chartConfig) === null || _config$chartConfig19 === void 0 ? void 0 : (_config$chartConfig20 = _config$chartConfig19.cursor) === null || _config$chartConfig20 === void 0 ? void 0 : _config$chartConfig20.mode) === 'disabled',
extra: /*#__PURE__*/_react["default"].createElement(_select["default"], {
style: {
width: 100
},
value: (_config$chartConfig21 = config.chartConfig) === null || _config$chartConfig21 === void 0 ? void 0 : (_config$chartConfig22 = _config$chartConfig21.cursor) === null || _config$chartConfig22 === void 0 ? void 0 : _config$chartConfig22.mode,
onChange: function onChange(value) {
var _config$chartConfig23;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
cursor: (0, _extends19["default"])({}, (_config$chartConfig23 = config.chartConfig) === null || _config$chartConfig23 === void 0 ? void 0 : _config$chartConfig23.cursor, {
mode: value
})
})
}));
},
options: [{
label: 'snapToClosest',
value: 'snapToClosest'
}, {
label: 'onHover',
value: 'onHover'
}, {
label: 'disabled',
value: 'disabled'
}]
})
}, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u7C97\u7EC6"
}, /*#__PURE__*/_react["default"].createElement(_inputNumber["default"], {
value: (_config$chartConfig$c = config.chartConfig.cursor) === null || _config$chartConfig$c === void 0 ? void 0 : (_config$chartConfig$c2 = _config$chartConfig$c[cursor]) === null || _config$chartConfig$c2 === void 0 ? void 0 : _config$chartConfig$c2.thickness,
style: {
width: 100,
"float": 'right'
},
min: 0,
onChange: function onChange(value) {
var _config$chartConfig24, _config$chartConfig25, _config$chartConfig26, _extends4;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
cursor: (0, _extends19["default"])({}, (_config$chartConfig24 = config.chartConfig) === null || _config$chartConfig24 === void 0 ? void 0 : _config$chartConfig24.cursor, (_extends4 = {}, _extends4[cursor] = (0, _extends19["default"])({}, (_config$chartConfig25 = config.chartConfig) === null || _config$chartConfig25 === void 0 ? void 0 : (_config$chartConfig26 = _config$chartConfig25.cursor) === null || _config$chartConfig26 === void 0 ? void 0 : _config$chartConfig26[cursor], {
thickness: value
}), _extends4))
})
}));
}
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u586B\u5145"
}, /*#__PURE__*/_react["default"].createElement(_popover["default"], {
placement: "bottomRight",
content: /*#__PURE__*/_react["default"].createElement(_reactColor.SketchPicker, {
color: (_config$chartConfig27 = config.chartConfig) === null || _config$chartConfig27 === void 0 ? void 0 : (_config$chartConfig28 = _config$chartConfig27.cursor) === null || _config$chartConfig28 === void 0 ? void 0 : (_config$chartConfig29 = _config$chartConfig28[cursor]) === null || _config$chartConfig29 === void 0 ? void 0 : _config$chartConfig29.color,
onChange: function onChange(_ref21) {
var _config$chartConfig30, _config$chartConfig31, _config$chartConfig32, _extends5;
var rgb = _ref21.rgb;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
cursor: (0, _extends19["default"])({}, (_config$chartConfig30 = config.chartConfig) === null || _config$chartConfig30 === void 0 ? void 0 : _config$chartConfig30.cursor, (_extends5 = {}, _extends5[cursor] = (0, _extends19["default"])({}, (_config$chartConfig31 = config.chartConfig) === null || _config$chartConfig31 === void 0 ? void 0 : (_config$chartConfig32 = _config$chartConfig31.cursor) === null || _config$chartConfig32 === void 0 ? void 0 : _config$chartConfig32[cursor], {
color: "rgba(" + Object.values(rgb).toString() + ")"
}), _extends5))
})
}));
}
})
}, /*#__PURE__*/_react["default"].createElement(_button["default"], {
style: {
width: 40,
"float": 'right',
paddingTop: 5,
paddingBottom: 5
}
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
background: (_config$chartConfig33 = config.chartConfig) === null || _config$chartConfig33 === void 0 ? void 0 : (_config$chartConfig34 = _config$chartConfig33.cursor) === null || _config$chartConfig34 === void 0 ? void 0 : (_config$chartConfig35 = _config$chartConfig34[cursor]) === null || _config$chartConfig35 === void 0 ? void 0 : _config$chartConfig35.color,
width: '100%',
height: '100%'
}
})))), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u7F51\u683C"
}, /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
style: {
"float": 'right'
},
options: [{
label: '启用',
value: false
}, {
label: '禁用',
value: true
}],
onChange: function onChange(_ref22) {
var _config$chartConfig36, _config$chartConfig37, _config$chartConfig38, _extends6;
var value = _ref22.target.value;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
cursor: (0, _extends19["default"])({}, (_config$chartConfig36 = config.chartConfig) === null || _config$chartConfig36 === void 0 ? void 0 : _config$chartConfig36.cursor, (_extends6 = {}, _extends6[cursor] = (0, _extends19["default"])({}, (_config$chartConfig37 = config.chartConfig) === null || _config$chartConfig37 === void 0 ? void 0 : (_config$chartConfig38 = _config$chartConfig37.cursor) === null || _config$chartConfig38 === void 0 ? void 0 : _config$chartConfig38[cursor], {
gridEmpty: value
}), _extends6))
})
}));
},
value: (_config$chartConfig$c3 = config.chartConfig.cursor) === null || _config$chartConfig$c3 === void 0 ? void 0 : (_config$chartConfig$c4 = _config$chartConfig$c3[cursor]) === null || _config$chartConfig$c4 === void 0 ? void 0 : _config$chartConfig$c4.gridEmpty,
optionType: "button",
buttonStyle: "solid"
}))), /*#__PURE__*/_react["default"].createElement(_divider["default"], null), /*#__PURE__*/_react["default"].createElement(_divider["default"], {
plain: true
}, "\u523B\u5EA6\u7EBF"), /*#__PURE__*/_react["default"].createElement(_proCard["default"], {
direction: "column",
title: "\u523B\u5EA6",
collapsible: true,
size: "small",
ghost: true,
collapsed: (_config$chartConfig$c5 = (_config$chartConfig$c6 = config.chartConfig.cursor) === null || _config$chartConfig$c6 === void 0 ? void 0 : (_config$chartConfig$c7 = _config$chartConfig$c6[cursor]) === null || _config$chartConfig$c7 === void 0 ? void 0 : _config$chartConfig$c7.tickMarker.disabled) !== null && _config$chartConfig$c5 !== void 0 ? _config$chartConfig$c5 : false,
extra: /*#__PURE__*/_react["default"].createElement(_radio["default"].Group, {
style: {
"float": 'right'
},
options: [{
label: '启用',
value: false
}, {
label: '禁用',
value: true
}],
onChange: function onChange(_ref23) {
var _config$chartConfig$c8, _config$chartConfig$c9, _config$chartConfig$c10, _extends7;
var value = _ref23.target.value;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
cursor: (0, _extends19["default"])({}, config.chartConfig.cursor, (_extends7 = {}, _extends7[cursor] = (0, _extends19["default"])({}, (_config$chartConfig$c8 = config.chartConfig.cursor) === null || _config$chartConfig$c8 === void 0 ? void 0 : _config$chartConfig$c8[cursor], {
tickMarker: (0, _extends19["default"])({}, (_config$chartConfig$c9 = config.chartConfig.cursor) === null || _config$chartConfig$c9 === void 0 ? void 0 : (_config$chartConfig$c10 = _config$chartConfig$c9[cursor]) === null || _config$chartConfig$c10 === void 0 ? void 0 : _config$chartConfig$c10.tickMarker, {
disabled: value
})
}), _extends7))
})
}));
},
value: (_config$chartConfig$c11 = config.chartConfig.cursor) === null || _config$chartConfig$c11 === void 0 ? void 0 : (_config$chartConfig$c12 = _config$chartConfig$c11[cursor]) === null || _config$chartConfig$c12 === void 0 ? void 0 : (_config$chartConfig$c13 = _config$chartConfig$c12.tickMarker) === null || _config$chartConfig$c13 === void 0 ? void 0 : _config$chartConfig$c13.disabled,
optionType: "button",
buttonStyle: "solid"
})
}, /*#__PURE__*/_react["default"].createElement(_proCard["default"], {
title: "\u81EA\u52A8\u586B\u5145",
collapsible: true,
size: "small",
ghost: true,
collapsed: (_config$chartConfig$c14 = (_config$chartConfig$c15 = config.chartConfig.cursor) === null || _config$chartConfig$c15 === void 0 ? void 0 : (_config$chartConfig$c16 = _config$chartConfig$c15[cursor]) === null || _config$chartConfig$c16 === void 0 ? void 0 : _config$chartConfig$c16.tickMarker.autoText) !== null && _config$chartConfig$c14 !== void 0 ? _config$chartConfig$c14 : false,
extra: /*#__PURE__*/_react["default"].createElement(_switch["default"], {
checked: (_config$chartConfig$c17 = config.chartConfig.cursor) === null || _config$chartConfig$c17 === void 0 ? void 0 : (_config$chartConfig$c18 = _config$chartConfig$c17[cursor]) === null || _config$chartConfig$c18 === void 0 ? void 0 : (_config$chartConfig$c19 = _config$chartConfig$c18.tickMarker) === null || _config$chartConfig$c19 === void 0 ? void 0 : _config$chartConfig$c19.autoText,
onChange: function onChange(value) {
var _config$chartConfig$c20, _config$chartConfig$c21, _config$chartConfig$c22, _extends8;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
cursor: (0, _extends19["default"])({}, config.chartConfig.cursor, (_extends8 = {}, _extends8[cursor] = (0, _extends19["default"])({}, (_config$chartConfig$c20 = config.chartConfig.cursor) === null || _config$chartConfig$c20 === void 0 ? void 0 : _config$chartConfig$c20[cursor], {
tickMarker: (0, _extends19["default"])({}, (_config$chartConfig$c21 = config.chartConfig.cursor) === null || _config$chartConfig$c21 === void 0 ? void 0 : (_config$chartConfig$c22 = _config$chartConfig$c21[cursor]) === null || _config$chartConfig$c22 === void 0 ? void 0 : _config$chartConfig$c22.tickMarker, {
autoText: value
})
}), _extends8))
})
}));
}
})
}, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u5B57\u4F53\u5927\u5C0F"
}, /*#__PURE__*/_react["default"].createElement(_inputNumber["default"], {
style: {
width: 100,
"float": 'right'
},
min: 12,
value: (_config$chartConfig$c23 = config.chartConfig.cursor) === null || _config$chartConfig$c23 === void 0 ? void 0 : (_config$chartConfig$c24 = _config$chartConfig$c23[cursor]) === null || _config$chartConfig$c24 === void 0 ? void 0 : (_config$chartConfig$c25 = _config$chartConfig$c24.tickMarker) === null || _config$chartConfig$c25 === void 0 ? void 0 : _config$chartConfig$c25.size,
onChange: function onChange(value) {
var _config$chartConfig$c26, _config$chartConfig$c27, _config$chartConfig$c28, _extends9;
return setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
cursor: (0, _extends19["default"])({}, config.chartConfig.cursor, (_extends9 = {}, _extends9[cursor] = (0, _extends19["default"])({}, (_config$chartConfig$c26 = config.chartConfig.cursor) === null || _config$chartConfig$c26 === void 0 ? void 0 : _config$chartConfig$c26[cursor], {
tickMarker: (0, _extends19["default"])({}, (_config$chartConfig$c27 = config.chartConfig.cursor) === null || _config$chartConfig$c27 === void 0 ? void 0 : (_config$chartConfig$c28 = _config$chartConfig$c27[cursor]) === null || _config$chartConfig$c28 === void 0 ? void 0 : _config$chartConfig$c28.tickMarker, {
size: value
})
}), _extends9))
})
}));
}
})), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
label: "\u5B57\u4F53\u7CFB\u5217"
}, /*#__PURE__*/_react["default"].createElement(_select["default"], {
style: {
width: 100,
"float": 'right'
},
mode: "multiple",
value: (_config$chartConfig$c29 = config.chartConfig.cursor) === null || _config$chartConfig$c29 === void 0 ? void 0 : (_config$chartConfig$c30 = _config$chartConfig$c29[cursor]) === null || _config$chartConfig$c30 === void 0 ? void 0 : (_config$chartConfig$c31 = _config$chartConfig$c30.tickMarker) === null || _config$chartConfig$c31 === void 0 ? void 0 : _config$chartConfig$c31.family,
onChange: function onChange(value) {
var _config$chartConfig$c32, _config$chartConfig$c33, _config$chartConfig$c34, _extends10;
setConfig((0, _extends19["default"])({}, config, {
chartConfig: (0, _extends19["default"])({}, config.chartConfig, {
cursor: (0, _extends19["default"])({}, config.chartConfig.cursor, (_extends10 = {}, _extends10[cursor] = (0, _extends19["default"])({}, (_config$chartConfig$c32 = config.chartConfig.cursor) === null || _config$chartConfig$c32 === void 0 ? void 0 : _config$chartConfig$c32[cursor], {
tickMarker: (0, _extends19["default"])({}, (_config$chartConfig$c33 = config.chartConfig.cursor) === null || _config$chartConfig$c33 === void 0 ? void 0 : (_config$chartConfig$c34 = _config$chartConfig$c33[cursor]) === null || _config$chartConfig$c34 === void 0 ? void 0 : _config$chartConfig$c34.tickMarker, {
family: value
})
}), _extends10))
})
}));
},
options: family.map(function (item, index) {
return {
label: item,
value: item,
key: index