02/04/2019
Cet article explique comment mettre en place un graphique de type Donut et comment interagir avec.
Depuis la 2.4.0, FlowerDocs 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 :
Redirection depuis le donut
La méthode handleDonutClick peut être surchargée pour rediriger vers une 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;
}
}