@mstone6969/graph 0.0.0-stage → 0.1.0

package/dist/charts/hierarchy/hierarchyEnums.js

@@ -0,0 +1,226 @@
+// src/charts/hierarchy/hierarchyEnums.ts
+/** Order of siblings inside every layout. */
+var HierarchySort = /* @__PURE__ */ function(HierarchySort) {
+	HierarchySort["ValueDescending"] = "value-descending";
+	HierarchySort["ValueAscending"] = "value-ascending";
+	HierarchySort["Name"] = "name";
+	HierarchySort["Input"] = "input";
+	return HierarchySort;
+}({});
+/** What size encodes: the value field, or how many leaves a subtree holds. */
+var HierarchyMeasure = /* @__PURE__ */ function(HierarchyMeasure) {
+	HierarchyMeasure["Value"] = "value";
+	HierarchyMeasure["LeafCount"] = "leaf-count";
+	return HierarchyMeasure;
+}({});
+/** Colour job of a node: identity of its top-level branch, its depth, or its magnitude. */
+var HierarchyColor = /* @__PURE__ */ function(HierarchyColor) {
+	HierarchyColor["Branch"] = "branch";
+	HierarchyColor["Depth"] = "depth";
+	HierarchyColor["Value"] = "value";
+	return HierarchyColor;
+}({});
+/** Where the root sits and which way the tree grows. */
+var TreeDirection = /* @__PURE__ */ function(TreeDirection) {
+	TreeDirection["LeftRight"] = "left-right";
+	TreeDirection["RightLeft"] = "right-left";
+	TreeDirection["TopDown"] = "top-down";
+	TreeDirection["BottomUp"] = "bottom-up";
+	return TreeDirection;
+}({});
+var TreeLinkShape = /* @__PURE__ */ function(TreeLinkShape) {
+	TreeLinkShape["Bump"] = "bump";
+	TreeLinkShape["Elbow"] = "elbow";
+	TreeLinkShape["Straight"] = "straight";
+	return TreeLinkShape;
+}({});
+var TreeNodeMark = /* @__PURE__ */ function(TreeNodeMark) {
+	TreeNodeMark["Dot"] = "dot";
+	TreeNodeMark["Area"] = "area";
+	TreeNodeMark["None"] = "none";
+	return TreeNodeMark;
+}({});
+/** Angular or linear gap policy between neighbouring subtrees. */
+var TreeSpacing = /* @__PURE__ */ function(TreeSpacing) {
+	TreeSpacing["Tidy"] = "tidy";
+	TreeSpacing["Uniform"] = "uniform";
+	TreeSpacing["Clustered"] = "clustered";
+	return TreeSpacing;
+}({});
+/** How much of the circle a polar hierarchy sweeps. */
+var PolarSweep = /* @__PURE__ */ function(PolarSweep) {
+	PolarSweep["Full"] = "full";
+	PolarSweep["ThreeQuarter"] = "three-quarter";
+	PolarSweep["Half"] = "half";
+	return PolarSweep;
+}({});
+var TreemapTile = /* @__PURE__ */ function(TreemapTile) {
+	TreemapTile["Squarify"] = "squarify";
+	TreemapTile["Binary"] = "binary";
+	TreemapTile["Dice"] = "dice";
+	TreemapTile["Slice"] = "slice";
+	TreemapTile["SliceDice"] = "slice-dice";
+	TreemapTile["Resquarify"] = "resquarify";
+	return TreemapTile;
+}({});
+var TreemapGrouping = /* @__PURE__ */ function(TreemapGrouping) {
+	TreemapGrouping["Nested"] = "nested";
+	TreemapGrouping["Flat"] = "flat";
+	TreemapGrouping["TopLevel"] = "top-level";
+	return TreemapGrouping;
+}({});
+var TreemapHeader = /* @__PURE__ */ function(TreemapHeader) {
+	TreemapHeader["Top"] = "top";
+	TreemapHeader["Left"] = "left";
+	TreemapHeader["None"] = "none";
+	return TreemapHeader;
+}({});
+var CirclePackLayout = /* @__PURE__ */ function(CirclePackLayout) {
+	CirclePackLayout["Nested"] = "nested";
+	CirclePackLayout["Bubble"] = "bubble";
+	CirclePackLayout["TopLevels"] = "top-levels";
+	return CirclePackLayout;
+}({});
+var SunburstRings = /* @__PURE__ */ function(SunburstRings) {
+	SunburstRings["Even"] = "even";
+	SunburstRings["EqualArea"] = "equal-area";
+	SunburstRings["Tapered"] = "tapered";
+	return SunburstRings;
+}({});
+var IcicleBands = /* @__PURE__ */ function(IcicleBands) {
+	IcicleBands["Even"] = "even";
+	IcicleBands["Tapered"] = "tapered";
+	return IcicleBands;
+}({});
+var FlameFlow = /* @__PURE__ */ function(FlameFlow) {
+	FlameFlow["Flame"] = "flame";
+	FlameFlow["Icicle"] = "icicle";
+	return FlameFlow;
+}({});
+/** First view of a zoomable chart. */
+var ZoomStart = /* @__PURE__ */ function(ZoomStart) {
+	ZoomStart["Root"] = "root";
+	ZoomStart["LargestBranch"] = "largest-branch";
+	return ZoomStart;
+}({});
+/** Leaf counts tie far too often for sibling order to be meaningful, so counting keeps only the default sort. */
+var countsKeepDefaultSort = ({ measure, sort }, first = "value-descending") => measure !== "leaf-count" || sort === first;
+var PartitionRibbon = /* @__PURE__ */ function(PartitionRibbon) {
+	PartitionRibbon["Curved"] = "curved";
+	PartitionRibbon["Straight"] = "straight";
+	PartitionRibbon["None"] = "none";
+	return PartitionRibbon;
+}({});
+var PartitionAlign = /* @__PURE__ */ function(PartitionAlign) {
+	PartitionAlign["Start"] = "start";
+	PartitionAlign["Center"] = "center";
+	return PartitionAlign;
+}({});
+var DendrogramTip = /* @__PURE__ */ function(DendrogramTip) {
+	DendrogramTip["None"] = "none";
+	DendrogramTip["Bars"] = "bars";
+	DendrogramTip["Heat"] = "heat";
+	return DendrogramTip;
+}({});
+var OrgCard = /* @__PURE__ */ function(OrgCard) {
+	OrgCard["Plain"] = "plain";
+	OrgCard["Metric"] = "metric";
+	OrgCard["Avatar"] = "avatar";
+	return OrgCard;
+}({});
+var IndentedBars = /* @__PURE__ */ function(IndentedBars) {
+	IndentedBars["Aligned"] = "aligned";
+	IndentedBars["Inline"] = "inline";
+	IndentedBars["None"] = "none";
+	return IndentedBars;
+}({});
+var BalloonSpread = /* @__PURE__ */ function(BalloonSpread) {
+	BalloonSpread["Orbit"] = "orbit";
+	BalloonSpread["Fan"] = "fan";
+	return BalloonSpread;
+}({});
+var BalloonAngles = /* @__PURE__ */ function(BalloonAngles) {
+	BalloonAngles["Weighted"] = "weighted";
+	BalloonAngles["Even"] = "even";
+	return BalloonAngles;
+}({});
+var PhyloLayout = /* @__PURE__ */ function(PhyloLayout) {
+	PhyloLayout["Rectangular"] = "rectangular";
+	PhyloLayout["Slanted"] = "slanted";
+	PhyloLayout["Circular"] = "circular";
+	PhyloLayout["Fan"] = "fan";
+	PhyloLayout["Unrooted"] = "unrooted";
+	return PhyloLayout;
+}({});
+/** Phylogram honours branch lengths; cladogram shows topology with tips aligned. */
+var PhyloBranches = /* @__PURE__ */ function(PhyloBranches) {
+	PhyloBranches["Phylogram"] = "phylogram";
+	PhyloBranches["Cladogram"] = "cladogram";
+	return PhyloBranches;
+}({});
+var PhyloLadder = /* @__PURE__ */ function(PhyloLadder) {
+	PhyloLadder["None"] = "none";
+	PhyloLadder["Up"] = "up";
+	PhyloLadder["Down"] = "down";
+	return PhyloLadder;
+}({});
+var DecompositionDrill = /* @__PURE__ */ function(DecompositionDrill) {
+	DecompositionDrill["Highest"] = "highest";
+	DecompositionDrill["Lowest"] = "lowest";
+	return DecompositionDrill;
+}({});
+var DecompositionScale = /* @__PURE__ */ function(DecompositionScale) {
+	DecompositionScale["Parent"] = "parent";
+	DecompositionScale["Total"] = "total";
+	return DecompositionScale;
+}({});
+var MindMapSides = /* @__PURE__ */ function(MindMapSides) {
+	MindMapSides["Both"] = "both";
+	MindMapSides["Right"] = "right";
+	return MindMapSides;
+}({});
+var MindMapNode = /* @__PURE__ */ function(MindMapNode) {
+	MindMapNode["Underline"] = "underline";
+	MindMapNode["Pill"] = "pill";
+	MindMapNode["Dot"] = "dot";
+	return MindMapNode;
+}({});
+var FishboneHead = /* @__PURE__ */ function(FishboneHead) {
+	FishboneHead["Right"] = "right";
+	FishboneHead["Left"] = "left";
+	return FishboneHead;
+}({});
+var FishboneRibs = /* @__PURE__ */ function(FishboneRibs) {
+	FishboneRibs["Alternate"] = "alternate";
+	FishboneRibs["Above"] = "above";
+	return FishboneRibs;
+}({});
+var SkylineHeight = /* @__PURE__ */ function(SkylineHeight) {
+	SkylineHeight["Value"] = "value";
+	SkylineHeight["Sqrt"] = "sqrt";
+	SkylineHeight["Depth"] = "depth";
+	return SkylineHeight;
+}({});
+var TowerProfile = /* @__PURE__ */ function(TowerProfile) {
+	TowerProfile["Stairs"] = "stairs";
+	TowerProfile["Dome"] = "dome";
+	TowerProfile["Value"] = "value";
+	return TowerProfile;
+}({});
+var ConeAxis = /* @__PURE__ */ function(ConeAxis) {
+	ConeAxis["Vertical"] = "vertical";
+	ConeAxis["Horizontal"] = "horizontal";
+	return ConeAxis;
+}({});
+var SpherePackStack = /* @__PURE__ */ function(SpherePackStack) {
+	SpherePackStack["Terraced"] = "terraced";
+	SpherePackStack["Floor"] = "floor";
+	return SpherePackStack;
+}({});
+var SpherePackShell = /* @__PURE__ */ function(SpherePackShell) {
+	SpherePackShell["Dome"] = "dome";
+	SpherePackShell["Disc"] = "disc";
+	SpherePackShell["None"] = "none";
+	return SpherePackShell;
+}({});
+export { BalloonAngles, BalloonSpread, CirclePackLayout, ConeAxis, DecompositionDrill, DecompositionScale, DendrogramTip, FishboneHead, FishboneRibs, FlameFlow, HierarchyColor, HierarchyMeasure, HierarchySort, IcicleBands, IndentedBars, MindMapNode, MindMapSides, OrgCard, PartitionAlign, PartitionRibbon, PhyloBranches, PhyloLadder, PhyloLayout, PolarSweep, SkylineHeight, SpherePackShell, SpherePackStack, SunburstRings, TowerProfile, TreeDirection, TreeLinkShape, TreeNodeMark, TreeSpacing, TreemapGrouping, TreemapHeader, TreemapTile, ZoomStart, countsKeepDefaultSort };

package/dist/charts/hierarchy/index.js

@@ -0,0 +1,62 @@
+import { BalloonAngles, BalloonSpread, CirclePackLayout, ConeAxis, DecompositionDrill, DecompositionScale, DendrogramTip, FishboneHead, FishboneRibs, FlameFlow, HierarchyColor, HierarchyMeasure, HierarchySort, IcicleBands, IndentedBars, MindMapNode, MindMapSides, OrgCard, PartitionAlign, PartitionRibbon, PhyloBranches, PhyloLadder, PhyloLayout, PolarSweep, SkylineHeight, SpherePackShell, SpherePackStack, SunburstRings, TowerProfile, TreeDirection, TreeLinkShape, TreeNodeMark, TreeSpacing, TreemapGrouping, TreemapHeader, TreemapTile, ZoomStart, countsKeepDefaultSort } from "./hierarchyEnums.js";
+import { TreeModel, treeFieldDefaults } from "./TreeModel.js";
+import { HierarchyChart } from "./HierarchyChart.js";
+import { AdjacencyChart } from "./AdjacencyChart.js";
+import { TreeSamples } from "./TreeSamples.js";
+import { PartitionChart } from "./PartitionChart.js";
+import { TreeNodeLinkChart } from "./TreeNodeLinkChart.js";
+import { CartesianTreeChart } from "./CartesianTreeChart.js";
+import { TidyTreeChart } from "./TidyTreeChart.js";
+import { DendrogramChart } from "./DendrogramChart.js";
+import { RadialTreeBase } from "./RadialTreeBase.js";
+import { RadialTreeChart } from "./RadialTreeChart.js";
+import { RadialDendrogram } from "./RadialDendrogram.js";
+import { IndentedTreeChart } from "./IndentedTreeChart.js";
+import { CollapsibleTree } from "./CollapsibleTree.js";
+import { OrgChart } from "./OrgChart.js";
+import { BalloonTree } from "./BalloonTree.js";
+import { PhylogeneticTree } from "./PhylogeneticTree.js";
+import { DecompositionTree } from "./DecompositionTree.js";
+import { MindMap } from "./MindMap.js";
+import { FishboneDiagram } from "./FishboneDiagram.js";
+import { Hierarchy3DChart } from "./Hierarchy3DChart.js";
+import { TreemapSkyline3D } from "./TreemapSkyline3D.js";
+import { SunburstTower3D } from "./SunburstTower3D.js";
+import { ConeTree3D } from "./ConeTree3D.js";
+import { SpherePack3D } from "./SpherePack3D.js";
+import { CirclePackChart } from "./CirclePackChart.js";
+import { ZoomAdjacencyChart } from "./ZoomAdjacencyChart.js";
+import { FlameGraph } from "./FlameGraph.js";
+import { IcicleChart } from "./IcicleChart.js";
+import { IcicleZoom } from "./IcicleZoom.js";
+import { NestedTreemap } from "./NestedTreemap.js";
+import { SunburstChart } from "./SunburstChart.js";
+import { TreemapChart } from "./TreemapChart.js";
+// src/charts/hierarchy/index.ts
+var hierarchyCatalog = [
+	TreemapChart,
+	NestedTreemap,
+	CirclePackChart,
+	SunburstChart,
+	IcicleChart,
+	FlameGraph,
+	IcicleZoom,
+	PartitionChart,
+	TidyTreeChart,
+	DendrogramChart,
+	RadialTreeChart,
+	RadialDendrogram,
+	IndentedTreeChart,
+	CollapsibleTree,
+	OrgChart,
+	BalloonTree,
+	PhylogeneticTree,
+	DecompositionTree,
+	MindMap,
+	FishboneDiagram,
+	TreemapSkyline3D,
+	SunburstTower3D,
+	ConeTree3D,
+	SpherePack3D
+];
+export { AdjacencyChart, BalloonAngles, BalloonSpread, BalloonTree, CartesianTreeChart, CirclePackChart, CirclePackLayout, CollapsibleTree, ConeAxis, ConeTree3D, DecompositionDrill, DecompositionScale, DecompositionTree, DendrogramChart, DendrogramTip, FishboneDiagram, FishboneHead, FishboneRibs, FlameFlow, FlameGraph, Hierarchy3DChart, HierarchyChart, HierarchyColor, HierarchyMeasure, HierarchySort, IcicleBands, IcicleChart, IcicleZoom, IndentedBars, IndentedTreeChart, MindMap, MindMapNode, MindMapSides, NestedTreemap, OrgCard, OrgChart, PartitionAlign, PartitionChart, PartitionRibbon, PhyloBranches, PhyloLadder, PhyloLayout, PhylogeneticTree, PolarSweep, RadialDendrogram, RadialTreeBase, RadialTreeChart, SkylineHeight, SpherePack3D, SpherePackShell, SpherePackStack, SunburstChart, SunburstRings, SunburstTower3D, TidyTreeChart, TowerProfile, TreeDirection, TreeLinkShape, TreeModel, TreeNodeLinkChart, TreeNodeMark, TreeSamples, TreeSpacing, TreemapChart, TreemapGrouping, TreemapHeader, TreemapSkyline3D, TreemapTile, ZoomAdjacencyChart, ZoomStart, countsKeepDefaultSort, hierarchyCatalog, treeFieldDefaults };

package/dist/charts/indicators/ActivityRings.js

@@ -0,0 +1,139 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { SampleData } from "../../data/SampleData.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { RingOverflow } from "./IndicatorEnums.js";
+// src/charts/indicators/ActivityRings.ts
+var TURN = 2 * Math.PI;
+/** Daily goals closing concentric rings, overlapping past 100% so overachievement stays visible. */
+var ActivityRings = class extends IndicatorChart {
+	static meta = {
+		id: "activity-rings",
+		name: "Activity rings",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Tracks a few daily goals as concentric rings that close at 100% and lap when a goal is exceeded.",
+		tags: [
+			"fitness",
+			"rings",
+			"goals",
+			"streak"
+		],
+		sample: (seed) => SampleData.categories(seed, 4, 3).map((row) => ({
+			...row,
+			target: 60
+		})),
+		variants: {
+			history: [false, true],
+			overflow: [RingOverflow.Wrap, RingOverflow.Clamp],
+			heads: [true, false],
+			density: [.82, .6]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			series: "series",
+			goal: 80,
+			overflow: RingOverflow.Wrap,
+			history: false,
+			heads: true,
+			density: .82
+		};
+	}
+	/** Value against its goal: 1 is a closed ring. */
+	laps(reading) {
+		const goal = reading.target ?? this.options.goal;
+		return goal > 0 ? Math.max(0, reading.value / goal) : 0;
+	}
+	drawReadings(ctx, readings) {
+		const { history, label } = this.options;
+		const groups = [...new Set(readings.map((r) => r.label))];
+		const seriesOf = (r) => String(r.row[this.options.series] ?? r.label);
+		const sets = groups.map((name) => readings.filter((r) => r.label === name));
+		if (!history) {
+			const latest = sets[sets.length - 1];
+			this.facets(ctx, latest ? [latest[0]] : [], 1.6, (cell) => this.single(cell, latest, seriesOf));
+			return;
+		}
+		const anchors = sets.map((set) => set[0]);
+		this.facets(ctx, anchors, .9, (cell, _, i) => {
+			const size = Math.min(cell.plot.width, cell.plot.height - 18);
+			this.rings(cell, sets[i], seriesOf, cell.plot.width / 2, size / 2, size / 2);
+			this.texts(cell, "name", [{
+				text: this.fit(String(sets[i][0].row[label] ?? ""), cell.plot.width),
+				x: cell.plot.width / 2,
+				y: cell.plot.height - 7
+			}]);
+		}, 52);
+	}
+	single(ctx, set, seriesOf) {
+		const { width, height } = ctx.plot;
+		const keyed = width > 280;
+		const radius = Math.min(height / 2, (keyed ? width * .55 : width) / 2);
+		const cx = keyed ? Math.max(radius, (width - 2 * radius - 116) / 2 + radius) : width / 2;
+		this.rings(ctx, set, seriesOf, cx, height / 2, radius);
+		const entries = keyed ? set.slice(0, 6) : [];
+		const x = cx + radius + 26, line = Math.min(46, height / Math.max(1, entries.length)), top = (height - line * entries.length) / 2;
+		const color = (d) => ctx.palette.color(seriesOf(d));
+		const bars = ctx.marks("bars", "rect", entries, (d) => d.id).attr("x", x).attr("y", (_, i) => top + i * line + 3).attr("width", 3).attr("height", line - 8).attr("rx", 1.5).attr("fill", color);
+		ctx.hover(bars, (d) => this.tooltip(d, color(d)));
+		this.texts(ctx, "key", entries.flatMap((d, i) => [{
+			key: `${d.id}n`,
+			text: this.fit(seriesOf(d), width - x - 10),
+			x: x + 10,
+			y: top + i * line + 10,
+			anchor: "start"
+		}, {
+			key: `${d.id}v`,
+			text: this.percent(this.laps(d)),
+			x: x + 10,
+			y: top + i * line + 25,
+			size: 15,
+			tone: "ink",
+			weight: 600,
+			anchor: "start",
+			count: [this.laps(d), (v) => this.percent(v)]
+		}]));
+	}
+	rings(ctx, set, seriesOf, cx, cy, radius) {
+		const { overflow, heads, density } = this.options;
+		const rings = set.slice(0, 6).map((reading, ring) => {
+			const raw = this.laps(reading);
+			return {
+				key: reading.id,
+				ring,
+				series: seriesOf(reading),
+				laps: overflow === RingOverflow.Clamp ? Math.min(1, raw) : Math.min(2, raw),
+				reading
+			};
+		});
+		const slot = radius * .82 / Math.max(1, rings.length);
+		const width = slot * density;
+		const outerOf = (d) => radius - 1 - d.ring * slot, innerOf = (d) => outerOf(d) - width;
+		const group = ctx.nest(`translate(${cx},${cy})`, "set");
+		const color = (d) => ctx.palette.color(d.series);
+		const tracks = ctx.marks("tracks", "path", rings, (d) => d.key, group.root).attr("fill", ctx.theme.grid).attr("d", (d) => this.ring(innerOf(d), outerOf(d), 0, TURN));
+		ctx.hover(tracks, (d) => this.tooltip(d.reading, color(d)));
+		const first = ctx.marks("laps", "path", rings, (d) => d.key, group.root).attr("fill", color);
+		this.sweep(first, (d) => Math.min(1, d.laps), (d, f) => this.ring(innerOf(d), outerOf(d), 0, f * TURN, f < 1 ? width / 2 : 0));
+		ctx.hover(first, (d) => ({
+			...this.tooltip(d.reading, color(d)),
+			title: d.series,
+			rows: [["Goal", this.percent(this.laps(d.reading))]]
+		}));
+		const over = rings.filter((d) => d.laps > 1);
+		const second = ctx.marks("overlaps", "path", over, (d) => d.key, group.root).attr("fill", color);
+		this.sweep(second, (d) => d.laps - 1, (d, f) => this.ring(innerOf(d), outerOf(d), 0, Math.max(.02, f) * TURN, 0));
+		ctx.hover(second, (d) => ({
+			...this.tooltip(d.reading, color(d)),
+			title: d.series,
+			rows: [["Goal", this.percent(this.laps(d.reading))]]
+		}));
+		const lead = ctx.marks("tips", "path", over, (d) => d.key, group.root).attr("fill", color).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("d", `M0 ${-width / 2} A${width / 2} ${width / 2} 0 0 1 0 ${width / 2}`);
+		ctx.set(lead, { transform: (d) => `rotate(${(d.laps - 1) * 360}) translate(0,${-(innerOf(d) + outerOf(d)) / 2})` }, { transform: (d) => `rotate(0) translate(0,${-(innerOf(d) + outerOf(d)) / 2})` });
+		const size = width * .3;
+		ctx.marks("heads", "path", heads && width >= 9 ? rings : [], (d) => d.key, group.root).attr("d", `M${-size * .6} ${-size} L${size * .6} 0 L${-size * .6} ${size}`).attr("fill", "none").attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-linejoin", "round").attr("stroke", (d) => ctx.palette.inkOn(color(d))).attr("transform", (d) => `translate(0,${-(innerOf(d) + outerOf(d)) / 2})`).attr("pointer-events", "none").raise();
+	}
+};
+export { ActivityRings };

package/dist/charts/indicators/BatteryChart.js

@@ -0,0 +1,136 @@
+import { ChartFamily, DataShape, Dimension, Orientation } from "../../core/enums.js";
+import { IndicatorChart } from "./IndicatorChart.js";
+import { BatteryRim } from "./IndicatorEnums.js";
+import { IndicatorSamples } from "./IndicatorSamples.js";
+import { range } from "d3";
+// src/charts/indicators/BatteryChart.ts
+/** Charge level as a battery, coloured by status with an icon beside the percentage. */
+var BatteryChart = class extends IndicatorChart {
+	static meta = {
+		id: "battery-level",
+		name: "Battery",
+		family: ChartFamily.Indicator,
+		dimension: Dimension.Two,
+		shape: DataShape.Table,
+		description: "Shows remaining capacity as battery charge, in cells or as a continuous level, with status named.",
+		tags: [
+			"charge",
+			"capacity",
+			"remaining",
+			"device"
+		],
+		sample: (seed) => IndicatorSamples.goals(seed, 4).map((row) => ({
+			...row,
+			target: null
+		})),
+		variants: {
+			orientation: [Orientation.Horizontal, Orientation.Vertical],
+			cells: [
+				0,
+				4,
+				5,
+				10
+			],
+			rim: [BatteryRim.Outline, BatteryRim.Solid],
+			terminal: [true, false],
+			charging: [false, true]
+		}
+	};
+	defaults() {
+		return {
+			...super.defaults(),
+			orientation: Orientation.Horizontal,
+			cells: 0,
+			rim: BatteryRim.Outline,
+			terminal: true,
+			charging: false
+		};
+	}
+	drawReadings(ctx, readings) {
+		const horizontal = this.options.orientation === Orientation.Horizontal;
+		this.facets(ctx, readings, horizontal ? 1.7 : .7, (cell, reading) => this.battery(cell, reading), 70);
+	}
+	battery(ctx, reading) {
+		const { orientation, cells, rim, terminal, charging } = this.options;
+		const horizontal = orientation === Orientation.Horizontal;
+		const { width, height } = ctx.plot;
+		const text = 48;
+		const nub = terminal ? 6 : 0;
+		const room = {
+			w: width - 4,
+			h: height - text
+		};
+		const w = horizontal ? Math.min(room.w - nub, room.h * 2.1) : Math.min(room.w, (room.h - nub) * .52);
+		const h = horizontal ? w / 2.1 : Math.min(room.h - nub, w / .52);
+		const x = (width - w - (horizontal ? nub : 0)) / 2, y = (room.h - h + (horizontal ? 0 : nub)) / 2;
+		const outline = rim === BatteryRim.Outline;
+		const status = this.status(reading);
+		const shell = ctx.marks("shell", "rect", [reading], (d) => d.id).attr("x", x + (outline ? 1 : 0)).attr("y", y + (outline ? 1 : 0)).attr("width", w - (outline ? 2 : 0)).attr("height", h - (outline ? 2 : 0)).attr("rx", 8).attr("fill", outline ? "none" : ctx.theme.grid).attr("stroke", outline ? ctx.theme.inkSecondary : "none").attr("stroke-width", 2);
+		ctx.hover(shell, (d) => this.tooltip(d, status.color));
+		ctx.marks("nub", "rect", terminal ? [reading] : [], (d) => d.id).attr("fill", outline ? ctx.theme.inkSecondary : ctx.theme.grid).attr("rx", 2).attr("x", horizontal ? x + w + 2 : x + w * .3).attr("y", horizontal ? y + h * .3 : y - 6).attr("width", horizontal ? 4 : w * .4).attr("height", horizontal ? h * .4 : 4);
+		const inset = 5, left = x + inset, top = y + inset, innerW = w - 10, innerH = h - 10;
+		const count = Math.max(1, cells);
+		const gap = cells ? 3 : 0;
+		const length = horizontal ? innerW : innerH;
+		const unit = (length - gap * (count - 1)) / count;
+		const lit = cells ? Math.ceil(reading.fraction * count - 1e-6) : 1;
+		const blocks = range(Math.min(count, lit)).map((i) => ({
+			i,
+			from: cells ? i * (unit + gap) : 0,
+			size: cells ? unit : reading.fraction * length
+		}));
+		const place = (d) => horizontal ? {
+			x: left + d.from,
+			y: top,
+			width: d.size,
+			height: innerH
+		} : {
+			x: left,
+			y: top + innerH - d.from - d.size,
+			width: innerW,
+			height: d.size
+		};
+		const levels = ctx.marks("levels", "rect", blocks, (d) => d.i).attr("fill", status.color).attr("rx", 4);
+		ctx.set(levels, {
+			x: (d) => place(d).x,
+			y: (d) => place(d).y,
+			width: (d) => place(d).width,
+			height: (d) => place(d).height
+		}, {
+			x: (d) => place(d).x,
+			y: horizontal ? (d) => place(d).y : top + innerH,
+			width: horizontal ? 0 : innerW,
+			height: horizontal ? innerH : 0
+		}, 40);
+		ctx.hover(levels, () => this.tooltip(reading, status.color));
+		const scale = Math.min(w, h) / 46;
+		const bolt = ctx.marks("bolt", "path", charging ? [reading] : [], (d) => d.id).attr("d", "M2 -14 L-9 3 H-1 L-3 14 L9 -3 H1 Z").attr("fill", ctx.theme.ink).attr("stroke", ctx.theme.surface).attr("stroke-width", 2).attr("paint-order", "stroke").attr("transform", `translate(${x + w / 2},${y + h / 2}) scale(${scale})`);
+		ctx.hover(bolt, (d) => this.tooltip(d, status.color));
+		const base = y + h + 15;
+		const percent = this.percent(reading.fraction);
+		const wide = this.textWidth(percent, 13) + 20;
+		this.chips(ctx, "status", [{
+			key: "status",
+			x: (width - wide) / 2,
+			y: base,
+			status,
+			size: 7
+		}]);
+		this.texts(ctx, "label", [{
+			key: "percent",
+			text: percent,
+			x: (width - wide) / 2 + 20,
+			y: base,
+			size: 13,
+			tone: "ink",
+			weight: 600,
+			anchor: "start"
+		}, {
+			key: "label",
+			text: this.fit(reading.label, width),
+			x: width / 2,
+			y: base + 17
+		}]);
+	}
+};
+export { BatteryChart };