themes.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. /**
  2. * DevExtreme (viz/themes.js)
  3. * Version: 19.1.16
  4. * Build date: Tue Oct 18 2022
  5. *
  6. * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
  7. * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
  8. */
  9. "use strict";
  10. var extend = require("../core/utils/extend").extend;
  11. var each = require("../core/utils/iterator").each;
  12. var vizUtils = require("./core/utils");
  13. var uiThemes = require("../ui/themes");
  14. var themes = {};
  15. var themesMapping = {};
  16. var themesSchemeMapping = {};
  17. var _extend = extend;
  18. var _each = each;
  19. var _normalizeEnum = vizUtils.normalizeEnum;
  20. var currentThemeName = null;
  21. var defaultTheme;
  22. var nextCacheUid = 0;
  23. var widgetsCache = {};
  24. function getTheme(themeName) {
  25. var name = _normalizeEnum(themeName);
  26. return themes[name] || themes[themesMapping[name] || currentTheme()]
  27. }
  28. function findThemeNameByName(name, scheme) {
  29. return themesMapping[name + "." + scheme] || themesSchemeMapping[name + "." + scheme] || themesMapping[name]
  30. }
  31. function findThemeNameByPlatform(platform, version, scheme) {
  32. return findThemeNameByName(platform + version, scheme) || findThemeNameByName(platform, scheme)
  33. }
  34. function currentTheme(themeName, colorScheme) {
  35. if (!arguments.length) {
  36. return currentThemeName || findThemeNameByName(uiThemes.current()) || defaultTheme
  37. }
  38. var scheme = _normalizeEnum(colorScheme);
  39. currentThemeName = (themeName && themeName.platform ? findThemeNameByPlatform(_normalizeEnum(themeName.platform), themeName.version, scheme) : findThemeNameByName(_normalizeEnum(themeName), scheme)) || currentThemeName;
  40. return this
  41. }
  42. function getThemeInfo(themeName, splitter) {
  43. var k = themeName.indexOf(splitter);
  44. return k > 0 ? {
  45. name: themeName.substring(0, k),
  46. scheme: themeName.substring(k + 1)
  47. } : null
  48. }
  49. function registerThemeName(themeName, targetThemeName) {
  50. var themeInfo = getThemeInfo(themeName, ".") || {
  51. name: themeName
  52. };
  53. var name = themeInfo.name;
  54. var scheme = themeInfo.scheme;
  55. if (scheme) {
  56. themesMapping[name] = themesMapping[name] || targetThemeName;
  57. themesMapping[name + "." + scheme] = targetThemeName
  58. } else {
  59. themesMapping[name] = targetThemeName
  60. }
  61. }
  62. function registerTheme(theme, baseThemeName) {
  63. var themeName = _normalizeEnum(theme && theme.name);
  64. if (themeName) {
  65. theme.isDefault && (defaultTheme = themeName);
  66. registerThemeName(themeName, themeName);
  67. themes[themeName] = _extend(true, {}, getTheme(baseThemeName), patchTheme(theme))
  68. }
  69. }
  70. function registerThemeAlias(alias, theme) {
  71. registerThemeName(_normalizeEnum(alias), _normalizeEnum(theme))
  72. }
  73. function registerThemeSchemeAlias(from, to) {
  74. themesSchemeMapping[from] = to
  75. }
  76. function mergeScalar(target, field, source, sourceValue) {
  77. var _value = source ? source[field] : sourceValue;
  78. if (void 0 !== _value && void 0 === target[field]) {
  79. target[field] = _value
  80. }
  81. }
  82. function mergeObject(target, field, source, sourceValue) {
  83. var _value = source ? source[field] : sourceValue;
  84. if (void 0 !== _value) {
  85. target[field] = _extend(true, {}, _value, target[field])
  86. }
  87. }
  88. function patchTheme(theme) {
  89. theme = _extend(true, {
  90. loadingIndicator: {
  91. font: {}
  92. },
  93. "export": {
  94. font: {}
  95. },
  96. legend: {
  97. font: {},
  98. border: {}
  99. },
  100. title: {
  101. font: {}
  102. },
  103. tooltip: {
  104. font: {}
  105. },
  106. "chart:common": {},
  107. "chart:common:axis": {
  108. grid: {},
  109. minorGrid: {},
  110. tick: {},
  111. minorTick: {},
  112. title: {
  113. font: {}
  114. },
  115. label: {
  116. font: {}
  117. }
  118. },
  119. chart: {
  120. commonSeriesSettings: {
  121. candlestick: {}
  122. }
  123. },
  124. pie: {},
  125. polar: {},
  126. gauge: {
  127. scale: {
  128. tick: {},
  129. minorTick: {},
  130. label: {
  131. font: {}
  132. }
  133. }
  134. },
  135. barGauge: {},
  136. funnel: {},
  137. sankey: {},
  138. map: {
  139. background: {}
  140. },
  141. treeMap: {
  142. tile: {
  143. selectionStyle: {
  144. border: {}
  145. }
  146. },
  147. group: {
  148. border: {},
  149. selectionStyle: {
  150. border: {}
  151. },
  152. label: {
  153. font: {}
  154. }
  155. }
  156. },
  157. rangeSelector: {
  158. scale: {
  159. tick: {},
  160. minorTick: {},
  161. label: {
  162. font: {}
  163. }
  164. },
  165. chart: {}
  166. },
  167. sparkline: {},
  168. bullet: {}
  169. }, theme);
  170. mergeScalar(theme.loadingIndicator, "backgroundColor", theme);
  171. mergeScalar(theme.chart.commonSeriesSettings.candlestick, "innerColor", null, theme.backgroundColor);
  172. mergeScalar(theme.map.background, "color", null, theme.backgroundColor);
  173. mergeScalar(theme.title.font, "color", null, theme.primaryTitleColor);
  174. mergeObject(theme.title, "subtitle", null, theme.title);
  175. mergeScalar(theme.legend.font, "color", null, theme.secondaryTitleColor);
  176. mergeScalar(theme.legend.border, "color", null, theme.gridColor);
  177. patchAxes(theme);
  178. _each(["chart", "pie", "polar", "gauge", "barGauge", "map", "treeMap", "funnel", "rangeSelector", "sparkline", "bullet", "sankey"], function(_, section) {
  179. mergeScalar(theme[section], "redrawOnResize", theme);
  180. mergeScalar(theme[section], "containerBackgroundColor", null, theme.backgroundColor);
  181. mergeObject(theme[section], "tooltip", theme);
  182. mergeObject(theme[section], "export", theme)
  183. });
  184. _each(["chart", "pie", "polar", "gauge", "barGauge", "map", "treeMap", "funnel", "rangeSelector", "sankey"], function(_, section) {
  185. mergeObject(theme[section], "loadingIndicator", theme);
  186. mergeObject(theme[section], "legend", theme);
  187. mergeObject(theme[section], "title", theme)
  188. });
  189. _each(["chart", "pie", "polar"], function(_, section) {
  190. mergeObject(theme, section, null, theme["chart:common"])
  191. });
  192. _each(["chart", "polar"], function(_, section) {
  193. theme[section] = theme[section] || {};
  194. mergeObject(theme[section], "commonAxisSettings", null, theme["chart:common:axis"])
  195. });
  196. mergeObject(theme.rangeSelector.chart, "commonSeriesSettings", theme.chart);
  197. mergeObject(theme.rangeSelector.chart, "dataPrepareSettings", theme.chart);
  198. mergeScalar(theme.treeMap.group.border, "color", null, theme.gridColor);
  199. mergeScalar(theme.treeMap.tile.selectionStyle.border, "color", null, theme.primaryTitleColor);
  200. mergeScalar(theme.treeMap.group.selectionStyle.border, "color", null, theme.primaryTitleColor);
  201. mergeScalar(theme.map.legend, "backgroundColor", theme);
  202. patchMapLayers(theme);
  203. return theme
  204. }
  205. function patchAxes(theme) {
  206. var commonAxisSettings = theme["chart:common:axis"];
  207. var colorFieldName = "color";
  208. _each([commonAxisSettings.grid, commonAxisSettings.minorGrid], function(_, obj) {
  209. mergeScalar(obj, colorFieldName, null, theme.gridColor)
  210. });
  211. _each([commonAxisSettings, commonAxisSettings.tick, commonAxisSettings.minorTick, commonAxisSettings.label.font], function(_, obj) {
  212. mergeScalar(obj, colorFieldName, null, theme.axisColor)
  213. });
  214. mergeScalar(commonAxisSettings.title.font, colorFieldName, null, theme.secondaryTitleColor);
  215. mergeScalar(theme.gauge.scale.label.font, colorFieldName, null, theme.axisColor);
  216. mergeScalar(theme.gauge.scale.tick, colorFieldName, null, theme.backgroundColor);
  217. mergeScalar(theme.gauge.scale.minorTick, colorFieldName, null, theme.backgroundColor);
  218. mergeScalar(theme.rangeSelector.scale.label.font, colorFieldName, null, theme.axisColor)
  219. }
  220. function patchMapLayers(theme) {
  221. var map = theme.map;
  222. _each(["area", "line", "marker"], function(_, section) {
  223. mergeObject(map, "layer:" + section, null, map.layer)
  224. });
  225. _each(["dot", "bubble", "pie", "image"], function(_, section) {
  226. mergeObject(map, "layer:marker:" + section, null, map["layer:marker"])
  227. })
  228. }
  229. function addCacheItem(target) {
  230. var cacheUid = ++nextCacheUid;
  231. target._cache = cacheUid;
  232. widgetsCache[cacheUid] = target
  233. }
  234. function removeCacheItem(target) {
  235. delete widgetsCache[target._cache]
  236. }
  237. function refreshTheme() {
  238. _each(widgetsCache, function() {
  239. this.refresh()
  240. });
  241. return this
  242. }
  243. _extend(exports, {
  244. currentTheme: currentTheme,
  245. registerTheme: registerTheme,
  246. getTheme: getTheme,
  247. registerThemeAlias: registerThemeAlias,
  248. registerThemeSchemeAlias: registerThemeSchemeAlias,
  249. refreshTheme: refreshTheme,
  250. addCacheItem: addCacheItem,
  251. removeCacheItem: removeCacheItem
  252. });