mirror of
https://github.com/olehomelchenko/dataviz-portfolio-template.git
synced 2026-09-24 23:41:46 +00:00
381 lines
15 KiB
JavaScript
381 lines
15 KiB
JavaScript
/* Вбудовує графіки у сторінку.
|
||
*
|
||
* Цей файл правити не треба. Графік ставиться в тексті роботи одним
|
||
* рядком, там, де він потрібен:
|
||
*
|
||
*  — специфікація Vega-Lite
|
||
*  — графік Tableau Public
|
||
* ```vega-lite … ``` — специфікація просто в тексті
|
||
*
|
||
* Два таких рядки поруч, без порожнього рядка між ними, стають парою
|
||
* графіків в один ряд. У дужках після адреси можна дописати wide
|
||
* (на всю ширину) і число (висота рамки Tableau).
|
||
*
|
||
* Блок із помилкою показує підказку і не ламає решту сторінки.
|
||
*/
|
||
(function () {
|
||
"use strict";
|
||
|
||
/* Бібліотеки Vega-Lite. Вантажаться, лише коли на сторінці є
|
||
специфікація: сторінці з самим Tableau вони не потрібні. */
|
||
var VEGA = [
|
||
"https://cdn.jsdelivr.net/npm/vega@5",
|
||
"https://cdn.jsdelivr.net/npm/vega-lite@5",
|
||
"https://cdn.jsdelivr.net/npm/vega-embed@6"
|
||
];
|
||
|
||
function box(el, kind, title, hint) {
|
||
var d = document.createElement("div");
|
||
d.className = "viz-msg viz-msg--" + kind;
|
||
d.innerHTML = "<b></b><span></span>";
|
||
d.querySelector("b").textContent = title;
|
||
d.querySelector("span").textContent = hint || "";
|
||
el.replaceChildren(d);
|
||
}
|
||
|
||
/* ── що це за адреса ───────────────────────────────────────────── */
|
||
|
||
function isSpec(src) { return /\.json(\?|#|$)/i.test(src || ""); }
|
||
function isTableau(src) { return /public\.tableau\.com/i.test(src || ""); }
|
||
function isChart(src) { return isSpec(src) || isTableau(src); }
|
||
|
||
/* ── Tableau Public ────────────────────────────────────────────── */
|
||
|
||
/* Адреса графіка Tableau Public → адреса, яку можна вбудувати.
|
||
Приймає і те, що видно в адресному рядку, і готову адресу /views/. */
|
||
function tableauEmbedUrl(raw) {
|
||
var url = String(raw).trim().split("?")[0];
|
||
var m = url.match(/[#!/]*\/(?:viz|views|vizhome)\/([^/]+)\/([^/?#]+)/);
|
||
if (!m) return null;
|
||
|
||
/* tabs=no обов'язковий: без нього рамка показує всі аркуші книги,
|
||
разом із чернетками, і будь-хто може в них клацнути. */
|
||
return "https://public.tableau.com/views/" + m[1] + "/" + m[2] +
|
||
"?:showVizHome=no&:embed=y&:tabs=no&:display_count=no&:toolbar=no";
|
||
}
|
||
|
||
function mountTableau(el) {
|
||
var raw = el.getAttribute("data-tableau");
|
||
var src = tableauEmbedUrl(raw);
|
||
|
||
if (!src) {
|
||
box(el, "warn", "Не вдалося прочитати адресу Tableau",
|
||
"Має бути адреса вигляду " +
|
||
"public.tableau.com/app/profile/…/viz/Книга/Аркуш. " +
|
||
"Відкрийте графік на Tableau Public і скопіюйте адресу з адресного рядка.");
|
||
return;
|
||
}
|
||
|
||
var frame = document.createElement("iframe");
|
||
frame.className = "viz-frame";
|
||
frame.src = src;
|
||
frame.loading = "lazy";
|
||
frame.title = "Графік Tableau Public";
|
||
frame.setAttribute("allowfullscreen", "");
|
||
frame.style.height = (el.getAttribute("data-height") || 620) + "px";
|
||
|
||
/* Пряме посилання під рамкою. Усередині рамки Tableau малює власну
|
||
сторінку помилки, якої ми звідси не бачимо. Посилання дає читачеві
|
||
шлях до графіка, а автору показує, чи жива адреса. */
|
||
var link = document.createElement("p");
|
||
link.className = "viz-link";
|
||
var a = document.createElement("a");
|
||
a.href = String(raw).trim();
|
||
a.target = "_blank";
|
||
a.rel = "noopener";
|
||
a.textContent = "Відкрити на Tableau Public";
|
||
link.appendChild(a);
|
||
|
||
el.replaceChildren(frame, link);
|
||
}
|
||
|
||
/* ── Vega-Lite ─────────────────────────────────────────────────── */
|
||
|
||
var vegaReady = null;
|
||
|
||
function loadScript(src) {
|
||
return new Promise(function (ok, fail) {
|
||
var s = document.createElement("script");
|
||
s.src = src;
|
||
s.async = false;
|
||
s.onload = ok;
|
||
s.onerror = function () { fail(new Error("cdn: " + src)); };
|
||
document.head.appendChild(s);
|
||
});
|
||
}
|
||
|
||
function ensureVega() {
|
||
if (typeof window.vegaEmbed === "function") return Promise.resolve();
|
||
if (!vegaReady) {
|
||
vegaReady = VEGA.reduce(function (chain, src) {
|
||
return chain.then(function () { return loadScript(src); });
|
||
}, Promise.resolve());
|
||
}
|
||
return vegaReady;
|
||
}
|
||
|
||
/* Специфікація без width займає всю ширину колонки, тому та сама
|
||
робота читається і на телефоні. Для facet, concat і repeat так
|
||
не можна: там ширину рахує сама Vega-Lite. */
|
||
function fitToColumn(spec) {
|
||
if (!spec || typeof spec !== "object") return spec;
|
||
if ("width" in spec) return spec;
|
||
if (spec.facet || spec.hconcat || spec.vconcat || spec.concat || spec.repeat) return spec;
|
||
spec.width = "container";
|
||
return spec;
|
||
}
|
||
|
||
function specSource(el) {
|
||
if (el.inlineSpec) return Promise.resolve(el.inlineSpec);
|
||
|
||
var path = el.getAttribute("data-spec");
|
||
return fetch(path).then(function (r) {
|
||
if (!r.ok) throw new Error("404");
|
||
return r.json();
|
||
});
|
||
}
|
||
|
||
function mountSpec(el) {
|
||
var path = el.getAttribute("data-spec") || "специфікація в тексті роботи";
|
||
|
||
ensureVega()
|
||
.then(function () { return specSource(el); })
|
||
.then(function (spec) {
|
||
return window.vegaEmbed(el, fitToColumn(spec), { actions: false, renderer: "svg" });
|
||
})
|
||
.then(function (res) { el.vegaView = res && res.view; })
|
||
.catch(function (err) {
|
||
var msg = String((err && err.message) || err);
|
||
|
||
if (/^cdn:/.test(msg)) {
|
||
box(el, "warn", "Бібліотека Vega-Lite не завантажилась",
|
||
"Перевірте інтернет і оновіть сторінку.");
|
||
return;
|
||
}
|
||
var hint;
|
||
if (/404|fetch|load|network/i.test(msg)) {
|
||
hint = "Файл " + path + " не знайдено. Перевірте, що він лежить у теці " +
|
||
"specs/ і що ім'я збігається. Великі й малі літери мають значення.";
|
||
} else if (/JSON|token|Unexpected/i.test(msg)) {
|
||
hint = "Специфікація не читається як JSON. Найчастіша причина — зайва " +
|
||
"або пропущена кома. Вставте специфікацію у Vega Editor: він " +
|
||
"покаже, де саме.";
|
||
} else {
|
||
hint = "Vega-Lite відмовилась малювати цю специфікацію: " + msg +
|
||
". Перевірте її у Vega Editor.";
|
||
}
|
||
box(el, "warn", "Графік не вдалося показати", hint);
|
||
});
|
||
}
|
||
|
||
/* ── графіки, поставлені в тексті ──────────────────────────────── */
|
||
|
||
function vizFor(src, height) {
|
||
var el = document.createElement("div");
|
||
el.className = "viz";
|
||
if (height) el.setAttribute("data-height", height);
|
||
if (isTableau(src)) el.setAttribute("data-tableau", src);
|
||
else el.setAttribute("data-spec", src);
|
||
return el;
|
||
}
|
||
|
||
function figureFor(node, caption, wide) {
|
||
var fig = document.createElement("figure");
|
||
fig.className = "chart" + (wide ? " wide" : "");
|
||
fig.appendChild(node);
|
||
if (caption) {
|
||
var cap = document.createElement("figcaption");
|
||
cap.textContent = caption;
|
||
fig.appendChild(cap);
|
||
}
|
||
return fig;
|
||
}
|
||
|
||
/* Підпис у лапках після адреси: wide — на всю ширину, число —
|
||
висота рамки Tableau.  */
|
||
function readOptions(title) {
|
||
var o = {};
|
||
String(title || "").split(/\s+/).forEach(function (word) {
|
||
if (/^wide$/i.test(word)) o.wide = true;
|
||
else if (/^\d+$/.test(word)) o.height = word;
|
||
});
|
||
return o;
|
||
}
|
||
|
||
function figureForImage(img) {
|
||
var o = readOptions(img.getAttribute("title"));
|
||
return figureFor(vizFor(img.getAttribute("src"), o.height), img.getAttribute("alt"), o.wide);
|
||
}
|
||
|
||
function chartImages(node) {
|
||
return [].slice.call(node.querySelectorAll("img")).filter(function (img) {
|
||
return isChart(img.getAttribute("src"));
|
||
});
|
||
}
|
||
|
||
function upgradeImages(root) {
|
||
/* Спочатку абзаци, у яких стоять самі графіки. Два графіки в
|
||
одному абзаці — це рядок із двох: так їх ставлять поруч. */
|
||
[].slice.call(root.querySelectorAll("p")).forEach(function (p) {
|
||
var imgs = chartImages(p);
|
||
if (!imgs.length) return;
|
||
|
||
var alone = imgs.length === p.children.length && p.textContent.trim() === "";
|
||
var figs = imgs.map(figureForImage);
|
||
|
||
if (!alone) {
|
||
imgs.forEach(function (img, i) { img.replaceWith(figs[i]); });
|
||
return;
|
||
}
|
||
if (figs.length === 1) {
|
||
p.replaceWith(figs[0]);
|
||
return;
|
||
}
|
||
|
||
var row = document.createElement("div");
|
||
row.className = "chart-row";
|
||
figs.forEach(function (f) { row.appendChild(f); });
|
||
p.replaceWith(row);
|
||
});
|
||
|
||
/* Графіки поза абзацом: у списку, у таблиці, у цитаті. */
|
||
chartImages(root).forEach(function (img) {
|
||
img.replaceWith(figureForImage(img));
|
||
});
|
||
}
|
||
|
||
/* Специфікація, написана просто в тексті роботи:
|
||
```vega-lite … ``` */
|
||
function upgradeFences(root) {
|
||
var blocks = [].slice.call(root.querySelectorAll('[class*="language-vega-lite"]'));
|
||
|
||
blocks.forEach(function (el) {
|
||
/* Підсвітка коду загортає код у кілька рівнів. Беремо
|
||
найзовнішній блок: його ми і замінюємо на графік. */
|
||
var block = el.closest("div[class*='language-vega-lite']") ||
|
||
el.closest("pre") || el;
|
||
if (block.dataset.chartDone) return;
|
||
block.dataset.chartDone = "1";
|
||
|
||
var code = el.matches("code") ? el : (el.querySelector("code") || el);
|
||
var viz = document.createElement("div");
|
||
viz.className = "viz";
|
||
var fig = figureFor(viz, null, false);
|
||
block.replaceWith(fig);
|
||
|
||
try {
|
||
viz.inlineSpec = JSON.parse(code.textContent);
|
||
} catch (e) {
|
||
box(viz, "warn", "Специфікація в тексті не читається як JSON",
|
||
"Найчастіша причина — зайва або пропущена кома. Вставте її у " +
|
||
"Vega Editor: він покаже, де саме. Повідомлення браузера: " +
|
||
String(e.message || e));
|
||
}
|
||
});
|
||
}
|
||
|
||
/* ── бічна панель ──────────────────────────────────────────────── */
|
||
|
||
/* Підсвічує в бічній панелі ту роботу, яка зараз на екрані. */
|
||
function followScroll() {
|
||
var links = document.querySelectorAll(".side-works a");
|
||
if (!links.length || !("IntersectionObserver" in window)) return;
|
||
|
||
var pairs = [];
|
||
links.forEach(function (a) {
|
||
var el = document.getElementById(a.getAttribute("href").slice(1));
|
||
if (el) pairs.push({ a: a, el: el });
|
||
});
|
||
|
||
var seen = new Set();
|
||
var io = new IntersectionObserver(function (entries) {
|
||
entries.forEach(function (e) {
|
||
if (e.isIntersecting) seen.add(e.target); else seen.delete(e.target);
|
||
});
|
||
pairs.forEach(function (p) { p.a.classList.remove("here"); });
|
||
for (var i = 0; i < pairs.length; i++) {
|
||
if (seen.has(pairs[i].el)) { pairs[i].a.classList.add("here"); break; }
|
||
}
|
||
}, { rootMargin: "-20% 0px -70% 0px" });
|
||
|
||
pairs.forEach(function (p) { io.observe(p.el); });
|
||
}
|
||
|
||
/* Клік у бічній панелі або адреса з #якорем мають розгортати роботу,
|
||
навіть якщо читач її згорнув. */
|
||
function openOnJump() {
|
||
function openHash() {
|
||
var id = location.hash.slice(1);
|
||
if (!id) return;
|
||
var el = document.getElementById(id);
|
||
if (el && el.tagName === "DETAILS") el.open = true;
|
||
}
|
||
openHash();
|
||
window.addEventListener("hashchange", openHash);
|
||
document.querySelectorAll('.side-works a').forEach(function (a) {
|
||
a.addEventListener("click", function () {
|
||
var el = document.getElementById(a.getAttribute("href").slice(1));
|
||
if (el && el.tagName === "DETAILS") el.open = true;
|
||
});
|
||
});
|
||
}
|
||
|
||
/* Одна кнопка: згорнути всі роботи або розгорнути назад. */
|
||
function foldAll() {
|
||
var works = document.querySelectorAll("details.work");
|
||
var side = document.querySelector(".side");
|
||
if (!works.length || !side) return;
|
||
|
||
var btn = document.createElement("button");
|
||
btn.className = "side-fold";
|
||
btn.type = "button";
|
||
side.appendChild(btn);
|
||
|
||
function label() {
|
||
var open = document.querySelectorAll("details.work[open]").length;
|
||
btn.textContent = open ? "Згорнути всі" : "Розгорнути всі";
|
||
}
|
||
|
||
btn.addEventListener("click", function () {
|
||
var open = document.querySelectorAll("details.work[open]").length;
|
||
works.forEach(function (w) { w.open = open === 0; });
|
||
label();
|
||
});
|
||
|
||
works.forEach(function (w) { w.addEventListener("toggle", label); });
|
||
label();
|
||
}
|
||
|
||
/* ── старт ─────────────────────────────────────────────────────── */
|
||
|
||
function mountAll() {
|
||
var main = document.querySelector("main") || document.body;
|
||
|
||
try {
|
||
upgradeFences(main);
|
||
upgradeImages(main);
|
||
} catch (e) {
|
||
/* Розпізнавання графіків у тексті не має ламати решту сторінки. */
|
||
}
|
||
|
||
document.querySelectorAll(".viz").forEach(function (el) {
|
||
try {
|
||
if (el.hasAttribute("data-tableau")) mountTableau(el);
|
||
else if (el.inlineSpec || el.hasAttribute("data-spec")) mountSpec(el);
|
||
} catch (e) {
|
||
box(el, "warn", "Цей блок не вдалося показати", String(e.message || e));
|
||
}
|
||
});
|
||
|
||
followScroll();
|
||
openOnJump();
|
||
foldAll();
|
||
}
|
||
|
||
if (document.readyState === "loading") {
|
||
document.addEventListener("DOMContentLoaded", mountAll);
|
||
} else {
|
||
mountAll();
|
||
}
|
||
})();
|