svelte-tiny-linked-charts 1.6.2 → 2.0.0

package/README.md

@@ -20,6 +20,8 @@ yarn add svelte-tiny-linked-charts --dev
 npm install svelte-tiny-linked-charts --save-dev
 ```
 
+If you are using Svelte 4, use version ^1.0.0. Version 2 is reserved for Svelte 5.
+
 Include the chart in your app.
 ```js
 import { LinkedChart, LinkedLabel, LinkedValue } from "svelte-tiny-linked-charts"
@@ -103,8 +105,9 @@ 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.
 preserveAspectRatio | false | Sets whether or not the SVG will preserve it's aspect ratio
-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.
+onclick | null | Function that executes on click and returns the key and index for the clicked data.
+onhover | null | Function that executes on hover of each bar.
+onblur | null | Function that executes when focus leaves the chart.
 
 `<LinkedLabel />` component.
 Property | Default | Description

package/dist/LinkedChart.svelte

@@ -1,63 +1,156 @@
 <script>
-  import { createEventDispatcher, tick } from "svelte"
+  import { tick } from "svelte"
   import { hoveringKey, hoveringValue } from "./stores/tinyLinkedCharts.js"
 
-  export let uid = (Math.random() + 1).toString(36).substring(7)
-  export let data = {}
-  export let labels = []
-  export let values = []
-  export let linked = ""
-  export let height = 40
-  export let width = 150
-  export let barMinWidth = 4
-  export let barMinHeight = 0
-  export let hideBarBelow = 0
-  export let grow = false
-  export let align = "right"
-  export let gap = 1
-  export let fill = "#ff3e00"
-  export let fadeOpacity = 0.5
-  export let hover = true
-  export let transition = 0
-  export let showValue = false
-  export let valueDefault = "&nbsp;"
-  export let valuePrepend = ""
-  export let valueAppend = ""
-  export let valuePosition = "static"
-  export let valueUndefined = 0
-  export let scaleMax = 0
-  export let scaleMin = 0
-  export let type = "bar"
-  export let lineColor = fill
-  export let tabindex = -1
-  export let dispatchEvents = false
-  export let preserveAspectRatio = false
-  export let clickHandler = (key, i) => null
-
-  const dispatch = createEventDispatcher()
-
-  let valuePositionOffset = 0
-  let polyline = []
-  let valueElement
-
-  $: dataLength = Object.keys(data).length
-  $: barWidth = grow ? getBarWidth(dataLength) : parseInt(barMinWidth)
-  $: highestValue = getHighestValue(data)
-  $: alignmentOffset = dataLength ? getAlignment() : 0
-  $: linkedKey = linked || (Math.random() + 1).toString(36).substring(7)
-  $: $hoveringValue[uid] = $hoveringKey[linkedKey] ? data[$hoveringKey[linkedKey]] : null
-  $: 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]) + alignmentOffset
-  $: if (type == "line") polyline = getPolyLinePoints(data)
-  $: if (dispatchEvents) dispatch('value-update', { value: $hoveringValue[uid], uid, linkedKey, valueElement })
-  $: if (tabindex > 0) console.warn("Tabindex should not be higher than 0")
+  /** @typedef {Object} OnValueUpdate
+  * @property {number | null} [value]
+  * @property {string} [uid]
+  * @property {string} [linkedKey]
+  * @property {HTMLElement | null} [valueElement]
+  */
 
+  /** @typedef {Object} OnClick
+   * @property {string} [key]
+   * @property {number} [index]
+   */
+
+  /** @typedef {Object} OnHover
+   * @property {string} uid,
+   * @property {string} key,
+   * @property {number} index,
+   * @property {string} linkedKey,
+   * @property {number | null} value,
+   * @property {HTMLElement} valueElement,
+   * @property {EventTarget | null} eventElement
+   */
+
+  /** @typedef {Object} OnBlur
+   * @property {string} uid,
+   * @property {string} linkedKey,
+   * @property {HTMLElement} valueElement,
+   * @property {EventTarget | null} eventElement
+   */
+
+  /**
+   * @typedef {Object} Props
+   * @property {string} [uid]
+   * @property {Record<string, number>} [data]
+   * @property {string[]} [labels]
+   * @property {number[]} [values]
+   * @property {string} [linked]
+   * @property {number} [height]
+   * @property {number} [width]
+   * @property {number} [barMinWidth]
+   * @property {number} [barMinHeight]
+   * @property {number} [hideBarBelow]
+   * @property {boolean} [grow]
+   * @property {"left" | "right"} [align]
+   * @property {number} [gap]
+   * @property {string} [fill]
+   * @property {number} [fadeOpacity]
+   * @property {boolean} [hover]
+   * @property {number} [transition]
+   * @property {boolean} [showValue]
+   * @property {string} [valueDefault]
+   * @property {string} [valuePrepend]
+   * @property {string} [valueAppend]
+   * @property {"static" | "floating"} [valuePosition]
+   * @property {number} [valueUndefined]
+   * @property {number} [scaleMax]
+   * @property {number} [scaleMin]
+   * @property {"bar" | "line"} [type]
+   * @property {string} [lineColor]
+   * @property {-1 | 0} [tabindex]
+   * @property {boolean} [preserveAspectRatio]
+   * @property {(args: OnClick) => void} [onclick]
+   * @property {(args: OnValueUpdate) => void} [onvalueupdate]
+   * @property {(args: OnHover) => void} [onhover]
+   * @property {(args: OnBlur) => void} [onblur]
+   */
+
+  /** @type {Props & { [key: string]: any }} */
+  let {
+    uid = (Math.random() + 1).toString(36).substring(7),
+    data = $bindable({}),
+    labels = [],
+    values = [],
+    linked = "",
+    height = 40,
+    width = 150,
+    barMinWidth = 4,
+    barMinHeight = 0,
+    hideBarBelow = 0,
+    grow = false,
+    align = "right",
+    gap = 1,
+    fill = "#ff3e00",
+    fadeOpacity = 0.5,
+    hover = true,
+    transition = 0,
+    showValue = false,
+    valueDefault = "&nbsp;",
+    valuePrepend = "",
+    valueAppend = "",
+    valuePosition = "static",
+    valueUndefined = 0,
+    scaleMax = 0,
+    scaleMin = 0,
+    type = "bar",
+    lineColor = fill,
+    tabindex = -1,
+    preserveAspectRatio = false,
+    onclick = ({ key, index }) => null,
+    onvalueupdate = ({ value, uid, linkedKey, valueElement }) => null,
+    onhover = ({ uid, key, index, linkedKey, value, valueElement, eventElement }) => null,
+    onblur = ({ uid, linkedKey, valueElement, eventElement }) => null,
+    ...rest
+  } = $props()
+
+  let valuePositionOffset = $state(0)
+  /** @type {number[][]} */
+  let polyline = $state([])
+  let valueElement = $state()
+  let dataLength = $derived(Object.keys(data).length)
+  let barWidth = $derived(dataLength && grow ? getBarWidth() : barMinWidth)
+  let highestValue = $derived(data ? getHighestValue() : 0)
+  let alignmentOffset = $derived(dataLength ? getAlignment() : 0)
+  let linkedKey = $derived(linked || (Math.random() + 1).toString(36).substring(7))
+
+  $effect(() => {
+    if (labels.length && values.length) data = Object.fromEntries(labels.map((_, i) => [labels[i], values[i]]))
+  })
+
+  $effect(() => {
+    $hoveringValue[uid] = $hoveringKey[linkedKey] ? data[$hoveringKey[linkedKey]] : null
+  })
+
+  $effect(() => {
+    if (valuePosition === "floating") valuePositionOffset = (gap + barWidth) * Object.keys(data).indexOf($hoveringKey[linkedKey] || "") + alignmentOffset
+  })
+
+  $effect(() => {
+    if (type == "line") polyline = getPolyLinePoints(data)
+  })
+
+  $effect(() => {
+    onvalueupdate({ value: $hoveringValue[uid], uid, linkedKey, valueElement })
+  })
+
+  $effect(() => {
+    if (tabindex > 0) console.warn("tabindex should not be higher than 0")
+  })
+
+  /** @returns {number} */
   function getHighestValue() {
     if (scaleMax) return scaleMax
     if (dataLength) return Math.max(...Object.values(data))
     return 0
   }
 
+  /**
+	 * @param {number} value
+   * @returns {number}
+	 */
   function getHeight(value) {
     if (value < hideBarBelow || value < scaleMin) return 0
 
@@ -65,56 +158,68 @@
     const minValue = scaleMin || 0
 
     const scaledValue = (value - minValue) / (maxValue - minValue)
-    return Math.max(Math.ceil(scaledValue * parseInt(height)), barMinHeight)
+    return Math.max(Math.ceil(scaledValue * height), barMinHeight)
   }
 
+  /** @returns {number} */
   function getBarWidth() {
-    return Math.max((parseInt(width) - (dataLength * parseInt(gap))) / dataLength, parseInt(barMinWidth))
+    return Math.max((width - (dataLength * gap)) / dataLength, barMinWidth)
   }
 
+  /** @returns {number} */
   function getAlignment() {
     if (align == "left") return 0
-    return (parseInt(gap) + parseInt(width)) - ((parseInt(gap) + barWidth) * dataLength)
+    return (gap + width) - ((gap + barWidth) * dataLength)
   }
 
-  function getPolyLinePoints() {
+  /** @param {Record<string, number>} data */
+  function getPolyLinePoints(data) {
     let points = []
 
     for (let i = 0; i < Object.keys(data).length; i++) {
-      points.push([i * ((barWidth + parseInt(gap)) + (barWidth / (Object.keys(data).length))), height - getHeight(Object.values(data)[i])])
+      points.push([i * ((barWidth + gap) + (barWidth / (Object.keys(data).length))), height - getHeight(Object.values(data)[i])])
     }
 
     return points
   }
 
-  async function startHover(key, index) {
+  /**
+   * @param {MouseEvent | FocusEvent | TouchEvent} event
+	 * @param {string} key
+	 * @param {number} index
+	 */
+  async function startHover(event, 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 })
+    onhover({ uid, key, index, linkedKey, value: $hoveringValue[uid], valueElement, eventElement: event.target })
   }
 
-  async function endHover() {
+  /**
+	 * @param {FocusEvent} event
+	 */
+  async function endHover(event) {
     if (!hover) return
     $hoveringKey[linkedKey] = null
+    $hoveringValue[uid] = null
 
     await tick()
 
-    if (dispatchEvents) dispatch('blur', { uid, linkedKey, valueElement, eventElement: event.target })
+    onblur({ uid, linkedKey, valueElement, eventElement: event.target })
   }
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <svg
   {width}
   height={type == "line" ? height + barWidth / 2 : height}
   viewBox="0 0 {width } {height}"
   preserveAspectRatio={preserveAspectRatio ? "true" : "none"}
-  {...$$restProps}
-  on:mouseleave={endHover}
-  on:blur={endHover}>
+  onmouseleave={endHover}
+  onblur={endHover}
+  {...rest}>
 
   <g transform="translate({alignmentOffset}, 0)">
     {#if type == "line"}
@@ -128,29 +233,29 @@
           opacity={hover && $hoveringKey[linkedKey] && $hoveringKey[linkedKey] != key ? fadeOpacity : 1}
           fill={fill}
           width={barWidth}
-          height={type == "line" ? height : getHeight(value)}
-          x={(parseInt(gap) + barWidth) * i}
+          height={getHeight(value)}
+          x={(gap + barWidth) * i}
           y={(height - getHeight(value))} />
       {:else if type == "line"}
         <circle
           fill={hover && $hoveringKey[linkedKey] !== null && $hoveringKey[linkedKey] == key ? fill : "transparent"}
-          r={grow ? parseInt(barMinWidth) : barWidth / 2}
+          r={grow ? barMinWidth : barWidth / 2}
           cy={height - getHeight(value)}
-          cx={((parseInt(gap) + barWidth) + (barWidth / (Object.keys(data).length))) * i} />
+          cx={((gap + barWidth) + (barWidth / (Object.keys(data).length))) * i} />
       {/if}
 
-      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
       <rect
-        on:mouseover={() => startHover(key, i)}
-        on:focus={() => startHover(key, i)}
-        on:touchstart={() => startHover(key, i)}
-        on:click={() => clickHandler(key, i)}
-        on:keypress={() => clickHandler(key, i)}
+        onmouseover={event => startHover(event, key, i)}
+        onfocus={event => startHover(event, key, i)}
+        ontouchstart={event => startHover(event, key, i)}
+        onclick={() => onclick({ key, index: i })}
+        onkeypress={() => onclick({ key, index: i })}
         width={barWidth}
         height={height}
         fill="transparent"
-        x={(parseInt(gap) + barWidth) * i}
+        x={(gap + barWidth) * i}
         {tabindex} />
     {/each}
   </g>

package/dist/LinkedChart.svelte.d.ts

@@ -1,93 +1,175 @@
-/** @typedef {typeof __propDef.props}  LinkedChartProps */
-/** @typedef {typeof __propDef.events}  LinkedChartEvents */
-/** @typedef {typeof __propDef.slots}  LinkedChartSlots */
-export default class LinkedChart extends SvelteComponent<{
-    [x: string]: any;
-    hover?: boolean;
-    uid?: string;
-    data?: {};
-    labels?: any[];
-    values?: any[];
-    linked?: string;
-    height?: number;
-    width?: number;
-    barMinWidth?: number;
-    barMinHeight?: number;
-    hideBarBelow?: number;
-    grow?: boolean;
-    align?: string;
-    gap?: number;
-    fill?: string;
-    fadeOpacity?: number;
-    transition?: number;
-    showValue?: boolean;
-    valueDefault?: string;
-    valuePrepend?: string;
-    valueAppend?: string;
-    valuePosition?: string;
-    valueUndefined?: number;
-    scaleMax?: number;
-    scaleMin?: number;
-    type?: string;
-    lineColor?: string;
-    tabindex?: number;
-    dispatchEvents?: boolean;
-    preserveAspectRatio?: boolean;
-    clickHandler?: (key: any, i: any) => any;
-}, {
-    'value-update': CustomEvent<any>;
-    hover: CustomEvent<any>;
-    blur: CustomEvent<any>;
+export default LinkedChart;
+type LinkedChart = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & {
+        [key: string]: any;
+    }>): void;
+};
+declare const LinkedChart: import("svelte").Component<{
+    uid?: string | undefined;
+    data?: Record<string, number> | undefined;
+    labels?: string[] | undefined;
+    values?: number[] | undefined;
+    linked?: string | undefined;
+    height?: number | undefined;
+    width?: number | undefined;
+    barMinWidth?: number | undefined;
+    barMinHeight?: number | undefined;
+    hideBarBelow?: number | undefined;
+    grow?: boolean | undefined;
+    align?: "left" | "right" | undefined;
+    gap?: number | undefined;
+    fill?: string | undefined;
+    fadeOpacity?: number | undefined;
+    hover?: boolean | undefined;
+    transition?: number | undefined;
+    showValue?: boolean | undefined;
+    valueDefault?: string | undefined;
+    valuePrepend?: string | undefined;
+    valueAppend?: string | undefined;
+    valuePosition?: "static" | "floating" | undefined;
+    valueUndefined?: number | undefined;
+    scaleMax?: number | undefined;
+    scaleMin?: number | undefined;
+    type?: "bar" | "line" | undefined;
+    lineColor?: string | undefined;
+    tabindex?: 0 | -1 | undefined;
+    preserveAspectRatio?: boolean | undefined;
+    onclick?: ((args: {
+        key?: string | undefined;
+        index?: number | undefined;
+    }) => void) | undefined;
+    onvalueupdate?: ((args: {
+        value?: number | null | undefined;
+        uid?: string | undefined;
+        linkedKey?: string | undefined;
+        valueElement?: HTMLElement | null | undefined;
+    }) => void) | undefined;
+    onhover?: ((args: {
+        /**
+         * ,
+         */
+        uid: string;
+        /**
+         * ,
+         */
+        key: string;
+        /**
+         * ,
+         */
+        index: number;
+        /**
+         * ,
+         */
+        linkedKey: string;
+        /**
+         * ,
+         */
+        value: number | null;
+        /**
+         * ,
+         */
+        valueElement: HTMLElement;
+        eventElement: EventTarget | null;
+    }) => void) | undefined;
+    onblur?: ((args: {
+        /**
+         * ,
+         */
+        uid: string;
+        /**
+         * ,
+         */
+        linkedKey: string;
+        /**
+         * ,
+         */
+        valueElement: HTMLElement;
+        eventElement: EventTarget | null;
+    }) => void) | undefined;
 } & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LinkedChartProps = typeof __propDef.props;
-export type LinkedChartEvents = typeof __propDef.events;
-export type LinkedChartSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        hover?: boolean;
-        uid?: string;
-        data?: {};
-        labels?: any[];
-        values?: any[];
-        linked?: string;
-        height?: number;
-        width?: number;
-        barMinWidth?: number;
-        barMinHeight?: number;
-        hideBarBelow?: number;
-        grow?: boolean;
-        align?: string;
-        gap?: number;
-        fill?: string;
-        fadeOpacity?: number;
-        transition?: number;
-        showValue?: boolean;
-        valueDefault?: string;
-        valuePrepend?: string;
-        valueAppend?: string;
-        valuePosition?: string;
-        valueUndefined?: number;
-        scaleMax?: number;
-        scaleMin?: number;
-        type?: string;
-        lineColor?: string;
-        tabindex?: number;
-        dispatchEvents?: boolean;
-        preserveAspectRatio?: boolean;
-        clickHandler?: (key: any, i: any) => any;
-    };
-    events: {
-        'value-update': CustomEvent<any>;
-        hover: CustomEvent<any>;
-        blur: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+    [key: string]: any;
+}, {}, "data">;
+type Props = {
+    uid?: string | undefined;
+    data?: Record<string, number> | undefined;
+    labels?: string[] | undefined;
+    values?: number[] | undefined;
+    linked?: string | undefined;
+    height?: number | undefined;
+    width?: number | undefined;
+    barMinWidth?: number | undefined;
+    barMinHeight?: number | undefined;
+    hideBarBelow?: number | undefined;
+    grow?: boolean | undefined;
+    align?: "left" | "right" | undefined;
+    gap?: number | undefined;
+    fill?: string | undefined;
+    fadeOpacity?: number | undefined;
+    hover?: boolean | undefined;
+    transition?: number | undefined;
+    showValue?: boolean | undefined;
+    valueDefault?: string | undefined;
+    valuePrepend?: string | undefined;
+    valueAppend?: string | undefined;
+    valuePosition?: "static" | "floating" | undefined;
+    valueUndefined?: number | undefined;
+    scaleMax?: number | undefined;
+    scaleMin?: number | undefined;
+    type?: "bar" | "line" | undefined;
+    lineColor?: string | undefined;
+    tabindex?: 0 | -1 | undefined;
+    preserveAspectRatio?: boolean | undefined;
+    onclick?: ((args: {
+        key?: string | undefined;
+        index?: number | undefined;
+    }) => void) | undefined;
+    onvalueupdate?: ((args: {
+        value?: number | null | undefined;
+        uid?: string | undefined;
+        linkedKey?: string | undefined;
+        valueElement?: HTMLElement | null | undefined;
+    }) => void) | undefined;
+    onhover?: ((args: {
+        /**
+         * ,
+         */
+        uid: string;
+        /**
+         * ,
+         */
+        key: string;
+        /**
+         * ,
+         */
+        index: number;
+        /**
+         * ,
+         */
+        linkedKey: string;
+        /**
+         * ,
+         */
+        value: number | null;
+        /**
+         * ,
+         */
+        valueElement: HTMLElement;
+        eventElement: EventTarget | null;
+    }) => void) | undefined;
+    onblur?: ((args: {
+        /**
+         * ,
+         */
+        uid: string;
+        /**
+         * ,
+         */
+        linkedKey: string;
+        /**
+         * ,
+         */
+        valueElement: HTMLElement;
+        eventElement: EventTarget | null;
+    }) => void) | undefined;
 };
-export {};

package/dist/LinkedLabel.svelte

@@ -1,11 +1,11 @@
 <script>
   import { hoveringKey } from "./stores/tinyLinkedCharts.js"
 
-  export let linked
-  export let empty = "&nbsp;"
-  export let transform = (label) => label
+  /** @type {{ linked: string, empty?: string, transform?: (label: string) => string }} */
+  let { linked, empty = "&nbsp;", transform = (label = "") => label } = $props()
 
-  $: label = $hoveringKey[linked]
+  /** @type {string | null} */
+  let label = $derived($hoveringKey[linked])
 </script>
 
 {#if label}

package/dist/LinkedLabel.svelte.d.ts

@@ -1,27 +1,15 @@
-/** @typedef {typeof __propDef.props}  LinkedLabelProps */
-/** @typedef {typeof __propDef.events}  LinkedLabelEvents */
-/** @typedef {typeof __propDef.slots}  LinkedLabelSlots */
-export default class LinkedLabel extends SvelteComponent<{
-    linked: any;
+export default LinkedLabel;
+type LinkedLabel = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const LinkedLabel: import("svelte").Component<{
+    linked: string;
+    empty?: string;
+    transform?: (label: string) => string;
+}, {}, "">;
+type $$ComponentProps = {
+    linked: string;
     empty?: string;
-    transform?: (label: any) => any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LinkedLabelProps = typeof __propDef.props;
-export type LinkedLabelEvents = typeof __propDef.events;
-export type LinkedLabelSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        linked: any;
-        empty?: string;
-        transform?: (label: any) => any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+    transform?: (label: string) => string;
 };
-export {};

package/dist/LinkedValue.svelte

@@ -1,12 +1,16 @@
 <script>
   import { hoveringValue } from "./stores/tinyLinkedCharts.js"
 
-  export let uid
-  export let empty = "&nbsp;"
-  export let valueUndefined = 0
-  export let transform = (value) => value
+  /** @type {{ uid: string, empty?: string, valueUndefined?: number, transform?: (value: number) => number | string }} */
+  let {
+    uid,
+    empty = "&nbsp;",
+    valueUndefined = 0,
+    transform = (value) => value
+  } = $props()
 
-  $: value = $hoveringValue[uid]
+  /** @type {number | null} */
+  let value = $derived($hoveringValue[uid])
 </script>
 
 {#if uid in $hoveringValue && value !== null}

package/dist/LinkedValue.svelte.d.ts

@@ -1,29 +1,17 @@
-/** @typedef {typeof __propDef.props}  LinkedValueProps */
-/** @typedef {typeof __propDef.events}  LinkedValueEvents */
-/** @typedef {typeof __propDef.slots}  LinkedValueSlots */
-export default class LinkedValue extends SvelteComponent<{
-    uid: any;
+export default LinkedValue;
+type LinkedValue = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const LinkedValue: import("svelte").Component<{
+    uid: string;
+    empty?: string;
     valueUndefined?: number;
+    transform?: (value: number) => number | string;
+}, {}, "">;
+type $$ComponentProps = {
+    uid: string;
     empty?: string;
-    transform?: (value: any) => any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LinkedValueProps = typeof __propDef.props;
-export type LinkedValueEvents = typeof __propDef.events;
-export type LinkedValueSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        uid: any;
-        valueUndefined?: number;
-        empty?: string;
-        transform?: (value: any) => any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+    valueUndefined?: number;
+    transform?: (value: number) => number | string;
 };
-export {};

package/dist/stores/tinyLinkedCharts.d.ts

@@ -1,3 +1,4 @@
-/// <reference types="svelte" />
-export const hoveringKey: import("svelte/store").Writable<{}>;
-export const hoveringValue: import("svelte/store").Writable<{}>;
+/** @type {import('svelte/store').Writable<Record<string, string | null>>} */
+export const hoveringKey: import("svelte/store").Writable<Record<string, string | null>>;
+/** @type {import('svelte/store').Writable<Record<string, number | null>>} */
+export const hoveringValue: import("svelte/store").Writable<Record<string, number | null>>;

package/dist/stores/tinyLinkedCharts.js

@@ -1,4 +1,7 @@
 import { writable } from "svelte/store"
 
+/** @type {import('svelte/store').Writable<Record<string, string | null>>} */
 export const hoveringKey = writable({})
+
+/** @type {import('svelte/store').Writable<Record<string, number | null>>} */
 export const hoveringValue = writable({})

package/package.json

@@ -1,69 +1,69 @@
-{
-	"name": "svelte-tiny-linked-charts",
-	"version": "1.6.2",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
-		"test": "vitest",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
-		"publish-pages": "npm run build && git subtree push --prefix build origin gh-pages"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"peerDependencies": {
-		"svelte": "^4.0.0 || >= 5.0.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/adapter-static": "^2.0.3",
-		"@sveltejs/kit": "^1.20.4",
-		"@sveltejs/package": "^2.0.0",
-		"@testing-library/svelte": "^4.0.3",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"jsdom": "^22.1.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"publint": "^0.1.9",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2",
-		"vitest": "^0.34.0"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"main": "./dist/index.js",
-	"type": "module",
-	"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",
-		"charts",
-		"linked",
-		"linked-charts",
-		"tiny-linked-charts"
-	],
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/Mitcheljager/svelte-tiny-linked-charts"
-	},
-	"homepage": "https://mitcheljager.github.io/svelte-tiny-linked-charts/"
-}
+{
+	"name": "svelte-tiny-linked-charts",
+	"version": "2.0.0",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+		"test": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"publish-pages": "npm run build && git subtree push --prefix build origin gh-pages"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": ">=5.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^3.0.0",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.5.27",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@sveltejs/package": "^2.3.7",
+		"@testing-library/svelte": "^5.2.6",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"happy-dom": "^16.5.3",
+		"prettier": "^3.1.0",
+		"prettier-plugin-svelte": "^3.2.6",
+		"publint": "^0.1.9",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tslib": "^2.4.1",
+		"typescript": "^5.5.0",
+		"vite": "^5.4.4",
+		"vitest": "^2.1.8"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"main": "./dist/index.js",
+	"type": "module",
+	"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",
+		"charts",
+		"linked",
+		"linked-charts",
+		"tiny-linked-charts"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Mitcheljager/svelte-tiny-linked-charts"
+	},
+	"homepage": "https://mitcheljager.github.io/svelte-tiny-linked-charts/"
+}