[IMP] Graphs

bzr revid: fp@tinyerp.com-20120507150450-v319vxug5d6a74mf
This commit is contained in:
Fabien Pinckaers 2012-05-07 17:04:50 +02:00
parent 22fb745700
commit 3a214057e4
5 changed files with 15 additions and 220 deletions

View File

@ -47,7 +47,7 @@
"static/src/js/graph.js"
],
"css": [
"static/src/css/*.css",
"static/src/css/graph.css",
],
'qweb' : [
"static/src/xml/*.xml",

View File

@ -1,212 +0,0 @@
body {
font-family : sans-serif;
padding: 0px;
margin: 0px;
}
/* Example */
.flotr-example {
display: none;
margin: 0px auto 48px auto;
position: relative;
}
.flotr-example-label {
font-size: 18px;
padding: 14px 0px;
}
.flotr-example-editor .editor .render {
width: 600px;
height: 400px;
margin: 12px auto 18px auto;
}
.flotr-example-editor .editor .source {
width: 720px;
}
/* Chart no-select */
.flotr-example-editor .editor .render,
.flotr-examples-thumb {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
/* Examples */
.flotr-examples-thumbs {
text-align: center;
}
.flotr-examples-reset {
z-index: 100;
cursor: pointer;
text-decoration: underline;
position: absolute;
top: 260px;
right: 24px;
display: none;
}
.flotr-examples-collapsed .flotr-examples-reset {
display: block;
}
.flotr-examples-thumb {
display: inline-block;
font-size : 11px;
width : 300px;
height : 200px;
margin: 10px 15px;
border: 2px solid transparent;
}
.flotr-examples-thumb.flotr-examples-highlight{
font-size : 12px;
width : 330px;
height : 220px;
margin: 0px 0px;
}
.flotr-examples-thumb .flotr-legend,
.flotr-examples-thumb .flotr-mouse-value {
display : none;
}
.flotr-examples-collapsed .flotr-examples-container {
margin-top: 20px;
position: relative;
margin: 0px auto;
}
.flotr-examples-collapsed .flotr-examples-thumbs {
position: relative;
overflow-x: auto;
white-space: nowrap;
}
/* Flotr Styles */
.flotr-datagrid-container {
border: 1px solid #999;
border-bottom: none;
background: #fff;
}
.flotr-datagrid {
border-collapse: collapse;
border-spacing: 0;
}
.flotr-datagrid td, .flotr-datagrid th {
border: 1px solid #ccc;
padding: 1px 3px;
min-width: 2em;
}
.flotr-datagrid tr:hover, .flotr-datagrid col.hover {
background: #f3f3f3;
}
.flotr-datagrid tr:hover th, .flotr-datagrid th.hover {
background: #999;
color: #fff;
}
.flotr-datagrid th {
text-align: left;
background: #e3e3e3;
border: 2px outset #fff;
}
.flotr-datagrid-toolbar {
padding: 1px;
border-bottom: 1px solid #ccc;
background: #f9f9f9;
}
.flotr-datagrid td:hover {
background: #ccc;
}
.flotr-datagrid .first-row th {
text-align: center;
}
.flotr-canvas {
margin-bottom: -3px;
padding-bottom: 1px;
}
.flotr-tabs-group {
border-top: 1px solid #999;
}
.flotr-tab {
border: 1px solid #666;
border-top: none;
margin: 0 3px;
padding: 1px 4px;
cursor: pointer;
-moz-border-radius: 0 0 4px 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
border-radius: 0 0 4px 4px;
opacity: 0.5;
-moz-opacity: 0.5;
}
.flotr-tab.selected {
background: #ddd;
opacity: 1;
-moz-opacity: 1;
}
.flotr-tab:hover {
background: #ccc;
}
/* Large */
.flotr-examples-large .flotr-example {
width: 1360px;
margin: 0px auto;
position: relative;
}
.flotr-examples-large .flotr-example-editor .editor .render {
margin-left: 0px;
margin-right: 0px;
}
.flotr-examples-large .flotr-example-editor .controls {
top: 0px;
}
.flotr-examples-large .flotr-example-editor .source {
position: absolute;
top: 0px;
right: 0px;
}
/* Veritical Thumbs */
.flotr-examples-large.flotr-examples-collapsed .flotr-examples-reset,
.flotr-examples-medium.flotr-examples-collapsed .flotr-examples-reset {
top: 16px;
}
.flotr-examples-large.flotr-examples-collapsed .flotr-examples-thumbs,
.flotr-examples-medium.flotr-examples-collapsed .flotr-examples-thumbs {
position: fixed;
width: 400px;
left: 0px;
top: 0px;
overflow-y: auto;
background: #fff;
}
.flotr-examples-large.flotr-examples-collapsed .flotr-examples-thumb,
.flotr-examples-medium.flotr-examples-collapsed .flotr-examples-thumb {
display: block;
float: center;
margin: 10px auto;
}
.flotr-examples-large.flotr-examples-collapsed .flotr-examples-container,
.flotr-examples-medium.flotr-examples-collapsed .flotr-examples-container {
margin-left: 400px;
}
/* Vertical Example */
.flotr-examples-small .flotr-example,
.flotr-examples-medium .flotr-example {
width: 720px;
}
.flotr-examples-small .flotr-example-editor .source,
.flotr-examples-medium .flotr-example-editor .source {
position: relative;
}

View File

@ -5,13 +5,12 @@
}
.editor-render {
width: 650px;
position: relative;
}
#editor-render-body {
position: relative;
width: 650px;
height: 440px;
height: 350px;
}
.graph-dropdown {
padding: 5px;

View File

@ -40,9 +40,17 @@ instance.web_graph.GraphView = instance.web.View.extend({
on_loaded: function(fields_view_get) {
// TODO: move to load_view and document
var width, height;
var self = this;
this.fields_view = fields_view_get;
this.container = this.$element.find("#editor-render-body")[0];
this.container = this.$element.find("#editor-render-body");
width = this.$element.parent().width();
this.container.css("width", width);
this.$element.css("width", width);
this.container.css("height", Math.min(500, width*0.8));
this.container = this.container[0];
this.$element.find("#graph_bar,#graph_bar_stacked").click(
{mode: 'bar', stacked: true, legend: 'top'}, $.proxy(this,"graph_render"))
@ -127,7 +135,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
show: this.spreadsheet,
initialTab: "data"
},
HtmlText : (options && options.labelsAngle)?false:!this.forcehtml,
HtmlText : (options && options.xaxis && options.xaxis.labelsAngle)?false:!this.forcehtml,
}, options)
},
@ -169,7 +177,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
horizontalLines : !this.orientation,
outline : "sw",
},
labelsAngle: 45
xaxis : {labelsAngle: 45}
})
)
},
@ -215,7 +223,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
horizontalLines : !this.orientation,
outline : "sw",
},
labelsAngle : 45
xaxis : {labelsAngle: 45}
})
)
},

View File

@ -1,5 +1,5 @@
<template>
<div t-name="GraphView" id="element_id-chart" class="editor-render" style="height:300px; width:300px; position:relative;">
<div t-name="GraphView" id="element-chart" class="editor-render" style="position:relative; width: 300px;">
<div class="graph_header_legend">
</div>
<a href="#" class="oe_i dropdown-menu-icon" data-toggle="dropdown">B</a>