mirror/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-23 00:29:22 +09:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

Remove apexcharts

Browse Source 
Resolve #7907
This commit is contained in:
syuilo 2021-10-24 12:32:41 +09:00
parent 4f04421cb3
commit 26928ab407
5 changed files with 47 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -60,9 +60,6 @@
"@types/jsonld": "1.5.6",
"@types/katex": "0.11.1",
"@types/koa": "2.13.4",
"@types/koa__cors": "3.0.3",
"@types/koa__multer": "2.0.3",
"@types/koa__router": "8.0.8",
"@types/koa-bodyparser": "4.3.3",
"@types/koa-cors": "0.0.2",
"@types/koa-favicon": "2.0.21",
@ -70,6 +67,9 @@
"@types/koa-mount": "4.0.1",
"@types/koa-send": "4.1.3",
"@types/koa-views": "7.0.0",
"@types/koa__cors": "3.0.3",
"@types/koa__multer": "2.0.3",
"@types/koa__router": "8.0.8",
"@types/markdown-it": "12.2.3",
"@types/matter-js": "0.17.5",
"@types/mocha": "8.2.3",
@ -106,7 +106,6 @@
"@typescript-eslint/parser": "5.0.0",
"@vue/compiler-sfc": "3.2.20",
"abort-controller": "3.0.0",
"apexcharts": "3.28.3",
"autobind-decorator": "2.4.0",
"autosize": "4.0.4",
"autwh": "0.1.0",

41
src/client/components/chart.vue
View File

@ -89,6 +89,16 @@ export default defineComponent({
required: false,
default: false
},
stacked: {
type: Boolean,
required: false,
default: false
},
aspectRatio: {
type: Number,
required: false,
default: null
},
},
setup(props) {
@ -157,7 +167,7 @@ export default defineComponent({
})),
},
options: {
aspectRatio: 2.5,
aspectRatio: props.aspectRatio || 2.5,
layout: {
padding: {
left: 16,
@ -174,7 +184,6 @@ export default defineComponent({
unit: props.span === 'day' ? 'month' : 'day',
},
grid: {
display: props.detailed,
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
},
@ -190,6 +199,7 @@ export default defineComponent({
},
y: {
position: 'left',
stacked: props.stacked,
grid: {
color: gridColor,
borderColor: 'rgb(0, 0, 0, 0)',
@ -204,6 +214,7 @@ export default defineComponent({
},
plugins: {
legend: {
display: props.detailed,
position: 'bottom',
labels: {
boxWidth: 16,
@ -583,6 +594,30 @@ export default defineComponent({
};
};
const fetchPerUserNotesChart = async (): Promise<typeof data> => {
const raw = await os.api('charts/user/notes', { userId: props.args.user.id, limit: props.limit, span: props.span });
return {
series: [...(props.args.withoutAll ? [] : [{
name: 'All',
type: 'line',
borderDash: [5, 5],
data: format(sum(raw.inc, negate(raw.dec))),
}]), {
name: 'Renotes',
type: 'area',
data: format(raw.diffs.renote),
}, {
name: 'Replies',
type: 'area',
data: format(raw.diffs.reply),
}, {
name: 'Normal',
type: 'area',
data: format(raw.diffs.normal),
}],
};
};
const fetchAndRender = async () => {
const fetchData = () => {
switch (props.src) {
@ -611,6 +646,8 @@ export default defineComponent({
case 'instance-drive-usage-total': return fetchInstanceDriveUsageChart(true);
case 'instance-drive-files': return fetchInstanceDriveFilesChart(false);
case 'instance-drive-files-total': return fetchInstanceDriveFilesChart(true);
case 'per-user-notes': return fetchPerUserNotesChart();
}
};
fetching.value = true;

101
src/client/pages/settings/drive.vue
View File

@ -35,7 +35,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import * as tinycolor from 'tinycolor2';
import ApexCharts from 'apexcharts';
import FormButton from '@client/components/debobigego/button.vue';
import FormGroup from '@client/components/debobigego/group.vue';
import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
@ -44,6 +43,8 @@ import * as os from '@client/os';
import bytes from '@client/filters/bytes';
import * as symbols from '@client/symbols';
// TODO: render chart
export default defineComponent({
components: {
FormBase,
@ -117,104 +118,6 @@ export default defineComponent({
});
},
renderChart() {
os.api('charts/user/drive', {
userId: this.$i.id,
span: 'day',
limit: 21
}).then(stats => {
const addition = [];
const deletion = [];
const now = new Date();
const y = now.getFullYear();
const m = now.getMonth();
const d = now.getDate();
for (let i = 0; i < 21; i++) {
const x = new Date(y, m, d - i);
addition.push([
x,
stats.incSize[i]
]);
deletion.push([
x,
-stats.decSize[i]
]);
}
const chart = new ApexCharts(this.$refs.chart, {
chart: {
type: 'bar',
stacked: true,
height: 150,
toolbar: {
show: false
},
zoom: {
enabled: false
}
},
plotOptions: {
bar: {
columnWidth: '80%'
}
},
grid: {
clipMarkers: false,
borderColor: 'rgba(0, 0, 0, 0.1)',
xaxis: {
lines: {
show: true,
}
},
},
tooltip: {
shared: true,
intersect: false,
theme: this.$store.state.darkMode ? 'dark' : 'light',
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
series: [{
name: 'Additions',
data: addition
}, {
name: 'Deletions',
data: deletion
}],
xaxis: {
type: 'datetime',
labels: {
style: {
colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--fg')).toRgbString()
}
},
axisBorder: {
color: 'rgba(0, 0, 0, 0.1)'
},
axisTicks: {
color: 'rgba(0, 0, 0, 0.1)'
},
crosshairs: {
width: 1,
opacity: 1
}
},
yaxis: {
labels: {
formatter: v => bytes(v, 0),
style: {
colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--fg')).toRgbString()
}
}
}
});
chart.render();
});
},
bytes
}
});

96
src/client/pages/user/index.activity.vue
View File

@ -3,20 +3,21 @@
<template #header><i class="fas fa-chart-bar" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
<div style="padding: 8px;">
<div ref="chart"></div>
<MkChart src="per-user-notes" :args="{ user, withoutAll: true }" span="day" :limit="limit" :stacked="true" :detailed="false" :aspect-ratio="6"/>
</div>
</MkContainer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import ApexCharts from 'apexcharts';
import * as os from '@client/os';
import MkContainer from '@client/components/ui/container.vue';
import MkChart from '@client/components/chart.vue';
export default defineComponent({
components: {
MkContainer,
MkChart,
},
props: {
user: {
@ -29,96 +30,5 @@ export default defineComponent({
default: 40
}
},
data() {
return {
fetching: true,
data: [],
peak: null,
};
},
mounted() {
os.api('charts/user/notes', {
userId: this.user.id,
span: 'day',
limit: this.limit
}).then(stats => {
const normal = [];
const reply = [];
const renote = [];
const now = new Date();
const y = now.getFullYear();
const m = now.getMonth();
const d = now.getDate();
for (let i = 0; i < this.limit; 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 ApexCharts(this.$refs.chart, {
chart: {
type: 'bar',
stacked: true,
height: 100,
sparkline: {
enabled: true
},
},
plotOptions: {
bar: {
columnWidth: '40%'
}
},
dataLabels: {
enabled: false
},
grid: {
clipMarkers: false,
padding: {
top: 0,
right: 8,
bottom: 0,
left: 8
}
},
tooltip: {
shared: true,
intersect: false,
theme: this.$store.state.darkMode ? 'dark' : 'light',
},
series: [{
name: 'Normal',
data: normal
}, {
name: 'Reply',
data: reply
}, {
name: 'Renote',
data: renote
}],
xaxis: {
type: 'datetime',
crosshairs: {
width: 1,
opacity: 1
}
}
});
chart.render();
});
}
});
</script>

67
yarn.lock
View File

@ -1809,18 +1809,6 @@ anymatch@~3.1.1:
normalize-path "^3.0.0"
picomatch "^2.0.4"
apexcharts@3.28.3:
version "3.28.3"
resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.28.3.tgz#22a6d9b234c82f6c2e1dd4aebba05b7603e2b1d2"
integrity sha512-EhghB2P27/Gjhwct8sSS0V63mdpRMx/ikH34dwUTqZQnkAEyOS/RKDmYjXBNA7zsAKBE/pThOdoTya6ADyk6zQ==
dependencies:
svg.draggable.js "^2.2.2"
svg.easing.js "^2.0.0"
svg.filter.js "^2.0.2"
svg.pathmorphing.js "^0.1.3"
svg.resize.js "^1.4.3"
svg.select.js "^3.0.1"
app-root-path@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-3.0.0.tgz#210b6f43873227e18a4b810a032283311555d5ad"
@ -10529,61 +10517,6 @@ sver-compat@^1.5.0:
es6-iterator "^2.0.1"
es6-symbol "^3.1.1"
svg.draggable.js@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
dependencies:
svg.js "^2.0.1"
svg.easing.js@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
integrity sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=
dependencies:
svg.js ">=2.3.x"
svg.filter.js@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
integrity sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=
dependencies:
svg.js "^2.2.5"
svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
version "2.7.1"
resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
svg.pathmorphing.js@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
dependencies:
svg.js "^2.4.0"
svg.resize.js@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
dependencies:
svg.js "^2.6.5"
svg.select.js "^2.1.2"
svg.select.js@^2.1.2:
version "2.1.2"
resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
dependencies:
svg.js "^2.2.5"
svg.select.js@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
dependencies:
svg.js "^2.6.5"
svgo@^0.7.0:
version "0.7.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"