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

F6 plugin

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = createTrendSlider;
exports.AREA_STYLE = exports.TREND_LINE_STYLE = void 0;

var _f6Ui = require("@antv/f6-ui");

var _const = require("../../utils/const");

var _path = require("../../utils/path");

var TREND_LINE_STYLE = {
  stroke: '#C5C5C5',
  strokeOpacity: 0.85
};
exports.TREND_LINE_STYLE = TREND_LINE_STYLE;
var AREA_STYLE = {
  fill: '#CACED4',
  opacity: 0.85
};
exports.AREA_STYLE = AREA_STYLE;

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 ? _const.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({}, _const.TREND_HANDLER_STYLE, slider.handlerStyle);
  var backgroundStyle = Object.assign({}, _const.BACKGROUND_STYLE, slider.backgroundStyle);
  var foregroundStyle = Object.assign({}, _const.FOREGROUND_STYLE, slider.foregroundStyle);
  var textStyle = Object.assign({}, _const.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 = (0, _f6Ui.createSegmentNode)(html, css);
  var path = (0, _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')
  };
}