classic.js 12 KB

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