From 34d149967b4c6fb81fb9430510aaf4eb2b1e702a Mon Sep 17 00:00:00 2001 From: Horilla Date: Mon, 6 Nov 2023 12:15:41 +0530 Subject: [PATCH] [FIX] DASHBOARD: Fixed main dashboard empty chart responsive chart issue --- .../static/dashboard/attendanceChart.js | 37 ++----------------- employee/static/dashboard/employeeChart.js | 12 ++++-- leave/static/dashboard/leaveChart.js | 4 ++ onboarding/static/dashboard/onboardChart.js | 4 ++ pms/static/src/dashboard/pmsChart.js | 6 +++ .../static/dashboard/recruitmentChart.js | 2 + templates/dashboard.html | 19 ++++------ templates/sidebar.html | 5 +++ 8 files changed, 42 insertions(+), 47 deletions(-) diff --git a/attendance/static/dashboard/attendanceChart.js b/attendance/static/dashboard/attendanceChart.js index fd6cb1e84..63db1f550 100644 --- a/attendance/static/dashboard/attendanceChart.js +++ b/attendance/static/dashboard/attendanceChart.js @@ -8,10 +8,6 @@ $(document).ready(function () { // Code to handle the response dataSet = response.dataSet; labels = response.labels; - - $("#chart_input").html( - '' - ); createAttendanceChart(response.dataSet, response.labels); }, }); @@ -44,19 +40,6 @@ var day = ("0" + today.getDate()).slice(-2); var formattedDate = year + "-" + month + "-" + day; var currentWeek = getWeekNumber(today); -function isChartEmpty(chartData) { - if (!chartData) { - return true; - } - for (let i = 0; i < chartData.length; i++) { - const hasNonZeroValues = chartData[i].data.some((value) => value !== 0); - if (hasNonZeroValues) { - return false; // Return false if any non-zero value is found - } - } - return true; // Return true if all values are zero -} - function createAttendanceChart(dataSet, labels) { data = { labels: labels, @@ -69,6 +52,7 @@ function createAttendanceChart(dataSet, labels) { type: "bar", data: data, options: { + responsive: true, onClick: (e, activeEls) => { let datasetIndex = activeEls[0].datasetIndex; let dataIndex = activeEls[0].index; @@ -144,23 +128,10 @@ function changeMonth() { end_date: end_date, }, success: function (response) { - if (isChartEmpty(response.dataSet)) { - $("#dailyAnalytic") - .parent() - .html( - `
-
- -

${response.message}

-
-
` - ); - } else { - $("#chart_input").html( - '' - ); + + attendanceChart.destroy() createAttendanceChart(response.dataSet, response.labels); - } + }, error: (error) => {}, }); diff --git a/employee/static/dashboard/employeeChart.js b/employee/static/dashboard/employeeChart.js index 2256152fe..814a74bbe 100644 --- a/employee/static/dashboard/employeeChart.js +++ b/employee/static/dashboard/employeeChart.js @@ -10,7 +10,9 @@ $(document).ready(function () { employeeChart = new Chart(ctx, { type: "doughnut", data: data, - options: {}, + options: { + responsive: true, + maintainAspectRatio:false,}, plugins: [ { afterRender: (chart) => emptyChart(chart), @@ -45,7 +47,9 @@ $(document).ready(function () { genderChart = new Chart(ctx, { type: "doughnut", data: data, - options: {}, + options: { + responsive: true, + maintainAspectRatio:false,}, plugins: [ { afterRender: (chart) => emptyChart(chart), @@ -81,7 +85,9 @@ $(document).ready(function () { departmentChart = new Chart(ctx, { type: "doughnut", data: data, - options: {}, + options: { + responsive: true, + maintainAspectRatio:false,}, plugins: [ { afterRender: (chart) => emptyChart(chart), diff --git a/leave/static/dashboard/leaveChart.js b/leave/static/dashboard/leaveChart.js index 87c308ed5..009e6096e 100644 --- a/leave/static/dashboard/leaveChart.js +++ b/leave/static/dashboard/leaveChart.js @@ -13,6 +13,10 @@ $(document).ready(function () { }, ], }, + options:{ + responsive: true, + maintainAspectRatio:false, + }, plugins: [ { afterRender: (chart) => emptyChart(chart), diff --git a/onboarding/static/dashboard/onboardChart.js b/onboarding/static/dashboard/onboardChart.js index 16d07d82a..666eb3e0c 100644 --- a/onboarding/static/dashboard/onboardChart.js +++ b/onboarding/static/dashboard/onboardChart.js @@ -21,6 +21,8 @@ $(document).ready(function () { ], }, options: { + responsive: true, + scales: { y: { beginAtZero: true, @@ -72,6 +74,8 @@ $(document).ready(function () { // emptyImageSrc:'/static/images/ui/sunbed.png' }, options: { + responsive: true, + scales: { y: { beginAtZero: true, diff --git a/pms/static/src/dashboard/pmsChart.js b/pms/static/src/dashboard/pmsChart.js index 6c3e5325e..cbac71966 100644 --- a/pms/static/src/dashboard/pmsChart.js +++ b/pms/static/src/dashboard/pmsChart.js @@ -20,6 +20,8 @@ if (objectiveChart != null) { type: "doughnut", data: objectiveStatusData, options: { + responsive: true, + maintainAspectRatio:false, onClick: (e, activeEls) => { let datasetIndex = activeEls[0].datasetIndex; let dataIndex = activeEls[0].index; @@ -112,6 +114,8 @@ if (keyResultStatusChartCtx != null) { type: "pie", data: keyResultStatusData, options: { + responsive: true, + maintainAspectRatio:false, onClick: (e, activeEls) => { let datasetIndex = activeEls[0].datasetIndex; let dataIndex = activeEls[0].index; @@ -204,6 +208,8 @@ if (feedbackStatusChartCtx != null) { type: "pie", data: feedbackStatusData, options: { + responsive: true, + maintainAspectRatio:false, onClick: (e, activeEls) => { let datasetIndex = activeEls[0].datasetIndex; let dataIndex = activeEls[0].index; diff --git a/recruitment/static/dashboard/recruitmentChart.js b/recruitment/static/dashboard/recruitmentChart.js index ef4aabdef..655eb7f47 100644 --- a/recruitment/static/dashboard/recruitmentChart.js +++ b/recruitment/static/dashboard/recruitmentChart.js @@ -11,6 +11,8 @@ $(document).ready(function () { type: "bar", data: data, options: { + responsive: true, + onClick: (e, activeEls) => { let datasetIndex = activeEls[0].datasetIndex; let dataIndex = activeEls[0].index; diff --git a/templates/dashboard.html b/templates/dashboard.html index 0742d57e4..026bcaa31 100755 --- a/templates/dashboard.html +++ b/templates/dashboard.html @@ -8,7 +8,7 @@ } .oh-card-dashboard:not(.tile) { cursor: default; - min-height: 363px; + min-height: 425px; }.oh-dashboard__movable-cards{ padding-right: 0; }.oh-card-dashboard--moveable{ @@ -233,15 +233,10 @@ class="oh-card-dashboard__header oh-card-dashboard__header--divider" id="attendance_header" > -
- {% trans "Attendance Analytic" %} -
-
{% trans "Attendance Analytic" %}
+