sparkline

ligne scintillante

Générez des sparklines SVG avec JavaScript sans aucune dépendance externe.

Installation

Cette bibliothèque est disponible sous forme de package NPM. Pour l'installer, utilisez la commande suivante :

 npm install @fnando/sparkline --save

Si vous utilisez Yarn (et vous devriez le faire) :

 yarn add @fnando/sparkline

Vous devrez appeler sparkline.sparkline(svg, values, options) directement si vous chargez le script sans compiler votre script (par exemple webpack). Sinon, vous pouvez simplement import sparkline from "@fnando/sparkline"; .

API

sparkline(svg, values, options = {})

• svg : Il s'agit d'une référence <svg> qui doit contenir trois attributs obligatoires ( width , height et stroke-width ). Ces attributs sont utilisés pour calculer la zone de dessin.
• values : vous pouvez fournir un tableau de nombres ou un tableau d'objets qui répondent à .value . Si vous avez une structure de données différente, consultez options.fetch .
• options : Cet argument facultatif vous permet de personnaliser davantage la sparkline. Les options disponibles sont :
  • fetch : utilisez cette fonction pour renvoyer la valeur si vous disposez d'une structure de données différente qui n'est pas prise en charge nativement par sparkline.
  • onmousemove : En définissant cette fonction de rappel, vous activerez le mode interactif (sauf si vous définissez options.interactive sur false ). La signature de rappel est callback(event, datapoint) , où datapoint est un objet contenant la valeur, les coordonnées x/y et l'index de l'élément.
  • onmouseout : Cette fonction de rappel est appelée à chaque fois que la souris quitte la zone SVG. Vous pouvez l'utiliser pour masquer des éléments tels que des info-bulles.
  • spotRadius : Définissez le rayon du spot. La valeur par défaut est 2 .
  • cursorWidth : Définit la largeur du curseur. La valeur par défaut est 2 .
  • interactive : Lorsque true , cela active le mode interactif. Vous n'êtes pas obligé de définir cette option si vous fournissez un rappel onmousemove .

Usage

Voici l'exemple de travail minimum :

 <!-- width, height and stroke-width attributes must be defined on the target SVG -->
< svg class =" sparkline " width =" 100 " height =" 30 " stroke-width =" 3 " > </ svg >

< script >
  sparkline ( document . querySelector ( ".sparkline" ) , [ 1 , 5 , 2 , 4 , 8 , 3 , 7 ] ) ;
</ script >

Vous pouvez modifier les couleurs en définissant les attributs directement sur l'élément SVG ou en utilisant CSS, comme suit :

 /* just the line */
. sparkline {
  stroke : red;
  fill : none;
}

/* line with highlight area */
. sparkline {
  stroke : red;
  fill : rgba ( 255 , 0 , 0 , .3 );
}

/* change the spot color */
. sparkline--spot {
  stroke : blue;
  fill : blue;
}

/* change the cursor color */
. sparkline--cursor {
  stroke : orange;
}

/* style fill area and line colors using specific class name */
. sparkline--fill {
  fill : rgba ( 255 , 0 , 0 , .3 );
}

. sparkline--line {
  stroke : red;
}

Exemples

Statique

Disponible sur https://codepen.io/fnando/full/KyZLLV/

Interactif

Disponible sur https://codepen.io/fnando/full/GOQLVE/

Licence

(La licence MIT)

L'autorisation est accordée par la présente, gratuitement, à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés (le « Logiciel »), d'utiliser le Logiciel sans restriction, y compris, sans limitation, les droits d'utilisation, de copie, de modification, de fusion. , publier, distribuer, accorder des sous-licences et/ou vendre des copies du Logiciel, et permettre aux personnes à qui le Logiciel est fourni de le faire, sous réserve des conditions suivantes :

L'avis de droit d'auteur ci-dessus et cet avis d'autorisation doivent être inclus dans toutes les copies ou parties substantielles du logiciel.

LE LOGICIEL EST FOURNI « TEL QUEL », SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS MAIS SANS LIMITATION LES GARANTIES DE QUALITÉ MARCHANDE, D'ADAPTATION À UN USAGE PARTICULIER ET DE NON-VIOLATION. EN AUCUN CAS LES AUTEURS OU LES TITULAIRES DES DROITS D'AUTEUR NE SERONT RESPONSABLES DE TOUTE RÉCLAMATION, DOMMAGES OU AUTRE RESPONSABILITÉ, QUE CE SOIT DANS UNE ACTION CONTRACTUELLE, DÉLIT OU AUTRE, DÉCOULANT DE, DE OU EN RELATION AVEC LE LOGICIEL OU L'UTILISATION OU D'AUTRES TRANSACTIONS DANS LE LOGICIEL.