lavkach3

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

3
    // -----------------------------------------------------------------------
4
    // Subscriptions
5
    // -----------------------------------------------------------------------
6
    var chart = {
7
        series: [
8
            {
9
                name: "2024",
10
                data: [1.2, 2.7, 1, 3.6, 2.1, 2.7, 2.2, 1.3, 2.5],
11
            },
12
            {
13
                name: "2023",
14
                data: [-2.8, -1.1, -2.5, -1.5, -2.3, -1.9, -1, -2.1, -1.3],
15
            },
16
        ],
17
        chart: {
18
            toolbar: {
19
                show: false,
20
            },
21
            type: "bar",
22
            fontFamily: "inherit",
23
            foreColor: "#adb0bb",
24
            height: 295,
25
            stacked: true,
26
            offsetX: -15,
27
        },
28
        colors: ["var(--bs-primary)", "var(--bs-danger)"],
29
        plotOptions: {
30
            bar: {
31
                horizontal: false,
32
                barHeight: "60%",
33
                columnWidth: "15%",
34
                borderRadius: [6],
35
                borderRadiusApplication: "end",
36
                borderRadiusWhenStacked: "all",
37
            },
38
        },
39
        dataLabels: {
40
            enabled: false,
41
        },
42
        legend: {
43
            show: false,
44
        },
45
        grid: {
46
            show: true,
47
            padding: {
48
                top: 0,
49
                bottom: 0,
50
                right: 0,
51
            },
52
            borderColor: "rgba(0,0,0,0.05)",
53
            xaxis: {
54
                lines: {
55
                    show: true,
56
                },
57
            },
58
            yaxis: {
59
                lines: {
60
                    show: true,
61
                },
62
            },
63
        },
64
        yaxis: {
65
            min: -5,
66
            max: 5,
67
        },
68
        xaxis: {
69
            axisBorder: {
70
                show: false,
71
            },
72
            axisTicks: {
73
                show: false,
74
            },
75
            categories: [
76
                "Jan",
77
                "Feb",
78
                "Mar",
79
                "Apr",
80
                "May",
81
                "Jun",
82
                "July",
83
                "Aug",
84
                "Sep",
85
            ],
86
            labels: {
87
                style: { fontSize: "13px", colors: "#adb0bb", fontWeight: "400" },
88
            },
89
        },
90
        yaxis: {
91
            tickAmount: 4,
92
        },
93
        tooltip: {
94
            theme: "dark",
95
        },
96
    };
97

98
    var chart = new ApexCharts(
99
        document.querySelector("#revenue-forecast"),
100
        chart
101
    );
102
    chart.render();
103

104
    // -----------------------------------------------------------------------
105
    // Annual Profit
106
    // -----------------------------------------------------------------------
107
    var options = {
108
        chart: {
109
            id: "annual-profit",
110
            type: "area",
111
            height: 80,
112
            sparkline: {
113
                enabled: true,
114
            },
115
            group: "sparklines",
116
            fontFamily: "inherit",
117
            foreColor: "#adb0bb",
118
        },
119
        series: [
120
            {
121
                name: "Users",
122
                color: "var(--bs-primary)",
123
                data: [25, 66, 20, 40, 12, 58, 20],
124
            },
125
        ],
126
        stroke: {
127
            curve: "smooth",
128
            width: 2,
129
        },
130
        fill: {
131
            type: "gradient",
132
            color: "var(--bs-primary)",
133

134
            gradient: {
135
                shadeIntensity: 0,
136
                inverseColors: false,
137
                opacityFrom: 0.1,
138
                opacityTo: 0.1,
139
                stops: [100],
140
            },
141
        },
142

143
        markers: {
144
            size: 0,
145
        },
146
        tooltip: {
147
            theme: "dark",
148
            fixed: {
149
                enabled: true,
150
                position: "right",
151
            },
152
            x: {
153
                show: false,
154
            },
155
        },
156
    };
157
    new ApexCharts(document.querySelector("#annual-profit"), options).render();
158

159
    // =====================================
160
    // Your Preformance
161
    // =====================================
162

163
    var options = {
164
        series: [20, 20, 20, 20, 20],
165
        labels: ["245", "45", "14", "78", "95"],
166
        chart: {
167
            height: 205,
168
            fontFamily: "inherit",
169
            type: "donut",
170
        },
171
        plotOptions: {
172
            pie: {
173
                startAngle: -90,
174
                endAngle: 90,
175
                offsetY: 10,
176
                donut: {
177
                    size: "90%",
178
                },
179
            },
180
        },
181
        grid: {
182
            padding: {
183
                bottom: -80,
184
            },
185
        },
186
        legend: {
187
            show: false,
188
        },
189
        dataLabels: {
190
            enabled: false,
191
            name: {
192
                show: false,
193
            },
194
        },
195
        stroke: {
196
            width: 2,
197
            colors: "var(--bs-card-bg)",
198
        },
199
        tooltip: {
200
            fillSeriesColor: false,
201
        },
202
        colors: [
203
            "var(--bs-danger)",
204
            "var(--bs-warning)",
205
            "var(--bs-warning-bg-subtle)",
206
            "var(--bs-secondary-bg-subtle)",
207
            "var(--bs-secondary)",
208
        ],
209
        responsive: [{
210
            breakpoint: 1400,
211
            options: {
212
                chart: {
213
                    height: 170
214
                },
215
            },
216
        }],
217

218
    };
219

220
    var chart = new ApexCharts(
221
        document.querySelector("#your-preformance"),
222
        options
223
    );
224
    chart.render();
225

226

227
    // -----------------------------------------------------------------------
228
    // Customers Area
229
    // -----------------------------------------------------------------------
230
    var chart_users = {
231
        series: [
232
            {
233
                name: "April 07 ",
234
                data: [0, 20, 15, 19, 14, 25, 30],
235
            },
236
            {
237
                name: "Last Week",
238
                data: [0, 8, 19, 13, 26, 16, 25],
239
            },
240
        ],
241
        chart: {
242
            fontFamily: "inherit",
243
            height: 100,
244
            type: "line",
245
            toolbar: {
246
                show: false,
247
            },
248
            sparkline: {
249
                enabled: true,
250
            },
251
        },
252
        colors: ["var(--bs-primary)", "var(--bs-primary-bg-subtle)"],
253
        grid: {
254
            show: false,
255
        },
256
        stroke: {
257
            curve: "smooth",
258
            colors: ["var(--bs-primary)", "var(--bs-primary-bg-subtle)"],
259
            width: 2,
260
        },
261
        markers: {
262
            colors: ["var(--bs-primary)", "var(--bs-primary-bg-subtle)"],
263
            strokeColors: "transparent",
264
        },
265
        tooltip: {
266
            theme: "dark",
267
            x: {
268
                show: false,
269
            },
270
            followCursor: true,
271
        },
272
    };
273
    var chart_line_basic = new ApexCharts(
274
        document.querySelector("#customers-area"),
275
        chart_users
276
    );
277
    chart_line_basic.render();
278

279

280
    // -----------------------------------------------------------------------
281
    // Sales Overview
282
    // -----------------------------------------------------------------------
283
    var options = {
284
        series: [50, 80, 30],
285
        labels: ["36%", "10%", "36%"],
286
        chart: {
287
            type: "radialBar",
288
            height: 230,
289
            fontFamily: "inherit",
290
            foreColor: "#c6d1e9",
291
        },
292
        plotOptions: {
293
            radialBar: {
294
                inverseOrder: false,
295
                startAngle: 0,
296
                endAngle: 270,
297
                hollow: {
298
                    margin: 1,
299
                    size: "40%",
300
                },
301
                dataLabels: {
302
                    show: false,
303
                },
304
            },
305
        },
306
        legend: {
307
            show: false,
308
        },
309
        stroke: { width: 1, lineCap: "round" },
310
        tooltip: {
311
            enabled: false,
312
            fillSeriesColor: false,
313
        },
314
        colors: ["var(--bs-primary)", "var(--bs-secondary)", "var(--bs-danger)"],
315
    };
316

317
    var chart = new ApexCharts(
318
        document.querySelector("#sales-overview"),
319
        options
320
    );
321
    chart.render();
322

323
    // -----------------------------------------------------------------------
324
    // Total settlements
325
    // -----------------------------------------------------------------------
326
    var settlements = {
327
        series: [
328
            {
329
                name: "settlements",
330
                data: [
331
                    40, 40, 80, 80, 30, 30, 10, 10, 30, 30, 100, 100, 20, 20, 140, 140,
332
                ],
333
            },
334
        ],
335
        chart: {
336
            fontFamily: "inherit",
337
            type: "line",
338
            height: 300,
339
            toolbar: { show: !1 },
340
        },
341
        legend: { show: !1 },
342
        dataLabels: { enabled: !1 },
343
        stroke: {
344
            curve: "smooth",
345
            show: !0,
346
            width: 2,
347
            colors: ["var(--bs-primary)"],
348
        },
349
        xaxis: {
350
            categories: [
351
                "1W",
352
                "",
353
                "3W",
354
                "",
355
                "5W",
356
                "6W",
357
                "7W",
358
                "8W",
359
                "9W",
360
                "",
361
                "11W",
362
                "",
363
                "13W",
364
                "",
365
                "15W",
366
            ],
367
            axisBorder: { show: !1 },
368
            axisTicks: { show: !1 },
369
            tickAmount: 6,
370
            labels: {
371
                rotate: 0,
372
                rotateAlways: !0,
373
                style: { fontSize: "10px", colors: "#adb0bb", fontWeight: "600" },
374
            },
375
        },
376
        yaxis: {
377
            show: false,
378
            tickAmount: 3,
379
        },
380
        tooltip: {
381
            theme: "dark",
382
        },
383
        colors: ["var(--bs-primary)"],
384
        grid: {
385
            borderColor: "var(--bs-primary-bg-subtle)",
386
            strokeDashArray: 4,
387
            yaxis: { show: false },
388
        },
389
        markers: {
390
            strokeColor: ["var(--bs-primary)"],
391
            strokeWidth: 3,
392
        },
393
    };
394

395
    var chart_area_spline = new ApexCharts(
396
        document.querySelector("#settlements"),
397
        settlements
398
    );
399
    chart_area_spline.render();
400

401
});
402