├── 01_Visitor_Dashboard ├── css │ └── style.css ├── index.html ├── js │ ├── d3.js │ ├── react-bootstrap.js │ ├── react-dom-0.14.7.js │ └── react-with-addons-0.14.7.js └── lib │ ├── app.jsx │ └── charts │ ├── BarChart.jsx │ ├── DonutChart.jsx │ ├── LineChart.jsx │ ├── ProgressChart.jsx │ └── utils │ ├── ReactMixins.js │ └── SVGDefs.jsx ├── 02_Admin_Dashboard ├── part1 │ ├── css │ │ ├── bootstrap.css │ │ └── style.css │ ├── img │ │ └── logo.png │ ├── index.html │ ├── js │ │ ├── d3.js │ │ ├── react-bootstrap.js │ │ ├── react-dom-0.14.7.js │ │ └── react-with-addons-0.14.7.js │ └── lib │ │ ├── app.jsx │ │ └── charts │ │ └── utils │ │ ├── ReactMixins.js │ │ └── SVGDefs.jsx ├── part2 │ ├── css │ │ ├── bootstrap.css │ │ └── style.css │ ├── img │ │ └── logo.png │ ├── index.html │ ├── js │ │ ├── d3.js │ │ ├── react-bootstrap.js │ │ ├── react-dom-0.14.7.js │ │ └── react-with-addons-0.14.7.js │ └── lib │ │ ├── app.jsx │ │ └── charts │ │ ├── BarChart.jsx │ │ ├── DonutChart.jsx │ │ ├── LineChart.jsx │ │ ├── ProgressChart.jsx │ │ ├── StackChart.jsx │ │ └── utils │ │ ├── ReactMixins.js │ │ └── SVGDefs.jsx ├── part3 │ ├── css │ │ ├── bootstrap.css │ │ └── style.css │ ├── img │ │ └── logo.png │ ├── index.html │ ├── js │ │ ├── d3.js │ │ ├── react-bootstrap.js │ │ ├── react-dom-0.14.7.js │ │ └── react-with-addons-0.14.7.js │ └── lib │ │ ├── app.jsx │ │ └── charts │ │ ├── AreaChart.jsx │ │ ├── BarChart.jsx │ │ ├── DonutChart.jsx │ │ ├── LineChart.jsx │ │ ├── ProgressChart.jsx │ │ ├── StackChart.jsx │ │ └── utils │ │ ├── D3Utils.jsx │ │ ├── ReactMixins.js │ │ └── SVGDefs.jsx └── part4 │ ├── css │ ├── bootstrap.css │ └── style.css │ ├── img │ └── logo.png │ ├── index.html │ ├── js │ ├── EventEmitter.js │ ├── d3.js │ ├── react-bootstrap.js │ ├── react-dom-0.14.7.js │ └── react-with-addons-0.14.7.js │ └── lib │ ├── app.jsx │ └── charts │ ├── AreaChart.jsx │ ├── BarChart.jsx │ ├── DonutChart.jsx │ ├── LineChart.jsx │ ├── ProgressChart.jsx │ ├── StackChart.jsx │ └── utils │ ├── D3Utils.jsx │ ├── ReactMixins.js │ └── SVGDefs.jsx └── README.md /01_Visitor_Dashboard/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #2c313b; 3 | 4 | font-family: 'Roboto', sans-serif !important; 5 | } 6 | 7 | h3{ 8 | color: #f8fdff; 9 | padding-left: 20px; 10 | padding-top: 20px; 11 | opacity: .8; 12 | font-weight: 400; 13 | font-size: 20px; 14 | } 15 | 16 | .top{ 17 | margin-bottom: 10px; 18 | background-color: #3f5175; 19 | border-radius:4px; 20 | height: 400px; 21 | box-shadow: 1px 1px 1px 0px rgba(37,41,51,1); 22 | } 23 | 24 | .bottom-left{ 25 | background-color: #3f5175; 26 | border-radius: 4px; 27 | height: 400px; 28 | box-shadow: 1px 1px 1px 0px rgba(37,41,51,1); 29 | } 30 | 31 | .bottom-right{ 32 | background-color: #3f5175; 33 | border-radius: 4px; 34 | height: 400px; 35 | 36 | box-shadow: 1px 1px 1px 0px rgba(37,41,51,1); 37 | } 38 | 39 | .shadow { 40 | -webkit-filter: drop-shadow( 0px 2px 2px rgba(0,0,0,.3) ); 41 | filter: drop-shadow( 0px 2px 2px rgba(0,0,0,.3) ); 42 | } 43 | 44 | .pad{ 45 | padding:20px; 46 | } 47 | 48 | .browser-legend{ 49 | font-size:14px; 50 | opacity:.8; 51 | } 52 | 53 | .bottom-left-svg{ 54 | padding-top:40px; 55 | text-align: center; 56 | } 57 | 58 | 59 | .bottom-right-svg{ 60 | text-align: center; 61 | } 62 | 63 | .line { 64 | fill: none; 65 | stroke: #7dc7f4; 66 | stroke-width: 5px; 67 | 68 | } 69 | 70 | .axis{ 71 | fill:#bbc7d9; 72 | opacity: 1; 73 | } 74 | 75 | .axis path, 76 | .axis line { 77 | fill: none; 78 | stroke: none; 79 | shape-rendering: crispEdges; 80 | 81 | } 82 | 83 | .axis text { 84 | font-size: 14px; 85 | } 86 | 87 | .y-grid .tick{ 88 | stroke: #4b5f87; 89 | opacity: 1; 90 | } 91 | 92 | .default-svg{ 93 | 94 | } 95 | 96 | 97 | .svg-container{ 98 | display: inline-block; 99 | position: relative; 100 | width: 100%; 101 | padding-bottom: 100%; 102 | vertical-align: middle; 103 | overflow: hidden; 104 | } 105 | 106 | .svg-content { 107 | display: inline-block; 108 | position: absolute; 109 | top: 0; 110 | left: 0; 111 | } 112 | 113 | .fontSize { 114 | font-size:.8em; 115 | height: auto; 116 | text-align: center; 117 | } 118 | 119 | .page-header{ 120 | height:35px; 121 | textAlign:center; 122 | } 123 | 124 | .page-h4{ 125 | line-height:35px; 126 | color:rgb(125, 199, 244); 127 | 128 | } -------------------------------------------------------------------------------- /01_Visitor_Dashboard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |