<spark-line> v1.2.4

A Web Component to turn an array of integers into a fun little chart.
There are 6 stargazers on GitHub and it was downloaded 47 times in the last month on npm.

Unfortunately, this page requires JavaScript to display sparklines and use the interactive example.

Hey, psst!… You can jump straight down to the examples!

Installation

Available on npm:

npm install @chrisburnell/spark-line --save-dev

You can also download it directly from GitHub: https://github.com/chrisburnell/spark-line/archive/main.zip

Usage

This package exposes/makes available a Custom HTML Element I’m calling spark-line. While this requires JavaScript on the front end, it makes the process of invoking and displaying sparklines for X,Y data very simple.

Include spark-line.js in your page however you like, as an import to your existing JS:

import "@chrisburnell/spark-line/spark-line"

Or as its own reference in your HTML:

<script type="module" src="`/spark-line.js"></script>

Then you can start using <spark-line>!

<spark-line values="1,2,3,5,8,13,21"></spark-line>

The element takes a number of attributes:

Values Description
values
(required)		 comma-delimited string of integers defines the values of the graph
line-width 2 (default) defines the width/thickness of the line as an integer
curve true (default) toggles applying curves (cardinal splines) to the line
endpoint true (default) toggles the display of a point at the end of the line
color currentColor (default) defines the color of the line
endpoint-color color (default) defines the color of the endpoint
points comma-delimited string of integers supercedes endpoint
comma-delimited string of integers representing at which pairing values you want points to appear at
arrays of a length less than the length of the values array will be looped over according to values
colors comma-delimited string of integers supercedes endpoint-color
comma-delimited string of integers representing the colour of the paired points
arrays of a length less than the length of the values array will be looped over according to values
start-label string creates a label before the graph
end-label string creates a label after the graph

is-land

Since this custom Web Component requires JavaScript to function, it could be a good idea to put it behind some kind of partial hydration. For my site, in particular, I’ve decided to use <is-land>, which works as a framework independent partial hydration islands architecture implementation.

If you wanted to use <is-land> as well, I recommend something like the following as a solid baseline:

<is-land on:visible>
	<spark-line webc:keep :values="this.values" :curve="this.curve" :color="this.color" :colors="this.colors" :endpoint-color="this['endpoint-color']" :points="this.points" :line-width="this['line-width']" :start-label="this['start-label']" :end-label="this['end-label']"></spark-line>

	<template webc:raw data-island="once">
		<link rel="stylesheet" href="/css/components/spark-line.css" />
		<script type="module" :src="`/js/components/spark-line.js`"></script>
	</template>
</is-land>

Examples

default

line-width="4"

curve="false"

endpoint="false"

color="rebeccapurple"

endpoint-color="red"

points="1"

points="1,0"

points="0,2,0,1"

endpoint-color="rebeccapurple" points="0,2,0,1"

colors="rebeccapurple"

points="1" colors="rebeccapurple"

points="1" colors="red,green,blue"

rainbow!

start-label="Start" end-label="End"

Interactive Example

That’s right! All spark-lines are dynamic out-of-the-box!






6 Responses

  1. 6 Stargazers