fix: plot legend positon 十二方位兼容; 分组图形默认isGroup配置兼容

appfws · Feb 4, 2021 · cf3b928 · cf3b928
1 parent 5d685bc
commit cf3b928
Show file tree

Hide file tree

Showing 13 changed files with 113 additions and 104 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bizcharts",
-  "version": "4.1.6",
+  "version": "4.1.7-beta.2",
   "description": "bizcharts",
   "keywords": [
     "bizcharts",
@@ -37,7 +37,7 @@
     "prettier": "prettier -c --write **/*",
     "start": "npm run storybook",
     "test": "jest",
-    "test-live": "DEBUG_MODE=1 cross-env RTL_SKIP_AUTO_CLEANUP=true jest --watch  unittest/boundary/ErrorBoundary-spec.tsx",
+    "test-live": "DEBUG_MODE=1 cross-env RTL_SKIP_AUTO_CLEANUP=true jest --watch  unittest/plots/RadarChart-spec.tsx",
     "storybook": "start-storybook -p 9004",
     "uitest:snapshot": "ice-chart-develop-cli test-multi-snapshot",
     "uitest": "ice-chart-develop-cli test-multi",
@@ -53,14 +53,15 @@
     "react-reconciler": "^0.25.1",
     "resize-observer-polyfill": "^1.5.1",
     "simple-statistics": "^7.1.0",
-    "warning": "^4.0.3"
+    "warning": "^4.0.3",
+    "babel-plugin-transform-replace-object-assign": "^2.0.0",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/plugin-transform-modules-commonjs": "^7.12.1"
   },
   "devDependencies": {
     "@antv/data-set": "^0.11.4",
     "@babel/cli": "^7.7.7",
     "@babel/core": "^7.7.7",
-    "@babel/plugin-transform-modules-commonjs": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.7.7",
     "@babel/preset-es2015": "^7.0.0-beta.53",
     "@babel/register": "^7.7.5",
@@ -87,7 +88,6 @@
     "babel-plugin-inline-react-svg": "^1.1.0",
     "babel-plugin-inline-svg": "^1.0.1",
     "babel-plugin-istanbul": "^5.2.0",
-    "babel-plugin-transform-replace-object-assign": "^2.0.0",
     "babel-preset-airbnb": "^4.0.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-umi": "^1.8.1",

diff --git a/src/core.ts b/src/core.ts
@@ -14,7 +14,7 @@ registerEngine('svg', SVGEngine);
 
 // @ts-ignore
 export * from '@antv/g2/lib/core';
-export const VERSION = '4.1.6';
+export const VERSION = '4.1.7-beta.2';
 
 
 // fixme: supportCSSTransform 在[email protected] 后支持

diff --git a/src/extend/scale/scale.ts b/src/extend/scale/scale.ts
@@ -1,4 +1,4 @@
-import { Linear, registerTickMethod, registerScale } from '@antv/scale';
+import { Linear, registerTickMethod, registerScale, getScale } from '@antv/scale';
 
 import linearTickMethod from './linear-tick';
 
@@ -35,4 +35,7 @@ class LinearStrict extends Linear {
 }
 export default LinearStrict;
 
-registerScale('linear-strict', LinearStrict);
+if (!getScale('linear-strict')) {
+  registerScale('linear-strict', LinearStrict);
+}
+
diff --git a/src/plots/GroupedBarChart.tsx b/src/plots/GroupedBarChart.tsx
@@ -5,6 +5,7 @@ import { polyfillOptions, replaceApi } from './core/polyfill';
 import { LengendAPIOptions, TooltipAPIOptions, LabelAPIOptions } from './core/interface';
 import { isNil } from '@antv/util';
 import warn from 'warning';
+import { deepMix } from '@antv/util';
 
 interface GroupedBarOptions extends Options, BasePlotOptions {
   /** 图例 */
@@ -31,5 +32,8 @@ export default createPlot<GroupedBarOptions>(Bar, 'GroupedBarChart', (props) =>
     options.minBarWidth = barSize;
     options.maxBarWidth = barSize;
   }
+  deepMix(props, {
+    isGroup: true,
+  });
   return options;
 });
diff --git a/src/plots/GroupedColumnChart.tsx b/src/plots/GroupedColumnChart.tsx
@@ -5,6 +5,7 @@ import { polyfillOptions } from './core/polyfill';
 import { LengendAPIOptions, TooltipAPIOptions, LabelAPIOptions } from './core/interface';
 import { isNil } from '@antv/util';
 import warn from 'warning';
+import { deepMix } from '@antv/util';
 
 interface GroupedColumnOptions extends ColumnOptions, BasePlotOptions {
   /** 图例 */
@@ -24,5 +25,8 @@ export default createPlot<GroupedColumnOptions>(Column, 'GroupedColumnChart', (p
     options.minColumnWidth = columnSize;
     options.maxColumnWidth = columnSize;
   }
+  deepMix(props, {
+    isGroup: true,
+  });
   return options;
 });
diff --git a/src/plots/RadarChart.tsx b/src/plots/RadarChart.tsx
@@ -7,9 +7,10 @@ import { Radar, RadarOptions as options } from '@antv/g2plot/lib/plots/radar';
 import { MappingOptions } from '@antv/g2plot/lib/adaptor/geometries/base';
 
 import createPlot, { BasePlotOptions } from '../createPlot';
-import { polyfillOptions, replaceApi, replaceAxis } from './core/polyfill';
+import { polyfillOptions, replaceApi } from './core/polyfill';
 
 import { LengendAPIOptions, TooltipAPIOptions, LabelAPIOptions } from './core/interface';
+import { deepMix } from '@antv/util';
 
 const REPLACEAPILIST = [{
     sourceKey: 'angleField',
@@ -19,6 +20,14 @@ const REPLACEAPILIST = [{
     sourceKey: 'radiusField',
     targetKey: 'yField',
     notice: 'radiusField 是 [email protected]的属性，即将废弃，请使用yFeild替代',
+}, {
+    sourceKey: 'angleAxis',
+    targetKey: 'xAxis',
+    notice: 'angleAxis 是 [email protected]的属性，即将废弃，请使用xAxis替代',
+}, {
+    sourceKey: 'radiusAxis',
+    targetKey: 'yAxis',
+    notice: 'radiusAxis 是 [email protected]的属性，即将废弃，请使用yAxis替代',
 }];
 
 interface LineAPIOptions {
@@ -84,8 +93,9 @@ const replaceLineWithLinestyle = (options: RadarOptions) => {
 
 
 const polyfill = (opt: RadarOptions): RadarOptions => {
+    // 先转为统一的，在统一polyfill
+    replaceApi(REPLACEAPILIST, opt);
     const options = polyfillOptions(opt);
-    replaceApi(REPLACEAPILIST, options); // angleField,statusField  api替换
 
     if (get(options, 'area.visible') === false) {
         set(options, 'area', false);
@@ -106,9 +116,6 @@ const polyfill = (opt: RadarOptions): RadarOptions => {
         options.angleAxis.tickLine = get(options, 'angleAxis.tickLine', null);
     }
 
-    replaceAxis(options, 'angleAxis', 'xAxis');
-    replaceAxis(options, 'radiusAxis', 'yAxis');
-
     if (get(options, 'tooltip.visible') === false) {
         set(options, 'tooltip', false);
     }
@@ -117,6 +124,15 @@ const polyfill = (opt: RadarOptions): RadarOptions => {
         set(options, 'label', false);
     }
 
+    if (get(options, 'yAxis.grid.line.type') === 'line') {
+        deepMix(options, {
+            xAxis: {
+                line: null,
+                tickLine: null,
+            }  
+        }, options);
+    }
+
     return options;
 }
 

diff --git a/src/plots/ScatterChart.tsx b/src/plots/ScatterChart.tsx
@@ -5,7 +5,7 @@ import { Scatter, ScatterOptions as options } from '@antv/g2plot/lib/plots/scatt
 import { RegressionLineOptions } from '@antv/g2plot/lib/plots/scatter/types';
 import { StyleAttr } from '@antv/g2plot/lib/types/attr';
 import createPlot, { BasePlotOptions } from '../createPlot';
-import { polyfillOptions, replaceAxis, polyfillVisible } from './core/polyfill';
+import { polyfillOptions, polyfillVisible } from './core/polyfill';
 import { AxisAPIOptions, LengendAPIOptions, TooltipAPIOptions, LabelAPIOptions } from './core/interface';
 import { isObject } from '@antv/util';
 
@@ -35,9 +35,6 @@ const polyfill = (opt: ScatterOptions): ScatterOptions => {
         set(options, 'size', get(options, 'pointSize'));
     }
 
-    replaceAxis(options, 'xAxis', 'xAxis');
-    replaceAxis(options, 'yAxis', 'yAxis');
-
     polyfillVisible(options, 'quadrant')
 
     const quadrantLabel = get(options, 'quadrant.label');

diff --git a/src/plots/StackedAreaChart.tsx b/src/plots/StackedAreaChart.tsx
@@ -3,11 +3,15 @@ import { Area } from '@antv/g2plot/lib/plots/area';
 import createPlot from '../createPlot';
 import { polyfill, AreaOptions } from './AreaChart';
 import warn from 'warning';
+import { deepMix } from '@antv/util';
 
 interface StackedAreaOptions extends AreaOptions {}
 
 export { StackedAreaOptions };
 export default createPlot<StackedAreaOptions>(Area, 'StackedAreaChart', props => {
   warn(false, '<StackedAreaChart /> 即将在5.0后废弃，请使用<AreaChart /> 替代。');
+  deepMix(props, {
+    isStack: true,
+  });
   return polyfill(props);
 });
diff --git a/src/plots/core/polyfill.ts b/src/plots/core/polyfill.ts
@@ -1,5 +1,5 @@
 import warn from 'warning';
-import { get, set, maxBy, minBy, isNil } from '@antv/util';
+import { get, set, maxBy, minBy, isNil, isObject } from '@antv/util';
 import sum from '../../utils/data-transform/sum';
 import { pickEventName } from '../../components/Chart/events';
 
@@ -24,62 +24,59 @@ export const replaceApi = (replaceApiList: Array<ReplaceApi>, options: object) =
 /**
  * 将的sourceKey的配置作为targetKey的配置； 
  * 例如：将angleAxis的作为xAxis的配置
- * @param options object 图表配置项
- * @param sourceKey string
- * @param targetKey  string
  */
-export const replaceAxis = (options, sourceKey = 'angleAxis', targetKey = 'xAxis') => {
-  if (isNil(options[sourceKey])) {
+export const polyfillAxis = (cfg, name) => {
+  const options: Record<string, any> | boolean = get(cfg, name);
+  if (options === false || options === null) {
+    cfg[name] = null;
     return;
   }
-  if (get(options, `${sourceKey}.visible`) === false) {
-    set(options, targetKey, false);
+  if (options === undefined) {
+    return;
+  }
+  if (options === true) {
+    cfg[name] = {};
+    return;
+  }
+  if (!isObject(options)) {
+    warn(true, `${name} 配置参数不正确`);
     return;
   }
 
-  let config = { ...options[sourceKey] };
 
-  if (get(options, `${sourceKey}.line.visible`) === false) {
-    config.line = null;
-  }
+  polyfillVisible(options, 'line');
+  polyfillVisible(options, 'grid');
+  polyfillVisible(options, 'label');
+  polyfillVisible(options, 'tickLine');
+  polyfillVisible(options, 'title');
 
-  if (get(options, `${sourceKey}.grid.visible`) === false) {
-    config.grid = null;
-  }
+  let label: any = get(options, 'label');
 
-  if (get(options, `${sourceKey}.label.visible`) === false) {
-    config.label = false
-  } else {
-    let label = get(options, `${sourceKey}.label`, {});
-    if (label) {
-      const suffix = { ...label.suffix };
-      if (!isNil(suffix) || suffix) { // 不是undefined null 或 suffix存在
-        label = { ...label, formatter: val => `${val}${suffix}` }
+  if (label) {
+    if (isObject(label)) {
+      const { suffix } = label as any;
+      if (suffix) { // 不是undefined null 或 suffix存在
+        set(label, 'formatter', val => `${val}${suffix}`);
       }
 
-      const { offsetX, offsetY, offset, ...labelCfg } = label;
+      // @ts-ignore
+      const { offsetX, offsetY, offset } = label;
       if (isNil(offset) && (!isNil(offsetX) || !isNil(offsetY))) {
-        if (targetKey === 'xAxis') {
-          label = { ...labelCfg, offset: !isNil(offsetX) ? offsetX : offsetY }
+        if (name === 'xAxis') {
+          set(label, 'offset', !isNil(offsetX) ? offsetX : offsetY);
         }
-        if (targetKey === 'yAxis') {
-          label = { ...labelCfg, offset: !isNil(offsetY) ? offsetY : offsetX }
+        if (name === 'yAxis') {
+          set(label, 'offset', !isNil(offsetY) ? offsetY : offsetX);
         }
+
       }
-
-      config.label = label;
     }
   }
 
-  if (get(options, `${sourceKey}.tickLine.visible`) === false) {
-    config.tickLine = false
-  }
-
-  if (get(options, `${sourceKey}.title.visible`) === false) {
-    config.title = false
-  }
-  set(options, targetKey, config);
-
+  cfg[name] = {
+    ...options,
+    label,
+  };
 }
 
 // visible的使用转化
@@ -101,8 +98,15 @@ export const polyfillOptions = (opt) => {
   const legendVis = polyfillVisible(polyfillOpt, 'legend');
 
   if (legendVis) {
-    if (get(polyfillOpt, 'legend.title.visible') === false) {
-      set(polyfillOpt, 'legend.title', false);
+    polyfillVisible(polyfillOpt, 'legend.title');
+    const position = get(polyfillOpt, 'legend.position')
+    if (position) {
+      set(polyfillOpt, 'legend.position', ({
+        'top-center': 'top',
+        'right-center': 'right',
+        'left-center': 'left',
+        'bottom-center': 'bottom',
+      })[position] || position)
     }
   }
   const formatter = get(polyfillOpt, 'legend.formatter');
@@ -118,6 +122,10 @@ export const polyfillOptions = (opt) => {
   // label
   polyfillVisible(polyfillOpt, 'label');
 
+  // axis
+  polyfillAxis(polyfillOpt, 'xAxis');
+  polyfillAxis(polyfillOpt, 'yAxis');
+
   // 辅助线
   const guideLine = get(polyfillOpt, 'guideLine', []);
   const data = get(polyfillOpt, 'data', []);

diff --git a/unittest/plots/RadarChart-spec.tsx b/unittest/plots/RadarChart-spec.tsx
@@ -518,6 +518,9 @@ describe('Plots-RadarChart', () => {
             type: 'line',
           },
         },
+        label: {
+          offsetX: 20,
+        }
       },
       // 开启辅助点
       point: {

diff --git a/unittest/plots/__snapshots__/CalendarChart-spec.tsx.snap b/unittest/plots/__snapshots__/CalendarChart-spec.tsx.snap
@@ -1383,22 +1383,7 @@ Object {
         },
       },
     },
-    "label": Object {
-      "autoHide": Object {
-        "cfg": Object {
-          "minGap": 6,
-        },
-        "type": "equidistance",
-      },
-      "autoRotate": false,
-      "formatter": [Function],
-      "offset": 20,
-      "style": Object {
-        "fill": "#bbb",
-        "fontSize": 12,
-        "textBaseline": "top",
-      },
-    },
+    "label": undefined,
     "line": null,
     "nice": true,
     "tickLine": null,
@@ -1418,10 +1403,7 @@ Object {
         },
       },
     },
-    "label": Object {
-      "autoHide": true,
-      "autoRotate": false,
-    },
+    "label": undefined,
     "nice": true,
     "title": null,
   },