svelte-tiny-linked-charts 2.3.2 → 2.4.0

package/README.md

@@ -105,6 +105,7 @@ 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".
 lineFill | transparent | Color of the fill area if used with type="line".
+lineFillGradient | null | Gradient stops of fill area if used with type="line", each value being a stop for any css color.
 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.

package/dist/LinkedChart.svelte

@@ -62,6 +62,7 @@
    * @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 {string[] | null} [lineFillGradient] Gradient stops of fill area if used with type="line", each value being a stop for any css color.
    * @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.
@@ -105,6 +106,7 @@
     type = "bar",
     lineColor = fill,
     lineFill = "transparent",
+    lineFillGradient = null,
     lineWidth = 1,
     lineDotRadius = 0,
     preserveAspectRatio = false,
@@ -119,14 +121,13 @@
   } = $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))
+  let polyline = $derived(type === "line" ? getPolylinePoints(data) : [])
 
   $effect(() => {
     if (labels.length && values.length) data = Object.fromEntries(labels.map((_, i) => [labels[i], values[i]]))
@@ -140,10 +141,6 @@
     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 })
   })
@@ -185,7 +182,7 @@
   }
 
   /** @param {Record<string, number>} data */
-  function getPolyLinePoints(data) {
+  function getPolylinePoints(data) {
     let points = []
 
     for (let i = 0; i < Object.keys(data).length; i++) {
@@ -244,10 +241,20 @@
     <desc>{description}</desc>
   {/if}
 
+  {#if lineFillGradient}
+    <defs>
+      <linearGradient id="chart-{uid}-gradient" x1="0" x2="0" y1="0" y2="1">
+        {#each lineFillGradient as color, index}
+          <stop offset="{100 / (lineFillGradient.length - 1) * index}%" stop-color={color} />
+        {/each}
+      </linearGradient>
+    </defs>
+  {/if}
+
   <g transform="translate({alignmentOffset}, 0)">
     {#if type == "line"}
-      {#if lineFill && lineFill !== "transparent"}
-        <polyline points={[...polyline, [polyline[polyline.length - 1]?.[0], height], [0, height]].join(" ")} fill={lineFill} />
+      {#if (lineFill && lineFill !== "transparent") || lineFillGradient}
+        <polygon points={[...polyline, [polyline[polyline.length - 1]?.[0], height], [0, height]].join(" ")} fill={lineFillGradient ? `url(#chart-${uid}-gradient)` : lineFill} />
       {/if}
 
       <polyline points={polyline.join(" ")} stroke={lineColor} stroke-width={lineWidth} fill="transparent" />

package/dist/LinkedChart.svelte.d.ts

@@ -122,6 +122,10 @@ declare const LinkedChart: import("svelte").Component<{
      * Color of the fill area if used with type="line".
      */
     lineFill?: string | undefined;
+    /**
+     * Gradient stops of fill area if used with type="line", each value being a stop for any css color.
+     */
+    lineFillGradient?: string[] | null | undefined;
     /**
      * Width of the line if used with type="line".
      */
@@ -330,6 +334,10 @@ type Props = {
      * Color of the fill area if used with type="line".
      */
     lineFill?: string | undefined;
+    /**
+     * Gradient stops of fill area if used with type="line", each value being a stop for any css color.
+     */
+    lineFillGradient?: string[] | null | undefined;
     /**
      * Width of the line if used with type="line".
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-tiny-linked-charts",
-	"version": "2.3.2",
+	"version": "2.4.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",