Max Red - Starting refactoring of component stats [skip ci]

client/src/app-components/stats-chart.js

@@ -13,7 +13,6 @@ class StatsChart extends React.Component {
                 value: React.PropTypes.number
             }))
         })),
-        //showed: React.PropTypes.arrayOf(React.PropTypes.bool),
         period: React.PropTypes.number
     };
 
@@ -85,7 +84,6 @@ class StatsChart extends React.Component {
     }
 
     hitRadius(index) {
-        //if (!this.props.showed[index]) return 0;
         if (this.props.period <= 7) return 20;
         if (this.props.period <= 30) return 15;
         if (this.props.period <= 90) return 10;

client/src/app-components/stats.js

@@ -0,0 +1,211 @@
+import React from 'react';
+import _ from 'lodash';
+
+import i18n from 'lib-app/i18n';
+import API from 'lib-app/api-call';
+
+import DropDown from 'core-components/drop-down';
+import ToggleList from 'core-components/toggle-list';
+
+import StatsChart from 'app-components/stats-chart';
+
+const generalStrokes = ['CREATE_TICKET', 'CLOSE', 'SIGNUP', 'COMMENT'];
+const staffStrokes = ['ASSIGN', 'CLOSE'];
+
+class Stats extends React.Component {
+
+    static propTypes = {
+        type: React.PropTypes.string
+    };
+
+    state = {
+        stats: {
+            'CREATE_TICKET': 0,
+            'CLOSE': 0,
+            'SIGNUP': 0,
+            'COMMENT': 0
+        },
+        strokes: [
+            {
+                name: 'CREATE_TICKET',
+                values: []
+            },
+            {
+                name: 'CLOSE',
+                values: []
+            },
+            {
+                name: 'SIGNUP',
+                values: []
+            },
+            {
+                name: 'COMMENT',
+                values: []
+            }
+        ],
+        showed: [0],
+        period: 0
+    };
+
+    componentDidMount() {
+        this.retrieve(7);
+    }
+
+    render() {
+        return (
+            <div>
+                <DropDown {...this.getDropDownProps()}/>
+                <ToggleList {...this.getToggleListProps()} />
+                <StatsChart {...this.getStatsChartProps()} />
+            </div>
+        );
+    }
+
+    getToggleListProps() {
+        return {
+            values: this.state.showed,
+            className: 'admin-panel-stats__toggle-list',
+            onChange: this.onToggleListChange.bind(this),
+            items: ['CREATE_TICKET', 'CLOSE', 'SIGNUP', 'COMMENT'].map((name) => {
+                return {
+                    content:
+                        <div className={'admin-panel-stats__toggle-list-item'}>
+                            <div className={'admin-panel-stats__toggle-list-item-value'}>{this.state.stats[name]}</div>
+                            <div className={'admin-panel-stats__toggle-list-item-name'}>{i18n('CHART_' + name)}</div>
+                        </div>
+                }
+            })
+        };
+    }
+
+    onToggleListChange(event) {
+        this.setState({
+            showed: event.target.value
+        });
+    }
+
+    getDropDownProps() {
+        return {
+            items: [
+                {
+                    content: 'Last 7 days',
+                    icon: ''
+                },
+                {
+                    content: 'Last 30 days',
+                    icon: ''
+                },
+                {
+                    content: 'Last 90 days',
+                    icon: ''
+                },
+                {
+                    content: 'Last 365 days',
+                    icon: ''
+                }
+            ],
+            onChange: this.onDropDownChange.bind(this),
+            className: 'admin-panel-stats__dropdown'
+        }
+    }
+
+    onDropDownChange(event) {
+        let val = [7, 30, 90, 3 65];
+
+        this.retrieve(val[event.index]);
+    }
+
+    getStatsChartProps() {
+        let showed = this.getShowedArray();
+
+        return {
+            period: this.state.period,
+            strokes: _.filter(this.state.strokes, (s, i) => showed[i])
+        };
+    }
+
+    retrieve(period) {
+        let periodName;
+        switch (period) {
+            case 30:
+                periodName = 'MONTH';
+                break;
+            case 90:
+                periodName = 'QUARTER';
+                break;
+            case 365:
+                periodName = 'YEAR';
+                break;
+            default:
+                periodName = 'WEEK';
+        }
+
+        API.call({
+            path: '/system/get-stats',
+            data: {
+                period: periodName
+            }
+        }).then(this.onRetrieveSuccess.bind(this, period));
+    }
+
+    onRetrieveSuccess(period, result) {
+
+        let newStats = {
+            'CREATE_TICKET': 0,
+            'CLOSE': 0,
+            'SIGNUP': 0,
+            'COMMENT': 0
+        };
+
+        let ID = {
+            'CREATE_TICKET': 0,
+            'CLOSE': 1,
+            'SIGNUP': 2,
+            'COMMENT': 3
+        };
+
+        let newStrokes = [
+            {
+                name: 'CREATE_TICKET',
+                values: []
+            },
+            {
+                name: 'CLOSE',
+                values: []
+            },
+            {
+                name: 'SIGNUP',
+                values: []
+            },
+            {
+                name: 'COMMENT',
+                values: []
+            }
+        ];
+
+        let realPeriod = result.data.length / 4;
+
+        for (let i = 0; i < result.data.length; i++) {
+            newStats[result.data[i].type] += result.data[i].value * 1;
+
+            newStrokes[ ID[result.data[i].type] ].values.push({
+                date: result.data[i].date,
+                value: result.data[i].value * 1
+            });
+        }
+
+        this.setState({stats: newStats, strokes: newStrokes, period: realPeriod});
+    }
+
+    getShowedArray() {
+        let showed = [false, false, false, false];
+
+        for (let i = 0; i < showed.length; i++) {
+            showed[this.state.showed[i]] = true;
+        }
+
+        return showed;
+    }
+}
+
+export default Stats;

client/src/app/admin/panel/dashboard/admin-panel-stats.js

@@ -1,238 +1,20 @@
 import React from 'react';
-import _ from 'lodash';
 
 import i18n from 'lib-app/i18n';
-import API from 'lib-app/api-call';
+import Stats from 'app-components/stats';
-
 import Header from 'core-components/header';
-import DropDown from 'core-components/drop-down';
-import ToggleList from 'core-components/toggle-list';
-
-import StatsChart from 'app/admin/panel/dashboard/admin-panel-stats-chart';
 
 class AdminPanelStats extends React.Component {
 
-    state = {
-        stats: {
-            'CREATE_TICKET': 0,
-            'CLOSE': 0,
-            'SIGNUP': 0,
-            'COMMENT': 0
-        },
-        strokes: [
-            {
-                name: 'CREATE_TICKET',
-                values: []
-            },
-            {
-                name: 'CLOSE',
-                values: []
-            },
-            {
-                name: 'SIGNUP',
-                values: []
-            },
-            {
-                name: 'COMMENT',
-                values: []
-            }
-        ],
-        showed: [0],
-        period: 0
-    };
-
-    componentDidMount() {
-        this.retrieve(7);
-    }
-
     render() {
         return (
             <div class="admin-panel-stats">
                 <Header title={i18n('TICKET_ACTIVITY')}/>
-                <DropDown {...this.getDropDownProps()}/>
+                <Stats type="general"/>
-                <ToggleList {...this.getToggleListProps()} />
-                <StatsChart {...this.getStatsChartProps()} />
             </div>
         );
     }
-
+    
-    getToggleListProps() {
-        return {
-            values: this.state.showed,
-            className: 'admin-panel-stats__toggle-list',
-            onChange: this.onToggleListChange.bind(this),
-            items: ['CREATE_TICKET', 'CLOSE', 'SIGNUP', 'COMMENT'].map((name) => {
-                return {
-                    content:
-                        <div className={'admin-panel-stats__toggle-list-item'}>
-                            <div className={'admin-panel-stats__toggle-list-item-value'}>{this.state.stats[name]}</div>
-                            <div className={'admin-panel-stats__toggle-list-item-name'}>{i18n('CHART_' + name)}</div>
-                        </div>
-                }
-            })
-            /*sitems: [
-                {
-                    content:
-                        <div>
-                            {this.state.stats['CREATE_TICKET']}
-                            <div>{i18n('CHART_CREATE_TICKET')}</div>
-                        </div>
-                },
-                {
-                    content:
-                        <div>
-                            {this.state.stats['CLOSE']}
-                            <div>{i18n('CHART_CLOSE')}</div>
-                        </div>
-                },
-                {
-                    content:
-                        <div>
-                            {this.state.stats['SIGNUP']}
-                            <div>{i18n('CHART_SIGNUP')}</div>
-                        </div>
-                },
-                {
-                    content:
-                        <div>
-                            {this.state.stats['COMMENT']}
-                            <div>{i18n('CHART_COMMENT')}</div>
-                        </div>
-                }
-            ]*/
-        };
-    }
-
-    onToggleListChange(event) {
-        this.setState({
-            showed: event.target.value
-        });
-    }
-
-    getDropDownProps() {
-        return {
-            items: [
-                {
-                    content: 'Last 7 days',
-                    icon: ''
-                },
-                {
-                    content: 'Last 30 days',
-                    icon: ''
-                },
-                {
-                    content: 'Last 90 days',
-                    icon: ''
-                },
-                {
-                    content: 'Last 365 days',
-                    icon: ''
-                }
-            ],
-            onChange: this.onDropDownChange.bind(this),
-            className: 'admin-panel-stats__dropdown'
-        }
-    }
-
-    onDropDownChange(event) {
-        let val = [7, 30, 90, 365];
-
-        this.retrieve(val[event.index]);
-    }
-
-    getStatsChartProps() {
-        let showed = this.getShowedArray();
-
-        return {
-            period: this.state.period,
-            strokes: _.filter(this.state.strokes, (s, i) => showed[i])
-            //strokes: this.state.strokes,
-            //showed:  this.getShowedArray()
-        };
-    }
-
-    retrieve(period) {
-        let periodName;
-        switch (period) {
-            case 30:
-                periodName = 'MONTH';
-                break;
-            case 90:
-                periodName = 'QUARTER';
-                break;
-            case 365:
-                periodName = 'YEAR';
-                break;
-            default:
-                periodName = 'WEEK';
-        }
-
-        API.call({
-            path: '/system/get-stats',
-            data: {
-                period: periodName
-            }
-        }).then(this.onRetrieveSuccess.bind(this, period));
-    }
-
-    onRetrieveSuccess(period, result) {
-
-        let newState = {
-            'CREATE_TICKET': 0,
-            'CLOSE': 0,
-            'SIGNUP': 0,
-            'COMMENT': 0
-        };
-
-        let ID = {
-            'CREATE_TICKET': 0,
-            'CLOSE': 1,
-            'SIGNUP': 2,
-            'COMMENT': 3
-        };
-
-        let newStrokes = [
-            {
-                name: 'CREATE_TICKET',
-                values: []
-            },
-            {
-                name: 'CLOSE',
-                values: []
-            },
-            {
-                name: 'SIGNUP',
-                values: []
-            },
-            {
-                name: 'COMMENT',
-                values: []
-            }
-        ];
-
-        let realPeriod = result.data.length / 4;
-
-        for (let i = 0; i < result.data.length; i++) {
-            newState[result.data[i].type] += result.data[i].value * 1;
-
-            newStrokes[ ID[result.data[i].type] ].values.push({
-                date: result.data[i].date,
-                value: result.data[i].value * 1
-            });
-        }
-
-        this.setState({stats: newState, strokes: newStrokes, period: realPeriod});
-    }
-
-    getShowedArray() {
-        let showed = [false, false, false, false];
-
-        for (let i = 0; i < showed.length; i++) {
-            showed[this.state.showed[i]] = true;
-        }
-
-        return showed;
-    }
 }
 
 export default AdminPanelStats;

client/src/data/fixtures/system-fixtures.js

@@ -182,7 +182,7 @@ module.exports = [
                     date: '201701' + (i + 10) % 100,
                     type: 'SIGNUP',
                     general: 1,
-                    value: (Math.floor(Math.random() * i * i / 365)).toString()
+                    value: (Math.floor(Math.random() * (i - 180) * (i - 185) / (1.027**i) )).toString()
                 });
                 DATA.push({
                     date: '201701' + (i + 10) % 100,
@@ -194,7 +194,7 @@ module.exports = [
                     date: '201701' + (i + 10) % 100,
                     type: 'CREATE_TICKET',
                     general: 1,
-                    value: (Math.floor(Math.random()*Math.random()*Math.random()*Math.random()*Math.random()*1.05**i)).toString()
+                    value: (Math.floor(Math.random()*Math.random()*Math.random()*Math.random()*Math.random()*1.027**i)).toString()
                 });
             }
 
@@ -205,176 +205,6 @@ module.exports = [
             return {
                 status: "success",
                 data: DATA
-                /*data: [
-                    {
-                        "date": "20170112",
-                        "type": "COMMENT",
-                        "general": "1",
-                        "value": "8"
-                    },
-                    {
-                        "date": "20170112",
-                        "type": "SIGNUP",
-                        "general": "1",
-                        "value": "1"
-                    },
-                    {
-                        "date": "20170112",
-                        "type": "CLOSE",
-                        "general": "1",
-                        "value": "5"
-                    },
-                    {
-                        "date": "20170112",
-                        "type": "CREATE_TICKET",
-                        "general": "1",
-                        "value": "2"
-                    },
-                    {
-                        "date": "20170111",
-                        "type": "COMMENT",
-                        "general": "1",
-                        "value": "3"
-                    },
-                    {
-                        "date": "20170111",
-                        "type": "SIGNUP",
-                        "general": "1",
-                        "value": "8"
-                    },
-                    {
-                        "date": "20170111",
-                        "type": "CLOSE",
-                        "general": "1",
-                        "value": "10"
-                    },
-                    {
-                        "date": "20170111",
-                        "type": "CREATE_TICKET",
-                        "general": "1",
-                        "value": "3"
-                    },
-                    {
-                        "date": "20170110",
-                        "type": "COMMENT",
-                        "general": "1",
-                        "value": "3"
-                    },
-                    {
-                        "date": "20170110",
-                        "type": "SIGNUP",
-                        "general": "1",
-                        "value": "6"
-                    },
-                    {
-                        "date": "20170110",
-                        "type": "CLOSE",
-                        "general": "1",
-                        "value": "2"
-                    },
-                    {
-                        "date": "20170110",
-                        "type": "CREATE_TICKET",
-                        "general": "1",
-                        "value": "1"
-                    },
-                    {
-                        "date": "20170109",
-                        "type": "COMMENT",
-                        "general": "1",
-                        "value": "0"
-                    },
-                    {
-                        "date": "20170109",
-                        "type": "SIGNUP",
-                        "general": "1",
-                        "value": "7"
-                    },
-                    {
-                        "date": "20170109",
-                        "type": "CLOSE",
-                        "general": "1",
-                        "value": "4"
-                    },
-                    {
-                        "date": "20170109",
-                        "type": "CREATE_TICKET",
-                        "general": "1",
-                        "value": "9"
-                    },
-                    {
-                        "date": "20170108",
-                        "type": "COMMENT",
-                        "general": "1",
-                        "value": "8"
-                    },
-                    {
-                        "date": "20170108",
-                        "type": "SIGNUP",
-                        "general": "1",
-                        "value": "4"
-                    },
-                    {
-                        "date": "20170108",
-                        "type": "CLOSE",
-                        "general": "1",
-                        "value": "5"
-                    },
-                    {
-                        "date": "20170108",
-                        "type": "CREATE_TICKET",
-                        "general": "1",
-                        "value": "6"
-                    },
-                    {
-                        "date": "20170107",
-                        "type": "COMMENT",
-                        "general": "1",
-                        "value": "4"
-                    },
-                    {
-                        "date": "20170107",
-                        "type": "SIGNUP",
-                        "general": "1",
-                        "value": "1"
-                    },
-                    {
-                        "date": "20170107",
-                        "type": "CLOSE",
-                        "general": "1",
-                        "value": "0"
-                    },
-                    {
-                        "date": "20170107",
-                        "type": "CREATE_TICKET",
-                        "general": "1",
-                        "value": "2"
-                    },
-                    {
-                        "date": "20170106",
-                        "type": "COMMENT",
-                        "general": "1",
-                        "value": "7"
-                    },
-                    {
-                        "date": "20170106",
-                        "type": "SIGNUP",
-                        "general": "1",
-                        "value": "4"
-                    },
-                    {
-                        "date": "20170106",
-                        "type": "CLOSE",
-                        "general": "1",
-                        "value": "5"
-                    },
-                    {
-                        "date": "20170106",
-                        "type": "CREATE_TICKET",
-                        "general": "1",
-                        "value": "5"
-                    }
-                ]*/
             };
         }
     },