@opentiny/vue-renderless 3.1.0-alpha.0 → 3.5.0

package/chart-heatmap/index.js

@@ -0,0 +1,407 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toArray from "@babel/runtime/helpers/toArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { getFormated, getBmap, getAmap, getMapJSON } from '@opentiny/vue-renderless/chart-core/deps/utils';
+import { HEAT_MAP_COLOR, itemPoint, itemLabel, itemContent } from '@opentiny/vue-renderless/chart-core/deps/constants';
+var getAxisList = function getAxisList(rows, label) {
+  var result = [];
+  rows.forEach(function (row) {
+    return result.indexOf(row[label]) === -1 && result.push(row[label]);
+  });
+  return result;
+};
+var getData = function getData(args) {
+  var extraMetrics = args.extraMetrics,
+    innerXAxisList = args.innerXAxisList,
+    innerYAxisList = args.innerYAxisList,
+    metrics = args.metrics,
+    rows = args.rows,
+    type = args.type,
+    xDim = args.xDim,
+    yDim = args.yDim;
+  var result = null;
+  if (type !== 'cartesian') {
+    result = rows.map(function (row) {
+      return {
+        value: [row[xDim], row[yDim], metrics ? row[metrics] : 1]
+      };
+    });
+  } else {
+    result = rows.map(function (row) {
+      var _ref = {},
+        xIndex = _ref.xIndex,
+        yIndex = _ref.yIndex,
+        value = _ref.value,
+        extra = _ref.extra;
+      yIndex = innerYAxisList.indexOf(row[yDim]);
+      xIndex = innerXAxisList.indexOf(row[xDim]);
+      extra = extraMetrics.map(function (m) {
+        return row[m] || '-';
+      });
+      value = metrics ? row[metrics] : 1;
+      return {
+        value: [xIndex, yIndex, value].concat(extra),
+        label: {
+          show: true,
+          color: '#191919'
+        }
+      };
+    });
+  }
+  return result;
+};
+var getAxis = function getAxis(list, name, type) {
+  return {
+    data: list,
+    name: name,
+    nameLocation: 'end',
+    type: 'category',
+    splitArea: {
+      show: false
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: '#6d8ff0'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#4E4E4E'
+    },
+    offset: type === 'y' ? 25 : 5,
+    zlevel: 1
+  };
+};
+var getVisualMap = function getVisualMap(args) {
+  var min = args.innerMin,
+    max = args.innerMax,
+    type = args.type,
+    heatColor = args.heatColor,
+    series = args.series;
+  var _ref2 = {},
+    extra = _ref2.extra;
+  if (type === 'map') {
+    extra = {};
+    !series[0].data.length && (extra.show = false);
+  } else if (type === 'bmap' || type === 'amap') {
+    extra = {
+      show: false
+    };
+  } else {
+    extra = {
+      dimension: 2
+    };
+  }
+  var defaultColor = type === 'map' || type === 'bmap' || type === 'amap' ? HEAT_MAP_COLOR : ['#fff', '#6D8FF0'];
+  return Object.assign(extra, {
+    min: min,
+    max: max,
+    calculable: true,
+    left: 'right',
+    bottom: 'center',
+    orient: 'vertical',
+    align: 'left',
+    borderColor: '#6D8FF0',
+    inverse: true,
+    inRange: {
+      color: heatColor || defaultColor
+    }
+  });
+};
+var getSeries = function getSeries(args) {
+  return [{
+    type: 'heatmap',
+    data: args.chartData
+  }];
+};
+var getTooltip = function getTooltip(args) {
+  var dataType = args.dataType,
+    innerXAxisList = args.innerXAxisList,
+    innerYAxisList = args.innerYAxisList,
+    digit = args.digit,
+    extraMetrics = args.extraMetrics,
+    metrics = args.metrics;
+  function formatter(_ref3) {
+    var color = _ref3.color,
+      data = _ref3.data;
+    var dataVal = data.value;
+    var _dataVal = _toArray(dataVal),
+      xDim = _dataVal[0],
+      yDim = _dataVal[1],
+      value = _dataVal[2],
+      extraData = _dataVal.slice(3);
+    var tplt = [itemContent("".concat(innerXAxisList[xDim], " ~ ").concat(innerYAxisList[yDim], "<br>"))];
+    extraMetrics.forEach(function (m, index) {
+      return tplt.push("".concat(m, ": ").concat(extraData[index], "<br>"));
+    });
+    tplt.push("".concat(itemPoint(color)).concat(itemLabel(metrics)).concat(itemContent(getFormated(value, dataType, digit)), "<br>"));
+    return tplt.join('');
+  }
+  return {
+    trigger: 'item',
+    formatter: formatter
+  };
+};
+var fixParam = function fixParam(_ref4) {
+  var type = _ref4.type,
+    rows = _ref4.rows,
+    dimension = _ref4.dimension,
+    metrics = _ref4.metrics,
+    extraMetrics = _ref4.extraMetrics,
+    chartData = _ref4.chartData,
+    innerXAxisList = _ref4.innerXAxisList,
+    innerYAxisList = _ref4.innerYAxisList;
+  var chartDataParams;
+  if (type !== 'cartesian') {
+    chartDataParams = {
+      rows: rows,
+      xDim: dimension[0],
+      yDim: dimension[1]
+    };
+    Object.assign(chartDataParams, {
+      metrics: metrics,
+      type: type,
+      extraMetrics: extraMetrics
+    });
+    chartData = getData(chartDataParams);
+  } else {
+    var flag = !innerXAxisList || !innerXAxisList.length;
+    flag && (innerXAxisList = getAxisList(rows, dimension[0]));
+    flag = !innerYAxisList || !innerYAxisList.length;
+    flag && (innerYAxisList = getAxisList(rows, dimension[1]));
+    chartDataParams = {
+      xDim: dimension[0],
+      yDim: dimension[1],
+      rows: rows
+    };
+    Object.assign(chartDataParams, {
+      innerXAxisList: innerXAxisList,
+      innerYAxisList: innerYAxisList,
+      metrics: metrics,
+      type: type,
+      extraMetrics: extraMetrics
+    });
+    chartData = getData(chartDataParams);
+  }
+  return {
+    chartData: chartData,
+    innerXAxisList: innerXAxisList,
+    innerYAxisList: innerYAxisList
+  };
+};
+var getResult = function getResult(args) {
+  var type = args.type,
+    options = args.options,
+    pointSize = args.pointSize,
+    blurSize = args.blurSize,
+    res = args.res,
+    key = args.key,
+    v = args.v,
+    bmap = args.bmap,
+    mapOrigin = args.mapOrigin,
+    geo = args.geo,
+    beforeRegisterMap = args.beforeRegisterMap;
+  var echarts = args.echarts,
+    specialAreas = args.specialAreas,
+    position = args.position,
+    positionJsonLink = args.positionJsonLink,
+    beforeRegisterMapOnce = args.beforeRegisterMapOnce;
+  var mapURLProfix = args.mapURLProfix,
+    amap = args.amap,
+    tooltip = args.tooltip,
+    xAxis = args.xAxis,
+    yAxis = args.yAxis;
+  if (type === 'bmap') {
+    Object.assign(options.series[0], {
+      coordinateSystem: 'bmap',
+      pointSize: pointSize,
+      blurSize: blurSize
+    });
+    res = getBmap(key, v).then(function () {
+      return _objectSpread({
+        bmap: bmap
+      }, options);
+    });
+  } else if (type === 'map') {
+    options.series[0].coordinateSystem = 'geo';
+    var json = mapOrigin;
+    if (json) {
+      var geoAttr = _objectSpread({
+        map: mapOrigin
+      }, geo);
+      beforeRegisterMap && (json = beforeRegisterMap(json));
+      echarts.registerMap(mapOrigin, json, specialAreas);
+      res = new Promise(function (resolve) {
+        return resolve(_objectSpread({
+          geo: geoAttr
+        }, options));
+      });
+    } else {
+      var params = {
+        position: position,
+        positionJsonLink: positionJsonLink,
+        beforeRegisterMapOnce: beforeRegisterMapOnce,
+        mapURLProfix: mapURLProfix
+      };
+      res = getMapJSON(params).then(function (json) {
+        var geoAttr = _objectSpread({
+          map: position
+        }, geo);
+        beforeRegisterMap && (json = beforeRegisterMap(json));
+        echarts.registerMap(position, json, specialAreas);
+        return _objectSpread({
+          geo: geoAttr
+        }, options);
+      });
+    }
+  } else if (type === 'amap') {
+    Object.assign(options.series[0], {
+      coordinateSystem: 'amap',
+      pointSize: pointSize,
+      blurSize: blurSize
+    });
+    res = getAmap(key, v).then(function () {
+      return _objectSpread({
+        amap: amap
+      }, options);
+    });
+  } else {
+    res = _objectSpread({
+      tooltip: tooltip,
+      xAxis: xAxis,
+      yAxis: yAxis
+    }, options);
+  }
+  return res;
+};
+export var heatmap = function heatmap(columns, rows, settings, extra) {
+  var _settings$type = settings.type,
+    type = _settings$type === void 0 ? 'cartesian' : _settings$type;
+  var _settings$dimension = settings.dimension,
+    dimension = _settings$dimension === void 0 ? [columns[0], columns[1]] : _settings$dimension;
+  var _settings$dataType = settings.dataType,
+    dataType = _settings$dataType === void 0 ? 'normal' : _settings$dataType,
+    min = settings.min,
+    max = settings.max,
+    digit = settings.digit,
+    bmap = settings.bmap,
+    amap = settings.amap,
+    geo = settings.geo,
+    key = settings.key,
+    _settings$v = settings.v,
+    v = _settings$v === void 0 ? '2.0' : _settings$v;
+  var position = settings.position,
+    mapOrigin = settings.mapOrigin,
+    positionJsonLink = settings.positionJsonLink,
+    beforeRegisterMap = settings.beforeRegisterMap,
+    _settings$pointSize = settings.pointSize,
+    pointSize = _settings$pointSize === void 0 ? 10 : _settings$pointSize,
+    _settings$blurSize = settings.blurSize,
+    blurSize = _settings$blurSize === void 0 ? 5 : _settings$blurSize;
+  var heatColor = settings.heatColor,
+    yAxisName = settings.yAxisName,
+    xAxisName = settings.xAxisName,
+    beforeRegisterMapOnce = settings.beforeRegisterMapOnce,
+    _settings$specialArea = settings.specialAreas,
+    specialAreas = _settings$specialArea === void 0 ? {} : _settings$specialArea;
+  var _settings$metrics = settings.metrics,
+    metrics = _settings$metrics === void 0 ? columns[2] : _settings$metrics,
+    _settings$mapURLProfi = settings.mapURLProfix,
+    mapURLProfix = _settings$mapURLProfi === void 0 ? 'https://unpkg.com/echarts@3.6.2/map/json/' : _settings$mapURLProfi;
+  var tooltipVisible = extra.tooltipVisible,
+    echarts = extra.echartsLib;
+  var innerXAxisList = settings.xAxisList,
+    innerYAxisList = settings.yAxisList;
+  var _ref5 = {},
+    _ref5$chartData = _ref5.chartData,
+    chartData = _ref5$chartData === void 0 ? [] : _ref5$chartData,
+    _ref5$extraMetrics = _ref5.extraMetrics,
+    extraMetrics = _ref5$extraMetrics === void 0 ? [] : _ref5$extraMetrics,
+    _ref5$mainColumn = _ref5.mainColumn,
+    mainColumn = _ref5$mainColumn === void 0 ? dimension.concat([metrics]) : _ref5$mainColumn;
+  columns.forEach(function (column) {
+    return !~mainColumn.indexOf(column) && extraMetrics.push(column);
+  });
+  var ret = fixParam({
+    type: type,
+    rows: rows,
+    dimension: dimension,
+    metrics: metrics,
+    extraMetrics: extraMetrics,
+    chartData: chartData,
+    innerXAxisList: innerXAxisList,
+    innerYAxisList: innerYAxisList
+  });
+  chartData = ret.chartData;
+  innerXAxisList = ret.innerXAxisList;
+  innerYAxisList = ret.innerYAxisList;
+  var metricsList = metrics ? rows.map(function (row) {
+    return row[metrics];
+  }) : [0, 5];
+  !metricsList.length && (metricsList = [0]);
+  var innerMin = min || Math.min.apply(null, metricsList);
+  var innerMax = max || Math.max.apply(null, metricsList);
+  var xAxis = getAxis(innerXAxisList, xAxisName, 'x');
+  var yAxis = getAxis(innerYAxisList, yAxisName, 'y');
+  var series = getSeries({
+    chartData: chartData
+  });
+  var visualMap = getVisualMap({
+    innerMin: innerMin,
+    innerMax: innerMax,
+    type: type,
+    heatColor: heatColor,
+    series: series
+  });
+  var tooltipParams = {
+    dataType: dataType,
+    innerXAxisList: innerXAxisList,
+    innerYAxisList: innerYAxisList,
+    digit: digit,
+    extraMetrics: extraMetrics,
+    metrics: metrics
+  };
+  var tooltip = tooltipVisible && getTooltip(tooltipParams);
+  var options = {
+    visualMap: visualMap,
+    series: series,
+    grid: {
+      left: 25,
+      right: 80,
+      width: 'auto',
+      height: 'auto'
+    }
+  };
+  var res;
+  var args = {
+    type: type,
+    options: options,
+    pointSize: pointSize,
+    blurSize: blurSize,
+    res: res,
+    key: key,
+    v: v,
+    bmap: bmap,
+    mapOrigin: mapOrigin,
+    geo: geo,
+    beforeRegisterMap: beforeRegisterMap
+  };
+  Object.assign(args, {
+    echarts: echarts,
+    specialAreas: specialAreas,
+    position: position,
+    positionJsonLink: positionJsonLink,
+    beforeRegisterMapOnce: beforeRegisterMapOnce
+  });
+  Object.assign(args, {
+    mapURLProfix: mapURLProfix,
+    amap: amap,
+    tooltip: tooltip,
+    xAxis: xAxis,
+    yAxis: yAxis
+  });
+  res = getResult(args);
+  return res;
+};