funnel.js 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. var __rest = (this && this.__rest) || function (s, e) {
  2. var t = {};
  3. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
  4. t[p] = s[p];
  5. if (s != null && typeof Object.getOwnPropertySymbols === "function")
  6. for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  7. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
  8. t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import { Path } from '@antv/g';
  13. import { line, curveLinearClosed } from 'd3-shape';
  14. import { isTranspose } from '../../utils/coordinate';
  15. import { select } from '../../utils/selection';
  16. import { applyStyle, getShapeTheme, reorder } from '../utils';
  17. /**
  18. * Adjust and return the new `points`.
  19. */
  20. function getFunnelPoints(points, nextPoints, coordinate) {
  21. const [p0, p1, p2, p3] = points;
  22. if (isTranspose(coordinate)) {
  23. const newP1 = [nextPoints ? nextPoints[0][0] : p1[0], p1[1]];
  24. const newP2 = [nextPoints ? nextPoints[3][0] : p2[0], p2[1]];
  25. return [p0, newP1, newP2, p3];
  26. }
  27. const newP1 = [p1[0], nextPoints ? nextPoints[0][1] : p1[1]];
  28. const newP2 = [p2[0], nextPoints ? nextPoints[3][1] : p2[1]];
  29. return [p0, newP1, newP2, p3];
  30. }
  31. /**
  32. * Render funnel in different coordinate and using color channel for stroke and fill attribute.
  33. */
  34. export const Funnel = (options) => {
  35. const { adjustPoints = getFunnelPoints } = options, style = __rest(options, ["adjustPoints"]);
  36. return (points, value, coordinate, theme, point2d, ...args) => {
  37. const { index, mark, shape, defaultShape } = value;
  38. const _a = getShapeTheme(theme, mark, shape, defaultShape), { defaultColor } = _a, defaults = __rest(_a, ["defaultColor"]);
  39. const nextPoints = point2d[index + 1];
  40. const funnelPoints = adjustPoints(points, nextPoints, coordinate);
  41. const tpShape = !!isTranspose(coordinate);
  42. const [p0, p1, p2, p3] = tpShape ? reorder(funnelPoints) : funnelPoints;
  43. const { color = defaultColor, opacity } = value;
  44. const b = line().curve(curveLinearClosed)([p0, p1, p2, p3]);
  45. return select(new Path({}))
  46. .call(applyStyle, defaults)
  47. .style('path', b)
  48. .style('fill', color)
  49. .style('fillOpacity', opacity)
  50. .call(applyStyle, style)
  51. .node();
  52. };
  53. };
  54. Funnel.props = {
  55. defaultMarker: 'square',
  56. };
  57. //# sourceMappingURL=funnel.js.map