Skip to content

Commit

Permalink
Added support for font options on axis label
Browse files Browse the repository at this point in the history
  • Loading branch information
nmorel committed Jun 30, 2013
1 parent 65e6663 commit 3c7be55
Show file tree
Hide file tree
Showing 4 changed files with 325 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,20 @@

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Widget;
import com.googlecode.gflot.client.DataPoint;
import com.googlecode.gflot.client.PlotModel;
import com.googlecode.gflot.client.Series;
import com.googlecode.gflot.client.SeriesHandler;
import com.googlecode.gflot.client.SimplePlot;
import com.googlecode.gflot.client.options.AxisOptions;
import com.googlecode.gflot.client.options.FontOptions;
import com.googlecode.gflot.client.options.GridOptions;
import com.googlecode.gflot.client.options.LegendOptions;
import com.googlecode.gflot.client.options.PlotOptions;
Expand All @@ -38,13 +42,42 @@ interface Binder
{
}

interface Style extends CssResource{
String button();
String darkTheme();
String whiteTheme();
String legendLabel();
}

/**
* Plot
*/
@GFlotExamplesData
@UiField( provided = true )
SimplePlot plot;

/**
* Button switch to dark
*/
@GFlotExamplesData
@UiField
Button switchDark;

/**
* Button switch to white
*/
@GFlotExamplesData
@UiField
Button switchWhite;

/**
* Access to UiBinder style
*/
@GFlotExamplesData
@UiField
Style style;


public LineExample( Resources resources )
{
super( resources );
Expand All @@ -61,6 +94,8 @@ public Widget createPlot()
plotOptions.setLegendOptions( LegendOptions.create().setBackgroundOpacity( 0 )
.setPosition( LegendPosition.NORTH_WEST ) );
plotOptions.setGridOptions( GridOptions.create().setMargin( 5 ) );
plotOptions.addXAxisOptions( AxisOptions.create().setFont( FontOptions.create().setColor("black").setWeight( "bold" ).setStyle( "italic" ) ) );
plotOptions.addYAxisOptions( AxisOptions.create().setFont( FontOptions.create().setColor( "black" ).setWeight( "bold" ).setStyle( "italic" ) ) );

// create the plot
plot = new SimplePlot( model, plotOptions );
Expand Down Expand Up @@ -105,4 +140,48 @@ private void generateRandomData()
}
}

/**
* Switch to dark theme
*
* @param e click event
*/
@GFlotExamplesSource
@UiHandler( "switchDark" )
void onClickSwitchToDark( ClickEvent e )
{
switchDark.setVisible( false );
switchWhite.setVisible( true );

plot.removeStyleName( style.whiteTheme() );
plot.addStyleName( style.darkTheme() );
plot.getPlotOptions().getXAxisOptions().getFont().setColor( "white" );
plot.getPlotOptions().getXAxisOptions().setTickColor( "rgba(255, 255, 255, 0.6)" );
plot.getPlotOptions().getYAxisOptions().getFont().setColor( "white" );
plot.getPlotOptions().getYAxisOptions().setTickColor( "rgba(255, 255, 255, 0.6)" );
plot.getPlotOptions().getGridOptions().setBorderColor( "white" );
plot.redraw(true);
}

/**
* Switch to white theme
*
* @param e click event
*/
@GFlotExamplesSource
@UiHandler( "switchWhite" )
void onClickSwitchToWhite( ClickEvent e )
{
switchDark.setVisible( true );
switchWhite.setVisible( false );

plot.removeStyleName( style.darkTheme() );
plot.addStyleName( style.whiteTheme() );
plot.getPlotOptions().getXAxisOptions().getFont().setColor( "black" );
plot.getPlotOptions().getXAxisOptions().clearTickColor();
plot.getPlotOptions().getYAxisOptions().getFont().setColor( "black" );
plot.getPlotOptions().getYAxisOptions().clearTickColor();
plot.getPlotOptions().getGridOptions().clearBorderColor();
plot.redraw( true );
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,32 @@
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:p="urn:import:com.googlecode.gflot.client">

<ui:style>
.generate {
margin-top: 10px;
margin-left: 10px;
<ui:style type='com.googlecode.gflot.examples.client.examples.line.LineExample.Style'>
.button {
margin-top: 10px;
margin-left: 10px;
}

.darkTheme {
background-color: black;
}

@external legendLabel;
.darkTheme .legendLabel {
color: white;
}

.whiteTheme .legendLabel {
color: black;
}
</ui:style>

<ui:with field='res' type='com.googlecode.gflot.examples.client.resources.Resources' />

<g:HTMLPanel>
<p:SimplePlot ui:field="plot" width="600px" height="300px" />
<g:Button ui:field='generate' addStyleNames='{style.generate}'>Generate</g:Button>
<p:SimplePlot ui:field="plot" width="600px" height="300px" addStyleNames="{style.whiteTheme}"/>
<g:Button ui:field='generate' addStyleNames='{style.button}'>Generate</g:Button>
<g:Button ui:field='switchDark' addStyleNames='{style.button}'>Switch to dark</g:Button>
<g:Button ui:field='switchWhite' addStyleNames='{style.button}' visible='false'>Switch to white</g:Button>
</g:HTMLPanel>
</ui:UiBinder>
</ui:UiBinder>
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ public enum AxisLabelRenderingMode
private static final String AXIS_LABEL_CANVAS_FONT_FAMILY_KEY = "axisLabelFontFamily";
private static final String ZOOM_RANGE_KEY = "zoomRange";
private static final String PAN_RANGE_KEY = "panRange";
private static final String FONT_KEY = "font";

protected AbstractAxisOptions()
{
Expand Down Expand Up @@ -873,4 +874,30 @@ public final T clearPanRange()
clear( PAN_RANGE_KEY );
return (T) this;
}

/**
* Define the font and color used to draw the axis tick labels.
*/
public final T setFont( FontOptions font )
{
put( FONT_KEY, font );
return (T) this;
}

/**
* @return the font
*/
public final FontOptions getFont()
{
return getJsObject( FONT_KEY );
}

/**
* Clear the font
*/
public final T clearFont()
{
clear( FONT_KEY );
return (T) this;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
/*
* Copyright (c) 2012 Nicolas Morel
*
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
*
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/
package com.googlecode.gflot.client.options;


import com.google.gwt.core.client.JavaScriptObject;
import com.googlecode.gflot.client.jsni.JsonObject;

/**
* Options to control font on axis and probably legend later.
*
* @author Nicolas Morel
*/
public class FontOptions extends JsonObject
{

private static final String SIZE_KEY = "size";
private static final String LINE_HEIGHT_KEY = "lineHeight";
private static final String STYLE_KEY = "style";
private static final String WEIGHT_KEY = "weight";
private static final String FAMILY_KEY = "family";
private static final String VARIANT_KEY = "variant";
private static final String COLOR_KEY = "color";

/** Creates a {@link com.googlecode.gflot.client.options.FontOptions} */
public static final FontOptions create()
{
return JavaScriptObject.createObject().cast();
}

protected FontOptions()
{
}

/** Set the size of the font. Must be expressed in pixels. */
public final FontOptions setSize( Double size )
{
put( SIZE_KEY, size );
return this;
}

/** @return the size of the font */
public final Double getSize()
{
return getDouble( SIZE_KEY );
}

/** Clear the size of the font */
public final FontOptions clearSize()
{
clear( SIZE_KEY );
return this;
}

/** Set the line height. Must be expressed in pixels. */
public final FontOptions setLineHeight( Double lineHeight )
{
put( LINE_HEIGHT_KEY, lineHeight );
return this;
}

/** @return the line height */
public final Double getLineHeight()
{
return getDouble( LINE_HEIGHT_KEY );
}

/** Clear the line height */
public final FontOptions clearLineHeight()
{
clear( LINE_HEIGHT_KEY );
return this;
}

/** Set the style of the font. */
public final FontOptions setStyle( String style )
{
put( STYLE_KEY, style );
return this;
}

/** @return the style of the font */
public final String getStyle()
{
return getString( STYLE_KEY );
}

/** Clear the style of the font */
public final FontOptions clearStyle()
{
clear( STYLE_KEY );
return this;
}

/** Set the weight of the font. */
public final FontOptions setWeight( String weight )
{
put( WEIGHT_KEY, weight );
return this;
}

/** @return the weight of the font */
public final String getWeight()
{
return getString( WEIGHT_KEY );
}

/** Clear the weight of the font */
public final FontOptions clearWeight()
{
clear( WEIGHT_KEY );
return this;
}

/** Set the family of the font. */
public final FontOptions setFamily( String family )
{
put( FAMILY_KEY, family );
return this;
}

/** @return the family of the font */
public final String getFamily()
{
return getString( FAMILY_KEY );
}

/** Clear the family of the font */
public final FontOptions clearFamily()
{
clear( FAMILY_KEY );
return this;
}

/** Set the variant of the font. */
public final FontOptions setVariant( String variant )
{
put( VARIANT_KEY, variant );
return this;
}

/** @return the variant of the font */
public final String getVariant()
{
return getString( VARIANT_KEY );
}

/** Clear the variant of the font */
public final FontOptions clearVariant()
{
clear( VARIANT_KEY );
return this;
}

/** Set the color */
public final FontOptions setColor( String color )
{
put( COLOR_KEY, color );
return this;
}

/** @return the color */
public final String getColor()
{
return getString( COLOR_KEY );
}

/** Clear the color of the font */
public final FontOptions clearColor()
{
clear( COLOR_KEY );
return this;
}

}

0 comments on commit 3c7be55

Please sign in to comment.