[IMP] Graphs

bzr revid: fp@tinyerp.com-20120507150450-v319vxug5d6a74mf

4 files changed, 14 insertions, 219 deletions

diff --git a/addons/web_graph/static/src/css/flotr2.css b/addons/web_graph/static/src/css/flotr2.css
deleted file mode 100644
index 08c8fe7a211..00000000000
--- a/addons/web_graph/static/src/css/flotr2.css
+++ /dev/null
@@ -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;
-}
diff --git a/addons/web_graph/static/src/css/graph.css b/addons/web_graph/static/src/css/graph.css
index 793d04e0819..38fb6d70e0d 100644
--- a/addons/web_graph/static/src/css/graph.css
+++ b/addons/web_graph/static/src/css/graph.css
@@ -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;
diff --git a/addons/web_graph/static/src/js/graph.js b/addons/web_graph/static/src/js/graph.js
index 75490e076f9..9b4f123111e 100644
--- a/addons/web_graph/static/src/js/graph.js
+++ b/addons/web_graph/static/src/js/graph.js
@@ -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}
             })
         )
     },
diff --git a/addons/web_graph/static/src/xml/web_graph.xml b/addons/web_graph/static/src/xml/web_graph.xml
index dbc19880ff2..5b022a681ed 100644
--- a/addons/web_graph/static/src/xml/web_graph.xml
+++ b/addons/web_graph/static/src/xml/web_graph.xml
@@ -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>