Les Échos Graphiques – UI Components

🏗️ Ce repo est une bibliothèque de composants d’interface à destination des grands-formats et infographies publiés sur le site des Échos.

Les composants utilisent Svelte.

ooooo                              oooooooooooo           oooo
`888'                              `888'     `8           `888
 888          .ooooo.   .oooo.o     888          .ooooo.   888 .oo.    .ooooo.   .oooo.o
 888         d88' `88b d88(  "8     888oooo8    d88' `"Y8  888P"Y88b  d88' `88b d88(  "8
 888         888ooo888 `"Y88b.      888    "    888        888   888  888   888 `"Y88b.
 888       o 888    .o o.  )88b     888       o 888   .o8  888   888  888   888 o.  )88b
o888ooooood8 `Y8bod8P' 8""888P'    o888ooooood8 `Y8bod8P' o888o o888o `Y8bod8P' 8""888P'

Installation

npm install @echosgraphiques/ui-components

Documentation

Layout

• Accordion: accordéon
  • header (slot) : en-tête de l’accordéon
  • content (slot) : contenu de l’accordéon à révéler
  • visible: boolean, accordéon visible ou non (2-way binding), défaut : false
  • duration: number, durée d’ouverture de l’accordéon en secondes, défaut : 0.4
  • on:open: événement lancé lors de l’ouverture de l’accordéon
  • on:close: événement lancé lors de la fermeture de l’accordéon

<script>
    import { Accordion } from '@echosgraphiques/ui-components/layout';

    const candidates = [/* ... */];

    let selected = null;
</script>

{#each candidates as candidate, i}
    <Accordion
        visible={selected ? selected === candidate.id : i === 0}
        on:open={() => selected = candidate.id}
        on:close={() => selected = null}
    >
        <svelte:fragment slot='header'>
            <h3>{candidate.name}</h3>
        </svelte:fragment>
        <svelte:fragment slot='content'>
            <!-- ... -->
        </svelte:fragment>
    </Accordion>
{/each}

• EmbedLayout: habillage pour une infographie intégrée

  • style: string, CSS supplémentaire

• LoadingCache: cache de chargement

  • hidden: boolean, cacher le cache (typiquement après la fin du chargement des données)

• Spacer: espacement vertical

  • height: number (en rem)

• Swipable: élément pouvant être balayé sur mobile (slot)

  • direction: string, direction du balayage (horizontal|vertical|both), défaut : horizontal
  • on:swipe: événement lancé lors de n’importe quel balayage
  • on:swipeleft: événement lancé lors du balayage vers la gauche (uniquement si direction vaut horizontal ou both)
  • on:swiperight: événement lancé lors du balayage vers la droite (uniquement si direction vaut horizontal ou both)
  • on:swipeup: événement lancé lors du balayage vers le haut (uniquement si direction vaut vertical ou both)
  • on:swipedown: événement lancé lors du balayage vers le bas (uniquement si direction vaut vertical ou both)

<script>
    import { Swipable } from '@echosgraphiques/ui-components/layout';

    const data = [/* ... */];

    let index;

    const prev = () => {
        index = Math.max(0, index - 1);;
    }

    const next = () => {
        index = Math.min(index + 1, data.length - 1);
    }
</script>

<Swipable on:swipeleft={prev} on:swiperight={next}>
    <div class='carousel'>
        <!-- ... -->
    </div>
</Swipable>

• Tooltip: infobulle
  • x: number, position horizontale de l’infobulle (en px)
  • y: number, position verticale de l’infobulle (en px)
  • width: number, largeur de l’élément parent (en px)
  • offset: number, décalage (en rem) entre la pointe de l’infobulle et la position (x, y), défaut : 0
  • style: string, CSS supplémentaire

<script>
    import { Tooltip } from '@echosgraphiques/ui-components/layout';

    /* ... */

    let hovered = null;
</script>

<div class='chart-container'>
    <!-- ... -->
    {#if hovered}
        <Tooltip
            x={xScale(hovered.position[0])}
            y={yScale(hovered.position[1])}
            {width} offset={0.5}
        >
            <h3>{hovered.datum.label}</h3>
            <h4>{format('.1~f')(hovered.datum.value)}</h4>
        </Tooltip>
    {/if}
</div>

Navigation

• Arrow: flèche de navigation
  • color: string, couleur de la flèche, défaut : black
  • direction: string, direction de la flèche, défaut : down
  • size: string, taille de la flèche, défaut : 2rem
  • width: string, largeur de la flèche, défaut : 0.5rem
  • animated: boolean, animer ou non la flèche, défaut : false
  • disabled: boolean, désactiver ou non la flèche, défaut : false
  • hidden: boolean, cacher ou non la flèche, défaut : false
  • on:click: événement lancé au clic sur la flèche

<script>
    import { Arrow } from '@echosgraphiques/ui-components/navigation';

    const data = [/* ... */];

    let index;

    const prev = () => {
        index = Math.max(0, index - 1);;
    }

    const next = () => {
        index = Math.min(index + 1, data.length - 1);
    }
</script>

<Arrow
    direction='left'
    hidden={index === 0}
    on:click={prev} />
<Arrow
    direction='right'
    hidden={index === data.length - 1}
    animated={index === 0}
    on:click={next} />

• ButtonBlock: ensemble de boutons
  • options: string[] ou string[][], tableau contenant les différentes options sous forme d’un tableau ou d’un tableau de paires [clé, nom]
  • selected: string, key de l’option sélectionnée (2-way binding)

<script>
    import { ButtonBlock } from '@echosgraphiques/ui-components/navigation';

    const options = [
        ['police', 'Selon la police'],
        ['unions', 'Selon les syndicats']
    ];

    let source = 'police';
</script>

<ButtonBlock {options} bind:selected={source} />

• Checkbox: case à cocher
  • checked: boolean, statut (2-way binding)
  • label: string, étiquette

<script>
    import { Checkbox } from '@echosgraphiques/ui-components/navigation';

    let is2030 = false;
</script>

<Checkbox
    bind:checked={is2030}
    label='Comparez avec les objectifs 2030' />

• Dropdown: menu déroulant
  • options: string[] ou string[][], tableau contenant les différentes options sous forme d’un tableau ou d’un tableau de paires [clé, nom]
  • selected: string, clé de l’option sélectionnée (2-way binding)

<script>
    import { Dropdown } from '@echosgraphiques/ui-components/navigation';

    const sectors = [
        'Tous les secteurs',
        'Automobile',
        'Banque',
        'Energie',
        'Industrie',
        'Tech',
        /* ... */
    ];

    let sector = 'Tous les secteurs';
</script>

<Dropdown
    options={sectors}
    bind:selected={sector} />

• SearchBar: barre de recherche
  • key: string, clé de items à utiliser pour la recherche
  • items: object[], tableau contenant les éléments parmi lesquels effectuer la recherche
  • selected: object, élément sélectionner (2-way binding)
  • placeholder: string, texte à afficher dans la barre de recherche, défaut : 'Rechercher'
  • formatter: function, fonction permettant de spécifier le formatage des éléments dans les résultats de recherche, défaut : (item) => item[key]

<script>
    import { SearchBar } from '@echosgraphiques/ui-components/navigation';

    const data = [
        { name: 'Paris', country: 'France' },
        { name: 'Londres', country: 'Royaume-Uni' },
        { name: 'New York', country: 'Etats-Unis' },
        { name: 'Auckland', country: 'Nouvelle-Zélande' },
        /* ... */
    ];

    let selectedCity;
</script>

<SearchBar
    key='name'
    items={data}
    bind:selected={selectedCity}
    placeholder='Recherchez une ville'
    formatter={(item) => `${item.name} (${item.country})`} />

• Slider: glissière
  • min: number, valeur minimum de l’intervalle
  • max: number, valeur maximum de l’intervalle
  • step: number, incrémentation de l’intervalle, défaut : 1
  • value: number, valeur sélectionnée (2-way binding)

<script>
    import { Slider } from '@echosgraphiques/ui-components/navigation';

    let count;
</script>

<Slider min={0} max={100} bind:value={count} />

Text

• Source: source d'un graphique (slot)
  • style: string, CSS supplémentaire

Titraille

• ChartTitle: titre d'une infographie (slot)
  • style: string, CSS supplémentaire
• ChartSubtitle: sous-titre d'une infographie (slot)
  • style: string, CSS supplémentaire

Développement

Pour créer un nouveau composant ou en modifier un existant, et le tester dans un grand-format ou une infographie :

# Dans ce dossier
npm link

# Dans le dossier de l’infographie
npm link @echosgraphiques/ui-components

# Cela a pour effet de créer un lien symbolique entre le paquet
# en développement et le dossier node_modules/ de l’infographie

Ne pas oublier d’ajouter le composant au index.js de la catégorie correspondante (voir index dans cli-tools).

Publication du paquet NPM

• Pour une petite correction : npm version patch
• Pour l’ajout d’un composant ou une modification importante : npm version minor
• Puis : npm publish pour mettre à jour le paquet