first commit
This commit is contained in:
CHIEFSOFT\ameye
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,786 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Bar Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Bar chart
|
||||
var chartBarColors = getChartColorsArray("bar_chart");
|
||||
if(chartBarColors){
|
||||
var options = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
data: [380, 430, 450, 475, 550, 584, 780, 1100, 1220, 1365]
|
||||
}],
|
||||
colors: chartBarColors,
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
|
||||
}
|
||||
}
|
||||
var chart = new ApexCharts(document.querySelector("#bar_chart"),options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Custom DataLabels Bar
|
||||
var chartDatalabelsBarColors = getChartColorsArray("custom_datalabels_bar");
|
||||
if(chartDatalabelsBarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '100%',
|
||||
distributed: true,
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'bottom'
|
||||
},
|
||||
}
|
||||
},
|
||||
colors: chartDatalabelsBarColors,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
textAnchor: 'start',
|
||||
style: {
|
||||
colors: ['#fff']
|
||||
},
|
||||
formatter: function (val, opt) {
|
||||
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
|
||||
},
|
||||
offsetX: 0,
|
||||
dropShadow: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
|
||||
'United States', 'China', 'India'
|
||||
],
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Custom DataLabels',
|
||||
align: 'center',
|
||||
floating: true,
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Category Names as DataLabels inside bars',
|
||||
align: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function () {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#custom_datalabels_bar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Stacked Bar Charts
|
||||
var chartStackedBarColors = getChartColorsArray("stacked_bar");
|
||||
if(chartStackedBarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Marine Sprite',
|
||||
data: [44, 55, 41, 37, 22, 43, 21]
|
||||
}, {
|
||||
name: 'Striking Calf',
|
||||
data: [53, 32, 33, 52, 13, 43, 32]
|
||||
}, {
|
||||
name: 'Tank Picture',
|
||||
data: [12, 17, 11, 9, 15, 11, 20]
|
||||
}, {
|
||||
name: 'Bucket Slope',
|
||||
data: [9, 7, 5, 8, 6, 9, 4]
|
||||
}, {
|
||||
name: 'Reborn Kid',
|
||||
data: [25, 12, 19, 32, 25, 24, 10]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
title: {
|
||||
text: 'Fiction Books Sales',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: undefined
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
offsetX: 40
|
||||
},
|
||||
colors: chartStackedBarColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#stacked_bar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Stacked Bars 100
|
||||
var chartStackedBar100Colors = getChartColorsArray("stacked_bar_100");
|
||||
if(chartStackedBar100Colors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Marine Sprite',
|
||||
data: [44, 55, 41, 37, 22, 43, 21]
|
||||
}, {
|
||||
name: 'Striking Calf',
|
||||
data: [53, 32, 33, 52, 13, 43, 32]
|
||||
}, {
|
||||
name: 'Tank Picture',
|
||||
data: [12, 17, 11, 9, 15, 11, 20]
|
||||
}, {
|
||||
name: 'Bucket Slope',
|
||||
data: [9, 7, 5, 8, 6, 9, 4]
|
||||
}, {
|
||||
name: 'Reborn Kid',
|
||||
data: [25, 12, 19, 32, 25, 24, 10]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
stacked: true,
|
||||
stackType: '100%',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
title: {
|
||||
text: '100% Stacked Bar',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
offsetX: 40
|
||||
},
|
||||
colors: chartStackedBar100Colors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#stacked_bar_100"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Bar with Negative Values
|
||||
var chartNegativeBarColors = getChartColorsArray("negative_bars");
|
||||
if(chartNegativeBarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Males',
|
||||
data: [0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2, 4.5,
|
||||
3.9, 3.5, 3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Females',
|
||||
data: [-0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3, -4.4,
|
||||
-4.1, -4, -4.1, -3.4, -3.1, -2.8
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 360,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
colors: chartNegativeBarColors,
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '80%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ["#fff"]
|
||||
},
|
||||
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
title: {
|
||||
text: 'Age',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
shared: false,
|
||||
x: {
|
||||
formatter: function (val) {
|
||||
return val
|
||||
}
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return Math.abs(val) + "%"
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Mauritius population pyramid 2011',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['85+', '80-84', '75-79', '70-74', '65-69', '60-64', '55-59', '50-54',
|
||||
'45-49', '40-44', '35-39', '30-34', '25-29', '20-24', '15-19', '10-14', '5-9',
|
||||
'0-4'
|
||||
],
|
||||
title: {
|
||||
text: 'Percent'
|
||||
},
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return Math.abs(Math.round(val)) + "%"
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#negative_bars"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Bar with Markers
|
||||
var chartBarMarkersColors = getChartColorsArray("bar_markers");
|
||||
if(chartBarMarkersColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Actual',
|
||||
data: [{
|
||||
x: '2011',
|
||||
y: 12,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 14,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2012',
|
||||
y: 44,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 54,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2013',
|
||||
y: 54,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 52,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2014',
|
||||
y: 66,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 65,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2015',
|
||||
y: 81,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 66,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2016',
|
||||
y: 67,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 70,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
}
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
colors: chartBarMarkersColors,
|
||||
dataLabels: {
|
||||
formatter: function (val, opt) {
|
||||
var goals =
|
||||
opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex]
|
||||
.goals
|
||||
|
||||
// if (goals && goals.length) {
|
||||
// return `${val} / ${goals[0].value}`
|
||||
// }
|
||||
return val
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
showForSingleSeries: true,
|
||||
customLegendItems: ['Actual', 'Expected'],
|
||||
markers: {
|
||||
fillColors: chartBarMarkersColors
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#bar_markers"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Reversed Bar Chart
|
||||
var chartBarReversedColors = getChartColorsArray("reversed_bars");
|
||||
if(chartBarReversedColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [400, 430, 448, 470, 540, 580, 690]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
annotations: {
|
||||
xaxis: [{
|
||||
x: 500,
|
||||
borderColor: '#038edc',
|
||||
label: {
|
||||
borderColor: '#038edc',
|
||||
style: {
|
||||
color: '#fff',
|
||||
background: '#038edc',
|
||||
},
|
||||
text: 'X annotation',
|
||||
}
|
||||
}],
|
||||
yaxis: [{
|
||||
y: 'July',
|
||||
y2: 'September',
|
||||
label: {
|
||||
text: 'Y annotation'
|
||||
}
|
||||
}]
|
||||
},
|
||||
colors: chartBarReversedColors,
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
},
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
reversed: true,
|
||||
axisTicks: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#reversed_bars"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Patterned Charts
|
||||
var chartPatternedColors = getChartColorsArray("patterned_bars");
|
||||
if(chartPatternedColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Marine Sprite',
|
||||
data: [44, 55, 41, 37, 22, 43, 21]
|
||||
}, {
|
||||
name: 'Striking Calf',
|
||||
data: [53, 32, 33, 52, 13, 43, 32]
|
||||
}, {
|
||||
name: 'Tank Picture',
|
||||
data: [12, 17, 11, 9, 15, 11, 20]
|
||||
}, {
|
||||
name: 'Bucket Slope',
|
||||
data: [9, 7, 5, 8, 6, 9, 4]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
stacked: true,
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 1,
|
||||
opacity: 0.25
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '60%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
},
|
||||
title: {
|
||||
text: 'Compare Sales Strategy',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: undefined
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
shared: false,
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'pattern',
|
||||
opacity: 1,
|
||||
pattern: {
|
||||
style: ['circles', 'slantedLines', 'verticalLines', 'horizontalLines'], // string or array of strings
|
||||
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: 'none'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'right',
|
||||
offsetY: 40
|
||||
},
|
||||
colors: chartPatternedColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#patterned_bars"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Groups Bar Charts
|
||||
var chartGroupbarColors = getChartColorsArray("grouped_bar");
|
||||
if(chartGroupbarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [44, 55, 41, 64, 22, 43, 21]
|
||||
}, {
|
||||
data: [53, 32, 33, 52, 13, 44, 32]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 410,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'top',
|
||||
},
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
offsetX: -6,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#fff']
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
|
||||
},
|
||||
colors: chartGroupbarColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#grouped_bar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Bar with Images
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'coins',
|
||||
data: [2, 4, 3, 4, 3, 5, 5, 6.5, 6, 5, 4, 5, 8, 7, 7, 8, 8, 10, 9, 9, 12, 12,
|
||||
11, 12, 13, 14, 16, 14, 15, 17, 19, 21
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 410,
|
||||
animations: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '100%',
|
||||
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
colors: ["#fff"],
|
||||
width: 0.2
|
||||
},
|
||||
labels: Array.apply(null, {
|
||||
length: 39
|
||||
}).map(function (el, index) {
|
||||
return index + 1;
|
||||
}),
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
text: 'Weight',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
position: 'back'
|
||||
},
|
||||
title: {
|
||||
text: 'Paths filled by clipped image',
|
||||
align: 'right',
|
||||
offsetY: 30,
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'image',
|
||||
opacity: 0.87,
|
||||
image: {
|
||||
src: ['../build/images/small/img-4.jpg'],
|
||||
width: 466,
|
||||
height: 406
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
if(document.querySelector("#bar_images")){
|
||||
var chart = new ApexCharts(document.querySelector("#bar_images"), options);
|
||||
chart.render();
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Boxplot Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var chartBoxBasicColors = getChartColorsArray("basic_box");
|
||||
if(chartBoxBasicColors){
|
||||
var options = {
|
||||
series: [{
|
||||
type: 'boxPlot',
|
||||
data: [{
|
||||
x: 'Jan 2015',
|
||||
y: [54, 66, 69, 75, 88]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2016',
|
||||
y: [43, 65, 69, 76, 81]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2017',
|
||||
y: [31, 39, 45, 51, 59]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2018',
|
||||
y: [39, 46, 55, 65, 71]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2019',
|
||||
y: [29, 31, 35, 39, 44]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2020',
|
||||
y: [41, 49, 58, 61, 67]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2021',
|
||||
y: [54, 59, 66, 71, 88]
|
||||
}
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
type: 'boxPlot',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Basic BoxPlot Chart',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
boxPlot: {
|
||||
colors: {
|
||||
upper: chartBoxBasicColors[0],
|
||||
lower: chartBoxBasicColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartBoxBasicColors[2]]
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_box"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Boxplot-Scatter
|
||||
var chartBoxPlotColors = getChartColorsArray("box_plot");
|
||||
if(chartBoxPlotColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Box',
|
||||
type: 'boxPlot',
|
||||
data: [{
|
||||
x: new Date('2017-01-01').getTime(),
|
||||
y: [54, 66, 69, 75, 88]
|
||||
},
|
||||
{
|
||||
x: new Date('2018-01-01').getTime(),
|
||||
y: [43, 65, 69, 76, 81]
|
||||
},
|
||||
{
|
||||
x: new Date('2019-01-01').getTime(),
|
||||
y: [31, 39, 45, 51, 59]
|
||||
},
|
||||
{
|
||||
x: new Date('2020-01-01').getTime(),
|
||||
y: [39, 46, 55, 65, 71]
|
||||
},
|
||||
{
|
||||
x: new Date('2021-01-01').getTime(),
|
||||
y: [29, 31, 35, 39, 44]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Outliers',
|
||||
type: 'scatter',
|
||||
data: [{
|
||||
x: new Date('2017-01-01').getTime(),
|
||||
y: 32
|
||||
},
|
||||
{
|
||||
x: new Date('2018-01-01').getTime(),
|
||||
y: 25
|
||||
},
|
||||
{
|
||||
x: new Date('2019-01-01').getTime(),
|
||||
y: 64
|
||||
},
|
||||
{
|
||||
x: new Date('2020-01-01').getTime(),
|
||||
y: 27
|
||||
},
|
||||
{
|
||||
x: new Date('2020-01-01').getTime(),
|
||||
y: 78
|
||||
},
|
||||
{
|
||||
x: new Date('2021-01-01').getTime(),
|
||||
y: 15
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'boxPlot',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: [chartBoxPlotColors[0], chartBoxPlotColors[1]],
|
||||
title: {
|
||||
text: 'BoxPlot - Scatter Chart',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
tooltip: {
|
||||
formatter: function (val) {
|
||||
return new Date(val).getFullYear()
|
||||
}
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
boxPlot: {
|
||||
colors: {
|
||||
upper: chartBoxPlotColors[2],
|
||||
lower: chartBoxPlotColors[3]
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartBoxPlotColors[4]]
|
||||
},
|
||||
tooltip: {
|
||||
shared: false,
|
||||
intersect: true
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#box_plot"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// box_plot_hori
|
||||
var chartBoxPlotHoriColors = getChartColorsArray("box_plot_hori");
|
||||
if (chartBoxPlotHoriColors) {
|
||||
var options = {
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'Category A',
|
||||
y: [54, 66, 69, 75, 88]
|
||||
},
|
||||
{
|
||||
x: 'Category B',
|
||||
y: [43, 65, 69, 76, 81]
|
||||
},
|
||||
{
|
||||
x: 'Category C',
|
||||
y: [31, 39, 45, 51, 59]
|
||||
},
|
||||
{
|
||||
x: 'Category D',
|
||||
y: [39, 46, 55, 65, 71]
|
||||
},
|
||||
{
|
||||
x: 'Category E',
|
||||
y: [29, 31, 35, 39, 44]
|
||||
},
|
||||
{
|
||||
x: 'Category F',
|
||||
y: [41, 49, 58, 61, 67]
|
||||
},
|
||||
{
|
||||
x: 'Category G',
|
||||
y: [54, 59, 66, 71, 88]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'boxPlot',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '50%'
|
||||
},
|
||||
boxPlot: {
|
||||
colors: {
|
||||
upper: chartBoxPlotHoriColors[0],
|
||||
lower: chartBoxPlotHoriColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartBoxPlotHoriColors[2]]
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#box_plot_hori"), options);
|
||||
chart.render();
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Bubble Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function(value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Bubble Charts Generate Data
|
||||
function generateData(baseval, count, yrange) {
|
||||
var i = 0;
|
||||
var series = [];
|
||||
while (i < count) {
|
||||
var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
|
||||
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
||||
var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
|
||||
|
||||
series.push([x, y, z]);
|
||||
baseval += 86400000;
|
||||
i++;
|
||||
}
|
||||
return series;
|
||||
}
|
||||
|
||||
// Simple Bubble
|
||||
var chartBubbleSimpleColors = getChartColorsArray("simple_bubble");
|
||||
if (chartBubbleSimpleColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Bubble1',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Bubble2',
|
||||
data: generateData(new Date('12 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Bubble3',
|
||||
data: generateData(new Date('13 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Bubble4',
|
||||
data: generateData(new Date('14 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bubble',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.8
|
||||
},
|
||||
title: {
|
||||
text: 'Simple Bubble Chart',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 12,
|
||||
type: 'category',
|
||||
},
|
||||
yaxis: {
|
||||
max: 70
|
||||
},
|
||||
colors: chartBubbleSimpleColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#simple_bubble"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// 3D Bubble
|
||||
var chartBubbleColors = getChartColorsArray("bubble_chart");
|
||||
if (chartBubbleColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Product1',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product2',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product3',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product4',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bubble',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
},
|
||||
title: {
|
||||
text: '3D Bubble Chart',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 12,
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
rotate: 0,
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
max: 70
|
||||
},
|
||||
theme: {
|
||||
palette: 'palette2'
|
||||
},
|
||||
colors: chartBubbleColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#bubble_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
@@ -0,0 +1,988 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Candlestick Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function(value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Candlestick Charts
|
||||
var chartCandlestickBasicColors = getChartColorsArray("basic_candlestick");
|
||||
if (chartCandlestickBasicColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
},
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
type: 'candlestick',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickBasicColors[0],
|
||||
downward: chartCandlestickBasicColors[1],
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'CandleStick Chart',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_candlestick"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Candlestick Synced with Brush Chart (Combo)
|
||||
var chartCandlestickComboColors = getChartColorsArray("combo_candlestick");
|
||||
if (chartCandlestickComboColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
data: seriesData
|
||||
}],
|
||||
chart: {
|
||||
type: 'candlestick',
|
||||
height: 200,
|
||||
id: 'candles',
|
||||
toolbar: {
|
||||
autoSelected: 'pan',
|
||||
show: false
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickComboColors[0],
|
||||
downward: chartCandlestickComboColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#combo_candlestick"), options);
|
||||
chart.render();
|
||||
}
|
||||
var chartCandlestickComboColors = getChartColorsArray("combo_candlestick_chart");
|
||||
if (chartCandlestickComboColors) {
|
||||
var optionsBar = {
|
||||
series: [{
|
||||
name: 'volume',
|
||||
data: seriesDataLinear
|
||||
}],
|
||||
chart: {
|
||||
height: 150,
|
||||
type: 'bar',
|
||||
brush: {
|
||||
enabled: true,
|
||||
target: 'candles'
|
||||
},
|
||||
selection: {
|
||||
enabled: true,
|
||||
xaxis: {
|
||||
min: new Date('20 Jan 2017').getTime(),
|
||||
max: new Date('10 Dec 2017').getTime()
|
||||
},
|
||||
fill: {
|
||||
color: '#ccc',
|
||||
opacity: 0.4
|
||||
},
|
||||
stroke: {
|
||||
color: '#0d47a1',
|
||||
}
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '80%',
|
||||
colors: {
|
||||
ranges: [{
|
||||
from: -1000,
|
||||
to: 0,
|
||||
color: '#f1734f'
|
||||
}, {
|
||||
from: 1,
|
||||
to: 10000,
|
||||
color: '#f7cc53'
|
||||
}],
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
axisBorder: {
|
||||
offsetX: 13
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chartBar = new ApexCharts(document.querySelector("#combo_candlestick_chart"), optionsBar);
|
||||
chartBar.render();
|
||||
}
|
||||
|
||||
|
||||
// Category X-axis
|
||||
var chartCandlestickCategoryColors = getChartColorsArray("category_candlestick");
|
||||
if (chartCandlestickCategoryColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'candle',
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
},
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'candlestick',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: 'CandleStick Chart - Category X-axis',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickCategoryColors[0],
|
||||
downward: chartCandlestickCategoryColors[1],
|
||||
}
|
||||
}
|
||||
},
|
||||
annotations: {
|
||||
xaxis: [{
|
||||
x: 'Oct 06 14:00',
|
||||
borderColor: chartCandlestickCategoryColors[0],
|
||||
label: {
|
||||
borderColor: chartCandlestickCategoryColors[1],
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
color: '#fff',
|
||||
background: chartCandlestickCategoryColors[1]
|
||||
},
|
||||
orientation: 'horizontal',
|
||||
offsetY: 7,
|
||||
text: 'Annotation Test'
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
labels: {
|
||||
formatter: function(val) {
|
||||
return dayjs(val).format('MMM DD HH:mm')
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#category_candlestick"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Candlestick with line
|
||||
'use strict';
|
||||
|
||||
// Candlestick with line
|
||||
var chartCandlestickLineColors = getChartColorsArray("candlestick_with_line");
|
||||
if (chartCandlestickLineColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: 6604
|
||||
}, {
|
||||
x: new Date(1538782200000),
|
||||
y: 6602
|
||||
}, {
|
||||
x: new Date(1538814600000),
|
||||
y: 6607
|
||||
}, {
|
||||
x: new Date(1538884800000),
|
||||
y: 6620
|
||||
}]
|
||||
}, {
|
||||
name: 'candle',
|
||||
type: 'candlestick',
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
}, {
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
}, {
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
}, {
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
}, {
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
}, {
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
}, {
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
}, {
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
}, {
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
}, {
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
}, {
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
}, {
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
}, {
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
}, {
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
}, {
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
}, {
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
}, {
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
}, {
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
}, {
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
}, {
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
}, {
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
}, {
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
}, {
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
}, {
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
}, {
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
}, {
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
}, {
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
}, {
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
}, {
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
}, {
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
}, {
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
}, {
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
}, {
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
}, {
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
}, {
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
}, {
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
}, {
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
}, {
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
}, {
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
}, {
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
}, {
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
}, {
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
}, {
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
}, {
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
}, {
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
}, {
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
}, {
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
}, {
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
}, {
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
}, {
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
}, {
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
}, {
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
}, {
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
}, {
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
}, {
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
}, {
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
}, {
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
}, {
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
}, {
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
}, {
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
}]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickLineColors[0],
|
||||
downward: chartCandlestickLineColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [chartCandlestickLineColors[2], chartCandlestickLineColors[0]],
|
||||
stroke: {
|
||||
width: [3, 1]
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
custom: [function (_ref) {
|
||||
var seriesIndex = _ref.seriesIndex;
|
||||
var dataPointIndex = _ref.dataPointIndex;
|
||||
var w = _ref.w;
|
||||
|
||||
return w.globals.series[seriesIndex][dataPointIndex];
|
||||
}, function (_ref2) {
|
||||
var seriesIndex = _ref2.seriesIndex;
|
||||
var dataPointIndex = _ref2.dataPointIndex;
|
||||
var w = _ref2.w;
|
||||
|
||||
var o = w.globals.seriesCandleO[seriesIndex][dataPointIndex];
|
||||
var h = w.globals.seriesCandleH[seriesIndex][dataPointIndex];
|
||||
var l = w.globals.seriesCandleL[seriesIndex][dataPointIndex];
|
||||
var c = w.globals.seriesCandleC[seriesIndex][dataPointIndex];
|
||||
return '<div class="apexcharts-tooltip-candlestick">' + '<div>Open: <span class="value">' + o + '</span></div>' + '<div>High: <span class="value">' + h + '</span></div>' + '<div>Low: <span class="value">' + l + '</span></div>' + '<div>Close: <span class="value">' + c + '</span></div>' + '</div>';
|
||||
}]
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#candlestick_with_line"), options);
|
||||
chart.render();
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,544 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Heatmap Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function(value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Basic Heatmap Charts
|
||||
var chartHeatMapBasicColors = getChartColorsArray("basic_heatmap");
|
||||
if (chartHeatMapBasicColors) {
|
||||
var options = {
|
||||
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
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 450,
|
||||
type: 'heatmap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
colors: [chartHeatMapBasicColors[0]],
|
||||
title: {
|
||||
text: 'HeatMap Chart (Single color)',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartHeatMapBasicColors[1]]
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_heatmap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Generate Data Script
|
||||
|
||||
function generateData(count, yrange) {
|
||||
var i = 0;
|
||||
var series = [];
|
||||
while (i < count) {
|
||||
var x = (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 data = [{
|
||||
name: 'W1',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W2',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W3',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W4',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W5',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W6',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W7',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W8',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W9',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W10',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W11',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W12',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W13',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W14',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W15',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
data.reverse()
|
||||
|
||||
var colors = ["#f7cc53", "#f1734f", "#663f59", "#6a6e94", "#4e88b4", "#00a7c6", "#18d8d8", '#a9d794', '#46aF78', '#a93f55', '#8c5e58', '#2176ff', '#5fd0f3', '#74788d', '#51d28c']
|
||||
|
||||
colors.reverse()
|
||||
|
||||
// Multiple Series - Heatmap
|
||||
var chartHeatMapMultipleColors = getChartColorsArray("multiple_heatmap");
|
||||
if (chartHeatMapMultipleColors) {
|
||||
var options = {
|
||||
series: data,
|
||||
chart: {
|
||||
height: 450,
|
||||
type: 'heatmap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
colors: [chartHeatMapMultipleColors[0], chartHeatMapMultipleColors[1], chartHeatMapMultipleColors[2], chartHeatMapMultipleColors[3], chartHeatMapMultipleColors[4], chartHeatMapMultipleColors[5], chartHeatMapMultipleColors[6], chartHeatMapMultipleColors[7]],
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
categories: ['10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '01:00', '01:30']
|
||||
},
|
||||
title: {
|
||||
text: 'HeatMap Chart (Different color shades for each series)',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
right: 20
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartHeatMapMultipleColors[8]]
|
||||
}
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#multiple_heatmap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Color Range
|
||||
var chartHeatMapColors = getChartColorsArray("color_heatmap");
|
||||
if (chartHeatMapColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Jan',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Feb',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Mar',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Apr',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'May',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Jun',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Jul',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Aug',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Sep',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'heatmap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
heatmap: {
|
||||
shadeIntensity: 0.5,
|
||||
radius: 0,
|
||||
useFillColorAsStroke: true,
|
||||
colorScale: {
|
||||
ranges: [{
|
||||
from: -30,
|
||||
to: 5,
|
||||
name: 'Low',
|
||||
color: chartHeatMapColors[0]
|
||||
},
|
||||
{
|
||||
from: 6,
|
||||
to: 20,
|
||||
name: 'Medium',
|
||||
color: chartHeatMapColors[1]
|
||||
},
|
||||
{
|
||||
from: 21,
|
||||
to: 45,
|
||||
name: 'High',
|
||||
color: chartHeatMapColors[2]
|
||||
},
|
||||
{
|
||||
from: 46,
|
||||
to: 55,
|
||||
name: 'Extreme',
|
||||
color: chartHeatMapColors[3]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 1
|
||||
},
|
||||
title: {
|
||||
text: 'HeatMap Chart with Color Range',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#color_heatmap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Heatmap - Range Without Shades
|
||||
var chartHeatMapShadesColors = getChartColorsArray("shades_heatmap");
|
||||
if (chartHeatMapShadesColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Metric1',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric2',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric3',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric4',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric5',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric6',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric7',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric8',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric8',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'heatmap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
plotOptions: {
|
||||
heatmap: {
|
||||
radius: 30,
|
||||
enableShades: false,
|
||||
colorScale: {
|
||||
ranges: [{
|
||||
from: 0,
|
||||
to: 50,
|
||||
color: chartHeatMapShadesColors[0]
|
||||
},
|
||||
{
|
||||
from: 51,
|
||||
to: 100,
|
||||
color: chartHeatMapShadesColors[1]
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#fff']
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
},
|
||||
title: {
|
||||
text: 'Rounded (Range without Shades)',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#shades_heatmap"), options);
|
||||
chart.render();
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,370 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Mixed Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Mixed - Line Column Chart
|
||||
var chartLineColumnColors = getChartColorsArray("line_column_chart");
|
||||
if(chartLineColumnColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Website Blog',
|
||||
type: 'column',
|
||||
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
|
||||
}, {
|
||||
name: 'Social Media',
|
||||
type: 'line',
|
||||
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: [0, 4]
|
||||
},
|
||||
title: {
|
||||
text: 'Traffic Sources',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
enabledOnSeries: [1]
|
||||
},
|
||||
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: [{
|
||||
title: {
|
||||
text: 'Website Blog',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
|
||||
}, {
|
||||
opposite: true,
|
||||
title: {
|
||||
text: 'Social Media',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
}
|
||||
}],
|
||||
colors: chartLineColumnColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#line_column_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Multiple Y-Axis Charts
|
||||
var chartMultiColors = getChartColorsArray("multi_chart");
|
||||
if(chartMultiColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Income',
|
||||
type: 'column',
|
||||
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
|
||||
}, {
|
||||
name: 'Cashflow',
|
||||
type: 'column',
|
||||
data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
type: 'line',
|
||||
data: [20, 29, 37, 36, 44, 45, 50, 58]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: [1, 1, 4]
|
||||
},
|
||||
title: {
|
||||
text: 'XYZ - Stock Analysis (2009 - 2016)',
|
||||
align: 'left',
|
||||
offsetX: 110,
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
|
||||
},
|
||||
yaxis: [{
|
||||
axisTicks: {
|
||||
show: true,
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: '#038edc'
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#038edc',
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: "Income (thousand crores)",
|
||||
style: {
|
||||
color: '#038edc',
|
||||
fontWeight: 600
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
{
|
||||
seriesName: 'Income',
|
||||
opposite: true,
|
||||
axisTicks: {
|
||||
show: true,
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: '#038edc'
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#038edc',
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: "Operating Cashflow (thousand crores)",
|
||||
style: {
|
||||
color: '#038edc',
|
||||
fontWeight: 600
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
seriesName: 'Revenue',
|
||||
opposite: true,
|
||||
axisTicks: {
|
||||
show: true,
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: '#51d28c'
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#51d28c',
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "Revenue (thousand crores)",
|
||||
style: {
|
||||
color: '#51d28c',
|
||||
fontWeight: 600
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
|
||||
offsetY: 30,
|
||||
offsetX: 60
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
horizontalAlign: 'left',
|
||||
offsetX: 40
|
||||
},
|
||||
colors: chartMultiColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#multi_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Line & Area Charts
|
||||
var chartLineAreaColors = getChartColorsArray("line_area_chart");
|
||||
if(chartLineAreaColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'TEAM A',
|
||||
type: 'area',
|
||||
data: [44, 55, 31, 47, 31, 43, 26, 41, 31, 47, 33]
|
||||
}, {
|
||||
name: 'TEAM B',
|
||||
type: 'line',
|
||||
data: [55, 69, 45, 61, 43, 54, 37, 52, 44, 61, 43]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: [0.35, 1],
|
||||
},
|
||||
labels: ['Dec 01', 'Dec 02', 'Dec 03', 'Dec 04', 'Dec 05', 'Dec 06', 'Dec 07', 'Dec 08', 'Dec 09 ', 'Dec 10', 'Dec 11'],
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
yaxis: [{
|
||||
title: {
|
||||
text: 'Series A',
|
||||
},
|
||||
},
|
||||
{
|
||||
opposite: true,
|
||||
title: {
|
||||
text: 'Series B',
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " points";
|
||||
}
|
||||
return y;
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: chartLineAreaColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#line_area_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Line Cloumn & Area Charts
|
||||
|
||||
var chartLineAreaMultiColors = getChartColorsArray("line_area_charts");
|
||||
if(chartLineAreaMultiColors){
|
||||
var options = {
|
||||
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]
|
||||
}, {
|
||||
name: 'TEAM C',
|
||||
type: 'line',
|
||||
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: [0, 2, 5],
|
||||
curve: 'smooth'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%'
|
||||
}
|
||||
},
|
||||
|
||||
fill: {
|
||||
opacity: [0.85, 0.25, 1],
|
||||
gradient: {
|
||||
inverseColors: false,
|
||||
shade: 'light',
|
||||
type: "vertical",
|
||||
opacityFrom: 0.85,
|
||||
opacityTo: 0.55,
|
||||
stops: [0, 100, 100, 100]
|
||||
}
|
||||
},
|
||||
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'
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Points',
|
||||
},
|
||||
min: 0
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " points";
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: chartLineAreaMultiColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#line_area_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
@@ -0,0 +1,348 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Pie Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Simple Pie Charts
|
||||
|
||||
var chartPieBasicColors = getChartColorsArray("simple_pie_chart");
|
||||
if(chartPieBasicColors){
|
||||
var options = {
|
||||
series: [44, 55, 13, 43, 22],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'pie',
|
||||
},
|
||||
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
colors: chartPieBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#simple_pie_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Simple Donut Charts
|
||||
var chartDonutBasicColors = getChartColorsArray("simple_dount_chart");
|
||||
if(chartDonutBasicColors){
|
||||
var options = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'donut',
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
colors: chartDonutBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#simple_dount_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Updating Donut Charts
|
||||
var chartDonutupdatingColors = getChartColorsArray("updating_donut_chart");
|
||||
if(chartDonutupdatingColors){
|
||||
var options = {
|
||||
series: [44, 55, 13, 33],
|
||||
chart: {
|
||||
height: 280,
|
||||
type: 'donut',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
colors: chartDonutupdatingColors
|
||||
};
|
||||
|
||||
var upadatedonutchart = new ApexCharts(document.querySelector("#updating_donut_chart"), options);
|
||||
upadatedonutchart.render();
|
||||
|
||||
function appendData() {
|
||||
var arr = upadatedonutchart.w.globals.series.slice()
|
||||
arr.push(Math.floor(Math.random() * (100 - 1 + 1)) + 1)
|
||||
return arr;
|
||||
}
|
||||
|
||||
function removeData() {
|
||||
var arr = upadatedonutchart.w.globals.series.slice()
|
||||
arr.pop()
|
||||
return arr;
|
||||
}
|
||||
|
||||
function randomize() {
|
||||
return upadatedonutchart.w.globals.series.map(function () {
|
||||
return Math.floor(Math.random() * (100 - 1 + 1)) + 1
|
||||
})
|
||||
}
|
||||
|
||||
function reset() {
|
||||
return options.series
|
||||
}
|
||||
|
||||
document.querySelector("#randomize").addEventListener("click", function () {
|
||||
upadatedonutchart.updateSeries(randomize())
|
||||
})
|
||||
|
||||
document.querySelector("#add").addEventListener("click", function () {
|
||||
upadatedonutchart.updateSeries(appendData())
|
||||
})
|
||||
|
||||
document.querySelector("#remove").addEventListener("click", function () {
|
||||
upadatedonutchart.updateSeries(removeData())
|
||||
})
|
||||
|
||||
document.querySelector("#reset").addEventListener("click", function () {
|
||||
upadatedonutchart.updateSeries(reset())
|
||||
})
|
||||
}
|
||||
|
||||
// Gradient Donut Chart
|
||||
var chartPieGradientColors = getChartColorsArray("gradient_chart");
|
||||
if(chartPieGradientColors){
|
||||
var options = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'donut',
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
startAngle: -90,
|
||||
endAngle: 270
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
},
|
||||
legend: {
|
||||
formatter: function (val, opts) {
|
||||
return val + " - " + opts.w.globals.series[opts.seriesIndex]
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Gradient Donut with custom Start-angle',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
colors: chartPieGradientColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#gradient_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Pattern Donut chart
|
||||
var chartPiePatternColors = getChartColorsArray("pattern_chart");
|
||||
if(chartPiePatternColors){
|
||||
var options = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'donut',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
color: '#111',
|
||||
top: -1,
|
||||
left: 3,
|
||||
blur: 3,
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 0,
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
total: {
|
||||
showAlways: true,
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: ["Comedy", "Action", "SciFi", "Drama", "Horror"],
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
blur: 3,
|
||||
opacity: 0.8
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'pattern',
|
||||
opacity: 1,
|
||||
pattern: {
|
||||
enabled: true,
|
||||
style: ['verticalLines', 'squares', 'horizontalLines', 'circles', 'slantedLines'],
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: 'none'
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
palette: 'palette2'
|
||||
},
|
||||
title: {
|
||||
text: "Favourite Movie Type",
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
colors: chartPiePatternColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#pattern_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Pie Chart with Image Fill
|
||||
var chartPieImageColors = getChartColorsArray("image_pie_chart");
|
||||
if(chartPieImageColors){
|
||||
var options = {
|
||||
series: [44, 33, 54, 45],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'pie',
|
||||
},
|
||||
colors: ['#93C3EE', '#E5C6A0', '#669DB5', '#94A74A'],
|
||||
fill: {
|
||||
type: 'image',
|
||||
opacity: 0.85,
|
||||
image: {
|
||||
src: ['../build/images/small/img-1.jpg', '../build/images/small/img-2.jpg', '../build/images/small/img-3.jpg', '../build/images/small/img-4.jpg'],
|
||||
width: 25,
|
||||
imagedHeight: 25
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 4
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#111']
|
||||
},
|
||||
background: {
|
||||
enabled: true,
|
||||
foreColor: '#fff',
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#image_pie_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// monochrome_pie_chart
|
||||
var options = {
|
||||
series: [25, 15, 44, 55, 41, 17],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'pie',
|
||||
},
|
||||
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
color: '#405189',
|
||||
shadeTo: 'light',
|
||||
shadeIntensity: 0.6
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
pie: {
|
||||
dataLabels: {
|
||||
offset: -5
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: "Monochrome Pie",
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
formatter: function (val, opts) {
|
||||
var name = opts.w.globals.labels[opts.seriesIndex];
|
||||
return [name, val.toFixed(1) + '%'];
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
|
||||
if(document.querySelector("#monochrome_pie_chart")){
|
||||
var chart = new ApexCharts(document.querySelector("#monochrome_pie_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Polar Area Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Polar Area
|
||||
var chartPolarareaBasicColors = getChartColorsArray("basic_polar_area");
|
||||
if(chartPolarareaBasicColors){
|
||||
var options = {
|
||||
series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
|
||||
chart: {
|
||||
type: 'polarArea',
|
||||
width: 400,
|
||||
},
|
||||
labels: ['Series A', 'Series B', 'Series C', 'Series D', 'Series E', 'Series F', 'Series G', 'Series H', 'Series I'],
|
||||
stroke: {
|
||||
colors: ['#fff']
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.8
|
||||
},
|
||||
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
colors: chartPolarareaBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_polar_area"), options);
|
||||
chart.render();
|
||||
}
|
||||
// Polar-Area Monochrome Charts
|
||||
|
||||
var options = {
|
||||
series: [42, 47, 52, 58, 65],
|
||||
chart: {
|
||||
width: 400,
|
||||
type: 'polarArea'
|
||||
},
|
||||
labels: ['Rose A', 'Rose B', 'Rose C', 'Rose D', 'Rose E'],
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: undefined
|
||||
},
|
||||
yaxis: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
plotOptions: {
|
||||
polarArea: {
|
||||
rings: {
|
||||
strokeWidth: 0
|
||||
},
|
||||
spokes: {
|
||||
strokeWidth: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
mode: 'light',
|
||||
palette: 'palette1',
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
shadeTo: 'light',
|
||||
color: '#405189',
|
||||
shadeIntensity: 0.6
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if(document.querySelector("#monochrome_polar_area")){
|
||||
var chart = new ApexCharts(document.querySelector("#monochrome_polar_area"), options);
|
||||
chart.render();
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.comom
|
||||
File: Radar Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Radar Chart
|
||||
var chartRadarBasicColors = getChartColorsArray("basic_radar");
|
||||
if(chartRadarBasicColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Series 1',
|
||||
data: [80, 50, 30, 40, 100, 20],
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: chartRadarBasicColors,
|
||||
xaxis: {
|
||||
categories: ['January', 'February', 'March', 'April', 'May', 'June']
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_radar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Radar Chart - Multi series
|
||||
var chartRadarMultiColors = getChartColorsArray("multi_radar");
|
||||
if(chartRadarMultiColors){
|
||||
var options = {
|
||||
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],
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radar',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 1,
|
||||
left: 1,
|
||||
top: 1
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.2
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: chartRadarMultiColors,
|
||||
xaxis: {
|
||||
categories: ['2014', '2015', '2016', '2017', '2018', '2019']
|
||||
}
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#multi_radar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Polygon - Radar Charts
|
||||
var chartRadarPolyradarColors = getChartColorsArray("polygon_radar");
|
||||
if(chartRadarPolyradarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Series 1',
|
||||
data: [20, 100, 40, 30, 50, 80, 33],
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radar',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
plotOptions: {
|
||||
radar: {
|
||||
size: 140,
|
||||
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Radar with Polygon Fill',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
colors: chartRadarPolyradarColors,
|
||||
markers: {
|
||||
size: 4,
|
||||
colors: ['#fff'],
|
||||
strokeColor: '#f34e4e',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 7,
|
||||
labels: {
|
||||
formatter: function (val, i) {
|
||||
if (i % 2 === 0) {
|
||||
return val
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#polygon_radar"), options);
|
||||
chart.render();
|
||||
}
|
||||
@@ -0,0 +1,399 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Radialbar Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Radialbar Charts
|
||||
var chartRadialbarBasicColors = getChartColorsArray("basic_radialbar");
|
||||
if(chartRadialbarBasicColors){
|
||||
var options = {
|
||||
series: [70],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '70%',
|
||||
}
|
||||
},
|
||||
},
|
||||
labels: ['Cricket'],
|
||||
colors: chartRadialbarBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Multi-Radial Bar
|
||||
var chartRadialbarMultipleColors = getChartColorsArray("multiple_radialbar");
|
||||
if(chartRadialbarMultipleColors){
|
||||
var options = {
|
||||
series: [44, 55, 67, 83],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '22px',
|
||||
},
|
||||
value: {
|
||||
fontSize: '16px',
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Total',
|
||||
formatter: function (w) {
|
||||
return 249
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
|
||||
colors: chartRadialbarMultipleColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#multiple_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Circle Chart - Custom Angle
|
||||
var chartRadialbarCircleColors = getChartColorsArray("circle_radialbar");
|
||||
if(chartRadialbarCircleColors){
|
||||
var options = {
|
||||
series: [76, 67, 61, 55],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: 0,
|
||||
startAngle: 0,
|
||||
endAngle: 270,
|
||||
hollow: {
|
||||
margin: 5,
|
||||
size: '30%',
|
||||
background: 'transparent',
|
||||
image: undefined,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
show: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: chartRadialbarCircleColors,
|
||||
labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
|
||||
legend: {
|
||||
show: true,
|
||||
floating: true,
|
||||
fontSize: '16px',
|
||||
position: 'left',
|
||||
offsetX: 160,
|
||||
offsetY: 15,
|
||||
labels: {
|
||||
useSeriesColors: true,
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
formatter: function (seriesName, opts) {
|
||||
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
|
||||
},
|
||||
itemMargin: {
|
||||
vertical: 3
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#circle_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Gradient Radialbar
|
||||
var chartRadialbarGradientColors = getChartColorsArray("gradient_radialbar");
|
||||
if(chartRadialbarGradientColors){
|
||||
var options = {
|
||||
series: [75],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radialBar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -135,
|
||||
endAngle: 225,
|
||||
hollow: {
|
||||
margin: 0,
|
||||
size: '70%',
|
||||
image: undefined,
|
||||
imageOffsetX: 0,
|
||||
imageOffsetY: 0,
|
||||
position: 'front',
|
||||
},
|
||||
track: {
|
||||
strokeWidth: '67%',
|
||||
margin: 0, // margin is in pixels
|
||||
|
||||
},
|
||||
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
offsetY: -10,
|
||||
show: true,
|
||||
color: '#888',
|
||||
fontSize: '17px'
|
||||
},
|
||||
value: {
|
||||
formatter: function (val) {
|
||||
return parseInt(val);
|
||||
},
|
||||
color: '#111',
|
||||
fontSize: '36px',
|
||||
show: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'horizontal',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: chartRadialbarGradientColors,
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100]
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
labels: ['Percent'],
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#gradient_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Stroked Gauge
|
||||
var chartStorkeRadialbarColors = getChartColorsArray("stroked_radialbar");
|
||||
if(chartStorkeRadialbarColors){
|
||||
var options = {
|
||||
series: [67],
|
||||
chart: {
|
||||
height: 326,
|
||||
type: 'radialBar',
|
||||
offsetY: -10
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -135,
|
||||
endAngle: 135,
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '16px',
|
||||
color: undefined,
|
||||
offsetY: 120
|
||||
},
|
||||
value: {
|
||||
offsetY: 76,
|
||||
fontSize: '22px',
|
||||
color: undefined,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.15,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 65, 91]
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 4
|
||||
},
|
||||
labels: ['Median Ratio'],
|
||||
colors: chartStorkeRadialbarColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#stroked_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
|
||||
// Radialbars with Image
|
||||
var chartStorkeRadialbarColors = getChartColorsArray("stroked_radialbar");
|
||||
if (chartStorkeRadialbarColors) {
|
||||
var options = {
|
||||
series: [67],
|
||||
chart: {
|
||||
height: 315,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
margin: 15,
|
||||
size: '65%',
|
||||
image: '../build/images/comingsoon.png',
|
||||
imageWidth: 56,
|
||||
imageHeight: 56,
|
||||
imageClipped: false
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
color: '#fff'
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
color: '#333',
|
||||
offsetY: 65,
|
||||
fontSize: '22px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'image',
|
||||
image: {
|
||||
src: ['../build/images/small/img-4.jpg'],
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
labels: ['Volatility'],
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#radialbar_with_img"), options);
|
||||
chart.render();
|
||||
};
|
||||
|
||||
|
||||
// Semi Circle
|
||||
var chartSemiRadialbarColors = getChartColorsArray("semi_radialbar");
|
||||
if(chartSemiRadialbarColors){
|
||||
var options = {
|
||||
series: [76],
|
||||
chart: {
|
||||
type: 'radialBar',
|
||||
height: 350,
|
||||
offsetY: -20,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
track: {
|
||||
background: "#e7e7e7",
|
||||
strokeWidth: '97%',
|
||||
margin: 5, // margin is in pixels
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 2,
|
||||
left: 0,
|
||||
color: '#999',
|
||||
opacity: 1,
|
||||
blur: 2
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false
|
||||
},
|
||||
value: {
|
||||
offsetY: -2,
|
||||
fontSize: '22px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -10
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
shadeIntensity: 0.4,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 53, 91]
|
||||
},
|
||||
},
|
||||
labels: ['Average Results'],
|
||||
colors: chartSemiRadialbarColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#semi_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
@@ -0,0 +1,359 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Scatter Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Scatter Charts
|
||||
var chartScatterBasicColors = getChartColorsArray("basic_scatter");
|
||||
if(chartScatterBasicColors){
|
||||
var options = {
|
||||
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]
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'scatter',
|
||||
zoom: {
|
||||
enabled: true,
|
||||
type: 'xy'
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 10,
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return parseFloat(val).toFixed(1)
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 7
|
||||
},
|
||||
colors: chartScatterBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_scatter"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Dtaetime - Scatter Charts
|
||||
|
||||
function generateDayWiseTimeSeries(baseval, count, yrange) {
|
||||
var i = 0;
|
||||
var series = [];
|
||||
while (i < count) {
|
||||
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
||||
|
||||
series.push([baseval, y]);
|
||||
baseval += 86400000;
|
||||
i++;
|
||||
}
|
||||
return series;
|
||||
}
|
||||
|
||||
var chartScatterDateTimeColors = getChartColorsArray("datetime_scatter");
|
||||
if(chartScatterDateTimeColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'TEAM 1',
|
||||
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'TEAM 2',
|
||||
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'TEAM 3',
|
||||
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 30, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'TEAM 4',
|
||||
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'TEAM 5',
|
||||
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 30, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'scatter',
|
||||
zoom: {
|
||||
type: 'xy'
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
},
|
||||
yaxis: {
|
||||
max: 70
|
||||
},
|
||||
colors: chartScatterDateTimeColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#datetime_scatter"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Scatter - Images Charts
|
||||
var chartScatterImagesColors = getChartColorsArray("images_scatter");
|
||||
if(chartScatterImagesColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'User A',
|
||||
data: [
|
||||
[16.4, 5.4],
|
||||
[21.7, 4],
|
||||
[25.4, 3],
|
||||
[19, 2],
|
||||
[10.9, 1],
|
||||
[13.6, 3.2],
|
||||
[10.9, 7],
|
||||
[10.9, 8.2],
|
||||
[16.4, 4],
|
||||
[13.6, 4.3],
|
||||
[13.6, 12],
|
||||
[29.9, 3],
|
||||
[10.9, 5.2],
|
||||
[16.4, 6.5],
|
||||
[10.9, 8],
|
||||
[24.5, 7.1],
|
||||
[10.9, 7],
|
||||
[8.1, 4.7],
|
||||
]
|
||||
}, {
|
||||
name: 'User B',
|
||||
data: [
|
||||
[6.4, 5.4],
|
||||
[11.7, 4],
|
||||
[15.4, 3],
|
||||
[9, 2],
|
||||
[10.9, 11],
|
||||
[20.9, 7],
|
||||
[12.9, 8.2],
|
||||
[6.4, 14],
|
||||
[11.6, 12]
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'scatter',
|
||||
animations: {
|
||||
enabled: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: chartScatterImagesColors,
|
||||
xaxis: {
|
||||
tickAmount: 10,
|
||||
min: 0,
|
||||
max: 40
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 7
|
||||
},
|
||||
markers: {
|
||||
size: 20
|
||||
},
|
||||
fill: {
|
||||
type: 'image',
|
||||
opacity: 1,
|
||||
image: {
|
||||
src: ['../build/images/users/avatar-1.jpg', '../build/images/users/avatar-2.jpg'],
|
||||
width: 40,
|
||||
height: 40
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
useSeriesColors: true
|
||||
},
|
||||
markers: {
|
||||
customHTML: [
|
||||
function () {
|
||||
return ''
|
||||
},
|
||||
function () {
|
||||
return ''
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#images_scatter"), options);
|
||||
chart.render();
|
||||
}
|
||||
@@ -0,0 +1,640 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Timeline Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Basic Timeline Charts
|
||||
var chartTimelineBasicColors = getChartColorsArray("basic_timeline");
|
||||
if(chartTimelineBasicColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-02').getTime(),
|
||||
new Date('2019-03-04').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-04').getTime(),
|
||||
new Date('2019-03-08').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Validation',
|
||||
y: [
|
||||
new Date('2019-03-08').getTime(),
|
||||
new Date('2019-03-12').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Deployment',
|
||||
y: [
|
||||
new Date('2019-03-12').getTime(),
|
||||
new Date('2019-03-18').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'rangeBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
colors: chartTimelineBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_timeline"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
|
||||
// Different Color For Each Bar
|
||||
var chartTimelineColors = getChartColorsArray("color_timeline");
|
||||
if(chartTimelineColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: 'Analysis',
|
||||
y: [
|
||||
new Date('2019-02-27').getTime(),
|
||||
new Date('2019-03-04').getTime()
|
||||
],
|
||||
fillColor: chartTimelineColors[0]
|
||||
},
|
||||
{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-04').getTime(),
|
||||
new Date('2019-03-08').getTime()
|
||||
],
|
||||
fillColor: chartTimelineColors[1]
|
||||
},
|
||||
{
|
||||
x: 'Coding',
|
||||
y: [
|
||||
new Date('2019-03-07').getTime(),
|
||||
new Date('2019-03-10').getTime()
|
||||
],
|
||||
fillColor: chartTimelineColors[2]
|
||||
},
|
||||
{
|
||||
x: 'Testing',
|
||||
y: [
|
||||
new Date('2019-03-08').getTime(),
|
||||
new Date('2019-03-12').getTime()
|
||||
],
|
||||
fillColor: chartTimelineColors[3]
|
||||
},
|
||||
{
|
||||
x: 'Deployment',
|
||||
y: [
|
||||
new Date('2019-03-12').getTime(),
|
||||
new Date('2019-03-17').getTime()
|
||||
],
|
||||
fillColor: chartTimelineColors[4]
|
||||
}
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'rangeBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
distributed: true,
|
||||
dataLabels: {
|
||||
hideOverflowingLabels: false
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val, opts) {
|
||||
var label = opts.w.globals.labels[opts.dataPointIndex]
|
||||
var a = moment(val[0])
|
||||
var b = moment(val[1])
|
||||
var diff = b.diff(a, 'days')
|
||||
return label + ': ' + diff + (diff > 1 ? ' days' : ' day')
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
show: true
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#color_timeline"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Multi Series Timeline
|
||||
var chartTimelineMultiSeriesColors = getChartColorsArray("multi_series");
|
||||
if(chartTimelineMultiSeriesColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Bob',
|
||||
data: [{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-05').getTime(),
|
||||
new Date('2019-03-08').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-08').getTime(),
|
||||
new Date('2019-03-11').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-11').getTime(),
|
||||
new Date('2019-03-16').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Joe',
|
||||
data: [{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-02').getTime(),
|
||||
new Date('2019-03-05').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-06').getTime(),
|
||||
new Date('2019-03-09').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-10').getTime(),
|
||||
new Date('2019-03-19').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'rangeBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val) {
|
||||
var a = moment(val[0])
|
||||
var b = moment(val[1])
|
||||
var diff = b.diff(a, 'days')
|
||||
return diff + (diff > 1 ? ' days' : ' day')
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
type: 'vertical',
|
||||
shadeIntensity: 0.25,
|
||||
gradientToColors: undefined,
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [50, 0, 100, 100]
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
legend: {
|
||||
position: 'top'
|
||||
},
|
||||
colors: chartTimelineMultiSeriesColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#multi_series"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Advanced Timeline (Multiple Range)
|
||||
var chartTimelineAdvancedColors = getChartColorsArray("advanced_timeline");
|
||||
if(chartTimelineAdvancedColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Bob',
|
||||
data: [{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-05').getTime(),
|
||||
new Date('2019-03-08').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-02').getTime(),
|
||||
new Date('2019-03-05').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-05').getTime(),
|
||||
new Date('2019-03-07').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-03').getTime(),
|
||||
new Date('2019-03-09').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-08').getTime(),
|
||||
new Date('2019-03-11').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Validation',
|
||||
y: [
|
||||
new Date('2019-03-11').getTime(),
|
||||
new Date('2019-03-16').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-01').getTime(),
|
||||
new Date('2019-03-03').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Joe',
|
||||
data: [{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-02').getTime(),
|
||||
new Date('2019-03-05').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-06').getTime(),
|
||||
new Date('2019-03-16').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-03').getTime(),
|
||||
new Date('2019-03-07').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Deployment',
|
||||
y: [
|
||||
new Date('2019-03-20').getTime(),
|
||||
new Date('2019-03-22').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-10').getTime(),
|
||||
new Date('2019-03-16').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Dan',
|
||||
data: [{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-10').getTime(),
|
||||
new Date('2019-03-17').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Validation',
|
||||
y: [
|
||||
new Date('2019-03-05').getTime(),
|
||||
new Date('2019-03-09').getTime()
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'rangeBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '80%'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
stroke: {
|
||||
width: 1
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 0.6
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left'
|
||||
},
|
||||
colors: chartTimelineAdvancedColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#advanced_timeline"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Multiple series � Group rows
|
||||
var chartMultiSeriesGroupColors = getChartColorsArray("multi_series_group");
|
||||
if (chartMultiSeriesGroupColors) {
|
||||
var options = {
|
||||
series: [
|
||||
// George Washington
|
||||
{
|
||||
name: 'George Washington',
|
||||
data: [
|
||||
{
|
||||
x: 'President',
|
||||
y: [
|
||||
new Date(1789, 3, 30).getTime(),
|
||||
new Date(1797, 2, 4).getTime()
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
// John Adams
|
||||
{
|
||||
name: 'John Adams',
|
||||
data: [
|
||||
{
|
||||
x: 'President',
|
||||
y: [
|
||||
new Date(1797, 2, 4).getTime(),
|
||||
new Date(1801, 2, 4).getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Vice President',
|
||||
y: [
|
||||
new Date(1789, 3, 21).getTime(),
|
||||
new Date(1797, 2, 4).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Thomas Jefferson
|
||||
{
|
||||
name: 'Thomas Jefferson',
|
||||
data: [
|
||||
{
|
||||
x: 'President',
|
||||
y: [
|
||||
new Date(1801, 2, 4).getTime(),
|
||||
new Date(1809, 2, 4).getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Vice President',
|
||||
y: [
|
||||
new Date(1797, 2, 4).getTime(),
|
||||
new Date(1801, 2, 4).getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1790, 2, 22).getTime(),
|
||||
new Date(1793, 11, 31).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Aaron Burr
|
||||
{
|
||||
name: 'Aaron Burr',
|
||||
data: [
|
||||
{
|
||||
x: 'Vice President',
|
||||
y: [
|
||||
new Date(1801, 2, 4).getTime(),
|
||||
new Date(1805, 2, 4).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// George Clinton
|
||||
{
|
||||
name: 'George Clinton',
|
||||
data: [
|
||||
{
|
||||
x: 'Vice President',
|
||||
y: [
|
||||
new Date(1805, 2, 4).getTime(),
|
||||
new Date(1812, 3, 20).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// John Jay
|
||||
{
|
||||
name: 'John Jay',
|
||||
data: [
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1789, 8, 25).getTime(),
|
||||
new Date(1790, 2, 22).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Edmund Randolph
|
||||
{
|
||||
name: 'Edmund Randolph',
|
||||
data: [
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1794, 0, 2).getTime(),
|
||||
new Date(1795, 7, 20).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Timothy Pickering
|
||||
{
|
||||
name: 'Timothy Pickering',
|
||||
data: [
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1795, 7, 20).getTime(),
|
||||
new Date(1800, 4, 12).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Charles Lee
|
||||
{
|
||||
name: 'Charles Lee',
|
||||
data: [
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1800, 4, 13).getTime(),
|
||||
new Date(1800, 5, 5).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// John Marshall
|
||||
{
|
||||
name: 'John Marshall',
|
||||
data: [
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1800, 5, 13).getTime(),
|
||||
new Date(1801, 2, 4).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'rangeBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '35%',
|
||||
rangeBarGroupRows: true
|
||||
}
|
||||
},
|
||||
colors: chartMultiSeriesGroupColors,
|
||||
fill: {
|
||||
type: 'solid'
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
legend: {
|
||||
position: 'right'
|
||||
},
|
||||
tooltip: {
|
||||
custom: function (opts) {
|
||||
const fromYear = new Date(opts.y1).getFullYear()
|
||||
const toYear = new Date(opts.y2).getFullYear()
|
||||
const values = opts.ctx.rangeBar.getTooltipValues(opts)
|
||||
|
||||
return (
|
||||
'<div class="apexcharts-tooltip-rangebar">' +
|
||||
'<div> <span class="series-name" style="color: ' +
|
||||
values.color +
|
||||
'">' +
|
||||
(values.seriesName ? values.seriesName : '') +
|
||||
'</span></div>' +
|
||||
'<div> <span class="category">' +
|
||||
values.ylabel +
|
||||
' </span> <span class="value start-value">' +
|
||||
fromYear +
|
||||
'</span> <span class="separator">-</span> <span class="value end-value">' +
|
||||
toYear +
|
||||
'</span></div>' +
|
||||
'</div>'
|
||||
)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#multi_series_group"), options);
|
||||
chart.render();
|
||||
}
|
||||
@@ -0,0 +1,389 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Treemaps Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Treemaps
|
||||
var chartTreemapBasicColors = getChartColorsArray("basic_treemap");
|
||||
if(chartTreemapBasicColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: 'New Delhi',
|
||||
y: 218
|
||||
},
|
||||
{
|
||||
x: 'Kolkata',
|
||||
y: 149
|
||||
},
|
||||
{
|
||||
x: 'Mumbai',
|
||||
y: 184
|
||||
},
|
||||
{
|
||||
x: 'Ahmedabad',
|
||||
y: 55
|
||||
},
|
||||
{
|
||||
x: 'Bangaluru',
|
||||
y: 84
|
||||
},
|
||||
{
|
||||
x: 'Pune',
|
||||
y: 31
|
||||
},
|
||||
{
|
||||
x: 'Chennai',
|
||||
y: 70
|
||||
},
|
||||
{
|
||||
x: 'Jaipur',
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 'Surat',
|
||||
y: 44
|
||||
},
|
||||
{
|
||||
x: 'Hyderabad',
|
||||
y: 68
|
||||
},
|
||||
{
|
||||
x: 'Lucknow',
|
||||
y: 28
|
||||
},
|
||||
{
|
||||
x: 'Indore',
|
||||
y: 19
|
||||
},
|
||||
{
|
||||
x: 'Kanpur',
|
||||
y: 29
|
||||
}
|
||||
]
|
||||
}],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'treemap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: chartTreemapBasicColors,
|
||||
title: {
|
||||
text: 'Basic Treemap',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_treemap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Multi - Dimensional Treemap
|
||||
var chartTreemapMultiColors = getChartColorsArray("multi_treemap");
|
||||
if(chartTreemapMultiColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Desktops',
|
||||
data: [{
|
||||
x: 'ABC',
|
||||
y: 10
|
||||
},
|
||||
{
|
||||
x: 'DEF',
|
||||
y: 60
|
||||
},
|
||||
{
|
||||
x: 'XYZ',
|
||||
y: 41
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Mobile',
|
||||
data: [{
|
||||
x: 'ABCD',
|
||||
y: 10
|
||||
},
|
||||
{
|
||||
x: 'DEFG',
|
||||
y: 20
|
||||
},
|
||||
{
|
||||
x: 'WXYZ',
|
||||
y: 51
|
||||
},
|
||||
{
|
||||
x: 'PQR',
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 'MNO',
|
||||
y: 20
|
||||
},
|
||||
{
|
||||
x: 'CDE',
|
||||
y: 30
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'treemap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Multi-dimensional Treemap',
|
||||
align: 'center',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
}
|
||||
},
|
||||
colors: chartTreemapMultiColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#multi_treemap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Distributed Treemap
|
||||
|
||||
var chartTreemapDistributedColors = getChartColorsArray("distributed_treemap");
|
||||
if(chartTreemapDistributedColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: 'New Delhi',
|
||||
y: 218
|
||||
},
|
||||
{
|
||||
x: 'Kolkata',
|
||||
y: 149
|
||||
},
|
||||
{
|
||||
x: 'Mumbai',
|
||||
y: 184
|
||||
},
|
||||
{
|
||||
x: 'Ahmedabad',
|
||||
y: 55
|
||||
},
|
||||
{
|
||||
x: 'Bangaluru',
|
||||
y: 84
|
||||
},
|
||||
{
|
||||
x: 'Pune',
|
||||
y: 31
|
||||
},
|
||||
{
|
||||
x: 'Chennai',
|
||||
y: 70
|
||||
},
|
||||
{
|
||||
x: 'Jaipur',
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 'Surat',
|
||||
y: 44
|
||||
},
|
||||
{
|
||||
x: 'Hyderabad',
|
||||
y: 68
|
||||
},
|
||||
{
|
||||
x: 'Lucknow',
|
||||
y: 28
|
||||
},
|
||||
{
|
||||
x: 'Indore',
|
||||
y: 19
|
||||
},
|
||||
{
|
||||
x: 'Kanpur',
|
||||
y: 29
|
||||
}
|
||||
]
|
||||
}],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'treemap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Distibuted Treemap (different color for each cell)',
|
||||
align: 'center',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
}
|
||||
},
|
||||
colors: chartTreemapDistributedColors,
|
||||
plotOptions: {
|
||||
treemap: {
|
||||
distributed: true,
|
||||
enableShades: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#distributed_treemap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Color Range Treemaps
|
||||
var chartTreemapRangeColors = getChartColorsArray("color_range_treemap");
|
||||
if(chartTreemapRangeColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: 'INTC',
|
||||
y: 1.2
|
||||
},
|
||||
{
|
||||
x: 'GS',
|
||||
y: 0.4
|
||||
},
|
||||
{
|
||||
x: 'CVX',
|
||||
y: -1.4
|
||||
},
|
||||
{
|
||||
x: 'GE',
|
||||
y: 2.7
|
||||
},
|
||||
{
|
||||
x: 'CAT',
|
||||
y: -0.3
|
||||
},
|
||||
{
|
||||
x: 'RTX',
|
||||
y: 5.1
|
||||
},
|
||||
{
|
||||
x: 'CSCO',
|
||||
y: -2.3
|
||||
},
|
||||
{
|
||||
x: 'JNJ',
|
||||
y: 2.1
|
||||
},
|
||||
{
|
||||
x: 'PG',
|
||||
y: 0.3
|
||||
},
|
||||
{
|
||||
x: 'TRV',
|
||||
y: 0.12
|
||||
},
|
||||
{
|
||||
x: 'MMM',
|
||||
y: -2.31
|
||||
},
|
||||
{
|
||||
x: 'NKE',
|
||||
y: 3.98
|
||||
},
|
||||
{
|
||||
x: 'IYT',
|
||||
y: 1.67
|
||||
}
|
||||
]
|
||||
}],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'treemap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Treemap with Color scale',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
formatter: function (text, op) {
|
||||
return [text, op.value]
|
||||
},
|
||||
offsetY: -4
|
||||
},
|
||||
plotOptions: {
|
||||
treemap: {
|
||||
enableShades: true,
|
||||
shadeIntensity: 0.5,
|
||||
reverseNegativeShade: true,
|
||||
colorScale: {
|
||||
ranges: [{
|
||||
from: -6,
|
||||
to: 0,
|
||||
color: chartTreemapRangeColors[0]
|
||||
},
|
||||
{
|
||||
from: 0.001,
|
||||
to: 6,
|
||||
color: chartTreemapRangeColors[1]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#color_range_treemap"), options);
|
||||
chart.render();
|
||||
}
|
||||
+1882
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,70 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Card init js
|
||||
*/
|
||||
|
||||
var Portlet = function() {
|
||||
el = document.querySelector('.card a[data-toggle="reload"]');
|
||||
if (el) {
|
||||
el.addEventListener("click", function(ev) {
|
||||
ev.preventDefault();
|
||||
var $portlet = el.closest(".card");
|
||||
insertEl =
|
||||
'<div class="card-preloader"><div class="card-status"><div class="spinner-border text-success"><span class="visually-hidden">Loading...</span></div></div></div>';
|
||||
$portlet.children[1].insertAdjacentHTML("beforeend", insertEl);
|
||||
var $pd = $portlet.getElementsByClassName("card-preloader")[0];
|
||||
setTimeout(function() {
|
||||
$pd.remove();
|
||||
}, 500 + 300 * (Math.random() * 5));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Portlet();
|
||||
|
||||
var growingLoader = function() {
|
||||
element = document.querySelector('.card a[data-toggle="growing-reload"]');
|
||||
if (element) {
|
||||
element.addEventListener("click", function(ev) {
|
||||
ev.preventDefault();
|
||||
var $portlet = element.closest(".card");
|
||||
insertEl =
|
||||
'<div class="card-preloader"><div class="card-status"><div class="spinner-grow text-danger"><span class="visually-hidden">Loading...</span></div></div></div>';
|
||||
$portlet.children[1].insertAdjacentHTML("beforeend", insertEl);
|
||||
var $pd = $portlet.getElementsByClassName("card-preloader")[0];
|
||||
setTimeout(function() {
|
||||
$pd.remove();
|
||||
}, 500 + 300 * (Math.random() * 5));
|
||||
});
|
||||
}
|
||||
};
|
||||
growingLoader();
|
||||
|
||||
var customLoader = function() {
|
||||
customLoader1 = document.querySelector(
|
||||
'.card a[data-toggle="customer-loader"]'
|
||||
);
|
||||
if (customLoader1) {
|
||||
customLoader1.addEventListener("click", function(elem) {
|
||||
elem.preventDefault();
|
||||
var $portlet = customLoader1.closest(".card");
|
||||
insertEl =
|
||||
'<div class="card-preloader"><div class="card-status"><img src="../build/images/logo-sm.png" alt="" class="img-fluid custom-loader"></div></div>';
|
||||
$portlet.children[1].insertAdjacentHTML("beforeend", insertEl);
|
||||
var $pd = $portlet.getElementsByClassName("card-preloader")[0];
|
||||
setTimeout(function() {
|
||||
$pd.remove();
|
||||
}, 500 + 300 * (Math.random() * 5));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
customLoader();
|
||||
|
||||
//card-remove Js
|
||||
function delthis(id) {
|
||||
document.getElementById(id).remove();
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.comom
|
||||
File: Coming soon Init Js File
|
||||
*/
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var mainArray = Array.from(document.querySelectorAll(".countdownlist"))
|
||||
mainArray.forEach(function (item) {
|
||||
var countdownVal = item.getAttribute("data-countdown")
|
||||
|
||||
// Set the date we're counting down to
|
||||
var countDownDate = new Date(countdownVal).getTime();
|
||||
|
||||
// Update the count down every 1 second
|
||||
var countDown = setInterval(function () {
|
||||
// Get today's date and time
|
||||
var currentTime = new Date().getTime();
|
||||
// Find the distance between currentTime and the count down date
|
||||
var distance = countDownDate - currentTime;
|
||||
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
var countDownBlock = '<div class="countdownlist-item">' +
|
||||
'<div class="count-title">Days</div>' + '<div class="count-num">' + days + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="countdownlist-item">' +
|
||||
'<div class="count-title">Hours</div>' + '<div class="count-num">' + hours + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="countdownlist-item">' +
|
||||
'<div class="count-title">Minutes</div>' + '<div class="count-num">' + minutes + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="countdownlist-item">' +
|
||||
'<div class="count-title">Seconds</div>' + '<div class="count-num">' + seconds + '</div>' +
|
||||
'</div>';
|
||||
|
||||
// Output the result in an element with id="countDownBlock"
|
||||
if (item) {
|
||||
item.innerHTML = countDownBlock;
|
||||
}
|
||||
// If the count down is over, write some text
|
||||
if (distance < 0) {
|
||||
clearInterval(countDown);
|
||||
item.innerHTML = '<div class="countdown-endtxt">The countdown has ended!</div>';
|
||||
}
|
||||
}, 1000);
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,247 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Ecommerce Dashboard init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(
|
||||
newValue
|
||||
);
|
||||
if (color) return color;
|
||||
else return newValue;
|
||||
} else {
|
||||
var val = value.split(",");
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('data-colors atributes not found on', chartId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var linechartcustomerColors = getChartColorsArray("customer_impression_charts");
|
||||
if (linechartcustomerColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Orders",
|
||||
type: "area",
|
||||
data: [34, 65, 46, 68, 49, 61, 42, 44, 78, 52, 63, 67],
|
||||
},
|
||||
{
|
||||
name: "Earnings",
|
||||
type: "bar",
|
||||
data: [
|
||||
89.25, 98.58, 68.74, 108.87, 77.54, 84.03, 51.24, 28.57, 92.57, 42.36,
|
||||
88.51, 36.57,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Refunds",
|
||||
type: "line",
|
||||
data: [8, 12, 7, 17, 21, 11, 5, 9, 7, 29, 12, 35],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 310,
|
||||
type: "line",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: "straight",
|
||||
dashArray: [0, 0, 8],
|
||||
width: [0.1, 0, 2],
|
||||
},
|
||||
fill: {
|
||||
opacity: [0.03, 0.9, 1],
|
||||
},
|
||||
markers: {
|
||||
size: [0, 0, 0],
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 4,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
right: -2,
|
||||
bottom: 15,
|
||||
left: 10,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
horizontalAlign: "center",
|
||||
offsetX: 0,
|
||||
offsetY: -5,
|
||||
markers: {
|
||||
width: 9,
|
||||
height: 9,
|
||||
radius: 6,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
vertical: 0,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: "20%",
|
||||
barHeight: "100%",
|
||||
borderRadius: [8],
|
||||
},
|
||||
},
|
||||
colors: linechartcustomerColors,
|
||||
tooltip: {
|
||||
shared: true,
|
||||
y: [{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0);
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return "$" + y.toFixed(2) + "k";
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " Sales";
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#customer_impression_charts"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Simple Donut Charts
|
||||
var chartDonutBasicColors = getChartColorsArray("#store-visits-source");
|
||||
if (chartDonutBasicColors) {
|
||||
var options = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
labels: ["Direct", "Social", "Email", "Other", "Referrals"],
|
||||
chart: {
|
||||
height: 333,
|
||||
type: "donut",
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
colors: chartDonutBasicColors,
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#store-visits-source"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var swiper = new Swiper(".selling-product", {
|
||||
slidesPerView: "auto",
|
||||
spaceBetween: 15,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
});
|
||||
|
||||
function currentTime() {
|
||||
var ampm = new Date().getHours() >= 12 ? "pm" : "am";
|
||||
var hour =
|
||||
new Date().getHours() > 12 ?
|
||||
new Date().getHours() % 12 :
|
||||
new Date().getHours();
|
||||
var minute =
|
||||
new Date().getMinutes() < 10 ?
|
||||
"0" + new Date().getMinutes() :
|
||||
new Date().getMinutes();
|
||||
if (hour < 10) {
|
||||
return "0" + hour + ":" + minute + " " + ampm;
|
||||
} else {
|
||||
return hour + ":" + minute + " " + ampm;
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(currentTime, 1000);
|
||||
@@ -0,0 +1,110 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: datatables init js
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#example',);
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#scroll-vertical', {
|
||||
"scrollY": "210px",
|
||||
"scrollCollapse": true,
|
||||
"paging": false
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#scroll-horizontal', {
|
||||
"scrollX": true
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#alternative-pagination', {
|
||||
"pagingType": "full_numbers"
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
var t = $('#add-rows').DataTable();
|
||||
var counter = 1;
|
||||
|
||||
$('#addRow').on( 'click', function () {
|
||||
t.row.add( [
|
||||
counter +'.1',
|
||||
counter +'.2',
|
||||
counter +'.3',
|
||||
counter +'.4',
|
||||
counter +'.5',
|
||||
counter +'.6',
|
||||
counter +'.7',
|
||||
counter +'.8',
|
||||
counter +'.9',
|
||||
counter +'.10',
|
||||
counter +'.11',
|
||||
counter +'.12'
|
||||
] ).draw( false );
|
||||
|
||||
counter++;
|
||||
} );
|
||||
|
||||
// Automatically add a first row of data
|
||||
$('#addRow').click();
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
});
|
||||
|
||||
//fixed header
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#fixed-header', {
|
||||
"fixedHeader": true
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
//modal data datables
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#model-datatables', {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
|
||||
tableClass: 'table'
|
||||
} )
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
//buttons exmples
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#buttons-datatables', {
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'copy', 'csv', 'excel', 'print', 'pdf'
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
//buttons exmples
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#ajax-datatables', {
|
||||
"ajax": '../build/json/datatable.json'
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,135 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: flag input Js File
|
||||
*/
|
||||
(function () {
|
||||
("use strict");
|
||||
var url = "../build/json/";
|
||||
var countryListData = '';
|
||||
var getJSON = function (jsonurl, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", url + jsonurl, true);
|
||||
xhr.responseType = "json";
|
||||
xhr.onload = function () {
|
||||
var status = xhr.status;
|
||||
if (status === 200) {
|
||||
callback(null, xhr.response);
|
||||
} else {
|
||||
callback(status, xhr.response);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
};
|
||||
// get json
|
||||
getJSON("country-list.json", function (err, data) {
|
||||
if (err !== null) {
|
||||
console.log("Something went wrong: " + err);
|
||||
} else {
|
||||
countryListData = data;
|
||||
loadCountryListData(countryListData);
|
||||
}
|
||||
});
|
||||
function loadCountryListData(datas) {
|
||||
var mainArray = Array.from(document.querySelectorAll("[data-input-flag]"))
|
||||
var flags = '';
|
||||
var arr = Array.from(datas);
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
flags += '<li class="dropdown-item d-flex">\
|
||||
<div class="flex-shrink-0 me-2"><img src="'+ arr[index]['flagImg'] + '" alt="country flag" class="options-flagimg" height="20"></div>\
|
||||
<div class="flex-grow-1">\
|
||||
<div class="d-flex"><div class="country-name me-1">'+ arr[index]['countryName'] + '</div><span class="countrylist-codeno text-muted">' + arr[index]['countryCode'] + '</span></div>\
|
||||
</div>\
|
||||
</li>';
|
||||
}
|
||||
for (let i = 0; i < mainArray.length; i++) {
|
||||
mainArray[i].querySelector(".dropdown-menu-list").innerHTML = '';
|
||||
mainArray[i].querySelector(".dropdown-menu-list").innerHTML = flags;
|
||||
countryListClickEvent(mainArray[i]);
|
||||
}
|
||||
};
|
||||
function countryListClickEvent(item) {
|
||||
if (item.querySelector(".country-flagimg")) {
|
||||
var countryFlagImg = item.querySelector(".country-flagimg").getAttribute('src');
|
||||
}
|
||||
Array.from(item.querySelectorAll(".dropdown-menu li")).forEach(function (subitem) {
|
||||
var optionFlagImg = subitem.querySelector(".options-flagimg").getAttribute("src");
|
||||
subitem.addEventListener("click", function () {
|
||||
var optionCodeNo = subitem.querySelector(".countrylist-codeno").innerHTML;
|
||||
if (item.querySelector("button")) {
|
||||
item.querySelector("button img").setAttribute("src", optionFlagImg);
|
||||
if (item.querySelector("button span")) {
|
||||
item.querySelector("button span").innerHTML = optionCodeNo;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (countryFlagImg == optionFlagImg) {
|
||||
subitem.classList.add("active");
|
||||
}
|
||||
});
|
||||
// data option flag img with name
|
||||
Array.from(document.querySelectorAll("[data-option-flag-img-name]")).forEach(function (item) {
|
||||
var flagImg = getComputedStyle(item.querySelector(".flag-input")).backgroundImage;
|
||||
var countryFlagImg = flagImg.substring(
|
||||
flagImg.indexOf("/as") + 1,
|
||||
flagImg.lastIndexOf('"')
|
||||
);
|
||||
Array.from(item.querySelectorAll(".dropdown-menu li")).forEach(function (subitem) {
|
||||
var optionFlagImg = subitem.querySelector(".options-flagimg").getAttribute("src");
|
||||
subitem.addEventListener("click", function () {
|
||||
var optionCountryName = subitem.querySelector(".country-name").innerHTML;
|
||||
item.querySelector(".flag-input").style.backgroundImage = "url(" + optionFlagImg + ")";
|
||||
item.querySelector(".flag-input").value = optionCountryName;
|
||||
});
|
||||
if (countryFlagImg == optionFlagImg) {
|
||||
subitem.classList.add("active");
|
||||
item.querySelector(".flag-input").value = subitem.querySelector(".country-name").innerHTML;
|
||||
}
|
||||
});
|
||||
});
|
||||
// data option flag img with name
|
||||
Array.from(document.querySelectorAll("[data-option-flag-name]")).forEach(function (item) {
|
||||
var countryName = item.querySelector(".flag-input").value;
|
||||
Array.from(item.querySelectorAll(".dropdown-menu li")).forEach(function (subitem) {
|
||||
var optionCountryName = subitem.querySelector(".country-name").innerHTML;
|
||||
subitem.addEventListener("click", function () {
|
||||
item.querySelector(".flag-input").value = optionCountryName;
|
||||
});
|
||||
if (countryName == optionCountryName) {
|
||||
subitem.classList.add("active");
|
||||
item.querySelector(".flag-input").value = subitem.querySelector(".country-name").innerHTML;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
//Search bar
|
||||
Array.from(document.querySelectorAll("[data-input-flag]")).forEach(function (item) {
|
||||
var searchInput = item.querySelector(".search-countryList");
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("keyup", function () {
|
||||
var inputVal = searchInput.value.toLowerCase();
|
||||
function filterItems(arr, query) {
|
||||
return arr.filter(function (el) {
|
||||
return (el.countryName.toLowerCase().indexOf(query.toLowerCase()) !== -1 || el.countryCode.indexOf(query) !== -1)
|
||||
})
|
||||
}
|
||||
var filterData = filterItems(countryListData, inputVal);
|
||||
setTimeout(function () {
|
||||
item.querySelector(".dropdown-menu-list").innerHTML = '';
|
||||
Array.from(filterData).forEach(function (listData) {
|
||||
item.querySelector(".dropdown-menu-list").innerHTML +=
|
||||
'<li class="dropdown-item d-flex">\
|
||||
<div class="flex-shrink-0 me-2"><img src="'+ listData.flagImg + '" alt="country flag" class="options-flagimg" height="20"></div>\
|
||||
<div class="flex-grow-1">\
|
||||
<div class="d-flex"><div class="country-name me-1">'+ listData.countryName + '</div><span class="countrylist-codeno text-muted">' + listData.countryCode + '</span></div>\
|
||||
</div>\
|
||||
</li>';
|
||||
});
|
||||
countryListClickEvent(item);
|
||||
}, 350);
|
||||
});
|
||||
};
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,102 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form Advanced Js File
|
||||
*/
|
||||
|
||||
// multiselect
|
||||
|
||||
var multiSelectBasic = document.getElementById("multiselect-basic");
|
||||
if (multiSelectBasic) {
|
||||
multi(multiSelectBasic, {
|
||||
enable_search: false
|
||||
});
|
||||
}
|
||||
|
||||
var multiSelectHeader = document.getElementById("multiselect-header");
|
||||
if (multiSelectHeader) {
|
||||
multi(multiSelectHeader, {
|
||||
non_selected_header: "Cars",
|
||||
selected_header: "Favorite Cars"
|
||||
});
|
||||
}
|
||||
|
||||
var multiSelectOptGroup = document.getElementById("multiselect-optiongroup");
|
||||
if (multiSelectOptGroup) {
|
||||
multi(multiSelectOptGroup, {
|
||||
enable_search: true
|
||||
});
|
||||
}
|
||||
|
||||
// Autocomplete
|
||||
var autoCompleteFruit = new autoComplete({
|
||||
selector: "#autoCompleteFruit",
|
||||
placeHolder: "Search for Fruits...",
|
||||
data: {
|
||||
src: ["Apple", "Banana", "Blueberry", "Cherry", "Coconut", "Kiwi", "Lemon", "Lime", "Mango", "Orange"],
|
||||
cache: true
|
||||
},
|
||||
resultsList: {
|
||||
element: function element(list, data) {
|
||||
if (!data.results.length) {
|
||||
// Create "No Results" message element
|
||||
var message = document.createElement("div");
|
||||
// Add class to the created element
|
||||
message.setAttribute("class", "no_result");
|
||||
// Add message text content
|
||||
message.innerHTML = "<span>Found No Results for \"" + data.query + "\"</span>";
|
||||
// Append message element to the results list
|
||||
list.prepend(message);
|
||||
}
|
||||
},
|
||||
noResults: true
|
||||
},
|
||||
resultItem: {
|
||||
highlight: true
|
||||
},
|
||||
events: {
|
||||
input: {
|
||||
selection: function selection(event) {
|
||||
var selection = event.detail.selection.value;
|
||||
autoCompleteFruit.input.value = selection;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var autoCompleteCars = new autoComplete({
|
||||
selector: "#autoCompleteCars",
|
||||
placeHolder: "Search for Cars...",
|
||||
data: {
|
||||
src: ["Chevrolet", "Fiat", "Ford", "Honda", "Hyundai", "Hyundai", "Kia", "Mahindra", "Maruti", "Mitsubishi", "MG", "Nissan", "Renault", "Skoda", "Tata", "Toyato", "Volkswagen"],
|
||||
cache: true
|
||||
},
|
||||
resultsList: {
|
||||
element: function element(list, data) {
|
||||
if (!data.results.length) {
|
||||
// Create "No Results" message element
|
||||
var message = document.createElement("div");
|
||||
// Add class to the created element
|
||||
message.setAttribute("class", "no_result");
|
||||
// Add message text content
|
||||
message.innerHTML = "<span>Found No Results for \"" + data.query + "\"</span>";
|
||||
// Append message element to the results list
|
||||
list.prepend(message);
|
||||
}
|
||||
},
|
||||
noResults: true
|
||||
},
|
||||
resultItem: {
|
||||
highlight: true
|
||||
},
|
||||
events: {
|
||||
input: {
|
||||
selection: function selection(event) {
|
||||
var selection = event.detail.selection.value;
|
||||
autoCompleteCars.input.value = selection;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form editor Js File
|
||||
*/
|
||||
|
||||
// ckeditor
|
||||
|
||||
var ckClassicEditor = document.querySelectorAll(".ckeditor-classic")
|
||||
if (ckClassicEditor) {
|
||||
Array.from(ckClassicEditor).forEach(function () {
|
||||
ClassicEditor
|
||||
.create(document.querySelector('.ckeditor-classic'))
|
||||
.then(function (editor) {
|
||||
editor.ui.view.editable.element.style.height = '200px';
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form file upload Js File
|
||||
*/
|
||||
|
||||
// Dropzone
|
||||
var dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
|
||||
dropzonePreviewNode.id = "";
|
||||
if(dropzonePreviewNode){
|
||||
var previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);
|
||||
var dropzone = new Dropzone(".dropzone", {
|
||||
url: 'https://httpbin.org/post',
|
||||
method: "post",
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form input spin Js File
|
||||
*/
|
||||
|
||||
// input spin
|
||||
isData();
|
||||
|
||||
function isData() {
|
||||
var plus = document.getElementsByClassName('plus');
|
||||
var minus = document.getElementsByClassName('minus');
|
||||
var product = document.getElementsByClassName("product");
|
||||
|
||||
if (plus) {
|
||||
Array.from(plus).forEach(function (e) {
|
||||
e.addEventListener('click', function (event) {
|
||||
// if(event.target.previousElementSibling.value )
|
||||
if (parseInt(e.previousElementSibling.value) < event.target.previousElementSibling.getAttribute('max')) {
|
||||
event.target.previousElementSibling.value++;
|
||||
if (product) {
|
||||
Array.from(product).forEach(function (x) {
|
||||
updateQuantity(event.target);
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (minus) {
|
||||
Array.from(minus).forEach(function (e) {
|
||||
e.addEventListener('click', function (event) {
|
||||
if (parseInt(e.nextElementSibling.value) > event.target.nextElementSibling.getAttribute('min')) {
|
||||
event.target.nextElementSibling.value--;
|
||||
if (product) {
|
||||
Array.from(product).forEach(function (x) {
|
||||
updateQuantity(event.target);
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form masks Js File
|
||||
*/
|
||||
|
||||
if (document.querySelector("#cleave-date")) {
|
||||
var cleaveDate = new Cleave('#cleave-date', {
|
||||
date: true,
|
||||
delimiter: '-',
|
||||
datePattern: ['d', 'm', 'Y']
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-date-format")) {
|
||||
var cleaveDateFormat = new Cleave('#cleave-date-format', {
|
||||
date: true,
|
||||
datePattern: ['m', 'y']
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-time")) {
|
||||
var cleaveTime = new Cleave('#cleave-time', {
|
||||
time: true,
|
||||
timePattern: ['h', 'm', 's']
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-time-format")) {
|
||||
var cleaveTimeFormat = new Cleave('#cleave-time-format', {
|
||||
time: true,
|
||||
timePattern: ['h', 'm']
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-numeral")) {
|
||||
var cleaveNumeral = new Cleave('#cleave-numeral', {
|
||||
numeral: true,
|
||||
numeralThousandsGroupStyle: 'thousand'
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-ccard")) {
|
||||
var cleaveBlocks = new Cleave('#cleave-ccard', {
|
||||
blocks: [4, 4, 4, 4],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-delimiter")) {
|
||||
var cleaveDelimiter = new Cleave('#cleave-delimiter', {
|
||||
delimiter: '·',
|
||||
blocks: [3, 3, 3],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-delimiters")) {
|
||||
var cleaveDelimiters = new Cleave('#cleave-delimiters', {
|
||||
delimiters: ['.', '.', '-'],
|
||||
blocks: [3, 3, 3, 2],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-prefix")) {
|
||||
var cleavePrefix = new Cleave('#cleave-prefix', {
|
||||
prefix: 'PREFIX',
|
||||
delimiter: '-',
|
||||
blocks: [6, 4, 4, 4],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-phone")) {
|
||||
var cleaveBlocks = new Cleave('#cleave-phone', {
|
||||
delimiters: ['(', ')', '-'],
|
||||
blocks: [0, 3, 3, 4]
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,272 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form pickers Js File
|
||||
*/
|
||||
|
||||
// colorpickers
|
||||
|
||||
// classic color picker
|
||||
var classicPickrDemo = document.querySelectorAll(".classic-colorpicker");
|
||||
if (classicPickrDemo)
|
||||
Array.from(classicPickrDemo).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".classic-colorpicker",
|
||||
theme: "classic", // or 'monolith', or 'nano'
|
||||
default: "#405189",
|
||||
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,
|
||||
hsva: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// monolith color picker
|
||||
var monolithColorPickr = document.querySelectorAll(".monolith-colorpicker");
|
||||
if (monolithColorPickr)
|
||||
Array.from(monolithColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".monolith-colorpicker",
|
||||
theme: "monolith",
|
||||
default: "#0ab39c",
|
||||
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)",
|
||||
],
|
||||
defaultRepresentation: "HEXA",
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
hex: false,
|
||||
rgba: false,
|
||||
hsva: false,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// nano color picker
|
||||
var nanoColorPickr = document.querySelectorAll(".nano-colorpicker");
|
||||
if (nanoColorPickr)
|
||||
Array.from(nanoColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".nano-colorpicker",
|
||||
theme: "nano",
|
||||
default: "#3577f1",
|
||||
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)",
|
||||
],
|
||||
defaultRepresentation: "HEXA",
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
hex: false,
|
||||
rgba: false,
|
||||
hsva: false,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// demo color picker
|
||||
var demoColorPickr = document.querySelectorAll(".colorpicker-demo");
|
||||
if (demoColorPickr)
|
||||
Array.from(demoColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".colorpicker-demo",
|
||||
theme: "monolith",
|
||||
default: "#405189",
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// color picker opacity & hue
|
||||
var opacityHueColorPickr = document.querySelectorAll(".colorpicker-opacity-hue");
|
||||
if (opacityHueColorPickr)
|
||||
Array.from(opacityHueColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".colorpicker-opacity-hue",
|
||||
theme: "monolith",
|
||||
default: "#0ab39c",
|
||||
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// color picker swatches
|
||||
var swatcherColorPickr = document.querySelectorAll(".colorpicker-switch");
|
||||
if (swatcherColorPickr)
|
||||
Array.from(swatcherColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".colorpicker-switch",
|
||||
theme: "monolith",
|
||||
default: "#3577f1",
|
||||
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)",
|
||||
],
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// color picker input
|
||||
var inputColorPickr = document.querySelectorAll(".colorpicker-input");
|
||||
if (inputColorPickr)
|
||||
Array.from(inputColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".colorpicker-input",
|
||||
theme: "monolith",
|
||||
default: "#f7b84b",
|
||||
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)",
|
||||
],
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// color picker Format
|
||||
var formatColorPickr = document.querySelectorAll(".colorpicker-format");
|
||||
if (formatColorPickr)
|
||||
Array.from(formatColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".colorpicker-format",
|
||||
theme: "monolith",
|
||||
default: "#f06548",
|
||||
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)",
|
||||
],
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
hsva: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form validation Js File
|
||||
*/
|
||||
|
||||
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
||||
(function () {
|
||||
'use strict';
|
||||
window.addEventListener('load', function () {
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
// Loop over them and prevent submission
|
||||
if (forms)
|
||||
var validation = Array.prototype.filter.call(forms, function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
})();
|
||||
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form wizard Js File
|
||||
*/
|
||||
|
||||
// user profile img file upload
|
||||
if (document.querySelector("#profile-img-file-input"))
|
||||
document.querySelector("#profile-img-file-input").addEventListener("change", function () {
|
||||
var preview = document.querySelector(".user-profile-image");
|
||||
var file = document.querySelector(".profile-img-file-input").files[0];
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.addEventListener("load", function () {
|
||||
preview.src = reader.result;
|
||||
}, false);
|
||||
|
||||
if (file)
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
if (document.querySelectorAll(".form-steps"))
|
||||
Array.from(document.querySelectorAll(".form-steps")).forEach(function (form) {
|
||||
|
||||
// next tab
|
||||
if (form.querySelectorAll(".nexttab"))
|
||||
Array.from(form.querySelectorAll(".nexttab")).forEach(function (nextButton) {
|
||||
var tabEl = form.querySelectorAll('button[data-bs-toggle="pill"]');
|
||||
Array.from(tabEl).forEach(function (item) {
|
||||
item.addEventListener('show.bs.tab', function (event) {
|
||||
event.target.classList.add('done');
|
||||
});
|
||||
});
|
||||
nextButton.addEventListener("click", function () {
|
||||
var nextTab = nextButton.getAttribute('data-nexttab');
|
||||
document.getElementById(nextTab).click();
|
||||
});
|
||||
});
|
||||
|
||||
//Pervies tab
|
||||
if (form.querySelectorAll(".previestab"))
|
||||
Array.from(form.querySelectorAll(".previestab")).forEach(function (prevButton) {
|
||||
|
||||
prevButton.addEventListener("click", function () {
|
||||
var prevTab = prevButton.getAttribute('data-previous');
|
||||
var totalDone = prevButton.closest("form").querySelectorAll(".custom-nav .done").length;
|
||||
for (var i = totalDone - 1; i < totalDone; i++) {
|
||||
(prevButton.closest("form").querySelectorAll(".custom-nav .done")[i]) ? prevButton.closest("form").querySelectorAll(".custom-nav .done")[i].classList.remove('done'): '';
|
||||
}
|
||||
document.getElementById(prevTab).click();
|
||||
});
|
||||
});
|
||||
|
||||
// Step number click
|
||||
var tabButtons = form.querySelectorAll('button[data-bs-toggle="pill"]');
|
||||
if (tabButtons)
|
||||
Array.from(tabButtons).forEach(function (button, i) {
|
||||
button.setAttribute("data-position", i);
|
||||
button.addEventListener("click", function () {
|
||||
var getProgressBar = button.getAttribute("data-progressbar");
|
||||
if (getProgressBar) {
|
||||
var totalLength = document.getElementById("custom-progress-bar").querySelectorAll("li").length - 1;
|
||||
var current = i;
|
||||
var percent = (current / totalLength) * 100;
|
||||
document.getElementById("custom-progress-bar").querySelector('.progress-bar').style.width = percent + "%";
|
||||
}
|
||||
(form.querySelectorAll(".custom-nav .done").length > 0) ?
|
||||
Array.from(form.querySelectorAll(".custom-nav .done")).forEach(function (doneTab) {
|
||||
doneTab.classList.remove('done');
|
||||
}): '';
|
||||
for (var j = 0; j <= i; j++) {
|
||||
tabButtons[j].classList.contains('active') ? tabButtons[j].classList.remove('done') : tabButtons[j].classList.add('done');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Gmaps init Js File
|
||||
*/
|
||||
|
||||
var map;
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
// Markers
|
||||
if (document.getElementById('gmaps-markers')) {
|
||||
map = new GMaps({
|
||||
div: '#gmaps-markers',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
map.addMarker({
|
||||
lat: -12.043333,
|
||||
lng: -77.03,
|
||||
title: 'Lima',
|
||||
details: {
|
||||
database_id: 42,
|
||||
author: 'HPNeo'
|
||||
},
|
||||
click: function (e) {
|
||||
if (console.log)
|
||||
console.log(e);
|
||||
alert('You clicked in this marker');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Overlays
|
||||
if (document.getElementById('gmaps-overlay')) {
|
||||
map = new GMaps({
|
||||
div: '#gmaps-overlay',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
map.drawOverlay({
|
||||
lat: map.getCenter().lat(),
|
||||
lng: map.getCenter().lng(),
|
||||
content: '<div class="gmaps-overlay">Lima<div class="gmaps-overlay_arrow above"></div></div>',
|
||||
verticalAlign: 'top',
|
||||
horizontalAlign: 'center'
|
||||
});
|
||||
}
|
||||
|
||||
//panorama
|
||||
if (document.getElementById('panorama'))
|
||||
map = GMaps.createPanorama({
|
||||
el: '#panorama',
|
||||
lat: 42.3455,
|
||||
lng: -71.0983
|
||||
});
|
||||
|
||||
//Map type
|
||||
if (document.getElementById('gmaps-types')) {
|
||||
map = new GMaps({
|
||||
div: '#gmaps-types',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333,
|
||||
mapTypeControlOptions: {
|
||||
mapTypeIds: ["hybrid", "roadmap", "satellite", "terrain", "osm"]
|
||||
}
|
||||
});
|
||||
map.addMapType("osm", {
|
||||
getTileUrl: function (coord, zoom) {
|
||||
return "https://a.tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
|
||||
},
|
||||
tileSize: new google.maps.Size(256, 256),
|
||||
name: "OpenStreetMap",
|
||||
maxZoom: 18
|
||||
});
|
||||
map.setMapTypeId("osm");
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,353 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: grid Js File
|
||||
*/
|
||||
|
||||
// Basic Table
|
||||
if (document.getElementById("table-gridjs"))
|
||||
new gridjs.Grid({
|
||||
columns: [{
|
||||
name: 'ID',
|
||||
width: '80px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Name',
|
||||
width: '150px',
|
||||
},
|
||||
{
|
||||
name: 'Email',
|
||||
width: '220px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<a href="">' + cell + '</a>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Position',
|
||||
width: '250px',
|
||||
},
|
||||
{
|
||||
name: 'Company',
|
||||
width: '180px',
|
||||
},
|
||||
{
|
||||
name: 'Country',
|
||||
width: '180px',
|
||||
},
|
||||
{
|
||||
name: 'Actions',
|
||||
width: '150px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html("<a href='#' class='text-reset text-decoration-underline'>" +
|
||||
"Details" +
|
||||
"</a>");
|
||||
})
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
search: true,
|
||||
data: [
|
||||
["01", "Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["02", "Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["03", "Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["04", "Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["05", "Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["06", "Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["07", "Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["08", "Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["09", "Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["10", "Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-gridjs"));
|
||||
|
||||
// card Table
|
||||
if (document.getElementById("table-card"))
|
||||
new gridjs.Grid({
|
||||
columns: [{
|
||||
name: 'Name',
|
||||
width: '150px',
|
||||
},{
|
||||
name: 'Email',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Position',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Company',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Country',
|
||||
width: '150px',
|
||||
}],
|
||||
sort: true,
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
data: [
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-card"));
|
||||
|
||||
|
||||
// pagination Table
|
||||
if (document.getElementById("table-pagination"))
|
||||
new gridjs.Grid({
|
||||
columns: [{
|
||||
name: 'ID',
|
||||
width: '120px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<a href="" class="fw-medium">' + cell + '</a>');
|
||||
})
|
||||
}, {
|
||||
name: 'Name',
|
||||
width: '150px',
|
||||
}, {
|
||||
name: 'Date',
|
||||
width: '180px',
|
||||
}, {
|
||||
name: 'Total',
|
||||
width: '120px',
|
||||
}, {
|
||||
name: 'Status',
|
||||
width: '120px',
|
||||
},
|
||||
{
|
||||
name: 'Actions',
|
||||
width: '100px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html("<button type='button' class='btn btn-sm btn-light'>" +
|
||||
"Details" +
|
||||
"</button>");
|
||||
})
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
|
||||
data: [
|
||||
["#VL2111", "Jonathan", "07 Oct, 2021", "$24.05", "Paid", ],
|
||||
["#VL2110", "Harold", "07 Oct, 2021", "$26.15", "Paid"],
|
||||
["#VL2109", "Shannon", "06 Oct, 2021", "$21.25", "Refund"],
|
||||
["#VL2108", "Robert", "05 Oct, 2021", "$25.03", "Paid"],
|
||||
["#VL2107", "Noel", "05 Oct, 2021", "$22.61", "Paid"],
|
||||
["#VL2106", "Traci", "04 Oct, 2021", "$24.05", "Paid"],
|
||||
["#VL2105", "Kerry", "04 Oct, 2021", "$26.15", "Paid"],
|
||||
["#VL2104", "Patsy", "04 Oct, 2021", "$21.25", "Refund"],
|
||||
["#VL2103", "Cathy", "03 Oct, 2021", "$22.61", "Paid"],
|
||||
["#VL2102", "Tyrone", "03 Oct, 2021", "$25.03", "Paid"],
|
||||
]
|
||||
}).render(document.getElementById("table-pagination"));
|
||||
|
||||
// search Table
|
||||
if (document.getElementById("table-search"))
|
||||
new gridjs.Grid({
|
||||
columns: [{
|
||||
name: 'Name',
|
||||
width: '150px',
|
||||
}, {
|
||||
name: 'Email',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Position',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Company',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Country',
|
||||
width: '150px',
|
||||
}],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
search: true,
|
||||
data: [
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-search"));
|
||||
|
||||
// Sorting Table
|
||||
if (document.getElementById("table-sorting"))
|
||||
new gridjs.Grid({
|
||||
columns: [{
|
||||
name: 'Name',
|
||||
width: '150px',
|
||||
}, {
|
||||
name: 'Email',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Position',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Company',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Country',
|
||||
width: '150px',
|
||||
}],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
data: [
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-sorting"));
|
||||
|
||||
|
||||
// Loading State Table
|
||||
if (document.getElementById("table-loading-state"))
|
||||
new gridjs.Grid({
|
||||
columns: [{
|
||||
name: 'Name',
|
||||
width: '150px',
|
||||
}, {
|
||||
name: 'Email',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Position',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Company',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Country',
|
||||
width: '150px',
|
||||
}],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
data: function () {
|
||||
return new Promise(function (resolve) {
|
||||
setTimeout(function () {
|
||||
resolve([
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"]
|
||||
])
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
}).render(document.getElementById("table-loading-state"));
|
||||
|
||||
|
||||
// Fixed Header
|
||||
if (document.getElementById("table-fixed-header"))
|
||||
new gridjs.Grid({
|
||||
columns: [{
|
||||
name: 'Name',
|
||||
width: '150px',
|
||||
}, {
|
||||
name: 'Email',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Position',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Company',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Country',
|
||||
width: '150px',
|
||||
}],
|
||||
sort: true,
|
||||
pagination: true,
|
||||
fixedHeader: true,
|
||||
height: '400px',
|
||||
data: [
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-fixed-header"));
|
||||
|
||||
|
||||
// Hidden Columns
|
||||
if (document.getElementById("table-hidden-column"))
|
||||
new gridjs.Grid({
|
||||
columns: [{
|
||||
name: 'Name',
|
||||
width: '120px',
|
||||
}, {
|
||||
name: 'Email',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Position',
|
||||
width: '250px',
|
||||
}, {
|
||||
name: 'Company',
|
||||
width: '250px',
|
||||
},
|
||||
{
|
||||
name: 'Country',
|
||||
hidden: true
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
data: [
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-hidden-column"));
|
||||
@@ -0,0 +1,192 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Leaflet init js
|
||||
*/
|
||||
|
||||
// leaflet-map
|
||||
var mymap = L.map('leaflet-map').setView([51.505, -0.09], 13);
|
||||
|
||||
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
|
||||
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
id: 'mapbox/streets-v11',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1
|
||||
}).addTo(mymap);
|
||||
|
||||
// leaflet-map-marker
|
||||
var markermap = L.map('leaflet-map-marker').setView([51.505, -0.09], 13);
|
||||
|
||||
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
|
||||
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
id: 'mapbox/streets-v11',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1
|
||||
}).addTo(markermap);
|
||||
|
||||
L.marker([51.5, -0.09]).addTo(markermap);
|
||||
|
||||
L.circle([51.508, -0.11], {
|
||||
color: '#0ab39c',
|
||||
fillColor: '#0ab39c',
|
||||
fillOpacity: 0.5,
|
||||
radius: 500
|
||||
}).addTo(markermap);
|
||||
|
||||
L.polygon([
|
||||
[51.509, -0.08],
|
||||
[51.503, -0.06],
|
||||
[51.51, -0.047]
|
||||
], {
|
||||
color: '#405189',
|
||||
fillColor: '#405189',
|
||||
}).addTo(markermap);
|
||||
|
||||
|
||||
// Working with popups
|
||||
var popupmap = L.map('leaflet-map-popup').setView([51.505, -0.09], 13);
|
||||
|
||||
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
|
||||
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
id: 'mapbox/streets-v11',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1
|
||||
}).addTo(popupmap);
|
||||
|
||||
L.marker([51.5, -0.09]).addTo(popupmap)
|
||||
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
|
||||
|
||||
L.circle([51.508, -0.11], 500, {
|
||||
color: '#f06548',
|
||||
fillColor: '#f06548',
|
||||
fillOpacity: 0.5
|
||||
}).addTo(popupmap).bindPopup("I am a circle.");
|
||||
|
||||
L.polygon([
|
||||
[51.509, -0.08],
|
||||
[51.503, -0.06],
|
||||
[51.51, -0.047]
|
||||
], {
|
||||
color: '#405189',
|
||||
fillColor: '#405189',
|
||||
}).addTo(popupmap).bindPopup("I am a polygon.");
|
||||
|
||||
var popup = L.popup();
|
||||
|
||||
// leaflet-map-custom-icons
|
||||
var customiconsmap = L.map('leaflet-map-custom-icons').setView([51.5, -0.09], 13);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(customiconsmap);
|
||||
|
||||
var LeafIcon = L.Icon.extend({
|
||||
options: {
|
||||
iconSize: [45, 45],
|
||||
iconAnchor: [22, 94],
|
||||
popupAnchor: [-3, -76]
|
||||
}
|
||||
});
|
||||
|
||||
var greenIcon = new LeafIcon({
|
||||
iconUrl: '../build/images/logo-sm.png'
|
||||
});
|
||||
|
||||
L.marker([51.5, -0.09], {
|
||||
icon: greenIcon
|
||||
}).addTo(customiconsmap);
|
||||
|
||||
// Interactive Choropleth Map
|
||||
var interactivemap = L.map('leaflet-map-interactive-map').setView([37.8, -96], 4);
|
||||
|
||||
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
|
||||
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
id: 'mapbox/light-v9',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1
|
||||
}).addTo(interactivemap);
|
||||
|
||||
// get color depending on population density value
|
||||
function getColor(d) {
|
||||
return d > 1000 ? '#405189' :
|
||||
d > 500 ? '#516194' :
|
||||
d > 200 ? '#63719E' :
|
||||
d > 100 ? '#7480A9' :
|
||||
d > 50 ? '#8590B4' :
|
||||
d > 20 ? '#97A0BF' :
|
||||
d > 10 ? '#A8B0C9' :
|
||||
'#A8B0C9';
|
||||
}
|
||||
|
||||
function style(feature) {
|
||||
return {
|
||||
weight: 2,
|
||||
opacity: 1,
|
||||
color: 'white',
|
||||
dashArray: '3',
|
||||
fillOpacity: 0.7,
|
||||
fillColor: getColor(feature.properties.density)
|
||||
};
|
||||
}
|
||||
|
||||
var geojson = L.geoJson(statesData, {
|
||||
style: style,
|
||||
}).addTo(interactivemap);
|
||||
|
||||
// leaflet-map-group-control
|
||||
var cities = L.layerGroup();
|
||||
|
||||
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
|
||||
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
|
||||
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
|
||||
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
|
||||
|
||||
|
||||
var mbAttr = 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
|
||||
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
|
||||
|
||||
var grayscale = L.tileLayer(mbUrl, {
|
||||
id: 'mapbox/light-v9',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1,
|
||||
attribution: mbAttr
|
||||
}),
|
||||
streets = L.tileLayer(mbUrl, {
|
||||
id: 'mapbox/streets-v11',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1,
|
||||
attribution: mbAttr
|
||||
});
|
||||
|
||||
var layergroupcontrolmap = L.map('leaflet-map-group-control', {
|
||||
center: [39.73, -104.99],
|
||||
zoom: 10,
|
||||
layers: [streets, cities]
|
||||
});
|
||||
|
||||
var baseLayers = {
|
||||
"Grayscale": grayscale,
|
||||
"Streets": streets
|
||||
};
|
||||
|
||||
var overlays = {
|
||||
"Cities": cities
|
||||
};
|
||||
|
||||
L.control.layers(baseLayers, overlays).addTo(layergroupcontrolmap);
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,455 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: list Js File
|
||||
*/
|
||||
|
||||
var checkAll = document.getElementById("checkAll");
|
||||
if (checkAll) {
|
||||
checkAll.onclick = function () {
|
||||
var checkboxes = document.querySelectorAll('.form-check-all input[type="checkbox"]');
|
||||
if (checkAll.checked == true) {
|
||||
Array.from(checkboxes).forEach(function (checkbox) {
|
||||
checkbox.checked = true;
|
||||
checkbox.closest("tr").classList.add("table-active");
|
||||
});
|
||||
} else {
|
||||
Array.from(checkboxes).forEach(function (checkbox) {
|
||||
checkbox.checked = false;
|
||||
checkbox.closest("tr").classList.remove("table-active");
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var perPage = 8;
|
||||
var editlist = false;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"id",
|
||||
"customer_name",
|
||||
"email",
|
||||
"date",
|
||||
"phone",
|
||||
"status",
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2
|
||||
})
|
||||
]
|
||||
};
|
||||
// Init list
|
||||
if (document.getElementById("customerList"))
|
||||
var customerList = new List("customerList", options).on("updated", function (list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
(document.querySelector(".pagination-prev.disabled")) ? document.querySelector(".pagination-prev.disabled").classList.remove("disabled") : '';
|
||||
(document.querySelector(".pagination-next.disabled")) ? document.querySelector(".pagination-next.disabled").classList.remove("disabled") : '';
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length == perPage) {
|
||||
document.querySelector(".pagination.listjs-pagination").firstElementChild.children[0].click()
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
const xhttp = new XMLHttpRequest();
|
||||
xhttp.onload = function () {
|
||||
var json_records = JSON.parse(this.responseText);
|
||||
Array.from(json_records).forEach(raw => {
|
||||
customerList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ' + raw.id + "</a>",
|
||||
customer_name: raw.customer_name,
|
||||
email: raw.email,
|
||||
date: raw.date,
|
||||
phone: raw.phone,
|
||||
status: isStatus(raw.status)
|
||||
});
|
||||
customerList.sort('id', { order: "desc" });
|
||||
refreshCallbacks();
|
||||
});
|
||||
customerList.remove("id", '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ2101</a>');
|
||||
}
|
||||
xhttp.open("GET", "../build/json/table-customer-list.json");
|
||||
xhttp.send();
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
customerList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
|
||||
var isValue = isCount.body.firstElementChild.innerHTML;
|
||||
|
||||
var idField = document.getElementById("id-field"),
|
||||
customerNameField = document.getElementById("customername-field"),
|
||||
emailField = document.getElementById("email-field"),
|
||||
dateField = document.getElementById("date-field"),
|
||||
phoneField = document.getElementById("phone-field"),
|
||||
statusField = document.getElementById("status-field"),
|
||||
addBtn = document.getElementById("add-btn"),
|
||||
editBtn = document.getElementById("edit-btn"),
|
||||
removeBtns = document.getElementsByClassName("remove-item-btn"),
|
||||
editBtns = document.getElementsByClassName("edit-item-btn");
|
||||
refreshCallbacks();
|
||||
//filterContact("All");
|
||||
|
||||
function filterContact(isValue) {
|
||||
var values_status = isValue;
|
||||
customerList.filter(function (data) {
|
||||
var statusFilter = false;
|
||||
matchData = new DOMParser().parseFromString(
|
||||
data.values().status,
|
||||
"text/html"
|
||||
);
|
||||
var status = matchData.body.firstElementChild.innerHTML;
|
||||
if (status == "All" || values_status == "All") {
|
||||
statusFilter = true;
|
||||
} else {
|
||||
statusFilter = status == values_status;
|
||||
}
|
||||
return statusFilter;
|
||||
});
|
||||
|
||||
customerList.update();
|
||||
}
|
||||
|
||||
function updateList() {
|
||||
var values_status = document.querySelector("input[name=status]:checked").value;
|
||||
data = userList.filter(function (item) {
|
||||
var statusFilter = false;
|
||||
|
||||
if (values_status == "All") {
|
||||
statusFilter = true;
|
||||
} else {
|
||||
statusFilter = item.values().sts == values_status;
|
||||
console.log(statusFilter, "statusFilter");
|
||||
}
|
||||
return statusFilter;
|
||||
});
|
||||
userList.update();
|
||||
}
|
||||
|
||||
if (document.getElementById("showModal")) {
|
||||
document.getElementById("showModal").addEventListener("show.bs.modal", function (e) {
|
||||
if (e.relatedTarget.classList.contains("edit-item-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Customer";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("add-btn").innerHTML = "Update";
|
||||
} else if (e.relatedTarget.classList.contains("add-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Add Customer";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("add-btn").innerHTML = "Add Customer";
|
||||
} else {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "List Customer";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "none";
|
||||
}
|
||||
});
|
||||
ischeckboxcheck();
|
||||
|
||||
document.getElementById("showModal").addEventListener("hidden.bs.modal", function () {
|
||||
clearFields();
|
||||
});
|
||||
}
|
||||
document.querySelector("#customerList").addEventListener("click", function () {
|
||||
ischeckboxcheck();
|
||||
});
|
||||
|
||||
var table = document.getElementById("customerTable");
|
||||
// save all tr
|
||||
var tr = table.getElementsByTagName("tr");
|
||||
var trlist = table.querySelectorAll(".list tr");
|
||||
|
||||
var count = 11;
|
||||
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
var forms = document.querySelectorAll('.tablelist-form')
|
||||
|
||||
// Loop over them and prevent submission
|
||||
Array.prototype.slice.call(forms).forEach(function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
event.preventDefault();
|
||||
if (
|
||||
customerNameField.value !== "" &&
|
||||
emailField.value !== "" &&
|
||||
dateField.value !== "" &&
|
||||
phoneField.value !== "" && !editlist
|
||||
) {
|
||||
customerList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ' + count + "</a>",
|
||||
customer_name: customerNameField.value,
|
||||
email: emailField.value,
|
||||
date: dateField.value,
|
||||
phone: phoneField.value,
|
||||
status: isStatus(statusField.value),
|
||||
});
|
||||
customerList.sort('id', { order: "desc" });
|
||||
document.getElementById("close-modal").click();
|
||||
refreshCallbacks();
|
||||
clearFields();
|
||||
filterContact("All");
|
||||
count++;
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Customer inserted successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
}else if (
|
||||
customerNameField.value !== "" &&
|
||||
emailField.value !== "" &&
|
||||
dateField.value !== "" &&
|
||||
phoneField.value !== "" && editlist
|
||||
){
|
||||
var editValues = customerList.get({
|
||||
id: idField.value,
|
||||
});
|
||||
Array.from(editValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
x.values({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">' + idField.value + "</a>",
|
||||
customer_name: customerNameField.value,
|
||||
email: emailField.value,
|
||||
date: dateField.value,
|
||||
phone: phoneField.value,
|
||||
status: isStatus(statusField.value),
|
||||
});
|
||||
}
|
||||
});
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Customer updated Successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}, false)
|
||||
})
|
||||
|
||||
var statusVal = new Choices(statusField);
|
||||
|
||||
function isStatus(val) {
|
||||
switch (val) {
|
||||
case "Active":
|
||||
return (
|
||||
'<span class="badge bg-success-subtle text-success text-uppercase">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Block":
|
||||
return (
|
||||
'<span class="badge bg-danger-subtle text-danger text-uppercase">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function ischeckboxcheck() {
|
||||
Array.from(document.getElementsByName("checkAll")).forEach(function (x) {
|
||||
x.addEventListener("click", function (e) {
|
||||
if (e.target.checked) {
|
||||
e.target.closest("tr").classList.add("table-active");
|
||||
} else {
|
||||
e.target.closest("tr").classList.remove("table-active");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function refreshCallbacks() {
|
||||
if (removeBtns)
|
||||
Array.from(removeBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = customerList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
deleteid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var isElem = deleteid.body.firstElementChild;
|
||||
var isdeleteid = deleteid.body.firstElementChild.innerHTML;
|
||||
if (isdeleteid == itemId) {
|
||||
document.getElementById("delete-record").addEventListener("click", function () {
|
||||
customerList.remove("id", isElem.outerHTML);
|
||||
document.getElementById("deleteRecordModal").click();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
if (editBtns)
|
||||
Array.from(editBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = customerList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
editlist = true;
|
||||
idField.value = selectedid;
|
||||
customerNameField.value = x._values.customer_name;
|
||||
emailField.value = x._values.email;
|
||||
dateField.value = x._values.date;
|
||||
phoneField.value = x._values.phone;
|
||||
|
||||
if (statusVal) statusVal.destroy();
|
||||
statusVal = new Choices(statusField);
|
||||
val = new DOMParser().parseFromString(x._values.status, "text/html");
|
||||
var statusSelec = val.body.firstElementChild.innerHTML;
|
||||
statusVal.setChoiceByValue(statusSelec);
|
||||
|
||||
flatpickr("#date-field", {
|
||||
// enableTime: true,
|
||||
dateFormat: "d M, Y",
|
||||
defaultDate: x._values.date,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function clearFields() {
|
||||
customerNameField.value = "";
|
||||
emailField.value = "";
|
||||
dateField.value = "";
|
||||
phoneField.value = "";
|
||||
}
|
||||
|
||||
function deleteMultiple() {
|
||||
ids_array = [];
|
||||
var items = document.getElementsByName('chk_child');
|
||||
Array.from(items).forEach(function (ele) {
|
||||
if (ele.checked == true) {
|
||||
var trNode = ele.parentNode.parentNode.parentNode;
|
||||
var id = trNode.querySelector('.id a').innerHTML;
|
||||
ids_array.push(id);
|
||||
}
|
||||
});
|
||||
if (typeof ids_array !== 'undefined' && ids_array.length > 0) {
|
||||
if (confirm('Are you sure you want to delete this?')) {
|
||||
Array.from(ids_array).forEach(function (id) {
|
||||
customerList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">${id}</a>`);
|
||||
});
|
||||
document.getElementById('checkAll').checked = false;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Please select at least one checkbox',
|
||||
confirmButtonClass: 'btn btn-info',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (document.querySelector(".pagination-next"))
|
||||
document.querySelector(".pagination-next").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click() : '' : '';
|
||||
});
|
||||
if (document.querySelector(".pagination-prev"))
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click() : '' : '';
|
||||
});
|
||||
|
||||
// data- attribute example
|
||||
var attroptions = {
|
||||
valueNames: [
|
||||
'name',
|
||||
'born',
|
||||
{
|
||||
data: ['id']
|
||||
},
|
||||
{
|
||||
attr: 'src',
|
||||
name: 'image'
|
||||
},
|
||||
{
|
||||
attr: 'href',
|
||||
name: 'link'
|
||||
},
|
||||
{
|
||||
attr: 'data-timestamp',
|
||||
name: 'timestamp'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var attrList = new List('users', attroptions);
|
||||
attrList.add({
|
||||
name: 'Leia',
|
||||
born: '1954',
|
||||
image: '../build/images/users/avatar-5.jpg',
|
||||
id: 5,
|
||||
timestamp: '67893'
|
||||
});
|
||||
|
||||
// Existing List
|
||||
var existOptionsList = {
|
||||
valueNames: ['contact-name', 'contact-message']
|
||||
};
|
||||
var existList = new List('contact-existing-list', existOptionsList);
|
||||
|
||||
// Fuzzy Search list
|
||||
var fuzzySearchList = new List('fuzzysearch-list', {
|
||||
valueNames: ['name']
|
||||
});
|
||||
|
||||
// pagination list
|
||||
var paginationList = new List('pagination-list', {
|
||||
valueNames: ['pagi-list'],
|
||||
page: 3,
|
||||
pagination: true
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Modal init js
|
||||
*/
|
||||
|
||||
|
||||
var varyingcontentModal = document.getElementById('varyingcontentModal')
|
||||
if (varyingcontentModal) {
|
||||
varyingcontentModal.addEventListener('show.bs.modal', function (event) {
|
||||
// Button that triggered the modal
|
||||
var button = event.relatedTarget
|
||||
// Extract info from data-bs-* attributes
|
||||
var recipient = button.getAttribute('data-bs-whatever')
|
||||
// If necessary, you could initiate an AJAX request here
|
||||
// and then do the updating in a callback.
|
||||
//
|
||||
// Update the modal's content.
|
||||
var modalTitle = varyingcontentModal.querySelector('.modal-title')
|
||||
var modalBodyInput = varyingcontentModal.querySelector('.modal-body input')
|
||||
|
||||
modalTitle.textContent = 'New message to ' + recipient
|
||||
modalBodyInput.value = recipient
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: nestable init js
|
||||
*/
|
||||
|
||||
// Nested sortable demo
|
||||
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
|
||||
|
||||
// Loop through each nested sortable element
|
||||
if (nestedSortables)
|
||||
Array.from(nestedSortables).forEach(function (nestedSort){
|
||||
new Sortable(nestedSort, {
|
||||
group: 'nested',
|
||||
animation: 150,
|
||||
fallbackOnBody: true,
|
||||
swapThreshold: 0.65
|
||||
});
|
||||
});
|
||||
|
||||
// Nested sortable handle demo
|
||||
var nestedSortablesHandles = [].slice.call(document.querySelectorAll('.nested-sortable-handle'));
|
||||
if (nestedSortablesHandles)
|
||||
// Loop through each nested sortable element
|
||||
Array.from(nestedSortablesHandles).forEach(function (nestedSortHandle){
|
||||
new Sortable(nestedSortHandle, {
|
||||
handle: '.handle',
|
||||
group: 'nested',
|
||||
animation: 150,
|
||||
fallbackOnBody: true,
|
||||
swapThreshold: 0.65
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Notifications init js
|
||||
*/
|
||||
|
||||
// Bordered Toast
|
||||
var toastTrigger2 = document.getElementById("borderedToast1Btn");
|
||||
var toastLiveExample2 = document.getElementById("borderedToast1");
|
||||
if (toastTrigger2 && toastLiveExample2) {
|
||||
toastTrigger2.addEventListener("click", function () {
|
||||
var toast = new bootstrap.Toast(toastLiveExample2);
|
||||
toast.show();
|
||||
});
|
||||
}
|
||||
|
||||
var toastTrigger3 = document.getElementById("borderedToast2Btn");
|
||||
var toastLiveExample3 = document.getElementById("borderedToast2");
|
||||
if (toastTrigger3 && toastLiveExample3) {
|
||||
toastTrigger3.addEventListener("click", function () {
|
||||
var toast = new bootstrap.Toast(toastLiveExample3);
|
||||
toast.show();
|
||||
});
|
||||
}
|
||||
|
||||
var toastTrigger4 = document.getElementById("borderedTost3Btn");
|
||||
var toastLiveExample4 = document.getElementById("borderedTost3");
|
||||
if (toastTrigger4 && toastLiveExample4) {
|
||||
toastTrigger4.addEventListener("click", function () {
|
||||
var toast = new bootstrap.Toast(toastLiveExample4);
|
||||
toast.show();
|
||||
});
|
||||
}
|
||||
|
||||
var toastTrigger5 = document.getElementById("borderedToast4Btn");
|
||||
var toastLiveExample5 = document.getElementById("borderedToast4");
|
||||
if (toastTrigger5 && toastLiveExample5) {
|
||||
toastTrigger5.addEventListener("click", function () {
|
||||
var toast = new bootstrap.Toast(toastLiveExample5);
|
||||
toast.show();
|
||||
});
|
||||
}
|
||||
|
||||
// placement toast
|
||||
toastPlacement = document.getElementById("toastPlacement");
|
||||
toastPlacement && document.getElementById("selectToastPlacement").addEventListener("change", function () {
|
||||
toastPlacement.dataset.originalClass ||
|
||||
(toastPlacement.dataset.originalClass = toastPlacement.className),
|
||||
(toastPlacement.className =
|
||||
toastPlacement.dataset.originalClass + " " + this.value);
|
||||
}),
|
||||
|
||||
Array.from(document.querySelectorAll(".bd-example .toast")).forEach(function (a) {
|
||||
var b = new bootstrap.Toast(a, {
|
||||
autohide: !1
|
||||
});
|
||||
b.show();
|
||||
});
|
||||
@@ -0,0 +1,94 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Password addon Js File
|
||||
*/
|
||||
|
||||
// password addon
|
||||
Array.from(document.querySelectorAll("form .auth-pass-inputgroup")).forEach(function (item) {
|
||||
Array.from(item.querySelectorAll(".password-addon")).forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function (event) {
|
||||
var passwordInput = item.querySelector(".password-input");
|
||||
if (passwordInput.type === "password") {
|
||||
passwordInput.type = "text";
|
||||
} else {
|
||||
passwordInput.type = "password";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// passowrd match
|
||||
var password = document.getElementById("password-input"),
|
||||
confirm_password = document.getElementById("confirm-password-input");
|
||||
|
||||
function validatePassword() {
|
||||
if (password.value != confirm_password.value) {
|
||||
confirm_password.setCustomValidity("Passwords Don't Match");
|
||||
} else {
|
||||
confirm_password.setCustomValidity("");
|
||||
}
|
||||
}
|
||||
|
||||
//Password validation
|
||||
password.onchange = validatePassword;
|
||||
|
||||
var myInput = document.getElementById("password-input");
|
||||
var letter = document.getElementById("pass-lower");
|
||||
var capital = document.getElementById("pass-upper");
|
||||
var number = document.getElementById("pass-number");
|
||||
var length = document.getElementById("pass-length");
|
||||
|
||||
// When the user clicks on the password field, show the message box
|
||||
myInput.onfocus = function () {
|
||||
document.getElementById("password-contain").style.display = "block";
|
||||
};
|
||||
|
||||
// When the user clicks outside of the password field, hide the password-contain box
|
||||
myInput.onblur = function () {
|
||||
document.getElementById("password-contain").style.display = "none";
|
||||
};
|
||||
|
||||
// When the user starts to type something inside the password field
|
||||
myInput.onkeyup = function () {
|
||||
// Validate lowercase letters
|
||||
var lowerCaseLetters = /[a-z]/g;
|
||||
if (myInput.value.match(lowerCaseLetters)) {
|
||||
letter.classList.remove("invalid");
|
||||
letter.classList.add("valid");
|
||||
} else {
|
||||
letter.classList.remove("valid");
|
||||
letter.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate capital letters
|
||||
var upperCaseLetters = /[A-Z]/g;
|
||||
if (myInput.value.match(upperCaseLetters)) {
|
||||
capital.classList.remove("invalid");
|
||||
capital.classList.add("valid");
|
||||
} else {
|
||||
capital.classList.remove("valid");
|
||||
capital.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate numbers
|
||||
var numbers = /[0-9]/g;
|
||||
if (myInput.value.match(numbers)) {
|
||||
number.classList.remove("invalid");
|
||||
number.classList.add("valid");
|
||||
} else {
|
||||
number.classList.remove("valid");
|
||||
number.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate length
|
||||
if (myInput.value.length >= 8) {
|
||||
length.classList.remove("invalid");
|
||||
length.classList.add("valid");
|
||||
} else {
|
||||
length.classList.remove("valid");
|
||||
length.classList.add("invalid");
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Password addon Js File
|
||||
*/
|
||||
|
||||
// password addon
|
||||
Array.from(document.querySelectorAll("form .auth-pass-inputgroup")).forEach(function (item) {
|
||||
Array.from(item.querySelectorAll(".password-addon")).forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function (event) {
|
||||
var passwordInput = item.querySelector(".password-input");
|
||||
if (passwordInput.type === "password") {
|
||||
passwordInput.type = "text";
|
||||
} else {
|
||||
passwordInput.type = "password";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,80 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: password-match init js
|
||||
*/
|
||||
|
||||
// passowrd match
|
||||
var password = document.getElementById("password-input"),
|
||||
confirm_password = document.getElementById("confirm-password-input");
|
||||
|
||||
function validatePassword() {
|
||||
if (password.value != confirm_password.value) {
|
||||
confirm_password.setCustomValidity("Passwords Don't Match");
|
||||
} else {
|
||||
confirm_password.setCustomValidity("");
|
||||
}
|
||||
}
|
||||
|
||||
//Password validation
|
||||
password.onchange = validatePassword;
|
||||
|
||||
var myInput = document.getElementById("password-input");
|
||||
var letter = document.getElementById("pass-lower");
|
||||
var capital = document.getElementById("pass-upper");
|
||||
var number = document.getElementById("pass-number");
|
||||
var length = document.getElementById("pass-length");
|
||||
|
||||
// When the user clicks on the password field, show the message box
|
||||
myInput.onfocus = function () {
|
||||
document.getElementById("password-contain").style.display = "block";
|
||||
};
|
||||
|
||||
// When the user clicks outside of the password field, hide the password-contain box
|
||||
myInput.onblur = function () {
|
||||
document.getElementById("password-contain").style.display = "none";
|
||||
};
|
||||
|
||||
// When the user starts to type something inside the password field
|
||||
myInput.onkeyup = function () {
|
||||
// Validate lowercase letters
|
||||
var lowerCaseLetters = /[a-z]/g;
|
||||
if (myInput.value.match(lowerCaseLetters)) {
|
||||
letter.classList.remove("invalid");
|
||||
letter.classList.add("valid");
|
||||
} else {
|
||||
letter.classList.remove("valid");
|
||||
letter.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate capital letters
|
||||
var upperCaseLetters = /[A-Z]/g;
|
||||
if (myInput.value.match(upperCaseLetters)) {
|
||||
capital.classList.remove("invalid");
|
||||
capital.classList.add("valid");
|
||||
} else {
|
||||
capital.classList.remove("valid");
|
||||
capital.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate numbers
|
||||
var numbers = /[0-9]/g;
|
||||
if (myInput.value.match(numbers)) {
|
||||
number.classList.remove("invalid");
|
||||
number.classList.add("valid");
|
||||
} else {
|
||||
number.classList.remove("valid");
|
||||
number.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate length
|
||||
if (myInput.value.length >= 8) {
|
||||
length.classList.remove("invalid");
|
||||
length.classList.add("valid");
|
||||
} else {
|
||||
length.classList.remove("valid");
|
||||
length.classList.add("invalid");
|
||||
}
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,465 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Range sliders Js File
|
||||
*/
|
||||
|
||||
/*********************
|
||||
basic example
|
||||
**********************/
|
||||
var sliderColorScheme = document.querySelectorAll('[data-rangeslider]');
|
||||
if (sliderColorScheme)
|
||||
Array.from(sliderColorScheme).forEach(function (slider) {
|
||||
noUiSlider.create(slider, {
|
||||
start: 127,
|
||||
connect: 'lower',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 255
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
/*********************
|
||||
multi range handle
|
||||
**********************/
|
||||
|
||||
var multielementslider = document.querySelectorAll('[data-multielement]');
|
||||
if (multielementslider)
|
||||
Array.from(multielementslider).forEach(function (slider) {
|
||||
noUiSlider.create(slider, {
|
||||
start: [20, 80],
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/*********************
|
||||
Colorpicker
|
||||
**********************/
|
||||
|
||||
var resultElement = document.getElementById('result');
|
||||
var sliders = document.getElementsByClassName('sliders');
|
||||
var colors = [0, 0, 0];
|
||||
if (sliders)
|
||||
Array.from([].slice.call(sliders)).forEach(function (slider, index) {
|
||||
|
||||
noUiSlider.create(slider, {
|
||||
start: 127,
|
||||
connect: [true, false],
|
||||
orientation: "vertical",
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 255
|
||||
},
|
||||
format: wNumb({
|
||||
decimals: 0
|
||||
})
|
||||
});
|
||||
|
||||
// Bind the color changing function to the update event.
|
||||
slider.noUiSlider.on('update', function () {
|
||||
|
||||
colors[index] = slider.noUiSlider.get();
|
||||
|
||||
var color = 'rgb(' + colors.join(',') + ')';
|
||||
|
||||
resultElement.style.background = color;
|
||||
resultElement.style.color = color;
|
||||
});
|
||||
});
|
||||
|
||||
/*********************
|
||||
Using HTML5 input elements
|
||||
**********************/
|
||||
|
||||
var select = document.getElementById('input-select');
|
||||
// Append the option elements
|
||||
for (var i = -20; i <= 40; i++) {
|
||||
var option = document.createElement("option");
|
||||
option.text = i;
|
||||
option.value = i;
|
||||
select.appendChild(option);
|
||||
}
|
||||
|
||||
var html5Slider = document.getElementById('html5');
|
||||
if (html5Slider)
|
||||
noUiSlider.create(html5Slider, {
|
||||
start: [10, 30],
|
||||
connect: true,
|
||||
range: {
|
||||
'min': -20,
|
||||
'max': 40
|
||||
}
|
||||
});
|
||||
|
||||
var inputNumber = document.getElementById('input-number');
|
||||
if (inputNumber && html5Slider) {
|
||||
html5Slider.noUiSlider.on('update', function (values, handle) {
|
||||
|
||||
var value = values[handle];
|
||||
|
||||
if (handle) {
|
||||
inputNumber.value = value;
|
||||
} else {
|
||||
select.value = Math.round(value);
|
||||
}
|
||||
});
|
||||
|
||||
select.addEventListener('change', function () {
|
||||
html5Slider.noUiSlider.set([this.value, null]);
|
||||
});
|
||||
|
||||
inputNumber.addEventListener('change', function () {
|
||||
html5Slider.noUiSlider.set([null, this.value]);
|
||||
});
|
||||
}
|
||||
|
||||
/*********************
|
||||
Non linear slider
|
||||
**********************/
|
||||
var nonLinearSlider = document.getElementById('nonlinear');
|
||||
if (nonLinearSlider)
|
||||
noUiSlider.create(nonLinearSlider, {
|
||||
connect: true,
|
||||
behaviour: 'tap',
|
||||
start: [500, 4000],
|
||||
range: {
|
||||
// Starting at 500, step the value by 500,
|
||||
// until 4000 is reached. From there, step by 1000.
|
||||
'min': [0],
|
||||
'10%': [500, 500],
|
||||
'50%': [4000, 1000],
|
||||
'max': [10000]
|
||||
}
|
||||
});
|
||||
|
||||
var nodes = [
|
||||
document.getElementById('lower-value'), // 0
|
||||
document.getElementById('upper-value') // 1
|
||||
];
|
||||
|
||||
// Display the slider value and how far the handle moved
|
||||
// from the left edge of the slider.
|
||||
nonLinearSlider.noUiSlider.on('update', function (values, handle, unencoded, isTap, positions) {
|
||||
nodes[handle].innerHTML = values[handle] + ', ' + positions[handle].toFixed(2) + '%';
|
||||
});
|
||||
|
||||
/*********************
|
||||
Locking sliders together
|
||||
**********************/
|
||||
var lockedState = false;
|
||||
var lockedSlider = false;
|
||||
var lockedValues = [60, 80];
|
||||
|
||||
var slider1 = document.getElementById('slider1');
|
||||
var slider2 = document.getElementById('slider2');
|
||||
|
||||
var lockButton = document.getElementById('lockbutton');
|
||||
var slider1Value = document.getElementById('slider1-span');
|
||||
var slider2Value = document.getElementById('slider2-span');
|
||||
|
||||
// When the button is clicked, the locked state is inverted.
|
||||
if (lockButton)
|
||||
lockButton.addEventListener('click', function () {
|
||||
lockedState = !lockedState;
|
||||
this.textContent = lockedState ? 'unlock' : 'lock';
|
||||
});
|
||||
|
||||
function crossUpdate(value, slider) {
|
||||
|
||||
// If the sliders aren't interlocked, don't
|
||||
// cross-update.
|
||||
if (!lockedState) return;
|
||||
|
||||
// Select whether to increase or decrease
|
||||
// the other slider value.
|
||||
var a = slider1 === slider ? 0 : 1;
|
||||
|
||||
// Invert a
|
||||
var b = a ? 0 : 1;
|
||||
|
||||
// Offset the slider value.
|
||||
value -= lockedValues[b] - lockedValues[a];
|
||||
|
||||
// Set the value
|
||||
slider.noUiSlider.set(value);
|
||||
}
|
||||
|
||||
noUiSlider.create(slider1, {
|
||||
start: 60,
|
||||
|
||||
// Disable animation on value-setting,
|
||||
// so the sliders respond immediately.
|
||||
animate: false,
|
||||
range: {
|
||||
min: 50,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
noUiSlider.create(slider2, {
|
||||
start: 80,
|
||||
animate: false,
|
||||
range: {
|
||||
min: 50,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
if (slider1 && slider2) {
|
||||
slider1.noUiSlider.on('update', function (values, handle) {
|
||||
slider1Value.innerHTML = values[handle];
|
||||
});
|
||||
slider2.noUiSlider.on('update', function (values, handle) {
|
||||
slider2Value.innerHTML = values[handle];
|
||||
});
|
||||
|
||||
|
||||
function setLockedValues() {
|
||||
lockedValues = [
|
||||
Number(slider1.noUiSlider.get()),
|
||||
Number(slider2.noUiSlider.get())
|
||||
];
|
||||
}
|
||||
|
||||
slider1.noUiSlider.on('change', setLockedValues);
|
||||
slider2.noUiSlider.on('change', setLockedValues);
|
||||
|
||||
slider1.noUiSlider.on('slide', function (values, handle) {
|
||||
crossUpdate(values[handle], slider2);
|
||||
});
|
||||
|
||||
slider2.noUiSlider.on('slide', function (values, handle) {
|
||||
crossUpdate(values[handle], slider1);
|
||||
});
|
||||
}
|
||||
|
||||
/*********************
|
||||
mergingTooltipSlider
|
||||
**********************/
|
||||
var mergingTooltipSlider = document.getElementById('slider-merging-tooltips');
|
||||
if (mergingTooltipSlider) {
|
||||
noUiSlider.create(mergingTooltipSlider, {
|
||||
start: [20, 75],
|
||||
connect: true,
|
||||
tooltips: [true, true],
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
mergeTooltips(mergingTooltipSlider, 5, ' - ');
|
||||
}
|
||||
|
||||
/**
|
||||
* @param slider HtmlElement with an initialized slider
|
||||
* @param threshold Minimum proximity (in percentages) to merge tooltips
|
||||
* @param separator String joining tooltips
|
||||
*/
|
||||
function mergeTooltips(slider, threshold, separator) {
|
||||
|
||||
var textIsRtl = getComputedStyle(slider).direction === 'rtl';
|
||||
var isRtl = slider.noUiSlider.options.direction === 'rtl';
|
||||
var isVertical = slider.noUiSlider.options.orientation === 'vertical';
|
||||
var tooltips = slider.noUiSlider.getTooltips();
|
||||
var origins = slider.noUiSlider.getOrigins();
|
||||
|
||||
// Move tooltips into the origin element. The default stylesheet handles this.
|
||||
Array.from(tooltips).forEach(function (tooltip, index) {
|
||||
if (tooltip) {
|
||||
origins[index].appendChild(tooltip);
|
||||
}
|
||||
});
|
||||
if (slider)
|
||||
slider.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) {
|
||||
|
||||
var pools = [
|
||||
[]
|
||||
];
|
||||
var poolPositions = [
|
||||
[]
|
||||
];
|
||||
var poolValues = [
|
||||
[]
|
||||
];
|
||||
var atPool = 0;
|
||||
|
||||
// Assign the first tooltip to the first pool, if the tooltip is configured
|
||||
if (tooltips[0]) {
|
||||
pools[0][0] = 0;
|
||||
poolPositions[0][0] = positions[0];
|
||||
poolValues[0][0] = values[0];
|
||||
}
|
||||
|
||||
for (var i = 1; i < positions.length; i++) {
|
||||
if (!tooltips[i] || (positions[i] - positions[i - 1]) > threshold) {
|
||||
atPool++;
|
||||
pools[atPool] = [];
|
||||
poolValues[atPool] = [];
|
||||
poolPositions[atPool] = [];
|
||||
}
|
||||
|
||||
if (tooltips[i]) {
|
||||
pools[atPool].push(i);
|
||||
poolValues[atPool].push(values[i]);
|
||||
poolPositions[atPool].push(positions[i]);
|
||||
}
|
||||
}
|
||||
|
||||
Array.from(pools).forEach(function (pool, poolIndex) {
|
||||
var handlesInPool = pool.length;
|
||||
|
||||
for (var j = 0; j < handlesInPool; j++) {
|
||||
var handleNumber = pool[j];
|
||||
|
||||
if (j === handlesInPool - 1) {
|
||||
var offset = 0;
|
||||
|
||||
Array.from(poolPositions[poolIndex]).forEach(function (value) {
|
||||
offset += 1000 - value;
|
||||
});
|
||||
|
||||
var direction = isVertical ? 'bottom' : 'right';
|
||||
var last = isRtl ? 0 : handlesInPool - 1;
|
||||
var lastOffset = 1000 - poolPositions[poolIndex][last];
|
||||
offset = (textIsRtl && !isVertical ? 100 : 0) + (offset / handlesInPool) - lastOffset;
|
||||
|
||||
// Center this tooltip over the affected handles
|
||||
tooltips[handleNumber].innerHTML = poolValues[poolIndex].join(separator);
|
||||
tooltips[handleNumber].style.display = 'block';
|
||||
tooltips[handleNumber].style[direction] = offset + '%';
|
||||
} else {
|
||||
// Hide this tooltip
|
||||
tooltips[handleNumber].style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*********************
|
||||
tooltip
|
||||
**********************/
|
||||
var hidingTooltipSlider = document.getElementById('slider-hide');
|
||||
if (hidingTooltipSlider)
|
||||
noUiSlider.create(hidingTooltipSlider, {
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
start: [20, 80],
|
||||
tooltips: true
|
||||
});
|
||||
|
||||
/*********************
|
||||
pipe - scale
|
||||
**********************/
|
||||
var pipsSlider = document.getElementById('slider-pips');
|
||||
if (pipsSlider)
|
||||
noUiSlider.create(pipsSlider, {
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
start: [50],
|
||||
pips: {
|
||||
mode: 'count',
|
||||
values: 5
|
||||
}
|
||||
});
|
||||
|
||||
var pips = pipsSlider.querySelectorAll('.noUi-value');
|
||||
|
||||
function clickOnPip() {
|
||||
var value = Number(this.getAttribute('data-value'));
|
||||
pipsSlider.noUiSlider.set(value);
|
||||
}
|
||||
if (pips)
|
||||
Array.from(pips).forEach(function (ele) {
|
||||
// For this example. Do this in CSS!
|
||||
ele.style.cursor = 'pointer';
|
||||
ele.addEventListener('click', clickOnPip);
|
||||
});
|
||||
|
||||
/*********************
|
||||
Colored Connect Elements
|
||||
**********************/
|
||||
var slider = document.getElementById('slider-color');
|
||||
if (slider)
|
||||
noUiSlider.create(slider, {
|
||||
start: [4000, 8000, 12000, 16000],
|
||||
connect: [false, true, true, true, true],
|
||||
range: {
|
||||
'min': [2000],
|
||||
'max': [20000]
|
||||
}
|
||||
});
|
||||
|
||||
var connect = slider.querySelectorAll('.noUi-connect');
|
||||
var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];
|
||||
|
||||
var i = 0;
|
||||
Array.from(connect).forEach(function (ele) {
|
||||
ele.classList.add(classes[i]);
|
||||
i ++;
|
||||
});
|
||||
|
||||
/*********************
|
||||
toggle slider
|
||||
**********************/
|
||||
var toggleSlider = document.getElementById('slider-toggle');
|
||||
if (toggleSlider) {
|
||||
noUiSlider.create(toggleSlider, {
|
||||
orientation: "vertical",
|
||||
start: 0,
|
||||
range: {
|
||||
'min': [0, 1],
|
||||
'max': 1
|
||||
},
|
||||
format: wNumb({
|
||||
decimals: 0
|
||||
})
|
||||
});
|
||||
|
||||
toggleSlider.noUiSlider.on('update', function (values, handle) {
|
||||
if (values[handle] === '1') {
|
||||
toggleSlider.classList.add('off');
|
||||
} else {
|
||||
toggleSlider.classList.remove('off');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*********************
|
||||
Soft limits
|
||||
**********************/
|
||||
var softSlider = document.getElementById('soft');
|
||||
if (softSlider) {
|
||||
noUiSlider.create(softSlider, {
|
||||
start: 50,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
pips: {
|
||||
mode: 'values',
|
||||
values: [20, 80],
|
||||
density: 4
|
||||
}
|
||||
});
|
||||
|
||||
softSlider.noUiSlider.on('change', function (values, handle) {
|
||||
if (values[handle] < 20) {
|
||||
softSlider.noUiSlider.set(20);
|
||||
} else if (values[handle] > 80) {
|
||||
softSlider.noUiSlider.set(80);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Rating Js File
|
||||
*/
|
||||
|
||||
// basic-rater
|
||||
if (document.querySelector('#basic-rater'))
|
||||
var basicRating = raterJs({
|
||||
starSize: 22,
|
||||
rating: 3,
|
||||
element: document.querySelector("#basic-rater"),
|
||||
rateCallback: function rateCallback(rating, done) {
|
||||
this.setRating(rating);
|
||||
done();
|
||||
}
|
||||
});
|
||||
|
||||
// rater-step
|
||||
if (document.querySelector('#rater-step'))
|
||||
var starRatingStep = raterJs({
|
||||
starSize: 22,
|
||||
rating: 1.5,
|
||||
element: document.querySelector("#rater-step"),
|
||||
rateCallback: function rateCallback(rating, done) {
|
||||
this.setRating(rating);
|
||||
done();
|
||||
}
|
||||
});
|
||||
|
||||
// rater-message
|
||||
var messageDataService = {
|
||||
rate: function (rating) {
|
||||
return {
|
||||
then: function (callback) {
|
||||
setTimeout(function () {
|
||||
callback((Math.random() * 5));
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (document.querySelector('#rater-message'))
|
||||
var starRatingmessage = raterJs({
|
||||
isBusyText: "Rating in progress. Please wait...",
|
||||
starSize: 22,
|
||||
element: document.querySelector("#rater-message"),
|
||||
rateCallback: function rateCallback(rating, done) {
|
||||
starRatingmessage.setRating(rating);
|
||||
messageDataService.rate().then(function (avgRating) {
|
||||
starRatingmessage.setRating(avgRating);
|
||||
done();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// rater-unlimitedstar
|
||||
if (document.querySelector('#rater-unlimitedstar'))
|
||||
var starRatingunlimited = raterJs({
|
||||
max: 16,
|
||||
readOnly: true,
|
||||
rating: 4.4,
|
||||
element: document.querySelector("#rater-unlimitedstar")
|
||||
});
|
||||
|
||||
// rater-onhover
|
||||
if (document.querySelector('#rater-onhover'))
|
||||
var starRatinghover = raterJs({
|
||||
starSize: 22,
|
||||
rating: 1,
|
||||
element: document.querySelector("#rater-onhover"),
|
||||
rateCallback: function rateCallback(rating, done) {
|
||||
this.setRating(rating);
|
||||
done();
|
||||
},
|
||||
onHover: function (currentIndex, currentRating) {
|
||||
document.querySelector('.ratingnum').textContent = currentIndex;
|
||||
},
|
||||
onLeave: function (currentIndex, currentRating) {
|
||||
document.querySelector('.ratingnum').textContent = currentRating;
|
||||
}
|
||||
});
|
||||
|
||||
// rater-reset
|
||||
if (document.querySelector('#raterreset'))
|
||||
var starRatingreset = raterJs({
|
||||
starSize: 22,
|
||||
rating: 2,
|
||||
element: document.querySelector("#raterreset"),
|
||||
rateCallback: function rateCallback(rating, done) {
|
||||
this.setRating(rating);
|
||||
done();
|
||||
}
|
||||
});
|
||||
|
||||
if (document.querySelector('#raterreset-button'))
|
||||
document.querySelector('#raterreset-button').addEventListener("click", function () {
|
||||
starRatingreset.clear();
|
||||
}, false);
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,481 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Sweatalerts init js
|
||||
*/
|
||||
|
||||
//Basic
|
||||
if (document.getElementById("sa-basic"))
|
||||
document.getElementById("sa-basic").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: 'Any fool can use a computer',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs mt-2',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
//A title with a text under
|
||||
if (document.getElementById("sa-title"))
|
||||
document.getElementById("sa-title").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: "The Internet?",
|
||||
text: 'That thing is still around?',
|
||||
icon: 'question',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs mt-2',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
//Success Message
|
||||
if (document.getElementById("sa-success"))
|
||||
document.getElementById("sa-success").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: 'Good job!',
|
||||
text: 'You clicked the button!',
|
||||
icon: 'success',
|
||||
showCancelButton: true,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs mt-2 me-2',
|
||||
cancelButton: 'btn btn-danger w-xs mt-2',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
//error Message
|
||||
if (document.getElementById("sa-error"))
|
||||
document.getElementById("sa-error").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: 'Oops...',
|
||||
text: 'Something went wrong!',
|
||||
icon: 'error',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs mt-2',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
footer: '<a href="">Why do I have this issue?</a>',
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
// long content
|
||||
if (document.getElementById("sa-longcontent"))
|
||||
document.getElementById("sa-longcontent").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
imageUrl: 'https://placeholder.pics/svg/300x1500',
|
||||
imageHeight: 1500,
|
||||
imageAlt: 'A tall image',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs mt-2',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
//Warning Message
|
||||
if (document.getElementById("sa-warning"))
|
||||
document.getElementById("sa-warning").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: "Are you sure?",
|
||||
text: "You won't be able to revert this!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs me-2 mt-2',
|
||||
cancelButton: 'btn btn-danger w-xs mt-2',
|
||||
},
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
title: 'Deleted!',
|
||||
text: 'Your file has been deleted.',
|
||||
icon: 'success',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs mt-2',
|
||||
},
|
||||
buttonsStyling: false
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//Parameter
|
||||
if (document.getElementById("sa-params"))
|
||||
document.getElementById("sa-params").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonText: 'No, cancel!',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs me-2 mt-2',
|
||||
cancelButton: 'btn btn-danger w-xs mt-2',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
title: 'Deleted!',
|
||||
text: 'Your file has been deleted.',
|
||||
icon: 'success',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs mt-2',
|
||||
},
|
||||
buttonsStyling: false
|
||||
})
|
||||
} else if (
|
||||
// Read more about handling dismissals
|
||||
result.dismiss === Swal.DismissReason.cancel
|
||||
) {
|
||||
Swal.fire({
|
||||
title: 'Cancelled',
|
||||
text: 'Your imaginary file is safe :)',
|
||||
icon: 'error',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary mt-2',
|
||||
},
|
||||
buttonsStyling: false
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
//Custom Image
|
||||
if (document.getElementById("sa-image"))
|
||||
document.getElementById("sa-image").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: 'Sweet!',
|
||||
text: 'Modal with a custom image.',
|
||||
imageUrl: '../build/images/logo-sm.png',
|
||||
imageHeight: 40,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs mt-2',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
animation: false,
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
//Auto Close Timer
|
||||
if (document.getElementById("sa-close"))
|
||||
document.getElementById("sa-close").addEventListener("click", function () {
|
||||
var timerInterval;
|
||||
Swal.fire({
|
||||
title: 'Auto close alert!',
|
||||
html: 'I will close in <strong></strong> seconds.',
|
||||
timer: 2000,
|
||||
timerProgressBar: true,
|
||||
showCloseButton: true,
|
||||
didOpen: function () {
|
||||
Swal.showLoading()
|
||||
timerInterval = setInterval(function () {
|
||||
var content = Swal.getHtmlContainer()
|
||||
if (content) {
|
||||
var b = content.querySelector('b')
|
||||
if (b) {
|
||||
b.textContent = Swal.getTimerLeft()
|
||||
}
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
onClose: function () {
|
||||
clearInterval(timerInterval)
|
||||
}
|
||||
}).then(function (result) {
|
||||
/* Read more about handling dismissals below */
|
||||
if (result.dismiss === Swal.DismissReason.timer) {
|
||||
console.log('I was closed by the timer')
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//custom html alert
|
||||
if (document.getElementById("custom-html-alert"))
|
||||
document.getElementById("custom-html-alert").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: '<i>HTML</i> <u>example</u>',
|
||||
icon: 'info',
|
||||
html: 'You can use <b>bold text</b>, ' +
|
||||
'<a href="//Themesbrand.in/">links</a> ' +
|
||||
'and other HTML tags',
|
||||
showCloseButton: true,
|
||||
showCancelButton: true,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success me-2',
|
||||
cancelButton: 'btn btn-danger',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: '<i class="ri-thumb-up-fill align-bottom me-1"></i> Great!',
|
||||
cancelButtonText: '<i class="ri-thumb-down-fill align-bottom"></i>',
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
//dialog three buttons
|
||||
if (document.getElementById("sa-dialog-three-btn"))
|
||||
document.getElementById("sa-dialog-three-btn").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: 'Do you want to save the changes?',
|
||||
showDenyButton: true,
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Save',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success w-xs me-2',
|
||||
cancelButton: 'btn btn-danger w-xs',
|
||||
denyButton: 'btn btn-info w-xs me-2',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
denyButtonText: 'Don\'t save',
|
||||
showCloseButton: true
|
||||
}).then(function (result) {
|
||||
/* Read more about isConfirmed, isDenied below */
|
||||
if (result.isConfirmed) {
|
||||
Swal.fire({
|
||||
title: 'Saved!',
|
||||
icon: 'success',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
})
|
||||
} else if (result.isDenied) {
|
||||
Swal.fire({
|
||||
title: 'Changes are not saved',
|
||||
icon: 'info',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//position
|
||||
if (document.getElementById("sa-position"))
|
||||
document.getElementById("sa-position").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
position: 'top-end',
|
||||
icon: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500,
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
//Custom width padding
|
||||
if (document.getElementById("custom-padding-width-alert"))
|
||||
document.getElementById("custom-padding-width-alert").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: 'Custom width, padding, background.',
|
||||
width: 600,
|
||||
padding: 100,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
background: '#fff url(../build/images/chat-bg-pattern.png)'
|
||||
})
|
||||
});
|
||||
|
||||
//Ajax
|
||||
if (document.getElementById("ajax-alert"))
|
||||
document.getElementById("ajax-alert").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: 'Submit email to run ajax request',
|
||||
input: 'email',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Submit',
|
||||
showLoaderOnConfirm: true,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs me-2',
|
||||
cancelButton: 'btn btn-danger w-xs',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true,
|
||||
preConfirm: function (email) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
setTimeout(function () {
|
||||
if (email === 'taken@example.com') {
|
||||
reject('This email is already taken.')
|
||||
} else {
|
||||
resolve()
|
||||
}
|
||||
}, 2000)
|
||||
})
|
||||
},
|
||||
allowOutsideClick: false
|
||||
}).then(function (email) {
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Ajax request finished!',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs',
|
||||
},
|
||||
buttonsStyling: false,
|
||||
html: 'Submitted email: ' + email
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
// Custom SweatAlerts
|
||||
|
||||
//Custom success Message
|
||||
if (document.getElementById("custom-sa-success"))
|
||||
document.getElementById("custom-sa-success").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
html: '<div class="mt-3">' +
|
||||
'<lord-icon src="https://cdn.lordicon.com/lupuorrc.json" trigger="loop" colors="primary:#0ab39c,secondary:#405189" style="width:120px;height:120px"></lord-icon>' +
|
||||
'<div class="mt-4 pt-2 fs-15">' +
|
||||
'<h4>Well done !</h4>' +
|
||||
'<p class="text-muted mx-4 mb-0">Aww yeah, you successfully read this important message.</p>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
showCancelButton: true,
|
||||
showConfirmButton: false,
|
||||
customClass: {
|
||||
cancelButton: 'btn btn-primary w-xs mb-1',
|
||||
},
|
||||
cancelButtonText: 'Back',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
//Custom error Message
|
||||
if (document.getElementById("custom-sa-error"))
|
||||
document.getElementById("custom-sa-error").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
html: '<div class="mt-3">' +
|
||||
'<lord-icon src="https://cdn.lordicon.com/tdrtiskw.json" trigger="loop" colors="primary:#f06548,secondary:#f7b84b" style="width:120px;height:120px"></lord-icon>' +
|
||||
'<div class="mt-4 pt-2 fs-15">' +
|
||||
'<h4>Oops...! Something went Wrong !</h4>' +
|
||||
'<p class="text-muted mx-4 mb-0">Your email Address is invalid</p>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
showCancelButton: true,
|
||||
showConfirmButton: false,
|
||||
customClass: {
|
||||
cancelButton: 'btn btn-primary w-xs mb-1',
|
||||
},
|
||||
cancelButtonText: 'Dismiss',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
//Custom error Message
|
||||
if (document.getElementById("custom-sa-warning"))
|
||||
document.getElementById("custom-sa-warning").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
html: '<div class="mt-3">' +
|
||||
'<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>' +
|
||||
'<div class="mt-4 pt-2 fs-15 mx-5">' +
|
||||
'<h4>Are you Sure ?</h4>' +
|
||||
'<p class="text-muted mx-4 mb-0">Are you Sure You want to Delete this Account ?</p>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
showCancelButton: true,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs me-2 mb-1',
|
||||
cancelButton: 'btn btn-danger w-xs mb-1',
|
||||
},
|
||||
confirmButtonText: 'Yes, Delete It!',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
// custom Join Our Community
|
||||
if (document.getElementById("custom-sa-community"))
|
||||
document.getElementById("custom-sa-community").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
title: 'Join Our Community',
|
||||
html: 'You can use <b>bold text</b>, ' +
|
||||
'<a href="//Themesbrand.in/">links</a> ' +
|
||||
'and other HTML tags',
|
||||
html: '<div class="mt-3 text-start">' +
|
||||
'<label for="input-email" class="form-label fs-13">Email</label>' +
|
||||
'<input type="email" class="form-control" id="input-email" placeholder="Enter Email Address">' +
|
||||
'</div>',
|
||||
imageUrl: '../build/images/logo-sm.png',
|
||||
footer: '<p class="fs-13 text-muted mb-0">Already have an account ? <a href="#" class="fw-semibold text-decoration-underline"> Signin </a> </p>',
|
||||
imageHeight: 40,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary w-xs mb-2',
|
||||
},
|
||||
confirmButtonText: 'Register <i class="ri-arrow-right-line ms-1 align-bottom"></i>',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
//Custom Email varification
|
||||
if (document.getElementById("custom-sa-email-verify"))
|
||||
document.getElementById("custom-sa-email-verify").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
html: '<div class="mt-3">' +
|
||||
'<div class="avatar-lg mx-auto">' +
|
||||
'<div class="avatar-title bg-light text-success display-5 rounded-circle">' +
|
||||
'<i class="ri-mail-send-fill"></i>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="mt-4 pt-2 fs-15">' +
|
||||
'<h4 class="fs-20 fw-semibold">Verify Your Email</h4>' +
|
||||
'<p class="text-muted mb-0 mt-3 fs-13">We have sent you verification email <span class="fw-medium text-dark">example@abc.com</span>, <br/> Please check it.</p>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
showCancelButton: false,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary mb-1',
|
||||
},
|
||||
confirmButtonText: 'Verify Email',
|
||||
buttonsStyling: false,
|
||||
footer: '<p class="fs-14 text-muted mb-0">Didn\'t receive an email ? <a href="#" class="fw-semibold text-decoration-underline">Resend</a></p>',
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
//Custom notification Message
|
||||
if (document.getElementById("custom-sa-notification"))
|
||||
document.getElementById("custom-sa-notification").addEventListener("click", function () {
|
||||
Swal.fire({
|
||||
html: '<div class="mt-3">' +
|
||||
'<div class="avatar-lg mx-auto">' +
|
||||
'<img src="../build/images/users/avatar-2.jpg" class="rounded-circle img-thumbnail" alt="thumbnail">' +
|
||||
'</div>' +
|
||||
'<div class="mt-4 pt-2 fs-15">' +
|
||||
'<h4 class="fs-18 fw-semibold">Welcome <span class="fw-semibold">Mike Mayer</span></h4>' +
|
||||
'<p class="text-muted mb-0 fs-13">You have <span class="fw-semibold text-success">2</span> Notifications</p>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
showCancelButton: false,
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-primary mb-1',
|
||||
},
|
||||
confirmButtonText: 'Show Me <i class="ri-arrow-right-line ms-1 align-bottom"></i>',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,247 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: swiper init js
|
||||
*/
|
||||
|
||||
//Default Swiper
|
||||
var swiper = new Swiper(".default-swiper", {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
});
|
||||
|
||||
//Navigation Swiper
|
||||
var swiper = new Swiper(".navigation-swiper", {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
pagination: {
|
||||
clickable: true,
|
||||
el: ".swiper-pagination",
|
||||
},
|
||||
});
|
||||
|
||||
//Pagination Dynamic Swiper
|
||||
var swiper = new Swiper(".pagination-dynamic-swiper", {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
clickable: true,
|
||||
el: ".swiper-pagination",
|
||||
dynamicBullets: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Pagination fraction Swiper
|
||||
var swiper = new Swiper(".pagination-fraction-swiper", {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
clickable: true,
|
||||
el: ".swiper-pagination",
|
||||
type: "fraction",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
|
||||
// Pagination Custom Swiper
|
||||
var swiper = new Swiper(".pagination-custom-swiper", {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
clickable: true,
|
||||
el: ".swiper-pagination",
|
||||
renderBullet: function (index, className) {
|
||||
return '<span class="' + className + '">' + (index + 1) + "</span>";
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
// Pagination Progress Swiper
|
||||
var swiper = new Swiper(".pagination-progress-swiper", {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
type: "progressbar",
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
|
||||
// Scrollbar Swiper
|
||||
var swiper = new Swiper(".pagination-scrollbar-swiper", {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
scrollbar: {
|
||||
el: ".swiper-scrollbar",
|
||||
hide: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
}
|
||||
});
|
||||
|
||||
// Vertical Swiper
|
||||
var swiper = new Swiper(".vertical-swiper", {
|
||||
loop: true,
|
||||
direction: "vertical",
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Mousewheel Control Swiper
|
||||
var swiper = new Swiper(".mousewheel-control-swiper", {
|
||||
loop: true,
|
||||
direction: "vertical",
|
||||
mousewheel: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Effect Fade Swiper
|
||||
var swiper = new Swiper(".effect-fade-swiper", {
|
||||
loop: true,
|
||||
effect: "fade",
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Effect Coverflow Swiper
|
||||
var swiper = new Swiper(".effect-coverflow-swiper", {
|
||||
loop: true,
|
||||
effect: "coverflow",
|
||||
grabCursor: true,
|
||||
centeredSlides: true,
|
||||
slidesPerView: "4",
|
||||
coverflowEffect: {
|
||||
rotate: 50,
|
||||
stretch: 0,
|
||||
depth: 100,
|
||||
modifier: 1,
|
||||
slideShadows: true,
|
||||
},
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
dynamicBullets: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Effect Flip Swiper
|
||||
var swiper = new Swiper(".effect-flip-swiper", {
|
||||
loop: true,
|
||||
effect: "flip",
|
||||
grabCursor: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Effect Creative Swiper
|
||||
var swiper = new Swiper(".effect-creative-swiper", {
|
||||
loop: true,
|
||||
grabCursor: true,
|
||||
effect: "creative",
|
||||
creativeEffect: {
|
||||
prev: {
|
||||
shadow: true,
|
||||
translate: [0, 0, -400],
|
||||
},
|
||||
next: {
|
||||
translate: ["100%", 0, 0],
|
||||
},
|
||||
},
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
// Responsive Swiper
|
||||
var swiper = new Swiper(".responsive-swiper", {
|
||||
loop: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 40,
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 50,
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,159 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: tom-select init js
|
||||
*/
|
||||
|
||||
|
||||
new TomSelect('#select-links', {
|
||||
valueField: 'id',
|
||||
searchField: 'title',
|
||||
options: [
|
||||
{ id: 1, title: 'DIY', url: 'https://diy.org' },
|
||||
{ id: 2, title: 'Google', url: 'http://google.com' },
|
||||
{ id: 3, title: 'Yahoo', url: 'http://yahoo.com' },
|
||||
],
|
||||
render: {
|
||||
option: function (data, escape) {
|
||||
return '<div>' +
|
||||
'<span class="title">' + escape(data.title) + '</span>' +
|
||||
'<span class="url">' + escape(data.url) + '</span>' +
|
||||
'</div>';
|
||||
},
|
||||
item: function (data, escape) {
|
||||
return '<div title="' + escape(data.url) + '">' + escape(data.title) + '</div>';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//Email Contacts
|
||||
|
||||
var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' +
|
||||
'(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)';
|
||||
|
||||
var formatName = function (item) {
|
||||
return ((item.first || '') + ' ' + (item.last || '')).trim();
|
||||
};
|
||||
|
||||
new TomSelect('#select-to', {
|
||||
persist: false,
|
||||
maxItems: null,
|
||||
valueField: 'email',
|
||||
labelField: 'name',
|
||||
searchField: ['first', 'last', 'email'],
|
||||
sortField: [
|
||||
{ field: 'first', direction: 'asc' },
|
||||
{ field: 'last', direction: 'asc' }
|
||||
],
|
||||
options: [
|
||||
{ email: 'nikola@tesla.com', first: 'Nikola', last: 'Tesla' },
|
||||
{ email: 'brian@thirdroute.com', first: 'Brian', last: 'Reavis' },
|
||||
{ email: 'someone@gmail.com' },
|
||||
{ email: 'example@gmail.com' },
|
||||
],
|
||||
render: {
|
||||
item: function (item, escape) {
|
||||
var name = formatName(item);
|
||||
return '<div>' +
|
||||
(name ? '<span class="name">' + escape(name) + '</span>' : '') +
|
||||
(item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
|
||||
'</div>';
|
||||
},
|
||||
option: function (item, escape) {
|
||||
var name = formatName(item);
|
||||
var label = name || item.email;
|
||||
var caption = name ? item.email : null;
|
||||
return '<div>' +
|
||||
'<span class="label">' + escape(label) + '</span>' +
|
||||
(caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
|
||||
'</div>';
|
||||
}
|
||||
},
|
||||
createFilter: function (input) {
|
||||
var regexpA = new RegExp('^' + REGEX_EMAIL + '$', 'i');
|
||||
var regexpB = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
|
||||
return regexpA.test(input) || regexpB.test(input);
|
||||
},
|
||||
create: function (input) {
|
||||
if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
|
||||
return { email: input };
|
||||
}
|
||||
var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
|
||||
if (match) {
|
||||
var name = match[1].trim();
|
||||
var pos_space = name.indexOf(' ');
|
||||
var first = name.substring(0, pos_space);
|
||||
var last = name.substring(pos_space + 1);
|
||||
|
||||
return {
|
||||
email: match[2],
|
||||
first: first,
|
||||
last: last
|
||||
};
|
||||
}
|
||||
alert('Invalid email address.');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
// Form Validation
|
||||
|
||||
// Browser Defaults
|
||||
new TomSelect('#select-person', {
|
||||
create: true,
|
||||
sortField: {
|
||||
field: 'text',
|
||||
direction: 'asc'
|
||||
}
|
||||
});
|
||||
|
||||
//bootstrap validation
|
||||
var my_select = new TomSelect('#select-bootstrap');
|
||||
|
||||
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
||||
var form = document.getElementById('bootstrap-form')
|
||||
form.addEventListener('submit', function (event) {
|
||||
|
||||
// add was-validated to display custom colors
|
||||
form.classList.add('was-validated')
|
||||
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
}, false)
|
||||
|
||||
//Pattern Attribute
|
||||
|
||||
new TomSelect('#pattern', {
|
||||
create: true,
|
||||
});
|
||||
|
||||
|
||||
//flag
|
||||
new TomSelect('.data-attr', {
|
||||
render: {
|
||||
option: function (data, escape) {
|
||||
return `<div><img class="me-2" src="${data.src}">${data.text}</div>`;
|
||||
},
|
||||
item: function (item, escape) {
|
||||
return `<div><img class="me-2" src="${item.src}">${item.text}</div>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
new TomSelect('.data-flag', {
|
||||
render: {
|
||||
option: function (data, escape) {
|
||||
return `<div><img class="me-2 avatar-xxs rounded" src="${data.src}">${data.text}</div>`;
|
||||
},
|
||||
item: function (item, escape) {
|
||||
return `<div><img class="me-2 avatar-xxs rounded" src="${item.src}">${item.text}</div>`;
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,130 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: tour init js
|
||||
*/
|
||||
|
||||
var tour = new Shepherd.Tour({
|
||||
defaultStepOptions: {
|
||||
cancelIcon: {
|
||||
enabled: true
|
||||
},
|
||||
|
||||
classes: 'shadow-md bg-purple-dark',
|
||||
scrollTo: {
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
}
|
||||
},
|
||||
useModalOverlay: {
|
||||
enabled: true
|
||||
},
|
||||
});
|
||||
|
||||
if (document.querySelector('#logo-tour'))
|
||||
tour.addStep({
|
||||
title: 'Welcome Back !',
|
||||
text: 'This is Step 1',
|
||||
attachTo: {
|
||||
element: '#logo-tour',
|
||||
on: 'bottom'
|
||||
},
|
||||
buttons: [{
|
||||
text: 'Next',
|
||||
classes: 'btn btn-success',
|
||||
action: tour.next
|
||||
}]
|
||||
});
|
||||
// end step 1
|
||||
|
||||
if (document.querySelector('#register-tour'))
|
||||
tour.addStep({
|
||||
title: 'Register your account',
|
||||
text: 'Get your Free Toner account now.',
|
||||
attachTo: {
|
||||
element: '#register-tour',
|
||||
on: 'bottom'
|
||||
},
|
||||
buttons: [{
|
||||
text: 'Back',
|
||||
classes: 'btn btn-light',
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
classes: 'btn btn-success',
|
||||
action: tour.next
|
||||
}
|
||||
]
|
||||
});
|
||||
// end step 2
|
||||
|
||||
if (document.querySelector('#login-tour'))
|
||||
tour.addStep({
|
||||
title: 'Login your account',
|
||||
text: 'Sign in to continue to Toner.',
|
||||
attachTo: {
|
||||
element: '#login-tour',
|
||||
on: 'bottom'
|
||||
},
|
||||
buttons: [{
|
||||
text: 'Back',
|
||||
classes: 'btn btn-light',
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
classes: 'btn btn-success',
|
||||
action: tour.next
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// end step 3
|
||||
if (document.querySelector('#getproduct-tour'))
|
||||
tour.addStep({
|
||||
title: 'Get yout Product',
|
||||
text: 'Sign in to continue to Toner.',
|
||||
attachTo: {
|
||||
element: '#getproduct-tour',
|
||||
on: 'bottom'
|
||||
},
|
||||
buttons: [{
|
||||
text: 'Back',
|
||||
classes: 'btn btn-light',
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
classes: 'btn btn-success',
|
||||
action: tour.next
|
||||
}
|
||||
]
|
||||
});
|
||||
// end step 4
|
||||
|
||||
if (document.querySelector('#thankyou-tour'))
|
||||
tour.addStep({
|
||||
title: 'Thank you !',
|
||||
text: 'Sign in to continue to Toner.',
|
||||
attachTo: {
|
||||
element: '#thankyou-tour',
|
||||
on: 'bottom'
|
||||
},
|
||||
buttons: [{
|
||||
text: 'Back',
|
||||
classes: 'btn btn-light',
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Thank you !',
|
||||
classes: 'btn btn-primary',
|
||||
action: tour.complete
|
||||
}
|
||||
]
|
||||
});
|
||||
// end step 5
|
||||
|
||||
tour.start();
|
||||
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Two step verification Init Js File
|
||||
*/
|
||||
|
||||
// move next
|
||||
|
||||
function getInputElement(index) {
|
||||
return document.getElementById('digit' + index + '-input');
|
||||
}
|
||||
function moveToNext(index, event) {
|
||||
const eventCode = event.which || event.keyCode;
|
||||
if (getInputElement(index).value.length === 1) {
|
||||
if (index !== 4) {
|
||||
getInputElement(index + 1).focus();
|
||||
} else {
|
||||
getInputElement(index).blur();
|
||||
// Submit code
|
||||
console.log('submit code');
|
||||
}
|
||||
}
|
||||
if (eventCode === 8 && index !== 1) {
|
||||
getInputElement(index - 1).focus();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,302 @@
|
||||
/*
|
||||
Template Name: Toner eCommerce + Admin HTML Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Vector Maps init Js File
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('data-colors Attribute not found on:', chartId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// world map with line & markers
|
||||
var vectorMapWorldLineColors = getChartColorsArray("world-map-line-markers");
|
||||
if (vectorMapWorldLineColors)
|
||||
var worldlinemap = new jsVectorMap({
|
||||
map: "world_merc",
|
||||
selector: "#world-map-line-markers",
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
markers: [{
|
||||
name: "Greenland",
|
||||
coords: [72, -42]
|
||||
},
|
||||
{
|
||||
name: "Canada",
|
||||
coords: [56.1304, -106.3468]
|
||||
},
|
||||
{
|
||||
name: "Brazil",
|
||||
coords: [-14.2350, -51.9253]
|
||||
},
|
||||
{
|
||||
name: "Egypt",
|
||||
coords: [26.8206, 30.8025]
|
||||
},
|
||||
{
|
||||
name: "Russia",
|
||||
coords: [61, 105]
|
||||
},
|
||||
{
|
||||
name: "China",
|
||||
coords: [35.8617, 104.1954]
|
||||
},
|
||||
{
|
||||
name: "United States",
|
||||
coords: [37.0902, -95.7129]
|
||||
},
|
||||
{
|
||||
name: "Norway",
|
||||
coords: [60.472024, 8.468946]
|
||||
},
|
||||
{
|
||||
name: "Ukraine",
|
||||
coords: [48.379433, 31.16558]
|
||||
},
|
||||
],
|
||||
lines: [{
|
||||
from: "Canada",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "Russia",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "Greenland",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "Brazil",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "United States",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "China",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "Norway",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "Ukraine",
|
||||
to: "Egypt"
|
||||
},
|
||||
],
|
||||
regionStyle: {
|
||||
initial: {
|
||||
stroke: "#9599ad",
|
||||
strokeWidth: 0.25,
|
||||
fill: vectorMapWorldLineColors,
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
animation: true,
|
||||
strokeDasharray: "6 3 6",
|
||||
},
|
||||
});
|
||||
|
||||
// world map with markers
|
||||
var vectorMapWorldMarkersColors = getChartColorsArray("world-map-line-markers");
|
||||
if (vectorMapWorldMarkersColors)
|
||||
var worldemapmarkers = new jsVectorMap({
|
||||
map: 'world_merc',
|
||||
selector: '#world-map-markers',
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
selectedMarkers: [0, 2],
|
||||
regionStyle: {
|
||||
initial: {
|
||||
stroke: "#9599ad",
|
||||
strokeWidth: 0.25,
|
||||
fill: vectorMapWorldMarkersColors,
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
markersSelectable: true,
|
||||
markers: [{
|
||||
name: "Palestine",
|
||||
coords: [31.9474, 35.2272]
|
||||
},
|
||||
{
|
||||
name: "Russia",
|
||||
coords: [61.524, 105.3188]
|
||||
},
|
||||
{
|
||||
name: "Canada",
|
||||
coords: [56.1304, -106.3468]
|
||||
},
|
||||
{
|
||||
name: "Greenland",
|
||||
coords: [71.7069, -42.6043]
|
||||
},
|
||||
],
|
||||
markerStyle: {
|
||||
initial: {
|
||||
fill: "#038edc"
|
||||
},
|
||||
selected: {
|
||||
fill: "red"
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
markers: {
|
||||
render: function (marker) {
|
||||
return marker.name
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// world map with image markers
|
||||
var vectorMapWorldMarkersImageColors = getChartColorsArray("world-map-markers-image");
|
||||
if (vectorMapWorldMarkersImageColors)
|
||||
var worldemapmarkersimage = new jsVectorMap({
|
||||
map: 'world_merc',
|
||||
selector: '#world-map-markers-image',
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
regionStyle: {
|
||||
initial: {
|
||||
stroke: "#9599ad",
|
||||
strokeWidth: 0.25,
|
||||
fill: vectorMapWorldMarkersImageColors,
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
selectedMarkers: [0, 2],
|
||||
markersSelectable: true,
|
||||
markers: [{
|
||||
name: "Palestine",
|
||||
coords: [31.9474, 35.2272]
|
||||
},
|
||||
{
|
||||
name: "Russia",
|
||||
coords: [61.524, 105.3188]
|
||||
},
|
||||
{
|
||||
name: "Canada",
|
||||
coords: [56.1304, -106.3468]
|
||||
},
|
||||
{
|
||||
name: "Greenland",
|
||||
coords: [71.7069, -42.6043]
|
||||
},
|
||||
],
|
||||
markerStyle: {
|
||||
initial: {
|
||||
image: "../build/images/logo-sm.png"
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
markers: {
|
||||
render: function (marker) {
|
||||
return marker.name
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// US Map
|
||||
var vectorMapUsaColors = getChartColorsArray("usa-vectormap");
|
||||
if (vectorMapUsaColors)
|
||||
var usmap = new jsVectorMap({
|
||||
map: 'us_merc_en',
|
||||
selector: "#usa-vectormap",
|
||||
regionStyle: {
|
||||
initial: {
|
||||
stroke: "#9599ad",
|
||||
strokeWidth: 0.25,
|
||||
fill: vectorMapUsaColors,
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
});
|
||||
|
||||
|
||||
// canada Map
|
||||
var vectorMapCanadaColors = getChartColorsArray("canada-vectormap");
|
||||
if (vectorMapCanadaColors)
|
||||
var canadamap = new jsVectorMap({
|
||||
map: 'canada',
|
||||
selector: "#canada-vectormap",
|
||||
regionStyle: {
|
||||
initial: {
|
||||
stroke: "#9599ad",
|
||||
strokeWidth: 0.25,
|
||||
fill: vectorMapCanadaColors,
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
});
|
||||
|
||||
// russia Map
|
||||
var vectorMapRussiaColors = getChartColorsArray("russia-vectormap");
|
||||
if (vectorMapRussiaColors)
|
||||
var russiamap = new jsVectorMap({
|
||||
map: 'russia',
|
||||
selector: "#russia-vectormap",
|
||||
regionStyle: {
|
||||
initial: {
|
||||
stroke: "#9599ad",
|
||||
strokeWidth: 0.25,
|
||||
fill: vectorMapRussiaColors,
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
})
|
||||
|
||||
// spain Map
|
||||
var vectorMapSpainColors = getChartColorsArray("spain-vectormap");
|
||||
if (vectorMapSpainColors)
|
||||
var spainmap = new jsVectorMap({
|
||||
map: 'spain',
|
||||
selector: "#spain-vectormap",
|
||||
regionStyle: {
|
||||
initial: {
|
||||
stroke: "#9599ad",
|
||||
strokeWidth: 0.25,
|
||||
fill: vectorMapSpainColors,
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
})
|
||||
Reference in New Issue
Block a user