<spark-line>

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

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

Installation Permalink ¶

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 Permalink ¶

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
`stroke-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 Permalink ¶

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 Permalink ¶

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 Permalink ¶

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

6 Responses

6 Stargazers

<spark-line> v1.2.6