@humanforest/charts 0.3.3 → 0.3.5

package/package.json

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

package/src/FSparkline.vue

@@ -18,6 +18,7 @@ import { VisXYContainer, VisLine, VisArea } from '@unovis/vue';
 import { CurveType } from '@unovis/ts';
 import { motionDuration } from './motionDuration';
 import { useThemeVersion } from './useThemeVersion';
+import { sparklineDomain } from './sparklineDomain';
 
 const props = withDefaults(
   defineProps<{
@@ -52,7 +53,7 @@ const props = withDefaults(
     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
+     * its surroundings have made taller (a KPI's chart 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;
@@ -100,23 +101,18 @@ type Point = { i: number; v: number | null; c: number | null };
 const points = computed<Point[]>(() =>
   props.data.map((v, i) => ({ i, v, c: props.compare?.[i] ?? null })),
 );
+// Readings are plotted as their height above the frame's floor, which is 0 except under `area`.
 const x = (d: Point) => d.i;
-const y = (d: Point) => d.v;
-const yCompare = (d: Point) => d.c;
+const y = (d: Point) => (d.v === null ? null : d.v - frame.value.floor);
+const yCompare = (d: Point) => (d.c === null ? null : d.c - frame.value.floor);
 
 const hasCompare = computed(() => !!props.compare?.some((v) => v !== null && v !== undefined));
 
 // The line marks share one scale, framed by the floor and ceiling of everything drawn on it — a
-// line reads as a shape, and a shape wants its own range. Set by hand because an Unovis area is
-// measured from a baseline: left to itself, `area` pulls the floor to zero and flattens the line it
-// is filling under. `null` when there is nothing to draw, so the container keeps its own fallback.
-const domain = computed<[number, number] | null>(() => {
-  const vals = [...props.data, ...(props.compare ?? [])].filter((v): v is number => typeof v === 'number');
-  return vals.length ? [Math.min(...vals), Math.max(...vals)] : null;
-});
-// An area is a band from its baseline to baseline + y, not a fill up to y, so reaching the line
-// from the floor of the frame means passing the height above that floor.
-const yFromFloor = (d: Point) => (d.v === null || !domain.value ? null : d.v - domain.value[0]);
+// line reads as a shape, and a shape wants its own range. The frame, and why `area` shifts it to
+// start at 0, live in sparklineDomain. An area is a band from its baseline to baseline + y, so with
+// the floor at 0 it runs from 0 up to each reading's height above the floor.
+const frame = computed(() => sparklineDomain(props.data, props.compare, props.area));
 
 // Bars are the exception: they are measured from zero, not from the data's own floor. A bar reads
 // as a LENGTH, and a bar that starts anywhere but zero has a length no longer proportional to its
@@ -142,9 +138,6 @@ const barFor = (v: number | null) => {
     // A reading of zero keeps a hairline. Zero is a real measurement and a gap is the absence of
     // one; collapsing the bar to nothing would render the two identically.
     height: `max(${(to - from) * 100}%, 1px)`,
-    // The cap goes on the free end, so a bar below the baseline rounds downward rather than into
-    // the axis it grows from.
-    negative: v < 0,
   };
 };
 
@@ -154,9 +147,9 @@ const last = computed(() => {
 });
 // Fraction of the height the final point sits at, for the endpoint dot.
 const endpointTop = computed(() => {
-  const [lo, hi] = domain.value ?? [0, 0];
+  const [lo, hi] = frame.value.domain ?? [0, 0];
   if (last.value === null || hi === lo) return 50;
-  return (1 - (last.value - lo) / (hi - lo)) * 100;
+  return (1 - (last.value - frame.value.floor - lo) / (hi - lo)) * 100;
 });
 </script>
 
@@ -167,7 +160,8 @@ const endpointTop = computed(() => {
          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. -->
+         texture, where the measure belongs to a line instead. Each bar is rounded at both ends:
+         no baseline is drawn for a square end to sit on. -->
     <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"
@@ -176,8 +170,7 @@ const endpointTop = computed(() => {
       >
         <span
           v-if="barFor(v)"
-          class="absolute inset-x-0 bg-current"
-          :class="barFor(v)!.negative ? 'rounded-b-[3px]' : 'rounded-t-[3px]'"
+          class="absolute inset-x-0 rounded-[3px] bg-current"
           :style="{ bottom: barFor(v)!.bottom, height: barFor(v)!.height }"
         />
       </span>
@@ -198,7 +191,7 @@ const endpointTop = computed(() => {
       :data="points"
       :height="fill ? undefined : height"
       :margin="{ top: 2, right: endpoint ? 4 : 0, bottom: 0, left: 0 }"
-      :y-domain="domain ?? undefined"
+      :y-domain="frame.domain ?? undefined"
       :duration="motionDuration('slow')"
     >
       <!-- Comparison first, so the current series draws over it. Dashed and thinner: the dash says
@@ -214,7 +207,7 @@ const endpointTop = computed(() => {
         :opacity="0.45"
         :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear"
       />
-      <VisArea v-if="area" :x="x" :y="yFromFloor" :baseline="domain?.[0] ?? 0" :color="color" :opacity="0.12" :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear" />
+      <VisArea v-if="area" :x="x" :y="y" :baseline="0" :color="color" :opacity="0.12" :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear" />
       <VisLine :x="x" :y="y" :color="color" :line-width="1.5" :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear" />
     </VisXYContainer>
     <span

package/src/sparklineDomain.ts

@@ -0,0 +1,25 @@
+/**
+ * The frame a sparkline's line marks are plotted in: the floor and ceiling of everything drawn,
+ * shared by the series and its comparison, or null when there is nothing to draw so the container
+ * keeps its own fallback. Set by hand because an Unovis area is measured from a baseline: left to
+ * itself, `area` pulls the floor to zero and flattens the line it is filling under.
+ *
+ * Under `area` the frame starts at 0 and every reading is plotted as its height above the floor.
+ * Unovis insets a line's scale by half its stroke unless the domain starts at 0, and the area shares
+ * that scale, so from a non-zero floor the fill stopped 0.75px above the bottom edge: a hairline of
+ * card under the chart. From 0 the fill meets the edge, and the line's lowest point gives the lower
+ * half of its stroke to that edge, where the graphic sits anyway. A plain line keeps its range and
+ * its whole stroke.
+ */
+export function sparklineDomain(
+  data: (number | null)[],
+  compare: (number | null)[] | undefined,
+  area: boolean,
+): { floor: number; domain: [number, number] | null } {
+  const vals = [...data, ...(compare ?? [])].filter((v): v is number => typeof v === 'number');
+  if (!vals.length) return { floor: 0, domain: null };
+  const lo = Math.min(...vals);
+  const hi = Math.max(...vals);
+  const floor = area ? lo : 0;
+  return { floor, domain: [lo - floor, hi - floor] };
+}