tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Max Red - Abstracting StatsChart, modified demo page [skip ci]

This commit is contained in:
ivan 2017-01-14 01:45:21 -03:00
parent 8221a06048
commit 4f7118c2e5
4 changed files with 120 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/package.json
View File

@ -54,7 +54,7 @@
},
"dependencies": {
"app-module-path": "^1.0.3",
"chart.js": "^1.1.1",
"chart.js": "^2.4.0",
"classnames": "^2.1.3",
"draft-js": "^0.8.1",
"draft-js-export-html": "^0.4.0",
@ -64,7 +64,7 @@
"lodash": "^3.10.0",
"messageformat": "^0.2.2",
"react": "^15.0.1",
"react-chartjs": "^0.8.0",
"react-chartjs-2": "^2.0.0",
"react-document-title": "^1.0.2",
"react-dom": "^15.0.1",
"react-google-recaptcha": "^0.5.2",

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

@ -1,5 +1,5 @@
import React from 'react';
import {Line} from 'react-chartjs';
import {Line} from 'react-chartjs-2';
class StatsChart extends React.Component {
@ -7,7 +7,7 @@ class StatsChart extends React.Component {
strokes: React.PropTypes.arrayOf(React.PropTypes.shape({
name: React.PropTypes.string,
values: React.PropTypes.arrayOf(React.PropTypes.shape({
date: React.PropTypes.number,
date: React.PropTypes.string,
value: React.PropTypes.number
}))
})),
@ -22,10 +22,10 @@ class StatsChart extends React.Component {
);
}
shouldBeDeleted(min, max, num) {
shouldBeDeleted(min, max, num, type) {
var rtn = [];
while (rtn.length < num) {
rtn.push((Math.random() * (max - min)) + min + ((Math.random() > 0.95) ? 1 : 0));
rtn.push(Math.floor((Math.random() * (max - min)) + min + ((Math.random() > 0.1) ? type * 3 : 0)));
}
return rtn;
}
@ -33,44 +33,70 @@ class StatsChart extends React.Component {
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]);
let labels = [];
for (let i = 0; i < this.props.display; i++) {
if(i % 2 == 0 && this.props.display > 20){
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]);
}
let color = {
'CREATE_TICKET': 'rgba(150, 20, 20)',
'CLOSE': 'rgba(20, 150, 20)',
'SIGNUP': 'rgba(20, 20, 150)',
'COMMENT': 'rgba(150, 150, 20)'
};
let datasets = [];
for (let i = 0; i < this.props.strokes.length; i++) {
let stroke = this.props.strokes[i];
let dataset = {};
dataset.label = stroke.name;
dataset.data = [];
dataset.fill = false;
console.log('FUCK THIS PITCH BEF ' + stroke.values.length);
for (let j = 0; j < stroke.values.length; j++) {
console.log('OH YEAH: ' + stroke.values[j].value);
dataset.data.push(stroke.values[j].value);
console.log('OH YEAH x2');
}
console.log('FUCK THIS PITCH AFT');
dataset.borderWidth = 4;
dataset.borderColor = color[stroke.name];
dataset.pointRadius = 0;
dataset.lineTension = 0.2;
dataset.hitRadius = this.hitRadius();
datasets.push(dataset);
}
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)
}
]
datasets: datasets
};
}
hitRadius(name) {
/// SHOULD AJUSTAR THIS VALUES
if (this.props.display === 7) return 20;
if (this.props.display === 30) return 15;
if (this.props.display === 90) return 10;
return 3;
}
getChartOptions() {
return {
legend: {
display: false
}
};
}

51
client/src/app/admin/panel/dashboard/admin-panel-stats.js
View File

@ -46,40 +46,40 @@ class AdminPanelStats extends React.Component {
display: 7,
strokes: [
{
name: 'new-tickets',
name: 'CREATE_TICKET',
values: [
{
date: "20160420",
value: 17
value: 71
},
{
date: "20160421",
value: 15
value: 21
},
{
date: "20160422",
value: 12
value: 4
},
{
date: "20160423",
value: 19
value: 9
},
{
date: "20160424",
value: 14
value: 12
},
{
date: "20160425",
value: 13
value: 14
},
{
date: "20160426",
value: 19
value: 22
}
]
},
{
name: 'closed-tickets',
name: 'CLOSE',
values: [
{
date: "20160420",
@ -110,6 +110,39 @@ class AdminPanelStats extends React.Component {
value: 23
}
]
},
{
name: 'SIGNUP',
values: [
{
date: "20160420",
value: 3
},
{
date: "20160421",
value: 5
},
{
date: "20160422",
value: 3
},
{
date: "20160423",
value: 4
},
{
date: "20160424",
value: 5
},
{
date: "20160425",
value: 5
},
{
date: "20160426",
value: 6
}
]
}
]
}

31
client/src/app/demo/components-demo-page.js
View File

@ -1,7 +1,7 @@
'use strict';
const React = require('react');
const LineChart = require("react-chartjs").Line;
const LineChart = require("react-chartjs-2").Line;
const _ = require('lodash');
const DocumentTitle = require('react-document-title');
@ -27,27 +27,30 @@ function rand(min, max, num) {
}
let chartData = {
labels: ["January", "February", "March", "April", "", "May", "June", "July"],
labels: ["January", "February", "March", "April", "May", "June"],
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: rand(32, 100, 8)
},
{
label: "My Second dataset",
fillColor: "rgba(0,0,0,0)",
fill: false,
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: rand(32, 100, 8)
borderWidth: 3,
data: rand(32, 100, 6),
pointRadius: 0
},
{
label: "My Second dataset",
fill: false,
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
borderWidth: 3,
data: rand(32, 100, 6)
}
]
};