Skip to content

Commit e7b5ef7

Browse files
snykksnykk
committed
dashboard chart
1 parent 878f6fa commit e7b5ef7

File tree

8 files changed

+281
-109
lines changed

8 files changed

+281
-109
lines changed

‎public/js/chart-area.js

-54
This file was deleted.

‎public/js/chart-bar.js

-46
This file was deleted.

‎public/js/profits_chart.js

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
Chart.defaults.global.defaultFontFamily =
2+
'-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
3+
Chart.defaults.global.defaultFontColor = "#292b2c";
4+
5+
$(window).on("load", function () {
6+
$.ajax({
7+
url: "/chart/profits_chart",
8+
method: "get",
9+
dataType: "json",
10+
success: function (response) {
11+
console.log(response);
12+
13+
var response_length = response["data"].length;
14+
var begin = new Date(response["six_month_ago"]);
15+
var end = new Date(response["now"]);
16+
17+
month_list = [];
18+
montly_profit = [];
19+
20+
var month_iterate = new Date(begin);
21+
22+
while (month_iterate <= end) {
23+
is_get = false;
24+
let month = month_iterate.getMonth();
25+
26+
for (let i = 0; i < response_length; i++) {
27+
let month_selected = new Date(
28+
response["data"][i]["date"]
29+
).getMonth();
30+
if (month == month_selected) {
31+
montly_profit.push(
32+
parseInt(response["data"][i]["profits"])
33+
);
34+
is_get = true;
35+
}
36+
}
37+
if (!is_get) {
38+
montly_profit.push(0);
39+
}
40+
41+
let m = month_iterate.toLocaleString("default", {
42+
month: "long",
43+
});
44+
month_list.push(`${m}`);
45+
46+
var newMonth = month_iterate.setMonth(
47+
month_iterate.getMonth() + 1
48+
);
49+
newMonth = new Date(newMonth);
50+
}
51+
52+
var ctx = document.getElementById("profits_chart");
53+
new Chart(ctx, {
54+
type: "bar",
55+
data: {
56+
labels: month_list,
57+
datasets: [
58+
{
59+
label: "Profit",
60+
backgroundColor: "rgba(2,117,216,1)",
61+
borderColor: "rgba(2,117,216,1)",
62+
data: montly_profit,
63+
},
64+
],
65+
},
66+
options: {
67+
scales: {
68+
xAxes: [
69+
{
70+
time: {
71+
unit: "month",
72+
},
73+
gridLines: {
74+
display: false,
75+
},
76+
ticks: {
77+
maxTicksLimit: 6,
78+
},
79+
},
80+
],
81+
yAxes: [
82+
{
83+
ticks: {
84+
min:
85+
Math.min.apply(Math, montly_profit) < 0
86+
? Math.min.apply(
87+
Math,
88+
montly_profit
89+
) * 1.3
90+
: 0,
91+
max:
92+
Math.max.apply(Math, montly_profit) *
93+
1.3,
94+
maxTicksLimit: 8,
95+
},
96+
gridLines: {
97+
display: true,
98+
},
99+
},
100+
],
101+
},
102+
legend: {
103+
display: false,
104+
},
105+
},
106+
});
107+
},
108+
});
109+
});

‎public/js/sales_chart.js

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
// Set new default font family and font color to mimic Bootstrap's default styling
2+
Chart.defaults.global.defaultFontFamily =
3+
'-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
4+
Chart.defaults.global.defaultFontColor = "#292b2c";
5+
6+
$(window).on("load", function () {
7+
$.ajax({
8+
url: "/chart/sales_chart",
9+
method: "get",
10+
dataType: "json",
11+
success: function (response) {
12+
// buat data
13+
var response_length = response["data"].length;
14+
15+
var begin = new Date(response["one_week_ago"]);
16+
var end = new Date(response["now"]);
17+
18+
weekly_sale_date = []; //sales date
19+
weekly_sale_data = []; // sales amount
20+
var day_iterate = new Date(begin);
21+
22+
while (day_iterate <= end) {
23+
is_get = false;
24+
let date = day_iterate.getDate();
25+
26+
for (let i = 0; i < response_length; i++) {
27+
if (date == response["data"][i]["day"]) {
28+
weekly_sale_data.push(
29+
parseInt(response["data"][i]["sales_total"])
30+
);
31+
is_get = true;
32+
}
33+
}
34+
35+
let month = day_iterate.toLocaleString("default", {
36+
month: "short",
37+
});
38+
weekly_sale_date.push(`${month} ${date}`);
39+
40+
if (!is_get) {
41+
weekly_sale_data.push(0);
42+
}
43+
44+
var newDate = day_iterate.setDate(day_iterate.getDate() + 1);
45+
day_iterate = new Date(newDate);
46+
}
47+
48+
var ctx = document.getElementById("sales_chart");
49+
new Chart(ctx, {
50+
type: "line",
51+
data: {
52+
labels: weekly_sale_date,
53+
datasets: [
54+
{
55+
label: "kuantitas",
56+
lineTension: 0.3,
57+
backgroundColor: "rgba(2,117,216,0.2)",
58+
borderColor: "rgba(2,117,216,1)",
59+
pointRadius: 5,
60+
pointBackgroundColor: "rgba(2,117,216,1)",
61+
pointBorderColor: "rgba(255,255,255,0.8)",
62+
pointHoverRadius: 5,
63+
pointHoverBackgroundColor: "rgba(2,117,216,1)",
64+
pointHitRadius: 50,
65+
pointBorderWidth: 2,
66+
data: weekly_sale_data,
67+
},
68+
],
69+
},
70+
options: {
71+
scales: {
72+
xAxes: [
73+
{
74+
time: {
75+
unit: "date",
76+
},
77+
gridLines: {
78+
display: false,
79+
},
80+
ticks: {
81+
maxTicksLimit: 7,
82+
},
83+
},
84+
],
85+
yAxes: [
86+
{
87+
ticks: {
88+
min: 0,
89+
max:
90+
Math.max.apply(Math, weekly_sale_data) *
91+
1.2,
92+
maxTicksLimit: 8,
93+
},
94+
gridLines: {
95+
color: "rgba(0, 0, 0, .125)",
96+
},
97+
},
98+
],
99+
},
100+
legend: {
101+
display: false,
102+
},
103+
},
104+
});
105+
},
106+
});
107+
});

‎resources/views/home/index.blade.php

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
11
@extends('/layouts/main')
22

3-
@section('content')
4-
53
@push('css-dependencies')
64
<link rel="stylesheet" type="text/css" href="/css/home.css" />
75
@endpush
86

7+
@can('is_admin')
8+
@push('scripts-dependencies')
9+
<script src="/js/sales_chart.js"></script>
10+
<script src="/js/profits_chart.js"></script>
11+
@endpush
12+
@endcan
13+
14+
@section('content')
15+
916
<div class="mx-3">
1017
@if(session()->has('message'))
1118
{!! session("message") !!}

‎resources/views/layouts/main.blade.php

-3
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,6 @@
4141
<script src="/js/datatables-simple.js"></script>
4242

4343
<script src="/js/scripts.js"></script>
44-
<script src="/js/chart-area.js"></script>
45-
<script src="/js/chart-bar.js"></script>
46-
4744
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
4845

4946
@stack('scripts-dependencies')

‎resources/views/partials/home/home_admin.blade.php

+4-4
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,18 @@
4646
<div class="card mb-4">
4747
<div class="card-header">
4848
<i class="fas fa-chart-area me-1"></i>
49-
Area Chart Example
49+
Sales Chart
5050
</div>
51-
<div class="card-body"><canvas id="myAreaChart" width="100%" height="40"></canvas></div>
51+
<div class="card-body"><canvas id="sales_chart" width="100%" height="40"></canvas></div>
5252
</div>
5353
</div>
5454
<div class="col-xl-6">
5555
<div class="card mb-4">
5656
<div class="card-header">
5757
<i class="fas fa-chart-bar me-1"></i>
58-
Bar Chart Example
58+
Profits Chart
5959
</div>
60-
<div class="card-body"><canvas id="myBarChart" width="100%" height="40"></canvas></div>
60+
<div class="card-body"><canvas id="profits_chart" width="100%" height="40"></canvas></div>
6161
</div>
6262
</div>
6363
</div>

0 commit comments

Comments
 (0)