2.0.2 • Published 2 years ago
@echosgraphiques/ui-components v2.0.2
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-componentsDocumentation
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émentaireLoadingCache: 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 sidirectionvauthorizontalouboth) -on:swiperight: événement lancé lors du balayage vers la droite (uniquement sidirectionvauthorizontalouboth) -on:swipeup: événement lancé lors du balayage vers le haut (uniquement sidirectionvautverticalouboth) -on:swipedown: événement lancé lors du balayage vers le bas (uniquement sidirectionvautverticalouboth)
<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,keyde 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é deitemsà 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émentaireChartSubtitle: 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’infographieNe 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 publishpour mettre à jour le paquet