academy.js 12 KB

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