【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析①
- 2020.12.04
- JavaScript備忘録
- Bootstrap4, Flot, Gentelella, JavaScript, グラフテンプレート, ツール, 備忘録, 情報収集
目次
【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析①
この中のDashboard2のグラフを使うにあたって、どう動いているかを調べてみました。
該当のデザイン箇所
該当箇所のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<div class="row"> <div class="col-md-12"> <div class="x_panel"> <div class="x_title"> <h2>Transaction Summary <small>Weekly progress</small></h2> <div class="filter"> <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc"> <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> <span>December 30, 2014 - January 28, 2015</span> <b class="caret"></b> </div> </div> <div class="clearfix"></div> </div> <div class="x_content"> <div class="col-md-9 col-sm-12 "> <div class="demo-container" style="height:280px"> <div id="chart_plot_02" class="demo-placeholder"></div> </div> <div class="tiles"> <div class="col-md-4 tile"> <span>Total Sessions</span> <h2>231,809</h2> <span class="sparkline11 graph" style="height: 160px;"> <canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas> </span> </div> <div class="col-md-4 tile"> <span>Total Revenue</span> <h2>$231,809</h2> <span class="sparkline22 graph" style="height: 160px;"> <canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas> </span> </div> <div class="col-md-4 tile"> <span>Total Sessions</span> <h2>231,809</h2> <span class="sparkline11 graph" style="height: 160px;"> <canvas width="200" height="60" style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas> </span> </div> </div> </div> <div class="col-md-3 col-sm-12 "> <div> <div class="x_title"> <h2>Top Profiles</h2> <ul class="nav navbar-right panel_toolbox"> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Settings 1</a> <a class="dropdown-item" href="#">Settings 2</a> </div> </li> <li><a class="close-link"><i class="fa fa-close"></i></a> </li> </ul> <div class="clearfix"></div> </div> <ul class="list-unstyled top_profiles scroll-view"> <li class="media event"> <a class="pull-left border-aero profile_thumb"> <i class="fa fa-user aero"></i> </a> <div class="media-body"> <a class="title" href="#">Ms. Mary Jane</a> <p><strong>$2300. </strong> Agent Avarage Sales </p> <p> <small>12 Sales Today</small> </p> </div> </li> <li class="media event"> <a class="pull-left border-green profile_thumb"> <i class="fa fa-user green"></i> </a> <div class="media-body"> <a class="title" href="#">Ms. Mary Jane</a> <p><strong>$2300. </strong> Agent Avarage Sales </p> <p> <small>12 Sales Today</small> </p> </div> </li> <li class="media event"> <a class="pull-left border-blue profile_thumb"> <i class="fa fa-user blue"></i> </a> <div class="media-body"> <a class="title" href="#">Ms. Mary Jane</a> <p><strong>$2300. </strong> Agent Avarage Sales </p> <p> <small>12 Sales Today</small> </p> </div> </li> <li class="media event"> <a class="pull-left border-aero profile_thumb"> <i class="fa fa-user aero"></i> </a> <div class="media-body"> <a class="title" href="#">Ms. Mary Jane</a> <p><strong>$2300. </strong> Agent Avarage Sales </p> <p> <small>12 Sales Today</small> </p> </div> </li> <li class="media event"> <a class="pull-left border-green profile_thumb"> <i class="fa fa-user green"></i> </a> <div class="media-body"> <a class="title" href="#">Ms. Mary Jane</a> <p><strong>$2300. </strong> Agent Avarage Sales </p> <p> <small>12 Sales Today</small> </p> </div> </li> </ul> </div> </div> </div> </div> </div> </div> |
このうち、メインのグラフを作っているのが16～18行目でした。
|
1 2 3 |
<div class="demo-container" style="height:280px"> <div id="chart_plot_02" class="demo-placeholder"></div> </div> |
demo-containerの見ている場所
これは後程出てくる Flot のexamples\example.cssを見ていました。
CSSの中身はこんな感じ。※demo-plaveholder もすぐ近くで見つけました。
但し、デモサイト上ではこの場所へのリンクを貼っていないので実際には意味のないclassの様です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.demo-container { box-sizing: border-box; width: 850px; height: 400px; padding: 20px 15px 15px 15px; margin: 15px auto 30px auto; border: 1px solid #ddd; background: #fff; background: linear-gradient(#f6f6f6 0, #fff 50px); background: -o-linear-gradient(#f6f6f6 0, #fff 50px); background: -ms-linear-gradient(#f6f6f6 0, #fff 50px); background: -moz-linear-gradient(#f6f6f6 0, #fff 50px); background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px); box-shadow: 0 3px 10px rgba(0,0,0,0.15); -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1); -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1); -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1); -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1); } .demo-placeholder { width: 100%; height: 100%; font-size: 14px; line-height: 1.2em; } |
demo-placeholderの見ている場所
Flot のexamples\example.cssにも記載がありましたが、もう1か所記載が見つかりました。
../build/css/custom.min.css
こちらはしっかりとリンクが貼られているので生きていますが、やっている事は高さの指定のみでした。
|
1 |
.demo-placeholder{height:280px} |
id=”chart_plot_02″ の見ている場所
../build/js/custom.min.js の中に値がありました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 |
function gd(year, month, day) { return new Date(year, month - 1, day).getTime(); } function init_flot_chart() { if (typeof($.plot) === 'undefined') { return; } console.log('init_flot_chart'); var arr_data1 = [ [gd(2012, 1, 1), 17], [gd(2012, 1, 2), 74], [gd(2012, 1, 3), 6], [gd(2012, 1, 4), 39], [gd(2012, 1, 5), 20], [gd(2012, 1, 6), 85], [gd(2012, 1, 7), 7] ]; var arr_data2 = [ [gd(2012, 1, 1), 82], [gd(2012, 1, 2), 23], [gd(2012, 1, 3), 66], [gd(2012, 1, 4), 9], [gd(2012, 1, 5), 119], [gd(2012, 1, 6), 6], [gd(2012, 1, 7), 9] ]; var arr_data3 = [ [0, 1], [1, 9], [2, 6], [3, 10], [4, 5], [5, 17], [6, 6], [7, 10], [8, 7], [9, 11], [10, 35], [11, 9], [12, 12], [13, 5], [14, 3], [15, 4], [16, 9] ]; var chart_plot_02_data = [ ]; var chart_plot_03_data = [ [0, 1], [1, 9], [2, 6], [3, 10], [4, 5], [5, 17], [6, 6], [7, 10], [8, 7], [9, 11], [10, 35], [11, 9], [12, 12], [13, 5], [14, 3], [15, 4], [16, 9] ]; for (var i = 0; i < 30; i++) { chart_plot_02_data.push([ new Date(Date.today().add(i).days()).getTime(), randNum() + i + i + 10 ]); } var chart_plot_01_settings = { series: { lines: { show: false, fill: true }, splines: { show: true, tension: 0.4, lineWidth: 1, fill: 0.4 }, points: { radius: 0, show: true }, shadowSize: 2 }, grid: { verticalLines: true, hoverable: true, clickable: true, tickColor: "#d5d5d5", borderWidth: 1, color: '#fff' }, colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"], xaxis: { tickColor: "rgba(51, 51, 51, 0.06)", mode: "time", tickSize: [1, "day"], //tickLength: 10, axisLabel: "Date", axisLabelUseCanvas: true, axisLabelFontSizePixels: 12, axisLabelFontFamily: 'Verdana, Arial', axisLabelPadding: 10 }, yaxis: { ticks: 8, tickColor: "rgba(51, 51, 51, 0.06)", }, tooltip: true }; var chart_plot_02_settings = { grid: { show: true, aboveData: true, color: "#3f3f3f", labelMargin: 10, axisMargin: 0, borderWidth: 0, borderColor: null, minBorderMargin: 5, clickable: true, hoverable: true, autoHighlight: true, mouseActiveRadius: 100 }, series: { lines: { show: true, fill: true, lineWidth: 2, steps: false }, points: { show: true, radius: 4.5, symbol: "circle", lineWidth: 3.0 } }, legend: { position: "ne", margin: [0, -25], noColumns: 0, labelBoxBorderColor: null, labelFormatter: function(label, series) { return label + ' '; }, width: 40, height: 1 }, colors: ['#96CA59', '#3F97EB', '#72c380', '#6f7a8a', '#f7cb38', '#5a8022', '#2c7282'], shadowSize: 0, tooltip: true, tooltipOpts: { content: "%s: %y.0", xDateFormat: "%d/%m", shifts: { x: -30, y: -50 }, defaultTheme: false }, yaxis: { min: 0 }, xaxis: { mode: "time", minTickSize: [1, "day"], timeformat: "%d/%m/%y", min: chart_plot_02_data[0][0], max: chart_plot_02_data[20][0] } }; var chart_plot_03_settings = { series: { curvedLines: { apply: true, active: true, monotonicFit: true } }, colors: ["#26B99A"], grid: { borderWidth: { top: 0, right: 0, bottom: 1, left: 1 }, borderColor: { bottom: "#7F8790", left: "#7F8790" } } }; if ($("#chart_plot_01").length) { console.log('Plot1 - testing...'); var stuff = $("#chart_plot_01").data('stuff'); // alert(stuff); // console.log() $.plot($("#chart_plot_01"), [arr_data1, arr_data2], chart_plot_01_settings); } if ($("#chart_plot_02").length) { console.log('Plot2'); $.plot($("#chart_plot_02"), [{ label: "Email Sent", data: chart_plot_02_data, lines: { fillColor: "rgba(150, 202, 89, 0.12)" }, points: { fillColor: "#fff" } }], chart_plot_02_settings); } if ($("#chart_plot_03").length) { console.log('Plot3'); $.plot($("#chart_plot_03"), [{ label: "Registrations", data: chart_plot_03_data, lines: { fillColor: "rgba(150, 202, 89, 0.12)" }, points: { fillColor: "#fff" } }], chart_plot_03_settings); }; } |
具体的な動作は226～240行目 【$.plot 】を動かしています。
$.plotは何者かと言うと、Flot.jsというグラフ作成用のプラグインに存在していました。
../vendors/Flot/jquery.flot.js この中の下の箇所
|
1 2 3 4 5 6 |
$.plot = function(placeholder, data, options) { //var t0 = new Date(); var plot = new Plot($(placeholder), data, options, $.plot.plugins); //(window.console ? console.log : alert)("time used (msecs): " + ((new Date()).getTime() - t0.getTime())); return plot; }; |
その為のデータの成形が266行目より上に記載されているようです。
まとめ
Gentelella はカッコいいけど使っている(使える)プラグインの数も多いし、作成サイト様に取捨選択しないとJSファイルが馬鹿デカくなってしまいます。
こうやって使うモノを選択して調査して集約すると、その過程で色々操れるようになるのでうれしいです。
-
前の記事
【Django】新規アプリを追加して諸々用意したらinternal server errorが出た話 2020.12.03
-
次の記事
【Docker×Django】後入れしたpandas がModuleNotFoundErrorになった 2020.12.04