import React, { Component } from 'react'; import { Bar } from 'react-chartjs-2'; import { ListGroup, Modal } from 'react-bootstrap'; class BarGraph extends Component { constructor(props) { super(props); this.state = { showModal: false, idx: undefined, element: '', details: [], }; this.toggleModal = this.toggleModal.bind(this); } toggleModal(event, item) { const index = item[0]._index; this.setState({ showModal: true, idx: index, element: this.props.labels[index], details: this.props.details[index], }); } render() { const { details } = this.state; const properties = details.map((property, i) => { return ( <ListGroup.Item key={i}> Name: {property.name} <br /> Type: {property.type} <br /> Value: {property.value} </ListGroup.Item> ); }); return ( <div className="barGraph"> <Modal show={this.state.showModal} onHide={() => { this.setState({ showModal: false }); }} > <Modal.Header closeButton> <Modal.Title>{this.state.element} Properties</Modal.Title> </Modal.Header> <ListGroup variant="flush">{properties}</ListGroup> </Modal> <Bar data={{ labels: this.props.labels, datasets: [ { label: 'Snapshot 1', data: this.props.data.snapshot0, backgroundColor: 'rgba(104,245,196,1)', }, { label: 'Snapshot 2', data: this.props.data.snapshot1, backgroundColor: 'rgba(104,245,196,0.86)', }, { label: 'Snapshot 3', data: this.props.data.snapshot2, backgroundColor: 'rgba(104,245,196,0.72)', }, { label: 'Snapshot 4', data: this.props.data.snapshot3, backgroundColor: 'rgba(104,245,196,0.68)', }, { label: 'Snapshot 5', data: this.props.data.snapshot4, backgroundColor: 'rgba(104,245,196,0.54)', }, { label: 'Snapshot 6', data: this.props.data.snapshot5, backgroundColor: 'rgba(104,245,196,0.40)', }, { label: 'Snapshot 7', data: this.props.data.snapshot6, backgroundColor: 'rgba(104,245,196,0.26)', }, ], }} options={{ onClick: this.toggleModal, legend: { display: true, position: 'right', labels: { borderWidth: 1, fontColor: 'black', }, }, scales: { xAxes: [ { stacked: true, scaleLabel: { display: true, labelString: 'Possible Memory Leaks', }, }, ], yAxes: [ { stacked: true, scaleLabel: { display: true, labelString: 'References (per snapshot)', }, }, ], }, }} /> </div> ); } } export default BarGraph;