evol-npm-pulse 1.0.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -5
- package/css/me.css +75 -19
- package/css/pulse.css +377 -30
- package/css/themes/dark/bg0.png +0 -0
- package/css/themes/dark/dark.css +80 -0
- package/css/themes/evol-blue/evol-blue.css +80 -0
- package/css/themes/evol-blue/spirals.png +0 -0
- package/css/themes/light/bg0.png +0 -0
- package/css/themes/light/light.css +69 -0
- package/{chart.html → dashboard.html} +34 -6
- package/index.html +33 -11
- package/js/dashboard.js +799 -0
- package/js/npm-data.js +278 -16
- package/js/pulse.js +125 -53
- package/js/theme.js +79 -0
- package/package.json +1 -1
- package/screenshots/cards-dark.png +0 -0
- package/screenshots/dash-dark.png +0 -0
- package/sitemap.xml +1 -1
- package/js/chart.js +0 -134
- package/npm-pulse-charts.png +0 -0
- package/npm-pulse.png +0 -0
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/*
|
|
2
|
+
dark theme
|
|
3
|
+
Copied from OMG Themes - https://evoluteur.github.io/omg-themes/
|
|
4
|
+
(c) 2026 Olivier Giulieri
|
|
5
|
+
*/
|
|
6
|
+
:root {
|
|
7
|
+
--content-left: 30px;
|
|
8
|
+
--text: #e6ecf5;
|
|
9
|
+
--muted: #9fb0c8;
|
|
10
|
+
--heading: #ffcc80;
|
|
11
|
+
--link: #ffb74d;
|
|
12
|
+
--link-hover: #ffcc80;
|
|
13
|
+
--icon-current: white; /* the icon of the page you are on */
|
|
14
|
+
|
|
15
|
+
--nav-bg: #11161f;
|
|
16
|
+
--nav-text: #e6ecf5;
|
|
17
|
+
--nav-link: #92cddc;
|
|
18
|
+
--nav-link-hover: #ff9900;
|
|
19
|
+
|
|
20
|
+
--card-bg: #2d3848;
|
|
21
|
+
--card-border: #3c4a5f;
|
|
22
|
+
--card-foot: #b7c4d6;
|
|
23
|
+
--card-strong: white;
|
|
24
|
+
|
|
25
|
+
--accent: #ffcc80;
|
|
26
|
+
--accent-soft: rgba(255, 204, 128, 0.18);
|
|
27
|
+
/* the sparkline (area chart) tracks --accent here, but light
|
|
28
|
+
overrides it to use evol-blue's blue instead */
|
|
29
|
+
--spark-line: var(--accent);
|
|
30
|
+
--spark-fill: var(--accent-soft);
|
|
31
|
+
/* downloads over the picked period */
|
|
32
|
+
--period-bar: #90caf9;
|
|
33
|
+
--grid: rgba(255, 255, 255, 0.18);
|
|
34
|
+
--up: #7fe3a5;
|
|
35
|
+
--down: #ff9aa8;
|
|
36
|
+
--fork: #b39ddb;
|
|
37
|
+
|
|
38
|
+
--input-bg: #2d3848;
|
|
39
|
+
--input-text: #e6ecf5;
|
|
40
|
+
--input-border: #3c4a5f;
|
|
41
|
+
|
|
42
|
+
--panel-bg: #2d3848;
|
|
43
|
+
--panel-text: #e6ecf5;
|
|
44
|
+
--panel-border: #3c4a5f;
|
|
45
|
+
--panel-muted: #9fb0c8;
|
|
46
|
+
--panel-link: #70ade6;
|
|
47
|
+
--panel-grid: rgba(255, 255, 255, 0.15);
|
|
48
|
+
--chart-1: #70ade6;
|
|
49
|
+
--chart-2: #ffa500;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
html {
|
|
53
|
+
scroll-behavior: smooth;
|
|
54
|
+
color: var(--text);
|
|
55
|
+
background-color: #1a212d;
|
|
56
|
+
background-image: url("bg0.png");
|
|
57
|
+
background-repeat: repeat-y;
|
|
58
|
+
}
|
|
59
|
+
body {
|
|
60
|
+
font-family: "Overpass", sans-serif;
|
|
61
|
+
color: var(--text);
|
|
62
|
+
}
|
|
63
|
+
a,
|
|
64
|
+
a:visited {
|
|
65
|
+
color: var(--link);
|
|
66
|
+
}
|
|
67
|
+
a:active,
|
|
68
|
+
a:hover {
|
|
69
|
+
color: var(--link-hover);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* title gradient, same colors as react-morph-charts dark theme */
|
|
73
|
+
h1,
|
|
74
|
+
h2,
|
|
75
|
+
h3 {
|
|
76
|
+
background: linear-gradient(white, #70ade6);
|
|
77
|
+
-webkit-background-clip: text;
|
|
78
|
+
background-clip: text;
|
|
79
|
+
-webkit-text-fill-color: transparent;
|
|
80
|
+
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/*
|
|
2
|
+
evol-blue theme
|
|
3
|
+
Copied from OMG Themes - https://evoluteur.github.io/omg-themes/
|
|
4
|
+
(c) 2026 Olivier Giulieri
|
|
5
|
+
*/
|
|
6
|
+
:root {
|
|
7
|
+
--content-left: 0px;
|
|
8
|
+
--text: white;
|
|
9
|
+
--muted: #bbdefb;
|
|
10
|
+
--heading: #e08a00; /* darker than the light-orange accent, for contrast on the blue background */
|
|
11
|
+
--link: #ffb74d;
|
|
12
|
+
--link-hover: #ffcc80;
|
|
13
|
+
--icon-current: white; /* the icon of the page you are on */
|
|
14
|
+
|
|
15
|
+
--nav-bg: #1a1a1a;
|
|
16
|
+
--nav-text: white;
|
|
17
|
+
--nav-link: #92cddc;
|
|
18
|
+
--nav-link-hover: #ff9900;
|
|
19
|
+
|
|
20
|
+
--card-bg: #5594f4;
|
|
21
|
+
--card-border: #0288d1;
|
|
22
|
+
--card-foot: #dbe9ff;
|
|
23
|
+
--card-strong: white;
|
|
24
|
+
|
|
25
|
+
--accent: #ffcc80;
|
|
26
|
+
--accent-soft: rgba(255, 255, 255, 0.22);
|
|
27
|
+
--spark-line: var(--accent);
|
|
28
|
+
--spark-fill: var(--accent-soft);
|
|
29
|
+
/* downloads over the picked period */
|
|
30
|
+
--period-bar: rgba(255, 255, 255, 0.55);
|
|
31
|
+
--grid: rgba(255, 255, 255, 0.25);
|
|
32
|
+
--up: #b9f6ca;
|
|
33
|
+
--down: #ffcdd2;
|
|
34
|
+
--fork: #c5a3ff;
|
|
35
|
+
|
|
36
|
+
--input-bg: white;
|
|
37
|
+
--input-text: #1a1a1a;
|
|
38
|
+
--input-border: #0288d1;
|
|
39
|
+
|
|
40
|
+
/* chart panels look like the project cards */
|
|
41
|
+
--panel-bg: #5594f4;
|
|
42
|
+
--panel-text: white;
|
|
43
|
+
--panel-border: #0288d1;
|
|
44
|
+
--panel-muted: #dbe9ff;
|
|
45
|
+
--panel-link: #ffb74d;
|
|
46
|
+
--panel-grid: rgba(255, 255, 255, 0.25);
|
|
47
|
+
--chart-1: #ffcc80;
|
|
48
|
+
--chart-2: #4527a0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
html {
|
|
52
|
+
scroll-behavior: smooth;
|
|
53
|
+
color: var(--text);
|
|
54
|
+
background-color: #0288d1;
|
|
55
|
+
background-image: url("spirals.png");
|
|
56
|
+
background-repeat: repeat;
|
|
57
|
+
}
|
|
58
|
+
body {
|
|
59
|
+
font-family: "Overpass", sans-serif;
|
|
60
|
+
color: var(--text);
|
|
61
|
+
}
|
|
62
|
+
a,
|
|
63
|
+
a:visited {
|
|
64
|
+
color: var(--link);
|
|
65
|
+
}
|
|
66
|
+
a:active,
|
|
67
|
+
a:hover {
|
|
68
|
+
color: var(--link-hover);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* title gradient, same effect as the dark theme but keeping this
|
|
72
|
+
theme's own accent color (like react-morph-charts' omg theme) */
|
|
73
|
+
h1,
|
|
74
|
+
h2,
|
|
75
|
+
h3 {
|
|
76
|
+
background: linear-gradient(white, var(--heading));
|
|
77
|
+
-webkit-background-clip: text;
|
|
78
|
+
background-clip: text;
|
|
79
|
+
-webkit-text-fill-color: transparent;
|
|
80
|
+
}
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/*
|
|
2
|
+
light theme
|
|
3
|
+
Copied from OMG Themes - https://evoluteur.github.io/omg-themes/
|
|
4
|
+
(c) 2026 Olivier Giulieri
|
|
5
|
+
*/
|
|
6
|
+
:root {
|
|
7
|
+
--content-left: 30px;
|
|
8
|
+
--text: #1a212d;
|
|
9
|
+
--muted: #52617a;
|
|
10
|
+
--heading: #17335c;
|
|
11
|
+
--link: navy;
|
|
12
|
+
--link-hover: black;
|
|
13
|
+
--icon-current: black; /* the icon of the page you are on */
|
|
14
|
+
|
|
15
|
+
--nav-bg: #1a1a1a;
|
|
16
|
+
--nav-text: #f4f6fa;
|
|
17
|
+
--nav-link: #92cddc;
|
|
18
|
+
--nav-link-hover: #ff9900;
|
|
19
|
+
|
|
20
|
+
--card-bg: white;
|
|
21
|
+
--card-border: #d0d7de;
|
|
22
|
+
--card-foot: #52617a;
|
|
23
|
+
--card-strong: #1a212d;
|
|
24
|
+
|
|
25
|
+
--accent: #e08a00;
|
|
26
|
+
--accent-soft: rgba(224, 138, 0, 0.18);
|
|
27
|
+
/* area chart uses evol-blue's blue instead of the light theme's
|
|
28
|
+
own orange accent */
|
|
29
|
+
--spark-line: #0288d1;
|
|
30
|
+
--spark-fill: rgba(2, 136, 209, 0.18);
|
|
31
|
+
--period-bar: #4e79a7; /* downloads over the picked period */
|
|
32
|
+
--grid: rgba(0, 0, 0, 0.12);
|
|
33
|
+
--up: #1a7f37;
|
|
34
|
+
--down: #cf222e;
|
|
35
|
+
--fork: #6f42c1;
|
|
36
|
+
|
|
37
|
+
--input-bg: white;
|
|
38
|
+
--input-text: #1a212d;
|
|
39
|
+
--input-border: #d0d7de;
|
|
40
|
+
|
|
41
|
+
--panel-bg: white;
|
|
42
|
+
--panel-text: #0b0b0b;
|
|
43
|
+
--panel-border: #d0d7de;
|
|
44
|
+
--panel-muted: #52514e;
|
|
45
|
+
--panel-link: #256abf;
|
|
46
|
+
--panel-grid: #e1e0d9;
|
|
47
|
+
--chart-1: #2a78d6;
|
|
48
|
+
--chart-2: #eb6834;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
html {
|
|
52
|
+
scroll-behavior: smooth;
|
|
53
|
+
color: var(--text);
|
|
54
|
+
background-color: #fdfdff;
|
|
55
|
+
background-image: url("bg0.png");
|
|
56
|
+
background-repeat: repeat-y;
|
|
57
|
+
}
|
|
58
|
+
body {
|
|
59
|
+
font-family: "Overpass", sans-serif;
|
|
60
|
+
color: var(--text);
|
|
61
|
+
}
|
|
62
|
+
a,
|
|
63
|
+
a:visited {
|
|
64
|
+
color: var(--link);
|
|
65
|
+
}
|
|
66
|
+
a:active,
|
|
67
|
+
a:hover {
|
|
68
|
+
color: var(--link-hover);
|
|
69
|
+
}
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<title>npm Pulse Charts - Downloads month by month</title>
|
|
17
17
|
<link
|
|
18
18
|
rel="canonical"
|
|
19
|
-
href="https://evoluteur.github.io/npm-pulse/
|
|
19
|
+
href="https://evoluteur.github.io/npm-pulse/dashboard.html"
|
|
20
20
|
/>
|
|
21
21
|
<meta charset="utf-8" />
|
|
22
22
|
<meta http-equiv="content-language" content="en" />
|
|
@@ -25,12 +25,18 @@
|
|
|
25
25
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
26
26
|
<link
|
|
27
27
|
rel="stylesheet"
|
|
28
|
-
href="https://fonts.googleapis.com/css?family=
|
|
28
|
+
href="https://fonts.googleapis.com/css?family=Overpass"
|
|
29
|
+
/>
|
|
30
|
+
<link
|
|
31
|
+
id="omg-theme-css"
|
|
32
|
+
rel="stylesheet"
|
|
33
|
+
href="css/themes/evol-blue/evol-blue.css"
|
|
29
34
|
/>
|
|
30
35
|
<link href="css/me.css" rel="stylesheet" />
|
|
31
36
|
<link href="css/pulse.css" rel="stylesheet" />
|
|
37
|
+
<script src="js/theme.js"></script>
|
|
32
38
|
<script src="js/npm-data.js"></script>
|
|
33
|
-
<script src="js/
|
|
39
|
+
<script src="js/dashboard.js"></script>
|
|
34
40
|
<meta
|
|
35
41
|
name="keywords"
|
|
36
42
|
content="npm, downloads, chart, monthly, statistics, packages, ranking, trends, svg"
|
|
@@ -50,14 +56,36 @@
|
|
|
50
56
|
/>
|
|
51
57
|
<meta
|
|
52
58
|
property="og:url"
|
|
53
|
-
content="https://evoluteur.github.io/npm-pulse/
|
|
59
|
+
content="https://evoluteur.github.io/npm-pulse/dashboard.html"
|
|
54
60
|
/>
|
|
55
61
|
</head>
|
|
56
62
|
|
|
57
63
|
<body onload="setupChartPage()">
|
|
58
64
|
<div class="nav">
|
|
59
|
-
<
|
|
60
|
-
|
|
65
|
+
<span class="crumbs">
|
|
66
|
+
<a href="https://evoluteur.github.io/">Evoluteur</a> > Code Projects
|
|
67
|
+
:
|
|
68
|
+
<a href="https://evoluteur.github.io/github-projects-cards">GitHub</a> -
|
|
69
|
+
npm
|
|
70
|
+
</span>
|
|
71
|
+
<div class="nav-right">
|
|
72
|
+
<div id="omg-theme-picker"></div>
|
|
73
|
+
<a
|
|
74
|
+
class="github-link"
|
|
75
|
+
href="https://github.com/evoluteur/npm-pulse"
|
|
76
|
+
target="_blank"
|
|
77
|
+
rel="noopener"
|
|
78
|
+
title="View on GitHub"
|
|
79
|
+
aria-label="View on GitHub"
|
|
80
|
+
>
|
|
81
|
+
<svg viewBox="0 0 16 16" width="20" height="20" aria-hidden="true">
|
|
82
|
+
<path
|
|
83
|
+
fill="currentColor"
|
|
84
|
+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
|
85
|
+
/>
|
|
86
|
+
</svg>
|
|
87
|
+
</a>
|
|
88
|
+
</div>
|
|
61
89
|
</div>
|
|
62
90
|
|
|
63
91
|
<section class="gpc">
|
package/index.html
CHANGED
|
@@ -22,10 +22,16 @@
|
|
|
22
22
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
23
23
|
<link
|
|
24
24
|
rel="stylesheet"
|
|
25
|
-
href="https://fonts.googleapis.com/css?family=
|
|
25
|
+
href="https://fonts.googleapis.com/css?family=Overpass"
|
|
26
|
+
/>
|
|
27
|
+
<link
|
|
28
|
+
id="omg-theme-css"
|
|
29
|
+
rel="stylesheet"
|
|
30
|
+
href="css/themes/evol-blue/evol-blue.css"
|
|
26
31
|
/>
|
|
27
32
|
<link href="css/me.css" rel="stylesheet" />
|
|
28
33
|
<link href="css/pulse.css" rel="stylesheet" />
|
|
34
|
+
<script src="js/theme.js"></script>
|
|
29
35
|
<script src="js/npm-data.js"></script>
|
|
30
36
|
<script src="js/pulse.js"></script>
|
|
31
37
|
<meta
|
|
@@ -83,7 +89,30 @@
|
|
|
83
89
|
|
|
84
90
|
<body onload="setupPulsePage()">
|
|
85
91
|
<div class="nav">
|
|
86
|
-
<
|
|
92
|
+
<span class="crumbs">
|
|
93
|
+
<a href="https://evoluteur.github.io/">Evoluteur</a>
|
|
94
|
+
Code Projects : <a href="https://evoluteur.github.io/github-projects-cards">GitHub</a> -
|
|
95
|
+
npm - <a href="https://evoluteur.github.io/meet-the-fans/">Meet the Fans</a>
|
|
96
|
+
</span>
|
|
97
|
+
</span>
|
|
98
|
+
<div class="nav-right">
|
|
99
|
+
<div id="omg-theme-picker"></div>
|
|
100
|
+
<a
|
|
101
|
+
class="github-link"
|
|
102
|
+
href="https://github.com/evoluteur/npm-pulse"
|
|
103
|
+
target="_blank"
|
|
104
|
+
rel="noopener"
|
|
105
|
+
title="View on GitHub"
|
|
106
|
+
aria-label="View on GitHub"
|
|
107
|
+
>
|
|
108
|
+
<svg viewBox="0 0 16 16" width="20" height="20" aria-hidden="true">
|
|
109
|
+
<path
|
|
110
|
+
fill="currentColor"
|
|
111
|
+
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
|
112
|
+
/>
|
|
113
|
+
</svg>
|
|
114
|
+
</a>
|
|
115
|
+
</div>
|
|
87
116
|
</div>
|
|
88
117
|
|
|
89
118
|
<section class="gpc">
|
|
@@ -96,11 +125,7 @@
|
|
|
96
125
|
</div>
|
|
97
126
|
<div>
|
|
98
127
|
<label for="periodPicker">Period</label>
|
|
99
|
-
<select onchange="setPeriod(this.value)" id="periodPicker">
|
|
100
|
-
<option value="last7">Last 7 days</option>
|
|
101
|
-
<option value="last30" selected>Last 30 days</option>
|
|
102
|
-
<option value="last365">Last 12 months</option>
|
|
103
|
-
</select>
|
|
128
|
+
<select onchange="setPeriod(this.value)" id="periodPicker"></select>
|
|
104
129
|
</div>
|
|
105
130
|
<div>
|
|
106
131
|
<label for="sortPicker">Sort by</label>
|
|
@@ -113,10 +138,7 @@
|
|
|
113
138
|
</select>
|
|
114
139
|
</div>
|
|
115
140
|
<span id="summary"></span>
|
|
116
|
-
<
|
|
117
|
-
<a href="chart.html">Charts</a>
|
|
118
|
-
<!-- <a href="#" onclick="clearCache(); return false;">Refresh</a> -->
|
|
119
|
-
</span>
|
|
141
|
+
<!-- <a href="#" onclick="clearCache(); return false;">Refresh</a> -->
|
|
120
142
|
</div>
|
|
121
143
|
|
|
122
144
|
<div id="packages" class="projects"></div>
|