Skip to content

Commit

Permalink
feat(dimension): auto padding (#5046)
Browse files Browse the repository at this point in the history
  • Loading branch information
pearmini authored May 19, 2023
1 parent f07b512 commit 914d445
Show file tree
Hide file tree
Showing 48 changed files with 1,196 additions and 61 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
67 changes: 67 additions & 0 deletions __tests__/plots/static/alphabet-interval-auto-padding-custom.ts
Original file line number Diff line number Diff line change
@@ -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',
},
};
}
27 changes: 27 additions & 0 deletions __tests__/plots/static/alphabet-interval-auto-padding-d3-format.ts
Original file line number Diff line number Diff line change
@@ -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',
},
};
}
40 changes: 40 additions & 0 deletions __tests__/plots/static/alphabet-interval-auto-padding-max-ratio.ts
Original file line number Diff line number Diff line change
@@ -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',
},
};
}
28 changes: 28 additions & 0 deletions __tests__/plots/static/alphabet-interval-auto-padding-no-title.ts
Original file line number Diff line number Diff line change
@@ -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',
},
};
}
28 changes: 28 additions & 0 deletions __tests__/plots/static/alphabet-interval-auto-padding-position.ts
Original file line number Diff line number Diff line change
@@ -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',
},
};
}
34 changes: 34 additions & 0 deletions __tests__/plots/static/alphabet-interval-auto-padding-style.ts
Original file line number Diff line number Diff line change
@@ -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',
},
};
}
28 changes: 28 additions & 0 deletions __tests__/plots/static/alphabet-interval-auto-padding.ts
Original file line number Diff line number Diff line change
@@ -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',
},
};
}
46 changes: 46 additions & 0 deletions __tests__/plots/static/browser-line-area-trending-auto-padding.ts
Original file line number Diff line number Diff line change
@@ -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,
},
},
],
};
}
Original file line number Diff line number Diff line change
@@ -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}` : '',
},
},
],
};
}
31 changes: 31 additions & 0 deletions __tests__/plots/static/gdp-interval-flex-auto-padding-rotate.ts
Original file line number Diff line number Diff line change
@@ -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',
},
};
}
Loading

0 comments on commit 914d445

Please sign in to comment.