https://github.com/ebidel/spark-line

<spark-line> web component for making...spark lines!
https://github.com/ebidel/spark-line

Last synced: about 1 year ago
JSON representation

<spark-line> web component for making...spark lines!

• Host: GitHub
• URL: https://github.com/ebidel/spark-line
• Owner: ebidel
• License: apache-2.0
• Created: 2018-10-01T22:45:44.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-10-03T21:08:37.000Z (over 7 years ago)
• Last Synced: 2025-03-29T00:12:34.777Z (over 1 year ago)
• Language: JavaScript
• Size: 55.7 KB
• Stars: 11
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# <spark-line>

`` is a web component for making...spark lines!

It includes data points on hover and adjusts the line/fill color based 

on thresholds score values from [Lighthouse](https://github.com/GoogleChrome/lighthouse).



(Note: the Lighthhouse score gauge in the screenshot is not part of thhe component).

Future work

- Make threshold score coloring configurable.

- Make interactivity optional.

- Have option to show all data points.

### Usage

First run `npm run build` to build the sass file.

```html

 spark-line {

  display: inline-block;

  width: 100%;

  height: 75px;

  contain: content;

}

```