feat: update classic theme

__tests__/plots/animation/events-interval-encode.ts

@@ -8,8 +8,6 @@ export function eventsIntervalEncode(): G2Spec {
   return {
     type: 'interval',
     width: 720,
-    paddingTop: 60,
-    paddingLeft: 100,
     data: events,
     coordinate: { transform: [{ type: 'transpose' }] },
     scale: {

__tests__/plots/animation/stocks-keyframe.ts

@@ -4,6 +4,7 @@ import { G2Spec } from '../../../src';
 
 const facetLine = (data) => ({
   type: 'facetRect',
+  paddingLeft: 60,
   data,
   encode: {
     y: 'symbol',
@@ -29,6 +30,7 @@ const facetLine = (data) => ({
 
 const facetArea = (data) => ({
   type: 'facetRect',
+  paddingLeft: 60,
   data,
   encode: {
     y: 'symbol',
@@ -141,7 +143,7 @@ const groupBar = (data) => ({
     key: (_, i) => i,
   },
   axis: {
-    x: { tickFilter: (d) => false },
+    x: { tickFilter: (_) => false },
   },
 });
 
@@ -157,7 +159,7 @@ const stackBar = (data) => ({
     key: (_, i) => i,
   },
   axis: {
-    x: { tickFilter: (d) => false },
+    x: { tickFilter: (_) => false },
   },
 });
 
@@ -186,6 +188,9 @@ const pie = (data) => ({
     color: 'symbol',
     key: 'symbol',
   },
+  legend: {
+    color: { layout: { justifyContent: 'center' } },
+  },
   style: {
     radius: 10,
   },
@@ -204,9 +209,10 @@ const rose = (data) => ({
   },
   scale: { x: { padding: 0 } },
   style: { radius: 10 },
-  axis: {
-    y: false,
+  legend: {
+    color: { layout: { justifyContent: 'center' } },
   },
+  axis: { y: false },
 });
 
 const keyframes = [
@@ -228,18 +234,12 @@ const keyframes = [
  */
 export async function stocksKeyframe(): Promise<G2Spec> {
   const data = await csv('data/stocks2.csv', autoType);
-  const paddingLeft = 50;
-  const paddingRight = 60;
-
+  // @ts-ignore
   return {
     type: 'timingKeyframe',
     width: 800,
     // @ts-ignore
-    children: keyframes.map((plot) => ({
-      ...plot(data),
-      paddingLeft,
-      paddingRight,
-    })),
+    children: keyframes.map((plot) => plot(data)),
   };
 }
 

__tests__/plots/api/chart-change-size.ts

@@ -15,7 +15,6 @@ export function chartChangeSize(context) {
     theme: 'classic',
     container: div,
     canvas,
-    padding: 'auto',
   });
 
   chart.data([

__tests__/plots/api/chart-emit-brush-highlight-x.ts

@@ -19,7 +19,6 @@ export function chartEmitBrushHighlightX(context) {
   const chart = new Chart({
     theme: 'classic',
     container: wrapperDiv,
-    paddingBottom: 120,
     width: 1000,
     canvas,
   });

__tests__/plots/api/chart-emit-element-highlight.ts

@@ -19,7 +19,6 @@ export function chartEmitElementHighlight(context) {
   const chart = new Chart({
     theme: 'classic',
     container: wrapperDiv,
-    padding: 'auto',
     canvas,
   });
 

__tests__/plots/api/chart-emit-element-select-single.ts

@@ -19,7 +19,6 @@ export function chartEmitElementSelectSingle(context) {
   const chart = new Chart({
     theme: 'classic',
     container: wrapperDiv,
-    padding: 'auto',
     canvas,
   });
 

__tests__/plots/api/chart-emit-element-select.ts

@@ -19,7 +19,6 @@ export function chartEmitElementSelect(context) {
   const chart = new Chart({
     theme: 'classic',
     container: wrapperDiv,
-    padding: 'auto',
     canvas,
   });
 

__tests__/plots/api/chart-emit-legend-highlight.ts

@@ -24,7 +24,6 @@ export function chartEmitLegendHighlight(context) {
   });
 
   chart.options({
-    paddingLeft: 60,
     type: 'interval',
     data: profit,
     axis: { y: { labelFormatter: '~s' } },

__tests__/plots/api/chart-emit-scrollbar-filter.ts

@@ -19,7 +19,6 @@ export function chartEmitScrollbarFilter(context) {
   const chart = new Chart({
     theme: 'classic',
     container: wrapperDiv,
-    paddingBottom: 120,
     width: 400,
     canvas,
     clip: true,

__tests__/plots/api/chart-emit-slider-filter.ts

@@ -19,8 +19,6 @@ export function chartEmitSliderFilter(context) {
   const chart = new Chart({
     theme: 'classic',
     container: wrapperDiv,
-    paddingLeft: 80,
-    paddingBottom: 120,
     canvas,
   });
 

__tests__/plots/api/chart-render-brush-end.ts

@@ -15,7 +15,6 @@ export function chartRenderBrushEnd(context) {
   const chart = new Chart({
     theme: 'classic',
     container: wrapperDiv,
-    paddingBottom: 120,
     width: 1000,
     canvas,
   });

__tests__/plots/interaction/cars3-line-brush-axis.ts

@@ -63,6 +63,7 @@ export function cars3LineBrushAxis(): G2Spec {
     ],
     interaction: {
       brushAxisHighlight: true,
+      tooltip: { series: false },
     },
   };
 }

__tests__/plots/interaction/countries-annotation-slider-filter.ts

@@ -6,7 +6,6 @@ export function countriesAnnotationSliderFilter(): G2Spec {
   return {
     type: 'view',
     theme: 'classic',
-    padding: 'auto',
     data: {
       type: 'fetch',
       value: 'data/countries.json',

__tests__/plots/interaction/indices-line-chart-index-series.ts

@@ -8,14 +8,9 @@ export async function indicesLineChartIndexSeries(): Promise<G2Spec> {
   return {
     type: 'line',
     width: 800,
-    paddingLeft: 50,
     data,
-    scale: {
-      y: { type: 'log' },
-    },
-    axis: {
-      y: { labelAutoRotate: false },
-    },
+    scale: { y: { type: 'log' } },
+    axis: { y: { labelAutoRotate: false } },
     legend: false,
     encode: {
       x: 'Date',

__tests__/plots/interaction/mock-area-slider-filter-label.ts

@@ -5,7 +5,6 @@ import { SLIDER_CLASS_NAME } from '../../../src/interaction/sliderFilter';
 export function mockAreaSliderFilterLabel(): G2Spec {
   return {
     type: 'area',
-    padding: 'auto',
     data: [
       { year: '1991', value: 15468 },
       { year: '1992', value: 16100 },

__tests__/plots/interaction/profit-interval-slider-filter.ts

@@ -7,7 +7,6 @@ export function profitIntervalSliderFilter(): G2Spec {
   return {
     type: 'interval',
     data: profit,
-    paddingLeft: 100,
     encode: {
       x: 'month',
       y: ['end', 'start'],

__tests__/plots/interaction/stateages-interval-normalized.ts

@@ -5,7 +5,6 @@ import { step } from './utils';
 export function stateAgesIntervalNormalized(): G2Spec {
   return {
     type: 'interval',
-    paddingLeft: 50,
     width: 800,
     height: 1000,
     data: {

__tests__/plots/interaction/unemployment-area-legend-filter-pages.ts

@@ -16,6 +16,7 @@ export function unemploymentAreaLegendFilterPages(): G2Spec {
       y: 'unemployed',
       color: 'industry',
     },
+    legend: { color: { maxRows: 1 } },
     interaction: { tooltip: false },
   };
 }

__tests__/plots/static/aapl-interval-date-encode-x.ts

@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function aaplIntervalDateEncodeX(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     height: 720,
     data: {
       type: 'fetch',

__tests__/plots/static/aapl-line-axis-y-hide.ts

@@ -4,7 +4,6 @@ export function aaplLineAxisYHide(): G2Spec {
   return {
     type: 'line',
     height: 200,
-    paddingLeft: 80,
     data: {
       type: 'fetch',
       value: 'data/aapl.csv',

__tests__/plots/static/aapl-line-basic-sample-label-filter.ts

@@ -27,7 +27,7 @@ export function aaplLineBasicSampleLabelFilter(): G2Spec {
         },
       },
       y: {
-        labelFilter: (d) => {
+        tickFilter: (d) => {
           return d % 100 === 0;
         },
       },

__tests__/plots/static/aapl-line-basic-transpose.ts

@@ -5,7 +5,6 @@ export function aaplLineBasicTranspose(): G2Spec {
     type: 'line',
     height: 640,
     width: 480,
-    paddingLeft: 50,
     data: {
       type: 'fetch',
       value: 'data/aapl.csv',

__tests__/plots/static/aapl-line-scrollbar.ts

@@ -3,7 +3,7 @@ import { G2Spec } from '../../../src';
 export function aaplLineScrollbar(): G2Spec {
   return {
     type: 'line',
-    paddingLeft: 80,
+    clip: true,
     data: {
       type: 'fetch',
       value: 'data/aapl.csv',

__tests__/plots/static/aapl-line-slider-transposed.ts

@@ -4,7 +4,6 @@ import { G2Spec } from '../../../src';
 export function aaplLineSliderTransposed(): G2Spec {
   return {
     type: 'line',
-    paddingLeft: 80,
     data: {
       type: 'fetch',
       value: 'data/aapl.csv',
@@ -15,8 +14,8 @@ export function aaplLineSliderTransposed(): G2Spec {
       y: 'close',
     },
     axis: {
-      x: { title: false, size: 28 },
-      y: { title: false, size: 36 },
+      x: { title: false },
+      y: { title: false },
     },
     slider: {
       x: {

__tests__/plots/static/aapl-line-slider.ts

@@ -14,8 +14,8 @@ export function aaplLineSlider(): G2Spec {
       y: 'close',
     },
     axis: {
-      x: { title: false, size: 28 },
-      y: { title: false, size: 36 },
+      x: { title: false },
+      y: { title: false },
     },
     slider: {
       x: {

__tests__/plots/static/acme-crop-income-interval-connector.ts

@@ -23,12 +23,10 @@ export function acmeCropIncomeIntervalConnector() {
 
   return {
     type: 'view',
-    paddingBottom: 100,
-    paddingLeft: 60,
     paddingTop: 40,
     data: acmeCropIncome,
     axis: {
-      x: { title: false, labelTransform: 'rotate(-90)' },
+      x: { labelTransform: 'rotate(-90)' },
       y: { labelFormatter: '~s' },
     },
     legend: false,

__tests__/plots/static/alphabet-interval-auto-padding-custom.ts

@@ -4,7 +4,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingCustom(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',

__tests__/plots/static/alphabet-interval-auto-padding-d3-format.ts

@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingD3Format(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',

__tests__/plots/static/alphabet-interval-auto-padding-label-hide.ts

@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingLabelHide(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',

__tests__/plots/static/alphabet-interval-auto-padding-max-ratio.ts

@@ -7,7 +7,6 @@ function appendZero(count) {
 export function alphabetIntervalAutoPaddingMaxRatio(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     margin: 50,
     inset: 10,
     transform: [{ type: 'sortX', by: 'y', reverse: true }],

__tests__/plots/static/alphabet-interval-auto-padding-no-title.ts

@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingNoTitle(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',

__tests__/plots/static/alphabet-interval-auto-padding-position.ts

@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingPosition(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',

__tests__/plots/static/alphabet-interval-auto-padding-rotate.ts

@@ -4,7 +4,6 @@ export function alphabetIntervalAutoRotate(): G2Spec {
   return {
     type: 'interval',
     width: 800,
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',

__tests__/plots/static/alphabet-interval-auto-padding-slider.ts

@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingSlider(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',

__tests__/plots/static/alphabet-interval-auto-padding-style.ts

@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPaddingStyle(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',

__tests__/plots/static/alphabet-interval-auto-padding.ts

@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAutoPadding(): G2Spec {
   return {
     type: 'interval',
-    padding: 'auto',
     transform: [{ type: 'sortX', by: 'y', reverse: true }],
     data: {
       type: 'fetch',

__tests__/plots/static/alphabet-interval-axis.ts

@@ -3,7 +3,6 @@ import { G2Spec } from '../../../src';
 export function alphabetIntervalAxis(): G2Spec {
   return {
     type: 'view',
-    padding: 'auto',
     children: [
       {
         type: 'interval',