diff options
Diffstat (limited to 'src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx')
-rw-r--r-- | src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx | 43 |
1 files changed, 28 insertions, 15 deletions
diff --git a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx index 30c6cdc..3f4acf0 100644 --- a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx +++ b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx @@ -36,27 +36,35 @@ import i18n from 'utils/i18n/i18n'; import {CHART_NF_TYPE} from 'app/vnfSearch/VnfSearchConstants.js'; import {COLOR_BLUE} from 'utils/GlobalConstants.js'; +import { ClipLoader } from 'react-spinners'; let mapStateToProps = ({vnfSearch}) => { let { - processedNfTypeCountChartData = CHART_NF_TYPE.emptyData + processedNfTypeCountChartData = CHART_NF_TYPE.emptyData, + enableBusyFeedback = false } = vnfSearch; return { - processedNfTypeCountChartData + processedNfTypeCountChartData, + enableBusyFeedback }; }; class VnfSearchNfTypeVisualization extends Component { static propTypes = { - processedNfTypeCountChartData: React.PropTypes.object + processedNfTypeCountChartData: React.PropTypes.object, + enableBusyFeedback: React.PropTypes.bool }; render() { let { - processedNfTypeCountChartData + processedNfTypeCountChartData, + enableBusyFeedback } = this.props; - + let componentVisibitliyClassName = 'showContainer'; + if(enableBusyFeedback){ + componentVisibitliyClassName = 'hideContainer'; + } let visualizationClass = 'visualizations'; if (processedNfTypeCountChartData.values === null || @@ -72,16 +80,21 @@ class VnfSearchNfTypeVisualization extends Component { <div className='visualization-charts'> <div > <h3>{i18n(CHART_NF_TYPE.title)}</h3> - <ResponsiveContainer width='100%' height={300}> - <BarChart data={processedNfTypeCountChartData.values}> - <XAxis dataKey={xAxisAttrName}/> - <YAxis /> - <CartesianGrid strokeDasharray='3 3'/> - <Tooltip/> - <Bar name={i18n(CHART_NF_TYPE.yAxisLabel)} - dataKey={yAxisAttrName} fill={COLOR_BLUE}/> - </BarChart> - </ResponsiveContainer> + <div className='spinner'> + <ClipLoader color={COLOR_BLUE} loading={enableBusyFeedback} /> + </div> + <div className={componentVisibitliyClassName}> + <ResponsiveContainer width='100%' height={300}> + <BarChart data={processedNfTypeCountChartData.values}> + <XAxis dataKey={xAxisAttrName}/> + <YAxis /> + <CartesianGrid strokeDasharray='3 3'/> + <Tooltip/> + <Bar name={i18n(CHART_NF_TYPE.yAxisLabel)} + dataKey={yAxisAttrName} fill={COLOR_BLUE}/> + </BarChart> + </ResponsiveContainer> + </div> </div> </div> </div> |