Max Red - WIP first layout [skip ci]

client/package.json

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+class StatsChart extends React.Component {
+
+    static propTypes = {
+        strokes: React.PropTypes.arrayOf(React.PropTypes.shape({
+
+        }))
+    };
+
+    render() {
+        return (
+            <div>Shit go home!</div>
+        );
+    }
+}
+
+export default StatsChart;

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

@@ -1,14 +1,45 @@
 import React from 'react';
 
+import i18n from 'lib-app/i18n';
+
+import Header from 'core-components/header';
+import DropDown from 'core-components/drop-down';
+import StatsChart from 'app/admin/panel/dashboard/admin-panel-stats-chart';
+
 class AdminPanelStats extends React.Component {
 
     render() {
         return (
             <div>
-                /admin/panel/stats
+                <Header title={i18n('TICKET_ACTIVITY')}/>
+                <DropDown {...this.getDropDownProps()}/>
+                <StatsChart />
             </div>
         );
     }
+
+    getDropDownProps() {
+        return {
+            items: [
+                {
+                    content: 'Last 7 days',
+                    icon: ''
+                },
+                {
+                    content: 'Last 30 days',
+                    icon: ''
+                },
+                {
+                    content: 'Last 90 days',
+                    icon: ''
+                },
+                {
+                    content: 'Last 365 days',
+                    icon: ''
+                }
+            ]
+        }
+    }
 }
 
 export default AdminPanelStats;

client/src/app/demo/components-demo-page.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const React = require('react');
+const LineChart = require("react-chartjs").Line;
 const _ = require('lodash');
 const DocumentTitle = require('react-document-title');
 
@@ -16,8 +17,41 @@ const Menu = require('core-components/menu');
 const Tooltip = require('core-components/tooltip');
 const Table = require('core-components/table');
 const InfoTooltip = require('core-components/info-tooltip');
-const ToggleButton = require('app-components/toggle-button');
 
+function rand(min, max, num) {
+    var rtn = [];
+    while (rtn.length < num) {
+        rtn.push((Math.random() * (max - min)) + min);
+    }
+    return rtn;
+}
+
+let chartData = {
+    labels: ["January", "February", "March", "April", "", "May", "June", "July"],
+    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)",
+            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)
+        }
+    ]
+};
+let chartOptions = {};
 let dropDownItems = [{content: 'English'}, {content: 'Spanish'}, {content: 'German'}, {content: 'Portuguese'}, {content: 'Japanese'}];
 let secondaryMenuItems = [
     {content: 'My Tickets', icon: 'file-text'},
@@ -176,6 +210,12 @@ let DemoPage = React.createClass({
             render: (
                 <InfoTooltip type="warning" text="No staff member is assigned to this department." />
             )
+        },
+        {
+            title: 'LineChart',
+            render: (
+                <LineChart data={chartData} options={chartOptions} width="600" height="250" />
+            )
         }
 	],
 

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

@@ -157,6 +157,15 @@ module.exports = [
             };
         }
     },
+    {
+        path: '/system/get-stats',
+        time: 200,
+        response: function() {
+            return {
+                
+            };
+        }
+    },
     {
         path: '/system/get-logs',
         time: 300,

client/src/data/languages/en.js

@@ -150,6 +150,7 @@ export default {
     'LOAD_MORE': 'Load More',
     'MY_NOTIFICATIONS': 'My notifications',
     'ALL_NOTIFICATIONS': 'All notifications',
+    'TICKET_ACTIVITY': 'Ticket Activity',
 
     //ACTIVITIES
     'ACTIVITY_COMMENT': 'commented ticket',