| // TODO: |
| // 1. auto-resizing graph, change the axis range |
| // 2. set axis range, set title |
| // 4. show coordinate |
| // 6. fix the offline plotter |
| |
| // Error msg: |
| var maxPlotsAllowed = 20; |
| errMsg = {ENUMPLOTS: 'More than'+maxPlotsAllowed+' will be generated.\n' |
| +'Please consider adding filters or geometric mean / legend to ' |
| +'reduce the number of plots!\n' |
| +'Current plotting aborted' }; |
| |
| // Some const |
| // if x axis is an element of timeParam, then the default behavior is to gmean everything |
| var timeParam = ['run', 'parsed_date']; |
| var unixEpoch = ['parsed_date']; |
| var defaultGmean = 'circuit'; |
| // the value for invalid y. these will be eliminated by the plotter |
| var invalidY = -1; |
| // create the actual plot in the display_canvas |
| // |
| var overlay_list = []; |
| var gmean_list = []; |
| // raw data means it is not processed by gmean, and its param name has not been manipulated. |
| // NOTE: we don't store the data of default plot (cuz they are not manipulated) |
| var raw_data = null; |
| // store data after gmean |
| // each task has a folder, each plot has a subfolder, each line has a file (containing only x and y) |
| // {task: {plot: {line: [[x, y]]}}} |
| var manipulatedData = null; |
| var gmean_data = null; |
| var range = []; |
| // xNameMap is only set when value in x axis is string |
| var xNameMap = null; |
| |
| var formGmean; |
| var formOverlay; |
| |
| var first_plot = false; |
| // all margins are the margins between canvsvg and canvsvg -> rect |
| // not between the canvsvg and canvsvg -> g |
| var ratio = {canvToWholeWid: 1060/(1060+260), |
| legToWholeWid: 240/(1060+260), |
| wholeHeiToWid: 750/(1060+260), |
| // margin.top / wholeHeight |
| marginTopToWhole: 100/750, |
| marginBotToWhole: 100/750, |
| // margin.left / wholeWidth |
| marginLefToWhole: 150/(1060+260), |
| marginRigToWhole: 10/(1060+260)}; |
| // display option |
| var numPlotsPerRow = 1; |
| |
| // attach event listeners when ready |
| $(document).ready(function() { |
| |
| var custom_panel = document.getElementById("custom_panel"); |
| |
| var customize_plot = document.getElementById("customizePlot"); |
| customize_plot.addEventListener('click', function () { |
| generate_overlay_selector(); |
| }, false); |
| |
| var save_plot = document.getElementById("savePlot"); |
| save_plot.addEventListener('click', savePlot); |
| var save_plot_data = document.getElementById("savePlotData"); |
| save_plot_data.addEventListener('click', savePlotData); |
| |
| formGmean = document.getElementById("gmean_select").getElementsByTagName("fieldset")[0]; |
| formOverlay = document.getElementById("overlay_select").getElementsByTagName("fieldset")[0]; |
| |
| var get_custom_plot = document.getElementById("get_custom_plot"); |
| get_custom_plot.addEventListener('click', function () { |
| gmean_list = []; |
| //var checkbox = formGmean.getElementsByTagName('input'); |
| var checkbox = d3.select('#gmean_select').selectAll('input'); |
| checkbox.each(function () { |
| if (d3.select(this).property('checked')) { |
| gmean_list.push(d3.select(this).attr('index')); |
| } |
| }); |
| |
| overlay_list = []; |
| //var checkbox = formOverlay.getElementsByTagName('input'); |
| checkbox = d3.select('#overlay_select').selectAll('input'); |
| checkbox.each(function () { |
| if (d3.select(this).property('checked') |
| && gmean_list.indexOf(d3.select(this).attr('index')) == -1) { |
| overlay_list.push(d3.select(this).attr('index')); |
| } |
| }); |
| plot_generator();} |
| ); |
| |
| |
| }); |
| |
| /* |
| * high level function after data is obtained from database interface |
| * -- generate the default plots |
| */ |
| function plotter_setup(data) { |
| if (data.status !== 'OK') { |
| report_error(data.status); |
| return; |
| } |
| console.log('--- data ---'); |
| console.log(data); |
| // initialize |
| raw_data = data; |
| raw_data.tasks = _.map(raw_data.tasks, function(d){return d.split('|')[0]; }); |
| gmean_data = null; |
| overlay_list = []; |
| gmean_list = []; |
| range = []; |
| xNameMap = []; |
| document.getElementById('customizePlot').style.visibility = 'visible'; |
| document.getElementById('savePlot').style.visibility = 'visible'; |
| document.getElementById('savePlotData').style.visibility = 'visible'; |
| d3.select('#generate_plot').html(''); |
| d3.select('#generate_plot').text('Regenerate Plots'); |
| d3.select('#chart').html(''); |
| // clear up |
| remove_inputs(formGmean); |
| remove_inputs(formOverlay); |
| document.getElementById('custom_panel').style.visibility = 'hidden'; |
| // convert x value to numerical |
| indexXString(); |
| // check is x is run / parsed_date |
| // if yes, then geomean on everything |
| // if not, then supress on params that will generate the least subplots |
| range = []; |
| manipulatedData = {}; |
| for (var i = 0; i < raw_data.data.length; i++) { |
| range.push({x: [], y: []}); |
| range[i]['x'] = [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY]; |
| range[i]['y'] = [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY]; |
| manipulatedData[raw_data.tasks[i]] = {}; |
| } |
| if (timeParam.indexOf(raw_data.params[0]) !== -1) { |
| // geomean on everything. |
| defaultToGmeanTimePlot(); |
| // possibly show the generate_overlay_selector as well |
| } else { |
| // choose the axis with the most distinct values and overlay on it |
| defaultToGmeanSubPlot(); |
| } |
| } |
| /* |
| * generate the default plot if x axis is time |
| * methodology: gmean over everything |
| */ |
| function defaultToGmeanTimePlot() { |
| first_plot = true; |
| d3.select('#chart').html(''); |
| // flattenedData = _.flatten(raw_data, true); |
| for (var i = 0; i < raw_data.data.length; i++) { |
| groupedX = _.groupBy(raw_data.data[i], function (dotSeries) {return dotSeries[0]} ); |
| seriesXY = []; |
| for (var k in groupedX) { |
| groupedX[k] = reduceToGmean(groupedX[k]); |
| // now {x1: y1, x2: y2, ...} |
| // should convert it [[x1,y1],[x2,y2],...] |
| seriesXY.push([Number(k), groupedX[k], raw_data.tasks[i]]); |
| } |
| findAxisScale(seriesXY, xNameMap[i], i); |
| d3.select('#chart').append('div').attr('class', 'task_container').attr('id', 'task_'+i); |
| simple_plot(raw_data.params, seriesXY, [], xNameMap[i], i, 'taskTitle'); |
| sizingTaskContainer(1, 'task_'+i); |
| } |
| |
| } |
| /* |
| * generate the default plot when x is not time |
| * methodology: gmean over circuits, overlay on the filter which has the most distinct values |
| */ |
| function defaultToGmeanSubPlot() { |
| first_plot = true; |
| // check if circuit is in the filter: |
| // it should be, cuz it is the primary key |
| var gmeanIndex = raw_data.params.indexOf(defaultGmean); |
| if (gmeanIndex == -1) { |
| alert('circuit (primary key) is not in the param list\nskip default plot'); |
| generate_overlay_selector(); |
| } else if (gmeanIndex == 0 || gmeanIndex == 1) { |
| alert('circuit is in x y axis: \nskip default plot'); |
| generate_overlay_selector(); |
| } else { |
| for (var k in raw_data.data) { |
| var data = []; |
| gmeanPrepData = data_transform(raw_data.data[k], [(gmeanIndex-2)+''], 'non-overlay'); |
| for (var p in gmeanPrepData) { |
| // now gmeanPrepData[p] is a subplot overlaying on circuit |
| // next: gruop on x and gmean on y |
| var groupedX = data_transform(gmeanPrepData[p], [(0-2)+''], 'xy group'); |
| var seriesXY = []; |
| for (var l in groupedX) { |
| groupedX[l] = reduceToGmean(groupedX[l]); |
| seriesXY.push([l, groupedX[l], p]); |
| } |
| findAxisScale(seriesXY, xNameMap[k], k); |
| data.push(seriesXY); |
| } |
| var newRawData = []; |
| var newParams = []; |
| for (var i in raw_data.params) { |
| if (raw_data.params[i] != defaultGmean ) { |
| newParams.push(raw_data.params[i]); |
| } |
| } |
| for (var i in data) { |
| //simple_plot(raw_data.params, data[i], []); |
| // convert data again to support overlay again |
| for (var j in data[i]) { |
| var paramSplit = data[i][j][2].split(' '); |
| var temp = []; |
| for (var s in paramSplit) { |
| if (s != 0) { |
| temp.push(paramSplit[s]); |
| } |
| } |
| paramSplit = temp; |
| //console.log(paramSplit); |
| data[i][j] = [data[i][j][0], data[i][j][1]].concat(paramSplit); |
| newRawData.push(data[i][j]); |
| } |
| } |
| |
| newOverlayList = [findMostExpensiveAxis(newRawData, newParams) + '']; |
| var newData = data_transform(newRawData, newOverlayList, 'non-overlay'); |
| var c = d3.select('#chart').append('div').attr('class', 'task_container').attr('id', 'task_'+k); |
| var t = c.append('h3').attr('class', 'task_title'); |
| t.append('span').attr('class', 'h_grey').append('text').text('Task Name: '); |
| t.append('span').attr('class', 'h_dark').append('text').text(raw_data.tasks[k]); |
| var s = c.append('h4').attr('class', 'task_title'); |
| s.append('span').attr('class', 'h_grey').append('text').text('Geo Mean Axis: '); |
| s.append('span').attr('class', 'h_dark').append('text').text(defaultGmean); |
| var count = 0; |
| for (var j in newData) { |
| count += 1; |
| } |
| if (count <= maxPlotsAllowed) { |
| for (var j in newData) { |
| simple_plot(newParams, newData[j], newOverlayList, xNameMap[k], k, 'normalTitle'); |
| } |
| } else { |
| count = 0; |
| alert(errMsg['ENUMPLOTS']); |
| } |
| sizingTaskContainer(count, 'task_'+k); |
| } |
| } |
| } |
| /* |
| * reduce a list to a single gmean value |
| */ |
| function reduceToGmean(groupedX) { |
| // groupedX: eliminate all other irrelevant values |
| groupedX = _.map(groupedX, function (list) {return list[1];} ); |
| // count the number of tuples with the valid y value |
| var validCount = 0; |
| groupedX = _.reduce( groupedX, |
| function (memo, num) { |
| if (num > 0) { |
| memo *= num; |
| validCount += 1; |
| } |
| return memo; |
| }, |
| 1); |
| // setup the gmean entry for groupedX |
| return (validCount > 0) ? Math.pow(groupedX, 1.0/validCount) : -1; |
| |
| } |
| |
| /* |
| * to generate the overlay selector panel |
| * the plot will be generated after button is clicked. |
| * type is to used to decide whether to generate axes of raw data or gmean data |
| */ |
| function remove_inputs(parent) { |
| var inputs = parent.getElementsByTagName('input'); |
| var labels = parent.getElementsByTagName('label'); |
| var br = parent.getElementsByTagName('br'); |
| while (inputs.length) { |
| inputs[0].parentNode.removeChild(inputs[0]); |
| labels[0].parentNode.removeChild(labels[0]); |
| br[0].parentNode.removeChild(br[0]); |
| } |
| } |
| function generate_overlay_selector() { |
| // clear up |
| remove_inputs(formGmean); |
| remove_inputs(formOverlay); |
| d3.select('#chart').html(''); |
| var choice = raw_data.params; |
| |
| // choose gmean axis |
| for (var i = 2; i < choice.length; i ++ ) { |
| var input = document.createElement('input'); |
| var label = document.createElement('label'); |
| input.type = 'checkbox'; |
| label.textContent = input.value = choice[i]; |
| label.htmlFor = input.id = 'gip-' + choice[i]; |
| input.setAttribute('index', i - 2); |
| input.addEventListener('change', function(){updateLegendCheckBox(this.id);}); |
| //var label = form.append('label').attr('class', 'param_label'); |
| formGmean.appendChild(input); |
| formGmean.appendChild(label); |
| formGmean.appendChild(document.createElement('br')); |
| if (raw_data.params[0] == 'parsed_date' && choice[i] == 'run') { |
| $('#gip-'+choice[i]).prop('checked', true); |
| } |
| |
| } |
| |
| function updateLegendCheckBox(gid) { |
| var oid = gid.substring(4, gid.length); |
| if (d3.select('#'+gid).property('checked')) { |
| $('#oip-'+oid).prop('checked', false); |
| d3.select('#oip-'+oid).attr('disabled', 'on'); |
| d3.select('#olabel-'+oid).attr('style', 'color: rgb(188,188,188)'); |
| } else { |
| d3.select('#oip-'+oid).attr('disabled', null); |
| d3.select('#olabel-'+oid).attr('style', 'color: rgb(0,0,0)'); |
| } |
| } |
| // choose overlay axis |
| for (var i = 2; i < choice.length; i ++ ) { |
| //var label = form.append('label').attr('class', 'param_label'); |
| var input = document.createElement('input'); |
| var label = document.createElement('label'); |
| input.type = 'checkbox'; |
| label.textContent = input.value = choice[i]; |
| label.htmlFor = input.id = 'oip-' + choice[i]; |
| input.setAttribute('index', i - 2); |
| label.id = 'olabel-'+choice[i]; |
| //var label = form.append('label').attr('class', 'param_label'); |
| formOverlay.appendChild(input); |
| formOverlay.appendChild(label); |
| formOverlay.appendChild(document.createElement('br')); |
| } |
| |
| // make selection pannel visible |
| custom_panel.style.visibility = 'visible'; |
| } |
| /* |
| * if x is originally a int or float, this function does nothing |
| * if x is originally a string, this function replaces the x value with index, |
| * and setup the xNameMap |
| */ |
| function indexXString () { |
| xNameMap = []; |
| for (var t = 0; t < raw_data.tasks.length; t ++) { |
| var xValue = new Set(); |
| for (j in raw_data.data[t]) { |
| xValue.add(raw_data.data[t][j][0]); |
| } |
| // check if xValue contains NaN |
| var needConvert = 0; |
| for (v of xValue) { |
| if (isNaN(Number(v))) { |
| needConvert = 1; |
| break; |
| } |
| } |
| // do conversion |
| if (needConvert == 1) { |
| // setup xNameMap |
| var index = 0; |
| var xNM = {index:[], values:[]}; |
| for (v of xValue) { |
| xNM.index.push(index); |
| xNM.values.push(v); |
| index += 1; |
| } |
| xNameMap.push(xNM); |
| } else { |
| xNameMap.push({index: [], values: []}); |
| } |
| } |
| } |
| |
| /* |
| * expensive in terms of having most distinct values |
| * the input rawData is NOT necessarily the same as the global var raw_data |
| */ |
| function findMostExpensiveAxis(rawData, params) { |
| var maxValue = 0; |
| var maxIndex = -1; |
| for (var i = 0; i < params.length - 2; i++) { |
| var temp = new Set(); |
| for (var j = 0; j < rawData.length; j++) { |
| temp.add(rawData[j][i+2]); |
| } |
| var filt_name = []; |
| // convert set to list |
| for (v of temp) { |
| filt_name.push(v); |
| } |
| if (maxValue < filt_name.length) { |
| maxValue = filt_name.length; |
| maxIndex = i; |
| } |
| } |
| return maxIndex; |
| } |
| /* |
| * generate the plot with user specified legend |
| * this function is called after user is in the 'customer plot' mode |
| */ |
| function plot_generator() { |
| first_plot = true; |
| // clear up |
| d3.select('#chart').html(''); |
| var series = raw_data.data; |
| // filter is an array of array: filter[i][*] stores all possible values of axis i |
| // NOTE: I am actually not using the 'filter' variable. |
| var filter = []; |
| for (var t = 0; t < raw_data.tasks.length; t++) { |
| for (var i = 0; i < raw_data.params.length - 2; i++) { |
| var temp = new Set(); |
| for (var j = 0; j < raw_data.data[t].length; j++) { |
| temp.add(raw_data.data[t][j][i+2]); |
| } |
| var filt_name = []; |
| // convert set to list |
| for (v of temp) { |
| filt_name.push(v); |
| } |
| filter.push(filt_name); |
| } |
| } |
| // dealing with geo mean |
| gmean_data = []; |
| for (var i in series) { |
| gmean_data.push([]); |
| var gmeanPrep = data_transform(series[i], gmean_list, 'non-overlay'); |
| for (var k in gmeanPrep) { |
| var groupedX = data_transform(gmeanPrep[k], [(0-2)+''], 'xy group'); |
| seriesXY = []; |
| for (var l in groupedX) { |
| groupedX[l] = reduceToGmean(groupedX[l]); |
| var paramReduced = k.substring(2, k.length).split(' '); |
| for (var h in gmean_list) { |
| paramReduced.splice(gmean_list[h], 0, ''); |
| } |
| seriesXY.push([l, groupedX[l]].concat(paramReduced)); |
| gmean_data[i].push([l,groupedX[l]].concat(paramReduced)); |
| } |
| findAxisScale(seriesXY, xNameMap[i], i); |
| } |
| |
| } |
| series = gmean_data; |
| // dealing with overlay axes |
| // traverse all tasks |
| range = []; |
| manipulatedData = {}; |
| for (var i = 0; i < series.length; i++) { |
| var grouped_series = data_transform(series[i], overlay_list, 'non-overlay'); |
| range.push({x: [], y: []}); |
| range[i]['x'] = [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY]; |
| range[i]['y'] = [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY]; |
| manipulatedData[raw_data.tasks[i]] = {}; |
| for (var k in grouped_series) { |
| findAxisScale(grouped_series[k], xNameMap[i], i); |
| } |
| // add task name |
| var c = d3.select('#chart').append('div').attr('class', 'task_container').attr('id', 'task_'+i); |
| var t = c.append('h3').attr('class', 'task_title'); |
| t.append('span').attr('class', 'h_grey').text('Task Name: '); |
| t.append('span').attr('class', 'h_dark').text(raw_data.tasks[i]); |
| var s = c.append('h4').attr('class', 'task_title'); |
| s.append('span').attr('class', 'h_grey').text('Geo Mean Axes: '); |
| var temp = _.map(gmean_list, function(d){return raw_data.params[Number(d)+2];}).join(); |
| if (temp == '') { |
| s.append('span').attr('class', 'h_dark').text('None'); |
| } else { |
| s.append('span').attr('class', 'h_dark').text(temp); |
| } |
| var count = 0; |
| for (var k in grouped_series) { |
| count += 1; |
| } |
| if (count <= maxPlotsAllowed) { |
| for (var k in grouped_series) { |
| simple_plot(raw_data.params, grouped_series[k], overlay_list, xNameMap[i], i, 'normalTitle'); |
| } |
| } else { |
| count = 0; |
| alert(errMsg['ENUMPLOTS']); |
| } |
| sizingTaskContainer(count, 'task_'+i); |
| } |
| |
| // hide customization panel |
| //custom_panel.style.visibility = 'hidden'; |
| } |
| |
| function scroll_to(element) { |
| console.log("Scrolling to:"); |
| console.log(element); |
| $('html, body').animate({ |
| scrollTop: $(element).offset().top - 200 |
| }, 1000); |
| } |
| |
| function sizingTaskContainer (numPlots, id) { |
| var level = Math.ceil(numPlots / numPlotsPerRow); |
| // TODO: should get height of canvas directly |
| var wholeWidth = document.getElementById('display_canvas').offsetWidth / numPlotsPerRow; |
| var wholeHeight = wholeWidth * ratio.wholeHeiToWid; |
| // TODO: should not hard code 180 |
| d3.select('#'+id).style('height', level*wholeHeight + 180); |
| } |
| |
| /* |
| * to find the max and min of the x y axis |
| * used to unify the axis scale over all subplots |
| */ |
| function findAxisScale(series, xNM, t) { |
| for (var i = 0; i < series.length; i++) { |
| if (xNM.values.length == 0) { |
| range[t]['x'][0] = (range[t]['x'][0] > Number(series[i][0])) ? Number(series[i][0]) : range[t]['x'][0]; |
| range[t]['x'][1] = (range[t]['x'][1] < Number(series[i][0])) ? Number(series[i][0]) : range[t]['x'][1]; |
| } |
| if (Number(series[i][1]) != invalidY) { |
| range[t]['y'][0] = (range[t]['y'][0] > Number(series[i][1])) ? Number(series[i][1]) : range[t]['y'][0]; |
| range[t]['y'][1] = (range[t]['y'][1] < Number(series[i][1])) ? Number(series[i][1]) : range[t]['y'][1]; |
| |
| } |
| } |
| } |
| /* |
| * return the data grouped by a certain axis (filter or x, y) |
| */ |
| function data_transform (series, overlay_list, mode) { |
| // group by |
| if (mode == 'non-overlay') { |
| return _.groupBy(series, function (dot_info) { axis_group = ""; |
| for (var i = 2; i < dot_info.length; i++) { |
| if ($.inArray(i-2+"", overlay_list) == -1){ |
| axis_group += ' '+dot_info[i]; |
| } |
| } |
| return axis_group; |
| } ); |
| } else if (mode == 'overlay') { |
| return _.groupBy(series, function (dot_info) { axis_group = ""; |
| for (var i = 2; i < dot_info.length; i++) { |
| if ($.inArray(i-2+"", overlay_list) > -1){ |
| axis_group += ' '+dot_info[i]; |
| } |
| } |
| return axis_group; |
| } ); |
| } else if (mode == 'xy group') { |
| return _.groupBy(series, function (dot_info) { axis_group = ''; |
| for (var i = 0; i < 2; i++) { |
| if ($.inArray(i-2+'', overlay_list) > -1){ |
| // don't add space when group by x or y axis |
| axis_group += dot_info[i]; |
| } |
| } |
| return axis_group; |
| } ); |
| } else { |
| alert('data_transform: unknown mode'); |
| } |
| } |
| |
| function epochTimeConverter(unixEpochTime, paramXY) { |
| // deal with unix epoch time |
| var date = unixEpochTime; |
| if (unixEpoch.indexOf(paramXY) != -1) { |
| var date = new Date(Number(date) * 1000); |
| } |
| return date; |
| } |
| /* |
| * setup data for plotter: |
| * 1. convert to data structure representing series |
| * 2. dealing with some corner case of range |
| */ |
| function prepareData(params, series, overlay_list, xNM, t, titleMani) { |
| //setup data |
| if (range[t]['y'][0] == Number.NEGATIVE_INFINITY) { |
| range[t]['y'][0] = 0; |
| range[t]['y'][1] = 0; |
| } |
| if (range[t]['x'][0] == range[t]['x'][1]) { |
| range[t]['x'][0] -= 0.5*range[t]['x'][0]; |
| range[t]['x'][1] += 0.5*range[t]['x'][1]; |
| } |
| if (range[t]['y'][0] == range[t]['y'][1]) { |
| range[t]['y'][0] -= 0.5*range[t]['y'][0]; |
| range[t]['y'][1] += 0.5*range[t]['y'][1]; |
| } |
| var lineData = data_transform(series, overlay_list, 'overlay'); |
| console.log('///// lineData /////'); |
| console.log(lineData); |
| // setup manipulatedData |
| for (var i in lineData) { |
| var val = i.split(' '); |
| var name = ''; |
| for (var c = 1; c < val.length; c++) { |
| name += raw_data.params[Number(overlay_list[c-1]) + 2] + '..'; |
| name += val[c] + '--'; |
| } |
| manipulatedData[raw_data.tasks[t]][titleMani][name] = lineData[i]; |
| } |
| for (var i in manipulatedData) { |
| for (var j in manipulatedData[i]) { |
| for (var k in manipulatedData[i][j]) { |
| for (var m in manipulatedData[i][j][k]) { |
| manipulatedData[i][j][k][m] = [manipulatedData[i][j][k][m][0], |
| manipulatedData[i][j][k][m][1]]; |
| } |
| } |
| } |
| } |
| var lineInfo = []; |
| for (var k in lineData) { |
| var lineVal = []; |
| for (var j = 0; j < lineData[k].length; j ++ ){ |
| // ignore invalid data points |
| if (lineData[k][j][1] == invalidY) { |
| continue; |
| } |
| if (isNaN(Number(lineData[k][j][0]))) { |
| lineVal.push({x: lineData[k][j][0], y: lineData[k][j][1]}); |
| } else { |
| lineData[k][j][0] = Number(lineData[k][j][0]); |
| lineVal.push({x: lineData[k][j][0], y: lineData[k][j][1]}); |
| } |
| } |
| if (xNM.values.length == 0) { |
| lineVal = _.sortBy(lineVal, 'x'); |
| // =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= |
| lineVal = _.map(lineVal, function(d) {return {x: epochTimeConverter(d.x, params[0]), y: epochTimeConverter(d.y, params[1])};}); |
| } else { |
| // sort by the order in xNM.values |
| lineVal = _.map(lineVal, function(d) {return {x: xNM.values.indexOf(d.x), y: epochTimeConverter(d.y,params[1])};} ); |
| lineVal = _.sortBy(lineVal, 'x'); |
| lineVal = _.map(lineVal, function(d) {return {x: xNM.values[d.x], y: d.y};}); |
| } |
| if (isNaN(Number(k))) { |
| lineInfo.push({values: lineVal, key: k}); |
| } else { |
| // TODO: this Number() won't work if k is a combination of numerical and non-numerical |
| lineInfo.push({values: lineVal, key: Number(k)}); |
| } |
| } |
| lineInfo = _.sortBy(lineInfo, 'key'); |
| console.log('-=-=-=-=-= lineInfo =-=-=-=-=-=-'); |
| console.log(lineInfo); |
| return lineInfo; |
| } |
| /* |
| * setup axis for simple_plot |
| * dealing with different axis types: numerical, non-numerical, time |
| * y axis is always numerical |
| */ |
| function setupAxis(params, xNM, t, width, height) { |
| // setup axis |
| var x = null; |
| if (xNM.values.length == 0) { |
| var xAxisRange = [range[t]['x'][0] - 0.1*(range[t]['x'][1]-range[t]['x'][0]), range[t]['x'][1] + 0.1*(range[t]['x'][1]-range[t]['x'][0])]; |
| xAxisRange[0] = epochTimeConverter(xAxisRange[0], params[0]); |
| xAxisRange[1] = epochTimeConverter(xAxisRange[1], params[0]); |
| if (unixEpoch.indexOf(params[0]) == -1) { |
| x = d3.scale.linear() |
| .domain(xAxisRange) |
| .range([0, width]); |
| } else { |
| x = d3.time.scale().domain(xAxisRange) |
| .range([0, width]); |
| } |
| } else { |
| x = d3.scale.ordinal() |
| .domain(xNM.values) |
| .rangePoints([0, width], 0.3); |
| } |
| var y = null; |
| var yAxisRange = [range[t]['y'][0] - 0.2*(range[t]['y'][1]-range[t]['y'][0]), range[t]['y'][1] + 0.2*(range[t]['y'][1]-range[t]['y'][0])]; |
| yAxisRange[0] = epochTimeConverter(yAxisRange[0], params[1]); |
| yAxisRange[1] = epochTimeConverter(yAxisRange[1], params[1]); |
| if (unixEpoch.indexOf(params[1]) == -1) { |
| y = d3.scale.linear() |
| .domain(yAxisRange) |
| .range([height, 0]); |
| } else { |
| y = d3.time.scale().domain(yAxisRange) |
| .range([height, 0]); |
| } |
| return [x, y]; |
| } |
| /* |
| * generate the svg plot |
| * using d3.js |
| * t: task index |
| * element layout: |
| * task_container |
| * | |
| * `-- task_title |
| * | |
| * `-- chart_container |
| * | |
| * `-- svg |
| * | | |
| * | `-- g |
| * | | |
| * | `-- rect, axis, path |
| * | |
| * `--legend_container |
| * | |
| * `-- svg |
| * | |
| * `-- legend_title, legend |
| * |
| */ |
| function simple_plot(params, series, overlay_list, xNM, t, titleMode) { |
| var titleMani = ''; |
| for (var i = 2; i < series[0].length; i ++){ |
| if ($.inArray(i-2+'', overlay_list) == -1 |
| && String(series[0][i]).length != 0) { |
| titleMani += params[i]; |
| titleMani += '..'; |
| titleMani += series[0][i]; |
| titleMani += '--'; |
| } |
| } |
| console.log(raw_data.tasks[t]); |
| console.log(manipulatedData); |
| manipulatedData[raw_data.tasks[t]][titleMani] = {}; |
| |
| // ............................... |
| // setup geometry of plotting area |
| // all geometry values are derived by the width of the whole page |
| var wholeWidth = document.getElementById('display_canvas').offsetWidth / numPlotsPerRow; |
| var wholeHeight = wholeWidth * ratio.wholeHeiToWid; |
| // basically width: whole = canvas + legend + small margin |
| // height: whole = canvas = legend |
| var canvWidth = wholeWidth * ratio.canvToWholeWid; |
| var canvHeight = wholeHeight; |
| // width & height is the size of the actual plotting area (i.e.: rect in canvas svg) |
| var width = canvWidth - wholeWidth * (ratio.marginLefToWhole + ratio.marginRigToWhole); |
| var height = canvHeight - wholeHeight * (ratio.marginTopToWhole + ratio.marginBotToWhole); |
| // width and height for legend container |
| var legWidth = wholeWidth * ratio.legToWholeWid; |
| var legHeight = wholeHeight; |
| /* |
| console.log('---- whole:'); |
| console.log('Width: '+wholeWidth+' Height: '+wholeHeight); |
| console.log('---- canv:'); |
| console.log('Width: '+canvWidth+' Height: '+canvHeight); |
| console.log('---- plot'); |
| console.log('Width: '+width+' Height: '+height); |
| */ |
| // ................................ |
| // small tuning of plot title position |
| var plotTitleY = -10; |
| // const for legend, unit: px |
| var dataDotRadius = 4; |
| var legendSize = 14; |
| var legendMargin = 8; |
| var legendPeriGap = 10; |
| // ................................. |
| // data |
| var lineInfo = prepareData(params, series, overlay_list, xNM, t, titleMani); |
| // ................................. |
| // axis |
| var xy = setupAxis(params, xNM, t, width, height); |
| var x = xy[0]; |
| var y = xy[1]; |
| // 's' is for SI prefix in axis ticks |
| var xAxis = d3.svg.axis() |
| .scale(x) |
| .orient("bottom") |
| .ticks(10, 's') |
| .tickSize(-height); |
| var yAxis = d3.svg.axis() |
| .scale(y) |
| .orient("left") |
| .ticks(10, 's') |
| .tickSize(-width); |
| // ................................... |
| // behavior |
| var zoom = d3.behavior.zoom() |
| .x(x) |
| .y(y) |
| .scaleExtent([1, 10]) |
| .on("zoom", zoomed); |
| // ................................... |
| // assembly |
| var chart = d3.select('#task_'+t).append('div').attr('class', 'chart_container'); |
| var svg = chart.append('svg').attr('class', 'canvas_container') |
| .attr("width", canvWidth) |
| .attr("height", canvHeight) |
| .attr('shape-rendering', 'geometricPrecision'); |
| var gTransX = wholeWidth * ratio.marginLefToWhole; |
| var gTransY = wholeHeight * ratio.marginTopToWhole; |
| // NB: the translation on g is not strict. By inspecting the actual generated webpage, |
| // it seems that the translation of (gTransX, gTransY) is eventually falling on rect. |
| svg = svg.append("g") |
| .attr('transform', 'translate(' + gTransX + ',' + gTransY + ')'); |
| //.attr("transform", "translate(" + plotMargin['left'] + "," + plotMargin['top'] + ")") |
| // only support zooming for numerical x axis |
| if (xNM.values.length == 0) { |
| svg.call(zoom); |
| } |
| // svg -> g -> rect: background color |
| svg.append("rect") |
| .attr('fill', '#f0f0f0') |
| .attr("width", width) |
| .attr("height", height); |
| svg.append("g") |
| .attr("class", "x axis") |
| .attr("transform", "translate(0," + height + ")") |
| .call(xAxis); |
| svg.append("g") |
| .attr("class", "y axis") |
| .call(yAxis); |
| // reassemble x and y axis name, with underscore eliminated |
| var xParam = _.reduce(params[0].split('_'), function(memo, num) {return memo == '' ? num : memo+' '+num;}, ''); |
| var yParam = _.reduce(params[1].split('_'), function(memo, num) {return memo == '' ? num : memo+' '+num;}, ''); |
| // the hardcoded 30 in "attr('y', height+30)" should be fine. cuz vertical px is irrelevant to window size |
| svg.append('text').attr('class', 'x label').attr('text-anchor', 'middle') |
| .attr('x', width/2).attr('y', height+30).style('font-size','14px') |
| .text(xParam); |
| // TODO: the hardcoded -50 in "attr('y', -50)" may need adjustment |
| svg.append('text').attr('class', 'y label').attr('text-anchor', 'middle') |
| .attr('x', -height/2).attr('y', -50).attr('dy', '.75em') |
| .attr('transform', 'rotate(-90)').style('font-size','14px') |
| .text(yParam); |
| //.on("click", reset); |
| // ............. |
| // add line and dots |
| var lineGen = d3.svg.line() |
| .x(function(d) {return x(d['x']);}) |
| .y(function(d) {return y(d['y']);}); |
| var clip = svg.append('svg:clipPath').attr('id', 'clip') |
| .append('svg:rect').attr('fill', '#f0f0f0').attr('x', 0).attr('y', 0) |
| .attr('width', width).attr('height', height); |
| var color = d3.scale.category10(); |
| for (var i in lineInfo){ |
| var svgg = svg.append('g').attr('clip-path', 'url(#clip)'); |
| svgg.append('svg:path').attr('fill', 'none') |
| .datum(lineInfo[i]['values']) |
| .attr('class', 'line').attr('d', lineGen) |
| .style('stroke', function() {return color(lineInfo[i]['key']);}); // here each key is associated with a color --> for future legend |
| svgg.selectAll('.dots') |
| .data(lineInfo[i]['values']) |
| .enter() |
| .append('circle') |
| .attr('class', 'dots') |
| .attr('r', dataDotRadius) |
| .attr('fill', function() {return color(lineInfo[i]['key']);}) |
| .attr('transform', function(d) {return 'translate(' + x(d['x'])+ ',' + y(d['y']) + ')'; }); |
| } |
| /* |
| // TODO: add display coordination function |
| var focus = svg.append('g').attr('class', 'focus').style('display', 'none'); |
| focus.append('circle').attr('r', 4.5); |
| focus.append('x', 9).attr('dy', '.35em'); |
| |
| svg.append('rect').attr('class', 'overlay').attr('width', width).attr('height', height) |
| .on('mouseover', function() {focus.style('display', null);}) |
| .on('mouseout', function() {focus.style('display', 'none'); }) |
| .on('mousemove', mousemove); |
| */ |
| // ............. |
| // add legend |
| // the svg size should be chosen to fit the text |
| var svgLegWidth = 0; |
| var svgLegHeight = 0; |
| var divLegWidth = wholeWidth * ratio.legToWholeWid; |
| var divLegHeight = wholeHeight * (1 - ratio.marginBotToWhole); |
| var svgLegend = chart.append('div').attr('class', 'legend_container') |
| .style('width', divLegWidth).style('height', divLegHeight) |
| .append('svg').attr('class', 'legend_svg'); |
| // NOTE: has to set font here, or getBBox will return inprecise value due to the unloaded font |
| d3.selectAll('svg').style('font', '10px sans-serif'); |
| if (lineInfo.length > 1 || lineInfo[0]['key'] != '') { |
| var legend = svgLegend.selectAll('.legend') |
| .data(color.domain()) // this step is the key to legend |
| .enter() |
| .append('g') |
| .attr('class', 'legend') |
| .attr('transform', function (d, i) { |
| var height = legendSize + legendMargin; |
| var horz = legendPeriGap; |
| var vert = (i+1) * height + wholeHeight * ratio.marginTopToWhole + legendPeriGap; |
| return 'translate(' + horz + ', ' + vert + ')'; |
| }); |
| var legendTitle = _.map(overlay_list, function(d) {return '<'+params[Number(d)+2]+'>';}); |
| for (var i in legendTitle) { |
| legendTitle[i] = _.reduce(legendTitle[i].split('_'), function(memo, num){return memo == '' ? num : memo+' '+num;}, ''); |
| } |
| |
| var textElement = svgLegend.append('text').attr('x', legendPeriGap).attr('y', legendPeriGap + wholeHeight * ratio.marginTopToWhole) |
| .attr('text-anchor', 'left').style('font-size', '12px') |
| .style('font-weight', 'bold').text(String(legendTitle)); |
| // dynamically adjust the svg legend size |
| svgLegWidth = (svgLegWidth > textElement.node().getBBox().width) ? svgLegWidth : textElement.node().getBBox().width; |
| svgLegHeight += textElement.node().getBBox().height; |
| |
| legend.append('rect') |
| .attr('width', legendSize).attr('height', legendSize) |
| .attr('x', 0).attr('y', -5) |
| .style('fill', color).style('stroke', color); |
| legend.append('text') |
| .attr('x', legendSize + legendMargin).attr('y', legendSize - legendMargin) |
| .style('font-size', '12px') |
| .text(function(d) {return d;}); |
| legend.each(function() { |
| svgLegWidth = (svgLegWidth > this.getBBox().width) ? svgLegWidth : this.getBBox().width; |
| svgLegHeight += legendSize+legendMargin; }); |
| svgLegWidth += legendPeriGap; |
| svgLegHeight += legendPeriGap + wholeHeight * ratio.marginTopToWhole + legendSize; |
| svgLegend.attr('width', svgLegWidth).attr('height', svgLegHeight); |
| } else { |
| // no legend at all |
| svgLegend.attr('width', 0).attr('height', 0); |
| } |
| // ............. |
| // add title |
| var cTitle = svg.append("text") |
| .attr("x", width/2) |
| .attr("y", plotTitleY) |
| .attr("text-anchor", "middle") |
| .attr("class", "chart-title") |
| .style("font-size", "16px"); |
| |
| for (var i = 2; i < series[0].length; i ++){ |
| if ($.inArray(i-2+'', overlay_list) == -1 |
| && String(series[0][i]).length != 0) { |
| var paramReduced; |
| if (titleMode == 'normalTitle') { |
| paramRejoin = _.reduce(params[i].split('_'), function(memo, num) {return memo == '' ? num : memo+' '+num;}, ''); |
| cTitle.append('svg:tspan') |
| .style('fill', 'rgb(111,111,111)') |
| .text(paramRejoin + ':'); |
| } |
| cTitle.append('svg:tspan') |
| .style('font-weight', 'bold') |
| .text(' '+series[0][i]+' '); |
| } |
| } |
| // dealing with styling |
| // have to append this rect after the plots, in order for the peripheral stroke |
| // being placed at the very front |
| svg.append("rect") |
| .attr('class', 'canvas_peripheral') |
| .attr('fill', 'none') |
| .attr("width", width) |
| .attr("height", height); |
| d3.selectAll('rect.canvas_peripheral').style('stroke', '#000'); |
| d3.selectAll('path').style('fill', 'none'); |
| d3.selectAll('path.domain').style('stroke', '#fff'); |
| d3.selectAll('.axis line').style('stroke', '#fff').style('fill', 'none'); |
| d3.selectAll('.axis path').style('stroke', '#fff').style('fill', 'none'); |
| d3.selectAll('.line').style('fill', 'none').style('stroke-width','1.5px'); |
| // .............. |
| // interaction |
| function zoomed() { |
| if (xNM.values.length == 0) { |
| // update styling |
| d3.selectAll('.axis line').style('stroke', '#fff').style('fill','none'); |
| svg.select(".x.axis").call(xAxis); |
| svg.select(".y.axis").call(yAxis); |
| svg.selectAll('.line').attr('class', 'line').attr('d', lineGen); |
| svg.selectAll('.dots').attr('transform', function(d) { |
| return 'translate(' + x(d['x']) + ',' + y(d['y']) + ')';}); |
| } else { |
| // |
| } |
| } |
| /* |
| * have not implemented function of 'reset canvas' yet |
| */ |
| function reset() { |
| d3.transition().duration(750).tween("zoom", function() { |
| var ix = d3.interpolate(x.domain(), [-width / 2, width / 2]), |
| iy = d3.interpolate(y.domain(), [-height / 2, height / 2]); |
| return function(t) { |
| zoom.x(x.domain(ix(t))).y(y.domain(iy(t))); |
| zoomed(); |
| }; |
| }); |
| } |
| |
| if (first_plot) { |
| scroll_to(svg.node()); |
| first_plot = false; |
| } |
| } |
| // .............. |
| // save image |
| function savePlot() { |
| var count = 0; |
| // var all is for compatibility of firefox. FF won't load img correctly unless you call onload function |
| // so I have to put zip.file() inside onload function |
| var all = 0; |
| d3.selectAll('.chart_container').each(function () {all += 1;}); |
| var zip = new JSZip(); |
| d3.selectAll('.chart_container').each(function () { |
| var html1 = d3.select(this).select('svg') |
| .attr('version', 1.1).attr('xmlns', 'http://www.w3.org/2000/svg') |
| .node().parentNode.innerHTML; |
| var html2 = d3.select(this).select('.legend_container').select('svg') |
| .attr('version', 1.1).attr('xmlns', 'http://www.w3.org/2000/svg') |
| .node().parentNode.innerHTML; |
| var html = html2 + html1; |
| |
| var plotWidth = Number(d3.select(this).select('.canvas_container').attr('width')); |
| var plotHeight = Number(d3.select(this).select('.canvas_container').attr('height')); |
| var legendWidth = Number(d3.select(this).select('.legend_svg').attr('width')); |
| var legendHeight = Number(d3.select(this).select('.legend_svg').attr('height')); |
| var svgWidth = plotWidth + legendWidth; |
| var svgHeight = plotHeight > legendHeight ? plotHeight : legendHeight; |
| |
| d3.select('#temp').append('svg').attr('width', svgWidth).attr('height', svgHeight) |
| .attr('version',1.1).attr('xmlns', 'http://www.w3.org/2000/svg').html(html); |
| d3.select('#temp').select('.legend_svg').attr('x', plotWidth); |
| var tempEle = document.getElementById('temp'); |
| var tempSvg = tempEle.getElementsByTagName('svg')[0]; |
| var rmDiv = tempSvg.getElementsByClassName('legend_container')[0]; |
| tempSvg.removeChild(rmDiv); |
| html = d3.select('#temp').node().innerHTML; |
| var imgsrc = 'data:image/svg+xml;base64,'+btoa(html); |
| console.log('/// imgsrc ///'); |
| console.log(imgsrc); |
| d3.select('#temp').append('canvas').attr('width', svgWidth).attr('height', svgHeight); |
| var canvas = document.querySelector('canvas'); |
| var context = canvas.getContext('2d'); |
| var image = new Image; |
| image.src = imgsrc; |
| |
| image.onload = function() { |
| count += 1; |
| context.drawImage(image, 0, 0); |
| var canvasdata = canvas.toDataURL('image/png'); |
| /* |
| // this is an alternative option for saving img |
| var a = document.createElement('a'); |
| a.download = 'plot'+count+'.png'; |
| a.href = canvasdata; |
| document.body.appendChild(a); |
| a.click(); |
| document.body.removeChild(a); |
| */ |
| zip.file('png/plotPng-'+count+'.png', canvasdata.substr(canvasdata.indexOf(',')+1), {base64: true}); |
| zip.file('svg/plotSvg-'+count+'.svg', btoa(html), {base64: true}); |
| if (count == all) { |
| var content = zip.generate({type: 'blob'}); |
| saveAs(content, 'plots.zip'); |
| } |
| } |
| d3.select('#temp').html(''); |
| }); |
| } |
| |
| function savePlotData() { |
| var zip = new JSZip(); |
| var task, plot, line; |
| for (var i in manipulatedData) { |
| task = (i == '') ? 'task':i; |
| for (var j in manipulatedData[i]) { |
| plot = j; |
| if (plot[plot.length-1] == '-' && plot[plot.length-2] == '-') { |
| plot = plot.substring(0, plot.length-2); |
| } |
| plot = (plot == '') ? 'plot':plot; |
| for (var k in manipulatedData[i][j]) { |
| line = k; |
| if (line[line.length-1] == '-' && line[line.length-2] == '-') { |
| line = line.substring(0, line.length-2); |
| } |
| line = (line == '') ? 'line':line; |
| var arr = ''; |
| for (var m in manipulatedData[i][j][k]) { |
| arr += String(manipulatedData[i][j][k][m][0]) + '\t'; |
| arr += String(manipulatedData[i][j][k][m][1]) + '\n'; |
| } |
| zip.file(task+'/'+plot+'/'+line, arr); |
| } |
| } |
| } |
| var content = zip.generate({type: 'blob'}); |
| saveAs(content, 'plot_data.zip'); |
| } |
| |
