basic.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { __assign } from "tslib";
  2. import { get, isArray, map } from '@antv/util';
  3. import { geometry as baseGeometry } from '../../../adaptor/geometries/base';
  4. import { findGeometry, flow } from '../../../utils';
  5. import { getTooltipMapping } from '../../../utils/tooltip';
  6. import { FUNNEL_CONVERSATION, FUNNEL_MAPPING_VALUE, FUNNEL_PERCENT } from '../constant';
  7. import { conversionTagComponent, transformData } from './common';
  8. /**
  9. * 处理字段数据
  10. * @param params
  11. */
  12. function field(params) {
  13. var chart = params.chart, options = params.options;
  14. var _a = options.data, data = _a === void 0 ? [] : _a, yField = options.yField, maxSize = options.maxSize, minSize = options.minSize;
  15. var formatData = transformData(data, data, {
  16. yField: yField,
  17. maxSize: maxSize,
  18. minSize: minSize,
  19. });
  20. // 绘制漏斗图
  21. chart.data(formatData);
  22. return params;
  23. }
  24. /**
  25. * geometry处理
  26. * @param params
  27. */
  28. function geometry(params) {
  29. var chart = params.chart, options = params.options;
  30. var xField = options.xField, yField = options.yField, color = options.color, tooltip = options.tooltip, label = options.label, _a = options.shape, shape = _a === void 0 ? 'funnel' : _a, funnelStyle = options.funnelStyle, state = options.state;
  31. var _b = getTooltipMapping(tooltip, [xField, yField]), fields = _b.fields, formatter = _b.formatter;
  32. baseGeometry({
  33. chart: chart,
  34. options: {
  35. type: 'interval',
  36. xField: xField,
  37. yField: FUNNEL_MAPPING_VALUE,
  38. colorField: xField,
  39. tooltipFields: isArray(fields) && fields.concat([FUNNEL_PERCENT, FUNNEL_CONVERSATION]),
  40. mapping: {
  41. shape: shape,
  42. tooltip: formatter,
  43. color: color,
  44. style: funnelStyle,
  45. },
  46. label: label,
  47. state: state,
  48. },
  49. });
  50. var geo = findGeometry(params.chart, 'interval');
  51. geo.adjust('symmetric');
  52. return params;
  53. }
  54. /**
  55. * 转置处理
  56. * @param params
  57. */
  58. function transpose(params) {
  59. var chart = params.chart, options = params.options;
  60. var isTransposed = options.isTransposed;
  61. chart.coordinate({
  62. type: 'rect',
  63. actions: !isTransposed ? [['transpose'], ['scale', 1, -1]] : [],
  64. });
  65. return params;
  66. }
  67. /**
  68. * 转化率组件
  69. * @param params
  70. */
  71. export function conversionTag(params) {
  72. var options = params.options, chart = params.chart;
  73. var maxSize = options.maxSize;
  74. // 获取形状位置,再转化为需要的转化率位置
  75. var dataArray = get(chart, ['geometries', '0', 'dataArray'], []);
  76. var size = get(chart, ['options', 'data', 'length']);
  77. var x = map(dataArray, function (item) { return get(item, ['0', 'nextPoints', '0', 'x']) * size - 0.5; });
  78. var getLineCoordinate = function (datum, datumIndex, data, initLineOption) {
  79. var percent = maxSize - (maxSize - datum[FUNNEL_MAPPING_VALUE]) / 2;
  80. return __assign(__assign({}, initLineOption), { start: [x[datumIndex - 1] || datumIndex - 0.5, percent], end: [x[datumIndex - 1] || datumIndex - 0.5, percent + 0.05] });
  81. };
  82. conversionTagComponent(getLineCoordinate)(params);
  83. return params;
  84. }
  85. /**
  86. * 基础漏斗
  87. * @param chart
  88. * @param options
  89. */
  90. export function basicFunnel(params) {
  91. return flow(field, geometry, transpose, conversionTag)(params);
  92. }
  93. //# sourceMappingURL=basic.js.map