opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4967 from dannon/fix-admin-panel

Browse Source 
Fix up reports javascript
This commit is contained in:
Martin Cech
2017-11-09 11:42:06 -05:00
committed by GitHub
parent 76d4afe3a6 eac8573a3c
commit 0a3b525543
4 changed files with 65 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/galaxy/scripts/reports_webapp/run_stats.js
+56 -58
View File
@@ -1,6 +1,5 @@
function days_in_month(month, year) {
return new Date(year, month, 0).getDate();
}
import * as d3 from "../libs/d3";
import { event as currentEvent } from "../libs/d3";
function date_by_subtracting_days(date, days) {
return new Date(
@@ -32,27 +31,22 @@ function get_utc_time_hours() {
return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), 0, 0);
}
// Refreshes the page for more up to date information
function refresh() {
window.location.reload(true);
}
// This is commented out until we make Reports more responsive.
// setTimeout(refresh, 60000); //1 minute = 60000 ms
function create_chart(inp_data, name, time, title) {
export function create_chart(inp_data, name, time, title) {
// Initialize starting variables
var data = inp_data;
var hours_array = [];
var now = get_utc_time_hours();
for (var i = 0; i < 24; i++) {
var i;
for (i = 0; i < 24; i++) {
hours_array.push(date_by_subtracting_hours(now, i));
}
var days_array = [];
var now = get_utc_time_hours();
for (var i = 0; i < 30; i++) {
for (i = 0; i < 30; i++) {
days_array.push(date_by_subtracting_days(now, i));
}
@@ -68,10 +62,11 @@ function create_chart(inp_data, name, time, title) {
var chart_zoom = 1.75;
var height = 150;
if (d3.max(data) != 0) {
var zoom = height / d3.max(data);
var zoom;
if (d3.max(data) !== 0) {
zoom = height / d3.max(data);
} else {
var zoom = 1.0;
zoom = 1.0;
}
var chart_height = height + margin.top + margin.bottom;
@@ -117,7 +112,7 @@ function create_chart(inp_data, name, time, title) {
.append("g")
.attr("transform", (d, i) => {
// Place the bar in the correct place
var curr_margin = +margin.left;
var curr_margin = margin.left;
curr_margin += +(i * barWidth);
return `translate(${curr_margin},${margin.top})`;
})
@@ -133,20 +128,20 @@ function create_chart(inp_data, name, time, title) {
var wdth = i * 4 + 10;
d3
.select(d3.event.path[1])
.select(currentEvent.target.parentElement)
.select(".tool_tip")
.select("text")
.attr("transform", `translate( ${margin.left - 5}, ${height - d * zoom + +margin.top + 10} )`)
.attr("transform", `translate( ${margin.left - 5}, ${height - d * zoom + margin.top + 10} )`)
.attr("visibility", "visible")
.text(d);
d3
.select(d3.event.path[1])
.select(currentEvent.target.parentElement)
.select(".tool_tip")
.attr("width", `${wdth}px`)
.attr("height", "15px")
.select("rect")
.attr("transform", `translate( ${+margin.left - wdth}, ${height - d * zoom + +margin.top} )`)
.attr("transform", `translate( ${margin.left - wdth}, ${height - d * zoom + margin.top} )`)
.attr("width", `${wdth}px`)
.attr("height", "15px")
.attr("fill", "#ebd9b2");
@@ -154,13 +149,13 @@ function create_chart(inp_data, name, time, title) {
.on("mouseleave", d => {
// Remove tool tip
d3
.select(d3.event.path[1])
.select(currentEvent.target.parentElement)
.select(".tool_tip")
.select("text")
.attr("visibility", "hidden");
d3
.select(d3.event.path[1])
.select(currentEvent.target.parentElement)
.select(".tool_tip")
.select("rect")
.attr("width", "0")
@@ -175,7 +170,7 @@ function create_chart(inp_data, name, time, title) {
.append("text")
.attr("class", "title")
.attr("text-anchor", "end")
.attr("transform", e => `translate( ${width},15 )`)
.attr("transform", () => `translate( ${width},15 )`)
.text(title);
// Add an x axis line to the chart
@@ -184,9 +179,9 @@ function create_chart(inp_data, name, time, title) {
.attr("class", "axis")
.append("path")
.attr("class", "x")
.attr("d", d => {
.attr("d", () => {
var m_x = margin.left;
var m_y = +margin.top + height;
var m_y = margin.top + height;
var l_x = m_x + width;
var l_y = m_y;
@@ -218,10 +213,10 @@ function create_chart(inp_data, name, time, title) {
.append("g")
.append("text")
.attr("class", "ax_title")
.attr("transform", e => {
.attr("transform", () => {
var axis = d3.select(`#y_${name}`).node();
var left_pad = +margin.left - axis.getBoundingClientRect().width - 5;
var top_pad = +margin.top + axis.getBoundingClientRect().height / 2 - 30;
var left_pad = margin.left - axis.getBoundingClientRect().width - 5;
var top_pad = margin.top + axis.getBoundingClientRect().height / 2 - 30;
var trans = `translate(${left_pad},${top_pad})rotate(-90)`;
return trans;
@@ -235,6 +230,8 @@ function create_chart(inp_data, name, time, title) {
.attr("height", d => d * zoom)
.attr("width", barWidth - 1);
var first = false;
// Append x axis
if (time == "hours") {
// Append hour lines
@@ -247,7 +244,7 @@ function create_chart(inp_data, name, time, title) {
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("pointer-events", "none")
.attr("transform", (d, i) => `translate( ${barWidth / 2}, ${height})`);
.attr("transform", () => `translate( ${barWidth / 2}, ${height})`);
// Append hour numbers
bar
@@ -268,7 +265,7 @@ function create_chart(inp_data, name, time, title) {
// Append day lines
var curr_day = "";
var first = false;
first = false;
bar
.append("line")
.attr("x1", 0)
@@ -293,11 +290,11 @@ function create_chart(inp_data, name, time, title) {
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("pointer-events", "none")
.attr("transform", (d, i) => `translate( 0, ${height})`);
.attr("transform", () => `translate( 0, ${height})`);
// Append day numbers
curr_day = "";
curr_day_text = "";
var curr_day_text = "";
first = false;
bar
.append("text")
@@ -347,7 +344,7 @@ function create_chart(inp_data, name, time, title) {
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("pointer-events", "none")
.attr("transform", (d, i) => `translate( ${barWidth / 2}, ${height})`);
.attr("transform", () => `translate( ${barWidth / 2}, ${height})`);
// Append day numbers
bar
@@ -368,7 +365,7 @@ function create_chart(inp_data, name, time, title) {
// Append month lines
var curr_month = "";
var first = false;
first = false;
bar
.append("line")
.attr("x1", 0)
@@ -393,11 +390,11 @@ function create_chart(inp_data, name, time, title) {
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("pointer-events", "none")
.attr("transform", (d, i) => `translate( 0, ${height})`);
.attr("transform", () => `translate( 0, ${height})`);
// Append month numbers
curr_month = "";
curr_month_text = "";
var curr_month_text = "";
first = false;
bar
.append("text")
@@ -457,7 +454,7 @@ function create_chart(inp_data, name, time, title) {
//============================================================================================================
function create_histogram(inp_data, name, title) {
export function create_histogram(inp_data, name, title) {
// Initialize initial variables
// inp_data is an array of numbers that are the amount of minutes per run
var data = inp_data;
@@ -479,7 +476,7 @@ function create_histogram(inp_data, name, title) {
.range([0, width]);
// Generate a histogram using twenty uniformly-spaced bins.
var data = d3.layout.histogram().bins(x.ticks(20))(data);
data = d3.layout.histogram().bins(x.ticks(20))(data);
// Create an array of the sizes of the bars
var lengths = [];
@@ -487,11 +484,12 @@ function create_histogram(inp_data, name, title) {
lengths.push(data[i].length);
}
var zoom;
// Find the amount needed to magnify the bars
if (d3.max(data) != 0) {
var zoom = height / d3.max(lengths);
if (d3.max(data) !== 0) {
zoom = height / d3.max(lengths);
} else {
var zoom = 1.0;
zoom = 1.0;
}
// Create y axis metadata
@@ -552,7 +550,7 @@ function create_histogram(inp_data, name, title) {
.append("g")
.append("text")
.attr("class", "title")
.attr("transform", e => `translate( ${width},15 )`)
.attr("transform", () => `translate( ${width},15 )`)
.text(title);
// Put bars on chart
@@ -562,7 +560,7 @@ function create_histogram(inp_data, name, title) {
.enter()
.append("g")
.attr("class", "bar")
.attr("transform", d => `translate(${+x(d.x) + +margin.left},${+y(d.y) + +margin.top})`)
.attr("transform", d => `translate(${+x(d.x) + margin.left},${+y(d.y) + margin.top})`)
.on("mouseenter", d => {
// Show tool tip
var i = 0;
@@ -575,34 +573,34 @@ function create_histogram(inp_data, name, title) {
}
var wdth = i * 4 + 10;
d3
.select(d3.event.path[1])
.select(currentEvent.target.parentElement)
.select(".tool_tip")
.select("text")
.attr("transform", `translate( ${margin.left - 5}, ${height - d.length * zoom + +margin.top + 10} )`)
.attr("transform", `translate( ${margin.left - 5}, ${height - d.length * zoom + margin.top + 10} )`)
.attr("visibility", "visible")
.text(d.length);
d3
.select(d3.event.path[1])
.select(currentEvent.target.parentElement)
.select(".tool_tip")
.attr("width", `${wdth}px`)
.attr("height", "15px")
.select("rect")
.attr("transform", `translate( ${+margin.left - wdth}, ${height - d.length * zoom + +margin.top} )`)
.attr("transform", `translate( ${margin.left - wdth}, ${height - d.length * zoom + margin.top} )`)
.attr("width", `${wdth}px`)
.attr("height", "15px")
.attr("fill", "#ebd9b2");
})
.on("mouseleave", d => {
.on("mouseleave", () => {
// Remove tool tip
d3
.select(d3.event.path[1])
.select(currentEvent.target.parentElement)
.select(".tool_tip")
.select("text")
.attr("visibility", "hidden");
d3
.select(d3.event.path[1])
.select(currentEvent.target.parentElement)
.select(".tool_tip")
.select("rect")
.attr("width", "0")
@@ -612,7 +610,7 @@ function create_histogram(inp_data, name, title) {
// Create bar width
var bar_x;
if (data[0] == undefined) {
if (data[0] === undefined) {
bar_x = 1;
} else {
bar_x = x(data[0].dx);
@@ -637,7 +635,7 @@ function create_histogram(inp_data, name, title) {
.append("g")
.attr("class", "x axis")
.attr("id", `x_${name}`)
.attr("transform", `translate( ${margin.left},${+height + +margin.top})`)
.attr("transform", `translate( ${margin.left},${+height + margin.top})`)
.call(xAxis);
// Add a title to the x axis
@@ -645,10 +643,10 @@ function create_histogram(inp_data, name, title) {
.append("g")
.append("text")
.attr("class", "ax_title")
.attr("transform", e => {
.attr("transform", () => {
var axis = d3.select(`#x_${name}`).node();
var left_pad = +margin.left + axis.getBoundingClientRect().width / 2 + 30;
var top_pad = +margin.top + height + axis.getBoundingClientRect().height + 10;
var left_pad = margin.left + axis.getBoundingClientRect().width / 2 + 30;
var top_pad = margin.top + height + axis.getBoundingClientRect().height + 10;
var trans = `translate(${left_pad},${top_pad})`;
return trans;
@@ -674,10 +672,10 @@ function create_histogram(inp_data, name, title) {
.append("g")
.append("text")
.attr("class", "ax_title")
.attr("transform", e => {
.attr("transform", () => {
var axis = d3.select(`#y_${name}`).node();
var left_pad = +margin.left - axis.getBoundingClientRect().width - 5;
var top_pad = +margin.top + axis.getBoundingClientRect().height / 2 - 30;
var left_pad = margin.left - axis.getBoundingClientRect().width - 5;
var top_pad = margin.top + axis.getBoundingClientRect().height / 2 - 30;
var trans = `translate(${left_pad},${top_pad})rotate(-90)`;
return trans;
static/maps/reports_webapp/run_stats.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
static/scripts/reports_webapp/run_stats.js
+1 -1
View File
File diff suppressed because one or more lines are too long
templates/webapps/reports/run_stats.mako
+7 -9
View File
@@ -2,18 +2,16 @@
<%namespace file="/message.mako" import="render_msg" />
<%def name="javascripts()">
${h.js("libs/d3")}
${parent.javascripts()}
<script type="text/javascript" src="${h.url_for('/static/scripts/reports_webapp/run_stats.js')}"></script>
<script type="text/javascript">
$(document).ready( function(e) {
create_chart(${jf_hr_data}, "jf_hr_chart", "hours", "Jobs Finished per Hour");
create_chart(${jf_dy_data}, "jf_dy_chart", "days", "Jobs Finished per Day");
create_chart(${jc_hr_data}, "jc_hr_chart", "hours", "Jobs Created per Hour");
create_chart(${jc_dy_data}, "jc_dy_chart", "days", "Jobs Created per Day");
create_histogram(${et_hr_data}, "et_hr_chart", "Job Run Times (past day)");
create_histogram(${et_dy_data}, "et_dy_chart", "Job Run Time (past 30 days)");
require(['reports_webapp/run_stats'], function(run_stats){
run_stats.create_chart(${jf_hr_data}, "jf_hr_chart", "hours", "Jobs Finished per Hour");
run_stats.create_chart(${jf_dy_data}, "jf_dy_chart", "days", "Jobs Finished per Day");
run_stats.create_chart(${jc_hr_data}, "jc_hr_chart", "hours", "Jobs Created per Hour");
run_stats.create_chart(${jc_dy_data}, "jc_dy_chart", "days", "Jobs Created per Day");
run_stats.create_histogram(${et_hr_data}, "et_hr_chart", "Job Run Times (past day)");
run_stats.create_histogram(${et_dy_data}, "et_dy_chart", "Job Run Time (past 30 days)");
});
</script>
</%def>