Max Red - Added all functionality to the component [skip ci]

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

@@ -8,19 +8,19 @@ class StatsChart extends React.Component {
     static propTypes = {
         strokes: React.PropTypes.arrayOf(React.PropTypes.shape({
             name: React.PropTypes.string,
-            show: React.PropTypes.bool,
             values: React.PropTypes.arrayOf(React.PropTypes.shape({
                 date: React.PropTypes.string,
                 value: React.PropTypes.number
             }))
         })),
+        //showed: React.PropTypes.arrayOf(React.PropTypes.bool),
         period: React.PropTypes.number
     };
 
     render() {
         return (
             <div>
-                <Line data={this.getChartData()} options={this.getChartOptions()} width={800} height={400} />
+                <Line data={this.getChartData()} options={this.getChartOptions()} width={800} height={400} redraw/>
             </div>
         );
     }
@@ -48,10 +48,10 @@ class StatsChart extends React.Component {
                 borderColor: color[stroke.name],
                 pointBorderColor: color[stroke.name],
                 pointRadius: 0,
+                pointHoverRadius: 3,
                 lineTension: 0.2,
                 pointHoverBackgroundColor: color[stroke.name],
-                hitRadius: this.hitRadius(),
+                hitRadius: this.hitRadius(i)
-                showLine: stroke.show
             };
 
             datasets.push(dataset);
@@ -72,6 +72,10 @@ class StatsChart extends React.Component {
         let labels = [];
 
         for (let i = 0; i < this.props.period; i++) {
+            if (!this.props.strokes.length){
+                labels.push('');
+                continue;
+            }
             let firstList = this.props.strokes[0];
             let idx = firstList.values[i].date.slice(4, 6) - 1;
             labels.push( firstList.values[i].date.slice(6, 8) + ' ' +  months[idx]);
@@ -80,11 +84,12 @@ class StatsChart extends React.Component {
         return labels;
     }
 
-    hitRadius() {
+    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;
-        return 1;
+        return 3;
     }
 
     getChartOptions() {

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

@@ -14,33 +14,30 @@ class AdminPanelStats extends React.Component {
 
     state = {
         stats: {
-            'CLOSE': 0,
             'CREATE_TICKET': 0,
+            'CLOSE': 0,
             'SIGNUP': 0,
             'COMMENT': 0
         },
         strokes: [
             {
-                name: 'CLOSE',
+                name: 'CREATE_TICKET',
-                show: true,
                 values: []
             },
             {
-                name: 'CREATE_TICKET',
+                name: 'CLOSE',
-                show: true,
                 values: []
             },
             {
                 name: 'SIGNUP',
-                show: true,
                 values: []
             },
             {
                 name: 'COMMENT',
-                show: true,
                 values: []
             }
         ],
+        showed: [0],
         period: 0
     };
 
@@ -61,6 +58,7 @@ class AdminPanelStats extends React.Component {
 
     getToggleListProps() {
         return {
+            values: this.state.showed,
             items: [
                 {
                     content:
@@ -95,8 +93,10 @@ class AdminPanelStats extends React.Component {
         };
     }
 
-    onToggleListChange(data) {
+    onToggleListChange(event) {
-
+        this.setState({
+            showed: event.target.value
+        });
     }
 
     getDropDownProps() {
@@ -124,22 +124,23 @@ class AdminPanelStats extends React.Component {
     }
 
     onDropDownChange(event) {
-        console.log('DROP DOWN HAS CHANGED');
         let val = [7, 30, 90, 365];
 
         this.retrieve(val[event.index]);
     }
 
     getStatsChartProps() {
+        let showed = this.getShowedArray();
+
         return {
             period: this.state.period,
-            strokes: this.state.strokes
+            strokes: _.filter(this.state.strokes, (s, i) => showed[i])
-        }
+            //strokes: this.state.strokes,
+            //showed:  this.getShowedArray()
+        };
     }
 
     retrieve(period) {
-        console.log('THIS SHOULD NOT BE DISPLAYED');
-
         let periodName;
         switch (period) {
             case 30:
@@ -155,9 +156,6 @@ class AdminPanelStats extends React.Component {
                 periodName = 'WEEK';
         }
 
-        console.log('--------------------------------------------period: ' + this.state.period);
-        console.log('--------------------------------------------PERIOD NAME: ' + periodName);
-
         API.call({
             path: '/system/get-stats',
             data: {
@@ -168,42 +166,35 @@ class AdminPanelStats extends React.Component {
 
     onRetrieveSuccess(period, result) {
 
-        console.log('This is the shit you SHOULD look at!');
-        console.log(result);
-
         let newState = {
-            'CLOSE': 0,
             'CREATE_TICKET': 0,
+            'CLOSE': 0,
             'SIGNUP': 0,
             'COMMENT': 0
         };
 
         let ID = {
-            'CLOSE': 0,
+            'CREATE_TICKET': 0,
-            'CREATE_TICKET': 1,
+            'CLOSE': 1,
             'SIGNUP': 2,
             'COMMENT': 3
         };
 
         let newStrokes = [
             {
-                name: 'CLOSE',
+                name: 'CREATE_TICKET',
-                show: true,
                 values: []
             },
             {
-                name: 'CREATE_TICKET',
+                name: 'CLOSE',
-                show: true,
                 values: []
             },
             {
                 name: 'SIGNUP',
-                show: true,
                 values: []
             },
             {
                 name: 'COMMENT',
-                show: true,
                 values: []
             }
         ];
@@ -221,6 +212,16 @@ class AdminPanelStats extends React.Component {
 
         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/core-components/toggle-list.js

@@ -35,16 +35,16 @@ class ToggleList extends React.Component {
         let classes = {
             'toggle-list__item': true,
             'toggle-list__first-item': (index === 0),
-            'toggle-list__selected': _.includes(this.state.selected, index)
+            'toggle-list__selected': _.includes(this.getSelectedList(), index)
         };
 
         return classNames(classes);
     }
 
     selectItem(index) {
-        let newSelected = _.clone(this.state.selected);
+        let newSelected = _.clone(this.getSelectedList());
 
-        _.includes(this.state.selected, index) ? _.remove(newSelected, _index => _index == index) : newSelected.push(index);
+        _.includes(this.getSelectedList(), index) ? _.remove(newSelected, _index => _index == index) : newSelected.push(index);
 
         this.setState({
             selected: newSelected
@@ -58,6 +58,10 @@ class ToggleList extends React.Component {
             });
         }
     }
+
+    getSelectedList() {
+        return (this.props.values === undefined) ? this.state.selected : this.props.values;
+    }
 }
 
 export default ToggleList;

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

@@ -182,13 +182,13 @@ module.exports = [
                     date: '201701' + (i + 10) % 100,
                     type: 'SIGNUP',
                     general: 1,
-                    value: (9 + i + Math.floor(Math.random() * (i / 15))).toString()
+                    value: (9 + i + Math.floor(Math.random() * (i * 15))).toString()
                 });
                 DATA.push({
                     date: '201701' + (i + 10) % 100,
                     type: 'CLOSE',
                     general: 1,
-                    value: (8 + i + Math.floor(Math.random() * i)).toString()
+                    value: (8 + i + Math.floor(Math.random() * i * i * i * i)).toString()
                 });
                 DATA.push({
                     date: '201701' + (i + 10) % 100,