diff --git a/__tests__/integration/snapshots/static/alphabetIntervalTitleAuto.png b/__tests__/integration/snapshots/static/alphabetIntervalTitleAuto.png new file mode 100644 index 0000000000..2354224ac3 Binary files /dev/null and b/__tests__/integration/snapshots/static/alphabetIntervalTitleAuto.png differ diff --git a/__tests__/plots/static/alphabet-interval-title-auto.ts b/__tests__/plots/static/alphabet-interval-title-auto.ts new file mode 100644 index 0000000000..b45cde2dad --- /dev/null +++ b/__tests__/plots/static/alphabet-interval-title-auto.ts @@ -0,0 +1,32 @@ +import { G2Spec } from '../../../src'; + +export function alphabetIntervalTitleAuto(): G2Spec { + return { + type: 'interval', + padding: 'auto', + title: { + title: 'Use frequency of keyboard keys', + subtitle: 'The mostest frequency letter are E, T, A.', + titleFontSize: 30, + subtitleFontSize: 20, + }, + data: { + type: 'fetch', + value: 'data/alphabet.csv', + }, + axis: { + y: { labelFormatter: '.0%' }, + }, + encode: { + x: 'letter', + y: 'frequency', + color: 'steelblue', + }, + viewStyle: { + viewFill: '#4e79a7', + plotFill: '#f28e2c', + mainFill: '#e15759', + contentFill: '#76b7b2', + }, + }; +} diff --git a/__tests__/plots/static/index.ts b/__tests__/plots/static/index.ts index 1ba0fc7c8c..9178ae1be0 100644 --- a/__tests__/plots/static/index.ts +++ b/__tests__/plots/static/index.ts @@ -273,3 +273,4 @@ export { alphabetIntervalAutoPaddingSlider } from './alphabet-interval-auto-padd export { countriesBubbleLegendSize } from './countries-bubble-legend-size'; export { cars2PointOrdinalSize } from './cars2-point-ordinal-size'; export { cars2PointConstantColorSize } from './cars2-point-constant-color-size'; +export { alphabetIntervalTitleAuto } from './alphabet-interval-title-auto'; diff --git a/src/component/title.ts b/src/component/title.ts index 7153108d8c..a255c9e9b4 100644 --- a/src/component/title.ts +++ b/src/component/title.ts @@ -69,6 +69,7 @@ const Title = createComponent({ .node(); const bounds = mainTitle.getLocalBounds(); + console.log(bounds.max[1], y, spacing); maybeAppend(container, '.sub-title', 'text') .attr('className', 'sub-title') .call((selection) => { diff --git a/src/runtime/component.ts b/src/runtime/component.ts index 1eb7fb980e..7d9453a7ca 100644 --- a/src/runtime/component.ts +++ b/src/runtime/component.ts @@ -584,6 +584,7 @@ export function computeComponentSize( if (t.startsWith('legendContinuous')) return computeContinuousLegendSize; if (t === 'legendCategory') return computeCategoryLegendSize; if (t.startsWith('slider')) return computeSliderSize; + if (t === 'title') return computeTitleSize; return () => {}; }; return createCompute()( @@ -625,6 +626,32 @@ function computeGroupSize( children.forEach((d) => (d.size = maxSize)); } +function computeTitleSize( + component: G2GuideComponentOptions, + crossSize: number, + crossPadding: [number, number], + position: GCP, + theme: G2Theme, + library: G2Library, +) { + const { + title, + subtitle, + spacing = 0, + ...style + } = deepMix({}, theme.title, component); + if (title) { + const titleStyle = subObject(style, 'title'); + const titleBBox = computeLabelSize(title, titleStyle); + component.size = titleBBox.height; + } + if (subtitle) { + const subtitleStyle = subObject(style, 'subtitle'); + const subtitleBBox = computeLabelSize(subtitle, subtitleStyle); + component.size += spacing + subtitleBBox.height; + } +} + function computeSliderSize( component: G2GuideComponentOptions, crossSize: number, diff --git a/src/theme/classic.ts b/src/theme/classic.ts index 4bf30e43ab..ed69c41e23 100644 --- a/src/theme/classic.ts +++ b/src/theme/classic.ts @@ -408,6 +408,7 @@ export const Classic: TC = (options) => { thumbHighlightedFillOpacity: 0.2, }, title: { + spacing: 8, titleFill: COLORS.BLACK, titleFillOpacity: 0.85, titleFontSize: 14,