svelte-tiny-linked-charts 2.0.0 → 2.3.0

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/README.md

@@ -90,6 +90,7 @@ grow | false | Whether or not the bar should grow to fill out the full width of
 align | right | The side the bars should align to when they do not completely fill out the chart.
 gap | 1 | Gap between the bars in pixels.
 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.
 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.
@@ -103,8 +104,13 @@ scaleMax | 0 | Use this to overwrite the automatic scale set to the highest valu
 scaleMax | 0 | Use this to overwrite the default value floor of 0.
 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
+lineFill | transparent | Color of the fill area if used with type="line".
+lineWidth | 1 | Width of the line if used with type="line".
+lineDotRadius | 0 (derived) | The size of the dot when hovering a line if used with type="line".
+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.
 onhover | null | Function that executes on hover of each bar.
 onblur | null | Function that executes when focus leaves the chart.

package/dist/LinkedChart.svelte

@@ -33,39 +33,45 @@
 
   /**
    * @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]
+   * @property {string} [uid] Unique ID to link this chart to a LinkedValue component with the same uid.
+   * @property {Record<string, number>} [data] Data that will be displayed in the chart supplied in key:value object. Key should be a string, value a number.
+   * @property {string[]} [labels] Labels supplied separately, to be used together with `values` property.
+   * @property {number[]} [values] Values supplied separately, to be used together with `labels` property.
+   * @property {string} [linked] Key to link this chart to other charts with the same key.
+   * @property {number} [height] Height of the chart in pixels.
+   * @property {number} [width] Width of the chart in pixels.
+   * @property {number} [barMinWidth] Width of the bars in the chart in pixels.
+   * @property {number} [barMinHeight] Minimum height of the bars in the chart in pixels.
+   * @property {number} [hideBarBelow] Bars below this value will be hidden, showing as 0 height.
+   * @property {boolean} [grow] Whether or not the bar should grow to fill out the full width of the chart.
+   * @property {"left" | "right"} [align] The side the bars should align to when they do not completely fill out the chart.
+   * @property {number} [gap] Gap between the bars in pixels.
+   * @property {string} [fill] Color of the bars, can be any valid CSS color.
+   * @property {Array<string | null>} [fillArray] Array of colors for each individual bar.
+   * @property {number} [fadeOpacity] The opacity the faded out bars should display in.
+   * @property {boolean} [hover] Boolean whether or not this chart can be hovered at all.
+   * @property {number} [transition] Transition the chart between different stats. Value is time in milliseconds.
+   * @property {boolean} [showValue] Boolean whether or not a value will be shown.
+   * @property {string} [valueDefault] Default value when not hovering.
+   * @property {string} [valuePrepend] String to prepend the value.
+   * @property {string} [valueAppend] String to append to the value.
+   * @property {number} [valueUndefined] For when the hovering value returns undefined.
+   * @property {"static" | "floating"} [valuePosition] Can be set to "floating" to follow the position of the hover.
+   * @property {number} [scaleMax] Use this to overwrite the automatic scale set to the highest value in your array.
+   * @property {number} [scaleMin] Use this to overwrite the default value floor of 0.
+   * @property {"bar" | "line"} [type] Can be set to "line" to display a line chart instead.
+   * @property {string} [lineColor] Color of the line if used with type="line".
+   * @property {string} [lineFill] Color of the fill area if used with type="line".
+   * @property {number} [lineWidth] Width of the line if used with type="line".
+   * @property {number} [lineDotRadius] The size of the dot when hovering a line if used with type="line".
+   * @property {boolean} [preserveAspectRatio]  Sets whether or not the SVG will preserve it's aspect ratio.
+   * @property {-1 | 0} [tabindex] 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.
+   * @property {string} [title] Title that describes the chart for screen readers.
+	 * @property {string} [description] Description that describes the chart for screen readers.
+   * @property {(args: OnClick) => void} [onclick] Function that executes on click and returns the key and index for the clicked data.
+   * @property {(args: OnValueUpdate) => void} [onvalueupdate] Function that executes when a value in the chart updates.
+   * @property {(args: OnHover) => void} [onhover] Function that executes on hover of each bar, also fires on tab focus.
+   * @property {(args: OnBlur) => void} [onblur] Function that executes when hover or focus leaves the chart.
    */
 
   /** @type {Props & { [key: string]: any }} */
@@ -84,6 +90,7 @@
     align = "right",
     gap = 1,
     fill = "#ff3e00",
+    fillArray = [],
     fadeOpacity = 0.5,
     hover = true,
     transition = 0,
@@ -97,8 +104,13 @@
     scaleMin = 0,
     type = "bar",
     lineColor = fill,
-    tabindex = -1,
+    lineFill = "transparent",
+    lineWidth = 1,
+    lineDotRadius = 0,
     preserveAspectRatio = false,
+    tabindex = -1,
+    title = "",
+    description = "",
     onclick = ({ key, index }) => null,
     onvalueupdate = ({ value, uid, linkedKey, valueElement }) => null,
     onhover = ({ uid, key, index, linkedKey, value, valueElement, eventElement }) => null,
@@ -219,11 +231,24 @@
   preserveAspectRatio={preserveAspectRatio ? "true" : "none"}
   onmouseleave={endHover}
   onblur={endHover}
+  aria-labelledby={title ? `${uid}-title` : null}
   {...rest}>
 
+  {#if title}
+    <title id="{uid}-title">{title}</title>
+  {/if}
+
+  {#if description}
+    <desc>{description}</desc>
+  {/if}
+
   <g transform="translate({alignmentOffset}, 0)">
     {#if type == "line"}
-      <polyline points={polyline.join(" ")} stroke={lineColor} fill="transparent" />
+      {#if lineFill && lineFill !== "transparent"}
+        <polyline points={[...polyline, [width, height], [0, height]].join(" ")} fill={lineFill} />
+      {/if}
+
+      <polyline points={polyline.join(" ")} stroke={lineColor} stroke-width={lineWidth} fill="transparent" />
     {/if}
 
     {#each Object.entries(data) as [key, value], i}
@@ -231,15 +256,15 @@
         <rect
           style={transition ? `transition: all ${transition}ms` : null}
           opacity={hover && $hoveringKey[linkedKey] && $hoveringKey[linkedKey] != key ? fadeOpacity : 1}
-          fill={fill}
+          fill={fillArray[i] || fill}
           width={barWidth}
           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 ? barMinWidth : barWidth / 2}
+          fill={hover && $hoveringKey[linkedKey] !== null && $hoveringKey[linkedKey] == key ? (fillArray[i] || fill) : "transparent"}
+          r={lineDotRadius || (grow ? barMinWidth : barWidth / 2)}
           cy={height - getHeight(value)}
           cx={((gap + barWidth) + (barWidth / (Object.keys(data).length))) * i} />
       {/if}
@@ -256,7 +281,11 @@
         height={height}
         fill="transparent"
         x={(gap + barWidth) * i}
-        {tabindex} />
+        {tabindex}>
+        {#if tabindex !== -1}
+          <title>{key}: {value}</title>
+        {/if}
+      </rect>
     {/each}
   </g>
 </svg>
@@ -268,6 +297,7 @@
       <span bind:this={valueElement}>{$hoveringValue[uid] || valueUndefined}</span>
       {valueAppend}
     {:else}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
       {@html valueDefault}
     {/if}
   </div>

package/dist/LinkedChart.svelte.d.ts

@@ -6,45 +6,165 @@ type LinkedChart = {
     }>): void;
 };
 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;
-    valuePosition?: "static" | "floating" | 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;
+    /**
+     * 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;
-    tabindex?: 0 | -1 | undefined;
+    /**
+     * Color of the fill area if used with type="line".
+     */
+    lineFill?: string | undefined;
+    /**
+     * Width of the line if used with type="line".
+     */
+    lineWidth?: number | undefined;
+    /**
+     * The size of the dot when hovering a line if used with type="line".
+     */
+    lineDotRadius?: number | 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;
+    /**
+     * 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: {
         key?: string | undefined;
         index?: number | undefined;
     }) => void) | undefined;
+    /**
+     * Function that executes when a value in the chart updates.
+     */
     onvalueupdate?: ((args: {
         value?: number | null | undefined;
         uid?: string | undefined;
         linkedKey?: string | undefined;
         valueElement?: HTMLElement | null | undefined;
     }) => void) | undefined;
+    /**
+     * Function that executes on hover of each bar, also fires on tab focus.
+     */
     onhover?: ((args: {
         /**
          * ,
@@ -72,6 +192,9 @@ declare const LinkedChart: import("svelte").Component<{
         valueElement: HTMLElement;
         eventElement: EventTarget | null;
     }) => void) | undefined;
+    /**
+     * Function that executes when hover or focus leaves the chart.
+     */
     onblur?: ((args: {
         /**
          * ,
@@ -91,45 +214,165 @@ declare const LinkedChart: import("svelte").Component<{
     [key: string]: any;
 }, {}, "data">;
 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;
-    valuePosition?: "static" | "floating" | 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;
+    /**
+     * 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;
-    tabindex?: 0 | -1 | undefined;
+    /**
+     * Color of the fill area if used with type="line".
+     */
+    lineFill?: string | undefined;
+    /**
+     * Width of the line if used with type="line".
+     */
+    lineWidth?: number | undefined;
+    /**
+     * The size of the dot when hovering a line if used with type="line".
+     */
+    lineDotRadius?: number | 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;
+    /**
+     * 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: {
         key?: string | undefined;
         index?: number | undefined;
     }) => void) | undefined;
+    /**
+     * Function that executes when a value in the chart updates.
+     */
     onvalueupdate?: ((args: {
         value?: number | null | undefined;
         uid?: string | undefined;
         linkedKey?: string | undefined;
         valueElement?: HTMLElement | null | undefined;
     }) => void) | undefined;
+    /**
+     * Function that executes on hover of each bar, also fires on tab focus.
+     */
     onhover?: ((args: {
         /**
          * ,
@@ -157,6 +400,9 @@ type Props = {
         valueElement: HTMLElement;
         eventElement: EventTarget | null;
     }) => void) | undefined;
+    /**
+     * Function that executes when hover or focus leaves the chart.
+     */
     onblur?: ((args: {
         /**
          * ,

package/dist/LinkedLabel.svelte

@@ -11,5 +11,6 @@
 {#if label}
   {transform(label)}
 {:else}
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
   {@html empty}
 {/if}

package/dist/LinkedValue.svelte

@@ -16,5 +16,6 @@
 {#if uid in $hoveringValue && value !== null}
   {transform(value) || valueUndefined}
 {:else}
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
   {@html empty}
 {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-tiny-linked-charts",
-	"version": "2.0.0",
+	"version": "2.3.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -35,8 +35,10 @@
 		"@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",
+		"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",
 		"prettier": "^3.1.0",
 		"prettier-plugin-svelte": "^3.2.6",