678 lines
15 KiB
JavaScript
678 lines
15 KiB
JavaScript
var options = {
|
|
series: [38, 60],
|
|
chart: {
|
|
width: 240,
|
|
height: 360,
|
|
type: 'radialBar',
|
|
offsetX: -28,
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
dataLabels: {
|
|
name: {
|
|
offsetY: 20,
|
|
color: "var(--chart-text-color)",
|
|
fontFamily: 'Rubik, sans-serif',
|
|
fontWeight: 500,
|
|
},
|
|
value: {
|
|
fontSize: '22px',
|
|
offsetY: -16,
|
|
fontFamily: 'Rubik, sans-serif',
|
|
fontWeight: 500,
|
|
},
|
|
total: {
|
|
show: true,
|
|
label: 'Task Done!',
|
|
fontSize: '12px',
|
|
formatter: function () {
|
|
return "89%"
|
|
}
|
|
}
|
|
},
|
|
hollow: {
|
|
margin: 5,
|
|
size: '70%',
|
|
image: '../assets/images/dashboard-3/round.png',
|
|
imageWidth: 115,
|
|
imageHeight: 115,
|
|
imageClipped: false,
|
|
},
|
|
track: {
|
|
background: 'transparent',
|
|
}
|
|
}
|
|
},
|
|
colors: [ "var(--theme-deafult)", "#FFA941"],
|
|
labels: ['Progress', 'Done'],
|
|
stroke: {
|
|
lineCap: 'round'
|
|
},
|
|
legend: {
|
|
show: true,
|
|
position: "bottom",
|
|
horizontalAlign: 'center',
|
|
offsetY: -15,
|
|
fontSize: '14px',
|
|
fontFamily: 'Rubik, sans-serif',
|
|
fontWeight: 500,
|
|
labels: {
|
|
colors: "var(--chart-text-color)",
|
|
},
|
|
markers: {
|
|
width: 6,
|
|
height: 6,
|
|
}
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 1830,
|
|
options:{
|
|
chart: {
|
|
offsetX: -40,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1750,
|
|
options:{
|
|
chart: {
|
|
offsetX: -50,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1661,
|
|
options:{
|
|
chart: {
|
|
offsetX: -10,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1530,
|
|
options:{
|
|
chart: {
|
|
offsetX: -25,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1400,
|
|
options:{
|
|
chart: {
|
|
offsetX: 10,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1300,
|
|
options:{
|
|
chart: {
|
|
offsetX: -10,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1200,
|
|
options:{
|
|
chart: {
|
|
width: 255,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 992,
|
|
options:{
|
|
chart: {
|
|
width: 245,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 600,
|
|
options:{
|
|
chart: {
|
|
width: 225,
|
|
}
|
|
}
|
|
},
|
|
]
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#progresschart"), options);
|
|
chart.render();
|
|
|
|
// learning chart
|
|
var optionslearning = {
|
|
series: [{
|
|
name: 'growth',
|
|
type: 'line',
|
|
data: [25, 30, 43, 25, 38, 25, 33, 25]
|
|
},
|
|
{
|
|
name: 'growth',
|
|
type: 'line',
|
|
data: [25, 30, 41, 25, 36, 25, 31, 25]
|
|
},
|
|
{
|
|
name: 'growth',
|
|
type: 'line',
|
|
data: [25, 29, 37, 25, 34, 25, 29, 25]
|
|
},
|
|
{
|
|
name: 'growth',
|
|
type: 'line',
|
|
data: [25, 28, 34, 25, 32, 25, 28, 25]
|
|
},
|
|
{
|
|
name: 'growth',
|
|
type: 'line',
|
|
data: [25, 27, 30, 25, 28, 25, 27, 25]
|
|
},
|
|
{
|
|
name: 'growth',
|
|
type: 'line',
|
|
data: [25, 26, 24, 25, 24, 25, 24, 25]
|
|
},
|
|
{
|
|
name: 'growth',
|
|
type: 'line',
|
|
data: [25, 26, 20, 25, 21, 25, 23, 25]
|
|
},
|
|
{
|
|
name: 'growth',
|
|
type: 'line',
|
|
data: [25, 24, 16, 25, 18, 25, 22, 25]
|
|
},
|
|
{
|
|
name: 'growth',
|
|
type: 'line',
|
|
data: [25, 23, 12, 25, 15, 25, 21, 25]
|
|
},
|
|
{
|
|
name: 'growth',
|
|
type: 'line',
|
|
data: [25, 23, 10, 25, 13, 25, 19, 25]
|
|
},
|
|
{
|
|
name: 'growth',
|
|
type: 'area',
|
|
data: [25, 28, 37, 25, 33, 25, 27, 25]
|
|
}
|
|
],
|
|
chart: {
|
|
height: 315,
|
|
type: 'line',
|
|
toolbar: {
|
|
show: false
|
|
}
|
|
},
|
|
grid: {
|
|
show: true,
|
|
borderColor: 'var(--chart-border)',
|
|
xaxis: {
|
|
lines: {
|
|
show: true
|
|
}
|
|
},
|
|
},
|
|
colors: ["var(--theme-deafult)","#F47DEA", "#FFA941", "#FFC200", "#54BA4A", "#3DA831",
|
|
"#57B9F6", "#FF3377", "#773ACE", "#945CFF", "#7366ff"],
|
|
stroke: {
|
|
width: 1.5,
|
|
curve: 'smooth'
|
|
},
|
|
markers: {
|
|
discrete: [{
|
|
seriesIndex: 0,
|
|
dataPointIndex: 0,
|
|
fillColor: '#7064F5',
|
|
strokeColor: 'var(--white)',
|
|
size: 6,
|
|
}, {
|
|
seriesIndex: 1,
|
|
dataPointIndex: 5,
|
|
fillColor: '#7064F5',
|
|
strokeColor: 'var(--white)',
|
|
size: 6,
|
|
},
|
|
{
|
|
seriesIndex: 2,
|
|
dataPointIndex: 3,
|
|
fillColor: '#7064F5',
|
|
strokeColor: 'var(--white)',
|
|
size: 6,
|
|
},
|
|
],
|
|
},
|
|
tooltip: {
|
|
shared: false,
|
|
intersect: false,
|
|
},
|
|
xaxis: {
|
|
type: 'category',
|
|
categories: ['Sep 5', 'Sep 8', 'Sep 12', 'Sep 16', 'Sep 18', 'Sep 17', 'Sep 23', 'Sep 26'],
|
|
tickAmount: 12,
|
|
labels: {
|
|
style: {
|
|
colors: "var(--chart-text-color)",
|
|
fontSize: '12px',
|
|
fontFamily: 'Rubik, sans-serif',
|
|
fontWeight: 400,
|
|
}
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
}
|
|
},
|
|
fill: {
|
|
type: ['solid', 'solid', 'solid', 'solid', 'solid', 'solid','solid','solid','solid','solid','gradient'],
|
|
gradient: {
|
|
shade: 'light',
|
|
type: "vertical",
|
|
shadeIntensity: 0.5,
|
|
opacityFrom: 0.5,
|
|
opacityTo: 0,
|
|
stops: [0, 80, 100],
|
|
},
|
|
},
|
|
yaxis: {
|
|
min: 0,
|
|
max: 50,
|
|
tickAmount: 5,
|
|
labels: {
|
|
style: {
|
|
colors: "var(--chart-text-color)",
|
|
fontSize: '12px',
|
|
fontFamily: 'Rubik, sans-serif',
|
|
fontWeight: 400,
|
|
}
|
|
},
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 1661,
|
|
options:{
|
|
chart: {
|
|
height: 265,
|
|
}
|
|
}
|
|
},
|
|
]
|
|
};
|
|
|
|
var learningchart = new ApexCharts(document.querySelector("#learning-chart"), optionslearning);
|
|
learningchart.render();
|
|
|
|
// activity chart
|
|
var optionsactivity = {
|
|
series: [{
|
|
name: 'Activity',
|
|
data: [2, 4, 2.5, 1.5, 5.5, 1.5, 4]
|
|
}],
|
|
chart: {
|
|
height: 300,
|
|
type: 'bar',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
dropShadow: {
|
|
enabled: true,
|
|
// enabledOnSeries: undefined,
|
|
top: 10,
|
|
left: 0,
|
|
blur: 5,
|
|
color: "#7064F5",
|
|
opacity: 0.35
|
|
}
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
borderRadius: 6,
|
|
columnWidth: '30%',
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: false,
|
|
},
|
|
xaxis: {
|
|
categories: ["S", "M", "T", "W", "T", "F", "S"],
|
|
labels: {
|
|
style: {
|
|
fontSize: "12px",
|
|
fontFamily: "Rubik, sans-serif",
|
|
colors: "var(--chart-text-color)"
|
|
}
|
|
},
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
}
|
|
},
|
|
yaxis: {
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false,
|
|
},
|
|
labels: {
|
|
formatter: function (val) {
|
|
return val + " " + "Hr";
|
|
},
|
|
style: {
|
|
fontSize: "12px",
|
|
fontFamily: "Rubik, sans-serif",
|
|
colors: "var(--chart-text-color)"
|
|
}
|
|
}
|
|
|
|
},
|
|
grid: {
|
|
borderColor: 'var(--chart-dashed-border)',
|
|
strokeDashArray: 5,
|
|
},
|
|
colors: ["#7064F5", "#8D83FF"],
|
|
fill: {
|
|
type: 'gradient' ,
|
|
gradient: {
|
|
shade: 'light',
|
|
type: "vertical",
|
|
gradientToColors: ["#7064F5", "#8D83FF"],
|
|
opacityFrom: 0.98,
|
|
opacityTo: 0.85,
|
|
stops: [0, 100],
|
|
},
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 1200,
|
|
options:{
|
|
chart: {
|
|
height: 200,
|
|
}
|
|
}
|
|
},
|
|
]
|
|
};
|
|
|
|
var chartactivity = new ApexCharts(document.querySelector("#activity-chart"), optionsactivity);
|
|
chartactivity.render();
|
|
|
|
// upcoming event chart
|
|
var upcomingoptions = {
|
|
series: [
|
|
{
|
|
data: [
|
|
{
|
|
x: 'Team Meetup',
|
|
y: [
|
|
new Date('2022-01-20').getTime(),
|
|
new Date('2022-03-8').getTime()
|
|
],
|
|
strokeColor: "var(--theme-deafult)",
|
|
fillColor: 'var(--white)'
|
|
},
|
|
{
|
|
x: 'Theme Development',
|
|
y: [
|
|
new Date('2022-01-8').getTime(),
|
|
new Date('2022-02-30').getTime()
|
|
],
|
|
strokeColor: "#54BA4A",
|
|
fillColor: 'var(--white)'
|
|
},
|
|
{
|
|
x: 'UI/UX Design',
|
|
y: [
|
|
new Date('2022-02-01').getTime(),
|
|
new Date('2022-03-10').getTime()
|
|
],
|
|
strokeColor: "#FFAA05",
|
|
fillColor: 'var(--white)'
|
|
},
|
|
{
|
|
x: 'Logo Creater',
|
|
y: [
|
|
new Date('2022-02-10').getTime(),
|
|
new Date('2022-03-15').getTime()
|
|
],
|
|
strokeColor: "#FF3364",
|
|
fillColor: 'var(--white)'
|
|
},
|
|
]
|
|
}
|
|
],
|
|
chart: {
|
|
height: 305,
|
|
type: 'rangeBar',
|
|
toolbar:{
|
|
show:false,
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: true,
|
|
distributed: true,
|
|
barHeight: '50%',
|
|
dataLabels: {
|
|
hideOverflowingLabels: false,
|
|
},
|
|
}
|
|
},
|
|
dataLabels: {
|
|
enabled: true,
|
|
formatter: function(val, opts) {
|
|
var label = opts.w.globals.labels[opts.dataPointIndex]
|
|
return label
|
|
},
|
|
textAnchor: 'middle',
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
background: {
|
|
enabled: true,
|
|
foreColor: 'var(--chart-text-color)',
|
|
padding: 10,
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
opacity: 0.9,
|
|
},
|
|
},
|
|
xaxis: {
|
|
type: 'datetime',
|
|
position: 'top',
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
}
|
|
},
|
|
yaxis: {
|
|
show: false,
|
|
axisBorder: {
|
|
show: false
|
|
},
|
|
axisTicks: {
|
|
show: false
|
|
}
|
|
},
|
|
grid: {
|
|
row: {
|
|
colors: ['var(--light-background)', 'var(--white)'],
|
|
opacity: 1
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 2,
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: 'none',
|
|
}
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: 'none',
|
|
}
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: 'none',
|
|
}
|
|
},
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 1661,
|
|
options:{
|
|
chart: {
|
|
height: 295,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 1200,
|
|
options:{
|
|
chart: {
|
|
height: 370,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 575,
|
|
options:{
|
|
chart: {
|
|
height: 300,
|
|
}
|
|
}
|
|
},
|
|
]
|
|
};
|
|
|
|
var upcomingchart = new ApexCharts(document.querySelector("#upcomingchart"), upcomingoptions);
|
|
upcomingchart.render();
|
|
|
|
|
|
// lesson charts
|
|
function lessonCommonOption(data) {
|
|
return {
|
|
series: data.lessonYseries,
|
|
chart: {
|
|
type: 'donut',
|
|
height: 80,
|
|
},
|
|
colors: data.color,
|
|
legend: {
|
|
show: false
|
|
},
|
|
stroke: {
|
|
width: 1,
|
|
colors: "var(--white)"
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
},
|
|
plotOptions: {
|
|
pie: {
|
|
donut: {
|
|
labels: {
|
|
show: true,
|
|
value: {
|
|
fontSize: '11px',
|
|
fontFamily: 'Rubik, sans-serif',
|
|
fontWeight: 400,
|
|
color: 'var(--chart-text-color)',
|
|
offsetY: -12,
|
|
formatter: function (val) {
|
|
return val
|
|
}
|
|
},
|
|
total: {
|
|
show: true,
|
|
showAlways: false,
|
|
label: 'Total',
|
|
fontSize: '11px',
|
|
fontFamily: 'Rubik, sans-serif',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
states: {
|
|
normal: {
|
|
filter: {
|
|
type: 'none',
|
|
}
|
|
},
|
|
hover: {
|
|
filter: {
|
|
type: 'none',
|
|
}
|
|
},
|
|
active: {
|
|
allowMultipleDataPointsSelection: false,
|
|
filter: {
|
|
type: 'none',
|
|
}
|
|
},
|
|
}
|
|
};
|
|
}
|
|
|
|
|
|
const lesson1 = {
|
|
color: ["var(--theme-deafult)", "var(--chart-progress-light)", "var(--chart-progress-light)", "var(--chart-progress-light)","var(--chart-progress-light)","var(--chart-progress-light)", "var(--chart-progress-light)"],
|
|
lessonYseries: [20, 5, 5, 5, 5,5,5],
|
|
};
|
|
|
|
const lessonactivechart1 = document.querySelector('#lessonChart1');
|
|
if (lessonactivechart1) {
|
|
var lessonChart1 = new ApexCharts(lessonactivechart1, lessonCommonOption(lesson1));
|
|
lessonChart1.render();
|
|
}
|
|
|
|
// lesson vue data
|
|
const lesson2 = {
|
|
color: ["var(--theme-deafult)", "var(--chart-progress-light)", "var(--chart-progress-light)", "var(--chart-progress-light)"],
|
|
lessonYseries: [50, 10, 10,10],
|
|
};
|
|
|
|
const lessonactivechart2 = document.querySelector('#lessonChart2');
|
|
if (lessonactivechart2) {
|
|
var lessonChart2 = new ApexCharts(lessonactivechart2, lessonCommonOption(lesson2));
|
|
lessonChart2.render();
|
|
}
|
|
|
|
|
|
// lesson bootstrap data
|
|
const lesson3 = {
|
|
color: ["var(--theme-deafult)", "var(--chart-progress-light)", "var(--chart-progress-light)", "var(--chart-progress-light)","var(--chart-progress-light)","var(--chart-progress-light)", "var(--chart-progress-light)", "var(--chart-progress-light)", "var(--chart-progress-light)","var(--chart-progress-light)"],
|
|
lessonYseries: [1, 1, 1,1,1, 1, 1,1,1,1],
|
|
};
|
|
|
|
const lessonactivechart3 = document.querySelector('#lessonChart3');
|
|
if (lessonactivechart3) {
|
|
var lessonChart3 = new ApexCharts(lessonactivechart3, lessonCommonOption(lesson3));
|
|
lessonChart3.render();
|
|
} |