Skip to content

Commit

Permalink
Migrate from Parcel to Vite in code examples + add React example (#17)
Browse files Browse the repository at this point in the history
* Migrate from Parcel to Vite in code examples + add React example

* Unsubscribe
  • Loading branch information
kubk authored Feb 6, 2022
1 parent c646673 commit d1799ca
Show file tree
Hide file tree
Showing 31 changed files with 3,050 additions and 7,483 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@ examples/node_modules
examples/.cache
examples/dist
types
example/node_modules
15 changes: 9 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
A tiny (<2kb gzipped) library for rendering gauge charts. Supports conical/polar gradients, animation timing functions, custom labels/tooltips. No external dependencies required.

### Examples
| [Conical / Polar gradient](./examples/conical-gradient) | [Multiple gauges](./examples/multiple-gauges) | [Countdown circle](./examples/countdown-gauge) |
| [Conical (Polar) gradient](example/src/conical-gradient) | [Multiple gauges + labels](example/src/multiple-gauges) | [Countdown circle](example/src/countdown-gauge) |
| ------------- | -------------| -------------|
| <img src="/assets/conical-polar.gif" width="249.2" height="256.2"> | <img src="/assets/multiple-gauges.gif" width="261" height="256.2"> | <img src="/assets/countdown-circle.gif" width="249.2" height="256.2"> |

Expand Down Expand Up @@ -31,7 +31,7 @@ import { cubicBezier, Gauge } from 'gauge-chart-js';

const easeIn = cubicBezier(0, 0, 0.2, 1);
const gauge = new Gauge({
...
// ...
easing: easeIn
})
```
Expand Down Expand Up @@ -75,7 +75,10 @@ class ExampleComponent implements OnInit {
```

### Run examples:
- `cd examples`
- `npm run example conical-gradient/conical-gradient.html`
- `npm run example countdown-gauge/countdown-gauge.html`
- `npm run example multiple-gauges/multiple-gauges.html`
- `cd example`
- `npm run dev`
- Open demo Conical gauge: http://localhost:3000/conical-gradient/
- Open demo React + shadowed center: http://localhost:3000/progress-with-shadow-chart/
- Open demo Multiple gauges + labels: http://localhost:3000/multiple-gauges/
- Open demo Countdown gauge: http://localhost:3000/countdown-gauge/

5 changes: 5 additions & 0 deletions example/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
.DS_Store
dist
dist-ssr
*.local
9 changes: 9 additions & 0 deletions example/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# Installation

- npm i
- npm run dev
## Examples
- Conical gauge: http://localhost:3000/conical-gradient/
- React + shadowed center: http://localhost:3000/progress-with-shadow-chart/
- Multiple gauges + labels: http://localhost:3000/multiple-gauges/
- Countdown gauge: http://localhost:3000/countdown-gauge/
Loading

0 comments on commit d1799ca

Please sign in to comment.