fix(bar): adjust default legend and tooltip order (#2049)

* fix(bar): adjust default legend and tooltip order * fix(bar): fix unit test * chore: increase size limit * feat: disable autoRotate by default
antvis · Dec 2, 2020 · d292545 · d292545
1 parent 2fb711c
commit d292545
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 7 deletions.
diff --git a/__tests__/unit/plots/bar/index-spec.ts b/__tests__/unit/plots/bar/index-spec.ts
@@ -365,4 +365,40 @@ describe('bar', () => {
     expect(theme.defaultColor).toBe('#FF6B3B');
     expect(theme.columnWidthRatio).toBe(0.1);
   });
+
+  it('legend/tooltip reversed, grouped', () => {
+    const bar = new Bar(createDiv('group'), {
+      width: 300,
+      height: 400,
+      data: subSalesByArea,
+      yField: 'area',
+      xField: 'sales',
+      seriesField: 'series',
+      isGroup: true,
+    });
+    bar.render();
+
+    // @ts-ignore
+    expect(bar.chart.getOptions().legends['series'].reversed).toBe(true);
+    // @ts-ignore
+    expect(bar.chart.getOptions().tooltip.reversed).toBe(true);
+  });
+
+  it('legend/tooltip reversed, stacked', () => {
+    const bar = new Bar(createDiv('group'), {
+      width: 300,
+      height: 400,
+      data: subSalesByArea,
+      yField: 'area',
+      xField: 'sales',
+      seriesField: 'series',
+      isStack: true,
+    });
+    bar.render();
+
+    // @ts-ignore
+    expect(bar.chart.getOptions().legends['series'].reversed).toBe(false);
+    // @ts-ignore
+    expect(bar.chart.getOptions().tooltip?.reversed).toBe(false);
+  });
 });
diff --git a/__tests__/unit/plots/bar/legend-spec.ts b/__tests__/unit/plots/bar/legend-spec.ts
@@ -32,7 +32,7 @@ describe('bar legend', () => {
 
     bar.render();
     // @ts-ignore
-    expect(bar.chart.getOptions().legends.series).toEqual({ position: 'right-top' });
+    expect(bar.chart.getOptions().legends.series).toEqual({ position: 'right-top', reversed: true });
     expect(bar.chart.getComponents().filter((co) => co.type === 'legend').length).toBe(1);
 
     bar.update({
@@ -46,6 +46,7 @@ describe('bar legend', () => {
     expect(bar.chart.getOptions().legends.series).toEqual({
       position: 'right-top',
       flipPage: true,
+      reversed: true,
     });
     expect(bar.chart.getComponents().filter((co) => co.type === 'legend').length).toBe(1);
 

diff --git a/__tests__/unit/plots/histogram/axis-spec.ts b/__tests__/unit/plots/histogram/axis-spec.ts
@@ -113,7 +113,7 @@ describe('Histogram: axis', () => {
       nice: true,
       label: {
         autoHide: true,
-        autoRotate: true,
+        autoRotate: false,
       },
     });
 

diff --git a/__tests__/unit/plots/histogram/index-spec.ts b/__tests__/unit/plots/histogram/index-spec.ts
@@ -37,7 +37,7 @@ describe('histogram', () => {
       nice: true,
       label: {
         autoHide: true,
-        autoRotate: true,
+        autoRotate: false,
       },
     });
 

diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@antv/event-emitter": "^0.1.2",
-    "@antv/g2": "^4.1.0-beta.21",
+    "@antv/g2": "^4.1.0",
     "d3-hierarchy": "^2.0.0",
     "d3-regression": "^1.3.5",
     "dayjs": "^1.8.36",
@@ -135,7 +135,7 @@
   "limit-size": [
     {
       "path": "dist/g2plot.min.js",
-      "limit": "870 Kb"
+      "limit": "900 Kb"
     },
     {
       "path": "dist/g2plot.min.js",

diff --git a/src/core/plot.ts b/src/core/plot.ts
@@ -112,7 +112,7 @@ export abstract class Plot<O extends PickOptions> extends EE {
       xAxis: {
         nice: true,
         label: {
-          autoRotate: true,
+          autoRotate: false,
           autoHide: true,
         },
       },

diff --git a/src/plots/bar/adaptor.ts b/src/plots/bar/adaptor.ts
@@ -22,7 +22,8 @@ export function adaptor(params: Params<BarOptions>) {
     if (legend !== false) {
       legend = {
         position: isStack ? 'top-left' : 'right-top',
-        ...legend,
+        reversed: isStack ? false : true,
+        ...(legend || {}),
       };
     }
   } else {
@@ -31,6 +32,19 @@ export function adaptor(params: Params<BarOptions>) {
   // @ts-ignore 直接改值
   params.options.legend = legend;
 
+  // 默认 tooltip 配置
+  let { tooltip } = options;
+  if (seriesField) {
+    if (tooltip !== false) {
+      tooltip = {
+        reversed: isStack ? false : true,
+        ...(tooltip || {}),
+      };
+    }
+  }
+  // @ts-ignore 直接改值
+  params.options.tooltip = tooltip;
+
   // transpose column to bar
   chart.coordinate().transpose();