@cainiaofe/cn-ui-charts
Version:
104 lines • 3.41 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { useEffect, useRef, forwardRef } from 'react';
import classnames from 'classnames';
import "./index.scss";
import { Chart } from '@antv/g2';
var clsPrefix = 'cn-chart';
var ChartProps = /*#__PURE__*/function (_Chart) {
_inheritsLoose(ChartProps, _Chart);
function ChartProps() {
return _Chart.apply(this, arguments) || this;
}
return ChartProps;
}(Chart);
/**
* CnPieChart 组件
* @param {*} props
* @returns
*/
var CnChart = /*#__PURE__*/forwardRef(function (props, ref) {
var _props$theme = props.theme,
theme = _props$theme === void 0 ? 'classic' : _props$theme,
autoFit = props.autoFit,
className = props.className,
containerStyle = props.containerStyle,
width = props.width,
height = props.height,
data = props.data,
options = props.options;
var container = useRef(null);
var chartRef = useRef();
useEffect(function () {
if (!container.current) {
return;
}
if (!chartRef.current) {
var chart = new Chart({
container: container.current,
theme: theme,
autoFit: autoFit,
width: width,
height: height
});
chartRef.current = chart;
if (ref) {
ref.current = chart;
}
chart.axis('x', {
line: true,
style: {
lineLineWidth: 1,
lineFill: '#BFBFBF',
labelFill: '#666',
labelFontWeight: '400'
}
}).axis('y', {
line: false,
tick: false,
grid: true,
style: {
gridLineWidth: 1,
gridFill: '#E7E8ED',
labelFill: '#666',
labelFontWeight: '400'
}
}).legend('color', {
style: {
itemLabelFill: '#666',
itemLabelFontWeight: '400'
}
});
}
chartRef.current.options(_extends({}, props, options));
chartRef.current.render();
if (ResizeObserver) {
var iter;
var ro = new ResizeObserver(function (entries) {
if (entries.length) {
var _entries$, _entries$$contentRect, _entries$2, _entries$2$contentRec;
var rectWidth = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : (_entries$$contentRect = _entries$.contentRect) === null || _entries$$contentRect === void 0 ? void 0 : _entries$$contentRect.width;
var rectHeight = (_entries$2 = entries[0]) === null || _entries$2 === void 0 ? void 0 : (_entries$2$contentRec = _entries$2.contentRect) === null || _entries$2$contentRec === void 0 ? void 0 : _entries$2$contentRec.height;
if (rectWidth && rectHeight) {
if (iter) {
clearTimeout(iter);
}
iter = setTimeout(function () {
var _chartRef$current;
(_chartRef$current = chartRef.current) === null || _chartRef$current === void 0 ? void 0 : _chartRef$current.changeSize(rectWidth, rectHeight);
}, 800);
}
}
});
ro.observe(container.current);
}
// chartRef.current.changeData(data);
}, [data, options]);
return /*#__PURE__*/React.createElement("div", {
ref: container,
className: classnames(clsPrefix, className),
style: containerStyle
});
});
CnChart.displayName = 'CnChart';
export { CnChart, ChartProps };