diff --git a/README.md b/README.md
index 317393d..f00f916 100644
--- a/README.md
+++ b/README.md
@@ -24,5 +24,5 @@ If you don't have git, you can donwload [a zip file](https://github.com/anneb/pg
For interactive data browsing, preview, administration and api documentation, head to [http://localhost:8090](http://localhost:8090).
-### Due credit
+### Attributions
API based on [Dirt Simple PostGIS http API](https://github.com/tobinbradley/dirt-simple-postgis-http-api)
\ No newline at end of file
diff --git a/public/attrinfo.html b/public/attrinfo.html
index f3cfe00..a6a68fd 100644
--- a/public/attrinfo.html
+++ b/public/attrinfo.html
@@ -24,11 +24,11 @@
display: inline-block;
max-width: 400px;
}
- #attrinfo {
+ #graphs {
display: flex;
flex-wrap: wrap;
}
- #attrinfo div {
+ #graphs div {
margin: 5px;
}
#colorschemes {
@@ -85,13 +85,13 @@
initMap();
fetch(`data/${fullTableName}/colstats/${attrName}?geom_column=${geomColumn}`).then(response=>{
- const attrInfoElement = document.querySelector('#attrinfo');
- attrInfoElement.innerHTML = "";
+ const loadingElement = document.querySelector('#loader');
+ loadingElement.innerHTML = "";
if (!response.ok) {
try {
- response.json(json=>attrInfoElement.innerHtml = json.error);
+ response.json(json=>loadingElement.innerHtml = json.error);
} catch(err) {
- attrInfoElement.innerHTML = err;
+ loadingElement.innerHTML = err;
}
return;
}
@@ -112,7 +112,7 @@
globalStats = json;
})
.catch(err=>
- attrInfoElement.innerHTML = `Failed to parse response, message: ${err.message}`
+ loadingElement.innerHTML = `Failed to parse response, message: ${err.message}`
);
})
}
@@ -223,20 +223,36 @@
document.querySelector("#layerjson").innerHTML = `${JSON.stringify(layerjson, null, 2)}`;
}
- 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 prepareGraphColors(classType) {
+ globalStats.graphColors = [];
+ globalStats.classType = classType;
+ }
+
+ function addGraphColors(color, upperValue) {
+ globalStats.graphColors.push({color: color, upperValue: upperValue});
+ }
+
+ let graphNoData = null;
+ let graphValues = null;
+ let graphMostFrequent = null;
+
+ function destroyGraphs() {
+ if (graphNoData) {
+ graphNoData.destroy();
+ }
+ if (graphValues) {
+ graphValues.destroy();
+ }
+ if (graphMostFrequent) {
+ graphMostFrequent.destroy();
+ }
}
function graphStats(stats) {
+ destroyGraphs();
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(), {
+ graphNoData = new Chart(document.querySelector('#graphnodata canvas'), {
type: 'doughnut',
data: {
labels: ['no data','data',],
@@ -250,13 +266,21 @@
}
});
if (stats.percentiles.length && typeof(stats.percentiles[0].from) !== 'string') {
- new Chart(addCanvas(), {
+ graphValues = new Chart(document.querySelector('#graphvalues canvas'), {
type: 'line',
data: {
labels: stats.percentiles.map((percentile, index, arr)=>Math.round((index/(arr.length - 1)) * 100)),
datasets: [{
- backgroundColor: 'red',
- borderColor: 'lightred',
+ backgroundColor: stats.graphColors? stats.percentiles.map((percentile)=>{
+ let color = stats.classType === 'mostfrequent' ?
+ stats.graphColors.find(graphColor=>percentile.to == graphColor.upperValue) :
+ stats.graphColors.find(graphColor=>percentile.to < graphColor.upperValue);
+ if (!color) {
+ color = stats.graphColors[stats.graphColors.length - 1];
+ }
+ return color.color;
+ }):'red',
+ //borderColor: 'lighgray',
data: stats.percentiles.map((percentile,index,arr)=>(index===arr.length-1)?percentile.to:percentile.from),
fill: false
}]
@@ -299,13 +323,19 @@
count: rowCount - valuesSummeryRowCount
})
}
- new Chart(addCanvas(), {
+ graphMostFrequent = new Chart(document.querySelector('#graphmostfrequent canvas'), {
type: "horizontalBar",
data: {
labels: valuesSummary.map(value=>value.value),
datasets: [
{
- backgroundColor: "red",
+ backgroundColor: stats.graphColors? valuesSummary.map((value)=>{
+ let color = stats.graphColors.find(graphColor=>value.value === graphColor.upperValue)
+ if (!color) {
+ color = stats.graphColors[stats.graphColors.length - 1];
+ }
+ return color.color;
+ }):'red',
data: valuesSummary.map(value=>value.count)
}
]
@@ -447,6 +477,7 @@
let classType = document.querySelector('input[name="classtype"]:checked').value;
let reversed = document.querySelector('input[name="colorsreversed"]').checked;
if (prepareLegend()) {
+ prepareGraphColors(classType);
let classCount = Number(document.querySelector('#classcount').value);
if (classCount === 1) {
// special case, single classification
@@ -483,6 +514,7 @@
}
classValues.forEach((value, index) => {
addLegendLine(schemes[selectedColorScheme].colors[index], value.value, layerType);
+ addGraphColors(schemes[selectedColorScheme].colors[index], value.value)
if (index < classValues.length - 1 || !needsSlice) {
mapboxPaint.push(value.value);
mapboxPaint.push(schemes[selectedColorScheme].colors[index]);
@@ -529,6 +561,7 @@
mapboxPaint = ["case"]
percentileBreaks.forEach((brk, index, arr)=>{
addLegendLine(seqSchemes[selectedColorScheme].colors[index], `${brk.from} - ${brk.to}`, layerType);
+ addGraphColors(seqSchemes[selectedColorScheme].colors[index], brk.to);
if (globalStats.datatype === 'numeric') {
mapboxPaint.push(["<",["to-number", ["get", `${globalStats.column}`], 0],brk.to],seqSchemes[selectedColorScheme].colors[index]);
} else {
@@ -553,6 +586,7 @@
legendTo = Math.floor(legendTo);
}
addLegendLine(intervalSchemes[selectedColorScheme].colors[index], `${(legendFrom)} - ${legendTo}`, layerType);
+ addGraphColors(intervalSchemes[selectedColorScheme].colors[index], legendTo)
if (globalStats.datatype === 'numeric') {
// convert javscript string to number
mapboxPaint.push(["<", ["to-number",["get", globalStats.column], 0],legendTo], intervalSchemes[selectedColorScheme].colors[index]);
@@ -568,6 +602,7 @@
let colorprop = `${layerType}-color`;
map.setPaintProperty('attrlayer', colorprop, mapboxPaint);
updateLayerJsonDisplay();
+ graphStats(globalStats);
}
}
@@ -589,13 +624,18 @@ Attribute information
-