Widget de page d'accueil : Donut

Mise en place d'un donut.

02/04/2019


Cet article explique comment mettre en place un graphique de type Donut et comment intéragir avec.

Depuis la 2.4.0, Flower supporte deux types de graphe sur la page d’accueil, le donut et l’histogramme. Ces graphes permettent une meilleure visualisation de l’état des composants stockés en GED. Aujourd’hui, on va présenter le plus délicieux widget : le donut.

Mon premier donut

Dans l’exemple ci-dessous, nous définissons une recherche pour fabriquer un donut.

	<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> 

Finalement, voici le donut sur la page d’accueil :

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

Redirection depuis le donut

La méthode handleDonutClick peut être surchargée pour rediriger vers un url, ou bien diverses intégrations en fonction de votre besoin. Dans l’exemple suivant, elle permet d’ouvrir la corbeille Personnelle, comme bucket sélectionné, celui sur lequel nous venons de cliquer dans le donut.

function handleDonutClick(selector, fieldName, fieldValue, label){
	if (selector.startsWith("#pliSearch") && fieldName==="Statut") {
		location.href = "#Browse:Id=PersonnelleTab;sL="+fieldValue;
	}
}