Resolve #2978
This commit is contained in:
syuilo
parent
7c7f32d9a6
commit
d3d612a89b
3 changed files with 74 additions and 63 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue