classicDark.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  1. const COLORS = {
  2. BLACK: '#fff',
  3. WHITE: '#000',
  4. STROKE: '#416180',
  5. };
  6. const BACKGROUND_COLOR = '#141414';
  7. /**
  8. * Dark theme.
  9. */
  10. export const ClassicDark = (options) => {
  11. const DEFAULT_COLOR = '#5B8FF9';
  12. const defaultOptions = {
  13. defaultColor: DEFAULT_COLOR,
  14. defaultCategory10: 'category10',
  15. defaultCategory20: 'category20',
  16. defaultSize: 1,
  17. elementActiveStroke: COLORS.BLACK,
  18. enter: {
  19. duration: 300,
  20. fill: 'both',
  21. delay: 0,
  22. },
  23. update: {
  24. duration: 300,
  25. fill: 'both',
  26. delay: 0,
  27. },
  28. exit: {
  29. duration: 300,
  30. fill: 'both',
  31. delay: 0,
  32. },
  33. // --- Theme of area style
  34. viewFill: BACKGROUND_COLOR,
  35. plotFill: 'transparent',
  36. mainFill: 'transparent',
  37. contentFill: 'transparent',
  38. // --- Theme of mark shape
  39. line: {
  40. line: {
  41. fill: '',
  42. strokeOpacity: 1,
  43. lineWidth: 1,
  44. },
  45. },
  46. point: {
  47. point: {
  48. r: 3,
  49. fillOpacity: 0.95,
  50. lineWidth: 0,
  51. },
  52. hollow: {
  53. r: 3,
  54. strokeOpacity: 0.95,
  55. lineWidth: 1,
  56. },
  57. plus: {
  58. r: 3,
  59. strokeOpacity: 0.95,
  60. lineWidth: 3,
  61. },
  62. diamond: {
  63. r: 3,
  64. strokeOpacity: 0.95,
  65. lineWidth: 1,
  66. },
  67. },
  68. interval: {
  69. rect: {
  70. fillOpacity: 0.95,
  71. },
  72. hollow: {
  73. fill: '',
  74. strokeOpacity: 1,
  75. lineWidth: 2,
  76. },
  77. },
  78. area: {
  79. area: {
  80. fillOpacity: 0.85,
  81. lineWidth: 0,
  82. },
  83. },
  84. polygon: {
  85. polygon: {
  86. fillOpacity: 0.95,
  87. },
  88. },
  89. cell: {
  90. cell: {
  91. fillOpacity: 0.95,
  92. },
  93. hollow: {
  94. fill: '',
  95. strokeOpacity: 1,
  96. lineWidth: 2,
  97. },
  98. },
  99. rect: {
  100. rect: {
  101. fillOpacity: 0.95,
  102. },
  103. hollow: {
  104. fill: '',
  105. strokeOpacity: 1,
  106. lineWidth: 2,
  107. },
  108. },
  109. link: {
  110. link: {
  111. fill: '',
  112. strokeOpacity: 1,
  113. },
  114. },
  115. vector: {
  116. vector: {
  117. fillOpacity: 1,
  118. },
  119. },
  120. box: {
  121. box: {
  122. fillOpacity: 0.95,
  123. stroke: COLORS.BLACK,
  124. lineWidth: 1,
  125. },
  126. },
  127. text: {
  128. text: {
  129. fill: COLORS.BLACK,
  130. fillOpacity: 0.65,
  131. fontSize: 12,
  132. strokeWidth: 0,
  133. connectorStroke: COLORS.STROKE,
  134. connectorStrokeOpacity: 0.45,
  135. connectorLineWidth: 1,
  136. backgroundFill: COLORS.STROKE,
  137. backgroundFillOpacity: 0.15,
  138. backgroundPadding: [2, 4],
  139. startMarkerSymbol: 'circle',
  140. startMarkerSize: 4,
  141. endMarkerSymbol: 'circle',
  142. endMarkerSize: 4,
  143. },
  144. badge: {
  145. fill: '#1D2129',
  146. fillOpacity: 0.65,
  147. strokeWidth: 0,
  148. fontSize: 10,
  149. textAlign: 'center',
  150. textBaseline: 'middle',
  151. markerFill: COLORS.STROKE,
  152. markerFillOpacity: 0.25,
  153. markerStrokeOpacity: 0,
  154. },
  155. },
  156. lineX: {
  157. line: {
  158. stroke: COLORS.STROKE,
  159. strokeOpacity: 0.45,
  160. lineWidth: 1,
  161. },
  162. },
  163. lineY: {
  164. line: {
  165. stroke: COLORS.STROKE,
  166. strokeOpacity: 0.45,
  167. lineWidth: 1,
  168. },
  169. },
  170. rangeX: {
  171. range: {
  172. fill: COLORS.STROKE,
  173. fillOpacity: 0.15,
  174. lineWidth: 0,
  175. },
  176. },
  177. rangeY: {
  178. range: {
  179. fill: COLORS.STROKE,
  180. fillOpacity: 0.15,
  181. lineWidth: 0,
  182. },
  183. },
  184. connector: {
  185. connector: {
  186. stroke: COLORS.STROKE,
  187. strokeOpacity: 0.45,
  188. lineWidth: 1,
  189. connectLength1: 12,
  190. endMarker: true,
  191. endMarkerSize: 6,
  192. endMarkerFill: COLORS.STROKE,
  193. endMarkerFillOpacity: 0.95,
  194. },
  195. },
  196. interaction: {
  197. active: {
  198. line: {
  199. line: { lineWidth: 3 },
  200. },
  201. interval: {
  202. rect: { stroke: COLORS.BLACK },
  203. },
  204. area: {
  205. area: { fillOpacity: 0.5 },
  206. },
  207. },
  208. inactive: {
  209. area: {
  210. area: { fillOpacity: 0.3 },
  211. },
  212. },
  213. selected: {},
  214. disabled: {},
  215. },
  216. axis: {
  217. arrow: false,
  218. gridLineDash: [0, 0],
  219. gridLineWidth: 0.5,
  220. gridStroke: COLORS.BLACK,
  221. gridStrokeOpacity: 0.05,
  222. labelAlign: 'horizontal',
  223. labelFill: COLORS.BLACK,
  224. labelFillOpacity: 0.65,
  225. labelFontSize: 12,
  226. labelFontWeight: 'lighter',
  227. labelSpacing: 8,
  228. lineLineWidth: 0.5,
  229. lineStroke: COLORS.BLACK,
  230. lineStrokeOpacity: 0.45,
  231. tickLength: 4,
  232. tickLineWidth: 1,
  233. tickStroke: COLORS.BLACK,
  234. tickStrokeOpacity: 0.25,
  235. titleFill: COLORS.BLACK,
  236. titleFillOpacity: 0.65,
  237. titleFontSize: 12,
  238. titleFontWeight: 'normal',
  239. titleSpacing: 12,
  240. titleTransformOrigin: 'center',
  241. },
  242. axisTop: {
  243. gridDirection: 'positive',
  244. labelDirection: 'negative',
  245. labelSpacing: 4,
  246. tickDirection: 'negative',
  247. titlePosition: 'top',
  248. titleSpacing: 0,
  249. titleTextBaseline: 'middle',
  250. },
  251. axisBottom: {
  252. gridDirection: 'negative',
  253. labelDirection: 'positive',
  254. labelSpacing: 4,
  255. tickDirection: 'positive',
  256. titlePosition: 'bottom',
  257. titleSpacing: 10,
  258. titleTextBaseline: 'bottom',
  259. },
  260. axisLeft: {
  261. gridDirection: 'negative',
  262. labelAutoRotate: false,
  263. labelDirection: 'positive',
  264. labelSpacing: 4,
  265. tickDirection: 'positive',
  266. titlePosition: 'left',
  267. titleSpacing: 10,
  268. titleTextBaseline: 'middle',
  269. titleTransform: `translate(50%, 0) rotate(-90)`,
  270. titleTransformOrigin: 'center',
  271. },
  272. axisRight: {
  273. gridDirection: 'positive',
  274. labelDirection: 'negative',
  275. labelSpacing: 4,
  276. tickDirection: 'negative',
  277. titlePosition: 'right',
  278. titleSpacing: 0,
  279. titleTextBaseline: 'top',
  280. titleTransform: `translate(-50%, 0) rotate(-90)`,
  281. titleTransformOrigin: 'center',
  282. },
  283. axisLinear: {
  284. girdClosed: true,
  285. gridConnect: 'arc',
  286. gridDirection: 'negative',
  287. gridType: 'surround',
  288. titlePosition: 'top',
  289. titleTextBaseline: 'bottom',
  290. },
  291. axisRadar: {
  292. girdClosed: true,
  293. gridStrokeOpacity: 0.3,
  294. gridType: 'surround',
  295. label: false,
  296. tick: false,
  297. titlePosition: 'start',
  298. },
  299. legend: {
  300. backgroundFill: 'transparent',
  301. itemBackgroundFill: 'transparent',
  302. itemLabelFill: COLORS.BLACK,
  303. itemLabelFillOpacity: 0.65,
  304. itemLabelFontSize: 12,
  305. itemLabelFontWeight: 'normal',
  306. itemMarkerFillOpacity: 1,
  307. itemMarkerSize: 8,
  308. itemSpacing: [5, 8],
  309. itemValueFill: COLORS.BLACK,
  310. itemValueFillOpacity: 0.65,
  311. itemValueFontSize: 12,
  312. itemValueFontWeight: 'normal',
  313. navButtonFill: COLORS.BLACK,
  314. navButtonFillOpacity: 0.45,
  315. navPageNumFill: COLORS.BLACK,
  316. navPageNumFillOpacity: 0.45,
  317. navPageNumFontSize: 12,
  318. padding: 8,
  319. title: false,
  320. titleFill: COLORS.BLACK,
  321. titleFillOpacity: 0.45,
  322. titleFontSize: 12,
  323. titleFontWeight: 'normal',
  324. titleSpacing: 4,
  325. },
  326. continuousLegend: {
  327. handleHeight: 12,
  328. handleLabelFill: COLORS.BLACK,
  329. handleLabelFillOpacity: 0.45,
  330. handleLabelFontSize: 12,
  331. handleLabelFontWeight: 'normal',
  332. handleMarkerFill: COLORS.BLACK,
  333. handleMarkerFillOpacity: 0.6,
  334. handleMarkerLineWidth: 1,
  335. handleMarkerStroke: COLORS.BLACK,
  336. handleMarkerStrokeOpacity: 0.25,
  337. handleWidth: 10,
  338. labelFill: COLORS.BLACK,
  339. labelFillOpacity: 0.45,
  340. labelFontSize: 12,
  341. labelFontWeight: 'normal',
  342. // title: false,
  343. // [todo] legend rail
  344. },
  345. label: {
  346. fill: COLORS.BLACK,
  347. fillOpacity: 0.65,
  348. fontSize: 12,
  349. fontWeight: 'normal',
  350. stroke: undefined,
  351. offset: 12,
  352. connectorStroke: COLORS.BLACK,
  353. connectorStrokeOpacity: 0.45,
  354. connectorLineWidth: 1,
  355. connectorLength: 12,
  356. connectorLength2: 8,
  357. connectorDistance: 4,
  358. },
  359. innerLabel: {
  360. fill: COLORS.WHITE,
  361. fontSize: 12,
  362. fillOpacity: 0.85,
  363. fontWeight: 'normal',
  364. stroke: undefined,
  365. offset: 0,
  366. },
  367. slider: {
  368. trackSize: 16,
  369. trackFill: COLORS.STROKE,
  370. trackFillOpacity: 1,
  371. selectionFill: DEFAULT_COLOR,
  372. selectionFillOpacity: 0.15,
  373. handleIconSize: 10,
  374. handleIconFill: '#f7f7f7',
  375. handleIconFillOpacity: 1,
  376. handleIconStroke: COLORS.BLACK,
  377. handleIconStrokeOpacity: 0.25,
  378. handleIconLineWidth: 1,
  379. handleIconRadius: 2,
  380. handleLabelFill: COLORS.BLACK,
  381. handleLabelFillOpacity: 0.45,
  382. handleLabelFontSize: 12,
  383. handleLabelFontWeight: 'normal',
  384. },
  385. scrollbar: {},
  386. title: {
  387. titleFill: COLORS.BLACK,
  388. titleFillOpacity: 0.85,
  389. titleFontSize: 14,
  390. titleFontWeight: 'bold',
  391. titleTextBaseline: 'top',
  392. subtitleFill: COLORS.BLACK,
  393. subtitleFillOpacity: 0.65,
  394. subtitleFontSize: 12,
  395. subtitleFontWeight: 'normal',
  396. subtitleTextBaseline: 'top',
  397. },
  398. };
  399. return Object.assign({}, defaultOptions, options);
  400. };
  401. ClassicDark.props = {};
  402. //# sourceMappingURL=classicDark.js.map