Max Red - WIP second layout [skip ci]
This commit is contained in:
parent
1944f7109d
commit
8221a06048
|
@ -1,18 +1,80 @@
|
|||
import React from 'react';
|
||||
import {Line} from 'react-chartjs';
|
||||
|
||||
class StatsChart extends React.Component {
|
||||
|
||||
static propTypes = {
|
||||
strokes: React.PropTypes.arrayOf(React.PropTypes.shape({
|
||||
|
||||
}))
|
||||
name: React.PropTypes.string,
|
||||
values: React.PropTypes.arrayOf(React.PropTypes.shape({
|
||||
date: React.PropTypes.number,
|
||||
value: React.PropTypes.number
|
||||
}))
|
||||
})),
|
||||
display: React.PropTypes.number
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>Shit go home!</div>
|
||||
<div>
|
||||
<Line data={this.getChartData()} options={this.getChartOptions()} width="800" height="400" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
shouldBeDeleted(min, max, num) {
|
||||
var rtn = [];
|
||||
while (rtn.length < num) {
|
||||
rtn.push((Math.random() * (max - min)) + min + ((Math.random() > 0.95) ? 1 : 0));
|
||||
}
|
||||
return rtn;
|
||||
}
|
||||
|
||||
getChartData() {
|
||||
let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
|
||||
let labels = [], i;
|
||||
for (i = 0; i < this.props.display; i++) {
|
||||
console.log(this.props.strokes[0].values[i].date);
|
||||
let idx = this.props.strokes[0].values[i].date.slice(4, 6) - 1;
|
||||
labels.push( this.props.strokes[0].values[i].date.slice(6, 8) + ' ' + months[idx]);
|
||||
}
|
||||
console.log(labels);
|
||||
|
||||
return {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
fillColor: "rgba(0,0,0,0)",
|
||||
strokeColor: "rgba(1,2,3,1)",
|
||||
pointColor: "rgba(3,2,1,1)",
|
||||
pointStrokeColor: "#333",
|
||||
pointHighlightFill: "#999",
|
||||
pointHighlightStroke: "rgba(220,220,220,1)",
|
||||
data: this.shouldBeDeleted(32, 36, 365)
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
fillColor: "rgba(0,0,0,0)",
|
||||
strokeColor: "rgba(151,187,205,1)",
|
||||
pointColor: "rgba(151,187,205,1)",
|
||||
pointStrokeColor: "#fff",
|
||||
pointHighlightFill: "#fff",
|
||||
pointHighlightStroke: "rgba(151,187,205,1)",
|
||||
data: this.shouldBeDeleted(32, 36, 365)
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
getChartOptions() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default StatsChart;
|
|
@ -13,7 +13,7 @@ class AdminPanelStats extends React.Component {
|
|||
<div>
|
||||
<Header title={i18n('TICKET_ACTIVITY')}/>
|
||||
<DropDown {...this.getDropDownProps()}/>
|
||||
<StatsChart />
|
||||
<StatsChart {...this.getStatsChartProps()} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -40,6 +40,80 @@ class AdminPanelStats extends React.Component {
|
|||
]
|
||||
}
|
||||
}
|
||||
|
||||
getStatsChartProps() {
|
||||
return {
|
||||
display: 7,
|
||||
strokes: [
|
||||
{
|
||||
name: 'new-tickets',
|
||||
values: [
|
||||
{
|
||||
date: "20160420",
|
||||
value: 17
|
||||
},
|
||||
{
|
||||
date: "20160421",
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
date: "20160422",
|
||||
value: 12
|
||||
},
|
||||
{
|
||||
date: "20160423",
|
||||
value: 19
|
||||
},
|
||||
{
|
||||
date: "20160424",
|
||||
value: 14
|
||||
},
|
||||
{
|
||||
date: "20160425",
|
||||
value: 13
|
||||
},
|
||||
{
|
||||
date: "20160426",
|
||||
value: 19
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'closed-tickets',
|
||||
values: [
|
||||
{
|
||||
date: "20160420",
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
date: "20160421",
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
date: "20160422",
|
||||
value: 13
|
||||
},
|
||||
{
|
||||
date: "20160423",
|
||||
value: 15
|
||||
},
|
||||
{
|
||||
date: "20160424",
|
||||
value: 12
|
||||
},
|
||||
{
|
||||
date: "20160425",
|
||||
value: 19
|
||||
},
|
||||
{
|
||||
date: "20160426",
|
||||
value: 23
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default AdminPanelStats;
|
|
@ -162,7 +162,177 @@ module.exports = [
|
|||
time: 200,
|
||||
response: function() {
|
||||
return {
|
||||
|
||||
status: "success",
|
||||
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": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170109",
|
||||
"type": "CLOSE",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170109",
|
||||
"type": "CREATE_TICKET",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170108",
|
||||
"type": "COMMENT",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170108",
|
||||
"type": "SIGNUP",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170108",
|
||||
"type": "CLOSE",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170108",
|
||||
"type": "CREATE_TICKET",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170107",
|
||||
"type": "COMMENT",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170107",
|
||||
"type": "SIGNUP",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170107",
|
||||
"type": "CLOSE",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170107",
|
||||
"type": "CREATE_TICKET",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170106",
|
||||
"type": "COMMENT",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170106",
|
||||
"type": "SIGNUP",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170106",
|
||||
"type": "CLOSE",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
},
|
||||
{
|
||||
"date": "20170106",
|
||||
"type": "CREATE_TICKET",
|
||||
"general": "1",
|
||||
"value": "0"
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue