From d3d612a89b682f8a6cf432b9df78621e4baf005a Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 23 Oct 2018 06:47:06 +0900 Subject: [PATCH] Resolve #2978 --- package.json | 2 +- .../views/pages/deck/deck.hashtag-column.vue | 58 +++++++------- .../views/pages/deck/deck.user-column.vue | 77 +++++++++++-------- 3 files changed, 74 insertions(+), 63 deletions(-) diff --git a/package.json b/package.json index 2b531cce3..384f3648c 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "format": "gulp format" }, "dependencies": { - "@antv/g2": "3.3.1", "@fortawesome/fontawesome-svg-core": "1.2.6", "@fortawesome/free-brands-svg-icons": "5.4.1", "@fortawesome/free-regular-svg-icons": "5.4.1", @@ -85,6 +84,7 @@ "@types/websocket": "0.0.40", "@types/ws": "6.0.1", "animejs": "2.2.0", + "apexcharts": "2.1.5", "autobind-decorator": "2.1.0", "autosize": "4.0.2", "autwh": "0.1.0", diff --git a/src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue b/src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue index 5d8c25676..488d03c14 100644 --- a/src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue +++ b/src/client/app/desktop/views/pages/deck/deck.hashtag-column.vue @@ -15,7 +15,7 @@ import Vue from 'vue'; import XColumn from './deck.column.vue'; import XHashtagTl from './deck.hashtag-tl.vue'; -import * as G2 from '@antv/g2'; +import * as ApexCharts from 'apexcharts'; import * as tinycolor from 'tinycolor2'; export default Vue.extend({ @@ -43,7 +43,7 @@ export default Vue.extend({ (this as any).api('charts/hashtag', { tag: this.tag, span: 'hour', - limit: 30 + limit: 24 }).then(stats => { const data = []; @@ -53,36 +53,35 @@ export default Vue.extend({ const d = now.getDate(); const h = now.getHours(); - for (let i = 0; i < 30; i++) { - const x = new Date(y, m, d, h - i + 1); - data.push({ - x: x, - count: stats.count[i] - }); + for (let i = 0; i < 24; i++) { + const x = new Date(y, m, d, h - i); + data.push([x, stats.count[i]]); } - const chart = new G2.Chart({ - container: this.$refs.chart as HTMLDivElement, - forceFit: true, - height: 70, - padding: 8, - renderer: 'svg' + const color = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--primary')); + + const chart = new ApexCharts(this.$refs.chart, { + chart: { + type: 'area', + height: 60, + sparkline: { + enabled: true + }, + }, + stroke: { + curve: 'straight', + width: 2 + }, + series: [{ + name: 'count', + data: data + }], + xaxis: { + type: 'datetime', + }, + colors: [`#${color.clone().toHex()}`] }); - const text = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--primary')); - - chart.area().position('x*count').color(`l(100) 0:${text.clone().setAlpha(0.5).toRgbString()} 1:${text.clone().setAlpha(0.25).toRgbString()}`); - chart.line().position('x*count').color(`#${text.clone().toHex()}`).size(2); - chart.legend(false); - chart.axis('x', false); - chart.axis('count', false); - chart.tooltip(true, { - showTitle: false, - crosshairs: { - type: 'line' - } - }); - chart.source(data); chart.render(); }); } @@ -94,7 +93,8 @@ export default Vue.extend({ background var(--deckColumnBg) > .chart - margin 16px 0 + padding 16px + margin-bottom 16px background var(--face) > .tl diff --git a/src/client/app/desktop/views/pages/deck/deck.user-column.vue b/src/client/app/desktop/views/pages/deck/deck.user-column.vue index b707bfb09..f0a2257ba 100644 --- a/src/client/app/desktop/views/pages/deck/deck.user-column.vue +++ b/src/client/app/desktop/views/pages/deck/deck.user-column.vue @@ -59,7 +59,7 @@ import Menu from '../../../../common/views/components/menu.vue'; import MkUserListsWindow from '../../components/user-lists-window.vue'; import Ok from '../../../../common/views/components/ok.vue'; import { concat } from '../../../../../../prelude/array'; -import * as G2 from '@antv/g2'; +import * as ApexCharts from 'apexcharts'; const fetchLimit = 10; @@ -137,7 +137,9 @@ export default Vue.extend({ span: 'day', limit: 30 }).then(stats => { - const data = []; + const normal = []; + const reply = []; + const renote = []; const now = new Date(); const y = now.getFullYear(); @@ -145,40 +147,49 @@ export default Vue.extend({ const d = now.getDate(); for (let i = 0; i < 30; i++) { - const x = new Date(y, m, d - i + 1); - data.push({ - x: x, - type: 'normal', - count: stats.diffs.normal[i] - }); - data.push({ - x: x, - type: 'reply', - count: stats.diffs.reply[i] - }); - data.push({ - x: x, - type: 'renote', - count: stats.diffs.renote[i] - }); + const x = new Date(y, m, d - i); + normal.push([ + x, + stats.diffs.normal[i] + ]); + reply.push([ + x, + stats.diffs.reply[i] + ]); + renote.push([ + x, + stats.diffs.renote[i] + ]); } - const chart = new G2.Chart({ - container: this.$refs.chart as HTMLDivElement, - forceFit: true, - height: 100, - padding: 16, - renderer: 'svg' + const chart = new ApexCharts(this.$refs.chart, { + chart: { + type: 'bar', + stacked: true, + height: 60, + sparkline: { + enabled: true + }, + }, + tooltip: { + shared: true, + intersect: false + }, + series: [{ + name: 'Normal', + data: normal + }, { + name: 'Reply', + data: reply + }, { + name: 'Renote', + data: renote + }], + xaxis: { + type: 'datetime' + } }); - chart.intervalStack().position('x*count').color('type'); - chart.legend(false); - chart.axis('x', false); - chart.axis('count', false); - chart.tooltip(true, { - showTitle: false, - }); - chart.source(data); chart.render(); }); }); @@ -364,9 +375,9 @@ export default Vue.extend({ border-radius 4px > .activity + padding 16px margin-bottom 16px background var(--face) - line-height 0 > .tl background var(--face)