UNPKG

@castianta/chart-lc

Version:
1,313 lines (1,274 loc) 68 kB
import _Drawer from "antd/es/drawer"; import _Space from "antd/es/space"; import _Switch from "antd/es/switch"; import _Divider from "antd/es/divider"; import _Form from "antd/es/form"; import _extends from "@babel/runtime/helpers/extends"; import _Input from "antd/es/input"; import _Select from "antd/es/select"; import _Radio from "antd/es/radio"; import _Popover from "antd/es/popover"; import _Button from "antd/es/button"; import _Row from "antd/es/row"; import _Slider from "antd/es/slider"; import _Col from "antd/es/col"; import _Tooltip from "antd/es/tooltip"; import _InputNumber from "antd/es/input-number"; import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react'; import ProCard from '@ant-design/pro-card'; import { SketchPicker } from 'react-color'; import { Themes } from '@arction/lcjs'; 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 = useState(0), min = _useState[0], setMin = _useState[1]; var _useState2 = useState(100), max = _useState2[0], setMax = _useState2[1]; return /*#__PURE__*/React.createElement(_Row, { style: { padding: 0 } }, /*#__PURE__*/React.createElement(_Col, { span: 6, style: { paddingRight: 5 } }, /*#__PURE__*/React.createElement(_Tooltip, { trigger: ['focus'], title: "\u6700\u5C0F\u503C", placement: "topLeft", overlayClassName: "numeric-input" }, /*#__PURE__*/React.createElement(_InputNumber, { min: 0, value: min, onChange: function onChange(value) { return setMin(value); }, placeholder: "\u6700\u5C0F\u503C", style: { width: '100%' } }))), /*#__PURE__*/React.createElement(_Col, { span: 12 }, /*#__PURE__*/React.createElement(_Slider, { range: true, min: min, max: max, onChange: onChange, value: value, style: { padding: 0 } })), /*#__PURE__*/React.createElement(_Col, { span: 6, style: { paddingLeft: 5 } }, /*#__PURE__*/React.createElement(_Tooltip, { trigger: ['focus'], title: "\u6700\u5927\u503C", placement: "topLeft", overlayClassName: "numeric-input" }, /*#__PURE__*/React.createElement(_InputNumber, { 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.createElement(_InputNumber, { style: { width: 100, "float": 'right' }, min: 0, value: value, onChange: function onChange(value) { return _onChange(value); } }); case 'color': return /*#__PURE__*/React.createElement(_Popover, { placement: "bottomRight", content: /*#__PURE__*/React.createElement(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.createElement(_Button, { style: { width: 40, "float": 'right', paddingTop: 5, paddingBottom: 5 } }, /*#__PURE__*/React.createElement("div", { style: { background: value !== null && value !== void 0 ? value : '#000', width: '100%', height: '100%' } }))); case 'radio': return /*#__PURE__*/React.createElement(_Radio.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.createElement(_Select, { style: { width: 100, "float": 'right' }, options: options, value: value, onChange: _onChange, disabled: chart3D, defaultValue: defaultValue }); default: return /*#__PURE__*/React.createElement(_Input, { 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(_extends({}, props, { defaultValue: false, options: [{ label: '启用', value: true }, { label: '禁用', value: false }] }), 'radio'); } }, pointShape: { label: '2D点形状', Item: function Item(props) { return itemRender(_extends({}, 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(_extends({}, 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(_extends({}, 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.createElement(_Form.Item, { label: label, key: i }, /*#__PURE__*/React.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 _extends({}, 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 = useState('1'), tabActive = _useState3[0], setTabActive = _useState3[1]; var _useState4 = useState(false), visible = _useState4[0], setVisible = _useState4[1]; var _useState5 = useState(0), index = _useState5[0], setIndex = _useState5[1]; var _useState6 = useState('xAxis'), axis = _useState6[0], setAxis = _useState6[1]; var _useState7 = useState('x'), cursor = _useState7[0], setCursor = _useState7[1]; var _useState8 = 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]; useImperativeHandle(ref, function () { return { onVisible: function onVisible(value) { return setVisible(value); } }; }, []); useEffect(function () { useConfig(config); }, [config]); return /*#__PURE__*/React.createElement(_Drawer, { title: "\u8BBE\u7F6E", placement: "right", width: 360, bodyStyle: { padding: 0 }, onClose: function onClose() { return setVisible(false); }, visible: visible }, /*#__PURE__*/React.createElement(ProCard, { ghost: true, tabs: { tabPosition: 'top', activeKey: tabActive, onChange: function onChange(key) { return setTabActive(key); } } }, /*#__PURE__*/React.createElement(ProCard.TabPane, { key: "1", tab: "\u57FA\u7840\u914D\u7F6E" }, /*#__PURE__*/React.createElement(_Form, { size: "small", colon: false, className: "form-config" }, /*#__PURE__*/React.createElement(_Form.Item, { label: "\u6574\u4F53\u98CE\u683C" }, /*#__PURE__*/React.createElement(_Select, { style: { width: 100, "float": 'right' }, value: config.init.theme, options: Object.keys(Themes).map(function (key) { return { label: key, value: key }; }), onChange: function onChange(value) { return setConfig(_extends({}, config, { init: _extends({}, config.init, { theme: value }) })); } })), /*#__PURE__*/React.createElement(_Divider, { plain: true }, "\u56FE\u8868"), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u7C7B\u578B" }, /*#__PURE__*/React.createElement(_Radio.Group, { style: { "float": 'right' }, options: [{ label: '2D', value: false }, { label: '3D', value: true }], onChange: function onChange(_ref8) { var value = _ref8.target.value; return setConfig(_extends({}, config, { chart3D: value })); }, value: config.chart3D, optionType: "button", buttonStyle: "solid" })), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u5BBD(px)" }, /*#__PURE__*/React.createElement(_InputNumber, { style: { width: 100, "float": 'right' }, min: 0, value: config.init.width, onChange: function onChange(value) { return setConfig(_extends({}, config, { init: _extends({}, config.init, { width: value }) })); } })), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u9AD8(px)" }, /*#__PURE__*/React.createElement(_InputNumber, { style: { width: 100, "float": 'right' }, min: 0, value: config.init.height, onChange: function onChange(value) { return setConfig(_extends({}, config, { init: _extends({}, config.init, { height: value }) })); } })), /*#__PURE__*/React.createElement(ProCard, { title: "\u6807\u9898", collapsible: true, size: "small", ghost: true, collapsed: config.chartConfig.emptyFill, extra: /*#__PURE__*/React.createElement(_Switch, { defaultChecked: !config.chartConfig.emptyFill, onChange: function onChange(value) { return setConfig(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { emptyFill: !value }) })); } }) }, /*#__PURE__*/React.createElement(_Form.Item, { label: "\u540D\u79F0" }, /*#__PURE__*/React.createElement(_Input, { style: { width: 100, "float": 'right' }, value: config.chartConfig.title, onChange: function onChange(_ref9) { var value = _ref9.target.value; return setConfig(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { title: value }) })); } })), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u586B\u5145" }, /*#__PURE__*/React.createElement(_Popover, { placement: "bottomRight", content: /*#__PURE__*/React.createElement(SketchPicker, { color: config.chartConfig.titleColor, onChange: function onChange(_ref10) { var rgb = _ref10.rgb; return setConfig(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { titleColor: "rgba(" + Object.values(rgb).toString() + ")" }) })); } }) }, /*#__PURE__*/React.createElement(_Button, { style: { width: 40, "float": 'right', paddingTop: 5, paddingBottom: 5 } }, /*#__PURE__*/React.createElement("div", { style: { background: config.chartConfig.titleColor, width: '100%', height: '100%' } }))))), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u5916\u80CC\u666F\u8272" }, /*#__PURE__*/React.createElement(_Popover, { placement: "bottomRight", content: /*#__PURE__*/React.createElement(SketchPicker, { color: config.chartConfig.backgroundColor, onChange: function onChange(_ref11) { var rgb = _ref11.rgb; return setConfig(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { backgroundColor: "rgba(" + Object.values(rgb).toString() + ")" }) })); } }) }, /*#__PURE__*/React.createElement(_Button, { style: { width: 40, "float": 'right', paddingTop: 5, paddingBottom: 5 } }, /*#__PURE__*/React.createElement("div", { style: { background: config.chartConfig.backgroundColor, width: '100%', height: '100%' } })))), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u5916\u6846\u5BBD\u5EA6" }, /*#__PURE__*/React.createElement(_InputNumber, { 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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { border: _extends({}, (_config$chartConfig2 = config.chartConfig) === null || _config$chartConfig2 === void 0 ? void 0 : _config$chartConfig2.border, { width: value }) }) })); } })), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u5916\u6846\u989C\u8272" }, /*#__PURE__*/React.createElement(_Popover, { placement: "bottomRight", content: /*#__PURE__*/React.createElement(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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { border: _extends({}, (_config$chartConfig4 = config.chartConfig) === null || _config$chartConfig4 === void 0 ? void 0 : _config$chartConfig4.border, { color: "rgba(" + Object.values(rgb).toString() + ")" }) }) })); } }) }, /*#__PURE__*/React.createElement(_Button, { style: { width: 40, "float": 'right', paddingTop: 5, paddingBottom: 5 } }, /*#__PURE__*/React.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.createElement(_Form.Item, { label: "\u5185\u80CC\u666F\u8272" }, /*#__PURE__*/React.createElement(_Popover, { placement: "bottomRight", content: /*#__PURE__*/React.createElement(SketchPicker, { color: config.chartConfig.seriesBackgroundColor, onChange: function onChange(_ref13) { var rgb = _ref13.rgb; return setConfig(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { seriesBackgroundColor: "rgba(" + Object.values(rgb).toString() + ")" }) })); } }) }, /*#__PURE__*/React.createElement(_Button, { style: { width: 40, "float": 'right', paddingTop: 5, paddingBottom: 5 } }, /*#__PURE__*/React.createElement("div", { style: { background: config.chartConfig.seriesBackgroundColor, width: '100%', height: '100%' } })))), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u5185\u6846\u5BBD\u5EA6" }, /*#__PURE__*/React.createElement(_InputNumber, { 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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { seriesBorder: _extends({}, (_config$chartConfig7 = config.chartConfig) === null || _config$chartConfig7 === void 0 ? void 0 : _config$chartConfig7.seriesBorder, { width: value }) }) })); } })), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u5185\u6846\u989C\u8272" }, /*#__PURE__*/React.createElement(_Popover, { placement: "bottomRight", content: /*#__PURE__*/React.createElement(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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { seriesBorder: _extends({}, (_config$chartConfig9 = config.chartConfig) === null || _config$chartConfig9 === void 0 ? void 0 : _config$chartConfig9.seriesBorder, { color: "rgba(" + Object.values(rgb).toString() + ")" }) }) })); } }) }, /*#__PURE__*/React.createElement(_Button, { style: { width: 40, "float": 'right', paddingTop: 5, paddingBottom: 5 } }, /*#__PURE__*/React.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.createElement(_Form.Item, { label: "\u8FB9\u754C\u6846" }, /*#__PURE__*/React.createElement(_Space, { 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.createElement(_Form.Item, { label: key, key: key }, /*#__PURE__*/React.createElement(_InputNumber, { disabled: !config.chart3D, min: 0, value: value, style: { width: 50 }, onChange: function onChange(value) { var _extends3; return setConfig(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { boundingBox: _extends({}, config.chartConfig.boundingBox, (_extends3 = {}, _extends3[key] = value, _extends3)) }) })); } })); }))), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u9F20\u6807\u5E73\u79FB" }, /*#__PURE__*/React.createElement(_Radio.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(_extends({}, config, { chartConfig: _extends({}, 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.createElement(_Form.Item, { label: "\u9F20\u6807\u77E9\u5F62\u9002\u5408" }, /*#__PURE__*/React.createElement(_Radio.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(_extends({}, config, { chartConfig: _extends({}, 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.createElement(_Form.Item, { label: "\u9F20\u6807\u77E9\u5F62\u7F29\u653E" }, /*#__PURE__*/React.createElement(_Radio.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(_extends({}, config, { chartConfig: _extends({}, 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.createElement(_Form.Item, { label: "\u9F20\u6807\u6EDA\u8F6E\u7F29\u653E" }, /*#__PURE__*/React.createElement(_Radio.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(_extends({}, config, { chartConfig: _extends({}, 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.createElement(_Divider, null))), /*#__PURE__*/React.createElement(ProCard.TabPane, { key: "2", tab: "\u5149\u6807\u914D\u7F6E" }, /*#__PURE__*/React.createElement(_Form, { size: "small", colon: false, className: "form-config" }, /*#__PURE__*/React.createElement(_Form.Item, { label: "\u70B9\u6807\u8BB0" }, /*#__PURE__*/React.createElement(_Radio.Group, { style: { "float": 'right' }, options: [{ label: '启用', value: false }, { label: '禁用', value: true }], onChange: function onChange(_ref20) { var value = _ref20.target.value; return setConfig(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, 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.createElement(_Form.Item, { label: "\u8F74" }, /*#__PURE__*/React.createElement(_Select, { 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.createElement(_Divider, { plain: true }, "\u7F51\u683C\u63CF\u8FB9"), /*#__PURE__*/React.createElement(ProCard, { 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.createElement(_Select, { 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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, (_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.createElement(_Form.Item, { label: "\u7C97\u7EC6" }, /*#__PURE__*/React.createElement(_InputNumber, { 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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, (_config$chartConfig24 = config.chartConfig) === null || _config$chartConfig24 === void 0 ? void 0 : _config$chartConfig24.cursor, (_extends4 = {}, _extends4[cursor] = _extends({}, (_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.createElement(_Form.Item, { label: "\u586B\u5145" }, /*#__PURE__*/React.createElement(_Popover, { placement: "bottomRight", content: /*#__PURE__*/React.createElement(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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, (_config$chartConfig30 = config.chartConfig) === null || _config$chartConfig30 === void 0 ? void 0 : _config$chartConfig30.cursor, (_extends5 = {}, _extends5[cursor] = _extends({}, (_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.createElement(_Button, { style: { width: 40, "float": 'right', paddingTop: 5, paddingBottom: 5 } }, /*#__PURE__*/React.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.createElement(_Form.Item, { label: "\u7F51\u683C" }, /*#__PURE__*/React.createElement(_Radio.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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, (_config$chartConfig36 = config.chartConfig) === null || _config$chartConfig36 === void 0 ? void 0 : _config$chartConfig36.cursor, (_extends6 = {}, _extends6[cursor] = _extends({}, (_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.createElement(_Divider, null), /*#__PURE__*/React.createElement(_Divider, { plain: true }, "\u523B\u5EA6\u7EBF"), /*#__PURE__*/React.createElement(ProCard, { 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.createElement(_Radio.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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, config.chartConfig.cursor, (_extends7 = {}, _extends7[cursor] = _extends({}, (_config$chartConfig$c8 = config.chartConfig.cursor) === null || _config$chartConfig$c8 === void 0 ? void 0 : _config$chartConfig$c8[cursor], { tickMarker: _extends({}, (_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.createElement(ProCard, { 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.createElement(_Switch, { 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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, config.chartConfig.cursor, (_extends8 = {}, _extends8[cursor] = _extends({}, (_config$chartConfig$c20 = config.chartConfig.cursor) === null || _config$chartConfig$c20 === void 0 ? void 0 : _config$chartConfig$c20[cursor], { tickMarker: _extends({}, (_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.createElement(_Form.Item, { label: "\u5B57\u4F53\u5927\u5C0F" }, /*#__PURE__*/React.createElement(_InputNumber, { 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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, config.chartConfig.cursor, (_extends9 = {}, _extends9[cursor] = _extends({}, (_config$chartConfig$c26 = config.chartConfig.cursor) === null || _config$chartConfig$c26 === void 0 ? void 0 : _config$chartConfig$c26[cursor], { tickMarker: _extends({}, (_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.createElement(_Form.Item, { label: "\u5B57\u4F53\u7CFB\u5217" }, /*#__PURE__*/React.createElement(_Select, { 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(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, config.chartConfig.cursor, (_extends10 = {}, _extends10[cursor] = _extends({}, (_config$chartConfig$c32 = config.chartConfig.cursor) === null || _config$chartConfig$c32 === void 0 ? void 0 : _config$chartConfig$c32[cursor], { tickMarker: _extends({}, (_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 }; }) })), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u5B57\u4F53\u989C\u8272" }, /*#__PURE__*/React.createElement(_Popover, { placement: "bottomRight", content: /*#__PURE__*/React.createElement(SketchPicker, { color: (_config$chartConfig$c35 = config.chartConfig.cursor) === null || _config$chartConfig$c35 === void 0 ? void 0 : (_config$chartConfig$c36 = _config$chartConfig$c35[cursor]) === null || _config$chartConfig$c36 === void 0 ? void 0 : (_config$chartConfig$c37 = _config$chartConfig$c36.tickMarker) === null || _config$chartConfig$c37 === void 0 ? void 0 : _config$chartConfig$c37.fontColor, onChange: function onChange(_ref24) { var _config$chartConfig$c38, _config$chartConfig$c39, _config$chartConfig$c40, _extends11; var rgb = _ref24.rgb; return setConfig(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, config.chartConfig.cursor, (_extends11 = {}, _extends11[cursor] = _extends({}, (_config$chartConfig$c38 = config.chartConfig.cursor) === null || _config$chartConfig$c38 === void 0 ? void 0 : _config$chartConfig$c38[cursor], { tickMarker: _extends({}, (_config$chartConfig$c39 = config.chartConfig.cursor) === null || _config$chartConfig$c39 === void 0 ? void 0 : (_config$chartConfig$c40 = _config$chartConfig$c39[cursor]) === null || _config$chartConfig$c40 === void 0 ? void 0 : _config$chartConfig$c40.tickMarker, { fontColor: "rgba(" + Object.values(rgb).toString() + ")" }) }), _extends11)) }) })); } }) }, /*#__PURE__*/React.createElement(_Button, { style: { width: 40, "float": 'right', paddingTop: 5, paddingBottom: 5 } }, /*#__PURE__*/React.createElement("div", { style: { background: (_config$chartConfig$c41 = config.chartConfig.cursor) === null || _config$chartConfig$c41 === void 0 ? void 0 : (_config$chartConfig$c42 = _config$chartConfig$c41[cursor]) === null || _config$chartConfig$c42 === void 0 ? void 0 : (_config$chartConfig$c43 = _config$chartConfig$c42.tickMarker) === null || _config$chartConfig$c43 === void 0 ? void 0 : _config$chartConfig$c43.fontColor, width: '100%', height: '100%' } }))))), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u80CC\u666F\u8272" }, /*#__PURE__*/React.createElement(_Popover, { placement: "bottomRight", content: /*#__PURE__*/React.createElement(SketchPicker, { color: (_config$chartConfig$c44 = config.chartConfig.cursor) === null || _config$chartConfig$c44 === void 0 ? void 0 : (_config$chartConfig$c45 = _config$chartConfig$c44[cursor]) === null || _config$chartConfig$c45 === void 0 ? void 0 : (_config$chartConfig$c46 = _config$chartConfig$c45.tickMarker) === null || _config$chartConfig$c46 === void 0 ? void 0 : _config$chartConfig$c46.backgroundColor, onChange: function onChange(_ref25) { var _config$chartConfig$c47, _config$chartConfig$c48, _config$chartConfig$c49, _extends12; var rgb = _ref25.rgb; return setConfig(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, config.chartConfig.cursor, (_extends12 = {}, _extends12[cursor] = _extends({}, (_config$chartConfig$c47 = config.chartConfig.cursor) === null || _config$chartConfig$c47 === void 0 ? void 0 : _config$chartConfig$c47[cursor], { tickMarker: _extends({}, (_config$chartConfig$c48 = config.chartConfig.cursor) === null || _config$chartConfig$c48 === void 0 ? void 0 : (_config$chartConfig$c49 = _config$chartConfig$c48[cursor]) === null || _config$chartConfig$c49 === void 0 ? void 0 : _config$chartConfig$c49.tickMarker, { backgroundColor: "rgba(" + Object.values(rgb).toString() + ")" }) }), _extends12)) }) })); } }) }, /*#__PURE__*/React.createElement(_Button, { style: { width: 40, "float": 'right', paddingTop: 5, paddingBottom: 5 } }, /*#__PURE__*/React.createElement("div", { style: { background: (_config$chartConfig$c50 = config.chartConfig.cursor) === null || _config$chartConfig$c50 === void 0 ? void 0 : (_config$chartConfig$c51 = _config$chartConfig$c50[cursor]) === null || _config$chartConfig$c51 === void 0 ? void 0 : (_config$chartConfig$c52 = _config$chartConfig$c51.tickMarker) === null || _config$chartConfig$c52 === void 0 ? void 0 : _config$chartConfig$c52.backgroundColor, width: '100%', height: '100%' } }))))), /*#__PURE__*/React.createElement(_Divider, null), /*#__PURE__*/React.createElement(_Divider, { plain: true }, "\u7ED3\u679C\u8868"), /*#__PURE__*/React.createElement(_Form.Item, { label: "\u4F4D\u7F6E" }, /*#__PURE__*/React.createElement(_Select, { value: config.chartConfig.cursor.resultTable.align, style: { width: 100, "float": 'right' }, options: [{ label: '左上', value: 'LeftTop' }, { label: '左中', value: 'LeftCenter' }, { label: '左下', value: 'LeftBottom' }, { label: '中', value: 'Center' }, { label: '右上', value: 'RightTop' }, { label: '右中', value: 'RightCenter' }, { label: '右下', value: 'RightBottom' }], onChange: function onChange(value) { return setConfig(_extends({}, config, { chartConfig: _extends({}, config.chartConfig, { cursor: _extends({}, config.chartConfig.cursor, { resultTable: _extends({}, config.chartConfig.cursor.resultTable, { align: value }) }) })