【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析①

2020年12月4日 最終更新日時 : 2020年12月4日 akinori

【Bootstrap】かっこいいテンプレ Gentelella を見つけたので解析①

Gentelellaのデモページはココ

この中のDashboard2のグラフを使うにあたって、どう動いているかを調べてみました。

該当のデザイン箇所

該当箇所のコード

<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行目でした。

<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の様です。

.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

こちらはしっかりとリンクが貼られているので生きていますが、やっている事は高さの指定のみでした。

.demo-placeholder{height:280px}

id="chart_plot_02" の見ている場所

../build/js/custom.min.js の中に値がありました。

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 + '&nbsp;&nbsp;';
            },
            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 この中の下の箇所

    $.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ファイルが馬鹿デカくなってしまいます。

こうやって使うモノを選択して調査して集約すると、その過程で色々操れるようになるのでうれしいです。

 

＼ 最新情報をチェック ／

カテゴリー
JavaScript備忘録
タグ

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

前の記事
【Django】新規アプリを追加して諸々用意したらinternal server errorが出た話
2020年12月3日
次の記事
【Docker×Django】後入れしたpandas がModuleNotFoundErrorになった
2020年12月4日