🏗️ 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'
npm install @echosgraphiques/ui-components
-
Accordion
: accordéonheader
(slot) : en-tête de l’accordéoncontent
(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 chargementhidden
:boolean
, cacher le cache (typiquement après la fin du chargement des données)
-
Spacer
: espacement verticalheight
: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 sidirection
vauthorizontal
ouboth
) -
on:swiperight
: événement lancé lors du balayage vers la droite (uniquement sidirection
vauthorizontal
ouboth
) -
on:swipeup
: événement lancé lors du balayage vers le haut (uniquement sidirection
vautvertical
ouboth
) -
on:swipedown
: événement lancé lors du balayage vers le bas (uniquement sidirection
vautvertical
ouboth
)
-
<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
: infobullex
: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>
-
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 boutonsoptions
: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 à cocherchecked
: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éroulantoptions
: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 recherchekey
:string
, clé deitems
à utiliser pour la rechercheitems
:object[]
, tableau contenant les éléments parmi lesquels effectuer la rechercheselected
: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èremin
:number
, valeur minimum de l’intervallemax
: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} />
-
Source
: source d'un graphique (slot)-
style
:string
, CSS supplémentaire
-
-
ChartTitle
: titre d'une infographie (slot)-
style
:string
, CSS supplémentaire
-
-
ChartSubtitle
: sous-titre d'une infographie (slot)-
style
:string
, CSS supplémentaire
-
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
).
- 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