<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.
Hey, psst!… You can jump straight down to the examples!
Installation Permalink ¶
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 |
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 atarrays 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