@fusion.dev/helix-plot 0.218.0 → 0.220.0

package/dist/connect-plot/connect-plot.d.ts

@@ -45,13 +45,16 @@ export interface PlotColors {
      * and its numbers and names are drawn, which the chart's `no-box` turns off.
      * `contours` and `drops` are whether a surface's contour lines and a
      * scatter's lines down to the floor are drawn, as its `contours` and
-     * `drop-lines` ask.
+     * `drop-lines` ask. `muted` is whether the marks are drawn in the neutral
+     * ink, all but the ones a cell gives a tone, as a bar chart's
+     * `emphasis="muted"` asks; `emphasis` then reads `solid`.
      */
     look: {
         box: boolean;
         contours: boolean;
         drops: boolean;
         emphasis: 'outlined' | 'solid' | 'subtle';
+        muted: boolean;
         through: number;
     };
     /** The page a faded fill moves toward: `background`. */

package/dist/connect-plot/connect-plot.js

@@ -43,6 +43,7 @@ export const plotColorsFrom = (chart, groups, extra = {}) => {
             contours: chart.hasAttribute('contours'),
             drops: chart.hasAttribute('drop-lines'),
             emphasis: emphasis === 'outlined' || emphasis === 'subtle' ? emphasis : 'solid',
+            muted: emphasis === 'muted',
             through: material === 'glass' ? 0.62 * scale : material === 'frosted' ? 0.88 * scale : 1,
         };
         const colors = [];

package/dist/connect-spatial-bar-chart/connect-spatial-bar-chart.d.ts

@@ -3,9 +3,16 @@ import { type Axes, type PlotConnection, type PlotDriver } from '../connect-plot
 export interface BarCell {
     across: number;
     column: number;
+    /** Its series, which colors it. */
     depth: number;
+    /** Where its block starts: zero, or under `stacked` the blocks below it. */
+    from: number;
     label: string;
+    /** The row of the grid in depth it stands in: its series, or the one row of a stacked chart. */
+    lane: number;
     row: number;
+    /** The tone its cell names, which colors its own bar. */
+    tone?: string | undefined;
     value?: number | undefined;
 }
 /**
@@ -18,8 +25,12 @@ export interface BarField {
     axes: Axes;
     categories: readonly string[];
     cells: readonly BarCell[];
+    /** How many rows of bars stand in depth: one a series, or one in all when stacked. */
+    lanes: number;
     readings: number;
     series: readonly string[];
+    /** Whether a category's series stand in one column, each on the ones before it. */
+    stacked: boolean;
 }
 /** A renderer for a Spatial Bar Chart: `focus` and `onPress` take a bar's index in `field.cells`. */
 export type SpatialBarChartDriver = PlotDriver<BarField>;
@@ -33,7 +44,8 @@ export type SpatialBarChartConnection = PlotConnection;
  * one of your own. The connection draws the chart's bars in the driver, each
  * series in a series color, marks the bar the keys rest on, turns the view
  * for Shift with an arrow, and puts a bar pressed in the drawing on the
- * chart's reading. Once the driver has drawn, the chart hides its own SVG
- * drawing; `disconnect()` shows it again.
+ * chart's reading. A bar whose cell names a tone takes the page's
+ * `--spatial-bar-chart-tone-*` color. Once the driver has drawn, the chart
+ * hides its own SVG drawing; `disconnect()` shows it again.
  */
 export declare const connectSpatialBarChart: (frame: HTMLElement, driver: SpatialBarChartDriver) => SpatialBarChartConnection;

package/dist/connect-spatial-bar-chart/connect-spatial-bar-chart.js

@@ -1,5 +1,9 @@
 import { connectPlot, } from '../connect-plot/connect-plot.js';
 export const connectSpatialBarChart = (frame, driver) => connectPlot(frame, driver, {
+    extraOf: (field) => Object.fromEntries([...new Set(field.cells.flatMap((cell) => (cell.tone ? [cell.tone] : [])))].map((tone) => [
+        `tone-${tone}`,
+        `var(--spatial-bar-chart-tone-${tone}, var(--helix-color-primary))`,
+    ])),
     groupsOf: (field) => field.series.length,
     name: 'connectSpatialBarChart',
     readings: (field) => field.readings,

package/dist/three/bar-driver.d.ts

@@ -21,9 +21,12 @@ export interface ThreeBarDriverOptions {
  * connectSpatialBarChart(chart, threeBarDriver(chart.querySelector('div')))
  * ```
  *
- * **Each bar is a block from zero to its value**, on a grid of categories
- * across and series in depth, in a box with a grid on its floor and two of
- * its walls, lit from above. Each series takes a series color from the theme.
+ * **Each bar is a block from zero to its value**, or under `stacked` from
+ * the blocks below it, on a grid of categories across and series in depth, in a box with a grid on its floor and two of
+ * its walls, lit from above. Each series takes a series color from the theme,
+ * and a bar whose cell names a tone takes that tone's. Under the chart's
+ * `emphasis="muted"`, every other bar is the neutral ink. The chart's own
+ * drawing alone draws a row, the glow, a toned bar's value, and the growth.
  *
  * **Dragging turns the box, and the wheel and a pinch bring it nearer.**
  * Shift with an arrow on the chart turns it a step. It never turns by itself.

package/dist/three/bar-driver.js

@@ -42,31 +42,36 @@ export const threeBarDriver = (container, options = {}) => {
         draw: (next, colors, font) => {
             field = next;
             const [ex, ey, ez] = next.axes.extent ?? [1, 1, 1];
-            const spacing = Math.min((2 * HALF * ex) / Math.max(next.categories.length, 1), (2 * HALF * ez) / Math.max(next.series.length, 1));
+            const spacing = Math.min((2 * HALF * ex) / Math.max(next.categories.length, 1), (2 * HALF * ez) / Math.max(next.lanes, 1));
             const width = spacing * FOOTPRINT;
-            const zero = inBox(next.axes.y, 0) * ey;
             const page = new Color(colors.page);
-            const { emphasis, through } = colors.look;
+            const { emphasis, muted, through } = colors.look;
             const solids = [];
             const lines = [];
             drawnCells = [];
             tops = new Map();
             next.cells.forEach((cell, index) => {
-                if (cell.value === undefined) {
+                if (cell.value === undefined || (next.stacked && cell.value === 0)) {
                     return;
                 }
-                const tone = new Color(colors.groups[cell.depth % colors.groups.length] ?? colors.ink);
+                const toned = cell.tone ? colors.extra[`tone-${cell.tone}`] : undefined;
+                const tone = toned
+                    ? new Color(toned)
+                    : muted
+                        ? new Color(colors.ground).lerp(new Color(colors.ink), 0.3)
+                        : new Color(colors.groups[cell.depth % colors.groups.length] ?? colors.ink);
                 const color = emphasis === 'outlined' ? tone.clone().lerp(page, 0.4) : tone;
-                const top = inBox(next.axes.y, cell.value) * ey;
-                const tall = Math.max(Math.abs(top - zero), 1e-3);
+                const start = inBox(next.axes.y, cell.from) * ey;
+                const top = inBox(next.axes.y, cell.from + cell.value) * ey;
+                const tall = Math.max(Math.abs(top - start), 1e-3);
                 const x = inBox(next.axes.x, cell.across) * ex;
-                const z = inBox(next.axes.z, cell.depth) * ez;
+                const z = inBox(next.axes.z, cell.lane) * ez;
                 const box = new BoxGeometry(width, tall, width);
-                box.translate(x, Math.min(top, zero) + tall / 2, z);
+                box.translate(x, Math.min(top, start) + tall / 2, z);
                 solids.push(painted(box, color));
                 lines.push(painted(new EdgesGeometry(box), emphasis === 'solid' ? edgeOf(color) : tone));
                 drawnCells.push(index);
-                tops.set(index, new Vector3(x, Math.max(top, zero), z));
+                tops.set(index, new Vector3(x, Math.max(top, start), z));
             });
             lookThrough(barMaterial, (emphasis === 'subtle' ? 0.2 : 1) * through);
             lookThrough(edgeMaterial, through);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-plot",
   "description": "Connects the Helix spatial charts to three.js, which draws them in three dimensions: Spatial Bar Chart, Spatial Heatmap, Spatial Ribbon Chart, Spatial Scatter Chart, Spatial Surface Chart, and Spatial Treemap.",
-  "version": "0.218.0",
+  "version": "0.220.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -36,11 +36,11 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.218.0"
+    "@fusion.dev/helix-core": "0.220.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-headless": "0.218.0",
-    "@fusion.dev/helix-testing": "0.218.0",
+    "@fusion.dev/helix-headless": "0.220.0",
+    "@fusion.dev/helix-testing": "0.220.0",
     "@types/bun": "^1.4.3",
     "@types/three": "^0.186.0",
     "three": "^0.186.1"