<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PGServer Info</title>
<style>
.medium {width: 300px; height: auto;}
#mapcontainer {
display: flex;
flex-wrap: wrap;
}
#map {display: inline-block; width: 500px; height: 500px; border: 1 px solid lightblue;}
#legendcontainer {display: flex;}
#legend {min-width: 250px;}
#featurecontainer {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#featureinfo {
display: inline-block;
max-width: 400px;
}
#attrinfo {
display: flex;
flex-wrap: wrap;
}
#attrinfo div {
margin: 5px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.0/mapbox-gl.css' rel='stylesheet' />
<link href='loader.css' rel='stylesheet' />
<script src="./colorbrewer.js"></script>
<script>
"use strict";
let map = null;
let globalStats = null;
function init() {
const urlParams = new URLSearchParams(window.location.search);
const fullTableName = urlParams.get('table');
const attrName = urlParams.get("column");
const attrType = urlParams.get("columntype");
const geomType = urlParams.get('geomtype');
const geomColumn = urlParams.get('geom_column');
document.querySelector('#tablename').innerHTML = `Layer: ${fullTableName}<br>Geometry: ${geomColumn}`;
document.querySelector('#columnname').innerHTML = `Attribute: ${attrName} (${attrType})`;
document.querySelector('#back').innerHTML = `<a href="tableinfo.html?table=${fullTableName}&geom_column=${geomColumn}">Back to layer info</a>`;
initMap();
fetch(`data/${fullTableName}/colstats/${attrName}?geom_column=${geomColumn}`).then(response=>{
const attrInfoElement = document.querySelector('#attrinfo');
attrInfoElement.innerHTML = "";
if (!response.ok) {
try {
response.json(json=>attrInfoElement.innerHtml = json.error);
} catch(err) {
attrInfoElement.innerHTML = err;
}
return;
}
response.json()
.then(json=>{
if (json.datatype === 'timestamptz' || json.datatype === 'date') {
json.percentiles = json.percentiles.map(percentile=>{
percentile.from = percentile.from?new Date(percentile.from):null;
percentile.to = percentile.to?new Date(percentile.to):null;
return percentile;
})
json.values = json.values.map(value=>{
value.value = value.value?new Date(value.value):null;
return value;
})
}
graphStats(json)
globalStats = json;
})
.catch(err=>
attrInfoElement.innerHTML = `Failed to parse response, message: ${err.message}`
);
})
}
function initMap()
{
const urlParams = new URLSearchParams(window.location.search);
const fullTableName = urlParams.get('table');
const geomType = urlParams.get('geomtype');
const geomColumn = urlParams.get('geom_column');
const attrName = urlParams.get("column");
const mapDefinition = {
container: 'map',
"style": {
"version": 8,
"name": "DefaultBaseStyle",
"id": "defaultbasestyle",
"glyphs": `https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key=`,
"sources": {
"osmgray": {
"type":"raster",
"tileSize":256,
"tiles":[
"https://tiles.edugis.nl/mapproxy/osm/tiles/osmgrayscale_EPSG900913/{z}/{x}/{y}.png?origin=nw"
],
"attribution":"© <a href=\"https://www.openstreetmap.org/about\" target=\"copyright\">OpenStreetMap contributors</a>"
}
},
"layers": [
{
"id": "osmgray",
"type": "raster",
"source": "osmgray"
}
]
}
}
const bboxll = urlParams.get('bboxll');
if (bboxll) {
mapDefinition.bounds = JSON.parse(bboxll);
}
map = new mapboxgl.Map(mapDefinition);
map.on('load', () => {
let layerType, paint;
switch (geomType) {
case 'MULTIPOLYGON':
case 'POLYGON':
layerType = 'fill';
paint = {
"fill-color": "red",
"fill-outline-color": "white",
"fill-opacity": 0.8
}
break;
case 'MULTILINESTRING':
case 'LINESTRING':
layerType = 'line';
paint = {
"line-color": "red",
"line-width": 1
}
break;
case 'MULTIPOINT':
case 'POINT':
layerType = "circle";
paint = {
"circle-radius": 5,
"circle-color": "red",
"circle-stroke-color": "white",
"circle-stroke-width" : 1
}
break;
default:
break;
}
if (!layerType) {
document.querySelector("#layerjson").innerHTML = `Field geom of type: '${geomType}' not supported<br>Supported types: (MULTI-) POINT/LINE/POLYGON<p>`
} else {
const baseUrl = new URL(`/data`, window.location.href).href;
const layer = {
"id": "attrlayer",
"type": layerType,
"source": {
"type": "vector",
"tiles": [`${baseUrl}/${fullTableName}/mvt/{z}/{x}/{y}?geom_column=${geomColumn}&columns=${attrName}&include_nulls=0`],
},
"source-layer": fullTableName,
"paint": paint,
//"filter": ['has', attrName]
}
map.addLayer(layer);
addLegendLine('red', fullTableName, layerType);
updateLayerJsonDisplay();
}
})
map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point).map(function(feature){ return {layer: {id: feature.layer.id, type: feature.layer.type}, properties:(feature.properties)};});
document.querySelector('#featureinfo').innerHTML = JSON.stringify(features.map(feature=>feature.properties), null, 2);
});
}
function updateLayerJsonDisplay() {
const layerjson = map.getStyle().layers.filter(l=>l.id==='attrlayer')[0];
layerjson.source = map.getSource(layerjson.source).serialize();
document.querySelector("#layerjson").innerHTML = `<pre>${JSON.stringify(layerjson, null, 2)}</pre>`;
}
function addCanvas() {
const container = document.createElement('div');
container.classList.add('canvascontainer');
const canvas = document.createElement('canvas');
container.classList.add('medium');
container.appendChild(canvas);
document.querySelector('#attrinfo').appendChild(container);
return canvas;
}
function graphStats(stats) {
const nullValues = stats.values.filter(value=>value.value === null).reduce((result, value)=>result+value.count,0);
const rowCount = stats.percentiles.reduce((result, percentile)=>result + percentile.count, 0);
new Chart(addCanvas(), {
type: 'doughnut',
data: {
labels: ['no data','data',],
datasets: [{
backgroundColor: ['lightgray', 'red'],
borderColor: 'white',
borderWidth: 0,
data: [nullValues, rowCount]
}]
}
});
if (stats.percentiles.length && typeof(stats.percentiles[0].from) !== 'string') {
new Chart(addCanvas(), {
type: 'line',
data: {
labels: stats.percentiles.map((percentile, index, arr)=>Math.round((index/(arr.length - 1)) * 100)),
datasets: [{
backgroundColor: 'red',
borderColor: 'lightred',
data: stats.percentiles.map((percentile,index,arr)=>(index===arr.length-1)?percentile.to:percentile.from),
fill: false
}]
},
options : {
title: {
display: false,
text : 'some title'
},
legend: {
display: false
},
scales: {
yAxes: [
{
scaleLabel: {
display: true,
labelString: stats.column
}
}
],
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'percentage of rows',
padding: 0
}
}
]
}
}
})
}
const valuesSummary = stats.values.filter(value=>value.value !== null).slice(0,10);
const valuesSummeryRowCount = valuesSummary.reduce((result, value)=>result+value.count,0);
if (rowCount > valuesSummeryRowCount) {
valuesSummary.push({
value:"other",
count: rowCount - valuesSummeryRowCount
})
}
new Chart(addCanvas(), {
type: "horizontalBar",
data: {
labels: valuesSummary.map(value=>value.value),
datasets: [
{
backgroundColor: "red",
data: valuesSummary.map(value=>value.count)
}
]
},
options : {
legend: {
display: false,
},
scales: {
xAxes: [
{
ticks: {
min: 0
}
}
]
}
}
})
}
function addLegendLine(color, label, type) {
if (!type) {
type = 'fill';
}
const legend = document.querySelector('#legend');
let svg;
switch (type) {
case 'fill':
svg = `<svg width="30" height="15">
<rect width="30" height="15" style="fill:${color};fill-opacity:1;stroke-width:1;stroke:#444"></rect>
</svg>`
break;
case 'line':
svg = `<svg width="30" height="15">
<line x1="0" y1="15" x2="30" y2="0" style="stroke:${color};stroke-width:${color.width};" />
</svg>`
break;
case 'circle':
svg = `<svg width="12" height="12">
<circle cx="6" cy="6" r="5" style="fill:${color};fill-opacity:1 stroke-width:1;stroke:white" />
</svg>`
}
const legendLine = document.createElement('div');
legendLine.innerHTML = `<div> <span>${svg}</span> <span>${label}<span></div>`
legend.appendChild(legendLine);
}
function prepareLegend() {
if (globalStats) {
document.querySelector('#legend').innerHTML = '';
return true;
}
let messageElem = document.querySelector('#legend.message');
if (messageElem) {
return false;
}
messageElem = document.createElement('div');
messageElem.classList.add('message');
messageElem.innerHTML = "waiting for stats, retry later...";
return false;
}
// legendTypes 'div', 'qual', 'seq'
// for diverging, qualitative and sequential legends
function getColorSchemes(numClasses, legendType) {
for (; numClasses > 2; numClasses--) {
let result = colorbrewer.filter(scheme=>scheme.type===legendType && scheme.sets.length > numClasses - 3)
.map(scheme=>{
const result = scheme.sets[numClasses - 3];
result.name = scheme.name;
result.type = scheme.type;
return result;
});
if (result.length) {
return result;
}
}
if (numClasses === 2) {
return colorbrewer.filter(scheme=>scheme.type===legendType)
.map(scheme=>{
const result = {colors: [scheme.sets[0].colors[0],scheme.sets[0].colors[2]]}
result.name = scheme.name;
result.type = scheme.type;
return result;
})
}
return [];
}
function classButton(classType) {
if (prepareLegend()) {
let classCount = Number(document.querySelector('#classcount').value);
if (classCount === 1) {
// special case, single classification
} else {
// classCount > 1
const layerType = map.getLayer('attrlayer').type;
const rowCount = globalStats.percentiles.reduce((result, percentile)=>result + percentile.count, 0);
let mapboxPaint;
switch(classType) {
case 'qualitative':
let classValues = globalStats.values.filter(value=>value.value !== null);
const needsSlice = classValues.length > classCount;
if (needsSlice) {
classValues = classValues.slice(0, classCount - 1);
const classValuesRowCount = classValues.reduce((result, value)=>result+value.count,0);
classValues.push({
value:"other",
count: rowCount - classValuesRowCount
})
}
const schemes = getColorSchemes(classCount, 'qual');
mapboxPaint = [
"match",
["get",`${globalStats.column}`]
];
classValues.forEach((value, index) => {
addLegendLine(schemes[0].colors[index], value.value, layerType);
if (index < classValues.length - 1 || !needsSlice) {
mapboxPaint.push(value.value);
mapboxPaint.push(schemes[0].colors[index]);
}
});
mapboxPaint.push(schemes[0].colors[classValues.length -1]);
break;
case 'quantile':
let percentileBreaks = globalStats.percentiles.reduce((result, percentile)=>{
if (result.length === 0) {
result.push(Object.assign({}, percentile)); // spread operator not supported by current Edge
result[result.length - 1].pcount = 1;
return result;
}
if (result[result.length - 1].to === percentile.from) {
result[result.length - 1].to = percentile.to;
result[result.length - 1].count += percentile.count;
result[result.length - 1].pcount++;
return result;
}
result.push(Object.assign({}, percentile));
result[result.length - 1].pcount = 1;
return result;
},[]);
const legendType = (typeof percentileBreaks[0].from === "string") ? 'qual' : 'seq';
const seqSchemes = getColorSchemes(classCount, legendType);
classCount = seqSchemes[0].colors.length;
if (classCount > percentileBreaks.length) {
classCount = percentileBreaks.length
} else {
let totalPCount = percentileBreaks.reduce((result, percentile)=>result+percentile.pcount, 0);
const pCountPerClass = totalPCount / classCount;
let sumPCount = 0;
let sumClassCount = 0
percentileBreaks = percentileBreaks.reduce((result, percentile)=>{
sumPCount += percentile.pcount;
if (sumPCount > sumClassCount * pCountPerClass && result.length < classCount) {
// new class
result.push(percentile);
sumClassCount++;
} else {
result[result.length - 1].to = percentile.to;
result[result.length - 1].count += percentile.count;
result[result.length - 1].pcount += percentile.pcount;
}
return result;
},[])
}
mapboxPaint = ["case"]
percentileBreaks.forEach((brk, index, arr)=>{
addLegendLine(seqSchemes[0].colors[index], `${brk.from} - ${brk.to}`, layerType);
mapboxPaint.push(["<",["get", globalStats.column],brk.to],seqSchemes[0].colors[index])
})
mapboxPaint.push(seqSchemes[0].colors[classCount - 1])
break;
}
const colorprop = `${layerType}-color`;
map.setPaintProperty('attrlayer', colorprop, mapboxPaint);
updateLayerJsonDisplay();
}
const nullValues = globalStats.values.filter(value=>value.value === null).reduce((result, value)=>result+value.count,0);
const checkButtonNullValues = document.querySelector('#hidenulls')
if (nullValues) {
checkButtonNullValues.removeAttribute('disabled');
} else {
checkButtonNullValues.setAttribute('disabled', '')
}
}
}
</script>
</head>
<body onload="init()">
<h1>Attribute information</h1>
<h2 id="tablename"></h2>
<h2 id="columnname"></h2>
<div id="attrinfo">
<h2>Loading statistics...</h2>
<div class="loader">
<div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
<div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div>
</div>
</div>
<div id="mapcontainer">
<div id="map"></div>
<div id="featurecontainer">
<div id="legendcontainer">
<div id="legend"></div>
<div id="legendformcontainer">
<select id="classcount" name="classcount">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select><label for="numclasses">number of classes</label><br>
<button onclick="classButton('interval')">equal interval</button>
<button onclick="classButton('quantile')">quantile</button>
<button onclick="classButton('qualitative')">most frequent</button><br>
<input type="checkbox" id="hidenulls" name="hidenulls" checked><label for="hidenulls">Hide no-data</label>
</div>
</div>
<div id="featureinfo"></div>
</div>
</div>
<div id="layerjson"></div>
<div id="back"></div>
</body>
</html>