@alicloud/cloud-charts
Version:
245 lines (220 loc) • 10.1 kB
JavaScript
'use strict';
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import classNames from 'classnames';
import chartLog from '../common/log';
import { FullCrossName, PrefixName } from '../constants';
import { ChartContext, getText } from '../ChartProvider';
import { warn } from '../common/log';
import eventBus from '../common/eventBus';
import "./index.css";
import themes from '../themes';
var prefix = PrefixName + "-wplaceholder"; // 默认显示的图标
var svgWidth = 36,
svgHeight = 32,
itemHeight1 = 20,
itemHeight2 = 26,
itemHeight3 = 32;
var svg = /*#__PURE__*/React.createElement("svg", {
width: svgWidth,
height: svgHeight,
className: "placeholder-box"
}, /*#__PURE__*/React.createElement("rect", {
className: "placeholder-item item-1",
width: "8",
height: itemHeight1,
x: "0",
y: svgHeight - itemHeight1
}), /*#__PURE__*/React.createElement("rect", {
className: "placeholder-item item-2",
width: "8",
height: itemHeight3,
x: "14",
y: svgHeight - itemHeight3
}), /*#__PURE__*/React.createElement("rect", {
className: "placeholder-item item-3",
width: "8",
height: itemHeight2,
x: "28",
y: svgHeight - itemHeight2
})); // 异常状态显示的图标
var errorSvg = /*#__PURE__*/React.createElement("svg", {
width: "13.990234375",
height: "13.990234375",
viewBox: "0 0 13.990234375 13.990234375"
}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
d: "M13.2992,4.0833C12.1972,1.5882,9.71352,0.00200162,6.99922,0C5.33879,-0.00111527,3.72987,0.576434,2.44922,1.6333L12.3659,11.55C14.1045,9.4635,14.497,6.5439,13.2992,4.0833ZM11.55,12.3667L1.6333,2.44995C0.576382,3.73057,-0.00117366,5.33951,0,6.99995C0.00200179,9.71425,1.5883,12.198,4.0833,13.3C6.544,14.4978,9.4635,14.1053,11.55,12.3667Z",
fillRule: "evenodd",
fill: themes['widgets-error-svg-color']
}))); // 无数据状态显示的图标
var noDataSvg = /*#__PURE__*/React.createElement("svg", {
width: "43px",
height: "36px",
viewBox: "0 0 43 36",
style: {
marginLeft: 5
}
}, /*#__PURE__*/React.createElement("polygon", {
className: "placeholder-item",
points: "0 12 8 12 8 32 0 32"
}), /*#__PURE__*/React.createElement("path", {
className: "placeholder-item",
d: "M21,16.0139985 C19.1238002,18.3325877 18,21.285055 18,24.5 C18,27.27522 18.8374075,29.8548529 20.2733236,32 L13,32 L13,0 L21,0 L21,16.0139985 Z"
}), /*#__PURE__*/React.createElement("path", {
className: "placeholder-item",
d: "M34,11.2310283 C33.1898394,11.0793314 32.3541841,11 31.5,11 C29.5412332,11 27.6799005,11.4171646 26,12.1674956 L26,5 L34,5 L34,11.2310283 Z"
}), /*#__PURE__*/React.createElement("path", {
className: "placeholder-item",
d: "M23.8056018,18.9269221 C22.6697689,20.4923786 22,22.4179728 22,24.5 C22,29.7467051 26.2532949,34 31.5,34 C33.5820272,34 35.5076214,33.3302311 37.0730779,32.1943982 L23.8056018,18.9269221 Z M25.9269221,16.8056018 L39.1943982,30.0730779 C40.3302311,28.5076214 41,26.5820272 41,24.5 C41,19.2532949 36.7467051,15 31.5,15 C29.4179728,15 27.4923786,15.6697689 25.9269221,16.8056018 Z M31.5,36 C25.1487254,36 20,30.8512746 20,24.5 C20,18.1487254 25.1487254,13 31.5,13 C37.8512746,13 43,18.1487254 43,24.5 C43,30.8512746 37.8512746,36 31.5,36 Z",
fillRule: "nonzero"
}));
var emptySvg = /*#__PURE__*/React.createElement("svg", {
width: "14px",
height: "14px",
viewBox: "0 0 1024 1024"
}, /*#__PURE__*/React.createElement("path", {
d: "M512 64c247.424 0 448 200.576 448 448s-200.576 448-448 448-448-200.576-448-448 200.576-448 448-448z m11.2 339.2h-64l-1.3888 0.032A32 32 0 0 0 427.2 435.2l0.032 1.3888A32 32 0 0 0 459.2 467.2h32v227.2H448l-1.3888 0.032A32 32 0 0 0 448 758.4h140.8l1.3888-0.032A32 32 0 0 0 588.8 694.4h-33.6V435.2l-0.032-1.3888A32 32 0 0 0 523.2 403.2zM512 268.8a44.8 44.8 0 1 0 0 89.6 44.8 44.8 0 0 0 0-89.6z",
fill: "#AAAAAA"
}));
var loadingDom = function loadingDom(text) {
return /*#__PURE__*/React.createElement("div", {
className: prefix + "-loading-right-tip"
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-loading-indicator"
}, /*#__PURE__*/React.createElement("div", {
className: prefix + "-loading-fusion-reactor"
}, /*#__PURE__*/React.createElement("span", {
className: prefix + "-loading-dot"
}), /*#__PURE__*/React.createElement("span", {
className: prefix + "-loading-dot"
}), /*#__PURE__*/React.createElement("span", {
className: prefix + "-loading-dot"
}), /*#__PURE__*/React.createElement("span", {
className: prefix + "-loading-dot"
}))), /*#__PURE__*/React.createElement("div", {
className: prefix + "-loading-tip-content"
}, text));
}; // 获取显示文案
function getLocaleText(locale, language, loading, error, noData, empty) {
var value = error ? 'error' : loading ? 'loading' : noData ? 'noData' : empty ? 'empty' : null;
if (value) {
return getText(value, language, locale);
}
return null;
}
var Wplaceholder = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(Wplaceholder, _React$Component);
function Wplaceholder(props) {
var _this;
_this = _React$Component.call(this, props) || this; // 图表初始化时记录日志
chartLog('Wplaceholder', 'init');
_this.state = {
language: null
};
eventBus.on('setLanguage', function (params) {
_this.setState({
language: params.language
});
});
return _this;
}
var _proto = Wplaceholder.prototype;
_proto.renderText = function renderText(loading, error, noData, empty) {
var _this$state;
var _this$props = this.props,
locale = _this$props.locale,
language = _this$props.language,
children = _this$props.children; // text 优先判断传入的locale，其次判断传入的language，最后取中文locale
var text = getLocaleText(locale || this.context.locale, ((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.language) || language || this.context.language, loading, error, noData, empty) || '';
if (children) {
// 优先渲染children
return /*#__PURE__*/React.createElement("div", {
className: prefix + '-children-text'
}, children);
} else if (empty) {
return /*#__PURE__*/React.createElement("div", {
className: prefix + '-children-text',
style: {
marginTop: 0
}
}, emptySvg, /*#__PURE__*/React.createElement("span", {
style: {
marginLeft: 4
}
}, text));
} else if (loading) {
return loadingDom(text);
} else if (error) {
return /*#__PURE__*/React.createElement("div", {
className: prefix + '-children-text',
style: {
marginTop: 0
}
}, errorSvg, /*#__PURE__*/React.createElement("span", {
style: {
marginLeft: 4
}
}, text));
} else if (text) {
return /*#__PURE__*/React.createElement("div", {
className: prefix + '-children-text'
}, text);
} else {
return null;
}
};
_proto.render = function render() {
var _classNames, _this$state2;
var _this$props2 = this.props,
className = _this$props2.className,
width = _this$props2.width,
_this$props2$height = _this$props2.height,
height = _this$props2$height === void 0 ? '100%' : _this$props2$height,
style = _this$props2.style,
loading = _this$props2.loading,
error = _this$props2.error,
noData = _this$props2.noData,
empty = _this$props2.empty,
locale = _this$props2.locale,
language = _this$props2.language,
otherProps = _objectWithoutPropertiesLoose(_this$props2, ["className", "width", "height", "style", "loading", "error", "noData", "empty", "locale", "language"]);
var mainClasses = classNames(prefix, (_classNames = {}, _classNames[FullCrossName] = true, _classNames[prefix + '-loading'] = !error && loading, _classNames[prefix + '-no-data'] = !error && !loading && noData, _classNames[prefix + '-empty'] = !error && !loading && empty, _classNames[prefix + '-error'] = !!error, _classNames[className] = !!className, _classNames));
var renderSvg = svg;
if (error) {
renderSvg = /*#__PURE__*/React.createElement(React.Fragment, null);
} else if (!loading && noData) {
renderSvg = noDataSvg;
warn('Wplaceholder', 'noData属性已废弃，如果基础图表如Wline无数据，无需额外使用该组件，如为业务自定义组件，请使用empty属性。');
chartLog('Wplaceholder', 'rulesInfo', {
selector: "#" + prefix + "-no-data",
checkItem: 'empty',
errorInfo: {
value: 'noData',
// 错误的值
errorValue: 1,
// 错误的数量
errorRate: 1
}
});
} else if (empty) {
renderSvg = /*#__PURE__*/React.createElement(React.Fragment, null);
} else if (loading) {
renderSvg = /*#__PURE__*/React.createElement(React.Fragment, null);
}
return /*#__PURE__*/React.createElement("div", _extends({
className: mainClasses,
style: _extends({
width: !width || typeof width === 'number' || !/^[\d]+$/.test(width) ? width : Number(width),
height: !height || typeof height === 'number' || !/^[\d]+$/.test(height) ? height : Number(height)
}, style)
}, otherProps), loading ? loadingDom(getText('loading', ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.language) || language || this.context.language, locale || this.context.locale)) : /*#__PURE__*/React.createElement("div", {
className: prefix + '-children'
}, renderSvg, this.renderText(loading, error, noData, empty)));
};
return Wplaceholder;
}(React.Component);
Wplaceholder.displayName = 'Wplaceholder';
Wplaceholder.contextType = ChartContext;
export { Wplaceholder as default };