[UPDT] EMPLOYEE: Employee dashboard data set click redirect methods
This commit is contained in:
Horilla
@@ -1,188 +1,173 @@
|
||||
$(document).ready(function () {
|
||||
function employeeChart(dataSet, labels) {
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: dataSet,
|
||||
};
|
||||
// Create chart using the Chart.js library
|
||||
window["myChart"] = {};
|
||||
const ctx = document.getElementById("totalEmployees").getContext("2d");
|
||||
employeeChart = new Chart(ctx, {
|
||||
type: "doughnut",
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio:false,},
|
||||
plugins: [
|
||||
{
|
||||
afterRender: (chart) => emptyChart(chart),
|
||||
},
|
||||
],
|
||||
});
|
||||
$("#totalEmployees").on("click", function (event) {
|
||||
var activeBars = employeeChart.getElementsAtEventForMode(
|
||||
event,
|
||||
"index",
|
||||
{ intersect: true },
|
||||
true
|
||||
);
|
||||
if (activeBars.length > 0) {
|
||||
var clickedBarIndex = activeBars[0].index;
|
||||
var clickedLabel = data.labels[clickedBarIndex];
|
||||
localStorage.removeItem("savedFilters");
|
||||
var active = "True";
|
||||
if (clickedLabel.toLowerCase()!="active") {
|
||||
active = "False"
|
||||
}
|
||||
function employeeChart(dataSet, labels) {
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: dataSet,
|
||||
};
|
||||
// Create chart using the Chart.js library
|
||||
window["myChart"] = {};
|
||||
const ctx = document.getElementById("totalEmployees").getContext("2d");
|
||||
employeeChart = new Chart(ctx, {
|
||||
type: "doughnut",
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
onClick: (e, activeEls) => {
|
||||
let datasetIndex = activeEls[0].datasetIndex;
|
||||
let dataIndex = activeEls[0].index;
|
||||
let datasetLabel = e.chart.data.datasets[datasetIndex].label;
|
||||
let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
|
||||
let label = e.chart.data.labels[dataIndex];
|
||||
var active = "False";
|
||||
if (label.toLowerCase() == "active") {
|
||||
active = "True";
|
||||
}
|
||||
localStorage.removeItem("savedFilters");
|
||||
window.location.href = "/employee/employee-view?is_active=" + active;
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
{
|
||||
afterRender: (chart) => emptyChart(chart),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
window.location.href =
|
||||
"/employee/employee-view?is_active=" + active;
|
||||
}
|
||||
});
|
||||
}
|
||||
function genderChart(dataSet, labels) {
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: dataSet,
|
||||
};
|
||||
// Create chart using the Chart.js library
|
||||
window["genderChart"] = {};
|
||||
const ctx = document.getElementById("genderChart").getContext("2d");
|
||||
genderChart = new Chart(ctx, {
|
||||
type: "doughnut",
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
onClick: (e, activeEls) => {
|
||||
let datasetIndex = activeEls[0].datasetIndex;
|
||||
let dataIndex = activeEls[0].index;
|
||||
let datasetLabel = e.chart.data.datasets[datasetIndex].label;
|
||||
let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
|
||||
let label = e.chart.data.labels[dataIndex];
|
||||
localStorage.removeItem("savedFilters");
|
||||
window.location.href =
|
||||
"/employee/employee-view?gender=" + label.toLowerCase();
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
{
|
||||
afterRender: (chart) => emptyChart(chart),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function genderChart(dataSet, labels) {
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: dataSet,
|
||||
};
|
||||
// Create chart using the Chart.js library
|
||||
window["genderChart"] = {};
|
||||
const ctx = document.getElementById("genderChart").getContext("2d");
|
||||
genderChart = new Chart(ctx, {
|
||||
type: "doughnut",
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio:false,},
|
||||
plugins: [
|
||||
{
|
||||
afterRender: (chart) => emptyChart(chart),
|
||||
},
|
||||
],
|
||||
});
|
||||
$("#genderChart").on("click", function (event) {
|
||||
var activeBars = genderChart.getElementsAtEventForMode(
|
||||
event,
|
||||
"index",
|
||||
{ intersect: true },
|
||||
true
|
||||
);
|
||||
function departmentChart(dataSet, labels) {
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: dataSet,
|
||||
};
|
||||
// Create chart using the Chart.js library
|
||||
window["departmentChart"] = {};
|
||||
const ctx = document.getElementById("departmentChart").getContext("2d");
|
||||
departmentChart = new Chart(ctx, {
|
||||
type: "doughnut",
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
onClick: (e, activeEls) => {
|
||||
let datasetIndex = activeEls[0].datasetIndex;
|
||||
let dataIndex = activeEls[0].index;
|
||||
let datasetLabel = e.chart.data.datasets[datasetIndex].label;
|
||||
let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
|
||||
let label = e.chart.data.labels[dataIndex];
|
||||
localStorage.removeItem("savedFilters");
|
||||
window.location.href =
|
||||
"/employee/employee-view?department=" + label;
|
||||
|
||||
if (activeBars.length > 0) {
|
||||
var clickedBarIndex = activeBars[0].index;
|
||||
var clickedLabel = data.labels[clickedBarIndex];
|
||||
localStorage.removeItem("savedFilters");
|
||||
window.location.href =
|
||||
"/employee/employee-view?gender=" + clickedLabel.toLowerCase();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
{
|
||||
afterRender: (chart) => emptyChart(chart),
|
||||
},
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
function departmentChart(dataSet, labels) {
|
||||
const data = {
|
||||
labels: labels,
|
||||
datasets: dataSet,
|
||||
};
|
||||
// Create chart using the Chart.js library
|
||||
window["departmentChart"] = {};
|
||||
const ctx = document.getElementById("departmentChart").getContext("2d");
|
||||
departmentChart = new Chart(ctx, {
|
||||
type: "doughnut",
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio:false,},
|
||||
plugins: [
|
||||
{
|
||||
afterRender: (chart) => emptyChart(chart),
|
||||
},
|
||||
],
|
||||
});
|
||||
$("#departmentChart").on("click", function (event) {
|
||||
var activeBars = departmentChart.getElementsAtEventForMode(
|
||||
event,
|
||||
"index",
|
||||
{ intersect: true },
|
||||
true
|
||||
);
|
||||
function employeeCount(data) {
|
||||
$("#totalEmployeesCount").html(data["total_employees"]);
|
||||
$("#newbie").html(data["newbies_week"]);
|
||||
$("#newbiePerc").html(data["newbies_week_percentage"]);
|
||||
$("#newbieToday").html(data["newbies_today"]);
|
||||
$("#newbieTodayPerc").html(data["newbies_today_percentage"]);
|
||||
}
|
||||
|
||||
if (activeBars.length > 0) {
|
||||
var clickedBarIndex = activeBars[0].index;
|
||||
var clickedLabel = data.labels[clickedBarIndex];
|
||||
localStorage.removeItem("savedFilters");
|
||||
window.location.href =
|
||||
"/employee/employee-view?department=" + clickedLabel;
|
||||
}
|
||||
});
|
||||
}
|
||||
$.ajax({
|
||||
url: "/employee/dashboard-employee",
|
||||
type: "GET",
|
||||
success: function (response) {
|
||||
// Code to handle the response
|
||||
dataSet = response.dataSet;
|
||||
labels = response.labels;
|
||||
|
||||
function employeeCount(data) {
|
||||
$("#totalEmployeesCount").html(data["total_employees"]);
|
||||
$("#newbie").html(data["newbies_week"]);
|
||||
$("#newbiePerc").html(data["newbies_week_percentage"]);
|
||||
$("#newbieToday").html(data["newbies_today"]);
|
||||
$("#newbieTodayPerc").html(data["newbies_today_percentage"]);
|
||||
}
|
||||
employeeChart(dataSet, labels);
|
||||
},
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: "/employee/dashboard-employee",
|
||||
type: "GET",
|
||||
success: function (response) {
|
||||
// Code to handle the response
|
||||
dataSet = response.dataSet;
|
||||
labels = response.labels;
|
||||
$.ajax({
|
||||
url: "/employee/dashboard-employee-gender",
|
||||
type: "GET",
|
||||
success: function (response) {
|
||||
// Code to handle the response
|
||||
dataSet = response.dataSet;
|
||||
labels = response.labels;
|
||||
genderChart(dataSet, labels);
|
||||
},
|
||||
});
|
||||
|
||||
employeeChart(dataSet, labels);
|
||||
},
|
||||
});
|
||||
$.ajax({
|
||||
url: "/employee/dashboard-employee-department",
|
||||
type: "GET",
|
||||
success: function (response) {
|
||||
// Code to handle the response
|
||||
dataSet = response.dataSet;
|
||||
labels = response.labels;
|
||||
departmentChart(dataSet, labels);
|
||||
},
|
||||
error: function (error) {
|
||||
console.log(error);
|
||||
},
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: "/employee/dashboard-employee-gender",
|
||||
type: "GET",
|
||||
success: function (response) {
|
||||
// Code to handle the response
|
||||
dataSet = response.dataSet;
|
||||
labels = response.labels;
|
||||
genderChart(dataSet, labels);
|
||||
},
|
||||
});
|
||||
$.ajax({
|
||||
url: "/employee/dashboard-employee-count",
|
||||
type: "GET",
|
||||
success: function (response) {
|
||||
// Code to handle the response
|
||||
employeeCount(response);
|
||||
},
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: "/employee/dashboard-employee-department",
|
||||
type: "GET",
|
||||
success: function (response) {
|
||||
// Code to handle the response
|
||||
dataSet = response.dataSet;
|
||||
labels = response.labels;
|
||||
departmentChart(dataSet, labels);
|
||||
},
|
||||
error: function (error) {
|
||||
console.log(error);
|
||||
},
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
url: "/employee/dashboard-employee-count",
|
||||
type: "GET",
|
||||
success: function (response) {
|
||||
// Code to handle the response
|
||||
employeeCount(response);
|
||||
},
|
||||
});
|
||||
|
||||
$(".oh-card-dashboard__title").click(function (e) {
|
||||
var chartType = myChart.config.type;
|
||||
if (chartType === "line") {
|
||||
chartType = "bar";
|
||||
} else if (chartType === "bar") {
|
||||
chartType = "doughnut";
|
||||
} else if (chartType === "doughnut") {
|
||||
chartType = "pie";
|
||||
} else if (chartType === "pie") {
|
||||
chartType = "line";
|
||||
}
|
||||
myChart.config.type = chartType;
|
||||
myChart.update();
|
||||
});
|
||||
$(".oh-card-dashboard__title").click(function (e) {
|
||||
var chartType = myChart.config.type;
|
||||
if (chartType === "line") {
|
||||
chartType = "bar";
|
||||
} else if (chartType === "bar") {
|
||||
chartType = "doughnut";
|
||||
} else if (chartType === "doughnut") {
|
||||
chartType = "pie";
|
||||
} else if (chartType === "pie") {
|
||||
chartType = "line";
|
||||
}
|
||||
myChart.config.type = chartType;
|
||||
myChart.update();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user