[IMP] awesome_dashboard: add item list and pie chart in dashboard

add dashboard item which is number card and pie chart card
add lazy loading functionality for dashboard
making our dashboard generic
added functionality add and remove dashboard items

Author: utpat-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/description/icon.png

@@ -0,0 +1,21 @@
+import { Component } from "@odoo/owl";
+
+export class DashboardItem extends Component {
+    static template = "awesome_dashboard.DashboardItem";
+    static props = {
+        title: {
+            type: String,
+            optional: true
+        },
+        slots: {
+            type: Object,
+            shape: {
+                default: Object,
+            },
+        },
+        size: {
+            type: Number,
+            optional: true,
+        },
+    };
+}

awesome_dashboard/static/src/dashboard.js

@@ -0,0 +1,10 @@
+<?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 || 18 }}rem;">
+            <div class="card-body">
+                <t t-slot="default"/>
+            </div>
+        </div>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard.xml

@@ -0,0 +1,12 @@
+import { Component } from "@odoo/owl";
+
+export class NumberCard extends Component {
+    static template = "awesome_dashboard.NumberCard";
+    static props = {
+        title: {
+            type: String,
+            optional: true
+        },
+        value: Number,
+    };
+}

awesome_dashboard/static/src/dashboard/DashboardItem/dashboard_item.js

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<templates xml:space="preserve">
+    <t t-name="awesome_dashboard.NumberCard">
+        <h5 class="mb-0" t-esc="props.title"/>
+        <p class='fs-1 fw-bold text-success mb-0' t-esc="props.value"/>
+    </t>
+</templates>

awesome_dashboard/static/src/dashboard/DashboardItem/dashboard_item.xml

@@ -0,0 +1,68 @@
+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
+        });
+    }
+}