зеркало из https://github.com/Azure/reddog-code.git
update to add charts
This commit is contained in:
Joey Schluchter
Родитель
194dfa87e7
Коммит
570e30f99b
|
|
@ -47,9 +47,9 @@ article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
|
|||
}
|
||||
body{
|
||||
margin: 0; // 1
|
||||
font-family: "Quicksand", sans-serif;
|
||||
font-family: "Exo", sans-serif;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-base;
|
||||
font-weight: 300;
|
||||
line-height: $line-height-base;
|
||||
color: #DAE2DF;
|
||||
text-align: left;
|
||||
|
|
@ -61,7 +61,7 @@ body.branch {
|
|||
|
||||
//corp look and feel
|
||||
body.corp {
|
||||
background-color: #25292c;
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||
|
|
|
|||
|
|
@ -235,9 +235,20 @@
|
|||
border-radius: 8px;
|
||||
background: #101b34;
|
||||
}
|
||||
.card-trans-branch > .card-header-title {
|
||||
color:#648fbd;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-trans-corp {
|
||||
border-radius: 8px;
|
||||
background: #222222;
|
||||
background: #0C0C0C;
|
||||
}
|
||||
.card-trans-corp > .card-header-title {
|
||||
color:#656565;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.card-big-category {
|
||||
|
|
@ -326,17 +337,24 @@
|
|||
margin-top: 12px;
|
||||
padding-left: 10px;
|
||||
padding-top: 4px;
|
||||
color: #4a5c8c; //GRULIO
|
||||
font-size: clamp(16px, 20px, 28px);
|
||||
color: #4a5c8c;
|
||||
font-size: clamp(12px, 18px, 24px);
|
||||
margin-bottom: 4px;
|
||||
font-weight: 300;
|
||||
font-family: good-times, sans-serif;
|
||||
font-family: "Exo", sans-serif;
|
||||
}
|
||||
.card-header-title i{
|
||||
font-size: clamp(10px, 16px, 20px);
|
||||
padding-bottom: 6px;
|
||||
padding-right: 6px !important;
|
||||
}
|
||||
.card-header-title > small{
|
||||
padding-left: 3px;
|
||||
font-size: clamp(10px, 12px, 14px);
|
||||
color: #989898;
|
||||
font-family: "Exo", sans-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
.card-header-subtitle{
|
||||
font-size: 11px;
|
||||
padding-left: 8px !important;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
position: relative;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
// color:rgb(27, 51, 82);
|
||||
background: url("/img/hex-back-pat.png");
|
||||
|
|
@ -38,11 +38,23 @@
|
|||
|
||||
.logo-simple-text{
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
font-size: 18px;
|
||||
font-family: good-times, sans-serif;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
.logo-simple-text > small{
|
||||
font-size:10px;
|
||||
color:#00ab91;
|
||||
letter-spacing: 1px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.logo-simple-text > small.branch{
|
||||
font-size:10px;
|
||||
color:#ce65c6;
|
||||
letter-spacing: 1px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.logo-content {
|
||||
width: 400px;
|
||||
|
|
@ -427,7 +439,7 @@
|
|||
}
|
||||
|
||||
&[data="corp"] {
|
||||
background: #222222;
|
||||
background: #0B0B0B;
|
||||
}
|
||||
|
||||
.user{
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
</div>
|
||||
<div class="logo-content">
|
||||
<div class="left-logo"><img src="img/contoso-pharmacy-tl-logo.png" width="184px"/></div>
|
||||
<div class="right-logo logo-simple-text" v-if="isCorp === true || isCorp === 'true'">CORP</div>
|
||||
<div class="right-logo logo-simple-text" v-else>{{ storeId }}</div>
|
||||
<div class="right-logo logo-simple-text" v-if="isCorp === true || isCorp === 'true'">CORP<small>headquarters</small></div>
|
||||
<div class="right-logo logo-simple-text" v-else>{{ storeId }}<small class="branch">branch</small></div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="col-lg-12" v-if="isCorp === true || isCorp === 'true'">
|
||||
<div class="card" :class="[cardClass]">
|
||||
<div class="card-header-title">
|
||||
ORDERS / ITEMS OVER TIME
|
||||
ORDERS / ITEMS OVER TIME <small>ALL LOCATIONS</small>
|
||||
</div>
|
||||
<div class="card-body chart-body">
|
||||
<StreamChart v-if="corpLoaded" :chartData="corpChartData" :options="corpChartOptions"/>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<div class="col-lg-12" v-else>
|
||||
<div class="card" :class="[cardClass]">
|
||||
<div class="card-header-title">
|
||||
ORDERS OVER TIME
|
||||
ORDERS OVER TIME <small>VERSUS 10 MINUTES AGO</small>
|
||||
</div>
|
||||
<div class="card-body chart-body">
|
||||
<StreamChart v-if="loaded" :chartData="chartData" :options="chartOptions"/>
|
||||
|
|
@ -31,8 +31,11 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card" :class="[cardClass]">
|
||||
<div class="card-header-title">
|
||||
SALES AND PROFIT
|
||||
<div class="card-header-title" v-if="isCorp === true || isCorp === 'true'">
|
||||
SALES AND PROFIT <small>ALL LOCATIONS</small>
|
||||
</div>
|
||||
<div class="card-header-title" v-else>
|
||||
SALES AND PROFIT <small>FOR {{storeId.toUpperCase()}} LOCATION</small>
|
||||
</div>
|
||||
<div class="card-body chart-body">
|
||||
<StreamChart v-if="salesChartLoaded" :chartData="salesChartData" :options="salesChartOptions"/>
|
||||
|
|
@ -48,7 +51,7 @@
|
|||
<div class="col-lg-12" v-if="isCorp === true || isCorp === 'true'">
|
||||
<div class="card" :class="[cardClass]">
|
||||
<div class="card-header-title">
|
||||
TOP STORE SALES
|
||||
TOP STORE SALES <small>OVER TIME</small>
|
||||
</div>
|
||||
<div class="card-body chart-body">
|
||||
<StreamChart v-if="topStoreSalesLoaded" :chartData="topSalesChartData" :options="topSalesChartOptions"/>
|
||||
|
|
@ -58,7 +61,7 @@
|
|||
<div class="col-lg-12" v-else>
|
||||
<div class="card" :class="[cardClass]">
|
||||
<div class="card-header-title">
|
||||
ORDER QUEUE
|
||||
ORDER QUEUE <small>BEING PREPARED</small>
|
||||
</div>
|
||||
<div class="card-table-par">
|
||||
<div class="table-responsive">
|
||||
|
|
@ -95,7 +98,7 @@
|
|||
<div class="col-lg-12">
|
||||
<div class="card" :class="[cardClass]">
|
||||
<div class="card-header-title">
|
||||
PROFIT PER ORDER
|
||||
PROFIT / ORDER <small>LAST HOUR</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-big-detail text-center">{{ profitPerOrderFormatted }}</div>
|
||||
|
|
@ -109,7 +112,7 @@
|
|||
<div class="col-lg-12">
|
||||
<div class="card" :class="[cardClass]">
|
||||
<div class="card-header-title">
|
||||
AVG FULFILLMENT
|
||||
FULFILLMENT <small>AVG TIME</small>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-big-detail text-center">{{ avgFulfillmentSec }}{{ fulfillmentTimeDesc }}</div>
|
||||
|
|
@ -126,9 +129,9 @@ import moment from 'moment'
|
|||
import currency from 'currency.js'
|
||||
import Chart from 'chart.js'
|
||||
|
||||
Chart.defaults.global.defaultFontColor = '#e6fff9';
|
||||
Chart.defaults.global.defaultFontColor = '#c0c0c0';
|
||||
Chart.defaults.global.defaultFontFamily = "'Exo', sans-serif";
|
||||
Chart.defaults.global.defaultFontSize = 14;
|
||||
Chart.defaults.global.defaultFontSize = 11;
|
||||
Chart.defaults.global.defaultFontStyle = 500;
|
||||
// Chart.defaults.global.gridLines.display = false;
|
||||
// Chart.defaults.plugins.legend.display = false;
|
||||
|
|
@ -196,7 +199,7 @@ export default {
|
|||
|
||||
previousArr = data.values.slice(data.values.length-20, data.values.length-10)
|
||||
lastArr = data.values.slice(data.values.length-10, data.values.length)
|
||||
|
||||
|
||||
lastArr.forEach((lt,li) => {
|
||||
minuteLabels.push(moment(lt.pointInTime).add(-4, 'hours').format("h:mmA"))
|
||||
dataValues.push(lt.value)
|
||||
|
|
@ -248,7 +251,7 @@ export default {
|
|||
|
||||
// FOR DEMO ONLY
|
||||
// console.log(`Fulfillment Time: ${this.totalFulfillmentTime}`)
|
||||
// TODO: Fix to handle less than 1 minute completion time
|
||||
// TODO: LYNN ORRELL DEMO
|
||||
this.avgFulfillmentSec = moment.duration((this.totalFulfillmentTime / this.fulfilledOrders).toFixed(0), "seconds").seconds();
|
||||
if(this.avgFulfillmentSec > 60){
|
||||
this.fulfillmentTimeDesc = ' min'
|
||||
|
|
@ -427,9 +430,34 @@ export default {
|
|||
}, 10000)
|
||||
},
|
||||
getPerStoreMetrics(stores){
|
||||
console.log(stores)
|
||||
let arrDatasets = [], arrLabels = [], payloadData = []
|
||||
fetch("/corp/salesprofitbranch")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
|
||||
if(data.e === 0){
|
||||
payloadData = data.payload
|
||||
stores.forEach((storeId, index) => {
|
||||
var filterDs = payloadData.filter(e=>e.storeId === storeId);
|
||||
var lastTen
|
||||
if(filterDs.length >= 10){
|
||||
lastTen = filterDs.slice(filterDs.length -10, filterDs.length)
|
||||
arrLabels = filterDs.slice(filterDs.length -10, filterDs.length)
|
||||
}
|
||||
else{
|
||||
lastTen = filterDs
|
||||
}
|
||||
arrDatasets.push(lastTen)
|
||||
|
||||
if(index === stores.length-1){
|
||||
this.createCorpTopSalesChart(arrLabels, arrDatasets)
|
||||
}
|
||||
})
|
||||
}
|
||||
else{
|
||||
console.log('some kind of connection issue - you might want to get that looked at')
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
createOrderLineChart(labels, totals, prevTotals){
|
||||
|
|
@ -458,7 +486,7 @@ export default {
|
|||
position: 'bottom'
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
yAxes: {
|
||||
ticks: {
|
||||
// stepSize: 2,
|
||||
// min:0,
|
||||
|
|
@ -471,8 +499,8 @@ export default {
|
|||
display: true,
|
||||
color: "rgba(150,150,150, .05)"
|
||||
},
|
||||
}],
|
||||
xAxes: [{
|
||||
},
|
||||
xAxes: {
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
maxRotation: 90,
|
||||
|
|
@ -483,7 +511,7 @@ export default {
|
|||
display: true ,
|
||||
color: "rgba(150,150,150, .05)"
|
||||
},
|
||||
}]
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
// maintainAspectRatio: false
|
||||
|
|
@ -516,7 +544,7 @@ export default {
|
|||
position: 'bottom'
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
yAxes: {
|
||||
ticks: {
|
||||
// stepSize: 2,
|
||||
// min:0,
|
||||
|
|
@ -529,8 +557,8 @@ export default {
|
|||
display: true,
|
||||
color: "rgba(150,150,150, .05)"
|
||||
},
|
||||
}],
|
||||
xAxes: [{
|
||||
},
|
||||
xAxes: {
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
maxRotation: 90,
|
||||
|
|
@ -541,7 +569,7 @@ export default {
|
|||
display: true ,
|
||||
color: "rgba(150,150,150, .05)"
|
||||
},
|
||||
}]
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
// maintainAspectRatio: false
|
||||
|
|
@ -574,7 +602,7 @@ export default {
|
|||
position: 'bottom'
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
yAxes: {
|
||||
ticks: {
|
||||
// stepSize: 2,
|
||||
// min:0,
|
||||
|
|
@ -587,8 +615,8 @@ export default {
|
|||
display: true,
|
||||
color: "rgba(150,150,150, .05)"
|
||||
},
|
||||
}],
|
||||
xAxes: [{
|
||||
},
|
||||
xAxes: {
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
maxRotation: 90,
|
||||
|
|
@ -599,7 +627,7 @@ export default {
|
|||
display: true ,
|
||||
color: "rgba(150,150,150, .05)"
|
||||
},
|
||||
}]
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
// maintainAspectRatio: false
|
||||
|
|
@ -609,8 +637,82 @@ export default {
|
|||
},
|
||||
createCorpTopSalesChart(labels, valuesArr){
|
||||
|
||||
}
|
||||
var tmpSalesOptions = {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
fontColor: 'rgb(220, 220, 220)'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: {
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
beginAtZero: false,
|
||||
},
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
},
|
||||
xAxes: {
|
||||
ticks: {
|
||||
autoSkip: false,
|
||||
maxRotation: 90,
|
||||
minRotation: 90,
|
||||
|
||||
},
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
// maintainAspectRatio: false
|
||||
}
|
||||
|
||||
var tmpSalesChartData = {
|
||||
labels:null,
|
||||
datasets: []
|
||||
}
|
||||
|
||||
let labelStrings = []
|
||||
labels.forEach((lb, ind) =>{
|
||||
var dtString = moment(`${lb.orderMonth}-${lb.orderDay}-${lb.orderYear}`, "MM-DD-YYYY").add(lb.orderHour, 'hours').add(-4, 'hours').format('M/D hA')
|
||||
labelStrings.push(dtString)
|
||||
if(ind === labels.length -1){
|
||||
tmpSalesChartData.labels = labelStrings.slice(labelStrings.length-10, labelStrings.length)
|
||||
}
|
||||
})
|
||||
|
||||
valuesArr.forEach((val, valInd)=>{
|
||||
var chartColor = this.getRGBColorForChart(valInd)
|
||||
var chartDs = {label: val[0].storeId, borderColor: chartColor.borderColor, backgroundColor: chartColor.backgroundColor, data: val.map(v=>v.totalSales) }
|
||||
tmpSalesChartData.datasets.push(chartDs)
|
||||
if(valInd === valuesArr.length -1){
|
||||
this.topSalesChartData = tmpSalesChartData;
|
||||
this.topSalesChartOptions = tmpSalesOptions;
|
||||
this.topStoreSalesLoaded = true;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
getRGBColorForChart(index){
|
||||
let colors = [
|
||||
{borderColor:'rgb(43, 255, 227)', backgroundColor:'transparent'},
|
||||
{borderColor:'rgb(176, 33, 121)', backgroundColor:'transparent'},
|
||||
{borderColor:'rgb(0, 150, 48)', backgroundColor:'transparent'},
|
||||
{borderColor:'rgb(135, 102, 36)', backgroundColor:'transparent'},
|
||||
{borderColor:'rgb(143, 0, 191)', backgroundColor:'transparent'},
|
||||
{borderColor:'rgb(217, 215, 115)', backgroundColor:'transparent'},
|
||||
{borderColor:'rgb(77, 28, 255)', backgroundColor:'transparent'},
|
||||
{borderColor:'rgb(252, 182, 129)', backgroundColor:'transparent'},
|
||||
{borderColor:'rgb(62, 133, 163)', backgroundColor:'transparent'},
|
||||
{borderColor:'rgb(109, 33, 176)', backgroundColor:'transparent'}
|
||||
];
|
||||
return colors[index]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.i18n = this.$i18n;
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче