janela 0.10.0 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eac851a1f9a4eda7cac89f9ceced6664b28b26a5c889b1939147a0f5a4ed5688
-  data.tar.gz: 5425fbb11f1585892bbc4cff9b87ddbf9f6c08a2398ec87d5cd9402e8d624d51
+  metadata.gz: 2079a652eafc71edc8c31227d2c09ef8e795a38da68b8ec6c18de89732a54f97
+  data.tar.gz: b024b3337cd75f63619ff8cb844a6887e2b4ecb0bf7cb510ceb2fea789537b03
 SHA512:
-  metadata.gz: 3d8563226d41987ac12140bc9af25a6492f1784937d02796c077e1282d999c132e0e19285d9f938a78b4d20e98958f28e2bd1bb55a14a6bad23e8267b5bf9a9b
-  data.tar.gz: 0a836386550bc34bcb4e16d284592f7a8473accdbf073385eadc88e3f6b2e1da9eb14ea61394a0d0b79baa59f3f9c6e540b7f3423d6064b23da21b24f4bdc6c7
+  metadata.gz: 949892c698668e8a170d5c2dedadeff080f62aee007cf86a89537c62eb304fd75fa479e4d4eb9635e18619794e3003541d90035711e6aa1304771d4f84a1d954
+  data.tar.gz: e445c3469c68b7f9b5e20d384bbd0589b0ec98f5beeacdbbb48b0f371e0f67771448d42b8240dc859c5fe11e5459d66b57f7652cb2106e56346adb49fd453693

data/CHANGELOG.md

@@ -5,6 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.11.0] - 2026-09-30
+
+### Added
+
+- **Clicking a bucket on a time pane filters the other panes to it.** A day on a line chart, or a row of a time table, now selects the range that bucket covers: the start of the bucket and the start of the next, written as the dimension's `_gteq` and `_lt` (`q[placed_on_gteq]=2026-09-01&q[placed_on_lt]=2026-10-01`). Until now a time pane ignored clicks, because a click wrote one condition and a bucket needs two. The pane you click keeps its whole series and marks the buckets inside the range, as every other pane does with its own selection, so a month selected elsewhere also marks the days of that month on a day pane. Clicking the selected bucket clears it; a second bucket replaces the first, and Ctrl or Cmd does not add one, since two ranges on one attribute would return no rows. A line is clicked near a point, not on the exact pixel. Range values are dates for a date column and ISO 8601 with the zone's offset for a timestamp. Ranges a host fixes with `where:` or `default_where` are unchanged (ADR 045, #18).
+
+- `as: :doughnut` and `as: :pie`, for a part-to-whole split. `janela_pane Order, :orders, by: :status, as: :doughnut`. A ring is drawn on the server as inline SVG rather than on a canvas, so it is in the page before any JavaScript runs, prints, and has a legend of real buttons that a keyboard and a screen reader can operate; clicking a slice or a legend button filters the other panes exactly as clicking a bar does, and Ctrl or Cmd adds to the selection. A ring cannot show a negative value or a total of nothing, so a pane with either is drawn as a table and says so. Janela publishes a categorical palette to draw them in, `--janela-series-1` to `--janela-series-8` and `--janela-series-other`, in `docs/theming.md`. The engine's own pages draw a ring too, since it needs no chart runtime (ADR 046, #30).
+
+- A categorical dimension's filter allows `not_eq` and `not_in`, alongside the existing `eq` and `in`: `Order.janela.query(:revenue, where: { status_not_eq: "refunded" })`. Until now excluding a value could only be phrased as `status_in` naming every other value, which silently stopped covering the dashboard the day a new status value was added; a frame's `default_where` (ADR 043) inherited the same gap, so "this queue never counts a refunded order" had no way to be said that stayed true as the data shape changed. A time dimension gets both for free, the same way it already inherits `not_null`. Additive; nothing that worked before is refused now (ADR 044, #64).
+
+### Changed
+
+- **A range in the URL no longer narrows the time pane it names.** `q[placed_on_gteq]` and `q[placed_on_lt]` from a reader now scope every other pane and leave a time pane on that dimension showing its whole series with the range marked, where before it narrowed that pane's own series. A range a host fixes with `where:` or `default_where` still narrows it. See `UPGRADING.md` (ADR 045).
+- **A bar chart's bars are no longer all one colour.** Each bar is now drawn in the palette colour for its position, so a host that has seen every bar in `--janela-accent` will see the first bar in the accent and the rest in new colours. A line chart is unchanged. To keep the old look, set `--janela-series-2` to `--janela-series-8` to your accent; see `UPGRADING.md` (ADR 046).
+
+### Fixed
+
+- A chart pane no longer inherits the browser's 40px side margins on its `<figure>`. In a narrow column, such as one of four on a page, they left a bar chart a fraction of its tile's width.
+
 ## [0.10.0] - 2026-09-28
 
 ### Added
@@ -215,6 +234,7 @@ First alpha, installed from GitHub for testing in a single host application.
 - Only models that declare a `janela` block are addressable over HTTP.
 - ADRs 001 to 004 in `docs/decisions/`, shipped inside the gem.
 
+[0.11.0]: https://github.com/retail-tasker/janela/releases/tag/v0.11.0
 [0.10.0]: https://github.com/retail-tasker/janela/releases/tag/v0.10.0
 [0.9.0]: https://github.com/retail-tasker/janela/releases/tag/v0.9.0
 [0.8.0]: https://github.com/retail-tasker/janela/releases/tag/v0.8.0

data/README.md

@@ -27,7 +27,7 @@ Janela is an alpha on [rubygems.org](https://rubygems.org/gems/janela). It has t
 
 ```ruby
 # Gemfile
-gem "janela", "~> 0.10"
+gem "janela", "~> 0.11"
 ```
 
 ```ruby
@@ -127,7 +127,7 @@ class Order < ApplicationRecord
 end
 ```
 
-A dimension with a `granularity` is a time dimension. Groupdate buckets it (`hour`, `day`, `week`, `month`, `quarter`, `year`), fills empty buckets with zero, and uses your app's `Time.zone` and week start. **On SQLite, buckets are UTC**, because SQLite cannot convert time zones: with a non-UTC `Time.zone` a daily bucket is shifted by your offset, and an early-morning row lands in the previous day. Coarser granularities blunt the shift without removing it. If you need local-day buckets on SQLite, store a local date column and use it as a plain dimension.
+A dimension with a `granularity` is a time dimension. Groupdate buckets it (`hour`, `day`, `week`, `month`, `quarter`, `year`), fills empty buckets with zero, and uses your app's `Time.zone` and week start. Clicking a bucket on a time pane, a day on a line or a row of a time table, filters the other panes to the range it covers (`q[placed_on_gteq]=2026-09-01&q[placed_on_lt]=2026-09-02`). The pane clicked keeps its whole series and marks the range, and Ctrl or Cmd does not add a second one, since two ranges cannot be combined (ADR 045). **On SQLite, buckets are UTC**, because SQLite cannot convert time zones: with a non-UTC `Time.zone` a daily bucket is shifted by your offset, and an early-morning row lands in the previous day. Coarser granularities blunt the shift without removing it. If you need local-day buckets on SQLite, store a local date column and use it as a plain dimension.
 
 ### A subclass inherits
 
@@ -181,7 +181,7 @@ Scope a query to whatever the current user is allowed to see with `on:`:
 Order.janela.query(:revenue, by: :status, on: policy_scope(Order))
 ```
 
-A filter is bound to what kind of dimension it names, not to every predicate Ransack knows (ADR 025). A categorical dimension takes `eq`, `in`, `null` and `not_null`; a time dimension additionally takes `gteq`, `gt`, `lteq` and `lt`, so a range still narrows it. Anything else, such as `_cont` or `_matches`, raises `Janela::BadRequest` naming what is allowed. A grouped query with no `limit` gets one anyway, capped at 1000, and a single filter may carry at most 1000 values.
+A filter is bound to what kind of dimension it names, not to every predicate Ransack knows (ADR 025). A categorical dimension takes `eq`, `in`, `not_eq`, `not_in`, `null` and `not_null`, so it can say what it excludes as directly as what it includes (ADR 044); a time dimension additionally takes `gteq`, `gt`, `lteq` and `lt`, so a range still narrows it. Anything else, such as `_cont` or `_matches`, raises `Janela::BadRequest` naming what is allowed. A grouped query with no `limit` gets one anyway, capped at 1000, and a single filter may carry at most 1000 values.
 
 Declaring a dimension makes that attribute filterable, so Janela defines the model's Ransack allowlist for you. A model that already defines its own keeps it. A `through:` dimension also needs the **associated** model to allow the attribute, because Ransack's allowlist is per-class:
 
@@ -207,7 +207,9 @@ Compose panes on any page. Each pane is a Turbo Frame; clicking a value in one r
 <% end %>
 ```
 
-A pane with no `by:` is the measure's single total, the KPI tile. `limit: 10` keeps the top ten rows or bars. `as:` is `:table` by default, `:bar` for a Chart.js bar chart, or `:line`, which suits a time dimension: `janela_pane Order, :revenue, by: :placed_on, as: :line, granularity: :week`. A chart fills its container's width at Chart.js's default aspect ratio, so wrap it in an element with the width you want. Clicking a bar does exactly what clicking a table value does.
+A pane with no `by:` is the measure's single total, the KPI tile. `limit: 10` keeps the top ten rows or bars. `as:` is `:table` by default, `:bar` for a Chart.js bar chart, `:doughnut` or `:pie` for a part-to-whole split, or `:line`, which suits a time dimension: `janela_pane Order, :revenue, by: :placed_on, as: :line, granularity: :week`. A chart fills its container's width at Chart.js's default aspect ratio, so wrap it in an element with the width you want. Clicking a bar does exactly what clicking a table value does.
+
+A doughnut or a pie is drawn on the server as SVG with a legend of buttons beside it, so it is in the page before any JavaScript runs and can be operated from the keyboard through the legend. Bars, doughnut slices and pie slices are drawn in a palette of eight colours by position, first to eighth, and every value after the eighth in one neutral, so a ring suits a handful of values: `limit: 8` keeps it readable. A ring cannot show a negative value, so a pane with one is drawn as a table and says so. The palette is `--janela-series-1` to `--janela-series-8` and `--janela-series-other` in [docs/theming.md](docs/theming.md) (ADR 046).
 
 **Reconfiguring a pane in place**, a renderer toggle, a granularity switcher, a "show top 20" control, takes two things: name the pane with `id:`, then ask the frame to repoint it.
 
@@ -542,7 +544,7 @@ Deliberately out of scope: natural-language query, a separate data warehouse, a
 
 ## Status
 
-**v0.10.0 alpha.** The measures/dimensions DSL, time dimensions, cross-filtering with multi-selection, bar and line charts, pane URLs, shareable dashboard URLs, snapshots, database-backed frames found by owner and key, panes that hold words or a host partial as well as a query, a host-fixed filter no click can remove and a frame's own permanent one beside it, STI subclasses, the engine's own pages for reading and editing them and the optional vitral theme work and are covered by unit and real-browser tests, with the classes a theme may target documented in [Theming Janela](docs/theming.md). Not yet built: a visual editor, drill-down on time panes, other chart types. [Vista](docs/roadmap.md), the roadmap, says what 1.0 means and which of these are in it; open work is in [GitHub Issues](https://github.com/retail-tasker/janela/issues).
+**v0.11.0 alpha.** The measures/dimensions DSL, time dimensions, cross-filtering with multi-selection, bar, line, doughnut and pie charts, pane URLs, shareable dashboard URLs, snapshots, database-backed frames found by owner and key, panes that hold words or a host partial as well as a query, a host-fixed filter no click can remove and a frame's own permanent one beside it, STI subclasses, the engine's own pages for reading and editing them and the optional vitral theme work and are covered by unit and real-browser tests, with the classes a theme may target documented in [Theming Janela](docs/theming.md). Not yet built: a visual editor, drill-down on time panes, other chart types. [Vista](docs/roadmap.md), the roadmap, says what 1.0 means and which of these are in it; open work is in [GitHub Issues](https://github.com/retail-tasker/janela/issues).
 
 ## Development
 

data/UPGRADING.md

@@ -12,6 +12,60 @@ bin/rails janela:doctor
 
 It reads your application and lists what still needs changing.
 
+## 0.10.0 to 0.11.0
+
+No migration. Two things you may see.
+
+**A reader's range no longer narrows a time pane.**
+
+Clicking a bucket on a time pane now writes `placed_on_gteq` and
+`placed_on_lt` (ADR 045), and a time pane, like every other pane, does
+not apply the reader's filters on its own dimension. It shows its whole
+series and marks the buckets inside the range, so you can see where the
+selection sits.
+
+That changes one thing: a link or a form that used to send a range in
+`q[...]` to narrow a time pane's own series no longer does. To fix a
+range on a pane, say it in the host's own code, which is unchanged:
+
+```erb
+<%= janela_frame @frame, where: { placed_on_gteq: 30.days.ago.to_date.to_s } %>
+```
+
+or, on a stored frame, `default_where: { placed_on_gteq: "2026-01-01" }`
+with `default_model`. Both still narrow the time pane itself. The doctor
+cannot see this one, because the filter arrives at runtime.
+
+**Bars are drawn in a palette now.**
+
+Janela publishes a categorical palette (ADR 046), and a bar chart takes
+its colours from it: the first bar in `--janela-accent`, the next seven
+in `--janela-series-2` to `--janela-series-8`, and every bar after the
+eighth in `--janela-series-other`. Until now every bar was the accent.
+Line charts are unchanged.
+
+If you want the old look, set the seven to your accent:
+
+```css
+:root {
+  --janela-series-2: var(--janela-accent);
+  --janela-series-3: var(--janela-accent);
+  --janela-series-4: var(--janela-accent);
+  --janela-series-5: var(--janela-accent);
+  --janela-series-6: var(--janela-accent);
+  --janela-series-7: var(--janela-accent);
+  --janela-series-8: var(--janela-accent);
+  --janela-series-other: var(--janela-accent);
+}
+```
+
+Otherwise there is nothing to do, and the palette is yours to set to
+your own brand's colours. The doctor cannot see this one: what a bar
+looks like is decided in the browser.
+
+Nothing else changed: no migration, no renamed identifier, and stored
+frames and existing panes keep working.
+
 ## 0.9.0 to 0.10.0
 
 One migration, if you use stored frames.

data/app/assets/javascripts/janela/chart_controller.js

@@ -20,12 +20,17 @@ export default class extends Controller {
           label: this.titleValue,
           data: this.valuesValue,
           backgroundColor: this.colours(),
-          borderColor: this.accentColour(0.9)
+          borderColor: this.typeValue === "bar" ? this.colours(0.9) : this.accentColour(0.9),
+          ...this.pointStyle()
         }]
       },
       options: {
         animation: false,
         scales: { y: { beginAtZero: true } },
+        // A line is clicked anywhere along its x position rather than on
+        // the exact pixel of a point, which on a dense series is a few
+        // pixels wide (ADR 045).
+        interaction: this.typeValue === "line" ? { mode: "nearest", axis: "x", intersect: false } : undefined,
         plugins: {
           legend: { display: false },
           // The server formatted every number for the table, so the tooltip
@@ -36,25 +41,59 @@ export default class extends Controller {
         onClick: (event, elements) => {
           if (elements.length === 0) return
           const label = this.labelsValue[elements[0].index]
-          const [key, value] = this.filtersValue[String(label)] || []
+          const entry = this.filtersValue[String(label)]
           // A custom event carries no modifier flags of its own, so the
           // gesture is read here and passed on (ADR 024).
           const additive = event.native?.ctrlKey === true || event.native?.metaKey === true
-          if (key) this.dispatch("toggle", { detail: { key, value, additive } })
+          // A category is one key and value. A time bucket is an object of
+          // the conditions for its range, which is never additive (ADR 045).
+          if (Array.isArray(entry) && entry[0]) {
+            this.dispatch("toggle", { detail: { key: entry[0], value: entry[1], additive } })
+          } else if (entry && !Array.isArray(entry)) {
+            this.dispatch("toggle", { detail: { filters: entry } })
+          }
         }
       }
     })
   }
 
   // With nothing selected every bar is solid; with a selection only the
-  // selected ones are, and there can be more than one of them.
-  colours() {
+  // selected ones are, and there can be more than one of them. A bar takes
+  // the colour for its position in the palette (ADR 046); a line is one
+  // series and keeps the accent.
+  colours(unselected = 0.25) {
     const selected = this.selectedValue.map(String)
-    return this.labelsValue.map((label) =>
-      selected.length === 0 || selected.includes(String(label))
-        ? this.accentColour(0.9)
-        : this.accentColour(0.25)
-    )
+    return this.labelsValue.map((label, index) => {
+      const solid = selected.length === 0 || selected.includes(String(label))
+      const property = this.typeValue === "bar" ? this.seriesProperty(index) : "--janela-accent"
+      return this.colour(property, solid ? 0.9 : unselected)
+    })
+  }
+
+  // A line shows its selection on its points: the buckets inside the range
+  // are solid and larger, the rest faded. A dense series draws no points
+  // until one is hovered, so it stays a line (ADR 045).
+  pointStyle() {
+    if (this.typeValue !== "line") return {}
+
+    const selected = this.selectedValue.map(String)
+    const dense = this.labelsValue.length > 60
+    return {
+      pointBackgroundColor: this.colours(),
+      pointBorderColor: this.colours(),
+      pointRadius: this.labelsValue.map((label) => selected.includes(String(label)) ? 5 : (dense ? 0 : 3)),
+      pointHoverRadius: 6
+    }
+  }
+
+  // First to eighth, then the neutral. Never cycled: the ninth bar in the
+  // first bar's colour would be two categories drawn the same (ADR 046).
+  seriesProperty(index) {
+    return index < 8 ? `--janela-series-${index + 1}` : "--janela-series-other"
+  }
+
+  accentColour(alpha) {
+    return this.colour("--janela-accent", alpha)
   }
 
   // #62: this used to be a literal rgba(54, 162, 235, ...), Chart.js's own
@@ -62,8 +101,8 @@ export default class extends Controller {
   // every other selected thing on the page. Read off this element rather
   // than the document root, so whatever ancestor sets the property is the
   // one honoured, the way it already inherits for everything else.
-  accentColour(alpha) {
-    const [ r, g, b ] = this.resolvedAccent().match(/\d+/g)
+  colour(property, alpha) {
+    const [ r, g, b ] = this.resolved(property).match(/\d+/g)
     return `rgba(${r}, ${g}, ${b}, ${alpha})`
   }
 
@@ -71,16 +110,17 @@ export default class extends Controller {
   // "rgb(...)", "#7c3aed", a name, never resolved the way an ordinary
   // colour property is. Setting it as one and reading that back resolves
   // any of them the same way, rather than parsing each form by hand.
-  resolvedAccent() {
-    if (this.resolvedAccentValue) return this.resolvedAccentValue
+  resolved(property) {
+    this.resolvedColours ||= {}
+    if (this.resolvedColours[property]) return this.resolvedColours[property]
 
-    const accent = getComputedStyle(this.element).getPropertyValue("--janela-accent").trim()
+    const authored = getComputedStyle(this.element).getPropertyValue(property).trim()
     const probe = document.createElement("span")
-    probe.style.color = accent
+    probe.style.color = authored
     document.body.appendChild(probe)
-    this.resolvedAccentValue = getComputedStyle(probe).color
+    this.resolvedColours[property] = getComputedStyle(probe).color
     probe.remove()
-    return this.resolvedAccentValue
+    return this.resolvedColours[property]
   }
 
   disconnect() {

data/app/assets/javascripts/janela/frame_controller.js

@@ -77,7 +77,9 @@ export default class extends Controller {
   // same event carries the same flags when Enter is pressed on a focused
   // value, so the keyboard needs nothing of its own (ADR 024).
   toggle(event) {
-    const { key, value } = { ...event.detail, ...event.params }
+    const { key, value, filters: range } = { ...event.detail, ...event.params }
+    if (range) return this.toggleRange(range)
+
     const additive = event.ctrlKey || event.metaKey || event.detail?.additive === true
     const filters = { ...this.filtersValue }
     const selected = this.valuesFor(filters, key).includes(String(value))
@@ -98,6 +100,22 @@ export default class extends Controller {
     this.filtersValue = filters
   }
 
+  // A time bucket is two conditions, its start and the start of the next
+  // bucket, and they are one thing to select or clear. A range is not a set,
+  // so a modifier means nothing here: two ranges on one attribute are ANDed
+  // and return no rows, which is the failure ADR 024 measured for a value
+  // and the null group (ADR 045).
+  toggleRange(range) {
+    const filters = { ...this.filtersValue }
+    const [ first ] = Object.keys(range)
+    const selected = Object.entries(range).every(([ key, value ]) => String(filters[key]) === String(value))
+
+    this.clearDimension(filters, first)
+    if (!selected) Object.assign(filters, range)
+
+    this.filtersValue = filters
+  }
+
   clear() {
     if (Object.keys(this.filtersValue).length) this.filtersValue = {}
   }
@@ -141,11 +159,13 @@ export default class extends Controller {
   }
 
   // Every filter Janela itself writes for the same dimension: the values, the
-  // null group, and an _eq that a shared link may still carry. A host's own
-  // q[...] filters use other predicates and are left alone (ADR 008).
+  // null group, a time range, and an _eq that a shared link may still carry.
+  // A host's own q[...] filters use other predicates and are left alone
+  // (ADR 008); a range on a time dimension is the reader's, and a click on
+  // that dimension replaces it.
   clearDimension(filters, key) {
-    const base = key.replace(/_(in|null|eq)$/, "")
-    for (const suffix of [ "in", "null", "eq" ]) delete filters[`${base}_${suffix}`]
+    const base = key.replace(/_(in|null|eq|gteq|gt|lteq|lt)$/, "")
+    for (const suffix of [ "in", "null", "eq", "gteq", "gt", "lteq", "lt" ]) delete filters[`${base}_${suffix}`]
   }
 
   // Stimulus calls this as the controller starts, with the filters the server

data/app/assets/stylesheets/janela.css

@@ -12,6 +12,20 @@
   --janela-space: 0.25rem;
   --janela-line: rgba(128, 128, 128, 0.3);
   --janela-accent: rgb(54, 162, 235);
+
+  /* The categorical palette (ADR 046): a bar, a doughnut slice or a pie
+     slice is drawn in the colour for its position, first to eighth, and
+     everything after the eighth in the neutral. Never cycled. The first
+     follows the accent, so a host's own colour still leads. */
+  --janela-series-1: var(--janela-accent);
+  --janela-series-2: #eb6834;
+  --janela-series-3: #1baf7a;
+  --janela-series-4: #eda100;
+  --janela-series-5: #e87ba4;
+  --janela-series-6: #008300;
+  --janela-series-7: #4a3aa7;
+  --janela-series-8: #e34948;
+  --janela-series-other: #8c8c8c;
 }
 
 .janela-frame { display: grid; }
@@ -94,6 +108,33 @@ table.janela-pane button[aria-pressed="true"] { background: var(--janela-accent)
 .janela-chart-title { font-weight: 600; margin-bottom: calc(var(--janela-space) * 2); }
 canvas.janela-chart { width: 100% !important; max-height: 20rem; }
 
+/* A chart pane is a <figure>, and a browser gives a figure 40px of margin
+   either side. Harmless in a wide column and most of a narrow one. */
+figure.janela-pane { margin: 0; }
+
+/* A doughnut or a pie is inline SVG with a legend beside it (ADR 046). The
+   gap between slices is drawn in the page's own colour so no boundary
+   depends on hue alone. */
+.janela-ring-svg { display: block; width: 100%; max-width: 16rem; max-height: 16rem; margin: 0 auto calc(var(--janela-space) * 3); }
+.janela-ring-slice { fill-rule: evenodd; stroke: Canvas; stroke-width: 0.8; }
+.janela-ring-slice[data-action] { cursor: pointer; }
+.janela-ring-slice.janela-dim { opacity: 0.25; }
+table.janela-legend { width: 100%; border-collapse: collapse; }
+table.janela-legend td { padding: calc(var(--janela-space) * 1.5) 0; border-top: 1px solid var(--janela-line); }
+table.janela-legend td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
+table.janela-legend button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  padding: calc(var(--janela-space) * 0.5) calc(var(--janela-space) * 2);
+  border-radius: 999px;
+  cursor: pointer;
+}
+table.janela-legend button:hover { background: var(--janela-line); }
+table.janela-legend button[aria-pressed="true"] { background: var(--janela-accent); color: white; }
+.janela-swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 2px; vertical-align: middle; }
+
 /* A host whose own markup already says what a pane is puts this on any
    ancestor, and the caption, the value's label and the chart's title stop
    being drawn without leaving the accessibility tree. Hidden rather than

data/app/models/janela/pane.rb

@@ -99,7 +99,7 @@ module Janela
     end
 
     def chart?
-      Query::RENDERERS.include?(renderer.to_s) && renderer.to_s != "table"
+      Query::CANVAS.include?(renderer.to_s)
     end
 
     def definition

data/app/models/janela/query.rb

@@ -5,7 +5,18 @@ module Janela
   # rather than collapsing this one to the value clicked. A query read from a
   # snapshot shows stored results and cannot be clicked at all.
   class Query
-    RENDERERS = %w[table bar line].freeze
+    RENDERERS = %w[table bar line doughnut pie].freeze
+
+    # Drawn by Chart.js on a canvas, and so blank without a chart runtime.
+    CANVAS = %w[bar line].freeze
+
+    # Drawn on the server as SVG instead (ADR 046).
+    RINGS = %w[doughnut pie].freeze
+
+    # Palette slots before the neutral. Colour is chosen by position and never
+    # cycled: a ninth category drawn in the first colour would be two
+    # categories the same beside a legend that says they differ (ADR 046).
+    SERIES = 8
 
     attr_reader :definition, :measure, :dimension, :renderer, :limit, :filters, :fixed, :default, :snapshot
 
@@ -60,15 +71,87 @@ module Janela
       @granularity || (dimension_definition.granularity if time?)
     end
 
-    # Clicking a category adds one Ransack condition; clicking a time bucket
-    # would need two, and the dashboard toggles one key at a time (ADR 006).
     # A stored pane is the record of a moment and is not clickable (ADR 009).
+    # A time pane is: a bucket writes the pair of conditions for its range
+    # (ADR 045).
     def clickable?
-      !single_value? && !time? && !frozen?
+      !single_value? && !frozen?
     end
 
     def chart?
-      !single_value? && renderer != "table"
+      !single_value? && CANVAS.include?(renderer)
+    end
+
+    def ring?
+      !single_value? && RINGS.include?(renderer)
+    end
+
+    # A part of a whole cannot be negative, and a ring of nothing draws
+    # nothing. Either way the pane is a table that says why, not a wrong
+    # picture (ADR 046).
+    def hole?
+      renderer == "doughnut"
+    end
+
+    def ringable?(result)
+      values = result.values.map(&:to_f)
+      values.none?(&:negative?) && values.sum.positive?
+    end
+
+    # The custom property a category at this position is drawn with.
+    def series_property(index)
+      index < SERIES ? "--janela-series-#{index + 1}" : "--janela-series-other"
+    end
+
+    # One entry per label, in result order, with the arc it covers. A zero is
+    # kept for the legend and has no arc. The filter is the one a click on
+    # that label toggles, so the slice and its legend row cannot disagree.
+    CENTRE = 50.0
+    OUTER = 48.0
+    INNER = 27.0
+
+    Slice = Struct.new(:label, :formatted, :property, :click, :selected, :fraction, :from, keyword_init: true) do
+      # The SVG path of this slice on a 100 by 100 canvas, from twelve o'clock
+      # clockwise, or nil when it covers nothing. One slice covering the whole
+      # circle is two half arcs, since an arc from a point to itself is not
+      # drawn. A doughnut's hole is a second sub-path, cut out by the
+      # stylesheet's even-odd fill rule.
+      def path(hole:)
+        return unless fraction.positive?
+        return whole(hole) if fraction >= 0.9999
+
+        large = fraction > 0.5 ? 1 : 0
+        outer_from, outer_to = point(OUTER, from), point(OUTER, from + fraction)
+        if hole
+          inner_from, inner_to = point(INNER, from), point(INNER, from + fraction)
+          "M #{outer_from} A #{OUTER} #{OUTER} 0 #{large} 1 #{outer_to} L #{inner_to} A #{INNER} #{INNER} 0 #{large} 0 #{inner_from} Z"
+        else
+          "M #{CENTRE} #{CENTRE} L #{outer_from} A #{OUTER} #{OUTER} 0 #{large} 1 #{outer_to} Z"
+        end
+      end
+
+      private
+        def whole(hole)
+          circle = ->(radius) { "M #{CENTRE} #{CENTRE - radius} A #{radius} #{radius} 0 1 1 #{CENTRE} #{CENTRE + radius} A #{radius} #{radius} 0 1 1 #{CENTRE} #{CENTRE - radius} Z" }
+          hole ? "#{circle.(OUTER)} #{circle.(INNER)}" : circle.(OUTER)
+        end
+
+        def point(radius, turns)
+          angle = turns * 2 * Math::PI - Math::PI / 2
+          format("%.3f %.3f", CENTRE + radius * Math.cos(angle), CENTRE + radius * Math.sin(angle))
+        end
+    end
+
+    def slices(result)
+      total = result.values.sum(&:to_f)
+      from = 0.0
+      result.each_with_index.map do |(label, measured), index|
+        fraction = measured.to_f / total
+        slice = Slice.new(label: label.to_s, formatted: format(measured), property: series_property(index),
+                          click: (click_data(label) if clickable?), selected: selected?(label), fraction: fraction, from: from)
+        from += fraction
+        slice
+      end
     end
 
     def turbo_frame_id
@@ -105,9 +188,29 @@ module Janela
       # selection, which this pane shows the alternatives to (ADR 040, 043).
       on = definition.narrow(on || model.all, default) if default.present?
       on = definition.narrow(on || model.all, fixed) if fixed.present?
+      return time_result(on) if time?
+
       definition.query(measure, by: dimension, where: applicable_filters, on: on, granularity: granularity, limit: limit)
     end
 
+    # The two filters a click on this label writes, for a time pane: the start
+    # of its bucket and the start of the next (ADR 045).
+    def range_for(label)
+      from, to = dimension_definition.bounds(@buckets.fetch(label.to_s), granularity)
+      { "#{ransack_name}_gteq" => from, "#{ransack_name}_lt" => to }
+    end
+
+    # The data attributes a table button or legend row carries: one key and
+    # value for a category, the pair of conditions for a bucket.
+    def click_data(label)
+      if time?
+        { janela__frame_filters_param: range_for(label).to_json }
+      else
+        key, value = filter_params(label)
+        key ? { janela__frame_key_param: key, janela__frame_value_param: value } : nil
+      end
+    end
+
     # The Ransack key and value a click on this label should toggle. A null
     # group filters with the null predicate, not an empty string (ADR 009 has
     # no say here; see issue #21).
@@ -116,7 +219,7 @@ module Janela
     # _eq link is still read, since a URL somebody already sent should not stop
     # working to suit us (ADR 024).
     def filter_params(label)
-      return [ nil, nil ] unless clickable?
+      return [ nil, nil ] unless clickable? && !time?
       return [ "#{ransack_name}_null", "1" ] if label.to_s == Dimension::NONE
 
       [ "#{ransack_name}_in", label.to_s ]
@@ -126,6 +229,7 @@ module Janela
     # to look up by label when a bar is clicked.
     def filters_for(labels)
       return {} unless clickable?
+      return labels.to_h { |label| [ label.to_s, range_for(label) ] } if time?
 
       labels.to_h { |label| [ label.to_s, filter_params(label) ] }
     end
@@ -137,6 +241,7 @@ module Janela
     # like any other label.
     def selected_values
       return [] unless clickable?
+      return selected_buckets if time?
 
       values = Array(filter("#{ransack_name}_in")) + Array(filter("#{ransack_name}_eq"))
       values = values.map(&:to_s)
@@ -161,8 +266,32 @@ module Janela
         dimension_definition.ransack_name
       end
 
+      # A time pane's series is read as buckets, not labels, and the buckets
+      # are kept: the labels alone cannot say what range a click covers.
+      def time_result(on)
+        series = definition.series(measure, by: dimension, where: applicable_filters, on: on, granularity: granularity)
+        @buckets = series.keys.to_h { |bucket| [ dimension_definition.label(bucket, granularity), bucket ] }
+        series.transform_keys { |bucket| dimension_definition.label(bucket, granularity) }
+      end
+
+      # The buckets that lie wholly inside the range the filters name. Janela
+      # writes both ends, so a range with one is somebody else's and selects
+      # nothing here. Read before the first result there are no buckets yet.
+      def selected_buckets
+        from, to = filter("#{ransack_name}_gteq"), filter("#{ransack_name}_lt")
+        return [] if from.blank? || to.blank? || @buckets.nil?
+
+        from, to = Time.zone.parse(from.to_s), Time.zone.parse(to.to_s)
+        return [] if from.nil? || to.nil?
+
+        @buckets.select { |_, bucket|
+          start, finish = dimension_definition.span(bucket, granularity)
+          start >= from && finish <= to
+        }.keys
+      end
+
       def applicable_filters
-        return filters if single_value? || time?
+        return filters if single_value?
 
         filters.reject { |key, _| key.to_s.start_with?(ransack_name) }
       end

data/app/views/janela/queries/_query.html.erb

@@ -7,6 +7,8 @@
   </p>
 <% elsif result.empty? %>
   <p class="janela-pane janela-empty"><%= query.title %>: no data</p>
+<% elsif query.ring? && query.ringable?(result) %>
+  <%= render "janela/queries/ring", query: query, result: result %>
 <% elsif query.chart? %>
   <% title_id = "#{query.turbo_frame_id}-title" %>
   <figure class="janela-pane">
@@ -21,24 +23,20 @@
             data-janela--chart-values-value="<%= result.values.map(&:to_f).to_json %>"
             data-janela--chart-formatted-value="<%= result.values.map { |measured| query.format(measured) }.to_json %>"
             data-janela--chart-filters-value="<%= query.filters_for(result.keys).to_json %>"
+            <%= tag.attributes(aria: { description: (t("janela.time.click_hint") if query.time? && query.clickable?) }) %>
             role="img" aria-labelledby="<%= title_id %>"></canvas>
   </figure>
 <% else %>
-  <table class="janela-pane">
+  <%= tag.table class: "janela-pane", aria: { description: (t("janela.time.click_hint") if query.time? && query.clickable?) } do %>
     <caption><%= query.title %></caption>
     <tbody>
       <% result.each do |label, measured| %>
-        <% key, value = query.filter_params(label) %>
+        <% click = query.click_data(label) if query.clickable? %>
         <tr>
           <td>
-            <% if key %>
-              <button type="button"
-                      aria-pressed="<%= query.selected?(label) %>"
-                      data-action="janela--frame#toggle"
-                      data-janela--frame-key-param="<%= key %>"
-                      data-janela--frame-value-param="<%= value %>">
-                <%= label %>
-              </button>
+            <% if click %>
+              <%= tag.button label, type: "button", aria: { pressed: query.selected?(label) },
+                    data: { action: "janela--frame#toggle" }.merge(click) %>
             <% else %>
               <span><%= label %></span>
             <% end %>
@@ -47,5 +45,10 @@
         </tr>
       <% end %>
     </tbody>
-  </table>
+  <% end %>
+  <%# A ring cannot draw a negative part or a total of nothing, so it says it
+      is a table rather than drawing something wrong (ADR 046). %>
+  <% if query.ring? %>
+    <p class="janela-muted"><%= t("janela.rings.not_drawable") %></p>
+  <% end %>
 <% end %>