senlinai/cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deving

Browse Source
This commit is contained in:
yanweidonog
2025-12-26 22:35:18 +08:00
commit 9cf62f793b
4263 changed files with 728989 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

725
res/assets/js/apex-chart/apex.area.init.js Normal file
View File

@@ -0,0 +1,725 @@
document.addEventListener("DOMContentLoaded", function () {
// Basic Area Chart -------> AREA CHART
var options_area = {
series: [
{
name: "STOCK ABC",
data: [
[1327359600000, 30.95],
[1327446000000, 31.34],
[1327532400000, 31.18],
[1327618800000, 31.05],
[1327878000000, 31.0],
[1327964400000, 30.95],
[1328050800000, 31.24],
[1328137200000, 31.29],
[1328223600000, 31.85],
[1328482800000, 31.86],
[1328569200000, 32.28],
[1328655600000, 32.1],
[1328742000000, 32.65],
[1328828400000, 32.21],
[1329087600000, 32.35],
[1329174000000, 32.44],
[1329260400000, 32.46],
[1329346800000, 32.86],
[1329433200000, 32.75],
[1329778800000, 32.54],
[1329865200000, 32.33],
[1329951600000, 32.97],
[1330038000000, 33.41],
[1330297200000, 33.27],
[1330383600000, 33.27],
[1330470000000, 32.89],
[1330556400000, 33.1],
[1330642800000, 33.73],
[1330902000000, 33.22],
[1330988400000, 31.99],
[1331074800000, 32.41],
[1331161200000, 33.05],
[1331247600000, 33.64],
[1331506800000, 33.56],
[1331593200000, 34.22],
[1331679600000, 33.77],
[1331766000000, 34.17],
[1331852400000, 33.82],
[1332111600000, 34.51],
[1332198000000, 33.16],
[1332284400000, 33.56],
[1332370800000, 33.71],
[1332457200000, 33.81],
[1332712800000, 34.4],
[1332799200000, 34.63],
[1332885600000, 34.46],
[1332972000000, 34.48],
[1333058400000, 34.31],
[1333317600000, 34.7],
[1333404000000, 34.31],
[1333490400000, 33.46],
[1333576800000, 33.59],
[1333922400000, 33.22],
[1334008800000, 32.61],
[1334095200000, 33.01],
[1334181600000, 33.55],
[1334268000000, 33.18],
[1334527200000, 32.84],
[1334613600000, 33.84],
[1334700000000, 33.39],
[1334786400000, 32.91],
[1334872800000, 33.06],
[1335132000000, 32.62],
[1335218400000, 32.4],
[1335304800000, 33.13],
[1335391200000, 33.26],
[1335477600000, 33.58],
[1335736800000, 33.55],
[1335823200000, 33.77],
[1335909600000, 33.76],
[1335996000000, 33.32],
[1336082400000, 32.61],
[1336341600000, 32.52],
[1336428000000, 32.67],
[1336514400000, 32.52],
[1336600800000, 31.92],
[1336687200000, 32.2],
[1336946400000, 32.23],
[1337032800000, 32.33],
[1337119200000, 32.36],
[1337205600000, 32.01],
[1337292000000, 31.31],
[1337551200000, 32.01],
[1337637600000, 32.01],
[1337724000000, 32.18],
[1337810400000, 31.54],
[1337896800000, 31.6],
[1338242400000, 32.05],
[1338328800000, 31.29],
[1338415200000, 31.05],
[1338501600000, 29.82],
[1338760800000, 30.31],
[1338847200000, 30.7],
[1338933600000, 31.69],
[1339020000000, 31.32],
[1339106400000, 31.65],
[1339365600000, 31.13],
[1339452000000, 31.77],
[1339538400000, 31.79],
[1339624800000, 31.67],
[1339711200000, 32.39],
[1339970400000, 32.63],
[1340056800000, 32.89],
[1340143200000, 31.99],
[1340229600000, 31.23],
[1340316000000, 31.57],
[1340575200000, 30.84],
[1340661600000, 31.07],
[1340748000000, 31.41],
[1340834400000, 31.17],
[1340920800000, 32.37],
[1341180000000, 32.19],
[1341266400000, 32.51],
[1341439200000, 32.53],
[1341525600000, 31.37],
[1341784800000, 30.43],
[1341871200000, 30.44],
[1341957600000, 30.2],
[1342044000000, 30.14],
[1342130400000, 30.65],
[1342389600000, 30.4],
[1342476000000, 30.65],
[1342562400000, 31.43],
[1342648800000, 31.89],
[1342735200000, 31.38],
[1342994400000, 30.64],
[1343080800000, 30.02],
[1343167200000, 30.33],
[1343253600000, 30.95],
[1343340000000, 31.89],
[1343599200000, 31.01],
[1343685600000, 30.88],
[1343772000000, 30.69],
[1343858400000, 30.58],
[1343944800000, 32.02],
[1344204000000, 32.14],
[1344290400000, 32.37],
[1344376800000, 32.51],
[1344463200000, 32.65],
[1344549600000, 32.64],
[1344808800000, 32.27],
[1344895200000, 32.1],
[1344981600000, 32.91],
[1345068000000, 33.65],
[1345154400000, 33.8],
[1345413600000, 33.92],
[1345500000000, 33.75],
[1345586400000, 33.84],
[1345672800000, 33.5],
[1345759200000, 32.26],
[1346018400000, 32.32],
[1346104800000, 32.06],
],
},
],
chart: {
fontFamily: "inherit",
type: "area",
height: 350,
zoom: {
enabled: false,
},
toolbar: {
show: false,
},
},
grid: {
show: false,
},
colors: ["#615dff"],
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
xaxis: {
type: "datetime",
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
yaxis: {
opposite: true,
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
theme: "dark",
},
legend: {
horizontalAlign: "left",
},
};
var chart_area_basic = new ApexCharts(
document.querySelector("#chart-area-basic"),
options_area
);
chart_area_basic.render();
// Spline Area Chart -------> AREA CHART
var options_spline = {
series: [
{
name: "series1",
data: [31, 40, 28, 51, 42, 109, 100],
},
{
name: "series2",
data: [11, 32, 45, 32, 34, 52, 41],
},
],
chart: {
fontFamily: "inherit",
height: 350,
type: "area",
toolbar: {
show: false,
},
},
grid: {
show: false,
},
colors: ["#615dff", "#3dd9eb"],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"2018-09-19T00:00:00.000Z",
"2018-09-19T01:30:00.000Z",
"2018-09-19T02:30:00.000Z",
"2018-09-19T03:30:00.000Z",
"2018-09-19T04:30:00.000Z",
"2018-09-19T05:30:00.000Z",
"2018-09-19T06:30:00.000Z",
],
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
yaxis: {
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
theme: "dark",
},
legend: {
labels: {
colors: ["#a1aab2"],
},
},
};
var chart_area_spline = new ApexCharts(
document.querySelector("#chart-area-spline"),
options_spline
);
chart_area_spline.render();
// Real Time Area Chart -------> AREA CHART
var options = {
series: [
{
data: [
[1327359600000, 30.95],
[1327446000000, 31.34],
[1327532400000, 31.18],
[1327618800000, 31.05],
[1327878000000, 31.0],
[1327964400000, 30.95],
[1328050800000, 31.24],
[1328137200000, 31.29],
[1328223600000, 31.85],
[1328482800000, 31.86],
[1328569200000, 32.28],
[1328655600000, 32.1],
[1328742000000, 32.65],
[1328828400000, 32.21],
[1329087600000, 32.35],
[1329174000000, 32.44],
[1329260400000, 32.46],
[1329346800000, 32.86],
[1329433200000, 32.75],
[1329778800000, 32.54],
[1329865200000, 32.33],
[1329951600000, 32.97],
[1330038000000, 33.41],
[1330297200000, 33.27],
[1330383600000, 33.27],
[1330470000000, 32.89],
[1330556400000, 33.1],
[1330642800000, 33.73],
[1330902000000, 33.22],
[1330988400000, 31.99],
[1331074800000, 32.41],
[1331161200000, 33.05],
[1331247600000, 33.64],
[1331506800000, 33.56],
[1331593200000, 34.22],
[1331679600000, 33.77],
[1331766000000, 34.17],
[1331852400000, 33.82],
[1332111600000, 34.51],
[1332198000000, 33.16],
[1332284400000, 33.56],
[1332370800000, 33.71],
[1332457200000, 33.81],
[1332712800000, 34.4],
[1332799200000, 34.63],
[1332885600000, 34.46],
[1332972000000, 34.48],
[1333058400000, 34.31],
[1333317600000, 34.7],
[1333404000000, 34.31],
[1333490400000, 33.46],
[1333576800000, 33.59],
[1333922400000, 33.22],
[1334008800000, 32.61],
[1334095200000, 33.01],
[1334181600000, 33.55],
[1334268000000, 33.18],
[1334527200000, 32.84],
[1334613600000, 33.84],
[1334700000000, 33.39],
[1334786400000, 32.91],
[1334872800000, 33.06],
[1335132000000, 32.62],
[1335218400000, 32.4],
[1335304800000, 33.13],
[1335391200000, 33.26],
[1335477600000, 33.58],
[1335736800000, 33.55],
[1335823200000, 33.77],
[1335909600000, 33.76],
[1335996000000, 33.32],
[1336082400000, 32.61],
[1336341600000, 32.52],
[1336428000000, 32.67],
[1336514400000, 32.52],
[1336600800000, 31.92],
[1336687200000, 32.2],
[1336946400000, 32.23],
[1337032800000, 32.33],
[1337119200000, 32.36],
[1337205600000, 32.01],
[1337292000000, 31.31],
[1337551200000, 32.01],
[1337637600000, 32.01],
[1337724000000, 32.18],
[1337810400000, 31.54],
[1337896800000, 31.6],
[1338242400000, 32.05],
[1338328800000, 31.29],
[1338415200000, 31.05],
[1338501600000, 29.82],
[1338760800000, 30.31],
[1338847200000, 30.7],
[1338933600000, 31.69],
[1339020000000, 31.32],
[1339106400000, 31.65],
[1339365600000, 31.13],
[1339452000000, 31.77],
[1339538400000, 31.79],
[1339624800000, 31.67],
[1339711200000, 32.39],
[1339970400000, 32.63],
[1340056800000, 32.89],
[1340143200000, 31.99],
[1340229600000, 31.23],
[1340316000000, 31.57],
[1340575200000, 30.84],
[1340661600000, 31.07],
[1340748000000, 31.41],
[1340834400000, 31.17],
[1340920800000, 32.37],
[1341180000000, 32.19],
[1341266400000, 32.51],
[1341439200000, 32.53],
[1341525600000, 31.37],
[1341784800000, 30.43],
[1341871200000, 30.44],
[1341957600000, 30.2],
[1342044000000, 30.14],
[1342130400000, 30.65],
[1342389600000, 30.4],
[1342476000000, 30.65],
[1342562400000, 31.43],
[1342648800000, 31.89],
[1342735200000, 31.38],
[1342994400000, 30.64],
[1343080800000, 30.02],
[1343167200000, 30.33],
[1343253600000, 30.95],
[1343340000000, 31.89],
[1343599200000, 31.01],
[1343685600000, 30.88],
[1343772000000, 30.69],
[1343858400000, 30.58],
[1343944800000, 32.02],
[1344204000000, 32.14],
[1344290400000, 32.37],
[1344376800000, 32.51],
[1344463200000, 32.65],
[1344549600000, 32.64],
[1344808800000, 32.27],
[1344895200000, 32.1],
[1344981600000, 32.91],
[1345068000000, 33.65],
[1345154400000, 33.8],
[1345413600000, 33.92],
[1345500000000, 33.75],
[1345586400000, 33.84],
[1345672800000, 33.5],
[1345759200000, 32.26],
[1346018400000, 32.32],
[1346104800000, 32.06],
[1346191200000, 31.96],
[1346277600000, 31.46],
[1346364000000, 31.27],
[1346709600000, 31.43],
[1346796000000, 32.26],
[1346882400000, 32.79],
[1346968800000, 32.46],
[1347228000000, 32.13],
[1347314400000, 32.43],
[1347400800000, 32.42],
[1347487200000, 32.81],
[1347573600000, 33.34],
[1347832800000, 33.41],
[1347919200000, 32.57],
[1348005600000, 33.12],
[1348092000000, 34.53],
[1348178400000, 33.83],
[1348437600000, 33.41],
[1348524000000, 32.9],
[1348610400000, 32.53],
[1348696800000, 32.8],
[1348783200000, 32.44],
[1349042400000, 32.62],
[1349128800000, 32.57],
[1349215200000, 32.6],
[1349301600000, 32.68],
[1349388000000, 32.47],
[1349647200000, 32.23],
[1349733600000, 31.68],
[1349820000000, 31.51],
[1349906400000, 31.78],
[1349992800000, 31.94],
[1350252000000, 32.33],
[1350338400000, 33.24],
[1350424800000, 33.44],
[1350511200000, 33.48],
[1350597600000, 33.24],
[1350856800000, 33.49],
[1350943200000, 33.31],
[1351029600000, 33.36],
[1351116000000, 33.4],
[1351202400000, 34.01],
[1351638000000, 34.02],
[1351724400000, 34.36],
[1351810800000, 34.39],
[1352070000000, 34.24],
[1352156400000, 34.39],
[1352242800000, 33.47],
[1352329200000, 32.98],
[1352415600000, 32.9],
[1352674800000, 32.7],
[1352761200000, 32.54],
[1352847600000, 32.23],
[1352934000000, 32.64],
[1353020400000, 32.65],
[1353279600000, 32.92],
[1353366000000, 32.64],
[1353452400000, 32.84],
[1353625200000, 33.4],
[1353884400000, 33.3],
[1353970800000, 33.18],
[1354057200000, 33.88],
[1354143600000, 34.09],
[1354230000000, 34.61],
[1354489200000, 34.7],
[1354575600000, 35.3],
[1354662000000, 35.4],
[1354748400000, 35.14],
[1354834800000, 35.48],
[1355094000000, 35.75],
[1355180400000, 35.54],
[1355266800000, 35.96],
[1355353200000, 35.53],
[1355439600000, 37.56],
[1355698800000, 37.42],
[1355785200000, 37.49],
[1355871600000, 38.09],
[1355958000000, 37.87],
[1356044400000, 37.71],
[1356303600000, 37.53],
[1356476400000, 37.55],
[1356562800000, 37.3],
[1356649200000, 36.9],
[1356908400000, 37.68],
[1357081200000, 38.34],
[1357167600000, 37.75],
[1357254000000, 38.13],
[1357513200000, 37.94],
[1357599600000, 38.14],
[1357686000000, 38.66],
[1357772400000, 38.62],
[1357858800000, 38.09],
[1358118000000, 38.16],
[1358204400000, 38.15],
[1358290800000, 37.88],
[1358377200000, 37.73],
[1358463600000, 37.98],
[1358809200000, 37.95],
[1358895600000, 38.25],
[1358982000000, 38.1],
[1359068400000, 38.32],
[1359327600000, 38.24],
[1359414000000, 38.52],
[1359500400000, 37.94],
[1359586800000, 37.83],
[1359673200000, 38.34],
[1359932400000, 38.1],
[1360018800000, 38.51],
[1360105200000, 38.4],
[1360191600000, 38.07],
[1360278000000, 39.12],
[1360537200000, 38.64],
[1360623600000, 38.89],
[1360710000000, 38.81],
[1360796400000, 38.61],
[1360882800000, 38.63],
[1361228400000, 38.99],
[1361314800000, 38.77],
[1361401200000, 38.34],
[1361487600000, 38.55],
[1361746800000, 38.11],
[1361833200000, 38.59],
[1361919600000, 39.6],
],
},
],
chart: {
id: "area-datetime",
fontFamily: "inherit",
type: "area",
height: 350,
zoom: {
autoScaleYaxis: true,
},
toolbar: {
show: false,
},
},
grid: {
show: false,
},
colors: ["#615dff"],
annotations: {
yaxis: [
{
y: 30,
borderColor: "#999",
label: {
show: true,
text: "Support",
style: {
color: "#fff",
background: "#39b69a",
},
},
},
],
xaxis: [
{
x: new Date("14 Nov 2012").getTime(),
borderColor: "#999",
yAxisIndex: 0,
label: {
show: true,
text: "Rally",
style: {
color: "#fff",
background: "#6610f2",
},
},
},
],
},
dataLabels: {
enabled: false,
},
markers: {
size: 0,
style: "hollow",
},
xaxis: {
type: "datetime",
min: new Date("01 Mar 2012").getTime(),
tickAmount: 6,
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
yaxis: {
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
x: {
format: "dd MMM yyyy",
},
theme: "dark",
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 100],
},
},
};
var chart_area_datetime = new ApexCharts(
document.querySelector("#chart-area-datetime"),
options
);
chart_area_datetime.render();
var resetCssClasses = function (activeEl) {
var els = document.querySelectorAll("button");
Array.prototype.forEach.call(els, function (el) {
el.classList.remove("active");
});
activeEl.target.classList.add("active");
};
});

429
res/assets/js/apex-chart/apex.bar.init.js Normal file
View File

@@ -0,0 +1,429 @@
document.addEventListener("DOMContentLoaded", function () {
// Basic Bar Chart -------> BAR CHART
var options_basic = {
series: [
{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
},
],
chart: {
fontFamily: "inherit",
type: "bar",
height: 350,
toolbar: {
show: false,
},
},
grid: {
borderColor: "transparent",
},
colors: ["var(--bs-primary)"],
plotOptions: {
bar: {
horizontal: true,
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: [
"South Korea",
"Canada",
"United Kingdom",
"Netherlands",
"Italy",
"France",
"Japan",
"United States",
"China",
"Germany",
],
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
yaxis: {
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
theme: "dark",
},
};
var chart_bar_basic = new ApexCharts(
document.querySelector("#chart-bar-basic"),
options_basic
);
chart_bar_basic.render();
// Stacked Bar Chart -------> BAR CHART
var options_stacked = {
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: {
fontFamily: "inherit",
type: "bar",
height: 350,
stacked: true,
toolbar: {
show: false,
},
},
grid: {
borderColor: "transparent",
},
colors: [
"var(--bs-primary)",
"var(--bs-secondary)",
"#ffae1f",
"#fa896b",
"#39b69a",
],
plotOptions: {
bar: {
horizontal: true,
},
},
stroke: {
width: 1,
colors: ["#fff"],
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
labels: {
formatter: function (val) {
return val + "K";
},
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
yaxis: {
title: {
text: undefined,
},
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "K";
},
},
theme: "dark",
},
fill: {
opacity: 1,
},
legend: {
position: "top",
horizontalAlign: "left",
offsetX: 40,
labels: {
colors: ["#a1aab2"],
},
},
};
var chart_bar_stacked = new ApexCharts(
document.querySelector("#chart-bar-stacked"),
options_stacked
);
chart_bar_stacked.render();
// Reversed Bar Chart -------> BAR CHART
var options_reversed = {
series: [
{
data: [400, 430, 448, 470, 540, 580, 690],
},
],
chart: {
fontFamily: "inherit",
type: "bar",
height: 350,
toolbar: {
show: false,
},
},
grid: {
borderColor: "transparent",
},
colors: ["var(--bs-primary)"],
annotations: {
xaxis: [
{
x: 500,
borderColor: "var(--bs-primary)",
label: {
borderColor: "var(--bs-primary)",
style: {
color: "#fff",
background: "var(--bs-primary)",
},
text: "X annotation",
},
},
],
yaxis: [
{
y: "July",
y2: "September",
label: {
text: "Y annotation",
},
},
],
},
plotOptions: {
bar: {
horizontal: true,
},
},
dataLabels: {
enabled: true,
},
xaxis: {
categories: [
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
grid: {
xaxis: {
lines: {
show: true,
},
},
borderColor: "transparent",
},
yaxis: {
reversed: true,
axisTicks: {
show: true,
},
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
theme: "dark",
},
};
var chart_bar_reversed = new ApexCharts(
document.querySelector("#chart-bar-reversed"),
options_reversed
);
chart_bar_reversed.render();
// Patterned Bar Chart -------> BAR CHART
var options_patterned = {
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: {
fontFamily: "inherit",
type: "bar",
height: 350,
stacked: true,
dropShadow: {
enabled: true,
blur: 1,
opacity: 0.25,
},
toolbar: {
show: false,
},
},
grid: {
borderColor: "transparent",
},
colors: ["var(--bs-primary)", "var(--bs-secondary)", "#ffae1f", "#fa896b"],
plotOptions: {
bar: {
horizontal: true,
barHeight: "60%",
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: 2,
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
labels: {
style: {
colors: ["#a1aab2", "#a1aab2", "#a1aab2", "#a1aab2", "#a1aab2"],
},
},
},
yaxis: {
title: {
text: undefined,
},
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
shared: false,
y: {
formatter: function (val) {
return val + "K";
},
},
theme: "dark",
},
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,
labels: {
colors: ["#a1aab2"],
},
},
};
var chart_bar_patterned = new ApexCharts(
document.querySelector("#chart-bar-patterned"),
options_patterned
);
chart_bar_patterned.render();
});

578
res/assets/js/apex-chart/apex.line.init.js Normal file
View File

@@ -0,0 +1,578 @@
document.addEventListener("DOMContentLoaded", function () {
// Basic Line Chart -------> LINE CHART
var options_line = {
series: [
{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
},
],
chart: {
height: 350,
type: "line",
fontFamily: "inherit",
zoom: {
enabled: false,
},
toolbar: {
show: false,
},
},
dataLabels: {
enabled: false,
},
colors: ["var(--bs-primary)"],
stroke: {
curve: "straight",
},
grid: {
row: {
colors: [ "transparent"], // takes an array which will be repeated on columns
opacity: 0.5,
},
borderColor: "transparent",
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
],
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
yaxis: {
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
theme: "dark",
},
};
var chart_line_basic = new ApexCharts(
document.querySelector("#chart-line-basic"),
options_line
);
chart_line_basic.render();
// Data Label Line Chart -------> LINE CHART
var options = {
series: [
{
name: "High - 2013",
data: [28, 29, 33, 36, 32, 32, 33],
},
{
name: "Low - 2013",
data: [12, 11, 14, 18, 17, 13, 13],
},
],
chart: {
fontFamily: "inherit",
height: 350,
type: "line",
dropShadow: {
enabled: true,
color: "#000",
top: 18,
left: 7,
blur: 10,
opacity: 0.2,
},
toolbar: {
show: false,
},
},
colors: ["var(--bs-primary)", "var(--bs-secondary)"],
dataLabels: {
enabled: true,
},
stroke: {
curve: "smooth",
},
grid: {
borderColor: "transparent",
row: {
colors: ["transparent"], // takes an array which will be repeated on columns
opacity: 0.5,
},
},
markers: {
size: 1,
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
yaxis: {
min: 5,
max: 40,
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
theme: "dark",
},
legend: {
position: "top",
horizontalAlign: "right",
floating: true,
offsetY: -25,
offsetX: -5,
},
};
var chart_line_data = new ApexCharts(
document.querySelector("#chart-line-with-data-label"),
options
);
chart_line_data.render();
// Zoomable Line Chart -------> LINE CHART
var options_zoomable = {
series: [
{
name: "XYZ MOTORS",
data: [
{
x: "02-10-2017 GMT",
y: 34,
},
{
x: "02-11-2017 GMT",
y: 43,
},
{
x: "02-12-2017 GMT",
y: 31,
},
{
x: "02-13-2017 GMT",
y: 43,
},
{
x: "02-14-2017 GMT",
y: 33,
},
{
x: "02-15-2017 GMT",
y: 52,
},
],
},
],
chart: {
fontFamily: "inherit",
type: "area",
stacked: false,
height: 350,
zoom: {
type: "x",
enabled: true,
autoScaleYaxis: true,
},
toolbar: {
autoSelected: "zoom",
show: false,
},
},
dataLabels: {
enabled: false,
},
grid: {
borderColor: "transparent",
},
colors: ["var(--bs-primary)"],
markers: {
size: 0,
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.12,
opacityTo: 0,
stops: [0, 90, 100],
},
},
yaxis: {
labels: {
formatter: function (val) {
return (val / 1000000).toFixed(0);
},
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
xaxis: {
type: "datetime",
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
shared: false,
y: {
formatter: function (val) {
return (val / 1000000).toFixed(0);
},
},
theme: "dark",
},
};
var chart_line_zoomable = new ApexCharts(
document.querySelector("#chart-line-zoomable"),
options_zoomable
);
chart_line_zoomable.render();
// Gradient Line Chart -------> LINE CHART
var options_gradient = {
series: [
{
name: "Likes",
data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5],
},
],
chart: {
fontFamily: "inherit",
height: 350,
type: "line",
toolbar: {
show: false,
},
},
stroke: {
width: 7,
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"1/11/2000",
"2/11/2000",
"3/11/2000",
"4/11/2000",
"5/11/2000",
"6/11/2000",
"7/11/2000",
"8/11/2000",
"9/11/2000",
"10/11/2000",
"11/11/2000",
"12/11/2000",
"1/11/2001",
"2/11/2001",
"3/11/2001",
"4/11/2001",
"5/11/2001",
"6/11/2001",
],
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
grid: {
borderColor: "transparent",
},
colors: ["#39b69a"],
fill: {
type: "gradient",
gradient: {
shade: "dark",
gradientToColors: ["var(--bs-primary)"],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100],
},
},
markers: {
size: 4,
colors: ["var(--bs-primary)"],
strokeColors: "#fff",
strokeWidth: 2,
hover: {
size: 7,
},
},
yaxis: {
min: -10,
max: 40,
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
theme: "dark",
},
};
var chart_line_gradient = new ApexCharts(
document.querySelector("#chart-line-gradient"),
options_gradient
);
chart_line_gradient.render();
var lastDate = 0;
var data = [];
var TICKINTERVAL = 86400000;
let XAXISRANGE = 777600000;
function getDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
while (i < count) {
var x = baseval;
var y =
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
data.push({
x,
y,
});
lastDate = baseval;
baseval += TICKINTERVAL;
i++;
}
}
getDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 10, {
min: 10,
max: 90,
});
function getNewSeries(baseval, yrange) {
var newDate = baseval + TICKINTERVAL;
lastDate = newDate;
for (var i = 0; i < data.length - 10; i++) {
// IMPORTANT
// we reset the x and y of the data which is out of drawing area
// to prevent memory leaks
data[i].x = newDate - XAXISRANGE - TICKINTERVAL;
data[i].y = 0;
}
data.push({
x: newDate,
y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min,
});
}
function resetData() {
// Alternatively, you can also reset the data at certain intervals to prevent creating a huge series
data = data.slice(data.length - 10, data.length);
}
// Realtime Line Chart -------> LINE CHART
var options_realtime = {
series: [
{
data: data.slice(),
},
],
chart: {
fontFamily: "inherit",
id: "realtime",
height: 350,
type: "line",
animations: {
enabled: true,
easing: "linear",
dynamicAnimation: {
speed: 1000,
},
},
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
},
grid: {
borderColor: "transparent",
},
colors: ["var(--bs-primary)"],
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
markers: {
size: 0,
},
xaxis: {
type: "datetime",
range: XAXISRANGE,
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
yaxis: {
max: 100,
labels: {
style: {
colors: [
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
"#a1aab2",
],
},
},
},
tooltip: {
theme: "dark",
},
legend: {
show: false,
},
};
var chart_line_realtime = new ApexCharts(
document.querySelector("#chart-line-real-time"),
options_realtime
);
chart_line_realtime.render();
window.setInterval(function () {
getNewSeries(lastDate, {
min: 10,
max: 90,
});
chart_line_realtime.updateSeries([
{
data: data,
},
]);
}, 1000);
});

130
res/assets/js/apex-chart/apex.pie.init.js Normal file
View File

@@ -0,0 +1,130 @@
document.addEventListener("DOMContentLoaded", function () {
// Simple Pie Chart -------> PIE CHART
var options_simple = {
series: [44, 55, 13, 43, 22],
chart: {
fontFamily: "inherit",
width: 380,
type: "pie",
},
colors: [
"var(--bs-primary)",
"var(--bs-secondary)",
"#ffae1f",
"#fa896b",
"#39b69a",
],
labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},
],
legend: {
labels: {
colors: ["#a1aab2"],
},
},
};
var chart_pie_simple = new ApexCharts(
document.querySelector("#chart-pie-simple"),
options_simple
);
chart_pie_simple.render();
// Donut Pie Chart -------> PIE CHART
var options_donut = {
series: [44, 55, 41, 17, 15],
chart: {
fontFamily: "inherit",
type: "donut",
width: 385,
},
colors: [
"var(--bs-primary)",
"var(--bs-secondary)",
"#ffae1f",
"#fa896b",
"#39b69a",
],
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},
],
legend: {
labels: {
colors: ["#a1aab2"],
},
},
};
var chart_pie_donut = new ApexCharts(
document.querySelector("#chart-pie-donut"),
options_donut
);
chart_pie_donut.render();
// Monochrome Pie Chart -------> PIE CHART
var options_monochrome = {
series: [25, 15, 44, 55, 41, 17],
chart: {
fontFamily: "inherit",
width: "350",
type: "pie",
},
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
],
theme: {
monochrome: {
enabled: true,
},
},
plotOptions: {
pie: {
color: ["#3dd9eb"],
dataLabels: {
offset: -5,
},
},
},
dataLabels: {
formatter(val, opts) {
const name = opts.w.globals.labels[opts.seriesIndex];
return [name, val.toFixed(1) + "%"];
},
},
legend: {
show: false,
},
};
var chart_pie_monochrome = new ApexCharts(
document.querySelector("#chart-pie-monochrome"),
options_monochrome
);
chart_pie_monochrome.render();
});

165
res/assets/js/apex-chart/apex.radar.init.js Normal file
View File

@@ -0,0 +1,165 @@
document.addEventListener("DOMContentLoaded", function () {
// Basic Radar Chart -------> RADAR CHART
var options_basic = {
series: [
{
name: "Series 1",
data: [80, 50, 30, 40, 100, 20],
},
],
chart: {
fontFamily: "inherit",
height: 350,
type: "radar",
toolbar: {
show: false,
},
},
colors: ["#615dff"],
xaxis: {
categories: ["January", "February", "March", "April", "May", "June"],
},
tooltip: {
theme: "dark",
},
};
var chart_radar_basic = new ApexCharts(
document.querySelector("#chart-radar-basic"),
options_basic
);
chart_radar_basic.render();
// Multiple Series Radar Chart -------> RADAR CHART
var options_multiple = {
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: {
fontFamily: "inherit",
height: 350,
type: "radar",
toolbar: {
show: false,
},
dropShadow: {
enabled: true,
blur: 1,
left: 1,
top: 1,
},
},
colors: ["#615dff", "#3dd9eb", "#ffae1f"],
stroke: {
width: 2,
},
fill: {
opacity: 0.1,
},
markers: {
size: 0,
},
xaxis: {
categories: ["2011", "2012", "2013", "2014", "2015", "2016"],
},
legend: {
labels: {
colors: ["#a1aab2"],
},
},
};
var chart_radar_multiple_series = new ApexCharts(
document.querySelector("#chart-radar-multiple-series"),
options_multiple
);
chart_radar_multiple_series.render();
// Polygon-fill Radar Chart -------> RADAR CHART
var options_polygon = {
series: [
{
name: "Series 1",
data: [20, 100, 40, 30, 50, 80, 33],
},
],
chart: {
fontFamily: "inherit",
height: 350,
type: "radar",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: true,
},
plotOptions: {
radar: {
size: 140,
polygons: {
strokeColors: "var(--bs-border-color)",
fill: {
colors: ["var(--bs-light)", "var(--bs-body-bg)"],
},
},
},
},
colors: ["#615dff"],
markers: {
size: 4,
colors: ["#fff"],
strokeColor: "#615dff",
strokeWidth: 2,
},
tooltip: {
y: {
formatter: function (val) {
return val;
},
},
theme: "dark",
},
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_radar_polygon_fill = new ApexCharts(
document.querySelector("#chart-radar-polygon-fill"),
options_polygon
);
chart_radar_polygon_fill.render();
});

350
res/assets/js/apex-chart/apex.radial.init.js Normal file
View File

@@ -0,0 +1,350 @@
document.addEventListener("DOMContentLoaded", function () {
// Basic Radial Bar Chart -------> RADIAL CHART
var options_basic = {
series: [70],
chart: {
fontFamily: "inherit",
height: 350,
type: "radialBar",
},
colors: ["#615dff"],
plotOptions: {
radialBar: {
hollow: {
size: "70%",
},
dataLabels: {
value: {
color: "#a1aab2",
show: true,
},
},
},
},
labels: ["Cricket"],
};
var chart_radial_basic = new ApexCharts(
document.querySelector("#chart-radial-basic"),
options_basic
);
chart_radial_basic.render();
// Multiple Radial Bar Chart -------> RADIAL CHART
var options_multiple = {
series: [44, 55, 67, 83],
chart: {
fontFamily: "inherit",
height: 350,
type: "radialBar",
},
colors: ["#615dff", "#3dd9eb", "#ffae1f", "#fa896b"],
plotOptions: {
radialBar: {
dataLabels: {
name: {
fontSize: "22px",
},
value: {
fontSize: "16px",
color: "#a1aab2",
},
total: {
show: true,
label: "Total",
formatter: function (w) {
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
return 249;
},
},
},
},
},
labels: ["Apples", "Oranges", "Bananas", "Berries"],
};
var chart_radial_multiple = new ApexCharts(
document.querySelector("#chart-radial-multiple"),
options_multiple
);
chart_radial_multiple.render();
// Custome circle Radial Bar Chart -------> RADIAL CHART
var options_custom_circle = {
series: [76, 67, 61, 90],
chart: {
fontFamily: "inherit",
height: 390,
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: ["#615dff", "#3dd9eb", "#ffae1f", "#fa896b"],
labels: ["Vimeo", "Messenger", "Facebook", "LinkedIn"],
legend: {
show: true,
floating: true,
fontSize: "16px",
position: "left",
offsetX: 80,
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_radial_custom_circle = new ApexCharts(
document.querySelector("#chart-radial-circle"),
options_custom_circle
);
chart_radial_custom_circle.render();
// Stroked Gauge Radial Bar Chart -------> RADIAL CHART
var options_gradient = {
series: [75],
chart: {
fontFamily: "inherit",
height: 350,
type: "radialBar",
toolbar: {
show: false,
},
},
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 225,
hollow: {
margin: 0,
size: "70%",
background: "#fff",
image: undefined,
imageOffsetX: 0,
imageOffsetY: 0,
position: "front",
dropShadow: {
enabled: true,
top: 3,
left: 0,
blur: 4,
opacity: 0.24,
},
},
track: {
background: "#fff",
strokeWidth: "67%",
margin: 0, // margin is in pixels
dropShadow: {
enabled: true,
top: -3,
left: 0,
blur: 4,
opacity: 0.35,
},
},
dataLabels: {
show: true,
name: {
offsetY: -10,
show: true,
color: "#615dff",
fontSize: "17px",
},
value: {
formatter: function (val) {
return parseInt(val);
},
color: "#6610f2",
fontSize: "36px",
show: true,
},
},
},
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "horizontal",
shadeIntensity: 0.5,
gradientToColors: ["#615dff"],
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100],
},
},
stroke: {
lineCap: "round",
},
labels: ["Percent"],
};
var chart_radial_gradient = new ApexCharts(
document.querySelector("#chart-radial-gradient"),
options_gradient
);
chart_radial_gradient.render();
// Stroked Gauge Radial Bar Chart -------> RADIAL CHART
var options_strocked = {
series: [67],
chart: {
fontFamily: "inherit",
height: 350,
type: "radialBar",
offsetY: -10,
},
colors: ["#615dff"],
plotOptions: {
radialBar: {
startAngle: -135,
endAngle: 135,
dataLabels: {
name: {
fontSize: "16px",
color: undefined,
offsetY: 120,
},
value: {
offsetY: 76,
fontSize: "22px",
color: "#a1aab2",
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"],
};
var chart_radial_strocked = new ApexCharts(
document.querySelector("#chart-radial-stroked-gauge"),
options_strocked
);
chart_radial_strocked.render();
// Semi Circle Radial Bar Chart -------> RADIAL CHART
var options_semi_circle = {
series: [76],
chart: {
fontFamily: "inherit",
type: "radialBar",
offsetY: -20,
width: 400,
height: 300,
sparkline: {
enabled: true,
},
},
plotOptions: {
radialBar: {
startAngle: -90,
endAngle: 90,
track: {
background: "#615dff",
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",
color: "#a1aab2",
},
},
},
},
grid: {
padding: {
top: -10,
},
},
fill: {
type: "gradient",
gradient: {
color: "#6610f2",
shade: "light",
shadeIntensity: 0.4,
inverseColors: false,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 50, 53, 91],
},
},
labels: ["Average Results"],
};
var chart_radial_semi_circle = new ApexCharts(
document.querySelector("#chart-radial-semi-circle"),
options_semi_circle
);
chart_radial_semi_circle.render();
});