diff --git a/src/main/java/com/utopiaindustries/service/DashboardService.java b/src/main/java/com/utopiaindustries/service/DashboardService.java
index 700dbfc..eb81856 100644
--- a/src/main/java/com/utopiaindustries/service/DashboardService.java
+++ b/src/main/java/com/utopiaindustries/service/DashboardService.java
@@ -72,12 +72,14 @@ public class DashboardService {
//set stitching related details
Long approvedStitchingOfflineItems = 0L;
+ Long remaininfQcAlterPieces = 0L;
Long approvedStitchingOfflineItemsThenReject = 0L;
long qcReject = 0L;
if (stitchingItemIds != null && !stitchingItemIds.isEmpty()) {
approvedStitchingOfflineItems = stitchingOfflineItemDAO.findByQCOperationDateAndApproved(startDate1, endDate1, "APPROVED");
qcReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT", stitchingItemIds);
- approvedStitchingOfflineItemsThenReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT",stitchingOutIds);
+ remaininfQcAlterPieces = stitchingOfflineItemDAO.findByQCOperationDateAndIds(null, endDate1, "REJECT", stitchingItemIds);
+ approvedStitchingOfflineItemsThenReject = stitchingOfflineItemDAO.findByQCOperationDateAndIds(startDate1, endDate1, "REJECT", stitchingOutIds);
}
@@ -87,12 +89,14 @@ public class DashboardService {
Long washFinishedItem = 0L;
Long approved = 0L;
Long operationNotPerformed = 0L;
+ Long remainingAlterationPieceFinish = 0L;
if (finishing != null && !finishing.isEmpty()) {
approved = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "APPROVED", finishing);
operationNotPerformed = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "-", finishing);
rejectFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "REJECT", finishing);
washFinishedItem = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "WASHED", finishing);
alterationPieceFinish = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(startDate1, endDate1, "ALTER", finishing);
+ remainingAlterationPieceFinish = finishedItemDAO.findByOperationDateAndIdsAndQaStatus(null, endDate1, "ALTER", finishing);
}
//set packaging details
@@ -128,8 +132,11 @@ public class DashboardService {
progress.put("wash", (float) washFinishedItem);
progress.put("packaging", (float) packagingItems);
+ progress.put("totalPackaging", (float) packagingItemIDs.size());
+ progress.put("remainingFinishAlter", (float) remainingAlterationPieceFinish);
+ progress.put("remainingQCAlter", (float) remaininfQcAlterPieces);
- progress.put("Efficiency",efficiency);
+ progress.put("Efficiency", efficiency);
return progress;
}
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index cda9bce..5a89eda 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function () {
return;
}
- function createGaugeChart(progress, color, divId, title, height, width , fontSize, fontYAxis, fontXAxis, fontColor, total, actual, aGrade, bGrade, cGrade) {
+ function createGaugeChart(progress, color, divId, title, height, width, fontSize, fontYAxis, fontXAxis, fontColor, total, actual, aGrade, bGrade, cGrade) {
Highcharts.chart(divId, {
chart: {
type: 'solidgauge',
@@ -46,7 +46,7 @@ document.addEventListener("DOMContentLoaded", function () {
name: 'Percentage',
data: [progress],
dataLabels: {
- format: '{y}% ',
+ format: '{y}% ',
y: fontYAxis,
x: fontXAxis,
borderWidth: 0,
@@ -54,12 +54,12 @@ document.addEventListener("DOMContentLoaded", function () {
style: {
fontSize: fontSize + 'px',
fontWeight: 'bold',
- color:fontColor
+ color: fontColor
},
- zIndex: 10
+ zIndex: 10
},
tooltip: {
- pointFormat: title == 'Finishing Progress' ? 'Percentage: ' + progress + '%
Total: ' + total + '
Completed: ' + actual + '
A Grade: ' + aGrade + '
B Grade: ' + bGrade + '
C Grade: ' + cGrade : 'Percentage: ' + progress + '%
Total: ' + total + '
Completed:'+actual
+ pointFormat: title == 'Finishing Progress' ? 'Percentage: ' + progress + '%
Total: ' + total + '
Completed: ' + actual + '
A Grade: ' + aGrade + '
B Grade: ' + bGrade + '
C Grade: ' + cGrade : 'Percentage: ' + progress + '%
Total: ' + total + '
Completed:' + actual
},
color: color,
showInLegend: false
@@ -69,6 +69,7 @@ document.addEventListener("DOMContentLoaded", function () {
}
});
}
+
function createBarChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, dates, fontSize, maxValue) {
if (!document.getElementById(divId)) {
return;
@@ -94,7 +95,7 @@ document.addEventListener("DOMContentLoaded", function () {
labels: {
rotation: -45,
style: {
- fontSize: 10-fontSize,
+ fontSize: 10 - fontSize,
fontWeight: 'bold'
}
}
@@ -136,177 +137,214 @@ document.addEventListener("DOMContentLoaded", function () {
}]
});
}
- function dashboardChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData,dates, fontSize, maxValue) {
+
+ function dashboardChart(
+ divId, height, width, title,
+ aHeading, aData, bHeading, bData, cHeading, cData,
+ dates, fontSize, fontSizeText, maxValue
+ ) {
+ if (!document.getElementById(divId)) return;
+
+ Highcharts.chart(divId, {
+ chart: {
+ type: 'bar',
+ height: height,
+ width: width
+ },
+ title: {
+ text: title,
+ style: {
+ fontSize: fontSize
+ }
+ },
+ xAxis: {
+ categories: dates,
+ labels: {
+ enabled: false
+ },
+ title: {
+ text: null
+ },
+ lineWidth: 2
+ },
+ yAxis: {
+ max: maxValue,
+ min: 0,
+ title: {
+ text: null,
+ align: 'high',
+ style: {
+ fontSize: fontSizeText
+ }
+ },
+ labels: {
+ style: {
+ fontSize: fontSizeText
+ }
+ },
+ gridLineWidth: 0
+ },
+ legend: {
+ itemStyle: {
+ fontSize: fontSizeText
+ }
+ },
+ plotOptions: {
+ bar: {
+ borderRadius: '50%',
+ dataLabels: {
+ enabled: true,
+ style: {
+ fontSize: fontSizeText
+ }
+ },
+ groupPadding: 0.1
+ }
+ },
+ credits: {
+ enabled: false
+ },
+ series: [
+ {
+ name: aHeading,
+ data: aData
+ },
+ {
+ name: bHeading,
+ data: bData
+ },
+ {
+ name: cHeading,
+ data: cData
+ }
+ ]
+ });
+ }
+
+
+ function createSingleBarChart(divId, height, width, title, Heading, Data, dates, fontSize, maxValue) {
if (!document.getElementById(divId)) {
return;
}
Highcharts.chart(divId, {
chart: {
- type: 'bar',
+ type: 'column',
+ height: height,
+ width: width,
},
- title: {
- text: title
- },
- xAxis: {
- },
- yAxis: {
- max: maxValue,
- min: 0,
- title: {
- align: 'high'
- },
- labels: {
- overflow: 'justify'
- },
- gridLineWidth: 0
- },
- plotOptions: {
- bar: {
- borderRadius: '50%',
- dataLabels: {
- enabled: true
- },
- groupPadding: 0.1
+ title: {
+ text: title,
+ align: 'center',
+ verticalAlign: 'top',
+ y: 30,
+ style: {
+ fontSize: fontSize,
+ fontWeight: 'bold',
+ }
+ },
+ xAxis: {
+ categories: dates,
+ labels: {
+ rotation: -45,
+ style: {
+ fontSize: 10 - fontSize,
+ fontWeight: 'bold'
+ }
+ }
+ },
+ yAxis: {
+ min: 0,
+ max: maxValue,
+ softMax: maxValue,
+ softMin: 0,
+ startOnTick: true,
+ endOnTick: true,
+ title: {
+ text: 'Total Progress',
+ style: {
+ fontSize: fontSize,
+ fontWeight: 'bold',
}
},
- credits: {
- enabled: false
- },
- series: [{
- name: aHeading,
- data: aData
- }, {
- name: bHeading,
- data: bData
- }, {
- name: cHeading,
- data: cData
- }]
- });
+ labels: {
+ format: '{value}%'
+ }
+ },
+ legend: {
+ itemStyle: {
+ fontSize: 10 - fontSize,
+ fontWeight: 'bold'
+ }
+ },
+ scrollbar: {
+ enabled: true
+ },
+ series: [{
+ name: Heading,
+ data: Data
+ }]
+ });
}
- function createSingleBarChart(divId, height, width, title,Heading, Data, dates, fontSize, maxValue) {
- if (!document.getElementById(divId)) {
- return;
- }
- Highcharts.chart(divId, {
- chart: {
- type: 'column',
- height: height,
- width: width,
- },
- title: {
- text: title,
- align: 'center',
- verticalAlign: 'top',
- y: 30,
- style: {
- fontSize: fontSize,
- fontWeight: 'bold',
- }
- },
- xAxis: {
- categories: dates,
- labels: {
- rotation: -45,
- style: {
- fontSize: 10-fontSize,
- fontWeight: 'bold'
- }
- }
- },
- yAxis: {
- min: 0,
- max: maxValue,
- softMax: maxValue,
- softMin: 0,
- startOnTick: true,
- endOnTick: true,
- title: {
- text: 'Total Progress',
- style: {
- fontSize: fontSize,
- fontWeight: 'bold',
- }
- },
- labels: {
- format: '{value}%'
- }
- },
- legend: {
- itemStyle: {
- fontSize: 10-fontSize,
- fontWeight: 'bold'
- }
- },
- scrollbar: {
- enabled: true
- },
- series: [{
- name: Heading,
- data: Data
- }]
- });
- }
+ initializeGauges();
- initializeGauges();
- function initializeGauges() {
+ function initializeGauges() {
- const gaugeDivs2 = document.querySelectorAll('.gauge-chart2');
- gaugeDivs2.forEach(function (div) {
- const progress = div.getAttribute('data-progress');
- const color = div.getAttribute('data-color');
- const title = div.getAttribute('data-title');
- const height = div.getAttribute('data-height');
- const width = div.getAttribute('data-width');
- const fontSize = div.getAttribute('data-fontSize');
- const fontColor = div.getAttribute('data-fontColor');
- const total = div.getAttribute('data-totalProduction');
- const actual = div.getAttribute('data-actualProduction');
- const divId = div.id;
- console.log(actual)
- createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -20, 4, fontColor, total, actual);
- });
+ const gaugeDivs2 = document.querySelectorAll('.gauge-chart2');
+ gaugeDivs2.forEach(function (div) {
+ const progress = div.getAttribute('data-progress');
+ const color = div.getAttribute('data-color');
+ const title = div.getAttribute('data-title');
+ const height = div.getAttribute('data-height');
+ const width = div.getAttribute('data-width');
+ const fontSize = div.getAttribute('data-fontSize');
+ const fontColor = div.getAttribute('data-fontColor');
+ const total = div.getAttribute('data-totalProduction');
+ const actual = div.getAttribute('data-actualProduction');
+ const divId = div.id;
+ console.log(actual)
+ createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -20, 4, fontColor, total, actual);
+ });
- const gaugeDivs = document.querySelectorAll('.gauge-chart');
- gaugeDivs.forEach(function (div) {
- const progress = div.getAttribute('data-progress');
- const color = div.getAttribute('data-color');
- const title = div.getAttribute('data-title');
- const height = div.getAttribute('data-height');
- const width = div.getAttribute('data-width');
- const fontSize = div.getAttribute('data-fontSize');
- const fontColor = div.getAttribute('data-fontColor');
- const total = div.getAttribute('data-totalProduction');
- const actual = div.getAttribute('data-actualProduction');
- const aGrade = div.getAttribute('data-aGrade');
- const bGrade = div.getAttribute('data-bGrade');
- const cGrade = div.getAttribute('data-cGrade');
- const divId = div.id;
- createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -15, 2, fontColor, total, actual, aGrade, bGrade, cGrade);
+ const gaugeDivs = document.querySelectorAll('.gauge-chart');
+ gaugeDivs.forEach(function (div) {
+ const progress = div.getAttribute('data-progress');
+ const color = div.getAttribute('data-color');
+ const title = div.getAttribute('data-title');
+ const height = div.getAttribute('data-height');
+ const width = div.getAttribute('data-width');
+ const fontSize = div.getAttribute('data-fontSize');
+ const fontColor = div.getAttribute('data-fontColor');
+ const total = div.getAttribute('data-totalProduction');
+ const actual = div.getAttribute('data-actualProduction');
+ const aGrade = div.getAttribute('data-aGrade');
+ const bGrade = div.getAttribute('data-bGrade');
+ const cGrade = div.getAttribute('data-cGrade');
+ const divId = div.id;
+ createGaugeChart(parseInt(progress), color, divId, title, height, width, fontSize, -15, 2, fontColor, total, actual, aGrade, bGrade, cGrade);
- });
+ });
- const barChart = document.querySelectorAll('.barChart');
- barChart.forEach(function (div) {
- const title = div.getAttribute('data-title');
- const height = div.getAttribute('data-height');
- const width = div.getAttribute('data-width');
- const fontSize = div.getAttribute('data-fontSize');
- const maxValue = Number(div.getAttribute('data-totalProduction'));
- const aHeading = 'Cutting';
- const aData = JSON.parse(div.getAttribute('data-cutting'));
- const bHeading='Stitching';
- const bData =JSON.parse(div.getAttribute('data-stitching'));
- const cHeading='End Line Quality Checking';
- const cData =JSON.parse(div.getAttribute('data-quality'));
- const dHeading="Finish Items";
- const dData =JSON.parse(div.getAttribute('data-finishing'));
- const dates = div.getAttribute('data-dates');
- const datesArray = dates.split(',');
- const divId = div.id;
- createBarChart( divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, datesArray, fontSize, maxValue);
- });
+ const barChart = document.querySelectorAll('.barChart');
+ barChart.forEach(function (div) {
+ const title = div.getAttribute('data-title');
+ const height = div.getAttribute('data-height');
+ const width = div.getAttribute('data-width');
+ const fontSize = div.getAttribute('data-fontSize');
+ const maxValue = Number(div.getAttribute('data-totalProduction'));
+ const aHeading = 'Cutting';
+ const aData = JSON.parse(div.getAttribute('data-cutting'));
+ const bHeading = 'Stitching';
+ const bData = JSON.parse(div.getAttribute('data-stitching'));
+ const cHeading = 'End Line Quality Checking';
+ const cData = JSON.parse(div.getAttribute('data-quality'));
+ const dHeading = "Finish Items";
+ const dData = JSON.parse(div.getAttribute('data-finishing'));
+ const dates = div.getAttribute('data-dates');
+ const datesArray = dates.split(',');
+ const divId = div.id;
+ createBarChart(divId, height, width, title, aHeading, aData, bHeading, bData, cHeading, cData, dHeading, dData, datesArray, fontSize, maxValue);
+ });
const dashboardBarChart = document.querySelectorAll('.dashboardBarChart'); // fixed name
dashboardBarChart.forEach(function (div) {
@@ -314,25 +352,26 @@ document.addEventListener("DOMContentLoaded", function () {
const height = div.getAttribute('data-height');
const width = div.getAttribute('data-width');
const fontSize = div.getAttribute('data-fontSize');
+
const rawValue = div.getAttribute('data-totalProduction') || "0";
const cleanValue = rawValue.replace(/[^0-9.-]+/g, '');
const maxValue = Number(cleanValue);
- const cHeading = 'Achieved';
- const cDataString = div.getAttribute('data-achieved');
- const cleanValueAchieved = cDataString.replace(/[^0-9.-]+/g, '');
- const cData = [Number(cleanValueAchieved)];
-
const aHeading = 'Stitching';
const aDataString = div.getAttribute('data-stitching');
const cleanValueStitch = aDataString.replace(/[^0-9.-]+/g, '');
const aData = [Number(cleanValueStitch)];
- const bHeading = 'Packaging';
- const bDataString =div.getAttribute('data-packaging');
+ const bHeading = 'Finishing';
+ const bDataString = div.getAttribute('data-finishing');
const packaging = bDataString.replace(/[^0-9.-]+/g, '');
const bData = [Number(packaging)];
+ const cHeading = 'Packaging';
+ const cDataString = div.getAttribute('data-packaging');
+ const cleanValueAchieved = cDataString.replace(/[^0-9.-]+/g, '');
+ const cData = [Number(cleanValueAchieved)];
+
const dates = [div.getAttribute('data-dates')];
const divId = div.id;
dashboardChart(
@@ -348,23 +387,24 @@ document.addEventListener("DOMContentLoaded", function () {
cData,
dates,
fontSize,
+ '20',
maxValue
);
});
- const cuttingBarChart = document.querySelectorAll('.singleBarChart');
- cuttingBarChart.forEach(function (div) {
- const title = div.getAttribute('data-title');
- const height = div.getAttribute('data-height');
- const width = div.getAttribute('data-width');
- const fontSize = div.getAttribute('data-fontSize');
- const maxValue = Number(div.getAttribute('data-totalProduction'));
- const Heading = div.getAttribute('data-barHeading');
- const Data = JSON.parse(div.getAttribute('data-barData'));
- const dates = div.getAttribute('data-dates');
- const datesArray = dates.split(',');
- const divId = div.id;
- createSingleBarChart( divId, height, width, title, Heading, Data, datesArray, fontSize, maxValue);
- });
- }
+ const cuttingBarChart = document.querySelectorAll('.singleBarChart');
+ cuttingBarChart.forEach(function (div) {
+ const title = div.getAttribute('data-title');
+ const height = div.getAttribute('data-height');
+ const width = div.getAttribute('data-width');
+ const fontSize = div.getAttribute('data-fontSize');
+ const maxValue = Number(div.getAttribute('data-totalProduction'));
+ const Heading = div.getAttribute('data-barHeading');
+ const Data = JSON.parse(div.getAttribute('data-barData'));
+ const dates = div.getAttribute('data-dates');
+ const datesArray = dates.split(',');
+ const divId = div.id;
+ createSingleBarChart(divId, height, width, title, Heading, Data, datesArray, fontSize, maxValue);
+ });
+ }
});
diff --git a/src/main/resources/templates/_fragments.html b/src/main/resources/templates/_fragments.html
index 3ffc86f..d5edfed 100644
--- a/src/main/resources/templates/_fragments.html
+++ b/src/main/resources/templates/_fragments.html
@@ -1,283 +1,286 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ .blink {
+ animation: blinker 1s linear infinite;
+ }
+
+
+
-