lavkach3

1
document.addEventListener("DOMContentLoaded", function () {
2
  // -----------------------------------------------------------------------
3
  // Users Area
4
  // -----------------------------------------------------------------------
5
  var options = {
6
    chart: {
7
      id: "customers",
8
      type: "area",
9
      height: 91,
10
      sparkline: {
11
        enabled: true,
12
      },
13
      group: "sparklines",
14
      fontFamily: "inherit",
15
      foreColor: "#adb0bb",
16
    },
17
    series: [
18
      {
19
        name: "Users",
20
        color: "var(--bs-secondary)",
21
        data: [36, 45, 31, 47, 38, 43],
22
      },
23
    ],
24
    stroke: {
25
      curve: "smooth",
26
      width: 2,
27
    },
28
    fill: {
29
      type: "gradient",
30
      color: "var(--bs-secondary)",
31

32
      gradient: {
33
        shadeIntensity: 0,
34
        inverseColors: false,
35
        opacityFrom: 0.2,
36
        opacityTo: 0.1,
37
        stops: [100],
38
      },
39
    },
40

41
    markers: {
42
      size: 0,
43
    },
44
    tooltip: {
45
      theme: "dark",
46
      fixed: {
47
        enabled: true,
48
        position: "right",
49
      },
50
      x: {
51
        show: false,
52
      },
53
    },
54
  };
55
  new ApexCharts(document.querySelector("#users"), options).render();
56

57
  // -----------------------------------------------------------------------
58
  // Subscriptions
59
  // -----------------------------------------------------------------------
60

61
  var total_orders = {
62
    series: [
63
      {
64
        name: "Site A",
65
        data: [29, 52, 38, 47, 56, 41, 46],
66
      },
67
      {
68
        name: "Site B",
69
        data: [71, 71, 71, 71, 71, 71, 71],
70
      },
71
    ],
72
    chart: {
73
      fontFamily: "inherit",
74
      foreColor: "#adb0bb",
75
      type: "bar",
76
      height: 98,
77
      stacked: true,
78
      offsetX: -10,
79
      toolbar: {
80
        show: false,
81
      },
82
      sparkline: {
83
        enabled: true,
84
      },
85
    },
86
    colors: ["var(--bs-white)", "rgba(255,255,255,0.5)"],
87
    plotOptions: {
88
      bar: {
89
        horizontal: false,
90
        columnWidth: "26%",
91
        borderRadius: [3],
92
        borderRadiusApplication: "end",
93
        borderRadiusWhenStacked: "all",
94
      },
95
    },
96
    dataLabels: {
97
      enabled: false,
98
    },
99
    tooltip: {
100
      theme: "dark",
101
    },
102
    legend: {
103
      show: false,
104
    },
105
  };
106

107
  var chart_column_stacked = new ApexCharts(
108
    document.querySelector("#subscriptions"),
109
    total_orders
110
  );
111
  chart_column_stacked.render();
112

113
  // -----------------------------------------------------------------------
114
  // Subscriptions
115
  // -----------------------------------------------------------------------
116
  var chart = {
117
    series: [
118
      {
119
        name: "2024",
120
        data: [1.2, 2.7, 1, 3.6, 2.1, 2.7, 2.2, 1.3, 2.5],
121
      },
122
      {
123
        name: "2023",
124
        data: [-2.8, -1.1, -2.5, -1.5, -2.3, -1.9, -1, -2.1, -1.3],
125
      },
126
    ],
127
    chart: {
128
      toolbar: {
129
        show: false,
130
      },
131
      type: "bar",
132
      fontFamily: "inherit",
133
      foreColor: "#adb0bb",
134
      height: 295,
135
      stacked: true,
136
      offsetX: -15,
137
    },
138
    colors: ["var(--bs-primary)", "var(--bs-danger)"],
139
    plotOptions: {
140
      bar: {
141
        horizontal: false,
142
        barHeight: "60%",
143
        columnWidth: "15%",
144
        borderRadius: [6],
145
        borderRadiusApplication: "end",
146
        borderRadiusWhenStacked: "all",
147
      },
148
    },
149
    dataLabels: {
150
      enabled: false,
151
    },
152
    legend: {
153
      show: false,
154
    },
155
    grid: {
156
      show: true,
157
      padding: {
158
        top: 0,
159
        bottom: 0,
160
        right: 0,
161
      },
162
      borderColor: "rgba(0,0,0,0.05)",
163
      xaxis: {
164
        lines: {
165
          show: true,
166
        },
167
      },
168
      yaxis: {
169
        lines: {
170
          show: true,
171
        },
172
      },
173
    },
174
    yaxis: {
175
      min: -5,
176
      max: 5,
177
    },
178
    xaxis: {
179
      axisBorder: {
180
        show: false,
181
      },
182
      axisTicks: {
183
        show: false,
184
      },
185
      categories: [
186
        "Jan",
187
        "Feb",
188
        "Mar",
189
        "Apr",
190
        "May",
191
        "Jun",
192
        "July",
193
        "Aug",
194
        "Sep",
195
      ],
196
      labels: {
197
        style: { fontSize: "13px", colors: "#adb0bb", fontWeight: "400" },
198
      },
199
    },
200
    yaxis: {
201
      tickAmount: 4,
202
    },
203
    tooltip: {
204
      theme: "dark",
205
    },
206
  };
207

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

214
  // -----------------------------------------------------------------------
215
  // Annual Profit
216
  // -----------------------------------------------------------------------
217
  var options = {
218
    chart: {
219
      id: "annual-profit",
220
      type: "area",
221
      height: 80,
222
      sparkline: {
223
        enabled: true,
224
      },
225
      group: "sparklines",
226
      fontFamily: "inherit",
227
      foreColor: "#adb0bb",
228
    },
229
    series: [
230
      {
231
        name: "Users",
232
        color: "var(--bs-primary)",
233
        data: [25, 66, 20, 40, 12, 58, 20],
234
      },
235
    ],
236
    stroke: {
237
      curve: "smooth",
238
      width: 2,
239
    },
240
    fill: {
241
      type: "gradient",
242
      color: "var(--bs-primary)",
243

244
      gradient: {
245
        shadeIntensity: 0,
246
        inverseColors: false,
247
        opacityFrom: 0.1,
248
        opacityTo: 0.1,
249
        stops: [100],
250
      },
251
    },
252

253
    markers: {
254
      size: 0,
255
    },
256
    tooltip: {
257
      theme: "dark",
258
      fixed: {
259
        enabled: true,
260
        position: "right",
261
      },
262
      x: {
263
        show: false,
264
      },
265
    },
266
  };
267
  new ApexCharts(document.querySelector("#annual-profit"), options).render();
268

269
  // -----------------------------------------------------------------------
270
  // Total Income
271
  // -----------------------------------------------------------------------
272
  var customers = {
273
    chart: {
274
      id: "sparkline3",
275
      type: "line",
276
      fontFamily: "inherit",
277
      foreColor: "#adb0bb",
278
      height: 60,
279
      sparkline: {
280
        enabled: true,
281
      },
282
      group: "sparklines",
283
    },
284
    series: [
285
      {
286
        name: "Income",
287
        color: "var(--bs-danger)",
288
        data: [30, 25, 35, 20, 30, 40],
289
      },
290
    ],
291
    stroke: {
292
      curve: "smooth",
293
      width: 2,
294
    },
295
    markers: {
296
      size: 0,
297
    },
298
    tooltip: {
299
      theme: "dark",
300
      fixed: {
301
        enabled: true,
302
        position: "right",
303
      },
304
      x: {
305
        show: false,
306
      },
307
    },
308
  };
309
  new ApexCharts(document.querySelector("#total-income"), customers).render();
310

311
  // -----------------------------------------------------------------------
312
  // Weekly Scheduels
313
  // -----------------------------------------------------------------------
314
  var weekly = {
315
    series: [
316
      {
317
        data: [
318
          {
319
            x: "Sun",
320
            y: [
321
              new Date("2024-02-27").getTime(),
322
              new Date("2024-03-04").getTime(),
323
            ],
324
            fillColor: "var(--bs-primary)",
325
          },
326
          {
327
            x: "Mon",
328
            y: [
329
              new Date("2024-03-04").getTime(),
330
              new Date("2024-03-10").getTime(),
331
            ],
332
            fillColor: "var(--bs-muted)",
333
          },
334
          {
335
            x: "Tue",
336
            y: [
337
              new Date("2024-03-01").getTime(),
338
              new Date("2024-03-06").getTime(),
339
            ],
340
            fillColor: "var(--bs-danger)",
341
          },
342
        ],
343
      },
344
    ],
345
    chart: {
346
      id: "sparkline3",
347
      type: "rangeBar",
348
      fontFamily: "inherit",
349
      foreColor: "#adb0bb",
350
      height: 300,
351
      toolbar: {
352
        show: false,
353
      },
354
    },
355
    plotOptions: {
356
      bar: {
357
        horizontal: true,
358
        distributed: true,
359
        dataLabels: {
360
          hideOverflowingLabels: false,
361
        },
362
      },
363
    },
364
    dataLabels: {
365
      enabled: true,
366
      background: {
367
        borderRadius: 20,
368
      },
369
      formatter: function (val, opts) {
370
        var label = opts.w.globals.labels[opts.dataPointIndex];
371
        var a = moment(val[0]);
372
        var b = moment(val[1]);
373

374
        return label + ": " + "Meeting with Sunil";
375
      },
376
    },
377
    xaxis: {
378
      type: "datetime",
379
      axisBorder: {
380
        show: false,
381
      },
382
      axisTicks: {
383
        show: false,
384
      },
385
      labels: {
386
        style: { fontSize: "13px", colors: "#adb0bb", fontWeight: "400" },
387
      },
388
    },
389
    yaxis: {
390
      axisBorder: {
391
        show: false,
392
      },
393
      axisTicks: {
394
        show: false,
395
      },
396
      labels: {
397
        style: { fontSize: "13px", colors: "#adb0bb", fontWeight: "400" },
398
      },
399
    },
400
    grid: {
401
      borderColor: "rgba(0,0,0,0.05)",
402
    },
403
    tooltip: {
404
      theme: "dark",
405
    },
406
  };
407
  new ApexCharts(document.querySelector("#weekly-schedules"), weekly).render();
408

409
  // -----------------------------------------------------------------------
410
  // This is for the map
411
  // -----------------------------------------------------------------------
412

413
  $("#usa").vectorMap({
414
    map: "us_aea_en",
415
    backgroundColor: "transparent",
416
    zoomOnScroll: false,
417
    regionStyle: {
418
      initial: {
419
        fill: "#D1DBE5",
420
      },
421
    },
422
    markers: [
423
      {
424
        latLng: [40.71, -74.0],
425
        name: "Newyork",
426
        style: { fill: "#14e9e2" },
427
      },
428
      {
429
        latLng: [30.51, -91.52],
430
        name: "Louisiana",
431
        style: { fill: "#1e88e5" },
432
      },
433
      {
434
        latLng: [39.01, -98.48],
435
        name: "Kansas",
436
        style: { fill: "#ffd648" },
437
      },
438
      {
439
        latLng: [34.04, -111.09],
440
        name: "Arizona ",
441
        style: { fill: "#ff6692" },
442
      },
443
    ],
444
  });
445

446
  // =====================================
447
  // Weekly Stats
448
  // =====================================
449
  var options = {
450
    series: [
451
      {
452
        name: "Weekly Stats",
453
        data: [20, 15, 18, 25, 10, 15, 20],
454
      },
455
    ],
456

457
    chart: {
458
      toolbar: {
459
        show: false,
460
      },
461

462
      height: 220,
463
      type: "bar",
464
      offsetX: -30,
465
      fontFamily: "inherit",
466
      foreColor: "#adb0bb",
467
    },
468
    colors: [
469
      "var(--bs-gray-100)",
470
      "var(--bs-gray-100)",
471
      "var(--bs-gray-100)",
472
      "var(--bs-primary)",
473
      "var(--bs-gray-100)",
474
      "var(--bs-gray-100)",
475
      "var(--bs-gray-100)",
476
    ],
477
    plotOptions: {
478
      bar: {
479
        borderRadius: 5,
480
        columnWidth: "55%",
481
        distributed: true,
482
        endingShape: "rounded",
483
      },
484
    },
485

486
    dataLabels: {
487
      enabled: false,
488
    },
489
    legend: {
490
      show: false,
491
    },
492
    grid: {
493
      yaxis: {
494
        lines: {
495
          show: false,
496
        },
497
      },
498
      xaxis: {
499
        lines: {
500
          show: false,
501
        },
502
      },
503
    },
504
    xaxis: {
505
      categories: [
506
        ["Apr"],
507
        ["May"],
508
        ["June"],
509
        ["July"],
510
        ["Aug"],
511
        ["Sept"],
512
        ["Oct"],
513
      ],
514
      axisBorder: {
515
        show: false,
516
      },
517
      axisTicks: {
518
        show: false,
519
      },
520
    },
521
    yaxis: {
522
      labels: {
523
        show: false,
524
      },
525
    },
526
    tooltip: {
527
      theme: "dark",
528
    },
529
  };
530

531
  var chart = new ApexCharts(document.querySelector("#weekly-stats"), options);
532
  chart.render();
533
});
534