[erp5_officejs] gadget graph dygraph accept zoom range and can fill the area underneath the graph

New options zoom_range array [earliest, latest] in layout should tell which section of the graph to zoom initially.
the graph data type "surface" in dygraph allow to fill the area underneath the graph

bt5/erp5_officejs/PathTemplateItem/document_module/gadget_field_graph_interface_html_schema_json.bin

@@ -47,6 +47,10 @@
                         "right"
                       ],
                       "type": "string"
+                    },
+                    "zoom_range": {
+                      "description": "Initially zoom in on a section of the graph axis. Value is of the form [earliest, latest]",
+                      "type": "array"
                     }
                   },
                   "type": "object",
@@ -106,7 +110,7 @@
         }
       },
       "additionalProperties": false
-    },
+    }
   },
   "type": "object"
-}
+}
\ No newline at end of file

bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_field_graph_dygraph_js.js

@@ -12,7 +12,7 @@
     var graph_data_and_parameter = {},
         layout,
         data,
-        x_label, y_label,
+        x_label, y_label, x_zoom, y_zoom,
         label_list = [],
         trace_value_dict,
         dygraph_data = [],
@@ -35,13 +35,21 @@
     data = configuration_dict.data || [];
     axis_dict = layout.axis_dict || {};
     x_label = (axis_dict[0] || {}).title;
+    x_zoom = (axis_dict[0] || {}).zoom_range;
     y_label = (axis_dict[1] || {}).title;
+    y_zoom = (axis_dict[1] || {}).zoom_range;
     if (x_label !== undefined) {
       graph_data_and_parameter.xlabel = x_label;
     }
+    if (x_zoom !== undefined) {
+      graph_data_and_parameter.dateWindow = x_zoom;
+    }
     if (y_label !== undefined) {
       graph_data_and_parameter.ylabel = y_label;
     }
+    if (y_zoom !== undefined) {
+      graph_data_and_parameter.valueRange = y_zoom;
+    }
     label_list.push(x_label);
 
     /* Dygraph only support 2D, so we assume we have only only two axis for data.
@@ -71,6 +79,8 @@
       if (type === "scatter") {
         serie.drawPoints = true;
         serie.strokeWidth = 0;
+      } else if (type === "surface") {
+        serie.fillGraph = true;
       }
       console.log("serie", serie);
       graph_data_and_parameter.series[trace.title || ''] = serie;

bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_field_graph_dygraph_js.xml

@@ -222,7 +222,7 @@
             </item>
             <item>
                 <key> <string>actor</string> </key>
-                <value> <string>superseb</string> </value>
+                <value> <string>zope</string> </value>
             </item>
             <item>
                 <key> <string>comment</string> </key>
@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>961.22065.145.58026</string> </value>
+                <value> <string>961.61077.56819.56320</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,8 +254,8 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1502453287.3</float>
-                        <string>GMT+2</string>
+                        <float>1504798535.36</float>
+                        <string>UTC</string>
                       </tuple>
                     </state>
                   </object>