diff --git a/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-0.png b/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-0.png index e9e7e577ea..0aa87eef70 100644 Binary files a/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-0.png and b/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-0.png differ diff --git a/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-1.png b/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-1.png index d0ebe92b87..5a65831fc3 100644 Binary files a/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-1.png and b/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-1.png differ diff --git a/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-2.png b/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-2.png index 20fb0910bc..b5148ec889 100644 Binary files a/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-2.png and b/__tests__/integration/snapshots/animation/deaths-rose-stack-enter/interval0-2.png differ diff --git a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-0.png b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-0.png index e013de3015..c10301c6ad 100644 Binary files a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-0.png and b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-0.png differ diff --git a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-1.png b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-1.png index 696c0682e6..1bb7a8c817 100644 Binary files a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-1.png and b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-1.png differ diff --git a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-2.png b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-2.png index 1d83ca8a21..7b80f84ae0 100644 Binary files a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-2.png and b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-2.png differ diff --git a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-3.png b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-3.png index f2244a3cea..74bdb0a4ee 100644 Binary files a/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-3.png and b/__tests__/integration/snapshots/animation/population-interval-rose-keyframe/interval2-3.png differ diff --git a/__tests__/integration/snapshots/api/chartChangeSizePolar.png b/__tests__/integration/snapshots/api/chartChangeSizePolar.png index c687ce5cef..f7d419c593 100644 Binary files a/__tests__/integration/snapshots/api/chartChangeSizePolar.png and b/__tests__/integration/snapshots/api/chartChangeSizePolar.png differ diff --git a/__tests__/integration/snapshots/api/viewFacetCircle.png b/__tests__/integration/snapshots/api/viewFacetCircle.png index 981f121360..b1fd1c881d 100644 Binary files a/__tests__/integration/snapshots/api/viewFacetCircle.png and b/__tests__/integration/snapshots/api/viewFacetCircle.png differ diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-polar/step0.png b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-polar/step0.png index 90b9b6549b..43c73c85e8 100644 Binary files a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-polar/step0.png and b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-background-polar/step0.png differ diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step0.png b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step0.png index 42da55371c..fe58d12c85 100644 Binary files a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step0.png and b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step0.png differ diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step1.png b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step1.png index 2148337537..8311b2225c 100644 Binary files a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step1.png and b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step1.png differ diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step2.png b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step2.png index 2d010c0f01..4c6b2163d8 100644 Binary files a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step2.png and b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step2.png differ diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step3.png b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step3.png index 7bf4f5b333..57987fad0c 100644 Binary files a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step3.png and b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step3.png differ diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step4.png b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step4.png index f16a994661..e47fe158b1 100644 Binary files a/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step4.png and b/__tests__/integration/snapshots/interaction/alphabet-interval-highlight-offset-polar/step4.png differ diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step0.png b/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step0.png index 2834fa41d3..8a92b1ad05 100644 Binary files a/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step0.png and b/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step0.png differ diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step1.png b/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step1.png index 785aa9b195..f80fa4f0fd 100644 Binary files a/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step1.png and b/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step1.png differ diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step2.png b/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step2.png index 95a891c3ad..ce544cf7f5 100644 Binary files a/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step2.png and b/__tests__/integration/snapshots/interaction/alphabet-interval-select-offset-polar/step2.png differ diff --git a/__tests__/integration/snapshots/interaction/score-by-item-area-radar/step0.png b/__tests__/integration/snapshots/interaction/score-by-item-area-radar/step0.png index d4404b0655..7bbabf068d 100644 Binary files a/__tests__/integration/snapshots/interaction/score-by-item-area-radar/step0.png and b/__tests__/integration/snapshots/interaction/score-by-item-area-radar/step0.png differ diff --git a/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-link-polar/step0.png b/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-link-polar/step0.png index eabffe8689..5b50dec2aa 100644 Binary files a/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-link-polar/step0.png and b/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-link-polar/step0.png differ diff --git a/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-link-polar/step1.png b/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-link-polar/step1.png index 130ba35dca..b6eaba1a2c 100644 Binary files a/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-link-polar/step1.png and b/__tests__/integration/snapshots/interaction/state-ages-interval-highlight-link-polar/step1.png differ diff --git a/__tests__/integration/snapshots/static/agesIntervalRadialStacked.png b/__tests__/integration/snapshots/static/agesIntervalRadialStacked.png index 5be3fe29a3..2413a2ae52 100644 Binary files a/__tests__/integration/snapshots/static/agesIntervalRadialStacked.png and b/__tests__/integration/snapshots/static/agesIntervalRadialStacked.png differ diff --git a/__tests__/integration/snapshots/static/agesIntervalRadialStackedSorted.png b/__tests__/integration/snapshots/static/agesIntervalRadialStackedSorted.png index ace186c299..ea90efb332 100644 Binary files a/__tests__/integration/snapshots/static/agesIntervalRadialStackedSorted.png and b/__tests__/integration/snapshots/static/agesIntervalRadialStackedSorted.png differ diff --git a/__tests__/integration/snapshots/static/diamondPointJitterPolar.png b/__tests__/integration/snapshots/static/diamondPointJitterPolar.png index cdb066689a..767987c6df 100644 Binary files a/__tests__/integration/snapshots/static/diamondPointJitterPolar.png and b/__tests__/integration/snapshots/static/diamondPointJitterPolar.png differ diff --git a/__tests__/integration/snapshots/static/mockAxisXYPolar.png b/__tests__/integration/snapshots/static/mockAxisXYPolar.png index 2f8c673d35..0e50f09f3c 100644 Binary files a/__tests__/integration/snapshots/static/mockAxisXYPolar.png and b/__tests__/integration/snapshots/static/mockAxisXYPolar.png differ diff --git a/__tests__/integration/snapshots/static/monthIntervalFacetCircle.png b/__tests__/integration/snapshots/static/monthIntervalFacetCircle.png index 2db4cc9e54..8507dd323d 100644 Binary files a/__tests__/integration/snapshots/static/monthIntervalFacetCircle.png and b/__tests__/integration/snapshots/static/monthIntervalFacetCircle.png differ diff --git a/__tests__/integration/snapshots/static/population2015IntervalPie.png b/__tests__/integration/snapshots/static/population2015IntervalPie.png new file mode 100644 index 0000000000..42e6bc248d Binary files /dev/null and b/__tests__/integration/snapshots/static/population2015IntervalPie.png differ diff --git a/__tests__/integration/snapshots/static/populationIntervalRose.png b/__tests__/integration/snapshots/static/populationIntervalRose.png index c0375c1564..bb071887d5 100644 Binary files a/__tests__/integration/snapshots/static/populationIntervalRose.png and b/__tests__/integration/snapshots/static/populationIntervalRose.png differ diff --git a/__tests__/integration/snapshots/static/populationIntervalRoseLabel.png b/__tests__/integration/snapshots/static/populationIntervalRoseLabel.png index ba1e977736..18dd2aba4c 100644 Binary files a/__tests__/integration/snapshots/static/populationIntervalRoseLabel.png and b/__tests__/integration/snapshots/static/populationIntervalRoseLabel.png differ diff --git a/__tests__/integration/snapshots/static/scoreByItemAreaRadar.png b/__tests__/integration/snapshots/static/scoreByItemAreaRadar.png index 8fd9bf1242..c9f10895d4 100644 Binary files a/__tests__/integration/snapshots/static/scoreByItemAreaRadar.png and b/__tests__/integration/snapshots/static/scoreByItemAreaRadar.png differ diff --git a/__tests__/integration/snapshots/static/scoreByItemAreaRadarCustom.png b/__tests__/integration/snapshots/static/scoreByItemAreaRadarCustom.png index 766fd1f2e0..de1ddb84ec 100644 Binary files a/__tests__/integration/snapshots/static/scoreByItemAreaRadarCustom.png and b/__tests__/integration/snapshots/static/scoreByItemAreaRadarCustom.png differ diff --git a/__tests__/integration/snapshots/static/scoreByItemAreaRadarSize.png b/__tests__/integration/snapshots/static/scoreByItemAreaRadarSize.png index 32b9469ab8..b30dac6ba3 100644 Binary files a/__tests__/integration/snapshots/static/scoreByItemAreaRadarSize.png and b/__tests__/integration/snapshots/static/scoreByItemAreaRadarSize.png differ diff --git a/__tests__/integration/snapshots/static/scoreByItemAreaSmoothRadar.png b/__tests__/integration/snapshots/static/scoreByItemAreaSmoothRadar.png index 09045d72d2..176ee81331 100644 Binary files a/__tests__/integration/snapshots/static/scoreByItemAreaSmoothRadar.png and b/__tests__/integration/snapshots/static/scoreByItemAreaSmoothRadar.png differ diff --git a/__tests__/integration/snapshots/static/seasonalWeatherAreaRadial.png b/__tests__/integration/snapshots/static/seasonalWeatherAreaRadial.png index 9b9479eee6..738904f424 100644 Binary files a/__tests__/integration/snapshots/static/seasonalWeatherAreaRadial.png and b/__tests__/integration/snapshots/static/seasonalWeatherAreaRadial.png differ diff --git a/__tests__/integration/snapshots/static/sepalBoxPolarBox.png b/__tests__/integration/snapshots/static/sepalBoxPolarBox.png index b07ca5f4bc..bd913921be 100644 Binary files a/__tests__/integration/snapshots/static/sepalBoxPolarBox.png and b/__tests__/integration/snapshots/static/sepalBoxPolarBox.png differ diff --git a/__tests__/integration/snapshots/static/speciesViolinBasicPolar.png b/__tests__/integration/snapshots/static/speciesViolinBasicPolar.png index 16eae326f5..6135ed8453 100644 Binary files a/__tests__/integration/snapshots/static/speciesViolinBasicPolar.png and b/__tests__/integration/snapshots/static/speciesViolinBasicPolar.png differ diff --git a/__tests__/plots/static/ages-interval-radial-stacked-sorted.ts b/__tests__/plots/static/ages-interval-radial-stacked-sorted.ts index dbec2317f9..97c3277a7e 100644 --- a/__tests__/plots/static/ages-interval-radial-stacked-sorted.ts +++ b/__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', diff --git a/__tests__/plots/static/ages-interval-radial-stacked.ts b/__tests__/plots/static/ages-interval-radial-stacked.ts index 9ec4119ff6..b8eb291bdb 100644 --- a/__tests__/plots/static/ages-interval-radial-stacked.ts +++ b/__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', + }, }; } diff --git a/__tests__/plots/static/diamond-point-jitter-polar.ts b/__tests__/plots/static/diamond-point-jitter-polar.ts index 998611aac4..7783c24b37 100644 --- a/__tests__/plots/static/diamond-point-jitter-polar.ts +++ b/__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', + }, }; } diff --git a/__tests__/plots/static/mock-axisXY-polar.ts b/__tests__/plots/static/mock-axisXY-polar.ts index dc937e3271..6bde4f574f 100644 --- a/__tests__/plots/static/mock-axisXY-polar.ts +++ b/__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', + }, }; } diff --git a/__tests__/plots/static/population-interval-rose-label.ts b/__tests__/plots/static/population-interval-rose-label.ts index bc6ee99812..50ff590854 100644 --- a/__tests__/plots/static/population-interval-rose-label.ts +++ b/__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', + }, }; } diff --git a/__tests__/plots/static/population2015-interval-pie.ts b/__tests__/plots/static/population2015-interval-pie.ts index 2231aa189c..30291a7683 100644 --- a/__tests__/plots/static/population2015-interval-pie.ts +++ b/__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; diff --git a/__tests__/plots/static/score-by-item-area-radar-custom.ts b/__tests__/plots/static/score-by-item-area-radar-custom.ts index 6858506d0a..7710c0b421 100644 --- a/__tests__/plots/static/score-by-item-area-radar-custom.ts +++ b/__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', + }, }; } diff --git a/__tests__/plots/static/score-by-item-area-radar.ts b/__tests__/plots/static/score-by-item-area-radar.ts index 3dc535b9f1..9bd051a346 100644 --- a/__tests__/plots/static/score-by-item-area-radar.ts +++ b/__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', + }, }; } diff --git a/__tests__/plots/static/score-by-item-area-smooth-radar.ts b/__tests__/plots/static/score-by-item-area-smooth-radar.ts index 0d3067424f..bc0010e6ce 100644 --- a/__tests__/plots/static/score-by-item-area-smooth-radar.ts +++ b/__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', + }, }; } diff --git a/__tests__/plots/static/seasonal-weather-area-radial.ts b/__tests__/plots/static/seasonal-weather-area-radial.ts index 799f62645a..17f29b3322 100644 --- a/__tests__/plots/static/seasonal-weather-area-radial.ts +++ b/__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 } }, diff --git a/src/component/axis.ts b/src/component/axis.ts index 057e220e8f..0bc794ec68 100644 --- a/src/component/axis.ts +++ b/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 = (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 = (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 = (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, diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts index a735da3ccb..52fa0678d1 100644 --- a/src/interaction/tooltip.ts +++ b/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, diff --git a/src/runtime/component.ts b/src/runtime/component.ts index 8fdf723ab1..9103e36496 100644 --- a/src/runtime/component.ts +++ b/src/runtime/component.ts @@ -853,7 +853,7 @@ function computeCategoryLegendSize( component.size += cp * 2; } -function createScale( +export function createScale( component: G2GuideComponentOptions, library: G2Library, ): Scale { @@ -871,7 +871,7 @@ function createScale( return useScale(scaleOptions); } -function computeLabelsBBox( +export function computeLabelsBBox( component: G2GuideComponentOptions, scale: Scale, isVertical: boolean, @@ -903,19 +903,21 @@ function computeLabelsBBox( return labelBBoxes; } -function computeTitleBBox( +export function computeTitleBBox( component: G2GuideComponentOptions, style: Record, ) { + const isFalsy = (x) => x === false || x === null; const { title } = component; - if (title === false || title === null || title === undefined) return null; + const { title: styleTitle } = style; + if (isFalsy(title) || isFalsy(styleTitle) || title === undefined) return null; const titleStyle = subObject(style, 'title'); const titleText = Array.isArray(title) ? title.join(',') : title; const titleBBox = computeLabelSize(titleText, titleStyle); return titleBBox; } -function styleOf( +export function styleOf( axis: G2GuideComponentOptions, position: GCP, theme: G2Theme, diff --git a/src/runtime/layout.ts b/src/runtime/layout.ts index ebb5aaff82..d29566e2da 100644 --- a/src/runtime/layout.ts +++ b/src/runtime/layout.ts @@ -1,5 +1,5 @@ import { Coordinate } from '@antv/coord'; -import { ascending, group, sum } from 'd3-array'; +import { ascending, group, max, sum } from 'd3-array'; import { deepMix } from '@antv/util'; import { isParallel, isPolar, isRadar, radiusOf } from '../utils/coordinate'; import { capitalizeFirst } from '../utils/helper'; @@ -13,8 +13,16 @@ import { SectionArea, G2Theme, } from './types/common'; -import { computeComponentSize, groupComponents } from './component'; +import { + computeComponentSize, + computeLabelsBBox, + computeTitleBBox, + createScale, + groupComponents, + styleOf, +} from './component'; import { G2GuideComponentOptions, G2Library, G2View } from './types/options'; +import { isPolar as isPolarOptions } from './coordinate'; export function computeLayout( components: G2GuideComponentOptions[], @@ -42,7 +50,7 @@ export function computeLayout( paddingLeft = padding, paddingRight = padding, paddingTop = padding, - } = options; + } = computeInset(components, options, theme, library); const MIN_CONTENT_RATIO = 1 / 4; @@ -166,6 +174,60 @@ export function computeRoughPlotSize(options: G2View) { return { width: finalWidth, height: finalHeight }; } +function computeInset( + components: G2GuideComponentOptions[], + options: G2View, + theme: G2Theme, + library: G2Library, +) { + const { coordinates } = options; + if (!isPolarOptions(coordinates)) return options; + + // Filter axis. + const axes = components.filter( + (d) => typeof d.type === 'string' && d.type.startsWith('axis'), + ); + + if (axes.length === 0) return options; + + const styles = axes.map((component) => { + const key = component.type === 'axisArc' ? 'arc' : 'linear'; + return styleOf(component, key as any, theme); + }); + + // Compute max labelSpacing. + const maxLabelSpacing = max(styles, (d) => d.labelSpacing ?? 0); + + // Compute labelBBoxes. + const labelBBoxes = axes.flatMap((component, i) => { + const style = styles[i]; + const scale = createScale(component, library); + const labels = computeLabelsBBox(component, scale, false, style); + return labels; + }); + const size = max(labelBBoxes, (d) => d.height) + maxLabelSpacing; + + // Compute titles. + const titleBBoxes = axes + .flatMap((component, i) => { + const style = styles[i]; + return computeTitleBBox(component, style); + }) + .filter((d) => d !== null); + const titleSize = + titleBBoxes.length === 0 ? 0 : max(titleBBoxes, (d) => d.height); + + // Update inset. + const { + inset = size, + insetLeft = inset, + insetBottom = inset, + insetTop = inset + titleSize, + insetRight = inset, + } = options; + return { ...options, insetLeft, insetBottom, insetTop, insetRight }; +} + /** * @todo Support percentage size(e.g. 50%) */ @@ -238,6 +300,10 @@ export function placeComponents( marginRight, innerHeight, innerWidth, + insetBottom, + insetLeft, + insetRight, + insetTop, height, width, } = layout; @@ -247,6 +313,16 @@ export function placeComponents( const pr = paddingRight + marginRight; const pb = paddingBottom + marginBottom; + const centerSection: SectionArea = [ + pl + insetLeft, + pt + insetTop, + innerWidth - insetLeft - insetRight, + innerHeight - insetTop - insetBottom, + 'center', + null, + null, + ]; + const section: Section = { top: [pl, 0, innerWidth, pt, 'vertical', true, ascending], right: [width - pr, pt, pr, innerHeight, 'horizontal', false, ascending], @@ -272,10 +348,11 @@ export function placeComponents( false, ascending, ], - center: [pl, pt, innerWidth, innerHeight, 'center', null, null], - inner: [pl, pt, innerWidth, innerHeight, 'center', null, null], - outer: [pl, pt, innerWidth, innerHeight, 'center', null, null], + center: centerSection, + inner: centerSection, + outer: centerSection, }; + for (const [position, components] of positionComponents.entries()) { const area = section[position]; diff --git a/src/runtime/types/theme.ts b/src/runtime/types/theme.ts index 343bc8a8c0..33b8ff6680 100644 --- a/src/runtime/types/theme.ts +++ b/src/runtime/types/theme.ts @@ -76,6 +76,7 @@ type ComponentTheme = { axisLeft?: any; axisRight?: any; axisRadar?: any; + axisArc?: any; legendCategory?: any; legendContinuous?: any; label?: LabelStyleProps; diff --git a/src/theme/academy.ts b/src/theme/academy.ts index 92f072c8b8..420cbbc43c 100644 --- a/src/theme/academy.ts +++ b/src/theme/academy.ts @@ -294,6 +294,13 @@ export const Academy: TC = (options) => { titlePosition: 'top', titleTextBaseline: 'bottom', }, + axisArc: { + title: false, + titlePosition: 'inner', + line: false, + tick: true, + labelSpacing: 4, + }, axisRadar: { girdClosed: true, gridStrokeOpacity: 0.3, diff --git a/src/theme/classic.ts b/src/theme/classic.ts index 8496df3357..020f5aef86 100644 --- a/src/theme/classic.ts +++ b/src/theme/classic.ts @@ -297,6 +297,13 @@ export const Classic: TC = (options) => { titlePosition: 'top', titleSpacing: 0, }, + axisArc: { + title: false, + titlePosition: 'inner', + line: false, + tick: true, + labelSpacing: 4, + }, axisRadar: { girdClosed: true, gridStrokeOpacity: 0.3, diff --git a/src/theme/classicDark.ts b/src/theme/classicDark.ts index dad3318c2f..37463c0881 100644 --- a/src/theme/classicDark.ts +++ b/src/theme/classicDark.ts @@ -302,6 +302,13 @@ export const ClassicDark: TC = (options) => { tick: false, titlePosition: 'start', }, + axisArc: { + title: false, + titlePosition: 'inner', + line: false, + tick: true, + labelSpacing: 4, + }, legendCategory: { backgroundFill: 'transparent', itemBackgroundFill: 'transparent',