From a262180c95b14d067aa621a9a7c3a6d0576c52af Mon Sep 17 00:00:00 2001 From: ede0m Date: Mon, 31 Jul 2017 13:13:20 -0500 Subject: [PATCH 1/4] read in references to thumbnail for display ids. Passed as options in floodviz_onready --- floodviz/static/js/floodviz_onready.js | 3 +- floodviz/static/js/hydrograph.js | 561 +++++++++++++------------ floodviz/thumbnail/hydro_thumbnail.js | 248 ----------- floodviz/thumbnail/thumbnail.js | 21 +- 4 files changed, 296 insertions(+), 537 deletions(-) delete mode 100644 floodviz/thumbnail/hydro_thumbnail.js diff --git a/floodviz/static/js/floodviz_onready.js b/floodviz/static/js/floodviz_onready.js index f4a2648..1c61657 100644 --- a/floodviz/static/js/floodviz_onready.js +++ b/floodviz/static/js/floodviz_onready.js @@ -18,11 +18,12 @@ document.addEventListener('DOMContentLoaded', function (event) { var hydro_options = { 'height': FV.hydrograph_dimensions.height, 'width': FV.hydrograph_dimensions.width, + 'display_ids': FV.hydrograph_display_ids, 'div_id': '#hydrograph' }; var map_figure = FV.mapmodule(map_options); - var hydro_figure = FV.hydromodule(hydro_options); + var hydro_figure = hydromodule(hydro_options); // Use frames to link interactions var map_to_hydro = { diff --git a/floodviz/static/js/hydrograph.js b/floodviz/static/js/hydrograph.js index c45ca31..066d6d1 100644 --- a/floodviz/static/js/hydrograph.js +++ b/floodviz/static/js/hydrograph.js @@ -1,303 +1,308 @@ -(function () { - 'use strict'; - /** - * @param {Object} options - holds options for the configuration of the hydrograph - * Non-optional Keys include: - * @prop 'height' v(int) - height of the graph - * @prop 'width' v(int) - width of the graph - * @prop 'data' v(list) - A list of objects representing data points - * @prop 'div_id' v(string) - id for the container for this graph - * - * hydromodule is a module for creating hydrographs using d3. Pass it a javascript object - * specifying config options for the graph. Call init() to create the graph. Linked - * interaction functions for other figures should be passed to init in and object. - * - */ - FV.hydromodule = function (options) { - var self = {}; +'use strict'; +/** + * @param {Object} options - holds options for the configuration of the hydrograph + * Non-optional Keys include: + * @prop 'height' v(int) - height of the graph + * @prop 'width' v(int) - width of the graph + * @prop 'data' v(list) - A list of objects representing data points + * @prop 'div_id' v(string) - id for the container for this graph + * + * hydromodule is a module for creating hydrographs using d3. Pass it a javascript object + * specifying config options for the graph. Call init() to create the graph. Linked + * interaction functions for other figures should be passed to init in and object. + * + */ +var hydromodule = function (options) { - var default_display_ids = null; - var timer = null; - var dblclick_armed = false; + var self = {}; - var margin = {top: 60, right: 0, bottom: 30, left: 35}; - var height = 500 * (options.height / options.width) - margin.top - margin.bottom; - var width = 500 - margin.left - margin.right; + var default_display_ids = null; + var timer = null; + var dblclick_armed = false; - // Adds the svg canvas - var svg = null; - // Focus for hydrograph hover tooltip - var focus = null; - // Voronoi layer - var voronoi_group = null; - // Define the voronoi - var voronoi = d3.voronoi() - .x(function (d) { - return x(d.time_mili); - }) - .y(function (d) { - return y(d.value); - }) - .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]); - // Define the line - var line = d3.line() - .x(function (d) { - return x(d.time_mili); - }) - .y(function (d) { - return y(d.value); - }); - // Set the ranges - var x = d3.scaleTime().range([0, width]); - var y = d3.scaleLog().range([height, 0]); + var margin = {top: 60, right: 0, bottom: 30, left: 35}; + var height = 500 * (options.height / options.width) - margin.top - margin.bottom; + var width = 500 - margin.left - margin.right; - /** - * Filters a set of data based on the ids listed in display_ids - * @returns {Array} The entries of the original `data` whose `key` values are elements of display_ids. - */ - var subset_data = function (full_data) { - var toKeep = []; - full_data.forEach(function (d) { - if (FV.hydrograph_display_ids.indexOf(d.key) !== -1) { - toKeep.push(d); - } - }); - return toKeep; - }; + // Adds the svg canvas + var svg = null; + // Focus for hydrograph hover tooltip + var focus = null; + // Voronoi layer + var voronoi_group = null; + // Define the voronoi + var voronoi = d3.voronoi() + .x(function (d) { + return x(d.time_mili); + }) + .y(function (d) { + return y(d.value); + }) + .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]); + // Define the line + var line = d3.line() + .x(function (d) { + return x(d.time_mili); + }) + .y(function (d) { + return y(d.value); + }); + // Set the ranges + var x = d3.scaleTime().range([0, width]); + var y = d3.scaleLog().range([height, 0]); - /** - * De-emphasize all but one specified line - * @param exemptkey - The key of the one line that should not be de-emphasized - */ - var make_lines_bland = function (exemptkey){ - if(FV.hydrograph_display_ids.indexOf(exemptkey) !== -1) { - FV.hydrograph_display_ids.forEach(function (id) { - if (id !== exemptkey) { - d3.select('#hydro' + id).attr('class', 'hydro-inactive-bland'); - } - }) + /** + * Filters a set of data based on the ids listed in display_ids + * @returns {Array} The entries of the original `data` whose `key` values are elements of display_ids. + */ + var subset_data = function (full_data) { + var toKeep = []; + full_data.forEach(function (d) { + if (options.display_ids.indexOf(d.key) !== -1) { + toKeep.push(d); } - }; - + }); + return toKeep; + }; - /** - * Show only the default set of lines on the hydrograph. - */ - var reset_hydrograph = function () { - FV.hydrograph_display_ids.forEach(function (id) { - if (default_display_ids.indexOf(id) === -1) { - self.linked_interactions.click(id); + /** + * De-emphasize all but one specified line + * @param exemptkey - The key of the one line that should not be de-emphasized + */ + var make_lines_bland = function (exemptkey){ + if(options.display_ids.indexOf(exemptkey) !== -1) { + options.display_ids.forEach(function (id) { + if (id !== exemptkey) { + d3.select('#hydro' + id).attr('class', 'hydro-inactive-bland'); } - }); - default_display_ids.forEach(function(id){ - self.linked_interactions.accent_on_map(id); - }); - // use array.slice() with no parameters to deep copy - self.change_lines(default_display_ids.slice()); - }; + }) + } + }; + - /** - * - * Draws the svg, scales the range of the data, and draws the line for each site - * all based on the data set as it was passed in. Called as needed - * when data changes (as in removal of a line). - * - */ - var update = function () { - // Cut the data down to sites we want to display - var sub_data = subset_data(options.data); - // Remove the current version of the graph if one exists - var current_svg = d3.select(options.div_id + ' svg'); - if (current_svg) { - current_svg.remove(); + /** + * Show only the default set of lines on the hydrograph. + */ + var reset_hydrograph = function () { + options.display_ids.forEach(function (id) { + if (default_display_ids.indexOf(id) === -1) { + self.linked_interactions.click(id); } - // recreate svg - svg = d3.select(options.div_id) - .append('svg') - .attr("preserveAspectRatio", "xMinYMin meet") - .attr("viewBox", "0 0 " + (width + margin.left + margin.right ) + " " + (height + margin.top + margin.bottom )) - .append('g') - .attr('transform', - 'translate(' + margin.left + ',' + margin.top + ')'); + }); + default_display_ids.forEach(function(id){ + self.linked_interactions.accent_on_map(id); + }); + // use array.slice() with no parameters to deep copy + self.change_lines(default_display_ids.slice()); + }; - var graph_data = sub_data.map(function (d) { - return { - 'date': d.date, - 'key': d.key, - 'name': d.name, - 'time': d.time, - 'time_mili': d.time_mili, - 'timezone': d.timezone, - 'value': Number(d.value) - }; - }); + /** + * + * Draws the svg, scales the range of the data, and draws the line for each site + * all based on the data set as it was passed in. Called as needed + * when data changes (as in removal of a line). + * + */ + var update = function () { + // Cut the data down to sites we want to display + var sub_data = subset_data(options.data); + // Remove the current version of the graph if one exists + var current_svg = d3.select(options.div_id + ' svg'); + if (current_svg) { + current_svg.remove(); + } + // recreate svg + svg = d3.select(options.div_id) + .append('svg') + .attr("preserveAspectRatio", "xMinYMin meet") + .attr("viewBox", "0 0 " + (width + margin.left + margin.right ) + " " + (height + margin.top + margin.bottom )) + .append('g') + .attr('transform', + 'translate(' + margin.left + ',' + margin.top + ')'); - // Scale the range of the data - x.domain(d3.extent(graph_data, function (d) { - return d.time_mili; - })); - y.domain([d3.min(graph_data, function (d) { - return d.value; - }), d3.max(graph_data, function (d) { - return d.value; - })]); - // Nest the entries by site number - var dataNest = d3.nest() - .key(function (d) { - return d.key; - }) - .entries(graph_data); - // Loop through each symbol / key - dataNest.forEach(function (d) { - svg.append('g') - .attr('class', 'hydro-inactive') - .append('path') - .attr('id', 'hydro' + d.key) - .attr('d', line(d.values)); - }); - // Make transparent background for lines - svg.append('g') - .attr('id', 'hydro-background') - .append('rect') - .attr('x', 0) - .attr('y', 0) - .attr('height', height) - .attr('width', width) - .on('dblclick', function () { - reset_hydrograph(); - }); + var graph_data = sub_data.map(function (d) { + return { + 'date': d.date, + 'key': d.key, + 'name': d.name, + 'time': d.time, + 'time_mili': d.time_mili, + 'timezone': d.timezone, + 'value': Number(d.value) + }; + }); - // Add the X Axis + // Scale the range of the data + x.domain(d3.extent(graph_data, function (d) { + return d.time_mili; + })); + y.domain([d3.min(graph_data, function (d) { + return d.value; + }), d3.max(graph_data, function (d) { + return d.value; + })]); + // Nest the entries by site number + var dataNest = d3.nest() + .key(function (d) { + return d.key; + }) + .entries(graph_data); + // Loop through each symbol / key + dataNest.forEach(function (d) { svg.append('g') - .attr('class', 'axis') - .attr('transform', 'translate(0,' + height + ')') - .call(d3.axisBottom(x).tickFormat(d3.timeFormat('%B %e'))); + .attr('class', 'hydro-inactive') + .append('path') + .attr('id', 'hydro' + d.key) + .attr('d', line(d.values)); + }); + // Make transparent background for lines + svg.append('g') + .attr('id', 'hydro-background') + .append('rect') + .attr('x', 0) + .attr('y', 0) + .attr('height', height) + .attr('width', width) + .on('dblclick', function () { + reset_hydrograph(); + }); - // Add the Y Axis - svg.append('g') - .attr('class', 'axis') - .call(d3.axisLeft(y).ticks(10, '.0f')); + // Add the X Axis + svg.append('g') + .attr('class', 'axis') + .attr('transform', 'translate(0,' + height + ')') + .call(d3.axisBottom(x).tickFormat(d3.timeFormat('%B %e'))); - // Tooltip - focus = svg.append('g') - .attr('transform', 'translate(-100,-100)') - .attr('class', 'focus'); - focus.append('circle') - .attr('r', 3.5); + // Add the Y Axis + svg.append('g') + .attr('class', 'axis') + .call(d3.axisLeft(y).ticks(10, '.0f')); - focus.append('text') - .attr('y', -10); + // Tooltip + focus = svg.append('g') + .attr('transform', 'translate(-100,-100)') + .attr('class', 'focus'); + focus.append('circle') + .attr('r', 3.5); - // Voronoi Layer - voronoi_group = svg.append('g') - .attr('class', 'voronoi'); - voronoi_group.selectAll('path') - .data(voronoi.polygons(d3.merge(dataNest.map(function (d) { - return d.values - })))) - .enter().append('path') - .attr('d', function (d) { - return d ? 'M' + d.join('L') + 'Z' : null; - }) - .on('mouseover', function (d) { - self.linked_interactions.hover_in(d.data.name, d.data.key); - self.activate_line(d.data.key); - self.series_tooltip_show(d); - }) - .on('mouseout', function (d) { - self.linked_interactions.hover_out(); - self.deactivate_line(d.data.key); - self.series_tooltip_remove(d.data.key); - }) - .on('click', function (d) { - if (dblclick_armed) { - clearTimeout(timer); - reset_hydrograph(); - dblclick_armed = false; - } - else { - dblclick_armed = true; - timer = setTimeout(function () { - self.linked_interactions.click(d.data.key); - self.linked_interactions.hover_out(d.data.key); - self.remove_series(d.data.key); - dblclick_armed = false; - }, 200); - } - }); + focus.append('text') + .attr('y', -10); - }; + // Voronoi Layer + voronoi_group = svg.append('g') + .attr('class', 'voronoi'); + voronoi_group.selectAll('path') + .data(voronoi.polygons(d3.merge(dataNest.map(function (d) { + return d.values + })))) + .enter().append('path') + .attr('d', function (d) { + return d ? 'M' + d.join('L') + 'Z' : null; + }) + .on('mouseover', function (d) { + self.linked_interactions.hover_in(d.data.name, d.data.key); + self.activate_line(d.data.key); + self.series_tooltip_show(d); + }) + .on('mouseout', function (d) { + self.linked_interactions.hover_out(); + self.deactivate_line(d.data.key); + self.series_tooltip_remove(d.data.key); + }) + .on('click', function (d) { + if (dblclick_armed) { + clearTimeout(timer); + reset_hydrograph(); + dblclick_armed = false; + } + else { + dblclick_armed = true; + timer = setTimeout(function () { + self.linked_interactions.click(d.data.key); + self.linked_interactions.hover_out(d.data.key); + self.remove_series(d.data.key); + dblclick_armed = false; + }, 200); + } + }); - /** - * Initialize the Hydrograph. - * - *@param {Object} linked_interactions - Object holding functions that link to another figure's interactions. - * Pass null if there are no such interactions to link. - * @prop 'hover_in' - linked interaction function for hover_in events on this figure. - * @prop 'hover_out' - linked interaction function for hover_out events on this figure. - * @prop 'click' - linked interaction function for click events on this figure. - * - * - */ - self.init = function (linked_interactions) { - // use array.slice() to deep copy - default_display_ids = FV.hydrograph_display_ids.slice(); - self.linked_interactions = linked_interactions; - update(); - }; - /** - * Displays tooltip for hydrograph at a data point in addition to - * corresponding map site tooltip. - */ - self.series_tooltip_show = function (d) { - focus.attr('transform', 'translate(' + x(d.data.time_mili) + ',' + y(d.data.value) + ')'); - focus.select('text').html(d.data.key + ': ' + d.data.value + ' cfs ' + ' ' + d.data.time + ' ' + d.data.timezone); - }; + }; + /** + * Initialize the Hydrograph. + * + *@param {Object} linked_interactions - Object holding functions that link to another figure's interactions. + * Pass null if there are no such interactions to link. + * @prop 'hover_in' - linked interaction function for hover_in events on this figure. + * @prop 'hover_out' - linked interaction function for hover_out events on this figure. + * @prop 'click' - linked interaction function for click events on this figure. + * + * + */ + self.init = function (linked_interactions) { + // use array.slice() to deep copy + default_display_ids = options.display_ids.slice(); + self.linked_interactions = linked_interactions; + update(); + }; + /** + * Returns the svg element node. Primarily used for thumb-nailing. + */ + self.get_svg_elem = function () { + return d3.select(options.div_id); + }; + /** + * Displays tooltip for hydrograph at a data point in addition to + * corresponding map site tooltip. + */ + self.series_tooltip_show = function (d) { + focus.attr('transform', 'translate(' + x(d.data.time_mili) + ',' + y(d.data.value) + ')'); + focus.select('text').html(d.data.key + ': ' + d.data.value + ' cfs ' + ' ' + d.data.time + ' ' + d.data.timezone); + }; - /** - * Removes tooltip view from the hydrograph series - * as well as the correspond mapsite tooltip. - */ - self.series_tooltip_remove = function (sitekey) { - focus.attr('transform', 'translate(-100,-100)'); - }; + /** + * Removes tooltip view from the hydrograph series + * as well as the correspond mapsite tooltip. + */ + self.series_tooltip_remove = function (sitekey) { + focus.attr('transform', 'translate(-100,-100)'); + }; - /** - * Removes a line from the hydrograph. This resizes data - * appropriately and removes accents from the corresponding - * site on the map. - */ - self.remove_series = function (sitekey) { - var keep_ids = FV.hydrograph_display_ids; - keep_ids.splice(FV.hydrograph_display_ids.indexOf(sitekey), 1); - self.change_lines(keep_ids); - }; - /** - * Update the value of display_ids and call update to redraw the graph to match. - * @param new_display_ids The new set of gages to be displayed. - */ - self.change_lines = function (new_display_ids) { - FV.hydrograph_display_ids = new_display_ids; - update(); - }; - /** - * Highlight a line, de-emphasize all other lines - * @param sitekey the site number of the line to be highlighted - */ - self.activate_line = function (sitekey) { - make_lines_bland(sitekey); - d3.select('#hydro' + sitekey).attr('class', 'hydro-active'); - }; - /** - * Set all lines to inactive - */ - self.deactivate_line = function () { - FV.hydrograph_display_ids.forEach(function(id) { - d3.select('#hydro' + id).attr('class', 'hydro-inactive'); - }) + /** + * Removes a line from the hydrograph. This resizes data + * appropriately and removes accents from the corresponding + * site on the map. + */ + self.remove_series = function (sitekey) { + var keep_ids = options.display_ids; + keep_ids.splice(options.display_ids.indexOf(sitekey), 1); + self.change_lines(keep_ids); + }; + /** + * Update the value of display_ids and call update to redraw the graph to match. + * @param new_display_ids The new set of gages to be displayed. + */ + self.change_lines = function (new_display_ids) { + options.display_ids = new_display_ids; + update(); + }; + /** + * Highlight a line, de-emphasize all other lines + * @param sitekey the site number of the line to be highlighted + */ + self.activate_line = function (sitekey) { + make_lines_bland(sitekey); + d3.select('#hydro' + sitekey).attr('class', 'hydro-active'); + }; + /** + * Set all lines to inactive + */ + self.deactivate_line = function () { + options.display_ids.forEach(function(id) { + d3.select('#hydro' + id).attr('class', 'hydro-inactive'); + }) - }; - return self }; -}()); + + return self +} diff --git a/floodviz/thumbnail/hydro_thumbnail.js b/floodviz/thumbnail/hydro_thumbnail.js deleted file mode 100644 index 157862e..0000000 --- a/floodviz/thumbnail/hydro_thumbnail.js +++ /dev/null @@ -1,248 +0,0 @@ - -'use strict'; -/** - * @param {Object} options - holds options for the configuration of the hydrograph - * Non-optional Keys include: - * @prop 'height' v(int) - height of the graph - * @prop 'width' v(int) - width of the graph - * @prop 'data' v(list) - A list of objects representing data points - * @prop 'div_id' v(string) - id for the container for this graph - * - * hydromodule is a module for creating hydrographs using d3. Pass it a javascript object - * specifying config options for the graph. Call init() to create the graph. Linked - * interaction functions for other figures should be passed to init in and object. - * - */ -var hydromodule = function (options) { - - var self = {}; - - var margin = {top: 30, right: 20, bottom: 30, left: 50}; - var height = options.height - margin.top - margin.bottom; - var width = options.width - margin.left - margin.right; - - // Adds the svg canvas - var svg = null; - // Focus for hydrograph hover tooltip - var focus = null; - // Voronoi layer - var voronoi_group = null; - // Define the voronoi - var voronoi = d3.voronoi() - .x(function (d) { - return x(d.time_mili); - }) - .y(function (d) { - return y(d.value); - }) - .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.bottom]]); - // Define the line - var line = d3.line() - .x(function (d) { - return x(d.time_mili); - }) - .y(function (d) { - return y(d.value); - }); - // Set the ranges - var x = d3.scaleTime().range([0, width]); - var y = d3.scaleLog().range([height, 0]); - - /** - * Filters a set of data based on the ids listed in display_ids - * @returns {Array} The entries of the original `data` whose `key` values are elements of display_ids. - */ - var subset_data = function (full_data) { - var toKeep = []; - full_data.forEach(function (d) { - if (options.display_ids.indexOf(d.key) !== -1) { - toKeep.push(d); - } - }); - return toKeep; - }; - /** - * - * Draws the svg, scales the range of the data, and draws the line for each site - * all based on the data set as it was passed in. Called as needed - * when data changes (as in removal of a line). - * - */ - var update = function () { - - // Cut the data down to sites we want to display - var sub_data = subset_data(options.data); - // Remove the current version of the graph if one exists - var current_svg = d3.select(options.div_id + ' svg'); - if (current_svg) { - current_svg.remove(); - } - // recreate svg - svg = d3.select(options.div_id) - .append('svg') - .attr('width', width + margin.left + margin.right) - .attr('height', height + margin.top + margin.bottom) - .append('g') - .attr('transform', - 'translate(' + margin.left + ',' + margin.top + ')'); - - var graph_data = sub_data.map(function (d) { - return { - 'date': d.date, - 'key': d.key, - 'name': d.name, - 'time': d.time, - 'time_mili': d.time_mili, - 'timezone': d.timezone, - 'value': Number(d.value) - }; - }); - - // Scale the range of the data - x.domain(d3.extent(graph_data, function (d) { - return d.time_mili; - })); - y.domain([d3.min(graph_data, function (d) { - return d.value; - }), d3.max(graph_data, function (d) { - return d.value; - })]); - // Nest the entries by site number - var dataNest = d3.nest() - .key(function (d) { - return d.key; - }) - .entries(graph_data); - // Loop through each symbol / key - dataNest.forEach(function (d) { - svg.append('g') - .attr('class', 'hydro-inactive') - .append('path') - .attr('id', 'hydro' + d.key) - .attr('d', line(d.values)); - console.log('Here IN DATANEST'); - }); - // Add the X Axis - svg.append('g') - .attr('class', 'axis') - .attr('transform', 'translate(0,' + height + ')') - .call(d3.axisBottom(x).tickFormat(d3.timeFormat('%B %e'))); - - // Add the Y Axis - svg.append('g') - .attr('class', 'axis') - .call(d3.axisLeft(y).ticks(10, '.0f')); - - // Tooltip - focus = svg.append('g') - .attr('transform', 'translate(-100,-100)') - .attr('class', 'focus'); - focus.append('circle') - .attr('r', 3.5); - - focus.append('text') - .attr('y', -10); - - // Voronoi Layer - voronoi_group = svg.append('g') - .attr('class', 'voronoi'); - voronoi_group.selectAll('path') - .data(voronoi.polygons(d3.merge(dataNest.map(function (d) { - return d.values - })))) - .enter().append('path') - .attr('d', function (d) { - return d ? 'M' + d.join('L') + 'Z' : null; - }) - .on('mouseover', function (d) { - self.linked_interactions.hover_in(d.data.name, d.data.key); - self.activate_line(d.data.key); - self.series_tooltip_show(d); - }) - .on('mouseout', function (d) { - self.linked_interactions.hover_out(); - self.deactivate_line(d.data.key); - self.series_tooltip_remove(d.data.key); - }) - .on('click', function (d) { - self.linked_interactions.click(d.data.key); - self.remove_series(d.data.key); - }); - - }; - - /** - * Initialize the Hydrograph. - * - *@param {Object} linked_interactions - Object holding functions that link to another figure's interactions. - * Pass null if there are no such interactions to link. - * @prop 'hover_in' - linked interaction function for hover_in events on this figure. - * @prop 'hover_out' - linked interaction function for hover_out events on this figure. - * @prop 'click' - linked interaction function for click events on this figure. - * - * - */ - self.init = function (linked_interactions) { - self.linked_interactions = linked_interactions; - update(); - return self; - }; - - /** - * Returns the svg element node. Primarily used for thumb-nailing. - */ - self.get_svg_elem = function () { - return d3.select(options.div_id); - }; - /** - * Displays tooltip for hydrograph at a data point in addition to - * corresponding map site tooltip. - */ - self.series_tooltip_show = function (d) { - focus.attr('transform', 'translate(' + x(d.data.time_mili) + ',' + y(d.data.value) + ')'); - focus.select('text').html(d.data.key + ': ' + d.data.value + ' cfs ' + ' ' + d.data.time + ' ' + d.data.timezone); - }; - - /** - * Removes tooltip view from the hydrograph series - * as well as the correspond mapsite tooltip. - */ - self.series_tooltip_remove = function (sitekey) { - focus.attr('transform', 'translate(-100,-100)'); - }; - - /** - * Removes a line from the hydrograph. This resizes data - * appropriately and removes accents from the corresponding - * site on the map. - */ - self.remove_series = function (sitekey) { - var keep_ids = FV.hydrograph_display_ids; - keep_ids.splice(FV.hydrograph_display_ids.indexOf(sitekey), 1); - self.change_lines(keep_ids); - }; - /** - * Update the value of display_ids and call update to redraw the graph to match. - * @param new_display_ids The new set of gages to be displayed. - */ - self.change_lines = function (new_display_ids) { - FV.hydrograph_display_ids = new_display_ids; - update(); - }; - /** - * Highlight a line. - * @param sitekey the site number of the line to be highlighted - */ - self.activate_line = function (sitekey) { - d3.select('#hydro' + sitekey).attr('class', 'hydro-active'); - }; - /** - * Un-highlight a line - * @param sitekey the site number of the line to be un-highlighted - */ - self.deactivate_line = function (sitekey) { - d3.select('#hydro' + sitekey).attr('class', 'hydro-inactive'); - }; - - return self -}; \ No newline at end of file diff --git a/floodviz/thumbnail/thumbnail.js b/floodviz/thumbnail/thumbnail.js index 6eb5215..e773938 100644 --- a/floodviz/thumbnail/thumbnail.js +++ b/floodviz/thumbnail/thumbnail.js @@ -15,6 +15,7 @@ var jsdom = require('jsdom/lib/old-api.js'); var svg2png = require('svg2png'); // Data imports var data_hydro = require('../thumbnail/hydrograph_data.json'); +var reference = require('../../examples/reference.json'); // Collect script arguments for external css var style_path = null; @@ -24,11 +25,13 @@ if (args.length > 2) { '\n\nOptional flag: -css path/to/css/file.css\n'); process.exit(); } else { - if (args[0] === '-css') { - style_path = args[1]; - } else { - console.log('\nUnrecognized argument: ' + args[0] + '\n'); - process.exit(); + if (args[0]) { + if (args[0] === '-css') { + style_path = args[1]; + } else { + console.log('\nUnrecognized argument: ' + args[0] + '\n'); + process.exit(); + } } } @@ -44,7 +47,7 @@ jsdom.env( [ './floodviz/static/bower_components/d3/d3.js', './floodviz/static/bower_components/proj4/dist/proj4.js', - './floodviz/thumbnail/hydro_thumbnail.js' + './floodviz/static/js/hydrograph.js' ], function (err, window) { @@ -54,9 +57,7 @@ jsdom.env( 'width': 560, 'div_id': '#hydrograph', 'data': data_hydro, - "display_ids": ['05471200', '05476750', '05411850', '05454220', - '05481950', '05416900', '05464500', '05487470'] - // Refactor Later. I'm assuming this will change with references.json + "display_ids": reference.display_sites } ); convert(hydro_figure,window, 'floodviz/static/css/hydrograph.css', 'floodviz/thumbnail/thumbnail_hydro.png'); @@ -82,7 +83,7 @@ function convert(figure, window, css_path, filename) { svg_string = inject_style(style_default, null, svg, window); } // Takes care of canvas conversion and encodes base64 - svg2png(svg_string) + svg2png(svg_string, {height: 300, width: 560}) .then(buffer => fs.writeFile(filename, buffer)) .then(console.log('\nConverted D3 figure to PNG successfully... \n')) .catch(e => console.error(e)); From 33e572dbf2ce36d182ebeab1ea5311b601928a64 Mon Sep 17 00:00:00 2001 From: ede0m Date: Mon, 31 Jul 2017 13:58:15 -0500 Subject: [PATCH 2/4] varible simplification --- floodviz/thumbnail/thumbnail.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/floodviz/thumbnail/thumbnail.js b/floodviz/thumbnail/thumbnail.js index e773938..97f2cd7 100644 --- a/floodviz/thumbnail/thumbnail.js +++ b/floodviz/thumbnail/thumbnail.js @@ -35,6 +35,10 @@ if (args.length > 2) { } } +var height = 300; +var width = 560; + + // Headless Browser Start for DOM jsdom.env( @@ -53,8 +57,8 @@ jsdom.env( function (err, window) { var hydro_figure = window.hydromodule( { - 'height': 300, - 'width': 560, + 'height': height, + 'width': width, 'div_id': '#hydrograph', 'data': data_hydro, "display_ids": reference.display_sites @@ -83,7 +87,7 @@ function convert(figure, window, css_path, filename) { svg_string = inject_style(style_default, null, svg, window); } // Takes care of canvas conversion and encodes base64 - svg2png(svg_string, {height: 300, width: 560}) + svg2png(svg_string, {height: height, width: width}) .then(buffer => fs.writeFile(filename, buffer)) .then(console.log('\nConverted D3 figure to PNG successfully... \n')) .catch(e => console.error(e)); From ba2d50ea7456eac5b3169a7f7c6e33f0c0780b8c Mon Sep 17 00:00:00 2001 From: ede0m Date: Tue, 1 Aug 2017 11:04:18 -0500 Subject: [PATCH 3/4] pass data to init. Removed some uncessary dependenceis. comments --- floodviz/static/js/floodviz_onready.js | 3 +- floodviz/static/js/hydrograph.js | 8 ++++-- floodviz/thumbnail/thumbnail.js | 38 +++++++++++--------------- 3 files changed, 22 insertions(+), 27 deletions(-) diff --git a/floodviz/static/js/floodviz_onready.js b/floodviz/static/js/floodviz_onready.js index 1c61657..02d5f93 100644 --- a/floodviz/static/js/floodviz_onready.js +++ b/floodviz/static/js/floodviz_onready.js @@ -42,7 +42,6 @@ document.addEventListener('DOMContentLoaded', function (event) { //data for hydrograph d3.json(FV.hydrograph_data_path, function (error, data) { if (error) { console.error(error); } - hydro_options['data'] = data; - hydro_figure.init(map_to_hydro); + hydro_figure.init(map_to_hydro, data); }); }); \ No newline at end of file diff --git a/floodviz/static/js/hydrograph.js b/floodviz/static/js/hydrograph.js index 066d6d1..7302638 100644 --- a/floodviz/static/js/hydrograph.js +++ b/floodviz/static/js/hydrograph.js @@ -5,8 +5,8 @@ * Non-optional Keys include: * @prop 'height' v(int) - height of the graph * @prop 'width' v(int) - width of the graph - * @prop 'data' v(list) - A list of objects representing data points * @prop 'div_id' v(string) - id for the container for this graph + * @prop 'display_ids' v(list) - default series to show on hydrograph * * hydromodule is a module for creating hydrographs using d3. Pass it a javascript object * specifying config options for the graph. Call init() to create the graph. Linked @@ -16,6 +16,7 @@ var hydromodule = function (options) { var self = {}; + var data_global = null; var default_display_ids = null; var timer = null; @@ -106,7 +107,7 @@ var hydromodule = function (options) { */ var update = function () { // Cut the data down to sites we want to display - var sub_data = subset_data(options.data); + var sub_data = subset_data(data_global); // Remove the current version of the graph if one exists var current_svg = d3.select(options.div_id + ' svg'); if (current_svg) { @@ -239,7 +240,8 @@ var hydromodule = function (options) { * * */ - self.init = function (linked_interactions) { + self.init = function (linked_interactions, data) { + data_global = data; // use array.slice() to deep copy default_display_ids = options.display_ids.slice(); self.linked_interactions = linked_interactions; diff --git a/floodviz/thumbnail/thumbnail.js b/floodviz/thumbnail/thumbnail.js index 97f2cd7..e7862c1 100644 --- a/floodviz/thumbnail/thumbnail.js +++ b/floodviz/thumbnail/thumbnail.js @@ -5,9 +5,8 @@ * Its main objective is to dynamically create thumbnails for the site figures * based on the data obtained from our server side flask services. * -* */ - - +* +*/ // Dependency Import var fs = require('fs'); @@ -15,11 +14,12 @@ var jsdom = require('jsdom/lib/old-api.js'); var svg2png = require('svg2png'); // Data imports var data_hydro = require('../thumbnail/hydrograph_data.json'); -var reference = require('../../examples/reference.json'); +var reference = require('../../instance/reference.json'); // Collect script arguments for external css -var style_path = null; +var style_ext = null; var args = process.argv.splice(process.execArgv.length + 2); + if (args.length > 2) { console.log('\nUsage: node thumbnail.js ' + '\n\nOptional flag: -css path/to/css/file.css\n'); @@ -27,9 +27,16 @@ if (args.length > 2) { } else { if (args[0]) { if (args[0] === '-css') { - style_path = args[1]; + try { + style_ext = fs.readFileSync(args[1], 'utf8'); + } catch(error) { + console.log('\nError: external css file path not found. - Using only default style.\n\n' + error); + style_ext = null; + } } else { - console.log('\nUnrecognized argument: ' + args[0] + '\n'); + console.log('\nUnrecognized argument: ' + args[0]); + console.log('\nUsage: node thumbnail.js ' + + '\n\nOptional flag: -css path/to/css/file.css\n'); process.exit(); } } @@ -44,13 +51,11 @@ jsdom.env( // create DOM hook "
" + - "
" + "", // load local assets into window environment [ './floodviz/static/bower_components/d3/d3.js', - './floodviz/static/bower_components/proj4/dist/proj4.js', './floodviz/static/js/hydrograph.js' ], @@ -60,7 +65,6 @@ jsdom.env( 'height': height, 'width': width, 'div_id': '#hydrograph', - 'data': data_hydro, "display_ids": reference.display_sites } ); @@ -74,18 +78,8 @@ function convert(figure, window, css_path, filename) { var svg_string = null; var svg = figure.get_svg_elem().node(); var style_default = fs.readFileSync(css_path, 'utf8'); - figure.init(); - if (style_path !== null) { - try { - style_ext = fs.readFileSync(style_path, 'utf8'); - } catch(error) { - console.log('\nError: external css file path not found.\nUsing only default style.\n\n' + error); - style_ext = null; - } - svg_string = inject_style(style_default, style_ext, svg, window); - } else { - svg_string = inject_style(style_default, null, svg, window); - } + figure.init(null, data_hydro); + svg_string = inject_style(style_default, style_ext, svg, window); // Takes care of canvas conversion and encodes base64 svg2png(svg_string, {height: height, width: width}) .then(buffer => fs.writeFile(filename, buffer)) From 5ca24c3bc53e197c65cc5dd01c16a56fd67e917b Mon Sep 17 00:00:00 2001 From: ede0m Date: Tue, 1 Aug 2017 13:15:00 -0500 Subject: [PATCH 4/4] comment --- floodviz/static/js/hydrograph.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/floodviz/static/js/hydrograph.js b/floodviz/static/js/hydrograph.js index 7302638..e8a0901 100644 --- a/floodviz/static/js/hydrograph.js +++ b/floodviz/static/js/hydrograph.js @@ -238,6 +238,8 @@ var hydromodule = function (options) { * @prop 'hover_out' - linked interaction function for hover_out events on this figure. * @prop 'click' - linked interaction function for click events on this figure. * + *@param {array} data - times series data for the hydrograph. Each element is an object representing a data point. + * * */ self.init = function (linked_interactions, data) {