diff --git a/codepot/src/codepot/views/code_folder.php b/codepot/src/codepot/views/code_folder.php index 5b0da6f7..168c7d9b 100644 --- a/codepot/src/codepot/views/code_folder.php +++ b/codepot/src/codepot/views/code_folder.php @@ -35,9 +35,6 @@ - - - @@ -490,41 +487,124 @@ var LocFileApp = (function () function App (top_container, graph_container, graph_msgdiv, graph_canvas, graph_button, graph_spin, graph_url, graph_title) { GraphApp.call (this, top_container, graph_container, graph_msgdiv, graph_canvas, graph_button, graph_spin, graph_url, graph_title); - this.fc = null; - this.loc_data = null; - - var self = this; - this.graph_container.on ("dialogclose", function (evt) { - if (self.fc != null) - { - self.fc.cleanup (); - self.fc = null; - } - }); + this.tooltip = null; + this.plot_last_point = null; + this.plot_dataset = null; + this.plot_options = null; return this; } App.prototype = Object.create (GraphApp.prototype); App.prototype.constructor = App; + function show_tooltip(id, x, y, contents) + { + var gco = this.graph_container.offset(); + + if (this.tooltip != null) this.tooltip.remove(); + + this.tooltip = $('
' + contents + '
').css( { + position: 'absolute', + display: 'none', + top: y - gco.top, + left: x - gco.left, + border: '1px solid #fdd', + padding: '2px', + 'background-color': '#fee', + 'font-size': '0.8em', + 'font-family': 'inherit', + opacity: 0.80 + }); + this.tooltip.appendTo(this.graph_container).fadeIn(200); + } + + function on_plot_hover (item) + { + if (item) + { + if (this.plot_last_point != item.datapoint) + { + this.plot_last_point = item.datapoint; + + var name = item.series.data[item.dataIndex][0]; + show_tooltip.call (this, "code_folder_loc_by_file_tooltip", item.pageX, item.pageY, name + '(' + item.datapoint[1] + ')'); + } + } + else + { + if (this.plot_last_point != null) this.plot_last_point = null; + if (this.tooltip != null) + { + this.tooltip.remove(); + this.tooltip = null; + } + } + } + App.prototype.renderGraph = function (loc) { + var self = this; + this.clearMessage (); - this.loc_data = loc; + + var dataset = []; + for (var key in loc.children) { + var size = loc.children[key].size; + if (size == null) size = 0; + var name = loc.children[key].name; + name = name.split('/').reverse()[0]; + dataset.push ([name, size]); + } + + var options = { + series: { + stack: true, + shadowSize: 0, + bars: { + show: true, + fill: false, + align: "center", + barWidth: 0.7, + lineWidth: 0.5 + }, + lines: { show: false, fill: true }, + points: { show: false } + }, + + grid: { hoverable: true, clickable: true }, + + xaxes: [ + { mode: "categories", + autoscaleMargin: 0.01, + rotateTicks: 90, + tickLength: 0 + }, + ], + + yaxes: { } + }; + + this.plot_dataset = [ {label: "LOC", data: dataset} ]; + this.plot_options = options; + this.plot_last_point = null; + + this.graph_canvas.bind("plothover", function (event, pos, item) { + on_plot_hover.call (self, item); + }); } App.prototype.resizeGraph = function () { - if (this.fc == null) + if (this.plot_dataset != null) { - this.fc = new CodeFlower ("#code_folder_loc_by_file", this.graph_container.width() - 5, this.graph_container.height() - 10); - if (this.loc_data != null) this.fc.update (this.loc_data); + this.graph_canvas.width (this.graph_container.width() - 5); + this.graph_canvas.height (this.graph_container.height() - 10); + $.plot(this.graph_canvas, this.plot_dataset, this.plot_options); } } return App; })(); - function render_readme() {