diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js b/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js index 64b0df74..8ff25b1f 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js +++ b/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 (
- +
); } @@ -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(), - showLine: stroke.show + hitRadius: this.hitRadius(i) }; 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() { diff --git a/client/src/app/admin/panel/dashboard/admin-panel-stats.js b/client/src/app/admin/panel/dashboard/admin-panel-stats.js index ab5d1d5f..16a97c5b 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/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', - show: true, + name: 'CREATE_TICKET', values: [] }, { - name: 'CREATE_TICKET', - show: true, + name: 'CLOSE', 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': 1, + 'CREATE_TICKET': 0, + 'CLOSE': 1, 'SIGNUP': 2, 'COMMENT': 3 }; let newStrokes = [ { - name: 'CLOSE', - show: true, + name: 'CREATE_TICKET', values: [] }, { - name: 'CREATE_TICKET', - show: true, + name: 'CLOSE', 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; \ No newline at end of file diff --git a/client/src/core-components/toggle-list.js b/client/src/core-components/toggle-list.js index 8dba39a7..b38defe0 100644 --- a/client/src/core-components/toggle-list.js +++ b/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; diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index 06b087fd..9d329319 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/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,