dashboard chart UI
This commit is contained in:
phyusin
@@ -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>
|
||||
Reference in New Issue
Block a user