feat: new theme and set padding to auto

__tests__/integration/utils/renderSpec.ts

@@ -23,7 +23,7 @@ export async function renderSpec(
   };
   await new Promise<Canvas>((resolve) =>
     // @ts-ignore
-    renderFunction({ theme: 'classic', ...options }, context, resolve),
+    renderFunction(options, context, resolve),
   );
   return gCanvas;
 }

__tests__/main.ts

@@ -161,7 +161,7 @@ function createSpecRender(object) {
       const renderChart = mounted ? renderToMountedElement : render;
       before?.();
       const node = renderChart(
-        { theme: 'classic', ...options },
+        options,
         // @ts-ignore
         { canvas, library: stdlib() },
         () => after?.(),

__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-auto-fit.ts

@@ -15,7 +15,6 @@ export function chartAutoFit(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     autoFit: true,
     canvas,

__tests__/plots/api/chart-axis-label-formatter.ts

@@ -3,7 +3,7 @@ import { Chart } from '../../../src';
 export function chartAxisLabelFormatter(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.data([
     {

__tests__/plots/api/chart-change-data-empty.ts

@@ -4,13 +4,11 @@ export function chartChangeDataEmpty(context) {
   const { container, canvas } = context;
 
   const chart = new Chart({
-    theme: 'classic',
     container,
     canvas,
   });
 
   chart.options({
-    theme: 'classic',
     type: 'line',
     clip: true,
     data: {

__tests__/plots/api/chart-change-data-facet.ts

@@ -11,7 +11,7 @@ export function chartChangeDataFacet(context) {
   const div = document.createElement('div');
   container.appendChild(div);
 
-  const chart = new Chart({ theme: 'classic', container: div, canvas });
+  const chart = new Chart({ container: div, canvas });
 
   const view = chart
     .facetRect()

__tests__/plots/api/chart-change-data-legend.ts

@@ -4,7 +4,6 @@ export function chartChangeDataLegend(context) {
   const { container, canvas } = context;
 
   const chart = new Chart({
-    theme: 'classic',
     container,
     canvas,
   });
@@ -21,7 +20,6 @@ export function chartChangeDataLegend(context) {
   ];
 
   chart.options({
-    theme: 'classic',
     type: 'interval',
     data,
     encode: {

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

@@ -12,7 +12,7 @@ export function chartChangeSizePolar(context) {
   const div = document.createElement('div');
   container.appendChild(div);
 
-  const chart = new Chart({ theme: 'classic', container: div, canvas });
+  const chart = new Chart({ container: div, canvas });
 
   chart.options({
     type: 'view',

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

@@ -12,10 +12,8 @@ export function chartChangeSize(context) {
   container.appendChild(div);
 
   const chart = new Chart({
-    theme: 'classic',
     container: div,
     canvas,
-    padding: 'auto',
   });
 
   chart.data([

__tests__/plots/api/chart-emit-brush-highlight-axis-cross.ts

@@ -17,7 +17,6 @@ export function chartEmitBrushHighlightAxisCross(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });

__tests__/plots/api/chart-emit-brush-highlight-axis-horizontal.ts

@@ -17,7 +17,6 @@ export function chartEmitBrushHighlightAxisHorizontal(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });

__tests__/plots/api/chart-emit-brush-highlight-axis-vertical.ts

@@ -17,7 +17,6 @@ export function chartEmitBrushHighlightAxisVertical(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });

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

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

__tests__/plots/api/chart-emit-click-tooltip.ts

@@ -4,7 +4,6 @@ export function chartEmitClickTooltip(context) {
   const { container, canvas } = context;
 
   const chart = new Chart({
-    theme: 'classic',
     container: container,
     canvas,
   });

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

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

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

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

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

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

__tests__/plots/api/chart-emit-item-tooltip-hide-content.ts

@@ -18,7 +18,6 @@ export function chartEmitItemTooltipHideContent(context) {
   container.appendChild(p);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });

__tests__/plots/api/chart-emit-item-tooltip.ts

@@ -18,7 +18,6 @@ export function chartEmitItemTooltip(context) {
   container.appendChild(p);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });

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

@@ -17,7 +17,6 @@ export function chartEmitLegendFilter(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });

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

@@ -18,13 +18,11 @@ export function chartEmitLegendHighlight(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });
 
   chart.options({
-    paddingLeft: 60,
     type: 'interval',
     data: profit,
     axis: { y: { labelFormatter: '~s' } },

__tests__/plots/api/chart-emit-pie-tooltip.ts

@@ -18,7 +18,6 @@ export function chartEmitPieTooltip(context) {
   container.appendChild(p);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });

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

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

__tests__/plots/api/chart-emit-series-tooltip.ts

@@ -18,7 +18,6 @@ export function chartEmitSeriesTooltip(context) {
   container.appendChild(p);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
     canvas,
   });

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

@@ -17,10 +17,7 @@ export function chartEmitSliderFilter(context) {
   container.appendChild(wrapperDiv);
 
   const chart = new Chart({
-    theme: 'classic',
     container: wrapperDiv,
-    paddingLeft: 80,
-    paddingBottom: 120,
     canvas,
   });
 

__tests__/plots/api/chart-hom-mark.ts

@@ -25,7 +25,7 @@ function HOMMark(options) {
 export function chartHOMMark(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.data([
     { genre: 'Sports', sold: 275 },

__tests__/plots/api/chart-on-brush-filter.ts

@@ -4,7 +4,6 @@ export function chartOnBrushFilter(context) {
   const { container, canvas } = context;
 
   const chart = new Chart({
-    theme: 'classic',
     container,
     canvas,
   });

__tests__/plots/api/chart-on-component-click.ts

@@ -18,7 +18,7 @@ const componentNames = [
 export function chartOnComponentClick(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart
     .interval()

__tests__/plots/api/chart-on-focus-context.ts

@@ -8,7 +8,6 @@ export function chartOnFocusContext(context) {
   container.appendChild(focusContainer);
 
   const focusView = new Chart({
-    theme: 'classic',
     container: focusContainer,
     canvas: canvas1,
   });
@@ -30,7 +29,6 @@ export function chartOnFocusContext(context) {
   container.appendChild(contextContainer);
 
   const contextView = new Chart({
-    theme: 'classic',
     container: contextContainer,
     canvas: canvas2,
   });

__tests__/plots/api/chart-on-item-element.ts

@@ -3,7 +3,7 @@ import { Chart } from '../../../src';
 export function chartOnItemElement(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.data([
     { genre: 'Sports', sold: 275 },

__tests__/plots/api/chart-on-series-element.ts

@@ -4,7 +4,7 @@ import { temperatures } from '../../data/temperatures';
 export function chartOnSeriesElement(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.data(temperatures);
 

__tests__/plots/api/chart-on-text-click.ts

@@ -3,7 +3,7 @@ import { Chart } from '../../../src';
 export function chartOnTextClick(context) {
   const { container, canvas } = context;
 
-  const chart = new Chart({ theme: 'classic', container, canvas });
+  const chart = new Chart({ container, canvas });
 
   chart.text().style({
     x: 290, // 像素坐标