adaptor.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.adaptor = exports.interaction = exports.pieAnnotation = exports.transformStatisticOptions = void 0;
  4. var tslib_1 = require("tslib");
  5. var util_1 = require("@antv/util");
  6. var common_1 = require("../../adaptor/common");
  7. var geometries_1 = require("../../adaptor/geometries");
  8. var base_1 = require("../../adaptor/geometries/base");
  9. var pattern_1 = require("../../adaptor/pattern");
  10. var locale_1 = require("../../core/locale");
  11. var utils_1 = require("../../utils");
  12. var contants_1 = require("./contants");
  13. var interactions_1 = require("./interactions");
  14. var utils_2 = require("./utils");
  15. /**
  16. * 字段
  17. * @param params
  18. */
  19. function geometry(params) {
  20. var chart = params.chart, options = params.options;
  21. var data = options.data, angleField = options.angleField, colorField = options.colorField, color = options.color, pieStyle = options.pieStyle, shape = options.shape;
  22. // 处理不合法的数据
  23. var processData = (0, utils_1.processIllegalData)(data, angleField);
  24. if ((0, utils_2.isAllZero)(processData, angleField)) {
  25. // 数据全 0 处理,调整 position 映射
  26. var percentageField_1 = '$$percentage$$';
  27. processData = processData.map(function (d) {
  28. var _a;
  29. return (tslib_1.__assign(tslib_1.__assign({}, d), (_a = {}, _a[percentageField_1] = 1 / processData.length, _a)));
  30. });
  31. chart.data(processData);
  32. var p = (0, utils_1.deepAssign)({}, params, {
  33. options: {
  34. xField: '1',
  35. yField: percentageField_1,
  36. seriesField: colorField,
  37. isStack: true,
  38. interval: {
  39. color: color,
  40. shape: shape,
  41. style: pieStyle,
  42. },
  43. args: {
  44. zIndexReversed: true,
  45. sortZIndex: true,
  46. },
  47. },
  48. });
  49. (0, geometries_1.interval)(p);
  50. }
  51. else {
  52. chart.data(processData);
  53. var p = (0, utils_1.deepAssign)({}, params, {
  54. options: {
  55. xField: '1',
  56. yField: angleField,
  57. seriesField: colorField,
  58. isStack: true,
  59. interval: {
  60. color: color,
  61. shape: shape,
  62. style: pieStyle,
  63. },
  64. args: {
  65. zIndexReversed: true,
  66. sortZIndex: true,
  67. },
  68. },
  69. });
  70. (0, geometries_1.interval)(p);
  71. }
  72. return params;
  73. }
  74. /**
  75. * meta 配置
  76. * @param params
  77. */
  78. function meta(params) {
  79. var _a;
  80. var chart = params.chart, options = params.options;
  81. var meta = options.meta, colorField = options.colorField;
  82. // meta 直接是 scale 的信息
  83. var scales = (0, utils_1.deepAssign)({}, meta);
  84. chart.scale(scales, (_a = {},
  85. _a[colorField] = { type: 'cat' },
  86. _a));
  87. return params;
  88. }
  89. /**
  90. * coord 配置
  91. * @param params
  92. */
  93. function coordinate(params) {
  94. var chart = params.chart, options = params.options;
  95. var radius = options.radius, innerRadius = options.innerRadius, startAngle = options.startAngle, endAngle = options.endAngle;
  96. chart.coordinate({
  97. type: 'theta',
  98. cfg: {
  99. radius: radius,
  100. innerRadius: innerRadius,
  101. startAngle: startAngle,
  102. endAngle: endAngle,
  103. },
  104. });
  105. return params;
  106. }
  107. /**
  108. * label 配置
  109. * @param params
  110. */
  111. function label(params) {
  112. var chart = params.chart, options = params.options;
  113. var label = options.label, colorField = options.colorField, angleField = options.angleField;
  114. var geometry = chart.geometries[0];
  115. // label 为 false, 空 则不显示 label
  116. if (!label) {
  117. geometry.label(false);
  118. }
  119. else {
  120. var callback = label.callback, cfg = tslib_1.__rest(label, ["callback"]);
  121. var labelCfg = (0, utils_1.transformLabel)(cfg);
  122. // ① 提供模板字符串的 label content 配置
  123. if (labelCfg.content) {
  124. var content_1 = labelCfg.content;
  125. labelCfg.content = function (data, dataum, index) {
  126. var name = data[colorField];
  127. var value = data[angleField];
  128. // dymatic get scale, scale is ready this time
  129. var angleScale = chart.getScaleByField(angleField);
  130. var percent = angleScale === null || angleScale === void 0 ? void 0 : angleScale.scale(value);
  131. return (0, util_1.isFunction)(content_1)
  132. ? // append percent (number) to data, users can get origin data from `dataum._origin`
  133. content_1(tslib_1.__assign(tslib_1.__assign({}, data), { percent: percent }), dataum, index)
  134. : (0, util_1.isString)(content_1)
  135. ? (0, utils_1.template)(content_1, {
  136. value: value,
  137. name: name,
  138. // percentage (string), default keep 2
  139. percentage: (0, util_1.isNumber)(percent) && !(0, util_1.isNil)(value) ? "".concat((percent * 100).toFixed(2), "%") : null,
  140. })
  141. : content_1;
  142. };
  143. }
  144. var LABEL_LAYOUT_TYPE_MAP = {
  145. inner: '',
  146. outer: 'pie-outer',
  147. spider: 'pie-spider',
  148. };
  149. var labelLayoutType = labelCfg.type ? LABEL_LAYOUT_TYPE_MAP[labelCfg.type] : 'pie-outer';
  150. var labelLayoutCfg = labelCfg.layout ? (!(0, util_1.isArray)(labelCfg.layout) ? [labelCfg.layout] : labelCfg.layout) : [];
  151. labelCfg.layout = (labelLayoutType ? [{ type: labelLayoutType }] : []).concat(labelLayoutCfg);
  152. geometry.label({
  153. // fix: could not create scale, when field is undefined(attributes 中的 fields 定义都会被用来创建 scale)
  154. fields: colorField ? [angleField, colorField] : [angleField],
  155. callback: callback,
  156. cfg: tslib_1.__assign(tslib_1.__assign({}, labelCfg), { offset: (0, utils_2.adaptOffset)(labelCfg.type, labelCfg.offset), type: 'pie' }),
  157. });
  158. }
  159. return params;
  160. }
  161. /**
  162. * statistic options 处理
  163. * 1. 默认继承 default options 的样式
  164. * 2. 默认使用 meta 的 formatter
  165. */
  166. function transformStatisticOptions(options) {
  167. var innerRadius = options.innerRadius, statistic = options.statistic, angleField = options.angleField, colorField = options.colorField, meta = options.meta, locale = options.locale;
  168. var i18n = (0, locale_1.getLocale)(locale);
  169. if (innerRadius && statistic) {
  170. var _a = (0, utils_1.deepAssign)({}, contants_1.DEFAULT_OPTIONS.statistic, statistic), titleOpt_1 = _a.title, contentOpt_1 = _a.content;
  171. if (titleOpt_1 !== false) {
  172. titleOpt_1 = (0, utils_1.deepAssign)({}, {
  173. formatter: function (datum) {
  174. // 交互中, datum existed.
  175. var text = datum
  176. ? datum[colorField]
  177. : !(0, util_1.isNil)(titleOpt_1.content)
  178. ? titleOpt_1.content
  179. : i18n.get(['statistic', 'total']);
  180. var metaFormatter = (0, util_1.get)(meta, [colorField, 'formatter']) || (function (v) { return v; });
  181. return metaFormatter(text);
  182. },
  183. }, titleOpt_1);
  184. }
  185. if (contentOpt_1 !== false) {
  186. contentOpt_1 = (0, utils_1.deepAssign)({}, {
  187. formatter: function (datum, data) {
  188. var dataValue = datum ? datum[angleField] : (0, utils_2.getTotalValue)(data, angleField);
  189. var metaFormatter = (0, util_1.get)(meta, [angleField, 'formatter']) || (function (v) { return v; });
  190. // 交互中
  191. if (datum) {
  192. return metaFormatter(dataValue);
  193. }
  194. return !(0, util_1.isNil)(contentOpt_1.content) ? contentOpt_1.content : metaFormatter(dataValue);
  195. },
  196. }, contentOpt_1);
  197. }
  198. return (0, utils_1.deepAssign)({}, { statistic: { title: titleOpt_1, content: contentOpt_1 } }, options);
  199. }
  200. return options;
  201. }
  202. exports.transformStatisticOptions = transformStatisticOptions;
  203. /**
  204. * statistic 中心文本配置
  205. * @param params
  206. */
  207. function pieAnnotation(params) {
  208. var chart = params.chart, options = params.options;
  209. var _a = transformStatisticOptions(options), innerRadius = _a.innerRadius, statistic = _a.statistic;
  210. // 先清空标注,再重新渲染
  211. chart.getController('annotation').clear(true);
  212. // 先进行其他 annotations,再去渲染统计文本
  213. (0, utils_1.flow)((0, common_1.annotation)())(params);
  214. /** 中心文本 指标卡 */
  215. if (innerRadius && statistic) {
  216. (0, utils_1.renderStatistic)(chart, { statistic: statistic, plotType: 'pie' });
  217. }
  218. return params;
  219. }
  220. exports.pieAnnotation = pieAnnotation;
  221. /**
  222. * 饼图 tooltip 配置
  223. * 1. 强制 tooltip.shared 为 false
  224. * @param params
  225. */
  226. function tooltip(params) {
  227. var chart = params.chart, options = params.options;
  228. var tooltip = options.tooltip, colorField = options.colorField, angleField = options.angleField, data = options.data;
  229. if (tooltip === false) {
  230. chart.tooltip(tooltip);
  231. }
  232. else {
  233. chart.tooltip((0, utils_1.deepAssign)({}, tooltip, { shared: false }));
  234. // 主要解决 all zero, 对于非 all zero 不再适用
  235. if ((0, utils_2.isAllZero)(data, angleField)) {
  236. var fields = (0, util_1.get)(tooltip, 'fields');
  237. var formatter = (0, util_1.get)(tooltip, 'formatter');
  238. if ((0, util_1.isEmpty)((0, util_1.get)(tooltip, 'fields'))) {
  239. fields = [colorField, angleField];
  240. formatter = formatter || (function (datum) { return ({ name: datum[colorField], value: (0, util_1.toString)(datum[angleField]) }); });
  241. }
  242. chart.geometries[0].tooltip(fields.join('*'), (0, base_1.getMappingFunction)(fields, formatter));
  243. }
  244. }
  245. return params;
  246. }
  247. /**
  248. * Interaction 配置 (饼图特殊的 interaction, 中心文本变更的时候,需要将一些配置参数传进去)
  249. * @param params
  250. */
  251. function interaction(params) {
  252. var chart = params.chart, options = params.options;
  253. var _a = transformStatisticOptions(options), interactions = _a.interactions, statistic = _a.statistic, annotations = _a.annotations;
  254. (0, util_1.each)(interactions, function (i) {
  255. var _a, _b;
  256. if (i.enable === false) {
  257. chart.removeInteraction(i.type);
  258. }
  259. else if (i.type === 'pie-statistic-active') {
  260. // 只针对 start 阶段的配置,进行添加参数信息
  261. var startStages_1 = [];
  262. if (!((_a = i.cfg) === null || _a === void 0 ? void 0 : _a.start)) {
  263. startStages_1 = [
  264. {
  265. trigger: 'element:mouseenter',
  266. action: "".concat(interactions_1.PIE_STATISTIC, ":change"),
  267. arg: { statistic: statistic, annotations: annotations },
  268. },
  269. ];
  270. }
  271. (0, util_1.each)((_b = i.cfg) === null || _b === void 0 ? void 0 : _b.start, function (stage) {
  272. startStages_1.push(tslib_1.__assign(tslib_1.__assign({}, stage), { arg: { statistic: statistic, annotations: annotations } }));
  273. });
  274. chart.interaction(i.type, (0, utils_1.deepAssign)({}, i.cfg, { start: startStages_1 }));
  275. }
  276. else {
  277. chart.interaction(i.type, i.cfg || {});
  278. }
  279. });
  280. return params;
  281. }
  282. exports.interaction = interaction;
  283. /**
  284. * 饼图适配器
  285. * @param chart
  286. * @param options
  287. */
  288. function adaptor(params) {
  289. // flow 的方式处理所有的配置到 G2 API
  290. return (0, utils_1.flow)((0, pattern_1.pattern)('pieStyle'), geometry, meta, common_1.theme, coordinate, common_1.legend, tooltip, label, common_1.state,
  291. /** 指标卡中心文本 放在下层 */
  292. pieAnnotation, interaction, common_1.animation)(params);
  293. }
  294. exports.adaptor = adaptor;
  295. //# sourceMappingURL=adaptor.js.map