fix(v2/bar): set catogery as xField

Author: 羽熙

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

@@ -27,14 +27,14 @@ describe('bar axis', () => {
     expect(geometry.scales.sales.formatter).toBe(formatter);
   });
 
-  it('xAxis', () => {
+  it('yAxis', () => {
     const bar = new Bar(createDiv(), {
       width: 400,
       height: 300,
       data: salesByArea,
-      xField: 'sales',
-      yField: 'area',
-      xAxis: {
+      xField: 'area',
+      yField: 'sales',
+      yAxis: {
         minLimit: 10000,
         nice: true,
       },
@@ -57,9 +57,9 @@ describe('bar axis', () => {
       width: 400,
       height: 300,
       data: salesByArea,
-      xField: 'sales',
-      yField: 'area',
-      yAxis: {
+      xField: 'area',
+      yField: 'sales',
+      xAxis: {
         label: {
           rotate: -Math.PI / 6,
         },

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

@@ -8,8 +8,8 @@ describe('bar', () => {
       width: 400,
       height: 300,
       data: salesByArea,
-      xField: 'sales',
-      yField: 'area',
+      xField: 'area',
+      yField: 'sales',
     });
 
     bar.render();
@@ -32,8 +32,8 @@ describe('bar', () => {
       width: 400,
       height: 300,
       data: salesByArea,
-      xField: 'sales',
-      yField: 'area',
+      xField: 'area',
+      yField: 'sales',
       colorField: 'area',
     });
 
@@ -52,8 +52,8 @@ describe('bar', () => {
       width: 400,
       height: 300,
       data: salesByArea,
-      xField: 'sales',
-      yField: 'area',
+      xField: 'area',
+      yField: 'sales',
       colorField: 'area',
       color: palette,
     });

__tests__/unit/plots/bar/label-spec.ts

@@ -8,8 +8,8 @@ describe('bar label', () => {
       width: 400,
       height: 300,
       data: salesByArea,
-      xField: 'sales',
-      yField: 'area',
+      xField: 'area',
+      yField: 'sales',
       meta: {
         sales: {
           nice: true,
@@ -41,8 +41,8 @@ describe('bar label', () => {
       width: 400,
       height: 300,
       data: salesByArea,
-      xField: 'sales',
-      yField: 'area',
+      xField: 'area',
+      yField: 'sales',
       meta: {
         sales: {
           nice: true,
@@ -67,8 +67,8 @@ describe('bar label', () => {
       width: 400,
       height: 300,
       data: salesByArea,
-      xField: 'sales',
-      yField: 'area',
+      xField: 'area',
+      yField: 'sales',
       meta: {
         sales: {
           nice: true,

__tests__/unit/plots/bar/style-spec.ts

@@ -8,8 +8,8 @@ describe('bar style', () => {
       width: 400,
       height: 300,
       data: salesByArea,
-      xField: 'sales',
-      yField: 'area',
+      xField: 'area',
+      yField: 'sales',
       meta: {
         sales: {
           nice: true,
@@ -35,8 +35,8 @@ describe('bar style', () => {
       width: 400,
       height: 300,
       data: salesByArea,
-      xField: 'sales',
-      yField: 'area',
+      xField: 'area',
+      yField: 'sales',
       meta: {
         sales: {
           nice: true,

src/plots/bar/adaptor.ts

@@ -15,8 +15,12 @@ function field(params: Params<BarOptions>): Params<BarOptions> {
   const { data, xField, yField, colorField, color } = options;
 
   chart.data(data);
+
+  // transpose column to bar
   chart.coordinate().transpose();
-  const geometry = chart.interval().position(`${yField}*${xField}`);
+
+  // category as xField
+  const geometry = chart.interval().position(`${xField}*${yField}`);
 
   if (colorField) {
     geometry.color(colorField, color);
@@ -107,7 +111,7 @@ function style(params: Params<BarOptions>): Params<BarOptions> {
  */
 function label(params: Params<BarOptions>): Params<BarOptions> {
   const { chart, options } = params;
-  const { label, xField } = options;
+  const { label, yField } = options;
 
   const geometry = findGeometry(chart, 'interval');
 
@@ -116,7 +120,7 @@ function label(params: Params<BarOptions>): Params<BarOptions> {
   } else {
     const { callback, ...cfg } = label;
     geometry.label({
-      fields: [xField],
+      fields: [yField],
       callback,
       cfg,
     });