673 lines
13 KiB
JavaScript
673 lines
13 KiB
JavaScript
// **------radialBar 1**
|
|
|
|
const radialBar1Options = {
|
|
series: [70],
|
|
chart: {
|
|
fontFamily: "Rubik, serif" ,
|
|
height: 350,
|
|
type: 'radialBar',
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
size: '70%',
|
|
}
|
|
},
|
|
},
|
|
labels: ['Cricket'],
|
|
colors: [getLocalStorageItem('color-primary','#0F626A')],
|
|
responsive: [{
|
|
breakpoint: 567,
|
|
options: {
|
|
chart: {
|
|
height:250,
|
|
},
|
|
}
|
|
}]
|
|
};
|
|
|
|
const radialBar1chart = new ApexCharts(document.querySelector("#radial-bar1"), radialBar1Options);
|
|
radialBar1chart.render();
|
|
|
|
// **------radialBar 2**
|
|
|
|
|
|
const radialBar2Options = {
|
|
series: [44, 55, 67, 83],
|
|
chart: {
|
|
fontFamily: "Rubik, serif" ,
|
|
height: 350,
|
|
type: 'radialBar',
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
dataLabels: {
|
|
name: {
|
|
fontSize: '22px',
|
|
},
|
|
value: {
|
|
fontSize: '16px',
|
|
},
|
|
|
|
total: {
|
|
show: true,
|
|
label: 'Total',
|
|
formatter: () => 249
|
|
}
|
|
}
|
|
}
|
|
},
|
|
labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
|
|
responsive: [{
|
|
breakpoint: 567,
|
|
options: {
|
|
chart: {
|
|
height:250,
|
|
},
|
|
}
|
|
}],
|
|
colors: [hexToRGB(getLocalStorageItem('color-primary', '#0F626A'), 1)],
|
|
};
|
|
|
|
const radialBar2Chart = new ApexCharts(document.querySelector("#radial-bar2"), radialBar2Options);
|
|
radialBar2Chart.render();
|
|
|
|
|
|
// **------radialBar 3**
|
|
const radialBar3Options = {
|
|
series: [76, 67, 61, 90],
|
|
chart: {
|
|
fontFamily: "Rubik, serif" ,
|
|
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: [getLocalStorageItem('color-primary','#0F626A'), '#0AB964',getLocalStorageItem('color-secondary','#626262'), '#E14E5A'],
|
|
labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
|
|
legend: {
|
|
show: true,
|
|
floating: true,
|
|
fontSize: '16px',
|
|
position: 'left',
|
|
offsetX: 20,
|
|
offsetY: 20,
|
|
labels: {
|
|
useSeriesColors: true,
|
|
},
|
|
markers: {
|
|
size: 0
|
|
},
|
|
formatter: function(seriesName, opts) {
|
|
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
|
|
},
|
|
itemMargin: {
|
|
vertical: 3
|
|
}
|
|
},
|
|
responsive: [
|
|
{
|
|
breakpoint: 1550,
|
|
options: {
|
|
legend: {
|
|
offsetX: -5,
|
|
offsetY: 15,
|
|
}
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 567,
|
|
options: {
|
|
chart: {
|
|
height:250,
|
|
},
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 480,
|
|
options: {
|
|
legend: {
|
|
fontSize: '15px',
|
|
offsetX: -30,
|
|
offsetY: -10,
|
|
}
|
|
}
|
|
}]
|
|
|
|
};
|
|
|
|
const radialBar3Chart = new ApexCharts(document.querySelector("#radial-bar3"), radialBar3Options);
|
|
radialBar3Chart.render();
|
|
|
|
|
|
|
|
// **------radialBar 5**
|
|
|
|
|
|
const radialBar5Options = {
|
|
series: [67],
|
|
chart: {
|
|
fontFamily: "Rubik, serif" ,
|
|
height: 350,
|
|
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: {
|
|
colors: ['#282632'],
|
|
},
|
|
stroke: {
|
|
dashArray: 4
|
|
},
|
|
labels: ['Median Ratio'],
|
|
};
|
|
|
|
const radialBar5Chart = new ApexCharts(document.querySelector("#radial-bar5"), radialBar5Options);
|
|
radialBar5Chart.render();
|
|
|
|
// **------radialBar 6**
|
|
|
|
|
|
const radialBar6Options = {
|
|
series: [76],
|
|
chart: {
|
|
height: 410,
|
|
type: 'radialBar',
|
|
offsetY: -20,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
startAngle: -90,
|
|
endAngle: 90,
|
|
track: {
|
|
background: "#e7e7e7",
|
|
strokeWidth: '97%',
|
|
margin: 5, // margin is in pixels
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
show: false
|
|
},
|
|
value: {
|
|
offsetY: -2,
|
|
fontSize: '22px'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
padding: {
|
|
top: -10
|
|
}
|
|
},
|
|
fill: {
|
|
// type: 'gradient',
|
|
colors: [getLocalStorageItem('color-primary','#106068')],
|
|
},
|
|
labels: ['Average Results'],
|
|
responsive: [{
|
|
breakpoint: 1366,
|
|
options: {
|
|
chart: {
|
|
height:500,
|
|
},
|
|
}
|
|
},{
|
|
breakpoint: 567,
|
|
options: {
|
|
chart: {
|
|
height:250,
|
|
},
|
|
}
|
|
}]
|
|
};
|
|
|
|
const radialBar6Chart = new ApexCharts(document.querySelector("#radial-bar6"), radialBar6Options);
|
|
radialBar6Chart.render();
|
|
|
|
// **------ radialBar 7**
|
|
|
|
|
|
const radialBar7Options = {
|
|
series: [67],
|
|
chart: {
|
|
height: 350,
|
|
type: 'radialBar',
|
|
},
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 15,
|
|
size: '70%',
|
|
image: '../../assets/images/icons/radial-bar-icon/icon-5.png',
|
|
imageWidth: 64,
|
|
imageHeight: 64,
|
|
imageClipped: false
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
show: false,
|
|
|
|
},
|
|
value: {
|
|
show: true,
|
|
color: '#333',
|
|
offsetY: 70,
|
|
fontSize: '22px'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'image',
|
|
image: {
|
|
src: ['../../assets/images/slick/11.jpg'],
|
|
}
|
|
},
|
|
stroke: {
|
|
lineCap: 'round'
|
|
},
|
|
labels: ['Volatility'],
|
|
responsive: [{
|
|
breakpoint: 567,
|
|
options: {
|
|
chart: {
|
|
height:250,
|
|
},
|
|
}
|
|
}]
|
|
};
|
|
|
|
const radialBar7Chart = new ApexCharts(document.querySelector("#radial-bar7"), radialBar7Options);
|
|
radialBar7Chart.render();
|
|
|
|
|
|
|
|
// **------radial-progress 18**
|
|
const radialBar8Options = {
|
|
chart: {
|
|
height: 150,
|
|
width: 110,
|
|
type: "radialBar"
|
|
},
|
|
|
|
series: [5],
|
|
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 15,
|
|
size: "70%",
|
|
image: '../../assets/images/icons/radial-bar-icon/icon-4.png',
|
|
imageWidth: 80,
|
|
imageHeight: 80,
|
|
imageClipped: false
|
|
},
|
|
|
|
dataLabels: {
|
|
showOn: "always",
|
|
name: {
|
|
offsetY: -10,
|
|
show: false,
|
|
fontSize: "15px",
|
|
},
|
|
style: {
|
|
fontSize: '14px',
|
|
},
|
|
value: {
|
|
fontSize: "30px",
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
stroke: {
|
|
lineCap: "round",
|
|
},
|
|
colors: [hexToRGB(getLocalStorageItem('color-primary','#0F626A'),1)],
|
|
labels: ["Primary"]
|
|
};
|
|
|
|
const radialBar8Chart = new ApexCharts(document.querySelector("#radial-progress18"), radialBar8Options);
|
|
|
|
radialBar8Chart.render();
|
|
|
|
|
|
// **------ radial-progress 19**
|
|
|
|
const radialBar19Options = {
|
|
chart: {
|
|
height: 172,
|
|
width: 200,
|
|
type: "radialBar"
|
|
},
|
|
|
|
series: [25],
|
|
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 15,
|
|
size: "70%",
|
|
image: '../../assets/images/icons/radial-bar-icon/icon-2.png',
|
|
imageWidth: 90,
|
|
imageHeight: 90,
|
|
imageClipped: false
|
|
},
|
|
|
|
dataLabels: {
|
|
showOn: "always",
|
|
name: {
|
|
offsetY: -10,
|
|
show: false,
|
|
color: hexToRGB(getLocalStorageItem('color-secondary','#8B8476'),1),
|
|
fontSize: "13px"
|
|
},
|
|
value: {
|
|
color: hexToRGB(getLocalStorageItem('color-secondary','#8B8476'),1),
|
|
fontSize: "30px",
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
stroke: {
|
|
lineCap: "round",
|
|
},
|
|
colors: [hexToRGB(getLocalStorageItem('color-secondary','#8B8476'),1)],
|
|
labels: ["Secondary"]
|
|
};
|
|
|
|
const radialBar19Chart = new ApexCharts(document.querySelector("#radial-progress19"), radialBar19Options);
|
|
|
|
radialBar19Chart.render();
|
|
// **------radial-progress 20**
|
|
|
|
const radialBar20Options = {
|
|
chart: {
|
|
height: 190,
|
|
width: 200,
|
|
type: "radialBar"
|
|
},
|
|
|
|
series: [57],
|
|
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 15,
|
|
size: "70%",
|
|
image: '../../assets/images/icons/radial-bar-icon/icon-3.png',
|
|
imageWidth: 90,
|
|
imageHeight: 90,
|
|
imageClipped: false
|
|
},
|
|
|
|
dataLabels: {
|
|
showOn: "always",
|
|
name: {
|
|
offsetY: -10,
|
|
show: false,
|
|
color: "rgba(var(--success),1)",
|
|
fontSize: "13px"
|
|
},
|
|
value: {
|
|
color: "rgba(var(--success),1)",
|
|
fontSize: "30px",
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
stroke: {
|
|
lineCap: "round",
|
|
},
|
|
colors: ['rgba(var(--success),1)'],
|
|
labels: ["Success"]
|
|
};
|
|
|
|
const radialBar20Chart = new ApexCharts(document.querySelector("#radial-progress20"), radialBar20Options);
|
|
|
|
radialBar20Chart.render();
|
|
// **------radial-progress 21**
|
|
|
|
const radialBar21Options = {
|
|
chart: {
|
|
height: 210,
|
|
width: 200,
|
|
type: "radialBar"
|
|
},
|
|
|
|
series: [78],
|
|
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 15,
|
|
size: "65%",
|
|
image: '../../assets/images/icons/radial-bar-icon/icon-4.png',
|
|
imageWidth: 110,
|
|
imageHeight: 110,
|
|
imageClipped: false
|
|
},
|
|
|
|
dataLabels: {
|
|
showOn: "always",
|
|
name: {
|
|
offsetY: -10,
|
|
show: false,
|
|
color: "rgba(var(--danger),1)",
|
|
fontSize: "13px"
|
|
},
|
|
value: {
|
|
color: "rgba(var(--danger),1)",
|
|
fontSize: "30px",
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
stroke: {
|
|
lineCap: "round",
|
|
},
|
|
colors: ['rgba(var(--danger),1)'],
|
|
labels: ["Danger"]
|
|
};
|
|
|
|
const radialBar21Chart = new ApexCharts(document.querySelector("#radial-progress21"), radialBar21Options);
|
|
|
|
radialBar21Chart.render();
|
|
// **------radial-progress 22**
|
|
const radialBar22Options = {
|
|
chart: {
|
|
height: 230,
|
|
width: 200,
|
|
type: "radialBar"
|
|
},
|
|
|
|
series: [88],
|
|
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 15,
|
|
size: "60%",
|
|
image: '../../assets/images/icons/radial-bar-icon/icon-5.png',
|
|
imageWidth: 110,
|
|
imageHeight: 110,
|
|
imageClipped: false
|
|
},
|
|
|
|
dataLabels: {
|
|
showOn: "always",
|
|
name: {
|
|
offsetY: -10,
|
|
show: false,
|
|
color: "rgba(var(--warning),1)",
|
|
fontSize: "13px"
|
|
},
|
|
value: {
|
|
color: "rgba(var(--warning),1)",
|
|
fontSize: "30px",
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
stroke: {
|
|
lineCap: "round",
|
|
},
|
|
colors: ['rgba(var(--warning),1)'],
|
|
labels: ["Warning"]
|
|
};
|
|
|
|
const radialBar22Chart = new ApexCharts(document.querySelector("#radial-progress22"), radialBar22Options);
|
|
|
|
radialBar22Chart.render();
|
|
|
|
|
|
const radialBar23Options = {
|
|
chart: {
|
|
height: 250,
|
|
width: 200,
|
|
type: "radialBar"
|
|
},
|
|
|
|
series: [95],
|
|
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 15,
|
|
size: "55%",
|
|
image: '../../assets/images/icons/radial-bar-icon/icon-6.png',
|
|
imageWidth: 110,
|
|
imageHeight: 110,
|
|
imageClipped: false
|
|
},
|
|
|
|
dataLabels: {
|
|
showOn: "always",
|
|
name: {
|
|
offsetY: -10,
|
|
show: false,
|
|
color: "rgba(var(--info),1)",
|
|
fontSize: "13px"
|
|
},
|
|
value: {
|
|
color: "rgba(var(--info),1)",
|
|
fontSize: "30px",
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
stroke: {
|
|
lineCap: "round",
|
|
},
|
|
colors: ['rgba(var(--info),1)'],
|
|
labels: ["Info"]
|
|
};
|
|
|
|
const radialBar23Chart = new ApexCharts(document.querySelector("#radial-progress23"), radialBar23Options);
|
|
|
|
radialBar23Chart.render();
|
|
|
|
|
|
const radialBar24Option = {
|
|
chart: {
|
|
height: 280,
|
|
width: 200,
|
|
type: "radialBar"
|
|
},
|
|
|
|
series: [100],
|
|
|
|
plotOptions: {
|
|
radialBar: {
|
|
hollow: {
|
|
margin: 15,
|
|
size: "55%",
|
|
image: '../../assets/images/icons/radial-bar-icon/icon-8.png',
|
|
imageWidth: 120,
|
|
imageHeight: 120,
|
|
imageClipped: false
|
|
},
|
|
|
|
dataLabels: {
|
|
showOn: "always",
|
|
name: {
|
|
offsetY: -10,
|
|
show: false,
|
|
color: "rgba(var(--dark),1)",
|
|
fontSize: "13px"
|
|
},
|
|
value: {
|
|
color: "rgba(var(--dark),1)",
|
|
fontSize: "30px",
|
|
show: false
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
stroke: {
|
|
lineCap: "round",
|
|
},
|
|
colors: ['rgba(var(--dark),1)'],
|
|
labels: ["dark"]
|
|
};
|
|
|
|
const radialBar24Chart = new ApexCharts(document.querySelector("#radial-progress24"), radialBar24Option);
|
|
|
|
radialBar24Chart.render();
|
|
|