#713 Error handling #2

metasfresh · May 29, 2017 · ad76d6c · ad76d6c
1 parent f6d5d90
commit ad76d6c
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 46 deletions.
diff --git a/src/components/charts/Indicator.js b/src/components/charts/Indicator.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+class Indicator extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const {value, caption} = this.props;
+        return (
+            <div className="indicator">
+                <div className="indicator-value">{value}</div>
+                <div className="indicator-kpi-caption">{caption}</div>
+            </div>
+        );
+    }
+}
+
+export default Indicator;
diff --git a/src/components/charts/RawChart.js b/src/components/charts/RawChart.js
@@ -3,6 +3,7 @@ import {connect} from 'react-redux';
 
 import BarChart from './BarChartComponent';
 import PieChart from './PieChartComponent';
+import Indicator from './Indicator';
 
 import {
     getKPIData,
@@ -20,32 +21,6 @@ class RawChart extends Component {
         }
     }
 
-    getData(){
-        const { id, chartType } = this.props;
-
-        if (chartType === 'Indicator') {
-            return getTargetIndicatorsData(id)
-                .then(response => {
-                    return response.data.datasets[0].values
-                }).catch(err => {throw err});
-        }
-
-        return getKPIData(id)
-            .then(response => {
-                return response.data.datasets[0].values
-            })
-            .catch(err => {throw err});
-    }
-
-    fetchData(){
-        this.getData()
-            .then(chartData => {
-                this.setState({ chartData: chartData, err: null });
-            }).catch(err => {
-                this.setState({ err })
-            })
-    }
-
     componentDidMount(){
         const { pollInterval } = this.props;
 
@@ -72,6 +47,32 @@ class RawChart extends Component {
         }
     }
 
+    getData() {
+        const { id, chartType } = this.props;
+
+        if (chartType === 'Indicator') {
+            return getTargetIndicatorsData(id)
+                .then(response => {
+                    return response.data.datasets
+                }).catch(err => {throw err});
+        }
+
+        return getKPIData(id)
+            .then(response => {
+                return response.data.datasets
+            })
+            .catch(err => {throw err});
+    }
+
+    fetchData(){
+        this.getData()
+            .then(chartData => {
+                this.setState({ chartData: chartData, err: null });
+            }).catch(err => {
+                this.setState({ err })
+            })
+    }
+
     renderError() {
         return(
             <div className="error-load-data">
@@ -86,19 +87,17 @@ class RawChart extends Component {
             id, chartType, caption, fields, groupBy, reRender, height
         } = this.props;
         const {chartData} = this.state;
+        const data = chartData[0] && chartData[0].values;
 
         switch(chartType){
             case 'BarChart':
                 return(
                     <BarChart
-                        chartType={chartType}
-                        caption={caption}
-                        fields={fields}
-                        groupBy={groupBy}
-                        data={chartData}
+                        {...{
+                            data, groupBy, caption, chartType, height, reRender,
+                            fields
+                        }}
                         chartClass={'chart-' + id}
-                        height={height}
-                        reRender={reRender}
                         colors = {[
                             '#89d729', '#9aafbd', '#7688c9', '#c1ea8e',
                             '#c9d5dc', '#aab5e0', '#6aad18', '#298216',
@@ -109,13 +108,9 @@ class RawChart extends Component {
             case 'PieChart':
                 return(
                     <PieChart
+                        {...{data, fields, groupBy, height, reRender}}
                         chartClass={'chart-' + id}
                         responsive={true}
-                        data={chartData}
-                        fields={fields}
-                        groupBy={groupBy}
-                        height={height}
-                        reRender={reRender}
                         colors = {[
                             '#89d729', '#9aafbd', '#7688c9', '#c1ea8e',
                             '#c9d5dc', '#aab5e0', '#6aad18', '#298216',
@@ -125,26 +120,37 @@ class RawChart extends Component {
                 );
             case 'Indicator':
                 return(
-                    <div className="indicator">
-                        <div className="indicator-value">{
-                            chartData[0][fields[0].fieldName] +
-                            (fields[0].unit ? ' ' + fields[0].unit : '')}</div>
-                        <div className="indicator-kpi-caption">{caption}</div>
-                    </div>
+                    <Indicator
+                        value={data[0][fields[0].fieldName] +
+                            (fields[0].unit ? ' ' + fields[0].unit : '')}
+                        {...{caption}}
+                    />
                 );
             default:
                 return <div>{ chartType }</div>;
         }
     }
 
+    renderNoData() {
+        const {chartType} = this.props;
+
+        switch(chartType){
+            case 'Indicator':
+                return <Indicator value="No data" />
+            default:
+                return <div>No data</div>
+        }
+    }
+
     render(){
         const {chartData, err} = this.state;
 
         return err ?
             this.renderError() :
             (chartData && chartData.length > 0 ?
-                this.renderChart() : <div>No data</div>)
-
+                this.renderChart() :
+                this.renderNoData()
+            )
     }
 }