adaptor.js 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. import { __assign, __rest } from "tslib";
  2. import { isNumber } from '@antv/util';
  3. import { brushInteraction } from '../../adaptor/brush';
  4. import { animation, annotation, interaction, scale, scrollbar, slider, theme } from '../../adaptor/common';
  5. import { point } from '../../adaptor/geometries';
  6. import { deepAssign, findGeometry, flow, pick, transformLabel } from '../../utils';
  7. import { getMeta, getPath, getQuadrantDefaultConfig } from './util';
  8. /**
  9. * 散点图默认美观
  10. * ① data.length === 1 ② 所有数据 y 值相等 ③ 所有数据 x 值相等
  11. * @param params
  12. * @returns params
  13. */
  14. export function transformOptions(options) {
  15. var _a = options.data, data = _a === void 0 ? [] : _a, xField = options.xField, yField = options.yField;
  16. if (data.length) {
  17. // x y 字段知否只有一个值,如果只有一个值,则进行优化
  18. var isOneX = true;
  19. var isOneY = true;
  20. var prev = data[0];
  21. var curr = void 0;
  22. for (var i = 1; i < data.length; i++) {
  23. curr = data[i];
  24. if (prev[xField] !== curr[xField]) {
  25. isOneX = false;
  26. }
  27. if (prev[yField] !== curr[yField]) {
  28. isOneY = false;
  29. }
  30. // 如果都不是 oneValue,那么可提前跳出循环
  31. if (!isOneX && !isOneY) {
  32. break;
  33. }
  34. prev = curr;
  35. }
  36. var keys = [];
  37. isOneX && keys.push(xField);
  38. isOneY && keys.push(yField);
  39. var meta_1 = pick(getMeta(options), keys);
  40. return deepAssign({}, options, { meta: meta_1 });
  41. }
  42. return options;
  43. }
  44. /**
  45. * 字段
  46. * @param params
  47. */
  48. function geometry(params) {
  49. var chart = params.chart, options = params.options;
  50. var data = options.data, type = options.type, color = options.color, shape = options.shape, pointStyle = options.pointStyle, shapeField = options.shapeField, colorField = options.colorField, xField = options.xField, yField = options.yField, sizeField = options.sizeField;
  51. var size = options.size;
  52. var tooltip = options.tooltip;
  53. if (sizeField) {
  54. if (!size) {
  55. size = [2, 8];
  56. }
  57. if (isNumber(size)) {
  58. size = [size, size];
  59. }
  60. }
  61. if (tooltip && !tooltip.fields) {
  62. tooltip = __assign(__assign({}, tooltip), { fields: [xField, yField, colorField, sizeField, shapeField] });
  63. }
  64. // 数据
  65. chart.data(data);
  66. // geometry
  67. point(deepAssign({}, params, {
  68. options: {
  69. seriesField: colorField,
  70. point: {
  71. color: color,
  72. shape: shape,
  73. size: size,
  74. style: pointStyle,
  75. },
  76. tooltip: tooltip,
  77. },
  78. }));
  79. var geometry = findGeometry(chart, 'point');
  80. // 数据调整
  81. if (type) {
  82. geometry.adjust(type);
  83. }
  84. return params;
  85. }
  86. /**
  87. * meta 配置
  88. * @param params
  89. */
  90. export function meta(params) {
  91. var _a;
  92. var options = params.options;
  93. var xAxis = options.xAxis, yAxis = options.yAxis, xField = options.xField, yField = options.yField;
  94. var newOptions = transformOptions(options);
  95. return flow(scale((_a = {},
  96. _a[xField] = xAxis,
  97. _a[yField] = yAxis,
  98. _a)))(deepAssign({}, params, { options: newOptions }));
  99. }
  100. /**
  101. * axis 配置
  102. * @param params
  103. */
  104. function axis(params) {
  105. var chart = params.chart, options = params.options;
  106. var xAxis = options.xAxis, yAxis = options.yAxis, xField = options.xField, yField = options.yField;
  107. chart.axis(xField, xAxis);
  108. chart.axis(yField, yAxis);
  109. return params;
  110. }
  111. /**
  112. * legend 配置
  113. * @param params
  114. */
  115. function legend(params) {
  116. var chart = params.chart, options = params.options;
  117. var legend = options.legend, colorField = options.colorField, shapeField = options.shapeField, sizeField = options.sizeField, shapeLegend = options.shapeLegend, sizeLegend = options.sizeLegend;
  118. /** legend 不为 false, 则展示图例, 优先展示 color 分类图例 */
  119. var showLegend = legend !== false;
  120. if (colorField) {
  121. chart.legend(colorField, showLegend ? legend : false);
  122. }
  123. // 优先取 shapeLegend, 否则取 legend
  124. if (shapeField) {
  125. if (shapeLegend) {
  126. chart.legend(shapeField, shapeLegend);
  127. }
  128. else {
  129. chart.legend(shapeField, shapeLegend === false ? false : legend);
  130. }
  131. }
  132. if (sizeField) {
  133. chart.legend(sizeField, sizeLegend ? sizeLegend : false);
  134. }
  135. /** 默认不展示 shape 图例,当 shapeLegend 为 undefined 也不展示图例 */
  136. /** 默认没有 sizeField,则隐藏连续图例 */
  137. if (!showLegend && !shapeLegend && !sizeLegend) {
  138. chart.legend(false);
  139. }
  140. return params;
  141. }
  142. /**
  143. * 数据标签
  144. * @param params
  145. */
  146. function label(params) {
  147. var chart = params.chart, options = params.options;
  148. var label = options.label, yField = options.yField;
  149. var scatterGeometry = findGeometry(chart, 'point');
  150. // label 为 false, 空 则不显示 label
  151. if (!label) {
  152. scatterGeometry.label(false);
  153. }
  154. else {
  155. var callback = label.callback, cfg = __rest(label, ["callback"]);
  156. scatterGeometry.label({
  157. fields: [yField],
  158. callback: callback,
  159. cfg: transformLabel(cfg),
  160. });
  161. }
  162. return params;
  163. }
  164. /**
  165. * annotation 配置
  166. * - 特殊 annotation: quadrant(四象限)
  167. * @param params
  168. */
  169. function scatterAnnotation(params) {
  170. var options = params.options;
  171. var quadrant = options.quadrant;
  172. var annotationOptions = [];
  173. if (quadrant) {
  174. var _a = quadrant.xBaseline, xBaseline = _a === void 0 ? 0 : _a, _b = quadrant.yBaseline, yBaseline = _b === void 0 ? 0 : _b, labels_1 = quadrant.labels, regionStyle_1 = quadrant.regionStyle, lineStyle = quadrant.lineStyle;
  175. var defaultConfig_1 = getQuadrantDefaultConfig(xBaseline, yBaseline);
  176. // 仅支持四象限
  177. var quadrants = new Array(4).join(',').split(',');
  178. quadrants.forEach(function (_, index) {
  179. annotationOptions.push(__assign(__assign({ type: 'region', top: false }, defaultConfig_1.regionStyle[index].position), { style: deepAssign({}, defaultConfig_1.regionStyle[index].style, regionStyle_1 === null || regionStyle_1 === void 0 ? void 0 : regionStyle_1[index]) }), __assign({ type: 'text', top: true }, deepAssign({}, defaultConfig_1.labelStyle[index], labels_1 === null || labels_1 === void 0 ? void 0 : labels_1[index])));
  180. });
  181. // 生成坐标轴
  182. annotationOptions.push({
  183. type: 'line',
  184. top: false,
  185. start: ['min', yBaseline],
  186. end: ['max', yBaseline],
  187. style: deepAssign({}, defaultConfig_1.lineStyle, lineStyle),
  188. }, {
  189. type: 'line',
  190. top: false,
  191. start: [xBaseline, 'min'],
  192. end: [xBaseline, 'max'],
  193. style: deepAssign({}, defaultConfig_1.lineStyle, lineStyle),
  194. });
  195. }
  196. return flow(annotation(annotationOptions))(params);
  197. }
  198. // 趋势线
  199. function regressionLine(params) {
  200. var options = params.options, chart = params.chart;
  201. var regressionLine = options.regressionLine;
  202. if (regressionLine) {
  203. var style_1 = regressionLine.style, _a = regressionLine.equationStyle, equationStyle_1 = _a === void 0 ? {} : _a, _b = regressionLine.top, top_1 = _b === void 0 ? false : _b, _c = regressionLine.showEquation, showEquation_1 = _c === void 0 ? false : _c;
  204. var defaultStyle_1 = {
  205. stroke: '#9ba29a',
  206. lineWidth: 2,
  207. opacity: 0.5,
  208. };
  209. var defaulEquationStyle_1 = {
  210. x: 20,
  211. y: 20,
  212. textAlign: 'left',
  213. textBaseline: 'middle',
  214. fontSize: 14,
  215. fillOpacity: 0.5,
  216. };
  217. chart.annotation().shape({
  218. top: top_1,
  219. render: function (container, view) {
  220. var group = container.addGroup({
  221. id: "".concat(chart.id, "-regression-line"),
  222. name: 'regression-line-group',
  223. });
  224. var _a = getPath({
  225. view: view,
  226. options: options,
  227. }), path = _a[0], equation = _a[1];
  228. group.addShape('path', {
  229. name: 'regression-line',
  230. attrs: __assign(__assign({ path: path }, defaultStyle_1), style_1),
  231. });
  232. if (showEquation_1) {
  233. group.addShape('text', {
  234. name: 'regression-equation',
  235. attrs: __assign(__assign(__assign({}, defaulEquationStyle_1), equationStyle_1), { text: equation }),
  236. });
  237. }
  238. },
  239. });
  240. }
  241. return params;
  242. }
  243. /**
  244. * tooltip 配置
  245. * @param params
  246. */
  247. export function tooltip(params) {
  248. var chart = params.chart, options = params.options;
  249. var tooltip = options.tooltip;
  250. if (tooltip) {
  251. chart.tooltip(tooltip);
  252. }
  253. else if (tooltip === false) {
  254. chart.tooltip(false);
  255. }
  256. return params;
  257. }
  258. /**
  259. * 散点图适配器
  260. * @param chart
  261. * @param options
  262. */
  263. export function adaptor(params) {
  264. // flow 的方式处理所有的配置到 G2 API
  265. return flow(geometry, meta, axis, legend, tooltip, label,
  266. // 需要在 interaction 前面
  267. brushInteraction, slider, scrollbar, interaction, scatterAnnotation, animation, theme, regressionLine)(params);
  268. }
  269. //# sourceMappingURL=adaptor.js.map