app/views/analyze/analyze.html
<link rel="stylesheet" type="text/css" href="css/angular-toggle-switch.css">
<link rel="stylesheet" type="text/css" href="css/ng-tags-input.min.css">
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<link rel="stylesheet" type="text/css" href="css/ng-tags-input.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.vertical-tabs.min.css">
<link rel="stylesheet" type="text/css" href="css/angular-chart.css">
<div class="content-wrapper report-content-wrapper" ng-show="root.twitterSession && Analyze.doneReporting">
<div class="search-container container-fluid">
<div class="title-as-current-search-term bottom-margin-small">
<center><span>report:{{username}}</span></center>
</div>
</div>
<div class="filters-container container">
<ul class="search-modes">
<li class="active" ng-class="(root.globalFilter === 'followers') ? 'active' : ''" ng-click="getstatfollower()">
<a href="#">Followers</a>
</li>
<!--
<li ng-class="(root.globalFilter === 'following') ? 'active' : ''" ng-click="getstatfollowing()">
<a href="#">Following</a>
</li>
<li ng-class="(root.globalFilter === 'iot') ? 'active' : ''" ng-click="getstatiot()">
<a href="#">IoT</a>
</li>
-->
</ul>
</div>
<!-- Main content -->
<div class="container content-container">
<!-- Left content: Who to follow, trends -->
<div class="col-md-3 padded ">
<div class="home-user-info no-top-margin">
<div class="blue-background-placeholder">
<img ng-src="{{profilebanner}}" s>
</div>
<div class="home-user-info-content" style="width:268px;">
<div class="top-content">
<img ng-src="{{profilepicurl}}" fallback-src="/images/anon_200x200.png" >
<div class="name-and-screen-name">
<span class="home-user-name">{{name}}</span>
<span class="home-user-screen-name">@{{username}}</span>
</div>
</div>
<div class="bottom-content">
<div class="user-no-tweets">
<a href="">Tweets<br><span>{{tweetcount}}</span></a>
</div>
<div class="user-no-followings">
<a href="">Following<br><span>{{followingstotal}}</span></a>
</div>
<div class="user-no-followers">
<a href="">Followers<br><span>{{followerstotal}}</span></a>
</div>
</div>
</div>
</div>
<input type="text" class="inputname" ng-model="username" placeholder="screenname" required></input>
<br><center>
<button type="button" id="create-report-btn" class="btn btn-loklak-blue btn-lg" aria-label="Left Align" ng-click="getstatfollower()" >
<span class="fa fa-bar-chart" aria-hidden="true"> Create Report</span>
</button>
</center><br>
<div ng-show="Analyze.topology.followers.length !== 0" class="followers-list-container followers-list">
<h2>Followers<span ng-click="Analyze.showAllFollowers();" ng-show="Analyze.topology.followers.length > Analyze.showFollowersLimit">Show all</span></h2>
<div class="followers-link-container clearfix">
<a class="topology-item" ng-repeat="item in Analyze.topology.followers | limitTo: Analyze.showFollowersLimit" ng-href="{{ './search?q=from:' + item.screen_name}}">
<img ng-src="{{item.profile_image_url_https}}">
</a>
</div>
</div>
<div ng-show="Analyze.topology.following.length !== 0" class="followers-list-container">
<h2>Following<span ng-click="Analyze.showAllFollowings();" ng-show="Analyze.topology.following.length > Analyze.showFollowingsLimit">Show all</span></h2>
<div class="followers-link-container clearfix">
<a class="topology-item" ng-repeat="item in Analyze.topology.following | limitTo: Analyze.showFollowingsLimit" ng-href="{{ './search?q=from:' + item.screen_name}}">
<img ng-src="{{item.profile_image_url_https}}">
</a>
</div>
</div>
</div>
<!-- Center result + option filters -->
<div class="result-container col-md-6">
<!-- Filters -->
<!-- Main analysis -->
<div id="loadmsg" class="main-result-container whitebg">
<img id="loader" src="../images/whiteloader.gif"></img>
<h3 id="loadingmessage">Analyzing the latest data for you.Please hold on.<h3>
<div id="notfoundmessage">Sorry we did not find anyone with this account</div>
<div id="errormessage">Sorry there's some glitch :(. Please try again later.</div>
</div>
<div id="analysis-report" class="main-result-container whitebg" >
<div class="row">
<div class="col-md-6 margin-right-neg">
<h3 class="analysis-titles">Country-wise Followers</h3>
<canvas id="doughnut" class="chart chart-doughnut top-margin-mid" data="countryvalues" colour="{#F7464A,#46BFBD,#FDB45C,#878BB6}" labels="countrylabels">
</canvas>
</div>
<div class="col-md-6 margin-right-pos" >
<table class="table ">
<th class="tableheading countryname">Country</th><th class="tableheading">Followers</th><th class="tableheading">Percentage</th>
<tr ng-repeat="country in countrydata | limitTo:5">
<td align="left" >{{country.country}}</td><td align="center">{{country.followers}}</td><td align="center">{{country.percentage}}%</td>
</table>
</div><!--end span8-->
</div>
<div class="row">
<div class="col-md-6 margin-right-neg">
<h3 class="analysis-titles">City-wise Followers</h3>
<canvas id="doughnut" class="chart chart-doughnut top-margin-mid"data="cityvalues" colour="{#F7464A,#46BFBD,#FDB45C,#878BB6}" labels="citylabels">
</canvas>
</div>
<div class="col-md-6 margin-right-pos">
<table class="table">
<th class="tableheading">City</th><th class="tableheading">Followers</th><th class="tableheading">Percentage</th>
<tr ng-repeat="city in citydata | limitTo:5">
<td align="left">{{city.city}}</td><td align="center">{{city.followers}}</td><td align="center">{{city.percentage}}%</i></td>
</table>
</div><!--end span8-->
</div>
</div>
<!-- People results -->
<div ng-if="search.peopleSearch" class="main-result-container">
<div ng-repeat="account in search.accounts" account data="account"></div>
</div>
</div>
<!-- Map result -->
<div ng-show="search.showMap" class="search-map-wrapper map-container-parent">
<div id="search-map"></div>
</div>
<!-- Right content: Other statistics -->
<div id="inffollowers" class="dashboard dashboard-right col-md-3 padded">
<div class="row whitebg" style="margin-left:0px">
<h3 class="analysis-titles">Follower's distribution</h3>
<canvas id="doughnut" class="chart chart-doughnut" legend="true" data="categoryvalues"labels="categorylabels">
</canvas>
</div>
<div class="row whitebg " style="margin-left:0px; margin-bottom:10px;margin-top:10px;">
<h3 class="analysis-titles-list">Most Influential Followers</h3>
<div class="scrollr">
<div ng-repeat="follower in followers_follower | limitTo:100">
<div class="home-user-info" style="width:100%;padding-top:20px; margin-bottom:5px;">
<div class="home-user-info-content">
<div class="top-content">
<img src="{{follower.profileimg}}">
<div class="name-and-screen-name">
<span class="home-user-name">{{follower.name}}</span>
<span class="home-user-screen-name">@{{follower.screenname}}</span>
</div>
</div>
<div class="bottom-content">
<div class="user-no-tweets">
<a href="">Tweets<br><span>{{follower.statuses_count}}</span></a>
</div>
<div class="user-no-followings">
<a href="">Following<br><span>{{follower.following}}</span></a>
</div>
<div class="user-no-followers">
<a href="">Followers<br><span>{{follower.followers}}</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div ng-hide="root.twitterSession" ng-include src="'anonymous-session-content.html'"></div>
<!--
-->