classicDark.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.ClassicDark = void 0;
  4. const COLORS = {
  5. BLACK: '#fff',
  6. WHITE: '#000',
  7. STROKE: '#416180',
  8. };
  9. const BACKGROUND_COLOR = '#141414';
  10. /**
  11. * Dark theme.
  12. */
  13. const ClassicDark = (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,
  133. fillOpacity: 0.65,
  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. lineLineWidth: 0.5,
  232. lineStroke: COLORS.BLACK,
  233. lineStrokeOpacity: 0.45,
  234. tickLength: 4,
  235. tickLineWidth: 1,
  236. tickStroke: COLORS.BLACK,
  237. tickStrokeOpacity: 0.25,
  238. titleFill: COLORS.BLACK,
  239. titleFillOpacity: 0.65,
  240. titleFontSize: 12,
  241. titleFontWeight: 'normal',
  242. titleSpacing: 12,
  243. titleTransformOrigin: 'center',
  244. },
  245. axisTop: {
  246. gridDirection: 'positive',
  247. labelDirection: 'negative',
  248. labelSpacing: 4,
  249. tickDirection: 'negative',
  250. titlePosition: 'top',
  251. titleSpacing: 0,
  252. titleTextBaseline: 'middle',
  253. },
  254. axisBottom: {
  255. gridDirection: 'negative',
  256. labelDirection: 'positive',
  257. labelSpacing: 4,
  258. tickDirection: 'positive',
  259. titlePosition: 'bottom',
  260. titleSpacing: 10,
  261. titleTextBaseline: 'bottom',
  262. },
  263. axisLeft: {
  264. gridDirection: 'negative',
  265. labelAutoRotate: false,
  266. labelDirection: 'positive',
  267. labelSpacing: 4,
  268. tickDirection: 'positive',
  269. titlePosition: 'left',
  270. titleSpacing: 10,
  271. titleTextBaseline: 'middle',
  272. titleTransform: `translate(50%, 0) rotate(-90)`,
  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: 0.65,
  307. itemLabelFontSize: 12,
  308. itemLabelFontWeight: 'normal',
  309. itemMarkerFillOpacity: 1,
  310. itemMarkerSize: 8,
  311. itemSpacing: [5, 8],
  312. itemValueFill: COLORS.BLACK,
  313. itemValueFillOpacity: 0.65,
  314. itemValueFontSize: 12,
  315. itemValueFontWeight: 'normal',
  316. navButtonFill: COLORS.BLACK,
  317. navButtonFillOpacity: 0.45,
  318. navPageNumFill: COLORS.BLACK,
  319. navPageNumFillOpacity: 0.45,
  320. navPageNumFontSize: 12,
  321. padding: 8,
  322. title: false,
  323. titleFill: COLORS.BLACK,
  324. titleFillOpacity: 0.45,
  325. titleFontSize: 12,
  326. titleFontWeight: 'normal',
  327. titleSpacing: 4,
  328. },
  329. continuousLegend: {
  330. handleHeight: 12,
  331. handleLabelFill: COLORS.BLACK,
  332. handleLabelFillOpacity: 0.45,
  333. handleLabelFontSize: 12,
  334. handleLabelFontWeight: 'normal',
  335. handleMarkerFill: COLORS.BLACK,
  336. handleMarkerFillOpacity: 0.6,
  337. handleMarkerLineWidth: 1,
  338. handleMarkerStroke: COLORS.BLACK,
  339. handleMarkerStrokeOpacity: 0.25,
  340. handleWidth: 10,
  341. labelFill: COLORS.BLACK,
  342. labelFillOpacity: 0.45,
  343. labelFontSize: 12,
  344. labelFontWeight: 'normal',
  345. // title: false,
  346. // [todo] legend rail
  347. },
  348. label: {
  349. fill: COLORS.BLACK,
  350. fillOpacity: 0.65,
  351. fontSize: 12,
  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: 12,
  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: 1,
  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: 12,
  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. exports.ClassicDark = ClassicDark;
  405. exports.ClassicDark.props = {};
  406. //# sourceMappingURL=classicDark.js.map