@humanforest/charts 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanforest/charts",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "files": [
     "src"
@@ -24,7 +24,7 @@
     "vue": "^3.5.22"
   },
   "dependencies": {
-    "@humanforest/tokens": "^0.3.4"
+    "@humanforest/tokens": "^0.3.5"
   },
   "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>