react-meteo-chart/src/Ams/AmsCrossFormat.jsx

pre alpha of meteo chart

import React, { Component } from "react";
import moment from "moment";
import styled from "styled-components";
import { Crosshair as Cross } from "react-vis";
const emptyCheck = arr => {
  let isEmpty = false;
  arr.forEach(element => {
    if (element && element.y !== null && element.y !== undefined)
      isEmpty = true;
  });
  return isEmpty;
};

export const AmsCrossFormat = ({ cross, superArr }) => {
  let isData = emptyCheck(cross);

  return (
    <div
      style={{
        background: "rgba(42,61,92, 0.9)",
        width: "200px",
        // height: "50px",
        color: "#fff",
        borderRadius: "4px",
        padding: "2px 0 2px 8px",
        fontSize: 10
      }}
    >
      <h4 style={{ margin: 0 }}>
        {superArr[0] &&
          cross[0] &&
          moment(cross[0].x).format("DD.MM.YY, HH:mm")}
      </h4>
      {!isData && <p style={{ fontSize: 15 }}>Нет данных</p>}

      {isData && superArr[0] && (
        <MarginLess>
          Скорость ветра:{" "}
          {cross[0]
            ? cross[0].y !== "" && cross[0].y !== null
              ? `${cross[0].y} м/с`
              : "Нет данных"
            : "Нет данных"}
        </MarginLess>
      )}
      {isData && superArr[1] && (
        <MarginLess>
          Температура:{" "}
          {cross[1]
            ? cross[1].y !== "" && cross[1].y !== null
              ? `${cross[1].y} C°`
              : "Нет данных"
            : "Нет данных"}
        </MarginLess>
      )}
      {/* {superArr[2] && (
        <MarginLess>
          Барическая тенденция: {cross[2] ? cross[2].y : "-"} гПа
        </MarginLess>
      )} */}
      {isData && superArr[3] && (
        <MarginLess>
          Осадки:{" "}
          {cross[3]
            ? cross[3].y !== "" && cross[3].y !== null
              ? `${cross[3].y} мм`
              : "Нет данных"
            : "Нет данных"}
        </MarginLess>
      )}
      {isData && superArr[6] && (
        <MarginLess>
          Приведенное давление:{" "}
          {cross[6]
            ? cross[6].y !== "" && cross[6].y !== null
              ? `${cross[6].y} гПа`
              : "Нет данных"
            : "Нет данных"}
        </MarginLess>
      )}

      {isData && superArr[5] && (
        <MarginLess>
          Давление:{" "}
          {cross[5]
            ? cross[5].y !== "" && cross[5].y !== null
              ? `${cross[5].y} гПа`
              : "Нет данных"
            : "Нет данных"}
        </MarginLess>
      )}
      {isData && superArr[4] && (
        <MarginLess>
          Направление ветра:{" "}
          {cross[4]
            ? cross[4].y !== "" && cross[4].y !== null
              ? `${cross[4].y} °`
              : "Нет данных"
            : "Нет данных"}
        </MarginLess>
      )}
    </div>
  );
};

export const EmptyCrossFormat = ({ cross, superArr }) => {
  return <></>;
};

const MarginLess = styled.div`
  margin: 0;
`;