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

pre alpha of meteo chart

import React, { Component } from "react";
import { DiscreteColorLegend } from "react-vis";
import { fontSize } from "../GridDates";

export const COLORS = {
  widSpeedColor: "#ae0b0b",
  temperatureColor: "#dce775",
  barometricTendencyColor: "#1f6025",
  precipitationColor: "#40bfb7",
  normalizedPressureColor: "#342d86",
  pressureColor: "#822d86"
};

const ITEMS = [
  {
    title: "Скорость ветра, м/с",
    color: `${COLORS.widSpeedColor}`,
    strokeWidth: 10
  },
  {
    title: "Температура, C°",
    color: `${COLORS.temperatureColor}`,
    strokeWidth: 10
  },
  {
    title: "Барическая тенденция, гПа",
    color: `${COLORS.barometricTendencyColor}`,
    strokeWidth: 10
  },
  {
    title: "Осадки, мм",
    color: `${COLORS.precipitationColor}`,
    strokeWidth: 10
  },
  {
    title: "Приведенное давление, гПа",
    color: `${COLORS.normalizedPressureColor}`,
    strokeWidth: 10
  },
  {
    title: "Давление, гПа",
    color: `${COLORS.pressureColor}`,
    strokeWidth: 10
  }
];

export class AmsLegend extends Component {
  state = {
    wind: true,
    temp: true,
    tendency: true,
    precipit: true,
    normalPress: true,
    press: true
  };
  render() {
    const { wind, temp, tendency, precipit, normalPress, press } = this.state;

    const { setVal } = this.props;

    return (
      <DiscreteColorLegend
        className="legend"
        orientation="horizontal"
        // width={850}
        // height={50}
        items={ITEMS}
        onItemClick={e => {
          switch (e.title) {
            case "Скорость ветра, м/с":
              this.setState({ wind: !wind });
              setVal(wind, "wind");
              break;

            case "Температура, C°":
              this.setState({ temp: !temp });
              setVal(temp, "temp");
              break;

            case "Барическая тенденция, гПа":
              this.setState({ tendency: !tendency });
              setVal(tendency, "tendency");
              break;

            case "Осадки, мм":
              this.setState({ precipit: !precipit });
              setVal(precipit, "precipit");
              break;

            case "Приведенное давление, гПа":
              this.setState({
                normalPress: !normalPress
              });
              setVal(normalPress, "normalPress");
              break;

            case "Давление, гПа":
              this.setState({ press: !press });
              setVal(press, "press");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}

export class FlexAmsLegend extends Component {
  state = {
    wind: true,
    temp: true,
    tendency: true,
    precipit: true,
    normalPress: true,
    press: true
  };
  render() {
    const { setVal } = this.props;

    return (
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "center",
          zIndex: 152,
          marginLeft: "100px"
        }}
      >
        {" "}
        <WindSpeedLegend setVal={setVal} isAdmin={false} />{" "}
        <TempLegend setVal={setVal} isAdmin={false} />{" "}
        <PressureLegend setVal={setVal} isAdmin={false} />
        <PrecipLegendM setVal={setVal} isAdmin={false} />
      </div>
    );
  }
}

export class WindSpeedLegend extends Component {
  state = {
    wind: true,
    temp: true,
    tendency: true,
    precipit: true,
    normalPress: true,
    press: true
  };
  render() {
    const { wind, temp, tendency, precipit, normalPress, press } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <DiscreteColorLegend
        className="legend"
        // width={15}
        // height={25}
        style={{ fontSize }}
        orientation={isAdmin ? "vertical" : "horizontal"}
        width={isAdmin ? 190 : true}
        items={[ITEMS[0]]}
        onItemClick={e => {
          switch (e.title) {
            case "Скорость ветра, м/с":
              this.setState({ wind: !wind });
              setVal(wind, "wind");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}

export class TempLegend extends Component {
  state = {
    wind: true,
    temp: true,
    tendency: true,
    precipit: true,
    normalPress: true,
    press: true
  };
  render() {
    const { wind, temp, tendency, precipit, normalPress, press } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <DiscreteColorLegend
        className="legend"
        style={{ fontSize }}
        // width={150}
        items={[ITEMS[1]]}
        orientation={isAdmin ? "vertical" : "horizontal"}
        width={isAdmin ? 190 : true}
        onItemClick={e => {
          switch (e.title) {
            case "Температура, C°":
              this.setState({ temp: !temp });
              setVal(temp, "temp");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}

export class PressureLegend extends Component {
  state = {
    wind: true,
    temp: true,
    tendency: true,
    precipit: true,
    normalPress: true,
    press: true
  };
  render() {
    const { wind, temp, tendency, precipit, normalPress, press } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;

    return (
      <DiscreteColorLegend
        className="legend"
        style={{ fontSize }}
        orientation={isAdmin ? "vertical" : "horizontal"}
        width={isAdmin ? 190 : true}
        // height={155}
        // width={150}
        items={[ITEMS[4], ITEMS[5]]}
        onItemClick={e => {
          switch (e.title) {
            case "Приведенное давление, гПа":
              this.setState({
                normalPress: !normalPress
              });
              setVal(normalPress, "normalPress");
              break;

            case "Давление, гПа":
              this.setState({ press: !press });
              setVal(press, "press");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}

export class BarTendencyLegend extends Component {
  state = {
    wind: true,
    temp: true,
    tendency: true,
    precipit: true,
    normalPress: true,
    press: true
  };
  render() {
    const { wind, temp, tendency, precipit, normalPress, press } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <DiscreteColorLegend
        className="legend"
        style={{ fontSize }}
        width={isAdmin ? 190 : true}
        // width={190}
        items={[ITEMS[2]]}
        orientation={isAdmin ? "vertical" : "horizontal"}
        onItemClick={e => {
          switch (e.title) {
            case "Барическая тенденция, гПа":
              this.setState({ tendency: !tendency });
              setVal(tendency, "tendency");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}

export class PrecipLegend extends Component {
  state = {
    wind: true,
    temp: true,
    tendency: true,
    precipit: true,
    normalPress: true,
    press: true
  };
  render() {
    const { wind, temp, tendency, precipit, normalPress, press } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <DiscreteColorLegend
        className="legendpr"
        // width={150}
        width={isAdmin ? 190 : true}
        items={[ITEMS[3]]}
        style={{ paddingTop: "5px", fontSize }}
        orientation={isAdmin ? "vertical" : "horizontal"}
        onItemClick={e => {
          switch (e.title) {
            case "Осадки, мм":
              this.setState({ precipit: !precipit });
              setVal(precipit, "precipit");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}
export class PrecipLegendM extends Component {
  state = {
    wind: true,
    temp: true,
    tendency: true,
    precipit: true,
    normalPress: true,
    press: true
  };
  render() {
    const { wind, temp, tendency, precipit, normalPress, press } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <DiscreteColorLegend
        className="legend"
        style={{ fontSize }}
        // height={35}
        // width={150}
        items={[ITEMS[3]]}
        width={isAdmin ? 190 : true}
        orientation={isAdmin ? "vertical" : "horizontal"}
        onItemClick={e => {
          switch (e.title) {
            case "Осадки, мм":
              this.setState({ precipit: !precipit });
              setVal(precipit, "precipit");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}