Sreejith P
7 years ago
16 changed files with 499 additions and 0 deletions
@ -0,0 +1,39 @@ |
|||||
|
====================== |
||||
|
Heat Map in Pivot View |
||||
|
====================== |
||||
|
|
||||
|
Added option for heat map in pivot view. |
||||
|
|
||||
|
Installation |
||||
|
============ |
||||
|
|
||||
|
Select the module and install it, there are no other setups needed. |
||||
|
|
||||
|
Usage |
||||
|
===== |
||||
|
|
||||
|
Go to the pivot view, and there will be three new buttons, Heatmap Page, Heatmap Row and Heatmap Colomn. |
||||
|
After setting up the table, click on the button to activate heatmap. |
||||
|
|
||||
|
Known issues / Roadmap |
||||
|
====================== |
||||
|
|
||||
|
* ... |
||||
|
|
||||
|
Bug Tracker |
||||
|
=========== |
||||
|
|
||||
|
Contact odoo@cybrosys.com |
||||
|
|
||||
|
Contributors |
||||
|
------------ |
||||
|
|
||||
|
* Linto CT <linto@cybrosys.in> |
||||
|
* Faslu CA <faslu@cybrosys.in> |
||||
|
|
||||
|
Maintainer |
||||
|
---------- |
||||
|
|
||||
|
This module is maintained by Cybrosys Technologies. |
||||
|
|
||||
|
For support and more information, please visit https://www.cybrosys.com. |
||||
@ -0,0 +1,23 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
|
||||
|
############################################################################## |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# Copyright (C) 2018-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
||||
|
# Author: LINTO C T(<https://www.cybrosys.com>) |
||||
|
# you can modify it under the terms of the GNU LESSER |
||||
|
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
||||
|
# |
||||
|
# It is forbidden to publish, distribute, sublicense, or sell copies |
||||
|
# of the Software or modified copies of the Software. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
||||
|
# GENERAL PUBLIC LICENSE (LGPL v3) along with this program. |
||||
|
# If not, see <https://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################## |
||||
@ -0,0 +1,44 @@ |
|||||
|
# -*- coding: utf-8 -*- |
||||
|
|
||||
|
############################################################################## |
||||
|
# |
||||
|
# Cybrosys Technologies Pvt. Ltd. |
||||
|
# Copyright (C) 2018-TODAY Cybrosys Technologies(<https://www.cybrosys.com>). |
||||
|
# Author: LINTO C T(<https://www.cybrosys.com>) |
||||
|
# you can modify it under the terms of the GNU LESSER |
||||
|
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
||||
|
# |
||||
|
# It is forbidden to publish, distribute, sublicense, or sell copies |
||||
|
# of the Software or modified copies of the Software. |
||||
|
# |
||||
|
# This program is distributed in the hope that it will be useful, |
||||
|
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
||||
|
# |
||||
|
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
||||
|
# GENERAL PUBLIC LICENSE (LGPL v3) along with this program. |
||||
|
# If not, see <https://www.gnu.org/licenses/>. |
||||
|
# |
||||
|
############################################################################## |
||||
|
|
||||
|
{ |
||||
|
'name': 'Heat Map in Pivot View', |
||||
|
'version': '11.0.1.0.0', |
||||
|
'summary': 'Heat Map in Pivot View', |
||||
|
'category': 'Reporting', |
||||
|
'author': 'Cybrosys Techno Solutions', |
||||
|
'company': 'Cybrosys Techno Solutions', |
||||
|
'maintainer': 'Cybrosys Techno Solutions', |
||||
|
'depends': ['web'], |
||||
|
'website': 'https://www.cybrosys.com', |
||||
|
'data': [ |
||||
|
'views/templates.xml', |
||||
|
], |
||||
|
'qweb': ["static/src/xml/*.xml"], |
||||
|
'images': ['static/description/banner.jpg'], |
||||
|
'license': 'LGPL-3', |
||||
|
'installable': True, |
||||
|
'auto_install': False, |
||||
|
'application': False, |
||||
|
} |
||||
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 34 KiB |
@ -0,0 +1,101 @@ |
|||||
|
<section class="oe_container"> |
||||
|
<div class="oe_row oe_spaced"> |
||||
|
<h2 class="oe_slogan">Heat Map in Pivot View</h2> |
||||
|
<h3 class="oe_slogan"></h3> |
||||
|
<h4 class="oe_slogan"><a href="https://www.cybrosys.com">Cybrosys Technologies</a> </h4> |
||||
|
</div> |
||||
|
<div class="oe_row oe_spaced" style="padding-left:65px;"> |
||||
|
<h3><p style="margin-left: 42px;"><b>Features:</b></p></h3> |
||||
|
<div> |
||||
|
<span style="color:green;"> ☑ </span> Heat Map for Pivot View<br/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="oe_container oe_dark"> |
||||
|
<div class="oe_row oe_spaced"> |
||||
|
<div class="oe_picture"> |
||||
|
<h3 class="oe_slogan">Overview</h3> |
||||
|
<p class="oe_mt32 text-justify"> |
||||
|
Heat map can be used to color the entries in the pivot view. The coloring will be |
||||
|
in a format where the maximum value will be shown in a dark color and next largest value |
||||
|
will be in a lighter color than the maximum one. |
||||
|
This applies for all the values in the table. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="oe_container"> |
||||
|
<div class="oe_row oe_spaced"> |
||||
|
<h5 class="oe_slogan"><b>New buttons in the pivot view.</b></h5> |
||||
|
<div class="col-md-10" > |
||||
|
<div class="oe_demo oe_picture oe_screenshot"> |
||||
|
<img src="pivot_buttons.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<br /> |
||||
|
<div class="oe_row oe_spaced" style="float:left;"> |
||||
|
<h5 class="oe_slogan"><b>Clicking on these buttons will enable the |
||||
|
corresponding heat map. |
||||
|
</b></h5> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="oe_container oe_dark"> |
||||
|
<div class="col-md-12"> |
||||
|
<div class="oe_demo_footer oe_centeralign" > |
||||
|
<b>Heat Map Column</b> |
||||
|
</div> |
||||
|
<div class=" oe_demo oe_picture oe_screenshot"> |
||||
|
<img src="heat_map_col.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
<section class="oe_container"> |
||||
|
<div class="col-md-12"> |
||||
|
<div class="oe_demo_footer oe_centeralign"> |
||||
|
<b>Heat Map Row</b> |
||||
|
</div> |
||||
|
<div class=" oe_demo oe_picture oe_screenshot"> |
||||
|
<img src="heat_map_row.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
<section class="oe_container oe_dark"> |
||||
|
<div class="col-md-12"> |
||||
|
<div class="oe_demo_footer oe_centeralign"> |
||||
|
<b>Heat Map Page</b> |
||||
|
</div> |
||||
|
<div class=" oe_demo oe_picture oe_screenshot"> |
||||
|
<img src="heat_map_page.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
|
||||
|
<section class="oe_container"> |
||||
|
<h2 class="oe_slogan" style="margin-top:20px;" >Need Any Help?</h2> |
||||
|
<div class="oe_slogan" style="margin-top:10px !important;"> |
||||
|
<div> |
||||
|
<a class="btn btn-primary btn-lg mt8" |
||||
|
style="color: #FFFFFF !important;border-radius: 0;" href="https://www.cybrosys.com"><i |
||||
|
class="fa fa-envelope"></i> Email </a> <a |
||||
|
class="btn btn-primary btn-lg mt8" style="color: #FFFFFF !important;border-radius: 0;" |
||||
|
href="https://www.cybrosys.com/contact/"><i |
||||
|
class="fa fa-phone"></i> Contact Us </a> <a |
||||
|
class="btn btn-primary btn-lg mt8" style="color: #FFFFFF !important;border-radius: 0;" |
||||
|
href="https://www.cybrosys.com/odoo-customization-and-installation/"><i |
||||
|
class="fa fa-check-square"></i> Request Customization </a> |
||||
|
</div> |
||||
|
<br> |
||||
|
<img src="cybro_logo.png" style="width: 190px; margin-bottom: 20px;" class="center-block"> |
||||
|
<div> |
||||
|
<a href="https://twitter.com/cybrosys" target="_blank"><i class="fa fa-2x fa-twitter" style="color:white;background: #00a0d1;width:35px;"></i></a></td> |
||||
|
<a href="https://www.linkedin.com/company/cybrosys-technologies-pvt-ltd" target="_blank"><i class="fa fa-2x fa-linkedin" style="color:white;background: #31a3d6;width:35px;padding-left: 3px;"></i></a></td> |
||||
|
<a href="https://www.facebook.com/cybrosystechnologies" target="_blank"><i class="fa fa-2x fa-facebook" style="color:white;background: #3b5998;width:35px;padding-left: 8px;"></i></a></td> |
||||
|
<a href="https://plus.google.com/106641282743045431892/about" target="_blank"><i class="fa fa-2x fa-google-plus" style="color:white;background: #c53c2c;width:35px;padding-left: 3px;"></i></a></td> |
||||
|
<a href="https://in.pinterest.com/cybrosys" target="_blank"><i class="fa fa-2x fa-pinterest" style="color:white;background: #ac0f18;width:35px;padding-left: 3px;"></i></a></td> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 34 KiB |
@ -0,0 +1,52 @@ |
|||||
|
odoo.define('pivot_heat_map.controllers', function (require) { |
||||
|
"use strict"; |
||||
|
|
||||
|
var PivotController = require('web.PivotController'); |
||||
|
var PivotRenderer = require('web.PivotRenderer'); |
||||
|
|
||||
|
PivotController.include({ |
||||
|
init: function (parent, model, renderer, params) { |
||||
|
renderer.heat_map = null; |
||||
|
renderer.cells = {}; |
||||
|
this._super(parent, model, renderer, params); |
||||
|
}, |
||||
|
_onButtonClick: function (event) { |
||||
|
var $target = $(event.target); |
||||
|
this._super(event); |
||||
|
/* catching heat map button click and switching between modes*/ |
||||
|
if ($target.hasClass('o_heat_map_col')) { |
||||
|
if (this.renderer.heat_map == 'col' ){ |
||||
|
this.renderer.heat_map = null; |
||||
|
} |
||||
|
else{ |
||||
|
this.renderer.cells = {}; |
||||
|
this.renderer.heat_map = 'col'; |
||||
|
} |
||||
|
|
||||
|
this.renderer._render(); |
||||
|
} |
||||
|
else if ($target.hasClass('o_heat_map_row')) { |
||||
|
if (this.renderer.heat_map == 'row'){ |
||||
|
this.renderer.heat_map = null; |
||||
|
} |
||||
|
else{ |
||||
|
this.renderer.cells = {}; |
||||
|
this.renderer.heat_map = 'row'; |
||||
|
} |
||||
|
|
||||
|
this.renderer._render(); |
||||
|
} |
||||
|
else if ($target.hasClass('o_heat_map_both')) { |
||||
|
if (this.renderer.heat_map == 'both'){ |
||||
|
this.renderer.heat_map = null; |
||||
|
} |
||||
|
else{ |
||||
|
this.renderer.cells = {}; |
||||
|
this.renderer.heat_map = 'both'; |
||||
|
} |
||||
|
|
||||
|
this.renderer._render(); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,221 @@ |
|||||
|
odoo.define('pivot_heat_map.renderer', function (require) { |
||||
|
"use strict"; |
||||
|
|
||||
|
var PivotRenderer = require('web.PivotRenderer'); |
||||
|
var field_utils = require('web.field_utils'); |
||||
|
var core = require('web.core'); |
||||
|
|
||||
|
var _t = core._t; |
||||
|
|
||||
|
PivotRenderer.include({ |
||||
|
get_total_col: function(rows, indent, col){ |
||||
|
var total = 0; |
||||
|
_.each(rows, function(rec){ |
||||
|
if(indent == rec.indent && rec.values[col]){ |
||||
|
total += rec.values[col]; |
||||
|
} |
||||
|
}); |
||||
|
return total; |
||||
|
}, |
||||
|
get_total_row: function(values, row, col){ |
||||
|
var total = 0; |
||||
|
var measures = this.state.measures.length; |
||||
|
|
||||
|
for (var i=col;i<values.length-measures;i+=measures){ |
||||
|
total += values[i] ? values[i] : 0; |
||||
|
} |
||||
|
for (var i=col-measures;i>=0;i-=measures){ |
||||
|
total += values[i] ? values[i] : 0; |
||||
|
} |
||||
|
return total; |
||||
|
}, |
||||
|
|
||||
|
get_parent_index: function(indent, row, col){ |
||||
|
var rows = this.state.rows; |
||||
|
for (var i=row-1;i>=0;i--){ |
||||
|
if(rows[i].indent == indent-1){ |
||||
|
return (indent-1)+'-'+i+'-'+col; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
get_bg_color: function(value, row, col, indent){ |
||||
|
var index = indent+'-'+row+'-'+col; |
||||
|
if (value != 'undefined'){ |
||||
|
if(index in this.cells){ |
||||
|
return 'rgb(250,'+this.cells[index]+','+this.cells[index]+')'; |
||||
|
} |
||||
|
} |
||||
|
else{ |
||||
|
this.cells[index] = null; |
||||
|
return null; |
||||
|
} |
||||
|
}, |
||||
|
get_base_value: function(row, col, measures){ |
||||
|
for(var j=row.values.length-measures;j<row.values.length;j++){ |
||||
|
if((j - col)%measures == 0){ |
||||
|
return j; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
update_cell_colors: function(rows){ |
||||
|
var self = this; |
||||
|
var i,j,index,cols,row,value,total,parent_index,base,color_code,cells,measures; |
||||
|
if(rows){ |
||||
|
cols = rows[0].values.length; |
||||
|
cells = this.cells; |
||||
|
measures = this.state.measures.length; |
||||
|
switch(self.heat_map){ |
||||
|
case 'col': { |
||||
|
for(i=0;i<rows.length;i++){ |
||||
|
row = rows[i]; |
||||
|
for(j=0;j<cols;j++){ |
||||
|
value = row.values[j]; |
||||
|
if(value != 'undefined'){ |
||||
|
index = row.indent+'-'+i+'-'+j; |
||||
|
if(!(index in cells)){ |
||||
|
if(row.indent==0){ |
||||
|
/*first row*/ |
||||
|
cells[index] = 90; |
||||
|
continue; |
||||
|
} |
||||
|
/*other rows*/ |
||||
|
total = self.get_total_col(rows, row.indent, j); |
||||
|
parent_index = self.get_parent_index(row.indent, i, j); |
||||
|
base = (parent_index && cells[parent_index]) ? cells[parent_index] : 90; |
||||
|
color_code = Math.floor(base + 165*(total - Math.abs(value))/total); |
||||
|
cells[index] = color_code; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
break; |
||||
|
} |
||||
|
case 'row': { |
||||
|
for(i=0;i<rows.length;i++){ |
||||
|
row = rows[i]; |
||||
|
for(j=0;j<cols;j++){ |
||||
|
value = row.values[j]; |
||||
|
if(value != 'undefined'){ |
||||
|
index = row.indent+'-'+i+'-'+j; |
||||
|
if(!(index in cells)){ |
||||
|
if(j >= cols-measures){ |
||||
|
cells[index] = 90; |
||||
|
continue; |
||||
|
} |
||||
|
/*other rows*/ |
||||
|
total = self.get_total_row(row.values, i, j); |
||||
|
|
||||
|
color_code = Math.floor(90 + 165*(total - Math.abs(value))/total); |
||||
|
cells[index] = color_code; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
break; |
||||
|
} |
||||
|
case 'both': { |
||||
|
/*setting first row and last columns as base*/ |
||||
|
for(i=0;i<rows.length;i++){ |
||||
|
row = rows[i]; |
||||
|
for(j=cols-1;j>=0;j--){ |
||||
|
value = row.values[j]; |
||||
|
if(value != 'undefined'){ |
||||
|
index = row.indent+'-'+i+'-'+j; |
||||
|
if(!(index in cells)){ |
||||
|
if((j >= cols-measures) && i==0){ |
||||
|
cells[index] = 90; |
||||
|
continue; |
||||
|
} |
||||
|
else if(j >= cols-measures){ |
||||
|
total = self.get_total_col(rows, row.indent, j); |
||||
|
parent_index = self.get_parent_index(row.indent, i, j); |
||||
|
base = (parent_index && cells[parent_index]) ? cells[parent_index] : 90; |
||||
|
color_code = Math.floor(base + 165*(total - Math.abs(value))/total); |
||||
|
cells[index] = color_code; |
||||
|
} |
||||
|
else{ |
||||
|
total = self.get_total_row(row.values, i, j); |
||||
|
var parent_col = self.get_base_value(row, j, measures); |
||||
|
parent_index = parent_col ? (row.indent+'-'+i+'-'+parent_col):null; |
||||
|
base = parent_index ? cells[parent_index] : 90; |
||||
|
color_code = Math.floor(base + 165*(total - Math.abs(value))/total); |
||||
|
cells[index] = color_code; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
this.cells = cells; |
||||
|
} |
||||
|
}, |
||||
|
_renderRowsHeat: function ($tbody, rows) { |
||||
|
var self = this; |
||||
|
/*setting cell colors*/ |
||||
|
this.update_cell_colors(rows); |
||||
|
var i, j, value, measure, name, $row, $cell, $header; |
||||
|
var nbrMeasures = this.state.measures.length; |
||||
|
var length = rows[0].values.length; |
||||
|
var shouldDisplayTotal = this.state.mainColWidth > 1; |
||||
|
var groupbyLabels = _.map(this.state.rowGroupBys, function (gb) { |
||||
|
return self.state.fields[gb.split(':')[0]].string; |
||||
|
}); |
||||
|
var measureTypes = this.state.measures.map(function (name) { |
||||
|
return self.state.fields[name].type; |
||||
|
}); |
||||
|
for (i = 0; i < rows.length; i++) { |
||||
|
$row = $('<tr>'); |
||||
|
$header = $('<td>') |
||||
|
.text(rows[i].title) |
||||
|
.data('id', rows[i].id) |
||||
|
.css('padding-left', (5 + rows[i].indent * 30) + 'px') |
||||
|
.addClass(rows[i].expanded ? 'o_pivot_header_cell_opened' : 'o_pivot_header_cell_closed'); |
||||
|
if (rows[i].indent > 0) $header.attr('title', groupbyLabels[rows[i].indent - 1]); |
||||
|
$header.appendTo($row); |
||||
|
for (j = 0; j < length; j++) { |
||||
|
value = rows[i].values[j]; |
||||
|
if (value !== undefined) { |
||||
|
name = this.state.measures[j % nbrMeasures]; |
||||
|
measure = this.state.fields[name]; |
||||
|
value = field_utils.format[measureTypes[j % nbrMeasures]](value, measure); |
||||
|
} |
||||
|
/*fetching background color*/ |
||||
|
var bg_color = null; |
||||
|
if (value){ |
||||
|
bg_color = self.get_bg_color(value, i, j, rows[i].indent); |
||||
|
} |
||||
|
|
||||
|
$cell = $('<td>') |
||||
|
.data('id', rows[i].id) |
||||
|
.data('col_id', rows[i].col_ids[Math.floor(j / nbrMeasures)]) |
||||
|
.toggleClass('o_empty', !value) |
||||
|
.text(value) |
||||
|
.addClass('o_pivot_cell_value text-right'); |
||||
|
if(bg_color != null){ |
||||
|
$cell.css({'background-color': bg_color}); |
||||
|
} |
||||
|
if (((j >= length - this.state.measures.length) && shouldDisplayTotal) || i === 0){ |
||||
|
$cell.css('font-weight', 'bold'); |
||||
|
} |
||||
|
$row.append($cell); |
||||
|
|
||||
|
$cell.toggleClass('hidden-xs', j < length - nbrMeasures); |
||||
|
} |
||||
|
$tbody.append($row); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
_renderRows: function ($tbody, rows) { |
||||
|
var self = this; |
||||
|
if(this.heat_map != null){ |
||||
|
self._renderRowsHeat($tbody, rows); |
||||
|
} |
||||
|
else{ |
||||
|
this._super($tbody, rows); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,10 @@ |
|||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||
|
<templates id="pivot_heat_map"> |
||||
|
<t t-extend="PivotView.buttons"> |
||||
|
<t t-jquery=".o_pivot_download" t-operation="after"> |
||||
|
<button class="btn btn-default fa fa-th o_heat_map_both" title="Heat Map Page" /> |
||||
|
<button class="btn btn-default fa fa-bars fa-rotate-90 o_heat_map_col" title="Heat Map Column"/> |
||||
|
<button class="btn btn-default fa fa-bars o_heat_map_row" title="Heat Map Row"/> |
||||
|
</t> |
||||
|
</t> |
||||
|
</templates> |
||||
@ -0,0 +1,9 @@ |
|||||
|
<?xml version="1.0" encoding="utf-8" ?> |
||||
|
<odoo> |
||||
|
<template id="assets" inherit_id="web.assets_backend"> |
||||
|
<xpath expr="." position="inside"> |
||||
|
<script type="text/javascript" src="/pivot_heat_map/static/src/js/pivot_controller_extended.js"></script> |
||||
|
<script type="text/javascript" src="/pivot_heat_map/static/src/js/pivot_renderer_extended.js"></script> |
||||
|
</xpath> |
||||
|
</template> |
||||
|
</odoo> |
||||
Loading…
Reference in new issue