nestict/ihrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] DASHBOARD: Fixed main dashboard empty chart responsive chart issue

Browse Source
This commit is contained in:
Horilla
2023-11-06 12:15:41 +05:30
parent c7c84ee71a
commit 34d149967b
8 changed files with 42 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
attendance/static/dashboard/attendanceChart.js
View File

@@ -8,10 +8,6 @@ $(document).ready(function () {
// Code to handle the response
dataSet = response.dataSet;
labels = response.labels;
$("#chart_input").html(
'<canvas id="dailyAnalytic" style = "cursor: pointer;"></canvas>'
);
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(
`<div style="height: 220px; display:flex;align-items: center;justify-content: center;" class="">
<div style="" class="">
<img style="display: block;width: 70px;margin: 20px auto ;" src="/static/images/ui/joiningchart.png" class="" alt=""/>
<h3 style="font-size:16px" class="oh-404__subtitle">${response.message}</h3>
</div>
</div>`
);
} else {
$("#chart_input").html(
'<canvas id="dailyAnalytic" style = "cursor: pointer;"></canvas>'
);
attendanceChart.destroy()
createAttendanceChart(response.dataSet, response.labels);
}
},
error: (error) => {},
});

12
employee/static/dashboard/employeeChart.js
View File

@@ -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),

4
leave/static/dashboard/leaveChart.js
View File

@@ -13,6 +13,10 @@ $(document).ready(function () {
},
],
},
options:{
responsive: true,
maintainAspectRatio:false,
},
plugins: [
{
afterRender: (chart) => emptyChart(chart),

4
onboarding/static/dashboard/onboardChart.js
View File

@@ -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,

6
pms/static/src/dashboard/pmsChart.js
View File

@@ -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;

2
recruitment/static/dashboard/recruitmentChart.js
View File

@@ -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;

19
templates/dashboard.html
View File

@@ -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"
>
<div class="d-flex justify-content-between mb-2">
<span class="oh-card-dashboard__title"
>{% trans "Attendance Analytic" %}</span
>
</div>
<div
class="oh-card-dashboard__body"
id="attandance_canvas_div"
<div class="oh-card-dashboard__title mb-2"
>{% trans "Attendance Analytic" %}</div
>
<div class="d-flex justify-content-between mb-2">
<select id="type" class="oh-select" name="type" onchange="changeView(this)" style="width: 150px;padding: 3px;color:#5e5c5c;
; ">
<option value="day">Day</option>
@@ -258,12 +253,14 @@
style="width: 100px;color:#5e5c5c;"
/>
</span>
<span id="chart_input">
</div>
<div
class="oh-card-dashboard__body"
>
<canvas
id="dailyAnalytic"
style="cursor: pointer"
></canvas>
</span>
</div>
</div>
</div>

5
templates/sidebar.html
View File

@@ -770,6 +770,11 @@ function emptyChart(chart,args,options) {
if (!flag){
const {ctx, canvas} = chart;
chart.clear();
const parent = canvas.parentElement;
// Set canvas width/height to match
canvas.width = parent.clientWidth;
canvas.height = parent.clientHeight;
// Calculate center position
const x = canvas.width / 2;
const y = (canvas.height - 70) / 2;