Recharts Custom Legend

Recharts Custom Legend

import React from "react"
import Time from "react-time"
import { OverlayTrigger, Popover } from "react-bootstrap"
import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Surface, Symbols, XAxis, YAxis } from "recharts"

import "./style/StudentEngagement.less"
import { i18n } from "../services/Messages/Messages"

class StudentEngagementLineChart extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      width: 600,
      height: 300,
      data: [],
      active: ""
    }
  }

  getStroke(key) {
    return key === this.state.active ? 4 : 1
  }

  handleClick = (e) => {
    const dataKey = e.target.innerText
    this.setState({ active: dataKey })
  }

  renderPopoverTop = (dataKey) => {
    const datakeyString = dataKey.replace(/[^a-zA-Z0-9]/g, "").toLowerCase()
    return (
      <Popover id="legend">
        <div className="toolTip">
          <div className="tooltip-layout" />
          <div className="label">{i18n(`StudentEngagementLineChart.ToolTip.popover.${datakeyString}`)}</div>
        </div>
      </Popover>
    )
  }

  renderCusomizedLegend = (props) => {
    const { payload } = props
    return (
      <div className="customized-legend">
        {
          payload.map((entry) => {
            const { dataKey, color } = entry
            let style = {}
            if (dataKey == this.state.active) {
              style = { backgroundColor: color , color: '#fff'}
            }
            return (
              <OverlayTrigger
                onClick={this.handleClick}
                key={`overlay-${dataKey}`}
                trigger={["hover", "focus"]}
                placement="top"
                overlay={this.renderPopoverTop(dataKey)}
              >
                <span className="legend-item" onClick={this.handleClick} style={style}>
                  <Surface width={10} height={10} viewBox="0 0 10 10" onClick={this.handleClick}>
                    <Symbols cx={5} cy={5} type="circle" size={50} fill={color} onClick={this.handleClick} />
                  </Surface>
                  <span onClick={this.handleClick}>{dataKey}</span>
                </span>
              </OverlayTrigger>
            )
          })
        }
      </div>
    )
  }

  render() {
    return (
      <div className="main-legend-style">
        <ResponsiveContainer >
          <LineChart
            data={this.props.responseData}
            margin={{ top: 45, right: 30, left: 50, bottom: 5 }}
          >
            <XAxis dataKey="name" tickLine={false} />
            <YAxis type="number" domain={["dataMax"]} mirror tickCount={1} />
            <CartesianGrid strokeDasharray="3 3" />
            <Legend iconType="circle" wrapperStyle={{ top: 300 }} onClick={this.handleClick} content={this.renderCusomizedLegend} />
            <Line dataKey="confusion" stroke="#1e90ff" name="Confusion" strokeWidth={this.getStroke("confusion")} dot={false} />
            <Line dataKey="notes" stroke="#FF0000" name="Notes" strokeWidth={this.getStroke("notes")} dot={false} />
            <Line dataKey="polling" stroke="#eedd82" name="Polling" strokeWidth={this.getStroke("polling")} dot={false} />
            <Line dataKey="Slide_Deck_Views" stroke="#7fffd4" name="Slide Deck Views" strokeWidth={this.getStroke("Slide_Deck_Views")} dot={false} />
            <Line dataKey="Q_A" stroke="#000080" name="Q&A" strokeWidth={this.getStroke("Q_A")} dot={false} />
          </LineChart>
        </ResponsiveContainer>
        <div className="current-month-time"><Time value={this.props.currentDate} format="MMMM" /></div>
      </div>
    )
  }
}
export default StudentEngagementLineChart