adaptor.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. import { __assign, __rest } from "tslib";
  2. import { deepMix, get, isArray, isEqual } from '@antv/util';
  3. import { animation, interaction, scale, theme, tooltip } from '../../adaptor/common';
  4. import { schema as schemaGeometry } from '../../adaptor/geometries';
  5. import { deepAssign, findGeometry, flow, getAdjustAppendPadding, LEVEL, log, normalPadding, resolveAllPadding, transformLabel, } from '../../utils';
  6. import { ID_FIELD } from './constant';
  7. import './interactions';
  8. import './label';
  9. import './shape';
  10. import { getColorMap, islegalSets, layoutVennData } from './utils';
  11. /** 图例默认预留空间 */
  12. export var LEGEND_SPACE = 40;
  13. /**
  14. * 获取 color 映射
  15. */
  16. function colorMap(params, data, colorPalette) {
  17. var chart = params.chart, options = params.options;
  18. var blendMode = options.blendMode, setsField = options.setsField;
  19. var _a = chart.getTheme(), colors10 = _a.colors10, colors20 = _a.colors20;
  20. var palette = colorPalette;
  21. if (!isArray(palette)) {
  22. palette = data.filter(function (d) { return d[setsField].length === 1; }).length <= 10 ? colors10 : colors20;
  23. }
  24. var map = getColorMap(palette, data, blendMode, setsField);
  25. return function (id) { return map.get(id) || palette[0]; };
  26. }
  27. /**
  28. * color options 转换
  29. */
  30. function transformColor(params, data) {
  31. var options = params.options;
  32. var color = options.color;
  33. if (typeof color !== 'function') {
  34. var colorPalette = typeof color === 'string' ? [color] : color;
  35. var map_1 = colorMap(params, data, colorPalette);
  36. return function (datum) { return map_1(datum[ID_FIELD]); };
  37. }
  38. return color;
  39. }
  40. /**
  41. * 处理 padding
  42. */
  43. function padding(params) {
  44. var chart = params.chart, options = params.options;
  45. var legend = options.legend, appendPadding = options.appendPadding, padding = options.padding;
  46. // 处理 legend 的位置. 默认预留 40px, 业务上可以通过 appendPadding 增加
  47. var tempPadding = normalPadding(appendPadding);
  48. if (legend !== false) {
  49. tempPadding = getAdjustAppendPadding(appendPadding, get(legend, 'position'), LEGEND_SPACE);
  50. }
  51. chart.appendPadding = resolveAllPadding([tempPadding, padding]);
  52. return params;
  53. }
  54. /**
  55. * 处理非法数据
  56. * @param params
  57. */
  58. function data(params) {
  59. var options = params.options;
  60. /* 如遇到 交集 中存在 非法元素 的情况,就过滤掉
  61. * 如:
  62. * data = [
  63. * { sets: ['A'], size: 3 }, // 集合
  64. * { sets: ['B'], size: 4 }, // 集合
  65. * { sets: ['A', 'B'], size: 2 }, // 交集
  66. * { sets: ['A', 'B', 'C'], size: 2 }, // 交集 (存在非法 C,过滤该条数据)
  67. * ...
  68. * ]
  69. */
  70. var data = options['data'];
  71. if (!data) {
  72. log(LEVEL.WARN, false, 'warn: %s', '数据不能为空');
  73. data = [];
  74. }
  75. // 合法元素的集合:['A', 'B']
  76. var currSets = data.filter(function (datum) { return datum.sets.length === 1; }).map(function (datum) { return datum.sets[0]; });
  77. // 过滤 data
  78. var filterSets = data.filter(function (datum) {
  79. var sets = datum.sets;
  80. // 存在非法元素,就过滤这条数据
  81. return islegalSets(currSets, sets);
  82. });
  83. if (!isEqual(filterSets, data))
  84. log(LEVEL.WARN, false, 'warn: %s', '交集中不能出现不存在的集合, 请输入合法数据');
  85. return deepMix({}, params, {
  86. options: {
  87. data: filterSets,
  88. },
  89. });
  90. }
  91. /**
  92. * geometry 处理
  93. * @param params
  94. */
  95. function geometry(params) {
  96. var chart = params.chart, options = params.options;
  97. var pointStyle = options.pointStyle, setsField = options.setsField, sizeField = options.sizeField;
  98. // 获取容器大小
  99. var _a = normalPadding(chart.appendPadding), t = _a[0], r = _a[1], b = _a[2], l = _a[3];
  100. // 处理 legend 的位置. 默认预留 40px, 业务上可以通过 appendPadding 增加
  101. var customInfo = { offsetX: l, offsetY: t };
  102. // coordinateBBox + appendPadding = viewBBox, 不需要再计算 appendPadding 部分,因此直接使用 viewBBox
  103. var _b = chart.viewBBox, width = _b.width, height = _b.height;
  104. // 处理padding输入不合理的情况, w 和 h 不能为负数
  105. var vennData = layoutVennData(options, Math.max(width - (r + l), 0), Math.max(height - (t + b), 0), 0);
  106. chart.data(vennData);
  107. var ext = schemaGeometry(deepAssign({}, params, {
  108. options: {
  109. xField: 'x',
  110. yField: 'y',
  111. sizeField: sizeField,
  112. seriesField: ID_FIELD,
  113. rawFields: [setsField, sizeField],
  114. schema: {
  115. shape: 'venn',
  116. style: pointStyle,
  117. },
  118. },
  119. })).ext;
  120. var geometry = ext.geometry;
  121. geometry.customInfo(customInfo);
  122. var colorOptions = transformColor(params, vennData);
  123. // 韦恩图试点, color 通道只能映射一个字段. 通过外部查找获取 datum
  124. if (typeof colorOptions === 'function') {
  125. geometry.color(ID_FIELD, function (id) {
  126. var datum = vennData.find(function (d) { return d[ID_FIELD] === id; });
  127. var defaultColor = colorMap(params, vennData)(id);
  128. return colorOptions(datum, defaultColor);
  129. });
  130. }
  131. return params;
  132. }
  133. /**
  134. * 处理 label
  135. * @param params
  136. */
  137. function label(params) {
  138. var chart = params.chart, options = params.options;
  139. var label = options.label;
  140. // 获取容器大小
  141. var _a = normalPadding(chart.appendPadding), t = _a[0], l = _a[3];
  142. // 传入 label 布局函数所需的 自定义参数
  143. var customLabelInfo = { offsetX: l, offsetY: t };
  144. var geometry = findGeometry(chart, 'schema');
  145. if (!label) {
  146. geometry.label(false);
  147. }
  148. else {
  149. var callback = label.callback, cfg = __rest(label, ["callback"]);
  150. geometry.label({
  151. fields: ['id'],
  152. callback: callback,
  153. cfg: deepMix({}, transformLabel(cfg), {
  154. // 使用 G2 的 自定义label 修改位置
  155. type: 'venn',
  156. customLabelInfo: customLabelInfo,
  157. }),
  158. });
  159. }
  160. return params;
  161. }
  162. /**
  163. * legend 配置
  164. * @param params
  165. */
  166. export function legend(params) {
  167. var chart = params.chart, options = params.options;
  168. var legend = options.legend, sizeField = options.sizeField;
  169. chart.legend(ID_FIELD, legend);
  170. // 强制不开启 连续图例
  171. chart.legend(sizeField, false);
  172. return params;
  173. }
  174. /**
  175. * 默认关闭坐标轴
  176. * @param params
  177. */
  178. export function axis(params) {
  179. var chart = params.chart;
  180. chart.axis(false);
  181. return params;
  182. }
  183. /**
  184. * 韦恩图 interaction 交互适配器
  185. */
  186. function vennInteraction(params) {
  187. var options = params.options, chart = params.chart;
  188. var interactions = options.interactions;
  189. if (interactions) {
  190. var MAP_1 = {
  191. 'legend-active': 'venn-legend-active',
  192. 'legend-highlight': 'venn-legend-highlight',
  193. };
  194. interaction(deepAssign({}, params, {
  195. options: {
  196. interactions: interactions.map(function (i) { return (__assign(__assign({}, i), { type: MAP_1[i.type] || i.type })); }),
  197. },
  198. }));
  199. }
  200. chart.removeInteraction('legend-active');
  201. chart.removeInteraction('legend-highlight');
  202. return params;
  203. }
  204. /**
  205. * 图适配器
  206. * @param chart
  207. * @param options
  208. */
  209. export function adaptor(params) {
  210. // flow 的方式处理所有的配置到 G2 API
  211. return flow(padding, theme, data, geometry, label, scale({}), legend, axis, tooltip, vennInteraction, animation
  212. // ... 其他的 adaptor flow
  213. )(params);
  214. }
  215. //# sourceMappingURL=adaptor.js.map