From dd839ebd183c7fd7141bdd092a4fab2f0bca80a7 Mon Sep 17 00:00:00 2001 From: nac26 Date: Fri, 28 Jan 2011 18:25:21 +0000 Subject: [PATCH] NIHVIVO-1073 Menu page refactoring. Removed temporary placeholder files and introduced pie charts on menu pages. UI team will compare with bar graphs on home page and determine whether we'll stick with one type over the other or throw them both into the mix. --- .../images/menupage/arrow-carousel-people.jpg | Bin 1021 -> 0 bytes webapp/web/images/menupage/arrow-green.gif | Bin 183 -> 0 bytes webapp/web/images/menupage/arrow.gif | Bin 294 -> 0 bytes .../menupage/visual-graph-generic-class.jpg | Bin 2686 -> 0 bytes webapp/web/images/menupage/visual-graph.jpg | Bin 6221 -> 0 bytes webapp/web/js/browseClassGroupsPie.js | 95 ++++++++ webapp/web/js/menupage/browseByVClass.js | 12 +- webapp/web/js/raphael/g.pie.js | 205 ++++++++++++++++++ .../partials/menupage/menupage-scripts.ftl | 12 +- .../menupage-vClassesInClassgroup.ftl | 6 + 10 files changed, 322 insertions(+), 8 deletions(-) delete mode 100644 webapp/web/images/menupage/arrow-carousel-people.jpg delete mode 100644 webapp/web/images/menupage/arrow-green.gif delete mode 100644 webapp/web/images/menupage/arrow.gif delete mode 100644 webapp/web/images/menupage/visual-graph-generic-class.jpg delete mode 100644 webapp/web/images/menupage/visual-graph.jpg create mode 100644 webapp/web/js/browseClassGroupsPie.js create mode 100644 webapp/web/js/raphael/g.pie.js diff --git a/webapp/web/images/menupage/arrow-carousel-people.jpg b/webapp/web/images/menupage/arrow-carousel-people.jpg deleted file mode 100644 index 88d09a8769290a049693d754e8f4d3c4d0b6a77f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1021 zcmex=iF;o{=v;^GnD0RsUZK7IjyJ|1CV5fNcw z8EI*08F@HhWM^mR<>8eO5Ri}(6%>_%OAyQWe}F-dgTabHhnZ23fk}{&S&;Gn5r#en zMn(oEW=5bpp@5Bng`J6+l>;cw%m^e904U1F$RYsrI|~y#8#5Ul43{C z$gpgxT4^B>w5sMezuAv%R_^ue-wqaEF+G%VOD%wvL15>*%I8T(D+;c!n|C)8sC)jT zN&DuSevD61c+T>eWlf{PnFP0H2GebM2@g~!U-dk2Xln5D8HEk3w(0rGeK9Xjf8PA}{)Oo) zCqJD1_O>khmp}c_?xxQ(OJA9~I-%?7&Y+{Jt3z3B0zPVcEaQLHzs${5Q|;RKFSf-E zqN`VW1x;DBRO76d#U%fnVy;!Iv!+Uf&dKd)KELj94#Tz+n?(M4yqX)xVkD>b_UgM= zK|9UAXWr`Vy?^#^fzKDUYqPDjik?n5t(p2}+DdoN!~~`{+g}?*-Mer$aH+HDWTPb- z^9`?*9@kg?AU5lL{?*mrw2PfY@8tGOVxJ#->;_|PZ}Q4t6R%n=;z+Uay}kPGm8C`b z?=EkZmfk=6*MpfaeAk*a029Up2?ph*IvUKqUKuNWLtd%qapExV}xz_qb_Fxt>I*BV6qB2)S$uCVEC*3!j3O{O>5m3FTV5iy1?qI hdAp_e9GZJ&uS&s(K0aBw*okU)_yS)5mD>Nm2>?HPa)|%{ diff --git a/webapp/web/images/menupage/arrow-green.gif b/webapp/web/images/menupage/arrow-green.gif deleted file mode 100644 index b3a75c25d736fd7c53e748390640fab935b540ee..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 183 zcmV;o07(BwNk%w1VF&;V0K^^u@AcjD_~ysmhwt^=`1|q0+ke8^e7e?Zx71|B+=1}+ z-_GKf>GIF=_v7U6#pUnE^Z4cV`s~u=pXcz)?ey5l-iq<};lta0`1|n5-;4D4=EB>2 z$={5!(OUoi{{R30A^8LW0015UEC2ui00;mJ000Fvpf^aGXL?G}am2ZFaE6(H0e7<5 lTz5s848-l?iDYh@NkD*vcsR(C$8qQ+q^1YQa`J=#06TPfYpnnP diff --git a/webapp/web/images/menupage/arrow.gif b/webapp/web/images/menupage/arrow.gif deleted file mode 100644 index 8d9199e7a80fb38338440e88af34f88bab44fa43..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 294 zcmZ?wbhEHbomVsOzu9&2e)oxcoo~Ke`|Rs2eZoXK%`&#b9xBGTo%ieS`>i_@$4734?KUo+V7?c=vK*odo#K7k4Fmb~p z0jbt*f#roFff5S^JPPi(EWVulT&q^bxKUf9u%*D(&GVtx1rGIw*AJAp99hh=OF;2D Tx2U)xqlB-LAUm6{BZD;niN|nG diff --git a/webapp/web/images/menupage/visual-graph-generic-class.jpg b/webapp/web/images/menupage/visual-graph-generic-class.jpg deleted file mode 100644 index 8749a5a75f6a3ecb8ea21932aea01223cd7cd227..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2686 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 NJIVfU#OV{ 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 10c1c469f..7bd7ac95f 100644 --- a/webapp/web/js/menupage/browseByVClass.js +++ b/webapp/web/js/menupage/browseByVClass.js @@ -19,10 +19,8 @@ var browseByVClass = { this.vgraphVClassLinks = $('#vgraph-classes li a'); this.browseVClasses = $('#browse-classes'); this.browseVClassLinks = $('#browse-classes li a'); - this.selectedBrowseVClass = $('#browse-classes li a.selected'); this.alphaIndex = $('#alpha-browse-individuals'); this.alphaIndexLinks = $('#alpha-browse-individuals li a'); - this.selectedAlphaIndex = $('#alpha-browse-individuals li a.selected'); this.paginationNav = $('nav.pagination'); this.paginationLinks = $('nav.pagination li a'); this.individualsInVClass = $('#individuals-in-class ul'); @@ -56,9 +54,8 @@ var browseByVClass = { this.paginationListener(); }, + // Listener for page switching -- separate from the rest because it needs to be callable paginationListener: function() { - // Listener for page switching - // separate from the rest because it needs to be callable $('nav.pagination li a').click(function() { uri = $('#browse-classes li a.selected').attr('data-uri'); alpha = $('#alpha-browse-individuals li a.selected').attr('data-alpha'); @@ -75,6 +72,7 @@ var browseByVClass = { } }, + // Where all the magic happens -- gonna fetch me some individuals getIndividuals: function(vclassUri, alpha, page) { url = this.dataServiceUrl + encodeURIComponent(vclassUri); if ( alpha && alpha != "all") { @@ -149,22 +147,22 @@ var browseByVClass = { browseByVClass.individualsInVClass.append(listItem); }) - // set selected class, alpha and page + // Set selected class, alpha and page browseByVClass.selectedVClass(results.vclass.URI); browseByVClass.selectedAlpha(alpha); }); }, + // Toggle the active class so it's clear which is selected selectedVClass: function(vclassUri) { // Remove active class on all vClasses $('#browse-classes li a.selected').removeClass('selected'); - // Can't figure out why using this.selectedBrowseVClass doesn't work here - // this.selectedBrowseVClass.removeClass('selected'); // Add active class for requested vClass $('#browse-classes li a[data-uri="'+ vclassUri +'"]').addClass('selected'); }, + // Toggle the active letter so it's clear which is selected selectedAlpha: function(alpha) { // if no alpha argument sent, assume all if ( alpha == null ) { diff --git a/webapp/web/js/raphael/g.pie.js b/webapp/web/js/raphael/g.pie.js new file mode 100644 index 000000000..e9c937207 --- /dev/null +++ b/webapp/web/js/raphael/g.pie.js @@ -0,0 +1,205 @@ +/* + * 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/partials/menupage/menupage-scripts.ftl b/webapp/web/templates/freemarker/body/partials/menupage/menupage-scripts.ftl index 16cf88b29..035b3845b 100644 --- a/webapp/web/templates/freemarker/body/partials/menupage/menupage-scripts.ftl +++ b/webapp/web/templates/freemarker/body/partials/menupage/menupage-scripts.ftl @@ -21,12 +21,22 @@ template variable with the domain name for an AJAX request with visualizations. +<#-- classGroupIndividualCount is assigned in menupage-vClassesInClassGroup.ftl --> -${scripts.add("/js/menupage/browseByVClass.js")} \ No newline at end of file +<#-- Script to enable browsing individuals within a class --> +${scripts.add("/js/menupage/browseByVClass.js")} + +<#-- Scripts required to create the visual graphs --> +${scripts.add("/js/raphael/raphael.js", "/js/raphael/g.raphael.js", "/js/raphael/g.pie.js", "/js/browseClassGroupsPie.js")} \ No newline at end of file diff --git a/webapp/web/templates/freemarker/body/partials/menupage/menupage-vClassesInClassgroup.ftl b/webapp/web/templates/freemarker/body/partials/menupage/menupage-vClassesInClassgroup.ftl index 3a2661717..f4f1db777 100644 --- a/webapp/web/templates/freemarker/body/partials/menupage/menupage-vClassesInClassgroup.ftl +++ b/webapp/web/templates/freemarker/body/partials/menupage/menupage-vClassesInClassgroup.ftl @@ -7,6 +7,12 @@ <#list vClassGroup as vClass> <#-- Only display vClasses with individuals --> <#if (vClass.entityCount > 0)> + <#-- Calculate the individual count for the group since it's not currently provided to menu page templates --> + <#if !classGroupIndividualCount??> + <#assign classGroupIndividualCount = vClass.entityCount /> + <#else> + <#assign classGroupIndividualCount = classGroupIndividualCount + vClass.entityCount /> +
  • ${vClass.name} (${vClass.entityCount})