@feedmepos/mf-report 5.28.5 → 5.29.0

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

@@ -0,0 +1,1042 @@
+/**
+ * FM.components — declarative section renderers, delivered as the `components@1` lib.
+ * A component section is config rendered by this tested code; the model writes no JS.
+ * Renderers subscribe ONLY synchronously during mount (the frame attributes errors and
+ * rows callbacks to the section it is currently mounting) and treat config as data:
+ * unknown keys are ignored, the server already validated shape at write time.
+ */
+;(function () {
+  "use strict"
+
+  var FM = (window.FM = window.FM || {})
+  if (FM.components) return
+
+  // Colours come from the Vue-v2 Rebus tokens the frame embeds; Chart.js needs them resolved,
+  // so they are read at paint time. The literal is only the fallback for a frame without the sheet.
+  function token(name, fallback) {
+    var value = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+    return value || fallback
+  }
+  function px(name, fallback) {
+    var value = parseFloat(token(name, ""))
+    return isFinite(value) ? value : fallback
+  }
+  // chart families per the chart-design guide: lines step through blossom, bars take grape
+  var LINE_STEPS = [
+    ["--fm-feature-blossom-fg", "#8c146a"],
+    ["--fm-feature-blossom-accent", "#ffc4c3"],
+    ["--fm-feature-grape-accent", "#8f61e8"],
+    ["--fm-feature-aqua-accent", "#3ab0ff"]
+  ]
+  function lineColor(index) {
+    var step = LINE_STEPS[index % LINE_STEPS.length]
+    return token(step[0], step[1])
+  }
+  function barColor() {
+    return token("--fm-feature-grape-fg", "#512191")
+  }
+  function compareColor() {
+    return token("--fm-text-disabled", "#b2b3b6")
+  }
+  function axis() {
+    return {
+      border: { display: false },
+      ticks: { color: token("--fm-text-muted", "#6b6c70"), font: { size: px("--fm-font-size-14", 14) } }
+    }
+  }
+  function gridColor() {
+    return token("--fm-border-default", "#f0f0f0")
+  }
+  function chartOpts() {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: false,
+      elements: { bar: { borderRadius: px("--fm-radius-xs", 4) } },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          backgroundColor: token("--fm-bg-inverse", "#1c1c1e"),
+          titleColor: token("--fm-text-inverse", "#fff"),
+          bodyColor: token("--fm-text-inverse", "#fff"),
+          cornerRadius: px("--fm-radius-sm", 8),
+          padding: 10,
+          boxWidth: 8,
+          boxHeight: 8,
+          borderWidth: 0
+        }
+      }
+    }
+  }
+
+  // --- formatting: every value leaves PG as a string; env is read at call time
+
+  function num(value) {
+    var parsed = Number(value)
+    return isFinite(parsed) ? parsed : 0
+  }
+
+  function intl(digits) {
+    return new Intl.NumberFormat((window.env && window.env.locale) || "en-MY", {
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits
+    })
+  }
+
+  function formatValue(format, value) {
+    if (value === null || value === undefined || value === "") return "—"
+    switch (format) {
+      case "money":
+        return intl(2).format(num(value))
+      case "amount":
+        return intl(2).format(num(value))
+      case "count":
+        return intl(0).format(num(value))
+      case "percent":
+        return intl(1).format(num(value)) + "%"
+      case "ratio":
+        return intl(1).format(num(value) * 100) + "%"
+      case "datetime":
+        return new Date(value).toLocaleString((window.env && window.env.locale) || "en-MY", {
+          dateStyle: "medium",
+          timeStyle: "short"
+        })
+      default:
+        return String(value)
+    }
+  }
+
+  /** Axis ticks: RM 0, RM 2k, RM 10k — abbreviated, per the chart guide. */
+  function abbrev(format) {
+    return function (value) {
+      var v = num(value)
+      var currency = format === "money" ? ((window.env && window.env.currency) || "") + " " : ""
+      if (Math.abs(v) >= 1000000) return currency + (v / 1000000).toFixed(1).replace(/\.0$/, "") + "m"
+      if (Math.abs(v) >= 1000) return currency + (v / 1000).toFixed(1).replace(/\.0$/, "") + "k"
+      // a tiny domain otherwise rounds every tick to the same label
+      return currency + intl(Math.abs(v) > 0 && Math.abs(v) < 10 ? 2 : 0).format(v)
+    }
+  }
+
+  /** Marks a node as the config it renders, so a comment on it can name the config path. */
+  function part(node, path) {
+    if (path) node.setAttribute("data-fm-part", path)
+    return node
+  }
+
+  function el(tag, className, text) {
+    var node = document.createElement(tag)
+    if (className) node.className = className
+    if (text !== undefined && text !== null) node.textContent = String(text)
+    return node
+  }
+
+  function tile(root, title, base) {
+    var card = el("div", "fmr-card fmr-tile")
+    if (title) {
+      var head = el("div", "fmr-tile-head")
+      head.appendChild(part(el("h2", "fmr-tile-title", title), base + "title"))
+      card.appendChild(head)
+    }
+    root.appendChild(card)
+    return card
+  }
+
+  function emptyNote(config) {
+    return el("p", "fmr-note", config.empty || "No data in this period.")
+  }
+
+  /** '$row.col' / '$x' references resolve against the interaction; literals pass through. */
+  function resolveSet(setConfig, row, x) {
+    var values = {}
+    Object.keys(setConfig || {}).forEach(function (param) {
+      var value = setConfig[param]
+      if (typeof value === "string" && value.indexOf("$row.") === 0) {
+        values[param] = row ? row[value.slice(5)] : null
+      } else if (value === "$x") {
+        values[param] = x
+      } else {
+        values[param] = value
+      }
+    })
+    return values
+  }
+
+  // --- controls: one shared implementation, at every placement
+
+  var LOCATION_CONTEXT = "locations"
+
+  function paramType(name) {
+    var meta = FM.paramMeta && FM.paramMeta(name)
+    return meta ? meta.type : undefined
+  }
+
+  function declaredOptions(name) {
+    var meta = FM.paramMeta && FM.paramMeta(name)
+    return meta && meta.options && meta.options.length ? meta.options : null
+  }
+
+  /** A list declared with an empty default means every value, so ticking nothing is not "None". */
+  function emptyMeansAll(name) {
+    var meta = FM.paramMeta && FM.paramMeta(name)
+    return !!(meta && Array.isArray(meta.default) && !meta.default.length)
+  }
+
+  function sameValue(a, b) {
+    return JSON.stringify(a === undefined ? null : a) === JSON.stringify(b === undefined ? null : b)
+  }
+
+  /**
+   * Segmented only for a small static scalar domain: an array or a source that refreshes would
+   * otherwise change interaction style under the merchant's hand.
+   */
+  function presentationOf(control, count, multiple, dynamic) {
+    if (control.kind) return control.kind
+    var wanted = control.presentation || "auto"
+    if (wanted !== "auto") return wanted
+    return !multiple && !dynamic && count > 1 && count <= 5 ? "segmented" : "dropdown"
+  }
+
+  /** A date control commits both endpoints in one write, so no query sees half a range. */
+  function mountDate(mount, control) {
+    var single = !control.toParam
+    function reading(values) {
+      return {
+        from: values[control.param],
+        to: control.toParam ? values[control.toParam] : values[control.param]
+      }
+    }
+    var handle = FM.ui.dateRange(mount, {
+      single: single,
+      value: reading(FM.params()),
+      onChange: function (range) {
+        var patch = {}
+        patch[control.param] = range.from
+        if (control.toParam) patch[control.toParam] = range.to
+        FM.setParams(patch)
+      }
+    })
+    FM.onParams(single ? [control.param] : [control.param, control.toParam], function (values) {
+      handle.setValue(reading(values))
+    })
+  }
+
+  function mountSelection(mount, note, control) {
+    var name = control.param
+    var type = paramType(name)
+    var multiple = type === "string[]" || type === "number[]"
+    var source = control.optionsFrom
+    var outlets = !!(source && source.context === LOCATION_CONTEXT)
+    var optionQuery = source && source.query ? source.query : null
+    var dynamic = outlets || !!optionQuery
+
+    function fromSource() {
+      if (outlets) {
+        return (window.env.locations || []).map(function (location) {
+          return { label: location.name || location.id, value: location.id }
+        })
+      }
+      var labelColumn = source.label || source.value
+      var seen = Object.create(null)
+      var out = []
+      FM.rows(optionQuery).forEach(function (row) {
+        var value = row[source.value]
+        if (value === null || value === undefined) return
+        var key = String(value)
+        if (seen[key]) return
+        seen[key] = 1
+        var text = row[labelColumn]
+        out.push({ label: String(text === null || text === undefined ? value : text), value: value })
+      })
+      return out
+    }
+
+    /** One source, and a declared domain is the ceiling a dynamic one may offer within. */
+    function options() {
+      if (control.options) return control.options
+      if (!dynamic) return declaredOptions(name) || []
+      var offered = fromSource()
+      var declared = declaredOptions(name)
+      if (!declared) return offered
+      var allowed = Object.create(null)
+      declared.forEach(function (option) {
+        allowed[String(option.value)] = 1
+      })
+      return offered.filter(function (option) {
+        return allowed[String(option.value)]
+      })
+    }
+
+    function write(value) {
+      var patch = {}
+      patch[name] = value
+      FM.setParams(patch)
+    }
+
+    var items = options()
+    var presentation = presentationOf(control, items.length, multiple, dynamic)
+    var current = FM.params()[name]
+    var handle
+    if (presentation === "segmented") {
+      handle = FM.ui.segmented(mount, { options: items, value: current, onChange: write })
+    } else {
+      handle = FM.ui.dropdown(mount, {
+        options: items,
+        multiple: multiple,
+        value: current,
+        placeholder: multiple && emptyMeansAll(name) ? "All" : null,
+        icon: outlets ? "store" : null,
+        all: outlets
+          ? {
+              label: control.label ? "All " + control.label.toLowerCase() : "All",
+              active: FM.paramIntent(name) === "all",
+              onSelect: function () {
+                var patch = {}
+                var intent = {}
+                patch[name] = options().map(function (option) {
+                  return option.value
+                })
+                intent[name] = "all"
+                FM.setParams(patch, { intent: intent })
+              }
+            }
+          : null,
+        onChange: write
+      })
+    }
+
+    /** A value the refreshed source no longer offers is said, never silently rewritten. */
+    function checkMissing(value) {
+      if (!items.length || value === null || value === undefined) return false
+      var offered = Object.create(null)
+      items.forEach(function (option) {
+        offered[String(option.value)] = 1
+      })
+      var picked = Array.isArray(value) ? value : [value]
+      return picked.some(function (one) {
+        return !offered[String(one)]
+      })
+    }
+
+    function say(text) {
+      note.hidden = !text
+      note.textContent = text || ""
+    }
+
+    function repaint(values) {
+      var value = values[name]
+      if (!sameValue(handle.getValue(), value)) handle.setValue(value)
+      if (handle.setAll) handle.setAll(FM.paramIntent(name) === "all")
+      if (FM.paramIntent(name) === "all") return say("")
+      say(checkMissing(value) ? "The saved selection is no longer offered." : "")
+    }
+
+    FM.onParams([name], function (values) {
+      // the outlet list resolves after the first paint, so the options are re-read here too
+      if (outlets) {
+        items = options()
+        handle.setOptions(items)
+      }
+      repaint(values)
+    })
+
+    if (optionQuery) {
+      FM.onRows(optionQuery, function () {
+        var status = FM.status(optionQuery)
+        items = options()
+        handle.setOptions(items)
+        // only its own source disables it: a chart refreshing must never take the filter away
+        if (handle.setDisabled) handle.setDisabled(status === "loading" && !items.length)
+        if (status === "error") return say("Options unavailable.")
+        repaint(FM.params())
+      })
+    }
+  }
+
+  /** Controls are canvas elements: a standalone bar, or a row below a widget's title. */
+  function renderControls(root, controls, base) {
+    if (!controls || !controls.length) return
+    if (!FM.ui) throw new Error("fm-ui@1 lib missing")
+    var row = el("div", "fm-controls")
+    root.appendChild(row)
+    controls.forEach(function (control, index) {
+      var slot = part(el("div", "fm-control"), base + "controls." + index)
+      if (control.label)
+        slot.appendChild(el("span", "fm-control-label fm-text-body-sm-500", control.label))
+      var mount = el("span")
+      slot.appendChild(mount)
+      var note = el("span", "fm-control-note fm-text-body-sm-400")
+      note.hidden = true
+      slot.appendChild(note)
+      row.appendChild(slot)
+      if (control.type === "date") mountDate(mount, control)
+      else mountSelection(mount, note, control)
+    })
+  }
+
+  // --- filter-bar: a standalone grouping container for controls
+
+  function renderFilterBar(root, config, base) {
+    renderControls(root, config.controls, base || "")
+  }
+
+  // --- kpi-row: tiles with an optional previous-period chip
+
+  function renderKpiRow(root, config, base) {
+    base = base || ""
+    renderControls(root, config.controls, base)
+    var row = el("div", "fmr-kpis")
+    root.appendChild(row)
+    var tiles = config.tiles || []
+    var nodes = tiles.map(function (tileConfig, index) {
+      var card = part(el("div", "fmr-card fmr-kpi"), base + "tiles." + index)
+      card.appendChild(el("div", "fmr-kpi-label", tileConfig.label))
+      var value = el("div", "fmr-kpi-value", "—")
+      card.appendChild(value)
+      // the comparison gets its own line: on the value line it has only the room the
+      // number leaves, which at four money tiles across is none
+      var delta = el("div", "fmr-kpi-delta")
+      card.appendChild(delta)
+      if (tileConfig.caption) card.appendChild(el("div", "fmr-kpi-note", tileConfig.caption))
+      row.appendChild(card)
+      return { value: value, delta: delta }
+    })
+
+    function paint() {
+      tiles.forEach(function (tileConfig, index) {
+        var rows = FM.rows(tileConfig.query)
+        var target = nodes[index].value
+        var deltaNode = nodes[index].delta
+        target.textContent = ""
+        deltaNode.textContent = ""
+        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)))
+        } else {
+          target.appendChild(document.createTextNode(formatValue(tileConfig.format || "amount", raw)))
+        }
+        if (tileConfig.compareQuery && raw !== null && raw !== undefined) {
+          var prevRows = FM.rows(tileConfig.compareQuery)
+          var prev = prevRows.length ? num(prevRows[0][tileConfig.compareValue || tileConfig.value]) : null
+          if (prev !== null && prev !== 0) {
+            var delta = ((num(raw) - prev) / Math.abs(prev)) * 100
+            var goodWhen = tileConfig.deltaGoodWhen || "up"
+            var good = goodWhen === "up" ? delta >= 0 : delta <= 0
+            var chipClass = Math.abs(delta) < 0.05 ? "flat" : good ? "up" : "down"
+            var arrow = Math.abs(delta) < 0.05 ? "→" : delta >= 0 ? "↗" : "↘"
+            deltaNode.appendChild(
+              el("span", "fmr-trend " + chipClass, arrow + " " + intl(1).format(Math.abs(delta)) + "%")
+            )
+          }
+        }
+      })
+    }
+
+    var seen = {}
+    tiles.forEach(function (tileConfig) {
+      ;[tileConfig.query, tileConfig.compareQuery].forEach(function (queryId) {
+        if (!queryId || seen[queryId]) return
+        seen[queryId] = true
+        FM.onRows(queryId, paint)
+      })
+    })
+  }
+
+  // --- charts
+
+  function mountChart(body, build) {
+    var wrap = el("div", "fmr-chart")
+    var canvas = document.createElement("canvas")
+    wrap.appendChild(canvas)
+    body.appendChild(wrap)
+    var chart = null
+    return function paint(data, note) {
+      if (!window.Chart) {
+        body.textContent = ""
+        body.appendChild(el("p", "fmr-note error", "chart library unavailable"))
+        return
+      }
+      if (note) {
+        wrap.hidden = true
+        if (!body.__note) {
+          body.__note = note
+          body.appendChild(note)
+        }
+      } else {
+        wrap.hidden = false
+        if (body.__note) {
+          body.removeChild(body.__note)
+          body.__note = null
+        }
+        if (chart) {
+          chart.data = data
+          chart.update()
+        } else {
+          chart = new window.Chart(canvas, build(data))
+        }
+      }
+    }
+  }
+
+  function renderTimeseries(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 compareQuery = config.compare && (config.compare.query || config.query)
+    var paint = mountChart(body, function (data) {
+      var ax = axis()
+      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) })
+            })
+          }
+        })
+      }
+    })
+
+    function refresh() {
+      var rows = FM.rows(config.query)
+      if (!rows.length && FM.status(config.query) !== "loading") {
+        paint(null, emptyNote(config))
+        return
+      }
+      var labels = rows.map(function (row) {
+        var raw = row[config.x]
+        if (config.xType === "day") {
+          var day = new Date(raw)
+          if (!isNaN(day)) {
+            return day.toLocaleDateString((window.env && window.env.locale) || "en-MY", {
+              month: "short",
+              day: "numeric"
+            })
+          }
+        }
+        return String(raw)
+      })
+      // a mixed series is drawn as its own family: bars take grape, lines step through blossom.
+      // chart.js draws the order-sorted metasets backwards, so the lower order lands on top —
+      // the line has to stay readable where it crosses its own bars.
+      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 data = rows.map(function (row) { return num(row[series.y]) })
+        if (series.kind === "bar") {
+          return {
+            label: series.label,
+            type: "bar",
+            data: data,
+            backgroundColor: barColor(),
+            borderWidth: 0,
+            maxBarThickness: 20,
+            order: 2
+          }
+        }
+        var color = lineColor(lineIndex++)
+        return {
+          label: series.label,
+          type: "line",
+          data: data,
+          borderColor: color,
+          backgroundColor: color,
+          borderWidth: 2,
+          tension: 0,
+          pointRadius: marker,
+          pointHoverRadius: 4,
+          fill: false,
+          order: 1
+        }
+      })
+      if (config.compare) {
+        var compareRows = FM.rows(compareQuery)
+        datasets.push({
+          label: config.compare.label || "Previous period",
+          type: "line",
+          // 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
+          }),
+          borderColor: compareColor(),
+          borderDash: [4, 4],
+          borderWidth: 2,
+          tension: 0,
+          pointRadius: marker,
+          pointHoverRadius: 4,
+          fill: false,
+          order: 3
+        })
+      }
+      paint({ labels: labels, datasets: datasets }, null)
+    }
+
+    FM.onRows(config.query, refresh)
+    if (compareQuery && compareQuery !== config.query) FM.onRows(compareQuery, refresh)
+  }
+
+  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 current = []
+    var total = 0
+    // shareDenominator only reads .share, so config doubles as a column
+    var denominator = shareDenominator(config)
+    var paint = mountChart(body, function (data) {
+      var opts = chartOpts()
+      var ax = axis()
+      return {
+        type: "bar",
+        data: data,
+        options: Object.assign({}, opts, {
+          onClick: config.clickSet
+            ? function (event, elements) {
+                if (!elements || !elements.length) return
+                var index = elements[0].index
+                var row = current[index]
+                FM.setParams(resolveSet(config.clickSet, row, row ? row[config.x] : null))
+              }
+            : 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"
+                    }
+                  }
+                })
+              : 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) })
+            })
+          }
+        })
+      }
+    })
+
+    function refresh() {
+      var rows = FM.rows(config.query)
+      current = rows
+      if (config.share) {
+        if (denominator) {
+          var denominatorRows = FM.rows(denominator.query)
+          total = denominatorRows.length ? num(denominatorRows[0][denominator.value]) : 0
+        } else {
+          total = rows.reduce(function (sum, row) { return sum + num(row[config.y]) }, 0)
+        }
+      }
+      if (!rows.length && FM.status(config.query) !== "loading") {
+        paint(null, emptyNote(config))
+        return
+      }
+      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) + "%"
+          }),
+          datasets: [
+            {
+              data: rows.map(function (row) { return num(row[config.y]) }),
+              backgroundColor: barColor(),
+              maxBarThickness: 20
+            }
+          ]
+        },
+        null
+      )
+    }
+
+    FM.onRows(config.query, refresh)
+    if (denominator && denominator.query !== config.query) FM.onRows(denominator.query, refresh)
+  }
+
+  // --- table: FM.ui.table plus header sorting and a client-side share column
+
+  function shareDenominator(column) {
+    var denominator = column.share && column.share.denominator
+    return denominator && typeof denominator === "object" ? denominator : null
+  }
+
+  function renderTable(root, config, base) {
+    base = base || ""
+    var card = tile(root, config.title, base)
+    renderControls(card, config.controls, base)
+    if (config.caption)
+      card.appendChild(part(el("p", "fmr-tile-note", config.caption), base + "caption"))
+    var mount = part(el("div"), base + "table")
+    card.appendChild(mount)
+
+    var sortKey = config.sort ? config.sort.key : null
+    var sortDir = config.sort ? config.sort.dir : "desc"
+    var shareTotals = {}
+
+    var columns = []
+    ;(config.columns || []).forEach(function (column, index) {
+      var format = column.format
+      columns.push({
+        part: base + "columns." + index,
+        key: column.key,
+        label: column.label || column.key,
+        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) }
+      })
+      if (column.share) {
+        columns.push({
+          part: base + "columns." + index + ".share",
+          key: column.key,
+          label: "Share",
+          align: "right",
+          dim: true,
+          format: function (value, row) {
+            var total = shareTotals[column.key]
+            var denominator = shareDenominator(column)
+            if (denominator && denominator.key) total = total ? total[String(row[denominator.key])] : 0
+            return total ? intl(1).format((num(value) / total) * 100) + "%" : "—"
+          }
+        })
+      }
+    })
+
+    var control = FM.ui.table(mount, {
+      columns: columns,
+      rows: [],
+      pageSize: config.pageSize === undefined ? 20 : config.pageSize,
+      empty: config.empty || "No rows in this period.",
+      onRowClick: config.rowClickSet
+        ? function (row) { FM.setParams(resolveSet(config.rowClickSet, row, null)) }
+        : undefined
+    })
+
+    function ordered() {
+      var rows = FM.rows(config.query).slice()
+      ;(config.columns || []).forEach(function (column) {
+        if (!column.share) return
+        var denominator = shareDenominator(column)
+        if (denominator && denominator.key) {
+          var byKey = {}
+          FM.rows(denominator.query).forEach(function (row) {
+            byKey[String(row[denominator.key])] = num(row[denominator.value])
+          })
+          shareTotals[column.key] = byKey
+        } else if (denominator) {
+          var denominatorRows = FM.rows(denominator.query)
+          shareTotals[column.key] = denominatorRows.length
+            ? num(denominatorRows[0][denominator.value])
+            : 0
+        } else {
+          shareTotals[column.key] = rows.reduce(function (sum, row) { return sum + num(row[column.key]) }, 0)
+        }
+      })
+      if (!sortKey) return rows
+      rows.sort(function (a, b) {
+        var left = a[sortKey]
+        var right = b[sortKey]
+        var ln = Number(left)
+        var rn = Number(right)
+        var compared =
+          isFinite(ln) && isFinite(rn) ? ln - rn : String(left ?? "").localeCompare(String(right ?? ""))
+        return sortDir === "asc" ? compared : -compared
+      })
+      return rows
+    }
+
+    // header click cycles the sort; thead persists across setRows, so bind once
+    var headers = control.element.querySelectorAll("th")
+    Array.prototype.forEach.call(headers, function (th, index) {
+      var column = columns[index]
+      if (!column) return
+      th.style.cursor = "pointer"
+      th.addEventListener("click", function () {
+        if (sortKey === column.key) sortDir = sortDir === "desc" ? "asc" : "desc"
+        else {
+          sortKey = column.key
+          sortDir = "desc"
+        }
+        Array.prototype.forEach.call(headers, function (other) { other.removeAttribute("aria-sort") })
+        th.setAttribute("aria-sort", sortDir === "asc" ? "ascending" : "descending")
+        control.setRows(ordered())
+      })
+    })
+
+    var subscribed = {}
+    function subscribe(queryId) {
+      if (!queryId || subscribed[queryId]) return
+      subscribed[queryId] = true
+      FM.onRows(queryId, function () { control.setRows(ordered()) })
+    }
+    subscribe(config.query)
+    ;(config.columns || []).forEach(function (column) {
+      var denominator = shareDenominator(column)
+      if (denominator) subscribe(denominator.query)
+    })
+  }
+
+  // --- detail-panel: a dialog over the report while its param is set; closing writes null back
+
+  function renderDetailPanel(root, config, base) {
+    base = base || ""
+    var host = el("div")
+    root.appendChild(host)
+    var panel = FM.ui.dialog(host, {
+      title: config.title || "",
+      subtitle: config.title || "",
+      onClose: function () {
+        // an external clear already closed it; writing null again would be a second params push
+        if (!FM.params()[config.showWhen]) return
+        var patch = {}
+        patch[config.showWhen] = null
+        FM.setParams(patch)
+      }
+    })
+    part(panel.element.querySelector(".fm-dlg-title"), base + "title")
+    var body = el("div")
+    panel.body.appendChild(body)
+
+    var renderers = { timeseries: renderTimeseries, table: renderTable, bar: renderBar }
+    var mounted = false
+
+    // titleLookup swaps a raw drill id for the matching row's text column
+    function titleValue(value) {
+      var lookup = config.titleLookup
+      if (lookup) {
+        var rows = FM.rows(lookup.query)
+        for (var i = 0; i < rows.length; i++) {
+          if (String(rows[i][lookup.value]) === String(value)) {
+            var text = rows[i][lookup.text]
+            if (text !== null && text !== undefined && text !== "") return String(text)
+          }
+        }
+      }
+      return String(value)
+    }
+
+    function sync() {
+      var value = FM.params()[config.showWhen]
+      var open = value !== null && value !== undefined && value !== ""
+      if (!open) {
+        panel.close()
+        return
+      }
+      // the entity the viewer clicked is the headline; the panel's own title says what it shows
+      panel.setTitle(titleValue(value))
+      panel.setSubtitle(config.title || "")
+      if (!mounted) {
+        mounted = true
+        renderers[config.body.component](body, config.body.config, base + "body.config.")
+      }
+      panel.open()
+    }
+
+    // the body's own subscription re-fires on every params push, which drives visibility;
+    // mounting the body up front would subscribe outside the frame's mount attribution
+    var probe = config.body && config.body.config ? config.body.config.query : null
+    if (probe) {
+      mounted = true
+      renderers[config.body.component](body, config.body.config, base + "body.config.")
+      FM.onRows(probe, sync)
+    }
+    if (config.titleLookup) FM.onRows(config.titleLookup.query, sync)
+    sync()
+  }
+
+  // --- heatmap: day-of-week × hour grid on one hue; grey where no row; its own legend
+  var HEATMAP_DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
+  var HEAT_BANDS = [0.14, 0.32, 0.54, 0.78, 1]
+  var NO_DATA = "var(--fm-border-default, #f0f0f0)"
+  function rgba(hex, alpha) {
+    var h = hex.replace("#", "")
+    if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2]
+    var n = parseInt(h, 16)
+    if (!isFinite(n)) return hex
+    return "rgba(" + ((n >> 16) & 255) + ", " + ((n >> 8) & 255) + ", " + (n & 255) + ", " + alpha + ")"
+  }
+  function heatBand(t) {
+    var clamped = Math.max(0, Math.min(1, t))
+    return HEAT_BANDS[Math.min(HEAT_BANDS.length - 1, Math.floor(clamped * HEAT_BANDS.length))]
+  }
+  function heatShade(t) {
+    return rgba(token("--fm-action-primary-bg", "#ff7823"), heatBand(t))
+  }
+  function heatLabel(text, align) {
+    var node = el("div", "fmr-heatmap-label", text)
+    node.style.fontSize = "12px"
+    node.style.color = "var(--fm-text-muted, #6b6c70)"
+    node.style.textAlign = align
+    node.style.padding = "0 4px"
+    return node
+  }
+  function heatSwatch(background) {
+    var node = el("span", "fmr-heatmap-swatch")
+    node.style.display = "inline-block"
+    node.style.width = "14px"
+    node.style.height = "14px"
+    node.style.borderRadius = "var(--fm-radius-xs, 4px)"
+    node.style.background = background
+    return node
+  }
+  function heatLegend() {
+    var row = el("div", "fmr-heatmap-legend")
+    row.style.display = "flex"
+    row.style.alignItems = "center"
+    row.style.gap = "6px"
+    row.style.marginTop = "10px"
+    row.style.fontSize = "12px"
+    row.style.color = "var(--fm-text-muted, #6b6c70)"
+    row.appendChild(el("span", null, "Quieter"))
+    HEAT_BANDS.forEach(function (alpha) { row.appendChild(heatSwatch(rgba(token("--fm-action-primary-bg", "#ff7823"), alpha))) })
+    row.appendChild(el("span", null, "Busier"))
+    var gap = el("span")
+    gap.style.width = "12px"
+    row.appendChild(gap)
+    row.appendChild(heatSwatch(NO_DATA))
+    row.appendChild(el("span", null, "No data"))
+    return row
+  }
+  function renderHeatmap(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 days = config.weekStart === "sunday" ? [0, 1, 2, 3, 4, 5, 6] : [1, 2, 3, 4, 5, 6, 0]
+    var format = config.format || "amount"
+    function refresh() {
+      body.innerHTML = ""
+      var rows = FM.rows(config.query)
+      if (!rows.length && FM.status(config.query) !== "loading") {
+        body.appendChild(emptyNote(config))
+        return
+      }
+      var cells = {}
+      var totals = {}
+      var max = 0
+      rows.forEach(function (row) {
+        var d = ((num(row[config.y]) % 7) + 7) % 7
+        var key = d + ":" + num(row[config.x])
+        cells[key] = (cells[key] || 0) + num(row[config.value])
+        totals[d] = (totals[d] || 0) + num(row[config.value])
+        if (cells[key] > max) max = cells[key]
+      })
+      var grid = el("div", "fmr-heatmap")
+      grid.style.display = "grid"
+      grid.style.gridTemplateColumns = "44px repeat(24, minmax(0, 1fr))" + (config.rowTotals ? " 88px" : "")
+      grid.style.gap = "2px"
+      grid.style.alignItems = "center"
+      grid.appendChild(el("div"))
+      for (var h = 0; h < 24; h++) grid.appendChild(heatLabel(String(h), "center"))
+      if (config.rowTotals) grid.appendChild(heatLabel("Total", "right"))
+      days.forEach(function (d) {
+        grid.appendChild(heatLabel(HEATMAP_DAYS[d], "left"))
+        for (var hh = 0; hh < 24; hh++) {
+          var value = cells[d + ":" + hh]
+          var cell = el("div", "fmr-heatmap-cell")
+          cell.style.minHeight = "26px"
+          cell.style.borderRadius = "var(--fm-radius-xs, 4px)"
+          if (value === undefined) {
+            cell.className += " fmr-heatmap-cell-empty"
+            cell.style.background = NO_DATA
+            cell.title = HEATMAP_DAYS[d] + " " + hh + ":00 — no data"
+          } else {
+            cell.style.background = heatShade(max ? value / max : 0)
+            cell.title = HEATMAP_DAYS[d] + " " + hh + ":00 — " + formatValue(format, value)
+          }
+          grid.appendChild(cell)
+        }
+        if (config.rowTotals) grid.appendChild(heatLabel(formatValue(format, totals[d] || 0), "right"))
+      })
+      body.appendChild(grid)
+      body.appendChild(heatLegend())
+    }
+    FM.onRows(config.query, refresh)
+    refresh()
+  }
+
+  /**
+   * The head of a page the viewer navigated into. It names the entity the page is about and
+   * carries the one click back — the page's own panels are the sections sharing its showWhen.
+   */
+  function renderPageHeader(root, config, base) {
+    base = base || ""
+    var head = el("div", "fmr-page-head")
+    var back = part(el("button", "fmr-back", config.backLabel || "Back"), base + "back")
+    back.type = "button"
+    back.addEventListener("click", function () { FM.setParams(config.back) })
+    var title = part(el("h2", "fmr-tile-title", config.title || ""), base + "title")
+    head.appendChild(back)
+    head.appendChild(title)
+    root.appendChild(head)
+
+    // titleLookup swaps a raw drill id for the matching row's text column
+    function titleValue(value) {
+      var lookup = config.titleLookup
+      if (lookup) {
+        var rows = FM.rows(lookup.query)
+        for (var i = 0; i < rows.length; i++) {
+          if (String(rows[i][lookup.value]) === String(value)) {
+            var text = rows[i][lookup.text]
+            if (text !== null && text !== undefined && text !== "") return String(text)
+          }
+        }
+      }
+      return String(value)
+    }
+
+    function sync() {
+      var value = FM.params()[config.showWhen]
+      if (value === null || value === undefined || value === "") return
+      var shown = titleValue(value)
+      title.textContent = config.title ? config.title + " — " + shown : shown
+    }
+
+    FM.onParams([config.showWhen], sync)
+    if (config.titleLookup) FM.onRows(config.titleLookup.query, sync)
+    sync()
+  }
+
+  var RENDERERS = {
+    "filter-bar": renderFilterBar,
+    "kpi-row": renderKpiRow,
+    timeseries: renderTimeseries,
+    bar: renderBar,
+    table: renderTable,
+    heatmap: renderHeatmap,
+    "detail-panel": renderDetailPanel,
+    "page-header": renderPageHeader
+  }
+
+  FM.components = {
+    render: function (el, section) {
+      var renderer = RENDERERS[section.component]
+      if (!renderer) throw new Error('unknown component "' + section.component + '"')
+      renderer(el, section.config || {}, "")
+    }
+  }
+})()