Skip to content

Commit 33a674e

Browse files
yagho-odooyagho-odoo
committed
[IMP] awesome_dashboard: added a pie chart and refresh data every 30 seconds
1 parent 6056586 commit 33a674e

File tree

6 files changed

+118
-34
lines changed

6 files changed

+118
-34
lines changed

‎awesome_dashboard/static/src/dashboard.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
/** @odoo-module **/
22

3-
import { Component, onWillStart } from "@odoo/owl";
3+
import { Component, useState } from "@odoo/owl";
44
import { registry } from "@web/core/registry";
55
import { Layout } from "@web/search/layout";
66
import { useService } from "@web/core/utils/hooks";
77
import { DashboardItem } from "./dashboard_item/dashboard_item";
8+
import { PieChart } from "./pie_chart/pie_chart";
89

910
class AwesomeDashboard extends Component {
1011
static template = "awesome_dashboard.AwesomeDashboard";
1112
static components = {
1213
Layout,
13-
DashboardItem
14+
DashboardItem,
15+
PieChart
1416
};
1517

1618
static props = {
@@ -21,11 +23,7 @@ class AwesomeDashboard extends Component {
2123

2224
setup() {
2325
this.action = useService("action");
24-
const statsService = useService("awesome_dashboard.getStats");
25-
26-
onWillStart(async () => {
27-
this.result = await statsService.loadStatistics();
28-
});
26+
this.result = useState(useService("awesome_dashboard.getStats"));
2927
}
3028

3129
openCustomerKanban() {

‎awesome_dashboard/static/src/dashboard.xml‎

Lines changed: 51 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,61 @@
66
<Layout className="'o_dashboard h-100'" display="props.display">
77
<button class="btn btn-primary myBtnChange" t-on-click="openCustomerKanban"> Open customer kanban </button>
88
<button class="btn btn-primary myBtnChange" t-on-click="openActivity"> Leads </button>
9-
<div style="margin-left: 1rem;">
10-
<DashboardItem size="2"> Average quantity sold is :
11-
<span style="color: green; font-weight: bolder; font-size: 27px;">
12-
<t t-esc="result.average_quantity"/>
13-
</span>
9+
<div style="margin-left: 1rem;display: flex;">
10+
<DashboardItem size="2">
11+
<div style="margin-top: 30%">
12+
<div style="font-size: 200%; text-align: center;">
13+
Average quantity sold is :
14+
</div>
15+
<div style="color: green; font-weight: bolder; font-size: 55px; text-align: center;">
16+
<t t-esc="result.average_quantity"/>
17+
</div>
18+
</div>
1419
</DashboardItem>
15-
<DashboardItem size="2"> Number of new orders this month :
16-
<span style="color: green; font-weight: bolder; font-size: 27px;">
17-
<t t-esc="result.nb_new_orders"/>
18-
</span>
20+
<DashboardItem size="2">
21+
<div style="margin-top: 30%">
22+
<div style="font-size: 200%; text-align: center;">
23+
Number of new orders this month :
24+
</div>
25+
<div style="color: green; font-weight: bolder; font-size: 55px; text-align: center;">
26+
<t t-esc="result.nb_new_orders"/>
27+
</div>
28+
</div>
1929
</DashboardItem>
20-
<DashboardItem size="2"> Total amount of new orders this month :
21-
<span style="color: green; font-weight: bolder; font-size: 27px;">
22-
<t t-esc="result.total_amount"/>
23-
</span>
30+
<DashboardItem size="2">
31+
<div style="margin-top: 30%">
32+
<div style="font-size: 200%; text-align: center;">
33+
Total amount of new orders this month :
34+
</div>
35+
<div style="color: green; font-weight: bolder; font-size: 55px; text-align: center;">
36+
<t t-esc="result.total_amount"/>
37+
</div>
38+
</div>
2439
</DashboardItem>
25-
<DashboardItem size="2"> Number of cancelled orders this month :
26-
<span style="color: green; font-weight: bolder; font-size: 27px;">
27-
<t t-esc="result.nb_cancelled_orders"/>
28-
</span>
40+
<DashboardItem size="2">
41+
<div style="margin-top: 30%">
42+
<div style="font-size: 200%; text-align: center;">
43+
Number of cancelled orders this month :
44+
</div>
45+
<div style="color: green; font-weight: bolder; font-size: 55px; text-align: center;">
46+
<t t-esc="result.nb_cancelled_orders"/>
47+
</div>
48+
</div>
2949
</DashboardItem>
30-
<DashboardItem size="2"> Average time for an order :
31-
<span style="color: green; font-weight: bolder; font-size: 27px;">
32-
<t t-esc="result.average_time"/>
33-
</span>
50+
<DashboardItem size="2">
51+
<div style="margin-top: 30%">
52+
<div style="font-size: 200%; text-align: center;">
53+
Average time for an order :
54+
</div>
55+
<div style="color: green; font-weight: bolder; font-size: 55px; text-align: center;">
56+
<t t-esc="result.average_time"/>
57+
</div>
58+
</div>
59+
</DashboardItem>
60+
61+
<DashboardItem size="2">
62+
Shirt orders by size
63+
<PieChart data="result['orders_by_size']" label="'Shirt orders by size'"/>
3464
</DashboardItem>
3565
</div>
3666
</Layout>

‎awesome_dashboard/static/src/dashboard_item/dashboard_item.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<templates xml:space="preserve">
33

44
<t t-name="awesome_dashboard.DashboardItem">
5-
<span class="p-3 box" t-att-style="'width: ' + 18 * props.size + 'rem;'">
5+
<div class="p-3 box" t-att-style="'width: ' + 18 * props.size + 'rem;'">
66
<t t-slot="default" />
7-
</span>
7+
</div>
88
</t>
99

1010
</templates>

‎awesome_dashboard/static/src/get_statistics.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import { registry } from "@web/core/registry";
22
import { rpc } from "@web/core/network/rpc";
3-
import { memoize } from "@web/core/utils/functions";
3+
import { reactive } from "@odoo/owl";
44

55
export const getStatistics = {
66
async start() {
7-
return {
8-
loadStatistics: memoize(() => rpc("/awesome_dashboard/statistics")),
9-
};
7+
const statistics = reactive({ isReady: false });
8+
9+
async function loadData() {
10+
const updates = await rpc("/awesome_dashboard/statistics");
11+
Object.assign(statistics, updates, { isReady: true });
12+
}
13+
14+
setInterval(loadData, 30*1000);
15+
loadData();
16+
17+
return statistics;
1018
},
1119
};
1220

‎awesome_dashboard/static/src/pie_chart/pie_chart.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Component, onWillStart, useRef, onMounted, useState } from "@odoo/owl";
2+
import { loadJS } from "@web/core/assets";
3+
4+
export class PieChart extends Component {
5+
static template = "awesome_dashboard.PieChart";
6+
7+
static props = {
8+
label: String,
9+
data: Object,
10+
};
11+
12+
setup() {
13+
this.canvasRef = useRef("canvas");
14+
onWillStart(() => loadJS("/web/static/lib/Chart/Chart.js"));
15+
onMounted(() => {
16+
this.renderChart();
17+
});
18+
}
19+
20+
renderChart() {
21+
const labels = Object.keys(this.props.data);
22+
const data = Object.values(this.props.data);
23+
this.chart = new Chart(this.canvasRef.el, {
24+
type: "pie",
25+
data: {
26+
labels: labels,
27+
datasets: [
28+
{
29+
label: this.props.label,
30+
data: data,
31+
},
32+
],
33+
},
34+
});
35+
}
36+
}

‎awesome_dashboard/static/src/pie_chart/pie_chart.xml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<templates xml:space="preserve">
3+
4+
<t t-name="awesome_dashboard.PieChart">
5+
<div t-att-class="'h-100 ' + props.class" t-ref="root">
6+
<div class="h-100 position-relative" t-ref="container">
7+
<canvas t-ref="canvas" />
8+
</div>
9+
</div>
10+
</t>
11+
12+
</templates>

0 commit comments

Comments
 (0)