Weird Behavior with TabPanel, PortalLayoutContainer, and Charts.

[tmancini]

I want to have a TabPanel where each Tab contains a PortalLayoutContainer with up to 4 different charts. Upon clicking the second tab, the charts take a long time to load, and the colors for the PieChart all turn black. Am I doing something wrong? Here is the code I am using along with the Data and TestData classes from the Sencha Examples:

public class PieChartTest implements EntryPoint {
  
  @Override
  public void onModuleLoad() {
    ContentPanel mainPanel = new ContentPanel();
    mainPanel.setHeaderVisible(false);
    mainPanel.setBorders(false);
    mainPanel.setBodyBorder(false);
    
    TabPanel tabPanel = new TabPanel();
    mainPanel.setWidget(tabPanel);
    
    tabPanel.add(getCharts(), "Test1");
    tabPanel.add(getCharts(), "Test2");
    
    BorderLayoutContainer container = new BorderLayoutContainer();
    HTML north = new HTML();
    north.setHTML("<div id='theme'></div><div id=title>Chart Test</div>");
    north.getElement().setId("header");
    BorderLayoutData northData = new BorderLayoutData(35);
    container.setNorthWidget(north, northData);
    container.setCenterWidget(mainPanel, new MarginData(10));
    
    Viewport viewport = new Viewport();
    viewport.setWidget(container);
    
    RootPanel.get().add(viewport);
  }
  
  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);
        }
      }
    });
    
    final Chart<Data> barChart = new Chart<Data>();
    barChart.setStore(store);
    barChart.setShadowChart(true);
    
    NumericAxis<Data> axis = new NumericAxis<Data>();
    axis.setPosition(Position.LEFT);
    axis.addField(dataAccess.data1());
    TextSprite title = new TextSprite("Number of Hits");
    title.setFontSize(18);
    axis.setTitleConfig(title);
    axis.setDisplayGrid(true);
    axis.setWidth(50);
    barChart.addAxis(axis);
    
    CategoryAxis<Data, String> catAxis = new CategoryAxis<Data, String>();
    catAxis.setPosition(Position.BOTTOM);
    catAxis.setField(dataAccess.name());
    title = new TextSprite("Month of the Year");
    title.setFontSize(18);
    catAxis.setTitleConfig(title);
    catAxis.setLabelProvider(new LabelProvider<String>() {
      @Override
      public String getLabel(String item) {
        return item.substring(0, 3);
      }
    });
    barChart.addAxis(catAxis);
    
    final BarSeries<Data> column = new BarSeries<Data>();
    column.setYAxisPosition(Position.LEFT);
    column.addYField(dataAccess.data1());
    column.addColor(new RGB(57, 84, 111));
    column.setColumn(true);
    barChart.addSeries(column);
    
    column.addSeriesItemOverHandler(new SeriesItemOverHandler<Data>() {
      @Override
      public void onSeriesOverItem(SeriesItemOverEvent<Data> event) {
        config.setBodyHtml(getToolTipText(store, event.getIndex()));
        column.setToolTipConfig(config);
      }
    });
    
    final Chart<Data> lineChart = new Chart<Data>();
    lineChart.setStore(store);
    lineChart.setShadowChart(true);
 
    NumericAxis<Data> lineAxis = new NumericAxis<Data>();
    lineAxis.setPosition(Position.LEFT);
    lineAxis.addField(dataAccess.data1());
    TextSprite lineTitle = new TextSprite("Number of Hits");
    lineTitle.setFontSize(18);
    lineAxis.setTitleConfig(lineTitle);
    lineAxis.setMinorTickSteps(1);
    lineAxis.setDisplayGrid(true);
    PathSprite odd = new PathSprite();
    odd.setOpacity(1);
    odd.setFill(new Color("#ddd"));
    odd.setStroke(new Color("#bbb"));
    odd.setStrokeWidth(0.5);
    lineAxis.setGridOddConfig(odd);
    lineAxis.setMinimum(0);
    lineAxis.setMaximum(100);
    lineChart.addAxis(lineAxis);
 
    CategoryAxis<Data, String> lineCatAxis = new CategoryAxis<Data, String>();
    lineCatAxis.setPosition(Position.BOTTOM);
    lineCatAxis.setField(dataAccess.name());
    lineTitle = new TextSprite("Month of the Year");
    lineTitle.setFontSize(18);
    lineCatAxis.setTitleConfig(lineTitle);
    lineCatAxis.setLabelProvider(new LabelProvider<String>() {
      @Override
      public String getLabel(String item) {
        return item.substring(0, 3);
      }
    });
    lineChart.addAxis(lineCatAxis);
 
    final LineSeries<Data> lineSeries = new LineSeries<Data>();
    lineSeries.setYAxisPosition(Position.LEFT);
    lineSeries.setYField(dataAccess.data1());
    lineSeries.setStroke(new RGB(194,0,36));
    lineSeries.setShowMarkers(true);
    Sprite marker = Primitives.square(0, 0, 6);
    marker.setFill(new RGB(194,0,36));
    lineSeries.setMarkerConfig(marker);
    lineSeries.setHighlighting(true);
    lineChart.addSeries(lineSeries);
    
    lineSeries.addSeriesItemOverHandler(new SeriesItemOverHandler<Data>() {
      @Override
      public void onSeriesOverItem(SeriesItemOverEvent<Data> event) {
        config.setBodyHtml(getToolTipText(store, event.getIndex()));
        lineSeries.setToolTipConfig(config);
      }
    });
    
    List<ColumnConfig<Data, ?>> columns = new ArrayList<ColumnConfig<Data, ?>>();
    ColumnConfig<Data, String> labelColumnConfig;
    labelColumnConfig = new ColumnConfig<Data, String>(dataAccess.name(), 100, "Month");
    labelColumnConfig.setMenuDisabled(true);
    columns.add(labelColumnConfig);
    ColumnConfig<Data, Double> dataColumnConfig;
    dataColumnConfig = new ColumnConfig<Data, Double>(dataAccess.data1(), 100, "Amount");
    dataColumnConfig.setMenuDisabled(true);
    dataColumnConfig.setAlignment(HorizontalAlignmentConstant.endOf(Direction.LTR));
    dataColumnConfig.setCell(new AbstractCell<Double>() {
      @Override
      public void render(com.google.gwt.cell.client.Cell.Context context, Double value, SafeHtmlBuilder sb) {
        sb.appendEscaped(Format.number(value, "$###,###.00"));
      }
    });
    columns.add(dataColumnConfig);
    ColumnModel<Data> columnModel = new ColumnModel<Data>(columns);
    
    final Grid<Data> grid = new Grid<Data>(store, columnModel);
    grid.getView().setStripeRows(true);
    grid.getView().setColumnLines(true);
    grid.setBorders(true);
    
    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);
    
    portlet = new Portlet();
    portlet.setHeadingText("Bar Chart");
    configPanel(portlet);
    portlet.add(barChart);
    portlet.setHeight(400);
    portal.add(portlet, 1);
      
    portlet = new Portlet();
    portlet.setHeadingText("Line Chart");
    configPanel(portlet);
    portlet.add(lineChart);
    portlet.setHeight(400);
    portal.add(portlet, 0);
    
    portlet = new Portlet();
    portlet.setHeadingText("Grid");
    configPanel(portlet);
    portlet.add(grid);
    portlet.setHeight(400);
    portal.add(portlet, 1);
 
    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();
      }
    }));
  }
} 

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;
  }

} 

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;
   }
} 

[sven]

This sounds like an issue. I will move this thread to the bugs forum.

You might want to try to change the hidemode of the widget that you are adding to the TabPanel to HideMode.OFFSETS.

[tmancini]

I was able to fix the issue of the PieChart's colors showing as black by changing the Gradient Ids to be different than those on the first tab. Changing the hidemode did not appear to do anything.

Just another question, how would I go about forcing all of the tabs to render when the module is loaded instead of waiting until the tab is selected to render? Thanks.

[WesleyMoy]

Can you confirm that this is an issue in 3.0.2? If so, which browsers have you noticed this issue in? This will help us narrow down which components of GXT are to be investigated.