Skip to content

Commit 0d4d300

Browse files
hugovkhugovk
committed
Show the charts in HTML
1 parent 854e5c5 commit 0d4d300

File tree

2 files changed

+168
-0
lines changed

2 files changed

+168
-0
lines changed

‎.editorconfig

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# editorconfig.org
2+
3+
root = true
4+
5+
[*]
6+
indent_style = space
7+
indent_size = 2
8+
end_of_line = lf
9+
charset = utf-8
10+
trim_trailing_whitespace = true
11+
insert_final_newline = true

‎index.html

+157
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.2/gh-fork-ribbon.min.css" />
6+
<!--<link rel="icon" href="favicon.ico">-->
7+
<style>
8+
body { margin-top:15px; }
9+
h1 { text-align: center; }
10+
h1,h2,h3 { line-height:1.2; }
11+
canvas, body {
12+
background-color: #EEEEEE;
13+
color: #444;
14+
font-size: 18px;
15+
line-height: 1.6;
16+
margin:40px auto;
17+
max-width: 650px;
18+
padding: 0 10px;
19+
}
20+
pre { text-align: left; }
21+
footer { text-align: center; }
22+
.github-fork-ribbon:before {
23+
background-color: #090;
24+
}
25+
.github-fork-ribbon:hover, .github-fork-ribbon:active {
26+
/* Until github-fork-ribbon-css #62 is released: */
27+
background-color: rgba(0, 0, 0, 0.0);
28+
outline: none;
29+
}
30+
.wrapper {
31+
display: grid;
32+
grid-template-columns: 1fr 8fr 1fr;
33+
grid-gap: 10px;
34+
grid-auto-rows: minmax(40px, auto);
35+
}
36+
.one {
37+
grid-column: 1;
38+
margin: auto auto auto 10px;
39+
text-align: left;
40+
}
41+
.two {
42+
grid-column: 2;
43+
margin: auto;
44+
text-align: center;
45+
}
46+
.three {
47+
grid-column: 3;
48+
margin: auto 10px auto auto;
49+
text-align: right;
50+
}
51+
a {
52+
color: #090;
53+
text-decoration: none;
54+
}
55+
a:hover,
56+
a:hover div {
57+
/*color: #007b00;*/
58+
color: white;
59+
background-color: #090;
60+
outline: 0.05em solid #090;
61+
}
62+
</style>
63+
<title>Top PyPI Packages: A weekly dump of the 5,000 most-downloaded packages from PyPI</title>
64+
<meta property="og:title" content="Top PyPI Packages">
65+
<meta property="og:type" content="website">
66+
<!--<meta property="og:image" content="https://hugovk.github.io/top-pypi-packages/image.png">-->
67+
<!--<meta property="og:image:width" content="630">-->
68+
<!--<meta property="og:image:height" content="630">-->
69+
<meta property="og:url" content="https://hugovk.github.io/top-pypi-packages/">
70+
<meta property="og:description" content="A weekly dump of the 5,000 most-downloaded packages from PyPI">
71+
</head>
72+
<body ng-app="app" ng-controller="packageCtrl">
73+
<div class="container">
74+
<div class="row">
75+
<div class="col-sm-6">
76+
<h1 id="top">Top PyPI Packages</h1>
77+
<h2 id="what">What is this?</h2>
78+
<p>A weekly dump of the 5,000 most-downloaded packages from PyPI.</p>
79+
<ul>
80+
<li><a href="https://hugovk.github.io/top-pypi-packages/top-pypi-packages-30-days.json">https://hugovk.github.io/top-pypi-packages/top-pypi-packages-30-days.json</a></li>
81+
<li><a href="https://hugovk.github.io/top-pypi-packages/top-pypi-packages-365-days.json">https://hugovk.github.io/top-pypi-packages/top-pypi-packages-365-days.json</a></li>
82+
</ul>
83+
<h2 id="thanks">Thanks</h2>
84+
<p>Thanks to <a href="https://pypi.python.org/">PyPI</a>, <a href="https://cloud.google.com/bigquery/">Google BigQuery</a>, <a href="https://github.com/ofek/pypinfo">pypinfo</a> and <a href="http://pythonwheels.com/">Python Wheels</a>.</p>
85+
</div>
86+
<div class="col-sm-6">
87+
<h2 id="charts">The charts</h2>
88+
<div>
89+
<span ng-bind="now_showing_packages">...</span>
90+
<span ng-bind="now_showing_days">...</span>
91+
</div>
92+
<button ng-click="show(500)" >Show 500</button>
93+
<button ng-click="show(1000)" >Show 1,000</button>
94+
<button ng-click="show(5000)" >Show 5,000</button>
95+
<button ng-click="days_30()" >30 days</button>
96+
<button ng-click="days_365()" >365 days</button>
97+
<div class="list">
98+
<span ng-hide="packages">JavaScript must be enabled to display the list of packages.</span>
99+
<a ng-repeat="package in packages" ng-href="https://pypi.python.org/pypi/{{ package.project }}" class="" ng-attr-title="{{ package.project }}">
100+
<div class="wrapper">
101+
<div class="one" id="{{ $index + 1 }}">{{ ($index + 1).toLocaleString() }}.</div>
102+
<div class="two" id="{{ package.project }}" ng-bind="package.project"></div>
103+
<div class="three" ng-bind="package.download_count.toLocaleString()"></div>
104+
</div>
105+
</a>
106+
</div>
107+
<div>
108+
<span ng-bind="now_showing_packages"></span>
109+
<span ng-bind="now_showing_days"></span>
110+
</div>
111+
<button ng-click="show(500)" >Show 500</button>
112+
<button ng-click="show(1000)" >Show 1,000</button>
113+
<button ng-click="show(5000)" >Show 5,000</button>
114+
<button ng-click="days_30()" >30 days</button>
115+
<button ng-click="days_365()" >365 days</button>
116+
</div>
117+
</div>
118+
<footer>
119+
<p>Last updated <span ng-bind="last_update"></span>. (Updated weekly.)</p>
120+
<a class="github-fork-ribbon" href="https://github.com/hugovk/top-pypi-packages" target="_blank" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
121+
</footer>
122+
</div>
123+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
124+
<script>
125+
var app = angular.module('app', [])
126+
.controller('packageCtrl', function ($scope, $http) {
127+
$scope.num_packages = 500;
128+
$scope.show = function (number) {
129+
$scope.packages = $scope.all_packages.slice(0, number);
130+
$scope.num_packages = number;
131+
$scope.now_showing_packages = 'Showing ' + number.toLocaleString() + ' packages';
132+
};
133+
$scope.days_30 = function () {
134+
$scope.all_packages = $scope.all_packages_30;
135+
$scope.show($scope.num_packages);
136+
$scope.now_showing_days = 'over 30 days.';
137+
};
138+
$scope.days_365 = function () {
139+
$scope.all_packages = $scope.all_packages_365;
140+
$scope.show($scope.num_packages);
141+
$scope.now_showing_days = 'over 365 days.';
142+
};
143+
$http.get('top-pypi-packages-365-days.json').then(function(res) {
144+
$scope.last_update = res.data.last_update;
145+
// Store all for later
146+
$scope.all_packages_365 = res.data['rows'];
147+
// We'll show these to begin
148+
$scope.days_365();
149+
});
150+
$http.get('top-pypi-packages-30-days.json').then(function(res) {
151+
// Store all for later
152+
$scope.all_packages_30 = res.data['rows'];
153+
});
154+
});
155+
</script>
156+
</body>
157+
</html>

0 commit comments

Comments
 (0)