@humanforest/charts 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanforest/charts",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "files": [
     "src"
@@ -24,7 +24,7 @@
     "vue": "^3.5.22"
   },
   "dependencies": {
-    "@humanforest/tokens": "^0.3.2"
+    "@humanforest/tokens": "^0.3.3"
   },
   "publishConfig": {
     "access": "public"

package/src/FSparkline.vue

@@ -50,6 +50,12 @@ const props = withDefaults(
     area?: boolean;
     /** Marks the last point, so the series has an end rather than running off the edge. */
     endpoint?: boolean;
+    /**
+     * Takes the height its container gives it, with `height` as the floor. For a graphic in a space
+     * its surroundings have made taller (a KPI bleed row that a stretched card or a group has given
+     * more height), where the chart is the part that should grow. Works for both marks.
+     */
+    fill?: boolean;
     /**
      * Monotone interpolation, on by default. Monotone rather than a plain spline: it stays inside
      * the data's own range, so no peak appears between two points that neither of them reached.
@@ -71,7 +77,7 @@ const props = withDefaults(
      */
     mark?: 'line' | 'bar';
   }>(),
-  { height: 32, color: 'var(--ui-primary)', area: false, endpoint: false, curve: true, mark: 'line', compare: undefined, compareColor: undefined },
+  { height: 32, color: 'var(--ui-primary)', area: false, endpoint: false, fill: false, curve: true, mark: 'line', compare: undefined, compareColor: undefined },
 );
 
 if (import.meta.env.DEV) {
@@ -155,14 +161,14 @@ const endpointTop = computed(() => {
 </script>
 
 <template>
-  <div class="relative w-full" :style="{ height: `${height}px`, color }">
+  <div class="relative w-full" :class="fill ? 'h-full' : ''" :style="fill ? { minHeight: `${height}px`, color } : { height: `${height}px`, color }">
     <!-- Plain DOM rather than a mark: there are no axes, scales or tooltip to share with the XY
          container, so a flex row of columns is the whole implementation and costs no chart runtime.
          The 2px gap is fixed, so the bucket count sets how thin the bars get: n buckets across w
          pixels leaves (w - 2(n - 1)) / n each. A tile 280px wide holds 12 buckets at 21px and 60 at
          2.7px — still bars; past roughly 60 the gap outweighs the bar and the row reads as a
          texture, where the measure belongs to a line instead. -->
-    <div v-if="mark === 'bar'" class="flex h-full w-full items-end gap-0.5" aria-hidden="true">
+    <div v-if="mark === 'bar'" class="flex w-full items-end gap-0.5" :class="fill ? 'absolute inset-0' : 'h-full'" aria-hidden="true">
       <span
         v-for="(v, i) in data"
         :key="i"
@@ -180,12 +186,17 @@ const endpointTop = computed(() => {
     <!-- No bottom margin: the graphic sits on the tile's own bottom edge, and 2px of clearance
          there reads as a misaligned card rather than as breathing room. The top keeps its 2px so a
          peak is not clipped by the stroke's own width, and the right reserves room for the endpoint
-         dot when there is one. -->
+         dot when there is one. Under `fill` the container is laid over the root rather than sizing
+         it: the root takes the space it is given, floored at `height`, and Unovis measures that box,
+         never its own SVG (which would feed back) and never its 300px fallback for an empty box.
+         An inline style, not a utility: Unovis's own stylesheet pins `.unovis-xy-container` to
+         `position: relative`, and a class loses to it. -->
     <VisXYContainer
       v-else
       :key="themeVersion"
+      :style="fill ? { position: 'absolute', inset: '0' } : undefined"
       :data="points"
-      :height="height"
+      :height="fill ? undefined : height"
       :margin="{ top: 2, right: endpoint ? 4 : 0, bottom: 0, left: 0 }"
       :y-domain="domain ?? undefined"
       :duration="motionDuration('slow')"