feat(static-mark): add axisX and axisY (#5188)

* feat(static-mark): add axisX and axisY

* docs(mark): add axisX and axisY

__tests__/plots/static/alphabet-interval-axis.ts

@@ -0,0 +1,46 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalAxis(): G2Spec {
+  return {
+    type: 'view',
+    padding: 'auto',
+    children: [
+      {
+        type: 'interval',
+        transform: [{ type: 'sortX', by: 'y', reverse: true }],
+        data: {
+          type: 'fetch',
+          value: 'data/alphabet.csv',
+        },
+        encode: {
+          x: 'letter',
+          y: 'frequency',
+          color: 'steelblue',
+        },
+        axis: { y: { tickCount: 10 }, x: false },
+      },
+      { type: 'axisX', title: 'Letter', style: { labelFontSize: 20 } },
+      {
+        type: 'axisY',
+        labelFormatter: '.0%',
+        title: 'Frequency',
+        scale: { y: { nice: true } },
+      },
+      {
+        type: 'axisY',
+        position: 'right',
+        scale: {
+          y: {
+            type: 'linear',
+            independent: true,
+            domain: [0, 10],
+            range: [1, 0],
+          },
+        },
+        style: {
+          grid: false,
+        },
+      },
+    ],
+  };
+}

__tests__/plots/static/index.ts

@@ -242,3 +242,8 @@ export { vennBasic } from './venn-basic';
 export { vennHollow } from './venn-hollow';
 export { stocksLineVarSize } from './stocks-line-var-size';
 export { barleyLineTrail } from './barley-line-trail';
+export { mockAxisX } from './mock-axisX';
+export { mockAxisY } from './mock-axisY';
+export { mockAxisXY } from './mock-axisXY';
+export { mockAxisXYPolar } from './mock-axisXY-polar';
+export { alphabetIntervalAxis } from './alphabet-interval-axis';

__tests__/plots/static/mock-axisX.ts

@@ -0,0 +1,17 @@
+import { G2Spec } from '../../../src';
+
+export function mockAxisX(): G2Spec {
+  return {
+    type: 'axisX',
+    padding: 'auto',
+    height: 80,
+    scale: {
+      x: {
+        type: 'linear',
+        domain: [5, 10],
+        range: [0, 1],
+      },
+    },
+    tickCount: 10,
+  };
+}

__tests__/plots/static/mock-axisXY-polar.ts

@@ -0,0 +1,37 @@
+import { G2Spec } from '../../../src';
+
+export function mockAxisXYPolar(): G2Spec {
+  return {
+    type: 'view',
+    padding: 'auto',
+    coordinate: { type: 'polar' },
+    scale: {
+      x: {
+        type: 'linear',
+        domain: [5, 10],
+        range: [0, 1],
+      },
+      y: {
+        type: 'linear',
+        domain: [5, 10],
+        range: [0, 1],
+      },
+    },
+    children: [
+      {
+        type: 'axisX',
+        title: 'AxisX',
+        tickFilter: (_, i, ticks) => i && i !== ticks.length - 1,
+      },
+      {
+        type: 'axisY',
+        title: 'AxisY',
+        style: {
+          labelFontSize: 14,
+          gridLineWidth: 10,
+          gridStroke: 'red',
+        },
+      },
+    ],
+  };
+}

__tests__/plots/static/mock-axisXY.ts

@@ -0,0 +1,33 @@
+import { G2Spec } from '../../../src';
+
+export function mockAxisXY(): G2Spec {
+  return {
+    type: 'view',
+    padding: 'auto',
+    scale: {
+      x: {
+        type: 'linear',
+        domain: [5, 10],
+        range: [0, 1],
+      },
+      y: {
+        type: 'linear',
+        domain: [5, 10],
+        range: [0, 1],
+      },
+    },
+    children: [
+      { type: 'axisX', title: 'AxisX' },
+      {
+        type: 'axisY',
+        title: 'AxisY',
+        tickCount: 10,
+        style: {
+          labelFontSize: 14,
+          gridLineWidth: 10,
+          gridStroke: 'red',
+        },
+      },
+    ],
+  };
+}

__tests__/plots/static/mock-axisY.ts

@@ -0,0 +1,24 @@
+import { G2Spec } from '../../../src';
+
+export function mockAxisY(): G2Spec {
+  return {
+    type: 'axisY',
+    padding: 10,
+    paddingLeft: 'auto',
+    width: 100,
+    scale: {
+      y: {
+        type: 'linear',
+        domain: [5, 10],
+        range: [0, 1],
+      },
+    },
+    tickCount: 10,
+    title: 'axisX',
+    style: {
+      labelFontSize: 14,
+      gridLineWidth: 10,
+      gridStroke: 'red',
+    },
+  };
+}

__tests__/unit/api/chart.spec.ts

@@ -40,6 +40,8 @@ import {
   Gauge,
   Density,
   Heatmap,
+  AxisX,
+  AxisY,
 } from '../../../src/api/mark/mark';
 
 const TEST_OPTIONS = {
@@ -166,6 +168,8 @@ describe('Chart', () => {
     expect(chart.gauge()).toBeInstanceOf(Gauge);
     expect(chart.density()).toBeInstanceOf(Density);
     expect(chart.heatmap()).toBeInstanceOf(Heatmap);
+    expect(chart.axisX()).toBeInstanceOf(AxisX);
+    expect(chart.axisY()).toBeInstanceOf(AxisY);
     expect(chart.options().children).toEqual([
       { type: 'interval' },
       { type: 'rect' },
@@ -196,6 +200,8 @@ describe('Chart', () => {
       { type: 'gauge' },
       { type: 'density' },
       { type: 'heatmap' },
+      { type: 'axisX' },
+      { type: 'axisY' },
     ]);
   });
 

__tests__/unit/api/mark.spec.ts

@@ -26,6 +26,8 @@ import {
   Tree,
   WordCloud,
   Gauge,
+  AxisX,
+  AxisY,
 } from '../../../src/api/mark/mark';
 
 type Mark =
@@ -161,6 +163,25 @@ function getLayoutOptions() {
   };
 }
 
+function setAxisOptions(node: AxisX | AxisY): AxisX | AxisY {
+  return node
+    .scale('x', { type: 'linear' })
+    .transform({ type: 'hide' })
+    .style('gridFill', 'red')
+    .state('active', { gridFill: 'red' })
+    .attr('labelFormatter', '~s');
+}
+
+function getAxisOptions() {
+  return {
+    scale: { x: { type: 'linear' } },
+    transform: [{ type: 'hide' }],
+    style: { gridFill: 'red' },
+    state: { active: { gridFill: 'red' } },
+    labelFormatter: '~s',
+  };
+}
+
 describe('mark.get[Instance]()', () => {
   let view;
   let interval;
@@ -376,4 +397,16 @@ describe('mark.[node]()', () => {
     expect(node.type).toBe('gauge');
     expect(setCompositeOptions(node).value).toEqual(getOptions());
   });
+
+  it('AxisX() should specify options by API', () => {
+    const node = new AxisX();
+    expect(node.type).toBe('axisX');
+    expect(setAxisOptions(node).value).toEqual(getAxisOptions());
+  });
+
+  it('AxisY() should specify options by API', () => {
+    const node = new AxisY();
+    expect(node.type).toBe('axisY');
+    expect(setAxisOptions(node).value).toEqual(getAxisOptions());
+  });
 });

site/examples/component/axis/demo/axis-multi.ts

@@ -0,0 +1,31 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+});
+
+chart
+  .interval()
+  .data({
+    type: 'fetch',
+    value:
+      'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
+  })
+  .encode('x', 'letter')
+  .encode('y', 'frequency')
+  .axis('y', { labelFormatter: '.0%' });
+
+chart
+  .axisY()
+  .attr('position', 'right')
+  .scale('y', {
+    type: 'linear',
+    independent: true,
+    domain: [0, 10],
+    range: [1, 0],
+  })
+  .style('grid', false);
+
+chart.render();

site/examples/component/axis/demo/axis-polar.ts

@@ -0,0 +1,34 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  padding: 'auto',
+});
+
+chart
+  .coordinate({ type: 'polar' })
+  .scale('x', {
+    type: 'linear',
+    domain: [5, 10],
+    range: [0, 1],
+  })
+  .scale('y', {
+    type: 'linear',
+    domain: [5, 10],
+    range: [1, 0],
+  });
+
+chart
+  .axisX()
+  .attr('title', 'AxisX')
+  .attr('tickFilter', (_, i, ticks) => i && i !== ticks.length - 1);
+
+chart
+  .axisY()
+  .attr('title', 'AxisY')
+  .style('labelFontSize', 14)
+  .style('gridLineWidth', 10)
+  .style('gridStroke', 'red');
+
+chart.render();

site/examples/component/axis/demo/axis-x.ts

@@ -0,0 +1,20 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  padding: 'auto',
+  height: 80,
+});
+
+chart
+  .axisX()
+  .scale('x', {
+    type: 'linear',
+    domain: [5, 10],
+    range: [0, 1],
+  })
+  .attr('tickCount', 10)
+  .attr('title', 'AxisX');
+
+chart.render();

site/examples/component/axis/demo/axis-xy.ts

@@ -0,0 +1,31 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  padding: 'auto',
+});
+
+chart
+  .scale('x', {
+    type: 'linear',
+    domain: [5, 10],
+    range: [0, 1],
+  })
+  .scale('y', {
+    type: 'linear',
+    domain: [5, 10],
+    range: [0, 1],
+  });
+
+chart.axisX().attr('title', 'AxisX');
+
+chart
+  .axisY()
+  .attr('title', 'AxisY')
+  .attr('tickCount', 10)
+  .style('labelFontSize', 14)
+  .style('gridLineWidth', 10)
+  .style('gridStroke', 'red');
+
+chart.render();