@opentinyvue/vue-huicharts-map 2.21.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.d.ts

@@ -0,0 +1,3 @@
+import HuiChartsMap from './src/chart-map.vue';
+export { HuiChartsMap };
+export default HuiChartsMap;

package/lib/index.js

@@ -0,0 +1,314 @@
+import Core, { getMapJSON, isNull, itemLabel, itemPoint, itemContent, getFormatted } from '@opentinyvue/vue-huicharts-core';
+import * as echarts from 'echarts';
+import { $prefix } from '@opentinyvue/vue-common';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+var getLegendMap = function getLegendMap2(args, legendItemStyle) {
+  var metrics = args.metrics, legendName = args.legendName, labelMap = args.labelMap;
+  if (!labelMap && !legendName) {
+    return {
+      data: metrics
+    };
+  }
+  var data2 = labelMap ? metrics.map(function(item) {
+    return isNull(labelMap[item]) ? item : labelMap[item];
+  }) : metrics;
+  return _extends({}, legendItemStyle, {
+    data: data2,
+    formatter: function formatter(name) {
+      return isNull(legendName[name]) ? name : legendName[name];
+    }
+  });
+};
+var getTooltip = function getTooltip2(_ref) {
+  var dataType = _ref.dataType, digit = _ref.digit, dataStore = _ref.dataStore, metrics = _ref.metrics, color = _ref.color, labelMap = _ref.labelMap;
+  function formatter(item) {
+    var tplt = [];
+    if (!item.name) {
+      return "";
+    }
+    tplt.push(itemLabel(item.name) + "<br>");
+    metrics.forEach(function(label, index) {
+      var title = isNull(labelMap[label]) ? label : labelMap[label];
+      tplt.push("" + itemPoint(color[index]) + itemLabel(title));
+      if (dataStore[item.name]) {
+        tplt.push(itemContent(getFormatted(dataStore[item.name][label], dataType[label], digit)));
+      } else {
+        tplt.push(itemContent("-"));
+      }
+      tplt.push("<br>");
+    });
+    return tplt.join("");
+  }
+  return {
+    trigger: "item",
+    formatter
+  };
+};
+var setGeoLabel = function setGeoLabel2(value, target, label) {
+  if (typeof value === "object") {
+    target[label] = value;
+  } else if (value) {
+    target[label] = {
+      show: true
+    };
+  }
+};
+var getSeries = function getSeries2(args) {
+  var position = args.position, selectData = args.selectData, dimension = args.dimension, metrics = args.metrics, rows = args.rows, label = args.label, selectedMode = args.selectedMode, roam = args.roam, center = args.center, aspectScale = args.aspectScale, zoom = args.zoom;
+  var boundingCoords = args.boundingCoords, labelMap = args.labelMap, scaleLimit = args.scaleLimit, mapGrid = args.mapGrid, _args$itemStyle = args.itemStyle, itemStyle = _args$itemStyle === void 0 ? {
+    areaColor: "rgba(25,25,25,0.05)"
+  } : _args$itemStyle;
+  var _ref2 = {}, _ref2$result = _ref2.result, result = _ref2$result === void 0 ? [] : _ref2$result, _ref2$mapBase = _ref2.mapBase, mapBase = _ref2$mapBase === void 0 ? {
+    type: "map",
+    map: position
+  } : _ref2$mapBase;
+  var _ref3 = {}, _ref3$emphasis = _ref3.emphasis, emphasis = _ref3$emphasis === void 0 ? {
+    itemStyle: {
+      areaColor: "rgba(25,25,25,0.2)"
+    },
+    label: {
+      color: "#191919"
+    }
+  } : _ref3$emphasis;
+  metrics.forEach(function(itemName) {
+    var name = !isNull(labelMap[itemName]) ? labelMap[itemName] : itemName;
+    var data2 = [];
+    var itemResult = _extends({
+      name,
+      data: data2,
+      selectedMode,
+      roam,
+      center,
+      aspectScale,
+      boundingCoords,
+      zoom,
+      scaleLimit
+    }, mapBase);
+    if (mapGrid) {
+      Object.keys(mapGrid).forEach(function(key) {
+        return itemResult[key] = mapGrid[key];
+      });
+    }
+    setGeoLabel(itemStyle, itemResult, "itemStyle");
+    setGeoLabel(label, itemResult, "label");
+    rows.forEach(function(row) {
+      return itemResult.data.push({
+        name: row[dimension],
+        value: row[itemName],
+        selected: selectData
+      });
+    });
+    itemResult.emphasis = emphasis;
+    itemResult.label = _extends({
+      color: "#191919"
+    }, itemResult.label);
+    result.push(itemResult);
+  });
+  return result;
+};
+var registerMap = function registerMap2(args, mapOrigin, echarts2) {
+  var _once = args._once, registerSign = args.registerSign, beforeRegisterMap = args.beforeRegisterMap, beforeRegisterMapOnce = args.beforeRegisterMapOnce;
+  var registerSignOnce = args.registerSignOnce, position = args.position, specialAreas = args.specialAreas;
+  if (!_once[registerSign] && beforeRegisterMap) {
+    mapOrigin = beforeRegisterMap(mapOrigin);
+  }
+  if (!_once[registerSign] && beforeRegisterMapOnce && !_once[registerSignOnce]) {
+    _once[registerSignOnce] = true;
+    mapOrigin = beforeRegisterMapOnce(mapOrigin);
+  }
+  if (!_once[registerSign]) {
+    _once[registerSign] = true;
+    echarts2.registerMap(position, mapOrigin, specialAreas);
+  }
+};
+var map = function map2(columns, rows, settings, extra) {
+  var _settings$position = settings.position, position = _settings$position === void 0 ? "" : _settings$position, _settings$selectData = settings.selectData, selectData = _settings$selectData === void 0 ? false : _settings$selectData, selectedMode = settings.selectedMode, _settings$label = settings.label, label = _settings$label === void 0 ? true : _settings$label, _settings$dataType = settings.dataType, dataType = _settings$dataType === void 0 ? {} : _settings$dataType, _settings$digit = settings.digit, digit = _settings$digit === void 0 ? 2 : _settings$digit;
+  var _settings$dimension = settings.dimension, dimension = _settings$dimension === void 0 ? columns[0] : _settings$dimension, roam = settings.roam, center = settings.center, aspectScale = settings.aspectScale, boundingCoords = settings.boundingCoords, zoom = settings.zoom;
+  var scaleLimit = settings.scaleLimit, _settings$legendName = settings.legendName, legendName = _settings$legendName === void 0 ? {} : _settings$legendName, _settings$labelMap = settings.labelMap, labelMap = _settings$labelMap === void 0 ? {} : _settings$labelMap, mapGrid = settings.mapGrid, itemStyle = settings.itemStyle, positionJsonLink = settings.positionJsonLink, emphasis = settings.emphasis;
+  var beforeRegisterMap = settings.beforeRegisterMap, beforeRegisterMapOnce = settings.beforeRegisterMapOnce, _settings$mapURLProfi = settings.mapURLProfix, mapURLProfix = _settings$mapURLProfi === void 0 ? extra.baseUrl || "" : _settings$mapURLProfi, _settings$specialArea = settings.specialAreas, specialAreas = _settings$specialArea === void 0 ? {} : _settings$specialArea;
+  var mapOrigin = settings.mapOrigin;
+  var metrics = columns.slice(0);
+  if (!settings.metrics) {
+    metrics.splice(columns.indexOf(dimension), 1);
+  } else {
+    metrics = settings.metrics;
+  }
+  var tooltipVisible = extra.tooltipVisible, legendVisible = extra.legendVisible, color = extra.color, _once = extra._once, echarts2 = extra.echarts;
+  var dataStore = {};
+  rows.forEach(function(row) {
+    return dataStore[row[dimension]] = row;
+  });
+  var tooltip = tooltipVisible ? getTooltip({
+    dataType,
+    digit,
+    dataStore,
+    metrics,
+    color,
+    labelMap
+  }) : {
+    show: false
+  };
+  var legend = legendVisible ? _extends({
+    show: true
+  }, getLegendMap({
+    metrics,
+    legendName,
+    labelMap
+  })) : {
+    show: false
+  };
+  var seriesParams = {
+    position,
+    selectData,
+    label,
+    itemStyle,
+    dimension,
+    metrics,
+    rows,
+    selectedMode,
+    roam
+  };
+  Object.assign(seriesParams, {
+    center,
+    aspectScale,
+    boundingCoords,
+    zoom,
+    labelMap,
+    scaleLimit,
+    mapGrid,
+    emphasis
+  });
+  var series = getSeries(seriesParams);
+  var registerSign = "MAP_REGISTER_" + position;
+  var registerSignOnce = "ONCE_MAP_REGISTER_" + position;
+  var registerOptions = {
+    _once,
+    beforeRegisterMap,
+    beforeRegisterMapOnce,
+    position
+  };
+  Object.assign(registerOptions, {
+    specialAreas,
+    registerSign,
+    registerSignOnce
+  });
+  if (mapOrigin) {
+    registerMap(registerOptions, mapOrigin, echarts2);
+    return {
+      series,
+      tooltip,
+      legend,
+      tipHtml: tooltip.formatter
+    };
+  }
+  var param = {
+    position,
+    positionJsonLink,
+    beforeRegisterMapOnce,
+    mapURLProfix
+  };
+  return getMapJSON(param).then(function(json) {
+    registerMap(registerOptions, json, echarts2);
+    return {
+      series,
+      tooltip,
+      legend,
+      tipHtml: tooltip.formatter
+    };
+  });
+};
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    staticClass: "hui-chart chart-box"
+  }, [_c("div", {
+    ref: "chartRef",
+    style: {
+      width: _vm.width,
+      height: _vm.height
+    }
+  }), _vm._t("default")], 2);
+};
+var staticRenderFns = [];
+var __vue2_script = {
+  name: $prefix + "ChartMap",
+  mixins: [Core],
+  data: function data() {
+    return {
+      iChartName: "RegionChart"
+    };
+  },
+  methods: {
+    updateChart: function updateChart() {
+      var _this$data = this.data, _this$data$columns = _this$data.columns, columns = _this$data$columns === void 0 ? [] : _this$data$columns, _this$data$rows = _this$data.rows, rows = _this$data$rows === void 0 ? [] : _this$data$rows;
+      var extra = {
+        tooltipVisible: this.tooltipVisible,
+        legendVisible: this.legendVisible,
+        extend: this.extend,
+        echarts,
+        color: ["#2070F3", "#55CCD9", "#715AF8", "#8AC8F3"],
+        _once: {
+          onresize: true
+        }
+      };
+      var option = map(columns, rows, this.settings, extra);
+      this.huiChartOption = _extends({}, option);
+    }
+  }
+};
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var HuiChartsMap = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+HuiChartsMap.install = function(Vue) {
+  Vue.component(HuiChartsMap.name, HuiChartsMap);
+};
+
+export { HuiChartsMap, HuiChartsMap as default };

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@opentinyvue/vue-huicharts-map",
+  "version": "2.21.0",
+  "description": "",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "@opentinyvue/vue-huicharts-core": "~2.21.0",
+    "@opentinyvue/vue-common": "~2.21.0"
+  },
+  "license": "MIT",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/chart-map.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue/types/vue").ExtendedVue<import("vue").default, {
+    iChartName: string;
+}, {
+    updateChart(): void;
+}, any, Record<never, any>>;
+export default _default;

package/src/map.d.ts

@@ -0,0 +1 @@
+export declare const map: (columns: any, rows: any, settings: any, extra: any) => any;

package/src/types.d.ts

@@ -0,0 +1,26 @@
+/**
+ *
+ * @title Props
+ */
+export interface TinyMapProps {
+    /**
+     * @zh 数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准
+     *
+     */
+    dimension?: object;
+    /**
+     * @zh 配置项，各图表 Settings 属性配置请查阅各图表详情页面
+     *
+     */
+    settings?: Object;
+    /**
+     * @zh 设置图表容器的宽度。
+     *
+     */
+    width?: string;
+    /**
+     * @zh 设置图表容器的高度
+     *
+     */
+    height?: string;
+}