kagir/Motula-Translate-Backend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add theme assets;

Browse Source
This commit is contained in:
Kagir
2024-01-21 17:18:37 +01:00
parent fcc061aeba
commit aa45b6a645
1425 changed files with 430771 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/js/ace.js
+32
View File
@@ -0,0 +1,32 @@
// npm package: ace-builds (Ajax.org Cloud9 Editor)
// github link: https://github.com/ajaxorg/ace-builds
$(function() {
'use strict';
if ($('#ace_html').length) {
$(function() {
var editor = ace.edit("ace_html");
editor.setTheme("ace/theme/dracula");
editor.getSession().setMode("ace/mode/html");
editor.setOption("showPrintMargin", false)
});
}
if ($('#ace_scss').length) {
$(function() {
var editor = ace.edit("ace_scss");
editor.setTheme("ace/theme/dracula");
editor.getSession().setMode("ace/mode/scss");
editor.setOption("showPrintMargin", false)
});
}
if ($('#ace_javaScript').length) {
$(function() {
var editor = ace.edit("ace_javaScript");
editor.setTheme("ace/theme/dracula");
editor.getSession().setMode("ace/mode/javascript");
editor.setOption("showPrintMargin", false)
});
}
});
public/assets/js/apexcharts-dark-rtl.js
+953
View File
@@ -0,0 +1,953 @@
// npm package: dropzone
// github link: https://github.com/dropzone/dropzone
$(function() {
'use strict';
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#b8c3d9",
cardBg : "#0c1427"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
// Apex Line chart start
if ($('#apexLine').length) {
var lineChartOptions = {
chart: {
type: "line",
height: '320',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.primary, colors.danger, colors.warning],
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [
{
name: "Data a",
data: [45, 52, 38, 45]
},
{
name: "Data b",
data: [12, 42, 68, 33]
},
{
name:
"Data c",
data: [8, 32, 48, 53]
}
],
xaxis: {
type: "datetime",
categories: ["2015", "2016", "2017", "2018"],
lines: {
show: true
},
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: "",
offsetX: -45,
},
labels: {
align: 'left',
offsetX: -10,
}
},
markers: {
size: 0,
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 3,
curve: "smooth",
lineCap: "round"
},
};
var apexLineChart = new ApexCharts(document.querySelector("#apexLine"), lineChartOptions);
apexLineChart.render();
}
// Apex Line chart end
// Apex Bar chart start
if ($('#apexBar').length) {
var options = {
chart: {
type: 'bar',
height: '320',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.primary],
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [{
name: 'sales',
data: [30,40,45,50,49,60,70,91,125]
}],
xaxis: {
type: 'datetime',
categories: ['01/01/1991','01/01/1992','01/01/1993','01/01/1994','01/01/1995','01/01/1996','01/01/1997', '01/01/1998','01/01/1999'],
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: "",
offsetX: -45,
},
labels: {
align: 'left',
offsetX: -10,
}
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 0
},
plotOptions: {
bar: {
borderRadius: 4
}
}
}
var apexBarChart = new ApexCharts(document.querySelector("#apexBar"), options);
apexBarChart.render();
}
// Apex Bar chart end
// Apex Area chart start
if ($('#apexArea').length) {
var options = {
chart: {
type: "area",
height: 300,
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
stacked: true,
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.danger, colors.info],
stroke: {
curve: "smooth",
width: 3
},
dataLabels: {
enabled: false
},
series: [{
name: 'Total Views',
data: generateDayWiseTimeSeries(0, 18)
}, {
name: 'Unique Views',
data: generateDayWiseTimeSeries(1, 18)
}],
// markers: {
// size: 5,
// strokeWidth: 3,
// hover: {
// size: 7
// }
// },
xaxis: {
type: "datetime",
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: "Views",
offsetX: -45,
},
labels: {
align: 'left',
offsetX: -10,
},
tickAmount: 4,
min: 0,
tooltip: {
enabled: true
}
},
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
tooltip: {
x: {
format: "dd MMM yyyy"
},
},
fill: {
type: 'solid',
opacity: [0.4,0.25],
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
};
var chart = new ApexCharts(document.querySelector("#apexArea"), options);
chart.render();
function generateDayWiseTimeSeries(s, count) {
var values = [
[4,3,10,9,29,19,25,9,12,7,19,5,13,9,17,2,7,5],
[2,3,8,7,22,16,23,7,11,5,12,5,10,4,15,2,6,2]
];
var i = 0;
var series = [];
var x = new Date("11 Nov 2012").getTime();
while (i < count) {
series.push([x, values[s][i]]);
x += 86400000;
i++;
}
return series;
}
}
// Apex Area chart end
// Apex Mixed chart start
if ($('#apexMixed').length) {
var options = {
chart: {
height: 300,
type: 'line',
stacked: false,
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.danger, colors.info],
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
stroke: {
width: [0, 3],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Team A',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'Team B',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
fill: {
opacity: [.75,0.25],
},
labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
markers: {
size: 0
},
xaxis: {
type:'datetime',
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: "Points",
offsetX: -45,
},
labels: {
align: 'left',
offsetX: -10,
}
},
tooltip: {
shared: true,
intersect: false,
y: [{
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}, {
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(2) + " $";
}
return y;
}
}]
}
}
var chart = new ApexCharts(
document.querySelector("#apexMixed"),
options
);
chart.render();
}
// Apex Mixed chart end
// Apex Donut chart start
if ($('#apexDonut').length) {
var options = {
chart: {
height: 300,
type: "donut",
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
stroke: {
colors: ['rgba(0,0,0,0)']
},
colors: [colors.primary,colors.warning,colors.danger, colors.info],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
dataLabels: {
enabled: false
},
series: [44, 55, 13, 33]
};
var chart = new ApexCharts(document.querySelector("#apexDonut"), options);
chart.render();
}
// Apex Donut chart start
// Apex Pie chart end
if ($('#apexPie').length) {
var options = {
chart: {
height: 300,
type: "pie",
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.primary,colors.warning,colors.danger, colors.info],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
colors: ['rgba(0,0,0,0)']
},
dataLabels: {
enabled: false
},
series: [44, 55, 13, 33]
};
var chart = new ApexCharts(document.querySelector("#apexPie"), options);
chart.render();
}
// Apex Pie chart end
// Apex Heat chart start
if ($('#apexHeatMap').length) {
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = 'w' + (i + 1).toString();
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
var options = {
chart: {
height: 300,
type: 'heatmap',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
dataLabels: {
enabled: false
},
colors: [colors.info],
stroke: {
colors: [colors.cardBg]
},
series: [{
name: 'Metric1',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric2',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric3',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric4',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric5',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric6',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric7',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric8',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric9',
data: generateData(18, {
min: 0,
max: 90
})
}
],
xaxis: {
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: "",
offsetX: -45,
},
labels: {
align: 'left',
offsetX: -25,
}
},
title: {
text: 'HeatMap Chart (Single color)',
align: 'center',
style: {
fontWeight: 'normal',
},
},
plotOptions: {
heatmap: {
radius: 0,
}
},
}
var chart = new ApexCharts(document.querySelector("#apexHeatMap"), options);
chart.render();
}
// Apex Heat chart end
// Apex Radar chart start
if ($('#apexRadar').length) {
var options = {
chart: {
height: 300,
type: 'radar',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
grid: {
padding: {
bottom: -6
}
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
series: [{
name: 'Series 1',
data: [80, 50, 30, 40, 100, 20],
}, {
name: 'Series 2',
data: [20, 30, 40, 80, 20, 80],
}, {
name: 'Series 3',
data: [44, 76, 78, 13, 43, 10],
}],
labels: ['2011', '2012', '2013', '2014', '2015', '2016'],
colors: [colors.primary, colors.warning, colors.danger],
stroke: {
width: 0,
},
fill: {
opacity: 0.75
},
xaxis: {
categories: ['April', 'May', 'June', 'July', 'August', 'September'],
labels: {
show: true,
style: {
colors: [colors.secondary, colors.secondary, colors.secondary, colors.secondary, colors.secondary, colors.secondary],
fontSize: "14px",
fontFamily: fontFamily
}
}
},
yaxis: {
labels: {
show: true,
style: {
colors: colors.bodyColor,
fontSize: "11px",
fontFamily: fontFamily
}
}
},
markers: {
size: 0
},
plotOptions: {
radar: {
polygons: {
strokeColors: colors.gridBorder,
strokeWidth: 1,
connectorColors: colors.gridBorder,
fill: {
colors: ['transparent']
}
}
}
}
}
var chart = new ApexCharts(document.querySelector("#apexRadar"), options );
chart.render();
}
// Apex Radar chart end
// Apex Scatter chart start
if ($('#apexScatter').length) {
var options = {
chart: {
height: 300,
type: 'scatter',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.primary, colors.warning, colors.danger],
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: colors.cardBg,
hover: {
strokeColor: colors.cardBg
}
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
series: [{
name: "Sample A",
data: [
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
},{
name: "Sample B",
data: [
[36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
},{
name: "Sample C",
data: [
[21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [29.6, 6], [31.6, 8], [21.6, 5], [20.9, 4], [22.4, 0], [32.6, 10.3], [29.7, 20.8], [24.5, 0.8], [21.4, 0], [21.7, 6.9], [28.6, 7.7], [15.4, 0], [18.1, 0], [33.4, 0], [16.4, 0]]
}],
xaxis: {
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
tickAmount: 10,
labels: {
formatter: function(val) {
return parseFloat(val).toFixed(1)
}
}
},
yaxis: {
tickAmount: 7
}
}
var chart = new ApexCharts(
document.querySelector("#apexScatter"),
options
);
chart.render();
}
// Apex Scatter chart end
// Apex Radialbar chart start
if ($('#apexRadialBar').length) {
var options = {
chart: {
height: 300,
type: "radialBar",
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.primary, colors.warning, colors.danger, colors.info],
fill: {
},
grid: {
padding: {
top: 10
}
},
plotOptions: {
radialBar: {
dataLabels: {
total: {
show: true,
label: 'TOTAL',
fontSize: '14px',
fontFamily: fontFamily,
}
},
track: {
background: colors.gridBorder,
strokeWidth: '100%',
opacity: 1,
margin: 5,
},
}
},
series: [44, 55, 67, 83],
labels: ["Apples", "Oranges", "Bananas", "Berries"],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
};
var chart = new ApexCharts(document.querySelector("#apexRadialBar"), options);
chart.render();
var chartAreaBounds = chart.w.globals.dom.baseEl.querySelector('.apexcharts-inner').getBoundingClientRect();
}
// Apex Radialbar chart end
});
public/assets/js/apexcharts-dark.js
+911
View File
@@ -0,0 +1,911 @@
// npm package: apexcharts
// github link: https://github.com/apexcharts/apexcharts.js
$(function() {
'use strict';
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#b8c3d9",
cardBg : "#0c1427"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
// Apex Line chart start
if ($('#apexLine').length) {
var lineChartOptions = {
chart: {
type: "line",
height: '320',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.primary, colors.danger, colors.warning],
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [
{
name: "Data a",
data: [45, 52, 38, 45]
},
{
name: "Data b",
data: [12, 42, 68, 33]
},
{
name:
"Data c",
data: [8, 32, 48, 53]
}
],
xaxis: {
type: "datetime",
categories: ["2015", "2016", "2017", "2018"],
lines: {
show: true
},
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
markers: {
size: 0,
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 3,
curve: "smooth",
lineCap: "round"
},
};
var apexLineChart = new ApexCharts(document.querySelector("#apexLine"), lineChartOptions);
apexLineChart.render();
}
// Apex Line chart end
// Apex Bar chart start
if ($('#apexBar').length) {
var options = {
chart: {
type: 'bar',
height: '320',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.primary],
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [{
name: 'sales',
data: [30,40,45,50,49,60,70,91,125]
}],
xaxis: {
type: 'datetime',
categories: ['01/01/1991','01/01/1992','01/01/1993','01/01/1994','01/01/1995','01/01/1996','01/01/1997', '01/01/1998','01/01/1999'],
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 0
},
plotOptions: {
bar: {
borderRadius: 4
}
}
}
var apexBarChart = new ApexCharts(document.querySelector("#apexBar"), options);
apexBarChart.render();
}
// Apex Bar chart end
// Apex Area chart start
if ($('#apexArea').length) {
var options = {
chart: {
type: "area",
height: 300,
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
stacked: true,
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.danger, colors.info],
stroke: {
curve: "smooth",
width: 3
},
dataLabels: {
enabled: false
},
series: [{
name: 'Total Views',
data: generateDayWiseTimeSeries(0, 18)
}, {
name: 'Unique Views',
data: generateDayWiseTimeSeries(1, 18)
}],
// markers: {
// size: 5,
// strokeWidth: 3,
// hover: {
// size: 7
// }
// },
xaxis: {
type: "datetime",
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
title: {
text: 'Views',
},
tickAmount: 4,
min: 0,
labels: {
// offsetX: -6,
},
tooltip: {
enabled: true
}
},
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
tooltip: {
x: {
format: "dd MMM yyyy"
},
},
fill: {
type: 'solid',
opacity: [0.4,0.25],
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
};
var chart = new ApexCharts(document.querySelector("#apexArea"), options);
chart.render();
function generateDayWiseTimeSeries(s, count) {
var values = [
[4,3,10,9,29,19,25,9,12,7,19,5,13,9,17,2,7,5],
[2,3,8,7,22,16,23,7,11,5,12,5,10,4,15,2,6,2]
];
var i = 0;
var series = [];
var x = new Date("11 Nov 2012").getTime();
while (i < count) {
series.push([x, values[s][i]]);
x += 86400000;
i++;
}
return series;
}
}
// Apex Area chart end
// Apex Mixed chart start
if ($('#apexMixed').length) {
var options = {
chart: {
height: 300,
type: 'line',
stacked: false,
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.danger, colors.info],
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
stroke: {
width: [0, 3],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Team A',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'Team B',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
fill: {
opacity: [.75,0.25],
},
labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
markers: {
size: 0
},
xaxis: {
type:'datetime',
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
title: {
text: 'Points',
},
},
tooltip: {
shared: true,
intersect: false,
y: [{
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}, {
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(2) + " $";
}
return y;
}
}]
}
}
var chart = new ApexCharts(
document.querySelector("#apexMixed"),
options
);
chart.render();
}
// Apex Mixed chart end
// Apex Donut chart start
if ($('#apexDonut').length) {
var options = {
chart: {
height: 300,
type: "donut",
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
stroke: {
colors: ['rgba(0,0,0,0)']
},
colors: [colors.primary,colors.warning,colors.danger, colors.info],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
dataLabels: {
enabled: false
},
series: [44, 55, 13, 33]
};
var chart = new ApexCharts(document.querySelector("#apexDonut"), options);
chart.render();
}
// Apex Donut chart start
// Apex Pie chart end
if ($('#apexPie').length) {
var options = {
chart: {
height: 300,
type: "pie",
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.primary,colors.warning,colors.danger, colors.info],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
colors: ['rgba(0,0,0,0)']
},
dataLabels: {
enabled: false
},
series: [44, 55, 13, 33]
};
var chart = new ApexCharts(document.querySelector("#apexPie"), options);
chart.render();
}
// Apex Pie chart end
// Apex Heat chart start
if ($('#apexHeatMap').length) {
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = 'w' + (i + 1).toString();
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
var options = {
chart: {
height: 300,
type: 'heatmap',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
dataLabels: {
enabled: false
},
colors: [colors.info],
stroke: {
colors: [colors.cardBg]
},
series: [{
name: 'Metric1',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric2',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric3',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric4',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric5',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric6',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric7',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric8',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric9',
data: generateData(18, {
min: 0,
max: 90
})
}
],
xaxis: {
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
title: {
text: 'HeatMap Chart (Single color)',
align: 'center',
style: {
fontWeight: 'normal',
},
},
plotOptions: {
heatmap: {
radius: 0,
}
},
}
var chart = new ApexCharts(document.querySelector("#apexHeatMap"), options);
chart.render();
}
// Apex Heat chart end
// Apex Radar chart start
if ($('#apexRadar').length) {
var options = {
chart: {
height: 300,
type: 'radar',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
grid: {
padding: {
bottom: -6
}
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
series: [{
name: 'Series 1',
data: [80, 50, 30, 40, 100, 20],
}, {
name: 'Series 2',
data: [20, 30, 40, 80, 20, 80],
}, {
name: 'Series 3',
data: [44, 76, 78, 13, 43, 10],
}],
labels: ['2011', '2012', '2013', '2014', '2015', '2016'],
colors: [colors.primary, colors.warning, colors.danger],
stroke: {
width: 0,
},
fill: {
opacity: 0.75
},
xaxis: {
categories: ['April', 'May', 'June', 'July', 'August', 'September'],
labels: {
show: true,
style: {
colors: [colors.secondary, colors.secondary, colors.secondary, colors.secondary, colors.secondary, colors.secondary],
fontSize: "14px",
fontFamily: fontFamily
}
}
},
yaxis: {
labels: {
show: true,
style: {
colors: colors.bodyColor,
fontSize: "11px",
fontFamily: fontFamily
}
}
},
markers: {
size: 0
},
plotOptions: {
radar: {
polygons: {
strokeColors: colors.gridBorder,
strokeWidth: 1,
connectorColors: colors.gridBorder,
fill: {
colors: ['transparent']
}
}
}
}
}
var chart = new ApexCharts(document.querySelector("#apexRadar"), options );
chart.render();
}
// Apex Radar chart end
// Apex Scatter chart start
if ($('#apexScatter').length) {
var options = {
chart: {
height: 300,
type: 'scatter',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.primary, colors.warning, colors.danger],
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: colors.cardBg,
hover: {
strokeColor: colors.cardBg
}
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
series: [{
name: "Sample A",
data: [
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
},{
name: "Sample B",
data: [
[36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
},{
name: "Sample C",
data: [
[21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [29.6, 6], [31.6, 8], [21.6, 5], [20.9, 4], [22.4, 0], [32.6, 10.3], [29.7, 20.8], [24.5, 0.8], [21.4, 0], [21.7, 6.9], [28.6, 7.7], [15.4, 0], [18.1, 0], [33.4, 0], [16.4, 0]]
}],
xaxis: {
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
tickAmount: 10,
labels: {
formatter: function(val) {
return parseFloat(val).toFixed(1)
}
}
},
yaxis: {
tickAmount: 7
}
}
var chart = new ApexCharts(
document.querySelector("#apexScatter"),
options
);
chart.render();
}
// Apex Scatter chart end
// Apex Radialbar chart start
if ($('#apexRadialBar').length) {
var options = {
chart: {
height: 300,
type: "radialBar",
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'dark'
},
tooltip: {
theme: 'dark'
},
colors: [colors.primary, colors.warning, colors.danger, colors.info],
fill: {
},
grid: {
padding: {
top: 10
}
},
plotOptions: {
radialBar: {
dataLabels: {
total: {
show: true,
label: 'TOTAL',
fontSize: '14px',
fontFamily: fontFamily,
}
},
track: {
background: colors.gridBorder,
strokeWidth: '100%',
opacity: 1,
margin: 5,
},
}
},
series: [44, 55, 67, 83],
labels: ["Apples", "Oranges", "Bananas", "Berries"],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
};
var chart = new ApexCharts(document.querySelector("#apexRadialBar"), options);
chart.render();
var chartAreaBounds = chart.w.globals.dom.baseEl.querySelector('.apexcharts-inner').getBoundingClientRect();
}
// Apex Radialbar chart end
});
public/assets/js/apexcharts-light-rtl.js
+962
View File
@@ -0,0 +1,962 @@
// npm package: apexcharts
// github link: https://github.com/apexcharts/apexcharts.js
$(function() {
'use strict';
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#000",
cardBg : "#fff"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
// Apex Line chart start
if ($('#apexLine').length) {
var lineChartOptions = {
chart: {
type: "line",
height: '320',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary, colors.danger, colors.warning],
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [
{
name: "Data a",
data: [45, 52, 38, 45]
},
{
name: "Data b",
data: [12, 42, 68, 33]
},
{
name:
"Data c",
data: [8, 32, 48, 53]
}
],
xaxis: {
type: "datetime",
categories: ["2015", "2016", "2017", "2018"],
lines: {
show: true
},
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: "",
offsetX: -45,
},
labels: {
align: 'left',
offsetX: -10,
}
},
markers: {
size: 0,
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 3,
curve: "smooth",
lineCap: "round"
},
};
var apexLineChart = new ApexCharts(document.querySelector("#apexLine"), lineChartOptions);
apexLineChart.render();
}
// Apex Line chart end
// Apex Bar chart start
if ($('#apexBar').length) {
var options = {
chart: {
type: 'bar',
height: '320',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary],
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [{
name: 'sales',
data: [30,40,45,50,49,60,70,91,125]
}],
xaxis: {
type: 'datetime',
categories: ['01/01/1991','01/01/1992','01/01/1993','01/01/1994','01/01/1995','01/01/1996','01/01/1997', '01/01/1998','01/01/1999'],
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: "",
offsetX: -45,
},
labels: {
align: 'left',
offsetX: -10,
}
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 0
},
plotOptions: {
bar: {
borderRadius: 4
}
}
}
var apexBarChart = new ApexCharts(document.querySelector("#apexBar"), options);
apexBarChart.render();
}
// Apex Bar chart end
// Apex Area chart start
if ($('#apexArea').length) {
var options = {
chart: {
type: "area",
height: 300,
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
stacked: true,
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.danger, colors.info],
stroke: {
curve: "smooth",
width: 3
},
dataLabels: {
enabled: false
},
series: [{
name: 'Total Views',
data: generateDayWiseTimeSeries(0, 18)
}, {
name: 'Unique Views',
data: generateDayWiseTimeSeries(1, 18)
}],
// markers: {
// size: 5,
// strokeWidth: 3,
// hover: {
// size: 7
// }
// },
xaxis: {
type: "datetime",
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: "Views",
offsetX: -45,
},
labels: {
align: 'left',
offsetX: -10,
},
tickAmount: 4,
min: 0,
tooltip: {
enabled: true
}
},
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
tooltip: {
x: {
format: "dd MMM yyyy"
},
},
fill: {
type: 'solid',
opacity: [0.4,0.25],
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
};
var chart = new ApexCharts(document.querySelector("#apexArea"), options);
chart.render();
function generateDayWiseTimeSeries(s, count) {
var values = [
[4,3,10,9,29,19,25,9,12,7,19,5,13,9,17,2,7,5],
[2,3,8,7,22,16,23,7,11,5,12,5,10,4,15,2,6,2]
];
var i = 0;
var series = [];
var x = new Date("11 Nov 2012").getTime();
while (i < count) {
series.push([x, values[s][i]]);
x += 86400000;
i++;
}
return series;
}
}
// Apex Area chart end
// Apex Mixed chart start
if ($('#apexMixed').length) {
var options = {
chart: {
height: 300,
type: 'line',
stacked: false,
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.danger, colors.info],
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
stroke: {
width: [0, 3],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Team A',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'Team B',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
fill: {
opacity: [.75,0.25],
},
labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
markers: {
size: 0
},
xaxis: {
type:'datetime',
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: "Points",
offsetX: -45,
},
labels: {
align: 'left',
offsetX: -10,
}
},
tooltip: {
shared: true,
intersect: false,
y: [{
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}, {
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(2) + " $";
}
return y;
}
}]
}
}
var chart = new ApexCharts(
document.querySelector("#apexMixed"),
options
);
chart.render();
}
// Apex Mixed chart end
// Apex Donut chart start
if ($('#apexDonut').length) {
var options = {
chart: {
height: 300,
type: "donut",
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
stroke: {
colors: ['rgba(0,0,0,0)']
},
colors: [colors.primary,colors.warning,colors.danger, colors.info],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
dataLabels: {
enabled: false
},
series: [44, 55, 13, 33]
};
var chart = new ApexCharts(document.querySelector("#apexDonut"), options);
chart.render();
}
// Apex Donut chart start
// Apex Pie chart end
if ($('#apexPie').length) {
var options = {
chart: {
height: 300,
type: "pie",
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary,colors.warning,colors.danger, colors.info],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
colors: ['rgba(0,0,0,0)']
},
dataLabels: {
enabled: false
},
series: [44, 55, 13, 33]
};
var chart = new ApexCharts(document.querySelector("#apexPie"), options);
chart.render();
}
// Apex Pie chart end
// Apex Heat chart start
if ($('#apexHeatMap').length) {
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = 'w' + (i + 1).toString();
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
var options = {
chart: {
height: 300,
type: 'heatmap',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
dataLabels: {
enabled: false
},
colors: [colors.info],
stroke: {
colors: [colors.cardBg]
},
series: [{
name: 'Metric1',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric2',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric3',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric4',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric5',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric6',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric7',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric8',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric9',
data: generateData(18, {
min: 0,
max: 90
})
}
],
xaxis: {
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: "",
offsetX: -45,
},
labels: {
align: 'left',
offsetX: -25,
}
},
title: {
text: 'HeatMap Chart (Single color)',
align: 'center',
style: {
fontWeight: 'normal',
},
},
plotOptions: {
heatmap: {
radius: 0,
}
},
}
var chart = new ApexCharts(document.querySelector("#apexHeatMap"), options);
chart.render();
}
// Apex Heat chart end
// Apex Radar chart start
if ($('#apexRadar').length) {
var options = {
chart: {
height: 300,
type: 'radar',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
grid: {
padding: {
bottom: -6
}
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
series: [{
name: 'Series 1',
data: [80, 50, 30, 40, 100, 20],
}, {
name: 'Series 2',
data: [20, 30, 40, 80, 20, 80],
}, {
name: 'Series 3',
data: [44, 76, 78, 13, 43, 10],
}],
labels: ['2011', '2012', '2013', '2014', '2015', '2016'],
colors: [colors.primary, colors.warning, colors.danger],
stroke: {
width: 0,
},
fill: {
opacity: 0.75
},
xaxis: {
categories: ['April', 'May', 'June', 'July', 'August', 'September'],
labels: {
show: true,
style: {
colors: [colors.secondary, colors.secondary, colors.secondary, colors.secondary, colors.secondary, colors.secondary],
fontSize: "14px",
fontFamily: fontFamily
}
}
},
yaxis: {
labels: {
show: true,
style: {
colors: colors.bodyColor,
fontSize: "11px",
fontFamily: fontFamily
}
}
},
markers: {
size: 0
},
plotOptions: {
radar: {
polygons: {
strokeColors: colors.gridBorder,
strokeWidth: 1,
connectorColors: colors.gridBorder,
fill: {
colors: ['transparent']
}
}
}
}
}
var chart = new ApexCharts(document.querySelector("#apexRadar"), options );
chart.render();
}
// Apex Radar chart end
// Apex Scatter chart start
if ($('#apexScatter').length) {
var options = {
chart: {
height: 300,
type: 'scatter',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary, colors.warning, colors.danger],
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: colors.cardBg,
hover: {
strokeColor: colors.cardBg
}
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
series: [{
name: "Sample A",
data: [
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
},{
name: "Sample B",
data: [
[36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
},{
name: "Sample C",
data: [
[21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [29.6, 6], [31.6, 8], [21.6, 5], [20.9, 4], [22.4, 0], [32.6, 10.3], [29.7, 20.8], [24.5, 0.8], [21.4, 0], [21.7, 6.9], [28.6, 7.7], [15.4, 0], [18.1, 0], [33.4, 0], [16.4, 0]]
}],
xaxis: {
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
tickAmount: 10,
labels: {
formatter: function(val) {
return parseFloat(val).toFixed(1)
}
}
},
yaxis: {
tickAmount: 7,
opposite: true,
title: {
text: "",
offsetX: -45,
},
labels: {
align: 'left',
offsetX: -20,
}
}
}
var chart = new ApexCharts(
document.querySelector("#apexScatter"),
options
);
chart.render();
}
// Apex Scatter chart end
// Apex Radialbar chart start
if ($('#apexRadialBar').length) {
var options = {
chart: {
height: 300,
type: "radialBar",
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary, colors.warning, colors.danger, colors.info],
fill: {
},
grid: {
padding: {
top: 10
}
},
plotOptions: {
radialBar: {
dataLabels: {
total: {
show: true,
label: 'TOTAL',
fontSize: '14px',
fontFamily: fontFamily,
}
},
track: {
background: colors.gridBorder,
strokeWidth: '100%',
opacity: 1,
margin: 5,
},
}
},
series: [44, 55, 67, 83],
labels: ["Apples", "Oranges", "Bananas", "Berries"],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
};
var chart = new ApexCharts(document.querySelector("#apexRadialBar"), options);
chart.render();
var chartAreaBounds = chart.w.globals.dom.baseEl.querySelector('.apexcharts-inner').getBoundingClientRect();
}
// Apex Radialbar chart end
});
public/assets/js/apexcharts-light.js
+911
View File
@@ -0,0 +1,911 @@
// npm package: apexcharts
// github link: https://github.com/apexcharts/apexcharts.js
$(function() {
'use strict';
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#000",
cardBg : "#fff"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
// Apex Line chart start
if ($('#apexLine').length) {
var lineChartOptions = {
chart: {
type: "line",
height: '320',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary, colors.danger, colors.warning],
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [
{
name: "Data a",
data: [45, 52, 38, 45]
},
{
name: "Data b",
data: [12, 42, 68, 33]
},
{
name:
"Data c",
data: [8, 32, 48, 53]
}
],
xaxis: {
type: "datetime",
categories: ["2015", "2016", "2017", "2018"],
lines: {
show: true
},
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
markers: {
size: 0,
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 3,
curve: "smooth",
lineCap: "round"
},
};
var apexLineChart = new ApexCharts(document.querySelector("#apexLine"), lineChartOptions);
apexLineChart.render();
}
// Apex Line chart end
// Apex Bar chart start
if ($('#apexBar').length) {
var options = {
chart: {
type: 'bar',
height: '320',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary],
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [{
name: 'sales',
data: [30,40,45,50,49,60,70,91,125]
}],
xaxis: {
type: 'datetime',
categories: ['01/01/1991','01/01/1992','01/01/1993','01/01/1994','01/01/1995','01/01/1996','01/01/1997', '01/01/1998','01/01/1999'],
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 0
},
plotOptions: {
bar: {
borderRadius: 4
}
}
}
var apexBarChart = new ApexCharts(document.querySelector("#apexBar"), options);
apexBarChart.render();
}
// Apex Bar chart end
// Apex Area chart start
if ($('#apexArea').length) {
var options = {
chart: {
type: "area",
height: 300,
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
stacked: true,
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.danger, colors.info],
stroke: {
curve: "smooth",
width: 3
},
dataLabels: {
enabled: false
},
series: [{
name: 'Total Views',
data: generateDayWiseTimeSeries(0, 18)
}, {
name: 'Unique Views',
data: generateDayWiseTimeSeries(1, 18)
}],
// markers: {
// size: 5,
// strokeWidth: 3,
// hover: {
// size: 7
// }
// },
xaxis: {
type: "datetime",
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
title: {
text: 'Views',
},
tickAmount: 4,
min: 0,
labels: {
// offsetX: -6,
},
tooltip: {
enabled: true
}
},
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
tooltip: {
x: {
format: "dd MMM yyyy"
},
},
fill: {
type: 'solid',
opacity: [0.4,0.25],
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
};
var chart = new ApexCharts(document.querySelector("#apexArea"), options);
chart.render();
function generateDayWiseTimeSeries(s, count) {
var values = [
[4,3,10,9,29,19,25,9,12,7,19,5,13,9,17,2,7,5],
[2,3,8,7,22,16,23,7,11,5,12,5,10,4,15,2,6,2]
];
var i = 0;
var series = [];
var x = new Date("11 Nov 2012").getTime();
while (i < count) {
series.push([x, values[s][i]]);
x += 86400000;
i++;
}
return series;
}
}
// Apex Area chart end
// Apex Mixed chart start
if ($('#apexMixed').length) {
var options = {
chart: {
height: 300,
type: 'line',
stacked: false,
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.danger, colors.info],
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
stroke: {
width: [0, 3],
curve: 'smooth'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Team A',
type: 'column',
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
}, {
name: 'Team B',
type: 'area',
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
}],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
fill: {
opacity: [.75,0.25],
},
labels: ['01/01/2003', '02/01/2003','03/01/2003','04/01/2003','05/01/2003','06/01/2003','07/01/2003','08/01/2003','09/01/2003','10/01/2003','11/01/2003'],
markers: {
size: 0
},
xaxis: {
type:'datetime',
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
title: {
text: 'Points',
},
},
tooltip: {
shared: true,
intersect: false,
y: [{
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(0) + " points";
}
return y;
}
}, {
formatter: function (y) {
if(typeof y !== "undefined") {
return y.toFixed(2) + " $";
}
return y;
}
}]
}
}
var chart = new ApexCharts(
document.querySelector("#apexMixed"),
options
);
chart.render();
}
// Apex Mixed chart end
// Apex Donut chart start
if ($('#apexDonut').length) {
var options = {
chart: {
height: 300,
type: "donut",
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
stroke: {
colors: ['rgba(0,0,0,0)']
},
colors: [colors.primary,colors.warning,colors.danger, colors.info],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
dataLabels: {
enabled: false
},
series: [44, 55, 13, 33]
};
var chart = new ApexCharts(document.querySelector("#apexDonut"), options);
chart.render();
}
// Apex Donut chart start
// Apex Pie chart end
if ($('#apexPie').length) {
var options = {
chart: {
height: 300,
type: "pie",
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary,colors.warning,colors.danger, colors.info],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
colors: ['rgba(0,0,0,0)']
},
dataLabels: {
enabled: false
},
series: [44, 55, 13, 33]
};
var chart = new ApexCharts(document.querySelector("#apexPie"), options);
chart.render();
}
// Apex Pie chart end
// Apex Heat chart start
if ($('#apexHeatMap').length) {
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = 'w' + (i + 1).toString();
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
var options = {
chart: {
height: 300,
type: 'heatmap',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
dataLabels: {
enabled: false
},
colors: [colors.info],
stroke: {
colors: [colors.cardBg]
},
series: [{
name: 'Metric1',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric2',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric3',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric4',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric5',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric6',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric7',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric8',
data: generateData(18, {
min: 0,
max: 90
})
},
{
name: 'Metric9',
data: generateData(18, {
min: 0,
max: 90
})
}
],
xaxis: {
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
title: {
text: 'HeatMap Chart (Single color)',
align: 'center',
style: {
fontWeight: 'normal',
},
},
plotOptions: {
heatmap: {
radius: 0,
}
},
}
var chart = new ApexCharts(document.querySelector("#apexHeatMap"), options);
chart.render();
}
// Apex Heat chart end
// Apex Radar chart start
if ($('#apexRadar').length) {
var options = {
chart: {
height: 300,
type: 'radar',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
grid: {
padding: {
bottom: -6
}
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
series: [{
name: 'Series 1',
data: [80, 50, 30, 40, 100, 20],
}, {
name: 'Series 2',
data: [20, 30, 40, 80, 20, 80],
}, {
name: 'Series 3',
data: [44, 76, 78, 13, 43, 10],
}],
labels: ['2011', '2012', '2013', '2014', '2015', '2016'],
colors: [colors.primary, colors.warning, colors.danger],
stroke: {
width: 0,
},
fill: {
opacity: 0.75
},
xaxis: {
categories: ['April', 'May', 'June', 'July', 'August', 'September'],
labels: {
show: true,
style: {
colors: [colors.secondary, colors.secondary, colors.secondary, colors.secondary, colors.secondary, colors.secondary],
fontSize: "14px",
fontFamily: fontFamily
}
}
},
yaxis: {
labels: {
show: true,
style: {
colors: colors.bodyColor,
fontSize: "11px",
fontFamily: fontFamily
}
}
},
markers: {
size: 0
},
plotOptions: {
radar: {
polygons: {
strokeColors: colors.gridBorder,
strokeWidth: 1,
connectorColors: colors.gridBorder,
fill: {
colors: ['transparent']
}
}
}
}
}
var chart = new ApexCharts(document.querySelector("#apexRadar"), options );
chart.render();
}
// Apex Radar chart end
// Apex Scatter chart start
if ($('#apexScatter').length) {
var options = {
chart: {
height: 300,
type: 'scatter',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary, colors.warning, colors.danger],
grid: {
borderColor: colors.gridBorder,
padding: {
bottom: -4
},
xaxis: {
lines: {
show: true
}
}
},
markers: {
strokeColor: colors.cardBg,
hover: {
strokeColor: colors.cardBg
}
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
series: [{
name: "Sample A",
data: [
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
},{
name: "Sample B",
data: [
[36.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [12.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
},{
name: "Sample C",
data: [
[21.7, 3], [23.6, 3.5], [24.6, 3], [29.9, 3], [21.7, 20], [23, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [22.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [29.6, 6], [31.6, 8], [21.6, 5], [20.9, 4], [22.4, 0], [32.6, 10.3], [29.7, 20.8], [24.5, 0.8], [21.4, 0], [21.7, 6.9], [28.6, 7.7], [15.4, 0], [18.1, 0], [33.4, 0], [16.4, 0]]
}],
xaxis: {
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
tickAmount: 10,
labels: {
formatter: function(val) {
return parseFloat(val).toFixed(1)
}
}
},
yaxis: {
tickAmount: 7
}
}
var chart = new ApexCharts(
document.querySelector("#apexScatter"),
options
);
chart.render();
}
// Apex Scatter chart end
// Apex Radialbar chart start
if ($('#apexRadialBar').length) {
var options = {
chart: {
height: 300,
type: "radialBar",
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary, colors.warning, colors.danger, colors.info],
fill: {
},
grid: {
padding: {
top: 10
}
},
plotOptions: {
radialBar: {
dataLabels: {
total: {
show: true,
label: 'TOTAL',
fontSize: '14px',
fontFamily: fontFamily,
}
},
track: {
background: colors.gridBorder,
strokeWidth: '100%',
opacity: 1,
margin: 5,
},
}
},
series: [44, 55, 67, 83],
labels: ["Apples", "Oranges", "Bananas", "Berries"],
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
};
var chart = new ApexCharts(document.querySelector("#apexRadialBar"), options);
chart.render();
var chartAreaBounds = chart.w.globals.dom.baseEl.querySelector('.apexcharts-inner').getBoundingClientRect();
}
// Apex Radialbar chart end
});
public/assets/js/bootstrap-maxlength.js
Vendored
+35
View File
@@ -0,0 +1,35 @@
// npm package: bootstrap-maxlength
// github link: https://github.com/mimo84/bootstrap-maxlength
$(function() {
'use strict';
$('#defaultconfig').maxlength({
warningClass: "badge mt-1 bg-success",
limitReachedClass: "badge mt-1 bg-danger"
});
$('#defaultconfig-2').maxlength({
alwaysShow: true,
threshold: 20,
warningClass: "badge mt-1 bg-success",
limitReachedClass: "badge mt-1 bg-danger"
});
$('#defaultconfig-3').maxlength({
alwaysShow: true,
threshold: 10,
warningClass: "badge mt-1 bg-success",
limitReachedClass: "badge mt-1 bg-danger",
separator: ' of ',
preText: 'You have ',
postText: ' chars remaining.',
validate: true
});
$('#maxlength-textarea').maxlength({
alwaysShow: true,
warningClass: "badge mt-1 bg-success",
limitReachedClass: "badge mt-1 bg-danger"
});
});
public/assets/js/carousel-rtl.js
+106
View File
@@ -0,0 +1,106 @@
// npm package: owl.carousel
// github link: https://github.com/OwlCarousel2/OwlCarousel2
$(function() {
'use strict';
if($('.owl-basic').length) {
$('.owl-basic').owlCarousel({
loop:true,
margin:10,
rtl: true,
nav:false,
responsive:{
0:{
items:2
},
600:{
items:3
},
1000:{
items:4
}
}
});
}
if($('.owl-auto-play').length) {
$('.owl-auto-play').owlCarousel({
items:4,
loop:true,
margin:10,
rtl: true,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true,
responsive:{
0:{
items:2
},
600:{
items:3
},
1000:{
items:4
}
}
});
}
if($('.owl-fadeout').length) {
$('.owl-fadeout').owlCarousel({
animateOut: 'fadeOut',
items:1,
margin:30,
rtl: true,
stagePadding:30,
smartSpeed:450
});
}
if($('.owl-animate-css').length) {
$('.owl-animate-css').owlCarousel({
animateOut: 'animate__animated animate__slideOutDown',
animateIn: 'animate__animated animate__flipInX',
items:1,
rtl: true,
margin:30,
stagePadding:30,
smartSpeed:450
});
}
if($('.owl-mouse-wheel').length) {
var owl = $('.owl-mouse-wheel');
owl.owlCarousel({
loop:true,
nav:false,
rtl: true,
margin:10,
responsive:{
0:{
items:2
},
600:{
items:3
},
960:{
items:3
},
1200:{
items:4
}
}
});
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
}
});
public/assets/js/carousel.js
+101
View File
@@ -0,0 +1,101 @@
// npm package: owl.carousel
// github link: https://github.com/OwlCarousel2/OwlCarousel2
$(function() {
'use strict';
if($('.owl-basic').length) {
$('.owl-basic').owlCarousel({
loop:true,
margin:10,
nav:false,
responsive:{
0:{
items:2
},
600:{
items:3
},
1000:{
items:4
}
}
});
}
if($('.owl-auto-play').length) {
$('.owl-auto-play').owlCarousel({
items:4,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true,
responsive:{
0:{
items:2
},
600:{
items:3
},
1000:{
items:4
}
}
});
}
if($('.owl-fadeout').length) {
$('.owl-fadeout').owlCarousel({
animateOut: 'fadeOut',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450
});
}
if($('.owl-animate-css').length) {
$('.owl-animate-css').owlCarousel({
animateOut: 'animate__animated animate__slideOutDown',
animateIn: 'animate__animated animate__flipInX',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450
});
}
if($('.owl-mouse-wheel').length) {
var owl = $('.owl-mouse-wheel');
owl.owlCarousel({
loop:true,
nav:false,
margin:10,
responsive:{
0:{
items:2
},
600:{
items:3
},
960:{
items:3
},
1200:{
items:4
}
}
});
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
}
});
public/assets/js/chartjs-dark.js
+711
View File
@@ -0,0 +1,711 @@
// npm package: chart.js
// github link: https://github.com/chartjs/Chart.js
$(function() {
'use strict';
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#b8c3d9",
cardBg : "#0c1427"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
// Bar chart
if($('#chartjsBar').length) {
new Chart($("#chartjsBar"), {
type: 'bar',
data: {
labels: [ "China", "America", "India", "Germany", "Oman"],
datasets: [
{
label: "Population",
backgroundColor: [colors.primary, colors.danger, colors.warning, colors.success, colors.info],
data: [2478,5267,734,2084,1433],
}
]
},
options: {
plugins: {
legend: { display: false },
},
scales: {
x: {
display: true,
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
}
}
}
});
}
// Line Chart
if($('#chartjsLine').length) {
new Chart($('#chartjsLine'), {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: colors.info,
backgroundColor: "transparent",
fill: true,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}, {
data: [282,350,411,502,635,809,947,1402,3700,5267],
label: "Asia",
borderColor: colors.danger,
backgroundColor: "transparent",
fill: true,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}
]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
scales: {
x: {
display: true,
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
}
}
}
});
}
// Doughnut Chart
if($('#chartjsDoughnut').length) {
new Chart($('#chartjsDoughnut'), {
type: 'doughnut',
data: {
labels: ["Africa", "Asia", "Europe"],
datasets: [
{
label: "Population (millions)",
backgroundColor: [colors.primary, colors.danger, colors.info],
borderColor: colors.cardBg,
data: [2478,4267,1334],
}
]
},
options: {
aspectRatio: 2,
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
}
}
});
}
// Area Chart
if($('#chartjsArea').length) {
new Chart($('#chartjsArea'), {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: colors.danger,
backgroundColor: 'rgba(255,51,102,.3)',
fill: true,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}, {
data: [282,350,411,502,635,809,947,1402,3700,5267],
label: "Asia",
borderColor: colors.info,
backgroundColor: 'rgba(102,209,209,.3)',
fill: true,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}
]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
scales: {
x: {
display: true,
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
}
}
}
});
}
// Pie Chart
if($('#chartjsPie').length) {
new Chart($('#chartjsPie'), {
type: 'pie',
data: {
labels: ["Africa", "Asia", "Europe"],
datasets: [{
label: "Population (millions)",
backgroundColor: [colors.primary, colors.danger, colors.info],
borderColor: colors.cardBg,
data: [2478,4267,1334]
}]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
aspectRatio: 2,
}
});
}
// Bubble Chart
if($('#chartjsBubble').length) {
new Chart($('#chartjsBubble'), {
type: 'bubble',
data: {
labels: "Africa",
datasets: [
{
label: ["China"],
backgroundColor: 'rgba(102,209,209,.3)',
borderColor: colors.info,
data: [{
x: 21269017,
y: 5.245,
r: 15
}]
}, {
label: ["Denmark"],
backgroundColor: "rgba(255,51,102,.3)",
borderColor: colors.danger,
data: [{
x: 258702,
y: 7.526,
r: 10
}]
}, {
label: ["Germany"],
backgroundColor: "rgba(101,113,255,.3)",
borderColor: colors.primary,
data: [{
x: 3979083,
y: 6.994,
r: 15
}]
}, {
label: ["Japan"],
backgroundColor: "rgba(251,188,6,.3)",
borderColor: colors.warning,
data: [{
x: 4931877,
y: 5.921,
r: 15
}]
}
]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
scales: {
x: {
display: true,
title: {
display: true,
text: "GDP (PPP)"
},
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
display: true,
title: {
display: true,
text: "Happiness"
},
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
}
}
});
}
// Radar Chart
if($('#chartjsRadar').length) {
new Chart($('#chartjsRadar'), {
type: 'radar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "1950",
fill: true,
backgroundColor: "rgba(255,51,102,.3)",
borderColor: colors.danger,
pointBorderColor: colors.danger,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
data: [8.77,55.61,21.69,6.62,6.82]
}, {
label: "2050",
fill: true,
backgroundColor: "rgba(102,209,209,.3)",
borderColor: colors.info,
pointBorderColor: colors.info,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
data: [25.48,54.16,7.61,8.06,4.45]
}
]
},
options: {
aspectRatio: 2,
scales: {
r: {
angleLines: {
display: true,
color: colors.gridBorder,
},
grid: {
color: colors.gridBorder
},
suggestedMin: 0,
suggestedMax: 60,
ticks: {
backdropColor: colors.cardBg,
color: colors.bodyColor,
font: {
size: 11,
family: fontFamily
}
},
pointLabels: {
color: colors.bodyColor,
font: {
color: colors.bodyColor,
family: fontFamily,
size: '13px'
}
}
}
},
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
}
});
}
// Polar Area Chart
if($('#chartjsPolarArea').length) {
new Chart($('#chartjsPolarArea'), {
type: 'polarArea',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: [colors.primary, colors.danger, colors.success, colors.info],
borderColor: colors.cardBg,
data: [3578,5000,1034,2034]
}
]
},
options: {
aspectRatio: 2,
scales: {
r: {
angleLines: {
display: true,
color: colors.gridBorder,
},
grid: {
color: colors.gridBorder
},
suggestedMin: 1000,
suggestedMax: 5500,
ticks: {
backdropColor: colors.cardBg,
color: colors.bodyColor,
font: {
size: 11,
family: fontFamily
}
},
pointLabels: {
color: colors.bodyColor,
font: {
color: colors.bodyColor,
family: fontFamily,
size: '13px'
}
}
}
},
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
}
});
}
// Grouped Bar Chart
if($('#chartjsGroupedBar').length) {
new Chart($('#chartjsGroupedBar'), {
type: 'bar',
data: {
labels: ["1900", "1950", "1999", "2050"],
datasets: [
{
label: "Africa",
backgroundColor: colors.danger,
data: [133,221,783,2478]
}, {
label: "Europe",
backgroundColor: colors.primary,
data: [408,547,675,734]
}
]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
scales: {
x: {
display: true,
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
}
}
}
});
}
// Mixed Line Bar Chart
if($('#chartjsMixedBar').length) {
new Chart($('#chartjsMixedBar'), {
type: 'bar',
data: {
labels: ["1900", "1950", "1999", "2050"],
datasets: [{
label: "Europe",
type: "line",
borderColor: colors.danger,
backgroundColor: "transparent",
data: [408,547,675,734],
fill: false,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}, {
label: "Africa",
type: "line",
borderColor: colors.primary,
backgroundColor: "transparent",
data: [133,221,783,2478],
fill: false,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}, {
label: "Europe",
type: "bar",
backgroundColor: colors.danger,
data: [408,547,675,734],
}, {
label: "Africa",
type: "bar",
backgroundColor: colors.primary,
data: [133,221,783,2478]
}
]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
scales: {
x: {
display: true,
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
}
}
}
});
}
});
public/assets/js/chartjs-light.js
+711
View File
@@ -0,0 +1,711 @@
// npm package: chart.js
// github link: https://github.com/chartjs/Chart.js
$(function() {
'use strict';
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#000",
cardBg : "#fff"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
// Bar chart
if($('#chartjsBar').length) {
new Chart($("#chartjsBar"), {
type: 'bar',
data: {
labels: [ "China", "America", "India", "Germany", "Oman"],
datasets: [
{
label: "Population",
backgroundColor: [colors.primary, colors.danger, colors.warning, colors.success, colors.info],
data: [2478,5267,734,2084,1433],
}
]
},
options: {
plugins: {
legend: { display: false },
},
scales: {
x: {
display: true,
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
}
}
}
});
}
// Line Chart
if($('#chartjsLine').length) {
new Chart($('#chartjsLine'), {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: colors.info,
backgroundColor: "transparent",
fill: true,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}, {
data: [282,350,411,502,635,809,947,1402,3700,5267],
label: "Asia",
borderColor: colors.danger,
backgroundColor: "transparent",
fill: true,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}
]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
scales: {
x: {
display: true,
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
}
}
}
});
}
// Doughnut Chart
if($('#chartjsDoughnut').length) {
new Chart($('#chartjsDoughnut'), {
type: 'doughnut',
data: {
labels: ["Africa", "Asia", "Europe"],
datasets: [
{
label: "Population (millions)",
backgroundColor: [colors.primary, colors.danger, colors.info],
borderColor: colors.cardBg,
data: [2478,4267,1334],
}
]
},
options: {
aspectRatio: 2,
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
}
}
});
}
// Area Chart
if($('#chartjsArea').length) {
new Chart($('#chartjsArea'), {
type: 'line',
data: {
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
datasets: [{
data: [86,114,106,106,107,111,133,221,783,2478],
label: "Africa",
borderColor: colors.danger,
backgroundColor: 'rgba(255,51,102,.3)',
fill: true,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}, {
data: [282,350,411,502,635,809,947,1402,3700,5267],
label: "Asia",
borderColor: colors.info,
backgroundColor: 'rgba(102,209,209,.3)',
fill: true,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}
]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
scales: {
x: {
display: true,
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
}
}
}
});
}
// Pie Chart
if($('#chartjsPie').length) {
new Chart($('#chartjsPie'), {
type: 'pie',
data: {
labels: ["Africa", "Asia", "Europe"],
datasets: [{
label: "Population (millions)",
backgroundColor: [colors.primary, colors.danger, colors.info],
borderColor: colors.cardBg,
data: [2478,4267,1334]
}]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
aspectRatio: 2,
}
});
}
// Bubble Chart
if($('#chartjsBubble').length) {
new Chart($('#chartjsBubble'), {
type: 'bubble',
data: {
labels: "Africa",
datasets: [
{
label: ["China"],
backgroundColor: 'rgba(102,209,209,.3)',
borderColor: colors.info,
data: [{
x: 21269017,
y: 5.245,
r: 15
}]
}, {
label: ["Denmark"],
backgroundColor: "rgba(255,51,102,.3)",
borderColor: colors.danger,
data: [{
x: 258702,
y: 7.526,
r: 10
}]
}, {
label: ["Germany"],
backgroundColor: "rgba(101,113,255,.3)",
borderColor: colors.primary,
data: [{
x: 3979083,
y: 6.994,
r: 15
}]
}, {
label: ["Japan"],
backgroundColor: "rgba(251,188,6,.3)",
borderColor: colors.warning,
data: [{
x: 4931877,
y: 5.921,
r: 15
}]
}
]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
scales: {
x: {
display: true,
title: {
display: true,
text: "GDP (PPP)"
},
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
display: true,
title: {
display: true,
text: "Happiness"
},
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
}
}
});
}
// Radar Chart
if($('#chartjsRadar').length) {
new Chart($('#chartjsRadar'), {
type: 'radar',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "1950",
fill: true,
backgroundColor: "rgba(255,51,102,.3)",
borderColor: colors.danger,
pointBorderColor: colors.danger,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
data: [8.77,55.61,21.69,6.62,6.82]
}, {
label: "2050",
fill: true,
backgroundColor: "rgba(102,209,209,.3)",
borderColor: colors.info,
pointBorderColor: colors.info,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
data: [25.48,54.16,7.61,8.06,4.45]
}
]
},
options: {
aspectRatio: 2,
scales: {
r: {
angleLines: {
display: true,
color: colors.gridBorder,
},
grid: {
color: colors.gridBorder
},
suggestedMin: 0,
suggestedMax: 60,
ticks: {
backdropColor: colors.cardBg,
color: colors.bodyColor,
font: {
size: 11,
family: fontFamily
}
},
pointLabels: {
color: colors.bodyColor,
font: {
color: colors.bodyColor,
family: fontFamily,
size: '13px'
}
}
}
},
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
}
});
}
// Polar Area Chart
if($('#chartjsPolarArea').length) {
new Chart($('#chartjsPolarArea'), {
type: 'polarArea',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America"],
datasets: [
{
label: "Population (millions)",
backgroundColor: [colors.primary, colors.danger, colors.success, colors.info],
borderColor: colors.cardBg,
data: [3578,5000,1034,2034]
}
]
},
options: {
aspectRatio: 2,
scales: {
r: {
angleLines: {
display: true,
color: colors.gridBorder,
},
grid: {
color: colors.gridBorder
},
suggestedMin: 1000,
suggestedMax: 5500,
ticks: {
backdropColor: colors.cardBg,
color: colors.bodyColor,
font: {
size: 11,
family: fontFamily
}
},
pointLabels: {
color: colors.bodyColor,
font: {
color: colors.bodyColor,
family: fontFamily,
size: '13px'
}
}
}
},
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
}
});
}
// Grouped Bar Chart
if($('#chartjsGroupedBar').length) {
new Chart($('#chartjsGroupedBar'), {
type: 'bar',
data: {
labels: ["1900", "1950", "1999", "2050"],
datasets: [
{
label: "Africa",
backgroundColor: colors.danger,
data: [133,221,783,2478]
}, {
label: "Europe",
backgroundColor: colors.primary,
data: [408,547,675,734]
}
]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
scales: {
x: {
display: true,
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
}
}
}
});
}
// Mixed Line Bar Chart
if($('#chartjsMixedBar').length) {
new Chart($('#chartjsMixedBar'), {
type: 'bar',
data: {
labels: ["1900", "1950", "1999", "2050"],
datasets: [{
label: "Europe",
type: "line",
borderColor: colors.danger,
backgroundColor: "transparent",
data: [408,547,675,734],
fill: false,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}, {
label: "Africa",
type: "line",
borderColor: colors.primary,
backgroundColor: "transparent",
data: [133,221,783,2478],
fill: false,
pointBackgroundColor: colors.cardBg,
pointBorderWidth: 2,
pointHoverBorderWidth: 3,
tension: .3
}, {
label: "Europe",
type: "bar",
backgroundColor: colors.danger,
data: [408,547,675,734],
}, {
label: "Africa",
type: "bar",
backgroundColor: colors.primary,
data: [133,221,783,2478]
}
]
},
options: {
plugins: {
legend: {
display: true,
labels: {
color: colors.bodyColor,
font: {
size: '13px',
family: fontFamily
}
}
},
},
scales: {
x: {
display: true,
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
},
y: {
grid: {
display: true,
color: colors.gridBorder,
borderColor: colors.gridBorder,
},
ticks: {
color: colors.bodyColor,
font: {
size: 12
}
}
}
}
}
});
}
});
public/assets/js/chat.js
+31
View File
@@ -0,0 +1,31 @@
$(function() {
'use strict';
// Applying perfect-scrollbar
if ($('.chat-aside .tab-content #chats').length) {
const sidebarBodyScroll = new PerfectScrollbar('.chat-aside .tab-content #chats');
}
if ($('.chat-aside .tab-content #calls').length) {
const sidebarBodyScroll = new PerfectScrollbar('.chat-aside .tab-content #calls');
}
if ($('.chat-aside .tab-content #contacts').length) {
const sidebarBodyScroll = new PerfectScrollbar('.chat-aside .tab-content #contacts');
}
if ($('.chat-content .chat-body').length) {
const sidebarBodyScroll = new PerfectScrollbar('.chat-content .chat-body');
}
$( '.chat-list .chat-item' ).each(function(index) {
$(this).on('click', function(){
$('.chat-content').toggleClass('show');
});
});
$('#backToChatList').on('click', function(index) {
$('.chat-content').toggleClass('show');
});
});
public/assets/js/cropper.js
+55
View File
@@ -0,0 +1,55 @@
// npm package: cropperjs
// github link: https://github.com/fengyuanchen/cropperjs
$(function() {
'use strict';
var croppingImage = document.querySelector('#croppingImage'),
img_w = document.querySelector('.img-w'),
cropBtn = document.querySelector('.crop'),
croppedImg = document.querySelector('.cropped-img'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#cropperImageUpload'),
cropper = '';
cropper = new Cropper(croppingImage, {
zoomable: false
});
// on change show image with crop options
upload.addEventListener('change', function (e) {
if (e.target.files.length) {
console.log(e.target.files[0]);
var fileType = e.target.files[0].type;
if(fileType === 'image/gif' || fileType === 'image/jpeg' || fileType === 'image/png') {
cropper.destroy();
// start file reader
const reader = new FileReader();
reader.onload = function (e) {
if(e.target.result){
croppingImage.src = e.target.result;
cropper = new Cropper(croppingImage, {
zoomable: false
});
}
};
reader.readAsDataURL(e.target.files[0]);
} else {
alert("Selected file type is not supported. Please try again")
}
}
});
// crop on click
cropBtn.addEventListener('click',function(e) {
e.preventDefault();
// get result to data uri
let imgSrc = cropper.getCroppedCanvas({
width: img_w.value // input value
}).toDataURL();
croppedImg.src = imgSrc;
dwn.setAttribute('href', imgSrc);
dwn.download = 'imagename.png';
});
});
public/assets/js/dashboard-dark.js
+747
View File
@@ -0,0 +1,747 @@
$(function() {
'use strict'
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#b8c3d9",
cardBg : "#0c1427"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
var revenueChartData = [
49.33,
48.79,
50.61,
53.31,
54.78,
53.84,
54.68,
56.74,
56.99,
56.14,
56.56,
60.35,
58.74,
61.44,
61.11,
58.57,
54.72,
52.07,
51.09,
47.48,
48.57,
48.99,
53.58,
50.28,
46.24,
48.61,
51.75,
51.34,
50.21,
54.65,
52.44,
53.06,
57.07,
52.97,
48.72,
52.69,
53.59,
58.52,
55.10,
58.05,
61.35,
57.74,
60.27,
61.00,
57.78,
56.80,
58.90,
62.45,
58.75,
58.40,
56.74,
52.76,
52.30,
50.56,
55.40,
50.49,
52.49,
48.79,
47.46,
43.31,
38.96,
34.73,
31.03,
32.63,
36.89,
35.89,
32.74,
33.20,
30.82,
28.64,
28.44,
27.73,
27.75,
25.96,
24.38,
21.95,
22.08,
23.54,
27.30,
30.27,
27.25,
29.92,
25.14,
23.09,
23.79,
23.46,
27.99,
23.21,
23.91,
19.21,
15.13,
15.08,
11.00,
9.20,
7.47,
11.64,
15.76,
13.99,
12.59,
13.53,
15.01,
13.95,
13.23,
18.10,
20.63,
21.06,
25.37,
25.32,
20.94,
18.75,
15.38,
14.56,
17.94,
15.96,
16.35,
14.16,
12.10,
14.84,
17.24,
17.79,
14.03,
18.65,
18.46,
22.68,
25.08,
28.18,
28.03,
24.11,
24.28,
28.23,
26.24,
29.33,
26.07,
23.92,
28.82,
25.14,
21.79,
23.05,
20.71,
29.72,
30.21,
32.56,
31.46,
33.69,
30.05,
34.20,
36.93,
35.50,
34.78,
36.97
];
var revenueChartCategories = [
"Jan 01 2022", "Jan 02 2022", "jan 03 2022", "Jan 04 2022", "Jan 05 2022", "Jan 06 2022", "Jan 07 2022", "Jan 08 2022", "Jan 09 2022", "Jan 10 2022", "Jan 11 2022", "Jan 12 2022", "Jan 13 2022", "Jan 14 2022", "Jan 15 2022", "Jan 16 2022", "Jan 17 2022", "Jan 18 2022", "Jan 19 2022", "Jan 20 2022","Jan 21 2022", "Jan 22 2022", "Jan 23 2022", "Jan 24 2022", "Jan 25 2022", "Jan 26 2022", "Jan 27 2022", "Jan 28 2022", "Jan 29 2022", "Jan 30 2022", "Jan 31 2022",
"Feb 01 2022", "Feb 02 2022", "Feb 03 2022", "Feb 04 2022", "Feb 05 2022", "Feb 06 2022", "Feb 07 2022", "Feb 08 2022", "Feb 09 2022", "Feb 10 2022", "Feb 11 2022", "Feb 12 2022", "Feb 13 2022", "Feb 14 2022", "Feb 15 2022", "Feb 16 2022", "Feb 17 2022", "Feb 18 2022", "Feb 19 2022", "Feb 20 2022","Feb 21 2022", "Feb 22 2022", "Feb 23 2022", "Feb 24 2022", "Feb 25 2022", "Feb 26 2022", "Feb 27 2022", "Feb 28 2022",
"Mar 01 2022", "Mar 02 2022", "Mar 03 2022", "Mar 04 2022", "Mar 05 2022", "Mar 06 2022", "Mar 07 2022", "Mar 08 2022", "Mar 09 2022", "Mar 10 2022", "Mar 11 2022", "Mar 12 2022", "Mar 13 2022", "Mar 14 2022", "Mar 15 2022", "Mar 16 2022", "Mar 17 2022", "Mar 18 2022", "Mar 19 2022", "Mar 20 2022","Mar 21 2022", "Mar 22 2022", "Mar 23 2022", "Mar 24 2022", "Mar 25 2022", "Mar 26 2022", "Mar 27 2022", "Mar 28 2022", "Mar 29 2022", "Mar 30 2022", "Mar 31 2022",
"Apr 01 2022", "Apr 02 2022", "Apr 03 2022", "Apr 04 2022", "Apr 05 2022", "Apr 06 2022", "Apr 07 2022", "Apr 08 2022", "Apr 09 2022", "Apr 10 2022", "Apr 11 2022", "Apr 12 2022", "Apr 13 2022", "Apr 14 2022", "Apr 15 2022", "Apr 16 2022", "Apr 17 2022", "Apr 18 2022", "Apr 19 2022", "Apr 20 2022","Apr 21 2022", "Apr 22 2022", "Apr 23 2022", "Apr 24 2022", "Apr 25 2022", "Apr 26 2022", "Apr 27 2022", "Apr 28 2022", "Apr 29 2022", "Apr 30 2022",
"May 01 2022", "May 02 2022", "May 03 2022", "May 04 2022", "May 05 2022", "May 06 2022", "May 07 2022", "May 08 2022", "May 09 2022", "May 10 2022", "May 11 2022", "May 12 2022", "May 13 2022", "May 14 2022", "May 15 2022", "May 16 2022", "May 17 2022", "May 18 2022", "May 19 2022", "May 20 2022","May 21 2022", "May 22 2022", "May 23 2022", "May 24 2022", "May 25 2022", "May 26 2022", "May 27 2022", "May 28 2022", "May 29 2022", "May 30 2022",
]
// Date Picker
if($('#dashboardDate').length) {
flatpickr("#dashboardDate", {
wrap: true,
dateFormat: "d-M-Y",
defaultDate: "today",
});
}
// Date Picker - END
// New Customers Chart
if($('#customersChart').length) {
var options1 = {
chart: {
type: "line",
height: 60,
sparkline: {
enabled: !0
}
},
series: [{
name: '',
data: [3844, 3855, 3841, 3867, 3822, 3843, 3821, 3841, 3856, 3827, 3843]
}],
xaxis: {
type: 'datetime',
categories: ["Jan 01 2022", "Jan 02 2022", "Jan 03 2022", "Jan 04 2022", "Jan 05 2022", "Jan 06 2022", "Jan 07 2022", "Jan 08 2022", "Jan 09 2022", "Jan 10 2022", "Jan 11 2022",],
},
stroke: {
width: 2,
curve: "smooth"
},
markers: {
size: 0
},
colors: [colors.primary],
};
new ApexCharts(document.querySelector("#customersChart"),options1).render();
}
// New Customers Chart - END
// Orders Chart
if($('#ordersChart').length) {
var options2 = {
chart: {
type: "bar",
height: 60,
sparkline: {
enabled: !0
}
},
plotOptions: {
bar: {
borderRadius: 2,
columnWidth: "60%"
}
},
colors: [colors.primary],
series: [{
name: '',
data: [36, 77, 52, 90, 74, 35, 55, 23, 47, 10, 63]
}],
xaxis: {
type: 'datetime',
categories: ["Jan 01 2022", "Jan 02 2022", "Jan 03 2022", "Jan 04 2022", "Jan 05 2022", "Jan 06 2022", "Jan 07 2022", "Jan 08 2022", "Jan 09 2022", "Jan 10 2022", "Jan 11 2022",],
},
};
new ApexCharts(document.querySelector("#ordersChart"),options2).render();
}
// Orders Chart - END
// Growth Chart
if($('#growthChart').length) {
var options3 = {
chart: {
type: "line",
height: 60,
sparkline: {
enabled: !0
}
},
series: [{
name: '',
data: [41, 45, 44, 46, 52, 54, 43, 74, 82, 82, 89]
}],
xaxis: {
type: 'datetime',
categories: ["Jan 01 2022", "Jan 02 2022", "Jan 03 2022", "Jan 04 2022", "Jan 05 2022", "Jan 06 2022", "Jan 07 2022", "Jan 08 2022", "Jan 09 2022", "Jan 10 2022", "Jan 11 2022",],
},
stroke: {
width: 2,
curve: "smooth"
},
markers: {
size: 0
},
colors: [colors.primary],
};
new ApexCharts(document.querySelector("#growthChart"),options3).render();
}
// Growth Chart - END
// Revenue Chart
if ($('#revenueChart').length) {
var lineChartOptions = {
chart: {
type: "line",
height: '400',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary, colors.danger, colors.warning],
grid: {
padding: {
bottom: -4,
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [
{
name: "Revenue",
data: revenueChartData
},
],
xaxis: {
type: "datetime",
categories: revenueChartCategories,
lines: {
show: true
},
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
crosshairs: {
stroke: {
color: colors.secondary,
},
},
},
yaxis: {
title: {
text: 'Revenue ( $1000 x )',
style:{
size: 9,
color: colors.muted
}
},
tickAmount: 4,
tooltip: {
enabled: true
},
crosshairs: {
stroke: {
color: colors.secondary,
},
},
},
markers: {
size: 0,
},
stroke: {
width: 2,
curve: "straight",
},
};
var apexLineChart = new ApexCharts(document.querySelector("#revenueChart"), lineChartOptions);
apexLineChart.render();
}
// Revenue Chart - END
// Revenue Chart - RTL
if ($('#revenueChartRTL').length) {
var lineChartOptions = {
chart: {
type: "line",
height: '400',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary, colors.danger, colors.warning],
grid: {
padding: {
bottom: -4,
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [
{
name: "Revenue",
data: revenueChartData
},
],
xaxis: {
type: "datetime",
categories: revenueChartCategories,
lines: {
show: true
},
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
crosshairs: {
stroke: {
color: colors.secondary,
},
},
},
yaxis: {
opposite: true,
title: {
text: 'Revenue ( $1000 x )',
offsetX: -135,
style:{
size: 9,
color: colors.muted
}
},
labels: {
align: 'left',
offsetX: -20,
},
tickAmount: 4,
tooltip: {
enabled: true
},
crosshairs: {
stroke: {
color: colors.secondary,
},
},
},
markers: {
size: 0,
},
stroke: {
width: 2,
curve: "straight",
},
};
var apexLineChart = new ApexCharts(document.querySelector("#revenueChartRTL"), lineChartOptions);
apexLineChart.render();
}
// Revenue Chart - RTL - END
// Monthly Sales Chart
if($('#monthlySalesChart').length) {
var options = {
chart: {
type: 'bar',
height: '318',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary],
fill: {
opacity: .9
} ,
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [{
name: 'Sales',
data: [152,109,93,113,126,161,188,143,102,113,116,124]
}],
xaxis: {
type: 'datetime',
categories: ['01/01/2022','02/01/2022','03/01/2022','04/01/2022','05/01/2022','06/01/2022','07/01/2022', '08/01/2022','09/01/2022','10/01/2022', '11/01/2022', '12/01/2022'],
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
title: {
text: 'Number of Sales',
style:{
size: 9,
color: colors.muted
}
},
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 0
},
dataLabels: {
enabled: true,
style: {
fontSize: '10px',
fontFamily: fontFamily,
},
offsetY: -27
},
plotOptions: {
bar: {
columnWidth: "50%",
borderRadius: 4,
dataLabels: {
position: 'top',
orientation: 'vertical',
}
},
},
}
var apexBarChart = new ApexCharts(document.querySelector("#monthlySalesChart"), options);
apexBarChart.render();
}
// Monthly Sales Chart - END
// Monthly Sales Chart - RTL
if($('#monthlySalesChartRTL').length) {
var options = {
chart: {
type: 'bar',
height: '318',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary],
fill: {
opacity: .9
} ,
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [{
name: 'Sales',
data: [152,109,93,113,126,161,188,143,102,113,116,124]
}],
xaxis: {
type: 'datetime',
categories: ['01/01/2022','02/01/2022','03/01/2022','04/01/2022','05/01/2022','06/01/2022','07/01/2022', '08/01/2022','09/01/2022','10/01/2022', '11/01/2022', '12/01/2022'],
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: 'Number of Sales',
offsetX: -108,
style:{
size: 9,
color: colors.muted
}
},
labels: {
align: 'left',
offsetX: -20,
}
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 0
},
dataLabels: {
enabled: true,
style: {
fontSize: '10px',
fontFamily: fontFamily,
},
offsetY: -27
},
plotOptions: {
bar: {
columnWidth: "50%",
borderRadius: 4,
dataLabels: {
position: 'top',
orientation: 'vertical',
}
},
},
}
var apexBarChart = new ApexCharts(document.querySelector("#monthlySalesChartRTL"), options);
apexBarChart.render();
}
// Monthly Sales Chart - RTL - END
// Cloud Storage Chart
if ($('#storageChart').length) {
var options = {
chart: {
height: 260,
type: "radialBar"
},
series: [67],
colors: [colors.primary],
plotOptions: {
radialBar: {
hollow: {
margin: 15,
size: "70%"
},
track: {
show: true,
background: colors.dark,
strokeWidth: '100%',
opacity: 1,
margin: 5,
},
dataLabels: {
showOn: "always",
name: {
offsetY: -11,
show: true,
color: colors.muted,
fontSize: "13px"
},
value: {
color: colors.bodyColor,
fontSize: "30px",
show: true
}
}
}
},
fill: {
opacity: 1
},
stroke: {
lineCap: "round",
},
labels: ["Storage Used"]
};
var chart = new ApexCharts(document.querySelector("#storageChart"), options);
chart.render();
}
// Cloud Storage Chart - END
});
public/assets/js/dashboard-light.js
+746
View File
@@ -0,0 +1,746 @@
$(function() {
'use strict'
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#000",
cardBg : "#fff"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
var revenueChartData = [
49.33,
48.79,
50.61,
53.31,
54.78,
53.84,
54.68,
56.74,
56.99,
56.14,
56.56,
60.35,
58.74,
61.44,
61.11,
58.57,
54.72,
52.07,
51.09,
47.48,
48.57,
48.99,
53.58,
50.28,
46.24,
48.61,
51.75,
51.34,
50.21,
54.65,
52.44,
53.06,
57.07,
52.97,
48.72,
52.69,
53.59,
58.52,
55.10,
58.05,
61.35,
57.74,
60.27,
61.00,
57.78,
56.80,
58.90,
62.45,
58.75,
58.40,
56.74,
52.76,
52.30,
50.56,
55.40,
50.49,
52.49,
48.79,
47.46,
43.31,
38.96,
34.73,
31.03,
32.63,
36.89,
35.89,
32.74,
33.20,
30.82,
28.64,
28.44,
27.73,
27.75,
25.96,
24.38,
21.95,
22.08,
23.54,
27.30,
30.27,
27.25,
29.92,
25.14,
23.09,
23.79,
23.46,
27.99,
23.21,
23.91,
19.21,
15.13,
15.08,
11.00,
9.20,
7.47,
11.64,
15.76,
13.99,
12.59,
13.53,
15.01,
13.95,
13.23,
18.10,
20.63,
21.06,
25.37,
25.32,
20.94,
18.75,
15.38,
14.56,
17.94,
15.96,
16.35,
14.16,
12.10,
14.84,
17.24,
17.79,
14.03,
18.65,
18.46,
22.68,
25.08,
28.18,
28.03,
24.11,
24.28,
28.23,
26.24,
29.33,
26.07,
23.92,
28.82,
25.14,
21.79,
23.05,
20.71,
29.72,
30.21,
32.56,
31.46,
33.69,
30.05,
34.20,
36.93,
35.50,
34.78,
36.97
];
var revenueChartCategories = [
"Jan 01 2022", "Jan 02 2022", "jan 03 2022", "Jan 04 2022", "Jan 05 2022", "Jan 06 2022", "Jan 07 2022", "Jan 08 2022", "Jan 09 2022", "Jan 10 2022", "Jan 11 2022", "Jan 12 2022", "Jan 13 2022", "Jan 14 2022", "Jan 15 2022", "Jan 16 2022", "Jan 17 2022", "Jan 18 2022", "Jan 19 2022", "Jan 20 2022","Jan 21 2022", "Jan 22 2022", "Jan 23 2022", "Jan 24 2022", "Jan 25 2022", "Jan 26 2022", "Jan 27 2022", "Jan 28 2022", "Jan 29 2022", "Jan 30 2022", "Jan 31 2022",
"Feb 01 2022", "Feb 02 2022", "Feb 03 2022", "Feb 04 2022", "Feb 05 2022", "Feb 06 2022", "Feb 07 2022", "Feb 08 2022", "Feb 09 2022", "Feb 10 2022", "Feb 11 2022", "Feb 12 2022", "Feb 13 2022", "Feb 14 2022", "Feb 15 2022", "Feb 16 2022", "Feb 17 2022", "Feb 18 2022", "Feb 19 2022", "Feb 20 2022","Feb 21 2022", "Feb 22 2022", "Feb 23 2022", "Feb 24 2022", "Feb 25 2022", "Feb 26 2022", "Feb 27 2022", "Feb 28 2022",
"Mar 01 2022", "Mar 02 2022", "Mar 03 2022", "Mar 04 2022", "Mar 05 2022", "Mar 06 2022", "Mar 07 2022", "Mar 08 2022", "Mar 09 2022", "Mar 10 2022", "Mar 11 2022", "Mar 12 2022", "Mar 13 2022", "Mar 14 2022", "Mar 15 2022", "Mar 16 2022", "Mar 17 2022", "Mar 18 2022", "Mar 19 2022", "Mar 20 2022","Mar 21 2022", "Mar 22 2022", "Mar 23 2022", "Mar 24 2022", "Mar 25 2022", "Mar 26 2022", "Mar 27 2022", "Mar 28 2022", "Mar 29 2022", "Mar 30 2022", "Mar 31 2022",
"Apr 01 2022", "Apr 02 2022", "Apr 03 2022", "Apr 04 2022", "Apr 05 2022", "Apr 06 2022", "Apr 07 2022", "Apr 08 2022", "Apr 09 2022", "Apr 10 2022", "Apr 11 2022", "Apr 12 2022", "Apr 13 2022", "Apr 14 2022", "Apr 15 2022", "Apr 16 2022", "Apr 17 2022", "Apr 18 2022", "Apr 19 2022", "Apr 20 2022","Apr 21 2022", "Apr 22 2022", "Apr 23 2022", "Apr 24 2022", "Apr 25 2022", "Apr 26 2022", "Apr 27 2022", "Apr 28 2022", "Apr 29 2022", "Apr 30 2022",
"May 01 2022", "May 02 2022", "May 03 2022", "May 04 2022", "May 05 2022", "May 06 2022", "May 07 2022", "May 08 2022", "May 09 2022", "May 10 2022", "May 11 2022", "May 12 2022", "May 13 2022", "May 14 2022", "May 15 2022", "May 16 2022", "May 17 2022", "May 18 2022", "May 19 2022", "May 20 2022","May 21 2022", "May 22 2022", "May 23 2022", "May 24 2022", "May 25 2022", "May 26 2022", "May 27 2022", "May 28 2022", "May 29 2022", "May 30 2022",
]
// Date Picker
if($('#dashboardDate').length) {
flatpickr("#dashboardDate", {
wrap: true,
dateFormat: "d-M-Y",
defaultDate: "today",
});
}
// Date Picker - END
// New Customers Chart
if($('#customersChart').length) {
var options1 = {
chart: {
type: "line",
height: 60,
sparkline: {
enabled: !0
}
},
series: [{
name: '',
data: [3844, 3855, 3841, 3867, 3822, 3843, 3821, 3841, 3856, 3827, 3843]
}],
xaxis: {
type: 'datetime',
categories: ["Jan 01 2022", "Jan 02 2022", "Jan 03 2022", "Jan 04 2022", "Jan 05 2022", "Jan 06 2022", "Jan 07 2022", "Jan 08 2022", "Jan 09 2022", "Jan 10 2022", "Jan 11 2022",],
},
stroke: {
width: 2,
curve: "smooth"
},
markers: {
size: 0
},
colors: [colors.primary],
};
new ApexCharts(document.querySelector("#customersChart"),options1).render();
}
// New Customers Chart - END
// Orders Chart
if($('#ordersChart').length) {
var options2 = {
chart: {
type: "bar",
height: 60,
sparkline: {
enabled: !0
}
},
plotOptions: {
bar: {
borderRadius: 2,
columnWidth: "60%"
}
},
colors: [colors.primary],
series: [{
name: '',
data: [36, 77, 52, 90, 74, 35, 55, 23, 47, 10, 63]
}],
xaxis: {
type: 'datetime',
categories: ["Jan 01 2022", "Jan 02 2022", "Jan 03 2022", "Jan 04 2022", "Jan 05 2022", "Jan 06 2022", "Jan 07 2022", "Jan 08 2022", "Jan 09 2022", "Jan 10 2022", "Jan 11 2022",],
},
};
new ApexCharts(document.querySelector("#ordersChart"),options2).render();
}
// Orders Chart - END
// Growth Chart
if($('#growthChart').length) {
var options3 = {
chart: {
type: "line",
height: 60,
sparkline: {
enabled: !0
}
},
series: [{
name: '',
data: [41, 45, 44, 46, 52, 54, 43, 74, 82, 82, 89]
}],
xaxis: {
type: 'datetime',
categories: ["Jan 01 2022", "Jan 02 2022", "Jan 03 2022", "Jan 04 2022", "Jan 05 2022", "Jan 06 2022", "Jan 07 2022", "Jan 08 2022", "Jan 09 2022", "Jan 10 2022", "Jan 11 2022",],
},
stroke: {
width: 2,
curve: "smooth"
},
markers: {
size: 0
},
colors: [colors.primary],
};
new ApexCharts(document.querySelector("#growthChart"),options3).render();
}
// Growth Chart - END
// Revenue Chart
if ($('#revenueChart').length) {
var lineChartOptions = {
chart: {
type: "line",
height: '400',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary, colors.danger, colors.warning],
grid: {
padding: {
bottom: -4,
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [
{
name: "Revenue",
data: revenueChartData
},
],
xaxis: {
type: "datetime",
categories: revenueChartCategories,
lines: {
show: true
},
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
crosshairs: {
stroke: {
color: colors.secondary,
},
},
},
yaxis: {
title: {
text: 'Revenue ( $1000 x )',
style:{
size: 9,
color: colors.muted
}
},
tickAmount: 4,
tooltip: {
enabled: true
},
crosshairs: {
stroke: {
color: colors.secondary,
},
},
},
markers: {
size: 0,
},
stroke: {
width: 2,
curve: "straight",
},
};
var apexLineChart = new ApexCharts(document.querySelector("#revenueChart"), lineChartOptions);
apexLineChart.render();
}
// Revenue Chart - END
// Revenue Chart - RTL
if ($('#revenueChartRTL').length) {
var lineChartOptions = {
chart: {
type: "line",
height: '400',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary, colors.danger, colors.warning],
grid: {
padding: {
bottom: -4,
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [
{
name: "Revenue",
data: revenueChartData
},
],
xaxis: {
type: "datetime",
categories: revenueChartCategories,
lines: {
show: true
},
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
crosshairs: {
stroke: {
color: colors.secondary,
},
},
},
yaxis: {
opposite: true,
title: {
text: 'Revenue ( $1000 x )',
offsetX: -130,
style:{
size: 9,
color: colors.muted
}
},
labels: {
align: 'left',
offsetX: -20,
},
tickAmount: 4,
tooltip: {
enabled: true
},
crosshairs: {
stroke: {
color: colors.secondary,
},
},
},
markers: {
size: 0,
},
stroke: {
width: 2,
curve: "straight",
},
};
var apexLineChart = new ApexCharts(document.querySelector("#revenueChartRTL"), lineChartOptions);
apexLineChart.render();
}
// Revenue Chart - RTL - END
// Monthly Sales Chart
if($('#monthlySalesChart').length) {
var options = {
chart: {
type: 'bar',
height: '318',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary],
fill: {
opacity: .9
} ,
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [{
name: 'Sales',
data: [152,109,93,113,126,161,188,143,102,113,116,124]
}],
xaxis: {
type: 'datetime',
categories: ['01/01/2022','02/01/2022','03/01/2022','04/01/2022','05/01/2022','06/01/2022','07/01/2022', '08/01/2022','09/01/2022','10/01/2022', '11/01/2022', '12/01/2022'],
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
title: {
text: 'Number of Sales',
style:{
size: 9,
color: colors.muted
}
},
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 0
},
dataLabels: {
enabled: true,
style: {
fontSize: '10px',
fontFamily: fontFamily,
},
offsetY: -27
},
plotOptions: {
bar: {
columnWidth: "50%",
borderRadius: 4,
dataLabels: {
position: 'top',
orientation: 'vertical',
}
},
},
}
var apexBarChart = new ApexCharts(document.querySelector("#monthlySalesChart"), options);
apexBarChart.render();
}
// Monthly Sales Chart - END
// Monthly Sales Chart - RTL
if($('#monthlySalesChartRTL').length) {
var options = {
chart: {
type: 'bar',
height: '318',
parentHeightOffset: 0,
foreColor: colors.bodyColor,
background: colors.cardBg,
toolbar: {
show: false
},
},
theme: {
mode: 'light'
},
tooltip: {
theme: 'light'
},
colors: [colors.primary],
fill: {
opacity: .9
} ,
grid: {
padding: {
bottom: -4
},
borderColor: colors.gridBorder,
xaxis: {
lines: {
show: true
}
}
},
series: [{
name: 'Sales',
data: [152,109,93,113,126,161,188,143,102,113,116,124]
}],
xaxis: {
type: 'datetime',
categories: ['01/01/2022','02/01/2022','03/01/2022','04/01/2022','05/01/2022','06/01/2022','07/01/2022', '08/01/2022','09/01/2022','10/01/2022', '11/01/2022', '12/01/2022'],
axisBorder: {
color: colors.gridBorder,
},
axisTicks: {
color: colors.gridBorder,
},
},
yaxis: {
opposite: true,
title: {
text: 'Number of Sales',
offsetX: -100,
style:{
size: 9,
color: colors.muted
}
},
labels: {
align: 'left',
offsetX: -20,
},
},
legend: {
show: true,
position: "top",
horizontalAlign: 'center',
fontFamily: fontFamily,
itemMargin: {
horizontal: 8,
vertical: 0
},
},
stroke: {
width: 0
},
dataLabels: {
enabled: true,
style: {
fontSize: '10px',
fontFamily: fontFamily,
},
offsetY: -27
},
plotOptions: {
bar: {
columnWidth: "50%",
borderRadius: 4,
dataLabels: {
position: 'top',
orientation: 'vertical',
}
},
},
}
var apexBarChart = new ApexCharts(document.querySelector("#monthlySalesChartRTL"), options);
apexBarChart.render();
}
// Monthly Sales Chart - RTL - END
// Cloud Storage Chart
if ($('#storageChart').length) {
var options = {
chart: {
height: 260,
type: "radialBar"
},
series: [67],
colors: [colors.primary],
plotOptions: {
radialBar: {
hollow: {
margin: 15,
size: "70%"
},
track: {
show: true,
background: colors.light,
strokeWidth: '100%',
opacity: 1,
margin: 5,
},
dataLabels: {
showOn: "always",
name: {
offsetY: -11,
show: true,
color: colors.muted,
fontSize: "13px"
},
value: {
color: colors.bodyColor,
fontSize: "30px",
show: true
}
}
}
},
fill: {
opacity: 1
},
stroke: {
lineCap: "round",
},
labels: ["Storage Used"]
};
var chart = new ApexCharts(document.querySelector("#storageChart"), options);
chart.render();
}
// Cloud Storage Chart - END
});
public/assets/js/data-table.js
+30
View File
@@ -0,0 +1,30 @@
// npm package: datatables.net-bs5
// github link: https://github.com/DataTables/Dist-DataTables-Bootstrap5
$(function() {
'use strict';
$(function() {
$('#dataTableExample').DataTable({
"aLengthMenu": [
[10, 30, 50, -1],
[10, 30, 50, "All"]
],
"iDisplayLength": 10,
"language": {
search: ""
}
});
$('#dataTableExample').each(function() {
var datatable = $(this);
// SEARCH - Add the placeholder for Search and Turn this into in-line form control
var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
search_input.attr('placeholder', 'Search');
search_input.removeClass('form-control-sm');
// LENGTH - Inline-Form control
var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
length_sel.removeClass('form-control-sm');
});
});
});
public/assets/js/demo.js
+10
View File
@@ -0,0 +1,10 @@
(function($) {
'use strict';
$(function() {
if($('.perfect-scrollbar-example').length) {
var scrollbarExample = new PerfectScrollbar('.perfect-scrollbar-example');
}
});
})(jQuery);
public/assets/js/dropify.js
+9
View File
@@ -0,0 +1,9 @@
// npm package: dropify
// github link: https://github.com/JeremyFagis/dropify
$(function() {
'use strict';
$('#myDropify').dropify();
});
public/assets/js/dropzone.js
+11
View File
@@ -0,0 +1,11 @@
// npm package: dropify
// github link: https://github.com/dropzone/dropzone
$(function() {
'use strict';
$("exampleDropzone").dropzone({
url: 'nobleui.com'
});
});
public/assets/js/easymde.js
+14
View File
@@ -0,0 +1,14 @@
// npm package: easymde
// github link: https://github.com/Ionaru/easy-markdown-editor
$(function() {
'use strict';
/*easymde editor*/
if ($("#easyMdeExample").length) {
var easymde = new EasyMDE({
element: $("#easyMdeExample")[0]
});
}
});
public/assets/js/email.js
+15
View File
@@ -0,0 +1,15 @@
$(function() {
'use strict'
if ($(".compose-multiple-select").length) {
$(".compose-multiple-select").select2();
}
/*easymde editor*/
if ($("#easyMdeEditor").length) {
var easymde = new EasyMDE({
element: $("#easyMdeEditor")[0]
});
}
});
public/assets/js/flatpickr.js
+26
View File
@@ -0,0 +1,26 @@
// npm package: flatpickr
// github link: https://github.com/flatpickr/flatpickr
$(function() {
'use strict';
// date picker
if($('#flatpickr-date').length) {
flatpickr("#flatpickr-date", {
wrap: true,
dateFormat: "Y-m-d",
});
}
// time picker
if($('#flatpickr-time').length) {
flatpickr("#flatpickr-time", {
wrap: true,
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
}
});
public/assets/js/form-validation.js
+92
View File
@@ -0,0 +1,92 @@
// npm package: jquery-validation
// github link: https://github.com/jquery-validation/jquery-validation
$(function() {
'use strict';
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
}
});
$(function() {
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
name: {
required: true,
minlength: 3
},
email: {
required: true,
email: true
},
age_select: {
required: true
},
gender_radio: {
required: true
},
skill_check: {
required: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
terms_agree: "required"
},
messages: {
name: {
required: "Please enter a name",
minlength: "Name must consist of at least 3 characters"
},
email: "Please enter a valid email address",
age_select: "Please select your age",
skill_check: "Please select your skills",
gender_radio: "Please select your gender",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please confirm your password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
terms_agree: "Please agree to terms and conditions"
},
errorPlacement: function(error, element) {
error.addClass( "invalid-feedback" );
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
}
else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
error.insertAfter(element.parent().parent());
}
else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
error.appendTo(element.parent().parent());
}
else {
error.insertAfter(element);
}
},
highlight: function(element, errorClass) {
if ($(element).prop('type') != 'checkbox' && $(element).prop('type') != 'radio') {
$( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
}
},
unhighlight: function(element, errorClass) {
if ($(element).prop('type') != 'checkbox' && $(element).prop('type') != 'radio') {
$( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
}
}
});
});
});
public/assets/js/fullcalendar.js
+226
View File
@@ -0,0 +1,226 @@
// npm package: fullcalendar
// github link: https://github.com/fullcalendar/fullcalendar
$(function() {
// sample calendar events data
var Draggable = FullCalendar.Draggable;
var calendarEl = document.getElementById('fullcalendar');
var containerEl = document.getElementById('external-events');
var curYear = moment().format('YYYY');
var curMonth = moment().format('MM');
// Calendar Event Source
var calendarEvents = {
id: 1,
backgroundColor: 'rgba(1,104,250, .15)',
borderColor: '#0168fa',
events: [
{
id: '1',
start: curYear+'-'+curMonth+'-08T08:30:00',
end: curYear+'-'+curMonth+'-08T13:00:00',
title: 'Google Developers Meetup',
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
},{
id: '2',
start: curYear+'-'+curMonth+'-10T09:00:00',
end: curYear+'-'+curMonth+'-10T17:00:00',
title: 'Design/Code Review',
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
},{
id: '3',
start: curYear+'-'+curMonth+'-13T12:00:00',
end: curYear+'-'+curMonth+'-13T18:00:00',
title: 'Lifestyle Conference',
description: 'Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi...'
},{
id: '4',
start: curYear+'-'+curMonth+'-15T07:30:00',
end: curYear+'-'+curMonth+'-15T15:30:00',
title: 'Team Weekly Trip',
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
},{
id: '5',
start: curYear+'-'+curMonth+'-17T10:00:00',
end: curYear+'-'+curMonth+'-19T15:00:00',
title: 'DJ Festival',
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
},{
id: '6',
start: curYear+'-'+curMonth+'-08T13:00:00',
end: curYear+'-'+curMonth+'-08T18:30:00',
title: 'Carl Henson\'s Wedding',
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
}
]
};
// Birthday Events Source
var birthdayEvents = {
id: 2,
backgroundColor: 'rgba(16,183,89, .25)',
borderColor: '#10b759',
events: [
{
id: '7',
start: curYear+'-'+curMonth+'-01T18:00:00',
end: curYear+'-'+curMonth+'-01T23:30:00',
title: 'Jensen Birthday',
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
},
{
id: '8',
start: curYear+'-'+curMonth+'-21T15:00:00',
end: curYear+'-'+curMonth+'-21T21:00:00',
title: 'Carl\'s Birthday',
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
},
{
id: '9',
start: curYear+'-'+curMonth+'-23T15:00:00',
end: curYear+'-'+curMonth+'-23T21:00:00',
title: 'Yaretzi\'s Birthday',
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
}
]
};
var holidayEvents = {
id: 3,
backgroundColor: 'rgba(241,0,117,.25)',
borderColor: '#f10075',
events: [
{
id: '10',
start: curYear+'-'+curMonth+'-04',
end: curYear+'-'+curMonth+'-06',
title: 'Feast Day'
},
{
id: '11',
start: curYear+'-'+curMonth+'-26',
end: curYear+'-'+curMonth+'-27',
title: 'Memorial Day'
},
{
id: '12',
start: curYear+'-'+curMonth+'-28',
end: curYear+'-'+curMonth+'-29',
title: 'Veteran\'s Day'
}
]
};
var discoveredEvents = {
id: 4,
backgroundColor: 'rgba(0,204,204,.25)',
borderColor: '#00cccc',
events: [
{
id: '13',
start: curYear+'-'+curMonth+'-17T08:00:00',
end: curYear+'-'+curMonth+'-18T11:00:00',
title: 'Web Design Workshop Seminar'
}
]
};
var meetupEvents = {
id: 5,
backgroundColor: 'rgba(91,71,251,.2)',
borderColor: '#5b47fb',
events: [
{
id: '14',
start: curYear+'-'+curMonth+'-03',
end: curYear+'-'+curMonth+'-05',
title: 'UI/UX Meetup Conference'
},
{
id: '15',
start: curYear+'-'+curMonth+'-18',
end: curYear+'-'+curMonth+'-20',
title: 'Angular Conference Meetup'
}
]
};
var otherEvents = {
id: 6,
backgroundColor: 'rgba(253,126,20,.25)',
borderColor: '#fd7e14',
events: [
{
id: '16',
start: curYear+'-'+curMonth+'-06',
end: curYear+'-'+curMonth+'-08',
title: 'My Rest Day'
},
{
id: '17',
start: curYear+'-'+curMonth+'-29',
end: curYear+'-'+curMonth+'-31',
title: 'My Rest Day'
}
]
};
new Draggable(containerEl, {
itemSelector: '.fc-event',
eventData: function(eventEl) {
return {
title: eventEl.innerText
};
}
});
// initialize the calendar
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: "prev,today,next",
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
fixedWeekCount: true,
// height: 300,
initialView: 'dayGridMonth',
timeZone: 'UTC',
hiddenDays:[],
navLinks: 'true',
// weekNumbers: true,
// weekNumberFormat: {
// week:'numeric',
// },
dayMaxEvents: 2,
events: [],
eventSources: [calendarEvents, birthdayEvents, holidayEvents, discoveredEvents, meetupEvents, otherEvents],
drop: function(info) {
// remove the element from the "Draggable Events" list
// info.draggedEl.parentNode.removeChild(info.draggedEl);
},
eventClick: function(info) {
var eventObj = info.event;
console.log(info);
$('#modalTitle1').html(eventObj.title);
$('#modalBody1').html(eventObj._def.extendedProps.description);
$('#eventUrl').attr('href',eventObj.url);
$('#fullCalModal').modal("show");
},
dateClick: function(info) {
$("#createEventModal").modal("show");
console.log(info);
},
});
calendar.render();
});
public/assets/js/inputmask.js
+10
View File
@@ -0,0 +1,10 @@
// npm package: inputmask
// github link: https://github.com/RobinHerbots/Inputmask
(function($) {
'use strict';
// initializing inputmask
$(":input").inputmask();
})(jQuery);
public/assets/js/jquery.flot-dark.js
+292
View File
@@ -0,0 +1,292 @@
// npm package: jquery.flot
// github link: https://github.com/flot/flot
$(function() {
'use strict';
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#b8c3d9",
cardBg : "#0c1427"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
//Line Chart
$.plot($('#flotLine'), [
{
label: 'Visits',
data: [
[ 6, 196 ], [ 7, 175 ], [ 8, 212 ], [ 9, 247 ], [ 10, 152 ], [ 11, 225 ], [ 12, 155 ], [ 13, 203 ], [ 14, 166 ], [ 15, 151 ]
]
},
{
label: 'Returning visits',
data: [
[ 6, 49 ], [ 7, 56 ], [ 8, 30 ], [ 9, 29 ], [ 10, 66 ], [ 11, 2 ], [ 12, 2 ], [ 13, 8 ], [ 14, 34 ], [ 15, 63 ]
]
}
], {
series: {
shadowSize: 0,
lines: {
show: true
},
points: {
show: true,
radius: 4
}
},
grid: {
color: colors.bodyColor,
borderColor: colors.gridBorder,
borderWidth: 1,
hoverable: true,
clickable: true
},
xaxis: { tickColor: colors.gridBorder, },
yaxis: { tickColor: colors.gridBorder, },
legend: { backgroundColor: colors.cardBg },
tooltip: { show: true },
colors: [colors.danger, colors.primary]
});
// Bar Chart
$.plot($('#flotBar'), [
{
label: 'Visits',
data: [
[ 6, 156 ], [ 7, 195 ], [ 8, 171 ], [ 9, 211 ], [ 10, 150 ], [ 11, 169 ], [ 12, 173 ], [ 13, 200 ], [ 14, 233 ], [ 15, 161 ]
]
},
{
label: 'Returning visits',
data: [
[ 6, 24 ], [ 7, 20 ], [ 8, 31 ], [ 9, 4 ], [ 10, 92 ], [ 11, 87 ], [ 12, 28 ], [ 13, 21 ], [ 14, 80 ], [ 15, 76 ]
]
}
], {
series: {
shadowSize: 0,
bars: {
show: true,
barWidth: .6,
align: 'center',
lineWidth: 1,
fill: 0.25
}
},
grid: {
color: colors.bodyColor,
borderColor: colors.gridBorder,
borderWidth: 1,
hoverable: true,
clickable: true
},
xaxis: { tickDecimals: 2, tickColor: colors.gridBorder },
yaxis: { tickColor: colors.gridBorder },
legend: { backgroundColor: colors.cardBg },
tooltip: { show: true },
colors: [colors.danger, colors.primary]
});
// Area Chart
$.plot($('#flotArea'), [
{
label: 'iPhone',
data: [
[ "2010.Q1", 35 ], [ '2010.Q2', 67 ], [ '2010.Q3', 13 ], [ '2010.Q4', 45 ]
]
},
{
label: 'iTouch',
data: [
[ '2010.Q1', 32 ], [ '2010.Q2', 49 ], [ '2010.Q3', 25 ], [ '2010.Q4', 57 ]
]
}
], {
series: {
shadowSize: 0,
lines: {
show: true,
fill: 0.15,
lineWidth: 1
}
},
grid: {
color: colors.bodyColor,
borderColor: colors.gridBorder,
borderWidth: 1,
hoverable: true,
clickable: true
},
xaxis: { mode: 'categories', tickColor: colors.gridBorder },
yaxis: { tickColor: colors.gridBorder },
legend: { backgroundColor: colors.cardBg },
tooltip: {
show: true,
content: '%s: %y'
},
colors: [colors.danger, colors.primary]
});
// Pie Chart
$.plot($('#flotPie'), [
{ label: 'Series1', data: 77 },
{ label: 'Series2', data: 81 },
{ label: 'Series3', data: 46 },
{ label: 'Series4', data: 35 },
{ label: 'Series5', data: 79 },
{ label: 'Series6', data: 84 },
], {
series: {
shadowSize: 0,
pie: {
show: true,
radius: 1,
innerRadius: 0.5,
stroke: {
color: colors.cardBg,
width: 3
},
label: {
show: true,
radius: 3 / 4,
background: { opacity: 0.5 },
formatter: function(label, series) {
return '<div style="font-size:11px;text-align:center;color:white;">' + Math.round(series.percent) + '%</div>';
}
}
}
},
grid: {
color: colors.bodyColor,
borderColor: colors.gridBorder,
borderWidth: 1,
hoverable: true,
clickable: true
},
xaxis: { tickColor: colors.gridBorder },
yaxis: { tickColor: colors.gridBorder },
legend: { backgroundColor: colors.cardBg },
colors: [colors.primary, colors.secondary, colors.danger, colors.warning, colors.info, colors.success]
});
// Real-Time Chart
var data = [],
totalPoints = 300;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = 0;
} else if (y > 100) {
y = 100;
}
data.push(y);
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
// Set up the control widget
var updateInterval = 30;
if ($("#flotRealTime").length) {
var plot = $.plot("#flotRealTime", [getRandomData()], {
series: {
shadowSize: 0, // Drawing is faster without shadows
lines: {
show: true,
lineWidth: 1,
fill: false,
opacity: 0.1
}
},
xaxis: {
// show: false,
},
yaxis: {
min: 0,
max: 150
},
grid: {
color: 'rgba(77, 138, 240, 1)',
borderColor: colors.gridBorder,
borderWidth: 1,
hoverable: true,
clickable: true
},
colors: [colors.primary]
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
}
});
public/assets/js/jquery.flot-light.js
+292
View File
@@ -0,0 +1,292 @@
// npm package: jquery.flot
// github link: https://github.com/flot/flot
$(function() {
'use strict';
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#000",
cardBg : "#fff"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
//Line Chart
$.plot($('#flotLine'), [
{
label: 'Visits',
data: [
[ 6, 196 ], [ 7, 175 ], [ 8, 212 ], [ 9, 247 ], [ 10, 152 ], [ 11, 225 ], [ 12, 155 ], [ 13, 203 ], [ 14, 166 ], [ 15, 151 ]
]
},
{
label: 'Returning visits',
data: [
[ 6, 49 ], [ 7, 56 ], [ 8, 30 ], [ 9, 29 ], [ 10, 66 ], [ 11, 2 ], [ 12, 2 ], [ 13, 8 ], [ 14, 34 ], [ 15, 63 ]
]
}
], {
series: {
shadowSize: 0,
lines: {
show: true
},
points: {
show: true,
radius: 4
}
},
grid: {
color: colors.bodyColor,
borderColor: colors.gridBorder,
borderWidth: 1,
hoverable: true,
clickable: true
},
xaxis: { tickColor: colors.gridBorder, },
yaxis: { tickColor: colors.gridBorder, },
legend: { backgroundColor: colors.cardBg },
tooltip: { show: true },
colors: [colors.danger, colors.primary]
});
// Bar Chart
$.plot($('#flotBar'), [
{
label: 'Visits',
data: [
[ 6, 156 ], [ 7, 195 ], [ 8, 171 ], [ 9, 211 ], [ 10, 150 ], [ 11, 169 ], [ 12, 173 ], [ 13, 200 ], [ 14, 233 ], [ 15, 161 ]
]
},
{
label: 'Returning visits',
data: [
[ 6, 24 ], [ 7, 20 ], [ 8, 31 ], [ 9, 4 ], [ 10, 92 ], [ 11, 87 ], [ 12, 28 ], [ 13, 21 ], [ 14, 80 ], [ 15, 76 ]
]
}
], {
series: {
shadowSize: 0,
bars: {
show: true,
barWidth: .6,
align: 'center',
lineWidth: 1,
fill: 0.25
}
},
grid: {
color: colors.bodyColor,
borderColor: colors.gridBorder,
borderWidth: 1,
hoverable: true,
clickable: true
},
xaxis: { tickDecimals: 2, tickColor: colors.gridBorder },
yaxis: { tickColor: colors.gridBorder },
legend: { backgroundColor: colors.cardBg },
tooltip: { show: true },
colors: [colors.danger, colors.primary]
});
// Area Chart
$.plot($('#flotArea'), [
{
label: 'iPhone',
data: [
[ "2010.Q1", 35 ], [ '2010.Q2', 67 ], [ '2010.Q3', 13 ], [ '2010.Q4', 45 ]
]
},
{
label: 'iTouch',
data: [
[ '2010.Q1', 32 ], [ '2010.Q2', 49 ], [ '2010.Q3', 25 ], [ '2010.Q4', 57 ]
]
}
], {
series: {
shadowSize: 0,
lines: {
show: true,
fill: 0.15,
lineWidth: 1
}
},
grid: {
color: colors.bodyColor,
borderColor: colors.gridBorder,
borderWidth: 1,
hoverable: true,
clickable: true
},
xaxis: { mode: 'categories', tickColor: colors.gridBorder },
yaxis: { tickColor: colors.gridBorder },
legend: { backgroundColor: colors.cardBg },
tooltip: {
show: true,
content: '%s: %y'
},
colors: [colors.danger, colors.primary]
});
// Pie Chart
$.plot($('#flotPie'), [
{ label: 'Series1', data: 77 },
{ label: 'Series2', data: 81 },
{ label: 'Series3', data: 46 },
{ label: 'Series4', data: 35 },
{ label: 'Series5', data: 79 },
{ label: 'Series6', data: 84 },
], {
series: {
shadowSize: 0,
pie: {
show: true,
radius: 1,
innerRadius: 0.5,
stroke: {
color: colors.cardBg,
width: 3
},
label: {
show: true,
radius: 3 / 4,
background: { opacity: 0.5 },
formatter: function(label, series) {
return '<div style="font-size:11px;text-align:center;color:white;">' + Math.round(series.percent) + '%</div>';
}
}
}
},
grid: {
color: colors.bodyColor,
borderColor: colors.gridBorder,
borderWidth: 1,
hoverable: true,
clickable: true
},
xaxis: { tickColor: colors.gridBorder },
yaxis: { tickColor: colors.gridBorder },
legend: { backgroundColor: colors.cardBg },
colors: [colors.primary, colors.secondary, colors.danger, colors.warning, colors.info, colors.success]
});
// Real-Time Chart
var data = [],
totalPoints = 300;
function getRandomData() {
if (data.length > 0)
data = data.slice(1);
// Do a random walk
while (data.length < totalPoints) {
var prev = data.length > 0 ? data[data.length - 1] : 50,
y = prev + Math.random() * 10 - 5;
if (y < 0) {
y = 0;
} else if (y > 100) {
y = 100;
}
data.push(y);
}
// Zip the generated y values with the x values
var res = [];
for (var i = 0; i < data.length; ++i) {
res.push([i, data[i]])
}
return res;
}
// Set up the control widget
var updateInterval = 30;
if ($("#flotRealTime").length) {
var plot = $.plot("#flotRealTime", [getRandomData()], {
series: {
shadowSize: 0, // Drawing is faster without shadows
lines: {
show: true,
lineWidth: 1,
fill: false,
opacity: 0.1
}
},
xaxis: {
// show: false,
},
yaxis: {
min: 0,
max: 150
},
grid: {
color: 'rgba(77, 138, 240, 1)',
borderColor: colors.gridBorder,
borderWidth: 1,
hoverable: true,
clickable: true
},
colors: [colors.primary]
});
function update() {
plot.setData([getRandomData()]);
// Since the axes don't change, we don't need to call plot.setupGrid()
plot.draw();
setTimeout(update, updateInterval);
}
update();
}
});
public/assets/js/morrisjs-dark.js
+108
View File
@@ -0,0 +1,108 @@
// npm package: morris.js
// github link: https://github.com/morrisjs/morris.js
$(function() {
'use strict';
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#b8c3d9",
cardBg : "#0c1427"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
// Line Chart
new Morris.Line({
element: 'morrisLine',
data: [
{ year: '2008', value: 2 },
{ year: '2009', value: 9 },
{ year: '2010', value: 5 },
{ year: '2011', value: 12 },
{ year: '2012', value: 5 }
],
xkey: 'year',
ykeys: ['value'],
labels: ['value'],
lineColors: [colors.danger],
gridLineColor: [colors.gridBorder],
gridTextColor: colors.bodyColor,
gridTextFamily: fontFamily,
});
// Area Chart
Morris.Area({
element: 'morrisArea',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
lineColors: [colors.danger, colors.info],
fillOpacity: 0.1,
gridLineColor: [colors.gridBorder],
gridTextColor: colors.bodyColor,
gridTextFamily: fontFamily,
});
// Bar Chart
Morris.Bar({
element: 'morrisBar',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
barColors: [colors.danger, colors.info],
gridLineColor: [colors.gridBorder],
gridTextColor: colors.bodyColor,
gridTextFamily: fontFamily,
});
// Donut Chart
Morris.Donut({
element: 'morrisDonut',
data: [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
],
colors: [colors.danger, colors.info, colors.primary],
labelColor: colors.bodyColor,
});
});
public/assets/js/morrisjs-light.js
+108
View File
@@ -0,0 +1,108 @@
// npm package: morris.js
// github link: https://github.com/morrisjs/morris.js
$(function() {
'use strict';
var colors = {
primary : "#6571ff",
secondary : "#7987a1",
success : "#05a34a",
info : "#66d1d1",
warning : "#fbbc06",
danger : "#ff3366",
light : "#e9ecef",
dark : "#060c17",
muted : "#7987a1",
gridBorder : "rgba(77, 138, 240, .15)",
bodyColor : "#000",
cardBg : "#fff"
}
var fontFamily = "'Roboto', Helvetica, sans-serif"
// Line Chart
new Morris.Line({
element: 'morrisLine',
data: [
{ year: '2008', value: 2 },
{ year: '2009', value: 9 },
{ year: '2010', value: 5 },
{ year: '2011', value: 12 },
{ year: '2012', value: 5 }
],
xkey: 'year',
ykeys: ['value'],
labels: ['value'],
lineColors: [colors.danger],
gridLineColor: [colors.gridBorder],
gridTextColor: colors.bodyColor,
gridTextFamily: fontFamily,
});
// Area Chart
Morris.Area({
element: 'morrisArea',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
lineColors: [colors.danger, colors.info],
fillOpacity: 0.1,
gridLineColor: [colors.gridBorder],
gridTextColor: colors.bodyColor,
gridTextFamily: fontFamily,
});
// Bar Chart
Morris.Bar({
element: 'morrisBar',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
barColors: [colors.danger, colors.info],
gridLineColor: [colors.gridBorder],
gridTextColor: colors.bodyColor,
gridTextFamily: fontFamily,
});
// Donut Chart
Morris.Donut({
element: 'morrisDonut',
data: [
{label: "Download Sales", value: 12},
{label: "In-Store Sales", value: 30},
{label: "Mail-Order Sales", value: 20}
],
colors: [colors.danger, colors.info, colors.primary],
labelColor: colors.bodyColor,
});
});
public/assets/js/peity.js
+13
View File
@@ -0,0 +1,13 @@
// npm package: peity
// github link: https://github.com/benpickles/peity
$(function() {
'use strict'
$('.peity-line').peity("line");
$('.peity-bar').peity("bar");
$('.peity-pie').peity("pie");
$('.peity-donut').peity("donut");
$('.peity-custom span').peity("donut");
});
public/assets/js/pickr.js
+99
View File
@@ -0,0 +1,99 @@
// npm package: @simonwep/pickr
// github link: https://github.com/Simonwep/pickr
$(function() {
'use strict';
// Simple example, see optional options for more configuration.
// Pickr1
const pickr1 = Pickr.create({
el: '#pickr_1',
theme: 'classic', // or 'monolith', or 'nano',
default: '#6571ff',
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)',
'rgba(0, 188, 212, 0.7)',
'rgba(0, 150, 136, 0.75)',
'rgba(76, 175, 80, 0.8)',
'rgba(139, 195, 74, 0.85)',
'rgba(205, 220, 57, 0.9)',
'rgba(255, 235, 59, 0.95)',
'rgba(255, 193, 7, 1)'
],
components: {
// Main components
preview: true,
opacity: true,
hue: true,
// Input / output Options
interaction: {
hex: true,
rgba: true,
hsla: true,
hsva: true,
cmyk: true,
input: true,
clear: true,
save: true
}
}
});
// Pickr2
const pickr2 = Pickr.create({
el: '#pickr_2',
theme: 'classic',
default: '#05a34a',
swatches: [
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)'
],
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
hex: true,
rgba: true,
input: true,
clear: true,
save: true
}
}
});
// Pickr3
const pickr3 = Pickr.create({
el: '#pickr_3',
theme: 'classic',
default: '#66d1d1',
components: {
preview: true,
opacity: true,
hue: true,
interaction: {
rgba: true,
input: true,
clear: true,
save: true
}
}
});
});
public/assets/js/select2.js
+14
View File
@@ -0,0 +1,14 @@
// npm package: select2
// github link: https://github.com/select2/select2
$(function() {
'use strict'
if ($(".js-example-basic-single").length) {
$(".js-example-basic-single").select2();
}
if ($(".js-example-basic-multiple").length) {
$(".js-example-basic-multiple").select2();
}
});
public/assets/js/sortablejs-dark.js
+143
View File
@@ -0,0 +1,143 @@
// npm package: sortablejs
// github link: https://github.com/SortableJS/Sortable
$(function() {
'use strict';
// Simple list example
if ($("#simple-list").length) {
var simpleList = document.querySelector("#simple-list");
new Sortable(simpleList, {
animation: 150,
ghostClass: 'bg-dark'
});
}
// Handle example
if ($("#handle-example").length) {
var handleExample = document.querySelector("#handle-example");
new Sortable(handleExample, {
handle: '.handle', // handle's class
animation: 150,
ghostClass: 'bg-dark'
});
}
// Shared lists example
if ($("#shared-list-left").length) {
var sharedListLeft = document.querySelector("#shared-list-left");
new Sortable(sharedListLeft, {
group: 'shared', // set both lists to same group
animation: 150,
ghostClass: 'bg-dark'
});
}
if ($("#shared-list-right").length) {
var sharedListRight = document.querySelector("#shared-list-right");
new Sortable(sharedListRight, {
group: 'shared', // set both lists to same group
animation: 150,
ghostClass: 'bg-dark'
});
}
// Cloning example
if ($("#shared-list-2-left").length) {
var sharedList2Left = document.querySelector("#shared-list-2-left");
new Sortable(sharedList2Left, {
group: {
name: 'shared2',
pull: 'clone' // To clone: set pull to 'clone'
},
animation: 150,
ghostClass: 'bg-dark'
});
}
if ($("#shared-list-2-right").length) {
var sharedList2Right = document.querySelector("#shared-list-2-right");
new Sortable(sharedList2Right, {
group: {
name: 'shared2',
pull: 'clone' // To clone: set pull to 'clone'
},
animation: 150,
ghostClass: 'bg-dark'
});
}
// Disabling sorting example
if ($("#shared-list-3-left").length) {
var sharedList3Left = document.querySelector("#shared-list-3-left");
new Sortable(sharedList3Left, {
group: {
name: 'shared3',
pull: 'clone',
put: false // Do not allow items to be put into this list
},
animation: 150,
ghostClass: 'bg-dark',
sort: false // To disable sorting: set sort to false
});
}
if ($("#shared-list-3-right").length) {
var sharedList3Right = document.querySelector("#shared-list-3-right");
new Sortable(sharedList3Right, {
group: {
name: 'shared3',
},
animation: 150,
ghostClass: 'bg-dark'
});
}
// Filter example
if ($("#filter-example").length) {
var filterExample = document.querySelector("#filter-example");
new Sortable(filterExample, {
filter: '.filtered', // 'filtered' class is not draggable
animation: 150,
ghostClass: 'bg-dark'
});
}
// Grid example
if ($("#grid-example").length) {
var gridExample = document.querySelector("#grid-example");
new Sortable(gridExample, {
animation: 150,
ghostClass: 'bg-dark'
});
}
// Nested example
if ($("#nested-sortable").length) {
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
new Sortable(nestedSortables[i], {
group: 'nested',
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65
});
}
}
});
public/assets/js/sortablejs-light.js
+143
View File
@@ -0,0 +1,143 @@
// npm package: sortablejs
// github link: https://github.com/SortableJS/Sortable
$(function() {
'use strict';
// Simple list example
if ($("#simple-list").length) {
var simpleList = document.querySelector("#simple-list");
new Sortable(simpleList, {
animation: 150,
ghostClass: 'bg-light'
});
}
// Handle example
if ($("#handle-example").length) {
var handleExample = document.querySelector("#handle-example");
new Sortable(handleExample, {
handle: '.handle', // handle's class
animation: 150,
ghostClass: 'bg-light'
});
}
// Shared lists example
if ($("#shared-list-left").length) {
var sharedListLeft = document.querySelector("#shared-list-left");
new Sortable(sharedListLeft, {
group: 'shared', // set both lists to same group
animation: 150,
ghostClass: 'bg-light'
});
}
if ($("#shared-list-right").length) {
var sharedListRight = document.querySelector("#shared-list-right");
new Sortable(sharedListRight, {
group: 'shared', // set both lists to same group
animation: 150,
ghostClass: 'bg-light'
});
}
// Cloning example
if ($("#shared-list-2-left").length) {
var sharedList2Left = document.querySelector("#shared-list-2-left");
new Sortable(sharedList2Left, {
group: {
name: 'shared2',
pull: 'clone' // To clone: set pull to 'clone'
},
animation: 150,
ghostClass: 'bg-light'
});
}
if ($("#shared-list-2-right").length) {
var sharedList2Right = document.querySelector("#shared-list-2-right");
new Sortable(sharedList2Right, {
group: {
name: 'shared2',
pull: 'clone' // To clone: set pull to 'clone'
},
animation: 150,
ghostClass: 'bg-light'
});
}
// Disabling sorting example
if ($("#shared-list-3-left").length) {
var sharedList3Left = document.querySelector("#shared-list-3-left");
new Sortable(sharedList3Left, {
group: {
name: 'shared3',
pull: 'clone',
put: false // Do not allow items to be put into this list
},
animation: 150,
ghostClass: 'bg-light',
sort: false // To disable sorting: set sort to false
});
}
if ($("#shared-list-3-right").length) {
var sharedList3Right = document.querySelector("#shared-list-3-right");
new Sortable(sharedList3Right, {
group: {
name: 'shared3',
},
animation: 150,
ghostClass: 'bg-light'
});
}
// Filter example
if ($("#filter-example").length) {
var filterExample = document.querySelector("#filter-example");
new Sortable(filterExample, {
filter: '.filtered', // 'filtered' class is not draggable
animation: 150,
ghostClass: 'bg-light'
});
}
// Grid example
if ($("#grid-example").length) {
var gridExample = document.querySelector("#grid-example");
new Sortable(gridExample, {
animation: 150,
ghostClass: 'bg-light'
});
}
// Nested example
if ($("#nested-sortable").length) {
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
// Loop through each nested sortable element
for (var i = 0; i < nestedSortables.length; i++) {
new Sortable(nestedSortables[i], {
group: 'nested',
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65
});
}
}
});
public/assets/js/sparkline.js
+54
View File
@@ -0,0 +1,54 @@
// npm package: jquery-sparkline
// github link: https://github.com/imsky/jquery.sparkline
$(function() {
'use strict'
// Mouse speed chart start
var mrefreshinterval = 500; // update display every 500ms
var lastmousex=-1;
var lastmousey=-1;
var lastmousetime;
var mousetravel = 0;
var mpoints = [];
var mpoints_max = 30;
$('html').mousemove(function(e) {
var mousex = e.pageX;
var mousey = e.pageY;
if (lastmousex > -1) {
mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
}
lastmousex = mousex;
lastmousey = mousey;
});
var mdraw = function() {
var md = new Date();
var timenow = md.getTime();
if (lastmousetime && lastmousetime!=timenow) {
var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
mpoints.push(pps);
if (mpoints.length > mpoints_max)
mpoints.splice(0,1);
mousetravel = 0;
$('#mouseSpeedChart').sparkline(mpoints, { width: mpoints.length*2, tooltipSuffix: ' pixels per second', lineColor: 'rgb(101,113,255)' });
}
lastmousetime = timenow;
setTimeout(mdraw, mrefreshinterval);
}
// We could use setInterval instead, but I prefer to do it this way
setTimeout(mdraw, mrefreshinterval);
// Mouse speed chart start
$("#sparklineLine").sparkline([5,6,7,9,9,5,3,2,2,4,6,7,3,4,7,2,7,4,3,1,6,3,7 ], {type: 'line', width: '150', height: '50', fillColor: '', lineColor: 'rgb(255,51,102)'});
$("#sparklineArea").sparkline([5,6,7,9,9,5,3,2,2,4,6,7,3,4,7,2,7,4,3,1,6,3,7 ], {type: 'line', width: '150', height: '50', fillColor: 'rgba(102,209,209,.3)', lineColor: 'rgb(102,209,209)'});
$("#sparklineBar").sparkline([5,6,7,9,9,5,3,2,2,4,6,7,3,4,7,2,7,4,3,1,6,3,7 ], {type: 'bar', width: '150', height: '50', barColor: 'rgb(255,51,102)'});
$("#sparklineBarStacked").sparkline([[5,2],[6,4],[9,2],[9,5],[5,2],[3,7],[2,7],[2,2],[4,3],[6,5],[7,3],[3,2],[4,9],[7,1],[2,2],[7,2],[4,4],[3,3],[1,9],[6,8],[3,2],[7,1] ], {type: 'bar', width: '150', height: '50',stackedBarColor: ['rgb(255,51,102)', "rgb(102,209,209)"]});
$("#sparklineComposite").sparkline([5,6,9,9,5,3,2,2,4,6,7,3,4,7,2,7,4,3,1,6,3,7], {type: 'bar', width: '150', height: '50', barColor: 'rgb(255,51,102)'});
$("#sparklineComposite").sparkline([2,4,2,5,2,7,7,2,3,5,3,2,9,1,2,2,4,3,9,8,2,1], {type: 'line', width: '150', height: '50', composite: true, fillColor: 'rgba(102,209,209,.3)', lineColor: 'rgb(102,209,209)'});
$("#sparklineBoxplot").sparkline([5,6,7,9,9,5,3,2,2,4,6,7,3,4,7,2,7,4,3,1,6,3,7 ], {type: 'box', width: '150', height: '40', boxFillColor: "rgba(247, 126, 185, .3)", boxLineColor: "rgb(255,51,102)", whiskerColor: "rgb(255,51,102)"});
$("#sparklinePie").sparkline([1,3,2], {type: 'pie', width: '150', height: '50', sliceColors: ['rgb(255,51,102)', 'rgb(102,209,209)', 'rgb(101,113,255)']});
$("#sparklineBullet").sparkline([5,6,7,9,1], {type: 'bullet', width: '150', height: '50', performanceColor: 'rgb(255,51,102)', rangeColors: ['rgba(247, 126, 185, .1)', 'rgba(247, 126, 185, .2)', 'rgba(247, 126, 185, .3)']});
});
public/assets/js/sweet-alert.js
+144
View File
@@ -0,0 +1,144 @@
// npm package: sweetalert2
// github link: https://github.com/sweetalert2/sweetalert2
$(function() {
showSwal = function(type) {
'use strict';
if (type === 'basic') {
swal.fire({
text: 'Any fool can use a computer',
confirmButtonText: 'Close',
confirmButtonClass: 'btn btn-danger',
})
} else if (type === 'title-and-text') {
Swal.fire(
'The Internet?',
'That thing is still around?',
'question'
)
} else if (type === 'title-icon-text-footer') {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: '<a href>Why do I have this issue?</a>'
})
} else if (type === 'custom-html') {
Swal.fire({
title: '<strong>HTML <u>example</u></strong>',
icon: 'info',
html:
'You can use <b>bold text</b>, ' +
'<a href="//github.com">links</a> ' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Great!',
confirmButtonAriaLabel: 'Thumbs up, great!',
cancelButtonText:
'<i data-feather="thumbs-up"></i>',
cancelButtonAriaLabel: 'Thumbs down',
});
feather.replace();
} else if (type === 'custom-position') {
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your work has been saved',
showConfirmButton: false,
timer: 1500
})
} else if (type === 'passing-parameter-execute-cancel') {
const swalWithBootstrapButtons = Swal.mixin({
customClass: {
confirmButton: 'btn btn-success',
cancelButton: 'btn btn-danger me-2'
},
buttonsStyling: false,
})
swalWithBootstrapButtons.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonClass: 'me-2',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
}).then((result) => {
if (result.value) {
swalWithBootstrapButtons.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
} else if (
// Read more about handling dismissals
result.dismiss === Swal.DismissReason.cancel
) {
swalWithBootstrapButtons.fire(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
} else if (type === 'message-with-auto-close') {
let timerInterval
Swal.fire({
title: 'Auto close alert!',
html: 'I will close in <b></b> milliseconds.',
timer: 2000,
timerProgressBar: true,
didOpen: () => {
Swal.showLoading()
timerInterval = setInterval(() => {
const content = Swal.getHtmlContainer()
if (content) {
const b = content.querySelector('b')
if (b) {
b.textContent = Swal.getTimerLeft()
}
}
}, 100)
},
willClose: () => {
clearInterval(timerInterval)
}
}).then((result) => {
/* Read more about handling dismissals below */
if (result.dismiss === Swal.DismissReason.timer) {
console.log('I was closed by the timer')
}
})
} else if (type === 'message-with-custom-image') {
Swal.fire({
title: 'Sweet!',
text: 'Modal with a custom image.',
// imageUrl: 'https://unsplash.it/400/200',
imageUrl: '../../../assets/images/others/placeholder.jpg',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
})
} else if (type === 'mixin') {
const Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: true,
});
Toast.fire({
icon: 'success',
title: 'Signed in successfully'
})
}
}
});
public/assets/js/tags-input.js
+18
View File
@@ -0,0 +1,18 @@
// npm package: jquery-tags-input
// github link: https://github.com/xoxco/jQuery-Tags-Input
$(function() {
'use strict';
$('#tags').tagsInput({
'width': '100%',
'height': '75%',
'interactive': true,
'defaultText': 'Add More',
'removeWithBackspace': true,
'minChars': 0,
'maxChars': 20,
'placeholderColor': '#666666'
});
});
public/assets/js/template.js
+211
View File
@@ -0,0 +1,211 @@
(function($) {
'use strict';
$(function() {
var body = $('body');
var mainWrapper = $('.main-wrapper');
var footer = $('footer');
var sidebar = $('.sidebar');
var navbar = $('.navbar').not('.top-navbar');
// Enable feather-icons with SVG markup
feather.replace();
// initialize clipboard plugin
if ($('.btn-clipboard').length) {
// Enabling tooltip to all clipboard buttons
$('.btn-clipboard').attr('data-bs-toggle', 'tooltip').attr('title', 'Copy to clipboard');
var clipboard = new ClipboardJS('.btn-clipboard');
clipboard.on('success', function(e) {
console.log(e);
e.trigger.innerHTML = 'copied';
setTimeout(function() {
e.trigger.innerHTML = 'copy';
e.clearSelection();
},700)
});
}
// initializing bootstrap tooltip
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
// initializing bootstrap popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
// Applying perfect-scrollbar
if ($('.sidebar .sidebar-body').length) {
const sidebarBodyScroll = new PerfectScrollbar('.sidebar-body');
}
// commented beacuse of hang (scroll from dropdown.html with small height)
// if ($('.content-nav-wrapper').length) {
// const contentNavWrapper = new PerfectScrollbar('.content-nav-wrapper');
// }
// Close other submenu in sidebar on opening any
sidebar.on('show.bs.collapse', '.collapse', function() {
sidebar.find('.collapse.show').collapse('hide');
});
// Sidebar toggle to sidebar-folded
$('.sidebar-toggler').on('click', function(e) {
e.preventDefault();
$('.sidebar-header .sidebar-toggler').toggleClass('active not-active');
if (window.matchMedia('(min-width: 992px)').matches) {
e.preventDefault();
body.toggleClass('sidebar-folded');
} else if (window.matchMedia('(max-width: 991px)').matches) {
e.preventDefault();
body.toggleClass('sidebar-open');
}
});
// commmented because of apex chart width issue in desktop (in lg not in xl)
// // sidebar-folded on large devices
// function iconSidebar(e) {
// if (e.matches) {
// body.addClass('sidebar-folded');
// } else {
// body.removeClass('sidebar-folded');
// }
// }
// var desktopMedium = window.matchMedia('(min-width:992px) and (max-width: 1199px)');
// desktopMedium.addListener(iconSidebar);
// iconSidebar(desktopMedium);
// Settings sidebar toggle
$('.settings-sidebar-toggler').on('click', function(e) {
$('body').toggleClass('settings-open');
});
// Sidebar theme settings
$("input:radio[name=sidebarThemeSettings]").click(function() {
$('body').removeClass('sidebar-light sidebar-dark');
$('body').addClass($(this).val());
})
//Add active class to nav-link based on url dynamically
function addActiveClass(element) {
if (current === "") {
//for root url
if (element.attr('href').indexOf("index.html") !== -1) {
element.parents('.nav-item').last().addClass('active');
if (element.parents('.sub-menu').length) {
element.closest('.collapse').addClass('show');
element.addClass('active');
}
}
} else {
//for other url
if (element.attr('href').indexOf(current) !== -1) {
element.parents('.nav-item').last().addClass('active');
if (element.parents('.sub-menu').length) {
element.closest('.collapse').addClass('show');
element.addClass('active');
}
if (element.parents('.submenu-item').length) {
element.addClass('active');
}
}
}
}
var current = location.pathname.split("/").slice(-1)[0].replace(/^\/|\/$/g, '');
$('.nav li a', sidebar).each(function() {
var $this = $(this);
addActiveClass($this);
});
$('.horizontal-menu .nav li a').each(function() {
var $this = $(this);
addActiveClass($this);
})
// open sidebar-folded when hover
$(".sidebar .sidebar-body").hover(
function () {
if (body.hasClass('sidebar-folded')){
body.addClass("open-sidebar-folded");
}
},
function () {
if (body.hasClass('sidebar-folded')){
body.removeClass("open-sidebar-folded");
}
});
// close sidebar when click outside on mobile/table
$(document).on('click touchstart', function(e){
e.stopPropagation();
// closing of sidebar menu when clicking outside of it
if (!$(e.target).closest('.sidebar-toggler').length) {
var sidebar = $(e.target).closest('.sidebar').length;
var sidebarBody = $(e.target).closest('.sidebar-body').length;
if (!sidebar && !sidebarBody) {
if ($('body').hasClass('sidebar-open')) {
$('body').removeClass('sidebar-open');
}
}
}
});
//Horizontal menu in mobile
$('[data-toggle="horizontal-menu-toggle"]').on("click", function() {
$(".horizontal-menu .bottom-navbar").toggleClass("header-toggled");
});
// Horizontal menu navigation in mobile menu on click
var navItemClicked = $('.horizontal-menu .page-navigation >.nav-item');
navItemClicked.on("click", function(event) {
if(window.matchMedia('(max-width: 991px)').matches) {
if(!($(this).hasClass('show-submenu'))) {
navItemClicked.removeClass('show-submenu');
}
$(this).toggleClass('show-submenu');
}
})
$(window).scroll(function() {
if(window.matchMedia('(min-width: 992px)').matches) {
var header = $('.horizontal-menu');
if ($(window).scrollTop() >= 60) {
$(header).addClass('fixed-on-scroll');
} else {
$(header).removeClass('fixed-on-scroll');
}
}
});
// Prevent body scrolling while sidebar scroll
$('.sidebar .sidebar-body').hover(function () {
$('body').addClass('overflow-hidden');
}, function () {
$('body').removeClass('overflow-hidden');
});
});
})(jQuery);
public/assets/js/tinymce.js
+33
View File
@@ -0,0 +1,33 @@
// npm package: tinymce
// github link: https://github.com/tinymce/tinymce
$(function() {
'use strict';
//Tinymce editor
if ($("#tinymceExample").length) {
tinymce.init({
selector: '#tinymceExample',
min_height: 350,
default_text_color: 'red',
plugins: [
'advlist', 'autoresize', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'pagebreak',
'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen',
],
toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',
image_advtab: true,
templates: [{
title: 'Test template 1',
content: 'Test 1'
},
{
title: 'Test template 2',
content: 'Test 2'
}
],
content_css: []
});
}
});
public/assets/js/typeahead.js
+65
View File
@@ -0,0 +1,65 @@
// npm package: typeahead.js
// github link: https://github.com/twitter/typeahead.js
$(function() {
'use strict'
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
var substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
for (var i = 0; i < strs.length; i++) {
if (substrRegex.test(strs[i])) {
matches.push(strs[i]);
}
}
cb(matches);
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
$('#the-basics .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'states',
source: substringMatcher(states)
});
// constructs the suggestion engine
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
local: states
});
$('#bloodhound .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
name: 'states',
source: states
});
});
public/assets/js/wizard.js
+20
View File
@@ -0,0 +1,20 @@
// npm package: jquery-steps
// github link: https://github.com/rstaib/jquery-steps/
$(function() {
'use strict';
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft"
});
$("#wizardVertical").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: 'vertical'
});
});