lavkach3

1
document.addEventListener("DOMContentLoaded", function () {
2

3
  //=====================================
4
  // Theme Onload Toast
5
  //=====================================
6
  window.addEventListener("load", () => {
7
    let myAlert = document.querySelectorAll('.toast')[0];
8
    if (myAlert) {
9
      let bsAlert = new bootstrap.Toast(myAlert);
10
      bsAlert.show();
11
    }
12
  })
13

14
  // -----------------------------------------------------------------------
15
  // Customers
16
  // -----------------------------------------------------------------------
17

18
  var options = {
19
    chart: {
20
      id: "customers",
21
      type: "area",
22
      height: 70,
23
      sparkline: {
24
        enabled: true,
25
      },
26
      group: "sparklines",
27
      fontFamily: "inherit",
28
      foreColor: "#adb0bb",
29
    },
30
    series: [
31
      {
32
        name: "customers",
33
        color: "var(--bs-secondary)",
34
        data: [36, 45, 31, 47, 38, 43],
35
      },
36
    ],
37
    stroke: {
38
      curve: "smooth",
39
      width: 2,
40
    },
41
    fill: {
42
      type: "gradient",
43
      color: "var(--bs-secondary)",
44

45
      gradient: {
46
        shadeIntensity: 0,
47
        inverseColors: false,
48
        opacityFrom: 0.2,
49
        opacityTo: 0.1,
50
        stops: [100],
51
      },
52
    },
53

54
    markers: {
55
      size: 0,
56
    },
57
    tooltip: {
58
      theme: "dark",
59
      fixed: {
60
        enabled: true,
61
        position: "right",
62
      },
63
      x: {
64
        show: false,
65
      },
66
    },
67
  };
68
  new ApexCharts(document.querySelector("#customers"), options).render();
69

70
  // -----------------------------------------------------------------------
71
  // Projects
72
  // -----------------------------------------------------------------------
73
  var chart_bounce_rate = {
74
    series: [
75
      {
76
        name: "Project",
77
        labels: ["2012", "2013", "2014", "2015", "2016", "2017"],
78
        data: [3, 5, 5, 7, 6, 5, 3, 5, 3],
79
      },
80
    ],
81
    chart: {
82
      fontFamily: "inherit",
83
      height: 46,
84
      type: "bar",
85
      offsetX: -10,
86
      toolbar: {
87
        show: false,
88
      },
89
      sparkline: {
90
        enabled: true,
91
      },
92
    },
93
    colors: ["var(--bs-white)"],
94
    plotOptions: {
95
      bar: {
96
        horizontal: false,
97
        columnWidth: "55%",
98
        endingShape: "flat",
99
        borderRadius: 4,
100
      },
101
    },
102
    tooltip: {
103
      theme: "dark",
104
      followCursor: true,
105
    },
106
  };
107
  var chart_line_basic = new ApexCharts(
108
    document.querySelector("#projects"),
109
    chart_bounce_rate
110
  );
111
  chart_line_basic.render();
112

113
  // -----------------------------------------------------------------------
114
  // Revenue Forecast
115
  // -----------------------------------------------------------------------
116

117
  var chart = {
118
    series: [
119
      {
120
        name: "2023",
121
        data: [50, 60, 30, 55, 75, 60, 100, 120],
122
      },
123

124
      {
125
        name: "2022",
126
        data: [35, 45, 40, 50, 35, 55, 40, 45],
127
      },
128
      {
129
        name: "2024",
130
        data: [100, 75, 80, 40, 20, 40, 0, 25],
131
      },
132
    ],
133
    chart: {
134
      toolbar: {
135
        show: false,
136
      },
137
      type: "area",
138
      fontFamily: "inherit",
139
      foreColor: "#adb0bb",
140
      height: 300,
141
      width: "100%",
142
      stacked: false,
143
      offsetX: -10,
144
    },
145
    colors: ["var(--bs-danger)", "var(--bs-secondary)", "var(--bs-primary)"],
146
    plotOptions: {},
147
    dataLabels: {
148
      enabled: false,
149
    },
150
    legend: {
151
      show: false,
152
    },
153
    stroke: {
154
      width: 2,
155
      curve: "monotoneCubic",
156
    },
157
    grid: {
158
      show: true,
159
      padding: {
160
        top: 0,
161
        bottom: 0,
162
      },
163
      borderColor: "rgba(0,0,0,0.05)",
164
      xaxis: {
165
        lines: {
166
          show: true,
167
        },
168
      },
169
      yaxis: {
170
        lines: {
171
          show: true,
172
        },
173
      },
174
    },
175
    fill: {
176
      type: "gradient",
177
      gradient: {
178
        shadeIntensity: 0,
179
        inverseColors: false,
180
        opacityFrom: 0.1,
181
        opacityTo: 0.01,
182
        stops: [0, 100],
183
      },
184
    },
185
    xaxis: {
186
      axisBorder: {
187
        show: false,
188
      },
189
      axisTicks: {
190
        show: false,
191
      },
192
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug"],
193
    },
194
    markers: {
195
      strokeColor: [
196
        "var(--bs-danger)",
197
        "var(--bs-secondary)",
198
        "var(--bs-primary)",
199
      ],
200
      strokeWidth: 2,
201
    },
202
    tooltip: {
203
      theme: "dark",
204
    },
205
  };
206

207
  var chart = new ApexCharts(
208
    document.querySelector("#revenue-forecast"),
209
    chart
210
  );
211
  chart.render();
212

213
  // =====================================
214
  // Your Preformance
215
  // =====================================
216

217
  var options = {
218
    series: [20, 20, 20, 20, 20],
219
    labels: ["245", "45", "14", "78", "95"],
220
    chart: {
221
      height: 205,
222
      fontFamily: "inherit",
223
      type: "donut",
224
    },
225
    plotOptions: {
226
      pie: {
227
        startAngle: -90,
228
        endAngle: 90,
229
        offsetY: 10,
230
        donut: {
231
          size: "90%",
232
        },
233
      },
234
    },
235
    grid: {
236
      padding: {
237
        bottom: -80,
238
      },
239
    },
240
    legend: {
241
      show: false,
242
    },
243
    dataLabels: {
244
      enabled: false,
245
      name: {
246
        show: false,
247
      },
248
    },
249
    stroke: {
250
      width: 2,
251
      colors: "var(--bs-card-bg)",
252
    },
253
    tooltip: {
254
      fillSeriesColor: false,
255
    },
256
    colors: [
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
    ],
263
    responsive: [{
264
      breakpoint: 1400,
265
      options: {
266
        chart: {
267
          height: 170
268
        },
269
      },
270
    }],
271
  };
272

273
  var chart = new ApexCharts(
274
    document.querySelector("#your-preformance"),
275
    options
276
  );
277
  chart.render();
278

279
  // -----------------------------------------------------------------------
280
  // Customers Area
281
  // -----------------------------------------------------------------------
282
  var chart_users = {
283
    series: [
284
      {
285
        name: "April 07 ",
286
        data: [0, 20, 15, 19, 14, 25, 30],
287
      },
288
      {
289
        name: "Last Week",
290
        data: [0, 8, 19, 13, 26, 16, 25],
291
      },
292
    ],
293
    chart: {
294
      fontFamily: "inherit",
295
      height: 100,
296
      type: "line",
297
      toolbar: {
298
        show: false,
299
      },
300
      sparkline: {
301
        enabled: true,
302
      },
303
    },
304
    colors: ["var(--bs-primary)", "var(--bs-primary-bg-subtle)"],
305
    grid: {
306
      show: false,
307
    },
308
    stroke: {
309
      curve: "smooth",
310
      colors: ["var(--bs-primary)", "var(--bs-primary-bg-subtle)"],
311
      width: 2,
312
    },
313
    markers: {
314
      colors: ["var(--bs-primary)", "var(--bs-primary-bg-subtle)"],
315
      strokeColors: "transparent",
316
    },
317
    tooltip: {
318
      theme: "dark",
319
      x: {
320
        show: false,
321
      },
322
      followCursor: true,
323
    },
324
  };
325
  var chart_line_basic = new ApexCharts(
326
    document.querySelector("#customers-area"),
327
    chart_users
328
  );
329
  chart_line_basic.render();
330

331
  // -----------------------------------------------------------------------
332
  // Sales Overview
333
  // -----------------------------------------------------------------------
334
  var options = {
335
    series: [50, 80, 30],
336
    labels: ["36%", "10%", "36%"],
337
    chart: {
338
      type: "radialBar",
339
      height: 230,
340
      fontFamily: "inherit",
341
      foreColor: "#c6d1e9",
342
    },
343
    plotOptions: {
344
      radialBar: {
345
        inverseOrder: false,
346
        startAngle: 0,
347
        endAngle: 270,
348
        hollow: {
349
          margin: 1,
350
          size: "40%",
351
        },
352
        dataLabels: {
353
          show: false,
354
        },
355
      },
356
    },
357
    legend: {
358
      show: false,
359
    },
360
    stroke: { width: 1, lineCap: "round" },
361
    tooltip: {
362
      enabled: false,
363
      fillSeriesColor: false,
364
    },
365
    colors: ["var(--bs-primary)", "var(--bs-secondary)", "var(--bs-danger)"],
366
  };
367

368
  var chart = new ApexCharts(
369
    document.querySelector("#sales-overview"),
370
    options
371
  );
372
  chart.render();
373

374
  // -----------------------------------------------------------------------
375
  // Total settlements
376
  // -----------------------------------------------------------------------
377
  var settlements = {
378
    series: [
379
      {
380
        name: "settlements",
381
        data: [
382
          40, 40, 80, 80, 30, 30, 10, 10, 30, 30, 100, 100, 20, 20, 140, 140,
383
        ],
384
      },
385
    ],
386
    chart: {
387
      fontFamily: "inherit",
388
      type: "line",
389
      height: 300,
390
      toolbar: { show: !1 },
391
    },
392
    legend: { show: !1 },
393
    dataLabels: { enabled: !1 },
394
    stroke: {
395
      curve: "smooth",
396
      show: !0,
397
      width: 2,
398
      colors: ["var(--bs-primary)"],
399
    },
400
    xaxis: {
401
      categories: [
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
      ],
418
      axisBorder: { show: !1 },
419
      axisTicks: { show: !1 },
420
      tickAmount: 6,
421
      labels: {
422
        rotate: 0,
423
        rotateAlways: !0,
424
        style: { fontSize: "10px", colors: "#adb0bb", fontWeight: "600" },
425
      },
426
    },
427
    yaxis: {
428
      show: false,
429
      tickAmount: 3,
430
    },
431
    tooltip: {
432
      theme: "dark",
433
    },
434
    colors: ["var(--bs-primary)"],
435
    grid: {
436
      borderColor: "var(--bs-primary-bg-subtle)",
437
      strokeDashArray: 4,
438
      yaxis: { show: false },
439
    },
440
    markers: {
441
      strokeColor: ["var(--bs-primary)"],
442
      strokeWidth: 3,
443
    },
444
  };
445

446
  var chart_area_spline = new ApexCharts(
447
    document.querySelector("#settlements"),
448
    settlements
449
  );
450
  chart_area_spline.render();
451
});
452