react-meteo-chart/lib/Bufr/BufrChart.js

pre alpha of meteo chart

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _moment = _interopRequireDefault(require("moment"));

var _reactVis = require("react-vis");

var color = _interopRequireWildcard(require("./color-utils"));

var _BasicChart = require("../BasicChart");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function getBufrTranlation(name) {
  switch (name) {
    case "DIFFERENTIAL REFLECTIVITY":
      return "Дифференциальная отражающая способность";

    case "DOPPLER MEAN VELOCITY (RADIAL)":
      return "Средняя допплеровская (радиальная) скорость";

    case "ECHO TOPS":
      return "Верхняя граница радиолокационного отражения";

    case "HORIZONTAL REFLECTIVITY":
      return "Горизонтальная отражательная способность";

    case "RADAR RAINFALL INTENSITY":
      return "Интенсивность дождя по радиоционным данным";

    case "TOTAL PRECIPITATION PAST 1 HOUR":
      return "Сумма осадков за последний час";

    case "TOTAL PRECIPITATION PAST 12 HOURS":
      return "Сумма осадков за последние 12 часов";

    case "TOTAL PRECIPITATION PAST 3 HOURS":
      return "Сумма осадков за последние 3 часа";

    case "TOTAL PRECIPITATION PAST 6 HOURS":
      return "Сумма осадков за последние 6 часов";

    case "TOTAL PRECIPITATION PAST 24 HOURS":
      return "Сумма осадков за последние 24 часа";

    case "HAZARDOUS PHENOMENA":
      return "Карта опасных явлений";

    default:
      return name;
  }
}

var MiddleVerticalRectSeries =
/*#__PURE__*/
function (_VerticalRectSeries) {
  _inherits(MiddleVerticalRectSeries, _VerticalRectSeries);

  function MiddleVerticalRectSeries() {
    var _getPrototypeOf2;

    var _this;

    _classCallCheck(this, MiddleVerticalRectSeries);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(MiddleVerticalRectSeries)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_this), "_handleNearestX", function (event) {
      var _props3 = this.props,
          onNearestX = _props3.onNearestX,
          data = _props3.data;
      var minDistance = -Number.POSITIVE_INFINITY;
      var value = null;
      var valueIndex = null;

      var coordinate = this._getXYCoordinateInContainer(event);

      var xScaleFn = this._getAttributeFunctor("x");

      data.forEach(function (item, i) {
        var currentCoordinate = xScaleFn(item);
        var newDistance = coordinate.x - currentCoordinate;

        if (newDistance <= 0 && newDistance > minDistance) {
          minDistance = newDistance;
          value = item;
          valueIndex = i;
        }
      });

      if (!value) {
        return;
      }

      onNearestX(value, {
        innerX: xScaleFn(value),
        index: valueIndex,
        event: event.nativeEvent
      });
    });

    return _this;
  }

  return MiddleVerticalRectSeries;
}(_reactVis.VerticalRectSeries);

var BufrChart =
/*#__PURE__*/
function (_Component) {
  _inherits(BufrChart, _Component);

  function BufrChart() {
    var _getPrototypeOf3;

    var _this2;

    _classCallCheck(this, BufrChart);

    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
      args[_key2] = arguments[_key2];
    }

    _this2 = _possibleConstructorReturn(this, (_getPrototypeOf3 = _getPrototypeOf(BufrChart)).call.apply(_getPrototypeOf3, [this].concat(args)));

    _defineProperty(_assertThisInitialized(_this2), "state", {
      cross: null,
      data: _this2.props.superArr[0],
      index: 0,
      stations: _this2.props.stations,
      superArr: _this2.props.superArr,
      dataType: _this2.props.dataType,
      line: _this2.props.line
    });

    return _this2;
  }

  _createClass(BufrChart, [{
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$state = this.state,
          index = _this$state.index,
          data = _this$state.data,
          stations = _this$state.stations,
          line = _this$state.line,
          dataType = _this$state.dataType;
      var haveHeight = this.props.isBufrWithHeight(dataType);
      var yMeasure = haveHeight ? "м" : color.getMeasureByType(dataType);
      return _react["default"].createElement(_react["default"].Fragment, null, " ", data ? _react["default"].createElement("div", {
        style: {
          // border: "1px solid #7d9cb8",
          height: "85%",
          backgroundColor: data ? (0, _BasicChart.rgbToHex)(255, 255, 255, this.props.opacity) : "dada",
          textAlign: "center"
        }
      }, _react["default"].createElement("h5", {
        style: {
          margin: 5
        }
      }, this.state.stations[index] && this.state.stations[index].title), _react["default"].createElement("h6", {
        style: {
          margin: 5
        }
      }, this.props.getBufrTranlation(this.state.dataType)), _react["default"].createElement(_reactVis.FlexibleXYPlot // TODO: Заменить на FlexibleWidthPlot и прокидывать сюда высоту окна и высчитывать нужный размер(с учетом заголовка и панели выобра станций),
      , {
        margin: {
          left: 65,
          right: 65,
          top: 45
        } //ибо этот флекс плот  умееет  занимать только весь контейнер (поэтому панель с выбором станции выползает за пределы контейнера
        ,
        onMouseLeave: function onMouseLeave() {
          _this3.setState({
            cross: null
          });
        } // height={}
        ,
        style: {
          backgroundColor: (0, _BasicChart.rgbToHex)(255, 255, 255, this.props.opacity)
        },
        xDomain: [data[0].x0, data.slice(-1)[0].x],
        yDomain: [0, Math.max.apply(Math, data.map(function (d) {
          return d.y;
        }))],
        xType: "linear",
        yType: "linear"
      }, _react["default"].createElement(_reactVis.HorizontalGridLines, null), _react["default"].createElement(_reactVis.VerticalGridLines, null), (haveHeight || dataType.search(/PRECIPITATION PAST/) !== -1) && _react["default"].createElement(_reactVis.YAxis // left={0}
      , {
        tickFormat: function tickFormat(v, indx) {
          return v >= 0 ? "".concat(v, " ").concat(yMeasure) : "";
        }
      }), (haveHeight || dataType.search(/PRECIPITATION PAST/) !== -1) && _react["default"].createElement(_reactVis.YAxis, {
        orientation: "right",
        tickFormat: function tickFormat(v, indx) {
          return v >= 0 ? "".concat(v, " ").concat(yMeasure) : "";
        }
      }), _react["default"].createElement(_reactVis.XAxis, {
        tickPadding: 20,
        orientation: "top",
        tickValues: [data[0].x0, data.slice(-1)[0].x] // tickTotal={2}
        ,
        tickFormat: function tickFormat(v, indx) {
          if (indx == 0) return "".concat(line[0].toFixed(3));else return "".concat(line[2].toFixed(3));
        }
      }), _react["default"].createElement(_reactVis.XAxis // tickPadding={15}
      , {
        orientation: "top",
        tickValues: [data[0].x0, data.slice(-1)[0].x] // tickTotal={2}
        ,
        tickFormat: function tickFormat(v, indx) {
          if (indx == 0) return " ".concat(line[1].toFixed(3));else return " ".concat(line[3].toFixed(3));
        }
      }), _react["default"].createElement(_reactVis.XAxis // tickPadding={20}
      , {
        tickFormat: function tickFormat(v, indx, arr, total) {
          return "".concat(v, " \u043A\u043C");
        }
      }), _react["default"].createElement(MiddleVerticalRectSeries, {
        getNull: function getNull(d) {
          return d.y !== null;
        },
        data: data,
        colorType: "literal",
        onNearestX: function onNearestX(value, _ref) {
          var index = _ref.index;

          _this3.setState({
            cross: _this3.state.data.filter(function (d) {
              return d.x0 == value.x0;
            }).map(function (value) {
              return {
                x: (value.x + value.x0) / 2,
                valu: value.valu,
                y: value.y,
                y0: value.y0,
                isValidValue: value.opacity,
                measure: value.measure
              };
            })
          });
        }
      }), _react["default"].createElement(_reactVis.DiscreteColorLegend, {
        style: {
          backgroundColor: (0, _BasicChart.rgbToHex)(255, 255, 255, this.props.opacity)
        },
        items: stations,
        orientation: "horizontal",
        onItemClick: function onItemClick(e) {
          return _this3.setState({
            data: _this3.state.superArr[e.index],
            index: e.index
          });
        }
      }), this.state.cross && _react["default"].createElement(_reactVis.Crosshair, {
        values: this.state.cross
      }, _react["default"].createElement("div", {
        style: {
          background: "rgba(42,61,92, 0.9)",
          width: "155px",
          color: "#fff",
          borderRadius: "4px",
          padding: "2px 0 2px 8px",
          fontSize: 11
        }
      }, this.state.cross.filter(function (d) {
        return d.valu !== null;
      }).length > 0 ? this.state.cross.filter(function (d) {
        return d.valu !== null && d.isValidValue !== 0;
      }).length > 0 ? this.state.cross.filter(function (d) {
        return d.valu !== null && d.isValidValue !== 0;
      }).map(function (d) {
        return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("div", {
          style: {
            display: "flex",
            justifyContent: "space-between"
          }
        }, haveHeight && _react["default"].createElement("div", {
          style: {
            alignContent: "left"
          }
        }, d.y0 !== -1 ? "".concat(d.y0, " \u043C - ").concat(d.y, " \u043C:  ") : ""), _react["default"].createElement("div", {
          style: {
            marginRight: "5px"
          }
        }, " ".concat(d.valu !== null ? "".concat(d.valu.toFixed(2), " ").concat(d.measure) : "", " "), " ")));
      }) : _react["default"].createElement("div", {
        style: {
          display: "flex",
          justifyContent: "center",
          alignContent: "center",
          alignItems: "center",
          flexDirection: "column",
          fontSize: "17px",
          height: "100%"
        }
      }, "\u041B\u043E\u0433\u0438\u0447\u0435\u0441\u043A\u043E\u0435 \u043E\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0434\u0430\u043D\u043D\u044B\u0445") : _react["default"].createElement("div", {
        style: {
          display: "flex",
          justifyContent: "center",
          alignContent: "center",
          alignItems: "center",
          flexDirection: "column",
          fontSize: "17px",
          height: "100%"
        }
      }, "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445"))))) : _react["default"].createElement("div", {
        style: {
          display: "flex",
          justifyContent: "center",
          alignContent: "center",
          alignItems: "center",
          flexDirection: "column",
          fontSize: "17px",
          height: "100%"
        }
      }, "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445"));
    }
  }]);

  return BufrChart;
}(_react.Component);

var _default = BufrChart;
exports["default"] = _default;