[IMP] awesome_dashboard: added Chart and made dashboard lazyload.

  created service to load rpc call and load rpc data.
  added interval for rpc call to refresh data every 10 minuets.
  added Chart to show t-shirt size in chart view.
  load dashboard as lazy-loading by register that Component to lazy-components.

Author: danal-odoo

.gitignore

@@ -127,3 +127,10 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+.eslintignore
+.eslintrc.json
+jsconfig.json
+package.json
+package-lock.json
+node_modules/

awesome_dashboard/__manifest__.py

@@ -25,6 +25,9 @@
         'web.assets_backend': [
             'awesome_dashboard/static/src/**/*',
         ],
+        'awesome_dashboard.dashboard': [
+            'awesome_dashboard/static/src/dashboard/**/*',
+        ],
     },
     'license': 'AGPL-3'
 }

awesome_dashboard/static/dashboard.png

@@ -1,19 +1,18 @@
-import { Component, onWillStart } from "@odoo/owl";
+import { Component, useState } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks";
 import { DashboardItem } from "./dashboarditem/dashboarditem";
-import { rpc } from "@web/core/network/rpc";
+import { PieChart } from "./piechart/piechart";
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout, DashboardItem }
+    static components = { Layout, DashboardItem, PieChart }
 
     setup() {
         this.action = useService("action");
-        onWillStart(async () => {
-            this.result = await rpc("/awesome_dashboard/statistics");
-        })
+        const statisticsService = useService("awesome_dashboard.statistics");
+        this.statistics = useState(statisticsService.state);
     }
 
     openCustomers() {
@@ -42,4 +41,4 @@ class AwesomeDashboard extends Component {
     }
 }
 
-registry.category("actions").add("awesome_dashboard.dashboard", AwesomeDashboard);
+registry.category("lazy_components").add("awesome_dashboard.AwesomeDashboard", AwesomeDashboard);

awesome_dashboard/static/src/dashboard.js renamed to awesome_dashboard/static/src/dashboard/dashboard.js

@@ -15,31 +15,37 @@
                 <DashboardItem>
                     <div class="text-center">
                         Number of new orders this month
-                        <p t-out="this.result.nb_new_orders" class="fs-1 fw-bold text-success"/>
+                        <p t-out="this.statistics.data.nb_new_orders" class="fs-1 fw-bold text-success"/>
                     </div>
                 </DashboardItem>
                 <DashboardItem>
                     <div class="text-center">
                         Total amount of new orders this month
-                        <p t-out="this.result.total_amount" class="fs-1 fw-bold text-success"/>
+                        <p t-out="this.statistics.data.total_amount" class="fs-1 fw-bold text-success"/>
                     </div>
                 </DashboardItem>
                 <DashboardItem>
                     <div class="text-center">
                     Average amount of t-shirt by order this month
-                        <p t-out="this.result.average_quantity" class="fs-1 fw-bold text-success"/>
+                        <p t-out="this.statistics.data.average_quantity" class="fs-1 fw-bold text-success"/>
                     </div>
                 </DashboardItem>
                 <DashboardItem>
                     <div class="text-center">
                     Number of cancelled orders this month
-                        <p t-out="this.result.nb_cancelled_orders" class="fs-1 fw-bold text-success"/>
+                        <p t-out="this.statistics.data.nb_cancelled_orders" class="fs-1 fw-bold text-success"/>
                     </div>
                 </DashboardItem>
                 <DashboardItem>
+                    <div class="text-center">
+                    Shirt order by size
+                        <PieChart items="this.statistics.data.orders_by_size"/>
+                    </div>
+                </DashboardItem>
+                <DashboardItem> 
                     <div class="text-center">
                     Average time for an order to go from ‘new’ to ‘sent’ or ‘cancelled’
-                        <p t-out="this.result.average_time" class="fs-1 fw-bold text-success"/>
+                        <p t-out="this.statistics.data.average_time" class="fs-1 fw-bold text-success"/>
                     </div>
                 </DashboardItem>
             </div>

awesome_dashboard/static/src/dashboard.scss renamed to awesome_dashboard/static/src/dashboard/dashboard.scss

@@ -1,10 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
+
     <t t-name="awesome_dashboard.DashboardItem">
-        <div class="card m-2" t-attf-style="width: {{ 18 * props.size }}rem; border-radius: 16px;">
+        <div class="card m-2" t-attf-style="width: {{ 18 * props.size }}rem; border-radius: 16px; height: fit-content;">
             <div class="card-body">
                 <t t-slot="default"/>
             </div>
         </div>
     </t>
+
 </templates>

awesome_dashboard/static/src/dashboard.xml renamed to awesome_dashboard/static/src/dashboard/dashboard.xml

@@ -0,0 +1,76 @@
+import { Component, onWillStart, onPatched, useRef, onMounted } from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.PieChart";
+    static props = {
+        items: {
+            type: Object,
+            optional: true,
+            default: () => ({}),
+        },
+    }
+
+    setup() {
+        this.chartRef = useRef("pie-canvas");
+        this.myPieChart = null;
+
+        onWillStart(async () => {
+            await loadJS("/web/static/lib/Chart/Chart.js");
+        });
+
+        onMounted(() => {
+            this.renderChart()
+        });
+
+        onPatched(() => {
+            this.renderChart()
+        });
+    }
+
+    renderChart() {
+        if (!this.chartRef.el) {
+            return;
+        }
+
+        if (this.myPieChart) {
+            this.myPieChart.destroy();
+        }
+
+        this.pieChartData = {
+            labels: ['M', 'S', 'XL'],
+            datasets: [{
+                label: 'Sales Count',
+                data: [this.props.items.m, this.props.items.s, this.props.items.xl],
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.6)',
+                    'rgba(54, 162, 235, 0.6)',
+                    'rgba(255, 206, 86, 0.6)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)'
+                ],
+                borderWidth: 1
+            }]
+        };
+
+        this.pieChartOptions = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'top',
+                }
+            }
+        };
+
+        this.myPieChart = new Chart(this.chartRef.el,
+            {
+                type: 'pie',
+                data: this.pieChartData,
+                options: this.pieChartOptions
+            });
+    }
+}

awesome_dashboard/static/src/dashboarditem/dashboarditem.js renamed to awesome_dashboard/static/src/dashboard/dashboarditem/dashboarditem.js

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.PieChart">
+        <div class="card-body">
+            <canvas t-ref="pie-canvas" class="o_pie_chart_canvas"/>
+        </div>
+    </t>
+
+</templates>