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

pre alpha of meteo chart

import React, { Component } from "react";
import { DiscreteColorLegend } from "react-vis";

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

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

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}
        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 default AmsLegend;