academy.js 12 KB

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