<!-- Row -->
<div class="row">
    <div class="col-lg-9 col-xlg-9">
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-wrap">
                    <div>
                        <h4 class="card-title">Analytics Overview</h4>
                        <h6 class="card-subtitle">Overview of Monthly analytics</h6>
                    </div>
                    <div class="ml-auto align-self-center">
                        <ul class="list-inline m-b-0">
                            <li>
                                <h6 class="text-muted text-success">
                                    <i class="fa fa-circle font-10 m-r-10 "></i>Site A</h6>
                            </li>
                            <li>
                                <h6 class="text-muted text-info">
                                    <i class="fa fa-circle font-10 m-r-10"></i>Site B</h6>
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="height:300px;">
                    <canvas baseChart height="130" [datasets]="lineChartData2" [labels]="lineChartLabels2"
                        [options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend2"
                        [chartType]="lineChartType">
                    </canvas>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Total Visit</h4>
                <div class="d-flex">
                    <div class="align-self-center">
                        <h4 class="font-medium m-b-0">
                            <i class="ti-angle-up text-success"></i> 12456</h4>
                    </div>
                    <div class="ml-auto">
                        <div style="height: 40px; width: 100px">
                            <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels"
                                [options]="barChartOptions" [colors]="barChartColors" [legend]="barChartLegend"
                                [chartType]="barChartType">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Bounce rate</h4>
                <div class="d-flex">
                    <div class="align-self-center">
                        <h4 class="font-medium m-b-0">
                            <i class="ti-angle-down text-danger"></i> 456</h4>
                    </div>
                    <div class="ml-auto">
                        <div style="height: 40px; width: 100px">
                            <canvas baseChart [datasets]="barChartData1" [labels]="barChartLabels1"
                                [options]="barChartOptions1" [colors]="barChartColors1" [legend]="barChartLegend1"
                                [chartType]="barChartType1">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Page Views</h4>
                <div class="d-flex">
                    <div class="align-self-center">
                        <h4 class="font-medium m-b-0">
                            <i class="ti-angle-up text-success"></i> 2456</h4>
                    </div>
                    <div class="ml-auto">
                        <div style="height: 40px; width: 100px">
                            <canvas baseChart [datasets]="barChartData2" [labels]="barChartLabels2"
                                [options]="barChartOptions2" [colors]="barChartColors2" [legend]="barChartLegend2"
                                [chartType]="barChartType2">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Row -->
<!-- Row -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Visit From Countries</h4>
                <div class="table-responsive m-t-20">
                    <table class="table nowrap stylish-table">
                        <thead>
                            <tr>
                                <th>Language</th>
                                <th>Vists</th>
                                <th>%</th>
                                <th> </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <i class="flag-icon flag-icon-us"></i>
                                    <span class="country-name">U.S.A</span>
                                </td>
                                <td>18,224</td>
                                <td>
                                    <ngb-progressbar [showValue]="false" type="danger" [value]="50"></ngb-progressbar>
                                </td>
                                <td>50%</td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="flag-icon flag-icon-gb"></i>
                                    <span class="country-name">U.K</span>
                                </td>
                                <td>12,347</td>
                                <td>
                                    <ngb-progressbar [showValue]="false" type="success" [value]="60"></ngb-progressbar>
                                </td>
                                <td>60%</td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="flag-icon flag-icon-ca"></i>
                                    <span class="country-name">Canada</span>
                                </td>
                                <td>11,868</td>
                                <td>
                                    <ngb-progressbar [showValue]="false" type="info" [value]="70"></ngb-progressbar>
                                </td>
                                <td>50%</td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="flag-icon flag-icon-de"></i>
                                    <span class="country-name">Germany</span>
                                </td>
                                <td>10,346</td>
                                <td>
                                    <ngb-progressbar [showValue]="false" type="warning" [value]="50"></ngb-progressbar>
                                </td>
                                <td>50%</td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="flag-icon flag-icon-in"></i>
                                    <span class="country-name">India</span>
                                </td>
                                <td>8,354</td>
                                <td>
                                    <ngb-progressbar [showValue]="false" type="inverse" [value]="80"></ngb-progressbar>
                                </td>
                                <td>80%</td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="flag-icon flag-icon-au"></i>
                                    <span class="country-name">Australia</span>
                                </td>
                                <td>7,675</td>
                                <td>
                                    <ngb-progressbar [showValue]="false" type="danger" [value]="50"></ngb-progressbar>
                                </td>
                                <td>50%</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Row -->
<!-- Row -->
<div class="row">
    <div class="col-lg-4 col-xlg-3">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Browser Stats</h4>
                <table class="table browser m-t-30 no-border">
                    <tbody>
                        <tr>
                            <td style="width:40px">
                                <img src="assets/images/browser/chrome-logo.png" alt=logo />
                            </td>
                            <td>Google Chrome</td>
                            <td class="text-right">
                                <span class="label label-light-info">23%</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="assets/images/browser/firefox-logo.png" alt=logo />
                            </td>
                            <td>Mozila Firefox</td>
                            <td class="text-right">
                                <span class="label label-light-success">15%</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="assets/images/browser/safari-logo.png" alt=logo />
                            </td>
                            <td>Apple Safari</td>
                            <td class="text-right">
                                <span class="label label-light-primary">07%</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="assets/images/browser/opera-logo.png" alt=logo />
                            </td>
                            <td>Opera mini</td>
                            <td class="text-right">
                                <span class="label label-light-danger">23%</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="assets/images/browser/internet-logo.png" alt=logo />
                            </td>
                            <td>Microsoft edge</td>
                            <td class="text-right">
                                <span class="label label-light-megna">09%</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-8 col-xlg-9">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Sales Difference</h4>
                <h6 class="card-subtitle">Check the difference between two site</h6>
                <div style="height:320px;">
                    <canvas baseChart height="130" [datasets]="lineChartData" [labels]="lineChartLabels"
                        [options]="lineChartOptions2" [colors]="lineChartColors" [legend]="lineChartLegend"
                        [chartType]="lineChartType">
                    </canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Row -->
<div class="row">
    <div class="col-lg-6 col-xlg-6">
        <div class="card card-inverse card-info">
            <div class="card-body">
                <div class="d-flex">
                    <div class="m-r-20 align-self-center">
                        <h1 class="text-white">
                            <i class="ti-light-bulb"></i>
                        </h1>
                    </div>
                    <div>
                        <h3 class="card-title">Sales Analytics</h3>
                        <h6 class="card-subtitle">March 2017</h6>
                    </div>
                </div>
                <div class="row">
                    <div class="col-8 align-self-center">
                        <h2 class="font-light text-white">
                            <sup>
                                <small>
                                    <i class="ti-arrow-up"></i>
                                </small>
                            </sup>35487</h2>
                    </div>
                    <div class="col-4 p-t-10 p-b-20 text-right align-self-center">
                        <div style="height: 100px; width: 100px">
                            <canvas baseChart [datasets]="barChartData4" [labels]="barChartLabels4"
                                [options]="barChartOptions4" [colors]="barChartColors4" [legend]="barChartLegend4"
                                [chartType]="barChartType4">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-xlg-6">
        <div class="card card-inverse card-danger">
            <div class="card-body">
                <div class="d-flex">
                    <div class="m-r-20 align-self-center">
                        <h1 class="text-white">
                            <i class="ti-pie-chart"></i>
                        </h1>
                    </div>
                    <div>
                        <h3 class="card-title">Bandwidth usage</h3>
                        <h6 class="card-subtitle">March 2017</h6>
                    </div>
                </div>
                <div class="row">
                    <div class="col-8 align-self-center">
                        <h2 class="font-light text-white">50 GB</h2>
                    </div>
                    <div class="col-4 p-t-10 p-b-20 text-right align-self-center">
                        <div style="height: 100px; width: 100px">
                            <canvas baseChart [datasets]="barChartData3" [labels]="barChartLabels3"
                                [options]="barChartOptions3" [colors]="barChartColors3" [legend]="barChartLegend3"
                                [chartType]="barChartType3">
                            </canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Row -->

<div class="row">
    <div class="col-lg-6 col-xlg-6">
        <to-do></to-do>
    </div>
    <div class="col-lg-6 col-xlg-6">
        <app-recent-comment></app-recent-comment>
    </div>
</div>