File: /var/www/vhost/disk-apps/comfama.sports-crowd.com/public/js/home.js
$(document).ready(function () {
$.ajax({
url: "/averages",
type: "GET",
contentType: "application/json",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
"Content-Type": "application/json",
},
success: function (r) {
var ctx = document.getElementById("ventas").getContext("2d");
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: [
Lang.get("messagesClient.Enero"),
Lang.get("messagesClient.Febrero"),
Lang.get("messagesClient.Marzo"),
Lang.get("messagesClient.Abril"),
Lang.get("messagesClient.Mayo"),
Lang.get("messagesClient.Junio"),
Lang.get("messagesClient.Julio"),
Lang.get("messagesClient.Agosto"),
Lang.get("messagesClient.Septiembre"),
Lang.get("messagesClient.Octubre"),
Lang.get("messagesClient.Noviembre"),
Lang.get("messagesClient.Diciembre"),
],
datasets: [
{
label: Lang.get("messagesClient.home1"),
backgroundColor: "transparent",
borderColor: "#0073b7",
pointRadius: 5,
data: [
r[0]["january"].sale,
r[0]["february"].sale,
r[0]["march"].sale,
r[0]["april"].sale,
r[0]["may"].sale,
r[0]["june"].sale,
r[0]["july"].sale,
r[0]["august"].sale,
r[0]["september"].sale,
r[0]["october"].sale,
r[0]["november"].sale,
r[0]["december"].sale,
],
},
],
},
// Configuration options go here
options: {},
});
var ctx2 = document.getElementById("tiempos").getContext("2d");
var chart2 = new Chart(ctx2, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: [
Lang.get("messagesClient.Enero"),
Lang.get("messagesClient.Febrero"),
Lang.get("messagesClient.Marzo"),
Lang.get("messagesClient.Abril"),
Lang.get("messagesClient.Mayo"),
Lang.get("messagesClient.Junio"),
Lang.get("messagesClient.Julio"),
Lang.get("messagesClient.Agosto"),
Lang.get("messagesClient.Septiembre"),
Lang.get("messagesClient.Octubre"),
Lang.get("messagesClient.Noviembre"),
Lang.get("messagesClient.Diciembre"),
],
datasets: [
{
label: Lang.get("messagesClient.home2"),
data: [
r[0]["january"].time,
r[0]["february"].time,
r[0]["march"].time,
r[0]["april"].time,
r[0]["may"].time,
r[0]["june"].time,
r[0]["july"].time,
r[0]["august"].time,
r[0]["september"].time,
r[0]["october"].time,
r[0]["november"].time,
r[0]["december"].time,
],
lineTension: 0,
fill: false,
borderColor: "orange",
backgroundColor: "transparent",
borderDash: [5, 5],
pointBorderColor: "orange",
pointBackgroundColor: "rgba(255,150,0,1)",
pointRadius: 8,
pointHoverRadius: 10,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: "rectRounded",
},
],
},
// Configuration options go here
options: {},
});
},
});
$.ajax({
url: "/states",
type: "GET",
contentType: "application/json",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
"Content-Type": "application/json",
},
success: function (r) {
var ctx3 = document.getElementById("estados").getContext("2d");
var chart3 = new Chart(ctx3, {
// The type of chart we want to create
type: "bar",
// The data for our dataset
data: {
labels: [
Lang.get("messagesClient.Pendientes"),
Lang.get("messagesClient.Aceptado"),
Lang.get("messagesClient.Recolectado"),
Lang.get("messagesClient.En Ruta"),
Lang.get("messagesClient.Entregado"),
Lang.get("messagesClient.Finalizado"),
Lang.get("messagesClient.Cancelado"),
],
datasets: [
{
label: Lang.get("messagesClient.home1"),
data: [
r[0]["pending"],
r[0]["accepted"],
r[0]["collected"],
r[0]["route"],
r[0]["delivered"],
r[0]["finalized"],
r[0]["canceled"],
],
backgroundColor: [
"#0099de",
"#0099de",
"#0099de",
"#0099de",
"#0099de",
"#0099de",
],
},
],
},
// Configuration options go here
options: {},
});
},
});
getDataChart();
});
//filtro year
$("#select-filter-graphics-year").change(function () {
valor = $(this).val();
// $('#idselected').attr('selected',true);
$("#select-filter-graphics-month").val("ninguna");
// $('#select-filter-graphics-month option[value="ninguna"]').attr("selected", true);
Chart.defaults.global.legend.display = false;
$.ajax({
url: "/averages/state/filter/year/" + valor,
type: "GET",
contentType: "application/json",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
"Content-Type": "application/json",
},
success: function (r) {
$("#estados").remove();
$("#estados").destroy();
$("#content-estado").append(
'<canvas id="estados" width="803" height="401" class="chartjs-render-monitor" style="display: block; width: 803px; height: 401px;"><canvas>'
);
canvas = document.querySelector("#estados");
ctx3 = canvas.getContext("2d");
var chart3 = new Chart(ctx3, {
type: "bar",
options: {
animation: false,
responsive: false,
},
data: {
labels: [
Lang.get("messagesClient.Pendientes"),
Lang.get("messagesClient.Aceptado"),
Lang.get("messagesClient.Recolectado"),
Lang.get("messagesClient.En Ruta"),
Lang.get("messagesClient.Entregado"),
Lang.get("messagesClient.Finalizado"),
Lang.get("messagesClient.Cancelado"),
],
datasets: [
{
label: Lang.get("messagesClient.home1"),
data: [
r[0]["pending"],
r[0]["accepted"],
r[0]["collected"],
r[0]["route"],
r[0]["delivered"],
r[0]["finalized"],
r[0]["canceled"],
],
backgroundColor: [
"#0099de",
"#0099de",
"#0099de",
"#0099de",
"#0099de",
"#0099de",
"#0099de",
],
},
],
},
// Configuration options go here
options: {},
});
},
});
$.ajax({
url: "/averages/filter/year/" + valor,
type: "GET",
contentType: "application/json",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
"Content-Type": "application/json",
},
success: function (r) {
$("#ventas").remove();
$("#content-ventas").append(
'<canvas id="ventas" width="803" height="301" class="chartjs-render-monitor" style="display: block; width: 803px; height: 401px;"><canvas>'
);
canvas2 = document.querySelector("#ventas");
ctx = canvas2.getContext("2d");
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: [
Lang.get("messagesClient.Enero"),
Lang.get("messagesClient.Febrero"),
Lang.get("messagesClient.Marzo"),
Lang.get("messagesClient.Abril"),
Lang.get("messagesClient.Mayo"),
Lang.get("messagesClient.Junio"),
Lang.get("messagesClient.Julio"),
Lang.get("messagesClient.Agosto"),
Lang.get("messagesClient.Septiembre"),
Lang.get("messagesClient.Octubre"),
Lang.get("messagesClient.Noviembre"),
Lang.get("messagesClient.Diciembre"),
],
datasets: [
{
label: Lang.get("messagesClient.home1"),
backgroundColor: "transparent",
borderColor: "#0073b7",
pointRadius: 5,
data: [
r[0]["january"].sale,
r[0]["february"].sale,
r[0]["march"].sale,
r[0]["april"].sale,
r[0]["may"].sale,
r[0]["june"].sale,
r[0]["july"].sale,
r[0]["august"].sale,
r[0]["september"].sale,
r[0]["october"].sale,
r[0]["november"].sale,
r[0]["december"].sale,
],
},
],
},
// Configuration options go here
options: {},
});
$("#tiempos").remove();
$("#content-tiempos").append(
'<canvas id="tiempos" width="803" height="401" class="chartjs-render-monitor" style="display: block; width: 803px; height: 401px;"><canvas>'
);
canvas3 = document.querySelector("#tiempos");
ctx2 = canvas3.getContext("2d");
var chart2 = new Chart(ctx2, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: [
Lang.get("messagesClient.Enero"),
Lang.get("messagesClient.Febrero"),
Lang.get("messagesClient.Marzo"),
Lang.get("messagesClient.Abril"),
Lang.get("messagesClient.Mayo"),
Lang.get("messagesClient.Junio"),
Lang.get("messagesClient.Julio"),
Lang.get("messagesClient.Agosto"),
Lang.get("messagesClient.Septiembre"),
Lang.get("messagesClient.Octubre"),
Lang.get("messagesClient.Noviembre"),
Lang.get("messagesClient.Diciembre"),
],
datasets: [
{
label: Lang.get("messagesClient.home2"),
data: [
r[0]["january"].time,
r[0]["february"].time,
r[0]["march"].time,
r[0]["april"].time,
r[0]["may"].time,
r[0]["june"].time,
r[0]["july"].time,
r[0]["august"].time,
r[0]["september"].time,
r[0]["october"].time,
r[0]["november"].time,
r[0]["december"].time,
],
lineTension: 0,
fill: false,
borderColor: "orange",
backgroundColor: "transparent",
borderDash: [5, 5],
pointBorderColor: "orange",
pointBackgroundColor: "rgba(255,150,0,1)",
pointRadius: 8,
pointHoverRadius: 10,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: "rectRounded",
},
],
},
// Configuration options go here
options: {},
});
},
});
});
function getDataChart() {
sucursal = $("#select-filter-graphics-sucursals").val();
year = $("#select-filter-graphics-year").val();
mes = $("#select-filter-graphics-month").val();
$.ajax({
url:
"/averages/admin/states/filter/" +
year +
"/" +
mes +
"/" +
sucursal,
type: "GET",
contentType: "application/json",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
"Content-Type": "application/json",
},
success: function (r) {
$("#estados").remove();
$("#content-estado").append(
'<canvas id="estados" width="803" height="401" class="chartjs-render-monitor" style="display: block; width: 803px; height: 401px;"><canvas>'
);
canvas4 = document.querySelector("#estados");
ctx3 = canvas4.getContext("2d");
var chart3 = new Chart(ctx3, {
type: "bar",
data: {
labels: [
Lang.get("messagesClient.Pendientes"),
Lang.get("messagesClient.Aceptado"),
Lang.get("messagesClient.Recolectado"),
Lang.get("messagesClient.En Ruta"),
Lang.get("messagesClient.Entregado"),
Lang.get("messagesClient.Finalizado"),
Lang.get("messagesClient.Cancelado"),
],
datasets: [
{
label: Lang.get("messagesClient.home1"),
data: [
r[0]["pending"],
r[0]["accepted"],
r[0]["collected"],
r[0]["route"],
r[0]["delivered"],
r[0]["finalized"],
r[0]["canceled"],
],
backgroundColor: [
"#0099de",
"#0099de",
"#0099de",
"#0099de",
"#0099de",
"#0099de",
"#0099de",
],
},
],
},
// Configuration options go here
options: {},
});
},
});
$.ajax({
url: "/averages/admin/filter/" + year + "/" + mes + "/" + sucursal,
type: "GET",
contentType: "application/json",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
"Content-Type": "application/json",
},
success: function (r) {
$("#cant_transfer").text(r[0]["transfer"]);
$("#cant_orders").text(r[0]["orders"]);
if (r[0]["month"]) {
dias = [];
tiempos = [];
ventas = [];
if (sucursal == "todos") {
var countDias = 1;
var pos = 0;
for (let i = 0; i < r[0]["average"].length; i++) {
dias[i] = r[0]["average"][i].day;
tiempos[i] = r[0]["average"][i].average_times;
ventas[i] = r[0]["average"][i].quantity_orders;
var anterior = i - 1;
if (r[0]["average"][i].day == dias[anterior]) {
tiempos[anterior] =
tiempos[anterior] +
r[0]["average"][i].average_times;
ventas[anterior] =
ventas[anterior] +
r[0]["average"][i].quantity_orders;
dias.splice(i, 1);
tiempos.splice(i, 1);
ventas.splice(i, 1);
pos = anterior;
countDias = countDias + 1;
} else {
if (countDias > 1) {
tiempos[pos] = tiempos[pos] / countDias;
ventas[pos] = ventas[pos] / countDias;
countDias = 1;
} else {
// tiempos[i] = r[0]["promedios"][i].promedio_tiempo;
// ventas[i] = r[0]["promedios"][i].quantity_orders;
}
}
}
dias = dias.filter(Boolean);
tiempos = tiempos.filter(Boolean);
ventas = ventas.filter(Boolean);
} else {
for (let i = 0; i < r[0]["average"].length; i++) {
dias[i] = r[0]["average"][i].day;
tiempos[i] = r[0]["average"][i].average_times;
ventas[i] = r[0]["average"][i].quantity_orders;
}
}
$("#ventas").remove();
$("#content-ventas").append(
'<canvas id="ventas" width="803" height="301" class="chartjs-render-monitor" style="display: block; width: 803px; height: 401px;"><canvas>'
);
canvas5 = document.querySelector("#ventas");
ctx = canvas5.getContext("2d");
var chart = new Chart(ctx, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: dias,
datasets: [
{
label: Lang.get("messagesClient.home1"),
backgroundColor: "transparent",
borderColor: "#0073b7",
pointRadius: 5,
data: ventas,
},
],
},
// Configuration options go here
options: {},
});
$("#tiempos").remove();
$("#content-tiempos").append(
'<canvas id="tiempos" width="803" height="401" class="chartjs-render-monitor" style="display: block; width: 803px; height: 401px;"><canvas>'
);
canvas6 = document.querySelector("#tiempos");
ctx2 = canvas6.getContext("2d");
var chart2 = new Chart(ctx2, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: dias,
datasets: [
{
label: Lang.get("messagesClient.home2"),
data: tiempos,
lineTension: 0,
fill: false,
borderColor: "orange",
backgroundColor: "transparent",
borderDash: [5, 5],
pointBorderColor: "orange",
pointBackgroundColor: "rgba(255,150,0,1)",
pointRadius: 8,
pointHoverRadius: 10,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: "rectRounded",
},
],
},
// Configuration options go here
options: {},
});
//set tarjetas de tranfer y pedidos por el mes seleccionado
} else {
$("#ventas").remove();
$("#content-ventas").append(
'<canvas id="ventas" width="803" height="301" class="chartjs-render-monitor" style="display: block; width: 803px; height: 401px;"><canvas>'
);
canvas2 = document.querySelector("#ventas");
ctx = canvas2.getContext("2d");
var chart = new Chart(ctx, {
type: "line",
data: {
labels: [
Lang.get("messagesClient.Enero"),
Lang.get("messagesClient.Febrero"),
Lang.get("messagesClient.Marzo"),
Lang.get("messagesClient.Abril"),
Lang.get("messagesClient.Mayo"),
Lang.get("messagesClient.Junio"),
Lang.get("messagesClient.Julio"),
Lang.get("messagesClient.Agosto"),
Lang.get("messagesClient.Septiembre"),
Lang.get("messagesClient.Octubre"),
Lang.get("messagesClient.Noviembre"),
Lang.get("messagesClient.Diciembre"),
],
datasets: [
{
label: Lang.get("messagesClient.home1"),
backgroundColor: "transparent",
borderColor: "#0073b7",
pointRadius: 5,
data: [
r[0]["january"].sale,
r[0]["february"].sale,
r[0]["march"].sale,
r[0]["april"].sale,
r[0]["may"].sale,
r[0]["june"].sale,
r[0]["july"].sale,
r[0]["august"].sale,
r[0]["september"].sale,
r[0]["october"].sale,
r[0]["november"].sale,
r[0]["december"].sale,
],
},
],
},
// Configuration options go here
options: {},
});
$("#tiempos").remove();
$("#content-tiempos").append(
'<canvas id="tiempos" width="803" height="401" class="chartjs-render-monitor" style="display: block; width: 803px; height: 401px;"><canvas>'
);
canvas3 = document.querySelector("#tiempos");
ctx2 = canvas3.getContext("2d");
var chart2 = new Chart(ctx2, {
// The type of chart we want to create
type: "line",
// The data for our dataset
data: {
labels: [
Lang.get("messagesClient.Enero"),
Lang.get("messagesClient.Febrero"),
Lang.get("messagesClient.Marzo"),
Lang.get("messagesClient.Abril"),
Lang.get("messagesClient.Mayo"),
Lang.get("messagesClient.Junio"),
Lang.get("messagesClient.Julio"),
Lang.get("messagesClient.Agosto"),
Lang.get("messagesClient.Septiembre"),
Lang.get("messagesClient.Octubre"),
Lang.get("messagesClient.Noviembre"),
Lang.get("messagesClient.Diciembre"),
],
datasets: [
{
label: Lang.get("messagesClient.home2"),
data: [
r[0]["january"].time,
r[0]["february"].time,
r[0]["march"].time,
r[0]["april"].time,
r[0]["may"].time,
r[0]["june"].time,
r[0]["july"].time,
r[0]["august"].time,
r[0]["september"].time,
r[0]["october"].time,
r[0]["november"].time,
r[0]["december"].time,
],
lineTension: 0,
fill: false,
borderColor: "orange",
backgroundColor: "transparent",
borderDash: [5, 5],
pointBorderColor: "orange",
pointBackgroundColor: "rgba(255,150,0,1)",
pointRadius: 8,
pointHoverRadius: 10,
pointHitRadius: 30,
pointBorderWidth: 2,
pointStyle: "rectRounded",
},
],
},
// Configuration options go here
options: {},
});
}
},
});
}
//filtro de graficos SUCURSAL
$("#btn-filter-graphics").click(function () {
getDataChart();
});