rework description; include examples in README

chrisburnell · Jan 22, 2024 · ac11d88 · ac11d88
1 parent fcd285b
commit ac11d88
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -1,17 +1,95 @@
 # `svg-sparkline`
 
-A Web Component for building an SVG Sparkline.
+A Web Component that builds an SVG Sparkline.
 
 **[Demo](https://chrisburnell.github.io/svg-sparkline/demo.html)** | **[Further reading](https://chrisburnell.com/svg-sparkline/)**
 
 ## Examples
 
-General usage example:
+### General usage example
 
 ```html
 <script type="module" src="svg-sparkline.js"></script>
 
-<svg-sparkline></svg-sparkline>
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9"></svg-sparkline>
+```
+
+### With curve
+
+```html
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
+```
+
+### Start and End labels
+
+```html
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
+```
+
+### Animated
+
+```html
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true"></svg-sparkline>
+```
+
+### Defined Animation Duration
+
+```html
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-duration="2s"></svg-sparkline>
+```
+
+### Defined color
+
+```html
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" color="purple"></svg-sparkline>
+```
+
+### With gradient
+
+```html
+<svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
+```
+
+### Filled
+
+```html
+<svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" fill="true"></svg-sparkline>
+```
+
+### Defined gradient color
+
+```html
+<svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" gradient="true" gradient-color="rebeccapurple"></svg-sparkline>
+```
+
+### Defined endpoint color
+
+```html
+<svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" endpoint-color="red"></svg-sparkline>
+```
+
+### Defined size
+
+```html
+<svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" width="300" height="50"></svg-sparkline>
+```
+
+### Defined line width
+
+```html
+<svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" line-width="6"></svg-sparkline>
+```
+
+### Defined endpoint width
+
+```html
+<svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" endpoint-width="10"></svg-sparkline>
+```
+
+### Without endpoint
+
+```html
+<svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8" endpoint="false"></svg-sparkline>
 ```
 
 ## Features
@@ -39,15 +117,15 @@ Make sure you include the `<script>` in your project (choose one of these):
 <!-- 3rd party CDN, not recommended for production use -->
 <script
  type="module"
- src="https://www.unpkg.com/@chrisburnell/svg-sparkline@0.0.7/svg-sparkline.js"
+ src="https://www.unpkg.com/@chrisburnell/svg-sparkline@0.0.8/svg-sparkline.js"
 ></script>
 ```
 
 ```html
 <!-- 3rd party CDN, not recommended for production use -->
 <script
  type="module"
- src="https://esm.sh/@chrisburnell/svg-sparkline@0.0.7"
+ src="https://esm.sh/@chrisburnell/svg-sparkline@0.0.8"
 ></script>
 ```
 

diff --git a/demo.html b/demo.html
@@ -11,31 +11,31 @@
  <body>
  <h2>General usage example</h2>
  <p>
- <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8,5"></svg-sparkline>
+ <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9"></svg-sparkline>
  </p>
  <h2>With curve</h2>
  <p>
- <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8,5" curve="true"></svg-sparkline>
+ <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" curve="true"></svg-sparkline>
  </p>
  <h2>Start and End labels</h2>
  <p>
- <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8,5" start-label="Start" end-label="End"></svg-sparkline>
+ <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End"></svg-sparkline>
  </p>
  <h2>Animated</h2>
  <p>
- <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8,5" start-label="Start" end-label="End" animate="true"></svg-sparkline>
+ <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true"></svg-sparkline>
  </p>
  <h2>Defined Animation Duration</h2>
  <p>
- <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8,5" start-label="Start" end-label="End" animate="true" animation-duration="2s"></svg-sparkline>
+ <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" start-label="Start" end-label="End" animate="true" animation-duration="2s"></svg-sparkline>
  </p>
  <h2>Defined color</h2>
  <p>
- <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8,5" color="purple"></svg-sparkline>
+ <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" color="purple"></svg-sparkline>
  </p>
  <h2>With gradient</h2>
  <p>
- <svg-sparkline values="1,4,2,6,6,3,5,2,1,2,3,8,5" gradient="true"></svg-sparkline>
+ <svg-sparkline values="8,3,2,7,9,1,5,6,4,10,3,8,2,7,1,9" gradient="true"></svg-sparkline>
  </p>
  <h2>Filled</h2>
  <p>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@chrisburnell/svg-sparkline",
- "version": "0.0.7",
- "description": "A Web Component for building an SVG Sparkline.",
+ "version": "0.0.8",
+ "description": "A Web Component that builds an SVG Sparkline.",
  "main": "svg-sparkline.js",
  "scripts": {
  "start": "npx http-server ."