[(#REM) <!-- Analyse de la forme de la distribution

	Affiche dans un tableau les indicateurs de variation, d'asymétrie et d'aplatissement d'un feed
	et un graphique ou une table représentatif de la distribution : effectifs par classe, les classes étant calculées
	par la méthode des amplitudes égales (équivalence).

	@param string plugin
	       Préfixe du plugin utilisateur (obligatoire, non nul).
	@param string feed_id
           Identifiant du feed (obligatoire, non nul).
	@param string nb_classes
           Nombre de classes pour visualiser la distribution (si vide, la valeur par défaut dépend de l'effectif du feed).
	@param string mode
           Type d'affichage de la distribution `graphique` ou `table` (si vide, la valeur par défaut est `graphique`).
-->]

[(#REM) <!-- Statistiques descriptives du feed (position, dispersion) --> ]
#SET{statistiques, #SERIE_STATISTIQUES{#ENV{plugin}, #ENV{feed_id}}}

[(#REM) <!-- Mode d'affichage des données -->]
#SET{mode, #ENV{mode, graphique}}
#SET{classes, #ENV{nb_classes, #GET{statistiques/effectif}|<{50}|?{10, 25}}}

[(#REM) <!-- Classes représentant la distribution de la série pour visualiser la forme (méthode d'équivalence) --> ]
#SET{discretisation, #SERIE_DISCRETISATION{#ENV{plugin}, #ENV{feed_id}, equivalence, #GET{classes}}}
[(#SET{titre_histo, <:territoires_data:titre_graphique_distribution:>})]
[(#SET{titre_table, <:territoires_data:titre_table_distribution:>})]

[(#REM) <!-- Affichage d'un message d'information sur la forme de la distribution  --> ]
#ALERTE_OUVRIR{'', info}
	<p><:territoires_data:info_forme_distribution:></p>
	<ul class="spip">
		<li>[(#GET{statistiques/asymetrie_fisher}|territoire_feed_qualifier_asymetrie)]</li>
		<li>[(#GET{statistiques/asymetrie_fisher}|territoire_feed_qualifier_kurtosis)]</li>
	</ul>
#ALERTE_FERMER

<div class="statistique_feed">
	[(#REM) <!-- Indicateurs de forme --> ]
	<INCLURE{fond=prive/squelettes/inclure/inc-territoire_feed_indicateurs,
		plugin,
		feed_id,
		statistiques=#GET{statistiques},
		indicateurs=#LISTE{cv, asymetrie_fisher, kurtosis_fisher, asymetrie_pearson, kurtosis_pearson},
		classe_conteneur=col-1_3} />

	<div class="col-2_3">
		<div class="groupe-btns--distribution">
			[<form method="GET" action="#SELF" onChange="this.submit(); return true;">
				[(#SELF|parametre_url{nb_classes,''}|form_hidden)]
				<div class="groupe-btns groupe-btns_mini groupe-btns_menu groupe-btns--distribution-classe">
					(#SAISIE{input, nb_classes,
						size=5,
						defaut=#GET{classes},
						label=<:territoires_data:bouton_distribution_classes:>})
				</div>
			</form>]
			<div class="groupe-btns groupe-btns_mini groupe-btns_menu  groupe-btns--distribution-mode">
				<a class="btn[ (#GET{mode}|=={graphique}|oui)btn_on] noajax btn--distribution-to-graphique" href="#" onclick="distribution_changer_mode(this, '#conteneur-distribution', 'graphique'); return false;">
					<:territoires_data:bouton_distribution_histogramme:>
				</a>
				<a class="btn[ (#GET{mode}|=={table}|oui)btn_on] noajax btn--distribution-to-table" href="#"  onclick="distribution_changer_mode(this, '#conteneur-distribution', 'table'); return false;">
					<:territoires_data:bouton_distribution_table:>
				</a>
			</div>
		</div>

		<div id="conteneur-distribution">
			<INCLURE{fond=prive/squelettes/inclure/inc-territoire_feed_distribution_graphique,
				titre=#GET{titre_histo},
				conteneur_class=graphique,
				discretisation=#GET{discretisation},
				statistiques=#GET{statistiques},
				env
			} />
			<INCLURE{fond=prive/squelettes/inclure/inc-territoire_feed_distribution_table,
				titre=#GET{titre_table},
				discretisation=#GET{discretisation},
			} />
		</div>
	</div>
</div>
<script type="text/javascript">
	/**
	 * Change l'affichage de la distribution : graphique ou tableau
	 *
	 * @param node   btn html du bouton
	 * @param string id  identifiant du conteneur du graphique ou de la table
	 * @param string to  mode 'graphique' ou 'table'
	 */
	function distribution_changer_mode(btn, id, to) {
		jQuery(btn).parent().find('.btn').removeClass('btn_on');
		jQuery(btn).addClass('btn_on');
		distribution_afficher_mode(id, to);
		const url = parametre_url(window.document.location.href, 'mode', to);
		window.history.replaceState({}, window.document.title, url);
	}

	/**
	 * Affiche le graphique ou le tableau
	 *
	 * @param string id  identifiant du conteneur du graphique ou de la table
	 * @param string to 'graphique' ou 'table'
	 */
	function distribution_afficher_mode(id, to) {
		if (to === 'table') {
			jQuery(id).find('#graphique_distribution').hide().end().find('#table_distribution').show();
		} else {
			jQuery(id).find('#table_distribution').hide().end().find('#graphique_distribution').show();
		}
	}

	(function($){
		// Affichage au chargement de la page
		mode = ['(#GET{mode})']
		distribution_afficher_mode('#conteneur-distribution', mode);
		// Affichage lors de rechargements ajax
		onAjaxLoad(distribution_afficher_mode('#conteneur-distribution', mode));

	})(jQuery);
</script>