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

merge with chart

Browse Source
This commit is contained in:
Yan
2017-10-11 17:51:29 +06:30
parent e1204d84d9 ce315d342f
commit 1f6c05b314
6 changed files with 14330 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -52,5 +52,252 @@
</div>
<!-- #END# Widgets -->
<!-- CPU Usage -->
<% if current_user.role == 'administrator' || current_user.role == 'manager' %>
<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" class="col-md-12"></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" class="col-md-12"></canvas>
</div>
</div>
</div>
</div>
<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" class="col-md-12"></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" class="col-md-12"></canvas>
</div>
</div>
</div>
</div>
<% end %>
</div>
<!-- <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>
>>>>>>> chart
</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>