react-meteo-chart/src/LeBasicChart.jsx

pre alpha of meteo chart

import React, { Component } from "react";
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 {
  XYPlot,
  FlexibleXYPlot,
  DecorativeAxis,
  FlexibleWidthXYPlot,
  Borders,
  XAxis,
  YAxis,
  VerticalGridLines,
  HorizontalGridLines,
  CustomSVGSeries,
  LineSeries,
  LineMarkSeries,
  GridLines,
  Crosshair
} from "react-vis";
let leheight = 0;

class LeBasicChart extends Component {
  state = {
    showcross: false,
    wind: true,
    temp: true,
    tendency: true,
    precipit: true,
    normalPress: true,
    press: true,
    width: 0
  };
  componentDidUpdate() {}
  componentDidMount() {
    this.setState({ width: 1555 });
    window.addEventListener("resize", e =>
      this.setState({ width: document.getElementById("rr").clientWidth })
    );
  }
  componentWillUnmount() {
    window.removeEventListener("resize", e =>
      this.setState({ width: document.getElementById("rr").clientWidth })
    );
  }

  render() {
    const {
      width,
      height,
      dateFrom,
      dateTo,
      superArr,
      extremum,
      plotHeight = 270,
      plotWidth = 1400
    } = this.props;
    leheight = `${10 * 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 (
      <div id="rr">
        <FlexibleXYPlot
          height={plotHeight}
          // width={plotWidth}
          className="mainPlot"
          //   yDomain={this.props.yDomain ? this.props.yDomain : [0]}
          xDomain={[domainFrom, domainTo]}
          xType="time"
          margin={{ left: 65 }}
          dontCheckIfEmpty={true}
          onMouseEnter={() => {}}
        >
          <HorizontalGridLines tickTotal={5} />
          <VerticalGridLines />

          <XAxis
            tickFormat={d =>
              moment(d).format("HH:mm") == "00:00"
                ? ``
                : `${moment(d).format("HH:mm")}`
            }
            tickTotal={this.state.width * 0.01}
          />
          <XAxis
            tickFormat={d =>
              moment(d).format("HH:mm") == "00:00"
                ? `${moment(d).format("D.MM")}`
                : ``
            }
            style={{
              line: { stroke: "#ADDDE1" },
              ticks: { stroke: "#ADDDE1" },
              text: { stroke: "none", fill: "#555555", fontWeight: 600 }
            }}
            tickTotal={this.state.width * 0.01}
          />
          {/* )} */}
          <YAxis
            tickTotal={5}
            tickFormat={(value, index, scale, tickTotal) => {
              return value;
            }}
          />
          {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" }
                  }}
                />
              );
            })}
          {this.props.children}
        </FlexibleXYPlot>
      </div>
    );
  }
}

const ChartDiv = styled.div`
  width: 100%;
  height: 80%;

  /* height: 100vh; */
  /* border: 1px solid #7d9cb8; */
  /* padding-bottom: 0px; */

  background-color: white;
  position: relative;
  /* display: inline-block; */

  .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;
    bottom: ${leheight};
    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 LeBasicChart;