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

package/chart-line/index.js

@@ -0,0 +1,358 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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, getStackMap, getLegend, hexToRgb, set } from '@opentiny/vue-renderless/chart-core/deps/utils';
+import { isNull } from '@opentiny/vue-renderless/common/type';
+import { itemPoint, itemLabel, itemContent, SAAS_DEFAULT_COLORS_10 } from '@opentiny/vue-renderless/chart-core/deps/constants';
+var getLineXAxis = function getLineXAxis(args) {
+  var xAxisType = args.xAxisType,
+    dimension = args.dimension,
+    rows = args.rows,
+    xAxisName = args.xAxisName,
+    axisVisible = args.axisVisible;
+  return dimension.map(function (item, idx) {
+    return {
+      nameLocation: 'middle',
+      type: xAxisType,
+      name: xAxisName[idx] || '',
+      nameGap: 22,
+      show: axisVisible,
+      data: rows.map(function (row) {
+        return row[item];
+      }),
+      axisTick: {
+        show: true,
+        lineStyle: {
+          color: '#191919',
+          opacity: 0.1,
+          width: 2
+        },
+        alignWithLabel: true
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#191919',
+          opacity: 0.1,
+          width: 2
+        }
+      },
+      axisPointer: {
+        show: true,
+        type: 'line',
+        lineStyle: {
+          color: '#191919',
+          opacity: 0.3,
+          type: 'solid'
+        }
+      }
+    };
+  });
+};
+var getAreaSeries = function getAreaSeries(_ref) {
+  var color = _ref.color,
+    seriesItem = _ref.seriesItem;
+  var colorStops = [{
+    offset: 0,
+    color: "rgba(".concat(hexToRgb(color), ", 0.5)")
+  }, {
+    offset: 1,
+    color: "rgba(".concat(hexToRgb(color), ", 0.1)")
+  }];
+  seriesItem.areaStyle = {
+    color: {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: colorStops
+    }
+  };
+};
+var setSingLineSeries = function setSingLineSeries(_ref2) {
+  var defaultSeriesItem = _ref2.defaultSeriesItem,
+    seriesItem = _ref2.seriesItem;
+  defaultSeriesItem.showSymbol = true;
+  set(defaultSeriesItem, 'emphasis.itemStyle.color', SAAS_DEFAULT_COLORS_10[0]);
+  seriesItem.label = _objectSpread({
+    show: true
+  }, seriesItem.label);
+  seriesItem.itemStyle = _objectSpread({
+    color: 'transparent'
+  }, seriesItem.itemStyle);
+  seriesItem.lineStyle = _objectSpread({
+    color: SAAS_DEFAULT_COLORS_10[0]
+  }, seriesItem.lineStyle);
+  seriesItem.animation = seriesItem.animation || false;
+};
+var getLineSeries = function getLineSeries(args) {
+  var areaStyle = args.areaStyle,
+    axisSite = args.axisSite,
+    area = args.area,
+    dimension = args.dimension,
+    itemStyle = args.itemStyle,
+    label = args.label;
+  var labelMap = args.labelMap,
+    lineStyle = args.lineStyle,
+    metrics = args.metrics,
+    nullAddZero = args.nullAddZero,
+    rows = args.rows,
+    stack = args.stack,
+    color = args.color,
+    smooth = args.smooth;
+  var dataTempObj = {};
+  var stackMapData = stack && getStackMap(stack);
+  var series = [];
+  metrics.forEach(function (item) {
+    return dataTempObj[item] = [];
+  });
+  rows.forEach(function (row) {
+    metrics.forEach(function (item) {
+      var value = null;
+      if (!isNull(row[item])) {
+        value = row[item];
+      } else if (nullAddZero) {
+        value = 0;
+      }
+      dataTempObj[item].push([row[dimension[0]], value]);
+    });
+  });
+  metrics.forEach(function (item, i) {
+    var name = !isNull(labelMap[item]) ? labelMap[item] : item;
+    var isSmooth = !(smooth === false);
+    var seriesItem = {
+      smooth: isSmooth,
+      name: name,
+      type: 'line',
+      data: dataTempObj[item]
+    };
+    var emphasis = {
+      itemStyle: {
+        borderColor: '#fff',
+        borderWidth: 2
+      }
+    };
+    var defaultSeriesItem = {
+      symbol: 'circle',
+      symbolSize: 8,
+      showSymbol: false,
+      emphasis: emphasis
+    };
+    area && getAreaSeries({
+      color: color[i],
+      seriesItem: seriesItem
+    });
+    metrics.length === 1 && !isSmooth && setSingLineSeries({
+      defaultSeriesItem: defaultSeriesItem,
+      seriesItem: seriesItem
+    });
+    seriesItem = Object.assign(defaultSeriesItem, seriesItem);
+    axisSite.right && (seriesItem.yAxisIndex = ~axisSite.right.indexOf(item) ? 1 : 0);
+    stack && stackMapData[item] && (seriesItem.stack = stackMapData[item]);
+    label && (seriesItem.label = label);
+    itemStyle && (seriesItem.itemStyle = itemStyle);
+    lineStyle && (seriesItem.lineStyle = lineStyle);
+    areaStyle && (seriesItem.areaStyle = areaStyle);
+    series.push(seriesItem);
+  });
+  return series;
+};
+var getLineYAxis = function getLineYAxis(args) {
+  var yAxisType = args.yAxisType,
+    yAxisName = args.yAxisName,
+    scale = args.scale,
+    axisVisible = args.axisVisible,
+    max = args.max,
+    min = args.min,
+    digit = args.digit;
+  var yAxisBase = {
+    type: 'value',
+    show: axisVisible,
+    axisTick: {
+      show: false
+    }
+  };
+  var yAxis = [];
+  var _loop = function _loop(k) {
+    if (yAxisType[k]) {
+      yAxis[k] = _objectSpread(_objectSpread({}, yAxisBase), {}, {
+        axisLabel: {
+          formatter: function formatter(val) {
+            return getFormated(val, yAxisType[k], digit);
+          }
+        }
+      });
+    } else {
+      yAxis[k] = _objectSpread({}, yAxisBase);
+    }
+    yAxis[k].name = yAxisName[k] || '';
+    yAxis[k].scale = scale[k] || false;
+    yAxis[k].min = min[k] || null;
+    yAxis[k].max = max[k] || null;
+  };
+  for (var k = 0; k < 2; k++) {
+    _loop(k);
+  }
+  return yAxis;
+};
+var getLineTooltip = function getLineTooltip(args) {
+  var axisSite = args.axisSite,
+    yAxisType = args.yAxisType,
+    digit = args.digit,
+    labelMap = args.labelMap,
+    tooltipFormatter = args.tooltipFormatter;
+  var rightItemsArr = axisSite.right || [];
+  var rightListArr = labelMap ? rightItemsArr.map(function (item) {
+    return labelMap[item] === undefined ? item : labelMap[item];
+  }) : rightItemsArr;
+  return {
+    formatter: function formatter(items) {
+      if (tooltipFormatter) {
+        return tooltipFormatter.apply(null, arguments);
+      }
+      var template = [];
+      var _items$ = items[0],
+        name = _items$.name,
+        axisValueLabel = _items$.axisValueLabel;
+      var title = name || axisValueLabel;
+      template.push("".concat(title, "<br>"));
+      items.forEach(function (_ref3) {
+        var seriesName = _ref3.seriesName,
+          data = _ref3.data,
+          color = _ref3.color;
+        if (color === 'transparent' && items.length === 1) {
+          color = SAAS_DEFAULT_COLORS_10[0];
+        }
+        var showData = null;
+        var type = ~rightListArr.indexOf(seriesName) ? yAxisType[1] : yAxisType[0];
+        var itemData = Array.isArray(data) ? data[1] : data;
+        showData = getFormated(itemData, type, digit);
+        template.push(itemPoint(color));
+        template.push("".concat(itemLabel(seriesName)).concat(itemContent(showData)));
+        template.push('<br>');
+      });
+      return template.join('');
+    },
+    trigger: 'axis'
+  };
+};
+export var line = function line(columns, rows, settings, extra) {
+  rows = Array.isArray(rows) ? rows : [];
+  columns = Array.isArray(columns) ? columns : [];
+  var _settings$axisSite = settings.axisSite,
+    axisSite = _settings$axisSite === void 0 ? {} : _settings$axisSite,
+    _settings$yAxisType = settings.yAxisType,
+    yAxisType = _settings$yAxisType === void 0 ? ['normal', 'normal'] : _settings$yAxisType,
+    _settings$xAxisType = settings.xAxisType,
+    xAxisType = _settings$xAxisType === void 0 ? 'category' : _settings$xAxisType,
+    _settings$yAxisName = settings.yAxisName,
+    yAxisName = _settings$yAxisName === void 0 ? [] : _settings$yAxisName;
+  var _settings$dimension = settings.dimension,
+    dimension = _settings$dimension === void 0 ? [columns[0]] : _settings$dimension,
+    _settings$xAxisName = settings.xAxisName,
+    xAxisName = _settings$xAxisName === void 0 ? [] : _settings$xAxisName,
+    _settings$axisVisible = settings.axisVisible,
+    axisVisible = _settings$axisVisible === void 0 ? true : _settings$axisVisible,
+    area = settings.area,
+    stack = settings.stack;
+  var _settings$scale = settings.scale,
+    scale = _settings$scale === void 0 ? [false, false] : _settings$scale,
+    _settings$min = settings.min,
+    min = _settings$min === void 0 ? [null, null] : _settings$min,
+    _settings$max = settings.max,
+    max = _settings$max === void 0 ? [null, null] : _settings$max,
+    _settings$nullAddZero = settings.nullAddZero,
+    nullAddZero = _settings$nullAddZero === void 0 ? false : _settings$nullAddZero,
+    _settings$digit = settings.digit,
+    digit = _settings$digit === void 0 ? 2 : _settings$digit;
+  var _settings$legendName = settings.legendName,
+    legendName = _settings$legendName === void 0 ? {} : _settings$legendName,
+    _settings$labelMap = settings.labelMap,
+    labelMap = _settings$labelMap === void 0 ? {} : _settings$labelMap,
+    label = settings.label,
+    itemStyle = settings.itemStyle,
+    lineStyle = settings.lineStyle,
+    areaStyle = settings.areaStyle,
+    smooth = settings.smooth;
+  var tooltipVisible = extra.tooltipVisible,
+    legendVisible = extra.legendVisible,
+    tooltipFormatter = extra.tooltipFormatter,
+    color = extra.color;
+  var metrics = columns.slice();
+  if (axisSite.right && axisSite.left) {
+    metrics = axisSite.left.concat(axisSite.right);
+  } else if (settings.metrics) {
+    metrics = settings.metrics;
+  } else if (axisSite.left && !axisSite.right) {
+    metrics = axisSite.left;
+  } else {
+    metrics.splice(columns.indexOf(dimension[0]), 1);
+  }
+  var legendItemStyle;
+  if (metrics.length === 1) {
+    legendItemStyle = {
+      itemStyle: {
+        color: SAAS_DEFAULT_COLORS_10[0]
+      }
+    };
+  }
+  var legend = legendVisible && getLegend({
+    legendName: legendName,
+    metrics: metrics,
+    labelMap: labelMap,
+    legendItemStyle: legendItemStyle
+  });
+  var tooltip = tooltipVisible && getLineTooltip({
+    axisSite: axisSite,
+    digit: digit,
+    labelMap: labelMap,
+    tooltipFormatter: tooltipFormatter,
+    xAxisType: xAxisType,
+    yAxisType: yAxisType
+  });
+  var xAxis = getLineXAxis({
+    axisVisible: axisVisible,
+    dimension: dimension,
+    xAxisName: xAxisName,
+    xAxisType: xAxisType,
+    rows: rows
+  });
+  var yAxis = getLineYAxis({
+    axisVisible: axisVisible,
+    digit: digit,
+    max: max,
+    min: min,
+    scale: scale,
+    yAxisType: yAxisType,
+    yAxisName: yAxisName
+  });
+  var seriesParam = {
+    areaStyle: areaStyle,
+    area: area,
+    axisSite: axisSite,
+    dimension: dimension,
+    itemStyle: itemStyle,
+    lineStyle: lineStyle
+  };
+  Object.assign(seriesParam, {
+    label: label,
+    labelMap: labelMap,
+    metrics: metrics,
+    nullAddZero: nullAddZero,
+    rows: rows,
+    xAxisType: xAxisType,
+    stack: stack,
+    color: color,
+    smooth: smooth
+  });
+  var series = getLineSeries(seriesParam);
+  var options = {
+    legend: legend,
+    xAxis: xAxis,
+    series: series,
+    yAxis: yAxis,
+    tooltip: tooltip
+  };
+  return options;
+};

package/chart-liquidfill/index.js

@@ -0,0 +1,119 @@
+import { getFormated, isObject } from '@opentiny/vue-renderless/chart-core/deps/utils';
+import { itemLabel, itemContent } from '@opentiny/vue-renderless/chart-core/deps/constants';
+var isArr = Array.isArray;
+var getTooltip = function getTooltip(args) {
+  var tooltipFormatter = args.tooltipFormatter,
+    dataType = args.dataType,
+    digit = args.digit;
+  function formatter(options) {
+    var seriesName = options.seriesName,
+      value = options.value;
+    if (!tooltipFormatter) {
+      return ["".concat(itemLabel(seriesName)), itemContent(getFormated(value, dataType, digit))].join('');
+    }
+    return tooltipFormatter.apply(null, arguments);
+  }
+  return {
+    show: true,
+    formatter: formatter
+  };
+};
+var getSeries = function getSeries(args) {
+  var dimension = args.dimension,
+    metrics = args.metrics,
+    rows = args.rows,
+    seriesMap = args.seriesMap,
+    wave = args.wave;
+  var itemWave = wave;
+  var len = isArr(seriesMap) ? seriesMap.length : 0;
+  return rows.slice().map(function (item, index) {
+    var _ref = {},
+      _ref$data = _ref.data,
+      data = _ref$data === void 0 ? [] : _ref$data,
+      _ref$result = _ref.result,
+      result = _ref$result === void 0 ? {
+        type: 'liquidFill'
+      } : _ref$result,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? item[dimension] : _ref$name;
+    var _ref2 = {},
+      _ref2$val = _ref2.val,
+      val = _ref2$val === void 0 ? Number(item[metrics]) : _ref2$val,
+      _ref2$itemMap = _ref2.itemMap,
+      itemMap = _ref2$itemMap === void 0 ? {} : _ref2$itemMap;
+    if (isArr(seriesMap)) {
+      itemMap = seriesMap[index] ? seriesMap[index] : seriesMap[len - 1];
+    } else if (isObject(seriesMap[name])) {
+      itemMap = seriesMap[name];
+    }
+    if (isArr(wave) && isArr(wave[0])) {
+      itemWave = !isArr(wave[index]) ? wave[wave.length - 1] : wave[index];
+    }
+    data.push({
+      value: val
+    });
+    if (itemWave.length && itemWave) {
+      data = data.concat(itemWave.map(function (val) {
+        return {
+          value: val
+        };
+      }));
+    }
+    result.itemStyle = {
+      shadowBlur: 0
+    };
+    result.label = {
+      color: '#6D8FF0'
+    };
+    result.backgroundStyle = {
+      color: '#F4F3F9'
+    };
+    result.outline = {
+      itemStyle: {
+        borderColor: '#6D8FF0',
+        shadowBlur: 0
+      }
+    };
+    !itemMap.color && (result.itemStyle = Object.assign(result.itemStyle, {
+      color: '#6D8FF0'
+    }));
+    result = Object.assign(result, {
+      data: data,
+      name: name
+    }, itemMap);
+    return result;
+  });
+};
+export var liquidfill = function liquidfill(columns, rows, settings, extra) {
+  var _settings$dimension = settings.dimension,
+    dimension = _settings$dimension === void 0 ? columns[0] : _settings$dimension,
+    _settings$metrics = settings.metrics,
+    metrics = _settings$metrics === void 0 ? columns[1] : _settings$metrics;
+  var _settings$seriesMap = settings.seriesMap,
+    seriesMap = _settings$seriesMap === void 0 ? {} : _settings$seriesMap,
+    _settings$dataType = settings.dataType,
+    dataType = _settings$dataType === void 0 ? 'percent' : _settings$dataType,
+    _settings$digit = settings.digit,
+    digit = _settings$digit === void 0 ? 2 : _settings$digit,
+    _settings$wave = settings.wave,
+    wave = _settings$wave === void 0 ? [] : _settings$wave;
+  var tooltipVisible = extra.tooltipVisible,
+    tooltipFormatter = extra.tooltipFormatter;
+  var tooltip = tooltipVisible && getTooltip({
+    tooltipFormatter: tooltipFormatter,
+    dataType: dataType,
+    digit: digit
+  });
+  var series = getSeries({
+    rows: rows,
+    columns: columns,
+    dimension: dimension,
+    metrics: metrics,
+    seriesMap: seriesMap,
+    wave: wave
+  });
+  return {
+    tooltip: tooltip,
+    series: series
+  };
+};