¶ Iframes
Позволяют вставлять в формы виджеты с других сайтов (например, карту из Гугл.Карт) и произвольные HTML-разметки с поддержкой JavaScript (например, для отображения графиков, написанных с использованием d3js). Фактически, являются обёртками вокруг айфреймов из HTML.
iframe-ы можно отображать на формах в качестве дополнительной информации или объединить несколько графиков в дашборд.
Примеры:
¶ Представление для отображения содержимого айфрейма
Для добавления айфрейма в запросе для ячейки нужно указать атрибуты control = 'iframe', а также ссылку на сам айфрейм одним из ниже указанных способов:
- в
iframe_markupуказать схему и название разметки из таблицы разметок - в
iframe_src- указать ссылку на сайт, который будет открыт в айфреме - в
iframe_srcdoc- указать код HTML-верстки - (устарело) в
iframe_markup_name- указать название разметки из таблицы разметок
Пример (реализация admin.pie_chart будет приведена ниже):
WITH data AS (
SELECT COUNT(id) as cnt, status.@text as status
FROM pm.tasks
WHERE NOT is_archived
GROUP BY status
ORDER BY status
)
SELECT
@type = 'form',
@title = 'Tasks by Statuses' || COALESCE(': ' || (SELECT string_agg(value.@text, ', ') FROM DOMAIN OF FIELD pm.tasks.status as statuses WHERE value = ANY($status)), ''),
@block_sizes = array[ 12 ],
(
SELECT {
data: json_agg({
label: data.status,
value: data.cnt
}),
color: ['#EE0164','#FFBC5C', '#068274', '#415157','#589C03'],
donut_ratio: 0,
label_type: 'percent'
}
FROM data
) as value @{
control = 'iframe',
iframe_markup = {
schema: 'admin',
name: 'pie_chart'
},
caption = ' ',
form_block = 0,
control_height = 300
}
Само значение ячейки в запросе (в данном случае value) целиком передаётся в айфрейм.
В случаях, когда нет необходимости передавать в айфрейм данные, можно оставить null.
Например в случае айфрейма, в котором отрисовывается обычная гео-карта, не требующего входные данные из базы, можно написать:
SELECT
@type = 'form',
@block_sizes = [ 12 ],
null as map @{
control = 'iframe',
form_block = 0,
iframe_markup = {
schema: 'demo',
name: 'map'
},
caption = 'Demo map',
}
¶ Реализация айфрейма
В каждом инстансе есть таблица funapp.iframe_markups, в которой рекомендуется хранить разметки для айфреймов.
Разметка для айфрейма - обычная HTML-верстка, с возможностью подключать стили и сторонние JS-скрипты.
¶ Пример
Ниже приведен пример реализации pie-графика с использованием сторонней библиотеки nv.d3.js
<html style="height: 100%; width: 100%; margin: 0;">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<script src="https://ozma.io/ozma-embedded.min.js"></script>
</head>
<body onclick="FunApp.linkClick(event)" style="height: 100%; width: 100%; margin: 0; overflow: auto; position: relative; ">
<div id="chart"><svg></svg></div>
<style>
body {
background-color: white;
}
#chart svg {
height: 300px;
}
.nv-label text{
font-family: Droid Sans;
}
.nvd3.nv-noData {
font: italic 1em "Fira Sans", sans-serif;
}
</style>
<script>
/* currentValue.value = {
data: [{ "label": "One", "value" : 29.765957771107 }, { "label": "Two", "value" : 0}],
color: ['#ff7f0e','#2ca02c','#d62728','#9467bd','#8c564b','#e377c2','#7f7f7f','#bcbd22','#17becf'],
donut_ration: 0
} */
FunApp.addValueHandler(currentValue => {
const event_data = currentValue.value;
const data = event_data.data ?? [];
const color = event_data.color ?? d3.scale.category10().range().slice(1);
const donutRatio = event_data.donut_ratio ?? 0;
const labelType = event_data.label_type ?? "percent";
const svgElem = document.getElementsByTagName('svg')[0];
const margin = { left: 0, right: 0, top: 2, bottom: 2},
width = svgElem.clientWidth - margin.left - margin.right,
height = svgElem.clientHeight - margin.top - margin.bottom;
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.color(color)
.showLabels(true)
.labelThreshold(.05)
.labelType(labelType)
.donut(true)
.donutRatio(donutRatio);
a = d3.select("#chart svg")
.attr("width", width)
.datum(data)
.transition()
.duration(1200)
.call(chart);
console.log(a)
return chart;
});
});
</script>
</body>
</html>
Для получения данных внутри айфрейма из FunQL запроса необходимо добавить хэндлер:
- В заголовках
<head>подключить<script src="https://ozma.io/ozma-embedded.min.js"></script> - В тэге
bodyдобавить событиеonclick="FunApp.linkClick(event)" - Реализовать функцию обработчика внутри
script-аFunApp.addValueHandler(currentValue => { ...})
¶ Смотрите также
- Дашборды - как создавать дашборды - аналитические панели для визуального отображения данных в базе