refactor: 更新占位图无数据样式 & 新增提示

alibaba · Mar 24, 2023 · b50ca0b · b50ca0b
1 parent 9af9385
commit b50ca0b
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 11 deletions.
diff --git a/src/Wcapacity/percentBar/index.scss b/src/Wcapacity/percentBar/index.scss
@@ -91,7 +91,7 @@ $error-background: getVar(widgets-capacity-background-error, $widgets-capacity-b
       #{$wcapacity-prefix}-percent-bar-label-content {
         position: relative;
         z-index: 3;
-        margin-bottom: 12px;
+        margin-bottom: 8px;
         line-height: 1;
         color: $label-color;
 

diff --git a/src/Wplaceholder/index.scss b/src/Wplaceholder/index.scss
@@ -15,10 +15,10 @@
   .placeholder-box {}
 
   &#{$wplaceholder-prefix}-empty {
-    background: #f7f7f7;
+    background: $container-bg;
 
     #{$wplaceholder-prefix}-children-text {
-      color: #808080;
+      color: $children-text;
       display: flex;
       align-items: center;
       justify-content: center;

diff --git a/src/Wplaceholder/index.tsx b/src/Wplaceholder/index.tsx
@@ -8,6 +8,7 @@ import Locale, { LocaleItem } from '../locales';
 import { FullCrossName, PrefixName } from '../constants';
 import themes from '../themes/index';
 import { ChartContext, getText } from '../ChartProvider';
+import { warn } from '../common/log';
 import './index.scss';
 
 const prefix = `${PrefixName}-wplaceholder`;
@@ -181,25 +182,20 @@ export default class Wplaceholder extends React.Component<WplaceholderProps> {
       renderSvg = errorSvg;
     } else if (!loading && noData) {
       renderSvg = noDataSvg;
+      warn('Wplaceholder', 'noData属性已废弃，如果基础图表如Wline无数据，无需额外使用该组件，如为业务自定义组件，建议使用empty属性。');
     } else if (empty) {
       renderSvg = <></>;
     } else if (loading) {
       renderSvg = <></>;
     }
 
-    const emptyStyle = {
-      background: themes['widgets-color-container-background'],
-    };
-
-    const newStyle = !!empty ? merge(emptyStyle, style) : style;
-
     return (
       <div
         className={mainClasses}
         style={{
           width,
           height,
-          ...newStyle,
+          ...style,
         }}
         {...otherProps}
       >

diff --git a/src/Wplaceholder/scss/variable.scss b/src/Wplaceholder/scss/variable.scss
@@ -13,6 +13,8 @@ $fill: getVar(widgets-color-gray, $widgets-color-gray);
 $color: getVar(widgets-color-disable, $widgets-color-disable);
 $font-size: getVar(widgets-font-size-1, $widgets-font-size-1);
 $gap-size: getVar(s2, $s2);
+$container-bg: getVar(widgets-color-container-background, $widgets-color-container-background);
+$children-text: getVar(widgets-color-text-3, $widgets-color-text-3);
 
 $loading-indicator-size: 28px;
 $loading-vector-seconds: 5.6s;

diff --git a/stories/chart.bar.stories.js b/stories/chart.bar.stories.js
@@ -628,7 +628,7 @@ const extremeData3 = [
 ];
 stories.add('极端数据（时间分类型)', () => (
   <Wcontainer className="demos">
-    <Wbar height="300" config={{ xAxis: { type: 'timeCat' }, colors: () => '#0000ff' }} data={extremeData3} />
+    <Wbar height="300" config={{ xAxis: { type: 'timeCat' } }} data={extremeData3} />
   </Wcontainer>
 ));