From 7a0a2655ed872d473d7433242aaec279a342e187 Mon Sep 17 00:00:00 2001 From: nac26 Date: Thu, 3 Feb 2011 03:06:02 +0000 Subject: [PATCH] NIHVIVO-1997 Removed pie charts and class group browse from menu pages due to current limitations of individual counts for classes. This should all be brought back from the dead in the future once we implement counts based on most specific type. --- webapp/web/css/menupage/menupage.css | 20 +- webapp/web/js/browseClassGroupsPie.js | 95 -------- webapp/web/js/menupage/browseByVClass.js | 10 +- webapp/web/js/raphael/g.pie.js | 205 ------------------ .../freemarker/body/menupage/menupage.ftl | 14 -- .../partials/menupage/menupage-browse.ftl | 2 - .../partials/menupage/menupage-scripts.ftl | 11 +- 7 files changed, 15 insertions(+), 342 deletions(-) delete mode 100644 webapp/web/js/browseClassGroupsPie.js delete mode 100644 webapp/web/js/raphael/g.pie.js diff --git a/webapp/web/css/menupage/menupage.css b/webapp/web/css/menupage/menupage.css index 774c697ea..894c0b9d3 100644 --- a/webapp/web/css/menupage/menupage.css +++ b/webapp/web/css/menupage/menupage.css @@ -59,22 +59,15 @@ ul#vgraph-classes a { } /* FIND BY ------> */ #find-by { - width: 230px; float: right; - margin-top: 20px; + margin: 0 2em .4em 0; } #find-by h3 { - padding: 0 25px 12px 12px; + padding: 0 0 .2em .8em; border-bottom: 0; } -ul#find-filters { - float: left; - width: 230px; -} ul#find-filters li { - display: block; - height: 35px; - line-height: 35px; + float: left; padding-left: 10px; } ul#find-filters li:last-child { @@ -83,8 +76,6 @@ ul#find-filters li:last-child { ul#find-filters a { display: block; padding-left: 15px; - width: 265px; - height: 35px; } /* RESEARCHERS ------> */ #researchers { @@ -158,7 +149,6 @@ ul#find-filters a { clear: both; width: 90%; margin: 0 auto; - margin-top: 40px; overflow: hidden; } #browse-by h2 { @@ -223,6 +213,10 @@ ul#alpha-browse-individuals a { margin-right: 17px; min-height: 170px; } +h3.selected-class { + margin: 0 0 0 1em; + padding: .8em 0 0 0; +} #individuals-in-class ul { list-style: none; } diff --git a/webapp/web/js/browseClassGroupsPie.js b/webapp/web/js/browseClassGroupsPie.js deleted file mode 100644 index d28a4cbf1..000000000 --- a/webapp/web/js/browseClassGroupsPie.js +++ /dev/null @@ -1,95 +0,0 @@ -/* $This file is distributed under the terms of the license in /doc/license.txt$ */ - -var browseClassGroups = { - // Initial page setup - onLoad: function() { - this.mergeFromTemplate(); - this.initObjects(); - }, - - // Add variables from browse template - mergeFromTemplate: function() { - $.extend(this, browseData); - }, - - // Create references to frequently used elements for convenience - initObjects: function() { - this.browseClassLinks = $('#vgraph-classes li a'); - }, - - // Retrieve classes - graphSetup: function() { - var values = [], - labels = [], - uris = []; - this.browseClassLinks.each(function() { - var count = $(this).children('span').text(); - var count = parseInt(count.slice(1, -1), 10); - var percentage = parseInt(Math.round((count / browseClassGroups.classGroupIndividualCount) * 100), 10); - var name = $(this).text(); - var countStart = name.lastIndexOf(' ('); - var name = name.substring(0, countStart); - // alert(name +' | ' + count +' | '+ percentage); - if ( percentage > 0) { - values.push(percentage); - var name = name +' ('+ percentage +'%)'; - labels.push(name); - uris.push($(this).attr("data-uri")); - } - }); - - // Send the parameters to build the pie chart - graphClasses.piechart(values, labels, uris); - } -}; - -var graphClasses = { - // Build the pie chart using gRaphael - piechart: function(values, labels, uris) { - // Clear the existing pie chart - $('#menupage-graph').empty(); - - // Create the canvas - var r = Raphael("menupage-graph", 500, 300); - - // Setup the colors for the slices - // colors = ['#192933', '#26404E', '#294656', '#194c68', '#487A96', '#63A8CE', '#67AED6','#758A96', '#9DB9C9' ]; - colors = ['#143D52', '#1F5C7A', '#297AA3', '#3399CC', '#5CADD6', '#85C2E0', '#ADD6EB', '#ADCBDD', '#D6EBF5', '#E9F1F5' ]; - // Reverse colors to see how it looks with larger slices in lighter hues: - // colors = colors.reverse(); - - // Now draw the pie chart - var pie = r.g.piechart(150, 142, 100, values, {legend: labels, legendmark: "square", legendpos: "east", colors: colors}); - pie.hover(function () { - this.sector.stop(); - this.sector.scale(1.1, 1.1, this.cx, this.cy); - if (this.label) { - this.label[0].stop(); - this.label[0].scale(1.5); - this.label[1].attr({"font-weight": 800}); - } - }, function () { - this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce"); - if (this.label) { - this.label[0].animate({scale: 1}, 500, "bounce"); - this.label[1].attr({"font-weight": 400}); - } - }); - - // Can't reliably link the slices at the moment. Will come up with a solution if we end up sticking with the pie charts - // $('path').click(function() { - // var index = $('path').index(this); - // var uri = uris[index]; - // // var link = browseClassGroups.baseUrl + '/individuallist?vclassId=' + encodeURIComponent(uri); - // window.location = "#browse-by"; - // browseByVClass.getIndividuals(uri); - // return false; - // }); - } -}; - -$(document).ready(function() { - browseClassGroups.onLoad(); - browseClassGroups.graphSetup(); - // graphClasses.piechart(); -}); \ No newline at end of file diff --git a/webapp/web/js/menupage/browseByVClass.js b/webapp/web/js/menupage/browseByVClass.js index 9f1830051..c9b693393 100644 --- a/webapp/web/js/menupage/browseByVClass.js +++ b/webapp/web/js/menupage/browseByVClass.js @@ -87,7 +87,8 @@ var browseByVClass = { scroll = true; } - // First wipe currently displayed individuals and existing pagination + // First wipe currently displayed class heading, individuals, and existing pagination + $('h3.selected-class').remove(); this.individualsInVClass.empty(); $('nav.pagination').remove(); @@ -98,6 +99,9 @@ var browseByVClass = { browseByVClass.pagination(pages, page); } + selectedClassHeading = '

'+ results.vclass.name +'

'; + browseByVClass.individualsContainer.prepend(selectedClassHeading); + $.each(results.individuals, function(i, item) { label = results.individuals[i].label; moniker = results.individuals[i].moniker; @@ -127,9 +131,9 @@ var browseByVClass = { browseByVClass.selectedVClass(results.vclass.URI); browseByVClass.selectedAlpha(alpha); - // Scroll to the top of the browse section unless told otherwise + // Scroll to #menupage-intro page unless told otherwise if ( scroll != false ) { - $.scrollTo('#browse-by', 500); + $.scrollTo('#menupage-intro', 500); } }); }, diff --git a/webapp/web/js/raphael/g.pie.js b/webapp/web/js/raphael/g.pie.js deleted file mode 100644 index e9c937207..000000000 --- a/webapp/web/js/raphael/g.pie.js +++ /dev/null @@ -1,205 +0,0 @@ -/* - * g.Raphael 0.4.1 - Charting library, based on Raphaël - * - * Copyright (c) 2009 Dmitry Baranovskiy (http://g.raphaeljs.com) - * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license. - */ -Raphael.fn.g.piechart = function (cx, cy, r, values, opts) { - opts = opts || {}; - var paper = this, - sectors = [], - covers = this.set(), - chart = this.set(), - series = this.set(), - order = [], - len = values.length, - angle = 0, - total = 0, - others = 0, - cut = 9, - defcut = true; - chart.covers = covers; - if (len == 1) { - series.push(this.circle(cx, cy, r).attr({fill: this.g.colors[0], stroke: opts.stroke || "#fff", "stroke-width": opts.strokewidth == null ? 1 : opts.strokewidth})); - covers.push(this.circle(cx, cy, r).attr(this.g.shim)); - total = values[0]; - values[0] = {value: values[0], order: 0, valueOf: function () { return this.value; }}; - series[0].middle = {x: cx, y: cy}; - series[0].mangle = 180; - } else { - function sector(cx, cy, r, startAngle, endAngle, fill) { - var rad = Math.PI / 180, - x1 = cx + r * Math.cos(-startAngle * rad), - x2 = cx + r * Math.cos(-endAngle * rad), - xm = cx + r / 2 * Math.cos(-(startAngle + (endAngle - startAngle) / 2) * rad), - y1 = cy + r * Math.sin(-startAngle * rad), - y2 = cy + r * Math.sin(-endAngle * rad), - ym = cy + r / 2 * Math.sin(-(startAngle + (endAngle - startAngle) / 2) * rad), - res = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(Math.abs(endAngle - startAngle) > 180), 1, x2, y2, "z"]; - res.middle = {x: xm, y: ym}; - return res; - } - for (var i = 0; i < len; i++) { - total += values[i]; - values[i] = {value: values[i], order: i, valueOf: function () { return this.value; }}; - } - values.sort(function (a, b) { - return b.value - a.value; - }); - for (i = 0; i < len; i++) { - if (defcut && values[i] * 360 / total <= 1.5) { - cut = i; - defcut = false; - } - if (i > cut) { - defcut = false; - values[cut].value += values[i]; - values[cut].others = true; - others = values[cut].value; - } - } - len = Math.min(cut + 1, values.length); - others && values.splice(len) && (values[cut].others = true); - for (i = 0; i < len; i++) { - var mangle = angle - 360 * values[i] / total / 2; - if (!i) { - angle = 90 - mangle; - mangle = angle - 360 * values[i] / total / 2; - } - if (opts.init) { - var ipath = sector(cx, cy, 1, angle, angle - 360 * values[i] / total).join(","); - } - var path = sector(cx, cy, r, angle, angle -= 360 * values[i] / total); - var p = this.path(opts.init ? ipath : path).attr({fill: opts.colors && opts.colors[i] || Raphael.getColor("#194c68") || "#666", stroke: opts.stroke || "#fff", "stroke-width": (opts.strokewidth == null ? 1 : opts.strokewidth), "stroke-linejoin": "round"}); - p.value = values[i]; - p.middle = path.middle; - p.mangle = mangle; - sectors.push(p); - series.push(p); - opts.init && p.animate({path: path.join(",")}, (+opts.init - 1) || 1000, ">"); - } - for (i = 0; i < len; i++) { - p = paper.path(sectors[i].attr("path")).attr(this.g.shim); - opts.href && opts.href[i] && p.attr({href: opts.href[i]}); - p.attr = function () {}; - covers.push(p); - series.push(p); - } - } - - chart.hover = function (fin, fout) { - fout = fout || function () {}; - var that = this; - for (var i = 0; i < len; i++) { - (function (sector, cover, j) { - var o = { - sector: sector, - cover: cover, - cx: cx, - cy: cy, - mx: sector.middle.x, - my: sector.middle.y, - mangle: sector.mangle, - r: r, - value: values[j], - total: total, - label: that.labels && that.labels[j] - }; - cover.mouseover(function () { - fin.call(o); - }).mouseout(function () { - fout.call(o); - }); - })(series[i], covers[i], i); - } - return this; - }; - // x: where label could be put - // y: where label could be put - // value: value to show - // total: total number to count % - chart.each = function (f) { - var that = this; - for (var i = 0; i < len; i++) { - (function (sector, cover, j) { - var o = { - sector: sector, - cover: cover, - cx: cx, - cy: cy, - x: sector.middle.x, - y: sector.middle.y, - mangle: sector.mangle, - r: r, - value: values[j], - total: total, - label: that.labels && that.labels[j] - }; - f.call(o); - })(series[i], covers[i], i); - } - return this; - }; - chart.click = function (f) { - var that = this; - for (var i = 0; i < len; i++) { - (function (sector, cover, j) { - var o = { - sector: sector, - cover: cover, - cx: cx, - cy: cy, - mx: sector.middle.x, - my: sector.middle.y, - mangle: sector.mangle, - r: r, - value: values[j], - total: total, - label: that.labels && that.labels[j] - }; - cover.click(function () { f.call(o); }); - })(series[i], covers[i], i); - } - return this; - }; - chart.inject = function (element) { - element.insertBefore(covers[0]); - }; - var legend = function (labels, otherslabel, mark, dir) { - var x = cx + r + r / 5, - y = cy, - h = y + 10; - labels = labels || []; - dir = (dir && dir.toLowerCase && dir.toLowerCase()) || "east"; - mark = paper.g.markers[mark && mark.toLowerCase()] || "disc"; - chart.labels = paper.set(); - for (var i = 0; i < len; i++) { - var clr = series[i].attr("fill"), - j = values[i].order, - txt; - values[i].others && (labels[j] = otherslabel || "Others"); - labels[j] = paper.g.labelise(labels[j], values[i], total); - chart.labels.push(paper.set()); - chart.labels[i].push(paper.g[mark](x + 5, h, 5).attr({fill: clr, stroke: "none"})); - chart.labels[i].push(txt = paper.text(x + 20, h, labels[j] || values[j]).attr(paper.g.txtattr).attr({fill: opts.legendcolor || "#000", "text-anchor": "start"})); - covers[i].label = chart.labels[i]; - h += txt.getBBox().height * 1.2; - } - var bb = chart.labels.getBBox(), - tr = { - east: [0, -bb.height / 2], - west: [-bb.width - 2 * r - 20, -bb.height / 2], - north: [-r - bb.width / 2, -r - bb.height - 10], - south: [-r - bb.width / 2, r + 10] - }[dir]; - chart.labels.translate.apply(chart.labels, tr); - chart.push(chart.labels); - }; - if (opts.legend) { - legend(opts.legend, opts.legendothers, opts.legendmark, opts.legendpos); - } - chart.push(series, covers); - chart.series = series; - chart.covers = covers; - return chart; -}; \ No newline at end of file diff --git a/webapp/web/templates/freemarker/body/menupage/menupage.ftl b/webapp/web/templates/freemarker/body/menupage/menupage.ftl index 031af31d8..dbdb7173d 100644 --- a/webapp/web/templates/freemarker/body/menupage/menupage.ftl +++ b/webapp/web/templates/freemarker/body/menupage/menupage.ftl @@ -6,20 +6,6 @@ <#include "menupage-browse.ftl"> diff --git a/webapp/web/templates/freemarker/body/partials/menupage/menupage-browse.ftl b/webapp/web/templates/freemarker/body/partials/menupage/menupage-browse.ftl index d4f0936ae..3cb7e2e11 100644 --- a/webapp/web/templates/freemarker/body/partials/menupage/menupage-browse.ftl +++ b/webapp/web/templates/freemarker/body/partials/menupage/menupage-browse.ftl @@ -3,8 +3,6 @@ <#-- Template for browsing individuals in class groups for menupages -->
-

Browse by

-