How to use the @antv/util.map function in @antv/util

function getFirstShapeData(shapes) {
  // 用于分组的场景
  const shapeData: any[] = shapes[0].get('origin'); // 分组中的第一个shape的data
  return _.map(shapeData, (d) => d._origin);
}

private getLineAxisCfg(scale: Scale, axisOption: AxisCfg, direction: DIRECTION): object {
    const container = this.axisContainer;
    const coordinate = this.view.getCoordinate();

    const region = getAxisRegion(coordinate, direction);

    const baseAxisCfg = {
      container,
      ...region,
      ticks: map(scale.getTicks(), (tick) => ({ name: tick.text, value: tick.value })),
      title: {
        text: getName(scale),
      },
      verticalFactor: coordinate.isPolar
        ? getAxisFactorByRegion(region, coordinate.getCenter()) * -1
        : getAxisFactorByRegion(region, coordinate.getCenter()),
    };

    const axisThemeCfg = getAxisThemeCfg(this.view.getTheme(), direction);
    // the cfg order should be ensure
    const cfg = deepMix({}, baseAxisCfg, axisThemeCfg, axisOption);
    return mix(cfg, this.getAnimateCfg(cfg));
  }

_.each(attributeOption, (option: AttributeOption, attrType: string) => {
      const attrCfg: AttributeInstanceCfg = {
        ...option,
      };
      const { callback, values, fields = [] } = attrCfg;

      // 给每一个字段创建 scale
      const scales = _.map(fields, (field) => {
        return this._createScale(field);
      });

      // 特殊逻辑：饼图需要填充满整个空间
      if (coordinate.type === 'theta' && attrType === 'position' && scales.length > 1) {
        const yScale = scales[1];
        yScale.change({
          nice: false,
          min: 0,
          max: Math.max.apply(null, yScale.values),
        });
      }

      attrCfg.scales = scales;

      if (

private _getDefaultTooltipOptions() {
    const view = this.view;
    const options = this.options;
    const theme = this.theme;
    const defaultCfg = _.mix({}, theme.tooltip);
    const elements = _.filter(view.getElements(), (element: Element): boolean => element.get('visible'));
    const shapes = _.uniq(_.map(elements, (element: Element) => element.get('type')));

    const isTransposed = view.get('coord') ? view.get('coord').isTransposed : false;

    let crosshairsCfg;
    if (view.get('coord') && view.get('coord').type === 'cartesian') {
      if (shapes[0] === 'interval') {
        if (options.shape !== false) {
          const crosshairs = _.mix({}, theme.tooltipCrosshairsRect);
          crosshairs.isTransposed = isTransposed;
          crosshairsCfg = {
            zIndex: 0, // 矩形背景框不可覆盖 geom
            crosshairs,
          };
        }
      } else if (_.indexOf(TYPE_SHOW_CROSSHAIRS, shapes[0]) > -1) {
        const crosshairs = _.mix({}, theme.tooltipCrosshairsLine);

export function getCircleGridItems(coordinate: Coordinate, xScale: Scale, yScale: Scale, dim: string) {
  const count = xScale.values.length;

  // x
  if (dim === 'x') {
    return map(Array(count), (__: any, idx: number) => {
      return {
        points: [coordinate.convert({ x: 0, y: 0 }), coordinate.convert({ x: idx / count, y: 1 })],
      };
    });
  }

  // y
  if (dim === 'y') {
    return map(yScale.getTicks(), (tick: Tick) => {
      const { value } = tick;

      const points = map(Array(count), (__: any, idx: number) => {
        return coordinate.convert({
          x: idx / count,
          y: value,
        });

attrLegendCfg = {
        ...attrLegendCfg,
        track: {
          style: {
            // size 的选中前景色，对于 color，则直接使用 color 标识
            // @ts-ignore
            fill: attr.type === 'size' ? this.view.getTheme().defaultColor : undefined,
          },
        },
      };
    }

    if (attr.type === 'color') {
      attrLegendCfg = {
        ...attrLegendCfg,
        colors: map(items, (item) => item.attrValue),
      };
    }

    const container = this.container;
    // if position is not set, use top as default
    const direction = getDirection(legendOption);

    const layout = getLegendLayout(direction);

    // 基础配置，从当前数据中读到的配置
    const baseCfg = {
      container,
      layout,
      ...attrLegendCfg,
    };

public getAttrValues(attr: Attribute, record: LooseObject) {
    const scales = attr.scales;

    const params = _.map(scales, (scale: Scale) => {
      const field = scale.field;
      if (scale.type === 'identity') {
        return scale.values[0];
      }
      if (scale.isCategory) {
        return record[field]; // 数据有可能发生过 adjust
      }
      return record[field];
    });
    return attr.mapping(...params);
  }

export function getLineGridItems(coordinate: Coordinate, scale: Scale, dim: string) {
  return map(scale.getTicks(), (tick: Tick) => {
    const { value } = tick;
    return {
      points: [
        coordinate.convert(dim === 'y' ? { x: 0, y: value } : { x: value, y: 0 }),
        coordinate.convert(dim === 'y' ? { x: 1, y: value } : { x: value, y: 1 }),
      ],
    };
  });
}

private getSliderTrendData(): number[] {
    const { data, yField } = this.getViewLayer().options;

    return map(data, (item) => item[yField]);
  }