react-meteo-chart/src/Levels/LevelsLegend.jsx

pre alpha of meteo chart

import React, { Component } from "react";
import { DiscreteColorLegend } from "react-vis";
import { fontSize } from "../GridDates";
export const COLORS = {
  Sum24hColor: "#1111aa",
  Sum24hStrokeColor: "#000000",
  Sum6hColor: "#3333cc",
  Sum6hStrokeColor: "#000000",
  TWColor: "#cc2222",
  Sum3hStrokeColor: "#000000",
  LWColor: "#7777ff",
  Sum1hStrokeColor: "#000000"
  // temperatureColor: "#dce775",
  // barometricTendencyColor: "#1f6025",
  // precipitationColor: "#40bfb7",
  // normalizedPressureColor: "#342d86",
  // pressureColor: "#822d86"
};

const ITEMS = [
  {
    title: "Уровень воды",
    color: `${COLORS.LWColor}`,
    strokeWidth: 10
  },
  {
    title: "Температура воды",
    color: `${COLORS.TWColor}`,
    strokeWidth: 10
  }
];

export class LegendLW extends Component {
  state = {
    LW: true
  };
  render() {
    const { LW } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <DiscreteColorLegend
        className="legend"
        orientation="horizontal"
        style={{ fontSize }}
        items={[ITEMS[0]]}
        width={isAdmin ? 150 : true}
        orientation={isAdmin ? "vertical" : "horizontal"}
        onItemClick={e => {
          switch (e.title) {
            case "Уровень воды":
              this.setState({ LW: !LW });
              setVal(LW, "LW");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}
export class LegendTW extends Component {
  state = {
    TW: true
  };
  render() {
    const { TW } = this.state;

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

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

export class LegendTWr extends Component {
  state = {
    TW: true
  };
  render() {
    const { TW } = this.state;

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

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}
export class FullLevelsLegend extends Component {
  render() {
    const { setVal } = this.props;

    return (
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "center",
          marginLeft: "100px"
        }}
      >
        {" "}
        <LegendLW setVal={setVal} /> <LegendTW setVal={setVal} />{" "}
      </div>
    );
  }
}