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

dashboard chart UI

Browse Source
This commit is contained in:
phyusin
2017-11-15 13:27:42 +06:30
parent 69fb7fa551
commit 9647a28f91
6 changed files with 114 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Gemfile
View File

@@ -121,3 +121,4 @@ gem 'momentjs-rails' # for date-range selector
# gem 'bootstrap-datepicker-rails' # date picker
# gem 'jquery-datetimepicker-rails'
# gem 'select2-rails' # for multi-select and auto-complete select box
gem "chartkick" #chart lib

4
Gemfile.lock
View File

@@ -49,6 +49,7 @@ GEM
activemodel (>= 4.0.0)
activesupport (>= 4.0.0)
mime-types (>= 1.16)
chartkick (2.2.5)
chronic (0.10.2)
coffee-rails (4.2.2)
coffee-script (>= 2.2.0)
@@ -261,6 +262,7 @@ DEPENDENCIES
byebug
cancancan (~> 1.10)
carrierwave (~> 1.0)
chartkick
coffee-rails (~> 4.2)
cups (~> 0.0.7)
database_cleaner
@@ -303,4 +305,4 @@ DEPENDENCIES
whenever
BUNDLED WITH
1.15.3
1.16.0

3
app/assets/javascripts/application.js
View File

@@ -27,7 +27,8 @@
//= require autosize/autosize.js
//= require jquery-countto/jquery.countTo.js
//= require raphael/raphael.min
//= require chartjs/Chart.bundle.js
//= require Chart.bundle
//= require chartkick
//= require fileinput.min
//= require settings/processing_items
//= require BSBMaterial/admin.js

10
app/controllers/home_controller.rb
View File

@@ -67,13 +67,21 @@ class HomeController < ApplicationController
@orders = Sale::where("payment_status='new' and sale_status='bill' and DATE_FORMAT(receipt_date,'%Y-%m-%d') = '#{today}'").count()
@sales = Sale::where("payment_status='paid' and sale_status='completed' and DATE_FORMAT(receipt_date,'%Y-%m-%d') = '#{today}'").count()
@top_products = Sale.top_products(today)
@top_products = Sale.top_products(today).sum('i.qty')
@hourly_sales = Sale.hourly_sales(today).sum(:grand_total)
# .group_by_hour(:created_at, :time_zone => 'Asia/Rangoon',format: '%I:%p')
# .sum(:grand_total)
@employee_sales = Sale.employee_sales(today).sum(:grand_total)
@inventories = StockJournal.inventory_balances(today).sum(:balance)
#@employee_sales = Hash.new
#employee_sales.each do |key, value|
# if(@employee_sales.has_key? key[1])
# @employee_sales[key[1]].push({key[0] => value})
# else
# @employee_sales[key[1]] = [key[0] => value]
# end
#end
@total_sale = Sale.total_sale(today)
@total_count = Sale.total_count(today)
@total_card = Sale.total_card_sale(today)

9
app/models/sale.rb
View File

@@ -904,7 +904,7 @@ end
query = Sale.select("(SUM(i.qty) * i.price) as grand_total,SUM(i.qty) as total_item," +
" i.price as unit_price,mi.name as product_name")
.joins("JOIN sale_items i ON i.sale_id = sales.sale_id JOIN menu_items mi ON i.product_code = mi.item_code")
.where("(i.qty > 0 ) and DATE_FORMAT(receipt_date,'%Y-%m-%d') = '#{today}'"+
.where("(i.qty > 0 and i.price > 0) and DATE_FORMAT(receipt_date,'%Y-%m-%d') = '#{today}'"+
"and payment_status='paid' and sale_status= 'completed'")
.group('mi.name')
.order("SUM(i.qty) DESC").limit(5)
@@ -918,10 +918,11 @@ end
def self.employee_sales(today)
query = Sale.select("e.name as employee_name,grand_total")
.where('payment_status="paid" and sale_status = "completed" and DATE_FORMAT(receipt_date,"%Y-%m-%d") = ?',today)
.where('sales.payment_status="paid" and sales.sale_status = "completed" and DATE_FORMAT(sales.receipt_date,"%Y-%m-%d") = ?',today)
.joins("join employees e on e.id=sales.cashier_id")
.group('e.name')
.order('e.name ASC')
.joins("join sale_payments sp on sp.sale_id=sales.sale_id")
.group("sp.payment_method","e.name")
.order('e.name')
end
def self.total_sale(today)

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

@@ -1,70 +1,75 @@
<div class="container-fluid">
<div class="block-header">
<h2><%= t :dashboard %></h2>
<div class="block-header">
<h2><%= t :dashboard %></h2>
</div>
<!-- Widgets -->
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box bg-cyan hover-expand-effect">
<div class="icon">
<i class="material-icons">help</i>
</div>
<div class="content">
<div class="text"><%= t :sale_count %></div>
<div class="number count-to" data-from="0" data-to="<%= @total_count%>" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box bg-pink hover-expand-effect">
<div class="icon">
<i class="material-icons">attach_money</i>
</div>
<div class="content">
<div class="text"><%= t :total_sale %></div>
<div class="number count-to" data-from="0" data-to="<%= @total_sale%>" data-speed="15" data-fresh-interval="20"></div>
</div>
</div>
</div>
<!-- Widgets -->
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box bg-cyan hover-expand-effect">
<div class="icon">
<i class="material-icons">help</i>
</div>
<div class="content">
<div class="text"><%= t :sale_count %></div>
<div class="number count-to" data-from="0" data-to="<%= @total_count%>" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box bg-light-green hover-expand-effect">
<div class="icon">
<i class="material-icons">person_add</i>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box bg-pink hover-expand-effect">
<div class="icon">
<i class="material-icons">attach_money</i>
</div>
<div class="content">
<div class="text"><%= t :total_sale %></div>
<div class="number count-to" data-from="0" data-to="<%= @total_sale%>" data-speed="15" data-fresh-interval="20"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box bg-light-green hover-expand-effect">
<div class="icon">
<i class="material-icons">person_add</i>
</div>
<div class="content">
<div class="text"><%= t :total_credit %></div>
<div class="number count-to" data-from="0" data-to="<%= @total_credit%>" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box bg-orange hover-expand-effect">
<div class="icon">
<i class="material-icons">credit_card</i>
</div>
<div class="content">
<div class="text"><%= t :total_card %></div>
<div class="number count-to" data-from="0" data-to="<%= @total_card%>" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
<div class="content">
<div class="text"><%= t :total_credit %></div>
<div class="number count-to" data-from="0" data-to="<%= @total_credit%>" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
<!-- #END# Widgets -->
<!-- CPU Usage -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="info-box bg-orange hover-expand-effect">
<div class="icon">
<i class="material-icons">credit_card</i>
</div>
<div class="content">
<div class="text"><%= t :total_card %></div>
<div class="number count-to" data-from="0" data-to="<%= @total_card%>" data-speed="1000" data-fresh-interval="20"></div>
</div>
</div>
</div>
</div>
<!-- #END# Widgets -->
<!-- CPU Usage -->
<% if current_user.role == 'administrator' || current_user.role == 'manager' %>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="card">
<div class="body">
<h4><i class="material-icons md-24">dashboard</i><%= (t :top) + " " + (t :products) %></h4>
<canvas id="top_products" class="col-md-12"></canvas>
</div>
<% if current_user.role == 'administrator' || current_user.role == 'manager' %>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="body">
<h4><i class="material-icons md-24">dashboard</i><%= (t :top) + " " + (t :products) %></h4>
<!-- <canvas id="top_products" class="col-md-12"></canvas> -->
<%= pie_chart @top_products %>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
</div>
</div>
<!-- <div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="body">
<h4><i class="material-icons md-24">store</i><%= t :inventory %></h4>
@@ -72,221 +77,38 @@
</div>
</div>
</div>
</div>
</div> -->
<br />
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="card">
<div class="body">
<h4><i class="material-icons md-24">av_timer</i><%= (t :hourly) + " " + (t :sale) %></h4>
<canvas id="hourly_sales" class="col-md-12"></canvas>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="card">
<div class="body">
<h4><i class="material-icons md-24">assignment_ind</i><%= (t :staff) + " " + (t :sale) %></h4>
<canvas id="employee_sales" class="col-md-12"></canvas>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="body">
<h4><i class="material-icons md-24">av_timer</i><%= (t :hourly) + " " + (t :sale) %></h4>
<!-- <canvas id="hourly_sales" class="col-md-12"></canvas> -->
<%= column_chart @hourly_sales %>
</div>
</div>
</div>
<% end %>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="card">
<div class="body">
<h4><i class="material-icons md-24">assignment_ind</i><%= (t :staff) + " " + (t :sale) %></h4>
<!-- <canvas id="employee_sales" class="col-md-12"></canvas> -->
<%= column_chart @employee_sales %>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<div class="card">
<div class="body">
<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 ctx = $("#top_products").get(0).getContext("2d");
var chart = new Chart(ctx, {
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 ctx = $("#hourly_sales").get(0).getContext("2d");
var myChart = new Chart(ctx, {
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 ctx = $("#employee_sales").get(0).getContext("2d");
var myChart = new Chart(ctx, {
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 ctx = $("#inventory").get(0).getContext("2d");
var myChart = new Chart(ctx, {
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>
</div>
</div>
</div> -->
</div>
<% end %>
</div>