ch2.6 ~JS deserve to burn in hell~ Display a pie chart

awesome_dashboard/static/src/dashboard.js

@@ -5,10 +5,11 @@ import { registry } from "@web/core/registry";
 import { Layout } from "@web/search/layout";
 import { useService } from "@web/core/utils/hooks"
 import { DashboardItem } from "./dashboard_item";
+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.display = {

awesome_dashboard/static/src/dashboard.xml

@@ -2,19 +2,6 @@
 <templates xml:space="preserve">
 
     <t t-name="awesome_dashboard.AwesomeDashboard">
-
-
-   
-
-    Total amount of new orders this month
-
-    
-
-    
-
-    
-
-
         <Layout display="display" className="'o_dashboard h-100'">
             <t t-set-slot="layout-buttons">
                 <button class="btn btn-primary" t-on-click="openCustomers">Customers</button>
@@ -51,6 +38,10 @@
                         <t t-out="stats.average_time"/>
                     </div>
                 </DashboardItem>
+                <DashboardItem size='4'> 
+                    Shirt orders by size
+                    <Piechart data="stats.orders_by_size" label="'Shirt orders by size'"/>
+                </DashboardItem>
             </div>
         </Layout>
     </t>

awesome_dashboard/static/src/piechart/piechart.js

@@ -0,0 +1,45 @@
+/** @odoo-module **/
+
+import { loadJS } from "@web/core/assets";
+import { getColor } from "@web/core/colors/colors";
+import { Component, onWillStart, useRef, onMounted, onWillUnmount } from "@odoo/owl";
+
+export class Piechart extends Component {
+    static template = "awesome_dashboard.Piechart";
+    static props = {
+        label: String,
+        data: Object,
+    };
+
+    setup() {
+        this.canvasRef = useRef("canvas");
+        onWillStart(() => loadJS(["/web/static/lib/Chart/Chart.js"]));
+        onMounted(() => {
+            this.renderChart();
+        });
+        onWillUnmount(() => {
+            this.chart.destroy();
+        });
+    }
+
+    renderChart() {
+        const labels = Object.keys(this.props.data);
+        const data = Object.values(this.props.data);
+        const color = labels.map((_, index) => getColor(index));
+        this.chart = new Chart(this.canvasRef.el, {
+            type: "pie",
+            data: {
+                labels: labels,
+                datasets: [
+                    {
+                        label: this.props.label,
+                        data: data,
+                        backgroundColor: color,
+                    },
+                ],
+            },
+        });
+    }
+    
+
+}

awesome_dashboard/static/src/piechart/piechart.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+
+    <t t-name="awesome_dashboard.Piechart">
+        <div t-att-class="'h-100 ' + props.class" t-ref="root">
+            <div class="h-100 position-relative" t-ref="container">
+                <canvas t-ref="canvas" />
+            </div>
+        </div>
+    </t>
+</templates>