Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {% extends 'base.html' %}
- {%load staticfiles%}
- {% block content %}
- <style>
- select.form-control:not([size]):not([multiple]) {
- height: calc(2.25rem + 10px);
- }
- #graph-card {
- background-color:#fff;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- width: 98%;
- min-height: 200px ;
- margin: 5px;
- transition: 0.3s;
- border-radius: 5px;
- border: 1px solid white;
- }
- .buttontoggle {
- background-color: #3d6bce; /* Green */
- border: none;
- color: white;
- padding: 16px 32px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- margin: 4px 2px;
- -webkit-transition-duration: 0.4s; /* Safari */
- transition-duration: 0.4s;
- cursor: pointer;
- }
- .buttontoogle {
- background-color: white;
- color: black;
- border: 2px solid #008CBA;
- }
- .button2toggle:hover {
- background-color: #008CBA;
- color: white;
- }
- </style>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
- <div id="content" style="background-color: #f4f4f4">
- <button onclick="topFunction()" id="myBtn" title="Go to top"><i class="glyphicon glyphicon-hand-up"></i></button>
- <div>
- <button class="buttontoggle button2toggle" type="button" id="sidebarCollapse"><i class="glyphicon glyphicon-align-left" style="color: white;"></i>
- <span style="color: white;">Toggle Sidebar</span></button>
- </div>
- <br>
- <!---------------Start of Report ------------>
- <h3 style="font-family:sans-serif;" align="center" >My Influencer's : {{ user }} </h3>
- <div class="col-md-12 pgraph">
- <div id="treedata"></div>
- </div>
- <!----div class="row"------>
- <div class="col-md-12 graph ">
- <h3 class="text-center">Segmentation by Influence</h3><hr>
- <!----table -------->
- <div id="graph-card">
- <div class="col-md-12" id="tt_cat">
- </br>
- <form method="get" action="{% url 'dashboard:influencer_analysis' %}" enctype="multipart/form-data" class="cts"> {% csrf_token %}
- <select id = "category" name ="cat_sel" class="form-control" required >
- <option value="all" selected="selected">Choose Categories</option>
- {%for i in follower_cat %}
- <option name = '{{i}}' value="{{i}}">{{i}}</option>
- {% endfor %}
- </select>
- <button type="submit" class="btn btn-success btn-block" style="background: #3d6bce;">Submit</button>
- </form>
- </div>
- <!--- graphs------>
- <div class="table-responsive">
- <table class="table" style="font-size: 13px;">
- <thead>
- <tr>
- <th scope="col">User</th>
- <th scope="col">Name</th>
- <th scope="col">Bio</th>
- <th scope="col"># of followers</th>
- <th scope="col">Last Active in Days</th>
- </tr>
- </thead>
- <tbody id="d1" style=""></tbody>
- </table>
- </div>
- <div id="pagination_block"></div>
- </div>
- </div>
- </div>
- <!---Loading on default----->
- <script>
- $(function(){
- var page = 1,
- pagelimit = 10,
- totalrecord = 0;
- fetchData(page);
- // handling the prev-btn
- $(document).on('click', ".page-link", function(){
- page = $(this).data('page');
- fetchData(page);
- console.log("current Page: " + page);
- return false;
- })
- $(document).on('click', "#previous", function(){
- if (page > 1) {
- page--;
- fetchData(page);
- }
- console.log("Prev Page: " + page);
- return false;
- });
- // handling the next-btn
- $(document).on('click', "#next", function(){
- if (page * 10 < totalrecord) {
- page++;
- fetchData(page);
- }
- console.log("Next Page: " + page);
- return false;
- });
- function fetchData(page){
- var category = document.getElementById('category').value;
- var url = "{% url 'api:influencer_list' %}?";
- if (category && category != "all")
- {
- url += "cat_sel=" + category + "&";
- }
- if(page)
- {
- url += "page=" + page;
- }
- $.ajax({
- url: url,
- method: 'get',
- success:function(data){
- totalrecord = data.count;
- var cat_option = ''
- for(var customer in data.results){
- cat_option+= '<tr><td><img src='+data.results[customer].t_profile_image_url +' class="img-circle" alt="image description" width="45" height="45"/></td><td><a href="http://twitter.com/'+data.results[customer].t_screen_name+'" target="_blank">'+data.results[customer].t_screen_name+'</a></td> <td>'+data.results[customer].t_description+'</td><td>'+data.results[customer].t_followers_count+'</td><td>'+data.results[customer].t_status_created_at_daydiff+'</td></tr>'
- }
- $('#d1').html(cat_option)
- var pagination_html = "<ul class=\"pager\">";
- pagination_html += "<li><button id='previous' class='btn btn-primary'><<</button></li>";
- for(var page_item = 0; page_item < data.total_pages; page_item++)
- {
- if(page_item >= (page - 1) && page_item <= (page + 1))
- {
- pagination_html += "<li class=\"page-item\">";
- pagination_html += "<a data-page=\""+ page_item + "\" class=\"page-link\" href=\"#\">" + page_item + " </a>";
- pagination_html += "</li>";
- }
- }
- pagination_html += "</li>";
- pagination_html += "</ul>";
- $('#pagination_block').html(pagination_html);
- },
- error:function(errorData){
- console.log('error')
- console.log(errorData)
- }
- });
- }
- });
- </script>
- <!-- graph and customer selection with pagination -->
- <script>
- $(document).ready(function(){
- var t20 = $(".cts")
- t20.submit(function(event){
- event.preventDefault();
- var page = 1,
- pagelimit = 10,
- totalrecord = 0;
- fData();
- // handling the prev-btn
- $("#previous").on("click", function(){
- if (page > 1) {
- page--;
- fData();
- }
- console.log("Prev Page cat: " + page);
- });
- // handling the next-btn
- $("#next").on("click", function(){
- if (page * 10 < totalrecord) {
- page++;
- fData();
- }
- console.log("Next Page cat: " + page);
- });
- function fData(){
- var category = document.getElementById('category').value;
- $.ajax({
- url: "{% url 'api:influencer_list' %}?cat_sel="+category,
- method: 'get',
- data: {
- page: page,
- },
- success:function(data){
- var cat_option = ''
- for(var customer in data.results){
- cat_option+= '<tr><td><img src='+data.results[customer].t_profile_image_url +' class="img-circle" alt="image description" width="45" height="45"/></td><td><a href="http://twitter.com/'+data.results[customer].t_screen_name+'" target="_blank">'+data.results[customer].t_screen_name+'</a></td> <td>'+data.results[customer].t_description+'</td><td>'+data.results[customer].t_followers_count+'</td><td>'+data.results[customer].t_status_created_at_daydiff+'</td></tr>'
- }
- $('#d1').html(cat_option)
- },
- error:function(errorData){
- console.log('error')
- console.log(errorData)
- }
- });
- }
- });
- return false;
- });
- </script>
- <!-- treemap -->
- <script src="https://code.highcharts.com/highcharts.js"></script>
- <script src="https://code.highcharts.com/modules/treemap.js"></script>
- <div id="container"></div>
- <style>
- #treedata {
- min-length: 100%;
- min-width: 100%;
- max-width: 100%;
- margin: 0 auto;
- }
- </style>
- <script>
- Highcharts.chart('treedata', {
- series: [{
- type: "treemap",
- layoutAlgorithm: 'stripes',
- alternateStartingDirection: true,
- levels: [{
- level: 1,
- layoutAlgorithm: 'sliceAndDice',
- dataLabels: {
- enabled: true,
- align: 'center',
- verticalAlign: 'center',
- style: {
- fontSize: '18px',
- fontWeight: 'lighter'
- }
- }
- }],
- data: {{ data | safe}}
- }],
- title: {
- text: ' '
- }
- });
- </script>
- {% endblock %}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement