lavkach3
1document.addEventListener("DOMContentLoaded", function () {2
3//=====================================4// Theme Onload Toast5//=====================================6window.addEventListener("load", () => {7let myAlert = document.querySelectorAll('.toast')[0];8if (myAlert) {9let bsAlert = new bootstrap.Toast(myAlert);10bsAlert.show();11}12})13
14// -----------------------------------------------------------------------15// Customers16// -----------------------------------------------------------------------17
18var options = {19chart: {20id: "customers",21type: "area",22height: 70,23sparkline: {24enabled: true,25},26group: "sparklines",27fontFamily: "inherit",28foreColor: "#adb0bb",29},30series: [31{32name: "customers",33color: "var(--bs-secondary)",34data: [36, 45, 31, 47, 38, 43],35},36],37stroke: {38curve: "smooth",39width: 2,40},41fill: {42type: "gradient",43color: "var(--bs-secondary)",44
45gradient: {46shadeIntensity: 0,47inverseColors: false,48opacityFrom: 0.2,49opacityTo: 0.1,50stops: [100],51},52},53
54markers: {55size: 0,56},57tooltip: {58theme: "dark",59fixed: {60enabled: true,61position: "right",62},63x: {64show: false,65},66},67};68new ApexCharts(document.querySelector("#customers"), options).render();69
70// -----------------------------------------------------------------------71// Projects72// -----------------------------------------------------------------------73var chart_bounce_rate = {74series: [75{76name: "Project",77labels: ["2012", "2013", "2014", "2015", "2016", "2017"],78data: [3, 5, 5, 7, 6, 5, 3, 5, 3],79},80],81chart: {82fontFamily: "inherit",83height: 46,84type: "bar",85offsetX: -10,86toolbar: {87show: false,88},89sparkline: {90enabled: true,91},92},93colors: ["var(--bs-white)"],94plotOptions: {95bar: {96horizontal: false,97columnWidth: "55%",98endingShape: "flat",99borderRadius: 4,100},101},102tooltip: {103theme: "dark",104followCursor: true,105},106};107var chart_line_basic = new ApexCharts(108document.querySelector("#projects"),109chart_bounce_rate
110);111chart_line_basic.render();112
113// -----------------------------------------------------------------------114// Revenue Forecast115// -----------------------------------------------------------------------116
117var chart = {118series: [119{120name: "2023",121data: [50, 60, 30, 55, 75, 60, 100, 120],122},123
124{125name: "2022",126data: [35, 45, 40, 50, 35, 55, 40, 45],127},128{129name: "2024",130data: [100, 75, 80, 40, 20, 40, 0, 25],131},132],133chart: {134toolbar: {135show: false,136},137type: "area",138fontFamily: "inherit",139foreColor: "#adb0bb",140height: 300,141width: "100%",142stacked: false,143offsetX: -10,144},145colors: ["var(--bs-danger)", "var(--bs-secondary)", "var(--bs-primary)"],146plotOptions: {},147dataLabels: {148enabled: false,149},150legend: {151show: false,152},153stroke: {154width: 2,155curve: "monotoneCubic",156},157grid: {158show: true,159padding: {160top: 0,161bottom: 0,162},163borderColor: "rgba(0,0,0,0.05)",164xaxis: {165lines: {166show: true,167},168},169yaxis: {170lines: {171show: true,172},173},174},175fill: {176type: "gradient",177gradient: {178shadeIntensity: 0,179inverseColors: false,180opacityFrom: 0.1,181opacityTo: 0.01,182stops: [0, 100],183},184},185xaxis: {186axisBorder: {187show: false,188},189axisTicks: {190show: false,191},192categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug"],193},194markers: {195strokeColor: [196"var(--bs-danger)",197"var(--bs-secondary)",198"var(--bs-primary)",199],200strokeWidth: 2,201},202tooltip: {203theme: "dark",204},205};206
207var chart = new ApexCharts(208document.querySelector("#revenue-forecast"),209chart
210);211chart.render();212
213// =====================================214// Your Preformance215// =====================================216
217var options = {218series: [20, 20, 20, 20, 20],219labels: ["245", "45", "14", "78", "95"],220chart: {221height: 205,222fontFamily: "inherit",223type: "donut",224},225plotOptions: {226pie: {227startAngle: -90,228endAngle: 90,229offsetY: 10,230donut: {231size: "90%",232},233},234},235grid: {236padding: {237bottom: -80,238},239},240legend: {241show: false,242},243dataLabels: {244enabled: false,245name: {246show: false,247},248},249stroke: {250width: 2,251colors: "var(--bs-card-bg)",252},253tooltip: {254fillSeriesColor: false,255},256colors: [257"var(--bs-danger)",258"var(--bs-warning)",259"var(--bs-warning-bg-subtle)",260"var(--bs-secondary-bg-subtle)",261"var(--bs-secondary)",262],263responsive: [{264breakpoint: 1400,265options: {266chart: {267height: 170268},269},270}],271};272
273var chart = new ApexCharts(274document.querySelector("#your-preformance"),275options
276);277chart.render();278
279// -----------------------------------------------------------------------280// Customers Area281// -----------------------------------------------------------------------282var chart_users = {283series: [284{285name: "April 07 ",286data: [0, 20, 15, 19, 14, 25, 30],287},288{289name: "Last Week",290data: [0, 8, 19, 13, 26, 16, 25],291},292],293chart: {294fontFamily: "inherit",295height: 100,296type: "line",297toolbar: {298show: false,299},300sparkline: {301enabled: true,302},303},304colors: ["var(--bs-primary)", "var(--bs-primary-bg-subtle)"],305grid: {306show: false,307},308stroke: {309curve: "smooth",310colors: ["var(--bs-primary)", "var(--bs-primary-bg-subtle)"],311width: 2,312},313markers: {314colors: ["var(--bs-primary)", "var(--bs-primary-bg-subtle)"],315strokeColors: "transparent",316},317tooltip: {318theme: "dark",319x: {320show: false,321},322followCursor: true,323},324};325var chart_line_basic = new ApexCharts(326document.querySelector("#customers-area"),327chart_users
328);329chart_line_basic.render();330
331// -----------------------------------------------------------------------332// Sales Overview333// -----------------------------------------------------------------------334var options = {335series: [50, 80, 30],336labels: ["36%", "10%", "36%"],337chart: {338type: "radialBar",339height: 230,340fontFamily: "inherit",341foreColor: "#c6d1e9",342},343plotOptions: {344radialBar: {345inverseOrder: false,346startAngle: 0,347endAngle: 270,348hollow: {349margin: 1,350size: "40%",351},352dataLabels: {353show: false,354},355},356},357legend: {358show: false,359},360stroke: { width: 1, lineCap: "round" },361tooltip: {362enabled: false,363fillSeriesColor: false,364},365colors: ["var(--bs-primary)", "var(--bs-secondary)", "var(--bs-danger)"],366};367
368var chart = new ApexCharts(369document.querySelector("#sales-overview"),370options
371);372chart.render();373
374// -----------------------------------------------------------------------375// Total settlements376// -----------------------------------------------------------------------377var settlements = {378series: [379{380name: "settlements",381data: [38240, 40, 80, 80, 30, 30, 10, 10, 30, 30, 100, 100, 20, 20, 140, 140,383],384},385],386chart: {387fontFamily: "inherit",388type: "line",389height: 300,390toolbar: { show: !1 },391},392legend: { show: !1 },393dataLabels: { enabled: !1 },394stroke: {395curve: "smooth",396show: !0,397width: 2,398colors: ["var(--bs-primary)"],399},400xaxis: {401categories: [402"1W",403"",404"3W",405"",406"5W",407"6W",408"7W",409"8W",410"9W",411"",412"11W",413"",414"13W",415"",416"15W",417],418axisBorder: { show: !1 },419axisTicks: { show: !1 },420tickAmount: 6,421labels: {422rotate: 0,423rotateAlways: !0,424style: { fontSize: "10px", colors: "#adb0bb", fontWeight: "600" },425},426},427yaxis: {428show: false,429tickAmount: 3,430},431tooltip: {432theme: "dark",433},434colors: ["var(--bs-primary)"],435grid: {436borderColor: "var(--bs-primary-bg-subtle)",437strokeDashArray: 4,438yaxis: { show: false },439},440markers: {441strokeColor: ["var(--bs-primary)"],442strokeWidth: 3,443},444};445
446var chart_area_spline = new ApexCharts(447document.querySelector("#settlements"),448settlements
449);450chart_area_spline.render();451});452