react-meteo-chart/src/Test/TestChart.jsx

pre alpha of meteo chart

import React, { Component } from "react";
import BasicChart from "../BasicChart";
import AmsLegend, { COLORS } from "./TestLegend";
import AmsCrossFormat from "./TestCrossFormat";
import {
  FlexibleWidthXYPlot,
  CustomSVGSeries,
  YAxis,
  LineSeries,
  Crosshair
} from "react-vis";
import moment from "moment";

class TestChart extends Component {
  state = {
    cross: {},
    showcross: false,
    wind: true,
    temp: true,
    tendency: true,
    precipit: true,
    normalPress: true,
    press: true
  };
  render() {
    console.log("hello ams");
    console.log("props", this.props);

    const { superArr, dateFrom, dateTo } = this.props;

    let domainFrom = moment(moment(dateFrom).format("YYYY-MM-DDT00"));
    let domainTo = moment(moment(dateTo).format("YYYY-MM-DD:23:59:59"));

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

    const day = 86400000;

    const showDirectionThreshold = day * 30;

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

    const plotHeight = 570;

    const {
      cross,
      showcross,
      wind,
      temp,
      tendency,
      precipit,
      normalPress,
      press
    } = this.state;

    return (
      <>
        <BasicChart superArr={superArr} dateFrom={dateFrom} dateTo={dateTo}>
          <FlexibleWidthXYPlot
            height={plotHeight}
            className="mainPlot"
            xDomain={[domainFrom, domainTo]}
          >
            <YAxis hideLine left={50} />
            {/* Normalized pressure array */}
            {superArr[4] && normalPress && (
              <LineSeries
                getNull={d => d.y !== null}
                data={superArr[4]}
                stroke={`${COLORS.normalizedPressureColor}`}
                size="1"
                curve={"curveMonotoneX"}
                onNearestX={(value, { index }) => {
                  this.setState({
                    cross: superArr.map(d => d[index]),
                    showcross: true
                  });
                }}
              />
            )}
            {/* Pressure array */}
            {superArr[5] && press && (
              <LineSeries
                getNull={d => d.y !== null}
                data={superArr[5]}
                stroke={`${COLORS.pressureColor}`}
                size="1"
                curve={"curveMonotoneX"}
              />
            )}
            {showcross && (
              <Crosshair values={cross}>
                <AmsCrossFormat superArr={superArr} cross={cross} />
              </Crosshair>
            )}
          </FlexibleWidthXYPlot>

          {/* <FlexibleWidthXYPlot
            height={plotHeight}
            className="mainPlot"
            onMouseLeave={() => {
              this.setState({ showcross: false });
            }}
            onMouseEnter={() => {
              console.log("asdfasfdasfd");
            }}
            xType="time"
            xDomain={[domainFrom, domainTo]}
          >
            {showcross && (
              <Crosshair values={cross}>
                <AmsCrossFormat superArr={superArr} cross={cross} />
              </Crosshair>
            )}
            <YAxis />
          </FlexibleWidthXYPlot> */}
          <AmsLegend setVal={setVal} />
        </BasicChart>
        <BasicChart superArr={superArr} dateFrom={dateFrom} dateTo={dateTo}>
          <FlexibleWidthXYPlot
            height={plotHeight}
            className="mainPlot"
            xDomain={[domainFrom, domainTo]}
          >
            {/* Wind speed array */}
            {superArr[0] && wind && (
              <LineSeries
                getNull={d => d.y !== null}
                data={superArr[0]}
                curve={"linear"} //find solution
                stroke={`${COLORS.widSpeedColor}`}
                size="1"
                onNearestX={(value, { index }) => {
                  this.setState({
                    cross: superArr.map(d => d[index]),
                    showcross: true
                  });
                }}
              />
            )}
            {showcross && (
              <Crosshair values={cross}>
                <AmsCrossFormat superArr={superArr} cross={cross} />
              </Crosshair>
            )}
          </FlexibleWidthXYPlot>
          <FlexibleWidthXYPlot
            height={90}
            className="directionPlot"
            xDomain={[domainFrom, domainTo]}
          >
            {/* Wind Direction array */}
            {superArr[6] && daySpan < showDirectionThreshold && (
              <CustomSVGSeries data={superArr[6]} getNull={d => d.y !== null} />
            )}
          </FlexibleWidthXYPlot>
        </BasicChart>
        <BasicChart superArr={superArr} dateFrom={dateFrom} dateTo={dateTo}>
          <FlexibleWidthXYPlot
            height={plotHeight}
            className="mainPlot"
            xDomain={[domainFrom, domainTo]}
          >
            {/* Temperature array */}
            {superArr[1] && temp && (
              <LineSeries
                getNull={d => d.y !== null}
                data={superArr[1]}
                style={{ strokeWidth: "3" }}
                stroke={`${COLORS.temperatureColor}`}
                size="1"
                onNearestX={(value, { index }) => {
                  this.setState({
                    cross: superArr.map(d => d[index]),
                    showcross: true
                  });
                }}
              />
            )}
            {showcross && (
              <Crosshair values={cross}>
                <AmsCrossFormat superArr={superArr} cross={cross} />
              </Crosshair>
            )}
          </FlexibleWidthXYPlot>
        </BasicChart>
        <BasicChart superArr={superArr} dateFrom={dateFrom} dateTo={dateTo}>
          <FlexibleWidthXYPlot
            height={plotHeight}
            className="mainPlot"
            xDomain={[domainFrom, domainTo]}
          >
            {/* Barometric tendency array  */}
            {superArr[2] && tendency && (
              <LineSeries
                getNull={d => d.y !== null}
                data={superArr[2]}
                markStyle={{ fill: "blue" }}
                stroke={`${COLORS.barometricTendencyColor}`}
                size="1"
                curve={"curveMonotoneX"}
                onNearestX={(value, { index }) => {
                  this.setState({
                    cross: superArr.map(d => d[index]),
                    showcross: true
                  });
                }}
              />
            )}
            {showcross && (
              <Crosshair values={cross}>
                <AmsCrossFormat superArr={superArr} cross={cross} />
              </Crosshair>
            )}
          </FlexibleWidthXYPlot>
        </BasicChart>
        <BasicChart superArr={superArr} dateFrom={dateFrom} dateTo={dateTo}>
          <FlexibleWidthXYPlot
            height={plotHeight}
            className="precipitationPlot"
            xDomain={[domainFrom, domainTo]}
          >
            <YAxis hideLine left={100} orientation="left" />
            {/* Precipitation array */}
            {superArr[3] && precipit && (
              <LineSeries
                className="precipitBars"
                getNull={d => d.y !== null}
                data={superArr[3]}
                stroke={`${COLORS.precipitationColor}`}
                fill={`${COLORS.precipitationColor}`}
                style={{
                  strokeWidth: 15
                }}
                onNearestX={(value, { index }) => {
                  this.setState({
                    cross: superArr.map(d => d[index]),
                    showcross: true
                  });
                }}
              />
            )}
            {showcross && (
              <Crosshair values={cross}>
                <AmsCrossFormat superArr={superArr} cross={cross} />
              </Crosshair>
            )}
          </FlexibleWidthXYPlot>
        </BasicChart>
      </>
    );
  }
}

export default TestChart;