diff --git a/__tests__/unit/api/chart.spec.ts b/__tests__/unit/api/chart.spec.ts index aace6ba493..9ebb3bbf9c 100644 --- 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 index f5cccc6977..ae3fd6ae89 100644 --- 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 index 17d22dc013..78c78f62b4 100644 --- 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 index 529d8fd179..e595ab6697 100644 --- 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 index 33b8ff6680..e4e7a14e96 100644 --- 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; + elementHighlight?: Record; + elementSelect?: Record; }; 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 & + WithPrefix & + WithPrefix & + WithPrefix; } & MarkTheme & ComponentTheme & AnimationTheme & - InteractionTheme & - WithPrefix & - WithPrefix & - WithPrefix & - WithPrefix; + InteractionTheme; diff --git a/src/theme/academy.ts b/src/theme/academy.ts index 6641b867a3..667147417e 100644 --- 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 = (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 = (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 = (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 index 3706a8457f..4bf30e43ab 100644 --- 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 = (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 = (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 = (options) => { }, text: { text: { - // fill: COLORS.BLACK,fillOpacity: 0.65, fill: '#1D2129', fontSize: 12, strokeWidth: 0, @@ -199,26 +198,6 @@ export const Classic: TC = (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 index dee00bfa48..21428cb791 100644 --- 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 = (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 = (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 = (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],