@castianta/chart-lc/lib/demo/pointLine.js

lc版图表

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _button = _interopRequireDefault(require("antd/lib/button"));

var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = require("react");

var _index = require("../index");

var _icons = require("@ant-design/icons");

var _baseDrawer = _interopRequireDefault(require("./baseDrawer"));

var _default = function _default() {
  var ref = (0, _react.useRef)();

  var _useState = (0, _react.useState)(),
      config = _useState[0],
      setConfig = _useState[1];

  var _useState2 = (0, _react.useState)([{
    name: '点线1',
    pointColor: '#a8071a',
    color: '#6fd',
    pointSize: 20,
    pointShape: 'Square',
    data: [],
    pointRotationEnabled: true,
    pointSizeEnabled: true,
    thickness: 6
  }, {
    name: '点线2',
    pointColor: '#3f6600',
    color: '#c4d',
    pointSize: 10,
    pointShape: 'Triangle',
    data: [],
    pointRotationEnabled: true,
    pointSizeEnabled: true,
    thickness: 3
  }]),
      dataSource = _useState2[0],
      setDataSource = _useState2[1];

  (0, _react.useEffect)(function () {
    var timer = setInterval(function () {
      setDataSource(function (source) {
        return source.map(function (item) {
          return (0, _extends2["default"])({}, item, {
            data: [].concat(item === null || item === void 0 ? void 0 : item.data, [{
              x: (item === null || item === void 0 ? void 0 : item.data.length) * 1000,
              y: Math.random(),
              rotation: Math.random() * 360,
              size: Math.random() * 30
            }])
          });
        });
      });
    }, 1000);
    return function () {
      clearInterval(timer);
    };
  }, []);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_baseDrawer["default"], {
    ref: ref,
    dataSource: dataSource,
    setDataSource: setDataSource,
    useConfig: setConfig,
    tab: {
      title: '点线配置',
      params: ['name', 'color', 'thickness', 'cursorEnabled', 'pointShape', 'point3DStyle', 'point3DShape', 'pointSize', 'pointColor']
    }
  }), config && /*#__PURE__*/React.createElement(_index.PointLine, (0, _extends2["default"])({}, config, {
    card: {
      title: /*#__PURE__*/React.createElement(_tooltip["default"], {
        title: "\u5728 CodeSandbox \u4E2D\u6253\u5F00"
      }, /*#__PURE__*/React.createElement(_icons.CodeSandboxOutlined, {
        onClick: function onClick() {
          return window.open('https://codesandbox.io/s/qcxe5');
        }
      })),
      extra: /*#__PURE__*/React.createElement(_button["default"], {
        type: "primary",
        onClick: function onClick() {
          var onVisible = ref.current.onVisible;
          onVisible(true);
        },
        icon: /*#__PURE__*/React.createElement(_icons.SettingOutlined, null)
      })
    },
    dataSource: dataSource
  })));
};

exports["default"] = _default;