Skip to content

Commit

Permalink
update version of query-overview
Browse files Browse the repository at this point in the history
  • Loading branch information
@samussiah
samussiah committed Dec 18, 2017
1 parent a64d7a8 commit 6ed4b01
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 192 deletions.
2 changes: 1 addition & 1 deletion examples/0013-query-overview/example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgit.com/RhoInc/Webcharts/master/build/webcharts.js"></script>
<script src="https://cdn.rawgit.com/RhoInc/query-overview/0285d7f0d6f3f06fe4c8b01730050ab7c8034b68/build/queryOverview.js"></script>
<script src="https://cdn.rawgit.com/RhoInc/query-overview/v1.1.1/build/queryOverview.js"></script>

<link rel="stylesheet" href="https://cdn.rawgit.com/RhoInc/Webcharts/master/css/webcharts.css">

Expand Down
204 changes: 60 additions & 144 deletions util/web/build/vizLibrary.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
var vizLibrary = (function() {
"use strict";
var vizLibrary = function () {
'use strict';

/* -----------------------------------------------------
Takes a meta data and an array of properties for which
Expand All @@ -10,54 +10,37 @@ var vizLibrary = (function() {

function buildFilters(meta, measures, parentElement) {
console.log(examples);
measures = measures.map(function(m) {
measures = measures.map(function (m) {
console.log(m.length);
return m.length ? { colName: m, label: m } : m;
});

var wraps = d3
.select(parentElement)
.selectAll("div.controlWrap")
.data(measures)
.enter()
.append("div")
.attr("class", "controlWrap");
var wraps = d3.select(parentElement).selectAll("div.controlWrap").data(measures).enter().append("div").attr("class", "controlWrap");

//create the select for the filter
wraps
.append("div")
.attr("class", "controlLabel")
.text(d => d.label.charAt(0).toUpperCase() + d.label.slice(1));
wraps.append("div").attr("class", "controlLabel").text(d => d.label.charAt(0).toUpperCase() + d.label.slice(1));

var selects = wraps.append("select");
selects
.selectAll("option")
.data(function(d) {
// gets a list of values for the measure
var measureName = d.colName;
var valueArrays = meta.map(metaRow => metaRow[measureName]);
var allValues = [].concat.apply([], valueArrays);
var uniqueValues = d3.set(allValues).values();
return d3.merge([["All"], uniqueValues]);
})
.enter()
.append("option")
.text(d => d);
selects.selectAll("option").data(function (d) {
// gets a list of values for the measure
var measureName = d.colName;
var valueArrays = meta.map(metaRow => metaRow[measureName]);
var allValues = [].concat.apply([], valueArrays);
var uniqueValues = d3.set(allValues).values();
return d3.merge([["All"], uniqueValues]);
}).enter().append("option").text(d => d);

//add event listener for the filters
selects.on("change", function(d) {
selects.on("change", function (d) {
var elements = d3.selectAll("div.media-tile");
elements.classed("hidden", false);
selects.each(function(e) {
selects.each(function (e) {
var value = this.value;
var measure = e.colName;
console.log(value + "=" + measure);
if (value != "All")
elements
.filter(function(d) {
return d[measure].indexOf(value) == -1;
})
.classed("hidden", true);
if (value != "All") elements.filter(function (d) {
return d[measure].indexOf(value) == -1;
}).classed("hidden", true);
});
});
}
Expand Down Expand Up @@ -95,34 +78,18 @@ var vizLibrary = (function() {
function buildExampleList(meta, parentElement) {
var parentDiv = d3.select(parentElement);
var wrap = parentDiv.append("div").attr("class", "media-list");
var items = wrap
.selectAll("div")
.data(meta)
.enter()
.append("div")
.attr("class", "media-tile");
var items = wrap.selectAll("div").data(meta).enter().append("div").attr("class", "media-tile");

//append image
items
.append("a")
.attr("href", d => "./examples/" + d.dir)
.append("img")
.attr({
width: 300,
height: 200,
alt: d => d.id,
src: d => "./examples/" + d.dir + "/thumb.png"
});
items.append("a").attr("href", d => "./examples/" + d.dir).append("img").attr({
width: 300,
height: 200,
alt: d => d.id,
src: d => "./examples/" + d.dir + "/thumb.png"
});

//append text title
items
.append("a")
.attr("class", "text-wrap")
.attr("href", d => d.url)
.append("p")
.append("span")
.attr("class", "media-title")
.text(d => d.title);
items.append("a").attr("class", "text-wrap").attr("href", d => d.url).append("p").append("span").attr("class", "media-title").text(d => d.title);
}

function dataPreview(dataFiles) {
Expand All @@ -131,73 +98,42 @@ var vizLibrary = (function() {
var tbody = myFiles.append("tbody");
var rows = tbody.selectAll("tr").data(dataFiles).enter().append("tr");

rows
.append("td")
.text(function(d) {
return d.filename;
})
.attr("title", function(d) {
return d.rel_path;
})
.style("cursor", "help");
rows.append("td").text(function (d) {
return d.filename;
}).attr("title", function (d) {
return d.rel_path;
}).style("cursor", "help");

rows.append("td").append("small").text(function(d) {
rows.append("td").append("small").text(function (d) {
return " " + d.rows + " Rows x " + d.cols + " Cols";
});

rows
.append("td")
.html("&#128269;")
.attr("title", "Preview the data")
.style("cursor", "pointer")
.on("click", function(d) {
rows.classed("selected", false);
rows
.filter(function(e) {
return e == d;
})
.classed("selected", true);
var label = d3
.select(".data-preview")
.select("strong")
.text("First 10 rows of " + d.rel_path);
rows.append("td").html("&#128269;").attr("title", "Preview the data").style("cursor", "pointer").on("click", function (d) {
rows.classed("selected", false);
rows.filter(function (e) {
return e == d;
}).classed("selected", true);
var label = d3.select(".data-preview").select("strong").text("First 10 rows of " + d.rel_path);

label.append("button").text("Clear Preview").on("click", function() {
rows.classed("selected", false);
d3
.select(".data-preview")
.select("strong")
.html("Click &#128269; to preview a data set");
d3
.select(".data-preview")
.select(".data-table")
.selectAll("*")
.remove();
});
label.append("button").text("Clear Preview").on("click", function () {
rows.classed("selected", false);
d3.select(".data-preview").select("strong").html("Click &#128269; to preview a data set");
d3.select(".data-preview").select(".data-table").selectAll("*").remove();
});

d3.csv(d.rel_path, function(error, data) {
var sub = data.filter(function(d, i) {
return i < 10;
});
d3
.select(".data-preview")
.select(".data-table")
.selectAll("*")
.remove();
var preview = webCharts.createTable(".data-preview .data-table", {});
preview.init(sub);
d3.csv(d.rel_path, function (error, data) {
var sub = data.filter(function (d, i) {
return i < 10;
});
d3.select(".data-preview").select(".data-table").selectAll("*").remove();
var preview = webCharts.createTable(".data-preview .data-table", {});
preview.init(sub);
});
});

rows
.append("td")
.append("a")
.attr("href", function(d) {
return d.rel_path;
})
.html("&#8595;")
.attr("title", "Download the data")
.style("cursor", "pointer");
rows.append("td").append("a").attr("href", function (d) {
return d.rel_path;
}).html("&#8595;").attr("title", "Download the data").style("cursor", "pointer");
}

function buildGistList(meta, parentElement) {
Expand All @@ -206,12 +142,7 @@ var vizLibrary = (function() {
var items = list.selectAll("li").data(meta).enter().append("li");

//id
items
.append("a")
.attr("href", d => "./bin/gists/" + d.id)
.text(
d => (d.description ? d.description : "<no description available>")
);
items.append("a").attr("href", d => "./bin/gists/" + d.id).text(d => d.description ? d.description : "<no description available>");

//owner
items.append("small").text(d => " " + d.owner.login);
Expand All @@ -220,12 +151,7 @@ var vizLibrary = (function() {
function buildPubList(meta, parentElement) {
var parentDiv = d3.select(parentElement);
var list = parentDiv.append("ul").attr("class", "pubs");
var items = list
.selectAll("li")
.data(meta)
.enter()
.append("li")
.attr("class", "pub");
var items = list.selectAll("li").data(meta).enter().append("li").attr("class", "pub");

//thumb
items.append("img").attr("src", d => "./pubs/img/" + d.thumbnail);
Expand All @@ -247,20 +173,9 @@ var vizLibrary = (function() {
return string.charAt(0).toUpperCase() + string.slice(1);
}
var taglist = wraps.append("ul").attr("class", "tags");
taglist
.selectAll("li")
.data(d => d.links)
.enter()
.append("li")
.append("a")
.attr(
"href",
d => (d.href.indexOf("http") > -1 ? d.href : "./pubs/" + d.href)
)
.attr("class", d => d.type)
.html(function(d) {
return d.type == "github" ? d.type : cap1(d.type);
});
taglist.selectAll("li").data(d => d.links).enter().append("li").append("a").attr("href", d => d.href.indexOf("http") > -1 ? d.href : "./pubs/" + d.href).attr("class", d => d.type).html(function (d) {
return d.type == "github" ? d.type : cap1(d.type);
});
}

var index = {
Expand All @@ -272,4 +187,5 @@ var vizLibrary = (function() {
};

return index;
})();
}();

Loading

0 comments on commit 6ed4b01

Please sign in to comment.