svelte-tiny-linked-charts 1.2.2 → 1.3.0

package/README.md

@@ -4,6 +4,7 @@
 [![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)
+[![bundle size](https://badgen.net/bundlephobia/minzip/svelte-confetti)](https://bundlephobia.com/package/svelte-tiny-linked-charts)
 
 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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-tiny-linked-charts",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "private": false,
   "scripts": {
     "build": "rollup -c",
@@ -44,11 +44,6 @@
   "main": "src/index.js",
   "module": "src/index.mjs",
   "svelte": "src/index.js",
-  "exports": {
-    ".": {
-      "svelte": "./src/index.js"
-    }
-  },
   "author": {
     "email": "mitchel_jager@hotmail.com",
     "name": "mitcheljager"

package/src/LinkedChart.svelte

@@ -121,6 +121,23 @@
     { /if }
 
     { #each Object.entries(data) as [key, value], i }
+      { #if type == "bar" }
+        <rect
+          style={ transition ? `transition: all ${ transition }ms` : null }
+          opacity={ hover && $hoveringKey[linkedKey] && $hoveringKey[linkedKey] != key ? fadeOpacity : 1 }
+          fill={ fill }
+          width={ barWidth }
+          height={ type == "line" ? height : getHeight(value) }
+          x={ (parseInt(gap) + barWidth) * i }
+          y={ (height - getHeight(value)) } />
+      { :else if type == "line" }
+        <circle
+          fill={ hover && $hoveringKey[linkedKey] !== null && $hoveringKey[linkedKey] == key ? fill : "transparent" }
+          r={ barWidth / 2 }
+          cy={ height - getHeight(value) }
+          cx={ ((parseInt(gap) + barWidth) * i) } />
+      { /if }
+
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <rect
         on:mouseover={ () => startHover(key, i) }
@@ -128,22 +145,11 @@
         on:touchstart={ () => startHover(key, i) }
         on:click={ () => clickHandler(key, i) }
         on:keypress={ () => clickHandler(key, i) }
-        style={ transition ? `transition: all ${ transition }ms` : null }
-        opacity={ hover && $hoveringKey[linkedKey] && $hoveringKey[linkedKey] != key ? fadeOpacity : 1 }
-        fill={ type == "line" ? "transparent" : fill }
         width={ barWidth }
-        height={ type == "line" ? height : getHeight(value) }
-        y={ type == "line" ? 0 : (height - getHeight(value)) }
+        height={ height }
+        fill="transparent"
         x={ (parseInt(gap) + barWidth) * i }
         { tabindex } />
-
-      { #if type == "line" }
-        <circle
-          fill={ hover && $hoveringKey[linkedKey] !== null && $hoveringKey[linkedKey] == key ? fill : "transparent" }
-          r={ barWidth / 2 }
-          cy={ height - getHeight(value) }
-          cx={ ((parseInt(gap) + barWidth) * i) } />
-      { /if }
     { /each }
   </g>
 </svg>