/*=========================================================================================
File Name: widgets.js
Description: widgets page content with different types of cards
----------------------------------------------------------------------------------------
Item Name: Frest HTML Admin Template
Version: 1.0
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/
$(document).ready(function () {
var $primary = '#5A8DEE';
var $success = '#39DA8A';
var $danger = '#FF5B5C';
var $warning = '#FDAC41';
var $info = '#00CFDD';
var $label_color = '#304156';
var $danger_light = '#FFDEDE';
var $gray_light = '#828D99';
var $bg_light = "#f2f4f4";
// Radial Followers Chart - Primary
// --------------------------------
var radialPrimaryoptions = {
chart: {
height: 250,
type: "radialBar"
},
series: [86],
plotOptions: {
radialBar: {
offsetY: -10,
size: 70,
hollow: {
size: "70%"
},
dataLabels: {
showOn: "always",
name: {
show: false
},
value: {
colors: [$label_color],
fontSize: "20px",
show: true,
offsetY: 8,
fontFamily: "Rubik"
}
}
}
},
stroke: {
lineCap: "round",
}
};
var radialPrimaryChart = new ApexCharts(
document.querySelector("#radial-chart-primary"),
radialPrimaryoptions
);
radialPrimaryChart.render();
// Radial Users Chart - Success
// ----------------------------
var radialSuccessoptions = {
chart: {
height: 250,
type: "radialBar"
},
series: [44],
colors: [$success],
plotOptions: {
radialBar: {
offsetY: -10,
size: 70,
hollow: {
size: "70%"
},
dataLabels: {
showOn: "always",
name: {
show: false
},
value: {
colors: [$label_color],
fontSize: "20px",
show: true,
offsetY: 8,
fontFamily: "Rubik"
}
}
}
},
stroke: {
lineCap: "round",
}
};
var radialSuccessChart = new ApexCharts(
document.querySelector("#radial-chart-success"),
radialSuccessoptions
);
radialSuccessChart.render();
// Radial Registrations Chart - Danger
// -----------------------------------
var radialDangeroptions = {
chart: {
height: 250,
type: "radialBar"
},
series: [63],
colors: [$danger],
plotOptions: {
radialBar: {
offsetY: -10,
size: 70,
hollow: {
size: "70%"
},
dataLabels: {
showOn: "always",
name: {
show: false
},
value: {
colors: [$label_color],
fontSize: "20px",
show: true,
offsetY: 8,
fontFamily: "Rubik"
}
}
}
},
stroke: {
lineCap: "round",
}
};
var radialDangerChart = new ApexCharts(
document.querySelector("#radial-chart-danger"),
radialDangeroptions
);
radialDangerChart.render();
// Multi Radial Statistics
// -----------------------
var multiRadialOptions = {
chart: {
height: 300,
type: "radialBar",
},
colors: [$primary, $warning, $danger],
series: [75, 80, 85],
plotOptions: {
radialBar: {
hollow: {
size: "55%"
},
track: {
margin: 10,
background: '#fff',
},
dataLabels: {
name: {
fontSize: '15px',
color: [$gray_light],
fontFamily: "IBM Plex Sans",
offsetY: 25,
},
value: {
fontSize: '32px',
fontFamily: "Rubik",
offsetY: -15,
},
total: {
show: true,
label: 'Instagram',
color: $gray_light
}
}
}
},
stroke: {
lineCap: "round",
},
labels: ['Comments', 'Sharing', 'Replies']
};
var multiradialChart = new ApexCharts(
document.querySelector("#radial-chart-multi"),
multiRadialOptions
);
multiradialChart.render();
// Half Radial Chart
// -----------------
var radialHalfChartOptions = {
chart: {
height: 270,
type: "radialBar",
},
series: [67],
labels: ["842k"],
colors: [$warning],
plotOptions: {
radialBar: {
hollow: {
margin: -5,
size: '85%',
image: '../../../app-assets/images/cards/face-regular-24.png',
imageWidth: 32,
imageHeight: 32,
imageClipped: false,
},
startAngle: -120,
endAngle: 130,
track: {
background: [$bg_light],
startAngle: -100,
endAngle: 120,
},
dataLabels: {
name: {
show: true,
fontSize: "34px",
offsetY: 50,
color: $label_color
},
value: {
fontSize: "28px",
show: false
}
}
}
},
stroke: {
lineCap: "round"
}
};
var radialHalfChart = new ApexCharts(
document.querySelector("#radial-chart-half"),
radialHalfChartOptions
);
radialHalfChart.render();
// Donut Chart Spending
// ---------------------
var donustSpendingChart = {
chart: {
width: 270,
type: 'donut',
},
dataLabels: {
enabled: false
},
series: [44, 55, 13, 33],
labels: ["Public Transport", "Cafe & Resturants", "Business Projects", "Traveling & Vocation"],
stroke: {
width: 0
},
colors: [$danger, $success, $warning, $primary],
plotOptions: {
pie: {
donut: {
size: '95%',
labels: {
show: true,
name: {
show: true,
fontFamily: 'Rubik',
color: $gray_light,
offsetY: 30
},
value: {
show: true,
fontSize: '32px',
fontFamily: 'Rubik',
color: undefined,
offsetY: -20,
formatter: function (val) {
return val
}
},
total: {
show: true,
label: 'Total',
color: $gray_light,
formatter: function (w) {
return w.globals.seriesTotals.reduce(function (a, b) {
return a + b
}, 0)
}
}
}
}
}
},
legend: {
show: false
}
}
var donustChartSpending = new ApexCharts(
document.querySelector("#donut-chart-spending"),
donustSpendingChart
);
donustChartSpending.render();
// Donut Chart Statistics
// -----------------------
var donustChartStatistics = {
chart: {
width: 280,
type: 'donut'
},
dataLabels: {
enabled: false
},
series: [70, 30, 40],
labels: ["Installation", "Page Views", "Active Users"],
stroke: {
width: 0
},
colors: [$primary, $warning, $danger],
plotOptions: {
pie: {
donut: {
size: '95%',
labels: {
show: true,
name: {
show: true,
fontSize: '22px',
fontFamily: 'Rubik',
color: $gray_light,
offsetY: 20
},
value: {
show: true,
fontSize: '32px',
fontFamily: 'Rubik',
color: undefined,
offsetY: -30,
formatter: function (val) {
return val
}
},
total: {
show: true,
label: 'Copies',
color: $gray_light,
formatter: function (w) {
return w.globals.seriesTotals.reduce(function (a, b) {
return a + b
}, 0)
}
}
}
}
}
},
legend: {
show: false
}
}
var donustChartStatistics = new ApexCharts(
document.querySelector("#donut-chart-statistics"),
donustChartStatistics
);
donustChartStatistics.render();
// Bar Chart
// ---------
var barchartOptions = {
chart: {
height: 310,
type: 'bar',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: '20%',
endingShape: 'rounded'
},
},
legend: {
horizontalAlign: 'right',
offsetY: -10,
markers: {
radius: 50,
height: 8,
width: 8
}
},
dataLabels: {
enabled: false
},
colors: [$danger, $danger_light],
stroke: {
show: true,
width: 0,
colors: ['transparent']
},
series: [{
name: '2019',
data: [120, 180, 250, 180, 290, 390, 330, 290, 220, 330, 280, 130]
}, {
name: '2018',
data: [80, 150, 210, 120, 220, 320, 270, 240, 130, 270, 210, 110]
}],
xaxis: {
categories: ['Ja', 'Fe', 'Ma', 'Ap', 'Ma', 'Ju', 'Ju', 'Au', 'Se', 'Oc', 'No', 'De'],
axisBorder: {
show: false
},
axisTicks: {
show: false
},
labels: {
style: {
colors: $gray_light
}
}
},
yaxis: {
min: 0,
max: 400,
tickAmount: 4,
labels: {
style: {
color: $gray_light
}
}
},
fill: {
opacity: 1
},
tooltip: {
y: {
formatter: function (val) {
return "$ " + val + " thousands"
}
}
}
}
var barChart = new ApexCharts(
document.querySelector("#avg-order-chart"),
barchartOptions
);
barChart.render();
// Line Chart
// ----------
var lineChartoptions = {
chart: {
height: 300,
type: 'line',
zoom: {
enabled: false
},
toolbar: {
show: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 3,
},
legend: {
horizontalAlign: 'right',
position: 'top',
markers: {
radius: 50,
height: 8,
width: 8
},
itemMargin: {
horizontal: 20,
}
},
colors: [$info, $success],
series: [{
name: "Views",
data: [40, 45, 39, 10, 40, 27, 30, 42]
}, {
name: "Likes",
data: [25, 30, 31, 12, 28, 27, 22, 28]
}],
tooltip: {
x: {
show: false,
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
style: {
colors: $gray_light
}
}
},
yaxis: {
labels: {
style: {
color: $gray_light
}
}
},
legend: {
show: false
}
}
var lineChart = new ApexCharts(
document.querySelector("#statistics-line-chart"),
lineChartoptions
);
lineChart.render();
// Statistics Multi Radial
// -----------------------
var statisticsRadialChartOptions = {
chart: {
height: 270,
type: "radialBar",
},
colors: [$primary, $success, $danger],
series: [85, 90, 95],
labels: ['Category', 'Service', 'Account'],
plotOptions: {
radialBar: {
hollow: {
offsetY: -50,
size: "50%"
},
track: {
margin: 10,
background: '#fff',
},
dataLabels: {
name: {
fontSize: '15px',
color: [$gray_light],
fontFamily: "IBM Plex Sans",
offsetY: 25,
},
value: {
fontSize: '32px',
fontFamily: "Rubik",
offsetY: -15,
},
total: {
show: true,
label: 'Expanse',
}
}
}
},
stroke: {
lineCap: "round",
}
}
var statisticsRadialChart = new ApexCharts(
document.querySelector("#statistics-multi-radial-chart"),
statisticsRadialChartOptions
);
statisticsRadialChart.render();
// Order Activity Line Chart
// -------------------------
var orderActivityChartOptions = {
chart: {
height: 350,
type: 'line',
toolbar: {
show: false
}
},
colors: [$primary],
dataLabels: {
enabled: false,
},
series: [{
data: [40, 60, 120, 100, 140, 80, 180, 180, 280, 190, 210, 190, 290, 290]
}],
markers: {
size: 5,
hover: {
size: 7,
sizeOffset: 7
},
},
xaxis: {
categories: [10.12, 10.12, 11.12, 11.12, 12.12, 12.12, 13.12, 13.12, 14.12, 14.12, 15.12, 15.12, 16.12, 16.12],
axisTicks: {
show: false
},
axisBorder: {
show: false
},
labels: {
style: {
colors: $gray_light
},
offsetX: 3,
}
},
yaxis: {
min: 0,
max: 300,
tickAmount: 3,
labels: {
style: {
color: $gray_light
}
}
},
grid: {
padding: {
left: 15
}
}
}
var orderActivityChart = new ApexCharts(
document.querySelector("#order-activity-line-chart"),
orderActivityChartOptions
);
orderActivityChart.render();
// Followers Line Chart - Danger
// -----------------------------
var followerChartDangerOptions = {
chart: {
height: 100,
type: 'line',
toolbar: {
show: false
}
},
colors: [$danger],
dataLabels: {
enabled: false,
},
stroke: {
width: 3,
},
series: [{
data: [16, 10, 15, 12, 22, 20, 25]
}],
markers: {
size: 0
},
xaxis: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTicks: {
show: true,
},
labels: {
style: {
colors: $gray_light,
}
},
axisBorder: {
height: 0.5,
}
},
yaxis: {
show: false
},
grid: {
show: false
}
}
var followerChartDanger = new ApexCharts(
document.querySelector("#follower-danger-chart"),
followerChartDangerOptions
);
followerChartDanger.render();
// Followers Line Chart - Primary
// ------------------------------
var followerChartPrimaryOptions = {
chart: {
height: 100,
type: 'line',
toolbar: {
show: false
}
},
colors: [$primary],
dataLabels: {
enabled: false,
},
stroke: {
width: 3,
},
series: [{
data: [24, 16, 27, 23, 12, 20, 23]
}],
markers: {
size: 0
},
xaxis: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTicks: {
show: true,
},
labels: {
style: {
colors: $gray_light,
}
},
axisBorder: {
height: 0.5,
}
},
yaxis: {
show: false
},
grid: {
show: false
}
}
var followerChartPrimary = new ApexCharts(
document.querySelector("#follower-primary-chart"),
followerChartPrimaryOptions
);
followerChartPrimary.render();
// Followers Line Chart - Success
// ------------------------------
var followerChartSuccessOptions = {
chart: {
height: 100,
type: 'line',
toolbar: {
show: false
}
},
colors: [$success],
dataLabels: {
enabled: false,
},
stroke: {
width: 3,
},
series: [{
data: [26, 19, 23, 10, 22, 30, 21]
}],
markers: {
size: 0
},
xaxis: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTicks: {
show: true,
},
labels: {
style: {
colors: $gray_light,
}
},
axisBorder: {
height: 0.5,
}
},
yaxis: {
show: false
},
grid: {
show: false
}
}
var followerChartSuccess = new ApexCharts(
document.querySelector("#follower-success-chart"),
followerChartSuccessOptions
);
followerChartSuccess.render();
// Radar Multi Series Chart
// ------------------------
var radarMultiChartOptions = {
chart: {
height: 390,
type: 'radar',
toolbar: {
show: false
}
},
colors: [$warning, $danger],
series: [{
name: 'Series 1',
data: [15, 25, 30, 20, 15, 15, 12, 10],
}, {
name: 'Series 2',
data: [30, 20, 20, 10, 30, 30, 35, 20],
}],
stroke: {
width: 0,
curve: ['smooth', 'straight']
},
fill: {
opacity: 0.85
},
markers: {
size: 3,
colors: [$warning, $danger]
},
dataLabels: {
style: {
colors: [$label_color]
}
},
labels: ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight'],
yaxis: {
show: false,
},
legend: {
show: false,
}
}
var radarMultiChart = new ApexCharts(
document.querySelector("#radar-multi-chart"),
radarMultiChartOptions
);
radarMultiChart.render();
// Gauge Chart
// -----------
var gaugeChartOptions = {
chart: {
height: 360,
type: 'radialBar',
},
plotOptions: {
radialBar: {
hollow: {
margin: 15,
size: "60%"
},
startAngle: -135,
endAngle: 135,
dataLabels: {
name: {
fontSize: '22px',
color: '#304156'
},
value: {
fontSize: '20px',
color: '#828d99',
formatter: function (val) {
return val + "min";
}
}
}
}
},
stroke: {
lineCap: 'round'
},
fill: {
colors: [$warning]
},
series: [67],
labels: ['Time Spent'],
}
var gaugeChart = new ApexCharts(
document.querySelector("#gauge-chart"),
gaugeChartOptions
);
gaugeChart.render();
// Daily Sales States - Heat Map Chart
// -----------------------------------
function generateData(count, yrange) {
var i = 0,
series = [];
while (i < count) {
var x = 'w' + (i + 1).toString(),
y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
var heatChartOptions = {
chart: {
height: 300,
type: 'heatmap',
toolbar: {
show: false
}
},
plotOptions: {
heatmap: {
enableShades: false,
colorScale: {
ranges: [{
from: 0,
to: 10,
color: '#90B3F3'
},
{
from: 11,
to: 20,
color: '#7EA6F1'
},
{
from: 21,
to: 30,
color: '#6B9AEF'
},
{
from: 31,
to: 40,
color: '#598DEE'
},
{
from: 41,
to: 50,
color: '#4680EC'
},
{
from: 51,
to: 60,
color: '#3474EA'
}
]
}
}
},
dataLabels: {
enabled: false
},
series: [{
name: 'Sunday',
data: generateData(24, {
min: 0,
max: 60
})
},
{
name: 'Monday',
data: generateData(24, {
min: 0,
max: 60
})
},
{
name: 'Tuesday',
data: generateData(24, {
min: 0,
max: 60
})
},
{
name: 'Wednesday',
data: generateData(24, {
min: 0,
max: 60
})
},
{
name: 'Thursday',
data: generateData(24, {
min: 0,
max: 60
})
},
{
name: 'Friday',
data: generateData(24, {
min: 0,
max: 60
})
},
{
name: 'Saturday',
data: generateData(24, {
min: 0,
max: 60
})
}],
xaxis: {
labels: {
show: false
},
axisBorder: {
show: false
},
axisTicks: {
show: false
}
},
yaxis: {
labels: {
style: {
color: $gray_light,
fontSize: '15px'
}
}
}
}
var heatChart = new ApexCharts(
document.querySelector("#sales-heatmap-chart"),
heatChartOptions);
heatChart.render();
// Single Date Range
//----------------------
$('.single-daterange').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
maxYear: parseInt(moment().format('YYYY'), 10)
});
// Basic Date Range
//---------------------
$('.daterange').daterangepicker();
// Widget Notification - List Group
//--------------------------
$('.readable-mark-icon').on('click', function () {
$(this).addClass('mark-as-read').attr('data-original-title', 'Mark as Unread').children('i').removeClass('text-light-primary').addClass('text-light-secondary');
$('.readable-mark-icon.mark-as-read').siblings('.list-left').find('.list-title').addClass('text-bold-500');
});
// Default mark-as-read shown
$('.readable-mark-icon.mark-as-read').siblings('.list-left').find('.list-title').addClass('text-bold-500');
// Widget Todo List
// ------------------
// Task List Widget - for completed todo item
$(document).on('click', '.widget-todo-item input', function () {
$(this).closest('.widget-todo-item').toggleClass("completed");
});
// Drag the task
dragula([document.getElementById("widget-todo-list")], {
moves: function(el, container, handle) {
return handle.classList.contains("cursor-move");
}
});
// Earnings Swiper
// ---------------
var swiperLength = $(".swiper-slide").length;
if (swiperLength) {
swiperLength = Math.floor(swiperLength / 2)
}
// Swiper js for this page
var mySwiper = new Swiper('.widget-earnings-swiper', {
slidesPerView: 'auto',
initialSlide: swiperLength,
centeredSlides: true,
spaceBetween: 30,
// active slide on click
slideToClickedSlide: true,
});
activeSlide(swiperLength);
// Active slide change on swipe
mySwiper.on('slideChange', function () {
activeSlide(mySwiper.realIndex);
});
//add class active content of active slide
function activeSlide(index) {
var slideEl = mySwiper.slides[index]
var slideId = $(slideEl).attr('id');
$(".wrapper-content").removeClass("active");
$("[data-earnings=" + slideId + "]").addClass('active')
};
// Perfect Scrollbar
//------------------
// Widget - User Details -Perfect Scrollbar X
if ($('.widget-user-details .table-responsive').length > 0) {
var user_details = new PerfectScrollbar('.widget-user-details .table-responsive');
}
// Widget - Card Overlay - Perfect Scrollbar X - on initial level
if ($('.widget-overlay-content .table-responsive').length > 0) {
var card_overlay = new PerfectScrollbar('.widget-overlay-content .tab-pane.active .table-responsive');
}
// Widget - Card Overlay - Perfect Scrollbar X - on active tab-pane
$('.widget-overlay-content a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var card_overlay = new PerfectScrollbar('.widget-overlay-content .tab-pane.active .table-responsive');
})
// Widget - timeline perfect scrollbar initialization
if ($(".widget-timeline").length > 0) {
var widget_chat_scroll = new PerfectScrollbar(".widget-timeline", { wheelPropagation: false });
}
// Widget - chat area perfect scrollbar initialization
if ($(".widget-chat-scroll").length > 0) {
var widget_chat_scroll = new PerfectScrollbar(".widget-chat-scroll", { wheelPropagation: false });
}
// Widget - earnings perfect scrollbar initialization
if ($(".widget-earnings-scroll").length > 0) {
var widget_earnings = new PerfectScrollbar(".widget-earnings-scroll",
// horizontal scroll with mouse wheel
{
suppressScrollY: true,
useBothWheelAxes: true
});
}
// Widget - chat autoscroll to bottom of Chat area on page initialization
$(".widget-chat-scroll").animate({ scrollTop: $(".widget-chat-scroll")[0].scrollHeight }, 800);
});
// widget page chat
// ----------------
// Add message to chat
function widgetMessageSend(source) {
var message = $(".widget-chat-message").val();
if (message != "") {
var html = '<div class="chat-message">' + "<p>" + message + "</p>" + "<div class=" + "chat-time" + ">3:35 AM</div></div>";
$(".widget-chat-messages .chat:last-child .chat-body").append(html);
$(".widget-chat-message").val("");
$(".widget-chat-scroll").scrollTop($(".widget-chat-scroll > .chat-content").height());
}
}