diff --git a/src/views/ChartViewer/ChartViewer.css b/src/views/ChartViewer/ChartViewer.css new file mode 100644 index 0000000..a0a0702 --- /dev/null +++ b/src/views/ChartViewer/ChartViewer.css @@ -0,0 +1,7 @@ +.chartLabel { + text-align: center; + margin: 10px auto; +} + +.saveChartAsImageButton { +} \ No newline at end of file diff --git a/src/views/ChartViewer/ChartViewer.js b/src/views/ChartViewer/ChartViewer.js index b8df06c..2293909 100644 --- a/src/views/ChartViewer/ChartViewer.js +++ b/src/views/ChartViewer/ChartViewer.js @@ -3,6 +3,7 @@ import FocusChart from '../../Models/Chart/FocusChart' import { Doughnut, Bar, Line, Pie, Polar, Radar, Scatter, Bubble } from 'react-chartjs-2' import { Button } from 'semantic-ui-react' import download from 'downloadjs' +import './ChartViewer.css' class ChartViewer extends Component { constructor () { @@ -17,6 +18,11 @@ class ChartViewer extends Component { document.addEventListener('setSelectedChart', this.setFocusChart) } + closeChart = () => { + this.focusChart.chart = null + this.setFocusChart() + } + handleGroupByChange = (e, value) => { this.setState({ reportValue: value.value }) } @@ -28,11 +34,9 @@ class ChartViewer extends Component { setFocusChart = () => { const focusChart = this.focusChart.chart - if (focusChart) { - this.setState({ - chart: focusChart - }) - } + this.setState({ + chart: focusChart + }) } renderChart = () => { @@ -50,11 +54,14 @@ class ChartViewer extends Component { } render = () => { + const chart = this.state.chart || {} return (
+

{ chart.label }

{this.renderChart()}
- { this.state.chart ? : '' } + { this.state.chart ? : '' } + { this.state.chart ? : '' }
) }