feat(dimension): auto padding (#5046)

__tests__/plots/static/alphabet-interval-auto-padding-custom.ts

@@ -0,0 +1,67 @@
+import { Rect, Text } from '@antv/g';
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalAutoPaddingCustom(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 'auto',
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    axis: {
+      y: {
+        labelFormatter: (d) => {
+          const width = 60;
+          const height = 15;
+          const rect = new Rect({
+            style: { x: -width, y: -height / 2, height, width, fill: 'red' },
+          });
+          const text = new Text({
+            style: {
+              x: width / 2,
+              text: d + '',
+              fontSize: 12,
+              textBaseline: 'top',
+              textAlign: 'center',
+            },
+          });
+          rect.appendChild(text);
+          return rect;
+        },
+      },
+      x: {
+        labelFormatter: (d) => {
+          const width = 60;
+          const height = 15;
+          const rect = new Rect({
+            style: { x: 0, y: 0, height, width, fill: 'red' },
+          });
+          const text = new Text({
+            style: {
+              x: width / 2,
+              text: d + '',
+              fontSize: 12,
+              textBaseline: 'top',
+              textAlign: 'center',
+            },
+          });
+          rect.appendChild(text);
+          return rect;
+        },
+      },
+    },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}

__tests__/plots/static/alphabet-interval-auto-padding-d3-format.ts

@@ -0,0 +1,27 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalAutoPaddingD3Format(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 'auto',
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    axis: {
+      y: { labelFormatter: '.0%' },
+    },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}

__tests__/plots/static/alphabet-interval-auto-padding-max-ratio.ts

@@ -0,0 +1,40 @@
+import { G2Spec } from '../../../src';
+
+function appendZero(count) {
+  return Array.from({ length: count }, () => 0).join('');
+}
+
+export function alphabetIntervalAutoPaddingMaxRatio(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 'auto',
+    margin: 50,
+    inset: 10,
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    axis: {
+      y: [
+        { labelFormatter: (d) => d + appendZero(40) },
+        { labelFormatter: (d) => appendZero(40) + d, position: 'right' },
+      ],
+      x: [
+        { labelFormatter: (d) => appendZero(40) + d },
+        { labelFormatter: (d) => d + appendZero(40), position: 'top' },
+      ],
+    },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}

__tests__/plots/static/alphabet-interval-auto-padding-no-title.ts

@@ -0,0 +1,28 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalAutoPaddingNoTitle(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 'auto',
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    axis: {
+      y: { title: false },
+      x: { title: false },
+    },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}

__tests__/plots/static/alphabet-interval-auto-padding-position.ts

@@ -0,0 +1,28 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalAutoPaddingPosition(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 'auto',
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    axis: {
+      y: { labelFormatter: (d) => d + '0000', position: 'right' },
+      x: { labelFormatter: (d) => d + '0000', position: 'top' },
+    },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}

__tests__/plots/static/alphabet-interval-auto-padding-style.ts

@@ -0,0 +1,34 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalAutoPaddingStyle(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 'auto',
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    axis: {
+      y: {
+        labelFormatter: (d) => d + '0000',
+        style: {
+          labelFontSize: (_, i) => 10 + i,
+          labelFill: 'steelblue',
+        },
+      },
+      x: { labelFormatter: (d) => d + '0000', style: { labelFontSize: 20 } },
+    },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}

__tests__/plots/static/alphabet-interval-auto-padding.ts

@@ -0,0 +1,28 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalAutoPadding(): G2Spec {
+  return {
+    type: 'interval',
+    padding: 'auto',
+    transform: [{ type: 'sortX', by: 'y', reverse: true }],
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'steelblue',
+    },
+    axis: {
+      y: { labelFormatter: (d) => d + '0000' },
+      x: { labelFormatter: (d) => d + '0000' },
+    },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}

__tests__/plots/static/browser-line-area-trending-auto-padding.ts

@@ -0,0 +1,46 @@
+import { G2Spec } from '../../../src';
+import { browser } from '../../data/browser';
+
+export function browserLineAreaTrendingAutoPadding(): G2Spec {
+  return {
+    type: 'view',
+    data: browser,
+    padding: 'auto',
+    style: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+    children: [
+      {
+        type: 'line',
+        encode: {
+          x: 'name',
+          y: 'value',
+          shape: 'hv',
+        },
+        scale: {
+          y: { domain: [0, 50] },
+        },
+        style: {
+          opacity: 0.5,
+        },
+      },
+      {
+        type: 'area',
+        encode: {
+          x: 'name',
+          y: 'value',
+          shape: 'hv',
+        },
+        scale: {
+          y: { domain: [0, 50] },
+        },
+        style: {
+          opacity: 0.5,
+        },
+      },
+    ],
+  };
+}

__tests__/plots/static/flare-point-circle-pack-custom-auto-padding.ts

@@ -0,0 +1,43 @@
+import { interpolateHcl } from 'd3-interpolate';
+import { G2Spec } from '../../../src';
+
+export async function flarePointCirclePackCustomAutoPadding(): Promise<G2Spec> {
+  return {
+    type: 'view',
+    padding: 'auto',
+    width: 1000,
+    height: 1000,
+    style: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+    children: [
+      {
+        type: 'pack',
+        layout: { padding: 5 },
+        data: {
+          type: 'fetch',
+          value: 'data/flare.json',
+        },
+        encode: {
+          value: 'value',
+          color: 'depth',
+        },
+        legend: { color: false },
+        scale: {
+          color: {
+            domain: [0, 5],
+            range: ['hsl(152,80%,80%)', 'hsl(228,30%,40%)'],
+            interpolate: interpolateHcl,
+          },
+        },
+        style: {
+          labelText: (d) =>
+            d.r >= 10 && d.height === 0 ? `${d.data.name}` : '',
+        },
+      },
+    ],
+  };
+}

__tests__/plots/static/gdp-interval-flex-auto-padding-rotate.ts

@@ -0,0 +1,31 @@
+import { G2Spec } from '../../../src';
+
+export function gdpIntervalFlexAutoPaddingRotate(): G2Spec {
+  return {
+    type: 'interval',
+    width: 1000,
+    padding: 'auto',
+    data: {
+      type: 'fetch',
+      value: 'data/gdp.csv',
+    },
+    transform: [{ type: 'flexX', field: 'gdp' }],
+    legend: { color: false },
+    encode: {
+      x: 'country',
+      y: 'value',
+      color: 'country',
+    },
+    axis: {
+      x: {
+        style: { labelTransform: 'rotate(90)' },
+      },
+    },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
+  };
+}