64 lines
2.0 KiB
JavaScript
64 lines
2.0 KiB
JavaScript
import React, { Component } from 'react'
|
|
import FocusChart from '../../Models/Chart/FocusChart'
|
|
import { Doughnut, Bar, Line, Pie, Polar, Radar } from 'react-chartjs-2'
|
|
import { Button } from 'semantic-ui-react'
|
|
import download from 'downloadjs'
|
|
|
|
class ChartViewer extends Component {
|
|
constructor () {
|
|
super ()
|
|
this.focusChart = new FocusChart()
|
|
this.chart = React.createRef()
|
|
this.state = {
|
|
chart: null,
|
|
reportValue: ''
|
|
}
|
|
|
|
document.addEventListener('setSelectedChart', this.setFocusChart)
|
|
}
|
|
|
|
handleGroupByChange = (e, value) => {
|
|
this.setState({ reportValue: value.value })
|
|
}
|
|
|
|
saveChart = () => {
|
|
console.log(this.chart.current)
|
|
const base64OfChart = this.chart.current.chartInstance.toBase64Image()
|
|
download(base64OfChart, this.focusChart.chart.label, 'image/png')
|
|
}
|
|
|
|
setFocusChart = () => {
|
|
const focusChart = this.focusChart.chart
|
|
if (focusChart) {
|
|
this.setState({
|
|
chart: focusChart
|
|
})
|
|
}
|
|
}
|
|
|
|
renderChart = () => {
|
|
const { chart } = this.state
|
|
if (!chart) return
|
|
|
|
console.log(chart)
|
|
|
|
if (chart.type === 'bar') return <Bar data={chart[chart.type]} width={600} height={600} ref={this.chart} />
|
|
if (chart.type === 'doughnut') return <Doughnut data={chart[chart.type]} width={600} height={600} ref={this.chart} />
|
|
if (chart.type === 'line') return <Line data={chart[chart.type]} width={600} height={600} ref={this.chart} />
|
|
if (chart.type === 'pie') return <Pie data={chart[chart.type]} width={600} height={600} ref={this.chart} />
|
|
if (chart.type === 'polar') return <Polar data={chart[chart.type]} width={600} height={600} ref={this.chart} />
|
|
if (chart.type === 'radar') return <Radar data={chart[chart.type]} width={600} height={600} ref={this.chart} />
|
|
}
|
|
|
|
render = () => {
|
|
return (
|
|
<div className='ChartViewer'>
|
|
{this.renderChart()}
|
|
{ this.state.chart ? <Button onClick={this.saveChart}>Save As Image</Button> : '' }
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default ChartViewer
|