+
+
+
+
+
+
+
diff --git a/odoo_dynamic_dashboard/static/src/css/dynamic_dashboard.css b/odoo_dynamic_dashboard/static/src/css/dynamic_dashboard.css
new file mode 100644
index 000000000..3447b9dd6
--- /dev/null
+++ b/odoo_dynamic_dashboard/static/src/css/dynamic_dashboard.css
@@ -0,0 +1,344 @@
+.row {
+ margin: 1rem;
+}
+.resize-drag {
+ border-radius: 8px;
+ padding: 20px;
+ margin: 1rem;
+ color: white;
+ font-size: 20px;
+ font-family: sans-serif;
+
+ touch-action: none;
+ box-sizing: border-box;
+}
+
+.theme {
+ position: absolute;
+ right: 60.5em;
+ padding-top:inherit;
+}
+
+.card {
+ background-color: transparent !important;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ border-radius: 5px !important;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+.dashboard_pdf{
+ position: absolute;
+ right: 26.5em;
+ padding-top:inherit;
+}
+
+.dashboard_mail{
+ position: absolute;
+ right: 24.5em;
+ padding-top:inherit;
+}
+
+.resize-drag {
+ position: relative !important;
+ font-size: 100%;
+ overflow:hidden;
+}
+
+h2, h3 {
+ font-size: 150% !important;
+}
+
+.container {
+ max-width: 100% !important;
+}
+
+.tile {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ border-radius: 5px;
+ cursor: pointer;
+ transition: transform 0.2s;
+}
+
+div.card-header {
+ color: #383838;
+ background-color: #70659647 !important;
+}
+
+/* The toggle-btn - the box around the slider */
+.layout-switch {
+ font-size: 15px;
+ position: absolute;
+ left: 10.5em;
+ display: inline-block;
+ padding: 0 0 0 0;
+ border-radius: 0.5rem;
+}
+
+.modal-header .btn-close {
+ display: none;
+}
+
+.modal-title{
+ margin-inline-end: auto;
+}
+
+.theme-text {
+ font-family: Arial, sans-serif;
+ font-size: 1em;
+ opacity: 70%;
+}
+
+.search-group {
+ position: absolute;
+ right: 1.7em;
+}
+
+.block_setting {
+ position: absolute;
+ top: 7px;
+ left: 10px;
+}
+
+.block_delete {
+ position: absolute;
+ top: 7px;
+ right: 10px;
+}
+
+.tile_edit {
+ color: #d2d2d2;
+}
+
+.block_edit {
+ color: #3f3f3f;
+}
+
+.block_setting, .block_delete, .block_image, .block_pdf, .block_xlsx, .block_csv, .block_export {
+ display: none;
+}
+
+.resize-drag:hover .block_setting,
+.resize-drag:hover .block_xlsx,
+.resize-drag:hover .block_csv,
+.resize-drag:hover .block_image,
+.resize-drag:hover .block_pdf,
+.resize-drag:hover .block_export,
+.resize-drag:hover .block_delete {
+ display: block;
+}
+
+.chart-edit {
+ position: absolute;
+ top: 0px;
+ left: 3px;
+ font-size: 16px;
+}
+
+.chart-image {
+ position: absolute;
+ top: 3px;
+ right: 106px;
+ font-size: 16px;
+}
+
+.chart-pdf {
+ position: absolute;
+ top: 3px;
+ right: 82px;
+ font-size: 16px;
+}
+
+.chart-csv {
+ position: absolute;
+ top: 3px;
+ right: 58px;
+ font-size: 16px;
+}
+
+.chart-xlsx {
+ position: absolute;
+ top: 6px;
+ right: 34px;
+ font-size: 15px;
+}
+
+.chart-setting {
+ position: absolute;
+ top: 0px;
+ right: 3px;
+ font-size: 16px;
+}
+
+.chart_title {
+ padding-top: 0.7em;
+ text-align: center;
+ font-size: 16px;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+.move_slider {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px;
+ margin: -1px 6px 11px 0;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
+
+.o_kanban_record {
+ background-color: #e8e8e8 !important;
+}
+
+.oe_module_name {
+ background-color: #ffffff !important;
+}
+
+.bootbox .modal-footer .btn-danger:hover {
+ background-color: #ff595c;
+}
+
+.bootbox .modal-footer .btn-danger {
+ box-shadow: none;
+ margin-left: 0.5rem;
+}
+
+.bootbox .modal-header {
+ text-shadow: -1px 3px 5px #b4b4b4;
+}
+
+.bootbox .modal-body {
+ font-size: 14px;
+ text-shadow: -1px 3px 5px #b4b4b4;
+ color: #000000;
+}
+
+.dropdown-addblock, .o-dropdown-menu {
+ left: 2.5em;
+ top: 2.5em;
+}
+
+.navbar {
+ top:10px;
+ padding: 1.2rem 0 2.6rem 0 !important;
+ border-bottom: 1px solid #3f3f3f1a !important;
+ color: #444444;
+ background-color: #ffffff !important;
+}
+
+.theme_icon:hover {
+ text-shadow: 0px 0px 5px #9388ff;
+}
+
+.navbar-style {
+ margin-top: 1.2em;
+ border-radius: 0.5em;
+}
+
+.dropdown-add-items {
+ position: absolute;
+ color: #e4e4e4;
+ left: 2em;
+ font-size: 16px;
+ text-transform: uppercase;
+ background-color: #71639e;
+ border: 1px solid transparent;
+ padding: 0.375rem 0.75rem;
+ font-size: 1.08333333rem;
+ border-radius: 0.25rem;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.dropdown-add-items:hover {
+ color: white;
+ background-color: #59507b;
+}
+
+@media (max-width: 767px) {
+ .navbar {
+ padding: 1.2rem 0 1.2rem 0;
+ }
+
+ .navbar:focus, .navbar:active {
+ padding: 1.2rem 0 2rem 0;
+ }
+
+ .o_web_client.o_touch_device .btn, .o_web_client.o_touch_device .btn .btn-sm, .o_web_client.o_touch_device .btn .btn-group-sm > .btn {
+ font-size: 1.08333333rem;
+ padding: 6px 8px;
+ margin-top: 39px;
+ margin-left: -39px;
+ }
+
+ .dropdown-item {
+ font-size: 1.08333333rem;
+ font-weight: 500;
+ }
+
+ .dropdown-addblock, .o-dropdown-menu {
+ left: -3.5em;
+ padding: 0em 7em;
+ margin-top: 38px;
+ width: 276px;
+ }
+
+ .toggle-btn {
+ position: absolute;
+ margin-top: -16px;
+ margin-left: 56px;
+ left: 1.2em;
+ top: 2.3em;
+ height: 10px;
+ }
+
+ #edit_layout {
+ display: none;
+ border-radius: inherit;
+ }
+
+ #search-button {
+ position: relative;
+ left: 3.5em;
+ }
+
+ #searchclear {
+ position: absolute;
+ margin: 0.3rem 0 0 9.9rem;
+ }
+
+ .search-box {
+ top: -3em;
+ left: 7.5em;
+ margin: 0em -1.9em;
+ width: 79%;
+ }
+
+
+ .navbar-toggler {
+ margin: 0.2em 1em;
+ padding: 0.25rem 0.5rem;
+ }
+
+ .dropdown-add-items {
+ position: absolute;
+ color: #e4e4e4;
+ top: -2.6em;
+ left: 3.5em;
+ }
+}
diff --git a/odoo_dynamic_dashboard/static/src/js/dynamic_dashboard.js b/odoo_dynamic_dashboard/static/src/js/dynamic_dashboard.js
new file mode 100644
index 000000000..68f016423
--- /dev/null
+++ b/odoo_dynamic_dashboard/static/src/js/dynamic_dashboard.js
@@ -0,0 +1,391 @@
+/** @odoo-module **/
+import { registry } from "@web/core/registry";
+import { loadJS } from '@web/core/assets';
+import { DynamicDashboardTile} from './dynamic_dashboard_tile';
+import { DynamicDashboardChart} from './dynamic_dashboard_chart';
+import { useService } from "@web/core/utils/hooks";
+const { Component, useRef, mount, onWillStart, onMounted} = owl;
+import { rpc } from "@web/core/network/rpc";
+
+export class OdooDynamicDashboard extends Component {
+ // Setup function to run when the template of the class OdooDynamicDashboard renders
+ setup() {
+ this.ThemeSelector = useRef('ThemeSelector');
+ this.action = useService("action");
+ this.orm = useService("orm");
+ this.dialog = useService("dialog");
+ this.actionId = this.props.actionId
+ this.rpc = rpc;
+ onWillStart(async () => {
+ await loadJS("https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js")
+ await loadJS("https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js")
+ await loadJS("https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js")
+ })
+ onMounted(()=>{
+ this.renderDashboard();
+ })
+ }
+
+ onChangeTheme(){
+ /* Function for changing color of the theme of the dashboard */
+ $(".container").attr('style', this.ThemeSelector.el.value + 'min-height:-webkit-fill-available;')
+ }
+
+ ResizeDrag() {
+ /* Function for resizing and dragging the div resize-drag */
+ $('.items .resize-drag').each(function(index, element) {
+ interact(element).resizable({
+ edges: { left: true, right: true, bottom: true, top: true },
+ listeners: {
+ move (event) {
+ var target = event.target
+ var x = (parseFloat(target.getAttribute('data-x')) || 0)
+ var y = (parseFloat(target.getAttribute('data-y')) || 0)
+ // update the element's style
+ target.style.width = event.rect.width + 'px'
+ target.style.height = event.rect.height + 'px'
+ // translate when resizing from top or left edges
+ x += event.deltaRect.left
+ y += event.deltaRect.top
+ }
+ },
+ modifiers: [
+ // keep the edges inside the parent
+ interact.modifiers.restrictEdges({
+ outer: 'parent'
+ }),
+ // minimum size
+ interact.modifiers.restrictSize({
+ min: { width: 100, height: 50 }
+ })
+ ],
+ inertia: true
+ }).draggable({
+ listeners: {move: dragMoveListener},
+ inertia: true,
+ modifiers: [
+ interact.modifiers.restrictRect({
+ restriction: 'parent',
+ endOnly: true
+ })
+ ]
+ })
+
+ function dragMoveListener (event) {
+ var target = event.target
+ // keep the dragged position in the data-x/data-y attributes
+ var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
+ var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
+ // translate the element
+ target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
+ // update the posiion attributes
+ target.setAttribute('data-x', x)
+ target.setAttribute('data-y', y)
+ }
+ // this function is used later in the resizing
+ window.dragMoveListener = dragMoveListener
+ });
+ }
+
+ async renderDashboard(){
+ /* Function for rendering the dashboard */
+ var self = this;
+ $("#save_layout").hide();
+ await this.orm.call('dashboard.theme', 'get_records', [[]]).then(function (response) {
+ response.forEach((ev) => {
+ const options = document.createElement("option");
+ options.value = ev.style;
+ options.text = ev.name;
+ self.ThemeSelector.el.append(options)
+ });
+ })
+ await this.orm.call("dashboard.block", "get_dashboard_vals", [[], this.actionId]).then( function (response){
+ for (let i = 0; i < response.length; i++) {
+ if (response[i].type === 'tile'){
+ mount(DynamicDashboardTile, $('.items')[0], { props: {
+ widget: response[i], doAction: self.action, dialog:self.dialog, orm: self.orm
+ }});
+ }
+ else{
+ mount(DynamicDashboardChart, $('.items')[0], { props: {
+ widget: response[i], doAction: self.action, rpc: self.rpc, dialog:self.dialog, orm: self.orm
+ }});
+ }
+ }
+ })
+ }
+
+ editLayout(ev) {
+ /* Function for editing the layout , it enables resizing and dragging functionality */
+ $('.items .resize-drag').each(function(index, element) {
+ interact(element).draggable(true)
+ interact(element).resizable(true)
+ });
+ ev.stopPropagation();
+ ev.preventDefault();
+ $("#edit_layout").hide();
+ $("#save_layout").show();
+ this.ResizeDrag()
+ }
+
+ saveLayout(ev){
+ /* Function for saving the layout */
+ var self = this;
+ ev.stopPropagation();
+ ev.preventDefault();
+ $("#edit_layout").show();
+ $("#save_layout").hide();
+ var data_list = []
+ $('.items .resize-drag').each(function(index, element) {
+ interact(element).draggable(false)
+ interact(element).resizable(false)
+ data_list.push({
+ 'id' : element.dataset['id'],
+ 'data-x': element.dataset['x'],
+ 'data-y': element.dataset['y'],
+ 'height': element.clientHeight,
+ 'width': element.clientWidth,
+ })
+ });
+ self.orm.call('dashboard.block','get_save_layout', [[], data_list]).then( function (response){
+ window.location.reload();
+ });
+ }
+
+ changeViewMode(ev){
+ /* Function for changing the mode of the view */
+ ev.stopPropagation();
+ ev.preventDefault();
+ const currentMode = $(".mode").attr("mode");
+ if (currentMode == "light"){
+ $('.theme').attr('style','display: none;')
+ $(".container").attr('style', 'background-color: #383E45;min-height:-webkit-fill-available; !important')
+ $(".mode").attr("mode", "dark")
+ $(".bi-moon-stars-fill").attr('class', 'bi bi-cloud-sun-fill view-mode-icon')
+ $(".bi-cloud-sun-fill").attr('style', 'color:black;margin-left:10px;')
+ $(".mode").attr('style','display: none !important');
+ $("#search-input-chart").attr('style', 'background-color: white; !important')
+ $("#search-button").attr('style', 'background-color: #BB86FC; !important')
+ $("#dropdownMenuButton").attr('style', 'background-color: #03DAC5;margin-top:-4px; !important')
+ $("#text_add").attr('style', 'color: black; !important')
+ $(".date-label").attr('style', 'color: black;font-family:monospace; !important')
+ $(".block_setting").attr('style', 'color: white; !important')
+ $(".block_delete").attr('style', 'color: white; !important')
+ $(".block_image").attr('style', 'color: #03DAC5; !important')
+ $(".block_pdf").attr('style', 'color: #03DAC5; !important')
+ $(".block_csv").attr('style', 'color: #03DAC5; !important')
+ $(".block_xlsx").attr('style', 'color: #03DAC5; !important')
+ }
+ else {
+ $('.theme').attr('style','display: block;')
+ $(".container").attr('style', this.ThemeSelector.el.value + 'min-height:-webkit-fill-available;')
+ $(".mode").attr("mode", "light")
+ $(".bi-cloud-sun-fill").attr('class', 'bi bi-moon-stars-fill view-mode-icon')
+ $(".view-mode-icon").attr('style', 'color:black;margin-left:10px; !important')
+ $(".mode").attr('style','display: none !important');
+ $(".mode").attr('style','color: white !important');
+ $("#search-input-chart").attr('style', 'background-color: none; !important')
+ $("#search-button").attr('style', 'background-color: none; !important')
+ $("#dropdownMenuButton").attr('style', 'background-color: none;margin-top:-4px; !important')
+ $("#text_add").attr('style', 'color: white; !important')
+ $(".date-label").attr('style', 'color: black; !important;font-family:monospace; !important')
+ $(".block_setting").attr('style', 'color: black; !important')
+ $(".block_delete").attr('style', 'color: black; !important')
+ $(".block_image").attr('style', 'color: black; !important')
+ $(".block_pdf").attr('style', 'color: black; !important')
+ $(".block_csv").attr('style', 'color: black; !important')
+ $(".block_xlsx").attr('style', 'color: black; !important')
+ }
+ }
+ onClickAdd(event){
+ /* For enabling the toggle button */
+ event.stopPropagation();
+ event.preventDefault();
+ $(".dropdown-addblock").toggle()
+ }
+ onClickAddItem(event){
+ /* Function for adding tiles and charts */
+ event.stopPropagation();
+ event.preventDefault();
+ self = this;
+ var type = event.target.getAttribute('data-type');
+ if (type == 'graph'){
+ var chart_type = event.target.getAttribute('data-chart_type');
+ }
+ if (type == 'tile'){
+ var randomColor = '#' + ('000000' + Math.floor(Math.random() * 16777216).toString(16)).slice(-6);
+ this.action.doAction({
+ type: 'ir.actions.act_window',
+ res_model: 'dashboard.block',
+ view_mode: 'form',
+ views: [[false, 'form']],
+ context: {
+ 'form_view_initial_mode': 'edit',
+ 'default_name': 'New Tile',
+ 'default_type': type,
+ 'default_height': '155px',
+ 'default_width': '300px',
+ 'default_tile_color': randomColor,
+ 'default_text_color': '#FFFFFF',
+ 'default_val_color': '#F3F3F3',
+ 'default_fa_icon': 'fa fa-bar-chart',
+ 'default_client_action_id': parseInt(self.actionId)
+ }
+ })
+ }
+ else{
+ this.action.doAction({
+ type: 'ir.actions.act_window',
+ res_model: 'dashboard.block',
+ view_mode: 'form',
+ views: [[false, 'form']],
+ context: {
+ 'form_view_initial_mode': 'edit',
+ 'default_name': 'New ' + chart_type,
+ 'default_type': type,
+ 'default_height': '565px',
+ 'default_width': '588px',
+ 'default_graph_type': chart_type,
+ 'default_fa_icon': 'fa fa-bar-chart',
+ 'default_client_action_id': parseInt(self.actionId)
+ },
+ })
+ }
+ }
+
+ dateFilter(){
+ /* Function for filtering the data based on the creation date */
+ $(".items").empty();
+ var start_date = $("#start-date").val();
+ var end_date = $("#end-date").val();
+ var self = this;
+ if (!start_date){
+ start_date = "null"
+ }
+ if (!end_date){
+ end_date = "null"
+ }
+ this.orm.call("dashboard.block", "get_dashboard_vals", [[], this.actionId, start_date, end_date]).then( function (response){
+ for (let i = 0; i < response.length; i++) {
+ if (response[i].type === 'tile'){
+ mount(DynamicDashboardTile, $('.items')[0], { props: {
+ widget: response[i], doAction: self.action, dialog:self.dialog, orm: self.orm
+ }});
+ }
+ else{
+ mount(DynamicDashboardChart, $('.items')[0], { props: {
+ widget: response[i], doAction: self.action, rpc: self.rpc, dialog:self.dialog, orm: self.orm
+ }});
+ }
+ }
+ })
+ }
+
+ async clickSearch(){
+ /* Function for searching the blocks with their names */
+ var input = $("#search-input-chart").val();
+ await this.rpc('/custom_dashboard/search_input_chart', {'search_input': input}).then(function (response) {
+ var blocks = $(".items .resize-drag");
+ blocks.each(function(index, element){
+ var dataId = $(element).data('id');
+ if (response.includes(dataId)){
+ $(element).css("visibility", "visible");
+ }
+ else{
+ $(element).css("visibility", "hidden");
+ }
+ })
+ })
+ }
+
+ showViewMode(ev){
+ /* Function for showing the mode text */
+ const currentMode = $(".mode").attr("mode");
+ if (currentMode == "light"){
+ $(".mode").text("Dark Mode")
+ $(".mode").attr('style','display: inline-block !important; color: black !important');
+ }
+ else{
+ $(".mode").text("Light Mode")
+ $(".mode").attr('style','display: inline-block !important; color: black !important');
+ }
+ }
+ hideViewMode(ev){
+ /* Function for hiding the mode text */
+ $(".mode").fadeOut(2000);
+ }
+ clearSearch(){
+ /* Function for clearing the search input */
+ $("#search-input-chart").val('');
+ var blocks = $(".items .resize-drag");
+ blocks.each(function(index, element){
+ $(element).css("visibility", "visible");
+ })
+ }
+
+ async printPdf() {
+ /* Function for printing whole dashboard in pdf format */
+ var elements = $('.items .resize-drag')
+ var newElement = document.createElement('div');
+ newElement.className = 'pdf';
+ elements.each(function(index, elem){
+ newElement.appendChild(elem);
+ });
+ for (var x=0; x< $(newElement)[0].children.length; x++){
+ $($(newElement)[0].children[x])[0].style.transform = ""
+ }
+ var opt = {
+ margin: 0.3,
+ filename: 'Dashboard.pdf',
+ image: { type: 'jpeg', quality: 1 },
+ html2canvas: { scale: 1 },
+ jsPDF: { unit: 'mm', format: 'a3', orientation: 'portrait' }
+ };
+ html2pdf().set(opt).from(newElement).save().then(()=>{
+ window.location.reload()
+ })
+ }
+
+ async createPDF(){
+ /* Function for getting pdf data in string format */
+ var elements = $('.items .resize-drag')
+ var newElement = document.createElement('div');
+ newElement.className = 'pdf';
+ elements.each(function(index, elem){
+ newElement.appendChild(elem);
+ });
+ for (var x=0; x< $(newElement)[0].children.length; x++){
+ $($(newElement)[0].children[x])[0].style.transform = ""
+ }
+ var opt = {
+ margin: 0.3,
+ filename: 'Dashboard.pdf',
+ image: { type: 'jpeg', quality: 1 },
+ html2canvas: { scale: 1 },
+ jsPDF: { unit: 'mm', format: 'a3', orientation: 'portrait' }
+ };
+ var pdf = html2pdf().set(opt).from(newElement).toPdf()
+ var pdfOutput = await pdf.output('datauristring');
+ return pdfOutput
+ }
+
+ async sendMail(){
+ /* Function for creating pdf and sending mail to the selected users */
+ /* This function calls the createPDF() function and returns the pdf datas */
+ var created_pdf = await this.createPDF();
+ var base64code = created_pdf.split(',')[1];
+ this.action.doAction({
+ type: 'ir.actions.act_window',
+ name: 'SEND MAIL',
+ res_model: 'dashboard.mail',
+ view_mode: 'form',
+ views: [[false, 'form']],
+ target: 'new',
+ context: {
+ 'default_base64code': base64code,
+ }
+ })
+ }
+}
+OdooDynamicDashboard.template = "owl.OdooDynamicDashboard"
+registry.category("actions").add("OdooDynamicDashboard", OdooDynamicDashboard)
diff --git a/odoo_dynamic_dashboard/static/src/js/dynamic_dashboard_chart.js b/odoo_dynamic_dashboard/static/src/js/dynamic_dashboard_chart.js
new file mode 100644
index 000000000..246a39300
--- /dev/null
+++ b/odoo_dynamic_dashboard/static/src/js/dynamic_dashboard_chart.js
@@ -0,0 +1,221 @@
+/** @odoo-module **/
+import { loadJS } from '@web/core/assets';
+import { getColor } from "@web/core/colors/colors";
+import { _t } from "@web/core/l10n/translation";
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+const { Component, xml, onWillStart, useRef, onMounted } = owl
+
+export class DynamicDashboardChart extends Component {
+ // Setup function of the class DynamicDashboardChart
+ setup() {
+ this.doAction = this.props.doAction.doAction;
+ this.chartRef = useRef("chart");
+ this.dialog = this.props.dialog;
+ onWillStart(async () => {
+ await loadJS("https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js")
+ await loadJS("https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js")
+ await loadJS("https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js")
+ })
+ onMounted(()=> this.renderChart())
+ }
+ // Function to export the chart in pdf, image, xlsx and csv format
+ exportItem(ev){
+ ev.stopPropagation();
+ ev.preventDefault();
+ var type = $(ev.currentTarget).attr('data-type');
+ var canvas = $($($(ev.currentTarget)[0].offsetParent)[0].children[0].lastChild).find("#canvas")[0]
+ var dataTitle = $(canvas).attr('data-title')
+ var bgCanvas = document.createElement("canvas");
+ bgCanvas.width = canvas.width;
+ bgCanvas.height = canvas.height;
+ var bgCtx = bgCanvas.getContext("2d");
+ bgCtx.fillStyle = "white";
+ bgCtx.fillRect(0, 0, canvas.width, canvas.height);
+ bgCtx.drawImage(canvas, 0, 0);
+ var imgData = bgCanvas.toDataURL("image/png");
+ if (type === 'png') {
+ var downloadLink = document.createElement('a');
+ downloadLink.href = imgData;
+ downloadLink.download = `${dataTitle}.png`;
+ document.body.appendChild(downloadLink);
+ downloadLink.click();
+ document.body.removeChild(downloadLink);
+ }
+ if (type === 'pdf') {
+ var pdf = new jsPDF();
+ pdf.addImage(imgData, 'PNG', 0, 0);
+ pdf.save(`${dataTitle}.pdf`);
+ }
+ if (type === 'xlsx'){
+ var rows = [];
+ var items = $('.resize-drag');
+ for (let i = 0; i < items.length; i++) {
+ if ($(items[i]).attr('data-id') === $(ev.currentTarget).attr('data-id')) {
+ rows.push(this.props.widget.x_axis);
+ rows.push(this.props.widget.y_axis);
+ }
+ }
+ // Prepare the workbook
+ const workbook = new ExcelJS.Workbook();
+ const worksheet = workbook.addWorksheet('My Sheet');
+ for(let i = 0; i < rows.length; i++){
+ worksheet.addRow(rows[i]);
+ }
+ const image = workbook.addImage({
+ base64: imgData,
+ extension: 'png',
+ });
+ worksheet.addImage(image, {
+ tl: { col: 0, row: 4 },
+ ext: { width: canvas.width, height: canvas.height }
+ });
+ // Save workbook to a file
+ workbook.xlsx.writeBuffer()
+ .then((buffer) => {
+ // Create a Blob object from the buffer
+ let blob = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
+ let link = document.createElement('a');
+ link.href = window.URL.createObjectURL(blob);
+ link.setAttribute("download", `${dataTitle}.xlsx`);
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ })
+ }
+ if (type === 'csv') {
+ var rows = [];
+ var items = $('.resize-drag')
+ for (let i = 0; i < items.length; i++) {
+ if ($(items[i]).attr('data-id') === $(ev.currentTarget).attr('data-id')) {
+ rows.push(this.props.widget.x_axis);
+ rows.push(this.props.widget.y_axis);
+ }
+ }
+ let csvContent = "data:text/csv;charset=utf-8,";
+ rows.forEach(function (rowArray) {
+ let row = rowArray.join(",");
+ csvContent += row + "\r\n";
+ });
+ var link = document.createElement("a");
+ link.setAttribute("href", encodeURI(csvContent));
+ link.setAttribute("download", `${dataTitle}.csv`);
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ }
+ }
+ // Function to get the configuration of the chart
+ async getConfiguration(ev){
+ ev.stopPropagation();
+ ev.preventDefault();
+ var id = this.props.widget.id
+ await this.doAction({
+ type: 'ir.actions.act_window',
+ res_model: 'dashboard.block',
+ res_id: id,
+ view_mode: 'form',
+ views: [[false, "form"]]
+ });
+ }
+ // Function to remove the chart
+ async removeTile(ev){
+ ev.stopPropagation();
+ ev.preventDefault();
+ this.dialog.add(ConfirmationDialog, {
+ title: _t("Delete Confirmation"),
+ body: _t("Are you sure you want to delete this item?"),
+ confirmLabel: _t("YES, I'M SURE"),
+ cancelLabel: _t("NO, GO BACK"),
+ confirm: async () => {
+ await this.props.orm.unlink("dashboard.block", [this.props.widget.id]);
+ location.reload();
+ },
+ cancel: () => {},
+ });
+ }
+ // Function to render the chart
+ renderChart(){
+ if (this.props.widget.graph_type){
+ const x_axis = this.props.widget.x_axis
+ const y_axis = this.props.widget.y_axis
+ const data = []
+ for (let i = 0; i < x_axis.length; i++) {
+ var key;
+ if(x_axis[i] && typeof(x_axis[i]) === 'object'){
+ key = x_axis[i].en_US
+ } else {
+ key = x_axis[i]
+ }
+ const value = { key: key, value: y_axis[i] }
+ data.push(value);
+ }
+ new Chart(
+ this.chartRef.el,
+ {
+ type: this.props.widget.graph_type || 'bar',
+ data: {
+ labels: data.map(row => row.key),
+ datasets: [
+ {
+ label: this.props.widget.measured_field || 'Data',
+ data: data.map(row => row.value),
+ backgroundColor: data.map((_, index) => getColor(index)),
+ hoverOffset : 4
+ }
+ ]
+ },
+ }
+ );
+ }
+ }
+}
+
+DynamicDashboardChart.template = xml`
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + This Module Helps To Create Configurable Dashboards Easily. +
+Odoo Dynamic Dashboard +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Heighlights
+
+
+
+
+
+ 
+
+
+ + Easily Create Dynamic Charts And Tiles +
+
+
+
+
+
+
+
+
+ + Create A Dynamic Dashboard Menu In Any Model +
+
+
+
+
+
+
+
+
+ + Charts Can Export Into Image, PDF, XLSX And CSV +
+
+
+
+
+
+
+
+
+ + Edit And Configure Charts And Tiles. +
+
+
+
+
+
+
+
+
+
+ Odoo Dynamic Dashboard
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Odoo Dynamic Dashboard + + View +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Create New Dashboard Tiles View. + +
+
+
+ The tiled view of the records in Odoo is also clickable; when you click on a record, you will be directed to the records tree view. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Dashboard Charts View + +
+
+
+ The chart view of the records in Odoo is provided in the dashboard based on the filtering. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ Clicking on various icons generates different types of chart data, which can be exported as image, PDF, CSV, and XLSX formats. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ By clicking cross icon you can delete the chart and also the same for tile. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ Select Type Of The Item. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ + When choosing the "Tile" option, input a name for the tile, select a model, operation type, and measured field. Additionally, customize the tile with an icon and color. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ When opting for "Charts," provide a name for the chart, select a model, operation type, and measured field, along with filters. Additionally, choose the chart type, set its size, and specify the grouping for the Y-axis. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Edit Layout +
+
+
+ You can change the position of the item and resize the item.
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ By double-clicking the tile, it will redirect to the corresponding tree view.
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ Dark mode.
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Dashboard Menu +
+
+
+ You can add dashboard menu in any module. Add a name for the menu and select the parent menu also.
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Dashboard Block +
+
+
+ You can see all the tiles and charts created in the Dashboard Block menu.
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Dashboard Theme +
+
+
+ Customize the Dashboard Theme via Configuration > Dashboard Theme. Then, choose the configured theme for your dashboard.
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + Print PDF +
+
+
+ Print & Mail whole dashboard in PDF format by clicking the PDF or Mail icon.
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + Send Mail +
+
+
+ Clicking the Mail icon brings up a wizard, where you can select users and then click the SEND button.
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Demo Mail +
+
+
+ Clicking the Mail icon brings up a wizard, where you can select users and then click the SEND button.
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Interactive User Interface.
+
+
+
+
+
+
+
+
+
+ Easily Create Dynamic Charts And Tiles
+
+
+
+
+
+
+
+
+
+ Create A Dynamic Dashboard Menu In Any Model
+
+
+
+
+
+
+
+
+
+ Charts Can Export Into Image, PDF, XLSX And CSV.
+
+
+
+
+
+
+
+
+
+ Edit And Configure Charts And Tiles.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Yes you can use. +
+
+
+
+
+
+ You can. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 15th October, 2024 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+
+
+
+
+
+
+
+
+ Related Modules
+
+
+
+ 
+
+
+
+
+ 
+ 
+
+
+
+
+
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+ `
diff --git a/odoo_dynamic_dashboard/static/src/js/dynamic_dashboard_tile.js b/odoo_dynamic_dashboard/static/src/js/dynamic_dashboard_tile.js
new file mode 100644
index 000000000..eb5d6025c
--- /dev/null
+++ b/odoo_dynamic_dashboard/static/src/js/dynamic_dashboard_tile.js
@@ -0,0 +1,90 @@
+/** @odoo-module **/
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { _t } from "@web/core/l10n/translation";
+const { Component, xml } = owl;
+import { rpc } from "@web/core/network/rpc";
+
+export class DynamicDashboardTile extends Component {
+ // Setup function of the class DynamicDashboardTile
+ setup() {
+ this.doAction = this.props.doAction.doAction;
+ this.dialog = this.props.dialog;
+ this.orm = this.props.orm;
+ }
+ // Function to get the configuration of the tile
+ async getConfiguration(ev){
+ ev.stopPropagation();
+ ev.preventDefault();
+ var id = this.props.widget.id
+ await this.doAction({
+ type: 'ir.actions.act_window',
+ res_model: 'dashboard.block',
+ res_id: id,
+ view_mode: 'form',
+ views: [[false, "form"]]
+ });
+ }
+ // Function to remove the tile
+ async removeTile(ev){
+ ev.stopPropagation();
+ ev.preventDefault();
+ this.dialog.add(ConfirmationDialog, {
+ title: _t("Delete Confirmation"),
+ body: _t("Are you sure you want to delete this item?"),
+ confirmLabel: _t("YES, I'M SURE"),
+ cancelLabel: _t("NO, GO BACK"),
+ confirm: async () => {
+ await this.orm.unlink("dashboard.block", [this.props.widget.id]);
+ location.reload();
+ },
+ cancel: () => {},
+ });
+ }
+ // Function for getting records by double click
+ async getRecords(){
+ var model_name = this.props.widget.model_name;
+ if (model_name){
+ await this.doAction({
+ type: 'ir.actions.act_window',
+ res_model: model_name,
+ view_mode: 'list',
+ views: [[false, "list"]],
+ domain: this.props.widget.domain,
+ });
+ }
+ }
+}
+DynamicDashboardTile.template = xml `
+ `
\ No newline at end of file
diff --git a/odoo_dynamic_dashboard/static/src/scss/dynamic_dashboard.scss b/odoo_dynamic_dashboard/static/src/scss/dynamic_dashboard.scss
new file mode 100644
index 000000000..051245037
--- /dev/null
+++ b/odoo_dynamic_dashboard/static/src/scss/dynamic_dashboard.scss
@@ -0,0 +1,208 @@
+
+:root {
+ /* Colors */
+ --green: #00C689;
+ --blue: #3DA5F4;
+ --red: #F1536E;
+ --yellow: #FDA006;
+ /*Fonts*/
+ --primary-font: 'Roboto', sans-serif;
+}
+
+html .o_web_client > .o_action_manager {
+ overflow: auto;
+}
+
+.bg-green {
+ background-color: var(--green);
+}
+
+.bg-blue {
+ background-color: var(--blue);
+}
+
+.bg-red {
+ background-color: var(--red);
+}
+
+.bg-yellow {
+ background-color: var(--yellow);
+}
+
+.text-color-yellow {
+ color: var(--yellow);
+}
+
+.text-color-green {
+ color: var(--green);
+}
+
+.text-color-blue {
+ color: var(--blue);
+}
+
+.text-color-red {
+ color: var(--red);
+}
+
+.text-color-yellow {
+ color: var(--yellow);
+}
+
+.tile-container__icon-container {
+ border-radius: 50%;
+ width: 4.75rem;
+ height: 4.75rem;
+ font-size: 28px;
+ margin-left: 15px;
+}
+
+.tile-container__status-container {
+ margin-left: 2em;
+}
+
+.status-container__title {
+ font-family: var(--primary-font);
+ font-weight: 500;
+ font-size: 1.5rem;
+ line-height: 1.5rem;
+}
+
+.status-container__figures {
+ font-family: var(--primary-font);
+}
+
+.status-container__figures > h3 {
+ font-weight: 700;
+ font-size: 1.5rem;
+ line-height: 1.813rem;
+}
+
+.tile-container__setting-icon {
+ top: 0.638rem;
+}
+
+.dark-theme {
+ /* Add dark theme styles here */
+ .block_edit {
+ color: #b7b7b7 !important;
+}
+
+.theme_icon:hover {
+text-shadow: 0px 0px 5px #9388ff;
+}
+.add_block{
+ color: #dfdfdf;
+}
+ #ExportMenu {
+ color: #626262;
+ }
+
+ .chart_title {
+ color: #dfdfdf;
+ margin: -0.5em 0 2em 0;
+ }
+
+ .btn-search_edit, {
+ color: #313131;
+ border: none;
+ background-color: #979797 !important;
+ }
+
+ #search-input-chart {
+ color: #ffffff;
+ border: 1px solid #4e4e4e;
+ background-color: #2A2A2A !important;
+ }
+
+ #search-clear {
+ color: #1f1f1f !important;
+ }
+
+ div.navbar {
+ color: #909090;
+ background-color: #2A2A2A !important;
+ }
+
+ .navbar-collapse {
+ margin-bottom: 12px !important;
+ }
+
+ h3 {
+ color: #909090;
+ }
+
+ div.dropdown-addblock {
+ color: #909090;
+ background-color: #2A2A2A !important;
+ }
+
+ #dropdownMenuButton {
+ color: #313131;
+ background-color: #979797 !important;
+ }
+
+ div.card-body {
+ border-radius: 0.5em !important;
+ background-color: #2a2a2a !important;
+ }
+
+ .o_kanban_record {
+ background-color: #e8e8e8 !important;
+ }
+
+ .o_kanban_renderer {
+ background-color: #e8e8e8 !important;
+ }
+
+ .oe_module_name {
+ background-color: #ffffff !important;
+ }
+
+ background-color: #1C1B1B;
+ @media (max-width: 767px) {
+ .navbar-light .navbar-toggler {
+ color: #A7A7A72D;
+ border-color: #F6F6F621;
+ }
+ }
+}
+.btn-align-items{
+ width: 134px;
+ font-size: small;
+ border-radius: revert;
+ height: 33px;
+}
+#edit_layout{
+ background-color: #0c8444;
+}
+#save_layout{
+ background-color: #b53c5d;
+ width: 134px;
+ height: 33px;
+ font-size: small;
+ border-radius: revert;
+}
+#search-button{
+ width: 69px;
+ margin-left: 5px;
+}
+#search-input-chart{
+ width: 206px;
+ height: 34px;
+ border: 1px solid black;
+}
+.search-clear{
+ margin-left: -80px;
+}
+label input{
+ appearance: none;
+}
+.mode{
+ padding-left: 7px;
+ font-family: 'odoo_ui_icons';
+ display: none;
+}
+.view-mode-icon{
+ font-size: x-large;
+}
\ No newline at end of file
diff --git a/odoo_dynamic_dashboard/static/src/xml/dynamic_dashboard_template.xml b/odoo_dynamic_dashboard/static/src/xml/dynamic_dashboard_template.xml
new file mode 100644
index 000000000..079723614
--- /dev/null
+++ b/odoo_dynamic_dashboard/static/src/xml/dynamic_dashboard_template.xml
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name:
+
+
+
+
+ Name:
+
+
+
+
+ +
+ Parent:
+
+
+
+ -
+
-
+
' + 'I hope this mail finds you well. I am pleased to share the Dashboard Report with you.
' + 'Please find the attachment
') % user.name + mail_values = { + 'subject': 'Dashboard Report', + 'author_id': self.env.user.partner_id.id, + 'body_html': mail_content, + 'email_to': user.email, + } + mail_id = self.env['mail.mail'].create(mail_values) + attachment_values = { + 'name': 'Dashboard.pdf', + 'datas': self.base64code, + 'type': 'binary', + 'res_model': 'mail.mail', + 'res_id': mail_id.id, + } + attachment_id = self.env['ir.attachment'].create(attachment_values) + mail_id.write({ + 'attachment_ids': [(4, attachment_id.id)] + }) + mail_id.send() + + return { + 'type': 'ir.actions.client', + 'tag': 'reload', + } + + def cancel_mail(self): + """ + Function for refreshing the page while clicking cancel + """ + return { + 'type': 'ir.actions.client', + 'tag': 'reload', + } diff --git a/odoo_dynamic_dashboard/wizard/dashboard_mail_views.xml b/odoo_dynamic_dashboard/wizard/dashboard_mail_views.xml new file mode 100644 index 000000000..f58b57d4e --- /dev/null +++ b/odoo_dynamic_dashboard/wizard/dashboard_mail_views.xml @@ -0,0 +1,22 @@ + +