@humanforest/charts 0.3.4 → 0.3.6

package/package.json

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

package/src/FSparkline.vue

@@ -138,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,
   };
 };
 
@@ -163,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"
@@ -172,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>

package/src/forestTooltip.ts

@@ -97,7 +97,7 @@ export function forestTooltip<Datum extends Record<string, unknown>>(
     const present = keys.filter((k) => k in d);
     const title = opts.titleFormatter ? opts.titleFormatter(d) : Object.values(d)[0];
     const rows: ForestTipRow[] = present.map((k, i) => {
-      const item = categories[k];
+      const item = categories[k]!;
       const raw = d[k];
       return {
         swatch: typeof item.color === 'string' ? item.color : `var(--vis-color${i})`,

package/src/fromCategories.ts

@@ -35,8 +35,8 @@ export function fromCategories<Datum extends Record<string, unknown>>(
       : Array.isArray(item.color) && typeof item.color[0] === 'string' ? item.color[0]
         : `var(--vis-color${i})`;
   return {
-    colors: keys.map((k, i) => colorOf(categories[k], i)),
-    legendItems: keys.map((k, i) => ({ ...categories[k], color: colorOf(categories[k], i) })),
+    colors: keys.map((k, i) => colorOf(categories[k]!, i)),
+    legendItems: keys.map((k, i) => ({ ...categories[k]!, color: colorOf(categories[k]!, i) })),
     yAccessors: keys.map((k) => (d: Datum) => d[k] as number | null | undefined),
     xAccessor: xKey ? (d) => d[xKey] as number : (_d, i) => i,
   };

package/src/resolveVar.ts

@@ -16,6 +16,6 @@
 /** The computed value of a `var(--x)` string. Non-var strings pass through untouched. */
 export function resolveVar(value: string, context: Element = document.documentElement): string {
   if (typeof window === 'undefined' || !value.startsWith('var(--')) return value;
-  const name = value.slice(4, -1).split(',')[0].trim();
+  const name = value.slice(4, -1).split(',')[0]!.trim();
   return getComputedStyle(context).getPropertyValue(name).trim() || value;
 }

package/src/useCellScale.ts

@@ -118,9 +118,9 @@ export function useCellScale<D>(options: CellScaleOptions<D>) {
       const stops = swatches.value;
       // A flat domain has no gradient to express — everything sits at the top stop rather than
       // dividing by zero.
-      if (hi <= lo) return stops[stops.length - 1];
+      if (hi <= lo) return stops[stops.length - 1]!;
       const t = Math.min(1, Math.max(0, (v - lo) / (hi - lo)));
-      return stops[Math.min(stops.length - 1, Math.floor(t * stops.length))];
+      return stops[Math.min(stops.length - 1, Math.floor(t * stops.length))]!;
     }
     const states = unref(options.states) ?? {};
     const key = options.state!(d as D) as string;