react-meteo-chart/src/Pluvio/PluvioLegend.jsx

pre alpha of meteo chart

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

const ITEMS = [
  {
    title: "Сумма за час",
    color: `${COLORS.Sum1hColor}`,
    strokeWidth: 10
  },
  {
    title: "Сумма за 3 часа",
    color: `${COLORS.Sum3hColor}`,
    strokeWidth: 10
  },
  {
    title: "Сумма за 6 часов",
    color: `${COLORS.Sum6hColor}`,
    strokeWidth: 10
  },
  {
    title: "Дневная Сумма",
    color: `${COLORS.Sum24hColor}`,
    strokeWidth: 10
  }
];

export class PluvioLegend1h extends Component {
  state = {
    hsum: true,
    hsum3: true,
    hsum6: true,
    hsum24: true
  };
  render() {
    const { hsum } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <DiscreteColorLegend
        className="legend"
        orientation={isAdmin ? "vertical" : "horizontal"}
        style={{ fontSize }}
        width={isAdmin ? 150 : true}
        items={[ITEMS[0]]}
        onItemClick={e => {
          switch (e.title) {
            case "Сумма за час":
              this.setState({ hsum: !hsum });
              setVal(hsum, "hsum");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}
export class PluvioLegend3h extends Component {
  state = {
    hsum: true,
    hsum3: true,
    hsum6: true,
    hsum24: true
  };
  render() {
    const { hsum3 } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <DiscreteColorLegend
        className="legend"
        orientation={isAdmin ? "vertical" : "horizontal"}
        style={{ fontSize }}
        width={isAdmin ? 150 : true}
        items={[ITEMS[1]]}
        onItemClick={e => {
          switch (e.title) {
            case "Сумма за 3 часа":
              this.setState({ hsum3: !hsum3 });
              setVal(hsum3, "hsum3");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}
export class PluvioLegend6h extends Component {
  state = {
    hsum: true,
    hsum3: true,
    hsum6: true,
    hsum24: true
  };
  render() {
    const { hsum6 } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <DiscreteColorLegend
        className="legend"
        orientation={isAdmin ? "vertical" : "horizontal"}
        style={{ fontSize }}
        width={isAdmin ? 150 : true}
        items={[ITEMS[2]]}
        onItemClick={e => {
          switch (e.title) {
            case "Сумма за 6 часов":
              this.setState({ hsum6: !hsum6 });
              setVal(hsum6, "hsum6");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}
export class PluvioLegend24h extends Component {
  state = {
    hsum: true,
    hsum3: true,
    hsum6: true,
    hsum24: true
  };
  render() {
    const { hsum24 } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <DiscreteColorLegend
        className="legendpr"
        orientation={isAdmin ? "vertical" : "horizontal"}
        style={{ fontSize }}
        width={isAdmin ? 150 : true}
        items={[ITEMS[3]]}
        onItemClick={e => {
          switch (e.title) {
            case "Дневная Сумма":
              this.setState({ hsum24: !hsum24 });
              setVal(hsum24, "hsum24");
              break;

            default:
              console.log("Unknown item");
              break;
          }
        }}
      />
    );
  }
}
class PluvioLegend24hM extends Component {
  state = {
    hsum: true,
    hsum3: true,
    hsum6: true,
    hsum24: true
  };
  render() {
    const { hsum24 } = this.state;

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <DiscreteColorLegend
        className="legend"
        orientation="horizontal"
        style={{ fontSize }}
        width={isAdmin ? 150 : true}
        items={[ITEMS[3]]}
        orientation={isAdmin ? "vertical" : "horizontal"}
        onItemClick={e => {
          switch (e.title) {
            case "Дневная Сумма":
              this.setState({ hsum24: !hsum24 });
              setVal(hsum24, "hsum24");
              break;

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

    const { setVal } = this.props;
    const { isAdmin } = this.props;
    return (
      <div
        style={{
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "center",
          marginLeft: "100px"
        }}
      >
        {" "}
        <PluvioLegend1h setVal={setVal} /> <PluvioLegend3h setVal={setVal} />{" "}
        <PluvioLegend6h setVal={setVal} isAdmin={false} />
        <PluvioLegend24hM setVal={setVal} />
      </div>
    );
  }
}