From 6a22ba711ecc9cbb24dc615231cfd36705a35549 Mon Sep 17 00:00:00 2001 From: ivan Date: Fri, 13 Jan 2017 15:17:43 -0300 Subject: [PATCH] Max Red - WIP first layout [skip ci] --- client/package.json | 2 + .../dashboard/admin-panel-stats-chart.js | 18 ++++++++ .../panel/dashboard/admin-panel-stats.js | 33 ++++++++++++++- client/src/app/demo/components-demo-page.js | 42 ++++++++++++++++++- client/src/data/fixtures/system-fixtures.js | 9 ++++ client/src/data/languages/en.js | 1 + 6 files changed, 103 insertions(+), 2 deletions(-) create mode 100644 client/src/app/admin/panel/dashboard/admin-panel-stats-chart.js diff --git a/client/package.json b/client/package.json index 21e3f053..3caab38d 100644 --- a/client/package.json +++ b/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", 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 new file mode 100644 index 00000000..d4dfabfa --- /dev/null +++ b/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 ( +
Shit go home!
+ ); + } +} + +export default StatsChart; \ No newline at end of file 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 020264e4..76fd68d6 100644 --- a/client/src/app/admin/panel/dashboard/admin-panel-stats.js +++ b/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 (
- /admin/panel/stats +
+ +
); } + + 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; \ No newline at end of file diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js index 5244975c..4a69a807 100644 --- a/client/src/app/demo/components-demo-page.js +++ b/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: ( ) + }, + { + title: 'LineChart', + render: ( + + ) } ], diff --git a/client/src/data/fixtures/system-fixtures.js b/client/src/data/fixtures/system-fixtures.js index b67d450f..8626a24b 100644 --- a/client/src/data/fixtures/system-fixtures.js +++ b/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, diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index 67a36e64..98b136a9 100644 --- a/client/src/data/languages/en.js +++ b/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',