22706 lines
657 KiB
JavaScript
22706 lines
657 KiB
JavaScript
"use strict";
|
|
|
|
// Class definition
|
|
var KTFormsWidget1 = (function () {
|
|
// Private methods
|
|
var initForm1 = function () {
|
|
var element = document.querySelector("#kt_forms_widget_1_select_1");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var optionFormat = function (item) {
|
|
if (!item.id) {
|
|
return item.text;
|
|
}
|
|
|
|
var span = document.createElement("span");
|
|
var template = "";
|
|
|
|
template +=
|
|
'<img src="' +
|
|
item.element.getAttribute("data-kt-select2-icon") +
|
|
'" class="rounded-circle h-20px me-2" alt="image"/>';
|
|
template += item.text;
|
|
|
|
span.innerHTML = template;
|
|
|
|
return $(span);
|
|
};
|
|
|
|
// Init Select2 --- more info: https://select2.org/
|
|
$(element).select2({
|
|
placeholder: "Select coin",
|
|
minimumResultsForSearch: Infinity,
|
|
templateSelection: optionFormat,
|
|
templateResult: optionFormat,
|
|
});
|
|
};
|
|
|
|
var initForm2 = function () {
|
|
var element = document.querySelector("#kt_forms_widget_1_select_2");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var optionFormat = function (item) {
|
|
if (!item.id) {
|
|
return item.text;
|
|
}
|
|
|
|
var span = document.createElement("span");
|
|
var template = "";
|
|
|
|
template +=
|
|
'<img src="' +
|
|
item.element.getAttribute("data-kt-select2-icon") +
|
|
'" class="rounded-circle h-20px me-2" alt="image"/>';
|
|
template += item.text;
|
|
|
|
span.innerHTML = template;
|
|
|
|
return $(span);
|
|
};
|
|
|
|
// Init Select2 --- more info: https://select2.org/
|
|
$(element).select2({
|
|
placeholder: "Select coin",
|
|
minimumResultsForSearch: Infinity,
|
|
templateSelection: optionFormat,
|
|
templateResult: optionFormat,
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initForm1();
|
|
initForm2();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTFormsWidget1;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTFormsWidget1.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTCardsWidget1 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_card_widget_1_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var baseColor = KTUtil.isHexColor(color)
|
|
? color
|
|
: KTUtil.getCssVariableValue("--bs-" + color);
|
|
var secondaryColor = KTUtil.getCssVariableValue("--bs-gray-300");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Sales",
|
|
data: [30, 75, 55, 45, 30, 60, 75, 50],
|
|
margin: {
|
|
left: 5,
|
|
right: 5,
|
|
},
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: ["35%"],
|
|
borderRadius: 6,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 4,
|
|
colors: ["transparent"],
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
x: {
|
|
formatter: function (val) {
|
|
return "Feb: " + val;
|
|
},
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + "%";
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor, secondaryColor],
|
|
grid: {
|
|
borderColor: false,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
padding: {
|
|
top: 10,
|
|
left: 25,
|
|
right: 25,
|
|
},
|
|
},
|
|
};
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
var chart = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.render();
|
|
}, 300);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTCardsWidget1;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTCardsWidget1.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTCardsWidget10 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
var el = document.getElementById("kt_card_widget_10_chart");
|
|
|
|
if (!el) {
|
|
return;
|
|
}
|
|
|
|
var options = {
|
|
size: el.getAttribute("data-kt-size")
|
|
? parseInt(el.getAttribute("data-kt-size"))
|
|
: 70,
|
|
lineWidth: el.getAttribute("data-kt-line")
|
|
? parseInt(el.getAttribute("data-kt-line"))
|
|
: 11,
|
|
rotate: el.getAttribute("data-kt-rotate")
|
|
? parseInt(el.getAttribute("data-kt-rotate"))
|
|
: 145,
|
|
//percent: el.getAttribute('data-kt-percent') ,
|
|
};
|
|
|
|
var canvas = document.createElement("canvas");
|
|
var span = document.createElement("span");
|
|
|
|
if (typeof G_vmlCanvasManager !== "undefined") {
|
|
G_vmlCanvasManager.initElement(canvas);
|
|
}
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
canvas.width = canvas.height = options.size;
|
|
|
|
el.appendChild(span);
|
|
el.appendChild(canvas);
|
|
|
|
ctx.translate(options.size / 2, options.size / 2); // change center
|
|
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
|
|
|
|
//imd = ctx.getImageData(0, 0, 240, 240);
|
|
var radius = (options.size - options.lineWidth) / 2;
|
|
|
|
var drawCircle = function (color, lineWidth, percent) {
|
|
percent = Math.min(Math.max(0, percent || 1), 1);
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
|
|
ctx.strokeStyle = color;
|
|
ctx.lineCap = "round"; // butt, round or square
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.stroke();
|
|
};
|
|
|
|
// Init
|
|
drawCircle("#E4E6EF", options.lineWidth, 100 / 100);
|
|
drawCircle(
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
options.lineWidth,
|
|
100 / 150
|
|
);
|
|
drawCircle(
|
|
KTUtil.getCssVariableValue("--bs-success"),
|
|
options.lineWidth,
|
|
100 / 250
|
|
);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTCardsWidget10;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTCardsWidget10.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTCardWidget12 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_card_widget_12_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-success");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Sales",
|
|
data: [
|
|
3.5, 5.7, 2.8, 5.9, 4.2, 5.6, 4.3, 4.5, 5.9, 4.5, 5.7,
|
|
4.8, 5.7,
|
|
],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
opacity: 0,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 2,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
x: {
|
|
formatter: function (val) {
|
|
return "Feb " + val;
|
|
},
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val * "10" + "K";
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
padding: {
|
|
top: 0,
|
|
right: -20,
|
|
bottom: -20,
|
|
left: -20,
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 2,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTCardWidget12;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTCardWidget12.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTCardWidget13 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_card_widget_13_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-success");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Shipments",
|
|
data: [1.5, 4.5, 2, 3, 2, 4, 2.5, 2, 2.5, 4, 3.5, 4.5, 2.5],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
opacity: 0,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 2,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
x: {
|
|
formatter: function (val) {
|
|
return "Feb " + val;
|
|
},
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val * "10" + "K";
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
padding: {
|
|
top: 0,
|
|
right: -20,
|
|
bottom: -20,
|
|
left: -20,
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 2,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTCardWidget13;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTCardWidget13.init();
|
|
});
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTCardsWidget17 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
var el = document.getElementById("kt_card_widget_17_chart");
|
|
|
|
if (!el) {
|
|
return;
|
|
}
|
|
|
|
var options = {
|
|
size: el.getAttribute("data-kt-size")
|
|
? parseInt(el.getAttribute("data-kt-size"))
|
|
: 70,
|
|
lineWidth: el.getAttribute("data-kt-line")
|
|
? parseInt(el.getAttribute("data-kt-line"))
|
|
: 11,
|
|
rotate: el.getAttribute("data-kt-rotate")
|
|
? parseInt(el.getAttribute("data-kt-rotate"))
|
|
: 145,
|
|
//percent: el.getAttribute('data-kt-percent') ,
|
|
};
|
|
|
|
var canvas = document.createElement("canvas");
|
|
var span = document.createElement("span");
|
|
|
|
if (typeof G_vmlCanvasManager !== "undefined") {
|
|
G_vmlCanvasManager.initElement(canvas);
|
|
}
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
canvas.width = canvas.height = options.size;
|
|
|
|
el.appendChild(span);
|
|
el.appendChild(canvas);
|
|
|
|
ctx.translate(options.size / 2, options.size / 2); // change center
|
|
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
|
|
|
|
//imd = ctx.getImageData(0, 0, 240, 240);
|
|
var radius = (options.size - options.lineWidth) / 2;
|
|
|
|
var drawCircle = function (color, lineWidth, percent) {
|
|
percent = Math.min(Math.max(0, percent || 1), 1);
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
|
|
ctx.strokeStyle = color;
|
|
ctx.lineCap = "round"; // butt, round or square
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.stroke();
|
|
};
|
|
|
|
// Init
|
|
drawCircle("#E4E6EF", options.lineWidth, 100 / 100);
|
|
drawCircle(
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
options.lineWidth,
|
|
100 / 150
|
|
);
|
|
drawCircle(
|
|
KTUtil.getCssVariableValue("--bs-success"),
|
|
options.lineWidth,
|
|
100 / 250
|
|
);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTCardsWidget17;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTCardsWidget17.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTCardsWidget19 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
var el = document.getElementById("kt_card_widget_19_chart");
|
|
|
|
if (!el) {
|
|
return;
|
|
}
|
|
|
|
var options = {
|
|
size: el.getAttribute("data-kt-size")
|
|
? parseInt(el.getAttribute("data-kt-size"))
|
|
: 70,
|
|
lineWidth: el.getAttribute("data-kt-line")
|
|
? parseInt(el.getAttribute("data-kt-line"))
|
|
: 11,
|
|
rotate: el.getAttribute("data-kt-rotate")
|
|
? parseInt(el.getAttribute("data-kt-rotate"))
|
|
: 145,
|
|
//percent: el.getAttribute('data-kt-percent') ,
|
|
};
|
|
|
|
var canvas = document.createElement("canvas");
|
|
var span = document.createElement("span");
|
|
|
|
if (typeof G_vmlCanvasManager !== "undefined") {
|
|
G_vmlCanvasManager.initElement(canvas);
|
|
}
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
canvas.width = canvas.height = options.size;
|
|
|
|
el.appendChild(span);
|
|
el.appendChild(canvas);
|
|
|
|
ctx.translate(options.size / 2, options.size / 2); // change center
|
|
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
|
|
|
|
//imd = ctx.getImageData(0, 0, 240, 240);
|
|
var radius = (options.size - options.lineWidth) / 2;
|
|
|
|
var drawCircle = function (color, lineWidth, percent) {
|
|
percent = Math.min(Math.max(0, percent || 1), 1);
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
|
|
ctx.strokeStyle = color;
|
|
ctx.lineCap = "round"; // butt, round or square
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.stroke();
|
|
};
|
|
|
|
// Init
|
|
drawCircle("#E4E6EF", options.lineWidth, 100 / 100);
|
|
drawCircle(
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
options.lineWidth,
|
|
100 / 150
|
|
);
|
|
drawCircle(
|
|
KTUtil.getCssVariableValue("--bs-success"),
|
|
options.lineWidth,
|
|
100 / 250
|
|
);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTCardsWidget19;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTCardsWidget19.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTCardsWidget4 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
var el = document.getElementById("kt_card_widget_4_chart");
|
|
|
|
if (!el) {
|
|
return;
|
|
}
|
|
|
|
var options = {
|
|
size: el.getAttribute("data-kt-size")
|
|
? parseInt(el.getAttribute("data-kt-size"))
|
|
: 70,
|
|
lineWidth: el.getAttribute("data-kt-line")
|
|
? parseInt(el.getAttribute("data-kt-line"))
|
|
: 11,
|
|
rotate: el.getAttribute("data-kt-rotate")
|
|
? parseInt(el.getAttribute("data-kt-rotate"))
|
|
: 145,
|
|
//percent: el.getAttribute('data-kt-percent') ,
|
|
};
|
|
|
|
var canvas = document.createElement("canvas");
|
|
var span = document.createElement("span");
|
|
|
|
if (typeof G_vmlCanvasManager !== "undefined") {
|
|
G_vmlCanvasManager.initElement(canvas);
|
|
}
|
|
|
|
var ctx = canvas.getContext("2d");
|
|
canvas.width = canvas.height = options.size;
|
|
|
|
el.appendChild(span);
|
|
el.appendChild(canvas);
|
|
|
|
ctx.translate(options.size / 2, options.size / 2); // change center
|
|
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
|
|
|
|
//imd = ctx.getImageData(0, 0, 240, 240);
|
|
var radius = (options.size - options.lineWidth) / 2;
|
|
|
|
var drawCircle = function (color, lineWidth, percent) {
|
|
percent = Math.min(Math.max(0, percent || 1), 1);
|
|
ctx.beginPath();
|
|
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
|
|
ctx.strokeStyle = color;
|
|
ctx.lineCap = "round"; // butt, round or square
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.stroke();
|
|
};
|
|
|
|
// Init
|
|
drawCircle("#E4E6EF", options.lineWidth, 100 / 100);
|
|
drawCircle(
|
|
KTUtil.getCssVariableValue("--bs-danger"),
|
|
options.lineWidth,
|
|
100 / 150
|
|
);
|
|
drawCircle(
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
options.lineWidth,
|
|
100 / 250
|
|
);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTCardsWidget4;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTCardsWidget4.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTCardsWidget6 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_card_widget_6_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-primary");
|
|
var secondaryColor = KTUtil.getCssVariableValue("--bs-gray-300");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Sales",
|
|
data: [30, 60, 53, 45, 60, 75, 53],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: ["55%"],
|
|
borderRadius: 6,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 9,
|
|
colors: ["transparent"],
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
tickPlacement: "between",
|
|
},
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
x: {
|
|
formatter: function (val) {
|
|
return "Feb: " + val;
|
|
},
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + "%";
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor, secondaryColor],
|
|
grid: {
|
|
padding: {
|
|
left: 10,
|
|
right: 10,
|
|
},
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.render();
|
|
}, 300);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTCardsWidget6;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTCardsWidget6.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTCardWidget8 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_card_widget_8_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-success");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Sales",
|
|
data: [
|
|
4.5, 5.7, 2.8, 5.9, 4.2, 5.6, 5.2, 4.5, 5.9, 4.5, 5.7,
|
|
4.8, 5.7,
|
|
],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
opacity: 0,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 2,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
x: {
|
|
formatter: function (val) {
|
|
return "Feb " + val;
|
|
},
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$" + val + "K";
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
padding: {
|
|
top: 0,
|
|
right: -20,
|
|
bottom: -20,
|
|
left: -20,
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 2,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTCardWidget8;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTCardWidget8.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTCardWidget9 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_card_widget_9_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-success");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Visitors",
|
|
data: [1.5, 2.5, 2, 3, 2, 4, 2.5, 2, 2.5, 4, 2.5, 4.5, 2.5],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
opacity: 0,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 2,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
x: {
|
|
formatter: function (val) {
|
|
return "Feb " + val;
|
|
},
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + "K";
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
padding: {
|
|
top: 0,
|
|
right: -20,
|
|
bottom: -20,
|
|
left: -20,
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 2,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTCardWidget9;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTCardWidget9.init();
|
|
});
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget1 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_charts_widget_1");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var negativeColor = element.hasAttribute("data-kt-negative-color")
|
|
? element.getAttribute("data-kt-negative-color")
|
|
: KTUtil.getCssVariableValue("--bs-success");
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-primary");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Subscribed",
|
|
data: [
|
|
20, 30, 20, 40, 60, 75, 65, 18, 10, 5, 15, 40, 60, 18,
|
|
35, 55, 20,
|
|
],
|
|
},
|
|
{
|
|
name: "Unsubscribed",
|
|
data: [
|
|
-20, -15, -5, -20, -30, -15, -10, -8, -5, -5, -10, -25,
|
|
-15, -5, -10, -5, -15,
|
|
],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
stacked: true,
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
//horizontal: false,
|
|
columnWidth: "35%",
|
|
barHeight: "70%",
|
|
borderRadius: [6, 6],
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"Jan 5",
|
|
"Jan 7",
|
|
"Jan 9",
|
|
"Jan 11",
|
|
"Jan 13",
|
|
"Jan 15",
|
|
"Jan 17",
|
|
"Jan 19",
|
|
"Jan 20",
|
|
"Jan 21",
|
|
"Jan 23",
|
|
"Jan 24",
|
|
"Jan 25",
|
|
"Jan 26",
|
|
"Jan 24",
|
|
"Jan 28",
|
|
"Jan 29",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
tickAmount: 10,
|
|
labels: {
|
|
//rotate: -45,
|
|
//rotateAlways: true,
|
|
style: {
|
|
colors: [labelColor],
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: -50,
|
|
max: 80,
|
|
tickAmount: 6,
|
|
labels: {
|
|
style: {
|
|
colors: [labelColor],
|
|
fontSize: "12px",
|
|
},
|
|
formatter: function (val) {
|
|
return parseInt(val) + "K";
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
borderRadius: 4,
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
if (val > 0) {
|
|
return val + "K";
|
|
} else {
|
|
return Math.abs(val) + "K";
|
|
}
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor, negativeColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget1;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget1.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget10 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart4 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (
|
|
chart,
|
|
toggle,
|
|
chartSelector,
|
|
data,
|
|
initByDefault
|
|
) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-900");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Achieved Target",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: ["22%"],
|
|
borderRadius: 5,
|
|
dataLabels: {
|
|
position: "top", // top, center, bottom
|
|
},
|
|
startingShape: "flat",
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
offsetY: -30,
|
|
style: {
|
|
fontSize: "13px",
|
|
colors: [labelColor],
|
|
},
|
|
formatter: function (val) {
|
|
return val + "K";
|
|
},
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ["transparent"],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"Metals",
|
|
"Energy",
|
|
"Agro",
|
|
"Machines",
|
|
"Transport",
|
|
"Textile",
|
|
"Wood",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
fill: {
|
|
gradient: {
|
|
opacityFrom: 0,
|
|
opacityTo: 0,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
formatter: function (val) {
|
|
return parseInt(val) + "K";
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return +val + "K";
|
|
},
|
|
},
|
|
},
|
|
colors: [
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
KTUtil.getCssVariableValue("--bs-primary-light"),
|
|
],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
var tab = document.querySelector(toggle);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (chart.rendered === false) {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var chart1Data = [30, 18, 43, 70, 13, 37, 23];
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_10_tab_1",
|
|
"#kt_charts_widget_10_chart_1",
|
|
chart1Data,
|
|
true
|
|
);
|
|
|
|
var chart2Data = [25, 55, 35, 50, 45, 20, 31];
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_10_tab_2",
|
|
"#kt_charts_widget_10_chart_2",
|
|
chart2Data,
|
|
false
|
|
);
|
|
|
|
var chart3Data = [45, 15, 35, 70, 45, 50, 21];
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_10_tab_3",
|
|
"#kt_charts_widget_10_chart_3",
|
|
chart3Data,
|
|
false
|
|
);
|
|
|
|
var chart4Data = [15, 55, 25, 50, 25, 60, 31];
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_10_tab_4",
|
|
"#kt_charts_widget_10_chart_4",
|
|
chart4Data,
|
|
false
|
|
);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
}
|
|
|
|
if (chart4.rendered) {
|
|
chart4.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_10_tab_1",
|
|
"#kt_charts_widget_10_chart_1",
|
|
chart1Data,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_10_tab_2",
|
|
"#kt_charts_widget_10_chart_2",
|
|
chart2Data,
|
|
chart2.rendered
|
|
);
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_10_tab_3",
|
|
"#kt_charts_widget_10_chart_3",
|
|
chart3Data,
|
|
chart3.rendered
|
|
);
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_10_tab_4",
|
|
"#kt_charts_widget_10_chart_4",
|
|
chart4Data,
|
|
chart4.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget10;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget10.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget11 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (
|
|
chart,
|
|
toggle,
|
|
chartSelector,
|
|
data,
|
|
initByDefault
|
|
) {
|
|
var element = document.querySelector(chartSelector);
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-success");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Deliveries",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0,
|
|
stops: [0, 80, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"",
|
|
"Apr 02",
|
|
"Apr 06",
|
|
"Apr 06",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 10",
|
|
"Apr 08",
|
|
"Apr 09",
|
|
"Apr 14",
|
|
"Apr 10",
|
|
"Apr 12",
|
|
"Apr 18",
|
|
"Apr 14",
|
|
"Apr 15",
|
|
"Apr 14",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"Apr 02",
|
|
"Apr 06",
|
|
"Apr 18",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 10",
|
|
"Apr 08",
|
|
"Apr 22",
|
|
"Apr 14",
|
|
"Apr 11",
|
|
"Apr 12",
|
|
"",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
tickAmount: 5,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: true,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
max: 24,
|
|
min: 10,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return +val;
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 3,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
var tab = document.querySelector(toggle);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (chart.rendered === false) {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var chart1Data = [
|
|
16, 19, 19, 16, 16, 14, 15, 15, 17, 17, 19, 19, 18, 18, 20, 20,
|
|
18, 18, 22, 22, 20, 20, 18, 18, 20, 20, 18, 20, 20, 22,
|
|
];
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_11_tab_1",
|
|
"#kt_charts_widget_11_chart_1",
|
|
chart1Data,
|
|
false
|
|
);
|
|
|
|
var chart2Data = [
|
|
18, 18, 20, 20, 18, 18, 22, 22, 20, 20, 18, 18, 20, 20, 18, 18,
|
|
20, 20, 22, 15, 18, 18, 17, 17, 15, 15, 17, 17, 19, 17,
|
|
];
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_11_tab_2",
|
|
"#kt_charts_widget_11_chart_2",
|
|
chart2Data,
|
|
false
|
|
);
|
|
|
|
var chart3Data = [
|
|
17, 20, 20, 19, 19, 17, 17, 19, 19, 21, 21, 19, 19, 21, 21, 18,
|
|
18, 16, 17, 17, 19, 19, 21, 21, 19, 19, 17, 17, 18, 18,
|
|
];
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_11_tab_3",
|
|
"#kt_charts_widget_11_chart_3",
|
|
chart3Data,
|
|
true
|
|
);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_11_tab_1",
|
|
"#kt_charts_widget_11_chart_1",
|
|
chart1Data,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_11_tab_2",
|
|
"#kt_charts_widget_11_chart_2",
|
|
chart2Data,
|
|
chart2.rendered
|
|
);
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_11_tab_3",
|
|
"#kt_charts_widget_11_chart_3",
|
|
chart3Data,
|
|
chart3.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget11;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget11.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget12 = (function () {
|
|
// Private methods
|
|
var initChart = function (tabSelector, chartSelector, data, initByDefault) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-900");
|
|
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Deliveries",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: ["22%"],
|
|
borderRadius: 5,
|
|
dataLabels: {
|
|
position: "top", // top, center, bottom
|
|
},
|
|
startingShape: "flat",
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
offsetY: -28,
|
|
style: {
|
|
fontSize: "13px",
|
|
colors: labelColor,
|
|
},
|
|
|
|
formatter: function (val) {
|
|
return val + "K";
|
|
},
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ["transparent"],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"Grossey",
|
|
"Pet Food",
|
|
"Flowers",
|
|
"Restaurant",
|
|
"Kids Toys",
|
|
"Clothing",
|
|
"Still Water",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
fill: {
|
|
gradient: {
|
|
opacityFrom: 0,
|
|
opacityTo: 0,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
|
|
formatter: function (val) {
|
|
return val + "K";
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return +val + "K";
|
|
},
|
|
},
|
|
},
|
|
colors: [
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
KTUtil.getCssVariableValue("--bs-primary-light"),
|
|
],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(element, options);
|
|
|
|
var init = false;
|
|
var tab = document.querySelector(tabSelector);
|
|
|
|
if (initByDefault === true) {
|
|
chart.render();
|
|
init = true;
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (init == false) {
|
|
chart.render();
|
|
init = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(
|
|
"#kt_charts_widget_12_tab_1",
|
|
"#kt_charts_widget_12_chart_1",
|
|
[54, 42, 75, 110, 23, 87, 50],
|
|
true
|
|
);
|
|
initChart(
|
|
"#kt_charts_widget_12_tab_2",
|
|
"#kt_charts_widget_12_chart_2",
|
|
[25, 55, 35, 50, 45, 20, 31],
|
|
false
|
|
);
|
|
initChart(
|
|
"#kt_charts_widget_12_tab_3",
|
|
"#kt_charts_widget_12_chart_3",
|
|
[45, 15, 35, 70, 45, 50, 21],
|
|
false
|
|
);
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget12;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget12.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget13 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_13_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/
|
|
var chart = root.container.children.push(
|
|
am5xy.XYChart.new(root, {
|
|
panX: true,
|
|
panY: true,
|
|
wheelX: "panX",
|
|
wheelY: "zoomX",
|
|
})
|
|
);
|
|
|
|
// Add cursor
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
|
|
var cursor = chart.set(
|
|
"cursor",
|
|
am5xy.XYCursor.new(root, {
|
|
behavior: "none",
|
|
})
|
|
);
|
|
|
|
cursor.lineY.set("visible", false);
|
|
|
|
// The data
|
|
var data = [
|
|
{
|
|
year: "2003",
|
|
cars: 1587,
|
|
motorcycles: 650,
|
|
bicycles: 121,
|
|
},
|
|
{
|
|
year: "2004",
|
|
cars: 1567,
|
|
motorcycles: 683,
|
|
bicycles: 146,
|
|
},
|
|
{
|
|
year: "2005",
|
|
cars: 1617,
|
|
motorcycles: 691,
|
|
bicycles: 138,
|
|
},
|
|
{
|
|
year: "2006",
|
|
cars: 1630,
|
|
motorcycles: 642,
|
|
bicycles: 127,
|
|
},
|
|
{
|
|
year: "2007",
|
|
cars: 1660,
|
|
motorcycles: 699,
|
|
bicycles: 105,
|
|
},
|
|
{
|
|
year: "2008",
|
|
cars: 1683,
|
|
motorcycles: 721,
|
|
bicycles: 109,
|
|
},
|
|
{
|
|
year: "2009",
|
|
cars: 1691,
|
|
motorcycles: 737,
|
|
bicycles: 112,
|
|
},
|
|
{
|
|
year: "2010",
|
|
cars: 1298,
|
|
motorcycles: 680,
|
|
bicycles: 101,
|
|
},
|
|
{
|
|
year: "2011",
|
|
cars: 1275,
|
|
motorcycles: 664,
|
|
bicycles: 97,
|
|
},
|
|
{
|
|
year: "2012",
|
|
cars: 1246,
|
|
motorcycles: 648,
|
|
bicycles: 93,
|
|
},
|
|
{
|
|
year: "2013",
|
|
cars: 1318,
|
|
motorcycles: 697,
|
|
bicycles: 111,
|
|
},
|
|
{
|
|
year: "2014",
|
|
cars: 1213,
|
|
motorcycles: 633,
|
|
bicycles: 87,
|
|
},
|
|
{
|
|
year: "2015",
|
|
cars: 1199,
|
|
motorcycles: 621,
|
|
bicycles: 79,
|
|
},
|
|
{
|
|
year: "2016",
|
|
cars: 1110,
|
|
motorcycles: 210,
|
|
bicycles: 81,
|
|
},
|
|
{
|
|
year: "2017",
|
|
cars: 1165,
|
|
motorcycles: 232,
|
|
bicycles: 75,
|
|
},
|
|
{
|
|
year: "2018",
|
|
cars: 1145,
|
|
motorcycles: 219,
|
|
bicycles: 88,
|
|
},
|
|
{
|
|
year: "2019",
|
|
cars: 1163,
|
|
motorcycles: 201,
|
|
bicycles: 82,
|
|
},
|
|
{
|
|
year: "2020",
|
|
cars: 1180,
|
|
motorcycles: 285,
|
|
bicycles: 87,
|
|
},
|
|
{
|
|
year: "2021",
|
|
cars: 1159,
|
|
motorcycles: 277,
|
|
bicycles: 71,
|
|
},
|
|
];
|
|
|
|
// Create axes
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
categoryField: "year",
|
|
startLocation: 0.5,
|
|
endLocation: 0.5,
|
|
renderer: am5xy.AxisRendererX.new(root, {}),
|
|
tooltip: am5.Tooltip.new(root, {}),
|
|
})
|
|
);
|
|
|
|
xAxis.get("renderer").grid.template.setAll({
|
|
disabled: true,
|
|
strokeOpacity: 0,
|
|
});
|
|
|
|
xAxis.get("renderer").labels.template.setAll({
|
|
fontWeight: "400",
|
|
fontSize: 13,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
xAxis.data.setAll(data);
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
renderer: am5xy.AxisRendererY.new(root, {}),
|
|
})
|
|
);
|
|
|
|
yAxis.get("renderer").grid.template.setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")),
|
|
strokeWidth: 1,
|
|
strokeOpacity: 1,
|
|
strokeDasharray: [3],
|
|
});
|
|
|
|
yAxis.get("renderer").labels.template.setAll({
|
|
fontWeight: "400",
|
|
fontSize: 13,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
// Add series
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
|
|
|
|
function createSeries(name, field, color) {
|
|
var series = chart.series.push(
|
|
am5xy.LineSeries.new(root, {
|
|
name: name,
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
stacked: true,
|
|
valueYField: field,
|
|
categoryXField: "year",
|
|
fill: am5.color(color),
|
|
tooltip: am5.Tooltip.new(root, {
|
|
pointerOrientation: "horizontal",
|
|
labelText: "[bold]{name}[/]\n{categoryX}: {valueY}",
|
|
}),
|
|
})
|
|
);
|
|
|
|
series.fills.template.setAll({
|
|
fillOpacity: 0.5,
|
|
visible: true,
|
|
});
|
|
|
|
series.data.setAll(data);
|
|
series.appear(1000);
|
|
}
|
|
|
|
createSeries(
|
|
"Cars",
|
|
"cars",
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
);
|
|
createSeries(
|
|
"Motorcycles",
|
|
"motorcycles",
|
|
KTUtil.getCssVariableValue("--bs-success")
|
|
);
|
|
createSeries(
|
|
"Bicycles",
|
|
"bicycles",
|
|
KTUtil.getCssVariableValue("--bs-warning")
|
|
);
|
|
|
|
// Add scrollbar
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
|
|
var scrollbarX = chart.set(
|
|
"scrollbarX",
|
|
am5.Scrollbar.new(root, {
|
|
orientation: "horizontal",
|
|
marginBottom: 25,
|
|
height: 8,
|
|
})
|
|
);
|
|
|
|
// Create axis ranges
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/axis-ranges/
|
|
var rangeDataItem = xAxis.makeDataItem({
|
|
category: "2016",
|
|
endCategory: "2021",
|
|
});
|
|
|
|
var range = xAxis.createAxisRange(rangeDataItem);
|
|
|
|
rangeDataItem.get("grid").setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-200")),
|
|
strokeOpacity: 0.5,
|
|
strokeDasharray: [3],
|
|
});
|
|
|
|
rangeDataItem.get("axisFill").setAll({
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-200")),
|
|
fillOpacity: 0.1,
|
|
});
|
|
|
|
rangeDataItem.get("label").setAll({
|
|
inside: true,
|
|
text: "Fines increased",
|
|
rotation: 90,
|
|
centerX: am5.p100,
|
|
centerY: am5.p100,
|
|
location: 0,
|
|
paddingBottom: 10,
|
|
paddingRight: 15,
|
|
});
|
|
|
|
var rangeDataItem2 = xAxis.makeDataItem({
|
|
category: "2021",
|
|
});
|
|
|
|
var range2 = xAxis.createAxisRange(rangeDataItem2);
|
|
|
|
rangeDataItem2.get("grid").setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-danger")),
|
|
strokeOpacity: 1,
|
|
strokeDasharray: [3],
|
|
});
|
|
|
|
rangeDataItem2.get("label").setAll({
|
|
inside: true,
|
|
text: "Fee introduced",
|
|
rotation: 90,
|
|
centerX: am5.p100,
|
|
centerY: am5.p100,
|
|
location: 0,
|
|
paddingBottom: 10,
|
|
paddingRight: 15,
|
|
});
|
|
|
|
// Make stuff animate on load
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
am5.ready(function () {
|
|
init();
|
|
}); // end am5.ready()
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget13;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget13.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget14 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_14_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
am5.ready(function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
var root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/
|
|
var chart = root.container.children.push(
|
|
am5radar.RadarChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
wheelX: "panX",
|
|
wheelY: "zoomX",
|
|
innerRadius: am5.percent(20),
|
|
startAngle: -90,
|
|
endAngle: 180,
|
|
})
|
|
);
|
|
|
|
// Data
|
|
var data = [
|
|
{
|
|
category: "Research",
|
|
value: 80,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-info")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
category: "Marketing",
|
|
value: 35,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-danger")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
category: "Distribution",
|
|
value: 92,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
category: "Human Resources",
|
|
value: 68,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-success")
|
|
),
|
|
},
|
|
},
|
|
];
|
|
|
|
// Add cursor
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
|
|
var cursor = chart.set(
|
|
"cursor",
|
|
am5radar.RadarCursor.new(root, {
|
|
behavior: "zoomX",
|
|
})
|
|
);
|
|
|
|
cursor.lineY.set("visible", false);
|
|
|
|
// Create axes and their renderers
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
|
|
var xRenderer = am5radar.AxisRendererCircular.new(root, {
|
|
//minGridDistance: 50
|
|
});
|
|
|
|
xRenderer.labels.template.setAll({
|
|
radius: 10,
|
|
});
|
|
|
|
xRenderer.grid.template.setAll({
|
|
forceHidden: true,
|
|
});
|
|
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
renderer: xRenderer,
|
|
min: 0,
|
|
max: 100,
|
|
strictMinMax: true,
|
|
numberFormat: "#'%'",
|
|
tooltip: am5.Tooltip.new(root, {}),
|
|
})
|
|
);
|
|
|
|
xAxis.get("renderer").labels.template.setAll({
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
fontWeight: "500",
|
|
fontSize: 16,
|
|
});
|
|
|
|
var yRenderer = am5radar.AxisRendererRadial.new(root, {
|
|
minGridDistance: 20,
|
|
});
|
|
|
|
yRenderer.labels.template.setAll({
|
|
centerX: am5.p100,
|
|
fontWeight: "500",
|
|
fontSize: 18,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
templateField: "columnSettings",
|
|
});
|
|
|
|
yRenderer.grid.template.setAll({
|
|
forceHidden: true,
|
|
});
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
categoryField: "category",
|
|
renderer: yRenderer,
|
|
})
|
|
);
|
|
|
|
yAxis.data.setAll(data);
|
|
|
|
// Create series
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
|
|
var series1 = chart.series.push(
|
|
am5radar.RadarColumnSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
clustered: false,
|
|
valueXField: "full",
|
|
categoryYField: "category",
|
|
fill: root.interfaceColors.get("alternativeBackground"),
|
|
})
|
|
);
|
|
|
|
series1.columns.template.setAll({
|
|
width: am5.p100,
|
|
fillOpacity: 0.08,
|
|
strokeOpacity: 0,
|
|
cornerRadius: 20,
|
|
});
|
|
|
|
series1.data.setAll(data);
|
|
|
|
var series2 = chart.series.push(
|
|
am5radar.RadarColumnSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
clustered: false,
|
|
valueXField: "value",
|
|
categoryYField: "category",
|
|
})
|
|
);
|
|
|
|
series2.columns.template.setAll({
|
|
width: am5.p100,
|
|
strokeOpacity: 0,
|
|
tooltipText: "{category}: {valueX}%",
|
|
cornerRadius: 20,
|
|
templateField: "columnSettings",
|
|
});
|
|
|
|
series2.data.setAll(data);
|
|
|
|
// Animate chart and series in
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
|
|
series1.appear(1000);
|
|
series2.appear(1000);
|
|
chart.appear(1000, 100);
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget14;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget14.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget15 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_15_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/
|
|
var chart = root.container.children.push(
|
|
am5xy.XYChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
//wheelX: "panX",
|
|
//wheelY: "zoomX",
|
|
layout: root.verticalLayout,
|
|
})
|
|
);
|
|
|
|
// Data
|
|
var colors = chart.get("colors");
|
|
|
|
var data = [
|
|
{
|
|
country: "US",
|
|
visits: 725,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/united-states.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
country: "UK",
|
|
visits: 625,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/united-kingdom.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
country: "China",
|
|
visits: 602,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/china.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
country: "Japan",
|
|
visits: 509,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/japan.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
country: "Germany",
|
|
visits: 322,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/germany.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
country: "France",
|
|
visits: 214,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/france.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
country: "India",
|
|
visits: 204,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/india.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
country: "Spain",
|
|
visits: 200,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/spain.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
country: "Italy",
|
|
visits: 165,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/italy.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
country: "Russia",
|
|
visits: 152,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/russia.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
country: "Norway",
|
|
visits: 125,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/norway.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
country: "Canada",
|
|
visits: 99,
|
|
icon: "https://www.amcharts.com/wp-content/uploads/flags/canada.svg",
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
];
|
|
|
|
// Create axes
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
categoryField: "country",
|
|
renderer: am5xy.AxisRendererX.new(root, {
|
|
minGridDistance: 30,
|
|
}),
|
|
bullet: function (root, axis, dataItem) {
|
|
return am5xy.AxisBullet.new(root, {
|
|
location: 0.5,
|
|
sprite: am5.Picture.new(root, {
|
|
width: 24,
|
|
height: 24,
|
|
centerY: am5.p50,
|
|
centerX: am5.p50,
|
|
src: dataItem.dataContext.icon,
|
|
}),
|
|
});
|
|
},
|
|
})
|
|
);
|
|
|
|
xAxis.get("renderer").labels.template.setAll({
|
|
paddingTop: 20,
|
|
fontWeight: "400",
|
|
fontSize: 10,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
xAxis.get("renderer").grid.template.setAll({
|
|
disabled: true,
|
|
strokeOpacity: 0,
|
|
});
|
|
|
|
xAxis.data.setAll(data);
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
renderer: am5xy.AxisRendererY.new(root, {}),
|
|
})
|
|
);
|
|
|
|
yAxis.get("renderer").grid.template.setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")),
|
|
strokeWidth: 1,
|
|
strokeOpacity: 1,
|
|
strokeDasharray: [3],
|
|
});
|
|
|
|
yAxis.get("renderer").labels.template.setAll({
|
|
fontWeight: "400",
|
|
fontSize: 10,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
// Add series
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
|
|
var series = chart.series.push(
|
|
am5xy.ColumnSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "visits",
|
|
categoryXField: "country",
|
|
})
|
|
);
|
|
|
|
series.columns.template.setAll({
|
|
tooltipText: "{categoryX}: {valueY}",
|
|
tooltipY: 0,
|
|
strokeOpacity: 0,
|
|
templateField: "columnSettings",
|
|
});
|
|
|
|
series.columns.template.setAll({
|
|
strokeOpacity: 0,
|
|
cornerRadiusBR: 0,
|
|
cornerRadiusTR: 6,
|
|
cornerRadiusBL: 0,
|
|
cornerRadiusTL: 6,
|
|
});
|
|
|
|
series.data.setAll(data);
|
|
|
|
// Make stuff animate on load
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/
|
|
series.appear();
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
am5.ready(function () {
|
|
init();
|
|
});
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget15;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget15.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget16 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_16_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/
|
|
var chart = root.container.children.push(
|
|
am5xy.XYChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
wheelX: "panX",
|
|
wheelY: "zoomX",
|
|
layout: root.verticalLayout,
|
|
})
|
|
);
|
|
|
|
var colors = chart.get("colors");
|
|
|
|
var data = [
|
|
{
|
|
country: "US",
|
|
visits: 725,
|
|
},
|
|
{
|
|
country: "UK",
|
|
visits: 625,
|
|
},
|
|
{
|
|
country: "China",
|
|
visits: 602,
|
|
},
|
|
{
|
|
country: "Japan",
|
|
visits: 509,
|
|
},
|
|
{
|
|
country: "Germany",
|
|
visits: 322,
|
|
},
|
|
{
|
|
country: "France",
|
|
visits: 214,
|
|
},
|
|
{
|
|
country: "India",
|
|
visits: 204,
|
|
},
|
|
{
|
|
country: "Spain",
|
|
visits: 198,
|
|
},
|
|
{
|
|
country: "Italy",
|
|
visits: 165,
|
|
},
|
|
{
|
|
country: "Russia",
|
|
visits: 130,
|
|
},
|
|
{
|
|
country: "Norway",
|
|
visits: 93,
|
|
},
|
|
{
|
|
country: "Canada",
|
|
visits: 41,
|
|
},
|
|
];
|
|
|
|
prepareParetoData();
|
|
|
|
function prepareParetoData() {
|
|
var total = 0;
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
var value = data[i].visits;
|
|
total += value;
|
|
}
|
|
|
|
var sum = 0;
|
|
for (var i = 0; i < data.length; i++) {
|
|
var value = data[i].visits;
|
|
sum += value;
|
|
data[i].pareto = (sum / total) * 100;
|
|
}
|
|
}
|
|
|
|
// Create axes
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
categoryField: "country",
|
|
renderer: am5xy.AxisRendererX.new(root, {
|
|
minGridDistance: 30,
|
|
}),
|
|
})
|
|
);
|
|
|
|
xAxis.get("renderer").labels.template.setAll({
|
|
paddingTop: 10,
|
|
fontWeight: "400",
|
|
fontSize: 13,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
xAxis.get("renderer").grid.template.setAll({
|
|
disabled: true,
|
|
strokeOpacity: 0,
|
|
});
|
|
|
|
xAxis.data.setAll(data);
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
renderer: am5xy.AxisRendererY.new(root, {}),
|
|
})
|
|
);
|
|
|
|
yAxis.get("renderer").labels.template.setAll({
|
|
paddingLeft: 10,
|
|
fontWeight: "400",
|
|
fontSize: 13,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
yAxis.get("renderer").grid.template.setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")),
|
|
strokeWidth: 1,
|
|
strokeOpacity: 1,
|
|
strokeDasharray: [3],
|
|
});
|
|
|
|
var paretoAxisRenderer = am5xy.AxisRendererY.new(root, {
|
|
opposite: true,
|
|
});
|
|
|
|
var paretoAxis = chart.yAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
renderer: paretoAxisRenderer,
|
|
min: 0,
|
|
max: 100,
|
|
strictMinMax: true,
|
|
})
|
|
);
|
|
|
|
paretoAxis.get("renderer").labels.template.setAll({
|
|
fontWeight: "400",
|
|
fontSize: 13,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
paretoAxisRenderer.grid.template.set("forceHidden", true);
|
|
paretoAxis.set("numberFormat", "#'%");
|
|
|
|
// Add series
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
|
|
var series = chart.series.push(
|
|
am5xy.ColumnSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "visits",
|
|
categoryXField: "country",
|
|
})
|
|
);
|
|
|
|
series.columns.template.setAll({
|
|
tooltipText: "{categoryX}: {valueY}",
|
|
tooltipY: 0,
|
|
strokeOpacity: 0,
|
|
cornerRadiusTL: 6,
|
|
cornerRadiusTR: 6,
|
|
});
|
|
|
|
series.columns.template.adapters.add(
|
|
"fill",
|
|
function (fill, target) {
|
|
return chart
|
|
.get("colors")
|
|
.getIndex(series.dataItems.indexOf(target.dataItem));
|
|
}
|
|
);
|
|
|
|
// pareto series
|
|
var paretoSeries = chart.series.push(
|
|
am5xy.LineSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: paretoAxis,
|
|
valueYField: "pareto",
|
|
categoryXField: "country",
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-dark")),
|
|
maskBullets: false,
|
|
})
|
|
);
|
|
|
|
paretoSeries.bullets.push(function () {
|
|
return am5.Bullet.new(root, {
|
|
locationY: 1,
|
|
sprite: am5.Circle.new(root, {
|
|
radius: 5,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
stroke: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-dark")
|
|
),
|
|
}),
|
|
});
|
|
});
|
|
|
|
series.data.setAll(data);
|
|
paretoSeries.data.setAll(data);
|
|
|
|
// Make stuff animate on load
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/
|
|
series.appear();
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
am5.ready(function () {
|
|
init();
|
|
});
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget16;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget16.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget17 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_17_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
|
|
// start and end angle must be set both for chart and series
|
|
var chart = root.container.children.push(
|
|
am5percent.PieChart.new(root, {
|
|
startAngle: 180,
|
|
endAngle: 360,
|
|
layout: root.verticalLayout,
|
|
innerRadius: am5.percent(50),
|
|
})
|
|
);
|
|
|
|
// Create series
|
|
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
|
|
// start and end angle must be set both for chart and series
|
|
var series = chart.series.push(
|
|
am5percent.PieSeries.new(root, {
|
|
startAngle: 180,
|
|
endAngle: 360,
|
|
valueField: "value",
|
|
categoryField: "category",
|
|
alignLabels: false,
|
|
})
|
|
);
|
|
|
|
series.labels.template.setAll({
|
|
fontWeight: "400",
|
|
fontSize: 13,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
series.states.create("hidden", {
|
|
startAngle: 180,
|
|
endAngle: 180,
|
|
});
|
|
|
|
series.slices.template.setAll({
|
|
cornerRadius: 5,
|
|
});
|
|
|
|
series.ticks.template.setAll({
|
|
forceHidden: true,
|
|
});
|
|
|
|
// Set data
|
|
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
|
|
series.data.setAll([
|
|
{
|
|
value: 10,
|
|
category: "One",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
},
|
|
{
|
|
value: 9,
|
|
category: "Two",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
},
|
|
{
|
|
value: 6,
|
|
category: "Three",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-danger")),
|
|
},
|
|
{
|
|
value: 5,
|
|
category: "Four",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-warning")),
|
|
},
|
|
{
|
|
value: 4,
|
|
category: "Five",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-info")),
|
|
},
|
|
{
|
|
value: 3,
|
|
category: "Six",
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-secondary")
|
|
),
|
|
},
|
|
]);
|
|
|
|
series.appear(1000, 100);
|
|
};
|
|
|
|
am5.ready(function () {
|
|
init();
|
|
});
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget17;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget17.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget18 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_charts_widget_18_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-900");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Spent time",
|
|
data: [54, 42, 75, 110, 23, 87, 50],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: ["28%"],
|
|
borderRadius: 5,
|
|
dataLabels: {
|
|
position: "top", // top, center, bottom
|
|
},
|
|
startingShape: "flat",
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
offsetY: -28,
|
|
style: {
|
|
fontSize: "13px",
|
|
colors: [labelColor],
|
|
},
|
|
formatter: function (val) {
|
|
return val; // + "H";
|
|
},
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ["transparent"],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"QA Analysis",
|
|
"Marketing",
|
|
"Web Dev",
|
|
"Maths",
|
|
"Front-end Dev",
|
|
"Physics",
|
|
"Phylosophy",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
fill: {
|
|
gradient: {
|
|
opacityFrom: 0,
|
|
opacityTo: 0,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
formatter: function (val) {
|
|
return val + "H";
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return +val + " hours";
|
|
},
|
|
},
|
|
},
|
|
colors: [
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
KTUtil.getCssVariableValue("--bs-primary-light"),
|
|
],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget18;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget18.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget19 = (function () {
|
|
// Private methods
|
|
var initChart1 = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_19_chart_1");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/
|
|
var chart = root.container.children.push(
|
|
am5radar.RadarChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
wheelX: "panX",
|
|
wheelY: "zoomX",
|
|
innerRadius: am5.percent(20),
|
|
startAngle: -90,
|
|
endAngle: 180,
|
|
})
|
|
);
|
|
|
|
// Data
|
|
var data = [
|
|
{
|
|
category: "Research",
|
|
value: 80,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-info")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
category: "Marketing",
|
|
value: 35,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-danger")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
category: "Distribution",
|
|
value: 92,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
category: "Human Resources",
|
|
value: 68,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-success")
|
|
),
|
|
},
|
|
},
|
|
];
|
|
|
|
// Add cursor
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
|
|
var cursor = chart.set(
|
|
"cursor",
|
|
am5radar.RadarCursor.new(root, {
|
|
behavior: "zoomX",
|
|
})
|
|
);
|
|
|
|
cursor.lineY.set("visible", false);
|
|
|
|
// Create axes and their renderers
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
|
|
var xRenderer = am5radar.AxisRendererCircular.new(root, {
|
|
//minGridDistance: 50
|
|
});
|
|
|
|
xRenderer.labels.template.setAll({
|
|
radius: 10,
|
|
});
|
|
|
|
xRenderer.grid.template.setAll({
|
|
forceHidden: true,
|
|
});
|
|
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
renderer: xRenderer,
|
|
min: 0,
|
|
max: 100,
|
|
strictMinMax: true,
|
|
numberFormat: "#'%'",
|
|
tooltip: am5.Tooltip.new(root, {}),
|
|
})
|
|
);
|
|
|
|
xAxis.get("renderer").labels.template.setAll({
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
fontWeight: "500",
|
|
fontSize: 16,
|
|
});
|
|
|
|
var yRenderer = am5radar.AxisRendererRadial.new(root, {
|
|
minGridDistance: 20,
|
|
});
|
|
|
|
yRenderer.labels.template.setAll({
|
|
centerX: am5.p100,
|
|
fontWeight: "500",
|
|
fontSize: 18,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
templateField: "columnSettings",
|
|
});
|
|
|
|
yRenderer.grid.template.setAll({
|
|
forceHidden: true,
|
|
});
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
categoryField: "category",
|
|
renderer: yRenderer,
|
|
})
|
|
);
|
|
|
|
yAxis.data.setAll(data);
|
|
|
|
// Create series
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
|
|
var series1 = chart.series.push(
|
|
am5radar.RadarColumnSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
clustered: false,
|
|
valueXField: "full",
|
|
categoryYField: "category",
|
|
fill: root.interfaceColors.get("alternativeBackground"),
|
|
})
|
|
);
|
|
|
|
series1.columns.template.setAll({
|
|
width: am5.p100,
|
|
fillOpacity: 0.08,
|
|
strokeOpacity: 0,
|
|
cornerRadius: 20,
|
|
});
|
|
|
|
series1.data.setAll(data);
|
|
|
|
var series2 = chart.series.push(
|
|
am5radar.RadarColumnSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
clustered: false,
|
|
valueXField: "value",
|
|
categoryYField: "category",
|
|
})
|
|
);
|
|
|
|
series2.columns.template.setAll({
|
|
width: am5.p100,
|
|
strokeOpacity: 0,
|
|
tooltipText: "{category}: {valueX}%",
|
|
cornerRadius: 20,
|
|
templateField: "columnSettings",
|
|
});
|
|
|
|
series2.data.setAll(data);
|
|
|
|
// Animate chart and series in
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
|
|
series1.appear(1000);
|
|
series2.appear(1000);
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
am5.ready(function () {
|
|
init();
|
|
});
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
var initChart2 = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_19_chart_2");
|
|
|
|
var root;
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/
|
|
var chart = root.container.children.push(
|
|
am5radar.RadarChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
wheelX: "panX",
|
|
wheelY: "zoomX",
|
|
innerRadius: am5.percent(20),
|
|
startAngle: -90,
|
|
endAngle: 180,
|
|
})
|
|
);
|
|
|
|
// Data
|
|
var data = [
|
|
{
|
|
category: "Research",
|
|
value: 40,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-info")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
category: "Marketing",
|
|
value: 50,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-danger")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
category: "Distribution",
|
|
value: 80,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
category: "Human Resources",
|
|
value: 70,
|
|
full: 100,
|
|
columnSettings: {
|
|
fillOpacity: 1,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-success")
|
|
),
|
|
},
|
|
},
|
|
];
|
|
|
|
// Add cursor
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Cursor
|
|
var cursor = chart.set(
|
|
"cursor",
|
|
am5radar.RadarCursor.new(root, {
|
|
behavior: "zoomX",
|
|
})
|
|
);
|
|
|
|
cursor.lineY.set("visible", false);
|
|
|
|
// Create axes and their renderers
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
|
|
var xRenderer = am5radar.AxisRendererCircular.new(root, {
|
|
//minGridDistance: 50
|
|
});
|
|
|
|
xRenderer.labels.template.setAll({
|
|
radius: 10,
|
|
});
|
|
|
|
xRenderer.grid.template.setAll({
|
|
forceHidden: true,
|
|
});
|
|
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
renderer: xRenderer,
|
|
min: 0,
|
|
max: 100,
|
|
strictMinMax: true,
|
|
numberFormat: "#'%'",
|
|
tooltip: am5.Tooltip.new(root, {}),
|
|
})
|
|
);
|
|
|
|
var yRenderer = am5radar.AxisRendererRadial.new(root, {
|
|
minGridDistance: 20,
|
|
});
|
|
|
|
yRenderer.labels.template.setAll({
|
|
centerX: am5.p100,
|
|
fontWeight: "500",
|
|
fontSize: 18,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
templateField: "columnSettings",
|
|
});
|
|
|
|
yRenderer.grid.template.setAll({
|
|
forceHidden: true,
|
|
});
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
categoryField: "category",
|
|
renderer: yRenderer,
|
|
})
|
|
);
|
|
|
|
yAxis.data.setAll(data);
|
|
|
|
// Create series
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
|
|
var series1 = chart.series.push(
|
|
am5radar.RadarColumnSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
clustered: false,
|
|
valueXField: "full",
|
|
categoryYField: "category",
|
|
fill: root.interfaceColors.get("alternativeBackground"),
|
|
})
|
|
);
|
|
|
|
series1.columns.template.setAll({
|
|
width: am5.p100,
|
|
fillOpacity: 0.08,
|
|
strokeOpacity: 0,
|
|
cornerRadius: 20,
|
|
});
|
|
|
|
series1.data.setAll(data);
|
|
|
|
var series2 = chart.series.push(
|
|
am5radar.RadarColumnSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
clustered: false,
|
|
valueXField: "value",
|
|
categoryYField: "category",
|
|
})
|
|
);
|
|
|
|
series2.columns.template.setAll({
|
|
width: am5.p100,
|
|
strokeOpacity: 0,
|
|
tooltipText: "{category}: {valueX}%",
|
|
cornerRadius: 20,
|
|
templateField: "columnSettings",
|
|
});
|
|
|
|
series2.data.setAll(data);
|
|
|
|
// Animate chart and series in
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
|
|
series1.appear(1000);
|
|
series2.appear(1000);
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
am5.ready(function () {
|
|
init();
|
|
});
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart1();
|
|
initChart2();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget19;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget19.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget2 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_charts_widget_2");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
var strokeColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-" + color + "-light");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Overview",
|
|
data: [15, 15, 45, 45, 25, 25, 55, 55, 20, 20, 37],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"Feb",
|
|
"Mar",
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
"Oct",
|
|
"Nov",
|
|
"Dec",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
show: false,
|
|
position: "front",
|
|
stroke: {
|
|
color: strokeColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 60,
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val;
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
markers: {
|
|
colors: lightColor,
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart();
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget2;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget2.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget20 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_charts_widget_20");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-danger");
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-danger");
|
|
var chartInfo = element.getAttribute("data-kt-chart-info");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: chartInfo,
|
|
data: [
|
|
34.5, 34.5, 35, 35, 35.5, 35.5, 35, 35, 35.5, 35.5, 35,
|
|
35, 34.5, 34.5, 35, 35, 35.4, 35.4, 35,
|
|
],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0,
|
|
stops: [0, 80, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"",
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 07",
|
|
"Apr 08",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 11",
|
|
"Apr 12",
|
|
"Apr 13",
|
|
"Apr 14",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"Apr 19",
|
|
"Apr 21",
|
|
"",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
tickAmount: 6,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: true,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
max: 36.3,
|
|
min: 33,
|
|
tickAmount: 6,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
formatter: function (val) {
|
|
return "$" + parseInt(10 * val);
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$" + parseInt(10 * val);
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget20;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget20.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget21 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_charts_widget_21");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var options = {
|
|
type: "serial",
|
|
theme: "light",
|
|
legend: {
|
|
equalWidths: false,
|
|
useGraphSettings: true,
|
|
valueAlign: "left",
|
|
valueWidth: 120,
|
|
},
|
|
dataProvider: [
|
|
{
|
|
date: "2012-01-01",
|
|
distance: 227,
|
|
townName: "New York",
|
|
townName2: "New York",
|
|
townSize: 25,
|
|
latitude: 40.71,
|
|
duration: 408,
|
|
},
|
|
{
|
|
date: "2012-01-02",
|
|
distance: 371,
|
|
townName: "Washington",
|
|
townSize: 14,
|
|
latitude: 38.89,
|
|
duration: 482,
|
|
},
|
|
{
|
|
date: "2012-01-03",
|
|
distance: 433,
|
|
townName: "Wilmington",
|
|
townSize: 6,
|
|
latitude: 34.22,
|
|
duration: 562,
|
|
},
|
|
{
|
|
date: "2012-01-04",
|
|
distance: 345,
|
|
townName: "Jacksonville",
|
|
townSize: 7,
|
|
latitude: 30.35,
|
|
duration: 379,
|
|
},
|
|
{
|
|
date: "2012-01-05",
|
|
distance: 480,
|
|
townName: "Miami",
|
|
townName2: "Miami",
|
|
townSize: 10,
|
|
latitude: 25.83,
|
|
duration: 501,
|
|
},
|
|
{
|
|
date: "2012-01-06",
|
|
distance: 386,
|
|
townName: "Tallahassee",
|
|
townSize: 7,
|
|
latitude: 30.46,
|
|
duration: 443,
|
|
},
|
|
{
|
|
date: "2012-01-07",
|
|
distance: 348,
|
|
townName: "New Orleans",
|
|
townSize: 10,
|
|
latitude: 29.94,
|
|
duration: 405,
|
|
},
|
|
{
|
|
date: "2012-01-08",
|
|
distance: 238,
|
|
townName: "Houston",
|
|
townName2: "Houston",
|
|
townSize: 16,
|
|
latitude: 29.76,
|
|
duration: 309,
|
|
},
|
|
{
|
|
date: "2012-01-09",
|
|
distance: 218,
|
|
townName: "Dalas",
|
|
townSize: 17,
|
|
latitude: 32.8,
|
|
duration: 287,
|
|
},
|
|
{
|
|
date: "2012-01-10",
|
|
distance: 349,
|
|
townName: "Oklahoma City",
|
|
townSize: 11,
|
|
latitude: 35.49,
|
|
duration: 485,
|
|
},
|
|
{
|
|
date: "2012-01-11",
|
|
distance: 603,
|
|
townName: "Kansas City",
|
|
townSize: 10,
|
|
latitude: 39.1,
|
|
duration: 890,
|
|
},
|
|
{
|
|
date: "2012-01-12",
|
|
distance: 534,
|
|
townName: "Denver",
|
|
townName2: "Denver",
|
|
townSize: 18,
|
|
latitude: 39.74,
|
|
duration: 810,
|
|
},
|
|
{
|
|
date: "2012-01-13",
|
|
townName: "Salt Lake City",
|
|
townSize: 12,
|
|
distance: 425,
|
|
duration: 670,
|
|
latitude: 40.75,
|
|
dashLength: 8,
|
|
alpha: 0.4,
|
|
},
|
|
{
|
|
date: "2012-01-14",
|
|
latitude: 36.1,
|
|
duration: 470,
|
|
townName: "Las Vegas",
|
|
townName2: "Las Vegas",
|
|
},
|
|
{
|
|
date: "2012-01-15",
|
|
},
|
|
{
|
|
date: "2012-01-16",
|
|
},
|
|
{
|
|
date: "2012-01-17",
|
|
},
|
|
{
|
|
date: "2012-01-18",
|
|
},
|
|
{
|
|
date: "2012-01-19",
|
|
},
|
|
],
|
|
valueAxes: [
|
|
{
|
|
id: "distanceAxis",
|
|
axisAlpha: 0,
|
|
gridAlpha: 0,
|
|
position: "left",
|
|
title: "distance",
|
|
},
|
|
{
|
|
id: "latitudeAxis",
|
|
axisAlpha: 0,
|
|
gridAlpha: 0,
|
|
labelsEnabled: false,
|
|
position: "right",
|
|
},
|
|
{
|
|
id: "durationAxis",
|
|
duration: "mm",
|
|
durationUnits: {
|
|
hh: "h ",
|
|
mm: "min",
|
|
},
|
|
axisAlpha: 0,
|
|
gridAlpha: 0,
|
|
inside: true,
|
|
position: "right",
|
|
title: "duration",
|
|
},
|
|
],
|
|
graphs: [
|
|
{
|
|
alphaField: "alpha",
|
|
balloonText: "[[value]] miles",
|
|
dashLengthField: "dashLength",
|
|
fillAlphas: 0.7,
|
|
legendPeriodValueText: "total: [[value.sum]] mi",
|
|
legendValueText: "[[value]] mi",
|
|
title: "distance",
|
|
type: "column",
|
|
valueField: "distance",
|
|
valueAxis: "distanceAxis",
|
|
},
|
|
{
|
|
balloonText: "latitude:[[value]]",
|
|
bullet: "round",
|
|
bulletBorderAlpha: 1,
|
|
useLineColorForBulletBorder: true,
|
|
bulletColor: "#FFFFFF",
|
|
bulletSizeField: "townSize",
|
|
dashLengthField: "dashLength",
|
|
descriptionField: "townName",
|
|
labelPosition: "right",
|
|
labelText: "[[townName2]]",
|
|
legendValueText: "[[value]]/[[description]]",
|
|
title: "latitude/city",
|
|
fillAlphas: 0,
|
|
valueField: "latitude",
|
|
valueAxis: "latitudeAxis",
|
|
},
|
|
{
|
|
bullet: "square",
|
|
bulletBorderAlpha: 1,
|
|
bulletBorderThickness: 1,
|
|
dashLengthField: "dashLength",
|
|
legendValueText: "[[value]]",
|
|
title: "duration",
|
|
fillAlphas: 0,
|
|
valueField: "duration",
|
|
valueAxis: "durationAxis",
|
|
},
|
|
],
|
|
chartCursor: {
|
|
categoryBalloonDateFormat: "DD",
|
|
cursorAlpha: 0.1,
|
|
cursorColor: "#000000",
|
|
fullWidth: true,
|
|
valueBalloonsEnabled: false,
|
|
zoomable: false,
|
|
},
|
|
dataDateFormat: "YYYY-MM-DD",
|
|
categoryField: "date",
|
|
categoryAxis: {
|
|
dateFormats: [
|
|
{
|
|
period: "DD",
|
|
format: "DD",
|
|
},
|
|
{
|
|
period: "WW",
|
|
format: "MMM DD",
|
|
},
|
|
{
|
|
period: "MM",
|
|
format: "MMM",
|
|
},
|
|
{
|
|
period: "YYYY",
|
|
format: "YYYY",
|
|
},
|
|
],
|
|
parseDates: true,
|
|
autoGridCount: false,
|
|
axisColor: "#555555",
|
|
gridAlpha: 0.1,
|
|
gridColor: "#FFFFFF",
|
|
gridCount: 50,
|
|
},
|
|
export: {
|
|
enabled: true,
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.render();
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget21;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget21.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget22 = (function () {
|
|
// Private methods
|
|
var initChart = function (tabSelector, chartSelector, data, initByDefault) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
|
|
var options = {
|
|
series: data,
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "donut",
|
|
width: 250,
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
size: "50%",
|
|
labels: {
|
|
value: {
|
|
fontSize: "10px",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
colors: [
|
|
KTUtil.getCssVariableValue("--bs-info"),
|
|
KTUtil.getCssVariableValue("--bs-success"),
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
KTUtil.getCssVariableValue("--bs-danger"),
|
|
],
|
|
stroke: {
|
|
width: 0,
|
|
},
|
|
labels: ["Sales", "Sales", "Sales", "Sales"],
|
|
legend: {
|
|
show: false,
|
|
},
|
|
fill: {
|
|
type: "false",
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(element, options);
|
|
|
|
var init = false;
|
|
|
|
var tab = document.querySelector(tabSelector);
|
|
|
|
if (initByDefault === true) {
|
|
chart.render();
|
|
init = true;
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (init == false) {
|
|
chart.render();
|
|
init = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(
|
|
"#kt_chart_widgets_22_tab_1",
|
|
"#kt_chart_widgets_22_chart_1",
|
|
[20, 100, 15, 25],
|
|
true
|
|
);
|
|
initChart(
|
|
"#kt_chart_widgets_22_tab_2",
|
|
"#kt_chart_widgets_22_chart_2",
|
|
[70, 13, 11, 2],
|
|
false
|
|
);
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget22;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget22.init();
|
|
});
|
|
// Class definition
|
|
var KTChartsWidget23 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_23");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/
|
|
var chart = root.container.children.push(
|
|
am5xy.XYChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
layout: root.verticalLayout,
|
|
})
|
|
);
|
|
|
|
var data = [
|
|
{
|
|
year: "2016",
|
|
income: 23.5,
|
|
expenses: 21.1,
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
year: "2017",
|
|
income: 26.2,
|
|
expenses: 30.5,
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
year: "2018",
|
|
income: 30.1,
|
|
expenses: 34.9,
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
year: "2019",
|
|
income: 29.5,
|
|
expenses: 31.1,
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
year: "2020",
|
|
income: 30.6,
|
|
expenses: 28.2,
|
|
strokeSettings: {
|
|
strokeWidth: 3,
|
|
strokeDasharray: [5, 5],
|
|
},
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
year: "2021",
|
|
income: 40.6,
|
|
expenses: 28.2,
|
|
strokeSettings: {
|
|
strokeWidth: 3,
|
|
strokeDasharray: [5, 5],
|
|
},
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
{
|
|
year: "2022",
|
|
income: 34.1,
|
|
expenses: 32.9,
|
|
strokeSettings: {
|
|
strokeWidth: 3,
|
|
strokeDasharray: [5, 5],
|
|
},
|
|
columnSettings: {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-primary")
|
|
),
|
|
},
|
|
},
|
|
];
|
|
|
|
// Create axes
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
categoryField: "year",
|
|
renderer: am5xy.AxisRendererX.new(root, {}),
|
|
//tooltip: am5.Tooltip.new(root, {}),
|
|
})
|
|
);
|
|
|
|
xAxis.data.setAll(data);
|
|
|
|
xAxis.get("renderer").labels.template.setAll({
|
|
paddingTop: 20,
|
|
fontWeight: "400",
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
xAxis.get("renderer").grid.template.setAll({
|
|
disabled: true,
|
|
strokeOpacity: 0,
|
|
});
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
min: 0,
|
|
extraMax: 0.1,
|
|
renderer: am5xy.AxisRendererY.new(root, {}),
|
|
})
|
|
);
|
|
|
|
yAxis.get("renderer").labels.template.setAll({
|
|
paddingTop: 0,
|
|
fontWeight: "400",
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
yAxis.get("renderer").grid.template.setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")),
|
|
strokeWidth: 1,
|
|
strokeOpacity: 1,
|
|
strokeDasharray: [3],
|
|
});
|
|
|
|
// Add series
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
|
|
var series1 = chart.series.push(
|
|
am5xy.ColumnSeries.new(root, {
|
|
name: "Income",
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "income",
|
|
categoryXField: "year",
|
|
tooltip: am5.Tooltip.new(root, {
|
|
pointerOrientation: "horizontal",
|
|
labelText: "{name} in {categoryX}: {valueY} {info}",
|
|
}),
|
|
})
|
|
);
|
|
|
|
series1.columns.template.setAll({
|
|
tooltipY: am5.percent(10),
|
|
templateField: "columnSettings",
|
|
});
|
|
|
|
series1.data.setAll(data);
|
|
|
|
var series2 = chart.series.push(
|
|
am5xy.LineSeries.new(root, {
|
|
name: "Expenses",
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "expenses",
|
|
categoryXField: "year",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
stroke: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-success")
|
|
),
|
|
tooltip: am5.Tooltip.new(root, {
|
|
pointerOrientation: "horizontal",
|
|
labelText: "{name} in {categoryX}: {valueY} {info}",
|
|
}),
|
|
})
|
|
);
|
|
|
|
series2.strokes.template.setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
});
|
|
|
|
series2.strokes.template.setAll({
|
|
strokeWidth: 3,
|
|
templateField: "strokeSettings",
|
|
});
|
|
|
|
series2.data.setAll(data);
|
|
|
|
series2.bullets.push(function () {
|
|
return am5.Bullet.new(root, {
|
|
sprite: am5.Circle.new(root, {
|
|
strokeWidth: 3,
|
|
stroke: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-success")
|
|
),
|
|
radius: 5,
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-success-light")
|
|
),
|
|
}),
|
|
});
|
|
});
|
|
|
|
series1.columns.template.setAll({
|
|
strokeOpacity: 0,
|
|
cornerRadiusBR: 0,
|
|
cornerRadiusTR: 6,
|
|
cornerRadiusBL: 0,
|
|
cornerRadiusTL: 6,
|
|
});
|
|
|
|
chart.set("cursor", am5xy.XYCursor.new(root, {}));
|
|
|
|
chart.get("cursor").lineX.setAll({ visible: false });
|
|
chart.get("cursor").lineY.setAll({ visible: false });
|
|
|
|
// Add legend
|
|
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
|
|
var legend = chart.children.push(
|
|
am5.Legend.new(root, {
|
|
centerX: am5.p50,
|
|
x: am5.p50,
|
|
})
|
|
);
|
|
legend.data.setAll(chart.series.values);
|
|
|
|
legend.labels.template.setAll({
|
|
fontWeight: "600",
|
|
fontSize: 14,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
// Make stuff animate on load
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/
|
|
chart.appear(1000, 100);
|
|
series1.appear();
|
|
};
|
|
|
|
am5.ready(function () {
|
|
init();
|
|
}); // end am5.ready()
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget23;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget23.init();
|
|
});
|
|
|
|
// Class definition
|
|
var KTChartsWidget24 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_24");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
var usData = [
|
|
{
|
|
age: "0 to 5",
|
|
male: 10175713,
|
|
female: 9736305,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 10470147,
|
|
female: 10031835,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 10561873,
|
|
female: 10117913,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 6447043,
|
|
female: 6142996,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 9349745,
|
|
female: 8874664,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 6722248,
|
|
female: 6422017,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 10989596,
|
|
female: 10708414,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 10625791,
|
|
female: 10557848,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 9899569,
|
|
female: 9956213,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 10330986,
|
|
female: 10465142,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 10571984,
|
|
female: 10798384,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 11051409,
|
|
female: 11474081,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 10173646,
|
|
female: 10828301,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 8824852,
|
|
female: 9590829,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 6876271,
|
|
female: 7671175,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 4867513,
|
|
female: 5720208,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 3416432,
|
|
female: 4313697,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 2378691,
|
|
female: 3432738,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 2000771,
|
|
female: 3937981,
|
|
},
|
|
];
|
|
|
|
var stateData = {
|
|
AK: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 28346,
|
|
female: 26607,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 26350,
|
|
female: 24821,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 15929,
|
|
female: 14735,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 25360,
|
|
female: 19030,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 20755,
|
|
female: 15663,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 32415,
|
|
female: 28259,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 28232,
|
|
female: 25272,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 24217,
|
|
female: 22002,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 23429,
|
|
female: 21968,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 24764,
|
|
female: 22784,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 26276,
|
|
female: 25063,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 27623,
|
|
female: 25503,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 26300,
|
|
female: 25198,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 21798,
|
|
female: 18970,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 13758,
|
|
female: 12899,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 8877,
|
|
female: 8269,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 4834,
|
|
female: 4894,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 3015,
|
|
female: 3758,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 1882,
|
|
female: 3520,
|
|
},
|
|
],
|
|
AL: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 150860,
|
|
female: 144194,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 161596,
|
|
female: 156841,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 98307,
|
|
female: 94462,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 142173,
|
|
female: 136514,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 99164,
|
|
female: 101444,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 154977,
|
|
female: 159815,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 150036,
|
|
female: 156764,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 141667,
|
|
female: 152220,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 155693,
|
|
female: 159835,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 156413,
|
|
female: 163909,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 156380,
|
|
female: 149334,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 166863,
|
|
female: 178187,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 156994,
|
|
female: 169355,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 140659,
|
|
female: 156638,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 112724,
|
|
female: 128494,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 79258,
|
|
female: 96507,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 55122,
|
|
female: 75371,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 36252,
|
|
female: 53976,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 25955,
|
|
female: 55667,
|
|
},
|
|
],
|
|
AR: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 98246,
|
|
female: 93534,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 99707,
|
|
female: 96862,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 60521,
|
|
female: 57735,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 87209,
|
|
female: 81936,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 59114,
|
|
female: 59387,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 96190,
|
|
female: 96573,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 96273,
|
|
female: 95632,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 90371,
|
|
female: 90620,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 91881,
|
|
female: 93777,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 93238,
|
|
female: 95476,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 103613,
|
|
female: 97603,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 98960,
|
|
female: 102953,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 92133,
|
|
female: 100676,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 84082,
|
|
female: 90243,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 70121,
|
|
female: 76669,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 52154,
|
|
female: 61686,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 36856,
|
|
female: 44371,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 23098,
|
|
female: 35328,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 18146,
|
|
female: 35234,
|
|
},
|
|
],
|
|
AZ: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 221511,
|
|
female: 212324,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 233530,
|
|
female: 222965,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 138926,
|
|
female: 132399,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 200240,
|
|
female: 187786,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 142852,
|
|
female: 132457,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 231488,
|
|
female: 215985,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 223754,
|
|
female: 214946,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 206718,
|
|
female: 202482,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 213591,
|
|
female: 210621,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 205830,
|
|
female: 206081,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 231249,
|
|
female: 224385,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 210386,
|
|
female: 218328,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 192614,
|
|
female: 209767,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 178325,
|
|
female: 200313,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 155852,
|
|
female: 174407,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 121878,
|
|
female: 136840,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 87470,
|
|
female: 96953,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 58553,
|
|
female: 69559,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 44321,
|
|
female: 74242,
|
|
},
|
|
],
|
|
CA: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 1283763,
|
|
female: 1228013,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 1297819,
|
|
female: 1245016,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 811114,
|
|
female: 773387,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 1179739,
|
|
female: 1100368,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 883323,
|
|
female: 825833,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 1478557,
|
|
female: 1387516,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 1399835,
|
|
female: 1348430,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 1287803,
|
|
female: 1271908,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 1308311,
|
|
female: 1309907,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 1306719,
|
|
female: 1303528,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 1295030,
|
|
female: 1240201,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 1305323,
|
|
female: 1330645,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 1161821,
|
|
female: 1223440,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 975874,
|
|
female: 1060921,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 734814,
|
|
female: 833926,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 515115,
|
|
female: 604615,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 363282,
|
|
female: 455568,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 264126,
|
|
female: 363937,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 234767,
|
|
female: 427170,
|
|
},
|
|
],
|
|
CO: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 173245,
|
|
female: 163629,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 179579,
|
|
female: 170930,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 102577,
|
|
female: 98569,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 152713,
|
|
female: 139268,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 116654,
|
|
female: 108238,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 204625,
|
|
female: 188680,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 200624,
|
|
female: 188616,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 183386,
|
|
female: 175326,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 184422,
|
|
female: 173654,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 174730,
|
|
female: 172981,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 179803,
|
|
female: 173524,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 183543,
|
|
female: 187757,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 170717,
|
|
female: 179537,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 150815,
|
|
female: 155924,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 111094,
|
|
female: 119530,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 72252,
|
|
female: 80168,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 49142,
|
|
female: 59393,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 31894,
|
|
female: 43881,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 26852,
|
|
female: 50634,
|
|
},
|
|
],
|
|
CT: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 97647,
|
|
female: 93798,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 118032,
|
|
female: 113043,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 75546,
|
|
female: 71687,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 106966,
|
|
female: 102763,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 71125,
|
|
female: 64777,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 112189,
|
|
female: 108170,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 107223,
|
|
female: 109096,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 102424,
|
|
female: 106008,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 116664,
|
|
female: 123744,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 131872,
|
|
female: 139406,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 110043,
|
|
female: 104940,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 138644,
|
|
female: 146532,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 126670,
|
|
female: 132895,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 104701,
|
|
female: 114339,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 80178,
|
|
female: 91052,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 55237,
|
|
female: 65488,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 38844,
|
|
female: 51544,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 28908,
|
|
female: 43036,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 28694,
|
|
female: 59297,
|
|
},
|
|
],
|
|
DC: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 20585,
|
|
female: 19848,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 12723,
|
|
female: 11991,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 7740,
|
|
female: 7901,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 22350,
|
|
female: 25467,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 15325,
|
|
female: 19085,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 35295,
|
|
female: 41913,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 32716,
|
|
female: 35553,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 23748,
|
|
female: 24922,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 21158,
|
|
female: 20113,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 19279,
|
|
female: 18956,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 14999,
|
|
female: 15518,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 19249,
|
|
female: 19279,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 17592,
|
|
female: 18716,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 14272,
|
|
female: 17892,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 9740,
|
|
female: 13375,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 8221,
|
|
female: 9761,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 5071,
|
|
female: 7601,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 3399,
|
|
female: 5619,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 3212,
|
|
female: 7300,
|
|
},
|
|
],
|
|
DE: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 28382,
|
|
female: 27430,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 29482,
|
|
female: 27484,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 17589,
|
|
female: 16828,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 26852,
|
|
female: 26911,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 19006,
|
|
female: 18413,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 30933,
|
|
female: 31146,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 28602,
|
|
female: 29431,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 26498,
|
|
female: 28738,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 27674,
|
|
female: 28519,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 30582,
|
|
female: 32924,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 28224,
|
|
female: 28735,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 32444,
|
|
female: 35052,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 29048,
|
|
female: 34377,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 27925,
|
|
female: 30017,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 22767,
|
|
female: 26707,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 17121,
|
|
female: 19327,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 11479,
|
|
female: 14264,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 7473,
|
|
female: 10353,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 6332,
|
|
female: 11385,
|
|
},
|
|
],
|
|
FL: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 552054,
|
|
female: 529003,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 582351,
|
|
female: 558377,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 363538,
|
|
female: 345048,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 528013,
|
|
female: 498162,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 385515,
|
|
female: 368754,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 641710,
|
|
female: 622134,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 602467,
|
|
female: 602634,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 579722,
|
|
female: 585089,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 623074,
|
|
female: 639410,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 659376,
|
|
female: 677305,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 567479,
|
|
female: 543273,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 687625,
|
|
female: 723103,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 626363,
|
|
female: 685728,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 566282,
|
|
female: 651192,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 517513,
|
|
female: 589377,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 407275,
|
|
female: 470688,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 305530,
|
|
female: 361107,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 219362,
|
|
female: 281016,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 184760,
|
|
female: 314363,
|
|
},
|
|
],
|
|
GA: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 338979,
|
|
female: 326326,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 356404,
|
|
female: 351833,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 211908,
|
|
female: 203412,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 305617,
|
|
female: 289233,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 214032,
|
|
female: 206526,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 342885,
|
|
female: 343115,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 333159,
|
|
female: 348125,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 325121,
|
|
female: 345251,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 348120,
|
|
female: 363703,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 343559,
|
|
female: 358754,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 362147,
|
|
female: 340071,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 338424,
|
|
female: 359362,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 294734,
|
|
female: 325653,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 254497,
|
|
female: 285276,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 198714,
|
|
female: 226714,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 135107,
|
|
female: 164091,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 88135,
|
|
female: 115830,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 53792,
|
|
female: 84961,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 37997,
|
|
female: 85126,
|
|
},
|
|
],
|
|
HI: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 46668,
|
|
female: 44389,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 42590,
|
|
female: 41289,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 24759,
|
|
female: 23961,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 39937,
|
|
female: 32348,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 35270,
|
|
female: 28495,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 58033,
|
|
female: 48700,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 51544,
|
|
female: 47286,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 44144,
|
|
female: 42208,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 45731,
|
|
female: 43404,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 44336,
|
|
female: 44134,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 44115,
|
|
female: 40426,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 46481,
|
|
female: 46908,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 45959,
|
|
female: 47379,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 42420,
|
|
female: 43735,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 34846,
|
|
female: 36670,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 22981,
|
|
female: 25496,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 15219,
|
|
female: 18755,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 11142,
|
|
female: 17952,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 13696,
|
|
female: 22893,
|
|
},
|
|
],
|
|
IA: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 100400,
|
|
female: 96170,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 104674,
|
|
female: 98485,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 62452,
|
|
female: 59605,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 96966,
|
|
female: 91782,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 66307,
|
|
female: 62504,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 98079,
|
|
female: 93653,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 100924,
|
|
female: 97248,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 90980,
|
|
female: 89632,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 92961,
|
|
female: 90218,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 98877,
|
|
female: 96654,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 104279,
|
|
female: 100558,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 109267,
|
|
female: 110142,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 104021,
|
|
female: 106042,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 95379,
|
|
female: 95499,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 68276,
|
|
female: 73624,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 50414,
|
|
female: 56973,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 37867,
|
|
female: 48121,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 27523,
|
|
female: 39851,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 24949,
|
|
female: 52170,
|
|
},
|
|
],
|
|
ID: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 58355,
|
|
female: 56478,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 62528,
|
|
female: 59881,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 36373,
|
|
female: 33687,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 45752,
|
|
female: 45590,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 34595,
|
|
female: 30216,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 53998,
|
|
female: 52077,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 54217,
|
|
female: 52091,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 51247,
|
|
female: 47801,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 49113,
|
|
female: 49853,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 48392,
|
|
female: 48288,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 63107,
|
|
female: 59237,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 51805,
|
|
female: 52984,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 49226,
|
|
female: 51868,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 47343,
|
|
female: 47631,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 38436,
|
|
female: 38133,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 26243,
|
|
female: 28577,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 18404,
|
|
female: 20325,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 11653,
|
|
female: 15313,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 9677,
|
|
female: 16053,
|
|
},
|
|
],
|
|
IL: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 408295,
|
|
female: 392900,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 437688,
|
|
female: 419077,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 269202,
|
|
female: 257213,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 369219,
|
|
female: 353570,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 268501,
|
|
female: 258559,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 448001,
|
|
female: 442418,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 445416,
|
|
female: 445729,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 416265,
|
|
female: 418999,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 425825,
|
|
female: 427573,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 433177,
|
|
female: 441116,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 427121,
|
|
female: 412238,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 454039,
|
|
female: 470982,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 414948,
|
|
female: 442280,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 354782,
|
|
female: 380640,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 259363,
|
|
female: 292899,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 184622,
|
|
female: 223905,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 129016,
|
|
female: 171743,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 91973,
|
|
female: 139204,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 79446,
|
|
female: 165817,
|
|
},
|
|
],
|
|
IN: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 215697,
|
|
female: 205242,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 229911,
|
|
female: 221563,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 139494,
|
|
female: 132879,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 198763,
|
|
female: 194206,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 140805,
|
|
female: 131947,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 210315,
|
|
female: 208593,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 211656,
|
|
female: 210103,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 201979,
|
|
female: 200693,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 212114,
|
|
female: 212653,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 216446,
|
|
female: 219033,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 226901,
|
|
female: 214964,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 232241,
|
|
female: 237844,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 217033,
|
|
female: 228674,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 186412,
|
|
female: 197353,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 140336,
|
|
female: 156256,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 99402,
|
|
female: 116834,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 68758,
|
|
female: 88794,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 47628,
|
|
female: 72061,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 39372,
|
|
female: 83690,
|
|
},
|
|
],
|
|
KS: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 102716,
|
|
female: 98004,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 102335,
|
|
female: 99132,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 60870,
|
|
female: 57957,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 90593,
|
|
female: 83299,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 66512,
|
|
female: 59368,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 99384,
|
|
female: 93840,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 98020,
|
|
female: 94075,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 87763,
|
|
female: 85422,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 87647,
|
|
female: 84970,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 89233,
|
|
female: 88877,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 103861,
|
|
female: 98642,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 98398,
|
|
female: 101197,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 95861,
|
|
female: 96152,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 79440,
|
|
female: 85124,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 60035,
|
|
female: 64369,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 42434,
|
|
female: 49221,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 30967,
|
|
female: 39425,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 23026,
|
|
female: 33863,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 20767,
|
|
female: 40188,
|
|
},
|
|
],
|
|
KY: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 142062,
|
|
female: 134389,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 147586,
|
|
female: 138629,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 87696,
|
|
female: 83139,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 128249,
|
|
female: 121099,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 90794,
|
|
female: 85930,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 140811,
|
|
female: 139855,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 142732,
|
|
female: 142551,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 137211,
|
|
female: 136524,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 145358,
|
|
female: 145251,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 148883,
|
|
female: 150922,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 143532,
|
|
female: 139032,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 156890,
|
|
female: 163054,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 147006,
|
|
female: 156302,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 129457,
|
|
female: 139434,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 100883,
|
|
female: 112696,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 71867,
|
|
female: 83665,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 47828,
|
|
female: 62775,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 31477,
|
|
female: 46386,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 23886,
|
|
female: 51512,
|
|
},
|
|
],
|
|
LA: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 157642,
|
|
female: 152324,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 157781,
|
|
female: 149752,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 93357,
|
|
female: 90227,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 136496,
|
|
female: 131202,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 101438,
|
|
female: 101480,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 167414,
|
|
female: 168886,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 160094,
|
|
female: 161424,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 142182,
|
|
female: 141813,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 138717,
|
|
female: 144789,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 145906,
|
|
female: 152340,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 159193,
|
|
female: 154320,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 157743,
|
|
female: 167125,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 149001,
|
|
female: 161295,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 129265,
|
|
female: 139378,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 98404,
|
|
female: 106844,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 65845,
|
|
female: 83779,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 47365,
|
|
female: 60745,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 29452,
|
|
female: 48839,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 23861,
|
|
female: 47535,
|
|
},
|
|
],
|
|
MA: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 187066,
|
|
female: 178775,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 205530,
|
|
female: 195312,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 129433,
|
|
female: 123212,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 207432,
|
|
female: 213820,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 140356,
|
|
female: 135839,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 235172,
|
|
female: 237653,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 216220,
|
|
female: 221692,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 196293,
|
|
female: 202730,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 218111,
|
|
female: 231277,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 237629,
|
|
female: 249926,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 191958,
|
|
female: 186343,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 247973,
|
|
female: 260886,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 227238,
|
|
female: 241029,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 189981,
|
|
female: 211282,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 146129,
|
|
female: 164268,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 100745,
|
|
female: 123577,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 70828,
|
|
female: 92141,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 52074,
|
|
female: 81603,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 49482,
|
|
female: 104571,
|
|
},
|
|
],
|
|
MD: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 187617,
|
|
female: 180105,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 191787,
|
|
female: 185380,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 118027,
|
|
female: 113549,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 166991,
|
|
female: 159589,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 120617,
|
|
female: 116602,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 205555,
|
|
female: 206944,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 196824,
|
|
female: 203989,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 179340,
|
|
female: 193957,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 195388,
|
|
female: 205570,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 208382,
|
|
female: 225458,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 189781,
|
|
female: 182034,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 217574,
|
|
female: 235604,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 193789,
|
|
female: 210582,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 161828,
|
|
female: 186524,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 123204,
|
|
female: 144193,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 84114,
|
|
female: 101563,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 56755,
|
|
female: 75715,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 39615,
|
|
female: 59728,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 35455,
|
|
female: 70809,
|
|
},
|
|
],
|
|
ME: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 33298,
|
|
female: 32108,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 38254,
|
|
female: 36846,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 24842,
|
|
female: 23688,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 35315,
|
|
female: 33777,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 23007,
|
|
female: 21971,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 37685,
|
|
female: 38353,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 36838,
|
|
female: 37697,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 35988,
|
|
female: 37686,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 42092,
|
|
female: 42912,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 47141,
|
|
female: 49161,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 38066,
|
|
female: 35151,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 53458,
|
|
female: 55451,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 51789,
|
|
female: 55407,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 47171,
|
|
female: 49840,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 37495,
|
|
female: 39678,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 26300,
|
|
female: 28932,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 18197,
|
|
female: 22047,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 12824,
|
|
female: 18302,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 10321,
|
|
female: 20012,
|
|
},
|
|
],
|
|
MI: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 295157,
|
|
female: 280629,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 329983,
|
|
female: 319870,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 210017,
|
|
female: 199977,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 299937,
|
|
female: 287188,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 208270,
|
|
female: 202858,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 303606,
|
|
female: 298013,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 292780,
|
|
female: 296303,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 283925,
|
|
female: 288526,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 314544,
|
|
female: 319923,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 337524,
|
|
female: 344097,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 316345,
|
|
female: 297675,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 366054,
|
|
female: 378332,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 349590,
|
|
female: 369347,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 303421,
|
|
female: 323815,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 230810,
|
|
female: 252455,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 161676,
|
|
female: 186453,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 112555,
|
|
female: 141554,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 78669,
|
|
female: 116914,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 67110,
|
|
female: 134669,
|
|
},
|
|
],
|
|
MN: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 178616,
|
|
female: 170645,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 180951,
|
|
female: 174374,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 110001,
|
|
female: 104197,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 148247,
|
|
female: 144611,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 108864,
|
|
female: 103755,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 185766,
|
|
female: 180698,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 189374,
|
|
female: 184845,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 166613,
|
|
female: 160534,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 172583,
|
|
female: 171011,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 184130,
|
|
female: 182785,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 185244,
|
|
female: 176674,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 202427,
|
|
female: 203327,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 187216,
|
|
female: 189980,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 157586,
|
|
female: 160588,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 114903,
|
|
female: 121985,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 81660,
|
|
female: 92401,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 57855,
|
|
female: 72839,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 42192,
|
|
female: 58545,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 37938,
|
|
female: 73211,
|
|
},
|
|
],
|
|
MO: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 192851,
|
|
female: 183921,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 201273,
|
|
female: 190020,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 122944,
|
|
female: 116383,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 175782,
|
|
female: 169076,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 124584,
|
|
female: 123027,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 200511,
|
|
female: 200134,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 197781,
|
|
female: 198735,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 181485,
|
|
female: 180002,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 183318,
|
|
female: 188038,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 194538,
|
|
female: 199735,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 200091,
|
|
female: 193196,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 218663,
|
|
female: 225083,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 199513,
|
|
female: 216459,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 176036,
|
|
female: 187668,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 135605,
|
|
female: 150815,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 99845,
|
|
female: 117802,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 70734,
|
|
female: 88769,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 48118,
|
|
female: 72085,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 40331,
|
|
female: 80497,
|
|
},
|
|
],
|
|
MS: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 100654,
|
|
female: 97079,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 107363,
|
|
female: 101958,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 62923,
|
|
female: 60591,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 94460,
|
|
female: 94304,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 63870,
|
|
female: 58909,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 96027,
|
|
female: 98023,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 95533,
|
|
female: 98837,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 88278,
|
|
female: 92876,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 93579,
|
|
female: 97851,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 92103,
|
|
female: 98871,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 104911,
|
|
female: 100694,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 98578,
|
|
female: 106516,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 94835,
|
|
female: 101616,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 80677,
|
|
female: 91332,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 64386,
|
|
female: 72940,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 46712,
|
|
female: 56013,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 32079,
|
|
female: 42598,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 19966,
|
|
female: 32724,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 14789,
|
|
female: 32626,
|
|
},
|
|
],
|
|
MT: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 31021,
|
|
female: 29676,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 30960,
|
|
female: 29710,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 19558,
|
|
female: 18061,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 30975,
|
|
female: 27314,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 21419,
|
|
female: 20153,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 32300,
|
|
female: 30805,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 33167,
|
|
female: 30964,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 29772,
|
|
female: 28999,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 28538,
|
|
female: 27311,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 30820,
|
|
female: 30608,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 33641,
|
|
female: 31763,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 36761,
|
|
female: 37476,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 38291,
|
|
female: 40028,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 35306,
|
|
female: 35021,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 27786,
|
|
female: 27047,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 19708,
|
|
female: 19938,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 13344,
|
|
female: 14751,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 9435,
|
|
female: 11392,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 7361,
|
|
female: 13519,
|
|
},
|
|
],
|
|
NC: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 311288,
|
|
female: 299882,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 333622,
|
|
female: 316123,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 194507,
|
|
female: 185872,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 299506,
|
|
female: 275504,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 207910,
|
|
female: 196277,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 317709,
|
|
female: 324593,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 311582,
|
|
female: 323483,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 308195,
|
|
female: 319405,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 334818,
|
|
female: 349484,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 331086,
|
|
female: 345940,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 325977,
|
|
female: 316564,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 334674,
|
|
female: 355791,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 308840,
|
|
female: 341170,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 270508,
|
|
female: 303831,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 225997,
|
|
female: 254521,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 154010,
|
|
female: 186677,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 106165,
|
|
female: 139937,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 68871,
|
|
female: 104839,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 50143,
|
|
female: 110032,
|
|
},
|
|
],
|
|
ND: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 24524,
|
|
female: 24340,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 20939,
|
|
female: 20728,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 13197,
|
|
female: 12227,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 27439,
|
|
female: 22447,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 21413,
|
|
female: 19299,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 29543,
|
|
female: 24602,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 26425,
|
|
female: 22798,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 21846,
|
|
female: 19046,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 20123,
|
|
female: 19010,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 21386,
|
|
female: 20572,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 24336,
|
|
female: 22721,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 25126,
|
|
female: 24631,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 24412,
|
|
female: 24022,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 21598,
|
|
female: 20250,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 14868,
|
|
female: 14633,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 10729,
|
|
female: 11878,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 8086,
|
|
female: 9626,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 6222,
|
|
female: 9241,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 5751,
|
|
female: 11606,
|
|
},
|
|
],
|
|
NE: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 67062,
|
|
female: 62974,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 64843,
|
|
female: 62695,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 38679,
|
|
female: 36116,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 56143,
|
|
female: 54195,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 40531,
|
|
female: 38139,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 64277,
|
|
female: 61028,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 64230,
|
|
female: 62423,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 57741,
|
|
female: 55950,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 56139,
|
|
female: 54518,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 57526,
|
|
female: 57077,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 68079,
|
|
female: 64509,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 64444,
|
|
female: 65106,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 61285,
|
|
female: 62057,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 52560,
|
|
female: 54977,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 39372,
|
|
female: 41007,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 27091,
|
|
female: 31903,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 20472,
|
|
female: 26808,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 15625,
|
|
female: 21401,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 13507,
|
|
female: 26876,
|
|
},
|
|
],
|
|
NH: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 33531,
|
|
female: 32061,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 40472,
|
|
female: 39574,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 26632,
|
|
female: 25155,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 39600,
|
|
female: 39270,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 25067,
|
|
female: 23439,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 39514,
|
|
female: 37529,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 37282,
|
|
female: 37104,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 37177,
|
|
female: 38432,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 43571,
|
|
female: 43894,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 50559,
|
|
female: 51423,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 37873,
|
|
female: 36382,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 55573,
|
|
female: 57097,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 50802,
|
|
female: 52906,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 44934,
|
|
female: 45384,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 33322,
|
|
female: 34773,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 22786,
|
|
female: 25421,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 14988,
|
|
female: 18865,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 10661,
|
|
female: 14921,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 9140,
|
|
female: 17087,
|
|
},
|
|
],
|
|
NJ: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 272239,
|
|
female: 261405,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 296798,
|
|
female: 281395,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 183608,
|
|
female: 174902,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 236406,
|
|
female: 219234,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 171414,
|
|
female: 162551,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 288078,
|
|
female: 278395,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 286242,
|
|
female: 288661,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 278323,
|
|
female: 286407,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 306371,
|
|
female: 315976,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 324604,
|
|
female: 340805,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 280348,
|
|
female: 272618,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 335379,
|
|
female: 351753,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 297889,
|
|
female: 316509,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 243909,
|
|
female: 272971,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 187928,
|
|
female: 216233,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 130458,
|
|
female: 162862,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 92629,
|
|
female: 121544,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 68009,
|
|
female: 107002,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 62395,
|
|
female: 130163,
|
|
},
|
|
],
|
|
NM: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 70556,
|
|
female: 67433,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 72070,
|
|
female: 69774,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 42831,
|
|
female: 41474,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 61671,
|
|
female: 59289,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 47139,
|
|
female: 41506,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 73009,
|
|
female: 67866,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 69394,
|
|
female: 66383,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 62108,
|
|
female: 60810,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 61075,
|
|
female: 61508,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 62327,
|
|
female: 64988,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 72877,
|
|
female: 69675,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 69856,
|
|
female: 73683,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 66381,
|
|
female: 73952,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 61719,
|
|
female: 66285,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 48657,
|
|
female: 54175,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 35942,
|
|
female: 39668,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 24922,
|
|
female: 29968,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 16894,
|
|
female: 21049,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 12986,
|
|
female: 22217,
|
|
},
|
|
],
|
|
NV: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 91556,
|
|
female: 87252,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 92376,
|
|
female: 90127,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 56635,
|
|
female: 53976,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 72185,
|
|
female: 68570,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 57429,
|
|
female: 54635,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 103079,
|
|
female: 98260,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 101626,
|
|
female: 97574,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 95952,
|
|
female: 91752,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 98405,
|
|
female: 96018,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 98297,
|
|
female: 92880,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 97639,
|
|
female: 92019,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 96647,
|
|
female: 93838,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 86430,
|
|
female: 90916,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 79651,
|
|
female: 82206,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 65973,
|
|
female: 70582,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 48879,
|
|
female: 50485,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 31798,
|
|
female: 33652,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 19722,
|
|
female: 23399,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 13456,
|
|
female: 22760,
|
|
},
|
|
],
|
|
NY: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 601900,
|
|
female: 574532,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 602877,
|
|
female: 576846,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 381224,
|
|
female: 364149,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 579276,
|
|
female: 563517,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 423461,
|
|
female: 419351,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 722290,
|
|
female: 728064,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 668918,
|
|
female: 684340,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 607495,
|
|
female: 628810,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 632186,
|
|
female: 660306,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 674516,
|
|
female: 708960,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 588624,
|
|
female: 561622,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 695357,
|
|
female: 740342,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 633602,
|
|
female: 685163,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 540901,
|
|
female: 604110,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 409399,
|
|
female: 483158,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 287440,
|
|
female: 357971,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 207495,
|
|
female: 274626,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 150642,
|
|
female: 231063,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 134198,
|
|
female: 284443,
|
|
},
|
|
],
|
|
OH: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 356598,
|
|
female: 339398,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 385542,
|
|
female: 371142,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 239825,
|
|
female: 228296,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 331115,
|
|
female: 318019,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 227916,
|
|
female: 225400,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 369646,
|
|
female: 367475,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 356757,
|
|
female: 359375,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 338273,
|
|
female: 340410,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 368578,
|
|
female: 375476,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 385388,
|
|
female: 394341,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 376976,
|
|
female: 358242,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 420561,
|
|
female: 438290,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 403067,
|
|
female: 427137,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 350563,
|
|
female: 374890,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 262844,
|
|
female: 292745,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 183419,
|
|
female: 222552,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 131940,
|
|
female: 173303,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 93267,
|
|
female: 140079,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 80618,
|
|
female: 166514,
|
|
},
|
|
],
|
|
OK: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 135423,
|
|
female: 130297,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 133539,
|
|
female: 128110,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 79207,
|
|
female: 74080,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 115423,
|
|
female: 107651,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 85610,
|
|
female: 80749,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 135217,
|
|
female: 130966,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 132683,
|
|
female: 128496,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 118240,
|
|
female: 116104,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 118534,
|
|
female: 117501,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 117065,
|
|
female: 118300,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 137212,
|
|
female: 130040,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 129964,
|
|
female: 132941,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 121988,
|
|
female: 129033,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 105018,
|
|
female: 113144,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 82818,
|
|
female: 93914,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 62979,
|
|
female: 71856,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 43899,
|
|
female: 54848,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 29237,
|
|
female: 42044,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 22888,
|
|
female: 42715,
|
|
},
|
|
],
|
|
OR: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 118561,
|
|
female: 112841,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 123223,
|
|
female: 116373,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 75620,
|
|
female: 71764,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 106121,
|
|
female: 103044,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 79106,
|
|
female: 75639,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 134241,
|
|
female: 131539,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 137090,
|
|
female: 135734,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 128812,
|
|
female: 126071,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 131405,
|
|
female: 126875,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 125373,
|
|
female: 125074,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 122920,
|
|
female: 119049,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 131932,
|
|
female: 137021,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 130434,
|
|
female: 141380,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 129063,
|
|
female: 136051,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 99577,
|
|
female: 106208,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 69028,
|
|
female: 77428,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 46055,
|
|
female: 53682,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 30900,
|
|
female: 41853,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 28992,
|
|
female: 53154,
|
|
},
|
|
],
|
|
PA: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 367290,
|
|
female: 350371,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 393719,
|
|
female: 374666,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 250754,
|
|
female: 236670,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 378940,
|
|
female: 369819,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 251063,
|
|
female: 243391,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 420247,
|
|
female: 410193,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 391190,
|
|
female: 387225,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 365742,
|
|
female: 365646,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 399152,
|
|
female: 405848,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 435250,
|
|
female: 446328,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 381910,
|
|
female: 366854,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 472070,
|
|
female: 489057,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 456215,
|
|
female: 475044,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 390595,
|
|
female: 419924,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 301610,
|
|
female: 335127,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 212200,
|
|
female: 256188,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 156335,
|
|
female: 205974,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 117050,
|
|
female: 178358,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 104012,
|
|
female: 217532,
|
|
},
|
|
],
|
|
RI: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 28289,
|
|
female: 26941,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 31383,
|
|
female: 30724,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 20093,
|
|
female: 19249,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 35376,
|
|
female: 37870,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 23397,
|
|
female: 21358,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 35958,
|
|
female: 34710,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 32410,
|
|
female: 32567,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 30325,
|
|
female: 31145,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 32542,
|
|
female: 34087,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 36151,
|
|
female: 38462,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 30462,
|
|
female: 27878,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 38419,
|
|
female: 41642,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 36706,
|
|
female: 39127,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 30349,
|
|
female: 33752,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 23462,
|
|
female: 26311,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 16385,
|
|
female: 19335,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 10978,
|
|
female: 14833,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 9224,
|
|
female: 13439,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 8479,
|
|
female: 19843,
|
|
},
|
|
],
|
|
SC: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 148363,
|
|
female: 144218,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 153051,
|
|
female: 148064,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 92781,
|
|
female: 88090,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 150464,
|
|
female: 136857,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 99237,
|
|
female: 99178,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 156273,
|
|
female: 156982,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 148237,
|
|
female: 153197,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 139949,
|
|
female: 146281,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 151524,
|
|
female: 157192,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 153110,
|
|
female: 163562,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 156323,
|
|
female: 150943,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 161003,
|
|
female: 173752,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 150770,
|
|
female: 169238,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 141268,
|
|
female: 160890,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 120618,
|
|
female: 137154,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 85197,
|
|
female: 97581,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 55278,
|
|
female: 69067,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 33979,
|
|
female: 50585,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 24984,
|
|
female: 52336,
|
|
},
|
|
],
|
|
SD: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 30615,
|
|
female: 29377,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 28360,
|
|
female: 26492,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 17193,
|
|
female: 16250,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 25514,
|
|
female: 24234,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 18413,
|
|
female: 16324,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 29131,
|
|
female: 26757,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 28133,
|
|
female: 26710,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 24971,
|
|
female: 23347,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 24234,
|
|
female: 23231,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 25555,
|
|
female: 24867,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 30399,
|
|
female: 28980,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 29754,
|
|
female: 29530,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 29075,
|
|
female: 28968,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 25633,
|
|
female: 25530,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 19320,
|
|
female: 18489,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 12964,
|
|
female: 14702,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 9646,
|
|
female: 12077,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 7669,
|
|
female: 10566,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 6898,
|
|
female: 13282,
|
|
},
|
|
],
|
|
TN: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 204457,
|
|
female: 196347,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 217061,
|
|
female: 206350,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 129690,
|
|
female: 124122,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 183910,
|
|
female: 175377,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 132501,
|
|
female: 134905,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 210618,
|
|
female: 214944,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 209305,
|
|
female: 214151,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 200270,
|
|
female: 207520,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 216542,
|
|
female: 219178,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 217059,
|
|
female: 224473,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 210365,
|
|
female: 204494,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 223663,
|
|
female: 238025,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 210228,
|
|
female: 229974,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 186739,
|
|
female: 207022,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 153737,
|
|
female: 171357,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 108743,
|
|
female: 125362,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 72813,
|
|
female: 94077,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 46556,
|
|
female: 71212,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 33499,
|
|
female: 72969,
|
|
},
|
|
],
|
|
TX: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 996070,
|
|
female: 955235,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 998209,
|
|
female: 959762,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 587712,
|
|
female: 561008,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 818590,
|
|
female: 756451,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 582570,
|
|
female: 556850,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 982673,
|
|
female: 948564,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 961403,
|
|
female: 947710,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 897542,
|
|
female: 898907,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 897922,
|
|
female: 908091,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 857621,
|
|
female: 865642,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 1021123,
|
|
female: 979891,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 861849,
|
|
female: 880746,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 761410,
|
|
female: 799294,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 635465,
|
|
female: 692072,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 483436,
|
|
female: 533368,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 330457,
|
|
female: 389996,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 228243,
|
|
female: 289446,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 153391,
|
|
female: 219572,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 115630,
|
|
female: 224693,
|
|
},
|
|
],
|
|
UT: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 130873,
|
|
female: 124371,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 128076,
|
|
female: 120364,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 70832,
|
|
female: 66798,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 87877,
|
|
female: 92950,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 79431,
|
|
female: 71405,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 109125,
|
|
female: 106576,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 115198,
|
|
female: 110546,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 102771,
|
|
female: 99664,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 88181,
|
|
female: 83229,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 76552,
|
|
female: 74993,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 131094,
|
|
female: 125110,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 76913,
|
|
female: 78113,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 71490,
|
|
female: 73221,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 60996,
|
|
female: 63835,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 45491,
|
|
female: 49273,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 32191,
|
|
female: 35931,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 23112,
|
|
female: 27761,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 15827,
|
|
female: 20155,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 13199,
|
|
female: 19855,
|
|
},
|
|
],
|
|
VA: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 262278,
|
|
female: 250000,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 266247,
|
|
female: 251516,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 160174,
|
|
female: 153149,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 248284,
|
|
female: 233796,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 175833,
|
|
female: 167676,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 296682,
|
|
female: 287052,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 286536,
|
|
female: 283804,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 264490,
|
|
female: 265951,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 278474,
|
|
female: 286095,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 286793,
|
|
female: 297558,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 264413,
|
|
female: 256891,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 296096,
|
|
female: 309898,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 262954,
|
|
female: 283219,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 228721,
|
|
female: 250389,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 178498,
|
|
female: 197033,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 123597,
|
|
female: 146376,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 82281,
|
|
female: 103044,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 55037,
|
|
female: 80081,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 43560,
|
|
female: 92154,
|
|
},
|
|
],
|
|
VT: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 15766,
|
|
female: 14629,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 18674,
|
|
female: 17317,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 11909,
|
|
female: 11565,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 21686,
|
|
female: 20502,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 12648,
|
|
female: 11840,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 18005,
|
|
female: 17548,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 17565,
|
|
female: 18161,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 16856,
|
|
female: 17454,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 19431,
|
|
female: 19600,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 21315,
|
|
female: 22377,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 17073,
|
|
female: 16338,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 24629,
|
|
female: 26080,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 24925,
|
|
female: 25588,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 21769,
|
|
female: 23081,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 16842,
|
|
female: 17925,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 11855,
|
|
female: 12331,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 7639,
|
|
female: 9192,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 5291,
|
|
female: 8001,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 4695,
|
|
female: 8502,
|
|
},
|
|
],
|
|
WA: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 228403,
|
|
female: 217400,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 224142,
|
|
female: 217269,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 136967,
|
|
female: 130193,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 195001,
|
|
female: 179996,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 151577,
|
|
female: 140876,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 260873,
|
|
female: 244497,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 252612,
|
|
female: 243147,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 230325,
|
|
female: 223596,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 234066,
|
|
female: 228073,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 233107,
|
|
female: 230232,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 227824,
|
|
female: 214378,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 245685,
|
|
female: 247691,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 231612,
|
|
female: 241813,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 206233,
|
|
female: 219560,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 158697,
|
|
female: 170678,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 107931,
|
|
female: 118093,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 70497,
|
|
female: 83476,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 48802,
|
|
female: 66167,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 43371,
|
|
female: 80604,
|
|
},
|
|
],
|
|
WI: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 176217,
|
|
female: 168178,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 191911,
|
|
female: 180587,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 115730,
|
|
female: 110660,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 167063,
|
|
female: 161358,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 117861,
|
|
female: 113393,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 183464,
|
|
female: 176718,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 187494,
|
|
female: 181605,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 172689,
|
|
female: 168116,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 179862,
|
|
female: 176322,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 198114,
|
|
female: 197462,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 186006,
|
|
female: 180034,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 217886,
|
|
female: 219813,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 204370,
|
|
female: 206108,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 176161,
|
|
female: 178738,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 130349,
|
|
female: 136552,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 90955,
|
|
female: 103217,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 65738,
|
|
female: 81341,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 48337,
|
|
female: 67614,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 41178,
|
|
female: 82916,
|
|
},
|
|
],
|
|
WV: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 52472,
|
|
female: 50287,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 55269,
|
|
female: 52689,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 34100,
|
|
female: 32359,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 51801,
|
|
female: 48967,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 35920,
|
|
female: 34241,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 54564,
|
|
female: 52255,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 56430,
|
|
female: 55121,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 55764,
|
|
female: 55399,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 60662,
|
|
female: 59373,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 61771,
|
|
female: 61257,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 53707,
|
|
female: 51490,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 66156,
|
|
female: 68671,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 66936,
|
|
female: 71680,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 65717,
|
|
female: 67056,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 51285,
|
|
female: 54807,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 36504,
|
|
female: 39946,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 25738,
|
|
female: 31619,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 16397,
|
|
female: 24351,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 12438,
|
|
female: 26221,
|
|
},
|
|
],
|
|
WY: [
|
|
{
|
|
age: "0 to 5",
|
|
male: 19649,
|
|
female: 18996,
|
|
},
|
|
{
|
|
age: "10 to 14",
|
|
male: 20703,
|
|
female: 17785,
|
|
},
|
|
{
|
|
age: "15 to 17",
|
|
male: 11500,
|
|
female: 10383,
|
|
},
|
|
{
|
|
age: "18 to 21",
|
|
male: 18008,
|
|
female: 15534,
|
|
},
|
|
{
|
|
age: "22 to 24",
|
|
male: 12727,
|
|
female: 11405,
|
|
},
|
|
{
|
|
age: "25 to 29",
|
|
male: 21459,
|
|
female: 19350,
|
|
},
|
|
{
|
|
age: "30 to 34",
|
|
male: 21008,
|
|
female: 19465,
|
|
},
|
|
{
|
|
age: "35 to 39",
|
|
male: 18573,
|
|
female: 17022,
|
|
},
|
|
{
|
|
age: "40 to 44",
|
|
male: 17553,
|
|
female: 16402,
|
|
},
|
|
{
|
|
age: "45 to 49",
|
|
male: 17580,
|
|
female: 16702,
|
|
},
|
|
{
|
|
age: "5 to 9",
|
|
male: 19198,
|
|
female: 19519,
|
|
},
|
|
{
|
|
age: "50 to 54",
|
|
male: 20337,
|
|
female: 20958,
|
|
},
|
|
{
|
|
age: "55 to 59",
|
|
male: 21523,
|
|
female: 21000,
|
|
},
|
|
{
|
|
age: "60 to 64",
|
|
male: 19048,
|
|
female: 18292,
|
|
},
|
|
{
|
|
age: "65 to 69",
|
|
male: 13999,
|
|
female: 13130,
|
|
},
|
|
{
|
|
age: "70 to 74",
|
|
male: 8710,
|
|
female: 9880,
|
|
},
|
|
{
|
|
age: "75 to 79",
|
|
male: 6149,
|
|
female: 6938,
|
|
},
|
|
{
|
|
age: "80 to 84",
|
|
male: 4442,
|
|
female: 5560,
|
|
},
|
|
{
|
|
age: "85 and Older",
|
|
male: 3395,
|
|
female: 5797,
|
|
},
|
|
],
|
|
};
|
|
|
|
function aggregateData(list) {
|
|
var maleTotal = 0;
|
|
var femaleTotal = 0;
|
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
var row = list[i];
|
|
maleTotal += row.male;
|
|
femaleTotal += row.female;
|
|
}
|
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
var row = list[i];
|
|
row.malePercent =
|
|
(-1 * Math.round((row.male / maleTotal) * 10000)) / 100;
|
|
row.femalePercent =
|
|
Math.round((row.female / femaleTotal) * 10000) / 100;
|
|
}
|
|
|
|
return list;
|
|
}
|
|
|
|
usData = aggregateData(usData);
|
|
|
|
// ===========================================================
|
|
// Root and wrapper container
|
|
// ===========================================================
|
|
|
|
// Create root and chart
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create wrapper container
|
|
var container = root.container.children.push(
|
|
am5.Container.new(root, {
|
|
layout: root.horizontalLayout,
|
|
width: am5.p100,
|
|
height: am5.p100,
|
|
})
|
|
);
|
|
|
|
// Set up formats
|
|
root.numberFormatter.setAll({
|
|
numberFormat: "#.##as",
|
|
});
|
|
|
|
// ===========================================================
|
|
// XY chart
|
|
// ===========================================================
|
|
|
|
// Create chart
|
|
var chart = container.children.push(
|
|
am5xy.XYChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
wheelX: "none",
|
|
wheelY: "none",
|
|
layout: root.verticalLayout,
|
|
width: am5.percent(60),
|
|
})
|
|
);
|
|
|
|
// Create axes
|
|
var yAxis1 = chart.yAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
categoryField: "age",
|
|
renderer: am5xy.AxisRendererY.new(root, {}),
|
|
})
|
|
);
|
|
|
|
yAxis1.get("renderer").labels.template.setAll({
|
|
paddingTop: 0,
|
|
fontWeight: "400",
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
yAxis1.get("renderer").grid.template.setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")),
|
|
strokeWidth: 1,
|
|
strokeOpacity: 1,
|
|
strokeDasharray: [3],
|
|
});
|
|
|
|
yAxis1.data.setAll(usData);
|
|
|
|
var yAxis2 = chart.yAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
categoryField: "age",
|
|
renderer: am5xy.AxisRendererY.new(root, {
|
|
opposite: true,
|
|
}),
|
|
})
|
|
);
|
|
|
|
yAxis2.get("renderer").grid.template.setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")),
|
|
strokeWidth: 1,
|
|
strokeOpacity: 1,
|
|
strokeDasharray: [3],
|
|
});
|
|
|
|
yAxis2.get("renderer").labels.template.setAll({
|
|
paddingTop: 0,
|
|
fontWeight: "400",
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
yAxis2.data.setAll(usData);
|
|
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
min: -10,
|
|
max: 10,
|
|
numberFormat: "#.s'%'",
|
|
renderer: am5xy.AxisRendererX.new(root, {
|
|
minGridDistance: 40,
|
|
}),
|
|
})
|
|
);
|
|
|
|
xAxis.get("renderer").labels.template.setAll({
|
|
paddingTop: 20,
|
|
fontWeight: "400",
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
xAxis.get("renderer").grid.template.setAll({
|
|
disabled: true,
|
|
strokeOpacity: 0,
|
|
});
|
|
|
|
// Create series
|
|
var maleSeries = chart.series.push(
|
|
am5xy.ColumnSeries.new(root, {
|
|
name: "Males",
|
|
xAxis: xAxis,
|
|
yAxis: yAxis1,
|
|
valueXField: "malePercent",
|
|
categoryYField: "age",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
clustered: false,
|
|
})
|
|
);
|
|
|
|
maleSeries.columns.template.setAll({
|
|
tooltipText:
|
|
"Males, age {categoryY}: {male} ({malePercent.formatNumber('#.0s')}%)",
|
|
tooltipX: am5.p100,
|
|
cornerRadiusBR: 4,
|
|
cornerRadiusTR: 4,
|
|
cornerRadiusBL: 0,
|
|
cornerRadiusTL: 0,
|
|
});
|
|
|
|
maleSeries.data.setAll(usData);
|
|
|
|
var femaleSeries = chart.series.push(
|
|
am5xy.ColumnSeries.new(root, {
|
|
name: "Males",
|
|
xAxis: xAxis,
|
|
yAxis: yAxis1,
|
|
valueXField: "femalePercent",
|
|
categoryYField: "age",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
clustered: false,
|
|
})
|
|
);
|
|
|
|
femaleSeries.columns.template.setAll({
|
|
tooltipText:
|
|
"Males, age {categoryY}: {female} ({femalePercent.formatNumber('#.0s')}%)",
|
|
tooltipX: am5.p100,
|
|
cornerRadiusBR: 4,
|
|
cornerRadiusTR: 4,
|
|
cornerRadiusBL: 0,
|
|
cornerRadiusTL: 0,
|
|
});
|
|
|
|
femaleSeries.data.setAll(usData);
|
|
|
|
// Add labels
|
|
var maleLabel = chart.plotContainer.children.push(
|
|
am5.Label.new(root, {
|
|
text: "Males",
|
|
fontSize: 13,
|
|
fontWeight: "500",
|
|
y: 5,
|
|
x: 5,
|
|
//centerX: am5.p50,
|
|
fill: maleSeries.get("fill"),
|
|
})
|
|
);
|
|
|
|
var femaleLabel = chart.plotContainer.children.push(
|
|
am5.Label.new(root, {
|
|
text: "Females",
|
|
fontSize: 13,
|
|
fontWeight: "500",
|
|
y: 5,
|
|
x: am5.p100,
|
|
centerX: am5.p100,
|
|
dx: -5,
|
|
fill: femaleSeries.get("fill"),
|
|
})
|
|
);
|
|
|
|
// ===========================================================
|
|
// Map chart
|
|
// ===========================================================
|
|
|
|
// Create chart
|
|
var map = container.children.push(
|
|
am5map.MapChart.new(root, {
|
|
panX: "none",
|
|
panY: "none",
|
|
wheelY: "none",
|
|
projection: am5map.geoAlbersUsa(),
|
|
width: am5.percent(40),
|
|
})
|
|
);
|
|
|
|
chart.getTooltip().set("autoTextColor", false);
|
|
|
|
// Title
|
|
var title = map.children.push(
|
|
am5.Label.new(root, {
|
|
text: "United States",
|
|
fontSize: 14,
|
|
fontWeight: "500",
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-gray-800")
|
|
),
|
|
y: 20,
|
|
x: am5.p50,
|
|
centerX: am5.p50,
|
|
})
|
|
);
|
|
|
|
// Create polygon series
|
|
var polygonSeries = map.series.push(
|
|
am5map.MapPolygonSeries.new(root, {
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-gray-300")
|
|
),
|
|
geoJSON: am5geodata_usaLow,
|
|
})
|
|
);
|
|
|
|
polygonSeries.mapPolygons.template.setAll({
|
|
tooltipText: "{name}",
|
|
interactive: true,
|
|
});
|
|
|
|
polygonSeries.mapPolygons.template.states.create("hover", {
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
});
|
|
|
|
polygonSeries.mapPolygons.template.states.create("active", {
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
});
|
|
|
|
var activePolygon;
|
|
polygonSeries.mapPolygons.template.events.on(
|
|
"click",
|
|
function (ev) {
|
|
if (activePolygon) {
|
|
activePolygon.set("active", false);
|
|
}
|
|
activePolygon = ev.target;
|
|
activePolygon.set("active", true);
|
|
var state = ev.target.dataItem.dataContext.id
|
|
.split("-")
|
|
.pop();
|
|
var data = aggregateData(stateData[state]);
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
maleSeries.data.setIndex(i, data[i]);
|
|
femaleSeries.data.setIndex(i, data[i]);
|
|
}
|
|
|
|
title.set("text", ev.target.dataItem.dataContext.name);
|
|
}
|
|
);
|
|
};
|
|
|
|
// On amchart ready
|
|
am5.ready(function () {
|
|
// Init chart
|
|
init();
|
|
});
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget24;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget24.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget25 = (function () {
|
|
// Private methods
|
|
var initChart1 = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_25_chart_1");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/
|
|
var chart = root.container.children.push(
|
|
am5radar.RadarChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
wheelX: "panX",
|
|
wheelY: "zoomX",
|
|
innerRadius: am5.percent(40),
|
|
radius: am5.percent(70),
|
|
arrangeTooltips: false,
|
|
})
|
|
);
|
|
|
|
var cursor = chart.set(
|
|
"cursor",
|
|
am5radar.RadarCursor.new(root, {
|
|
behavior: "zoomX",
|
|
})
|
|
);
|
|
|
|
cursor.lineY.set("visible", false);
|
|
|
|
// Create axes and their renderers
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
|
|
var xRenderer = am5radar.AxisRendererCircular.new(root, {
|
|
minGridDistance: 30,
|
|
});
|
|
|
|
xRenderer.labels.template.setAll({
|
|
textType: "radial",
|
|
radius: 10,
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
centerY: am5.p50,
|
|
fontWeight: "400",
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
xRenderer.grid.template.setAll({
|
|
location: 0.5,
|
|
strokeDasharray: [2, 2],
|
|
stroke: KTUtil.getCssVariableValue("--bs-gray-400"),
|
|
});
|
|
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
maxDeviation: 0,
|
|
categoryField: "name",
|
|
renderer: xRenderer,
|
|
})
|
|
);
|
|
|
|
var yRenderer = am5radar.AxisRendererRadial.new(root, {
|
|
minGridDistance: 30,
|
|
});
|
|
|
|
yRenderer.labels.template.setAll({
|
|
fontWeight: "500",
|
|
fontSize: 12,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
renderer: yRenderer,
|
|
})
|
|
);
|
|
|
|
yRenderer.grid.template.setAll({
|
|
strokeDasharray: [2, 2],
|
|
stroke: KTUtil.getCssVariableValue("--bs-gray-400"),
|
|
});
|
|
|
|
// Create series
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
|
|
var series1 = chart.series.push(
|
|
am5radar.RadarLineSeries.new(root, {
|
|
name: "Revenue",
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "value1",
|
|
categoryXField: "name",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
})
|
|
);
|
|
|
|
series1.strokes.template.setAll({
|
|
strokeOpacity: 0,
|
|
});
|
|
|
|
series1.fills.template.setAll({
|
|
visible: true,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
fillOpacity: 0.5,
|
|
});
|
|
|
|
var series2 = chart.series.push(
|
|
am5radar.RadarLineSeries.new(root, {
|
|
name: "Expense",
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "value2",
|
|
categoryXField: "name",
|
|
stacked: true,
|
|
tooltip: am5.Tooltip.new(root, {
|
|
labelText: "Revenue: {value1}\nExpense:{value2}",
|
|
}),
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
})
|
|
);
|
|
|
|
series2.strokes.template.setAll({
|
|
strokeOpacity: 0,
|
|
});
|
|
|
|
series2.fills.template.setAll({
|
|
visible: true,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
fillOpacity: 0.5,
|
|
});
|
|
|
|
var legend = chart.radarContainer.children.push(
|
|
am5.Legend.new(root, {
|
|
width: 150,
|
|
centerX: am5.p50,
|
|
centerY: am5.p50,
|
|
})
|
|
);
|
|
legend.data.setAll([series1, series2]);
|
|
|
|
legend.labels.template.setAll({
|
|
fontWeight: "600",
|
|
fontSize: 13,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
// Set data
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
|
|
var data = [
|
|
{
|
|
name: "Openlane",
|
|
value1: 160.2,
|
|
value2: 26.9,
|
|
},
|
|
{
|
|
name: "Yearin",
|
|
value1: 120.1,
|
|
value2: 50.5,
|
|
},
|
|
{
|
|
name: "Goodsilron",
|
|
value1: 150.7,
|
|
value2: 12.3,
|
|
},
|
|
{
|
|
name: "Condax",
|
|
value1: 69.4,
|
|
value2: 74.5,
|
|
},
|
|
{
|
|
name: "Opentech",
|
|
value1: 78.5,
|
|
value2: 29.7,
|
|
},
|
|
{
|
|
name: "Golddex",
|
|
value1: 77.6,
|
|
value2: 102.2,
|
|
},
|
|
{
|
|
name: "Isdom",
|
|
value1: 69.8,
|
|
value2: 22.6,
|
|
},
|
|
{
|
|
name: "Plusstrip",
|
|
value1: 63.6,
|
|
value2: 45.3,
|
|
},
|
|
{
|
|
name: "Kinnamplus",
|
|
value1: 59.7,
|
|
value2: 12.8,
|
|
},
|
|
{
|
|
name: "Zumgoity",
|
|
value1: 64.3,
|
|
value2: 19.6,
|
|
},
|
|
{
|
|
name: "Stanredtax",
|
|
value1: 52.9,
|
|
value2: 96.3,
|
|
},
|
|
{
|
|
name: "Conecom",
|
|
value1: 42.9,
|
|
value2: 11.9,
|
|
},
|
|
{
|
|
name: "Zencorporation",
|
|
value1: 40.9,
|
|
value2: 16.8,
|
|
},
|
|
{
|
|
name: "Iselectrics",
|
|
value1: 39.2,
|
|
value2: 9.9,
|
|
},
|
|
{
|
|
name: "Treequote",
|
|
value1: 76.6,
|
|
value2: 36.9,
|
|
},
|
|
{
|
|
name: "Sumace",
|
|
value1: 34.8,
|
|
value2: 14.6,
|
|
},
|
|
{
|
|
name: "Lexiqvolax",
|
|
value1: 32.1,
|
|
value2: 35.6,
|
|
},
|
|
{
|
|
name: "Sunnamplex",
|
|
value1: 31.8,
|
|
value2: 5.9,
|
|
},
|
|
{
|
|
name: "Faxquote",
|
|
value1: 29.3,
|
|
value2: 14.7,
|
|
},
|
|
{
|
|
name: "Donware",
|
|
value1: 23.0,
|
|
value2: 2.8,
|
|
},
|
|
{
|
|
name: "Warephase",
|
|
value1: 21.5,
|
|
value2: 12.1,
|
|
},
|
|
{
|
|
name: "Donquadtech",
|
|
value1: 19.7,
|
|
value2: 10.8,
|
|
},
|
|
{
|
|
name: "Nam-zim",
|
|
value1: 15.5,
|
|
value2: 4.1,
|
|
},
|
|
{
|
|
name: "Y-corporation",
|
|
value1: 14.2,
|
|
value2: 11.3,
|
|
},
|
|
];
|
|
|
|
series1.data.setAll(data);
|
|
series2.data.setAll(data);
|
|
xAxis.data.setAll(data);
|
|
|
|
// Animate chart and series in
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
|
|
series1.appear(1000);
|
|
series2.appear(1000);
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
// On amchart ready
|
|
am5.ready(function () {
|
|
init();
|
|
});
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
var initChart2 = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_25_chart_2");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/
|
|
var chart = root.container.children.push(
|
|
am5radar.RadarChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
wheelX: "panX",
|
|
wheelY: "zoomX",
|
|
innerRadius: am5.percent(40),
|
|
radius: am5.percent(70),
|
|
arrangeTooltips: false,
|
|
})
|
|
);
|
|
|
|
var cursor = chart.set(
|
|
"cursor",
|
|
am5radar.RadarCursor.new(root, {
|
|
behavior: "zoomX",
|
|
})
|
|
);
|
|
|
|
cursor.lineY.set("visible", false);
|
|
|
|
// Create axes and their renderers
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
|
|
var xRenderer = am5radar.AxisRendererCircular.new(root, {
|
|
minGridDistance: 30,
|
|
});
|
|
xRenderer.labels.template.setAll({
|
|
textType: "radial",
|
|
radius: 10,
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
centerY: am5.p50,
|
|
fontWeight: "400",
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
xRenderer.grid.template.setAll({
|
|
location: 0.5,
|
|
strokeDasharray: [2, 2],
|
|
stroke: KTUtil.getCssVariableValue("--bs-gray-400"),
|
|
});
|
|
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
maxDeviation: 0,
|
|
categoryField: "name",
|
|
renderer: xRenderer,
|
|
})
|
|
);
|
|
|
|
var yRenderer = am5radar.AxisRendererRadial.new(root, {
|
|
minGridDistance: 30,
|
|
});
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
renderer: yRenderer,
|
|
})
|
|
);
|
|
|
|
yRenderer.grid.template.setAll({
|
|
strokeDasharray: [2, 2],
|
|
stroke: KTUtil.getCssVariableValue("--bs-gray-400"),
|
|
});
|
|
|
|
yRenderer.labels.template.setAll({
|
|
fontWeight: "500",
|
|
fontSize: 12,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
// Create series
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
|
|
var series1 = chart.series.push(
|
|
am5radar.RadarLineSeries.new(root, {
|
|
name: "Revenue",
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "value1",
|
|
categoryXField: "name",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
})
|
|
);
|
|
|
|
series1.strokes.template.setAll({
|
|
strokeOpacity: 0,
|
|
});
|
|
|
|
series1.fills.template.setAll({
|
|
visible: true,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
fillOpacity: 0.5,
|
|
});
|
|
|
|
var series2 = chart.series.push(
|
|
am5radar.RadarLineSeries.new(root, {
|
|
name: "Expense",
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "value2",
|
|
categoryXField: "name",
|
|
stacked: true,
|
|
tooltip: am5.Tooltip.new(root, {
|
|
labelText: "Revenue: {value1}\nExpense:{value2}",
|
|
}),
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
})
|
|
);
|
|
|
|
series2.strokes.template.setAll({
|
|
strokeOpacity: 0,
|
|
});
|
|
|
|
series2.fills.template.setAll({
|
|
visible: true,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
fillOpacity: 0.5,
|
|
});
|
|
|
|
var legend = chart.radarContainer.children.push(
|
|
am5.Legend.new(root, {
|
|
width: 150,
|
|
centerX: am5.p50,
|
|
centerY: am5.p50,
|
|
})
|
|
);
|
|
legend.data.setAll([series1, series2]);
|
|
|
|
legend.labels.template.setAll({
|
|
fontWeight: "600",
|
|
fontSize: 13,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
// Set data
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
|
|
var data = [
|
|
{
|
|
name: "Openlane",
|
|
value1: 160.2,
|
|
value2: 66.9,
|
|
},
|
|
{
|
|
name: "Yearin",
|
|
value1: 150.1,
|
|
value2: 50.5,
|
|
},
|
|
{
|
|
name: "Goodsilron",
|
|
value1: 120.7,
|
|
value2: 32.3,
|
|
},
|
|
{
|
|
name: "Condax",
|
|
value1: 89.4,
|
|
value2: 74.5,
|
|
},
|
|
{
|
|
name: "Opentech",
|
|
value1: 78.5,
|
|
value2: 29.7,
|
|
},
|
|
{
|
|
name: "Golddex",
|
|
value1: 77.6,
|
|
value2: 102.2,
|
|
},
|
|
{
|
|
name: "Isdom",
|
|
value1: 69.8,
|
|
value2: 22.6,
|
|
},
|
|
{
|
|
name: "Plusstrip",
|
|
value1: 63.6,
|
|
value2: 45.3,
|
|
},
|
|
{
|
|
name: "Kinnamplus",
|
|
value1: 59.7,
|
|
value2: 12.8,
|
|
},
|
|
{
|
|
name: "Zumgoity",
|
|
value1: 54.3,
|
|
value2: 19.6,
|
|
},
|
|
{
|
|
name: "Stanredtax",
|
|
value1: 52.9,
|
|
value2: 96.3,
|
|
},
|
|
{
|
|
name: "Conecom",
|
|
value1: 42.9,
|
|
value2: 11.9,
|
|
},
|
|
{
|
|
name: "Zencorporation",
|
|
value1: 40.9,
|
|
value2: 16.8,
|
|
},
|
|
{
|
|
name: "Iselectrics",
|
|
value1: 39.2,
|
|
value2: 9.9,
|
|
},
|
|
{
|
|
name: "Treequote",
|
|
value1: 36.6,
|
|
value2: 36.9,
|
|
},
|
|
{
|
|
name: "Sumace",
|
|
value1: 34.8,
|
|
value2: 14.6,
|
|
},
|
|
{
|
|
name: "Lexiqvolax",
|
|
value1: 32.1,
|
|
value2: 35.6,
|
|
},
|
|
{
|
|
name: "Sunnamplex",
|
|
value1: 31.8,
|
|
value2: 5.9,
|
|
},
|
|
{
|
|
name: "Faxquote",
|
|
value1: 29.3,
|
|
value2: 14.7,
|
|
},
|
|
{
|
|
name: "Donware",
|
|
value1: 23.0,
|
|
value2: 2.8,
|
|
},
|
|
{
|
|
name: "Warephase",
|
|
value1: 21.5,
|
|
value2: 12.1,
|
|
},
|
|
{
|
|
name: "Donquadtech",
|
|
value1: 19.7,
|
|
value2: 10.8,
|
|
},
|
|
{
|
|
name: "Nam-zim",
|
|
value1: 15.5,
|
|
value2: 4.1,
|
|
},
|
|
{
|
|
name: "Y-corporation",
|
|
value1: 14.2,
|
|
value2: 11.3,
|
|
},
|
|
];
|
|
|
|
series1.data.setAll(data);
|
|
series2.data.setAll(data);
|
|
xAxis.data.setAll(data);
|
|
|
|
// Animate chart and series in
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
|
|
series1.appear(1000);
|
|
series2.appear(1000);
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
// On amchart ready
|
|
am5.ready(function () {
|
|
init();
|
|
}); // end am5.ready()
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart1();
|
|
initChart2();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget25;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget25.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget26 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_charts_widget_26");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-primary");
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-primary");
|
|
var chartInfo = element.getAttribute("data-kt-chart-info");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: chartInfo,
|
|
data: [
|
|
34.5, 34.5, 35, 35, 35.5, 35.5, 35, 35, 35.5, 35.5, 35,
|
|
35, 34.5, 34.5, 35, 35, 35.5, 35.5, 35,
|
|
],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0,
|
|
stops: [0, 80, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"",
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 07",
|
|
"Apr 08",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 11",
|
|
"Apr 12",
|
|
"Apr 13",
|
|
"Apr 14",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"Apr 19",
|
|
"Apr 21",
|
|
"",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
tickAmount: 6,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: true,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
max: 36.3,
|
|
min: 33,
|
|
tickAmount: 6,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
formatter: function (val) {
|
|
return "$" + parseInt(10 * val);
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$" + parseInt(10 * val);
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart();
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget26;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget26.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget27 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_charts_widget_27");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var maxValue = 18;
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Sessions",
|
|
data: [12.478, 7.546, 6.083, 5.041, 4.42],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
height: 350,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 8,
|
|
horizontal: true,
|
|
distributed: true,
|
|
barHeight: 50,
|
|
dataLabels: {
|
|
position: "bottom", // use 'bottom' for left and 'top' for right align(textAnchor)
|
|
},
|
|
},
|
|
},
|
|
dataLabels: {
|
|
// Docs: https://apexcharts.com/docs/options/datalabels/
|
|
enabled: true,
|
|
textAnchor: "start",
|
|
offsetX: 0,
|
|
formatter: function (val, opts) {
|
|
var val = val * 1000;
|
|
var Format = wNumb({
|
|
//prefix: '$',
|
|
//suffix: ',-',
|
|
thousand: ",",
|
|
});
|
|
|
|
return Format.to(val);
|
|
},
|
|
style: {
|
|
fontSize: "14px",
|
|
fontWeight: "600",
|
|
align: "left",
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
colors: ["#3E97FF", "#F1416C", "#50CD89", "#FFC700", "#7239EA"],
|
|
xaxis: {
|
|
categories: ["USA", "India", "Canada", "Brasil", "France"],
|
|
labels: {
|
|
formatter: function (val) {
|
|
return val + "K";
|
|
},
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "14px",
|
|
fontWeight: "600",
|
|
align: "left",
|
|
},
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (val, opt) {
|
|
if (Number.isInteger(val)) {
|
|
var percentage = parseInt(
|
|
(val * 100) / maxValue
|
|
).toString();
|
|
return val + " - " + percentage + "%";
|
|
} else {
|
|
return val;
|
|
}
|
|
},
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "14px",
|
|
fontWeight: "600",
|
|
},
|
|
offsetY: 2,
|
|
align: "left",
|
|
},
|
|
},
|
|
grid: {
|
|
borderColor: borderColor,
|
|
xaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: false,
|
|
},
|
|
},
|
|
strokeDashArray: 4,
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val;
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget27;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget27.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget28 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_charts_widget_28");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-info");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Links",
|
|
data: [
|
|
190, 230, 230, 200, 200, 190, 190, 200, 200, 220, 220,
|
|
200, 200, 210, 210,
|
|
],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0,
|
|
stops: [0, 80, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"May 04",
|
|
"May 05",
|
|
"May 06",
|
|
"May 09",
|
|
"May 10",
|
|
"May 12",
|
|
"May 14",
|
|
"May 17",
|
|
"May 18",
|
|
"May 20",
|
|
"May 22",
|
|
"May 24",
|
|
"May 26",
|
|
"May 28",
|
|
"May 30",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
offsetX: 20,
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
tickAmount: 3,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
max: 250,
|
|
min: 100,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
formatter: function (val) {
|
|
return val;
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val;
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget28;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget28.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget29 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_charts_widget_29");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-warning");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Position",
|
|
data: [4, 7.5, 7.5, 6, 6, 4, 4, 6, 6, 8, 8, 6, 6, 7, 7],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0,
|
|
stops: [0, 80, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 12",
|
|
"Apr 14",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"Apr 18",
|
|
"Apr 20",
|
|
"Apr 22",
|
|
"Apr 24",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
offsetX: 20,
|
|
tickAmount: 4,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
max: 10,
|
|
min: 1,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
formatter: function (val) {
|
|
return val;
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val;
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget29;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget29.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget3 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_charts_widget_3");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-success");
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-success");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Sales",
|
|
data: [
|
|
18, 18, 20, 20, 18, 18, 22, 22, 20, 20, 18, 18, 20, 20,
|
|
18, 18, 20, 20, 22,
|
|
],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0,
|
|
stops: [0, 80, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"",
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 07",
|
|
"Apr 08",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 11",
|
|
"Apr 12",
|
|
"Apr 13",
|
|
"Apr 14",
|
|
"Apr 15",
|
|
"Apr 16",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
tickAmount: 6,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: true,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
max: 24,
|
|
min: 10,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
formatter: function (val) {
|
|
return "$" + val + "K";
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$" + val + "K";
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget3;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget3.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget30 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_30_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
|
|
// start and end angle must be set both for chart and series
|
|
var chart = root.container.children.push(
|
|
am5percent.PieChart.new(root, {
|
|
startAngle: 180,
|
|
endAngle: 360,
|
|
layout: root.verticalLayout,
|
|
innerRadius: am5.percent(50),
|
|
})
|
|
);
|
|
|
|
// Create series
|
|
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
|
|
// start and end angle must be set both for chart and series
|
|
var series = chart.series.push(
|
|
am5percent.PieSeries.new(root, {
|
|
startAngle: 180,
|
|
endAngle: 360,
|
|
valueField: "value",
|
|
categoryField: "category",
|
|
alignLabels: false,
|
|
})
|
|
);
|
|
|
|
series.labels.template.setAll({
|
|
fontWeight: "400",
|
|
fontSize: 13,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-500")),
|
|
});
|
|
|
|
series.states.create("hidden", {
|
|
startAngle: 180,
|
|
endAngle: 180,
|
|
});
|
|
|
|
series.slices.template.setAll({
|
|
cornerRadius: 5,
|
|
});
|
|
|
|
series.ticks.template.setAll({
|
|
forceHidden: true,
|
|
});
|
|
|
|
// Set data
|
|
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data
|
|
series.data.setAll([
|
|
{
|
|
value: 10,
|
|
category: "One",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
},
|
|
{
|
|
value: 9,
|
|
category: "Two",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
},
|
|
{
|
|
value: 6,
|
|
category: "Three",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-danger")),
|
|
},
|
|
{
|
|
value: 5,
|
|
category: "Four",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-warning")),
|
|
},
|
|
{
|
|
value: 4,
|
|
category: "Five",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-info")),
|
|
},
|
|
{
|
|
value: 3,
|
|
category: "Six",
|
|
fill: am5.color(
|
|
KTUtil.getCssVariableValue("--bs-secondary")
|
|
),
|
|
},
|
|
]);
|
|
|
|
series.appear(1000, 100);
|
|
};
|
|
|
|
am5.ready(function () {
|
|
init();
|
|
});
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget30;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget30.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget31 = (function () {
|
|
// Private methods
|
|
var initChart1 = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_charts_widget_31_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var chart;
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/
|
|
chart = root.container.children.push(
|
|
am5radar.RadarChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
wheelX: "panX",
|
|
wheelY: "zoomX",
|
|
innerRadius: am5.percent(40),
|
|
radius: am5.percent(70),
|
|
arrangeTooltips: false,
|
|
})
|
|
);
|
|
|
|
var cursor = chart.set(
|
|
"cursor",
|
|
am5radar.RadarCursor.new(root, {
|
|
behavior: "zoomX",
|
|
})
|
|
);
|
|
|
|
cursor.lineY.set("visible", false);
|
|
|
|
// Create axes and their renderers
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
|
|
var xRenderer = am5radar.AxisRendererCircular.new(root, {
|
|
minGridDistance: 30,
|
|
});
|
|
|
|
xRenderer.labels.template.setAll({
|
|
textType: "radial",
|
|
radius: 10,
|
|
paddingTop: 0,
|
|
paddingBottom: 0,
|
|
centerY: am5.p50,
|
|
fontWeight: "400",
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-800")),
|
|
});
|
|
|
|
xRenderer.grid.template.setAll({
|
|
location: 0.5,
|
|
strokeDasharray: [2, 2],
|
|
stroke: KTUtil.getCssVariableValue("--bs-gray-400"),
|
|
});
|
|
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
maxDeviation: 0,
|
|
categoryField: "name",
|
|
renderer: xRenderer,
|
|
})
|
|
);
|
|
|
|
var yRenderer = am5radar.AxisRendererRadial.new(root, {
|
|
minGridDistance: 30,
|
|
});
|
|
|
|
yRenderer.labels.template.setAll({
|
|
fontWeight: "500",
|
|
fontSize: 12,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
renderer: yRenderer,
|
|
})
|
|
);
|
|
|
|
yRenderer.grid.template.setAll({
|
|
strokeDasharray: [2, 2],
|
|
stroke: KTUtil.getCssVariableValue("--bs-gray-400"),
|
|
});
|
|
|
|
// Create series
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
|
|
var series1 = chart.series.push(
|
|
am5radar.RadarLineSeries.new(root, {
|
|
name: "Revenue",
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "value1",
|
|
categoryXField: "name",
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
})
|
|
);
|
|
|
|
series1.strokes.template.setAll({
|
|
strokeOpacity: 0,
|
|
});
|
|
|
|
series1.fills.template.setAll({
|
|
visible: true,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
fillOpacity: 0.5,
|
|
});
|
|
|
|
var series2 = chart.series.push(
|
|
am5radar.RadarLineSeries.new(root, {
|
|
name: "Expense",
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "value2",
|
|
categoryXField: "name",
|
|
stacked: true,
|
|
tooltip: am5.Tooltip.new(root, {
|
|
labelText: "Revenue: {value1}\nExpense:{value2}",
|
|
}),
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
})
|
|
);
|
|
|
|
series2.strokes.template.setAll({
|
|
strokeOpacity: 0,
|
|
});
|
|
|
|
series2.fills.template.setAll({
|
|
visible: true,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-primary")),
|
|
fillOpacity: 0.5,
|
|
});
|
|
|
|
var legend = chart.radarContainer.children.push(
|
|
am5.Legend.new(root, {
|
|
width: 150,
|
|
centerX: am5.p50,
|
|
centerY: am5.p50,
|
|
})
|
|
);
|
|
legend.data.setAll([series1, series2]);
|
|
|
|
legend.labels.template.setAll({
|
|
fontWeight: "600",
|
|
fontSize: 13,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
// Set data
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
|
|
var data = [
|
|
{
|
|
name: "Openlane",
|
|
value1: 160.2,
|
|
value2: 26.9,
|
|
},
|
|
{
|
|
name: "Yearin",
|
|
value1: 120.1,
|
|
value2: 50.5,
|
|
},
|
|
{
|
|
name: "Goodsilron",
|
|
value1: 150.7,
|
|
value2: 12.3,
|
|
},
|
|
{
|
|
name: "Condax",
|
|
value1: 69.4,
|
|
value2: 74.5,
|
|
},
|
|
{
|
|
name: "Opentech",
|
|
value1: 78.5,
|
|
value2: 29.7,
|
|
},
|
|
{
|
|
name: "Golddex",
|
|
value1: 77.6,
|
|
value2: 102.2,
|
|
},
|
|
{
|
|
name: "Isdom",
|
|
value1: 69.8,
|
|
value2: 22.6,
|
|
},
|
|
{
|
|
name: "Plusstrip",
|
|
value1: 63.6,
|
|
value2: 45.3,
|
|
},
|
|
{
|
|
name: "Kinnamplus",
|
|
value1: 59.7,
|
|
value2: 12.8,
|
|
},
|
|
{
|
|
name: "Zumgoity",
|
|
value1: 64.3,
|
|
value2: 19.6,
|
|
},
|
|
{
|
|
name: "Stanredtax",
|
|
value1: 52.9,
|
|
value2: 96.3,
|
|
},
|
|
{
|
|
name: "Conecom",
|
|
value1: 42.9,
|
|
value2: 11.9,
|
|
},
|
|
{
|
|
name: "Zencorporation",
|
|
value1: 40.9,
|
|
value2: 16.8,
|
|
},
|
|
{
|
|
name: "Iselectrics",
|
|
value1: 39.2,
|
|
value2: 9.9,
|
|
},
|
|
{
|
|
name: "Treequote",
|
|
value1: 76.6,
|
|
value2: 36.9,
|
|
},
|
|
{
|
|
name: "Sumace",
|
|
value1: 34.8,
|
|
value2: 14.6,
|
|
},
|
|
{
|
|
name: "Lexiqvolax",
|
|
value1: 32.1,
|
|
value2: 35.6,
|
|
},
|
|
{
|
|
name: "Sunnamplex",
|
|
value1: 31.8,
|
|
value2: 5.9,
|
|
},
|
|
{
|
|
name: "Faxquote",
|
|
value1: 29.3,
|
|
value2: 14.7,
|
|
},
|
|
{
|
|
name: "Donware",
|
|
value1: 23.0,
|
|
value2: 2.8,
|
|
},
|
|
{
|
|
name: "Warephase",
|
|
value1: 21.5,
|
|
value2: 12.1,
|
|
},
|
|
{
|
|
name: "Donquadtech",
|
|
value1: 19.7,
|
|
value2: 10.8,
|
|
},
|
|
{
|
|
name: "Nam-zim",
|
|
value1: 15.5,
|
|
value2: 4.1,
|
|
},
|
|
{
|
|
name: "Y-corporation",
|
|
value1: 14.2,
|
|
value2: 11.3,
|
|
},
|
|
];
|
|
|
|
series1.data.setAll(data);
|
|
series2.data.setAll(data);
|
|
xAxis.data.setAll(data);
|
|
|
|
// Animate chart and series in
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
|
|
series1.appear(1000);
|
|
series2.appear(1000);
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
// On amchart ready
|
|
am5.ready(function () {
|
|
init();
|
|
}); // end am5.ready()
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart1();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget31;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget31.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget32 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (
|
|
chart,
|
|
toggle,
|
|
chartSelector,
|
|
data,
|
|
initByDefault
|
|
) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-900");
|
|
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Deliveries",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: ["22%"],
|
|
borderRadius: 5,
|
|
dataLabels: {
|
|
position: "top", // top, center, bottom
|
|
},
|
|
startingShape: "flat",
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
offsetY: -28,
|
|
style: {
|
|
fontSize: "13px",
|
|
colors: [labelColor],
|
|
},
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ["transparent"],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"Grossey",
|
|
"Pet Food",
|
|
"Flowers",
|
|
"Restaurant",
|
|
"Kids Toys",
|
|
"Clothing",
|
|
"Still Water",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
fill: {
|
|
gradient: {
|
|
opacityFrom: 0,
|
|
opacityTo: 0,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
colors: [
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
KTUtil.getCssVariableValue("--bs-primary-light"),
|
|
],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
var tab = document.querySelector(toggle);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (chart.rendered === false) {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var chart1Data = [54, 42, 75, 110, 23, 87, 50];
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_32_tab_1",
|
|
"#kt_charts_widget_32_chart_1",
|
|
chart1Data,
|
|
true
|
|
);
|
|
|
|
var chart2Data = [25, 55, 35, 50, 45, 20, 31];
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_32_tab_2",
|
|
"#kt_charts_widget_32_chart_2",
|
|
chart2Data,
|
|
false
|
|
);
|
|
|
|
var chart3Data = [45, 15, 35, 70, 45, 50, 21];
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_32_tab_3",
|
|
"#kt_charts_widget_32_chart_3",
|
|
chart3Data,
|
|
false
|
|
);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_32_tab_1",
|
|
"#kt_charts_widget_32_chart_1",
|
|
chart1Data,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_32_tab_2",
|
|
"#kt_charts_widget_32_chart_2",
|
|
chart2Data,
|
|
chart2.rendered
|
|
);
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_32_tab_3",
|
|
"#kt_charts_widget_32_chart_3",
|
|
chart3Data,
|
|
chart3.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget32;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget32.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget33 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart4 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart5 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (
|
|
chart,
|
|
toggle,
|
|
chartSelector,
|
|
data,
|
|
labels,
|
|
initByDefault
|
|
) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Etherium ",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.2,
|
|
stops: [15, 120, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: labels,
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
offsetX: 20,
|
|
tickAmount: 4,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: false,
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
max: 4000,
|
|
min: 1000,
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + "$";
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 3,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
var tab = document.querySelector(toggle);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (chart.rendered === false) {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var chart1Data = [
|
|
2100, 3200, 3200, 2400, 2400, 1800, 1800, 2400, 2400, 3200,
|
|
3200, 3000, 3000, 3250, 3250,
|
|
];
|
|
var chart1Labels = [
|
|
"10AM",
|
|
"10.30AM",
|
|
"11AM",
|
|
"11.15AM",
|
|
"11.30AM",
|
|
"12PM",
|
|
"1PM",
|
|
"2PM",
|
|
"3PM",
|
|
"4PM",
|
|
"5PM",
|
|
"6PM",
|
|
"7PM",
|
|
"8PM",
|
|
"9PM",
|
|
];
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_33_tab_1",
|
|
"#kt_charts_widget_33_chart_1",
|
|
chart1Data,
|
|
chart1Labels,
|
|
true
|
|
);
|
|
|
|
var chart2Data = [
|
|
2300, 2300, 2000, 3200, 3200, 2800, 2400, 2400, 3100, 2900,
|
|
3100, 3100, 2600, 2600, 3200,
|
|
];
|
|
var chart2Labels = [
|
|
"Apr 01",
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 07",
|
|
"Apr 08",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 11",
|
|
"Apr 12",
|
|
"Apr 13",
|
|
"Apr 14",
|
|
"Apr 15",
|
|
];
|
|
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_33_tab_2",
|
|
"#kt_charts_widget_33_chart_2",
|
|
chart2Data,
|
|
chart2Labels,
|
|
false
|
|
);
|
|
|
|
var chart3Data = [
|
|
2600, 3200, 2300, 2300, 2000, 3200, 3100, 2900, 3200, 3200,
|
|
2600, 3100, 2800, 2400, 2400,
|
|
];
|
|
var chart3Labels = [
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 12",
|
|
"Apr 14",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"Apr 18",
|
|
"Apr 20",
|
|
"Apr 22",
|
|
"Apr 24",
|
|
];
|
|
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_33_tab_3",
|
|
"#kt_charts_widget_33_chart_3",
|
|
chart3Data,
|
|
chart3Labels,
|
|
false
|
|
);
|
|
|
|
var chart4Data = [
|
|
1800, 1800, 2400, 2400, 3200, 3200, 3000, 2100, 3200, 3300,
|
|
2400, 2400, 3000, 3200, 3100,
|
|
];
|
|
var chart4Labels = [
|
|
"Jun 2021",
|
|
"Jul 2021",
|
|
"Aug 2021",
|
|
"Sep 2021",
|
|
"Oct 2021",
|
|
"Nov 2021",
|
|
"Dec 2021",
|
|
"Jan 2022",
|
|
"Feb 2022",
|
|
"Mar 2022",
|
|
"Apr 2022",
|
|
"May 2022",
|
|
"Jun 2022",
|
|
"Jul 2022",
|
|
"Aug 2022",
|
|
];
|
|
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_33_tab_4",
|
|
"#kt_charts_widget_33_chart_4",
|
|
chart4Data,
|
|
chart4Labels,
|
|
false
|
|
);
|
|
|
|
var chart5Data = [
|
|
3000, 2100, 3300, 3100, 1800, 1800, 2400, 2400, 3100, 3100,
|
|
2400, 2400, 3000, 2400, 2800,
|
|
];
|
|
var chart5Labels = [
|
|
"Sep 2021",
|
|
"Oct 2021",
|
|
"Nov 2021",
|
|
"Dec 2021",
|
|
"Jan 2022",
|
|
"Feb 2022",
|
|
"Mar 2022",
|
|
"Apr 2022",
|
|
"May 2022",
|
|
"Jun 2022",
|
|
"Jul 2022",
|
|
"Aug 2022",
|
|
"Sep 2022",
|
|
"Oct 2022",
|
|
"Nov 2022",
|
|
];
|
|
|
|
initChart(
|
|
chart5,
|
|
"#kt_charts_widget_33_tab_5",
|
|
"#kt_charts_widget_33_chart_5",
|
|
chart5Data,
|
|
chart5Labels,
|
|
false
|
|
);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
}
|
|
|
|
if (chart4.rendered) {
|
|
chart4.self.destroy();
|
|
}
|
|
|
|
if (chart5.rendered) {
|
|
chart5.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_33_tab_1",
|
|
"#kt_charts_widget_33_chart_1",
|
|
chart1Data,
|
|
chart1Labels,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_33_tab_2",
|
|
"#kt_charts_widget_33_chart_2",
|
|
chart2Data,
|
|
chart2Labels,
|
|
chart2.rendered
|
|
);
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_33_tab_3",
|
|
"#kt_charts_widget_33_chart_3",
|
|
chart3Data,
|
|
chart3Labels,
|
|
chart3.rendered
|
|
);
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_33_tab_4",
|
|
"#kt_charts_widget_33_chart_4",
|
|
chart4Data,
|
|
chart4Labels,
|
|
chart4.rendered
|
|
);
|
|
initChart(
|
|
chart5,
|
|
"#kt_charts_widget_33_tab_5",
|
|
"#kt_charts_widget_33_chart_5",
|
|
chart5Data,
|
|
chart5Labels,
|
|
chart5.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget33;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget33.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget34 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart4 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart5 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
// Private methods
|
|
var initChart = function (
|
|
chart,
|
|
toggle,
|
|
chartSelector,
|
|
data,
|
|
labels,
|
|
initByDefault
|
|
) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Earnings",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.2,
|
|
stops: [15, 120, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: labels,
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
offsetX: 20,
|
|
tickAmount: 4,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: false,
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
max: 4000,
|
|
min: 1000,
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + "$";
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 3,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
var tab = document.querySelector(toggle);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (chart.rendered === false) {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var chart1Data = [
|
|
2100, 2800, 2800, 2400, 2400, 1800, 1800, 2400, 2400, 3200,
|
|
3200, 2800, 2800, 3250, 3250,
|
|
];
|
|
var chart1Labels = [
|
|
"10AM",
|
|
"10.30AM",
|
|
"11AM",
|
|
"11.15AM",
|
|
"11.30AM",
|
|
"12PM",
|
|
"1PM",
|
|
"2PM",
|
|
"3PM",
|
|
"4PM",
|
|
"5PM",
|
|
"6PM",
|
|
"7PM",
|
|
"8PM",
|
|
"9PM",
|
|
];
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_34_tab_1",
|
|
"#kt_charts_widget_34_chart_1",
|
|
chart1Data,
|
|
chart1Labels,
|
|
true
|
|
);
|
|
|
|
var chart2Data = [
|
|
2300, 2300, 2000, 3100, 3100, 2800, 2400, 2400, 3100, 2900,
|
|
3200, 3200, 2600, 2600, 3200,
|
|
];
|
|
var chart2Labels = [
|
|
"Apr 01",
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 07",
|
|
"Apr 08",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 11",
|
|
"Apr 12",
|
|
"Apr 13",
|
|
"Apr 14",
|
|
"Apr 15",
|
|
];
|
|
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_34_tab_2",
|
|
"#kt_charts_widget_34_chart_2",
|
|
chart2Data,
|
|
chart2Labels,
|
|
false
|
|
);
|
|
|
|
var chart3Data = [
|
|
2600, 3400, 2300, 2300, 2000, 3100, 3100, 2900, 3200, 3200,
|
|
2600, 3100, 2800, 2400, 2400,
|
|
];
|
|
var chart3Labels = [
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 12",
|
|
"Apr 14",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"Apr 18",
|
|
"Apr 20",
|
|
"Apr 22",
|
|
"Apr 24",
|
|
];
|
|
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_34_tab_3",
|
|
"#kt_charts_widget_34_chart_3",
|
|
chart3Data,
|
|
chart3Labels,
|
|
false
|
|
);
|
|
|
|
var chart4Data = [
|
|
1800, 1800, 2400, 2400, 3100, 3100, 3000, 2100, 3200, 3200,
|
|
2400, 2400, 3000, 3200, 3100,
|
|
];
|
|
var chart4Labels = [
|
|
"Jun 2021",
|
|
"Jul 2021",
|
|
"Aug 2021",
|
|
"Sep 2021",
|
|
"Oct 2021",
|
|
"Nov 2021",
|
|
"Dec 2021",
|
|
"Jan 2022",
|
|
"Feb 2022",
|
|
"Mar 2022",
|
|
"Apr 2022",
|
|
"May 2022",
|
|
"Jun 2022",
|
|
"Jul 2022",
|
|
"Aug 2022",
|
|
];
|
|
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_34_tab_4",
|
|
"#kt_charts_widget_34_chart_4",
|
|
chart4Data,
|
|
chart4Labels,
|
|
false
|
|
);
|
|
|
|
var chart5Data = [
|
|
3000, 2100, 3200, 3200, 1800, 1800, 2400, 2400, 3100, 3100,
|
|
2400, 2400, 3000, 2400, 2800,
|
|
];
|
|
var chart5Labels = [
|
|
"Sep 2021",
|
|
"Oct 2021",
|
|
"Nov 2021",
|
|
"Dec 2021",
|
|
"Jan 2022",
|
|
"Feb 2022",
|
|
"Mar 2022",
|
|
"Apr 2022",
|
|
"May 2022",
|
|
"Jun 2022",
|
|
"Jul 2022",
|
|
"Aug 2022",
|
|
"Sep 2022",
|
|
"Oct 2022",
|
|
"Nov 2022",
|
|
];
|
|
|
|
initChart(
|
|
chart5,
|
|
"#kt_charts_widget_34_tab_5",
|
|
"#kt_charts_widget_34_chart_5",
|
|
chart5Data,
|
|
chart5Labels,
|
|
false
|
|
);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
}
|
|
|
|
if (chart4.rendered) {
|
|
chart4.self.destroy();
|
|
}
|
|
|
|
if (chart5.rendered) {
|
|
chart5.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_34_tab_1",
|
|
"#kt_charts_widget_34_chart_1",
|
|
chart1Data,
|
|
chart1Labels,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_34_tab_2",
|
|
"#kt_charts_widget_34_chart_2",
|
|
chart2Data,
|
|
chart2Labels,
|
|
chart2.rendered
|
|
);
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_34_tab_3",
|
|
"#kt_charts_widget_34_chart_3",
|
|
chart3Data,
|
|
chart3Labels,
|
|
chart3.rendered
|
|
);
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_34_tab_4",
|
|
"#kt_charts_widget_34_chart_4",
|
|
chart4Data,
|
|
chart4Labels,
|
|
chart4.rendered
|
|
);
|
|
initChart(
|
|
chart5,
|
|
"#kt_charts_widget_34_tab_5",
|
|
"#kt_charts_widget_34_chart_5",
|
|
chart5Data,
|
|
chart5Labels,
|
|
chart5.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget34;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget34.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget35 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart4 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart5 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (
|
|
chart,
|
|
toggle,
|
|
chartSelector,
|
|
data,
|
|
labels,
|
|
initByDefault
|
|
) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Earnings",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.2,
|
|
stops: [15, 120, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: labels,
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
offsetX: 20,
|
|
tickAmount: 4,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: false,
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
max: 4000,
|
|
min: 1000,
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + "$";
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 3,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
var tab = document.querySelector(toggle);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (chart.rendered === false) {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var chart1Data = [
|
|
2100, 3100, 3100, 2400, 2400, 1800, 1800, 2400, 2400, 3200,
|
|
3200, 2800, 2800, 3250, 3250,
|
|
];
|
|
var chart1Labels = [
|
|
"10AM",
|
|
"10.30AM",
|
|
"11AM",
|
|
"11.15AM",
|
|
"11.30AM",
|
|
"12PM",
|
|
"1PM",
|
|
"2PM",
|
|
"3PM",
|
|
"4PM",
|
|
"5PM",
|
|
"6PM",
|
|
"7PM",
|
|
"8PM",
|
|
"9PM",
|
|
];
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_35_tab_1",
|
|
"#kt_charts_widget_35_chart_1",
|
|
chart1Data,
|
|
chart1Labels,
|
|
true
|
|
);
|
|
|
|
var chart2Data = [
|
|
2300, 2300, 2000, 3200, 3200, 2800, 2400, 2400, 3100, 2900,
|
|
3200, 3200, 2600, 2600, 3200,
|
|
];
|
|
var chart2Labels = [
|
|
"Apr 01",
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 07",
|
|
"Apr 08",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 11",
|
|
"Apr 12",
|
|
"Apr 13",
|
|
"Apr 14",
|
|
"Apr 15",
|
|
];
|
|
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_35_tab_2",
|
|
"#kt_charts_widget_35_chart_2",
|
|
chart2Data,
|
|
chart2Labels,
|
|
false
|
|
);
|
|
|
|
var chart3Data = [
|
|
2600, 3200, 2300, 2300, 2000, 3200, 3100, 2900, 3400, 3400,
|
|
2600, 3200, 2800, 2400, 2400,
|
|
];
|
|
var chart3Labels = [
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 12",
|
|
"Apr 14",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"Apr 18",
|
|
"Apr 20",
|
|
"Apr 22",
|
|
"Apr 24",
|
|
];
|
|
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_35_tab_3",
|
|
"#kt_charts_widget_35_chart_3",
|
|
chart3Data,
|
|
chart3Labels,
|
|
false
|
|
);
|
|
|
|
var chart4Data = [
|
|
1800, 1800, 2400, 2400, 3200, 3200, 3000, 2100, 3200, 3200,
|
|
2400, 2400, 3000, 3200, 3100,
|
|
];
|
|
var chart4Labels = [
|
|
"Jun 2021",
|
|
"Jul 2021",
|
|
"Aug 2021",
|
|
"Sep 2021",
|
|
"Oct 2021",
|
|
"Nov 2021",
|
|
"Dec 2021",
|
|
"Jan 2022",
|
|
"Feb 2022",
|
|
"Mar 2022",
|
|
"Apr 2022",
|
|
"May 2022",
|
|
"Jun 2022",
|
|
"Jul 2022",
|
|
"Aug 2022",
|
|
];
|
|
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_35_tab_4",
|
|
"#kt_charts_widget_35_chart_4",
|
|
chart4Data,
|
|
chart4Labels,
|
|
false
|
|
);
|
|
|
|
var chart5Data = [
|
|
3200, 2100, 3200, 3200, 3200, 3500, 3000, 2400, 3250, 2400,
|
|
2400, 3250, 3000, 2400, 2800,
|
|
];
|
|
var chart5Labels = [
|
|
"Sep 2021",
|
|
"Oct 2021",
|
|
"Nov 2021",
|
|
"Dec 2021",
|
|
"Jan 2022",
|
|
"Feb 2022",
|
|
"Mar 2022",
|
|
"Apr 2022",
|
|
"May 2022",
|
|
"Jun 2022",
|
|
"Jul 2022",
|
|
"Aug 2022",
|
|
"Sep 2022",
|
|
"Oct 2022",
|
|
"Nov 2022",
|
|
];
|
|
|
|
initChart(
|
|
chart5,
|
|
"#kt_charts_widget_35_tab_5",
|
|
"#kt_charts_widget_35_chart_5",
|
|
chart5Data,
|
|
chart5Labels,
|
|
false
|
|
);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
}
|
|
|
|
if (chart4.rendered) {
|
|
chart4.self.destroy();
|
|
}
|
|
|
|
if (chart5.rendered) {
|
|
chart5.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_35_tab_1",
|
|
"#kt_charts_widget_35_chart_1",
|
|
chart1Data,
|
|
chart1Labels,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_35_tab_2",
|
|
"#kt_charts_widget_35_chart_2",
|
|
chart2Data,
|
|
chart2Labels,
|
|
chart2.rendered
|
|
);
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_35_tab_3",
|
|
"#kt_charts_widget_35_chart_3",
|
|
chart3Data,
|
|
chart3Labels,
|
|
chart3.rendered
|
|
);
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_35_tab_4",
|
|
"#kt_charts_widget_35_chart_4",
|
|
chart4Data,
|
|
chart4Labels,
|
|
chart4.rendered
|
|
);
|
|
initChart(
|
|
chart5,
|
|
"#kt_charts_widget_35_tab_5",
|
|
"#kt_charts_widget_35_chart_5",
|
|
chart5Data,
|
|
chart5Labels,
|
|
chart5.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget35;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget35.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget36 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_charts_widget_36");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseprimaryColor = KTUtil.getCssVariableValue("--bs-primary");
|
|
var lightprimaryColor = KTUtil.getCssVariableValue("--bs-primary");
|
|
var basesuccessColor = KTUtil.getCssVariableValue("--bs-success");
|
|
var lightsuccessColor = KTUtil.getCssVariableValue("--bs-success");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Payment Gateway",
|
|
data: [
|
|
65, 80, 80, 60, 60, 45, 45, 80, 80, 70, 70, 90, 90, 80,
|
|
80, 80, 60, 60, 50,
|
|
],
|
|
},
|
|
{
|
|
name: "Bank Transfer",
|
|
data: [
|
|
90, 110, 110, 95, 95, 85, 85, 95, 95, 115, 115, 100,
|
|
100, 115, 115, 95, 95, 85, 85,
|
|
],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.2,
|
|
stops: [15, 120, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseprimaryColor, basesuccessColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"",
|
|
"8 AM",
|
|
"81 AM",
|
|
"9 AM",
|
|
"10 AM",
|
|
"11 AM",
|
|
"12 PM",
|
|
"13 PM",
|
|
"14 PM",
|
|
"15 PM",
|
|
"16 PM",
|
|
"17 PM",
|
|
"18 PM",
|
|
"18:20 PM",
|
|
"18:20 PM",
|
|
"19 PM",
|
|
"20 PM",
|
|
"21 PM",
|
|
"",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
tickAmount: 6,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: true,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: [baseprimaryColor, basesuccessColor],
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
max: 120,
|
|
min: 30,
|
|
tickAmount: 6,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
colors: [lightprimaryColor, lightsuccessColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: [baseprimaryColor, basesuccessColor],
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget36;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget36.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget37 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart4 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (
|
|
chart,
|
|
toggle,
|
|
chartSelector,
|
|
data,
|
|
labels,
|
|
initByDefault
|
|
) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Earnings",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.2,
|
|
stops: [15, 120, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: labels,
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
offsetX: 20,
|
|
tickAmount: 4,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: false,
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
max: 4000,
|
|
min: 1000,
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + "$";
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 3,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
var tab = document.querySelector(toggle);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (chart.rendered === false) {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var chart1Data = [
|
|
2100, 3200, 3200, 2400, 2400, 1800, 1800, 2400, 2400, 3200,
|
|
3200, 3000, 3000, 3250, 3250,
|
|
];
|
|
var chart1Labels = [
|
|
"10AM",
|
|
"10.30AM",
|
|
"11AM",
|
|
"11.15AM",
|
|
"11.30AM",
|
|
"12PM",
|
|
"1PM",
|
|
"2PM",
|
|
"3PM",
|
|
"4PM",
|
|
"5PM",
|
|
"6PM",
|
|
"7PM",
|
|
"8PM",
|
|
"9PM",
|
|
];
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_37_tab_1",
|
|
"#kt_charts_widget_37_chart_1",
|
|
chart1Data,
|
|
chart1Labels,
|
|
true
|
|
);
|
|
|
|
var chart2Data = [
|
|
2300, 2300, 2000, 3200, 3200, 2800, 2400, 2400, 3100, 2900,
|
|
3100, 3100, 2600, 2600, 3200,
|
|
];
|
|
var chart2Labels = [
|
|
"Apr 01",
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 07",
|
|
"Apr 08",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 11",
|
|
"Apr 12",
|
|
"Apr 13",
|
|
"Apr 14",
|
|
"Apr 15",
|
|
];
|
|
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_37_tab_2",
|
|
"#kt_charts_widget_37_chart_2",
|
|
chart2Data,
|
|
chart2Labels,
|
|
false
|
|
);
|
|
|
|
var chart3Data = [
|
|
2600, 3200, 2300, 2300, 2000, 3200, 3100, 2900, 3200, 3200,
|
|
2600, 3100, 2800, 2400, 2400,
|
|
];
|
|
var chart3Labels = [
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 12",
|
|
"Apr 14",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"Apr 18",
|
|
"Apr 20",
|
|
"Apr 22",
|
|
"Apr 24",
|
|
];
|
|
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_37_tab_3",
|
|
"#kt_charts_widget_37_chart_3",
|
|
chart3Data,
|
|
chart3Labels,
|
|
false
|
|
);
|
|
|
|
var chart4Data = [
|
|
1800, 1800, 2400, 2400, 3200, 3200, 3000, 2100, 3200, 3300,
|
|
2400, 2400, 3000, 3200, 3100,
|
|
];
|
|
var chart4Labels = [
|
|
"Jun 2021",
|
|
"Jul 2021",
|
|
"Aug 2021",
|
|
"Sep 2021",
|
|
"Oct 2021",
|
|
"Nov 2021",
|
|
"Dec 2021",
|
|
"Jan 2022",
|
|
"Feb 2022",
|
|
"Mar 2022",
|
|
"Apr 2022",
|
|
"May 2022",
|
|
"Jun 2022",
|
|
"Jul 2022",
|
|
"Aug 2022",
|
|
];
|
|
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_37_tab_4",
|
|
"#kt_charts_widget_37_chart_4",
|
|
chart4Data,
|
|
chart4Labels,
|
|
false
|
|
);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
}
|
|
|
|
if (chart4.rendered) {
|
|
chart4.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_37_tab_1",
|
|
"#kt_charts_widget_37_chart_1",
|
|
chart1Data,
|
|
chart1Labels,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_37_tab_2",
|
|
"#kt_charts_widget_37_chart_2",
|
|
chart2Data,
|
|
chart2Labels,
|
|
chart2.rendered
|
|
);
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_37_tab_3",
|
|
"#kt_charts_widget_37_chart_3",
|
|
chart3Data,
|
|
chart3Labels,
|
|
chart3.rendered
|
|
);
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_37_tab_4",
|
|
"#kt_charts_widget_37_chart_4",
|
|
chart4Data,
|
|
chart4Labels,
|
|
chart4.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget37;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget37.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget38 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_charts_widget_38_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-900");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "LOI Issued",
|
|
data: [54, 42, 75, 110, 23, 87, 50],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: ["28%"],
|
|
borderRadius: 5,
|
|
dataLabels: {
|
|
position: "top", // top, center, bottom
|
|
},
|
|
startingShape: "flat",
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
offsetY: -28,
|
|
style: {
|
|
fontSize: "13px",
|
|
colors: [labelColor],
|
|
},
|
|
formatter: function (val) {
|
|
return val; // + "H";
|
|
},
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ["transparent"],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"E2E",
|
|
"IMC",
|
|
"SSMC",
|
|
"SSBD",
|
|
"ICCD",
|
|
"PAN",
|
|
"SBN",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
fill: {
|
|
gradient: {
|
|
opacityFrom: 0,
|
|
opacityTo: 0,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
formatter: function (val) {
|
|
return val + "M";
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return +val + "M";
|
|
},
|
|
},
|
|
},
|
|
colors: [
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
KTUtil.getCssVariableValue("--bs-primary-light"),
|
|
],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart();
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget38;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget38.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget39 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.querySelector("#kt_charts_widget_39_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
if (!root) {
|
|
return;
|
|
}
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/
|
|
var chart = root.container.children.push(
|
|
am5radar.RadarChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
wheelX: "panX",
|
|
wheelY: "zoomX",
|
|
})
|
|
);
|
|
|
|
// Create axes and their renderers
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
|
|
var xRenderer = am5radar.AxisRendererCircular.new(root, {});
|
|
xRenderer.labels.template.setAll({
|
|
radius: 10,
|
|
});
|
|
|
|
xRenderer.grid.template.setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
var yRenderer = am5radar.AxisRendererRadial.new(root, {
|
|
minGridDistance: 20,
|
|
});
|
|
|
|
yRenderer.grid.template.setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
maxDeviation: 0,
|
|
categoryField: "category",
|
|
renderer: xRenderer,
|
|
tooltip: am5.Tooltip.new(root, {}),
|
|
})
|
|
);
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
min: 0,
|
|
max: 10,
|
|
renderer: yRenderer,
|
|
})
|
|
);
|
|
|
|
xRenderer.labels.template.setAll({
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-800")),
|
|
});
|
|
|
|
yRenderer.labels.template.setAll({
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-800")),
|
|
});
|
|
|
|
//yAxis.get("renderer").labels.template.set("forceHidden", true);
|
|
|
|
// Create series
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
|
|
var series = chart.series.push(
|
|
am5radar.RadarColumnSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "value",
|
|
categoryXField: "category",
|
|
})
|
|
);
|
|
|
|
series.columns.template.setAll({
|
|
tooltipText: "{categoryX}: {valueY}",
|
|
templateField: "columnSettings",
|
|
strokeOpacity: 0,
|
|
width: am5.p100,
|
|
});
|
|
|
|
// Set data
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
|
|
var data = [
|
|
{
|
|
category: "Spain",
|
|
value: 5,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "Spain",
|
|
value: 4,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "United States",
|
|
value: 9,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "Italy",
|
|
value: 7,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "France",
|
|
value: 8,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "Norway",
|
|
value: 4,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "Brasil",
|
|
value: 7,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "Canada",
|
|
value: 5,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
];
|
|
|
|
series.data.setAll(data);
|
|
xAxis.data.setAll(data);
|
|
|
|
// Animate chart
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
|
|
series.appear(1000);
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
// On amchart ready
|
|
am5.ready(function () {
|
|
init();
|
|
}); // end am5.ready()
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget39;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget39.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget4 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_charts_widget_4");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-primary");
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-primary");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Sales",
|
|
data: [
|
|
34.5, 34.5, 35, 35, 35.5, 35.5, 35, 35, 35.5, 35.5, 35,
|
|
35, 34.5, 34.5, 35, 35, 35.5, 35.5, 35,
|
|
],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0,
|
|
stops: [0, 80, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"",
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 07",
|
|
"Apr 08",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 11",
|
|
"Apr 12",
|
|
"Apr 13",
|
|
"Apr 14",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"Apr 19",
|
|
"Apr 21",
|
|
"",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
tickAmount: 6,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: true,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
max: 36.3,
|
|
min: 33,
|
|
tickAmount: 6,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
formatter: function (val) {
|
|
return "$" + parseInt(10 * val);
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$" + parseInt(10 * val);
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget4;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget4.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget40 = (function () {
|
|
// Private methods
|
|
var initChart = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.querySelector("#kt_charts_widget_40_chart");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
if (!root) {
|
|
return;
|
|
}
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create chart
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/
|
|
var chart = root.container.children.push(
|
|
am5radar.RadarChart.new(root, {
|
|
panX: false,
|
|
panY: false,
|
|
wheelX: "panX",
|
|
wheelY: "zoomX",
|
|
})
|
|
);
|
|
|
|
// Create axes and their renderers
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_axes
|
|
var xRenderer = am5radar.AxisRendererCircular.new(root, {});
|
|
xRenderer.labels.template.setAll({
|
|
radius: 10,
|
|
});
|
|
|
|
xRenderer.grid.template.setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
var yRenderer = am5radar.AxisRendererRadial.new(root, {
|
|
minGridDistance: 20,
|
|
});
|
|
|
|
yRenderer.grid.template.setAll({
|
|
stroke: am5.color(KTUtil.getCssVariableValue("--bs-gray-700")),
|
|
});
|
|
|
|
var xAxis = chart.xAxes.push(
|
|
am5xy.CategoryAxis.new(root, {
|
|
maxDeviation: 0,
|
|
categoryField: "category",
|
|
renderer: xRenderer,
|
|
tooltip: am5.Tooltip.new(root, {}),
|
|
})
|
|
);
|
|
|
|
var yAxis = chart.yAxes.push(
|
|
am5xy.ValueAxis.new(root, {
|
|
min: 0,
|
|
max: 10,
|
|
renderer: yRenderer,
|
|
})
|
|
);
|
|
|
|
xRenderer.labels.template.setAll({
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-800")),
|
|
});
|
|
|
|
yRenderer.labels.template.setAll({
|
|
fontSize: 11,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-800")),
|
|
});
|
|
|
|
//yAxis.get("renderer").labels.template.set("forceHidden", true);
|
|
|
|
// Create series
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Adding_series
|
|
var series = chart.series.push(
|
|
am5radar.RadarColumnSeries.new(root, {
|
|
xAxis: xAxis,
|
|
yAxis: yAxis,
|
|
valueYField: "value",
|
|
categoryXField: "category",
|
|
})
|
|
);
|
|
|
|
series.columns.template.setAll({
|
|
tooltipText: "{categoryX}: {valueY}",
|
|
templateField: "columnSettings",
|
|
strokeOpacity: 0,
|
|
width: am5.p100,
|
|
});
|
|
|
|
// Set data
|
|
// https://www.amcharts.com/docs/v5/charts/radar-chart/#Setting_data
|
|
var data = [
|
|
{
|
|
category: "Spain",
|
|
value: 5,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "Spain",
|
|
value: 4,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "United States",
|
|
value: 9,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "Italy",
|
|
value: 7,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "France",
|
|
value: 8,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "Norway",
|
|
value: 4,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "Brasil",
|
|
value: 7,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
{
|
|
category: "Canada",
|
|
value: 5,
|
|
columnSettings: {
|
|
fill: chart.get("colors").next(),
|
|
},
|
|
},
|
|
];
|
|
|
|
series.data.setAll(data);
|
|
xAxis.data.setAll(data);
|
|
|
|
// Animate chart
|
|
// https://www.amcharts.com/docs/v5/concepts/animations/#Initial_animation
|
|
series.appear(1000);
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
// On amchart ready
|
|
am5.ready(function () {
|
|
init();
|
|
}); // end am5.ready()
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget40;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget40.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget41 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart4 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart5 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (
|
|
chart,
|
|
toggle,
|
|
chartSelector,
|
|
data,
|
|
labels,
|
|
initByDefault
|
|
) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Earnings",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0.2,
|
|
stops: [15, 120, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: labels,
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
offsetX: 20,
|
|
tickAmount: 4,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: false,
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
max: 4000,
|
|
min: 1000,
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + "$";
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 3,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
var tab = document.querySelector(toggle);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (chart.rendered === false) {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var chart1Data = [
|
|
2100, 3100, 3100, 2400, 2400, 1800, 1800, 2400, 2400, 3200,
|
|
3200, 2800, 2800, 3250, 3250,
|
|
];
|
|
var chart1Labels = [
|
|
"10AM",
|
|
"10.30AM",
|
|
"11AM",
|
|
"11.15AM",
|
|
"11.30AM",
|
|
"12PM",
|
|
"1PM",
|
|
"2PM",
|
|
"3PM",
|
|
"4PM",
|
|
"5PM",
|
|
"6PM",
|
|
"7PM",
|
|
"8PM",
|
|
"9PM",
|
|
];
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_41_tab_1",
|
|
"#kt_charts_widget_41_chart_1",
|
|
chart1Data,
|
|
chart1Labels,
|
|
true
|
|
);
|
|
|
|
var chart2Data = [
|
|
2300, 2300, 2000, 3200, 3200, 2800, 2400, 2400, 3100, 2900,
|
|
3200, 3200, 2600, 2600, 3200,
|
|
];
|
|
var chart2Labels = [
|
|
"Apr 01",
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 07",
|
|
"Apr 08",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 11",
|
|
"Apr 12",
|
|
"Apr 13",
|
|
"Apr 14",
|
|
"Apr 15",
|
|
];
|
|
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_41_tab_2",
|
|
"#kt_charts_widget_41_chart_2",
|
|
chart2Data,
|
|
chart2Labels,
|
|
false
|
|
);
|
|
|
|
var chart3Data = [
|
|
2600, 3200, 2300, 2300, 2000, 3200, 3100, 2900, 3400, 3400,
|
|
2600, 3200, 2800, 2400, 2400,
|
|
];
|
|
var chart3Labels = [
|
|
"Apr 02",
|
|
"Apr 03",
|
|
"Apr 04",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 09",
|
|
"Apr 10",
|
|
"Apr 12",
|
|
"Apr 14",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"Apr 18",
|
|
"Apr 20",
|
|
"Apr 22",
|
|
"Apr 24",
|
|
];
|
|
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_41_tab_3",
|
|
"#kt_charts_widget_41_chart_3",
|
|
chart3Data,
|
|
chart3Labels,
|
|
false
|
|
);
|
|
|
|
var chart4Data = [
|
|
1800, 1800, 2400, 2400, 3200, 3200, 3000, 2100, 3200, 3200,
|
|
2400, 2400, 3000, 3200, 3100,
|
|
];
|
|
var chart4Labels = [
|
|
"Jun 2021",
|
|
"Jul 2021",
|
|
"Aug 2021",
|
|
"Sep 2021",
|
|
"Oct 2021",
|
|
"Nov 2021",
|
|
"Dec 2021",
|
|
"Jan 2022",
|
|
"Feb 2022",
|
|
"Mar 2022",
|
|
"Apr 2022",
|
|
"May 2022",
|
|
"Jun 2022",
|
|
"Jul 2022",
|
|
"Aug 2022",
|
|
];
|
|
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_41_tab_4",
|
|
"#kt_charts_widget_41_chart_4",
|
|
chart4Data,
|
|
chart4Labels,
|
|
false
|
|
);
|
|
|
|
var chart5Data = [
|
|
3200, 2100, 3200, 3200, 3200, 3500, 3000, 2400, 3250, 2400,
|
|
2400, 3250, 3000, 2400, 2800,
|
|
];
|
|
var chart5Labels = [
|
|
"Sep 2021",
|
|
"Oct 2021",
|
|
"Nov 2021",
|
|
"Dec 2021",
|
|
"Jan 2022",
|
|
"Feb 2022",
|
|
"Mar 2022",
|
|
"Apr 2022",
|
|
"May 2022",
|
|
"Jun 2022",
|
|
"Jul 2022",
|
|
"Aug 2022",
|
|
"Sep 2022",
|
|
"Oct 2022",
|
|
"Nov 2022",
|
|
];
|
|
|
|
initChart(
|
|
chart5,
|
|
"#kt_charts_widget_41_tab_5",
|
|
"#kt_charts_widget_41_chart_5",
|
|
chart5Data,
|
|
chart5Labels,
|
|
false
|
|
);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
}
|
|
|
|
if (chart4.rendered) {
|
|
chart4.self.destroy();
|
|
}
|
|
|
|
if (chart5.rendered) {
|
|
chart5.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_charts_widget_41_tab_1",
|
|
"#kt_charts_widget_41_chart_1",
|
|
chart1Data,
|
|
chart1Labels,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_charts_widget_41_tab_2",
|
|
"#kt_charts_widget_41_chart_2",
|
|
chart2Data,
|
|
chart2Labels,
|
|
chart2.rendered
|
|
);
|
|
initChart(
|
|
chart3,
|
|
"#kt_charts_widget_41_tab_3",
|
|
"#kt_charts_widget_41_chart_3",
|
|
chart3Data,
|
|
chart3Labels,
|
|
chart3.rendered
|
|
);
|
|
initChart(
|
|
chart4,
|
|
"#kt_charts_widget_41_tab_4",
|
|
"#kt_charts_widget_41_chart_4",
|
|
chart4Data,
|
|
chart4Labels,
|
|
chart4.rendered
|
|
);
|
|
initChart(
|
|
chart5,
|
|
"#kt_charts_widget_41_tab_5",
|
|
"#kt_charts_widget_41_chart_5",
|
|
chart5Data,
|
|
chart5Labels,
|
|
chart5.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget41;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget41.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget42 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_charts_widget_42");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseprimaryColor = KTUtil.getCssVariableValue("--bs-primary");
|
|
var basesuccessColor = KTUtil.getCssVariableValue("--bs-success");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Inbound Calls",
|
|
data: [45, 80, 53, 80, 75, 100, 76, 117, 76, 110, 70, 112],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseprimaryColor, basesuccessColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"",
|
|
"29 Sep",
|
|
"1 Aug",
|
|
"2 Aug",
|
|
"3 Aug",
|
|
"4 Aug",
|
|
"5 Aug",
|
|
"6 Aug",
|
|
"7 Aug",
|
|
"8 Aug",
|
|
"9 Aug",
|
|
"10 Aug",
|
|
"11 Aug",
|
|
"12 Aug",
|
|
"13 Aug",
|
|
"14 Aug",
|
|
"15 Aug",
|
|
"16 Aug",
|
|
"",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
tickAmount: 6,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: true,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: [baseprimaryColor, basesuccessColor],
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
max: 120,
|
|
min: 30,
|
|
tickAmount: 6,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
colors: [baseprimaryColor, basesuccessColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: [baseprimaryColor, basesuccessColor],
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget42;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget42.init();
|
|
});
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget43 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_charts_widget_43");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
var strokeColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-" + color + "-light");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Overview",
|
|
data: [30, 30, 45, 45, 35, 35, 25, 25, 50, 50],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"Feb",
|
|
"Mar",
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
"Oct",
|
|
"Nov",
|
|
"Dec",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
show: false,
|
|
position: "front",
|
|
stroke: {
|
|
color: strokeColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 60,
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val;
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
markers: {
|
|
colors: lightColor,
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart();
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget43;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget43.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget44 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_charts_widget_44");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
var strokeColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-" + color + "-light");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Overview",
|
|
data: [20, 37, 22, 45, 20, 50, 25, 57, 40],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"Apr",
|
|
"May",
|
|
"Jun",
|
|
"Jul",
|
|
"Aug",
|
|
"Sep",
|
|
"Oct",
|
|
"Nov",
|
|
"Dec",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
show: false,
|
|
position: "front",
|
|
stroke: {
|
|
color: strokeColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 60,
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val;
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
markers: {
|
|
colors: lightColor,
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart();
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget44;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget44.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget45 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_charts_widget_45");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
var strokeColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Overview",
|
|
data: [15, 15, 42, 42, 13, 13, 35],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.3,
|
|
opacityTo: 0.2,
|
|
stops: [15, 120, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
show: false,
|
|
position: "front",
|
|
stroke: {
|
|
color: strokeColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 60,
|
|
labels: {
|
|
show: false,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val;
|
|
},
|
|
},
|
|
},
|
|
colors: [lightColor],
|
|
markers: {
|
|
colors: lightColor,
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart();
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget45;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget45.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget46 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_charts_widget_46");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var negativeColor = element.hasAttribute("data-kt-negative-color")
|
|
? element.getAttribute("data-kt-negative-color")
|
|
: KTUtil.getCssVariableValue("--bs-gary-500");
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Subscribed",
|
|
data: [
|
|
20, 30, 20, 40, 60, 75, 65, 18, 10, 5, 15, 40, 60, 18,
|
|
35, 55, 20,
|
|
],
|
|
},
|
|
{
|
|
name: "Unsubscribed",
|
|
data: [
|
|
-20, -15, -5, -20, -30, -15, -10, -8, -5, -5, -10, -25,
|
|
-15, -5, -10, -5, -15,
|
|
],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
stacked: true,
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
//horizontal: false,
|
|
columnWidth: "35%",
|
|
barHeight: "70%",
|
|
borderRadius: [4, 4],
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"Jan 5",
|
|
"Jan 7",
|
|
"Jan 9",
|
|
"Jan 11",
|
|
"Jan 13",
|
|
"Jan 15",
|
|
"Jan 17",
|
|
"Jan 19",
|
|
"Jan 20",
|
|
"Jan 21",
|
|
"Jan 23",
|
|
"Jan 24",
|
|
"Jan 25",
|
|
"Jan 26",
|
|
"Jan 24",
|
|
"Jan 28",
|
|
"Jan 29",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
tickAmount: 10,
|
|
labels: {
|
|
//rotate: -45,
|
|
//rotateAlways: true,
|
|
style: {
|
|
colors: [labelColor],
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: -100,
|
|
max: 150,
|
|
tickAmount: 5,
|
|
labels: {
|
|
style: {
|
|
colors: [labelColor],
|
|
fontSize: "12px",
|
|
},
|
|
formatter: function (val) {
|
|
return parseInt(val);
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
borderRadius: 4,
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
if (val > 0) {
|
|
return val + "K";
|
|
} else {
|
|
return Math.abs(val) + "K";
|
|
}
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor, negativeColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget46;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget46.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget5 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_charts_widget_5");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
data: [15, 12, 10, 8, 7, 4, 3],
|
|
show: false,
|
|
},
|
|
],
|
|
chart: {
|
|
type: "bar",
|
|
height: 350,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 4,
|
|
horizontal: true,
|
|
distributed: true,
|
|
barHeight: 23,
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
colors: [
|
|
"#3E97FF",
|
|
"#F1416C",
|
|
"#50CD89",
|
|
"#FFC700",
|
|
"#7239EA",
|
|
"#50CDCD",
|
|
"#3F4254",
|
|
],
|
|
xaxis: {
|
|
categories: [
|
|
"Phones",
|
|
"Laptops",
|
|
"Headsets",
|
|
"Games",
|
|
"Keyboardsy",
|
|
"Monitors",
|
|
"Speakers",
|
|
],
|
|
labels: {
|
|
formatter: function (val) {
|
|
return val + "K";
|
|
},
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-400"),
|
|
fontSize: "14px",
|
|
fontWeight: "600",
|
|
align: "left",
|
|
},
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-800"),
|
|
fontSize: "14px",
|
|
fontWeight: "600",
|
|
},
|
|
offsetY: 2,
|
|
align: "left",
|
|
},
|
|
},
|
|
grid: {
|
|
borderColor: borderColor,
|
|
xaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: false,
|
|
},
|
|
},
|
|
strokeDashArray: 4,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget5;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget5.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget6 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart) {
|
|
var element = document.getElementById("kt_charts_widget_6");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var maxValue = 18;
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Sales",
|
|
data: [15, 12, 10, 8, 7],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
height: 350,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 8,
|
|
horizontal: true,
|
|
distributed: true,
|
|
barHeight: 50,
|
|
dataLabels: {
|
|
position: "bottom", // use 'bottom' for left and 'top' for right align(textAnchor)
|
|
},
|
|
},
|
|
},
|
|
dataLabels: {
|
|
// Docs: https://apexcharts.com/docs/options/datalabels/
|
|
enabled: true,
|
|
textAnchor: "start",
|
|
offsetX: 0,
|
|
formatter: function (val, opts) {
|
|
var val = val * 1000;
|
|
var Format = wNumb({
|
|
//prefix: '$',
|
|
//suffix: ',-',
|
|
thousand: ",",
|
|
});
|
|
|
|
return Format.to(val);
|
|
},
|
|
style: {
|
|
fontSize: "14px",
|
|
fontWeight: "600",
|
|
align: "left",
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
colors: ["#3E97FF", "#F1416C", "#50CD89", "#FFC700", "#7239EA"],
|
|
xaxis: {
|
|
categories: [
|
|
"ECR - 90%",
|
|
"FGI - 82%",
|
|
"EOQ - 75%",
|
|
"FMG - 60%",
|
|
"PLG - 50%",
|
|
],
|
|
labels: {
|
|
formatter: function (val) {
|
|
return val + "K";
|
|
},
|
|
style: {
|
|
colors: [labelColor],
|
|
fontSize: "14px",
|
|
fontWeight: "600",
|
|
align: "left",
|
|
},
|
|
},
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (val, opt) {
|
|
if (Number.isInteger(val)) {
|
|
var percentage = parseInt(
|
|
(val * 100) / maxValue
|
|
).toString();
|
|
return val + " - " + percentage + "%";
|
|
} else {
|
|
return val;
|
|
}
|
|
},
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "14px",
|
|
fontWeight: "600",
|
|
},
|
|
offsetY: 2,
|
|
align: "left",
|
|
},
|
|
},
|
|
grid: {
|
|
borderColor: borderColor,
|
|
xaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: false,
|
|
},
|
|
},
|
|
strokeDashArray: 4,
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return val + "K";
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(chart);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget6;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget6.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget7 = (function () {
|
|
// Private methods
|
|
var initChart = function (chartSelector) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Net Profit",
|
|
data: data1,
|
|
},
|
|
{
|
|
name: "Revenue",
|
|
data: data2,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bar",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
columnWidth: ["40%"],
|
|
borderRadius: [6],
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
stroke: {
|
|
show: true,
|
|
width: 2,
|
|
colors: ["transparent"],
|
|
},
|
|
xaxis: {
|
|
categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-700"),
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-700"),
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$" + val + " thousands";
|
|
},
|
|
},
|
|
},
|
|
colors: [
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
KTUtil.getCssVariableValue("--bs-primary-light"),
|
|
],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(element, options);
|
|
|
|
var init = false;
|
|
var tab = document.querySelector(tabSelector);
|
|
|
|
if (initByDefault === true) {
|
|
chart.render();
|
|
init = true;
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (init == false) {
|
|
chart.render();
|
|
init = true;
|
|
}
|
|
});
|
|
|
|
var chart = new ApexCharts(element, options);
|
|
chart.render();
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart(
|
|
"#kt_chart_widget_7_tab_1",
|
|
"#kt_chart_widget_7_chart_1",
|
|
[44, 55, 57, 56, 61, 58],
|
|
[76, 85, 101, 98, 87, 105],
|
|
true
|
|
);
|
|
initChart(
|
|
"#kt_chart_widget_7_tab_2",
|
|
"#kt_chart_widget_7_chart_2",
|
|
[35, 60, 35, 50, 45, 30],
|
|
[65, 80, 50, 80, 75, 105],
|
|
false
|
|
);
|
|
initChart(
|
|
"#kt_chart_widget_7_tab_3",
|
|
"#kt_chart_widget_7_chart_3",
|
|
[25, 40, 45, 50, 40, 60],
|
|
[76, 85, 101, 98, 87, 105],
|
|
false
|
|
);
|
|
initChart(
|
|
"#kt_chart_widget_7_tab_4",
|
|
"#kt_chart_widget_7_chart_4",
|
|
[50, 35, 45, 55, 30, 40],
|
|
[76, 85, 101, 98, 87, 105],
|
|
false
|
|
);
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget7;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
//KTChartsWidget7.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget8 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart, toggle, selector, data, initByDefault) {
|
|
var element = document.querySelector(selector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Social Campaigns",
|
|
data: data[0], // array value is of the format [x, y, z] where x (timestamp) and y are the two axes coordinates,
|
|
},
|
|
{
|
|
name: "Email Newsletter",
|
|
data: data[1],
|
|
},
|
|
{
|
|
name: "TV Campaign",
|
|
data: data[2],
|
|
},
|
|
{
|
|
name: "Google Ads",
|
|
data: data[3],
|
|
},
|
|
{
|
|
name: "Courses",
|
|
data: data[4],
|
|
},
|
|
{
|
|
name: "Radio",
|
|
data: data[5],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "bubble",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bubble: {},
|
|
},
|
|
stroke: {
|
|
show: false,
|
|
width: 0,
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
xaxis: {
|
|
type: "numeric",
|
|
tickAmount: 7,
|
|
min: 0,
|
|
max: 700,
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: true,
|
|
height: 0,
|
|
},
|
|
labels: {
|
|
show: true,
|
|
trim: true,
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
tickAmount: 7,
|
|
min: 0,
|
|
max: 700,
|
|
labels: {
|
|
style: {
|
|
colors: KTUtil.getCssVariableValue("--bs-gray-500"),
|
|
fontSize: "13px",
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
x: {
|
|
formatter: function (val) {
|
|
return "Clicks: " + val;
|
|
},
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$" + val + "K";
|
|
},
|
|
},
|
|
z: {
|
|
title: "Impression: ",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
show: true,
|
|
position: "front",
|
|
stroke: {
|
|
color: KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
),
|
|
width: 1,
|
|
dashArray: 0,
|
|
},
|
|
},
|
|
colors: [
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
KTUtil.getCssVariableValue("--bs-success"),
|
|
KTUtil.getCssVariableValue("--bs-warning"),
|
|
KTUtil.getCssVariableValue("--bs-danger"),
|
|
KTUtil.getCssVariableValue("--bs-info"),
|
|
"#43CED7",
|
|
],
|
|
fill: {
|
|
opacity: 1,
|
|
},
|
|
markers: {
|
|
strokeWidth: 0,
|
|
},
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
padding: {
|
|
right: 20,
|
|
},
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
var tab = document.querySelector(toggle);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (chart.rendered === false) {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var data1 = [
|
|
[[100, 250, 30]],
|
|
[[225, 300, 35]],
|
|
[[300, 350, 25]],
|
|
[[350, 350, 20]],
|
|
[[450, 400, 25]],
|
|
[[550, 350, 35]],
|
|
];
|
|
|
|
var data2 = [
|
|
[[125, 300, 40]],
|
|
[[250, 350, 35]],
|
|
[[350, 450, 30]],
|
|
[[450, 250, 25]],
|
|
[[500, 500, 30]],
|
|
[[600, 250, 28]],
|
|
];
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_chart_widget_8_week_toggle",
|
|
"#kt_chart_widget_8_week_chart",
|
|
data1,
|
|
false
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_chart_widget_8_month_toggle",
|
|
"#kt_chart_widget_8_month_chart",
|
|
data2,
|
|
true
|
|
);
|
|
|
|
// Update chart on theme mode change
|
|
var handlerId = KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_chart_widget_8_week_toggle",
|
|
"#kt_chart_widget_8_week_chart",
|
|
data1,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_chart_widget_8_month_toggle",
|
|
"#kt_chart_widget_8_month_chart",
|
|
data2,
|
|
chart2.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget8;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget8.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTChartsWidget9 = (function () {
|
|
var chart = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function () {
|
|
var element = document.getElementById("kt_charts_widget_9");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-400");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-gray-200");
|
|
var secondaryColor = KTUtil.getCssVariableValue("--bs-primary");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Order",
|
|
data: [21, 21, 26, 26, 31, 31, 27],
|
|
},
|
|
{
|
|
name: "Revenue",
|
|
data: [12, 16, 16, 21, 21, 18, 18],
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"",
|
|
"06 Sep",
|
|
"13 Sep",
|
|
"20 Sep",
|
|
"27 Sep",
|
|
"30 Sep",
|
|
"",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: labelColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
y: {
|
|
formatter: function (val) {
|
|
return "$" + val + " thousands";
|
|
},
|
|
},
|
|
},
|
|
crosshairs: {
|
|
show: true,
|
|
position: "front",
|
|
stroke: {
|
|
color: KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
),
|
|
width: 1,
|
|
dashArray: 0,
|
|
},
|
|
},
|
|
colors: [baseColor, secondaryColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
colors: [baseColor, secondaryColor],
|
|
strokeColor: [
|
|
KTUtil.getCssVariableValue("--bs-primary"),
|
|
KTUtil.getCssVariableValue("--bs-gray-300"),
|
|
],
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initChart();
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart.rendered) {
|
|
chart.self.destroy();
|
|
}
|
|
|
|
initChart(chart);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTChartsWidget9;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTChartsWidget9.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTTimelineWidget24 = (function () {
|
|
// Private methods
|
|
var handleActions = function () {
|
|
var card = document.querySelector("#kt_list_widget_24");
|
|
|
|
if (!card) {
|
|
return;
|
|
}
|
|
|
|
// Checkbox Handler
|
|
KTUtil.on(card, '[data-kt-element="follow"]', "click", function (e) {
|
|
if (this.innerText === "Following") {
|
|
this.innerText = "Follow";
|
|
this.classList.add("btn-light-primary");
|
|
this.classList.remove("btn-primary");
|
|
this.blur();
|
|
} else {
|
|
this.innerText = "Following";
|
|
this.classList.add("btn-primary");
|
|
this.classList.remove("btn-light-primary");
|
|
this.blur();
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
handleActions();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTTimelineWidget24;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTTimelineWidget24.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTMapsWidget1 = (function () {
|
|
// Private methods
|
|
var initMap = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_maps_widget_1_map");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create the map chart
|
|
// https://www.amcharts.com/docs/v5/charts/map-chart/
|
|
var chart = root.container.children.push(
|
|
am5map.MapChart.new(root, {
|
|
panX: "translateX",
|
|
panY: "translateY",
|
|
projection: am5map.geoMercator(),
|
|
paddingLeft: 0,
|
|
paddingrIGHT: 0,
|
|
paddingBottom: 0,
|
|
})
|
|
);
|
|
|
|
// Create main polygon series for countries
|
|
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
|
|
var polygonSeries = chart.series.push(
|
|
am5map.MapPolygonSeries.new(root, {
|
|
geoJSON: am5geodata_worldLow,
|
|
exclude: ["AQ"],
|
|
})
|
|
);
|
|
|
|
polygonSeries.mapPolygons.template.setAll({
|
|
tooltipText: "{name}",
|
|
toggleKey: "active",
|
|
interactive: true,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")),
|
|
});
|
|
|
|
polygonSeries.mapPolygons.template.states.create("hover", {
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
});
|
|
|
|
polygonSeries.mapPolygons.template.states.create("active", {
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
});
|
|
|
|
// Highlighted Series
|
|
// Create main polygon series for countries
|
|
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
|
|
var polygonSeriesHighlighted = chart.series.push(
|
|
am5map.MapPolygonSeries.new(root, {
|
|
//geoJSON: am5geodata_usaLow,
|
|
geoJSON: am5geodata_worldLow,
|
|
include: ["US", "BR", "DE", "AU", "JP"],
|
|
})
|
|
);
|
|
|
|
polygonSeriesHighlighted.mapPolygons.template.setAll({
|
|
tooltipText: "{name}",
|
|
toggleKey: "active",
|
|
interactive: true,
|
|
});
|
|
|
|
var colors = am5.ColorSet.new(root, {});
|
|
|
|
polygonSeriesHighlighted.mapPolygons.template.set(
|
|
"fill",
|
|
am5.color(KTUtil.getCssVariableValue("--bs-primary"))
|
|
);
|
|
|
|
polygonSeriesHighlighted.mapPolygons.template.states.create(
|
|
"hover",
|
|
{
|
|
fill: root.interfaceColors.get("primaryButtonHover"),
|
|
}
|
|
);
|
|
|
|
polygonSeriesHighlighted.mapPolygons.template.states.create(
|
|
"active",
|
|
{
|
|
fill: root.interfaceColors.get("primaryButtonHover"),
|
|
}
|
|
);
|
|
|
|
// Add zoom control
|
|
// https://www.amcharts.com/docs/v5/charts/map-chart/map-pan-zoom/#Zoom_control
|
|
//chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
|
|
|
|
// Set clicking on "water" to zoom out
|
|
chart.chartContainer
|
|
.get("background")
|
|
.events.on("click", function () {
|
|
chart.goHome();
|
|
});
|
|
|
|
// Make stuff animate on load
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
// On amchart ready
|
|
am5.ready(function () {
|
|
init();
|
|
}); // end am5.ready()
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initMap();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTMapsWidget1;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTMapsWidget1.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTMapsWidget2 = (function () {
|
|
// Private methods
|
|
var initMap = function () {
|
|
// Check if amchart library is included
|
|
if (typeof am5 === "undefined") {
|
|
return;
|
|
}
|
|
|
|
var element = document.getElementById("kt_maps_widget_2_map");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
// Root
|
|
var root;
|
|
|
|
var init = function () {
|
|
// Create root element
|
|
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
|
|
root = am5.Root.new(element);
|
|
|
|
// Set themes
|
|
// https://www.amcharts.com/docs/v5/concepts/themes/
|
|
root.setThemes([am5themes_Animated.new(root)]);
|
|
|
|
// Create the map chart
|
|
// https://www.amcharts.com/docs/v5/charts/map-chart/
|
|
var chart = root.container.children.push(
|
|
am5map.MapChart.new(root, {
|
|
panX: "translateX",
|
|
panY: "translateY",
|
|
projection: am5map.geoMercator(),
|
|
paddingLeft: 0,
|
|
paddingrIGHT: 0,
|
|
paddingBottom: 0,
|
|
})
|
|
);
|
|
|
|
// Create main polygon series for countries
|
|
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
|
|
var polygonSeries = chart.series.push(
|
|
am5map.MapPolygonSeries.new(root, {
|
|
geoJSON: am5geodata_worldLow,
|
|
exclude: ["AQ"],
|
|
})
|
|
);
|
|
|
|
polygonSeries.mapPolygons.template.setAll({
|
|
tooltipText: "{name}",
|
|
toggleKey: "active",
|
|
interactive: true,
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-gray-300")),
|
|
});
|
|
|
|
polygonSeries.mapPolygons.template.states.create("hover", {
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
});
|
|
|
|
polygonSeries.mapPolygons.template.states.create("active", {
|
|
fill: am5.color(KTUtil.getCssVariableValue("--bs-success")),
|
|
});
|
|
|
|
// Highlighted Series
|
|
// Create main polygon series for countries
|
|
// https://www.amcharts.com/docs/v5/charts/map-chart/map-polygon-series/
|
|
var polygonSeriesHighlighted = chart.series.push(
|
|
am5map.MapPolygonSeries.new(root, {
|
|
//geoJSON: am5geodata_usaLow,
|
|
geoJSON: am5geodata_worldLow,
|
|
include: ["US", "BR", "DE", "AU", "JP"],
|
|
})
|
|
);
|
|
|
|
polygonSeriesHighlighted.mapPolygons.template.setAll({
|
|
tooltipText: "{name}",
|
|
toggleKey: "active",
|
|
interactive: true,
|
|
});
|
|
|
|
var colors = am5.ColorSet.new(root, {});
|
|
|
|
polygonSeriesHighlighted.mapPolygons.template.set(
|
|
"fill",
|
|
am5.color(KTUtil.getCssVariableValue("--bs-primary"))
|
|
);
|
|
|
|
polygonSeriesHighlighted.mapPolygons.template.states.create(
|
|
"hover",
|
|
{
|
|
fill: root.interfaceColors.get("primaryButtonHover"),
|
|
}
|
|
);
|
|
|
|
polygonSeriesHighlighted.mapPolygons.template.states.create(
|
|
"active",
|
|
{
|
|
fill: root.interfaceColors.get("primaryButtonHover"),
|
|
}
|
|
);
|
|
|
|
// Add zoom control
|
|
// https://www.amcharts.com/docs/v5/charts/map-chart/map-pan-zoom/#Zoom_control
|
|
//chart.set("zoomControl", am5map.ZoomControl.new(root, {}));
|
|
|
|
// Set clicking on "water" to zoom out
|
|
chart.chartContainer
|
|
.get("background")
|
|
.events.on("click", function () {
|
|
chart.goHome();
|
|
});
|
|
|
|
// Make stuff animate on load
|
|
chart.appear(1000, 100);
|
|
};
|
|
|
|
// On amchart ready
|
|
am5.ready(function () {
|
|
init();
|
|
}); // end am5.ready()
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
// Destroy chart
|
|
root.dispose();
|
|
|
|
// Reinit chart
|
|
init();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initMap();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTMapsWidget2;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTMapsWidget2.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTSlidersWidget1 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart, query, data) {
|
|
var element = document.querySelector(query);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
chart.rendered === true &&
|
|
element.classList.contains("initialized")
|
|
) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + "primary");
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-" + "primary-light");
|
|
|
|
var options = {
|
|
series: [data],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
height: height,
|
|
type: "radialBar",
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 0,
|
|
size: "45%",
|
|
},
|
|
dataLabels: {
|
|
showOn: "always",
|
|
name: {
|
|
show: false,
|
|
},
|
|
value: {
|
|
show: false,
|
|
},
|
|
},
|
|
track: {
|
|
background: lightColor,
|
|
strokeWidth: "100%",
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor],
|
|
stroke: {
|
|
lineCap: "round",
|
|
},
|
|
labels: ["Progress"],
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
|
|
element.classList.add("initialized");
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
// Init default chart
|
|
initChart(chart1, "#kt_slider_widget_1_chart_1", 76);
|
|
|
|
var carousel = document.querySelector(
|
|
"#kt_sliders_widget_1_slider"
|
|
);
|
|
|
|
if (!carousel) {
|
|
return;
|
|
}
|
|
|
|
// Init slide charts
|
|
carousel.addEventListener("slid.bs.carousel", function (e) {
|
|
if (e.to === 1) {
|
|
// Init second chart
|
|
initChart(chart2, "#kt_slider_widget_1_chart_2", 55);
|
|
}
|
|
|
|
if (e.to === 2) {
|
|
// Init third chart
|
|
initChart(chart3, "#kt_slider_widget_1_chart_3", 25);
|
|
}
|
|
});
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
chart1.rendered = false;
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
chart2.rendered = false;
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
chart3.rendered = false;
|
|
}
|
|
|
|
initChart(chart1, "#kt_slider_widget_1_chart_1", 76);
|
|
initChart(chart2, "#kt_slider_widget_1_chart_2", 55);
|
|
initChart(chart3, "#kt_slider_widget_1_chart_3", 25);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTSlidersWidget1;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTSlidersWidget1.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTSlidersWidget3 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart, query, color, data) {
|
|
var element = document.querySelector(query);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
chart.rendered === true &&
|
|
element.classList.contains("initialized")
|
|
) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-500");
|
|
var borderColor = KTUtil.getCssVariableValue(
|
|
"--bs-border-dashed-color"
|
|
);
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Lessons",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "gradient",
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.4,
|
|
opacityTo: 0,
|
|
stops: [0, 80, 100],
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 3,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
categories: [
|
|
"",
|
|
"Apr 05",
|
|
"Apr 06",
|
|
"Apr 07",
|
|
"Apr 08",
|
|
"Apr 09",
|
|
"Apr 11",
|
|
"Apr 12",
|
|
"Apr 14",
|
|
"Apr 15",
|
|
"Apr 16",
|
|
"Apr 17",
|
|
"Apr 18",
|
|
"",
|
|
],
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
tickAmount: 6,
|
|
labels: {
|
|
rotate: 0,
|
|
rotateAlways: true,
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
crosshairs: {
|
|
position: "front",
|
|
stroke: {
|
|
color: baseColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
formatter: undefined,
|
|
offsetY: 0,
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
yaxis: {
|
|
tickAmount: 4,
|
|
max: 24,
|
|
min: 10,
|
|
labels: {
|
|
style: {
|
|
colors: labelColor,
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
style: {
|
|
fontSize: "12px",
|
|
},
|
|
},
|
|
colors: [baseColor],
|
|
grid: {
|
|
borderColor: borderColor,
|
|
strokeDashArray: 4,
|
|
yaxis: {
|
|
lines: {
|
|
show: true,
|
|
},
|
|
},
|
|
},
|
|
markers: {
|
|
strokeColor: baseColor,
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
|
|
element.classList.add("initialized");
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var data1 = [
|
|
19, 21, 21, 20, 20, 18, 18, 20, 20, 22, 22, 21, 21, 22,
|
|
];
|
|
var data2 = [
|
|
18, 22, 22, 20, 20, 18, 18, 20, 20, 18, 18, 20, 20, 22,
|
|
];
|
|
|
|
// Init default chart
|
|
initChart(chart1, "#kt_sliders_widget_3_chart_1", "danger", data1);
|
|
|
|
var carousel = document.querySelector(
|
|
"#kt_sliders_widget_3_slider"
|
|
);
|
|
|
|
if (!carousel) {
|
|
return;
|
|
}
|
|
|
|
carousel.addEventListener("slid.bs.carousel", function (e) {
|
|
if (e.to === 1) {
|
|
// Init second chart
|
|
initChart(
|
|
chart2,
|
|
"#kt_sliders_widget_3_chart_2",
|
|
"primary",
|
|
data2
|
|
);
|
|
}
|
|
});
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
chart1.rendered = false;
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
chart2.rendered = false;
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_sliders_widget_3_chart_1",
|
|
"danger",
|
|
data1
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_sliders_widget_3_chart_2",
|
|
"primary",
|
|
data2
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTSlidersWidget3;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTSlidersWidget3.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTSlidersWidget7 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart, query, data) {
|
|
var element = document.querySelector(query);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
if (
|
|
chart.rendered === true &&
|
|
element.classList.contains("initialized")
|
|
) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + "danger");
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-" + "white");
|
|
|
|
var options = {
|
|
series: [data],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
height: height,
|
|
type: "radialBar",
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 0,
|
|
size: "45%",
|
|
},
|
|
dataLabels: {
|
|
showOn: "always",
|
|
name: {
|
|
show: false,
|
|
},
|
|
value: {
|
|
show: false,
|
|
},
|
|
},
|
|
track: {
|
|
background: lightColor,
|
|
strokeWidth: "100%",
|
|
},
|
|
},
|
|
},
|
|
colors: [baseColor],
|
|
stroke: {
|
|
lineCap: "round",
|
|
},
|
|
labels: ["Progress"],
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
|
|
element.classList.add("initialized");
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
// Init default chart
|
|
initChart(chart1, "#kt_slider_widget_7_chart_1", 76);
|
|
|
|
var carousel = document.querySelector(
|
|
"#kt_sliders_widget_7_slider"
|
|
);
|
|
|
|
if (!carousel) {
|
|
return;
|
|
}
|
|
|
|
// Init slide charts
|
|
carousel.addEventListener("slid.bs.carousel", function (e) {
|
|
if (e.to === 1) {
|
|
// Init second chart
|
|
initChart(chart2, "#kt_slider_widget_7_chart_2", 55);
|
|
}
|
|
|
|
if (e.to === 2) {
|
|
// Init third chart
|
|
initChart(chart3, "#kt_slider_widget_7_chart_3", 25);
|
|
}
|
|
});
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
chart1.rendered = false;
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
chart2.rendered = false;
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
chart3.rendered = false;
|
|
}
|
|
|
|
initChart(chart1, "#kt_slider_widget_7_chart_1", 76);
|
|
initChart(chart2, "#kt_slider_widget_7_chart_2", 55);
|
|
initChart(chart3, "#kt_slider_widget_7_chart_3", 25);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTSlidersWidget7;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTSlidersWidget7.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTPlayersWidget1 = (function () {
|
|
// Private methods
|
|
var initPlayers = function () {
|
|
// https://www.w3schools.com/jsref/dom_obj_audio.asp
|
|
// Toggle Handler
|
|
KTUtil.on(
|
|
document.body,
|
|
'[data-kt-element="list-play-button"]',
|
|
"click",
|
|
function (e) {
|
|
var currentButton = this;
|
|
|
|
var audio = document.querySelector(
|
|
'[data-kt-element="audio-track-1"]'
|
|
);
|
|
var playIcon = this.querySelector(
|
|
'[data-kt-element="list-play-icon"]'
|
|
);
|
|
var pauseIcon = this.querySelector(
|
|
'[data-kt-element="list-pause-icon"]'
|
|
);
|
|
|
|
if (pauseIcon.classList.contains("d-none")) {
|
|
audio.play();
|
|
|
|
playIcon.classList.add("d-none");
|
|
pauseIcon.classList.remove("d-none");
|
|
} else {
|
|
audio.pause();
|
|
|
|
playIcon.classList.remove("d-none");
|
|
pauseIcon.classList.add("d-none");
|
|
}
|
|
|
|
var buttons = [].slice.call(
|
|
document.querySelectorAll(
|
|
'[data-kt-element="list-play-button"]'
|
|
)
|
|
);
|
|
buttons.map(function (button) {
|
|
if (button !== currentButton) {
|
|
var playIcon = button.querySelector(
|
|
'[data-kt-element="list-play-icon"]'
|
|
);
|
|
var pauseIcon = button.querySelector(
|
|
'[data-kt-element="list-pause-icon"]'
|
|
);
|
|
|
|
playIcon.classList.remove("d-none");
|
|
pauseIcon.classList.add("d-none");
|
|
}
|
|
});
|
|
}
|
|
);
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initPlayers();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTPlayersWidget1;
|
|
}
|
|
|
|
// Window load
|
|
window.addEventListener("load", function () {
|
|
KTPlayersWidget1.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTPlayersWidget2 = (function () {
|
|
// Private methods
|
|
var initPlayer = function () {
|
|
// https://www.w3schools.com/jsref/dom_obj_audio.asp
|
|
var element = document.getElementById("kt_player_widget_2");
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var audio = element.querySelector('[data-kt-element="audio-track-1"]');
|
|
var progress = element.querySelector('[data-kt-element="progress"]');
|
|
var currentTime = element.querySelector(
|
|
'[data-kt-element="current-time"]'
|
|
);
|
|
var duration = element.querySelector('[data-kt-element="duration"]');
|
|
var playButton = element.querySelector(
|
|
'[data-kt-element="play-button"]'
|
|
);
|
|
var playIcon = element.querySelector('[data-kt-element="play-icon"]');
|
|
var pauseIcon = element.querySelector('[data-kt-element="pause-icon"]');
|
|
|
|
var replayButton = element.querySelector(
|
|
'[data-kt-element="replay-button"]'
|
|
);
|
|
var shuffleButton = element.querySelector(
|
|
'[data-kt-element="shuffle-button"]'
|
|
);
|
|
var playNextButton = element.querySelector(
|
|
'[data-kt-element="play-next-button"]'
|
|
);
|
|
var playPrevButton = element.querySelector(
|
|
'[data-kt-element="play-prev-button"]'
|
|
);
|
|
|
|
var formatTime = function (time) {
|
|
var s = parseInt(time % 60);
|
|
var m = parseInt((time / 60) % 60);
|
|
|
|
return m + ":" + (s < 10 ? "0" : "") + s;
|
|
};
|
|
|
|
// Duration
|
|
duration.innerHTML = formatTime(audio.duration);
|
|
|
|
// Update progress
|
|
var setBarProgress = function () {
|
|
progress.value = (audio.currentTime / audio.duration) * 100;
|
|
};
|
|
|
|
// Handle audio update
|
|
var handleAudioUpdate = function () {
|
|
currentTime.innerHTML = formatTime(audio.currentTime);
|
|
|
|
setBarProgress();
|
|
|
|
if (this.ended) {
|
|
playIcon.classList.remove("d-none");
|
|
pauseIcon.classList.add("d-none");
|
|
}
|
|
};
|
|
|
|
audio.addEventListener("timeupdate", handleAudioUpdate);
|
|
|
|
// Handle play
|
|
playButton.addEventListener("click", function () {
|
|
if (audio.duration > 0 && !audio.paused) {
|
|
audio.pause();
|
|
|
|
playIcon.classList.remove("d-none");
|
|
pauseIcon.classList.add("d-none");
|
|
} else if (audio.readyState >= 2) {
|
|
audio.play();
|
|
|
|
playIcon.classList.add("d-none");
|
|
pauseIcon.classList.remove("d-none");
|
|
}
|
|
});
|
|
|
|
// Handle replay
|
|
replayButton.addEventListener("click", function () {
|
|
if (audio.readyState >= 2) {
|
|
audio.currentTime = 0;
|
|
audio.play();
|
|
|
|
playIcon.classList.add("d-none");
|
|
pauseIcon.classList.remove("d-none");
|
|
}
|
|
});
|
|
|
|
// Handle prev play
|
|
playPrevButton.addEventListener("click", function () {
|
|
if (audio.readyState >= 2) {
|
|
audio.currentTime = 0;
|
|
audio.play();
|
|
|
|
playIcon.classList.add("d-none");
|
|
pauseIcon.classList.remove("d-none");
|
|
}
|
|
});
|
|
|
|
// Handle next play
|
|
playNextButton.addEventListener("click", function () {
|
|
if (audio.readyState >= 2) {
|
|
audio.currentTime = 0;
|
|
audio.play();
|
|
|
|
playIcon.classList.add("d-none");
|
|
pauseIcon.classList.remove("d-none");
|
|
}
|
|
});
|
|
|
|
// Shuffle replay
|
|
shuffleButton.addEventListener("click", function () {
|
|
if (audio.readyState >= 2) {
|
|
audio.currentTime = 0;
|
|
audio.play();
|
|
|
|
playIcon.classList.add("d-none");
|
|
pauseIcon.classList.remove("d-none");
|
|
}
|
|
});
|
|
|
|
// Handle track change
|
|
progress.addEventListener("change", function () {
|
|
audio.currentTime = progress.value;
|
|
|
|
playIcon.classList.add("d-none");
|
|
pauseIcon.classList.remove("d-none");
|
|
audio.play();
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initPlayer();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTPlayersWidget2;
|
|
}
|
|
|
|
// Window load
|
|
window.addEventListener("load", function () {
|
|
KTPlayersWidget2.init();
|
|
});
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTTimelineWidget1 = (function () {
|
|
// Private methods
|
|
// Day timeline
|
|
const initTimelineDay = () => {
|
|
// Detect element
|
|
const element = document.querySelector("#kt_timeline_widget_1_1");
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
if (element.innerHTML) {
|
|
return;
|
|
}
|
|
|
|
// Set variables
|
|
var now = Date.now();
|
|
var rootImagePath = element.getAttribute(
|
|
"data-kt-timeline-widget-1-image-root"
|
|
);
|
|
|
|
// Build vis-timeline datasets
|
|
var groups = new vis.DataSet([
|
|
{
|
|
id: "research",
|
|
content: "Research",
|
|
order: 1,
|
|
},
|
|
{
|
|
id: "qa",
|
|
content: "Phase 2.6 QA",
|
|
order: 2,
|
|
},
|
|
{
|
|
id: "ui",
|
|
content: "UI Design",
|
|
order: 3,
|
|
},
|
|
{
|
|
id: "dev",
|
|
content: "Development",
|
|
order: 4,
|
|
},
|
|
]);
|
|
|
|
var items = new vis.DataSet([
|
|
{
|
|
id: 1,
|
|
group: "research",
|
|
start: now,
|
|
end: moment(now).add(1.5, "hours"),
|
|
content: "Meeting",
|
|
progress: "60%",
|
|
color: "primary",
|
|
users: ["avatars/300-6.jpg", "avatars/300-1.jpg"],
|
|
},
|
|
{
|
|
id: 2,
|
|
group: "qa",
|
|
start: moment(now).add(1, "hours"),
|
|
end: moment(now).add(2, "hours"),
|
|
content: "Testing",
|
|
progress: "47%",
|
|
color: "success",
|
|
users: ["avatars/300-2.jpg"],
|
|
},
|
|
{
|
|
id: 3,
|
|
group: "ui",
|
|
start: moment(now).add(30, "minutes"),
|
|
end: moment(now).add(2.5, "hours"),
|
|
content: "Landing page",
|
|
progress: "55%",
|
|
color: "danger",
|
|
users: ["avatars/300-5.jpg", "avatars/300-20.jpg"],
|
|
},
|
|
{
|
|
id: 4,
|
|
group: "dev",
|
|
start: moment(now).add(1.5, "hours"),
|
|
end: moment(now).add(3, "hours"),
|
|
content: "Products module",
|
|
progress: "75%",
|
|
color: "info",
|
|
users: [
|
|
"avatars/300-23.jpg",
|
|
"avatars/300-12.jpg",
|
|
"avatars/300-9.jpg",
|
|
],
|
|
},
|
|
]);
|
|
|
|
// Set vis-timeline options
|
|
var options = {
|
|
zoomable: false,
|
|
moveable: false,
|
|
selectable: false,
|
|
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
margin: {
|
|
item: {
|
|
horizontal: 10,
|
|
vertical: 35,
|
|
},
|
|
},
|
|
|
|
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
showCurrentTime: false,
|
|
|
|
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
xss: {
|
|
disabled: false,
|
|
filterOptions: {
|
|
whiteList: {
|
|
div: ["class", "style"],
|
|
img: ["data-kt-timeline-avatar-src", "alt"],
|
|
a: ["href", "class"],
|
|
},
|
|
},
|
|
},
|
|
// specify a template for the items
|
|
template: function (item) {
|
|
// Build users group
|
|
const users = item.users;
|
|
let userTemplate = "";
|
|
users.forEach((user) => {
|
|
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${
|
|
rootImagePath + user
|
|
}" alt="" /></div>`;
|
|
});
|
|
|
|
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
|
|
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
|
|
|
|
<div class="d-flex align-items-center position-relative z-index-2">
|
|
<div class="symbol-group symbol-hover flex-nowrap me-3">
|
|
${userTemplate}
|
|
</div>
|
|
|
|
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
|
|
</div>
|
|
|
|
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
|
|
${item.progress}
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
// Remove block ui on initial draw
|
|
onInitialDrawComplete: function () {
|
|
handleAvatarPath();
|
|
|
|
const target = element.closest(
|
|
'[data-kt-timeline-widget-1-blockui="true"]'
|
|
);
|
|
const blockUI = KTBlockUI.getInstance(target);
|
|
|
|
if (blockUI.isBlocked()) {
|
|
setTimeout(() => {
|
|
blockUI.release();
|
|
}, 1000);
|
|
}
|
|
},
|
|
};
|
|
|
|
// Init vis-timeline
|
|
const timeline = new vis.Timeline(element, items, groups, options);
|
|
|
|
// Prevent infinite loop draws
|
|
timeline.on("currentTimeTick", () => {
|
|
// After fired the first time we un-subscribed
|
|
timeline.off("currentTimeTick");
|
|
});
|
|
};
|
|
|
|
// Week timeline
|
|
const initTimelineWeek = () => {
|
|
// Detect element
|
|
const element = document.querySelector("#kt_timeline_widget_1_2");
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
if (element.innerHTML) {
|
|
return;
|
|
}
|
|
|
|
// Set variables
|
|
var now = Date.now();
|
|
var rootImagePath = element.getAttribute(
|
|
"data-kt-timeline-widget-1-image-root"
|
|
);
|
|
|
|
// Build vis-timeline datasets
|
|
var groups = new vis.DataSet([
|
|
{
|
|
id: 1,
|
|
content: "Research",
|
|
order: 1,
|
|
},
|
|
{
|
|
id: 2,
|
|
content: "Phase 2.6 QA",
|
|
order: 2,
|
|
},
|
|
{
|
|
id: 3,
|
|
content: "UI Design",
|
|
order: 3,
|
|
},
|
|
{
|
|
id: 4,
|
|
content: "Development",
|
|
order: 4,
|
|
},
|
|
]);
|
|
|
|
var items = new vis.DataSet([
|
|
{
|
|
id: 1,
|
|
group: 1,
|
|
start: now,
|
|
end: moment(now).add(7, "days"),
|
|
content: "Framework",
|
|
progress: "71%",
|
|
color: "primary",
|
|
users: ["avatars/300-6.jpg", "avatars/300-1.jpg"],
|
|
},
|
|
{
|
|
id: 2,
|
|
group: 2,
|
|
start: moment(now).add(7, "days"),
|
|
end: moment(now).add(14, "days"),
|
|
content: "Accessibility",
|
|
progress: "84%",
|
|
color: "success",
|
|
users: ["avatars/300-2.jpg"],
|
|
},
|
|
{
|
|
id: 3,
|
|
group: 3,
|
|
start: moment(now).add(3, "days"),
|
|
end: moment(now).add(20, "days"),
|
|
content: "Microsites",
|
|
progress: "69%",
|
|
color: "danger",
|
|
users: ["avatars/300-5.jpg", "avatars/300-20.jpg"],
|
|
},
|
|
{
|
|
id: 4,
|
|
group: 4,
|
|
start: moment(now).add(10, "days"),
|
|
end: moment(now).add(21, "days"),
|
|
content: "Deployment",
|
|
progress: "74%",
|
|
color: "info",
|
|
users: [
|
|
"avatars/300-23.jpg",
|
|
"avatars/300-12.jpg",
|
|
"avatars/300-9.jpg",
|
|
],
|
|
},
|
|
]);
|
|
|
|
// Set vis-timeline options
|
|
var options = {
|
|
zoomable: false,
|
|
moveable: false,
|
|
selectable: false,
|
|
|
|
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
margin: {
|
|
item: {
|
|
horizontal: 10,
|
|
vertical: 35,
|
|
},
|
|
},
|
|
|
|
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
showCurrentTime: false,
|
|
|
|
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
xss: {
|
|
disabled: false,
|
|
filterOptions: {
|
|
whiteList: {
|
|
div: ["class", "style"],
|
|
img: ["data-kt-timeline-avatar-src", "alt"],
|
|
a: ["href", "class"],
|
|
},
|
|
},
|
|
},
|
|
// specify a template for the items
|
|
template: function (item) {
|
|
// Build users group
|
|
const users = item.users;
|
|
let userTemplate = "";
|
|
users.forEach((user) => {
|
|
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${
|
|
rootImagePath + user
|
|
}" alt="" /></div>`;
|
|
});
|
|
|
|
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
|
|
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
|
|
|
|
<div class="d-flex align-items-center position-relative z-index-2">
|
|
<div class="symbol-group symbol-hover flex-nowrap me-3">
|
|
${userTemplate}
|
|
</div>
|
|
|
|
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
|
|
</div>
|
|
|
|
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
|
|
${item.progress}
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
// Remove block ui on initial draw
|
|
onInitialDrawComplete: function () {
|
|
handleAvatarPath();
|
|
|
|
const target = element.closest(
|
|
'[data-kt-timeline-widget-1-blockui="true"]'
|
|
);
|
|
const blockUI = KTBlockUI.getInstance(target);
|
|
|
|
if (blockUI.isBlocked()) {
|
|
setTimeout(() => {
|
|
blockUI.release();
|
|
}, 1000);
|
|
}
|
|
},
|
|
};
|
|
|
|
// Init vis-timeline
|
|
const timeline = new vis.Timeline(element, items, groups, options);
|
|
|
|
// Prevent infinite loop draws
|
|
timeline.on("currentTimeTick", () => {
|
|
// After fired the first time we un-subscribed
|
|
timeline.off("currentTimeTick");
|
|
});
|
|
};
|
|
|
|
// Month timeline
|
|
const initTimelineMonth = () => {
|
|
// Detect element
|
|
const element = document.querySelector("#kt_timeline_widget_1_3");
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
if (element.innerHTML) {
|
|
return;
|
|
}
|
|
|
|
// Set variables
|
|
var now = Date.now();
|
|
var rootImagePath = element.getAttribute(
|
|
"data-kt-timeline-widget-1-image-root"
|
|
);
|
|
|
|
// Build vis-timeline datasets
|
|
var groups = new vis.DataSet([
|
|
{
|
|
id: "research",
|
|
content: "Research",
|
|
order: 1,
|
|
},
|
|
{
|
|
id: "qa",
|
|
content: "Phase 2.6 QA",
|
|
order: 2,
|
|
},
|
|
{
|
|
id: "ui",
|
|
content: "UI Design",
|
|
order: 3,
|
|
},
|
|
{
|
|
id: "dev",
|
|
content: "Development",
|
|
order: 4,
|
|
},
|
|
]);
|
|
|
|
var items = new vis.DataSet([
|
|
{
|
|
id: 1,
|
|
group: "research",
|
|
start: now,
|
|
end: moment(now).add(2, "months"),
|
|
content: "Tags",
|
|
progress: "79%",
|
|
color: "primary",
|
|
users: ["avatars/300-6.jpg", "avatars/300-1.jpg"],
|
|
},
|
|
{
|
|
id: 2,
|
|
group: "qa",
|
|
start: moment(now).add(0.5, "months"),
|
|
end: moment(now).add(5, "months"),
|
|
content: "Testing",
|
|
progress: "64%",
|
|
color: "success",
|
|
users: ["avatars/300-2.jpg"],
|
|
},
|
|
{
|
|
id: 3,
|
|
group: "ui",
|
|
start: moment(now).add(2, "months"),
|
|
end: moment(now).add(6.5, "months"),
|
|
content: "Media",
|
|
progress: "82%",
|
|
color: "danger",
|
|
users: ["avatars/300-5.jpg", "avatars/300-20.jpg"],
|
|
},
|
|
{
|
|
id: 4,
|
|
group: "dev",
|
|
start: moment(now).add(4, "months"),
|
|
end: moment(now).add(7, "months"),
|
|
content: "Plugins",
|
|
progress: "58%",
|
|
color: "info",
|
|
users: [
|
|
"avatars/300-23.jpg",
|
|
"avatars/300-12.jpg",
|
|
"avatars/300-9.jpg",
|
|
],
|
|
},
|
|
]);
|
|
|
|
// Set vis-timeline options
|
|
var options = {
|
|
zoomable: false,
|
|
moveable: false,
|
|
selectable: false,
|
|
|
|
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
margin: {
|
|
item: {
|
|
horizontal: 10,
|
|
vertical: 35,
|
|
},
|
|
},
|
|
|
|
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
showCurrentTime: false,
|
|
|
|
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
xss: {
|
|
disabled: false,
|
|
filterOptions: {
|
|
whiteList: {
|
|
div: ["class", "style"],
|
|
img: ["data-kt-timeline-avatar-src", "alt"],
|
|
a: ["href", "class"],
|
|
},
|
|
},
|
|
},
|
|
// specify a template for the items
|
|
template: function (item) {
|
|
// Build users group
|
|
const users = item.users;
|
|
let userTemplate = "";
|
|
users.forEach((user) => {
|
|
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${
|
|
rootImagePath + user
|
|
}" alt="" /></div>`;
|
|
});
|
|
|
|
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
|
|
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
|
|
|
|
<div class="d-flex align-items-center position-relative z-index-2">
|
|
<div class="symbol-group symbol-hover flex-nowrap me-3">
|
|
${userTemplate}
|
|
</div>
|
|
|
|
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
|
|
</div>
|
|
|
|
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
|
|
${item.progress}
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
// Remove block ui on initial draw
|
|
onInitialDrawComplete: function () {
|
|
handleAvatarPath();
|
|
|
|
const target = element.closest(
|
|
'[data-kt-timeline-widget-1-blockui="true"]'
|
|
);
|
|
const blockUI = KTBlockUI.getInstance(target);
|
|
|
|
if (blockUI.isBlocked()) {
|
|
setTimeout(() => {
|
|
blockUI.release();
|
|
}, 1000);
|
|
}
|
|
},
|
|
};
|
|
|
|
// Init vis-timeline
|
|
const timeline = new vis.Timeline(element, items, groups, options);
|
|
|
|
// Prevent infinite loop draws
|
|
timeline.on("currentTimeTick", () => {
|
|
// After fired the first time we un-subscribed
|
|
timeline.off("currentTimeTick");
|
|
});
|
|
};
|
|
|
|
// Handle BlockUI
|
|
const handleBlockUI = () => {
|
|
// Select block ui elements
|
|
const elements = document.querySelectorAll(
|
|
'[data-kt-timeline-widget-1-blockui="true"]'
|
|
);
|
|
|
|
// Init block ui
|
|
elements.forEach((element) => {
|
|
const blockUI = new KTBlockUI(element, {
|
|
overlayClass: "bg-body",
|
|
});
|
|
|
|
blockUI.block();
|
|
});
|
|
};
|
|
|
|
// Handle tabs visibility
|
|
const tabsVisibility = () => {
|
|
const tabs = document.querySelectorAll(
|
|
'[data-kt-timeline-widget-1="tab"]'
|
|
);
|
|
|
|
tabs.forEach((tab) => {
|
|
tab.addEventListener("shown.bs.tab", (e) => {
|
|
// Week tab
|
|
if (
|
|
tab.getAttribute("href") ===
|
|
"#kt_timeline_widget_1_tab_week"
|
|
) {
|
|
initTimelineWeek();
|
|
}
|
|
|
|
// Month tab
|
|
if (
|
|
tab.getAttribute("href") ===
|
|
"#kt_timeline_widget_1_tab_month"
|
|
) {
|
|
initTimelineMonth();
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
// Handle avatar path conflict
|
|
const handleAvatarPath = () => {
|
|
const avatars = document.querySelectorAll(
|
|
"[data-kt-timeline-avatar-src]"
|
|
);
|
|
|
|
if (!avatars) {
|
|
return;
|
|
}
|
|
|
|
avatars.forEach((avatar) => {
|
|
avatar.setAttribute(
|
|
"src",
|
|
avatar.getAttribute("data-kt-timeline-avatar-src")
|
|
);
|
|
avatar.removeAttribute("data-kt-timeline-avatar-src");
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initTimelineDay();
|
|
handleBlockUI();
|
|
tabsVisibility();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTTimelineWidget1;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTTimelineWidget1.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTTimelineWidget2 = (function () {
|
|
// Private methods
|
|
var handleCheckbox = function () {
|
|
var card = document.querySelector("#kt_timeline_widget_2_card");
|
|
|
|
if (!card) {
|
|
return;
|
|
}
|
|
|
|
// Checkbox Handler
|
|
KTUtil.on(card, '[data-kt-element="checkbox"]', "change", function (e) {
|
|
var check = this.closest(".form-check");
|
|
var tr = this.closest("tr");
|
|
var bullet = tr.querySelector('[data-kt-element="bullet"]');
|
|
var status = tr.querySelector('[data-kt-element="status"]');
|
|
|
|
if (this.checked === true) {
|
|
check.classList.add("form-check-success");
|
|
|
|
bullet.classList.remove("bg-primary");
|
|
bullet.classList.add("bg-success");
|
|
|
|
status.innerText = "Done";
|
|
status.classList.remove("badge-light-primary");
|
|
status.classList.add("badge-light-success");
|
|
} else {
|
|
check.classList.remove("form-check-success");
|
|
|
|
bullet.classList.remove("bg-success");
|
|
bullet.classList.add("bg-primary");
|
|
|
|
status.innerText = "In Process";
|
|
status.classList.remove("badge-light-success");
|
|
status.classList.add("badge-light-primary");
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
handleCheckbox();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTTimelineWidget2;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTTimelineWidget2.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTTimelineWidget4 = (function () {
|
|
// Private methods
|
|
// Day timeline
|
|
const initTimelineDay = () => {
|
|
// Detect element
|
|
const element = document.querySelector("#kt_timeline_widget_4_1");
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
if (element.innerHTML) {
|
|
return;
|
|
}
|
|
|
|
// Set variables
|
|
var now = Date.now();
|
|
var rootImagePath = element.getAttribute(
|
|
"data-kt-timeline-widget-4-image-root"
|
|
);
|
|
|
|
// Build vis-timeline datasets
|
|
var groups = new vis.DataSet([
|
|
{
|
|
id: "research",
|
|
content: "Research",
|
|
order: 1,
|
|
},
|
|
{
|
|
id: "qa",
|
|
content: "Phase 2.6 QA",
|
|
order: 2,
|
|
},
|
|
{
|
|
id: "ui",
|
|
content: "UI Design",
|
|
order: 3,
|
|
},
|
|
{
|
|
id: "dev",
|
|
content: "Development",
|
|
order: 4,
|
|
},
|
|
]);
|
|
|
|
var items = new vis.DataSet([
|
|
{
|
|
id: 1,
|
|
group: "research",
|
|
start: now,
|
|
end: moment(now).add(1.5, "hours"),
|
|
content: "Meeting",
|
|
progress: "60%",
|
|
color: "primary",
|
|
users: ["avatars/300-6.jpg", "avatars/300-1.jpg"],
|
|
},
|
|
{
|
|
id: 2,
|
|
group: "qa",
|
|
start: moment(now).add(1, "hours"),
|
|
end: moment(now).add(2, "hours"),
|
|
content: "Testing",
|
|
progress: "47%",
|
|
color: "success",
|
|
users: ["avatars/300-2.jpg"],
|
|
},
|
|
{
|
|
id: 3,
|
|
group: "ui",
|
|
start: moment(now).add(30, "minutes"),
|
|
end: moment(now).add(2.5, "hours"),
|
|
content: "Landing page",
|
|
progress: "55%",
|
|
color: "danger",
|
|
users: ["avatars/300-5.jpg", "avatars/300-20.jpg"],
|
|
},
|
|
{
|
|
id: 4,
|
|
group: "dev",
|
|
start: moment(now).add(1.5, "hours"),
|
|
end: moment(now).add(3, "hours"),
|
|
content: "Products module",
|
|
progress: "75%",
|
|
color: "info",
|
|
users: [
|
|
"avatars/300-23.jpg",
|
|
"avatars/300-12.jpg",
|
|
"avatars/300-9.jpg",
|
|
],
|
|
},
|
|
]);
|
|
|
|
// Set vis-timeline options
|
|
var options = {
|
|
zoomable: false,
|
|
moveable: false,
|
|
selectable: false,
|
|
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
margin: {
|
|
item: {
|
|
horizontal: 10,
|
|
vertical: 35,
|
|
},
|
|
},
|
|
|
|
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
showCurrentTime: false,
|
|
|
|
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
xss: {
|
|
disabled: false,
|
|
filterOptions: {
|
|
whiteList: {
|
|
div: ["class", "style"],
|
|
img: ["data-kt-timeline-avatar-src", "alt"],
|
|
a: ["href", "class"],
|
|
},
|
|
},
|
|
},
|
|
// specify a template for the items
|
|
template: function (item) {
|
|
// Build users group
|
|
const users = item.users;
|
|
let userTemplate = "";
|
|
users.forEach((user) => {
|
|
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${
|
|
rootImagePath + user
|
|
}" alt="" /></div>`;
|
|
});
|
|
|
|
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
|
|
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
|
|
|
|
<div class="d-flex align-items-center position-relative z-index-2">
|
|
<div class="symbol-group symbol-hover flex-nowrap me-3">
|
|
${userTemplate}
|
|
</div>
|
|
|
|
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
|
|
</div>
|
|
|
|
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
|
|
${item.progress}
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
// Remove block ui on initial draw
|
|
onInitialDrawComplete: function () {
|
|
handleAvatarPath();
|
|
|
|
const target = element.closest(
|
|
'[data-kt-timeline-widget-4-blockui="true"]'
|
|
);
|
|
const blockUI = KTBlockUI.getInstance(target);
|
|
|
|
if (blockUI.isBlocked()) {
|
|
setTimeout(() => {
|
|
blockUI.release();
|
|
}, 1000);
|
|
}
|
|
},
|
|
};
|
|
|
|
// Init vis-timeline
|
|
const timeline = new vis.Timeline(element, items, groups, options);
|
|
|
|
// Prevent infinite loop draws
|
|
timeline.on("currentTimeTick", () => {
|
|
// After fired the first time we un-subscribed
|
|
timeline.off("currentTimeTick");
|
|
});
|
|
};
|
|
|
|
// Week timeline
|
|
const initTimelineWeek = () => {
|
|
// Detect element
|
|
const element = document.querySelector("#kt_timeline_widget_4_2");
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
if (element.innerHTML) {
|
|
return;
|
|
}
|
|
|
|
// Set variables
|
|
var now = Date.now();
|
|
var rootImagePath = element.getAttribute(
|
|
"data-kt-timeline-widget-4-image-root"
|
|
);
|
|
|
|
// Build vis-timeline datasets
|
|
var groups = new vis.DataSet([
|
|
{
|
|
id: 1,
|
|
content: "Research",
|
|
order: 1,
|
|
},
|
|
{
|
|
id: 2,
|
|
content: "Phase 2.6 QA",
|
|
order: 2,
|
|
},
|
|
{
|
|
id: 3,
|
|
content: "UI Design",
|
|
order: 3,
|
|
},
|
|
{
|
|
id: 4,
|
|
content: "Development",
|
|
order: 4,
|
|
},
|
|
]);
|
|
|
|
var items = new vis.DataSet([
|
|
{
|
|
id: 1,
|
|
group: 1,
|
|
start: now,
|
|
end: moment(now).add(7, "days"),
|
|
content: "Framework",
|
|
progress: "71%",
|
|
color: "primary",
|
|
users: ["avatars/300-6.jpg", "avatars/300-1.jpg"],
|
|
},
|
|
{
|
|
id: 2,
|
|
group: 2,
|
|
start: moment(now).add(7, "days"),
|
|
end: moment(now).add(14, "days"),
|
|
content: "Accessibility",
|
|
progress: "84%",
|
|
color: "success",
|
|
users: ["avatars/300-2.jpg"],
|
|
},
|
|
{
|
|
id: 3,
|
|
group: 3,
|
|
start: moment(now).add(3, "days"),
|
|
end: moment(now).add(20, "days"),
|
|
content: "Microsites",
|
|
progress: "69%",
|
|
color: "danger",
|
|
users: ["avatars/300-5.jpg", "avatars/300-20.jpg"],
|
|
},
|
|
{
|
|
id: 4,
|
|
group: 4,
|
|
start: moment(now).add(10, "days"),
|
|
end: moment(now).add(21, "days"),
|
|
content: "Deployment",
|
|
progress: "74%",
|
|
color: "info",
|
|
users: [
|
|
"avatars/300-23.jpg",
|
|
"avatars/300-12.jpg",
|
|
"avatars/300-9.jpg",
|
|
],
|
|
},
|
|
]);
|
|
|
|
// Set vis-timeline options
|
|
var options = {
|
|
zoomable: false,
|
|
moveable: false,
|
|
selectable: false,
|
|
|
|
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
margin: {
|
|
item: {
|
|
horizontal: 10,
|
|
vertical: 35,
|
|
},
|
|
},
|
|
|
|
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
showCurrentTime: false,
|
|
|
|
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
xss: {
|
|
disabled: false,
|
|
filterOptions: {
|
|
whiteList: {
|
|
div: ["class", "style"],
|
|
img: ["data-kt-timeline-avatar-src", "alt"],
|
|
a: ["href", "class"],
|
|
},
|
|
},
|
|
},
|
|
// specify a template for the items
|
|
template: function (item) {
|
|
// Build users group
|
|
const users = item.users;
|
|
let userTemplate = "";
|
|
users.forEach((user) => {
|
|
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${
|
|
rootImagePath + user
|
|
}" alt="" /></div>`;
|
|
});
|
|
|
|
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
|
|
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
|
|
|
|
<div class="d-flex align-items-center position-relative z-index-2">
|
|
<div class="symbol-group symbol-hover flex-nowrap me-3">
|
|
${userTemplate}
|
|
</div>
|
|
|
|
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
|
|
</div>
|
|
|
|
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
|
|
${item.progress}
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
// Remove block ui on initial draw
|
|
onInitialDrawComplete: function () {
|
|
handleAvatarPath();
|
|
|
|
const target = element.closest(
|
|
'[data-kt-timeline-widget-4-blockui="true"]'
|
|
);
|
|
const blockUI = KTBlockUI.getInstance(target);
|
|
|
|
if (blockUI.isBlocked()) {
|
|
setTimeout(() => {
|
|
blockUI.release();
|
|
}, 1000);
|
|
}
|
|
},
|
|
};
|
|
|
|
// Init vis-timeline
|
|
const timeline = new vis.Timeline(element, items, groups, options);
|
|
|
|
// Prevent infinite loop draws
|
|
timeline.on("currentTimeTick", () => {
|
|
// After fired the first time we un-subscribed
|
|
timeline.off("currentTimeTick");
|
|
});
|
|
};
|
|
|
|
// Month timeline
|
|
const initTimelineMonth = () => {
|
|
// Detect element
|
|
const element = document.querySelector("#kt_timeline_widget_4_3");
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
if (element.innerHTML) {
|
|
return;
|
|
}
|
|
|
|
// Set variables
|
|
var now = Date.now();
|
|
var rootImagePath = element.getAttribute(
|
|
"data-kt-timeline-widget-4-image-root"
|
|
);
|
|
|
|
// Build vis-timeline datasets
|
|
var groups = new vis.DataSet([
|
|
{
|
|
id: "research",
|
|
content: "Research",
|
|
order: 1,
|
|
},
|
|
{
|
|
id: "qa",
|
|
content: "Phase 2.6 QA",
|
|
order: 2,
|
|
},
|
|
{
|
|
id: "ui",
|
|
content: "UI Design",
|
|
order: 3,
|
|
},
|
|
{
|
|
id: "dev",
|
|
content: "Development",
|
|
order: 4,
|
|
},
|
|
]);
|
|
|
|
var items = new vis.DataSet([
|
|
{
|
|
id: 1,
|
|
group: "research",
|
|
start: now,
|
|
end: moment(now).add(2, "months"),
|
|
content: "Tags",
|
|
progress: "79%",
|
|
color: "primary",
|
|
users: ["avatars/300-6.jpg", "avatars/300-1.jpg"],
|
|
},
|
|
{
|
|
id: 2,
|
|
group: "qa",
|
|
start: moment(now).add(0.5, "months"),
|
|
end: moment(now).add(5, "months"),
|
|
content: "Testing",
|
|
progress: "64%",
|
|
color: "success",
|
|
users: ["avatars/300-2.jpg"],
|
|
},
|
|
{
|
|
id: 3,
|
|
group: "ui",
|
|
start: moment(now).add(2, "months"),
|
|
end: moment(now).add(6.5, "months"),
|
|
content: "Media",
|
|
progress: "82%",
|
|
color: "danger",
|
|
users: ["avatars/300-5.jpg", "avatars/300-20.jpg"],
|
|
},
|
|
{
|
|
id: 4,
|
|
group: "dev",
|
|
start: moment(now).add(4, "months"),
|
|
end: moment(now).add(7, "months"),
|
|
content: "Plugins",
|
|
progress: "58%",
|
|
color: "info",
|
|
users: [
|
|
"avatars/300-23.jpg",
|
|
"avatars/300-12.jpg",
|
|
"avatars/300-9.jpg",
|
|
],
|
|
},
|
|
]);
|
|
|
|
// Set vis-timeline options
|
|
var options = {
|
|
zoomable: false,
|
|
moveable: false,
|
|
selectable: false,
|
|
|
|
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
margin: {
|
|
item: {
|
|
horizontal: 10,
|
|
vertical: 35,
|
|
},
|
|
},
|
|
|
|
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
showCurrentTime: false,
|
|
|
|
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
xss: {
|
|
disabled: false,
|
|
filterOptions: {
|
|
whiteList: {
|
|
div: ["class", "style"],
|
|
img: ["data-kt-timeline-avatar-src", "alt"],
|
|
a: ["href", "class"],
|
|
},
|
|
},
|
|
},
|
|
// specify a template for the items
|
|
template: function (item) {
|
|
// Build users group
|
|
const users = item.users;
|
|
let userTemplate = "";
|
|
users.forEach((user) => {
|
|
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${
|
|
rootImagePath + user
|
|
}" alt="" /></div>`;
|
|
});
|
|
|
|
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
|
|
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
|
|
|
|
<div class="d-flex align-items-center position-relative z-index-2">
|
|
<div class="symbol-group symbol-hover flex-nowrap me-3">
|
|
${userTemplate}
|
|
</div>
|
|
|
|
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
|
|
</div>
|
|
|
|
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
|
|
${item.progress}
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
// Remove block ui on initial draw
|
|
onInitialDrawComplete: function () {
|
|
handleAvatarPath();
|
|
|
|
const target = element.closest(
|
|
'[data-kt-timeline-widget-4-blockui="true"]'
|
|
);
|
|
const blockUI = KTBlockUI.getInstance(target);
|
|
|
|
if (blockUI.isBlocked()) {
|
|
setTimeout(() => {
|
|
blockUI.release();
|
|
}, 1000);
|
|
}
|
|
},
|
|
};
|
|
|
|
// Init vis-timeline
|
|
const timeline = new vis.Timeline(element, items, groups, options);
|
|
|
|
// Prevent infinite loop draws
|
|
timeline.on("currentTimeTick", () => {
|
|
// After fired the first time we un-subscribed
|
|
timeline.off("currentTimeTick");
|
|
});
|
|
};
|
|
|
|
// 2022 timeline
|
|
const initTimeline2022 = () => {
|
|
// Detect element
|
|
const element = document.querySelector("#kt_timeline_widget_4_4");
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
if (element.innerHTML) {
|
|
return;
|
|
}
|
|
|
|
// Set variables
|
|
var now = Date.now();
|
|
var rootImagePath = element.getAttribute(
|
|
"data-kt-timeline-widget-4-image-root"
|
|
);
|
|
|
|
// Build vis-timeline datasets
|
|
var groups = new vis.DataSet([
|
|
{
|
|
id: "research",
|
|
content: "Research",
|
|
order: 1,
|
|
},
|
|
{
|
|
id: "qa",
|
|
content: "Phase 2.6 QA",
|
|
order: 2,
|
|
},
|
|
{
|
|
id: "ui",
|
|
content: "UI Design",
|
|
order: 3,
|
|
},
|
|
{
|
|
id: "dev",
|
|
content: "Development",
|
|
order: 4,
|
|
},
|
|
]);
|
|
|
|
var items = new vis.DataSet([
|
|
{
|
|
id: 1,
|
|
group: "research",
|
|
start: now,
|
|
end: moment(now).add(2, "months"),
|
|
content: "Tags",
|
|
progress: "51%",
|
|
color: "primary",
|
|
users: ["avatars/300-7.jpg", "avatars/300-2.jpg"],
|
|
},
|
|
{
|
|
id: 2,
|
|
group: "qa",
|
|
start: moment(now).add(0.5, "months"),
|
|
end: moment(now).add(5, "months"),
|
|
content: "Testing",
|
|
progress: "64%",
|
|
color: "success",
|
|
users: ["avatars/300-2.jpg"],
|
|
},
|
|
{
|
|
id: 3,
|
|
group: "ui",
|
|
start: moment(now).add(2, "months"),
|
|
end: moment(now).add(6.5, "months"),
|
|
content: "Media",
|
|
progress: "54%",
|
|
color: "danger",
|
|
users: ["avatars/300-5.jpg", "avatars/300-21.jpg"],
|
|
},
|
|
{
|
|
id: 4,
|
|
group: "dev",
|
|
start: moment(now).add(4, "months"),
|
|
end: moment(now).add(7, "months"),
|
|
content: "Plugins",
|
|
progress: "348%",
|
|
color: "info",
|
|
users: [
|
|
"avatars/300-3.jpg",
|
|
"avatars/300-11.jpg",
|
|
"avatars/300-13.jpg",
|
|
],
|
|
},
|
|
]);
|
|
|
|
// Set vis-timeline options
|
|
var options = {
|
|
zoomable: false,
|
|
moveable: false,
|
|
selectable: false,
|
|
|
|
// More options https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
margin: {
|
|
item: {
|
|
horizontal: 10,
|
|
vertical: 35,
|
|
},
|
|
},
|
|
|
|
// Remove current time line --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
showCurrentTime: false,
|
|
|
|
// Whitelist specified tags and attributes from template --- more info: https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options
|
|
xss: {
|
|
disabled: false,
|
|
filterOptions: {
|
|
whiteList: {
|
|
div: ["class", "style"],
|
|
img: ["data-kt-timeline-avatar-src", "alt"],
|
|
a: ["href", "class"],
|
|
},
|
|
},
|
|
},
|
|
// specify a template for the items
|
|
template: function (item) {
|
|
// Build users group
|
|
const users = item.users;
|
|
let userTemplate = "";
|
|
users.forEach((user) => {
|
|
userTemplate += `<div class="symbol symbol-circle symbol-25px"><img data-kt-timeline-avatar-src="${
|
|
rootImagePath + user
|
|
}" alt="" /></div>`;
|
|
});
|
|
|
|
return `<div class="rounded-pill bg-light-${item.color} d-flex align-items-center position-relative h-40px w-100 p-2 overflow-hidden">
|
|
<div class="position-absolute rounded-pill d-block bg-${item.color} start-0 top-0 h-100 z-index-1" style="width: ${item.progress};"></div>
|
|
|
|
<div class="d-flex align-items-center position-relative z-index-2">
|
|
<div class="symbol-group symbol-hover flex-nowrap me-3">
|
|
${userTemplate}
|
|
</div>
|
|
|
|
<a href="#" class="fw-bold text-white text-hover-dark">${item.content}</a>
|
|
</div>
|
|
|
|
<div class="d-flex flex-center bg-body rounded-pill fs-7 fw-bolder ms-auto h-100 px-3 position-relative z-index-2">
|
|
${item.progress}
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
// Remove block ui on initial draw
|
|
onInitialDrawComplete: function () {
|
|
handleAvatarPath();
|
|
|
|
const target = element.closest(
|
|
'[data-kt-timeline-widget-4-blockui="true"]'
|
|
);
|
|
const blockUI = KTBlockUI.getInstance(target);
|
|
|
|
if (blockUI.isBlocked()) {
|
|
setTimeout(() => {
|
|
blockUI.release();
|
|
}, 1000);
|
|
}
|
|
},
|
|
};
|
|
|
|
// Init vis-timeline
|
|
const timeline = new vis.Timeline(element, items, groups, options);
|
|
|
|
// Prevent infinite loop draws
|
|
timeline.on("currentTimeTick", () => {
|
|
// After fired the first time we un-subscribed
|
|
timeline.off("currentTimeTick");
|
|
});
|
|
};
|
|
// Handle BlockUI
|
|
const handleBlockUI = () => {
|
|
// Select block ui elements
|
|
const elements = document.querySelectorAll(
|
|
'[data-kt-timeline-widget-4-blockui="true"]'
|
|
);
|
|
|
|
// Init block ui
|
|
elements.forEach((element) => {
|
|
const blockUI = new KTBlockUI(element, {
|
|
overlayClass: "bg-body",
|
|
});
|
|
|
|
blockUI.block();
|
|
});
|
|
};
|
|
|
|
// Handle tabs visibility
|
|
const tabsVisibility = () => {
|
|
const tabs = document.querySelectorAll(
|
|
'[data-kt-timeline-widget-4="tab"]'
|
|
);
|
|
|
|
tabs.forEach((tab) => {
|
|
tab.addEventListener("shown.bs.tab", (e) => {
|
|
// Week tab
|
|
if (
|
|
tab.getAttribute("href") ===
|
|
"#kt_timeline_widget_4_tab_week"
|
|
) {
|
|
initTimelineWeek();
|
|
}
|
|
|
|
// Month tab
|
|
if (
|
|
tab.getAttribute("href") ===
|
|
"#kt_timeline_widget_4_tab_month"
|
|
) {
|
|
initTimelineMonth();
|
|
}
|
|
|
|
// 2022 tab
|
|
if (
|
|
tab.getAttribute("href") ===
|
|
"#kt_timeline_widget_4_tab_2022"
|
|
) {
|
|
initTimeline2022();
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
// Handle avatar path conflict
|
|
const handleAvatarPath = () => {
|
|
const avatars = document.querySelectorAll(
|
|
"[data-kt-timeline-avatar-src]"
|
|
);
|
|
|
|
if (!avatars) {
|
|
return;
|
|
}
|
|
|
|
avatars.forEach((avatar) => {
|
|
avatar.setAttribute(
|
|
"src",
|
|
avatar.getAttribute("data-kt-timeline-avatar-src")
|
|
);
|
|
avatar.removeAttribute("data-kt-timeline-avatar-src");
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
initTimelineDay();
|
|
handleBlockUI();
|
|
tabsVisibility();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTTimelineWidget4;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTTimelineWidget4.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTTablesWidget14 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart4 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart5 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart, chartSelector, data, initByDefault) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
|
|
var strokeColor = KTUtil.getCssVariableValue("--bs-" + "gray-300");
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-body-bg");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Net Profit",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 2,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
crosshairs: {
|
|
show: false,
|
|
position: "front",
|
|
stroke: {
|
|
color: strokeColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 60,
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
colors: [lightColor],
|
|
markers: {
|
|
colors: [lightColor],
|
|
strokeColor: [baseColor],
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var chart1Data = [7, 10, 5, 21, 6, 11, 5, 23, 5, 11, 18, 7, 21, 13];
|
|
initChart(chart1, "#kt_table_widget_14_chart_1", chart1Data, true);
|
|
|
|
var chart2Data = [17, 5, 23, 2, 21, 9, 17, 23, 4, 24, 9, 17, 21, 7];
|
|
initChart(chart2, "#kt_table_widget_14_chart_2", chart2Data, true);
|
|
|
|
var chart3Data = [2, 24, 5, 17, 7, 2, 12, 24, 5, 24, 2, 8, 12, 7];
|
|
initChart(chart3, "#kt_table_widget_14_chart_3", chart3Data, true);
|
|
|
|
var chart4Data = [24, 3, 5, 19, 3, 7, 25, 14, 5, 14, 2, 8, 5, 17];
|
|
initChart(chart4, "#kt_table_widget_14_chart_4", chart4Data, true);
|
|
|
|
var chart5Data = [3, 23, 1, 19, 3, 17, 3, 9, 25, 4, 2, 18, 25, 3];
|
|
initChart(chart5, "#kt_table_widget_14_chart_5", chart5Data, true);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
}
|
|
|
|
if (chart4.rendered) {
|
|
chart4.self.destroy();
|
|
}
|
|
|
|
if (chart5.rendered) {
|
|
chart5.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_table_widget_14_chart_1",
|
|
chart1Data,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_table_widget_14_chart_2",
|
|
chart2Data,
|
|
chart2.rendered
|
|
);
|
|
initChart(
|
|
chart3,
|
|
"#kt_table_widget_14_chart_3",
|
|
chart3Data,
|
|
chart3.rendered
|
|
);
|
|
initChart(
|
|
chart4,
|
|
"#kt_table_widget_14_chart_4",
|
|
chart4Data,
|
|
chart4.rendered
|
|
);
|
|
initChart(
|
|
chart5,
|
|
"#kt_table_widget_14_chart_5",
|
|
chart5Data,
|
|
chart5.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTTablesWidget14;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTTablesWidget14.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTTablesWidget15 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart4 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart5 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart, chartSelector, data, initByDefault) {
|
|
var element = document.querySelector(chartSelector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
|
|
var strokeColor = KTUtil.getCssVariableValue("--bs-" + "gray-300");
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-body-bg");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Net Profit",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 2,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
crosshairs: {
|
|
show: false,
|
|
position: "front",
|
|
stroke: {
|
|
color: strokeColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 60,
|
|
labels: {
|
|
show: false,
|
|
ontSize: "12px",
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
colors: [lightColor],
|
|
markers: {
|
|
colors: [lightColor],
|
|
strokeColor: [baseColor],
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var chart1Data = [7, 10, 5, 21, 6, 11, 5, 23, 5, 11, 18, 7, 21, 13];
|
|
initChart(chart1, "#kt_table_widget_15_chart_1", chart1Data, true);
|
|
|
|
var chart2Data = [17, 5, 23, 2, 21, 9, 17, 23, 4, 24, 9, 17, 21, 7];
|
|
initChart(chart2, "#kt_table_widget_15_chart_2", chart2Data, true);
|
|
|
|
var chart3Data = [2, 24, 5, 17, 7, 2, 12, 24, 5, 24, 2, 8, 12, 7];
|
|
initChart(chart3, "#kt_table_widget_15_chart_3", chart3Data, true);
|
|
|
|
var chart4Data = [24, 3, 5, 19, 3, 7, 25, 14, 5, 14, 2, 8, 5, 17];
|
|
initChart(chart4, "#kt_table_widget_15_chart_4", chart4Data, true);
|
|
|
|
var chart5Data = [3, 23, 1, 19, 3, 17, 3, 9, 25, 4, 2, 18, 25, 3];
|
|
initChart(chart5, "#kt_table_widget_15_chart_5", chart5Data, true);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
}
|
|
|
|
if (chart4.rendered) {
|
|
chart4.self.destroy();
|
|
}
|
|
|
|
if (chart5.rendered) {
|
|
chart5.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_table_widget_15_chart_1",
|
|
chart1Data,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_table_widget_15_chart_2",
|
|
chart2Data,
|
|
chart2.rendered
|
|
);
|
|
initChart(
|
|
chart3,
|
|
"#kt_table_widget_15_chart_3",
|
|
chart3Data,
|
|
chart3.rendered
|
|
);
|
|
initChart(
|
|
chart4,
|
|
"#kt_table_widget_15_chart_4",
|
|
chart4Data,
|
|
chart4.rendered
|
|
);
|
|
initChart(
|
|
chart5,
|
|
"#kt_table_widget_15_chart_5",
|
|
chart5Data,
|
|
chart5.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTTablesWidget15;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTTablesWidget15.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTTablesWidget16 = (function () {
|
|
var chart1 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart2 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart3 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart4 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart5 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart6 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart7 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart8 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart9 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart10 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart11 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart12 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart13 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart14 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart15 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart16 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart17 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart18 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart19 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
var chart20 = {
|
|
self: null,
|
|
rendered: false,
|
|
};
|
|
|
|
// Private methods
|
|
var initChart = function (chart, toggle, selector, data, initByDefault) {
|
|
var element = document.querySelector(selector);
|
|
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
var height = parseInt(KTUtil.css(element, "height"));
|
|
var color = element.getAttribute("data-kt-chart-color");
|
|
var labelColor = KTUtil.getCssVariableValue("--bs-gray-800");
|
|
var strokeColor = KTUtil.getCssVariableValue("--bs-gray-300");
|
|
var baseColor = KTUtil.getCssVariableValue("--bs-" + color);
|
|
var lightColor = KTUtil.getCssVariableValue("--bs-body-bg");
|
|
|
|
var options = {
|
|
series: [
|
|
{
|
|
name: "Net Profit",
|
|
data: data,
|
|
},
|
|
],
|
|
chart: {
|
|
fontFamily: "inherit",
|
|
type: "area",
|
|
height: height,
|
|
toolbar: {
|
|
show: false,
|
|
},
|
|
zoom: {
|
|
enabled: false,
|
|
},
|
|
sparkline: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
plotOptions: {},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
fill: {
|
|
type: "solid",
|
|
opacity: 1,
|
|
},
|
|
stroke: {
|
|
curve: "smooth",
|
|
show: true,
|
|
width: 2,
|
|
colors: [baseColor],
|
|
},
|
|
xaxis: {
|
|
axisBorder: {
|
|
show: false,
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
show: false,
|
|
},
|
|
crosshairs: {
|
|
show: false,
|
|
position: "front",
|
|
stroke: {
|
|
color: strokeColor,
|
|
width: 1,
|
|
dashArray: 3,
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 60,
|
|
labels: {
|
|
show: false,
|
|
ontSize: "12px",
|
|
},
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: "none",
|
|
value: 0,
|
|
},
|
|
},
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
},
|
|
colors: [lightColor],
|
|
markers: {
|
|
colors: [lightColor],
|
|
strokeColor: [baseColor],
|
|
strokeWidth: 3,
|
|
},
|
|
};
|
|
|
|
chart.self = new ApexCharts(element, options);
|
|
var tab = document.querySelector(toggle);
|
|
|
|
if (initByDefault === true) {
|
|
// Set timeout to properly get the parent elements width
|
|
setTimeout(function () {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}, 200);
|
|
}
|
|
|
|
tab.addEventListener("shown.bs.tab", function (event) {
|
|
if (chart.rendered === false) {
|
|
chart.self.render();
|
|
chart.rendered = true;
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
var chart1Data = [
|
|
16, 10, 15, 21, 6, 11, 5, 23, 5, 11, 18, 7, 21, 13,
|
|
];
|
|
initChart(
|
|
chart1,
|
|
"#kt_stats_widget_16_tab_link_1",
|
|
"#kt_table_widget_16_chart_1_1",
|
|
chart1Data,
|
|
true
|
|
);
|
|
|
|
var chart2Data = [8, 5, 16, 3, 23, 16, 11, 15, 3, 11, 15, 7, 17, 9];
|
|
initChart(
|
|
chart2,
|
|
"#kt_stats_widget_16_tab_link_1",
|
|
"#kt_table_widget_16_chart_1_2",
|
|
chart2Data,
|
|
true
|
|
);
|
|
|
|
var chart3Data = [8, 6, 16, 3, 23, 16, 11, 14, 3, 11, 15, 8, 17, 9];
|
|
initChart(
|
|
chart3,
|
|
"#kt_stats_widget_16_tab_link_1",
|
|
"#kt_table_widget_16_chart_1_3",
|
|
chart3Data,
|
|
true
|
|
);
|
|
|
|
var chart4Data = [
|
|
12, 5, 23, 12, 21, 9, 17, 20, 4, 24, 9, 13, 18, 9,
|
|
];
|
|
initChart(
|
|
chart4,
|
|
"#kt_stats_widget_16_tab_link_1",
|
|
"#kt_table_widget_16_chart_1_4",
|
|
chart4Data,
|
|
true
|
|
);
|
|
|
|
var chart5Data = [
|
|
13, 10, 15, 21, 6, 11, 5, 21, 5, 12, 18, 7, 21, 13,
|
|
];
|
|
initChart(
|
|
chart5,
|
|
"#kt_stats_widget_16_tab_link_2",
|
|
"#kt_table_widget_16_chart_2_1",
|
|
chart5Data,
|
|
false
|
|
);
|
|
|
|
var chart6Data = [
|
|
13, 5, 21, 12, 21, 9, 17, 20, 4, 23, 9, 17, 21, 7,
|
|
];
|
|
initChart(
|
|
chart6,
|
|
"#kt_stats_widget_16_tab_link_2",
|
|
"#kt_table_widget_16_chart_2_2",
|
|
chart6Data,
|
|
false
|
|
);
|
|
|
|
var chart7Data = [
|
|
8, 10, 14, 21, 6, 31, 5, 21, 5, 11, 15, 7, 23, 13,
|
|
];
|
|
initChart(
|
|
chart7,
|
|
"#kt_stats_widget_16_tab_link_2",
|
|
"#kt_table_widget_16_chart_2_3",
|
|
chart7Data,
|
|
false
|
|
);
|
|
|
|
var chart8Data = [
|
|
6, 10, 12, 21, 6, 11, 7, 23, 5, 12, 18, 7, 21, 15,
|
|
];
|
|
initChart(
|
|
chart8,
|
|
"#kt_stats_widget_16_tab_link_2",
|
|
"#kt_table_widget_16_chart_2_4",
|
|
chart8Data,
|
|
false
|
|
);
|
|
|
|
var chart9Data = [7, 10, 5, 21, 6, 11, 5, 23, 5, 11, 18, 7, 21, 13];
|
|
initChart(
|
|
chart9,
|
|
"#kt_stats_widget_16_tab_link_3",
|
|
"#kt_table_widget_16_chart_3_1",
|
|
chart9Data,
|
|
false
|
|
);
|
|
|
|
var chart10Data = [8, 5, 16, 2, 19, 9, 17, 21, 4, 24, 4, 13, 21, 5];
|
|
initChart(
|
|
chart10,
|
|
"#kt_stats_widget_16_tab_link_3",
|
|
"#kt_table_widget_16_chart_3_2",
|
|
chart10Data,
|
|
false
|
|
);
|
|
|
|
var chart11Data = [
|
|
15, 10, 12, 21, 6, 11, 23, 11, 5, 12, 18, 7, 21, 15,
|
|
];
|
|
initChart(
|
|
chart11,
|
|
"#kt_stats_widget_16_tab_link_3",
|
|
"#kt_table_widget_16_chart_3_3",
|
|
chart11Data,
|
|
false
|
|
);
|
|
|
|
var chart12Data = [3, 9, 12, 23, 6, 11, 7, 23, 5, 12, 14, 7, 21, 8];
|
|
initChart(
|
|
chart12,
|
|
"#kt_stats_widget_16_tab_link_3",
|
|
"#kt_table_widget_16_chart_3_4",
|
|
chart12Data,
|
|
false
|
|
);
|
|
|
|
var chart13Data = [
|
|
9, 14, 15, 21, 8, 11, 5, 23, 5, 11, 18, 5, 23, 8,
|
|
];
|
|
initChart(
|
|
chart13,
|
|
"#kt_stats_widget_16_tab_link_4",
|
|
"#kt_table_widget_16_chart_4_1",
|
|
chart13Data,
|
|
false
|
|
);
|
|
|
|
var chart14Data = [
|
|
7, 5, 23, 12, 21, 9, 17, 15, 4, 24, 9, 17, 21, 7,
|
|
];
|
|
initChart(
|
|
chart14,
|
|
"#kt_stats_widget_16_tab_link_4",
|
|
"#kt_table_widget_16_chart_4_2",
|
|
chart14Data,
|
|
false
|
|
);
|
|
|
|
var chart15Data = [
|
|
8, 10, 14, 21, 6, 31, 8, 23, 5, 3, 14, 7, 21, 12,
|
|
];
|
|
initChart(
|
|
chart15,
|
|
"#kt_stats_widget_16_tab_link_4",
|
|
"#kt_table_widget_16_chart_4_3",
|
|
chart15Data,
|
|
false
|
|
);
|
|
|
|
var chart16Data = [
|
|
6, 12, 12, 19, 6, 11, 7, 23, 5, 12, 18, 7, 21, 15,
|
|
];
|
|
initChart(
|
|
chart16,
|
|
"#kt_stats_widget_16_tab_link_4",
|
|
"#kt_table_widget_16_chart_4_4",
|
|
chart16Data,
|
|
false
|
|
);
|
|
|
|
var chart17Data = [
|
|
5, 10, 15, 21, 6, 11, 5, 23, 5, 11, 17, 7, 21, 13,
|
|
];
|
|
initChart(
|
|
chart17,
|
|
"#kt_stats_widget_16_tab_link_5",
|
|
"#kt_table_widget_16_chart_5_1",
|
|
chart17Data,
|
|
false
|
|
);
|
|
|
|
var chart18Data = [
|
|
4, 5, 23, 12, 21, 9, 17, 15, 4, 24, 9, 17, 21, 7,
|
|
];
|
|
initChart(
|
|
chart18,
|
|
"#kt_stats_widget_16_tab_link_5",
|
|
"#kt_table_widget_16_chart_5_2",
|
|
chart18Data,
|
|
false
|
|
);
|
|
|
|
var chart19Data = [
|
|
7, 10, 14, 21, 6, 31, 5, 23, 5, 11, 15, 7, 21, 17,
|
|
];
|
|
initChart(
|
|
chart19,
|
|
"#kt_stats_widget_16_tab_link_5",
|
|
"#kt_table_widget_16_chart_5_3",
|
|
chart19Data,
|
|
false
|
|
);
|
|
|
|
var chart20Data = [
|
|
3, 10, 12, 23, 6, 11, 7, 22, 5, 12, 18, 7, 21, 14,
|
|
];
|
|
initChart(
|
|
chart20,
|
|
"#kt_stats_widget_16_tab_link_5",
|
|
"#kt_table_widget_16_chart_5_4",
|
|
chart20Data,
|
|
false
|
|
);
|
|
|
|
// Update chart on theme mode change
|
|
KTThemeMode.on("kt.thememode.change", function () {
|
|
if (chart1.rendered) {
|
|
chart1.self.destroy();
|
|
}
|
|
|
|
if (chart2.rendered) {
|
|
chart2.self.destroy();
|
|
}
|
|
|
|
if (chart3.rendered) {
|
|
chart3.self.destroy();
|
|
}
|
|
|
|
if (chart4.rendered) {
|
|
chart4.self.destroy();
|
|
}
|
|
|
|
if (chart5.rendered) {
|
|
chart5.self.destroy();
|
|
}
|
|
|
|
if (chart6.rendered) {
|
|
chart6.self.destroy();
|
|
}
|
|
|
|
if (chart7.rendered) {
|
|
chart7.self.destroy();
|
|
}
|
|
|
|
if (chart8.rendered) {
|
|
chart8.self.destroy();
|
|
}
|
|
|
|
if (chart9.rendered) {
|
|
chart9.self.destroy();
|
|
}
|
|
|
|
if (chart10.rendered) {
|
|
chart10.self.destroy();
|
|
}
|
|
|
|
if (chart11.rendered) {
|
|
chart11.self.destroy();
|
|
}
|
|
|
|
if (chart12.rendered) {
|
|
chart12.self.destroy();
|
|
}
|
|
|
|
if (chart13.rendered) {
|
|
chart13.self.destroy();
|
|
}
|
|
|
|
if (chart14.rendered) {
|
|
chart14.self.destroy();
|
|
}
|
|
|
|
if (chart15.rendered) {
|
|
chart15.self.destroy();
|
|
}
|
|
|
|
if (chart16.rendered) {
|
|
chart16.self.destroy();
|
|
}
|
|
|
|
if (chart17.rendered) {
|
|
chart17.self.destroy();
|
|
}
|
|
|
|
if (chart18.rendered) {
|
|
chart18.self.destroy();
|
|
}
|
|
|
|
if (chart19.rendered) {
|
|
chart19.self.destroy();
|
|
}
|
|
|
|
if (chart20.rendered) {
|
|
chart20.self.destroy();
|
|
}
|
|
|
|
initChart(
|
|
chart1,
|
|
"#kt_stats_widget_16_tab_link_1",
|
|
"#kt_table_widget_16_chart_1_1",
|
|
chart1Data,
|
|
chart1.rendered
|
|
);
|
|
initChart(
|
|
chart2,
|
|
"#kt_stats_widget_16_tab_link_1",
|
|
"#kt_table_widget_16_chart_1_2",
|
|
chart2Data,
|
|
chart2.rendered
|
|
);
|
|
initChart(
|
|
chart3,
|
|
"#kt_stats_widget_16_tab_link_1",
|
|
"#kt_table_widget_16_chart_1_3",
|
|
chart3Data,
|
|
chart3.rendered
|
|
);
|
|
initChart(
|
|
chart4,
|
|
"#kt_stats_widget_16_tab_link_1",
|
|
"#kt_table_widget_16_chart_1_4",
|
|
chart4Data,
|
|
chart4.rendered
|
|
);
|
|
|
|
initChart(
|
|
chart5,
|
|
"#kt_stats_widget_16_tab_link_2",
|
|
"#kt_table_widget_16_chart_2_1",
|
|
chart5Data,
|
|
chart5.rendered
|
|
);
|
|
initChart(
|
|
chart6,
|
|
"#kt_stats_widget_16_tab_link_2",
|
|
"#kt_table_widget_16_chart_2_2",
|
|
chart6Data,
|
|
chart6.rendered
|
|
);
|
|
initChart(
|
|
chart7,
|
|
"#kt_stats_widget_16_tab_link_2",
|
|
"#kt_table_widget_16_chart_2_3",
|
|
chart7Data,
|
|
chart7.rendered
|
|
);
|
|
initChart(
|
|
chart8,
|
|
"#kt_stats_widget_16_tab_link_2",
|
|
"#kt_table_widget_16_chart_2_4",
|
|
chart8Data,
|
|
chart8.rendered
|
|
);
|
|
|
|
initChart(
|
|
chart9,
|
|
"#kt_stats_widget_16_tab_link_3",
|
|
"#kt_table_widget_16_chart_3_1",
|
|
chart9Data,
|
|
chart9.rendered
|
|
);
|
|
initChart(
|
|
chart10,
|
|
"#kt_stats_widget_16_tab_link_3",
|
|
"#kt_table_widget_16_chart_3_2",
|
|
chart10Data,
|
|
chart10.rendered
|
|
);
|
|
initChart(
|
|
chart11,
|
|
"#kt_stats_widget_16_tab_link_3",
|
|
"#kt_table_widget_16_chart_3_3",
|
|
chart11Data,
|
|
chart11.rendered
|
|
);
|
|
initChart(
|
|
chart12,
|
|
"#kt_stats_widget_16_tab_link_3",
|
|
"#kt_table_widget_16_chart_3_4",
|
|
chart12Data,
|
|
chart12.rendered
|
|
);
|
|
|
|
initChart(
|
|
chart13,
|
|
"#kt_stats_widget_16_tab_link_4",
|
|
"#kt_table_widget_16_chart_4_1",
|
|
chart13Data,
|
|
chart13.rendered
|
|
);
|
|
initChart(
|
|
chart14,
|
|
"#kt_stats_widget_16_tab_link_4",
|
|
"#kt_table_widget_16_chart_4_2",
|
|
chart14Data,
|
|
chart14.rendered
|
|
);
|
|
initChart(
|
|
chart15,
|
|
"#kt_stats_widget_16_tab_link_4",
|
|
"#kt_table_widget_16_chart_4_3",
|
|
chart15Data,
|
|
chart15.rendered
|
|
);
|
|
initChart(
|
|
chart16,
|
|
"#kt_stats_widget_16_tab_link_4",
|
|
"#kt_table_widget_16_chart_4_4",
|
|
chart16Data,
|
|
chart16.rendered
|
|
);
|
|
|
|
initChart(
|
|
chart17,
|
|
"#kt_stats_widget_16_tab_link_5",
|
|
"#kt_table_widget_16_chart_5_1",
|
|
chart17Data,
|
|
chart17.rendered
|
|
);
|
|
initChart(
|
|
chart18,
|
|
"#kt_stats_widget_16_tab_link_5",
|
|
"#kt_table_widget_16_chart_5_2",
|
|
chart18Data,
|
|
chart18.rendered
|
|
);
|
|
initChart(
|
|
chart19,
|
|
"#kt_stats_widget_16_tab_link_5",
|
|
"#kt_table_widget_16_chart_5_3",
|
|
chart19Data,
|
|
chart19.rendered
|
|
);
|
|
initChart(
|
|
chart20,
|
|
"#kt_stats_widget_16_tab_link_5",
|
|
"#kt_table_widget_16_chart_5_4",
|
|
chart20Data,
|
|
chart20.rendered
|
|
);
|
|
});
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTTablesWidget16;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTTablesWidget16.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTTablesWidget3 = (function () {
|
|
var table;
|
|
var datatable;
|
|
|
|
// Private methods
|
|
const initDatatable = () => {
|
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
|
datatable = $(table).DataTable({
|
|
info: false,
|
|
order: [],
|
|
paging: false,
|
|
pageLength: false,
|
|
});
|
|
};
|
|
|
|
const handleTabStates = () => {
|
|
const tabs = document.querySelector(
|
|
'[data-kt-table-widget-3="tabs_nav"]'
|
|
);
|
|
const tabButtons = tabs.querySelectorAll(
|
|
'[data-kt-table-widget-3="tab"]'
|
|
);
|
|
const tabClasses = ["border-bottom", "border-3", "border-primary"];
|
|
|
|
tabButtons.forEach((tab) => {
|
|
tab.addEventListener("click", (e) => {
|
|
// Get datatable filter value
|
|
const value = tab.getAttribute("data-kt-table-widget-3-value");
|
|
tabButtons.forEach((t) => {
|
|
t.classList.remove(...tabClasses);
|
|
t.classList.add("text-muted");
|
|
});
|
|
|
|
tab.classList.remove("text-muted");
|
|
tab.classList.add(...tabClasses);
|
|
|
|
// Filter datatable
|
|
if (value === "Show All") {
|
|
datatable.search("").draw();
|
|
} else {
|
|
datatable.search(value).draw();
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
// Handle status filter dropdown
|
|
const handleStatusFilter = () => {
|
|
const select = document.querySelector(
|
|
'[data-kt-table-widget-3="filter_status"]'
|
|
);
|
|
|
|
$(select).on("select2:select", function (e) {
|
|
const value = $(this).val();
|
|
if (value === "Show All") {
|
|
datatable.search("").draw();
|
|
} else {
|
|
datatable.search(value).draw();
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
table = document.querySelector("#kt_widget_table_3");
|
|
|
|
if (!table) {
|
|
return;
|
|
}
|
|
|
|
initDatatable();
|
|
handleTabStates();
|
|
handleStatusFilter();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTTablesWidget3;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTTablesWidget3.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTTablesWidget4 = (function () {
|
|
var table;
|
|
var datatable;
|
|
var template;
|
|
|
|
// Private methods
|
|
const initDatatable = () => {
|
|
// Get subtable template
|
|
const subtable = document.querySelector(
|
|
'[data-kt-table-widget-4="subtable_template"]'
|
|
);
|
|
template = subtable.cloneNode(true);
|
|
template.classList.remove("d-none");
|
|
|
|
// Remove subtable template
|
|
subtable.parentNode.removeChild(subtable);
|
|
|
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
|
datatable = $(table).DataTable({
|
|
info: false,
|
|
order: [],
|
|
lengthChange: false,
|
|
pageLength: 6,
|
|
ordering: false,
|
|
paging: false,
|
|
columnDefs: [
|
|
{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
|
|
{ orderable: false, targets: 6 }, // Disable ordering on column 6 (actions)
|
|
],
|
|
});
|
|
|
|
// Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
|
|
datatable.on("draw", function () {
|
|
resetSubtable();
|
|
handleActionButton();
|
|
});
|
|
};
|
|
|
|
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
|
|
var handleSearchDatatable = () => {
|
|
const filterSearch = document.querySelector(
|
|
'[data-kt-table-widget-4="search"]'
|
|
);
|
|
filterSearch.addEventListener("keyup", function (e) {
|
|
datatable.search(e.target.value).draw();
|
|
});
|
|
};
|
|
|
|
// Handle status filter
|
|
const handleStatusFilter = () => {
|
|
const select = document.querySelector(
|
|
'[data-kt-table-widget-4="filter_status"]'
|
|
);
|
|
|
|
$(select).on("select2:select", function (e) {
|
|
const value = $(this).val();
|
|
if (value === "Show All") {
|
|
datatable.search("").draw();
|
|
} else {
|
|
datatable.search(value).draw();
|
|
}
|
|
});
|
|
};
|
|
|
|
// Subtable data sample
|
|
const data = [
|
|
{
|
|
image: "76",
|
|
name: "Go Pro 8",
|
|
description: "Latest version of Go Pro.",
|
|
cost: "500.00",
|
|
qty: "1",
|
|
total: "500.00",
|
|
stock: "12",
|
|
},
|
|
{
|
|
image: "60",
|
|
name: "Bose Earbuds",
|
|
description: "Top quality earbuds from Bose.",
|
|
cost: "300.00",
|
|
qty: "1",
|
|
total: "300.00",
|
|
stock: "8",
|
|
},
|
|
{
|
|
image: "211",
|
|
name: "Dry-fit Sports T-shirt",
|
|
description: "Comfortable sportswear.",
|
|
cost: "89.00",
|
|
qty: "1",
|
|
total: "89.00",
|
|
stock: "18",
|
|
},
|
|
{
|
|
image: "21",
|
|
name: "Apple Airpod 3",
|
|
description: "Apple's latest earbuds.",
|
|
cost: "200.00",
|
|
qty: "2",
|
|
total: "400.00",
|
|
stock: "32",
|
|
},
|
|
{
|
|
image: "83",
|
|
name: "Nike Pumps",
|
|
description: "Apple's latest headphones.",
|
|
cost: "200.00",
|
|
qty: "1",
|
|
total: "200.00",
|
|
stock: "8",
|
|
},
|
|
];
|
|
|
|
// Handle action button
|
|
const handleActionButton = () => {
|
|
const buttons = document.querySelectorAll(
|
|
'[data-kt-table-widget-4="expand_row"]'
|
|
);
|
|
|
|
// Sample row items counter --- for demo purpose only, remove this variable in your project
|
|
const rowItems = [3, 1, 3, 1, 2, 1];
|
|
|
|
buttons.forEach((button, index) => {
|
|
button.addEventListener("click", (e) => {
|
|
e.stopImmediatePropagation();
|
|
e.preventDefault();
|
|
|
|
const row = button.closest("tr");
|
|
const rowClasses = ["isOpen", "border-bottom-0"];
|
|
|
|
// Get total number of items to generate --- for demo purpose only, remove this code snippet in your project
|
|
const demoData = [];
|
|
for (var j = 0; j < rowItems[index]; j++) {
|
|
demoData.push(data[j]);
|
|
}
|
|
// End of generating demo data
|
|
|
|
// Handle subtable expanded state
|
|
if (row.classList.contains("isOpen")) {
|
|
// Remove all subtables from current order row
|
|
while (
|
|
row.nextSibling &&
|
|
row.nextSibling.getAttribute(
|
|
"data-kt-table-widget-4"
|
|
) === "subtable_template"
|
|
) {
|
|
row.nextSibling.parentNode.removeChild(row.nextSibling);
|
|
}
|
|
row.classList.remove(...rowClasses);
|
|
button.classList.remove("active");
|
|
} else {
|
|
populateTemplate(demoData, row);
|
|
row.classList.add(...rowClasses);
|
|
button.classList.add("active");
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
// Populate template with content/data -- content/data can be replaced with relevant data from database or API
|
|
const populateTemplate = (data, target) => {
|
|
data.forEach((d, index) => {
|
|
// Clone template node
|
|
const newTemplate = template.cloneNode(true);
|
|
|
|
// Stock badges
|
|
const lowStock = `<div class="badge badge-light-warning">Low Stock</div>`;
|
|
const inStock = `<div class="badge badge-light-success">In Stock</div>`;
|
|
|
|
// Select data elements
|
|
const image = newTemplate.querySelector(
|
|
'[data-kt-table-widget-4="template_image"]'
|
|
);
|
|
const name = newTemplate.querySelector(
|
|
'[data-kt-table-widget-4="template_name"]'
|
|
);
|
|
const description = newTemplate.querySelector(
|
|
'[data-kt-table-widget-4="template_description"]'
|
|
);
|
|
const cost = newTemplate.querySelector(
|
|
'[data-kt-table-widget-4="template_cost"]'
|
|
);
|
|
const qty = newTemplate.querySelector(
|
|
'[data-kt-table-widget-4="template_qty"]'
|
|
);
|
|
const total = newTemplate.querySelector(
|
|
'[data-kt-table-widget-4="template_total"]'
|
|
);
|
|
const stock = newTemplate.querySelector(
|
|
'[data-kt-table-widget-4="template_stock"]'
|
|
);
|
|
|
|
// Populate elements with data
|
|
const imageSrc = image.getAttribute("data-kt-src-path");
|
|
image.setAttribute("src", imageSrc + d.image + ".gif");
|
|
name.innerText = d.name;
|
|
description.innerText = d.description;
|
|
cost.innerText = d.cost;
|
|
qty.innerText = d.qty;
|
|
total.innerText = d.total;
|
|
if (d.stock > 10) {
|
|
stock.innerHTML = inStock;
|
|
} else {
|
|
stock.innerHTML = lowStock;
|
|
}
|
|
|
|
// New template border controller
|
|
// When only 1 row is available
|
|
if (data.length === 1) {
|
|
//let borderClasses = ['rounded', 'rounded-end-0'];
|
|
//newTemplate.querySelectorAll('td')[0].classList.add(...borderClasses);
|
|
//borderClasses = ['rounded', 'rounded-start-0'];
|
|
//newTemplate.querySelectorAll('td')[4].classList.add(...borderClasses);
|
|
// Remove bottom border
|
|
//newTemplate.classList.add('border-bottom-0');
|
|
} else {
|
|
// When multiple rows detected
|
|
if (index === data.length - 1) {
|
|
// first row
|
|
//let borderClasses = ['rounded-start', 'rounded-bottom-0'];
|
|
// newTemplate.querySelectorAll('td')[0].classList.add(...borderClasses);
|
|
//borderClasses = ['rounded-end', 'rounded-bottom-0'];
|
|
//newTemplate.querySelectorAll('td')[4].classList.add(...borderClasses);
|
|
}
|
|
if (index === 0) {
|
|
// last row
|
|
//let borderClasses = ['rounded-start', 'rounded-top-0'];
|
|
//newTemplate.querySelectorAll('td')[0].classList.add(...borderClasses);
|
|
//borderClasses = ['rounded-end', 'rounded-top-0'];
|
|
//newTemplate.querySelectorAll('td')[4].classList.add(...borderClasses);
|
|
// Remove bottom border on last row
|
|
//newTemplate.classList.add('border-bottom-0');
|
|
}
|
|
}
|
|
|
|
// Insert new template into table
|
|
const tbody = table.querySelector("tbody");
|
|
tbody.insertBefore(newTemplate, target.nextSibling);
|
|
});
|
|
};
|
|
|
|
// Reset subtable
|
|
const resetSubtable = () => {
|
|
const subtables = document.querySelectorAll(
|
|
'[data-kt-table-widget-4="subtable_template"]'
|
|
);
|
|
subtables.forEach((st) => {
|
|
st.parentNode.removeChild(st);
|
|
});
|
|
|
|
const rows = table.querySelectorAll("tbody tr");
|
|
rows.forEach((r) => {
|
|
r.classList.remove("isOpen");
|
|
if (r.querySelector('[data-kt-table-widget-4="expand_row"]')) {
|
|
r.querySelector(
|
|
'[data-kt-table-widget-4="expand_row"]'
|
|
).classList.remove("active");
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
table = document.querySelector("#kt_table_widget_4_table");
|
|
|
|
if (!table) {
|
|
return;
|
|
}
|
|
|
|
initDatatable();
|
|
handleSearchDatatable();
|
|
handleStatusFilter();
|
|
handleActionButton();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTTablesWidget4;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTTablesWidget4.init();
|
|
});
|
|
|
|
("use strict");
|
|
|
|
// Class definition
|
|
var KTTablesWidget5 = (function () {
|
|
var table;
|
|
var datatable;
|
|
|
|
// Private methods
|
|
const initDatatable = () => {
|
|
// Set date data order
|
|
const tableRows = table.querySelectorAll("tbody tr");
|
|
|
|
tableRows.forEach((row) => {
|
|
const dateRow = row.querySelectorAll("td");
|
|
const realDate = moment(
|
|
dateRow[2].innerHTML,
|
|
"MMM DD, YYYY"
|
|
).format(); // select date from 3rd column in table
|
|
dateRow[2].setAttribute("data-order", realDate);
|
|
});
|
|
|
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
|
datatable = $(table).DataTable({
|
|
info: false,
|
|
order: [],
|
|
lengthChange: false,
|
|
pageLength: 6,
|
|
paging: false,
|
|
columnDefs: [
|
|
{ orderable: false, targets: 1 }, // Disable ordering on column 1 (product id)
|
|
],
|
|
});
|
|
};
|
|
|
|
// Handle status filter
|
|
const handleStatusFilter = () => {
|
|
const select = document.querySelector(
|
|
'[data-kt-table-widget-5="filter_status"]'
|
|
);
|
|
|
|
$(select).on("select2:select", function (e) {
|
|
const value = $(this).val();
|
|
if (value === "Show All") {
|
|
datatable.search("").draw();
|
|
} else {
|
|
datatable.search(value).draw();
|
|
}
|
|
});
|
|
};
|
|
|
|
// Public methods
|
|
return {
|
|
init: function () {
|
|
table = document.querySelector("#kt_table_widget_5_table");
|
|
|
|
if (!table) {
|
|
return;
|
|
}
|
|
|
|
initDatatable();
|
|
handleStatusFilter();
|
|
},
|
|
};
|
|
})();
|
|
|
|
// Webpack support
|
|
if (typeof module !== "undefined") {
|
|
module.exports = KTTablesWidget5;
|
|
}
|
|
|
|
// On document ready
|
|
KTUtil.onDOMContentLoaded(function () {
|
|
KTTablesWidget5.init();
|
|
});
|