tiny-spark 0.1.0-alpha.3 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -7,6 +7,10 @@
|
|
|
7
7
|
|
|
8
8
|
An elegant, reactive and responsive sparkline chart solution without dependency.
|
|
9
9
|
|
|
10
|
+
<img width="500" alt="image" src="https://github.com/user-attachments/assets/d312a234-8e09-44a2-89fd-5ae85a6cdbec" />
|
|
11
|
+
|
|
12
|
+
[DEMO](https://tiny-spark.graphieros.com/)
|
|
13
|
+
|
|
10
14
|
## Installation
|
|
11
15
|
|
|
12
16
|
```
|
|
@@ -15,6 +19,12 @@ npm i tiny-spark
|
|
|
15
19
|
|
|
16
20
|
## Usage
|
|
17
21
|
|
|
22
|
+
Import the file in your project (or use the cdn):
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
import "tiny-spark/dist/tiny-spark.umd";
|
|
26
|
+
```
|
|
27
|
+
|
|
18
28
|
Just set up a div with a "tiny-spark" class, with a few data attributes to configure the chart.
|
|
19
29
|
|
|
20
30
|
```html
|
|
@@ -38,3 +48,37 @@ Just set up a div with a "tiny-spark" class, with a few data attributes to confi
|
|
|
38
48
|
></div>
|
|
39
49
|
</div>
|
|
40
50
|
```
|
|
51
|
+
|
|
52
|
+
## Styling
|
|
53
|
+
|
|
54
|
+
tiny-spark is headless.
|
|
55
|
+
|
|
56
|
+
Target the following css classes to customize elements:
|
|
57
|
+
|
|
58
|
+
```css
|
|
59
|
+
/** the chart container (div element) */
|
|
60
|
+
.tiny-spark {
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/** the tooltip (div element) */
|
|
64
|
+
.tiny-spark-tooltip {
|
|
65
|
+
/** just display:none if you don't need it */
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/** the indicator (svg line element) */
|
|
69
|
+
.tiny-spark-indicator {
|
|
70
|
+
/** for example: customize stroke-dasharray */
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/** the plots (svg circle element) */
|
|
74
|
+
.tiny-spark-datapoint-circle {
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/** the chart line (svg path element) */
|
|
78
|
+
.tiny-spark-line-path {
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/** the chart area (svg path element) */
|
|
82
|
+
.tiny-spark-line-area {
|
|
83
|
+
}
|
|
84
|
+
```
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tiny-spark",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "An elegant, reactive and responsive sparkline chart solution without dependency.",
|
|
7
7
|
"author": "Alec Lloyd Probert",
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
"type": "git",
|
|
19
19
|
"url": "git+https://github.com/graphieros/tiny-spark.git"
|
|
20
20
|
},
|
|
21
|
+
"homepage": "https://tiny-spark.graphieros.com/",
|
|
21
22
|
"scripts": {
|
|
22
23
|
"dev": "vite",
|
|
23
24
|
"build": "tsc && vite build"
|