Success! Looks like we've fixed this one. According to our records the fix was applied for EXTGWT-2389 in a recent build.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    117
    Vote Rating
    0
    tmancini is on a distinguished road

      0  

    Default Border issue when adding Charts to Porlets in PortalLayoutContainer

    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<DataDoubledata1();
        
        
    ValueProvider<DataStringname();
        
        @
    Path("name")
        
    ModelKeyProvider<DatanameKey();
      }
      
      private static final 
    DataPropertyAccess dataAccess GWT.create(DataPropertyAccess.class);
      
      public 
    Widget getCharts() {
        final 
    ListStore<Datastore = new ListStore<Data>(dataAccess.nameKey());
        
    store.addAll(TestData.getData(620100));
        
        final 
    Chart<DatapieChart = 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(14817410)));
        
    slice1.addStop(new Stop(100, new RGB(1071267)));
        
    pieChart.addGradient(slice1);
        
        
    Gradient slice2 = new Gradient("slice2"45);
        
    slice2.addStop(new Stop(0, new RGB(1795166)));
        
    slice2.addStop(new Stop(100, new RGB(1269120)));
        
    pieChart.addGradient(slice2);
     
        
    Gradient slice3 = new Gradient("slice3"45);
        
    slice3.addStop(new Stop(0, new RGB(1661732)));
        
    slice3.addStop(new Stop(100, new RGB(1201223)));
        
    pieChart.addGradient(slice3);
     
        
    Gradient slice4 = new Gradient("slice4"45);
        
    slice4.addStop(new Stop(0, new RGB(2551369)));
        
    slice4.addStop(new Stop(100, new RGB(2131100)));
        
    pieChart.addGradient(slice4);
     
        
    Gradient slice5 = new Gradient("slice5"45);
        
    slice5.addStop(new Stop(0, new RGB(25520962)));
        
    slice5.addStop(new Stop(100, new RGB(25519711)));
        
    pieChart.addGradient(slice5);
     
        
    Gradient slice6 = new Gradient("slice6"45);
        
    slice6.addStop(new Stop(0, new RGB(16617135)));
        
    slice6.addStop(new Stop(100, new RGB(1201297)));
        
    pieChart.addGradient(slice6);
     
        final 
    PieSeries<Dataseries = 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<DatalabelConfig = 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(03);
          }
        });
        final 
    SeriesToolTipConfig<Dataconfig = new SeriesToolTipConfig<Data>();
        
    config.setLabelProvider(null);
        
    config.setDismissDelay(0);
        
    config.setHideDelay(0);
        
    series.setToolTipConfig(config);
        
    pieChart.addSeries(series);
     
        final 
    Legend<Datalegend = 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<Dataevent) {
            if(
    pieChart.getElement() != null) {
              
    config.setBodyHtml(getToolTipText(storeevent.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(portlet0);
         
        return 
    portal;
      }

      private 
    String getToolTipText(ListStore<Datastoreint index) {
        List<
    DatadataList store.getAll();
        
    Double total 0.0;
        
    Double percentage 0.0;
        for(
    int i=0dataList.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 namedouble data1double data2double data3double data4double data5double data6,
          
    double data7double data8double 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<
    DatagetData(int sizedouble mindouble scale) {
         List<
    Datadata = new ArrayList<Data>();
         for (
    int i 0sizei++) {
           
    data.add(new Data(monthsFull[monthsFull.length], Math.floor(Math.max(Math.random() * scalemin)), Math.floor(Math.max(Math.random() * scalemin)),
               
    Math.floor(Math.max(Math.random() * scalemin)), Math.floor(Math.max(Math.random() * scalemin)), Math.floor(Math.max(Math.random() * scalemin)),
               
    Math.floor(Math.max(Math.random() * scalemin)), Math.floor(Math.max(Math.random() * scalemin)), Math.floor(Math.max(Math.random() * scalemin)),
               
    Math.floor(Math.max(Math.random() * scalemin))));
         }
         return 
    data;
       }


  2. #2
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    117
    Vote Rating
    0
    tmancini is on a distinguished road

      0  

    Default


    Any workaround suggestions here?

  3. #3
    Sencha - GXT Dev Team BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Vote Rating
    3
    BrendanC is on a distinguished road

      0  

    Default


    Thanks for the report. This appears to be an issue with the Surface not taking the border into account when using pieChart.setBorders(true). I will report back when it has been fixed.

  4. #4
    Sencha - GXT Dev Team BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Vote Rating
    3
    BrendanC is on a distinguished road

      0  

    Default


    This has been fixed and will be in the next release. As for a workaround you can override the chart and draw component OnResize to account for frame size.
    Size frameWidth = getElement().getFrameSize();
    height -= frameWidth.getHeight();
    width -= frameWidth.getWidth();

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    117
    Vote Rating
    0
    tmancini is on a distinguished road

      0  

    Default


    I'd have to override both onResize methods?

  6. #6
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Chart extends DrawComponent, and since both have the same onResize(int,int), overriding Chart would override DrawComponent as well.

  7. #7
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    117
    Vote Rating
    0
    tmancini is on a distinguished road

      0  

    Default


    Okay thanks. That's what I figured, but I guess I just misinterpreted the other post.

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    117
    Vote Rating
    0
    tmancini is on a distinguished road

      0  

    Default


    The chart borders appear to be fixed in the 3.0.2 release, however I am noticing a similar issue with a Grid Border. I have a VerticalLayoutContainer that contains a TextButton and a Grid with borders set to true. The bottom border of the Grid is not visible, and the bottom of any scroll bars that might appear are being chopped off as well.

  9. #9
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,732
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    That sounds like it could be a different issue - can you confirm that you are giving the grid non -1 values for its VerticalLayoutData? If you either don't specify a layout data when you add a grid to the VLC or you explicitly use -1, the VLC lets the grid size itself, which it is mostly unable to do correctly, so issues like this can arise. We're looking into adding warnings for dev mode when something like this happens, to warn developers of potential issues.

    If this isn't the case, can you provide a quick sample that demonstrates the issue, perhaps in another thread?

  10. #10
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    117
    Vote Rating
    0
    tmancini is on a distinguished road

      0  

    Default


    In short this is how I was putting together the container. I could create a new thread with an actual example next week assuming this is not just an issue with the Grid not being sized.

    Code:
    VerticalLayoutContainer gridContainer = new VerticalLayoutContainer();
    gridContainer.add(new TextButton(), new VerticalLayoutData(-1, -1));
    gridContainer.add(grid, new VerticalLayoutData(1, 1));
          
    FramedPanel panel = new FramedPanel();
    panel.add(gridContainer);