@alicloud/cloud-charts
Version:
161 lines (149 loc) • 6.69 kB
JavaScript
'use strict';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = _default;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _themes = _interopRequireDefault(require("../themes"));
var _constants = require("../constants");
var _common = require("./common");
var _ellipsisLabel = require("./ellipsisLabel");
require("./index.css");
var _excluded = ["showText", "labelFormatter"];
/**
* 直角坐标系的缩略轴设置
*
* @param {Chart} chart 图表实例
* @param {SliderConfig} config 配置项
* */
function _default(chart, config) {
var _chart$getOptions, _viewData$0$type, _viewData$, _viewData$length, _viewData$filter, _maxValue;
if (!config.slider) {
return;
}
// 更新图例和缩略轴的位置
var defaultConfig = {
// 由于内部对 trendCfg 使用浅层合并，在主题包中配置会被覆盖，只能在这一层设置。
trendCfg: {
lineStyle: {
stroke: _themes["default"]['widgets-slider-trend-bg'],
opacity: 0.1
},
areaStyle: {
fill: _themes["default"]['widgets-slider-trend-bg'],
opacity: _themes["default"]['widgets-slider-trend-opacity']
},
smooth: false,
isArea: true,
data: []
},
backgroundStyle: {
fill: _themes["default"]['widgets-color-container-background'] + "10",
stroke: _themes["default"]['widgets-slider-trend-border-color'] + "80",
opacity: 1
},
textStyle: {},
start: 0.64,
end: 1,
handlerStyle: {
width: 3,
radius: 0,
// stroke: themes['widgets-slider-handler-border-color'],
fill: _themes["default"]['widgets-color-background'],
style: {}
},
type: 'simple',
sampleRate: 1
// formatter: (value, datum, idx) => {
// console.log(value, datum, idx)
// return value;
// },
};
var _ref = typeof config.slider === 'object' ? (0, _common.deepAssign)({}, defaultConfig, config.slider) : (0, _common.deepAssign)({}, defaultConfig),
_ref$showText = _ref.showText,
showText = _ref$showText === void 0 ? false : _ref$showText,
_ref$labelFormatter = _ref.labelFormatter,
labelFormatter = _ref$labelFormatter === void 0 ? undefined : _ref$labelFormatter,
other = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
var sampleRate = other.sampleRate,
type = other.type;
// 获取数据
var _ref2 = (_chart$getOptions = chart === null || chart === void 0 ? void 0 : chart.getOptions()) !== null && _chart$getOptions !== void 0 ? _chart$getOptions : {},
viewData = _ref2.data;
var _sampleRate = sampleRate;
if (showText) {
defaultConfig.textStyle.opacity = 0.8;
}
if (labelFormatter) {
defaultConfig.formatter = labelFormatter;
}
// 目前只显示第一组数据
// 默认为第一组数据，后面希望可以通过图例点击交互
var firstType = (_viewData$0$type = viewData === null || viewData === void 0 ? void 0 : (_viewData$ = viewData[0]) === null || _viewData$ === void 0 ? void 0 : _viewData$.type) !== null && _viewData$0$type !== void 0 ? _viewData$0$type : [];
var dataCount = (_viewData$length = viewData === null || viewData === void 0 ? void 0 : viewData.length) !== null && _viewData$length !== void 0 ? _viewData$length : 0;
// 获取标记数据喝状态
var markData = [];
var maxValue = -Infinity;
var filterDataArray = (_viewData$filter = viewData.filter(function (el) {
return firstType === el.type;
})) === null || _viewData$filter === void 0 ? void 0 : _viewData$filter.map(function (el, index) {
var _el$extra, _numberDecimal;
maxValue = Math.max(maxValue, Number(el.y));
var filterData = (_el$extra = el.extra) === null || _el$extra === void 0 ? void 0 : _el$extra.filter(function (subExtra) {
return subExtra.status;
});
if (el.extra && filterData !== null && filterData !== void 0 && filterData.length) {
markData.push((0, _extends2["default"])({}, el, {
markerOptions: filterData[0],
index: index
}));
}
return (_numberDecimal = (0, _common.numberDecimal)(el.y)) !== null && _numberDecimal !== void 0 ? _numberDecimal : null;
});
// 对数据进行采样，尽量保留噪声数据
// 宽高有误差，实际需要减去间距
var _chart$coordinateBBox = chart === null || chart === void 0 ? void 0 : chart.coordinateBBox,
viewWidth = _chart$coordinateBBox.width;
// 获取Y轴最大文本长度
var maxTextLength = (0, _ellipsisLabel.calcTextWidth)((_maxValue = maxValue) === null || _maxValue === void 0 ? void 0 : _maxValue.toString());
var adjustDistance = viewWidth > maxTextLength ? maxTextLength : 0;
var adjustWidth = viewWidth - adjustDistance;
// 根据密度生成采样率
var density = adjustWidth / dataCount;
if (density > 1) {
_sampleRate = 1;
} else {
_sampleRate = density;
}
// 通过数据判断是否有标记点
if (markData !== null && markData !== void 0 && markData.length) {
// console.log(viewData, markData);
markData.forEach(function (subMark) {
var relativeRate = subMark.index / dataCount;
var relativeWidth = relativeRate * adjustWidth * _sampleRate;
// console.log('relativeRate', _sampleRate, relativeRate, relativeWidth, adjustWidth);
if (type === 'normal') {
var _subMark$markerOption;
chart.annotation().html({
// container: '',
html: "<div class='" + _constants.FullCrossName + " slider-marker-container' style=\"height: 26px; background:" + (0, _common.getStatusColor)(subMark === null || subMark === void 0 ? void 0 : (_subMark$markerOption = subMark.markerOptions) === null || _subMark$markerOption === void 0 ? void 0 : _subMark$markerOption.status) + ";\" title=\"\u67E5\u770B\u6807\u8BB0\u70B9\"></div>",
position: ['0%', '100%'],
// 可以写死是根据规范的间距设定的
offsetY: 60,
offsetX: relativeWidth
});
}
});
}
// console.log(viewWidth, viewHeight, dataCount, density)
var sampledData = (0, _common.sampleDataWithNoise)(filterDataArray, _sampleRate);
// console.log(viewData, filterDataArray, sampledData)
// 如果有NULL值，G2的slider会默认相连
var sliderConfig = (0, _common.merge)(defaultConfig, other, {
trendCfg: {
data: sampledData
}
});
// console.log("slider", sliderConfig, chart?.getOptions())
chart.option('slider', sliderConfig);
}