This website uses cookies to ensure you get the best experience. Learn More.
Tutorial of Using Promise Object in SOY Portlet to Access Liferay's web service.
{ "dependencies": { "metal-component": "^2.10.0", "metal-soy": "^2.10.0", "chart.js": "^2.4.0" }, "devDependencies": { "liferay-module-config-generator": "^1.2.1", "metal-cli": "^4.0.1" }, "name": "monthly-trading", "version": "1.0.0" }
public void render( RenderRequest renderRequest, RenderResponse renderResponse) throws IOException, PortletException { String tradingYear = "2017"; String pauth = AuthTokenUtil.getToken(PortalUtil.getHttpServletRequest(renderRequest)); String portletNamespace = renderResponse.getNamespace(); template.put("remoteURL", "/api/jsonws/banking.monthlytrading/get-monthly-trading-by-year/year/" + tradingYear + "?p_auth=" + pauth); template.put("tradingYear", tradingYear); template.put("portletNamespace", portletNamespace); super.render(renderRequest, renderResponse); }
constructor(opt_config) { super(opt_config); let remoteURL = opt_config.remoteURL; let tradingYear = opt_config.tradingYear; this.portletNamespace = opt_config.portletNamespace; this.createRemoteChart_(remoteURL, tradingYear); // Hasn't been defined yet. }
import { CancellablePromise } from 'metal-promise/src/promise/Promise';
/** * Get remote trading data * @protected * @param {String} remoetURL * @return {CancellablePromise} A promise that will resolve save permise */ getChartData_(remoteURL) { let promise = new CancellablePromise((resolve, reject) => { let requestConfig = { contentType: false, dataType: "json", processData: false, type: "GET", url: remoteURL }; AUI.$.ajax(requestConfig) .done((data) => resolve(data)) .fail((jqXHF, status, error) => reject(error)); }); return promise; }
/** * Create Chart with data url * * @param {String} remoteURL * @protected */ createRemoteChart_(remoteURL, tradingYear) { this.getChartData_(remoteURL).then(data => { let chartcanvas = document.getElementById(this.portletNamespace + "monthly-trading-chart"); let labels = Array.from(data, d => d.month); let bgColor = this.getPreferedColors_(data.length, 0.3); let borderColor = this.getPreferedColors_(data.length, 0.8); let dataValue = Array.from(data, d => d.volume); let chartData = { labels: labels, datasets: [ { label: "Monthly Trade of " + tradingYear, backgroundColor: bgColor, borderColor: borderColor, borderWidth: 1, data: dataValue, } ] }; let options = { scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] } }; let myBarChart = new Chart(chartcanvas, { type: 'bar', data: chartData, options: options }); }); }
/** * Get Bar background colors from prefered colors * @protected * @param {int} length * @param {string} opacity * @return {Array} a color array */ getPreferedColors_(length, opacity=1) { let colorsRepo = [ "255, 99, 132", "54, 162, 235", "255, 206, 86", "75, 192, 192", "153, 102, 255", "255, 159, 64" ]; let colors = new Array(); for (let i = 0; i < length; i++) { let index = i % colorsRepo.length ; let color = "rgba(" + colorsRepo[index] + "," + opacity + ")"; colors.push(color) } return colors; }