refactor(theme): change some theme attributes

antvis · Jul 13, 2023 · 307b14d · 307b14d
1 parent 08997ac
commit 307b14d
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 121 deletions.
diff --git a/__tests__/unit/api/chart.spec.ts b/__tests__/unit/api/chart.spec.ts
@@ -122,7 +122,7 @@ describe('Chart', () => {
       .coordinate({ type: 'polar' })
       .interaction('elementHighlight')
       .transform({ type: 'stackY' })
-      .theme({ defaultColor: 'red' });
+      .theme({ color: 'red' });
 
     expect(chart.options()).toEqual({
       type: 'view',
@@ -131,7 +131,7 @@ describe('Chart', () => {
       labelTransform: [{ type: 'overlapDodgeY' }],
       coordinate: { type: 'polar' },
       transform: [{ type: 'stackY' }],
-      theme: { defaultColor: 'red' },
+      theme: { color: 'red' },
       interaction: {
         elementHighlight: true,
       },

diff --git a/src/component/legendContinuous.ts b/src/component/legendContinuous.ts
@@ -150,7 +150,7 @@ function getLinearConfig(
   // in this view.
   const defaultColor = scales.color
     ? theme.legendContinuous.ribbonFill || 'black'
-    : theme.defaultColor;
+    : theme.color;
 
   const scale = colorScale || createColorScale(definedScale, defaultColor);
   const [min, max] = rangeOf(scale);

diff --git a/src/runtime/plot.ts b/src/runtime/plot.ts
@@ -741,7 +741,7 @@ async function plotView(
   const I = areaKeys.map((_, i) => i);
   const sizeKeys = ['a', 'margin', 'padding', 'inset'];
   const areaStyles = areaKeys.map((d) =>
-    maybeSubObject(Object.assign({}, theme, style), d),
+    maybeSubObject(Object.assign({}, theme.view, style), d),
   );
   const areaSizes = sizeKeys.map((d) => subObject(rest, d));
   const styleArea = (selection) =>
@@ -1375,10 +1375,10 @@ function getDefaultsStyle(
   defaultShape: string,
 ) {
   if (typeof mark !== 'string') return;
-  const { defaultColor } = theme;
+  const { color } = theme;
   const markTheme = theme[mark] || {};
   const shapeTheme = markTheme[shape] || markTheme[defaultShape];
-  return Object.assign({ color: defaultColor }, shapeTheme);
+  return Object.assign({ color }, shapeTheme);
 }
 
 function createAnimationFunction(

diff --git a/src/runtime/scale.ts b/src/runtime/scale.ts
@@ -410,7 +410,7 @@ function categoricalColors(
     'palette',
     library,
   );
-  const { defaultCategory10: c10, defaultCategory20: c20 } = theme;
+  const { category10: c10, category20: c20 } = theme;
   const defaultPalette = unique(values.flat()).length <= c10.length ? c10 : c20;
   const { palette = defaultPalette, offset } = options;
   // Built-in palettes have higher priority.

diff --git a/src/runtime/types/theme.ts b/src/runtime/types/theme.ts
@@ -59,13 +59,11 @@ type MarkTheme = NestUnion<'interval', ['rect', 'hollowRect'], ElementStyle> &
     }
   >;
 
+// @todo
 type InteractionTheme = {
-  interaction?: {
-    active: MarkTheme;
-    inactive: MarkTheme;
-    selected: MarkTheme;
-    disabled: MarkTheme;
-  };
+  tooltip?: Record<string, unknown>;
+  elementHighlight?: Record<string, unknown>;
+  elementSelect?: Record<string, unknown>;
 };
 
 type ComponentTheme = {
@@ -113,17 +111,15 @@ type AreaTheme = {
 };
 
 export type G2Theme = {
-  backgroundColor?: string;
-  defaultColor?: string;
-  defaultCategory10?: string;
-  defaultCategory20?: string;
-  defaultSize?: number;
-  elementActiveStroke?: string;
+  color?: string;
+  category10?: string;
+  category20?: string;
+  size?: number;
+  view?: WithPrefix<AreaTheme, 'view'> &
+    WithPrefix<AreaTheme, 'plot'> &
+    WithPrefix<AreaTheme, 'main'> &
+    WithPrefix<AreaTheme, 'content'>;
 } & MarkTheme &
   ComponentTheme &
   AnimationTheme &
-  InteractionTheme &
-  WithPrefix<AreaTheme, 'view'> &
-  WithPrefix<AreaTheme, 'plot'> &
-  WithPrefix<AreaTheme, 'main'> &
-  WithPrefix<AreaTheme, 'content'>;
+  InteractionTheme;
diff --git a/src/theme/academy.ts b/src/theme/academy.ts
@@ -10,14 +10,14 @@ const COLORS = {
 
 const BACKGROUND_COLOR = 'transparent';
 
+const DEFAULT_COLOR = '#4e79a7';
+
 export const Academy: TC<AcademyOptions> = (options) => {
-  const DEFAULT_COLOR = '#4e79a7';
   const defaultOptions: Theme = {
-    defaultColor: DEFAULT_COLOR,
-    defaultCategory10: 'tableau10',
-    defaultCategory20: 'tableau10',
-    defaultSize: 1,
-    elementActiveStroke: COLORS.BLACK,
+    color: DEFAULT_COLOR,
+    size: 1,
+    category10: 'tableau10',
+    category20: 'tableau10',
     enter: {
       duration: 300,
       fill: 'both',
@@ -33,12 +33,12 @@ export const Academy: TC<AcademyOptions> = (options) => {
       fill: 'both',
       delay: 0,
     },
-    // --- Theme of area style
-    viewFill: BACKGROUND_COLOR,
-    plotFill: 'transparent',
-    mainFill: 'transparent',
-    contentFill: 'transparent',
-    // --- Theme of mark shape
+    view: {
+      viewFill: BACKGROUND_COLOR,
+      plotFill: 'transparent',
+      mainFill: 'transparent',
+      contentFill: 'transparent',
+    },
     line: {
       line: {
         fill: '',
@@ -198,26 +198,6 @@ export const Academy: TC<AcademyOptions> = (options) => {
         endMarkerFillOpacity: 0.95,
       },
     },
-    interaction: {
-      active: {
-        line: {
-          line: { lineWidth: 3 },
-        },
-        interval: {
-          rect: { stroke: COLORS.BLACK },
-        },
-        area: {
-          area: { fillOpacity: 0.5 },
-        },
-      },
-      inactive: {
-        area: {
-          area: { fillOpacity: 0.3 },
-        },
-      },
-      selected: {},
-      disabled: {},
-    },
     axis: {
       arrow: false,
       gridLineDash: [0, 0],

diff --git a/src/theme/classic.ts b/src/theme/classic.ts
@@ -10,17 +10,17 @@ const COLORS = {
 
 const BACKGROUND_COLOR = 'transparent';
 
+const DEFAULT_COLOR = '#5B8FF9';
+
 /**
  * Default theme.
  */
 export const Classic: TC<ClassicOptions> = (options) => {
-  const DEFAULT_COLOR = '#5B8FF9';
   const defaultOptions: Theme = {
-    defaultColor: DEFAULT_COLOR,
-    defaultCategory10: 'category10',
-    defaultCategory20: 'category20',
-    defaultSize: 1,
-    elementActiveStroke: COLORS.BLACK,
+    color: DEFAULT_COLOR,
+    size: 1,
+    category10: 'category10',
+    category20: 'category20',
     enter: {
       duration: 300,
       fill: 'both',
@@ -36,12 +36,12 @@ export const Classic: TC<ClassicOptions> = (options) => {
       fill: 'both',
       delay: 0,
     },
-    // --- Theme of area style
-    viewFill: BACKGROUND_COLOR,
-    plotFill: 'transparent',
-    mainFill: 'transparent',
-    contentFill: 'transparent',
-    // --- Theme of mark shape
+    view: {
+      viewFill: BACKGROUND_COLOR,
+      plotFill: 'transparent',
+      mainFill: 'transparent',
+      contentFill: 'transparent',
+    },
     line: {
       line: {
         fill: '',
@@ -132,7 +132,6 @@ export const Classic: TC<ClassicOptions> = (options) => {
     },
     text: {
       text: {
-        // fill: COLORS.BLACK,fillOpacity: 0.65,
         fill: '#1D2129',
         fontSize: 12,
         strokeWidth: 0,
@@ -199,26 +198,6 @@ export const Classic: TC<ClassicOptions> = (options) => {
         endMarkerFillOpacity: 0.95,
       },
     },
-    interaction: {
-      active: {
-        line: {
-          line: { lineWidth: 3 },
-        },
-        interval: {
-          rect: { stroke: COLORS.BLACK },
-        },
-        area: {
-          area: { fillOpacity: 0.5 },
-        },
-      },
-      inactive: {
-        area: {
-          area: { fillOpacity: 0.3 },
-        },
-      },
-      selected: {},
-      disabled: {},
-    },
     axis: {
       arrow: false,
       gridLineDash: [0, 0],

diff --git a/src/theme/classicDark.ts b/src/theme/classicDark.ts
@@ -10,17 +10,17 @@ const COLORS = {
 
 const BACKGROUND_COLOR = '#141414';
 
+const DEFAULT_COLOR = '#5B8FF9';
+
 /**
  * Dark theme.
  */
 export const ClassicDark: TC<ClassicDarkOptions> = (options) => {
-  const DEFAULT_COLOR = '#5B8FF9';
   const defaultOptions: Theme = {
-    defaultColor: DEFAULT_COLOR,
-    defaultCategory10: 'category10',
-    defaultCategory20: 'category20',
-    defaultSize: 1,
-    elementActiveStroke: COLORS.BLACK,
+    color: DEFAULT_COLOR,
+    category10: 'category10',
+    category20: 'category20',
+    size: 1,
     enter: {
       duration: 300,
       fill: 'both',
@@ -36,12 +36,12 @@ export const ClassicDark: TC<ClassicDarkOptions> = (options) => {
       fill: 'both',
       delay: 0,
     },
-    // --- Theme of area style
-    viewFill: BACKGROUND_COLOR,
-    plotFill: 'transparent',
-    mainFill: 'transparent',
-    contentFill: 'transparent',
-    // --- Theme of mark shape
+    view: {
+      viewFill: BACKGROUND_COLOR,
+      plotFill: 'transparent',
+      mainFill: 'transparent',
+      contentFill: 'transparent',
+    },
     line: {
       line: {
         fill: '',
@@ -199,26 +199,6 @@ export const ClassicDark: TC<ClassicDarkOptions> = (options) => {
         endMarkerFillOpacity: 0.95,
       },
     },
-    interaction: {
-      active: {
-        line: {
-          line: { lineWidth: 3 },
-        },
-        interval: {
-          rect: { stroke: COLORS.BLACK },
-        },
-        area: {
-          area: { fillOpacity: 0.5 },
-        },
-      },
-      inactive: {
-        area: {
-          area: { fillOpacity: 0.3 },
-        },
-      },
-      selected: {},
-      disabled: {},
-    },
     axis: {
       arrow: false,
       gridLineDash: [0, 0],