DashboardLayout

DashboardLayout

Ce composant permet de rendre une mise en page de tableau de bord. Il prend pour enfant des composants DashboardElement et les dipose dans une grille (2 colonne sur ordinateur, 1 seule sur mobile). Si au moins un des DashboardElement a une pripriété section, le composant DashboardLayout propose à l'utilisateur des boutons permettants de naviguer entre les sections, en ajoutant une éventuelle section Autres.

Il est possible de lui passer une propriété controle contenant des éléments de formulaire (choix de l'année ou autres paramètres). Ceux-ci seront affichées dans une barre en haut de la page.

La propriété sections est optionnelle :

• Si elle est omise, un bouton radio sera crée pour chaque section différente trouvée dans les DashboardElement enfants.
• Une liste de string permet de forcer un certain ordre. Si une section est nommé 'Autres', elle contiendra également les enfants dont aucune section n'est spécifiée.
• Une liste d'objets ayant les propriété key, libel? et order? : permet de personnalisé l'ordre et le libellé de chaque section.

Exemple

 <DashboardLayout
    control={<MonFormulaireDeControle />} >

    <DashboardElement
        title="Mon graphique de démo"
        section="Catégorie 1"
        >
        <MonGraphique1 />
    </DashboardElement>

    <DashboardElement
        title="Un autre graphique de démo"
        section="Catégorie 2"
        >
        <MonGraphique2 />
    </DashboardElement>

</DashboardLayout>

 <DashboardLayout
    control={<MonFormulaireDeControle />} 
    sections={['Panorama', 'Prévention', 'Valorisation', 'Stockage']} //Ici on force un certain ordre
    >

    {/* Composants enfants*/}

</DashboardLayout>

 <DashboardLayout
    control={<MonFormulaireDeControle />} 
    sections={[{key: 'Prévention', order:5}, {key:'Panorama', libel:'Résumé', order:1}]} //Ici, les enfants ayant comme section "Panorama" seront affichés sous l'onglet "Résumé". Ce dernier sera en premier.
    >

    {/* Composants enfants*/}

</DashboardLayout>