deving
This commit is contained in:
508
res/assets/js/dashboards/dashboard.js
Normal file
508
res/assets/js/dashboards/dashboard.js
Normal file
@@ -0,0 +1,508 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
//****************************
|
||||
// Theme Onload Toast
|
||||
//****************************
|
||||
window.addEventListener("load", () => {
|
||||
let myAlert = document.querySelectorAll('.toast')[0];
|
||||
if (myAlert) {
|
||||
let bsAlert = new bootstrap.Toast(myAlert);
|
||||
bsAlert.show();
|
||||
}
|
||||
})
|
||||
|
||||
//
|
||||
// Carousel
|
||||
//
|
||||
$(".counter-carousel").owlCarousel({
|
||||
loop: true,
|
||||
rtl: true,
|
||||
margin: 30,
|
||||
mouseDrag: true,
|
||||
|
||||
nav: false,
|
||||
|
||||
responsive: {
|
||||
0: {
|
||||
items: 2,
|
||||
loop: true,
|
||||
},
|
||||
576: {
|
||||
items: 2,
|
||||
loop: true,
|
||||
},
|
||||
768: {
|
||||
items: 3,
|
||||
loop: true,
|
||||
},
|
||||
1200: {
|
||||
items: 5,
|
||||
loop: true,
|
||||
},
|
||||
1400: {
|
||||
items: 6,
|
||||
loop: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
// =====================================
|
||||
// Profit
|
||||
// =====================================
|
||||
var chart = {
|
||||
series: [
|
||||
{
|
||||
name: "Eanings this month",
|
||||
data: [1.5, 2.7, 2.2, 3.6, 1.5, 1.0],
|
||||
},
|
||||
{
|
||||
name: "Expense this month",
|
||||
data: [-1.8, -1.1, -2.5, -1.5, -0.6, -1.8],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
type: "bar",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
height: 310,
|
||||
stacked: true,
|
||||
},
|
||||
colors: ["var(--bs-primary)", "var(--bs-secondary)"],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: "60%",
|
||||
columnWidth: "20%",
|
||||
borderRadius: [6],
|
||||
borderRadiusApplication: "end",
|
||||
borderRadiusWhenStacked: "all",
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
borderColor: "rgba(0,0,0,0.1)",
|
||||
strokeDashArray: 3,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
title: {
|
||||
// text: 'Age',
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
categories: [
|
||||
"16/08",
|
||||
"17/08",
|
||||
"18/08",
|
||||
"19/08",
|
||||
"20/08",
|
||||
"21/08",
|
||||
"22/08",
|
||||
],
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 4,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#chart"), chart);
|
||||
chart.render();
|
||||
|
||||
// =====================================
|
||||
// Breakup
|
||||
// =====================================
|
||||
var breakup = {
|
||||
color: "#adb5bd",
|
||||
series: [38, 40, 25],
|
||||
labels: ["2022", "2021", "2020"],
|
||||
chart: {
|
||||
width: 180,
|
||||
type: "donut",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
donut: {
|
||||
size: "75%",
|
||||
},
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
colors: ["var(--bs-primary)", "#ecf2ff", "var(--bs-card-bg)"],
|
||||
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 991,
|
||||
options: {
|
||||
chart: {
|
||||
width: 120,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fillSeriesColor: false,
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#breakup"), breakup);
|
||||
chart.render();
|
||||
|
||||
// =====================================
|
||||
// Earning
|
||||
// =====================================
|
||||
var earning = {
|
||||
chart: {
|
||||
id: "sparkline3",
|
||||
type: "area",
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: "sparklines",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Earnings",
|
||||
color: "var(--bs-secondary)",
|
||||
data: [25, 66, 20, 40, 12, 58, 20],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 2,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.15,
|
||||
opacityTo: 0,
|
||||
stops: [20, 180],
|
||||
},
|
||||
opacity: 0.5,
|
||||
},
|
||||
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: "right",
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#earning"), earning).render();
|
||||
|
||||
// =====================================
|
||||
// Salary
|
||||
// =====================================
|
||||
var salary = {
|
||||
series: [
|
||||
{
|
||||
name: "Employee Salary",
|
||||
data: [20, 15, 30, 25, 10, 15],
|
||||
},
|
||||
],
|
||||
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
height: 260,
|
||||
type: "bar",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
colors: [
|
||||
"var(--bs-primary-bg-subtle)",
|
||||
"var(--bs-primary-bg-subtle)",
|
||||
"var(--bs-primary)",
|
||||
"var(--bs-primary-bg-subtle)",
|
||||
"var(--bs-primary-bg-subtle)",
|
||||
"var(--bs-primary-bg-subtle)",
|
||||
],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
columnWidth: "45%",
|
||||
distributed: true,
|
||||
endingShape: "rounded",
|
||||
},
|
||||
},
|
||||
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [["Apr"], ["May"], ["June"], ["July"], ["Aug"], ["Sept"]],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#salary"), salary);
|
||||
chart.render();
|
||||
|
||||
// =====================================
|
||||
// Customers
|
||||
// =====================================
|
||||
var customers = {
|
||||
chart: {
|
||||
id: "sparkline3",
|
||||
type: "area",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: "sparklines",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Customers",
|
||||
color: "var(--bs-secondary)",
|
||||
data: [30, 25, 35, 20, 30, 40],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 2,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.12,
|
||||
opacityTo: 0,
|
||||
stops: [20, 180],
|
||||
},
|
||||
},
|
||||
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: "right",
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#customers"), customers).render();
|
||||
|
||||
// =====================================
|
||||
// Projects
|
||||
// =====================================
|
||||
var projects = {
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
data: [4, 10, 9, 7, 9, 10, 11, 8, 10, 9],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
type: "bar",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
height: 70,
|
||||
|
||||
resize: true,
|
||||
barColor: "#fff",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
colors: ["var(--bs-primary)"],
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
startingShape: "flat",
|
||||
endingShape: "flat",
|
||||
columnWidth: "60%",
|
||||
barHeight: "20%",
|
||||
endingShape: "rounded",
|
||||
distributed: true,
|
||||
borderRadius: 2,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2.5,
|
||||
colors: ["rgba(0,0,0,0.01)"],
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
style: {
|
||||
fontSize: "12px",
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var chart_column_basic = new ApexCharts(
|
||||
document.querySelector("#projects"),
|
||||
projects
|
||||
);
|
||||
chart_column_basic.render();
|
||||
|
||||
// =====================================
|
||||
// Stats
|
||||
// =====================================
|
||||
var stats = {
|
||||
chart: {
|
||||
id: "sparkline3",
|
||||
type: "area",
|
||||
height: 180,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: "sparklines",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Weekly Stats",
|
||||
color: "var(--bs-primary)",
|
||||
data: [5, 15, 10, 20],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 2,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.2,
|
||||
opacityTo: 0,
|
||||
stops: [20, 180],
|
||||
},
|
||||
},
|
||||
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: "right",
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#stats"), stats).render();
|
||||
});
|
||||
770
res/assets/js/dashboards/dashboard2.js
Normal file
770
res/assets/js/dashboards/dashboard2.js
Normal file
@@ -0,0 +1,770 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
// =====================================
|
||||
// Revenue Updates
|
||||
// =====================================
|
||||
var options = {
|
||||
series: [
|
||||
{
|
||||
name: "Footware",
|
||||
data: [1.5, 2.7, 2.2, 3.6, 1.5],
|
||||
},
|
||||
{
|
||||
name: "Fashionware",
|
||||
data: [-2.8, -1.1, -2.5, -1.5, -1.2],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
type: "bar",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
height: 270,
|
||||
stacked: true,
|
||||
},
|
||||
colors: ["var(--bs-primary)", "var(--bs-secondary)"],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
barHeight: "70%",
|
||||
columnWidth: "20%",
|
||||
borderRadius: [5],
|
||||
borderRadiusApplication: 'end',
|
||||
borderRadiusWhenStacked: 'all'
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
yaxis: {
|
||||
min: -4,
|
||||
max: 4,
|
||||
tickAmount: 4,
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
"Jan",
|
||||
"Fab",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
],
|
||||
show: false,
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#revenue-chart"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
|
||||
// =====================================
|
||||
// Revenue Updates
|
||||
// =====================================
|
||||
var options = {
|
||||
color: "#adb5bd",
|
||||
series: [55, 55, 55],
|
||||
labels: ["Expance", "Revenue", "Profit"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '88%',
|
||||
background: 'transparent',
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
offsetY: 7,
|
||||
},
|
||||
value: {
|
||||
show: false,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
color: '#7C8FAC',
|
||||
fontSize: '20px',
|
||||
fontWeight: "600",
|
||||
label: '$500,458',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
colors: ["var(--bs-primary)", "#EAEFF4", "var(--bs-secondary)"],
|
||||
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fillSeriesColor: false,
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#sales-overview"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
// =====================================
|
||||
// monthly-earning
|
||||
// =====================================
|
||||
var options = {
|
||||
chart: {
|
||||
id: "monthly-earning",
|
||||
type: "area",
|
||||
height: 56,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: 'sparklines',
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'monthly earnings',
|
||||
color: "var(--bs-primary)",
|
||||
data: [25, 66, 20, 40, 12, 58, 20],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 2,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.10,
|
||||
opacityTo: 0,
|
||||
stops: [20, 180],
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: "right",
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#monthly-earning"), options).render();
|
||||
|
||||
|
||||
// =====================================
|
||||
// weekly-stats
|
||||
// =====================================
|
||||
var options = {
|
||||
chart: {
|
||||
id: "weekly-stats2",
|
||||
type: "area",
|
||||
height: 120,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: 'sparklines',
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Weekly Stats",
|
||||
color: "var(--bs-primary)",
|
||||
data: [5, 15, 5, 10, 5],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 2,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.18,
|
||||
opacityTo: 0,
|
||||
stops: [20, 180],
|
||||
},
|
||||
},
|
||||
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: "right",
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#weekly-stats"), options).render();
|
||||
|
||||
|
||||
|
||||
// =====================================
|
||||
// Salary
|
||||
// =====================================
|
||||
var options = {
|
||||
series: [
|
||||
{
|
||||
name: "Yearly Sales",
|
||||
data: [20, 15, 30, 25, 10, 15],
|
||||
},
|
||||
],
|
||||
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
height: 250,
|
||||
type: "bar",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
colors: ["var(--bs-primary-bg-subtle)", "var(--bs-primary-bg-subtle)", "var(--bs-primary)", "var(--bs-primary-bg-subtle)", "var(--bs-primary-bg-subtle)", "var(--bs-primary-bg-subtle)"],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 5,
|
||||
columnWidth: "45%",
|
||||
distributed: true,
|
||||
endingShape: "rounded",
|
||||
},
|
||||
},
|
||||
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [["Apr"], ["May"], ["June"], ["July"], ["Aug"], ["Sept"]],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#salary"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
// =====================================
|
||||
// table-chart
|
||||
// =====================================
|
||||
var options = {
|
||||
chart: {
|
||||
id: "table-chart",
|
||||
type: "area",
|
||||
width: 76,
|
||||
height: 18,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: "table-chart",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
color: "#DFE5EF",
|
||||
data: [25, 66, 20, 40, 12, 58, 20],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 2,
|
||||
},
|
||||
fill: {
|
||||
colors: ["#f3feff"],
|
||||
type: "solid",
|
||||
opacity: 0.05,
|
||||
},
|
||||
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#table-chart"), options).render();
|
||||
|
||||
|
||||
|
||||
// =====================================
|
||||
// table-chart
|
||||
// =====================================
|
||||
var options = {
|
||||
chart: {
|
||||
id: "table-chart-1",
|
||||
type: "area",
|
||||
width: 76,
|
||||
height: 18,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: "table-chart-1",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
color: "var(--bs-primary)",
|
||||
data: [25, 66, 20, 40, 12, 58, 20],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 2,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.12,
|
||||
opacityTo: 0,
|
||||
stops: [20, 180],
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#table-chart-1"), options).render();
|
||||
|
||||
|
||||
|
||||
// =====================================
|
||||
// table-chart
|
||||
// =====================================
|
||||
var options = {
|
||||
chart: {
|
||||
id: "#table-chart-2",
|
||||
type: "area",
|
||||
width: 76,
|
||||
height: 18,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: "#table-chart-2",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
color: "#DFE5EF",
|
||||
data: [25, 66, 20, 40, 12, 58, 20],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 2,
|
||||
},
|
||||
fill: {
|
||||
colors: ["#f3feff"],
|
||||
type: "solid",
|
||||
opacity: 0.05,
|
||||
},
|
||||
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#table-chart-2"), options).render();
|
||||
|
||||
|
||||
|
||||
|
||||
// =====================================
|
||||
// table-chart
|
||||
// =====================================
|
||||
var options = {
|
||||
chart: {
|
||||
id: "table-chart-3",
|
||||
type: "area",
|
||||
width: 76,
|
||||
height: 18,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: "table-chart-3",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
color: "var(--bs-primary)",
|
||||
data: [25, 66, 20, 40, 12, 58, 20],
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 2,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.12,
|
||||
opacityTo: 0,
|
||||
stops: [20, 180],
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#table-chart-3"), options).render();
|
||||
|
||||
|
||||
// =====================================
|
||||
// expense
|
||||
// =====================================
|
||||
var expense = {
|
||||
series: [60, 25, 15],
|
||||
labels: ["", "", ""],
|
||||
chart: {
|
||||
height: 110,
|
||||
type: "donut",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#c6d1e9",
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
fillSeriesColor: false,
|
||||
},
|
||||
|
||||
colors: ["var(--bs-primary)", "var(--bs-secondary)", "var(--bs-yellow)"],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
stroke: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: "70%",
|
||||
background: "none",
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
fontSize: "18px",
|
||||
color: undefined,
|
||||
offsetY: -10,
|
||||
},
|
||||
value: {
|
||||
show: false,
|
||||
color: "#98aab4",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#expense"), expense);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
|
||||
// =====================================
|
||||
// Sales
|
||||
// =====================================
|
||||
var options = {
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
data: [25, 35, 20, 25, 40, 25],
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
data: [35, 40, 20, 35, 40, 35],
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
data: [40, 25, 60, 40, 20, 40],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 85,
|
||||
width: '100%',
|
||||
stacked: true,
|
||||
stackType: '100%',
|
||||
fontFamily: "inherit",
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: ["var(--bs-primary)", "var(--bs-secondary)", "var(--bs-gray-200)"],
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: "50%",
|
||||
borderRadius: [3],
|
||||
borderRadiusApplication: 'around',
|
||||
borderRadiusWhenStacked: 'around',
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: false,
|
||||
width: 1,
|
||||
colors: ['rgba(0,0,0,0.01)']
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#sales"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
// =====================================
|
||||
// Sales two
|
||||
// =====================================
|
||||
var options = {
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
data: [100, 60, 35, 90, 35, 100]
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 25,
|
||||
fontFamily: "inherit",
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
colors: ["var(--bs-primary)"],
|
||||
grid: {
|
||||
show: false
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '100%',
|
||||
borderRadius: 4,
|
||||
distributed: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 5,
|
||||
colors: ['rgba(0,0,0,0.01)']
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#sales-two"), options);
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
// =====================================
|
||||
// growth
|
||||
// =====================================
|
||||
var options = {
|
||||
chart: {
|
||||
id: "growth",
|
||||
type: "area",
|
||||
height: 25,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
group: "growth",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
colors: ["var(--bs-primary)"],
|
||||
data: [0, 10, 10, 10, 35, 45, 30, 30, 30, 50, 52, 30, 25, 45, 50, 80, 60, 65]
|
||||
},
|
||||
],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 2,
|
||||
},
|
||||
fill: {
|
||||
colors: ["#f3feff"],
|
||||
type: "solid",
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#growth"), options).render();
|
||||
|
||||
|
||||
});
|
||||
27
res/assets/js/dashboards/dashboard3.js
Normal file
27
res/assets/js/dashboards/dashboard3.js
Normal file
@@ -0,0 +1,27 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
//
|
||||
// Carousel
|
||||
//
|
||||
$(".collectibles-carousel").owlCarousel({
|
||||
loop: true,
|
||||
margin: 30,
|
||||
mouseDrag: true,
|
||||
autoplay: true,
|
||||
autoplayTimeout: 4000,
|
||||
autoplaySpeed: 2000,
|
||||
nav: false,
|
||||
dots: false,
|
||||
rtl: true,
|
||||
responsive: {
|
||||
0: {
|
||||
items: 1,
|
||||
},
|
||||
576: {
|
||||
items: 2,
|
||||
},
|
||||
768: {
|
||||
items: 3,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
65
res/assets/js/dashboards/dashboard4.js
Normal file
65
res/assets/js/dashboards/dashboard4.js
Normal file
@@ -0,0 +1,65 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var investments = {
|
||||
series: [
|
||||
{
|
||||
name: "BTC",
|
||||
data: [3500, 1000, 4000, 2500, 3500, 1500, 2500, 1900, 3500, 2000, 4500],
|
||||
},
|
||||
{
|
||||
name: "ETH",
|
||||
data: [3000, 2100, 3500, 1000, 2000, 1000, 5000, 2000, 1100, 2500, 3300],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
height: 325,
|
||||
type: "line",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
stroke: {
|
||||
width: 4,
|
||||
curve: "smooth",
|
||||
},
|
||||
grid: {
|
||||
borderColor: "transparent",
|
||||
},
|
||||
colors: ["var(--bs-primary)", "var(--bs-secondary)"],
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shade: "dark",
|
||||
gradientToColors: ["#6993ff"],
|
||||
shadeIntensity: 1,
|
||||
type: "horizontal",
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
categories: [
|
||||
"Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov"
|
||||
],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#investments"), investments).render();
|
||||
});
|
||||
199
res/assets/js/dashboards/dashboard5.js
Normal file
199
res/assets/js/dashboards/dashboard5.js
Normal file
@@ -0,0 +1,199 @@
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var chart = {
|
||||
series: [
|
||||
{
|
||||
name: "Selling Product",
|
||||
data: [28, 120, 36, 90, 38, 85,],
|
||||
},
|
||||
{
|
||||
name: "Followers",
|
||||
data: [50, 100, 65, 140, 32, 60],
|
||||
},
|
||||
{
|
||||
name: "Campaign",
|
||||
data: [100, 50, 130, 70, 135, 80],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
type: "line",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
height: 200,
|
||||
},
|
||||
colors: ["var(--bs-danger)", "var(--bs-primary)", "var(--bs-secondary)"],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 3,
|
||||
},
|
||||
grid: {
|
||||
borderColor: "rgba(0,0,0,0.1)",
|
||||
strokeDashArray: 3,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
"1-10 Aug",
|
||||
"11-20 Aug",
|
||||
"21-30 Aug",
|
||||
"1-10 Sept",
|
||||
"11-20 Sept",
|
||||
"21-30 Sept",
|
||||
],
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 4,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#financial"), chart);
|
||||
chart.render();
|
||||
|
||||
var chart2 = {
|
||||
series: [
|
||||
{
|
||||
name: "Hours",
|
||||
data: [22.5, 34.3, 24.7, 28.5, 11.4, 30.6, 44.5],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: "area",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 3,
|
||||
left: 0,
|
||||
blur: 5,
|
||||
color: "#000",
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
colors: ["var(--bs-primary)"],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 2,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 0,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.1,
|
||||
opacityTo: 0,
|
||||
stops: [20, 180],
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
},
|
||||
xaxis: {
|
||||
type: "category",
|
||||
categories: ["Su", "Mo", "Tu", "Wed", "Th", "Fr", "Sa"],
|
||||
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
theme: "dark",
|
||||
},
|
||||
};
|
||||
|
||||
var chart2 = new ApexCharts(
|
||||
document.querySelector("#activity-status"),
|
||||
chart2
|
||||
);
|
||||
chart2.render();
|
||||
|
||||
var chart3 = {
|
||||
chart: {
|
||||
type: "radialBar",
|
||||
fontFamily: "inherit",
|
||||
foreColor: "#adb0bb",
|
||||
height: 305,
|
||||
},
|
||||
series: [45, 50, 60, 70],
|
||||
colors: ["var(--bs-primary)", "var(--bs-danger)", "var(--bs-warning)", "var(--bs-secondary)"],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
margin: 15,
|
||||
size: "50%"
|
||||
},
|
||||
dataLabels: {
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Team'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shade: "dark",
|
||||
type: "vertical",
|
||||
gradientToColors: ["#615dff"],
|
||||
stops: [0, 100]
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
lineCap: "round",
|
||||
},
|
||||
labels: ['Team A', 'Team B', 'Team C', 'Team D'],
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
theme: "dark",
|
||||
fillSeriesColor: false,
|
||||
},
|
||||
};
|
||||
|
||||
new ApexCharts(
|
||||
document.querySelector("#team-performance"),
|
||||
chart3
|
||||
).render();
|
||||
});
|
||||
Reference in New Issue
Block a user