hyung-hwan/codepot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

in progress changing flot to chart.js

Browse Source
This commit is contained in:
hyung-hwan 2021-09-12 06:57:19 +00:00
parent f2a7090a56
commit 8e773d4b87
3 changed files with 127 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
codepot/README.md
View File

@ -338,6 +338,7 @@ X-editable 1.5.1 MIT
PHPGraphLib MIT PHPGraphLib MIT
CLOC 1.91 GPL CLOC 1.91 GPL
Flot https://github.com/flot/flot/blob/master/LICENSE.txt Flot https://github.com/flot/flot/blob/master/LICENSE.txt
Chart.js MIT
Font Awesome 4.3.0 MIT & SIL OFL 1.1 Font Awesome 4.3.0 MIT & SIL OFL 1.1
D3.js 3.5.5 BSD D3.js 3.5.5 BSD
CodeFlower MIT CodeFlower MIT

285
codepot/src/codepot/views/code_folder.php
View File

@ -29,11 +29,8 @@
<link type="text/css" rel="stylesheet" href="<?php print base_url_make('/css/jqueryui-editable.css')?>" /> <link type="text/css" rel="stylesheet" href="<?php print base_url_make('/css/jqueryui-editable.css')?>" />
<!--[if lte IE 8]><script type="text/javascript" src="<?php print base_url_make('/js/excanvas.min.js')?>"></script><![endif]--> <!--[if lte IE 8]><script type="text/javascript" src="<?php print base_url_make('/js/excanvas.min.js')?>"></script><![endif]-->
<script type="text/javascript" src="<?php print base_url_make('/js/jquery.flot.min.js')?>"></script>
<script type="text/javascript" src="<?php print base_url_make('/js/jquery.flot.time.min.js')?>"></script> <script type="text/javascript" src="<?php print base_url_make('/js/chart.min.js')?>"></script>
<script type="text/javascript" src="<?php print base_url_make('/js/jquery.flot.categories.min.js')?>"></script>
<script type="text/javascript" src="<?php print base_url_make('/js/jquery.flot.stack.min.js')?>"></script>
<script type="text/javascript" src="<?php print base_url_make('/js/jquery.flot.tickrotor.js')?>"></script>
<script type="text/javascript" src="<?php print base_url_make('/js/vis.min.js')?>"></script> <script type="text/javascript" src="<?php print base_url_make('/js/vis.min.js')?>"></script>
<link type="text/css" rel="stylesheet" href="<?php print base_url_make('/css/vis.min.css')?>" /> <link type="text/css" rel="stylesheet" href="<?php print base_url_make('/css/vis.min.css')?>" />
@ -202,6 +199,10 @@ var GraphApp = (function ()
self.resizeGraph (); self.resizeGraph ();
}); });
this.graph_container.on ("dialogclose", function (evt, ui) {
self.closeGraph ();
});
this.graph_button.button().click (function () this.graph_button.button().click (function ()
{ {
open_graph.call (self); open_graph.call (self);
@ -239,6 +240,11 @@ var GraphApp = (function ()
/* SHOULD BE IMPLEMENTED BY INHERITER */ /* SHOULD BE IMPLEMENTED BY INHERITER */
} }
App.prototype.closeGraph = function ()
{
/* SHOULD BE IMPLEMENTED BY INHERITER */
}
return App; return App;
})(); })();
@ -357,8 +363,6 @@ var LocLangApp = (function ()
function App (top_container, graph_container, graph_msgdiv, graph_canvas, graph_button, graph_spin, graph_url, graph_title) 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); GraphApp.call (this, top_container, graph_container, graph_msgdiv, graph_canvas, graph_button, graph_spin, graph_url, graph_title);
this.tooltip = null;
this.plot_last_point = null;
this.plot_dataset = null; this.plot_dataset = null;
this.plot_options = null; this.plot_options = null;
return this; return this;
@ -367,105 +371,63 @@ var LocLangApp = (function ()
App.prototype = Object.create (GraphApp.prototype); App.prototype = Object.create (GraphApp.prototype);
App.prototype.constructor = App; 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 = $('<div id="' + id + '">' + contents + '</div>').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;
show_tooltip.call (this, "code_folder_loc_by_lang_tooltip", item.pageX, item.pageY, 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) App.prototype.renderGraph = function (loc)
{ {
var self = this; var self = this;
this.clearMessage (); this.clearMessage ();
var labels = [];
var blank = []; var blank = [];
for (var key in loc) blank.push ([ key, loc[key][1]] );
var comment = []; var comment = [];
for (var key in loc) comment.push ([ key, loc[key][2]] );
var code = []; var code = [];
for (var key in loc) code.push ([ key, loc[key][3]] ); for (var key in loc)
{
labels.push (key);
blank.push (loc[key][1]);
comment.push (loc[key][2]);
code.push (loc[key][3]);
}
var dataset = this.plot_dataset = {
[ labels: labels,
{ label: "<?php print $this->lang->line('Code')?>", data: code }, datasets: [
{ label: "<?php print $this->lang->line('Comment')?>", data: comment }, {
{ label: "<?php print $this->lang->line('Blank')?>", data: blank } label: "<?php print $this->lang->line('Blank')?>",
]; data: blank
var options = {
series: {
stack: true,
shadowSize: 0,
bars: {
show: true,
fill: true,
align: "center",
barWidth: 0.8
}, },
lines: { show: false, fill: true }, {
points: { show: false } label: "<?php print $this->lang->line('Comment')?>",
}, data: comment
grid: { hoverable: true, clickable: true },
xaxes: [
{ mode: "categories",
autoscaleMargin: 0.05,
rotateTicks: ((code.length >= 8)? 135: 0)
}, },
], {
label: "<?php print $this->lang->line('Code')?>",
yaxes: { } data: code
},
]
}; };
//this.graph_canvas.width(550).height(400);
//$.plot(this.graph_canvas, dataset, options);
this.plot_dataset = dataset; this.plot_options = {
this.plot_options = options; responsive: true,
this.plot_last_point = null; maintainAspectRatio: false,
scales: {
x: {
grid: { display: false },
stacked: true
},
y: {
beginAtZero: true,
grid: { display: true }
}
}
};
this.graph_canvas.bind("plothover", function (event, pos, item) { this.chart = new Chart(this.graph_canvas[0].getContext('2d'), {
on_plot_hover.call (self, item); type: 'bar',
data: this.plot_dataset,
options: this.plot_options
}); });
} }
@ -475,7 +437,15 @@ var LocLangApp = (function ()
{ {
this.graph_canvas.width (this.graph_container.width() - 5); this.graph_canvas.width (this.graph_container.width() - 5);
this.graph_canvas.height (this.graph_container.height() - 10); this.graph_canvas.height (this.graph_container.height() - 10);
$.plot(this.graph_canvas, this.plot_dataset, this.plot_options); }
}
App.prototype.closeGraph = function ()
{
if (this.chart != null)
{
this.chart.destroy();
this.chart = null;
} }
} }
return App; return App;
@ -487,109 +457,70 @@ var LocFileApp = (function ()
function App (top_container, graph_container, graph_msgdiv, graph_canvas, graph_button, graph_spin, graph_url, graph_title) 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); GraphApp.call (this, top_container, graph_container, graph_msgdiv, graph_canvas, graph_button, graph_spin, graph_url, graph_title);
this.tooltip = null;
this.plot_last_point = null;
this.plot_dataset = null; this.plot_dataset = null;
this.plot_options = null; this.plot_options = null;
this.chart = null;
return this; return this;
} }
App.prototype = Object.create (GraphApp.prototype); App.prototype = Object.create (GraphApp.prototype);
App.prototype.constructor = App; 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 = $('<div id="' + id + '">' + contents + '</div>').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) App.prototype.renderGraph = function (loc)
{ {
var self = this; var self = this;
this.clearMessage (); this.clearMessage ();
var gen_color = function() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) color += letters[Math.floor(Math.random() * 16)];
return color;
};
var labels = [];
var dataset = []; var dataset = [];
var bgcolors = [];
for (var key in loc.children) { for (var key in loc.children) {
var size = loc.children[key].size; var size = loc.children[key].size;
if (size == null) size = 0; if (size == null) size = 0;
var name = loc.children[key].name; var name = loc.children[key].name;
name = name.split('/').reverse()[0]; name = name.split('/').reverse()[0];
dataset.push ([name, size]); labels.push (name);
dataset.push (size);
//bgcolors.push(gen_color());
} }
var options = { this.plot_dataset = {
series: { labels: labels,
stack: true, datasets: [
shadowSize: 0, {
bars: { label: 'LOC',
show: true, data: dataset,
fill: false, //backgroundColor: bgcolors
align: "center", }
barWidth: 0.7, ]
lineWidth: 0.5 };
this.plot_options = {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: { display: false }
}, },
lines: { show: false, fill: true }, y: {
points: { show: false } beginAtZero: true,
}, grid: { display: true }
}
grid: { hoverable: true, clickable: true }, }
xaxes: [
{ mode: "categories",
autoscaleMargin: 0.01,
rotateTicks: 90,
tickLength: 0
},
],
yaxes: { }
}; };
this.plot_dataset = [ {label: "LOC", data: dataset} ]; this.chart = new Chart(this.graph_canvas[0].getContext('2d'), {
this.plot_options = options; type: 'bar',
this.plot_last_point = null; data: this.plot_dataset,
options: this.plot_options
this.graph_canvas.bind("plothover", function (event, pos, item) {
on_plot_hover.call (self, item);
}); });
} }
@ -599,7 +530,15 @@ var LocFileApp = (function ()
{ {
this.graph_canvas.width (this.graph_container.width() - 5); this.graph_canvas.width (this.graph_container.width() - 5);
this.graph_canvas.height (this.graph_container.height() - 10); this.graph_canvas.height (this.graph_container.height() - 10);
$.plot(this.graph_canvas, this.plot_dataset, this.plot_options); }
}
App.prototype.closeGraph = function ()
{
if (this.chart != null)
{
this.chart.destroy();
this.chart = null;
} }
} }
return App; return App;
@ -1339,12 +1278,14 @@ $this->load->view (
<div id="code_folder_graph" class="graph"> <div id="code_folder_graph" class="graph">
<div id="code_folder_loc_by_lang_container"> <div id="code_folder_loc_by_lang_container">
<div id="code_folder_loc_by_lang"></div> <!-- <div id="code_folder_loc_by_lang"></div> -->
<canvas id="code_folder_loc_by_lang"></canvas>
<div id="code_folder_loc_by_lang_error"></div> <div id="code_folder_loc_by_lang_error"></div>
</div> </div>
<div id="code_folder_loc_by_file_container"> <div id="code_folder_loc_by_file_container">
<div id="code_folder_loc_by_file"></div> <!-- <div id="code_folder_loc_by_file"></div> -->
<canvas id="code_folder_loc_by_file"></canvas>
<div id="code_folder_loc_by_file_error"></div> <div id="code_folder_loc_by_file_error"></div>
</div> </div>

13
codepot/src/js/chart.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long