Рендеринг встроенного JS из контента Wordpress в Gatsby
У меня есть небольшой сайт на Wordpress, который я создаю статически с помощью Gatsby, используя отличныйgatsby-source-wordpressи WPGraphQL. Недавно я проходил обучение по науке о данных и хочу встроить свои визуализации данных в свой сайт Wordpress. Я использую Vega Lite для визуализации. Каждая визуализация «описывается» как встроенный блок JS, который я добавляю в Wordpress с помощью блока HTML.
После того, как я включил три необходимых скрипта в заголовок моей темы Wordpress, визуализации правильно отображаются на моих страницах темы Wordpress, отличной от Gatsby. Однако, когда Гэтсби извлекает данные из Wordpress с помощью WPGraphQL, визуализации не отображаются на страницах Гэтсби (я добавил те же три скрипта в заголовок страниц Гэтсби с помощью React Helmet).
Я думаю, что понимаю Гэтсби достаточно, чтобы понять, почему это не работает, но я не знаю, какой маршрут я должен попытаться заставить работать... Я мог бы импортировать библиотеки Vega в Гэтсби, но я не знаю, как Гэтсби интерпретировал бы может из GraphQL. В качестве альтернативы я мог бы попытаться заставить его работать в браузере — возможно, с помощью SSR — но это означало бы потерю статического преимущества на многих страницах.
Ниже приведены соответствующие фрагменты страницы, отрендеренные Гэтсби...
<head>
<script src="https://cdn.jsdelivr.net/npm//vega@5" type="text/javascript" data-react-helmet="true"></script>
<script src="https://cdn.jsdelivr.net/npm//vega-lite@4.17.0" type="text/javascript" data-react-helmet="true"></script>
<script src="https://cdn.jsdelivr.net/npm//vega-embed@6" type="text/javascript" data-react-helmet="true"></script>
<head>
и
<div id="vis"></div>
<script>
(function(vegaEmbed) {
var spec = {"config": {"padding": 20, "title": {"anchor": "start", "align": "left", "fontSize": 20, "font": "Lato", "color": "#ffffff", "frame": "group", "subtitleColor": "#ffffff", "subtitleFontSize": 16}, "axisX": {"domain": true, "domainColor": "#ffffff", "domainWidth": 1, "grid": true, "gridColor": "#999999", "gridWidth": 1, "labelColor": "#ffffff", "labelFont": "Lato", "labelFontSize": 13, "labelAngle": 0, "tickColor": "#ffffff", "tickSize": 3, "titleColor": "#ffffff", "titleFont": "Lato", "titleFontSize": 16, "titlePadding": 10, "title": "X Axis Title (units)"}, "axisY": {"domain": true, "domainColor": "#ffffff", "domainWidth": 1, "grid": true, "gridColor": "#999999", "gridWidth": 1, "labelColor": "#ffffff", "labelFont": "Lato", "labelFontSize": 13, "labelAngle": 0, "ticks": true, "tickColor": "#ffffff", "tickSize": 3, "titleColor": "#ffffff", "titleFont": "Lato", "titleFontSize": 16, "titlePadding": 10, "title": "Y Axis Title (units)", "titleAngle": 270}, "legend": {"labelColor": "#ffffff", "labelFont": "Lato", "labelFontSize": 13, "symbolSize": 100, "titleColor": "#ffffff", "titleFont": "Lato", "titleFontSize": 14}, "tooltip": {"labelFontSize": 13}, "view": {"stroke": "transparent"}}, "layer": [{"mark": {"type": "rect", "color": "black", "opacity": 0.2}, "encoding": {"x": {"field": "startYear", "type": "temporal"}, "x2": {"field": "endYear"}}}, {"mark": {"type": "text", "align": "center", "angle": 270, "baseline": "middle", "fontSize": 16, "opacity": 0.5}, "encoding": {"text": {"field": "text", "type": "nominal"}, "x": {"field": "x", "type": "temporal"}, "x2": {"field": "endYear"}}, "transform": [{"calculate": "datum.startYear + (datum.endYear - datum.startYear)/2", "as": "x"}]}, {"data": {"name": "data-c042860487113da4c09c3ea7e1e3f6cf"}, "mark": {"type": "circle", "opacity": 0.9, "stroke": "#121212", "strokeWidth": 0.5}, "encoding": {"color": {"field": "type", "legend": {"rowPadding": 5, "title": "Type of win"}, "scale": {"domain": ["Standard", "Min", "Max", "Points"], "range": ["#ffff3f", "#fa0149", "#8cd3fe", "#00e000"]}, "type": "nominal"}, "opacity": {"condition": {"value": 1, "selection": "selector003"}, "value": 0.2}, "size": {"field": "Stages won", "legend": {"title": "Stages won"}, "scale": {"domain": [0, 8], "range": [20, 120]}, "type": "quantitative"}, "tooltip": [{"field": "Year", "type": "quantitative"}, {"field": "Cyclist", "title": "Winner"}, {"field": "Country", "type": "nominal"}, {"field": "Team", "type": "nominal"}, {"field": "Stages won", "type": "quantitative"}, {"field": "Winning margin", "type": "nominal"}], "x": {"axis": {"tickCount": 10, "title": "Year"}, "field": "datetime", "scale": {"domain": [1902, 2022], "zero": false}, "timeUnit": "year", "title": "Year", "type": "temporal"}, "y": {"axis": {"grid": false}, "field": "Stages leading", "scale": {"domain": [0, 23]}, "title": "Stages in lead", "type": "quantitative"}}, "height": 400, "selection": {"selector003": {"type": "multi", "fields": ["type"], "bind": "legend"}}, "title": {"text": "Tour de France winners, 1903 - 2022", "subtitle": "Number of winners: 65"}, "width": 800}], "background": "#586b6e", "data": {"name": "data-945424ea27149582e05915ea3c6ba826"}, "$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json", "datasets": {"data-945424ea27149582e05915ea3c6ba826": [{"startYear": "1914-06-28T00:00:00.000", "endYear": "1918-11-11T00:00:00.000", "text": "World War I"}, {"startYear": "1939-09-01T00:00:00.000", "endYear": "1945-08-14T00:00:00.000", "text": "World War II"}], "data-c042860487113da4c09c3ea7e1e3f6cf": [{"Year": 1903, "Cyclist": "Maurice Garin", "Country": "France", "Team": "La Fran\u00e7aise", "Kilometres": 2428, "Miles": 1509, "Time total": 340394, "Time margin": 10761.0, "Stages won": 3, "Stages leading": 6, "datetime": "1903-05-01T00:00:00", "Winning margin": "2h 59m 21s", "Team (Country)": "La Fran\u00e7aise (FRANCE)", "type": "Max"}, {"Year": 1904, "Cyclist": "Henri Cornet", "Country": "France", "Team": "Conte", "Kilometres": 2428, "Miles": 1509, "Time total": 345955, "Time margin": 8174.0, "Stages won": 1, "Stages leading": 3, "datetime": "1904-05-01T00:00:00", "Winning margin": "2h 16m 14s", "Team (Country)": "Conte (FRANCE)", "type": "Standard"}, {"Year": 1905, "Cyclist": "Louis Trousselier", "Country": "France", "Team": "Peugeot\u2013Wolber", "Kilometres": 2994, "Miles": 1860, "Time total": 0, "Time margin": 0.0, "Stages won": 5, "Stages leading": 10, "datetime": "1905-05-01T00:00:00", "Winning margin": "0h 00m 00s", "Team (Country)": "Peugeot\u2013Wolber (FRANCE)", "type": "Points"}}]}};
var embedOpt = {"mode": "vega-lite"};
function showError(el, error){
el.innerHTML = ('<div class="error" style="color:red;">'
+ '<p>JavaScript Error: ' + error.message + '</p>'
+ "<p>This usually means there's a typo in your chart specification. "
+ "See the javascript console for the full traceback.</p>"
+ '</div>');
throw error;
}
const el = document.getElementById('vis');
vegaEmbed("#vis", spec, embedOpt)
.catch(error => showError(el, error));
})(vegaEmbed);
</script>