Graphiques

Dans la page d’accueil, il est possible d’afficher des graphiques définis à partir de recherche. Le type de graphique est automatiquement déterminé à partir du nombre d’aggrégation : :

  • un niveau d’aggrégation : donut
  • deux niveaux d’aggrégation : histogramme

Donut

Exemple : Donut de mes courriers en fonction de leur statut

	<bean id="myMailsGraph" class="com.flower.docs.gui.client.home.graph.HomeGraphPresenter">
		<property name="search">
			<bean class="com.flower.docs.domain.search.Search">
				<property name="id">
				    <bean class="com.flower.docs.domain.common.Id">
				        <property name="value" value="pliSearch" />
				    </bean>
				</property>				
				<property name="category">
					<value type="com.flower.docs.domain.component.Category">TASK</value>
				</property>
				<property name="request">
					<bean class="com.flower.docs.domain.search.SearchRequest">
						<property name="selectClause">
							<bean class="com.flower.docs.domain.search.SelectClause">
								<property name="fields">
									<list>
										<value>name</value>
									</list>
								</property>
							</bean>
						</property>
						<property name="filterClauses">
							<list>
								<bean class="com.flower.docs.domain.search.AndClause">
									<property name="criteria">
										<list>
											<bean class="com.flower.docs.domain.search.Criterion">
												<property name="name" value="assignee" />
												<property name="type">
													<value type="com.flower.docs.domain.search.Types">STRING</value>
												</property>
												<property name="operator">
													<value type="com.flower.docs.domain.search.Operators">EQUALS_TO</value>
												</property>
												<property name="values">
													<list>
														<value>${user.id}</value>
													</list>
												</property>
											</bean>
										</list>
									</property>
								</bean>
							</list>
						</property>
						<property name="aggregation">
							<bean class="com.flower.docs.domain.search.FieldAggregation">
								<property name="field" value="Statut" />
							</bean>
						</property>
					</bean>
				</property>
				<property name="displayNames">
					<list>
						<bean class="com.flower.docs.domain.i18n.I18NLabel">
							<property name="language" value="EN"/>
							<property name="value" value="My mails"/>
						</bean>
						<bean class="com.flower.docs.domain.i18n.I18NLabel">
							<property name="language" value="FR"/>
							<property name="value" value="Mes courriers"/>
						</bean>
					</list>
				</property>
			</bean>
		</property>
		<property name="description">
			<list>
				<bean class="com.flower.docs.domain.i18n.I18NLabel">
					<property name="language" value="EN" />
					<property name="value" value="Mails which are assigned to me" />
				</bean>
				<bean class="com.flower.docs.domain.i18n.I18NLabel">
					<property name="language" value="FR" />
					<property name="value" value="Les courriers qui me sont assignés" />
				</bean>
			</list>
		</property>
	</bean> 


Le résultat suivant sur la page d’accueil :

Démonstration d'un donut
Démonstration d'un donut


Pour rediriger l’utilisateur lors d’un clic sur une série, surchargez la méthode Javascript handleDonutClick(selector, fieldName, fieldValue, label).

Histogramme

Avec ce type de graphe, le premier niveau d’aggrégation est utilisé pour afficher les colonnes verticales. Le second niveau permet de définir les séries.

Exemple : Histogramme de tous les courriers en fonction du service et du statut

	<bean id="allMailsGraph" class="com.flower.docs.gui.client.home.graph.HomeGraphPresenter">
		<property name="search">
			<bean class="com.flower.docs.domain.search.Search">
				<property name="id">
				    <bean class="com.flower.docs.domain.common.Id">
				        <property name="value" value="allSearch" />
				    </bean>
				</property>				
				<property name="category">
					<value type="com.flower.docs.domain.component.Category">TASK</value>
				</property>
				<property name="request">
					<bean class="com.flower.docs.domain.search.SearchRequest">
						<property name="selectClause">
							<bean class="com.flower.docs.domain.search.SelectClause">
								<property name="fields">
									<list>
										<value>name</value>
									</list>
								</property>
							</bean>
						</property>
						<property name="filterClauses">
							<list>
								<bean class="com.flower.docs.domain.search.AndClause">
									<property name="criteria">
										<list>
											<bean class="com.flower.docs.domain.search.Criterion">
												<property name="name" value="assignee" />
												<property name="type">
													<value type="com.flower.docs.domain.search.Types">STRING</value>
												</property>
												<property name="operator">
													<value type="com.flower.docs.domain.search.Operators">DISPLAY</value>
												</property>
												<property name="values">
													<list>
														<value>${user.id}</value>
													</list>
												</property>
											</bean>
										</list>
									</property>
								</bean>
							</list>
						</property>
						<property name="aggregation">
							<bean class="com.flower.docs.domain.search.FieldAggregation">
								<property name="field" value="ServiceDestinataire" />
								<property name="nested">
									<list>
										<bean class="com.flower.docs.domain.search.FieldAggregation">
											<property name="field" value="Statut" />
										</bean>
									</list>
								</property>
							</bean>
						</property>
					</bean>
				</property>
				<property name="displayNames">
					<list>
						<bean class="com.flower.docs.domain.i18n.I18NLabel">
							<property name="language" value="EN"/>
							<property name="value" value="All mails"/>
						</bean>
						<bean class="com.flower.docs.domain.i18n.I18NLabel">
							<property name="language" value="FR"/>
							<property name="value" value="Tous les courriers"/>
						</bean>
					</list>
				</property>
			</bean>
		</property>
		<property name="description">
			<list>
				<bean class="com.flower.docs.domain.i18n.I18NLabel">
					<property name="language" value="EN" />
					<property name="value" value="All the mails in Flower" />
				</bean>
				<bean class="com.flower.docs.domain.i18n.I18NLabel">
					<property name="language" value="FR" />
					<property name="value" value="Tous les courriers dans Flower" />
				</bean>
			</list>
		</property>
	</bean>

Le résultat suivant sur la page d’accueil :

Démonstration d'un histogramme
Démonstration d'un histogramme


Pour rediriger l’utilisateur lors d’un clic sur une série, surchargez la méthode Javascript handleStackedBarClick(selector, bar, serie).