Border issue when adding Charts to Porlets in PortalLayoutContainer
When adding a chart to a Portlet and then adding the Portlet to the PortalLayoutContainer, the bottom and right borders of the chart are not displaying. Using Firebug, it appears the chart's width and height are exactly 2 pixels larger than the Portlet's view. Is there some sort of padding that I am not accounting for?
PHP Code:
package com.tomm.piecharttest.client;
import java.util.ArrayList;
public class PieChartTest implements EntryPoint {
@Override
public void onModuleLoad() {
ContentPanel mainPanel = new ContentPanel();
mainPanel.setHeaderVisible(false);
mainPanel.setBorders(false);
mainPanel.setBodyBorder(false);
mainPanel.setWidget(getCharts());
RootPanel.get().add(mainPanel);
}
public interface DataPropertyAccess extends PropertyAccess<Data> {
ValueProvider<Data, Double> data1();
ValueProvider<Data, String> name();
@Path("name")
ModelKeyProvider<Data> nameKey();
}
private static final DataPropertyAccess dataAccess = GWT.create(DataPropertyAccess.class);
public Widget getCharts() {
final ListStore<Data> store = new ListStore<Data>(dataAccess.nameKey());
store.addAll(TestData.getData(6, 20, 100));
final Chart<Data> pieChart = new Chart<Data>();
pieChart.setDefaultInsets(50);
pieChart.setStore(store);
pieChart.setShadowChart(true);
pieChart.setBorders(true);
Gradient slice1 = new Gradient("slice1", 45);
slice1.addStop(new Stop(0, new RGB(148, 174, 10)));
slice1.addStop(new Stop(100, new RGB(107, 126, 7)));
pieChart.addGradient(slice1);
Gradient slice2 = new Gradient("slice2", 45);
slice2.addStop(new Stop(0, new RGB(17, 95, 166)));
slice2.addStop(new Stop(100, new RGB(12, 69, 120)));
pieChart.addGradient(slice2);
Gradient slice3 = new Gradient("slice3", 45);
slice3.addStop(new Stop(0, new RGB(166, 17, 32)));
slice3.addStop(new Stop(100, new RGB(120, 12, 23)));
pieChart.addGradient(slice3);
Gradient slice4 = new Gradient("slice4", 45);
slice4.addStop(new Stop(0, new RGB(255, 136, 9)));
slice4.addStop(new Stop(100, new RGB(213, 110, 0)));
pieChart.addGradient(slice4);
Gradient slice5 = new Gradient("slice5", 45);
slice5.addStop(new Stop(0, new RGB(255, 209, 62)));
slice5.addStop(new Stop(100, new RGB(255, 197, 11)));
pieChart.addGradient(slice5);
Gradient slice6 = new Gradient("slice6", 45);
slice6.addStop(new Stop(0, new RGB(166, 17, 135)));
slice6.addStop(new Stop(100, new RGB(120, 12, 97)));
pieChart.addGradient(slice6);
final PieSeries<Data> series = new PieSeries<Data>();
series.setAngleField(dataAccess.data1());
series.addColor(slice1);
series.addColor(slice2);
series.addColor(slice3);
series.addColor(slice4);
series.addColor(slice5);
series.addColor(slice6);
TextSprite textConfig = new TextSprite();
textConfig.setFont("Arial");
textConfig.setTextBaseline(TextBaseline.MIDDLE);
textConfig.setFontSize(18);
textConfig.setTextAnchor(TextAnchor.MIDDLE);
textConfig.setZIndex(15);
SeriesLabelConfig<Data> labelConfig = new SeriesLabelConfig<Data>();
labelConfig.setSpriteConfig(textConfig);
labelConfig.setLabelPosition(LabelPosition.START);
labelConfig.setValueProvider(dataAccess.name(), new StringLabelProvider<String>());
series.setLabelConfig(labelConfig);
series.setHighlighting(true);
series.setLegendValueProvider(dataAccess.name(), new LabelProvider<String>() {
@Override
public String getLabel(String item) {
return item.substring(0, 3);
}
});
final SeriesToolTipConfig<Data> config = new SeriesToolTipConfig<Data>();
config.setLabelProvider(null);
config.setDismissDelay(0);
config.setHideDelay(0);
series.setToolTipConfig(config);
pieChart.addSeries(series);
final Legend<Data> legend = new Legend<Data>();
legend.setPosition(Position.BOTTOM);
legend.setItemHighlighting(true);
legend.setItemHiding(true);
pieChart.setLegend(legend);
series.addSeriesItemOverHandler(new SeriesItemOverHandler<Data>() {
@Override
public void onSeriesOverItem(SeriesItemOverEvent<Data> event) {
if(pieChart.getElement() != null) {
config.setBodyHtml(getToolTipText(store, event.getIndex()));
series.setToolTipConfig(config);
}
}
});
PortalLayoutContainer portal = new PortalLayoutContainer(2);
portal.getElement().getStyle().setBackgroundColor("white");
portal.setColumnWidth(0, .50);
portal.setColumnWidth(1, .50);
Portlet portlet = new Portlet();
portlet.setHeadingText("Pie Chart");
configPanel(portlet);
portlet.add(pieChart);
portlet.setHeight(400);
portal.add(portlet, 0);
return portal;
}
private String getToolTipText(ListStore<Data> store, int index) {
List<Data> dataList = store.getAll();
Double total = 0.0;
Double percentage = 0.0;
for(int i=0; i < dataList.size(); i++) {
total += dataList.get(i).getData1();
}
percentage = store.get(index).getData1()/total;
StringBuilder toolTipBuilder = new StringBuilder();
toolTipBuilder.append(store.get(index).getName());
toolTipBuilder.append("<br>");
toolTipBuilder.append(Format.number(store.get(index).getData1(), "$###,###.00"));
toolTipBuilder.append("<br>");
toolTipBuilder.append(Format.number(percentage, "(###.##%)"));
return toolTipBuilder.toString();
}
private void configPanel(final Portlet panel) {
panel.setCollapsible(true);
panel.setAnimCollapse(false);
panel.getHeader().addTool(new ToolButton(ToolButton.GEAR));
panel.getHeader().addTool(new ToolButton(ToolButton.CLOSE, new SelectHandler() {
@Override
public void onSelect(SelectEvent event) {
panel.removeFromParent();
}
}));
}
}
PHP Code:
public class Data {
private String name;
private double data1;
private double data2;
private double data3;
private double data4;
private double data5;
private double data6;
private double data7;
private double data8;
private double data9;
public Data(String name, double data1, double data2, double data3, double data4, double data5, double data6,
double data7, double data8, double data9) {
super();
this.name = name;
this.data1 = data1;
this.data2 = data2;
this.data3 = data3;
this.data4 = data4;
this.data5 = data5;
this.data6 = data6;
this.data7 = data7;
this.data8 = data8;
this.data9 = data9;
}
public double getData1() {
return data1;
}
public double getData2() {
return data2;
}
public double getData3() {
return data3;
}
public double getData4() {
return data4;
}
public double getData5() {
return data5;
}
public double getData6() {
return data6;
}
public double getData7() {
return data7;
}
public double getData8() {
return data8;
}
public double getData9() {
return data9;
}
public String getName() {
return name;
}
public void setData1(double data1) {
this.data1 = data1;
}
public void setData2(double data2) {
this.data2 = data2;
}
public void setData3(double data3) {
this.data3 = data3;
}
public void setData4(double data4) {
this.data4 = data4;
}
public void setData5(double data5) {
this.data5 = data5;
}
public void setData6(double data6) {
this.data6 = data6;
}
public void setData7(double data7) {
this.data7 = data7;
}
public void setData8(double data8) {
this.data8 = data8;
}
public void setData9(double data9) {
this.data9 = data9;
}
public void setName(String name) {
this.name = name;
}
}
PHP Code:
public class TestData {
private static final String[] monthsFull = new String[] {
"January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November",
"December"};
public static List<Data> getData(int size, double min, double scale) {
List<Data> data = new ArrayList<Data>();
for (int i = 0; i < size; i++) {
data.add(new Data(monthsFull[i % monthsFull.length], Math.floor(Math.max(Math.random() * scale, min)), Math.floor(Math.max(Math.random() * scale, min)),
Math.floor(Math.max(Math.random() * scale, min)), Math.floor(Math.max(Math.random() * scale, min)), Math.floor(Math.max(Math.random() * scale, min)),
Math.floor(Math.max(Math.random() * scale, min)), Math.floor(Math.max(Math.random() * scale, min)), Math.floor(Math.max(Math.random() * scale, min)),
Math.floor(Math.max(Math.random() * scale, min))));
}
return data;
}
}
