Styling the data objects

Describes the treemap chart renderer, which is used to show data objects (as opposed to data points in the other renderers).

• Selector Patterns

Explains the expected selector patterns for the style rules and the properties that can be used in the declarations of these rules.

• Properties

Lists the properties that can be used to customize the rendering of data models and data objects.

Selector Patterns

Style sheets can be used to specify the rendering attributes of all objects together and of individual objects.

Two types of style rule selectors are defined to reference the chart data model:

• objects

Used to match the entire data source (an IlvTreeTableDataSource ).

• object

Used to match an object in the data model (available through IlvTreeTableDataSource.getTreeModel() ).

CSS Classes and Pseudo Classes

Every object in the data model can be associated with one or more CSS classes and with one or more pseudoclasses.

Both kinds of classes can have an effect on the rendering, through style rules. But while CSS classes are meant to encode properties of the object that come directly from the model, the pseudoclasses are meant to encode application dependent state, for example in conjunction with some interactors.

The CSS classes of model objects are taken from the model. For this purpose, the renderer has methods setCSSClassesColumn and setCSSClassesColumnName, that let you specify the model column containing the CSS classes. The value in this column should be a string containing the CSS class names, in any order, and separated by spaces.

CSS classes can be used in a CSS file through the syntax:

object.classname { ... }

The CSS pseudoclasses of model objects are stored in the chart instance. You can add or remove a pseudoclass to an object (or an object to a pseudoclass) through the methods IlvChart.addPseudoClass and IlvChart.removePseudoClass. There are no predefined pseudoclasses for model objects so far. You can define your own and use them in style rules.

For example, in an interactor you might mark an object as "marked":

// Add the "marked" state to an object.

chart.addPseudoClass(object, "marked");

Then you can define a rule that highlights the marked objects:

object:marked { ... }

Selector Attributes

No attributes are defined for the objects selector.

The attributes defined for the object selector are exactly the column names of the object model. For example, if the model has two columns named 'amount2004' and 'amount2005', you can write a style rule

object[ amount2005 > amount2004 * 1.05 ]

to highlight those object where the amount increase is greater than 5%.

Additionally, the following attributes are predefined for the object selector:

Name	Description
level	The distance of the object from the model root, in the tree model. This is 0 for the root, 1 for the root children, and so on.
focusLevel	The distance of the treemap renderer focus (= the root of the subtree model being displayed) from the model root.
leaf	true if the object has no children objects in the model, false otherwise.

For a treemap display, the CSS expression @level-@focusLevel represents the level difference between the current object and the outermost displayed rectangle.

The following lines of CSS can therefore be used to set labels with particular attributes on each object of the specified level:

object [level==0] {

  annotation : "@#labelAnnotation0";

}

object [level==1] {

  annotation : "@#labelAnnotation1";

}

object [level>1] {

  annotation : "@#labelAnnotation2";

}

Likewise for specified levels relative to the treemap focus:

object [@|@level-@focusLevel==0] {

  annotation : "@#labelAnnotation0";

}

object [@|@level-@focusLevel==1] {

  annotation : "@#labelAnnotation1";

}

object [@|@level-@focusLevel>1] {

  annotation : "@#labelAnnotation2";

}

Properties

Properties for Individual Data Objects

In rules with an object selector, the following properties are available:

Name	Type	Default Value
color1	java.awt.Paint	null
color2	java.awt.Paint	null
endCap	int (enumerated)	java.awt.BasicStroke.CAP_BUTT
lineJoin	int (enumerated)	java.awt.BasicStroke.JOIN_BEVEL
lineStyle	float[]	null
lineWidth	float	1
miterLimit	float	10
stroke	java.awt.Stroke	null
annotation	IlvDataAnnotation	null
visible	boolean	true

For more details on these properties, see Properties for Data Points.

Properties for the Entire Data Model

In a rule with an objects selector, the following properties can be set through CSS.

• Object properties that apply to all objects. The list is the same as above.

• Renderer properties. For the treemap, the following properties are available:

Name	Type	Default value	Description
visible	boolean	true	Indicates whether the renderer is visible.
name	String	null	The name of the renderer.
visibleInLegend	boolean	true	Indicates whether the renderer creates legend items.
areaColumnName	String	null	The column chosen to determine the area of each object.
colorColumnName	String	null	The column chosen to determine the color of each rectangle.
labelColumnName	String	null	The column chosen to determine the label of each object, as shown by IlvDataLabelAnnotation.
CSSClassesColumnName	String	null	The column chosen to determine the CSS classes of each object.
packing	enumerated: ALTERNATING, SQUARIFIED_CORNER, SQUARIFIED, BAR	ALTERNATING	The rectangle packing.
primaryDirection	enumerated: RIGHT, LEFT, TRAILING, TOP, BOTTOM	TRAILING	The primary direction of arrangement of the rectangles.
secondaryDirection	enumerated: RIGHT, LEFT TRAILING, TOP, BOTTOM	BOTTOM	The secondary direction of arrangement of the rectangles.
leadingMarginProportion	double, between 0 and 1	0.02	Leading margin proportion.
maximumLeadingMargin	double	2	Maximum leading margin, in pixels.
trailingMarginProportion	double, between 0 and 1	0.01	Trailing margin proportion.
maximumTrailingMargin	double	2	Maximum trailing margin, in pixels.
bottomMarginProportion	double, between 0 and 1	0.02	Bottom margin proportion.
maximumBottomMargin	double	2	Maximum bottom margin, in pixels.
topMarginProportion	double, between 0 and 1	0.05	Top margin proportion.
maximumTopMargin	double	30	Maximum top margin, in pixels.
marginReductionFactor	double, between 0 and 1	1.0	Describes the margin proportions of a nested rectangle, compared to the margin proportions of the rectangle that contains it.
useMarginsOnRoot	boolean	true	Indicates whether margins also apply to the outermost rectangle.
focusParentMarginProportion	double, between 0 and 1	0.02	Focus parent margin proportion.
maximumFocusParentMargin	double	5	Maximum focus parent margin, in pixels.
colorScheme	enumerated: CONSTANT, DEPTH, SEQUENTIAL, SEQUENTIAL_HUE, CYCLIC_SEQUENTIAL_HUE, QUALITATIVE, DIVERGING_RED_GREEN, DIVERGING_GREEN_RED, DIVERGING_BLUE_YELLOW, DIVERGING_YELLOW_BLUE, AVERAGE_RED_GREEN, AVERAGE_GREEN_RED, AVERAGE_BLUE_YELLOW, AVERAGE_YELLOW_BLUE	CONSTANT	The color scheme.
colorForNaN	Color	#AAAAAA	The color used when a value in the color column is NaN.
strokeThreshold	int	0	The minimum size of a rectangle, under which the stroke of a rendering style is not used.
annotation	IlvDataAnnotation	null	An annotation for all the tree nodes.
labelAlignmentX	enumerated: LEFT, CENTER, RIGHT, LEADING, TRAILING	LEADING	The horizontal alignment of each label within the rectangle to which it belongs.
labelAlignment Y	enumerated: BOTTOM, CENTER, TOP	TOP	The vertical alignment of each label within the rectangle to which it belongs.
labelFormat	java.text.Format	null	The format for labels associated with rectangles.
annotationClipping	boolean	true	Indicates whether annotations are clipped to fit in their corresponding rectangle.
annotationVisibility	non-negative integer or one of ALL, SMART, NONE	ALL	The visibility mode for annotations.
legendLabelFormat	java.text.Format	null	The format for labels associated with colors in the legend.