base.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. import { __assign, __rest, __spreadArray } from "tslib";
  2. import { isEmpty, isFunction, isNumber, isObject, isString, uniq } from '@antv/util';
  3. import { transformLabel } from '../../utils';
  4. /**
  5. * 获得映射的字段列表
  6. * @param options
  7. * @param field
  8. */
  9. export function getMappingField(o, field) {
  10. var type = o.type, xField = o.xField, yField = o.yField, colorField = o.colorField, shapeField = o.shapeField, sizeField = o.sizeField, styleField = o.styleField;
  11. var rawFields = o.rawFields;
  12. var fields = [];
  13. rawFields = (isFunction(rawFields) ? rawFields(type, field) : rawFields) || [];
  14. // 因为 color 会影响到数据分组,以及最后的图形映射。所以导致 bar 图中的 widthRatio 设置不生效
  15. // 所以对于 color 字段,仅仅保留 colorField 好了! + rawFields
  16. // shape, size 同理
  17. if (field === 'color') {
  18. fields = __spreadArray([colorField || xField], rawFields, true);
  19. }
  20. else if (field === 'shape') {
  21. fields = __spreadArray([shapeField || xField], rawFields, true);
  22. }
  23. else if (field === 'size') {
  24. fields = __spreadArray([sizeField || xField], rawFields, true);
  25. }
  26. else {
  27. fields = __spreadArray([xField, yField, colorField, shapeField, sizeField, styleField], rawFields, true);
  28. // 一定能找到的!
  29. var idx = ['x', 'y', 'color', 'shape', 'size', 'style'].indexOf(field);
  30. var f = fields[idx];
  31. // 删除当前字段
  32. fields.splice(idx, 1);
  33. // 插入到第一个
  34. fields.unshift(f);
  35. }
  36. var mappingFields = uniq(fields.filter(function (f) { return !!f; }));
  37. /**
  38. * 修复 line geometry 无拆分时 color 回调错误
  39. * eg:
  40. * geometry.color(xField, ()=> '#f24')
  41. */
  42. var tileMappingField = type === 'line' && [xField, yField].includes(mappingFields.join('*')) ? '' : mappingFields.join('*');
  43. return {
  44. mappingFields: mappingFields,
  45. tileMappingField: tileMappingField,
  46. };
  47. }
  48. /**
  49. * 获得映射函数
  50. * @param mappingFields
  51. * @param func
  52. */
  53. export function getMappingFunction(mappingFields, func) {
  54. if (!func)
  55. return undefined;
  56. // 返回函数
  57. return function () {
  58. var args = [];
  59. for (var _i = 0; _i < arguments.length; _i++) {
  60. args[_i] = arguments[_i];
  61. }
  62. var params = {};
  63. mappingFields.forEach(function (f, idx) {
  64. params[f] = args[idx];
  65. });
  66. // 删除 undefined
  67. delete params['undefined'];
  68. return func(params);
  69. };
  70. }
  71. /**
  72. * 通用 geometry 的配置处理的 adaptor
  73. * @param params
  74. */
  75. export function geometry(params) {
  76. var chart = params.chart, options = params.options;
  77. var type = options.type, args = options.args, mapping = options.mapping, xField = options.xField, yField = options.yField, colorField = options.colorField, shapeField = options.shapeField, sizeField = options.sizeField, tooltipFields = options.tooltipFields, label = options.label, state = options.state, customInfo = options.customInfo;
  78. // 如果没有 mapping 信息,那么直接返回
  79. if (!mapping) {
  80. return params;
  81. }
  82. var color = mapping.color, shape = mapping.shape, size = mapping.size, style = mapping.style, tooltip = mapping.tooltip;
  83. // 创建 geometry
  84. var geometry = chart[type](args).position("".concat(xField, "*").concat(yField));
  85. /**
  86. * color 的几种情况
  87. * g.color('red');
  88. * g.color('color', ['red', 'blue']);
  89. * g.color('x', (x, y) => 'red');
  90. * g.color('color', (color, x, y) => 'red');
  91. */
  92. if (isString(color)) {
  93. colorField ? geometry.color(colorField, color) : geometry.color(color);
  94. }
  95. else if (isFunction(color)) {
  96. var _a = getMappingField(options, 'color'), mappingFields = _a.mappingFields, tileMappingField = _a.tileMappingField;
  97. geometry.color(tileMappingField, getMappingFunction(mappingFields, color));
  98. }
  99. else {
  100. colorField && geometry.color(colorField, color);
  101. }
  102. /**
  103. * shape 的几种情况
  104. * g.shape('rect');
  105. * g.shape('shape', ['rect', 'circle']);
  106. * g.shape('x*y', (x, y) => 'rect');
  107. * g.shape('shape*x*y', (shape, x, y) => 'rect');
  108. */
  109. if (isString(shape)) {
  110. shapeField ? geometry.shape(shapeField, [shape]) : geometry.shape(shape); // [shape] 需要在 G2 做掉
  111. }
  112. else if (isFunction(shape)) {
  113. var _b = getMappingField(options, 'shape'), mappingFields = _b.mappingFields, tileMappingField = _b.tileMappingField;
  114. geometry.shape(tileMappingField, getMappingFunction(mappingFields, shape));
  115. }
  116. else {
  117. shapeField && geometry.shape(shapeField, shape);
  118. }
  119. /**
  120. * size 的几种情况
  121. * g.size(10);
  122. * g.size('size', [10, 20]);
  123. * g.size('x*y', (x, y) => 10);
  124. * g.color('size*x*y', (size, x, y) => 1-);
  125. */
  126. if (isNumber(size)) {
  127. sizeField ? geometry.size(sizeField, size) : geometry.size(size);
  128. }
  129. else if (isFunction(size)) {
  130. var _c = getMappingField(options, 'size'), mappingFields = _c.mappingFields, tileMappingField = _c.tileMappingField;
  131. geometry.size(tileMappingField, getMappingFunction(mappingFields, size));
  132. }
  133. else {
  134. sizeField && geometry.size(sizeField, size);
  135. }
  136. /**
  137. * style 的几种情况
  138. * g.style({ fill: 'red' });
  139. * g.style('x*y*color', (x, y, color) => ({ fill: 'red' }));
  140. */
  141. if (isFunction(style)) {
  142. var _d = getMappingField(options, 'style'), mappingFields = _d.mappingFields, tileMappingField = _d.tileMappingField;
  143. geometry.style(tileMappingField, getMappingFunction(mappingFields, style));
  144. }
  145. else if (isObject(style)) {
  146. geometry.style(style);
  147. }
  148. /**
  149. * tooltip 的 API
  150. * g.tooltip('x*y*color', (x, y, color) => ({ name, value }));
  151. * g.tooltip(false);
  152. */
  153. if (tooltipFields === false) {
  154. geometry.tooltip(false);
  155. }
  156. else if (!isEmpty(tooltipFields)) {
  157. geometry.tooltip(tooltipFields.join('*'), getMappingFunction(tooltipFields, tooltip));
  158. }
  159. /**
  160. * label 的映射
  161. */
  162. if (label === false) {
  163. geometry.label(false);
  164. }
  165. else if (label) {
  166. var callback = label.callback, fields = label.fields, cfg = __rest(label, ["callback", "fields"]);
  167. geometry.label({
  168. fields: fields || [yField],
  169. callback: callback,
  170. cfg: transformLabel(cfg),
  171. });
  172. }
  173. /**
  174. * state 状态样式
  175. */
  176. if (state) {
  177. geometry.state(state);
  178. }
  179. /**
  180. * 自定义信息
  181. */
  182. if (customInfo) {
  183. geometry.customInfo(customInfo);
  184. }
  185. // 防止因为 x y 字段做了通道映射,导致生成图例
  186. [xField, yField]
  187. .filter(function (f) { return f !== colorField; })
  188. .forEach(function (f) {
  189. chart.legend(f, false);
  190. });
  191. return __assign(__assign({}, params), {
  192. // geometry adaptor 额外需要做的事情,就是将创建好的 geometry 返回到下一层 adaptor,防止通过 type 查询的时候容易误判
  193. ext: { geometry: geometry } });
  194. }
  195. //# sourceMappingURL=base.js.map