@fusion.dev/helix-headless 0.181.0 → 0.181.1

package/custom-elements.json

@@ -6973,9 +6973,13 @@
               "name": "band"
             },
             {
-              "description": "One column.",
+              "description": "One column. Under `stacked`, one segment of a category's column.",
               "name": "bar"
             },
+            {
+              "description": "Under `stacked`, the segment at a column's far end: the last positive segment above zero and the last negative one below it. Its `data-end` is `positive` or `negative`. A blank or a zero segment is never the end. Set together with `bar`.",
+              "name": "bar-end"
+            },
             {
               "description": "The far stop of a bar's gradient, where one is used.",
               "name": "bar-wash-end"
@@ -7364,7 +7368,7 @@
                 {
                   "name": "bar",
                   "type": {
-                    "text": "(\n      value: number,\n      index: number,\n      depth: number,\n      tone: number,\n      scale: (value: number) => number,\n      from?: number,\n    ) => TemplateResult"
+                    "text": "(\n      value: number,\n      index: number,\n      depth: number,\n      tone: number,\n      scale: (value: number) => number,\n      from?: number,\n      end?: StackEnd,\n    ) => TemplateResult"
                   }
                 }
               ],
@@ -8510,6 +8514,24 @@
           ],
           "description": "Each column's span in one category, in the order given: a positive reading\nstacks up from zero on the positives before it, and a negative one down\nfrom zero on the negatives before it, so neither hides the other. A blank\nhas no span."
         },
+        {
+          "kind": "function",
+          "name": "stackFarEnds",
+          "return": {
+            "type": {
+              "text": "(StackEnd | undefined)[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "values",
+              "type": {
+                "text": "readonly (number | undefined)[]"
+              }
+            }
+          ],
+          "description": "The segments at a stack's two far ends, in the order given: the last\npositive reading is the end of the stack above zero, and the last negative\nreading is the end of the stack below it. A blank or a zero has no length,\nso it is never an end. Every other segment is `undefined`."
+        },
         {
           "kind": "function",
           "name": "stackEnds",
@@ -8568,6 +8590,14 @@
             "module": "src/bar-chart/stack.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "stackFarEnds",
+          "declaration": {
+            "name": "stackFarEnds",
+            "module": "src/bar-chart/stack.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "stackEnds",
@@ -200045,6 +200075,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.181.0"
+    "version": "0.181.1"
   }
 }

package/dist/bar-chart/root/bar-chart-root.d.ts

@@ -72,7 +72,8 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  *
  * @csspart axis - The numbers of one scale: the primary under `value-axis`, and both when `secondary` splits the chart into two scales.
  * @csspart band - The category band under the pointer.
- * @csspart bar - One column.
+ * @csspart bar - One column. Under `stacked`, one segment of a category's column.
+ * @csspart bar-end - Under `stacked`, the segment at a column's far end: the last positive segment above zero and the last negative one below it. Its `data-end` is `positive` or `negative`. A blank or a zero segment is never the end. Set together with `bar`.
  * @csspart bar-wash-end - The far stop of a bar's gradient, where one is used.
  * @csspart bar-wash-start - The stop of a bar's gradient at its base.
  * @csspart baseline - The line the columns stand on.

package/dist/bar-chart/root/bar-chart-root.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, MixinChartStatus, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, seriesNames, ticks, unbroken, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-import { stackEnds, stackedReadings, stackSpans } from '../stack.js';
+import { stackEnds, stackedReadings, stackFarEnds, stackSpans } from '../stack.js';
 import '../../tooltip/index.js';
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
@@ -112,7 +112,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
         const stride = (slot * 0.72) / Math.max(abreast, 1);
         const gap = abreast > 1 ? stride * 0.08 : 0;
         const thickness = stride - gap;
-        const bar = (value, index, depth, tone, scale, from) => {
+        const bar = (value, index, depth, tone, scale, from, end) => {
             const at = scale(value);
             const base = from === undefined ? floor : scale(from);
             const along = Math.min(base, at);
@@ -120,19 +120,21 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
             const across = index * slot + slot * 0.14 + depth * stride + gap / 2;
             return sideways
                 ? svg `<rect
+            data-end=${end ?? nothing}
             data-series=${seriesIndex(tone)}
             height=${thickness}
             style="--chart-series: var(--chart-series-${seriesIndex(tone)}); --chart-bar-wash: url(#helix-bar-wash-${seriesIndex(tone)})"
-            part="bar"
+            part="bar${end ? ' bar-end' : ''}"
             width=${size}
             x=${along}
             y=${across}
           />`
                 : svg `<rect
+            data-end=${end ?? nothing}
             data-series=${seriesIndex(tone)}
             height=${size}
             style="--chart-series: var(--chart-series-${seriesIndex(tone)}); --chart-bar-wash: url(#helix-bar-wash-${seriesIndex(tone)})"
-            part="bar"
+            part="bar${end ? ' bar-end' : ''}"
             width=${thickness}
             x=${across}
             y=${along}
@@ -196,10 +198,12 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
         const scales = [...new Set(columns.map(({ one }) => against(one)))];
         return scales.flatMap((scale) => {
             const mine = columns.filter(({ one }) => against(one) === scale);
-            const spans = stackSpans(mine.map(({ slots }) => slots[index]?.value));
+            const values = mine.map(({ slots }) => slots[index]?.value);
+            const spans = stackSpans(values);
+            const ends = stackFarEnds(values);
             return mine.flatMap(({ tone }, place) => {
                 const span = spans[place];
-                return span === undefined ? [] : [bar(span[1], index, 0, tone, scale, span[0])];
+                return span === undefined ? [] : [bar(span[1], index, 0, tone, scale, span[0], ends[place])];
             });
         });
     }

package/dist/bar-chart/stack.d.ts

@@ -8,6 +8,15 @@ export type Span = readonly [from: number, to: number];
  * has no span.
  */
 export declare const stackSpans: (values: readonly (number | undefined)[]) => (Span | undefined)[];
+/** Which way a stack's end segment grows from zero. */
+export type StackEnd = 'positive' | 'negative';
+/**
+ * The segments at a stack's two far ends, in the order given: the last
+ * positive reading is the end of the stack above zero, and the last negative
+ * reading is the end of the stack below it. A blank or a zero has no length,
+ * so it is never an end. Every other segment is `undefined`.
+ */
+export declare const stackFarEnds: (values: readonly (number | undefined)[]) => (StackEnd | undefined)[];
 /**
  * Every end a stack reaches across the categories, which is what its scale
  * has to hold: the top of each stack of positives and the foot of each stack

package/dist/bar-chart/stack.js

@@ -17,6 +17,11 @@ export const stackSpans = (values) => {
         return [from, to];
     });
 };
+export const stackFarEnds = (values) => {
+    const up = values.findLastIndex((value) => value !== undefined && value > 0);
+    const down = values.findLastIndex((value) => value !== undefined && value < 0);
+    return values.map((_, at) => (at === up ? 'positive' : at === down ? 'negative' : undefined));
+};
 export const stackEnds = (categories) => categories.flatMap((values) => stackSpans(values).flatMap((span) => (span === undefined ? [] : [span[1]])));
 export const stackedReadings = (group, count, lined) => {
     const slots = group.filter((one) => !lined(one)).map((one) => byRow(one, count));