ze-react-component-library/es/ZECard/representations/map/index.js

ZeroETP React Component Library

import "antd/es/result/style";
import _Result from "antd/es/result";

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
  function adopt(value) {
    return value instanceof P ? value : new P(function (resolve) {
      resolve(value);
    });
  }

  return new (P || (P = Promise))(function (resolve, reject) {
    function fulfilled(value) {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    }

    function rejected(value) {
      try {
        step(generator["throw"](value));
      } catch (e) {
        reject(e);
      }
    }

    function step(result) {
      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    }

    step((generator = generator.apply(thisArg, _arguments || [])).next());
  });
};

var __generator = this && this.__generator || function (thisArg, body) {
  var _ = {
    label: 0,
    sent: function sent() {
      if (t[0] & 1) throw t[1];
      return t[1];
    },
    trys: [],
    ops: []
  },
      f,
      y,
      t,
      g;
  return g = {
    next: verb(0),
    "throw": verb(1),
    "return": verb(2)
  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
    return this;
  }), g;

  function verb(n) {
    return function (v) {
      return step([n, v]);
    };
  }

  function step(op) {
    if (f) throw new TypeError("Generator is already executing.");

    while (_) {
      try {
        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
        if (y = 0, t) op = [op[0] & 2, t.value];

        switch (op[0]) {
          case 0:
          case 1:
            t = op;
            break;

          case 4:
            _.label++;
            return {
              value: op[1],
              done: false
            };

          case 5:
            _.label++;
            y = op[1];
            op = [0];
            continue;

          case 7:
            op = _.ops.pop();

            _.trys.pop();

            continue;

          default:
            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
              _ = 0;
              continue;
            }

            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
              _.label = op[1];
              break;
            }

            if (op[0] === 6 && _.label < t[1]) {
              _.label = t[1];
              t = op;
              break;
            }

            if (t && _.label < t[2]) {
              _.label = t[2];

              _.ops.push(op);

              break;
            }

            if (t[2]) _.ops.pop();

            _.trys.pop();

            continue;
        }

        op = body.call(thisArg, _);
      } catch (e) {
        op = [6, e];
        y = 0;
      } finally {
        f = t = 0;
      }
    }

    if (op[0] & 5) throw op[1];
    return {
      value: op[0] ? op[1] : void 0,
      done: true
    };
  }
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

import React, { useState, memo } from "react";
import { useRequest } from "@umijs/hooks";
import { config, getHierarchyCodeLength, findPropByName } from "zeroetp-api-sdk";
import * as echarts from "echarts";
import _ from "underscore";
// @ts-ignore
import MapSvg from "./map.svg";
import Chart from "../../../components/Chart";
import { formatWithProperty } from "../../../util";
import { isPredsValid } from "../common/util";
import { useEChartsExtraTheme } from "../../../hooks/useFrontConfig";
import useLocale from "../../../hooks/useLocale";
/**
 * 从idList中获得共同的祖先
 * @param idList
 * @returns
 */

var getCommonAncestor = function getCommonAncestor(schema, level, idList) {
  if (!schema.hierarchy) return;
  var totalCodeLength = 0;
  var commonAncestor = "";

  var _loop_1 = function _loop_1(hierarchy) {
    if (hierarchy.name === level) return "break";
    totalCodeLength += hierarchy.code_length;
    var set = new Set();
    idList.forEach(function (id) {
      return set.add(id.slice(0, totalCodeLength));
    });

    if (set.size > 1) {
      return "break";
    }

    if (set.size > 0) {
      commonAncestor = Array.from(set)[0];
    }
  };

  for (var _i = 0, _a = schema.hierarchy; _i < _a.length; _i++) {
    var hierarchy = _a[_i];

    var state_1 = _loop_1(hierarchy);

    if (state_1 === "break") break;
  }

  return commonAncestor;
};
/**
 * 根据result和groupbyID，拼凑出region_level的格式
 * @param schema
 * @param data
 * @param groupbyItem
 */


var getMapID = function getMapID(schema, data, groupbyItem) {
  var level = groupbyItem.level;
  var region = getCommonAncestor(schema, level, data.map(function (i) {
    return i._id;
  }));
  return region + "_" + level;
};

var MapChart = /*#__PURE__*/memo(function (props) {
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;

  var data = props.result,
      userOption = props.option,
      eventsDict = props.eventsDict,
      style = props.style,
      isMobile = props.isMobile,
      restProps = __rest(props, ["result", "option", "eventsDict", "style", "isMobile"]);

  var _p = useState(),
      map = _p[0],
      setMap = _p[1];

  var extraTheme = useEChartsExtraTheme();
  var level = data === null || data === void 0 ? void 0 : data.logicform.groupby[0].level;
  var t = useLocale().t;
  useRequest(function () {
    var _a, _b, _c, _d, _e, _f;

    if (((_a = data === null || data === void 0 ? void 0 : data.logicform) === null || _a === void 0 ? void 0 : _a.groupby) && data && data.schema) {
      if ((data === null || data === void 0 ? void 0 : data.logicform.groupby.length) === 1 && (data === null || data === void 0 ? void 0 : data.logicform.groupby[0].level)) {
        // 新逻辑
        // 自定义geo
        if ((_c = (_b = data.columnProperties) === null || _b === void 0 ? void 0 : _b[0].schema) === null || _c === void 0 ? void 0 : _c.maps) {
          var mapID_1 = getMapID(data.columnProperties[0].schema, data.result, data.logicform.groupby[0]); // console.log("to fectch", `${config.API_URL}/maps/${mapID}.json`);

          if ((_d = data.columnProperties) === null || _d === void 0 ? void 0 : _d[0].schema.maps.find(function (m) {
            return m === mapID_1;
          })) {
            return fetch("" + config.API_URL + (window.publicPath || "/") + "maps/" + mapID_1 + ".json");
          }
        } // 老逻辑：这里就直接假定了地图有以下level：区域、省市、城市、区县
        // 决定地图选哪张


        if (((_f = (_e = data.columnProperties) === null || _e === void 0 ? void 0 : _e[0].schema) === null || _f === void 0 ? void 0 : _f._id) === "geo") {
          var level_1 = data === null || data === void 0 ? void 0 : data.logicform.groupby[0].level;
          var mapID = void 0;

          if (level_1 === "国家") {
            mapID = "world";
          } else if (level_1 === "省市") {
            mapID = "100000";
          } else if (level_1 === "城市") {
            var startCodeLength_1 = getHierarchyCodeLength(data.columnProperties[0].schema, "省市");
            var codes_1 = new Set();
            data.result.forEach(function (i) {
              return codes_1.add(i._id.substring(0, startCodeLength_1));
            });
            var codeArray = Array.from(codes_1);

            if (codeArray.length === 1) {
              mapID = codeArray[0].substring(startCodeLength_1 - codeArray[0].length) + "0000";
            }
          } else if (level_1 === "区县") {
            var startCodeLength_2 = getHierarchyCodeLength(data.columnProperties[0].schema, "城市");
            var codes_2 = new Set();
            data.result.forEach(function (i) {
              return codes_2.add(i._id.substring(0, startCodeLength_2));
            });
            var codeArray = Array.from(codes_2);

            if (codeArray.length === 1) {
              mapID = codeArray[0].substring(startCodeLength_2 - codeArray[0].length) + "00";
            }
          }

          if (mapID) {
            // mapID的长度为6位
            if (mapID.length > 6) {
              mapID = mapID.substring(mapID.length - 6);
            }

            if (mapID === "world") {
              return fetch("" + config.API_URL + (window.publicPath || "/") + "map/world.geo.json");
            }

            return fetch("" + config.API_URL + (window.publicPath || "/") + "map/china/" + mapID + ".json");
          }
        }
      }
    }

    return new Promise(function (resolve) {
      return resolve(null);
    });
  }, {
    onSuccess: function onSuccess(response) {
      return __awaiter(void 0, void 0, void 0, function () {
        var json, mapID;
        return __generator(this, function (_a) {
          switch (_a.label) {
            case 0:
              if (!response) return [3
              /*break*/
              , 2];
              return [4
              /*yield*/
              , response.json()];

            case 1:
              json = _a.sent();
              mapID = response.url.split("/").pop().split(".")[0];
              echarts.registerMap(mapID, json);
              setMap(mapID);
              _a.label = 2;

            case 2:
              return [2
              /*return*/
              ];
          }
        });
      });
    },
    refreshDeps: [data]
  }); // 最后一个groupbyItem

  var groupbyItem;

  if (((_a = data === null || data === void 0 ? void 0 : data.logicform) === null || _a === void 0 ? void 0 : _a.groupby.length) > 0) {
    groupbyItem = data.logicform.groupby[data.logicform.groupby.length - 1];
  }

  var chartOption = {
    tooltip: {
      trigger: "item"
    },
    legend: null
  };

  if (map && data) {
    chartOption.series = [{
      roam: !isMobile,
      type: "map",
      scaleLimit: {
        min: 1,
        max: 5
      },
      map: map,
      label: {
        show: ((_b = data === null || data === void 0 ? void 0 : data.result) === null || _b === void 0 ? void 0 : _b.length) <= 10,
        formatter: function formatter(params) {
          if (Number.isNaN(params.value)) {
            return "";
          }

          return params.name;
        }
      },
      emphasis: __assign(__assign({}, (_c = extraTheme === null || extraTheme === void 0 ? void 0 : extraTheme.map) === null || _c === void 0 ? void 0 : _c.emphasis), {
        label: __assign(__assign({}, (_e = (_d = extraTheme === null || extraTheme === void 0 ? void 0 : extraTheme.map) === null || _d === void 0 ? void 0 : _d.emphasis) === null || _e === void 0 ? void 0 : _e.label), {
          formatter: function formatter(params) {
            return params.name;
          }
        })
      })
    }];
    var dimension = 1;

    if ((userOption === null || userOption === void 0 ? void 0 : userOption.visualMap) && !Array.isArray(userOption.visualMap) && "dimension" in userOption.visualMap) {
      dimension = userOption.visualMap.dimension;
    }

    var mainProperty_1 = data.columnProperties[dimension]; // VisualMap，确定一下min和max

    var values = data.result.map(function (i) {
      return i[mainProperty_1.name];
    });

    var max = _.max(values);

    var min = _.min(values);

    if (min === max) {
      if (min > 0) min = 0; // feat: 如果上下限一样，那么下限变为0
    } // precision


    var precision = 0;

    if (mainProperty_1.type === "percentage") {
      precision = 2;
    } // @ts-ignore


    var visualMapColor = (_f = echarts.theme) === null || _f === void 0 ? void 0 : _f.visualMapColor;
    chartOption.visualMap = {
      min: min,
      max: max,
      precision: precision,
      text: ["" + t("最高") + (((_g = mainProperty_1.unit) === null || _g === void 0 ? void 0 : _g.length) > 0 ? "(" + mainProperty_1.unit + ")" : ""), t("最低")],
      realtime: false,
      calculable: true,
      dimension: dimension,
      formatter: function formatter(v) {
        return formatWithProperty(mainProperty_1, v);
      },
      inRange: visualMapColor ? {
        color: visualMapColor
      } : undefined
    };

    if (isMobile) {
      chartOption.visualMap.left = "center";
      chartOption.visualMap.orient = "horizontal";
    }
  }

  if (data) {
    if (((_j = (_h = data.columnProperties) === null || _h === void 0 ? void 0 : _h[0].schema) === null || _j === void 0 ? void 0 : _j._id) === "geo" && !((_k = data.columnProperties) === null || _k === void 0 ? void 0 : _k[0].schema.maps)) {
      if (["国家", "省市", "城市", "区县"].indexOf(level) < 0) {
        return /*#__PURE__*/React.createElement(_Result, {
          status: "info",
          title: t("暂不支持的地图类型")
        });
      }
    }

    if (!data.logicform.groupby || ((_m = (_l = data.columnProperties) === null || _l === void 0 ? void 0 : _l[0].schema) === null || _m === void 0 ? void 0 : _m._id) !== "geo" && !((_o = data.columnProperties) === null || _o === void 0 ? void 0 : _o[0].schema.maps) || data.logicform.groupby.length !== 1 || !data.logicform.groupby[0].level) {
      return /*#__PURE__*/React.createElement(_Result, {
        status: "info",
        title: t("此数据不支持地图类型")
      });
    }
  }

  return /*#__PURE__*/React.createElement(Chart, __assign({}, restProps, {
    result: data,
    chartOption: chartOption,
    userOption: userOption,
    eventsDict: eventsDict,
    style: style,
    isMobile: isMobile,
    useNameAsDimension: true
  }));
});
export var isMapValid = function isMapValid(result) {
  var _a;

  if (!result) return false;
  var logicform = result.logicform,
      schema = result.schema;
  var predsValid = isPredsValid(logicform);

  if (predsValid && ((_a = logicform.groupby) === null || _a === void 0 ? void 0 : _a.length) === 1) {
    var groupbyItem_1 = logicform.groupby[0];
    var groupbyProp = findPropByName(schema, groupbyItem_1._id);

    if (groupbyItem_1.level && (groupbyProp === null || groupbyProp === void 0 ? void 0 : groupbyProp.schema) && (groupbyProp === null || groupbyProp === void 0 ? void 0 : groupbyProp.ref) === "geo") {
      if (groupbyItem_1.level === "省市" || groupbyItem_1.level === "国家") {
        // 目前仅支持到省市开始的level
        return true;
      } else if (groupbyItem_1.level === "城市" || groupbyItem_1.level === "区县") {
        // 要保证所有数据都在同一个上层level中
        var hierarchIndex = groupbyProp.schema.hierarchy.findIndex(function (h) {
          return h.name === groupbyItem_1.level;
        });
        var prevCodeLength_1 = getHierarchyCodeLength(groupbyProp.schema, groupbyProp.schema.hierarchy[hierarchIndex - 1].name);
        var prevCodeSet_1 = new Set();
        result.result.forEach(function (r) {
          prevCodeSet_1.add(r._id.substring(0, prevCodeLength_1));
        });

        if (prevCodeSet_1.size === 1) {
          return true;
        }
      }
    } // 这个参数，可以暂时不影响到内置的geo


    if (groupbyItem_1.level && (groupbyProp === null || groupbyProp === void 0 ? void 0 : groupbyProp.schema) && (groupbyProp === null || groupbyProp === void 0 ? void 0 : groupbyProp.schema.maps)) {
      var mapID_2 = getMapID(groupbyProp.schema, result.result, groupbyItem_1);
      return groupbyProp.schema.maps.find(function (id) {
        return id === mapID_2;
      }) != null;
    }
  }

  return false;
};
var map = {
  key: "map",
  title: "地图",
  icon: MapSvg,
  tip: "搜索结果中至少一个地址列和一个数值列",
  type: "advanced",
  component: function component(props) {
    return /*#__PURE__*/React.createElement(MapChart, __assign({}, props));
  },
  valid: isMapValid
};
export default map;