@feedmepos/mf-report 5.31.3 → 5.32.0-beta.0

package/dist/report-canvas-libs/components-1.js

@@ -104,6 +104,26 @@
     return envOf("timezone", undefined)
   }
 
+  /** The day a value names when it is a plain date or a local midnight, as a query's truncated timestamp reads ("2026-08-03 00:00:00"); else null. */
+  function plainDay(value) {
+    var match = /^(\d{4}-\d{2}-\d{2})(?:[ T]00:00(?::00(?:\.0+)?)?)?$/.exec(String(value))
+    return match ? match[1] : null
+  }
+
+  /** A plain day as a digest bar's category reads it: its weekday and date, never the query's ISO text. */
+  function dayName(value) {
+    var at = plainDay(value)
+    var day = new Date(at)
+    return isNaN(day) ? String(value) : day.toLocaleDateString(locale(), { weekday: "short", month: "short", day: "numeric", timeZone: zoneFor(at) })
+  }
+
+  /** The decimals a value needs at two-decimal precision: 0 for 2, 1 for 2.9. */
+  function decimalsOf(value) {
+    var text = String(Math.round(num(value) * 100) / 100)
+    var at = text.indexOf(".")
+    return at < 0 ? 0 : Math.min(2, text.length - at - 1)
+  }
+
   function intl(digits) {
     return new Intl.NumberFormat(locale(), {
       minimumFractionDigits: digits,
@@ -117,6 +137,8 @@
       case "money":
         return intl(2).format(num(value))
       case "amount":
+        // a digest's amounts are units, never money: 300 units, 2.5 kg
+        if (isDigest()) return new Intl.NumberFormat(locale(), { maximumFractionDigits: 2 }).format(num(value))
         return intl(2).format(num(value))
       case "count":
         return intl(0).format(num(value))
@@ -135,15 +157,18 @@
     }
   }
 
-  /** Axis ticks: RM 0, RM 2K, RM 10K — the locale's own compact form, per the chart guide. */
+  /** Axis ticks: RM 0, RM 2K, RM 10K, 5% — the locale's own compact form, per the chart guide. */
   function abbrev(format) {
+    // a percent's ticks carry their sign, as its figures do; a ratio's read as the percent it is
+    var unit = format === "percent" || format === "ratio" ? "%" : ""
     return function (value) {
-      var v = num(value)
+      var v = format === "ratio" ? num(value) * 100 : num(value)
       var currency = format === "money" ? envOf("currency", "") : ""
       // a tiny domain otherwise rounds every tick to the same label
       var small = Math.abs(v) > 0 && Math.abs(v) < 10
+      // a digest's ticks drop the zeros a whole tick does not need, so 1 sits beside 10
       var spec = small
-        ? { minimumFractionDigits: 2, maximumFractionDigits: 2 }
+        ? { minimumFractionDigits: isDigest() ? 0 : 2, maximumFractionDigits: 2 }
         : { notation: "compact", maximumFractionDigits: 1, minimumFractionDigits: 0 }
       if (currency) {
         spec.style = "currency"
@@ -151,13 +176,13 @@
         spec.currencyDisplay = "code"
       }
       try {
-        return new Intl.NumberFormat(locale(), spec).format(v)
+        return new Intl.NumberFormat(locale(), spec).format(v) + unit
       } catch (err) {
         // an unknown currency code is not a reason to draw no axis
         delete spec.style
         delete spec.currency
         delete spec.currencyDisplay
-        return (currency ? currency + " " : "") + new Intl.NumberFormat(locale(), spec).format(v)
+        return (currency ? currency + " " : "") + new Intl.NumberFormat(locale(), spec).format(v) + unit
       }
     }
   }
@@ -533,7 +558,8 @@
         var raw = rows.length ? rows[0][tileConfig.value] : null
         if (tileConfig.format === "money" && raw !== null && raw !== undefined) {
           target.appendChild(el("span", "fmr-kpi-cur", (window.env && window.env.currency) || ""))
-          target.appendChild(document.createTextNode(formatValue("amount", raw)))
+          // money to two decimals, as the words beside it are; a digest's amounts are units
+          target.appendChild(document.createTextNode(formatValue("money", raw)))
         } else {
           target.appendChild(document.createTextNode(formatValue(tileConfig.format || "amount", raw)))
         }
@@ -595,14 +621,223 @@
           chart.data = data
           chart.update()
         } else {
+          if (isDigest() && window.Chart.register && !numberRoomOn) {
+            window.Chart.register(numberRoom)
+            numberRoomOn = true
+          }
           chart = new window.Chart(canvas, build(data))
         }
       }
     }
     paint.chart = function () { return chart }
+    // the next paint builds the chart anew, as when it turns on its side
+    paint.rebuild = function () {
+      if (chart) chart.destroy()
+      chart = null
+    }
     return paint
   }
 
+  function figureFont() {
+    return "600 12px " + (getComputedStyle(document.body).fontFamily || "sans-serif")
+  }
+
+  var measuring = null
+  function measurer() {
+    if (!measuring) measuring = document.createElement("canvas").getContext("2d")
+    return measuring
+  }
+
+  function textWidth(ctx, font, label) {
+    if (!ctx) return String(label).length * 7
+    ctx.save()
+    ctx.font = font
+    var width = ctx.measureText(String(label)).width
+    ctx.restore()
+    return width
+  }
+
+  /** A name's words in lines no wider than `room` in the font `spec`, no word cut. */
+  function wrapWords(ctx, spec, label, room) {
+    var lines = []
+    String(label).split(/\s+/).forEach(function (word) {
+      var line = lines[lines.length - 1]
+      if (line !== undefined && textWidth(ctx, spec, line + " " + word) <= room) lines[lines.length - 1] = line + " " + word
+      else lines.push(word)
+    })
+    return lines
+  }
+
+  /** A scale's tick font as a canvas font. */
+  function tickSpec(scale) {
+    var font = scale.options.ticks.font
+    return (font.weight ? font.weight + " " : "") + font.size + "px " + (font.family || getComputedStyle(document.body).fontFamily || "sans-serif")
+  }
+
+  /** A name's words in lines no wider than `room`, by default its bar's share of the axis, no word cut. */
+  function wordLines(scale, label, room) {
+    if (room === undefined) room = scale.width / Math.max(1, scale.chart.data.labels.length) - 4
+    var lines = wrapWords(scale.ctx, tickSpec(scale), label, room)
+    return lines.length > 1 ? lines : lines[0]
+  }
+
+  // chart.js skips a flat axis's labels at the width it had before the axes beside it took theirs
+  var numberRoomOn = false
+  /** A digest's flat number axis keeps every label, then every second, third… from the first, until each has its skip padding at the width the layout gave it. */
+  var numberRoom = {
+    id: "fmrNumberRoom",
+    afterLayout: function (chart) {
+      if (!isDigest()) return
+      Object.keys(chart.scales).forEach(function (id) {
+        var scale = chart.scales[id]
+        var ticks = scale.ticks || []
+        if (!scale.isHorizontal() || scale.type === "category" || scale.options.display === false || !scale.options.ticks.display || ticks.length < 2) return
+        var pad = scale.options.ticks.autoSkipPadding || 0
+        var spec = tickSpec(scale)
+        var ends = ticks.map(function (tick) {
+          var width = [].concat(tick.label).reduce(function (most, line) { return Math.max(most, textWidth(scale.ctx, spec, line)) }, 0)
+          var at = scale.getPixelForValue(tick.value)
+          return [at - width / 2, at + width / 2]
+        })
+        var step = 1
+        var crowded = function (at) { return at >= step && at % step === 0 && ends[at][0] - ends[at - step][1] < pad }
+        while (step < ticks.length && ticks.some(function (_, at) { return crowded(at) })) step++
+        if (step === 1) return
+        scale.ticks = ticks.filter(function (_, at) { return at % step === 0 })
+        scale._labelItems = null
+        scale._labelSizes = null
+      })
+    }
+  }
+
+  /** A bar's widest: a digest's page is wide and read, so its bars fill more of their slot than a builder canvas's. */
+  function barThickness() {
+    return isDigest() ? 32 : 20
+  }
+
+  /** A chart on its side gives each row room for every line its longest name wraps to at half the card's width, where sideNames wraps them, so no two names overlap. */
+  function sideHeight(box, names) {
+    var size = px("--fm-font-size-14", 14)
+    var spec = size + "px " + (getComputedStyle(document.body).fontFamily || "sans-serif")
+    var room = Math.max(60, box.clientWidth / 2 - 14)
+    var lines = names.reduce(function (most, name) { return Math.max(most, wrapWords(measurer(), spec, name, room).length) }, 1)
+    return Math.max(240, names.length * Math.max(38, lines * Math.ceil(size * 1.2) + 12) + 48)
+  }
+
+  /** Sizes a chart on its side for its names (none: back to its own height), measured again whenever its card's width moves, as a card first drawn narrow later widens. */
+  function sideFit(body) {
+    var names = null
+    var width = -1
+    var due = false
+    function fit() {
+      var box = body.querySelector(".fmr-chart")
+      if (!box) return
+      width = box.clientWidth
+      var height = names ? sideHeight(box, names) + "px" : ""
+      if (box.style.height !== height) box.style.height = height
+    }
+    if (typeof ResizeObserver !== "undefined") {
+      // measured a frame later, so a height set here never resizes inside the observer's loop
+      new ResizeObserver(function () {
+        if (due || !names) return
+        due = true
+        requestAnimationFrame(function () {
+          due = false
+          var box = body.querySelector(".fmr-chart")
+          if (box && names && box.clientWidth !== width) fit()
+        })
+      }).observe(body)
+    }
+    return function (next) {
+      names = next
+      fit()
+    }
+  }
+
+  /** A digest never tilts a number: a tick that does not fit is skipped; the canvas builder's own charts keep chart.js's ticks. */
+  function numberTicks(ticks) {
+    return isDigest() ? Object.assign(ticks, { maxRotation: 0, autoSkip: true, autoSkipPadding: 6 }) : ticks
+  }
+
+  /** A digest's upright names never tilt: numbers skip what does not fit, names wrap by word and, with `turn`, a name wider than its bar turns the chart. */
+  function uprightNames(labels, turn) {
+    var numbers = labels.every(function (label) { return /^-?\d+(\.\d+)?$/.test(String(label).trim()) })
+    if (numbers) return numberTicks({})
+    if (!turn) return { maxRotation: 0, autoSkip: false, callback: function (value) { return wrapLabel(this.getLabelForValue(value), Math.max(4, Math.floor(this.width / Math.max(1, labels.length) / 7.6))) } }
+    return { autoSkip: false, callback: function (value) { return wordLines(this, this.getLabelForValue(value)) } }
+  }
+
+  /** A digest chart's side: it turns when its names or figures do not fit upright, and tries upright again once its card is wider. */
+  function sideTurner(body, redraw) {
+    var side = { sideways: false, at: 0 }
+    side.turn = function (onSide) {
+      if (side.sideways === onSide) return
+      side.sideways = onSide
+      side.at = onSide ? body.clientWidth : 0
+      redraw()
+    }
+    side.onResize = function () {
+      if (side.sideways && body.clientWidth > side.at) Promise.resolve().then(function () { side.turn(false) })
+    }
+    return side
+  }
+
+  /** The names down a digest chart on its side, wrapped by measure to the width chart.js gives the axis (half the chart less its padding), so none runs off the canvas. */
+  function sideNames(ax) {
+    return Object.assign({}, ax.ticks, {
+      autoSkip: false,
+      callback: function (value) {
+        var grid = this.options.grid || {}
+        var marks = grid.drawTicks === false ? 0 : grid.tickLength || 0
+        return wordLines(this, this.getLabelForValue(value), (this.maxWidth || this.chart.width / 2) - marks - 2 * (this.options.ticks.padding || 0))
+      }
+    })
+  }
+
+  /** Turns an upright chart on its side before it draws, when chart.js would tilt its names or a figure overflows its bar. */
+  function turnPlugin(turn, figures) {
+    return {
+      id: "fmrTurn",
+      afterLayout: function (chart) {
+        if (chart.options.indexAxis === "y") return
+        var room = chart.chartArea.width / Math.max(1, chart.data.labels.length) - 4
+        var widest = (figures ? figures() : []).reduce(function (most, label) { return Math.max(most, textWidth(chart.ctx, figureFont(), label)) }, 0)
+        chart.$fmrTurn = chart.scales.x.labelRotation > 0 || widest > room
+      },
+      beforeDraw: function (chart) {
+        if (!chart.$fmrTurn) return
+        chart.$fmrTurn = false
+        Promise.resolve().then(turn)
+        return false
+      }
+    }
+  }
+
+  /** Writes each bar's figure at its end: above an upright bar, past the end of one on its side. */
+  function figuresPlugin(figures) {
+    return {
+      id: "fmrFigures",
+      afterDatasetsDraw: function (chart) {
+        var ctx = chart.ctx
+        var meta = chart.getDatasetMeta(0)
+        var sideways = chart.options.indexAxis === "y"
+        ctx.save()
+        ctx.font = figureFont()
+        ctx.fillStyle = token("--fm-text-default", "#1c1c1e")
+        ctx.textAlign = sideways ? "left" : "center"
+        ctx.textBaseline = sideways ? "middle" : "bottom"
+        figures().forEach(function (label, index) {
+          var bar = meta.data[index]
+          if (!bar || !label) return
+          var at = bar.getProps(["x", "y", "base"], true)
+          if (sideways) ctx.fillText(label, Math.max(at.x, at.base) + 6, at.y)
+          else ctx.fillText(label, at.x, Math.min(at.y, at.base) - 4)
+        })
+        ctx.restore()
+      }
+    }
+  }
+
   function renderTimeseries(root, config, base) {
     base = base || ""
     var card = tile(root, config.title, base)
@@ -612,18 +847,39 @@
     var compareQuery = config.compare && (config.compare.query || config.query)
     var allSeries = config.series || []
     var rightIndex = allSeries.findIndex(function (series) { return series.axis === "right" })
+    var rawXs = []
+    // digest only: the points of the report's own week, when the line also runs over the weeks before it
+    var picked = []
     var paint = mountChart(body, function (data) {
       var ax = axis()
       var scales = {
         x: Object.assign({}, ax, { stacked: !!config.stack, grid: { display: false } }),
         y: Object.assign({}, ax, {
-          // a value axis cropped above zero exaggerates every wiggle into a peak
-          beginAtZero: true,
+          // a value axis cropped above zero exaggerates every wiggle into a peak, unless a shaded usual range gives the scale
+          beginAtZero: !(isDigest() && config.band),
           stacked: !!config.stack,
           grid: { color: gridColor() },
           ticks: Object.assign({}, ax.ticks, { callback: abbrev(config.format) })
         })
       }
+      // a digest leaves headroom over the tallest mark, so the top tick sits above it, and draws five ticks at most
+      if (isDigest()) {
+        scales.y.grace = "8%"
+        scales.y.ticks.maxTicksLimit = 5
+        scales.x.ticks = Object.assign({}, ax.ticks, {
+          font: function (context) { return Object.assign({}, ax.ticks.font, picked[context.tick ? context.tick.value : context.index] ? { weight: "700" } : {}) },
+          color: function (context) { return picked[context.tick ? context.tick.value : context.index] ? token("--fm-text-primary", "#1c1c1e") : ax.ticks.color },
+          // dates thin out counting back from the report week's (else the last), so its date always reads
+          autoSkip: false,
+          maxRotation: 0,
+          callback: function (value, index) {
+            var count = this.chart.data.labels.length
+            var anchor = picked.lastIndexOf(true) >= 0 ? picked.lastIndexOf(true) : count - 1
+            var every = Math.ceil(count / Math.max(2, Math.floor(this.width / 64)))
+            return Math.abs(index - anchor) % every === 0 ? this.getLabelForValue(value) : ""
+          }
+        })
+      }
       if (rightIndex >= 0) {
         // two units on one chart: each axis says which series it reads, in that series' colour
         var left = data.datasets.filter(function (set) { return set.yAxisID !== "y1" && !set.isCompare })
@@ -641,11 +897,17 @@
           ticks: Object.assign({}, ax.ticks, { callback: abbrev(config.rightFormat) })
         })
       }
-      return {
+      var built = {
         type: "line",
         data: data,
         options: Object.assign({}, chartOpts(), { scales: scales })
       }
+      // digest only: notes pinned above the points they name
+      if (config.annotations && config.annotations.length) {
+        built.options.layout = { padding: { top: 26 } }
+        built.plugins = [notesPlugin(config.annotations, function () { return rawXs })]
+      }
+      return built
     })
 
     function refresh() {
@@ -654,16 +916,25 @@
         paint(null, emptyNote(config))
         return
       }
+      rawXs = rows.map(function (row) { return String(row[config.x]) })
+      // a line over days reads them as days, whether or not its config names the axis's type
+      var days = config.xType === "day" || (!config.xType && rows.length > 0 && rows.every(function (row) { return plainDay(row[config.x]) }))
+      var hits = isDigest() && days ? rows.map(function (row) { return inReportWeek(row[config.x]) }) : []
+      picked = hits.some(Boolean) && !hits.every(Boolean) ? hits : []
       var labels = rows.map(function (row) {
         var raw = row[config.x]
-        if (config.xType === "day") {
-          var day = new Date(raw)
+        if (days) {
+          var at = plainDay(raw) || raw
+          var day = new Date(at)
           if (!isNaN(day)) {
-            return day.toLocaleDateString(locale(), {
+            var date = day.toLocaleDateString(locale(), {
               month: "short",
               day: "numeric",
-              timeZone: zoneFor(raw)
+              timeZone: zoneFor(at)
             })
+            // a digest's week reads by weekday first, the date under it
+            if (isDigest() && rows.length <= 14) return [day.toLocaleDateString(locale(), { weekday: "short", timeZone: zoneFor(at) }), date]
+            return date
           }
         }
         return String(raw)
@@ -675,25 +946,28 @@
       // few enough days to read one by one: draw the points, or the line is a bare triangle
       var marker = rows.length <= 14 ? 3 : 0
       var barIndex = 0
+      // several bar series fade into one another, so only a lone series dims the weeks outside the report's; the axis still bolds its week
+      var fades = (config.series || []).filter(function (series) { return series.kind === "bar" }).length === 1
+      var palette = familyPalette(config)
       var datasets = (config.series || []).map(function (series, index) {
         var data = rows.map(function (row) { return num(row[series.y]) })
         var axisId = series.axis === "right" ? "y1" : undefined
         if (series.kind === "bar") {
           // stacked bars step within their family so the parts read as one whole
-          var fill = barIndex++ === 0 ? barColor() : tone(BAR_TONES.vertical, barIndex - 1)
+          var fill = palette ? tone(palette, index) : barIndex++ === 0 ? barColor() : tone(BAR_TONES.vertical, barIndex - 1)
           return {
             label: series.label,
             type: "bar",
             data: data,
-            backgroundColor: fill,
+            backgroundColor: picked.length && fades ? picked.map(function (hit) { return hit ? fill : rgba(fill, 0.35) }) : fill,
             borderWidth: 0,
-            maxBarThickness: 20,
+            maxBarThickness: barThickness(),
             stack: config.stack ? "stack" : undefined,
             yAxisID: axisId,
             order: 2
           }
         }
-        var color = lineColor(lineIndex++)
+        var color = palette ? tone(palette, index) : lineColor(lineIndex++)
         var area = series.kind === "area"
         return {
           label: series.label,
@@ -704,7 +978,9 @@
           borderWidth: 2,
           tension: 0,
           stepped: series.stepped ? "before" : false,
-          pointRadius: marker,
+          pointRadius: picked.length ? picked.map(function (hit) { return hit ? 5.5 : marker }) : marker,
+          pointBorderColor: picked.length ? picked.map(function (hit) { return hit ? token("--fm-bg-default", "#fff") : color }) : color,
+          pointBorderWidth: picked.length ? picked.map(function (hit) { return hit ? 2 : 1 }) : 1,
           pointHoverRadius: 4,
           fill: area ? (config.stack ? "stack" : "origin") : false,
           // a line is never part of a stack: each one runs on its own
@@ -715,14 +991,15 @@
       })
       if (config.compare) {
         var compareRows = FM.rows(compareQuery)
-        datasets.push({
-          label: config.compare.label || "Previous period",
+        var compareSet = {
+          label: config.compare.label || (isDigest() ? text("digest.lastWeek", "Last week") : "Previous period"),
           type: "line",
           isCompare: true,
           // aligned by row index: both windows are the same length by construction
           data: rows.map(function (row, index) {
             var match = compareRows[index]
-            return match ? num(match[config.compare.y]) : null
+            if (!match || (isDigest() && (match[config.compare.y] === null || match[config.compare.y] === undefined))) return null
+            return num(match[config.compare.y])
           }),
           borderColor: compareColor(),
           borderDash: [4, 4],
@@ -732,13 +1009,163 @@
           pointHoverRadius: 4,
           fill: false,
           order: 3
+        }
+        // digest days: the same day before is a ring over its bar, not a line across the days
+        if (comparePoints(config)) {
+          compareSet.showLine = false
+          compareSet.order = 0
+          compareSet.pointRadius = 4.5
+          compareSet.pointHoverRadius = 5.5
+          compareSet.pointBorderWidth = 1.8
+          compareSet.pointBackgroundColor = token("--fm-bg-default", "#fff")
+          compareSet.pointBorderColor = compareColor()
+        }
+        datasets.push(compareSet)
+      }
+      // digest only: the usual range, shaded between a low and a high column of rows keyed by x
+      if (config.band) {
+        var byX = {}
+        FM.rows(config.band.query || config.query).forEach(function (row) {
+          byX[String(row[config.x])] = row
         })
+        var bandLabel = config.band.label || text("digest.usualRange", "Usual range")
+        var bandOf = function (key) {
+          return rows.map(function (row) {
+            var match = byX[String(row[config.x])]
+            return match && match[key] !== null && match[key] !== undefined ? num(match[key]) : null
+          })
+        }
+        var bandFill = rgba(token("--fm-feature-aqua-fg", "#0a5384"), 0.14)
+        var lows = bandOf(config.band.low)
+        var highs = bandOf(config.band.high)
+        if ((config.series || [])[0] && config.series[0].kind === "bar") {
+          // each bar's usual range is a pale box behind it, as wide as a day
+          datasets.push({
+            label: bandLabel,
+            type: "bar",
+            isBand: true,
+            data: lows.map(function (low, index) { return low === null || highs[index] === null ? null : [low, highs[index]] }),
+            backgroundColor: rgba(token("--fm-text-disabled", "#aeaeb2"), 0.28),
+            borderWidth: 0,
+            borderRadius: px("--fm-radius-xs", 4),
+            grouped: false,
+            maxBarThickness: 34,
+            order: 5
+          })
+        } else {
+          datasets.push(
+            { label: bandLabel, type: "line", isBand: true, data: lows, borderWidth: 0, pointRadius: 0, pointHoverRadius: 0, tension: 0, fill: false, order: 4 },
+            { label: bandLabel, type: "line", isBand: true, data: highs, borderWidth: 0, pointRadius: 0, pointHoverRadius: 0, tension: 0, backgroundColor: bandFill, fill: "-1", order: 4 }
+          )
+        }
       }
       paint({ labels: labels, datasets: datasets }, null)
     }
 
+    if (isDigest() && (config.band || config.compare || (config.series || []).length > 1)) card.appendChild(seriesKey(config))
+    else if (config.band) card.appendChild(el("div", "fmr-note fmr-band-note", "▨ " + (config.band.label || text("digest.usualRange", "Usual range"))))
     FM.onRows(config.query, refresh)
     if (compareQuery && compareQuery !== config.query) FM.onRows(compareQuery, refresh)
+    if (config.band && config.band.query && config.band.query !== config.query && config.band.query !== compareQuery) FM.onRows(config.band.query, refresh)
+  }
+
+  /** In a digest, a comparison over bars reads as a ring per bar. */
+  function comparePoints(config) {
+    return isDigest() && !!(config.series || [])[0] && config.series[0].kind === "bar"
+  }
+
+  /** A digest chart's key: each series in its colour, the comparison line and the usual range. */
+  function seriesKey(config) {
+    var key = el("div", "fmr-d-legend fmr-d-key")
+    var bars = 0
+    var lines = 0
+    var palette = familyPalette(config)
+    ;(config.series || []).forEach(function (series, index) {
+      var bar = series.kind === "bar"
+      var color = palette ? tone(palette, index) : bar ? (bars++ === 0 ? barColor() : tone(BAR_TONES.vertical, bars - 1)) : lineColor(lines++)
+      var entry = swatch(bar ? "" : "line", series.label || series.y)
+      entry.firstChild.style[bar ? "background" : "borderColor"] = color
+      key.appendChild(entry)
+    })
+    if (config.compare) {
+      var compare = swatch(comparePoints(config) ? "ring" : "line dash", config.compare.label || text("digest.lastWeek", "Last week"))
+      compare.firstChild.style.borderColor = compareColor()
+      key.appendChild(compare)
+    }
+    if (config.band) key.appendChild(swatch("band", config.band.label || text("digest.usualRange", "Usual range")))
+    return key
+  }
+
+  /** Draws each note above the highest mark at its x, in the house's annotation colour. */
+  function notesPlugin(notes, xs) {
+    return {
+      id: "fmrNotes",
+      afterDatasetsDraw: function (chart) {
+        var ctx = chart.ctx
+        var keys = xs()
+        ctx.save()
+        ctx.font = "600 12px " + (getComputedStyle(document.body).fontFamily || "sans-serif")
+        ctx.fillStyle = token("--fm-feature-grape-fg", "#512191")
+        ctx.strokeStyle = ctx.fillStyle
+        ctx.lineWidth = 1.2
+        var area = chart.chartArea
+        var drawn = []
+        notes.forEach(function (note) {
+          var index = keys.indexOf(String(note.x))
+          if (index < 0) return
+          var marks = []
+          chart.data.datasets.forEach(function (_, datasetIndex) {
+            var meta = chart.getDatasetMeta(datasetIndex)
+            if (!meta.hidden && meta.data[index]) marks.push(meta.data[index])
+          })
+          var label = String(note.label)
+          var w = ctx.measureText(label).width + 8
+          if (chart.options.indexAxis === "y") {
+            // a bar on its side: the note in its row past the bar's end, or past zero when the end leaves no room, never over the names
+            if (!marks.length) return
+            var bar = marks.reduce(function (far, one) { return Math.abs(one.x - one.base) > Math.abs(far.x - far.base) ? one : far })
+            var rightward = bar.x >= bar.base
+            var fits = function (at) { return at >= area.left && at + w <= chart.width }
+            var left = rightward ? bar.x + 6 : bar.x - 6 - w
+            if (!fits(left)) left = rightward ? bar.base - 6 - w : bar.base + 6
+            if (!fits(left)) left = Math.max(area.left, Math.min(left, chart.width - w))
+            ctx.textAlign = "center"
+            ctx.fillText(label, left + w / 2, bar.y + 4)
+            return
+          }
+          var x = chart.scales.x.getPixelForValue(index)
+          var x0 = Math.max(0, Math.min(x - w / 2, chart.width - w))
+          // an upright bar below zero ends at its foot: the note goes under it, or over zero when the axis leaves no room
+          var below = marks.length > 0 && marks.every(function (one) { return one.base !== undefined && one.y > one.base })
+          if (below) {
+            var foot = Math.max.apply(null, marks.map(function (one) { return one.y }))
+            var under = foot + 16
+            var low = under <= area.bottom - 2 ? under : marks[0].base - 8
+            // a note that would cover one already drawn moves a line further from its bar
+            var away = low === under ? 14 : -14
+            while (drawn.some(function (box) { return x0 < box.x1 && x0 + w > box.x0 && Math.abs(low - box.y) < 14 })) low += away
+            drawn.push({ x0: x0, x1: x0 + w, y: low })
+            ctx.textAlign = "center"
+            ctx.fillText(label, x0 + w / 2, low)
+            return
+          }
+          var top = area.bottom
+          marks.forEach(function (one) { top = Math.min(top, one.y) })
+          var ty = Math.max(12, top - 16)
+          // a note that would cover one already drawn moves up a line
+          while (drawn.some(function (box) { return x0 < box.x1 && x0 + w > box.x0 && Math.abs(ty - box.y) < 14 })) ty -= 14
+          ty = Math.max(12, ty)
+          drawn.push({ x0: x0, x1: x0 + w, y: ty })
+          ctx.textAlign = "center"
+          ctx.beginPath()
+          ctx.moveTo(x, top - 4)
+          ctx.lineTo(x, ty + 4)
+          ctx.stroke()
+          ctx.fillText(label, x0 + w / 2, ty)
+        })
+        ctx.restore()
+      }
+    }
   }
 
   // a series beyond the first steps within the family, then takes the next families' accents
@@ -765,6 +1192,17 @@
     return token(step[0], step[1])
   }
 
+  /** A digest chart's palette: its family's ink and accent first, then the other families' accents; grape when it names none; null outside a digest. */
+  function familyPalette(config) {
+    var family = (config && config.family) || "grape"
+    if (!isDigest() || ["grape", "blossom", "aqua", "mustard", "lime", "berry", "stone"].indexOf(family) < 0) return null
+    var steps = [["--fm-feature-" + family + "-fg", "#512191"], ["--fm-feature-" + family + "-accent", "#8f61e8"]]
+    ;["grape", "aqua", "mustard", "blossom", "lime", "berry", "stone"].forEach(function (other) {
+      if (other !== family) steps.push(["--fm-feature-" + other + "-accent", "#8f61e8"])
+    })
+    return steps
+  }
+
   /** The house legend, on the right of the card's title row, one swatch per series. */
   function headLegend(card, items) {
     var head = card.querySelector(".fmr-tile-head")
@@ -792,11 +1230,13 @@
     var body = part(el("div", "fmr-tile-body"), base + "chart")
     card.appendChild(body)
     var horizontal = config.orientation === "horizontal"
-    var tones = BAR_TONES[horizontal ? "horizontal" : "vertical"]
+    var tones = familyPalette(config) || BAR_TONES[horizontal ? "horizontal" : "vertical"]
     var series = config.series || [{ label: config.y, y: config.y }]
     var stacked = config.stack === "stacked" || config.stack === "percent"
     var percent = config.stack === "percent"
     var right = series.some(function (one) { return one.axis === "right" })
+    // a digest's upright bars turn on their side when their names do not fit, in the writer's colours; a second axis or a running share stays upright
+    var side = isDigest() && !horizontal && !right && !config.cumulative ? sideTurner(body, function () { paint.rebuild(); refresh() }) : null
     var current = []
     var total = 0
     var sums = []
@@ -822,13 +1262,18 @@
         beginAtZero: true,
         stacked: stacked,
         grid: { color: gridColor() },
-        ticks: Object.assign({}, ax.ticks, {
+        ticks: numberTicks(Object.assign({}, ax.ticks, {
           callback: percent ? function (value) { return value + "%" } : abbrev(config.format)
-        })
+        }))
       })
       if (percent) valueAxis.max = 100
+      else if (isDigest()) valueAxis.grace = "8%"
+      if (isDigest()) valueAxis.ticks.maxTicksLimit = 5
       var categoryAxis = Object.assign({}, ax, { stacked: stacked, grid: { display: false } })
-      var scales = horizontal ? { x: valueAxis, y: categoryAxis } : { x: categoryAxis, y: valueAxis }
+      var sideways = horizontal || (side && side.sideways)
+      if (sideways && isDigest()) categoryAxis.ticks = sideNames(ax)
+      else if (isDigest()) categoryAxis.ticks = Object.assign({}, ax.ticks, uprightNames(data.labels, side && function () { side.turn(true) }))
+      var scales = sideways ? { x: valueAxis, y: categoryAxis } : { x: categoryAxis, y: valueAxis }
       if (right) {
         // two units on one chart: each axis says which series it reads, in that series' colour
         var leftSeries = series.filter(function (one) { return one.axis !== "right" })
@@ -851,11 +1296,11 @@
           ticks: Object.assign({}, ax.ticks, { callback: function (value) { return value + "%" } })
         })
       }
-      return {
+      var built = {
         type: "bar",
         data: data,
         options: Object.assign({}, opts, {
-          indexAxis: horizontal ? "y" : "x",
+          indexAxis: sideways ? "y" : "x",
           onClick: config.clickSet
             ? function (event, elements) {
                 if (!elements || !elements.length) return
@@ -879,7 +1324,7 @@
                           if (!total) return context.formattedValue
                           return context.formattedValue + " · " + share(raw, total) + " of total"
                         }
-                        var amount = one.label + " · " + amountText(formatOf(one), raw)
+                        var amount = one.label + " · " + amountText(formatOf(one), raw, current.map(function (each) { return num(each[one.y]) }))
                         return percent ? amount + " · " + share(raw, sums[context.dataIndex]) : amount
                       }
                     }
@@ -889,7 +1334,18 @@
           scales: scales
         })
       }
+      if (side && side.sideways) built.options.onResize = side.onResize
+      else if (side) built.plugins = [turnPlugin(function () { side.turn(true) })]
+      // digest only: notes pinned by the bars they name, beside the side-turner's own
+      if (config.annotations && config.annotations.length) {
+        // room over upright bars, or at the right of bars on their side, where a note past zero or past a bar's end lands
+        var longest = Math.max.apply(null, config.annotations.map(function (note) { return String(note.label).length }))
+        built.options.layout = { padding: sideways ? { right: Math.min(160, longest * 7 + 8) } : { top: 26 } }
+        built.plugins = (built.plugins || []).concat(notesPlugin(config.annotations, function () { return current.map(function (row) { return String(row[config.x]) }) }))
+      }
+      return built
     })
+    var fitSide = isDigest() && (horizontal || side) ? sideFit(body) : null
 
     function refresh() {
       var rows = FM.rows(config.query).slice()
@@ -911,6 +1367,7 @@
         paint(null, emptyNote(config))
         return
       }
+      if (fitSide) fitSide(horizontal || side.sideways ? rows.map(function (row) { return String(row[config.x]) }) : null)
       var datasets = series.map(function (one, index) {
         return {
           // one unnamed series keeps chart.js's tooltip to the bare figure, as before
@@ -920,7 +1377,7 @@
             return percent ? (sums[at] ? (value / sums[at]) * 100 : 0) : value
           }),
           backgroundColor: tone(tones, index),
-          maxBarThickness: 20,
+          maxBarThickness: barThickness(),
           yAxisID: !horizontal && one.axis === "right" ? "y1" : undefined,
           order: 2
         }
@@ -946,10 +1403,12 @@
           order: 1
         })
       }
+      // a digest's bars over days name each day as a date, as its lines do
+      var days = isDigest() && rows.length > 0 && rows.every(function (row) { return plainDay(row[config.x]) })
       paint(
         {
           labels: rows.map(function (row) {
-            var label = String(row[config.x])
+            var label = days ? dayName(row[config.x]) : String(row[config.x])
             if (!config.share || !total) return label
             return label + " · " + share(num(row[config.y]), total)
           }),
@@ -1002,8 +1461,12 @@
     var sortKey = null
     var sortDir = "desc"
     var shareTotals = {}
+    var amountDigits = {}
+    var moneyDigitsOf = {}
 
     var columns = []
+    // digest only: the columns the writer marked with which way is good
+    var signed = (isDigest() && config.goodWhen) || {}
     ;(config.columns || []).forEach(function (column, index) {
       var format = column.format
       columns.push({
@@ -1013,7 +1476,16 @@
         align: column.align || (format && format !== "text" && format !== "datetime" && format !== "image" ? "right" : "left"),
         dim: column.dim,
         image: column.image,
-        format: format === "image" ? "image" : function (value) { return formatValue(format, value) }
+        className: signed[column.key] ? "fmr-d-signed" : undefined,
+        format: format === "image" ? "image" : function (value) {
+          // a digest's amount column keeps one precision down its rows: 2.0 beside 2.9
+          if (isDigest() && format === "amount" && value !== null && value !== undefined && value !== "") return intl(amountDigits[column.key] || 0).format(num(value))
+          // and its money column one too: whole units once any row reaches 1,000
+          var money = isDigest() && format === "money" && value !== null && value !== undefined && value !== ""
+          var shown = function (figure) { return money ? intl(moneyDigitsOf[column.key] === undefined ? 2 : moneyDigitsOf[column.key]).format(num(figure)) : formatValue(format, figure) }
+          if (!signed[column.key] || value === null || value === undefined || value === "" || !num(value)) return shown(value)
+          return (num(value) > 0 ? "▲ " : "▼ ") + shown(Math.abs(num(value)))
+        }
       })
       if (column.share) {
         columns.push({
@@ -1044,6 +1516,11 @@
 
     function ordered() {
       var rows = FM.rows(config.query).slice()
+      if (isDigest())
+        (config.columns || []).forEach(function (column) {
+          if (column.format === "amount") amountDigits[column.key] = rows.reduce(function (most, row) { return Math.max(most, decimalsOf(row[column.key])) }, 0)
+          if (column.format === "money") moneyDigitsOf[column.key] = moneyDigits(rows.map(function (row) { return row[column.key] }))
+        })
       ;(config.columns || []).forEach(function (column) {
         if (!column.share) return
         var denominator = shareDenominator(column)
@@ -1088,9 +1565,30 @@
           sortKey = column.key
         }
         markSorted(th, sortDir)
-        control.setRows(ordered())
+        var sorted = ordered()
+        control.setRows(sorted)
+        dressRows(sorted)
       })
     })
+    // digest only, after the table's last render: each cell carries its column's label, which a phone shows beside it,
+    // and a marked column reads green where it moved the good way and red where it moved the bad way
+    function dressRows(rows) {
+      if (!isDigest()) return
+      var trs = control.element.querySelectorAll("tbody tr")
+      rows.forEach(function (row, at) {
+        if (!trs[at]) return
+        columns.forEach(function (column, index) {
+          var cell = trs[at].children[index]
+          if (!cell) return
+          cell.setAttribute("data-label", column.label)
+          var goodWhen = signed[column.key]
+          if (!goodWhen || /\.share$/.test(column.part)) return
+          var value = num(row[column.key])
+          cell.classList.remove("up", "down")
+          if (value) cell.classList.add((value > 0) === (goodWhen === "up") ? "up" : "down")
+        })
+      })
+    }
     // before any click, the arrow shows the one column the query's order follows
     function markFollowed(rows) {
       if (sortKey) return
@@ -1113,6 +1611,7 @@
         control.setRows(rows)
         // the query bounded the ranking; the pager says how long the set behind it is
         if (queryId === config.query && control.setTotal) control.setTotal(FM.total(queryId))
+        dressRows(rows)
       })
     }
     subscribe(config.query)
@@ -1310,6 +1809,7 @@
       body.appendChild(emptyNote(config))
       return
     }
+    var dayFigure = heatFigure(format, keys.map(function (key) { return byDay[key] }))
     var DAY = 86400000
     var first = Date.parse(keys[0] + "T00:00:00Z")
     var last = Date.parse(keys[keys.length - 1] + "T00:00:00Z")
@@ -1368,7 +1868,7 @@
           cell.title = when + text("heatmap.noData", "No data")
         } else {
           cell.style.background = heatShade(max ? byDay[key] / max : 0)
-          cell.title = when + formatValue(format, byDay[key])
+          cell.title = when + dayFigure(byDay[key])
         }
         grid.appendChild(cell)
       }
@@ -1378,6 +1878,12 @@
     body.appendChild(heatLegend())
   }
 
+  /** A heatmap figure, bare as its cells are small; in a digest, money at the precision of the figures read with it. */
+  function heatFigure(format, among) {
+    var digits = format === "money" && isDigest() ? moneyDigits(among) : null
+    return function (value) { return digits === null ? formatValue(format, value) : intl(digits).format(num(value)) }
+  }
+
   function renderHeatmap(root, config, base) {
     base = base || ""
     var card = tile(root, config.title, base)
@@ -1404,6 +1910,13 @@
       // shows the whole day, so a quiet hour reads as quiet rather than missing
       if (weekdays) ys = (config.weekStart === "sunday" ? [0, 1, 2, 3, 4, 5, 6] : [1, 2, 3, 4, 5, 6, 0])
       if (hours) xs = Array.apply(null, { length: 24 }).map(function (_, h) { return h })
+      // digest only: the hours between the first and last that traded, so a short day is not mostly empty
+      if (hours && config.trimHours && rows.length) {
+        var traded = rows.map(function (row) { return num(row[config.x]) })
+        var first = Math.min.apply(null, traded)
+        var last = Math.max.apply(null, traded)
+        xs = xs.filter(function (h) { return h >= first && h <= last })
+      }
       var names = weekdays ? weekdayNames() : null
       var yLabel = function (y) { return names ? names[y] : String(y) }
       var xLabel = function (x) { return hours ? String(x) + ":00" : String(x) }
@@ -1425,8 +1938,14 @@
       grid.style.gap = "2px"
       grid.style.alignItems = "center"
       grid.appendChild(el("div"))
-      xs.forEach(function (x) { grid.appendChild(heatLabel(hours ? String(x) : xLabel(x), "center")) })
+      xs.forEach(function (x) {
+        var label = heatLabel(hours ? String(x) : xLabel(x), "center")
+        if (hours && x % 2 === 1) label.className += " fmr-heatmap-odd"
+        grid.appendChild(label)
+      })
       if (config.rowTotals) grid.appendChild(heatLabel(text("heatmap.total", "Total"), "right"))
+      var cellFigure = heatFigure(format, Object.keys(cells).map(function (key) { return cells[key] }))
+      var totalFigure = heatFigure(format, Object.keys(totals).map(function (key) { return totals[key] }))
       ys.forEach(function (y) {
         grid.appendChild(heatLabel(yLabel(y), "left"))
         xs.forEach(function (x) {
@@ -1441,11 +1960,11 @@
             cell.title = where + text("heatmap.noData", "No data")
           } else {
             cell.style.background = heatShade(max ? value / max : 0)
-            cell.title = where + formatValue(format, value)
+            cell.title = where + cellFigure(value)
           }
           grid.appendChild(cell)
         })
-        if (config.rowTotals) grid.appendChild(heatLabel(formatValue(format, totals[y] || 0), "right"))
+        if (config.rowTotals) grid.appendChild(heatLabel(totalFigure(totals[y] || 0), "right"))
       })
       body.appendChild(grid)
       body.appendChild(heatLegend())
@@ -1499,7 +2018,9 @@
   // --- funnel, waterfall, donut: figures read from one row, or (a donut) one row per slice
 
   /** An amount as the merchant reads it in a label: the currency code, then the figure. */
-  function amountText(format, value) {
+  /** A figure with its unit; in a digest, money at the precision of the figures read with it (`among`). */
+  function amountText(format, value, among) {
+    if (format === "money" && isDigest()) return digestValue(format, value, moneyDigits(among || [value]))
     if (format === "money") {
       var currency = envOf("currency", "")
       return (currency ? currency + " " : "") + formatValue("money", value)
@@ -1544,7 +2065,7 @@
               callbacks: {
                 label: function (context) {
                   var index = context.dataIndex
-                  var line = amountText(config.format, values[index])
+                  var line = amountText(config.format, values[index], values)
                   if (index === 0) return line
                   var of = function (base) {
                     return text("funnel.ofStep", "{share} of {step}")
@@ -1575,7 +2096,7 @@
       paint(
         {
           labels: steps.map(function (step, index) {
-            var figure = amountText(config.format, values[index])
+            var figure = amountText(config.format, values[index], values)
             return [step.label, index === 0 ? figure : figure + " · " + share(values[index], values[0])]
           }),
           datasets: [
@@ -1596,6 +2117,16 @@
     FM.onRows(config.query, refresh)
   }
 
+  /** Where a digest waterfall's totals start: zero, unless every step together is under a quarter of the tallest bar; then as far under the lowest point as the steps span, so they fill half the chart. */
+  function waterfallFloor(bars) {
+    var ends = []
+    bars.forEach(function (bar) { ends.push(bar.to); if (!bar.total) ends.push(bar.from) })
+    var low = Math.min.apply(null, ends)
+    var high = Math.max.apply(null, ends)
+    if (!(low > 0) || low === high || (high - low) * 4 >= high) return 0
+    return low - (high - low)
+  }
+
   function renderWaterfall(root, config, base) {
     base = base || ""
     var card = tile(root, config.title, base)
@@ -1604,10 +2135,26 @@
     card.appendChild(body)
     var steps = config.steps || []
     var shown = []
+    // a digest writes each bar's figure at its end, so a step too small to see beside the totals still reads
+    var side = isDigest() ? sideTurner(body, function () { paint.rebuild(); refresh() }) : null
+    function figures() {
+      var digits = config.format === "money" ? moneyDigits(shown.map(function (bar) { return bar.change })) : null
+      return shown.map(function (bar) {
+        var bare = digits === null ? formatValue(config.format || "amount", Math.abs(bar.change)) : intl(digits).format(Math.abs(bar.change))
+        return (bar.change < 0 ? "−" : bar.total ? "" : "+") + bare
+      })
+    }
     var paint = mountChart(body, function (data) {
       var opts = chartOpts()
       var ax = axis()
-      return {
+      var category = Object.assign({}, ax, { grid: { display: false } })
+      var value = Object.assign({}, ax, {
+        // a digest's totals rise from the floor its data sets, zero unless the steps would not show
+        beginAtZero: !side,
+        grid: { color: gridColor() },
+        ticks: numberTicks(Object.assign({}, ax.ticks, { callback: abbrev(config.format) }))
+      })
+      var built = {
         type: "bar",
         data: data,
         options: Object.assign({}, opts, {
@@ -1617,22 +2164,31 @@
                 // the bar's direction carries the sign, per the chart guide
                 label: function (context) {
                   var bar = shown[context.dataIndex]
-                  return bar ? amountText(config.format, Math.abs(bar.change)) : ""
+                  return bar ? amountText(config.format, Math.abs(bar.change), shown.map(function (each) { return each.change })) : ""
                 }
               }
             })
           }),
-          scales: {
-            x: Object.assign({}, ax, { grid: { display: false } }),
-            y: Object.assign({}, ax, {
-              beginAtZero: true,
-              grid: { color: gridColor() },
-              ticks: Object.assign({}, ax.ticks, { callback: abbrev(config.format) })
-            })
-          }
+          scales: { x: category, y: value }
         })
       }
+      if (!side) return built
+      value.ticks.maxTicksLimit = 5
+      built.plugins = [figuresPlugin(figures)]
+      if (side.sideways) {
+        category.ticks = sideNames(ax)
+        built.options.indexAxis = "y"
+        built.options.scales = { x: value, y: category }
+        built.options.layout = { padding: { right: figures().reduce(function (most, label) { return Math.max(most, textWidth(measurer(), figureFont(), label)) }, 0) + 8 } }
+        built.options.onResize = side.onResize
+      } else {
+        category.ticks = Object.assign({}, ax.ticks, uprightNames(data.labels, function () { side.turn(true) }))
+        built.options.layout = { padding: { top: 18 } }
+        built.plugins.push(turnPlugin(function () { side.turn(true) }, figures))
+      }
+      return built
     })
+    var fitSide = side ? sideFit(body) : null
 
     function refresh() {
       var row = figureRow(config)
@@ -1650,17 +2206,20 @@
         paint(null, emptyNote(config))
         return
       }
+      var floor = side ? waterfallFloor(shown) : 0
       var total = token("--fm-feature-grape-fg", "#512191")
       var stepColor = token("--fm-feature-grape-accent", "#8f61e8")
+      if (fitSide) fitSide(side.sideways ? shown.map(function (bar) { return bar.label }) : null)
       paint(
         {
           labels: shown.map(function (bar) { return bar.label }),
           datasets: [
             {
-              data: shown.map(function (bar) { return [bar.from, bar.to] }),
+              data: shown.map(function (bar) { return [bar.total ? floor : bar.from, bar.to] }),
               backgroundColor: shown.map(function (bar) { return bar.total ? total : stepColor }),
               borderWidth: 0,
               maxBarThickness: 36,
+              minBarLength: side ? 2 : undefined,
               borderSkipped: false
             }
           ]
@@ -1711,7 +2270,7 @@
             callbacks: {
               label: function (context) {
                 var value = Number(context.raw) || 0
-                return amountText(config.format, value) + " · " + share(value, whole)
+                return amountText(config.format, value, context.dataset.data) + " · " + share(value, whole)
               }
             }
           })
@@ -1754,9 +2313,10 @@
         return
       }
       legend.hidden = false
+      var palette = familyPalette(config) || SLICE_TONES
       var colors = list.map(function (_slice, index) {
-        var tone = SLICE_TONES[index % SLICE_TONES.length]
-        return token(tone[0], tone[1])
+        var step = palette[index % palette.length]
+        return token(step[0], step[1])
       })
       list.forEach(function (slice, index) {
         var item = el("span", "fmr-legend-item")
@@ -1764,7 +2324,7 @@
         swatch.style.background = colors[index]
         item.appendChild(swatch)
         item.appendChild(
-          document.createTextNode(slice.label + " · " + amountText(config.format, slice.value) + " · " + share(slice.value, whole))
+          document.createTextNode(slice.label + " · " + amountText(config.format, slice.value, list.map(function (each) { return each.value })) + " · " + share(slice.value, whole))
         )
         legend.appendChild(item)
       })
@@ -1827,18 +2387,54 @@
     return point.lon >= box[0] && point.lon <= box[2] && point.lat >= box[1] && point.lat <= box[3]
   }
 
-  /**
-   * The country holding most of the points, on district lines when they sit within one metro
-   * area and every one of them falls inside the district layer, on state lines otherwise.
-   */
+  var boxCache = Object.create(null)
+  function layerBoxes(layer) {
+    if (!boxCache[layer.id]) boxCache[layer.id] = layerFeatures(layer).map(featureBox)
+    return boxCache[layer.id]
+  }
+
+  /** Whether a point falls inside an outline: an odd number of ring edges to its east. */
+  function inside(feature, point) {
+    var geometry = feature.geometry || {}
+    var polygons = geometry.type === "Polygon" ? [geometry.coordinates] : geometry.type === "MultiPolygon" ? geometry.coordinates : []
+    return polygons.some(function (rings) {
+      var odd = false
+      rings.forEach(function (ring) {
+        for (var i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+          var a = ring[i]
+          var b = ring[j]
+          if (a[1] > point.lat !== b[1] > point.lat && point.lon < ((b[0] - a[0]) * (point.lat - a[1])) / (b[1] - a[1]) + a[0]) odd = !odd
+        }
+      })
+      return odd
+    })
+  }
+
+  /** How many of the points fall inside the layer's outlines. */
+  function landed(layer, points) {
+    var features = layerFeatures(layer)
+    var boxes = layerBoxes(layer)
+    return points.filter(function (point) {
+      return features.some(function (feature, index) { return within(boxes[index], point) && inside(feature, point) })
+    }).length
+  }
+
+  /** The country whose outlines hold most of the points, on district lines when they sit in one metro area inside the district layer, else on state lines. */
   function pointLayer(points) {
     var layers = FM.geoOutlines.layers
     var held = {}
     layers.forEach(function (layer) {
-      var count = points.filter(function (point) { return within(layer.bbox, point) }).length
-      if (count) held[layer.country] = Math.max(held[layer.country] || 0, count)
+      var near = points.filter(function (point) { return within(layer.bbox, point) })
+      if (!near.length) return
+      var one = held[layer.country] || (held[layer.country] = { landed: 0, near: 0, area: Infinity })
+      one.landed = Math.max(one.landed, landed(layer, near))
+      one.near = Math.max(one.near, near.length)
+      one.area = Math.min(one.area, (layer.bbox[2] - layer.bbox[0]) * (layer.bbox[3] - layer.bbox[1]))
     })
-    var country = Object.keys(held).sort(function (a, b) { return held[b] - held[a] })[0]
+    // a point just off a simplified coast lands in no outline: then the boxes decide, the tighter on a tie
+    var country = Object.keys(held).sort(function (a, b) {
+      return held[b].landed - held[a].landed || held[b].near - held[a].near || held[a].area - held[b].area
+    })[0]
     if (!country) return null
     var own = layers.filter(function (layer) { return layer.country === country })
     var lats = points.map(function (point) { return point.lat })
@@ -1932,7 +2528,7 @@
                 },
                 label: function (context) {
                   var row = drawn[context.dataIndex]
-                  return row && config.value ? amountText(config.format, num(row[config.value])) : ""
+                  return row && config.value ? amountText(config.format, num(row[config.value]), drawn.map(function (each) { return num(each[config.value]) })) : ""
                 }
               }
             })
@@ -1987,7 +2583,7 @@
         }
         item.appendChild(mark)
         item.appendChild(el("span", "fmr-place-name", String(entry.row[byRegion ? config.region : config.label] ?? "")))
-        item.appendChild(el("span", "fmr-place-value", amountText(config.format, entry.value)))
+        item.appendChild(el("span", "fmr-place-value", amountText(config.format, entry.value, order.map(function (each) { return each.value }))))
         item.addEventListener("mouseenter", function () { pointAt(entry.index) })
         item.addEventListener("mouseleave", function () { pointAt(null) })
         if (config.clickSet) {
@@ -2108,7 +2704,7 @@
         return Object.assign({}, ax, {
           grid: { color: gridColor() },
           title: name ? { display: true, text: name, color: token("--fm-text-muted", "#6b6c70") } : { display: false },
-          ticks: Object.assign({}, ax.ticks, { callback: abbrev(format) })
+          ticks: numberTicks(Object.assign({}, ax.ticks, { callback: abbrev(format) }))
         })
       }
       return {
@@ -2132,11 +2728,12 @@
                 label: function (context) {
                   var row = current[context.dataIndex]
                   if (!row) return ""
+                  var column = function (key) { return current.map(function (each) { return num(each[key]) }) }
                   var lines = [
-                    (config.xLabel ? config.xLabel + " · " : "") + amountText(config.xFormat, num(row[config.x])),
-                    (config.yLabel ? config.yLabel + " · " : "") + amountText(config.yFormat, num(row[config.y]))
+                    (config.xLabel ? config.xLabel + " · " : "") + amountText(config.xFormat, num(row[config.x]), column(config.x)),
+                    (config.yLabel ? config.yLabel + " · " : "") + amountText(config.yFormat, num(row[config.y]), column(config.y))
                   ]
-                  if (config.size) lines.push(amountText(config.sizeFormat, num(row[config.size])))
+                  if (config.size) lines.push(amountText(config.sizeFormat, num(row[config.size]), column(config.size)))
                   return lines
                 }
               }
@@ -2207,7 +2804,8 @@
             tooltip: Object.assign({}, opts.plugins.tooltip, {
               callbacks: {
                 label: function (context) {
-                  return context.dataset.label + " · " + amountText(config.format, Number(context.raw) || 0)
+                  var among = context.chart.data.datasets.reduce(function (all, one) { return all.concat(one.data) }, [])
+                  return context.dataset.label + " · " + amountText(config.format, Number(context.raw) || 0, among)
                 }
               }
             })
@@ -2318,7 +2916,7 @@
                 label: function (context) {
                   var row = current[context.dataIndex]
                   if (!row) return ""
-                  return String(row[config.from]) + " → " + String(row[config.to]) + " · " + amountText(config.format, num(row[config.value]))
+                  return String(row[config.from]) + " → " + String(row[config.to]) + " · " + amountText(config.format, num(row[config.value]), current.map(function (each) { return num(each[config.value]) }))
                 }
               }
             })
@@ -2391,6 +2989,454 @@
     FM.onRows(config.query, refresh)
   }
 
+  // --- digest mode: how a saved weekly digest's frame draws canvas components; a builder canvas never turns it on
+
+  var FAMILIES = ["grape", "blossom", "aqua", "mustard", "lime", "berry", "stone"]
+
+  // every rule sits under the digest's root class or a digest component's own class, so a builder canvas looks as before
+  var DIGEST_STYLE =
+    "html.fmr-digest{--fmr-display:'FM Digest Display','Avenir Next','Segoe UI',system-ui,sans-serif}" +
+    "html.fmr-digest body{background:var(--fm-bg-canvas,#f3f3f6)}" +
+    // a wider screen holds the page to 1,680 px, centred; words keep their reading measure by running in columns, not by a narrow page
+    "html.fmr-digest #report{gap:14px;padding:16px 18px 32px;align-items:stretch;max-width:1680px;margin-inline:auto}" +
+    "html.fmr-digest #report>section,html.fmr-digest #report>.fm-group>section{container:fmr-part/inline-size}" +
+    "html.fmr-digest #report>section>.fmr-card,html.fmr-digest #report>section>.fmr-d-card,html.fmr-digest #report>.fm-group>section>.fmr-card{height:100%;box-sizing:border-box}" +
+    "html.fmr-digest #report>section.fmr-d-apart,html.fmr-digest #report>.fm-group>section.fmr-d-apart{grid-column:1/-1}" +
+    // a story is one card: its head, its words in one column and its charts drawn flat on it, every part's content on the charts' own 20 px inset
+    "html.fmr-digest #report>.fm-group{background:var(--fm-bg-default,#fff);border:1px solid var(--fm-border-default,#ebebef);border-radius:14px;padding:24px 0 8px;gap:14px 8px;align-items:stretch}" +
+    "html.fmr-digest #report>.fm-group:not(:has(>section:last-child>.fmr-card)){padding-bottom:24px}" +
+    "html.fmr-digest .fm-group .fmr-card{background:none;border-color:transparent}" +
+    "html.fmr-digest .fm-group .fmr-d-chapter{padding:0 20px}" +
+    "html.fmr-digest .fm-group .fmr-d-note{border:0;padding:0 20px;margin:0}html.fmr-digest .fm-group .fmr-d-note-body{columns:auto;max-width:68ch}html.fmr-digest .fm-group .fmr-d-note p:not(:last-child){margin-bottom:12px}" +
+    "html.fmr-digest .fmr-card{border-radius:14px}" +
+    FAMILIES.map(function (name) {
+      return ".fmr-fam-" + name + "{--fmr-c:var(--fm-feature-" + name + "-fg);--fmr-ca:var(--fm-feature-" + name + "-accent);--fmr-cb:var(--fm-feature-" + name + "-bg)}"
+    }).join("") +
+    ".fmr-digest .fmr-tile-title{font-weight:650}" +
+    ".fmr-digest-takeaway{margin:2px 16px 0;color:var(--fm-text-secondary,#3a3a40);font-size:13.5px;line-height:1.5}" +
+    ".fmr-d-card{background:var(--fm-bg-default,#fff);border:1px solid var(--fm-border-default,#ebebef);border-radius:14px;padding:18px 20px;min-width:0}" +
+    ".fmr-d-eyebrow{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--fm-text-muted,#6b6c70)}" +
+    ".fmr-d-title{font-weight:650;font-size:15px;line-height:1.35;margin:2px 0 0}" +
+    // a chip keeps its own height, whatever height the tiles' shared row gives the chips
+    ".fmr-d-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-content:flex-start}" +
+    ".fmr-d-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.45;white-space:nowrap;font-variant-numeric:tabular-nums}" +
+    ".fmr-d-chip small{font-weight:500;opacity:.8;font-size:12px}" +
+    ".fmr-d-chip.up{color:var(--fm-text-on-success,#1f7735);background:var(--fm-bg-success,#ebf9ee)}" +
+    ".fmr-d-chip.down{color:var(--fm-text-error,#99231d);background:var(--fm-bg-error,#ffebea)}" +
+    ".fmr-d-chip.flat{color:var(--fm-text-muted,#6b6c70);background:var(--fm-bg-secondary,#f5f5f7)}" +
+    ".fmr-d-brief{padding:26px 28px 24px;border-radius:18px;container-type:inline-size}" +
+    ".fmr-d-docket{display:flex;flex-wrap:wrap;gap:4px 14px;padding-bottom:12px;margin-bottom:16px;border-bottom:1.5px dashed var(--fm-border-strong,#dcdce2)}" +
+    ".fmr-d-brief h1{font:800 40px/1.06 var(--fmr-display);letter-spacing:-.022em;margin:0;text-wrap:balance}" +
+    ".fmr-d-lead{font-size:16px;line-height:1.55;color:var(--fm-text-secondary,#3a3a40);margin:14px 0 0;max-width:58ch}.fmr-d-brief-body>.fmr-d-lead:first-child{margin-top:0}" +
+    // a brief with the row to itself sets its headline beside the summary, or a lone summary in two columns
+    "@container (min-width:760px){.fmr-d-brief-body.has-head{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px;align-items:start}.fmr-d-brief-body.has-head .fmr-d-lead{margin-top:4px}.fmr-d-brief-body:not(.has-head) .fmr-d-lead{max-width:none;column-count:2;column-gap:28px}}" +
+    ".fmr-d-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none;background:var(--fmr-ca,#8f61e8)}" +
+    ".fmr-d-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:6px;font-size:12px;color:var(--fm-text-muted,#6b6c70)}.fmr-d-legend span{display:inline-flex;align-items:center;gap:6px}" +
+    ".fmr-d-legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block}.fmr-d-legend .sw.hi{background:var(--fmr-c,#512191);border-radius:50%}.fmr-d-legend .sw.band{background:var(--fm-bg-secondary,#f5f5f7);border:1px solid var(--fm-border-default,#ebebef)}" +
+    ".fmr-d-legend .sw.bar{background:var(--fmr-ca,#8f61e8);border-radius:2px}.fmr-d-legend .sw.whisker{width:10px;border-radius:0;border-top:1.5px solid var(--fmr-c,#512191);border-bottom:1.5px solid var(--fmr-c,#512191);background:linear-gradient(var(--fmr-c,#512191),var(--fmr-c,#512191)) center/1.5px 100% no-repeat}.fmr-d-legend .sw.line{height:0;width:16px;border-radius:0;border-top:2.5px solid var(--fmr-ca,#8f61e8)}.fmr-d-legend .sw.dash{border-top-style:dashed}.fmr-d-legend .sw.ring{width:9px;height:9px;border-radius:50%;border:1.8px solid;background:var(--fm-bg-default,#fff)}.fmr-d-key{margin:4px 16px 0}" +
+    ".fmr-d-svg{display:block;width:100%;overflow:visible}" +
+    ".fmr-d-svg .spark-area{fill:var(--fmr-cb,#eddfff)}.fmr-d-svg .spark-line{fill:none;stroke:var(--fmr-ca,#8f61e8);stroke-width:1.8;stroke-linejoin:round}.fmr-d-svg .spark-dot{fill:var(--fmr-c,#512191)}" +
+    ".fmr-d-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}" +
+    ".fmr-d-kpi{display:grid;row-gap:6px;align-content:start;grid-row:span 5;grid-template-rows:subgrid}" +
+    ".fmr-d-kpi .fmr-d-value{font:750 28px/1.05 var(--fmr-display);letter-spacing:-.015em;font-variant-numeric:tabular-nums;margin-top:2px}" +
+    ".fmr-d-kpi .fmr-d-value small{font:700 15px/1 var(--fmr-display);color:var(--fm-text-muted,#6b6c70);margin-right:3px}" +
+    ".fmr-d-base{font-size:12px;color:var(--fm-text-muted,#6b6c70)}" +
+    ".fmr-d-chapter{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end;padding:26px 4px 4px}" +
+    ".fmr-d-chapter .no{flex:none;font:800 54px/.8 var(--fmr-display);color:var(--fmr-c)}" +
+    // a head too narrow for its title and its key figures side by side puts the figures under the title
+    ".fmr-d-chapter .heading{flex:1 1 18em;min-width:0}" +
+    ".fmr-d-chapter .label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fmr-c);display:inline-flex;gap:8px;align-items:center}.fmr-d-chapter .label .n{display:none}" +
+    ".fmr-d-chapter h2{font:750 26px/1.15 var(--fmr-display);letter-spacing:-.015em;margin:8px 0 0;max-width:36ch;text-wrap:balance}" +
+    ".fmr-d-chapter .stats{display:flex;gap:22px;margin-left:auto}.fmr-d-chapter .stat{text-align:right}" +
+    ".fmr-d-chapter .stat b{display:block;font:750 20px/1.1 var(--fmr-display);font-variant-numeric:tabular-nums}.fmr-d-chapter .stat span{font-size:12px;color:var(--fm-text-muted,#6b6c70)}" +
+    // a head beside its words starts level with them, its key figures under the title from the title's own edge
+    "@container fmr-part (max-width:760px){.fmr-d-chapter{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 18px;padding-top:2px}.fmr-d-chapter .stats{grid-column:2;margin-left:0;flex-wrap:wrap;gap:10px 18px}.fmr-d-chapter .stat{text-align:left}}" +
+    // a narrow story head lists its key figures, each value beside what it is
+    "@container fmr-part (max-width:760px){html.fmr-digest .fm-group .fmr-d-chapter .stats{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px;align-items:baseline}html.fmr-digest .fm-group .fmr-d-chapter .stat{display:contents}html.fmr-digest .fm-group .fmr-d-chapter .stat b{text-align:right}html.fmr-digest .fm-group .fmr-d-chapter .stat span{font-size:13px}}" +
+    // a story's words and a card's fill their width, in two columns of 22em at least once there is room, each paragraph whole when there are several; no line runs past half of 1,160 px
+    ".fmr-d-note{border-left:3px solid var(--fm-border-strong,#dcdce2);padding:2px 0 2px 16px;margin:0 4px}.fmr-d-note-body,.fmr-d-card-body{columns:22em 2;column-gap:40px;max-width:1160px}.fmr-d-note-body:has(p + p) p,.fmr-d-card-body:has(p + p) p{break-inside:avoid}" +
+    ".fmr-d-note p,.fmr-d-text p{font-size:15px;line-height:1.65;color:var(--fm-text-primary,#1c1c1e);margin:0 0 10px;white-space:pre-line}.fmr-d-note p:last-child,.fmr-d-text p:last-child{margin:0}" +
+    ".fmr-d-note b,.fmr-d-text b{font-weight:650;white-space:nowrap}.fmr-d-text .fmr-d-title{margin:0 0 8px}" +
+    // an idea for a story: a warm card, the last part of the story's own card
+    ".fmr-d-idea{background:var(--fm-bg-warning,#fff4e6);border:1px solid #f6d9c4;border-radius:12px;padding:18px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}html.fmr-digest .fm-group .fmr-d-idea{margin:4px 20px 0}" +
+    ".fmr-d-idea-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.fmr-d-idea-top>svg{flex:none;color:#9a3412}.fmr-d-idea-eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#9a3412}" +
+    ".fmr-d-idea-tag{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--fm-bg-default,#fff);border:1px solid var(--fm-border-strong,#dcdce2);font-size:12px;font-weight:600;color:var(--fm-text-secondary,#3a3a40)}" +
+    ".fmr-d-idea h3{margin:2px 0 0;font:650 19px/1.25 var(--fmr-display);color:var(--fm-text-primary,#1c1c1e)}.fmr-d-idea p{margin:0;max-width:78ch;font-size:15px;line-height:1.6;color:var(--fm-text-secondary,#3a3a40)}.fmr-d-idea p.fmr-d-idea-source{font-size:13px;color:var(--fm-text-muted,#6b6c70);overflow-wrap:anywhere}" +
+    ".fmr-d-idea-source a{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:#9a3412;text-decoration:underline;text-underline-offset:3px}.fmr-d-idea-source a:hover{color:#7c2d12}" +
+    // a list card: one item per line, each behind a small square in the accent
+    ".fmr-d-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.fmr-d-list li{position:relative;max-width:72ch;padding-left:22px;font-size:15px;line-height:1.55;color:var(--fm-text-primary,#1c1c1e)}" +
+    ".fmr-d-text .fmr-d-list{display:block;columns:22em 2;column-gap:40px;max-width:1160px}.fmr-d-text .fmr-d-list li{break-inside:avoid;margin:0 0 8px}.fmr-d-text .fmr-d-list li:last-child{margin:0}" +
+    ".fmr-d-list li::before{content:'';position:absolute;left:2px;top:.5em;width:9px;height:9px;box-sizing:border-box;border-radius:2px;border:1.8px solid var(--fm-feature-grape-accent,#8f61e8)}" +
+    "html.fmr-digest table.fmr-table th{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--fm-text-muted,#6b6c70)}" +
+    "html.fmr-digest table.fmr-table td{font-variant-numeric:tabular-nums}" +
+    "html.fmr-digest td.fmr-d-signed.up{color:var(--fm-text-on-success,#1f7735);font-weight:650}html.fmr-digest td.fmr-d-signed.down{color:var(--fm-text-error,#99231d);font-weight:650}" +
+    "@media (max-width:860px){" +
+    "html.fmr-digest #report{padding:12px 12px 28px;gap:12px}" +
+    ".fmr-d-brief{padding:20px 18px}.fmr-d-brief h1{font-size:29px}.fmr-d-lead{font-size:15px}" +
+    ".fmr-d-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.fmr-d-kpi .fmr-d-value{font-size:22px}.fmr-d-card{padding:16px}" +
+    ".fmr-d-idea{padding:16px}html.fmr-digest .fm-group .fmr-d-idea{margin:4px 0 0}.fmr-d-idea-tag{margin-left:0}" +
+    ".fmr-d-chapter{display:flex;gap:12px;padding-top:18px}.fmr-d-chapter .no{display:none}.fmr-d-chapter .label .n{display:inline;font:800 16px/1 var(--fmr-display)}.fmr-d-chapter h2{font-size:21px}" +
+    ".fmr-d-chapter .stats{flex-basis:100%;margin-left:0;gap:10px 18px;flex-wrap:wrap}.fmr-d-chapter .stat{text-align:left;min-width:0}}" +
+    "@media (max-width:560px){" +
+    ".fmr-d-kpis{grid-template-columns:minmax(0,1fr)}.fmr-d-brief h1{font-size:24px;line-height:1.1}" +
+    // a story's key figures sit two to a row
+    ".fmr-d-chapter .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}" +
+    "html.fmr-digest .fmr-heatmap-odd{visibility:hidden}" +
+    // a phone reads each row as a block: what it compares, the marked column at its right, then every other column by its label
+    "html.fmr-digest .fmr-scroll-x{overflow-x:visible}html.fmr-digest table.fmr-table thead{display:none}" +
+    "html.fmr-digest table.fmr-table,html.fmr-digest table.fmr-table tbody{display:block;width:100%}" +
+    "html.fmr-digest table.fmr-table tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:10px 16px;border-top:1px solid var(--fm-border-default,#ebebef)}" +
+    "html.fmr-digest table.fmr-table tr::after{content:'';order:2;flex-basis:100%;height:0}" +
+    "html.fmr-digest table.fmr-table td{display:inline-flex;align-items:baseline;gap:6px;order:3;height:auto;padding:0;border:0;font-size:13px;white-space:normal}" +
+    "html.fmr-digest table.fmr-table td::before{content:attr(data-label);font-size:11.5px;font-weight:400;color:var(--fm-text-muted,#6b6c70)}" +
+    "html.fmr-digest table.fmr-table td:first-child{order:0;flex:1 1 50%;min-width:0;padding:0;font-size:14px}html.fmr-digest table.fmr-table td:first-child::before{content:none}" +
+    "html.fmr-digest table.fmr-table td.fmr-d-signed{order:1;margin-left:auto}}"
+
+  /** A label in at most two lines of at most `chars` characters, broken between words. */
+  function wrapLabel(label, chars) {
+    var lines = []
+    String(label).split(/\s+/).forEach(function (word) {
+      var line = lines[lines.length - 1]
+      if (line !== undefined && (line + " " + word).length <= chars) lines[lines.length - 1] = line + " " + word
+      else lines.push(word)
+    })
+    if (lines.length > 2) lines = [lines[0], lines.slice(1).join(" ")]
+    return lines.map(function (line) { return line.length > chars ? line.slice(0, chars - 1) + "…" : line })
+  }
+
+  function isDigest() {
+    return !!(window.env && window.env.digest)
+  }
+
+  /** The digest's root class, its display face (delivered by the host, never fetched) and its styles, once per frame. */
+  function digestStyles() {
+    if (document.getElementById("fmr-digest-style")) return
+    document.documentElement.classList.add("fmr-digest")
+    var font = envOf("digestFont", "")
+    if (font) {
+      var face = document.createElement("style")
+      face.id = "fmr-digest-font"
+      face.textContent = font
+      document.head.appendChild(face)
+    }
+    var style = document.createElement("style")
+    style.id = "fmr-digest-style"
+    style.textContent = DIGEST_STYLE
+    document.head.appendChild(style)
+  }
+
+  function swatch(kind, label) {
+    var node = el("span")
+    node.appendChild(el("i", "sw " + kind))
+    node.appendChild(document.createTextNode(label))
+    return node
+  }
+
+  /** A canvas component in a digest gets its one-line takeaway under its title. */
+  function addTakeaway(el, config) {
+    if (!config.takeaway) return
+    var head = el.querySelector(".fmr-tile-head")
+    var line = part(document.createElement("p"), "takeaway")
+    line.className = "fmr-digest-takeaway"
+    line.textContent = config.takeaway
+    if (head && head.parentNode) head.parentNode.insertBefore(line, head.nextSibling)
+    else el.insertBefore(line, el.firstChild)
+  }
+
+  /** A digest's money precision for figures read together: whole units once any of them reaches 1,000 or none has cents, else to the cent. */
+  function moneyDigits(values) {
+    var shown = values.filter(function (value) { return value !== null && value !== undefined && value !== "" }).map(num)
+    if (shown.some(function (value) { return Math.abs(value) >= 1000 })) return 0
+    return shown.every(function (value) { return Math.round(value * 100) % 100 === 0 }) ? 0 : 2
+  }
+
+  /** A digest figure: money with its currency label, at the precision of the figures read with it, its sign leading. */
+  function digestValue(format, value, digits) {
+    if (value === null || value === undefined || value === "") return "—"
+    if (format !== "money") return formatValue(format || "amount", value)
+    var currency = envOf("currency", "")
+    var text = intl(digits === undefined ? moneyDigits([value]) : digits).format(Math.abs(num(value)))
+    // a no-break space, so the label never wraps away from its figure
+    return (num(value) < 0 ? "−" : "") + (currency ? currency + "\u00a0" : "") + text
+  }
+
+  function pctChange(now, then) {
+    return then ? ((num(now) - num(then)) / Math.abs(num(then))) * 100 : null
+  }
+
+  /** A change as a chip that says what it compares against, green when it moved the good way. */
+  function digestChip(delta, label, goodWhen) {
+    if (delta === null || !isFinite(delta)) return null
+    var flat = Math.abs(delta) < 0.05
+    var good = (goodWhen || "up") === "up" ? delta > 0 : delta < 0
+    var node = el("span", "fmr-d-chip " + (flat ? "flat" : good ? "up" : "down"), (flat ? "→ " : delta > 0 ? "▲ " : "▼ ") + intl(1).format(Math.abs(delta)) + "% ")
+    node.appendChild(el("small", "", label))
+    return node
+  }
+
+  var SVGNS = "http://www.w3.org/2000/svg"
+  function svgNode(tag, attrs) {
+    var node = document.createElementNS(SVGNS, tag)
+    Object.keys(attrs || {}).forEach(function (key) { node.setAttribute(key, attrs[key]) })
+    return node
+  }
+
+  /** A tile's weeks as a shaded line ending in a dot on this week. */
+  function sparkSvg(values, width, height) {
+    if (values.length < 2) return null
+    var min = Math.min.apply(null, values)
+    var span = Math.max.apply(null, values) - min || 1
+    var x = function (i) { return 2 + (i * (width - 4)) / (values.length - 1) }
+    var y = function (v) { return height - 3 - ((v - min) / span) * (height - 8) }
+    var points = values.map(function (v, i) { return x(i).toFixed(1) + "," + y(v).toFixed(1) })
+    var svg = svgNode("svg", { class: "fmr-d-svg", viewBox: "0 0 " + width + " " + height, width: width, height: height, role: "img" })
+    svg.style.marginTop = "2px"
+    svg.appendChild(svgNode("path", { class: "spark-area", d: "M" + x(0).toFixed(1) + "," + height + " L" + points.join(" L") + " L" + x(values.length - 1).toFixed(1) + "," + height + " Z" }))
+    svg.appendChild(svgNode("polyline", { class: "spark-line", points: points.join(" ") }))
+    var last = values.length - 1
+    svg.appendChild(svgNode("circle", { class: "spark-dot", cx: x(last).toFixed(1), cy: y(values[last]).toFixed(1), r: 2.6 }))
+    return svg
+  }
+
+  /** One figure of one query: a column of its first row. */
+  function figureOf(ref) {
+    if (!ref || !ref.query) return null
+    var rows = FM.rows(ref.query)
+    var raw = rows.length ? rows[0][ref.value] : null
+    return raw === null || raw === undefined || raw === "" ? null : num(raw)
+  }
+
+  function watchQueries(ids, paint) {
+    var seen = {}
+    ids.forEach(function (id) {
+      if (!id || seen[id]) return
+      seen[id] = true
+      FM.onRows(id, paint)
+    })
+  }
+
+  /** Whether a date falls in the report's own week, @from to @to, read as dates in the business's own time zone. */
+  function inReportWeek(raw) {
+    var params = FM.params()
+    var day = /^\d{4}-\d{2}-\d{2}/.exec(String(raw))
+    if (!day || !params["@from"] || !params["@to"]) return false
+    var local = function (iso) {
+      var at = new Date(iso)
+      return isNaN(at) ? "" : new Intl.DateTimeFormat("en-CA", { timeZone: params["@timezone"] || undefined, year: "numeric", month: "2-digit", day: "2-digit" }).format(at)
+    }
+    return day[0] >= local(params["@from"]) && day[0] < local(params["@to"])
+  }
+
+  /** The week in brief: its docket, the headline in the display face and the summary under it. */
+  function renderDigestBrief(root, config, base) {
+    base = base || ""
+    digestStyles()
+    var card = part(el("div", "fmr-d-card fmr-d-brief"), base)
+    var docket = el("div", "fmr-d-docket fmr-d-eyebrow")
+    ;(config.eyebrow || []).forEach(function (piece) { docket.appendChild(el("span", "", piece)) })
+    card.appendChild(docket)
+    var body = el("div", "fmr-d-brief-body" + (config.headline ? " has-head" : ""))
+    if (config.headline) body.appendChild(part(el("h1", "", config.headline), base + "headline"))
+    if (config.lead) body.appendChild(part(el("p", "fmr-d-lead", config.lead), base + "lead"))
+    card.appendChild(body)
+    root.appendChild(card)
+  }
+
+  /** Parts side by side are one row of equal cards; a card whose own content fills under half its row would be mostly empty, so every part of that row then takes the whole row. */
+  function keepRowFilled(section) {
+    var card = section.querySelector(":scope > .fmr-card, :scope > .fmr-d-card")
+    if (!card || typeof ResizeObserver === "undefined") return
+    var due = false
+    // measured a frame later, so moving parts never resizes another inside the observer's loop
+    var watch = new ResizeObserver(function () {
+      if (due) return
+      due = true
+      requestAnimationFrame(function () {
+        due = false
+        var row = Array.prototype.filter.call(section.parentNode ? section.parentNode.children : [], function (other) {
+          return other.offsetParent !== null && other.offsetTop === section.offsetTop
+        })
+        if (row.length < 2) return
+        var own = ownHeight(card)
+        if (!own || section.offsetHeight <= 2 * own) return
+        row.forEach(function (other) { other.classList.add("fmr-d-apart") })
+        watch.disconnect()
+      })
+    })
+    watch.observe(section)
+  }
+
+  /** How tall a card's own content is, however far the row stretches it. */
+  function ownHeight(card) {
+    if (!card.children.length) return 0
+    var bottom = Math.max.apply(null, Array.prototype.map.call(card.children, function (child) { return child.getBoundingClientRect().bottom }))
+    var style = getComputedStyle(card)
+    return bottom - card.getBoundingClientRect().top + parseFloat(style.paddingBottom || "0") + parseFloat(style.borderBottomWidth || "0")
+  }
+
+  /** A row of tiles: each figure with its changes against last week and its usual week, its usual figure, and its weeks as a line. */
+  function renderDigestKpis(root, config, base) {
+    base = base || ""
+    digestStyles()
+    var row = part(el("div", "fmr-d-kpis fmr-fam-grape"), base)
+    root.appendChild(row)
+    var tiles = config.tiles || []
+    var nodes = tiles.map(function (tileConfig, index) {
+      var card = part(el("div", "fmr-d-card fmr-d-kpi"), base + "tiles." + index)
+      card.appendChild(el("div", "fmr-d-eyebrow", tileConfig.label))
+      var node = { value: el("div", "fmr-d-value", "—"), chips: el("div", "fmr-d-chips"), baseline: el("div", "fmr-d-base"), spark: el("div") }
+      node.chips.style.marginTop = "0"
+      ;[node.value, node.chips, node.baseline, node.spark].forEach(function (child) { card.appendChild(child) })
+      row.appendChild(card)
+      return node
+    })
+    function paint() {
+      tiles.forEach(function (tileConfig, index) {
+        var node = nodes[index]
+        var now = figureOf(tileConfig)
+        var last = tileConfig.last ? figureOf({ query: tileConfig.query, value: tileConfig.last.value }) : null
+        var normal = tileConfig.normal ? figureOf({ query: tileConfig.query, value: tileConfig.normal.value }) : null
+        // the figure and its normal read together, at one precision
+        var digits = moneyDigits([now, normal])
+        node.value.textContent = ""
+        if (now !== null && tileConfig.format === "money") {
+          // a loss reads −RM 9,512: the sign leads the label
+          if (now < 0) node.value.appendChild(document.createTextNode("−"))
+          node.value.appendChild(el("small", "", envOf("currency", "")))
+          node.value.appendChild(document.createTextNode(intl(digits).format(Math.abs(now))))
+        } else node.value.textContent = digestValue(tileConfig.format, now)
+        node.chips.textContent = ""
+        ;[
+          last !== null && now !== null ? digestChip(pctChange(now, last), text("digest.vsLastWeek", "vs last week"), tileConfig.deltaGoodWhen) : null,
+          normal !== null && now !== null ? digestChip(pctChange(now, normal), text("digest.vsNormal", "vs normal"), tileConfig.deltaGoodWhen) : null
+        ].forEach(function (chip) { if (chip) node.chips.appendChild(chip) })
+        // the usual figure, then the writer's own caption
+        node.baseline.textContent = [normal !== null ? text("digest.normalIs", "Normal {value}").replace("{value}", digestValue(tileConfig.format, normal, digits)) : "", tileConfig.caption || ""].filter(Boolean).join(" · ")
+        node.spark.textContent = ""
+        if (tileConfig.trend) {
+          var values = FM.rows(tileConfig.trend.query).map(function (one) { return num(one[tileConfig.trend.y]) })
+          var svg = sparkSvg(values, Math.max(120, Math.round(node.spark.clientWidth || 200)), 34)
+          if (svg) node.spark.appendChild(svg)
+        }
+      })
+    }
+    var ids = []
+    tiles.forEach(function (one) { ids.push(one.query, one.trend && one.trend.query) })
+    watchQueries(ids, paint)
+    paint()
+    if (window.ResizeObserver) new window.ResizeObserver(function () { paint() }).observe(row)
+  }
+
+  /** A story opens: its number, the parts of the business it reads, its heading in the display face, and its key figures. */
+  function renderDigestChapter(root, config, base) {
+    base = base || ""
+    digestStyles()
+    var head = part(el("header", "fmr-d-chapter fmr-fam-grape"), base)
+    head.appendChild(el("div", "no", String(config.number)))
+    var middle = el("div", "heading")
+    var label = el("div", "label")
+    label.appendChild(el("b", "n", String(config.number)))
+    if (config.label) {
+      label.appendChild(el("span", "fmr-d-dot"))
+      label.appendChild(document.createTextNode(config.label))
+    }
+    middle.appendChild(label)
+    middle.appendChild(part(el("h2", "", config.title), base + "title"))
+    head.appendChild(middle)
+    var stats = el("div", "stats")
+    head.appendChild(stats)
+    root.appendChild(head)
+    function paint() {
+      stats.textContent = ""
+      // a story's money figures read together, at one precision
+      var digits = moneyDigits((config.stats || []).filter(function (stat) { return stat.format === "money" }).map(figureOf))
+      ;(config.stats || []).forEach(function (stat) {
+        var box = el("div", "stat")
+        box.appendChild(el("b", "", digestValue(stat.format, figureOf(stat), digits)))
+        box.appendChild(el("span", "", stat.label))
+        stats.appendChild(box)
+      })
+    }
+    watchQueries((config.stats || []).map(function (stat) { return stat.query }), paint)
+    paint()
+  }
+
+  /** A block of the report's words: a story's under its chart, or a card under its own heading, its lines a list when asked; each figure the server marked set bold. */
+  function renderDigestText(root, config, base) {
+    base = base || ""
+    digestStyles()
+    var box = part(el("div", config.tone === "card" ? "fmr-d-card fmr-d-text" : "fmr-d-note"), base)
+    if (config.title) box.appendChild(el("h3", "fmr-d-title", config.title))
+    var holder = box.appendChild(config.list ? el("ul", "fmr-d-list") : el("div", config.tone === "card" ? "fmr-d-card-body" : "fmr-d-note-body"))
+    var words = String(config.text || "")
+    var marks = (config.marks || []).slice().sort(function (a, b) { return a[0] - b[0] })
+    // paragraphs, or a list's lines, keep their place in the words, so each mark lands where the server put it
+    var breaks = config.list ? /\s*\n\s*/g : /\n\s*\n/g
+    var spans = []
+    var from = 0
+    var found
+    while ((found = breaks.exec(words))) {
+      spans.push([from, found.index])
+      from = found.index + found[0].length
+    }
+    spans.push([from, words.length])
+    spans.forEach(function (span) {
+      var start = span[0]
+      var end = span[1]
+      while (start < end && /\s/.test(words[start])) start++
+      while (end > start && /\s/.test(words[end - 1])) end--
+      if (start >= end) return
+      var paragraph = el(config.list ? "li" : "p")
+      var at = start
+      marks.forEach(function (mark) {
+        var head = Math.max(mark[0], start)
+        var tail = Math.min(mark[1], end)
+        if (tail <= head || head < at) return
+        if (head > at) paragraph.appendChild(document.createTextNode(words.slice(at, head)))
+        paragraph.appendChild(el("b", "", words.slice(head, tail)))
+        at = tail
+      })
+      if (at < end) paragraph.appendChild(document.createTextNode(words.slice(at, end)))
+      holder.appendChild(paragraph)
+    })
+    root.appendChild(box)
+  }
+
+  function strokeIcon(paths, size) {
+    var icon = svgNode("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" })
+    paths.forEach(function (d) { icon.appendChild(svgNode("path", { d: d })) })
+    return icon
+  }
+
+  /** An idea for a story: the FeedMe feature it names, its words by paragraph and where the deck shows it, every word the server's. */
+  function renderDigestIdea(root, config, base) {
+    base = base || ""
+    digestStyles()
+    var box = part(el("section", "fmr-d-idea"), base)
+    if (config.eyebrow) box.setAttribute("aria-label", config.eyebrow)
+    var top = box.appendChild(el("div", "fmr-d-idea-top"))
+    top.appendChild(strokeIcon(["M9 18h6", "M10 22h4", "M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z"], 18))
+    top.appendChild(el("span", "fmr-d-idea-eyebrow", config.eyebrow || ""))
+    if (config.tag) {
+      var tag = top.appendChild(el("span", "fmr-d-idea-tag"))
+      tag.appendChild(strokeIcon(["M6 11h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2z", "M8 11V7a4 4 0 0 1 8 0v4"], 12))
+      tag.appendChild(document.createTextNode(config.tag))
+    }
+    if (config.title) box.appendChild(el("h3", "", config.title))
+    String(config.text || "").split(/\n\s*\n/).forEach(function (words) {
+      if (words.trim()) box.appendChild(el("p", "", words.trim()))
+    })
+    if (config.source && config.href) {
+      // the frame opens no window itself: the host opens the link
+      var link = box.appendChild(el("p", "fmr-d-idea-source")).appendChild(el("a", "", config.source))
+      link.href = config.href
+      link.target = "_blank"
+      link.rel = "noopener noreferrer"
+      link.appendChild(strokeIcon(["M15 3h6v6", "M10 14 21 3", "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"], 13))
+    } else if (config.source) box.appendChild(el("p", "fmr-d-idea-source", config.source))
+    root.appendChild(box)
+  }
+
   var RENDERERS = {
     "filter-bar": renderFilterBar,
     "kpi-row": renderKpiRow,
@@ -2406,14 +3452,23 @@
     map: renderMap,
     scatter: renderScatter,
     radar: renderRadar,
-    flow: renderFlow
+    flow: renderFlow,
+    "digest-brief": renderDigestBrief,
+    "digest-kpis": renderDigestKpis,
+    "digest-chapter": renderDigestChapter,
+    "digest-text": renderDigestText,
+    "digest-idea": renderDigestIdea,
   }
 
   FM.components = {
     render: function (el, section) {
       var renderer = RENDERERS[section.component]
       if (!renderer) throw new Error('unknown component "' + section.component + '"')
-      renderer(el, section.config || {}, "")
+      var config = section.config || {}
+      if (isDigest()) digestStyles()
+      renderer(el, config, "")
+      if (isDigest() && String(section.component).indexOf("digest-") !== 0) addTakeaway(el, config)
+      if (isDigest()) keepRowFilled(el)
     }
   }
 })()