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

Author: lessmost

__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);
+  });
 });

__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);
 

__tests__/unit/plots/histogram/axis-spec.ts

@@ -113,7 +113,7 @@ describe('Histogram: axis', () => {
       nice: true,
       label: {
         autoHide: true,
-        autoRotate: true,
+        autoRotate: false,
       },
     });
 

__tests__/unit/plots/histogram/index-spec.ts

@@ -37,7 +37,7 @@ describe('histogram', () => {
       nice: true,
       label: {
         autoHide: true,
-        autoRotate: true,
+        autoRotate: false,
       },
     });
 

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",

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,
         },
       },

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();