Skip to content

Commit

Permalink
refactor(style): remove component.style, label.style (#5331)
Browse files Browse the repository at this point in the history
  • Loading branch information
pearmini authored Jul 19, 2023
1 parent 683d529 commit ddaa6b3
Show file tree
Hide file tree
Showing 88 changed files with 370 additions and 537 deletions.
Binary file modified __tests__/integration/snapshots/static/vennBasic.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified __tests__/integration/snapshots/static/vennHollow.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,7 @@ export async function populationIntervalRoseKeyframe(): Promise<G2Spec> {
tickCount: 5,
tickFilter: (d, i) => i !== 0,
direction: 'right',
style: {
labelTransform: 'rotate(45)',
},
labelTransform: 'rotate(45)',
},
},
},
Expand Down
3 changes: 2 additions & 1 deletion __tests__/plots/api/chart-axis-label-formatter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,8 @@ export function chartAxisLabelFormatter(context) {
.label({
text: 'time',
transform: [{ type: 'contrastReverse' }],
style: { dy: 20, fontStyle: 'italic' },
dy: 20,
fontStyle: 'italic',
})
.tooltip({
title: 'car',
Expand Down
30 changes: 13 additions & 17 deletions __tests__/plots/api/chart-emit-brush-highlight-axis-horizontal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,7 @@ export function chartEmitBrushHighlightAxisHorizontal(context) {
layout: { justifyContent: 'center' },
size: 50,
length: 300,
style: {
labelSpacing: 0,
},
labelSpacing: 0,
},
},
state: {
Expand All @@ -84,20 +82,18 @@ export function chartEmitBrushHighlightAxisHorizontal(context) {
zIndex: 1,
line: true,
tick: true,
style: {
labelFontSize: 10,
labelStroke: '#fff',
labelStrokeLineJoin: 'round',
labelStrokeWidth: 5,
lineStroke: 'black',
lineStrokeOpacity: 1,
lineStrokeWidth: 1,
tickStroke: 'black',
titleFontSize: 10,
titleStroke: '#fff',
titleStrokeLineJoin: 'round',
titleStrokeWidth: 5,
},
labelFontSize: 10,
labelStroke: '#fff',
labelStrokeLineJoin: 'round',
labelStrokeWidth: 5,
lineStroke: 'black',
lineStrokeOpacity: 1,
lineStrokeWidth: 1,
tickStroke: 'black',
titleFontSize: 10,
titleStroke: '#fff',
titleStrokeLineJoin: 'round',
titleStrokeWidth: 5,
},
]),
),
Expand Down
26 changes: 12 additions & 14 deletions __tests__/plots/api/chart-emit-brush-highlight-axis-vertical.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,20 +66,18 @@ export function chartEmitBrushHighlightAxisVertical(context) {
line: true,
tick: true,
titlePosition: 'r',
style: {
labelStroke: '#fff',
labelStrokeWidth: 5,
labelFontSize: 10,
labelStrokeLineJoin: 'round',
titleStroke: '#fff',
titleFontSize: 10,
titleStrokeWidth: 5,
titleStrokeLineJoin: 'round',
titleTransform: 'translate(-50%, 0) rotate(-90)',
lineStroke: 'black',
tickStroke: 'black',
lineStrokeWidth: 1,
},
labelStroke: '#fff',
labelStrokeWidth: 5,
labelFontSize: 10,
labelStrokeLineJoin: 'round',
titleStroke: '#fff',
titleFontSize: 10,
titleStrokeWidth: 5,
titleStrokeLineJoin: 'round',
titleTransform: 'translate(-50%, 0) rotate(-90)',
lineStroke: 'black',
tickStroke: 'black',
lineStrokeWidth: 1,
},
]),
),
Expand Down
2 changes: 1 addition & 1 deletion __tests__/plots/api/chart-emit-brush-highlight-x.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export function chartEmitBrushHighlightX(context) {
.interval()
.encode('x', 'date')
.encode('y', 'value')
.axis('x', { style: { labelTransform: 'rotate(90deg)' } })
.axis('x', { labelTransform: 'rotate(90deg)' })
.interaction('brushXHighlight', true);

const finished = chart.render();
Expand Down
2 changes: 1 addition & 1 deletion __tests__/plots/api/chart-emit-scrollbar-filter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export function chartEmitScrollbarFilter(context) {
])
.encode('x', 'date')
.encode('y', 'value')
.axis('x', { size: 80, style: { labelTransform: 'rotate(90deg)' } })
.axis('x', { size: 80, labelTransform: 'rotate(90deg)' })
.scrollbar('x', { ratio: 0.25 })
.scrollbar('y', { ratio: 0.75 });

Expand Down
2 changes: 1 addition & 1 deletion __tests__/plots/api/chart-emit-slider-filter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export function chartEmitSliderFilter(context) {
{ date: '2002-08', value: 109 },
],
encode: { x: 'date', y: 'value' },
axis: { x: { size: 100, style: { labelTransform: 'rotate(90)' } } },
axis: { x: { size: 100, labelTransform: 'rotate(90)' } },
slider: { x: {}, y: { labelFormatter: (d) => +d.toFixed(1) + '' } },
});

Expand Down
24 changes: 11 additions & 13 deletions __tests__/plots/interaction/cars3-line-brush-axis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,19 +45,17 @@ export function cars3LineBrushAxis(): G2Spec {
zIndex: 1,
line: true,
tick: true,
style: {
labelStroke: '#fff',
labelStrokeWidth: 5,
labelFontSize: 10,
labelStrokeLineJoin: 'round',
titleStroke: '#fff',
titleFontSize: 10,
titleStrokeWidth: 5,
titleStrokeLineJoin: 'round',
lineStroke: 'black',
tickStroke: 'black',
lineStrokeWidth: 1,
},
labelStroke: '#fff',
labelStrokeWidth: 5,
labelFontSize: 10,
labelStrokeLineJoin: 'round',
titleStroke: '#fff',
titleFontSize: 10,
titleStrokeWidth: 5,
titleStrokeLineJoin: 'round',
lineStroke: 'black',
tickStroke: 'black',
lineStrokeWidth: 1,
},
]),
),
Expand Down
26 changes: 12 additions & 14 deletions __tests__/plots/interaction/cars3-line-vertical-brush-axis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,20 +45,18 @@ export function cars3LineVerticalBrushAxis(): G2Spec {
line: true,
tick: true,
titlePosition: 'r',
style: {
labelStroke: '#fff',
labelStrokeWidth: 5,
labelFontSize: 10,
labelStrokeLineJoin: 'round',
titleStroke: '#fff',
titleFontSize: 10,
titleStrokeWidth: 5,
titleStrokeLineJoin: 'round',
titleTransform: 'translate(-50%, 0) rotate(-90)',
lineStroke: 'black',
tickStroke: 'black',
lineStrokeWidth: 1,
},
labelStroke: '#fff',
labelStrokeWidth: 5,
labelFontSize: 10,
labelStrokeLineJoin: 'round',
titleStroke: '#fff',
titleFontSize: 10,
titleStrokeWidth: 5,
titleStrokeLineJoin: 'round',
titleTransform: 'translate(-50%, 0) rotate(-90)',
lineStroke: 'black',
tickStroke: 'black',
lineStrokeWidth: 1,
},
]),
),
Expand Down
6 changes: 2 additions & 4 deletions __tests__/plots/interaction/indices-line-chart-facet.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,9 @@ export async function indicesLineChartFacet(): Promise<G2Spec> {
tooltip: {
series: true,
facet: true,
crosshairs: true,
body: false,
style: {
crosshairsStrokeWidth: 30,
},
crosshairs: true,
crosshairsStrokeWidth: 30,
},
},
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,7 @@ export async function indicesLineChartIndexSeries(): Promise<G2Spec> {
{
text: 'Symbol',
selector: 'last',
style: {
fontSize: 10,
},
fontSize: 10,
},
],
interaction: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export function moviesIntervalHighlightMultipleState(): G2Spec {
transform: [{ type: 'groupX', y: 'sum' }],
axis: {
y: { labelFormatter: '~s' },
x: { style: { labelTransform: 'rotate(90)' } },
x: { labelTransform: 'rotate(90)' },
},
encode: {
x: 'Major Genre',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function pointsPointRegressionQuadInset(): G2Spec {
scale: { x: { domain: [-4, 4] }, y: { domain: [-2, 14] } },
axis: { x: { title: false }, y: { title: false } },
interaction: {
tooltip: { body: false, style: { crosshairsStrokeWidth: 30 } },
tooltip: { body: false, crosshairsStrokeWidth: 30 },
},
children: [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function pointsPointRegressionQuadTranspose(): G2Spec {
scale: { x: { domain: [-4, 4] }, y: { domain: [-2, 14] } },
axis: { x: { title: false }, y: { title: false } },
interaction: {
tooltip: { body: false, style: { crosshairsStrokeWidth: 30 } },
tooltip: { body: false, crosshairsStrokeWidth: 30 },
},
coordinate: { transform: [{ type: 'transpose' }] },
children: [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function pointsPointRegressionQuad(): G2Spec {
scale: { x: { domain: [-4, 4] }, y: { domain: [-2, 14] } },
axis: { x: { title: false }, y: { title: false } },
interaction: {
tooltip: { body: false, style: { crosshairsStrokeWidth: 30 } },
tooltip: { body: false, crosshairsStrokeWidth: 30 },
},
children: [
{
Expand Down
8 changes: 3 additions & 5 deletions __tests__/plots/interaction/score-by-item-area-radar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export function scoreByItemAreaRadar(): G2Spec {
data: scoreByItem,
coordinate: { type: 'polar' },
axis: {
x: { style: { grid: true } },
x: { grid: true },
y: { zIndex: 1, title: false, direction: 'center' },
},
scale: {
Expand All @@ -19,10 +19,8 @@ export function scoreByItemAreaRadar(): G2Spec {
interaction: {
tooltip: {
body: false,
style: {
crosshairsLineDash: [4, 4],
crosshairsStrokeWidth: 10,
},
crosshairsLineDash: [4, 4],
crosshairsStrokeWidth: 10,
},
},
children: [
Expand Down
12 changes: 3 additions & 9 deletions __tests__/plots/interaction/weather-line-legend-mark.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,7 @@ export function weatherLineLegendMark(): G2Spec {
y: {
title: 'Temperature (°C)',
grid: false,
style: {
titleFill: '#EE6666',
},
titleFill: '#EE6666',
},
},
},
Expand All @@ -56,9 +54,7 @@ export function weatherLineLegendMark(): G2Spec {
y: {
title: 'Evaporation (°C)',
grid: null,
style: {
titleFill: '#5470C6',
},
titleFill: '#5470C6',
},
},
},
Expand All @@ -81,9 +77,7 @@ export function weatherLineLegendMark(): G2Spec {
position: 'right',
title: 'Precipitation (ml)',
grid: false,
style: {
titleFill: '#91CC75',
},
titleFill: '#91CC75',
},
},
},
Expand Down
16 changes: 6 additions & 10 deletions __tests__/plots/static/acme-crop-income-interval-connector.ts
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function acmeCropIncomeIntervalConnector() {
paddingTop: 40,
data: acmeCropIncome,
axis: {
x: { title: false, style: { labelTransform: 'rotate(-90)' } },
x: { title: false, labelTransform: 'rotate(-90)' },
y: { labelFormatter: '~s' },
},
legend: false,
Expand All @@ -50,10 +50,8 @@ export function acmeCropIncomeIntervalConnector() {
{
text: (d) => `${d.y2 - d.y1}`,
formatter: '~s',
style: {
fontSize: 10,
dy: 2,
},
fontSize: 10,
dy: 2,
},
],
style: {
Expand Down Expand Up @@ -84,11 +82,9 @@ export function acmeCropIncomeIntervalConnector() {
text: 'value',
formatter: '~s',
position: (d) => (d.value > 0 ? 'top' : 'bottom'),
style: {
textBaseline: (d) => (d.value > 0 ? 'bottom' : 'top'),
fontSize: 10,
dy: (d) => (d.value > 0 ? -4 : 4),
},
textBaseline: (d) => (d.value > 0 ? 'bottom' : 'top'),
fontSize: 10,
dy: (d) => (d.value > 0 ? -4 : 4),
},
],
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function alphabetIntervalAutoRotate(): G2Spec {
y: { labelFormatter: (d) => d + '0000' },
x: {
labelFormatter: (d) => d + '00',
style: { labelTransform: 'rotate(60)' },
labelTransform: 'rotate(60)',
},
},
viewStyle: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,10 @@ export function alphabetIntervalAutoPaddingStyle(): G2Spec {
axis: {
y: {
labelFormatter: (d) => d + '0000',
style: {
labelFontSize: (_, i) => 10 + i,
labelFill: 'steelblue',
},
labelFontSize: (_, i) => 10 + i,
labelFill: 'steelblue',
},
x: { labelFormatter: (d) => d + '0000', style: { labelFontSize: 20 } },
x: { labelFormatter: (d) => d + '0000', labelFontSize: 20 },
},
viewStyle: {
viewFill: '#4e79a7',
Expand Down
6 changes: 2 additions & 4 deletions __tests__/plots/static/alphabet-interval-axis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function alphabetIntervalAxis(): G2Spec {
},
axis: { y: { tickCount: 10 }, x: false },
},
{ type: 'axisX', title: 'Letter', style: { labelFontSize: 20 } },
{ type: 'axisX', title: 'Letter', labelFontSize: 20 },
{
type: 'axisY',
labelFormatter: '.0%',
Expand All @@ -37,9 +37,7 @@ export function alphabetIntervalAxis(): G2Spec {
range: [1, 0],
},
},
style: {
grid: false,
},
grid: false,
},
],
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,7 @@ export function alphabetIntervalLabelContrastReverse(): G2Spec {
palette: ['#00FF00', '#ffff00'], // Use full color string to avoid screenshot error.
},
],
style: {
fill: '#000',
},
fill: '#000',
},
],
};
Expand Down
Loading

0 comments on commit ddaa6b3

Please sign in to comment.