react-meteo-chart/src/BasicChart.jsx

pre alpha of meteo chart

import React, { Component } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import moment from "moment";
import AmsLegend, { COLORS } from "./Ams/AmsLegend";
import GridDates from "./GridDates";
import AmsCrossFormat from "./Ams/AmsCrossFormat";
import rgbHex from "rgb-hex";

import {
  XYPlot,
  FlexibleXYPlot,
  DecorativeAxis,
  FlexibleWidthXYPlot,
  Borders,
  XAxis,
  YAxis,
  VerticalGridLines,
  HorizontalGridLines,
  CustomSVGSeries,
  LineSeries,
  LineMarkSeries,
  GridLines,
  Crosshair,
} from "react-vis";
let leheight = 0;

class BasicChart extends Component {
  state = {
    showcross: false,
    wind: true,
    temp: true,
    tendency: true,
    precipit: true,
    normalPress: true,
    press: true,
    width: 0,
  };
  componentDidUpdate() {}
  // componentDidMount() {
  //   this.setState({ width: ReactDOM.findDOMNode(this).clientWidth });
  //   ReactDOM.findDOMNode(this).addEventListener("resize", e =>
  //     this.setState({ width: ReactDOM.findDOMNode(this).clientWidth })
  //   );
  // }
  // componentWillUnmount() {
  //   ReactDOM.findDOMNode(this).removeEventListener("resize", e =>
  //     this.setState({ width: ReactDOM.findDOMNode(this).clientWidth })
  //   );
  // }

  render() {
    const {
      width,
      height,
      dateFrom,
      dateTo,
      superArr,
      extremum,
      plotHeight = 270,
      plotWidth = 1400,
      opacity,
    } = this.props;
    leheight = `${100 * plotHeight}px`;
    let gridDates = GridDates(dateFrom, dateTo);

    const daySpan = moment(dateTo) - moment(dateFrom);

    const setVal = (data, name) => {
      this.setState({ [name]: !data });
    };

    const day = 86400000;

    const showDirectionThreshold = day * 30;

    const dateThreshold = day * 5;

    let domainFrom = moment(
      moment.utc(dateFrom).local().format("YYYY-MM-DDTHH:mm")
    );
    let domainTo = moment(
      moment.utc(dateTo).local().format("YYYY-MM-DD:HH:mm")
    );

    return (
      <ChartDiv
        id="rr"
        opacity={opacity ? opacity : 1}
        style={{ height: `${plotHeight}px` }}
      >
        <FlexibleXYPlot
          height={plotHeight}
          // width={plotWidth}
          className="mainPlot"
          yDomain={extremum ? extremum : [0, 1]}
          xDomain={[domainFrom, domainTo]}
          xType="time"
          margin={{ left: 65 }}
          dontCheckIfEmpty={true}
          onMouseEnter={() => {}}
        >
          {/* <HorizontalGridLines /> */}
          <VerticalGridLines />
          {/* {daySpan > dateThreshold && (
            <XAxis
              tickFormat={d =>
                moment(d).format("HH:mm") == "00:00"
                  ? `${moment(d).format("D.MM HH:mm")}`
                  : `${moment(d).format("DD:MM")}`
              }
              tickTotal={this.state.width * 0.01}
            />
          )} */}
          {/* {daySpan <= dateThreshold && ( */}
          <XAxis
            tickFormat={(d) =>
              moment(d).format("HH:mm") == "00:00"
                ? ``
                : `${moment(d).format("HH:mm")}`
            }
            // style={{
            //   line: { stroke: "#ADDDE1" },
            //   ticks: { stroke: "#ADDDE1" },
            //   text: { stroke: "none", fill: "#555555", fontSize: 10 }
            // }}
            // top={15}
            tickTotal={plotWidth * 0.01}
          />
          <XAxis
            tickFormat={(d) =>
              moment(d).format("HH:mm") == "00:00"
                ? `${moment(d).format("D.MM")}`
                : ``
            }
            // top={2}
            style={{
              line: { stroke: "#ADDDE1" },
              ticks: { stroke: "#ADDDE1" },
              text: {
                stroke: "none",
                fill: "#000000",
                fontWeight: 750,
                fontSize: 12,
              },
            }}
            tickTotal={plotWidth * 0.01}
          />
          {/* )} */}
          {/* <YAxis /> */}
          {gridDates &&
            gridDates.map((date) => {
              return (
                <DecorativeAxis
                  key={`${date}-axis`}
                  className="decaxis"
                  axisDomain={[]}
                  axisStart={{
                    x: moment(date.format("YYYY-MM-DD")),
                    y: 0,
                  }}
                  axisEnd={{
                    x: moment(date.format("YYYY-MM-DD")),
                    y: 1,
                  }}
                  tickTotal={0}
                  style={{
                    ticks: { display: "none" },
                    text: { display: "none" },
                  }}
                />
              );
            })}
        </FlexibleXYPlot>
        {this.props.children}
      </ChartDiv>
    );
  }
}
function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

export function rgbToHex(r, g, b, a) {
  return "#" + rgbHex(r, g, b, a);
}
const ChartDiv = styled.div`
  width: 100%;
  height: 80%;
  background-color: ${(props) => rgbToHex(255, 255, 255, props.opacity)};
  position: relative;

  .decaxis .rv-xy-plot__axis__line {
    stroke-width: 3px;
    stroke: rgba(200, 200, 200, 0.9);
  }

  .decaxis line {
    stroke: rgba(200, 200, 200, 0.9);
  }

  .mainPlot {
    position: absolute;
    top: 0;
    left: 0;
  }

  .dailySumPlot {
    position: absolute;
    top: 0;
    left: 0;
  }

  .directionPlot {
    position: absolute;
    margin-bottom: 110px;
    /* top: 0; */
    left: 0;
    z-index: 5;
  }

  .precipitationPlot {
    position: absolute;
    width: 90%;
    top: 0;
    left: 0;
  }

  .pressurePlot {
    position: absolute;
    top: 0;
    left: 0;
  }

  .plot {
    border: 3px solid green;
    position: relative;
  }

  .legend {
    position: absolute;
    left: -210px;
    bottom: 0;
    z-index: 1;
  }
  .legendpr {
    position: absolute;
    left: -210px;
    bottom: -95%;

    z-index: 1;
  }

  .forward {
    right: 0;
  }

  .backward {
    margin-right: 100px;
  }

  button {
    position: absolute;
    top: 45%;
    margin-top: 7px;
    text-decoration: none;
    border: none;
    width: 40px;
    text-align: center;
    background-color: rgba(233, 233, 233, 0.3);
    box-shadow: 0 0 15px rgba(233, 233, 233, 0.5);
  }
`;

export default BasicChart;