@alicloud/cloud-charts
Version:
776 lines (626 loc) • 28.7 kB
JavaScript
'use strict';
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import { Chart } from '@antv/g2/esm';
import { registerTickMethod } from '@antv/scale/esm';
import * as React from 'react';
import { getParentSize, requestAnimationFrame, isEqualWith, merge, mapColors } from './common';
import highchartsDataToG2Data from './dataAdapter';
import chartLog, { warn } from './log';
import eventBus from './eventBus';
import { FullCrossName } from '../constants';
import { integer } from './tickMethod';
import { checkColor, checkPadding, checkSize, checkSizeConfig, checkSpecialConfig } from './checkFunctions';
import { ChartContext } from '../ChartProvider';
import chartRefs from './chartRefs';
import { runInitRule, runBeforePaintRule, runAfterDataChangedRule } from '../rule/runRule';
import registerAopController from '../aop/controller/index';
import { convertThemeKey } from '../themes/index';
import { getG2theme } from '../themes/themeTools';
import "../Wplaceholder/index.css";
registerTickMethod('integer', integer);
registerAopController(); // 图表唯一id
var uniqueId = 0;
function generateUniqueId() {
return "react-g2-" + uniqueId++;
}
export var rootClassName = FullCrossName + " ";
export var rootChildClassName = FullCrossName + "-children";
/** 修复旧版 padding 部分 auto 的设置导致图表白屏的问题 */
function fixPadding(padding) {
if (Array.isArray(padding)) {
for (var i = 0; i < padding.length; i++) {
if (padding[i] === 'auto') {
warn('config.padding', "不再支持 auto 和 数值 混用，请使用 config.padding = 'auto'");
return 'auto';
}
}
}
return padding;
}
var needFixEventName = {
plotenter: 'plot:enter',
plotmove: 'plot:move',
plotleave: 'plot:leave',
plotclick: 'plot:click',
plotdblclick: 'plot:dblclick'
};
/** 修复部分事件名称改变导致在新版不生效的问题 */
function fixEventName(eventName) {
// @ts-ignore
if (needFixEventName[eventName]) {
// @ts-ignore
warn('event', "\u4E8B\u4EF6 " + eventName + " \u540D\u79F0\u66F4\u6539\u4E3A\uFF1A" + needFixEventName[eventName]); // @ts-ignore
return needFixEventName[eventName];
}
return eventName;
}
function setGeometryAnimateRecursive(view) {
if (view.geometries) {
var geometries = view.geometries;
for (var i = 0; i < geometries.length; i++) {
var geometry = geometries[i];
geometry.animate(true);
}
}
if (view.views) {
var views = view.views;
for (var _i = 0; _i < views.length; _i++) {
setGeometryAnimateRecursive(views[_i]);
}
}
} // function getGeometryAnimateRecursive(view: View, viewParentKey: string = 'root', result: Record<string, any> = {}) {
// if (view.geometries) {
// const geometries = view.geometries;
// for (let i = 0; i < geometries.length; i++) {
// const geometry = geometries[i];
// result[`view${viewParentKey}-geom${i}`] = geometry.animateOption;
// }
// }
// if (view.views) {
// const views = view.views;
// for (let i = 0; i < views.length; i++) {
// getGeometryAnimateRecursive(views[i], `view${viewParentKey}-view${i}`, result);
// }
// }
// return result;
// }
/**
* React 图表基类
*
* @template ChartConfig 泛型 - 配置项
* @template Props 泛型 - Props参数
* */
var Base = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(Base, _React$Component);
// 通过context传递的合并后的config
// private isEmpty: boolean;
// private isBigData: boolean;
// private isExtreme: boolean;
// private errorInfo: string;
// chartRef
function Base(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.chartName = 'Base';
_this.legendField = 'type';
_this.chart = void 0;
_this.chartDom = void 0;
_this.chartId = void 0;
_this.defaultConfig = void 0;
_this.mergeConfig = void 0;
_this.language = void 0;
_this.rawData = void 0;
_this.dataSize = void 0;
_this.ref = /*#__PURE__*/React.createRef();
_this.convertData = true;
_this.isReRendering = false;
_this.isEqualCustomizer = function (objValue, othValue, key) {
var res = _this.isChangeEqual ? _this.isChangeEqual(objValue, othValue, key) : undefined;
if (res !== undefined) {
return res;
}
var enableFunctionUpdate = _this.props.enableFunctionUpdate; // 默认忽略全部function，开启 enableFunctionUpdate 可以接受function更新
if (!enableFunctionUpdate && typeof objValue === 'function' && typeof othValue === 'function') {
return true;
} // 其余情况使用lodash的默认判断
return undefined;
};
_this.unmountCallbacks = [];
_this.size = [0, 0];
_this.resizeRunning = false;
_this.resizeTimer = null;
_this.chart = null;
_this.chartDom = null;
_this.chartId = generateUniqueId();
_this.defaultConfig = _this.getDefaultConfig();
_this.autoResize = _this.autoResize.bind(_assertThisInitialized(_this));
_this.rerender = _this.rerender.bind(_assertThisInitialized(_this));
return _this;
} // 图表生命周期
/** 是否自动转换数据格式 */
var _proto = Base.prototype;
/** 获取图表默认配置项 */
_proto.getDefaultConfig = function getDefaultConfig() {
return {};
}
/** 初始化前对props额外处理 */
;
/** 初始化函数 */
_proto.init = function init(chart, config, data) {}
/** 自定义判断配置项是否更改 */
;
/** 更新数据 */
_proto.changeData = function changeData(chart, config, data) {
chart && chart.changeData(data);
}
/** 更新尺寸 */
;
_proto.changeSize = function changeSize(chart, config, width, height) {
chart && chart.changeSize(width, height);
}
/** @deprecated 图表渲染后回调 */
// public afterRender?(config: ChartConfig): void;
/** 销毁图表 */
;
// 基类自己的生命周期
_proto.componentDidMount = function componentDidMount() {
// 图表初始化时记录日志
chartLog(this.chartName, 'init');
this.language = this.props.language || this.context.language; // 设置初始高宽
this.initSize();
this.initChart();
eventBus.on('setTheme', this.rerender);
eventBus.on('setLanguage', this.rerender);
};
// private reRenderTimer: any = null;
_proto.rerender = function rerender() {
// 修复 变化过快时 chart.destroy 方法无法清除dom，导致dom重复的问题。
if (this.isReRendering) {// window.cancelAnimationFrame(this.reRenderTimer);
}
this.isReRendering = true;
this.handleDestroy(); // this.reRenderTimer = requestAnimationFrame(() => {
if (!this.chartDom) {
return;
}
this.initSize();
this.initChart();
this.isReRendering = false; // });
};
_proto.checkConfigChange = function checkConfigChange(newConfig, oldConfig) {
var hasConfigChange = false;
if (!isEqualWith(newConfig, oldConfig, this.isEqualCustomizer)) {
hasConfigChange = true;
}
return hasConfigChange;
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var _this$context,
_this$context$default,
_this$context$default2,
_this$context2,
_this$context2$defaul,
_this2 = this;
var _this$props = this.props,
newData = _this$props.data,
newWidth = _this$props.width,
newHeight = _this$props.height,
newConfig = _this$props.config,
newEvent = _this$props.event,
newInteraction = _this$props.interaction,
newLoading = _this$props.loading;
var oldData = prevProps.data,
oldWidth = prevProps.width,
oldHeight = prevProps.height,
oldConfig = prevProps.config,
oldEvent = prevProps.event,
oldInteraction = prevProps.interaction,
oldLoading = prevProps.loading;
this.language = this.props.language || this.context.language; // loading状态改变，直接重绘
if (newLoading !== oldLoading) {
this.rerender();
return;
}
if (oldLoading && !newLoading) {
this.initSize();
this.initChart();
} // 通过上下文传递的通用配置项
var globalBaseConfig = (_this$context = this.context) === null || _this$context === void 0 ? void 0 : (_this$context$default = _this$context.defaultConfig) === null || _this$context$default === void 0 ? void 0 : _this$context$default.baseConfig; // 通过上下文传递的图表配置项
var globalComsConfig = (_this$context$default2 = (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : (_this$context2$defaul = _this$context2.defaultConfig) === null || _this$context2$defaul === void 0 ? void 0 : _this$context2$defaul[this.chartName.replace('G2', '')]) !== null && _this$context$default2 !== void 0 ? _this$context$default2 : {}; // 用户自定义 > 图表 > 通用 > 默认
var newAllConfig = merge({}, this.defaultConfig, globalBaseConfig, globalComsConfig, newConfig); // 处理padding
newAllConfig.padding = fixPadding(prevProps.padding || newAllConfig.padding);
newAllConfig.appendPadding = prevProps.appendPadding || newAllConfig.appendPadding; // 颜色映射
newAllConfig.colors = mapColors(newAllConfig.colors); // 配置项有变化，重新生成图表
// 还需要判断上下文传的config有没有发生变化
// if (changeConfig !== false) {
if (this.checkConfigChange(newAllConfig, this.mergeConfig)) {
this.rerender();
return;
} // }
// console.log('componentDidUpdate', getG2theme(convertThemeKey(this.context.theme)))
// 判断context内的theme是否有变化
if (this.context.theme) {
this.chart.theme(getG2theme(convertThemeKey(this.context.theme)));
} // 更新事件
if (newEvent !== oldEvent) {
// 清除旧事件
Object.keys(oldEvent).forEach(function (eventKey) {
_this2.chart.off(fixEventName(eventKey), oldEvent[eventKey]);
}); // 绑定新事件
Object.keys(newEvent).forEach(function (eventKey) {
_this2.chart.on(fixEventName(eventKey), newEvent[eventKey]);
});
}
if (newInteraction !== oldInteraction) {
// 清除旧交互
Object.keys(oldInteraction).forEach(function (interactionName) {
_this2.chart.removeInteraction(interactionName);
}); // 绑定新交互
Object.keys(newInteraction).forEach(function (interactionName) {
_this2.chart.interaction(interactionName, newInteraction[interactionName]);
});
} // let needAfterRender = false;
var dataChanged = newData !== oldData || Array.isArray(newData) && Array.isArray(oldData) && newData.length !== oldData.length;
var sizeChanged = newWidth !== oldWidth || newHeight !== oldHeight; // 数据与尺寸同时改变,直接重绘
if (dataChanged && sizeChanged) {
this.rerender();
return;
} // 数据有变化
else if (dataChanged) {
var data = this.convertData && newAllConfig.dataType !== 'g2' ? highchartsDataToG2Data(newData, newAllConfig) : newData;
this.rawData = newData; // 运行规则
// 目前仅检测极端数据
// 数据变化时，若替换配置项，必须重绘图表才能生效
var needRerender = runAfterDataChangedRule(this, newAllConfig, data); // 必须重绘的场景：空数据变成有数据、极端与非极端切换、异常与非异常切换
if (needRerender) {
this.rerender();
return;
}
this.emitWidgetsEvent(newEvent, 'beforeWidgetsChangeData', newAllConfig, data);
this.changeData(this.chart, newAllConfig, data);
this.emitWidgetsEvent(newEvent, 'afterWidgetsChangeData', newAllConfig, data); // if (this.chartProcess.changeData) {
// this.chart &&
// this.chartProcess.changeData.call(
// this,
// this.chart,
// newConfig,
// data
// );
// } else {
// this.chart && this.chart.changeData(data);
// }
// needAfterRender = true;
} // 传入的长宽有变化
else if (sizeChanged) {
this.handleChangeSize(newAllConfig, newWidth, newHeight); // needAfterRender = true;
} // if (needAfterRender) {
// this.handleAfterRender(newConfig);
// }
} // 渲染控制，仅 class、style、children 变化会触发渲染
// shouldComponentUpdate(nextProps) {
// console.log('shouldComponentUpdate', nextProps);
// const { className: newClass, style: newStyle, children: newChild } = nextProps;
// const { className: oldClass, style: oldStyle, children: oldChild } = this.props;
// return newClass !== oldClass || newStyle !== oldStyle || newChild !== oldChild;
// }
// 准备销毁
;
_proto.handleDestroy = function handleDestroy() {
var _this3 = this;
// 清空缩放相关变量和事件
this.resizeRunning = false;
window.cancelAnimationFrame(this.resizeTimer);
window.removeEventListener('resize', this.autoResize); // 清除配置变化重新生成图表的定时器
// window.cancelAnimationFrame(this.reRenderTimer);
// 清除afterRender的定时器
// clearTimeout(this.afterRenderTimer);
if (this.destroy) {
this.chart && this.destroy();
}
if (this.unmountCallbacks.length > 0) {
this.unmountCallbacks.forEach(function (cb) {
cb && cb.call(_this3, _this3.chart);
});
}
this.chart && this.chart.destroy && this.chart.destroy();
this.chart = null; // this.chartDom = null;
// this.chartId = null;
if (typeof this.props.getChartInstance === 'function') {
this.props.getChartInstance(null);
} // this.afterRenderCallbacks = [];
this.unmountCallbacks = [];
};
_proto.componentWillUnmount = function componentWillUnmount() {
this.handleDestroy();
eventBus.off('setTheme', this.rerender);
};
_proto.initChart = function initChart() {
var _this$context3,
_this$context3$defaul,
_this$context$default3,
_this$context4,
_this$context4$defaul,
_this$context6,
_this$context8,
_this4 = this;
// 通过上下文传递的通用配置项 - 全局通用配置项
var globalBaseConfig = (_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : (_this$context3$defaul = _this$context3.defaultConfig) === null || _this$context3$defaul === void 0 ? void 0 : _this$context3$defaul.baseConfig; // 通过上下文传递的图表配置项 - 全局图表配置项
var globalComsConfig = (_this$context$default3 = (_this$context4 = this.context) === null || _this$context4 === void 0 ? void 0 : (_this$context4$defaul = _this$context4.defaultConfig) === null || _this$context4$defaul === void 0 ? void 0 : _this$context4$defaul[this.chartName.replace('G2', '')]) !== null && _this$context$default3 !== void 0 ? _this$context$default3 : {}; // 是否执行全局规则使用 - 默认为否（待规则完善后再默认开启）
var globalRule = false; // 默认不传该配置项
if (typeof this.props.force === undefined) {
var _this$context5;
globalRule = !!((_this$context5 = this.context) !== null && _this$context5 !== void 0 && _this$context5.rule);
} else if (typeof this.props.force === 'boolean') {
// 属性优先级 > 上下文
globalRule = this.props.force;
} else if (typeof ((_this$context6 = this.context) === null || _this$context6 === void 0 ? void 0 : _this$context6.rule) === 'object' && typeof this.props.force === 'object') {
var _this$context7;
globalRule = merge({}, (_this$context7 = this.context) === null || _this$context7 === void 0 ? void 0 : _this$context7.rule, this.props.force);
} // 图表初始化时记录用户自定义配置项
chartLog(this.chartName, 'configInfo', {
chartId: this.chartId,
config: this.props.config || {},
chartName: this.chartName
});
var currentProps = _extends({}, this.props, {
config: merge({}, this.defaultConfig, globalBaseConfig, globalComsConfig, this.props.config),
force: globalRule
}); // 开始初始化图表
if (this.beforeInit) {
currentProps = this.beforeInit(currentProps);
} // 处理padding
// todo: 加入规则体系中
currentProps.config.padding = fixPadding(currentProps.padding || currentProps.config.padding);
currentProps.config.appendPadding = currentProps.appendPadding || currentProps.config.appendPadding; // 颜色映射
currentProps.config.colors = mapColors(currentProps.config.colors); // 用户自定义 > 图表 > 通用 > 默认
this.mergeConfig = currentProps.config;
var _currentProps = currentProps,
width = _currentProps.width,
height = _currentProps.height,
initData = _currentProps.data,
event = _currentProps.event,
interaction = _currentProps.interaction,
animate = _currentProps.animate,
force = _currentProps.force,
otherProps = _objectWithoutPropertiesLoose(_currentProps, ["width", "height", "data", "event", "interaction", "animate", "force"]);
var _currentProps2 = currentProps,
config = _currentProps2.config; // 预处理数据
var data = this.convertData && config.dataType !== 'g2' ? highchartsDataToG2Data(initData, config) : initData;
this.rawData = initData; // 初始化规则
var _runInitRule = runInitRule(this, config, data),
specialData = _runInitRule.data,
specialConfig = _runInitRule.config;
data = specialData !== null && specialData !== void 0 ? specialData : data;
config = specialConfig !== null && specialConfig !== void 0 ? specialConfig : config; // 特殊配置项检测
// 目前仅对线图、线点图与散点图微调x轴range
// todo: 加入规则体系
var extraConfig = checkSpecialConfig(this.chartName, config, force);
config = merge({}, config, extraConfig); // 检测饼图、多重饼图、多重圆环是否有chilren
if (['G2Pie', 'G2MultiPie', 'G2MultiCircle'].includes(this.chartName) && this.props.children) {
var _this$props$config;
// @ts-ignore
if ((_this$props$config = this.props.config) !== null && _this$props$config !== void 0 && _this$props$config.innerContent) {
warn("W" + this.chartName.slice(2), '图表的中心内容innerContent配置项会被chilren覆盖，建议删除chilren');
} else {
warn("W" + this.chartName.slice(2), '推荐通过innerContent配置项设置中心内容');
}
} // 生成图表实例
var chart = new Chart(_extends({
container: this.chartDom,
width: this.size[0],
height: this.size[1] || 200,
padding: config.padding,
appendPadding: config.appendPadding
}, otherProps));
this.chart = chart; // 绑定上下文
// @ts-ignore
this.chart.widgetsCtx = this; // 上下文的主题配置, 优先级高于全局变量 ｜ 全局事件
if ((_this$context8 = this.context) !== null && _this$context8 !== void 0 && _this$context8.theme) {
this.chart.theme(getG2theme(convertThemeKey(this.context.theme)));
} // todo: 加入规则体系
// 检测颜色规则
checkColor(config, this.chartName, chart); // 检测间距
checkPadding(config, this.chartName, chart); // 检测尺寸
checkSizeConfig(this.chartName, config, this.size[0], this.size[1] || 200);
if (animate !== undefined) {
warn('animate', '请使用 config.animate 设置动画开关。'); // 将 props.animate 传入 config.animate
if (config.animate === undefined) {
config.animate = animate;
}
}
this.emitWidgetsEvent(event, 'beforeWidgetsInit', config, data); // 绘制逻辑
chart && this.init(chart, config, data);
this.emitWidgetsEvent(event, 'afterWidgetsInit', config, data); // 全局动画设置
if (typeof config.animate === 'boolean') {
chart.animate(config.animate);
} // 绑定事件，这里透传了G2的所有事件，暂时不做额外封装
if (chart && event) {
Object.keys(event).forEach(function (eventKey) {
chart.on(fixEventName(eventKey), event[eventKey]);
});
} // 绑定交互
if (chart && interaction) {
Object.keys(interaction).forEach(function (interactionName) {
chart.interaction(interactionName, interaction[interactionName]);
});
}
if (typeof currentProps.getChartInstance === 'function') {
currentProps.getChartInstance(chart);
} // 渲染前规则
runBeforePaintRule(this, config, data); // 后置检测
chart.on('afterpaint', function () {
// todo: 加入规则体系
// 检测图形尺寸与间距，目前仅检测柱状图的柱宽与间距
checkSize(_this4.chartName, _this4.chart);
});
var startTime = new Date().getTime(); // 开始渲染
chart.render();
var endTime = new Date().getTime();
chartLog(this.chartName, 'renderTime', {
chartId: this.chartId,
chartName: this.chartName,
renderTime: endTime - startTime
}); // this.handleAfterRender(config);
// 绑定ref
this.ref.current = chartRefs(this, config);
if (this.props.chartRef) {
this.props.chartRef.current = this.ref.current;
}
};
_proto.emitWidgetsEvent = function emitWidgetsEvent(event, name) {
if (this.chart && event && event[name]) {
for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
args[_key - 2] = arguments[_key];
}
event[name].apply(this.chart, args);
}
};
// 初始化时适配高宽
_proto.initSize = function initSize() {
var _this$props2 = this.props,
width = _this$props2.width,
height = _this$props2.height;
var parentSize = getParentSize(this.chartDom, width, height);
this.setSize(parentSize);
window.addEventListener('resize', this.autoResize);
};
_proto.handleChangeSize = function handleChangeSize(config, w, h) {
if (w === void 0) {
w = this.size[0];
}
if (h === void 0) {
h = this.size[1];
}
this.setSize([w, h]);
var notSetAnimate = this.props.animate === undefined && (!config || config.animate === undefined);
if (notSetAnimate) {
this.chart.animate(false);
} // 强制转换为数字
this.changeSize(this.chart, config, Number(w), Number(h));
if (notSetAnimate) {
this.chart.animate(true); // G2 关闭 view 动画后，在渲染时会递归关闭所有 geom 的动画，这里需要反向操作手动开启 animate
setGeometryAnimateRecursive(this.chart);
} // if (this.chartProcess.changeSize) {
// this.chart &&
// this.chartProcess.changeSize.call(this, this.chart, config, w, h);
// } else {
// this.chart && this.chart.changeSize(w, h);
// }
} // 动态适配高宽，利用 resizeRunning 做节流
;
_proto.autoResize = function autoResize() {
var _this5 = this;
if (this.resizeRunning) {
// this.resizeRunning = false;
// window.cancelAnimationFrame(this.resizeTimer);
return;
}
var element = this.chartDom,
props = this.props,
size = this.size;
this.resizeRunning = true;
this.resizeTimer = requestAnimationFrame(function () {
_this5.resizeRunning = false;
var parentSize = getParentSize(element, props.width, props.height); // 读取的高宽需要是有效值，0 也不可以
if (!(parentSize[0] === size[0] && parentSize[1] === size[1]) && parentSize[0] && parentSize[1]) {
_this5.handleChangeSize(props.config, parentSize[0], parentSize[1]); // this.handleAfterRender();
}
});
} // 设置高宽
;
_proto.setSize = function setSize(_ref) {
var w = _ref[0],
h = _ref[1];
var element = this.chartDom;
this.size = [Number(w), Number(h)];
if (w) {
element.style.width = w + "px";
}
if (h) {
element.style.height = h + "px";
}
} // protected afterRenderCallbacks: ((chart: Chart, config: ChartConfig) => void)[] = [];
// protected afterRenderTimer: any = null;
// handleAfterRender(config?: ChartConfig) {
// if (this.afterRender || this.afterRenderCallbacks.length > 0) {
// this.afterRenderTimer = setTimeout(() => {
// if (this.chart && this.afterRender) {
// this.afterRender(config || this.props.config);
// }
// if (this.afterRenderCallbacks.length > 0) {
// this.afterRenderCallbacks.forEach((cb) => {
// cb && cb.call(this, this.chart, config || this.props.config);
// });
// }
// }, 50);
// }
// // 大数据检测
// setTimeout(() => {
// this.throttleDetect();
// }, 500);
// }
;
_proto.render = function render() {
var _ref2,
_config$legend$positi,
_config$legend,
_this$defaultConfig,
_this$defaultConfig$l,
_config$legend2,
_this6 = this;
var _this$props3 = this.props,
_this$props3$classNam = _this$props3.className,
className = _this$props3$classNam === void 0 ? '' : _this$props3$classNam,
style = _this$props3.style,
children = _this$props3.children,
data = _this$props3.data,
width = _this$props3.width,
height = _this$props3.height,
padding = _this$props3.padding,
appendPadding = _this$props3.appendPadding,
config = _this$props3.config,
event = _this$props3.event,
interaction = _this$props3.interaction,
animate = _this$props3.animate,
language = _this$props3.language,
_this$props3$localRef = _this$props3.localRefresh,
localRefresh = _this$props3$localRef === void 0 ? false : _this$props3$localRef,
renderer = _this$props3.renderer,
syncViewPadding = _this$props3.syncViewPadding,
customChart = _this$props3.customChart,
getChartInstance = _this$props3.getChartInstance,
enableFunctionUpdate = _this$props3.enableFunctionUpdate,
loading = _this$props3.loading,
errorInfo = _this$props3.errorInfo,
chartRef = _this$props3.chartRef,
force = _this$props3.force,
otherProps = _objectWithoutPropertiesLoose(_this$props3, ["className", "style", "children", "data", "width", "height", "padding", "appendPadding", "config", "event", "interaction", "animate", "language", "localRefresh", "renderer", "syncViewPadding", "customChart", "getChartInstance", "enableFunctionUpdate", "loading", "errorInfo", "chartRef", "force"]);
var position = ((_ref2 = (_config$legend$positi = config === null || config === void 0 ? void 0 : (_config$legend = config.legend) === null || _config$legend === void 0 ? void 0 : _config$legend.position) !== null && _config$legend$positi !== void 0 ? _config$legend$positi : (_this$defaultConfig = this.defaultConfig) === null || _this$defaultConfig === void 0 ? void 0 : (_this$defaultConfig$l = _this$defaultConfig.legend) === null || _this$defaultConfig$l === void 0 ? void 0 : _this$defaultConfig$l.position) !== null && _ref2 !== void 0 ? _ref2 : 'bottom').split('-')[0];
return /*#__PURE__*/React.createElement("div", {
style: {
position: 'relative',
width: width ? width + "px" : '100%',
height: height ? height + "px" : undefined,
display: 'flex',
flexDirection: config !== null && config !== void 0 && (_config$legend2 = config.legend) !== null && _config$legend2 !== void 0 && _config$legend2.table && position === 'right' ? 'row' : 'column'
}
}, /*#__PURE__*/React.createElement("div", _extends({
ref: function ref(dom) {
return _this6.chartDom = dom;
},
id: this.chartId,
key: this.chartId,
className: rootClassName + this.chartName + " " + className,
style: style
}, otherProps), children ? /*#__PURE__*/React.createElement("div", {
className: rootChildClassName
}, children) : null));
};
return Base;
}(React.Component); // Base.baseClassName = rootClassName + name;
Base.defaultProps = {};
Base.isG2Chart = true;
Base.contextType = ChartContext;
export default Base;