@fusion.dev/helix-headless 0.181.1 → 0.182.0

package/custom-elements.json

@@ -6947,7 +6947,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Every bar is measured from zero, and no property changes the baseline,\nbecause a bar's length is its value. To show the differences between values,\nuse a line chart.\n\nThe labels are HTML beside the drawing. An `<svg>` that fills its box scales\nthe text inside it: the same `font-size` renders at 10px in a narrow chart\nand 43px in a wide one, and SVG has no setting that keeps text at one size\nthe way `vector-effect` does for strokes.\n\nThe table is the accessible representation, and the drawing is hidden from\nscreen readers, so they get the numbers themselves. The `summary` part names\nthe chart, from `label` or the table's caption, and gives each series' highest\nreading.\n\n**The plot is read by key.** It takes focus, named by `label` or the caption.\nThe arrows along the categories move from one to the next, which is left and\nright for columns and up and down for `orientation=\"horizontal\"`. Home and\nEnd go to the first and the last, and the other pair of arrows moves among\nthe series of a category. The tooltip follows, the `live` part says the\nreading in words, and Escape puts the tooltip away.\n\nThe component writes the custom properties below with numbers it computes,\nand the stylesheet that draws the chart reads them. Do not set them yourself.\n\n**A tap shows the reading under it**, and keeps it until a tap lands\nelsewhere. `helix-reading-change` says each move of the reading, by pointer,\ntap or key, and `helix-reading-press` says a reading was clicked, tapped, or\npressed with Enter or Space, for a page that opens what a reading stands for.\n\n**`data` takes the readings as data** where the page has no table to point\n`for` at, in a table's shape: the column headings, then one row per reading\nwith its label first. A table is still the better source where the page can\nshow one, since it reads before any script runs.\n\n**A chart with nothing to draw says so.** A table with no readings shows\n`empty-text`, \"No readings\", in the plot, and `loading` shows `loading-text`\nthere until readings arrive. The `empty` and `loading` slots take markup in\ntheir place, such as a link to add the first reading.\n\n**Keyboard.** The plot is one tab stop.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the plot and shows the first reading. |\n| Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. |\n| Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. |\n| Down, Up under `orientation=\"horizontal\"` | Moves to the next or the previous reading, and Right and Left move among the series. |\n| Home, End | Moves to the first or the last reading. |\n| Page Down, Page Up | Moves a tenth of the readings on or back. |\n| Enter, Space | Presses the reading shown, which sends `helix-reading-press`. |\n| Escape | Puts the reading and its tooltip away. |",
+          "description": "Every bar is measured from zero, and no property changes the baseline,\nbecause a bar's length is its value. To show the differences between values,\nuse a line chart.\n\nThe labels are HTML beside the drawing. An `<svg>` that fills its box scales\nthe text inside it: the same `font-size` renders at 10px in a narrow chart\nand 43px in a wide one, and SVG has no setting that keeps text at one size\nthe way `vector-effect` does for strokes.\n\nThe table is the accessible representation, and the drawing is hidden from\nscreen readers, so they get the numbers themselves. The `summary` part names\nthe chart, from `label` or the table's caption, and gives each series' highest\nreading.\n\n**The plot is read by key.** It takes focus, named by `label` or the caption.\nThe arrows along the categories move from one to the next, which is left and\nright for columns and up and down for `orientation=\"horizontal\"`. Home and\nEnd go to the first and the last, and the other pair of arrows moves among\nthe series of a category. The tooltip follows, the `live` part says the\nreading in words, and Escape puts the tooltip away.\n\nThe component writes the custom properties below with numbers it computes,\nand the stylesheet that draws the chart reads them. Do not set them yourself.\n\n**A tap shows the reading under it**, and keeps it until a tap lands\nelsewhere. `helix-reading-change` says each move of the reading, by pointer,\ntap or key, and `helix-reading-press` says a reading was clicked, tapped, or\npressed with Enter or Space, for a page that opens what a reading stands for.\n\n**A cell's `data-tone` colors its own bar**, such as `data-tone=\"primary\"`\non the one reading a chart is about, so one column of numbers can single\na bar out without a second column to color it. Without one, a bar takes\nits series' color.\n\n**`data` takes the readings as data** where the page has no table to point\n`for` at, in a table's shape: the column headings, then one row per reading\nwith its label first. A table is still the better source where the page can\nshow one, since it reads before any script runs.\n\n**A chart with nothing to draw says so.** A table with no readings shows\n`empty-text`, \"No readings\", in the plot, and `loading` shows `loading-text`\nthere until readings arrive. The `empty` and `loading` slots take markup in\ntheir place, such as a link to add the first reading.\n\n**Keyboard.** The plot is one tab stop.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the plot and shows the first reading. |\n| Right, Left | Moves to the next or the previous reading. On a right-to-left page, Left moves to the next. |\n| Down, Up | Moves among the series of the reading. With one series, moves to the next or the previous reading. |\n| Down, Up under `orientation=\"horizontal\"` | Moves to the next or the previous reading, and Right and Left move among the series. |\n| Home, End | Moves to the first or the last reading. |\n| Page Down, Page Up | Moves a tenth of the readings on or back. |\n| Enter, Space | Presses the reading shown, which sends `helix-reading-press`. |\n| Escape | Puts the reading and its tooltip away. |",
           "name": "HelixHeadlessBarChart",
           "cssProperties": [
             {
@@ -6958,6 +6958,34 @@
               "description": "The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to.",
               "name": "--bar-chart-secondary"
             },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"accent\"`.",
+              "name": "--bar-chart-tone-accent"
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"danger\"`.",
+              "name": "--bar-chart-tone-danger"
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"info\"`.",
+              "name": "--bar-chart-tone-info"
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"muted\"`.",
+              "name": "--bar-chart-tone-muted"
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"primary\"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.",
+              "name": "--bar-chart-tone-primary"
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"success\"`.",
+              "name": "--bar-chart-tone-success"
+            },
+            {
+              "description": "The color of a bar whose cell says `data-tone=\"warning\"`.",
+              "name": "--bar-chart-tone-warning"
+            },
             {
               "description": "The gradient for a bar, named per bar so the styled tier can use it as the `fill`. It is always drawn, and used only when `wash=\"gradient\"` is set.",
               "name": "--chart-bar-wash"
@@ -7368,7 +7396,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      end?: StackEnd,\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      named?: string,\n    ) => TemplateResult"
                   }
                 }
               ],
@@ -200075,6 +200103,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.181.1"
+    "version": "0.182.0"
   }
 }

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

@@ -35,6 +35,11 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * tap or key, and `helix-reading-press` says a reading was clicked, tapped, or
  * pressed with Enter or Space, for a page that opens what a reading stands for.
  *
+ * **A cell's `data-tone` colors its own bar**, such as `data-tone="primary"`
+ * on the one reading a chart is about, so one column of numbers can single
+ * a bar out without a second column to color it. Without one, a bar takes
+ * its series' color.
+ *
  * **`data` takes the readings as data** where the page has no table to point
  * `for` at, in a table's shape: the column headings, then one row per reading
  * with its label first. A table is still the better source where the page can
@@ -111,6 +116,13 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  *
  * @cssproperty --bar-chart-axis - The width of an axis, in `ch`, set from the widest number on it. The chart sets it on the axis itself, and only when the categories run along the bottom. In a horizontal chart the axis is a row, one line high.
  * @cssproperty --bar-chart-secondary - The color of the secondary axis, when one series is on it. The chart sets it from that series' `--chart-series-*` property, so the axis is drawn in whatever color that property resolves to.
+ * @cssproperty --bar-chart-tone-accent - The color of a bar whose cell says `data-tone="accent"`.
+ * @cssproperty --bar-chart-tone-danger - The color of a bar whose cell says `data-tone="danger"`.
+ * @cssproperty --bar-chart-tone-info - The color of a bar whose cell says `data-tone="info"`.
+ * @cssproperty --bar-chart-tone-muted - The color of a bar whose cell says `data-tone="muted"`.
+ * @cssproperty --bar-chart-tone-primary - The color of a bar whose cell says `data-tone="primary"`. A tone with no property of its own falls back to the bar's series color, and the same holds for a name you define.
+ * @cssproperty --bar-chart-tone-success - The color of a bar whose cell says `data-tone="success"`.
+ * @cssproperty --bar-chart-tone-warning - The color of a bar whose cell says `data-tone="warning"`.
  * @cssproperty --chart-bar-wash - The gradient for a bar, named per bar so the styled
  *   tier can use it as the `fill`. It is always drawn, and used only when
  *   `wash="gradient"` is set.

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

@@ -9,6 +9,7 @@ import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { stackEnds, stackedReadings, stackFarEnds, stackSpans } from '../stack.js';
 import '../../tooltip/index.js';
+const toned = (tone) => tone && /^[a-z][a-z0-9-]*$/.test(tone) ? tone : undefined;
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
         super(...arguments);
@@ -112,18 +113,23 @@ 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, end) => {
+        const bar = (value, index, depth, tone, scale, from, end, named) => {
             const at = scale(value);
             const base = from === undefined ? floor : scale(from);
             const along = Math.min(base, at);
             const size = Math.abs(base - at);
             const across = index * slot + slot * 0.14 + depth * stride + gap / 2;
+            const ink = toned(named);
+            const paint = ink
+                ? `--chart-series: var(--bar-chart-tone-${ink}, var(--chart-series-${seriesIndex(tone)})); --chart-bar-wash: url(#helix-bar-wash-tone-${ink})`
+                : `--chart-series: var(--chart-series-${seriesIndex(tone)}); --chart-bar-wash: url(#helix-bar-wash-${seriesIndex(tone)})`;
             return sideways
                 ? svg `<rect
             data-end=${end ?? nothing}
             data-series=${seriesIndex(tone)}
+            data-tone=${ink ?? nothing}
             height=${thickness}
-            style="--chart-series: var(--chart-series-${seriesIndex(tone)}); --chart-bar-wash: url(#helix-bar-wash-${seriesIndex(tone)})"
+            style=${paint}
             part="bar${end ? ' bar-end' : ''}"
             width=${size}
             x=${along}
@@ -132,8 +138,9 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
                 : svg `<rect
             data-end=${end ?? nothing}
             data-series=${seriesIndex(tone)}
+            data-tone=${ink ?? nothing}
             height=${size}
-            style="--chart-series: var(--chart-series-${seriesIndex(tone)}); --chart-bar-wash: url(#helix-bar-wash-${seriesIndex(tone)})"
+            style=${paint}
             part="bar${end ? ' bar-end' : ''}"
             width=${thickness}
             x=${across}
@@ -168,6 +175,19 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
                 <stop offset="0" part="bar-wash-start" />
                 <stop offset="1" part="bar-wash-end" />
               </linearGradient>`)}
+            ${[...new Set(series.flatMap((one) => one.points.map((point) => toned(point.tone))))]
+            .filter((ink) => ink !== undefined)
+            .map((ink) => svg `<linearGradient
+                id="helix-bar-wash-tone-${ink}"
+                style="--chart-series: var(--bar-chart-tone-${ink}, var(--chart-series-1))"
+                x1="0"
+                x2=${sideways ? '1' : '0'}
+                y1="0"
+                y2=${sideways ? '0' : '1'}
+              >
+                <stop offset="0" part="bar-wash-start" />
+                <stop offset="1" part="bar-wash-end" />
+              </linearGradient>`)}
           </defs>`}
         ${this.renderGridlines(y, domain, sideways, categories.length)}
         ${sideways
@@ -184,7 +204,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
                 const point = slots[index];
                 return point === undefined
                     ? nothing
-                    : bar(point.value, index, depth, tone, against(one));
+                    : bar(point.value, index, depth, tone, against(one), undefined, undefined, point.tone);
             })}
             </g>`)}
         ${series.map((one) => lined.has(seriesKey(one.name)) && this.showsSeries(one.name)
@@ -201,9 +221,11 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
             const values = mine.map(({ slots }) => slots[index]?.value);
             const spans = stackSpans(values);
             const ends = stackFarEnds(values);
-            return mine.flatMap(({ tone }, place) => {
+            return mine.flatMap(({ slots, tone }, place) => {
                 const span = spans[place];
-                return span === undefined ? [] : [bar(span[1], index, 0, tone, scale, span[0], ends[place])];
+                return span === undefined
+                    ? []
+                    : [bar(span[1], index, 0, tone, scale, span[0], ends[place], slots[index]?.tone)];
             });
         });
     }