deving
This commit is contained in:
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();
|
||||
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user