@alicloud/cloud-charts/es/common/rectSlider.js


'use strict';

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["showText", "labelFormatter"];
import themes from '../themes';
import { FullCrossName } from '../constants';
import { merge, sampleDataWithNoise, numberDecimal, getStatusColor, deepAssign } from './common';
import { calcTextWidth } from './ellipsisLabel';
import "./index.css";
/**
 * 直角坐标系的缩略轴设置
 *
 * @param {Chart} chart 图表实例
 * @param {SliderConfig} config 配置项
 * */
export default function (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['widgets-slider-trend-bg'],
        opacity: 0.1
      },
      areaStyle: {
        fill: themes['widgets-slider-trend-bg'],
        opacity: themes['widgets-slider-trend-opacity']
      },
      smooth: false,
      isArea: true,
      data: []
    },
    backgroundStyle: {
      fill: themes['widgets-color-container-background'] + "10",
      stroke: themes['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['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' ? deepAssign({}, defaultConfig, config.slider) : 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 = _objectWithoutPropertiesLoose(_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(_extends({}, el, {
        markerOptions: filterData[0],
        index: index
      }));
    }
    return (_numberDecimal = 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 = 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='" + FullCrossName + " slider-marker-container' style=\"height: 26px; background:" + 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 = sampleDataWithNoise(filterDataArray, _sampleRate);
  // console.log(viewData, filterDataArray, sampledData)

  // 如果有NULL值，G2的slider会默认相连
  var sliderConfig = merge(defaultConfig, other, {
    trendCfg: {
      data: sampledData
    }
  });
  // console.log("slider", sliderConfig, chart?.getOptions())

  chart.option('slider', sliderConfig);
}