Max Red - WIP second layout [skip ci]

This commit is contained in:
ivan 2017-01-13 17:06:52 -03:00
parent 1944f7109d
commit 8221a06048
3 changed files with 311 additions and 5 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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"
}
]
};
}
},