[IMP] awesome_dashboard: Add pie chart

Author: nguyenntph

awesome_dashboard/static/src/dashboard.js

@@ -3,10 +3,11 @@ import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
 import { Layout } from "@web/search/layout";
 import { DashboardItem } from "./dashboard_item/dashboard_item";
+import { PieChart } from './pie_chart/pie_chart';
 
 class AwesomeDashboard extends Component {
     static template = "awesome_dashboard.AwesomeDashboard";
-    static components = { Layout, DashboardItem };
+    static components = { Layout, DashboardItem, PieChart };
 
     setup() {
         this.action = useService("action");

awesome_dashboard/static/src/dashboard.xml

@@ -14,7 +14,7 @@
                     Leads
                 </button>
             </t>
-            <div>
+            <div class="d-flex">
               <DashboardItem>
                   Average amount of t-shirt by order this month
                   <t t-set-slot="value" t-esc="statistics.average_quantity"/>
@@ -28,7 +28,7 @@
                   <t t-set-slot="value" t-esc="statistics.nb_new_orders"/>
               </DashboardItem>
             </div>
-            <div>
+            <div class="d-flex align-items-start">
               <DashboardItem>
                   Number of cancelled orders this month
                   <t t-set-slot="value" t-esc="statistics.nb_cancelled_orders"/>
@@ -37,6 +37,12 @@
                   Total amount of new orders this month
                   <t t-set-slot="value" t-esc="statistics.total_amount"/>
               </DashboardItem>
+              <DashboardItem size="2">
+                  Shirt orders by size
+                  <t t-set-slot="value">
+                      <PieChart data="statistics.orders_by_size"/>
+                  </t>
+              </DashboardItem>
             </div>
         </Layout>
     </t>

awesome_dashboard/static/src/dashboard_item/dashboard_item.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.DashboardItem">
-        <div class="card d-inline-block m-2" t-attf-style="width: {{props.size*18}}rem;">
+        <div class="card d-inline-block m-4" t-attf-style="width: {{props.size*18}}rem;">
             <div class="card-body text-center">
                 <div class="card-title">
                     <h5>

awesome_dashboard/static/src/pie_chart/pie_chart.js

@@ -0,0 +1,61 @@
+import {
+    Component,
+    onWillStart,
+    onWillUnmount,
+    useRef,
+    useEffect,
+} from "@odoo/owl";
+import { loadJS } from "@web/core/assets";
+
+export class PieChart extends Component {
+    static template = "awesome_dashboard.PieChart";
+    static props = { data: { optional: true } }
+
+    setup() {
+        this.rootRef = useRef("root");
+        this.canvasRef = useRef("canvas");
+        this.containerRef = useRef("container");
+
+        this.chart = null;
+        this.tooltip = null;
+        this.legendTooltip = null;
+
+        onWillStart(async () => {
+            await loadJS("/web/static/lib/Chart/Chart.js")
+        });
+
+        useEffect(() => {
+            this.renderChart();
+        });
+
+        onWillUnmount(this.onWillUnmount);
+    }
+
+    onWillUnmount() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+    }
+
+    renderChart() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+
+        const labels = Object.keys(this.props.data);
+        const values = Object.values(this.props.data);
+
+        const config = {
+            type: 'pie',
+            data: {
+                labels: labels,
+                datasets: [{
+                  label: "Orders by size",
+                  data: values,
+                }],
+            },
+        }
+
+        this.chart = new Chart(this.canvasRef.el, config);
+    }
+}

awesome_dashboard/static/src/pie_chart/pie_chart.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.PieChart">
+        <div t-ref="root">
+            <canvas t-ref="canvas"/>
+        </div>
+    </t>
+
+</templates>
+