Skip to content

erp5
erp5
Commit fbb4489e authored by Jérome Perrin's avatar Jérome Perrin
Browse files
Options

officejs: echarts: use a `disabled` attribute to tell when events are ready 

So that we can wait for this in the tests
parent 337f7901
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 60 deletions
bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_field_graph_echarts_appcache.xml
View file @ fbb4489e
...@@ -112,7 +112,7 @@ ...@@ -112,7 +112,7 @@
<item> <item>
<key> <string>text_content</string> </key> <key> <string>text_content</string> </key>
<value> <string>CACHE MANIFEST\n <value> <string>CACHE MANIFEST\n
# v1.1.0\n # v1.1.1\n
CACHE:\n CACHE:\n
gadget_field_graph_echarts.html/echarts-all.js\n gadget_field_graph_echarts.html/echarts-all.js\n
gadget_field_graph_echarts.html/gadget_global.js\n gadget_field_graph_echarts.html/gadget_global.js\n
...@@ -279,8 +279,8 @@ NETWORK:\n ...@@ -279,8 +279,8 @@ NETWORK:\n
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1506590312.39</float> <float>1538646068.83</float>
<string>UTC</string> <string>GMT+9</string>
</tuple> </tuple>
</state> </state>
</object> </object>
......
bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_field_graph_echarts_html.html
View file @ fbb4489e
<!DOCTYPE html> <!DOCTYPE html>
<!--html style="height: 100%"-->
<html manifest="gadget_field_graph_echarts.appcache" style="height: 300px"> <html manifest="gadget_field_graph_echarts.appcache" style="height: 300px">
<head> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
...@@ -9,7 +7,7 @@ ...@@ -9,7 +7,7 @@
<!-- interfaces --> <!-- interfaces -->
<link rel="http://www.renderjs.org/rel/interface" href="gadget_field_graph_interface.html"> <link rel="http://www.renderjs.org/rel/interface" href="gadget_field_graph_interface.html">
<!-- renderjs --> <!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script> <script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script> <script src="renderjs.js" type="text/javascript"></script>
...@@ -23,7 +21,7 @@ ...@@ -23,7 +21,7 @@
</head> </head>
<body style="height: 100%; margin: 0"> <body style="height: 100%; margin: 0">
<div class="graph-content" style="height: 95%; width: 95%"> <div class="graph-content" style="height: 95%; width: 95%" disabled>
</div> </div>
</body> </body>
</html> </html>
\ No newline at end of file
bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_field_graph_echarts_html.xml
View file @ fbb4489e
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>zope</string> </value> <value> <string>ERP5TypeTestCase</string> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>962.25420.32482.53094</string> </value> <value> <string>970.25483.20924.1058</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -260,8 +260,8 @@ ...@@ -260,8 +260,8 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1506590298.97</float> <float>1538645729.6</float>
<string>UTC</string> <string>GMT+9</string>
</tuple> </tuple>
</state> </state>
</object> </object>
......
bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_field_graph_echarts_js.js
View file @ fbb4489e
...@@ -31,12 +31,12 @@ ...@@ -31,12 +31,12 @@
title = layout.title; title = layout.title;
// title // title
// The position of the title in plotly was fixed, like the "x:center" in echarts. // The position of the title in plotly was fixed, like the "x:center" in echarts.
// For now, every graph have to provide a title. // For now, every graph have to provide a title.
if (title === undefined) { if (title === undefined) {
throw new Error("No title provided", data); throw new Error("No title provided", data);
} }
graph_data_and_parameter.title = {text: title, x: "center"}; graph_data_and_parameter.title = { text: title, x: "center" };
// tooltip // tooltip
// ECharts have to enable the tooltip manually. // ECharts have to enable the tooltip manually.
...@@ -56,10 +56,13 @@ ...@@ -56,10 +56,13 @@
for (i = 0; i < data.length; i = i + 1) { for (i = 0; i < data.length; i = i + 1) {
trace = data[i]; trace = data[i];
trace_type = trace.type || 'bar'; trace_type = trace.type || "bar";
type_list.push(trace_type); type_list.push(trace_type);
trace_value_dict = trace.value_dict || {}; trace_value_dict = trace.value_dict || {};
if (trace_value_dict[0] === undefined || trace_value_dict[1] === undefined) { if (
trace_value_dict[0] === undefined ||
trace_value_dict[1] === undefined
) {
throw new Error("Unexpected data for ECharts", data); throw new Error("Unexpected data for ECharts", data);
} }
...@@ -69,16 +72,16 @@ ...@@ -69,16 +72,16 @@
// If the graph type is pie, set the pie radius // If the graph type is pie, set the pie radius
// plotly doesn't have this option. // plotly doesn't have this option.
if (trace_type === 'pie') { if (trace_type === "pie") {
dataset.radius = '55%'; dataset.radius = "55%";
dataset.center = ['50%', '60%']; dataset.center = ["50%", "60%"];
} }
// For pie graph, the legend labels come from each item's title(aka trace.title) // For pie graph, the legend labels come from each item's title(aka trace.title)
// For graph which contains the axis, the legend labels come from the item's value_dict[0]. // For graph which contains the axis, the legend labels come from the item's value_dict[0].
// See the trace_value_dict in below. But the duplicated value_dict[0] seems for 2D graph // See the trace_value_dict in below. But the duplicated value_dict[0] seems for 2D graph
// seems is redandunt. // seems is redandunt.
if (trace.type !== 'pie') { if (trace.type !== "pie") {
graph_data_and_parameter.legend.data.push(dataset.name); graph_data_and_parameter.legend.data.push(dataset.name);
} }
...@@ -91,21 +94,21 @@ ...@@ -91,21 +94,21 @@
// Value // Value
for (j = 0; j < trace_value_dict[1].length; j = j + 1) { for (j = 0; j < trace_value_dict[1].length; j = j + 1) {
dataset.data.push( dataset.data.push({
{ value: trace_value_dict[1][j],
value: trace_value_dict[1][j], name: label_list[j],
name: label_list[j], itemStyle: null
itemStyle: null });
}
);
// Handle the colors in different ways. Maybe enhanced latter // Handle the colors in different ways. Maybe enhanced latter
if (trace.colors) { if (trace.colors) {
// In the pie graph, set the color each individual "data" item. // In the pie graph, set the color each individual "data" item.
if (trace.type === 'pie') { if (trace.type === "pie") {
dataset.data[j].itemStyle = {normal: {color: trace.colors[j]}}; dataset.data[j].itemStyle = {
normal: { color: trace.colors[j] }
};
} else { } else {
// In other types of graph, set the color for each group. // In other types of graph, set the color for each group.
dataset.itemStyle = {normal: {color: trace.colors[0]}}; dataset.itemStyle = { normal: { color: trace.colors[0] } };
} }
} }
} }
...@@ -113,15 +116,21 @@ ...@@ -113,15 +116,21 @@
} }
// For the pie graph, the legend label is the value_dict[0] // For the pie graph, the legend label is the value_dict[0]
if (trace.type === 'pie') { if (trace.type === "pie") {
graph_data_and_parameter.legend.data = label_list; graph_data_and_parameter.legend.data = label_list;
} }
// Axis // Axis
if (trace.type !== 'pie') { if (trace.type !== "pie") {
// if not value type provided, set it as "value". // if not value type provided, set it as "value".
graph_data_and_parameter.yAxis.push({type: 'value', name: layout.axis_dict[1].title}); graph_data_and_parameter.yAxis.push({
graph_data_and_parameter.xAxis.push({data: label_list, name: layout.axis_dict[0].title}); type: "value",
name: layout.axis_dict[1].title
});
graph_data_and_parameter.xAxis.push({
data: label_list,
name: layout.axis_dict[0].title
});
} else { } else {
graph_data_and_parameter.xAxis = null; graph_data_and_parameter.xAxis = null;
graph_data_and_parameter.yAxis = null; graph_data_and_parameter.yAxis = null;
...@@ -140,9 +149,6 @@ ...@@ -140,9 +149,6 @@
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
// ready // ready
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
.ready(function (gadget) {
gadget.property_dict = {};
})
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
// published methods // published methods
...@@ -155,42 +161,69 @@ ...@@ -155,42 +161,69 @@
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
// declared methods // declared methods
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
.declareMethod('render', function (option_dict) { .declareMethod("render", function (option_dict) {
var gadget = this; var gadget = this;
//delegate rendering to onStateChange to avoid redrawing the graph //delegate rendering to onStateChange to avoid redrawing the graph
//every time render is called (a form might call render every time //every time render is called (a form might call render every time
//some other fields needs update) //some other fields needs update)
gadget.changeState({value: option_dict.value}); gadget.changeState({ value: option_dict.value });
}) })
.onStateChange(function (modification_dict) { .onStateChange(function (modification_dict) {
var gadget = this, var gadget = this,
container,
graph_data_and_parameter, graph_data_and_parameter,
chart; chart;
// the gadget is ready when both the graph is rendered and the click handler is attached.
container = gadget.element.querySelector(".graph-content"); if (
chart = echarts.init(container); modification_dict.hasOwnProperty("clickHandlerReady") ||
graph_data_and_parameter = getGraphDataAndParameterFromConfiguration(modification_dict.value); modification_dict.hasOwnProperty("chartRendered")
chart.setOption(graph_data_and_parameter); ) {
if (gadget.state.clickHandlerReady && gadget.state.chartRendered) {
this.listenToClickEventOnTheChart(chart); gadget.element.querySelector(".graph-content").removeAttribute("disabled");
} else {
gadget.property_dict.chart = chart; gadget.element.querySelector(".graph-content").setAttribute("disabled");
}
}
if (modification_dict.hasOwnProperty("value")) {
chart = echarts.getInstanceByDom(
gadget.element.querySelector(".graph-content")
);
graph_data_and_parameter = getGraphDataAndParameterFromConfiguration(
modification_dict.value
);
chart.on("finished", function onFinished() {
gadget.changeState({ chartRendered: true });
chart.off("finish", onFinished);
});
chart.setOption(graph_data_and_parameter);
gadget.changeState({ chartRendered: false });
this.listenToClickEventOnTheChart(chart);
}
}) })
.declareService(function () { .declareService(function () {
var gadget = this; var gadget = this,
return loopEventListener(window, "resize", {passive: true}, function () { chart = echarts.init(gadget.element.querySelector(".graph-content"));
gadget.property_dict.chart.resize(); return loopEventListener(
}, false); window,
"resize",
{ passive: true },
function () {
chart.resize();
},
false
);
}) })
.declareJob('listenToClickEventOnTheChart', function (chart) {
.declareJob("listenToClickEventOnTheChart", function (chart) {
var gadget = this, var gadget = this,
defer = RSVP.defer(); defer = RSVP.defer();
// XXX https://lab.nexedi.com/nexedi/renderjs/blob/master/renderjs.js#L25 // XXX https://lab.nexedi.com/nexedi/renderjs/blob/master/renderjs.js#L25
chart.on('click', function (params) { chart.on("click", function (params) {
return gadget.chartItemClick([params.name, params.seriesName]) return gadget
.chartItemClick([params.name, params.seriesName])
.push(undefined, defer.reject); .push(undefined, defer.reject);
}); });
gadget.changeState({ clickHandlerReady: true });
return defer.promise; return defer.promise;
}); });
}(window, rJS, RSVP, echarts, loopEventListener)); }(window, rJS, RSVP, echarts, loopEventListener));
bt5/erp5_officejs/PathTemplateItem/web_page_module/gadget_field_graph_echarts_js.xml
View file @ fbb4489e
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>zope</string> </value> <value> <string>ERP5TypeTestCase</string> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.52409.12026.48179</string> </value> <value> <string>970.25488.14039.8704</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -260,8 +260,8 @@ ...@@ -260,8 +260,8 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1504517195.47</float> <float>1538645846.68</float>
<string>UTC</string> <string>GMT+9</string>
</tuple> </tuple>
</state> </state>
</object> </object>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7