@antv/f6-plugin/es/time-bar/ui/slider/trend-slider.js

F6 plugin

import { createSegmentNode } from '@antv/f6-ui';
import { BACKGROUND_STYLE, FOREGROUND_STYLE, TREND_HANDLER_STYLE, TEXT_STYLE, TREND_SLIDER_HEIHGT } from '../../utils/const';
import { dataToPath } from '../../utils/path';
export var TREND_LINE_STYLE = {
  stroke: '#C5C5C5',
  strokeOpacity: 0.85
};
export var AREA_STYLE = {
  fill: '#CACED4',
  opacity: 0.85
};
export default function createTrendSlider(_a) {
  var _b = _a.slider,
      slider = _b === void 0 ? {} : _b,
      _c = _a.trend,
      trend = _c === void 0 ? {} : _c;
  var width = slider.width,
      _d = slider.height,
      height = _d === void 0 ? TREND_SLIDER_HEIHGT : _d;
  var _e = trend.data,
      trendData = _e === void 0 ? [] : _e,
      lineStyle = trend.lineStyle,
      _f = trend.smooth,
      smooth = _f === void 0 ? true : _f;
  var handlerStyle = Object.assign({}, TREND_HANDLER_STYLE, slider.handlerStyle);
  var backgroundStyle = Object.assign({}, BACKGROUND_STYLE, slider.backgroundStyle);
  var foregroundStyle = Object.assign({}, FOREGROUND_STYLE, slider.foregroundStyle);
  var textStyle = Object.assign({}, TEXT_STYLE, slider.textStyle);
  var trendLineStyle = Object.assign({}, TREND_LINE_STYLE, lineStyle);
  var mainRectWidth = handlerStyle.width;
  var circleR = mainRectWidth * 2;
  var controlWidth = circleR * 2 + 10;
  var html = "\n    <div class='slider-bg'>\n      <shape class='trend-bg' type='path' path='[]' />\n      <div class= 'slider-inner' />\n      <div class='control left-control'>\n        <div class='handler'> \n          <div class='text'>1</div>\n          <shape class='rect' type='rect' width='" + handlerStyle.width + "'/>\n          <shape class='circle top-circle' type='circle' r='" + circleR + "' />\n          <shape class='circle bottom-circle' type='circle' r='" + circleR + "' />\n        </div>\n      </div>\n      <div class='control right-control'>\n        <div class='handler'> \n          <div class='text'>1</div>\n          <shape class='rect' type='rect' width='" + handlerStyle.width + "'/>\n          <shape class='circle top-circle' type='circle' r='" + circleR + "' />\n          <shape class='circle bottom-circle' type='circle' r='" + circleR + "' />\n        </div>\n      </div>\n    </div>\n  ";
  var css = "\n    .slider-bg {\n      width: " + width + ";\n      height: " + height + ";\n      background: " + backgroundStyle.fill + ";\n      opacity: " + backgroundStyle.opacity + ";\n      z-index: 10;\n    }\n\n    .trend-bg{\n      position: absolute;\n      width: " + width + ";\n      height: " + height + ";\n      border: 1 solid " + trendLineStyle.stroke + ";\n      opacity: " + trendLineStyle.strokeOpacity + ";\n    }\n    \n    .slider-inner{\n      position: absolute;\n      width: " + width + ";\n      height: " + height + ";\n      background: " + foregroundStyle.fill + ";\n      opacity: " + foregroundStyle.opacity + ";\n    }\n\n    .control {\n      position: absolute;\n      width: " + controlWidth + ";\n      height: " + height + ";\n      font-size: 10;\n      background-opacity: 0;\n    }\n\n    .handler{\n      position: absolute;\n      height: " + handlerStyle.height + ";\n      width: " + mainRectWidth + ";\n    }\n    \n    .rect {\n      position: absolute;\n      width: " + mainRectWidth + ";\n      height: " + handlerStyle.height + ";\n      background: " + handlerStyle.fill + ";\n    }\n\n    .circle {\n      background: " + handlerStyle.fill + ";\n      position: absolute;\n      left: " + mainRectWidth / 2 + "\n    }\n\n    .top-circle{\n      top: 0\n    }\n\n    .bottom-circle{\n      bottom: 0\n    }\n\n    .right-control .handler{\n      right: 0\n    }\n\n    .control .text{\n      position: absolute;\n      top: " + (height / 2 - 5) + ";\n    }\n    \n    .text{\n      color: " + textStyle.fill + ";\n      width: 40;\n      text-align: center;\n    }\n\n    .text text{\n      opacity:" + textStyle.opacity + "\n    }\n\n    .left-control .text{\n      margin-left: 0;\n    }\n\n    .right-control .text{\n      \n    }\n    \n    .left-control {\n      left: 0;\n    }\n\n    .right-control{\n      left: " + (width - controlWidth) + ";\n    }\n  ";
  var slideContainer = createSegmentNode(html, css);
  var path = dataToPath(trendData, width, height, smooth);
  var slideTrendBg = slideContainer.query('.trend-bg');
  slideTrendBg.setAttribute('path', path);
  var leftControl = slideContainer.query('.left-control');
  var rightControl = slideContainer.query('.right-control');
  var leftControlText = leftControl.query('.text');
  var rightControlText = rightControl.query('.text');

  leftControl.onLeftChange = function (value) {
    if (value < leftControlText.width) {
      leftControlText.setStyle('marginLeft', 0);
    } else {
      leftControlText.setStyle('marginLeft', -leftControlText.width);
    }
  };

  rightControl.onLeftChange = function (value) {
    if (value > slideContainer.width - rightControl.width - rightControlText.width) {
      rightControlText.setStyle('marginLeft', -rightControlText.width);
    } else {
      rightControlText.setStyle('marginLeft', 0);
    }
  };

  return {
    slideContainer: slideContainer,
    leftControl: slideContainer.query('.left-control'),
    rightControl: slideContainer.query('.right-control'),
    slideInner: slideContainer.query('.slider-inner')
  };
}