@linkdesign/screen
Version:
屏组件库，但使用场景又不局限于屏。主要用于BI、大盘和屏
230 lines (228 loc) • 8.11 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodashEs = require("lodash-es");
var _g = require("@antv/g2");
var _title = _interopRequireDefault(require("../title"));
var _context = _interopRequireDefault(require("../context"));
var _Utils = require("../Utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var GaugeChart = /*#__PURE__*/function (_PureComponent) {
(0, _inheritsLoose2["default"])(GaugeChart, _PureComponent);
function GaugeChart(props) {
var _this;
_this = _PureComponent.call(this, props) || this;
_this.containerRef = void 0;
_this.titleRef = void 0;
_this.chartRef = void 0;
_this.chart = void 0;
_this.containerHeight = void 0;
/**
* 获取配置项
*
* @memberof GaugeChart
*/
_this.getOptions = function (config) {
var value = config.value,
limit = config.limit,
_config$min = config.min,
min = _config$min === void 0 ? 0 : _config$min,
_config$max = config.max,
max = _config$max === void 0 ? 10 : _config$max,
_config$tickInterval = config.tickInterval,
tickInterval = _config$tickInterval === void 0 ? 1 : _config$tickInterval,
label = config.label,
content = config.content;
return {
data: [{
value: value
}],
legends: false,
scales: {
value: {
min: min,
max: max,
tickInterval: tickInterval
}
},
coordinate: {
type: 'polar',
cfg: {
startAngle: -9 / 8 * Math.PI,
endAngle: 1 / 8 * Math.PI,
radius: 0.93
}
},
axes: {
1: false,
value: {
line: null,
label: {
offset: -17,
style: {
fontSize: 9.6,
textAlign: 'center',
textBaseline: 'middle',
color: '#D3E2FF'
}
},
subTickLine: null,
tickLine: null,
grid: null
}
},
annotations: [{
type: 'arc',
top: false,
start: [0, 1],
end: [max, 1],
style: {
stroke: '#1F3B6D',
lineWidth: 12,
lineDash: null
}
}, {
type: 'arc',
start: [0, 1],
end: [value, 1],
style: {
stroke: value < limit ? '#1890FF' : '#FF5E5E',
lineWidth: 12,
lineDash: null
}
}, {
type: 'text',
position: ['50%', '100%'],
content: label,
style: {
fontSize: 12,
fill: value < limit ? '#D3E2FF' : '#FF5E5E',
stroke: null,
fontWeight: 'normal',
textAlign: 'center'
}
}, {
type: 'text',
position: ['50%', '120%'],
content: typeof content === 'function' ? content(value) : content || value,
style: {
fontSize: 28,
fill: value < limit ? '#fff' : '#FF5E5E',
stroke: null,
textAlign: 'center',
fontFamily: 'HelveticaNeue-CondensedBold'
}
}]
};
};
_this.containerRef = /*#__PURE__*/_react["default"].createRef();
_this.titleRef = /*#__PURE__*/_react["default"].createRef();
_this.chartRef = /*#__PURE__*/_react["default"].createRef();
return _this;
}
var _proto = GaugeChart.prototype;
_proto.componentDidMount = function componentDidMount() {
var config = this.props.config;
this.containerHeight = this.containerRef.current.clientHeight;
var height = this.titleRef.current ? this.containerHeight - (0, _Utils.Dimension)(this.titleRef.current) : this.containerHeight;
// 自定义Shape 部分
(0, _g.registerShape)('point', 'pointer', {
draw: function draw(cfg, container) {
var group = container.addGroup();
// @ts-ignore
var center = this.parsePoint({
x: 0,
y: 0
}); // 获取极坐标系下画布中心点
// 绘制指针
group.addShape('line', {
attrs: {
x1: center.x,
y1: center.y,
x2: cfg.x,
y2: cfg.y,
stroke: cfg.color,
lineWidth: 2,
lineCap: 'round'
}
});
group.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 6,
stroke: cfg.color,
lineWidth: 2,
fill: '#1F3B6D'
}
});
return group;
}
});
this.chart = new _g.Chart({
container: this.chartRef.current,
autoFit: true,
height: height,
padding: [0, 0, height * 0.07 + 36, 0],
options: this.getOptions(config)
});
this.chart.point().position('value*1').shape('pointer').color('#1890FF').animate({
appear: {
animation: 'fade-in'
}
});
this.chart.render();
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var config = this.props.config;
if (!(0, _lodashEs.isEqual)(config.value, prevProps.config.value)) {
this.chart.changeData(this.getOptions(config).data);
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
this.chart.destroy();
};
_proto.render = function render() {
var _cssPrefix = this.context._cssPrefix;
var _this$props = this.props,
className = _this$props.className,
title = _this$props.title,
universalStyle = _this$props.universalStyle,
_this$props$titleOpti = _this$props.titleOptions,
titleOptions = _this$props$titleOpti === void 0 ? {
align: 'left',
textStyle: {
marginBottom: 8
}
} : _this$props$titleOpti;
return /*#__PURE__*/_react["default"].createElement("div", {
ref: this.containerRef,
className: (0, _classnames["default"])(className, _cssPrefix + "chart-wrapper"),
style: {
width: (0, _lodashEs.get)(universalStyle, 'width'),
height: (0, _lodashEs.get)(universalStyle, 'height')
}
}, title &&
/*#__PURE__*/
// @ts-ignore
_react["default"].createElement(_title["default"], (0, _extends2["default"])({}, titleOptions, {
forwardRef: this.titleRef,
className: (0, _classnames["default"])(_cssPrefix + "chart-title", _cssPrefix + "main-chart-title", (0, _lodashEs.get)(titleOptions, 'className'))
}), title), /*#__PURE__*/_react["default"].createElement("div", {
ref: this.chartRef,
className: _cssPrefix + "chart-content"
}));
};
return GaugeChart;
}(_react.PureComponent); // @ts-ignore
GaugeChart.defaultProps = {
config: {}
};
GaugeChart.contextType = _context["default"];
var _default = exports["default"] = GaugeChart;