Chart Y-Axis label getting clipped

[mdeng]

Hi,

I'm using SmartGWT 4.0 02/15/2014 nightly build.
The top Y-Axis label is getting clipped when facetChart.setShowTitle(false).

It's fine when setShowTitle(true), because it leaves some white space (vertically) between the top of the chart plot area and the title.

See attached image, the label 1.2 is clipped. It's worst sometimes when the label contains words.

Edit:
This was working fine in 3.1p

[Isomorphic]

We're unable to reproduce this with 3.1 or 4.0p in a variety of browsers: Chrome, Firefox, IE9, IE6..

Please provide instructions to reproduce. Make sure you've eliminated any non-default CSS from the project where you're testing.

[mdeng]

Test Code

Test code below. Problem exists on version 4.0p
Again, the key is to setShowTitle(false).

package com.company.tester.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.ChartType;
import com.smartgwt.client.widgets.chart.FacetChart;
import com.smartgwt.client.widgets.cube.Facet;
import com.smartgwt.client.widgets.cube.FacetValue;
import com.smartgwt.client.widgets.layout.VLayout;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class SmartGwtTester implements EntryPoint {
	public void onModuleLoad() {
		final FacetChart chart = new FacetChart();  
		chart.setData(ScatterPlotChartData.getData());  
		chart.setID("multiScatterChart");  
		chart.setWidth(750);
		chart.setHeight(550);  
		Facet metric = new Facet();  
		metric.setValues(new FacetValue("value"), new FacetValue("Time"));  
		metric.setInlinedValues(true);  
		metric.setId("metric");  
		Facet animal = new Facet();  
		animal.setId("animal");  

		chart.setFacets(metric, animal);  
		chart.setValueProperty("value");  
		chart.setChartType(ChartType.SCATTER);  
		chart.setTitle("Multi Scatter with SmartGwt v" + Version.getVersion() + " build: " + Version.getBuildDate());  
		chart.setShowTitle(false);
		VLayout layout = new VLayout(15);  
		layout.setMembers(chart);  

		layout.draw();  
	}

	public static class ScatterPlotChartData extends Record {  

		public ScatterPlotChartData(float time, float value, String animal) {  
			setAttribute("Time", time);  
			setAttribute("value", value);  
			setAttribute("animal", animal);  
		}  

		public static ScatterPlotChartData[] getData() {  
			return new ScatterPlotChartData[] {  
					new ScatterPlotChartData(10001f, 0.02f, "Moose"),  
					new ScatterPlotChartData(10002f, 0.15f, "Moose"),  
					new ScatterPlotChartData(10003f, 0.77f, "Moose"),  
					new ScatterPlotChartData(10004f, 0.77f, "Moose"),  

					new ScatterPlotChartData(10005f, 0.87f, "Moose"),  
					new ScatterPlotChartData(10006f, 1.15f, "Moose"),  
					new ScatterPlotChartData(10007f, 1.15f, "Moose"),  
					new ScatterPlotChartData(10008f, 0.71f, "Moose"),  

					new ScatterPlotChartData(10009f, 0.67f, "Moose"),  
					new ScatterPlotChartData(10010f, 0.61f, "Moose"),  
					new ScatterPlotChartData(10011f, 0.41f, "Moose"),  
					new ScatterPlotChartData(10012f, 0.22f, "Moose"),  

					new ScatterPlotChartData(10013f, 0.02f, "Platypus"),  
					new ScatterPlotChartData(10014f, 0.28f, "Platypus"),  
					new ScatterPlotChartData(10015f, 0.71f, "Platypus"),  
					new ScatterPlotChartData(10016f, 0.81f, "Platypus"),  

					new ScatterPlotChartData(10017f, 1.06f, "Platypus"),  
					new ScatterPlotChartData(10018f, 1.06f, "Platypus"),  
					new ScatterPlotChartData(10019f, 0.52f, "Platypus"),  
					new ScatterPlotChartData(10020f, 0.10f, "Platypus")  
			};  
		}  
	}
}

[Isomorphic]

We had already tried with code that sets showTitle:false and didn't reproduce the issue, but we've now tried with your exact test code and the issue is still not reproducible.

Again, be sure you have limited any CSS or other non-default settings from your project.

[mdeng]

My test driver project is the simple GWT plugin generated project with the following module config.

<?xml version="1.0" encoding="UTF-8"?>
<!--
  When updating your version of GWT, you should also update this DTD reference,
  so that your app can take advantage of the latest GWT module capabilities.
-->
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN"
  "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module rename-to='smartgwttester'>
  <!-- Inherit the core Web Toolkit stuff. -->
  <!-- 
  <inherits name='com.google.gwt.user.User'/>
  -->
  <inherits name="com.smartgwt.SmartGwtNoScript" />
  <inherits name="com.smartgwt.ChartsNoScript"/>
	
  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <!-- <inherits name='com.google.gwt.user.theme.clean.Clean'/>  -->
  <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

  <!-- Other module inherits                                      -->

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.company.tester.client.SmartGwtTester'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

</module>

The host page

<!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="SmartGwtTester.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="smartgwttester/smartgwttester.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

	<script src='smartgwttester/sc/modules/ISC_Core.js'></script>
	
	<!--include SmartClient -->
	<script src='smartgwttester/sc/modules/ISC_Foundation.js'></script>
	<script src='smartgwttester/sc/modules/ISC_Containers.js'></script>
	<script src='smartgwttester/sc/modules/ISC_Grids.js'></script>
	<script src='smartgwttester/sc/modules/ISC_Forms.js'></script>
	<script src='smartgwttester/sc/modules/ISC_RichTextEditor.js'></script>
	<script src='smartgwttester/sc/modules/ISC_Calendar.js'></script>
	<script src='smartgwttester/sc/modules/ISC_DataBinding.js'></script>
	<script src='smartgwttester/sc/modules/ISC_Drawing.js'></script>
	<script src='smartgwttester/sc/modules/ISC_Charts.js'></script>
  </body>
</html>

The project css file is empty.

[Isomorphic]

What exact browser(s), on what operating systems, reproduce the effect for you?

Can you reproduce it on any other machine?

[mdeng]

We are all running Windows 7 Enterprise.
FF 26, and Chrome.

The bug is observed by others on their machines, on both Chrome and FF26. This is happening in our application in prod mode.

I have not distribute/deploy my stripped down test driver project to test by others, but I imagine it's the same thing.

Can I see what your chart looks like when you ran the test code I posted?

[Isomorphic]

The problem with your test app is that you have not loaded a skin at all, and the missing styles cause an issue with auto-detected label sizes.

Technically, the FacetChart could actually do the measuring without relying on anything loaded with the skin, so we made a change to avoid depending on it (which will appear in tomorrow's builds).

But there's no need to immediately get the new build; any app that actually loads a skin won't have this problem.

[mdeng]

Broken in 4.1 build 2014-10-25

Hi,

We are trying to upgrade from 4.0 to 4.1.
It looks like this is broken in 4.1.
Testing with the Oct 25 build, same testcase.

[Isomorphic]

Looks like this fix was not ported to the 4.1p branch.
This has now been addressed. Please try the next nightly build, dated Oct 30 or above.

Regards
Isomorphic Software