git_admin/sx-fc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard chart data

Browse Source
This commit is contained in:
yamin
2017-09-22 10:34:14 +06:30
parent e3a76f7095
commit a53a5a39b1
6 changed files with 14346 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
app/views/home/dashboard.html.erb
View File

@@ -1,10 +1,10 @@
<div class="row">
<div class="col-md-9 col-lg-9">
<h4><strong>Role Features</strong></h4>
<!-- <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> -->
<div class="panel-group" id="accordion">
<% if current_user.role == 'administrator' %>
<div class="panel panel-default">
<!-- <h4><strong>Role Features</strong></h4> -->
<!-- <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> -->
<div class="panel-group" id="accordion">
<% if current_user.role == 'administrator' || current_user.role == 'manager' %>
<!-- <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Administrator
@@ -50,9 +50,46 @@
</ul>
</div>
</div>
</div> -->
<div class="row">
<div class="col-md-6">
<div class="panel">
<div class="panel-heading"><h4>Top Products</h4></div>
<div class="panel-body">
<canvas id="top_products" width="400" height="200"></canvas>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel">
<div class="panel-heading"><h4>Inventory</h4></div>
<div class="panel-body">
<canvas id="inventory" width="400" height="200"></canvas>
</div>
</div>
</div>
</div>
<% elsif current_user.role == 'manager' %>
<div class="panel panel-default">
<br><br>
<div class="row">
<div class="col-md-6">
<div class="panel">
<div class="panel-heading"><h4>Hourly Sales</h4></div>
<div class="panel-body">
<canvas id="hourly_sales" width="400" height="200"></canvas>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel">
<div class="panel-heading"><h4>Employee Sales</h4></div>
<div class="panel-body">
<canvas id="employee_sales" width="400" height="200"></canvas>
</div>
</div>
</div>
</div>
<% elsif current_user.role == 'manager' %>
<!-- <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Manager
@@ -96,8 +133,8 @@
</ul>
</div>
</div>
</div>
<% elsif current_user.role == 'supervisour' %>
</div> -->
<% elsif current_user.role == 'supervisour' %>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
@@ -119,7 +156,7 @@
</div>
</div>
</div>
<% elsif current_user.role == 'cashier' %>
<% elsif current_user.role == 'cashier' %>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
@@ -136,7 +173,7 @@
</div>
</div>
</div>
<% elsif current_user.role == 'account' %>
<% elsif current_user.role == 'account' %>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
@@ -154,23 +191,23 @@
</div>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
<div class="col-md-3">
<div class="card" id="oqs" onclick="location.href='<%= oqs_root_path %>'">
<div class="card-content dashboard-nav">OQS</div>
</div>
<div class="card" id="origami" onclick="location.href='<%= origami_root_path %>'">
<div class="card-content dashboard-nav">Cashier</div>
</div>
<div class="card" id="crm" onclick="location.href='<%= crm_root_path %>'">
<div class="card-content dashboard-nav">CRM</div>
</div>
<div class="col-md-3">
<div class="card" id="oqs" onclick="location.href='<%= oqs_root_path %>'">
<div class="card-content dashboard-nav">OQS</div>
</div>
<div class="card" id="origami" onclick="location.href='<%= origami_root_path %>'">
<div class="card-content dashboard-nav">Cashier</div>
</div>
<div class="card" id="crm" onclick="location.href='<%= crm_root_path %>'">
<div class="card-content dashboard-nav">CRM</div>
</div>
<!-- No Needs
<div class="card" id="backend" onclick="location.href='<%= dashboard_path %>'">
<div class="card-content">
@@ -184,18 +221,209 @@
</div>
</div>
<div class="footer" style="background-color: inherit">
<!-- <div class="footer" style="background-color: inherit">
<div class="card">
<div class="page-header center-text">
<h4 class="footer-header">
<%= @shop.name %>
</h4>
</div>
<div class="center-text">
<%= @shop.address %>
</div>
<div class="center-text">
<%= @shop.phone_no %>
</div>
</h4>
</div>
<div class="center-text">
<%= @shop.address %>
</div>
<div class="center-text">
<%= @shop.phone_no %>
</div>
</div>
</div> -->
<script src="js/Chart.js"></script>
<script>
$(document).ready(function(){
var top_products = JSON.parse('<%= @top_products.to_json.html_safe %>');
var hourly_sales = JSON.parse('<%= @hourly_sales.to_json.html_safe %>');
var employee_sales = JSON.parse('<%= @employee_sales.to_json.html_safe %>');
var inventories = JSON.parse('<%= @inventories.to_json.html_safe %>');
showTopProductsChartData(top_products);
showHourlySalesChartData(hourly_sales);
showEmployeeSalesChartData(employee_sales);
showInventoryChartData(inventories);
});
function randomColorGenerator () {
return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
};
function showTopProductsChartData(top_products) {
var labels = [];
var datasets = [];
var backgroundColor = [];
if(top_products!=undefined && top_products!=''){
if(top_products.length>0){
$.each(top_products,function(k,val){
labels.push(val.product_name);
datasets.push(val.total_item);
backgroundColor.push(randomColorGenerator());
});
var chart = new Chart("top_products", {
type: 'pie',
data: {
labels: labels,
datasets: [{
data: datasets,
backgroundColor: backgroundColor
}]
},
options: {
legend: {
labels: {
fontColor: 'black'
}
}
}
});
}
}
}
function showHourlySalesChartData(hourly_sales) {
var labels = [];
var datasets = [];
var backgroundColor = [];
if(hourly_sales!=undefined && hourly_sales!=''){
if(Object.keys(hourly_sales).length > 0){
$.each(hourly_sales,function(k,val){
labels.push(k.toString());
datasets.push(val);
backgroundColor.push(randomColorGenerator());
});
var myChart = new Chart("hourly_sales", {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: '',
data: datasets,
backgroundColor: backgroundColor,
borderWidth: 1
}]
},
options: {
legend: {
display:false
},
scales: {
xAxes: [{
stacked: true,
categorySpacing: 0,
barPercentage: 0.5
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero:true
}
}]
}
}
});
}
}
}
function showEmployeeSalesChartData(employee_sales) {
var labels = [];
var datasets = [];
var backgroundColor = [];
if(employee_sales!=undefined && employee_sales!=''){
if(Object.keys(employee_sales).length > 0){
$.each(employee_sales,function(k,val){
labels.push(k.toString());
datasets.push(val);
backgroundColor.push(randomColorGenerator());
});
var myChart = new Chart("employee_sales", {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: '',
data: datasets,
backgroundColor: backgroundColor,
borderWidth: 1
}]
},
options: {
legend: {
display:false
},
scales: {
xAxes: [{
stacked: true,
categorySpacing: 0,
barPercentage: 0.5
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero:true
}
}]
}
}
});
}
}
}
function showInventoryChartData(inventories) {
var labels = [];
var datasets = [];
var borderColor = [];
if(inventories!=undefined && inventories!=''){
if(Object.keys(inventories).length > 0){
$.each(inventories,function(k,val){
labels.push(k.toString());
datasets.push(val);
borderColor.push(randomColorGenerator());
});
var myChart = new Chart("inventory", {
type: 'line',
data: {
labels: labels,
datasets: [{
fill: false,
data: datasets,
borderColor: borderColor
}]
},
options: {
legend: {
display:false
},
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: false,
ticks: {
beginAtZero:true
}
}]
}
}
});
}
}
}
</script>