@antv/g2
Version:
the Grammar of Graphics in Javascript
442 lines • 12.6 kB
JavaScript
const COLORS = {
BLACK: '#1D2129',
WHITE: '#fff',
STROKE: '#416180',
DEFAULT: '#5B8FF9',
BACKGROUND: 'transparent',
};
const PADDING = {
1: 8,
2: 12,
3: 20,
};
const ALPHA = {
90: 0.9,
65: 0.65,
45: 0.45,
25: 0.25,
10: 0.1,
};
/**
* Default theme.
*/
export const Classic = (options) => {
const defaultOptions = {
padding: 'auto',
margin: 16,
color: COLORS.DEFAULT,
size: 1,
category10: 'category10',
category20: 'category20',
enter: {
duration: 300,
fill: 'both',
delay: 0,
},
update: {
duration: 300,
fill: 'both',
delay: 0,
},
exit: {
duration: 300,
fill: 'both',
delay: 0,
},
view: {
viewFill: COLORS.BACKGROUND,
plotFill: 'transparent',
mainFill: 'transparent',
contentFill: 'transparent',
},
line: {
line: {
fill: '',
strokeOpacity: 1,
lineWidth: 1,
},
},
point: {
point: {
r: 3,
fillOpacity: 0.95,
lineWidth: 0,
},
hollow: {
r: 3,
strokeOpacity: 0.95,
lineWidth: 1,
},
plus: {
r: 3,
strokeOpacity: 0.95,
lineWidth: 3,
},
diamond: {
r: 3,
strokeOpacity: 0.95,
lineWidth: 1,
},
},
interval: {
rect: {
fillOpacity: 0.95,
},
hollow: {
fill: '',
strokeOpacity: 1,
lineWidth: 2,
},
},
area: {
area: {
fillOpacity: 0.85,
lineWidth: 0,
},
},
polygon: {
polygon: {
fillOpacity: 0.95,
},
},
cell: {
cell: {
fillOpacity: 0.95,
},
hollow: {
fill: '',
strokeOpacity: 1,
lineWidth: 2,
},
},
rect: {
rect: {
fillOpacity: 0.95,
},
hollow: {
fill: '',
strokeOpacity: 1,
lineWidth: 2,
},
},
link: {
link: {
fill: '',
strokeOpacity: 1,
},
},
vector: {
vector: {
fillOpacity: 1,
},
},
box: {
box: {
fillOpacity: 0.95,
stroke: COLORS.BLACK,
lineWidth: 1,
},
},
text: {
text: {
fill: '#1D2129',
fontSize: 12,
strokeWidth: 0,
connectorStroke: COLORS.STROKE,
connectorStrokeOpacity: 0.45,
connectorLineWidth: 1,
backgroundFill: COLORS.STROKE,
backgroundFillOpacity: 0.15,
backgroundPadding: [2, 4],
startMarkerSymbol: 'circle',
startMarkerSize: 4,
endMarkerSymbol: 'circle',
endMarkerSize: 4,
},
badge: {
fill: '#1D2129',
fillOpacity: 0.65,
strokeWidth: 0,
fontSize: 10,
textAlign: 'center',
textBaseline: 'middle',
markerFill: COLORS.STROKE,
markerFillOpacity: 0.25,
markerStrokeOpacity: 0,
},
},
lineX: {
line: {
stroke: COLORS.STROKE,
strokeOpacity: 0.45,
lineWidth: 1,
},
},
lineY: {
line: {
stroke: COLORS.STROKE,
strokeOpacity: 0.45,
lineWidth: 1,
},
},
rangeX: {
range: {
fill: COLORS.STROKE,
fillOpacity: 0.15,
lineWidth: 0,
},
},
rangeY: {
range: {
fill: COLORS.STROKE,
fillOpacity: 0.15,
lineWidth: 0,
},
},
connector: {
connector: {
stroke: COLORS.STROKE,
strokeOpacity: 0.45,
lineWidth: 1,
connectLength1: 12,
endMarker: true,
endMarkerSize: 6,
endMarkerFill: COLORS.STROKE,
endMarkerFillOpacity: 0.95,
},
},
axis: {
arrow: false,
gridLineDash: [3, 4],
gridLineWidth: 0.5,
gridStroke: COLORS.BLACK,
gridStrokeOpacity: ALPHA[10],
labelAlign: 'horizontal',
labelFill: COLORS.BLACK,
labelOpacity: ALPHA[45],
labelFontSize: 12,
labelFontWeight: 'normal',
labelSpacing: PADDING[1],
line: false,
lineLineWidth: 0.5,
lineStroke: COLORS.BLACK,
lineStrokeOpacity: ALPHA[45],
tickLength: 4,
tickLineWidth: 1,
tickStroke: COLORS.BLACK,
tickOpacity: ALPHA[45],
titleFill: COLORS.BLACK,
titleOpacity: ALPHA[90],
titleFontSize: 12,
titleFontWeight: 'normal',
titleSpacing: 12,
titleTransformOrigin: 'center',
lineArrowOffset: 6,
lineArrowSize: 6,
},
axisTop: {
gridDirection: 'positive',
labelDirection: 'negative',
tickDirection: 'negative',
titlePosition: 'top',
titleSpacing: 12,
titleTextBaseline: 'middle',
},
axisBottom: {
gridDirection: 'negative',
labelDirection: 'positive',
labelAutoRotate: true,
tickDirection: 'positive',
titlePosition: 'bottom',
titleSpacing: 12,
titleTextBaseline: 'bottom',
},
axisLeft: {
gridDirection: 'positive',
labelAutoRotate: false,
labelDirection: 'negative',
labelSpacing: 4,
tickDirection: 'negative',
titlePosition: 'left',
titleSpacing: 12,
titleTextBaseline: 'middle',
titleDirection: 'vertical',
titleTransformOrigin: 'center',
},
axisRight: {
gridDirection: 'negative',
labelDirection: 'positive',
labelSpacing: 4,
tickDirection: 'positive',
titlePosition: 'right',
labelAutoRotate: false,
titleSpacing: 12,
titleTextBaseline: 'top',
titleDirection: 'vertical',
titleTransformOrigin: 'center',
},
axisLinear: {
girdClosed: true,
gridConnect: 'arc',
gridDirection: 'negative',
gridType: 'surround',
titlePosition: 'top',
titleSpacing: 0,
},
axisArc: {
title: false,
titlePosition: 'inner',
line: false,
tick: true,
labelSpacing: 4,
},
axisRadar: {
girdClosed: true,
gridStrokeOpacity: 0.3,
gridType: 'surround',
label: false,
tick: false,
titlePosition: 'start',
},
legendCategory: {
backgroundFill: 'transparent',
itemBackgroundFill: 'transparent',
itemLabelFill: COLORS.BLACK,
itemLabelFillOpacity: ALPHA[90],
itemLabelFontSize: 12,
itemLabelFontWeight: 'normal',
itemMarkerFillOpacity: 1,
itemMarkerSize: 8,
itemSpacing: [PADDING[1], PADDING[1]],
itemValueFill: COLORS.BLACK,
itemValueFillOpacity: 0.65,
itemValueFontSize: 12,
itemValueFontWeight: 'normal',
navButtonFill: COLORS.BLACK,
navButtonFillOpacity: 0.65,
navPageNumFill: COLORS.BLACK,
navPageNumFillOpacity: 0.45,
navPageNumFontSize: 12,
padding: 8,
title: false,
titleFill: COLORS.BLACK,
titleFillOpacity: 0.65,
titleFontSize: 12,
titleFontWeight: 'normal',
titleSpacing: 4,
tickStroke: COLORS.BLACK,
tickStrokeOpacity: 0.25,
rowPadding: PADDING[1],
colPadding: PADDING[2],
maxRows: 3,
maxCols: 3,
},
legendContinuous: {
handleHeight: 12,
handleLabelFill: COLORS.BLACK,
handleLabelFillOpacity: ALPHA[45],
handleLabelFontSize: 12,
handleLabelFontWeight: 'normal',
handleMarkerFill: COLORS.BLACK,
handleMarkerFillOpacity: 0.6,
handleMarkerLineWidth: 1,
handleMarkerStroke: COLORS.BLACK,
handleMarkerStrokeOpacity: 0.25,
handleWidth: 10,
labelFill: COLORS.BLACK,
labelFillOpacity: ALPHA[45],
labelFontSize: 12,
labelFontWeight: 'normal',
labelSpacing: 3,
tick: true,
tickLength: 12,
ribbonSize: 12,
ribbonFill: '#aaa',
handle: true,
handleLabel: false,
handleShape: 'slider',
handleIconSize: 12 / 1.8,
indicator: false,
titleFontSize: 12,
titleSpacing: 4,
titleFontWeight: 'normal',
titleFillOpacity: ALPHA[90],
tickStroke: COLORS.BLACK,
tickStrokeOpacity: ALPHA[45],
},
label: {
fill: COLORS.BLACK,
fillOpacity: 0.65,
fontSize: 12,
fontWeight: 'normal',
stroke: undefined,
offset: 12,
connectorStroke: COLORS.BLACK,
connectorStrokeOpacity: 0.45,
connectorLineWidth: 1,
connectorLength: 12,
connectorLength2: 8,
connectorDistance: 4,
},
innerLabel: {
fill: COLORS.WHITE,
fontSize: 12,
fillOpacity: 0.85,
fontWeight: 'normal',
stroke: undefined,
offset: 0,
},
htmlLabel: {
fontSize: 12,
opacity: 0.65,
color: COLORS.BLACK,
fontWeight: 'normal',
},
slider: {
trackSize: 16,
trackFill: COLORS.STROKE,
trackFillOpacity: 1,
selectionFill: COLORS.DEFAULT,
selectionFillOpacity: 0.15,
handleIconSize: 10,
handleIconFill: '#f7f7f7',
handleIconFillOpacity: 1,
handleIconStroke: COLORS.BLACK,
handleIconStrokeOpacity: 0.25,
handleIconLineWidth: 1,
handleIconRadius: 2,
handleLabelFill: COLORS.BLACK,
handleLabelFillOpacity: 0.45,
handleLabelFontSize: 12,
handleLabelFontWeight: 'normal',
},
scrollbar: {
padding: [0, 0, 0, 0],
trackSize: 6,
isRound: true,
slidable: true,
scrollable: true,
trackFill: '#e5e5e5',
trackFillOpacity: 0,
thumbFill: '#000',
thumbFillOpacity: 0.15,
thumbHighlightedFillOpacity: 0.2,
},
title: {
spacing: 8,
titleFill: COLORS.BLACK,
titleFillOpacity: ALPHA[90],
titleFontSize: 16,
titleFontWeight: 'bold',
titleTextBaseline: 'top',
subtitleFill: COLORS.BLACK,
subtitleFillOpacity: ALPHA[65],
subtitleFontSize: 12,
subtitleFontWeight: 'normal',
subtitleTextBaseline: 'top',
},
};
return Object.assign({}, defaultOptions, options);
};
Classic.props = {};
//# sourceMappingURL=classic.js.map