svelte-tiny-linked-charts 1.1.2 → 1.1.3

package/README.md

@@ -1,5 +1,10 @@
 # Tiny Linked Charts for Svelte
 
+[![tests passing](https://github.com/MitchelJager/svelte-tiny-linked-charts/actions/workflows/node.js.yml/badge.svg)](https://github.com/Mitcheljager/svelte-tiny-linked-charts/actions/workflows/node.js.yml)
+[![npm version](https://badgen.net/npm/v/svelte-tiny-linked-charts)](https://www.npmjs.com/package/svelte-tiny-linked-charts)
+[![npm downloads](https://badgen.net/npm/dt/svelte-tiny-linked-charts)](https://www.npmjs.com/package/svelte-tiny-linked-charts)
+[![MadeWithSvelte.com shield](https://madewithsvelte.com/storage/repo-shields/3278-shield.svg)](https://madewithsvelte.com/p/tiny-linked-charts/shield-link)
+
 This is a library to display tiny bar charts. These charts are more so meant for graphic aids, rather than scientific representations. There's no axis labels, no extensive data visualisation, just bars.
 
 **Demo and Docs**: https://mitcheljager.github.io/svelte-tiny-linked-charts/
@@ -7,25 +12,25 @@ This is a library to display tiny bar charts. These charts are more so meant for
 ### Installation
 
 Install using Yarn or NPM.
-```
+```js
 yarn add svelte-tiny-linked-charts
 ```
-```
+```js
 npm install --save svelte-tiny-linked-charts
 ```
 
 Include the chart in your app.
-```
+```js
 import { LinkedChart, LinkedLabel, LinkedValue } from "svelte-tiny-linked-charts"
 ```
-```
-<LinkedChart { data } />
+```svelte
+<LinkedChart />
 <LinkedLabel />
 <LinkedValue />
 ```
 
 Supply your data in a simple key:value object:
-```
+```js
 let data = {
   "2005-01-01": 25,
   "2005-01-02": 20,
@@ -33,11 +38,13 @@ let data = {
   "2005-01-04": 17,
   "2005-01-05": 21
 }
+```
+```svelte
 <LinkedChart { data } />
 ```
 
 Or if you prefer supply the labels and values separately:
-```
+```js
 let labels = [
   "2005-01-01",
   "2005-01-02",
@@ -52,6 +59,8 @@ let values = [
   17,
   21
 ]
+```
+```svelte
 <LinkedChart { labels } { values } />
 ```
 
@@ -90,6 +99,7 @@ type | bar | Can be set to "line" to display a line chart instead.
 lineColor | fill | Color of the line if used with type="line".
 tabindex | -1 | Sets the tabindex of each bar.
 dispatchEvents | false | Boolean whether or not to dispatch events on certain actions.
+clickHandler | null | Function that executes on click and returns the key and index for the clicked data.
 
 `<LinkedLabel />` component.
 Property | Default | Description

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tiny-linked-charts",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": false,
   "scripts": {
     "build": "rollup -c",

package/src/LinkedChart.svelte

@@ -28,6 +28,7 @@
   export let lineColor = fill
   export let tabindex = -1
   export let dispatchEvents = false
+  export let clickHandler = (key, i) => null
 
   const dispatch = createEventDispatcher()
 
@@ -120,6 +121,7 @@
         on:mouseover={ () => startHover(key, i) }
         on:focus={ () => startHover(key, i) }
         on:touchstart={ () => startHover(key, i) }
+        on:click={ () => clickHandler(key, i) }
         style={ transition ? `transition: all ${ transition }ms` : null }
         opacity={ hover && $hoveringKey[linkedKey] && $hoveringKey[linkedKey] != key ? fadeOpacity : 1 }
         fill={ type == "line" ? "transparent" : fill }