Merge branch 'master' into greenkeeper/@types/chai-http-3.0.2

CHANGELOG.md

@@ -1 +1,19 @@
-
+ChangeLog
+=========
+主に notable な changes を書いていきます
+
+2367
+----
+Statsのユーザー数グラフに「アカウントが作成された**回数**」(その日時点での「アカウント数」**ではなく**)グラフも併記するようにした
+
+2364
+----
+デザインの微調整
+
+2361
+----
+Statsを実装するなど
+
+2357
+----
+Statusを実装するなど

docs/setup.en.md

@@ -25,6 +25,8 @@ Note that Misskey uses following subdomains:
 * **api**.*{primary domain}*
 * **auth**.*{primary domain}*
 * **about**.*{primary domain}*
+* **stats**.*{primary domain}*
+* **status**.*{primary domain}*
 * **dev**.*{primary domain}*
 * **file**.*{secondary domain}*
 

docs/setup.ja.md

@@ -26,6 +26,8 @@ Misskeyは以下のサブドメインを使います:
 * **api**.*{primary domain}*
 * **auth**.*{primary domain}*
 * **about**.*{primary domain}*
+* **stats**.*{primary domain}*
+* **status**.*{primary domain}*
 * **dev**.*{primary domain}*
 * **file**.*{secondary domain}*
 

locales/en.yml

@@ -426,3 +426,11 @@ mobile:
       all: "All"
       known: "You know"
       load-more: "More"
+
+stats:
+  posts-count: "Number of all posts"
+  users-count: "Number of all users"
+
+status:
+  all-systems-maybe-operational: "All systems maybe operational"
+  what-is-this-site: ""

locales/ja.yml

@@ -427,3 +427,11 @@ mobile:
       all: "すべて"
       known: "知り合い"
       load-more: "もっと"
+
+stats:
+  posts-count: "投稿の数"
+  users-count: "アカウントの数"
+
+status:
+  all-systems-maybe-operational: "すべてのシステムがたぶん正常に作動しています"
+  what-is-this-site: ""

package.json

@@ -1,7 +1,7 @@
 {
   "name": "misskey",
   "author": "syuilo <i@syuilo.com>",
-  "version": "0.0.2344",
+  "version": "0.0.2367",
   "license": "MIT",
   "description": "A miniblog-based SNS",
   "bugs": "https://github.com/syuilo/misskey/issues",
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@types/bcryptjs": "2.4.0",
     "@types/body-parser": "1.16.4",
-    "@types/chai": "4.0.2",
+    "@types/chai": "4.0.3",
     "@types/chai-http": "3.0.2",
     "@types/chalk": "0.4.31",
     "@types/compression": "0.0.33",
@@ -91,7 +91,7 @@
     "uglify-es": "3.0.27",
     "uglify-es-webpack-plugin": "0.10.0",
     "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony",
-    "webpack": "3.5.3"
+    "webpack": "3.5.4"
   },
   "dependencies": {
     "accesses": "2.5.0",
@@ -133,7 +133,7 @@
     "pug": "2.0.0-rc.3",
     "ratelimiter": "3.0.3",
     "recaptcha-promise": "0.1.3",
-    "reconnecting-websocket": "3.0.7",
+    "reconnecting-websocket": "3.1.1",
     "redis": "2.8.0",
     "request": "2.81.0",
     "rimraf": "2.6.1",

src/api/endpoints.ts

@@ -69,6 +69,9 @@ const endpoints: Endpoint[] = [
 	{
 		name: 'meta'
 	},
+	{
+		name: 'stats'
+	},
 	{
 		name: 'username/available'
 	},
@@ -109,6 +112,12 @@ const endpoints: Endpoint[] = [
 		withCredential: true,
 		secure: true
 	},
+	{
+		name: 'aggregation/posts',
+	},
+	{
+		name: 'aggregation/users',
+	},
 	{
 		name: 'aggregation/users/activity',
 	},

src/api/endpoints/aggregation/posts.ts

@@ -0,0 +1,90 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import Post from '../../models/post';
+
+/**
+ * Aggregate posts
+ *
+ * @param {any} params
+ * @return {Promise<any>}
+ */
+module.exports = params => new Promise(async (res, rej) => {
+	// Get 'limit' parameter
+	const [limit = 365, limitErr] = $(params.limit).optional.number().range(1, 365).$;
+	if (limitErr) return rej('invalid limit param');
+
+	const datas = await Post
+		.aggregate([
+			{ $project: {
+				repost_id: '$repost_id',
+				reply_to_id: '$reply_to_id',
+				created_at: { $add: ['$created_at', 9 * 60 * 60 * 1000] } // Convert into JST
+			}},
+			{ $project: {
+				date: {
+					year: { $year: '$created_at' },
+					month: { $month: '$created_at' },
+					day: { $dayOfMonth: '$created_at' }
+				},
+				type: {
+					$cond: {
+						if: { $ne: ['$repost_id', null] },
+						then: 'repost',
+						else: {
+							$cond: {
+								if: { $ne: ['$reply_to_id', null] },
+								then: 'reply',
+								else: 'post'
+							}
+						}
+					}
+				}}
+			},
+			{ $group: { _id: {
+				date: '$date',
+				type: '$type'
+			}, count: { $sum: 1 } } },
+			{ $group: {
+				_id: '$_id.date',
+				data: { $addToSet: {
+					type: '$_id.type',
+					count: '$count'
+				}}
+			} }
+		]);
+
+	datas.forEach(data => {
+		data.date = data._id;
+		delete data._id;
+
+		data.posts = (data.data.filter(x => x.type == 'post')[0] || { count: 0 }).count;
+		data.reposts = (data.data.filter(x => x.type == 'repost')[0] || { count: 0 }).count;
+		data.replies = (data.data.filter(x => x.type == 'reply')[0] || { count: 0 }).count;
+
+		delete data.data;
+	});
+
+	const graph = [];
+
+	for (let i = 0; i < limit; i++) {
+		const day = new Date(new Date().setDate(new Date().getDate() - i));
+
+		const data = datas.filter(d =>
+			d.date.year == day.getFullYear() && d.date.month == day.getMonth() + 1 && d.date.day == day.getDate()
+		)[0];
+
+		if (data) {
+			graph.push(data);
+		} else {
+			graph.push({
+				posts: 0,
+				reposts: 0,
+				replies: 0
+			});
+		}
+	}
+
+	res(graph);
+});

src/api/endpoints/aggregation/users.ts

@@ -0,0 +1,58 @@
+/**
+ * Module dependencies
+ */
+import $ from 'cafy';
+import User from '../../models/user';
+
+/**
+ * Aggregate users
+ *
+ * @param {any} params
+ * @return {Promise<any>}
+ */
+module.exports = params => new Promise(async (res, rej) => {
+	// Get 'limit' parameter
+	const [limit = 365, limitErr] = $(params.limit).optional.number().range(1, 365).$;
+	if (limitErr) return rej('invalid limit param');
+
+	const users = await User
+		.find({}, {
+			_id: false,
+			created_at: true,
+			deleted_at: true
+		}, {
+			sort: { created_at: -1 }
+		});
+
+	const graph = [];
+
+	for (let i = 0; i < limit; i++) {
+		let dayStart = new Date(new Date().setDate(new Date().getDate() - i));
+		dayStart = new Date(dayStart.setMilliseconds(0));
+		dayStart = new Date(dayStart.setSeconds(0));
+		dayStart = new Date(dayStart.setMinutes(0));
+		dayStart = new Date(dayStart.setHours(0));
+
+		let dayEnd = new Date(new Date().setDate(new Date().getDate() - i));
+		dayEnd = new Date(dayEnd.setMilliseconds(999));
+		dayEnd = new Date(dayEnd.setSeconds(59));
+		dayEnd = new Date(dayEnd.setMinutes(59));
+		dayEnd = new Date(dayEnd.setHours(23));
+		// day = day.getTime();
+
+		const total = users.filter(u =>
+			u.created_at < dayEnd && (u.deleted_at == null || u.deleted_at > dayEnd)
+		).length;
+
+		const created = users.filter(u =>
+			u.created_at < dayEnd && u.created_at > dayStart
+		).length;
+
+		graph.push({
+			total: total,
+			created: created
+		});
+	}
+
+	res(graph);
+});

src/api/endpoints/stats.ts

@@ -0,0 +1,48 @@
+/**
+ * Module dependencies
+ */
+import Post from '../models/post';
+import User from '../models/user';
+
+/**
+ * @swagger
+ * /stats:
+ *   post:
+ *     summary: Show the misskey's statistics
+ *     responses:
+ *       200:
+ *         description: Success
+ *         schema:
+ *           type: object
+ *           properties:
+ *             posts_count:
+ *               description: count of all posts of misskey
+ *               type: number
+ *             users_count:
+ *               description: count of all users of misskey
+ *               type: number
+ *
+ *       default:
+ *         description: Failed
+ *         schema:
+ *           $ref: "#/definitions/Error"
+ */
+
+/**
+ * Show the misskey's statistics
+ *
+ * @param {any} params
+ * @return {Promise<any>}
+ */
+module.exports = params => new Promise(async (res, rej) => {
+	const postsCount = await Post
+		.count();
+
+	const usersCount = await User
+		.count();
+
+	res({
+		posts_count: postsCount,
+		users_count: usersCount
+	});
+});

src/config.ts

@@ -81,6 +81,8 @@ type Mixin = {
 	api_url: string;
 	auth_url: string;
 	about_url: string;
+	stats_url: string;
+	status_url: string;
 	dev_url: string;
 	drive_url: string;
 };
@@ -115,6 +117,8 @@ export default function load() {
 	mixin.auth_url = `${mixin.scheme}://auth.${mixin.host}`;
 	mixin.dev_url = `${mixin.scheme}://dev.${mixin.host}`;
 	mixin.about_url = `${mixin.scheme}://about.${mixin.host}`;
+	mixin.stats_url = `${mixin.scheme}://stats.${mixin.host}`;
+	mixin.status_url = `${mixin.scheme}://status.${mixin.host}`;
 	mixin.drive_url = `${mixin.secondary_scheme}://file.${mixin.secondary_host}`;
 
 	return Object.assign(config, mixin);

src/web/app/common/scripts/config.js

@@ -8,6 +8,8 @@ const url = `${scheme}//${host}`;
 const apiUrl = `${scheme}//api.${host}`;
 const devUrl = `${scheme}//dev.${host}`;
 const aboutUrl = `${scheme}//about.${host}`;
+const statsUrl = `${scheme}//stats.${host}`;
+const statusUrl = `${scheme}//status.${host}`;
 
 export default {
 	host,
@@ -15,5 +17,7 @@ export default {
 	url,
 	apiUrl,
 	devUrl,
-	aboutUrl
+	aboutUrl,
+	statsUrl,
+	statusUrl
 };

src/web/app/desktop/tags/home-widgets/nav.tag

@@ -1,4 +1,4 @@
-<mk-nav-home-widget><a href={ CONFIG.aboutUrl }>Misskeyについて</a><i>・</i><a href={ CONFIG.aboutUrl + '/status' }>ステータス</a><i>・</i><a href="http://zawazawa.jp/misskey/">Wiki</a><i>・</i><a href="https://github.com/syuilo/misskey">リポジトリ</a><i>・</i><a href={ CONFIG.devUrl }>開発者</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <i class="fa fa-twitter"></i></a>
+<mk-nav-home-widget><a href={ CONFIG.aboutUrl }>Misskeyについて</a><i>・</i><a href={ CONFIG.statsUrl }>統計</a><i>・</i><a href={ CONFIG.statusUrl }>ステータス</a><i>・</i><a href="http://zawazawa.jp/misskey/">Wiki</a><i>・</i><a href="https://github.com/syuilo/misskey">リポジトリ</a><i>・</i><a href={ CONFIG.devUrl }>開発者</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <i class="fa fa-twitter"></i></a>
 	<style>
 		:scope
 			display block

src/web/app/stats/script.js

@@ -0,0 +1,23 @@
+/**
+ * Stats
+ */
+
+// Style
+import './style.styl';
+
+import * as riot from 'riot';
+require('./tags');
+import init from '../init';
+
+document.title = 'Misskey Statistics';
+
+/**
+ * init
+ */
+init(me => {
+	mount(document.createElement('mk-index'));
+});
+
+function mount(content) {
+	riot.mount(document.getElementById('app').appendChild(content));
+}

src/web/app/stats/style.styl

@@ -0,0 +1,9 @@
+@import "../base"
+
+html
+	color #456267
+	background #fff
+
+body
+	margin 0
+	padding 0

src/web/app/stats/tags/index.js

@@ -0,0 +1 @@
+require('./index.tag');

src/web/app/stats/tags/index.tag

@@ -0,0 +1,209 @@
+<mk-index>
+	<h1>Misskey<i>Statistics</i></h1>
+	<main if={ !initializing }>
+		<mk-users stats={ stats }/>
+		<mk-posts stats={ stats }/>
+	</main>
+	<footer><a href={ CONFIG.url }>{ CONFIG.host }</a></footer>
+	<style>
+		:scope
+			display block
+			margin 0 auto
+			padding 0 16px
+			max-width 700px
+
+			> h1
+				margin 0
+				padding 24px 0 0 0
+				font-size 24px
+				font-weight normal
+
+				> i
+					font-style normal
+					color #f43b16
+
+			> main
+				> *
+					margin 24px 0
+					padding-top 24px
+					border-top solid 1px #eee
+
+					> h2
+						margin 0 0 12px 0
+						font-size 18px
+						font-weight normal
+
+			> footer
+				margin 24px 0
+				text-align center
+
+				> a
+					color #546567
+	</style>
+	<script>
+		this.mixin('api');
+
+		this.initializing = true;
+
+		this.on('mount', () => {
+			this.api('stats').then(stats => {
+				this.update({
+					initializing: false,
+					stats
+				});
+			});
+		});
+	</script>
+</mk-index>
+
+<mk-posts>
+	<h2>%i18n:stats.posts-count% <b>{ stats.posts_count }</b></h2>
+	<mk-posts-chart if={ !initializing } data={ data }/>
+	<style>
+		:scope
+			display block
+	</style>
+	<script>
+		this.mixin('api');
+
+		this.initializing = true;
+		this.stats = this.opts.stats;
+
+		this.on('mount', () => {
+			this.api('aggregation/posts', {
+				limit: 365
+			}).then(data => {
+				this.update({
+					initializing: false,
+					data
+				});
+			});
+		});
+	</script>
+</mk-posts>
+
+<mk-users>
+	<h2>%i18n:stats.users-count% <b>{ stats.users_count }</b></h2>
+	<mk-users-chart if={ !initializing } data={ data }/>
+	<style>
+		:scope
+			display block
+	</style>
+	<script>
+		this.mixin('api');
+
+		this.initializing = true;
+		this.stats = this.opts.stats;
+
+		this.on('mount', () => {
+			this.api('aggregation/users', {
+				limit: 365
+			}).then(data => {
+				this.update({
+					initializing: false,
+					data
+				});
+			});
+		});
+	</script>
+</mk-users>
+
+<mk-posts-chart>
+	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
+		<title>Black ... Total<br/>Blue ... Posts<br/>Red ... Replies<br/>Green ... Reposts</title>
+		<polyline
+			riot-points={ pointsPost }
+			fill="none"
+			stroke-width="1"
+			stroke="#41ddde"/>
+		<polyline
+			riot-points={ pointsReply }
+			fill="none"
+			stroke-width="1"
+			stroke="#f7796c"/>
+		<polyline
+			riot-points={ pointsRepost }
+			fill="none"
+			stroke-width="1"
+			stroke="#a1de41"/>
+		<polyline
+			riot-points={ pointsTotal }
+			fill="none"
+			stroke-width="1"
+			stroke="#555"
+			stroke-dasharray="2 2"/>
+	</svg>
+	<style>
+		:scope
+			display block
+
+			> svg
+				display block
+				padding 1px
+				width 100%
+	</style>
+	<script>
+		this.viewBoxX = 365;
+		this.viewBoxY = 80;
+
+		this.data = this.opts.data.reverse();
+		this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
+		const peak = Math.max.apply(null, this.data.map(d => d.total));
+
+		this.on('mount', () => {
+			this.render();
+		});
+
+		this.render = () => {
+			this.update({
+				pointsPost: this.data.map((d, i) => `${i},${(1 - (d.posts / peak)) * this.viewBoxY}`).join(' '),
+				pointsReply: this.data.map((d, i) => `${i},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' '),
+				pointsRepost: this.data.map((d, i) => `${i},${(1 - (d.reposts / peak)) * this.viewBoxY}`).join(' '),
+				pointsTotal: this.data.map((d, i) => `${i},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ')
+			});
+		};
+	</script>
+</mk-posts-chart>
+
+<mk-users-chart>
+	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
+		<polyline
+			riot-points={ createdPoints }
+			fill="none"
+			stroke-width="1"
+			stroke="#1cde84"/>
+		<polyline
+			riot-points={ totalPoints }
+			fill="none"
+			stroke-width="1"
+			stroke="#555"/>
+	</svg>
+	<style>
+		:scope
+			display block
+
+			> svg
+				display block
+				padding 1px
+				width 100%
+	</style>
+	<script>
+		this.viewBoxX = 365;
+		this.viewBoxY = 80;
+
+		this.data = this.opts.data.reverse();
+		const totalPeak = Math.max.apply(null, this.data.map(d => d.total));
+		const createdPeak = Math.max.apply(null, this.data.map(d => d.created));
+
+		this.on('mount', () => {
+			this.render();
+		});
+
+		this.render = () => {
+			this.update({
+				totalPoints: this.data.map((d, i) => `${i},${(1 - (d.total / totalPeak)) * this.viewBoxY}`).join(' '),
+				createdPoints: this.data.map((d, i) => `${i},${(1 - (d.created / createdPeak)) * this.viewBoxY}`).join(' ')
+			});
+		};
+	</script>
+</mk-users-chart>

src/web/app/status/script.js

@@ -0,0 +1,23 @@
+/**
+ * Status
+ */
+
+// Style
+import './style.styl';
+
+import * as riot from 'riot';
+require('./tags');
+import init from '../init';
+
+document.title = 'Misskey System Status';
+
+/**
+ * init
+ */
+init(me => {
+	mount(document.createElement('mk-index'));
+});
+
+function mount(content) {
+	riot.mount(document.getElementById('app').appendChild(content));
+}

src/web/app/status/style.styl

@@ -0,0 +1,9 @@
+@import "../base"
+
+html
+	color #456267
+	background #fff
+
+body
+	margin 0
+	padding 0

src/web/app/status/tags/index.js

@@ -0,0 +1 @@
+require('./index.tag');

src/web/app/status/tags/index.tag

@@ -0,0 +1,201 @@
+<mk-index>
+	<h1>Misskey<i>Status</i></h1>
+	<p><i class="fa fa-info-circle"></i>%i18n:status.all-systems-maybe-operational%</p>
+	<main>
+		<mk-cpu-usage connection={ connection }/>
+		<mk-mem-usage connection={ connection }/>
+	</main>
+	<footer><a href={ CONFIG.url }>{ CONFIG.host }</a></footer>
+	<style>
+		:scope
+			display block
+			margin 0 auto
+			padding 0 16px
+			max-width 700px
+
+			> h1
+				margin 0
+				padding 24px 0 16px 0
+				font-size 24px
+				font-weight normal
+
+				> i
+					font-style normal
+					color #f43b16
+
+			> p
+				display block
+				margin 0
+				padding 12px 16px
+				background #eaf4ef
+				//border solid 1px #99ccb2
+				border-radius 4px
+
+				> i
+					margin-right 5px
+
+			> main
+				> *
+					margin 24px 0
+
+					> h2
+						margin 0 0 12px 0
+						font-size 18px
+						font-weight normal
+
+			> footer
+				margin 24px 0
+				text-align center
+
+				> a
+					color #546567
+	</style>
+	<script>
+		import Connection from '../../common/scripts/server-stream';
+
+		this.mixin('api');
+
+		this.initializing = true;
+		this.connection = new Connection();
+
+		this.on('mount', () => {
+			this.api('meta').then(meta => {
+				this.update({
+					initializing: false,
+					meta
+				});
+			});
+		});
+
+		this.on('unmount', () => {
+			this.connection.close();
+		});
+
+	</script>
+</mk-index>
+
+<mk-cpu-usage>
+	<h2>CPU <b>{ percentage }%</b></h2>
+	<mk-line-chart ref="chart"/>
+	<style>
+		:scope
+			display block
+	</style>
+	<script>
+		this.connection = this.opts.connection;
+
+		this.on('mount', () => {
+			this.connection.on('stats', this.onStats);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('stats', this.onStats);
+		});
+
+		this.onStats = stats => {
+			this.refs.chart.addData(1 - stats.cpu_usage);
+
+			const percentage = (stats.cpu_usage * 100).toFixed(0);
+
+			this.update({
+				percentage
+			});
+		};
+	</script>
+</mk-cpu-usage>
+
+<mk-mem-usage>
+	<h2>MEM <b>{ percentage }%</b></h2>
+	<mk-line-chart ref="chart"/>
+	<style>
+		:scope
+			display block
+	</style>
+	<script>
+		this.connection = this.opts.connection;
+
+		this.on('mount', () => {
+			this.connection.on('stats', this.onStats);
+		});
+
+		this.on('unmount', () => {
+			this.connection.off('stats', this.onStats);
+		});
+
+		this.onStats = stats => {
+			stats.mem.used = stats.mem.total - stats.mem.free;
+			this.refs.chart.addData(1 - (stats.mem.used / stats.mem.total));
+
+			const percentage = (stats.mem.used / stats.mem.total * 100).toFixed(0);
+
+			this.update({
+				percentage
+			});
+		};
+	</script>
+</mk-mem-usage>
+
+<mk-line-chart>
+	<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
+		<defs>
+			<linearGradient id={ gradientId } x1="0" x2="0" y1="1" y2="0">
+				<stop offset="0%" stop-color="rgba(244, 59, 22, 0)"></stop>
+				<stop offset="100%" stop-color="#f43b16"></stop>
+			</linearGradient>
+			<mask id={ maskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }>
+				<polygon
+					riot-points={ polygonPoints }
+					fill="#fff"
+					fill-opacity="0.5"/>
+			</mask>
+		</defs>
+		<line x1="0" y1="0" riot-x2={ viewBoxX } y2="0" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/>
+		<line x1="0" y1="25%" riot-x2={ viewBoxX } y2="25%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/>
+		<line x1="0" y1="50%" riot-x2={ viewBoxX } y2="50%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/>
+		<line x1="0" y1="75%" riot-x2={ viewBoxX } y2="75%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/>
+		<line x1="0" y1="100%" riot-x2={ viewBoxX } y2="100%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/>
+		<rect
+			x="-1" y="-1"
+			riot-width={ viewBoxX + 2 } riot-height={ viewBoxY + 2 }
+			style="stroke: none; fill: url(#{ gradientId }); mask: url(#{ maskId })"/>
+		<polyline
+			riot-points={ polylinePoints }
+			fill="none"
+			stroke="#f43b16"
+			stroke-width="0.5"/>
+	</svg>
+	<style>
+		:scope
+			display block
+			padding 16px
+			border-radius 8px
+			background #1c2531
+
+			> svg
+				display block
+				padding 1px
+				width 100%
+	</style>
+	<script>
+		import uuid from '../../common/scripts/uuid';
+
+		this.viewBoxX = 100;
+		this.viewBoxY = 30;
+		this.data = [];
+		this.gradientId = uuid();
+		this.maskId = uuid();
+
+		this.addData = data => {
+			this.data.push(data);
+			if (this.data.length > 100) this.data.shift();
+
+			const polylinePoints = this.data.map((d, i) => `${this.viewBoxX - ((this.data.length - 1) - i)},${d * this.viewBoxY}`).join(' ');
+			const polygonPoints = `${this.viewBoxX - (this.data.length - 1)},${ this.viewBoxY } ${ polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+
+			this.update({
+				polylinePoints,
+				polygonPoints
+			});
+		};
+	</script>
+</mk-line-chart>

webpack/webpack.config.ts

@@ -14,10 +14,12 @@ module.exports = langs.map(([lang, locale]) => {
 
 	// Entries
 	const entry = {
-		'desktop': './src/web/app/desktop/script.js',
-		'mobile': './src/web/app/mobile/script.js',
-		'dev': './src/web/app/dev/script.js',
-		'auth': './src/web/app/auth/script.js'
+		desktop: './src/web/app/desktop/script.js',
+		mobile: './src/web/app/mobile/script.js',
+		stats: './src/web/app/stats/script.js',
+		status: './src/web/app/status/script.js',
+		dev: './src/web/app/dev/script.js',
+		auth: './src/web/app/auth/script.js'
 	};
 
 	const output = {