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

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

@@ -443,11 +443,86 @@
       // number leaves, which at four money tiles across is none
       var delta = el("div", "fmr-kpi-delta")
       card.appendChild(delta)
+      // which way it went, never how much: the number above is the value
+      var spark = null
+      if (tileConfig.trend) {
+        var wrap = el("div", "fmr-kpi-spark")
+        wrap.style.height = "32px"
+        wrap.style.marginTop = "8px"
+        var canvas = document.createElement("canvas")
+        wrap.appendChild(canvas)
+        card.appendChild(wrap)
+        spark = { canvas: canvas, chart: null }
+      }
+      var meter = null
+      if (tileConfig.target !== undefined) {
+        var track = el("div", "fmr-kpi-meter")
+        track.style.height = "6px"
+        track.style.marginTop = "12px"
+        track.style.borderRadius = "var(--fm-radius-xs, 4px)"
+        track.style.background = "var(--fm-border-default, #f0f0f0)"
+        track.style.overflow = "hidden"
+        var reached = el("div")
+        reached.style.height = "100%"
+        reached.style.width = "0%"
+        reached.style.background = token("--fm-feature-aqua-fg", "#0a5384")
+        track.appendChild(reached)
+        var meterNote = el("div", "fmr-kpi-note")
+        card.appendChild(track)
+        card.appendChild(meterNote)
+        meter = { reached: reached, note: meterNote }
+      }
       if (tileConfig.caption) card.appendChild(el("div", "fmr-kpi-note", tileConfig.caption))
       row.appendChild(card)
-      return { value: value, delta: delta }
+      return { value: value, delta: delta, spark: spark, meter: meter }
     })
 
+    function paintExtras(tileConfig, node, rows, raw) {
+      if (node.meter) {
+        var goal = typeof tileConfig.target === "number" ? tileConfig.target : rows.length ? num(rows[0][tileConfig.target.value]) : 0
+        var ratio = goal ? num(raw) / goal : 0
+        node.meter.reached.style.width = Math.max(0, Math.min(100, ratio * 100)) + "%"
+        node.meter.note.textContent =
+          raw === null || raw === undefined || !goal
+            ? ""
+            : text("kpi.ofTarget", "{share} of {target}")
+                .replace("{share}", intl(1).format(ratio * 100) + "%")
+                .replace("{target}", amountText(tileConfig.format, goal))
+      }
+      if (node.spark && window.Chart) {
+        var trendRows = FM.rows(tileConfig.trend.query)
+        var data = {
+          labels: trendRows.map(function (row) { return String(row[tileConfig.trend.x]) }),
+          datasets: [
+            {
+              data: trendRows.map(function (row) { return num(row[tileConfig.trend.y]) }),
+              borderColor: token("--fm-action-primary-bg", "#ff7823"),
+              borderWidth: 2,
+              pointRadius: 0,
+              tension: 0,
+              fill: false
+            }
+          ]
+        }
+        if (node.spark.chart) {
+          node.spark.chart.data = data
+          node.spark.chart.update()
+        } else {
+          node.spark.chart = new window.Chart(node.spark.canvas, {
+            type: "line",
+            data: data,
+            options: {
+              responsive: true,
+              maintainAspectRatio: false,
+              animation: false,
+              plugins: { legend: { display: false }, tooltip: { enabled: false } },
+              scales: { x: { display: false }, y: { display: false } }
+            }
+          })
+        }
+      }
+    }
+
     function paint() {
       tiles.forEach(function (tileConfig, index) {
         var rows = FM.rows(tileConfig.query)
@@ -476,12 +551,13 @@
             )
           }
         }
+        paintExtras(tileConfig, nodes[index], rows, raw)
       })
     }
 
     var seen = {}
     tiles.forEach(function (tileConfig) {
-      ;[tileConfig.query, tileConfig.compareQuery].forEach(function (queryId) {
+      ;[tileConfig.query, tileConfig.compareQuery, tileConfig.trend && tileConfig.trend.query].forEach(function (queryId) {
         if (!queryId || seen[queryId]) return
         seen[queryId] = true
         FM.onRows(queryId, paint)
@@ -497,7 +573,7 @@
     wrap.appendChild(canvas)
     body.appendChild(wrap)
     var chart = null
-    return function paint(data, note) {
+    function paint(data, note) {
       if (!window.Chart) {
         body.textContent = ""
         body.appendChild(el("p", "fmr-note error", "chart library unavailable"))
@@ -523,6 +599,8 @@
         }
       }
     }
+    paint.chart = function () { return chart }
+    return paint
   }
 
   function renderTimeseries(root, config, base) {
@@ -532,22 +610,41 @@
     var body = part(el("div", "fmr-tile-body"), base + "chart")
     card.appendChild(body)
     var compareQuery = config.compare && (config.compare.query || config.query)
+    var allSeries = config.series || []
+    var rightIndex = allSeries.findIndex(function (series) { return series.axis === "right" })
     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,
+          stacked: !!config.stack,
+          grid: { color: gridColor() },
+          ticks: Object.assign({}, ax.ticks, { callback: abbrev(config.format) })
+        })
+      }
+      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 })
+        scales.y.title = {
+          display: true,
+          text: left.map(function (set) { return set.label }).join(", "),
+          color: left.length ? left[0].borderColor || left[0].backgroundColor : undefined
+        }
+        var rightSet = data.datasets.filter(function (set) { return set.yAxisID === "y1" })[0]
+        scales.y1 = Object.assign({}, ax, {
+          position: "right",
+          beginAtZero: true,
+          grid: { display: false },
+          title: { display: true, text: allSeries[rightIndex].label, color: rightSet ? rightSet.borderColor || rightSet.backgroundColor : undefined },
+          ticks: Object.assign({}, ax.ticks, { callback: abbrev(config.rightFormat) })
+        })
+      }
       return {
         type: "line",
         data: data,
-        options: Object.assign({}, chartOpts(), {
-          scales: {
-            x: Object.assign({}, ax, { grid: { display: false } }),
-            y: Object.assign({}, ax, {
-              // a value axis cropped above zero exaggerates every wiggle into a peak
-              beginAtZero: true,
-              grid: { color: gridColor() },
-              ticks: Object.assign({}, ax.ticks, { callback: abbrev(config.format) })
-            })
-          }
-        })
+        options: Object.assign({}, chartOpts(), { scales: scales })
       }
     })
 
@@ -577,31 +674,42 @@
       var lineIndex = 0
       // 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 datasets = (config.series || []).map(function (series) {
+      var barIndex = 0
+      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)
           return {
             label: series.label,
             type: "bar",
             data: data,
-            backgroundColor: barColor(),
+            backgroundColor: fill,
             borderWidth: 0,
             maxBarThickness: 20,
+            stack: config.stack ? "stack" : undefined,
+            yAxisID: axisId,
             order: 2
           }
         }
         var color = lineColor(lineIndex++)
+        var area = series.kind === "area"
         return {
           label: series.label,
           type: "line",
           data: data,
           borderColor: color,
-          backgroundColor: color,
+          backgroundColor: area ? rgba(color, 0.24) : color,
           borderWidth: 2,
           tension: 0,
+          stepped: series.stepped ? "before" : false,
           pointRadius: marker,
           pointHoverRadius: 4,
-          fill: false,
+          fill: area ? (config.stack ? "stack" : "origin") : false,
+          // a line is never part of a stack: each one runs on its own
+          stack: config.stack ? (area ? "stack" : "line-" + index) : undefined,
+          yAxisID: axisId,
           order: 1
         }
       })
@@ -610,6 +718,7 @@
         datasets.push({
           label: config.compare.label || "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]
@@ -632,23 +741,121 @@
     if (compareQuery && compareQuery !== config.query) FM.onRows(compareQuery, refresh)
   }
 
+  // a series beyond the first steps within the family, then takes the next families' accents
+  var BAR_TONES = {
+    vertical: [
+      ["--fm-feature-grape-fg", "#512191"],
+      ["--fm-feature-grape-accent", "#8f61e8"],
+      ["--fm-feature-aqua-accent", "#3ab0ff"],
+      ["--fm-feature-mustard-accent", "#ffc746"],
+      ["--fm-feature-berry-accent", "#e94850"],
+      ["--fm-feature-lime-accent", "#aeef4b"]
+    ],
+    horizontal: [
+      ["--fm-feature-mustard-accent", "#ffc746"],
+      ["--fm-feature-mustard-fg", "#903e1f"],
+      ["--fm-feature-aqua-accent", "#3ab0ff"],
+      ["--fm-feature-grape-accent", "#8f61e8"],
+      ["--fm-feature-berry-accent", "#e94850"],
+      ["--fm-feature-lime-accent", "#aeef4b"]
+    ]
+  }
+  function tone(list, index) {
+    var step = list[index % list.length]
+    return token(step[0], step[1])
+  }
+
+  /** 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")
+    if (!head) {
+      head = el("div", "fmr-tile-head")
+      card.insertBefore(head, card.firstChild)
+    }
+    var legend = head.querySelector(".fmr-legend")
+    if (!legend) legend = head.appendChild(el("div", "fmr-legend"))
+    legend.textContent = ""
+    items.forEach(function (item) {
+      var entry = el("span", "fmr-legend-item")
+      var swatch = el("span", "fmr-swatch" + (item.line ? " line" : ""))
+      swatch.style.background = item.color
+      entry.appendChild(swatch)
+      entry.appendChild(document.createTextNode(item.label))
+      legend.appendChild(entry)
+    })
+  }
+
   function renderBar(root, config, base) {
     base = base || ""
     var card = tile(root, config.title, base)
     renderControls(card, config.controls, base)
     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 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" })
     var current = []
     var total = 0
+    var sums = []
     // shareDenominator only reads .share, so config doubles as a column
     var denominator = shareDenominator(config)
+    if (config.series || config.cumulative) {
+      // one unnamed figure needs no swatch of its own: the card's title says what the bars are
+      headLegend(
+        card,
+        (config.series ? series : [])
+          .map(function (one, index) { return { label: one.label, color: tone(tones, index) } })
+          .concat(config.cumulative ? [{ label: text("bar.cumulative", "Cumulative share"), color: lineColor(0), line: true }] : [])
+      )
+    }
+    function formatOf(one) {
+      return one && one.axis === "right" ? config.rightFormat : config.format
+    }
     var paint = mountChart(body, function (data) {
       var opts = chartOpts()
       var ax = axis()
+      var valueAxis = Object.assign({}, ax, {
+        // a value axis cropped above zero exaggerates every wiggle into a peak
+        beginAtZero: true,
+        stacked: stacked,
+        grid: { color: gridColor() },
+        ticks: Object.assign({}, ax.ticks, {
+          callback: percent ? function (value) { return value + "%" } : abbrev(config.format)
+        })
+      })
+      if (percent) valueAxis.max = 100
+      var categoryAxis = Object.assign({}, ax, { stacked: stacked, grid: { display: false } })
+      var scales = horizontal ? { 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" })
+        var rightIndex = series.findIndex(function (one) { return one.axis === "right" })
+        valueAxis.title = { display: true, text: leftSeries.map(function (one) { return one.label }).join(", "), color: tone(tones, 0) }
+        scales.y1 = Object.assign({}, ax, {
+          position: "right",
+          beginAtZero: true,
+          grid: { display: false },
+          title: { display: true, text: series[rightIndex].label, color: tone(tones, rightIndex) },
+          ticks: Object.assign({}, ax.ticks, { callback: abbrev(config.rightFormat) })
+        })
+      }
+      if (config.cumulative) {
+        scales.y1 = Object.assign({}, ax, {
+          position: "right",
+          min: 0,
+          max: 100,
+          grid: { display: false },
+          ticks: Object.assign({}, ax.ticks, { callback: function (value) { return value + "%" } })
+        })
+      }
       return {
         type: "bar",
         data: data,
         options: Object.assign({}, opts, {
+          indexAxis: horizontal ? "y" : "x",
           onClick: config.clickSet
             ? function (event, elements) {
                 if (!elements || !elements.length) return
@@ -658,37 +865,41 @@
               }
             : undefined,
           plugins: Object.assign({}, opts.plugins, {
-            tooltip: config.share
-              ? Object.assign({}, opts.plugins.tooltip, {
-                  callbacks: {
-                    label: function (context) {
-                      var amount = context.formattedValue
-                      if (!total) return amount
-                      var row = current[context.dataIndex]
-                      var pct = intl(1).format((num(row ? row[config.y] : 0) / total) * 100)
-                      return amount + " · " + pct + "% of total"
+            // a plain bar keeps chart.js's own tooltip; the rest name what each figure is of
+            tooltip:
+              config.share || config.series || config.cumulative
+                ? Object.assign({}, opts.plugins.tooltip, {
+                    callbacks: {
+                      label: function (context) {
+                        var row = current[context.dataIndex]
+                        var one = series[context.datasetIndex || 0]
+                        if (!one) return context.dataset.label + " · " + intl(1).format(context.raw) + "%"
+                        var raw = num(row ? row[one.y] : 0)
+                        if (!config.series) {
+                          if (!total) return context.formattedValue
+                          return context.formattedValue + " · " + share(raw, total) + " of total"
+                        }
+                        var amount = one.label + " · " + amountText(formatOf(one), raw)
+                        return percent ? amount + " · " + share(raw, sums[context.dataIndex]) : amount
+                      }
                     }
-                  }
-                })
-              : opts.plugins.tooltip
+                  })
+                : opts.plugins.tooltip
           }),
-          scales: {
-            x: Object.assign({}, ax, { grid: { display: false } }),
-            y: Object.assign({}, ax, {
-              // a value axis cropped above zero exaggerates every wiggle into a peak
-              beginAtZero: true,
-              grid: { color: gridColor() },
-              ticks: Object.assign({}, ax.ticks, { callback: abbrev(config.format) })
-            })
-          }
+          scales: scales
         })
       }
     })
 
     function refresh() {
-      var rows = FM.rows(config.query)
+      var rows = FM.rows(config.query).slice()
+      // a Pareto reads largest first, whatever order the query returned
+      if (config.cumulative) rows.sort(function (a, b) { return num(b[config.y]) - num(a[config.y]) })
       current = rows
-      if (config.share) {
+      sums = rows.map(function (row) {
+        return series.reduce(function (sum, one) { return sum + num(row[one.y]) }, 0)
+      })
+      if (config.share || config.cumulative) {
         if (denominator) {
           var denominatorRows = FM.rows(denominator.query)
           total = denominatorRows.length ? num(denominatorRows[0][denominator.value]) : 0
@@ -700,20 +911,49 @@
         paint(null, emptyNote(config))
         return
       }
+      var datasets = series.map(function (one, index) {
+        return {
+          // one unnamed series keeps chart.js's tooltip to the bare figure, as before
+          label: config.series ? one.label : undefined,
+          data: rows.map(function (row, at) {
+            var value = num(row[one.y])
+            return percent ? (sums[at] ? (value / sums[at]) * 100 : 0) : value
+          }),
+          backgroundColor: tone(tones, index),
+          maxBarThickness: 20,
+          yAxisID: !horizontal && one.axis === "right" ? "y1" : undefined,
+          order: 2
+        }
+      })
+      if (config.cumulative) {
+        var running = 0
+        var color = lineColor(0)
+        datasets.push({
+          type: "line",
+          label: text("bar.cumulative", "Cumulative share"),
+          data: rows.map(function (row) {
+            running += num(row[config.y])
+            return total ? Math.min(100, (running / total) * 100) : 0
+          }),
+          borderColor: color,
+          backgroundColor: color,
+          borderWidth: 2,
+          tension: 0,
+          pointRadius: 3,
+          pointHoverRadius: 4,
+          fill: false,
+          yAxisID: "y1",
+          order: 1
+        })
+      }
       paint(
         {
           labels: rows.map(function (row) {
             var label = String(row[config.x])
             if (!config.share || !total) return label
-            return label + " · " + intl(1).format((num(row[config.y]) / total) * 100) + "%"
+            return label + " · " + share(num(row[config.y]), total)
           }),
-          datasets: [
-            {
-              data: rows.map(function (row) { return num(row[config.y]) }),
-              backgroundColor: barColor(),
-              maxBarThickness: 20
-            }
-          ]
+          datasets: datasets
         },
         null
       )
@@ -1041,6 +1281,103 @@
     })
   }
 
+  /** A row's day in the report's zone: a bucketed day as it stands, an instant projected. */
+  function dayKey(raw) {
+    if (raw === null || raw === undefined || raw === "") return null
+    if (typeof raw === "string" && /^\d{4}-\d{2}-\d{2}$/.test(raw)) return raw
+    var date = new Date(raw)
+    if (Number.isNaN(date.getTime())) return null
+    return new Intl.DateTimeFormat("en-CA", {
+      timeZone: envOf("timezone", undefined),
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit"
+    }).format(date)
+  }
+
+  /** One cell per day, a week per column and a weekday per row, between the first and last day. */
+  function heatCalendar(body, rows, config, format) {
+    var byDay = {}
+    var max = 0
+    rows.forEach(function (row) {
+      var key = dayKey(row[config.x])
+      if (!key) return
+      byDay[key] = (byDay[key] || 0) + num(row[config.value])
+      if (byDay[key] > max) max = byDay[key]
+    })
+    var keys = Object.keys(byDay).sort(function (a, b) { return a.localeCompare(b) })
+    if (!keys.length) {
+      body.appendChild(emptyNote(config))
+      return
+    }
+    var DAY = 86400000
+    var first = Date.parse(keys[0] + "T00:00:00Z")
+    var last = Date.parse(keys[keys.length - 1] + "T00:00:00Z")
+    var sunday = config.weekStart === "sunday"
+    var offset = function (time) { var day = new Date(time).getUTCDay(); return sunday ? day : (day + 6) % 7 }
+    var start = first - offset(first) * DAY
+    var weeks = Math.floor((last - start) / (7 * DAY)) + 1
+    var names = weekdayNames()
+    var order = sunday ? [0, 1, 2, 3, 4, 5, 6] : [1, 2, 3, 4, 5, 6, 0]
+    // a day is a fixed square, so a short range stays a strip and a year scrolls rather than squeezes
+    var scroll = el("div")
+    scroll.style.overflowX = "auto"
+    var grid = el("div", "fmr-heatmap fmr-heatmap-calendar")
+    grid.style.display = "grid"
+    grid.style.gridTemplateColumns = "44px repeat(" + weeks + ", 18px)"
+    grid.style.gap = "2px"
+    grid.style.alignItems = "center"
+    grid.appendChild(el("div"))
+    // a month is named over the weeks from the one holding its 1st, or from the first week shown
+    var months = []
+    for (var w = 0; w < weeks; w++) {
+      var month = ""
+      for (var d = 0; d < 7; d++) {
+        var time = start + (w * 7 + d) * DAY
+        var date = new Date(time)
+        if (time >= first && time <= last && (date.getUTCDate() === 1 || (w === 0 && d === offset(first)))) {
+          month = date.toLocaleDateString(locale(), { month: "short", timeZone: "UTC" })
+        }
+      }
+      if (month || !months.length) months.push({ name: month, weeks: 1 })
+      else months[months.length - 1].weeks += 1
+    }
+    months.forEach(function (one) {
+      var label = heatLabel(one.name, "left")
+      label.style.gridColumn = "span " + one.weeks
+      label.style.whiteSpace = "nowrap"
+      grid.appendChild(label)
+    })
+    for (var row = 0; row < 7; row++) {
+      grid.appendChild(heatLabel(names[order[row]], "left"))
+      for (var week = 0; week < weeks; week++) {
+        var at = start + (week * 7 + row) * DAY
+        var cell = el("div", "fmr-heatmap-cell")
+        cell.style.minHeight = "18px"
+        cell.style.borderRadius = "var(--fm-radius-xs, 4px)"
+        if (at < first || at > last) {
+          cell.className += " fmr-heatmap-cell-outside"
+          grid.appendChild(cell)
+          continue
+        }
+        var key = new Date(at).toISOString().slice(0, 10)
+        var when = new Date(at).toLocaleDateString(locale(), { dateStyle: "medium", timeZone: "UTC" }) + " — "
+        if (byDay[key] === undefined) {
+          cell.className += " fmr-heatmap-cell-empty"
+          cell.style.background = NO_DATA
+          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])
+        }
+        grid.appendChild(cell)
+      }
+    }
+    scroll.appendChild(grid)
+    body.appendChild(scroll)
+    body.appendChild(heatLegend())
+  }
+
   function renderHeatmap(root, config, base) {
     base = base || ""
     var card = tile(root, config.title, base)
@@ -1055,6 +1392,10 @@
         body.appendChild(emptyNote(config))
         return
       }
+      if (config.layout === "calendar") {
+        heatCalendar(body, rows, config, format)
+        return
+      }
       var ys = axisValues(rows, config.y)
       var xs = axisValues(rows, config.x)
       var weekdays = whole(ys, 6)
@@ -1155,6 +1496,901 @@
     sync()
   }
 
+  // --- 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) {
+    if (format === "money") {
+      var currency = envOf("currency", "")
+      return (currency ? currency + " " : "") + formatValue("money", value)
+    }
+    return formatValue(format || "amount", value)
+  }
+
+  function share(part, whole) {
+    return whole ? intl(1).format((part / whole) * 100) + "%" : ""
+  }
+
+  function figureRow(config) {
+    var rows = FM.rows(config.query)
+    return rows.length ? rows[0] : null
+  }
+
+  function nothingToDraw(config, values) {
+    return (
+      FM.status(config.query) !== "loading" &&
+      (!values.length || values.every(function (value) { return value === 0 }))
+    )
+  }
+
+  function renderFunnel(root, config, base) {
+    base = base || ""
+    var card = tile(root, config.title, base)
+    renderControls(card, config.controls, base)
+    var body = part(el("div", "fmr-tile-body"), base + "chart")
+    card.appendChild(body)
+    var steps = config.steps || []
+    var values = []
+    var paint = mountChart(body, function (data) {
+      var opts = chartOpts()
+      var ax = axis()
+      return {
+        type: "bar",
+        data: data,
+        options: Object.assign({}, opts, {
+          indexAxis: "y",
+          plugins: Object.assign({}, opts.plugins, {
+            tooltip: Object.assign({}, opts.plugins.tooltip, {
+              callbacks: {
+                label: function (context) {
+                  var index = context.dataIndex
+                  var line = amountText(config.format, values[index])
+                  if (index === 0) return line
+                  var of = function (base) {
+                    return text("funnel.ofStep", "{share} of {step}")
+                      .replace("{share}", share(values[index], values[base]))
+                      .replace("{step}", steps[base].label)
+                  }
+                  return [line, of(0), of(index - 1)]
+                }
+              }
+            })
+          }),
+          scales: {
+            // the bars are centred on zero, so the value axis carries no meaning of its own
+            x: { display: false, grid: { display: false } },
+            y: Object.assign({}, ax, { grid: { display: false } })
+          }
+        })
+      }
+    })
+
+    function refresh() {
+      var row = figureRow(config)
+      values = steps.map(function (step) { return row ? num(row[step.value]) : 0 })
+      if (nothingToDraw(config, values)) {
+        paint(null, emptyNote(config))
+        return
+      }
+      paint(
+        {
+          labels: steps.map(function (step, index) {
+            var figure = amountText(config.format, values[index])
+            return [step.label, index === 0 ? figure : figure + " · " + share(values[index], values[0])]
+          }),
+          datasets: [
+            {
+              data: values.map(function (value) { return [-value / 2, value / 2] }),
+              backgroundColor: token("--fm-feature-mustard-accent", "#ffc746"),
+              borderWidth: 0,
+              barPercentage: 0.92,
+              categoryPercentage: 0.92,
+              borderSkipped: false
+            }
+          ]
+        },
+        null
+      )
+    }
+
+    FM.onRows(config.query, refresh)
+  }
+
+  function renderWaterfall(root, config, base) {
+    base = base || ""
+    var card = tile(root, config.title, base)
+    renderControls(card, config.controls, base)
+    var body = part(el("div", "fmr-tile-body"), base + "chart")
+    card.appendChild(body)
+    var steps = config.steps || []
+    var shown = []
+    var paint = mountChart(body, function (data) {
+      var opts = chartOpts()
+      var ax = axis()
+      return {
+        type: "bar",
+        data: data,
+        options: Object.assign({}, opts, {
+          plugins: Object.assign({}, opts.plugins, {
+            tooltip: Object.assign({}, opts.plugins.tooltip, {
+              callbacks: {
+                // 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)) : ""
+                }
+              }
+            })
+          }),
+          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) })
+            })
+          }
+        })
+      }
+    })
+
+    function refresh() {
+      var row = figureRow(config)
+      var start = row ? num(row[config.start.value]) : 0
+      var running = start
+      shown = [{ label: config.start.label, from: 0, to: start, change: start, total: true }]
+      steps.forEach(function (step) {
+        var change = (step.subtract ? -1 : 1) * (row ? num(row[step.value]) : 0)
+        shown.push({ label: step.label, from: running, to: running + change, change: change })
+        running += change
+      })
+      var end = config.end && config.end.value && row ? num(row[config.end.value]) : running
+      shown.push({ label: config.end.label, from: 0, to: end, change: end, total: true })
+      if (nothingToDraw(config, shown.map(function (bar) { return bar.change }))) {
+        paint(null, emptyNote(config))
+        return
+      }
+      var total = token("--fm-feature-grape-fg", "#512191")
+      var stepColor = token("--fm-feature-grape-accent", "#8f61e8")
+      paint(
+        {
+          labels: shown.map(function (bar) { return bar.label }),
+          datasets: [
+            {
+              data: shown.map(function (bar) { return [bar.from, bar.to] }),
+              backgroundColor: shown.map(function (bar) { return bar.total ? total : stepColor }),
+              borderWidth: 0,
+              maxBarThickness: 36,
+              borderSkipped: false
+            }
+          ]
+        },
+        null
+      )
+    }
+
+    FM.onRows(config.query, refresh)
+  }
+
+  // categorical slices take successive family accents, per the chart guide's donut rule
+  var SLICE_TONES = [
+    ["--fm-feature-aqua-accent", "#3ab0ff"],
+    ["--fm-feature-grape-accent", "#8f61e8"],
+    ["--fm-feature-mustard-accent", "#ffc746"],
+    ["--fm-feature-berry-accent", "#e94850"],
+    ["--fm-feature-lime-accent", "#aeef4b"],
+    ["--fm-feature-blossom-accent", "#ffc4c3"]
+  ]
+
+  function renderDonut(root, config, base) {
+    base = base || ""
+    var card = tile(root, config.title, base)
+    renderControls(card, config.controls, base)
+    var body = part(el("div", "fmr-tile-body"), base + "chart")
+    card.appendChild(body)
+    // a ring's legend sits centred above it: the slices are read by name, not by angle
+    var legend = el("div", "fmr-legend")
+    legend.style.justifyContent = "center"
+    legend.style.marginBottom = "12px"
+    body.appendChild(legend)
+    var shape = config.shape || "donut"
+    var current = []
+    var whole = 0
+    var paint = mountChart(body, function (data) {
+      var opts = chartOpts()
+      var options = Object.assign({}, opts, {
+        onClick: config.clickSet
+          ? function (event, elements) {
+              if (!elements || !elements.length) return
+              var row = current[elements[0].index]
+              FM.setParams(resolveSet(config.clickSet, row, row ? row[config.x] : null))
+            }
+          : undefined,
+        plugins: Object.assign({}, opts.plugins, {
+          tooltip: Object.assign({}, opts.plugins.tooltip, {
+            callbacks: {
+              label: function (context) {
+                var value = Number(context.raw) || 0
+                return amountText(config.format, value) + " · " + share(value, whole)
+              }
+            }
+          })
+        })
+      })
+      if (shape === "polar") {
+        options.scales = { r: { ticks: { display: false }, grid: { color: gridColor() } } }
+        return { type: "polarArea", data: data, options: options }
+      }
+      // a pie is the same ring with nothing cut out, so it stays one chart type
+      options.cutout = shape === "pie" ? 0 : "40%"
+      return { type: "doughnut", data: data, options: options }
+    })
+
+    /** Largest slice first, clockwise from twelve; a clicked slice still finds its own row. */
+    function slices() {
+      var list
+      if (config.slices) {
+        var row = figureRow(config)
+        list = config.slices.map(function (slice) {
+          return { label: slice.label, value: row ? num(row[slice.value]) : 0, row: null }
+        })
+      } else {
+        list = FM.rows(config.query).map(function (row) {
+          return { label: String(row[config.x]), value: num(row[config.y]), row: row }
+        })
+      }
+      list.sort(function (a, b) { return b.value - a.value })
+      current = list.map(function (slice) { return slice.row })
+      return list
+    }
+
+    function refresh() {
+      var list = slices()
+      whole = list.reduce(function (sum, slice) { return sum + slice.value }, 0)
+      legend.textContent = ""
+      if (nothingToDraw(config, list.map(function (slice) { return slice.value }))) {
+        legend.hidden = true
+        paint(null, emptyNote(config))
+        return
+      }
+      legend.hidden = false
+      var colors = list.map(function (_slice, index) {
+        var tone = SLICE_TONES[index % SLICE_TONES.length]
+        return token(tone[0], tone[1])
+      })
+      list.forEach(function (slice, index) {
+        var item = el("span", "fmr-legend-item")
+        var swatch = el("span", "fmr-swatch")
+        swatch.style.background = colors[index]
+        item.appendChild(swatch)
+        item.appendChild(
+          document.createTextNode(slice.label + " · " + amountText(config.format, slice.value) + " · " + share(slice.value, whole))
+        )
+        legend.appendChild(item)
+      })
+      paint(
+        {
+          labels: list.map(function (slice) { return slice.label }),
+          datasets: [
+            {
+              data: list.map(function (slice) { return slice.value }),
+              backgroundColor: colors,
+              borderWidth: 0
+            }
+          ]
+        },
+        null
+      )
+    }
+
+    FM.onRows(config.query, refresh)
+  }
+
+  // --- map: rows on the outlines geo-outlines@1 ships, drawn by chartjs-chart-geo
+
+  var geoRegistered = false
+  function geoReady() {
+    var geo = window.ChartGeo
+    if (!geo || !window.Chart || !FM.geoOutlines) return false
+    if (!geoRegistered) {
+      window.Chart.register(geo.ChoroplethController, geo.BubbleMapController, geo.GeoFeature, geo.ColorScale, geo.ProjectionScale, geo.SizeScale)
+      geoRegistered = true
+    }
+    return true
+  }
+
+  var featureCache = Object.create(null)
+  function layerFeatures(layer) {
+    if (!featureCache[layer.id]) {
+      featureCache[layer.id] = window.ChartGeo.topojson.feature(layer.topology, layer.topology.objects.regions).features
+    }
+    return featureCache[layer.id]
+  }
+
+  function featureBox(feature) {
+    var box = [Infinity, Infinity, -Infinity, -Infinity]
+    function walk(node) {
+      if (typeof node[0] === "number") {
+        box[0] = Math.min(box[0], node[0])
+        box[1] = Math.min(box[1], node[1])
+        box[2] = Math.max(box[2], node[0])
+        box[3] = Math.max(box[3], node[1])
+        return
+      }
+      node.forEach(walk)
+    }
+    walk(feature.geometry.coordinates)
+    return box
+  }
+
+  function within(box, point) {
+    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.
+   */
+  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 country = Object.keys(held).sort(function (a, b) { return held[b] - held[a] })[0]
+    if (!country) return null
+    var own = layers.filter(function (layer) { return layer.country === country })
+    var lats = points.map(function (point) { return point.lat })
+    var lons = points.map(function (point) { return point.lon })
+    var spread = Math.max(Math.max.apply(null, lats) - Math.min.apply(null, lats), Math.max.apply(null, lons) - Math.min.apply(null, lons))
+    var districts = own.filter(function (layer) {
+      return layer.level === "districts" && points.every(function (point) { return within(layer.bbox, point) })
+    })[0]
+    var states = own.filter(function (layer) { return layer.level === "states" })[0]
+    return (spread <= 1.5 && districts) || states || districts || own[0]
+  }
+
+  /** The outlines around the points, with a margin, so a metro area fills the card. */
+  function pointOutline(layer, points) {
+    var lats = points.map(function (point) { return point.lat })
+    var lons = points.map(function (point) { return point.lon })
+    var box = [Math.min.apply(null, lons), Math.min.apply(null, lats), Math.max.apply(null, lons), Math.max.apply(null, lats)]
+    var pad = Math.max(0.15 * Math.max(box[2] - box[0], box[3] - box[1]), 0.05)
+    var view = [box[0] - pad, box[1] - pad, box[2] + pad, box[3] + pad]
+    var near = layerFeatures(layer).filter(function (feature) {
+      var b = featureBox(feature)
+      return b[0] <= view[2] && b[2] >= view[0] && b[1] <= view[3] && b[3] >= view[1]
+    })
+    return near.length ? near : layerFeatures(layer)
+  }
+
+  /** A region name as the outlines and the data both spell it, minus the words that vary. */
+  function regionKey(name) {
+    return String(name || "")
+      .toLowerCase()
+      .replace(/\b(w\.?\s?p\.?|wilayah persekutuan|federal territory( of)?|changwat|province( of)?|state( of)?|negeri)\b/g, " ")
+      .replace(/[^\p{L}\p{N}]+/gu, "")
+  }
+
+  /** The layer naming most of the regions, and which feature each row's region is. */
+  function regionLayer(names) {
+    var best = null
+    FM.geoOutlines.layers.forEach(function (layer) {
+      var byKey = Object.create(null)
+      layerFeatures(layer).forEach(function (feature) {
+        var props = feature.properties || {}
+        ;[props.name].concat(String(props.aliases || "").split("|")).forEach(function (name) {
+          var key = regionKey(name)
+          if (key && !byKey[key]) byKey[key] = feature
+        })
+      })
+      var matched = names.filter(function (name) { return byKey[regionKey(name)] }).length
+      if (matched && (!best || matched > best.matched)) best = { layer: layer, byKey: byKey, matched: matched }
+    })
+    return best
+  }
+
+  var PLACE_LIMIT = 10
+
+  function renderMap(root, config, base) {
+    base = base || ""
+    var card = tile(root, config.title, base)
+    renderControls(card, config.controls, base)
+    var body = part(el("div", "fmr-tile-body fmr-map"), base + "chart")
+    card.appendChild(body)
+    var foot = el("div", "fmr-tile-foot")
+    var note = el("span")
+    var source = el("span")
+    foot.appendChild(note)
+    foot.appendChild(source)
+    card.appendChild(foot)
+    var byRegion = !!config.region
+    var drawn = []
+    var paint = mountChart(body, function (data) {
+      var opts = chartOpts()
+      var scales = byRegion
+        ? { projection: { axis: "x", projection: "mercator" }, color: { axis: "x", display: false, interpolate: heatShade, missing: token("--fm-bg-canvas", "#f3f3f6") } }
+        : { projection: { axis: "x", projection: "mercator" }, size: { axis: "x", display: false, range: config.value ? [4, 18] : [6, 6] } }
+      return {
+        type: byRegion ? "choropleth" : "bubbleMap",
+        data: data,
+        options: Object.assign({}, opts, {
+          onClick: config.clickSet
+            ? function (event, elements) {
+                if (!elements || !elements.length) return
+                var row = drawn[elements[0].index]
+                if (row) FM.setParams(resolveSet(config.clickSet, row, row[byRegion ? config.region : config.label]))
+              }
+            : undefined,
+          plugins: Object.assign({}, opts.plugins, {
+            tooltip: Object.assign({}, opts.plugins.tooltip, {
+              callbacks: {
+                title: function (items) {
+                  var row = items.length ? drawn[items[0].dataIndex] : null
+                  return row ? String(row[byRegion ? config.region : config.label] ?? "") : ""
+                },
+                label: function (context) {
+                  var row = drawn[context.dataIndex]
+                  return row && config.value ? amountText(config.format, num(row[config.value])) : ""
+                }
+              }
+            })
+          }),
+          scales: scales
+        })
+      }
+    })
+    // a projection keeps its aspect, so a short wide plot draws a small map in the middle
+    body.querySelector(".fmr-chart").style.height = "360px"
+    var places = el("ol", "fmr-places")
+    places.hidden = true
+    body.appendChild(places)
+
+    function say(node, message) {
+      node.hidden = !message
+      node.textContent = message || ""
+      foot.hidden = note.hidden && source.hidden
+    }
+
+    /** Points the map at one place, so a row of the list finds its dot or region. */
+    function pointAt(index) {
+      var chart = paint.chart()
+      if (!chart || !chart.setActiveElements) return
+      var active = index === null ? [] : [{ datasetIndex: 0, index: index }]
+      chart.setActiveElements(active)
+      var mark = index === null ? null : chart.getDatasetMeta(0).data[index]
+      if (chart.tooltip) chart.tooltip.setActiveElements(active, mark && mark.getCenterPoint ? mark.getCenterPoint() : { x: 0, y: 0 })
+      chart.update("none")
+    }
+
+    /** A figure drawn as a size or a shade is read off its list: largest first, the mark beside each as the key. */
+    function listPlaces() {
+      places.textContent = ""
+      places.hidden = !config.value || !drawn.length
+      if (places.hidden) return
+      var chart = paint.chart()
+      var scale = chart && chart.scales && chart.scales[byRegion ? "color" : "size"]
+      var order = drawn.map(function (row, index) { return { row: row, index: index, value: num(row[config.value]) } })
+      order.sort(function (a, b) { return b.value - a.value })
+      var shown = order.length > PLACE_LIMIT ? order.slice(0, PLACE_LIMIT - 1) : order
+      shown.forEach(function (entry) {
+        var item = el("li", "fmr-place")
+        var mark = el("span", byRegion ? "fmr-place-shade" : "fmr-place-dot")
+        if (byRegion) {
+          mark.style.background = scale && scale.getColorForValue ? scale.getColorForValue(entry.value) : token("--fm-feature-grape-fg", "#512191")
+        } else {
+          var radius = scale && scale.getSizeForValue ? scale.getSizeForValue(entry.value) : 4
+          var size = Math.max(4, Math.round(radius * 2)) + "px"
+          mark.style.width = mark.style.height = size
+          mark.style.setProperty("--mark", size)
+        }
+        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.addEventListener("mouseenter", function () { pointAt(entry.index) })
+        item.addEventListener("mouseleave", function () { pointAt(null) })
+        if (config.clickSet) {
+          item.classList.add("fmr-place-link")
+          item.tabIndex = 0
+          var pick = function () { FM.setParams(resolveSet(config.clickSet, entry.row, entry.row[byRegion ? config.region : config.label])) }
+          item.addEventListener("click", pick)
+          item.addEventListener("keydown", function (event) { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); pick() } })
+        }
+        places.appendChild(item)
+      })
+      if (shown.length < order.length) {
+        places.appendChild(el("li", "fmr-place fmr-place-more", text("map.more", "{count} more").replace("{count}", order.length - shown.length)))
+      }
+    }
+
+    function refresh() {
+      var rows = FM.rows(config.query)
+      if (!rows.length && FM.status(config.query) !== "loading") {
+        say(note, "")
+        say(source, "")
+        places.hidden = true
+        paint(null, emptyNote(config))
+        return
+      }
+      if (!geoReady()) {
+        body.textContent = ""
+        body.appendChild(el("p", "fmr-note error", "map library unavailable"))
+        return
+      }
+      var layer
+      var dataset
+      if (byRegion) {
+        var names = rows.map(function (row) { return String(row[config.region] ?? "") })
+        var found = regionLayer(names)
+        if (!found) {
+          say(note, text("map.unmatched", "Not on the map: {names}").replace("{names}", names.slice(0, 5).join(", ")))
+          say(source, "")
+          places.hidden = true
+          paint(null, emptyNote(config))
+          return
+        }
+        layer = found.layer
+        drawn = []
+        var missing = []
+        var data = []
+        rows.forEach(function (row) {
+          var feature = found.byKey[regionKey(row[config.region])]
+          if (!feature) return missing.push(String(row[config.region] ?? ""))
+          drawn.push(row)
+          data.push({ feature: feature, value: num(row[config.value]) })
+        })
+        say(note, missing.length ? text("map.unmatched", "Not on the map: {names}").replace("{names}", missing.slice(0, 5).join(", ")) : "")
+        dataset = {
+          label: config.title || "",
+          outline: layerFeatures(layer),
+          showOutline: true,
+          outlineBackgroundColor: token("--fm-bg-canvas", "#f3f3f6"),
+          outlineBorderColor: token("--fm-border-default", "#e5e5ea"),
+          borderColor: token("--fm-bg-default", "#ffffff"),
+          borderWidth: 1,
+          data: data
+        }
+      } else {
+        var placed = rows.filter(function (row) {
+          var lat = Number(row[config.lat])
+          var lon = Number(row[config.lon])
+          return row[config.lat] !== null && row[config.lat] !== "" && Number.isFinite(lat) && Number.isFinite(lon) && !(lat === 0 && lon === 0)
+        })
+        var unplaced = rows.length - placed.length
+        say(note, unplaced ? text("map.unplaced", "{count} of {total} have no location to place").replace("{count}", unplaced).replace("{total}", rows.length) : "")
+        if (!placed.length) {
+          say(source, "")
+          places.hidden = true
+          paint(null, emptyNote(config))
+          return
+        }
+        var points = placed.map(function (row) { return { lat: Number(row[config.lat]), lon: Number(row[config.lon]) } })
+        layer = pointLayer(points)
+        drawn = placed
+        dataset = {
+          label: config.title || "",
+          outline: layer ? pointOutline(layer, points) : [],
+          showOutline: !!layer,
+          outlineBackgroundColor: token("--fm-bg-canvas", "#f3f3f6"),
+          outlineBorderColor: token("--fm-border-default", "#e5e5ea"),
+          outlineBorderWidth: 1,
+          backgroundColor: token("--fm-feature-grape-fg", "#512191"),
+          borderColor: token("--fm-bg-default", "#ffffff"),
+          borderWidth: 1.5,
+          data: placed.map(function (row, index) {
+            return { latitude: points[index].lat, longitude: points[index].lon, value: config.value ? num(row[config.value]) : 1 }
+          })
+        }
+      }
+      say(source, layer ? text("map.boundaries", "Boundaries: {source}").replace("{source}", layer.attribution) : text("map.noShapes", "No map shapes for this area"))
+      paint({ labels: drawn.map(function (row) { return String(row[byRegion ? config.region : config.label] ?? "") }), datasets: [dataset] }, null)
+      listPlaces()
+    }
+
+    FM.onRows(config.query, refresh)
+  }
+
+  // --- scatter: two figures per item, one across and one up; a third sizes the dot
+
+  function renderScatter(root, config, base) {
+    base = base || ""
+    var card = tile(root, config.title, base)
+    renderControls(card, config.controls, base)
+    var body = part(el("div", "fmr-tile-body"), base + "chart")
+    card.appendChild(body)
+    var current = []
+    var paint = mountChart(body, function (data) {
+      var opts = chartOpts()
+      var ax = axis()
+      // two measures, so each axis is named — the one place a chart here carries axis titles
+      var measured = function (format, name) {
+        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) })
+        })
+      }
+      return {
+        type: config.size ? "bubble" : "scatter",
+        data: data,
+        options: Object.assign({}, opts, {
+          onClick: config.clickSet
+            ? function (event, elements) {
+                if (!elements || !elements.length) return
+                var row = current[elements[0].index]
+                if (row) FM.setParams(resolveSet(config.clickSet, row, row[config.label]))
+              }
+            : undefined,
+          plugins: Object.assign({}, opts.plugins, {
+            tooltip: Object.assign({}, opts.plugins.tooltip, {
+              callbacks: {
+                title: function (items) {
+                  var row = items.length ? current[items[0].dataIndex] : null
+                  return row && config.label ? String(row[config.label] ?? "") : ""
+                },
+                label: function (context) {
+                  var row = current[context.dataIndex]
+                  if (!row) return ""
+                  var lines = [
+                    (config.xLabel ? config.xLabel + " · " : "") + amountText(config.xFormat, num(row[config.x])),
+                    (config.yLabel ? config.yLabel + " · " : "") + amountText(config.yFormat, num(row[config.y]))
+                  ]
+                  if (config.size) lines.push(amountText(config.sizeFormat, num(row[config.size])))
+                  return lines
+                }
+              }
+            })
+          }),
+          scales: { x: measured(config.xFormat, config.xLabel), y: measured(config.yFormat, config.yLabel) }
+        })
+      }
+    })
+
+    function refresh() {
+      current = FM.rows(config.query).filter(function (row) {
+        return row[config.x] !== null && row[config.y] !== null && Number.isFinite(Number(row[config.x])) && Number.isFinite(Number(row[config.y]))
+      })
+      if (!current.length && FM.status(config.query) !== "loading") {
+        paint(null, emptyNote(config))
+        return
+      }
+      // a dot's area, not its radius, follows the figure
+      var biggest = config.size ? Math.max.apply(null, current.map(function (row) { return num(row[config.size]) })) || 1 : 1
+      var color = token("--fm-feature-aqua-accent", "#3ab0ff")
+      paint(
+        {
+          datasets: [
+            {
+              data: current.map(function (row) {
+                var point = { x: num(row[config.x]), y: num(row[config.y]) }
+                if (config.size) point.r = 4 + 16 * Math.sqrt(Math.max(0, num(row[config.size])) / biggest)
+                return point
+              }),
+              backgroundColor: rgba(color, 0.7),
+              borderColor: color,
+              borderWidth: 1,
+              pointRadius: 5,
+              pointHoverRadius: 7
+            }
+          ]
+        },
+        null
+      )
+    }
+
+    FM.onRows(config.query, refresh)
+  }
+
+  // --- radar: up to three items' profiles across the same measures
+
+  var RADAR_TONES = [
+    ["--fm-feature-grape-fg", "#512191"],
+    ["--fm-feature-aqua-accent", "#3ab0ff"],
+    ["--fm-feature-mustard-accent", "#ffc746"]
+  ]
+
+  function renderRadar(root, config, base) {
+    base = base || ""
+    var card = tile(root, config.title, base)
+    renderControls(card, config.controls, base)
+    var body = part(el("div", "fmr-tile-body"), base + "chart")
+    card.appendChild(body)
+    var axes = config.axes || []
+    var paint = mountChart(body, function (data) {
+      var opts = chartOpts()
+      return {
+        type: "radar",
+        data: data,
+        options: Object.assign({}, opts, {
+          plugins: Object.assign({}, opts.plugins, {
+            tooltip: Object.assign({}, opts.plugins.tooltip, {
+              callbacks: {
+                label: function (context) {
+                  return context.dataset.label + " · " + amountText(config.format, Number(context.raw) || 0)
+                }
+              }
+            })
+          }),
+          scales: {
+            r: {
+              beginAtZero: true,
+              grid: { color: gridColor() },
+              angleLines: { color: gridColor() },
+              ticks: { display: false },
+              pointLabels: { color: token("--fm-text-muted", "#6b6c70"), font: { size: px("--fm-font-size-12", 12) } }
+            }
+          }
+        })
+      }
+    })
+
+    function refresh() {
+      var rows = FM.rows(config.query).slice(0, 3)
+      if (!rows.length && FM.status(config.query) !== "loading") {
+        paint(null, emptyNote(config))
+        return
+      }
+      var datasets = rows.map(function (row, index) {
+        var color = tone(RADAR_TONES, index)
+        return {
+          label: String(row[config.label] ?? ""),
+          data: axes.map(function (one) { return num(row[one.value]) }),
+          borderColor: color,
+          backgroundColor: rgba(color, 0.16),
+          borderWidth: 2,
+          pointRadius: 3,
+          pointBackgroundColor: color
+        }
+      })
+      headLegend(card, datasets.map(function (set) { return { label: set.label, color: set.borderColor } }))
+      paint({ labels: axes.map(function (one) { return one.label }), datasets: datasets }, null)
+    }
+
+    FM.onRows(config.query, refresh)
+  }
+
+  // --- flow: amounts moving from one set of things to another, drawn by chartjs-chart-sankey
+
+  // every family's accent, then its fg, so a dozen things never share a colour
+  var FLOW_TONES = SLICE_TONES.concat([
+    ["--fm-feature-aqua-fg", "#0a5384"],
+    ["--fm-feature-grape-fg", "#512191"],
+    ["--fm-feature-mustard-fg", "#903e1f"],
+    ["--fm-feature-berry-fg", "#5f090a"],
+    ["--fm-feature-lime-fg", "#306a01"],
+    ["--fm-feature-blossom-fg", "#8c146a"]
+  ])
+  // the height the bands keep once a column's gaps are taken out of the plot
+  var FLOW_BAND_ROOM = 160
+
+  // the most nodes one column holds: a node sits one past the deepest node flowing into it
+  function busiestColumn(links) {
+    var into = {}
+    links.forEach(function (link) {
+      ;(into[link.to] = into[link.to] || []).push(link.from)
+      into[link.from] = into[link.from] || []
+    })
+    var depth = {}
+    function level(key, seen) {
+      if (depth[key] !== undefined) return depth[key]
+      if (seen[key]) return 0
+      seen[key] = true
+      var deepest = 0
+      into[key].forEach(function (from) { deepest = Math.max(deepest, level(from, seen) + 1) })
+      return (depth[key] = deepest)
+    }
+    var count = {}
+    var most = 0
+    Object.keys(into).forEach(function (key) {
+      var at = level(key, {})
+      count[at] = (count[at] || 0) + 1
+      most = Math.max(most, count[at])
+    })
+    return most
+  }
+
+  function renderFlow(root, config, base) {
+    base = base || ""
+    var card = tile(root, config.title, base)
+    renderControls(card, config.controls, base)
+    var body = part(el("div", "fmr-tile-body"), base + "chart")
+    card.appendChild(body)
+    var current = []
+    var nodeColor = {}
+    var paint = mountChart(body, function (data) {
+      var opts = chartOpts()
+      return {
+        type: "sankey",
+        data: data,
+        options: Object.assign({}, opts, {
+          onClick: config.clickSet
+            ? function (event, elements) {
+                if (!elements || !elements.length) return
+                var row = current[elements[0].index]
+                if (row) FM.setParams(resolveSet(config.clickSet, row, row[config.to]))
+              }
+            : undefined,
+          plugins: Object.assign({}, opts.plugins, {
+            tooltip: Object.assign({}, opts.plugins.tooltip, {
+              callbacks: {
+                title: function () { return "" },
+                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]))
+                }
+              }
+            })
+          })
+        })
+      }
+    })
+
+    function refresh() {
+      current = FM.rows(config.query).filter(function (row) { return num(row[config.value]) > 0 })
+      if (!current.length && FM.status(config.query) !== "loading") {
+        paint(null, emptyNote(config))
+        return
+      }
+      var registry = window.Chart && window.Chart.registry
+      if (registry && !registry.controllers.get("sankey")) {
+        body.textContent = ""
+        body.appendChild(el("p", "fmr-note error", "flow library unavailable"))
+        return
+      }
+      // each thing keeps one colour wherever it appears, in the order the rows first name it
+      nodeColor = {}
+      var named = 0
+      current.forEach(function (row) {
+        ;[row[config.from], row[config.to]].forEach(function (name) {
+          var key = String(name)
+          if (!nodeColor[key]) nodeColor[key] = tone(FLOW_TONES, named++)
+        })
+      })
+      var links = current.map(function (row) {
+        return { from: String(row[config.from]), to: String(row[config.to]), flow: num(row[config.value]) }
+      })
+      // one label line between thin nodes: the library shrinks its gaps with the bands, so size them to land at a line
+      var fontSize = px("--fm-font-size-12", 12)
+      var line = Math.ceil(fontSize * 1.2) + 2
+      var gaps = busiestColumn(links) - 1
+      var wrap = body.querySelector(".fmr-chart")
+      wrap.style.minHeight = gaps * line + FLOW_BAND_ROOM + "px"
+      var height = Math.max(wrap.clientHeight, gaps * line + FLOW_BAND_ROOM)
+      paint(
+        {
+          datasets: [
+            {
+              data: links,
+              nodePadding: (line * height) / (height - gaps * line),
+              colorFrom: function (context) {
+                var item = context.dataset.data[context.dataIndex]
+                return item ? nodeColor[item.from] : undefined
+              },
+              colorTo: function (context) {
+                var item = context.dataset.data[context.dataIndex]
+                return item ? nodeColor[item.to] : undefined
+              },
+              colorMode: "gradient",
+              // a part ends beside its siblings, not pushed to the last column
+              modeX: "even",
+              alpha: 0.6,
+              borderWidth: 0,
+              nodeWidth: 10,
+              size: "max",
+              color: token("--fm-text-primary", "#1c1c1e"),
+              font: { size: fontSize }
+            }
+          ]
+        },
+        null
+      )
+    }
+
+    FM.onRows(config.query, refresh)
+  }
+
   var RENDERERS = {
     "filter-bar": renderFilterBar,
     "kpi-row": renderKpiRow,
@@ -1163,7 +2399,14 @@
     table: renderTable,
     heatmap: renderHeatmap,
     "detail-panel": renderDetailPanel,
-    "page-header": renderPageHeader
+    "page-header": renderPageHeader,
+    funnel: renderFunnel,
+    waterfall: renderWaterfall,
+    donut: renderDonut,
+    map: renderMap,
+    scatter: renderScatter,
+    radar: renderRadar,
+    flow: renderFlow
   }
 
   FM.components = {