Dealing with items rendering

The main feature of Elastic Search is browsing the multi-facetted data structure in an easy way. This is enhanced by visualizing the relative proportion of metadata compared to the whole data source. Elastic Search is enhanced with two properties : itemMaxHeight and itemMinHeight that are used to calculate the height of each metadata value and visualize its relative proportion by size.
The relative properties are:

In the following code sample, we provide an integration sample of Elastic Search component using an elasticSearchItemRenderer.
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:elasticsearch="fr.kapit.elasticsearch.*">
	
	
	<fx:Declarations >
	<s:ArrayCollection id="myDataProvider">
		<fx:Object name="Jodie" country="Belgique" language="French" continent="Europe"/>
		<fx:Object name="Kate" country="Australia" language="English" continent="Asia Pacific"/>
		<fx:Object name="David" country="USA" language="English" continent="Europe"/>
		<fx:Object name="Nicolas" country="Russia" language="Russian" continent="Europe"/>
		<fx:Object name="Michael" country="USA" language="English" continent="Europe"/>
		<fx:Object name="Isabelle" country="France" language="French" continent="Europe"/>
		<fx:Object name="Dudek" country="Russia" language="Russian" continent="Europe"/>
		<fx:Object name="Hilary" country="USA" language="English" continent="Europe"/>
		<fx:Object name="Georges" country="Finland" language="English" continent="Europe"/>
		<fx:Object name="Fani" country="Italia" language="Italian" continent="Europe"/>
		<fx:Object name="Bertrand" country="France" language="French" continent="Europe"/>
		<fx:Object name="Cyril" country="France" language="French" continent="Europe"/>
		<fx:Object name="Fran├žois" country="Belgique" language="French" continent="Europe"/>
		<fx:Object name="Slim" country="Tunisia" language="Arabic" continent="Africa"/>
		<fx:Object name="Patrick" country="France" language="French" continent="Europe"/>
		<fx:Object name="Abdu" country="Nigeria" language="Nigerian" continent="Africa"/>
	</s:ArrayCollection>
	<fx:Declarations />
	
		<elasticsearch:ElasticSearch
		height="270"
		width="100%"
		filterListFontColor="0x111111"
		elasticSearchItemRenderer="{ElasticSearchItem}"
		dataProvider="{myDataProvider}"
		filterProperties="{['continent','country','language']}" 
		filterLabels="{['Continent','Country','Language']}"/>
	
</mx:Application>
Here we provide the ELasticSearchItem

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				implements="fr.kapit.elasticsearch.render.IElasticItemRenderer"
				autoDrawBackground="true" doubleClickEnabled="false"
				currentState="idle"
				rollOver="this_rollOverHandler(event)"
				>
	<fx:Script>
	<![CDATA[
		import fr.kapit.elasticsearch.render.ElasticFilter;
		
		[Bindable] private var _elasticFilter:ElasticFilter;
		
		[Bindable] private var _contentValue:String;
		[Bindable] private var _occurrenceValue:String;
		
		[Bindable] private var _itemColor:uint = 0xFF0000;
		[Bindable] private var _itemProhibitedColor:uint = 0xF7F7F7;
		[Bindable] private var _itemRollOverColor:uint = 0xFF0000;
		[Bindable] private var _itemSelectedColor:uint = 0xF7F7F7;
		[Bindable] private var _labelVisible:Boolean = true;

		private var _itemState:String;
		private var _baseHeight:Number = 0;
		
		public function get baseHeight():Number
		{
			return _baseHeight;
		}
		public function set baseHeight(value:Number):void
		{
			_baseHeight = value;
		}

		public function get itemState():String
		{
			return _itemState;
		}
		public function set itemState(value:String):void
		{
			_itemState = value;
			currentState = value;
		}

		public function set itemColor(value:uint):void
		{
			_itemColor = value;
		}
		
		public function set elasticFilter(value:ElasticFilter):void
		{
			_elasticFilter = value;
		}
		
		override public function set data(value:Object):void
		{
			super.data = value;

			if (!value)
				_contentValue = _occurrenceValue = "";
			else
			{
				_contentValue = (value.content == "unde") ? "N/D" : value.content;
				_occurrenceValue = value.occurrence;
			}
		}
		
		protected function this_rollOverHandler(event:MouseEvent):void
		{
			addEventListener(MouseEvent.ROLL_OUT, this_rollOutHandler);
			if (_itemState != "prohibited" && _itemState != "selected")
				currentState = "rollover";
		}
		
		protected function this_rollOutHandler(event:MouseEvent):void
		{
			removeEventListener(MouseEvent.ROLL_OUT, this_rollOutHandler);
			currentState = _itemState;
		}
	]]>
	</fx:Script>

	
	<s:states>
		<s:State name="idle" />
		<s:State name="selected"/>
		<s:State name="prohibited" />
		<s:State name="rollover" />
	</s:states>

		
	<s:Rect width="100%" height="100%"/>
		<s:fill/>
			<s:SolidColor color="{_itemColor}" />
		</s:fill/>
		<s:fill.rollover/>
			<s:SolidColor color="{_itemRollOverColor}" />
		</s:fill.rollover/>
		<s:fill.prohibited/>
			<s:SolidColor color="{_itemProhibitedColor}" />
		</s:fill.prohibited/>
		<s:fill.selected/>
			<s:SolidColor color="{_elasticFilter.getStyle('itemSelectionColor')}" />
		</s:fill.selected/>
	</s:Rect/>
	<s:Rect width="100%" height="100%" blendMode="normal" blendMode.selected="overlay" alpha.selected=".2">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xFF0000" alpha="0"/>
				<s:GradientEntry color="0x000000" alpha="0.1"/>
			</s:LinearGradient>
		</s:fill>
		<s:fill.selected>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0x000000" />
				<s:GradientEntry color="0xFFFFFF" />
			</s:LinearGradient>
		</s:fill.selected>
	</s:Rect>
	<s:Rect width="100%" height="1" bottom="0">
		<s:fill>
			<s:SolidColor color="0x9E9E9E" color.selected="0x0F5C8C"/>
		</s:fill>
	</s:Rect>
	
	<s:Group width="100%" verticalCenter="0" visible.prohibited="false">
		<s:Label id="contentLabel"
				 text="{_contentValue}" fontFamily="Calibri" fontSize="13"
				 left="10" right="50" lineBreak="toFit" maxDisplayedLines="1"
				 color="0x4D4D4D" color.selected="0xFFFFFF"
				 />
		<s:Label text="{_occurrenceValue}" fontFamily="Calibri" fontSize="13"
				 right="5"
				 color="0x4D4D4D" color.selected="0xFFFFFF"
				 />
	</s:Group>
	
</s:ItemRenderer>