feat(layout): auto inset (#5204)

__tests__/plots/static/ages-interval-radial-stacked-sorted.ts

@@ -14,6 +14,7 @@ export function agesIntervalRadialStackedSorted(): G2Spec {
     type: 'interval',
     width: 800,
     height: 800,
+    padding: 0,
     data: {
       type: 'fetch',
       value: 'data/ages.csv',
@@ -45,7 +46,7 @@ export function agesIntervalRadialStackedSorted(): G2Spec {
       x: { position: 'inner' },
     },
     legend: {
-      color: { position: 'center', gridCol: 1 },
+      color: { position: 'center' },
     },
     encode: {
       x: 'State',

__tests__/plots/static/ages-interval-radial-stacked.ts

@@ -14,6 +14,7 @@ export function agesIntervalRadialStacked(): G2Spec {
     type: 'interval',
     width: 800,
     height: 800,
+    padding: 0,
     data: {
       type: 'fetch',
       value: 'data/ages.csv',
@@ -48,16 +49,17 @@ export function agesIntervalRadialStacked(): G2Spec {
       },
       x: { position: 'inner' },
     },
-    legend: {
-      color: {
-        position: 'center',
-        gridCol: 1,
-      },
-    },
+    legend: { color: { position: 'center' } },
     encode: {
       x: 'State',
       y: 'Population',
       color: 'Age',
     },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
   };
 }

__tests__/plots/static/diamond-point-jitter-polar.ts

@@ -5,6 +5,7 @@ export function diamondPointJitterPolar(): G2Spec {
   const random = d3.randomUniform.source(d3.randomLcg(42))(0, 1);
   return {
     type: 'point',
+    padding: 10,
     data: {
       type: 'fetch',
       value: 'data/diamond.csv',
@@ -17,5 +18,11 @@ export function diamondPointJitterPolar(): G2Spec {
       color: 'clarity',
       shape: 'point',
     },
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
   };
 }

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

@@ -3,7 +3,7 @@ import { G2Spec } from '../../../src';
 export function mockAxisXYPolar(): G2Spec {
   return {
     type: 'view',
-    padding: 'auto',
+    padding: 0,
     coordinate: { type: 'polar' },
     scale: {
       x: {
@@ -33,5 +33,11 @@ export function mockAxisXYPolar(): G2Spec {
         },
       },
     ],
+    style: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
   };
 }

__tests__/plots/static/population-interval-rose-label.ts

@@ -24,5 +24,11 @@ export function populationIntervalRoseLabel(): G2Spec {
         offset: 12,
       },
     ],
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
   };
 }

__tests__/plots/static/population2015-interval-pie.ts

@@ -39,14 +39,12 @@ export function population2015IntervalPie(): G2Spec {
         },
       },
     ],
-    animate: {
-      enter: {
-        type: 'waveIn',
-        duration: 1000,
-      },
+    animate: false,
+    viewStyle: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
     },
   };
 }
-
-// @todo The animation has some unexpected behaviors.
-population2015IntervalPie.skip = true;

__tests__/plots/static/score-by-item-area-radar-custom.ts

@@ -6,6 +6,7 @@ export function scoreByItemAreaRadarCustom(): G2Spec {
     type: 'view',
     data: scoreByItem,
     coordinate: { type: 'polar' },
+    inset: 50,
     axis: {
       x: { grid: true },
       y: {
@@ -39,5 +40,11 @@ export function scoreByItemAreaRadarCustom(): G2Spec {
         style: { lineWidth: 2 },
       },
     ],
+    style: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
   };
 }

__tests__/plots/static/score-by-item-area-radar.ts

@@ -27,5 +27,11 @@ export function scoreByItemAreaRadar(): G2Spec {
         style: { lineWidth: 2 },
       },
     ],
+    style: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
   };
 }

__tests__/plots/static/score-by-item-area-smooth-radar.ts

@@ -5,6 +5,8 @@ export function scoreByItemAreaSmoothRadar(): G2Spec {
   return {
     type: 'view',
     data: scoreByItem,
+    padding: 0,
+    height: 640,
     coordinate: { type: 'polar' },
     axis: {
       x: { grid: true },
@@ -14,7 +16,7 @@ export function scoreByItemAreaSmoothRadar(): G2Spec {
       x: { padding: 0.5, align: 0 },
       y: { tickCount: 5 },
     },
-    legend: { color: { layout: { justifyContent: 'flex-start' } } },
+    legend: false,
     children: [
       {
         type: 'area',
@@ -27,5 +29,11 @@ export function scoreByItemAreaSmoothRadar(): G2Spec {
         style: { lineWidth: 2 },
       },
     ],
+    style: {
+      viewFill: '#4e79a7',
+      plotFill: '#f28e2c',
+      mainFill: '#e15759',
+      contentFill: '#76b7b2',
+    },
   };
 }

__tests__/plots/static/seasonal-weather-area-radial.ts

@@ -9,6 +9,7 @@ export function seasonalWeatherAreaRadial(): G2Spec {
       type: 'fetch',
       value: 'data/seasonal-weather.csv',
     },
+    padding: 0,
     coordinate: { type: 'polar', innerRadius: 0.4 },
     axis: {
       y: {
@@ -25,6 +26,7 @@ export function seasonalWeatherAreaRadial(): G2Spec {
       x: {
         grid: true,
         position: 'inner',
+        tickCount: 10,
       },
     },
     scale: { x: { utc: true } },

src/component/axis.ts

@@ -106,6 +106,7 @@ function prettyNumber(n: number) {
 
 // Set inset for axis.
 function createInset(position, coordinate) {
+  if (isPolar(coordinate)) return (d) => d;
   const options = coordinate.getOptions();
   const {
     innerWidth,
@@ -246,21 +247,17 @@ function inferArcStyle(
     radius,
     startAngle,
     endAngle,
-    titleFillOpacity: 0,
-    titlePosition: 'inner',
-    line: false,
-    tick: true,
     gridLength: (outerRadius - innerRadius) * r,
   };
 
   if (position === 'inner') {
-    const [w, h] = sizeOf(coordinate);
-    const r = Math.min(w, h) / 2;
+    // @ts-ignore
+    const { insetLeft, insetTop } = coordinate.getOptions();
     return {
       ...common,
+      center: [center[0] - insetLeft, center[1] - insetTop],
       labelAlign: 'perpendicular',
       labelDirection: 'positive',
-      labelSpacing: 4,
       tickDirection: 'positive',
       gridDirection: 'negative',
     };
@@ -271,7 +268,6 @@ function inferArcStyle(
     ...common,
     labelAlign: 'parallel',
     labelDirection: 'negative',
-    labelSpacing: 4,
     tickDirection: 'negative',
     gridDirection: 'positive',
   };
@@ -329,11 +325,13 @@ function inferAxisLinearOverrideStyle(
       const [innerRadius, outerRadius] = radiusOf(coordinate);
       const [startAngle, endAngle] = angleOf(coordinate);
       const r = Math.min(width, height) / 2;
+      // @ts-ignore
+      const { insetLeft, insetTop } = coordinate.getOptions();
 
       const innerR = innerRadius * r;
       const outerR = outerRadius * r;
 
-      const [actualCx, actualCy] = [cx + x, cy + y];
+      const [actualCx, actualCy] = [cx + x - insetLeft, cy + y - insetTop];
       const [cos, sin] = [Math.cos(orientation), Math.sin(orientation)];
 
       const startPos: [number, number] = [
@@ -349,7 +347,7 @@ function inferAxisLinearOverrideStyle(
         startPos,
         endPos,
         gridClosed: endAngle - startAngle === 360,
-        gridCenter: [cx + x, y + cy],
+        gridCenter: [actualCx, actualCy],
         gridControlAngles: new Array(3)
           .fill(0)
           .map((d, i, arr) => ((endAngle - startAngle) / (arr.length - 1)) * i),
@@ -374,9 +372,12 @@ const ArcAxisComponent: GCC<AxisOptions> = (options) => {
     tickMethod,
     important = {},
     style = {},
+    indexBBox,
+    title,
+    grid = false,
     ...rest
   } = options;
-  const { title, grid = false } = style;
+
   return ({ scales: [scale], value, coordinate, theme }) => {
     const { bbox } = value;
     const { domain } = scale.getOptions();
@@ -391,6 +392,18 @@ const ArcAxisComponent: GCC<AxisOptions> = (options) => {
       coordinate,
     );
 
+    // Bind computed bbox if exists.
+    const labels = indexBBox
+      ? data.map((d, i) => {
+          const bbox = indexBBox.get(i);
+          if (!bbox) return d;
+          // bbox: [label, bbox]
+          // Make than indexBBox can match current label.
+          if (bbox[0] !== d.label) return d;
+          return { ...d, bbox: bbox[1] };
+        })
+      : data;
+
     const [innerRadius, outerRadius] = radiusOf(coordinate);
 
     const defaultStyle = inferArcStyle(
@@ -401,11 +414,11 @@ const ArcAxisComponent: GCC<AxisOptions> = (options) => {
       coordinate,
     );
 
-    const { axis: axisTheme } = theme;
+    const { axis: axisTheme, axisArc = {} } = theme;
     const finalStyle = adaptor(
-      deepMix({}, axisTheme, defaultStyle, {
+      deepMix({}, axisTheme, axisArc, defaultStyle, {
         type: 'arc',
-        data,
+        data: labels,
         titleText: titleContent(title),
         grid,
         ...rest,

src/interaction/tooltip.ts

@@ -260,7 +260,19 @@ function groupItems(
 function updateRuleY(
   root,
   points,
-  { height, width, startX, startY, transposed, polar, ...rest },
+  {
+    plotWidth,
+    plotHeight,
+    mainWidth,
+    mainHeight,
+    startX,
+    startY,
+    transposed,
+    polar,
+    insetLeft,
+    insetTop,
+    ...rest
+  },
 ) {
   const defaults = {
     lineWidth: 1,
@@ -274,18 +286,16 @@ function updateRuleY(
   const x = mean(X);
   const pointsOf = () => {
     if (polar) {
-      const cx = startX + width / 2;
-      const cy = startY + height / 2;
-      const r = Math.min(width, height) / 2;
+      const r = Math.min(mainWidth, mainHeight) / 2;
+      const cx = startX + insetLeft + mainWidth / 2;
+      const cy = startY + insetTop + mainHeight / 2;
       const a = angle(sub([x, y], [cx, cy]));
       const x0 = cx + r * Math.cos(a);
       const y0 = cy + r * Math.sin(a);
       return [cx, x0, cy, y0];
     }
-    if (transposed) {
-      return [startX, startX + width, y + startY, y + startY];
-    }
-    return [x + startX, x + startX, startY, startY + height];
+    if (transposed) return [startX, startX + plotWidth, y + startY, y + startY];
+    return [x + startX, x + startX, startY, startY + plotHeight];
   };
   const [x1, x2, y1, y2] = pointsOf();
   const createLine = () => {
@@ -374,7 +384,14 @@ export function seriesTooltip(
   const transposed = isTranspose(coordinate);
   const polar = isPolar(coordinate);
   const style = deepMix(_style, rest);
-  const { innerWidth: width, innerHeight: height } = coordinate.getOptions();
+  const {
+    innerWidth: plotWidth,
+    innerHeight: plotHeight,
+    width: mainWidth,
+    height: mainHeight,
+    insetLeft,
+    insetTop,
+  } = coordinate.getOptions();
 
   // Split elements into series elements and item elements.
   const seriesElements = [];
@@ -534,8 +551,12 @@ export function seriesTooltip(
         const points = filteredSeriesData.map((d) => d[1]);
         updateRuleY(root, points, {
           ...ruleStyle,
-          width,
-          height,
+          plotWidth,
+          plotHeight,
+          mainWidth,
+          mainHeight,
+          insetLeft,
+          insetTop,
           startX,
           startY,
           transposed,