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

Comparing version 2.0.0 to 2.2.0

dist/LinkedChart.svelte.d.ts

@@ -9,31 +9,133 @@ export default LinkedChart;
 declare const LinkedChart: import("svelte").Component<{
+    /**
+     * Unique ID to link this chart to a LinkedValue component with the same uid.
+     */
     uid?: string | undefined;
+    /**
+     * Data that will be displayed in the chart supplied in key:value object. Key should be a string, value a number.
+     */
     data?: Record<string, number> | undefined;
+    /**
+     * Labels supplied separately, to be used together with `values` property.
+     */
     labels?: string[] | undefined;
+    /**
+     * Values supplied separately, to be used together with `labels` property.
+     */
     values?: number[] | undefined;
+    /**
+     * Key to link this chart to other charts with the same key.
+     */
     linked?: string | undefined;
+    /**
+     * Height of the chart in pixels.
+     */
     height?: number | undefined;
+    /**
+     * Width of the chart in pixels.
+     */
     width?: number | undefined;
+    /**
+     * Width of the bars in the chart in pixels.
+     */
     barMinWidth?: number | undefined;
+    /**
+     * Minimum height of the bars in the chart in pixels.
+     */
     barMinHeight?: number | undefined;
+    /**
+     * Bars below this value will be hidden, showing as 0 height.
+     */
     hideBarBelow?: number | undefined;
+    /**
+     * Whether or not the bar should grow to fill out the full width of the chart.
+     */
     grow?: boolean | undefined;
+    /**
+     * The side the bars should align to when they do not completely fill out the chart.
+     */
     align?: "left" | "right" | undefined;
+    /**
+     * Gap between the bars in pixels.
+     */
     gap?: number | undefined;
+    /**
+     * Color of the bars, can be any valid CSS color.
+     */
     fill?: string | undefined;
+    /**
+     * Array of colors for each individual bar.
+     */
+    fillArray?: (string | null)[] | undefined;
+    /**
+     * The opacity the faded out bars should display in.
+     */
     fadeOpacity?: number | undefined;
+    /**
+     * Boolean whether or not this chart can be hovered at all.
+     */
     hover?: boolean | undefined;
+    /**
+     * Transition the chart between different stats. Value is time in milliseconds.
+     */
     transition?: number | undefined;
+    /**
+     * Boolean whether or not a value will be shown.
+     */
     showValue?: boolean | undefined;
+    /**
+     * Default value when not hovering.
+     */
     valueDefault?: string | undefined;
+    /**
+     * String to prepend the value.
+     */
     valuePrepend?: string | undefined;
+    /**
+     * String to append to the value.
+     */
     valueAppend?: string | undefined;
+    /**
+     * For when the hovering value returns undefined.
+     */
+    valueUndefined?: number | undefined;
+    /**
+     * Can be set to "floating" to follow the position of the hover.
+     */
     valuePosition?: "static" | "floating" | undefined;
-    valueUndefined?: number | undefined;
+    /**
+     * Use this to overwrite the automatic scale set to the highest value in your array.
+     */
     scaleMax?: number | undefined;
+    /**
+     * Use this to overwrite the default value floor of 0.
+     */
     scaleMin?: number | undefined;
+    /**
+     * Can be set to "line" to display a line chart instead.
+     */
     type?: "bar" | "line" | undefined;
+    /**
+     * Color of the line if used with type="line".
+     */
     lineColor?: string | undefined;
+    /**
+     * Sets whether or not the SVG will preserve it's aspect ratio.
+     */
+    preserveAspectRatio?: boolean | undefined;
+    /**
+     * Sets the tabindex of each bar. When a tabindex of 0 is given, each bar will contain a title that describes the bar's label and value.
+     */
     tabindex?: 0 | -1 | undefined;
-    preserveAspectRatio?: boolean | undefined;
+    /**
+     * Title that describes the chart for screen readers.
+     */
+    title?: string | undefined;
+    /**
+     * Description that describes the chart for screen readers.
+     */
+    description?: string | undefined;
+    /**
+     * Function that executes on click and returns the key and index for the clicked data.
+     */
     onclick?: ((args: {
@@ -43,2 +145,5 @@ key?: string | undefined;
     }) => void) | undefined;
+    /**
+     * Function that executes when a value in the chart updates.
+     */
     onvalueupdate?: ((args: {
@@ -50,2 +155,5 @@ value?: number | null | undefined;
     }) => void) | undefined;
+    /**
+     * Function that executes on hover of each bar, also fires on tab focus.
+     */
     onhover?: ((args: {
@@ -78,2 +186,5 @@ /**
     }) => void) | undefined;
+    /**
+     * Function that executes when hover or focus leaves the chart.
+     */
     onblur?: ((args: {
@@ -98,31 +209,133 @@ /**
 type Props = {
+    /**
+     * Unique ID to link this chart to a LinkedValue component with the same uid.
+     */
     uid?: string | undefined;
+    /**
+     * Data that will be displayed in the chart supplied in key:value object. Key should be a string, value a number.
+     */
     data?: Record<string, number> | undefined;
+    /**
+     * Labels supplied separately, to be used together with `values` property.
+     */
     labels?: string[] | undefined;
+    /**
+     * Values supplied separately, to be used together with `labels` property.
+     */
     values?: number[] | undefined;
+    /**
+     * Key to link this chart to other charts with the same key.
+     */
     linked?: string | undefined;
+    /**
+     * Height of the chart in pixels.
+     */
     height?: number | undefined;
+    /**
+     * Width of the chart in pixels.
+     */
     width?: number | undefined;
+    /**
+     * Width of the bars in the chart in pixels.
+     */
     barMinWidth?: number | undefined;
+    /**
+     * Minimum height of the bars in the chart in pixels.
+     */
     barMinHeight?: number | undefined;
+    /**
+     * Bars below this value will be hidden, showing as 0 height.
+     */
     hideBarBelow?: number | undefined;
+    /**
+     * Whether or not the bar should grow to fill out the full width of the chart.
+     */
     grow?: boolean | undefined;
+    /**
+     * The side the bars should align to when they do not completely fill out the chart.
+     */
     align?: "left" | "right" | undefined;
+    /**
+     * Gap between the bars in pixels.
+     */
     gap?: number | undefined;
+    /**
+     * Color of the bars, can be any valid CSS color.
+     */
     fill?: string | undefined;
+    /**
+     * Array of colors for each individual bar.
+     */
+    fillArray?: (string | null)[] | undefined;
+    /**
+     * The opacity the faded out bars should display in.
+     */
     fadeOpacity?: number | undefined;
+    /**
+     * Boolean whether or not this chart can be hovered at all.
+     */
     hover?: boolean | undefined;
+    /**
+     * Transition the chart between different stats. Value is time in milliseconds.
+     */
     transition?: number | undefined;
+    /**
+     * Boolean whether or not a value will be shown.
+     */
     showValue?: boolean | undefined;
+    /**
+     * Default value when not hovering.
+     */
     valueDefault?: string | undefined;
+    /**
+     * String to prepend the value.
+     */
     valuePrepend?: string | undefined;
+    /**
+     * String to append to the value.
+     */
     valueAppend?: string | undefined;
+    /**
+     * For when the hovering value returns undefined.
+     */
+    valueUndefined?: number | undefined;
+    /**
+     * Can be set to "floating" to follow the position of the hover.
+     */
     valuePosition?: "static" | "floating" | undefined;
-    valueUndefined?: number | undefined;
+    /**
+     * Use this to overwrite the automatic scale set to the highest value in your array.
+     */
     scaleMax?: number | undefined;
+    /**
+     * Use this to overwrite the default value floor of 0.
+     */
     scaleMin?: number | undefined;
+    /**
+     * Can be set to "line" to display a line chart instead.
+     */
     type?: "bar" | "line" | undefined;
+    /**
+     * Color of the line if used with type="line".
+     */
     lineColor?: string | undefined;
+    /**
+     * Sets whether or not the SVG will preserve it's aspect ratio.
+     */
+    preserveAspectRatio?: boolean | undefined;
+    /**
+     * Sets the tabindex of each bar. When a tabindex of 0 is given, each bar will contain a title that describes the bar's label and value.
+     */
     tabindex?: 0 | -1 | undefined;
-    preserveAspectRatio?: boolean | undefined;
+    /**
+     * Title that describes the chart for screen readers.
+     */
+    title?: string | undefined;
+    /**
+     * Description that describes the chart for screen readers.
+     */
+    description?: string | undefined;
+    /**
+     * Function that executes on click and returns the key and index for the clicked data.
+     */
     onclick?: ((args: {
@@ -132,2 +345,5 @@ key?: string | undefined;
     }) => void) | undefined;
+    /**
+     * Function that executes when a value in the chart updates.
+     */
     onvalueupdate?: ((args: {
@@ -139,2 +355,5 @@ value?: number | null | undefined;
     }) => void) | undefined;
+    /**
+     * Function that executes on hover of each bar, also fires on tab focus.
+     */
     onhover?: ((args: {
@@ -167,2 +386,5 @@ /**
     }) => void) | undefined;
+    /**
+     * Function that executes when hover or focus leaves the chart.
+     */
     onblur?: ((args: {
@@ -169,0 +391,0 @@ /**

package.json

 {
 	"name": "svelte-tiny-linked-charts",
-	"version": "2.0.0",
+	"version": "2.2.0",
 	"scripts": {
@@ -38,4 +38,6 @@ "dev": "vite dev",
 		"@testing-library/svelte": "^5.2.6",
-		"eslint": "^9.0.0",
-		"eslint-config-prettier": "^9.1.0",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^2.46.1",
+		"globals": "^15.14.0",
 		"happy-dom": "^16.5.3",
@@ -42,0 +44,0 @@ "prettier": "^3.1.0",

README.md

@@ -93,2 +93,3 @@ # Tiny Linked Charts for Svelte
 fill | #ff3e00 | Color of the bars, can be any valid CSS color.
+fillArray | [] | Array of colors for each individual bar.
 fadeOpacity | 0.5 | The opacity the faded out bars should display in.
@@ -107,4 +108,6 @@ hover | true | Boolean whether or not this chart can be hovered at all.
 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
+preserveAspectRatio | false | Sets whether or not the SVG will preserve it's aspect ratio.
+tabindex | -1 | Sets the tabindex of each bar. When a tabindex of 0 is given, each bar will contain a title that describes the bar's label and value.
+title | "" | Title that describes the chart for screen readers.
+description | "" | Description that describes the chart for screen readers.
 onclick | null | Function that executes on click and returns the key and index for the clicked data.
@@ -111,0 +114,0 @@ onhover | null | Function that executes on hover of each bar.

Fixed 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

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34371

44.23%

Number of package files

13

8.33%

Number of low license alerts

0

-100%

Lines of code

446

99.11%

Number of lines in readme file

129

2.38%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dev dependency count

20

11.11%

No dependency changes