react-meteo-chart/src/Pluvio/PluvioCrossFormat.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.y !== null && element.y !== undefined) isEmpty = true;
  });
  return isEmpty;
};

export const PluvioCrossFormat = ({ cross, superArr, data, indx }) => {
  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(data[indx].x).format("DD.MM.YY, HH:mm")}
      </h4>
      {!isData && <p style={{ fontSize: 15 }}>Нет данных</p>}

      {isData && superArr[0] && (
        <React.Fragment>
          <MarginLess>
            Сумма за час{" "}
            {data[0] && data[0].info
              ? data[0].info.y !== ""
                ? `(${moment.unix(data[0].info.x0 / 1000).format("HH:mm")} -
                  ${moment.unix(data[0].x / 1000).format("HH:mm")})`
                : ""
              : ""}
            :{" "}
            {cross[0]
              ? cross[0].y !== ""
                ? `${cross[0].y} мм`
                : "Нет данных"
              : "Нет данных"}
          </MarginLess>
        </React.Fragment>
      )}
      {isData && superArr[1] && (
        <React.Fragment>
          <MarginLess>
            Сумма за 3 часа{" "}
            {data[1] && data[1].info
              ? data[1].info.y !== ""
                ? `(${moment.unix(data[1].info.x0 / 1000).format("HH:mm")} -
                  ${moment.unix(data[1].x / 1000).format("HH:mm")})`
                : ""
              : ""}
            :{" "}
            {cross[1]
              ? cross[1].y !== ""
                ? `${cross[1].y} мм`
                : "Нет данных"
              : "Нет данных"}
          </MarginLess>
        </React.Fragment>
      )}

      {isData && superArr[2] && (
        <React.Fragment>
          <MarginLess>
            Сумма за 6 часов{" "}
            {data[2] && data[2].info
              ? data[2].info.y !== ""
                ? `(${moment.unix(data[2].info.x0 / 1000).format("HH:mm")} -
                    ${moment.unix(data[2].x / 1000).format("HH:mm")})`
                : ""
              : ""}
            :{" "}
            {cross[2]
              ? cross[2].y !== ""
                ? `${cross[2].y} мм`
                : "Нет данных"
              : "Нет данных"}
          </MarginLess>
        </React.Fragment>
      )}
      {isData && superArr[3] && (
        <React.Fragment>
          <MarginLess>
            Сумма за сутки{" "}
            {data[3] && data[3].info
              ? data[3].info.y !== ""
                ? `(${moment(data[3].x)
                    .add(-1, "d")
                    .format("DD.MM")} -
                   ${moment(data[3].x).format("DD.MM")})`
                : ""
              : ""}
            :{" "}
            {cross[3]
              ? cross[3].y !== ""
                ? `${cross[3].y} мм`
                : "Нет данных"
              : "Нет данных"}
          </MarginLess>
        </React.Fragment>
      )}
    </div>
  );
};

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

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