<spark-line> v1.2.2

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

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 data-island="once">
<script type="module" :src="`/js/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!






4 Responses

  1. 4 Stargazers