@xq-labs/data-ui-v2 0.2.1 → 0.4.0

package/lib/index-6039f724.js

@@ -0,0 +1,492 @@
+'use strict';
+
+var echarts = require('echarts/core');
+var charts = require('echarts/charts');
+var components = require('echarts/components');
+var renderers = require('echarts/renderers');
+var withInstall = require('./with-install-4304a8ea.js');
+var colors = require('./colors-19a7242d.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var echarts__namespace = /*#__PURE__*/_interopNamespaceDefault(echarts);
+
+function toNumber(value) {
+  var fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var numericValue = Number(value);
+  return Number.isFinite(numericValue) ? numericValue : fallback;
+}
+function isValidKey(value) {
+  return typeof value === 'string' && value.trim() !== '';
+}
+function normalizeColor(value) {
+  return typeof value === 'string' && value.trim() !== '' ? value.trim() : '';
+}
+function pickSeriesColor(item, index, colors$1) {
+  var itemColor = normalizeColor(item && item.color);
+  var colorList = Array.isArray(colors$1) ? colors$1 : [];
+  var paletteColor = normalizeColor(colorList[index]);
+  var defaultColor = colors.DEFAULT_COLORS[index % colors.DEFAULT_COLORS.length];
+  return itemColor || paletteColor || defaultColor;
+}
+
+/**
+ * 归一化雷达图指标配置。
+ * 指标 key 是业务字段映射的核心，缺失 key 的指标会被过滤，避免数值顺序错位。
+ */
+function normalizeRadarIndicators() {
+  var indicators = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var rawIndicators = Array.isArray(indicators) ? indicators : [];
+  return rawIndicators.filter(function (item) {
+    return item && isValidKey(item.key);
+  }).map(function (item) {
+    var min = toNumber(item.min, 0);
+    var max = Math.max(min, toNumber(item.max, 100));
+    return {
+      key: item.key.trim(),
+      name: item.name === undefined || item.name === '' ? item.key.trim() : String(item.name),
+      min: min,
+      max: max,
+      unit: item.unit === undefined ? '' : String(item.unit)
+    };
+  });
+}
+
+/**
+ * 归一化雷达图业务数据。
+ * 输出结构同时保留原始数据，便于后续 tooltip 或 customOption 做业务级扩展。
+ */
+function normalizeRadarData() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    data = _ref.data,
+    indicators = _ref.indicators,
+    _ref$nameKey = _ref.nameKey,
+    nameKey = _ref$nameKey === void 0 ? 'name' : _ref$nameKey,
+    _ref$colors = _ref.colors,
+    colors = _ref$colors === void 0 ? [] : _ref$colors;
+  var rawData = Array.isArray(data) ? data : [];
+  var safeNameKey = isValidKey(nameKey) ? nameKey : 'name';
+  return rawData.map(function () {
+    var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var index = arguments.length > 1 ? arguments[1] : undefined;
+    var name = item[safeNameKey] === undefined || item[safeNameKey] === '' ? "\u6570\u636E".concat(index + 1) : String(item[safeNameKey]);
+    var color = pickSeriesColor(item, index, colors);
+    return {
+      name: name,
+      value: indicators.map(function (indicator) {
+        return toNumber(item[indicator.key], 0);
+      }),
+      color: color,
+      rawData: item
+    };
+  });
+}
+
+/**
+ * 汇总 RadarChart 构建层所需的标准协议。
+ */
+function normalizeRadarInput() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    data = _ref2.data,
+    indicators = _ref2.indicators,
+    nameKey = _ref2.nameKey,
+    colors = _ref2.colors;
+  var normalizedIndicators = normalizeRadarIndicators(indicators);
+  var normalizedData = normalizeRadarData({
+    data: data,
+    indicators: normalizedIndicators,
+    nameKey: nameKey,
+    colors: colors
+  });
+  return {
+    indicators: normalizedIndicators,
+    seriesData: normalizedData
+  };
+}
+
+var RADAR_PRESETS = {
+  compare: {
+    legend: {
+      show: true,
+      bottom: 0
+    },
+    radar: {
+      radius: '68%',
+      center: ['50%', '48%'],
+      splitNumber: 4
+    }
+  },
+  score: {
+    legend: {
+      show: false
+    },
+    radar: {
+      radius: '72%',
+      center: ['50%', '50%'],
+      splitNumber: 5
+    }
+  }
+};
+
+/**
+ * 获取雷达图预设配置。
+ * 未命中时回退到 compare，保证异常 preset 不影响基础渲染。
+ */
+function getRadarPreset() {
+  var preset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'compare';
+  return RADAR_PRESETS[preset] || RADAR_PRESETS.compare;
+}
+
+function hexToRgba(color, opacity) {
+  var normalizedColor = typeof color === 'string' ? color.trim() : '';
+  var hex = normalizedColor.replace('#', '');
+  if (!/^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(hex)) {
+    return normalizedColor;
+  }
+  var fullHex = hex.length === 3 ? hex.split('').map(function (item) {
+    return item + item;
+  }).join('') : hex;
+  var red = parseInt(fullHex.slice(0, 2), 16);
+  var green = parseInt(fullHex.slice(2, 4), 16);
+  var blue = parseInt(fullHex.slice(4, 6), 16);
+  return "rgba(".concat(red, ", ").concat(green, ", ").concat(blue, ", ").concat(opacity, ")");
+}
+
+/**
+ * 面积雷达图：折线、拐点和半透明面积都使用当前系列色。
+ */
+function createAreaRadarOption(_ref) {
+  var seriesData = _ref.seriesData;
+  return {
+    series: [{
+      type: 'radar',
+      data: seriesData.map(function (item) {
+        return {
+          name: item.name,
+          value: item.value,
+          rawData: item.rawData,
+          lineStyle: {
+            width: 2,
+            color: item.color
+          },
+          itemStyle: {
+            color: item.color
+          },
+          areaStyle: {
+            color: hexToRgba(item.color, 0.16)
+          }
+        };
+      })
+    }]
+  };
+}
+
+/**
+ * 折线雷达图：只展示轮廓线与拐点，不生成面积填充。
+ */
+function createLineRadarOption(_ref) {
+  var seriesData = _ref.seriesData;
+  return {
+    series: [{
+      type: 'radar',
+      data: seriesData.map(function (item) {
+        return {
+          name: item.name,
+          value: item.value,
+          rawData: item.rawData,
+          lineStyle: {
+            width: 2,
+            color: item.color
+          },
+          itemStyle: {
+            color: item.color
+          }
+        };
+      })
+    }]
+  };
+}
+
+var DEFAULT_VARIANT = 'area';
+var RADAR_PUBLIC_VARIANTS = ['area', 'line'];
+var variantFactory = {
+  area: createAreaRadarOption,
+  line: createLineRadarOption
+};
+function resolveVariantName(variant) {
+  return RADAR_PUBLIC_VARIANTS.includes(variant) ? variant : DEFAULT_VARIANT;
+}
+
+/**
+ * 构建雷达图公共基础 option。
+ * indicator 使用 adapter 已归一化后的结果，避免业务字段顺序与 ECharts value 数组错位。
+ */
+function createBaseRadarOption(normalizedInput) {
+  var legendData = normalizedInput.seriesData.map(function (item) {
+    return item.name;
+  });
+  return {
+    color: colors.DEFAULT_COLORS,
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      data: legendData
+    },
+    radar: {
+      indicator: normalizedInput.indicators.map(function (item) {
+        return {
+          name: item.name,
+          max: item.max,
+          min: item.min
+        };
+      })
+    },
+    series: []
+  };
+}
+
+/**
+ * 构建 RadarChart 最终 option。
+ * 合并顺序保持与现有图表一致：base -> preset -> variant -> customOption。
+ */
+function buildRadarOption() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    data = _ref.data,
+    indicators = _ref.indicators,
+    _ref$nameKey = _ref.nameKey,
+    nameKey = _ref$nameKey === void 0 ? 'name' : _ref$nameKey,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? DEFAULT_VARIANT : _ref$variant,
+    _ref$preset = _ref.preset,
+    preset = _ref$preset === void 0 ? 'compare' : _ref$preset,
+    _ref$colors = _ref.colors,
+    colors$1 = _ref$colors === void 0 ? [] : _ref$colors,
+    customOption = _ref.customOption;
+  var normalizedInput = normalizeRadarInput({
+    data: data,
+    indicators: indicators,
+    nameKey: nameKey,
+    colors: colors$1
+  });
+  var baseOption = createBaseRadarOption(normalizedInput);
+  var presetOption = getRadarPreset(preset);
+  var resolvedVariant = resolveVariantName(variant);
+  var createVariantOption = variantFactory[resolvedVariant] || variantFactory[DEFAULT_VARIANT];
+  var variantOption = createVariantOption(normalizedInput);
+  return colors.mergeChartOption(colors.mergeChartOption(baseOption, presetOption, variantOption), customOption);
+}
+
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+/**
+ * RadarChart 使用 ECharts 按需模式，必须显式注册雷达图系列和 radar 坐标系。
+ */
+echarts__namespace.use([charts.RadarChart, components.TooltipComponent, components.LegendComponent, components.RadarComponent, components.TitleComponent, renderers.CanvasRenderer]);
+var script = {
+  name: 'RadarChart',
+  components: {
+    BaseChart: withInstall.BaseChart
+  },
+  props: {
+    /**
+     * 雷达图业务数据数组。
+     * 每一项代表一个雷达系列，例如本月、上月、目标值等。
+     */
+    data: {
+      type: Array,
+      "default": function _default() {
+        return [];
+      }
+    },
+    /**
+     * 雷达指标配置。
+     * key 用来映射 data 中的字段，name/max/min 用来生成 ECharts indicator。
+     */
+    indicators: {
+      type: Array,
+      "default": function _default() {
+        return [];
+      }
+    },
+    /**
+     * 系列名称字段。
+     * 默认读取 data[i].name，适配大多数业务数据。
+     */
+    nameKey: {
+      type: String,
+      "default": 'name'
+    },
+    /**
+     * 雷达图公开视觉形态：
+     * - area：带半透明面积填充
+     * - line：仅展示折线和拐点
+     */
+    variant: {
+      type: String,
+      "default": 'area',
+      validator: function validator(value) {
+        return RADAR_PUBLIC_VARIANTS.includes(value);
+      }
+    },
+    /**
+     * 展示预设。
+     * compare 用于多对象对比，score 用于单对象能力画像。
+     */
+    preset: {
+      type: String,
+      "default": 'compare'
+    },
+    /**
+     * 组件级系列色板。
+     * 优先级低于 data[i].color，高于内置默认色板。
+     */
+    colors: {
+      type: Array,
+      "default": function _default() {
+        return [];
+      }
+    },
+    /**
+     * 额外透传给 ECharts option 的自定义配置。
+     * 会在 base / preset / variant 合并后作为最高优先级覆盖。
+     */
+    customOption: {
+      type: Object,
+      "default": function _default() {
+        return {};
+      }
+    },
+    /**
+     * 图表 loading 状态。
+     * 由 BaseChart 统一接管组件层遮罩式 loading UI。
+     */
+    loading: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * 统一状态展示配置。
+     * 负责收拢空态文案、空态图片与 loading 文案。
+     */
+    stateConfig: {
+      type: Object,
+      "default": function _default() {
+        return {};
+      }
+    },
+    /**
+     * 图表容器高度。
+     * 支持数字像素值或原样透传的 CSS 高度字符串。
+     */
+    height: {
+      type: [String, Number],
+      "default": 320
+    }
+  },
+  computed: {
+    /**
+     * data 为空或 indicators 缺少有效 key 时进入空态，避免渲染无指标雷达图。
+     */
+    isEmpty: function isEmpty() {
+      var hasIndicator = Array.isArray(this.indicators) ? this.indicators.some(function (item) {
+        return item && typeof item.key === 'string' && item.key.trim();
+      }) : false;
+      return colors.isEmptyData(this.data) || !hasIndicator;
+    },
+    /**
+     * 将公开 props 汇总为 builder 所需输入。
+     */
+    chartOption: function chartOption() {
+      return buildRadarOption({
+        data: this.data,
+        indicators: this.indicators,
+        nameKey: this.nameKey,
+        variant: this.variant,
+        preset: this.preset,
+        colors: this.colors,
+        customOption: this.customOption
+      });
+    }
+  }
+};
+
+var css_248z = "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n";
+withInstall.styleInject(css_248z);
+
+/* script */
+var __vue_script__ = script;
+/* template */
+var __vue_render__ = function __vue_render__() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("BaseChart", {
+    attrs: {
+      option: _vm.chartOption,
+      loading: _vm.loading,
+      empty: _vm.isEmpty,
+      "state-config": _vm.stateConfig,
+      height: _vm.height
+    },
+    on: {
+      "chart-click": function chartClick($event) {
+        return _vm.$emit("chart-click", $event);
+      },
+      ready: function ready($event) {
+        return _vm.$emit("ready", $event);
+      }
+    }
+  });
+};
+var __vue_staticRenderFns__ = [];
+__vue_render__._withStripped = true;
+
+/* style */
+var __vue_inject_styles__ = undefined;
+/* scoped */
+var __vue_scope_id__ = "data-v-0bf4201f";
+/* module identifier */
+var __vue_module_identifier__ = undefined;
+/* functional template */
+var __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+var __vue_component__ = /*#__PURE__*/withInstall.normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+var RadarChart = __vue_component__;
+
+exports.RadarChart = RadarChart;