982 lines
28 KiB
Java
982 lines
28 KiB
Java
package org.gcube.portlets.admin.accountingmanager.client.maindata;
|
|
|
|
import java.util.Date;
|
|
|
|
import org.gcube.portlets.admin.accountingmanager.client.event.StateChangeEvent;
|
|
import org.gcube.portlets.admin.accountingmanager.client.state.AccountingStateData;
|
|
import org.gcube.portlets.admin.accountingmanager.shared.data.AccountingPeriod;
|
|
import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesJob;
|
|
import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesPortlet;
|
|
import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesService;
|
|
import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesServiceData;
|
|
import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesStorage;
|
|
import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesStorageData;
|
|
import org.gcube.portlets.admin.accountingmanager.shared.data.response.SeriesTask;
|
|
|
|
import com.allen_sauer.gwt.log.client.Log;
|
|
import com.github.highcharts4gwt.client.view.widget.HighchartsLayoutPanel;
|
|
import com.github.highcharts4gwt.model.array.api.ArrayNumber;
|
|
import com.github.highcharts4gwt.model.array.api.ArrayString;
|
|
import com.github.highcharts4gwt.model.factory.api.HighchartsOptionFactory;
|
|
import com.github.highcharts4gwt.model.factory.jso.JsoHighchartsOptionFactory;
|
|
import com.github.highcharts4gwt.model.highcharts.option.api.ChartOptions;
|
|
import com.github.highcharts4gwt.model.highcharts.option.api.SeriesArea;
|
|
import com.github.highcharts4gwt.model.highcharts.option.api.SeriesColumn;
|
|
import com.google.gwt.event.shared.EventBus;
|
|
import com.sencha.gxt.widget.core.client.FramedPanel;
|
|
|
|
/**
|
|
*
|
|
* @author giancarlo email: <a
|
|
* href="mailto:g.panichi@isti.cnr.it">g.panichi@isti.cnr.it</a>
|
|
*
|
|
*/
|
|
public class HightChartPanel extends FramedPanel {
|
|
|
|
private EventBus eventBus;
|
|
|
|
public HightChartPanel(EventBus eventBus) {
|
|
super();
|
|
this.eventBus = eventBus;
|
|
// msgs = GWT.create(ServiceCategoryMessages.class);
|
|
init();
|
|
create();
|
|
bindToEvents();
|
|
}
|
|
|
|
protected void init() {
|
|
forceLayoutOnResize = true;
|
|
setBodyBorder(false);
|
|
setBorders(false);
|
|
setHeaderVisible(false);
|
|
setResize(true);
|
|
|
|
}
|
|
|
|
|
|
|
|
private void create() {
|
|
|
|
}
|
|
|
|
|
|
// Bind to Events
|
|
private void bindToEvents() {
|
|
eventBus.addHandler(StateChangeEvent.TYPE,
|
|
new StateChangeEvent.StateChangeEventHandler() {
|
|
|
|
@Override
|
|
public void onStateChange(StateChangeEvent event) {
|
|
Log.debug("Catch Event State Change");
|
|
doStateChangeCommand(event);
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
private void doStateChangeCommand(StateChangeEvent event) {
|
|
if (event.getStateChangeType() == null) {
|
|
return;
|
|
}
|
|
switch (event.getStateChangeType()) {
|
|
case Restore:
|
|
case Update:
|
|
onStateChange(event);
|
|
|
|
break;
|
|
default:
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
private void onStateChange(StateChangeEvent event) {
|
|
if (event.getAccountingStateData() == null
|
|
|| event.getAccountingStateData().getAccountingType() == null) {
|
|
return;
|
|
}
|
|
|
|
switch (event.getAccountingStateData().getAccountingType()) {
|
|
case JOB:
|
|
createJobChart(event.getAccountingStateData());
|
|
break;
|
|
case PORTLET:
|
|
createPortletChart(event.getAccountingStateData());
|
|
break;
|
|
case SERVICE:
|
|
createServiceChart(event.getAccountingStateData());
|
|
break;
|
|
case STORAGE:
|
|
createStorageChart(event.getAccountingStateData());
|
|
break;
|
|
case TASK:
|
|
createTaskChart(event.getAccountingStateData());
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
}
|
|
|
|
private double calculateMinRange(AccountingPeriod accountingPeriod) {
|
|
if (accountingPeriod.getPeriod() == null) {
|
|
Log.error("AccountingPeriodMode is null");
|
|
return 0;
|
|
}
|
|
|
|
switch (accountingPeriod.getPeriod()) {
|
|
case DAILY:
|
|
// 1 day=24hour * 60min *60sec * 1000 millisec
|
|
return 14 * 24 * 3600 * 1000;
|
|
case HOURLY:
|
|
return 24 * 3600 * 1000;
|
|
case MILLISECONDLY:
|
|
return 10 * 100;
|
|
case MINUTELY:
|
|
return 10 * 60 * 1000;
|
|
case MONTHLY:
|
|
return 6 * 28 * 24 * 3600 * 1000;
|
|
case SECONDLY:
|
|
return 30 * 1000;
|
|
case YEARLY:
|
|
return 5 * 12 * 28 * 24 * 3600 * 1000;
|
|
|
|
default:
|
|
return 0;
|
|
}
|
|
|
|
}
|
|
|
|
private double calculateInterval(AccountingPeriod accountingPeriod) {
|
|
if (accountingPeriod.getPeriod() == null) {
|
|
Log.error("AccountingPeriodMode is null");
|
|
return 0;
|
|
}
|
|
|
|
switch (accountingPeriod.getPeriod()) {
|
|
case DAILY:
|
|
return 24 * 3600 * 1000;
|
|
case HOURLY:
|
|
return 3600 * 1000;
|
|
case MILLISECONDLY:
|
|
return 100;
|
|
case MINUTELY:
|
|
return 60 * 1000;
|
|
case MONTHLY:
|
|
return 28 * 24 * 3600 * 1000;
|
|
case SECONDLY:
|
|
return 1000;
|
|
case YEARLY:
|
|
return 12 * 28 * 24 * 3600 * 1000;
|
|
|
|
default:
|
|
return 0;
|
|
}
|
|
|
|
}
|
|
|
|
private void createStorageChart(AccountingStateData accountingStateData) {
|
|
clear();
|
|
if (accountingStateData == null
|
|
|| accountingStateData.getAccountingType() == null
|
|
|| accountingStateData.getSeriesRequest() == null
|
|
|| accountingStateData.getSeriesResponse() == null) {
|
|
forceLayout();
|
|
return;
|
|
}
|
|
|
|
if(!(accountingStateData
|
|
.getSeriesResponse() instanceof SeriesStorage)){
|
|
forceLayout();
|
|
return;
|
|
}
|
|
|
|
|
|
SeriesStorage seriesStorage = (SeriesStorage) accountingStateData
|
|
.getSeriesResponse();
|
|
|
|
double minRange = calculateMinRange(accountingStateData
|
|
.getSeriesRequest().getAccountingPeriod());
|
|
|
|
double interval=calculateInterval(accountingStateData
|
|
.getSeriesRequest().getAccountingPeriod());
|
|
|
|
Date dateStart=accountingStateData.getSeriesRequest().getAccountingPeriod().getStartDate();
|
|
|
|
HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
|
|
ChartOptions options = highchartsFactory.createChartOptions();
|
|
options.chart().zoomType("x");
|
|
|
|
options.title().text("Accounting Storage");
|
|
|
|
options.subtitle().text("Click and drag in the plot area to zoom in");
|
|
|
|
ArrayString colors = options.colors();
|
|
// colors.setValue(0, "#cc0038");
|
|
// colors.setValue(1, "#32cd32");
|
|
|
|
|
|
// xAxis
|
|
options.xAxis().type("datetime").minRange(minRange);
|
|
|
|
// yAxis
|
|
// options.yAxis().title().text("Exchange rate");
|
|
// Highcharts.getOptions().colors[0]
|
|
String multiAxis = "[{" + " \"id\": \"OperationCount\","
|
|
+ " \"labels\": { " + " \"format\": \"{value}\","
|
|
+ " \"style\": { " + " \"color\": \""
|
|
+ colors.get(1)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"title\": { "
|
|
+ " \"text\": \"Operation Count\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(1)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }"
|
|
+ "} , {"
|
|
+ " \"id\": \"DataVolume\", "
|
|
+ " \"title\": {"
|
|
+ " \"text\": \"Data Volume\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(0)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"labels\": {"
|
|
+ " \"format\": \"{value} kB\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(0)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }," + " \"opposite\": \"true\"" + "}]";
|
|
|
|
options.setFieldAsJsonObject("yAxis", multiAxis);
|
|
|
|
// TODO does not seem to be working
|
|
String fillcolor = "{" + "\"linearGradient\": {" + "\"x1\": 0,"
|
|
+ "\"y1\": 0," + "\"x2\": 0," + "\"y2\": 1" + "},"
|
|
+ "\"stops\": [" + "[" + "0, \"#058DC7\"" + "]," + "["
|
|
+ "1, \"#FFFFFF\"" + "]" + "]" + "}";
|
|
|
|
options.plotOptions().area()
|
|
.setFieldAsJsonObject("fillColor", fillcolor).marker()
|
|
.radius(2).lineWidth(1).states().hover().lineWidth(1);
|
|
|
|
|
|
|
|
SeriesColumn seriesOperationCount = highchartsFactory.createSeriesColumn();
|
|
seriesOperationCount.name("Operation Count");
|
|
seriesOperationCount.color(colors.get(1));
|
|
seriesOperationCount.type("column");
|
|
|
|
ArrayNumber dataOperationCount = seriesOperationCount
|
|
.dataAsArrayNumber();
|
|
|
|
seriesOperationCount.pointInterval(interval).pointStart(dateStart.getTime());
|
|
|
|
SeriesArea seriesDataVolume = highchartsFactory.createSeriesArea();
|
|
seriesDataVolume.name("Data Volume");
|
|
seriesDataVolume.color(colors.get(0));
|
|
seriesDataVolume.yAxisAsString("DataVolume");
|
|
|
|
|
|
ArrayNumber dataDataVolume = seriesDataVolume.dataAsArrayNumber();
|
|
|
|
|
|
seriesDataVolume.pointInterval(interval).pointStart(
|
|
dateStart.getTime());
|
|
|
|
|
|
for (SeriesStorageData seriesStorageData : seriesStorage.getSeries()) {
|
|
dataOperationCount.push(seriesStorageData.getOperationCount());
|
|
dataDataVolume.push(seriesStorageData.getDataVolume());
|
|
}
|
|
|
|
|
|
options.series().addToEnd(seriesOperationCount);
|
|
options.series().addToEnd(seriesDataVolume);
|
|
|
|
options.chart().showAxes(true);
|
|
|
|
options.legend().enabled(true);
|
|
// options.legend().layout("vertical");
|
|
// options.legend().align("left");
|
|
// options.legend().x(120);
|
|
// options.legend().verticalAlign("top");
|
|
// options.legend().y(100);
|
|
// options.legend().floating(true);
|
|
// options.legend()
|
|
// .backgroundColor(
|
|
// "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'white'");
|
|
|
|
HighchartsLayoutPanel highchartsLayoutPanel = new HighchartsLayoutPanel();
|
|
|
|
highchartsLayoutPanel.renderChart(options);
|
|
|
|
add(highchartsLayoutPanel);
|
|
forceLayout();
|
|
}
|
|
|
|
private void createServiceChart(AccountingStateData accountingStateData) {
|
|
clear();
|
|
if (accountingStateData == null
|
|
|| accountingStateData.getAccountingType() == null
|
|
|| accountingStateData.getSeriesRequest() == null
|
|
|| accountingStateData.getSeriesResponse() == null) {
|
|
forceLayout();
|
|
return;
|
|
}
|
|
|
|
if(!(accountingStateData
|
|
.getSeriesResponse() instanceof SeriesService)){
|
|
forceLayout();
|
|
return;
|
|
}
|
|
|
|
|
|
SeriesService seriesService = (SeriesService) accountingStateData
|
|
.getSeriesResponse();
|
|
|
|
double minRange = calculateMinRange(accountingStateData
|
|
.getSeriesRequest().getAccountingPeriod());
|
|
|
|
double interval=calculateInterval(accountingStateData
|
|
.getSeriesRequest().getAccountingPeriod());
|
|
|
|
Date dateStart=accountingStateData.getSeriesRequest().getAccountingPeriod().getStartDate();
|
|
|
|
HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
|
|
ChartOptions options = highchartsFactory.createChartOptions();
|
|
options.chart().zoomType("x");
|
|
|
|
options.title().text("Accounting Service");
|
|
|
|
options.subtitle().text("Click and drag in the plot area to zoom in");
|
|
|
|
ArrayString colors = options.colors();
|
|
// colors.setValue(0, "#cc0038");
|
|
// colors.setValue(1, "#32cd32");
|
|
|
|
|
|
// xAxis
|
|
options.xAxis().type("datetime").minRange(minRange);
|
|
|
|
// yAxis
|
|
// options.yAxis().title().text("Exchange rate");
|
|
// Highcharts.getOptions().colors[0]
|
|
String multiAxis = "[{" + " \"id\": \"OperationCount\","
|
|
+ " \"labels\": { " + " \"format\": \"{value}\","
|
|
+ " \"style\": { " + " \"color\": \""
|
|
+ colors.get(1)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"title\": { "
|
|
+ " \"text\": \"Operation Count\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(1)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }"
|
|
+ "} , {"
|
|
+ " \"id\": \"Duration\", "
|
|
+ " \"title\": {"
|
|
+ " \"text\": \"Duration\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(0)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"labels\": {"
|
|
+ " \"format\": \"{value} ms\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(0)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }," + " \"opposite\": \"true\""
|
|
+ "} , {"
|
|
+ " \"id\": \"MaxInvocationTime\", "
|
|
+ " \"title\": {"
|
|
+ " \"text\": \"Max Invocation Time\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(2)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"labels\": {"
|
|
+ " \"format\": \"{value} ms\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(2)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }," + " \"opposite\": \"true\""
|
|
+ "} , {"
|
|
+ " \"id\": \"MinInvocationTime\", "
|
|
+ " \"title\": {"
|
|
+ " \"text\": \"Min Invocation Time\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(3)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"labels\": {"
|
|
+ " \"format\": \"{value} ms\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(3)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }," + " \"opposite\": \"true\"" + "}]"
|
|
|
|
;
|
|
|
|
options.setFieldAsJsonObject("yAxis", multiAxis);
|
|
|
|
// TODO does not seem to be working
|
|
String fillcolor = "{" + "\"linearGradient\": {" + "\"x1\": 0,"
|
|
+ "\"y1\": 0," + "\"x2\": 0," + "\"y2\": 1" + "},"
|
|
+ "\"stops\": [" + "[" + "0, \"#058DC7\"" + "]," + "["
|
|
+ "1, \"#FFFFFF\"" + "]" + "]" + "}";
|
|
|
|
options.plotOptions().area()
|
|
.setFieldAsJsonObject("fillColor", fillcolor).marker()
|
|
.radius(2).lineWidth(1).states().hover().lineWidth(1);
|
|
|
|
|
|
|
|
SeriesColumn seriesOperationCount = highchartsFactory.createSeriesColumn();
|
|
seriesOperationCount.name("Operation Count");
|
|
seriesOperationCount.color(colors.get(1));
|
|
seriesOperationCount.type("column");
|
|
|
|
ArrayNumber dataOperationCount = seriesOperationCount
|
|
.dataAsArrayNumber();
|
|
|
|
seriesOperationCount.pointInterval(interval).pointStart(dateStart.getTime());
|
|
|
|
SeriesArea seriesDuration = highchartsFactory.createSeriesArea();
|
|
seriesDuration.name("Duration");
|
|
seriesDuration.color(colors.get(0));
|
|
seriesDuration.yAxisAsString("Duration");
|
|
|
|
|
|
ArrayNumber dataDuration = seriesDuration.dataAsArrayNumber();
|
|
|
|
|
|
seriesDuration.pointInterval(interval).pointStart(
|
|
dateStart.getTime());
|
|
|
|
SeriesArea seriesMaxInvocationTime = highchartsFactory.createSeriesArea();
|
|
seriesMaxInvocationTime.name("Max Invocation Time");
|
|
seriesMaxInvocationTime.color(colors.get(2));
|
|
seriesMaxInvocationTime.yAxisAsString("MaxInvocationTime");
|
|
|
|
|
|
ArrayNumber dataMaxInvocationTime = seriesMaxInvocationTime.dataAsArrayNumber();
|
|
|
|
|
|
seriesMaxInvocationTime.pointInterval(interval).pointStart(
|
|
dateStart.getTime());
|
|
|
|
SeriesArea seriesMinInvocationTime = highchartsFactory.createSeriesArea();
|
|
seriesMinInvocationTime.name("Min Invocation Time");
|
|
seriesMinInvocationTime.color(colors.get(3));
|
|
seriesMinInvocationTime.yAxisAsString("MinInvocationTime");
|
|
|
|
|
|
ArrayNumber dataMinInvocationTime = seriesMinInvocationTime.dataAsArrayNumber();
|
|
|
|
|
|
seriesMinInvocationTime.pointInterval(interval).pointStart(
|
|
dateStart.getTime());
|
|
|
|
|
|
|
|
for (SeriesServiceData seriesServiceData : seriesService.getSeries()) {
|
|
dataOperationCount.push(seriesServiceData.getOperationCount());
|
|
dataDuration.push(seriesServiceData.getDuration());
|
|
dataMaxInvocationTime.push(seriesServiceData.getMaxInvocationTime());
|
|
dataMinInvocationTime.push(seriesServiceData.getMinInvocationTime());
|
|
}
|
|
|
|
options.series().addToEnd(seriesOperationCount);
|
|
options.series().addToEnd(seriesDuration);
|
|
options.series().addToEnd(seriesMaxInvocationTime);
|
|
options.series().addToEnd(seriesMinInvocationTime);
|
|
|
|
options.chart().showAxes(true);
|
|
|
|
options.legend().enabled(true);
|
|
// options.legend().layout("vertical");
|
|
// options.legend().align("left");
|
|
// options.legend().x(120);
|
|
// options.legend().verticalAlign("top");
|
|
// options.legend().y(100);
|
|
// options.legend().floating(true);
|
|
// options.legend()
|
|
// .backgroundColor(
|
|
// "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'white'");
|
|
|
|
HighchartsLayoutPanel highchartsLayoutPanel = new HighchartsLayoutPanel();
|
|
|
|
highchartsLayoutPanel.renderChart(options);
|
|
|
|
add(highchartsLayoutPanel);
|
|
forceLayout();
|
|
}
|
|
|
|
private void createPortletChart(AccountingStateData accountingStateData) {
|
|
clear();
|
|
if (accountingStateData == null
|
|
|| accountingStateData.getAccountingType() == null
|
|
|| accountingStateData.getSeriesRequest() == null
|
|
|| accountingStateData.getSeriesResponse() == null) {
|
|
forceLayout();
|
|
return;
|
|
}
|
|
|
|
if(!(accountingStateData
|
|
.getSeriesResponse() instanceof SeriesPortlet)){
|
|
forceLayout();
|
|
return;
|
|
}
|
|
|
|
|
|
SeriesStorage seriesStorage = (SeriesStorage) accountingStateData
|
|
.getSeriesResponse();
|
|
|
|
double minRange = calculateMinRange(accountingStateData
|
|
.getSeriesRequest().getAccountingPeriod());
|
|
|
|
double interval=calculateInterval(accountingStateData
|
|
.getSeriesRequest().getAccountingPeriod());
|
|
|
|
Date dateStart=accountingStateData.getSeriesRequest().getAccountingPeriod().getStartDate();
|
|
|
|
HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
|
|
ChartOptions options = highchartsFactory.createChartOptions();
|
|
options.chart().zoomType("x");
|
|
|
|
options.title().text("Accounting Portlet");
|
|
|
|
options.subtitle().text("Click and drag in the plot area to zoom in");
|
|
|
|
ArrayString colors = options.colors();
|
|
// colors.setValue(0, "#cc0038");
|
|
// colors.setValue(1, "#32cd32");
|
|
|
|
|
|
// xAxis
|
|
options.xAxis().type("datetime").minRange(minRange);
|
|
|
|
// yAxis
|
|
// options.yAxis().title().text("Exchange rate");
|
|
// Highcharts.getOptions().colors[0]
|
|
String multiAxis = "[{" + " \"id\": \"DataVolume\","
|
|
+ " \"labels\": { " + " \"format\": \"{value}\","
|
|
+ " \"style\": { " + " \"color\": \""
|
|
+ colors.get(1)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"title\": { "
|
|
+ " \"text\": \"Data Volume\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(1)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }"
|
|
+ "} , {"
|
|
+ " \"id\": \"OperationCount\", "
|
|
+ " \"title\": {"
|
|
+ " \"text\": \"Operation Count\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(0)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"labels\": {"
|
|
+ " \"format\": \"{value}\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(0)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }," + " \"opposite\": \"true\"" + "}]";
|
|
|
|
options.setFieldAsJsonObject("yAxis", multiAxis);
|
|
|
|
// TODO does not seem to be working
|
|
String fillcolor = "{" + "\"linearGradient\": {" + "\"x1\": 0,"
|
|
+ "\"y1\": 0," + "\"x2\": 0," + "\"y2\": 1" + "},"
|
|
+ "\"stops\": [" + "[" + "0, \"#058DC7\"" + "]," + "["
|
|
+ "1, \"#FFFFFF\"" + "]" + "]" + "}";
|
|
|
|
options.plotOptions().area()
|
|
.setFieldAsJsonObject("fillColor", fillcolor).marker()
|
|
.radius(2).lineWidth(1).states().hover().lineWidth(1);
|
|
|
|
SeriesColumn seriesDataVolume = highchartsFactory.createSeriesColumn();
|
|
seriesDataVolume.name("Data Volume");
|
|
seriesDataVolume.color(colors.get(1));
|
|
seriesDataVolume.type("column");
|
|
|
|
ArrayNumber dataDataVolume = seriesDataVolume.dataAsArrayNumber();
|
|
|
|
|
|
seriesDataVolume.pointInterval(interval).pointStart(
|
|
dateStart.getTime());
|
|
|
|
|
|
SeriesArea seriesOperationCount = highchartsFactory.createSeriesArea();
|
|
seriesOperationCount.name("Operation Count");
|
|
seriesOperationCount.yAxisAsString("OperationCount");
|
|
seriesOperationCount.color(colors.get(0));
|
|
|
|
ArrayNumber dataOperationCount = seriesOperationCount
|
|
.dataAsArrayNumber();
|
|
|
|
seriesOperationCount.pointInterval(interval).pointStart(dateStart.getTime());
|
|
|
|
|
|
|
|
for (SeriesStorageData seriesStorageData : seriesStorage.getSeries()) {
|
|
dataDataVolume.push(seriesStorageData.getDataVolume());
|
|
dataOperationCount.push(seriesStorageData.getOperationCount());
|
|
}
|
|
|
|
options.series().addToEnd(seriesDataVolume);
|
|
options.series().addToEnd(seriesOperationCount);
|
|
|
|
options.chart().showAxes(true);
|
|
|
|
options.legend().enabled(true);
|
|
// options.legend().layout("vertical");
|
|
// options.legend().align("left");
|
|
// options.legend().x(120);
|
|
// options.legend().verticalAlign("top");
|
|
// options.legend().y(100);
|
|
// options.legend().floating(true);
|
|
// options.legend()
|
|
// .backgroundColor(
|
|
// "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'white'");
|
|
|
|
HighchartsLayoutPanel highchartsLayoutPanel = new HighchartsLayoutPanel();
|
|
|
|
highchartsLayoutPanel.renderChart(options);
|
|
|
|
add(highchartsLayoutPanel);
|
|
forceLayout();
|
|
}
|
|
|
|
private void createTaskChart(AccountingStateData accountingStateData) {
|
|
clear();
|
|
if (accountingStateData == null
|
|
|| accountingStateData.getAccountingType() == null
|
|
|| accountingStateData.getSeriesRequest() == null
|
|
|| accountingStateData.getSeriesResponse() == null) {
|
|
forceLayout();
|
|
return;
|
|
}
|
|
|
|
if(!(accountingStateData
|
|
.getSeriesResponse() instanceof SeriesTask)){
|
|
forceLayout();
|
|
return;
|
|
}
|
|
|
|
|
|
SeriesStorage seriesStorage = (SeriesStorage) accountingStateData
|
|
.getSeriesResponse();
|
|
|
|
double minRange = calculateMinRange(accountingStateData
|
|
.getSeriesRequest().getAccountingPeriod());
|
|
|
|
double interval=calculateInterval(accountingStateData
|
|
.getSeriesRequest().getAccountingPeriod());
|
|
|
|
Date dateStart=accountingStateData.getSeriesRequest().getAccountingPeriod().getStartDate();
|
|
|
|
HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
|
|
ChartOptions options = highchartsFactory.createChartOptions();
|
|
options.chart().zoomType("x");
|
|
|
|
options.title().text("Accounting Task");
|
|
|
|
options.subtitle().text("Click and drag in the plot area to zoom in");
|
|
|
|
ArrayString colors = options.colors();
|
|
// colors.setValue(0, "#cc0038");
|
|
// colors.setValue(1, "#32cd32");
|
|
|
|
|
|
// xAxis
|
|
options.xAxis().type("datetime").minRange(minRange);
|
|
|
|
// yAxis
|
|
// options.yAxis().title().text("Exchange rate");
|
|
// Highcharts.getOptions().colors[0]
|
|
String multiAxis = "[{" + " \"id\": \"DataVolume\","
|
|
+ " \"labels\": { " + " \"format\": \"{value}\","
|
|
+ " \"style\": { " + " \"color\": \""
|
|
+ colors.get(1)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"title\": { "
|
|
+ " \"text\": \"Data Volume\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(1)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }"
|
|
+ "} , {"
|
|
+ " \"id\": \"OperationCount\", "
|
|
+ " \"title\": {"
|
|
+ " \"text\": \"Operation Count\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(0)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"labels\": {"
|
|
+ " \"format\": \"{value}\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(0)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }," + " \"opposite\": \"true\"" + "}]";
|
|
|
|
options.setFieldAsJsonObject("yAxis", multiAxis);
|
|
|
|
// TODO does not seem to be working
|
|
String fillcolor = "{" + "\"linearGradient\": {" + "\"x1\": 0,"
|
|
+ "\"y1\": 0," + "\"x2\": 0," + "\"y2\": 1" + "},"
|
|
+ "\"stops\": [" + "[" + "0, \"#058DC7\"" + "]," + "["
|
|
+ "1, \"#FFFFFF\"" + "]" + "]" + "}";
|
|
|
|
options.plotOptions().area()
|
|
.setFieldAsJsonObject("fillColor", fillcolor).marker()
|
|
.radius(2).lineWidth(1).states().hover().lineWidth(1);
|
|
|
|
SeriesColumn seriesDataVolume = highchartsFactory.createSeriesColumn();
|
|
seriesDataVolume.name("Data Volume");
|
|
seriesDataVolume.color(colors.get(1));
|
|
seriesDataVolume.type("column");
|
|
|
|
ArrayNumber dataDataVolume = seriesDataVolume.dataAsArrayNumber();
|
|
|
|
|
|
seriesDataVolume.pointInterval(interval).pointStart(
|
|
dateStart.getTime());
|
|
|
|
|
|
SeriesArea seriesOperationCount = highchartsFactory.createSeriesArea();
|
|
seriesOperationCount.name("Operation Count");
|
|
seriesOperationCount.yAxisAsString("OperationCount");
|
|
seriesOperationCount.color(colors.get(0));
|
|
|
|
ArrayNumber dataOperationCount = seriesOperationCount
|
|
.dataAsArrayNumber();
|
|
|
|
seriesOperationCount.pointInterval(interval).pointStart(dateStart.getTime());
|
|
|
|
|
|
|
|
for (SeriesStorageData seriesStorageData : seriesStorage.getSeries()) {
|
|
dataDataVolume.push(seriesStorageData.getDataVolume());
|
|
dataOperationCount.push(seriesStorageData.getOperationCount());
|
|
}
|
|
|
|
options.series().addToEnd(seriesDataVolume);
|
|
options.series().addToEnd(seriesOperationCount);
|
|
|
|
options.chart().showAxes(true);
|
|
|
|
options.legend().enabled(true);
|
|
// options.legend().layout("vertical");
|
|
// options.legend().align("left");
|
|
// options.legend().x(120);
|
|
// options.legend().verticalAlign("top");
|
|
// options.legend().y(100);
|
|
// options.legend().floating(true);
|
|
// options.legend()
|
|
// .backgroundColor(
|
|
// "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'white'");
|
|
|
|
HighchartsLayoutPanel highchartsLayoutPanel = new HighchartsLayoutPanel();
|
|
|
|
highchartsLayoutPanel.renderChart(options);
|
|
|
|
add(highchartsLayoutPanel);
|
|
forceLayout();
|
|
}
|
|
|
|
|
|
private void createJobChart(AccountingStateData accountingStateData) {
|
|
clear();
|
|
if (accountingStateData == null
|
|
|| accountingStateData.getAccountingType() == null
|
|
|| accountingStateData.getSeriesRequest() == null
|
|
|| accountingStateData.getSeriesResponse() == null) {
|
|
forceLayout();
|
|
return;
|
|
}
|
|
|
|
if(!(accountingStateData
|
|
.getSeriesResponse() instanceof SeriesJob)){
|
|
forceLayout();
|
|
return;
|
|
}
|
|
|
|
|
|
SeriesStorage seriesStorage = (SeriesStorage) accountingStateData
|
|
.getSeriesResponse();
|
|
|
|
double minRange = calculateMinRange(accountingStateData
|
|
.getSeriesRequest().getAccountingPeriod());
|
|
|
|
double interval=calculateInterval(accountingStateData
|
|
.getSeriesRequest().getAccountingPeriod());
|
|
|
|
Date dateStart=accountingStateData.getSeriesRequest().getAccountingPeriod().getStartDate();
|
|
|
|
HighchartsOptionFactory highchartsFactory = new JsoHighchartsOptionFactory();
|
|
ChartOptions options = highchartsFactory.createChartOptions();
|
|
options.chart().zoomType("x");
|
|
|
|
options.title().text("Accounting Job");
|
|
|
|
options.subtitle().text("Click and drag in the plot area to zoom in");
|
|
|
|
ArrayString colors = options.colors();
|
|
// colors.setValue(0, "#cc0038");
|
|
// colors.setValue(1, "#32cd32");
|
|
|
|
|
|
// xAxis
|
|
options.xAxis().type("datetime").minRange(minRange);
|
|
|
|
// yAxis
|
|
// options.yAxis().title().text("Exchange rate");
|
|
// Highcharts.getOptions().colors[0]
|
|
String multiAxis = "[{" + " \"id\": \"DataVolume\","
|
|
+ " \"labels\": { " + " \"format\": \"{value}\","
|
|
+ " \"style\": { " + " \"color\": \""
|
|
+ colors.get(1)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"title\": { "
|
|
+ " \"text\": \"Data Volume\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(1)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }"
|
|
+ "} , {"
|
|
+ " \"id\": \"OperationCount\", "
|
|
+ " \"title\": {"
|
|
+ " \"text\": \"Operation Count\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(0)
|
|
+ "\""
|
|
+ " }"
|
|
+ " },"
|
|
+ " \"labels\": {"
|
|
+ " \"format\": \"{value}\","
|
|
+ " \"style\": {"
|
|
+ " \"color\": \""
|
|
+ colors.get(0)
|
|
+ "\""
|
|
+ " }"
|
|
+ " }," + " \"opposite\": \"true\"" + "}]";
|
|
|
|
options.setFieldAsJsonObject("yAxis", multiAxis);
|
|
|
|
// TODO does not seem to be working
|
|
String fillcolor = "{" + "\"linearGradient\": {" + "\"x1\": 0,"
|
|
+ "\"y1\": 0," + "\"x2\": 0," + "\"y2\": 1" + "},"
|
|
+ "\"stops\": [" + "[" + "0, \"#058DC7\"" + "]," + "["
|
|
+ "1, \"#FFFFFF\"" + "]" + "]" + "}";
|
|
|
|
options.plotOptions().area()
|
|
.setFieldAsJsonObject("fillColor", fillcolor).marker()
|
|
.radius(2).lineWidth(1).states().hover().lineWidth(1);
|
|
|
|
SeriesColumn seriesDataVolume = highchartsFactory.createSeriesColumn();
|
|
seriesDataVolume.name("Data Volume");
|
|
seriesDataVolume.color(colors.get(1));
|
|
seriesDataVolume.type("column");
|
|
|
|
ArrayNumber dataDataVolume = seriesDataVolume.dataAsArrayNumber();
|
|
|
|
|
|
seriesDataVolume.pointInterval(interval).pointStart(
|
|
dateStart.getTime());
|
|
|
|
|
|
SeriesArea seriesOperationCount = highchartsFactory.createSeriesArea();
|
|
seriesOperationCount.name("Operation Count");
|
|
seriesOperationCount.yAxisAsString("OperationCount");
|
|
seriesOperationCount.color(colors.get(0));
|
|
|
|
ArrayNumber dataOperationCount = seriesOperationCount
|
|
.dataAsArrayNumber();
|
|
|
|
seriesOperationCount.pointInterval(interval).pointStart(dateStart.getTime());
|
|
|
|
|
|
|
|
for (SeriesStorageData seriesStorageData : seriesStorage.getSeries()) {
|
|
dataDataVolume.push(seriesStorageData.getDataVolume());
|
|
dataOperationCount.push(seriesStorageData.getOperationCount());
|
|
}
|
|
|
|
options.series().addToEnd(seriesDataVolume);
|
|
options.series().addToEnd(seriesOperationCount);
|
|
|
|
options.chart().showAxes(true);
|
|
|
|
options.legend().enabled(true);
|
|
// options.legend().layout("vertical");
|
|
// options.legend().align("left");
|
|
// options.legend().x(120);
|
|
// options.legend().verticalAlign("top");
|
|
// options.legend().y(100);
|
|
// options.legend().floating(true);
|
|
// options.legend()
|
|
// .backgroundColor(
|
|
// "(Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'white'");
|
|
|
|
HighchartsLayoutPanel highchartsLayoutPanel = new HighchartsLayoutPanel();
|
|
|
|
highchartsLayoutPanel.renderChart(options);
|
|
|
|
add(highchartsLayoutPanel);
|
|
forceLayout();
|
|
}
|
|
|
|
|
|
}
|