@humanforest/charts 0.2.0 → 0.3.1

package/package.json

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

package/src/FSparkline.vue

@@ -100,10 +100,22 @@ const yCompare = (d: Point) => d.c;
 
 const hasCompare = computed(() => !!props.compare?.some((v) => v !== null && v !== undefined));
 
-// Bars are measured from zero, not from the data's own floor. The line mark frames min-to-max
-// because it reads as a shape; a bar reads as a LENGTH, and a bar that starts anywhere but zero has
-// a length no longer proportional to its value. The domain therefore always contains zero, which
-// also puts negative readings below the baseline instead of quietly flipping them.
+// 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]);
+
+// 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
+// value. The bar domain therefore always contains zero, which also puts negative readings below the
+// baseline instead of quietly flipping them.
 const barDomain = computed(() => {
   const vals = props.data.filter((v): v is number => v !== null);
   const lo = Math.min(0, ...vals);
@@ -134,15 +146,11 @@ const last = computed(() => {
   for (let i = props.data.length - 1; i >= 0; i--) if (props.data[i] !== null) return props.data[i] as number;
   return null;
 });
-const bounds = computed(() => {
-  const vals = props.data.filter((v): v is number => v !== null);
-  return { min: Math.min(...vals), max: Math.max(...vals) };
-});
 // Fraction of the height the final point sits at, for the endpoint dot.
 const endpointTop = computed(() => {
-  const { min, max } = bounds.value;
-  if (last.value === null || max === min) return 50;
-  return (1 - (last.value - min) / (max - min)) * 100;
+  const [lo, hi] = domain.value ?? [0, 0];
+  if (last.value === null || hi === lo) return 50;
+  return (1 - (last.value - lo) / (hi - lo)) * 100;
 });
 </script>
 
@@ -179,6 +187,7 @@ const endpointTop = computed(() => {
       :data="points"
       :height="height"
       :margin="{ top: 2, right: endpoint ? 4 : 0, bottom: 0, left: 0 }"
+      :y-domain="domain ?? undefined"
       :duration="motionDuration('slow')"
     >
       <!-- Comparison first, so the current series draws over it. Dashed and thinner: the dash says
@@ -194,7 +203,7 @@ const endpointTop = computed(() => {
         :opacity="0.45"
         :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear"
       />
-      <VisArea v-if="area" :x="x" :y="y" :color="color" :opacity="0.12" :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" />
       <VisLine :x="x" :y="y" :color="color" :line-width="1.5" :curve-type="curve ? CurveType.MonotoneX : CurveType.Linear" />
     </VisXYContainer>
     <span