refactor(style): remove component.style, label.style

antvis · Jul 19, 2023 · 050f1ab · 050f1ab
1 parent 683d529
commit 050f1ab
Show file tree

Hide file tree

Showing 87 changed files with 365 additions and 535 deletions.
diff --git a/__tests__/integration/snapshots/static/vennBasic.png b/__tests__/integration/snapshots/static/vennBasic.png
diff --git a/__tests__/integration/snapshots/static/vennHollow.png b/__tests__/integration/snapshots/static/vennHollow.png
diff --git a/__tests__/plots/animation/population-interval-rose-keyframe.ts b/__tests__/plots/animation/population-interval-rose-keyframe.ts
@@ -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)',
           },
         },
       },

diff --git a/__tests__/plots/api/chart-axis-label-formatter.ts b/__tests__/plots/api/chart-axis-label-formatter.ts
@@ -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',

diff --git a/__tests__/plots/api/chart-emit-brush-highlight-axis-horizontal.ts b/__tests__/plots/api/chart-emit-brush-highlight-axis-horizontal.ts
@@ -68,9 +68,7 @@ export function chartEmitBrushHighlightAxisHorizontal(context) {
         layout: { justifyContent: 'center' },
         size: 50,
         length: 300,
-        style: {
-          labelSpacing: 0,
-        },
+        labelSpacing: 0,
       },
     },
     state: {
@@ -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,
         },
       ]),
     ),

diff --git a/__tests__/plots/api/chart-emit-brush-highlight-axis-vertical.ts b/__tests__/plots/api/chart-emit-brush-highlight-axis-vertical.ts
@@ -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,
             },
           ]),
         ),

diff --git a/__tests__/plots/api/chart-emit-brush-highlight-x.ts b/__tests__/plots/api/chart-emit-brush-highlight-x.ts
@@ -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();

diff --git a/__tests__/plots/api/chart-emit-scrollbar-filter.ts b/__tests__/plots/api/chart-emit-scrollbar-filter.ts
@@ -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 });
 

diff --git a/__tests__/plots/api/chart-emit-slider-filter.ts b/__tests__/plots/api/chart-emit-slider-filter.ts
@@ -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) + '' } },
   });
 

diff --git a/__tests__/plots/interaction/cars3-line-brush-axis.ts b/__tests__/plots/interaction/cars3-line-brush-axis.ts
@@ -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,
             },
           ]),
         ),

diff --git a/__tests__/plots/interaction/cars3-line-vertical-brush-axis.ts b/__tests__/plots/interaction/cars3-line-vertical-brush-axis.ts
@@ -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,
             },
           ]),
         ),

diff --git a/__tests__/plots/interaction/indices-line-chart-facet.ts b/__tests__/plots/interaction/indices-line-chart-facet.ts
@@ -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,
       },
     },
   };

diff --git a/__tests__/plots/interaction/indices-line-chart-index-series.ts b/__tests__/plots/interaction/indices-line-chart-index-series.ts
@@ -27,9 +27,7 @@ export async function indicesLineChartIndexSeries(): Promise<G2Spec> {
       {
         text: 'Symbol',
         selector: 'last',
-        style: {
-          fontSize: 10,
-        },
+        fontSize: 10,
       },
     ],
     interaction: {

diff --git a/__tests__/plots/interaction/movies-interval-highlight-multiple-state.ts b/__tests__/plots/interaction/movies-interval-highlight-multiple-state.ts
@@ -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',

diff --git a/__tests__/plots/interaction/points-point-regression-quad-inset.ts b/__tests__/plots/interaction/points-point-regression-quad-inset.ts
@@ -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: [
       {

diff --git a/__tests__/plots/interaction/points-point-regression-quad-transpose.ts b/__tests__/plots/interaction/points-point-regression-quad-transpose.ts
@@ -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: [

diff --git a/__tests__/plots/interaction/points-point-regression-quad.ts b/__tests__/plots/interaction/points-point-regression-quad.ts
@@ -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: [
       {

diff --git a/__tests__/plots/interaction/score-by-item-area-radar.ts b/__tests__/plots/interaction/score-by-item-area-radar.ts
@@ -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: {
@@ -19,10 +19,8 @@ export function scoreByItemAreaRadar(): G2Spec {
     interaction: {
       tooltip: {
         body: false,
-        style: {
-          crosshairsLineDash: [4, 4],
-          crosshairsStrokeWidth: 10,
-        },
+        crosshairsLineDash: [4, 4],
+        crosshairsStrokeWidth: 10,
       },
     },
     children: [

diff --git a/__tests__/plots/interaction/weather-line-legend-mark.ts b/__tests__/plots/interaction/weather-line-legend-mark.ts
@@ -33,9 +33,7 @@ export function weatherLineLegendMark(): G2Spec {
           y: {
             title: 'Temperature (°C)',
             grid: false,
-            style: {
-              titleFill: '#EE6666',
-            },
+            titleFill: '#EE6666',
           },
         },
       },
@@ -56,9 +54,7 @@ export function weatherLineLegendMark(): G2Spec {
           y: {
             title: 'Evaporation (°C)',
             grid: null,
-            style: {
-              titleFill: '#5470C6',
-            },
+            titleFill: '#5470C6',
           },
         },
       },
@@ -81,9 +77,7 @@ export function weatherLineLegendMark(): G2Spec {
             position: 'right',
             title: 'Precipitation (ml)',
             grid: false,
-            style: {
-              titleFill: '#91CC75',
-            },
+            titleFill: '#91CC75',
           },
         },
       },

diff --git a/__tests__/plots/static/acme-crop-income-interval-connector.ts b/__tests__/plots/static/acme-crop-income-interval-connector.ts
@@ -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,
@@ -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: {
@@ -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),
           },
         ],
       },

diff --git a/__tests__/plots/static/alphabet-interval-auto-padding-rotate.ts b/__tests__/plots/static/alphabet-interval-auto-padding-rotate.ts
@@ -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: {

diff --git a/__tests__/plots/static/alphabet-interval-auto-padding-style.ts b/__tests__/plots/static/alphabet-interval-auto-padding-style.ts
@@ -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',

diff --git a/__tests__/plots/static/alphabet-interval-axis.ts b/__tests__/plots/static/alphabet-interval-axis.ts
@@ -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%',
@@ -37,9 +37,7 @@ export function alphabetIntervalAxis(): G2Spec {
             range: [1, 0],
           },
         },
-        style: {
-          grid: false,
-        },
+        grid: false,
       },
     ],
   };

diff --git a/__tests__/plots/static/alphabet-interval-label-contrast-reverse.ts b/__tests__/plots/static/alphabet-interval-label-contrast-reverse.ts
@@ -28,9 +28,7 @@ export function alphabetIntervalLabelContrastReverse(): G2Spec {
             palette: ['#00FF00', '#ffff00'], // Use full color string to avoid screenshot error.
           },
         ],
-        style: {
-          fill: '#000',
-        },
+        fill: '#000',
       },
     ],
   };