Skip to content

Instantly share code, notes, and snippets.

@abhirathore2006
Created May 9, 2017 05:35
Show Gist options
  • Save abhirathore2006/7fa73328be7ff45b785d727fb19fffa6 to your computer and use it in GitHub Desktop.
Save abhirathore2006/7fa73328be7ff45b785d727fb19fffa6 to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment