:pizza:

4 files changed, 108 insertions, 93 deletions

diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 422a3da050..4700b6269e 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import trends from './trends.vue';
 import analogClock from './analog-clock.vue';
 import menu from './menu.vue';
 import noteHeader from './note-header.vue';
@@ -40,6 +41,7 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-trends', trends);
 Vue.component('mk-analog-clock', analogClock);
 Vue.component('mk-menu', menu);
 Vue.component('mk-note-header', noteHeader);
diff --git a/src/client/app/common/views/widgets/hashtags.chart.vue b/src/client/app/common/views/components/trends.chart.vue
index 723a3947f8..723a3947f8 100644
--- a/src/client/app/common/views/widgets/hashtags.chart.vue
+++ b/src/client/app/common/views/components/trends.chart.vue
diff --git a/src/client/app/common/views/components/trends.vue b/src/client/app/common/views/components/trends.vue
new file mode 100644
index 0000000000..627edc3876
--- /dev/null
+++ b/src/client/app/common/views/components/trends.vue
@@ -0,0 +1,105 @@
+<template>
+<div class="csqvmxybqbycalfhkxvyfrgbrdalkaoc">
+	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
+	<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
+	<!-- トランジションを有効にするとなぜかメモリリークする -->
+	<!-- <transition-group v-else tag="div" name="chart"> -->
+	<div>
+		<div v-for="stat in stats" :key="stat.tag">
+			<div class="tag">
+				<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
+				<p>{{ '%i18n:@count%'.replace('{}', stat.usersCount) }}</p>
+			</div>
+			<x-chart class="chart" :src="stat.chart"/>
+		</div>
+	</div>
+	<!-- </transition-group> -->
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import XChart from './trends.chart.vue';
+
+export default Vue.extend({
+	components: {
+		XChart
+	},
+	data() {
+		return {
+			stats: [],
+			fetching: true,
+			clock: null
+		};
+	},
+	mounted() {
+		this.fetch();
+		this.clock = setInterval(this.fetch, 1000 * 60);
+	},
+	beforeDestroy() {
+		clearInterval(this.clock);
+	},
+	methods: {
+		fetch() {
+			(this as any).api('hashtags/trend').then(stats => {
+				this.stats = stats;
+				this.fetching = false;
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+root(isDark)
+	> .fetching
+	> .empty
+		margin 0
+		padding 16px
+		text-align center
+		color #aaa
+
+		> [data-fa]
+			margin-right 4px
+
+	> div
+		.chart-move
+			transition transform 1s ease
+
+		> div
+			display flex
+			align-items center
+			padding 14px 16px
+
+			&:not(:last-child)
+				border-bottom solid 1px isDark ? #393f4f : #eee
+
+			> .tag
+				flex 1
+				overflow hidden
+				font-size 14px
+				color isDark ? #9baec8 : #65727b
+
+				> a
+					display block
+					width 100%
+					white-space nowrap
+					overflow hidden
+					text-overflow ellipsis
+					color inherit
+
+				> p
+					margin 0
+					font-size 75%
+					opacity 0.7
+
+			> .chart
+				height 30px
+
+.csqvmxybqbycalfhkxvyfrgbrdalkaoc[data-darkmode]
+	root(true)
+
+.csqvmxybqbycalfhkxvyfrgbrdalkaoc:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/common/views/widgets/hashtags.vue b/src/client/app/common/views/widgets/hashtags.vue
index 56520400b6..0cb6b2df10 100644
--- a/src/client/app/common/views/widgets/hashtags.vue
+++ b/src/client/app/common/views/widgets/hashtags.vue
@@ -4,20 +4,7 @@
 		<template slot="header">%fa:hashtag%%i18n:@title%</template>
 
 		<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
-			<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
-			<p class="empty" v-else-if="stats.length == 0">%fa:exclamation-circle%%i18n:@empty%</p>
-			<!-- トランジションを有効にするとなぜかメモリリークする -->
-			<!-- <transition-group v-else tag="div" name="chart"> -->
-			<div>
-				<div v-for="stat in stats" :key="stat.tag">
-					<div class="tag">
-						<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
-						<p>{{ '%i18n:@count%'.replace('{}', stat.usersCount) }}</p>
-					</div>
-					<x-chart class="chart" :src="stat.chart"/>
-				</div>
-			</div>
-			<!-- </transition-group> -->
+			<mk-trends/>
 		</div>
 	</mk-widget-container>
 </div>
@@ -25,7 +12,6 @@
 
 <script lang="ts">
 import define from '../../../common/define-widget';
-import XChart from './hashtags.chart.vue';
 
 export default define({
 	name: 'hashtags',
@@ -33,89 +19,11 @@ export default define({
 		compact: false
 	})
 }).extend({
-	components: {
-		XChart
-	},
-	data() {
-		return {
-			stats: [],
-			fetching: true,
-			clock: null
-		};
-	},
-	mounted() {
-		this.fetch();
-		this.clock = setInterval(this.fetch, 1000 * 60);
-	},
-	beforeDestroy() {
-		clearInterval(this.clock);
-	},
 	methods: {
 		func() {
 			this.props.compact = !this.props.compact;
 			this.save();
-		},
-		fetch() {
-			(this as any).api('hashtags/trend').then(stats => {
-				this.stats = stats;
-				this.fetching = false;
-			});
 		}
 	}
 });
 </script>
-
-<style lang="stylus" scoped>
-root(isDark)
-	.mkw-hashtags--body
-		> .fetching
-		> .empty
-			margin 0
-			padding 16px
-			text-align center
-			color #aaa
-
-			> [data-fa]
-				margin-right 4px
-
-		> div
-			.chart-move
-				transition transform 1s ease
-
-			> div
-				display flex
-				align-items center
-				padding 14px 16px
-
-				&:not(:last-child)
-					border-bottom solid 1px isDark ? #393f4f : #eee
-
-				> .tag
-					flex 1
-					overflow hidden
-					font-size 14px
-					color isDark ? #9baec8 : #65727b
-
-					> a
-						display block
-						width 100%
-						white-space nowrap
-						overflow hidden
-						text-overflow ellipsis
-						color inherit
-
-					> p
-						margin 0
-						font-size 75%
-						opacity 0.7
-
-				> .chart
-					height 30px
-
-.mkw-hashtags[data-darkmode]
-	root(true)
-
-.mkw-hashtags:not([data-darkmode])
-	root(false)
-
-</style>