svelte-tiny-linked-charts - npm Package Compare versions

Comparing version 1.6.2 to 2.0.0

dist/LinkedChart.svelte.d.ts

@@ -1,93 +0,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 {};

dist/LinkedLabel.svelte.d.ts

@@ -1,27 +0,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: 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;
+}, {}, "">;
+type $$ComponentProps = {
+    linked: string;
+    empty?: string;
+    transform?: (label: string) => string;
 };
-export {};

dist/LinkedValue.svelte.d.ts

@@ -1,29 +0,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 {};

dist/stores/tinyLinkedCharts.d.ts

@@ -1,3 +0,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>>;

dist/stores/tinyLinkedCharts.js

 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.json

 {
 	"name": "svelte-tiny-linked-charts",
-	"version": "1.6.2",
+	"version": "2.0.0",
 	"scripts": {
@@ -29,23 +29,23 @@ "dev": "vite dev",
 	"peerDependencies": {
-		"svelte": "^4.0.0 || >= 5.0.0"
+		"svelte": ">=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",
+		"@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": "^4.0.5",
-		"svelte-check": "^3.4.3",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2",
-		"vitest": "^0.34.0"
+		"typescript": "^5.5.0",
+		"vite": "^5.4.4",
+		"vitest": "^2.1.8"
 	},
@@ -52,0 +52,0 @@ "svelte": "./dist/index.js",

README.md

@@ -23,2 +23,4 @@ # Tiny Linked Charts for Svelte
 
+If you are using Svelte 4, use version ^1.0.0. Version 2 is reserved for Svelte 5.
+
 Include the chart in your app.
@@ -107,4 +109,5 @@ ```js
 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.
 
@@ -111,0 +114,0 @@ `<LinkedLabel />` component.

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23830

increased by25.93%

Lines of code

224

increased by37.42%

Number of lines in readme file

126

increased by2.44%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes