From 8d7c033cf597265195aad864d575db0989155c6a Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Sun, 4 Nov 2018 21:21:34 +0900 Subject: [PATCH] Clean up --- locales/ja-JP.yml | 32 - package.json | 2 - .../app/common/views/components/nav.vue | 2 - src/client/app/desktop/script.ts | 2 - .../desktop/views/components/charts.chart.ts | 42 - .../app/desktop/views/components/charts.vue | 723 ------------------ .../app/desktop/views/pages/stats/stats.vue | 65 -- 7 files changed, 868 deletions(-) delete mode 100644 src/client/app/desktop/views/components/charts.chart.ts delete mode 100644 src/client/app/desktop/views/components/charts.vue delete mode 100644 src/client/app/desktop/views/pages/stats/stats.vue diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index ec3896bdf8..37ee05a605 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -599,32 +599,6 @@ desktop/views/components/calendar.vue: next: "次の月" go: "クリックして時間遡行" -desktop/views/components/charts.vue: - title: "チャート" - per-day: "1日ごと" - per-hour: "1時間ごと" - federation: "フェデレーション" - notes: "投稿" - users: "ユーザー" - drive: "ドライブ" - network: "ネットワーク" - charts: - federation-instances: "インスタンスの増減" - federation-instances-total: "インスタンスの積算" - notes: "投稿の増減 (統合)" - local-notes: "投稿の増減 (ローカル)" - remote-notes: "投稿の増減 (リモート)" - notes-total: "投稿の積算" - users: "ユーザーの増減" - users-total: "ユーザーの積算" - drive: "ドライブ使用量の増減" - drive-total: "ドライブ使用量の積算" - drive-files: "ドライブのファイル数の増減" - drive-files-total: "ドライブのファイル数の積算" - network-requests: "リクエスト" - network-time: "応答時間" - network-usage: "通信量" - desktop/views/components/choose-file-from-drive-window.vue: choose-file: "ファイル選択中" upload: "PCからドライブにファイルをアップロード" @@ -1173,12 +1147,6 @@ desktop/views/pages/deck/deck.user-column.vue: pinned-notes: "ピン留めされた投稿" push-to-a-list: "リストに追加" -desktop/views/pages/stats/stats.vue: - all-users: "全てのユーザー" - original-users: "このインスタンスのユーザー" - all-notes: "全ての投稿" - original-notes: "このインスタンスの投稿" - desktop/views/pages/welcome.vue: about: "詳しく..." gotit: "わかった" diff --git a/package.json b/package.json index e024e31864..2d9c14634c 100644 --- a/package.json +++ b/package.json @@ -95,7 +95,6 @@ "chai": "4.2.0", "chai-http": "4.2.0", "chalk": "2.4.1", - "chart.js": "2.7.3", "commander": "2.19.0", "crc-32": "1.2.0", "css-loader": "1.0.1", @@ -211,7 +210,6 @@ "uuid": "3.3.2", "v-animate-css": "0.0.2", "vue": "2.5.17", - "vue-chartjs": "3.4.0", "vue-color": "2.7.0", "vue-content-loading": "1.5.3", "vue-cropperjs": "2.2.2", diff --git a/src/client/app/common/views/components/nav.vue b/src/client/app/common/views/components/nav.vue index d52c8e27a4..27e66358e4 100644 --- a/src/client/app/common/views/components/nav.vue +++ b/src/client/app/common/views/components/nav.vue @@ -2,8 +2,6 @@ <span class="mk-nav"> <a :href="aboutUrl">%i18n:@about%</a> <i>・</i> - <a href="/stats">%i18n:@stats%</a> - <i>・</i> <a :href="repositoryUrl">%i18n:@repository%</a> <i>・</i> <a :href="feedbackUrl" target="_blank">%i18n:@feedback%</a> diff --git a/src/client/app/desktop/script.ts b/src/client/app/desktop/script.ts index 255589b014..eabb1fe163 100644 --- a/src/client/app/desktop/script.ts +++ b/src/client/app/desktop/script.ts @@ -23,7 +23,6 @@ import updateBanner from './api/update-banner'; import MkIndex from './views/pages/index.vue'; import MkHome from './views/pages/home.vue'; import MkDeck from './views/pages/deck/deck.vue'; -import MkStats from './views/pages/stats/stats.vue'; import MkUser from './views/pages/user/user.vue'; import MkFavorites from './views/pages/favorites.vue'; import MkSelectDrive from './views/pages/selectdrive.vue'; @@ -56,7 +55,6 @@ init(async (launch) => { { path: '/', name: 'index', component: MkIndex }, { path: '/home', name: 'home', component: MkHome }, { path: '/deck', name: 'deck', component: MkDeck }, - { path: '/stats', name: 'stats', component: MkStats }, { path: '/i/customize-home', component: MkHomeCustomize }, { path: '/i/favorites', component: MkFavorites }, { path: '/i/messaging/:user', component: MkMessagingRoom }, diff --git a/src/client/app/desktop/views/components/charts.chart.ts b/src/client/app/desktop/views/components/charts.chart.ts deleted file mode 100644 index 513db6076f..0000000000 --- a/src/client/app/desktop/views/components/charts.chart.ts +++ /dev/null @@ -1,42 +0,0 @@ -import Vue from 'vue'; -import { Line } from 'vue-chartjs'; -import * as mergeOptions from 'merge-options'; - -export default Vue.extend({ - extends: Line, - props: { - data: { - required: true - }, - opts: { - required: false - } - }, - watch: { - data() { - this.render(); - } - }, - mounted() { - this.render(); - }, - methods: { - render() { - this.renderChart(this.data, mergeOptions({ - responsive: true, - maintainAspectRatio: false, - scales: { - xAxes: [{ - type: 'time', - distribution: 'series' - }] - }, - tooltips: { - intersect: false, - mode: 'index', - position: 'nearest' - } - }, this.opts || {})); - } - } -}); diff --git a/src/client/app/desktop/views/components/charts.vue b/src/client/app/desktop/views/components/charts.vue deleted file mode 100644 index 2601e830ea..0000000000 --- a/src/client/app/desktop/views/components/charts.vue +++ /dev/null @@ -1,723 +0,0 @@ -<template> -<div class="gkgckalzgidaygcxnugepioremxvxvpt"> - <header> - <b>%i18n:@title%:</b> - <select v-model="chartType"> - <optgroup label="%i18n:@federation%"> - <option value="federation-instances">%i18n:@charts.federation-instances%</option> - <option value="federation-instances-total">%i18n:@charts.federation-instances-total%</option> - </optgroup> - <optgroup label="%i18n:@users%"> - <option value="users">%i18n:@charts.users%</option> - <option value="users-total">%i18n:@charts.users-total%</option> - </optgroup> - <optgroup label="%i18n:@notes%"> - <option value="notes">%i18n:@charts.notes%</option> - <option value="local-notes">%i18n:@charts.local-notes%</option> - <option value="remote-notes">%i18n:@charts.remote-notes%</option> - <option value="notes-total">%i18n:@charts.notes-total%</option> - </optgroup> - <optgroup label="%i18n:@drive%"> - <option value="drive-files">%i18n:@charts.drive-files%</option> - <option value="drive-files-total">%i18n:@charts.drive-files-total%</option> - <option value="drive">%i18n:@charts.drive%</option> - <option value="drive-total">%i18n:@charts.drive-total%</option> - </optgroup> - <optgroup label="%i18n:@network%"> - <option value="network-requests">%i18n:@charts.network-requests%</option> - <option value="network-time">%i18n:@charts.network-time%</option> - <option value="network-usage">%i18n:@charts.network-usage%</option> - </optgroup> - </select> - <div> - <span @click="span = 'day'" :class="{ active: span == 'day' }">%i18n:@per-day%</span> | <span @click="span = 'hour'" :class="{ active: span == 'hour' }">%i18n:@per-hour%</span> - </div> - </header> - <div> - <x-chart v-if="chart" :data="data[0]" :opts="data[1]"/> - </div> -</div> -</template> - -<script lang="ts"> -import Vue from 'vue'; -import XChart from './charts.chart.ts'; - -const colors = { - local: 'rgb(246, 88, 79)', - remote: 'rgb(65, 221, 222)', - - localPlus: 'rgb(52, 178, 118)', - remotePlus: 'rgb(158, 255, 209)', - localMinus: 'rgb(255, 97, 74)', - remoteMinus: 'rgb(255, 149, 134)', - - incoming: 'rgb(52, 178, 118)', - outgoing: 'rgb(255, 97, 74)', -}; - -const rgba = (color: string): string => { - return color.replace('rgb', 'rgba').replace(')', ', 0.1)'); -}; - -const limit = 35; - -const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b)); -const negate = arr => arr.map(x => -x); - -export default Vue.extend({ - components: { - XChart - }, - - data() { - return { - now: null, - chart: null, - chartType: 'notes', - span: 'hour' - }; - }, - - computed: { - data(): any { - if (this.chart == null) return null; - switch (this.chartType) { - case 'federation-instances': return this.federationInstancesChart(false); - case 'federation-instances-total': return this.federationInstancesChart(true); - case 'users': return this.usersChart(false); - case 'users-total': return this.usersChart(true); - case 'notes': return this.notesChart('combined'); - case 'local-notes': return this.notesChart('local'); - case 'remote-notes': return this.notesChart('remote'); - case 'notes-total': return this.notesTotalChart(); - case 'drive': return this.driveChart(); - case 'drive-total': return this.driveTotalChart(); - case 'drive-files': return this.driveFilesChart(); - case 'drive-files-total': return this.driveFilesTotalChart(); - case 'network-requests': return this.networkRequestsChart(); - case 'network-time': return this.networkTimeChart(); - case 'network-usage': return this.networkUsageChart(); - } - }, - - stats(): any[] { - const stats = - this.span == 'day' ? this.chart.perDay : - this.span == 'hour' ? this.chart.perHour : - null; - - return stats; - } - }, - - async created() { - this.now = new Date(); - - const [perHour, perDay] = await Promise.all([Promise.all([ - (this as any).api('charts/federation', { limit: limit, span: 'hour' }), - (this as any).api('charts/users', { limit: limit, span: 'hour' }), - (this as any).api('charts/notes', { limit: limit, span: 'hour' }), - (this as any).api('charts/drive', { limit: limit, span: 'hour' }), - (this as any).api('charts/network', { limit: limit, span: 'hour' }) - ]), Promise.all([ - (this as any).api('charts/federation', { limit: limit, span: 'day' }), - (this as any).api('charts/users', { limit: limit, span: 'day' }), - (this as any).api('charts/notes', { limit: limit, span: 'day' }), - (this as any).api('charts/drive', { limit: limit, span: 'day' }), - (this as any).api('charts/network', { limit: limit, span: 'day' }) - ])]); - - const chart = { - perHour: { - federation: perHour[0], - users: perHour[1], - notes: perHour[2], - drive: perHour[3], - network: perHour[4] - }, - perDay: { - federation: perDay[0], - users: perDay[1], - notes: perDay[2], - drive: perDay[3], - network: perDay[4] - } - }; - - this.chart = chart; - }, - - methods: { - getDate(i: number) { - const y = this.now.getFullYear(); - const m = this.now.getMonth(); - const d = this.now.getDate(); - const h = this.now.getHours(); - - return ( - this.span == 'day' ? new Date(y, m, d - i) : - this.span == 'hour' ? new Date(y, m, d, h - i) : - null - ); - }, - - format(arr) { - return arr.map((v, i) => ({ t: this.getDate(i).getTime(), y: v })); - }, - - federationInstancesChart(total: boolean): any { - return [{ - datasets: [{ - label: 'Instances', - fill: true, - backgroundColor: rgba(colors.localPlus), - borderColor: colors.localPlus, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(total - ? this.stats.federation.instance.total - : sum(this.stats.federation.instance.inc, negate(this.stats.federation.instance.dec))) - }] - }]; - }, - - notesChart(type: string): any { - return [{ - datasets: [{ - label: 'All', - fill: false, - borderColor: '#555', - borderWidth: 2, - borderDash: [4, 4], - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(type == 'combined' - ? sum(this.stats.notes.local.inc, negate(this.stats.notes.local.dec), this.stats.notes.remote.inc, negate(this.stats.notes.remote.dec)) - : sum(this.stats.notes[type].inc, negate(this.stats.notes[type].dec)) - ) - }, { - label: 'Renotes', - fill: true, - backgroundColor: 'rgba(161, 222, 65, 0.1)', - borderColor: '#a1de41', - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(type == 'combined' - ? sum(this.stats.notes.local.diffs.renote, this.stats.notes.remote.diffs.renote) - : this.stats.notes[type].diffs.renote - ) - }, { - label: 'Replies', - fill: true, - backgroundColor: 'rgba(247, 121, 108, 0.1)', - borderColor: '#f7796c', - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(type == 'combined' - ? sum(this.stats.notes.local.diffs.reply, this.stats.notes.remote.diffs.reply) - : this.stats.notes[type].diffs.reply - ) - }, { - label: 'Normal', - fill: true, - backgroundColor: 'rgba(65, 221, 222, 0.1)', - borderColor: '#41ddde', - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(type == 'combined' - ? sum(this.stats.notes.local.diffs.normal, this.stats.notes.remote.diffs.normal) - : this.stats.notes[type].diffs.normal - ) - }] - }, { - scales: { - yAxes: [{ - ticks: { - callback: value => { - return Vue.filter('number')(value); - } - } - }] - }, - tooltips: { - callbacks: { - label: (tooltipItem, data) => { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`; - } - } - } - }]; - }, - - notesTotalChart(): any { - return [{ - datasets: [{ - label: 'Combined', - fill: false, - borderColor: '#555', - borderWidth: 2, - borderDash: [4, 4], - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(sum(this.stats.notes.local.total, this.stats.notes.remote.total)) - }, { - label: 'Local', - fill: true, - backgroundColor: rgba(colors.local), - borderColor: colors.local, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.notes.local.total) - }, { - label: 'Remote', - fill: true, - backgroundColor: rgba(colors.remote), - borderColor: colors.remote, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.notes.remote.total) - }] - }, { - scales: { - yAxes: [{ - ticks: { - callback: value => { - return Vue.filter('number')(value); - } - } - }] - }, - tooltips: { - callbacks: { - label: (tooltipItem, data) => { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`; - } - } - } - }]; - }, - - usersChart(total: boolean): any { - return [{ - datasets: [{ - label: 'Combined', - fill: false, - borderColor: '#555', - borderWidth: 2, - borderDash: [4, 4], - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(total - ? sum(this.stats.users.local.total, this.stats.users.remote.total) - : sum(this.stats.users.local.inc, negate(this.stats.users.local.dec), this.stats.users.remote.inc, negate(this.stats.users.remote.dec)) - ) - }, { - label: 'Local', - fill: true, - backgroundColor: rgba(colors.local), - borderColor: colors.local, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(total - ? this.stats.users.local.total - : sum(this.stats.users.local.inc, negate(this.stats.users.local.dec)) - ) - }, { - label: 'Remote', - fill: true, - backgroundColor: rgba(colors.remote), - borderColor: colors.remote, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(total - ? this.stats.users.remote.total - : sum(this.stats.users.remote.inc, negate(this.stats.users.remote.dec)) - ) - }] - }, { - scales: { - yAxes: [{ - ticks: { - callback: value => { - return Vue.filter('number')(value); - } - } - }] - }, - tooltips: { - callbacks: { - label: (tooltipItem, data) => { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`; - } - } - } - }]; - }, - - driveChart(): any { - return [{ - datasets: [{ - label: 'All', - fill: false, - borderColor: '#555', - borderWidth: 2, - borderDash: [4, 4], - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(sum(this.stats.drive.local.incSize, negate(this.stats.drive.local.decSize), this.stats.drive.remote.incSize, negate(this.stats.drive.remote.decSize))) - }, { - label: 'Local +', - fill: true, - backgroundColor: rgba(colors.localPlus), - borderColor: colors.localPlus, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.drive.local.incSize) - }, { - label: 'Local -', - fill: true, - backgroundColor: rgba(colors.localMinus), - borderColor: colors.localMinus, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(negate(this.stats.drive.local.decSize)) - }, { - label: 'Remote +', - fill: true, - backgroundColor: rgba(colors.remotePlus), - borderColor: colors.remotePlus, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.drive.remote.incSize) - }, { - label: 'Remote -', - fill: true, - backgroundColor: rgba(colors.remoteMinus), - borderColor: colors.remoteMinus, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(negate(this.stats.drive.remote.decSize)) - }] - }, { - scales: { - yAxes: [{ - ticks: { - callback: value => { - return Vue.filter('bytes')(value, 1); - } - } - }] - }, - tooltips: { - callbacks: { - label: (tooltipItem, data) => { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${Vue.filter('bytes')(tooltipItem.yLabel, 1)}`; - } - } - } - }]; - }, - - driveTotalChart(): any { - return [{ - datasets: [{ - label: 'Combined', - fill: false, - borderColor: '#555', - borderWidth: 2, - borderDash: [4, 4], - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(sum(this.stats.drive.local.totalSize, this.stats.drive.remote.totalSize)) - }, { - label: 'Local', - fill: true, - backgroundColor: rgba(colors.local), - borderColor: colors.local, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.drive.local.totalSize) - }, { - label: 'Remote', - fill: true, - backgroundColor: rgba(colors.remote), - borderColor: colors.remote, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.drive.remote.totalSize) - }] - }, { - scales: { - yAxes: [{ - ticks: { - callback: value => { - return Vue.filter('bytes')(value, 1); - } - } - }] - }, - tooltips: { - callbacks: { - label: (tooltipItem, data) => { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${Vue.filter('bytes')(tooltipItem.yLabel, 1)}`; - } - } - } - }]; - }, - - driveFilesChart(): any { - return [{ - datasets: [{ - label: 'All', - fill: false, - borderColor: '#555', - borderWidth: 2, - borderDash: [4, 4], - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(sum(this.stats.drive.local.incCount, negate(this.stats.drive.local.decCount), this.stats.drive.remote.incCount, negate(this.stats.drive.remote.decCount))) - }, { - label: 'Local +', - fill: true, - backgroundColor: rgba(colors.localPlus), - borderColor: colors.localPlus, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.drive.local.incCount) - }, { - label: 'Local -', - fill: true, - backgroundColor: rgba(colors.localMinus), - borderColor: colors.localMinus, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(negate(this.stats.drive.local.decCount)) - }, { - label: 'Remote +', - fill: true, - backgroundColor: rgba(colors.remotePlus), - borderColor: colors.remotePlus, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.drive.remote.incCount) - }, { - label: 'Remote -', - fill: true, - backgroundColor: rgba(colors.remoteMinus), - borderColor: colors.remoteMinus, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(negate(this.stats.drive.remote.decCount)) - }] - }, { - scales: { - yAxes: [{ - ticks: { - callback: value => { - return Vue.filter('number')(value); - } - } - }] - }, - tooltips: { - callbacks: { - label: (tooltipItem, data) => { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`; - } - } - } - }]; - }, - - driveFilesTotalChart(): any { - return [{ - datasets: [{ - label: 'Combined', - fill: false, - borderColor: '#555', - borderWidth: 2, - borderDash: [4, 4], - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(sum(this.stats.drive.local.totalCount, this.stats.drive.remote.totalCount)) - }, { - label: 'Local', - fill: true, - backgroundColor: rgba(colors.local), - borderColor: colors.local, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.drive.local.totalCount) - }, { - label: 'Remote', - fill: true, - backgroundColor: rgba(colors.remote), - borderColor: colors.remote, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.drive.remote.totalCount) - }] - }, { - scales: { - yAxes: [{ - ticks: { - callback: value => { - return Vue.filter('number')(value); - } - } - }] - }, - tooltips: { - callbacks: { - label: (tooltipItem, data) => { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${Vue.filter('number')(tooltipItem.yLabel)}`; - } - } - } - }]; - }, - - networkRequestsChart(): any { - return [{ - datasets: [{ - label: 'Incoming', - fill: true, - backgroundColor: rgba(colors.localPlus), - borderColor: colors.localPlus, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.network.incomingRequests) - }] - }]; - }, - - networkTimeChart(): any { - const data = []; - - for (let i = 0; i < limit; i++) { - data.push(this.stats.network.incomingRequests[i] != 0 ? (this.stats.network.totalTime[i] / this.stats.network.incomingRequests[i]) : 0); - } - - return [{ - datasets: [{ - label: 'Avg time (ms)', - fill: true, - backgroundColor: rgba(colors.localPlus), - borderColor: colors.localPlus, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(data) - }] - }]; - }, - - networkUsageChart(): any { - return [{ - datasets: [{ - label: 'Incoming', - fill: true, - backgroundColor: rgba(colors.incoming), - borderColor: colors.incoming, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.network.incomingBytes) - }, { - label: 'Outgoing', - fill: true, - backgroundColor: rgba(colors.outgoing), - borderColor: colors.outgoing, - borderWidth: 2, - pointBackgroundColor: '#fff', - lineTension: 0, - data: this.format(this.stats.network.outgoingBytes) - }] - }, { - scales: { - yAxes: [{ - ticks: { - callback: value => { - return Vue.filter('bytes')(value, 1); - } - } - }] - }, - tooltips: { - callbacks: { - label: (tooltipItem, data) => { - const label = data.datasets[tooltipItem.datasetIndex].label || ''; - return `${label}: ${Vue.filter('bytes')(tooltipItem.yLabel, 1)}`; - } - } - } - }]; - }, - } -}); -</script> - -<style lang="stylus" scoped> -.gkgckalzgidaygcxnugepioremxvxvpt - padding 32px - background #fff - box-shadow 0 2px 8px rgba(#000, 0.1) - - * - user-select none - - > header - display flex - margin 0 0 1em 0 - padding 0 0 8px 0 - font-size 1em - color #555 - border-bottom solid 1px #eee - - > b - margin-right 8px - - > *:last-child - margin-left auto - - * - &:not(.active) - color var(--primary) - cursor pointer - - > div - > * - display block - height 350px - -</style> diff --git a/src/client/app/desktop/views/pages/stats/stats.vue b/src/client/app/desktop/views/pages/stats/stats.vue deleted file mode 100644 index 219885fb9e..0000000000 --- a/src/client/app/desktop/views/pages/stats/stats.vue +++ /dev/null @@ -1,65 +0,0 @@ -<template> -<div class="tcrwdhwpuxrwmcttxjcsehgpagpstqey"> - <div v-if="stats" class="stats"> - <div><b>%fa:user% {{ stats.originalUsersCount | number }}</b><span>%i18n:@original-users%</span></div> - <div><span>%fa:user% {{ stats.usersCount | number }}</span><span>%i18n:@all-users%</span></div> - <div><b>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</b><span>%i18n:@original-notes%</span></div> - <div><span>%fa:pencil-alt% {{ stats.notesCount | number }}</span><span>%i18n:@all-notes%</span></div> - </div> - <div> - <x-charts/> - </div> -</div> -</template> - -<script lang="ts"> -import Vue from "vue"; -import XCharts from "../../components/charts.vue"; - -export default Vue.extend({ - components: { - XCharts - }, - data() { - return { - stats: null - }; - }, - created() { - (this as any).api('stats').then(stats => { - this.stats = stats; - }); - }, -}); -</script> - -<style lang="stylus"> - - -.tcrwdhwpuxrwmcttxjcsehgpagpstqey - width 100% - padding 16px - - > .stats - display flex - justify-content center - margin 0 auto 16px auto - padding 32px - background #fff - box-shadow 0 2px 8px rgba(#000, 0.1) - - > div - flex 1 - text-align center - - > *:first-child - display block - color var(--primary) - - > *:last-child - font-size 70% - - > div - max-width 950px - margin 0 auto -</style>