Супервізія: опитування педагогів

Добре розуміють, що таке супервізія (1 012 респондентів)

52%

Знають, як замовити супервізію (434 респондентів)

22%

Брали участь у супервізії (241 респондентів)

12%

Колектив поінформований (усі або більшість) (439 респондентів)

94%

Корисність супервізії для педагога (відповіли 1 929)

4.1 / 5

Відповідність супервізії очікуванням (відповіли 241)

4.3 / 5

Корисність супервізії для респондента (відповіли 241)

4.4 / 5

Частка респондентів за областями (n = 2 395)

grid1 = renderPage(1, disag1, valtype1, invalidation)

cfgs = transpose(pg_cfg)
opts = transpose(pg_opts)
rows = transpose(pg_rows)
dropped = transpose(pg_dropped)
bks = transpose(pg_bk)        // breakdowns sheet: labels, wording, category order
pspecs = transpose(pg_spec)   // main sheet: breakdown choices, value toggle, threshold
Plotly = require("plotly.js-dist-min@2.35.2")

// ---- sidebar controls, one set per page (choices come from the sheet) -----------
breakdownSelect = page => {
  const spec = pspecs.find(p => +p.page === page);
  const choices = spec.breakdowns.split(";").map(c => [bks.find(b => b.code === c).label_uk, c]);
  return Inputs.select(new Map(choices), {label: "Розбиття", value: "Overall"});
}
valueRadio = page => {
  const spec = pspecs.find(p => +p.page === page);
  if (spec.value_toggle !== "yes") {          // no toggle on this page: a hidden "perc"
    const el = html`<div hidden></div>`; el.value = "perc"; return el;
  }
  return Inputs.radio(new Map([["Відсотки", "perc"], ["Кількість", "count"]]),
    {label: "Показувати", value: "perc"});
}
resetButton = (disagInput, valueInput) => {
  const form = Inputs.button("Скинути", {reduce: () => {
    for (const [v, val] of [[disagInput, "Overall"], [valueInput, "perc"]]) {
      v.value = val;
      v.dispatchEvent(new Event("input", {bubbles: true}));
    }
  }});
  form.querySelector("button").classList.add("p1-reset");
  return form;
}

// Helpers shared by every Type 5 page kind (renderPage, renderComparePage):
// title/label styling and the card grid with its layout + redraw logic.
gridKit = {
  const TXT = "#1b2f4a";
  const wrap = (s, w) => {
    const lines = [];
    let cur = "";
    for (const word of String(s).split(" ")) {
      if (cur && (cur + " " + word).length > w) { lines.push(cur); cur = word; }
      else cur = cur ? cur + " " + word : word;
    }
    if (cur) lines.push(cur);
    return lines.join("<br>");
  };
  const titleOf = (text, note, w) => ({
    text: wrap(text, w) + (note ? `<br><span style="font-size:12px;font-weight:normal">${note}</span>` : ""),
    font: {size: 14, color: TXT}, x: 0.01, xanchor: "left", y: 1, yanchor: "top",
    yref: "container", pad: {t: 26}, automargin: true
  });
  // fixed system font stack: Plotly caches text widths measured before a web font loads
  const baseLayout = {paper_bgcolor: "rgba(0,0,0,0)", plot_bgcolor: "rgba(0,0,0,0)",
    font: {color: TXT, family: "Arial, Helvetica, sans-serif"}};
  const isLight = hex => {
    const n = parseInt(hex.slice(1), 16);
    return (0.299 * (n >> 16) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255)) > 140;
  };

  // cards: [{el, wide, slots, parts: [{plot, build(slots) -> {traces, layout, height}}]}]
  // (a card with a single `plot` + `build` is accepted too).
  // Two columns when there is room, one otherwise. A card that would be alone in
  // its row (last card, or the one before a full-width card) takes the whole row,
  // so the grid never leaves a blank half-row. Cards that share a row also share
  // a "slots" count (bars per plot), so their axes line up along the bottom.
  function mountGrid(cards, invalidation) {
    const root = html`<div class="p1-grid"></div>`;
    cards.forEach(c => root.appendChild(c.el));
    let rowGroups = [];  // the cards of each grid row, set by layoutGrid
    const layoutGrid = () => {
      const ncol = root.clientWidth >= 880 ? 2 : 1;
      root.style.gridTemplateColumns = `repeat(${ncol}, minmax(0, 1fr))`;
      const groups = [];
      let cur = [];
      const flush = () => { if (cur.length) groups.push(cur); cur = []; };
      cards.forEach((c, i) => {
        let full = c.wide || c.hint === "full_row";       // Layout_hint from the sheet
        if (c.hint === "new_row" && cur.length === 1) { cur[0].el.style.gridColumn = "1 / -1"; flush(); }
        else if (c.hint === "new_row") flush();
        if (full || ncol === 1) { flush(); groups.push([c]); }
        else {
          const next = cards[i + 1];
          if (cur.length === 0 && (!next || next.wide || next.hint === "full_row" || next.hint === "new_row")) { full = true; groups.push([c]); }
          else { cur.push(c); if (cur.length === 2) flush(); }
        }
        c.el.style.gridColumn = full ? "1 / -1" : "auto";
      });
      flush();
      groups.forEach(g => {
        const m = Math.max(0, ...g.map(c => c.slots));
        g.forEach(c => { c.useSlots = c.slots ? m : 0; });
      });
      rowGroups = groups;
    };
    let lastW = -1;
    const partsOf = c => c.parts || (c.plot && c.build ? [{plot: c.plot, build: c.build, fill: c.fill}] : []);
    const draw = () => {
      layoutGrid();
      // A part marked `fill` (a vertical bar chart) stretches to the height of the
      // tallest other card in its row, so it uses the space instead of leaving a gap.
      rowGroups.forEach(g => {
        const rowH = Math.max(0, ...g.map(c => partsOf(c).filter(p => !p.fill)
          .reduce((sum, p) => sum + p.build(c.useSlots).height, 0)));
        g.forEach(c => { c.rowH = rowH; });
      });
      cards.forEach(c => {
        partsOf(c).forEach(p => {
          const b = p.build(c.useSlots, c.rowH);
          p.plot.style.height = b.height + "px";
          Plotly.react(p.plot, b.traces, {...baseLayout, ...b.layout, height: b.height},
            {displayModeBar: false, responsive: true});
          Plotly.Plots.resize(p.plot);
        });
      });
    };
    // Plotly measures its container, so draw once the grid is in the document.
    const go = () => root.isConnected ? (lastW = root.clientWidth, draw()) : requestAnimationFrame(go);
    requestAnimationFrame(go);
    // Plotly's own `responsive` only listens to window resizes; the sidebar
    // opening/closing changes the container width without one.
    const ro = new ResizeObserver(() => {
      if (Math.abs(root.clientWidth - lastW) < 2) return;
      lastW = root.clientWidth;
      draw();
    });
    ro.observe(root);
    invalidation.then(() => ro.disconnect());
    return root;
  }
  // category order of a breakdown comes from the breakdowns sheet: an explicit list, or by size
  const sortCats = (cats, bk, sizeOf) => {
    const ord = bk && bk.category_order;
    if (ord && ord !== "by_size") { const list = ord.split(";"); cats.sort((a, b) => list.indexOf(a) - list.indexOf(b)); }
    else cats.sort((a, b) => sizeOf(b) - sizeOf(a));
  };
  return {TXT, wrap, titleOf, baseLayout, isLight, mountGrid, sortCats};
}

// One card grid per page: a card per variable, chart type chosen by (question
// kind x breakdown). See CLAUDE.md "Type 5".
renderPage = function(page, disag, valtype, invalidation) {
  const TXT = "#1b2f4a", BAR = "#2f6fb3", KPI = "#1a7f8e";
  const bkOf = code => bks.find(b => b.code === code) || {};
  const NOUN = new Proxy({}, {get: (_, k) => bkOf(k).noun_uk});             // from the breakdowns sheet
  const BY = new Proxy({}, {get: (_, k) => bkOf(k).title_suffix_uk});
  const MULTI_NOTE = "Можна обрати кілька варіантів";
  const MIN_N = +pspecs.find(p => +p.page === page).min_n;                  // from the main sheet
  const isCount = valtype === "count";
  const key = isCount ? "count" : "perc";
  const fmt = isCount ? ",d" : ".0%";
  const overall = disag === "Overall";

  const {wrap, titleOf, baseLayout, isLight, mountGrid, sortCats} = gridKit;
  const yAxis = (wide, slots) => ({
    ...(wide ? {autorange: "reversed"} : {range: [slots - 0.5, -0.5]}),
    type: "category", automargin: true, showgrid: false, zeroline: false, tickfont: {size: 11}});

  // px per bar in the overall bar charts: enough for the longest wrapped label on the page
  const barLines = Math.max(1, ...cfgs.filter(c => c.page === page && c.overall === "bar")
    .flatMap(c => opts.filter(d => d.code === c.code).map(d => wrap(d.option, 30).split("<br>").length)));
  const slotPx = Math.max(34, 14 * barLines + 10);

  // Top margin shared by every card on the page (cards in a row keep aligned
  // axes): room for the longest title as it would wrap in a half-width card,
  // plus the subtitle line.
  const titleLinesMax = Math.max(1, ...cfgs.filter(c => c.page === page).map(c =>
    wrap(`${c.label} (за стажем роботи), середня оцінка (1–5)`, 60).split("<br>").length));
  const topPx = 36 + 17 * (titleLinesMax + 1);

  const makeCard = c => {
    const o = opts.filter(d => d.code === c.code).sort((a, b) => a.rank - b.rank);
    const rs = rows.filter(d => d.variable_orig === c.code && d.admin === disag);
    const cats = [...new Set(rs.map(d => d.admin_category))];
    const baseOf = new Map(rs.map(d => [d.admin_category, d.base]));
    sortCats(cats, bkOf(disag), k => baseOf.get(k));
    const val = (cat, opt, k = key) => {
      const r = rs.find(d => d.admin_category === cat && d.option_orig === opt);
      return r ? r[k] : 0;
    };
    const mean = cat => o.reduce((s, d) => s + parseFloat(d.option_orig) * val(cat, d.option_orig, "perc"), 0);
    const oc = cats[0];  // the single Overall category (its spelling varies in the data)
    const full = overall ? c.label : `${c.label} (${BY[disag]})`;
    // subtitle: the question's total respondents (Overall base), plus the multi-select note
    const totalN = rows.find(d => d.variable_orig === c.code && d.admin === "Overall").base;
    const note = [`Відповіли ${totalN.toLocaleString("uk-UA")}`, c.multi ? MULTI_NOTE : null]
      .filter(Boolean).join(" · ");
    const dr = dropped.find(d => d.variable_orig === c.code && d.admin === disag && d.n_dropped > 0);
    const noteText = dr
      ? `Не показано ${dr.n_dropped} з ${dr.n_total} ${NOUN[disag]}: менше ніж ${MIN_N} респондентів.` : "";
    const yl = () => cats.map(k => `${k} (n = ${baseOf.get(k)})`);

    // kind: kpi | donut | bar | heat | stack | mean | empty
    let kind, wide = false, slots = 0, build = null, fill = false;
    if (!overall && cats.length < 2) kind = "empty";
    else if (overall && c.overall === "kpi") kind = "kpi";
    else if (overall && c.overall === "donut") kind = "donut";
    else if (overall) kind = "bar";
    else if (c.disag === "heatmap") { kind = "heat"; wide = true; }
    else if (c.disag === "mean") { kind = "mean"; wide = cats.length > 8; }
    else { kind = "stack"; wide = cats.length > 8; }
    const tw = wide ? 120 : 60;

    if (kind === "donut") {
      build = () => ({height: 360,
        traces: [{
          type: "pie", hole: 0.55, sort: false, direction: "clockwise",
          labels: o.map(d => wrap(d.option, 14)),
          values: o.map(d => val(oc, d.option_orig)),
          customdata: o.map(d => val(oc, d.option_orig, "count")),
          marker: {colors: o.map(d => d.color)}, textposition: "outside",
          texttemplate: isCount ? "%{value:,d}" : "%{percent:.1%}",
          hovertemplate: "%{label}<br>%{percent:.1%} (n = %{customdata})<extra></extra>",
          domain: {x: [0.04, 0.5], y: [0.08, 0.92]}
        }],
        layout: {title: titleOf(full, note, tw), showlegend: true,
          legend: {orientation: "v", x: 0.54, xanchor: "left", y: 0.5, font: {size: 11}},
          margin: {l: 20, r: 20, t: topPx, b: 20}}});
    } else if (kind === "bar" && c.vertical) {
      // columns instead of bars; stretches to the height of its row (see mountGrid)
      const sorted = c.keep_order ? [...o]
        : [...o].sort((a, b) => val(oc, b.option_orig) - val(oc, a.option_orig));
      const labs = sorted.map(d => wrap(d.option, 14));
      const lines = Math.max(...labs.map(t => t.split("<br>").length));
      fill = true;
      build = (sl, fillH) => ({height: Math.max(topPx + 210 + 14 * lines, fillH || 0),
        traces: [{
          type: "bar", orientation: "v", marker: {color: BAR},
          x: labs, y: sorted.map(d => val(oc, d.option_orig)),
          customdata: sorted.map(d => val(oc, d.option_orig, "count")),
          texttemplate: `%{y:${fmt}}`, textposition: "outside", cliponaxis: false,
          hovertemplate: `%{x}<br>%{y:${fmt}} (n = %{customdata})<extra></extra>`
        }],
        layout: {title: titleOf(full, note, tw), margin: {l: 55, r: 20, t: topPx, b: 20},
          xaxis: {type: "category", automargin: true, showgrid: false, tickfont: {size: 11}, tickangle: 0},
          yaxis: {tickformat: fmt, showgrid: false, zeroline: false, range: isCount ? null : [0, 1]}}});
    } else if (kind === "bar") {
      const sorted = c.keep_order ? [...o]
        : [...o].sort((a, b) => val(oc, b.option_orig) - val(oc, a.option_orig));
      slots = o.length;
      build = sl => ({height: topPx + 60 + slotPx * sl,
        traces: [{
          type: "bar", orientation: "h", marker: {color: BAR},
          x: sorted.map(d => val(oc, d.option_orig)),
          y: sorted.map(d => wrap(d.option, 30)),
          customdata: sorted.map(d => val(oc, d.option_orig, "count")),
          texttemplate: `%{x:${fmt}}`, textposition: "outside", cliponaxis: false,
          hovertemplate: `%{y}<br>%{x:${fmt}} (n = %{customdata})<extra></extra>`
        }],
        layout: {title: titleOf(full, note, tw), margin: {l: 10, r: 60, t: topPx, b: 40},
          xaxis: {tickformat: fmt, showgrid: false, zeroline: false, range: isCount ? null : [0, 1]},
          yaxis: yAxis(false, sl)}});
    } else if (kind === "heat") {
      const xl = o.map(d => wrap(d.option, o.length > 8 ? 11 : 16));  // narrower columns -> narrower labels
      const labLines = Math.max(...xl.map(t => t.split("<br>").length));
      const titleLines = wrap(full, tw).split("<br>").length + (note ? 1 : 0);
      const top = 40 + titleLines * 18 + labLines * 14;
      build = () => ({height: top + 26 * cats.length + 60,
        traces: [{
          type: "heatmap", x: xl, y: yl(),
          z: cats.map(k => o.map(d => val(k, d.option_orig))),
          customdata: cats.map(k => o.map(d => val(k, d.option_orig, "count"))),
          colorscale: [[0, "#e8f1fa"], [0.5, "#6fa5d8"], [1, "#143a6b"]],
          zmin: 0, zmax: isCount ? undefined : 1, xgap: 2, ygap: 2,
          texttemplate: isCount ? "%{z:,d}" : "%{z:.0%}",
          colorbar: {tickformat: fmt, thickness: 12, len: 0.6},
          hovertemplate: `%{y}<br>%{x}<br>%{z:${fmt}} (n = %{customdata})<extra></extra>`
        }],
        layout: {title: titleOf(full, note, tw), margin: {l: 215, r: 10, t: top, b: 10},
          xaxis: {type: "category", side: "top", automargin: true, showgrid: false, tickfont: {size: 11}, tickangle: 0},
          yaxis: {type: "category", autorange: "reversed", automargin: true, showgrid: false, tickfont: {size: 11}}}});
    } else if (kind === "stack") {
      // the legend (one wrapped entry per answer) must fit the plot height, or it scrolls
      const legendH = o.reduce((s, d) => s + wrap(d.option, 20).split("<br>").length * 14 + 8, 0);
      slots = Math.max(cats.length, Math.ceil((legendH - 40) / 30));
      const maxBase = Math.max(...cats.map(k => baseOf.get(k)));
      build = sl => ({height: topPx + 80 + 30 * sl,
        traces: o.map(d => ({
          type: "bar", orientation: "h", name: wrap(d.option, 20),
          x: cats.map(k => val(k, d.option_orig)), y: yl(),
          marker: {color: d.color, line: {color: "#ffffff", width: 1}},
          customdata: cats.map(k => val(k, d.option_orig, "count")),
          text: cats.map(k => val(k, d.option_orig, "count") >= 0.07 * (isCount ? maxBase : baseOf.get(k))
            ? (isCount ? String(val(k, d.option_orig, "count")) : (val(k, d.option_orig, "perc") * 100).toFixed(0) + "%") : ""),
          textposition: "inside", insidetextanchor: "middle", textangle: 0,
          textfont: {color: isLight(d.color) ? TXT : "#ffffff", size: 11},
          hovertemplate: `%{y}<br>${d.option}: %{x:${fmt}} (n = %{customdata})<extra></extra>`
        })),
        layout: {title: titleOf(full, note, tw), barmode: "stack",
          margin: {l: 185, r: 190, t: topPx, b: 40},
          xaxis: {tickformat: fmt, showgrid: false, zeroline: false, range: isCount ? null : [0, 1]},
          yaxis: yAxis(wide, sl),
          legend: {orientation: "v", x: 1.01, xanchor: "left", y: 1, yanchor: "top",
                   traceorder: "normal", font: {size: 11}}}});
    } else if (kind === "mean") {
      // average rating (1-5) per category; unaffected by the percent/count switch
      slots = cats.length;
      build = sl => ({height: topPx + 60 + 30 * sl,
        traces: [{
          type: "bar", orientation: "h", marker: {color: KPI},
          x: cats.map(mean), y: yl(),
          customdata: cats.map(k => baseOf.get(k)),
          text: cats.map(k => mean(k).toFixed(1)), textposition: "outside", cliponaxis: false,
          hovertemplate: "%{y}<br>середня оцінка: %{x:.2f}<extra></extra>"
        }],
        layout: {title: titleOf(`${full}, середня оцінка (1–5)`, note, tw), margin: {l: 185, r: 50, t: topPx, b: 40},
          xaxis: {range: [0, 5], dtick: 1, showgrid: false, zeroline: false},
          yaxis: yAxis(wide, sl)}});
    }

    let inner;
    if (kind === "kpi") {
      const base = rs.length ? rs[0].base : 0;
      inner = html`<div class="p1-kpi">
        <div class="p1-kpi-title">${c.label}</div>
        <div class="p1-kpi-value">${mean(oc).toFixed(1)} <small>/ 5</small></div>
        <div class="p1-kpi-n">відповіли ${base.toLocaleString("uk-UA")}</div></div>`;
    } else if (kind === "empty") {
      inner = html`<div class="p1-empty">${c.label}<br><em>Недостатньо даних для порівняння: менше двох ${NOUN[disag]} мають щонайменше ${MIN_N} респондентів.</em></div>`;
    } else {
      inner = html`<div class="p1-plot"></div>`;
    }
    const el = html`<div class="p1-card${wide ? " wide" : ""}">${inner}
      ${noteText ? html`<div class="p1-note">${noteText}</div>` : ""}</div>`;
    return {el, plot: el.querySelector(".p1-plot"), kind, wide, slots, build, fill, useSlots: slots, hint: c.layout_hint};
  };

  const cards = cfgs.filter(c => c.page === page).sort((a, b) => a.pos - b.pos).map(makeCard);
  return mountGrid(cards, invalidation);
}

viewof disag1 = breakdownSelect(1)

viewof valtype1 = valueRadio(1)

viewof reset1 = resetButton(viewof disag1, viewof valtype1)

grid2 = renderPage(2, disag2, valtype2, invalidation)

grid3 = renderPage(3, disag3, valtype3, invalidation)

grid4 = renderPage(4, disag4, valtype4, invalidation)

grid5 = renderComparePage(disag5, valtype5, invalidation)

ccfgs = transpose(cmp_cfg)
copts = transpose(cmp_opts)
crows = transpose(cmp_rows)
ccomp = transpose(cmp_comp)
cdropped = transpose(cmp_dropped)
cgroups = transpose(cmp_groups)

// Page 5: every card compares the two groups (managers vs teachers).
//  pop    donut of the two groups              (static: ignores the breakdown)
//  comp   100% stacked bar per oblast/experience group: managers vs teachers
//         among that category's respondents   (static)
//  single overall: one 100% stacked bar per group; breakdown: two heatmaps
//  multi  overall: grouped bars (a pair per option, NOT stacked: shares sum
//         above 100 %); breakdown: two heatmaps
renderComparePage = function(disag, valtype, invalidation) {
  const {TXT, wrap, titleOf, isLight, mountGrid, sortCats} = gridKit;
  const CM = "#143a6b", CT = "#6fa5d8";
  const POPS = ["manager", "teacher"];
  const COL = {manager: CM, teacher: CT};
  const glabel = new Map(cgroups.map(d => [d.code, d.label]));
  const bkOf = code => bks.find(b => b.code === code) || {};
  const NOUN = new Proxy({}, {get: (_, k) => bkOf(k).noun_uk});             // from the breakdowns sheet
  const BY = new Proxy({}, {get: (_, k) => bkOf(k).title_suffix_uk});
  const MULTI_NOTE = "Можна обрати кілька варіантів";
  const MIN_N = +pspecs.find(p => +p.page === 5).min_n;                     // from the main sheet
  const isCount = valtype === "count";
  const key = isCount ? "count" : "perc";
  const fmt = isCount ? ",d" : ".0%";
  const overall = disag === "Overall";
  const num = x => Number(x).toLocaleString("uk-UA");
  const asked = (avail, p) => avail === "both" || (avail === "teachers_only" && p === "teacher")
    || (avail === "managers_only" && p === "manager");
  const yAxis = (wide, slots) => ({
    ...(wide ? {autorange: "reversed"} : {range: [slots - 0.5, -0.5]}),
    type: "category", automargin: true, showgrid: false, zeroline: false, tickfont: {size: 11}});
  const only = avail => avail === "teachers_only" ? "<br><i>(лише вчителям)</i>"
    : avail === "managers_only" ? "<br><i>(лише керівникам)</i>" : "";

  // page-wide metrics so cards in a row keep aligned axes
  const topPx = 36 + 17 * (Math.max(1, ...ccfgs.map(c =>
    wrap(`${c.label} (за стажем роботи): співвідношення керівників і вчителів`, 60).split("<br>").length)) + 1);
  const groupedLines = Math.max(1, ...copts.filter(d => ccfgs.find(c => c.code === d.code).kind === "multi")
    .map(d => (wrap(d.option, 30) + only(d.avail)).split("<br>").length));
  const gPx = Math.max(48, 14 * groupedLines + 18);   // px per option in the grouped bars

  const dropNote = (code, adm, what) => {
    const d = cdropped.find(x => x.variable_orig === code && x.admin === adm && x.n_dropped > 0);
    return d ? `Не показано ${d.n_dropped} з ${d.n_total} ${NOUN[code] || NOUN[adm]}: ${what}.` : "";
  };

  const makeCard = c => {
    let wide = false, slots = 0, plots = 1, kind = c.kind, noteLines = [];
    let parts = [];
    const overallRows = crows.filter(d => d.variable_orig === c.code && d.admin === "Overall");
    const baseOfGroup = p => (overallRows.find(d => d.population === p) || {base: 0}).base;
    const sub = extra => [`Відповіли: керівники ${num(baseOfGroup("manager"))} · вчителі ${num(baseOfGroup("teacher"))}`, extra]
      .filter(Boolean).join(" · ");
    let emptyText = null, titleNote = null;

    if (c.kind === "pop") {
      const rs = ccomp.filter(d => d.code === c.code);
      const total = rs.reduce((s, d) => s + d.count, 0);
      const get = (p, k) => rs.find(d => d.population === p)[k];
      parts = [{build: () => ({height: 360, traces: [{
          type: "pie", hole: 0.55, sort: false, direction: "clockwise",
          labels: POPS.map(p => wrap(glabel.get(p), 14)),
          values: POPS.map(p => get(p, key)), customdata: POPS.map(p => get(p, "count")),
          marker: {colors: [CM, CT]}, textposition: "outside",
          texttemplate: isCount ? "%{value:,d}" : "%{percent:.1%}",
          hovertemplate: "%{label}<br>%{percent:.1%} (n = %{customdata})<extra></extra>",
          domain: {x: [0.04, 0.5], y: [0.08, 0.92]}}],
        layout: {title: titleOf(c.label, `Відповіли ${num(total)}`, 60), showlegend: true,
          legend: {orientation: "v", x: 0.54, xanchor: "left", y: 0.5, font: {size: 11}},
          margin: {l: 20, r: 20, t: topPx, b: 20}}})}];
    } else if (c.kind === "comp") {
      const rs = ccomp.filter(d => d.code === c.code);
      const cats = [...new Set(rs.map(d => d.category))];
      const cnt = (k, p) => rs.find(d => d.category === k && d.population === p).count;
      const tot = k => cnt(k, "manager") + cnt(k, "teacher");
      sortCats(cats, bkOf(c.code), tot);
      const totalAll = ccomp.filter(d => d.code === "h_population").reduce((s, d) => s + d.count, 0);
      const maxTot = Math.max(...cats.map(tot));
      wide = cats.length > 8; slots = c.vertical ? 0 : cats.length;
      noteLines.push(dropNote(c.code, "static", "менше ніж 30 респондентів"));
      if (c.vertical) {
        // 100% stacked columns that stretch to the height of the row
        const labs = cats.map(k => `${wrap(k, 14)}<br>(n = ${tot(k)})`);
        const lines = Math.max(...labs.map(t => t.split("<br>").length));
        parts = [{fill: true, build: (sl, fillH) => ({height: Math.max(topPx + 236 + 14 * lines, fillH || 0),
          traces: POPS.map(p => ({
            type: "bar", orientation: "v", name: glabel.get(p),
            x: labs, y: cats.map(k => isCount ? cnt(k, p) : (tot(k) ? cnt(k, p) / tot(k) : 0)),
            marker: {color: COL[p], line: {color: "#ffffff", width: 1}},
            customdata: cats.map(k => cnt(k, p)),
            text: cats.map(k => {
              const share = tot(k) ? cnt(k, p) / tot(k) : 0;
              const big = isCount ? cnt(k, p) >= 0.07 * maxTot : share >= 0.07;
              return big ? (isCount ? String(cnt(k, p)) : (share * 100).toFixed(0) + "%") : "";
            }),
            textposition: "inside", insidetextanchor: "middle", textangle: 0,
            textfont: {color: isLight(COL[p]) ? TXT : "#ffffff", size: 11},
            hovertemplate: `%{x}<br>${glabel.get(p)}: %{y:${fmt}} (n = %{customdata})<extra></extra>`})),
          layout: {title: titleOf(`${c.label}: співвідношення керівників і вчителів`, `Відповіли ${num(totalAll)}`, 60),
            barmode: "stack", margin: {l: 55, r: 20, t: topPx + 26, b: 20},
            xaxis: {type: "category", automargin: true, showgrid: false, tickfont: {size: 11}, tickangle: 0},
            yaxis: {tickformat: fmt, showgrid: false, zeroline: false, range: isCount ? null : [0, 1]},
            legend: {orientation: "h", x: 0, xanchor: "left", y: 1.01, yanchor: "bottom", traceorder: "normal", font: {size: 11}}}})}];
      } else parts = [{build: sl => ({height: topPx + 80 + 30 * sl,
        traces: POPS.map(p => ({
          type: "bar", orientation: "h", name: glabel.get(p),
          x: cats.map(k => isCount ? cnt(k, p) : (tot(k) ? cnt(k, p) / tot(k) : 0)),
          y: cats.map(k => `${k} (n = ${tot(k)})`),
          marker: {color: COL[p], line: {color: "#ffffff", width: 1}},
          customdata: cats.map(k => cnt(k, p)),
          text: cats.map(k => {
            const share = tot(k) ? cnt(k, p) / tot(k) : 0;
            const big = isCount ? cnt(k, p) >= 0.07 * maxTot : share >= 0.07;
            return big ? (isCount ? String(cnt(k, p)) : (share * 100).toFixed(0) + "%") : "";
          }),
          textposition: "inside", insidetextanchor: "middle", textangle: 0,
          textfont: {color: isLight(COL[p]) ? TXT : "#ffffff", size: 11},
          hovertemplate: `%{y}<br>${glabel.get(p)}: %{x:${fmt}} (n = %{customdata})<extra></extra>`})),
        layout: {title: titleOf(`${c.label}: співвідношення керівників і вчителів`, `Відповіли ${num(totalAll)}`, wide ? 120 : 60),
          barmode: "stack", margin: {l: 185, r: 190, t: topPx, b: 40},
          xaxis: {tickformat: fmt, showgrid: false, zeroline: false, range: isCount ? null : [0, 1]},
          yaxis: yAxis(wide, sl),
          legend: {orientation: "v", x: 1.01, xanchor: "left", y: 1, yanchor: "top", traceorder: "normal", font: {size: 11}}}})}];
    } else {
      const o = copts.filter(d => d.code === c.code).sort((a, b) => a.rank - b.rank);
      const multi = c.kind === "multi";
      const note = multi ? MULTI_NOTE : null;
      const rs = crows.filter(d => d.variable_orig === c.code && d.admin === disag);
      if (c.note) noteLines.push(c.note);
      const val = (cat, p, opt, k = key) => {
        const r = rs.find(d => d.category === cat && d.population === p && d.option_orig === opt);
        return r ? r[k] : null;
      };
      const baseOf = (cat, p) => { const r = rs.find(d => d.category === cat && d.population === p); return r ? r.base : 0; };

      if (overall) {
        const oc = rs[0] ? rs[0].category : null;
        if (!multi) {
          // one 100% stacked bar per group (columns that fill the row when `vertical`)
          slots = c.vertical ? 0 : 2;
          if (c.vertical) parts = [{fill: true, build: (sl, fillH) => ({height: Math.max(topPx + 276, fillH || 0),
            traces: o.map(d => ({
              type: "bar", orientation: "v", name: wrap(d.option, 20),
              x: POPS.map(p => `${wrap(glabel.get(p), 16)}<br>(n = ${baseOfGroup(p)})`),
              y: POPS.map(p => val(oc, p, d.option_orig)),
              marker: {color: d.color, line: {color: "#ffffff", width: 1}},
              customdata: POPS.map(p => val(oc, p, d.option_orig, "count")),
              text: POPS.map(p => val(oc, p, d.option_orig, "perc") >= 0.07
                ? (isCount ? String(val(oc, p, d.option_orig, "count")) : (val(oc, p, d.option_orig, "perc") * 100).toFixed(0) + "%") : ""),
              textposition: "inside", insidetextanchor: "middle", textangle: 0,
              textfont: {color: isLight(d.color) ? TXT : "#ffffff", size: 11},
              hovertemplate: `%{x}<br>${d.option}: %{y:${fmt}} (n = %{customdata})<extra></extra>`})),
            layout: {title: titleOf(c.label, sub(note), 60), barmode: "stack",
              margin: {l: 55, r: 20, t: topPx + 26, b: 20},
              xaxis: {type: "category", automargin: true, showgrid: false, tickfont: {size: 11}, tickangle: 0},
              yaxis: {tickformat: fmt, showgrid: false, zeroline: false, range: isCount ? null : [0, 1]},
              legend: {orientation: "h", x: 0, xanchor: "left", y: 1.01, yanchor: "bottom", traceorder: "normal", font: {size: 11}}}})}];
          else parts = [{build: sl => ({height: topPx + 80 + 30 * sl,
            traces: o.map(d => ({
              type: "bar", orientation: "h", name: wrap(d.option, 20),
              x: POPS.map(p => val(oc, p, d.option_orig)), y: POPS.map(p => `${wrap(glabel.get(p), 24)}<br>(n = ${baseOfGroup(p)})`),
              marker: {color: d.color, line: {color: "#ffffff", width: 1}},
              customdata: POPS.map(p => val(oc, p, d.option_orig, "count")),
              text: POPS.map(p => val(oc, p, d.option_orig, "perc") >= 0.07
                ? (isCount ? String(val(oc, p, d.option_orig, "count")) : (val(oc, p, d.option_orig, "perc") * 100).toFixed(0) + "%") : ""),
              textposition: "inside", insidetextanchor: "middle", textangle: 0,
              textfont: {color: isLight(d.color) ? TXT : "#ffffff", size: 11},
              hovertemplate: `%{y}<br>${d.option}: %{x:${fmt}} (n = %{customdata})<extra></extra>`})),
            layout: {title: titleOf(c.label, sub(note), 60), barmode: "stack",
              margin: {l: 185, r: 190, t: topPx, b: 40},
              xaxis: {tickformat: fmt, showgrid: false, zeroline: false, range: isCount ? null : [0, 1]},
              yaxis: yAxis(false, sl),
              legend: {orientation: "v", x: 1.01, xanchor: "left", y: 1, yanchor: "top", traceorder: "normal", font: {size: 11}}}})}];
        } else {
          // grouped bars: a pair per option; "not asked" = no bar
          slots = o.length;
          parts = [{build: sl => ({height: topPx + 60 + gPx * sl,
            traces: POPS.map(p => ({
              type: "bar", orientation: "h", name: glabel.get(p), marker: {color: COL[p]},
              x: o.map(d => asked(d.avail, p) ? val(oc, p, d.option_orig) : null),
              y: o.map(d => wrap(d.option, 30) + only(d.avail)),
              customdata: o.map(d => asked(d.avail, p) ? val(oc, p, d.option_orig, "count") : null),
              texttemplate: `%{x:${fmt}}`, textposition: "outside", cliponaxis: false,
              hovertemplate: `%{y}<br>${glabel.get(p)}: %{x:${fmt}} (n = %{customdata})<extra></extra>`})),
            layout: {title: titleOf(c.label, sub(note), 60), barmode: "group", margin: {l: 200, r: 60, t: topPx, b: 40},
              xaxis: {tickformat: fmt, showgrid: false, zeroline: false, range: isCount ? null : [0, 1]},
              yaxis: yAxis(false, sl),
              legend: {x: 1, xanchor: "right", y: 0.04, yanchor: "bottom", font: {size: 11}}}})}];
        }
      } else {
        // breakdown: two heatmaps (managers above, teachers below), same colour scale
        const cats = [...new Set(rs.map(d => d.category))];
        const total = k => baseOf(k, "manager") + baseOf(k, "teacher");
        sortCats(cats, bkOf(disag), total);
        if (cats.length < 2) emptyText = `Недостатньо даних для порівняння: менше двох ${NOUN[disag]} мають щонайменше ${MIN_N} респондентів хоча б в одній групі.`;
        else {
          wide = true; plots = 2;
          const shown = (k, p) => baseOf(k, p) >= MIN_N;
          const cell = (k, p, d) => (shown(k, p) && asked(d.avail, p)) ? val(k, p, d.option_orig) : null;
          const cellN = (k, p, d) => (shown(k, p) && asked(d.avail, p)) ? val(k, p, d.option_orig, "count") : null;
          const availRank = a => a === "both" ? 0 : a === "managers_only" ? 1 : 2;
          const oh = [...o].sort((a, b) => availRank(a.avail) - availRank(b.avail) || a.rank - b.rank);
          const zmax = isCount ? Math.max(1, ...cats.flatMap(k => POPS.flatMap(p => oh.map(d => cell(k, p, d) || 0)))) : 1;
          noteLines.push(dropNote(c.code, disag, "у жодній із груп немає 30 респондентів"));
          noteLines.push("Порожні клітинки: група не відповідала на цей варіант або в категорії менше ніж 30 респондентів цієї групи.");
          const subTitle = text => ({text, font: {size: 12, color: TXT}, x: 0.01, xanchor: "left", y: 1,
            yanchor: "top", yref: "container", pad: {t: 6}, automargin: true});
          parts = POPS.map((p, idx) => {
            // drop rows/columns that are empty for THIS group (not asked, or < MIN_N respondents),
            // and say how many were left out
            const rowsP = cats.filter(k => oh.some(d => cell(k, p, d) !== null));
            const colsP = oh.filter(d => cats.some(k => cell(k, p, d) !== null));
            const hr = cats.length - rowsP.length, hc = oh.length - colsP.length;
            const comment = (hr || hc)
              ? `${p === "manager" ? "Керівники" : "Вчителі"}: не показано ${hr} з ${cats.length} рядків і ${hc} з ${oh.length} стовпців через відсутність даних для цієї категорії` : "";
            const many = colsP.length > 12;
            const xl = colsP.map(d => wrap(d.option, many ? 9 : colsP.length > 8 ? 12 : 16));
            const labLines = xl.length ? Math.max(...xl.map(t => t.split("<br>").length)) : 1;
            // the shared (first) title is larger and underlined so both heatmaps read as one topic
            const bigLines = wrap(`${c.label} (${BY[disag]})`, 95).split("<br>");
            const titleLines = bigLines.length * 1.25 + 1 + (comment ? 1 : 0);
            const top = idx === 0 ? 46 + titleLines * 18 + labLines * 14 : 24 + (comment ? 18 : 0) + labLines * 14;
            const title = idx === 0
              ? {...titleOf("", "", 95),
                 text: bigLines.map(l => `<span style="text-decoration:underline">${l}</span>`).join("<br>")
                   + `<br><span style="font-size:12px;font-weight:normal;text-decoration:none">${sub(note)}${comment ? `<br>${comment}` : ""}</span>`,
                 font: {size: 18, color: TXT}}
              : (comment ? subTitle(comment) : undefined);
            const ytitle = {text: wrap(glabel.get(p), 18), font: {size: 12}, standoff: 22};
            if (!rowsP.length || !colsP.length) {
              // nothing to show for this group at all
              return {build: () => ({height: top + 70, traces: [],
                layout: {...(title ? {title} : {}), margin: {l: 215, r: 10, t: top - labLines * 14 + 10, b: 10},
                  xaxis: {visible: false}, yaxis: {visible: false, title: ytitle},
                  annotations: [{text: "Немає даних для цієї групи", showarrow: false, xref: "paper", yref: "paper",
                    x: 0, y: 0.5, xanchor: "left", font: {size: 12, color: TXT}}]}})};
            }
            return {build: () => ({height: top + 26 * rowsP.length + 50,
              traces: [{type: "heatmap", x: xl, y: rowsP.map(k => `${k} (n = ${baseOf(k, p)})`),
                z: rowsP.map(k => colsP.map(d => cell(k, p, d))),
                customdata: rowsP.map(k => colsP.map(d => cellN(k, p, d))),
                colorscale: [[0, "#e8f1fa"], [0.5, "#6fa5d8"], [1, "#143a6b"]],
                zmin: 0, zmax, xgap: 2, ygap: 2, hoverongaps: false,
                texttemplate: isCount ? "%{z:,d}" : "%{z:.0%}", showscale: idx === 0,
                colorbar: {tickformat: fmt, thickness: 12, len: 0.9},
                hovertemplate: `%{y}<br>%{x}<br>${glabel.get(p)}: %{z:${fmt}} (n = %{customdata})<extra></extra>`}],
              layout: {...(title ? {title} : {}),
                margin: {l: 215, r: 10, t: top, b: 10},
                xaxis: {type: "category", side: "top", automargin: true, showgrid: false, tickfont: {size: many ? 10 : 11}, tickangle: 0},
                yaxis: {type: "category", autorange: "reversed", automargin: true, showgrid: false, tickfont: {size: 11},
                        title: ytitle}}})};
          });
        }
      }
    }

    const foot = noteLines.filter(Boolean).map(t => `<div class="p1-note">${t}</div>`).join("");
    const inner = emptyText
      ? `<div class="p1-empty">${c.label}<br><em>${emptyText}</em></div>`
      : Array.from({length: plots}, () => `<div class="p1-plot"></div>`).join("");
    const el = html`<div class="p1-card${wide ? " wide" : ""}"></div>`;
    el.innerHTML = inner + foot;
    const divs = [...el.querySelectorAll(".p1-plot")];
    parts.forEach((p, i) => { p.plot = divs[i]; });
    return {el, wide, slots, useSlots: slots, parts, hint: c.layout_hint};
  };

  // static composition cards only make sense for the overall view
  const cards = ccfgs.filter(c => overall || !c.static).sort((a, b) => a.pos - b.pos).map(makeCard);
  return mountGrid(cards, invalidation);
}

viewof disag5 = breakdownSelect(5)

viewof valtype5 = valueRadio(5)

viewof reset5 = resetButton(viewof disag5, viewof valtype5)

Мета та інструмент

Опитування проведено серед педагогічних працівників і керівників закладів загальної середньої освіти України. Його мета — з’ясувати рівень поінформованості про супервізію, досвід участі в ній та умови її організації в закладах освіти.

Дані зібрано за допомогою спеціально розробленої електронної анкети українською мовою, розміщеної на платформі ODK Central. Заповнення анкети займало 5–7 хвилин. Усі запитання були обов’язковими, а запитання, які отримував кожен респондент, залежали від його посади: вчителі та керівники закладів (директори та їхні заступники) відповідали на різні блоки запитань. Спільними для всіх були запитання про місцезнаходження закладу, стаж роботи та посаду.

Анонімність і одноразова участь

Опитування було анонімним: анкета не збирала імен, контактних даних чи інших відомостей, що дозволяють ідентифікувати конкретну особу. Респондент зазначав лише область, район, громаду, населений пункт і заклад освіти, стаж роботи та посаду.

У платформі було ввімкнено опцію, що обмежує кількість заповнень анкети до одного. Анкети, заповнені не повністю, не приймалися: відповідь можна було надіслати лише після відповіді на всі запитання, що стосувалися респондента.

Хто міг відповідати

Відповідати могли педагогічні працівники та керівники закладів освіти: вчителі, заступники керівників і керівники закладів.

Поширення запрошень

Запрошення до опитування було розіслано через систему «Мрія». «Мрія» — державне підприємство, що забезпечує освітню екосистему для учнів і вчителів. Для учнів система надає середовище для навчання, проходження тестів і коротких навчальних сесій; для вчителів — можливість автоматизувати тести та розклади. Коли заклад освіти підключається до «Мрії», він отримує адміністратора системи, який підтримує заклад і допомагає впровадити платформу.

Наразі до «Мрії» підключено близько 4 200 закладів з приблизно 12 000 закладів загальної середньої освіти, що працюють в Україні. Працівників «Мрії» було попрошено передати запрошення всім підключеним закладам. Адміністратори системи в закладах поширювали посилання на анкету серед своїх адміністративних і педагогічних колег.

Запрошення розсилали трьома хвилями впродовж одного тижня у вересні 2026 року.

Період збору даних

Посилання на анкету залишалося активним із вересня до 3 листопада 2026 року. Найбільше відповідей надійшло одразу після розсилання: понад 99 % усіх відповідей отримано у вересні, першу відповідь зафіксовано 18 вересня. Надалі надходження відповідей поступово сповільнилося, а останню відповідь отримано 28 жовтня; упродовж останніх днів до закриття анкети нових відповідей не надходило.

Отримана вибірка

Загалом отримано 2 395 заповнених анкет:

вчителі — 1 929 респондентів (80,5 %);
керівники та заступники керівників закладів — 466 респондентів (19,5 %), з яких 294 заступники керівників і 172 керівники.

Відповіді надійшли з 705 закладів освіти з 24 областей та міста Києва.

Підготовка даних

Дані було експортовано з платформи ODK Central 2 листопада 2026 року. Додаткове очищення даних не проводилося: неповні анкети не приймалися, а повторне заповнення було обмежене налаштуваннями платформи, тому жодного запису з набору не вилучено. Усі 2 395 отриманих анкет включено до аналізу.

Розрахунок показників

Усі показники є описовими й розраховані за відповідями респондентів.

Частку відповідей розраховано серед респондентів, які відповіли на відповідне запитання. Через маршрутизацію анкети частина запитань стосувалася лише окремих груп (наприклад, лише вчителів, лише респондентів, які брали участь у супервізії, або лише керівників закладів), тому кількість респондентів, що відповіли, відрізняється від запитання до запитання. Її наведено поруч із кожним показником.
Для запитань, де можна було обрати кілька варіантів відповіді, кожен респондент враховується в усіх обраних ним варіантах, тому сума часток може перевищувати 100 %.
Для оцінок за п’ятибальною шкалою обчислено середнє значення.
Кількість респондентів у кожній відповіді отримано з частки та кількості респондентів, що відповіли на запитання, із округленням до цілого числа.

Розбиття за групами

Відповіді можна переглянути загалом, за областями (за місцезнаходженням закладу) та за стажем роботи (до 3 років, 3–9 років, 10–19 років, понад 20 років). Щоб уникнути висновків на основі надто малої кількості відповідей, групи, у яких на запитання відповіли менше ніж 30 респондентів, не показано; кількість прихованих груп указано під відповідним графіком.

Під час порівняння керівників закладів і вчителів категорію показано, якщо принаймні в одній із двох груп є 30 і більше респондентів. Для іншої групи значення в такій категорії не наводяться. Рядки й стовпці теплових карт, у яких немає жодного значення, не відображаються, а кількість прихованих рядків і стовпців указано в підзаголовку графіка.

Гармонізація запитань для порівняння керівників і вчителів

Вчителі та керівники закладів отримували різні блоки запитань. Для порівняння двох груп запитання з однаковим змістом було зіставлено й зведено до спільних змінних, а відповіді респондентів перекодовано за єдиною таблицею відповідності. Групу визначено за посадою: до групи вчителів віднесено вчителів, до групи керівників — керівників закладів і їхніх заступників.

Під час гармонізації враховано такі особливості:

запитання про поінформованість і звернення по супервізію вчителі оцінювали щодо себе, а керівники — щодо педагогічного колективу свого закладу;
звернення по супервізію в групі вчителів означає, що респондент брав участь у супервізії або намагався її замовити;
інформування педагогів адміністрацією в групі вчителів визначено за тим, чи вказали вони адміністрацію закладу серед джерел інформації про супервізію; в групі керівників — за тим, чи зазначили вони інформування серед форм підтримки педагогів; це запитання ставили лише керівникам, у закладах яких супервізію організовують;
перешкоди для участі в супервізії вчителі називали лише в разі, якщо вони не брали участі в ній, тоді як керівники відповідали всі;
частина варіантів відповіді була доступна лише одній із груп; у такому разі значення для іншої групи не наводяться, а відсутність значення означає, що групі це запитання не ставили.

Через відмінності у формулюванні й базі респондентів результати двох груп слід порівнювати з урахуванням цих особливостей.

Охоплення опитування

Запрошення до опитування було надіслано закладам, підключеним до системи «Мрія» (близько 4 200 із приблизно 12 000 закладів загальної середньої освіти в Україні). Закладам, які не користуються системою, запрошення не надсилалося. Участь в опитуванні була добровільною, і посилання поширювали адміністратори системи в закладах. Тому результати відображають думки респондентів, які взяли участь в опитуванні, і не є оцінкою для всіх закладів освіти та всіх педагогів України.

Територіальне охоплення

Охоплення територій є нерівномірним. Із прифронтових регіонів отримано небагато відповідей: охопити респондентів у цих регіонах повною мірою не вдалося. Із тимчасово окупованих територій Автономної Республіки Крим і міста Севастополя відповідей немає. Тому результати для регіонів із малою кількістю відповідей слід тлумачити з особливою обережністю, а групи менше ніж з 30 респондентів у розбиттях не показано.

Особливості даних

Показники ґрунтуються на самостійних відповідях респондентів і відображають їхнє сприйняття та досвід, а не об’єктивні вимірювання.
Керівники закладів відповідали на частину запитань щодо педагогічного колективу, а не щодо власного досвіду; їхні відповіді відображають їхнє уявлення про колектив.
Кількість респондентів, що відповіли на запитання, суттєво відрізняється залежно від маршрутизації анкети. Наприклад, запитання про досвід участі в супервізії стосуються лише тих респондентів, які брали в ній участь, тому для них база значно менша, ніж для запитань, адресованих усім вчителям.
Показники описові. Відмінності між групами (областями, групами за стажем, керівниками та вчителями) не перевірялися на статистичну значущість, тому невеликі відмінності не слід тлумачити як стійкі.