adaptor.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  1. import { __assign, __rest } from "tslib";
  2. import { get, keys } from '@antv/util';
  3. import { animation as commonAnimation, interaction as commonInteraction, limitInPlot as commonLimitInPlot, scale, theme as commonTheme, tooltip, } from '../../adaptor/common';
  4. import { interval } from '../../adaptor/geometries';
  5. import { deepAssign, findGeometry, findViewById, flow, transformLabel } from '../../utils';
  6. import { FIRST_AXES_VIEW, SECOND_AXES_VIEW, SERIES_FIELD_KEY } from './constant';
  7. import { isHorizontal, transformData } from './utils';
  8. /**
  9. * geometry 处理
  10. * @param params
  11. */
  12. function geometry(params) {
  13. var chart = params.chart, options = params.options;
  14. var data = options.data, xField = options.xField, yField = options.yField, color = options.color, barStyle = options.barStyle, widthRatio = options.widthRatio, legend = options.legend, layout = options.layout;
  15. // 处理数据
  16. var groupData = transformData(xField, yField, SERIES_FIELD_KEY, data, isHorizontal(layout));
  17. // 在创建子 view 执行后不行,需要在前面处理 legend
  18. if (legend) {
  19. chart.legend(SERIES_FIELD_KEY, legend);
  20. }
  21. else if (legend === false) {
  22. chart.legend(false);
  23. }
  24. // 创建 view
  25. var firstView;
  26. var secondView;
  27. var firstViewData = groupData[0], secondViewData = groupData[1];
  28. // 横向
  29. if (isHorizontal(layout)) {
  30. firstView = chart.createView({
  31. region: {
  32. start: { x: 0, y: 0 },
  33. end: { x: 0.5, y: 1 },
  34. },
  35. id: FIRST_AXES_VIEW,
  36. });
  37. firstView.coordinate().transpose().reflect('x');
  38. secondView = chart.createView({
  39. region: {
  40. start: { x: 0.5, y: 0 },
  41. end: { x: 1, y: 1 },
  42. },
  43. id: SECOND_AXES_VIEW,
  44. });
  45. secondView.coordinate().transpose();
  46. // @说明: 测试发现,横向因为轴的反转,需要数据也反转,不然会图形渲染是反的(翻转操作进入到 transform 中处理)
  47. firstView.data(firstViewData);
  48. secondView.data(secondViewData);
  49. }
  50. else {
  51. // 纵向
  52. firstView = chart.createView({
  53. region: {
  54. start: { x: 0, y: 0 },
  55. end: { x: 1, y: 0.5 },
  56. },
  57. id: FIRST_AXES_VIEW,
  58. });
  59. secondView = chart.createView({
  60. region: {
  61. start: { x: 0, y: 0.5 },
  62. end: { x: 1, y: 1 },
  63. },
  64. id: SECOND_AXES_VIEW,
  65. });
  66. secondView.coordinate().reflect('y');
  67. firstView.data(firstViewData);
  68. secondView.data(secondViewData);
  69. }
  70. var left = deepAssign({}, params, {
  71. chart: firstView,
  72. options: {
  73. widthRatio: widthRatio,
  74. xField: xField,
  75. yField: yField[0],
  76. seriesField: SERIES_FIELD_KEY,
  77. interval: {
  78. color: color,
  79. style: barStyle,
  80. },
  81. },
  82. });
  83. interval(left);
  84. var right = deepAssign({}, params, {
  85. chart: secondView,
  86. options: {
  87. xField: xField,
  88. yField: yField[1],
  89. seriesField: SERIES_FIELD_KEY,
  90. widthRatio: widthRatio,
  91. interval: {
  92. color: color,
  93. style: barStyle,
  94. },
  95. },
  96. });
  97. interval(right);
  98. return params;
  99. }
  100. /**
  101. * meta 配置
  102. * - 对称条形图对数据进行了处理,通过 SERIES_FIELD_KEY 来对两条 yField 数据进行分类
  103. * @param params
  104. */
  105. function meta(params) {
  106. var _a, _b, _c;
  107. var options = params.options, chart = params.chart;
  108. var xAxis = options.xAxis, yAxis = options.yAxis, xField = options.xField, yField = options.yField;
  109. var firstView = findViewById(chart, FIRST_AXES_VIEW);
  110. var secondView = findViewById(chart, SECOND_AXES_VIEW);
  111. var aliasMap = {};
  112. keys((options === null || options === void 0 ? void 0 : options.meta) || {}).map(function (metaKey) {
  113. if (get(options === null || options === void 0 ? void 0 : options.meta, [metaKey, 'alias'])) {
  114. aliasMap[metaKey] = options.meta[metaKey].alias;
  115. }
  116. });
  117. chart.scale((_a = {},
  118. _a[SERIES_FIELD_KEY] = {
  119. sync: true,
  120. formatter: function (v) {
  121. return get(aliasMap, v, v);
  122. },
  123. },
  124. _a));
  125. scale((_b = {},
  126. _b[xField] = xAxis,
  127. _b[yField[0]] = yAxis[yField[0]],
  128. _b))(deepAssign({}, params, { chart: firstView }));
  129. scale((_c = {},
  130. _c[xField] = xAxis,
  131. _c[yField[1]] = yAxis[yField[1]],
  132. _c))(deepAssign({}, params, { chart: secondView }));
  133. return params;
  134. }
  135. /**
  136. * axis 配置
  137. * @param params
  138. */
  139. function axis(params) {
  140. var chart = params.chart, options = params.options;
  141. var xAxis = options.xAxis, yAxis = options.yAxis, xField = options.xField, yField = options.yField, layout = options.layout;
  142. var firstView = findViewById(chart, FIRST_AXES_VIEW);
  143. var secondView = findViewById(chart, SECOND_AXES_VIEW);
  144. // 第二个 view axis 始终隐藏; 注意 bottom 的时候,只隐藏 label,其他共用配置
  145. // @ts-ignore
  146. if ((xAxis === null || xAxis === void 0 ? void 0 : xAxis.position) === 'bottom') {
  147. // fixme 直接设置 label: null 会导致 tickLine 无法显示
  148. secondView.axis(xField, __assign(__assign({}, xAxis), { label: { formatter: function () { return ''; } } }));
  149. }
  150. else {
  151. secondView.axis(xField, false);
  152. }
  153. // 为 false 则是不显示 firstView 轴
  154. if (xAxis === false) {
  155. firstView.axis(xField, false);
  156. }
  157. else {
  158. firstView.axis(xField, __assign({
  159. // 不同布局 firstView 的坐标轴显示位置
  160. position: isHorizontal(layout) ? 'top' : 'bottom' }, xAxis));
  161. }
  162. if (yAxis === false) {
  163. firstView.axis(yField[0], false);
  164. secondView.axis(yField[1], false);
  165. }
  166. else {
  167. firstView.axis(yField[0], yAxis[yField[0]]);
  168. secondView.axis(yField[1], yAxis[yField[1]]);
  169. }
  170. /**
  171. * 这个注入,主要是在syncViewPadding时候拿到相对应的配置:布局和轴的位置
  172. * TODO 之后希望 g2 View 对象可以开放 setter 可以设置一些需要的东西
  173. */
  174. //@ts-ignore
  175. chart.__axisPosition = {
  176. position: firstView.getOptions().axes[xField].position,
  177. layout: layout,
  178. };
  179. return params;
  180. }
  181. /**
  182. * interaction 配置
  183. * @param params
  184. */
  185. export function interaction(params) {
  186. var chart = params.chart;
  187. commonInteraction(deepAssign({}, params, { chart: findViewById(chart, FIRST_AXES_VIEW) }));
  188. commonInteraction(deepAssign({}, params, { chart: findViewById(chart, SECOND_AXES_VIEW) }));
  189. return params;
  190. }
  191. /**
  192. * limitInPlot
  193. * @param params
  194. */
  195. export function limitInPlot(params) {
  196. var chart = params.chart, options = params.options;
  197. var yField = options.yField, yAxis = options.yAxis;
  198. commonLimitInPlot(deepAssign({}, params, {
  199. chart: findViewById(chart, FIRST_AXES_VIEW),
  200. options: {
  201. yAxis: yAxis[yField[0]],
  202. },
  203. }));
  204. commonLimitInPlot(deepAssign({}, params, {
  205. chart: findViewById(chart, SECOND_AXES_VIEW),
  206. options: {
  207. yAxis: yAxis[yField[1]],
  208. },
  209. }));
  210. return params;
  211. }
  212. /**
  213. * theme
  214. * @param params
  215. */
  216. export function theme(params) {
  217. var chart = params.chart;
  218. commonTheme(deepAssign({}, params, { chart: findViewById(chart, FIRST_AXES_VIEW) }));
  219. commonTheme(deepAssign({}, params, { chart: findViewById(chart, SECOND_AXES_VIEW) }));
  220. commonTheme(params);
  221. return params;
  222. }
  223. /**
  224. * animation
  225. * @param params
  226. */
  227. export function animation(params) {
  228. var chart = params.chart;
  229. commonAnimation(deepAssign({}, params, { chart: findViewById(chart, FIRST_AXES_VIEW) }));
  230. commonAnimation(deepAssign({}, params, { chart: findViewById(chart, SECOND_AXES_VIEW) }));
  231. return params;
  232. }
  233. /**
  234. * label 配置 (1. 设置 offset 偏移量默认值 2. leftView 偏移量需要 *= -1)
  235. * @param params
  236. */
  237. function label(params) {
  238. var _this = this;
  239. var _a, _b;
  240. var chart = params.chart, options = params.options;
  241. var label = options.label, yField = options.yField, layout = options.layout;
  242. var firstView = findViewById(chart, FIRST_AXES_VIEW);
  243. var secondView = findViewById(chart, SECOND_AXES_VIEW);
  244. var leftGeometry = findGeometry(firstView, 'interval');
  245. var rightGeometry = findGeometry(secondView, 'interval');
  246. if (!label) {
  247. leftGeometry.label(false);
  248. rightGeometry.label(false);
  249. }
  250. else {
  251. var callback = label.callback, cfg_1 = __rest(label, ["callback"]);
  252. /** ---- 设置默认配置 ---- */
  253. // 默认居中
  254. if (!cfg_1.position) {
  255. cfg_1.position = 'middle';
  256. }
  257. if (cfg_1.offset === undefined) {
  258. cfg_1.offset = 2;
  259. }
  260. /** ---- leftView label 设置 ---- */
  261. var leftLabelCfg = __assign({}, cfg_1);
  262. if (isHorizontal(layout)) {
  263. // 设置 textAlign 默认值
  264. var textAlign = ((_a = leftLabelCfg.style) === null || _a === void 0 ? void 0 : _a.textAlign) || (cfg_1.position === 'middle' ? 'center' : 'left');
  265. cfg_1.style = deepAssign({}, cfg_1.style, { textAlign: textAlign });
  266. var textAlignMap = { left: 'right', right: 'left', center: 'center' };
  267. leftLabelCfg.style = deepAssign({}, leftLabelCfg.style, { textAlign: textAlignMap[textAlign] });
  268. }
  269. else {
  270. var positionMap_1 = { top: 'bottom', bottom: 'top', middle: 'middle' };
  271. if (typeof cfg_1.position === 'string') {
  272. cfg_1.position = positionMap_1[cfg_1.position];
  273. }
  274. else if (typeof cfg_1.position === 'function') {
  275. cfg_1.position = function () {
  276. var args = [];
  277. for (var _i = 0; _i < arguments.length; _i++) {
  278. args[_i] = arguments[_i];
  279. }
  280. return positionMap_1[cfg_1.position.apply(_this, args)];
  281. };
  282. }
  283. // 设置 textBaseline 默认值
  284. var textBaseline = ((_b = leftLabelCfg.style) === null || _b === void 0 ? void 0 : _b.textBaseline) || 'bottom';
  285. leftLabelCfg.style = deepAssign({}, leftLabelCfg.style, { textBaseline: textBaseline });
  286. var textBaselineMap = { top: 'bottom', bottom: 'top', middle: 'middle' };
  287. cfg_1.style = deepAssign({}, cfg_1.style, { textBaseline: textBaselineMap[textBaseline] });
  288. }
  289. leftGeometry.label({
  290. fields: [yField[0]],
  291. callback: callback,
  292. cfg: transformLabel(leftLabelCfg),
  293. });
  294. rightGeometry.label({
  295. fields: [yField[1]],
  296. callback: callback,
  297. cfg: transformLabel(cfg_1),
  298. });
  299. }
  300. return params;
  301. }
  302. /**
  303. * 对称条形图适配器
  304. * @param chart
  305. * @param options
  306. */
  307. export function adaptor(params) {
  308. // flow 的方式处理所有的配置到 G2 API
  309. return flow(geometry, meta, axis, limitInPlot, theme, label, tooltip, interaction, animation)(params);
  310. }
  311. //# sourceMappingURL=adaptor.js.map