Skip to content

Commit a6a1c20

Browse files
committed
docs : update Readme.md
1 parent c811c76 commit a6a1c20

1 file changed

Lines changed: 8 additions & 10 deletions

File tree

Readme.md

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Sparklines with `svg` & `react`. [Demo](https://polmoneys.github.io/Sparkline/)
44

55
### Sparkline
66

7-
Tiny/Dense **sparklines** where the initial goal of this exploration. It could do **exports**, **captions**, **tooltips**, **crosshairs**, **dimming** for extra focus...On v2 `beta` added built in **url** sync with `react-router` and **excel** export.
7+
Tiny/Dense **sparklines** where the initial goal of this exploration. It could do **exports**, **captions**, **tooltips**, **crosshairs**, **dimming** for extra focus...On `v2-beta` added built in **url** sync with `react-router` and **excel** export.
88

99
```ts
1010

@@ -19,7 +19,7 @@ Tiny/Dense **sparklines** where the initial goal of this exploration. It could d
1919
circleColors={palette}
2020
/>
2121

22-
// Adds crosshair, dimming, export, syncs Url with point...
22+
// Add crosshair, dimming, export, syncs Url with point...
2323
const { setSearchParams, pointInUrlDetails } = useSparklineUrl()
2424

2525
<Mouse series={datum}>
@@ -50,7 +50,7 @@ const { setSearchParams, pointInUrlDetails } = useSparklineUrl()
5050
/>
5151
)}
5252

53-
// Adds sliding window, drag a rectangle to select points...
53+
// Add sliding window, dragging a rectangle to select points...
5454
const [selectedPoints, setPoints] = useState<DataPoints>([])
5555

5656
<Window series={datum} windowSize={30}>
@@ -104,26 +104,24 @@ You **must** set some css custom properties to style it all, these are decent de
104104
```css
105105

106106
:root {
107-
/* caption */
108107
--sparkline-ui-fill: hsla(250, 11%, 37%, 1);
109108
--sparkline-ui-color: #f5f5f7;
110109
--sparkline-transparent: rgba(0, 0, 0, 0.001);
111110
--sparkline-border: 1px solid hsl(0, 4%, 94%);
111+
--sparkline-z-actions: 99;
112+
--sparkline-gap: 0.5em;
112113
/* selection */
113114
--sparkline-rect-color: rgba(0, 0, 255, 0.2);
114115
--sparkline-rect-stroke: blue;
115116
--sparkline-z-rect: 9;
116-
/* actions */
117-
--sparkline-z-actions: 99;
118-
/* common */
119-
--sparkline-gap: 0.5em;
117+
120118
}
121119

122120
```
123121

124-
### Related
122+
### Prior work
125123

126-
Previous work [demo](https://github.com/polmoneys/charts)
124+
Isometric [charts](https://github.com/polmoneys/charts) and [waffle](https://github.com/polmoneys/Waffle)
127125

128126
### Inspiration 💐
129127

0 commit comments

Comments
 (0)