@antv/g2
Version:
the Grammar of Graphics in Javascript
413 lines • 11.9 kB
JavaScript
const COLORS = {
BLACK: '#fff',
WHITE: '#000',
STROKE: '#416180',
};
const BACKGROUND_COLOR = '#141414';
const DEFAULT_COLOR = '#5B8FF9';
/**
* Dark theme.
*/
export const ClassicDark = (options) => {
const defaultOptions = {
color: DEFAULT_COLOR,
category10: 'category10',
category20: 'category20',
size: 1,
enter: {
duration: 300,
fill: 'both',
delay: 0,
},
update: {
duration: 300,
fill: 'both',
delay: 0,
},
exit: {
duration: 300,
fill: 'both',
delay: 0,
},
view: {
viewFill: BACKGROUND_COLOR,
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: COLORS.BLACK,
fillOpacity: 0.65,
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: [0, 0],
gridLineWidth: 0.5,
gridStroke: COLORS.BLACK,
gridStrokeOpacity: 0.05,
labelAlign: 'horizontal',
labelFill: COLORS.BLACK,
labelFillOpacity: 0.65,
labelFontSize: 12,
labelFontWeight: 'lighter',
labelSpacing: 8,
lineLineWidth: 0.5,
lineStroke: COLORS.BLACK,
lineStrokeOpacity: 0.45,
tickLength: 4,
tickLineWidth: 1,
tickStroke: COLORS.BLACK,
tickStrokeOpacity: 0.25,
titleFill: COLORS.BLACK,
titleFillOpacity: 0.65,
titleFontSize: 12,
titleFontWeight: 'normal',
titleSpacing: 12,
titleTransformOrigin: 'center',
},
axisTop: {
gridDirection: 'positive',
labelDirection: 'negative',
labelSpacing: 4,
tickDirection: 'negative',
titlePosition: 'top',
titleSpacing: 0,
titleTextBaseline: 'middle',
},
axisBottom: {
gridDirection: 'negative',
labelDirection: 'positive',
labelSpacing: 4,
tickDirection: 'positive',
titlePosition: 'bottom',
titleSpacing: 10,
titleTextBaseline: 'bottom',
},
axisLeft: {
gridDirection: 'positive',
labelAutoRotate: false,
labelDirection: 'negative',
labelSpacing: 4,
tickDirection: 'negative',
titlePosition: 'left',
titleSpacing: 10,
titleTextBaseline: 'middle',
titleDirection: 'vertical',
titleTransformOrigin: 'center',
},
axisRight: {
gridDirection: 'negative',
labelDirection: 'positive',
labelSpacing: 4,
tickDirection: 'positive',
titlePosition: 'right',
titleSpacing: 0,
titleTextBaseline: 'top',
titleDirection: 'vertical',
titleTransformOrigin: 'center',
},
axisLinear: {
girdClosed: true,
gridConnect: 'arc',
gridDirection: 'negative',
gridType: 'surround',
titlePosition: 'top',
titleTextBaseline: 'bottom',
},
axisRadar: {
girdClosed: true,
gridStrokeOpacity: 0.3,
gridType: 'surround',
label: false,
tick: false,
titlePosition: 'start',
},
axisArc: {
title: false,
titlePosition: 'inner',
line: false,
tick: true,
labelSpacing: 4,
},
legendCategory: {
backgroundFill: 'transparent',
itemBackgroundFill: 'transparent',
itemLabelFill: COLORS.BLACK,
itemLabelFillOpacity: 0.65,
itemLabelFontSize: 12,
itemLabelFontWeight: 'lighter',
itemMarkerFillOpacity: 1,
itemMarkerSize: 8,
itemSpacing: [5, 8],
itemValueFill: COLORS.BLACK,
itemValueFillOpacity: 0.65,
itemValueFontSize: 12,
itemValueFontWeight: 'lighter',
navButtonFill: COLORS.BLACK,
navButtonFillOpacity: 0.45,
navPageNumFill: COLORS.BLACK,
navPageNumFillOpacity: 0.45,
navPageNumFontSize: 12,
padding: 8,
title: true,
titleFill: COLORS.BLACK,
titleFillOpacity: 0.65,
titleFontSize: 12,
titleFontWeight: 'normal',
titleSpacing: 4,
tickStroke: COLORS.BLACK,
tickStrokeOpacity: 0.25,
rowPadding: 0,
colPadding: 8,
},
legendContinuous: {
handleHeight: 12,
handleLabelFill: COLORS.BLACK,
handleLabelFillOpacity: 0.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: 0.45,
labelFontSize: 12,
labelFontWeight: 'lighter',
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: 0.65,
tickStroke: COLORS.BLACK,
tickStrokeOpacity: 0.25,
// [todo] legend rail
},
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: DEFAULT_COLOR,
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: {},
title: {
titleFill: COLORS.BLACK,
titleFillOpacity: 0.85,
titleFontSize: 14,
titleFontWeight: 'bold',
titleTextBaseline: 'top',
subtitleFill: COLORS.BLACK,
subtitleFillOpacity: 0.65,
subtitleFontSize: 12,
subtitleFontWeight: 'normal',
subtitleTextBaseline: 'top',
},
};
return Object.assign({}, defaultOptions, options);
};
ClassicDark.props = {};
//# sourceMappingURL=classicDark.js.map