erp5_officejs_support_request_ui: Switch the backend chart library from Chartjs to ECharts.
ECharts has better visual effect than Chartjs. And also update the tests.
Showing
| /*global document, window, Option, rJS, RSVP, Chart, loopEventListener*/ | /*global document, window, Option, rJS, RSVP, loopEventListener*/ | ||
| /*jslint nomen: true, indent: 2, maxerr: 3 */ | /*jslint nomen: true, indent: 2, maxerr: 3 */ | ||
| (function (window, rJS, RSVP, loopEventListener) { | (function (window, rJS, RSVP, loopEventListener) { | ||
| "use strict"; | "use strict"; | ||
| ... | @@ -26,44 +26,19 @@ | ... | @@ -26,44 +26,19 @@ |
| .allowPublicAcquisition("updateHeader", function () { | .allowPublicAcquisition("updateHeader", function () { | ||
| return; | return; | ||
| }) | }) | ||
| ///////////////////////////////////////////////////////////////// | ///////////////////////////////////////////////////////////////// | ||
| // declared methods | // declared methods | ||
| ///////////////////////////////////////////////////////////////// | ///////////////////////////////////////////////////////////////// | ||
| .declareMethod("render", function () { | .declareMethod("render", function (options) { | ||
| var gadget = this; | var gadget = this; | ||
| return new RSVP.Queue() | |||
| .push(function () { | |||
| return RSVP.all([ | |||
| gadget.jio_getAttachment("support_request_module", "links"), | |||
| gadget.getDeclaredGadget("last") | |||
| ]); | |||
| }) | |||
| .push(function (result_list) { | |||
| var i, | |||
| erp5_document = result_list[0], | |||
| view_list = erp5_document._links.action_object_view || [], | |||
| last_href; | |||
| if (view_list.constructor !== Array) { | |||
| view_list = [view_list]; | |||
| } | |||
| for (i = 0; i < view_list.length; i += 1) { | return gadget.changeState({ | ||
| if (view_list[i].name === 'view_last_support_request') { | render: true | ||
| last_href = view_list[i].href; | }) | ||
| } | .push(function () { | ||
| } | return gadget.changeState({ | ||
| if (last_href === undefined) { | field_listbox_begin_from: options.field_listbox_begin_from | ||
| throw new Error('Cant find the list document view'); | }); | ||
| } | |||
| return RSVP.all([ | |||
| result_list[1].render({ | |||
| jio_key: "support_request_module", | |||
| view: last_href | |||
| }) | |||
| ]); | |||
| }) | }) | ||
| .push(function () { | .push(function () { | ||
| return gadget.updateHeader({ | return gadget.updateHeader({ | ||
| ... | @@ -71,91 +46,196 @@ | ... | @@ -71,91 +46,196 @@ |
| }); | }); | ||
| }); | }); | ||
| }) | }) | ||
| .declareService(function () { | .declareJob("renderGraph", function () { | ||
| var gadget = this; | var gadget = this, | ||
| option_dict = gadget.property_dict.option_dict; | |||
| return gadget.getSetting("hateoas_url") | return gadget.getSetting("hateoas_url") | ||
| .push(function (hateoas_url) { | .push(function (hateoas_url) { | ||
| return gadget.jio_getAttachment( | return RSVP.all([gadget.jio_getAttachment( | ||
| 'support_request_module', | 'support_request_module', | ||
| hateoas_url + 'support_request_module' | hateoas_url + 'support_request_module' | ||
| + "/SupportRequest_getSupportRequestStatisticsAsJson" | + "/SupportRequest_getSupportRequestStatisticsAsJson" | ||
| ); | ), | ||
| gadget.declareGadget( | |||
| option_dict.graph_gadget, | |||
| { | |||
| scope: "graph", | |||
| sandbox: "iframe", | |||
| element: gadget.property_dict.element.querySelector("#wrap1") | |||
| } | |||
| ), | |||
| gadget.declareGadget( | |||
| option_dict.graph_gadget, | |||
| { | |||
| scope: "graph", | |||
| sandbox: "iframe", | |||
| element: gadget.property_dict.element.querySelector("#wrap2") | |||
| } | |||
| ) | |||
| ]); | |||
| }) | }) | ||
| .push(function (result) { | .push(function (result_list) { | ||
| new Chart(document.getElementById("bar-chart-grouped"), { | var sp_data = result_list[0], graph_gadget_1 = result_list[1], graph_gadget_2 = result_list[2]; | ||
| type: 'bar', | gadget.property_dict.graph_widget = graph_gadget_1; | ||
| data: { | return RSVP.all([graph_gadget_1.render( | ||
| labels: ["Less than 2 days", "2-7 days", "7-30 days", "More than 30 days"], | { | ||
| datasets: [ | value: { | ||
| { | data: [ | ||
| label: "Opened", | { | ||
| backgroundColor: "#3e95cd", | value_dict: { | ||
| data: [ | 0: ["Less than 2 days", "2-7 days", "7-30 days", "More than 30 days"], | ||
| result.le2.validated, | 1: [ | ||
| result['2to7'].validated, | sp_data.le2.validated, | ||
| result['7to30'].validated, | sp_data['2to7'].validated, | ||
| result.gt30.validated | sp_data['7to30'].validated, | ||
| ] | sp_data.gt30.validated | ||
| }, | ] | ||
| { | }, | ||
| label: "Submitted", | colors: ['#d48265'], | ||
| backgroundColor: "#e8c3b9", | type: "bar", | ||
| data: [ | title: "Opened" | ||
| result.le2.submitted, | }, | ||
| result['2to7'].submitted, | { | ||
| result['7to30'].submitted, | value_dict: { | ||
| result.gt30.submitted | 0: ["Less than 2 days", "2-7 days", "7-30 days", "More than 30 days"], | ||
| ] | 1: [ | ||
| }, | sp_data.le2.submitted, | ||
| { | sp_data['2to7'].submitted, | ||
| label: "Suspended", | sp_data['7to30'].submitted, | ||
| backgroundColor: "#3cba9f", | sp_data.gt30.submitted | ||
| data: [ | ] | ||
| result.le2.suspended, | }, | ||
| result['2to7'].suspended, | colors: ['#61a0a8'], | ||
| result['7to30'].suspended, | type: "bar", | ||
| result.gt30.suspended | title: "Submitted" | ||
| ] | }, | ||
| }, | { | ||
| { | value_dict: { | ||
| label: "Closed", | 0: ["Less than 2 days", "2-7 days", "7-30 days", "More than 30 days"], | ||
| backgroundColor: "#8e5ea2", | 1: [ | ||
| data: [ | sp_data.le2.suspended, | ||
| result.le2.invalidated, | sp_data['2to7'].suspended, | ||
| result['2to7'].invalidated, | sp_data['7to30'].suspended, | ||
| result['7to30'].invalidated, | sp_data.gt30.suspended | ||
| result.gt30.invalidated | ] | ||
| ] | }, | ||
| colors: ['#c23531'], | |||
| type: "bar", | |||
| title: "Suspended" | |||
| }, | |||
| { | |||
| value_dict: { | |||
| 0: ["Less than 2 days", "2-7 days", "7-30 days", "More than 30 days"], | |||
| 1: [ | |||
| sp_data.le2.invalidated, | |||
| sp_data['2to7'].invalidated, | |||
| sp_data['7to30'].invalidated, | |||
| sp_data.gt30.invalidated | |||
| ] | |||
| }, | |||
| colors: ['#2f4554'], | |||
| type: "bar", | |||
| title: "Closed" | |||
| } | |||
| ], | |||
| layout: { | |||
| axis_dict : { | |||
| '0': {"title": "Days"}, | |||
| '1': {"title": "Number", "value_type": "number"} | |||
| }, | |||
| title: "Support Request state since last 30 days" | |||
| } | } | ||
| ] | |||
| }, | |||
| options: { | |||
| responsive : true, | |||
| title: { | |||
| display: true, | |||
| text: 'Support Requests activities' | |||
| } | } | ||
| } | } | ||
| ), | |||
| sp_data, | |||
| graph_gadget_2 | |||
| ]); | |||
| }) | |||
| .push(function (result_list) { | |||
| var sp_data = result_list[1], graph_gadget = result_list[2]; | |||
| gadget.property_dict.graph_widget = graph_gadget; | |||
| return graph_gadget.render({ | |||
| value: | |||
| { | |||
| data: [ | |||
| { | |||
| value_dict: { | |||
| 0: ["Opened", "Submitted", "Suspended", "Closed"], | |||
| 1: [sp_data.validated, sp_data.submitted, sp_data.suspended, sp_data.invalidated] | |||
| }, | |||
| colors: ['#d48265', '#61a0a8', '#c23531', '#2f4554'], | |||
| type: "pie", | |||
| title: "Support Request" | |||
| } | |||
| ], | |||
| layout: { | |||
| axis_dict : { | |||
| 0: {"title": "date"}, | |||
| 1: {"title": "value", "value_type": "number"} | |||
| }, | |||
| title: "Support Request activites" | |||
| } | |||
| } | |||
| }); | }); | ||
| new Chart(document.getElementById("pie-chart"), { | }); | ||
| type: 'pie', | }) | ||
| data: { | .onStateChange(function (modification_dict) { | ||
| labels: ["Opened", "Closed", "Suspended", "Submitted"], | var gadget = this, | ||
| datasets: [{ | queue = new RSVP.Queue(); | ||
| label: "All Support Requests Status", | if (modification_dict.hasOwnProperty("field_listbox_begin_from")) { | ||
| backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9"], | // render the erp5 form | ||
| data: [result.validated, result.invalidated, result.suspended, result.submitted] | queue | ||
| }] | .push(function () { | ||
| }, | return gadget.getDeclaredGadget("last"); | ||
| options: { | }) | ||
| responsive : true, | .push(function (result_list) { | ||
| title: { | var erp5_form = result_list, | ||
| display: true, | tmp; | ||
| text: 'Support Requests state since last 30 days' | |||
| tmp = JSON.parse(erp5_form.state.erp5_form); | |||
| tmp.field_listbox_begin_from = modification_dict.field_listbox_begin_from; | |||
| return erp5_form.changeState({erp5_form: JSON.stringify(tmp)}); | |||
| }); | |||
| } | |||
| if (modification_dict.hasOwnProperty("render")) { | |||
| queue | |||
| .push(function () { | |||
| return RSVP.all([ | |||
| gadget.jio_getAttachment("support_request_module", "links"), | |||
| gadget.getDeclaredGadget("last") | |||
| ]); | |||
| }) | |||
| .push(function (result_list) { | |||
| var i, | |||
| erp5_document = result_list[0], | |||
| view_list = erp5_document._links.action_object_view || [], | |||
| last_href; | |||
| if (view_list.constructor !== Array) { | |||
| view_list = [view_list]; | |||
| } | |||
| for (i = 0; i < view_list.length; i += 1) { | |||
| if (view_list[i].name === 'view_last_support_request') { | |||
| last_href = view_list[i].href; | |||
| } | } | ||
| } | } | ||
| if (last_href === undefined) { | |||
| throw new Error('Cant find the list document view'); | |||
| } | |||
| gadget.property_dict.option_dict = {graph_gadget: "unsafe/gadget_field_graph_echarts.html"}; | |||
|
|||
| return RSVP.all([ | |||
| result_list[1].render({ | |||
| jio_key: "support_request_module", | |||
| view: last_href | |||
| }), | |||
| gadget.renderGraph() //Launched as service, not blocking | |||
| ]); | |||
| }); | }); | ||
| }); | } | ||
| return queue; | |||
| }) | }) | ||
| .declareService(function () { | .declareService(function () { | ||
| var gadget = this; | var gadget = this; | ||
| ... | ... | ||
