Skip to content

Commit

Permalink
feat(title): auto layout
Browse files Browse the repository at this point in the history
  • Loading branch information
pearmini committed Jul 20, 2023
1 parent 682885b commit 2089a49
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions __tests__/plots/static/alphabet-interval-title-auto.ts
Original file line number Diff line number Diff line change
@@ -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',
},
};
}
1 change: 1 addition & 0 deletions __tests__/plots/static/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
27 changes: 27 additions & 0 deletions src/runtime/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()(
Expand Down Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions src/theme/classic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,7 @@ export const Classic: TC<ClassicOptions> = (options) => {
thumbHighlightedFillOpacity: 0.2,
},
title: {
spacing: 8,
titleFill: COLORS.BLACK,
titleFillOpacity: 0.85,
titleFontSize: 14,
Expand Down

0 comments on commit 2089a49

Please sign in to comment.