svelte-tiny-linked-charts 1.0.4 → 1.1.1

package/README.md

@@ -1,6 +1,6 @@
 # Tiny Linked Charts for Svelte
 
-This is a library to display tiny bar charts. These charts are more so meant for graphical aids, rather than scientific representations. There's no axis labels, no extensive data visualisation, just bars.
+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/
 
@@ -81,10 +81,15 @@ hover | true | Boolean whether or not this chart can be hovered at all.
 transition | 0 | Transition the chart between different stats. Value is time in milliseconds.
 showValue | false | Boolean whether or not a value will be shown.
 valueDefault | "\ " | Default value when not hovering.
+valueUndefined | 0 | For when the hovering value returns undefined.
 valuePrepend | | String to prepend the value.
 valueAppend | | String to append to the value.
 valuePosition | static | Can be set to "floating" to follow the position of the hover.
 scaleMax | 0 | Use this to overwrite the automatic scale set to the highest value in your array.
+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.
 
 `<LinkedLabel />` component.
 Property | Default | Description
@@ -97,3 +102,4 @@ Property | Default | Description
 --- | --- | ---
 uid | | Unique ID to link this value to a chart with the same uid.
 empty | \&nbsp; | String that will be displayed when no bar is being hovered.
+valueUndefined | 0 | For when the hovering value returns undefined.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tiny-linked-charts",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "private": false,
   "scripts": {
     "build": "rollup -c",
@@ -27,7 +27,7 @@
     "svelte-jest": "^0.3.1",
     "svelte-jester": "^2.0.1"
   },
-  "description": "A library to display tiny bar charts using Svelte. These charts are more so meant for graphical aids, rather than scientific representations. There's no axis labels, no extensive data visualisation, just bars.",
+  "description": "A library to display tiny bar charts using Svelte. These charts are more so meant for graphic aids, rather than scientific representations. There's no axis labels, no extensive data visualisation, just bars.",
   "keywords": [
     "svelte",
     "tiny",
@@ -40,8 +40,8 @@
     "src/"
   ],
   "license": "MIT",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "main": "src/index.js",
+  "module": "src/index.mjs",
   "svelte": "src/index.js",
   "author": {
     "email": "mitchel_jager@hotmail.com",

package/src/LinkedChart.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { createEventDispatcher, tick } from "svelte"
   import { hoveringKey, hoveringValue } from "./stores/tinyLinkedCharts.js"
 
   export let uid = (Math.random() + 1).toString(36).substring(7)
@@ -21,25 +22,32 @@
   export let valuePrepend = ""
   export let valueAppend = ""
   export let valuePosition = "static"
+  export let valueUndefined = 0
   export let scaleMax = 0
   export let type = "bar"
   export let lineColor = fill
+  export let tabindex = -1
+  export let dispatchEvents = false
+
+  const dispatch = createEventDispatcher()
 
   let valuePositionOffset = 0
   let polyline = []
-  
+  let valueElement
+
   $: dataLength = Object.keys(data).length
   $: barWidth = grow ? getBarWidth(dataLength) : parseInt(barMinWidth)
   $: highestValue = getHighestValue(dataLength)
   $: alignmentOffset = dataLength ? getAlignment() : 0
   $: linkedKey = linked || (Math.random() + 1).toString(36).substring(7)
   $: if (labels.length && values.length) data = Object.fromEntries(labels.map((_, i) => [labels[i], values[i]]))
-  $: if (valuePosition == "floating") valuePositionOffset = (parseInt(gap) + barWidth) * Object.keys(data).indexOf($hoveringKey[linkedKey])
+  $: if (valuePosition == "floating") valuePositionOffset = (parseInt(gap) + barWidth) * Object.keys(data).indexOf($hoveringKey[linkedKey]) + alignmentOffset
   $: if (type == "line") polyline = getPolyLinePoints(data)
+  $: if (dispatchEvents) dispatch('value-update', { value: $hoveringValue[uid], uid, linkedKey, valueElement })
   $: {
     if ($hoveringKey[linkedKey]) {
       $hoveringValue[uid] = data[$hoveringKey[linkedKey]]
-    } else { 
+    } else {
       $hoveringValue[uid] = null
     }
   }
@@ -51,7 +59,7 @@
   }
 
   function getHeight(value) {
-    return Math.round((parseInt(height) / highestValue) * value - (type == "line" ? barWidth / 2 : 0))
+    return Math.round((parseInt(height) / highestValue) * value - (type == "line" ? barWidth / 2 : 0)) || 0
   }
 
   function getBarWidth() {
@@ -73,14 +81,22 @@
     return points
   }
 
-  function startHover(key, index) {
+  async function startHover(key, index) {
     if (!hover) return
     $hoveringKey[linkedKey] = key
+
+    await tick()
+
+    if (dispatchEvents) dispatch('hover', { uid, key, index, linkedKey, value: $hoveringValue[uid], valueElement, eventElement: event.target })
   }
 
-  function endHover() {
+  async function endHover() {
     if (!hover) return
     $hoveringKey[linkedKey] = null
+
+    await tick()
+
+    if (dispatchEvents) dispatch('blur', { uid, linkedKey, valueElement, eventElement: event.target })
   }
 </script>
 
@@ -110,7 +126,8 @@
         width={ barWidth }
         height={ type == "line" ? height : getHeight(value) }
         y={ type == "line" ? 0 : (height - getHeight(value)) }
-        x={ (parseInt(gap) + barWidth) * i } />
+        x={ (parseInt(gap) + barWidth) * i }
+        { tabindex } />
 
       { #if type == "line" }
         <circle
@@ -123,11 +140,11 @@
   </g>
 </svg>
 
-{ #if showValue }
+{ #if showValue && ($hoveringValue[uid] || valueDefault) }
   <div class="tiny-linked-charts-value" style={ valuePosition == "floating" ? `position: absolute; transform: translateX(${ valuePositionOffset }px)` : null }>
     { #if $hoveringValue[uid] !== null }
       { valuePrepend }
-      { $hoveringValue[uid] }
+      <span bind:this={valueElement}>{ $hoveringValue[uid] || valueUndefined }</span>
       { valueAppend }
     { :else }
       { @html valueDefault }

package/src/LinkedValue.svelte

@@ -3,14 +3,15 @@
 
   export let uid
   export let empty = " "
+  export let valueUndefined = 0
 
   $: value = $hoveringValue[uid]
 </script>
 
 
 
-{ #if value }
-  { value }
+{ #if value !== null }
+  { value || valueUndefined }
 { :else }
   { @html empty }
 { /if }