ragil/report_satu_data
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
report_satu_data/public/template/sources/pages/components-statistic.html
Ragil Bayu 59963790c0 first commit - report data
2025-03-21 10:22:45 +07:00

291 lines
15 KiB
HTML
Raw Permalink Blame History

{% set title = 'Components › Statistic' %}
{% set page = 'components-statistic.html' %}
{% extends 'layouts/master.html' %}
{% block plugins_css %}
<link rel="stylesheet" href="../node_modules/jqvmap/dist/jqvmap.min.css">
<link rel="stylesheet" href="../node_modules/flag-icon-css/css/flag-icon.min.css">
{% endblock %}
{% block content %}
<section class="section">
<div class="section-header">
<h1>Statistic</h1>
<div class="section-header-breadcrumb">
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
<div class="breadcrumb-item"><a href="#">Components</a></div>
<div class="breadcrumb-item">Statistic</div>
</div>
</div>
<div class="section-body">
<h2 class="section-title">Statistics</h2>
<p class="section-lead">The chat component and is equipped with a JavaScript API, making it easy for you to integrate with Back-end.</p>
<div class="row">
<div class="col-12 col-sm-12 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Summary</h4>
<div class="card-header-action">
<a href="#summary-chart" data-tab="summary-tab" class="btn active">Chart</a>
<a href="#summary-text" data-tab="summary-tab" class="btn">Text</a>
</div>
</div>
<div class="card-body">
<div class="summary">
<div class="summary-info" data-tab-group="summary-tab" id="summary-text">
<h4>$1,858</h4>
<div class="text-muted">Sold 4 items on 2 customers</div>
<div class="d-block mt-2">
<a href="#">View All</a>
</div>
</div>
<div class="summary-chart active" data-tab-group="summary-tab" id="summary-chart">
<canvas id="myChart" height="180"></canvas>
</div>
<div class="summary-item">
<h6 class="mt-3">Item List <span class="text-muted">(4 Items)</span></h6>
<ul class="list-unstyled list-unstyled-border">
<li class="media">
<a href="#">
<img alt="image" class="mr-3 rounded" width="50" src="../assets/img/products/product-4-50.png">
</a>
<div class="media-body">
<div class="media-right">$805</div>
<div class="media-title"><a href="#">iBook Noob</a></div>
<div class="text-small text-muted">by <a href="#">Ahmad Sutisna</a> <div class="bullet"></div> Sunday</div>
</div>
</li>
<li class="media">
<a href="#">
<img alt="image" class="mr-3 rounded" width="50" src="../assets/img/products/product-1-50.png">
</a>
<div class="media-body">
<div class="media-right">$405</div>
<div class="media-title"><a href="#">Headphone Blitz</a></div>
<div class="text-small text-muted">by <a href="#">Hasan Basri</a> <div class="bullet"></div> Sunday</div>
</div>
</li>
<li class="media">
<a href="#">
<img alt="image" class="mr-3 rounded" width="50" src="../assets/img/products/product-2-50.png">
</a>
<div class="media-body">
<div class="media-right">$499</div>
<div class="media-title"><a href="#">RocketZ</a></div>
<div class="text-muted text-small">by <a href="#">Hasan Basri</a> <div class="bullet"></div> Sunday
</div>
</div>
</li>
<li class="media">
<a href="#">
<img alt="image" class="mr-3 rounded" width="50" src="../assets/img/products/product-3-50.png">
</a>
<div class="media-body">
<div class="media-right">$149</div>
<div class="media-title"><a href="#">Xiaomay Readme 4.0</a></div>
<div class="text-small text-muted">by <a href="#">Kusnaedi</a> <div class="bullet"></div> Tuesday
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Statistics</h4>
<div class="card-header-action">
<a href="#" class="btn active">Week</a>
<a href="#" class="btn">Month</a>
<a href="#" class="btn">Year</a>
</div>
</div>
<div class="card-body">
<canvas id="myChart2" height="180"></canvas>
<div class="statistic-details mt-1">
<div class="statistic-details-item">
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 7%</div>
<div class="detail-value">$243</div>
<div class="detail-name">Today</div>
</div>
<div class="statistic-details-item">
<div class="text-small text-muted"><span class="text-danger"><i class="fas fa-caret-down"></i></span> 23%</div>
<div class="detail-value">$2,902</div>
<div class="detail-name">This Week</div>
</div>
<div class="statistic-details-item">
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span>9%</div>
<div class="detail-value">$12,821</div>
<div class="detail-name">This Month</div>
</div>
<div class="statistic-details-item">
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 19%</div>
<div class="detail-value">$92,142</div>
<div class="detail-name">This Year</div>
</div>
</div>
</div>
</div>
<div class="card mt-4">
<div class="card-header">
<h4>Popular Browser</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col mb-4 mb-lg-0 text-center">
<div class="browser browser-chrome"></div>
<div class="mt-2 font-weight-bold">Chrome</div>
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 48%</div>
</div>
<div class="col mb-4 mb-lg-0 text-center">
<div class="browser browser-firefox"></div>
<div class="mt-2 font-weight-bold">Firefox</div>
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 26%</div>
</div>
<div class="col mb-4 mb-lg-0 text-center">
<div class="browser browser-safari"></div>
<div class="mt-2 font-weight-bold">Safari</div>
<div class="text-small text-muted"><span class="text-danger"><i class="fas fa-caret-down"></i></span> 14%</div>
</div>
<div class="col mb-4 mb-lg-0 text-center">
<div class="browser browser-opera"></div>
<div class="mt-2 font-weight-bold">Opera</div>
<div class="text-small text-muted">7%</div>
</div>
<div class="col mb-4 mb-lg-0 text-center">
<div class="browser browser-internet-explorer"></div>
<div class="mt-2 font-weight-bold">IE</div>
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 5%</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Visitors</h4>
</div>
<div class="card-body">
<div id="visitorMap" data-height="190"></div>
</div>
<div class="card-footer card-footer-grey pt-0">
<div class="statistic-details mt-4 align-items-center justify-content-center">
<div class="statistic-details-item col-sm-4 col-12">
<div class="detail-chart">
<div class="sparkline-line-chart"></div>
</div>
<div class="detail-value">12,329</div>
<div class="detail-name">Visits</div>
</div>
<div class="statistic-details-item col-sm-4 col-12">
<div class="detail-chart">
<div class="sparkline-line-chart"></div>
</div>
<div class="detail-value">28%</div>
<div class="detail-name">Referral</div>
</div>
<div class="statistic-details-item col-sm-4 col-12">
<div class="detail-chart">
<div class="sparkline-line-chart"></div>
</div>
<div class="detail-value">72%</div>
<div class="detail-name">Organic</div>
</div>
</div>
</div>
</div>
<div class="card mt-4">
<div class="card-body">
<div class="row">
<div class="col-sm-3 col-6 mb-md-0 mb-4 text-center">
<div class="img-shadow flag-icon flag-icon-id"></div>
<div class="mt-2 font-weight-bold text-nowrap">Indonesia</div>
<div class="text-small text-muted">8,400</div>
</div>
<div class="col-sm-3 col-6 mb-md-0 mb-4 text-center">
<div class="img-shadow flag-icon flag-icon-ps"></div>
<div class="mt-2 font-weight-bold text-nowrap">Palestine</div>
<div class="text-small text-muted"><span class="text-primary"><i class="fas fa-caret-up"></i></span> 7,328</div>
</div>
<div class="col-sm-3 col-6 text-center">
<div class="img-shadow flag-icon flag-icon-sy"></div>
<div class="mt-2 font-weight-bold text-nowrap">Syiria</div>
<div class="text-small text-muted"><span class="text-danger"><i class="fas fa-caret-down"></i></span> 5,830</div>
</div>
<div class="col-sm-3 col-6 text-center">
<div class="img-shadow flag-icon flag-icon-my"></div>
<div class="mt-2 font-weight-bold text-nowrap">Malaysia</div>
<div class="text-small text-muted">4,763</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-lg-6 mt-lg-0 mt-sm-4">
<div class="card">
<div class="card-header">
<h4>Referral URL</h4>
</div>
<div class="card-body">
<canvas id="myChart3" height="170"></canvas>
<div class="mb-4 mt-4">
<div class="text-small float-right font-weight-bold text-muted">558</div>
<div class="font-weight-bold mb-1">Google</div>
<div class="progress" data-height="3">
<div class="progress-bar" role="progressbar" data-width="80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<div class="text-small float-right font-weight-bold text-muted">338</div>
<div class="font-weight-bold mb-1">Facebook</div>
<div class="progress" data-height="3">
<div class="progress-bar" role="progressbar" data-width="67%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<div class="text-small float-right font-weight-bold text-muted">238</div>
<div class="font-weight-bold mb-1">Bing</div>
<div class="progress" data-height="3">
<div class="progress-bar" role="progressbar" data-width="58%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="mb-4">
<div class="text-small float-right font-weight-bold text-muted">190</div>
<div class="font-weight-bold mb-1">Yahoo</div>
<div class="progress" data-height="3">
<div class="progress-bar" role="progressbar" data-width="36%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block plugins_js %}
<script src="../node_modules/jquery-sparkline/jquery.sparkline.min.js"></script>
<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
<script src="../node_modules/jqvmap/dist/jquery.vmap.min.js"></script>
<script src="../node_modules/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="../node_modules/jqvmap/dist/maps/jquery.vmap.indonesia.js"></script>
{% endblock %}
{% block page_js %}
<script src="../assets/js/page/components-statistic.js"></script>
{% endblock %}
Reference in New Issue View Git Blame Copy Permalink